/* ============================================================
   SYNC 78 — Collett Way, Southall
   Sweet Sans Pro's weights run high: 600 is Regular, 700 Medium,
   800 Bold.  Every rule below uses that scale, not the usual one.
   ============================================================ */

:root{
  --lime:#B1F727;
  --teal-900:#012028;
  --teal-800:#013540;
  --teal-700:#0A4653;
  --teal-600:#16474B;
  --ink:#012028;
  --white:#fff;
  --paper:#EDF2E4;
  --mute:rgba(255,255,255,.66);
  --line:rgba(255,255,255,.16);
  --line-ink:rgba(1,32,40,.16);

  --wrap:1400px;
  --pad:clamp(20px,4vw,64px);
  --bar:clamp(72px,8vh,88px);        /* header height */

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

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:calc(var(--bar) + 14px)}
.hero{scroll-margin-top:0}

body{
  margin:0;background:var(--teal-800);color:var(--white);
  font-family:"sweet-sans-pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:600;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,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)}
.bleed{width:100%;padding-inline:var(--pad)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:400;background:var(--lime);color:var(--ink);padding:10px 16px;border-radius:4px}

/* ── type ─────────────────────────────────────────────── */
.h-display{
  font-size:clamp(1.9rem,4.2vw,3.5rem);
  font-weight:400;line-height:1.06;letter-spacing:.005em;text-transform:uppercase;
}
.h-display b{font-weight:700;color:var(--lime)}
.h-sub{
  font-size:clamp(1.3rem,2.4vw,2rem);
  font-weight:400;line-height:1.1;text-transform:uppercase;letter-spacing:.01em;
}
.eyebrow{
  font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);
}
.lede{font-size:clamp(.9rem,1.05vw,1.02rem);line-height:1.6;color:var(--mute);max-width:46ch}
.lede b{color:var(--lime);font-weight:700}
.note{font-size:.72rem;color:var(--mute)}

/* ── buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;border:1px solid transparent;white-space:nowrap;
  font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--lime);color:var(--ink)}
.btn--solid:hover{background:var(--white)}
.btn--ghost{border-color:rgba(255,255,255,.45);color:var(--white)}
.btn--ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn--sm{padding:10px 22px;font-size:.68rem}

/* ── header ───────────────────────────────────────────── */
.head{
  position:fixed;inset:0 0 auto 0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--bar);padding-inline:var(--pad);
  background:transparent;backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s;
}
/* it rides over the hero with nothing behind it, then fills once you scroll */
.head.is-on{
  background:rgba(1,32,40,.9);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.head__logo img{width:clamp(112px,11vw,152px)}
/* Above the mobile breakpoint the hero carries its own lockup, so the bar's logo
   only appears once the bar fills — otherwise the two stack at the top. */
@media (min-width:721px){
  .head__logo{opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
  .head.is-on .head__logo{opacity:1;pointer-events:auto}
}
.head__nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
.head__nav a{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);transition:color .25s}
.head__nav a:hover{color:var(--lime)}
.head__nav .btn{color:var(--ink)}

.burger{display:none;background:none;border:0;padding:8px;margin-right:-8px;cursor:pointer;position:relative;z-index:2}
.burger span{display:block;width:26px;height:2px;background:var(--lime);margin:6px 0;transition:transform .3s var(--ease),opacity .2s}
.burger.is-on span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.is-on span:nth-child(2){opacity:0}
.burger.is-on span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ══ HERO ══════════════════════════════════════════════
   Two plates: the sky-and-shed photograph, and the glass mark on
   top of it.  The mark drifts away from the cursor and both plates
   move at their own rate as the page scrolls. */
.hero{
  --t0:0;--ta:0;--tb:0;--tc:0;      /* scroll phases, fed by main.js */
  --mx:0;--my:0;                    /* pointer drift, -1 … 1        */
  /* The first screen keeps the crop it already had; the hero then runs on
     downward through the rest of the plate.  --slack is what the plate has
     spare beyond one screen; 66% of it is already above the fold, so only
     the remaining 34% is added below — the top is never revealed. */
  --img-h:calc(1.4114 * 100vw);        /* hero-sky.jpg is 1417 × 2000 */
  --slack:max(0px, calc(var(--img-h) - 100svh));
  --sky-top:calc(-1 * var(--slack) * .66);
  position:relative;height:calc(100svh + var(--slack) * .34);min-height:620px;
  overflow:hidden;isolation:isolate;
  background:var(--teal-900);
  border-bottom:3px solid var(--lime);
}
/* the photograph fills the frame; the mark is its own object on top */
.hero__sky{
  position:absolute;z-index:-2;left:0;top:var(--sky-top);
  width:100%;height:auto;min-height:100svh;object-fit:cover;object-position:center;
  /* drifts upward only — a downward drift would uncover the top edge */
  transform:translate3d(calc(var(--mx) * -12px), calc(var(--my) * -9px + var(--tb) * -4svh), 0) scale(1.045);
  transform-origin:center top;will-change:transform;
}
/* the mark leads: it shies from the cursor, zooms out, then lifts away */
.hero__mark{
  position:absolute;z-index:-1;left:50%;top:45svh;
  width:clamp(190px,29vw,450px);height:auto;
  transform:
    translate3d(calc(-50% + var(--mx) * -38px), calc(-50% + var(--my) * -30px + var(--ta) * -46svh), 0)
    scale(calc(1 - var(--t0) * .26));
  filter:drop-shadow(0 30px 60px rgba(1,32,40,.35));
  will-change:transform;
}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(1,32,40,.72) 0%,rgba(1,32,40,.12) 26%,rgba(1,32,40,0) 44%),
    linear-gradient(0deg,rgba(1,32,40,.86) 0%,rgba(1,32,40,.25) 26%,rgba(1,32,40,0) 52%);
}

