/* ============================================================
   LANGLEY 255 — Enterprise Way, Langley Mill, Nottingham
   Brochure LNG002 V4.1 is the spec. AUTHENTIC Sans throughout; the
   headlines run a 130 (bold) phrase into a 60 (light) one, as printed.
   Palette sampled from the brochure's own fills.
   ============================================================ */

/* ── fonts ────────────────────────────────────────────── */
@font-face{font-family:"AUTHENTIC Sans";src:url("../fonts/authentic-60.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"AUTHENTIC Sans";src:url("../fonts/authentic-90.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"AUTHENTIC Sans";src:url("../fonts/authentic-130.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"AUTHENTIC Sans";src:url("../fonts/authentic-150.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* the angle the sunrise mask has swept through (see .rays) */
@property --sweep{syntax:"<angle>";inherits:false;initial-value:360deg}

:root{
  --navy:#253650;          /* the ink: every headline, table and label */
  --navy-900:#0a172e;      /* the deepest ground */
  --navy-800:#172233;      /* the cover's shadow */
  --blue:#003a6c;          /* the chips' icon tiles, the sources */
  --yellow:#ffd600;        /* the sunburst, the outline, the map pin */
  --y-80:#ffde33;          /* the cover chips step down the scale … */
  --y-60:#ffe766;
  --y-40:#ffef99;
  --y-30:#fff3b2;          /* … the icon discs */
  --y-20:#fff7cc;          /* the plan and map panels */
  --cream:#fffbe5;         /* the spec page ground */
  --lime:#d8fc8b;          /* the A-road badges and the warehouse on the plan */
  --sage:#becccf;
  --white:#fff;
  /* every spread closes on this hairline: lime into yellow */
  --stripe:linear-gradient(90deg,var(--lime),var(--yellow));

  --mute-ink:rgba(37,54,80,.74);
  --rule:rgba(37,54,80,.28);
  --rule-2:var(--navy);

  --text:"AUTHENTIC Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --pad:clamp(20px,4vw,64px);
  --bar:clamp(64px,8vh,84px);
  --ease:cubic-bezier(.22,.85,.3,1);
  --r:clamp(6px,.6vw,10px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--bar-h,var(--bar));-webkit-text-size-adjust:100%;text-size-adjust:100%}
section[id]{scroll-margin-top:var(--bar-h,var(--bar))}
.hero{scroll-margin-top:0}
body{
  margin:0;background:var(--cream);color:var(--navy);
  font-family:var(--text);font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* clip, not hidden: hidden would make body a scroller and break sticky */
  overflow-x:clip;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,figure,table,address{margin:0}
address{font-style:normal}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
button{font:inherit;color:inherit}
::selection{background:var(--yellow);color:var(--navy)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px}

.bleed{width:100%;padding-inline:var(--pad)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:400;padding:12px 18px;background:var(--yellow);color:var(--navy);font-weight:600}
.skip:focus{left:12px;top:12px}
section[tabindex="-1"]:focus{outline:none}

/* ── type ─────────────────────────────────────────────── */
/* 43pt on a 1191pt spread: the light run is the default, <b> is the 130 */
.h-display{
  font-weight:300;font-size:clamp(2.1rem,4.3vw,4.15rem);
  line-height:1.1;letter-spacing:-.018em;text-wrap:balance;
}
.h-display b{font-weight:600}
.h-sub{font-weight:600;font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.2}
/* 14pt in the 130: the brochure's standfirst */
.lede{font-weight:600;font-size:clamp(1.02rem,1.3vw,1.3rem);line-height:1.38;max-width:44ch;text-wrap:pretty}
.copy{font-size:clamp(.92rem,1vw,1rem);line-height:1.6;max-width:62ch;display:grid;gap:1em;text-wrap:pretty}
.note{font-size:.74rem;color:var(--mute-ink)}

/* the brochure's running head: scheme on the left, address on the right */
.runner{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.72rem;letter-spacing:.01em;margin-bottom:clamp(22px,4vh,44px);
}
.runner span:last-child{text-align:right}

.sec{position:relative}
/* every spread ends on the lime-to-yellow hairline */
.stripe::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;z-index:3;
  background:var(--stripe);transform-origin:left;
}

/* ── reveal + lift ────────────────────────────────────────
   Hidden states apply only when scripting runs, so a page without JS (or a
   crawler) still shows everything. */
@media (scripting: enabled){
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .reveal.is-in{opacity:1;transform:none}
  .lift{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:calc(var(--i,0) * 70ms + .1s)}
  .is-in .lift,.is-in.lift{opacity:1;transform:none}
}
/* the stripes draw in from the left as each spread scrolls into view */
@supports (animation-timeline: view()){
  .stripe::after{animation:drawx linear both;animation-timeline:view();animation-range:entry 30% cover 40%}
}
@keyframes drawx{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:14px 26px;border-radius:999px;border:1.5px solid transparent;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;line-height:1;white-space:nowrap;
  cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn--sm{padding:10px 18px;font-size:.76rem}
.btn--solid{background:var(--yellow);color:var(--navy)}
.btn--solid:hover{background:var(--navy);color:var(--yellow)}
.btn--line{border-color:currentColor;background:transparent}
.btn--line:hover{background:var(--navy);border-color:var(--navy);color:var(--yellow)}

/* ── 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);
  color:var(--navy);
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease);
}
.head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--stripe);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.head.is-on{background:rgba(255,251,229,.93);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(37,54,80,.08)}
.head.is-on::after{transform:scaleX(1)}
/* the cover carries its own lockup, so the bar's arrives with the fill */
.head__logo{display:block;line-height:0;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.head.is-on .head__logo{opacity:1;transform:none;pointer-events:auto}
.head__logo img{width:clamp(130px,11vw,168px);height:auto}
.head__nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.head__nav a{position:relative;font-size:.82rem;font-weight:600;letter-spacing:.01em}
.head__nav a[href^="#"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;
  background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.head__nav a[href^="#"]:hover::after,.head__nav a.is-current::after{transform:scaleX(1)}
.burger{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer;position:relative;z-index:2}
.burger span{display:block;width:26px;height:2px;background:currentColor;margin:6px 0;border-radius:2px;transition:transform .35s 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 ─────────────────────────────────────────────────
   A 50 / 50 split, as on Milton Keynes 111. The cover photograph is soft at
   source (README, Notes); drawn at half the width it is magnified half as much.
   The panel carries on the photograph's own sky: its colours are sampled
   along the photo's left edge, where the two meet, settling into the page
   cream. Below 1024px it is the printed cover again: the photograph full
   bleed, the type over it. */
.hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:max(100svh,640px);background:var(--cream);
}
.hero__shot{grid-column:2;grid-row:1;position:relative;margin:0;overflow:hidden;min-height:100%}
.hero__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  animation:settle 2.4s var(--ease) both}
/* a breath of the panel's cream behind the nav where it runs over the photo */
.hero__shot::after{content:"";position:absolute;inset:0 0 auto 0;height:18%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,251,229,.5),rgba(255,251,229,0))}
@keyframes settle{from{transform:scale(1.08);opacity:.2}to{transform:none;opacity:1}}

.hero__panel{
  grid-column:1;grid-row:1;position:relative;isolation:isolate;
  display:grid;grid-template-rows:auto 1fr auto auto;
  padding:calc(var(--bar) + 4px) clamp(30px,4vw,72px) clamp(22px,4vh,40px) var(--pad);
  background:linear-gradient(180deg,#a9c6d8 0%,#f2dfcd 16%,#fde3c5 32%,#fdebc0 48%,var(--cream) 84%);
}

.hero__top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.hero__addr{font-size:clamp(.72rem,.85vw,.82rem)}
.hero__sunrise{width:clamp(84px,7.5vw,118px);height:auto}
.hero__mid{align-self:center;display:grid;gap:clamp(20px,4vh,44px);padding-block:clamp(16px,3vh,32px)}
.hero__logo{width:fit-content;animation:rise 1.4s var(--ease) .1s both}
.hero__logo img{width:clamp(200px,19vw,300px);height:auto}
.hero__title{font-size:clamp(2.2rem,3.9vw,4.6rem);animation:rise 1.2s var(--ease) .25s both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ── scroll cue ───────────────────────────────────────────
   A mouse rolling its wheel, in a navy disc so it reads on sky and on
   photograph alike; the yellow ring pulses after the cover has settled.
   The wrapper owns position and the hide (the cue's own entrance animation
   would otherwise override it), and it is spent once the page has moved. */
.hero__cue{z-index:3;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.head.is-on ~ main .hero__cue{opacity:0;transform:translateY(12px);pointer-events:none}
.cue{
  position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:rgba(37,54,80,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;box-shadow:0 10px 26px -12px rgba(10,23,46,.7);
  transition:background-color .25s var(--ease),transform .25s var(--ease);
  animation:rise .9s var(--ease) 1.1s both;
}
.cue:hover{background:var(--navy);transform:translateY(2px)}
.cue::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--yellow);opacity:0;animation:cue-ring 2.6s var(--ease) 2.2s infinite}
.cue__mouse{position:relative;width:16px;height:25px;border:1.75px solid currentColor;border-radius:9px}
.cue__mouse::after{content:"";position:absolute;left:50%;top:5px;width:2px;height:5px;margin-left:-1px;border-radius:2px;background:var(--yellow);animation:cue-wheel 1.8s var(--ease) infinite}
@keyframes cue-wheel{0%{transform:translateY(0);opacity:0}25%{opacity:1}75%{transform:translateY(7px);opacity:0}100%{opacity:0}}
@keyframes cue-ring{0%{transform:scale(1);opacity:.95}70%,100%{transform:scale(1.6);opacity:0}}
/* centred on the seam between the two halves, level with the key facts */
.hero .hero__cue{position:absolute;right:0;bottom:clamp(22px,4vh,40px);transform:translateX(50%)}
.head.is-on ~ main .hero .hero__cue{transform:translate(50%,12px)}

/* the cover's four chips, stepping down the yellow scale, two by two in the panel */
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,14px);align-self:end}
.chip{
  display:flex;align-items:center;gap:12px;min-width:0;
  padding:clamp(9px,1.1vw,13px) clamp(10px,1.2vw,16px);border-radius:6px;
  background:var(--yellow);
  font-size:clamp(.8rem,.95vw,.95rem);line-height:1.25;
  box-shadow:0 10px 30px -14px rgba(10,23,46,.55);
}
.chip:nth-child(2){background:var(--y-80)}
.chip:nth-child(3){background:var(--y-60)}
.chip:nth-child(4){background:var(--y-40)}
.chip img{width:clamp(26px,2.4vw,34px);height:auto;flex:none}
.chip span{display:grid}
.chip b{font-weight:600}
/* they rise in on load, one after another, under the headline */
.chip{animation:rise .9s var(--ease) both}
.chip:nth-child(1){animation-delay:.55s}
.chip:nth-child(2){animation-delay:.65s}
.chip:nth-child(3){animation-delay:.75s}
.chip:nth-child(4){animation-delay:.85s}

/* ── overview ─────────────────────────────────────────── */
.overview{background:var(--white);padding-top:clamp(70px,11vh,130px)}
.overview__grid{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,64px);
  align-items:start;margin-bottom:clamp(-140px,-9vw,-40px);position:relative;z-index:2;
}
.overview__grid .copy{padding-top:.6em;max-width:56ch}
.aerial{position:relative}
.aerial__scroll{overflow:hidden}
.aerial__frame{position:relative;aspect-ratio:2560 / 1702}
.aerial__frame img{position:absolute;inset:0;width:100%;height:100%}
/* the sky's dissolve into the page white is the brochure's own, baked into the plate */
.aerial__anno{z-index:2}
/* the A610 as the brochure draws it: white in Overlay blend, so it lifts the
   road rather than painting over it. It draws itself west to east, through
   the roundabout, and traces the junction loop as it gets there. */
.aerial__road{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;mix-blend-mode:overlay}
.road{fill:none;stroke:#fff;stroke-width:3.4;stroke-dasharray:1;stroke-dashoffset:0}
@media (scripting: enabled){
  .aerial .road{stroke-dashoffset:1}
  .aerial.is-in .road{stroke-dashoffset:0;transition:stroke-dashoffset var(--t) var(--e) var(--d)}
  .road--w{--d:.3s;--t:1s;--e:cubic-bezier(.5,0,1,1)}
  .road--rb{--d:1.28s;--t:.3s;--e:linear}
  .road--e{--d:1.55s;--t:1.7s;--e:cubic-bezier(0,0,.35,1)}
  .road--loop{--d:2s;--t:.9s;--e:cubic-bezier(.45,0,.2,1)}
}
@media (scripting: enabled){
  /* the plate is already up; the annotation blooms onto it */
  .aerial{opacity:1;transform:none}
  .aerial .aerial__anno{opacity:0;transform:scale(1.012);transform-origin:62% 80%;transition:opacity 1.8s cubic-bezier(.4,0,.3,1) .35s,transform 1.8s var(--ease) .35s}
  .aerial.is-in .aerial__anno{opacity:1;transform:none}
}
.aerial__hint{display:none}

/* ── specification ────────────────────────────────────── */
.spec{background:var(--cream);padding:clamp(56px,9vh,110px) 0 clamp(60px,10vh,120px)}
.spec__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.spec__body{display:grid;gap:clamp(22px,3.6vh,40px);min-width:0}

.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3.4vh,36px) clamp(8px,1.4vw,20px);padding-block:clamp(6px,1.6vh,16px)}
.feats li{display:grid;justify-items:center;text-align:center;gap:10px;font-size:clamp(.8rem,.9vw,.9rem);line-height:1.3}
.feats img{width:clamp(52px,4.6vw,68px);height:auto;transition:transform .5s var(--ease)}
.feats li:hover img{transform:translateY(-4px) scale(1.06)}

/* photographs and drawings open full size */
.shot,.map,.plan__img{
  display:block;position:relative;width:100%;padding:0;border:0;background:none;
  border-radius:var(--r);overflow:hidden;cursor:zoom-in;
}
.shot img,.map img,.plan__img img{width:100%;height:auto;transition:transform .7s var(--ease)}
.shot:hover img,.map:hover img{transform:scale(1.03)}
.shot__zoom{
  position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,214,0,.95);opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s var(--ease);
}
.shot__zoom::before,.shot__zoom::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--navy);border-radius:2px}
.shot__zoom::after{transform:rotate(90deg)}
.shot:hover .shot__zoom,.map:hover .shot__zoom,.plan__img:hover .shot__zoom,
.shot:focus-visible .shot__zoom,.map:focus-visible .shot__zoom,.plan__img:focus-visible .shot__zoom{opacity:1;transform:none}

