/* Doug & Danny - Vertical Transportation Consulting
   One stylesheet, no build step. Mobile-first; wider layouts are added at the bottom. */

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

/* Arabic letters only (IBM Plex Sans Arabic, SIL Open Font License). A browser downloads
   a weight only when Arabic text on the page needs it. */
@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/ibm-plex-sans-arabic-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/ibm-plex-sans-arabic-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
    --ink: #070b14;
    --ink-2: #0c1322;
    --ink-3: #131c31;
    --text: #ece9e2;
    --muted: #9aa4b6;
    --line: rgba(255, 255, 255, 0.1);
    --brass: #c9a35a;
    --brass-hi: #e9cd8f;
    --brass-ink: #c9a35a;
    --teal: #4fd1c5;
    --sky: #7cb7ff;
    --coral: #f2836b;
    --ivory: #f4f0e8;

    --font: "Manrope", "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --gutter: clamp(20px, 5vw, 48px);
    --header-h: 68px;
    --radius: 16px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 12px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.nav-open {
    overflow: hidden;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    display: block;
}

:focus-visible {
    outline: 2px solid var(--brass-hi);
    outline-offset: 3px;
    border-radius: 4px;
}

.container {
    width: min(1200px, 100% - 2 * var(--gutter));
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    inset-inline-start: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--brass-hi);
    color: #0b0f18;
    font-weight: 700;
    border-radius: 8px;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 12px;
}

/* ---------- Type ---------- */

h1 {
    font-size: clamp(2rem, 1.25rem + 3.3vw, 3.75rem);
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

h2 {
    font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.55rem);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

h3 {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--brass-ink);
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    flex: 0 0 28px;
    height: 1px;
    background: currentColor;
}

.lede {
    max-width: 58ch;
    margin-top: 22px;
    color: var(--muted);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
}

.body-lg {
    margin-top: 22px;
    color: var(--muted);
    font-size: 1.06rem;
    line-height: 1.75;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s, background 0.25s;
}

.btn-brass {
    background: linear-gradient(180deg, #f0d9a3 0%, #c9a35a 100%);
    color: #0b0f18;
    box-shadow: 0 8px 28px -12px rgba(201, 163, 90, 0.7);
}

.btn-brass:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -12px rgba(201, 163, 90, 0.9);
}

.btn-ghost {
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--text);
}

.btn-ghost:hover {
    border-color: var(--brass);
    color: var(--brass-hi);
}

.btn-lg {
    min-height: 56px;
    padding: 16px 28px;
    font-size: 1rem;
}

/* ---------- Header ---------- */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: var(--header-h);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}

/* The blurred backing sits on its own layer. Putting the blur on the header itself
   would trap the phone menu inside the header bar instead of letting it fill the screen. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(7, 11, 20, 0.86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity 0.3s;
}

.site-header.is-scrolled,
.nav-open .site-header {
    border-bottom-color: var(--line);
}

.site-header.is-scrolled::before,
.nav-open .site-header::before {
    opacity: 1;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 100%;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 38px;
    height: 38px;
    flex: none;
}

.brand-mark rect {
    fill: none;
    stroke: var(--brass);
    stroke-width: 1.6;
}

.brand-mark path {
    fill: var(--brass-hi);
}

.brand-mark path + path {
    fill: var(--brass);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-name {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.brand-sub {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.nav-toggle span {
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.3s var(--ease), opacity 0.2s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Language choice: English / Arabic. Short labels where the header is narrow, full names elsewhere. */

.header-inner {
    gap: 12px;
}

.brand {
    min-width: 0;
}

.brand-name {
    white-space: nowrap;
}

/* The menu button keeps its size; when room is short the line under the company name wraps instead. */
.site-header .nav-toggle {
    flex: none;
}

.lang-switch {
    display: inline-flex;
    flex: none;
    margin-inline-start: auto;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.lang-switch .lang-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 9px;
    border-radius: 7px;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
}

.lang-switch .lang-option:hover {
    color: var(--text);
}

.lang-switch .lang-option[aria-current="true"] {
    background: rgba(201, 163, 90, 0.16);
    color: var(--brass-hi);
}

.lang-name {
    display: none;
}

/* Light / dark icon: the sun is shown in the dark look (press for light), the moon in the light look. */

.theme-toggle,
.nav-theme {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.theme-toggle {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
}

.theme-toggle:hover,
.nav-theme:hover {
    border-color: var(--brass);
    color: var(--brass-hi);
}

.theme-toggle svg,
.nav-theme svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-moon,
html[data-theme="light"] .icon-sun {
    display: none;
}

html[data-theme="light"] .icon-moon {
    display: block;
}

.nav-theme {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    margin-top: 12px;
    padding: 10px 16px;
    font-weight: 600;
}

/* Without scripts the look cannot be changed, so the icon is not offered. */
html:not(.js) .theme-toggle,
html:not(.js) .nav-theme {
    display: none;
}

@media (max-width: 559.98px) {
    /* Phones: only the other language is offered in the header (both are at the foot of the page). */
    .lang-switch .lang-option[aria-current="true"] {
        display: none;
    }
}

@media (max-width: 399.98px) {
    /* Narrow phones: everything in the header bar is drawn a little tighter so the company name,
       the language choice, the light/dark icon and the menu button all fit. */
    .header-inner,
    .site-header .brand {
        gap: 8px;
    }

    .site-header .brand-mark {
        width: 30px;
        height: 30px;
    }

    .theme-toggle {
        width: 40px;
    }

    .site-header .nav-toggle {
        width: 44px;
    }

    .lang-switch .lang-option {
        padding: 0 6px;
    }
}

@media (max-width: 351.98px) {
    /* The narrowest phones have no room for the icon in the header bar; it is in the menu instead. */
    .theme-toggle {
        display: none;
    }

    .js .nav-theme {
        display: flex;
    }
}

@media (min-width: 560px) {
    .lang-name {
        display: inline;
    }

    .lang-short {
        display: none;
    }

    .lang-switch .lang-option {
        padding: 0 12px;
    }
}

@media (min-width: 980px) {
    .header-inner {
        gap: 20px;
    }

    .site-header .site-nav {
        flex: none;
        margin-inline-start: auto;
    }

    .site-header .nav-link {
        white-space: nowrap;
    }

    .lang-switch {
        order: 3;
        margin-inline-start: 0;
    }

    .theme-toggle {
        order: 4;
        margin-inline-start: -8px;
    }
}

@media (min-width: 980px) and (max-width: 1279.98px) {
    /* Narrow desktop windows: the header holds the menu too, so only the other language is offered. */
    .lang-name {
        display: none;
    }

    .lang-short {
        display: inline;
    }

    .lang-switch .lang-option {
        padding: 0 9px;
    }

    .lang-switch .lang-option[aria-current="true"] {
        display: none;
    }

    .site-header .site-nav {
        gap: 20px;
    }
}

.site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px var(--gutter) 32px;
    background: rgba(7, 11, 20, 0.97);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.25s var(--ease), visibility 0s 0.25s;
}

