/* ─────────────────────────────────────────────────────────────
   A note on where the value is
   Palette + type derived from a printed construction programme.
   The only red on this page is the critical path.
   ───────────────────────────────────────────────────────────── */

:root{
  --paper:#ffffff;
  --ink:#0b0b0b;
  --graphite:#8a8a8a;
  --rule:#e4e4e2;
  --wash:#f4f4f1;
  --critical:#e0261a;

  --rail:5.5rem;          /* chainage spine width */
  --gut:clamp(1.25rem, 4vw, 5rem);
  --measure:38rem;

  --f-display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-voice:"Newsreader", Georgia, serif;
  --f-data:"Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;

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

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-display);
  font-size:clamp(1rem,.94rem + .3vw,1.125rem);
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{display:block;max-width:100%}

::selection{background:var(--ink);color:var(--paper)}

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

/* ── preloader ─────────────────────────────────────────────── */
.load{
  position:fixed; inset:0; z-index:100;
  background:var(--paper);
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-end;
  padding:var(--gut);
  transition:opacity .5s var(--ease), visibility .5s;
}
.load.is-done{opacity:0; visibility:hidden}
.load__ch{
  font-family:var(--f-data);
  font-size:clamp(2.5rem,10vw,7rem);
  letter-spacing:-.04em;
  line-height:.9;
  font-variant-numeric:tabular-nums;
}
.load__bar{
  margin-top:1.25rem;
  width:min(28rem,60vw); height:1px;
  background:var(--rule);
}
.load__bar i{
  display:block; height:100%; width:0;
  background:var(--critical);
}

/* ── fixed chrome ──────────────────────────────────────────── */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; justify-content:flex-end; align-items:center;
  padding:1.15rem var(--gut);
  font-family:var(--f-data);
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink);
  mix-blend-mode:difference;
  filter:invert(1);
  pointer-events:none;
}
.bar__r{font-variant-numeric:tabular-nums}

/* ── the spine (signature) ─────────────────────────────────── */
.spine{
  position:fixed; z-index:30;
  top:0; bottom:0; left:0;
  width:var(--rail);
  pointer-events:none;
  display:none;
}
/* The track and the ticks must read on both paper and full-bleed night
   imagery, so they are neutral at low alpha rather than blended — a
   difference blend turns the critical red cyan. */
.spine__line{
  position:absolute; top:0; bottom:0; left:calc(var(--rail) - 1px);
  width:1px; background:rgba(128,128,128,.34);
}
.spine__crit{
  position:absolute; left:calc(var(--rail) - 2px);
  top:0; width:3px; height:0;
  background:var(--critical);
  z-index:2;
}
.spine__ticks{position:absolute; inset:0}
.tick{
  position:absolute; right:0;
  display:flex; align-items:center; gap:.5rem;
  transform:translateY(-50%);
  opacity:.32;
  transition:opacity .45s var(--ease);
}
.tick.is-on{opacity:1}
.tick__n{
  font-family:var(--f-data);
  font-size:.625rem; letter-spacing:.06em;
  color:var(--graphite);
  font-variant-numeric:tabular-nums;
}
.tick.is-on .tick__n{color:var(--critical)}
.tick__r{width:.75rem; height:1px; background:rgba(128,128,128,.45)}
.tick.is-on .tick__r{background:var(--critical); width:1.25rem}

@media (min-width:64rem){ .spine{display:block} }

/* ── type scale ────────────────────────────────────────────── */
.h-display{
  margin:0;
  font-weight:500;
  font-size:clamp(2.6rem,8.4vw,8.5rem);
  line-height:.93;
  letter-spacing:-.045em;
}
.h-lead{
  margin:0;
  font-weight:500;
  font-size:clamp(1.75rem,4.1vw,3.6rem);
  line-height:1.05;
  letter-spacing:-.035em;
  max-width:19ch;
}
.eyebrow{
  display:block;
  font-family:var(--f-data);
  font-size:.6875rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--graphite);
}
.sub{
  margin:0 0 1.5rem;
  font-family:var(--f-data);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--graphite);
}
/* the voice — used only where the argument turns */
.voice{
  font-family:var(--f-voice);
  font-style:italic;
  font-weight:400;
  font-size:1.14em;
  letter-spacing:-.005em;
}

