/* ==========================================================================
   OJ Health & Safety — "The Walk"
   --------------------------------------------------------------------------
   base.css owns reset, wrap, header/nav/mega mechanics, buttons, forms,
   footer skeleton, reveals, preloader shell and the hero contract.
   This file supplies the charcoal / paper / hi-vis system, the drawing-sheet
   hero, the continuous spine, and the five-stop walk.
   ========================================================================== */

:root{
  /* ---------- the palette (from BRIEF.md) ---------- */
  --charcoal:   #1c1f22;
  --charcoal-2: #23272b;
  --charcoal-3: #2b3035;
  --paper:      #f4f2ec;
  --paper-2:    #eae6db;
  --paper-3:    #ded8c9;
  --hivis:      #e8f24a;
  --navy:       #243b53;
  --navy-2:     #2c4864;
  --rule:       #d8d3c6;

  /* ---------- base.css token names ---------- */
  --ink:        var(--charcoal);
  --ink-2:      var(--charcoal-2);
  --ink-3:      var(--charcoal-3);
  --surface:    var(--paper);
  --surface-2:  var(--paper-2);
  --text:       #f4f2ec;
  --muted:      #a9a89e;
  --ink-text:   #1c1f22;
  --ink-mute:   #5f5c53;
  --accent:     var(--navy);
  --accent-lit: var(--hivis);
  --accent-2:   var(--hivis);
  --line:       rgba(244,242,236,.135);
  --line-d:     rgba(28,31,34,.16);

  /* ---------- type ---------- */
  --font-display: "Gelasio", Georgia, "Times New Roman", serif;
  --font-body:    "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --font-mono:    "B612 Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- layout ---------- */
  --wrap-max: 1240px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 0px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --spine-x: clamp(2.15rem, 4.6vw, 3.2rem);
  --step-gap: clamp(1.1rem, 3vw, 2.4rem);
}

html{ scroll-padding-top:92px; }
body{ font-size:16.5px; font-weight:400; }
::selection{ background:var(--hivis); color:var(--charcoal); }
:focus-visible{ outline:2px solid var(--hivis); outline-offset:3px; }
.sect{ position:relative; }

.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(--hivis); color:var(--charcoal);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase;
}
.skip:focus{ width:auto; height:auto; clip-path:none; }

