/* ==========================================================================
   Highland Access Ltd — "The Ascent"
   --------------------------------------------------------------------------
   base.css owns the reset, shell, header/nav mechanics, buttons, footer
   skeleton, reveals, preloader shell and the hero headline contract.
   This file supplies the palette, the turbine elevation, the altitude
   register, the rope rail and every section's own rhythm.

   GROUND: solid #ffffff. No bone, no cream, no warm off-white anywhere.
   ========================================================================== */

:root{
  /* ---------- the palette, straight from the brief ---------- */
  --ink:       #12171a;
  --white:     #ffffff;
  --steel:     #7c858c;
  --signal:    #e2521f;
  --sky:       #eef4f8;
  --line:      rgba(18,23,26,.12);
  --line-strong: rgba(18,23,26,.24);
  --ink-soft:  #3f474c;
  --ink-faint: #5f686d;

  /* ---------- base.css contract ---------- */
  --surface:    #ffffff;
  --surface-2:  #ffffff;
  --text:       #f5f7f8;
  --muted:      rgba(245,247,248,.56);
  --ink-text:   var(--ink);
  --ink-mute:   var(--steel);
  --accent:     var(--signal);
  --accent-lit: #f0703c;
  --accent-2:   var(--signal);

  /* ---------- type ---------- */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body:    "Mukta", system-ui, -apple-system, sans-serif;
  --font-mono:    "Sono", ui-monospace, "SFMono-Regular", monospace;

  --wrap-max: 1180px;
  --pad:      clamp(1.6rem, 4.4vw, 2.7rem);
  --rail:     14px;
  --radius:   0px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

html{ scroll-padding-top:92px; }
body{
  background:var(--white);
  color:var(--ink);
  font-size:17px;
  font-weight:400;
  line-height:1.66;
}
::selection{ background:var(--signal); color:#fff; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.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:.66rem; letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus{ width:auto; height:auto; clip-path:none; }

/* ==========================================================================
   THE ROPE — one signal line down the page, drawn as you scroll
   ========================================================================== */
main{ position:relative; }
.rail{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.rail__line{
  position:absolute; top:0; bottom:0;
  left:calc(max(var(--pad), calc((100% - var(--wrap-max)) / 2 + var(--pad))) - var(--rail));
  width:1px; background:var(--signal); opacity:.42;
  transform-origin:top;
}
@keyframes railDraw{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .rail__line{ animation:railDraw auto linear both; animation-timeline:scroll(root block); }
  }
}

.pin{
  position:absolute; top:-10px; z-index:2;
  left:calc(max(var(--pad), calc((100% - var(--wrap-max)) / 2 + var(--pad))) - var(--rail));
  margin-left:-7px;
  width:14px; height:20px;
  color:var(--signal);
  display:grid; place-items:center;
  pointer-events:none;
}
.pin svg{ width:14px; height:20px; display:block; }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.pre{ background:var(--white); color:var(--ink); }
.pre__mark svg{ width:104px; height:auto; display:block; }
.pre__blade{ fill:var(--ink); }
.pre__hub{ fill:var(--signal); }
.pre__tower{ fill:var(--ink); opacity:.22; }
.pre__rotor{
  transform-box:view-box; transform-origin:60px 52px;
  animation:rotor 3.2s linear infinite;
}
@keyframes rotor{ to{ transform:rotate(360deg); } }
.pre__meta{ color:var(--steel); }
.pre__pct{ color:var(--signal); }
.pre__bar{ background:var(--line); height:1px; }
.pre__bar i{ background:var(--signal); }

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */
.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(14px) saturate(1.15);
    -webkit-backdrop-filter:blur(14px) saturate(1.15);
  }
}
.hdr__in{ min-height:78px; gap:1rem; }

.brand{ display:flex; align-items:center; gap:.62rem; }
.brand__mark{ width:34px; height:34px; color:var(--ink); flex-shrink:0; }
.brand__txt{ display:block; }
.brand__name{
  display:block;
  font-family:var(--font-display); font-size:1.2rem; font-weight:700;
  line-height:1; letter-spacing:.035em; text-transform:uppercase; color:var(--ink);
}
.brand__sub{
  display:block; margin-top:.24rem;
  font-family:var(--font-mono); font-size:.48rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--steel);
}