.plan{position:relative;background:var(--y-20);border-radius:var(--r);overflow:hidden}
.plan__img{border-radius:0}
/* the schedule over the plan's open top-right corner, where the brochure sets it */
.plan__tbl{
  position:absolute;top:1.6%;right:2.6%;width:50%;
  background:rgba(255,247,204,.9);padding:4px 8px 6px;border-radius:4px;
}
.plan__tbl table{font-size:clamp(.7rem,.72vw,.82rem)}
.plan__tbl .note{margin-top:6px;font-size:.72rem;color:var(--navy)}

/* ── tables ───────────────────────────────────────────── */
.tbl{min-width:0;overflow-x:auto;--cy:8px}
.tbl table{font-size:clamp(.82rem,.86vw,.9rem);font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:var(--cy) 0 var(--cy) 10px;text-align:right;font-weight:400;white-space:nowrap}
.tbl th:first-child{padding-left:0;text-align:left;white-space:normal}
.tbl thead th{font-weight:600;border-bottom:1px solid var(--rule-2);vertical-align:bottom}
.tbl thead th img{display:inline-block;vertical-align:-2px;margin-right:6px;height:1em;width:auto}
.tbl tbody tr{border-bottom:1px solid var(--rule)}
.tbl tbody tr:last-child{border-bottom:0}
.tbl tr.is-total th,.tbl tr.is-total td{font-weight:600;border-top:1px solid var(--rule-2)}

