/* ============================================================
   BSOLTEC — THEME 02 / BLUEPRINT v4 · "THE LIVING DRAWING,
   WARM PLATES"
   v3's plotter hero kept, re-aligned with the live site:
   - accent swapped safety orange → site amber (#FFA517)
   - blueprint blue → charcoal-navy (#243040), closer to the
     current charcoal sections
   - headings set in Barlow Condensed (current site's display
     face); IBM Plex Mono keeps every technical label
   - imagery is back: photorealistic plates, framed as drawing
     figures with fig. captions — hero, difference band, four
     industry cards, contact. All motion still CSS-driven,
     settles ≤ 2.5s, holds without JS / under reduced-motion.
   ============================================================ */

/* spacing scale — 4 / 8 / 16 / 24 / 40 / 64 / 96 */
  /* crosshair '+' tile, centred on (56,56) of a 112px tile so it
     lands on every 4th grid intersection */
:root{ --navy:        #243040; --ink:         #101820; --white:       #FFFFFF; --amber:       #FFA517; --amber-hi:    #E08E00; --line-w:      #C9D4E0;              /* borders on white      */ --line-b:      rgba(255,255,255,.18);/* borders on navy       */ --grid-b:      rgba(255,255,255,.06);/* 28px grid on navy     */ --grid-w:      rgba(36,48,64,.05);   /* faint grid on white   */ --ink-soft:    #33404D;              /* body on white, ≥4.5:1 */ --navy-soft:   rgba(255,255,255,.78);/* body on navy          */ --sans: 'IBM Plex Sans', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Noto Sans TC', monospace; --disp: 'Barlow Condensed', 'IBM Plex Sans', 'Noto Sans TC', sans-serif; --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; --s7: 96px; --cross-b: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='112'%20height='112'%3E%3Cpath%20d='M56%2050v12M50%2056h12'%20stroke='rgba(255,255,255,0.14)'/%3E%3C/svg%3E"); }
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-padding-top: 80px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{ font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
::selection{ background: var(--amber); color: var(--ink); }
a{ color: inherit; }
img{ display: block; max-width: 100%; }

/* ---------- landmarks & layout ---------------------------- */
.wrap{ max-width: 1200px; margin: 0 auto; padding-left: var(--s4); padding-right: var(--s4); }
.section{ padding: var(--s7) 0; position: relative; }

/* corner marks removed (editorial restraint direction, 2026-10) */
.sheet{ position: relative; }

/* ---------- backgrounds ------------------------------------ */
.bg-blue{ background-color: var(--navy); color: var(--white); }
.bg-grid-white{ background-color: var(--white); }

/* ---------- typography -------------------------------------- */
.mono{ font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.eyebrow{ font-family: var(--mono); font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .22em; color: var(--amber); margin-bottom: var(--s3); }
.eyebrow-ink{ color: var(--ink); }
.eyebrow-ink b{ color: var(--amber); font-weight: 500; }
h1,h2,h3{ font-family: var(--disp); font-weight: 600; line-height: 1.05; letter-spacing: .01em; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.lead{ font-size: 1.0625rem; color: var(--ink-soft); max-width: 56ch; }
.bg-blue .lead{ color: var(--navy-soft); }

/* ---------- dimension-line divider -------------------------- */
.dim{ display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); color: var(--line-w); }
.dim .tick{ display: none; }
.dim .line{ height: 1px; flex: 1; background: currentColor; }

/* ---------- section header ----------------------------------- */
.sec-head{ display: grid; grid-template-columns: 1fr; align-items: end; gap: var(--s4); padding-bottom: var(--s4); margin-bottom: var(--s6); border-bottom: 1px solid var(--line-w); }
.bg-blue .sec-head{ border-bottom-color: var(--line-b); }

/* ---------- buttons ------------------------------------------ */
.btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 15px 26px; border: 1px solid transparent; border-radius: 0; cursor: pointer; transition: background-color 100ms linear, color 100ms linear, border-color 100ms linear; }
.btn .sq{ width: 7px; height: 7px; background: currentColor; flex: none; }
.btn-primary{ background: var(--amber); color: var(--ink); border-color: var(--amber); }
.btn-primary:hover{ background: var(--amber-hi); border-color: var(--amber-hi); color: var(--ink); }
.btn-ghost{ background: transparent; color: var(--white); border-color: var(--amber); }
.btn-ghost:hover{ background: var(--amber); color: var(--ink); }
.btn-ghost-ink{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost-ink:hover{ background: var(--ink); color: var(--white); }
:focus-visible{ outline: 2px solid var(--amber); outline-offset: 3px; }
.bg-blue :focus-visible{ outline-color: var(--white); }

/* card links — mono, amber underline, instant snap */
.card-link{ display: inline-flex; align-items: center; gap: var(--s2); margin-top: auto; padding-top: var(--s3); font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--amber); padding-bottom: 3px; width: fit-content; transition: color 100ms linear, border-color 100ms linear; }
.card-link .sq{ width: 6px; height: 6px; background: var(--amber); flex: none; transition: background-color 100ms linear; }
.card-link:hover{ color: var(--amber-hi); }

/* ---------- skip link ---------------------------------------- */
.skip{ position: absolute; left: var(--s3); top: -48px; z-index: 100; background: var(--amber); color: var(--ink); font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; padding: 10px 16px; text-decoration: none; transition: top 100ms linear; }
.skip:focus{ top: var(--s3); }

/* ---------- nav ---------------------------------------------- */
.nav{ position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line-b); }
.nav-inner{ display: flex; align-items: center; justify-content: space-between; gap: var(--s4); height: 64px; }
.wordmark{ display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; color: var(--white); text-decoration: none; }
.wordmark .logo{ height: 32px; width: auto; display: block; }
.footer .wordmark .logo{ height: 38px; }
.wordmark .mark{ width: 9px; height: 9px; background: var(--amber); flex: none; }
.wordmark .file{ font-family: var(--mono); font-weight: 400; font-size: .74rem; letter-spacing: .14em; color: rgba(255,255,255,.55); border-left: 1px solid var(--line-b); padding-left: 10px; }
.nav-links{ display: flex; align-items: center; gap: var(--s5); list-style: none; }
.nav-links a{ font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: color 100ms linear, border-color 100ms linear; }
.nav-links a:hover{ color: var(--white); border-bottom-color: var(--amber); }
/* Solutions submenu — desktop: dropdown on hover/focus; mobile: expanded list */
.nav-has-sub{ position: relative; }
.nav-sub-label{ font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); padding: 6px 0; cursor: default; }
.nav-sub{ display: none; position: absolute; top: 100%; left: 0; min-width: 230px; list-style: none; background: var(--navy); border: 1px solid var(--line-b); }
.nav-has-sub:hover .nav-sub, .nav-has-sub:focus-within .nav-sub{ display: block; }
.nav-sub a{ display: block; padding: 12px 16px; }
.nav .btn{ padding: 11px 18px; }
/* header CTA: hidden while the hero's own CTA is on screen; JS adds .show */
.nav-cta{ opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms; }
.nav-cta.show{ opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s; }
.nav-toggle{ display: none; width: 42px; height: 42px; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 1px solid var(--line-b); border-radius: 0; cursor: pointer; padding: 0; }
.nav-toggle span{ display: block; width: 16px; height: 1px; background: var(--white); }