@media (min-width:1024px){
  .nav__list{ gap:0; }
  .nav__link{
    font-family:var(--font-body); font-size:.82rem; font-weight:500;
    letter-spacing:.005em; padding:.55rem .55rem; color:var(--ink);
    border-radius:0;
  }
  .nav__link:hover{ color:var(--signal); background:none; }
  .nav__item.is-open > .nav__link{ color:var(--signal); }
  .nav__chev{ opacity:.4; }
  .nav__util .nav__link{
    font-family:var(--font-mono); font-size:.68rem; letter-spacing:.03em;
    color:var(--steel); padding-right:.9rem;
  }
  .nav__util .nav__link:hover{ color:var(--signal); }
  .nav__cta{ margin-left:.55rem; }
  .nav__cta .nav__link{
    background:var(--ink); color:#fff; padding:.56rem 1.05rem;
    font-size:.78rem; letter-spacing:.015em;
  }
  .nav__cta .nav__link:hover{ background:var(--signal); color:#fff; }
  .nav__item.is-open.nav__cta > .nav__link{ color:#fff; }

  /* ---------- mega ---------- */
  .mega{
    background:var(--white);
    border:1px solid var(--line-strong);
    border-top:2px solid var(--signal);
    border-radius:0;
    box-shadow:0 30px 60px -34px rgba(18,23,26,.3);
    padding:1.5rem;
  }
  .mega .mega__h{
    display:block;
    font-family:var(--font-mono); font-size:.58rem; font-weight:500;
    letter-spacing:.17em; text-transform:uppercase; color:var(--ink);
    padding-bottom:.55rem; margin-bottom:.45rem;
    border-bottom:1px solid var(--line-strong);
  }
  .mega .mega__h:hover{ color:var(--signal); transform:none; }
  .mega a{ color:var(--ink-soft); font-size:.83rem; padding:.32rem 0; }
  .mega a:hover{ color:var(--signal); }
  .mega__note{
    margin-top:1.15rem; padding-top:1rem; border-top:1px solid var(--line);
    display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
    gap:.5rem 1.4rem; font-size:.76rem; line-height:1.5; color:var(--steel);
  }
  .mega__note a,
  .mega .mega__all{
    font-family:var(--font-mono); font-size:.58rem; letter-spacing:.13em;
    text-transform:uppercase; color:var(--ink); padding:0; white-space:nowrap;
  }
  .mega__note a:hover,.mega .mega__all:hover{ color:var(--signal); }
  .mega__note--stack{ display:block; border-top:0; padding-top:0; margin-top:0; }
  .mega .mega__all{ display:inline-block; margin-top:1rem; border-bottom:1px solid var(--line-strong); padding-bottom:.2rem; }
}

/* the mobile overlay stays dark: light type, light hairlines */
@media (max-width:1023px){
  .hdr__in{ min-height:68px; }
  .nav{
    color:var(--text);
    --line:rgba(255,255,255,.16);
    --muted:rgba(255,255,255,.55);
  }
  .nav__link{ color:#fff; }
  .nav__util .nav__link{
    font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em;
    color:rgba(255,255,255,.6);
  }
  .nav__cta .nav__link{
    background:var(--signal); color:#fff; padding:1rem .1rem;
  }
  .nav__chev{ opacity:.6; }
  .mega__note{
    color:rgba(255,255,255,.58); border-top-color:rgba(255,255,255,.16);
    font-size:.8rem; line-height:1.55;
  }
  .mega__note a,.mega__all{ color:#fff; }
}

/* ==========================================================================
   BUTTONS + SMALL TYPE
   ========================================================================== */
.btn{
  border-radius:0; padding:.92rem 1.45rem;
  font-family:var(--font-body); font-size:.86rem; font-weight:600;
  letter-spacing:.01em;
}
.btn--solid{ background:var(--ink); color:#fff; }
.btn--solid:hover{ background:var(--signal); transform:translateY(-2px); filter:none; }
.btn--ghost{ border:1px solid var(--line-strong); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink); background:none; }

.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--steel);
}
.eyebrow::before{
  content:""; width:20px; height:1px; background:var(--signal); flex-shrink:0;
}
.eyebrow__n{ color:var(--ink); font-weight:500; }

.h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.3rem, 5.6vw, 4.4rem); line-height:.9;
  letter-spacing:-.004em; text-transform:uppercase;
  margin-top:1.05rem; padding-bottom:.04em;
}
.textlink{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.82rem; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:.18rem;
  transition:color .2s, border-color .2s;
}
.textlink:hover{ color:var(--signal); border-color:var(--signal); }

