/* The G Code™ — V3 THOR · Luxury Operator Lounge
   Coal/onyx base · platinum lead · surgical ember */

:root {
  --onyx: #0B0B0D;
  --coal: #141519;
  --graphite: #23252B;
  --line: rgba(199, 203, 209, 0.14);
  --smoke: rgba(255, 255, 255, 0.035);
  --platinum: #C7CBD1;
  --gold: #C8A24B;
  --ember: #7A2230;
  --ember-glow: rgba(160, 44, 60, 0.5);
  --text: #E7E8EA;
  --muted: #9A9DA4;
  --maxw: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--onyx);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ambient depth */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1100px 600px at 75% -5%, rgba(122, 34, 48, 0.10), transparent 60%),
    radial-gradient(900px 700px at 5% 20%, rgba(199, 203, 209, 0.04), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

/* ---------- typography ---------- */
.kicker {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
  display: inline-block;
}
h1, h2, h3 { font-family: "Archivo", sans-serif; font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; }
h1 { font-size: clamp(44px, 8vw, 92px); }
h2 { font-size: clamp(30px, 4.6vw, 54px); }
h3 { font-size: clamp(20px, 2.4vw, 27px); letter-spacing: 0; }
p.lead { font-size: clamp(18px, 2.1vw, 22px); color: var(--muted); max-width: 60ch; }
.metal { color: var(--platinum); }
.ember { color: #C24A57; }

/* ---------- nav ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  backdrop-filter: blur(10px);
  background: rgba(11, 11, 13, 0.55);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
nav.scrolled { border-bottom: 1px solid var(--line); background: rgba(11, 11, 13, 0.82); }
.brand { font-family: "Archivo", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 16px; }
.brand .tm { color: var(--gold); font-size: 9px; vertical-align: super; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; font-family: "Oswald", sans-serif; transition: color .2s; }
.nav-links a:hover { color: var(--text); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .14em;
  font-size: 13px; font-weight: 500;
  padding: 14px 26px; border-radius: 2px; text-decoration: none; cursor: pointer;
  transition: transform .2s, box-shadow .3s, background .3s, border-color .3s;
}
.btn-primary {
  background: linear-gradient(180deg, #1c1d22, #0f1013);
  color: var(--text);
  border: 1px solid rgba(200, 162, 75, 0.5);
  box-shadow: 0 0 0 rgba(200, 162, 75, 0);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(200, 162, 75, 0.14), inset 0 0 0 1px rgba(200,162,75,.3); border-color: var(--gold); }
.btn-ghost { background: transparent; color: var(--platinum); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--platinum); color: #fff; transform: translateY(-2px); }
.btn-sm { padding: 11px 20px; font-size: 12px; }

/* ---------- sections ---------- */
section { padding: 110px 0; position: relative; }
.hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); border: 0; }

/* hero */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 120px; }
.hero h1 { margin: 20px 0 26px; max-width: 16ch; }
.hero h1 .stroke { -webkit-text-stroke: 1px var(--platinum); color: transparent; }
.hero-cta { display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap; }
.hero-meta { margin-top: 64px; display: flex; gap: 40px; flex-wrap: wrap; color: var(--muted); font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; }
.hero-meta span { position: relative; padding-left: 16px; }
.hero-meta span::before { content: ""; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; }

/* motion strip */
.motion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 50px; }
.motion-cell { background: var(--coal); padding: 38px 26px; transition: background .3s; }
.motion-cell:hover { background: var(--graphite); }
.motion-cell .n { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 13px; color: var(--gold); letter-spacing: .1em; }
.motion-cell h3 { margin: 14px 0 10px; }
.motion-cell p { color: var(--muted); font-size: 15px; }
.motion-arrow { color: var(--platinum); opacity: .4; font-size: 14px; }

