/* ==========================================================================
   Yorkshire Building Control — "The File"
   --------------------------------------------------------------------------
   base.css owns the reset, wrap, section shell, header/nav/mega mechanics,
   buttons, footer skeleton, reveals, preloader shell and the hero contract.
   This file supplies the palette, the white ground, the open file and the
   six sections.

   GROUND: white is the LIGHT ground — it replaces any bone/cream/off-white
   that would otherwise be used. The file's pages alternate: white paper,
   ink pages (01 Who we are, 04 Certibuild) and one brand-blue band (06
   Contact). Pale grey (#f6f7f8) appears only on an inactive tab and the
   route table header.
   ========================================================================== */

:root{
  /* ---------- the palette, straight from the brief ---------- */
  --ink:        #14181c;
  --white:      #ffffff;
  --steel:      #6d757c;
  --blue:       #1b4f8a;
  --brand:      #1b4f8a;
  --red:        #a5231f;

  /* ---------- derived surfaces ---------- */
  --ink-2:      #1b2026;
  --ink-3:      #22282e;
  --surface:    #f6f7f8;   /* inactive tab / table header ONLY */
  --surface-2:  #f6f7f8;
  --text:       #f7f8f9;
  --muted:      rgba(247,248,249,.58);
  --ink-text:   #14181c;
  --ink-mute:   #6d757c;
  --blue-deep:  #16406f;
  --blue-lit:   #4d86c4;
  --red-lit:    #cf5b52;

  /* ---------- base.css contract ---------- */
  --accent:     var(--blue);
  --accent-lit: var(--blue-lit);
  --accent-2:   var(--blue);
  --line:       rgba(20,24,28,.12);
  --line-d:     rgba(20,24,28,.12);

  /* ---------- type ---------- */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Khula", system-ui, -apple-system, sans-serif;
  --font-mono:    "Fira Code", ui-monospace, "SFMono-Regular", monospace;

  --wrap-max: 1240px;
  --pad:      clamp(1.15rem, 4vw, 2.6rem);
  --radius:   0px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

html{ scroll-padding-top:86px; }
body{
  background:var(--white);
  color:var(--ink);
  font-size:16.8px;
  font-weight:400;
  line-height:1.62;
}
::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:1px; }

.skip{
  position:absolute; left:.5rem; top:.5rem; z-index:10000;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  padding:.75rem 1.1rem; background:var(--ink); color:#fff;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus{ width:auto; height:auto; clip-path:none; }

/* ---------- shared furniture ---------- */
.sect__num{ color:var(--blue); letter-spacing:.18em; font-size:.61rem; }
.sect__h2{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.8rem,3.9vw,2.85rem);
  line-height:1.04; letter-spacing:-.014em;
}
.sect__lead{ color:var(--steel); font-size:.95rem; line-height:1.66; }
main > .sect + .sect{ border-top:1px solid var(--line); }

.link{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.2rem;
  font-family:var(--font-mono); font-size:.66rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue);
  border-bottom:1px solid var(--line); padding-bottom:.3rem;
  transition:border-color .2s, gap .2s var(--ease);
}
.link span{ transition:transform .2s var(--ease); }
.link:hover{ border-color:var(--blue); }
.link:hover span{ transform:translateX(3px); }

/* ==========================================================================
   PRELOADER — the file opening, never the client logo
   ========================================================================== */
