/* ============================================================
   THE ORDER OF PROMETHEON — v6 "VELVET"
   Seductive futurism. True black, candle-gold, silk in motion.
   An enormous thin serif that leans into italics; small caps
   whispering underneath. Nothing shouts. Everything invites.
   ============================================================ */

@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/cormorant-400.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/cormorant-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/cormorant-400i.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/cormorant-500i.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/jost-300.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jost-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/jost-500.woff2') format('woff2'); }

:root {
  color-scheme: dark;

  /* IVORY: the same names, a lit world. Ground is bone, gold is ink. */
  --black:   #F6F1E6;   /* ground — warm ivory */
  --coal:    #FFFFFF;   /* raised paper */
  --line:    rgba(138, 102, 20, 0.30);
  --line-2:  rgba(28, 22, 12, 0.13);

  --cream:   #1C160C;   /* primary ink */
  --smoke:   #4A4236;   /* secondary ink — dark enough to read at arm's length */
  --shadow:  #C9BEA6;   /* decoration only */
  --mist:    #6E6452;   /* the palest ink allowed to carry words */

  --candle:  #A87C22;   /* gold ink */
  --ink:     #1C160C;   /* alias: primary ink */
  --ink-2:   #4A4236;   /* alias: secondary ink */
  --line-1:  rgba(28, 22, 12, 0.08);
  --flame:   #8A6614;   /* deep gold accent */
  --ember:   #C9A02F;   /* bright gold, sparingly */

  --serif: "Cormorant", "Didot", "Bodoni 72", Georgia, serif;
  --sans:  "Jost", "Avenir Next", "Futura", system-ui, sans-serif;

  --gut: clamp(22px, 5vw, 80px);
  --max: 1200px;
  --act: clamp(72px, 8.5vw, 128px);

  --slow: cubic-bezier(0.16, 0.6, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

html { overflow-x: clip; scrollbar-color: #A87C22 #F6F1E6; scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #F6F1E6; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #A87C22, #8A6614);
  border-radius: 8px; border: 2px solid #F6F1E6;
}
::-webkit-scrollbar-thumb:hover { background: #C9A02F; }

a { color: inherit; text-decoration: none; }
::selection { background: var(--candle); color: #FFF9EA; }
::-moz-selection { background: var(--candle); color: #FFF9EA; }
:focus-visible { outline: 1px solid var(--candle); outline-offset: 5px; }

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

/* film grain over everything — skin, not screen */
#grain {
  position: fixed; inset: -60px; z-index: 8; pointer-events: none; opacity: 0.33;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  animation: grain 1.1s steps(3) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-22px, 14px); }
  66% { transform: translate(16px, -20px); }
  100% { transform: translate(0, 0); }
}

/* candlelight follows the hand */
#gleam {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  mix-blend-mode: multiply; opacity: 0;
  transition: opacity 2s var(--slow);
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 40%),
    rgba(168, 124, 34, 0.08), transparent 70%);
}
#gleam.lit { opacity: 1; }

#progress {
  position: fixed; top: 0; left: 0; height: 1px; z-index: 130; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--ember), var(--candle), var(--flame));
}

main { position: relative; z-index: 4; }

/* ---------- whisper type ---------- */
.whisper {
  font-family: var(--sans); font-weight: 400;
  font-size: 12px; letter-spacing: 0.26em; text-indent: 0.26em;
  text-transform: uppercase; color: var(--mist);
}
.whisper b { color: var(--flame); font-weight: 400; }

h2.title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4.3vw, 58px); line-height: 1.06;
  letter-spacing: 0.005em; text-wrap: balance; max-width: 19ch;
}
h2.title em, .creed em, .hero h1 em {
  font-style: italic; font-weight: 400; color: var(--flame);
  text-shadow: none;
}
.lede {
  margin-top: 26px; max-width: 52ch;
  font-size: clamp(16px, 1.45vw, 18px); line-height: 1.85; color: var(--smoke);
}
.lede .plain { color: var(--cream); font-weight: 400; }
.sec { padding: var(--act) 0; position: relative; scroll-margin-top: 96px; }
html { scroll-padding-top: 96px; }
.sec-head { margin-bottom: clamp(28px, 3.6vw, 48px); }
.sec-head .whisper { display: block; margin-bottom: 26px; }

.hairline {
  height: 1px; border: none;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  transform: scaleX(0.1); opacity: 0;
  transition: transform 2s var(--slow), opacity 2s var(--slow);
}
.hairline.in { transform: scaleX(1); opacity: 1; }

/* ---------- the invitation (buttons) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: baseline; gap: 14px;
  background: none; border: none; cursor: pointer; padding: 6px 2px;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(19px, 1.9vw, 25px); color: var(--flame);
  letter-spacing: 0.02em;
}
.btn::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--candle), transparent);
  transform: scaleX(0.35); transform-origin: left;
  transition: transform 0.9s var(--slow);
}
.btn:hover::after { transform: scaleX(1); }
.btn .arr { font-style: normal; transition: transform 0.7s var(--slow); }
.btn:hover .arr { transform: translateX(10px); }

.btn-ghost {
  font-family: var(--sans); font-weight: 400; font-size: 11px;
  letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; white-space: nowrap;
  color: var(--smoke); transition: color 0.6s;
}
.btn-ghost:hover { color: var(--flame); }

/* ---------- header ---------- */
header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.7s var(--slow), backdrop-filter 0.7s, transform 0.7s var(--slow);
}

header.stuck { background: rgba(246, 241, 230, 0.93); backdrop-filter: blur(14px); }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.markline {
  font-family: var(--sans); font-weight: 400; font-size: 11px;
  letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; color: var(--cream); white-space: nowrap;
}
.markline i { font-style: normal; color: var(--candle); }
nav.main { display: flex; gap: clamp(14px, 1.8vw, 30px); flex-wrap: nowrap; margin-left: clamp(14px, 2vw, 40px); }
#hdr .btn-ghost { margin-left: clamp(12px, 1.4vw, 24px); flex-shrink: 0; }
nav.main a {
  font-size: 10.5px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--mist); transition: color 0.5s; padding: 12px 2px; white-space: nowrap;
}
nav.main a:hover { color: var(--flame); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end; overflow: hidden;
  padding-bottom: clamp(44px, 7vh, 84px);
}
#gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.stater {
  position: absolute; z-index: 1; pointer-events: auto;   /* the coin is a toy */
  right: clamp(8px, 6vw, 130px); top: 47%;
  width: min(29vw, 440px);
  transform: translateY(-50%);
  animation: staterbreathe 7s ease-in-out infinite;
  filter: drop-shadow(0 30px 54px rgba(70, 50, 12, 0.28));
  cursor: crosshair;
}
.stater img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.coin3d {
  position: relative;
  transform: perspective(900px) rotateY(var(--tiltx, 0deg)) rotateX(var(--tilty, 0deg));
  transition: transform 0.5s var(--slow);
}

/* the machine layer: the same relief, struck in chrome, carrying circuitry */
.machine {
  position: absolute; inset: 0;
  /* a feathered dissolve: the chrome pours in over ~14% of the width */
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--mcut, 120%) - 11%), #000 calc(var(--mcut, 120%) + 11%));
  mask-image: linear-gradient(90deg, transparent calc(var(--mcut, 120%) - 11%), #000 calc(var(--mcut, 120%) + 11%));
}

.machine .coinmask {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: url('../assets/stater.webp'); -webkit-mask-size: 100% 100%;
  mask-image: url('../assets/stater.webp'); mask-size: 100% 100%;
}

/* the baked strike carries its own burst — the schematic coats stand down */
.machine .scanlines, .machine .circuits { display: none; }

/* holographic sheen over the chrome — the future has a spectrum */
.machine .holo {
  background: linear-gradient(118deg,
    rgba(120, 200, 255, 0.16) 8%, rgba(190, 150, 255, 0.13) 38%,
    rgba(120, 255, 214, 0.12) 64%, rgba(150, 180, 255, 0.14) 90%);
  background-size: 220% 220%;
  mix-blend-mode: screen;
  animation: holodrift 12s ease-in-out infinite alternate;
}
@keyframes holodrift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* fine scanlines rolling upward, barely there */
.machine .scanlines {
  background: repeating-linear-gradient(0deg,
    rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 3px);
  animation: scanroll 9s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes scanroll { to { transform: translateY(-3px); } }
.machine .circuits g[fill="none"] {
  stroke: rgba(150, 128, 76, 0.8);
  stroke-dasharray: 3 5;
  animation: currentflow 3.4s linear infinite;
}
@keyframes currentflow { to { stroke-dashoffset: -16; } }
.machine .circuits .nodes { fill: rgba(168, 124, 34, 0.9); }
.machine .circuits .nodes circle { animation: nodeblink 2.6s ease-in-out infinite; }
.machine .circuits .nodes circle:nth-child(2n) { animation-delay: 0.7s; }
.machine .circuits .nodes circle:nth-child(3n) { animation-delay: 1.3s; }
@keyframes nodeblink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* the android's eye wakes where Apollo's is */
/* the lens is baked into the visor now */
.machine .aeye { display: none;
  position: absolute; left: 69.4%; top: 37.9%;
  width: 6.4%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 244, 210, 0.95) 0%, rgba(214, 178, 108, 0.55) 34%, rgba(168, 124, 34, 0) 70%);
  animation: eyewake 2.2s ease-in-out infinite;
}
.machine .aeye::after {
  content: ''; position: absolute; inset: -46%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 40deg, rgba(214, 178, 108, 0.55) 60deg, transparent 80deg,
    transparent 180deg, rgba(150, 200, 255, 0.4) 210deg, transparent 240deg);
  -webkit-mask-image: radial-gradient(circle, transparent 56%, #000 60%, #000 72%, transparent 76%);
  mask-image: radial-gradient(circle, transparent 56%, #000 60%, #000 72%, transparent 76%);
  animation: iristurn 7.5s linear infinite;
}
@keyframes iristurn { to { transform: rotate(360deg); } }
@keyframes eyewake { 0%, 100% { opacity: 0.55; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.08); } }