.sect{ padding-block:clamp(4.2rem, 8.5vw, 7.2rem); position:relative; }
.sect + .sect{ border-top:1px solid var(--line); }
.hero{ border-top:0; }

/* ==========================================================================
   SECTION GROUNDS — white · ink · signal
   The page ground is solid #ffffff. These bands carry real content: the
   altitude register, the fall-protection systems, HSEQ. No off-white tint.
   ========================================================================== */
.sect--ink{
  background:var(--ink);
  color:var(--text);
}
.sect.sect--ink{ border-top-color:rgba(255,255,255,.14); }
.sect--ink .eyebrow{ color:rgba(255,255,255,.55); }
.sect--ink .eyebrow__n{ color:#fff; }
.sect--ink .h2{ color:#fff; }
.sect--ink .head__lead{ color:rgba(255,255,255,.72); }
.sect--ink .head__note{
  color:rgba(255,255,255,.5); border-top-color:rgba(255,255,255,.16);
}

.sect--ink .reg__list::before{ background:rgba(255,255,255,.18); }
.sect--ink .reg__row{ border-top-color:rgba(255,255,255,.16); }
.sect--ink .reg__list li:last-child .reg__row{ border-bottom-color:rgba(255,255,255,.16); }
.sect--ink .reg__row:hover{ border-top-color:var(--signal); }
.sect--ink .reg__alt{ color:rgba(255,255,255,.55); }
.sect--ink .reg__work{ color:rgba(255,255,255,.72); }
.sect--ink .reg__arr{ color:rgba(255,255,255,.5); }

.sect--ink .hseq__lead{ color:rgba(255,255,255,.72); }
.sect--ink .hseq__list{ border-top-color:rgba(255,255,255,.16); }
.sect--ink .hseq__list li{
  border-bottom-color:rgba(255,255,255,.14); color:rgba(255,255,255,.72);
}
.sect--ink .hseq__list span{ color:#fff; }

.sect--signal{
  background:var(--signal);
  color:var(--ink);
}
.sect.sect--signal{ border-top-color:rgba(18,23,26,.2); }
.sect--signal .eyebrow{ color:var(--ink); }
.sect--signal .eyebrow::before{ background:var(--ink); }
.sect--signal .h2{ color:var(--ink); }
.sect--signal .fp__lead{ color:var(--ink); }
.sect--signal .fp__list{ border-top-color:rgba(18,23,26,.45); }
.sect--signal .fp__list a{ border-bottom-color:rgba(18,23,26,.22); }
.sect--signal .fp__list a span{ color:var(--ink); }
.sect--signal .fp__list a:hover{
  color:#fff; border-bottom-color:rgba(18,23,26,.5);
}
.sect--signal .fp__list a:hover span{ color:#fff; }
.sect--signal .pin{ color:var(--ink); }
.sect--signal :focus-visible{ outline-color:var(--ink); }
.sect--signal ::selection{ background:var(--ink); color:#fff; }

.sect--signal .f-roof{ stroke:rgba(18,23,26,.5); }
.sect--signal .f-hatch{ stroke:rgba(18,23,26,.3); }
.sect--signal .f-cable{ stroke:#fff; }
.sect--signal .f-eye{ fill:#fff; stroke:var(--ink); }
.sect--signal .f-dim{ stroke:rgba(18,23,26,.4); }
.sect--signal .f-lab{ fill:var(--ink); }

/* ==========================================================================
   01 — HERO
   ========================================================================== */
.hero{
  display:flex; align-items:center;
  min-height:min(calc(100svh - 78px), 900px);
  padding-block:clamp(2.4rem, 5.5vh, 4rem);
}
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.92fr);
  gap:clamp(1.6rem, 4.4vw, 3.8rem); align-items:center; width:100%;
}
.hero__copy{ min-width:0; }
.hero__h1{
  font-size:var(--h1-size, clamp(2.9rem, 6.4vw, 5.4rem));
  font-weight:600; line-height:.9; letter-spacing:-.012em;
  margin:1.15rem 0 1.4rem;
}
.hero__h1 .line{ overflow:visible; padding-block:0; }
.hero__lead{
  font-size:1.02rem; line-height:1.68; color:var(--ink-soft);
  max-width:46ch;
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem; }
.hero__trust{
  display:flex; flex-wrap:wrap; gap:.55rem 1.5rem;
  margin-top:2.2rem; padding-top:1.1rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel);
}
.hero__trust li{ display:flex; align-items:center; gap:.5rem; }
.hero__trust li::before{
  content:""; width:4px; height:4px; background:var(--signal); flex-shrink:0;
}

/* ---------- the turbine plate ---------- */
.plate{ width:100%; max-width:392px; justify-self:end; margin:0; }
.plate__cap{
  display:flex; justify-content:space-between; gap:.6rem;
  padding-bottom:.5rem; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--steel);
}
.turbine{ display:block; width:100%; height:auto; color:var(--ink); }
.plate__key{ margin-top:.7rem; border-top:1px solid var(--line); }
.plate__key li{
  display:flex; align-items:center; gap:.6rem;
  padding:.4rem 0; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint);
}
.plate__n{
  display:inline-grid; place-items:center; flex-shrink:0;
  width:15px; height:15px; border:1px solid var(--line-strong); border-radius:50%;
  font-size:.48rem; color:var(--ink);
}

/* turbine drawing */
.t-ground{ fill:none; stroke:var(--line-strong); stroke-width:1; }
.t-tower{ stroke:var(--line-strong); stroke-width:1; }
.t-edge{ fill:none; stroke:var(--ink); stroke-width:.7; opacity:.3; }
.t-joint{ fill:none; stroke:var(--ink); stroke-width:.7; opacity:.2; }
.t-door{ fill:#fff; stroke:var(--ink); stroke-width:1.1; }
.t-nac{ fill:#fff; stroke:var(--ink); stroke-width:1.3; }
.t-blade{ fill:#fff; stroke:var(--ink); stroke-width:1.3; stroke-linejoin:round; }
.t-orbit{ fill:none; stroke:var(--steel); stroke-width:.8; stroke-dasharray:3 3; opacity:.85; }
.t-sky{ fill:var(--sky); }
.t-drone{ fill:none; stroke:var(--ink); stroke-width:1.1; }
.t-rope{ fill:none; stroke:var(--signal); stroke-width:1.7; stroke-linecap:round; }
.t-dim{ fill:none; stroke:var(--line-strong); stroke-width:1; }
.t-tick{ fill:none; stroke:var(--ink); stroke-width:1; }
.t-lab{ font-family:var(--font-mono); font-size:13px; letter-spacing:.05em; fill:var(--ink); }
.t-lead{ fill:none; stroke:var(--steel); stroke-width:.8; stroke-dasharray:2 2.4; }
.t-mk circle{ fill:#fff; stroke:var(--ink); stroke-width:1; }
.t-mkn{ font-family:var(--font-mono); font-size:10px; fill:var(--ink); text-anchor:middle; }

/* ==========================================================================
   SPEC STRIP
   ========================================================================== */
.strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:.95rem; }
.strip__in{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.9rem;
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-faint);
}
.strip__i{ display:flex; align-items:center; gap:.55rem; }
.strip__i + .strip__i::before{
  content:""; width:4px; height:4px; background:var(--signal); flex-shrink:0;
}

/* ==========================================================================
   SECTION HEAD (shared)
   ========================================================================== */
.head{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(1.4rem, 4vw, 3.4rem); align-items:end;
  margin-bottom:clamp(2.2rem, 4.4vw, 3.6rem);
}
.head__side{ min-width:0; }
.head__lead{
  font-size:1rem; line-height:1.7; color:var(--ink-soft); max-width:46ch;
  padding-bottom:.2rem;
}
.head__note{
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.12em;
  line-height:1.7; text-transform:uppercase; color:var(--steel);
}

/* ==========================================================================
   02 — THE REGISTER
   ========================================================================== */
.reg__list{ position:relative; }
.reg__list::before{
  content:""; position:absolute; top:0; bottom:0; left:6.6rem;
  width:1px; background:var(--line); z-index:0;
}
.reg__row{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:5.5rem 11rem minmax(0,1fr) 1.2rem;
  grid-template-areas:"alt zone work arr";
  column-gap:2.2rem; align-items:baseline;
  padding:1.45rem 0; border-top:1px solid var(--line);
  transition:border-color .25s;
}
.reg__list li:last-child .reg__row{ border-bottom:1px solid var(--line); }
.reg__row:hover{ border-top-color:var(--signal); }
.reg__alt{
  grid-area:alt; font-family:var(--font-mono); font-size:1.05rem;
  font-weight:500; letter-spacing:.02em; color:var(--steel);
  transition:color .25s;
}
.reg__row:hover .reg__alt{ color:var(--signal); }
.reg__zone{
  grid-area:zone; font-family:var(--font-display); font-size:1.6rem;
  font-weight:600; line-height:1; text-transform:uppercase; letter-spacing:.01em;
}
.reg__work{
  grid-area:work; font-size:.95rem; line-height:1.6; color:var(--ink-soft);
  min-width:0; overflow-wrap:anywhere;
}
.reg__arr{
  grid-area:arr; justify-self:end; font-size:.9rem; color:var(--steel);
  transition:transform .25s var(--ease), color .25s;
}
.reg__row:hover .reg__arr{ transform:translate(3px,-3px); color:var(--signal); }

/* ==========================================================================
   03 — DRONE / 04 — ACCESS: the service register
   ========================================================================== */
.split{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem, 5vw, 4.5rem); align-items:start;
}
.split__aside{ min-width:0; }
.split__lead{
  margin:1.5rem 0 1.6rem; font-size:.98rem; line-height:1.7;
  color:var(--ink-soft); max-width:42ch;
}
.svc-list{ border-top:1px solid var(--line); }
.svc{
  display:grid; grid-template-columns:2.2rem minmax(0,1fr) auto 1rem;
  gap:1rem; align-items:center;
  padding:.92rem 0; border-bottom:1px solid var(--line);
  transition:border-color .22s;
}
.svc__n{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.05em;
  color:var(--steel);
}
.svc__name{
  font-size:1rem; font-weight:500; line-height:1.35; color:var(--ink);
  min-width:0; overflow-wrap:anywhere; transition:color .2s;
}
.svc__tag{
  font-family:var(--font-mono); font-size:.52rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--steel); white-space:nowrap;
}
.svc__arr{
  justify-self:end; font-size:.82rem; color:var(--steel);
  transition:transform .22s var(--ease), color .22s;
}
.svc:hover{ border-bottom-color:var(--line-strong); }
.svc:hover .svc__name{ color:var(--signal); }
.svc:hover .svc__n{ color:var(--signal); }
.svc:hover .svc__arr{ transform:translate(2px,-2px); color:var(--signal); }

.svc-cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(2rem, 4vw, 3.5rem);
}

/* ==========================================================================
   05 — FALL PROTECTION
   ========================================================================== */
.fp__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 4.5rem); align-items:start;
}
.fp__lead{
  margin-top:1.4rem; font-size:1rem; line-height:1.68; color:var(--ink-soft);
  max-width:36ch;
}
.fp__fig{ margin:clamp(1.8rem,4vw,2.6rem) 0 0; max-width:340px; }
.fp__fig svg{ display:block; width:100%; height:auto; color:var(--ink); }
.f-roof{ fill:none; stroke:var(--line-strong); stroke-width:1; }
.f-wall{ fill:none; stroke:var(--ink); stroke-width:1; }
.f-hatch{ fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:2 3; }
.f-post{ fill:none; stroke:var(--ink); stroke-width:1.6; }
.f-base{ fill:none; stroke:var(--ink); stroke-width:1.6; }
.f-cable{ fill:none; stroke:var(--signal); stroke-width:1.5; }
.f-eye{ fill:#fff; stroke:var(--signal); stroke-width:1.2; }
.f-dim{ fill:none; stroke:var(--line-strong); stroke-width:1; }
.f-lab{ font-family:var(--font-mono); font-size:7px; letter-spacing:.14em; fill:var(--steel); }

.fp__list{ border-top:1px solid var(--line-strong); }
.fp__list a{
  display:grid; grid-template-columns:2.4rem minmax(0,1fr) auto;
  gap:1rem; align-items:center;
  padding:1rem 0; border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-size:1.55rem; font-weight:500;
  line-height:1; text-transform:uppercase; letter-spacing:.015em;
  transition:color .2s, border-color .2s;
}
.fp__list a span:first-child{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.06em;
  color:var(--steel);
}
.fp__list a span:last-child{ font-size:.85rem; color:var(--steel); }
.fp__list a:hover{ color:var(--signal); border-bottom-color:var(--line-strong); }
.fp__list a:hover span:last-child{ color:var(--signal); }

/* ==========================================================================
   06 — WHY: a four-column ledger, not cards
   ========================================================================== */
.why__ledger{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
}
.why__ledger li{
  padding:1.5rem 1.5rem 0 0;
  border-top:1px solid var(--line-strong);
}
.why__ledger li + li{
  padding-left:1.5rem; border-left:1px solid var(--line);
}
.why__n{
  display:block; font-family:var(--font-mono); font-size:.56rem;
  letter-spacing:.12em; color:var(--signal);
}
.why__ledger h3{
  font-family:var(--font-display); font-size:1.45rem; font-weight:600;
  line-height:1; text-transform:uppercase; letter-spacing:.01em;
  margin:.75rem 0 .55rem;
}
.why__ledger p{ font-size:.88rem; line-height:1.62; color:var(--ink-soft); }

/* ==========================================================================
   07 — HSEQ
   ========================================================================== */
.hseq__grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem, 5vw, 4.5rem); align-items:start;
}
.hseq__lead{
  font-size:1.04rem; line-height:1.74; color:var(--ink-soft); max-width:58ch;
}
.hseq__list{ margin-top:clamp(1.6rem,3vw,2.2rem); border-top:1px solid var(--line); }
.hseq__list li{
  display:grid; grid-template-columns:11rem minmax(0,1fr);
  gap:1.2rem; padding:.95rem 0; border-bottom:1px solid var(--line);
  font-size:.9rem; line-height:1.6; color:var(--ink-soft);
}
.hseq__list span{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); padding-top:.28rem;
}

