/* ---------------------------------------------------------------------------
   Omarzay — base and components
   --------------------------------------------------------------------------- */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Lenis (smooth scrolling) marks the root; it must own the scroll then */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  background:var(--navy-deep); color:var(--white);
  font-family:var(--f-body); font-weight:400;
  font-size:var(--t-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
ul{list-style:none}

/* ---------- type roles ---------- */
.t-display-xl{
  font-family:var(--f-display); font-weight:300;
  font-size:var(--t-display-xl); line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
}
.t-script{
  font-family:var(--f-script); font-weight:400;
  font-size:var(--t-script); line-height:var(--lh-script);
  color:var(--brass);
}
.t-section-label{
  font-family:var(--f-display); font-weight:400;
  font-size:var(--t-section-label); line-height:1.2;
}
.t-body-l{font-size:var(--t-body-l); line-height:var(--lh-body-l)}
.t-label{
  font-family:var(--f-display); font-weight:500;
  font-size:var(--t-label); line-height:1.25;
  letter-spacing:var(--ls-label); text-transform:uppercase;
}

/* ---------- shell ---------- */
.wrap{max-width:var(--content); margin:0 auto; width:100%}
.section{padding:clamp(72px,9vw,150px) var(--pad)}

/* ---------- nav ----------
   A centred cluster: two links, the mark, two links. The mark carries Home,
   so there is no Home link — as in the Figma. */
.nav{
  --nav-fg:var(--white);   /* flips to navy over a light section (see initNavTheme) */
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:clamp(16px,1.77vw,34px) var(--pad);
  transition:padding var(--t-base) var(--e-out);
}
/* No bar. The nav stays transparent the whole way down — it only condenses:
   tighter padding and a smaller mark. */
.nav.is-stuck{
  padding:clamp(10px,.9vw,17px) var(--pad);
}
.nav__inner{
  display:flex; align-items:center; justify-content:center;
  gap:var(--nav-gap-logo);
}
.nav__group{display:flex; align-items:center; gap:var(--nav-gap-link)}
.nav__logo{flex:none; display:block}
.nav__logo img{
  height:var(--nav-logo-h); width:auto;
  filter:var(--nav-logo-filter);
  transition:height var(--t-base) var(--e-out), filter var(--t-base) var(--e-out);
}
/* Over a light section: navy links and the logo in its own navy. */
.nav.on-light{--nav-fg:var(--navy-deep); --nav-logo-filter:none}
.nav.is-stuck .nav__logo img{height:calc(var(--nav-logo-h) * .62)}

.nav__link{
  position:relative; display:inline-block; white-space:nowrap;
  color:var(--nav-fg); text-decoration:none;
  transition:color var(--t-fast) var(--e-out);
}
/* The underline is a pseudo-element so the active state does not change the
   height of the link box and shift the row. 23px below the text, per Figma.

   It draws outward from the centre and retracts back to it. Scale alone does
   the work — no opacity fade, so it reads as a line being drawn rather than
   one appearing. A hairline at 1px keeps it quiet. */
.nav__link::after{
  content:""; position:absolute; left:0; right:0; top:calc(100% + 23px);
  height:1px; background:var(--brass);
  transform:scaleX(0); transform-origin:center;
  transition:transform var(--t-rule) var(--e-soft);
}
.nav__link:hover{color:var(--brass)}
/* Split characters inherit the link's colour rather than carrying their own. */
.nav__link .ch{color:inherit}
.nav__link:hover::after,
.nav__link:focus-visible::after{transform:scaleX(1)}
.nav__link.is-current{color:var(--brass)}
.nav__link.is-current::after{transform:scaleX(1)}
.nav.is-stuck .nav__link::after{top:calc(100% + 10px)}

/* ---------- ring CTA ---------- */
.cta{
  display:inline-flex; align-items:center; gap:26px;
  text-decoration:none; color:var(--white);
}
.cta__ring{
  position:relative; flex:none; width:64px; height:64px; border-radius:50%;
  border:1px solid var(--brass); color:var(--brass);
  overflow:hidden;                 /* clips the arrow as it leaves and arrives */
  font-size:var(--t-body-l); line-height:1;
  transition:background var(--t-fast) var(--e-out),
             color var(--t-fast) var(--e-out);
}
/* Two arrows: the resting one exits right, its twin arrives from the left.
   Both move together so the swap reads as one continuous travel. */
.cta__arw{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--t-arrow) var(--e-out);
}
.cta__arw--in{transform:translateX(-160%)}
.cta:hover .cta__arw--out,
.cta:focus-visible .cta__arw--out{transform:translateX(160%)}
.cta:hover .cta__arw--in,
.cta:focus-visible .cta__arw--in{transform:translateX(0)}
.cta__label{
  font-size:var(--t-label); line-height:1.25;
  letter-spacing:var(--ls-button); text-transform:uppercase;
  white-space:nowrap;
}

/* Label roll: every character holds a white copy and a brass copy stacked in a
   clipped box. On hover both shift up together, so the white one leaves through
   the top as the brass one arrives from below. Staggered per character.

   The split is done in JS, so the markup stays plain text. Until it runs — or
   if it never does — the :not(.is-split) rule below still turns the label brass. */
.cta__label:not(.is-split){transition:color var(--t-fast) var(--e-out)}
.cta:hover .cta__label:not(.is-split),
.cta:focus-visible .cta__label:not(.is-split){color:var(--brass)}

/* Label characters: on hover each one slides up and fades out, then returns
   from below fading back in — in brass. One element, two phases, so it needs a
   keyframe rather than a transition. The colour flips at the midpoint, while
   opacity is 0, so the change is never seen happening. */
@keyframes oz-char-swap{
  /* Easing is declared per keyframe, not on the animation. An iteration-level
     ease-out compresses the whole sequence into its own curve — measured, it
     finished the exit in 35ms and stretched the return over 385ms, so the
     letter only ever appeared to arrive. The animation itself runs linear. */
  0%   {transform:translateY(0);                             opacity:1;
        animation-timing-function:var(--e-in)}
  45%  {transform:translateY(calc(var(--char-travel) * -1)); opacity:0}
  46%  {transform:translateY(var(--char-travel));            opacity:0;
        animation-timing-function:var(--e-out)}
  100% {transform:translateY(0);                             opacity:1}
}

