/* =========================================================
   FUTUREDEMAND — design system
   Inspired by 2008 Mercedes-Benz C-Class (W204):
   studio-dark drama, champagne leather warmth, chrome
   instruments, precise typographic detailing.
   ========================================================= */

:root {
  /* dark studio */
  --ink:        #0a0a0b;
  --ink-1:      #0e0e10;
  --ink-2:      #141417;
  --ink-3:      #1c1c20;
  --hairline:   rgba(236, 232, 224, 0.10);
  --hairline-2: rgba(236, 232, 224, 0.16);

  /* warm leather */
  --paper:      #efe8da;
  --paper-2:    #e4dac6;
  --paper-deep: #cdbfa3;
  --warm-ink:   #25211b;
  --warm-mute:  #6c6353;

  /* type on dark */
  --fg:         #ece8e0;
  --fg-mute:    #938d82;
  --fg-faint:   #5f5a52;

  /* chrome */
  --chrome-hi:  #f3f4f6;
  --chrome-mid: #b9bcc2;
  --chrome-lo:  #6f7278;

  /* accent (tweakable) */
  --accent:     #c8a96a;   /* champagne gold */
  --accent-hi:  #e6cb92;
  --accent-deep:#9a803f;
  --live:       #d6463a;   /* climate-dial red — used once, sparingly */
  --led:        #6f93c4;

  --shadow-studio: 0 40px 120px -30px rgba(0,0,0,0.8);

  --fs-display: clamp(2.9rem, 9vw, 8.5rem);
  --fs-h2:      clamp(1.9rem, 4.2vw, 3.6rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.7rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-mech: cubic-bezier(0.83, 0, 0.17, 1);

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 84px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--fg);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #0a0a0b; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- shared type ---------- */
.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent);
  opacity: 0.8;
}
.display {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.display .light { font-weight: 200; }
.display em {
  font-style: normal;
  color: var(--accent);
}
h2.section-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lede { font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--fg-mute); line-height: 1.55; max-width: 46ch; }

.shell { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

section { position: relative; }

/* ============ NAV ============ */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gut);
  transition: background .4s var(--ease), border-color .4s, padding .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--hairline);
  padding-block: 12px;
}
.wordmark { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -0.01em; font-size: 1.02rem; }
.wordmark .glyph {
  width: 26px; height: 26px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--ink-2) 0 40%, transparent 41%),
    conic-gradient(from 0deg, var(--chrome-lo), var(--chrome-hi), var(--chrome-lo), var(--chrome-hi), var(--chrome-lo));
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5);
}
.wordmark .glyph::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 2px; height: 9px; background: var(--accent); border-radius: 2px;
  box-shadow: 0 0 7px var(--accent);
}
.wordmark b { font-weight: 800; }
.wordmark span { font-weight: 300; color: var(--fg-mute); }

.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.nav-links a.navlink {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute); transition: color .25s;
}
.nav-links a.navlink:hover { color: var(--fg); }
@media (max-width: 760px){ .nav-links a.navlink { display: none; } }

/* ============ CHROME BUTTON ============ */
.btn {
  --b: 999px;
  position: relative; display: inline-flex; align-items: center; gap: 0.6em;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 500;
  padding: 0.85em 1.4em; border-radius: var(--b);
  cursor: pointer; border: 0; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.btn .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.btn-chrome {
  color: #16161a;
  background: linear-gradient(177deg, var(--chrome-hi), #d4d6db 42%, var(--chrome-mid) 60%, #93969c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 2px rgba(0,0,0,.35), 0 6px 22px -8px rgba(0,0,0,.7);
}
.btn-chrome::after {
  content:""; position:absolute; inset:0; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%);
  transition: transform .7s var(--ease);
}
.btn-chrome:hover { transform: translateY(-2px); }
.btn-chrome:hover::after { transform: translateX(130%); }
.btn-ghost {
  color: var(--fg); background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline-2);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-hi); transform: translateY(-2px); }
