/* ============================================================
   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.30)'/%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 crosshair marks on every sheet (section) */
.sheet{ position: relative; }
.sheet::before,
.sheet::after{ content: "+"; position: absolute; top: 10px; font-family: var(--mono); font-size: .85rem; line-height: 1; pointer-events: none; }
.sheet::before{ left: 10px; }
.sheet::after { right: 10px; }
.sheet > .wrap::before,
.sheet > .wrap::after{ content: "+"; position: absolute; bottom: 10px; font-family: var(--mono); font-size: .85rem; line-height: 1; pointer-events: none; }
.sheet > .wrap::before{ left: 10px; }
.sheet > .wrap::after { right: 10px; }
.sheet-blue::before,
.sheet-blue::after,
.sheet-blue > .wrap::before,
.sheet-blue > .wrap::after{ color: rgba(255,255,255,.45); }
.sheet-white::before,
.sheet-white::after,
.sheet-white > .wrap::before,
.sheet-white > .wrap::after{ color: var(--line-w); }

/* ---------- backgrounds ------------------------------------ */
.bg-blue{ background-color: var(--navy); color: var(--white); background-image: var(--cross-b), radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 1.6px); background-size: 112px 112px, 28px 28px; }
.bg-grid-white{ background-color: var(--white); background-image: radial-gradient(circle, rgba(36,48,64,.10) 1px, transparent 1.6px); background-size: 28px 28px; }

/* ---------- typography -------------------------------------- */
.mono{ font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.eyebrow{ font-family: var(--mono); font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; 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{ width: 1px; height: 9px; background: currentColor; flex: none; }
.dim .line{ height: 1px; flex: 1; background: currentColor; }
.dim .ref{ font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; min-width: 0; }
.dim .ref b{ color: var(--amber); font-weight: 500; }

/* ---------- section header ----------------------------------- */
.sec-head{ display: grid; grid-template-columns: auto 1fr auto; 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); }
.sec-index{ font-family: var(--mono); font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; line-height: 1; color: var(--line-w); padding-bottom: 2px; }
.bg-blue .sec-index{ color: rgba(255,255,255,.35); }
.sec-index b{ color: var(--amber); font-weight: 500; }
.sec-note{ font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); text-align: right; max-width: 24ch; }
.bg-blue .sec-note{ color: var(--navy-soft); }

/* ---------- 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: .7rem; 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: .72rem; 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: .62rem; 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: .72rem; 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); }
.nav .btn{ padding: 11px 18px; }

/* ---------- 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: .64rem; 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 / THE LIVING DRAWING ------------------------- */
/* the first viewport IS the sheet: pre-printed frame; the plotter
   draws the headline and the FIG. 04 system diagram; FIG. 01 is a
   photorealistic plate.
   two-speed parallax: crosshair tile drifts faster than the grid */
.hero{ position: relative; overflow: hidden; border-bottom: 1px solid var(--line-b); background-position: 0 var(--py2, 0px), 0 var(--py1, 0px), 0 var(--py1, 0px); }
.hero .wrap{ position: relative; }
.hero > .wrap::before,
.hero > .wrap::after{ display: none; } /* bottom '+' marks clash with the sheet furniture */
.sheet-frame{ position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.22); pointer-events: none; }
.hero-grid{ min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: center; padding-top: var(--s5); padding-bottom: 170px; }
.hero-main{ position: relative; z-index: 2; }
.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 .dot{ color: var(--amber); }
.br-mob{ display: none; }
.hero-sub{ font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.65; color: var(--navy-soft); max-width: 52ch; margin-bottom: var(--s3); }
.hero-sub b{ color: var(--white); font-weight: 500; }
.hero-pillars{ 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-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: .68rem; 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: .7rem; 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: .72rem; 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: .68rem; 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; } }
@keyframes tick{ to{ transform: translateX(-50%); } }

/* ---------- spec ticker strip (drawing-office) ---------------- */
.ticker{ overflow: hidden; background: var(--white); border-bottom: 1px solid var(--line-w); padding: 11px 0; }
.ticker-track{ display: flex; width: max-content; animation: tick 30s linear infinite; }
.ticker-group{ display: flex; flex: none; align-items: center; }
.ticker-group span{ display: inline-flex; align-items: center; gap: var(--s4); padding: 0 var(--s4); font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.ticker-group .sq{ width: 6px; height: 6px; background: var(--amber); flex: none; }

/* ---------- 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: .72rem; 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(4, 1fr); border-top: 1px solid var(--line-w); border-left: 1px solid var(--line-w); margin-bottom: var(--s4); }
.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: .85rem; 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: .72rem; 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; }
.proof-note{ margin-top: var(--s3); font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- 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: .68rem; 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: .64rem; letter-spacing: .12em; color: #6B7885; }
.svc h3{ font-size: 1.5rem; }
.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); height: 128px; object-fit: cover; margin: calc(var(--s4) * -1) calc(var(--s4) * -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); }
.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: .68rem; 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: .64rem; 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: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.process-foot .tag b{ color: var(--amber); font-weight: 500; }

/* ---------- 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); }
.contact-photo{ margin-bottom: var(--s5); }
.contact-photo img{ aspect-ratio: 16 / 9; }
.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: .68rem; 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{ margin-top: var(--s5); border-top: 1px solid var(--line-b); }
.next-title{ font-family: var(--mono); font-size: .68rem; 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: .72rem; 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: .7rem; 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: .66rem; 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: .66rem; 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); background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1.6px); background-size: 28px 28px; border-top: 1px solid rgba(255,255,255,.12); padding: var(--s6) 0 var(--s4); }
.footer-top{ display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-bottom: var(--s5); border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: var(--s4); }
.footer-nav{ display: flex; gap: var(--s4); list-style: none; flex-wrap: wrap; }
.footer-nav a{ font-family: var(--mono); font-size: .68rem; 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: .64rem; 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: .64rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.footer-bottom .sep{ color: var(--amber); }

/* ---------- responsive ------------------------------------------ */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr; gap: var(--s5); align-content: center; }
  .hero .plate{ max-width: 520px; }
  .hero .plate img{ aspect-ratio: 16 / 9; }
  .sheet-cue{ left: 38%; }
  .ind-grid{ grid-template-columns: repeat(2, 1fr); }
  .client-row{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px){
  .sec-head{ grid-template-columns: auto 1fr; }
  .sec-note{ display: none; }
  .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); }
  .steps{ grid-template-columns: repeat(2, 1fr); }
  .contact-grid{ grid-template-columns: 1fr; gap: var(--s5); }
}
@media (max-width: 720px){
  .section{ padding: var(--s6) 0; }
  .nav-links{ display: none; }
  .wordmark .file{ display: none; }

  /* hero — the sheet, simplified: frame + scroll cue stay */
  .hero-grid{ min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); padding-top: var(--s3); padding-bottom: 122px; gap: var(--s4); }
  .hero .eyebrow{ font-size: .66rem; 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: .6rem; 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; }

  .nav .btn{ font-size: .64rem; letter-spacing: .12em; padding: 10px 12px; }

  .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 ticker, 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; }
  .ticker-track{ animation: none !important; }
}