/* grain — a paper / site-hut texture, never above the navigation */
body::after{
  content:""; position:fixed; inset:0; z-index:890;
  pointer-events:none; opacity:.026;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ---------- shared type ---------- */
.kicker,
.step__kicker,
.walkstop__h,
.walkstop__tag,
.train__h,
.steps__h,
.sector__n,
.foot__h{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.17em;
}

/* ==========================================================================
   PRELOADER — a route being walked
   ========================================================================== */
.pre__mark{ width:min(240px,62vw); }
.pre__mark svg{ width:100%; height:auto; display:block; overflow:visible; }
.pre__wall{ fill:none; stroke:rgba(244,242,236,.35); stroke-width:2; }
.pre__route{ fill:none; stroke:var(--hivis); stroke-width:2.4; animation:pre-walk 1.6s linear infinite; }
.pre__dot{ fill:var(--hivis); animation:pre-pulse 1.6s var(--ease) infinite; }
@keyframes pre-walk{ from{ stroke-dashoffset:44; } to{ stroke-dashoffset:0; } }
@keyframes pre-pulse{ 0%,100%{ opacity:.25; } 45%{ opacity:1; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{ border-bottom:1px solid rgba(244,242,236,.16); }
.hdr__in{ min-height:78px; gap:1.1rem; }
.brand{
  display:inline-flex; align-items:center;
  background:var(--paper);
  padding:.4rem .55rem;
}
.brand img{ width:142px; height:auto; }
.nav{ margin-left:auto; }
.nav__list{ gap:0; }
.nav__link{
  font-size:.79rem;
  font-weight:500;
  letter-spacing:-.005em;
  padding:.52rem .5rem;
  border-radius:0;
  color:rgba(244,242,236,.88);
}
.nav__link:hover{ color:var(--hivis); background:rgba(232,242,74,.07); }
.nav__item.is-open > .nav__link{ color:var(--hivis); }
.nav__link--tel{
  font-family:var(--font-mono);
  font-size:.71rem;
  letter-spacing:.02em;
  color:var(--hivis);
  border:1px solid rgba(232,242,74,.5);
  margin-left:.45rem;
  padding:.46rem .6rem;
}
.nav__link--tel:hover{ background:var(--hivis); color:var(--charcoal); }
@media (min-width:1024px){ .nav__foot{ display:none; } }

/* ---------- mega: a paper page pinned to the charcoal header ---------- */
.nav__item.has-mega .mega{
  left:auto; right:0;
  width:min(390px,calc(100vw - 2rem));
  transform:translateY(8px);
  background:var(--paper);
  border:1px solid rgba(28,31,34,.35);
  border-top:5px solid var(--hivis);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.75);
  padding:1.3rem 1.35rem 1.1rem;
}
.nav__item.has-mega.is-open > .mega,
.nav__item.has-mega:focus-within > .mega{ transform:translateY(0); }
.mega__list{ counter-reset:m; gap:0; }
.mega__list > li{ border-bottom:1px solid var(--line-d); }
.mega__list > li:last-child{ border-bottom:0; }
.mega__list > li > a{
  display:flex; align-items:baseline; gap:.65rem;
  padding:.58rem 0;
  color:var(--ink-text);
  font-size:.88rem;
}
.mega__list > li > a::before{
  counter-increment:m;
  content:counter(m,decimal-leading-zero);
  font-family:var(--font-mono);
  font-size:.55rem; letter-spacing:.06em;
  color:var(--ink-mute);
  transition:color .18s;
}
.mega a:hover{ color:var(--navy); transform:translateX(2px); }
.mega__list > li > a:hover::before{ color:var(--navy); }
.mega__sub{ margin:.1rem 0 .7rem 1.45rem; border-left:1px solid var(--line-d); }
.mega__sub a{
  color:var(--ink-mute);
  font-size:.82rem;
  padding:.38rem 0 .38rem .8rem;
}
.mega__sub a:hover{ color:var(--navy); }
.mega__h{ color:var(--navy); }

/* ==========================================================================
   HERO — the drawing sheet
   ========================================================================== */
.hero{
  position:relative;
  background:var(--charcoal);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:calc(100svh - 78px);
  padding-top:clamp(2rem,5vh,4rem);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(244,242,236,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,242,236,.05) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(120% 90% at 70% 40%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 40%, #000 0%, transparent 78%);
}
.hero__grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  gap:clamp(2rem,4.5vw,4rem);
  align-items:center;
  flex:1;
  padding-block:clamp(1rem,3vh,2rem);
}
.hero__copy{ padding-block:clamp(1.2rem,4vh,3rem); }
.kicker{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  font-size:.61rem; color:var(--muted);
  margin-bottom:clamp(1.4rem,3vh,2.2rem);
}
.kicker__mark{ width:9px; height:9px; background:var(--hivis); flex:none; }
.kicker__sep{ opacity:.45; }

.hero__h1{
  font-family:var(--font-display);
  font-size:var(--h1-size, clamp(2.6rem, 6.9vw, 4.7rem));
  font-weight:600;
  line-height:.99;
  letter-spacing:-.038em;
}
.hero__h1 em{
  font-style:italic;
  background:linear-gradient(transparent 63%, var(--hivis) 63%, var(--hivis) 89%, transparent 89%);
}
.hero__lead{
  max-width:46ch;
  margin-top:clamp(1.2rem,2.6vh,1.8rem);
  font-size:1.02rem;
  line-height:1.66;
  color:rgba(244,242,236,.73);
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:clamp(1.5rem,3vh,2rem); }
.hero__acts .btn{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:.9rem 1.15rem; }
.hero__acts .btn--ghost{ border-color:rgba(244,242,236,.25); }
.hero__acts .btn--ghost:hover{ border-color:var(--hivis); color:var(--hivis); }

/* ---------- plan figure ---------- */
.plan{
  margin:0;
  color:var(--paper);
  border:1px solid rgba(244,242,236,.17);
  background:rgba(244,242,236,.022);
}
.plan__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.55rem .75rem;
  border-bottom:1px solid rgba(244,242,236,.14);
  font-family:var(--font-mono);
  font-size:.55rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,242,236,.55);
}
.plan__bar-mid{ color:rgba(244,242,236,.72); }
.plan__frame{ padding:.35rem .45rem .2rem; }
.plansvg{ display:block; width:100%; height:auto; color:var(--paper); }
.plansvg--sm{ display:none; }
.plan__cap{
  border-top:1px solid rgba(244,242,236,.14);
  padding:.7rem .75rem .8rem;
  font-size:.75rem; line-height:1.52;
  color:rgba(244,242,236,.55);
}
.plan__cap-tag{
  display:inline-block; margin-right:.45rem;
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--charcoal);
  background:var(--hivis); padding:.14rem .34rem;
  vertical-align:.08em;
}

