/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --tar:        #0F1216;
  --bitumen:    #1A1F25;
  --bitumen-2:  #22282F;
  --faded:      #5C6067;
  --aggregate:  #9AA1A9;
  --paint:      #F4F6F2;
  --yellow:     #EFC02B;
  --yellow-dim: #B9922033;
  --blue:       #1246A0;
  --blue-soft:  #1246A01A;
  --plan:       #EDEFEA;
  --plan-2:     #E2E5DE;
  --ink:        #171A1E;

  --spine: 84px;
  --gut: clamp(20px, 5vw, 64px);
  --measure: 62ch;

  --f-display: 'Archivo', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans', system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* Aggregate grain, generated not photographed */
:root{
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --coarse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.18' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 .5 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23c)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   IMAGES — the only place image paths appear.
   Currently pointing at the live WordPress site so the page works
   straight out of the box. Download the three files into
   assets/img/ (see README.md) then comment out the REMOTE block
   and uncomment LOCAL.
   ------------------------------------------------------------ */
:root{
  /* REMOTE */
  --img-roadwork: url("https://apexasphalt.co.za/wp-content/uploads/2021/10/asphalt-construction-road-work.jpg");
  --img-crew:     url("https://apexasphalt.co.za/wp-content/uploads/2021/10/IMG-20211025-WA0013.jpg");
  --img-roller:   url("https://apexasphalt.co.za/wp-content/uploads/2021/10/types-of-rollers.jpg");

  /* LOCAL
  --img-roadwork: url("../img/hero-roadwork.jpg");
  --img-crew:     url("../img/crew-on-site.jpg");
  --img-roller:   url("../img/compaction-roller.jpg");
  */
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

/* sticky bar would otherwise sit on top of every anchored heading */
section[id],header[id]{scroll-margin-top:84px}
#top{scroll-margin-top:0}
body{
  margin:0;
  background:var(--tar);
  color:var(--paint);
  font-family:var(--f-body);
  font-size:clamp(16px,.55vw + 14.4px,18px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:rgba(239,192,43,.22);
}

/* long words must never widen the page on a narrow screen */
h1,h2,h3,h4,p,li,summary,a{overflow-wrap:break-word}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  letter-spacing:-.028em;
  line-height:.96;
  margin:0;
  text-wrap:balance;
}

p{margin:0 0 1.1em; max-width:var(--measure)}
p:last-child{margin-bottom:0}

a{color:inherit}

::selection{background:var(--yellow); color:var(--tar)}

:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--yellow); color:var(--tar);
  padding:14px 20px; font-weight:700;
}
.skip:focus{left:12px; top:12px}

/* ============================================================
   SURFACES
   ============================================================ */
.surface{
  position:relative;
  background:var(--bitumen);
  color:var(--paint);
}
.surface::before{
  content:"";
  position:absolute; inset:0;
  background-image:var(--coarse),var(--grain);
  background-size:220px 220px,300px 300px;
  opacity:.5;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.surface--deep{background:var(--tar)}

/* the pale "site plan" sections */
.plan{
  position:relative;
  background:var(--plan);
  color:var(--ink);
}
.plan::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--blue-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--blue-soft) 1px,transparent 1px);
  background-size:34px 34px;
  pointer-events:none;
  opacity:.9;
}
.plan h2,.plan h3{color:var(--ink)}