/* spotlight (Same-Day MVP) */
.spotlight { background:
   radial-gradient(700px 380px at 80% 0%, rgba(122,34,48,.16), transparent 65%),
   linear-gradient(180deg, #101116, #0c0d10);
   border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.panel {
  background: linear-gradient(160deg, rgba(35,37,43,.7), rgba(15,16,19,.7));
  border: 1px solid var(--line); border-radius: 4px; padding: 54px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 30px 80px rgba(0,0,0,.4);
  position: relative; overflow: hidden;
}
.panel::after { content:""; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.5; }
.panel h2 { margin: 16px 0 18px; }
.tag-row { display:flex; gap:10px; flex-wrap:wrap; margin: 26px 0 30px; }
.tag { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:var(--platinum); border:1px solid var(--line); padding:7px 14px; border-radius:2px; }
.modes { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top: 32px; }
.mode { border:1px solid var(--line); border-radius:3px; padding:22px; background: var(--smoke); }
.mode h3 { font-size:16px; color:var(--platinum); }
.mode p { color: var(--muted); font-size:14px; margin-top:8px; }

/* section intro */
.sec-head { max-width: 70ch; }
.sec-head h2 { margin: 16px 0 18px; }

/* ecosystem / doorway cards */
.cards { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:50px; }
.card {
  background: linear-gradient(165deg, rgba(35,37,43,.55), rgba(13,14,17,.55));
  border:1px solid var(--line); border-radius:4px; padding:34px; position:relative;
  transition: transform .3s, border-color .3s; overflow:hidden;
}
.card:hover { transform: translateY(-4px); border-color: rgba(199,203,209,.3); }
.card .corner { position:absolute; top:0; right:0; width:46px; height:46px; background:linear-gradient(225deg, rgba(200,162,75,.18), transparent 70%); }
.card .badge { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:10px; color:var(--gold); }
.card h3 { margin:14px 0 12px; }
.card p { color:var(--muted); font-size:15px; }
.card a { display:inline-block; margin-top:20px; color:var(--platinum); text-decoration:none; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:12px; border-bottom:1px solid var(--line); padding-bottom:3px; transition:border-color .2s,color .2s; }
.card a:hover { color:#fff; border-color:var(--gold); }

/* founder */
.founder { display:grid; grid-template-columns: 1.3fr 1fr; gap:60px; align-items:center; }
.founder-portrait {
  aspect-ratio: 4/5; border:1px solid var(--line); border-radius:4px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(122,34,48,.18), transparent 60%),
    linear-gradient(180deg, #1a1b20, #0d0e11);
  display:flex; align-items:flex-end; padding:34px; position:relative;
}
.founder-portrait .mono { font-family:"Archivo",sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(40px,6vw,72px); line-height:.92; color:transparent; -webkit-text-stroke:1px rgba(199,203,209,.35); }
.founder-portrait .tagline { position:absolute; top:30px; left:34px; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.22em; font-size:11px; color:var(--gold); }
.founder blockquote { font-family:"Archivo",sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(22px,2.6vw,32px); line-height:1.08; letter-spacing:-.01em; }
.founder p { color:var(--muted); margin-top:22px; }

/* close band */
.close-band { text-align:center; background:
   radial-gradient(600px 300px at 50% 120%, rgba(122,34,48,.22), transparent 70%),
   linear-gradient(180deg,#0c0d10,#101116); border-top:1px solid var(--line); }
.close-band h2 { max-width:18ch; margin:18px auto 30px; }
.close-band .ember-rule { width:80px; height:2px; margin:0 auto 6px; background:linear-gradient(90deg,transparent,var(--ember-glow),transparent); }

/* footer */
footer { padding:70px 0 50px; border-top:1px solid var(--line); }
.foot-grid { display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; }
.foot-brand { font-family:"Archivo",sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.foot-brand .tm { color:var(--gold); font-size:9px; vertical-align:super; }
.foot-desc { color:var(--muted); font-size:14px; margin-top:10px; max-width:34ch; }
.foot-links { display:flex; gap:50px; flex-wrap:wrap; }
.foot-col h4 { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--platinum); margin-bottom:14px; }
.foot-col a { display:block; color:var(--muted); text-decoration:none; font-size:14px; margin-bottom:9px; transition:color .2s; }
.foot-col a:hover { color:var(--text); }
.foot-bottom { margin-top:50px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:12px; font-family:"Oswald",sans-serif; letter-spacing:.08em; text-transform:uppercase; }

/* reveal */
.reveal { opacity:0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* responsive */
@media (max-width: 900px) {
  .motion-grid { grid-template-columns: repeat(2,1fr); }
  .modes { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; }
  .panel { padding: 34px 24px; }
  section { padding: 80px 0; }
}

/* ===================== LOKI POLISH LAYER ===================== */

/* --- mobile menu toggle --- */
.menu-toggle { display:none; background:transparent; border:0; cursor:pointer; width:34px; height:28px; padding:4px; flex-direction:column; justify-content:space-between; }
.menu-toggle span { display:block; height:2px; width:100%; background:var(--platinum); transition:transform .3s, opacity .3s; }
.menu-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity:0; }
.menu-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
a.brand { text-decoration:none; color:var(--text); }

@media (max-width: 900px) {
  .menu-toggle { display:flex; }
  .nav-links {
    position:fixed; top:64px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(11,11,13,.97); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    padding:10px 28px 22px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .28s ease, opacity .28s ease;
  }
  .nav-links.open { transform:none; opacity:1; pointer-events:auto; }
  .nav-links a:not(.btn) { display:block; padding:14px 0; font-size:15px; width:100%; border-bottom:1px solid var(--line); }
  .nav-links a.btn { margin-top:16px; width:100%; justify-content:center; }
}

/* --- premium motion: gold pulse on primary CTA + metallic shimmer --- */
@keyframes goldPulse {
  0%,100% { box-shadow:0 0 0 rgba(200,162,75,0); border-color:rgba(200,162,75,.5); }
  50% { box-shadow:0 0 22px rgba(200,162,75,.16); border-color:rgba(200,162,75,.85); }
}
.btn-primary { animation:goldPulse 4.5s ease-in-out infinite; }
.btn-primary:hover { animation:none; }

@keyframes shimmer { 0% { background-position:-180% 0; } 100% { background-position:180% 0; } }
.hero h1 .stroke { background:linear-gradient(100deg, transparent 20%, rgba(199,203,209,.55) 50%, transparent 80%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; animation:shimmer 7s linear infinite; }

.ember-rule { position:relative; overflow:hidden; }
.ember-rule::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(200,162,75,.7),transparent); background-size:200% 100%; animation:shimmer 3.5s linear infinite; }

/* --- accordion (Phase 7) --- */
.accordion { margin-top:24px; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.acc-item + .acc-item { border-top:1px solid var(--line); }
.acc-head {
  width:100%; text-align:left; background:var(--coal); color:var(--text);
  border:0; cursor:pointer; padding:22px 26px;
  font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:15px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition:background .25s;
}
.acc-head:hover { background:var(--graphite); }
.acc-ic { font-family:"Archivo",sans-serif; font-weight:700; color:var(--gold); font-size:22px; line-height:1; transition:transform .3s; }
.acc-head[aria-expanded="true"] { background:var(--graphite); }
.acc-head[aria-expanded="true"] .acc-ic { transform:rotate(45deg); }
.acc-body { max-height:0; overflow:hidden; transition:max-height .35s ease; background:rgba(0,0,0,.18); }
.acc-body p { padding:0 26px; color:var(--muted); font-size:15.5px; }
.acc-body.open { max-height:240px; }
.acc-body.open p { padding:18px 26px 24px; }

/* --- contact line --- */
.contact-line { margin-top:26px; color:var(--muted); font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:12px; }
.contact-line a { color:var(--platinum); text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .2s,color .2s; }
.contact-line a:hover { color:#fff; border-color:var(--gold); }

/* --- legal pages --- */
.legal { max-width:780px; margin:0 auto; padding:140px 28px 90px; position:relative; z-index:1; }
.legal .kicker { margin-bottom:14px; }
.legal h1 { font-size:clamp(34px,6vw,56px); margin-bottom:10px; }
.legal .updated { color:var(--muted); font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:12px; margin-bottom:40px; }
.legal h2 { font-size:clamp(20px,2.6vw,26px); margin:38px 0 14px; }
.legal p, .legal li { color:var(--muted); font-size:16px; line-height:1.7; }
.legal ul { padding-left:22px; margin:10px 0; }
.legal li { margin-bottom:8px; }
.legal a { color:var(--platinum); }
.legal .back { display:inline-block; margin-top:48px; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:13px; color:var(--platinum); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:3px; }
.legal .back:hover { color:#fff; border-color:var(--gold); }

@media (max-width:900px) { .foot-links { gap:30px 40px; } }

/* ===================== SERVICE-WITH-STYLE LAYER ===================== */

/* page hero (compact, for sub-pages) */
.page-hero { padding:150px 0 70px; border-bottom:1px solid var(--line);
  background: radial-gradient(800px 360px at 78% -10%, rgba(122,34,48,.12), transparent 62%), linear-gradient(180deg,#0d0e12,#0b0b0d); }
.page-hero h1 { font-size:clamp(38px,6.5vw,76px); margin:18px 0 22px; max-width:18ch; }
.page-hero .lead { max-width:64ch; }
.breadcrumb { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--muted); margin-bottom:6px; }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--platinum); }

/* generic section intro spacing */
.sec-head + .grid-block, .sec-head + .examples, .sec-head + .steps, .sec-head + .split, .sec-head + .guides, .sec-head + .svc-list, .sec-head + .tabs, .sec-head + .accordion { margin-top:48px; }

/* split (qualify / disqualify, public/private) */
.split { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.split-col { border:1px solid var(--line); border-radius:4px; padding:32px; background:linear-gradient(165deg,rgba(35,37,43,.5),rgba(13,14,17,.5)); }
.split-col h3 { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.split-col .mk { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:"Archivo",sans-serif; font-weight:800; font-size:15px; flex:0 0 auto; }
.split-yes .mk { color:#9ed8a6; border:1px solid rgba(158,216,166,.5); }
.split-no .mk { color:#d89a9a; border:1px solid rgba(216,154,154,.45); }
.checklist { list-style:none; }
.checklist li { position:relative; padding-left:26px; margin-bottom:13px; color:var(--muted); font-size:15.5px; }
.checklist li::before { content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:1px; background:var(--gold); opacity:.8; }
.checklist.no li::before { background:#7a4a4a; }

/* process steps / timeline */
.steps { counter-reset:step; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.step { background:var(--coal); padding:26px 28px; display:grid; grid-template-columns:54px 1fr; gap:20px; align-items:start; transition:background .25s; }
.step:hover { background:var(--graphite); }
.step .num { counter-increment:step; font-family:"Archivo",sans-serif; font-weight:800; font-size:22px; color:transparent; -webkit-text-stroke:1px var(--gold); }
.step .num::before { content:"0" counter(step); }
.step h3 { font-size:17px; margin-bottom:6px; }
.step p { color:var(--muted); font-size:15px; }

/* example cards grid */
.examples { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ex-card { border:1px solid var(--line); border-radius:4px; padding:28px; background:linear-gradient(165deg,rgba(35,37,43,.45),rgba(13,14,17,.45)); transition:transform .3s,border-color .3s; position:relative; }
.ex-card:hover { transform:translateY(-4px); border-color:rgba(199,203,209,.28); }
.ex-card .ico { width:40px; height:40px; margin-bottom:16px; color:var(--gold); }
.ex-card h3 { font-size:17px; margin-bottom:9px; letter-spacing:0; }
.ex-card p { color:var(--muted); font-size:14.5px; }
.ex-card .pill { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:10px; color:var(--platinum); border:1px solid var(--line); padding:5px 11px; border-radius:2px; display:inline-block; margin-top:16px; }

/* service category list */
.svc-list { display:grid; gap:18px; }
.svc { border:1px solid var(--line); border-radius:4px; padding:34px; background:linear-gradient(165deg,rgba(35,37,43,.5),rgba(13,14,17,.5)); display:grid; grid-template-columns:48px 1fr; gap:24px; transition:border-color .3s; }
.svc:hover { border-color:rgba(199,203,209,.28); }
.svc .ico { width:44px; height:44px; color:var(--gold); }
.svc h3 { margin-bottom:10px; }
.svc p { color:var(--muted); font-size:15px; margin-bottom:14px; }
.svc .meta { display:flex; flex-wrap:wrap; gap:8px; }

/* micro-guide cards */
.guides { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.guide { border:1px solid var(--line); border-left:2px solid var(--gold); border-radius:3px; padding:30px; background:rgba(255,255,255,.02); }
.guide .tagk { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.18em; font-size:10px; color:var(--gold); }
.guide h3 { font-size:19px; margin:10px 0 12px; letter-spacing:0; text-transform:none; }
.guide p { color:var(--muted); font-size:15px; }
.guide ul { margin-top:10px; }

/* tabs */
.tabs { border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.tab-btns { display:flex; flex-wrap:wrap; background:var(--coal); border-bottom:1px solid var(--line); }
.tab-btn { background:transparent; border:0; cursor:pointer; color:var(--muted); padding:18px 22px;
  font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:13px; position:relative; transition:color .2s; }
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--text); }
.tab-btn.active::after { content:""; position:absolute; left:18px; right:18px; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); }
.tab-panel { display:none; padding:38px; }
.tab-panel.active { display:block; }
.tab-panel h3 { letter-spacing:0; margin-bottom:12px; }
.tab-panel p { color:var(--muted); }

/* generic grid block */
.grid-block { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

/* leave-with / deliverable list */
.deliver { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 30px; }
.deliver li { list-style:none; position:relative; padding-left:28px; color:var(--text); font-size:15.5px; }
.deliver li::before { content:"→"; position:absolute; left:0; color:var(--gold); font-family:"Archivo",sans-serif; }
.deliver li span { display:block; color:var(--muted); font-size:13.5px; margin-top:3px; }

/* CTA mini band inside pages */
.mini-cta { text-align:center; border:1px solid var(--line); border-radius:6px; padding:54px 34px; margin-top:10px;
  background: radial-gradient(500px 240px at 50% 120%, rgba(122,34,48,.18), transparent 70%), linear-gradient(180deg,rgba(20,21,25,.6),rgba(12,13,16,.6)); }
.mini-cta h2 { margin-bottom:16px; }
.mini-cta p { color:var(--muted); max-width:52ch; margin:0 auto 28px; }

/* responsive for new components */
@media (max-width:900px) {
  .split, .examples, .guides, .grid-block, .deliver { grid-template-columns:1fr; }
  .tab-btn { padding:14px 16px; font-size:12px; }
  .tab-panel { padding:26px; }
  .svc { grid-template-columns:1fr; gap:14px; }
}

/* --- accessibility: respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}

/* =====================================================================
   THE G CODE™ — CARRARA SHOWROOM · SILVER-MARBLE OVERRIDE  (v2, hardened)
   Appended at EOF. Re-declares :root (later equal-specificity wins) so
   var()-based components flip automatically; every hardcoded gradient
   from the original dark build is explicitly overridden below.

   v2 applies the adversarial-review fixes:
   - .metal + .hero h1 .stroke no longer clip near-white chrome on light
     slab (AA + brand): dark-dominant gradients, every stop >= 4.5:1.
   - explicit reduced-motion fallback added AFTER this block (the global
     reduced-motion rule is at styles.css L386-389, BEFORE this override,
     so it does NOT auto-guard clipped-text — verified).
   - yes/no markers kept monochrome (ink + ember), no traffic-light green.
   - body::before softened + de-periodized; mobile actually drops the vein
     layer and uses background-attachment:scroll (no scroll-jank).
   - long-form reading surfaces made near-opaque so veins can't bleed
     under legal/FAQ copy; text tokens nudged for vein headroom.
   - footer link underline fixed (light, and it actually grows on hover).
   - spotlight differentiated by tone+depth, not sparse lone diagonals.
   - decorative champagne brightened (warm anchor) while AA-text gold
     stays dark.
   ===================================================================== */

:root {
  /* same token NAMES, silver-marble values */
  --onyx: #0B0B0D;            /* the only true anchor: buttons, footer, dark veins */
  --coal: #E4E6E9;            /* silver surface tone (was section base) */
  --graphite: #ECEDEF;        /* lighter polished band (was elevated surface) */
  --line: rgba(20, 22, 26, 0.18);
  --smoke: rgba(20, 22, 26, 0.035);
  --platinum: #54575E;        /* mid-graphite, AA on slab + cool bands */
  --gold: #645226;            /* deep champagne TEXT, AA on silver + veins */
  --ember: #7A2230;
  --ember-glow: rgba(122, 34, 48, 0.34);
  --text: #13151A;            /* dark ink */
  --muted: #4E5258;           /* graphite grey, AA even over a dark vein */
  --maxw: 1180px;
  /* new marble helpers */
  --slab: #EAEBEE;
  --slab-hi: #F4F5F6;
  --slab-lo: #DADCE0;
  --vein: rgba(36, 40, 48, 0.16);
  --vein-dark: rgba(11, 11, 13, 0.30);
  --ink-soft: #2A2D34;
  /* decorative champagne (NOT for text — for metal edges/lines/corners) */
  --champagne-1: #8C7438;
  --champagne-2: #C8A86A;
  /* dark-chrome stops for legible engraved-pewter sheen (all >= 4.5:1 on slab) */
  --pewter-lo: #2A2D34;
  --pewter-hi: #5A5E66;
}

/* ---------- body: the marble slab ---------- */
body {
  background: var(--slab);
  color: var(--text);
}

/* Stacked fixed marble layers. Broad bands + fine veins ride DIFFERENT
   angles (22.5deg vs 19deg) and coprime cycle lengths so they never lock
   into a visible grid/moire; a single soft radial blob implies one
   dominant asymmetric vein (geological, not corduroy). White peaks kept
   low (<=0.22) and ramped over wide px ranges to kill Mach banding. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* bold asymmetric vein clouds — irregular, geological depth */
    radial-gradient(120% 46% at 16% 10%, rgba(11, 11, 13, 0.13) 0%, rgba(11, 11, 13, 0) 34%),
    radial-gradient(90% 40% at 86% 74%, rgba(11, 11, 13, 0.11) 0%, rgba(11, 11, 13, 0) 30%),
    /* PRIMARY veins — thick, high-contrast, ~23deg (sparse so text sits between) */
    repeating-linear-gradient(23deg,
      rgba(22, 26, 34, 0) 0px,
      rgba(22, 26, 34, 0) 50px,
      rgba(22, 26, 34, 0.15) 53px,
      rgba(22, 26, 34, 0.30) 55px,
      rgba(22, 26, 34, 0.15) 57px,
      rgba(22, 26, 34, 0) 60px,
      rgba(22, 26, 34, 0) 116px),
    /* SECONDARY veins — finer, denser, ~21deg */
    repeating-linear-gradient(21deg,
      rgba(36, 40, 48, 0) 0px,
      rgba(36, 40, 48, 0) 15px,
      rgba(36, 40, 48, 0.16) 16px,
      rgba(36, 40, 48, 0) 18px,
      rgba(36, 40, 48, 0) 34px,
      rgba(11, 11, 13, 0.12) 35px,
      rgba(36, 40, 48, 0) 37px,
      rgba(36, 40, 48, 0) 58px),
    /* broad polished bands — bright white highlights, DIFFERENT axis (19deg) */
    repeating-linear-gradient(19deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, 0.36) 18px,
      rgba(255, 255, 255, 0) 48px,
      rgba(20, 22, 26, 0.05) 84px,
      rgba(255, 255, 255, 0) 140px),
    /* top-lit silver tonal field */
    linear-gradient(176deg, #F4F5F6 0%, #E9EBEE 42%, #E2E4E8 72%, #DBDDE2 100%);
  background-size: 100% 100%, 100% 100%, auto, auto, auto, 100% 100%;
  background-attachment: fixed;
}

/* keep content above the stone */
.wrap, .legal { position: relative; z-index: 1; }

/* ---------- typography ---------- */
.kicker { color: var(--gold); }
/* .metal styled fully in the FLASH block (single source of truth) */
.ember { color: var(--ember); }
p.lead, .lead { color: var(--muted); }

/* ---------- nav: light, frosted ---------- */
nav {
  background: rgba(240, 241, 243, 0.62);
  backdrop-filter: blur(12px) saturate(1.05);
  border-bottom: 1px solid transparent;
}
nav.scrolled {
  background: rgba(238, 239, 242, 0.86);
  border-bottom: 1px solid var(--line);
}
.brand { color: var(--text); }
a.brand { color: var(--text); }
.brand .tm, .foot-brand .tm { color: var(--gold); }
.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--text); }
.menu-toggle span { background: var(--ink-soft); }

@media (max-width: 900px) {
  .nav-links {
    background: rgba(238, 239, 242, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .nav-links a:not(.btn) { border-bottom: 1px solid var(--line); }
}

/* ---------- buttons ---------- */
/* primary = the BLACK ANCHOR; drop the loud goldPulse for Carrara */
.btn-primary {
  background: linear-gradient(180deg, #1c1d22, #0B0B0D);
  color: #fff;
  border: 1px solid rgba(20, 22, 26, 0.55);
  box-shadow: 0 8px 24px rgba(11, 11, 13, 0.22);
  animation: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 22, 26, 0.7);
  box-shadow: 0 14px 36px rgba(11, 11, 13, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-ghost:hover {
  border-color: var(--ink-soft);
  color: var(--text);
  transform: translateY(-2px);
}

/* ---------- section divider: engraved hairline ---------- */
.hairline {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ---------- hero ---------- */
/* marble IS the ambience; add a faint top vignette for nav legibility */
.hero {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 140px);
}
/* .stroke words: engraved DARK chrome (fill carries the word; the ink
   stroke is just an outline anchor). All gradient stops >= 4.5:1 on slab. */
.hero h1 .stroke {
  -webkit-text-stroke: 1px var(--ink-soft);
  color: transparent;
  -webkit-text-fill-color: transparent;   /* cross-engine clip */
  background: linear-gradient(100deg,
    #2A2D34 18%, #4A4E56 46%, #6B7079 56%, #3A3D44 70%, #2A2D34 86%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: carraraSheen 9s linear infinite;
}
.hero-meta { color: var(--muted); }
.hero-meta span::before { background: var(--gold); }

/* ---------- motion strip ---------- */
/* .motion-cell uses var(--coal) → auto-flips to silver surface */
.motion-cell .n { color: var(--gold); }
.motion-cell p { color: var(--muted); }
/* meaningful flow glyph: keep perceptible (>=3:1), no dimming opacity */
.motion-arrow { color: var(--ink-soft); opacity: 1; }

/* ---------- spotlight: recessed polished tray (tone + depth, no sparse lines) ---------- */
.spotlight {
  background: linear-gradient(180deg, #DCDEE3, #CFD2D7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(11, 11, 13, 0.06);
}

/* ---------- panel: inlaid polished tray ---------- */
.panel {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(224, 226, 230, 0.6));
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 1px 2px rgba(11, 11, 13, 0.06),
    0 30px 80px rgba(20, 22, 26, 0.12);
}
/* warm champagne inlay edge — brighter decorative gradient, more present */
.panel::after {
  background: linear-gradient(90deg, transparent, var(--champagne-1), var(--champagne-2), var(--champagne-1), transparent);
  opacity: 0.6;
}
.tag { color: var(--platinum); border: 1px solid var(--line); }
.mode { background: var(--smoke); border: 1px solid var(--line); }
.mode h3 { color: var(--ink-soft); }
.mode p { color: var(--muted); }

/* ---------- cards: raised polished marble tiles (beveled) ---------- */
.card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.66), rgba(228, 230, 233, 0.5));
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(11, 11, 13, 0.10),
    0 18px 50px rgba(20, 22, 26, 0.10);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(20, 22, 26, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(11, 11, 13, 0.12),
    0 26px 70px rgba(20, 22, 26, 0.16);
}
.card .corner { background: linear-gradient(225deg, rgba(150, 120, 70, 0.22), transparent 70%); }
.card .badge { color: var(--gold); }
.card p { color: var(--muted); }
.card a { color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.card a:hover { color: var(--text); border-color: var(--gold); }

/* ---------- founder ---------- */
.founder-portrait {
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(180deg, #EEF0F2, #DADCE0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 24px 60px rgba(20, 22, 26, 0.12);
}
.founder-portrait .mono {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(20, 22, 26, 0.35);
}
.founder-portrait .tagline { color: var(--gold); }
.founder p { color: var(--muted); }

/* ---------- close band: polished-stone pool of light ---------- */
.close-band {
  background:
    radial-gradient(600px 300px at 50% 120%, rgba(255, 255, 255, 0.6), transparent 70%),
    linear-gradient(180deg, #E6E8EB, #DDE0E4);
  border-top: 1px solid var(--line);
}
.close-band .ember-rule { background: linear-gradient(90deg, transparent, var(--ember-glow), transparent); }

/* ---------- footer: the second BLACK ANCHOR (plinth) ---------- */
/* inside footer ONLY, invert back to dark-mode token logic */
footer {
  background: var(--onyx);
  color: #C7CBD1;
  border-top: 1px solid rgba(20, 22, 26, 0.4);
}
.foot-brand { color: #fff; }
.foot-desc { color: #9A9DA4; }
.foot-col h4 { color: #C7CBD1; }
.foot-col a { color: #9A9DA4; }
.foot-col a:hover { color: #E7E8EA; }
.foot-bottom { color: #8D9097; border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* ===================== SUB-PAGE COMPONENTS ===================== */

/* page hero */
.page-hero {
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 140px),
    linear-gradient(180deg, #EDEEF1, #E2E4E8);
}
.breadcrumb { color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--text); }

/* split — recessed silver trays */
.split-col {
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.6), rgba(224, 226, 230, 0.5));
  box-shadow: inset 0 1px 2px rgba(11, 11, 13, 0.05);
}
/* monochrome discipline: YES = ink, NO = desaturated ember (the one warm note).
   No traffic-light green anywhere in the palette. */
.split-yes .mk { color: var(--ink-soft); border: 1px solid var(--line); }
.split-no .mk { color: var(--ember); border: 1px solid rgba(122, 34, 48, 0.4); }
.checklist li { color: var(--muted); }
.checklist li::before { background: var(--gold); opacity: 0.9; }
.checklist.no li::before { background: var(--ember); }

/* steps — engraved numerals on silver bands */
/* .step uses var(--coal) → auto-flips */
.step .num { color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--gold); }
.step p { color: var(--muted); }

/* example cards — beveled tiles */
.ex-card {
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.62), rgba(226, 228, 231, 0.5));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(11, 11, 13, 0.08),
    0 14px 40px rgba(20, 22, 26, 0.08);
}
.ex-card:hover { transform: translateY(-4px); border-color: rgba(20, 22, 26, 0.28); }
.ex-card .ico { color: var(--gold); }
.ex-card p { color: var(--muted); }
.ex-card .pill { color: var(--platinum); border: 1px solid var(--line); }

/* service list — silver surface */
.svc {
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.6), rgba(224, 226, 230, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.svc:hover { border-color: rgba(20, 22, 26, 0.28); }
.svc .ico { color: var(--gold); }
.svc p { color: var(--muted); }

/* micro-guide cards */
.guide {
  border: 1px solid var(--line);
  border-left: 2px solid var(--champagne-1);
  background: rgba(255, 255, 255, 0.85);
}
.guide .tagk { color: var(--gold); }
.guide p { color: var(--muted); }

/* tabs */
.tabs { border: 1px solid var(--line); }
.tab-btns { background: var(--graphite); border-bottom: 1px solid var(--line); }
.tab-btn { color: var(--muted); }
.tab-btn:hover, .tab-btn.active { color: var(--text); }
.tab-btn.active::after { background: linear-gradient(90deg, var(--gold), transparent); }
/* near-opaque so marble veins can't bleed under long copy */
.tab-panel { background: rgba(255, 255, 255, 0.85); }
.tab-panel p { color: var(--muted); }

/* deliverable list */
.deliver li { color: var(--text); }
.deliver li::before { color: var(--gold); }
.deliver li span { color: var(--muted); }

/* mini CTA — polished-stone pool */
.mini-cta {
  border: 1px solid var(--line);
  background:
    radial-gradient(500px 240px at 50% 120%, rgba(255, 255, 255, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(228, 230, 233, 0.4));
}
.mini-cta p { color: var(--muted); }

/* ===================== ACCORDION (quiet the marble for FAQ) ===================== */
.accordion { border: 1px solid var(--line); }
.acc-item + .acc-item { border-top: 1px solid var(--line); }
/* .acc-head uses var(--coal) → auto-flips; refine hover/expanded */
.acc-head { color: var(--text); }
.acc-head:hover,
.acc-head[aria-expanded="true"] { background: #E2E4E8; }
.acc-ic { color: var(--gold); }
.acc-body { background: rgba(255, 255, 255, 0.85); }   /* near-opaque stone under answers */
.acc-body p { color: var(--muted); }

/* ===================== CONTACT + LEGAL ===================== */
.contact-line { color: var(--muted); }
.contact-line a { color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.contact-line a:hover { color: var(--text); border-color: var(--gold); }

/* legal: legibility-first on a near-opaque surface (veins masked) */
.legal {
  max-width: 780px;
  background: rgba(255, 255, 255, 0.85);
}
.legal h1, .legal h2 { color: var(--text); }
.legal p, .legal li { color: var(--muted); }
.legal a { color: var(--gold); }
.legal .updated { color: var(--muted); }
.legal .back { color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.legal .back:hover { color: var(--text); border-color: var(--gold); }

/* ===================== FLASH MOTION (chrome / shine, hover-disciplined) ===================== */

/* engraved-pewter sheen headings (slow, autoplay — the one ambient flash).
   DARK-DOMINANT: stops bottom out at ink (#2A2D34) and never exceed
   #5A5E66, so no part of the animated sweep drops below 4.5:1 on slab.
   Single source of truth for .metal (no earlier dead declaration). */
@keyframes carraraSheen { 0% { background-position: -160% 0; } 100% { background-position: 160% 0; } }
.metal {
  background: linear-gradient(100deg,
    var(--pewter-lo) 0%,
    var(--pewter-lo) 40%,
    var(--pewter-hi) 50%,
    var(--pewter-lo) 60%,
    var(--pewter-lo) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  animation: carraraSheen 9s linear infinite;
}

/* single shine sweep — HOVER ONLY (never autoplay): light moving across stone */
@keyframes slabShine {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(230%) skewX(-18deg); }
}
.card, .ex-card, .panel { position: relative; overflow: hidden; }
.card::before, .ex-card::before, .panel::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 36%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-130%) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.card:hover::before, .ex-card:hover::before, .panel:hover::before {
  opacity: 1;
  animation: slabShine 1.1s ease-out;
}

/* the single surgical warm note — champagne ember-rule drift */
@keyframes emberDrift { 0% { background-position: -120% 0; } 100% { background-position: 120% 0; } }
.ember-rule {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, var(--ember-glow), transparent);
}
.ember-rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(200, 168, 106, 0.55), transparent);
  background-size: 200% 100%;
  animation: emberDrift 4.5s linear infinite;
}

/* polished-stone hover underline grow (NON-footer links only) */
.card a, .contact-line a, .legal a {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s ease, color .2s, border-color .2s;
}
.card a:hover, .contact-line a:hover, .legal a:hover { background-size: 100% 1px; }

/* footer links: own LIGHT underline that actually grows on the onyx plinth */
footer .foot-col a {
  background-image: linear-gradient(#E7E8EA, #E7E8EA);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s ease, color .2s;
}
footer .foot-col a:hover { background-size: 100% 1px; }

/* low-power / mobile: actually DROP the fine-vein layer (re-declare images)
   and use scroll attachment to kill fixed-gradient repaint jank. */
@media (max-width: 600px) {
  body::before {
    background-attachment: scroll;
    background:
      radial-gradient(120% 46% at 16% 10%, rgba(11, 11, 13, 0.12) 0%, rgba(11, 11, 13, 0) 34%),
      repeating-linear-gradient(23deg,
        rgba(22, 26, 34, 0) 0px,
        rgba(22, 26, 34, 0) 50px,
        rgba(22, 26, 34, 0.15) 53px,
        rgba(22, 26, 34, 0.28) 55px,
        rgba(22, 26, 34, 0.15) 57px,
        rgba(22, 26, 34, 0) 60px,
        rgba(22, 26, 34, 0) 116px),
      repeating-linear-gradient(19deg,
        rgba(255, 255, 255, 0) 0px,
        rgba(255, 255, 255, 0.34) 18px,
        rgba(255, 255, 255, 0) 48px,
        rgba(20, 22, 26, 0.05) 84px,
        rgba(255, 255, 255, 0) 140px),
      linear-gradient(176deg, #F4F5F6 0%, #E9EBEE 42%, #E2E4E8 72%, #DBDDE2 100%);
    background-size: 100% 100%, auto, auto, 100% 100%;
  }
}

/* ===================== REDUCED-MOTION FALLBACK (must live AFTER this override) =====================
   The global reduced-motion block sits at styles.css L386-389 — BEFORE this
   appended override — so it suppresses our new animations but leaves the
   clipped-text elements frozen mid-sweep (potentially invisible). Restore a
   solid ink fill for every clipped-text element so headings stay legible. */
@media (prefers-reduced-motion: reduce) {
  .metal,
  .hero h1 .stroke,
  .founder-portrait .mono,
  .step .num {
    -webkit-background-clip: border-box;
    background-clip: border-box;
    background-image: none;
    background: none;
    color: var(--ink-soft);
    -webkit-text-fill-color: var(--ink-soft);
    -webkit-text-stroke: 0;
  }
  .ember-rule::after { display: none; }
}
/* =====================================================================
   THE G CODE™ — REAL MARBLE BACKDROPS + BARS  (brand photos, gold-veined)
   Black/silver/gold marble from /assets/img. Backdrops carry tuned scrims
   so text stays AA; dark zones (footer/close) flip to light text.
   ===================================================================== */

/* ---------- HERO: marble backdrop, left-graded scrim keeps dark text legible ---------- */
.hero {
  background:
    linear-gradient(100deg,
      rgba(244,245,247,0.93) 0%,
      rgba(244,245,247,0.74) 40%,
      rgba(244,245,247,0.34) 66%,
      rgba(244,245,247,0.05) 100%),
    linear-gradient(180deg, rgba(244,245,247,0.80), rgba(244,245,247,0) 240px),
    url("assets/img/marble4.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, 62% center;
  background-repeat: no-repeat;
}

/* ---------- SUB-PAGE HERO: lighter marble band ---------- */
.page-hero {
  background:
    linear-gradient(100deg, rgba(244,245,247,0.92) 0%, rgba(244,245,247,0.7) 50%, rgba(244,245,247,0.4) 100%),
    linear-gradient(180deg, rgba(244,245,247,0.6), rgba(244,245,247,0.78)),
    url("assets/img/marble3.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}

/* ---------- FOOTER: dark marble plinth (stays the black anchor) ---------- */
footer {
  background:
    linear-gradient(rgba(8,9,11,0.74), rgba(8,9,11,0.84)),
    url("assets/img/marble2.jpg");
  background-size: cover, cover;
  background-position: center, center;
}

/* ---------- CLOSE BAND + MINI-CTA: dramatic dark-marble CTA, light text ---------- */
.close-band, .mini-cta {
  background:
    linear-gradient(rgba(8,9,11,0.60), rgba(8,9,11,0.74)),
    url("assets/img/marble1.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  border-color: rgba(255,255,255,0.10);
}
.close-band h2, .mini-cta h2 { color: #fff; }
.close-band .kicker, .mini-cta .kicker { color: var(--champagne-2); }
.close-band .lead, .mini-cta p, .mini-cta .lead { color: #D7DADF; }
.close-band .contact-line { color: #C7CBD1; }
.close-band .contact-line a, .mini-cta a:not(.btn) { color: #fff; }
/* ghost buttons on dark marble → light outline */
.close-band .btn-ghost, .mini-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.45); }
.close-band .btn-ghost:hover, .mini-cta .btn-ghost:hover { border-color: #fff; }

/* ---------- BARS: sliced marble strips as accents / dividers ---------- */
/* home divider → silver-marble bar */
.hairline {
  height: 6px; border: 0; box-shadow: none;
  background: url("assets/img/bar-silver.jpg");
  background-size: cover; background-position: center;
}
/* every spotlight section gets a gold-vein seam bar at the top */
.spotlight { border-top: 0; }
.spotlight::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: url("assets/img/bar-vein.jpg");
  background-size: cover; background-position: center;
  z-index: 1;
}
/* panel top accent → real gold-marble seam bar (was a flat gradient line) */
.panel::after {
  height: 6px;
  background: url("assets/img/bar-gold.jpg");
  background-size: cover; background-position: center;
  opacity: 1;
}
/* ember-rule (close-band flourish) → gold-marble strip */
.ember-rule {
  height: 4px;
  background: url("assets/img/bar-gold.jpg");
  background-size: cover; background-position: center;
}
.ember-rule::after { display: none; }

/* =====================================================================
   MARBLE FILLS v2 — roll marble to the bottom + cut pieces into bubbles
   (later rules win the cascade). Light scrims keep text AA-legible.
   ===================================================================== */

/* FULL-PAGE marble backdrop — fixed cover so it rolls behind every section
   to the very bottom of every page. Light scrim keeps bare-section text legible. */
body::before {
  background:
    linear-gradient(rgba(238,239,242,0.72), rgba(243,244,246,0.78)),
    url("assets/img/marble3.jpg");
  background-size: cover, cover;
  background-position: center top, center top;
  background-attachment: scroll, scroll;
  z-index: -1;
}

/* spotlight band: let the page marble show through (was a flat bare tray) */
.spotlight {
  background: linear-gradient(rgba(228,230,233,0.34), rgba(220,223,227,0.46)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(11,11,13,0.05);
}
.page-hero { /* keep its own marble3 backdrop, already set above */ }

/* BUBBLES → cut marble tiles (strong light scrim = legible dark text on stone) */
.card, .ex-card {
  background:
    linear-gradient(158deg, rgba(248,249,250,0.85), rgba(231,233,236,0.80)),
    url("assets/img/marble1.jpg") !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
}
.panel {
  background:
    linear-gradient(158deg, rgba(248,249,250,0.88), rgba(232,234,237,0.84)),
    url("assets/img/marble4.jpg") !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
}
.svc, .guide, .split-col, .mode {
  background:
    linear-gradient(158deg, rgba(249,250,251,0.88), rgba(233,235,238,0.83)),
    url("assets/img/marble3.jpg") !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
}
.motion-cell {
  background:
    linear-gradient(158deg, rgba(247,248,250,0.86), rgba(230,232,235,0.82)),
    url("assets/img/marble2.jpg") !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
}
.motion-cell:hover {
  background:
    linear-gradient(158deg, rgba(244,245,247,0.78), rgba(226,228,232,0.74)),
    url("assets/img/marble2.jpg") !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
}

/* =====================================================================
   DAY ONE MVP™ — EDITORIAL TEXT/INTERFACE OVERLAY
   Marble background is LOCKED — this layer only adds typography, buttons,
   thin dividers, and subtle translucent smoke panels for readability.
   Light text on smoke panels = documentary energy, legible over marble.
   ===================================================================== */

.overlay-sec { padding: clamp(72px, 11vh, 130px) 0; position: relative; }

/* subtle translucent smoke panel (marble stays visible through blur + around it) */
.smoke {
  position: relative;
  max-width: 760px;
  padding: clamp(30px, 5vw, 62px);
  background: linear-gradient(180deg, rgba(8,9,11,0.60), rgba(8,9,11,0.50));
  -webkit-backdrop-filter: blur(9px) saturate(1.04);
  backdrop-filter: blur(9px) saturate(1.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 7px;
  box-shadow: 0 34px 90px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
  color: #E7E8EA;
}
.smoke.right  { margin-left: auto; }
.smoke.center { margin: 0 auto; text-align: center; }
.smoke.wide   { max-width: 880px; }

/* champagne hairline accent on panels */
.smoke::before {
  content: ""; position: absolute; top: 0; left: clamp(30px,5vw,62px); right: clamp(30px,5vw,62px);
  height: 1px; background: linear-gradient(90deg, transparent, var(--champagne-2), transparent); opacity: .55;
}
.smoke.center::before { left: 22%; right: 22%; }

/* labels + type on smoke */
.eyebrow {
  display: block; font-family: "Oswald", sans-serif; text-transform: uppercase;
  letter-spacing: 0.34em; font-size: 12px; color: var(--champagne-2); margin-bottom: 20px;
}
.mega {
  font-family: "Archivo", sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(58px, 11vw, 152px); line-height: 0.9; letter-spacing: -0.02em;
  color: #fff; margin: 0 0 20px; text-wrap: balance;
}
.mega .tm { font-size: 0.26em; vertical-align: super; color: var(--champagne-2); }
.statement {
  font-family: "Archivo", sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(24px, 4.2vw, 46px); line-height: 1.02; letter-spacing: -0.01em;
  color: #fff; margin: 0 0 24px;
}
.statement .accent { color: var(--champagne-2); display: block; }
.support { color: #CACDD2; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; max-width: 60ch; margin: 0 0 12px; }
.smoke.center .support { margin-left: auto; margin-right: auto; }
.powered { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; color: #9A9DA4; margin-top: 24px; }
.smoke h2 { color: #fff; margin-bottom: 18px; }
.smoke > p:not(.support):not(.powered) { color: #CACDD2; margin-bottom: 14px; }

/* CTA row + light buttons (sit on smoke / marble) */
.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.smoke.center .cta-row { justify-content: center; }
.btn-ghost-light { background: rgba(255,255,255,0.02); color: #fff; border: 1px solid rgba(255,255,255,0.5); }
.btn-ghost-light:hover { border-color: #fff; transform: translateY(-2px); }
.link-light { color: #fff; font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; text-decoration: none; border-bottom: 1px solid var(--champagne-2); padding-bottom: 3px; transition: color .2s; }
.link-light:hover { color: var(--champagne-2); }

/* process — thin dividers, no heavy boxes */
.process { margin-top: 34px; }
.pstep {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: baseline;
  padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.13);
}
.pstep:last-child { border-bottom: 1px solid rgba(255,255,255,0.13); }
.pstep .pn { font-family: "Archivo", sans-serif; font-weight: 800; text-transform: uppercase; color: #fff; font-size: 17px; letter-spacing: 0.02em; }
.pstep .pn b { color: var(--champagne-2); font-weight: 800; }
.pstep p { color: #C2C5CB; font-size: 15.5px; line-height: 1.55; }

/* pull quote */
.pull {
  font-family: "Archivo", sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(22px, 2.9vw, 34px); line-height: 1.1; color: #fff;
  border-left: 2px solid var(--champagne-2); padding-left: 24px; margin: 26px 0;
}

@media (max-width: 760px) {
  .pstep { grid-template-columns: 1fr; gap: 8px; }
  .smoke { max-width: 100%; }
}

/* =====================================================================
   DAY ONE MVP™ — categories, pricing preview, idea form, pricing table
   (overlay only — marble untouched). Dark smoke context, light text.
   ===================================================================== */

/* six category one-liners */
.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; margin-top: 30px; }
.cat h3 { color: #fff; font-size: 18px; letter-spacing: 0; margin-bottom: 5px; }
.cat p { color: #C2C5CB; font-size: 14.5px; line-height: 1.5; }
@media (max-width: 760px) { .cats { grid-template-columns: 1fr; } }

/* pricing preview row */
.price-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin-top: 28px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; overflow: hidden; }
.price-cell { background: rgba(8,9,11,0.42); padding: 22px 14px; text-align: center; }
.price-cell .pl { display: block; font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; color: #C2C5CB; margin-bottom: 9px; }
.price-cell .pv { font-family: "Archivo", sans-serif; font-weight: 800; color: #fff; font-size: 18px; }
.price-cell .pv small { display: block; color: var(--champagne-2); font-size: 11px; font-weight: 600; margin-top: 2px; }
@media (max-width: 760px) { .price-row { grid-template-columns: 1fr 1fr; } }

/* idea-submission form */
.idea-form { margin-top: 28px; display: grid; gap: 14px; text-align: left; }
.idea-form .field { display: grid; gap: 6px; }
.idea-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.idea-form label { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--champagne-2); }
.idea-form input, .idea-form textarea, .idea-form select {
  width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.20);
  border-radius: 4px; padding: 14px 16px; color: #fff; font-family: "Inter", sans-serif; font-size: 15px; }
.idea-form textarea { min-height: 92px; resize: vertical; }
.idea-form input:focus, .idea-form textarea:focus, .idea-form select:focus { outline: none; border-color: var(--champagne-2); }
.idea-form select { appearance: none; cursor: pointer; }
.idea-form .btn-primary { justify-self: start; cursor: pointer; }
.form-alt { margin-top: 12px; color: #9A9DA4; font-size: 13px; }
.form-alt a { color: #fff; }
@media (max-width: 600px) { .idea-form .row2 { grid-template-columns: 1fr; } .idea-form .btn-primary { justify-self: stretch; text-align: center; justify-content: center; } }

/* pricing table (inside a dark smoke panel) */
.ptable { width: 100%; border-collapse: collapse; margin-top: 8px; }
.ptable th, .ptable td { text-align: left; padding: 15px 14px; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 14px; color: #C2C5CB; vertical-align: top; }
.ptable th { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: #C7CBD1; }
.ptable td strong { color: #fff; }
.ptable .price { font-family: "Archivo", sans-serif; font-weight: 800; color: #fff; white-space: nowrap; }
.ptable tr:last-child td { border-bottom: 0; }
.ptable-note { color: #9A9DA4; font-size: 13.5px; margin-top: 18px; }
@media (max-width: 700px) { .ptable, .ptable thead, .ptable tbody, .ptable th, .ptable td, .ptable tr { display: block; }
  .ptable thead { display: none; } .ptable td { border: 0; padding: 4px 0; }
  .ptable tr { border-bottom: 1px solid rgba(255,255,255,0.14); padding: 16px 0; } }

/* Day One MVP logo — black-bg art, screen blend drops black on dark panels */
.brandmark { display: block; width: clamp(230px, 40vw, 400px); height: auto; margin: 0 auto 18px; mix-blend-mode: screen; }
.smoke .brandmark { margin-left: 0; }
.smoke.center .brandmark, .hero .smoke .brandmark { margin-left: auto; margin-right: auto; }
.foot-logo { display: block; width: 210px; height: auto; margin-bottom: 12px; mix-blend-mode: screen; }

/* =====================================================================
   DESKTOP LEGIBILITY POLISH — overlay only, marble untouched.
   Center panels, stop heading overlap, calm the vertical rhythm,
   balance line breaks. Loaded last so it wins the cascade.
   ===================================================================== */

/* center every panel; kill the off-center right-edge shove */
.smoke { margin-left: auto; margin-right: auto; max-width: 860px; }
.smoke.wide { max-width: 940px; }
.smoke.right { margin-left: auto; margin-right: auto; }
.hero .smoke, .page-hero .smoke { max-width: 1040px; }

/* consistent, calmer space between sections (was up to 130px) */
.overlay-sec { padding: clamp(46px, 6vh, 86px) 0; }

/* HEADINGS: stop the smush (was line-height .9 / 1.02), balance the wraps */
.mega { line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; }
h1.mega { font-size: clamp(36px, 5.2vw, 74px); }
.statement { line-height: 1.1; text-wrap: balance; }
.statement .accent { display: block; margin-top: 0.1em; }
.smoke h2 { text-wrap: balance; line-height: 1.06; }

/* BODY: nicer line endings, comfortable measure */
.support { text-wrap: pretty; max-width: 64ch; }
.smoke.center .support { margin-left: auto; margin-right: auto; }

/* a touch more breathing room inside panels on desktop */
@media (min-width: 760px) {
  .smoke { padding: 48px 56px; }
  .cats { gap: 22px 40px; }
}

/* =====================================================================
   WORLD PAGES (Day One MVP set): richer marble so the gold-black stone
   reads instead of a flat grey wash. Light pages keep the lighter marble.
   ===================================================================== */
body.world::before {
  background:
    linear-gradient(rgba(236,237,240,0.22), rgba(240,241,244,0.34)),
    url("assets/img/marble1.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}

/* =====================================================================
   DEFINITIVE FIX — solid cards on rich marble (no translucent film).
   Cards are opaque + crisp; the gold-black marble runs rich around them.
   ===================================================================== */
.smoke {
  background: linear-gradient(160deg, #181a20, #0f1014) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,0.45) !important;
  border-radius: 8px;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.smoke::before { display: block !important; }

/* rich marble on the Day One pages (drop the heavy white wash) */
body.world::before {
  background:
    linear-gradient(rgba(228,229,233,0.14), rgba(232,233,237,0.26)),
    url("assets/img/marble1.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
}
/* don't stack a second marble in the page-hero — let the body marble show */
body.world .page-hero {
  background: linear-gradient(180deg, rgba(8,9,11,0.45), rgba(8,9,11,0.10) 240px) !important;
}

/* transparent Day One MVP logo — clean, no blend needed */
.brandmark { display: block; width: clamp(210px, 28vw, 320px); height: auto; margin: 0 0 22px; mix-blend-mode: normal; }
.smoke.center .brandmark { margin-left: auto; margin-right: auto; }
.foot-logo { display: block; width: 200px; height: auto; margin-bottom: 14px; mix-blend-mode: normal; }

/* some transparency in the cards — rich marble whispers through (no blur = no film) */
.smoke {
  background: linear-gradient(160deg, rgba(21,22,27,0.84), rgba(13,14,18,0.90)) !important;
}

/* more transparency — let more marble through (watch legibility) */
.smoke { background: linear-gradient(160deg, rgba(20,21,26,0.70), rgba(12,13,17,0.80)) !important; }

/* more again */
.smoke { background: linear-gradient(160deg, rgba(18,19,24,0.60), rgba(11,12,16,0.72)) !important; }

/* crisp type — tiny shadow for edge definition only (no blur halo = no fog) */
.smoke h1, .smoke h2, .smoke .mega, .smoke .statement, .smoke blockquote { text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
.smoke .support, .smoke p, .smoke .eyebrow, .smoke .cat h3, .smoke .cat p, .smoke .powered, .smoke .form-alt { text-shadow: none; }

/* FINAL card surface — near-solid dark glass. Marble whispers through in the
   dark regions, but text stays crisp over ANY part of the stone. Kills the fog. */
.smoke { background: linear-gradient(160deg, rgba(16,17,22,0.92), rgba(10,11,14,0.95)) !important; }

/* =====================================================================
   BUILD LEVELS / DETAIL-PAGE COMPONENTS
   ===================================================================== */
.lvl-badge { display:inline-block; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.24em; font-size:11px; color:var(--champagne-2); border:1px solid rgba(200,168,106,0.4); padding:6px 14px; border-radius:2px; margin-bottom:18px; }
.price-big { font-family:"Archivo",sans-serif; font-weight:900; color:#fff; font-size:clamp(40px,7vw,80px); line-height:1; letter-spacing:-0.02em; margin:6px 0 8px; text-shadow:0 2px 20px rgba(0,0,0,0.5); }
.price-big small { display:block; font-family:"Oswald",sans-serif; font-weight:500; font-size:12px; letter-spacing:.16em; color:var(--champagne-2); text-transform:uppercase; margin-top:12px; }
.pay-struct { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.pay-struct span { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:#C7CBD1; border:1px solid rgba(255,255,255,0.16); padding:8px 14px; border-radius:3px; }

/* included checklist, multi-column */
.incl { columns: 2; column-gap: 44px; margin-top: 20px; }
.incl li { break-inside: avoid; list-style: none; position: relative; padding-left: 24px; margin-bottom: 11px; color:#C2C5CB; font-size:15px; }
.incl li::before { content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:1px; background:var(--champagne-2); opacity:.85; }
@media (max-width:760px){ .incl { columns: 1; } }

/* hub level cards */
.lvl-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:30px; }
.lvl-card { display:block; text-decoration:none; border:1px solid rgba(255,255,255,0.10); border-radius:8px; padding:32px; background:linear-gradient(160deg, rgba(19,20,25,0.72), rgba(12,13,17,0.82)); transition:transform .3s, border-color .3s; position:relative; }
.lvl-card:hover { transform:translateY(-4px); border-color:rgba(200,168,106,0.45); }
.lvl-card .lvln { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.2em; font-size:11px; color:var(--champagne-2); }
.lvl-card h3 { color:#fff; font-size:24px; letter-spacing:0; margin:8px 0 6px; }
.lvl-card .lp { font-family:"Archivo",sans-serif; font-weight:800; color:#fff; font-size:28px; margin:10px 0; }
.lvl-card p { color:#B9BCC2; font-size:14.5px; }
.lvl-card .camp { display:inline-block; margin-top:14px; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; color:#C7CBD1; border:1px solid rgba(255,255,255,0.14); padding:6px 12px; border-radius:2px; }
.lvl-card .go { display:block; margin-top:18px; color:var(--champagne-2); font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:12px; }
@media (max-width:760px){ .lvl-grid { grid-template-columns:1fr; } }

/* prev / next level nav */
.level-nav { display:flex; justify-content:space-between; gap:16px; margin-top:8px; }
.level-nav a { flex:1; text-decoration:none; border:1px solid rgba(255,255,255,0.12); border-radius:6px; padding:20px 22px; background:rgba(12,13,17,0.6); transition:border-color .3s,transform .3s; }
.level-nav a:hover { border-color:rgba(200,168,106,0.4); transform:translateY(-2px); }
.level-nav .dir { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:10px; color:#9A9DA4; }
.level-nav .nm { display:block; color:#fff; font-family:"Archivo",sans-serif; font-weight:700; margin-top:6px; }
.level-nav .next { text-align:right; }

/* campaign phase blocks */
.phase { border-left:2px solid var(--champagne-2); padding:4px 0 4px 22px; margin:18px 0; }
.phase h4 { color:#fff; font-family:"Archivo",sans-serif; font-weight:800; text-transform:uppercase; font-size:15px; letter-spacing:.02em; margin-bottom:6px; }
.phase p { color:#B9BCC2; font-size:14.5px; }

/* "not included" muted list */
.checklist.muted li::before { background:#7a4a4a; }
.checklist.muted li { color:#9A9DA4; }

/* =====================================================================
   V2 — TECH ANSWERS BOARD + supporting components
   ===================================================================== */
.board-tools { margin-top: 30px; }
.board-search { width: 100%; display: flex; gap: 12px; }
.board-search input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; padding: 16px 18px; color: #fff; font-family: "Inter",sans-serif; font-size: 16px; }
.board-search input:focus { outline: none; border-color: var(--champagne-2); }
.board-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fchip { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.16); color: #C2C5CB; font-family: "Oswald",sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; padding: 8px 14px; border-radius: 20px; cursor: pointer; transition: all .2s; }
.fchip:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.fchip.active { background: var(--champagne-2); border-color: var(--champagne-2); color: #14130f; }
.board-count { color: #9A9DA4; font-size: 13px; margin-top: 16px; font-family: "Oswald",sans-serif; text-transform: uppercase; letter-spacing: .1em; }

.term-list { margin-top: 22px; display: grid; gap: 12px; }
.term { border: 1px solid rgba(255,255,255,0.10); border-radius: 7px; background: rgba(12,13,17,0.55); overflow: hidden; }
.term-head { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; }
.term-head:hover { background: rgba(255,255,255,0.03); }
.term-head .t { font-family: "Archivo",sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0; }
.term-head .cat { font-family: "Oswald",sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 9.5px; color: var(--champagne-2); border: 1px solid rgba(200,168,106,0.35); padding: 4px 9px; border-radius: 2px; white-space: nowrap; }
.term-head .ic { color: var(--champagne-2); font-family: "Archivo"; font-weight: 700; font-size: 20px; transition: transform .3s; }
.term[open] .term-head .ic, .term.open .term-head .ic { transform: rotate(45deg); }
.term-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.term-body.open { max-height: 600px; }
.term-body .inner { padding: 0 24px 24px; }
.term-body p { color: #C2C5CB; font-size: 15.5px; line-height: 1.6; }
.term-body .field { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.term-body .field .lbl { font-family: "Oswald",sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; color: var(--champagne-2); display: block; margin-bottom: 5px; }
.term-body .field p { color: #B9BCC2; font-size: 14.5px; }
.term-body .related { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.term-body .related a { color: #C7CBD1; font-size: 12px; border: 1px solid rgba(255,255,255,0.14); padding: 5px 11px; border-radius: 14px; text-decoration: none; cursor: pointer; }
.term-body .related a:hover { color: #fff; border-color: var(--champagne-2); }
.board-empty { color: #9A9DA4; padding: 30px 0; text-align: center; }

/* most-asked FAQ */
.most-asked { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 26px; }
.qa { border: 1px solid rgba(255,255,255,0.10); border-left: 2px solid var(--champagne-2); border-radius: 4px; padding: 24px; background: rgba(12,13,17,0.5); }
.qa h4 { color: #fff; font-family: "Archivo",sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 0; margin-bottom: 8px; }
.qa p { color: #B9BCC2; font-size: 14.5px; line-height: 1.55; }
@media (max-width: 760px){ .most-asked { grid-template-columns: 1fr; } }

/* service category blocks (what we build) */
.svc-cat { border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; padding: 30px; background: linear-gradient(160deg, rgba(19,20,25,0.62), rgba(12,13,17,0.74)); }
.svc-cat h3 { color: #fff; font-size: 21px; letter-spacing: 0; margin-bottom: 14px; }
.svc-cat ul { columns: 2; column-gap: 30px; list-style: none; }
.svc-cat li { break-inside: avoid; position: relative; padding-left: 20px; margin-bottom: 9px; color: #C2C5CB; font-size: 14.5px; }
.svc-cat li::before { content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:1px; background: var(--champagne-2); opacity:.8; }
@media (max-width: 600px){ .svc-cat ul { columns: 1; } }

/* partner / impact paths */
.path-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 24px; }
.path-grid span { border: 1px solid rgba(255,255,255,0.14); border-radius: 5px; padding: 16px 14px; text-align: center; color: #C7CBD1; font-family: "Oswald",sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
@media (max-width: 760px){ .path-grid { grid-template-columns: repeat(2,1fr); } }

/* programs-in-development tag */
.dev-tag { display:inline-block; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.18em; font-size:10px; color:#9A9DA4; border:1px dashed rgba(255,255,255,0.22); padding:5px 12px; border-radius:2px; margin-bottom:18px; }

/* Controlled contrast: mute the content-section marble so dark boxes stay king,
   with a dark-top → lighter-bottom gradient to guide the eye, a slight zoom for
   cleaner/larger pattern sections, and a touch more gold saturation so the
   veining breathes. (Hero areas keep their own marble + black box.) */
body.world::before {
  background:
    linear-gradient(180deg, rgba(8,9,11,0.66) 0%, rgba(8,9,11,0.50) 48%, rgba(8,9,11,0.32) 100%),
    url("assets/img/marble1.jpg") !important;
  background-size: cover, 134% !important;
  background-position: center, center !important;
  background-attachment: scroll !important;
  filter: saturate(1.18) contrast(1.05) !important;
}

/* =====================================================================
   WORLD PAGES: content sits on dark glass cards. The dark-theme grey
   tokens (--muted/--platinum) vanish there — force body text light.
   ===================================================================== */
body.world .lead,
body.world .smoke .lead,
body.world .breadcrumb,
body.world .breadcrumb a,
body.world .smoke .checklist li,
body.world .smoke .step p,
body.world .smoke .deliver li span,
body.world .smoke .mode p,
body.world .smoke .ex-card p,
body.world .smoke .svc p,
body.world .smoke .svc-cat li,
body.world .smoke .guide p,
body.world .smoke .tag,
body.world .smoke .pill,
body.world .smoke .support { color: #DDE0E4 !important; }

body.world .smoke .checklist li strong,
body.world .smoke .deliver li,
body.world .smoke .mode h3,
body.world .smoke .svc-cat h3 { color: #fff !important; }

/* clipped/engraved bits that were dark in the silver theme */
body.world .smoke .metal { background: none !important; -webkit-text-fill-color: #DDE0E4 !important; color: #DDE0E4 !important; -webkit-text-stroke: 0 !important; }
body.world .smoke .step .num { -webkit-text-stroke: 1px var(--champagne-2) !important; }
body.world .smoke .checklist li::before { background: var(--champagne-2) !important; }
body.world .breadcrumb a:hover { color: #fff !important; }

/* impact partner chips are now links into the form */
.path-grid a { display:block; text-decoration:none; border:1px solid rgba(255,255,255,0.16); border-radius:5px; padding:16px 14px; text-align:center; color:#DDE0E4; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:12px; transition:border-color .25s,color .25s,transform .25s; }
.path-grid a:hover { border-color:var(--champagne-2); color:#fff; transform:translateY(-2px); }

/* =====================================================================
   BREATHE — give the world pages the homepage's airy rhythm.
   Generous marble bands between every card; the hero opens on stone
   before the first panel; cards are framed by stone on the sides too.
   ===================================================================== */
/* roomier marble gap between stacked cards (was ~50px each side → ~80px) */
body.world .overlay-sec { padding: clamp(62px, 9.5vh, 124px) 0; }

/* hero breathes: marble shows above the first card (under the nav) and below it */
body.world .hero, body.world .page-hero { padding-top: clamp(104px, 17vh, 188px); padding-bottom: clamp(44px, 8vh, 104px); }

/* the first content section sits a touch lower so the hero card has room to land */
body.world .hero + .overlay-sec, body.world .page-hero + .overlay-sec { padding-top: clamp(40px, 6vh, 80px); }

/* frame cards with a little more stone on the sides at wider widths */
body.world .smoke      { max-width: 720px; }
body.world .smoke.wide { max-width: 840px; }

/* on a phone: a hair more stone on the sides so each card reads as its own object */
@media (max-width: 600px) {
  body.world .wrap { padding-left: 22px; padding-right: 22px; }
  body.world .overlay-sec { padding: clamp(54px, 8vh, 80px) 0; }
  /* trim towering hero titles on phones so stone breathes around them */
  body.world .hero .mega, body.world .page-hero .mega { font-size: clamp(33px, 8.8vw, 46px) !important; line-height: 0.96; }
}

/* =====================================================================
   HOW IT WORKS — the .steps panel is a LIGHT card (var(--coal) #E4E6E9).
   World pages force body text white, so the step words turned into
   ghost text (white on light = the "glow"). Force them dark, no shadow.
   ===================================================================== */
body.world .smoke .step h3 { color: var(--text) !important; text-shadow: none !important; }
body.world .smoke .step p  { color: #3C4047 !important; text-shadow: none !important; }
body.world .smoke .step .num { -webkit-text-stroke: 1px var(--gold) !important; }

/* =====================================================================
   LEGAL PAGES on the world theme — privacy + terms now sit on the marble.
   The light-theme .legal column becomes a dark glass card with light copy,
   breathing on the stone like every other world page.
   ===================================================================== */
body.world .legal {
  background: linear-gradient(160deg, rgba(16,17,22,0.92), rgba(10,11,14,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.45);
  max-width: min(820px, calc(100% - 48px));
  margin: clamp(120px, 17vh, 196px) auto clamp(70px, 10vh, 120px);
  padding: clamp(34px, 5vw, 64px);
}
body.world .legal h1, body.world .legal h2 { color: #fff; }
body.world .legal p, body.world .legal li { color: #DDE0E4; }
body.world .legal a { color: var(--champagne-2); background-image: none; }
body.world .legal .kicker { color: var(--champagne-2); }
body.world .legal .updated { color: #9A9DA4; }
body.world .legal .back { color: #DDE0E4; border-bottom-color: rgba(255,255,255,0.22); }
body.world .legal .back:hover { color: #fff; border-color: var(--champagne-2); }
@media (max-width: 600px) {
  body.world .legal { margin-top: clamp(104px, 15vh, 150px); padding: 30px 24px; }
}

/* =====================================================================
   ROOT CAUSE OF THE "FOG" — .spotlight is a LIGHT silver-theme scrim
   (background: linear-gradient(rgba(228,229,233,~0.4)...) + light inset
   highlights + a bar-vein seam). On the dark marble world pages it washes
   the stone into a hazy grey band on every OTHER section. The homepage has
   NO .spotlight sections — which is exactly why only it looked right.
   Neutralize it on world pages so the marble shows through clean, making
   spotlight sections identical to the regular ones (like the homepage).
   ===================================================================== */
body.world .spotlight { background: transparent !important; box-shadow: none !important; }
body.world .spotlight::before { display: none !important; }

/* DEMARCATION LINES — full-width hairline rules drawn across the marble at
   section edges (.page-hero + .spotlight border-bottom = var(--line)). The
   homepage has neither. Remove them on world pages for a seamless backdrop. */
body.world .page-hero { border-bottom: 0 !important; }
body.world .spotlight { border-top: 0 !important; border-bottom: 0 !important; }

/* =====================================================================
   HOW IT WORKS — rich accordion on the world theme. The legacy accordion
   is light-themed (var(--coal) head, dark body text) and clips at 240px.
   Re-skin it dark, open it wide, and style the structured body content.
   ===================================================================== */
body.world .accordion { border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; margin-top: 24px; }
body.world .acc-item + .acc-item { border-top: 1px solid rgba(255,255,255,0.10); }
body.world .acc-head { background: rgba(255,255,255,0.035); color: #fff; padding: 20px 22px; font-size: 14.5px; align-items: center; }
body.world .acc-head:hover, body.world .acc-head[aria-expanded="true"] { background: rgba(255,255,255,0.07); }
body.world .acc-ic { color: var(--champagne-2); }
.acc-label { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.acc-n { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 13px; color: var(--champagne-2); letter-spacing: .03em; }
.acc-eng { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: 9.5px; color: #B9BDC4; border: 1px solid rgba(200,168,106,0.45); border-radius: 2px; padding: 3px 8px; }
body.world .acc-body { background: rgba(0,0,0,0.22); }
body.world .acc-body.open { max-height: 1800px; }
.acc-body p { padding: 0 !important; margin: 0; }
.acc-inner { padding: 4px 22px 24px; display: grid; gap: 11px; }
body.world .acc-inner p { color: #DDE0E4 !important; font-size: 14.5px; line-height: 1.58; }
body.world .acc-inner .aw-lead { color: #EDEEF0 !important; font-size: 15.5px; }
body.world .acc-inner strong { color: #fff; }
body.world .acc-inner .aw-see strong { color: var(--champagne-2); }
body.world .acc-inner .aw-frame { color: #9A9DA4 !important; font-size: 13px; }
body.world .acc-inner .aw-reassure { color: #fff !important; font-style: italic; border-left: 2px solid var(--champagne-2); padding-left: 14px !important; }
body.world .acc-inner .aw-time { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: #9A9DA4 !important; margin-top: 2px; }

/* artifact strip — "what you'll see" quick-scan grid */
.artifact-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 26px; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.11); border-radius: 6px; overflow: hidden; }
.artifact-strip .as-row { background: rgba(10,11,14,0.55); padding: 16px 18px; }
.artifact-strip .as-stage { display: block; font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; color: #9A9DA4; margin-bottom: 6px; }
.artifact-strip .as-art { color: #fff; font-size: 14px; font-weight: 500; }
@media (max-width: 600px) { .artifact-strip { grid-template-columns: 1fr; } }

/* pricing AI cards — price as a clean line under the title (parallel with AIBridge) */
.cat-price { display:block; font-family:"Archivo",sans-serif; font-weight:700; font-size:15px; letter-spacing:0; color:var(--champagne-2); margin:2px 0 8px; }

/* small-business / mom-and-pop discount — the can't-miss offer card */
.smoke.offer { border-color: rgba(200,168,106,0.55) !important; box-shadow: 0 28px 70px rgba(0,0,0,0.45), 0 0 0 1px rgba(200,168,106,0.30) !important; }
.offer-badge { display:inline-block; font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:#0B0B0D; background:var(--champagne-2); padding:6px 14px; border-radius:2px; margin-bottom:18px; }

/* homepage pricing — the can't-miss small-business / mom-and-pop cell */
.price-cell.offer-cell { text-decoration:none; background: linear-gradient(160deg, rgba(200,168,106,0.26), rgba(200,168,106,0.10)); transition: background .25s, transform .25s; }
.price-cell.offer-cell:hover { background: rgba(200,168,106,0.36); }
.price-cell.offer-cell .pl { color: var(--champagne-2); }
.price-cell.offer-cell .pv { color:#fff; font-size:14px; }
.price-cell.offer-cell .pv small { display:block; color: var(--champagne-2); font-size:10px; font-weight:600; margin-top:3px; }

/* nav: imported logo replaces the text wordmark */
.brand-logo { height: 40px; width: auto; display: block; }
@media (max-width:600px){ .brand-logo { height: 34px; } }

/* world pages: DARK nav so the imported silver logo + links read crisp (was a pale silver-theme bar) */
body.world nav { background: rgba(11,12,16,0.52); -webkit-backdrop-filter: blur(12px) saturate(1.05); backdrop-filter: blur(12px) saturate(1.05); border-bottom: 1px solid transparent; }
body.world nav.scrolled { background: rgba(10,11,15,0.68); border-bottom: 1px solid rgba(255,255,255,0.10); }
body.world .nav-links a { color: #D7DAE0; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
body.world .nav-links a:hover { color: #fff; }
body.world .menu-toggle span { background: #DDE0E4; }
@media (max-width: 900px) {
  body.world .nav-links { background: rgba(10,11,15,0.97); border-bottom: 1px solid rgba(255,255,255,0.10); }
  body.world .nav-links a:not(.btn) { border-bottom: 1px solid rgba(255,255,255,0.08); }
}

/* ===== What We Build interactive world — tiles + service pages ===== */
.svc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:28px; }
@media (max-width:680px){ .svc-grid { grid-template-columns:1fr; } }
.svc-tile { display:block; text-decoration:none; background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.10); border-radius:8px; padding:20px; transition:border-color .25s, transform .25s, background .25s; }
.svc-tile:hover { border-color:var(--champagne-2); transform:translateY(-2px); background:linear-gradient(160deg, rgba(200,168,106,0.13), rgba(255,255,255,0.02)); }
.svc-tile .st-k { font-family:"Archivo",sans-serif; font-weight:800; font-size:12px; letter-spacing:.06em; color:var(--champagne-2); }
.svc-tile h3 { color:#fff !important; font-size:18px; margin:6px 0; }
.svc-tile p { color:#C2C5CB !important; font-size:14px; line-height:1.5; margin:0 0 12px; }
.svc-tile .st-go { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:var(--champagne-2); }
.svc-tile.dev { opacity:.55; cursor:default; }
.svc-tile.dev:hover { transform:none; border-color:rgba(255,255,255,0.10); background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); }
.svc-tile.dev .st-go { color:#9A9DA4; }
.hero-q { font-size:clamp(18px,2.4vw,22px) !important; color:var(--champagne-2) !important; font-style:italic; }
.lead-p { font-size:clamp(16px,1.8vw,19px) !important; color:#E7E8EA !important; }
.kv { margin-top:24px; }
.kv h3 { color:var(--champagne-2) !important; font-size:13px; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.14em; margin-bottom:8px; }
.kv p { color:#DDE0E4 !important; font-size:15.5px; line-height:1.6; }
.pull-by { display:block; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:12px; color:#9A9DA4; font-style:normal; margin-top:10px; }
.prevnext { display:flex; justify-content:space-between; gap:14px; margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.10); }
.prevnext a { color:#DDE0E4; text-decoration:none; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:12px; transition:color .2s; }
.prevnext a:hover { color:var(--champagne-2); }
.cat-door { color:#fff !important; text-decoration:none; transition:color .2s; }
.cat-door:hover { color:var(--champagne-2) !important; }

/* footer location line */
.foot-loc { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:12px; }

/* ===== Interior service-page system (DOM.com) ===== */
/* clickable topics on What We Build */
.svc-topics li a { color:#C2C5CB; text-decoration:none; transition:color .18s, padding-left .18s; }
.svc-topics li:hover::before { opacity:1; transform:scale(1.25); }
.svc-topics li a:hover { color:var(--gold); }
.svc-topics li::before { transition:opacity .18s, transform .18s; }

/* CTA supporting microcopy */
.cta-sub { margin-top:14px; color:#9BA0A8; font-size:14px; line-height:1.55; text-align:center; max-width:520px; margin-left:auto; margin-right:auto; }
.cta-sub-left { text-align:left; margin-left:0; }
.cta-mid { margin-top:26px; }

/* hero "small to a giant" line */
.hero-line { color:#fff !important; font-family:"Oswald",sans-serif; font-weight:500; font-size:clamp(18px,2.2vw,23px); letter-spacing:.005em; margin-bottom:14px; }

/* the common-mistake note callout */
.kv-note { border-left:2px solid rgba(200,162,75,0.5); padding-left:18px; }

/* "One idea, many directions" expansion grid */
.directions { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:36px 0 8px; text-align:left; }
.dir { border:1px solid rgba(255,255,255,0.09); border-radius:8px; padding:20px 22px; background:linear-gradient(160deg, rgba(19,20,25,0.55), rgba(12,13,17,0.7)); }
.dir h4 { color:#fff; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:14px; margin-bottom:8px; }
.dir p { color:#C2C5CB; font-size:14px; line-height:1.55; }

/* ===== Full-width marble header strip (16:1) — opacity baked into the image,
   so it's a plain background that scales (cover) and shrinks cleanly to mobile ===== */
body.world nav, nav {
  background-color:#0a0a0c;
  background-image:
    linear-gradient(to bottom, rgba(7,8,11,0) 60%, rgba(7,8,11,0.9) 100%),
    linear-gradient(rgba(7,8,11,0.34), rgba(7,8,11,0.34)),
    url("assets/img/nav-lux.jpg");
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:center,center,82% 50%;
  background-size:cover,cover,230% auto;
  min-height:88px; padding-top:6px; padding-bottom:6px;
  box-shadow: 0 12px 30px -16px rgba(0,0,0,0.5); }
body.world nav.scrolled, nav.scrolled {
  background-color:#0a0a0c;
  background-image:
    linear-gradient(to bottom, rgba(7,8,11,0.1) 60%, rgba(7,8,11,0.92) 100%),
    linear-gradient(rgba(7,8,11,0.5), rgba(7,8,11,0.5)),
    url("assets/img/nav-lux.jpg");
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:center,center,82% 50%;
  background-size:cover,cover,230% auto;
  border-bottom:1px solid rgba(255,255,255,0.08); }
/* our logo — large, centered vertically */
.brand { display:flex; align-items:center; width:auto; max-width:none; height:auto; padding:0; margin:0;
  border:none; box-shadow:none; background:none; border-radius:0; }
.brand-logo { display:block; height:72px; width:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
@media (max-width:600px){
  body.world nav, nav, body.world nav.scrolled, nav.scrolled { min-height:66px; }
  .brand-logo { height:52px; }
}

/* ===== Topic auto-link + plain-English tooltip ===== */
.tlink { position:relative; color:inherit; text-decoration:none; border-bottom:1px dashed rgba(200,162,75,.55); cursor:help; transition:color .15s, border-color .15s; }
.tlink:hover, .tlink:focus { color:var(--gold); border-bottom-color:var(--gold); outline:none; }
.tlink:hover::after, .tlink:focus::after {
  content:attr(data-ex) "  ↗"; position:absolute; left:0; top:100%; margin-top:6px; z-index:90;
  width:max-content; max-width:280px; white-space:normal; text-align:left;
  background:#15161b; color:#E7E8EA; border:1px solid rgba(200,162,75,.40); border-radius:8px;
  padding:10px 12px; font-family:"Inter",sans-serif; font-weight:400; font-size:13px; line-height:1.45;
  letter-spacing:0; text-transform:none; box-shadow:0 12px 32px rgba(0,0,0,.5); pointer-events:none;
}
@media (max-width:600px){ .tlink:hover::after, .tlink:focus::after { max-width:220px; } }

/* ===== Home pricing cells jump to explanations + Idea Session card ===== */
a.price-cell { text-decoration:none; color:inherit; cursor:pointer; transition:background .2s, transform .2s; }
a.price-cell:hover { background:rgba(200,168,106,0.12); transform:translateY(-2px); }
a.price-cell:hover .pl { color:#fff; }
/* anchor targets clear the fixed header */
#idea-session, #blueprint, #working-alpha, #mvp-launch, #platform, #small-business { scroll-margin-top:112px; }
/* Idea Session explainer card on the pricing page */
.idea-session-card { border:1px solid rgba(200,168,106,0.30); border-radius:8px; padding:24px 28px; margin:18px 0 26px;
  background:linear-gradient(160deg, rgba(24,22,18,0.70), rgba(12,13,17,0.82)); }
.idea-session-card .is-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.idea-session-card h3 { color:#fff; font-size:22px; margin:0; }
.idea-session-card .lp { font-family:"Archivo",sans-serif; font-weight:800; color:var(--champagne-2); font-size:18px; margin-left:auto; }
.idea-session-card p { color:#C2C5CB; font-size:15px; line-height:1.6; margin:0 0 16px; }

/* ===== Category hub: problems list + principle line ===== */
.prob-list { list-style:none; margin:22px 0 4px; padding:0; columns:2; column-gap:34px; }
.prob-list li { break-inside:avoid; position:relative; padding-left:22px; margin-bottom:11px; color:#C2C5CB; font-size:15px; line-height:1.5; }
.prob-list li::before { content:"\201C"; position:absolute; left:0; top:2px; color:var(--champagne-2); font-family:"Archivo",serif; font-size:18px; line-height:1; }
@media (max-width:640px){ .prob-list { columns:1; } }
.principle { margin:30px 0 6px; text-align:center; font-family:"Oswald",sans-serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.06em; font-size:clamp(15px,2vw,19px); color:#fff; }

/* ===== Inline heading link ===== */
.hlink { color:var(--champagne-2); text-decoration:none; border-bottom:2px solid rgba(200,168,106,0.45); transition:color .15s, border-color .15s; }
.hlink:hover { color:#fff; border-bottom-color:#fff; }

/* Accordion (How It Works) tooltips open UPWARD so they aren't clipped by the panel's overflow */
.acc-inner .tlink:hover::after, .acc-inner .tlink:focus::after {
  top:auto; bottom:100%; margin-top:0; margin-bottom:8px; z-index:120; }

/* ===== Hero: remove the heavy light "fog" scrim (box 2) so the marble shows clean.
   The dark .smoke content panel (box 3, the black box) stays as-is. ===== */
.hero {
  background:url("assets/img/marble4.jpg") !important;
  background-size:cover !important; background-position:62% center !important; background-repeat:no-repeat !important; }
.page-hero {
  background:url("assets/img/marble3.jpg") !important;
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }

/* ===== Tech Answers: "show all terms" toggle ===== */
.board-showall { display:block; margin:22px auto 0; padding:13px 26px; cursor:pointer;
  background:rgba(255,255,255,0.04); color:#fff; border:1px solid rgba(200,168,106,0.4); border-radius:8px;
  font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:13px;
  transition:background .2s, border-color .2s; }
.board-showall:hover { background:rgba(200,168,106,0.14); border-color:var(--champagne-2); }

/* ===== "Speak to a Human" call button — in the header, right side ===== */
/* mobile: absolute, just left of the hamburger */
.call-fab { position:absolute; right:60px; top:50%; transform:translateY(-50%); z-index:5; display:block; line-height:0;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,0.5)); transition:transform .18s ease; }
.call-fab img { height:21px; width:auto; display:block; }
.call-fab:hover { transform:translateY(-50%) scale(1.05); }
/* desktop: flex into the FAR right slot — after the nav links (Call is rightmost) */
@media (min-width:761px){
  nav .brand { margin-right:auto; }
  .nav-links { order:2; }
  .call-fab { position:static; transform:none; order:3; margin-left:28px; align-self:center; }
  .call-fab:hover { transform:scale(1.05); }
  .call-fab img { height:24px; }
}

/* ===== Dedicated pricing-tier page ===== */
.tier-price { font-family:"Archivo",sans-serif; font-weight:800; color:var(--champagne-2);
  font-size:clamp(26px,4vw,40px); letter-spacing:.01em; margin:8px 0 22px; }

/* ===== Who We Help hub cards ===== */
.aud-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:28px; }
.aud-card { display:block; text-decoration:none; border:1px solid rgba(255,255,255,0.10); border-radius:10px; padding:30px 30px 26px;
  background:linear-gradient(160deg, rgba(19,20,25,0.62), rgba(12,13,17,0.76)); transition:transform .2s, border-color .2s, background .2s; }
.aud-card:hover { transform:translateY(-3px); border-color:rgba(200,168,106,0.5); }
.aud-k { display:block; font-family:"Archivo",sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:#fff; font-size:21px; margin-bottom:14px; }
.aud-prob { color:#C2C5CB; font-size:15px; line-height:1.55; margin:0 0 10px; }
.aud-out { color:var(--champagne-2); font-size:15px; line-height:1.5; margin:0 0 16px; }
.aud-go { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:12.5px; color:#fff; }
@media (max-width:680px){ .aud-grid { grid-template-columns:1fr; } }

/* ===== Youth program status grid ===== */
.prog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:24px; }
.prog { display:flex; flex-direction:column; gap:9px; border:1px solid rgba(255,255,255,0.10); border-radius:8px; padding:18px 20px; background:rgba(255,255,255,0.03); }
.prog-name { color:#fff; font-weight:600; font-size:15.5px; }
.prog-status { align-self:flex-start; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; color:var(--champagne-2); border:1px solid rgba(200,168,106,0.4); border-radius:999px; padding:3px 11px; }

/* ===== Lead-form consent microline ===== */
.form-consent { margin-top:14px; color:#9BA0A8; font-size:13px; line-height:1.5; max-width:560px; }
.form-consent a { color:var(--champagne-2); text-decoration:underline; }

/* ===== Current-page dot indicator in nav (esp. mobile menu) ===== */
.nav-links a.current:not(.btn) { color:#fff; }
.nav-links a.current:not(.btn)::before {
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--gold); margin-right:9px; vertical-align:middle;
  box-shadow:0 0 8px rgba(200,162,75,0.6); }
/* current Start My MVP button: gold ring instead of a dot */
.nav-links a.current.btn { box-shadow:0 0 0 2px var(--gold) inset; }

/* ===== Time-collapse / stack / proof / research / process components ===== */
.compare-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:24px; }
.compare { border:1px solid rgba(255,255,255,0.10); border-radius:10px; padding:26px; background:linear-gradient(160deg, rgba(19,20,25,0.6), rgba(12,13,17,0.74)); }
.compare h3 { color:#fff; font-size:19px; margin-bottom:6px; }
.compare-sub { color:#9BA0A8; font-size:13.5px; margin-bottom:12px; }
.compare-note { color:#9BA0A8; font-size:13px; margin-top:12px; font-style:italic; }
.compare strong, .num-list strong { color:#fff; }
@media (max-width:760px){ .compare-grid { grid-template-columns:1fr; } }

.num-list { counter-reset:n; list-style:none; padding:0; margin-top:22px; }
.num-list li { position:relative; padding-left:46px; margin-bottom:15px; color:#C2C5CB; font-size:15.5px; line-height:1.55; counter-increment:n; }
.num-list li::before { content:counter(n); position:absolute; left:0; top:-2px; width:30px; height:30px; border-radius:50%; border:1px solid rgba(200,168,106,0.45); color:var(--champagne-2); font-family:"Oswald",sans-serif; font-size:13px; display:flex; align-items:center; justify-content:center; }

.stack { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.stack-row { display:flex; gap:18px; align-items:flex-start; text-decoration:none; border:1px solid rgba(255,255,255,0.10); border-radius:10px; padding:22px 24px; background:linear-gradient(160deg, rgba(19,20,25,0.55), rgba(12,13,17,0.7)); transition:transform .18s, border-color .18s; }
.stack-row:hover { transform:translateY(-2px); border-color:rgba(200,168,106,0.45); }
.stack-n { font-family:"Archivo",sans-serif; font-weight:800; color:var(--champagne-2); font-size:22px; min-width:34px; }
.stack-row h3 { color:#fff; font-size:18px; margin-bottom:6px; }
.stack-tag { display:inline-block; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; color:#9BA0A8; margin-left:6px; }
.stack-row p { color:#C2C5CB; font-size:14px; line-height:1.55; }
.stack-row p em { color:#DDE0E4; }
.stack-row .st-go { align-self:center; white-space:nowrap; color:var(--champagne-2); }
@media (max-width:600px){ .stack-row { flex-wrap:wrap; gap:10px; } .stack-row .st-go { align-self:flex-start; } }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:24px; }
.stat { border:1px solid rgba(255,255,255,0.10); border-radius:10px; padding:20px; text-align:center; background:rgba(255,255,255,0.03); }
.stat-n { display:block; font-family:"Archivo",sans-serif; font-weight:900; color:#fff; font-size:30px; line-height:1; }
.stat-l { display:block; color:#9BA0A8; font-size:12.5px; margin-top:8px; line-height:1.4; }

.cite { display:block; margin-top:10px; color:#8C9098; font-size:12px; line-height:1.5; }
.cite a { color:var(--champagne-2); }

.proc { display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.proc-step { display:flex; gap:18px; align-items:flex-start; border-left:2px solid rgba(200,168,106,0.4); padding:6px 0 6px 20px; }
.proc-n { font-family:"Archivo",sans-serif; font-weight:800; color:var(--champagne-2); font-size:18px; min-width:28px; }
.proc-step h3 { color:#fff; font-size:17px; margin-bottom:4px; }
.proc-step p { color:#C2C5CB; font-size:14px; line-height:1.55; }

/* ===== "Why Day One" nav dropdown ===== */
.nav-dd { position:relative; display:inline-block; }
.nav-dd-btn { background:none; border:none; cursor:pointer; color:var(--champagne-2); font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.04em; font-size:13px; font-weight:600; padding:0; display:inline-flex; align-items:center; gap:6px; transition:color .2s, text-shadow .2s; text-shadow:0 0 12px rgba(200,162,75,.35); }
.nav-dd-btn:hover { color:#fff; text-shadow:0 0 12px rgba(200,162,75,.55); }
.dd-caret { font-size:9px; color:var(--champagne-2); transition:transform .2s; }
.nav-dd-panel { position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px); min-width:232px; background:rgba(10,11,15,0.97); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transition:opacity .18s, transform .18s; box-shadow:0 20px 50px rgba(0,0,0,.5); z-index:60; }
.nav-dd:hover .nav-dd-panel, .nav-dd.open .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-dd:hover .dd-caret, .nav-dd.open .dd-caret { transform:rotate(180deg); }
.nav-dd-panel a { display:block; padding:9px 12px; border-radius:7px; color:#C7CBD1 !important; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.04em; font-size:12.5px; text-decoration:none; white-space:nowrap; border-bottom:0 !important; transition:background .15s, color .15s; }
.nav-dd-panel a:hover { background:rgba(200,168,106,0.14); color:#fff !important; }
@media (max-width:760px){
  .nav-dd { display:block; width:100%; }
  .nav-dd-btn { width:100%; justify-content:space-between; padding:14px 0; font-size:15px; border-bottom:1px solid rgba(255,255,255,0.08); }
  .nav-dd-panel { position:static; transform:none !important; min-width:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border:none; box-shadow:none; padding:0; display:none; opacity:1; visibility:visible; }
  .nav-dd.open .nav-dd-panel { display:flex; padding:6px 0 8px 14px; }
  .nav-dd-panel a { padding:11px 0; font-size:14px; }
}

/* =====================================================================
   ELITE BOX ANIMATION SYSTEM — entrance cascade + hover lift/glow/arrow/trace
   GPU: transform + opacity only. Entrance uses @keyframes (not transition)
   so hover stays instant. Gold #C8A86A per spec. Reduced-motion safe.
   ===================================================================== */
@keyframes boxIn { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes arrowPulse {
  0%   { transform:translateX(0)   scale(1.12); opacity:1; }
  25%  { transform:translateX(4px) scale(1.12); opacity:.8; }
  50%  { transform:translateX(0)   scale(1.12); opacity:1; }
  75%  { transform:translateX(4px) scale(1.12); opacity:.8; }
  100% { transform:translateX(0)   scale(1.12); opacity:1; }
}

/* ENTRANCE — staggered fade-up (only inside a revealed container) */
.reveal.in .svc-tile,
.reveal.in .aud-card,
.reveal.in .stack-row,
.reveal.in .lvl-card,
.reveal.in .stat,
.reveal.in .cat,
.reveal.in .dir,
.reveal.in .prog,
.reveal.in .price-cell,
.reveal.in .compare { animation: boxIn .6s cubic-bezier(0.34,1.56,0.64,1) both; }
.reveal.in :is(.svc-tile,.aud-card,.stack-row,.lvl-card,.stat,.cat,.dir,.prog,.price-cell,.compare):nth-child(2){animation-delay:.12s}
.reveal.in :is(.svc-tile,.aud-card,.stack-row,.lvl-card,.stat,.cat,.dir,.prog,.price-cell,.compare):nth-child(3){animation-delay:.24s}
.reveal.in :is(.svc-tile,.aud-card,.stack-row,.lvl-card,.stat,.cat,.dir,.prog,.price-cell,.compare):nth-child(4){animation-delay:.36s}
.reveal.in :is(.svc-tile,.aud-card,.stack-row,.lvl-card,.stat,.cat,.dir,.prog,.price-cell,.compare):nth-child(5){animation-delay:.48s}
.reveal.in :is(.svc-tile,.aud-card,.stack-row,.lvl-card,.stat,.cat,.dir,.prog,.price-cell,.compare):nth-child(6){animation-delay:.60s}
.reveal.in :is(.svc-tile,.aud-card,.stack-row,.lvl-card,.stat,.cat,.dir,.prog,.price-cell,.compare):nth-child(7){animation-delay:.72s}
.reveal.in :is(.svc-tile,.aud-card,.stack-row,.lvl-card,.stat,.cat,.dir,.prog,.price-cell,.compare):nth-child(n+8){animation-delay:.84s}

/* HOVER — lift -8px + gold glow + border; exit faster than enter */
.svc-tile:not(.dev), .aud-card, .stack-row, .lvl-card {
  position:relative; overflow:hidden; will-change:transform;
  transition: transform .25s cubic-bezier(.65,0,.35,1), border-color .25s ease, box-shadow .25s ease;
}
.svc-tile:not(.dev):hover, .aud-card:hover, .stack-row:hover, .lvl-card:hover {
  transform: translateY(-8px);
  border-color:#C8A86A;
  box-shadow: 0 16px 38px rgba(0,0,0,0.5), 0 0 16px rgba(200,168,106,0.4);
  transition: transform .3s cubic-bezier(.33,1,.68,1), border-color .3s ease, box-shadow .3s ease;
}

/* ARROW — fade .7→1, scale, then a 2-pulse ping-pong on hover */
.svc-tile .st-go, .aud-card .aud-go, .stack-row .st-go, .lvl-card .go {
  display:inline-block; opacity:.7; transition: opacity .2s ease-out, transform .2s ease-out;
}
.svc-tile:not(.dev):hover .st-go, .aud-card:hover .aud-go, .stack-row:hover .st-go, .lvl-card:hover .go {
  opacity:1; transform:scale(1.12); animation: arrowPulse .6s ease-in-out 1;
}

/* BORDER TRACE — gold line sweeps left→right on hover */
.svc-tile:not(.dev)::after, .aud-card::after, .stack-row::after, .lvl-card::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:#C8A86A; transform:scaleX(0); transform-origin:left;
  transition: transform .4s cubic-bezier(.65,0,.35,1); pointer-events:none;
}
.svc-tile:not(.dev):hover::after, .aud-card:hover::after, .stack-row:hover::after, .lvl-card:hover::after { transform:scaleX(1); }

/* RESPECT reduced motion — kill entrance + hover motion */
@media (prefers-reduced-motion: reduce){
  .reveal.in :is(.svc-tile,.aud-card,.stack-row,.lvl-card,.stat,.cat,.dir,.prog,.price-cell,.compare){ animation:none !important; }
  .svc-tile:not(.dev):hover, .aud-card:hover, .stack-row:hover, .lvl-card:hover { transform:none !important; }
  .svc-tile:hover .st-go, .aud-card:hover .aud-go, .stack-row:hover .st-go, .lvl-card:hover .go { animation:none !important; transform:none !important; }
  .svc-tile:hover::after, .aud-card:hover::after, .stack-row:hover::after, .lvl-card:hover::after { transform:scaleX(0) !important; }
}

/* ===================== FOUNDER PAGE ===================== */
.founder-top{display:grid;grid-template-columns:300px 1fr;gap:38px;align-items:center;}
.jp-portrait{position:relative;margin:0;border-radius:18px;overflow:hidden;border:1px solid rgba(200,168,106,0.42);box-shadow:0 22px 60px rgba(0,0,0,0.6);}
.jp-portrait img{width:100%;display:block;}
.verified-badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:7px;background:rgba(8,9,11,0.82);border:1px solid #C8A86A;color:#C8A86A;font:600 11.5px/1 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;border-radius:999px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);}
.verified-badge svg{width:15px;height:15px;flex:none;}
.founder-role{font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:.02em;color:var(--champagne-2);font-size:clamp(17px,2.2vw,21px);margin:2px 0 12px;}
.verify-list{list-style:none;padding:0;margin:16px 0 18px;display:grid;gap:9px;}
.verify-list li{position:relative;padding-left:26px;color:#D6D8DC;font-size:14.5px;line-height:1.5;}
.verify-list li::before{content:"✓";position:absolute;left:0;top:0;color:#C8A86A;font-weight:800;}
.verify-list a{color:var(--champagne-2);text-decoration:none;}
.verify-list a:hover{text-decoration:underline;}

.founder-read p{color:#D6D8DC;font-size:16.5px;line-height:1.72;margin:0 0 15px;max-width:64ch;}
.founder-read .lead{font-size:19px;color:#EDEEF0;line-height:1.6;}
.founder-read .emph{color:#F2EDE0;font-weight:600;font-size:18px;}
.founder-read .line{margin-bottom:6px;color:#E7E8EA;}
.founder-read h2{margin-bottom:12px;}
.cap-list{list-style:none;padding:18px 0 4px;margin:0 0 12px;display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid rgba(200,168,106,0.18);}
.cap-list.two{grid-template-columns:1fr 1fr;}
.cap-list li{position:relative;padding:9px 0 9px 24px;color:#EDEEF0;font-family:'Oswald',sans-serif;font-weight:500;font-size:18px;letter-spacing:.01em;border-bottom:1px solid rgba(255,255,255,0.05);}
.cap-list li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:9px;border-radius:50%;background:#C8A86A;box-shadow:0 0 10px rgba(200,168,106,0.5);}
.creed{margin:8px 0 18px;padding:18px 22px;border-left:3px solid #C8A86A;background:linear-gradient(90deg,rgba(200,168,106,0.08),rgba(200,168,106,0));border-radius:0 10px 10px 0;font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,26px);color:#F4EFE4;line-height:1.3;}
.creed.big{border-left:0;background:none;text-align:center;font-weight:900;font-size:clamp(26px,4.4vw,46px);padding:6px 0;margin:18px auto 6px;}
.creed.big .accent{display:block;}
.sig{font-family:'Oswald',sans-serif;color:var(--champagne-2);font-size:15px;letter-spacing:.04em;margin:0 0 8px;}

.founder-split{display:grid;grid-template-columns:minmax(0,0.85fr) 1.15fr;gap:34px;align-items:center;}
.founder-detail{margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.09);box-shadow:0 18px 50px rgba(0,0,0,0.55);}
.founder-detail img{width:100%;display:block;}

@media (max-width:820px){
  .founder-top{grid-template-columns:1fr;gap:24px;}
  .jp-portrait{max-width:340px;}
  .founder-split{grid-template-columns:1fr;gap:22px;}
  .cap-list.two{grid-template-columns:1fr;}
  .founder-read p,.founder-read .lead{max-width:none;}
}

/* ===================== FLOW & ARTISTIC TYPE REFINEMENT =====================
   Lighter display weights, open leading, balanced wrapping. Headings read as
   flowing lines instead of dense uppercase blocks. Sitewide; appended last so
   it wins the cascade over earlier type declarations. */
h1, h2, h3 { font-weight: 700; line-height: 1.14; letter-spacing: -0.012em; text-wrap: balance; }
.mega { font-weight: 800; line-height: 1.06; letter-spacing: -0.018em; text-wrap: balance; }
.mega .tm { font-weight: 700; }
.statement { font-weight: 700; line-height: 1.16; letter-spacing: -0.006em; text-wrap: balance; }
.statement .accent { margin-top: 0.14em; }
.smoke h2 { line-height: 1.18; }
.founder-role { line-height: 1.22; }
.eyebrow { line-height: 1.5; }
.support, .smoke > p:not(.support):not(.powered), .founder-read p { line-height: 1.72; text-wrap: pretty; }
.creed { line-height: 1.36; }
.creed.big { line-height: 1.18; }
.cap-list li { line-height: 1.35; }
@media (max-width: 600px) {
  body.world .hero .mega, body.world .page-hero .mega { line-height: 1.08; }
  .mega { line-height: 1.1; }
  .statement { line-height: 1.2; }
}


/* ===================== MAESTRO METHOD™ GRID ===================== */
.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin: 32px 0;
}

.method-card {
  position: relative;
  padding: 32px 24px;
  background: linear-gradient(135deg, rgba(200, 168, 106, 0.06), rgba(200, 168, 106, 0.02));
  border: 1px solid rgba(200, 168, 106, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.method-card:hover {
  border-color: rgba(200, 168, 106, 0.4);
  background: linear-gradient(135deg, rgba(200, 168, 106, 0.12), rgba(200, 168, 106, 0.04));
  box-shadow: 0 8px 24px rgba(200, 168, 106, 0.12);
}

.method-number {
  font-size: 48px;
  font-weight: 900;
  color: rgba(200, 168, 106, 0.4);
  line-height: 1;
  margin-bottom: 16px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.02em;
}

.method-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #F4EFE4;
}

.method-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #B8BCC4;
}

@media (max-width: 820px) {
  .method-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
  }
  .method-card {
    padding: 24px 18px;
  }
  .method-number {
    font-size: 40px;
  }
  .method-card h3 {
    font-size: 18px;
  }
}

.method-outcome {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(200, 168, 106, 0.18);
  font-size: 14px;
  line-height: 1.5;
  color: #CFD2D8;
}
.method-outcome span {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10px;
  color: var(--champagne-2);
  margin-right: 8px;
}

.form-micro {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  text-align: left;
}

/* ===================== DAY ONE BUILD — PROOF STATS ===================== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin: 32px 0;
}
.stat-cell {
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
}
.stat-n {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  color: #F4EFE4;
  margin-bottom: 8px;
}
.stat-l {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
@media (max-width: 600px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-cell { padding: 18px 12px; }
}

/* ===================== ACCESSIBILITY ===================== */
/* Skip link — visible only on keyboard focus */
.skip-link {
  position: absolute; left: 0; top: 0; transform: translateY(-130%); z-index: 2000;
  background: var(--champagne-2); color: #0B0B0D;
  padding: 10px 18px; font-family: 'Oswald', sans-serif; font-weight: 600;
  letter-spacing: 0.06em; text-decoration: none; border-radius: 0 0 8px 0;
  transition: transform .15s ease;   /* off-screen via transform → no horizontal overflow (RTL-safe) */
}
.skip-link:focus { transform: translateY(0); }

/* Global visible focus ring for keyboard users (zero-specificity base) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--champagne-2);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Restore a keyboard-visible ring on fields that previously stripped outline.
   Mouse focus (:focus without :focus-visible) keeps the calmer border-only look. */
.idea-form input:focus-visible, .idea-form textarea:focus-visible, .idea-form select:focus-visible,
.board-search input:focus-visible { outline: 2px solid var(--champagne-2); outline-offset: 2px; }
.tlink:focus-visible { outline: 2px solid var(--champagne-2); outline-offset: 2px; }

/* ELROY sideways swipe-in — GSAP owns the left->right entrance of these cards,
   so suppress the CSS Elite Box entrance to avoid double-animation. */
[data-elroy="swipe"] > *,
[data-elroy-managed] > * { animation: none !important; }


/* =====================================================================
   DAY ONE MVP™ — PRECISION-ATELIER ELEVATION LAYER  (FINAL · appended)
   Synthesis of three ultra-premium passes into one cohesive, brand-safe
   refinement of the dark "world" theme. Append-only → wins by cascade.
   Scoped under body.world so the light silver-marble :root variant is
   untouched. Palette preserved: onyx base · champagne gold (#C8A86A) ·
   platinum. No new entrance animation, no transforms on hero / .reveal /
   [data-elroy] children — hover states only; transitions confined to
   transform / opacity / box-shadow / border / background / color. Gold is
   used surgically, like a single piece of jewelry — restraint = premium.
   ===================================================================== */

/* ---------- one coherent material + motion vocabulary (dark world only) ---------- */
body.world {
  /* radius scale */
  --e-rad-sm: 6px;
  --e-rad:    12px;
  --e-rad-lg: 16px;

  /* layered ink-depth shadows — ambient + key + contact, tuned to onyx.
     A faint champagne rim lives only in the hover/float tier. */
  --e-sh-1: 0 1px 0 rgba(255,255,255,0.05) inset,
            0 8px 22px -12px rgba(0,0,0,0.55),
            0 22px 52px -28px rgba(0,0,0,0.66);
  --e-sh-2: 0 1px 0 rgba(255,255,255,0.06) inset,
            0 16px 38px -16px rgba(0,0,0,0.60),
            0 40px 84px -40px rgba(0,0,0,0.74);
  --e-sh-float: 0 1px 0 rgba(255,255,255,0.08) inset,
            0 22px 48px -18px rgba(0,0,0,0.62),
            0 52px 110px -46px rgba(0,0,0,0.78),
            0 0 0 1px rgba(200,168,106,0.20),
            0 16px 50px -24px rgba(200,168,106,0.18);

  /* hairline edges + inset top sheen (the machined-stone bevel) */
  --e-edge:       rgba(255,255,255,0.10);
  --e-edge-strong:rgba(255,255,255,0.14);
  --e-bevel:      inset 0 1px 0 rgba(255,255,255,0.07);

  /* surgical champagne */
  --e-champ:      #C8A86A;
  --e-gold-line:  rgba(200,168,106,0.42);
  --e-gold-line-hi: rgba(200,168,106,0.60);
  --e-gold-glow:  rgba(200,168,106,0.30);

  /* easing — slow settle, quick lift */
  --e-ease:     cubic-bezier(.22,.61,.36,1);
  --e-ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- typography: optical tightening + editorial kicker tick ---------- */
body.world h1,
body.world h2,
body.world h3 { letter-spacing: -0.014em; }
body.world .mega { letter-spacing: -0.02em; }
body.world .statement { letter-spacing: -0.008em; }

body.world h1, body.world h2, body.world h3,
body.world .mega, body.world .statement {
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}

/* eyebrow / kicker — precise luxury track + a restrained gold tick */
body.world .eyebrow { letter-spacing: 0.34em; font-weight: 500; }
body.world .kicker  { letter-spacing: 0.32em; font-weight: 500; }
body.world .smoke .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
body.world .smoke .eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--e-champ), rgba(200,168,106,0));
}
/* centered panels: drop the tick so the eyebrow stays optically centered */
body.world .smoke.center .eyebrow { display: block; }
body.world .smoke.center .eyebrow::before { display: none; }

body.world .lvl-card .lvln,
body.world .lvl-badge,
body.world .offer-badge,
body.world .dev-tag { letter-spacing: 0.22em; }

/* editorial measure + nicer line endings (no contrast change) */
body.world .support { max-width: 62ch; line-height: 1.72; text-wrap: pretty; }
body.world .lead, body.world .lead-p { max-width: 60ch; text-wrap: pretty; }

/* ---------- links: one champagne interaction family ---------- */
body.world .link-light,
body.world .prevnext a,
body.world .cat-door,
body.world .hlink {
  transition: color .22s var(--e-ease), border-color .22s var(--e-ease);
}
body.world .link-light:hover,
body.world .prevnext a:hover,
body.world .cat-door:hover { color: var(--e-champ); }

/* ---------- buttons: machined-metal primary, champagne-edge ghosts ---------- */
body.world .btn {
  border-radius: var(--e-rad-sm);
  min-height: 46px;
  transition: transform .24s var(--e-ease-out),
              box-shadow .32s var(--e-ease),
              background .32s var(--e-ease),
              border-color .3s var(--e-ease),
              color .2s var(--e-ease);
}

body.world .btn-primary {
  background: linear-gradient(180deg, #1d1e24 0%, #131419 58%, #0e0f12 100%);
  color: #FBF7EE;
  border: 1px solid var(--e-gold-line);
  box-shadow: var(--e-bevel),
              0 2px 6px rgba(0,0,0,0.34),
              0 12px 30px -14px rgba(0,0,0,0.50);
  animation: none; /* retire the autoplay goldPulse on world pages */
}
body.world .btn-primary:hover {
  transform: translateY(-2px);
  border-color: var(--e-champ);
  background: linear-gradient(180deg, #23242b 0%, #15161b 58%, #0f1013 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),
              0 4px 12px rgba(0,0,0,0.40),
              0 18px 42px -16px rgba(0,0,0,0.52),
              0 0 0 1px rgba(200,168,106,0.30),
              0 0 24px var(--e-gold-glow);
}
body.world .btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--e-bevel), 0 2px 8px rgba(0,0,0,0.38);
}

body.world .btn-ghost {
  color: #EDEEF0;
  border: 1px solid var(--e-edge-strong);
  background: rgba(255,255,255,0.015);
}
body.world .btn-ghost:hover {
  transform: translateY(-2px);
  color: #fff;
  border-color: var(--e-gold-line-hi);
  background: rgba(200,168,106,0.06);
  box-shadow: var(--e-bevel), 0 0 0 1px rgba(200,168,106,0.18), 0 12px 28px -16px rgba(0,0,0,0.5);
}
body.world .btn-ghost-light {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.5);
}
body.world .btn-ghost-light:hover {
  transform: translateY(-2px);
  border-color: #fff;
  background: rgba(255,255,255,0.07);
  box-shadow: var(--e-bevel), 0 12px 28px -16px rgba(0,0,0,0.46);
}

/* ---------- smoke panels: deeper dark-glass material ---------- */
body.world .smoke {
  border-radius: var(--e-rad);
  box-shadow: var(--e-bevel),
              0 24px 56px -28px rgba(0,0,0,0.62),
              0 56px 110px -52px rgba(0,0,0,0.78) !important;
}
/* champagne seam → a brighter glowing inlay (restrained jewelry) */
body.world .smoke::before {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--e-champ), transparent) !important;
  opacity: 0.7 !important;
  box-shadow: 0 0 12px rgba(200,168,106,0.22);
}

/* hero / page-hero: title-card authority via depth only (GSAP-safe — no
   ::after layer, no overflow change; the base owns position + children). */
body.world .hero .smoke,
body.world .page-hero .smoke {
  border-radius: var(--e-rad-lg);
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: var(--e-bevel),
              0 36px 80px -30px rgba(0,0,0,0.66),
              0 80px 150px -60px rgba(0,0,0,0.80),
              0 0 0 1px rgba(200,168,106,0.14) !important;
}
body.world .hero .mega,
body.world .page-hero .mega {
  text-shadow: 0 2px 26px rgba(0,0,0,0.50), 0 1px 1px rgba(0,0,0,0.5);
}
body.world .mega .tm { color: var(--e-champ); }

/* offer panel keeps its champagne ring, now on the new depth */
body.world .smoke.offer {
  border-color: var(--e-gold-line-hi) !important;
  box-shadow: var(--e-bevel),
              0 24px 56px -28px rgba(0,0,0,0.62),
              0 56px 110px -52px rgba(0,0,0,0.78),
              0 0 0 1px rgba(200,168,106,0.30),
              0 0 48px -16px rgba(200,168,106,0.20) !important;
}

/* ---------- card family: unified bevel + restrained champagne hover ---------- */
/* shared resting depth + radius across the live world-page components */
body.world .method-card,
body.world .stat-cell,
body.world .lvl-card,
body.world .svc-tile:not(.dev),
body.world .aud-card,
body.world .stack-row,
body.world .compare,
body.world .dir,
body.world .svc-cat,
body.world .idea-session-card {
  border-radius: var(--e-rad);
  box-shadow: var(--e-sh-1);
}

/* NON-managed cards: gentle lift + warm rim (ELROY entrance untouched) */
body.world .method-card,
body.world .stat-cell,
body.world .compare,
body.world .dir,
body.world .svc-cat,
body.world .idea-session-card {
  transition: transform .3s var(--e-ease-out),
              border-color .3s var(--e-ease),
              box-shadow .32s var(--e-ease),
              background .32s var(--e-ease);
}
body.world .method-card:hover,
body.world .stat-cell:hover,
body.world .compare:hover,
body.world .dir:hover,
body.world .svc-cat:hover,
body.world .idea-session-card:hover {
  transform: translateY(-4px);
  border-color: var(--e-gold-line-hi);
  box-shadow: var(--e-sh-float);
}

/* ELROY / Elite-Box-managed cards own their OWN transform timing — enrich
   resting + hover SHADOW only, never declare a transform here. */
body.world .svc-tile:not(.dev):hover,
body.world .aud-card:hover,
body.world .stack-row:hover,
body.world .lvl-card:hover {
  box-shadow: var(--e-sh-float);
}

/* method cards — precision-instrument feel + engraved champagne numeral */
body.world .method-card {
  border: 1px solid var(--e-gold-line);
  background: linear-gradient(150deg, rgba(200,168,106,0.07), rgba(200,168,106,0.015) 55%, rgba(255,255,255,0.01));
}
body.world .method-card:hover {
  background: linear-gradient(150deg, rgba(200,168,106,0.13), rgba(200,168,106,0.03) 55%, rgba(255,255,255,0.015));
}
body.world .method-number {
  background: linear-gradient(180deg, rgba(200,168,106,0.88), rgba(200,168,106,0.30));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* stat cells — engraved-panel read, tighter big numeral */
body.world .stat-cell {
  border: 1px solid var(--e-edge);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
}
body.world .stat-cell .stat-n { letter-spacing: -0.02em; }

/* lvl cards — deepen the resting state; champagne hover border from base */
body.world .lvl-card {
  box-shadow: var(--e-bevel), var(--e-sh-1);
}
body.world .lvl-card .lvln { color: var(--e-champ); }

/* secondary surfaces — consistent edge + radius language */
body.world .compare,
body.world .svc-cat,
body.world .dir {
  border: 1px solid var(--e-edge);
}

/* ---------- pricing rail: a single machined panel ---------- */
body.world .price-row {
  border-radius: var(--e-rad);
  border: 1px solid var(--e-edge-strong);
  box-shadow: var(--e-bevel), var(--e-sh-1);
  overflow: hidden;
}
body.world .price-cell {
  transition: background .25s var(--e-ease), transform .25s var(--e-ease-out);
}
body.world a.price-cell:hover {
  background: rgba(200,168,106,0.12);
}
body.world .price-cell .pv small { color: var(--e-champ); }
/* offer cell — a contained warm glow, not a loud fill */
body.world .price-cell.offer-cell {
  background: linear-gradient(160deg, rgba(200,168,106,0.24), rgba(200,168,106,0.08));
  box-shadow: inset 0 0 0 1px rgba(200,168,106,0.28);
}
body.world .price-cell.offer-cell:hover { background: rgba(200,168,106,0.34); }

/* pull quote / creed — warm the rule */
body.world .pull { border-left: 2px solid var(--e-champ); }

/* ---------- form fields: calmer rest, warm hover (focus ring untouched) ---------- */
body.world .idea-form input,
body.world .idea-form textarea,
body.world .idea-form select,
body.world .board-search input {
  border-radius: var(--e-rad-sm);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--e-edge-strong);
  transition: border-color .2s var(--e-ease), background .2s var(--e-ease);
}
body.world .idea-form input:hover,
body.world .idea-form textarea:hover,
body.world .idea-form select:hover,
body.world .board-search input:hover { border-color: rgba(255,255,255,0.22); }

/* ---------- accessibility: re-affirm the global champagne focus ring ---------- */
body.world :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--e-champ);
  outline-offset: 2px;
}

/* ---------- mobile: scale depth + targets gracefully at ~390px ---------- */
@media (max-width: 600px) {
  body.world {
    --e-sh-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 28px -16px rgba(0,0,0,0.6);
    --e-sh-float: 0 1px 0 rgba(255,255,255,0.06) inset,
                  0 18px 40px -18px rgba(0,0,0,0.66),
                  0 0 0 1px rgba(200,168,106,0.20);
  }
  body.world .btn { padding: 14px 24px; min-height: 48px; }
  body.world .btn-sm { padding: 12px 20px; min-height: 44px; }
  body.world .eyebrow, body.world .kicker { letter-spacing: 0.3em; }
  body.world .nav-links a:not(.btn) { min-height: 46px; display: flex; align-items: center; }
  body.world .smoke,
  body.world .method-card,
  body.world .stat-cell,
  body.world .lvl-card,
  body.world .compare,
  body.world .svc-cat,
  body.world .dir { border-radius: var(--e-rad-sm); }
  body.world .hero .smoke,
  body.world .page-hero .smoke {
    border-radius: var(--e-rad);
    box-shadow: var(--e-bevel),
                0 26px 56px -28px rgba(0,0,0,0.70),
                0 0 0 1px rgba(200,168,106,0.14) !important;
  }
  body.world .hero .mega,
  body.world .page-hero .mega { text-shadow: 0 2px 18px rgba(0,0,0,0.5); }
}

/* ---------- reduced motion: keep static depth, neutralize hover lifts ---------- */
@media (prefers-reduced-motion: reduce) {
  body.world .btn-primary,
  body.world .btn-ghost,
  body.world .btn-ghost-light,
  body.world .method-card,
  body.world .stat-cell,
  body.world .compare,
  body.world .dir,
  body.world .svc-cat,
  body.world .idea-session-card,
  body.world .price-cell { transition: none !important; }
  body.world .btn-primary:hover,
  body.world .btn-ghost:hover,
  body.world .btn-ghost-light:hover,
  body.world .method-card:hover,
  body.world .stat-cell:hover,
  body.world .compare:hover,
  body.world .dir:hover,
  body.world .svc-cat:hover,
  body.world .idea-session-card:hover,
  body.world a.price-cell:hover { transform: none !important; }
}

/* Fix: method grid must single-column on narrow phones (minmax 280px overflowed at 320px) */
@media (max-width: 600px) {
  .method-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   PANEL GLASS — lighten the boxes from near-black to translucent dark grey
   The line-1314 override forced .smoke to ~0.92–0.95 opacity near-black,
   which read as solid black. Restore a frosted dark-glass: dark GREY tint,
   a little see-through so the marble shows softly, stronger backdrop blur
   so white text stays crisp. Scoped body.world (dark theme only).
   ===================================================================== */
body.world .smoke {
  background: linear-gradient(160deg, rgba(38,41,48,0.80), rgba(27,29,35,0.86)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.06);
  backdrop-filter: blur(16px) saturate(1.06);
}
/* hero/page-hero card: a touch more presence (it's the anchor), still grey + glassy */
body.world .hero .smoke,
body.world .page-hero .smoke {
  background: linear-gradient(160deg, rgba(40,43,50,0.82), rgba(28,30,36,0.88)) !important;
}

/* "What happens next" reassurance list — quiet, premium, trust at the ask */
body.world .next-steps {
  list-style: none;
  margin: 0 auto 26px;
  padding: 20px 24px;
  max-width: 640px;
  text-align: left;
  background: linear-gradient(160deg, rgba(200,168,106,0.06), rgba(255,255,255,0.012));
  border: 1px solid rgba(200,168,106,0.18);
  border-radius: var(--e-rad, 12px);
}
body.world .next-steps li {
  position: relative;
  padding: 7px 0 7px 26px;
  color: #CFD2D8;
  font-size: 15px;
  line-height: 1.55;
}
body.world .next-steps li + li { border-top: 1px solid rgba(255,255,255,0.05); }
body.world .next-steps li::before {
  content: "";
  position: absolute; left: 2px; top: 15px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--champagne-2, #C8A86A);
  box-shadow: 0 0 9px rgba(200,168,106,0.5);
}
body.world .next-steps strong { color: #F4EFE4; font-weight: 600; }

/* Founder credibility chips — quiet authority, restrained gold */
body.world .cred-row {
  list-style: none; margin: 4px 0 18px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
body.world .cred-row li {
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #DDE0E4;
  padding: 7px 13px; border: 1px solid rgba(200,168,106,0.32);
  border-radius: 2px; background: rgba(200,168,106,0.05);
}

/* Category door subtitle on What We Build (matches the homepage/ stack taglines) */
body.world .svc-cat-sub { color: #9DA1A8; font-size: 14px; line-height: 1.5; margin: -6px 0 16px; max-width: 60ch; }
/* 3-item "what gets delivered" lists stack cleanly instead of a ragged 2+1 */
body.world .overlay-sec .kv > .incl { columns: 1; }