/* ---------------------------------------------------------------------------
   Omarzay Garden — components
   --------------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--navy-void); color:var(--white);
  font-family:var(--f-body); font-weight:300; line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-family:var(--f-display); font-weight:300}
.wrap{max-width:var(--content); margin:0 auto; padding:0 var(--pad)}
.plain{padding:clamp(96px,14vh,180px) 0}
.t-h1{font-size:clamp(34px,3.5vw,66px); line-height:1.05; letter-spacing:-.02em}

/* =========================================================== hero ======
   Built to Frame 12 (node 6:134). Ratios in vw / svh so the composition
   holds at any width; the numbers are in template-parts/section-hero.php. */
/* One screen of hero, then one phase of travel per step of the sequence:
   the panel arrives, the first chapter appears, each further chapter takes
   over. --phases is set on the element by section-hero.php from the number
   of chapters, so adding a screen in the editor lengthens the run by itself. */
.hero-run{--phase:100svh; --phases:3; --run:calc(100svh + var(--phases) * var(--phase)); position:relative; z-index:2; height:var(--run)}   /* above the Developer's photo, which waits underneath it */
/* Once the welcome has played, the runner gives up the phase that produced
   it: the panel state becomes the top of the document, so there is nothing
   above it to scroll back up into. */
.hero-run.is-spent{height:calc(var(--run) - var(--phase))}
.hero{position:sticky; top:0; height:100svh; min-height:560px; overflow:hidden; background:var(--navy)}   /* the ground the chapter is seen against once the window shrinks */

/* The plate is deliberately taller than the viewport (the Figma image is
   2.38x the frame), so it has room to travel on load and again on scroll
   without ever exposing an edge. */
.hero__win{position:absolute; inset:0; z-index:5; overflow:hidden; transform-origin:50% 50%; will-change:transform, clip-path}
.hero__plate{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:max(100%, calc(100svh * 0.747));
  height:auto; min-height:138svh;
  will-change:transform;
}
.hero__plate img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0%}

/* A quiet floor so the headline never sits on the brightest part of the sky. */
.hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(6,13,22,.42) 0%, rgba(6,13,22,.10) 34%, rgba(6,13,22,0) 58%),
    linear-gradient(to top,   rgba(6,13,22,.30) 0%, rgba(6,13,22,0) 26%);
}