.btn-gold {
  color: #1a1407;
  background: linear-gradient(177deg, var(--accent-hi), var(--accent) 55%, var(--accent-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 24px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn-gold:hover { transform: translateY(-2px); }

/* ============ HERO ============ */
.hero {
  min-height: 100svh;
  padding-top: clamp(120px, 17vh, 220px);
  padding-bottom: 80px;
  display: flex; align-items: center;
  background:
    radial-gradient(120% 80% at 72% 38%, rgba(200,169,106,0.10), transparent 55%),
    radial-gradient(90% 70% at 50% 120%, #17171b 0%, transparent 60%),
    linear-gradient(180deg, #050506, var(--ink) 40%);
  overflow: hidden;
}
/* studio floor */
.hero::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height: 38%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.025) 55%, transparent);
  pointer-events:none;
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(30px, 5vw, 70px);
  align-items: center; width: 100%;
}
@media (max-width: 920px){ .hero-grid { grid-template-columns: 1fr; gap: 48px; } }

.hero-copy .display { margin: 26px 0 28px; }
.hero-meta {
  margin-top: 40px; display: flex; gap: 30px; flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid var(--hairline);
}
.hero-meta .stat .n { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.hero-meta .stat .n .live { color: var(--accent); }
.hero-meta .stat .l { color: var(--fg-faint); margin-top: 2px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ====== GAUGE (hero instrument) ====== */
.gauge-wrap { display: grid; place-items: center; position: relative; }
.gauge-wrap::before {
  content:""; position:absolute; width: 115%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle, rgba(200,169,106,0.16), transparent 62%);
  filter: blur(8px);
}
.gauge {
  --size: clamp(260px, 34vw, 420px);
  width: var(--size); height: var(--size); border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 50% 38%, #1a1a1f 0%, #0c0c0e 60%, #060607 100%);
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.05),
    inset 0 -10px 30px rgba(0,0,0,.6),
    0 30px 80px -20px rgba(0,0,0,.9);
  display: grid; place-items: center;
}
/* knurled chrome bezel */
.gauge::before {
  content:""; position:absolute; inset:-14px; border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, #2c2d31 0deg 1.4deg, #76787e 1.4deg 2.8deg),
    conic-gradient(#90939a, #e8eaee, #82858c, #c9ccd2, #6f7278, #e8eaee, #90939a);
  background-blend-mode: overlay;
  z-index: -1;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.6);
}
.gauge::after { /* inner chrome ring */
  content:""; position:absolute; inset:6px; border-radius:50%;
  background: conic-gradient(from 90deg, #5c5e63, #d7d9dd, #65686d, #c4c7cc, #5c5e63);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 4px));
          mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 4px));
  opacity: .9;
}
.gauge-face { position: absolute; inset: 0; }
.tick { position:absolute; left:50%; top:50%; transform-origin: 0 0; }
.tick i { display:block; width: 2px; height: 9px; background: var(--chrome-mid); border-radius: 2px; }
.tick.major i { height: 15px; width: 2.5px; background: var(--chrome-hi); }
.tick .num, .num {
  position:absolute; font-family:"Archivo",sans-serif; font-size: clamp(0.95rem, 1.6vw, 1.2rem); color:#eef1f5;
  font-weight:700; letter-spacing:0; z-index:3; text-shadow:0 1px 2px rgba(0,0,0,.6);
}
/* tapered pointer — sits ON TOP of the hub */
.needle {
  position:absolute; left:50%; top:50%; width: 11px; height: 41%;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent) 80%);
  transform-origin: 50% 100%;
  transform: translate(-50%,-100%) rotate(-118deg);
  clip-path: polygon(50% 0, 100% 88%, 50% 100%, 0 88%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 70%, transparent);
  z-index: 6;
}
/* wide grey disc behind the needle base */
.needle-hub {
  position:absolute; left:50%; top:50%; width: 38px; height:38px; border-radius:50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle at 40% 35%, #3a3b40, #15151a 70%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.2), 0 2px 6px rgba(0,0,0,.6);
  z-index: 2;
}
/* small pivot cap capping the needle on top */
.needle-cap {
  position:absolute; left:50%; top:50%; width: 15px; height:15px; border-radius:50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle at 40% 35%, #505156, #181820 72%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3), 0 1px 3px rgba(0,0,0,.7);
  z-index: 7;
}
.gauge-readout {
  position:absolute; left:0; right:0; bottom: 27%; text-align:center; z-index:4;
}
.gauge-readout .val { font-size: 1.4rem; font-weight: 700; letter-spacing:-0.02em; }
.gauge-readout .val .unit { font-family:"JetBrains Mono",monospace; font-size:.7rem; color: var(--fg-mute); margin-left:.3em; letter-spacing:.1em; }
.gauge-readout .cap { font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.24em; color: var(--accent); text-transform:uppercase; margin-top:4px; }