/* the scanner's seam between god and machine */
.stater .motes {
  position: absolute; inset: -12% -8%; width: 116%; height: 124%;
  pointer-events: none;
}
.stater .seam {
  position: absolute; top: 9%; bottom: 9%; left: var(--mcut, 115%); width: 26px;
  margin-left: -13px; pointer-events: none; opacity: var(--seamo, 0);
  background: linear-gradient(90deg, transparent,
    rgba(214, 178, 108, 0.35) 30%, rgba(255, 243, 208, 0.85) 50%,
    rgba(150, 200, 255, 0.3) 70%, transparent);
  /* the light dies at both poles so the blade never overruns the coin */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  filter: blur(3px);
  transition: opacity 0.3s ease;
  animation: seampulse 2.6s ease-in-out infinite;
}
@keyframes seampulse { 0%, 100% { opacity: calc(var(--seamo, 0) * 0.7); } 50% { opacity: var(--seamo, 0); } }

/* a slow band of light crossing the relief, held to the coin's own silhouette */
.stater .sheen {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: url('../assets/stater.webp'); -webkit-mask-size: 100% 100%;
  mask-image: url('../assets/stater.webp'); mask-size: 100% 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 252, 240, 0.35) 46%, rgba(255, 252, 240, 0.0) 54%, transparent 70%);
  background-size: 260% 100%;
  animation: statersheen 8.5s var(--slow) infinite;
  mix-blend-mode: screen;
}
@keyframes statersheen {
  0%, 55% { background-position: 120% 0; }
  100% { background-position: -140% 0; }
}
@keyframes staterbreathe {
  0%, 100% { transform: translateY(calc(-50% + var(--drift, 0px))) scale(1) rotate(-0.4deg); }
  50% { transform: translateY(calc(-51% + var(--drift, 0px))) scale(1.012) rotate(0.4deg); }
}
/* below this the copy needs the whole width; the coin steps out */
@media (max-width: 1099px) { .stater { display: none; } }
@media (prefers-reduced-motion: reduce) { .stater, .stater .sheen, .machine .holo, .machine .scanlines, .machine .circuits g, .machine .aeye, .machine .aeye::after, .stater .motes {
  position: absolute; inset: -12% -8%; width: 116%; height: 124%;
  pointer-events: none;
}
.stater .seam { animation: none !important; } }
.hero .veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(246,241,230,0.85) 0%, rgba(246,241,230,0.45) 44%, transparent 62%),
    linear-gradient(180deg, rgba(246,241,230,0.5) 0%, transparent 30%, transparent 62%, rgba(246,241,230,0.92) 100%);
}
.hero .wrap { position: relative; z-index: 2; width: 100%; pointer-events: none; }
/* only the controls catch the hand — the rest lets it through to the coin and silk */
.hero .wrap a, .hero .wrap button { pointer-events: auto; }

.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 5.8vw, 84px); line-height: 1.04;
  letter-spacing: 0.005em; color: var(--cream);
  max-width: 16ch; text-wrap: balance;
}
.hero .every {
  margin-top: 10px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 2.6vw, 34px); color: var(--smoke);
}
.hero .every em { font-style: italic; color: var(--flame); }
.hero .h1row { display: flex; align-items: baseline; gap: clamp(18px, 3vw, 44px); flex-wrap: wrap; }
.hero .lede { margin-top: 26px; max-width: 52ch; text-wrap: pretty; }
.hero .whisper { color: var(--smoke); text-shadow: 0 1px 14px rgba(246, 241, 230, 0.9); }
.hero .cta-row { margin-top: 34px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero .down {
  position: absolute; right: var(--gut); bottom: 30px; z-index: 2;
  font-family: var(--sans); font-size: 9.5px; font-weight: 400;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--shadow);
  writing-mode: vertical-rl;
}

/* ---------- manifesto: lines lit one by one ---------- */
.creed-list { display: flex; flex-direction: column; gap: clamp(22px, 3.4vh, 40px); }
.creed {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 5.4vw, 72px); line-height: 1.12; text-wrap: balance;
  color: var(--mist);
  transition: color 1.4s var(--slow), text-shadow 1.4s var(--slow);
}
.creed.lit { color: var(--cream); }
.creed.lit em { text-shadow: 0 0 30px rgba(168, 124, 34, 0.22); }

/* ---------- stats: three promises in one line ---------- */
.stats-row { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: rgba(255,255,255,0.45); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); padding: clamp(26px, 3.4vw, 44px) var(--gut); max-width: var(--max); margin: 0 auto; }
.stat-cell b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4vw, 56px); line-height: 1; color: var(--flame);
}
.stat-cell span {
  display: block; margin-top: 10px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist); line-height: 1.7;
}
@media (max-width: 700px) { .stats-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- the ribbon: plain words, moving slowly ---------- */
.ribbon {
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  overflow: hidden; padding: 16px 0;
}
.ribbon-track {
  display: flex; width: max-content;
  animation: ribbon 80s linear infinite;
}
.ribbon-half { display: flex; align-items: baseline; gap: 46px; padding-right: 46px; }
.ribbon-track span {
  font-family: var(--sans); font-weight: 400; font-size: 10.5px;
  letter-spacing: 0.36em; text-indent: 0.36em; text-transform: uppercase;
  color: var(--smoke); white-space: nowrap;
}
.ribbon-track i { font-style: normal; color: var(--candle); }
@keyframes ribbon { to { transform: translateX(-50%); } }

/* ---------- desires ---------- */
.desires { display: flex; flex-direction: column; }
.desire {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line-2);
  padding: clamp(26px, 3.4vw, 44px) 0;
  display: grid; grid-template-columns: 3.4ch minmax(0, 1fr) clamp(150px, 17vw, 230px);
  gap: clamp(18px, 4vw, 60px); align-items: start;
  transition: padding-left 0.9s var(--slow);
}
.desire:last-child { border-bottom: 1px solid var(--line-2); }
.desire::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 200% at 0% 50%, rgba(214, 178, 108, 0.07), transparent 60%);
  opacity: 0; transition: opacity 0.9s var(--slow);
}
.desire:hover { padding-left: clamp(10px, 1.6vw, 26px); }
.desire:hover::before { opacity: 1; }
.desire .no {
  font-family: var(--sans); font-weight: 300; font-size: 11px;
  letter-spacing: 0.3em; color: var(--mist); padding-top: 0.55em;
}
.desire h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4.6vw, 60px); line-height: 1.05;
}
.desire h3 em { font-style: italic; color: var(--flame); transition: letter-spacing 0.9s var(--slow); }
.desire:hover h3 em { letter-spacing: 0.035em; }
.desire p { max-width: 34ch; color: var(--smoke); font-size: 14px; line-height: 1.8; }
.desire .dtag {
  display: block; margin: 8px 0 12px;
  font-family: var(--sans); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; color: var(--flame);
}
canvas.gem {
  width: 100%; aspect-ratio: 1; display: block;
  cursor: grab; touch-action: pan-y;
  background: radial-gradient(46% 26% at 50% 76%, rgba(28, 22, 12, 0.14), transparent 70%);
  transition: filter 0.9s var(--slow);
}
canvas.gem:hover { filter: brightness(1.06); }
canvas.gem.held { cursor: grabbing; }
@media (max-width: 800px) {
  .desire { grid-template-columns: auto 1fr; }
  canvas.gem { grid-column: 2; width: min(60vw, 220px); justify-self: start; }
}