.pre{ background:var(--ink); }
.pre__mark{ width:168px; }
.pre__mark svg{ width:168px; height:auto; display:block; }
.pre__file{ stroke:rgba(255,255,255,.85); stroke-width:1.2; fill:none; }
.pre__tab{ stroke:var(--blue-lit); stroke-width:2; fill:none; }
.pre__box{ stroke:rgba(255,255,255,.4); stroke-width:1; fill:none; }
.pre__rule{ stroke:rgba(255,255,255,.22); stroke-width:1; }
.pre__tick{
  stroke:var(--red-lit); stroke-width:2.2; fill:none;
  stroke-dasharray:40; stroke-dashoffset:40;
  animation:preTick 1.5s var(--ease) .15s forwards;
}
@keyframes preTick{ to{ stroke-dashoffset:0; } }
.pre__meta{ color:rgba(255,255,255,.55); }
.pre__pct{ color:#fff; }
.pre__bar{ background:rgba(255,255,255,.18); height:1px; }
.pre__bar i{ background:var(--red-lit); }

/* ==========================================================================
   HEADER — white paper, hairline rule, tab-like hover
   ========================================================================== */
.hdr{
  background:var(--white);
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
@media (min-width:1024px){
  .hdr{
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px) saturate(1.05);
    -webkit-backdrop-filter:blur(12px) saturate(1.05);
  }
}
.hdr__in{ min-height:74px; gap:.9rem; }
.brand img{
  width:134px; height:auto;
  filter:saturate(.72) brightness(.86);
}
.nav__list{ gap:0; }
.nav__link{
  position:relative;
  font-family:var(--font-body); font-size:.86rem; font-weight:600;
  letter-spacing:.004em; color:var(--ink);
  padding:.55rem .7rem; border-radius:0;
}
.nav__link::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.24rem;
  height:1px; background:var(--blue);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .24s var(--ease);
}
.nav__link:hover{ color:var(--blue); background:none; }
.nav__link:hover::after,
.nav__item.is-open > .nav__link::after{ transform:scaleX(1); }
.nav__item.is-open > .nav__link{ color:var(--blue); }
.nav__chev{ width:8px; height:5px; opacity:.5; }

.nav__util{ margin-left:.35rem; }
.nav__util .nav__link{
  font-family:var(--font-mono); font-size:.72rem; font-weight:400;
  letter-spacing:.01em; color:var(--steel);
  border-left:1px solid var(--line); padding-left:1rem;
}
.nav__util .nav__link::after{ display:none; }
.nav__util .nav__link:hover{ color:var(--blue); }

.nav__cta{ margin-left:.45rem; }
.nav__cta .nav__link{
  background:var(--blue); color:#fff;
  padding:.62rem 1rem; font-size:.79rem; letter-spacing:.005em;
  transition:background .2s, transform .2s var(--ease);
}
.nav__cta .nav__link::after{ display:none; }
.nav__cta .nav__link:hover{ background:var(--blue-deep); color:#fff; transform:translateY(-1px); }

/* the mega panel is a folder opening under the header */
@media (min-width:1024px){
  .nav__foot{ display:none; }
  .mega{
    width:min(760px,calc(100vw - 2rem));
    padding:1.5rem 1.6rem 1.6rem;
    background:#fff;
    border:1px solid var(--line);
    border-top:2px solid var(--blue);
    border-radius:0;
    box-shadow:0 28px 50px -34px rgba(20,24,28,.42);
  }
  .megap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);
    gap:1.5rem;
  }
  .megap__feat{ border-left:1px solid var(--line); padding-left:1.4rem; }
  .mega__h{
    font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em;
    color:var(--steel); border-bottom:1px solid var(--line);
    padding-bottom:.45rem; margin-bottom:.5rem;
  }
  .mega a{ color:var(--ink); font-size:.85rem; }
  .mega a:hover{ color:var(--blue); }
  .megap__p{ font-size:.8rem; line-height:1.55; color:var(--steel); }
  .mega a.megap__cta{
    display:inline-block; margin-top:.7rem; font-family:var(--font-mono);
    font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--blue); border-bottom:1px solid var(--blue); padding-bottom:2px;
  }
  .mega a.megap__cta:hover{ transform:none; color:var(--blue-deep); }
}

/* burger on white paper */
.burger{ border-color:var(--line); }
.burger span{ background:var(--ink); }