.ch{
  display:inline-block; vertical-align:top;
  transition:color var(--t-fast) var(--e-out);
}
.oz-swap-host:hover .ch,
.oz-swap-host:focus-visible .ch{
  color:var(--brass);
  animation:oz-char-swap var(--t-char) linear both;
  animation-delay:calc(var(--i) * var(--stagger-char));
}

/* Visually hidden but still announced — the split copy is aria-hidden, so the
   accessible name has to come from somewhere. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.cta:hover .cta__ring{background:var(--brass); color:var(--navy-deep)}
.cta:focus-visible{outline:2px solid var(--brass); outline-offset:6px}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:clamp(180px,20vh,260px) var(--pad) clamp(72px,6.25vw,120px);
  /* The photograph runs on past the section's foot (see --hero-overhang), so
     the box must not clip it. */
  overflow:visible;
  --hero-overhang:32vh;
}
/* The story slides over the hero and its top is see-through, so the
   photograph has to keep going under it or its bottom edge would show as a
   line across the story. */
.hero__bg{position:absolute; inset:0; bottom:calc(-1 * var(--hero-overhang)); z-index:0; overflow:hidden}
/* TEMPORARY — composition test. The photograph fills the box exactly, so the
   only way to lift its horizon into the top third is to enlarge it, anchored
   at the foot so the overhang and the merge stay put. This upscales an image
   already shown larger than it is; the real fix is a taller export with the
   horizon where it should be, at which point --hero-zoom goes back to 1. */
.hero{--hero-zoom:1.2}
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(var(--hero-zoom)); transform-origin:50% 100%;
}

/* A little more night behind the navigation. Deep navy at the very top,
   gone by a quarter of the way down, with eased stops so it reads as the sky
   darkening rather than a band laid over it. */
.hero::before{
  content:""; position:absolute; left:0; right:0; top:0; height:28vh; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(18,32,59,.72) 0%,
    rgba(18,32,59,.52) 28%,
    rgba(18,32,59,.24) 60%,
    rgba(18,32,59,0) 100%);
}

/* Figma has one rectangle carrying both a gradient and a 7.3px backdrop blur.
   In CSS a backdrop-filter applies evenly across its whole box, which would
   leave a hard blur edge at the top. Splitting it in two and masking the blur
   lets it ramp in with the gradient instead. */
.hero__scrim{
  position:absolute; left:0; right:0; z-index:1;
  bottom:calc(-1 * var(--hero-overhang)); height:calc(48% + var(--hero-overhang));
  /* Most of the way to navy at the section's foot, all the way at the end of
     the overhang. The story's own gradient does the rest, so the photograph
     is still faintly there behind the sub-navigation, as in the Figma. */
  background:linear-gradient(180deg,
    rgba(22,24,29,0) 0%,
    rgba(18,32,59,.78) calc(100% - var(--hero-overhang)),
    var(--navy-deep) 100%);
}
.hero__blur{
  position:absolute; left:0; right:0; z-index:1;
  bottom:calc(-1 * var(--hero-overhang)); height:calc(48% + var(--hero-overhang));
  -webkit-backdrop-filter:blur(7.3px); backdrop-filter:blur(7.3px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 45%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 45%);
}
.hero__inner{position:relative; z-index:2; width:100%}
.hero__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter);
  align-items:end;
}
.hero__script{display:block; margin-bottom:.15em}
.hero__title{max-width:var(--measure-display); color:var(--white)}
.hero__lead{
  max-width:var(--measure-lead);
  color:rgba(255,255,255,.86); margin-bottom:40px;
}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr; gap:36px; align-items:start}
  .nav__inner{flex-wrap:wrap; gap:clamp(18px,4vw,40px)}
  .nav__logo{order:-1; width:100%; display:flex; justify-content:center}
}

/* ---------- motion ----------
   Reveal targets start hidden only when JS is running. If the GSAP CDN is
   blocked the page still renders — see assets/js/site.js. */
.js .rv{opacity:0; transform:translateY(26px)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1 !important; transform:none !important}
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

/* ---------- hero + story stack ----------
   Nothing is pinned. The hero scrolls away like any section — just slower than
   the page, which is what makes the story appear to slide across it. The
   stacking order is the other half: the story paints above the hero, so the
   hero's lower half is covered rather than pushed. */
.stack{position:relative}
.stack .hero{position:relative; z-index:0; will-change:transform}
.stack .story{position:relative; z-index:2}

/* ---------- masked text ----------
   splitIntoLines() rebuilds copy as lines, each a block that clips, so a line
   or a letter can slide in from above its own top edge and out below. */
.ln{display:block; overflow:hidden}
/* Sacramento's ascenders overhang the em box; give the mask room above and
   keep it as real space, so the numeral never leans into the eyebrow. */
.ln--loose{padding-block:.16em; margin-bottom:-.16em}
.ln__i{display:block}
.chr{display:inline-block; will-change:transform}

/* ---------- story ----------
   Three chapters in one frame. The section is tall; a sticky stage inside it
   holds the sub-navigation, the copy and the strand still while the page
   scrolls through, so the copy can change in place. */
.story{
  position:relative;
  min-height:calc(var(--chapters, 3) * 100vh);
  /* No hard top edge: the section starts see-through and is solid by 55vh.
     Pinned, the hero's foot sits at 29vh (1 - IMAGE_SPEED) and its overhang
     ends at 61vh, both inside the solid part, so nothing shows through. */
  background:
    linear-gradient(180deg, rgba(18,32,59,0) 0, rgba(18,32,59,.85) 30vh, var(--navy-deep) 55vh) top / 100% 55vh no-repeat,
    linear-gradient(var(--navy-deep), var(--navy-deep)) 0 55vh / 100% calc(100% - 55vh) no-repeat;
  isolation:isolate;
}
.story__stage{
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding:19.4vh var(--pad) 0;
  text-align:center; overflow:hidden;
}

/* sub-navigation, above the copy */
.subnav{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(24px,3.96vw,76px); flex-wrap:wrap;
  margin-bottom:clamp(30px,5.8vh,63px);
}
.subnav__item{
  display:block; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--f-display); font-weight:400; font-size:var(--t-label);
  letter-spacing:.0166em; color:var(--white); white-space:nowrap;
  opacity:.2; transition:opacity var(--t-base) var(--e-out);
}
/* The dot and the text live on an inner span so the arrival (script, on the
   span) and the active dimming (CSS, on the button) never fight over one
   opacity. */
