/* ============================================================
   MILTON KEYNES 111 — Brudenell Drive, Brinklow, Milton Keynes
   Brochure MIL002 8pp V5.2 is the spec. AUTHENTIC Sans throughout:
   headlines in the 90, standfirsts in the 130, figures in the 60.
   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 free AUTHENTIC cut has no £ or ²; the brochure sets the £ in Aeonik, so
   those two glyphs come from Aeonik (licensed), subset to just them (<1 KB a
   weight). size-adjust lifts Aeonik's 700-unit cap height to AUTHENTIC's 752
   so the £ stands level with the figures. Only the weights in use download. */
@font-face{font-family:"AUTHENTIC Fallback";src:url("../fonts/aeonik-pound-300.woff2") format("woff2");font-weight:300;unicode-range:U+00A3,U+00B2;size-adjust:107.4%;font-display:swap}
@font-face{font-family:"AUTHENTIC Fallback";src:url("../fonts/aeonik-pound-400.woff2") format("woff2");font-weight:400;unicode-range:U+00A3,U+00B2;size-adjust:107.4%;font-display:swap}
@font-face{font-family:"AUTHENTIC Fallback";src:url("../fonts/aeonik-pound-600.woff2") format("woff2");font-weight:600;unicode-range:U+00A3,U+00B2;size-adjust:107.4%;font-display:swap}
@font-face{font-family:"AUTHENTIC Fallback";src:url("../fonts/aeonik-pound-700.woff2") format("woff2");font-weight:700;unicode-range:U+00A3,U+00B2;size-adjust:107.4%;font-display:swap}

:root{
  --navy:#253650;          /* the ink */
  --navy-900:#172233;
  --slate:#33404a;         /* the maps' ground */
  --sky:#d0e3f5;           /* the spec and back-page ground */
  --sky-2:#d1dfec;         /* the cover's sky */
  --mist:#d2dadd;          /* the cover strap */
  --stone:#edede8;         /* the location page ground */
  --yellow:#ffd600;        /* the rule under every plate, the mark */
  --cream:#fff7cc;         /* the icon rings */
  --green:#00af75;         /* A-road badges */
  --blue:#00abe6;          /* motorway */
  --white:#fff;

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

  --text:"AUTHENTIC Sans","AUTHENTIC Fallback",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:0px;                 /* the brochure keeps its plates square */
}

*,*::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(--sky);color:var(--navy);
  font-family:var(--text);font-weight:400;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}
sup{font-size:.62em;line-height:0}
::selection{background:var(--yellow);color:var(--navy)}
: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(--navy);font-weight:600}
.skip:focus{left:12px;top:12px}
section[tabindex="-1"]:focus{outline:none}

/* ── type ─────────────────────────────────────────────── */
/* 44pt in the 90 on a 1191pt spread */
.h-display{font-weight:400;font-size:clamp(2.1rem,4.4vw,4.2rem);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.h-display b{font-weight:600}
/* 16pt in the 130 */
.lede{font-weight:600;font-size:clamp(1.02rem,1.35vw,1.36rem);line-height:1.35;max-width:52ch;text-wrap:pretty}
.copy{font-size:clamp(.92rem,1vw,1rem);line-height:1.6;max-width:62ch;display:grid;gap:1em}
.note{font-size:.72rem;color:var(--mute-ink)}

/* the running heads: tracked caps in the 130 */
.runner{
  display:flex;justify-content:space-between;gap:16px;
  font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:clamp(24px,4.4vh,48px);
}
/* the short yellow rule the brochure hangs under a standfirst */
.rule{display:block;width:clamp(48px,5vw,66px);height:4px;background:var(--yellow)}

.sec{position:relative}

/* the yellow bar under every plate and map, drawn in as it arrives */
.bar{position:relative}
.bar::after,.shot--bar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;z-index:3;
  background:var(--yellow);transform-origin:left;
}