/* mobile overlay keeps base's dark sheet — remap its tokens */
@media (max-width:1023px){
  .nav{
    --line:rgba(255,255,255,.14);
    --muted:rgba(255,255,255,.55);
    color:var(--text);
  }
  .nav__link{ color:var(--text); font-size:1rem; padding:1rem .1rem; }
  .nav__link::after{ display:none; }
  .mega a{ color:rgba(255,255,255,.86); }
  .mega a:hover{ color:#fff; }
  .mega__h{ color:rgba(255,255,255,.5); }
  .megap__p{ color:rgba(255,255,255,.55); }
  .megap__feat{ border-top:1px solid var(--line); padding-top:.8rem; margin-top:.2rem; }
  .mega a.megap__cta{ color:#fff; border-bottom-color:rgba(255,255,255,.5); }
  .nav__cta{ margin-top:1rem; }
  .nav__cta .nav__link{
    justify-content:center; background:var(--blue); color:#fff;
    padding:1rem; font-size:.9rem;
  }
  .nav__util{ display:none; }
}

/* ==========================================================================
   BUTTONS — square, ink-rule document buttons
   ========================================================================== */
.btn{
  border-radius:2px; font-family:var(--font-body);
  font-size:.84rem; font-weight:600; letter-spacing:.008em;
  padding:.82rem 1.2rem;
}
.btn--solid{ background:var(--blue); color:#fff; }
.btn--solid:hover{ background:var(--blue-deep); transform:translateY(-1px); filter:none; }
.btn--ghost{ border:1px solid var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); }

/* ==========================================================================
   HERO — headline, particulars, then the file
   ========================================================================== */
.hero{
  background:var(--white);
  padding-top:clamp(1.4rem,3vw,2.2rem);
  padding-bottom:clamp(2.4rem,5vw,4rem);
}
.hero__meta{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1.2rem;
  padding:.55rem 0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel);
}
.hero__h1{
  font-family:var(--font-display);
  font-size:var(--h1-size, clamp(2.55rem,6.2vw,5.3rem));
  font-weight:500; line-height:.98; letter-spacing:-.014em;
  margin:clamp(1.1rem,2.6vw,1.9rem) 0 clamp(1.1rem,2.4vw,1.7rem);
}
.hero__h1 .line{ padding-block:.07em; }
.hero__row{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(1.6rem,4vw,3.4rem);
  align-items:start;
}
.hero__lead{ font-size:clamp(.98rem,1.35vw,1.1rem); line-height:1.62; max-width:48ch; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.4rem; }
.hero__facts{ border-top:1px solid var(--line); }
.hero__facts > div{
  display:grid; grid-template-columns:6.4rem minmax(0,1fr); gap:.9rem;
  padding:.6rem 0; border-bottom:1px solid var(--line);
}
.hero__facts dt{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--steel); padding-top:.25rem;
}
.hero__facts dd{ font-size:.85rem; line-height:1.42; }

/* ---------- the open file ---------- */
.file{ position:relative; margin-top:clamp(1.8rem,3.6vw,2.8rem); }
.file__tabs{
  display:flex; align-items:flex-end; gap:2px;
  padding-left:clamp(.4rem,2vw,1.6rem);
}
.file__tab{
  display:inline-flex; align-items:center; height:29px;
  padding:0 clamp(.5rem,1.4vw,1rem);
  border:1px solid var(--blue); border-bottom:0;
  background:var(--white);
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--blue); white-space:nowrap;
}
.file__tab.is-on{
  position:relative; z-index:2;
  background:var(--blue); color:#fff; border-color:var(--blue);
  margin-bottom:-1px; padding-bottom:1px;
}
.file__tab--ref{
  margin-left:auto; background:none; border:0; color:var(--steel);
  padding-right:.1rem; letter-spacing:.1em;
}
.file__folder{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:5px 5px 0 0 var(--white), 5px 5px 0 1px var(--line);
}
.file__sheets{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.sheet{
  display:flex; flex-direction:column;
  padding:clamp(1rem,2.2vw,1.7rem) clamp(1rem,2.4vw,1.9rem);
  min-width:0;
}
.sheet--left{ background:linear-gradient(90deg,transparent 90%,rgba(20,24,28,.035)); }
.sheet--right{
  border-left:1px solid var(--line);
  background:linear-gradient(90deg,rgba(20,24,28,.035),transparent 10%);
}
.sheet__head{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline; gap:.7rem;
  padding-bottom:.55rem; border-bottom:1px solid var(--ink);
}
.sheet__form,.sheet__mark{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--steel);
}
.sheet__title{
  font-family:var(--font-display); font-size:clamp(.92rem,1.4vw,1.12rem);
  font-weight:600; letter-spacing:.05em; text-transform:uppercase; line-height:1.2;
}
.fields{ margin-top:.3rem; }
.fields__row{
  display:grid; grid-template-columns:minmax(6rem,.66fr) minmax(0,1fr); gap:.8rem;
  padding:.5rem 0; border-bottom:1px dotted rgba(20,24,28,.24);
}
.fields dt{
  font-family:var(--font-mono); font-size:.53rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel); padding-top:.16rem;
}
.fields dd{
  font-family:var(--font-mono); font-size:.74rem; line-height:1.4;
  overflow-wrap:anywhere; min-width:0;
}
.checks{ margin-top:.2rem; }
.checks__i{
  display:grid; grid-template-columns:21px 1.5rem minmax(0,1fr) auto;
  align-items:center; gap:.55rem;
  padding:.52rem 0; border-bottom:1px dotted rgba(20,24,28,.24);
}
.checks__box{
  width:21px; height:21px; border:1px solid var(--ink);
  display:grid; place-items:center;
}
.checks__box svg{ width:15px; height:15px; display:block; }
.checks__box .tick{ fill:none; stroke:var(--ink); stroke-width:3; }
.checks__n{ font-family:var(--font-mono); font-size:.56rem; color:var(--steel); }
.checks__t{ font-size:.86rem; font-weight:600; }
.checks__d{ font-family:var(--font-mono); font-size:.6rem; color:var(--steel); }
.checks__i.is-open .checks__box{ border-color:var(--red); }
.checks__d.is-not{
  color:var(--red); text-transform:uppercase;
  letter-spacing:.1em; font-size:.52rem;
}
.sheet__note{
  margin-top:auto; padding-top:.7rem;
  font-family:var(--font-mono); font-size:.55rem;
  line-height:1.6; letter-spacing:.02em; color:var(--steel);
}
.stamp{
  position:relative;
  align-self:flex-end;
  margin:1.2rem .1rem .1rem 0;
  padding:.5rem .8rem .45rem; border:2px solid var(--red);
  color:var(--red); text-align:center; line-height:1.06;
  transform:rotate(-7deg); opacity:.9; pointer-events:none;
}
.stamp::before{
  content:""; position:absolute; inset:3px; border:1px solid var(--red);
}
.stamp span{
  display:block; font-family:var(--font-mono); font-weight:500;
  font-size:clamp(.48rem,.85vw,.62rem); letter-spacing:.18em; text-transform:uppercase;
}
.stamp i{
  display:block; margin-top:.3rem; font-family:var(--font-mono); font-style:normal;
  font-size:.44rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8;
}
.file__strip{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem 1.2rem;
  padding:.5rem clamp(1rem,2.4vw,1.9rem);
  border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.53rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel);
}