/* seam between two lays of asphalt */
.seam{
  position:relative;
  height:0;
}
.seam::after{
  content:"";
  position:absolute; left:0; right:0; top:-1px; height:2px;
  background:linear-gradient(90deg,
    transparent 0 4%, #ffffff14 4% 22%, transparent 22% 30%,
    #ffffff10 30% 61%, transparent 61% 68%, #ffffff16 68% 96%, transparent 96%);
}

section{position:relative}

.wrap{
  position:relative; z-index:2;
  padding-left:calc(var(--spine) + var(--gut));
  padding-right:var(--gut);
  max-width:1360px;
}
.pad{padding-top:clamp(72px,10vw,140px); padding-bottom:clamp(72px,10vw,140px)}

/* ============================================================
   CHAINAGE SPINE  (scroll position, in road-survey distance)
   ============================================================ */
.spine{
  position:fixed; left:0; top:0; bottom:0; width:var(--spine);
  z-index:60; pointer-events:none;
  mix-blend-mode:normal;
}
.spine__rail{
  position:absolute; left:38px; top:0; bottom:0; width:6px;
  background:repeating-linear-gradient(to bottom,
    #ffffff26 0 22px, transparent 22px 44px);
}
.spine__fill{
  position:absolute; left:38px; top:0; width:6px; height:0;
  background:repeating-linear-gradient(to bottom,
    var(--yellow) 0 22px, transparent 22px 44px);
  box-shadow:0 0 16px #efc02b55;
  transition:height .12s linear;
}
.spine__marks{position:absolute; inset:0}
.mark{
  position:absolute; left:0; width:var(--spine);
  display:flex; align-items:center; gap:8px;
  transform:translateY(-50%);
  transition:opacity .3s var(--ease), color .3s var(--ease);
  color:var(--faded);
  opacity:.55;
}
.mark__tick{width:22px; height:2px; background:currentColor; margin-left:9px; flex:none}
.mark__num{
  font-family:var(--f-display); font-weight:700; font-size:11px;
  letter-spacing:.02em; white-space:nowrap;
}
.mark.is-on{color:var(--yellow); opacity:1}
.mark.is-on .mark__tick{width:30px; margin-left:1px}

/* mobile: spine collapses to a top bar */
.topbar{
  position:fixed; left:0; top:0; height:3px; width:100%; z-index:70;
  background:transparent; display:none;
}
.topbar__fill{height:100%; width:0; background:var(--yellow)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:95;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px var(--gut) 14px calc(var(--spine) + 6px);
  background:linear-gradient(to bottom,#0F1216F2,#0F121600);
  backdrop-filter:blur(6px);
  transition:background .35s var(--ease), padding .35s var(--ease);
}
.nav.is-stuck{
  background:#0F1216F5;
  border-bottom:1px solid #ffffff12;
  padding-top:10px; padding-bottom:10px;
}
.brand{
  display:flex; align-items:baseline; gap:10px;
  text-decoration:none; flex:none;
}
.brand__word{
  font-family:var(--f-display); font-weight:900; font-size:22px;
  letter-spacing:-.04em; color:var(--paint);
}
.brand__dash{
  width:26px; height:5px; background:var(--yellow); align-self:center;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.brand__sub{
  font-size:11px; color:var(--aggregate); font-weight:500;
  letter-spacing:.04em;
}
.nav__links{display:flex; gap:clamp(10px,1.6vw,26px); align-items:center}
.nav__links a{
  text-decoration:none; font-size:14px; font-weight:500;
  color:var(--aggregate); padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
  white-space:nowrap;
}
@media(hover:hover){ .nav__links a:hover{color:var(--paint); border-color:var(--yellow)} }
.nav__links a.is-here{color:var(--paint); border-color:var(--yellow)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:15px;
  letter-spacing:-.01em;
  padding:13px 24px;
  border:2px solid var(--yellow);
  background:var(--yellow); color:var(--tar);
  text-decoration:none; cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
@media(hover:hover){ .btn:hover{background:#FFD24A; box-shadow:0 0 0 4px #efc02b2e} }
.btn--ghost{background:transparent; color:var(--yellow)}
@media(hover:hover){ .btn--ghost:hover{background:var(--yellow); color:var(--tar)} }
.btn--plan{border-color:var(--blue); background:var(--blue); color:#fff}
@media(hover:hover){ .btn--plan:hover{background:#0d3a89; box-shadow:0 0 0 4px #1246a026} }
.btn--sm{padding:10px 18px; font-size:14px}
.nav .btn{flex:none}
@media(max-width:1080px){ .nav__links{display:none} }

/* ============================================================
   HERO — the paving sequence
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:#4A4D53;
  isolation:isolate;
}

/* old, faded, cracked surface underneath */
.hero__old{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 20% 10%,#6A6D73 0%,#4E5157 50%,#3D4046 100%);
}
.hero__old::after{
  content:"";
  position:absolute; inset:0;
  background-image:var(--coarse),var(--grain);
  background-size:180px 180px,240px 240px;
  opacity:.85; mix-blend-mode:multiply;
}
.hero__cracks{
  position:absolute; inset:0; z-index:1;
  opacity:.55;
}

/* freshly laid surface + the content it reveals */
.hero__fresh{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(105deg,#1B2026 0%,#12161B 45%,#191E24 100%);
  clip-path:inset(0 100% 0 0);
}
.hero__fresh::after{
  content:"";
  position:absolute; inset:0;
  background-image:var(--coarse),var(--grain);
  background-size:200px 200px,300px 300px;
  opacity:.45; mix-blend-mode:overlay;
}
/* photograph, sunk deep into the new surface */
.hero__photo{
  position:absolute; inset:0;
  background-image:var(--img-roadwork);
  background-size:cover; background-position:center 62%;
  opacity:.22;
  filter:grayscale(1) contrast(1.25);
  mix-blend-mode:luminosity;
}
.hero__vig{
  position:absolute; inset:0;
  background:linear-gradient(to top,#0F1216 4%,#0f121600 46%),
             linear-gradient(100deg,#0F1216CC 0%,#0f121600 58%);
}

/* the paver: leading edge of the new lay */
.hero__paver{
  position:absolute; top:0; bottom:0; left:0; width:120px; z-index:4;
  transform:translateX(-140px);
  pointer-events:none;
}
.hero__edge{
  position:absolute; top:0; bottom:0; right:0; width:3px;
  background:linear-gradient(to bottom,#EFC02B00,#EFC02B,#EFC02B00);
  box-shadow:0 0 30px 6px #efc02b40;
}
.hero__heat{
  position:absolute; top:0; bottom:0; right:0; width:120px;
  background:linear-gradient(90deg,#0f121600,#EFC02B14 55%,#EFC02B26);
  filter:blur(6px);
}

.hero__inner{
  position:relative; z-index:5;
  width:100%;
  padding-left:calc(var(--spine) + var(--gut));
  padding-right:var(--gut);
  padding-bottom:clamp(28px,4vw,52px);
  padding-top:130px;
  max-width:1360px;
}

.hero h1{
  font-size:clamp(2.6rem,8.4vw,7.4rem);
  font-weight:900;
  letter-spacing:-.045em;
  line-height:.9;
  max-width:15ch;
  margin-bottom:.42em;
}
.hero h1 .lo{color:var(--aggregate); font-weight:700}

/* the centre line, dashed in under the headline */
.centreline{
  height:9px; width:min(560px,92%);
  background:repeating-linear-gradient(90deg,
    var(--yellow) 0 46px, transparent 46px 76px);
  background-size:0% 100%;
  background-repeat:no-repeat;
  margin-bottom:clamp(22px,3vw,34px);
}

.hero__lede{
  font-size:clamp(1.02rem,1.4vw,1.24rem);
  color:#D6DBE0;
  max-width:56ch;
  margin-bottom:clamp(24px,3vw,34px);
}
.hero__acts{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:clamp(38px,5vw,60px)}

/* survey scale rule along the foot of the hero */
.scale{
  position:relative;
  border-top:1px solid #ffffff2e;
  padding-top:18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.scale::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:9px;
  background:repeating-linear-gradient(90deg,
    #ffffff40 0 1px, transparent 1px 26px);
}
.scale__item{position:relative; padding-right:12px}
.scale__item::before{
  content:""; position:absolute; left:0; top:-19px; width:2px; height:15px;
  background:var(--yellow);
}
.scale__n{
  display:block;
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.35rem,2.5vw,2.1rem);
  letter-spacing:-.035em; line-height:1;
  color:var(--paint);
}
.scale__l{
  display:block; font-size:12.5px; color:var(--aggregate);
  line-height:1.35; margin-top:7px; max-width:22ch;
}
@media(max-width:760px){
  .scale{grid-template-columns:repeat(2,1fr); gap:22px 10px}
}

/* ============================================================
   TYPE HELPERS
   ============================================================ */
.h2{
  font-size:clamp(2rem,4.6vw,3.7rem);
  font-weight:900; letter-spacing:-.04em;
  max-width:17ch;
  margin-bottom:.5em;
}
.h3{
  font-size:clamp(1.22rem,1.9vw,1.6rem);
  font-weight:800; letter-spacing:-.028em;
  margin-bottom:.55em;
}
.lede{
  font-size:clamp(1.04rem,1.35vw,1.2rem);
  color:#CDD3D9;
  max-width:58ch;
}
.plan .lede{color:#43494F}
.dim{color:var(--aggregate)}
.plan .dim{color:#5B6167}

.rule-y{
  width:54px; height:6px; background:var(--yellow);
  margin-bottom:26px;
}
.plan .rule-y{background:var(--blue)}

.cols{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
@media(max-width:940px){ .cols{grid-template-columns:1fr} }

/* ============================================================
   ABOUT
   ============================================================ */
.about__figure{
  position:relative;
  aspect-ratio:4/5;
  background:#2A3037 var(--img-crew) center/cover;
  filter:grayscale(.35) contrast(1.06);
  border-left:6px solid var(--yellow);
}
.about__figure::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(200deg,#0f121600 40%,#0F1216CC);
}
.about__cap{
  position:absolute; z-index:2; left:20px; right:20px; bottom:18px;
  font-size:13px; color:#D6DBE0;
}

.creds{
  list-style:none; margin:34px 0 0; padding:0;
  border-top:1px solid #ffffff1f;
}
.creds li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px; align-items:baseline;
  padding:16px 0;
  border-bottom:1px solid #ffffff1f;
}
.creds b{
  font-family:var(--f-display); font-weight:800; font-size:15px;
  color:var(--yellow); letter-spacing:-.01em; white-space:nowrap;
}
.creds span{font-size:15px; color:#CDD3D9; line-height:1.5}

/* ============================================================
   MARKET — 400 million m²
   ============================================================ */
.bignum{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(3rem,10vw,8.4rem);
  letter-spacing:-.055em; line-height:.84;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.bignum sup{
  font-size:.26em; vertical-align:super; letter-spacing:0;
  margin-left:.12em; color:var(--blue);
}
.bignum__cap{
  font-size:1.02rem; color:#43494F; max-width:34ch; margin-top:12px;
}

.grid400{
  display:grid;
  grid-template-columns:repeat(20,1fr);
  gap:3px;
  margin-top:30px;
  max-width:520px;
}
.grid400 i{
  aspect-ratio:1;
  background:#C9CFC6;
  transform:scale(.55);
  opacity:.35;
  transition:transform .34s var(--ease-out), background .34s var(--ease-out), opacity .34s var(--ease-out);
}
.grid400 i.on{transform:scale(1); opacity:1; background:var(--ink)}
.grid400 i.hot{background:var(--yellow)}
.grid400__key{
  font-size:12.5px; color:#5B6167; margin-top:12px;
}

.why{list-style:none; margin:0; padding:0; counter-reset:w}
.why li{
  position:relative;
  padding:15px 0 15px 46px;
  border-bottom:1px solid #1246a026;
  font-size:15.5px; color:#3B4147;
  line-height:1.5;
}
.why li:first-child{border-top:1px solid #1246a026}
.why li::before{
  content:"";
  position:absolute; left:0; top:22px;
  width:26px; height:2px; background:var(--blue);
}

.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,60px);
  margin-top:clamp(46px,6vw,80px);
  align-items:start;
}
@media(max-width:860px){ .split{grid-template-columns:1fr} }

.panel{
  border-top:4px solid var(--blue);
  padding-top:22px;
}
.panel--y{border-color:var(--yellow)}

/* ============================================================
   THE OFFER — manifest
   ============================================================ */
.price{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin-bottom:8px;
}
.price__r{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(2.8rem,7.2vw,5.6rem);
  letter-spacing:-.05em; line-height:.88;
  color:var(--yellow);
  font-variant-numeric:tabular-nums;
}
.price__x{font-size:15px; color:var(--aggregate); font-weight:500}

.manifest{
  list-style:none; margin:32px 0 0; padding:0;
  border-top:1px solid #ffffff1f;
  counter-reset:m;
}
.manifest li{
  position:relative;
  display:grid; grid-template-columns:34px 1fr; gap:14px;
  align-items:start;
  padding:17px 0;
  border-bottom:1px solid #ffffff1f;
}
.manifest .tick{
  width:22px; height:22px; margin-top:1px;
  border:2px solid #ffffff33;
  position:relative; flex:none;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.manifest .tick::after{
  content:"";
  position:absolute; left:4px; top:8px;
  width:11px; height:5px;
  border-left:2.5px solid var(--tar); border-bottom:2.5px solid var(--tar);
  transform:rotate(-45deg) scale(.2);
  opacity:0;
  transition:transform .28s var(--ease-out) , opacity .18s;
}
.manifest li.packed .tick{background:var(--yellow); border-color:var(--yellow)}
.manifest li.packed .tick::after{transform:rotate(-45deg) scale(1); opacity:1}
.manifest strong{
  display:block;
  font-family:var(--f-display); font-weight:700; font-size:16.5px;
  letter-spacing:-.015em; color:var(--paint); margin-bottom:3px;
}
.manifest span{font-size:14.5px; color:var(--aggregate); line-height:1.5; display:block; max-width:52ch}

.trailer-note{
  margin-top:30px;
  border-left:4px solid var(--yellow);
  padding:4px 0 4px 18px;
  font-size:15.5px; color:#CDD3D9;
}

.offer__figure{
  position:relative; aspect-ratio:3/4;
  background:#2A3037 var(--img-roller) center/cover;
  filter:grayscale(.4) contrast(1.05);
}
.offer__figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,#0f121633,#0F1216D9);
}
.offer__cap{
  position:absolute; z-index:2; left:20px; right:20px; bottom:18px;
  font-size:13px; color:#D6DBE0;
}

/* ============================================================
   READINESS — user-driven checklist
   ============================================================ */
.ready{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,4.5vw,64px);
  align-items:start;
}
@media(max-width:940px){ .ready{grid-template-columns:1fr} }

.check{list-style:none; margin:0; padding:0}
.check li{border-bottom:1px solid #1246a026}
.check li:first-child{border-top:1px solid #1246a026}
.check label{
  display:grid; grid-template-columns:26px 1fr; gap:16px;
  align-items:center;
  padding:17px 4px; cursor:pointer;
  font-size:16px; color:var(--ink);
  transition:background .18s;
}
@media(hover:hover){ .check label:hover{background:#1246a00d} }
.check input{position:absolute; opacity:0; width:0; height:0}
.box{
  width:24px; height:24px; border:2px solid var(--blue);
  position:relative; background:#fff; flex:none;
  transition:background .2s var(--ease), transform .2s var(--ease-out);
}
.box::after{
  content:""; position:absolute; left:5px; top:8px;
  width:12px; height:6px;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) scale(.2); opacity:0;
  transition:transform .26s var(--ease-out), opacity .16s;
}
.check input:checked + .box{background:var(--blue)}
.check input:checked + .box::after{transform:rotate(-45deg) scale(1); opacity:1}
.check input:focus-visible + .box{outline:3px solid var(--yellow); outline-offset:3px}
.check input:checked ~ .ctext{color:#2C3238}
.ctext{transition:color .2s}

.meter{
  border:2px solid var(--ink);
  background:#fff;
  padding:26px 24px;
  position:sticky; top:96px;
}
.meter__count{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(2.4rem,5vw,3.6rem); letter-spacing:-.05em;
  line-height:.9; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.meter__of{font-size:.42em; color:#71777D; letter-spacing:-.01em}
.meter__bar{
  height:12px; background:var(--plan-2); margin:18px 0 16px;
  position:relative; overflow:hidden;
}
.meter__bar i{
  display:block; height:100%; width:0%;
  background:repeating-linear-gradient(90deg,var(--blue) 0 18px,#1246a0bb 18px 24px);
  transition:width .4s var(--ease-out);
}
.meter__bar.full i{background:repeating-linear-gradient(90deg,var(--yellow) 0 18px,#d9ac21 18px 24px)}
.meter__msg{font-size:15px; color:#43494F; min-height:3.2em; line-height:1.5; margin-bottom:18px}
.meter .btn{width:100%}
.meter.is-full{border-color:var(--blue); box-shadow:0 0 0 6px #1246a01f}

@media(max-width:940px){ .meter{position:static} }

/* ============================================================
   INCOME
   ============================================================ */
.chart{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2.4vw,28px);
  align-items:end;
  height:clamp(240px,34vw,400px);
  margin-top:clamp(34px,5vw,56px);
  border-bottom:2px solid #ffffff2b;
  padding-bottom:0;
}
.bar{position:relative; height:100%; display:flex; align-items:flex-end}
.bar__fill{
  width:100%;
  height:var(--h);
  transform:scaleY(0); transform-origin:bottom;
  background:
    repeating-linear-gradient(to bottom, #ffffff00 0 26px, #ffffff00 26px 40px),
    linear-gradient(180deg,#2A3037,#171B20);
  border-top:5px solid var(--yellow);
  position:relative;
  transition:transform 1.05s var(--ease-out);
}
.bar__fill::after{
  content:"";
  position:absolute; left:50%; top:14px; bottom:14px; width:7px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(to bottom,#EFC02B 0 24px,transparent 24px 46px);
  opacity:.5;
}
.bar.on .bar__fill{transform:scaleY(1)}
.bar__val{
  position:absolute; left:0; right:0; bottom:calc(var(--h) + 14px);
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.05rem,2.1vw,1.7rem); letter-spacing:-.035em;
  color:var(--paint); font-variant-numeric:tabular-nums;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s .55s var(--ease), transform .5s .55s var(--ease-out);
}
.bar.on .bar__val{opacity:1; transform:none}
.chart__x{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2.4vw,28px);
  margin-top:14px;
}
.chart__x span{font-size:14px; color:var(--aggregate); font-weight:500}

.monthly{
  margin-top:clamp(34px,5vw,54px);
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  border-top:1px solid #ffffff1f; padding-top:26px;
}
.monthly b{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(1.8rem,4.4vw,3.2rem); letter-spacing:-.045em;
  color:var(--yellow); line-height:1;
}
.monthly span{font-size:15px; color:var(--aggregate); max-width:34ch}

.disclaim{
  margin-top:26px; font-size:13px; color:#7C838A; max-width:66ch; line-height:1.55;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1px solid #1246a029; margin-top:8px}
.faq details{border-bottom:1px solid #1246a029}
.faq summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:1fr 26px; gap:18px; align-items:center;
  padding:22px 4px;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.02rem,1.7vw,1.32rem); letter-spacing:-.022em;
  color:var(--ink);
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
@media(hover:hover){ .faq summary:hover{color:var(--blue)} }
.faq .plus{position:relative; width:20px; height:20px; justify-self:end}
.faq .plus::before,.faq .plus::after{
  content:""; position:absolute; background:var(--blue);
  transition:transform .3s var(--ease-out), opacity .2s;
}
.faq .plus::before{left:0; top:9px; width:20px; height:2.5px}
.faq .plus::after{left:9px; top:0; width:2.5px; height:20px}
.faq details[open] .plus::after{transform:rotate(90deg); opacity:0}
.faq .ans{
  overflow:hidden;
  padding:0 4px 24px;
  max-width:66ch;
  color:#43494F; font-size:15.6px;
}
.faq details[open] .ans{animation:reveal .42s var(--ease-out)}
@keyframes reveal{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}

/* ============================================================
   CONTACT
   ============================================================ */
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
@media(max-width:940px){ .contact__grid{grid-template-columns:1fr} }

.field{margin-bottom:18px}
.field label{
  display:block; font-size:13.5px; font-weight:600; color:var(--aggregate);
  margin-bottom:7px; letter-spacing:.005em;
}
.field input,.field textarea,.field select{
  width:100%; font-family:var(--f-body); font-size:16px;
  background:#12161B; color:var(--paint);
  border:1.5px solid #ffffff26;
  padding:13px 14px;
  transition:border-color .2s, background .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--yellow); background:#161B21; outline:none;
}
.field textarea{min-height:130px; resize:vertical; line-height:1.55}
.formnote{font-size:13px; color:#7C838A; margin-top:14px; max-width:52ch}
.formok{
  display:none; border-left:4px solid var(--yellow);
  padding:14px 0 14px 18px; margin-top:18px;
  font-size:15px; color:#D6DBE0;
}
.formok.show{display:block; animation:reveal .4s var(--ease-out)}

.details{list-style:none; margin:0 0 30px; padding:0; border-top:1px solid #ffffff1f}
.details li{
  padding:18px 0; border-bottom:1px solid #ffffff1f;
  display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:baseline;
}
.details b{font-size:13px; color:var(--aggregate); font-weight:600}
.details a{color:var(--paint); text-decoration:none; border-bottom:1.5px solid var(--yellow)}
@media(hover:hover){ .details a:hover{color:var(--yellow)} }
.details div{font-size:16px; line-height:1.6}

.map{
  width:100%; aspect-ratio:16/10; border:0;
  filter:grayscale(1) invert(.9) contrast(.85) hue-rotate(180deg);
  background:#22282F;
}

/* closing band */
.closer{
  background:var(--yellow); color:var(--tar);
  position:relative; overflow:hidden;
}
.closer::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:14px;
  background:repeating-linear-gradient(90deg,var(--tar) 0 34px,transparent 34px 68px);
}
.closer h2{
  font-size:clamp(1.9rem,5.6vw,4.4rem);
  font-weight:900; letter-spacing:-.045em; max-width:16ch;
  color:var(--tar);
}
.closer p{color:#2A2308; max-width:52ch; margin-top:18px; font-size:1.06rem}
.closer .btn{background:var(--tar); border-color:var(--tar); color:var(--yellow); margin-top:28px}
@media(hover:hover){ .closer .btn:hover{background:#000; box-shadow:0 0 0 4px #0f121633} }

footer{
  background:var(--tar); color:var(--aggregate);
  padding:34px var(--gut) 40px calc(var(--spine) + var(--gut));
  font-size:13.5px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid #ffffff12;
}
footer a{color:var(--aggregate); text-decoration:none}
@media(hover:hover){ footer a:hover{color:var(--yellow)} }
.foot__links{display:flex; gap:18px; flex-wrap:wrap}


/* ============================================================
   BURGER + MOBILE MENU
   ============================================================ */
.burger{
  display:none;
  width:48px; height:48px; flex:none; padding:0;
  align-items:center; justify-content:center;
  background:transparent; border:1.5px solid #ffffff30;
  cursor:pointer; position:relative;
  transition:border-color .2s;
}
.burger span{
  position:absolute; left:13px; width:21px; height:2.5px;
  top:calc(50% - 1.25px);
  background:var(--paint);
  transition:transform .32s var(--ease-out), opacity .2s;
}
.burger span:nth-child(1){transform:translateY(-4.5px)}
.burger span:nth-child(2){transform:translateY(4.5px)}
.burger[aria-expanded="true"]{border-color:var(--yellow)}
.burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:rotate(-45deg)}

.menu{
  position:fixed; inset:0; z-index:90;
  background:var(--tar);
  opacity:0;
  transition:opacity .26s var(--ease);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.menu::before{
  content:"";
  position:absolute; inset:0;
  background-image:var(--coarse),var(--grain);
  background-size:220px 220px,300px 300px;
  opacity:.4; mix-blend-mode:overlay; pointer-events:none;
}
.menu.is-open{opacity:1}
.menu__inner{
  position:relative; z-index:2;
  min-height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(96px + env(safe-area-inset-top)) var(--gut)
          calc(40px + env(safe-area-inset-bottom));
}
.mlink{
  display:flex; align-items:baseline; gap:16px;
  padding:17px 2px;
  border-bottom:1px solid #ffffff18;
  text-decoration:none; color:var(--paint);
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.45rem,6.4vw,2.3rem); letter-spacing:-.035em;
  line-height:1.05;
  opacity:0; transform:translateY(10px);
}
.mlink:first-of-type{border-top:1px solid #ffffff18}
.mlink .ch{
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
  color:var(--yellow); flex:none; width:44px;
}
.menu.is-open .mlink{animation:mIn .42s var(--ease-out) forwards}
.menu.is-open .mlink:nth-of-type(1){animation-delay:.04s}
.menu.is-open .mlink:nth-of-type(2){animation-delay:.08s}
.menu.is-open .mlink:nth-of-type(3){animation-delay:.12s}
.menu.is-open .mlink:nth-of-type(4){animation-delay:.16s}
.menu.is-open .mlink:nth-of-type(5){animation-delay:.20s}
.menu.is-open .mlink:nth-of-type(6){animation-delay:.24s}
@keyframes mIn{to{opacity:1; transform:none}}

.menu .btn{margin-top:30px; width:100%; padding:18px 24px; font-size:16px}
.menu__foot{
  display:flex; flex-direction:column; gap:10px;
  margin-top:28px; padding-top:22px;
  border-top:1px solid #ffffff18;
}
.menu__foot a{
  color:var(--aggregate); text-decoration:none; font-size:15px;
  padding:4px 0;
}

/* menu open: freeze the page behind it, and let the bar go transparent */
body.menu-open{position:fixed; left:0; right:0; width:100%; overflow:hidden}
body.menu-open .nav{background:transparent; backdrop-filter:none; border-bottom-color:transparent}
body.menu-open .spine,body.menu-open .topbar{opacity:0}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- 1080px: primary nav no longer fits, switch to the menu --- */
@media(max-width:1080px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav{gap:12px}
}

/* --- 820px: the chainage spine gives way to a top progress bar --- */
@media(max-width:820px){
  :root{--spine:0px}
  .spine{display:none}
  .topbar{display:block}
  .nav{padding-left:max(var(--gut),env(safe-area-inset-left))}
  .nav,footer,.wrap,.hero__inner{padding-left:var(--gut)}
  footer{padding-left:var(--gut)}
  section[id],header[id]{scroll-margin-top:72px}

  /* headline sizes that were tuned for a wide viewport */
  .h2{font-size:clamp(1.85rem,6.4vw,3.7rem); max-width:20ch}
  .lede{font-size:1.02rem}
  .bignum{font-size:clamp(2.3rem,12vw,8.4rem)}
  .grid400{gap:2px; max-width:100%}
  .price__r{font-size:clamp(2.2rem,9.5vw,5.6rem)}
  .price{gap:8px}
  .chart{height:clamp(200px,44vw,400px)}
  .meter{padding:22px 20px}
}

/* --- 620px: the bar keeps brand + burger only --- */
@media(max-width:620px){
  .nav__cta{display:none}
  .nav{padding-top:10px; padding-bottom:10px}
  section[id],header[id]{scroll-margin-top:66px}

  .hero__inner{padding-top:104px}
  .hero h1{font-size:clamp(2.15rem,10.5vw,7.4rem); max-width:100%}
  .hero__lede{font-size:1rem; margin-bottom:26px}
  .centreline{height:7px; width:min(300px,86%)}

  /* stat rule: two rows of two, each tick still reading as a measure */
  .scale{grid-template-columns:repeat(2,1fr); gap:20px 14px}
  .scale__n{font-size:1.3rem}
  .scale__l{font-size:12px}

  /* tables of two columns have nowhere to go but down */
  .creds li{grid-template-columns:1fr; gap:4px}
  .creds b{font-size:13px}
  .details li{grid-template-columns:1fr; gap:3px; padding:15px 0}
  .details b{font-size:12px}

  .manifest li{grid-template-columns:26px 1fr; gap:12px; padding:15px 0}
  .manifest strong{font-size:15.5px}
  .faq summary{padding:19px 2px}
  .monthly{gap:10px}
  .map{aspect-ratio:4/3}

  .about__cap,.offer__cap{font-size:12.5px; left:16px; right:16px}
}

/* --- 940px: columns stack, so portrait crops must flatten --- */
@media(max-width:940px){
  .about__figure{aspect-ratio:16/10}
  .offer__figure{aspect-ratio:16/10; background-position:center 40%}
}
@media(max-width:620px){
  .about__figure,.offer__figure{aspect-ratio:4/3}
}

/* --- 430px: smallest phones. Actions go full width. --- */
@media(max-width:430px){
  :root{--gut:18px}
  .brand__sub{display:none}
  .hero__acts{gap:10px}
  .hero__acts .btn{width:100%}
  .hero h1{font-size:clamp(2rem,11vw,7.4rem)}
  .scale{gap:18px 12px}
  .scale__n{font-size:1.2rem}

  /* hero vertical rhythm, so both actions clear the fold on a 568px screen */
  .hero__inner{padding-top:92px}
  .hero h1{margin-bottom:.32em}
  .centreline{margin-bottom:18px}
  .hero__lede{font-size:.95rem; line-height:1.5; margin-bottom:22px}
  .bignum{font-size:2.35rem}
  .grid400{gap:1.5px}
  .chart{gap:8px}
  .bar__val{font-size:.96rem}
  .closer .btn,.contact__grid .btn{width:100%}
  .meter .btn{padding:16px 18px}
}

/* --- 340px: one column is all that is left --- */
@media(max-width:340px){
  .scale{grid-template-columns:1fr; gap:14px}
  .creds b{font-size:12.5px}
}

/* --- landscape phones: a full-height hero would hide everything --- */
@media(max-height:560px) and (orientation:landscape){
  /* markers would sit on top of each other in a short viewport */
  :root{--spine:0px}
  .spine{display:none}
  .topbar{display:block}
  .nav,.wrap,.hero__inner,footer{padding-left:var(--gut)}

  .hero{min-height:auto}
  .hero__inner{padding-top:92px; padding-bottom:34px}
  .hero h1{font-size:clamp(1.7rem,5.4vw,3rem)}
  .hero__lede{font-size:.96rem; margin-bottom:20px}
  .scale{grid-template-columns:repeat(4,1fr)}
  .scale__n{font-size:1.1rem}
  .menu__inner{justify-content:flex-start}
  .mlink{padding:12px 2px; font-size:1.25rem}
  .menu .btn{margin-top:20px}
}

/* --- notched devices: keep content clear of the cutouts --- */
@supports(padding:max(0px)){
  .nav{padding-right:max(var(--gut),env(safe-area-inset-right))}
  .wrap{padding-right:max(var(--gut),env(safe-area-inset-right))}
  .hero__inner{padding-right:max(var(--gut),env(safe-area-inset-right))}
  footer{
    padding-right:max(var(--gut),env(safe-area-inset-right));
    padding-bottom:max(40px,env(safe-area-inset-bottom));
  }
}

/* --- coarse pointers: every target at least 44px --- */
@media(pointer:coarse){
  .brand{min-height:44px; align-items:center}
  .nav__links a{padding:12px 4px}
  .check label{padding:19px 4px}
  .faq summary{min-height:56px}
  .details a,.menu__foot a,.foot__links a{display:inline-block; padding:6px 0}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__fresh{clip-path:inset(0 0 0 0) !important}
  .hero__paver{display:none}
  .centreline{background-size:100% 100% !important}
  .bar__fill{transform:scaleY(1) !important}
  .bar__val{opacity:1 !important; transform:none !important}
  .grid400 i{transform:scale(1); opacity:1}
  .mlink{opacity:1 !important; transform:none !important}
}