/* ── hero ──────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--gut);
  padding-bottom:1.75rem;
  color:var(--paper);
  overflow:hidden;
}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__media .media{width:100%; height:100%; object-fit:cover}
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,11,11,.42) 0%,rgba(11,11,11,.12) 38%,rgba(11,11,11,.78) 100%);
}
/* the document's title lives in the hero, not in the fixed bar —
   a fixed label collides with everything that scrolls under it */
.hero__label{
  position:relative; z-index:1;
  margin-bottom:auto;
  font-family:var(--f-data);
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.hero__type{position:relative; z-index:1}
.hero__sub{
  margin:1.1rem 0 0;
  font-size:clamp(1.1rem,2.4vw,2rem);
  line-height:1.2;          /* this strapline wraps; body leading is far too loose for it */
  letter-spacing:-.02em;
  max-width:36ch;
}
.hero__sub em{
  font-family:var(--f-voice);
  font-style:italic;
  font-size:1.1em;
}
.hero__meta{
  position:relative; z-index:1;
  margin-top:clamp(2.5rem,7vh,5rem);
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.28);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1rem 2rem;
}
.meta{display:flex; flex-direction:column; gap:.3rem}
.meta__k{
  font-family:var(--f-data);
  font-size:.625rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.meta__v{font-size:.9375rem; letter-spacing:-.01em}

/* ── sections ──────────────────────────────────────────────── */
.sec{
  padding:clamp(5rem,14vh,9.5rem) var(--gut);
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}
.sec__head{display:flex; flex-direction:column; gap:1.25rem}
.sec__body{max-width:var(--measure)}
.sec__body p{margin:0 0 1.25rem}
.sec__body p:last-child{margin-bottom:0}

@media (min-width:56rem){
  .sec{
    grid-template-columns:minmax(0,1fr) minmax(0,var(--measure));
    gap:clamp(2rem,6vw,6rem);
    align-items:start;
  }
  .sec__head{position:sticky; top:6rem}
  .ledger,.fits,.start{grid-column:2}
}

/* ── ledger (02) ───────────────────────────────────────────── */
.ledger{
  list-style:none;
  margin:1rem 0 0; padding:0;
  border-top:1px solid var(--rule);
  max-width:var(--measure);
}
.ledger__row{
  display:grid;
  grid-template-columns:2rem 1fr;
  gap:.35rem 1rem;
  padding:1.15rem 0;
  border-bottom:1px solid var(--rule);
}
.ledger__n{
  font-family:var(--f-data);
  font-size:.6875rem; letter-spacing:.08em;
  color:var(--critical);
  padding-top:.3rem;
}
.ledger__k{font-weight:500; letter-spacing:-.02em}
.ledger__v{
  grid-column:2;
  color:#4a4a4a;
  font-size:.9375rem;
  line-height:1.5;
}

/* ── model fits (03) ───────────────────────────────────────── */
.fits{margin-top:clamp(3rem,7vh,4.5rem); max-width:var(--measure)}
.fits__grid{margin:0; display:grid; gap:0}
.fits__item{
  display:grid;
  grid-template-columns:8rem 1fr;
  gap:1rem;
  padding:1.05rem 0;
  border-top:1px solid var(--rule);
}
.fits__item:last-child{border-bottom:1px solid var(--rule)}
.fits__item dt{
  font-family:var(--f-data);
  font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--graphite);
  padding-top:.2rem;
}
.fits__item dd{margin:0; font-size:.9375rem}