/* scroll cue */
.scroll-cue {
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color: var(--fg-faint); font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.3em;
}
.scroll-cue .bar { width:1px; height:34px; background: linear-gradient(var(--fg-faint), transparent); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0%,100%{ transform: scaleY(.4); transform-origin: top; opacity:.4;} 50%{ transform: scaleY(1); opacity:1;} }

/* ============ MARQUEE STATEMENT ============ */
.statement { padding: clamp(80px, 12vh, 150px) 0; border-top:1px solid var(--hairline); }
.statement .big {
  font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 300; line-height: 1.18; letter-spacing:-0.02em;
  max-width: 22ch; text-wrap: balance;
}
.statement .big b { font-weight: 600; }
.statement .big .em { color: var(--accent); font-weight: 500; }
.statement-foot { margin-top: 42px; display:flex; gap: clamp(28px,5vw,72px); flex-wrap:wrap; }
.statement-foot p { max-width: 34ch; color: var(--fg-mute); font-size: .98rem; }
.statement-foot p .mono { display:block; color: var(--accent); margin-bottom:8px; }

/* ============ CAPABILITIES (rotary dial) ============ */
.capabilities { padding: clamp(80px, 12vh, 140px) 0; border-top:1px solid var(--hairline); }
.cap-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom: clamp(40px,7vw,72px); }
.cap-head .mono { color: var(--fg-faint); }
.cap-layout { display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px,6vw,90px); align-items:center; }
@media (max-width: 880px){ .cap-layout { grid-template-columns:1fr; gap:48px; } }