.plan__grid{ color:var(--paper); opacity:.55; }
.plan__walls path{ stroke-width:3; opacity:.68; stroke-dasharray:1; stroke-dashoffset:0; }
.plan__walls .w1{ stroke-width:5; opacity:.86; }
.plan__doors{ opacity:.34; stroke-width:1.15; }
.plan__fit{ opacity:.26; stroke-width:1.15; }
.plan__rooms text{
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:2.4px;
  fill:var(--paper);
  opacity:.42;
  text-anchor:middle;
}
.plan__route{ fill:none; stroke:var(--hivis); stroke-width:2.6; opacity:.96; }
.plan__arrow{ stroke:var(--hivis); stroke-width:2.6; opacity:0; }
.route-mask{ fill:none; stroke:#fff; stroke-width:12; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.plan__doors,.plan__fit,.plan__rooms{ opacity:0; }

.stop__disc{ fill:var(--hivis); stroke:var(--charcoal); stroke-width:3; opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:center; }
.stop__n{
  font-family:var(--font-mono); font-size:17px; font-weight:700;
  fill:var(--charcoal); text-anchor:middle;
  opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:center;
}
.stop__lbl{
  font-family:var(--font-mono); font-size:15px; font-weight:700;
  letter-spacing:1.1px; fill:var(--paper); opacity:0;
}

/* the plan only animates once the preloader has released the page */
body.loaded .plansvg--lg .plan__walls path{ animation:plan-draw 1.15s var(--ease) both; }
body.loaded .plansvg--lg .plan__walls path:nth-child(2){ animation-delay:.08s; }
body.loaded .plansvg--lg .plan__walls path:nth-child(3){ animation-delay:.16s; }
body.loaded .plansvg--lg .plan__walls path:nth-child(4){ animation-delay:.24s; }
body.loaded .plansvg--lg .plan__walls path:nth-child(5){ animation-delay:.3s; }
body.loaded .plansvg--lg .plan__walls path:nth-child(6){ animation-delay:.36s; }
body.loaded .plansvg--lg .plan__walls path:nth-child(7){ animation-delay:.42s; }
body.loaded .plansvg--lg .plan__doors{ animation:fade-in .7s var(--ease) 1.05s both; }
body.loaded .plansvg--lg .plan__fit{ animation:fade-in .7s var(--ease) 1.15s both; }
body.loaded .plansvg--lg .plan__rooms{ animation:fade-in .8s var(--ease) 1.25s both; }
body.loaded .plansvg--lg .route-mask{ animation:route-draw 1.7s var(--ease) .85s both; }
body.loaded .plansvg--lg .plan__arrow{ animation:fade-in .4s var(--ease) 2.55s both; }
body.loaded .plansvg--lg .stop__disc,
body.loaded .plansvg--lg .stop__n{ animation:stop-in .45s var(--ease) both; animation-delay:calc(1.75s + var(--i) * .24s); }
body.loaded .plansvg--lg .stop__lbl{ animation:fade-in .45s var(--ease) both; animation-delay:calc(1.92s + var(--i) * .24s); }

@keyframes plan-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes route-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes stop-in{
  from{ opacity:0; transform:scale(.35); }
  to{ opacity:1; transform:scale(1); }
}

/* ---------- hero foot ---------- */
.hero__foot{ position:relative; z-index:2; margin-top:auto; }
.hero__facts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(244,242,236,.16);
  padding-block:1.15rem 1.25rem;
}
.hero__facts li{
  padding-left:1.2rem;
  border-left:1px solid rgba(244,242,236,.14);
  display:flex; flex-direction:column; gap:.15rem;
  min-width:0;
}
.hero__facts li:first-child{ padding-left:0; border-left:0; }
.hero__fact-k{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(244,242,236,.5);
}
.hero__facts b{
  font-family:var(--font-display); font-size:1.12rem; font-weight:600;
  letter-spacing:-.01em; color:var(--paper);
}
.hero__facts span:last-child{ font-size:.76rem; color:rgba(244,242,236,.55); line-height:1.35; }