/* ---------- the reveal (before/after) ---------- */
.case { margin-bottom: clamp(40px, 6vw, 70px); }
.case .head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.case .head h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.8vw, 36px); }
.case .head .tag {
  font-family: var(--sans); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--mist);
}
.ba {
  position: relative; overflow: hidden; border-radius: 2px;
  border: 1px solid var(--line);
  cursor: ew-resize; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.ba .side { padding: clamp(26px, 3.4vw, 44px); min-height: 210px; }
.ba .side .k {
  font-family: var(--sans); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0.34em; text-transform: uppercase; display: block; margin-bottom: 22px;
}
.ba .before { background: #070605; }
.ba .before .k { color: var(--mist); }
.ba .after {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, #0E0B06, #090704);
  clip-path: inset(0 0 0 var(--cut, 78%));
}
.ba .after .k {
  color: var(--flame);
  position: absolute; top: clamp(26px, 3.4vw, 44px); right: clamp(26px, 3.4vw, 44px);
}
.ba .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 22px; }
.ba .stat b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 48px); line-height: 1; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.ba .before .stat b { color: #8F857A; }
.ba .after .stat b { color: var(--flame); }
.ba .stat span { font-size: 12px; color: var(--smoke); line-height: 1.5; display: block; margin-top: 8px; }
.ba .blade {
  position: absolute; top: 0; bottom: 0; left: var(--cut, 78%); width: 1px; margin-left: -0.5px;
  background: var(--candle); pointer-events: none;
  box-shadow: 0 0 24px rgba(214, 178, 108, 0.5);
}
.ba .blade i {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--candle); background: rgba(3, 3, 4, 0.7);
  color: var(--flame); backdrop-filter: blur(4px);
  display: grid; place-items: center; font-size: 13px;
  animation: bladewait 3.4s ease-in-out infinite;
}
@keyframes bladewait {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 178, 108, 0.0); }
  50% { box-shadow: 0 0 26px 2px rgba(214, 178, 108, 0.28); }
}
.case .what { margin-top: 20px; color: var(--smoke); font-size: 14px; line-height: 1.85; max-width: 72ch; }
.case .what b { color: var(--cream); font-weight: 400; }
.proof-note {
  font-family: var(--sans); font-size: 9.5px; font-weight: 400;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--mist); margin-top: 10px;
}

/* ---------- departments: choose your world ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(30px, 4vw, 48px); }
.tabs button {
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: 0.16em; text-indent: 0.16em; text-transform: uppercase;
  color: var(--smoke); background: rgba(255,255,255,0.55); cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 2px; padding: 14px 18px;
  transition: color 0.5s, border-color 0.5s, background 0.5s;
}
.tabs button:hover { color: var(--flame); }
.tabs button[aria-selected="true"] {
  color: var(--flame); border-color: var(--line);
  background: rgba(168, 124, 34, 0.07);
}
.dept[hidden] { display: none; }
.ba2 {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 52px); align-items: start;
  border: 1px solid var(--line); border-radius: 2px;
  padding: clamp(24px, 3.4vw, 44px);
  background: linear-gradient(120deg, #FFFFFF 46%, #FBF6EB 54%, #FFFDF6); box-shadow: 0 18px 50px -30px rgba(28, 22, 12, 0.18);
}
.ba2 .k {
  font-family: var(--sans); font-weight: 400; font-size: 11.5px;
  letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 18px;
}
.ba2 .before .k { color: var(--mist); }
.ba2 .after .k { color: var(--flame); }
.ba2 ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.ba2 li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.6; min-height: 3.1em; padding-bottom: 10px; border-bottom: 1px solid rgba(28,22,12,0.06); }
.ba2 li:last-child { border-bottom: none; }
.ba2 .before li { color: var(--smoke); }
.ba2 .after li { color: var(--cream); }
.ba2 li::before { content: '—'; position: absolute; left: 0; }
.ba2 .before li::before { color: var(--shadow); }
.ba2 .after li::before { color: var(--candle); }
.ba2 .arrow {
  align-self: center;
  font-family: var(--serif); font-size: clamp(26px, 3vw, 44px); color: var(--flame);
  text-shadow: 0 0 30px rgba(243, 214, 149, 0.3);
}
.outcome {
  margin-top: 18px; font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 1.7vw, 21px); color: var(--smoke); max-width: 70ch;
}
.outcome::before { content: '· '; color: var(--candle); }
@media (max-width: 760px) {
  .ba2 { grid-template-columns: 1fr; }
  .ba2 .arrow { transform: rotate(90deg); justify-self: center; align-self: auto; }
}

/* ---------- tiers: every size of company ---------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 2vw, 26px); }
.tier {
  border: 1px solid var(--line-2); border-radius: 2px;
  padding: clamp(24px, 3vw, 38px);
  display: flex; flex-direction: column;
  transition: border-color 0.7s var(--slow), background 0.7s var(--slow);
}
.tier:hover { border-color: var(--line); background: rgba(255, 255, 255, 0.75); box-shadow: 0 22px 54px -34px rgba(28, 22, 12, 0.22); }
.tier canvas.gem { width: clamp(110px, 9vw, 150px); align-self: flex-start; margin-bottom: 6px; }
.tier .tk {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 2vw, 27px); color: var(--cream); line-height: 1.2;
}
.tier .tsize {
  font-family: var(--sans); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--flame);
  margin: 8px 0 18px; display: block;
}
.tier ul { list-style: none; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tier li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.65; color: var(--smoke); }
.tier li::before { content: '—'; position: absolute; left: 0; color: var(--candle); }
.tier .tnote {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-2);
  font-family: var(--serif); font-style: italic; font-size: 16.5px; color: var(--flame);
}

/* ---------- qualification: a fit, or honestly not ---------- */
.qual {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3.4vw, 52px);
  padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-2);
}
.qual .qk {
  display: block; margin-bottom: 18px;
  font-family: var(--sans); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--flame);
}
.qual ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.qual li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.7; color: var(--smoke); }
.qual .qcol:first-child li::before {
  content: '✓'; position: absolute; left: 0; color: var(--candle); font-weight: 600;
}
.qual .qcol:last-child li::before {
  content: '✕'; position: absolute; left: 0; color: var(--mist);
}
.qual .qcol:last-child .qk { color: var(--mist); }

/* ---------- what you can commission ---------- */
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 26px); }
.offer {
  border: 1px solid var(--line-2); border-radius: 2px;
  padding: clamp(26px, 3vw, 40px);
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.4);
  transition: border-color 0.7s var(--slow), background 0.7s var(--slow), box-shadow 0.7s var(--slow);
}
.offer:hover {
  border-color: var(--line); background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 22px 54px -34px rgba(28, 22, 12, 0.22);
}
.offer .on {
  font-family: var(--sans); font-weight: 300; font-size: 10.5px;
  letter-spacing: 0.3em; color: var(--mist);
}
.offer h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(23px, 2.2vw, 30px); margin: 14px 0 10px; line-height: 1.15;
}
.offer .oshape {
  display: block; margin-bottom: 18px;
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--flame);
}
.offer p { color: var(--smoke); font-size: 15.5px; line-height: 1.75; flex: 1; }
.offer .ofor {
  display: block; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2);
  font-family: var(--serif); font-style: italic; font-size: 15.5px; color: var(--flame);
}

/* the stack we plug into — competence, stated plainly */
.stack {
  margin-top: clamp(26px, 3vw, 40px); padding: clamp(22px, 2.6vw, 34px) clamp(24px, 3vw, 40px);
  border: 1px solid var(--line); border-radius: 2px;
  background: linear-gradient(100deg, rgba(168, 124, 34, 0.05), transparent 62%);
}
.stack .sk {
  display: block; margin-bottom: 12px;
  font-family: var(--sans); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--flame);
}
.stack p { color: var(--smoke); font-size: 15.5px; line-height: 1.85; max-width: 62ch; }

/* ---------- honest answers ---------- */
.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(26px, 3.2vw, 52px); }
.qai h3 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(20px, 2vw, 26px); color: var(--cream); margin-bottom: 12px;
}
.qai p { color: var(--smoke); font-size: 15.5px; line-height: 1.8; }

/* ---------- intake: what happens after the form ---------- */
.intake { margin-top: 28px; list-style: none; counter-reset: intake; display: flex; flex-direction: column; gap: 14px; }
.intake li {
  counter-increment: intake; position: relative; padding-left: 34px;
  font-size: 15.5px; line-height: 1.7; color: var(--smoke);
}
.intake li::before {
  content: counter(intake); position: absolute; left: 0; top: 0;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em; color: var(--candle);
  border: 1px solid var(--line); border-radius: 50%;
  width: 22px; height: 22px; display: grid; place-items: center;
}
.intake b { color: var(--cream); font-weight: 400; }

/* ---------- how: four moves ---------- */
.moves { display: flex; flex-direction: column; }
.move {
  border-top: 1px solid var(--line-2);
  padding: clamp(24px, 3vw, 38px) 0;
  display: grid; grid-template-columns: 60px clamp(120px, 16vw, 200px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px); align-items: baseline;
}
.move:last-child { border-bottom: 1px solid var(--line-2); }
.move span {
  font-family: var(--sans); font-weight: 300; font-size: 11px;
  letter-spacing: 0.3em; color: var(--mist);
}
.move h3 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(24px, 2.6vw, 34px); color: var(--flame);
}
.move p { color: var(--smoke); font-size: 16px; line-height: 1.8; max-width: 58ch; }
@media (max-width: 700px) { .move { grid-template-columns: 40px 1fr; } .move p { grid-column: 2; } }