.hero__in{
  position:relative;height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--bar) + clamp(10px,2vh,26px)) var(--pad) clamp(20px,3.4vh,40px);
  transform:translateY(calc(var(--tc) * -16svh));
  opacity:calc(1 - var(--tc) * .85);
}
.hero__top{display:flex;align-items:flex-start;gap:24px}
.hero__logo img{width:clamp(150px,17vw,240px)}

/* The standing title is taken out of flow: in flow its ~700px height drove
   the column and pushed the foot rail off the bottom.  Sized off viewport
   height so the string always fits between the bar and the floor. */
.hero__side{
  position:absolute;z-index:1;right:var(--pad);top:calc(var(--bar) + clamp(8px,1.6vh,20px));
  writing-mode:vertical-rl;
  font-size:clamp(.86rem,3.4svh,2.1rem);font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;white-space:nowrap;
}

.hero__facts{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,68px);align-items:flex-start}
.hero__fact{
  padding-left:clamp(12px,1.2vw,18px);border-left:2px solid var(--lime);
  font-size:clamp(.86rem,1.35vw,1.22rem);font-weight:600;line-height:1.35;
}
.hero__fact b{display:block;font-weight:700}
.hero__fact i{display:inline-block;width:1em;height:1em;vertical-align:-.1em;margin-left:.4em;
  background:url("../img/ui/ui-03.svg") no-repeat center/contain}
.hero__foot{
  margin-top:clamp(16px,2.6vh,30px);display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}
.hero__scroll{
  width:24px;height:38px;border:1px solid rgba(255,255,255,.4);border-radius:13px;
  display:grid;place-items:start center;padding-top:7px;
}
.hero__scroll span{width:2px;height:8px;background:var(--lime);border-radius:2px;animation:dropp 1.9s var(--ease) infinite}
@keyframes dropp{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(15px);opacity:0}}

/* ══ SHARED SECTION FURNITURE ═════════════════════════ */
.sec{position:relative}
.sec--pad{padding:clamp(64px,9vh,130px) 0}
.sec__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(34px,5vh,64px);
}