.subnav__label{display:flex; align-items:center; gap:27px}
.subnav__label::before{
  content:""; flex:none; width:4px; height:4px; border-radius:50%;
  background:currentColor; transition:background var(--t-base) var(--e-out);
}
.subnav__item.is-active{opacity:1}
.subnav__item.is-active .subnav__label::before{background:var(--brass)}
.subnav__item:hover{opacity:.6}
.subnav__item.is-active:hover{opacity:1}

/* chapters stack on the same spot; only the current one is shown */
.story__chapters{position:relative; width:100%; flex:1}
.story__chapter{
  position:absolute; inset:0;
  display:flex; justify-content:center;
  pointer-events:none;
}
.story__inner{
  display:flex; flex-direction:column; align-items:center; width:100%;
  padding-top:var(--inner-offset, 0);
}
/* a chapter's button, at the foot of the stage */
.story__cta{position:absolute; left:50%; bottom:12vh; transform:translateX(-50%); pointer-events:auto}
.story__eyebrow{color:var(--brass)}
.story__display{display:block; color:var(--brass)}
.story__display--numeral{
  font-family:var(--f-numeral); font-weight:400;
  font-size:var(--t-numeral); line-height:1.46;
}
.story__display--title{
  font-family:var(--f-numeral); font-weight:400;
  font-size:var(--t-title); line-height:1.46;
}
.story__eyebrow--paper{color:var(--paper)}
.story__display--script{
  font-family:var(--f-script); font-weight:400;
  font-size:var(--t-script); line-height:1.3; margin:.1em 0 .28em;
}
.story__body{max-width:var(--measure, 744px); margin-top:6px}
.story__body + .story__body{margin-top:38px}
/* a short closing line is set narrower, so it reads as a sign-off; a short
   opening line keeps the full measure */
.story__body + .story__body--short{max-width:min(400px, var(--measure, 744px))}

/* ---------- chapter art ----------
   A line illustration a chapter can carry along the foot of the stage.
   Geometry from the Figma: 66% of the frame wide, its base 8.8% up. Drawn
   in and out by the chapter's own scroll timeline. */
.story__art{
  position:absolute; left:50%; bottom:8.8vh;
  width:66vw; max-width:1268px; height:auto;
  transform:translateX(-50%);
  overflow:visible; pointer-events:none;
}

/* ---------- timeline ----------
   The Legacy chapter's highlights on one hairline (Figma 51:1961). The line
   is 1580 wide, centred, fading to nothing at both ends. Entries are spaced
   half a line apart and panned by the chapter's scroll, so one surfaces at
   the line's right end as the last dissolves at its left; a soft brass glow
   on the line follows the year in focus. */
.tline{
  position:absolute; left:calc(-1 * var(--pad)); right:calc(-1 * var(--pad)); bottom:24.8vh;
  height:22vh; min-height:220px;
  overflow:hidden;
  --tl-bar:min(1580px, 82vw);
  --tl-step:calc(var(--tl-bar) / 3);   /* three along the line at once */
  --tl-line:36%;                        /* the hairline's height in the box */
}
.tline__track{position:relative; height:100%; will-change:transform}
.tline__rule{
  position:absolute; left:50%; top:var(--tl-line); width:var(--tl-bar); height:1px;
  margin-left:calc(var(--tl-bar) / -2);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
  transform-origin:50% 50%;
}
.tline__item{
  position:absolute; top:0; bottom:0;
  /* the first entry's column sits at the centre of the screen; script pans */
  left:calc(50% - 117px + var(--i) * var(--tl-step));
  width:235px;
  will-change:opacity;   /* set by script from its place along the line */
}
.tline__year{
  position:absolute; left:0; bottom:calc(100% - var(--tl-line) + 20px);
  font-family:var(--f-numeral); font-size:22px; line-height:1.24;
  letter-spacing:.087em; color:var(--brass);
}
/* a soft brass glow on the line, 244 wide, which follows the year in focus */
.tline__mark{
  position:absolute; left:calc(50% - 117px); top:var(--tl-line); width:244px; height:1px;
  margin-left:-97px;   /* centred on the year, which sits 25px into the column */
  background:linear-gradient(90deg, rgba(192,161,103,0) 0%, var(--brass) 50%, rgba(192,161,103,0) 100%);
}
.tline__body{position:absolute; left:0; top:calc(var(--tl-line) + 19px); width:235px; text-align:left}
.tline__title{
  margin:0 0 13px; font-family:var(--f-display); font-weight:400;
  font-size:19px; line-height:1.3; color:var(--white);
}
.tline__text{
  margin:0; font-family:var(--f-display); font-size:var(--t-body);
  line-height:1.45; color:rgba(255,255,255,.72);
}

/* ---------- map: international presence ----------
   The first light section. The section is tall; its first screen is the
   arrival, during which a paper disc opens over the story's last frame and
   grows to fill the viewport; the rest is pinned while the arcs draw. The
   section itself has no background — the body's navy shows around the disc. */
.globe{position:relative; z-index:3; min-height:270vh; color:var(--navy-deep)}   /* +100vh: the companies panel rises over the held places */
.globe__pin{position:sticky; top:0; height:100vh; clip-path:inset(-100vh 0 0 0)}   /* open above for the disc; closed below */
/* The paper reaches a whole viewport above the pin, so while the section is
   still arriving the disc can paint over the story's last frame instead of
   being cut flat at the section's top edge. Its centre is the pin's 72%,
   which in this taller box is 86%. */
.globe__paper{
  position:absolute; left:0; right:0; top:-100vh; bottom:0; background:var(--paper);
  clip-path:circle(0% at 50% 86%);   /* grown by script */
}
/* Hover state (Figma 69:562): the hovered place's photograph fills the pin
   under a navy tint. Hidden, the scene is also out of the nav's hit-test,
   so the nav reads the paper; live, it answers as dark. */