/* the tick: drawn in sequence, 120ms apart */
.js .tick{ stroke-dasharray:26; stroke-dashoffset:26; }
.file.is-run .checks__i:nth-child(1) .tick{ animation:drawTick .32s var(--ease) .05s forwards; }
.file.is-run .checks__i:nth-child(2) .tick{ animation:drawTick .32s var(--ease) .17s forwards; }
.file.is-run .checks__i:nth-child(3) .tick{ animation:drawTick .32s var(--ease) .29s forwards; }
@keyframes drawTick{ to{ stroke-dashoffset:0; } }

/* ==========================================================================
   01 — WHO WE ARE
   ========================================================================== */
.who__grid{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);
  gap:clamp(1.6rem,4vw,3.6rem); align-items:start;
}
.who__body p{ max-width:56ch; font-size:1rem; line-height:1.7; }
.who__body p + p{ margin-top:1rem; }
.pull{
  margin-top:clamp(1.3rem,2.6vw,1.9rem);
  padding-left:1.15rem; border-left:2px solid var(--blue);
}
.pull p{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.25rem,2.2vw,1.7rem); line-height:1.2;
}
.pull cite{
  display:block; margin-top:.45rem; font-style:normal;
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel);
}
.part{ border:1px solid var(--line); padding:clamp(1.05rem,2.2vw,1.5rem); }
.part__h{
  font-family:var(--font-mono); font-size:.57rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue);
  padding-bottom:.55rem; border-bottom:1px solid var(--ink);
}
.part__list > div{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:.7rem;
  padding:.55rem 0; border-bottom:1px solid var(--line);
}
.part__list dt{
  font-family:var(--font-mono); font-size:.53rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--steel); padding-top:.16rem;
}
.part__list dd{ font-size:.82rem; line-height:1.42; }
.part__foot{
  margin-top:.8rem; font-family:var(--font-mono); font-size:.55rem;
  line-height:1.65; color:var(--steel);
}

/* ==========================================================================
   02 — THE THREE TABS (CSS only: radio + label, works without JS)
   ========================================================================== */