.hero__inner{
  position:absolute; inset:0; z-index:7; pointer-events:none;   /* stays above the chapter window; the logo alone is clickable */
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(48px,13.06svh,141px) 24px 0;
  text-align:center;
}
.hero__logo{display:block; width:clamp(186px,19.9vw,382px); will-change:transform, opacity; pointer-events:auto}
.hero__logo img{display:block; width:100%; height:auto}
.hero__title{
  margin-top:clamp(40px,12.3svh,133px);
  font-size:var(--t-hero); line-height:var(--lh-hero); letter-spacing:var(--ls-hero);
  max-width:min(10.6em,92vw);
  text-wrap:balance;
}
/* Each line rides inside its own mask, so the reveal is a wipe, not a fade. */
.ln{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.ln i{display:block; font-style:normal; will-change:transform}

.hero__cue{
  position:absolute; left:50%; bottom:clamp(26px,4.4svh,48px); z-index:3;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:var(--t-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--white-62); will-change:opacity;
}
.hero__cue .tick{width:1px; height:clamp(30px,5svh,54px); background:linear-gradient(to bottom,rgba(255,255,255,.55),rgba(255,255,255,0))}

/* Resting state before the timeline runs. Gated behind .js so a blocked CDN
   or a script error can never leave the hero blank; site.js also releases it
   if GSAP never arrives. */
.js .hero__logo{opacity:0}
.js .hero__title .ln i{transform:translateY(112%)}
.js .hero__cue{opacity:0}

@media (prefers-reduced-motion:reduce){
  .js .hero__logo,.js .hero__cue{opacity:1 !important}
  .js .hero__title .ln i,.js .hero__intro .ln i,.js .chapter__title .ln i{transform:none !important}
  .js .chapter__photo{opacity:1 !important} .js .chapter__body{opacity:1 !important; transform:none !important}
}

/* ---- the scrolled state (Frame 17) ---------------------------------------
   The hero is pinned while the plate travels up 39.35% of its height; the
   headline leaves through its masks, the logo settles to 184px at top 100,
   and the panel and stats arrive. Numbers are Frame 17 / 1920 or / 1080. */

.hero__logo{transform-origin:50% 0}

/* The panel: 465 x 741 at x 119, 80 from the bottom. */
/* The panel: 465 x 741 at 97% navy, the same block wherever it appears (the
   hero at the left, the Developer at the right). Position is the section's. */
.panel{
  width:clamp(300px,24.22vw,465px); height:clamp(420px,68.6svh,741px);
  background:rgba(19,42,74,.97);
  padding:clamp(34px,5.1svh,55px) clamp(28px,3.07vw,59px) clamp(32px,4.8svh,52px);
  display:flex; flex-direction:column;
  will-change:clip-path;
}
.panel__eyebrow{
  margin:0; font-family:var(--f-display); font-weight:300;
  font-size:clamp(18px,1.354vw,26px); line-height:1.585; color:var(--sand);
}
.panel__title{
  margin:clamp(10px,1.4svh,15px) 0 0; font-family:var(--f-display); font-weight:200;
  font-size:clamp(22px,1.875vw,36px); line-height:1.283; letter-spacing:-.028em; color:var(--white);
  max-width:364px;
}
.panel__title .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.panel__title .ln i{display:block; font-style:normal}
.panel .cta{margin-top:auto}
.hero__panel{position:absolute; z-index:6; left:clamp(20px,6.2vw,119px); bottom:clamp(40px,7.4svh,80px)}
.js .hero__panel{clip-path:inset(100% 0 0 0)}

/* Outlined CTA, 347 x 93. Resting: Navy/Line outline, Sand label, half arrow.
   Hover: the button reverses to a Sand fill with Navy text, the arrow eases
   forward and its upper barb slides in to complete it. */
.cta{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:347px; height:clamp(64px,8.6svh,93px);
  padding:0 clamp(24px,2.3vw,44px) 0 clamp(20px,1.875vw,36px);
  border:1px solid var(--navy-line); color:var(--sand); background:transparent;
  font-family:var(--f-body); font-weight:500; font-size:16px; letter-spacing:.02em; text-transform:uppercase;
  transition:background-color .55s var(--e-out), border-color .55s var(--e-out), color .45s var(--e-out);
}
.cta:hover,.cta:focus-visible{background:var(--sand); border-color:var(--sand); color:var(--navy); outline:none}
.cta__arw{position:relative; width:26px; height:26px; flex:none}
.cta__svg{display:block; width:26px; height:26px; overflow:visible; transition:transform .6s var(--e-out)}
.cta:hover .cta__svg,.cta:focus-visible .cta__svg{transform:translateX(4px)}
.cta__barb--top{
  opacity:0; transform:translate(-5px,5px);
  transition:transform .6s var(--e-out), opacity .35s var(--e-out);
}
.cta:hover .cta__barb--top,.cta:focus-visible .cta__barb--top{opacity:1; transform:none; transition-delay:.1s}

/* The figure: one block, right-aligned, right edge 99px in, top 864 (Frame 19). */
.hero__stat{
  position:absolute; z-index:6; right:clamp(20px,5.16vw,99px); top:80svh;
  display:flex; flex-direction:column; align-items:flex-end; text-align:right;
}
.stat__num{
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; font-size:clamp(44px,3.96vw,76px);
  line-height:1.2; color:var(--sand); white-space:nowrap;
}
.stat__unit{font-family:var(--f-body); font-weight:400; font-size:clamp(15px,1.146vw,22px); margin-left:.3em; vertical-align:baseline}
/* odometer cells: one glyph per mask, the column inside slides by one glyph */
.stat__val{display:inline-flex; vertical-align:top}
.dg{display:inline-block; flex:none; overflow:hidden; height:1.2em; line-height:1.2; vertical-align:top; white-space:pre}
.dg b{display:block; font-weight:inherit; will-change:transform}
.dg i{display:block; font-style:normal}
.stat__unit.dg{height:1.2em; line-height:1.2; vertical-align:baseline; transform:translateY(-.08em)}
.stat__lab{display:block; font-family:var(--f-body); font-weight:500; font-size:15px; line-height:1.4; color:var(--white); max-width:123px; margin-top:6px}
.stat__lab .ln{padding-bottom:.1em; margin-bottom:-.1em}

/* Reveal targets inside the panel and the stats. */
.js [data-tx]{opacity:0; transform:translateY(18px)}
.js .cta[data-tx]{transform:none; opacity:1; clip-path:inset(0 100% 0 0)}
.js .hero__intro .ln i{transform:translateY(112%)}

/* ======================================================== chapter ======
   "A New Chapter for Kabul." Frame 19 (node 6:425), positions / 1920 and / 1080.
   The photo sits behind the whole section, from a quarter of the way in to past
   the right edge, and fades into the navy across its left half. */
/* The stage is an animated composition: a drag across it must not select the
   display text or lift an image. The chapters' paragraphs stay selectable. */
.hero__inner,.hero__panel,.hero__stat,.chapter__title,.feat,.dev__panel{-webkit-user-select:none; user-select:none}
.hero-run img,.dev__bg img{-webkit-user-drag:none; user-select:none}
/* No stacking context of its own, so its layers interleave with the hero's image
   window (z 5): photo and fade beneath it, copy above it. The ground is the hero's.
   The chapters stack in the same place; the scroll shows one at a time. */
.chapter{
  position:absolute; inset:0; background:transparent; overflow:hidden;
  padding:clamp(110px,31.85svh,344px) clamp(24px,7.34vw,141px) clamp(80px,13.7svh,148px) clamp(24px,12.66vw,243px);
}
.chapter__photo{position:absolute; inset:0; z-index:4}
.js .chapter__photo{opacity:0}
.js .chapter__title .ln i{transform:translateY(112%)}
.js .chapter__body{opacity:0; transform:translateY(24px)}
.chapter__title .ln{padding-bottom:.08em; margin-bottom:-.08em}
/* without JS the run collapses and the chapter simply follows the hero */
html:not(.js) .hero-run{height:auto}
html:not(.js) .hero{position:relative; height:auto; min-height:100svh}
html:not(.js) .chapter{position:relative; min-height:100svh; background:var(--navy)}
/* 1624 x 1091 at x 491, centred vertically; it runs 195px past the right edge at 1920 */
.chapter__bg{
  position:absolute; top:50%; left:25.57vw; right:-10.16vw; height:101%; transform:translateY(-50%);
}
.chapter__bg img{display:block; width:100%; height:100%; object-fit:cover; object-position:100% 50%}
.chapter__bg--front{z-index:1}   /* above the fade; the copy is z-index 1 too but sits to its left */
/* 970 wide from x 485: Navy at the left, 89% Navy at the middle, clear at the right */
.chapter__fade{
  position:absolute; top:0; bottom:0; left:25.26vw; width:50.52vw; pointer-events:none;
  background:linear-gradient(to right, #132A4A 0%, rgba(19,42,74,.89) 50%, rgba(19,42,74,0) 100%);
}
/* the frame's text box is 707 wide but its lines stop at ~885 */
.chapter__copy{position:relative; z-index:6; max-width:min(707px, 33.3vw)}
.chapter__title{
  font-family:var(--f-display); font-weight:200;
  font-size:clamp(36px,3.4375vw,66px); line-height:1.139; letter-spacing:-.015em; color:var(--sand);
  max-width:474px;   /* Frame 19's title breaks after "Chapter" */
}
.chapter__title .ln{display:block; overflow:hidden}
.chapter__title .ln i{display:block; font-style:normal}
.chapter__body{margin-top:clamp(24px,3.8svh,41px); will-change:transform, opacity}   /* body top lands at y 535 */
.chapter__body p{margin:0; font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.8875; color:var(--white)}
.chapter__body p + p{margin-top:1.8875em}

/* Photo left, text right: Frame 25 (node 10:599). The photo is 1406 x 1106
   from the left edge; the fade is 970 wide from x 436 and darkens towards the
   text; the copy starts at x 1052, the title 707 wide, the body 593. */
.chapter--right{padding-left:54.79vw; padding-right:clamp(24px,8.39vw,161px)}
.chapter--right .chapter__bg{left:0; right:26.77vw; height:102.4%}
.chapter--right .chapter__bg img{object-position:0% 50%}
/* the fade ends on the photo's own right edge, a pixel past it: at widths
   other than 1920 a hair of unfaded photo edge otherwise shows as a seam */
.chapter--right .chapter__fade{
  left:22.7vw; right:calc(26.77vw - 1px); width:auto;
  background:linear-gradient(to right, rgba(19,42,74,0) 0%, rgba(19,42,74,.89) 50%, #132A4A 99%, #132A4A 100%);
}
.chapter--right .chapter__copy{max-width:min(707px, 36.8vw)}
.chapter--right .chapter__title{max-width:none}
.chapter--right .chapter__body{max-width:593px}

/* ---- the community list, Frame 26 (node 13:611), inside the last chapter.
   Positions / 1920 and / 1080. GSAP owns every transform here, so nothing
   below uses a CSS transform of its own. */
/* The dial group is drawn to the frame's 1920 x 1080. Its unit is 1vw at 16:9
   and shrinks with the height on a shorter window (the user's 2000 x 900,
   28 Sep 2026), so the dial keeps the frame's 64% of the height instead of
   swelling to 80% and running into the logo. The dial's centre stays at
   62.655vw / 50%; the disc sits on its left edge; the copy is placed in
   height units and is centred on the dial already. */
.feat{position:absolute; inset:0; z-index:6; pointer-events:none; --u:min(1vw, 1.7778svh)}
.feat__dial{position:absolute; left:calc(62.655vw - 18.125 * var(--u)); top:calc(50% - 18.125 * var(--u)); width:calc(36.25 * var(--u)); height:calc(36.25 * var(--u)); will-change:transform, opacity}
.feat__dial svg{display:block; width:100%; height:100%; overflow:visible}
.feat__disc{
  position:absolute; left:calc(62.655vw - 20.885 * var(--u)); top:calc(50% - 3.23 * var(--u)); width:calc(6.46 * var(--u)); height:calc(6.46 * var(--u)); border-radius:50%;
  background:var(--sand); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); will-change:transform, opacity;
}
.feat__icon{position:absolute; left:50%; top:50%; width:calc(4.06 * var(--u)); height:calc(4.06 * var(--u)); margin:calc(-2.03 * var(--u)) 0 0 calc(-2.03 * var(--u)); color:#0B182B}   /* the drawing itself is centred by the script */
.feat__icon svg{display:block; width:100%; height:100%}
.feat__text{position:absolute; left:54.79vw; top:53.98svh; width:min(707px, 36.8vw)}
.feat__item{position:absolute; left:0; top:0; width:100%; visibility:hidden}
.feat__name{
  margin:0; font-family:var(--f-display); font-weight:200;
  font-size:clamp(24px,1.875vw,36px); line-height:1.2; letter-spacing:-.028em; color:var(--white); white-space:nowrap;
}
.feat__name .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.feat__name .ln i{display:block; font-style:normal}
.feat__line{margin:clamp(4px,.55svh,6px) 0 0; font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.4375; color:var(--white); max-width:240px}   /* the frame's line box: 6px under the name, 225 wide */
.feat__dots{position:absolute; left:54.79vw; top:66.94svh; height:7px; display:flex; align-items:center; gap:3px}
.feat__dot{width:5px; height:5px; border-radius:50%; background:#D9D9D9; opacity:.2; transition:width .3s, height .3s, opacity .3s}
.feat__dot.is-on{width:7px; height:7px; opacity:1}
.feat__ring{position:absolute; left:79.79vw; top:65.65svh; width:calc(3.96 * var(--u)); height:calc(3.96 * var(--u)); color:var(--white); will-change:transform, opacity}   /* follows the cursor from here */
.feat__ring > svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}   /* the ring itself; the arrow's svg inside .feat__arw is not this */
.feat__track{stroke:rgba(237,233,225,.18); stroke-width:1}
.feat__arc{stroke:#EDE9E1; stroke-width:1; stroke-dasharray:238.76; stroke-dashoffset:238.76}
.feat__num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-body); font-size:16px; line-height:1; color:var(--white)}
.feat__num .ln{display:inline-block; overflow:hidden; line-height:1.1}
.feat__num .ln i{display:inline-block; font-style:normal}
.feat__num small{font-size:10.32px; margin:.35em 0 0 1px}
.feat__arw{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; color:var(--white)}
.feat__arw svg{width:calc(1.05 * var(--u)); height:calc(1.05 * var(--u)); min-width:16px; min-height:16px}
/* resting state before the scroll brings it in */
.js .feat__dial,.js .feat__disc,.js .feat__dots,.js .feat__ring,.js .feat__icon{opacity:0}
.js .feat__name .ln i{transform:translateY(112%)}
.js .feat__line{opacity:0}
/* An item's photo fills the frame's photo area, 1406 x 1080 from the left
   edge, exactly; every item's file is cut to that shape (Section 1 frames),
   so the designer's crop travels with the file and the box never changes. */
.chapter--right .feat__img{left:0; right:26.77vw; top:0; height:100%; transform:none}
.chapter--right .feat__img img{object-position:50% 50%}
.js .feat__img{opacity:0}
html:not(.js) .feat{display:none}

@media (max-width:1100px){
  .chapter,.chapter--right{padding:clamp(96px,20svh,200px) clamp(24px,7.34vw,141px) clamp(80px,13.7svh,148px) clamp(24px,12.66vw,243px)}
  .chapter__bg,.chapter--right .chapter__bg{left:0; right:0; height:100%; opacity:.55}
  .chapter__fade,.chapter--right .chapter__fade{left:0; width:100%; background:linear-gradient(to bottom, #132A4A 0%, rgba(19,42,74,.7) 60%, rgba(19,42,74,.3) 100%)}
  .chapter__copy,.chapter--right .chapter__copy{max-width:707px}
  .chapter--right .chapter__body{max-width:none}
  .feat__text,.feat__dots{left:clamp(24px,12.66vw,243px)}
  .feat__dial{left:auto; right:-18vw; width:60vw; height:60vw; top:calc(50% - 30vw)}
  .feat__disc{left:auto; right:24px; top:auto; bottom:22svh}
  .feat__ring{left:auto; right:24px; top:auto; bottom:10svh; width:64px; height:64px}
}

/* ====================================================== developer ======
   "The Developer", Frame 29 (node 18:929). A full-bleed photo with the panel
   at the right: 272px from the right edge, centred on the screen's height.
   A normal section after the sticky run, revealed from underneath: the photo
   holds still on screen while the stage slides up off it. The script draws
   the photo one screen above its box until the section arrives; the stage
   (z 2) covers that early part, so the section must not clip it. */
.dev-run{position:relative; z-index:1; height:calc(100svh + 150svh + 100svh)}   /* one screen of the Developer, 150svh in which the form takes over, 100svh in which the sheet sweeps to the footer */
.dev{position:sticky; top:0; height:100svh; min-height:640px; background:var(--navy); overflow:hidden}
.dev__bg{position:absolute; inset:0; will-change:transform}
.dev__bg img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%}
.dev__bg2{position:absolute; top:0; bottom:0; left:0; width:42%}   /* the enquiry photo: its right edge meets the panel, its left is what gives way */
.dev__bg2 img{object-position:100% 50%}
.js .dev__bg2{opacity:0}
/* the footer photo (Frame 32): a tall picture, so it sits at 124% and drifts
   up as the sheet uncovers it; between the Developer's photo and the enquiry's
   in the stack, so the sheet's leading edge covers one and its trailing edge
   uncovers the other */
.dev__bg3{position:absolute; inset:0; z-index:1; overflow:hidden; background:var(--navy)}
.dev__bg3 img{display:block; width:100%; height:124%; object-fit:cover; object-position:50% 45%; will-change:transform; -webkit-user-drag:none}
.dev__bg2{z-index:1}
.js .dev__bg3{opacity:0}
.dev__panel{position:absolute; z-index:2; right:clamp(20px,14.17vw,272px); top:50%; margin-top:calc(-.5 * clamp(420px,68.6svh,741px)); overflow:hidden}
.js .dev__panel{clip-path:inset(100% 0 0 0)}
.dev__content{position:relative; display:flex; flex-direction:column; height:100%}

/* ---- the form, the panel's second face: it sits over the Developer content
   in the same box and shows once the panel has grown to the right half */
.enq{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(32px,6svh,64px) clamp(24px,3vw,60px); overflow:auto; visibility:hidden; pointer-events:none; color:var(--ink)}
.enq.is-on{visibility:visible; pointer-events:auto}
.enq__in{width:100%; max-width:777px; margin:auto 0}
.enq .panel__eyebrow{font-size:clamp(15px,.9375vw,18px); line-height:1.6; color:var(--sand-ink)}   /* Frame 30 sets the small heading at 18 */
.enq__title{margin-top:clamp(4px,.8svh,10px); max-width:none; color:var(--ink)}
.enq__intro{margin:clamp(10px,1.5svh,16px) 0 0; max-width:411px; font-family:var(--f-body); font-weight:300; font-size:16px; line-height:1.73; color:rgba(20,23,28,.72)}
.enq__form{display:grid; grid-template-columns:repeat(2, minmax(0, 371px)); column-gap:36px; row-gap:clamp(14px,3.2svh,36px); margin-top:clamp(22px,5.5svh,60px)}
.enq__field{position:relative; min-width:0; border-bottom:1px solid rgba(20,23,28,.18); transition:border-color .35s var(--e-out)}
.enq__field:focus-within{border-bottom-color:var(--navy)}
.enq__field--wide{grid-column:1 / -1}
.enq__field input,.enq__field select,.enq__field textarea{
  display:block; width:100%; margin:0; padding:24px 0 14px; border:0; border-radius:0;
  background:transparent; color:var(--ink); font-family:var(--f-body); font-weight:300; font-size:clamp(17px,1.031vw,19.8px); line-height:1.2; outline:none;
}
.enq__field textarea{resize:none; min-height:0; height:calc(1.2em + 38px); transition:height .3s var(--e-out)}
.enq__field--wide:focus-within textarea,.enq__field--wide.is-filled textarea{height:calc(3.6em + 38px)}
.enq__field input:-webkit-autofill{-webkit-text-fill-color:#14171C; -webkit-box-shadow:0 0 0 1000px #F7F5F0 inset}
/* the label is the field's placeholder at rest, and floats up to a small sand
   caption once the field is focused or holds a value */
.enq__label{position:absolute; left:0; top:24px; margin:0; font-family:var(--f-body); font-weight:300; font-size:clamp(17px,1.031vw,19.8px); line-height:1.2; color:rgba(20,23,28,.5); pointer-events:none; transform-origin:0 0; transition:transform .3s var(--e-out), color .3s var(--e-out), top .3s var(--e-out)}
.enq__label span{color:var(--sand-ink)}
.enq__field:focus-within .enq__label,.enq__field.is-filled .enq__label{top:6px; transform:scale(.62); color:var(--sand-ink); letter-spacing:.14em; text-transform:uppercase}
.enq__sel{position:relative; display:block}
.enq__sel select{appearance:none; -webkit-appearance:none; padding-right:28px; cursor:pointer; color:transparent}
.enq__field--select.is-filled select{color:var(--ink)}
.enq__sel select option{color:var(--ink); background:#fff}
.enq__sel::after{content:""; position:absolute; right:6px; top:50%; width:7px; height:7px; margin-top:-2px; border-right:1px solid var(--sand-ink); border-bottom:1px solid var(--sand-ink); transform:rotate(45deg); pointer-events:none}
.enq__submit{margin-top:clamp(18px,4svh,44px); border-bottom:0}
/* the button on paper: navy line and label, filling navy on hover */
.enq .cta{border-color:var(--navy); color:var(--navy)}
.enq .cta:hover,.enq .cta:focus-visible{background:var(--navy); border-color:var(--navy); color:var(--paper)}
.enq .cta{cursor:pointer}
/* resting state: the fields arrive one after another once the panel is wide */
/* Scoped to the home page's panel, which is the only place that stages these
   in: developer() reveals them as the panel rises. Left unscoped it also hid
   the identical fields in the enquiry sheet, where nothing reveals them, so
   the sheet opened with its form invisible (20 Oct 2026). The Register
   Interest page has its own `.regi [data-rx]` rule and its own reveal. */
.js .enq .enq__eyebrow,.js .enq .enq__intro,.js .enq .enq__field{opacity:0}
.js .enq__title .ln i{transform:translateY(112%)}
.enq__title .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.enq__title .ln i{display:block; font-style:normal}
html:not(.js) .dev-run{height:auto} html:not(.js) .dev{position:relative; height:auto} html:not(.js) .enq{position:relative; visibility:visible; pointer-events:auto}

/* ---- the footer, the sticky's last face (Frame 32, node 28:1132): copy in
   Paper over the photo's plain dusk sky, in the site's own type; a soft dark
   gradient over the left half keeps it legible on any picture. Columns at
   159 / 390 / 621 of 1920, the blurb at 207 down, the bottom line at 1001. */
.foot{position:absolute; inset:0; z-index:1; overflow:hidden; color:var(--paper); visibility:hidden; pointer-events:none}
.foot.is-on{visibility:visible; pointer-events:auto}
/* minimal (the user, 12 Oct 2026): Navy, the mark, then the blurb and the
   three columns spread across the width on one grid, a hairline, the legal
   line in flow at the bottom. No photo, no wordmark. */
/* the mark: the size and place the welcome's logo settles at (184 x 55 at top 100 of 1080) */
.foot__logo{position:absolute; z-index:1; top:clamp(60px,9.26svh,100px); left:50%; width:clamp(120px,9.58vw,184px); margin-left:calc(-.5 * clamp(120px,9.58vw,184px)); color:var(--paper)}
.foot__mark{display:block; width:100%; height:auto}
.js .foot__logo{opacity:0}
.foot__in{position:relative; display:flex; flex-direction:column; min-height:100%; padding:clamp(80px,15svh,162px) clamp(20px,8.28vw,159px) clamp(28px,5.3svh,57px)}
.foot__blurb{margin:0; max-width:369px; font-family:var(--f-body); font-weight:300; font-size:16px; line-height:1.73; color:rgba(247,245,240,.82)}
.foot__cols{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr); gap:40px clamp(32px,4vw,80px); align-items:start}
.foot__col{min-width:0}
.foot__col--contact{max-width:360px}
.foot__head{margin:0 0 clamp(10px,2.2svh,24px); font-family:var(--f-display); font-weight:300; font-size:15px; line-height:1.35; letter-spacing:.22em; text-transform:uppercase; color:var(--sand)}
.foot__list{list-style:none; margin:0; padding:0}
.foot__list li{margin:0 0 clamp(6px,1.1svh,12px); padding-right:24px; font-family:var(--f-body); font-weight:300; font-size:16px; line-height:1.8; color:rgba(247,245,240,.82)}
.foot__list a{color:inherit; text-decoration:none; transition:color .35s var(--e-out)}
.foot__list a:hover,.foot__list a:focus-visible{color:var(--sand); outline:none}
.foot__base{display:flex; justify-content:space-between; gap:24px; margin-top:auto; padding-top:clamp(20px,3svh,32px); border-top:1px solid rgba(247,245,240,.12)}
.foot__cols + .foot__base{margin-top:clamp(56px,9svh,96px)}   /* at least this far under the columns; the rest of the screen is taken up by margin-top:auto when there is room */
.foot__in > .foot__cols{margin-top:auto; margin-bottom:auto; padding-top:clamp(24px,4svh,44px)}   /* centred in the room between the mark and the legal line */
.foot__legal{margin:0; font-family:var(--f-body); font-weight:300; font-size:14px; line-height:1.8; color:rgba(247,245,240,.6)}
.foot__legal a{color:inherit; text-decoration:none; transition:color .35s var(--e-out)}
.foot__legal a:hover,.foot__legal a:focus-visible{color:var(--sand); outline:none}
.js [data-fx]{opacity:0}
html:not(.js) .foot{position:relative; min-height:100svh; visibility:visible; pointer-events:auto}
/* on every other page the footer is its own section: the photo behind it,
   124% tall so it can drift up as the section comes into view */
.foot--page{position:relative; inset:auto; height:100svh; min-height:640px; overflow:hidden; background:var(--navy); visibility:visible; pointer-events:auto}
.foot--page .foot__logo{z-index:2}
.foot--page .foot__in{z-index:2}

/* ---- the inner-page hero (Frame 35, node 29:1382): a full-bleed photo, the
   mark 205 wide at 96 down, and a Sand panel 465 x 428 on the bottom edge,
   242 from the right, in Navy/Line and Ink. A normal section above the
   revealed screen (z 2 over z 1), so it slides up off it. */
.phero{position:relative; z-index:2; height:100svh; min-height:560px; overflow:hidden; background:var(--navy)}
.phero__bg{position:absolute; inset:0}
.phero__bg img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; will-change:transform; -webkit-user-drag:none}
.phero__logo{position:absolute; z-index:3; top:clamp(56px,8.89svh,96px); left:50%; width:clamp(150px,10.69vw,205px); margin-left:calc(-.5 * clamp(150px,10.69vw,205px)); color:var(--paper)}
.phero__logo svg{display:block; width:100%; height:auto}
.panel--sand{
  position:absolute; z-index:2; right:clamp(20px,12.6vw,242px); bottom:0;
  height:clamp(300px,39.63svh,428px); padding-top:clamp(40px,6.2svh,67px);
  background:rgba(199,176,138,.97); color:var(--ink); will-change:clip-path;
}
.panel--sand.is-left{right:auto; left:clamp(20px,12.6vw,242px)}   /* the panel at the left when the picture's subject is at the right (Register Interest, the user, 12 Oct 2026) */
.panel--sand .panel__eyebrow{font-weight:500; font-size:clamp(15px,.9375vw,18px); line-height:1.6; color:var(--navy-line)}
.panel--sand .panel__title{margin-top:clamp(10px,1.4svh,15px); max-width:364px; color:var(--navy-line)}
.phero__intro{margin:clamp(24px,3.8svh,41px) 0 0; max-width:333px; font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.64; color:var(--ink)}
.js .panel--sand{clip-path:inset(100% 0 0 0)}
.js .phero__logo,.js .phero .panel__eyebrow,.js .phero__intro{opacity:0}
.js .phero__title .ln i{transform:translateY(112%)}
.js .phero__title{opacity:0}   /* a headline on one line has no masks until the script wraps it: hidden until then (the second screen's flashed on load, 30 Sep 2026) */
.phero__title .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.phero__title .ln i{display:block; font-style:normal}
html:not(.js) .panel--sand{clip-path:none}

/* ---- the band hero (Frame 51, recut 1 Oct 2026): a Navy block over the
   top 60% carrying the words at the frame's larger scale, the render full
   width beneath it; then (Frame 52) the block settles at the bottom with
   the overview's words while the render fills the rest. The script moves
   the block and the render; the overview sits at the bottom from the start,
   in the block's final place, and fades in as the block arrives. */
.phero--band{background:var(--navy); color:var(--white)}
.phero--band .phero__logo{color:var(--paper)}
/* Inverted (the user, 1 Oct 2026): the render on the top 40%, the Navy block
   on the bottom 60% at rest; the block rises to the top for the overview and
   the render drops beneath it; the panel is the first composition again, so
   the run ends Navy against the homes' picture, not picture on picture. */
.phero__band{position:absolute; left:0; right:0; top:40svh; height:60svh; min-height:320px; z-index:2; background:var(--navy); overflow:hidden; will-change:top, height}
.phero--band .phero__copy{position:absolute; left:clamp(24px,6.35vw,122px); top:19.5svh; width:min(832px, 43.3vw)}
.phero--band .phero__eyebrow{display:flex; align-items:center; gap:13px; margin:0 0 clamp(14px,2.1svh,23px); padding:0; font-family:var(--f-display); font-weight:500; font-size:clamp(15px,.9375vw,18px); line-height:1.6; letter-spacing:.06em; text-transform:uppercase; color:var(--sand)}
.phero--band .phero__eyebrow::before{content:""; width:36px; height:1px; background:var(--sand); opacity:.7}
.phero--band .phero__title{margin:0; font-family:var(--f-display); font-weight:200; font-size:clamp(44px,5.3vw,102px); line-height:1; letter-spacing:-.02em; color:var(--white)}
.phero--band .phero__title .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.phero--band .phero__title .ln i{display:block; font-style:normal}
.phero--band .phero__intro{position:absolute; left:clamp(24px,57.86vw,1111px); top:25.2svh; margin:0; max-width:min(587px, 30.6vw); font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6; color:rgba(247,245,240,.72)}
.phero__photo{position:absolute; left:0; right:0; top:0; height:40svh; z-index:1; overflow:hidden; will-change:top, height, opacity}
.phero__photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 66%; will-change:transform; -webkit-user-drag:none}   /* the frame shows the render's lower part, the town, not the sky */
/* the overview (Frame 52) in the block's final place: the bottom 38% or its
   own height, the words at 154 / 84 down, the paragraphs at 1099 / 84 */
.phero__ovw{position:absolute; left:0; right:0; top:0; z-index:3; min-height:38svh; display:flex; justify-content:space-between; gap:48px; padding:clamp(120px,19.5svh,211px) clamp(24px,8.5vw,164px) clamp(56px,7.2svh,78px) clamp(24px,8vw,154px); background:var(--navy); color:var(--white)}   /* at the top now: its words start on the hero copy's line, clear of the header */
.ovw__copy{flex:none; width:min(760px, 39.6vw)}
.ovw__eyebrow{display:flex; align-items:center; gap:18px; margin:0 0 clamp(24px,3.8svh,41px); font-family:var(--f-display); font-weight:500; font-size:clamp(15px,.9375vw,18px); line-height:1.6; letter-spacing:.06em; text-transform:uppercase; color:var(--sand)}
.ovw__eyebrow::before{content:""; width:36px; height:1px; background:var(--sand); opacity:.7}
.ovw__title{margin:0; font-family:var(--f-display); font-weight:200; font-size:clamp(36px,3.4375vw,66px); line-height:1.139; letter-spacing:-.015em; color:var(--white)}
.ovw__title .ln{display:block}
.ovw__title .ln i{display:block; font-style:normal}
.ovw__body{flex:none; width:min(648px, 33.75vw)}
.ovw__body p{margin:0; font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6; color:rgba(247,245,240,.72)}
.ovw__body p + p{margin-top:1.2em}
/* the panels: the first view's composition again, the panel's words in the
   block (headline at the left, the paragraphs opposite) and its picture in
   the frame, crossfading with the render; 4% of slack for the pointer */
.phero__photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%}
.phero__img--base{object-position:50% 66%}   /* the render's lower part, the town, not the sky */
.phero__img--pan{left:-4%; width:108%; opacity:0; will-change:transform, opacity}
.phero__pcopy{position:absolute; left:clamp(24px,6.35vw,122px); top:19.5svh; width:min(832px, 43.3vw)}
.phero__pintro{position:absolute; left:clamp(24px,57.86vw,1111px); top:25.2svh; max-width:min(587px, 30.6vw)}
.phero__pintro p{margin:0; font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6; color:rgba(247,245,240,.72)}
.phero__pintro p + p{margin-top:1.2em}
.phero__pflat{display:none}
.phero__pflat-fig{margin:0 -20px 28px; aspect-ratio:3 / 2; overflow:hidden} .phero__pflat-fig img{display:block; width:100%; height:100%; object-fit:cover}
.phero__pflat-p{margin:16px 0 0; font-family:var(--f-body); font-size:16px; line-height:1.6; color:rgba(247,245,240,.72)}
.js .phero--band .phero__eyebrow,.js .phero--band .phero__intro,.js .phero__photo,.js .phero__ovw,.js .phero__pintro p,.js .phero__pcopy .phero__title{opacity:0}
.phero__ovw .ovw__title .ln{overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.js .phero--band .phero__title .ln i{transform:translateY(112%)}
.phero-run--band .phero{position:sticky; top:0}
/* flat (no motion): the block, the render and the overview stack as sections */
.phero-run--band.is-flat .phero{position:relative; display:flex; flex-direction:column; height:auto; min-height:0; padding:0}
.phero-run--band.is-flat .phero__band{position:relative; height:auto; min-height:0; padding:22svh clamp(24px,6.35vw,122px) 10svh; order:1}
.phero-run--band.is-flat .phero__copy,.phero-run--band.is-flat .phero__intro{position:relative; left:auto; top:auto; max-width:none}
.phero-run--band.is-flat .phero__intro{margin-top:24px; max-width:587px}
.phero-run--band.is-flat .phero__photo{position:relative; top:auto; height:56svw; min-height:240px; order:2}
.phero-run--band.is-flat .phero__ovw{position:relative; min-height:0; order:3; opacity:1}
.phero-run--band.is-flat .phero__pcopy,.phero-run--band.is-flat .phero__pintro{display:none}
.phero-run--band.is-flat .phero__pflat{display:block; order:4; padding:0 clamp(24px,6.35vw,122px) 10svh}
.phero-run--band.is-flat .phero__pflat .phero__eyebrow,.phero-run--band.is-flat .phero__pflat .phero__title{opacity:1}
@media (max-width:900px){
  .phero--band{padding:0}
  .phero-run--band .phero{position:relative; display:flex; flex-direction:column}
  .phero__band{position:relative; top:auto; height:auto; min-height:0; padding:22svh 20px 40px; order:1}
  .phero--band .phero__copy,.phero--band .phero__intro{position:relative; left:auto; top:auto; width:auto; max-width:none}
  .phero--band .phero__intro{margin-top:24px}
  .phero__photo{position:relative; top:auto; height:56svw; min-height:240px; order:2}
  .phero__ovw{position:relative; min-height:0; order:3; flex-direction:column; gap:32px; padding:56px 20px; opacity:1}
  .phero__pcopy,.phero__pintro{display:none}
  .phero__pflat{display:block; order:4; padding:0 20px 48px}
  .phero__pflat .phero__eyebrow,.phero__pflat .phero__title{opacity:1}
  .ovw__copy,.ovw__body{width:auto}
}

/* ---- the homes (Frame 54): a full-screen picture, the families as
   headings bottom left, a family's homes opening
   beneath it. Every picture is a layer; one shows. */
.homes{position:relative; z-index:1; height:100svh; min-height:640px; overflow:hidden; background:var(--navy); color:var(--white)}
.homes__bg{position:absolute; inset:0}
.homes__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; opacity:0; will-change:opacity; -webkit-user-drag:none}
.homes__img.is-on{opacity:1}
/* the scrim (the user, 1 Oct 2026: readability): Navy-tinted from the left
   edge, strong behind the words and gone by the middle, with a gentle rise
   from the bottom; deeper while a family is open and there is more text.
   The right two thirds of the picture stay as they are. */
.homes__shade{position:absolute; inset:0; pointer-events:none; transition:opacity .6s var(--e-out);
  background:linear-gradient(to right, rgba(12,26,46,.78) 0%, rgba(12,26,46,.62) 22%, rgba(12,26,46,.28) 42%, rgba(12,26,46,0) 58%), linear-gradient(to top, rgba(6,13,22,.45) 0%, rgba(6,13,22,0) 38%)}
.homes__shade::after{content:""; position:absolute; inset:0; background:linear-gradient(to right, rgba(12,26,46,.35) 0%, rgba(12,26,46,.2) 30%, rgba(12,26,46,0) 55%); opacity:0; transition:opacity .6s var(--e-out)}
.homes.is-open .homes__shade::after{opacity:1}
.homes__head,.homes__item{text-shadow:0 1px 18px rgba(6,13,22,.35)}   /* soft, for the bright spot a gradient cannot predict */
/* The families sit at the bottom left, the same breathing space below as
   beside them (the user, 30 Sep 2026). Anchored there, a family opening
   grows the block upward: everything above slides up into the room. */
.homes__nav{position:absolute; left:clamp(24px,6.35vw,122px); bottom:clamp(24px,6.35vw,122px); right:clamp(24px,6.35vw,122px); display:flex; flex-direction:column; gap:clamp(20px,3.4svh,37px)}
.homes__cat{transition:opacity .45s var(--e-out)}
.homes__nav.is-open .homes__cat:not(.is-open){opacity:.35}
.homes__nav.is-open .homes__cat:not(.is-open):hover{opacity:.7}
/* Each family ends with the site's arrow (after the words, the user): half at rest in Sand, whole and
   4px forward on hover (the CTA's gesture); gone while the family is open. */
.homes__nav{--homes-arw:clamp(22px,1.5vw,29px); --homes-gap:clamp(12px,1vw,19px)}
.homes__head{display:flex; align-items:center; gap:var(--homes-gap); margin:0; padding:0; border:0; background:none; text-align:left; cursor:pointer; font-family:var(--f-display); font-weight:200; font-size:clamp(30px,2.75vw,53px); line-height:1.06; letter-spacing:-.015em; color:var(--white)}
.homes__arw{flex:none; width:var(--homes-arw); height:var(--homes-arw); margin-top:.04em; color:var(--sand); transition:transform .6s var(--e-out), opacity .35s var(--e-out)}
.homes__arw .cta__svg{width:100%; height:100%}
.homes__head:hover .cta__svg,.homes__head:focus-visible .cta__svg{transform:translateX(4px)}
.homes__head:hover .cta__barb--top,.homes__head:focus-visible .cta__barb--top{opacity:1; transform:none; transition-delay:.1s}
.homes__cat.is-open .homes__head .homes__arw{opacity:0; transform:translateX(-8px)}   /* the open family needs no arrow (the user) */
.homes__head:focus-visible{outline:none}
.homes__list{list-style:none; margin:0; padding:0; height:0; overflow:hidden}
.homes__list li{margin:0}
.homes__list li:first-child{padding-top:clamp(16px,3.33svh,36px)}
/* A home: its arrow is hidden at rest and slides in on hover only, the same
   half-then-whole arrow as the families, smaller. */
.homes__item{display:flex; align-items:center; gap:calc(var(--homes-gap) * .8); margin:0; padding:clamp(5px,.95svh,10px) 0; border:0; background:none; text-align:left; cursor:pointer; font-family:var(--f-display); font-weight:200; font-size:clamp(17px,1.33vw,26px); line-height:1.4; letter-spacing:-.01em; color:rgba(247,245,240,.78); transition:color .3s}
.homes__item .homes__arw{width:calc(var(--homes-arw) * .72); height:calc(var(--homes-arw) * .72); margin-top:.02em; opacity:0; transform:translateX(-8px); transition:opacity .35s var(--e-out), transform .5s var(--e-out)}
.homes__item:hover .homes__arw,.homes__item:focus-visible .homes__arw{opacity:1; transform:none}
.homes__item:hover .cta__barb--top,.homes__item:focus-visible .cta__barb--top{opacity:1; transform:none; transition-delay:.1s}
.homes__item:focus-visible{outline:none}
.homes__item:hover,.homes__item.is-on{color:var(--white)}
.js .homes__list li{opacity:0}
/* Frame 55: the home's own view. A Navy sheet, 35% wide (672 of 1920), slides
   in from the left; the picture and the nav move right with it and the
   picture drifts slowly right while it is open. The copy sits bottom left at
   the nav's own offsets (122 / 122); name, line, then the body at the
   standard gap. Close top right of the sheet (the menu icon owns the top
   left), the word alone (the user). The scrim travels with the picture. */
.homes__bg{will-change:transform}
.homes__sheet{position:absolute; top:0; left:0; bottom:0; z-index:3; width:35%; background:var(--navy); color:var(--white); visibility:hidden; backface-visibility:hidden}
.hsheet__copy{position:absolute; left:clamp(24px,6.35vw,122px); right:clamp(24px,3.7vw,71px); bottom:clamp(24px,6.35vw,122px)}
.hsheet__name{margin:0 0 clamp(12px,2svh,22px); font-family:var(--f-display); font-weight:200; font-size:clamp(36px,3.4375vw,66px); line-height:1.139; letter-spacing:-.015em; color:var(--white)}
.hsheet__line{margin:0 0 clamp(24px,3.8svh,41px); font-family:var(--f-display); font-weight:300; font-size:clamp(19px,1.35vw,26px); line-height:1.3; letter-spacing:-.01em; color:var(--white)}
.hsheet__text p{margin:0; font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6; color:rgba(247,245,240,.72)}
.hsheet__text p + p{margin-top:1.2em}
.hsheet__close{position:absolute; top:clamp(60px,8.6svh,93px); right:clamp(24px,3.7vw,71px); display:flex; align-items:center; gap:18px; margin:0; padding:0; border:0; background:none; cursor:pointer; font-family:var(--f-body); font-weight:500; font-size:clamp(13px,.83vw,16px); letter-spacing:.06em; text-transform:uppercase; color:var(--sand)}
.hsheet__close{transition:color .3s var(--e-out)}
.hsheet__close:hover,.hsheet__close:focus-visible{color:var(--white); outline:none}
@media (max-width:900px){
  .homes{height:auto; min-height:100svh; padding:24svh 20px 64px}
  .homes__nav{position:relative; left:auto; right:auto; bottom:auto}
  .homes__sheet{position:fixed; width:100%; z-index:40; overflow:auto}
  .hsheet__copy{position:relative; left:auto; right:auto; bottom:auto; padding:140px 20px 64px}
  .hsheet__close{right:20px; z-index:2}   /* above the copy, which runs from the sheet's top on a phone */
}

/* ---- the paper hero (Frame 45): copy left, illustration right, a register
   link top right. The copy block sits where the frame's small heading does
   (321 of 1080); inside it the standard gaps. */
.phero--paper{background:var(--paper); color:var(--ink)}
.phero--paper .phero__logo{z-index:5; color:var(--ink); transition:color .45s var(--e-out)}   /* above the sheet; Paper once it is in */
.phero--paper.is-sheet .phero__logo{color:var(--paper)}
/* the header's Register link (every inner page): fixed top right at the
   frame's 1577 / 93, Paper over dark sections and Ink over light ones */
/* WordPress pushes the whole document down by the admin bar's height
   (html{margin-top:32px !important}). The mark is in the flow and moves with
   it; the hamburger and this row are fixed to the viewport and do not, so a
   logged-in editor sees them sitting exactly 32px high of the mark while a
   logged-out visitor sees them aligned (the user, 20 Oct 2026). The bar is
   32px, and 46px on WordPress's own small-screen breakpoint of 782px. */
body.admin-bar{ --hdr-shift:32px; }
@media screen and (max-width:782px){ body.admin-bar{ --hdr-shift:46px; } }

/* Both are centred on the line by their own middle rather than by half of a
   height written into the rule, so the button can change size without the
   alignment drifting again. */
.hdr__end{position:fixed; z-index:50; top:calc(var(--hdr-mid) + var(--hdr-shift, 0px)); transform:translateY(-50%); right:clamp(24px,5.73vw,110px); display:flex; align-items:center; gap:clamp(16px,1.7vw,32px)}
/* The same outlined button the panels use (.cta), at header scale, so the
   header speaks the site's own button language rather than inventing one. */
.reg{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,1.5vw,28px);
  height:clamp(40px,4.9svh,53px); padding:0 clamp(14px,1.15vw,22px);
  border:1px solid rgba(247,245,240,.42);
  font-family:var(--f-body); font-weight:500; font-size:clamp(11px,.73vw,13px);
  letter-spacing:.1em; text-transform:uppercase; color:var(--paper); white-space:nowrap;
  transition:color .35s var(--e-out), border-color .35s var(--e-out), background-color .45s var(--e-out), opacity .3s;
}
.reg:hover{background:rgba(247,245,240,.08); border-color:rgba(247,245,240,.78)}
.reg.is-dark{color:var(--ink); border-color:rgba(20,23,28,.32)}
.reg.is-dark:hover{background:rgba(20,23,28,.05); border-color:rgba(20,23,28,.58)}
.reg .cta__arw{width:22px; height:22px}
.reg:hover .cta__svg{transform:translateX(4px)}
.js .reg{opacity:0}
/* ------------------------------------------------- the language switch
   It rides the header row (.hdr__end in main.css) rather than positioning
   itself, so a longer label in any language moves it rather than colliding
   with it. The row is mirrored once, in rtl.css; nothing inside it is. */