/* ==========================================================================
   08 — CONTACT
   ========================================================================== */
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
  gap:clamp(2rem, 5vw, 4rem); align-items:start;
}
.contact__copy{ min-width:0; }
.contact__h{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.4rem, 6vw, 4.8rem); line-height:.9;
  text-transform:uppercase; letter-spacing:-.004em;
  margin:1.05rem 0 clamp(1.8rem, 4vw, 2.8rem);
}
.contact__tel{
  display:block; width:fit-content;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.6rem, 8.4vw, 6rem); line-height:.9;
  letter-spacing:-.008em;
  transition:color .2s;
}
.contact__tel:hover{ color:var(--signal); }
.contact__mail{
  display:inline-block; margin-top:1.1rem; padding-bottom:.2rem;
  font-family:var(--font-mono); font-size:clamp(.86rem, 2.4vw, 1.1rem);
  letter-spacing:.01em; border-bottom:1px solid var(--line-strong);
  overflow-wrap:anywhere; max-width:100%;
  transition:color .2s, border-color .2s;
}
.contact__mail:hover{ color:var(--signal); border-color:var(--signal); }
.contact__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.2rem; margin-top:clamp(2rem, 5vw, 3.2rem);
  padding-top:1.3rem; border-top:1px solid var(--line);
}
.contact__foot p{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel);
}
.contact__fig{ margin:0; max-width:340px; justify-self:end; width:100%; }
.contact__fig img{
  width:100%; height:auto; aspect-ratio:600 / 438; object-fit:cover;
  filter:saturate(.92);
}
.contact__fig figcaption{
  margin-top:.6rem; padding-top:.55rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--steel);
}

