/* ============================================================
   HELIX 50 — Alfreds Way, Barking
   ============================================================ */

:root{
  --navy-900:#070D18;
  --navy-800:#0B1322;
  --navy-700:#101B30;
  --mist:#DCD9E3;              /* the gallery's ground — a brand tone, it is
                                  also the fill of newmark.svg */
  --ink:#0D1323;
  --yellow:#F2EA57;
  --mint:#9DD9CF;
  --green:#C3E6A4;
  --paper:#EDEBF2;
  --white:#fff;
  --mute:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.14);

  --wrap:1400px;
  --pad:clamp(20px,4vw,64px);

  /* hero geometry — the aerial plate hangs from the unit’s apron line, so the
     shed always lands on the floor of the hero and the sky fills the top.
     The plate is 1 : 0.9028 (w:h); inside it the skyline sits at 26% and the
     apron at 73% — 47% of its height, i.e. 42.43% of its WIDTH, apart. */
  --img-w:max(100vw,1180px);   /* mirrors .hero__site width / min-width */
  --apron-in-img:73%;          /* the unit’s apron within hero-site.webp */
  /* the plate is full-bleed and seated on the hero floor, and the hero grows
     tall enough to hold the whole photo — nothing is cropped off the bottom */
  --plate-h:calc(.9028 * var(--img-w));            /* plate is 1 : 0.9028   */
  --hero-h:max(100svh, 620px, var(--plate-h));
  --skyline:calc(var(--hero-h) - .74 * var(--plate-h));
  --logo-w:min(64vw,760px,76svh);  /* wordmark: 3.107 : 1 (w:h) */
  --hero-scroll:130svh;        /* how far the hero stays pinned while it plays */

  --ease:cubic-bezier(.22,.85,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* the header is fixed, so anchors stop short of the section they target */
section[id]{scroll-margin-top:clamp(86px,9vh,112px)}
.hero{scroll-margin-top:0}
body{
  margin:0;
  background:var(--navy-900);
  color:var(--white);
  font-family:"indivisible",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--yellow);color:var(--ink);padding:10px 16px;border-radius:4px}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;border-radius:999px;
  font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--yellow);color:var(--ink)}
.btn--solid:hover{background:#fff}
.btn--ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn--ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.btn--sm{padding:9px 20px;font-size:.72rem}

/* ── header ────────────────────────────────────────────── */
.head{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--pad);
  transform:translateY(-100%);
  background:rgba(8,14,26,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:transform .45s var(--ease),border-color .45s;
}
.head.is-on{transform:none;border-bottom-color:var(--line)}
.head__logo img{width:112px}
.head__nav{display:flex;align-items:center;gap:clamp(16px,2vw,32px)}
.head__nav a{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);transition:color .25s}
.head__nav a:hover{color:var(--white)}
.head__nav .btn{color:var(--ink)}
.head__nav .btn:hover{color:var(--ink)}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:transform .3s var(--ease),opacity .2s}
.burger.is-on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-on span:nth-child(2){opacity:0}
.burger.is-on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ══ HERO ══════════════════════════════════════════════ */
.hero{
  --t0:0;--ta:0;--tb:0;--tc:0;     /* parallax phases, fed by main.js */
  position:relative;height:var(--hero-h);border-bottom:3px solid var(--yellow);
}
.hero__pin{
  position:relative;
  height:100%;                  /* the hero's content box, clear of its rule */
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  isolation:isolate;
}

.hero__sky{
  position:absolute;inset:0;z-index:-3;
  /* the sky lags the page rather than leading it, so nothing is uncovered */
  transform:translateY(calc(var(--tb) * 6svh)) scale(1.06);will-change:transform;
  background:url("../img/hero-sky.jpg") center top/cover no-repeat,
             linear-gradient(#0A1030,#1B1C3C 55%,#2A2440);
}
/* the plate sits full-bleed on the hero floor, shown end to end */
.hero__site{
  position:absolute;left:50%;bottom:0;z-index:-2;
  width:100%;min-width:1180px;height:auto;
  transform:translate(-50%, calc(var(--tb) * 11svh));will-change:transform;
}
/* soft join between sky plate and photo + darkening for legibility */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    /* halo that lifts the wordmark off the lit skyline */
    radial-gradient(64% 46% at 50% var(--skyline),rgba(6,11,22,.78),rgba(6,11,22,0) 70%),
    linear-gradient(180deg,rgba(7,13,24,.55) 0%,rgba(7,13,24,.18) 13%,rgba(7,13,24,0) 28%),
    linear-gradient(90deg,rgba(7,13,24,.5) 0%,rgba(7,13,24,0) 34%),
    linear-gradient(270deg,rgba(7,13,24,.5) 0%,rgba(7,13,24,0) 34%);
}
/* just enough hem to seat the foot rail and hand over to the next section */
.hero__hem{
  position:absolute;inset:auto 0 0 0;z-index:-1;height:22vh;
  background:linear-gradient(180deg,rgba(7,13,24,0),rgba(7,13,24,.42) 58%,rgba(7,13,24,.9));
}

/* top rail */
.hero__rail{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.5vw,40px);
  padding:clamp(22px,3.4vh,40px) var(--pad) 0;
  font-size:clamp(.6rem,.78vw,.75rem);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
.hero__rail i{flex:1;height:1px;background:var(--yellow);opacity:.85;max-width:220px}

/* stage: the wordmark, centred and straddling the skyline */
.hero__stage{
  position:absolute;z-index:3;left:0;right:0;top:var(--skyline);
  display:flex;justify-content:center;
  padding:0 var(--pad);
  /* the wordmark leads: it zooms out on its own, and only then does the rest
     of the sequence start moving */
  transform:translateY(calc(var(--ta) * -78svh)) scale(calc(1 - var(--t0) * .36));
  transform-origin:50% 42%;will-change:transform;
}
.hero__logo{
  /* pulled up by 58% of its own height so the wordmark’s built-in fade
     dissolves into the city lights along the skyline */
  width:var(--logo-w);
  margin-top:calc(var(--logo-w) * -.1867);
}
.hero__logo img{width:100%;filter:drop-shadow(0 18px 44px rgba(0,0,0,.55))}