/* ── location ─────────────────────────────────────────── */
.loc{background:var(--white);padding:clamp(56px,9vh,110px) 0 clamp(60px,10vh,120px)}
.loc__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.loc__body{display:grid;gap:clamp(20px,3.4vh,36px);min-width:0}
.dist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.4vh,34px) clamp(18px,2.4vw,36px);align-items:start}
.dist .tbl tbody tr:last-child{border-bottom:1px solid var(--rule)}
.loc__map{position:sticky;top:calc(var(--bar-h,var(--bar)) + 24px);display:grid;gap:10px}
.loc__map .map{background:var(--y-20)}
/* what3words: the navy tab the brochure hangs over the map */
.w3w{
  justify-self:end;display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:5px;background:var(--navy-900);color:var(--yellow);
  font-size:.8rem;font-weight:400;transition:background-color .25s;
}
.w3w span[aria-hidden]{margin-right:1px;font-weight:600}           /* the tab: all one yellow */
.w3w--line span[aria-hidden]{color:#e11f26}
.w3w:hover{background:var(--navy)}
.w3w--line{background:transparent;color:var(--navy);padding-inline:0}
.w3w--line:hover{background:transparent;text-decoration:underline;text-underline-offset:3px}

/* ── workforce ────────────────────────────────────────────
   Two plates of one frame: the PDF's own photograph, and the designer's
   300 dpi page with the rays and the worker composited as printed. Both
   cover the same box with the same crop, so they stay registered. */
.wf{background:var(--navy);color:var(--white)}
.wf__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch}
.wf__body{
  display:grid;align-content:center;gap:clamp(22px,3.6vh,40px);
  padding:clamp(56px,9vh,110px) clamp(24px,4vw,72px) clamp(56px,9vh,110px) var(--pad);
}
.wf .runner{margin-bottom:0}
.wf__stats{display:grid;gap:clamp(18px,3vh,30px)}
.wf__stats li{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,2vw,26px);row-gap:4px;align-items:center;
  padding-bottom:clamp(18px,3vh,30px);border-bottom:1px solid rgba(255,255,255,.22);
}
.wf__stats li:last-child{border-bottom:0;padding-bottom:0}
.wf__stats img{grid-row:span 2;width:clamp(44px,4vw,58px);height:auto}
.wf__stats b{font-weight:600;font-size:clamp(2rem,3.4vw,3.2rem);line-height:1;letter-spacing:-.02em;color:var(--yellow);font-variant-numeric:tabular-nums}
.wf__stats span{font-size:clamp(.9rem,1vw,1.02rem);line-height:1.45;color:rgba(255,255,255,.86);max-width:40ch}
.wf .note{color:rgba(255,255,255,.62)}