/* ---------- the invitation ---------- */
.invite { position: relative; overflow: hidden; }
.invite .halo {
  position: absolute; left: 50%; bottom: -40%; transform: translateX(-50%);
  width: min(110vw, 1000px); aspect-ratio: 1.6; pointer-events: none;
  background: radial-gradient(ellipse, rgba(168, 124, 34, 0.12), transparent 65%);
}
.invite-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(40px, 6vw, 100px); }
.invite-side p { margin-top: 26px; color: var(--smoke); line-height: 1.85; max-width: 40ch; }
.direct { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.direct a {
  font-family: var(--sans); font-size: 14.5px; letter-spacing: 0.06em;
  color: var(--smoke); width: fit-content; transition: color 0.5s; padding: 9px 0;
}
.direct a:hover { color: var(--flame); }

form { display: flex; flex-direction: column; gap: 30px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field label {
  font-family: var(--sans); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--mist);
  transition: color 0.6s var(--slow);
}
.field:focus-within label { color: var(--flame); }
.field input, .field textarea {
  background: transparent; border: none; border-bottom: 1px solid var(--line-2);
  color: var(--cream); font-family: var(--serif); font-size: 21px; font-weight: 400;
  padding: 10px 0; transition: border-color 0.7s var(--slow);
}
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--flame);
  box-shadow: 0 1px 0 0 var(--candle);
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: 1px solid var(--candle); outline-offset: 4px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--mist); font-style: italic; }
.field.bad input, .field.bad textarea { border-bottom-color: #B0563B; }
form .btn { align-self: flex-start; }
.fineprint {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mist); line-height: 2;
}
.sent { display: none; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--flame); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line-2); padding: 50px 0 60px; position: relative; z-index: 4; }
footer .wrap { display: block; }
footer .meta {
  font-family: var(--sans); font-size: 9px; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--mist);
}
footer nav { display: flex; gap: 28px; flex-wrap: wrap; }
footer nav a { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--smoke); padding: 12px 2px; display: inline-block; }
footer nav a:hover { color: var(--flame); }

/* ---------- choreography ---------- */
.rise { opacity: 0; transform: translateY(30px); filter: blur(6px);
  transition: opacity 1.6s var(--slow), transform 1.6s var(--slow), filter 1.6s var(--slow); }
.rise.in { opacity: 1; transform: none; filter: blur(0); }
.rise.d1 { transition-delay: 0.15s; } .rise.d2 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .rise { opacity: 1; transform: none; filter: none; }
  .creed { color: var(--cream); }
  html { scroll-behavior: auto; }
}

@media (max-width: 900px) {
  nav.main { gap: 16px; }
  nav.main a { font-size: 9px; letter-spacing: 0.2em; }
  header .wrap { gap: 10px; }
  .markline { font-size: 9.5px; letter-spacing: 0.28em; }
}
@media (max-width: 560px) {
  .ba .stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px; }
  .ba .stat b { font-size: clamp(22px, 7vw, 30px); }
  .ba .side { min-height: 240px; }
  /* a vertical blade through stacked lines splices words; phones crossfade instead */
  .ba { cursor: pointer; }
  .ba .blade { display: none; }
  .ba .after { clip-path: none !important; opacity: 0; transition: opacity 0.9s var(--slow); }
  .ba.open .after { opacity: 1; }
  .ba .after .k { position: static; }
  .ba::after {
    content: 'Tap · before ⇄ after';
    position: absolute; right: 14px; bottom: 10px;
    font-family: var(--sans); font-size: 9px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--flame);
  }
}
/* the jewels stand still for those who asked for stillness — one lit frame */
@media (prefers-reduced-motion: reduce) {
  canvas.gem { cursor: default; }
}


/* ---------- hero columns ----------
   Above 1100px the coin holds the right of the viewport, so the copy keeps
   its own column. Declared last: earlier attempts lost to `.hero .lede`'s
   own max-width at equal specificity. */
@media (min-width: 1100px) {
  .hero .whisper,
  .hero h1,
  .hero .every,
  .hero .lede,
  .hero .cta-row { max-width: min(58%, 760px); }
}


/* ============================================================
   LIFE — the page answers when it is looked at and touched.
   Every rule here is decoration: it must never be load-bearing.
   ============================================================ */

/* the three crafts, spoken under the promise */
.hero .crafts {
  margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--sans); font-weight: 400; font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--mist);
}
.hero .crafts i { font-style: normal; color: var(--candle); }
.hero .crafts span { position: relative; }

/* the craft each engagement belongs to */
.offer .ocraft {
  display: block; margin-top: 12px;
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--flame);
}

/* ---- gold foil sweeps across a card when the hand arrives ---- */
.offer, .tier, .qai { position: relative; overflow: hidden; isolation: isolate; }
.offer::after, .tier::after {
  content: ''; position: absolute; top: 0; left: 0; width: 55%; height: 100%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(214, 178, 108, 0.20), transparent);
  opacity: 0; transform: translateX(-220%) skewX(-16deg);
  transition: transform 1.1s var(--slow), opacity 0.3s var(--slow);
  pointer-events: none;
}
.offer:hover::after, .tier:hover::after { opacity: 1; transform: translateX(300%) skewX(-16deg); }

/* the roman numeral lifts and gilds under the hand */
.offer .on { display: inline-block; transition: transform 0.7s var(--slow), color 0.7s; }
.offer:hover .on { transform: translateY(-3px); color: var(--candle); }
.offer:hover .ofor { color: var(--candle); }

/* ---- the answers open a hairline when read ---- */
.qai { padding-top: 22px; }
.qai::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px;
  background: var(--line-2);
}
.qai::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--candle), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--slow);
}
.qai.in::after { transform: scaleX(1); }
.qai:nth-child(2)::after { transition-delay: .12s; }
.qai:nth-child(3)::after { transition-delay: .24s; }
.qai:nth-child(4)::after { transition-delay: .36s; }
.qai:nth-child(5)::after { transition-delay: .48s; }
.qai:nth-child(6)::after { transition-delay: .60s; }
.qai h3 { transition: color 0.6s; }
.qai:hover h3 { color: var(--flame); }

/* ---- the stats strike like struck numerals ---- */
.stat-cell { position: relative; }
.stat-cell b { transition: color 0.8s; }
.stats-row:hover .stat-cell b { color: var(--flame); }
.stat-cell::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 46px; height: 1px;
  background: var(--candle); transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--slow);
}
.stat-cell.in::after { transform: scaleX(1); }
.stat-cell.d1::after { transition-delay: .15s; }
.stat-cell.d2::after { transition-delay: .3s; }

/* ---- department tabs: the chosen one carries a lit underline ---- */
.tabs button { position: relative; overflow: hidden; }
.tabs button::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--candle); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--slow);
}
.tabs button[aria-selected="true"]::after { transform: scaleX(1); }
/* a panel arrives by wiping in from the left */
.dept.swap { animation: deptwipe 0.8s var(--slow); }
@keyframes deptwipe {
  from { opacity: 0; transform: translateY(10px); clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}

/* ---- before/after lists: the after side lights row by row ---- */
.ba2 .after li { transition: color 0.6s var(--slow), transform 0.6s var(--slow); }
.ba2:hover .after li { color: var(--cream); transform: translateX(3px); }
.ba2:hover .after li:nth-child(2) { transition-delay: .05s; }
.ba2:hover .after li:nth-child(3) { transition-delay: .10s; }
.ba2:hover .after li:nth-child(4) { transition-delay: .15s; }
.ba2 .arrow { transition: transform 0.9s var(--slow); }
.ba2:hover .arrow { transform: translateX(6px); }

/* ---- the moves count themselves in ---- */
.move { position: relative; }
.move::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--candle), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--slow);
}
.move.in::after { transform: scaleX(1); }
.move:nth-child(2)::after { transition-delay: .16s; }
.move:nth-child(3)::after { transition-delay: .32s; }
.move:nth-child(4)::after { transition-delay: .48s; }
.move h3 { transition: transform 0.7s var(--slow); }
.move:hover h3 { transform: translateX(5px); }

/* ---- links and fields answer the hand ---- */
.direct a, footer nav a { position: relative; }
.direct a::after, footer nav a::after {
  content: ''; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1px;
  background: var(--candle); transform: scaleX(0); transform-origin: right;
  transition: transform 0.6s var(--slow);
}
.direct a:hover::after, footer nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.field input, .field textarea { transition: border-color 0.7s var(--slow), background 0.7s var(--slow); }
.field:focus-within input, .field:focus-within textarea { background: rgba(255, 255, 255, 0.55); }

/* ---- the stack line glows as it enters ---- */
.stack { position: relative; overflow: hidden; }
.stack::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(214, 178, 108, 0.16) 50%, transparent 65%);
  background-size: 240% 100%; background-position: 130% 0;
}
.stack.in::after { animation: stacksheen 2.4s var(--slow) 0.3s; }
@keyframes stacksheen { to { background-position: -130% 0; } }

/* ---- the invitation halo breathes ---- */
.invite .halo { animation: halobreathe 11s ease-in-out infinite; }
@keyframes halobreathe {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .offer::after, .tier::after, .stack::after, .invite .halo { animation: none !important; transition: none !important; }
  .qai::after, .move::after, .stat-cell::after { transform: scaleX(1) !important; }
  .dept.swap { animation: none !important; }
}