/* the dial */
.dial-stage { display:grid; place-items:center; position:relative; }
.dial-stage::before {
  content:""; position:absolute; width:118%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
  filter: blur(10px);
}
.dial-holder { --d: clamp(250px, 32vw, 360px); width: var(--d); height: var(--d); position: relative; }
.dial {
  width: 100%; height: 100%; border-radius:50%; z-index:1;
  position: relative; cursor: grab; touch-action: none;
  background: radial-gradient(circle at 50% 40%, #17171c, #0a0a0c 70%);
  box-shadow: inset 0 -8px 26px rgba(0,0,0,.7), inset 0 2px 6px rgba(255,255,255,.05), 0 24px 64px -18px rgba(0,0,0,.85);
  transition: transform .55s var(--ease-mech);
}
.dial:active { cursor: grabbing; }
.dial-ring {
  position:absolute; inset:-12px; border-radius:50%; z-index:0;
  background:
    repeating-conic-gradient(from 0deg, #2a2b2f 0deg 1.5deg, #7a7c82 1.5deg 3deg),
    conic-gradient(#8d9097, #eceef2, #80838a, #c6c9cf, #6c6f75, #eceef2, #8d9097);
  background-blend-mode: overlay;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.5);
  transition: transform .55s var(--ease-mech);
}
.dial-marks { position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:4; }
.dmark { position:absolute; left:50%; top:50%; transform-origin:0 0; pointer-events:auto; cursor:pointer; }
.dmark .dt { display:block; font-family:"JetBrains Mono",monospace; font-size:.74rem; color: var(--fg-mute); white-space:nowrap; font-weight:600; transition: color .3s; }
.dmark.active .dt { color: var(--accent-hi); }
/* single red curved slit — lives on the black face, rotates in sync with the dial/grey ring */
.dial-slit {
  position:absolute; inset:3%; border-radius:50%; pointer-events:none; z-index:2;
  background: conic-gradient(var(--live) 0 5deg, transparent 5deg 355deg, var(--live) 355deg 360deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 5px), #000 calc(100% - 5px));
          mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 5px), #000 calc(100% - 5px));
  filter: drop-shadow(0 0 4px var(--live)) drop-shadow(0 0 8px color-mix(in srgb, var(--live) 50%, transparent));
  transition: transform .55s var(--ease-mech);
}

.dial-core {
  position:absolute; inset: 19%; border-radius:50%;
  background: radial-gradient(circle at 42% 36%, #2b2c31, #0e0e11 72%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.12), inset 0 -6px 14px rgba(0,0,0,.6);
  display:grid; place-items:center; text-align:center;
  transition: transform .55s var(--ease-mech);
}
.dial-core .ix { font-family:"JetBrains Mono",monospace; font-size:.8rem; letter-spacing:.2em; color: var(--fg-mute); }
.dial-core .deg { font-size: clamp(2.4rem,4vw,3.2rem); font-weight:700; letter-spacing:-0.02em; line-height:1; margin:10px 0; }
.dial-core .auto { font-family:"JetBrains Mono",monospace; font-size:.78rem; letter-spacing:.18em; color: var(--accent); }
.dial-pointer { display:none; }

/* capability panel */
.cap-panel { position:relative; display:grid; align-items:start; padding-bottom: 74px; }
.cap-item { grid-area: 1 / 1; visibility:hidden; opacity:0; pointer-events:none; }
.cap-item.active { visibility:visible; opacity:1; pointer-events:auto; animation: rise .5s var(--ease) both; }
.cap-item .ix { font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.2em; color: var(--accent); }
.cap-item h3 { font-size: clamp(1.7rem,3.2vw,2.6rem); font-weight:600; letter-spacing:-0.025em; margin:14px 0 16px; line-height:1.02; }
.cap-item p { color: var(--fg-mute); max-width:44ch; margin-bottom: 22px; }
.cap-tags { display:flex; flex-wrap:wrap; gap:8px; }
.cap-tags span { font-family:"JetBrains Mono",monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; padding:.5em .85em; border-radius:999px; box-shadow: inset 0 0 0 1px var(--hairline-2); color: var(--fg-mute); }
.cap-nav { display:flex; gap:10px; position:absolute; left:0; bottom:0; }
.cap-nav button {
  width:48px; height:48px; border-radius:50%; cursor:pointer; border:0;
  background: var(--ink-3); color: var(--fg); box-shadow: inset 0 0 0 1px var(--hairline-2);
  display:grid; place-items:center; transition: all .25s;
  font-family:"JetBrains Mono",monospace; font-size:1.35rem; line-height:1;
}
.cap-nav button:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-hi); }