.lang { display:flex; align-items:baseline; gap:.5em;
  font-family:var(--f-body); font-size:clamp(11px,.73vw,14px); letter-spacing:.14em;
  text-transform:uppercase; color:rgba(247,245,240,.62);
  transition:color .4s var(--e-out); }
.lang__a { color:inherit; text-decoration:none; transition:color .3s var(--e-out); }
.lang__a:hover, .lang__a.is-on { color:#F7F5F0; }
.lang__sep { opacity:.4; }
/* each language names itself, so the Arabic labels take the Arabic setting
   and the English one keeps the Latin face */
.lang__a[lang="fa"], .lang__a[lang="ps"] { letter-spacing:0; text-transform:none; font-size:clamp(12px,.83vw,16px); }
.lang__a[lang="en"] { font-family:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; }
/* over a light section, the ink swap the burger and Register already make */
.lang.is-dark { color:rgba(20,23,28,.6); }
.lang.is-dark .lang__a:hover, .lang.is-dark .lang__a.is-on { color:var(--ink); }
@media (max-width:900px){ .reg{display:none} .hdr__end{right:20px}
  /* On a phone the flat layout sets the mark itself, from the hero's own top
     padding, and the mark is held at its 186px floor, so its middle is that
     padding plus half of 57.9. The header line follows it here rather than
     the desktop proportion. */
  :root{ --hdr-mid:calc(clamp(44px,9svh,80px) + 29px); }
}
.phero--paper .phero__copy{position:absolute; z-index:2; left:clamp(24px,8.75vw,168px); top:29.7svh; width:min(707px, 36.8vw)}
.phero--paper .phero__eyebrow{display:flex; align-items:center; gap:22px; margin:0 0 clamp(14px,2.4svh,26px); padding:0; font-family:var(--f-display); font-weight:500; font-size:clamp(15px,.9375vw,18px); line-height:1.6; letter-spacing:.06em; text-transform:uppercase; color:var(--sand-ink)}
.phero--paper .phero__eyebrow::before{content:""; width:36px; height:1px; background:var(--sand-ink); opacity:.6}
.phero--paper .phero__title{margin:0; font-family:var(--f-display); font-weight:200; font-size:clamp(36px,3.4375vw,66px); line-height:1.139; letter-spacing:-.015em; color:var(--navy-line)}
.phero--paper .phero__title .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.phero--paper .phero__title .ln i{display:block; font-style:normal}
.phero--paper .phero__intro{margin:clamp(24px,3.8svh,41px) 0 0; padding:0; max-width:593px; font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6; color:var(--ink)}
.phero__art{position:absolute; z-index:1; left:32.24vw; bottom:0; width:69.1vw; max-width:none; will-change:transform, opacity}
/* the frame feathers the illustration on all four sides (375 of 1327 at the
   sides, 200 of 778 top and bottom): the same fades as a mask, and multiply
   so its white is the paper */
.phero__art img{display:block; width:100%; height:auto; mix-blend-mode:multiply; -webkit-user-drag:none;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 28%, #000 72%, transparent), linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 28%, #000 72%, transparent), linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
  -webkit-mask-composite:source-in; mask-composite:intersect}
.js .phero--paper .phero__eyebrow,.js .phero--paper .phero__intro,.js .phero__art{opacity:0}
.js .phero--paper .phero__title .ln i{transform:translateY(112%)}
/* ---- further screens on the paper canvas (Frame 46, node 51:2161): the
   page holds for one screen per slide while the words leave and the picture
   fades, and the next words and picture arrive in their own places. Slide
   positions from the frame: picture left 143 / 390, 911 wide, copy at 1123 /
   377; or copy at 205 / 377 with the picture at 852 / 420, 932 wide (the
   frame's second screen, brought up to the same canvas). */
.phero-run{position:relative; z-index:2; height:calc(100svh * var(--units, 1))}
.phero-run .phero{position:sticky; top:0}
.phero__slide{position:absolute; inset:0}
.phero__slide:not(.is-on){pointer-events:none}
.phero__slide--art-left .phero__copy{left:58.5vw; top:34.9svh}
.phero__slide--art-left .phero__art{left:7.45vw; top:36.1svh; bottom:auto; width:47.45vw}
.phero__slide--art-right .phero__copy{left:clamp(24px,10.68vw,205px); top:34.9svh}
.phero__slide--art-right .phero__art{left:44.4vw; top:38.9svh; bottom:auto; width:48.5vw}
.phero__slide:not(.phero__slide--hero) .phero__art img{-webkit-mask-image:none; mask-image:none}   /* these pictures carry their own torn edges */
.phero__body{margin:clamp(24px,3.8svh,41px) 0 0; max-width:min(593px, 30.9vw)}
.phero__body p{margin:0; font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6; color:var(--ink)}
.phero__body p + p{margin-top:1.2em}
.js .phero__body p{opacity:0}
/* ---- the companies on the sheet (Frame 49): the sheet is the Navy sweep
   from the right; on it the copy at the left, the current company's disc at
   the centre of the screen on a great arc (the frame's radius, 619.5 of
   1920) and its name at the right, the next one small at the arc's foot,
   the one before small at its head. The script sizes the arc and places
   the numbers and names (recomposed with the user, 30 Sep 2026). */
.phero__sheet{position:absolute; inset:0; z-index:3; background:var(--navy); transform:translateX(100%); will-change:transform}
.gco{position:absolute; inset:0; z-index:4; visibility:hidden; pointer-events:none; color:var(--white)}
.gco.is-on{visibility:visible}
.gco__copy{position:absolute; left:clamp(24px,8.75vw,168px); top:50%; transform:translateY(-50%); width:min(707px, 36.8vw)}   /* the hero copy's left edge; centred on the disc */
.gco__eyebrow{color:var(--sand)}
.gco__eyebrow::before{background:var(--sand)}
.gco__title{margin:0; font-family:var(--f-display); font-weight:200; font-size:clamp(36px,3.4375vw,66px); line-height:1.139; letter-spacing:-.015em; color:var(--white)}
.gco__title .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.gco__title .ln i{display:block; font-style:normal}
.gco__ring{position:absolute; left:0; top:0; will-change:transform, opacity; -webkit-mask-composite:source-in; mask-composite:intersect}   /* masked by the script: the arc fades towards the small numbers, and its far side is cut away */
.gco__ring svg{display:block; width:100%; height:100%; overflow:visible}
.gco__ring circle{stroke:var(--navy-line); stroke-width:1.2; vector-effect:non-scaling-stroke}
.gco__list{list-style:none; margin:0; padding:0}
.gco__item{position:absolute; left:0; top:0}
.gco__num{position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center; width:124px; height:124px; border-radius:50%; background:var(--navy-line); font-family:var(--f-display); font-weight:200; font-size:48px; line-height:1; letter-spacing:-.02em; color:var(--white); will-change:transform, opacity}
.gco__num i{font-style:normal; margin-top:.04em}
.gco__text{position:absolute; left:0; top:0; width:601px; will-change:transform, opacity}
.gco__name{margin:0; font-family:var(--f-display); font-weight:200; font-size:clamp(24px,1.875vw,36px); line-height:1.2; letter-spacing:-.028em; color:var(--white); white-space:nowrap}
.gco__line{margin:clamp(4px,.55svh,6px) 0 0; font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6; color:var(--white); opacity:.72; max-width:420px}
.js .gco__eyebrow,.js .gco__ring,.js .gco__num,.js .gco__text{opacity:0}
.js .gco__title .ln i{transform:translateY(112%)}
/* depth (site.js): each screen's picture is a plane, scaled and faded about
   the centre of the screen; the words keep their places and their wipes */
.phero-run.is-depth .phero__art{will-change:transform, opacity; backface-visibility:hidden}
/* flat: no motion, or a narrow screen: the screens stack as sections */
html:not(.js) .phero-run,.phero-run.is-flat{height:auto}
html:not(.js) .phero-run .phero,.phero-run.is-flat .phero{position:relative; height:auto; min-height:0; padding-bottom:10svh}
html:not(.js) .phero__slide,.phero-run.is-flat .phero__slide{position:relative; inset:auto; min-height:100svh}
html:not(.js) .phero__slide:not(.phero__slide--hero) .phero__copy,.phero-run.is-flat .phero__slide:not(.phero__slide--hero) .phero__copy{position:absolute}
html:not(.js) .phero__sheet,.phero-run.is-flat .phero__sheet{display:none}
html:not(.js) .gco,.phero-run.is-flat .gco{position:relative; inset:auto; visibility:visible; pointer-events:auto; background:var(--navy); padding:12svh clamp(24px,18vw,346px) 12svh; margin:0 -0px}
html:not(.js) .gco__copy,.phero-run.is-flat .gco__copy{position:relative; left:auto; top:auto; width:auto; max-width:707px}
html:not(.js) .gco__ring,.phero-run.is-flat .gco__ring{display:none}
html:not(.js) .gco__list,.phero-run.is-flat .gco__list{margin-top:48px; max-width:720px}
html:not(.js) .gco__item,.phero-run.is-flat .gco__item{position:relative; display:flex; align-items:flex-start; gap:24px; padding:20px 0; border-top:1px solid rgba(255,255,255,.12)}
html:not(.js) .gco__num,.phero-run.is-flat .gco__num{position:relative; width:56px; height:56px; font-size:22px; flex:none; opacity:1}
html:not(.js) .gco__text,.phero-run.is-flat .gco__text{position:relative; width:auto; opacity:1}
html:not(.js) .gco__eyebrow,.phero-run.is-flat .gco__eyebrow{opacity:1} html:not(.js) .gco__title .ln i,.phero-run.is-flat .gco__title .ln i{transform:none}
@media (max-width:900px){
  .phero--paper{padding:22svh 20px 0}
  /* the paper canvas, flat: each screen's words then its picture, in flow */
  .phero-run.is-flat .phero__slide{min-height:0; padding:0 0 48px}
  .phero-run.is-flat .phero__slide:not(.phero__slide--hero){padding-top:48px}
  .phero-run.is-flat .phero__slide .phero__copy,.phero-run.is-flat .phero__slide:not(.phero__slide--hero) .phero__copy{position:relative; left:auto; top:auto; width:auto; max-width:none}
  .phero-run.is-flat .phero__art{position:relative; left:auto; right:auto; top:auto; bottom:auto; width:100%; margin:32px 0 0}
  .phero-run.is-flat .phero__body,.phero-run.is-flat .phero--paper .phero__intro{max-width:none}
  .phero-run.is-flat .gco{padding:56px 20px; margin:0 -20px}
  .phero-run.is-flat .gco__item{gap:18px}
  .phero-run.is-flat .gco__num{width:48px; height:48px; font-size:20px}
  .phero-run,.phero-run.is-flat{height:auto}
  .phero-run .phero{position:relative; height:auto; min-height:0}
  .phero__slide,.phero-run.is-flat .phero__slide{position:relative; inset:auto; min-height:0; margin-bottom:64px}
  .phero--paper .phero__copy,.phero-run.is-flat .phero__slide .phero__copy{position:relative; top:auto; left:auto; width:auto}
  .phero__art,.phero__slide .phero__art{position:relative; left:auto; top:auto; width:auto; margin:32px -20px 0}
  .phero__body{max-width:none}
  .gco{padding:64px 20px; margin:0 -20px}
  .gco__name{white-space:normal}
}

/* ---- the screen the hero uncovers (Frames 40/41): held still under the hero
   as it slides off (its photos are drawn one screen up and brought home as
   the run arrives), then, with a second photo, one phase of scroll in which
   the small heading leaves, the headline rises to 302, the aerial dissolves
   into the drawing and the paragraphs arrive under the headline. */
.vis-run{position:relative; z-index:1; height:100svh}
.vis-run--two{height:calc(100svh + 100svh)}
.vis-run--three{height:calc(100svh + 200svh)}   /* the drawing, then the sheet: one phase each */
.vis-run--four{height:calc(100svh + 300svh)}    /* then the field */
.vis-run--four:has(.nextb){height:calc(100svh + 300svh + 51svh)}   /* and the band's own rise over the held field */
.vis{position:sticky; top:0; height:100svh; min-height:560px; overflow:hidden; background:var(--navy)}
.vis__bgs{position:absolute; inset:0; will-change:transform}
.vis__bg{position:absolute; inset:0}
.vis__bg img{display:block; width:100%; height:100%; object-fit:cover; object-position:41.5% 50%; -webkit-user-drag:none}   /* the registered pair: 2489 wide on a 1920 frame, placed 236 in */
.vis__bg2{z-index:1}
.js .vis__bg2{opacity:0}
.vis__copy{position:absolute; z-index:2; left:clamp(20px,6.35vw,122px); bottom:clamp(56px,11.85svh,128px); width:min(680px, 35.4vw)}
.vis__eyebrow{margin:0 0 clamp(10px,1.4svh,15px); padding-left:3px; font-family:var(--f-display); font-weight:500; font-size:clamp(15px,.9375vw,18px); line-height:1.6; color:var(--paper)}
.vis__title{margin:0; font-family:var(--f-display); font-weight:200; font-size:clamp(36px,3.4375vw,66px); line-height:1.139; letter-spacing:-.015em; color:var(--sand); will-change:transform}
.vis__title .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.vis__title .ln i{display:block; font-style:normal}
.vis__body{position:absolute; z-index:2; left:clamp(20px,6.51vw,125px); top:45.83svh; max-width:min(504px, 26.25vw); pointer-events:none}
.vis__body p{margin:0; font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6; color:var(--white)}
.vis__body p + p{margin-top:1.2em}
/* ---- the sheet (Frame 42): Navy, from the right, over the drawing; the plan
   on it in the system's type. Figures at 367 / 272 of the frame, the copy at
   1047 / 371, 475 and 504 wide; gaps the standard ones. */
.vis__sheet{position:absolute; inset:0; z-index:3; background:var(--navy); transform:translateX(100%); will-change:transform}
.vis__plan{position:absolute; inset:0; z-index:4; visibility:hidden; pointer-events:none}
.vis__plan.is-on{visibility:visible; pointer-events:auto}
.vis__figs{position:absolute; left:clamp(24px,19.11vw,367px); top:25.2svh; margin:0; width:min(485px, 25.2vw)}
.vis__fig{padding:0 0 clamp(18px,3.4svh,37px)}
.vis__fig + .vis__fig{border-top:1px solid rgba(255,255,255,.14); padding-top:clamp(16px,2.8svh,30px)}
.vis__val{display:flex; align-items:baseline; gap:.22em; margin:0; font-family:var(--f-display); font-weight:200; font-size:clamp(44px,4.375vw,84px); line-height:1.1; letter-spacing:-.02em; color:var(--white)}
.vis__val small{font-weight:300; font-size:.44em; letter-spacing:0; color:var(--paper-line)}
.vis__cap{margin:.15em 0 0; font-family:var(--f-body); font-weight:300; font-size:16px; line-height:1.6; color:rgba(247,245,240,.7)}
.vis__plan-copy{position:absolute; left:clamp(24px,54.53vw,1047px); top:34.35svh; width:min(504px, 26.25vw)}
.vis__plan-title{margin:0; max-width:475px; font-family:var(--f-display); font-weight:200; font-size:clamp(36px,3.4375vw,66px); line-height:1.139; letter-spacing:-.015em; color:var(--sand)}
.vis__plan-title .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.vis__plan-title .ln i{display:block; font-style:normal}
.vis__plan-body{margin-top:clamp(24px,3.8svh,41px)}
.vis__plan-body p{margin:0; font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6; color:var(--white)}
.vis__plan-body p + p{margin-top:1.2em}
.js .vis__plan-title .ln i{transform:translateY(112%)}
.js [data-px]{opacity:0}
html:not(.js) .vis__sheet{display:none} html:not(.js) .vis__plan{position:relative; visibility:visible; padding:48px 0 80px} html:not(.js) .vis__figs,html:not(.js) .vis__plan-copy{position:relative; top:auto; left:auto; margin:24px 0 0 clamp(20px,6.35vw,122px)} html:not(.js) [data-px]{opacity:1}
/* ---- the field (Frame 43): on the sheet turned to Paper, the library's
   images on a canvas twice the screen in three depths, the community copy
   centred. Pre-state: each depth at .3 from the centre, invisible. */
.vis__field{position:absolute; inset:0; z-index:5; overflow:hidden; visibility:hidden; pointer-events:none}
.vis__field.is-on{visibility:visible}
.vis__depth{position:absolute; left:-50%; top:-50%; width:200%; height:200%; transform-origin:50% 50%; will-change:transform, opacity}
.vis__im{position:absolute; margin:0; transform:translate(-50%,-50%); box-shadow:0 18px 50px rgba(20,23,28,.14)}
.vis__im img{display:block; width:100%; height:auto; -webkit-user-drag:none}
.vis__depth--2 .vis__im{opacity:.38}   /* the back depth is glimpsed through the paper, behind the words */
.vis__depth--1 .vis__im{opacity:.8}
.vis__com{position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 24px; visibility:hidden; pointer-events:none}
.vis__com.is-on{visibility:visible; pointer-events:auto}
.vis__com-eyebrow{margin:0 0 clamp(10px,1.4svh,15px); font-family:var(--f-display); font-weight:500; font-size:clamp(15px,.9375vw,18px); line-height:1.6; color:var(--sand-ink)}
.vis__com-title{margin:0; max-width:820px; font-family:var(--f-display); font-weight:200; font-size:clamp(36px,3.4375vw,66px); line-height:1.139; letter-spacing:-.015em; color:var(--ink)}
.vis__com-title .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.vis__com-title .ln i{display:block; font-style:normal}
.vis__com-body{margin-top:clamp(24px,3.8svh,41px); max-width:713px}
.vis__com-body p{margin:0; font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6; color:rgba(20,23,28,.72)}
.vis__com-body p + p{margin-top:1.2em}
.js .vis__com-title .ln i{transform:translateY(112%)}
.js [data-cx]{opacity:0}
.js .vis__depth{opacity:0; transform:scale(.3)}
html:not(.js) .vis__field{display:none} html:not(.js) .vis__com{position:relative; visibility:visible; padding:64px 24px; background:var(--paper)} html:not(.js) [data-cx]{opacity:1}
/* ---- the closing band (Frame 44): at the bottom of the run, over the sticky
   (z 3), so the last 51svh of scroll bring it up over the held field; a
   shadow along its top edge says it is laid over. Content at 241 of 1920,
   146 down from its top; the headline 1076 wide; the button at the right. */
/* Reversed 30 Sep 2026 (the user): the band waits underneath, the field
   scrolls up off it, and the shadow is cast onto the band from the field's
   edge (an inner shadow that travels with the field's bottom, drawn by the
   script), so the navy is uncovered rather than laid over. The sticky keeps
   its place in the stacking order; the band is fixed to the bottom of the
   screen for the last 51svh of the run, behind it. */
.nextb{position:absolute; left:0; right:0; bottom:0; z-index:0; height:51svh; min-height:380px; background:var(--navy); color:var(--white); overflow:hidden}
.nextb.is-fixed{position:fixed; top:auto; bottom:0}
/* in flow (the Developer): the band follows the paper canvas's Navy sheet as a section of its own, a hairline between */
.nextb--flow{position:relative; z-index:1; height:auto; min-height:0; padding-bottom:clamp(64px,15svh,162px); border-top:1px solid rgba(247,245,240,.12)}
.nextb--flow .nextb__shade{display:none}

/* ---- the land uses (Location): the headline and the numbered entries at
   the left, the drawn context map at the right, on Navy after the sheet.
   The map is an SVG that draws itself in; its labels are HTML so they keep
   their size at every width. */
.uses{position:relative; z-index:1; min-height:100svh; padding:clamp(80px,13svh,140px) clamp(24px,6.35vw,122px) clamp(80px,12svh,130px); background:var(--navy); color:var(--white)}
.uses__in{display:grid; grid-template-columns:minmax(0,46fr) minmax(0,40fr); gap:clamp(40px,6vw,116px); align-items:center}
.uses__title{margin:0 0 clamp(28px,4.6svh,50px); font-family:var(--f-display); font-weight:200; font-size:clamp(36px,3.4375vw,66px); line-height:1.139; letter-spacing:-.015em; color:var(--white)}
.uses__title .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.uses__title .ln i{display:block; font-style:normal}
.js .uses__title{opacity:0}
.uses__list{list-style:none; margin:0; padding:0; max-width:640px}
.uses__row{display:grid; grid-template-columns:40px minmax(96px,150px) 1fr; gap:0 clamp(14px,1.4vw,26px); align-items:baseline; padding:clamp(16px,2.6svh,28px) 0; border-top:1px solid rgba(247,245,240,.14)}
.uses__row:last-child{border-bottom:1px solid rgba(247,245,240,.14)}
.uses__n{font-family:var(--f-display); font-weight:200; font-size:clamp(17px,1.25vw,24px); line-height:1.2; letter-spacing:-.01em; color:var(--sand)}
.uses__dir{font-family:var(--f-body); font-weight:500; font-size:clamp(12px,.78vw,15px); line-height:1.6; letter-spacing:.06em; text-transform:uppercase; color:var(--sand)}
.uses__txt{font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6; color:rgba(247,245,240,.72)}
.uses__map{position:relative; margin:0; aspect-ratio:500 / 760; height:min(82svh, 60vw); width:auto; justify-self:end}   /* sized from its height, so the box is the drawing's own shape and the labels sit on their marks */
/* the picture: square, sized to its column. The render's flat edge is
   rgb(13,29,55), a shade under the Navy, and the user's call (12 Oct 2026)
   is that the screen takes the render's colour rather than the render the
   screen's: the section ground is #0D1D37 when a picture is set and the
   raw render is used, its outer 12% feathered into that colour for terrain
   tones (labels, glow and the north arrow protected). Earlier passes, a
   lighten blend, a brightness lift and a per-channel correction of the
   file, each left a trace; this leaves none. */
.uses--pic{background:#0D1D37}
/* Frame 56 (node 63:2): on a screen wide enough, the map fills the full
   height, flush to the top, right and bottom edges, and the copy sits
   centred in the room left of it; the ground is the map's own colour, so
   its feathered left side dissolves into it. Narrower screens keep the
   two columns. */
@media (min-width:901px) and (min-aspect-ratio: 29/20){
  .uses--pic{display:flex; align-items:center; min-height:100svh; padding:clamp(80px,13svh,140px) 100svh clamp(80px,13svh,140px) clamp(24px,6.35vw,122px)}
  .uses--pic .uses__in{display:block; width:100%}
  .uses--pic .uses__copy{max-width:640px}
  .uses--pic .uses__map{position:absolute; top:0; right:0; height:100svh; width:100svh; aspect-ratio:auto; overflow:hidden}
}
.uses__map--pic{aspect-ratio:1 / 1; height:auto; width:min(100%, 82svh)}
.uses__pic{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none}
.js .uses__pic{opacity:0}
.uses__svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke:rgba(247,245,240,.5); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round}
.uses__knc{stroke:rgba(247,245,240,.42); stroke-dasharray:4 5}
.uses__city{fill:url(#uses-hatch); stroke:rgba(247,245,240,.38)}
.uses__road{stroke:rgba(247,245,240,.55); stroke-width:1.6}
.uses__run{stroke:rgba(247,245,240,.7); stroke-width:2.4}
.uses__dot{fill:var(--paper); stroke:none}
.uses__site{fill:rgba(199,176,138,.22); stroke:var(--sand); stroke-width:1.6}
.uses__ring{stroke:rgba(199,176,138,.45); stroke-dasharray:2 4}
.uses__north{stroke:rgba(247,245,240,.6)}
.uses__lab{position:absolute; display:flex; flex-direction:column; white-space:nowrap; font-family:var(--f-body); font-weight:500; font-size:clamp(11px,.73vw,14px); line-height:1.35; letter-spacing:.06em; text-transform:uppercase; color:var(--paper)}
.uses__lab em{font-style:normal; font-weight:300; font-size:clamp(12px,.83vw,16px); letter-spacing:0; text-transform:none; color:rgba(247,245,240,.72)}
.uses__lab--g{color:var(--sand)}
.uses__lab--r{align-items:flex-end; text-align:right; transform:translateX(-100%)}
.uses__lab--soft{color:rgba(247,245,240,.5); font-weight:400}
.uses__cap{position:absolute; left:0; bottom:-1.9em; margin:0; font-family:var(--f-body); font-weight:300; font-size:13px; line-height:1.6; letter-spacing:.02em; color:rgba(247,245,240,.45)}
.uses__copy .uses__cap--copy{position:static; display:block; margin-top:clamp(20px,3svh,32px)}   /* under the list when the map is a picture */
.js .uses__row,.js .uses__lab,.js .uses__cap{opacity:0}
.js .uses__svg .draw{opacity:0}
@media (max-width:900px){
  .uses{padding:72px 20px 80px}
  .uses__in{grid-template-columns:1fr; gap:48px}
  .uses__map{justify-self:center; height:auto; width:min(100%, 420px)}
  .uses__map--pic{width:min(100%, 520px)}
  .uses__row{grid-template-columns:32px 1fr; gap:4px 14px}
  .uses__txt{grid-column:2}
}
/* ---- the gallery: an editorial grid on Paper, repeating in sixes (a wide
   3:2 over seven columns, a 4:3 over five, three squares, one across the
   full width at 21:9), each picture with its index and name beneath; a
   picture opens full screen on Navy. */
.gal{position:relative; z-index:1; padding:clamp(72px,11svh,120px) clamp(24px,6.35vw,122px) clamp(80px,12svh,130px); background:var(--paper); color:var(--ink)}
.gal__grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(28px,3.4vw,64px) clamp(20px,2.1vw,40px); align-items:start}
.gal__item{margin:0; min-width:0}
.gal__item--a{grid-column:span 7}
.gal__item--b{grid-column:span 5}
.gal__item--c{grid-column:span 4}
.gal__item--d{grid-column:span 12}
.gal__open{display:block; width:100%; margin:0; padding:0; border:0; background:none; text-align:left; cursor:pointer; color:inherit; font:inherit}
.gal__open:focus-visible{outline:none}
.gal__fig{position:relative; display:block; overflow:hidden; background:var(--paper-2)}
.gal__item--a .gal__fig{aspect-ratio:3 / 2}
.gal__item--b .gal__fig{aspect-ratio:4 / 3}
.gal__item--c .gal__fig{aspect-ratio:1 / 1}
.gal__item--d .gal__fig{aspect-ratio:21 / 9}
.gal__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.001); transition:transform 1.2s var(--e-out); -webkit-user-drag:none}
.gal__open:hover .gal__img,.gal__open:focus-visible .gal__img{transform:scale(1.045)}
.gal__cap{display:flex; align-items:baseline; gap:14px; margin-top:clamp(12px,1.6svh,18px)}
.gal__n{font-family:var(--f-display); font-weight:200; font-size:clamp(15px,.94vw,18px); line-height:1.2; letter-spacing:-.01em; color:var(--sand-ink, #8A7352)}
.gal__name{font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6; color:var(--ink); opacity:.72; transition:opacity .35s var(--e-out)}
.gal__open:hover .gal__name,.gal__open:focus-visible .gal__name{opacity:1}
.js .gal__item{opacity:0}
/* the full-screen view */
.gal__box{position:fixed; inset:0; z-index:60; color:var(--white)}
.gal__box-bg{position:absolute; inset:0; background:var(--navy)}
.gal__stage{position:absolute; left:clamp(24px,6.35vw,122px); right:clamp(24px,6.35vw,122px); top:clamp(60px,8.6svh,93px); bottom:clamp(60px,8.6svh,93px); margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,2svh,22px)}
.gal__stage{pointer-events:none}   /* the stage spans the margins and would swallow Close; only the picture itself takes the pointer */
.gal__big{display:block; max-width:100%; max-height:calc(100% - 48px); width:auto; height:auto; object-fit:contain; pointer-events:auto; -webkit-user-drag:none}
.gal__count,.gal__close,.gal__nav{z-index:2}
.gal__big-cap{margin:0; font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6; color:rgba(247,245,240,.72)}
.gal__count{position:absolute; left:clamp(24px,6.35vw,122px); top:clamp(60px,8.6svh,93px); margin:0; display:flex; gap:10px; font-family:var(--f-display); font-weight:200; font-size:clamp(17px,1.25vw,24px); line-height:1.1; letter-spacing:-.01em; color:var(--white)}
.gal__of{color:var(--sand)}
.gal__close{position:absolute; right:clamp(24px,6.35vw,122px); top:clamp(60px,8.6svh,93px); margin:0; padding:0; border:0; background:none; cursor:pointer; font-family:var(--f-body); font-weight:500; font-size:clamp(13px,.83vw,16px); line-height:1.6; letter-spacing:.06em; text-transform:uppercase; color:var(--sand); transition:color .3s var(--e-out)}
.gal__close:hover,.gal__close:focus-visible{color:var(--white); outline:none}
.gal__nav{position:absolute; top:50%; transform:translateY(-50%); width:64px; height:64px; margin:0; padding:0; border:0; background:none; cursor:pointer; color:var(--sand); display:flex; align-items:center; justify-content:center}
.gal__nav .cta__arw{width:30px; height:30px} .gal__nav .cta__svg{width:30px; height:30px}
.gal__nav--next{right:clamp(8px,1.6vw,30px)}
.gal__nav--prev{left:clamp(8px,1.6vw,30px)} .gal__nav--prev .cta__svg{transform:scaleX(-1)}
.gal__nav:hover .cta__barb--top,.gal__nav:focus-visible .cta__barb--top{opacity:1; transform:none; transition-delay:.1s}
.gal__nav--next:hover .cta__svg{transform:translateX(4px)} .gal__nav--prev:hover .cta__svg{transform:scaleX(-1) translateX(4px)}
.gal__nav:focus-visible{outline:none}
@media (max-width:900px){
  .gal{padding:56px 20px 72px}
  .gal__grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 16px}
  .gal__item--a,.gal__item--b,.gal__item--d{grid-column:span 2}
  .gal__item--c{grid-column:span 1}
  .gal__stage{left:16px; right:16px}
  .gal__nav{width:48px; height:48px} .gal__nav--prev{left:0} .gal__nav--next{right:0}
}

