/* ============================================================
   BRACKMILLS 195 — Caswell Road, Brackmills, Northampton
   Brochure BAM002 V2.4 is the spec. Oakes Grotesk throughout:
   headlines Bold over Regular, copy in the Light, labels Medium.
   Palette sampled from the brochure's own fills.
   ============================================================ */

/* ── fonts ────────────────────────────────────────────── */
/* Oakes Grotesk (Samuel Oakes, SIL Open Font License), subset to Latin.
   Only the weights a page actually uses are downloaded. */
@font-face{font-family:"Oakes Grotesk";src:url("../fonts/oakes-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Oakes Grotesk";src:url("../fonts/oakes-light-italic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Oakes Grotesk";src:url("../fonts/oakes-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Oakes Grotesk";src:url("../fonts/oakes-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Oakes Grotesk";src:url("../fonts/oakes-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Oakes Grotesk";src:url("../fonts/oakes-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --green:#204138;         /* the ink, and the map page's ground */
  --green-900:#173129;
  --green-2:#2a4e43;       /* the workforce panel, the map's rings */
  --mint:#a5e1bf;          /* rules, road badges, the dot in the lockup */
  --mint-2:#d4efdf;
  --cream:#fffae5;         /* page ground */
  --cream-2:#fff8d8;       /* the icon panel */
  --yellow:#ffd600;        /* the pin, the postcode callout */
  --sky:#003a6c;           /* the tint over the cover's sky */
  --white:#fff;

  --mute-ink:rgba(32,65,56,.72);
  --rule:var(--mint);
  --rule-2:var(--green);

  --text:"Oakes Grotesk",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(8px,.8vw,12px); /* the brochure rounds its plates and maps */
}

*,*::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(--green);
  font-family:var(--text);font-weight:300;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  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}
b,strong{font-weight:700}
::selection{background:var(--yellow);color:var(--green)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.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(--green);font-weight:600}
.skip:focus{left:12px;top:12px}
section[tabindex="-1"]:focus{outline:none}

/* ── type ─────────────────────────────────────────────── */
/* 30pt on a 1191pt spread: the first line Bold, the second Regular */
.h-display{font-weight:400;font-size:clamp(2.1rem,3.4vw,4rem);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.h-display b{display:block;font-weight:700}
/* 11pt in the Light */
.copy{font-size:clamp(.95rem,1.05vw,1.12rem);line-height:1.55;max-width:56ch;display:grid;gap:1em;text-wrap:pretty}
.note{font-size:.74rem;font-style:italic;color:var(--mute-ink)}

/* a heading beside its standfirst, as the brochure sets every page */
.pair{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:start}
.pair .copy{padding-top:.3em}

.sec{position:relative}

/* ── reveal + lift (hidden states only when scripting runs) ── */
@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) * 55ms + .1s)}
  .is-in .lift,.is-in.lift{opacity:1;transform:none}
}

/* ── buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:13px 22px;border-radius:999px;border:1.5px solid transparent;
  font-size:.86rem;font-weight:600;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--yellow{background:var(--yellow);color:var(--green)}
.btn--yellow:hover{background:var(--mint)}
.btn--green{background:var(--green);color:var(--white)}
.btn--green:hover{background:var(--yellow);color:var(--green)}
.btn--line{border-color:var(--green);color:var(--green)}
.btn--line:hover{background:var(--mint);border-color:var(--mint)}

/* the cream pill the cover hangs the address in */
.pill{display:inline-block;padding:.55em 1.15em;border-radius:10px;background:var(--cream);color:var(--green);font-size:clamp(.78rem,.86vw,.92rem);line-height:1.3}

/* ── 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(--green);background:rgba(255,250,229,.93);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 -3px 0 var(--mint);
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease);
}
.head__logo{display:block;line-height:0;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.head__logo img{width:clamp(150px,13vw,210px);height:auto}
.head__nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.head__nav a{position:relative;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.head__nav a[href^="#"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;border-radius:2px;
  background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
/* with script, the bar starts clear over the cover, in white, and fills
   once the page moves (main.js sets .is-on). Without it, it is always filled,
   so the links never sit white on the cream sections. */
@media (scripting: enabled){
  .head:not(.is-on){color:var(--white);background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .head:not(.is-on) .head__logo{opacity:0;transform:translateY(-6px);pointer-events:none}
  .head:not(.is-on) .head__nav a[href^="#"]::after{background:var(--yellow)}
}
.head__nav a[href^="#"]:hover::after,.head__nav a.is-current::after{transform:scaleX(1)}
.head__nav .btn{letter-spacing:.08em}
.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 ─────────────────────────────────────────────── */
/* 50 / 50, except that the photo's column never drops below 0.745 of the
   cover's height: any narrower and the framing below would have to cut
   the ends of the unit (1024 x 768, for one) */
.hero{
  --shot-w:max(50%,calc(max(100svh,640px) * .745));
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) var(--shot-w);
  min-height:max(100svh,640px);background:var(--sky);
}
.hero__shot{grid-column:2;grid-row:1;position:relative;overflow:hidden;min-height:100%;container-type:size}
.hero__shot picture,.hero__pin{position:absolute;inset:0;width:100%;height:100%;animation:settle 2.4s var(--ease) both}
/* The photo framed on the unit, not on the whole picture. The unit (the
   brick offices at 6% across, the warehouse's far end at 97.5%) spans most
   of the frame, so the zoom is the most that keeps both whole: the column
   shows 5% → 98.5% across (1.07x). Height follows (2528 x 3180), and the crop
   comes out of the sky, lifting the building: anchored at the foot, or with
   the roof at 55% down on very wide columns. */
.hero__shot img{
  position:absolute;left:-5.35cqw;width:106.95cqw;height:134.54cqw;max-width:none;
  top:min(0px,max(calc(100cqh - 134.54cqw),calc(55cqh - 87.72cqw)));
  object-fit:cover;object-position:50% 100%;
}
/* the brochure's own wash over the photograph: deep blue down the sky,
   a little shade at the foot (measured off the printed cover) */
.hero__shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,58,108,.92) 0%,rgba(0,58,108,.62) 18%,rgba(0,58,108,.3) 38%,rgba(0,58,108,0) 56%),
    linear-gradient(0deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 20%)}