/* ==========================================================================
   THE SPINE
   ========================================================================== */
.track{ position:relative; }
.track::before,
.track::after{
  content:""; position:absolute; top:0; bottom:0; pointer-events:none;
  left:calc(max((100% - var(--wrap-max)) / 2, 0px) + var(--pad) + var(--spine-x));
}
.track::before{ z-index:2; width:6px; margin-left:-3px; background:color-mix(in srgb, var(--charcoal) 82%, transparent); }
.track::after{ z-index:3; width:2px; margin-left:-1px; background:var(--hivis); }

.step__grid{
  position:relative; z-index:4;
  display:grid;
  grid-template-columns:var(--spine-x) minmax(0,1fr);
  column-gap:var(--step-gap);
  align-items:start;
}
.step__no{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,5.4vw,4rem);
  font-weight:400;
  line-height:.82;
  letter-spacing:-.04em;
  text-align:right;
  padding-right:.45rem;
  color:rgba(28,31,34,.2);
  user-select:none;
}
.step--ink .step__no,
.step--navy .step__no{ color:rgba(244,242,236,.28); }
.step__body{ min-width:0; padding-bottom:clamp(1.4rem,3vw,2rem); }
.step__kicker{
  font-size:.6rem; color:var(--navy);
  margin-bottom:.8rem;
}
.step--ink .step__kicker,
.step--navy .step__kicker{ color:var(--hivis); }
.step__h2{
  font-family:var(--font-display);
  font-size:clamp(2rem,4.3vw,3.45rem);
  font-weight:600;
  line-height:1.03;
  letter-spacing:-.03em;
}
.step__lead{
  margin-top:1.1rem;
  max-width:54ch;
  font-size:1.01rem; line-height:1.68;
  color:var(--ink-mute);
}
.step--ink .step__lead,.step--navy .step__lead{ color:rgba(244,242,236,.66); }

.step--paper{ background:var(--paper); color:var(--ink-text); }
.step--paper-2{ background:var(--paper-2); color:var(--ink-text); }
.step--ink{ background:var(--charcoal); color:var(--text); }
.step--navy{ background:var(--navy); color:var(--paper); }

/* ==========================================================================
   01 — THE WALK
   ========================================================================== */
.walk{ margin-top:clamp(2.4rem,5vw,4rem); border-top:1px solid var(--line-d); }
.walkstop{ border-bottom:1px solid var(--line-d); padding-block:clamp(1.9rem,4vw,3rem); }
.walkstop__no{
  width:2.05rem; height:2.05rem;
  display:grid; place-items:center;
  margin-left:auto; margin-top:.2rem;
  background:var(--hivis); color:var(--charcoal);
  font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  box-shadow:4px 4px 0 rgba(28,31,34,.14);
}
.walkstop__body{ min-width:0; }
.walkstop__top{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  border-bottom:1px solid var(--line-d);
  padding-bottom:.65rem; margin-bottom:1.2rem;
}
.walkstop__t{
  font-family:var(--font-display);
  font-size:clamp(1.45rem,2.8vw,1.95rem);
  font-weight:600; letter-spacing:-.02em; line-height:1.1;
}
.walkstop__tag{ font-size:.55rem; color:var(--ink-mute); white-space:nowrap; }
.walkstop__cols{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,3rem);
}
.walkstop__h{ font-size:.57rem; color:var(--ink-mute); margin-bottom:.65rem; }
.ticks{ display:grid; gap:.4rem; }
.ticks li{
  position:relative; padding-left:1.05rem;
  font-size:.95rem; line-height:1.5;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:6px; height:6px; background:var(--charcoal);
}
.walkstop__why{
  font-size:.96rem; line-height:1.65; color:var(--ink-mute);
  max-width:38ch;
}
.walkend{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.2rem; padding-block:clamp(1.4rem,3vw,2rem);
}
.walkend p{ max-width:52ch; font-size:.92rem; color:var(--ink-mute); }
.tlink{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase;
  border-bottom:2px solid var(--hivis);
  padding-bottom:.28rem;
  transition:gap .2s var(--ease), color .2s;
}
.tlink svg{ width:14px; height:14px; }
.tlink:hover{ gap:.85rem; }
.step--ink .tlink,.step--navy .tlink{ color:var(--paper); }