.rays-stack{position:relative;margin:0;overflow:hidden}
.rays-stack img,.rays-stack picture{position:absolute;inset:0;width:100%;height:100%}
.rays-stack img{object-fit:cover}
.wf__shot{min-height:clamp(520px,92svh,980px)}
.wf__shot img{object-position:50% 30%}

/* the sunrise: a conic mask swings round from the horizon, centred on the
   rays, and lets the printed page through over the plain photograph, so
   the rays rise round the subject. --sweep is a registered angle so it
   interpolates; where @property is unknown the page is simply there. */
.rays{
  --cx:50%;--cy:60%;
  -webkit-mask-image:conic-gradient(from 225deg at var(--cx) var(--cy),#000 var(--sweep),transparent calc(var(--sweep) + 34deg));
          mask-image:conic-gradient(from 225deg at var(--cx) var(--cy),#000 var(--sweep),transparent calc(var(--sweep) + 34deg));
}
.rays--wf{--cx:72%;--cy:64%}
.rays--ops{--cx:59%;--cy:49%}
@media (scripting: enabled){
  .rays-stack.reveal{opacity:1;transform:none}
  .rays-stack .rays{--sweep:-34deg;transition:--sweep 2.8s cubic-bezier(.5,0,.2,1) .25s}
  .rays-stack.is-in .rays{--sweep:360deg}
}

/* ── operations ───────────────────────────────────────── */
.ops{background:var(--navy-800)}
.ops__shot{aspect-ratio:2560 / 1800;max-height:110svh;width:100%}
.ops__shot img{object-position:50% 40%}
.ops__head{
  position:absolute;inset:0 0 auto 0;z-index:3;pointer-events:none;
  padding-top:clamp(28px,6vh,70px);padding-bottom:clamp(90px,16vh,200px);
  /* the brochure sets this headline into a hazy sky; the haze is restored here */
  background:linear-gradient(180deg,rgba(255,251,229,.78) 0%,rgba(255,251,229,.5) 45%,rgba(255,251,229,0) 100%);
}
.ops__head .h-display{max-width:28ch}

/* ── contact ──────────────────────────────────────────── */
.contact{background:var(--cream);padding:clamp(60px,10vh,120px) 0 clamp(50px,8vh,90px)}
.contact__top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,5vh,52px)}
.contact__logo{width:clamp(220px,22vw,320px);height:auto}
.contact__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,72px);align-items:start}
.contact__map .map{background:var(--y-20)}
.contact__body{display:grid;gap:clamp(18px,3vh,28px);align-content:start}
.contact__addr{display:grid;gap:2px;font-size:.95rem;line-height:1.5}
.contact__addr b{font-weight:600}
.contact__links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}