.globe__scene{
  position:absolute; inset:0; pointer-events:none;
  opacity:0; visibility:hidden;
  transition:opacity .7s ease, visibility 0s linear .7s;
}
.globe.is-live .globe__scene{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .7s ease, visibility 0s}
.globe__photo{
  position:absolute; inset:0; background:center / cover no-repeat;
  opacity:0; transform:scale(1.06);
  transition:opacity .8s ease, transform 1.6s cubic-bezier(.2,.6,.2,1);
}
.globe__photo--empty{background:#8B9099}   /* grey until the photograph arrives */
/* With WebGL the canvas draws the photographs and their ripple crossover;
   without it the divs above crossfade. */
.globe__gl{position:absolute; inset:0; width:100%; height:100%; display:none}
.globe__scene.is-gl .globe__gl{display:block}
.globe__scene.is-gl .globe__photo{display:none}
.globe__photo.is-on{opacity:1; transform:scale(1)}
.globe__tint{position:absolute; inset:0; background:rgba(27,46,82,.69)}
.globe__title,.globe__text,.globe__city,.globe__country{transition:color .5s ease, opacity .5s ease, filter .5s ease}
.globe.is-live .globe__title,.globe.is-live .globe__text,.globe.is-live .globe__city{color:var(--white)}
.globe.is-live .globe__country{color:rgba(255,255,255,.62)}
.globe.is-live .globe__place:not(.is-on) .globe__city,
.globe.is-live .globe__place:not(.is-on) .globe__country{opacity:.3; filter:blur(2px)}

/* Figma 53:2009: eyebrow at 266, heading at 313, text from 389 (of 1080).
   Nothing here is interactive, and the nav decides its colour by hit-testing
   what is painted under it, so this box must not answer for the paper. */
.globe__inner{
  position:relative; z-index:1; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:24.6vh var(--pad) 0;
}
.globe__eyebrow{color:var(--brass); font-weight:500; letter-spacing:.12em; text-transform:uppercase}
.globe__title{
  margin:27px 0 22px; font-family:var(--f-display); font-weight:400;
  font-size:var(--t-h2); line-height:1.2; color:var(--navy-deep);
}
.globe__text{max-width:1180px; font-size:var(--t-body); line-height:1.75; color:var(--navy-deep)}
/* Four places in a row under the paragraph. The inner box is out of the
   nav's hit-test; the places alone take the pointer, for the hover. */
.globe__row{
  list-style:none; margin:clamp(40px, 6vh, 64px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(24px, 3vw, 56px);
  width:min(1180px, 100%);
}
.globe__place{
  position:relative; height:clamp(160px, 24vh, 260px); pointer-events:auto; cursor:default;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-align:center;
}
.globe__city{
  position:relative; font-family:var(--f-display); font-size:var(--t-body-l); letter-spacing:.04em;
  color:var(--navy-deep);
}
.globe__country{position:relative; font-family:var(--f-body); font-size:var(--t-body); color:rgba(18,32,59,.62)}

/* ---------- companies ----------
   Navy after the paper. The section overlaps the presence section by a
   screen (its pin is held that much longer), so the places stay while a
   navy panel — rounded, narrower than the screen — rises over them from the
   foot; with the scroll it widens to the edges and its corners straighten
   into the full screen. Everything lives inside the panel, which is
   clipped, so nothing shows outside it. Two columns at 1920 (Figma
   70:1663): the heading and its link, and the seven names as a ruled list. */
.cos{position:relative; z-index:4; min-height:270vh; margin-top:-100vh; color:var(--white); pointer-events:none}   /* +100vh: the panel leaves over the gardens section */
.cos__pin{position:sticky; top:0; height:100vh}
.cos__box{
  position:absolute; inset:0; background:var(--navy-deep); pointer-events:auto;
  clip-path:inset(0 8% 0 8% round 48px);   /* the panel; opened by script */
}
.cos__inner{
  position:relative; z-index:1; pointer-events:none;
  display:grid; grid-template-columns:minmax(0, 531fr) minmax(0, 743fr); align-items:start;
  gap:clamp(40px, 5.3vw, 102px);
  /* Figma 70:1663: 272 in from either side at 1920, the list from 234 down */
  padding:21.7vh clamp(24px, 14.17vw, 272px) 0;
}
.cos__head{padding-top:24px}   /* the heading block sits 24 below the list's top */
.cos__eyebrow{display:block; color:var(--brass); font-weight:500; letter-spacing:.12em; text-transform:uppercase}
.cos__title{
  margin:27px 0 0; font-family:var(--f-display); font-weight:400;
  font-size:clamp(30px, 2.083vw, 40px); line-height:1.2; color:var(--white);
}
.cos__title-line{display:block}
.cos__cta{margin-top:34px; pointer-events:auto}
.cos__list{list-style:none; margin:0; padding:0}
.cos__row{
  position:relative;
  display:grid; grid-template-columns:80px 136px minmax(0, 1fr); align-items:center;
  height:71px; margin-bottom:30px;
  pointer-events:auto;
}
.cos__rule{position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(255,255,255,.16); transform-origin:0 50%}
.cos__row:last-child{margin-bottom:0}
.cos__idx{font-family:var(--f-display); font-weight:500; font-size:var(--t-label); letter-spacing:.12em; color:rgba(255,255,255,.42)}
.cos__year{font-family:var(--f-numeral); font-size:clamp(22px, 1.386vw, 26.6px); line-height:1; color:var(--brass)}
.cos__name{
  font-family:var(--f-display); font-weight:400; font-size:clamp(19px, 1.302vw, 25px); line-height:1.3;
  transition:transform var(--t-base) var(--e-out);
}
.cos__row:hover .cos__name{transform:translateX(10px)}

/* ---------- gardens ----------
   The companies panel leaves the way it came: this section overlaps that
   one by a screen, and as it scrolls in the panel above narrows back to a
   rounded card and lifts away, revealing the photograph. The image is
   taller than the screen and drifts with the scroll — the parallax. */
.gdn{position:relative; z-index:3; min-height:300vh; margin-top:-200vh; color:var(--white)}   /* under the panel (z 4); pinned a screen before it leaves */
.gdn__pin{position:sticky; top:0; height:100vh; overflow:hidden}
.gdn__media{position:absolute; inset:0; overflow:hidden}
.gdn__img{
  position:absolute; left:0; right:0; top:-30vh; bottom:-30vh;   /* 160vh tall: the drift's room; the portrait image travels sky → gardens */
  background:center / cover no-repeat; will-change:transform;
}
/* Figma/review site: a gradient from the left, so the copy sits on ink */
.gdn__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(10,17,32,.85) 0%, rgba(10,17,32,.5) 48%, rgba(10,17,32,.2) 100%);
}
.gdn__inner{
  position:relative; z-index:1; height:100%;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  max-width:calc(var(--content) + 2 * var(--pad)); margin:0 auto;
  padding:0 var(--pad);
}
.gdn__eyebrow{display:block; color:var(--brass); font-weight:500; letter-spacing:.12em; text-transform:uppercase}
.gdn__title{
  margin:27px 0 26px; font-family:var(--f-display); font-weight:400;
  font-size:var(--t-h2); line-height:1.2; color:var(--white);
}
.gdn__text{max-width:640px; font-size:var(--t-body); line-height:1.75; color:rgba(255,255,255,.86)}
.gdn__cta{margin-top:38px}