@keyframes settle{from{transform:scale(1.08);opacity:.2}to{transform:none;opacity:1}}
/* the white pin line, dropping onto the roof, its dot then pulsing. Phones
   only: there, as on the printed cover, it hangs from the area figure; in
   the split the text is in the other column, so the photo goes without */
.hero__pin{display:none;z-index:1;overflow:visible}
.hero__pin-line{fill:none;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:trace 1.6s cubic-bezier(.45,0,.2,1) 1.2s forwards}
.hero__pin-dot{fill:#fff;transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pop .5s var(--ease) 2.7s forwards}
.hero__pin-ring{fill:none;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0;animation:ping 2.6s var(--ease) 3.2s infinite}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:none}}
@keyframes ping{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(3.4);opacity:0}}

/* the cover's sky as a panel, deepening to the top as printed */
.hero__panel{
  grid-column:1;grid-row:1;position:relative;
  display:grid;grid-template-rows:auto 1fr auto auto auto;row-gap:clamp(18px,3vh,32px);
  padding:calc(var(--bar) + clamp(16px,5vh,56px)) clamp(28px,4vw,72px) clamp(26px,4.4vh,46px) var(--pad);
  color:var(--white);
  background:
    radial-gradient(120% 60% at 100% 100%,rgba(255,196,120,.42) 0%,rgba(255,196,120,0) 60%),
    linear-gradient(180deg,#02315e 0%,#0b4a85 40%,#3f7fbf 82%,#6e9fd0 100%);
}
.hero__logo{width:clamp(240px,27vw,470px);height:auto;animation:rise 1s var(--ease) .1s both}
.hero__title{grid-row:3;font-size:clamp(2.1rem,3.3vw,4.2rem);animation:rise 1.2s var(--ease) .3s both}
.hero__area{grid-row:4;font-size:clamp(1.05rem,1.3vw,1.4rem);line-height:1.3;animation:rise .9s var(--ease) .55s both}
.hero__area b{font-variant-numeric:tabular-nums}
.hero__foot{grid-row:5;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(18px,5vh,56px);animation:rise 1s var(--ease) .8s both}
.hero__sunrise{width:clamp(92px,7.6vw,124px);height:auto}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ── scroll cue ───────────────────────────────────────────
   A mouse rolling its wheel, in a green 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(32,65,56,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;box-shadow:0 10px 26px -12px rgba(10,30,24,.7);
  transition:background-color .25s var(--ease),transform .25s var(--ease);
  animation:rise .9s var(--ease) 1.1s both;
}
.cue:hover{background:var(--green);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 columns, at the foot of the cover */
.hero .hero__cue{position:absolute;right:var(--shot-w);bottom:clamp(22px,4vh,40px);transform:translateX(50%)}
.head.is-on ~ main .hero .hero__cue{transform:translate(50%,12px)}

/* ── introduction ─────────────────────────────────────── */
.intro{background:var(--green-900);color:var(--white)}
.aerial{position:relative}
.aerial__scroll{overflow:hidden}
.aerial__frame{position:relative;aspect-ratio:1190.55 / 841.89}
.aerial__frame picture img{position:absolute;inset:0;width:100%;height:100%}
/* the dark fade the brochure lays behind its copy: black at 60%, gone by
   37% across (measured off the spread) */
.aerial__frame::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 37%);
}
.aerial__anno{z-index:2}
@media (scripting: enabled){
  .aerial.reveal{opacity:1;transform:none}
  .aerial .aerial__anno{opacity:0;transform:scale(1.012);transform-origin:56% 60%;transition:opacity 1.8s cubic-bezier(.4,0,.3,1) .4s,transform 1.8s var(--ease) .4s}
  .aerial.is-in .aerial__anno{opacity:1;transform:none}
  .aerial .intro__head>*{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .aerial .intro__head>:nth-child(2){transition-delay:.12s}
  .aerial.is-in .intro__head>*{opacity:1;transform:none}
}
/* over the photograph the copy keeps left of the A45 line (27.5% across),
   as printed, so it stays on the dark woodland */
.intro__head{position:absolute;z-index:3;left:0;top:0;width:26%;padding-top:clamp(56px,10%,140px);padding-right:0;
  display:grid;gap:clamp(16px,2.4vh,28px);align-content:start}
.intro__head .h-display{font-size:clamp(1.9rem,2.5vw,3.4rem)}
.intro__head .copy{font-size:clamp(.88rem,1vw,1.15rem)}
.aerial__hint{display:none}

/* ── specification ────────────────────────────────────── */
.spec{padding:clamp(56px,9vh,110px) 0}
.spec__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vh,56px) clamp(28px,4vw,72px);align-items:start}
.spec__grid>.pair{grid-column:1 / -1}
.spec__body{display:grid;gap:clamp(28px,4.4vh,48px);min-width:0}
.spec__plan{min-width:0}
@media (min-width:1181px){ .spec__plan{position:sticky;top:calc(var(--bar-h,var(--bar)) + 24px)} }

