/* ============================================================
   BOLT ENGINEERING — Steel & Sage design system
   ============================================================ */
/* ============================================================
   BOLT ENGINEERING — Monochrome design system
   Matched to Bolt Engineering Services Homepage.png
   off-white base + near-black bands, zero chroma accents
   ============================================================ */
:root {
  --paper:      #F5F5F3;   /* off-white base */
  --ink:        #111111;   /* primary black: text, buttons, logo */
  --band:       #0D0D0D;   /* dark band background */
  --band-deep:  #0A0A0A;   /* CTA band background */
  --white:      #FFFFFF;
  --gray-body:  #6E6E6E;   /* body text on light */
  --gray-on-dark: #A3A3A3;/* body copy on dark */
  --gray-ghost: #E2E2E0;   /* borders, ghost numerals */
  --gray-line-d: rgba(255,255,255,.14);  /* rules on dark */
  --gray-line-l: rgba(17,17,17,.14);     /* rules on light */
  --accent:     #111111;   /* accent role = black (monochrome) */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", monospace;
  --ease: cubic-bezier(.22,.9,.28,1);
  /* --- legacy token aliases (monochrome remap) --- */
  --steel-900:  #0D0D0D;
  --steel-800:  #131313;
  --steel-700:  #1A1A1A;
  --steel-600:  #3D3D3D;
  --steel-500:  #8C8C8C;
  --steel-400:  #8A8A8A;
  --steel-300:  #A3A3A3;
  --steel-200:  #D9D9D9;
  --sage-600:   #111111;   /* kicker / accent on light */
  --sage-500:   #111111;
  --sage-400:   #111111;
  --sage-300:   #B5B5B5;   /* soft accent on dark */
  --sage-200:   #DEDEDE;   /* ghost numerals */
  --copper:     #8C8C8C;
  --mist:       #111111;   /* primary text color (now on light) */
  --line:       rgba(17,17,17,.14);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--ink); color: var(--paper); }
img { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); }
.wrap { width:min(1280px, 92vw); margin: 0 auto; }

/* ---------- scroll reveal ---------- */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s } .reveal.d2 { transition-delay:.16s }
.reveal.d3 { transition-delay:.24s } .reveal.d4 { transition-delay:.32s }

/* ---------- section scaffolding ---------- */
section { position: relative; padding: 110px 0; }
.kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink);
  display:flex; align-items:center; gap:14px; margin-bottom: 26px;
}
.kicker::before { content:""; width:34px; height:1px; background: var(--ink); }
h2.title {
  font-family: var(--font-display); font-weight:700; color: var(--ink);
  font-size: clamp(40px, 5.4vw, 76px); line-height:1.02; letter-spacing:-.02em;
}
h2.title em { font-style: normal; color: var(--ink); }
.lit-on-dark, .hw .kicker, .hw .kicker::before { color: var(--white); }
/* dark-band titles must be white-on-black, ghosts become light outlines */
.hw h2.title, .tiers h2.title, .cta-band h2.title { color: var(--white); }
.hw h2.title em, .tiers h2.title em, .cta-band h2.title em {
  color: transparent; -webkit-text-stroke: 1.4px #B5B5B5;
}
.hw h2.title { white-space: nowrap; }
.lead { color: var(--gray-body); font-size: 18px; max-width: 62ch; margin-top: 22px; }
.rule { height:1px; background: var(--line); border:0; }