/* ==========================================================================
   02 — SERVICES
   ========================================================================== */
.svc{ list-style:none; border-top:1px solid var(--line); }
.svc__row a{
  display:grid;
  grid-template-columns:2.4rem minmax(0,.92fr) minmax(0,1.18fr) 1.5rem;
  column-gap:clamp(1rem,2.4vw,1.8rem);
  align-items:baseline;
  padding:1.35rem .15rem;
  border-bottom:1px solid var(--line);
  transition:background .22s var(--ease), padding .22s var(--ease);
}
.svc__row a:hover{ background:rgba(232,242,74,.055); padding-left:.55rem; }
.svc__n{
  grid-column:1;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em;
  color:rgba(232,242,74,.6);
}
.svc__t{
  grid-column:2;
  font-family:var(--font-display);
  font-size:clamp(1.15rem,2vw,1.38rem);
  font-weight:600; line-height:1.2; letter-spacing:-.015em;
  transition:color .2s;
}
.svc__row a:hover .svc__t{ color:var(--hivis); }
.svc__d{
  grid-column:3;
  font-size:.88rem; line-height:1.55;
  color:rgba(244,242,236,.6);
}
.svc__a{
  grid-column:4;
  font-family:var(--font-mono);
  color:var(--hivis); text-align:right;
  transition:transform .22s var(--ease);
}
.svc__row a:hover .svc__a{ transform:translateX(5px); }

/* ==========================================================================
   03 — TRAINING
   ========================================================================== */
.train{
  display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  gap:clamp(2rem,5vw,4.2rem);
  align-items:start;
}
.train__group{ border-top:1px solid var(--line-d); padding-block:1.15rem 1.35rem; }
.train__group:first-child{ border-top:0; padding-top:0; }
.train__h{ font-size:.57rem; color:var(--ink-mute); margin-bottom:.55rem; }
.train__list{ display:grid; gap:0; }
.train__list--two{ grid-template-columns:1fr 1fr; column-gap:2rem; }
.train__list a{
  display:inline-block;
  font-size:.94rem; line-height:1.35;
  padding:.24rem 0;
  border-bottom:1px solid transparent;
  transition:border-color .18s, color .18s;
}
.train__list a:hover{ border-color:var(--charcoal); }
.train__all{ margin-top:1.2rem; }

.cert{ margin:0; }
.cert__frame{
  background:var(--paper);
  border:1px solid rgba(28,31,34,.28);
  padding:.85rem;
  box-shadow:10px 10px 0 rgba(28,31,34,.07);
}
.cert svg{ width:100%; height:auto; display:block; }
.cert__edge{ stroke:rgba(28,31,34,.3); stroke-width:1.2; }
.cert__tape{ fill:var(--hivis); }
.cert__over{ font-family:var(--font-mono); font-size:11px; letter-spacing:3px; fill:var(--ink-text); }
.cert__org{ font-family:var(--font-mono); font-size:8px; letter-spacing:1.5px; fill:var(--ink-mute); }
.cert__k{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:2px; fill:var(--ink-mute); }
.cert__v{ font-family:var(--font-display); font-size:16px; fill:var(--ink-text); }
.cert__rule{ stroke:rgba(28,31,34,.28); stroke-width:1; }
.cert__seal circle{ fill:var(--hivis); stroke:var(--ink-text); stroke-width:1.4; }
.cert__seal path{ stroke:var(--ink-text); stroke-width:2.6; }
.cert__row{ opacity:1; }
.cert__seal{ opacity:1; transform:scale(1); transform-box:fill-box; transform-origin:center; }
.cert figcaption{ margin-top:.75rem; font-size:.73rem; line-height:1.5; color:var(--ink-mute); max-width:38ch; }

.cert.is-in .cert__row{ animation:cert-row .55s var(--ease) both; animation-delay:calc(.3s + var(--i) * .32s); }
.cert.is-in .cert__seal{ animation:cert-seal .45s var(--ease) 1.35s both; }
@keyframes cert-row{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}
@keyframes cert-seal{
  from{ opacity:0; transform:scale(.5) rotate(-12deg); }
  to{ opacity:1; transform:scale(1) rotate(0); }
}