/* ---- the register form (Register Interest): the introduction and a
   picture at the left, held while the page scrolls; the form at the right
   in the enquiry's field system, on Paper. */
.regi{position:relative; z-index:1; padding:clamp(72px,11svh,120px) clamp(24px,6.35vw,122px) clamp(80px,12svh,130px); background:var(--paper); color:var(--ink)}
.regi__in{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,7vw,134px); align-items:start}
.regi__hold{position:sticky; top:clamp(80px,12svh,130px)}
.regi__fig{position:relative; margin:0 0 clamp(24px,3.8svh,41px); aspect-ratio:4 / 5; overflow:hidden; background:var(--paper-2)}
.regi__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none}
.regi__intro{margin:0; max-width:460px; font-family:var(--f-body); font-weight:300; font-size:16px; line-height:1.73; color:rgba(20,23,28,.72)}
.regi__intro + .regi__intro{margin-top:1.2em}
.regi__form{margin-top:0; max-width:777px}
.regi .cta{border-color:var(--navy); color:var(--navy); cursor:pointer}
.regi .cta:hover,.regi .cta:focus-visible{background:var(--navy); border-color:var(--navy); color:var(--paper)}
.regi__note{grid-column:1 / -1; margin:clamp(10px,1.6svh,18px) 0 0; max-width:640px; font-family:var(--f-body); font-weight:300; font-size:14px; line-height:1.6; color:rgba(20,23,28,.55)}
.js .regi [data-rx]{opacity:0}
@media (max-width:900px){
  .regi{padding:56px 20px 72px}
  .regi__in{grid-template-columns:1fr; gap:40px}
  .regi__hold{position:static}
  .regi__fig{aspect-ratio:4 / 3}
  .regi__form{grid-template-columns:1fr}
}