/* ── how to start (03) ─────────────────────────────────────── */
.start{margin-top:clamp(3rem,7vh,4.5rem); max-width:var(--measure)}
.start__list{list-style:none; margin:0; padding:0}
.start__list li{
  display:grid;
  grid-template-columns:2.5rem 1fr;
  gap:1rem;
  padding:1.05rem 0;
  border-top:1px solid var(--rule);
}
.start__list li:last-child{border-bottom:1px solid var(--rule)}
.start__list p{margin:0}
.start__n{
  font-family:var(--f-data);
  font-size:.8125rem;
  color:var(--critical);
  font-variant-numeric:tabular-nums;
}

/* ── plates ────────────────────────────────────────────────── */
.plate{margin:0; position:relative}
.plate--full .media{
  width:100%;
  height:clamp(22rem,78vh,52rem);
  object-fit:cover;
  clip-path:inset(12% 0 12% 0);
  transform:scale(1.06);
  transition:clip-path 1.15s var(--ease), transform 1.6s var(--ease);
}
.plate.is-in .media{clip-path:inset(0 0 0 0); transform:scale(1)}
.plate figcaption{
  padding:.9rem var(--gut) 0;
  font-family:var(--f-data);
  font-size:.6875rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--graphite);
}
.plate--dark{background:var(--ink)}

/* ── close ─────────────────────────────────────────────────── */
.close{
  padding:clamp(5rem,14vh,9rem) var(--gut);
  display:grid;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
.close__fig{margin:0; overflow:hidden}
.close__fig .media{
  width:100%; height:clamp(20rem,60vh,38rem);
  object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}
.close__lead{
  margin:0;
  font-size:clamp(1.6rem,3.6vw,3rem);
  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:500;
}
@media (min-width:56rem){
  .close{grid-template-columns:1fr 1fr}
}

/* ── sign-off ──────────────────────────────────────────────── */
.signoff{
  padding:clamp(4rem,10vh,6.5rem) var(--gut);
  background:var(--wash);
  display:flex; flex-direction:column; gap:1.5rem;
  align-items:flex-start;
}
.signoff__quote{
  margin:0; max-width:30ch;
  font-family:var(--f-voice);
  font-style:italic; font-weight:400;
  font-size:clamp(1.35rem,2.9vw,2.35rem);
  line-height:1.22; letter-spacing:-.015em;
}
.signoff__by{margin:0; display:flex; flex-direction:column; gap:.4rem}
.signoff__name{
  font-family:var(--f-data); font-weight:500;
  font-size:.8125rem; letter-spacing:.2em; text-transform:uppercase;
}
.signoff__role{
  font-family:var(--f-data);
  font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--graphite);
}

/* ── call to action ────────────────────────────────────────── */
.cta{
  padding:clamp(5rem,14vh,9rem) var(--gut);
  border-top:1px solid var(--rule);
  display:flex; flex-direction:column; gap:1.5rem;
  align-items:flex-start;
}
.cta__acts{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:.75rem}
.btn{
  display:inline-block;
  font-family:var(--f-data);
  font-size:.75rem; letter-spacing:.13em; text-transform:uppercase;
  padding:1.05rem 2.25rem;
  border:1px solid currentColor;
  background:none;
  cursor:pointer;
  text-decoration:none;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn--go{color:var(--critical)}
.btn--go:hover,.btn--go:focus-visible{background:var(--critical); color:var(--paper)}

/* ── company details ───────────────────────────────────────── */
.details{
  padding:clamp(4rem,10vh,6.5rem) var(--gut);
  background:var(--wash);
}
.details__grid{
  margin:1.75rem 0 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:0 clamp(2rem,5vw,4rem);
  border-top:1px solid var(--rule);
}
.details__item{
  padding:1.15rem 0;
  border-bottom:1px solid var(--rule);
}
.details__item dt{
  font-family:var(--f-data);
  font-size:.625rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--graphite);
  margin-bottom:.45rem;
}
.details__item dd{margin:0; font-size:.9375rem; line-height:1.45}
@media (min-width:56rem){
  .details__item--wide{grid-column:1 / -1}
}