/* ==========================================================================
   04 — SECTORS
   ========================================================================== */
.sectors{ border-top:1px solid rgba(244,242,236,.22); }
.sector{
  display:grid;
  grid-template-columns:2.6rem minmax(0,.82fr) minmax(0,1.18fr);
  column-gap:clamp(1rem,2.6vw,2rem);
  padding-block:1.7rem;
  border-bottom:1px solid rgba(244,242,236,.17);
}
.sector__n{ font-size:.6rem; color:rgba(232,242,74,.72); padding-top:.35rem; }
.sector__t{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.4vw,1.62rem);
  font-weight:600; line-height:1.18; letter-spacing:-.015em;
}
.sector__d{ font-size:.9rem; line-height:1.55; color:rgba(244,242,236,.66); max-width:44ch; }
.sector__links{ display:flex; flex-wrap:wrap; gap:.45rem 1.25rem; margin-top:.75rem; }
.sector__links a{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--hivis);
  border-bottom:1px solid rgba(232,242,74,.35);
  padding-bottom:.12rem;
  transition:border-color .18s;
}
.sector__links a:hover{ border-color:var(--hivis); }

/* ==========================================================================
   05 — WHY OJ
   ========================================================================== */
.proof{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line-d);
  border-bottom:1px solid var(--line-d);
}
.proof li{
  padding:1.05rem .5rem 1.1rem 1.15rem;
  border-left:1px solid var(--line-d);
}
.proof li:first-child{ border-left:0; padding-left:0; }
.proof span{
  display:block;
  font-family:var(--font-mono); font-size:.52rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:.25rem;
}
.proof b{
  font-family:var(--font-display); font-size:clamp(1.2rem,2.2vw,1.5rem);
  font-weight:600; letter-spacing:-.02em;
}
.why__cols{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,5vw,4.2rem);
  margin-top:clamp(2rem,4vw,2.8rem);
}
.why__q{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.5vw,1.6rem);
  line-height:1.38; letter-spacing:-.018em;
  max-width:30ch;
}
.why__attr{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute);
  margin:.85rem 0 1.5rem;
}
.why__story p:last-child{ font-size:.96rem; line-height:1.68; color:var(--ink-mute); max-width:52ch; }

.steps{
  position:relative;
  background:var(--charcoal);
  color:var(--paper);
  padding:1.55rem 1.55rem 1.1rem;
}
.steps::before{ content:""; position:absolute; top:0; left:0; right:0; height:7px; background:var(--hivis); }
.steps__h{
  font-size:.57rem; color:var(--hivis);
  margin:.4rem 0 .7rem;
}
.steps__list li{
  display:grid; grid-template-columns:1.5rem minmax(0,1fr);
  gap:.65rem;
  padding:.85rem 0;
  border-top:1px solid rgba(244,242,236,.16);
}
.steps__list b{
  display:block;
  font-family:var(--font-display); font-size:1.05rem; font-weight:600;
  letter-spacing:-.01em;
}
.steps__list p{ font-size:.82rem; line-height:1.5; color:rgba(244,242,236,.64); margin-top:.18rem; }
.steps__n{ font-family:var(--font-mono); font-size:.58rem; color:var(--hivis); padding-top:.28rem; }

/* ==========================================================================
   06 — CONTACT
   ========================================================================== */
.step--contact{ padding-bottom:clamp(4rem,8vw,7rem); }
.contact{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
  padding-top:clamp(1rem,2vw,1.5rem);
}
.contact__tel{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.65rem,4vw,3rem);
  font-weight:600; letter-spacing:-.03em; line-height:1.05;
  transition:color .18s;
}
.contact__tel:hover{ color:var(--hivis); }
.contact__mail{
  display:inline-block;
  margin-top:.65rem;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em;
  color:var(--hivis);
  border-bottom:1px solid rgba(232,242,74,.4);
  padding-bottom:.15rem;
  overflow-wrap:anywhere;
}
.contact__addr{
  margin-top:2rem;
  font-size:.95rem; line-height:1.62;
  color:rgba(244,242,236,.7);
}
.contact__social{
  display:flex; flex-wrap:wrap; gap:1.1rem;
  margin-top:2rem;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase;
}
.contact__social a{ color:rgba(244,242,236,.72); border-bottom:1px solid transparent; padding-bottom:.15rem; }
.contact__social a:hover{ color:var(--hivis); border-color:var(--hivis); }