/* ---- the contact details (Contact): the rows at the left, each a Sand
   caption over its value, the email and the phone at display size; the
   button beneath; a picture at the right held while the page scrolls. */
.cnt{position:relative; z-index:1; padding:clamp(72px,11svh,120px) clamp(24px,6.35vw,122px) clamp(80px,12svh,130px); background:var(--paper); color:var(--ink)}
.cnt__in{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(40px,7vw,134px); align-items:start}
.cnt__eyebrow{display:flex; align-items:center; gap:13px; margin:0 0 clamp(28px,4.6svh,50px); font-family:var(--f-display); font-weight:500; font-size:clamp(15px,.9375vw,18px); line-height:1.6; letter-spacing:.06em; text-transform:uppercase; color:var(--sand-ink)}
.cnt__eyebrow::before{content:""; width:36px; height:1px; background:var(--sand-ink); opacity:.7}
.cnt__rows{margin:0; max-width:640px}
.cnt__row{padding:clamp(18px,2.8svh,30px) 0; border-top:1px solid rgba(20,23,28,.14)}
.cnt__row:last-child{border-bottom:1px solid rgba(20,23,28,.14)}
.cnt__label{margin:0 0 .5em; font-family:var(--f-body); font-weight:500; font-size:clamp(12px,.78vw,15px); line-height:1.6; letter-spacing:.06em; text-transform:uppercase; color:var(--sand-ink)}
.cnt__val{margin:0; font-family:var(--f-body); font-weight:300; font-size:16px; line-height:1.73; color:rgba(20,23,28,.78)}
.cnt__row--email .cnt__val,.cnt__row--phone .cnt__val{font-family:var(--f-display); font-weight:200; font-size:clamp(26px,2.3vw,44px); line-height:1.15; letter-spacing:-.015em; color:var(--navy-line)}
.cnt__val a{color:inherit; text-decoration:none; background-image:linear-gradient(currentColor, currentColor); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .5s var(--e-out)}
.cnt__val a:hover,.cnt__val a:focus-visible{background-size:100% 1px; outline:none}
.cnt__cta{margin-top:clamp(28px,4.6svh,50px); border-color:var(--navy); color:var(--navy)}
.cnt__cta:hover,.cnt__cta:focus-visible{background:var(--navy); border-color:var(--navy); color:var(--paper)}
.cnt__aside{position:sticky; top:clamp(80px,12svh,130px)}
.cnt__fig{position:relative; margin:0; aspect-ratio:4 / 5; overflow:hidden; background:var(--paper-2)}
.cnt__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none}
.js .cnt [data-cn]{opacity:0}
@media (max-width:900px){
  .cnt{padding:56px 20px 72px}
  .cnt__in{grid-template-columns:1fr; gap:40px}
  .cnt__aside{position:static}
  .cnt__fig{aspect-ratio:4 / 3}
}