.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,4.4vh,48px) clamp(10px,1.4vw,20px);
  padding:clamp(28px,4.4vh,48px) clamp(14px,2vw,28px);border-radius:var(--r);background:var(--cream-2)}
.feats li{display:grid;justify-items:center;align-content:start;text-align:center;gap:12px;font-weight:500;font-size:clamp(.84rem,.92vw,.98rem);line-height:1.3}
.feats img{width:clamp(54px,4.4vw,68px);height:auto;transition:transform .5s var(--ease)}
.feats li:hover img{transform:translateY(-4px) scale(1.06)}

.shot,.map{display:block;position:relative;width:100%;padding:0;border:0;background:none;overflow:hidden;cursor:zoom-in;border-radius:var(--r)}
.shot img,.map img{width:100%;height:auto;transition:transform .7s var(--ease)}
.shot:hover img,.map:hover img{transform:scale(1.03)}
.zoom{position:absolute;right:14px;bottom:14px;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)}
.zoom::before,.zoom::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--green);border-radius:2px}
.zoom::after{transform:rotate(90deg)}
.shot:hover .zoom,.map:hover .zoom,.shot:focus-visible .zoom,.map:focus-visible .zoom{opacity:1;transform:none}
/* the plan is a drawing on the page ground: no rounding, a gentle zoom */
.spec__plan .map{border-radius:0}
.spec__plan .map:hover img{transform:scale(1.015)}