/* ---------- photo plates — figures on the drawing ------------- */
.plate{ position: relative; border: 1px solid var(--line-b); background: rgba(255,255,255,.04); padding: 10px; }
.plate::before,
.plate::after{ content: "+"; position: absolute; top: -9px; font-family: var(--mono); font-size: .8rem; color: rgba(255,255,255,.45); background: var(--navy); padding: 0 2px; }
.plate::before{ left: 10px; }
.plate::after{ right: 10px; }
.plate img{ width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; filter: saturate(.92) contrast(1.04); }
.plate figcaption{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding-top: 10px; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.plate figcaption i{ font-style: normal; color: rgba(255,255,255,.45); }
.plate-w{ border-color: var(--line-w); background: var(--white); }
.plate-w::before,
.plate-w::after{ color: var(--line-w); background: var(--white); }
.plate-w figcaption{ color: var(--ink-soft); }
.plate-w figcaption i{ color: #8A97A3; }

/* ---------- hero / full-bleed photo canvas -------------------------
   the photo IS the hero: navy gradient scrim from the left keeps the
   headline zone calm; slow ken-burns zoom + one pulsing crosshair. */
.hero{ position: relative; overflow: hidden; border-bottom: 1px solid var(--line-b); background: var(--navy); color: var(--white); }
.hero .wrap{ position: relative; z-index: 2; }
.hero > .wrap::before,
.hero > .wrap::after{ display: none; } /* bottom '+' marks clash with the sheet furniture */
.hero-media{ position: absolute; inset: 0; z-index: 0; }
.hero-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center 35%; animation: heroKen 36s ease-in-out infinite alternate; }
@keyframes heroKen{ from{ transform: scale(1); } to{ transform: scale(1.07); } }
.hero-mark{ display: none; }
/* no full-bleed scrim — text sits on per-line navy highlight bars
   (hero direction adopted 2026-10: photo stays fully visible) */
.hero-grid{ min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--s5); padding-bottom: var(--s6); }
.hero-main{ position: relative; z-index: 2; max-width: 720px; }
.hero h1{ font-size: clamp(3rem, 6.2vw, 5.5rem); font-weight: 600; text-transform: uppercase; letter-spacing: .015em; line-height: .95; margin-bottom: var(--s4); }
.hero h1 .h-line{ display: inline-block; background: rgba(28,38,50,.92); padding: 2px 18px 6px; margin-bottom: 6px; }
.hero h1 .dot{ color: var(--amber); }
.br-mob{ display: none; }
.hero-sub{ display: inline; background: rgba(28,38,50,.92); padding: 3px 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.9; color: rgba(255,255,255,.85); max-width: 52ch; margin-bottom: var(--s3); }
.hero-sub b{ color: var(--white); font-weight: 500; }
.hero-pillars{ display: inline-block; background: rgba(28,38,50,.92); padding: 4px 10px; font-family: var(--mono); font-size: .8rem; letter-spacing: .3em; color: rgba(255,255,255,.55); margin-bottom: var(--s4); }
.hero-cta{ display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); margin-bottom: var(--s4); }

/* micro-proof rail under the CTAs — ownable facts only */
.hero-proof{ display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); list-style: none; }
.hero-proof li{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.hero-proof li::before{ content: ""; width: 6px; height: 6px; background: var(--amber); flex: none; }

/* FIG. 04 — delivery system: nodes + leaders, drawn stroke-by-stroke.
   node borders are 4 background strokes traced by the pen (nstroke);
   labels stamp in as the pen passes; arrows close each leader. */
.sys{ grid-column: 1 / -1; margin-top: var(--s5); position: relative; z-index: 2; }
.sys-cap{ font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--white); margin-bottom: var(--s3); }
.sys-cap i{ font-style: normal; color: rgba(255,255,255,.55); }
.sys-flow{ list-style: none; display: flex; align-items: center; }
.sys-node{ --pen: rgba(255,255,255,.85); flex: none; min-width: 138px; padding: 11px 14px 10px; background-image: linear-gradient(var(--pen), var(--pen)), linear-gradient(var(--pen), var(--pen)), linear-gradient(var(--pen), var(--pen)), linear-gradient(var(--pen), var(--pen)); background-repeat: no-repeat; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-size: 0 1px, 1px 0, 0 1px, 1px 0; animation: nstroke 260ms linear both; animation-delay: var(--d, 0ms); }
.sys-node .nk{ display: block; font-family: var(--mono); font-size: .56rem; letter-spacing: .14em; color: rgba(255,255,255,.5); margin-bottom: 4px; opacity: 0; animation: stamp 140ms linear both; animation-delay: var(--dt, 0ms); }
.sys-node .nl{ display: block; font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--white); opacity: 0; animation: stamp 140ms linear both; animation-delay: var(--dt, 0ms); }
.sys-node-final .nk{ color: var(--amber); }
.sys-lead{ flex: none; width: 46px; display: flex; align-items: center; }
.sys-lead .ll{ display: block; flex: 1; height: 1px; background: rgba(255,255,255,.55); transform: scaleX(0); transform-origin: left center; animation: leadx 150ms linear both; animation-delay: var(--d, 0ms); }
.sys-lead .arr{ display: block; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--amber); margin-left: -1px; opacity: 0; animation: stamp 140ms linear both; animation-delay: var(--dt, 0ms); }
.sys-end{ flex: none; margin-left: 12px; }
.sys-end .sq{ display: block; width: 7px; height: 7px; background: var(--amber); }
@keyframes nstroke{
  0%  { background-size: 0 1px, 1px 0, 0 1px, 1px 0; }
  25% { background-size: 100% 1px, 1px 0, 0 1px, 1px 0; }
  50% { background-size: 100% 1px, 1px 100%, 0 1px, 1px 0; }
  75% { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 0; }
  100%{ background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; }
}
@keyframes leadx{ to{ transform: scaleX(1); } }
@keyframes leady{ to{ transform: scaleY(1); } }

/* scroll cue */
.sheet-cue{ position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 2; font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.78); text-decoration: none; padding: 6px 2px; border-bottom: 1px solid rgba(255,255,255,.25); transition: color 100ms linear, border-color 100ms linear; }
.sheet-cue .tri{ color: var(--amber); }
.sheet-cue:hover{ color: var(--white); border-bottom-color: var(--amber); }

/* ---------- plotter reveal primitives ------------------------- */
/* .rv — hard stamp: opacity snaps 0 → 1 at --d (140ms linear: ultra-short
   steps(1) animations get dropped by the compositor at long delays) */
.rv{ opacity: 0; animation: stamp 140ms linear both; animation-delay: var(--d, 0ms); }
/* .h-line — headline line: plotted left-to-right in 6 discrete pen passes */
.h-line{ display: block; animation: plot 420ms steps(6) both; animation-delay: var(--d, 0ms); }
@keyframes stamp{ 0%{ opacity: 0; } 100%{ opacity: 1; } }
@keyframes plot{ from{ clip-path: inset(-15% 100% -15% 0); } to{ clip-path: inset(-15% 0% -15% 0); } }
@keyframes lead-draw{ from{ stroke-dashoffset: 1; } }