/* ---------- nav (light, monochrome) ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display:flex; align-items:center; justify-content: space-between;
  padding: 22px 4vw; transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom: 1px solid transparent;
  background: transparent;
}
.nav.scrolled {
  background: rgba(245,245,243,.9); backdrop-filter: blur(14px);
  padding: 13px 4vw; border-bottom-color: var(--gray-line-l);
}
.nav .logo img { height: 32px; filter: invert(1); }
.nav ul { display:flex; gap: 34px; list-style:none; }
.nav ul a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--gray-body); position:relative; padding: 4px 0; transition: color .3s;
}
.nav ul a b { color: var(--ink); font-weight:500; margin-right: 6px; }
.nav ul a::after {
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background: var(--ink); transition: width .4s var(--ease);
}
.nav ul a:hover { color: var(--ink); }
.nav ul a:hover::after { width:100%; }
.nav .cta {
  font-family: var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  background: var(--ink); color: var(--white); border:1px solid var(--ink);
  padding: 11px 22px; border-radius: 999px; transition: all .35s var(--ease);
}
.nav .cta:hover { background: var(--band); box-shadow: 0 10px 30px -10px rgba(17,17,17,.5); }
.burger { display:none; background:none; border:0; color:var(--ink); font-size:26px; cursor:pointer; }

/* ---------- hero (light, monochrome) ---------- */
.hero { min-height: 100svh; display:flex; flex-direction:column; justify-content:center; padding: 150px 0 70px; overflow:hidden; background: var(--paper); }
.hero .bg {
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 600px at 78% 18%, rgba(17,17,17,.05), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%);
}
.hero .grid-lines {
  position:absolute; inset:0; z-index:-1; opacity:.6;
  background-image:
    linear-gradient(rgba(17,17,17,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
}
.hero h1 {
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(64px, 8.2vw, 124px); line-height:.94; letter-spacing:-.03em;
  text-transform: uppercase;
  max-width: 17ch;  /* widened for "that communicate" - keeps 3-line pyramid, clears blueprint panel */
}
.hero h1 .stroke {
  color: transparent; -webkit-text-stroke: 1.6px #A8A8A4;
}
.hero h1 .sage { color: var(--ink); }
.hero h1 > .sage { font-size: .72em; }  /* longer middle line scales down: keeps the 3-line pyramid */
.hero .tagline {
  margin-top: 34px; display:flex; flex-wrap:wrap; gap: 18px 34px; align-items:center;
  color: var(--gray-body); font-size: 17px; max-width: 56ch;
}
.hero .badges { display:flex; flex-wrap:wrap; gap:10px; margin-top: 30px; }
.hero .badges span {
  font-family: var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--gray-line-l); padding: 8px 14px; border-radius: 999px; color: var(--gray-body);
}
.hero .scroll-cue {
  position:absolute; bottom: 26px; left:4vw;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color: var(--ink); display:flex; gap:12px; align-items:center; opacity:.75;
}
.hero .scroll-cue i { display:block; width:1px; height:44px; background: rgba(17,17,17,.25); position:relative; overflow:hidden; }
.hero .scroll-cue i::after {
  content:""; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background: var(--ink); animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { 0%{top:-50%} 100%{top:110%} }

/* ---------- marquee (black band, monochrome) ---------- */
.marquee {
  border-block: 1px solid rgba(255,255,255,.1); overflow:hidden; padding: 16px 0;
  background: var(--band);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.marquee .track {
  display:flex; gap:0; width:max-content; animation: scrollX 30s linear infinite;
  font-family: var(--font-display); font-weight:500; font-size: 15px;
  letter-spacing:.22em; text-transform:uppercase; color: var(--gray-on-dark); white-space:nowrap;
}
.marquee .track span { padding: 0 26px; display:flex; align-items:center; gap:26px; }
.marquee .track span::after { content:"◆"; color: var(--white); font-size: 10px; }
@keyframes scrollX { to { transform: translateX(-50%); } }
.marquee:hover .track { animation-play-state: paused; }
/* ---------- about / founder (light) ---------- */
.about { background: var(--paper); padding-bottom: 130px; }
.about .cols { display:grid; grid-template-columns: 5fr 6fr; gap: 70px; align-items:start; }
.portrait { position:relative; }
.portrait .frame {
  position:relative; border:1px solid var(--gray-line-l); padding:14px; background: var(--white);
}
.portrait .frame::before {
  content:""; position:absolute; inset:-14px auto auto -14px; width:56px; height:56px;
  border-top:2px solid var(--ink); border-left:2px solid var(--ink);
}
.portrait .frame::after {
  content:""; position:absolute; inset:auto -14px -14px auto; width:56px; height:56px;
  border-bottom:2px solid var(--ink); border-right:2px solid var(--ink);
}
.portrait img { width:100%; filter: saturate(.85) contrast(1.05); }
.portrait .cap {
  margin-top:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color: var(--gray-body);
}
.about .bio p { color: var(--gray-body); font-size:17px; margin-bottom: 18px; }
.about .bio p:first-of-type {
  font-size: 21px; line-height:1.55; color: var(--ink); font-weight:400;
}
.creds { display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--gray-line-l); border:1px solid var(--gray-line-l); margin-top: 34px; }
.creds div { background: var(--white); padding: 18px 16px; }
.creds b { display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--ink); margin-bottom: 8px; }
.creds span { font-size:13.5px; color: var(--gray-body); }

/* ---------- tiers / pricing ---------- */
/* ---------- tiers / pricing (dark band) ---------- */
.tiers { background: var(--band); }
.tier-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 64px; }
.tier {
  position:relative; border:1px solid rgba(255,255,255,.12); background: var(--steel-800);
  padding: 40px 34px 36px; display:flex; flex-direction:column; gap:0;
  transition: transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.tier:hover { transform: translateY(-10px); border-color: rgba(255,255,255,.35); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.tier .num { font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; color: var(--gray-on-dark); }
.tier h3 { font-family:var(--font-display); font-size: 30px; margin-top: 12px; letter-spacing:-.01em; color: var(--white); }
.tier .sub { color: var(--gray-on-dark); font-size:14px; margin-top: 6px; min-height: 42px; }
.pay .opt span { min-width:0; }
.tier .price { font-family:var(--font-display); font-weight:700; font-size: 56px; letter-spacing:-.02em; margin: 26px 0 2px; color: var(--white); }
.tier .price small { font-size: 14px; font-weight:400; color: var(--gray-on-dark); letter-spacing:.1em; text-transform:uppercase; display:block; font-family:var(--font-mono); }
.tier ul.inc { list-style:none; margin-top: 26px; display:grid; gap: 10px; }
.tier ul.inc li { font-size:14.5px; color: #D9D9D9; padding-left: 22px; position:relative; }
.tier ul.inc li::before { content:""; position:absolute; left:0; top:.5em; width:12px; height:1px; background: var(--white); }
.tier ul.inc li.off { color: #6E6E6E; text-decoration: line-through; }
.tier ul.inc li.off::before { background: #4A4A4A; }
.tier ul.inc li.nohead {
  font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color: #6E6E6E; padding-left:0; margin-top:10px;
}
.tier ul.inc li.nohead::before { display:none; }
.pay { margin-top: 28px; border-top:1px solid rgba(255,255,255,.12); padding-top: 22px; }
.pay h4 { font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color: var(--white); margin-bottom: 14px; }
.pay .opt { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14.5px; color: #D9D9D9; padding: 9px 0; border-bottom:1px dashed rgba(255,255,255,.1); }
.pay .opt b { font-family:var(--font-mono); font-weight:500; font-size:14px; color: var(--white); white-space:nowrap; }
.tier.featured { border-color: var(--white); background: linear-gradient(180deg, rgba(255,255,255,.06), var(--steel-800) 55%); }
.tier.featured .flag {
  position:absolute; top:-13px; right: 24px; background: var(--white); color: var(--ink);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding:6px 12px;
}
.tier .best { margin-top:auto; padding-top: 26px; font-size:13px; color: var(--gray-on-dark); font-style:italic; }

/* ---------- process (light, ghost numbers) ---------- */
.process { background: var(--paper); }
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--gray-line-l); border:1px solid var(--gray-line-l); margin-top: 64px; }
.step { background: var(--white); padding: 34px 28px; transition: background .4s; }
.step:hover { background: var(--gray-ghost); }
.step .n { font-family:var(--font-display); font-weight:700; font-size:44px; color: transparent; -webkit-text-stroke:1px #C9C9C6; }
.step h3 { font-family:var(--font-display); font-size:19px; margin: 16px 0 8px; }
.step p { font-size:14px; color: var(--gray-body); }

/* ---------- buttons (monochrome pills) ---------- */
.btn-solid, .btn-line, .btn-invert {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding: 15px 26px; border-radius: 999px; transition: all .35s var(--ease);
}
.btn-solid { background: var(--ink); color: var(--white); border:1px solid var(--ink); }
.btn-solid:hover { background: var(--band); box-shadow: 0 14px 40px -12px rgba(17,17,17,.45); }
.btn-line { border:1px solid rgba(17,17,17,.35); color: var(--ink); background:transparent; }
.btn-line:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.btn-invert { background: var(--white); color: var(--ink); border:1px solid var(--white); }
.btn-invert:hover { background: var(--gray-ghost); box-shadow: 0 12px 44px -12px rgba(255,255,255,.25); }
.arr { display:inline-block; transition: transform .35s var(--ease); }
.btn-solid:hover .arr, .btn-line:hover .arr, .btn-invert:hover .arr, .more-line:hover .arr, .work-card:hover .arr { transform: translateX(5px); }
.hero-ctas { display:flex; gap:16px; margin-top: 40px; flex-wrap:wrap; }
.trust-strip { display:flex; gap: 28px; flex-wrap:wrap; margin-top: 46px; padding-top: 26px; border-top:1px solid var(--gray-line-l); }
.trust-strip span { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--gray-body); }
.trust-strip i { width:20px; height:20px; display:inline-flex; }
.trust-strip svg { width:100%; height:100%; color: var(--ink); }
.trust-strip span:last-child { margin-left:auto; }
.trust-strip span:nth-child(2) { margin-inline:auto; }

/* ---------- blueprint panel (hero right, light monochrome) ---------- */
.blueprint {
  position:absolute; right: 4vw; top: 47%; transform: translateY(-50%);
  width: clamp(340px, 30vw, 460px); aspect-ratio: 42/31; z-index:0; pointer-events:none;
  border:1px solid rgba(17,17,17,.3); background:
    linear-gradient(rgba(17,17,17,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.05) 1px, transparent 1px),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(17,17,17,.02) 14px 15px),
    var(--white);
  background-size: 14px 14px, 14px 14px, auto, auto;
  box-shadow: 0 30px 70px -30px rgba(17,17,17,.25);
  animation: bp-in 1.2s var(--ease) .2s backwards;
}
@keyframes bp-in { from { opacity:0; transform: translateY(calc(-50% + 30px)); } to { opacity:1; transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .blueprint { animation:none; } }
.blueprint svg { position:absolute; inset:0; width:100%; height:100%; }
.bp-cap {
  position:absolute; top:12px; right:16px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.26em; text-transform:uppercase; color: var(--ink);
  opacity:.85;
}
.bp-draw {
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
  animation: draw 2.2s var(--ease) forwards;
}
.bp-draw.d-late { animation-name: draw-late; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes draw-late { to { stroke-dashoffset: 0; } }
.bp-lbl { animation: lbl-in .8s ease forwards; }
@keyframes lbl-in { from { opacity:0; } to { opacity:1; } }
/* capture/no-JS robustness: if animations don't run, geometry must still show */
@media (prefers-reduced-motion: reduce) {
  .bp-draw, .bp-draw.d-late { animation:none; stroke-dashoffset:0; }
  .bp-lbl { animation:none; opacity:1; opacity:.9; }
}
html:not(.js) .bp-draw, html:not(.js) .bp-draw.d-late { animation:none; stroke-dashoffset:0; }

/* ---------- hero entrance animation ---------- */
/* visible-by-default, animated in only when JS is confirmed running:
   prevents blank headline/panel in captures, print, or any JS-less render */
.hero h1 .stroke, .hero h1 .sage {
  display:inline-block;
  transform: translateY(44px);
  opacity: 1;
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}
.hero .kicker, .hero .tagline, .hero-ctas, .trust-strip {
  transform: translateY(18px);
  opacity: 1;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
body:not(.loaded) .hero h1 .stroke, body:not(.loaded) .hero h1 .sage,
body:not(.loaded) .hero .kicker, body:not(.loaded) .hero .tagline,
body:not(.loaded) .hero-ctas, body:not(.loaded) .trust-strip {
  opacity: 0;
}
body.loaded .hero h1 .stroke { opacity:1; transform:none; transition-delay:.08s; }
body.loaded .hero h1 .sage { opacity:1; transform:none; transition-delay:.2s; }
body.loaded .hero .kicker { opacity:1; transform:none; transition-delay:0s; }
body.loaded .hero .tagline { opacity:1; transform:none; transition-delay:.34s; }
body.loaded .hero-ctas { opacity:1; transform:none; transition-delay:.46s; }
body.loaded .trust-strip { opacity:1; transform:none; transition-delay:.58s; }
@media (prefers-reduced-motion: reduce) {
  .hero h1 .stroke, .hero h1 .sage, .hero .kicker, .hero .tagline, .hero-ctas, .trust-strip { opacity:1 !important; transform:none !important; }
}

/* ---------- split section header ---------- */
.split-head { display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:end; }
.split-head .lead.right { max-width: 46ch; justify-self:end; text-align:right; }

/* ---------- light band (work section now lives on paper) ---------- */
.band-light {
  background: var(--paper); color: var(--ink);
}
.band-light .kicker { color: var(--ink); }
.band-light .kicker::before { background: var(--ink); }
.band-light h2.title em { color: var(--ink); }
.band-light .lead { color: var(--gray-body); }
.band-light .lead.right { color: var(--gray-body); }
.band-light .work-card { outline-color: rgba(17,17,17,.18); box-shadow:none; }
.band-light .work-card:hover { box-shadow: 0 30px 60px -30px rgba(17,17,17,.35); }

/* ---------- work grid ---------- */
.work-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 64px; }
.work-card {
  position:relative; display:block; overflow:hidden; background: var(--band);
  aspect-ratio: 43/34; transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  outline:1px solid var(--gray-line-l); outline-offset:-1px;
}
.work-card figure { position:absolute; inset:0; margin:0; }
.work-card figure img {
  width:100%; height:100%; object-fit:cover; filter: saturate(.88);
  transition: transform 1.1s var(--ease), filter .6s;
}
.work-card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -34px rgba(17,17,17,.55); }
.work-card:hover figure img { transform: scale(1.055); filter: saturate(1.05); }
.work-card::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,13,13,0) 42%, rgba(13,13,13,.88) 100%);
  transition: opacity .5s;
}
.work-card .meta {
  position:absolute; inset:auto 0 100px 0; z-index:2; padding: 0 22px;
  display:flex; justify-content:space-between; align-items:center;
  transform: translateY(10px); opacity:0; transition: all .5s var(--ease);
}
.work-card .tag { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color: var(--gray-ghost); }
.work-card .view { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color: var(--white); }
.work-card .view .arr { color: var(--white); }
.work-card h3 {
  position:absolute; left:22px; bottom:66px; z-index:2;
  font-family:var(--font-display); font-size:26px; font-weight:700; color: var(--white); letter-spacing:-.01em;
  transition: bottom .5s var(--ease);
}
.work-card > p {
  position:absolute; left:22px; right:22px; bottom:52px; z-index:2;
  margin:0; font-size:13.5px; color: #CFCFCF; opacity:0; transform:translateY(6px);
  transition: all .5s var(--ease) .04s;
}
.work-card:hover .meta { transform:none; opacity:1; }
.work-card:hover h3 { bottom:96px; }
.work-card:hover > p { opacity:1; transform:none; }

/* ---------- hardware section (dark band) ---------- */
.hw { background: var(--band); }
/* hw band title handled by dark-band overrides above */
.hw-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 64px; }
.hw-card {
  position:relative; border:1px solid rgba(255,255,255,.12); background: #131313;
  padding: 0 0 30px; overflow:hidden; display:flex; flex-direction:column;
  transition: transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.hw-card:hover { transform: translateY(-8px); border-color: rgba(255,255,255,.35); box-shadow: 0 30px 70px -30px rgba(0,0,0,.85); }
.hw-card.big { grid-row: span 2; }
.hw-card:last-child { grid-column: span 2; }
.hw-card:last-child figure { aspect-ratio: 4/1.9; }
.hw-card:last-child figure img { width:100%; height:100%; }
.hw-card figure { position:relative; margin:0; aspect-ratio: 4/2.9; overflow:hidden; }
.hw-card figure img { width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease); }
.hw-card:hover figure img { transform: scale(1.05); }
.hw-card.big figure { aspect-ratio: 4/2.9; }
.hw-card .pill {
  position:absolute; top:18px; left:18px; z-index:2;
  background: rgba(13,13,13,.72); backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.4); color: var(--white);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding:7px 13px;
}
.hw-card h3 { font-family:var(--font-display); font-size:22px; margin: 22px 24px 8px; color: var(--white); }
.hw-card.big h3 { font-size:30px; }
.hw-card p { font-size:14px; color: var(--gray-on-dark); margin: 0 24px; }
.hw-card p a { color: var(--white); border-bottom:1px solid rgba(255,255,255,.5); }
.hw-card .more-line {
  margin: 18px 24px 0; font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--white);
}
.hw-card .more-line .arr { margin-left:6px; }