.contact__form{ border-color:rgba(244,242,236,.18); background:rgba(244,242,236,.035); border-radius:0; padding:clamp(1.2rem,2.6vw,1.8rem); }
.contact__form-h{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--hivis);
  margin-bottom:1.1rem;
}
.contact__pair{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.contact__form label{ font-size:.55rem; color:rgba(244,242,236,.55); }
.contact__form input,.contact__form textarea{
  border-radius:0;
  background:rgba(0,0,0,.2);
  border-color:rgba(244,242,236,.18);
  color:var(--paper);
  font-size:.92rem;
}
.contact__form input:focus,.contact__form textarea:focus{ border-color:var(--hivis); }
.contact__form textarea{ min-height:96px; }
.contact__form .btn{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  border-radius:0;
}
.contact__form-note{
  margin-top:.8rem; text-align:center;
  font-size:.72rem; color:rgba(244,242,236,.5);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ border-top:1px solid rgba(244,242,236,.16); }
.foot__brand .brand{ margin-bottom:1.2rem; padding:.45rem .6rem; }
.foot__brand .brand img{ width:150px; }
.foot__blurb{ font-size:.86rem; line-height:1.6; color:rgba(244,242,236,.6); max-width:34ch; }
.foot__contact{
  margin-top:1.15rem;
  font-family:var(--font-mono); font-size:.76rem; line-height:1.85;
  color:rgba(244,242,236,.78);
}
.foot__contact a:hover{ color:var(--hivis); }
.foot__social{
  display:flex; flex-wrap:wrap; gap:1rem;
  margin-top:1.2rem;
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.12em;
  text-transform:uppercase;
}
.foot__social a{ color:var(--hivis); border-bottom:1px solid rgba(232,242,74,.35); padding-bottom:.1rem; }
.foot__social a:hover{ border-color:var(--hivis); }
.foot__nav a{ font-size:.8rem; }
.foot__addr{
  margin-top:1.5rem;
  font-size:.78rem; line-height:1.55;
  color:rgba(244,242,236,.5);
}
.foot__legal{ color:rgba(244,242,236,.32); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .brand img{ width:132px; }
  .nav__link{ font-size:.755rem; padding-inline:.42rem; }
  .nav__link--tel{ font-size:.67rem; padding-inline:.5rem; }
  .plansvg--lg{
    position:absolute; width:1px; height:1px;
    opacity:0; visibility:hidden; overflow:hidden;
    pointer-events:none; clip-path:inset(50%);
  }
  .plansvg--sm{ display:block; max-width:400px; margin-inline:auto; }
  /* the simplified plan stays complete at any width — no blank resize state */
  .plansvg--sm .plan__walls path,
  .plansvg--sm .route-mask{ stroke-dashoffset:0; }
  .plansvg--sm .plan__doors,
  .plansvg--sm .plan__fit,
  .plansvg--sm .plan__rooms,
  .plansvg--sm .plan__arrow,
  .plansvg--sm .stop__disc,
  .plansvg--sm .stop__n,
  .plansvg--sm .stop__lbl{ opacity:1; }
  .plansvg--sm .stop__disc,
  .plansvg--sm .stop__n{ transform:none; }
  .plansvg--sm .stop__lbl{ font-size:13px; }
}

@media (max-width:1023px){
  .hdr__in{ min-height:70px; }
  .brand img{ width:126px; }
  .nav__link{ font-size:1.02rem; }
  .nav__link--tel{
    display:inline-flex; justify-content:flex-start;
    margin:.4rem 0 0; border:0; border-left:3px solid var(--hivis);
    padding:.4rem 0 .4rem .7rem; width:auto;
  }
  .nav__item.has-mega .mega{
    background:none; border:0; border-top:0; box-shadow:none; padding:0; width:100%;
  }
  .nav__item.has-mega .mega .mega__list > li{ border-bottom:0; }
  .mega__list > li > a{ color:rgba(244,242,236,.85); padding:.5rem 0; }
  .mega__list > li > a::before{ display:none; }
  .mega__sub{ border-left-color:rgba(244,242,236,.16); margin-left:.2rem; }
  .mega__sub a{ color:rgba(244,242,236,.62); }
  .mega a:hover{ color:var(--hivis); }
}

@media (max-width:900px){
  .hero{ min-height:0; padding-top:0; }
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:1.8rem; padding-top:1.6rem; padding-bottom:0; }
  .hero__copy{ padding-block:clamp(1.5rem,6vw,2.5rem) 0; }
  .hero__h1{ font-size:var(--h1-size, clamp(2.5rem,9.8vw,4rem)); }
  .plan{ margin-bottom:1.8rem; }
  .plan__frame{ max-width:640px; margin-inline:auto; }
  .hero__facts{ grid-template-columns:1fr 1fr; row-gap:1rem; padding-block:1.2rem; }
  .hero__facts li:nth-child(3){ padding-left:0; border-left:0; }
  .hero__facts li:nth-child(4){ padding-left:0; border-left:0; }

  .step__grid{ grid-template-columns:var(--spine-x) minmax(0,1fr); }
  .train{ grid-template-columns:minmax(0,1fr); }
  .cert{ max-width:420px; }
  .why__cols{ grid-template-columns:minmax(0,1fr); }
  .contact{ grid-template-columns:minmax(0,1fr); }
  .contact__details{ padding-bottom:.5rem; }
}