/* ── tables ───────────────────────────────────────────── */
.tbl{min-width:0;overflow-x:auto;--cy:9px}
.tbl table{font-size:clamp(.84rem,.88vw,.95rem);font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:var(--cy) 0 var(--cy) 12px;text-align:left;font-weight:300;white-space:nowrap}
.tbl th:first-child{padding-left:0;white-space:normal}
.tbl thead th{font-weight:700;vertical-align:bottom}
.tbl tr{border-bottom:1px solid var(--rule)}
.tbl tr.is-total th,.tbl tr.is-total td{font-weight:700;border-bottom:0}
/* the schedule as printed: labels set right against the figures */
.tbl--area th:first-child{text-align:right;padding-right:clamp(16px,3vw,48px)}
.tbl--area th:not(:first-child),.tbl--area td{width:27%}

/* ── location ─────────────────────────────────────────── */
.loc{padding:clamp(56px,9vh,110px) 0}
.loc__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(36px,5vh,56px)}
.loc__map,.labour__map{min-width:0}
/* road on top; airports and ports side by side beneath, as printed */
.dist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4vh,40px) clamp(18px,2.4vw,36px);align-items:start}
.dist .tbl:first-child{grid-column:1 / -1}
.dist thead img{height:22px;width:auto}
.dist tbody th{font-weight:700}
.dist th:not(:first-child),.dist td{width:22%}