/* everything the visitor must see without scrolling sits in this layer, which
   is exactly one screen tall however far the plate runs below it */
.hero__first{
  position:absolute;inset:0 0 auto 0;height:100svh;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  pointer-events:none;
  transform:translateY(calc(var(--tc) * -22svh));
  opacity:calc(1 - var(--tc) * .8);will-change:transform,opacity;
}
.hero__first > *{pointer-events:auto}

/* copy: sits low and right, clear of the shed’s lit roof */
.hero__copy{
  position:relative;z-index:1;
  align-self:flex-end;text-align:right;max-width:min(560px,88vw);
  margin-bottom:clamp(10px,2.2vh,26px);
  padding:0 var(--pad);
}
.hero__copy h1{
  font-size:clamp(1.6rem,3vw,2.75rem);
  font-weight:300;line-height:1.16;letter-spacing:-.01em;
}
.hero__copy h1 b{font-weight:700}
.hero__size{
  margin-top:clamp(12px,1.8vh,20px);
  font-size:clamp(1.1rem,2.05vw,1.85rem);
  font-weight:300;line-height:1.3;
}
.hero__size span{color:var(--mute)}
.hero__size b{font-weight:700}
.hero__cta{margin-top:clamp(16px,2.6vh,30px);display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}

/* bottom rail */
.hero__foot{
  position:relative;z-index:1;
  /* equal side tracks, so the scroll cue is truly centred whatever the
     address and the url measure */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:0 var(--pad) clamp(20px,3.2vh,36px);
  font-size:clamp(.62rem,.78vw,.76rem);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
}
.hero__foot > :last-child{justify-self:end}
.hero__foot b{font-weight:700}
.hero__foot a:last-child{font-weight:600;transition:color .25s}
.hero__foot a:last-child:hover{color:var(--yellow)}
.hero__scroll{width:22px;height:36px;border:1px solid rgba(255,255,255,.4);border-radius:12px;display:grid;place-items:start center;padding-top:6px}
.hero__scroll span{width:2px;height:7px;background:var(--yellow);border-radius:2px;animation:dropp 1.9s var(--ease) infinite}
@keyframes dropp{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(14px);opacity:0}}

/* ══ HERO SCROLL STAGE (inactive) ══════════════════════
   Held in reserve.  main.js no longer adds .has-heroscroll, because the hero
   now stands at the plate's own height and shows the photo end to end.

   With JS (and motion allowed) the hero holds still for --hero-scroll while
   the plate climbs out of the fold, wipes up over the standing copy and then
   shoulders the wordmark off the top of the screen.  --p is scroll progress
   through the stage, --t the wordmark's own exit, both fed by main.js. */
.has-heroscroll .hero{
  --p:0;--t:0;--rise:100svh;
  height:calc(100svh + var(--hero-scroll));
  min-height:calc(620px + var(--hero-scroll));
}
.has-heroscroll .hero__pin{position:sticky;top:0}

/* the plate rides up from below the fold — and passes OVER the copy */
.has-heroscroll .hero__site{
  z-index:2;will-change:transform;
  transform:translate(-50%,calc(-1 * var(--apron-in-img) + var(--rise) * (1 - var(--p))));
}
/* the hem only arrives with the plate, so the copy stays clean at the top */
.has-heroscroll .hero__hem{z-index:2;opacity:var(--p)}
/* sky drifts at its own, slower pace */
.has-heroscroll .hero__sky{transform:translateY(calc(var(--p) * -5svh)) scale(1.07)}
/* the halo travels with the wordmark instead of sitting on the skyline */
.has-heroscroll .hero__scrim{
  background:
    linear-gradient(180deg,rgba(7,13,24,.55) 0%,rgba(7,13,24,.18) 13%,rgba(7,13,24,0) 28%),
    linear-gradient(90deg,rgba(7,13,24,.5) 0%,rgba(7,13,24,0) 34%),
    linear-gradient(270deg,rgba(7,13,24,.5) 0%,rgba(7,13,24,0) 34%);
}
.has-heroscroll .hero__stage{
  top:50%;will-change:transform;
  transform:translateY(calc(-50% - var(--t) * (50svh + 50% + 32px)));
}
.has-heroscroll .hero__logo{margin-top:0}
.has-heroscroll .hero__stage::before{
  content:"";position:absolute;z-index:-1;
  left:50%;top:50%;width:min(150%,1400px);height:340%;
  transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(6,11,22,.72),rgba(6,11,22,0) 70%);
}

/* ══ AERIAL ════════════════════════════════════════════
   The brochure spread rebuilt: the night aerial full-bleed, the headline and
   standfirst over its sky, and along the floor the occupier key — eight marks
   and the 50 dial seated on a ruled scale.  The marks and the dial lift up
   from below the bottom edge as the section arrives. */
.aer{
  --aer-rule:clamp(9px,.8vh,14px);     /* the tie line's height off the floor */
  --aer-tick:clamp(6px,.6vh,11px);     /* how far the ticks rise off the line */
  --aer-badge:clamp(15px,1.15vw,22px); /* the numbered badges on the line     */
  --aer-tie:linear-gradient(90deg,#90d5d6,#a8dbc1 50%,#f4f081);
  position:relative;overflow:hidden;
  background:var(--navy-900);
  aspect-ratio:2500 / 1767;            /* the plate's own ratio — no crop   */
  min-height:min(680px,100svh);
}
.aer__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 74%}
.aer__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(7,13,24,.66) 0%,rgba(7,13,24,.2) 20%,rgba(7,13,24,0) 38%),
    linear-gradient(90deg,rgba(7,13,24,.52) 0%,rgba(7,13,24,0) 48%),
    linear-gradient(0deg,rgba(7,13,24,.94) 0%,rgba(7,13,24,.38) 13%,rgba(7,13,24,0) 30%);
}