/* ============ pictograms: the eye understands before the mind reads ============ */
.ic {
  width: 30px; height: 30px; flex-shrink: 0;
  stroke: var(--candle); fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.offer .ic { display: block; margin-bottom: 14px; }
.move .ic { display: block; margin-bottom: 10px; }
.ba2 .k { display: flex; align-items: center; gap: 10px; }
.ba2 .k .ic { width: 24px; height: 24px; }
.ba2 .before .k .ic { stroke: var(--mist); }

/* craft chips in the hero: three badges the eye can hold */
.hero .crafts { gap: 10px; }
/* no boxes: the crafts speak the page's own whisper — caps and gold middots */
.hero .crafts { gap: 0; row-gap: 12px; margin-top: 22px; }
.hero .crafts .chip {
  display: inline-flex; align-items: center; gap: 10px;
  border: none; background: none; padding: 0;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.22em; text-indent: 0;
  color: var(--smoke); white-space: nowrap;
  transition: color 0.5s var(--slow);
}
.hero .crafts .chip:hover { color: var(--flame); }
.hero .crafts .chip:not(:first-child)::before {
  content: '·'; color: var(--flame); font-size: 19px;
  margin: 0 20px; font-weight: 400;
}
.hero .crafts .chip .ic { width: 18px; height: 18px; }

/* the header CTA is a button, not a whisper */
.btn-ghost {
  border: 1px solid var(--line); border-radius: 2px; padding: 13px 20px;
}

/* answers and moves welcome the whole hand */
.qai { transition: background 0.6s var(--slow); border-radius: 2px; }
.qai:hover { background: rgba(255, 255, 255, 0.6); }
.move { transition: background 0.6s var(--slow); }
.move:hover { background: rgba(255, 255, 255, 0.45); }

/* the primary action is unmistakably a button — everywhere, not only in the form */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-style: normal; font-weight: 600;
  font-size: 13.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #FFF9EA; background: linear-gradient(120deg, var(--candle), var(--flame));
  border: none; border-radius: 2px; padding: 16px 26px; cursor: pointer;
  transition: transform 0.4s var(--slow), box-shadow 0.4s var(--slow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(138, 102, 20, 0.55); }

/* --- border beam: a gold glint runs the rim of every primary CTA --- */
@property --beam {
  syntax: '<angle>'; inherits: false; initial-value: 0deg;
}
.btn-primary { position: relative; isolation: isolate; }
.btn-primary::after {
  content: ""; position: absolute; inset: -3px; z-index: -1;
  border-radius: 5px; padding: 2.5px;
  background: conic-gradient(from var(--beam),
    transparent 0deg, transparent 250deg,
    rgba(255, 217, 138, 0) 262deg,
    #FFD98A 300deg, #FFF7E0 332deg, #E8C97E 348deg,
    rgba(255, 217, 138, 0) 356deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  filter: drop-shadow(0 0 5px rgba(232, 201, 126, 0.85));
  animation: beamRun 2.6s linear infinite;
  pointer-events: none;
}
@keyframes beamRun { to { --beam: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn-primary::after { animation: none; content: none; } }
.btn-primary .arr { transition: transform 0.4s var(--slow); }
.btn-primary:hover .arr { transform: translateX(4px); }

/* the form is the destination: it stands on a card, and the button looks like one */
#consultForm {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line-2); border-radius: 3px;
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 24px 60px -38px rgba(28, 22, 12, 0.25);
}
#consultForm .btn {
  font-family: var(--sans); font-style: normal; font-weight: 500;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #FFF9EA; background: linear-gradient(120deg, var(--candle), var(--flame));
  border-radius: 2px; padding: 17px 30px;
  transition: transform 0.4s var(--slow), box-shadow 0.4s var(--slow);
}
#consultForm .btn::after { display: none; }
#consultForm .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(138, 102, 20, 0.55); }

/* tablets: the hero holds its content, not half a screen of silk */
@media (max-width: 1099px) {
  .hero { min-height: auto; padding-top: 150px; }
}
/* phones: the name and the CTA always fit and always reachable */
@media (max-width: 900px) {
  nav.main { display: none; }
  .markline { font-size: 10px; letter-spacing: 0.22em; text-indent: 0.22em; }
  .btn-ghost { padding: 12px 14px; font-size: 10px; letter-spacing: 0.18em; }
  header .wrap { gap: 8px; }
}


/* ============ audit closures ============ */
/* the coin sleeps off screen — every css animation included */
.stater.asleep, .stater.asleep .sheen, .stater.asleep .machine .holo,
.stater.asleep .machine .scanlines, .stater.asleep .machine .aeye,
.stater.asleep .machine .aeye::after, .stater.asleep .seam,
.stater.asleep .machine .circuits g { animation-play-state: paused !important; }
.stater { cursor: pointer; }

/* in-body next steps */
.actcta { margin-top: clamp(26px, 3vw, 40px); }

/* rows register even when a title wraps */
.offer h3 { min-height: 2.3em; }
.offer .oshape { min-height: 2.1em; }
.tier .tk { min-height: 2.35em; }

/* the invitation stands straight: columns start together, halo behind it */
.invite-grid { align-items: start; }
.invite .halo { bottom: -6%; }
#contact .title { max-width: 24ch; }

/* quiet idle life for what is on screen */
@keyframes anchorshimmer { 0%, 88%, 100% { opacity: 1; } 94% { opacity: 0.55; } }
.stat-cell.in::after { animation: anchorshimmer 7s ease-in-out infinite; }
@keyframes arrowbreathe { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.ba2 .arrow { animation: arrowbreathe 4.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .stat-cell.in::after, .ba2 .arrow { animation: none !important; }
}

/* footer links: colour and underline move together */
footer nav a { transition: color 0.3s; }
footer nav a::after { transition: transform 0.3s var(--slow); }

/* moves: icon sits beside the numeral cleanly */
.move > div .ic { margin-bottom: 8px; }


/* "You get" — the practical spine of every offer */
.oget { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.oget > span {
  display: block; margin-bottom: 10px;
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--flame);
}
.oget ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.oget li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.55; color: var(--smoke); }
.oget li::before { content: '✓'; position: absolute; left: 0; color: var(--candle); font-weight: 600; }
.offer p { flex: 0 0 auto; }
.offer .oget { flex: 1; }


/* ============ symmetry: the page stands on its centre line ============ */
.sec-head { text-align: center; }
.sec-head h2.title { margin-left: auto; margin-right: auto; }
.sec-head .lede { margin-left: auto; margin-right: auto; }
.tabs { justify-content: center; }
.actcta { text-align: center; }
.outcome { text-align: center; margin-left: auto; margin-right: auto; }
#philosophy { text-align: center; }
#philosophy .creed { text-wrap: balance; }
.stats-grid { text-align: center; }
.stat-cell::after { left: 50%; transform: translateX(-50%) scaleX(0); }
.stat-cell.in::after { transform: translateX(-50%) scaleX(1); }

/* the coin says whose face it carries */
.coinname {
  margin-top: 22px; text-align: center;
  font-family: var(--sans); font-weight: 500; font-size: clamp(14px, 1.2vw, 17px);
  letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase;
  color: var(--cream);
}
.coinname i { font-style: normal; color: var(--flame); }


/* ============ the fire in the hand: a flame for a cursor ============ */
/* the hotspot is the flame's tip (16,3); text fields keep their I-beam */
a, button, [role="button"], [role="tab"], label, summary,
.btn, .btn-primary, .btn-ghost, .tabs button, canvas.gem, .stater { cursor: pointer; }
input:not([type="submit"]), textarea { cursor: text; }
@media (pointer: coarse) {
  html, body, a, button, canvas.gem, .stater { cursor: auto; }
}


/* ============ domains: six doors, one house style ============ */
.domains {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.dom {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line-2); border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  padding: clamp(24px, 2.8vw, 36px);
  text-align: left;
  transition: border-color 0.7s var(--slow), background 0.7s var(--slow), box-shadow 0.7s var(--slow);
}
.dom:hover {
  border-color: var(--line); background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 22px 54px -34px rgba(28, 22, 12, 0.22);
}
.dom::after {
  content: ''; position: absolute; top: 0; left: 0; width: 55%; height: 100%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(214, 178, 108, 0.20), transparent);
  opacity: 0; transform: translateX(-220%) skewX(-16deg);
  transition: transform 1.1s var(--slow), opacity 0.3s var(--slow);
  pointer-events: none;
}
.dom:hover::after { opacity: 1; transform: translateX(300%) skewX(-16deg); }
.dom .ic { display: block; margin-bottom: 14px; }
/* ten doors in a three-wide grid: the last one stands centered, not stranded */
.dom h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 2vw, 26px); margin-bottom: 10px; line-height: 1.2;
}
.dom p { color: var(--smoke); font-size: 15.5px; line-height: 1.7; }