/* ── labour ───────────────────────────────────────────── */
.labour{background:var(--green);color:var(--white);padding:clamp(56px,9vh,110px) 0}
.labour__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}
.labour__body{display:grid;gap:clamp(28px,5vh,56px)}
.labour__title{font-weight:500;font-size:clamp(1.5rem,2.3vw,2.6rem);line-height:1.18;max-width:20ch;text-wrap:balance}
/* each figure with the shade of its ring on the map, and a short rule */
.reach{display:grid;gap:clamp(18px,3vh,30px)}
.reach li{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:clamp(14px,1.4vw,20px);font-weight:500;font-size:clamp(1rem,1.2vw,1.3rem);line-height:1.25}
.reach li::before{content:"";grid-column:2;grid-row:1 / 3;align-self:stretch;width:1px;background:currentColor}
.reach b{grid-column:3;font-weight:500;font-variant-numeric:tabular-nums}
.reach__dot{grid-column:1;grid-row:1 / 3;width:clamp(22px,2vw,30px);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.reach__dot--30{background:#233830}
.reach__dot--60{background:#2e493e}
.reach__dot--120{background:#385a4c}

/* the workforce panel: a white keyline, three columns, figures in outline */
.stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,6vh,72px);
  padding:clamp(28px,4.6vh,52px) 0;border:1.5px solid rgba(255,255,255,.92);border-radius:calc(var(--r) * 1.4);
}
.stats li{display:grid;justify-items:center;align-content:start;text-align:center;gap:clamp(8px,1.4vh,14px);padding:0 clamp(14px,2vw,32px)}
.stats li+li{border-left:1.5px solid rgba(255,255,255,.92)}
.stats img{width:clamp(64px,5.6vw,92px);height:auto;margin-bottom:clamp(4px,1vh,10px)}
.stats b{font-weight:700;font-size:clamp(2.4rem,4.2vw,4.4rem);line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums}
@supports (-webkit-text-stroke:1px #fff){
  .stats b{color:transparent;-webkit-text-stroke:clamp(1px,.09vw,1.6px) var(--white)}
}
.stats span{font-weight:400;font-size:clamp(.92rem,1.1vw,1.2rem);line-height:1.35}
.labour .note{margin-top:16px;color:rgba(255,255,255,.75)}

/* ── the yard ─────────────────────────────────────────── */
.yard{position:relative;overflow:hidden;height:min(70.7vw,100svh);background:var(--green-900)}
.yard__plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
/* the lockup across the foot: white, Overlay at 60%, as printed */
.yard__mark{position:absolute;left:2.14%;right:2.14%;bottom:3.15%;width:95.72%;height:auto;max-width:none;
  mix-blend-mode:overlay;opacity:.6}
@media (scripting: enabled){
  .yard.reveal{opacity:1;transform:none}
  .yard .yard__plate{transform:scale(1.06);transition:transform 2.4s var(--ease)}
  .yard .yard__mark{opacity:0;transform:translateY(30%);transition:opacity 1.6s var(--ease) .5s,transform 1.6s var(--ease) .5s}
  .yard.is-in .yard__plate{transform:none}
  .yard.is-in .yard__mark{opacity:.6;transform:none}
}

/* ── contact ──────────────────────────────────────────── */
.contact{padding:clamp(56px,9vh,110px) 0 clamp(48px,8vh,90px)}
.contact__logo{width:min(100%,1180px);height:auto}
.contact__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4vw,72px);align-items:end;margin-top:clamp(28px,4.6vh,48px)}
.contact__body{display:grid;gap:clamp(20px,3.4vh,32px);align-content:end}
.contact__addr{display:grid;gap:4px;font-weight:500;font-size:clamp(.95rem,1.05vw,1.1rem)}
.contact__addr a{width:fit-content;font-weight:300;letter-spacing:.02em}
.contact__addr a:hover{text-decoration:underline;text-underline-offset:3px}
.contact__links{display:flex;flex-wrap:wrap;gap:12px}

.agents{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px);
  margin-top:clamp(36px,6vh,64px);padding:clamp(28px,4.6vh,44px) 0;
  border-top:1px solid var(--mint);border-bottom:1px solid var(--mint);
}
.firm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:clamp(14px,2vh,20px) clamp(16px,2vw,32px)}
.firm__logo{grid-column:1 / -1;height:clamp(30px,2.8vw,42px);width:auto;margin-bottom:6px}
.agent{display:grid;gap:1px;font-size:clamp(.9rem,.98vw,1.02rem);line-height:1.45}
.agent b{font-weight:600}
.agent a{width:fit-content;word-break:break-word;background:linear-gradient(var(--mint),var(--mint)) 0 100%/0 2px no-repeat;transition:background-size .35s var(--ease)}
.agent a:hover{background-size:100% 2px}