/* ---------- footer ----------
   Navy, the floor the last section settles onto. Four columns at 1920: the
   mark and a line about the enterprise, then three link groups; a rule, then
   the base line. */
.ftr{position:relative; z-index:6; background:var(--navy-deep); color:var(--white)}
.ftr__inner{
  max-width:calc(var(--content) + 2 * var(--pad)); margin:0 auto;
  padding:clamp(64px, 8vw, 128px) var(--pad) clamp(32px, 3.5vw, 56px);
}
.ftr__cols{
  display:grid; grid-template-columns:minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap:clamp(32px, 4vw, 80px);
}
.ftr__mark{width:clamp(140px, 9.4vw, 180px); height:auto; display:block}
.ftr__blurb{
  margin-top:26px; max-width:34ch;
  font-size:var(--t-body); line-height:1.75; color:rgba(255,255,255,.6);
}
.ftr__head{display:block; color:var(--brass); font-weight:500; letter-spacing:.12em; text-transform:uppercase}
.ftr__list{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
.ftr__link{
  font-family:var(--f-body); font-size:var(--t-body); line-height:1.5;
  color:rgba(255,255,255,.72); text-decoration:none;
  transition:color var(--t-fast) var(--e-out);
}
.ftr__link:hover,.ftr__link:focus-visible{color:var(--white)}
.ftr__detail{font-family:var(--f-body); font-size:var(--t-body); line-height:1.5; color:rgba(255,255,255,.72)}
/* Not yet supplied by the client — shown as the label, dimmed. */
.ftr__pending{font-family:var(--f-body); font-size:var(--t-body); line-height:1.5; color:rgba(255,255,255,.38)}
.ftr__base{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:clamp(56px, 7vw, 104px); padding-top:clamp(20px, 2vw, 32px);
  border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--f-body); font-size:var(--t-body); color:rgba(255,255,255,.52);
}
.ftr__policies{display:inline-flex; align-items:center; gap:12px}
.ftr__dot{color:rgba(255,255,255,.32)}

/* ---------- strand ----------
   One living line along the foot of the stage. The canvas draws it; the
   milestone labels are real text laid over the canvas and moved onto the
   line by script, so they stay selectable, sized by the type scale and never
   below 16px. */
.strand{
  position:absolute; left:0; right:0; bottom:0;
  height:42vh;
  color:#D3D7ED;
  pointer-events:none;
}
.strand__canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.strand__marks{position:absolute; inset:0}
.strand__mark{
  position:absolute; top:0;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  opacity:0; white-space:nowrap;
  transform:translate(-50%, 0);
  will-change:transform, opacity;
}
.strand__year{
  font-family:var(--f-display); font-size:var(--t-label); letter-spacing:.0166em;
  color:var(--brass);
}
.strand__title{
  font-family:var(--f-body); font-size:var(--t-body); color:var(--white); opacity:.7;
}

@media (max-width:900px){
  /* No pinning on touch: a three-chapter pinned sequence fights momentum
     scrolling and the address bar resizing. The chapters stack instead. */
  .story{min-height:0}
  .story__stage{position:static; height:auto; padding:12vh var(--pad) 0}
  .story__chapters{display:flex; flex-direction:column; gap:14vh}
  /* Stacked, a chapter is a column: copy, then its art or timeline below. */
  .story__chapter{position:static; inset:auto; flex-direction:column; align-items:center}
  /* A relative box whose children are all absolute has no width of its own. */
  .strand{position:relative; width:100%; height:34vh; margin-top:8vh}
  .story__art{position:relative; left:auto; bottom:auto; transform:none; width:100%; margin-top:8vh}
  /* Native sideways scrolling on phones; no pan, nothing dimmed. */
  .tline{position:relative; left:auto; right:auto; bottom:auto; width:100vw; margin-top:6vh; height:260px;
         overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
         --tl-step:280px}
  .tline__track{width:calc(48px + var(--n) * var(--tl-step))}
  .tline__item{left:calc(24px + var(--i) * var(--tl-step))}
  .tline__rule{left:0; width:100%; margin-left:0}
  .tline__mark{display:none}
  .story__cta{position:static; transform:none; margin-top:28px}
  /* Footer: the brand block, then the three groups two-up. */
  .ftr__cols{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:36px 24px}
  .ftr__brand{grid-column:1 / -1}
  .ftr__base{flex-direction:column; align-items:flex-start; gap:12px}
  /* Gardens: no pin and no parallax on phones; the image is the section. */
  .gdn{min-height:0; margin-top:0}
  .gdn__pin{position:static; height:auto; min-height:82vh}
  .gdn__img{top:0; bottom:0}
  .gdn__inner{height:auto; padding-top:14vh; padding-bottom:14vh}
  /* Companies: no pin and no panel on phones; one column, navy. */
  .cos{min-height:0; margin-top:0; background:var(--navy-deep); pointer-events:auto}
  .cos__pin{position:static; height:auto; padding-bottom:12vh}
  .cos__box{position:static; clip-path:none}
  .cos__inner{grid-template-columns:1fr; gap:40px; padding-top:14vh}
  .cos__row{grid-template-columns:44px 92px minmax(0, 1fr); height:auto; min-height:64px; padding:12px 0; margin-bottom:16px}
  /* Globe: no pin and no disc on phones; the section is simply paper. */
  .globe{min-height:0; background:var(--paper)}
  .globe__pin{position:static; height:auto; padding-bottom:12vh}
  .globe__paper{clip-path:none; top:0}
  .globe__inner{padding-top:14vh}
  .globe__pin{clip-path:none}
  .globe__row{grid-template-columns:repeat(2, 1fr); gap:12px; margin-top:32px}
  .globe__place{height:150px}
  /* Seven headings will not fit across a phone; the years alone do, if they
     alternate above and below the line. */
  .strand__title{display:none}
  .strand__mark:nth-child(even){flex-direction:column-reverse}
  .subnav{gap:18px}
}