/* headline + standfirst, over the sky */
.aer__copy{
  position:absolute;inset:0 0 auto 0;z-index:3;
  padding:clamp(30px,6vh,74px) var(--pad) 0;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,5vw,72px);align-items:start;min-width:0;
}
.aer__copy .h-display{max-width:none}
.aer__lede{max-width:34ch;font-size:clamp(.84rem,1vw,1rem);color:rgba(255,255,255,.86);gap:10px}

/* Occupier key along the floor.  Four marks either side of the dial, each one
   centred over its number on the scale.  Every mark is sized by WIDTH — as a
   share of its column, measured off the spread — because the marks range from
   a near-square badge to a 6:1 wordmark and a shared height renders them at
   wildly different optical sizes. */
.aer__strip{position:absolute;inset:auto 0 0 0;z-index:3;padding:0 clamp(12px,1.6vw,30px) var(--aer-rule)}
.aer__key{position:relative;z-index:2;display:flex;align-items:flex-end}
.aer__group{flex:1 1 0;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;justify-items:center}
.aer__group li{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.5vh,18px);width:100%;min-width:0}
.aer__group img{
  width:var(--w,70%);max-width:100%;height:auto;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.6));
}
/* the key number: dark digit on a square badge in its mark's colour, seated
   on the tie line exactly like the markers out on the aerial */
.aer__group b{
  display:grid;place-items:center;
  width:var(--aer-badge);height:var(--aer-badge);
  margin-bottom:calc(-.5 * var(--aer-badge));
  background:var(--c,var(--mint));color:var(--ink);
  font-size:calc(var(--aer-badge) * .58);font-weight:700;line-height:1;
}

/* the 50 dial holds the middle, its flat base on the bottom edge and the tie
   line running on behind it */
.aer__dial{
  flex:none;width:clamp(210px,31vw,600px);height:auto;
  margin-bottom:calc(-1 * var(--aer-rule));
}

/* the tie line: full bleed, ticks rising off it, carrying the marks' gradient.
   Drawn with a mask so the line and its ticks both take the gradient. */
.aer__ruler{
  position:absolute;left:0;right:0;bottom:var(--aer-rule);z-index:1;
  height:var(--aer-tick);background:var(--aer-tie);
  -webkit-mask:
    linear-gradient(#000,#000) 0 100%/100% 1px no-repeat,
    repeating-linear-gradient(90deg,#000 0 1px,transparent 1px clamp(9px,.95vw,18px))
      0 100%/100% 100% no-repeat;
  mask:
    linear-gradient(#000,#000) 0 100%/100% 1px no-repeat,
    repeating-linear-gradient(90deg,#000 0 1px,transparent 1px clamp(9px,.95vw,18px))
      0 100%/100% 100% no-repeat;
}

/* lift: the marks and the dial rise in from under the bottom edge */
.aer__strip.reveal{opacity:1;transform:none;transition:none}
.lift{
  opacity:0;transform:translateY(calc(100% + var(--aer-rule) + var(--aer-badge) + 24px));
  transition:opacity .7s var(--ease),transform .95s var(--ease);
  transition-delay:calc(var(--i,0) * 110ms);
}
.aer__strip.is-in .lift{opacity:1;transform:none}
.aer__strip .aer__ruler{opacity:0;transition:opacity .9s var(--ease) .12s}
.aer__strip.is-in .aer__ruler{opacity:1}

/* ══ SECTIONS ══════════════════════════════════════════ */
.sec{position:relative;padding:clamp(72px,11vh,150px) 0}
.sec--dark{background:var(--navy-900)}
.sec--mist{background:var(--mist);color:var(--ink)}
/* the section rule has to darken against a light ground */
.sec--mist.sec--rule::before{background:rgba(13,19,35,.16)}
.sec--rule::before{content:"";position:absolute;inset:0 var(--pad) auto;height:1px;background:var(--line)}
.sec--light{background:var(--paper);color:var(--ink)}
.sec--tight{padding-block:clamp(64px,9vh,120px)}

.sec--photo{background:var(--navy-900);overflow:hidden}
.sec__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.sec__bg--right{object-position:70% center;opacity:.3}
.sec--photo .wrap{position:relative}
.sec--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--navy-900),rgba(7,13,24,.55) 30%,rgba(7,13,24,.75) 70%,var(--navy-900))}
.sec--photo .wrap{z-index:2}

.h-display{
  font-size:clamp(1.9rem,4.4vw,3.7rem);
  font-weight:300;line-height:1.1;letter-spacing:-.02em;
}
.h-display em{font-style:italic;font-weight:300;color:var(--mint)}
.h-display--ink em{color:#3E8F86}

.lede{display:grid;gap:14px;color:var(--mute);font-size:clamp(.95rem,1.15vw,1.06rem);max-width:52ch}
.lede--ink{color:rgba(13,19,35,.72)}
.lede--slim{max-width:44ch;margin-top:clamp(20px,3vh,34px)}

.grid-2{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}

.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:16px;
}
.note{font-size:.78rem;color:var(--mute);margin-top:14px}
.sec--light .note{color:rgba(13,19,35,.55)}

/* stats */
.stats{
  margin-top:clamp(44px,7vh,90px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--line);background-clip:content-box;
}
.stat{background:var(--navy-900);padding:clamp(20px,2.6vw,34px) clamp(14px,1.6vw,24px);
  border-block:1px solid var(--line)}
.stat b{display:block;font-size:clamp(1.5rem,2.6vw,2.35rem);font-weight:500;letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--mint),var(--green) 45%,var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:6px;font-size:.78rem;letter-spacing:.06em;color:var(--mute)}