/* ── footer ───────────────────────────────────────────── */
.foot{display:flex;align-items:center;gap:clamp(20px,3vw,48px);background:var(--green-900);color:rgba(255,255,255,.66);padding:clamp(24px,4vh,40px) var(--pad);box-shadow:inset 0 3px 0 var(--mint)}
.foot__sunrise{flex:none;width:clamp(84px,6.4vw,104px);height:auto}
.foot__legal{font-size:.7rem;line-height:1.65;max-width:150ch}
.foot__legal span{display:inline-block;color:rgba(255,255,255,.85)}
.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(23,49,41,.96);color:var(--white)}
.lbox[open]{display:grid;place-items:center;align-content:center;gap:14px;animation:fade .3s var(--ease)}
.lbox::backdrop{background:rgba(23,49,41,.5)}
.lbox img{max-width:min(96vw,1600px);max-height:84dvh;width:auto;height:auto;object-fit:contain;background:var(--cream);border-radius:6px}
.lbox p{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;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:10px;
    background:var(--cream);color:var(--green);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(1rem,4vw,1.4rem);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 a[href^="#"]::after{background:var(--mint)}
  /* the menu links' padding:8px 0 would otherwise flatten the button */
  .head__nav .btn{margin-top:18px;padding:13px 28px;font-size:.86rem}
  .burger{display:block}
  .head__logo{position:relative;z-index:2}

  /* the copy comes off the aerial and sits above it */
  .aerial{display:flex;flex-direction:column}
  .intro__head{position:relative;order:-1;width:auto;padding-block:clamp(48px,8vh,80px) clamp(32px,5vh,48px);background:var(--green-900)}
  .intro__head .copy{max-width:64ch}
  .aerial__frame::before{display:none}

  .spec__grid{grid-template-columns:minmax(0,1fr)}
  .spec__plan{max-width:760px}
  .loc__grid{grid-template-columns:minmax(0,1fr)}
  .dist{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dist .tbl:first-child{grid-column:auto}
}

@media (max-width:1023px){
  /* a phone or a portrait tablet: the printed cover, full bleed */
  .hero{--shot-w:50%;grid-template-columns:minmax(0,1fr);min-height:max(100svh,600px)}
  .hero__shot,.hero__panel{grid-column:1;grid-row:1}
  .hero__panel{background:none;justify-items:center;text-align:center;
    grid-template-rows:auto auto auto 1fr auto;padding-top:calc(var(--bar) + 2vh)}
  .hero__logo{width:min(78%,420px)}
  .hero__title{grid-row:2;font-size:clamp(1.75rem,6vw,2.8rem)}
  .hero__area{grid-row:3}
  .hero__foot{grid-row:5;width:100%;margin-top:0}
  /* the whole printed frame, centred, with the pin hanging from the area */
  .hero__shot img{inset:0;width:100%;height:100%;object-position:50% 50%}
  .hero__pin{display:block}

  .pair{grid-template-columns:minmax(0,1fr)}
  .pair .copy{padding-top:0}
  .labour__grid{grid-template-columns:minmax(0,1fr)}
  .labour__map{max-width:720px}
  .contact__grid{grid-template-columns:minmax(0,1fr)}
  .agents{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:720px){
  .h-display{font-size:clamp(2rem,9vw,2.6rem)}
  .hero__title{font-size:clamp(1.6rem,7.4vw,2.2rem)}
  .hero__foot{flex-direction:column;align-items:center;gap:12px}
  /* the foot stacks here, so the cue stays centred but rises clear of it,
     under the pin's dot */
  .hero .hero__cue{bottom:clamp(128px,16.5vh,150px)}

  /* 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:980px}
  .aerial__hint{display:flex;align-items:center;gap:8px;justify-content:center;padding:12px 0 18px;font-size:.74rem;color:rgba(255,255,255,.7)}
  .aerial__hint::after{content:"";width:22px;height:2px;background:currentColor;animation:nudge 1.6s var(--ease) infinite}

  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tbl--area th:first-child{text-align:left}
  .dist{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:minmax(0,1fr);padding:8px clamp(18px,5vw,28px)}
  .stats li{padding:clamp(24px,4vh,32px) 0}
  .stats li+li{border-left:0;border-top:1.5px solid rgba(255,255,255,.92)}
  .yard{height:auto;aspect-ratio:4 / 5}
  .firm{grid-template-columns:minmax(0,1fr)}
  .foot{flex-direction:column;align-items:flex-start}
}
@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,.aerial .intro__head>*,.yard .yard__plate{opacity:1!important;transform:none!important}
  .yard .yard__mark{opacity:.6!important;transform:none!important}
  .hero__pin-line{stroke-dashoffset:0!important}
  .hero__pin-dot{transform:none!important}
}