/* ============ mobile polish: the coin returns, type floors, density ============ */
@media (max-width: 1099px) {
  /* the signature toy, centered under the hero copy — tap either half */
  .hero { display: flex; flex-direction: column; justify-content: center; }
  .hero .wrap { order: 1; }
  .hero .stater {
    display: block; position: relative; right: auto; top: auto; order: 2;
    transform: none; animation: none; margin: 38px auto 0;
    width: min(74vw, 380px);
    cursor: pointer;
  }
  .hero .down { display: none; }
}
@media (max-width: 700px) {
  :root { --act: clamp(52px, 10vw, 76px); }
  /* crafts: a clean wrapped row, no orphan middots */
  .hero .crafts { display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 24px; }
  .hero .crafts .chip:not(:first-child)::before { content: none; margin: 0; }
  /* legibility floors for the smallest voices */
  .whisper { font-size: 12px; letter-spacing: 0.2em; }
  .btn-ghost { font-size: 11px; }
  .qk { font-size: 11.5px; }
  .ocraft { font-size: 12px; }
  .tsize { font-size: 12.5px; }
  .header .markline, .markline { padding: 10px 0; }
  .offer, .dom { padding: 24px 18px; }
  .sec-head { margin-bottom: 24px; }
  /* reveals: crisp on phones — no blur while scrolling */
  .rise { filter: none; transform: translateY(18px);
    transition: opacity 0.9s var(--slow), transform 0.9s var(--slow); }
  .rise.in { filter: none; }
}


/* ============ wayfinding: scrollspy, mobile nav row, back-to-top ============ */
header.stuck { box-shadow: 0 1px 0 var(--line-2); }
nav.main a { position: relative; }
nav.main a.on { color: var(--flame); }
nav.main a.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: linear-gradient(90deg, var(--candle), transparent);
}

@media (max-width: 900px) {
  /* the section nav returns as a slim scrollable row under the name */
  header .wrap { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 10px; row-gap: 6px; }
  nav.main {
    display: flex; order: 3; width: 100%; overflow-x: auto; gap: 22px; padding: 2px 0 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
    scrollbar-width: none;
  }
  nav.main::-webkit-scrollbar { display: none; }
  nav.main a { font-size: 10px; letter-spacing: 0.18em; white-space: nowrap; padding: 4px 0; }
  .sec { scroll-margin-top: 128px; }
}

#totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(246, 241, 230, 0.82);
  backdrop-filter: blur(8px); color: var(--flame);
  display: grid; place-items: center; font-size: 17px; line-height: 1;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity 0.5s var(--slow), transform 0.5s var(--slow), color 0.4s;
  cursor: pointer;
}
#totop.on { opacity: 1; pointer-events: auto; transform: none; }
#totop:hover { color: var(--ember); }


/* ============ the three orders: three houses, one fire ============ */
.orders {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.order {
  display: flex; flex-direction: column;
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line-2); border-radius: 2px;
  background: rgba(255, 255, 255, 0.42);
  padding: clamp(26px, 3vw, 40px);
  border-top: 2px solid var(--candle);
  transition: border-color 0.7s var(--slow), background 0.7s var(--slow),
              box-shadow 0.7s var(--slow), transform 0.7s var(--slow);
}
.order:hover {
  border-color: var(--line); background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 26px 60px -36px rgba(28, 22, 12, 0.26);
  transform: translateY(-3px);
}
.order::after {
  content: ''; position: absolute; top: 0; left: 0; width: 55%; height: 100%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(214, 178, 108, 0.20), transparent);
  opacity: 0; transform: translateX(-220%) skewX(-16deg);
  transition: transform 1.1s var(--slow), opacity 0.3s var(--slow);
  pointer-events: none;
}
.order:hover::after { opacity: 1; transform: translateX(300%) skewX(-16deg); }
.order .onum {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 34px; line-height: 1; color: var(--flame); margin-bottom: 18px;
}
.order h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; margin-bottom: 6px;
}
.order h3 em { font-style: italic; color: var(--flame); }
.order .osub {
  display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mist); margin-bottom: 16px;
}
.order p { color: var(--smoke); font-size: 15.5px; line-height: 1.75; margin-bottom: 18px; }
.order .otags {
  display: block; font-size: 12px; letter-spacing: 0.06em; color: var(--flame);
  margin-bottom: 22px;
}
.order .olink {
  font-family: var(--serif); font-style: italic; font-size: 17.5px; color: var(--flame);
}
.order .olink .arr { display: inline-block; transition: transform 0.6s var(--slow); }
.order .olink:hover .arr { transform: translateX(8px); }


/* ============ the closing colophon ============ */
footer { border-top: 1px solid var(--line-2); padding: clamp(44px, 5vw, 72px) 0 28px; }
footer .fgrid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 48px); margin-bottom: 40px;
}
footer .fmark {
  display: block; font-family: var(--sans); font-weight: 400; font-size: 12px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream); margin-bottom: 10px;
}
footer .fmark i { font-style: normal; color: var(--flame); }
footer .ftag {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: 19px; color: var(--flame);
}
footer .fhead {
  display: block; font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--mist); margin-bottom: 14px;
}
footer .fcol a {
  display: block; font-size: 14px; color: var(--smoke);
  padding: 5px 0; transition: color 0.5s var(--slow);
}
footer .fcol a:hover { color: var(--flame); }
footer .fbase {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  border-top: 1px solid var(--line-2); padding-top: 20px;
  font-size: 12px; color: var(--mist); flex-wrap: wrap;
}
footer .fbase a { color: var(--flame); font-size: 12px; letter-spacing: 0.08em; }
footer .fbase a:hover { color: var(--ember); }
@media (max-width: 900px) {
  footer .fgrid { grid-template-columns: 1fr 1fr; }
  footer .fbrand { grid-column: 1 / -1; }
}


/* ============ answers fold on phones ============ */
@media (max-width: 700px) {
  .qai h3 { position: relative; padding-right: 34px; cursor: pointer; }
  .qai h3::after {
    content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-54%);
    font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--flame);
    transition: transform 0.5s var(--slow);
  }
  .qai.open h3::after { content: '\2212'; }
  .qai p {
    max-height: 0; overflow: hidden; opacity: 0; margin: 0;
    transition: max-height 0.6s var(--slow), opacity 0.45s var(--slow), margin 0.45s var(--slow);
  }
  .qai.open p { max-height: 420px; opacity: 1; margin-top: 10px; }
}


/* ============ order subpages ============ */
.subpage .hero { min-height: 66vh; padding-top: 170px; padding-bottom: 50px; display: block; }
.subpage .hero .wrap { pointer-events: auto; }
.subpage .heronum {
  position: absolute; right: 5vw; top: 12vh; z-index: 1;
  font-family: var(--serif); font-weight: 400; line-height: 1;
  font-size: clamp(180px, 28vw, 400px);
  color: rgba(168, 124, 34, 0.10); user-select: none; pointer-events: none;
}
@media (max-width: 700px) {
  .subpage .hero { min-height: auto; padding-top: 150px; }
  .subpage .heronum { font-size: 150px; top: 90px; right: 6vw; }
}


/* ============ the living robot (Spline), gilded ============ */
.robot3d { display: block; position: relative; }
.robot3d::before {
  content: ''; position: absolute; left: 50%; top: 44%;
  width: 64px; height: 64px; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201, 160, 47, 0.45), transparent 68%);
  animation: sparkwait 1.5s ease-in-out infinite;
}
@keyframes sparkwait { 0%, 100% { opacity: 0.35; transform: translate(-50%,-50%) scale(0.8); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); } }
.robot3d.ready::before { display: none; }
@media (min-width: 1100px) {
  .robot3d {
    position: absolute; z-index: 1;
    right: clamp(0px, 3vw, 80px); top: 46%;
    width: min(42vw, calc(76vh * 64 / 70));
    transform: translateY(-50%);
  }
  .robot3d canvas {
    width: 100%; height: auto; aspect-ratio: 64 / 70; display: block;
    filter: sepia(0.95) saturate(2.0) hue-rotate(-6deg) brightness(1.12) contrast(1.06)
            drop-shadow(0 30px 54px rgba(70, 50, 12, 0.25));
  }
  .robot3d .coinname { margin-top: 4px; }
}


/* the robot in flow on small screens, where the coin used to stand */
@media (max-width: 1099px) {
  .hero .robot3d { order: 2; margin: 26px auto 0; width: min(88vw, 430px); height: auto; z-index: 3; }
  .robot3d canvas {
    width: 100%; height: auto; aspect-ratio: 64 / 70; display: block;
    filter: sepia(0.95) saturate(2.0) hue-rotate(-6deg) brightness(1.12) contrast(1.06);
  }
  .robot3d .coinname { margin-top: 6px; }
}

/* ============================================================
   SHOW, DON'T TELL — the four doors era
   ============================================================ */