.agents{
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);
  margin-top:clamp(44px,7vh,80px);padding-top:clamp(28px,4.6vh,44px);
}
.agents::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--yellow)}
.firm{display:grid;align-content:start;gap:clamp(14px,2.2vh,20px)}
.firm__logo{height:clamp(30px,2.8vw,40px);width:auto;margin-bottom:6px}
.agent{display:grid;gap:1px;font-size:clamp(.9rem,.95vw,1rem);line-height:1.4}
.agent b{font-weight:600}
.agent a{font-weight:300;width:fit-content;background:linear-gradient(var(--yellow),var(--yellow)) 0 100%/0 2px no-repeat;transition:background-size .35s var(--ease)}
.agent a:hover{background-size:100% 2px}


/* ── footer ───────────────────────────────────────────── */
.foot{position:relative;background:var(--navy-900);color:rgba(255,255,255,.62);padding:clamp(24px,4vh,40px) var(--pad)}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--stripe)}
.foot__legal{font-size:.7rem;line-height:1.65;max-width:150ch}
.foot__legal span{display:inline-block;color:rgba(255,255,255,.82)}
.foot__legal a:hover{color:var(--yellow)}

/* ── lightbox ─────────────────────────────────────────── */
.lbox{
  width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(16px,4vw,48px);
  border:0;background:rgba(10,23,46,.95);color:var(--white);
}
.lbox[open]{display:grid;place-items:center;align-content:center;gap:14px;animation:fade .3s var(--ease)}
.lbox::backdrop{background:rgba(10,23,46,.5)}
.lbox img{max-width:min(96vw,1600px);max-height:84dvh;width:auto;height:auto;object-fit:contain;border-radius:6px;background:var(--cream)}
.lbox p{font-size:.8rem;letter-spacing:.02em;color:rgba(255,255,255,.75)}
.lbox__x{position:absolute;top:14px;right:18px;width:48px;height:48px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer}
.lbox__x:hover{background:rgba(255,255,255,.1)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ══ RESPONSIVE ══════════════════════════════════════════ */
@media (max-width:1180px){
  .head__nav{
    position:fixed;inset:0;height:100dvh;flex-direction:column;justify-content:center;gap:8px;
    background:var(--cream);opacity:0;visibility:hidden;
    transition:opacity .4s var(--ease),visibility 0s linear .4s;
  }
  .head__nav.is-on{opacity:1;visibility:visible;transition-delay:0s}
  .head__nav a{font-size:clamp(1.3rem,5vw,1.9rem);padding:8px 0;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .head__nav.is-on a{opacity:1;transform:none}
  .head__nav.is-on a:nth-child(2){transition-delay:.05s}
  .head__nav.is-on a:nth-child(3){transition-delay:.1s}
  .head__nav.is-on a:nth-child(4){transition-delay:.15s}
  .head__nav.is-on a:nth-child(5){transition-delay:.2s}
  .head__nav.is-on a:nth-child(6){transition-delay:.25s}
  .head__nav .btn{margin-top:18px;font-size:.9rem}
  .burger{display:block}
  .head__logo{position:relative;z-index:2}

  .spec__grid,.loc__grid,.contact__grid{grid-template-columns:minmax(0,1fr)}
  .plan{max-width:720px}
  .plan__tbl{position:static;width:auto;background:none;padding:18px clamp(16px,3vw,26px) 22px}
  .loc__map{position:static}
}

@media (max-width:1023px){
  /* the printed cover: the photograph full bleed, the type over it */
  .hero{grid-template-columns:minmax(0,1fr);min-height:max(100svh,560px);background:var(--navy-800)}
  .hero__shot,.hero__panel{grid-column:1;grid-row:1}
  .hero__shot img{object-position:56% 50%}
  .hero__shot::after{display:none}
  .hero__panel{
    padding-right:var(--pad);
    background:
      linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 26%),
      linear-gradient(0deg,rgba(23,34,51,.55) 0%,rgba(23,34,51,0) 34%);
  }
  .hero__mid{align-self:start}
  .hero .hero__cue{position:static;transform:none;justify-self:center;margin-bottom:clamp(14px,2.6vh,28px)}
  .head.is-on ~ main .hero .hero__cue{transform:translateY(12px)}
}

@media (max-width:900px){
  .chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .overview__grid{grid-template-columns:minmax(0,1fr);margin-bottom:clamp(-60px,-6vw,-20px)}
  .wf__grid{grid-template-columns:minmax(0,1fr)}
  .wf__shot{min-height:0;aspect-ratio:2000 / 2813;max-height:120svh}
  .agents{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  /* the printed line breaks are set for a spread; on a phone the copy flows */
  .overview .h-display br,.ops .h-display br,.spec .h-display br{display:none}
  .hero__title{font-size:clamp(2.05rem,9vw,2.8rem)}
  .chip{gap:9px;font-size:.78rem}
  .chip img{width:24px}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dist{grid-template-columns:minmax(0,1fr)}
  /* the annotated aerial keeps a legible size and pans sideways */
  .aerial__scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .aerial__scroll::-webkit-scrollbar{display:none}
  .aerial__frame{width:940px}
  .aerial__hint{
    display:flex;align-items:center;gap:8px;justify-content:center;padding:12px 0 18px;
    font-size:.74rem;color:var(--mute-ink);
  }
  .aerial__hint::after{content:"";width:22px;height:2px;background:currentColor;animation:nudge 1.6s var(--ease) infinite}
  .ops__head{position:relative;background:var(--cream);padding-block:28px 22px;pointer-events:auto}
  .ops{display:flex;flex-direction:column-reverse}
  .ops__head .h-display{text-shadow:none}
  .agents{grid-template-columns:minmax(0,1fr)}
  .runner span:last-child{display:none}
}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.lift,.aerial .aerial__anno{opacity:1!important;transform:none!important}
  .aerial .road{stroke-dashoffset:0!important}
  .rays-stack .rays{--sweep:360deg!important}
}