/* ── the closure page ──────────────────────────────────────── */
.closure{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--gut); padding-bottom:2rem;
  color:var(--paper); overflow:hidden;
}
.closure__media{position:absolute; inset:0; z-index:0}
.closure__media .media{width:100%; height:100%; object-fit:cover}
.closure__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,11,11,.5) 0%,rgba(11,11,11,.18) 40%,rgba(11,11,11,.82) 100%);
}
.closure__type{position:relative; z-index:1}
.closure__back{
  position:relative; z-index:1; margin-bottom:auto;
  font-family:var(--f-data); font-size:.6875rem;
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.72); text-decoration:none;
}
.closure__back:hover{color:var(--paper)}
.closure__sub{
  margin:1.1rem 0 0; max-width:32ch;
  font-size:clamp(1.05rem,2.1vw,1.6rem);
  letter-spacing:-.02em;
}
.closure__sub em{font-family:var(--f-voice); font-style:italic; font-size:1.1em}

/* the gap closing — the only animated thing on this page */
.gap{
  position:relative; z-index:1;
  margin:clamp(2rem,6vh,3.5rem) 0 0;
  height:3px; width:min(34rem,72vw);
  background:rgba(255,255,255,.26);
}
.gap i{
  position:absolute; inset:0 100% 0 0;
  background:var(--critical);
  transition:inset 1.5s var(--ease) .35s;
}
.is-lit .gap i{inset:0}

.next{
  padding:clamp(4.5rem,12vh,8rem) var(--gut);
  max-width:calc(var(--measure) + 12rem);
}
.next__list{list-style:none; margin:1.25rem 0 0; padding:0}
.next__list li{
  display:grid; grid-template-columns:2.5rem 1fr; gap:1rem;
  padding:1.05rem 0; border-top:1px solid var(--rule);
}
.next__list li:last-child{border-bottom:1px solid var(--rule)}
.next__list p{margin:0}
.next__n{
  font-family:var(--f-data); font-size:.8125rem;
  color:var(--critical); font-variant-numeric:tabular-nums;
}
.notice{
  display:flex; align-items:center; gap:.6rem;
  margin-top:2.5rem;
  font-family:var(--f-data); font-size:.6875rem;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--graphite);
}
.notice__dot{
  width:.4rem; height:.4rem; border-radius:50%;
  background:var(--graphite); flex:none;
}
.notice.is-sent .notice__dot{background:var(--critical)}

/* ── footer ────────────────────────────────────────────────── */
.foot{
  display:flex; justify-content:space-between;
  padding:1.5rem var(--gut) 2.5rem;
  border-top:1px solid var(--rule);
  font-family:var(--f-data);
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--graphite);
}
.foot span:last-child{font-variant-numeric:tabular-nums}

/* ── motion ────────────────────────────────────────────────── */
.ln{display:block; overflow:hidden}
.ln>span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.05s var(--ease);
}
.is-lit .ln>span{transform:translateY(0)}
.hero__type .ln:nth-child(2)>span{transition-delay:.09s}
.hero__sub>span{transition-delay:.2s}

.rv{
  opacity:0;
  transform:translateY(1.35rem);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.rv.is-in{opacity:1; transform:none}

/* ── rail inset ────────────────────────────────────────────────
   Imagery runs full-bleed behind the chainage rail; only type is inset
   by it. This block MUST stay last: the section rules above set the
   `padding` shorthand, which would otherwise win on source order and
   drop the type back over the spine. */
@media (min-width:64rem){
  .hero,.sec,.close,.signoff,.cta,.details,.foot,.plate figcaption{
    padding-left:calc(var(--gut) + var(--rail));
  }
  /* the closure page carries no spine, so nothing is inset by it */
  .page-closure .foot{padding-left:var(--gut)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.ln>span,.plate--full .media{
    transition:none!important;
    opacity:1!important;
    transform:none!important;
    clip-path:none!important;
  }
  .load{display:none}
}