/* ── accommodation ──────────────────────────────────────
   Half the width carries the headline, the copy, the schedule and the
   twelve-point key; the other half is the site plan, whose callouts are the
   same numbers as the key. */
.acc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4.5vw,72px);align-items:start}
.acc__main{display:grid;gap:clamp(26px,3.6vh,44px);min-width:0}
/* the key and the tie run the full width beneath both columns, four across */
.acc__key,.acc__tie{grid-column:1 / -1}
.spec__list.acc__key{grid-template-columns:repeat(4,minmax(0,1fr))}

/* the standfirst, hung off a gradient bar as on the spread */
.acc__copy{
  display:grid;gap:14px;max-width:46ch;
  padding-left:clamp(18px,1.8vw,30px);
  border-left:1px solid var(--line);
  color:var(--mute);font-size:clamp(.9rem,1.05vw,1rem);position:relative;
}
.acc__copy::before{
  content:"";position:absolute;left:-2px;top:0;width:3px;height:min(100%,132px);
  border-radius:2px;background:linear-gradient(180deg,#90d5d6,#a8dbc1 50%,#f4f081);
}

/* the tie line closing the column, in the marks' gradient */
.acc__tie{height:6px;border-radius:3px;background:linear-gradient(90deg,#90d5d6,#a8dbc1 50%,#f4f081)}

/* the plan sits on its own panel, as it is drawn for a dark ground.  It stays
   in normal flow — the section scrolls as one, with nothing pinned. */
.acc__plan{
  background:linear-gradient(160deg,var(--navy-700),var(--navy-800));
  border:1px solid var(--line);border-radius:clamp(14px,1.4vw,22px);
  padding:clamp(16px,2vw,34px);
}
.acc__plan img{width:100%;height:auto;transition:transform .5s var(--ease)}
/* opening the plan full screen */
.acc__zoom{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  position:relative;overflow:hidden;border-radius:inherit;color:inherit;
}
.acc__zoom span{
  position:absolute;left:50%;bottom:clamp(10px,1.6vw,20px);
  transform:translateX(-50%) translateY(8px);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:9px 18px;border-radius:999px;
  background:rgba(8,14,26,.82);backdrop-filter:blur(8px);border:1px solid var(--line);
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--white);
  opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.acc__zoom span svg{width:15px;height:15px;fill:none;stroke:var(--yellow);stroke-width:2;stroke-linecap:round}
.acc__zoom:hover span,.acc__zoom:focus-visible span{opacity:1;transform:translateX(-50%) translateY(0)}
.acc__zoom:hover img{transform:scale(1.02)}
.acc__zoom:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}

/* the plan is fine line art, so full screen it wants room rather than a cap */
.lbox--plan img{max-width:min(96vw,1200px);max-height:88vh;border-radius:10px}

.spec__table table{font-size:.95rem}
.spec__table th{
  text-align:left;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);padding:0 0 10px;border-bottom:1px solid var(--line);
}
.spec__table th+th,.spec__table td+td{text-align:right}
.spec__table td{padding:14px 0;border-bottom:1px solid var(--line)}
.spec__table .is-total td{font-weight:700;color:var(--yellow);border-bottom:0}

/* the key: badge and label, no boxes — the spread sets them plainly */
.spec__list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vh,30px) clamp(20px,2.4vw,44px);
}
.spec__list li{
  display:flex;align-items:center;gap:clamp(9px,.8vw,13px);
  font-size:clamp(.72rem,.8vw,.82rem);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.35;
}
.spec__list i{
  display:grid;place-items:center;flex:none;
  /* square edges; min-width so the two-digit badges widen rather than crop */
  min-width:clamp(17px,1.35vw,23px);height:clamp(17px,1.35vw,23px);padding:0 4px;
  font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:0;
  color:var(--ink);background:var(--yellow);
}

/* gallery */
.gal{
  margin-top:clamp(36px,5vh,64px);
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(130px,14vw,190px);gap:12px;
}
.gal__item{position:relative;overflow:hidden;border-radius:6px;background:rgba(13,19,35,.09);cursor:zoom-in;margin:0}
.gal__item:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
/* the same zoom cue the site plan carries */
.gal__item::after{
  content:"";position:absolute;top:12px;right:12px;width:30px;height:30px;
  border-radius:50%;background:rgba(8,14,26,.7) no-repeat center/13px 13px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2EA57' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E");
  backdrop-filter:blur(6px);border:1px solid var(--line);
  opacity:0;transform:scale(.85);transition:.3s var(--ease);
}
.gal__item:hover::after,.gal__item:focus-visible::after{opacity:1;transform:none}
/* explicit placement so the mosaic always fills — DOM order is
   aerial · entrance · reception · office · warehouse · docks       */
.gal__item:nth-of-type(1){grid-column:1/5;grid-row:1/3}
.gal__item:nth-of-type(2){grid-column:5/7;grid-row:1}
.gal__item:nth-of-type(3){grid-column:5/7;grid-row:2}
.gal__item:nth-of-type(4){grid-column:1/4;grid-row:3}
.gal__item:nth-of-type(5){grid-column:4/7;grid-row:3/5}
.gal__item:nth-of-type(6){grid-column:1/4;grid-row:4}
.gal__item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .4s}
.gal__item:hover img{transform:scale(1.06)}
.gal__item figcaption{
  position:absolute;inset:auto 0 0 0;padding:26px 16px 14px;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(transparent,rgba(7,13,24,.88));
  opacity:0;transform:translateY(8px);transition:.35s var(--ease);
}
.gal__item:hover figcaption{opacity:1;transform:none}