/* ---------- Our Story page ----------
   Three chapters over one sky (Figma 113:151). The stage is pinned; the
   skies crossfade behind it (initOurStory) — night, sunrise, day. Chapter
   geometry is the Figma's as shares of the 1566px content box (x) and the
   1080px frame (y). The inner box IS the content box (no padding), because
   absolutely positioned children measure against the padding edge. */
.ost{position:relative; min-height:calc((var(--chapters, 3) + 1) * 100vh); color:var(--white); background:var(--navy-deep); isolation:isolate}
.ost__stage{position:sticky; top:0; height:100vh; overflow:hidden}
.ost__skies{position:absolute; inset:0; overflow:hidden}
.ost__sky{position:absolute; inset:0; background:center / cover no-repeat; will-change:opacity}
.ost__sky[data-sky]:not([data-sky="0"]){opacity:0}
/* Legibility first: a light tint over the whole sky, and ink rising from the
   foot, clear by the upper third, so the copy and the name sit on navy while
   the horizon and the light stay the picture. */
.ost__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(18,32,59,0) 30%, rgba(18,32,59,.42) 58%, rgba(18,32,59,.78) 100%),
    rgba(18,32,59,.12);
}
.ost__chapter{position:absolute; inset:0; pointer-events:none}
/* no flash of every chapter stacked before the script has placed them */
.ost.is-js:not(.is-ready) .ost__chapter{visibility:hidden}
.ost__inner{position:relative; height:100%; width:min(var(--content), calc(100% - 2 * var(--pad))); margin:0 auto}

/* chapter 1: the thesis, centred */
.ost__chapter--intro .ost__inner{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-top:8vh}
.ost__eyebrow{display:block; color:var(--paper); font-family:var(--f-display); font-weight:400; font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; line-height:1.25}
.ost__title{
  margin:26px 0 0; max-width:76.5%;
  font-family:var(--f-numeral); font-weight:400; font-size:var(--t-title); line-height:1.46; color:var(--brass);
}

/* The veil: near-solid navy over the first frame, lifted by the scroll, so the
   mountains emerge from the dark and the load-in text sits on ink. */
.ost__dark{position:absolute; inset:0; background:var(--navy-deep); opacity:.86; will-change:opacity}   /* starts down; the script lifts it */

/* the legacy chapter: the script title up top, the home story's timeline
   panning beneath it across the whole width, on the day sky */
.ost__chapter--timeline .ost__inner{display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:34vh}   /* the title sits just above the line */
.ost__title--timeline{margin:0; max-width:none}
.ost__chapter--timeline .tline{left:0; right:0; bottom:22vh}

/* chapters 2 and 3: a year across the sky, a portrait with its name, the copy */
.ost__year{
  position:absolute; top:15vh; display:block;   /* Figma 24.4vh; raised so its descenders clear the copy */
  font-family:var(--f-numeral); font-weight:400; font-size:clamp(96px, 15.42vw, 296px); line-height:1.46; color:var(--brass);
  white-space:nowrap; text-align:center;
}
.ost__portrait{position:absolute}
.ost__figure{margin:0; overflow:hidden; width:100%}
.ost__figure img{display:block; width:100%; height:100%; object-fit:cover}
.ost__name{
  margin:1.6vw 0 0; max-width:270px;
  font-family:var(--f-display); font-weight:300; font-size:var(--t-section-label); line-height:1.36; letter-spacing:.015em; color:var(--white);
}
.ost__copy{position:absolute; z-index:1; width:34.9%; min-width:300px}
.ost__body{margin:0; font-size:var(--t-body); line-height:1.875; color:var(--white)}
.ost__body + .ost__body{margin-top:30px}

.ost__chapter--figure-left .ost__year{left:38.6%; width:44.8%}
.ost__chapter--figure-left .ost__portrait{left:16.7%; top:42.5vh; width:27.5%}
.ost__chapter--figure-left .ost__figure{aspect-ratio:431 / 323}
.ost__chapter--figure-left .ost__copy{left:47.5%; top:57vh}

.ost__chapter--figure-right .ost__year{left:14.8%; width:50.2%}
.ost__chapter--figure-right .ost__portrait{left:55.6%; top:44.4vh; width:26.9%}
.ost__chapter--figure-right .ost__figure{aspect-ratio:421 / 316}
.ost__chapter--figure-right .ost__name{max-width:none; white-space:nowrap}
.ost__chapter--figure-right .ost__copy{left:16.7%; top:57vh}

/* short viewports: lift everything so the copy clears the foot */
@media (max-height:760px){
  .ost__year{top:10vh}
  .ost__chapter--timeline .ost__inner{padding-top:24vh}
  .ost__chapter--figure-left .ost__portrait, .ost__chapter--figure-right .ost__portrait{top:36vh}
  .ost__chapter--figure-left .ost__copy,     .ost__chapter--figure-right .ost__copy{top:50vh}
}

/* stacked: each chapter on its own sky, in flow. Selectors carry the
   chapter class so they outrank the desktop placement above. */
@media (max-width:900px){
  .nav__link::after{top:calc(100% + 6px)}
  .nav.is-stuck .nav__link::after{top:calc(100% + 4px)}
  .ost{min-height:0; overflow:hidden}
  .ost__stage{position:static; height:auto; overflow:visible}
  .ost__skies{display:none}
  .ost__dark{display:none}
  .ost .ost__chapter{position:relative; inset:auto; min-height:100vh; padding:18vh var(--pad) 12vh; background:var(--sky) center / cover no-repeat; overflow:hidden}
  .ost .ost__chapter--intro{padding-top:max(26vh, 210px)}   /* clear of the two-row nav */
  .ost .ost__chapter::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,32,59,.1), rgba(18,32,59,.55)); pointer-events:none}
  .ost .ost__chapter .ost__inner{position:relative; height:auto; width:auto; display:flex; flex-direction:column; gap:18px}
  .ost .ost__chapter--intro .ost__inner{padding-top:0}
  .ost .ost__chapter--intro::before{background:linear-gradient(180deg, rgba(18,32,59,.74), rgba(18,32,59,.86))}
  .ost .ost__chapter .ost__title{max-width:none}
  .ost .ost__chapter .ost__year, .ost .ost__chapter .ost__portrait, .ost .ost__chapter .ost__copy{position:static; left:auto; top:auto; width:auto; min-width:0}
  .ost .ost__chapter .ost__year{font-size:clamp(72px, 22vw, 140px); line-height:1.2; text-align:left}
  .ost .ost__chapter .ost__portrait{width:min(100%, 420px)}
  .ost .ost__chapter .ost__name{margin-top:14px; max-width:none; white-space:normal}
  .chp__grid{grid-template-columns:1fr; gap:40px}
  .chp--left .chp__copy, .chp--left .chp__figure{order:0}
  .chp__copy{max-width:none}
  .stm{min-height:0}
  .stm__text{max-width:none; font-size:clamp(34px, 9vw, 64px)}
  .ofc__grid{grid-template-columns:1fr; gap:48px}
  .enq__grid{grid-template-columns:1fr; gap:32px}
  .enq__row--2{grid-template-columns:1fr}
  .enq__places{grid-template-columns:1fr 1fr}
  .ost .ost__chapter--timeline{padding-left:0; padding-right:0}
  .ost .ost__chapter--timeline .ost__inner{padding:0 var(--pad)}
}