.pill-muted { border-color: #6E6E6E; color: var(--gray-on-dark); }
/* ---------- tiers note ---------- */
.tiers-note { margin-top: 30px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; color: var(--steel-300); text-transform:uppercase; }

/* ---------- CTA band (near-black + subtle mono glow) ---------- */
.cta-band {
  background:
    radial-gradient(720px 420px at 82% 20%, rgba(255,255,255,.07), transparent 62%),
    var(--band-deep);
}
.cta-inner .kicker { justify-content:center; color: var(--white); }
.cta-inner .kicker::before { background: var(--white); }
.cta-inner .lead { margin-inline:auto; text-align:center; }
.cta-actions { display:flex; gap:16px; margin-top: 44px; flex-wrap:wrap; justify-content:center; }

/* dark-band body copy + kickers */
.tiers .lead, .hw .lead, .cta-band .lead, .cta-inner .lead { color: var(--gray-on-dark); }
.tiers .kicker, .cta-band .kicker { color: var(--white); }
.tiers .kicker::before, .cta-band .kicker::before { background: var(--white); }
.tiers-note { color: var(--gray-on-dark); }

/* ---------- footer (dark, matches CTA rhythm) ---------- */
.footer { background: var(--band); border-top:1px solid rgba(255,255,255,.1); padding: 80px 0 0; }
.foot-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 50px; }
.foot-brand img { height: 34px; margin-bottom: 20px; }
.foot-brand p { font-size:13.5px; color: var(--gray-on-dark); max-width: 34ch; }
.foot-col h4 { font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color: var(--white); margin-bottom: 16px; }
.foot-col a { display:block; font-size:14px; color: var(--gray-on-dark); padding: 5px 0; transition: color .3s, transform .3s; }
.foot-col a:hover { color: var(--white); transform: translateX(4px); }
.foot-bar {
  margin-top: 64px; padding: 22px 0; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:12.5px; color: var(--gray-on-dark);
}
.foot-bar .mono { font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; }