.nextb__shade{position:absolute; left:0; right:0; top:0; height:90px; background:linear-gradient(to bottom, rgba(6,13,22,.55), rgba(6,13,22,0)); pointer-events:none; will-change:transform}
.vis-run--four:has(.nextb) .vis{z-index:1}
.nextb__in{padding:clamp(48px,13.5svh,146px) clamp(24px,12.55vw,241px) 0}
.nextb__eyebrow{display:flex; align-items:center; gap:18px; margin:0 0 clamp(14px,2.4svh,26px); font-family:var(--f-display); font-weight:500; font-size:clamp(15px,.9375vw,18px); line-height:1.6; color:var(--sand)}
.nextb__eyebrow span{color:rgba(247,245,240,.6)}
.nextb__eyebrow span::after{content:""; display:inline-block; width:36px; height:1px; margin-left:18px; vertical-align:middle; background:rgba(247,245,240,.35)}
.nextb__row{display:flex; align-items:flex-end; justify-content:space-between; gap:40px}
.nextb__title{margin:0; max-width:1076px; font-family:var(--f-display); font-weight:200; font-size:clamp(34px,3.2vw,61px); line-height:1.08; letter-spacing:-.015em; color:var(--white)}
.nextb__title .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.nextb__title .ln i{display:block; font-style:normal}
.nextb__cta{flex:none; width:auto; min-width:264px; height:clamp(56px,6.5svh,70px); margin-bottom:.2em}
/* no arrival of its own: the field's edge is the reveal */
html:not(.js) .nextb{position:relative; height:auto; min-height:0; padding-bottom:64px}
.js .vis__eyebrow{opacity:0}
.js .vis__title .ln i{transform:translateY(112%)}
.js .vis__body p{opacity:0}
html:not(.js) .vis-run,html:not(.js) .vis-run--two{height:auto} html:not(.js) .vis{position:relative; height:auto; min-height:100svh; padding-bottom:40px} html:not(.js) .vis__bg2{opacity:1}
html:not(.js) .vis__body{position:relative; top:auto; margin:24svh 0 0 clamp(20px,6.51vw,125px)}
@media (max-width:900px){
  .phero{height:auto; min-height:100svh; padding:24svh 20px 0}
  .panel--sand,.panel--sand.is-left{position:relative; right:auto; left:auto; bottom:auto; margin:40svh auto 0; width:auto; height:auto; padding:26px 24px 28px}
  /* the screen under the hero, flat (12 Oct 2026): the first photo as a band,
     then the small heading, headline and paragraphs on Navy; the sheet's
     figures and words follow; the community block on Paper */
  .vis-run,.vis-run--two{height:auto}
  .vis{position:relative; height:auto; min-height:0; padding:0 20px 48px}
  .vis__bgs{position:relative; inset:auto; height:64svw; min-height:240px; margin:0 -20px; transform:none !important}
  .vis__bg2{display:none}
  .vis__copy,.vis__body{position:relative; top:auto; left:auto; bottom:auto; width:auto; max-width:none; pointer-events:auto}
  .vis__copy{padding-top:40px}
  .vis__body{margin-top:24px}
  .vis-run.is-flat .vis__eyebrow,.vis-run.is-flat .vis__body p,.vis-run.is-flat .vis__com-eyebrow{opacity:1}
  .vis-run.is-flat .ln i{transform:none}
  .vis__figs{position:relative; left:auto; top:auto; width:auto; max-width:none}
  .vis-run--three,.vis-run--four,.vis-run--four:has(.nextb){height:auto}
  .nextb,.nextb.is-fixed{position:relative; height:auto; min-height:0; padding:48px 0 56px; box-shadow:none}
  .nextb__shade{display:none}
  .nextb__in{padding:0 20px}
  .nextb__row{flex-direction:column; align-items:flex-start; gap:28px}
  .vis__sheet,.vis__field{display:none}
  .vis__com{position:relative; visibility:visible; pointer-events:auto; margin:48px -20px 0; padding:64px 20px; background:var(--paper)}
  .js [data-cx]{opacity:1}
  .vis__plan{position:relative; visibility:visible; pointer-events:auto; margin-top:48px}
  .vis__figs,.vis__plan-copy{position:relative; top:auto; left:auto; width:auto; max-width:none}
  .vis__plan-copy{margin-top:32px}
  .js [data-px]{opacity:1}
}