/* reveal + lift, shared with the aerial-style stagger */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.lift{
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 60ms);
}
.is-in .lift{opacity:1;transform:none}

/* ══ LOCATION ═════════════════════════════════════════ */
.loc{overflow:hidden;isolation:isolate;aspect-ratio:1024/724;min-height:min(620px,100svh);background:var(--teal-900)}
.loc__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 46%}
.loc__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(1,32,40,.82) 0%,rgba(1,32,40,.3) 20%,rgba(1,32,40,0) 38%),
    linear-gradient(0deg,rgba(1,32,40,.55) 0%,rgba(1,32,40,0) 24%);
}
.loc__in{
  position:relative;padding-top:clamp(30px,6vh,74px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);align-items:start;
}

/* ══ SPECIFICATION ════════════════════════════════════ */
.spec{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,4vw,66px);align-items:start}
.spec__left{min-width:0;display:grid;gap:clamp(28px,4vh,52px)}
.spec__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vh,26px) clamp(16px,2vw,32px)}
.spec__list li{display:flex;align-items:center;gap:clamp(11px,1.1vw,17px);min-width:0}
.spec__list img{width:clamp(19px,1.6vw,25px);height:auto;flex:none}
.spec__list span{font-size:clamp(.74rem,.86vw,.88rem);font-weight:600;line-height:1.35}

/* the schedule */
.tbl table{font-size:clamp(.78rem,.9vw,.94rem)}
.tbl th{
  text-align:left;padding:0 0 11px;border-bottom:1px solid var(--lime);
  font-size:.64rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);
}
.tbl th+th,.tbl td+td{text-align:right}
.tbl td{padding:14px 0;border-bottom:1px solid var(--line)}
.tbl .is-total td{font-weight:800;color:var(--lime);border-bottom:0}

/* the site plan */
/* the plan is lifted from the brochure page, so it carries its own teal
   ground — no panel needed, it sits straight on the section */