/* ---------- mobile menu (near-black overlay) ---------- */
.mobile-menu {
  position:fixed; inset:0; z-index:80; background: rgba(13,13,13,.96); backdrop-filter: blur(10px);
  display:flex; flex-direction:column; justify-content:center; padding: 0 8vw; gap: 6px;
  opacity:0; visibility:hidden; transition: opacity .45s var(--ease), visibility .45s;
}
.mobile-menu.open { opacity:1; visibility:visible; }
.mobile-menu a {
  font-family:var(--font-display); font-size: clamp(30px, 8vw, 44px); font-weight:700;
  color: var(--white); padding: 10px 0; border-bottom:1px solid rgba(255,255,255,.12);
  transform: translateY(14px); opacity:0; transition: all .5s var(--ease);
}
.mobile-menu.open a { transform:none; opacity:1; }
.mobile-menu a b { font-family:var(--font-mono); font-weight:400; font-size:.5em; color: var(--gray-on-dark); vertical-align: super; margin-right: 10px; }
.mobile-menu .mm-cta { color: var(--white); font-family:var(--font-mono); font-size: 15px; font-weight:400; letter-spacing:.15em; text-transform:uppercase; }
@media (min-width: 1025px) { .mobile-menu { display:none; } }

/* ---------- responsive ---------- */
@media (max-width: 1440px) {
  .blueprint { opacity:.85; }
}
@media (max-width: 1320px) {
  .blueprint { width: clamp(300px, 26vw, 340px); }
  .hero h1 { font-size: clamp(52px, 7.5vw, 96px); }
}
@media (max-width: 1080px) {
  .blueprint { display:none; }
}
@media (max-width: 1024px) {
  .nav ul, .nav .cta { display:none; }
  .burger { display:block; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .hw-grid { grid-template-columns: 1fr; }
  .hw-card.big { grid-row: auto; }
  .hw-card:last-child { grid-column: auto; }
  .hw-card:last-child figure { aspect-ratio: 4/2.6; }
  .tier-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline:auto; }
  .split-head { grid-template-columns: 1fr; }
  .split-head .lead.right { justify-self:start; text-align:left; }
  .steps { grid-template-columns: repeat(2,1fr); }
  .about .cols { grid-template-columns: 1fr; gap:44px; }
  .portrait { max-width: 480px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  section { padding: 84px 0; }
  .hero { min-height: 88svh; }
  .hero h1 { font-size: clamp(44px, 13vw, 70px); }
  .work-grid { grid-template-columns: 1fr; }
  .work-card { aspect-ratio: 4/3.4; }
  .tier { padding: 34px 24px; }
  .tier .price { font-size: 44px; }
  .steps { grid-template-columns: 1fr; }
  .creds { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
  .bp-draw { stroke-dashoffset: 0; }
}

.hw-card.big ul.spec {
  list-style:none; margin: auto 24px; padding: 0;
  display:grid; grid-template-columns: 1fr 1fr; gap: 1px;
  border:1px dashed rgba(255,255,255,.16); background: rgba(255,255,255,.04);
}
.hw-card.big ul.spec li {
  background: #131313; padding: 26px 16px 24px 22px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--gray-on-dark); position:relative;
}
.hw-card.big ul.spec li::before {
  content:""; position:absolute; left:6px; top:1.15em; width:7px; height:7px;
  border:1px solid var(--white); transform: rotate(45deg);
}
.hw-card.big { padding-bottom: 30px; }
.hw-card.big .more-line { margin-top:auto; }
.hw-card.big .more-line { margin: 26px 24px 0; }
.hw-card.big .hw-lede { font-size:15.5px; color: var(--steel-200); margin-top: 4px; }
@media (max-width: 1024px) { .hw-card.big ul.spec { grid-template-columns: 1fr; } }


/* MAWNI 3-render strip inside the wide hardware card */
.mawni-strip {
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1px;
  background: rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12);
}
.mawni-strip img {
  width:100%; height: min(58vw, 706px); object-fit: contain; background: #1A1A1A;
  display:block; transition: transform .8s var(--ease), filter .5s;
  filter: saturate(.95); padding: 14px 12px; box-sizing: border-box;
}
.mawni-strip img:hover { transform: scale(1.045); filter: saturate(1.08); }

/*PART5*/