.js .dev__title .ln i{transform:translateY(112%)}
/* the figures: the frame set them at 63 Regular, which outweighed the 36
   ExtraLight headline; agreed with the user 26 Sep 2026 to bring them to 44
   Light with the unit at 28, so the headline leads and the figures support */
.dev__figs{margin:clamp(18px,3svh,32px) 0 0}
.dev__fig{padding:0 0 clamp(14px,2.6svh,28px)}
.dev__fig + .dev__fig{border-top:1px solid rgba(255,255,255,.2); padding-top:clamp(12px,2.2svh,24px)}
.dev__val{
  display:flex; align-items:baseline; gap:.2em; margin:0;
  font-family:var(--f-display); font-weight:300; font-size:clamp(30px,2.292vw,44px); line-height:1.3; letter-spacing:-.012em; color:var(--paper-line);
}
.dev__val small{font-weight:300; font-size:.64em; letter-spacing:0}
.dev__cap{margin:.1em 0 0; font-family:var(--f-body); font-weight:300; font-size:16px; line-height:1.85; color:var(--paper-line)}
@media (max-width:900px){
  .dev-run{height:auto}
  .dev{position:relative; height:auto; min-height:0; padding:0 20px 40px}
  .dev__bg{position:relative; inset:auto; height:64svw; min-height:240px; margin:0 -20px}
  .dev__bg2{display:none}
  .dev__panel{position:relative; right:auto; top:auto; margin:-56px 0 0; width:auto; height:auto; padding:26px 24px 24px; clip-path:none}
  .panel .cta{margin-top:22px}
  /* the form is designed for the Paper panel (ink on paper); on a phone it is its own Paper block under the Developer's */
  .enq{position:relative; margin:32px -24px -24px; padding:32px 24px 36px; background:var(--paper); visibility:visible; pointer-events:auto}
  .enq__form{grid-template-columns:1fr}
  /* the footer as its own block under the form, the photo behind it */
  .dev__bg3{display:none}
  .foot{position:relative; margin:40px -20px -40px; min-height:100svh; background:var(--navy); visibility:visible; pointer-events:auto}
  .foot--page{margin:0}   /* the negative margin is the home page's, to meet the Developer's padding */
  .js [data-fx]{opacity:1}
  .foot__in{min-height:0; padding:64px 20px 32px}
  .foot--page{height:auto; min-height:100svh}
  .foot__cols{grid-template-columns:1fr 1fr; gap:32px 16px}
  .foot__blurb,.foot__col--contact{grid-column:1 / -1; max-width:none}
  .foot__cols + .foot__base{flex-direction:column; gap:4px; margin-top:48px}
  .foot__logo{top:36px}
  .js .foot__logo{opacity:1}
  .foot__in{padding-top:120px}
}

/* =========================================================== menu ======
   Hamburger at 119 (Frame 17 had it at 116; it now sits on the inner
   pages' header line, centred with the Register link at 93 + 26, one line
   across the site, the user, 1 Oct 2026): three left-aligned white lines. */