.plan{margin:0;position:relative;border-radius:clamp(10px,1vw,16px);overflow:hidden}
.plan__n{position:absolute;z-index:2;top:clamp(10px,1.4vw,20px);left:clamp(10px,1.4vw,20px);width:clamp(28px,2.6vw,40px)}
.plan__zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative;overflow:hidden;border-radius:inherit;color:inherit}
.plan__zoom{aspect-ratio:597.3 / 593}          /* ui-27 is 597.3 × 867 uncropped */
.plan__zoom img{
  width:100%;height:100%;object-fit:cover;object-position:50% 29.6%;
  transition:transform .5s var(--ease);
}
.plan__zoom:hover img{transform:scale(1.02)}
.plan__zoom span{
  position:absolute;left:50%;bottom:clamp(8px,1.4vw,18px);transform:translateX(-50%) translateY(8px);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:9px 18px;border-radius:999px;background:rgba(1,32,40,.86);border:1px solid var(--line);
  font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.plan__zoom span svg{width:15px;height:15px;fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round}
.plan__zoom:hover span,.plan__zoom:focus-visible span{opacity:1;transform:translateX(-50%) translateY(0)}
.plan__zoom:focus-visible{outline:2px solid var(--lime);outline-offset:4px}

/* ══ SUSTAINABILITY ═══════════════════════════════════ */
.esg{overflow:hidden;isolation:isolate;padding:clamp(56px,8vh,110px) 0 clamp(46px,7vh,90px);background:var(--teal-900)}
.esg__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.esg__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(1,32,40,.92) 0%,rgba(1,32,40,.45) 24%,rgba(1,32,40,.12) 46%),
    linear-gradient(90deg,rgba(1,32,40,.88) 0%,rgba(1,32,40,.3) 38%,rgba(1,32,40,0) 62%),
    linear-gradient(0deg,rgba(1,32,40,.94) 0%,rgba(1,32,40,.4) 26%,rgba(1,32,40,0) 52%);
}
.esg__in{position:relative;display:grid;gap:clamp(26px,4vh,48px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.esg__intro{grid-column:1}
.esg__intro .lede{margin-top:clamp(14px,2vh,24px)}

/* the credentials panel */
.esg__creds{
  grid-column:2;grid-row:1;justify-self:end;width:min(100%,560px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);
  padding:clamp(18px,2vw,30px);border-radius:clamp(10px,1vw,16px);
  background:rgba(1,32,40,.5);backdrop-filter:blur(10px);border:1px solid var(--line);
}
.esg__creds li{display:grid;gap:10px;justify-items:start}
.esg__creds img{width:clamp(24px,2.2vw,32px);height:auto}
.esg__creds span{font-size:clamp(.68rem,.8vw,.8rem);font-weight:600;line-height:1.3}

.esg__badge{
  grid-column:1;justify-self:start;display:flex;align-items:center;gap:12px;
  padding:12px 20px 12px 14px;border-radius:999px;
  background:rgba(177,247,39,.1);border:1px solid rgba(177,247,39,.4);
  font:inherit;color:inherit;text-align:left;cursor:zoom-in;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.esg__badge:hover,.esg__badge:focus-visible{background:rgba(177,247,39,.18);border-color:var(--lime)}
.esg__badge:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.esg__badge svg{
  width:14px;height:14px;flex:none;margin-left:2px;
  fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;
  opacity:.55;transition:opacity .25s var(--ease);
}
.esg__badge:hover svg,.esg__badge:focus-visible svg{opacity:1}
.esg__badge img{width:22px}
.esg__badge span{font-size:clamp(.7rem,.82vw,.82rem);font-weight:600;line-height:1.25}
.esg__badge b{font-weight:800;color:var(--lime)}

.esg__shots{grid-column:2;justify-self:end;display:flex;gap:clamp(12px,1.6vw,22px)}
.esg__shots img{
  width:clamp(96px,12vw,176px);aspect-ratio:1;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.2);
}

.esg__save{grid-column:1 / -1}
.esg__save ul{
  margin-top:clamp(14px,2vh,22px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,40px);
}
.esg__save li{padding-left:clamp(12px,1.2vw,18px);border-left:2px solid var(--lime)}
.esg__save b{display:block;font-size:clamp(1.3rem,2.6vw,2.2rem);font-weight:400;line-height:1;letter-spacing:.01em}
.esg__save span{display:block;margin-top:9px;font-size:clamp(.7rem,.82vw,.84rem);color:var(--mute)}
.esg__save .note{margin-top:clamp(14px,2vh,22px)}

/* ══ VOLUME ══════════════════════════════════════════ */
/* 50/50. The photograph half carries the load type and the racking section over
   its darkened foot — volume-graph.svg is white line art, so the photograph is
   the ground it was drawn for. The paper half takes the head, the four figures
   and the pair of photographs. */
.vol{background:var(--paper);color:var(--ink)}
.vol__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}

.vol__shot{margin:0;position:relative;min-height:clamp(420px,50vw,900px);display:grid;align-items:end}
.vol__shot-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.vol__over{
  position:relative;z-index:1;
  padding:clamp(64px,11vh,150px) clamp(22px,2.6vw,44px) clamp(24px,3.4vh,46px);
  display:grid;gap:clamp(18px,2.6vh,32px);
  /* fixed-length fade, finishing exactly where the load type starts, so the
     white text never lands on the bright part of the floor */
  background:linear-gradient(180deg,
    rgba(1,32,40,0) 0,
    rgba(1,32,40,.86) clamp(64px,11vh,150px),
    rgba(1,32,40,.93) 100%);
}
.vol__load{display:grid;gap:clamp(8px,1.2vh,14px);color:rgba(255,255,255,.86)}
.vol__load>b{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--white)}
.vol__load span{font-size:clamp(.68rem,.8vw,.82rem);line-height:1.5}
.vol__load i{display:block;font-style:normal;font-weight:700;color:var(--white)}
.vol__plan{width:100%;height:auto}