/* ── 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}
  .bar::after,.shot--bar::after{transform:scaleX(0);transition:transform 1s var(--ease) .35s}
  .bar.is-in::after,.shot--bar.is-in::after{transform:scaleX(1)}
}

/* the brand mark drawing itself in outline */
.draw path{
  fill:none;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;
}
@media (scripting: enabled){
  .draw path{stroke-dashoffset:1;transition:stroke-dashoffset 3.2s cubic-bezier(.45,0,.2,1)}
  .draw path+path{transition-delay:.6s}
  .is-in .draw path,.draw.is-in path{stroke-dashoffset:0}
}

/* ── buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:13px 22px;border-radius:4px;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 16px;font-size:.76rem}
/* the brochure's button: navy, knocked back over the sky */
.btn--slate{background:rgba(37,54,80,.74);color:var(--white);border-color:rgba(255,255,255,.7)}
.btn--slate:hover{background:var(--navy)}
.btn--navy{background:var(--navy);color:var(--white)}
.btn--navy:hover{background:var(--yellow);color:var(--navy)}

/* ── 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.is-on{background:rgba(208,227,245,.92);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 -3px 0 var(--yellow)}
.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(150px,13vw,200px);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;
  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)}
.head__nav .btn{letter-spacing:.08em}
/* over the photograph on a phone the bar starts in white */
.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 ─────────────────────────────────────────────── */
.hero{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);     /* 50 / 50 */
  min-height:max(100svh,640px);background:var(--sky-2);
}
.hero__shot{grid-column:2;grid-row:1;position:relative;overflow:hidden;min-height:100%}
/* a sky haze behind the nav links that run over the photograph */
.hero__shot::after{content:"";position:absolute;inset:0 0 auto 0;height:22%;pointer-events:none;
  background:linear-gradient(180deg,rgba(209,223,236,.78) 0%,rgba(209,223,236,0) 100%)}
.hero__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  animation:settle 2.4s var(--ease) both}
@keyframes settle{from{transform:scale(1.08);opacity:.2}to{transform:none;opacity:1}}
/* a whisper of the photograph's sunset carried into the panel's foot */
.hero__panel{
  grid-column:1;grid-row:1;position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr auto auto;gap:clamp(22px,4vh,44px);
  padding:clamp(22px,4vh,40px) clamp(28px,4vw,72px) clamp(26px,4.4vh,46px) var(--pad);
  background:linear-gradient(180deg,#a9c9ea 0%,var(--sky-2) 46%,#e9e3d6 100%);
}
.hero__mark{position:absolute;z-index:-1;right:-18%;top:-6%;width:94%;height:auto;opacity:.95}
.hero__mark path{stroke-width:1.6}
.hero__mark path{stroke-dashoffset:1;animation:trace 3.4s cubic-bezier(.45,0,.2,1) .3s forwards}
.hero__mark path+path{animation-delay:.9s}
@keyframes trace{to{stroke-dashoffset:0}}
.hero__top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.hero__logo{width:clamp(210px,19vw,300px);height:auto;animation:rise 1s var(--ease) .1s both}
.hero__sig{display:grid;justify-items:end;gap:12px}
.hero__sunrise{width:clamp(84px,7.4vw,112px);height:auto}
.hero__sunrise--white{display:none}
.hero__title{align-self:end;font-size:clamp(2.2rem,3.9vw,4.6rem);font-weight:300;line-height:1.06;animation:rise 1.2s var(--ease) .3s both}
.hero__title b{font-weight:600}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.facts{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;gap:clamp(16px,2.6vw,44px)}
.fact{display:flex;align-items:flex-start;gap:10px;font-size:clamp(.8rem,.92vw,.92rem);line-height:1.35;animation:rise .9s var(--ease) both}
.fact:nth-child(1){animation-delay:.55s}
.fact:nth-child(2){animation-delay:.65s}
.fact:nth-child(3){animation-delay:.75s}
.fact img{width:auto;height:clamp(22px,2vw,28px);flex:none}
.fact span{display:grid}
.fact b{font-weight:600}

.hero__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;animation:rise 1s var(--ease) .9s both}
.hero__strap{font-size:clamp(1.5rem,2.3vw,2.2rem);font-weight:400;line-height:1.08;letter-spacing:-.01em}
.hero__strap::after{content:"";display:block;width:clamp(56px,6vw,90px);height:5px;margin-top:clamp(12px,2vh,20px);background:var(--yellow)}
.hero__w3w{font-size:.72rem;font-weight:600;letter-spacing:.06em}
.hero__w3w:hover{text-decoration:underline;text-underline-offset:3px}