/* --- four order cards across on wide screens --- */
.orders { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.orders.sectors-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* --- lists inside order cards --- */
.order ul.olist { list-style: none; margin: 10px 0 4px; padding: 0; }
.order ul.olist li {
  position: relative; padding: 7px 0 7px 22px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
  border-bottom: 1px solid var(--line-1);
}
.order ul.olist li:last-child { border-bottom: 0; }
.order ul.olist li::before {
  content: "◆"; position: absolute; left: 0; top: 8px;
  font-size: 8px; color: var(--flame);
}
.order-quiet { background: linear-gradient(160deg, rgba(191,149,63,0.05), transparent 60%); }

.robot3d canvas {
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}

/* the robot and its core arrive as one, in a single soft breath */
.robot3d canvas, .robot3d .coinname { opacity: 0; transition: opacity 1.6s ease; }
.robot3d.ready canvas, .robot3d.ready .coinname { opacity: 1; }

/* --- situation room console --- */
.sitroom { margin: clamp(26px, 4vh, 44px) 0 0; }
.sitroom svg { display: block; width: 100%; height: auto; background: rgba(255,252,245,0.55); }
.sitroom text { font-family: 'Jost', system-ui, sans-serif; }
.st-cap { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; fill: var(--mist); }
.st-lab { font-size: 10.5px; letter-spacing: 0.08em; fill: var(--ink-2); }
.st-tt { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; fill: var(--ink); }
.st-td { font-size: 11px; letter-spacing: 0.04em; fill: var(--mist); }
.st-grid line { stroke: var(--line-1); stroke-width: 1; }
.st-route { fill: none; stroke: rgba(191,149,63,0.6); stroke-width: 1.2; stroke-dasharray: 5 4; }
.st-nodes circle { fill: none; stroke: var(--flame); stroke-width: 1.2; }
.st-tiles rect { fill: rgba(255,252,245,0.6); stroke: var(--line-2); }
.st-ok { fill: var(--flame); }
.st-warn { fill: none; stroke: var(--flame); stroke-width: 1.4; }
.st-pulse { fill: rgba(191,149,63,0.8); transform-origin: center; transform-box: fill-box; animation: stPulse 2.6s ease-out infinite; }
.st-pulse.d2 { animation-delay: 1.3s; }
@keyframes stPulse {
  0% { opacity: 0.9; transform: scale(1); }
  70% { opacity: 0; transform: scale(3.2); }
  100% { opacity: 0; transform: scale(3.2); }
}
@media (prefers-reduced-motion: reduce) { .st-pulse { animation: none; } }

/* --- consumer phone concepts --- */
.phones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(18px, 3vw, 40px); margin-top: clamp(26px, 4vh, 44px);
  align-items: end; max-width: 900px; margin-left: auto; margin-right: auto; justify-items: center;
}
.phone { margin: 0; text-align: center; }
.phone.mid { transform: translateY(-18px); }
.phone svg { width: 100%; max-width: 220px; height: auto; }
.phone figcaption {
  margin-top: 12px; font-size: 12px; letter-spacing: 0.08em;
  color: var(--mist); font-style: italic; font-family: 'Cormorant', serif; font-size: 15px;
}
.ph-frame { fill: rgba(255,252,245,0.7); stroke: var(--line-3, var(--line-2)); stroke-width: 1.5; }
.ph-dim { fill: var(--line-2); }
.ph-bub { fill: rgba(20,16,8,0.05); }
.ph-bub.gold, .ph-card.gold, .ph-bar.gold, .ph-in.gold { fill: rgba(191,149,63,0.22); }
.ph-card { fill: rgba(20,16,8,0.04); stroke: var(--line-1); }
.ph-in { fill: none; stroke: var(--line-2); }
.ph-dot { fill: var(--flame); }
.ph-bar { fill: rgba(20,16,8,0.07); }
.ph-ring { fill: none; stroke: var(--flame); stroke-width: 1.5; stroke-dasharray: 240 90; }
.ph-line { fill: none; stroke: var(--flame); stroke-width: 1.2; }
.phone text { font-family: 'Cormorant', serif; }
.ph-t { font-size: 20px; font-style: italic; fill: var(--ink); }
.ph-big { font-size: 34px; fill: var(--flame); font-style: italic; }

/* --- hardware forge triptych --- */
.forge {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(20px, 3vw, 44px); margin-top: clamp(26px, 4vh, 44px); align-items: center;
}
.forge-item { margin: 0; text-align: center; }
.forge-item svg { width: 100%; max-width: 300px; height: auto; }
.forge-item figcaption {
  margin-top: 12px; color: var(--mist); font-style: italic;
  font-family: 'Cormorant', serif; font-size: 15px; letter-spacing: 0.04em;
}
.fg-wafer { fill: rgba(255,252,245,0.6); stroke: var(--flame); stroke-width: 1.2; }
.fg-grid line { stroke: rgba(191,149,63,0.4); stroke-width: 0.8; }
.fg-die-hl { fill: rgba(191,149,63,0.18); stroke: var(--flame); stroke-width: 1.2; }
.fg-rack rect { fill: rgba(255,252,245,0.6); stroke: var(--line-2); }
.fg-rack line { stroke: rgba(191,149,63,0.55); stroke-width: 1; }

/* the rotating die */
.die3d {
  --dsz: 120px;
  width: var(--dsz); height: var(--dsz); margin: 60px auto;
  position: relative; transform-style: preserve-3d;
  animation: dieSpin 16s linear infinite;
}
@keyframes dieSpin {
  from { transform: rotateX(-24deg) rotateY(0deg); }
  to   { transform: rotateX(-24deg) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) { .die3d { animation: none; transform: rotateX(-24deg) rotateY(35deg); } }
.die-face {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(216,181,105,0.35), rgba(191,149,63,0.14));
  border: 1px solid rgba(191,149,63,0.8);
  display: grid; place-items: center;
}
.die-face span {
  font-family: 'Cormorant', serif; font-style: italic;
  font-size: 44px; color: var(--flame);
}
.die-face.f1 { transform: translateZ(calc(var(--dsz) / 2)); }
.die-face.f2 { transform: rotateY(180deg) translateZ(calc(var(--dsz) / 2)); }
.die-face.f3 { transform: rotateY(90deg) translateZ(calc(var(--dsz) / 2)); }
.die-face.f4 { transform: rotateY(-90deg) translateZ(calc(var(--dsz) / 2)); }
.die-face.f5 { transform: rotateX(90deg) translateZ(calc(var(--dsz) / 2)); }
.die-face.f6 { transform: rotateX(-90deg) translateZ(calc(var(--dsz) / 2)); }

@media (max-width: 700px) {
  .phone.mid { transform: none; }
  .sitroom svg { min-width: 640px; }
  .sitroom { overflow-x: auto; }
}

/* ecosystem hero headline — longer line, calmer scale */
.hero h1.hero-eco {
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1.18; letter-spacing: 0.005em;
  max-width: 640px;
}
@media (max-width: 700px) { .hero h1.hero-eco { font-size: clamp(26px, 7vw, 34px); } }

/* --- real 3D panels on hardware --- */
.metal3d {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(20px, 3vw, 44px); margin-top: clamp(26px, 4vh, 44px);
}
.m3d { margin: 0; text-align: center; }
.m3d canvas {
  display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 2px;
  border: 1px solid var(--line-2); background: transparent;
  cursor: grab; touch-action: pan-y;
}
.m3d canvas:active { cursor: grabbing; }
.m3d figcaption {
  margin-top: 12px; color: var(--mist); font-style: italic;
  font-family: 'Cormorant', serif; font-size: 15px; letter-spacing: 0.04em;
}