.vol__body{
  padding:clamp(40px,6vh,96px) var(--pad) clamp(40px,6vh,96px) clamp(28px,4vw,70px);
  display:grid;gap:clamp(26px,3.6vh,48px);align-content:start;
}
.sec__head--stack{grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vh,22px);margin-bottom:0}
.vol .h-display,.vol .h-sub{color:var(--ink)}
/* half a column is narrower than a full one — hold the head to its two lines */
.vol .h-display{font-size:clamp(1.7rem,3vw,2.9rem)}
.vol .lede{color:rgba(1,32,40,.72)}

.vol__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,40px) clamp(18px,2.4vw,38px)}
.vol__card{display:grid;align-content:start;min-width:0}
.vol__card .h-sub{font-size:clamp(1.05rem,1.7vw,1.5rem)}
.vol__card .h-sub b{font-weight:400}
.vol__card p{
  margin-top:clamp(12px,1.8vh,20px);padding-top:clamp(10px,1.4vh,15px);
  border-top:1px solid rgba(1,32,40,.28);
  font-size:clamp(.72rem,.84vw,.86rem);line-height:1.5;color:rgba(1,32,40,.72);
}
.vol__card p b{font-weight:800;color:var(--ink)}

.vol__pics{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.vol__pics img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:clamp(10px,1vw,16px)}

/* ══ WORKFORCE ═══════════════════════════════════════ */
.work{overflow:hidden;isolation:isolate;padding:clamp(56px,8vh,110px) 0;background:var(--teal-900);min-height:min(100svh,900px);display:grid;align-items:center}
.work__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center}
.work__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(1,32,40,.94) 0%,rgba(1,32,40,.7) 42%,rgba(1,32,40,.25) 100%)}
.work__in{position:relative}
.work__stats{
  margin-top:clamp(24px,3.4vh,44px);max-width:min(100%,620px);
  padding:clamp(20px,2.4vw,34px);border-radius:clamp(10px,1vw,16px);
  background:rgba(1,32,40,.55);backdrop-filter:blur(12px);border:1px solid var(--line);
}
.work__stats li{padding:clamp(12px,1.7vh,20px) 0;border-bottom:1px solid var(--line)}
.work__stats li:last-child{border-bottom:0;padding-bottom:0}
.work__stats li:first-child{padding-top:0}
.work__stats b{display:block;font-size:clamp(1.5rem,3vw,2.5rem);font-weight:400;line-height:1;letter-spacing:.01em}
.work__stats span{display:block;margin-top:8px;font-size:clamp(.7rem,.82vw,.84rem);color:var(--mute)}
.work .note{margin-top:16px}

/* ══ CONNECTIVITY ════════════════════════════════════ */
.conn__grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.conn__main{min-width:0;display:grid;gap:clamp(26px,3.6vh,48px)}
.dist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:auto auto;grid-auto-rows:auto;
  column-gap:clamp(18px,2.4vw,40px);row-gap:0}
/* each column hands its header and list to the parent's rows, so a heading that
   wraps to two lines lifts every green rule together instead of just its own */
.dist__col{display:grid;grid-template-rows:subgrid;grid-row:span 2}
.dist .eyebrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--lime);min-height:3.1em}
.dist .eyebrow i{font-style:normal;color:var(--mute);font-size:.62rem}
.dist li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:clamp(.74rem,.86vw,.9rem);font-weight:600}
.dist li span{color:var(--mute)}
.dist li b{font-weight:700;white-space:nowrap}

.conn__map{margin:0;border-radius:clamp(10px,1vw,16px);overflow:hidden;background:var(--teal-900)}
.conn__map img{width:100%;height:auto}
/* no img rule here: it outranked .eliz__core and stretched the diagram */
.conn__line{margin:0;display:grid;align-content:stretch}