/* ── 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, at the foot of the cover */
.hero .hero__cue{position:absolute;left:50%;bottom:clamp(22px,4vh,40px);transform:translateX(-50%)}
.head.is-on ~ main .hero .hero__cue{transform:translate(-50%,12px)}

/* ── introduction ─────────────────────────────────────── */
.intro{background:var(--navy-900)}
.aerial{position:relative}
.aerial__scroll{overflow:hidden}
.aerial__frame{position:relative;aspect-ratio:2381 / 1684}
.aerial__frame>img,.aerial__frame picture img{position:absolute;inset:0;width:100%;height:100%}
.aerial__frame::before{
  content:"";position:absolute;inset:0 0 auto 0;height:42%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(209,223,236,.55) 0%,rgba(209,223,236,.18) 55%,rgba(209,223,236,0) 100%);
}
.aerial__frame::after{
  content:"";position:absolute;inset:auto 0 0 0;height:30%;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(23,34,51,.55),rgba(23,34,51,0));
}
.aerial__anno{z-index:2}
/* the mark sits where the brochure prints it, over the top-right sky */
.aerial__mark{position:absolute;z-index:2;left:42.42%;top:0;width:57.6%;height:33.5%;overflow:hidden}
.aerial__mark path{stroke-width:1.4}
@media (scripting: enabled){
  .aerial.reveal{opacity:1;transform:none}
  .aerial .aerial__anno{opacity:0;transform:scale(1.012);transform-origin:70% 80%;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:.1s}
  .aerial .intro__head>:nth-child(3){transition-delay:.2s}
  .aerial .intro__head>:nth-child(4){transition-delay:.3s}
  .aerial.is-in .intro__head>*{opacity:1;transform:none}
}
.intro__head{
  position:absolute;z-index:3;left:0;top:0;width:min(100%,780px);
  padding-top:clamp(26px,4.6vh,54px);display:grid;gap:clamp(16px,2.6vh,28px);justify-items:start;
}
.intro__head .runner{width:100%;margin-bottom:clamp(8px,2vh,24px)}
.intro__head .runner span:last-child{display:none}
.aerial__hint{display:none}

/* ── specification ────────────────────────────────────── */
.spec{background:var(--sky);padding:clamp(48px,8vh,100px) 0 clamp(56px,9vh,110px)}
.spec__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.spec__body,.spec__side{display:grid;gap:clamp(22px,3.6vh,40px);min-width:0}
.spec__body .runner,.spec__side .runner{margin-bottom:0}
.runner__mob{display:none}

.feats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,3.2vh,34px) clamp(6px,1vw,14px)}
.feats li{display:grid;justify-items:center;align-content:start;text-align:center;gap:9px;font-size:clamp(.74rem,.8vw,.84rem);line-height:1.3}
.feats small{display:block;font-size:.88em;color:var(--mute-ink);margin-top:2px}
.feats img{width:clamp(46px,3.8vw,58px);height:auto;transition:transform .5s var(--ease)}
.feats li:hover img{transform:translateY(-4px) scale(1.06)}

.spec__pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,36px);align-items:start;
  padding-top:clamp(20px,4.5vh,52px)}           /* clear air between the icon grid and the schedule */
.spec__pair .note{margin-top:10px;color:var(--navy)}

.shot,.map,.plan__img{display:block;position:relative;width:100%;padding:0;border:0;background:none;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:16px;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}
.shot--bar{padding-bottom:5px}

.plan{background:var(--white);padding:clamp(14px,2vw,26px) clamp(14px,2vw,26px) calc(clamp(14px,2vw,22px) + 5px)}
.plan figcaption{display:grid;gap:6px;margin-top:10px;font-size:.8rem}
.plan figcaption b{font-weight:600}

/* Two columns: the office photo (foot of the left column) and the unit
   aerial (foot of the right) share one height and both sit at the foot of
   their column, so the pair aligns top and bottom whichever column runs
   taller. Each is cropped to the shared height (a few percent at most). */