/* --- cohesion pass: rooms, thread arrows, next-world ring --- */
.rooms {
  counter-reset: room;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: clamp(24px, 3.5vh, 40px);
  border-top: 1px solid var(--line-2);
}
.rooms a {
  counter-increment: room; position: relative; display: block;
  border: 0; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  border-radius: 0; padding: 28px 24px 26px; text-decoration: none;
  transition: background 0.35s ease;
}
.rooms a:last-child { border-right: 0; }
.rooms a:hover { background: rgba(191, 149, 63, 0.06); }
.rooms a::before {
  content: counter(room, upper-roman);
  display: block; margin-bottom: 12px;
  font-family: var(--serif); font-size: 16px; color: var(--flame); letter-spacing: 0.08em;
}
.rooms b {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 20px; color: var(--cream); margin-bottom: 6px;
}
.rooms b::after {
  content: "\2192"; float: right; font-style: normal;
  color: var(--flame); transition: transform 0.35s ease;
}
.rooms a:hover b::after { transform: translateX(4px); }
.rooms span {
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist);
}
.secnext {
  display: block; width: max-content; margin: clamp(30px, 4.5vh, 52px) auto 0;
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--mist); text-decoration: none; transition: color 0.3s ease;
}
.secnext:hover { color: var(--flame); }
.nextworld { margin-top: clamp(26px, 4vh, 40px); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.nextworld a { color: var(--mist); text-decoration: none; transition: color 0.3s ease; }
.nextworld a:hover { color: var(--flame); }
.nextworld em { font-style: normal; color: var(--flame); }

/* ---------- audit pass: cohesion & polish ---------- */
.order .olink { margin-top: auto; padding-top: 14px; }
.order ul.olist { margin-bottom: auto; }

.subpage .hero .cta-row { max-width: none; }

.st-cap { font-size: 15px; letter-spacing: 0.18em; }
.st-lab { font-size: 15px; }
.st-tt  { font-size: 17px; letter-spacing: 0.16em; }
.st-td  { font-size: 14.5px; }
.sitroom figcaption {
  font-family: var(--serif); font-style: italic; font-size: 15px;
  letter-spacing: 0.04em; text-transform: none; color: var(--mist);
}

/* [18] centered coda paragraphs */
.lede-center { text-align: center; margin-left: auto; margin-right: auto; }

/* [16] phones: intended stagger, stable captions */
.phones { align-items: start; }
.phone figcaption { min-height: 2.6em; }
.phone.mid { transform: translateY(18px); }

/* [15] tenth industry closes the grid as a full-width quiet band */
.domains > :last-child { grid-column: 1 / -1; background: linear-gradient(160deg, rgba(191,149,63,0.05), transparent 60%); }

/* [14] offer card rows share baselines */
.offer .ocraft { min-height: 2.5em; }
.offer h3 { min-height: 2.2em; }

/* [38] chip panel joins the hall tonally */
#chip3d { background: radial-gradient(120% 100% at 50% 42%, #3A3122 0%, #241D11 55%, #17120B 100%); }

/* [6] pause ornamental animations offstage */
.offstage, .offstage *, .offstage *::before, .offstage *::after { animation-play-state: paused !important; }

/* [9] whole FAQ row is the tap target */
.qai h3 { padding: 12px 0; cursor: pointer; }

/* [41] descend hint readable */
.hero .down { color: var(--mist); }

/* [11] safe-area for the totop button */
#totop { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); }

/* ---------- audit pass: mobile ---------- */
@media (max-width: 900px) {
  header.stuck { background: rgba(246, 241, 230, 0.95); backdrop-filter: none; }
  nav.main {
    gap: 14px; padding-right: 24px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  nav.main a { letter-spacing: 0.14em; padding: 12px 0; font-size: 11px; }
  .field label { font-size: 11px; }
  .fineprint { font-size: 11px; }
  .olink, .nextworld a { display: inline-block; padding-top: 12px; padding-bottom: 12px; }
}
@media (max-width: 700px) {
  .sitroom svg { min-width: 820px; }
  .sitroom {
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  }
  .sitroom.at-end { -webkit-mask-image: none; mask-image: none; }
  .sitroom::after {
    content: 'Swipe to pan \2192';
    display: block; margin-top: 10px;
    font-family: var(--sans); font-size: 10.5px;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist);
  }
}
@media (max-width: 380px) {
  .markline { font-size: 8.5px; letter-spacing: 0.16em; text-indent: 0.16em; }
  #hdr .btn-ghost { padding: 9px 10px; font-size: 9px; }
}

/* --- responsive check pass --- */
@media (min-width: 560px) and (max-width: 900px) {
  .rooms { grid-template-columns: repeat(2, 1fr); }
  .orders > .order:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .tiers .tier:last-child { grid-column: 1 / -1; }
}
@media (min-width: 640px) and (max-width: 999px) {
  .beliefs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 999px) {
  .rooms { grid-template-columns: repeat(2, 1fr); }
  .rooms a:nth-child(2n) { border-right: 0; }
}
@media (max-width: 600px) {
  .rooms { grid-template-columns: 1fr; }
  .rooms a { border-right: 0; }
}

/* --- the drift: glyph particles over the forge hero --- */
.driftfx {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }

/* ============================================================
   ABOUT — the founders' folio
   ============================================================ */
.folio {
  margin: 0; text-align: center;
}
.folio img {
  display: block; width: 100%; height: auto;
  border: 1px solid rgba(191, 149, 63, 0.55);
  outline: 1px solid var(--line-2); outline-offset: 10px;
  padding: 0; background: #FFFDF7;
  box-shadow: 0 30px 60px rgba(60, 44, 12, 0.16);
  filter: sepia(0.06) saturate(0.98);
}
.folio figcaption { margin-top: 26px; }
.folio-names {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px); color: var(--cream);
}
.folio-role {
  display: block; margin-top: 8px;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--flame);
}
.folio-tight img { outline-offset: 6px; }

/* partnership band */
.duo-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.duo-copy .title { margin: 14px 0 22px; }
.duo-p { color: var(--smoke); font-size: 15.5px; line-height: 1.85; max-width: 46ch; margin-bottom: 16px; }
.duo-p em { font-style: italic; color: var(--flame); }
.duo-sign {
  font-family: var(--serif); font-style: italic; font-size: 24px;
  color: var(--cream); margin-top: 26px;
}
@media (max-width: 900px) {
  .duo-grid { grid-template-columns: 1fr; }
}

/* the dark act: the creeds, spoken over the fire */
.quoteband {
  position: relative; overflow: hidden; isolation: isolate;
  background: #15110A; padding: clamp(76px, 12vh, 140px) 0;
  scroll-margin-top: 96px;
}
.quoteband img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 26%;
  filter: grayscale(0.32) sepia(0.5) saturate(1.1) contrast(1.1) brightness(0.44);
}
.quoteband-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 70% 32%, rgba(21,17,10,0.12) 0%, rgba(21,17,10,0.72) 55%, rgba(21,17,10,0.95) 100%),
    linear-gradient(180deg, rgba(21,17,10,0.92) 0%, rgba(21,17,10,0.42) 20%, rgba(21,17,10,0.48) 70%, rgba(21,17,10,0.94) 100%);
}
.quoteband .whisper {
  display: block; color: #C9A02F; margin-bottom: clamp(28px, 4.5vh, 52px);
}
.quoteband .whisper b { color: #E8C97E; font-weight: 400; }
.quoteband .creed-list { gap: clamp(18px, 2.8vh, 34px); }
.quoteband .creed {
  font-size: clamp(27px, 4.2vw, 56px);
  color: rgba(246, 241, 230, 0.34);
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.5);
}
.quoteband .creed.lit { color: #F6F1E6; }
.quoteband .creed em { color: #E8C97E; }

/* beliefs triptych */
.beliefs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(18px, 2.4vw, 34px); margin-top: clamp(26px, 4vh, 44px);
}
.belief {
  border: 1px solid var(--line-2); border-top: 2px solid var(--flame);
  border-radius: 2px; padding: clamp(20px, 2.6vw, 34px);
}
.belief h3 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px); color: var(--cream); margin-bottom: 12px;
}
.belief p { color: var(--smoke); font-size: 14.5px; line-height: 1.8; }

/* --- the grand portrait: a plate tipped into the book --- */
.folio-grand {
  max-width: 980px; margin: 0 auto;
  background: #FFFDF7; padding: 30px 30px 0;
  border: 1px solid rgba(191, 149, 63, 0.45);
  box-shadow: 0 40px 90px -50px rgba(60, 44, 12, 0.42);
}
.folio-grand img {
  border: 0; outline: 0;
  box-shadow: 0 26px 60px -34px rgba(60, 44, 12, 0.5);
  filter: sepia(0.18) saturate(0.94) contrast(1.05) brightness(1.01);
}
.folio-grand figcaption { margin-top: 0; padding: 26px 0 30px; }

/* the founders' prose: centred column, editorial setting */
.duo-centered {
  max-width: 720px; margin: clamp(44px, 7vh, 80px) auto 0; text-align: center;
}
.duo-centered .title { margin: 14px auto 24px; max-width: 16ch; }
.duo-centered .duo-p {
  text-align: left; max-width: 60ch; margin-left: auto; margin-right: auto;
}
.duo-centered .duo-p:first-of-type {
  font-family: var(--serif); font-size: 22px; line-height: 1.55; color: var(--cream);
}
.duo-p b { font-weight: 500; color: var(--cream); white-space: nowrap; }
/* emphases speak in the house voice — Jost has no italic cut to fake */
.duo-p em, .lede em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.12em; line-height: 1; color: var(--flame);
}

@media (min-width: 1500px) {
  .subpage .heronum { top: 50%; transform: translateY(-50%); right: 4vw; font-size: clamp(360px, 28vw, 520px); }
  .subpage .hero { min-height: 74vh; }
}
@media (max-width: 700px) {
  .subpage .heronum { top: auto; bottom: -40px; right: -50px; font-size: 250px; opacity: 0.5; }
  .quoteband img { object-position: 72% 26%; }
  .quoteband { padding: clamp(56px, 9vh, 92px) 0; }
  .subpage .hero h1 { font-size: clamp(30px, 8.4vw, 40px); }
  .whisper { font-size: 11px; letter-spacing: 0.14em; text-indent: 0.14em; text-wrap: balance; }
  #totop { display: none; }
  .folio-grand { padding: 14px 14px 0; }
  .duo-centered .duo-p:first-of-type { font-size: 19px; }
}

}

@media (min-width: 701px) { .fbase a[href="#top"] { display: none; } }
@media (max-width: 900px) { html { scroll-padding-top: 128px; } .quoteband { scroll-margin-top: 128px; } }
/* the nav strip fades at both ends so the scroll reads as intentional */
@media (max-width: 900px) {
  nav.main {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
}