.w3w{display:grid;justify-items:end;gap:5px;text-align:right;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.w3w b{color:var(--lime);font-weight:800}
.w3w span{color:var(--mute)}

/* ══ CONTACT ═════════════════════════════════════════ */
.contact{background:var(--teal-900);padding:clamp(30px,4.5vh,60px) 0 clamp(40px,6vh,80px)}
.contact__map{margin:0;border-radius:clamp(10px,1vw,16px);overflow:hidden;background:var(--teal-800)}
.contact__map #map{
  width:100%;height:clamp(600px,58vh,760px);background:var(--teal-800);
  display:grid;place-items:center;
}
.contact__map #map::after{content:"Collett Way, Southall UB2 4SE";font-size:.82rem;color:var(--mute)}
.contact__map #map.is-ready::after{content:none}
.contact__in{padding-top:clamp(26px,4vh,50px)}
.w3w--tight{margin-bottom:clamp(26px,4vh,48px)}

.contact__body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.contact__agents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.firm__logo{display:block;margin-bottom:clamp(20px,3vh,34px)}
.firm__logo--nmrk{width:clamp(120px,11vw,160px)}
.firm__logo--cogent{width:clamp(110px,10vw,146px)}
.agents{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,26px)}
.agent{display:grid;gap:3px;font-size:clamp(.76rem,.88vw,.9rem)}
.agent b{color:var(--lime);font-weight:800;margin-bottom:5px}
.agent a{color:var(--mute);transition:color .25s}
.agent a:hover{color:var(--white)}