/* ---------- inner pages: page hero ----------
   The home hero's frame for an inner page: photograph full-bleed, the page
   name as an eyebrow and the headline at the foot. */
.phero{
  position:relative; min-height:88svh; display:flex; align-items:flex-end;
  padding:clamp(180px,20vh,260px) var(--pad) clamp(72px,6.25vw,120px);
  color:var(--white); background:var(--navy-deep); overflow:hidden; isolation:isolate;
}
.phero__bg{position:absolute; inset:0; z-index:0}
.phero__bg img{display:block; width:100%; height:100%; object-fit:cover}
.phero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(18,32,59,.62) 0%, rgba(18,32,59,.18) 28%, rgba(18,32,59,0) 48%),
    linear-gradient(90deg, rgba(18,32,59,.6) 0%, rgba(18,32,59,.28) 38%, rgba(18,32,59,0) 62%),
    linear-gradient(180deg, rgba(18,32,59,0) 40%, rgba(18,32,59,.74) 100%);
}
.phero__inner{position:relative; z-index:2; width:100%}
.phero__eyebrow{display:block; color:var(--brass); font-weight:500; letter-spacing:.12em; text-transform:uppercase}
.phero__title{margin:22px 0 0; max-width:min(100%, 19ch); color:var(--white)}

/* ---------- Developments: The Legacy ---------- */
.lgc{position:relative; z-index:2; padding:clamp(96px,11vw,210px) var(--pad); background:var(--paper); color:var(--ink)}
.lgc__grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:var(--gutter); align-items:start}
.lgc__eyebrow{display:block; color:var(--brass); font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding-top:.35em}
.lgc__copy{max-width:640px}
.lgc__body{margin:0; color:var(--ink)}
.lgc__body + .lgc__body{margin-top:1.4em}

/* ---------- Developments: Kabul New City ----------
   The aerial behind a scrim from the left, drifting a little with the scroll;
   the copy on the left, the planned uses as a ruled strip across the foot. */
/* Pinned like the story on the home page: it holds while the International
   Presence disc opens over it, so the paper grows out of the dusk aerial
   rather than out of a bare navy frame. Everything after it paints above. */
.kab{position:sticky; top:0; z-index:0; min-height:100vh; display:flex; align-items:center; overflow:hidden; color:var(--white); background:var(--navy-deep); padding:clamp(120px,14vh,200px) var(--pad)}
.kab__media{position:absolute; inset:0; overflow:hidden}
.kab__img{position:absolute; left:0; right:0; top:-10vh; bottom:-10vh; background:center / cover no-repeat; will-change:transform}
.kab__scrim{
  position:absolute; inset:0;
  /* darkened evenly, a little more where the copy and the strip sit */
  background:
    linear-gradient(90deg, rgba(18,32,59,.78) 0%, rgba(18,32,59,.5) 50%, rgba(18,32,59,.3) 100%),
    linear-gradient(180deg, rgba(18,32,59,0) 40%, rgba(18,32,59,.45) 100%),
    rgba(18,32,59,.3);
}
.kab__inner{position:relative; z-index:1; display:flex; flex-direction:column; gap:clamp(48px,6vh,84px)}
.kab__copy{max-width:640px}
.kab__eyebrow{display:block; color:var(--brass); font-weight:500; letter-spacing:.12em; text-transform:uppercase}
.kab__title{margin:27px 0 26px; font-family:var(--f-display); font-weight:400; font-size:var(--t-h2); line-height:1.2; color:var(--white)}
.kab__text{margin:0; color:rgba(255,255,255,.88)}
.kab__zones{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:0 32px; border-top:1px solid rgba(255,255,255,.22)}
.kab__zone{padding:22px 0 0; display:flex; flex-direction:column; gap:14px}
.kab__idx{font-family:var(--f-numeral); font-size:22px; line-height:1.2; letter-spacing:.087em; color:var(--brass)}
.kab__zone-name{font-family:var(--f-display); font-weight:500; font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--white)}
.kab__note{margin:0; max-width:640px; font-size:var(--t-body); line-height:1.6; color:rgba(255,255,255,.6); font-style:italic}

/* House reveal (initReveals): text marked data-split is split into masked
   characters or lines and drops in from above, as on the story and the home
   sections; hidden until the script has set its start state. */
.js [data-reveal]:not(.is-ready) [data-split]{visibility:hidden}
.kab__zones{transform-origin:0 0}

/* the opening's lead, when there is one */
.phero--centre .phero__lead{margin:28px auto 0; max-width:640px; color:rgba(255,255,255,.86)}

/* ---------- inner pages: chapter (paper, photograph beside the copy) ---------- */
.chp{position:relative; z-index:2; padding:clamp(96px,10vw,180px) var(--pad); background:var(--paper); color:var(--ink)}
.chp__grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--gutter); align-items:center}
.chp--left .chp__copy{order:2}
.chp--left .chp__figure{order:1}
.chp__copy{max-width:560px}
.chp--left .chp__copy{justify-self:end}
.chp__eyebrow{display:block; margin-bottom:24px; color:var(--brass); font-weight:500; letter-spacing:.12em; text-transform:uppercase}
.chp__title{margin:0 0 28px; font-family:var(--f-display); font-weight:400; font-size:var(--t-h2); line-height:1.2; color:var(--ink)}
.chp__body{margin:0; color:var(--ink)}
.chp__body + .chp__body{margin-top:1.4em}
.chp__figure{margin:0; aspect-ratio:4 / 3; overflow:hidden; border-radius:2px}
.chp__figure img{display:block; width:100%; height:100%; object-fit:cover}