/* ==========================================================================
   FOOTER — dark punctuation, real link columns
   ========================================================================== */
.foot{
  background:var(--ink); color:var(--text);
  border-top:0;
  padding-block:clamp(3rem, 6vw, 4.4rem) 1.6rem;
}
.foot__top{ border-bottom-color:rgba(255,255,255,.13); }
.foot__brand .brand{ margin-bottom:1.25rem; }
.brand--foot .brand__mark{ color:#fff; }
.brand--foot .brand__name{ color:#fff; }
.brand--foot .brand__sub{ color:rgba(255,255,255,.45); }
.foot__blurb{
  font-size:.88rem; line-height:1.68; color:rgba(255,255,255,.6); max-width:34ch;
}
.foot__contact{
  margin-top:1.4rem; display:grid; gap:.3rem;
  font-family:var(--font-mono); font-size:.76rem; color:rgba(255,255,255,.82);
}
.foot__contact a:hover{ color:var(--signal); }
.foot__h{ color:rgba(255,255,255,.42); }
.foot__nav a{ color:rgba(255,255,255,.74); font-size:.82rem; }
.foot__nav a:hover{ color:var(--signal); }
.foot__bottom{ color:rgba(255,255,255,.4); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:1024px) and (max-width:1199px){
  .nav__util{ display:none; }
  .nav__link{ font-size:.77rem; padding:.5rem .45rem; }
  .brand__sub{ font-size:.44rem; }
}
@media (min-width:1024px){
  :root{ --rail:22px; }
  .brand__mark{ width:36px; height:36px; }
  .foot__top{ grid-template-columns:minmax(0,.9fr) minmax(0,2fr); }
}

@media (max-width:1000px){
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:2.4rem; }
  .plate{ justify-self:start; max-width:360px; }
  .hero{ min-height:0; }
  .head{ grid-template-columns:minmax(0,1fr); align-items:start; gap:1.3rem; }
  .split{ grid-template-columns:minmax(0,1fr); gap:2.4rem; }
  .fp__grid{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .hseq__grid{ grid-template-columns:minmax(0,1fr); gap:2rem; }
  .contact__grid{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .contact__fig{ justify-self:start; margin-top:1rem; }
  .why__ledger{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .why__ledger li{ padding:1.4rem 1.4rem 1.4rem 0; }
  .why__ledger li + li{ padding-left:0; border-left:0; }
  .why__ledger li:nth-child(2n){ padding-left:1.4rem; border-left:1px solid var(--line); }
}

@media (min-width:641px) and (max-width:1000px){
  .hero__h1{ font-size:var(--h1-size, clamp(3.2rem, 8vw, 5rem)); }
}

@media (max-width:820px){
  .svc-cols{ grid-template-columns:minmax(0,1fr); gap:0; }
  .svc-cols .svc-list + .svc-list{ border-top:0; }
  .reg__list::before{ display:none; }
  .reg__row{
    grid-template-columns:4.4rem minmax(0,1fr);
    grid-template-areas:"alt zone" "alt work";
    column-gap:1.3rem; row-gap:.35rem; padding:1.2rem 0;
  }
  .reg__zone{ font-size:1.3rem; }
  .reg__arr{ display:none; }
}

@media (max-width:640px){
  :root{ --rail:12px; }
  body{ font-size:16.5px; }
  .brand__sub{ display:none; }
  .brand__name{ font-size:1.1rem; }
  .hero__trust{ flex-direction:column; gap:.35rem; }
  .hero__trust li::before{ display:none; }
  .hero__trust li + li{ padding-left:0; border-left:0; }
  .plate{ max-width:340px; }
  .strip__in{ gap:.45rem 1.1rem; font-size:.52rem; }
  .why__ledger{ grid-template-columns:minmax(0,1fr); }
  .why__ledger li,
  .why__ledger li:nth-child(2n){ padding:1.3rem 0; border-left:0; }
  .hseq__list li{ grid-template-columns:minmax(0,1fr); gap:.3rem; }
  .hseq__list span{ padding-top:0; }
  .contact__foot{ flex-direction:column; align-items:flex-start; }
  .contact__foot .btn{ width:100%; justify-content:center; }
  .svc{ grid-template-columns:1.9rem minmax(0,1fr) 1rem; gap:.8rem; }
  .svc__tag{ display:none; }
  .foot__nav{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

@media (max-width:420px){
  .hero__acts .btn{ width:100%; justify-content:center; }
  .plate__cap span:nth-child(2){ display:none; }
}

@media (max-width:360px){
  .brand__mark{ width:28px; height:28px; }
  .brand__name{ font-size:.98rem; }
  .hdr__in{ min-height:62px; gap:.6rem; }
  .contact__tel{ font-size:2.3rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .pre__rotor{ animation:none; }
  .rail__line{ transform:none; }
}