@media (max-width:760px){
  :root{ --spine-x:2.1rem; --step-gap:1.1rem; }
  .track::before{ width:5px; }
  .step__no{ font-size:2.1rem; }
  .step__h2{ font-size:clamp(1.85rem,7.4vw,2.6rem); }
  .step__lead{ font-size:.96rem; }
  .walkstop__cols{ grid-template-columns:minmax(0,1fr); gap:1.2rem; }
  .walkstop__why{ max-width:none; }
  .walkend{ align-items:flex-start; }

  .svc__row a{
    grid-template-columns:1.9rem minmax(0,1fr) auto;
    row-gap:.35rem;
    padding-block:1.15rem;
  }
  .svc__t{ grid-column:2; grid-row:1; }
  .svc__d{ grid-column:2 / -1; grid-row:2; }
  .svc__a{ grid-column:3; grid-row:1; }
  .svc__row a:hover{ padding-left:0; background:none; }

  .train__list--two{ grid-template-columns:minmax(0,1fr); }

  .sector{ grid-template-columns:1.8rem minmax(0,1fr); row-gap:.6rem; }
  .sector__t{ grid-column:2; }
  .sector > div{ grid-column:2; }

  .proof{ grid-template-columns:1fr 1fr; }
  .proof li:nth-child(3){ border-left:0; padding-left:0; }
  .proof li{border-top:1px solid var(--line-d);}
  .proof li:nth-child(-n+2){ border-top:0; }

  .contact__pair{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:520px){
  .hero__h1{ font-size:var(--h1-size, clamp(2.2rem,10.2vw,3.2rem)); }
  .hero__facts{ grid-template-columns:minmax(0,1fr); row-gap:0; }
  .hero__facts li{ padding:.75rem 0; border-left:0; border-top:1px solid rgba(244,242,236,.12); }
  .hero__facts li:first-child{ border-top:0; padding-top:0; }
  .plan__bar{ font-size:.48rem; letter-spacing:.1em; }
  .plan__cap{ font-size:.7rem; }
  .walkstop__top{ flex-wrap:wrap; gap:.35rem; }
  .proof{ grid-template-columns:minmax(0,1fr); }
  .proof li{ padding-left:0; border-left:0; }
  .proof li:nth-child(2){ border-top:1px solid var(--line-d); }
  .foot__nav{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

/* ---------- reduced motion: everything finished ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .plan__walls path,.route-mask{ stroke-dashoffset:0 !important; }
  .plan__doors,.plan__fit,.plan__rooms,.plan__arrow,
  .stop__disc,.stop__n,.stop__lbl{ opacity:1 !important; transform:none !important; }
  .cert__row,.cert__seal{ opacity:1 !important; transform:none !important; }
  .pre__route,.pre__dot{ animation:none !important; }
  .pre__route{ stroke-dasharray:none; }
}