:root{
      /* DEEP GREEN EXPLORATION (branch staging/deep-green-style-try) — colour only.
         The near-black ink family is retuned to a deep, heavily desaturated forest
         green: dark enough to keep the cinematic register, green enough to read as
         a deliberate material rather than a tint. Warm bone and bronze are left
         untouched so the palette stays two-temperature instead of collapsing into
         a single hue. Type, layout and components are unchanged. */
      /* --ink-0 sits BELOW the darkest page surface so the scrolled header reads as a
         distinct plane above the content rather than blending into whichever band is
         passing under it. */
      --ink-0:#07100B;
      --ink:#0C1711;--ink-2:#132019;--ink-3:#1A2C22;--paper:#f5f2ec;--paper-2:#efeae1;
      --char:#141A16;--muted:#6c665d;--on-dark:#f3f0ea;--on-dark-dim:rgba(243,240,234,.74);
      --line-d:rgba(20,26,22,.16);--line-l:rgba(243,240,234,.26);
      /* Scrim triplet: overlays tint with the surface instead of greying it out. */
      --scrim:12,23,17;
      /* Two low-contrast gradients. Deliberately shallow — the shift should read as
         depth in the material, not as a decorative sweep. */
      --grad-dark:linear-gradient(168deg,#0C1711 0%,#17281E 48%,#0C1711 100%);
      --grad-band:linear-gradient(172deg,#132019 0%,#1B2E23 52%,#132019 100%);
      /* Accents per docs/BUILD-BRIEF.md — bronze is a restrained luxury accent (rules, small
         caps labels, key CTAs; <=10% of a page); olive is reserved for sustainability/Eco-vite. */
      --bronze:#8A6A34;--bronze-deep:#6F5427;--olive:#6F7457;
      --bronze-on-dark:#c39a55;--olive-on-dark:#BCCB9E;
      /* Mid-tone band + material secondaries, per the same brief. The page was running on
         only two values (near-black / bone); --bone-2 gives a third step between them. */
      --bone-2:#EFE9DE;--clay:#9C7B5A;--stone:#8A857C;--hairline:#E3DDD3;
      --container:76rem;--ease:cubic-bezier(.22,.61,.36,1);
    }
    *{box-sizing:border-box}
    html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
    body{margin:0;background:var(--ink);color:var(--on-dark);
      font-family:"Inter",system-ui,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
    h1,h2,h3,.serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;line-height:1.12;}
    .container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem);}
    a{color:inherit}img{max-width:100%;display:block}
    .eyebrow{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;}
    /* Accent line is set UPRIGHT, not italic: Cormorant Garamond's italic is strongly
       calligraphic and reads as a second typeface above the roman H1. Size, colour and
       weight carry the distinction instead. */
    .script{font-family:"Cormorant Garamond",serif;font-style:normal;font-weight:500;line-height:1.18;}
    /* Cormorant Garamond ships old-style (text) figures by default — they wobble in stats,
       years and numbered labels, so numeric display elements are forced to lining figures. */
    .stat .n,.tl-item .yr,.value .num,.svc .no{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;}
    .btn{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
      font-weight:600;padding:.95em 1.8em;border-radius:0;text-decoration:none;transition:all .35s var(--ease);border:1px solid transparent;cursor:pointer;}
    .btn--light{background:var(--paper);color:var(--ink);}.btn--light:hover{background:#fff;transform:translateY(-2px)}
    .btn--ghost-l{border-color:var(--line-l);color:var(--on-dark);}.btn--ghost-l:hover{border-color:var(--on-dark);transform:translateY(-2px)}
    /* Dark-on-light counterpart, for ghost buttons sitting on the bone/paper bands. */
    .btn--ghost-d{border-color:var(--line-d);color:var(--char);}.btn--ghost-d:hover{border-color:var(--char);transform:translateY(-2px)}
    /* Parent-company lockup. Kept in its own red — it is Lal's Group's mark, not an
       Emporia element, so it sits outside the bone/bronze/green system rather than
       being tinted into it. Height-capped so it reads as an endorsement badge, not a
       second logo competing with the Emporia wordmark. */
    .lals-logo{height:auto;width:auto;max-height:3.4rem;max-width:14rem;margin-top:1.2rem}
    .lals-logo--foot{max-height:3rem;margin-top:1.4rem;opacity:.92}
    /* Header lockup. The wordmark is now the real logo (outlined vector), not live
   type — size it by HEIGHT so it stays optically consistent while the header
   padding animates on scroll. The file is hard-white, which is safe here: the
   header is transparent over the dark hero, or the near-black green when solid. */
    .brand{display:flex;align-items:center;text-decoration:none;padding-left:.06em;}
    .brand img{height:1.05rem;width:auto;display:block}
    @media(min-width:60rem){.brand img{height:1.25rem}}

    /* Scroll progress */
    .scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--on-dark);z-index:80;
      transform:scaleX(0);transform-origin:0 50%;opacity:.8;}

    /* Header */
    .site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
      padding:clamp(1rem,2.4vw,1.6rem) clamp(1.25rem,4vw,3rem);transition:background .4s var(--ease),border-color .4s var(--ease),padding .4s var(--ease);border-bottom:1px solid transparent;}
    .site-header.is-solid{background:rgba(7,16,11,.94);backdrop-filter:blur(10px);border-bottom-color:var(--line-l);padding-block:.9rem;}
    .nav-desktop{display:flex;align-items:center;gap:clamp(1.1rem,2vw,2rem);}
    .nav-desktop a:not(.btn){font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--on-dark-dim);transition:color .3s;position:relative;}
    .nav-desktop a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:var(--on-dark);transition:width .35s var(--ease)}
    .nav-desktop a:not(.btn):hover{color:var(--on-dark)}.nav-desktop a:not(.btn):hover::after{width:100%}
    .nav-toggle{display:none;background:none;border:0;color:var(--on-dark);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;}
    .nav-toggle svg{width:26px;height:26px}
    @media(max-width:60rem){.nav-desktop{display:none}.nav-toggle{display:inline-flex}}
    .mobile-menu{position:fixed;inset:0;z-index:60;background:rgba(7,16,11,.98);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;padding:2rem;transform:translateY(-102%);transition:transform .45s var(--ease);visibility:hidden;}
    .mobile-menu.open{transform:none;visibility:visible;}
    .mobile-menu a:not(.btn){font-family:"Cormorant Garamond",serif;font-size:2.15rem;color:var(--on-dark);text-decoration:none;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
    .mobile-menu.open a:not(.btn){opacity:1;transform:none;}
    .mobile-menu.open a:nth-child(2){transition-delay:.08s}.mobile-menu.open a:nth-child(3){transition-delay:.14s}
    .mobile-menu.open a:nth-child(4){transition-delay:.2s}.mobile-menu.open a:nth-child(5){transition-delay:.26s}.mobile-menu.open a:nth-child(6){transition-delay:.32s}
    .mobile-menu .btn{margin-top:1rem;}
    .mobile-close{position:absolute;top:1.4rem;right:1.4rem;background:none;border:0;color:var(--on-dark);width:44px;height:44px;cursor:pointer;font-size:1.6rem;line-height:1;}

    /* Hero */
    .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;}
    .hero__media{position:absolute;inset:0;z-index:0;background:#000}
    .hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;}
    .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(var(--scrim),.86) 0%,rgba(var(--scrim),.6) 48%,rgba(var(--scrim),.4) 100%),linear-gradient(to top,rgba(var(--scrim),.85),transparent 42%);}
    /* 54rem (was 46rem): Cormorant Garamond sets narrower than Fraunces, so the measure is
       widened to keep the hero headline at three lines rather than five. */
    .hero__inner{position:relative;z-index:2;max-width:54rem;padding-block:8rem;}
    .hero .script{display:block;font-size:clamp(1.5rem,4.4vw,2.8rem);color:var(--on-dark);opacity:.92;margin-bottom:.5rem;}
    .hero h1{font-size:clamp(2.45rem,6.6vw,4.9rem);letter-spacing:-.004em;margin:.2rem 0 1.4rem;font-weight:400;}
    .hero p{font-size:1.075rem;color:var(--on-dark-dim);max-width:38rem;margin:0 0 2rem;}
    .hero__actions{display:flex;flex-wrap:wrap;gap:.9rem}
    .hero__reach{position:absolute;bottom:2rem;z-index:2;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(243,240,234,.55);}
    /* hero intro stagger */
    .hero__inner > *{opacity:0;transform:translateY(26px);animation:rise .9s var(--ease) forwards;}
    .hero__inner > *:nth-child(1){animation-delay:.15s}.hero__inner > *:nth-child(2){animation-delay:.3s}
    .hero__inner > *:nth-child(3){animation-delay:.45s}.hero__inner > *:nth-child(4){animation-delay:.6s}
    @keyframes rise{to{opacity:1;transform:none}}

    /* Sections */
    section{position:relative}
    .band{padding:clamp(4.5rem,11vw,9rem) 0}
    .band--light{background:var(--paper);color:var(--char)}.band--light .eyebrow{color:var(--muted)}
    .band--dark{background:var(--grad-band)}.band--dark .eyebrow{color:var(--on-dark-dim)}
    /* Third value between charcoal and bone — breaks the dark runs the page had. */
    .band--mid{background:var(--bone-2);color:var(--char)}.band--mid .eyebrow{color:var(--muted)}
    .lead{font-size:clamp(1.7rem,3.8vw,2.7rem);font-family:"Cormorant Garamond",serif;font-weight:500;line-height:1.26;max-width:34ch;}
    .measure{max-width:60ch}.muted{color:var(--muted)}
    .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
    .reveal.in{opacity:1;transform:none}
    .stagger > .reveal:nth-child(2){transition-delay:.1s}.stagger > .reveal:nth-child(3){transition-delay:.2s}
    .stagger > .reveal:nth-child(4){transition-delay:.3s}

    .split{display:grid;gap:clamp(2rem,6vw,5rem);grid-template-columns:1fr;align-items:center}
    @media(min-width:56rem){.split{grid-template-columns:1.05fr .95fr}}
    .split__aside{border-left:1px solid var(--line-d);padding-left:1.6rem}
    .split__aside .eyebrow{margin-bottom:.6rem;display:block}.split__aside p{margin:.2rem 0 1.6rem}

    /* Full-bleed image band w/ dark overlay + parallax */
    .strip{position:relative;min-height:80vh;display:flex;align-items:flex-end;overflow:hidden}
    .strip__media{position:absolute;inset:-12% 0;background:#000;will-change:transform}
    .strip__media img{width:100%;height:100%;object-fit:cover;opacity:.8}
    .strip::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--scrim),.92),rgba(var(--scrim),.28) 55%,rgba(var(--scrim),.55));}
    .strip__inner{position:relative;z-index:2;padding-block:clamp(3rem,7vw,5.5rem);max-width:46rem}
    .strip .script{font-size:clamp(2.3rem,6.1vw,4.05rem);color:var(--on-dark)}
    .strip--center{align-items:center;text-align:center}.strip--center .strip__inner{margin-inline:auto}

    /* Values */
    .values{display:grid;gap:clamp(1.6rem,4vw,3rem) clamp(2rem,5vw,4rem);grid-template-columns:1fr}
    @media(min-width:48rem){.values{grid-template-columns:1fr 1fr}}
    .value{padding-top:1.4rem;border-top:1px solid var(--line-d)}
    .value h3{font-size:1.5rem;margin:0 0 .5rem;font-weight:600}.value p{margin:0;color:var(--muted)}
    .value .num{font-family:"Cormorant Garamond",serif;font-weight:600;color:var(--char);font-size:1.05rem;letter-spacing:.12em;opacity:.55}
    .values .value:nth-child(2){transition-delay:.1s}.values .value:nth-child(3){transition-delay:.2s}.values .value:nth-child(4){transition-delay:.3s}

    /* ── Own brands ──────────────────────────────────────────────────────────────
       Deliberately NOT the full-bleed-image + dark-scrim + overlaid-text device used by
       the hero, the strips and the page heroes. Here the photograph sits in its own frame
       and the copy sits on a solid panel beneath/beside it. Same content, different
       composition, so the page stops repeating one idea. Cards are links: this section
       used to be a dead end with no onward path at all. */
    .bfeature,.bcard{display:block;text-decoration:none;color:inherit;background:var(--paper);
      border:1px solid var(--hairline);overflow:hidden;
      transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
    .bfeature:focus-visible,.bcard:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

    /* Feature panel — the in-house UAE linen factory is the one hard differentiator on this
       site, so Linen By Navin leads at roughly double the visual weight of the other three. */
    .bfeature{display:grid;grid-template-columns:1fr;margin-bottom:1.4rem}
    @media(min-width:52rem){.bfeature{grid-template-columns:1.05fr 1fr}}
    /* The source images are portrait (900x1189). Absolutely positioning the img stops its
       intrinsic height from dictating the row — the panel sets the height, the photo fills it. */
    .bfeature__img{position:relative;overflow:hidden;background:var(--ink);min-height:15rem}
    @media(min-width:52rem){.bfeature__img{min-height:26rem}}
    .bfeature__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
    .bfeature__body{padding:clamp(1.7rem,3.6vw,3rem);display:flex;flex-direction:column;justify-content:center}
    .bfeature h3{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:.45rem 0 .8rem;font-weight:500;line-height:1.15}
    .bfeature p{margin:0;color:var(--muted);max-width:46ch;font-size:1rem;line-height:1.6}
    .bfeature:hover{border-color:var(--bronze);box-shadow:0 20px 46px rgba(20,26,22,.14)}
    .bfeature:hover .bfeature__img img{transform:scale(1.045)}

    .bgrid{display:grid;gap:1.4rem;grid-template-columns:1fr}
    @media(min-width:40rem){.bgrid{grid-template-columns:repeat(2,1fr)}}
    @media(min-width:64rem){.bgrid{grid-template-columns:repeat(3,1fr)}
      .bgrid--4{grid-template-columns:repeat(4,1fr)}}
    .bcard{display:flex;flex-direction:column}
    .bcard__img{aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
    /* Very light unifying grade. The old scrim hid how much these photos vary in saturation;
       without it the brighter stock shots sit outside the bone/bronze palette. Subtle enough
       that the photography still reads as untouched — remove the filter to see them raw. */
    .bcard__img img{width:100%;height:100%;object-fit:cover;filter:saturate(.93) contrast(1.02);
      transition:transform .8s var(--ease)}
    .bcard__body{padding:1.4rem 1.35rem 1.5rem;display:flex;flex-direction:column;flex:1}
    .bcard h3{font-size:1.45rem;margin:.4rem 0 .5rem;font-weight:600;line-height:1.18}
    .bcard p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}
    .bcard:hover{transform:translateY(-4px);border-color:var(--bronze);box-shadow:0 18px 40px rgba(20,26,22,.13)}
    .bcard:hover .bcard__img img{transform:scale(1.05)}

    /* Kicker + "go" affordance in bronze — the sanctioned small-label accent. */
    .bfeature .k,.bcard .k{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
      font-weight:600;color:var(--bronze);display:block}
    .bfeature .go,.bcard .go{margin-top:auto;padding-top:1.1rem;font-size:.65rem;letter-spacing:.2em;
      text-transform:uppercase;font-weight:600;color:var(--bronze);display:inline-flex;align-items:center;gap:.5rem}
    .bfeature .go{margin-top:0;padding-top:1.5rem}
    .bfeature .go i,.bcard .go i{font-style:normal;transition:transform .4s var(--ease)}
    .bfeature:hover .go i,.bcard:hover .go i{transform:translateX(5px)}

    /* Olive is reserved for sustainability/Eco-vite content. */
    /* Progressive "show all brands": extra tiles are hidden until the grid opens.
       Without JS they are revealed and the button is hidden (see the noscript block). */
    .bcard--more{display:none}
    .bgrid.is-open .bcard--more{display:flex}
    .brands-more{margin-top:1.8rem;display:flex;justify-content:center}
    .bcard--eco .k,.bcard--eco .go{color:var(--olive)}
    .bcard--eco:hover{border-color:var(--olive)}

    /* Static tiles (e.g. the projects gallery) are not links, so they must not borrow the
       lift/border cues that signal "clickable". Image still animates on hover. */
    .bcard--static{cursor:default}
    .bcard--static:hover{transform:none;border-color:var(--hairline);box-shadow:none}
    .bcard--static:hover .bcard__img img{transform:scale(1.04)}

    @media(prefers-reduced-motion:reduce){
      .bcard:hover{transform:none}
      .bfeature:hover .bfeature__img img,.bcard:hover .bcard__img img{transform:none}
      .bfeature:hover .go i,.bcard:hover .go i{transform:none}
    }

/* Founder — 2 column */
    .founder-grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:center}
    @media(min-width:56rem){.founder-grid{grid-template-columns:.82fr 1.18fr}}
    .founder-photo{position:relative;overflow:hidden;background:var(--ink-2)}
    .founder-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 14%;filter:grayscale(1) contrast(1.04);transition:transform 1.2s var(--ease)}
    .founder-photo:hover img{transform:scale(1.05)}
    .founder-photo figcaption{position:absolute;left:0;bottom:0;right:0;padding:.9rem 1.1rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark);background:linear-gradient(to top,rgba(var(--scrim),.85),transparent)}
    .quote blockquote{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(1.7rem,3.8vw,2.7rem);line-height:1.28;margin:.4rem 0 1.6rem;}
    .quote .attr{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
    .chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
    .chip{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-d);padding:.5em 1em;transition:all .3s}
    .chip:hover{border-color:var(--char);color:var(--char)}
    /* Eco/Eco-vite surfaces — olive as punctuation (rules, labels), never as a field. */
    /* Chip carrying the Lal's Group mark beside its label. The img is decorative —
       alt="" — because the chip text already names the group, so a screen reader
       would otherwise announce it twice. */
    .chip--logo{display:inline-flex;align-items:center;gap:.55rem}
    .chip--logo img{max-height:1.25rem;width:auto;height:auto;margin:0;flex:none}
    .chip--eco{color:var(--olive);border-color:rgba(111,116,87,.45)}
    .chip--eco:hover{border-color:var(--olive);color:var(--olive)}
    .value--eco{border-top-color:var(--olive)}
    .value--eco .num{color:var(--olive);opacity:.95}
    .eyebrow--eco{color:var(--olive)!important}
    .band--dark .eyebrow--eco,.strip .eyebrow--eco,.page-hero .eyebrow--eco{color:var(--olive-on-dark)!important}

    /* CTA */
    .cta{position:relative;text-align:center;overflow:hidden;background:#000}
    .cta__media{position:absolute;inset:-12% 0;z-index:0;will-change:transform}
    .cta__media img{width:100%;height:100%;object-fit:cover;opacity:.5}
    .cta::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(var(--scrim),.55)}
    .cta .container{position:relative;z-index:2}
    .cta h2{font-size:clamp(2.3rem,5.6vw,3.65rem);margin:0 0 .6rem;font-weight:500}
    .cta p{max-width:44ch;margin:0 auto 1.8rem;color:var(--on-dark-dim)}
    .cta__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

    /* Footer */
    .site-footer{background:var(--grad-dark);padding:clamp(3rem,6vw,4.5rem) 0 2.5rem;border-top:1px solid var(--line-l)}
    .foot-grid{display:grid;gap:2rem;grid-template-columns:1fr;align-items:start}
    @media(min-width:48rem){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
    .site-footer .brand-name{line-height:0}
    .site-footer .brand-name img{height:1.3rem;width:auto;display:block}
    .site-footer a{color:var(--on-dark-dim);text-decoration:none;font-size:.95rem}.site-footer a:hover{color:var(--on-dark)}
    .site-footer h4{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-dim);margin:0 0 .9rem}
    .site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
    .legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line-l);font-size:.78rem;color:rgba(243,240,234,.55);display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:space-between}
    .preview-flag{background:var(--ink-2);color:var(--on-dark-dim);text-align:center;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:.65rem 1rem;border-top:1px solid var(--line-l)}

    /* To-confirm marker */
    .tbc{display:inline-block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
      border:1px solid currentColor;padding:.25em .6em;opacity:.55;vertical-align:middle;margin-left:.6rem}
    .tbc-note{display:block;font-size:.74rem;letter-spacing:.02em;opacity:.65;margin-top:1.4rem;max-width:60ch}

    /* Stats (count-up) */
    .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 1rem;margin-top:2rem}
    @media(min-width:56rem){.stats{grid-template-columns:repeat(4,1fr)}}
    .stat .n{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(3.4rem,8.3vw,5.4rem);line-height:1;letter-spacing:-.008em}
    .stat .l{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.7rem}

    /* Services list — interactive */
    .svc{position:relative;border-top:1px solid var(--line-d);padding:1.5rem clamp(0px,2vw,1.1rem);display:grid;
      grid-template-columns:2.4rem 1fr;gap:.35rem 1.4rem;align-items:baseline;
      transition:background .45s var(--ease),padding-left .45s var(--ease);}
    @media(min-width:56rem){.svc{grid-template-columns:3rem 17rem 1fr}}
    .svc:hover{background:rgba(20,26,22,.05);padding-left:clamp(.5rem,2vw,1.4rem)}
    .svc .no{font-family:"Cormorant Garamond",serif;font-weight:600;opacity:.35;font-size:1.2rem;transition:opacity .45s,transform .45s var(--ease)}
    .svc:hover .no{opacity:.9;transform:translateY(-3px)}
    .svc h3{font-size:clamp(1.45rem,3.1vw,2rem);margin:0;font-weight:500;transition:transform .45s var(--ease)}
    .svc:hover h3{transform:translateX(8px)}
    .svc p{margin:.3rem 0 0;color:var(--muted);grid-column:2/-1}
    @media(min-width:56rem){.svc p{grid-column:3}}
    /* arrow glyph: kept on the UI sans stack — the display serif has no U+2197 and would fall back inconsistently */
    .svc::after{content:"\2197";position:absolute;right:clamp(.25rem,2vw,1rem);top:1.5rem;font-family:"Inter",system-ui,sans-serif;
      font-size:1.25rem;opacity:0;transform:translate(-6px,4px);transition:opacity .45s,transform .45s var(--ease)}
    .svc:hover::after{opacity:.55;transform:none}
    .svc-list .svc{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease),background .45s var(--ease),padding-left .45s var(--ease)}
    .svc-list.in .svc{opacity:1;transform:none}
    .svc-list.in .svc:nth-child(2){transition-delay:.07s}.svc-list.in .svc:nth-child(3){transition-delay:.14s}
    .svc-list.in .svc:nth-child(4){transition-delay:.21s}.svc-list.in .svc:nth-child(5){transition-delay:.28s}.svc-list.in .svc:nth-child(6){transition-delay:.35s}

    /* Hero scroll cue */
    .scroll-cue{position:absolute;right:clamp(1.25rem,4vw,3rem);bottom:2rem;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6rem;color:rgba(243,240,234,.55);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase}
    .scroll-cue i{display:block;width:1px;height:40px;background:var(--on-dark);transform-origin:top;animation:cue 1.9s var(--ease) infinite}
    @keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

    /* Partners */
    /* Logo wall. Each cell holds either an authorised <img> logo or, until one is
       supplied, the group's wordmark as text — both sit on the same baseline grid,
       so dropping a real file in changes nothing about the layout. */
    .logo-wall{display:grid;grid-template-columns:repeat(2,1fr);margin:.5rem 0 0;padding:0;list-style:none}
    @media(min-width:56rem){.logo-wall{grid-template-columns:repeat(4,1fr)}}
    .logo-wall__item{display:flex;align-items:center;justify-content:center;min-height:5.4rem;
      padding:1.2rem 1rem;border:1px solid var(--line-d);margin:-1px 0 0 -1px;
      opacity:.72;transition:opacity .3s,background .3s}
    .logo-wall__item:hover{opacity:1;background:rgba(20,26,22,.04)}
    /* Cap height AND width so wide wordmarks (IHG, Hyatt) and tall stacked marks
       (Mandarin Oriental, Kempinski) land at a comparable optical size. Don't set
       width/height attributes on these — a fixed box letterboxes the taller ones. */
    .logo-wall__item img{max-height:3.4rem;max-width:74%;width:auto;height:auto;object-fit:contain;
      filter:grayscale(1);mix-blend-mode:multiply}
    .logo-wall__name{text-align:center;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
      color:var(--char)}
    /* On dark bands the wall inverts: light borders, light wordmarks, and logos are
       knocked out to white rather than multiplied into the background. */
    .band--dark .logo-wall__item{border-color:var(--line-l)}
    .band--dark .logo-wall__item:hover{background:rgba(243,240,234,.05)}
    .band--dark .logo-wall__name{color:var(--on-dark)}
    .band--dark .logo-wall__item img{filter:grayscale(1) brightness(0) invert(1);mix-blend-mode:normal}
    .partner-row{margin-top:1.8rem;font-size:.82rem;letter-spacing:.04em;color:var(--muted)}
    .partner-row strong{color:var(--char);letter-spacing:.12em;text-transform:uppercase;font-size:.7rem}

    /* Journey — dark animated timeline */
    .journey-sec{background:var(--grad-dark);color:var(--on-dark)}
    .journey-sec .eyebrow{color:var(--on-dark-dim)}
    .journey-sec .lead{color:var(--on-dark)}
    .timeline{position:relative;margin:3.2rem 0 2rem}
    .timeline__line{position:absolute;left:5px;top:1.2rem;bottom:1.2rem;width:1px;background:var(--line-l)}
    .timeline__fill{position:absolute;left:5px;top:1.2rem;width:1px;height:0;background:var(--on-dark);box-shadow:0 0 12px rgba(243,240,234,.5)}
    .tl-item{position:relative;display:grid;grid-template-columns:1fr;gap:.35rem 2.5rem;align-items:center;opacity:1;
      padding:clamp(1.1rem,3vw,2rem) 0 clamp(1.1rem,3vw,2rem) 2.6rem}
    /* The year track has to track the year's own font-size (clamp 3.4–7rem). At a fixed
       10rem the four digits overflowed the column at large viewports and ran straight into
       the description, so the track is fluid and the column gap widened to match. */
    @media(min-width:48rem){.tl-item{grid-template-columns:clamp(9.5rem,22vw,15rem) 1fr;gap:.35rem 3.25rem;padding-left:3.2rem}}
    .tl-dot{position:absolute;left:0;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;
      background:var(--ink-2);border:1px solid var(--line-l);transition:all .5s var(--ease)}
    .tl-item.in .tl-dot{background:var(--on-dark);border-color:var(--on-dark);box-shadow:0 0 0 6px rgba(243,240,234,.07),0 0 14px rgba(243,240,234,.5)}
    .tl-item .yr{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(3.4rem,9.8vw,7rem);line-height:.88;
      letter-spacing:-.012em;color:rgba(243,240,234,.18);transform:translateX(-10px);
      transition:color .85s var(--ease),transform .85s var(--ease)}
    .tl-item.in .yr{color:var(--on-dark);transform:none}
    .tl-item p{color:var(--on-dark-dim);max-width:42ch;margin:.2rem 0 0}

    @media(prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      .reveal,.hero__inner>*,.svc-list .svc{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
      .strip__media,.cta__media{inset:0!important;transform:none!important}
      .scroll-cue i{animation:none}
    }

/* ---- Interior-page components (shared) ---- */
.page-hero{position:relative;padding:clamp(9rem,18vw,13rem) 0 clamp(3.5rem,7vw,5.5rem);overflow:hidden;background:var(--ink)}
.page-hero__media{position:absolute;inset:0;z-index:0}
.page-hero__media img{width:100%;height:100%;object-fit:cover;opacity:.45}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(var(--scrim),.94),rgba(var(--scrim),.55) 60%,rgba(var(--scrim),.7))}
.page-hero__inner{position:relative;z-index:2;max-width:52rem}
.page-hero h1{font-size:clamp(2.8rem,6.9vw,5.05rem);font-weight:400;margin:.4rem 0 1rem;color:var(--on-dark)}
.page-hero .lead-sub{color:var(--on-dark-dim);font-size:1.075rem;max-width:40rem;margin:0}
.breadcrumb{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-dim);margin-bottom:1rem}
.breadcrumb a{text-decoration:none;opacity:.8}.breadcrumb a:hover{opacity:1}
.breadcrumb i{opacity:.5;margin:0 .5rem;font-style:normal}
.prose{max-width:62ch}.prose p{margin:0 0 1.2rem}
.section-head{max-width:42rem;margin-bottom:2.6rem}
.section-head .lead{margin:.5rem 0 0}
/* Solutions category figures — normalise the varied source ratios to one frame */
.cat-figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.grid-2{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr}
@media(min-width:52rem){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;gap:clamp(1.5rem,4vw,2.5rem);grid-template-columns:1fr}
@media(min-width:40rem){.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:64rem){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--line-d);padding:clamp(1.5rem,3vw,2rem)}
.band--dark .card{border-color:var(--line-l)}
.card h3{margin:0 0 .5rem;font-size:1.45rem;font-weight:600}
.card p{margin:0;color:var(--muted)}
.band--dark .card p{color:var(--on-dark-dim)}