/* ---------- inner pages: statement (the script line, brass on navy) ---------- */
.stm{position:relative; z-index:2; min-height:70vh; display:flex; align-items:center; padding:clamp(96px,12vh,180px) var(--pad); background:var(--navy-deep); color:var(--white); text-align:center}
.stm__text{
  margin:0 auto; max-width:76.5%;
  font-family:var(--f-numeral); font-weight:400; font-size:var(--t-title); line-height:1.2; color:var(--brass);
}

/* the Gardens section on its own: no panel leaving over it, a shorter run,
   the copy arriving as it enters (initGardens) */
.gdn--solo{min-height:160vh; margin-top:0}

/* ---------- Contact: offices (paper) ---------- */
.ofc{position:relative; z-index:2; padding:clamp(96px,10vw,180px) var(--pad); background:var(--paper); color:var(--ink)}
.ofc__grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--gutter)}
.ofc__city{margin:0; font-family:var(--f-display); font-weight:400; font-size:var(--t-h2); line-height:1.2; color:var(--ink)}
.ofc__country{margin:0; font-family:var(--f-display); font-weight:400; font-size:var(--t-h2); line-height:1.2; color:var(--ink)}
.ofc__lines{margin:40px 0 0; padding:0}
.ofc__line{padding:18px 0; border-top:1px solid rgba(18,32,59,.14)}
.ofc__line:last-child{border-bottom:1px solid rgba(18,32,59,.14)}
.ofc__label{display:block; margin:0 0 6px; color:var(--brass)}
.ofc__value{margin:0; font-size:var(--t-body-l); line-height:1.5; color:var(--ink)}
.ofc__link{display:block; color:inherit; text-decoration:none}
.ofc__link .ln__i{display:inline-block; border-bottom:1px solid rgba(192,161,103,.5); transition:border-color var(--t-fast) var(--e-out)}
.ofc__link:hover .ln__i{border-bottom-color:var(--brass)}
.ofc__link:hover{border-bottom-color:var(--brass)}

/* ---------- Contact: enquiry (navy) ---------- */
.enq{position:relative; z-index:2; padding:clamp(96px,10vw,180px) var(--pad) clamp(72px,8vw,120px); background:var(--navy-deep); color:var(--white)}
.enq__grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:var(--gutter); align-items:start}
.enq__title{margin:0; font-family:var(--f-display); font-weight:400; font-size:var(--t-h2); line-height:1.2; color:var(--white)}
.enq__form{max-width:720px}
.enq__hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.enq__row--2{display:grid; grid-template-columns:1fr 1fr; gap:0 40px}
.enq__field{display:block}
.enq__input{
  display:block; width:100%; margin:0; padding:18px 0 16px; border:0; border-bottom:1px solid rgba(255,255,255,.28); border-radius:0;
  background:transparent; color:var(--white); font-family:var(--f-body); font-size:var(--t-body-l); line-height:1.4;
  transition:border-color var(--t-fast) var(--e-out);
}
.enq__input::placeholder{color:rgba(255,255,255,.56)}
.enq__input:focus{outline:none; border-bottom-color:var(--brass)}
.enq__input--area{resize:vertical; min-height:120px}
.enq__cta{margin-top:44px; background:none; border:0; padding:0; cursor:pointer; font:inherit}
.enq__status{margin:0 0 28px; padding:16px 20px; border:1px solid rgba(192,161,103,.5); color:var(--white); font-size:var(--t-body); line-height:1.6}
.enq__status--error{border-color:rgba(255,120,120,.5)}
.enq__places{list-style:none; margin:clamp(72px,9vw,140px) auto 0; padding:40px 0 0; border-top:1px solid rgba(255,255,255,.16); display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px}
.enq__place{display:flex; flex-direction:column; gap:6px}
.enq__place-name{color:var(--white)}
.enq__place-country{font-size:var(--t-body); color:rgba(255,255,255,.62)}

/* ---------- generic page content (paper) ---------- */
.pg{position:relative; z-index:2; padding:clamp(96px,10vw,180px) var(--pad); background:var(--paper); color:var(--ink)}
.pg__content{max-width:720px; font-size:var(--t-body-l); line-height:var(--lh-body-l)}
.pg__content h2{margin:1.6em 0 .6em; font-family:var(--f-display); font-weight:400; font-size:var(--t-h2); line-height:1.2}
.pg__content p{margin:0 0 1.4em}
.pg__content a{color:var(--navy-deep)}

/* the companies list's status line (Developments) */
.cos__note{margin:28px 0 0; font-size:var(--t-body); line-height:1.6; color:rgba(255,255,255,.56); font-style:italic; pointer-events:auto}

/* The centred variant: the whole screen, the eyebrow and headline centred
   over the picture, as the Our Story opening; the picture does the work. The
   top keeps its night for the navigation, the foot darkens softly, and a
   quiet tint behind the copy keeps it readable on a bright sky. */
.phero--centre{min-height:100svh; align-items:center; padding:clamp(120px,14vh,180px) var(--pad) clamp(96px,12vh,160px); text-align:center}
/* As dark as the story's first frame: the picture is felt, not shown. */
.phero--centre .phero__scrim{
  background:
    linear-gradient(180deg, rgba(18,32,59,.86) 0%, rgba(18,32,59,.7) 30%, rgba(18,32,59,.72) 100%);
}
.phero--centre .phero__copy{margin:0 auto; transform:translateY(-4vh)}
.phero--centre .phero__eyebrow{color:var(--paper); font-weight:400; letter-spacing:.16em}
/* the story's title: the script face in brass */
.phero--centre .phero__title{
  margin:26px auto 0; max-width:76.5%;
  font-family:var(--f-numeral); font-weight:400; font-size:var(--t-title); line-height:1.2; letter-spacing:0; color:var(--brass);
}

@media (max-width:900px){
  .phero{min-height:72svh; padding-top:30vh}
  .phero--centre{min-height:100svh; padding-top:22vh}
  .phero--centre .phero__copy{transform:none}
  .lgc__grid{grid-template-columns:1fr; gap:28px}
  .kab{position:relative; min-height:0}
  .kab__zones{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 20px}
  .kab__zone{padding-bottom:18px}
}