/* ── sustainability ─────────────────────────────────────
   The spread rebuilt: the gradient plate full-bleed under a faint rule
   pattern, the statement and the credential ticks down the left, the two
   cards top right, and the array bleeding out of the bottom-right corner. */
.esg{
  position:relative;overflow:hidden;isolation:isolate;
  color:var(--ink);background:#cfe3c8;
  padding:clamp(56px,7vh,104px) 0 clamp(60px,8vh,120px);
}
.esg__bg,.esg__lines{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.esg__bg{z-index:-3}
.esg__lines{z-index:-2;opacity:.5;object-position:right top}
/* the array sits in the corner and runs off both edges */
.esg__solar{
  position:absolute;z-index:-1;right:0;bottom:0;
  width:clamp(320px,47vw,760px);height:auto;pointer-events:none;
}

.esg__grid{
  position:relative;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(40px,7vh,110px) clamp(28px,4vw,64px);align-items:start;
}

/* the statement */
.esg__intro{grid-column:1;grid-row:1}
.esg__intro h2{
  max-width:13em;                     /* em, so it tracks the display size */
  font-size:clamp(1.5rem,2.6vw,2.5rem);font-weight:400;
  line-height:1.18;letter-spacing:-.015em;
}
.esg__intro h2 em{font-style:italic;font-weight:400}
.esg__intro p{
  margin-top:clamp(18px,2.4vh,30px);max-width:34ch;
  font-size:clamp(.86rem,1vw,.98rem);color:rgba(13,19,35,.72);
}

/* the two cards */
.esg__cards{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.esg__ev,.esg__savings{
  position:relative;margin:0;border-radius:clamp(8px,.9vw,14px);overflow:hidden;
  box-shadow:0 22px 60px rgba(13,19,35,.13);
}
/* each card is capped by a short gradient bar, inset from the corner */
.esg__ev::before,.esg__savings::before{
  content:"";position:absolute;z-index:2;border-radius:2px;
  left:clamp(12px,1.4vw,22px);top:clamp(10px,1.1vw,18px);
  width:min(56%,215px);height:clamp(6px,.62vw,9px);
}
.esg__ev::before{background:linear-gradient(90deg,var(--yellow) 12%,rgba(242,234,87,0))}
.esg__savings::before{background:linear-gradient(90deg,#7fd4d8 12%,rgba(127,212,216,0))}

/* a min-height rather than an aspect-ratio, so the card still stretches to
   match the savings card beside it.  The charger stands whole against a grey
   gradient, held to the right so the caption keeps the left. */
.esg__ev{
  background:linear-gradient(135deg,#aab0b4 0%,#8b9297 34%,#5f666c 68%,#3c4247 100%);
  min-height:clamp(220px,19vw,320px);display:grid;
}
.esg__ev img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:right bottom;
}
.esg__ev figcaption{
  align-self:end;position:relative;z-index:1;
  padding:clamp(16px,1.8vw,28px);max-width:62%;
  font-size:clamp(.95rem,1.35vw,1.35rem);font-weight:300;line-height:1.3;color:#fff;
  text-shadow:0 1px 14px rgba(30,34,39,.45);
}
.esg__ev figcaption b{font-weight:700}

.esg__savings{
  background:rgba(255,255,255,.8);backdrop-filter:blur(10px);
  padding:clamp(18px,2vw,30px);padding-top:clamp(26px,2.8vw,40px);
  display:flex;flex-direction:column;
}
.esg__savings h3{font-size:clamp(.98rem,1.35vw,1.35rem);font-weight:300;line-height:1.18}
.esg__savings h3 b{font-weight:700}
.esg__savings dl{margin:clamp(10px,1.2vh,16px) 0 0}
.esg__savings dl>div+div{
  margin-top:clamp(11px,1.5vh,18px);position:relative;
}
/* the arrow that steps you down the figures */
.esg__savings dl>div+div::before{
  content:"\2193";position:absolute;left:1px;top:calc(-1 * clamp(15px,1.8vh,21px));
  font-size:clamp(.8rem,.95vw,.95rem);line-height:1;color:#5ec4c9;
}
.esg__savings dt{font-size:clamp(.72rem,.85vw,.85rem);font-weight:700;color:#5ec4c9;margin-bottom:2px}
.esg__savings dd{margin:0;font-size:clamp(.78rem,.92vw,.94rem)}
.esg__note{margin-top:auto;padding-top:clamp(11px,1.4vh,18px);font-size:clamp(.6rem,.68vw,.68rem);color:var(--ink)}

/* the credential ticks */
.esg__ticks{
  grid-column:1;grid-row:2;align-self:end;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(4px,.6vh,8px) clamp(12px,1.6vw,28px);max-width:520px;
}
.esg__ticks li{
  display:flex;align-items:center;gap:clamp(12px,1.3vw,20px);
  padding:clamp(9px,1.2vh,15px) clamp(10px,1vw,16px);
  border-radius:6px;transition:background .3s var(--ease);
}
.esg__ticks li:hover{background:rgba(255,255,255,.55)}
.esg__ticks img{width:clamp(16px,1.35vw,21px);height:auto;flex:none}
.esg__ticks span{font-size:clamp(.64rem,.74vw,.76rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* ── location ───────────────────────────────────────────
   Headline and standfirst across the top, then the map and the tube diagram
   side by side, with the distance tables running underneath.  The diagram is
   the SVG core plus HTML labels pinned to each node's own y position, so the
   two can never drift apart. */
.loc__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.loc__head .lede{margin-top:0}

.loc__grid{
  margin-top:clamp(26px,3.5vh,44px);
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(26px,3.5vw,56px);align-items:start;
}

/* the map */
.loc__main{min-width:0;display:grid;align-content:start}
.loc__map{margin:0}
.loc__map #map{
  width:100%;aspect-ratio:4 / 3;border-radius:clamp(10px,1vw,16px);
  background:#0c1422;border:1px solid var(--line);overflow:hidden;
  display:grid;place-items:center;
}
/* the standing panel names the address until the tiles arrive, or if they never do */
.loc__map #map::after{
  content:"Alfreds Way, Barking IG11 9PG";
  padding:0 24px;text-align:center;font-size:.82rem;color:var(--mute);
}
.loc__map #map.is-ready::after{content:none}
.loc__map #map.is-failed::after{
  content:"Map unavailable — Alfreds Way, Barking IG11 9PG";
  padding:0 24px;text-align:center;font-size:.82rem;color:var(--mute);
}
.loc__map figcaption{
  margin-top:14px;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);
}

/* the tube diagram */
.tube{position:relative;--core:clamp(36px,3.4vw,48px);--lineL:.189;--lineR:.814}
.tube__into{
  margin:0 auto clamp(14px,2vh,22px);width:max-content;
  padding:7px 16px;border-radius:999px;background:#fff;color:var(--ink);
  font-size:clamp(.58rem,.66vw,.68rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translateY(-8px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.tube.is-in .tube__into{opacity:1;transform:none}

.tube__body{position:relative;width:var(--core);margin-inline:auto}
/* the core is wiped in from the top, so the lines appear to run south */
.tube__core{
  display:block;width:100%;height:auto;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 2.2s cubic-bezier(.4,0,.2,1);
}
.tube.is-in .tube__core{clip-path:inset(0 0 0 0)}

.tube__side{position:absolute;top:0;bottom:0}
.tube__side--l{right:calc(100% - var(--lineL) * var(--core) + clamp(11px,1vw,16px));text-align:right}
.tube__side--r{left:calc(var(--lineR) * var(--core) + clamp(11px,1vw,16px))}
.tube__side li{
  position:absolute;top:var(--y);
  font-size:clamp(.56rem,.66vw,.7rem);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.35;white-space:nowrap;
  opacity:0;transition:opacity .45s var(--ease),transform .45s var(--ease);
  transition-delay:var(--d);
}
/* the lists carry no flow content, so each label is anchored to the edge that
   faces its line — without this they all stack off the list's zero width */
.tube__side--l li{right:0;transform:translate(14px,-50%)}
.tube__side--r li{left:0;transform:translate(-14px,-50%)}
.tube.is-in .tube__side li{opacity:1;transform:translate(0,-50%)}

/* Barking is the one that matters */
.tube__side--r li.is-here{color:var(--white)}
/* the double arrow sits in the gap between the node and the name, so the
   station's own ring stays readable */
.tube__side--r li.is-here{padding-left:24px}
.tube__side--r li.is-here i{
  position:absolute;left:0;top:50%;
  width:16px;height:10px;transform:translateY(-50%);
  background:url("../img/barking-icon.svg") no-repeat center/contain;
}

/* distances */
.dist{margin-top:clamp(48px,7vh,96px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,40px)}
/* two lines' worth, so the three tables start on the same line whatever the
   headings do at a given width */
.dist .eyebrow{min-height:3.1em}
/* white throughout at a single weight, ruled off in yellow */
.dist .eyebrow{color:var(--white);font-weight:400}
.dist ul li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--yellow);font-size:.95rem}
.dist ul li span{color:var(--white)}
.dist ul li b{font-weight:400;white-space:nowrap}
.w3w{margin-top:clamp(24px,3.2vh,40px);display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase}
.w3w{color:var(--white)}
.w3w i{flex:1;height:1px;background:var(--yellow);min-width:40px}
.w3w b{color:var(--white);font-weight:600}

/* ── demographics ───────────────────────────────────────
   Full-bleed photograph, the statement top left, and the figures gathered
   bottom right: two frosted cards over three plain ones.  The gradient burst
   radiates out of the bottom-left corner. */
.dem{
  position:relative;overflow:hidden;isolation:isolate;
  height:100svh;min-height:620px;
  display:grid;align-items:stretch;background:var(--navy-900);
}
.dem__bg{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:center center}
.dem__scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,rgba(10,16,28,.82) 0%,rgba(10,16,28,.34) 26%,rgba(10,16,28,0) 46%),
    linear-gradient(180deg,rgba(10,16,28,.55) 0%,rgba(10,16,28,0) 26%),
    linear-gradient(0deg,rgba(10,16,28,.62) 0%,rgba(10,16,28,0) 34%);
}
.dem__burst{
  position:absolute;z-index:-1;left:0;bottom:0;
  width:clamp(260px,44vw,700px);height:auto;
  transform:translate(-13%,26%);opacity:.9;pointer-events:none;
}

.dem__grid{
  position:relative;align-self:stretch;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  align-content:space-between;
  padding-block:clamp(34px,5vh,68px);
}
.dem__intro{grid-column:1;grid-row:1;max-width:min(100%,520px)}
.dem__h{max-width:11em;font-size:clamp(1.6rem,2.9vw,2.7rem);line-height:1.12}
.dem__lede{
  margin-top:clamp(14px,2vh,24px);max-width:32ch;
  font-size:clamp(.8rem,.92vw,.95rem);line-height:1.5;color:rgba(255,255,255,.86);
}

/* the figures sit bottom right, under the statement */
.dem__figs{grid-column:2;grid-row:2;align-self:end;min-width:0}
.dem__src{
  text-align:right;margin-bottom:clamp(10px,1.4vh,16px);
  font-size:clamp(.58rem,.66vw,.68rem);font-weight:700;letter-spacing:.1em;color:var(--mute);
}

.dem__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.dem__card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(16px,1.7vw,26px);padding-bottom:clamp(26px,3vw,42px);
  border-radius:clamp(8px,.9vw,14px);
  background:rgba(255,255,255,.13);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);
}
/* the bar closing each card, in that card's colour */
.dem__card::after{
  content:"";position:absolute;left:clamp(18px,2vw,30px);right:clamp(18px,2vw,30px);
  bottom:clamp(14px,1.6vw,22px);height:clamp(6px,.62vw,9px);border-radius:2px;
  background:linear-gradient(90deg,var(--yellow) 8%,rgba(242,234,87,.15));
}
.dem__card--mint::after{background:linear-gradient(90deg,#8fd3d6 8%,rgba(143,211,214,.15))}
.dem__card b{
  display:block;font-size:clamp(1.5rem,2.7vw,2.5rem);font-weight:400;
  letter-spacing:-.02em;line-height:1;
}
.dem__card span{
  display:block;margin-top:clamp(10px,1.4vh,18px);
  font-size:clamp(.76rem,.9vw,.94rem);line-height:1.4;color:rgba(255,255,255,.88);
}

/* the three plain figures beneath */
.dem__small{
  margin-top:clamp(16px,2.2vh,30px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,32px);
  text-align:center;
}
.dem__small b{
  display:block;font-size:clamp(1.2rem,2.1vw,1.95rem);font-weight:400;
  letter-spacing:-.02em;line-height:1;
}
.dem__small span{
  display:block;margin-top:clamp(8px,1.1vh,14px);
  font-size:clamp(.68rem,.82vw,.86rem);line-height:1.4;color:rgba(255,255,255,.86);
}

/* the cards and figures rise in as the section arrives */
.dem__figs.reveal{opacity:1;transform:none;transition:none}
.dem__figs .lift{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 110ms);
}
.dem__figs.is-in .lift{opacity:1;transform:none}

/* contact */
/* full bleed, on the header's own horizontal padding */
.contact__in{width:100%;padding-inline:var(--pad)}
.contact__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:clamp(32px,5vh,60px);border-bottom:1px solid var(--line);margin-bottom:clamp(32px,5vh,60px)}
.contact__logo{width:clamp(180px,22vw,320px)}
.contact__head p{text-align:right;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;line-height:2}
.contact__head a:hover{color:var(--yellow)}
.agents{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px)}
.agent{display:grid;gap:3px;font-size:.92rem}
.agent b{color:var(--yellow);font-weight:600;margin-bottom:5px}
.agent a{color:var(--mute);transition:color .25s;word-break:break-word}
.agent a:hover{color:#fff}
.cta-bar{margin-top:clamp(40px,6vh,72px);display:flex;gap:12px;flex-wrap:wrap}

/* footer */
/* full bleed, on the header's own horizontal padding */
.foot{background:var(--navy-800);padding:clamp(36px,5vh,60px) var(--pad);border-top:1px solid var(--line)}
.foot__in{width:100%}
.foot__brand{width:clamp(130px,12vw,185px);height:auto;margin-bottom:clamp(18px,2.4vh,28px)}
/* the notice runs the full content width */
.foot__legal{font-size:.66rem;line-height:1.7;color:rgba(255,255,255,.4)}

/* lightbox */
.lbox{position:fixed;inset:0;z-index:300;background:rgba(5,9,17,.94);backdrop-filter:blur(6px);
  display:grid;place-items:center;gap:14px;padding:5vh 4vw;opacity:0;transition:opacity .3s}
/* .lbox's own display beats the UA's [hidden] rule, so the closed box would
   otherwise sit over the whole page as an invisible click-catcher */
.lbox[hidden]{display:none}
.lbox.is-on{opacity:1}
.lbox img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:6px}
.lbox p{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.lbox__x{position:absolute;top:20px;right:24px;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer}

/* stepping through the gallery; hidden for the single-image plan */
.lbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  display:none;place-items:center;width:52px;height:52px;border-radius:50%;
  background:rgba(8,14,26,.7);border:1px solid var(--line);backdrop-filter:blur(8px);
  cursor:pointer;transition:background .25s,border-color .25s;
}
.lbox--gal .lbox__nav{display:grid}
.lbox__nav svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lbox__nav:hover{background:rgba(8,14,26,.92);border-color:var(--yellow)}
.lbox__nav:hover svg{stroke:var(--yellow)}
.lbox__nav:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.lbox__nav--prev{left:clamp(10px,2vw,28px)}
.lbox__nav--next{right:clamp(10px,2vw,28px)}
@media (max-width:560px){
  .lbox__nav{width:42px;height:42px}
  .lbox__nav svg{width:18px;height:18px}
}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ══ RESPONSIVE ════════════════════════════════════════ */
@media (max-width:1100px){
  /* full-screen menu, centred on both axes, items fading up in sequence */
  .head__nav{
    position:fixed;inset:0;height:100svh;
    flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(4px,1.2vh,12px);padding:0 var(--pad);text-align:center;
    background:var(--navy-900);
    opacity:0;visibility:hidden;
    transition:opacity .4s var(--ease),visibility 0s linear .4s;
  }
  .head__nav.is-on{opacity:1;visibility:visible;transition-delay:0s,0s}
  .head__nav a{
    font-size:clamp(1.1rem,5vw,1.7rem);font-weight:300;letter-spacing:.08em;
    text-transform:uppercase;padding:8px 0;
    opacity:0;transform:translateY(16px);
    transition:opacity .45s var(--ease),transform .45s var(--ease),color .25s;
  }
  .head__nav.is-on a{opacity:1;transform:none}
  .head__nav.is-on a:nth-child(1){transition-delay:.08s}
  .head__nav.is-on a:nth-child(2){transition-delay:.13s}
  .head__nav.is-on a:nth-child(3){transition-delay:.18s}
  .head__nav.is-on a:nth-child(4){transition-delay:.23s}
  .head__nav.is-on a:nth-child(5){transition-delay:.28s}
  .head__nav.is-on a:nth-child(6){transition-delay:.33s}
  .head__nav.is-on a:nth-child(7){transition-delay:.38s}
  .head__nav.is-on a:nth-child(8){transition-delay:.45s}
  .head__nav .btn{
    margin-top:clamp(18px,3.4vh,34px);
    font-size:.8rem;padding:15px 34px;letter-spacing:.08em;
  }
  /* the logo and the burger stay above the overlay */
  .head__logo{position:relative;z-index:2}
  .burger{display:block;position:relative;z-index:2;margin-right:-8px}
  .head{transform:none;background:transparent;backdrop-filter:none}
  .head.is-on{background:rgba(8,14,26,.9);backdrop-filter:blur(14px)}
  .hero__rail{padding-top:74px}          /* clears the overlaid header */

  .stats{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:1fr}
  /* the spread folds to one column: statement, cards, then the ticks */
  .esg__grid{grid-template-columns:minmax(0,1fr);gap:clamp(30px,4.5vh,52px)}
  .esg__intro,.esg__cards,.esg__ticks{grid-column:auto;grid-row:auto}
  .esg__intro{max-width:none}
  .esg__ticks{align-self:auto;max-width:none}
  .esg__solar{width:min(70vw,520px);opacity:.85}
  .spec__list.acc__key{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* stacked, the plan reads straight after the copy it belongs to */
  .acc{grid-template-columns:minmax(0,1fr);gap:clamp(26px,3.6vh,44px)}
  .acc__main{display:contents}
  .acc h2,.acc__copy{order:-2}
  .acc__plan{order:-1}
  .dist{grid-template-columns:1fr 1fr}
  .loc__head{grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
  .loc__grid{grid-template-columns:minmax(0,1fr);gap:clamp(34px,5vh,56px)}
  .loc__map #map{aspect-ratio:3 / 2}
  .agents{grid-template-columns:1fr 1fr}
  .dem{height:auto;min-height:auto}
  .dem__grid{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vh,56px);padding-block:clamp(46px,8vh,90px)}
  .dem__intro{grid-column:1;grid-row:1;max-width:none}
  .dem__h{max-width:none}
  .dem__figs{grid-column:1;grid-row:2;align-self:auto}
  .dem__burst{width:min(52vw,300px);opacity:.55}
  .work__sm{grid-column:span 2}
}

@media (max-width:860px){
  :root{--img-w:max(100vw,900px);--logo-w:min(80vw,560px)}
  /* the key folds to two rows of four with the dial on its own row beneath */
  .aer{aspect-ratio:auto;min-height:106svh}
  .aer__copy{grid-template-columns:minmax(0,1fr);gap:16px}
  .aer__copy .h-display{max-width:none}
  .aer__lede{max-width:min(46ch,100%)}
  .aer__key{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;justify-items:center;
    gap:clamp(14px,3.4vw,26px) clamp(8px,2vw,18px);
  }
  .aer__group{display:contents}
  .aer__group li{order:1}
  .aer__group img{max-width:min(100%,88px)}
  .aer__dial{order:2;grid-column:1 / -1;justify-self:center;width:min(64vw,300px);margin-top:clamp(4px,1vh,12px)}
  .hero__site{min-width:900px}
  .hero__copy{align-self:center;text-align:center;max-width:none}
  .hero__cta{justify-content:center}
  .hero__rail i{display:none}
  .hero__rail{
    gap:6px 14px;flex-wrap:wrap;justify-content:center;text-align:center;
    padding-top:70px;               /* clears the fixed header */
    font-size:.6rem;letter-spacing:.1em;
  }
  .hero__rail span{position:relative;padding-right:16px}
  .hero__rail span:not(:last-child)::after{
    content:"";position:absolute;right:4px;top:50%;width:6px;height:1px;background:var(--yellow);
  }
  .hero__hem{
    height:30vh;
    background:linear-gradient(180deg,rgba(7,13,24,0),rgba(7,13,24,.48) 46%,rgba(7,13,24,.92));
  }
  .hero__scroll{display:none}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:34vw}
  .gal__item:nth-of-type(n){grid-column:auto;grid-row:auto}
  .gal__item--wide{grid-column:span 2}
  .spec__list,.spec__list.acc__key{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .contact__head p{text-align:left}
  .dem__cards{grid-template-columns:minmax(0,1fr)}
  .dem__small{grid-template-columns:minmax(0,1fr);gap:22px;text-align:left}
}

@media (max-width:560px){
  :root{--img-w:max(100vw,820px);--logo-w:min(86vw,440px)}
  .aer__group img{max-width:min(100%,72px)}
  .esg__cards{grid-template-columns:minmax(0,1fr)}
  .esg__ticks{grid-template-columns:minmax(0,1fr)}
  .esg__solar{width:min(96vw,420px);opacity:.6}
  .hero__foot{grid-template-columns:minmax(0,1fr);justify-items:center;gap:6px;text-align:center}
  .hero__foot > :last-child{justify-self:center}
  .dist,.agents{grid-template-columns:1fr}
  .tube__side li{font-size:.5rem;letter-spacing:.05em}
  .hero__site{min-width:820px}
  .hero__copy h1{font-size:1.5rem}
  .btn{padding:12px 22px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.lift{opacity:1;transform:none;transition:none}
  .hero{--t0:0;--ta:0;--tb:0;--tc:0}
  .head__nav a{opacity:1;transform:none;transition:none}
  .tube__core{clip-path:none;transition:none}
  .tube__into,.tube__side li{opacity:1;transform:translate(0,-50%);transition:none}
  .tube__into{transform:none}
  .aer__strip .aer__ruler{opacity:1;transition:none}
  .hero__scroll span{animation:none}
}