.burger{
  position:fixed; z-index:50; left:clamp(16px,6.2vw,119px); top:calc(var(--hdr-mid) + var(--hdr-shift, 0px)); transform:translateY(-50%);
  width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; gap:4px; align-items:flex-start;
  will-change:opacity;
}
.burger__l{display:block; height:2px; background:var(--white); border-radius:1px; transition:transform .45s var(--e-out), width .45s var(--e-out), opacity .3s, background-color .35s var(--e-out)}
.burger.is-dark .burger__l{background:var(--ink)}   /* over a light section */
.burger__l:nth-child(1){width:18px}
.burger__l:nth-child(2){width:13px}
.burger__l:nth-child(3){width:8px}
.burger:hover .burger__l{width:18px}
.burger[aria-expanded="true"] .burger__l:nth-child(1){width:18px; transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__l:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__l:nth-child(3){width:18px; transform:translateY(-6px) rotate(-45deg)}

.menu{
  position:fixed; inset:0; z-index:40; background:rgba(6,13,22,.96);
  display:flex; align-items:center; justify-content:center; padding:var(--pad);
  opacity:0; pointer-events:none; transition:opacity .5s var(--e-out);
}
/* display:flex above would override the browser's [hidden] rule and leave an
   invisible sheet over the whole page, swallowing every click. */
.menu[hidden]{display:none}
.menu.is-open{opacity:1; pointer-events:auto}
.menu__list{list-style:none; margin:0; padding:0; text-align:center}
.menu__list li{overflow:hidden}
.menu__list a{
  display:block; font-family:var(--f-display); font-weight:300;
  font-size:clamp(28px,3.4vw,56px); line-height:1.25; letter-spacing:-.02em; color:var(--white);
  transition:color .3s;
}
.menu__list a:hover{color:var(--sand)}
.menu.is-open .menu__list a{animation:menu-in .7s var(--e-out) both}
@keyframes menu-in{from{transform:translateY(110%)} to{transform:none}}

/* ---- narrow screens ------------------------------------------------------
   The home page lies flat on a phone (12 Oct 2026): the script releases the
   sticky runs and marks them is-flat; here each screen becomes a section in
   flow. The hero: the photo with the mark and headline over it, the panel
   overlapping its foot, the figure beneath. A chapter: its picture, then its
   words on Navy. The community list: every item, as a list. */
@media (max-width:900px){
  .hero-run.is-flat{height:auto}
  .hero-run.is-flat .hero{position:relative; height:auto; min-height:0; overflow:visible}
  .hero-run.is-flat .hero__win{position:relative; inset:auto; height:76svh; min-height:440px; transform:none; clip-path:none}
  .hero-run.is-flat .hero__plate{left:0; top:0; width:100%; height:100%; min-height:0; transform:none}
  .hero-run.is-flat .hero__inner{height:76svh; min-height:440px; padding-top:clamp(44px,9svh,80px)}
  .hero-run.is-flat .hero__title{margin-top:clamp(28px,7svh,64px)}
  .hero-run.is-flat .hero__panel{position:relative; top:auto; left:auto; right:auto; bottom:auto; width:auto; height:auto; margin:-72px 20px 0; padding:26px 24px 24px; clip-path:none}
  .hero-run.is-flat .hero__intro{max-width:none}
  .hero-run.is-flat .hero__panel .cta{margin-top:22px}
  .hero-run.is-flat .hero__stat{position:relative; right:auto; left:auto; top:auto; bottom:auto; margin:32px 20px 0; align-items:flex-start; text-align:left}
  .hero-run.is-flat .stat__lab{max-width:none}
  .hero-run.is-flat .chapter{position:relative; inset:auto; height:auto; min-height:0; padding:56px 0 0; background:var(--navy); display:block}
  .hero-run.is-flat .chapter__photo{position:relative; inset:auto; height:64svw; min-height:240px; overflow:hidden}
  .hero-run.is-flat .chapter__bg{position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%; transform:none}
  .hero-run.is-flat .chapter__bg img{object-position:50% 50%}
  .hero-run.is-flat .chapter__fade{display:none}
  .hero-run.is-flat .chapter--right{padding-left:0; padding-right:0}
  .hero-run.is-flat .chapter__copy{position:relative; max-width:none; padding:32px 20px 0}
  .hero-run.is-flat .chapter--right .chapter__copy,.hero-run.is-flat .chapter__body,.hero-run.is-flat .chapter--right .chapter__body{max-width:none}
  .hero-run.is-flat .feat{position:relative; inset:auto; pointer-events:auto; padding:28px 20px 48px}
  .hero-run.is-flat .feat__dial,.hero-run.is-flat .feat__disc,.hero-run.is-flat .feat__dots,.hero-run.is-flat .feat__ring,.hero-run.is-flat .feat__img{display:none}
  .hero-run.is-flat .feat__text{position:relative; left:auto; top:auto; width:auto}
  .hero-run.is-flat .feat__item{position:relative; visibility:visible; padding:16px 0; border-top:1px solid rgba(247,245,240,.14)}
  .hero-run.is-flat .feat__item:last-child{border-bottom:1px solid rgba(247,245,240,.14)}
  .hero-run.is-flat .feat__name{white-space:normal}
  .hero-run.is-flat .feat__name .ln i{transform:none}
  .hero-run.is-flat .feat__line{opacity:1; max-width:none}
  .hero-run.is-flat .chapter:last-of-type{padding-bottom:0}
}

/* ------------------------------------------------------- the enquiry sheet
   The client asked not to have to go looking for the form (14 Oct, via
   Maham). It opens over whatever is being read, from the right, where the
   button that opens it sits. The Development page's home sheet is the same
   gesture; this reuses it rather than introducing a second kind of panel. */
.ask{position:fixed; inset:0; z-index:70}
.ask[hidden]{display:none}
.ask__scrim{position:absolute; inset:0; background:rgba(6,13,22,.55); opacity:0; backdrop-filter:blur(2px)}
.ask__sheet{
  position:absolute; top:0; right:0; bottom:0; width:min(560px, 92vw);
  display:flex; flex-direction:column; background:var(--navy); color:var(--paper);
  box-shadow:-30px 0 80px rgba(6,13,22,.4); transform:translateX(100%);
}
.ask__in{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(76px,11svh,118px) clamp(24px,3.6vw,70px) clamp(32px,5svh,54px);
}
.ask__close{
  position:absolute; z-index:2; top:calc(var(--hdr-mid) + var(--hdr-shift, 0px)); transform:translateY(-50%);
  right:clamp(24px,3.6vw,70px); margin:0; padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--f-body); font-weight:500; font-size:clamp(13px,.83vw,16px);
  letter-spacing:.06em; text-transform:uppercase; color:var(--sand);
  transition:color .3s var(--e-out);
}
.ask__close:hover{color:var(--paper)}
.ask__title{
  margin:0; font-family:var(--f-display); font-weight:200;
  font-size:clamp(30px,2.6vw,50px); line-height:1.1; letter-spacing:-.02em; color:var(--paper);
}
.ask__title .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.ask__title .ln i{display:block; font-style:normal}
.ask__intro{
  margin:clamp(16px,2.4svh,26px) 0 0; max-width:46ch;
  font-family:var(--f-body); font-weight:300; font-size:16px; line-height:1.6; color:rgba(247,245,240,.76);
}
.ask__form{margin-top:clamp(26px,4svh,41px)}
.ask__note{
  margin:clamp(20px,3svh,32px) 0 0; max-width:52ch;
  font-family:var(--f-body); font-weight:300; font-size:13px; line-height:1.7; color:rgba(247,245,240,.52);
}
/* the sheet is Navy, so the fields take the dark treatment the home panel uses */
.ask__form .enq__label{color:rgba(247,245,240,.62)}
.ask__form input,.ask__form select,.ask__form textarea{color:var(--paper); border-bottom-color:rgba(247,245,240,.28)}
.ask__form input:focus,.ask__form select:focus,.ask__form textarea:focus{border-bottom-color:var(--sand)}
.ask__form .enq__sel::after{border-right-color:var(--sand); border-bottom-color:var(--sand)}
.ask__form .cta{border-color:var(--navy-line); color:var(--sand)}
.ask__form .cta:hover{background:rgba(199,176,138,.08); border-color:var(--sand)}
/* nothing behind the sheet should scroll while it is open */
html.ask-open, html.ask-open body{overflow:hidden}

@media (max-width:900px){
  .ask__sheet{width:100%; box-shadow:none}
  .ask__in{padding:clamp(64px,9svh,92px) 20px 32px}
  .ask__close{right:20px}
}
/* The sheet takes focus when it opens, so it must not draw a browser outline;
   its controls keep one, in the brand's own colour, for keyboard users only. */
.ask__sheet:focus{outline:none}
.ask :focus-visible{outline:2px solid var(--sand); outline-offset:3px; border-radius:2px}

/* ------------------------------------------- the headline in the panel
   With the welcome gone the headline leads the panel instead of standing
   over the sky (the user, 20 Oct 2026). It takes the weight the supporting
   line used to carry, and that line drops to a reading size beneath it. */
.hero__head{
  margin:clamp(12px,1.8svh,20px) 0 0; max-width:364px;
  font-family:var(--f-display); font-weight:200;
  font-size:clamp(30px,2.57vw,49px); line-height:1.1; letter-spacing:-.026em; color:var(--white);
}
.hero__head .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.hero__head .ln i{display:block; font-style:normal}
.js .hero__head .ln i{transform:translateY(112%)}
.hero__intro--sub{
  margin-top:clamp(14px,2.1svh,24px);
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(15px,1.04vw,17px); line-height:1.62; letter-spacing:0;
  color:rgba(247,245,240,.78);
}
@media (prefers-reduced-motion:reduce){ .js .hero__head .ln i{transform:none !important} }
@media (max-width:900px){
  .hero__head{font-size:clamp(28px,8.2vw,38px)}
  .hero__intro--sub{font-size:15px}
}

/* A hero panel with no introduction sizes to its headline rather than holding
   the full box open. The designed height assumes eyebrow, headline and
   paragraph; with only a headline the rest read as a gap (the user, 20 Oct
   2026, of the Gallery). The page still wants its copy: this stops the
   composition breaking while that is outstanding. */
.panel--sand.panel--tight{
  height:auto; min-height:clamp(168px,21svh,232px);
  padding-top:clamp(34px,5.2svh,56px); padding-bottom:clamp(34px,5.2svh,56px);
  justify-content:center;
}
.panel--sand.panel--tight .panel__title{margin-top:0}
@media (max-width:900px){
  .panel--sand.panel--tight{min-height:0; padding-top:28px; padding-bottom:28px}
}

/* --------------------------------------------------- the gallery's opening
   A band of the gallery's own pictures drifting sideways, instead of a still
   photograph with an empty panel over it (the user, 20 Oct 2026). It stops
   short of the full screen so the grid shows underneath and the page reads
   as a gallery at once. */
.gstrip{
  position:relative; height:72svh; min-height:420px; overflow:hidden;
  background:var(--navy-deep); isolation:isolate;
}
.gstrip__rail{position:absolute; inset:0; display:flex; width:max-content; will-change:transform}
.gstrip__run{display:flex; flex:none}
.gstrip__cell{
  position:relative; flex:none; height:72svh; min-height:420px; width:clamp(260px,32vw,520px);
  margin:0; padding:0; border:0; background:none; cursor:pointer; overflow:hidden;
}
.gstrip__cell + .gstrip__cell{margin-left:clamp(10px,1.1vw,20px)}
.gstrip__run + .gstrip__run{margin-left:clamp(10px,1.1vw,20px)}
.gstrip__img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform .9s var(--e-out), filter .6s var(--e-out)}
.gstrip__cell:hover .gstrip__img{transform:scale(1.06)}
/* the name stays out of the way until the picture is pointed at */
.gstrip__tag{
  position:absolute; left:0; right:0; bottom:0; padding:18px clamp(14px,1.2vw,22px);
  display:block; text-align:left;
  font-family:var(--f-body); font-weight:400; font-size:13px; letter-spacing:.04em;
  color:var(--paper); opacity:0; transform:translateY(8px);
  background:linear-gradient(to top, rgba(6,13,22,.78), rgba(6,13,22,0));
  transition:opacity .4s var(--e-out), transform .5s var(--e-out);
}
.gstrip__cell:hover .gstrip__tag,.gstrip__cell:focus-visible .gstrip__tag{opacity:1; transform:translateY(0)}
.gstrip__cell:focus-visible{outline:2px solid var(--sand); outline-offset:-4px}
/* the headline needs a ground to sit on, and the band needs a bottom edge */
/* Three jobs: a ground for the headline at the left, a foot to the band, and
   a dark top so the fixed header keeps its contrast whatever picture happens
   to be passing under it. The pictures vary from a night lake to a white
   facade, so neither white nor ink would be safe on its own. */
.gstrip__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, rgba(6,13,22,.82) 0%, rgba(6,13,22,.46) 30%, rgba(6,13,22,.06) 58%, rgba(6,13,22,0) 72%),
             linear-gradient(to top, rgba(6,13,22,.6) 0%, rgba(6,13,22,0) 34%),
             linear-gradient(to bottom, rgba(6,13,22,.52) 0%, rgba(6,13,22,.12) 14%, rgba(6,13,22,0) 24%);
}
/* The mark sits on the same line as the hamburger and the header row, which
   is what --hdr-mid is for, so all three agree on this page as on every
   other. */
.gstrip__logo{
  position:absolute; z-index:3; left:50%;
  top:calc(var(--hdr-mid) + var(--hdr-shift, 0px)); transform:translate(-50%,-50%);
  width:clamp(150px,10.69vw,205px); color:var(--paper);
}
.gstrip__logo svg{display:block; width:100%; height:auto}
.js .gstrip__logo{opacity:0}
@media (prefers-reduced-motion:reduce){ .js .gstrip__logo{opacity:1 !important} }

.gstrip__head{
  position:absolute; z-index:2; pointer-events:none;
  left:clamp(24px,6.35vw,122px); bottom:clamp(36px,6.4svh,70px);
  display:flex; align-items:flex-end; gap:clamp(16px,1.6vw,30px);
}
.gstrip__title{
  margin:0; font-family:var(--f-display); font-weight:200;
  font-size:clamp(40px,5.2vw,100px); line-height:.96; letter-spacing:-.028em; color:var(--paper);
}
.gstrip__title .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.gstrip__title .ln i{display:block; font-style:normal}
.js .gstrip__title .ln i{transform:translateY(112%)}
@media (prefers-reduced-motion:reduce){
  .js .gstrip__title .ln i{transform:none !important}
}
@media (max-width:900px){
  .gstrip,.gstrip__cell{height:54svh; min-height:320px}
  .gstrip__cell{width:clamp(200px,62vw,320px)}
  .gstrip__head{left:20px; right:20px; bottom:26px}
  .gstrip__title{font-size:clamp(34px,11vw,52px)}
}

/* ----------------------------------------------- the gallery's title band
   The page states its name and gets out of the way: the pictures are the
   content (the user, 20 Oct 2026). A band, not a screen, so the first row is
   already in view. The ground is Paper, so the mark and the fixed header
   take ink here. */
.ghead{
  position:relative; background:var(--paper); color:var(--ink);
  padding:calc(var(--hdr-mid) + clamp(74px,11svh,128px)) clamp(24px,6.35vw,122px) clamp(36px,6svh,66px);
}
.ghead__logo{
  position:absolute; z-index:3; left:50%;
  top:calc(var(--hdr-mid) + var(--hdr-shift, 0px)); transform:translate(-50%,-50%);
  width:clamp(150px,10.69vw,205px); color:var(--ink);
}
.ghead__logo svg{display:block; width:100%; height:auto}
.js .ghead__logo{opacity:0}
.ghead__title{
  margin:0; font-family:var(--f-display); font-weight:200;
  font-size:clamp(44px,6.5vw,126px); line-height:.94; letter-spacing:-.03em; color:var(--ink);
}
.ghead__title .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.ghead__title .ln i{display:block; font-style:normal}
.js .ghead__title .ln i{transform:translateY(112%)}
@media (prefers-reduced-motion:reduce){
  .js .ghead__title .ln i{transform:none !important}
  .js .ghead__logo{opacity:1 !important}
}
@media (max-width:900px){
  .ghead{padding:calc(var(--hdr-mid) + 64px) 20px 26px}
  .ghead__title{font-size:clamp(40px,13vw,62px)}
}

/* ----------------------------------------------------- the elastic grid
   The tiles answer the scroll instead of sitting still: columns travel at
   slightly different rates so the grid reads as woven rather than ruled, and
   a fast flick compresses them a little and lets them settle. The offsets
   are small by design, a few tens of pixels, because the grid's proportions
   are the composition and this should only give them life. */
.gal__item{will-change:transform}
.gal__fig{will-change:transform}