@media (min-width:1181px){
  .spec__grid{align-items:stretch}
  .spec__body,.spec__side{display:flex;flex-direction:column}
  .spec__pair{margin-top:auto}
  .spec__pair .shot{align-self:end}         /* the photo keeps the column foot; the table stays at the top */
  .spec__side>.shot{margin-top:auto}
  .spec__pair .shot img,.spec__side>.shot img{height:clamp(240px,20vw,460px);object-fit:cover}
}

/* ── tables ───────────────────────────────────────────── */
.tbl{min-width:0;overflow-x:auto;--cy:8px}
.tbl table{font-size:clamp(.8rem,.84vw,.88rem);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 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)}

/* ── labour ───────────────────────────────────────────── */
.labour{background:var(--white);padding-bottom:clamp(56px,9vh,110px)}
.labour__shot{aspect-ratio:1191 / 562;max-height:68svh;width:100%;overflow:hidden}
.labour__shot img{width:100%;height:100%;object-fit:cover}
.labour__in{padding-top:clamp(40px,6vh,70px);display:grid;gap:clamp(24px,4vh,44px)}
.labour__in .runner{margin-bottom:0}
.labour__in .h-display{max-width:16ch}
/* wide screens: the figures and a column for the Sunrise mark, which runs off
   the right edge as it does on the cover, so it never sits behind the text */
.labour{overflow-x:clip}
.labour__mark{display:none}
@media (min-width:1181px){
  .labour__in{grid-template-columns:minmax(0,1fr) minmax(0,.55fr);column-gap:clamp(24px,3vw,56px)}
  .labour__in>*{grid-column:1}
  .labour__in>.runner{grid-column:1 / -1}
  .labour__mark{
    display:block;grid-column:2;grid-row:2 / 5;align-self:center;
    width:165%;max-width:none;height:auto;
  }
  .labour__mark path{stroke:var(--navy);stroke-width:1.5}
}
/* the six figures in two columns, ruled off top and bottom as printed */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);max-width:1180px}
.stats li{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(14px,1.8vw,24px);row-gap:4px;
  align-items:center;padding:clamp(18px,3vh,28px) 0;border-top:1px solid var(--navy);
}
.stats li:nth-last-child(-n+2){border-bottom:1px solid var(--navy)}
.stats img{grid-row:span 2;width:clamp(44px,4vw,56px);height:auto;align-self:start}
.stats b{font-weight:300;font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats span{font-weight:600;font-size:clamp(.8rem,.86vw,.9rem);line-height:1.35;max-width:40ch}

/* ── location ─────────────────────────────────────────── */
.loc{background:var(--stone);padding:clamp(48px,8vh,100px) 0 clamp(56px,9vh,110px)}
.loc__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,72px);align-items:end}
.loc__head{display:grid;gap:clamp(18px,3vh,32px)}
.loc__map .map{background:var(--slate)}
.loc__map{padding-bottom:5px}
.dist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.4vh,34px) clamp(18px,2.6vw,40px);margin-top:clamp(30px,5vh,56px);align-items:start}
.dist .tbl tbody tr:last-child{border-bottom:1px solid var(--rule)}
.loc .note{margin-top:14px}

/* ── contact ──────────────────────────────────────────── */
.contact{background:var(--sky);padding:clamp(56px,9vh,110px) 0 clamp(48px,8vh,90px)}
.contact__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,72px);align-items:end}
.contact__map{padding-bottom:5px}
.contact__map .map{background:var(--slate)}
.contact__body{display:grid;gap:clamp(18px,3vh,28px);align-content:end}
.contact__logo{width:clamp(240px,24vw,360px);height:auto}
.contact__addr{display:grid;gap:4px;font-weight:600;font-size:clamp(.9rem,1vw,1rem)}
.contact__addr a{width:fit-content;font-weight:600;letter-spacing:.02em}
.contact__addr a:hover{text-decoration:underline;text-underline-offset:3px}
.contact__links{display:flex;flex-wrap:wrap;gap:12px}
.contact__title{font-size:clamp(.92rem,1vw,1rem);font-weight:600}