.tabs{ position:relative; }
.tabs__r{
  position:absolute; width:1px; height:1px; opacity:0;
  top:0; left:0; pointer-events:none;
}
.tabs__bar{ display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--line); }
.tabs__tab{
  display:inline-flex; align-items:baseline; gap:.5rem; cursor:pointer;
  padding:.8rem clamp(.7rem,1.8vw,1.25rem);
  border:1px solid var(--line); border-bottom:0;
  background:var(--surface); color:var(--steel);
  font-size:.85rem; font-weight:600; line-height:1.2;
  transition:background .2s, color .2s;
}
.tabs__tab:hover{ color:var(--blue); }
.tabs__i{
  font-family:var(--font-mono); font-size:.53rem; letter-spacing:.08em;
  font-weight:400; color:var(--steel);
}
#t1:checked ~ .tabs__bar label[for="t1"],
#t2:checked ~ .tabs__bar label[for="t2"],
#t3:checked ~ .tabs__bar label[for="t3"]{
  position:relative; z-index:2;
  background:var(--white); color:var(--blue);
  box-shadow:inset 0 2px 0 var(--blue);
  margin-bottom:-1px; padding-bottom:calc(.8rem + 1px);
}
#t1:checked ~ .tabs__bar label[for="t1"] .tabs__i,
#t2:checked ~ .tabs__bar label[for="t2"] .tabs__i,
#t3:checked ~ .tabs__bar label[for="t3"] .tabs__i{ color:var(--blue); }
#t1:focus-visible ~ .tabs__bar label[for="t1"],
#t2:focus-visible ~ .tabs__bar label[for="t2"],
#t3:focus-visible ~ .tabs__bar label[for="t3"]{
  outline:2px solid var(--blue); outline-offset:2px;
}
.tabs__panels{ border:1px solid var(--line); border-top:0; }
.tabs__panel{
  display:none;
  padding:clamp(1.15rem,3vw,2.2rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(1.5rem,4vw,3rem);
}
#t1:checked ~ .tabs__panels #p1,
#t2:checked ~ .tabs__panels #p2,
#t3:checked ~ .tabs__panels #p3{ display:grid; }
.tabs__k{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue);
}
.tabs__h{
  font-family:var(--font-display); font-size:clamp(1.35rem,2.5vw,1.95rem);
  font-weight:500; line-height:1.12; letter-spacing:-.01em;
  margin:.45rem 0 .75rem;
}
.tabs__p{ font-size:.94rem; line-height:1.68; color:var(--ink-mute); max-width:46ch; }
.tabs__list{ border-top:1px solid var(--ink); align-self:start; }
.tabs__list li{
  display:grid; grid-template-columns:1.6rem minmax(0,1fr); gap:.7rem;
  padding:.6rem 0; border-bottom:1px solid var(--line);
}
.tabs__list span{
  font-family:var(--font-mono); font-size:.54rem; color:var(--steel); padding-top:.22rem;
}
.tabs__list b{ display:block; grid-column:2; font-size:.85rem; font-weight:600; line-height:1.35; }
.tabs__list i{
  display:block; grid-column:2;
  font-style:normal; font-size:.79rem; line-height:1.5; color:var(--ink-mute);
}
.tabs__list--tight li{ padding:.42rem 0; }
.tabs__list--tight i{ font-size:.75rem; }
@media (min-width:900px){
  .tabs__panel{ min-height:23rem; }
}

/* ==========================================================================
   03 — THE STAGE ROUTE
   ========================================================================== */