.site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.25s, transform 0.25s var(--ease);
}

.nav-link {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.3rem;
    font-weight: 600;
}

.nav-cta {
    margin-top: 24px;
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    padding-top: calc(var(--header-h) + clamp(24px, 4vw, 44px));
    padding-bottom: clamp(40px, 6vw, 72px);
    overflow: hidden;
    isolation: isolate;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 55% at 78% 30%, rgba(201, 163, 90, 0.13), transparent 70%),
        radial-gradient(50% 50% at 8% 8%, rgba(72, 108, 190, 0.16), transparent 70%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 96px);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
}

.hero-grid {
    display: grid;
    gap: 36px;
}

.hero-grid > * {
    min-width: 0;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero-actions .btn {
    flex: 1 1 200px;
}

.hero-branches {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    color: var(--muted);
    font-size: 0.92rem;
}

.hero-branches svg {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 2px;
    fill: none;
    stroke: var(--brass);
    stroke-width: 1.6;
}

/* Tower picture */

.tower-wrap {
    position: relative;
    max-width: 480px;
    margin-inline: auto;
}

.tower {
    width: 100%;
    height: auto;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.star {
    fill: #fff;
    opacity: 0.5;
    animation: twinkle 5s ease-in-out infinite;
}

@keyframes twinkle {
    50% {
        opacity: 0.12;
    }
}

.t-back {
    fill: #0b1221;
    stroke: rgba(255, 255, 255, 0.045);
}

.t-back-win {
    fill: var(--brass);
    opacity: 0.2;
}

.t-body {
    fill: url(#t-body);
    stroke: rgba(255, 255, 255, 0.12);
}

.t-edge {
    stroke: rgba(255, 255, 255, 0.35);
}

.t-beacon {
    fill: #ff7a66;
}

.t-beacon-glow {
    fill: #ff7a66;
    animation: beacon 2.4s ease-in-out infinite;
}

@keyframes beacon {
    0%,
    100% {
        opacity: 0.15;
    }
    50% {
        opacity: 0.9;
    }
}

.win {
    fill: rgba(255, 255, 255, 0.05);
    transition: fill 1.4s ease;
}

.win.lit {
    fill: rgba(233, 205, 143, 0.5);
}

.win-podium.lit {
    fill: rgba(240, 217, 163, 0.72);
}

.floor-band {
    fill: var(--brass-hi);
    opacity: 0;
    transition: opacity 0.25s;
}

.floor-line {
    stroke: rgba(255, 255, 255, 0.06);
}

.floor-label {
    fill: rgba(255, 255, 255, 0.3);
    font-family: var(--mono);
    font-size: 9px;
    transition: fill 0.25s;
}

.floor-call {
    fill: transparent;
    stroke: rgba(255, 255, 255, 0.16);
    transition: fill 0.25s, stroke 0.25s;
}

.floor-hit {
    fill: transparent;
    cursor: pointer;
}

.floor:hover .floor-band {
    opacity: 0.14;
}

.floor.is-called .floor-band {
    opacity: 0.22;
}

.floor:hover .floor-label,
.floor.is-called .floor-label {
    fill: var(--brass-hi);
}

.floor.is-called .floor-call {
    fill: var(--brass-hi);
    stroke: var(--brass-hi);
    animation: call 0.9s ease-in-out infinite;
}

@keyframes call {
    50% {
        opacity: 0.35;
    }
}

.t-core {
    pointer-events: none;
}

.t-core-box {
    fill: #080d19;
    stroke: rgba(201, 163, 90, 0.3);
}

.t-shaft {
    fill: #03060c;
}

.t-rope {
    stroke: rgba(255, 255, 255, 0.09);
}

.car-body {
    fill: url(#t-car);
}

.car-glow {
    fill: var(--brass-hi);
    opacity: 0.3;
    transition: opacity 0.4s;
}

.car-door {
    stroke: #7a5f25;
    stroke-width: 1;
    transition: stroke-width 0.45s var(--ease), stroke 0.45s;
}

.car.is-open .car-glow {
    opacity: 0.95;
}

.car.is-open .car-door {
    stroke: #fffaf0;
    stroke-width: 9;
}

.t-ground {
    stroke: rgba(201, 163, 90, 0.5);
}

.tower-hud {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.hud-car {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(12, 19, 34, 0.9);
}

.hud-name {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hud-readout {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hud-floor {
    min-width: 2ch;
    color: var(--brass-hi);
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 600;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.hud-dir {
    width: 0;
    height: 0;
    border-inline: 5px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255, 0.16);
    transition: transform 0.25s, border-color 0.25s;
}

.hud-car[data-dir="up"] .hud-dir {
    border-bottom-color: var(--brass-hi);
}

.hud-car[data-dir="down"] .hud-dir {
    border-bottom-color: var(--brass-hi);
    transform: rotate(180deg);
}

.tower-hint {
    margin-top: 12px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-align: center;
}

/* Figures */

/* The figures line is on the first screen at every size (owner, 12 Nov 2026).
   Phones and tablets: straight under the headline, before the paragraph, so it is seen
   without scrolling whatever the height of the phone. Laptops and desktops: along the
   bottom of the first screen (see "Hero on one screen" further down). */

/* Phones and tablets: the picture is on top (owner, 12 Nov 2026), as a banner on a dark card,
   then the headline, then the figures line. The banner is as tall as the screen allows after the
   headline and the figures (--hero-text is the room they need), so all three are on the first screen. */

.hero {
    --hero-text: 512px;
    padding-top: calc(var(--header-h) + 14px);
}

.hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "picture"
        "eyebrow"
        "title"
        "stats"
        "lede"
        "actions"
        "branches";
    gap: 0;
}

.hero-copy {
    display: contents;
}

.hero-copy > .eyebrow {
    grid-area: eyebrow;
}

.hero-copy > h1 {
    grid-area: title;
    font-size: clamp(1.7rem, 0.6rem + 5.2vw, 3.75rem);
}

.hero-copy > .lede {
    grid-area: lede;
}

.hero-copy > .hero-actions {
    grid-area: actions;
}

.hero-copy > .hero-branches {
    grid-area: branches;
}

.hero-picture {
    grid-area: picture;
    margin-bottom: 18px;
}

.hero-picture .tower-wrap {
    max-width: none;
}

.tower-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(104px, calc(100vh - var(--hero-text)), 340px);
    height: clamp(104px, calc(100svh - var(--hero-text)), 340px);
    border: 1px solid rgba(201, 163, 90, 0.42);
    border-radius: 16px;
    background:
        radial-gradient(34% 80% at 50% 62%, rgba(233, 205, 143, 0.3), transparent 72%),
        linear-gradient(180deg, #14244a 0%, #0b1430 55%, #070c1a 100%);
    overflow: hidden;
}

/* On the banner the tower is drawn a little brighter so it reads clearly on a small screen. */
.tower-frame .tower {
    filter: brightness(1.45) saturate(1.1);
}

/* The whole tower when the banner is tall enough; on a low banner the tower keeps a clear size
   and the banner shows its middle floors, where the elevators travel. */
.hero-picture .tower {
    flex: none;
    width: auto;
    height: max(100%, 190px);
    aspect-ratio: 560 / 680;
    overflow: hidden;
}

/* The three indicators appear from tablet width up; a phone has no room for them above the headline. */
.hero-picture .tower-hud {
    display: none;
}

.hero-picture .tower-hint {
    margin-top: 8px;
}

.stats {
    grid-area: stats;
}

@media (max-width: 979.98px) and (max-height: 640px) {
    /* Low phone screens: a slimmer banner and a slightly smaller headline keep the figures line in view. */
    .hero {
        --hero-text: 452px;
        padding-top: calc(var(--header-h) + 8px);
    }

    .tower-frame {
        height: clamp(72px, calc(100vh - var(--hero-text)), 340px);
        height: clamp(72px, calc(100svh - var(--hero-text)), 340px);
    }

    .hero-picture {
        margin-bottom: 12px;
    }

    .hero-picture .tower-hint {
        display: none;
    }

    .hero .eyebrow {
        margin-bottom: 10px;
    }

    .hero h1 {
        font-size: min(clamp(1.7rem, 0.6rem + 5.2vw, 3.75rem), 5.1vh);
    }

    .hero .stats {
        margin-top: 14px;
        padding-block: 10px;
    }
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
    padding-block: 14px;
    border-block: 1px solid var(--line);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stat-value {
    background: linear-gradient(180deg, #f6e4b8, #c9a35a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

/* ---------- Sections ---------- */

.section {
    position: relative;
    padding-block: clamp(64px, 9vw, 124px);
}

.section-tight {
    padding-bottom: clamp(40px, 6vw, 72px);
}

.section-panel {
    background: var(--ink-2);
    border-block: 1px solid var(--line);
}

.section-light {
    --text: #121927;
    --muted: #535e6f;
    --line: rgba(18, 25, 39, 0.14);
    --brass-ink: #85631a;
    background: var(--ivory);
    color: var(--text);
}

.section-pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23C9A35A' stroke-width='1'%3E%3Cpath d='M48 14 58 38 82 48 58 58 48 82 38 58 14 48 38 38z'/%3E%3Cpath d='M24 24h48v48H24z' transform='rotate(45 48 48)'/%3E%3Cpath d='M24 24h48v48H24z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.07;
    -webkit-mask-image: radial-gradient(70% 80% at 85% 20%, #000, transparent 75%);
    mask-image: radial-gradient(70% 80% at 85% 20%, #000, transparent 75%);
    pointer-events: none;
}

.section-pattern > .container {
    position: relative;
}

.section-head {
    max-width: 780px;
    margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head-wide {
    max-width: 960px;
}

.section-head-center {
    margin-inline: auto;
    text-align: center;
}

.section-head-center .eyebrow {
    justify-content: center;
}

.section-head-center .eyebrow::after {
    content: "";
    flex: 0 0 28px;
    height: 1px;
    background: currentColor;
}

.split {
    display: grid;
    gap: clamp(32px, 5vw, 72px);
}

/* Why independent: four factors */

.factors {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.factor {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ink-2);
    font-weight: 600;
    line-height: 1.3;
    transition: transform 0.35s var(--ease), border-color 0.35s;
}

.factor:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 163, 90, 0.55);
}

.factor svg {
    width: 44px;
    height: 44px;
    fill: none;
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.factor svg .accent {
    stroke: var(--brass-hi);
    stroke-width: 2;
}

.factor svg rect.accent {
    fill: rgba(233, 205, 143, 0.18);
}

/* Services */

.cards {
    display: grid;
    gap: 16px;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 24px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ink);
    overflow: hidden;
    transition: transform 0.35s var(--ease), border-color 0.35s, opacity 0.7s var(--ease);
}

.card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brass-hi), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
}

.card:hover {
    translate: 0 -4px;
    border-color: rgba(201, 163, 90, 0.45);
}

.js .card[data-reveal] {
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), translate 0.35s var(--ease), border-color 0.35s;
    transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s;
}

.card:hover::after {
    transform: scaleX(1);
}

.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 28px;
}

.card-no {
    color: var(--brass);
    font-family: var(--mono);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

.card-icon {
    width: 60px;
    height: 60px;
    fill: none;
    stroke: rgba(255, 255, 255, 0.34);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card-icon .accent {
    stroke: var(--brass-hi);
}

.card-icon rect.accent {
    fill: rgba(233, 205, 143, 0.22);
}

.icon-car-a {
    animation: ride-a 5s var(--ease) infinite alternate;
}

.icon-car-b {
    animation: ride-b 6s var(--ease) infinite alternate;
}

@keyframes ride-a {
    to {
        transform: translateY(-22px);
    }
}

@keyframes ride-b {
    to {
        transform: translateY(24px);
    }
}

.icon-spin {
    transform-box: view-box;
    transform-origin: 32px 32px;
    transition: transform 0.9s var(--ease);
}

.card:hover .icon-spin {
    transform: rotate(180deg);
}

.icon-tick {
    stroke-width: 2.4;
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
}

.card:hover .icon-tick {
    animation: tick 0.7s var(--ease);
}

@keyframes tick {
    from {
        stroke-dashoffset: 24;
    }
}

.card p {
    margin-top: 12px;
    color: var(--muted);
}

.chip {
    margin-top: 22px;
    padding: 6px 12px;
    border: 1px solid rgba(201, 163, 90, 0.4);
    border-radius: 999px;
    color: var(--brass-hi);
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* When to contact us */

.call {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.call:first-child {
    border-top: 1px solid var(--line);
}

.call p {
    padding-top: 9px;
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.5;
}

.call-button {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    height: 46px;
    border: 2px solid rgba(18, 25, 39, 0.22);
    border-radius: 50%;
    transition: background 0.5s, border-color 0.5s, box-shadow 0.5s;
    transition-delay: calc(var(--i, 0) * 140ms + 300ms);
}

.call-button svg {
    width: 18px;
    height: 18px;
    fill: rgba(18, 25, 39, 0.3);
    transition: fill 0.5s;
    transition-delay: inherit;
}

.call.is-visible .call-button,
html:not(.js) .call-button {
    border-color: #b8913f;
    background: #f7e7bd;
    box-shadow: 0 0 0 6px rgba(201, 163, 90, 0.18);
}

.call.is-visible .call-button svg,
html:not(.js) .call-button svg {
    fill: #85631a;
}

/* Saudi projects */

.h2-statement {
    font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.3rem);
    line-height: 1.24;
}

.columns {
    display: grid;
    gap: 28px;
}

.column {
    padding-top: 22px;
    border-top: 1px solid rgba(201, 163, 90, 0.45);
}

.column p {
    margin-top: 12px;
    color: var(--muted);
}

/* Projects */

.clients {
    padding: 22px 0;
    border-block: 1px solid var(--line);
}

.clients-label {
    margin-bottom: 14px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.clients-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
}

.clients-list li {
    color: rgba(236, 233, 226, 0.82);
    font-size: clamp(1.02rem, 0.95rem + 0.5vw, 1.3rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.explorer {
    margin-top: clamp(32px, 5vw, 56px);
}

.explorer-tabs {
    display: flex;
    gap: 6px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
}

.explorer-tabs::-webkit-scrollbar {
    display: none;
}

.explorer-tab {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    max-width: 78vw;
    min-height: 56px;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: start;
    cursor: pointer;
    scroll-snap-align: start;
    transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.explorer-tab-no {
    color: var(--brass);
    font-family: var(--mono);
    font-size: 0.75rem;
}

.explorer-tab:hover {
    color: var(--text);
}

.explorer-tab[aria-selected="true"] {
    border-color: rgba(201, 163, 90, 0.7);
    background: rgba(201, 163, 90, 0.1);
    color: var(--text);
}

.explorer-panel {
    display: grid;
    gap: 24px;
    margin-top: 14px;
    padding: clamp(18px, 3vw, 36px);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--ink);
}

.explorer-panel[hidden] {
    display: none;
}

.explorer-scene {
    border-radius: 12px;
    background:
        radial-gradient(70% 70% at 50% 100%, rgba(201, 163, 90, 0.08), transparent 70%),
        #090e1a;
}

.explorer-copy p {
    margin-top: 12px;
    color: var(--muted);
}

.outcome {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 22px;
    padding-inline-start: 16px;
    border-inline-start: 2px solid var(--brass);
}

.outcome-label {
    color: var(--brass-hi);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.outcome-text {
    font-weight: 500;
}

/* Scene drawings */

.scene {
    width: 100%;
    height: auto;
}

.scene line,
.scene path {
    fill: none;
}

.s-outline {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 1.3;
}

.s-hair {
    stroke: rgba(255, 255, 255, 0.09);
}

.s-divider {
    stroke: rgba(201, 163, 90, 0.6);
    stroke-dasharray: 3 3;
}

.s-ground {
    stroke: rgba(201, 163, 90, 0.55);
}

.s-zone {
    stroke: none;
}

.s-zone-sky {
    fill: rgba(124, 183, 255, 0.09);
}

.s-zone-teal {
    fill: rgba(79, 209, 197, 0.08);
}

.s-zone-brass {
    fill: rgba(201, 163, 90, 0.1);
}

.s-shaft {
    fill: rgba(0, 0, 0, 0.55);
    stroke: rgba(255, 255, 255, 0.16);
}

.s-room {
    fill: rgba(255, 255, 255, 0.035);
    stroke: rgba(255, 255, 255, 0.08);
}

.s-slab {
    stroke: rgba(255, 255, 255, 0.42);
    stroke-width: 3;
    stroke-linecap: round;
}

.s-escalator {
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 2.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.s-escalator-down {
    stroke: rgba(201, 163, 90, 0.55);
}

.s-route {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1 7;
    opacity: 0.75;
}

.s-lift-box {
    fill: #0b1120;
    stroke-width: 1.4;
}

.s-leader {
    stroke: rgba(255, 255, 255, 0.28);
}

/* Sizes are in drawing units: larger on phones, where the drawing is shown smaller. */
.s-labels text,
.s-tag {
    fill: var(--muted);
    font-family: var(--mono);
    font-size: 16px;
}

.s-tag {
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.s-car-teal,
.s-dot-teal,
.scene path.s-fill-teal {
    fill: var(--teal);
}

.s-car-sky,
.s-dot-sky,
.scene path.s-fill-sky {
    fill: var(--sky);
}

.s-car-brass,
.s-dot-brass,
.scene path.s-fill-brass {
    fill: var(--brass-hi);
}

.s-dot-coral,
.scene path.s-fill-coral {
    fill: var(--coral);
}

.s-route-teal,
.s-stroke-teal {
    stroke: var(--teal);
}

.s-route-sky,
.s-stroke-sky {
    stroke: var(--sky);
}

.s-route-brass,
.s-stroke-brass {
    stroke: var(--brass-hi);
}

.s-route-coral,
.s-stroke-coral {
    stroke: var(--coral);
}

.s-text-teal {
    fill: var(--teal);
}

.s-text-sky {
    fill: var(--sky);
}

.s-text-brass {
    fill: var(--brass-hi);
}

.s-text-coral {
    fill: var(--coral);
}

/* Methodology */

.method {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
}

.method-shaft {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 10px;
    background:
        linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.12) 49% 51%, transparent 51%),
        var(--ink-2);
}

.method-car {
    position: absolute;
    inset: 0 4px auto 4px;
    display: grid;
    place-items: center;
    height: 44px;
    border-radius: 6px;
    background: linear-gradient(180deg, #f6e4b8, #c9a35a);
    box-shadow: 0 0 26px rgba(233, 205, 143, 0.45);
    color: #0b0f18;
    transform: translateY(var(--car-y, 12px));
    transition: transform 0.8s cubic-bezier(0.6, 0, 0.2, 1);
}

.method-car-no {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
}

.method-steps {
    display: grid;
    gap: 12px;
}

.method-step {
    padding: 22px 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.4s, background 0.4s;
}

.method-step > * {
    opacity: 0.55;
    transition: opacity 0.4s;
}

.method-step.is-active {
    border-color: rgba(201, 163, 90, 0.55);
    background: var(--ink-2);
}

.method-step.is-active > *,
html:not(.js) .method-step > * {
    opacity: 1;
}

.step-no {
    display: block;
    margin-bottom: 8px;
    color: var(--brass);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.method-step p {
    margin-top: 8px;
    color: var(--muted);
}

/* Questions */

.faq {
    border-bottom: 1px solid var(--line);
}

.faq:first-child {
    border-top: 1px solid var(--line);
}

.faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq-icon {
    position: relative;
    flex: 0 0 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 50%;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
    background: var(--brass-ink);
    transition: transform 0.3s var(--ease);
}

.faq-icon::after {
    transform: rotate(90deg);
}

.faq[open] .faq-icon::after {
    transform: rotate(0deg);
}

.faq-answer {
    max-width: 64ch;
    padding-bottom: 24px;
    color: var(--muted);
}

/* Independence */

.marquee {
    display: flex;
    margin-top: 8px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
    display: flex;
    flex: none;
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
    padding-inline-end: clamp(28px, 5vw, 64px);
    animation: marquee 32s linear infinite;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-track li {
    display: flex;
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
    color: rgba(236, 233, 226, 0.5);
    font-size: clamp(1.2rem, 0.9rem + 1.6vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.marquee-track li::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brass);
    opacity: 0.7;
}

@keyframes marquee {
    to {
        transform: translateX(-100%);
    }
}

/* Manufacturers' logos on a light grey band (owner's colours, 12 Nov 2026); each logo keeps its own official colours. */

.section-makers {
    padding-block: clamp(30px, 4.4vw, 60px);
}

.section-makers .section-head {
    max-width: none;
    margin-bottom: 0;
}

/* One line at every width (owner, 12 Nov 2026): the size follows the width of the screen. */
.makers-title {
    background: linear-gradient(180deg, #f8e9c2, #c9a35a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(0.78rem, 4vw, 2.7rem);
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.section-makers .body-lg {
    max-width: 96ch;
    margin: 10px auto 0;
    line-height: 1.6;
}

.makers-label {
    margin: clamp(18px, 2.6vw, 28px) 0 0;
}

.marquee-logos {
    width: min(1200px, 100% - 2 * var(--gutter));
    margin: 14px auto 0;
    padding-block: clamp(18px, 2.6vw, 28px);
    border-radius: 18px;
    background: linear-gradient(90deg, #929DAD 0%, #BCC3CC 50%, #929DAD 100%);
    box-shadow: 0 0 0 1px rgba(201, 163, 90, 0.55), 0 28px 70px -34px rgba(201, 163, 90, 0.65);
    -webkit-mask-image: none;
    mask-image: none;
}

.marquee-logos .marquee-track,
.marquee-logos .marquee-track li {
    gap: clamp(40px, 6vw, 84px);
}

/* Each row is at least as wide as the band, so the moving band never shows an empty stretch,
   however few logos it holds. */
.marquee-logos .marquee-track {
    min-width: 100%;
    justify-content: space-around;
    padding-inline-end: clamp(40px, 6vw, 84px);
    animation-duration: 38s;
}

.marquee-logos .marquee-track li {
    color: #121927;
}

.marquee-logos .marquee-track li::after {
    display: none;
}

.marquee-logos img {
    display: block;
    width: auto;
    max-width: 200px;
    height: clamp(34px, 4.4vw, 48px);
    object-fit: contain;
}

/* A logo about as tall as it is wide is shown taller, so it reads as clearly as the wide ones. */
.marquee-logos img.logo-tall {
    height: clamp(50px, 6.2vw, 68px);
}

/* ---------- WhatsApp chat (owner, 12 Nov 2026) ----------
   On the right side in both languages (so "right", not "inline-end"). Phones show the round
   button only; wider screens add a card with the label. It appears once the visitor starts to
   scroll, so on the first screen it never covers the figures line. */

.whatsapp {
    position: fixed;
    right: clamp(14px, 2.2vw, 28px);
    bottom: calc(clamp(14px, 2.2vw, 28px) + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 12px;
    direction: ltr;
    color: #fff;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s;
}

.js .whatsapp:not(.is-shown) {
    visibility: hidden;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s;
}

.nav-open .whatsapp {
    display: none;
}

.whatsapp-button {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 10px 28px -8px rgba(18, 140, 126, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
    transition: transform 0.25s var(--ease), box-shadow 0.25s;
}

/* A soft ring that breathes, to show the chat is available. */
.whatsapp-button::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid rgba(37, 211, 102, 0.45);
    border-radius: 50%;
    animation: whatsapp-ring 2.8s ease-out infinite;
}

@keyframes whatsapp-ring {
    0% {
        opacity: 0.9;
        transform: scale(0.92);
    }
    70%,
    100% {
        opacity: 0;
        transform: scale(1.22);
    }
}

.whatsapp-button svg {
    width: 30px;
    height: 30px;
    fill: #fff;
}

.whatsapp-card {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    border: 1px solid rgba(37, 211, 102, 0.35);
    border-radius: 14px;
    background: rgba(12, 19, 34, 0.94);
    box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-align: end;
    transition: border-color 0.25s;
}

.whatsapp-title {
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.whatsapp-sub {
    color: #9fe8bd;
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

html[lang="ar"] .whatsapp-card {
    direction: rtl;
    text-align: start;
}

.whatsapp:hover .whatsapp-button,
.whatsapp:focus-visible .whatsapp-button {
    transform: scale(1.06);
    box-shadow: 0 14px 34px -8px rgba(18, 140, 126, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}

.whatsapp:hover .whatsapp-card {
    border-color: rgba(37, 211, 102, 0.7);
}

.whatsapp:focus-visible {
    outline: none;
}

.whatsapp:focus-visible .whatsapp-button {
    outline: 2px solid var(--brass-hi);
    outline-offset: 4px;
}

html[data-theme="light"] .whatsapp-card {
    border-color: rgba(18, 140, 126, 0.3);
    background: rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .whatsapp-title {
    color: #121927;
}

html[data-theme="light"] .whatsapp-sub {
    color: #0f7a4a;
}

@media (min-width: 760px) {
    .whatsapp-card {
        display: flex;
    }

    .whatsapp-button {
        width: 60px;
        height: 60px;
    }
}

/* Next step and branches */

.contact-panel {
    position: relative;
    display: grid;
    gap: clamp(32px, 5vw, 64px);
    padding: clamp(26px, 5vw, 64px);
    border: 1px solid rgba(201, 163, 90, 0.38);
    border-radius: 24px;
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(201, 163, 90, 0.16), transparent 65%),
        linear-gradient(160deg, var(--ink-3), var(--ink-2));
    overflow: hidden;
}

.contact-copy .btn {
    margin-top: 30px;
}

.offices-label {
    color: var(--brass-hi);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.offices-intro {
    margin-top: 10px;
    color: var(--muted);
}

.offices {
    margin-top: 18px;
}

.office {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.office-name {
    font-weight: 600;
}

.office-kind {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.office-phone {
    justify-self: start;
    margin-top: 6px;
    color: var(--brass-hi);
    font-size: clamp(1.15rem, 1rem + 0.8vw, 1.45rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    transition: color 0.2s;
}

.office-phone:hover {
    color: #fff;
}

/* Footer */

.site-footer {
    padding-top: 56px;
    border-top: 1px solid var(--line);
    background: #05080f;
    color: var(--muted);
    font-size: 0.92rem;
}

.footer-grid {
    display: grid;
    gap: 32px;
}

.site-footer .brand {
    color: var(--text);
}

.footer-tagline {
    max-width: 34ch;
    margin-top: 16px;
}

.footer-label {
    margin-bottom: 12px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer-links li + li {
    margin-top: 10px;
}

.footer-links a {
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--brass-hi);
}

.footer-bottom {
    margin-top: 44px;
    padding-block: 22px;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 28px;
}

.footer-lang {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
}

.footer-lang .lang-option {
    padding-block: 10px;
    font-weight: 600;
    transition: color 0.2s;
}

.footer-lang .lang-option:hover,
.footer-lang .lang-option[aria-current="true"] {
    color: var(--brass-hi);
}

/* ---------- Reveal on scroll ---------- */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Wider screens ---------- */

@media (min-width: 760px) {
    .hero-picture .tower-hud {
        display: grid;
        max-width: 520px;
        margin-inline: auto;
    }

    .hero {
        --hero-text: 560px;
    }
}

@media (min-width: 560px) {
    .stats {
        gap: 24px;
        padding-block: 18px;
    }

    .stat-label {
        font-size: 0.92rem;
    }

    .hero-actions .btn {
        flex: 0 0 auto;
    }

    .office {
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 20px;
    }

    .office-phone {
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-self: end;
        margin-top: 0;
    }

    .office-email .office-phone {
        grid-row: 1;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 760px) {
    .cards,
    .columns {
        grid-template-columns: repeat(3, 1fr);
    }

    .explorer-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
    }

    .explorer-tab {
        max-width: none;
    }

    .s-labels text {
        font-size: 12px;
    }

    .s-tag {
        font-size: 10.5px;
        letter-spacing: 0.1em;
    }

    .method {
        grid-template-columns: 52px 1fr;
        gap: 20px;
    }
}

@media (min-width: 980px) {
    :root {
        --header-h: 78px;
    }

    .nav-toggle {
        display: none;
    }

    .site-nav {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 30px;
        padding: 0;
        background: none;
        overflow: visible;
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .nav-link {
        position: relative;
        padding: 8px 0;
        border: 0;
        color: rgba(236, 233, 226, 0.78);
        font-size: 0.93rem;
        font-weight: 500;
        transition: color 0.2s;
    }

    .nav-link::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 1px;
        background: var(--brass-hi);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s var(--ease);
    }

    .nav-link:hover {
        color: #fff;
    }

    .nav-link:hover::after {
        transform: scaleX(1);
    }

    .nav-cta {
        min-height: 44px;
        margin-top: 0;
        padding: 10px 18px;
        font-size: 0.88rem;
    }

    .hero-grid {
        grid-template-columns: 1.08fr 0.92fr;
        align-items: center;
        gap: 56px;
    }

    .split {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .split-wide {
        grid-template-columns: 0.82fr 1.18fr;
    }

    .sticky-col {
        position: sticky;
        top: calc(var(--header-h) + 32px);
    }

    .explorer-panel {
        grid-template-columns: 1.15fr 0.85fr;
        align-items: center;
        gap: 44px;
    }

    .contact-panel {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: center;
    }

    .footer-grid {
        grid-template-columns: 1.5fr 0.8fr 1.1fr 1.1fr;
    }
}

/* ---------- Hero on one screen (laptops and desktops) ----------
   Header, headline, picture and the figures line all fit the first screen. The sizes
   follow the height of the screen (vh), so a short laptop screen gets a smaller picture
   and headline instead of pushing the figures line out of sight. */

@media (min-width: 980px) {
    .hero {
        --hero-top: clamp(10px, 3vh, 44px);
        --hero-bottom: clamp(14px, 3.4vh, 56px);
        --hero-gap: clamp(12px, 3vh, 36px);
        --stats-h: 64px;
        --hud-h: 86px;

        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100svh;
        padding-top: calc(var(--header-h) + var(--hero-top));
        padding-bottom: var(--hero-bottom);
    }

    .hero-grid {
        flex: 1;
        grid-template-columns: 1.08fr 0.92fr;
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "copy picture"
            "stats stats";
        align-items: center;
        gap: var(--hero-gap) 56px;
    }

    .hero-copy {
        display: block;
        grid-area: copy;
    }

    .hero-picture {
        grid-area: picture;
        margin-bottom: 0;
    }

    .hero-picture .tower-wrap {
        max-width: 480px;
    }

    /* Beside the headline the picture needs no card: the tower stands on the page itself. */
    .tower-frame {
        display: block;
        height: auto;
        border: 0;
        border-radius: 0;
        background: none;
        overflow: visible;
    }

    .tower-frame .tower {
        filter: none;
    }

    /* The whole tower is shown, as tall as the room left on the screen allows and never larger
       than before. The three indicators under it keep their full width so they are not squeezed. */
    .hero-picture .tower {
        width: 100%;
        max-width: min(480px, calc((100svh - var(--header-h) - var(--hero-top) - var(--hero-bottom) - var(--hero-gap) - var(--stats-h) - var(--hud-h)) * 0.8235));
        height: auto;
        margin-inline: auto;
        aspect-ratio: auto;
        overflow: visible;
    }

    .hero-picture .tower-hud {
        margin-inline: auto;
    }

    .hud-car {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
    }

    .hero h1 {
        font-size: min(clamp(2rem, 1.25rem + 3.3vw, 3.75rem), 6.6vh);
    }

    .hero .eyebrow {
        margin-bottom: clamp(8px, 2.2vh, 20px);
    }

    .hero .lede {
        margin-top: clamp(10px, 2.4vh, 22px);
        font-size: clamp(0.95rem, 2.3vh, 1.14rem);
    }

    .hero .hero-actions {
        margin-top: clamp(14px, 3.2vh, 30px);
    }

    .hero .hero-branches {
        margin-top: clamp(10px, 2.6vh, 24px);
    }

    .hero .tower-hint {
        margin-top: clamp(6px, 1.3vh, 12px);
    }

    .stats {
        grid-area: stats;
        align-self: end;
        margin-top: 0;
        padding-block: clamp(10px, 2vh, 20px) 0;
        border-bottom: 0;
    }

    .stat {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    .stat-value {
        font-size: clamp(1.9rem, 4.6vh, 2.6rem);
    }

    .stat-label {
        font-size: 0.95rem;
    }
}

/* ---------- Arabic version (right to left) ----------
   The layout itself turns round through the logical properties used above
   (inline-start, inline-end). Only what does not turn by itself is listed here. */

html[lang="ar"] {
    /* JetBrains Mono has no Arabic letters and its wide spaces would spread Arabic words apart,
       so worded labels use the text typeface; figures keep the mono digits. */
    --mono-digits: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --mono: var(--font);
}

html[lang="ar"] :is(.card-no, .explorer-tab-no, .floor-label, .hud-floor, .method-car-no) {
    font-family: var(--mono-digits);
}

/* Arabic letters join; spacing them apart breaks the words. */
html[dir="rtl"] * {
    letter-spacing: 0;
}

/* Arabic letters are taller and deeper than Latin ones and need more room between lines. */
html[lang="ar"] body {
    line-height: 1.9;
}

html[lang="ar"] h1 {
    line-height: 1.4;
}

html[lang="ar"] h2 {
    line-height: 1.45;
}

html[lang="ar"] h3 {
    line-height: 1.55;
}

html[lang="ar"] .btn,
html[lang="ar"] .brand-text {
    line-height: 1.5;
}

html[lang="ar"] :is(.eyebrow, .chip, .clients-label, .outcome-label, .step-no, .office-kind, .offices-label, .footer-label, .tower-hint) {
    font-size: 0.86rem;
}

html[lang="ar"] :is(.brand-sub, .hud-name) {
    font-size: 0.72rem;
}

/* Drawings keep their own left-to-right coordinates; so do the moving row of
   manufacturer names and the three elevator indicators (A, B, C as in the tower). */
html[dir="rtl"] svg,
html[dir="rtl"] .marquee,
html[dir="rtl"] .tower-hud {
    direction: ltr;
}

html[dir="rtl"] .hud-car {
    direction: rtl;
}

html[dir="rtl"] .stat-value {
    text-align: right;
}

/* Decoration that points one way is mirrored. */
html[dir="rtl"] .hero::before,
html[dir="rtl"] .section-pattern::before {
    transform: scaleX(-1);
}

html[dir="rtl"] .card::after {
    background: linear-gradient(270deg, var(--brass-hi), transparent);
    transform-origin: right;
}

html[dir="rtl"] .nav-link::after {
    transform-origin: right;
}

html[dir="rtl"] .contact-panel {
    background:
        radial-gradient(60% 90% at 0% 0%, rgba(201, 163, 90, 0.16), transparent 65%),
        linear-gradient(200deg, var(--ink-3), var(--ink-2));
}

/* ---------- Light look ----------
   The dark look above is the base. The light look changes the colour settings and then only
   the places that use a fixed colour. The pictures (tower, building types) are night scenes
   and keep their dark colours on a dark card in both looks. */

:root {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;

    --ink: #f7f4ee;
    --ink-2: #ffffff;
    --ink-3: #f1ebdf;
    --text: #121927;
    --muted: #535e6f;
    --line: rgba(18, 25, 39, 0.14);
    --brass: #836314;
    --brass-hi: #7a5a12;
    --brass-ink: #7a5a12;
}

html[data-theme="light"] :is(.tower, .explorer-scene) {
    --text: #ece9e2;
    --muted: #9aa4b6;
    --line: rgba(255, 255, 255, 0.1);
    --brass: #c9a35a;
    --brass-hi: #e9cd8f;
    --brass-ink: #c9a35a;
}

@media (min-width: 980px) {
    /* On desktop the tower has no card in the dark look; the light look gives it one. */
    html[data-theme="light"] .hero-picture .tower {
        border-radius: 20px;
        background: #060a13;
        box-shadow: 0 30px 60px -32px rgba(18, 25, 39, 0.55);
        overflow: hidden;
    }
}

html[data-theme="light"] .site-header::before {
    background: rgba(247, 244, 238, 0.9);
}

html[data-theme="light"] .hero::before {
    background:
        radial-gradient(60% 55% at 78% 30%, rgba(201, 163, 90, 0.2), transparent 70%),
        radial-gradient(50% 50% at 8% 8%, rgba(72, 108, 190, 0.1), transparent 70%),
        repeating-linear-gradient(90deg, rgba(18, 25, 39, 0.04) 0 1px, transparent 1px 96px);
}

html[data-theme="light"] .btn-ghost {
    border-color: rgba(18, 25, 39, 0.3);
}

html[data-theme="light"] :is(.stat-value, .makers-title) {
    background-image: linear-gradient(180deg, #a8822f, #6f5110);
}

html[data-theme="light"] .section-light {
    background: #efe8da;
}

html[data-theme="light"] .section-pattern::before {
    opacity: 0.16;
}

html[data-theme="light"] .factor svg,
html[data-theme="light"] .card-icon {
    stroke: rgba(18, 25, 39, 0.42);
}

html[data-theme="light"] .factor svg .accent,
html[data-theme="light"] .card-icon .accent {
    stroke: var(--brass);
}

html[data-theme="light"] :is(.factor, .card, .explorer-panel, .method-step.is-active) {
    box-shadow: 0 18px 40px -30px rgba(18, 25, 39, 0.35);
}

html[data-theme="light"] .clients-list li {
    color: rgba(18, 25, 39, 0.82);
}

html[data-theme="light"] .method-shaft {
    background:
        linear-gradient(90deg, transparent 49%, rgba(18, 25, 39, 0.16) 49% 51%, transparent 51%),
        var(--ink-2);
}

html[data-theme="light"] .hud-car {
    background: #fff;
}

html[data-theme="light"] .hud-dir {
    border-bottom-color: rgba(18, 25, 39, 0.2);
}

html[data-theme="light"] .hud-car[data-dir="up"] .hud-dir,
html[data-theme="light"] .hud-car[data-dir="down"] .hud-dir {
    border-bottom-color: var(--brass);
}

html[data-theme="light"] .office-phone:hover {
    color: var(--text);
}

html[data-theme="light"] .site-footer {
    background: #ece5d7;
}

html[data-theme="light"] .marquee-track li {
    color: rgba(18, 25, 39, 0.55);
}

@media (max-width: 979.98px) {
    html[data-theme="light"] .site-nav {
        background: rgba(247, 244, 238, 0.98);
    }
}

@media (min-width: 980px) {
    html[data-theme="light"] .nav-link {
        color: rgba(18, 25, 39, 0.78);
    }

    html[data-theme="light"] .nav-link:hover {
        color: var(--text);
    }
}

/* ---------- Less motion for visitors who ask for it ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .marquee {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .marquee-track {
        flex-wrap: wrap;
        justify-content: center;
        flex: 1 1 auto;
        row-gap: 12px;
        padding-inline: var(--gutter);
    }

    .marquee-track[aria-hidden="true"] {
        display: none;
    }

    /* The six logos stand still in one row where the screen is wide enough. */
    .marquee-logos .marquee-track,
    .marquee-logos .marquee-track li {
        gap: clamp(22px, 3.4vw, 46px);
    }

    .marquee-logos .marquee-track {
        padding-inline: 20px;
    }
}