/* ============ APPROACH (warm leather) ============ */
.approach { background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--warm-ink); padding: clamp(84px,13vh,150px) 0; position:relative; }
.approach .eyebrow { color: var(--accent-deep); }
.approach .eyebrow::before { background: var(--accent-deep); }
.approach .lede { color: var(--warm-mute); }
.approach-head { max-width: 60ch; margin-bottom: clamp(48px,7vw,80px); }
.approach-head h2 { color: var(--warm-ink); }
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(37,33,27,.12); border:1px solid rgba(37,33,27,.12); border-radius: 4px; overflow:hidden; }
@media (max-width: 900px){ .steps { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .steps { grid-template-columns: 1fr;} }
.step { background: var(--paper); padding: clamp(24px,2.6vw,38px); transition: background .4s; position:relative; }
.step:hover { background: var(--paper-2); }
.step .n { font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.2em; color: var(--accent-deep); }
.step h4 { font-size: 1.28rem; font-weight:600; letter-spacing:-0.01em; margin: 38px 0 12px; }
.step p { color: var(--warm-mute); font-size: .95rem; }
.step .ln { position:absolute; top: clamp(24px,2.6vw,38px); right: clamp(24px,2.6vw,38px); width:30px; height:1px; background: var(--accent-deep); opacity:.5; }

/* ============ WORK ============ */
.work { padding: clamp(84px,13vh,150px) 0; border-top:1px solid var(--hairline); }
.work-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom: clamp(40px,6vw,64px); }
.work-grid { display:grid; grid-template-columns: repeat(12,1fr); gap: 20px; }
.case { grid-column: span 6; border-radius:6px; overflow:hidden; background: var(--ink-1); box-shadow: inset 0 0 0 1px var(--hairline); transition: transform .5s var(--ease), box-shadow .5s; }
.case.tall { grid-column: span 6; }
.case.wide { grid-column: span 12; }
@media (max-width: 760px){ .case, .case.tall { grid-column: span 12; } }
.case:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-studio); }
.case-plate {
  aspect-ratio: 16/10; position:relative; overflow:hidden;
  background:
    radial-gradient(80% 60% at 50% 38%, rgba(200,169,106,.10), transparent 60%),
    repeating-linear-gradient(135deg, #141417 0 13px, #101013 13px 26px);
  display:grid; place-items:center;
}
.case.wide .case-plate { aspect-ratio: 21/8; }
.case-plate .stud { position:absolute; left:0; right:0; bottom:0; height:34%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.03)); }
.case-plate .ph { font-family:"JetBrains Mono",monospace; font-size:.64rem; letter-spacing:.22em; color: var(--fg-faint); text-transform:uppercase; text-align:center; }
.case-plate .ph b { display:block; color: var(--fg-mute); margin-bottom:6px; letter-spacing:.16em; }
.case-body { padding: 22px 24px 26px; display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.case-body h4 { font-size: 1.2rem; font-weight:600; letter-spacing:-0.01em; }
.case-body .meta { font-family:"JetBrains Mono",monospace; font-size:.64rem; letter-spacing:.14em; color: var(--fg-faint); text-transform:uppercase; margin-top:6px; }
.case-body .res { text-align:right; }
.case-body .res .n { font-size:1.5rem; font-weight:700; letter-spacing:-0.02em; color: var(--accent-hi); }
.case-body .res .l { font-family:"JetBrains Mono",monospace; font-size:.58rem; letter-spacing:.16em; color: var(--fg-faint); text-transform:uppercase; }

/* ============ ABOUT ============ */
.about { padding: clamp(84px,13vh,150px) 0; border-top:1px solid var(--hairline); }
.about-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,80px); align-items:center; }
@media (max-width: 820px){ .about-grid { grid-template-columns:1fr; gap:44px; } }
.about-grid h2 { margin: 22px 0 24px; }
.about-grid p { color: var(--fg-mute); max-width: 50ch; margin-bottom: 16px; }
.about-sig { margin-top: 30px; display:flex; align-items:center; gap:14px; }
.about-sig .who b { display:block; font-weight:600; }
.about-sig .who span { font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.16em; color: var(--fg-faint); text-transform:uppercase; }
.portrait {
  aspect-ratio: 4/5; border-radius:6px; position:relative; overflow:hidden;
  background:
    radial-gradient(70% 60% at 55% 30%, rgba(200,169,106,.12), transparent 60%),
    repeating-linear-gradient(115deg, #16161a 0 13px, #111114 13px 26px);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-studio);
  display:grid; place-items:center;
}
.portrait .ph { font-family:"JetBrains Mono",monospace; font-size:.64rem; letter-spacing:.22em; color: var(--fg-faint); text-transform:uppercase; text-align:center; }
.portrait .ph b { display:block; color: var(--fg-mute); margin-bottom:6px; }

/* operating-cycle dial — replaces the portrait plate */
.process-cycle { width:min(100%,420px); margin:0 auto; aspect-ratio:1; }
.process-cycle svg { width:100%; height:100%; display:block; overflow:visible; }
.pc-face  { fill: url(#pcFace); }
.pc-bezel { fill:none; stroke: var(--hairline-2); stroke-width:1; }
.pc-ticks { fill:none; stroke: var(--hairline); stroke-width:7; stroke-dasharray:1 13; }
.pc-track { fill:none; stroke: rgba(236,232,224,0.07); stroke-width:2; }
.pc-pulse {
  fill:none; stroke: var(--accent); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:122 644.5; filter:url(#pcGlow);
  animation: pcTravel 10s linear infinite;
}
@keyframes pcTravel { to { stroke-dashoffset:-766.5; } }
.cyc-node { transform-box: fill-box; transform-origin:center; animation: pcNode 10s linear infinite; }
.cyc-node .halo { fill: var(--accent); opacity:.5; filter:url(#pcGlow); }
.cyc-node .core { fill: var(--accent); }
@keyframes pcNode {
  0%   { opacity:1;  transform:scale(1.18); }
  11%  { opacity:.32; transform:scale(.9); }
  89%  { opacity:.32; transform:scale(.9); }
  100% { opacity:1;  transform:scale(1.18); }
}
.cyc-label {
  font-family:"JetBrains Mono",monospace; font-size:13.5px; letter-spacing:.1em;
  fill: var(--fg-mute); animation: pcLabel 10s linear infinite;
}
@keyframes pcLabel {
  0%   { fill: var(--accent-hi); }
  11%  { fill: var(--fg-mute); }
  89%  { fill: var(--fg-mute); }
  100% { fill: var(--accent-hi); }
}
.cyc-center .t1 { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.34em; fill: var(--fg-faint); }
.cyc-center .t2 { font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.26em; fill: var(--accent); }
@media (prefers-reduced-motion: reduce){
  .pc-pulse, .cyc-node, .cyc-label { animation:none; }
  .cyc-node { opacity:1; } .cyc-label { fill: var(--fg-mute); }
}
body[data-motion="off"] .pc-pulse,
body[data-motion="off"] .cyc-node,
body[data-motion="off"] .cyc-label { animation:none !important; }

/* ============ CTA ============ */
.cta { padding: clamp(90px,15vh,180px) 0; text-align:center; border-top:1px solid var(--hairline);
  background: radial-gradient(120% 90% at 50% 0%, rgba(200,169,106,.08), transparent 55%), var(--ink); }
.cta h2 { font-size: clamp(2.2rem,6vw,5rem); font-weight:600; letter-spacing:-0.03em; line-height:1; margin-bottom: 28px; }
.cta h2 em { font-style:normal; color: var(--accent); }
.cta p { color: var(--fg-mute); max-width: 44ch; margin: 0 auto 38px; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============ FOOTER ============ */
.footer { border-top:1px solid var(--hairline); padding: 48px 0 40px; }
.footer-top { display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start; }
.footer-cols { display:flex; gap: clamp(36px,6vw,84px); flex-wrap:wrap; }
.footer-cols .col h5 { font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color: var(--fg-faint); margin-bottom:14px; }
.footer-cols .col a { display:block; color: var(--fg-mute); font-size:.92rem; margin-bottom:9px; transition: color .2s; }
.footer-cols .col a:hover { color: var(--accent-hi); }
.footer-bar { margin-top: 44px; padding-top: 22px; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-bar .mono { color: var(--fg-faint); }

/* ============ reveal (transform-only entrance — never hides content) ============ */
.reveal { animation: rise 0.85s var(--ease) both; }
.reveal.d1 { animation-delay: 0.09s; }
.reveal.d2 { animation-delay: 0.18s; }
.reveal.d3 { animation-delay: 0.27s; }
.reveal.d4 { animation-delay: 0.36s; }
@keyframes rise {
  from { transform: translateY(22px); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration: 0.001s !important; transition: none !important; }
}

/* ---- tweak hooks ---- */
body[data-motion="off"] .reveal { animation: none !important; }
body[data-live="off"] { --live: var(--accent); }