.route__head{
  display:grid;
  grid-template-columns:54px minmax(0,1.5fr) minmax(0,.85fr) 40px;
  gap:1rem; align-items:center;
  padding:.5rem clamp(.6rem,1.6vw,1.1rem);
  background:var(--surface);
  border:1px solid var(--line); border-bottom:0;
  font-family:var(--font-mono); font-size:.53rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel);
}
.route{ border:1px solid var(--line); }
.route__row{
  display:grid;
  grid-template-columns:54px minmax(0,1.5fr) minmax(0,.85fr) 40px;
  gap:1rem; align-items:start;
  padding:clamp(.85rem,1.7vw,1.2rem) clamp(.6rem,1.6vw,1.1rem);
  border-bottom:1px solid var(--line);
}
.route__row:last-child{ border-bottom:0; }
.route__n{
  position:relative; display:block; text-align:center; padding-top:.15rem;
  align-self:stretch;
}
.route__n::before{
  content:""; position:absolute; left:50%; width:1px;
  top:calc(-1 * clamp(.85rem,1.7vw,1.2rem));
  bottom:calc(-1 * clamp(.85rem,1.7vw,1.2rem));
  background:var(--line);
}
.route__n b{
  position:relative; display:inline-block; padding:.1rem .18rem;
  background:var(--white);
  font-family:var(--font-mono); font-size:.6rem; font-weight:400;
  letter-spacing:.06em; color:var(--steel);
}
.route__t{
  font-family:var(--font-display); font-size:clamp(1.12rem,1.8vw,1.4rem);
  font-weight:600; line-height:1.1; letter-spacing:.005em;
}
.route__d{
  margin-top:.3rem; font-size:.83rem; line-height:1.55;
  color:var(--ink-mute); max-width:54ch;
}
.route__trig{
  font-family:var(--font-mono); font-size:.66rem; line-height:1.5;
  color:var(--ink); padding-top:.2rem;
}
.route__trig span{
  display:block; font-size:.53rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--blue); margin-bottom:.25rem;
}
.route__box{
  width:25px; height:25px; border:1px solid var(--ink);
  display:grid; place-items:center; justify-self:end; margin-top:.1rem;
}
.route__box svg{ width:17px; height:17px; display:block; }
.route__box .tick{ fill:none; stroke:var(--ink); stroke-width:2.8; }
.route.is-run .route__row:nth-child(1) .tick{ animation:drawTick .3s var(--ease) .05s forwards; }
.route.is-run .route__row:nth-child(2) .tick{ animation:drawTick .3s var(--ease) .17s forwards; }
.route.is-run .route__row:nth-child(3) .tick{ animation:drawTick .3s var(--ease) .29s forwards; }
.route.is-run .route__row:nth-child(4) .tick{ animation:drawTick .3s var(--ease) .41s forwards; }
.route.is-run .route__row:nth-child(5) .tick{ animation:drawTick .3s var(--ease) .53s forwards; }
.route__note{
  display:flex; gap:.7rem; margin-top:1rem;
  font-family:var(--font-mono); font-size:.57rem; line-height:1.75;
  letter-spacing:.02em; color:var(--steel); max-width:88ch;
}
.route__note > span{
  flex:0 0 auto; width:5px; height:5px; margin-top:.55em; background:var(--blue);
}

/* ==========================================================================
   04 — CERTIBUILD
   ========================================================================== */
.cert__grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:start;
}
.cert__copy > p:not(.sect__num){ max-width:52ch; font-size:.99rem; line-height:1.7; margin-top:1rem; }
.cert__facts{ margin-top:1.3rem; border-top:1px solid var(--line); }
.cert__facts li{
  display:grid; gap:.15rem; padding:.65rem 0; border-bottom:1px solid var(--line);
}
.cert__facts span{ font-size:.88rem; font-weight:600; }
.cert__facts i{ font-style:normal; font-size:.81rem; color:var(--ink-mute); }
.consent{
  position:relative;
  padding:clamp(1.05rem,2.4vw,1.6rem);
  border:1px solid var(--line); border-top:2px solid var(--ink);
}
.consent__h{
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--steel);
}
.consent__h em{
  font-style:normal; color:var(--steel);
  border:1px solid var(--line); padding:.05rem .35rem;
}
.consent__q{
  font-family:var(--font-display); font-size:clamp(1.1rem,1.9vw,1.35rem);
  line-height:1.25; margin:.75rem 0 1rem;
}
.consent__box{
  width:25px; height:25px; border:1px solid var(--ink); margin-bottom:1rem;
}
.consent__p{ font-size:.78rem; line-height:1.62; color:var(--ink-mute); }
.consent__p + .consent__p{ margin-top:.55rem; }
.consent__f{
  margin-top:.9rem; padding-top:.6rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.53rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel);
}

/* ==========================================================================
   05 — ON RECORD
   ========================================================================== */
.record__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:start;
}
.quote{
  position:relative; padding:clamp(1.2rem,3vw,2.1rem);
  border:1px solid var(--line);
}
.quote::after{
  content:""; position:absolute; left:0; top:0; width:56px; height:2px; background:var(--blue);
}
.quote__k{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--steel);
}
.quote__q{
  margin-top:.8rem;
  font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,1.95rem);
  line-height:1.22; letter-spacing:-.008em;
}
.quote__c{
  margin-top:1rem; font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
}
.quote__c span{
  display:block; margin-top:.3rem; font-size:.52rem;
  letter-spacing:.09em; color:var(--steel); text-transform:none;
}
.card{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:.2rem 1rem; padding:1rem 0;
  border-bottom:1px solid var(--line);
}
.card:first-child{ border-top:1px solid var(--line); }
.card__k{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue);
}
.card__t{
  font-family:var(--font-display); font-size:1.28rem; font-weight:500;
  line-height:1.2; margin-top:.1rem;
}
.card__p{ font-size:.83rem; line-height:1.55; color:var(--ink-mute); max-width:38ch; margin-top:.2rem; }
.card__go{
  grid-column:2; grid-row:1 / span 3; align-self:center;
  color:var(--blue); font-size:1.05rem;
  transition:transform .22s var(--ease);
}
.card:hover .card__t{ color:var(--blue); }
.card:hover .card__go{ transform:translateX(4px); }