.contact__mark{display:grid;justify-items:end;gap:12px;text-align:right}
.contact__mark img{width:clamp(150px,15vw,210px)}
.contact__mark span{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.cta-bar{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;margin-top:clamp(10px,1.6vh,18px)}

/* ══ FOOTER ══════════════════════════════════════════ */
.foot{background:var(--teal-800);padding:clamp(28px,4vh,48px) var(--pad);border-top:1px solid var(--line)}
.foot__legal{font-size:.64rem;line-height:1.7;color:rgba(255,255,255,.42)}

/* ══ LIGHTBOX ════════════════════════════════════════ */
.lbox{position:fixed;inset:0;z-index:300;background:rgba(1,20,26,.95);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 [hidden] rule, so state it explicitly */
.lbox[hidden]{display:none}
.lbox.is-on{opacity:1}
.lbox img{max-width:min(96vw,1400px);max-height:86vh;object-fit:contain;border-radius:8px}
.lbox p{font-size:.72rem;font-weight:700;letter-spacing:.14em;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}

/* ── the Elizabeth line ─────────────────────────────────
   The SVG carries the line and its nodes; the names are HTML pinned to each
   node's own y position, read out of the artwork, and set left/right to the
   same zig-zag the brochure uses (taken from its own word positions).
   Sized by HEIGHT so the diagram runs the full depth of the section. */
.eliz{
  --hmin:clamp(520px,78vh,940px);      /* floor: the diagram never gets shorter */
  --ratio:0.16702;                     /* ui-28 is 151.5 × 907.1 */
  --cw:calc(var(--hmin) * var(--ratio));
  --colR:73%;                          /* trunk label columns     */
  --colL:27%;
  --colRb:87%;                         /* branch stops sit further */
  --colLb:13%;                         /* out, as in the brochure  */
  position:relative;
}
/* ui-28 breaks the trunk between y=39.5 and y=59.1 to leave a void for the route
   name — so the title sits IN that gap, centred on the line, exactly as the
   brochure sets it, rather than floating above the diagram. */
.eliz__title{
  position:absolute;top:5.435%;
  left:calc(50% - var(--cw) / 2 + var(--cw) * var(--x));
  transform:translate(-50%,-50%);white-space:nowrap;
  font-size:.68rem;line-height:1;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lime);
  opacity:0;transition:opacity .45s var(--ease);transition-delay:var(--d);
}
.reveal.is-in .eliz__title{opacity:1}
/* The body's height must stay DEFINITE: it is the size container --cw is read
   from, and a content-derived height would make 100cqh resolve to 0 and pull
   every leader back to the centre line. Stacked, that means an explicit height;
   two-up, the 1fr row of a stretched .eliz gives it one. */
.eliz__body{position:relative;width:100%;height:var(--hmin)}
@supports (container-type:size){
  .eliz__body{container-type:size;--cw:calc(100cqh * var(--ratio))}
}
@media (min-width:1181px){
  /* Two-up, the diagram runs the full depth of the section. .eliz is taken out of
     flow so it can never feed its own height back into the row it is measuring —
     the row is settled by .conn__main alone, which keeps .eliz__body's height (and
     so 100cqh) definite. The min-height is only a floor for a freak short column. */
  .conn__line{position:relative;min-height:560px}
  .eliz{position:absolute;inset:0}
  @supports (container-type:size){.eliz__body{height:100%}}
}
.eliz__core{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  height:100%;width:auto;aspect-ratio:151.5 / 907.1;
  clip-path:inset(0 0 100% 0);transition:clip-path 2.4s cubic-bezier(.4,0,.2,1);
}
.reveal.is-in .eliz__core{clip-path:inset(0 0 0 0)}
.eliz__stops{position:absolute;inset:0}

/* Each name is a box running from its own node out to its label column, with a
   leader rule filling the gap. --x is the node's position as a fraction of the
   core's width, so --nx lands on the roundel centre whatever the diagram's size. */
.eliz__stops li{
  --nx:calc(50% - var(--cw) / 2 + var(--cw) * var(--x));
  position:absolute;top:var(--y);left:var(--nx);
  width:calc(var(--colR) - var(--nx));
  display:flex;align-items:center;gap:9px;
  transform:translateY(-50%) translateX(-8px);opacity:0;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  transition-delay:var(--d);
  font-size:clamp(.54rem,.64vw,.7rem);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;line-height:1.28;
}
.eliz__stops li::before{content:"";flex:1 1 auto;min-width:14px;height:1px;background:rgba(255,255,255,.42)}
.eliz__stops li span{flex:none;white-space:nowrap}
.eliz__stops li.is-left{
  left:auto;right:calc(100% - var(--nx));
  width:calc(var(--nx) - var(--colL));
  flex-direction:row-reverse;text-align:right;
  transform:translateY(-50%) translateX(8px);
}
/* Heathrow, Canary Wharf, Custom House and Stratford hang off branches, so their
   nodes are much closer to the label column than the trunk's are. Reaching to the
   same column would leave no room for a leader and push the text onto the line —
   the brochure sets them further out, and so do we. */
.eliz__stops li.is-branch{width:calc(var(--colRb) - var(--nx))}
.eliz__stops li.is-branch.is-left{width:calc(var(--nx) - var(--colLb))}

.reveal.is-in .eliz__stops li{opacity:1;transform:translateY(-50%) translateX(0)}

/* Southall is the one that matters */
.eliz__stops li.is-here{color:var(--lime);font-size:clamp(.62rem,.78vw,.84rem);font-weight:800}
.eliz__stops li.is-here::before{background:rgba(177,247,39,.6)}
.eliz__stops li.is-here i{
  display:inline-block;width:15px;height:17px;vertical-align:-.35em;margin-right:7px;
  background:url("../img/ui/ui-01.svg") no-repeat center/contain;
}


/* ══ RESPONSIVE ══════════════════════════════════════ */
@media (max-width:1180px){
  .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(--teal-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(1rem,4.4vw,1.5rem);font-weight:600;letter-spacing:.1em;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:.43s}
  .head__nav.is-on a:nth-child(9){transition-delay:.5s}
  .head__nav .btn{margin-top:clamp(16px,3vh,30px);font-size:.76rem;padding:15px 32px}
  .head__logo{position:relative;z-index:2}
  .burger{display:block}

  .sec__head{grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.4vh,22px)}
  .loc{aspect-ratio:auto;min-height:auto;padding-bottom:clamp(40px,7vh,80px)}
  .loc__in{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:clamp(90px,14vh,140px)}
  .spec{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vh,48px)}
  .esg__in{grid-template-columns:minmax(0,1fr)}
  .esg__creds,.esg__badge,.esg__shots,.esg__save{grid-column:1;justify-self:start}
  .esg__creds{width:100%;grid-row:auto}
  .esg__save ul{grid-template-columns:minmax(0,1fr);gap:16px}
  .vol__grid{grid-template-columns:minmax(0,1fr)}
  .vol__shot{min-height:clamp(300px,58vw,520px)}
  .vol__over{padding-top:clamp(40px,8vh,90px)}
  .vol__body{padding:clamp(34px,5vh,64px) var(--pad)}
  .conn__grid{grid-template-columns:minmax(0,1fr);gap:clamp(34px,5vh,56px)}
  .dist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dist__col ul{padding-bottom:clamp(18px,2.4vw,40px)}
  .contact__body{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vh,44px)}
  .contact__mark{justify-items:start;text-align:left}
  .cta-bar{justify-content:flex-start}
}