.agents{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);
  margin-top:clamp(28px,4.6vh,44px);padding:clamp(28px,4.6vh,44px) 0;
  border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);
}
.firm{display:grid;align-content:start;gap:clamp(12px,2vh,18px)}
.firm__logo{height:clamp(30px,2.8vw,40px);width:auto;margin-bottom:8px}
.agent{display:grid;gap:1px;font-size:clamp(.88rem,.95vw,1rem);line-height:1.4}
.agent b{font-weight:600}
.agent a{width:fit-content;word-break:break-word;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}
.strap{margin-top:auto;padding-top:clamp(20px,4vh,40px);font-size:clamp(1.15rem,1.5vw,1.45rem)}


/* ── footer ───────────────────────────────────────────── */
.foot{background:var(--navy-900);color:rgba(255,255,255,.62);padding:clamp(24px,4vh,40px) var(--pad);box-shadow:inset 0 5px 0 var(--yellow)}
.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(23,34,51,.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,34,51,.5)}
.lbox img{max-width:min(96vw,1600px);max-height:84dvh;width:auto;height:auto;object-fit:contain;background:var(--white)}
.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(--sky);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 .btn{margin-top:18px;font-size:.86rem}
  .burger{display:block}
  .head__logo{position:relative;z-index:2}

  .spec__grid,.contact__grid{grid-template-columns:minmax(0,1fr)}
  .spec__side{max-width:820px}
  .runner--side{display:none}
  .runner__mob{display:inline}
  .loc__grid{grid-template-columns:minmax(0,1fr);align-items:start}
  .dist{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1023px){
  /* a phone or a portrait tablet: the printed cover, full bleed */
  .hero{grid-template-columns:minmax(0,1fr);min-height:max(100svh,600px)}
  .hero__shot,.hero__panel{grid-column:1;grid-row:1}
  .hero__shot img{object-position:50% 70%}
  .hero__panel{
    background:
      linear-gradient(180deg,rgba(169,201,234,.5) 0%,rgba(209,223,236,0) 46%),
      linear-gradient(0deg,rgba(23,34,51,.82) 0%,rgba(23,34,51,.5) 30%,rgba(23,34,51,0) 52%);
    padding-top:calc(var(--bar) + 4px);
  }
  .hero__top{position:absolute;left:var(--pad);right:var(--pad);top:18px}
  .hero__logo{width:clamp(170px,46vw,240px)}
  .hero__sig{justify-items:start}
  .hero__sunrise{display:none}
  .hero__sunrise--white{display:block;width:96px}
  .hero__mark{display:none}
  .hero__title{align-self:start}
  .facts{grid-template-columns:minmax(0,1fr);gap:12px;align-self:start}
  .hero__shot::after{display:none}
  .hero__foot{color:var(--mist);text-shadow:0 1px 12px rgba(23,34,51,.45)}
  .head:not(.is-on){color:var(--navy)}
  .feats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stats li:nth-last-child(2){border-bottom:0}
  .agents{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  .hero__title{font-size:clamp(2.05rem,9.4vw,2.9rem)}
  .h-display br{display:none}
  .hero__title br{display:inline}
  /* the annotated aerial keeps a legible size and pans sideways; the
     headline comes off the picture and sits above it */
  .aerial{display:flex;flex-direction:column}
  .intro__head{position:relative;order:-1;width:auto;background:var(--sky-2);padding-block:36px 30px}
  .intro{background:var(--sky-2)}
  .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__frame::before{display:none}
  .aerial__hint{display:flex;align-items:center;gap:8px;justify-content:center;padding:12px 0 18px;font-size:.74rem;color:var(--mute-ink);background:var(--sky-2)}
  .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))}
  .spec__pair{grid-template-columns:minmax(0,1fr)}
  .dist{grid-template-columns:minmax(0,1fr)}
  .agents{grid-template-columns:minmax(0,1fr)}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:14px}
  /* the foot stacks on the left here, so the cue moves to the right edge */
  .hero .hero__cue{left:auto;right:var(--pad);transform:none}
  .head.is-on ~ main .hero .hero__cue{transform:translateY(12px)}
}
@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>*{opacity:1!important;transform:none!important}
  .draw path,.hero__mark path{stroke-dashoffset:0!important}
  .bar::after,.shot--bar::after{transform:none!important}
}