/* ==========================================================================
   06 — CONTACT
   ========================================================================== */
.con__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:start;
}
.con__offices{ border-top:1px solid var(--ink); }
.off{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:.15rem 1rem; padding:.9rem 0; border-bottom:1px solid var(--line);
}
.off__k{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel);
}
.off__tel{
  grid-column:2; grid-row:1;
  font-family:var(--font-display); font-size:1.3rem; line-height:1.1;
  letter-spacing:.005em; color:var(--ink);
  transition:color .2s;
}
.off__tel:hover{ color:var(--blue); }
.off__mail{
  grid-column:1 / -1; margin-top:.2rem;
  font-family:var(--font-mono); font-size:.71rem; color:var(--blue);
  overflow-wrap:anywhere; min-width:0;
}
.off__mail:hover{ text-decoration:underline; text-underline-offset:3px; }
.con__fig{ border:1px solid var(--line); }
.con__fig img{
  width:100%; height:auto; aspect-ratio:880/586; object-fit:cover;
}
.con__fig figcaption{
  padding:.5rem .7rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.53rem; letter-spacing:.08em;
  color:var(--steel);
}
.con__base{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:1.6rem; align-items:end;
  margin-top:clamp(1.4rem,3vw,2.2rem); padding-top:1.3rem;
  border-top:1px solid var(--line);
}
.con__addr{
  margin-top:.4rem; font-family:var(--font-mono); font-size:.74rem;
  line-height:1.7; color:var(--ink);
}
.con__acts{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* ==========================================================================
   FOOTER — the back of the file
   ========================================================================== */
.foot{
  background:var(--ink); color:var(--text);
  --line:rgba(255,255,255,.14);
}
.foot__logo{ width:134px; height:auto; margin-bottom:1.2rem; }
.foot__blurb{
  max-width:36ch; font-size:.84rem; line-height:1.65; color:rgba(247,248,249,.6);
}
.foot__tel{
  margin-top:1rem; font-family:var(--font-display); font-size:1.35rem;
  color:#fff; letter-spacing:.005em;
}
.foot__h{ color:rgba(247,248,249,.42); }
.foot__nav li{ min-width:0; }
.foot__nav a{
  color:rgba(247,248,249,.76);
  overflow-wrap:anywhere; min-width:0;
}
.foot__nav a:hover{ color:#fff; }
.foot__nav span{
  display:block; font-size:.8rem; line-height:1.6;
  color:rgba(247,248,249,.5); overflow-wrap:anywhere;
}
.foot__bottom{ color:rgba(247,248,249,.4); }
.foot__fine{
  margin-top:1rem; max-width:96ch;
  font-family:var(--font-mono); font-size:.53rem; line-height:1.8;
  letter-spacing:.02em; color:rgba(247,248,249,.34);
}

/* ==========================================================================
   SECTION GROUNDS
   --------------------------------------------------------------------------
   White is the default ground — but it is the replacement for the old
   off-white, not the only colour on the page. The file's pages alternate:
   white paper, ink pages, and one brand-blue band. No bone, cream or warm
   off-white anywhere; a section ground is #fff, ink or the brand blue.
   ========================================================================== */
.sect--ink{
  background:var(--ink);
  color:var(--text);
  --line:rgba(255,255,255,.15);
  --steel:rgba(247,248,249,.58);
  --ink-mute:rgba(247,248,249,.66);
  --blue:#9dc0e6;
}
.sect--blue{
  background:var(--brand);
  color:#fff;
  --line:rgba(255,255,255,.26);
  --steel:rgba(255,255,255,.7);
  --ink-mute:rgba(255,255,255,.78);
  --blue:#dbe8f6;
}

/* --- 01 Who we are, on ink: the particulars become a dark plate --- */
.sect--ink .part{ background:rgba(255,255,255,.04); }
.sect--ink .part__h{ border-bottom-color:rgba(247,248,249,.55); }

/* --- 04 Certibuild, on ink: the consent notice is a white sheet on the desk --- */
.sect--ink .consent{
  background:#fff; color:var(--ink);
  border-top-color:var(--blue);
  --line:rgba(20,24,28,.14);
  --steel:#6d757c;
  --ink-mute:#6d757c;
  --blue:#1b4f8a;
}

/* --- 06 Contact, on the brand blue --- */
.sect--blue .con__offices{ border-top-color:rgba(255,255,255,.55); }
.sect--blue .off__tel{ color:#fff; }
.sect--blue .off__tel:hover{ color:#dbe8f6; }
.sect--blue .con__addr{ color:#fff; }
.sect--blue .btn--solid{ background:#fff; color:var(--blue-deep); }
.sect--blue .btn--solid:hover{ background:#eef3f9; color:var(--blue-deep); }
.sect--blue .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.55); }
.sect--blue .btn--ghost:hover{
  background:rgba(255,255,255,.1); border-color:#fff; color:#fff;
}

/* selection has to invert on the dark and blue grounds */
.sect--ink ::selection{ background:#f7f8f9; color:var(--ink); }
.sect--blue ::selection{ background:#fff; color:var(--blue-deep); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1023px){
  .hero__row,
  .who__grid,
  .cert__grid,
  .record__grid,
  .con__grid{ grid-template-columns:minmax(0,1fr); }
  .hero__facts{ margin-top:.4rem; }
  .file__sheets{ grid-template-columns:minmax(0,1fr); }
  .sheet--right{
    border-left:0; border-top:1px solid var(--line);
    background:linear-gradient(180deg,rgba(20,24,28,.035),transparent 12%);
  }
  .sheet--left{ background:none; }
  .tabs__panel{ grid-template-columns:minmax(0,1fr); }
  .tabs__list{ margin-top:.4rem; }
  .con__fig{ max-width:520px; }
  .con__base{ grid-template-columns:minmax(0,1fr); align-items:start; }
}

@media (max-width:899px){
  .route__head{ display:none; }
  .route__row{
    grid-template-columns:34px minmax(0,1fr) 25px;
    grid-template-areas:"n t box" "n trig box";
    row-gap:.55rem;
  }
  .route__n{ grid-area:n; padding-top:.1rem; }
  .route__cell{ grid-area:t; }
  .route__trig{ grid-area:trig; padding-top:0; }
  .route__box{ grid-area:box; align-self:start; }
  .route__n::before{ top:calc(-1 * clamp(.85rem,1.7vw,1.2rem)); bottom:calc(-1 * clamp(.85rem,1.7vw,1.2rem)); }
}

@media (max-width:640px){
  .file__tab--ref{ display:none; }
  .file__tab{ font-size:.55rem; letter-spacing:.09em; height:27px; padding:0 .55rem; }
  .stamp{
    margin:1rem 0 .2rem auto;
    transform:rotate(-5deg);
  }
  .file__strip{ font-size:.48rem; }
  .file__strip span:last-child{ display:none; }
  .sheet__head{ grid-template-columns:auto minmax(0,1fr); }
  .sheet__mark{ display:none; }
  .tabs__bar{ gap:0; }
  .tabs__tab{
    flex:1 1 auto; justify-content:center;
    padding:.7rem .5rem; font-size:.78rem;
  }
  .tabs__i{ display:none; }
  .con__acts .btn{ flex:1 1 auto; justify-content:center; }
  .foot__fine{ font-size:.5rem; }
}

@media (max-width:420px){
  .foot__nav{ grid-template-columns:minmax(0,1fr); }
  .file__tab{ font-size:.5rem; padding:0 .45rem; letter-spacing:.04em; }
  .checks__i{ grid-template-columns:19px 1.2rem minmax(0,1fr) auto; gap:.4rem; }
  .checks__box{ width:19px; height:19px; }
  .checks__box svg{ width:13px; height:13px; }
  .fields__row{ grid-template-columns:minmax(0,1fr); gap:.1rem; }
}

@media (prefers-reduced-motion: reduce){
  .js .tick{ stroke-dashoffset:0 !important; animation:none !important; }
  .pre__tick{ stroke-dashoffset:0; animation:none; }
  .nav__link::after{ transition:none; }
}