@media (max-width:720px){
  /* the bar already shows the logo here — drop the hero's copy but keep the h1
     in the accessibility tree, it is the page's only one */
  .hero__logo{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hero__facts{gap:14px}
  .hero__fact{font-size:.82rem}
  .hero__foot{font-size:.6rem;gap:10px}
  /* icon grids go two-up and centre, icon over text */
  .spec__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.4vh,32px) clamp(14px,3vw,24px)}
  .spec__list li{flex-direction:column;justify-content:flex-start;text-align:center;gap:10px}
  /* a fixed icon box so both columns baseline together whatever the glyph */
  .spec__list img,.esg__creds img{
    width:clamp(26px,7vw,34px);height:clamp(26px,7vw,34px);object-fit:contain;
  }
  .esg__creds{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.4vh,32px) clamp(14px,3vw,24px)}
  .esg__creds li{justify-items:center;text-align:center}

  /* the aerial reads as its own block above the copy, its foot dissolving into
     the section rather than stopping on a hard edge */
  .loc{aspect-ratio:auto;min-height:0}
  .loc__bg{
    position:relative;inset:auto;z-index:0;
    width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center 55%;
    /* both edges dissolve — the top is sky, the foot runs under the copy */
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 54%,rgba(0,0,0,.4) 80%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 54%,rgba(0,0,0,.4) 80%,transparent 100%);
  }
  .loc__veil{display:none}
  .loc__in{
    position:relative;padding-top:0;padding-bottom:clamp(34px,6vh,60px);
    margin-top:calc(-1 * clamp(40px,8vh,84px));
  }
  /* the two roundels share the width rather than sitting small and left */
  .esg__shots{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,4vw,26px)}
  .esg__shots img{width:100%}
  .hero__scroll{display:none}          /* no mouse to scroll with */
  .vol__stats{grid-template-columns:minmax(0,1fr);gap:24px}
  .dist{grid-template-columns:minmax(0,1fr)}
  .dist .eyebrow{min-height:0}
  .contact__agents{grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vh,40px)}
  .work__stats b{font-size:clamp(1.4rem,7vw,2rem)}
  .eliz{--hmin:clamp(430px,66vh,640px);--colR:76%;--colL:24%;--colRb:92%;--colLb:8%}
  .eliz__title{font-size:.56rem;letter-spacing:.14em}   /* keep it inside the void */
  .eliz__stops li{font-size:.5rem;letter-spacing:.03em;gap:6px}
}

@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;--mx:0;--my:0}
  .hero__scroll span{animation:none}
  .eliz__core{clip-path:none;transition:none}
  .eliz__stops li{opacity:1;transform:translate(0,-50%);transition:none}
  .head__nav a{opacity:1;transform:none;transition:none}
}