/* ---------- 01 / proof strip ---------------------------------- */
.proof{ padding: var(--s6) 0; }
.proof-head{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.proof-label{ font-family: var(--mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.proof-label sup{ color: var(--amber); margin-right: 8px; }
.proof-row{ display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line-w); border-left: 1px solid var(--line-w); margin-bottom: var(--s4); }
.proof-cell{ grid-column: span 2; }
.proof-cell:nth-child(4), .proof-cell:nth-child(5){ grid-column: span 3; }
.proof-cell{ padding: var(--s4); border-right: 1px solid var(--line-w); border-bottom: 1px solid var(--line-w); background: var(--white); transition: background-color 100ms linear; }
.proof-cell:hover{ background: #F4F7FA; }
.proof-val{ font-family: var(--mono); font-size: 1.35rem; font-weight: 600; letter-spacing: .04em; color: var(--ink); display: block; margin-bottom: var(--s2); }
.proof-val b{ color: var(--amber); font-weight: 600; }
.proof-cap{ font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }
.client-row{ display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line-w); border-left: 1px solid var(--line-w); }
.client{ display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 12px; border-right: 1px solid var(--line-w); border-bottom: 1px solid var(--line-w); font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #44515F; background: var(--white); transition: background-color 100ms linear, color 100ms linear; }
.client:hover{ background: #F4F7FA; color: var(--ink); }
.client .glyph{ width: 8px; height: 8px; flex: none; border: 1px solid #44515F; }
.client:hover .glyph{ border-color: var(--amber); background: var(--amber); }
.client .g-dia{ transform: rotate(45deg); }
.client .g-cir{ border-radius: 50%; }
.client .g-fill{ background: #44515F; }

/* compact facts line — nutrient-style, sits beside the contact form */
.contact-facts{ font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-soft); line-height: 1.8; margin-bottom: var(--s4); }

/* ---------- 02 / how we're different --------------------------- */
.values{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.value{ border-top: 1px solid var(--ink); padding-top: var(--s4); }
.value .v-no{ font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: var(--s3); }
.value .v-no b{ color: var(--amber); font-weight: 500; }
.value h3{ font-size: 1.35rem; margin-bottom: var(--s2); }
.value p{ color: var(--ink-soft); font-size: .95rem; }

/* figure duo under the values — plates 02 / 03 */
.duo{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s6); }
.duo .plate img{ aspect-ratio: 16 / 9.5; }

/* ---------- 03 / by challenge ---------------------------------- */
.svc-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.ch-grid{ grid-template-columns: repeat(2, 1fr); }
.svc{ position: relative; border: 1px solid var(--line-w); background: var(--white); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); transition: border-color 100ms linear; }
.svc::before,
.svc::after{ content: "+"; position: absolute; top: -8px; font-family: var(--mono); font-size: .8rem; color: var(--line-w); background: var(--white); padding: 0 2px; }
.svc::before{ left: 10px; }
.svc::after{ right: 10px; }
.svc:hover{ border-color: var(--ink); }
.svc:hover .svc-no{ color: var(--amber-hi); }
.svc-top{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-w); }
.svc-no{ font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; color: var(--ink-soft); transition: color 100ms linear; }
.svc-ref{ font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; color: #6B7885; }
.svc h3{ font-size: 1.5rem; color: var(--ink); }
.svc p{ color: var(--ink-soft); font-size: .95rem; }

/* ---------- 05 / by industry ----------------------------------- */
.ind-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.ind{ position: relative; border: 1px solid var(--line-w); background: var(--white); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); transition: border-color 100ms linear; }
.ind:hover{ border-color: var(--ink); }
.ind:hover .ind-no{ color: var(--amber-hi); }
.ind-img{ width: calc(100% + var(--s4) * 2); max-width: none; height: 180px; object-fit: cover; margin: calc(var(--s4) * -1) calc(var(--s4) * -1) 0; filter: saturate(.92) contrast(1.04); }
.svc-img{ width: calc(100% + var(--s5) * 2); max-width: none; height: 160px; object-fit: cover; margin: calc(var(--s5) * -1) calc(var(--s5) * -1) 0; filter: saturate(.92) contrast(1.04); }
.ind-no{ font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; color: var(--ink-soft); transition: color 100ms linear; }
.ind h3{ font-size: 1.3rem; }
.ind p{ color: var(--ink-soft); font-size: .9rem; }

/* ---------- 06 / how we deliver -------------------------------- */
.steps{ list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s4); }
.steps-2{ grid-template-columns: repeat(2, 1fr); }
.step{ position: relative; border-top: 1px solid var(--ink); padding-top: var(--s4); }
.step::before{ content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--amber); }
.step-no{ font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: var(--s2); }
.step h3{ font-size: 1.2rem; margin-bottom: var(--s2); }
.step p{ font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }
.step-exit{ display: block; margin-top: var(--s3); padding-top: var(--s2); border-top: 1px dashed var(--line-w); font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #44515F; line-height: 1.7; }
.step-exit b{ color: var(--amber); font-weight: 500; }
.process-foot{ margin-top: var(--s6); display: flex; align-items: center; gap: var(--s3); color: var(--line-w); }
.process-foot .line{ height: 1px; flex: 1; background: currentColor; }
.process-foot .tag{ font-family: var(--mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.process-foot .tag b{ color: var(--amber); font-weight: 500; }
/* process section runs as a navy band on the homepage */
.bg-blue .step{ border-top-color: rgba(255,255,255,.85); }
.bg-blue .step-no{ color: var(--navy-soft); }
.bg-blue .step p{ color: var(--navy-soft); }
.bg-blue .step-exit{ border-top-color: var(--line-b); color: var(--navy-soft); }
.bg-blue .process-foot{ color: var(--line-b); }
.bg-blue .process-foot .tag{ color: var(--white); }

/* ---------- how we work / stages diagram (navy video-grade SVG plates) ----
   Variants A/B (stages-draft): ink rail draws left→right with a glowing
   beam head, station nodes pop in sequence, artifact tags stamp below.
   Variant B (.hybrid) slams the stage names in instead of rising.
   Variant C (stages-assembly): a workpiece rides the conveyor and each
   station stamps its artifact on; loops while in view.
   Final state is the default; JS arms .anim, then .in on scroll-into-view.
   No JS / reduced motion = static final state. Hidden ≤1100px. */
.stage-svg-wrap{ margin-top: var(--s5); }
.stage-svg{ width: 100%; height: auto; display: block; }
.stage-svg .rail-base{ stroke: rgba(255,255,255,.16); stroke-width: 1; fill: none; }
.stage-svg .rail-draw{ stroke: #fff; stroke-width: 1.5; fill: none; }
.stage-svg .beam{ fill: var(--amber); opacity: 0; offset-path: path('M 40 240 L 1160 240'); filter: drop-shadow(0 0 6px var(--amber)) drop-shadow(0 0 18px rgba(255,165,23,.5)); }
.stage-svg .st-node{ fill: var(--amber); transform-box: fill-box; transform-origin: center; }
.stage-svg .st-ring{ fill: none; stroke: var(--amber); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.stage-svg .st-label{ transform-box: fill-box; transform-origin: center; }
.stage-svg .st-art-g{ transform-box: fill-box; transform-origin: center; }
.stage-svg .st-no{ font-family: var(--mono); font-size: 12px; letter-spacing: .22em; fill: var(--amber); text-anchor: middle; }
.stage-svg .st-name{ font-family: var(--disp); font-weight: 600; font-size: 30px; letter-spacing: .02em; fill: #fff; text-anchor: middle; }
.stage-svg .st-you{ font-family: var(--mono); font-size: 11px; letter-spacing: .14em; fill: var(--amber); text-anchor: middle; }
.stage-svg .st-art{ font-family: var(--mono); font-size: 11px; letter-spacing: .14em; fill: rgba(255,255,255,.72); text-anchor: middle; }
.stage-svg .st-tag{ font-family: var(--mono); font-size: 13px; letter-spacing: .3em; fill: rgba(255,255,255,.72); text-anchor: middle; }
.stage-svg .st-tag tspan{ fill: var(--amber); }
/* per-station timing: the beam passes station i at .47 + i*.433s */
.stage-svg .s1{ --d: .47s; }
.stage-svg .s2{ --d: .90s; }
.stage-svg .s3{ --d: 1.33s; }
.stage-svg .s4{ --d: 1.77s; }
.stage-svg .s5{ --d: 2.20s; }
.stage-svg .s6{ --d: 2.63s; }
/* armed (hidden) start states — only when JS allows motion */
.stage-svg.anim .rail-draw{ stroke-dasharray: 1; stroke-dashoffset: 1; }
.stage-svg.anim .st-node{ transform: scale(0); }
.stage-svg.anim .st-label{ opacity: 0; transform: translateY(12px); }
.stage-svg.anim .st-art-g{ opacity: 0; transform: scale(1.5); }
.stage-svg.anim .st-tag{ opacity: 0; }
/* drawn states */
.stage-svg.anim.in .rail-draw{ stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.22,.61,.36,1) .1s; }
.stage-svg.anim.in .beam{ animation: beamRun 2.7s cubic-bezier(.22,.61,.36,1) .1s forwards; }
.stage-svg.anim.in .st-node{ transform: scale(1); transition: transform .45s cubic-bezier(.34,1.56,.64,1) var(--d); }
.stage-svg.anim.in .st-ring{ animation: ringPop .7s ease-out var(--d) forwards; }
.stage-svg.anim.in .st-label{ opacity: 1; transform: none; transition: opacity .4s ease var(--d), transform .45s cubic-bezier(.34,1.56,.64,1) var(--d); }
.stage-svg.anim.in .st-art-g{ opacity: 1; transform: none; transition: opacity .3s ease calc(var(--d) + .3s), transform .35s cubic-bezier(.22,.61,.36,1) calc(var(--d) + .3s); }
.stage-svg.anim.in .st-tag{ opacity: 1; transition: opacity .8s ease 3.2s; }
/* variant B: stage names slam in (scale down) instead of rising */
.stage-svg.hybrid .st-name{ transform-box: fill-box; transform-origin: center; }
.stage-svg.hybrid.anim .st-label{ transform: none; }
.stage-svg.hybrid.anim.in .st-label{ transition: opacity .4s ease var(--d); }
.stage-svg.hybrid.anim.in .st-name{ animation: nameSlam .5s cubic-bezier(.22,.61,.36,1) var(--d) both; }
@keyframes nameSlam{ 0%{ transform: scale(2.4); opacity: 0; } 55%{ opacity: 1; } 100%{ transform: scale(1); opacity: 1; } }
@keyframes beamRun{ 0%{ offset-distance: 0%; opacity: 1; } 92%{ opacity: 1; } 100%{ offset-distance: 100%; opacity: 0; } }
@keyframes ringPop{ 0%{ opacity: .9; transform: scale(.2); } 100%{ opacity: 0; transform: scale(1.5); } }
@supports not (offset-path: path('M 0 0')){ .stage-svg .beam{ display: none; } }

/* variant C: the assembly — conveyor stamps the artifacts on, 9s loop */
.asm-svg{ width: 100%; height: auto; display: block; }
.asm-svg .asm-no{ font-family: var(--mono); font-size: 12px; letter-spacing: .22em; fill: var(--amber); text-anchor: middle; }
.asm-svg .asm-name{ font-family: var(--disp); font-weight: 600; font-size: 26px; letter-spacing: .02em; fill: #fff; text-anchor: middle; }
.asm-svg .asm-cap{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; fill: rgba(255,255,255,.72); text-anchor: middle; }
.asm-svg .asm-on{ fill: rgba(255,255,255,.18); }
.asm-svg .asm-lit{ opacity: .45; }
.asm-svg .asm-slam{ transform-box: fill-box; }
.asm-svg .asm-flash{ opacity: 0; }
.asm-svg .asm-mark{ opacity: 0; transform-box: fill-box; transform-origin: center; }
.asm-svg .asm-wp{ fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.85); stroke-width: 1.5; filter: drop-shadow(0 0 10px rgba(255,165,23,.25)); }
.asm-svg .asm-wp-move{ transform: translateX(-80px); }
/* static / no-JS fallback: completed scene at the end of the line */
.asm-svg:not(.anim) .asm-on{ fill: var(--amber); }
.asm-svg:not(.anim) .asm-lit{ opacity: 1; }
.asm-svg:not(.anim) .asm-mark{ opacity: 1; }
.asm-svg:not(.anim) .asm-wp-move{ transform: translateX(1090px); }
/* animated: per-station sequences on a 9s loop */
.asm-svg.anim.in .asm-belt{ animation: asmBelt 1.2s linear infinite; }
.asm-svg.anim.in .asm-wp-move{ animation: asmWp 9s ease-in-out infinite; }
.asm-svg.anim.in .a1 .asm-on{ animation: asmOn1 9s linear infinite; }
.asm-svg.anim.in .a2 .asm-on{ animation: asmOn2 9s linear infinite; }
.asm-svg.anim.in .a3 .asm-on{ animation: asmOn3 9s linear infinite; }
.asm-svg.anim.in .a4 .asm-on{ animation: asmOn4 9s linear infinite; }
.asm-svg.anim.in .a5 .asm-on{ animation: asmOn5 9s linear infinite; }
.asm-svg.anim.in .a6 .asm-on{ animation: asmOn6 9s linear infinite; }
.asm-svg.anim.in .a1 .asm-lit{ animation: asmLit1 9s linear infinite; }
.asm-svg.anim.in .a2 .asm-lit{ animation: asmLit2 9s linear infinite; }
.asm-svg.anim.in .a3 .asm-lit{ animation: asmLit3 9s linear infinite; }
.asm-svg.anim.in .a4 .asm-lit{ animation: asmLit4 9s linear infinite; }
.asm-svg.anim.in .a5 .asm-lit{ animation: asmLit5 9s linear infinite; }
.asm-svg.anim.in .a6 .asm-lit{ animation: asmLit6 9s linear infinite; }
.asm-svg.anim.in .a1 .asm-slam{ animation: asmSlam1 9s cubic-bezier(.5,0,.75,.4) infinite; }
.asm-svg.anim.in .a2 .asm-slam{ animation: asmSlam2 9s cubic-bezier(.5,0,.75,.4) infinite; }
.asm-svg.anim.in .a3 .asm-slam{ animation: asmSlam3 9s cubic-bezier(.5,0,.75,.4) infinite; }
.asm-svg.anim.in .a4 .asm-slam{ animation: asmSlam4 9s cubic-bezier(.5,0,.75,.4) infinite; }
.asm-svg.anim.in .a5 .asm-slam{ animation: asmSlam5 9s cubic-bezier(.5,0,.75,.4) infinite; }
.asm-svg.anim.in .a6 .asm-slam{ animation: asmSlam6 9s cubic-bezier(.5,0,.75,.4) infinite; }
.asm-svg.anim.in .a1 .asm-flash{ animation: asmFlash1 9s linear infinite; }
.asm-svg.anim.in .a2 .asm-flash{ animation: asmFlash2 9s linear infinite; }
.asm-svg.anim.in .a3 .asm-flash{ animation: asmFlash3 9s linear infinite; }
.asm-svg.anim.in .a4 .asm-flash{ animation: asmFlash4 9s linear infinite; }
.asm-svg.anim.in .a5 .asm-flash{ animation: asmFlash5 9s linear infinite; }
.asm-svg.anim.in .a6 .asm-flash{ animation: asmFlash6 9s linear infinite; }
.asm-svg.anim.in .asm-mark.m1{ animation: asmMark1 9s linear infinite; }
.asm-svg.anim.in .asm-mark.m2{ animation: asmMark2 9s linear infinite; }
.asm-svg.anim.in .asm-mark.m3{ animation: asmMark3 9s linear infinite; }
.asm-svg.anim.in .asm-mark.m4{ animation: asmMark4 9s linear infinite; }
.asm-svg.anim.in .asm-mark.m5{ animation: asmMark5 9s linear infinite; }
.asm-svg.anim.in .asm-mark.m6{ animation: asmMark6 9s linear infinite; }
@keyframes asmBelt{ from{ stroke-dashoffset: 0; } to{ stroke-dashoffset: -48px; } }
@keyframes asmWp{
  0%{ transform: translateX(-80px); } 8.9%{ transform: translateX(110px); }
  16.1%{ transform: translateX(110px); } 21.7%{ transform: translateX(306px); }
  28.9%{ transform: translateX(306px); } 34.4%{ transform: translateX(502px); }
  41.7%{ transform: translateX(502px); } 47.2%{ transform: translateX(698px); }
  54.4%{ transform: translateX(698px); } 60%{ transform: translateX(894px); }
  67.2%{ transform: translateX(894px); } 72.8%{ transform: translateX(1090px); }
  72.8%{ transform: translateX(1090px); } 82%{ transform: translateX(1090px); }
  89%{ transform: translateX(1340px); } 100%{ transform: translateX(1340px); }
}
@keyframes asmOn1{ 0%, 11.7%{ fill: rgba(255,255,255,.18); } 13.2%, 90%{ fill: #FFA517; } 92.5%, 100%{ fill: rgba(255,255,255,.18); } }
@keyframes asmLit1{ 0%, 11.7%{ opacity: .45; } 13.2%, 90%{ opacity: 1; } 92.5%, 100%{ opacity: .45; } }
@keyframes asmSlam1{ 0%, 11.7%{ transform: translateY(0); } 13.2%, 15.2%{ transform: translateY(22px); } 17.7%, 100%{ transform: translateY(0); } }
@keyframes asmFlash1{ 0%, 11.7%{ opacity: 0; } 12.7%{ opacity: .3; } 15.7%, 100%{ opacity: 0; } }
@keyframes asmMark1{ 0%, 11.7%{ opacity: 0; transform: scale(.3); } 12.7%{ opacity: 1; transform: scale(1.25); } 14%, 90%{ opacity: 1; transform: scale(1); } 92.5%, 100%{ opacity: 0; transform: scale(1); } }
@keyframes asmOn2{ 0%, 24.4%{ fill: rgba(255,255,255,.18); } 25.9%, 90%{ fill: #FFA517; } 92.5%, 100%{ fill: rgba(255,255,255,.18); } }
@keyframes asmLit2{ 0%, 24.4%{ opacity: .45; } 25.9%, 90%{ opacity: 1; } 92.5%, 100%{ opacity: .45; } }
@keyframes asmSlam2{ 0%, 24.4%{ transform: translateY(0); } 25.9%, 27.9%{ transform: translateY(22px); } 30.4%, 100%{ transform: translateY(0); } }
@keyframes asmFlash2{ 0%, 24.4%{ opacity: 0; } 25.4%{ opacity: .3; } 28.4%, 100%{ opacity: 0; } }
@keyframes asmMark2{ 0%, 24.4%{ opacity: 0; transform: scale(.3); } 25.4%{ opacity: 1; transform: scale(1.25); } 26.7%, 90%{ opacity: 1; transform: scale(1); } 92.5%, 100%{ opacity: 0; transform: scale(1); } }
@keyframes asmOn3{ 0%, 37.2%{ fill: rgba(255,255,255,.18); } 38.7%, 90%{ fill: #FFA517; } 92.5%, 100%{ fill: rgba(255,255,255,.18); } }
@keyframes asmLit3{ 0%, 37.2%{ opacity: .45; } 38.7%, 90%{ opacity: 1; } 92.5%, 100%{ opacity: .45; } }
@keyframes asmSlam3{ 0%, 37.2%{ transform: translateY(0); } 38.7%, 40.7%{ transform: translateY(22px); } 43.2%, 100%{ transform: translateY(0); } }
@keyframes asmFlash3{ 0%, 37.2%{ opacity: 0; } 38.2%{ opacity: .3; } 41.2%, 100%{ opacity: 0; } }
@keyframes asmMark3{ 0%, 37.2%{ opacity: 0; transform: scale(.3); } 38.2%{ opacity: 1; transform: scale(1.25); } 39.5%, 90%{ opacity: 1; transform: scale(1); } 92.5%, 100%{ opacity: 0; transform: scale(1); } }
@keyframes asmOn4{ 0%, 50%{ fill: rgba(255,255,255,.18); } 51.5%, 90%{ fill: #FFA517; } 92.5%, 100%{ fill: rgba(255,255,255,.18); } }
@keyframes asmLit4{ 0%, 50%{ opacity: .45; } 51.5%, 90%{ opacity: 1; } 92.5%, 100%{ opacity: .45; } }
@keyframes asmSlam4{ 0%, 50%{ transform: translateY(0); } 51.5%, 53.5%{ transform: translateY(22px); } 56%, 100%{ transform: translateY(0); } }
@keyframes asmFlash4{ 0%, 50%{ opacity: 0; } 51%{ opacity: .3; } 54%, 100%{ opacity: 0; } }
@keyframes asmMark4{ 0%, 50%{ opacity: 0; transform: scale(.3); } 51%{ opacity: 1; transform: scale(1.25); } 52.3%, 90%{ opacity: 1; transform: scale(1); } 92.5%, 100%{ opacity: 0; transform: scale(1); } }
@keyframes asmOn5{ 0%, 62.8%{ fill: rgba(255,255,255,.18); } 64.3%, 90%{ fill: #FFA517; } 92.5%, 100%{ fill: rgba(255,255,255,.18); } }
@keyframes asmLit5{ 0%, 62.8%{ opacity: .45; } 64.3%, 90%{ opacity: 1; } 92.5%, 100%{ opacity: .45; } }
@keyframes asmSlam5{ 0%, 62.8%{ transform: translateY(0); } 64.3%, 66.3%{ transform: translateY(22px); } 68.8%, 100%{ transform: translateY(0); } }
@keyframes asmFlash5{ 0%, 62.8%{ opacity: 0; } 63.8%{ opacity: .3; } 66.8%, 100%{ opacity: 0; } }
@keyframes asmMark5{ 0%, 62.8%{ opacity: 0; transform: scale(.3); } 63.8%{ opacity: 1; transform: scale(1.25); } 65.1%, 90%{ opacity: 1; transform: scale(1); } 92.5%, 100%{ opacity: 0; transform: scale(1); } }
@keyframes asmOn6{ 0%, 75.6%{ fill: rgba(255,255,255,.18); } 77.1%, 90%{ fill: #FFA517; } 92.5%, 100%{ fill: rgba(255,255,255,.18); } }
@keyframes asmLit6{ 0%, 75.6%{ opacity: .45; } 77.1%, 90%{ opacity: 1; } 92.5%, 100%{ opacity: .45; } }
@keyframes asmSlam6{ 0%, 75.6%{ transform: translateY(0); } 77.1%, 79.1%{ transform: translateY(22px); } 81.6%, 100%{ transform: translateY(0); } }
@keyframes asmFlash6{ 0%, 75.6%{ opacity: 0; } 76.6%{ opacity: .3; } 79.6%, 100%{ opacity: 0; } }

/* dramatic finish: after station 6 stamps, the product washes amber, a halo
   radiates from the sign-off badge, and the whole window glows as it exits */
.asm-svg .asm-fin{ opacity: 0; }
.asm-svg .asm-halo{ opacity: 0; transform-box: fill-box; transform-origin: center; }
.asm-svg.anim.in .asm-fin{ animation: asmFin 9s linear infinite; }
.asm-svg.anim.in .asm-halo{ animation: asmHalo 9s ease-out infinite; }
.asm-svg.anim.in .asm-wp{ animation: asmWpGlow 9s linear infinite; }
.asm-svg .asm-dim{ opacity: 0; }
.asm-svg .asm-halo2{ opacity: 0; transform-box: fill-box; transform-origin: center; }
.asm-svg .asm-streak{ opacity: 0; }
.asm-svg .asm-wp-core{ transform-box: fill-box; transform-origin: center; }
.asm-svg.anim.in .asm-dim{ animation: asmDim 9s linear infinite; }
.asm-svg.anim.in .asm-halo2{ animation: asmHalo2 9s ease-out infinite; }
.asm-svg.anim.in .asm-wp-core{ animation: asmCore 9s ease-in-out infinite; }
.asm-svg.anim.in .asm-streak{ animation: asmStreak 9s linear infinite; }
.asm-svg.asmv.anim.in .asm-streak{ animation-name: asmStreakV; }
@keyframes asmDim{ 0%, 78%{ opacity: 0; } 82%, 90%{ opacity: .5; } 94%, 100%{ opacity: 0; } }
@keyframes asmFin{ 0%, 79%{ opacity: 0; } 82%, 90%{ opacity: .32; } 94%, 100%{ opacity: 0; } }
@keyframes asmHalo{ 0%, 79%{ opacity: 0; transform: scale(.3); } 83%{ opacity: 1; } 95%, 100%{ opacity: 0; transform: scale(2.8); } }
@keyframes asmHalo2{ 0%, 81%{ opacity: 0; transform: scale(.3); } 85%{ opacity: .8; } 97%, 100%{ opacity: 0; transform: scale(3.4); } }
@keyframes asmCore{ 0%, 80%{ transform: scale(1); } 84%{ transform: scale(1.18); } 88%{ transform: scale(1.1); } 92%, 100%{ transform: scale(1); } }
@keyframes asmStreak{ 0%, 83%{ opacity: 0; transform: translateX(0); } 84.5%{ opacity: .9; } 89%, 100%{ opacity: 0; transform: translateX(140px); } }
@keyframes asmStreakV{ 0%, 83%{ opacity: 0; transform: translateY(0); } 84.5%{ opacity: .9; } 89%, 100%{ opacity: 0; transform: translateY(140px); } }
@keyframes asmWpGlow{ 0%, 78%{ filter: drop-shadow(0 0 10px rgba(255,165,23,.25)); } 83%, 91%{ filter: drop-shadow(0 0 32px rgba(255,165,23,.95)); } 96%, 100%{ filter: drop-shadow(0 0 10px rgba(255,165,23,.25)); } }
@keyframes asmMark6{ 0%, 75.6%{ opacity: 0; transform: scale(.3); } 76.6%{ opacity: 1; transform: scale(1.25); } 77.9%, 90%{ opacity: 1; transform: scale(1); } 92.5%, 100%{ opacity: 0; transform: scale(1); } }

/* vertical assembly (phones, ≤1100px): conveyor runs top→bottom, stamps press
   sideways. Timing percentages are shared with the desktop loop; only the
   geometry keyframes differ. */
.asmv-wrap{ display: none; }
.asm-svg.asmv .asm-no, .asm-svg.asmv .asm-name, .asm-svg.asmv .asm-cap{ text-anchor: start; }
.asm-svg.asmv .asm-wp-move{ transform: translateY(-160px); }
.asm-svg.asmv:not(.anim) .asm-wp-move{ transform: translateY(880px); }
.asm-svg.asmv.anim.in .asm-wp-move{ animation: asmWpV 9s ease-in-out infinite; }
@keyframes asmWpV{
  0%{ transform: translateY(-160px); } 8.9%{ transform: translateY(130px); }
  16.1%{ transform: translateY(130px); } 21.7%{ transform: translateY(280px); }
  28.9%{ transform: translateY(280px); } 34.4%{ transform: translateY(430px); }
  41.7%{ transform: translateY(430px); } 47.2%{ transform: translateY(580px); }
  54.4%{ transform: translateY(580px); } 60%{ transform: translateY(730px); }
  67.2%{ transform: translateY(730px); } 72.8%{ transform: translateY(880px); }
  82%{ transform: translateY(880px); }
  89%{ transform: translateY(1140px); } 100%{ transform: translateY(1140px); }
}
.asm-svg.asmv.anim.in .a1 .asm-slam{ animation: asmSlamV1 9s cubic-bezier(.5,0,.75,.4) infinite; }
.asm-svg.asmv.anim.in .a2 .asm-slam{ animation: asmSlamV2 9s cubic-bezier(.5,0,.75,.4) infinite; }
.asm-svg.asmv.anim.in .a3 .asm-slam{ animation: asmSlamV3 9s cubic-bezier(.5,0,.75,.4) infinite; }
.asm-svg.asmv.anim.in .a4 .asm-slam{ animation: asmSlamV4 9s cubic-bezier(.5,0,.75,.4) infinite; }
.asm-svg.asmv.anim.in .a5 .asm-slam{ animation: asmSlamV5 9s cubic-bezier(.5,0,.75,.4) infinite; }
.asm-svg.asmv.anim.in .a6 .asm-slam{ animation: asmSlamV6 9s cubic-bezier(.5,0,.75,.4) infinite; }
@keyframes asmSlamV1{ 0%, 11.7%{ transform: translateX(0); } 13.2%, 15.2%{ transform: translateX(-16px); } 17.7%, 100%{ transform: translateX(0); } }
@keyframes asmSlamV2{ 0%, 24.4%{ transform: translateX(0); } 25.9%, 27.9%{ transform: translateX(-16px); } 30.4%, 100%{ transform: translateX(0); } }
@keyframes asmSlamV3{ 0%, 37.2%{ transform: translateX(0); } 38.7%, 40.7%{ transform: translateX(-16px); } 43.2%, 100%{ transform: translateX(0); } }
@keyframes asmSlamV4{ 0%, 50%{ transform: translateX(0); } 51.5%, 53.5%{ transform: translateX(-16px); } 56%, 100%{ transform: translateX(0); } }
@keyframes asmSlamV5{ 0%, 62.8%{ transform: translateX(0); } 64.3%, 66.3%{ transform: translateX(-16px); } 68.8%, 100%{ transform: translateX(0); } }
@keyframes asmSlamV6{ 0%, 75.6%{ transform: translateX(0); } 77.1%, 79.1%{ transform: translateX(-16px); } 81.6%, 100%{ transform: translateX(0); } }

/* partner / certification strips (about) — typographic until logo assets arrive */
.partner-strip{ font-family: var(--mono); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-top: var(--s4); }
.partner-strip b{ color: var(--amber-hi); font-weight: 600; }

/* ---------- process trace teaser (landing navy band) -----------
   Final state is the default; JS adds .armed to set the hidden
   start, then .in-view to draw. No JS / reduced motion = static. */
.bg-blue .card-link{ color: var(--white); }
.bg-blue .card-link:hover{ color: var(--amber-hi); }

/* ---------- architecture review offer band ---------------------- */
.offer-band{ padding: 0 0 var(--s7); }
.offer-inner{ position: relative; border: 1px solid var(--line-w); background: var(--white); padding: var(--s5); display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.offer-inner::before,
.offer-inner::after{ content: "+"; position: absolute; top: -8px; font-family: var(--mono); font-size: .8rem; color: var(--line-w); background: var(--white); padding: 0 2px; }
.offer-inner::before{ left: 10px; }
.offer-inner::after{ right: 10px; }
.offer-line{ font-family: var(--disp); font-size: 1.55rem; font-weight: 600; letter-spacing: .01em; max-width: 34ch; }
.offer-sub{ margin-top: var(--s2); font-size: .95rem; color: var(--ink-soft); max-width: 52ch; }
.offer-band .eyebrow{ margin-bottom: var(--s2); }

/* ---------- 07 / contact --------------------------------------- */
.contact-grid{ display: grid; grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: start; }
.contact-info h2{ margin-bottom: var(--s3); }
.contact-info .lead{ margin-bottom: var(--s5); }
.spec{ border-top: 1px solid var(--line-b); }
.spec-row{ display: grid; grid-template-columns: 12ch 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line-b); }
.spec-row dt{ font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); padding-top: 3px; }
.spec-row dd{ font-size: .92rem; color: var(--white); line-height: 1.55; }
.spec-row dd .mono-sm{ font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; }
.spec-row a{ color: var(--white); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; transition: color 100ms linear; }
.spec-row a:hover{ color: var(--amber); }
.next{ border-top: 1px solid var(--line-b); }
.contact-info .next{ margin-top: var(--s5); }
.next-title{ font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); padding-top: var(--s3); margin-bottom: var(--s2); }
.next ol{ list-style: none; }
.next li{ display: grid; grid-template-columns: 4ch 1fr; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line-b); font-size: .88rem; color: var(--navy-soft); line-height: 1.55; }
.next li b{ font-family: var(--mono); font-weight: 500; font-size: .78rem; letter-spacing: .1em; color: var(--white); padding-top: 2px; }
.form{ border: 1px solid var(--line-b); padding: var(--s5); background: rgba(255,255,255,.03); position: relative; }
.form::before,
.form::after{ content: "+"; position: absolute; top: -8px; font-family: var(--mono); font-size: .8rem; color: rgba(255,255,255,.45); background: var(--navy); padding: 0 2px; }
.form::before{ left: 10px; }
.form::after{ right: 10px; }
.form-title{ font-family: var(--mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: var(--s4); }
.form-title b{ color: var(--amber); font-weight: 500; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field{ margin-bottom: var(--s3); }
.field label{ display: block; font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: var(--s2); }
.field label i{ font-style: normal; color: var(--amber); }
.field input,
.field select,
.field textarea{ width: 100%; font-family: var(--sans); font-size: .95rem; color: var(--white); background-color: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.35); border-radius: 0; padding: 12px 14px; transition: border-color 100ms linear, background-color 100ms linear; }
.field select{ appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='6'%3E%3Cpath%20d='M1%201l4%204%204-4'%20stroke='%23FFFFFF'%20fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.field select option{ color: var(--ink); background: var(--white); }
.field input::placeholder,
.field textarea::placeholder{ color: rgba(255,255,255,.4); }
.field input:hover,
.field select:hover,
.field textarea:hover{ border-color: rgba(255,255,255,.6); }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline: none; border-color: var(--amber); background-color: rgba(255,255,255,.07); }
.field textarea{ min-height: 110px; resize: vertical; }
.form .btn{ width: 100%; margin-top: var(--s2); }
.form-note{ margin-top: var(--s3); font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); text-align: center; line-height: 1.7; }

/* ---------- footer --------------------------------------------- */
.footer{ background: var(--ink); color: var(--white); border-top: 1px solid rgba(255,255,255,.12); padding: var(--s6) 0 var(--s4); }
.footer-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; padding-bottom: var(--s5); border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: var(--s4); }
.footer-cols{ display: flex; gap: var(--s5) var(--s7); flex-wrap: wrap; }
.footer-col-title{ font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: var(--s3); }
.footer-col .footer-nav{ flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-nav{ display: flex; gap: var(--s4); list-style: none; flex-wrap: wrap; }
.footer-nav a{ font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.65); text-decoration: none; transition: color 100ms linear; }
.footer-nav a:hover{ color: var(--amber); }
.footer-mid{ display: flex; justify-content: space-between; gap: var(--s3) var(--s5); flex-wrap: wrap; padding-bottom: var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid rgba(255,255,255,.12); font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); line-height: 1.8; }
.footer-mid .tagline{ color: rgba(255,255,255,.7); }
.footer-mid .tagline b{ color: var(--amber); font-weight: 500; }
.footer-bottom{ display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.footer-bottom a{ color: inherit; text-decoration: none; transition: color 100ms linear; }
.footer-bottom a:hover{ color: var(--amber); }
.footer-bottom .sep{ color: var(--amber); }

/* ---------- page head (detail pages) ---------------------------- */
.page-head{ padding: var(--s7) 0 var(--s6); }
.page-head h1{ font-size: clamp(2.4rem, 4.8vw, 3.8rem); text-transform: uppercase; letter-spacing: .015em; max-width: 24ch; margin-bottom: var(--s4); }
.page-head .lead{ font-size: 1.125rem; }

/* intro prose — long-form paragraphs under a page head */
.intro{ max-width: 68ch; }
.intro p{ color: var(--ink-soft); }
.intro p + p{ margin-top: var(--s3); }
.intro b{ color: var(--ink); font-weight: 600; }

/* ---------- scope list (white) ---------------------------------- */
.scope{ list-style: none; border-top: 1px solid var(--line-w); max-width: 860px; }
.scope li{ position: relative; padding: var(--s3) 0 var(--s3) var(--s4); border-bottom: 1px solid var(--line-w); font-size: .95rem; color: var(--ink-soft); line-height: 1.55; }
.scope li::before{ content: ""; position: absolute; left: 0; top: calc(var(--s3) + .55em); width: 6px; height: 6px; background: var(--amber); }
.scope li b{ color: var(--ink); font-weight: 600; }
.scope-num{ list-style: none; counter-reset: scope; }
.scope-num li{ counter-increment: scope; }
.scope-num li::before{ content: none; }
.scope-num li::after{ content: "N.0" counter(scope); position: absolute; left: 0; top: calc(var(--s3) + 2px); font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; color: var(--ink); }

/* ---------- commitments block ("what you can hold us to") -------- */
.commit{ position: relative; border: 1px solid var(--line-w); background: var(--white); padding: var(--s5); max-width: 860px; }
.commit::before,
.commit::after{ content: "+"; position: absolute; top: -8px; font-family: var(--mono); font-size: .8rem; color: var(--line-w); background: var(--white); padding: 0 2px; }
.commit::before{ left: 10px; }
.commit::after{ right: 10px; }
.commit p{ color: var(--ink-soft); font-size: 1rem; max-width: 68ch; }
.commit p + p{ margin-top: var(--s3); }

/* ---------- offers ---------------------------------------------- */

/* CTA band variants */
.offer-ctas{ display: flex; flex-direction: column; align-items: flex-end; gap: var(--s3); }
.offer-micro{ font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #6B7885; }

/* ---------- insights -------------------------------------------- */
.strip-foot{ margin-top: var(--s5); }

.post-list{ list-style: none; border-top: 1px solid var(--line-w); }
.post{ display: grid; grid-template-columns: 14ch 1fr; gap: var(--s3) var(--s5); padding: var(--s5) 0; border-bottom: 1px solid var(--line-w); }
.post-date{ font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; color: var(--ink-soft); padding-top: 6px; }
.post h2{ font-size: 1.6rem; margin-bottom: var(--s2); }
.post h2 a{ text-decoration: none; transition: color 100ms linear; }
.post h2 a:hover{ color: var(--amber-hi); }
.post p{ color: var(--ink-soft); font-size: .95rem; max-width: 64ch; margin-bottom: var(--s3); }

.article-wrap{ max-width: 46rem; margin: 0 auto; }
.article-meta{ font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.article-cover{ margin-top: var(--s5); border: 1px solid var(--line-w); }
.article-cover img{ width: 100%; aspect-ratio: 16 / 8; object-fit: cover; filter: saturate(.92) contrast(1.04); }
.article-body{ margin-top: var(--s5); }
.article-body h2{ font-size: 1.5rem; margin: var(--s5) 0 var(--s3); }
.article-body p{ color: var(--ink-soft); margin-bottom: var(--s3); }
.article-body ul,
.article-body ol{ margin: 0 0 var(--s3) var(--s4); color: var(--ink-soft); }
.article-body li{ margin-bottom: var(--s2); }
.article-body li::marker{ color: var(--amber); }
.article-cta{ margin-top: var(--s6); }

/* narrow column on navy sheets (office spec, next block) */
.office-col{ max-width: 620px; }

/* office section: spec table left, map plate right */
.office-grid{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5); align-items: start; }
.map-plate{ margin: 0; }
.map-plate iframe{ display: block; width: 100%; aspect-ratio: 16 / 11; border: 0; background: var(--navy); }

/* response promise line under the form column (contact page) */
.promise{ margin-top: var(--s3); font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); line-height: 1.7; }

/* ---------- responsive ------------------------------------------ */
@media (max-width: 1024px){
  .sheet-cue{ left: 38%; }
  .ind-grid{ grid-template-columns: repeat(2, 1fr); }
  .client-row{ grid-template-columns: repeat(3, 1fr); }
  /* stages diagram: horizontal plate → vertical assembly line */
  .stage-svg-wrap{ display: none; }
  .asmv-wrap{ display: block; margin-top: var(--s5); max-width: 340px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 860px){
  .sec-head{ grid-template-columns: 1fr; }
  .svc-grid{ grid-template-columns: 1fr; }
  .values{ grid-template-columns: 1fr; gap: var(--s5); }
  .duo{ grid-template-columns: 1fr; }
  .proof-row{ grid-template-columns: repeat(2, 1fr); }
  .proof-cell, .proof-cell:nth-child(4), .proof-cell:nth-child(5){ grid-column: auto; }
  .steps{ grid-template-columns: repeat(2, 1fr); }
  .contact-grid{ grid-template-columns: 1fr; gap: var(--s5); }
  .office-grid{ grid-template-columns: 1fr; }
  .offer-row{ grid-template-columns: 1fr; gap: var(--s2); }
  .offer-row-head{ display: none; }
  .offer-row .btn{ width: fit-content; }
  .offer-ctas{ align-items: flex-start; }
}
@media (max-width: 1100px){
  /* nav collapses to hamburger — full menu + CTA no longer fits */
  .nav-toggle{ display: inline-flex; }
  .nav-menu{ position: absolute; top: 100%; left: 0; right: 0; display: none; background: var(--navy); border-bottom: 1px solid var(--line-b); }
  .nav-menu.open{ display: block; }
  .nav-links{ flex-direction: column; align-items: stretch; gap: 0; padding: 0 var(--s4); }
  .nav-links li{ border-bottom: 1px solid var(--line-b); }
  .nav-links li:last-child{ border-bottom: 0; }
  .nav-links a{ display: block; padding: 15px 0; }
  .wordmark .file{ display: none; }
  .nav-cta{ margin-left: auto; }
  .nav .btn{ font-size: .74rem; letter-spacing: .12em; padding: 10px 12px; }
  /* solutions submenu: always expanded, indented under the label */
  .nav-sub{ position: static; display: block; border: 0; border-top: 1px solid var(--line-b); }
  .nav-sub a{ padding: 12px 0 12px var(--s4); font-size: .72rem; color: rgba(255,255,255,.55); }
  .nav-sub-label{ display: block; padding: 15px 0; }
}

@media (max-width: 720px){
  .section{ padding: var(--s6) 0; }
  .page-head{ padding: var(--s6) 0 var(--s5); }
  .post{ grid-template-columns: 1fr; }

  /* hero — scrim turns vertical on small screens for readability */
  .hero-grid{ min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); padding-top: var(--s3); padding-bottom: 122px; gap: var(--s4); }
  .hero-media::after{ content: ""; position: absolute; inset: 0; background: rgba(28,38,50,.35); }
  .hero .eyebrow{ font-size: .75rem; letter-spacing: .12em; }
  .hero h1{ font-size: clamp(2.6rem, 11.5vw, 3.4rem); margin-bottom: var(--s3); }
  .br-mob{ display: block; }
  .hero-sub{ font-size: .95rem; line-height: 1.6; }
  .hero-pillars{ letter-spacing: .18em; margin-bottom: var(--s3); }
  .hero-cta{ margin-bottom: var(--s3); }
  .hero-cta .btn{ padding: 13px 20px; }
  .hero-proof{ gap: var(--s2) var(--s3); }

  /* FIG. 04 stays a horizontal chain — compact nodes, 2-line labels */
  .sys{ margin-top: var(--s3); }
  .sys-cap{ font-size: .7rem; letter-spacing: .1em; margin-bottom: 10px; }
  .sys-flow{ justify-content: center; }
  .sys-node{ min-width: 0; width: 72px; height: 48px; padding: 4px 6px; display: flex; flex-direction: column; justify-content: center; }
  .sys-node .nk{ font-size: .48rem; margin-bottom: 3px; }
  .sys-node .nl{ font-size: .5rem; letter-spacing: .04em; line-height: 1.35; }
  .sys-lead{ width: 14px; }
  .sys-lead .arr{ border-top-width: 3px; border-bottom-width: 3px; border-left-width: 5px; }
  .sys-end{ margin-left: 8px; }
  .sys-end .sq{ width: 6px; height: 6px; }

  .sheet-cue{ left: 50%; bottom: 78px; }

  .field-row{ grid-template-columns: 1fr; }
  .client-row{ grid-template-columns: repeat(2, 1fr); }
  .steps{ grid-template-columns: 1fr; row-gap: var(--s5); }
  .step{ padding-top: var(--s3); }
  .ind-grid{ grid-template-columns: 1fr; }
  .offer-inner{ padding: var(--s5) var(--s4); }
}

/* ---------- motion discipline ------------------------------------ */
/* reduced-motion: everything frozen in its FINAL state —
   all content visible, no counting, no parallax */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
  .rv{ opacity: 1 !important; }
  .h-line{ clip-path: none !important; animation: none !important; }
  .sys-node{ background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100% !important; }
  .sys-node .nk, .sys-node .nl{ opacity: 1 !important; }
  .sys-lead .ll{ transform: none !important; }
  .sys-lead .arr{ opacity: 1 !important; }
}