@import "tokens.css";

/* ===================================================================
   WithCrypto — "Editorial Bullion"
   A light, editorial, quiet-luxury system.
   Serif speaks. Sans serves. Mono keeps the ledger.
   Brand fonts (Georgia · Inter · IBM Plex Mono) retained per CI.
   All colour / type / spacing variables live in tokens.css
   (same architecture as the project's original app.css).
=================================================================== */
@font-face{ font-family:"Georgia Brand"; src:url("../fonts/georgia/Georgia.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Georgia Brand"; src:url("../fonts/georgia/Georgia Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Georgia Brand"; src:url("../fonts/georgia/Georgia Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Georgia Brand"; src:url("../fonts/georgia/Georgia Bold Italic.ttf") format("truetype"); font-weight:700; font-style:italic; font-display:swap; }
@font-face{ font-family:"Inter Brand"; src:url("../fonts/inter/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Inter Brand"; src:url("../fonts/inter/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations"); font-weight:100 900; font-style:italic; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono Brand"; src:url("../fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono Brand"; src:url("../fonts/ibm-plex-mono/IBMPlexMono-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }

*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  overflow-y:auto;
  max-width:100%;
}
::selection{ background:var(--gold); color:var(--onyx-950); }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-y:visible;
  max-width:100%;
  min-height:100%;
  overscroll-behavior-x:none;
  touch-action:pan-y;
}

a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:400; color:var(--ink); }
p{ margin:0; }
em{ font-style:italic; }
img, video, svg, iframe{ max-width:100%; height:auto; display:block; }
.mono{ font-family:var(--mono); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); width:100%; box-sizing:border-box; }

/* Lock layout — no sideways scroll */
main, header, footer, section{ max-width:100%; }

/* accessible focus ring */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--brass-ink);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:3000;
  background:var(--onyx-950); color:var(--text-on-dark);
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:12px 20px; border-radius:2px;
  transition:top .3s var(--ease);
}
.skip-link:focus{ top:12px; }

/* paper grain */
.grain{
  position:fixed; inset:0; z-index:2000; pointer-events:none;
  opacity:.45; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* signature: fine gold banknote frame around the viewport (desktop) */
.page-frame{
  position:fixed; inset:var(--frame); z-index:850; pointer-events:none;
  border:1px solid var(--line-gold);
  border-radius:3px;
}
.page-frame::before,
.page-frame::after{
  content:""; position:absolute; width:11px; height:11px;
  border:1px solid var(--brass);
}
.page-frame::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.page-frame::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* ===================================================================
   Buttons
=================================================================== */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 32px;
  border-radius:2px;
  font-family:var(--mono);
  font-size:12.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  border:1px solid transparent;
  transition:transform .5s var(--ease), background .4s ease, color .35s ease, border-color .4s ease, box-shadow .5s var(--ease);
  cursor:pointer; white-space:nowrap; overflow:hidden;
  min-height:48px;
}
.btn-solid,
.btn-outline{
  background:var(--verdigris);
  color:var(--bone);
  border:1px solid var(--verdigris);
  box-shadow:0 2px 4px rgba(47,122,115,.18), 0 14px 28px -12px rgba(47,122,115,.38);
}
.btn-solid:hover,
.btn-outline:hover{
  background:var(--patina-400);
  color:var(--bone);
  border-color:var(--patina-400);
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(47,122,115,.22), 0 24px 44px -14px rgba(47,122,115,.45);
}

/* Ghost — Log In (white pill) */
.btn-ghost{
  background:#ffffff;
  color:var(--onyx-950);
  border:1px solid var(--line-brass);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 2px 4px rgba(27,23,18,.05);
}
.btn-ghost:hover{
  background:#ffffff;
  color:var(--onyx-950);
  border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(27,23,18,.08), 0 14px 24px -12px rgba(27,23,18,.18);
}

/* Gold — Register only */
.btn-gold{
  background:var(--gradient-gold);
  color:var(--onyx-950);
  border-color:transparent;
  box-shadow:0 2px 4px rgba(27,23,18,.12), 0 14px 28px -12px rgba(154,127,76,.45);
}
.btn-gold::after{
  content:""; position:absolute; inset:0 auto 0 -80%; width:55%;
  background:linear-gradient(100deg, transparent, rgba(220,199,154,.5), transparent);
  transform:skewX(-20deg); transition:left .8s var(--ease);
}
.btn-gold:hover{
  transform:translateY(-2px);
  background:var(--gradient-gold);
  color:var(--onyx-950);
  border-color:transparent;
  filter:brightness(1.05);
  box-shadow:0 6px 14px rgba(27,23,18,.16), 0 24px 44px -14px rgba(154,127,76,.5);
}
.btn-gold:hover::after{ left:130%; }

/* Secondary — form submits (footer newsletter, etc). Shares the exact
   same sizing/radius/font as every other .btn — only the color differs —
   so it can never drift out of sync the way a hand-rolled button would. */
.btn-secondary{
  background:var(--btn-secondary-bg);
  color:var(--btn-secondary-text);
  border:1px solid var(--btn-secondary-border);
  box-shadow:0 2px 4px rgba(47,122,115,.18), 0 14px 28px -12px rgba(47,122,115,.38);
}
.btn-secondary:hover{
  background:var(--btn-secondary-hover-bg);
  color:var(--btn-secondary-text);
  border-color:var(--btn-secondary-hover-bg);
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(47,122,115,.22), 0 24px 44px -14px rgba(47,122,115,.45);
}

.btn-lg{ padding:18px 44px; font-size:13.5px; }
.btn .btn-arrow{ transition:transform .4s var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(4px); }

/* ===================================================================
   Header
=================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  transition:background .5s ease, border-color .5s ease, box-shadow .5s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(245,241,232,.82);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border-bottom-color:var(--line-brass);
  box-shadow:0 1px 30px -14px rgba(27,23,18,.4);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:92px; transition:height .4s ease; }
.site-header.scrolled .header-inner{ height:72px; }

/* Wordmark */
.wordmark{ font-family:var(--serif); font-size:24px; letter-spacing:.005em; color:var(--ink); font-weight:700; display:inline-flex; align-items:baseline; }
.wordmark em{ font-style:italic; font-weight:400; color:var(--brass-ink); }
.wordmark-dot{ color:var(--gold); }

.main-nav{ display:flex; gap:34px; }
.main-nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); position:relative; padding-bottom:6px; transition:color .3s ease;
}
.nav-idx{ font-size:8.5px; color:var(--brass-ink); vertical-align:super; margin-right:6px; letter-spacing:0; }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--brass); transition:right .45s var(--ease);
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a:hover::after{ right:0; }

.header-actions{ display:flex; gap:12px; align-items:center; }

.burger{
  display:none; flex-direction:column; gap:7px; justify-content:center;
  width:44px; height:44px; background:none; border:none; cursor:pointer; padding:0 7px;
  z-index:1001;
}
.burger span{ display:block; height:1.5px; width:100%; background:var(--ink); transition:transform .4s var(--ease), opacity .3s; }
.burger.open span:first-child{ transform:translateY(4.25px) rotate(45deg); }
.burger.open span:last-child{ transform:translateY(-4.25px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:1000;
  background:rgba(245,241,232,.98);
  backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--gutter);
  opacity:0; pointer-events:none; transition:opacity .45s ease;
}
.mobile-nav.open{ opacity:1; pointer-events:auto; }
.mobile-nav nav{ display:flex; flex-direction:column; gap:6px; }
.mobile-nav nav a{
  font-family:var(--serif); font-size:clamp(30px,8vw,46px); color:var(--ink); padding:12px 0;
  border-bottom:1px solid var(--line);
  transform:translateY(16px); opacity:0;
  transition:transform .6s var(--ease), opacity .6s ease, color .3s;
}
.mobile-nav.open nav a{ transform:none; opacity:1; }
.mobile-nav nav a:nth-child(1){ transition-delay:.08s; }
.mobile-nav nav a:nth-child(2){ transition-delay:.14s; }
.mobile-nav nav a:nth-child(3){ transition-delay:.2s; }
.mobile-nav nav a:nth-child(4){ transition-delay:.26s; }
.mobile-nav nav a:nth-child(5){ transition-delay:.32s; }
.mobile-nav nav a:hover{ color:var(--brass-ink); }
.mobile-nav nav a span{ font-family:var(--mono); font-size:12px; color:var(--brass-ink); vertical-align:super; margin-right:14px; }
.mobile-actions{ display:flex; gap:14px; margin-top:44px; }

/* ===================================================================
   Hero — editorial, asymmetric, pinned bullion coin
=================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; overflow:hidden;
  background:
    radial-gradient(1200px 760px at 84% 22%, rgba(196,169,104,.24), transparent 60%),
    radial-gradient(880px 640px at 4% 92%, rgba(47,122,115,.07), transparent 62%),
    linear-gradient(180deg, var(--surface-hi), var(--paper) 58%);
}
.hero-atmosphere{ position:absolute; inset:0; pointer-events:none; }
.hero-glow-a{ position:absolute; width:52vw; height:52vw; min-width:480px; min-height:480px; top:-22%; left:-14%; background:radial-gradient(circle, rgba(220,199,154,.26), transparent 62%); }
.hero-glow-b{ position:absolute; width:46vw; height:46vw; min-width:420px; min-height:420px; bottom:-26%; right:-10%; background:radial-gradient(circle, rgba(47,122,115,.08), transparent 65%); }
.hero-ring{
  position:absolute; top:46%; right:-14vw; width:52vw; height:52vw; min-width:520px; min-height:520px;
  transform:translateY(-50%); border:1px solid rgba(154,127,76,.22); border-radius:50%;
  animation:ringSpin 90s linear infinite;
}
.hero-ring::before{ content:""; position:absolute; top:-4px; left:50%; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 16px 3px rgba(196,169,104,.6); }
.hero-ring-2{ width:40vw; height:40vw; min-width:400px; min-height:400px; right:-8vw; border-color:rgba(154,127,76,.13); animation-duration:150s; animation-direction:reverse; }
.hero-ring-2::before{ background:var(--verdigris); box-shadow:0 0 14px 3px rgba(47,122,115,.5); width:6px; height:6px; }
@keyframes ringSpin{ to{ transform:translateY(-50%) rotate(360deg); } }

.hero-inner{ position:relative; z-index:2; flex:1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:clamp(24px,4vw,64px); width:100%; padding-top:132px; padding-bottom:64px; }
.hero-copy{ min-width:0; }

.eyebrow{ display:flex; align-items:center; gap:16px; font-family:var(--mono); font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--brass-ink); margin-bottom:34px; }
.eyebrow-rule{ width:56px; height:1px; background:linear-gradient(90deg, var(--brass), transparent); flex-shrink:0; }

.hero-title{ display:flex; flex-direction:column; }
.hero-title .line{ font-size:clamp(46px, 7.4vw, 108px); line-height:1.0; letter-spacing:-.018em; color:var(--ink); font-weight:700; }
.gold-dot{ color:var(--gold); }
.hero-title .line-italic{ font-style:italic; font-weight:400; font-size:clamp(23px, 3.2vw, 46px); margin-top:28px; letter-spacing:0; color:var(--ink-2); }
.hero-foot{ margin-top:54px; display:flex; align-items:center; gap:42px; flex-wrap:wrap; }
.hero-lede{ max-width:38ch; font-size:15.5px; color:var(--ink-3); }

/* ---- Custom on-brand 3D bullion coin (gold leaf · brass · champagne) ---- */
.hero-coin-stage{ position:relative; display:flex; align-items:center; justify-content:center; perspective:1200px; transition:transform .15s ease-out, opacity .15s ease-out; will-change:transform, opacity; }
.hero-copy{ transition:transform .15s ease-out, opacity .15s ease-out; will-change:transform, opacity; }

/* soft gold bloom behind the coin */
.coin-halo{ position:absolute; width:118%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(220,199,154,.5), rgba(196,169,104,.16) 45%, transparent 68%); filter:blur(6px); }

/* thin orbiting ring w/ a travelling node (donut/glow motif) */
.coin-ring{ position:absolute; width:112%; aspect-ratio:1; border-radius:50%; border:1px solid rgba(154,127,76,.28); animation:ringSpin2 26s linear infinite; }
.coin-ring::before{ content:""; position:absolute; top:-4px; left:50%; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 14px 3px rgba(196,169,104,.7); }
@keyframes ringSpin2{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

.coin-float{ position:relative; width:clamp(238px, 27vw, 372px); animation:coinFloat 6.5s ease-in-out infinite; }
@keyframes coinFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-22px); } }

.coin3d{ position:relative; width:100%; aspect-ratio:1; transform-style:preserve-3d; animation:coinSpin 17s linear infinite; }
@keyframes coinSpin{ from{ transform:rotateX(7deg) rotateY(0); } to{ transform:rotateX(7deg) rotateY(360deg); } }
.coin3d-face{
  position:absolute; inset:0; border-radius:50%; backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:radial-gradient(circle at 34% 26%, #fbf1d4 0%, var(--gold-hi) 20%, var(--gold) 46%, var(--brass) 76%, #6a5327 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255,250,232,.78),
    inset 0 0 0 13px rgba(110,83,39,.32),
    inset 0 0 0 15px rgba(255,250,232,.3),
    inset 0 -24px 46px rgba(70,52,24,.5),
    inset 0 24px 46px rgba(255,246,214,.44);
}
.coin3d-front{ transform:translateZ(9px); }
.coin3d-back{ transform:rotateY(180deg) translateZ(9px); }
.coin3d-edge{ position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(from 0deg, #6f5931 0deg 3deg, #c4a968 3deg 6deg); filter:brightness(.92); }
.coin-monogram{ font-family:var(--serif); font-weight:700; font-size:clamp(58px, 7.4vw, 96px); line-height:1; color:#4a3b20; text-shadow:0 2px 0 rgba(255,246,214,.6), 0 -1px 2px rgba(60,45,20,.5); }
.coin-monogram em{ font-style:italic; color:#6a5327; }
.coin-sub{ font-family:var(--mono); font-size:9px; letter-spacing:.34em; color:#5c4a29; }
.coin-emblem{ width:38%; height:38%; background:conic-gradient(from 45deg, #6a5327, #c4a968, #6a5327, #c4a968, #6a5327); border-radius:6px; transform:rotate(45deg); box-shadow:inset 0 0 0 2px rgba(255,246,214,.5); }
.coin-shadow{ position:absolute; left:50%; bottom:-11%; transform:translateX(-50%); width:56%; height:26px; border-radius:50%; background:radial-gradient(ellipse, rgba(74,59,32,.34), transparent 70%); animation:coinShadow 6.5s ease-in-out infinite; z-index:-1; }
@keyframes coinShadow{ 0%,100%{ transform:translateX(-50%) scale(1); opacity:.7; } 50%{ transform:translateX(-50%) scale(.8); opacity:.42; } }

/* floating balance chip — adapted "Balance / Coin-Stats" box */
.balance-chip{
  position:absolute; left:-6%; bottom:12%;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px 12px 12px; border-radius:12px;
  background:var(--surface-hi); border:1px solid var(--line-brass);
  box-shadow:var(--shadow-hi);
  animation:chipFloat 5.5s ease-in-out infinite .4s;
}
@keyframes chipFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
.chip-donut{ width:34px; height:34px; border-radius:50%; flex-shrink:0; background:conic-gradient(var(--verdigris) 0 72%, rgba(47,122,115,.16) 72% 100%); -webkit-mask:radial-gradient(circle 9px at 50% 50%, transparent 98%, #000 100%); mask:radial-gradient(circle 9px at 50% 50%, transparent 98%, #000 100%); }
.chip-text{ display:flex; flex-direction:column; line-height:1.2; }
.chip-text b{ font-size:10px; letter-spacing:.16em; color:var(--teal-ink); font-weight:600; }
.chip-text i{ font-style:normal; font-size:11px; color:var(--ink-3); letter-spacing:.02em; }


.reveal{ opacity:0; transform:translateY(26px); animation:revealUp 1.1s var(--ease) forwards; animation-delay:calc(var(--d,0)*.13s + .15s); }
@keyframes revealUp{ to{ opacity:1; transform:none; } }

/* ===================================================================
   Section shell
=================================================================== */
.section{ padding:var(--section-pad) 0; position:relative; }

/* ===================================================================
   Editorial heading system — left-aligned, index-forward, asymmetric
=================================================================== */
.deco-head{ position:relative; max-width:none; margin:0 0 clamp(52px,6vw,80px); }
.deco-eyebrow{
  display:none;
  align-items:center; gap:14px;
  font-size:11px; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brass-ink); margin-bottom:22px;
}
.deco-diamond{ width:var(--diamond-size-sm); height:var(--diamond-size-sm); flex-shrink:0; background:var(--diamond-bg); transform:rotate(45deg); box-shadow:var(--diamond-glow); }
.deco-headline{
  font-size:clamp(36px, 5vw, 68px); font-weight:700; line-height:1.06; letter-spacing:-.015em; color:var(--ink);
  max-width:16ch;
}
.deco-headline em{ font-style:italic; color:var(--brass-ink); }
.deco-headline-sm{ font-size:clamp(28px, 3.6vw, 46px); max-width:22ch; }
.deco-rule{ display:none; }

.section-lede{ max-width:56ch; color:var(--ink-3); font-size:16.5px; line-height:1.75; }
.section-lede-center{ margin-top:-24px; margin-bottom:56px; }

.rv{
  opacity:0; transform:translateY(56px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay:calc(var(--i,0)*.1s);
  will-change:transform, opacity;
}
.rv.in{ opacity:1; transform:none; }

/* Scroll-reveal direction variants */
.rv-left{ transform:translateX(-52px) translateY(28px); }
.rv-right{ transform:translateX(52px) translateY(28px); }
.rv-scale{ transform:scale(.9) translateY(36px); }
.rv-up{ transform:translateY(72px); }
.rv.in.rv-left,
.rv.in.rv-right,
.rv.in.rv-scale,
.rv.in.rv-up{ transform:none; }

/* Staggered child motion when blocks scroll into view */
@media (prefers-reduced-motion: no-preference){
  .step.in .step-marker{ animation:rvChildPop .65s var(--ease) both; }
  .step.in h3{ animation:rvChildUp .75s var(--ease) .1s both; }
  .step.in p{ animation:rvChildUp .75s var(--ease) .2s both; }

  .bs-card.in .bs-kicker{ animation:rvChildUp .6s var(--ease) both; }
  .bs-card.in .bs-heading{ animation:rvChildUp .7s var(--ease) .08s both; }
  .bs-card.in .bs-list-how li{ animation:rvChildUp .55s var(--ease) both; }
  .bs-card.in .bs-list-how li:nth-child(1){ animation-delay:.18s; }
  .bs-card.in .bs-list-how li:nth-child(2){ animation-delay:.26s; }
  .bs-card.in .bs-list-how li:nth-child(3){ animation-delay:.34s; }
  .bs-card.in .bs-list-how li:nth-child(4){ animation-delay:.42s; }
  .bs-card.in .bs-list-why li{ animation:rvChildUp .55s var(--ease) both; }
  .bs-card.in .bs-list-why li:nth-child(1){ animation-delay:.22s; }
  .bs-card.in .bs-list-why li:nth-child(2){ animation-delay:.3s; }
  .bs-card.in .bs-list-why li:nth-child(3){ animation-delay:.38s; }
  .bs-card.in .bs-list-why li:nth-child(4){ animation-delay:.46s; }
  .bs-card.in .bs-list-why li:nth-child(5){ animation-delay:.54s; }
  .bs-card.in .bs-list-why li:nth-child(6){ animation-delay:.62s; }

  .why-card.in .why-num{ animation:rvChildPop .6s var(--ease) both; }
  .why-card.in h4{ animation:rvChildUp .7s var(--ease) .1s both; }
  .why-card.in p{ animation:rvChildUp .7s var(--ease) .2s both; }

  .service-card.in .service-top{ animation:rvChildUp .6s var(--ease) both; }
  .service-card.in h4{ animation:rvChildUp .7s var(--ease) .1s both; }
  .service-card.in p{ animation:rvChildUp .7s var(--ease) .2s both; }

  .partner-logo.in{ animation:rvPartnerIn .8s var(--ease) both; }
  .partner-logo.in:nth-child(1){ animation-delay:0s; }
  .partner-logo.in:nth-child(2){ animation-delay:.1s; }
  .partner-logo.in:nth-child(3){ animation-delay:.2s; }
  .partner-logo.in:nth-child(4){ animation-delay:.3s; }

  .deco-head.in .deco-eyebrow{ animation:rvChildUp .7s var(--ease) both; }
  .deco-head.in .deco-headline{ animation:rvChildUp .85s var(--ease) .1s both; }

  @keyframes rvChildUp{
    from{ opacity:0; transform:translateY(22px); }
    to{ opacity:1; transform:none; }
  }
  @keyframes rvChildPop{
    from{ opacity:0; transform:scale(.82); }
    to{ opacity:1; transform:none; }
  }
  @keyframes rvPartnerIn{
    from{ opacity:0; transform:translateY(28px) scale(.94); }
    to{ opacity:1; transform:none; }
  }
}

/* ===================================================================
   How it works — editorial numbered timeline
=================================================================== */
.how-it-works{ border-top:1px solid var(--line-soft); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px, 2.4vw, 36px); }
.step{
  position:relative; background:var(--surface); border:1px solid var(--line-brass); border-radius:3px;
  padding:44px 34px 40px;
  transition:border-color .4s ease, transform .35s var(--ease), box-shadow .5s ease, background .4s ease;
  box-shadow:var(--shadow);
}
.step::before{
  content:counter(step, decimal-leading-zero); position:absolute; top:22px; right:28px;
  font-family:var(--serif); font-style:italic; font-size:56px; line-height:1; color:var(--gold); opacity:.22;
}
.steps{ counter-reset:step; }
.step{ counter-increment:step; }
.step:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--shadow-hi); background:var(--surface-hi); }
.step-marker{ display:flex; align-items:center; gap:16px; margin-bottom:26px; }
.step-num{
  font-family:var(--mono); font-size:13px; letter-spacing:.08em; font-weight:600; color:var(--onyx-950);
  background:linear-gradient(150deg, var(--gold-hi), var(--gold) 55%, var(--brass));
  width:46px; height:46px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -6px rgba(154,127,76,.6), inset 0 1px 0 rgba(255,253,247,.6);
}
.step-line{ flex:1; height:1px; background:var(--line-brass); }
.step h3{ font-size:clamp(20px, 1.8vw, 24px); line-height:1.32; margin-bottom:14px; color:var(--ink); font-weight:700; }
.step p{ color:var(--ink-3); font-size:15px; }

/* ===================================================================
   Buy / Sell
=================================================================== */
.buysell{
  border-top:1px solid var(--line-soft);
  background:
    radial-gradient(1100px 620px at 50% 0%, rgba(196,169,104,.12), transparent 62%),
    var(--paper-2);
}
.buysell-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(26px, 3.2vw, 52px); align-items:stretch; }
.bs-card{
  position:relative; padding:clamp(38px, 4vw, 54px) clamp(30px, 3vw, 44px);
  background:var(--surface); border:1px solid var(--line-brass); border-radius:3px;
  box-shadow:var(--shadow);
  transition:border-color .4s ease, box-shadow .5s ease, transform .35s var(--ease);
}
.bs-card:hover{ border-color:var(--gold); box-shadow:var(--shadow-hi); transform:translateY(-4px); }
.bs-card-glow{ display:none; }
.bs-kicker{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--brass-ink); }
.bs-heading{ font-size:clamp(25px, 2.3vw, 33px); font-weight:700; line-height:1.24; margin:16px 0 38px; color:var(--ink); }
.bs-heading em{ color:var(--brass-ink); font-style:italic; }
.bs-block + .bs-block{ margin-top:38px; }
.bs-label{
  display:inline-block; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone); border:1px solid var(--verdigris); border-radius:2px; padding:7px 18px; margin-bottom:22px;
}
.bs-list li{ position:relative; padding:12px 0 12px 34px; border-bottom:1px solid var(--line-soft); font-size:15px; color:var(--ink-2); }
.bs-list li:last-child{ border-bottom:none; }
.bs-list-how .bs-idx{
  position:absolute; left:0; top:10px;
  display:inline-block;
  width:auto; min-width:24px;
  font-family:var(--mono); font-style:normal; font-weight:700;
  font-size:clamp(22px, 2.2vw, 28px); line-height:1;
  color:#4a3b20;
  background:none; border-radius:0;
  box-shadow:none; text-shadow:none;
}

.bs-divider{ align-self:center; display:flex; align-items:center; justify-content:center; position:relative; width:64px; }
.bs-divider::before{ content:""; position:absolute; top:6%; bottom:6%; left:50%; width:1px; background:linear-gradient(180deg, transparent, var(--line-brass) 20%, var(--line-brass) 80%, transparent); }
.bs-divider span{
  position:relative; z-index:1; font-family:var(--serif); font-style:italic; font-size:26px; color:var(--onyx-950);
  background:linear-gradient(150deg, var(--gold-hi), var(--gold) 55%, var(--brass));
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -10px rgba(154,127,76,.65), inset 0 1px 0 rgba(255,253,247,.6);
}

/* ===================================================================
   Why WithCrypto
=================================================================== */
.why{ border-top:1px solid var(--line-soft); }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-brass); border:1px solid var(--line-brass); border-radius:3px; overflow:hidden; }
.why-card{ background:var(--surface); padding:42px 30px 46px; transition:transform .35s var(--ease); }
.why-num{ font-family:var(--mono); font-style:normal; font-size:22px; color:var(--brass-ink); }
.why-card h4{ font-size:20px; line-height:1.3; margin:20px 0 14px; color:var(--ink); font-weight:700; }
.why-card p{ font-size:14px; color:var(--ink-3); }

/* ===================================================================
   Services
=================================================================== */
.services{ border-top:1px solid var(--line-soft); }
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px, 2.2vw, 30px); }
.service-card{
  position:relative; border:1px solid var(--line-brass); border-radius:3px; padding:46px 36px; background:var(--surface);
  box-shadow:var(--shadow);
  transition:border-color .4s ease, box-shadow .5s ease, transform .35s var(--ease), background .4s ease;
}
.service-card:hover{ border-color:var(--gold); box-shadow:var(--shadow-hi); transform:translateY(-4px); background:var(--surface-hi); }
.service-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.service-icon{ width:40px; height:40px; color:var(--brass-ink); }
.service-idx{ font-size:11px; color:var(--brass-ink); letter-spacing:.1em; }
.service-card h4{ font-size:21px; margin-bottom:14px; color:var(--ink); font-weight:700; }
.service-card p{ font-size:14.5px; color:var(--ink-3); }
.services-cta{ margin-top:54px; }

/* ===================================================================
   At a Glance
=================================================================== */
.glance{ border-top:1px solid var(--line-soft); background:radial-gradient(1000px 480px at 50% 115%, rgba(196,169,104,.14), transparent 65%); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px, 3vw, 44px); }
.stat{ padding-top:22px; border-top:2px solid var(--gold); }
.stat-num{ display:block; font-family:var(--serif); font-weight:700; font-size:clamp(40px, 4.6vw, 66px); line-height:1; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat-label{ display:block; margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.stats-row-secondary{
  margin-top:60px; padding-top:42px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:clamp(30px, 5vw, 76px);
}
.stat-num-sm{ font-family:var(--serif); font-size:clamp(22px, 2.2vw, 30px); font-weight:700; color:var(--brass-ink); margin-right:12px; font-variant-numeric:tabular-nums; }
.stat-sm .stat-label{ display:inline; margin:0; }

/* ===================================================================
   Transactions ledger — light paper terminal
=================================================================== */
.transactions{ border-top:1px solid var(--line-soft); }
.dash{ position:relative; border:1px solid var(--line-brass); border-radius:4px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden; }
.dash-glow{ display:none; }
.dash-chrome{ display:flex; align-items:center; gap:18px; padding:20px 28px; border-bottom:1px solid var(--line); background:var(--paper-2); }
.dash-dots{ display:flex; gap:7px; }
.dash-dots span{ width:9px; height:9px; border-radius:50%; background:var(--brass); opacity:.5; }
.dash-dots span:first-child{ background:var(--gold); opacity:1; }
.dash-label{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.dash-live{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-ink); }
.dash-live i{ width:6px; height:6px; border-radius:50%; background:var(--verdigris); box-shadow:0 0 8px 2px rgba(47,122,115,.5); animation:livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(.7); } }
.ledger-row{ display:grid; grid-template-columns:1.4fr 1fr auto; align-items:center; padding:20px 28px; font-size:15px; transition:background .3s ease; color:var(--ink-2); }
.ledger-row:not(.ledger-head):hover{ background:rgba(196,169,104,.08); }
.ledger-row:not(:last-child){ border-bottom:1px solid var(--line-soft); }
.ledger-head{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); background:var(--paper-2); }
.ledger-cat-cell{ display:flex; align-items:center; gap:14px; }
.cat-icon{ width:9px; height:9px; flex-shrink:0; transform:rotate(45deg); border:1px solid var(--brass); }
.ledger-ref{ font-size:13px; color:var(--brass-ink); letter-spacing:.04em; }
.tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; justify-self:end; border:1px solid; border-radius:2px; }
.tag-ok{ color:var(--teal-ink); border-color:rgba(47,122,115,.4); background:rgba(47,122,115,.07); }
.tag-pending{ color:var(--brass-ink); border-color:var(--line-brass); background:rgba(196,169,104,.08); }
.ledger-note{ padding:18px 28px 24px; font-size:11px; letter-spacing:.06em; color:var(--ink-3); }

/* ===================================================================
   Partners — onyx accent band
=================================================================== */
.partners{ border-top:1px solid var(--line-soft); padding-bottom:calc(var(--section-pad) - 20px); }
.partners-strip{
  border-radius:4px; padding:44px clamp(24px,4vw,56px);
  background:
    radial-gradient(900px 300px at 50% 0%, rgba(196,169,104,.12), transparent 70%),
    linear-gradient(180deg, var(--ember), var(--onyx));
  border:1px solid var(--line-brass); box-shadow:var(--shadow);
}
.partners-track{ display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:clamp(40px, 6vw, 88px); }
.partner-logo{ display:flex; align-items:center; flex-shrink:0; }
.partner-logo img{ height:clamp(30px, 3.4vw, 44px); width:auto; max-width:200px; object-fit:contain; opacity:.82; transition:opacity .35s ease, transform .3s ease; }
.partner-logo:hover img{ opacity:1; transform:scale(1.05); }

/* ===================================================================
   Footer — onyx close
=================================================================== */
.site-footer{ background:linear-gradient(180deg, var(--ember), var(--onyx)); color:var(--bone); padding-top:88px; border-top:1px solid var(--line-brass); }
.footer-inner{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(40px, 5vw, 80px); padding-bottom:72px; }
.site-footer .wordmark{ color:var(--bone); }
.site-footer .wordmark em{ color:var(--gold); }
.site-footer .wordmark-dot{ color:var(--gold); }
.footer-brand p{ margin-top:24px; font-size:13px; line-height:1.75; color:var(--bone-dim); max-width:36ch; }
.footer-nav{ display:flex; flex-direction:column; gap:13px; }
.footer-nav-title{ font-size:10.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.footer-nav a{ font-size:14px; color:var(--bone-dim); width:fit-content; position:relative; transition:color .3s ease; }
.footer-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--gold); transition:right .4s var(--ease); }
.footer-nav a:hover{ color:var(--bone); }
.footer-nav a:hover::after{ right:0; }
.footer-form{ display:flex; flex-direction:column; gap:10px; }
.footer-form label{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim); }
.footer-form input{
  background:rgba(241,235,221,.05); border:1px solid rgba(241,235,221,.16);
  padding:14px 16px; color:var(--bone); font-family:var(--sans); font-size:15px; outline:none;
  transition:border-color .35s ease; border-radius:2px; min-height:48px;
}
.footer-form input:focus{ border-color:var(--gold); }
.footer-form input::placeholder{ color:var(--bone-dim); opacity:.5; }
/* Sizing/color/radius all come from .btn .btn-secondary — only the
   footer's own layout placement is set here. */
.footer-form button{ margin-top:8px; align-self:flex-start; }
.footer-bottom{ border-top:1px solid rgba(241,235,221,.1); }
.footer-bottom-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:24px; padding-bottom:24px; font-size:11px; letter-spacing:.06em; color:var(--bone-dim); }
.footer-bottom a{ color:var(--gold); }
.footer-bottom a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ===================================================================
   Dimensional box system — Framer-inspired 3D standout surfaces
   (elevated gradient cards · top sheen · gold hairline · glow · bento)
=================================================================== */

/* Section index → floating 3D pill (Tokenomics-Pill motif) */
.deco-eyebrow{
  background:linear-gradient(180deg, var(--surface-hi), var(--paper-2));
  border:1px solid var(--line-brass);
  border-radius:100px;
  padding:9px 18px 9px 14px;
  box-shadow:var(--card-3d);
}
.deco-eyebrow .deco-diamond:last-child{ display:none; }

/* Elevated, dimensional card surfaces */
.step, .bs-card, .service-card, .dash{
  background:linear-gradient(180deg, var(--surface-hi), var(--surface));
  border:1px solid var(--line-brass);
  border-radius:18px;
  box-shadow:var(--card-3d);
}
.step, .service-card, .bs-card{ overflow:hidden; }
.step::before{ z-index:1; }
.step:hover, .service-card:hover, .bs-card:hover{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:var(--card-3d-hi), 0 0 0 1px var(--line-gold), 0 34px 66px -22px rgba(196,169,104,.34);
}

/* Buy/Sell — reveal the glow bloom at the card crown */
.bs-card-glow{
  display:block; position:absolute; inset:0 0 auto 0; height:190px; pointer-events:none;
  background:var(--glow-gold); opacity:.7;
}
.bs-kicker, .bs-heading, .bs-block{ position:relative; z-index:1; }

/* Why → elevated 3D bento tiles */
.why-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
  background:none; border:none; border-radius:0; overflow:visible;
}
.why-card{
  position:relative; border:1px solid var(--line-brass); border-radius:18px;
  background:linear-gradient(180deg, var(--surface-hi), var(--surface));
  box-shadow:var(--card-3d); padding:40px 34px 44px; overflow:hidden;
}
.why-card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:150px; pointer-events:none;
  background:var(--glow-gold); opacity:0; transition:opacity .45s ease;
}
.why-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--card-3d-hi), 0 0 0 1px var(--line-gold), 0 34px 66px -22px rgba(196,169,104,.34);
}
.why-card:hover::after{ opacity:.7; }
.why-card > *{ position:relative; z-index:1; }
.why-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:13px;
  background:var(--gradient-gold); color:var(--onyx-950);
  font-family:var(--mono); font-style:normal; font-size:19px; font-weight:700;
  box-shadow:0 8px 18px -8px rgba(154,127,76,.6), inset 0 1px 0 rgba(255,253,247,.65);
}

/* Ledger terminal — subtle crown glow */
.dash-glow{
  display:block; position:absolute; inset:0 0 auto 0; height:160px; pointer-events:none;
  background:var(--glow-gold); opacity:.4; z-index:0;
}
.dash-chrome, .ledger, .ledger-note{ position:relative; z-index:1; }

/* Services — 3D icon medallion */
.service-icon{
  box-sizing:content-box; width:26px; height:26px; padding:11px; border-radius:13px;
  background:linear-gradient(180deg, var(--surface-hi), var(--paper-2));
  border:1px solid var(--line-brass);
  box-shadow:var(--card-3d); color:var(--brass-ink);
}

/* Steps — number badge reads as a raised 3D token */
.step-num{ border-radius:14px; }

/* ===================================================================
   Framer (Cryptor) style incorporation
   Floating pill nav · gradient pill CTA w/ medallion · sparkle caption
   — brought into the editorial light system, recolored gold/onyx.
=================================================================== */

/* Floating rounded pill navigation (Cryptor signature) */
.site-header{ padding-top:16px; }
.header-unit{
  display:flex; flex-direction:column; align-items:center;
  width:100%; max-width:1300px; margin:0 auto;
}
.header-inner{
  max-width:1300px; margin:0 auto; height:72px;
  padding:0 10px 0 30px; gap:22px;
  border:1px solid var(--line-brass);
  border-radius:100px;
  background:var(--nav-surface);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
  box-shadow:var(--card-3d);
  transition:height .4s ease, background .5s ease, max-width .4s ease;
}
.site-header.scrolled{ background:none; border-bottom-color:transparent; box-shadow:none; }
.site-header.scrolled .header-inner{ height:64px; max-width:1180px; background:var(--nav-surface); }

.header-inner .wordmark{ flex-shrink:0; font-size:24px; }

/* Brand logo — Col_Ember on bone (light) · Col_Bone on onyx (dark) */
.logo-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  line-height:0;
}
.logo-link .logo-img{
  height:26px;
  width:auto;
  display:block;
}
.logo-link .logo-on-dark{
  display:none !important;
}
html.dark .logo-link .logo-on-bone{
  display:none !important;
}
html.dark .logo-link .logo-on-dark{
  display:block !important;
}
.site-header.scrolled .logo-link .logo-img{ height:23px; }
@media (max-width:1080px){ .logo-link .logo-img{ height:23px; } }
.logo-link-footer .logo-img{ height:32px; }
.media-badge-logo{ height:16px; width:auto; display:block; }

.main-nav{
  gap:2px; padding:5px; border-radius:100px;
  background:rgba(27,23,18,.045); border:1px solid var(--line-soft);
  flex:0 1 auto;
}
.main-nav a{
  white-space:nowrap; padding:11px 18px; border-radius:100px;
  color:var(--ink-2); font-size:11.5px; letter-spacing:.08em; line-height:1;
}
.main-nav a::after{ display:none; }
.main-nav a:hover{ background:var(--surface-hi); color:var(--ink); box-shadow:var(--shadow-sm); }
.nav-idx{ display:none; }

.header-actions{ flex-shrink:0; gap:8px; }
.header-actions .btn{
  min-height:40px; height:40px; padding:0 20px;
  border-radius:9999px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.header-actions .btn.btn-solid{
  box-shadow:0 1px 2px rgba(47,122,115,.16), 0 4px 12px -4px rgba(47,122,115,.3);
}
.header-actions .btn.btn-solid:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(47,122,115,.18), 0 8px 18px -6px rgba(47,122,115,.36);
}
.header-actions .btn.btn-ghost,
.mobile-actions .btn.btn-ghost{
  background:#ffffff !important;
  color:var(--onyx-950) !important;
  border:1px solid rgba(154,127,76,.38) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.98) inset, 0 1px 2px rgba(27,23,18,.06) !important;
}
.header-actions .btn.btn-ghost:hover,
.mobile-actions .btn.btn-ghost:hover{
  background:#ffffff !important;
  color:var(--onyx-950) !important;
  border-color:var(--gold) !important;
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,1) inset, 0 4px 10px rgba(27,23,18,.08) !important;
}

/* Day / night theme toggle */
.theme-toggle{
  position:relative; flex-shrink:0;
  width:52px; height:28px; padding:0; border:none; cursor:pointer;
  border-radius:100px;
  border:1px solid var(--line-brass);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.theme-toggle::before,
.theme-toggle::after{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:11px; line-height:1; pointer-events:none;
  transition:opacity .3s ease;
}
.theme-toggle::before{ content:"☀"; left:9px; opacity:1; }
.theme-toggle::after{ content:"☾"; right:8px; opacity:.45; }
.dark .theme-toggle::before{ opacity:.45; }
.dark .theme-toggle::after{ opacity:1; }
.theme-toggle-knob{
  position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:var(--gradient-gold);
  box-shadow:0 2px 6px rgba(27,23,18,.22);
  transition:transform .35s var(--ease), background .35s ease;
}
.dark .theme-toggle-knob{ transform:translateX(24px); }
.theme-toggle:hover{ border-color:var(--gold); }
.theme-toggle:focus-visible{ outline:2px solid var(--brass-ink); outline-offset:3px; }

/* Pill CTA (ButtonPrimary motif) — every button variant shares one radius */
.btn-solid,
.btn-gold,
.btn-secondary{ border-radius:100px; }
.btn-ghost, .btn-outline{ border-radius:100px; }

/* Sparkle section caption (SectionCaption motif) */
.deco-diamond{
  border-radius:0; background:var(--gold);
  clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  box-shadow:none;
  width:var(--diamond-size-sm);
  height:var(--diamond-size-sm);
}

/* ===================================================================
   List markers — gold diamond (tokens: --diamond-* in tokens.css)
=================================================================== */
:is(.about-band-list, .expanded-list, .services-list, .legal-content ul) > li,
.services-hero-copy .services-list > li{
  position:relative;
}
:is(.about-band-list, .expanded-list, .services-list, .legal-content ul) > li::before,
.services-hero-copy .services-list > li::before{
  content:"";
  position:absolute;
  width:var(--diamond-size);
  height:var(--diamond-size);
  background:var(--diamond-bg);
  transform:rotate(45deg);
  box-shadow:var(--diamond-glow);
  border-radius:0;
}
.about-band-list > li::before{ left:0; top:.65em; }
.expanded-list > li::before{ left:2px; top:8px; }
.services-list > li::before{ left:0; top:.72em; }
.legal-content ul > li::before{ left:0; top:.72em; }
.services-hero-copy .services-list > li::before{ left:16px; top:18px; }

/* ===================================================================
   Buy / Sell — dimensional standout cards, separated How / Why
=================================================================== */
.buysell-grid{ align-items:stretch; }

.bs-card{
  padding:clamp(30px, 3vw, 46px);
  border-radius:24px;
  background:var(--card-bg);
  border:1px solid var(--line-brass);
  box-shadow:var(--card-3d);
  overflow:hidden;
}
.bs-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:var(--gradient-gold);
}
.bs-card:hover{
  transform:translateY(-8px);
  border-color:var(--gold);
  box-shadow:var(--card-3d-hi), 0 0 0 1px var(--line-gold), 0 40px 80px -26px rgba(196,169,104,.4);
}

/* Kicker → floating pill badge with medallion (Buy dark · Sell gold) */
.bs-kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 18px 9px 10px; border-radius:100px;
  background:var(--onyx-950); color:var(--text-on-dark);
  font-size:12px; letter-spacing:.22em;
  box-shadow:0 10px 22px -10px rgba(27,23,18,.55);
}
.bs-kicker::before{
  content:""; width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 35% 30%, #fbf1d4, var(--gold) 55%, var(--brass));
  box-shadow:inset 0 1px 0 rgba(255,253,247,.7);
}
.buysell-grid > .bs-card:last-of-type .bs-kicker{ background:var(--gradient-gold); color:var(--onyx-950); }
.buysell-grid > .bs-card:last-of-type .bs-kicker::before{ background:radial-gradient(circle at 35% 30%, #4a3b20, var(--onyx-950)); }
.bs-heading{ margin:22px 0 30px; }

/* How / Why → distinct inset sub-panels with a floating tab label */
.bs-block{
  position:relative; margin:0; padding:26px 22px 18px;
  border-radius:16px;
  background:var(--inset-panel-bg);
  border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
.bs-block + .bs-block{ margin-top:22px; }
.bs-label{
  position:absolute; top:-14px; left:20px; margin:0;
  background:var(--verdigris);
  color:#fff;
  border-color:var(--verdigris);
  box-shadow:0 4px 14px -4px rgba(47,122,115,.45);
}

/* How — each step is a raised 3D row with a big cursive gold numeral */
.bs-list-how{ display:flex; flex-direction:column; gap:12px; }
.bs-list-how li{
  position:relative; display:flex; align-items:center; gap:16px;
  padding:14px 20px 14px 16px;
  border:1px solid var(--line-brass); border-radius:14px;
  background:var(--inset-row-bg);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 2px 4px rgba(27,23,18,.05), 0 12px 24px -16px rgba(27,23,18,.4);
  font-size:15px; color:var(--ink-2); line-height:1.4;
  transition:transform .32s var(--ease), box-shadow .4s ease, border-color .3s ease;
}
.bs-list-how li:last-child{ border:1px solid var(--line-brass); }
.bs-list-how li:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 6px 14px rgba(27,23,18,.08), 0 30px 50px -22px rgba(196,169,104,.5);
}
.bs-list-how .bs-idx{
  position:static; transform:none; flex-shrink:0;
  display:inline-block;
  width:auto; min-width:28px; text-align:center;
  font-family:var(--mono); font-style:normal; font-weight:700;
  font-size:clamp(24px, 2.4vw, 32px); line-height:1;
  color:#4a3b20;
  background:none; border-radius:0;
  box-shadow:none; text-shadow:none;
  transition:transform .35s var(--ease);
}
.bs-list-how li:hover .bs-idx{ transform:scale(1.04); }

/* Why — gold check chips */
.bs-list-why li{ padding:11px 0 11px 34px; }
.bs-list-why li::before{
  content:""; position:absolute; left:0; top:12px; width:20px; height:20px; border-radius:50%;
  background:rgba(196,169,104,.16); border:1px solid var(--line-brass);
}
.bs-list-why li::after{
  content:""; position:absolute; left:7px; top:15px; width:5px; height:9px;
  border:solid var(--brass-ink); border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg);
}

/* Entrance stagger — panels rise when the card scrolls in */
@media (prefers-reduced-motion: no-preference){
  .bs-card.in .bs-block{ animation:bsRise .7s var(--ease) both; }
  .bs-card.in .bs-block:last-child{ animation-delay:.16s; }
  @keyframes bsRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
}

/* & divider — subtle breathing */
@media (prefers-reduced-motion: no-preference){
  .bs-divider span{ animation:bsPulse 4.5s ease-in-out infinite; }
  @keyframes bsPulse{ 0%,100%{ box-shadow:0 10px 26px -10px rgba(154,127,76,.65), inset 0 1px 0 rgba(255,253,247,.6); } 50%{ box-shadow:0 14px 34px -8px rgba(196,169,104,.8), inset 0 1px 0 rgba(255,253,247,.6); } }
}

/* ===================================================================
   Reduced motion
=================================================================== */
@media (prefers-reduced-motion: reduce){
  .reveal, .rv{ opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; }
  .step.in .step-marker, .step.in h3, .step.in p,
  .bs-card.in .bs-kicker, .bs-card.in .bs-heading, .bs-card.in .bs-list-how li, .bs-card.in .bs-list-why li,
  .why-card.in .why-num, .why-card.in h4, .why-card.in p,
  .service-card.in .service-top, .service-card.in h4, .service-card.in p,
  .partner-logo.in, .deco-head.in .deco-eyebrow, .deco-head.in .deco-headline{ animation:none !important; }
  .hero-ring, .coin-float, .coin-shadow, .coin3d, .coin-ring, .balance-chip, .bs-divider span{ animation:none !important; }
  .coin3d{ transform:rotateX(7deg) rotateY(-18deg) !important; }
  html{ scroll-behavior:auto; }
}

/* ===================================================================
   Responsive
=================================================================== */
@media (max-width:1080px){
  .main-nav{ display:none; }
  .header-actions{ display:flex; align-items:center; }
  .header-actions .btn{ display:none; }
  .burger{ display:flex; }
  .coin-float{ width:clamp(240px, 46vw, 340px); }

  /* Clip decorative hero layers so they never widen the page */
  .hero{ overflow:hidden; }
  .hero-glow-a, .hero-glow-b, .hero-ring, .hero-ring-2{
    min-width:0; max-width:100vw;
  }
  /* Firm viewport lock — block horizontal only, keep vertical scroll */
  html{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  body{
    overflow-x:hidden !important;
    overflow-y:visible !important;
    overscroll-behavior-x:none;
    touch-action:pan-y;
  }
}
@media (max-width: 900px){
  .steps{ grid-template-columns:1fr; gap:20px; }
  .buysell-grid{ grid-template-columns:1fr; gap:22px; }
  .bs-divider{ width:100%; height:56px; }
  .bs-divider::before{ top:50%; bottom:auto; left:6%; right:6%; width:auto; height:1px; background:linear-gradient(90deg, transparent, var(--line-brass) 20%, var(--line-brass) 80%, transparent); }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .services-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .footer-inner{ grid-template-columns:1fr; gap:48px; }
  .page-frame{ display:none; }
}
@media (max-width: 560px){
  .hero-foot{ flex-direction:column; align-items:flex-start; gap:30px; }
  .why-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; }
  .ledger-row{ padding:15px 18px; font-size:13px; }
  .ledger-ref{ font-size:11.5px; }
  .deco-headline{ max-width:none; }
}

/* ===================================================================
   AUDIT FIXES (session 2)
   Hero copy · Powered-by-Ferris nav badge · footer credit ·
   section colour rhythm + tighter vertical spacing.
=================================================================== */

/* Hero tagline (moved down from the H1) */
.hero-title .line-italic{ color:var(--brass-ink); }
.hero-tagline{
  margin-top:26px; max-width:30ch;
  font-family:var(--serif); font-size:clamp(19px, 1.7vw, 24px);
  line-height:1.4; color:var(--ink);
}
.hero-tagline em{ display:block; font-style:italic; color:var(--ink-3); font-size:.82em; margin-top:4px; }

/* "Powered by Ferris" — centred badge attached under the nav pill */
.nav-powered{
  position:relative; align-self:center; margin-top:-1px;
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 14px; border-radius:100px; white-space:nowrap;
  background:var(--nav-surface);
  border:1px solid var(--line-brass);
  box-shadow:var(--card-3d);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.nav-powered .np-label{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.nav-powered img{ height:16px; width:auto; opacity:.9; }

/* Footer "Powered by Ferris Group" credit */
.footer-powered{ color:var(--bone-dim); }
.footer-powered a{ color:var(--gold); }
.footer-powered a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* -------------------------------------------------------------------
   SECTION COLOUR RHYTHM — the divs now alternate on a documented rule:
     lifted (bone-100)  →  recessed (bone-300)  →  lifted  →  …
   with a crisp brass hairline between bands so divisions read clearly.
   Vertical spacing tightened so sections no longer feel adrift.
------------------------------------------------------------------- */
.section{ padding:clamp(64px, 7.5vw, 108px) 0; }
.deco-head{ margin-bottom:clamp(40px,4.5vw,60px); }

/* band A — lifted / lighter */
.how-it-works,
.why,
.glance,
.partners{ background:var(--bone-100); }

/* band B — recessed / slightly darker */
.buysell,
.services,
.transactions{
  background:
    radial-gradient(1100px 620px at 50% 0%, rgba(196,169,104,.10), transparent 62%),
    var(--bone-300);
}

/* crisp seam between every band */
.section{ border-top:1px solid var(--line-brass); }
.how-it-works{ border-top-color:var(--line-soft); }

/* ===================================================================
   AUDIT FIXES (session 2b)
   Hero heading redo · larger connected Ferris badge · light footer.
=================================================================== */

/* ---- Hero heading — bold editorial lockup, prominent brand accent -- */
.hero-title{ gap:2px; }
.hero-title .line{
  font-size:clamp(42px, 6.6vw, 96px); line-height:1.0; letter-spacing:-.02em;
  color:var(--ink); font-weight:700;
}
.hero-title .hero-accent{
  display:inline-block; width:fit-content; max-width:100%;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(48px, 6.4vw, 104px); line-height:1.04; letter-spacing:-.015em;
  margin-top:.04em; padding-right:.12em;   /* room for the italic overhang + dot */
  background:linear-gradient(96deg, var(--champagne) 0%, var(--gold) 38%, var(--brass) 82%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,253,247,.55));
}
.hero-title .hero-accent .gold-dot{ -webkit-text-fill-color:var(--brass-ink); color:var(--brass-ink); }

.hero-tagline{
  margin-top:34px; max-width:40ch; display:flex; flex-direction:column; gap:4px;
}
.hero-tagline .ht-lead{
  font-family:var(--serif); font-weight:700; font-size:clamp(20px, 2vw, 27px);
  line-height:1.25; color:var(--ink); letter-spacing:-.01em;
}
.hero-tagline .ht-sub{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-ink);
}

/* ---- "Powered by Ferris" — tab attached flush to the nav bottom ----- */
.nav-powered{
  z-index:1;
  gap:12px; padding:10px 22px;
  border:1px solid var(--line-brass); border-top:none;
  border-radius:0 0 100px 100px;
  background:var(--nav-surface);
  backdrop-filter:blur(14px) saturate(1.12); -webkit-backdrop-filter:blur(14px) saturate(1.12);
  box-shadow:none;
  transition:opacity .35s ease, max-height .35s var(--ease), padding .35s var(--ease), margin .35s var(--ease), border-color .35s ease;
}
.nav-powered .np-label{ font-size:10px; letter-spacing:.2em; }
.nav-powered img{ height:22px; }

/* ---- Footer — relit to the light editorial theme ------------------- */
.partners{ padding-bottom:clamp(56px,7vw,96px); }
.site-footer{
  background:var(--footer-bg);
  color:var(--ink-2); padding-top:76px; border-top:1px solid var(--line-brass);
}
.site-footer .wordmark{ color:var(--ink); }
.site-footer .wordmark em{ color:var(--brass-ink); }
.site-footer .wordmark-dot{ color:var(--gold); }
.footer-brand p{ color:var(--ink-3); }
.footer-nav-title{ color:var(--brass-ink); }
.footer-nav a{ color:var(--ink-2); }
.footer-nav a:hover{ color:var(--ink); }
.footer-nav a::after{ background:var(--brass); }
.footer-form label{ color:var(--ink-3); }
.footer-form input{
  background:var(--surface-hi); border:1px solid var(--line-brass); color:var(--ink);
}
.footer-form input:focus{ border-color:var(--gold); }
.footer-form input::placeholder{ color:var(--ink-3); opacity:.65; }
.footer-bottom{ border-top:1px solid var(--line); }
.footer-bottom-inner{ color:var(--ink-3); }
.footer-bottom a{ color:var(--brass-ink); }
.footer-powered{ color:var(--ink-3); }
.footer-powered a{ color:var(--brass-ink); }

/* ---- Footer credit: inline Ferris logo (match original) ------------ */
.footer-powered{ display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap; }
.footer-powered img{ height:15px; width:auto; opacity:.85; }
.footer-form label span{ color:var(--brass-ink); }

/* ===================================================================
   AUDIT FIXES (session 2c)
   De-duplicated section index · hero accent hardened ·
   "How it works" rebuilt as a connected process timeline.
=================================================================== */

/* Section index pill now reads as pagination, not a repeat of the title */
.deco-eyebrow{ letter-spacing:.24em; }

/* Hero accent — guaranteed to fit its column, never clipped by the coin */
.hero-title .hero-accent{ font-size:clamp(44px, 6vw, 96px); padding-right:.16em; }

/* ---- How it works — editorial connected stepper ------------------- */
.how-it-works .steps{ position:relative; gap:clamp(18px,2.4vw,40px); }

/* the progression line linking the three numbered nodes (desktop) */
.how-it-works .steps::before{
  content:""; position:absolute; left:8%; right:8%; top:28px; height:1px; z-index:0;
  background:linear-gradient(90deg, transparent, var(--line-brass) 14%, var(--line-brass) 86%, transparent);
}

/* strip the heavy card chrome — clean, text-forward steps */
.how-it-works .step{
  background:none; border:none; box-shadow:none; border-radius:0;
  padding:0 clamp(6px,1.4vw,18px); text-align:center; overflow:visible;
  counter-increment:step;
}
.how-it-works .step::before{ content:none; }              /* drop the faint watermark numeral */
.how-it-works .step:hover{ transform:none; background:none; box-shadow:none; border:none; }

.how-it-works .step-marker{ flex-direction:column; align-items:center; gap:0; margin-bottom:24px; }
.how-it-works .step-line{ display:none; }

/* numbered node sits ON the line, ring-masked in the band colour */
.how-it-works .step-num{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:66px; height:66px; border-radius:50%;
  font-family:var(--mono); font-style:normal; font-size:22px; font-weight:700; color:#4a3b20;
  background:radial-gradient(circle at 34% 28%, #fbf1d4 0%, var(--gold-hi) 22%, var(--gold) 48%, var(--brass) 78%, #5c4a29 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,250,232,.7),
    inset 0 -8px 16px rgba(70,52,24,.5),
    inset 0 8px 14px rgba(255,246,214,.55),
    0 10px 22px -8px rgba(154,127,76,.7),
    0 0 0 8px var(--bone-100);
  text-shadow:0 1px 0 rgba(255,246,214,.6);
}
.how-it-works .step h3{
  font-size:clamp(19px,1.7vw,23px); line-height:1.3; margin:0 auto 12px; max-width:15ch; color:var(--ink);
}
.how-it-works .step p{ font-size:14.5px; color:var(--ink-3); max-width:34ch; margin:0 auto; }

@media (max-width:900px){
  .how-it-works .steps::before{ display:none; }
  .how-it-works .step-num{ box-shadow:0 8px 18px -8px rgba(154,127,76,.6), inset 0 1px 0 rgba(255,253,247,.7); }
}

/* ===================================================================
   AUDIT FIXES (session 2d)
   Buy / Sell — lay How? and Why? side-by-side so the cards are far
   shorter on laptop/desktop (was fully stacked = very tall).
=================================================================== */
@media (min-width:560px){
  .bs-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:clamp(22px, 2.6vw, 40px);
    row-gap:0; align-content:start;
  }
  .bs-card .bs-kicker,
  .bs-card .bs-heading{ grid-column:1 / -1; }
  .bs-card .bs-heading{ margin-bottom:30px; }
  .bs-card .bs-block + .bs-block{ margin-top:0; }
  .bs-card .bs-block{ min-width:0; }
  /* tighter list rhythm now that space is at a premium */
  .bs-list li{ padding:9px 0 9px 30px; font-size:14px; }
}

/* a touch less inner padding on the cards at laptop widths */
@media (min-width:900px){
  .bs-card{ padding:clamp(30px,2.6vw,42px) clamp(28px,2.4vw,40px); }
}

/* ===================================================================
   AUDIT FIXES (session 2e)
   Buy / Sell — the WHOLE block goes landscape: the two cards stack
   vertically, each spanning full width as a short, wide card
   (heading left · How? 2x2 · Why? 2-col right).
=================================================================== */

/* stack Buy above Sell; the "&" divider becomes a horizontal seam */
.buysell-grid{ grid-template-columns:1fr; gap:clamp(22px,2.6vw,38px); align-items:stretch; }
.bs-divider{ width:100%; height:auto; min-height:54px; align-self:auto; }
.bs-divider::before{
  top:50%; bottom:auto; left:6%; right:6%; width:auto; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-brass) 18%, var(--line-brass) 82%, transparent);
}

@media (min-width:820px){
  /* landscape card: 3 zones across */
  .bs-card{
    display:grid;
    grid-template-columns:minmax(230px,.82fr) 1.5fr 1.25fr;
    column-gap:clamp(30px,3.2vw,56px); row-gap:20px;
    align-content:start;
    padding:clamp(34px,3vw,48px) clamp(32px,3vw,52px);
  }
  .bs-card .bs-heading{ grid-column:1; grid-row:1; margin:0; align-self:start; }
  .bs-card .bs-block:nth-child(3){ grid-column:2; grid-row:1 / span 2; margin:0; }  /* How? */
  .bs-card .bs-block:nth-child(4){ grid-column:3; grid-row:1 / span 2; margin:0; }  /* Why? */

  /* How? steps: compact 2 x 2 grid instead of a 4-high stack */
  .bs-list-how{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  .bs-list-how li{ padding:12px 14px; gap:12px; }
  .bs-list-how .bs-idx{ font-size:clamp(22px, 2vw, 28px); }

  /* Why? benefits: two columns */
  .bs-list-why{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px 22px; }
}

/* very wide screens — a hair more room for the heading column */
@media (min-width:1200px){
  .bs-card{ grid-template-columns:minmax(260px,.9fr) 1.5fr 1.2fr; }
}

/* ===================================================================
   AUDIT FIXES (session 2f)
   Buy / Sell landscape — repair: un-stretch the BUY/SELL pills,
   replace the cramped How? boxes with clean numbered rows.
=================================================================== */

/* pills must hug their content, never stretch to the grid column */
.bs-card .bs-kicker{ justify-self:start; align-self:start; width:max-content; max-width:100%; }
.bs-card .bs-block{ justify-self:stretch; }
.bs-card .bs-label{ width:max-content; }

@media (min-width:820px){
  /* heading column a touch wider; roomy How? column so text doesn't cram */
  .bs-card{ grid-template-columns:minmax(240px,.9fr) 1.35fr 1.1fr; column-gap:clamp(34px,3.4vw,60px); }

  /* How? — quiet numbered rows (drop the bulky 3D boxes) */
  .bs-list-how{ display:flex; flex-direction:column; gap:2px; }
  .bs-list-how li{
    border:none !important; background:none !important; box-shadow:none !important;
    border-radius:0; padding:10px 0 10px 40px; gap:0; align-items:baseline;
    border-bottom:1px solid var(--line-soft) !important;
  }
  .bs-list-how li:last-child{ border-bottom:none !important; }
  .bs-list-how li:hover{ transform:none; }
  .bs-list-how .bs-idx{
    position:absolute; left:0; top:7px;
    font-size:clamp(20px, 1.8vw, 26px);
    transform:none;
  }
  .bs-list-how li:hover .bs-idx{ transform:none; }

  /* Why? — keep the check chips, two tidy columns */
  .bs-list-why{ grid-template-columns:repeat(2,1fr); gap:2px 26px; }
}

/* ===================================================================
   AUDIT FIXES (session 2g)
   Buy / Sell "Why?" — single tidy column of check rows (the 2-col
   layout was cramming and wrapping phrases mid-line on both cards).
=================================================================== */
@media (min-width:820px){
  .bs-list-why{ display:flex !important; flex-direction:column; gap:2px; }
  .bs-list-why li{
    padding:9px 0 9px 32px; font-size:14px; line-height:1.4;
    border-bottom:1px solid var(--line-soft);
  }
  .bs-list-why li:last-child{ border-bottom:none; }
  .bs-list-why li::before{ top:10px; }
  .bs-list-why li::after{ top:13px; }

  /* balance the two panels: give How? and Why? equal, comfortable width */
  .bs-card{ grid-template-columns:minmax(230px,.8fr) 1.25fr 1.25fr; }
  .bs-list-how li{ padding-top:9px; padding-bottom:9px; }
}

/* ===================================================================
   AUDIT FIXES (session 2h)
   Buy / Sell "How?" — restore the white 3D step rows with the glowing
   metal numerals (kept as a single column so they fit the landscape).
=================================================================== */
@media (min-width:820px){
  .bs-list-how{ display:flex; flex-direction:column; gap:12px; }
  .bs-list-how li{
    display:flex; align-items:center; gap:14px;
    padding:12px 16px !important;
    border:1px solid var(--line-brass) !important;
    border-radius:14px;
    background:var(--inset-row-bg) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 2px 4px rgba(27,23,18,.05),
               0 12px 24px -16px rgba(27,23,18,.4) !important;
    font-size:14.5px; line-height:1.35; color:var(--ink-2);
  }
  .bs-list-how li:hover{
    transform:translateY(-4px); border-color:var(--gold) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 6px 14px rgba(27,23,18,.08),
               0 30px 50px -22px rgba(196,169,104,.5) !important;
  }
  .bs-list-how .bs-idx{
    position:static !important; left:auto; top:auto; transform:none;
    flex-shrink:0;
    display:inline-block;
    width:auto; min-width:28px; text-align:center;
    font-family:var(--mono); font-style:normal; font-weight:700;
    font-size:clamp(24px, 2.4vw, 32px); line-height:1;
    color:#4a3b20;
    background:none; border-radius:0;
    box-shadow:none; text-shadow:none;
    transition:transform .35s var(--ease);
  }
  .bs-list-how li:hover .bs-idx{ transform:scale(1.04); }
}

/* ===================================================================
   AUDIT FIXES (session 2i)
   "Why WithCrypto" — super-dimensional bento tiles.
   Bone/onyx checkerboard for contrast · raised gold-leaf medallion
   numerals · sheen + inset highlight + deep shadow · hover tilt.
   Palette strictly onyx · gold · bone (per CI).
=================================================================== */
.why-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2vw,30px);
  perspective:1600px;
  background:none; border:none; border-radius:0; overflow:visible;
}
.why-card{
  position:relative; isolation:isolate;
  padding:clamp(38px,3.4vw,52px) clamp(32px,3vw,44px);
  border-radius:24px; overflow:hidden;
  transform-style:preserve-3d;
  background:linear-gradient(165deg, var(--surface-hi), var(--surface) 72%);
  border:1px solid var(--line-brass);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 4px rgba(27,23,18,.05),
    0 20px 34px -18px rgba(27,23,18,.32),
    0 60px 80px -40px rgba(27,23,18,.42);
  transition:transform .55s var(--ease), box-shadow .55s ease, border-color .4s ease;
}
/* glass sheen across the crown */
.why-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 40%);
  opacity:.7;
}
/* gold bloom that ignites on hover */
.why-card::after{
  content:""; position:absolute; inset:auto -20% -40% -20%; height:70%; z-index:0; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%, rgba(196,169,104,.5), transparent 70%);
  opacity:0; transition:opacity .5s ease;
}
.why-card > *{ position:relative; z-index:1; }
.why-card:hover{
  transform:translateY(-10px) rotateX(5deg) rotateY(-4deg);
  border-color:var(--gold);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 6px 14px rgba(27,23,18,.1),
    0 40px 60px -24px rgba(27,23,18,.4),
    0 90px 120px -50px rgba(196,169,104,.5);
}
.why-card:hover::after{ opacity:1; }

/* ---- checkerboard contrast: tiles II & III go deep onyx ---- */
.why-card:nth-child(2), .why-card:nth-child(3){
  background:var(--panel-bg);
  border-color:var(--line-gold);
  box-shadow:
    0 1px 0 rgba(255,253,247,.12) inset,
    0 2px 4px rgba(0,0,0,.4),
    0 24px 40px -18px rgba(0,0,0,.5),
    0 70px 90px -44px rgba(0,0,0,.6);
}
.why-card:nth-child(2)::before, .why-card:nth-child(3)::before{
  background:linear-gradient(180deg, rgba(255,253,247,.1), rgba(255,253,247,0) 42%);
  opacity:1;
}
.why-card:nth-child(2) h4, .why-card:nth-child(3) h4{ color:var(--panel-text); }
.why-card:nth-child(2) p,  .why-card:nth-child(3) p { color:var(--panel-text-muted); }
.why-card:nth-child(2):hover, .why-card:nth-child(3):hover{ border-color:var(--gold); }

/* ---- raised gold-leaf medallion numeral (matches the hero coin) ---- */
.why-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:66px; height:66px; border-radius:50%; margin-bottom:26px;
  font-family:var(--mono); font-style:normal; font-weight:700; font-size:24px;
  color:#4a3b20;
  background:radial-gradient(circle at 34% 28%, #fbf1d4 0%, var(--gold-hi) 22%, var(--gold) 48%, var(--brass) 78%, #5c4a29 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,250,232,.7),
    inset 0 -8px 16px rgba(70,52,24,.5),
    inset 0 8px 14px rgba(255,246,214,.55),
    0 10px 22px -8px rgba(154,127,76,.7);
  text-shadow:0 1px 0 rgba(255,246,214,.6);
  transition:transform .5s var(--ease);
}
.why-card:hover .why-num{ transform:scale(1.06) rotate(-4deg); }
.why-card h4{ font-size:clamp(20px,1.8vw,24px); margin:0 0 14px; }

@media (prefers-reduced-motion: reduce){
  .why-card:hover{ transform:translateY(-4px); }
  .why-card:hover .why-num{ transform:none; }
}
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr; } }

/* ===================================================================
   AUDIT FIXES (session 2j)
   "Why WithCrypto" — deeper 3D: cursor-tracked tilt, content layers
   that float above the card face (translateZ), extruded slab edge.
=================================================================== */
.why-grid{ perspective:1200px; }
.why-card{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) scale(var(--sc,1));
  transition:transform .3s var(--ease), box-shadow .5s ease, border-color .4s ease;
  will-change:transform;
}
/* content floats at different depths for genuine parallax */
.why-num{ transform:translateZ(60px); }
.why-card h4{ transform:translateZ(38px); }
.why-card p{ transform:translateZ(20px); }
.why-card:hover .why-num{ transform:translateZ(60px) scale(1.06) rotate(-4deg); }

/* cursor-driven glow hotspot */
.why-card::after{
  inset:0; height:auto;
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,15%), rgba(196,169,104,.42), transparent 70%);
}
.why-card:nth-child(2)::after, .why-card:nth-child(3)::after{
  background:radial-gradient(260px 260px at var(--mx,50%) var(--my,15%), rgba(220,199,154,.34), transparent 70%);
}

/* hover: lift + deepen the slab shadow (tilt comes from JS vars) */
.why-card{ --ty:0px; --sc:1; }
.why-card:hover{ --ty:-8px; --sc:1.015; }
.why-card:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 8px 16px rgba(27,23,18,.12),
    0 44px 66px -26px rgba(27,23,18,.44),
    0 110px 150px -60px rgba(196,169,104,.55);
}
.why-card:nth-child(2):hover, .why-card:nth-child(3):hover{
  box-shadow:
    0 1px 0 rgba(255,253,247,.14) inset,
    0 10px 20px rgba(0,0,0,.45),
    0 48px 70px -26px rgba(0,0,0,.55),
    0 120px 150px -60px rgba(196,169,104,.4);
}

@media (prefers-reduced-motion: reduce){
  .why-card{ transform:translateY(var(--ty,0)); }
  .why-num, .why-card h4, .why-card p{ transform:none; }
  .why-card:hover .why-num{ transform:none; }
}

/* ===================================================================
   AUDIT FIXES (session 2k)
   "Additional Services" — same 3D tilt system, unique treatment:
   floating onyx+gold icon medallion · big ghosted index watermark ·
   cursor-tracked tilt + parallax depth. Palette: onyx · gold · bone.
=================================================================== */
.services-grid{ perspective:1200px; gap:clamp(18px,2vw,30px); }
.service-card{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:24px; padding:clamp(40px,3.2vw,52px) clamp(30px,2.6vw,40px);
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) scale(var(--sc,1));
  background:var(--card-bg);
  border:1px solid var(--line-brass);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 4px rgba(27,23,18,.05),
    0 20px 34px -18px rgba(27,23,18,.32),
    0 60px 80px -40px rgba(27,23,18,.42);
  transition:transform .3s var(--ease), box-shadow .5s ease, border-color .4s ease;
  --ty:0px; --sc:1; will-change:transform;
}
.service-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 40%); opacity:.7;
}
.service-card::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,12%), rgba(196,169,104,.4), transparent 70%);
  opacity:0; transition:opacity .5s ease;
}
.service-card:hover{
  --ty:-8px; --sc:1.015; border-color:var(--gold);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 8px 16px rgba(27,23,18,.12),
    0 44px 66px -26px rgba(27,23,18,.44),
    0 110px 150px -60px rgba(196,169,104,.55);
}
.service-card:hover::after{ opacity:1; }
.service-card > *{ position:relative; z-index:1; }

/* top row holds only the floating medallion now */
.service-top{ display:block; margin-bottom:26px; }

/* floating onyx + gold icon medallion (the unique signature here) */
.service-icon{
  box-sizing:content-box; width:26px; height:26px; padding:16px; border-radius:18px;
  background:linear-gradient(160deg, #2b251d, var(--onyx));
  border:1px solid var(--line-gold); color:var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255,253,247,.16),
    0 10px 22px -8px rgba(0,0,0,.5),
    0 0 0 5px rgba(196,169,104,.08);
  transform:translateZ(58px);
}
.service-card:hover .service-icon{ transform:translateZ(58px) scale(1.05) rotate(-3deg); transition:transform .5s var(--ease); }

/* big ghosted serif index numeral, parallaxing behind the copy */
.service-idx{
  position:absolute; top:16px; right:20px; z-index:0;
  font-family:var(--serif); font-style:italic; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(70px, 7vw, 112px); line-height:.8;
  color:transparent; -webkit-text-stroke:1px rgba(154,127,76,.5);
  opacity:.55; transform:translateZ(14px);
}
.service-card:hover .service-idx{
  color:transparent; -webkit-text-stroke-color:var(--gold); opacity:.8;
}
.service-card h4{ transform:translateZ(34px); font-size:clamp(20px,1.8vw,24px); }
.service-card p{ transform:translateZ(18px); }

@media (prefers-reduced-motion: reduce){
  .service-card{ transform:translateY(var(--ty,0)); }
  .service-icon, .service-idx, .service-card h4, .service-card p{ transform:none; }
  .service-card:hover .service-icon{ transform:none; }
}
@media (max-width:900px){ .services-grid{ grid-template-columns:1fr; } }

/* ===================================================================
   AUDIT FIXES (session 2l)
   "Additional Services" — match the WithCrypto (Why) medallion style:
   bright GOLD-LEAF medallion holding the icon in dark onyx (crisp),
   plus a clean legible /01 index tag (the unique twist).
=================================================================== */

/* medallion == same gold-leaf material as .why-num, sized for the icon */
.service-icon{
  box-sizing:content-box; width:30px; height:30px; padding:17px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #fbf1d4 0%, var(--gold-hi) 22%, var(--gold) 48%, var(--brass) 78%, #5c4a29 100%);
  color:#4a3b20;                         /* dark icon on gold = clearly visible */
  border:none;
  box-shadow:
    inset 0 0 0 2px rgba(255,250,232,.7),
    inset 0 -8px 16px rgba(70,52,24,.5),
    inset 0 8px 14px rgba(255,246,214,.55),
    0 12px 24px -8px rgba(154,127,76,.7);
  transform:translateZ(58px);
}
.service-icon path, .service-icon circle, .service-icon rect{ stroke-width:1.6; }
.service-card:hover .service-icon{ transform:translateZ(58px) scale(1.06) rotate(-4deg); }

/* index becomes a small, crisp, readable tag (no more faint watermark) */
.service-idx{
  position:absolute; top:24px; right:26px; z-index:1;
  font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:.16em;
  color:var(--brass-ink); opacity:.85;
  -webkit-text-stroke:0; text-stroke:0;
  transform:translateZ(24px);
}
.service-card:hover .service-idx{ opacity:1; color:var(--brass-ink); -webkit-text-stroke:0; }

/* ===================================================================
   AUDIT FIXES (session 2m)
   "Additional Services" — big prominent gold numeral (not in a round
   div) + squircle icon medallion (unique twist vs Why's round ones).
=================================================================== */

/* icon medallion: same gold-leaf material, but a rounded SQUARE */
.service-icon{ border-radius:20px; }

/* index: large, gold-leaf filled, clearly legible — free-standing */
.service-idx{
  position:absolute; top:20px; right:26px; z-index:1;
  font-family:var(--serif); font-style:italic; font-weight:700;
  font-size:clamp(44px, 4.8vw, 66px); line-height:.9; letter-spacing:-.02em;
  background:linear-gradient(150deg, var(--gold-hi), var(--gold) 52%, var(--brass));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  -webkit-text-stroke:0;
  opacity:1;
  filter:drop-shadow(0 1px 0 rgba(255,253,247,.55));
  transform:translateZ(30px);
}
.service-card:hover .service-idx{ opacity:1; -webkit-text-fill-color:transparent; }

/* ===================================================================
   AUDIT FIXES (session 2n)
   Services — keep the /0x numeral fully inside the card (was clipping
   the last digit) · make icon carvings bold black, not faint.
=================================================================== */
/* pull the numeral in from the edge and flatten its z-pop so the card's
   overflow:hidden no longer crops the trailing digit */
.service-idx{
  top:22px; right:36px;
  font-size:clamp(40px, 4.2vw, 56px);
  padding-right:.06em;
  transform:translateZ(14px);
}

/* bold black icon strokes on the gold medallion (clear, high-contrast) */
.service-icon{ color:var(--onyx-950); }
.service-icon path,
.service-icon circle,
.service-icon rect{ stroke-width:2.4; }

/* ===================================================================
   AUDIT FIXES (session 2o)
   Services numeral — remove the 3D z-pop that visually enlarged the
   glyph past the card edge (overflow:hidden was cropping the digit).
   Keep it flat on the card face; it still tilts with the card.
=================================================================== */
.service-idx{
  transform:none !important;
  top:26px; right:34px;
  font-size:clamp(38px, 4vw, 52px);
}

/* ===================================================================
   AUDIT FIXES (session 2p) — Services header, complete redo
   Medallion + big gold numeral share a flex row INSIDE the card
   padding (nothing sits at the clipping edge), split by a gold rule.
=================================================================== */
.service-top{
  display:flex !important; align-items:center; justify-content:space-between; gap:18px;
  margin-bottom:26px; padding-bottom:22px;
  border-bottom:1px solid var(--line-brass);
}
.service-top > *{ position:relative; z-index:1; }

/* numeral: in-flow (never absolute, never popped) so it can't be cropped */
.service-idx{
  position:static !important; top:auto !important; right:auto !important;
  transform:none !important; z-index:1;
  font-family:var(--serif) !important; font-style:italic; font-weight:700;
  font-size:clamp(42px, 4.2vw, 58px); line-height:1; letter-spacing:-.02em;
  background:linear-gradient(150deg, var(--gold-hi), var(--gold) 52%, var(--brass));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  -webkit-text-stroke:0;
  filter:drop-shadow(0 1px 0 rgba(255,253,247,.55));
  opacity:1; flex-shrink:0;
}
.service-card:hover .service-idx{ -webkit-text-fill-color:transparent; }

/* medallion stays a squircle gold-leaf plate with bold black icon */
.service-icon{ transform:translateZ(40px); }
.service-card:hover .service-icon{ transform:translateZ(40px) scale(1.05) rotate(-3deg); }

/* ===================================================================
   Additional Services — title beside icon (where /01–/03 were),
   left-aligned and vertically centred with the medallion.
=================================================================== */
.services .service-idx{ display:none !important; }
.services .service-top{
  display:flex !important;
  align-items:center;
  gap:clamp(14px, 2vw, 22px);
  margin-bottom:18px;
  padding-bottom:0;
  border-bottom:none;
}
.services .service-icon{
  flex-shrink:0;
  display:block;
  transform:none !important;
}
.services .service-top h4{
  margin:0;
  flex:1;
  min-width:0;
  text-align:left;
  font-size:clamp(18px, 1.55vw, 22px);
  line-height:1.3;
  font-weight:700;
  transform:none !important;
}
.services .service-card > p{
  margin:0;
  text-align:left;
  line-height:1.6;
  transform:none !important;
}
.services .service-card:hover .service-icon{
  transform:scale(1.05) rotate(-3deg) !important;
}
.services .service-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.services .service-card > p{ flex:1; }
.services .services-grid{ align-items:stretch; }

/* ===================================================================
   AUDIT FIXES (session 2q)
   Remove hero balance chip (no longer in markup) · fix hero accent
   descender clipping — tight line-height + hero's overflow:hidden
   was cropping the "y"/"p" tails in "with crypto."
=================================================================== */
.hero-title .hero-accent{ line-height:1.22; padding-bottom:.06em; }
.hero-title{ padding-bottom:4px; }

/* ===================================================================
   AUDIT FIXES (session 2r)
   Mobile — center all section headings + hero copy · make the hero
   headline ("The Real World, With Crypto.") bigger on mobile.
=================================================================== */
@media (max-width:640px){
  /* hero: center the whole copy column, size up the headline */
  .hero-inner{ justify-items:center; text-align:center; align-items:center; }
  .hero-copy{ display:contents; }
  .hero-inner .eyebrow,
  .hero-inner .hero-title,
  .hero-inner .hero-tagline,
  .hero-inner .hero-foot{ text-align:center; }
  .eyebrow{ justify-content:center; }
  .hero-title .line{ font-size:clamp(50px, 12vw, 64px); }
  .hero-title .hero-accent{ font-size:clamp(54px, 13vw, 70px); }
  .hero-tagline{ align-items:center; text-align:center; }
  .hero-foot{ align-items:center; text-align:center; }
  .hero-lede{ text-align:center; }

  /* section headings: center eyebrow, headline, and the rule beneath it */
  .deco-head{ text-align:center; display:flex; flex-direction:column; align-items:center; }
  .deco-eyebrow{ justify-content:center; }
  .deco-headline{ max-width:none; }
  .deco-rule{ justify-content:center; }
  .deco-rule::before{ flex:0 0 auto; width:64px !important; }
  .deco-rule i{ order:0; }
}

/* ===================================================================
   AUDIT FIXES (session 2s)
   Mobile hero heading — text-align wasn't reaching the line spans
   (flex column only centered the block, not the inline text runs).
=================================================================== */
@media (max-width:640px){
  .hero-title{ text-align:center; align-items:center; }
  .hero-title .line{ text-align:center; width:100%; }
  .hero-title .hero-accent{ text-align:center; margin-left:auto; margin-right:auto; }
}

/* ===================================================================
   AUDIT FIXES (session 2u)
   Partners — full-bleed onyx/brass section (not just an inner strip),
   heading matched to standard section-heading size, bigger logos
   sitting directly side by side.
=================================================================== */
.partners{
  border-top:none; padding:clamp(72px,8vw,110px) 0;
  background:var(--partners-bg);
}
.partners-heading{
  text-align:center; max-width:none; margin:0 0 clamp(48px,6vw,72px);
  color:var(--partners-text);
}
.partners-heading em{ color:var(--gold); font-style:italic; }

.partners-track{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(36px,5vw,72px);
}
.partner-logo{ display:flex; align-items:center; flex-shrink:0; }
.partner-logo img{
  height:clamp(40px, 5vw, 64px); width:auto; max-width:260px; object-fit:contain;
  opacity:.9; transition:opacity .35s ease, transform .3s ease;
}
.partner-logo:hover img{ opacity:1; transform:scale(1.06); }

/* Partners — infinite logo carousel (all breakpoints) */
.partners-track.is-marquee{
  display:block;
  overflow:hidden;
  width:100%;
  max-width:none;
  margin-inline:calc(-1 * var(--gutter));
  padding-inline:0;
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.partners-track.is-marquee .partners-marquee-inner{
  display:flex; flex-wrap:nowrap; align-items:center;
  width:max-content; gap:clamp(32px,5vw,72px);
  will-change:transform;
}
.partners-track.is-marquee .partner-logo{
  flex-shrink:0;
  opacity:1 !important; transform:none !important;
  animation:none !important;
}
.partners-track.is-marquee .partner-logo.marquee-clone{ display:flex; }
@media (max-width:768px){
  .partners-track.is-marquee .partner-logo img{
    height:clamp(38px,8.5vw,54px);
    max-width:min(168px,44vw);
  }
}
@media (prefers-reduced-motion:reduce){
  .partners-track.is-marquee .partners-marquee-inner{
    flex-wrap:wrap; justify-content:center; width:100%; transform:none !important;
  }
  .partners-track.is-marquee .partner-logo.marquee-clone{ display:none; }
}

@media (max-width:900px){
  .partners{ padding:clamp(56px,7vw,88px) 0; }
}

/* ===================================================================
   AUDIT FIXES (session 2v)
   Why WithCrypto — all four tiles now use the onyx/brass treatment
   (previously only tiles II & III did, as a checkerboard).
=================================================================== */
.why-card{
  background:var(--panel-bg);
  border-color:var(--line-gold);
  box-shadow:
    0 1px 0 rgba(255,253,247,.12) inset,
    0 2px 4px rgba(0,0,0,.4),
    0 24px 40px -18px rgba(0,0,0,.5),
    0 70px 90px -44px rgba(0,0,0,.6);
}
.why-card::before{
  background:linear-gradient(180deg, rgba(255,253,247,.1), rgba(255,253,247,0) 42%);
  opacity:1;
}
.why-card h4{ color:var(--panel-text); }
.why-card p { color:var(--panel-text-muted); }
.why-card:hover{ border-color:var(--gold); }
.why-card::after{
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,15%), rgba(220,199,154,.34), transparent 70%);
}
.why-card:hover{
  box-shadow:
    0 1px 0 rgba(255,253,247,.14) inset,
    0 10px 20px rgba(0,0,0,.45),
    0 48px 70px -26px rgba(0,0,0,.55),
    0 120px 150px -60px rgba(196,169,104,.4);
}

/* ===================================================================
   AUDIT FIXES (session 2x)
   How it works — section background stays the original light Bone;
   the STEP CARDS become modern frosted-glass tiles: translucent,
   backdrop-blurred, gold-rimmed, real 3D depth. Bigger text + numeral.
=================================================================== */
.how-it-works .step{
  background:var(--elevated-bg) !important;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--elevated-border) !important;
  border-radius:26px !important;
  padding:clamp(44px,3.8vw,60px) clamp(30px,2.8vw,44px) clamp(38px,3.4vw,48px) !important;
  text-align:center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(154,127,76,.18) inset,
    0 2px 4px rgba(27,23,18,.06),
    0 26px 44px -20px rgba(27,23,18,.28),
    0 64px 90px -42px rgba(154,127,76,.35) !important;
  transition:transform .45s var(--ease), box-shadow .5s ease, border-color .4s ease !important;
}
.how-it-works .step:hover{
  transform:translateY(-12px) scale(1.015) !important;
  border-color:rgba(196,169,104,.7) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(154,127,76,.24) inset,
    0 10px 20px rgba(27,23,18,.1),
    0 50px 70px -26px rgba(27,23,18,.32),
    0 110px 140px -50px rgba(196,169,104,.5) !important;
}

.how-it-works .step-marker{ margin-bottom:30px; }
.how-it-works .step-num{
  width:80px; height:80px; font-size:24px;
  box-shadow:
    inset 0 0 0 2px rgba(255,250,232,.8),
    inset 0 -8px 16px rgba(70,52,24,.5),
    inset 0 8px 14px rgba(255,246,214,.6),
    0 16px 32px -8px rgba(154,127,76,.65),
    0 0 0 10px rgba(255,255,255,.35) !important;
}
.how-it-works .step h3{
  font-size:clamp(24px,2.3vw,29px); line-height:1.28; color:var(--ink); max-width:18ch;
}
.how-it-works .step p{ color:var(--ink-2); font-size:16.5px; line-height:1.55; max-width:36ch; }

@media (max-width:640px){
  .how-it-works .steps{ gap:28px; }
  .how-it-works .step{ padding:46px 30px 42px !important; }
  .how-it-works .step-num{ width:76px; height:76px; font-size:22px; }
  .how-it-works .step h3{ font-size:24px; line-height:1.3; max-width:none; }
  .how-it-works .step p{ font-size:16.5px; max-width:none; }
}

/* ===================================================================
   NEW PAGES — News / Contact / Regulatory & Compliance
   Reuse the same design tokens, deco-head heading system, glass-card
   and onyx-card language established across the homepage.
=================================================================== */

/* ---- shared: sub-page hero (no coin, just intro copy) ------------- */
.page-hero{ padding-top:calc(92px + clamp(64px,7.5vw,108px)); }
.page-hero-body{ max-width:62ch; }
.page-hero-body p{ font-size:17px; line-height:1.7; color:var(--ink-2); margin:0 0 18px; }
.page-hero-tagline{ font-family:var(--serif); font-style:italic; font-size:20px; color:var(--brass-ink); margin:-14px 0 28px; }

/* ---- News grid — glass cards, same language as How-it-works ------ */
.news-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.2vw,32px);
}
.news-card{
  display:flex; flex-direction:column; overflow:hidden; border-radius:22px;
  background:var(--elevated-bg);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--elevated-border);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 4px rgba(27,23,18,.06),
    0 20px 34px -18px rgba(27,23,18,.26),
    0 50px 70px -36px rgba(154,127,76,.3);
  transition:transform .4s var(--ease), box-shadow .5s ease, border-color .4s ease;
  text-decoration:none;
}
.news-card:hover{
  transform:translateY(-8px);
  border-color:rgba(196,169,104,.7);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 8px 16px rgba(27,23,18,.1),
    0 40px 60px -24px rgba(27,23,18,.3),
    0 90px 110px -46px rgba(196,169,104,.45);
}
.news-card-media{ aspect-ratio:16/10; overflow:hidden; background:var(--bone-300); }
.news-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.news-card:hover .news-card-media img{ transform:scale(1.06); }
.news-card-body{ padding:22px 24px 26px; }
.news-card-meta{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-ink); margin-bottom:10px; }
.news-card h3{ font-size:18px; line-height:1.4; color:var(--ink); font-weight:700; margin:0; }

@media (max-width:900px){ .news-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .news-grid{ grid-template-columns:1fr; } }

/* ---- Contact page -------------------------------------------------- */
.contact-body{ border-top:1px solid var(--line-soft); }
.contact-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px,5vw,80px); align-items:start; }
.contact-tagline{ font-family:var(--serif); font-style:italic; font-size:19px; color:var(--brass-ink); margin:-8px 0 32px; }
.contact-details{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.contact-details li{ display:flex; flex-direction:column; gap:4px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); }
.contact-details-label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.contact-details a{ color:var(--ink); font-size:17px; font-weight:600; text-decoration:none; }
.contact-details a:hover{ color:var(--brass-ink); }
.contact-details span:not(.contact-details-label){ font-size:16px; color:var(--ink-2); }

.contact-form{
  background:var(--elevated-bg);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--elevated-border);
  border-radius:24px; padding:clamp(32px,3.4vw,44px);
  display:flex; flex-direction:column; gap:22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 4px rgba(27,23,18,.06),
    0 26px 44px -20px rgba(27,23,18,.24),
    0 60px 84px -40px rgba(154,127,76,.3);
}
.contact-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-form-field{ display:flex; flex-direction:column; gap:8px; }
.contact-form-field label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.contact-form-field label span{ color:var(--brass-ink); }
.contact-form-field input, .contact-form-field textarea{
  font-family:var(--sans); font-size:15px; color:var(--ink);
  background:rgba(255,255,255,.7); border:1px solid var(--line-brass); border-radius:10px;
  padding:13px 16px; resize:vertical; transition:border-color .3s ease, background .3s ease;
}
.contact-form-field input:focus, .contact-form-field textarea:focus{
  outline:none; border-color:var(--gold); background:#fff;
}
.contact-form .btn{ align-self:flex-start; }

@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-form-row{ grid-template-columns:1fr; }
}

/* ---- About page — full-bleed landscape bands, light + dark ------- */
.about-page{ background:var(--background); }
.about-main{
  padding-top:0;
  padding-bottom:clamp(24px,3vw,40px);
}
.about-canvas{
  width:100%;
  max-width:none;
  margin:0;
  padding:0 clamp(16px,3vw,56px);
  box-sizing:border-box;
}
.about-page .page-hero.about-hero{
  padding-bottom:clamp(12px,1.6vw,20px);
}
.about-deco-head{
  margin:0 auto clamp(20px,2.4vw,32px);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.about-deco-head .deco-headline{ max-width:none; margin:0; }
.about-section-label{
  margin:0 0 14px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brass-ink);
}
.about-landscape{ padding-bottom:clamp(12px,1.6vw,18px); }
.about-landscape-trio{
  position:relative;
  z-index:1;
  padding-bottom:clamp(28px,3.5vw,48px);
}
.about-page-head-section{
  position:relative;
  z-index:2;
  background:var(--background);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(32px,4vw,48px) 0;
}
.dark .about-page .about-page-head-section{ background:var(--onyx-950); }
.about-page-head-section .about-canvas{
  width:100%;
  display:flex;
  justify-content:center;
}
.about-founder-head,
.about-page-head-section .about-deco-head{
  margin:0;
  width:100%;
  position:relative;
  z-index:1;
}
.about-band{
  display:grid;
  gap:clamp(20px,2.6vw,36px);
  align-items:stretch;
  padding:clamp(22px,2.6vw,36px) clamp(22px,3vw,48px);
  border-radius:16px;
  background:var(--card-bg);
  border:1px solid var(--line-brass);
  box-shadow:var(--card-3d);
}

/* About — light mode onyx cards (Enhance your life / why-card treatment) */
.about-page .about-band{
  position:relative;
  isolation:isolate;
  overflow:visible;
  background:var(--panel-bg);
  border-color:var(--line-gold);
  color:var(--panel-text);
  box-shadow:none;
}
.about-page .about-band::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,253,247,.1), rgba(255,253,247,0) 42%);
  opacity:1;
}
.about-page .about-band > *{
  position:relative;
  z-index:1;
}
.about-page .about-band-copy p,
.about-page .about-band p,
.about-page .about-band-lead,
.about-page .about-band-list li,
.about-page .about-mission-line{
  color:var(--panel-text) !important;
}
.about-page .about-mission-line{
  font-weight:600;
}
.about-page .about-band-media{
  border-color:var(--line-gold);
  background:var(--onyx-900);
}
.about-page .about-landscape,
.about-page .about-landscape-trio{
  overflow:visible;
}
.about-landscape-split .about-band{
  grid-template-columns:minmax(0,42%) minmax(0,58%);
  min-height:clamp(300px,46vh,520px);
}
.about-band-media{
  margin:0; overflow:hidden; border-radius:12px;
  min-height:100%; height:100%;
  border:1px solid var(--line-brass);
  background:var(--bone-300);
}
.about-band-media img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center top;
}
.about-band-copy{
  display:flex; flex-direction:column; justify-content:center;
}
.about-band-copy p,
.about-band p{
  margin:0 0 14px;
  font-size:clamp(14.5px,1.25vw,16.5px);
  line-height:1.68;
  color:var(--ink-2);
}
.about-band-copy p:last-child,
.about-band p:last-child{ margin-bottom:0; }
.about-band-center{ text-align:center; }
.about-band-center p{ max-width:980px; margin-left:auto; margin-right:auto; }
.about-band-lead{
  margin:0 0 14px !important;
  font-size:clamp(14.5px,1.25vw,16.5px);
  line-height:1.68;
  color:var(--ink-2);
}
.about-band-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px 24px;
  grid-template-columns:1fr;
}
.about-band-list li{
  position:relative;
  padding:0 0 0 var(--diamond-gutter);
  font-size:clamp(14px,1.2vw,16px);
  line-height:1.58;
  color:var(--ink-3);
}
.about-mission-line{
  margin-top:16px !important;
  font-weight:600;
  color:var(--ink) !important;
}
.about-logos-band{ padding:clamp(20px,2.4vw,32px) 0 clamp(12px,1.6vw,18px); }
.about-canvas-logos{ padding-inline:clamp(24px,5vw,80px); }
.about-logos-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(24px,4vw,56px);
  width:100%;
}
.about-logo-wc{ width:min(100%, 280px); height:auto; object-fit:contain; }
.about-logo-wc-dark{ display:none; }
.dark .about-logo-wc-light{ display:none; }
.dark .about-logo-wc-dark{ display:block; }
.about-logo-caep{ width:min(100%, 320px); height:auto; object-fit:contain; margin-left:auto; }
.about-trio-grid{
  display:grid; gap:clamp(12px,1.6vw,18px);
  grid-template-columns:1fr;
}
.about-trio-col{
  display:flex; flex-direction:column;
  gap:clamp(10px,1.2vw,16px);
  min-height:0;
}
.about-trio-col .about-band{ flex:0 1 auto; }
.about-trio-title{
  margin:0;
  max-width:none;
  text-align:center;
  font-weight:700;
  font-size:clamp(24px,2.6vw,36px);
  line-height:1.1;
}
.about-page .about-trio-title em,
.about-page .about-band .about-trio-title em{
  font-style:italic;
  color:var(--bone) !important;
}
html.dark .about-page .about-trio-title em,
html.dark .about-page .about-band .about-trio-title em{
  color:var(--onyx-950) !important;
}
/* heading now lives inside the card → give it breathing room below */
.about-band .about-trio-title{ margin:0 0 clamp(14px,1.4vw,20px); }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* laptop — full-width landscape */
@media (min-width:1024px){
  .about-landscape-split .about-band{
    grid-template-columns:minmax(320px,38vw) minmax(0,1fr);
    min-height:clamp(340px,52vh,560px);
    padding:clamp(28px,3vw,40px) clamp(36px,4.5vw,72px);
  }
  .about-band-copy{
    column-count:2; column-gap:clamp(28px,3vw,44px);
  }
  .about-band-copy p{ break-inside:avoid; }
  .about-trio-grid{
    grid-template-columns:repeat(3,1fr);
    align-items:stretch;
    min-height:0;
  }
  .about-trio-col{ height:100%; }
  .about-trio-col .about-band{ flex:1 1 auto; height:100%; }
  .about-band-compact{
    min-height:0;
    height:100%;
    padding:clamp(24px,2.4vw,32px) clamp(20px,2vw,28px);
    display:flex; flex-direction:column; justify-content:flex-start;
  }
  .about-band-list{ grid-template-columns:1fr; }
  .about-logos-row{ justify-content:space-between; }
}

@media (min-width:1280px){
  .about-canvas{ padding-inline:clamp(32px,4vw,72px); }
  .about-landscape-split .about-band{
    min-height:clamp(380px,54vh,600px);
  }
}

@media (max-width:1023px){
  .about-landscape-split .about-band{ grid-template-columns:1fr; min-height:0; }
  .about-band-media{ min-height:clamp(260px,52vw,400px); height:auto; }
  .about-logos-row{ justify-content:center; }
  .about-logo-caep{ margin-left:0; }
}

/* dark mode */
.dark .about-page{ background:var(--onyx-950); }
.dark .about-band{
  background:var(--panel-bg);
  border-color:var(--line-gold);
  color:var(--on-elevated);
  box-shadow:none;
}
.dark .about-band-copy p,
.dark .about-band p,
.dark .about-band-lead,
.dark .about-band-list li,
.dark .about-mission-line{
  color:var(--on-elevated) !important;
}
.dark .about-mission-line{
  font-weight:600;
}
.dark .about-band-media{ border-color:var(--line-gold); background:var(--onyx-900); }

/* ---- Regulatory & Compliance page — full-width, centered on laptop -- */

/* generic centering helper used on this page's deco-head / body copy */
.deco-head.centered{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-left:auto; margin-right:auto; }
.deco-head.centered .deco-headline{ max-width:none; }
.deco-head.centered .deco-rule{ justify-content:center; }
.page-hero-body.centered{ margin-left:auto; margin-right:auto; text-align:center; }

.regulatory-disclosure-text{ max-width:900px; }
.regulatory-disclosure-text p{ font-size:16px; line-height:1.75; }

/* ---- Legal pages (Privacy Policy, Terms & Conditions) ---- */
.legal-hero .legal-content{
  max-width:820px; margin:0 auto; text-align:left;
}
.legal-content h2.legal-effective{
  font-family:var(--serif); font-size:clamp(18px,1.6vw,22px);
  color:var(--ink); margin:0 0 20px; font-weight:700; text-transform:none; letter-spacing:0;
}
.legal-meta{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass-ink); margin:0 0 28px; font-weight:600;
}
.legal-content h4{
  font-family:var(--serif); font-size:clamp(18px,1.6vw,22px);
  color:var(--ink); margin:34px 0 14px; font-weight:700;
}
.legal-content h5{
  font-size:15px; color:var(--ink-2); margin:18px 0 10px; font-weight:600;
}
.legal-content p,
.legal-content li{
  font-size:15.5px; line-height:1.72; color:var(--ink-2); margin:0 0 14px;
}
.legal-content ul,
.legal-content ol{
  margin:0 0 18px; padding:0;
  list-style:none;
}
.legal-content ul > li{ padding-left:var(--diamond-gutter); }
.legal-content li{ margin-bottom:8px; }
.legal-content a{ color:var(--brass-ink); text-decoration:underline; text-underline-offset:3px; overflow-wrap:break-word; }
.legal-content a:hover{ color:var(--gold); }
.legal-content strong{ color:var(--ink); font-weight:700; }
.legal-clauses{ margin-top:28px; }
/* Clause rows read as one flowing paragraph with a hanging clause number,
   not a two-column layout — flex here split links and trailing text into
   their own narrow side columns instead of wrapping inline with the rest
   of the sentence. The number is pulled out of flow (absolute) so
   everything else — including inline links — flows as normal text. */
.legal-content,
.legal-item,
.legal-clauses .item{
  overflow-wrap:break-word;
}
.legal-item,
.legal-clauses .item{
  position:relative;
  padding-left:3.4em;
  margin:0 0 12px; font-size:15px; line-height:1.68; color:var(--ink-2);
}
.legal-item .num,
.legal-clauses .item .num{
  position:absolute; left:0; top:3px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.04em; color:var(--brass-ink);
}
.legal-item.level-2,
.legal-clauses .item.level-2{ padding-left:4em; }

/* Legal pages — content visible immediately (no scroll-reveal) */
.legal-hero .deco-head,
.legal-hero .legal-content,
.legal-hero .legal-clauses .item{
  opacity:1 !important;
  transform:none !important;
}
.legal-clauses h4{
  font-family:var(--serif); font-size:clamp(18px,1.6vw,22px);
  color:var(--ink); margin:34px 0 14px; font-weight:700;
}

.regulatory-cta{ display:flex; justify-content:center; margin:40px 0 32px; }

/* dark onyx band for the CAEP logo + company details (matches source) */
.regulatory-company{
  display:flex; align-items:center; justify-content:center; gap:clamp(28px,4vw,48px);
  flex-wrap:wrap; text-align:left;
  padding:clamp(28px,3.2vw,40px) clamp(28px,3.6vw,48px);
  border-radius:18px;
  background:var(--panel-bg);
  border:1px solid var(--line-gold);
  box-shadow:
    0 1px 0 rgba(255,253,247,.1) inset,
    0 20px 34px -18px rgba(0,0,0,.45);
}
.regulatory-company-logo{ height:clamp(48px,5.4vw,72px); width:auto; object-fit:contain; flex-shrink:0; }
.regulatory-facts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.regulatory-facts li{ font-size:15px; line-height:1.5; color:var(--panel-text-muted); }
.regulatory-facts li:first-child{ font-weight:700; color:var(--panel-text); font-size:16px; margin-bottom:4px; }
.regulatory-facts a{ color:var(--panel-text); font-weight:600; text-decoration:none; }
.regulatory-facts a:hover{ color:var(--gold); }

/* tighten the gap before the Partners band that follows this section */
.regulatory-hero{ padding-bottom:clamp(40px,4vw,56px) !important; }

@media (max-width:640px){
  .page-hero{ padding-top:calc(72px + clamp(48px,7vw,72px)); }
  .regulatory-company{ flex-direction:column; text-align:center; }
  .regulatory-facts{ align-items:center; }
}







/* ===================================================================
   Services page — plain list format for the six core services and
   each expanded solution's sub-items, matching the original site's
   simple list layout (not a card grid). Styled with our theme.
=================================================================== */
.services-list{
  list-style:none; margin:32px 0 0; padding:0;
  display:flex; flex-direction:column;
}
.services-list li{
  padding:12px 0 12px var(--diamond-gutter); border-bottom:1px solid var(--line-soft);
  font-size:15px; line-height:1.55; color:var(--ink-2);
}
.services-list li:last-child{ border-bottom:none; }
.services-list li strong{ color:var(--ink); font-weight:700; }

/* Services hero — shared card panel (like the Buy/Sell cards) wrapping
   both the copy+list column and the video, so the two read as one
   hero unit instead of two floating, unrelated blocks. */
.services-hero-split .wrap{ max-width:none; }
.services-hero-panel{
  position:relative; overflow:hidden;
  padding:clamp(30px,3vw,46px);
  border-radius:24px;
  background:linear-gradient(180deg, var(--surface-hi), var(--surface) 72%);
  border:1px solid var(--line-brass);
  box-shadow:var(--card-3d);
}
.services-hero-panel::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:var(--gradient-gold);
}
.services-hero-grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,56px); align-items:center;
}
.services-hero-copy{ display:flex; flex-direction:column; }

.media-placeholder{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:16px;
  overflow:hidden; background:var(--bone-300);
  border:1px solid var(--line-brass);
}
.media-placeholder-video, .media-placeholder-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
}
.media-placeholder-poster{ z-index:0; }
.media-placeholder-video{ z-index:1; }

@media (max-width:900px){
  .services-hero-grid{ grid-template-columns:1fr; }
  .media-placeholder{
    height:auto; order:-1;
    aspect-ratio:4/5;
    min-height:clamp(280px, 68vw, 420px);
  }
}
@media (max-width:820px){ .media-placeholder-video{ display:none; } }

/* Expanded solutions — reuse the exact "Enhance your life WithCrypto"
   why-card treatment (3D tilt, glass sheen, gold bloom, hover lift),
   just three-up and without the Roman-numeral medallion. Only the
   bullet list below the intro copy needs its own styling. */
.expanded-grid{ grid-template-columns:repeat(3,1fr) !important; }
.expanded-card > p{ margin-bottom:22px; }
.expanded-list{
  position:relative; z-index:1;
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:14px;
  transform:translateZ(16px);
}
.expanded-list li{
  position:relative; padding-left:calc(var(--diamond-gutter) - 6px);
  color:var(--panel-text-muted); font-size:14.5px; line-height:1.55;
}
.expanded-list li strong{ color:var(--panel-text); font-weight:700; }

@media (max-width:900px){ .expanded-grid{ grid-template-columns:1fr !important; } }

/* Services contact form — centred and stretched full-width under the
   expanded-solutions cards, with a simple inline title (no separate
   decorative section heading). */
.services-contact-form{
  max-width:920px; margin-left:auto; margin-right:auto; width:100%;
}
.services-contact-form .contact-form-title{
  font-family:var(--serif); font-weight:700; font-size:clamp(22px,2vw,30px);
  color:var(--ink); text-align:center; margin:0 0 6px;
}

/* ===================================================================
   News page — featured carousel (3 slides) matching the original's
   slider, restyled in our onyx/gold theme. Plus news-card additions
   (media-as-link, excerpt, Read More) to match the original cards.
=================================================================== */
.news-carousel-section{ padding-top:0; padding-bottom:0; }
.carousel{
  position:relative; border-radius:22px; overflow:hidden;
  background:var(--panel-bg);
  border:1px solid var(--line-gold);
  box-shadow:0 1px 0 rgba(255,253,247,.1) inset, 0 30px 60px -30px rgba(0,0,0,.6);
}
.carousel-viewport{ overflow:hidden; }
.carousel-track{ display:flex; transition:transform .6s var(--ease); will-change:transform; backface-visibility:hidden; }
.carousel-slide{
  flex:0 0 100%; min-width:100%;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(24px,2.6vw,40px);
  padding:clamp(28px,3vw,44px) clamp(64px,6vw,88px) clamp(44px,4vw,56px);
}
.carousel-copy h2{
  font-family:var(--serif); font-weight:700; font-size:clamp(24px,2.4vw,34px);
  line-height:1.2; color:var(--panel-text); margin:0 0 14px;
}
.carousel-copy p{ color:var(--panel-text-muted); font-size:16px; line-height:1.6; margin:0 0 20px; }
.carousel-media{ border-radius:14px; overflow:hidden; aspect-ratio:16/11; background:var(--onyx-950); }
.carousel-media img{ width:100%; height:100%; object-fit:cover; }

.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; line-height:1; color:var(--onyx-950);
  background:linear-gradient(150deg, var(--gold-hi), var(--gold) 55%, var(--brass));
  border:none; box-shadow:0 8px 18px -6px rgba(0,0,0,.5);
  transition:transform .3s var(--ease), filter .3s ease;
}
.carousel-arrow{ width:42px; height:42px; }
.carousel-arrow:hover{ transform:translateY(-50%) scale(1.08); filter:brightness(1.06); }
.carousel-prev{ left:12px; }
.carousel-next{ right:12px; }

.carousel-dots{
  position:absolute; left:0; right:0; bottom:16px; z-index:4;
  display:flex; justify-content:center; gap:10px;
}
.carousel-dots button{
  width:9px; height:9px; border-radius:50%; padding:0; cursor:pointer;
  background:rgba(241,235,221,.35); border:none; transition:background .3s ease, transform .3s ease;
}
.carousel-dots button.active{ background:var(--gold); transform:scale(1.25); }

@media (max-width:820px){
  .carousel-slide{ grid-template-columns:1fr; padding:20px 20px 58px; gap:18px; }
  .carousel-media{ order:-1; aspect-ratio:16/10; }
  /* Arrows sit in bottom control row — never over slide copy */
  .carousel-arrow{
    top:auto; bottom:12px; transform:none;
    width:38px; height:38px; min-width:38px; min-height:38px;
    font-size:20px;
  }
  .carousel-arrow:hover{ transform:scale(1.06); }
  .carousel-prev{ left:16px; }
  .carousel-next{ right:16px; }
  .carousel-dots{ bottom:18px; padding:0 60px; }
}

/* News cards — media is now a link; add excerpt + Read More to match original */
.news-card-media{ display:block; }
.news-card h3 a{ color:inherit; text-decoration:none; }
.news-card h3 a:hover{ color:var(--brass-ink); }
.news-card-excerpt{ color:var(--ink-3); font-size:14px; line-height:1.6; margin:10px 0 16px; }
.news-card-more{
  display:inline-flex; align-items:center; min-height:44px; padding:8px 0;
  color:var(--brass-ink); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; font-weight:600; margin-top:auto;
}
.news-card-more:hover{ color:var(--gold); }

/* Services hero — tighten vertical rhythm inside the copy column so
   the shared panel reads clearly landscape instead of tall/square. */
.services-hero-copy .deco-head{ margin-bottom:20px; }
.services-hero-copy .deco-eyebrow{ margin-bottom:14px; }
.services-hero-copy .deco-rule{ margin-top:16px; }
.services-hero-copy .deco-headline{ font-size:clamp(28px,3vw,40px); }
.services-hero-copy .page-hero-body p{ margin-bottom:16px; font-size:15.5px; line-height:1.55; }
.services-hero-copy .services-list{ margin-top:16px; }

/* ===================================================================
   Services hero — centred out-of-box heading + richer media & list
=================================================================== */
.services-hero-head{ margin:0 auto clamp(34px, 4vw, 54px); }

/* Feature list → two-column scannable cards with gold diamond markers */
.services-hero-copy .services-list{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px;
}
.services-hero-copy .services-list li{
  position:relative; padding:14px 16px 14px 42px;
  border:1px solid var(--line-brass); border-radius:12px;
  background:linear-gradient(180deg, var(--surface-hi), var(--surface));
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 18px -14px rgba(27,23,18,.4);
  font-size:13px; line-height:1.45; color:var(--ink-3);
  transition:transform .3s var(--ease), box-shadow .35s ease, border-color .3s ease;
}
.services-hero-copy .services-list li:hover{
  transform:translateY(-3px); border-color:var(--gold);
  box-shadow:0 12px 24px -12px rgba(196,169,104,.55);
}
.services-hero-copy .services-list li strong{
  display:block; color:var(--ink); font-weight:700; margin-bottom:3px;
  font-family:var(--serif); font-size:15px; letter-spacing:0;
}
@media (max-width:560px){ .services-hero-copy .services-list{ grid-template-columns:1fr; } }

/* Media — cinematic gold frame: ring, overlay, corner brackets, ken-burns */
.media-placeholder{
  border-radius:20px; border:1px solid var(--line-gold);
  box-shadow:0 1px 0 rgba(255,253,247,.5) inset, 0 34px 64px -30px rgba(27,23,18,.55);
}
/* ken-burns removed — compositing a transform each frame janked the playing video */
.media-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(27,23,18,.05) 0%, transparent 26%, transparent 60%, rgba(27,23,18,.52) 100%);
}
.media-frame-corner{ position:absolute; z-index:3; width:26px; height:26px; pointer-events:none; }
.media-frame-tl{ top:12px; left:12px; border-top:2px solid var(--gold); border-left:2px solid var(--gold); border-radius:7px 0 0 0; }
.media-frame-br{ bottom:12px; right:12px; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold); border-radius:0 0 7px 0; }
.media-badge{
  position:absolute; z-index:3; left:14px; bottom:14px;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 15px; border-radius:100px;
  background:rgba(20,17,12,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(196,169,104,.5);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
}
.media-badge .wordmark{ font-size:15px; color:var(--text-on-dark); }
.media-badge .wordmark em{ color:var(--gold); }
.media-badge .wordmark .wordmark-dot{ color:var(--gold); }
.media-badge-dot{ width:7px; height:7px; border-radius:50%; background:var(--verdigris); box-shadow:0 0 8px 2px rgba(47,122,115,.6); animation:livePulse 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .media-placeholder-video, .media-placeholder-poster{ animation:none; transform:none; }
}

/* ===================================================================
   MOBILE OPTIMIZATION — comprehensive pass
   Safe areas · touch targets · sub-page layout · carousel · forms
=================================================================== */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ -webkit-tap-highlight-color:rgba(196,169,104,.18); }

@supports (padding:max(0px)){
  .wrap{ padding-left:max(var(--gutter), env(safe-area-inset-left)); padding-right:max(var(--gutter), env(safe-area-inset-right)); }
  .footer-bottom-inner{ padding-bottom:max(24px, env(safe-area-inset-bottom)); }
}

/* Tablet + phone shared layout */
@media (max-width:1080px){
  :root{ --gutter:clamp(14px, 3.5vw, 24px); }

  .btn{
    max-width:100%;
    white-space:normal;
    text-align:center;
    line-height:1.35;
    letter-spacing:.12em;
    padding:14px 20px;
    font-size:11.5px;
  }
  .btn-lg{ padding:15px 22px; font-size:12px; }
  .mobile-actions .btn{
    flex:1; min-width:0; min-height:44px; height:auto;
    padding:11px 10px;
  }

  .hero-inner{
    padding-top:calc(
      max(8px, env(safe-area-inset-top))
      + clamp(46px, 12vw, 52px)
      + clamp(16px, 4vw, 24px)
    );
    padding-bottom:48px; gap:24px;
  }
  .hero-inner{
    display:flex; flex-direction:column; align-items:center;
  }
  .hero-copy{ display:contents; }
  .hero-inner .eyebrow{ order:1; width:100%; justify-content:center; text-align:center; letter-spacing:.22em; gap:0; margin-bottom:28px; }
  .hero-inner .eyebrow-rule{ display:none; }
  .hero-inner .hero-title{ order:2; width:100%; }
  .hero-inner .hero-coin-stage{ order:3; width:100%; margin:4px 0 8px; }
  .hero-inner .hero-foot{ order:3; width:100%; }
  .hero-inner .hero-tagline{ order:4; width:100%; }

  html{ scroll-behavior:auto; }
  .rv{
    transform:translateY(32px);
    transition:opacity .55s var(--ease), transform .55s var(--ease);
    transition-delay:calc(var(--i,0)*.05s);
    will-change:auto;
  }
  .rv-left{ transform:translateX(-28px) translateY(18px); }
  .rv-right{ transform:translateX(28px) translateY(18px); }
  .rv-scale{ transform:scale(.94) translateY(22px); }
  .rv-up{ transform:translateY(40px); }
  .hero-coin-stage,
  .hero-copy{ transition:none; will-change:auto; }

  .step.in h3, .step.in p,
  .bs-card.in .bs-heading, .bs-card.in .bs-list-how li, .bs-card.in .bs-list-why li,
  .why-card.in h4, .why-card.in p,
  .service-card.in h4, .service-card.in p,
  .deco-head.in .deco-headline{ animation-duration:.45s; }

  .page-hero{
    padding-top:calc(
      max(8px, env(safe-area-inset-top))
      + clamp(46px, 12vw, 52px)
      + clamp(38px, 10vw, 48px)
      + clamp(20px, 5vw, 32px)
      + clamp(32px, 7vw, 56px)
    );
  }

  .mobile-nav{
    inset:auto;
    top:calc(max(8px, env(safe-area-inset-top)) + 52px + 44px);
    left:max(12px, env(safe-area-inset-left));
    right:max(12px, env(safe-area-inset-right));
    width:auto; height:auto;
    max-height:min(72vh, 480px);
    overflow-y:auto;
    border-radius:20px;
    justify-content:flex-start;
    padding:18px 20px max(18px, env(safe-area-inset-bottom));
    border:1px solid var(--line-brass);
    box-shadow:var(--shadow-hi);
    transform:translateY(-10px) scale(.98);
    transform-origin:top right;
    transition:opacity .35s ease, transform .35s var(--ease), top .45s var(--ease);
  }
  .mobile-nav.open{ transform:translateY(0) scale(1); }
  .mobile-nav nav{ gap:0; }
  .mobile-nav nav a{
    font-size:clamp(18px, 4.6vw, 24px);
    padding:9px 0;
  }
  .mobile-nav nav a span{ font-size:10px; margin-right:10px; }
  .mobile-actions{
    margin-top:18px; flex-direction:row; width:100%; max-width:100%; gap:8px;
  }
  .mobile-nav nav a:nth-child(6){ transition-delay:.38s; }

  body:has(.mobile-nav.open)::before{
    content:""; position:fixed; inset:0; z-index:999;
    background:rgba(27,23,18,.32);
    pointer-events:none;
  }
  body:has(.mobile-nav.open){ overflow:hidden; }
}

/* Tablet (769–1080) — hamburger menu, full bar stays on scroll (no pill morph) */
@media (min-width:769px) and (max-width:1080px){
  .site-header{
    padding-top:max(8px, env(safe-area-inset-top));
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }

  .header-unit{ width:100%; max-width:100%; margin:0; }

  .site-header .header-inner,
  .site-header.scrolled .header-inner{
    width:100% !important; max-width:100% !important; margin:0;
    height:52px; padding:0 18px !important;
    justify-content:space-between;
  }
  .site-header.scrolled .header-inner{ height:48px; }

  .site-header.scrolled .header-inner .wordmark{
    opacity:1; max-width:none; visibility:visible;
    position:static; pointer-events:auto; transform:none;
  }

  .site-header.scrolled .nav-powered{
    max-height:80px; opacity:1; visibility:visible; pointer-events:auto;
    margin-top:-1px; padding-top:10px; padding-bottom:10px;
    border-color:var(--line-brass);
  }

  .site-header.scrolled ~ .mobile-nav{
    top:calc(max(8px, env(safe-area-inset-top)) + 48px + 44px);
    left:max(12px, env(safe-area-inset-left));
    right:max(12px, env(safe-area-inset-right));
    min-width:auto; max-width:none;
  }
}

/* Phone only — full bar at top, morphs into hamburger pill on scroll */
@media (max-width:768px){
  .site-header{
    --header-pill-w:48px;
    --mobile-nav-bg:var(--nav-surface);
  }

  .site-header{
    display:flex; flex-direction:column; align-items:flex-end;
    padding-top:max(8px, env(safe-area-inset-top));
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
    overflow:visible;
    background:transparent !important;
    border-bottom:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .site-header.scrolled{
    background:transparent !important;
    border-bottom:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Hide hero eyebrow on phone */
  .hero-inner .eyebrow{ display:none; }

  /* Anchor right so width morph expands from the hamburger side */
  .header-unit{
    display:flex; flex-direction:column; align-items:center;
    width:100%; max-width:100%;
    margin-left:auto; margin-right:0;
    overflow:hidden;
    contain:layout style;
    transition:width .32s cubic-bezier(.33,1,.68,1);
  }
  .site-header.scrolled .header-unit{
    width:var(--header-pill-w, 48px);
    max-width:var(--header-pill-w, 48px);
    overflow:visible;
  }

  .site-header .header-inner{
    position:relative;
    width:100% !important; max-width:100% !important; margin:0;
    min-width:0; box-sizing:border-box;
    height:52px; padding:0 14px !important; gap:8px;
    justify-content:space-between;
    overflow:visible;
    background:var(--mobile-nav-bg);
    transition:
      height .32s cubic-bezier(.33,1,.68,1),
      padding .32s cubic-bezier(.33,1,.68,1);
  }

  .site-header.scrolled .header-inner{
    width:100% !important; max-width:100% !important; height:48px;
    padding:0 !important; margin:0;
    justify-content:center;
    background:var(--mobile-nav-bg);
    box-shadow:var(--card-3d);
  }

  .header-inner .wordmark{
    flex:0 1 auto; min-width:0;
    font-size:clamp(16px, 4.2vw, 19px);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    transition:opacity .14s ease;
  }
  .site-header:not(.scrolled) .header-inner .wordmark{
    transition:opacity .22s ease .14s;
  }
  .site-header.scrolled .header-inner .wordmark{
    opacity:0;
    pointer-events:none; position:absolute;
  }

  .burger{
    display:flex; flex-shrink:0;
    width:38px; height:38px; gap:6px; padding:0 5px;
    margin:0;
    opacity:1; visibility:visible;
    pointer-events:auto;
  }

  .site-header .header-inner{ align-items:center; }
  .site-header .header-actions{
    display:flex; align-items:center; justify-content:flex-end;
    gap:10px; height:100%; margin:0; flex-shrink:0;
  }
  .site-header .header-actions .theme-toggle{
    width:50px; height:28px; flex-shrink:0; align-self:center;
  }

  .nav-powered{
    position:relative; align-self:center;
    left:auto; top:auto;
    margin-top:-1px;
    display:inline-flex !important;
    opacity:1; visibility:visible;
    background:var(--mobile-nav-bg);
    border:1px solid var(--line-brass); border-top:none;
    border-radius:0 0 100px 100px;
    box-shadow:none;
    backdrop-filter:blur(18px) saturate(1.12);
    -webkit-backdrop-filter:blur(18px) saturate(1.12);
    transition:opacity .14s ease;
  }
  .site-header:not(.scrolled) .nav-powered{
    transition:opacity .22s ease .18s;
  }
  .site-header.scrolled .nav-powered{
    opacity:0; visibility:hidden; pointer-events:none;
    height:0; margin:0; padding:0; overflow:hidden; border:none;
  }

  .site-header.scrolled ~ .mobile-nav{
    top:calc(max(8px, env(safe-area-inset-top)) + 48px + 10px);
    left:auto;
    right:max(12px, env(safe-area-inset-right));
    min-width:min(280px, calc(100% - 24px));
    max-width:calc(100% - 24px);
  }

  /* Scrolled pill — hide header toggle; show it inside the menu drawer */
  .mobile-theme-row{
    display:none; align-items:center; justify-content:space-between;
    width:100%; gap:16px;
    padding:18px 4px 14px; margin-top:10px;
    border-top:1px solid var(--line-brass);
    box-sizing:border-box;
  }
  .mobile-theme-label{
    font-size:10px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink-3); line-height:1; margin:0; flex:0 0 auto;
  }
  .mobile-theme-row .theme-toggle{ flex-shrink:0; margin-left:auto; }
  .site-header.scrolled .header-actions{ display:none; }
  .site-header.scrolled ~ .mobile-nav .mobile-theme-row{ display:flex; }
}

/* Buy/Sell cards: override the 560px 2-col inner grid on phones/tablets */
@media (max-width:819px){
  .bs-card{
    display:flex !important; flex-direction:column;
    grid-template-columns:unset !important; row-gap:22px;
  }
  .bs-card .bs-kicker,
  .bs-card .bs-heading,
  .bs-card .bs-block{ grid-column:unset !important; grid-row:unset !important; margin-top:0 !important; }
  .bs-card .bs-heading{ margin-bottom:18px !important; }
  .bs-card .bs-block + .bs-block{ margin-top:8px; }
  .bs-list-how,
  .bs-list-why{ display:flex !important; flex-direction:column !important; grid-template-columns:unset !important; }
}

@media (max-width:640px){
  /* Sub-page heroes — match homepage centered treatment */
  .page-hero .deco-head.centered,
  .about-deco-head,
  .services-hero-head{
    text-align:center; display:flex; flex-direction:column; align-items:center;
  }
  .page-hero-body.centered{ padding:0 2px; }
  .page-hero-body p{ font-size:15px; line-height:1.65; }
  .page-hero-tagline{ font-size:17px; }
  .deco-eyebrow{ flex-wrap:wrap; justify-content:center; text-align:center; font-size:10px; letter-spacing:.18em; gap:10px; }
  .deco-headline{ max-width:none; font-size:clamp(28px, 7.5vw, 40px); }

  /* Hero */
  .hero{ min-height:auto; }
  .hero-inner{ gap:20px; }
  .hero-inner .hero-coin-stage{ margin:0 0 4px; }
  .hero-lede{ max-width:none; }
  .hero-coin-stage{ width:100%; }
  .coin-float{ width:clamp(200px, 58vw, 280px); }

  /* Section rhythm */
  .section{ padding:clamp(44px, 10vw, 64px) 0; }
  .page-hero{
    padding-top:calc(
      max(8px, env(safe-area-inset-top))
      + clamp(46px, 12vw, 52px)
      + clamp(16px, 4vw, 24px)
    );
  }
  .deco-head{ margin-bottom:clamp(28px, 6vw, 40px); }

  /* Touch-friendly CTAs — standalone floating CTAs (hero, services,
     regulatory) size to their content and stay centered instead of
     stretching edge-to-edge; the contact form's submit still spans the
     field width, since that's a real form action, not a floating CTA. */
  .hero-foot{ width:100%; padding:0; box-sizing:border-box; }
  .hero-foot .btn,
  .services-cta .btn,
  .regulatory-cta .btn{
    width:auto; max-width:min(360px, 100%);
    margin-inline:auto;
    box-sizing:border-box;
  }
  .contact-form .btn{ width:100%; max-width:100%; box-sizing:border-box; }
  .services-cta{ display:flex; justify-content:center; width:100%; }

  /* Carousel — content-only padding, controls stay in footer row */
  .carousel{ touch-action:pan-y; }
  .carousel-slide{ padding:16px 16px 54px; gap:16px; }
  .carousel-copy h2{ font-size:clamp(20px, 5.4vw, 26px); line-height:1.25; }
  .carousel-copy p{ font-size:14.5px; margin-bottom:16px; }
  .carousel-copy .btn{ display:flex; width:auto; max-width:100%; margin-inline:auto; }
  .carousel-media{ aspect-ratio:16/9; }
  .carousel-dots{ bottom:14px; gap:10px; }
  .carousel-dots button{ width:10px; height:10px; }

  /* Services hero — larger house/property image */
  .services-hero-panel{ padding:14px 10px 18px; border-radius:16px; }
  .services-hero-copy .deco-headline{ font-size:clamp(22px, 6vw, 30px); }
  .services-hero-grid{ gap:18px; }
  .media-placeholder{
    aspect-ratio:3/4;
    min-height:clamp(300px, 82vw, 460px);
    width:100%;
    max-width:100%;
    margin-left:0; margin-right:0;
    border-radius:14px;
  }
  .media-badge{ left:10px; bottom:10px; padding:7px 12px; }
  .media-badge .wordmark{ font-size:12px; }
  .media-frame-corner{ width:20px; height:20px; }
  .media-frame-tl{ top:8px; left:8px; }
  .media-frame-br{ bottom:8px; right:8px; }

  /* Forms — 16px prevents iOS zoom-on-focus (text fields only; buttons
     don't trigger that zoom, so they keep the shared .btn font-size). */
  .contact-form-field input,
  .contact-form-field textarea,
  .footer-form input{ font-size:16px; min-height:48px; }
  .contact-form{ padding:24px 18px; border-radius:18px; }
  .contact-tagline{ font-size:17px; }

  /* Footer */
  .footer-inner{ gap:32px; }
  .footer-brand p{ max-width:none; }
  .footer-bottom-inner{ flex-direction:column; align-items:center; text-align:center; gap:14px; }

  /* Partners */
  .partners-track{ gap:20px 28px; }
  .partner-logo img{ height:clamp(30px, 7.5vw, 44px); max-width:min(130px, 36vw); }

  /* Cards */
  .why-card,
  .expanded-card,
  .how-it-works .step{ padding:clamp(24px, 5.5vw, 32px) clamp(18px, 4.5vw, 24px) !important; }
  .news-card-body{ padding:16px 18px 20px; }
  .news-card h3{ font-size:17px; }
  .regulatory-company{ padding:22px 18px; }

  /* Buy/sell + stats */
  .bs-card{ padding:clamp(24px, 5vw, 32px) clamp(18px, 4vw, 24px) !important; }
  .stats-grid{ gap:24px; }

  /* Wordmark */
  .wordmark{ font-size:17px; }
}

@media (max-width:380px){
  .site-header{ --header-pill-w:44px; }
  .hero-title .line{ font-size:clamp(48px, 13vw, 56px); }
  .hero-title .hero-accent{ font-size:clamp(52px, 14vw, 62px); }
  .mobile-nav nav a{ font-size:17px; padding:7px 0; }
  .mobile-nav{ top:calc(max(8px, env(safe-area-inset-top)) + 48px + 8px); }
  .header-inner{ height:46px; }
  .site-header.scrolled .header-inner{ height:44px; }
  .header-inner .wordmark{ font-size:16px; }
  .site-header.scrolled .burger{ width:36px; height:36px; }
  .btn{ padding:13px 16px; font-size:11px; }
  .btn-lg{ padding:14px 18px; font-size:11.5px; }
  .media-placeholder{ min-height:clamp(260px, 78vw, 380px); }
}

/* ===================================================================
   Dark mode — bone ↔ onyx inversion (toggle adds .dark on <html>)
=================================================================== */
html.dark{ color-scheme:dark; }

.dark .grain{ opacity:.22; mix-blend-mode:soft-light; }

.dark .hero{
  background:
    radial-gradient(1200px 760px at 84% 22%, rgba(196,169,104,.14), transparent 60%),
    radial-gradient(880px 640px at 4% 92%, rgba(47,122,115,.05), transparent 62%),
    linear-gradient(180deg, var(--onyx-900), var(--onyx-950) 58%);
}

.dark .how-it-works,
.dark .why,
.dark .glance{ background:var(--onyx-900); }

.dark .partners{
  background:var(--partners-bg);
  border-top:none;
  padding-bottom:clamp(20px, 2.5vw, 32px);
}
.dark .partners-heading{ color:var(--partners-text); }
.dark .partners-heading em{ color:var(--gold); }

.dark .site-footer{
  --ink:var(--text-on-dark);
  --ink-2:#d8cdb5;
  --ink-3:var(--text-on-dark-muted);
  --brass-ink:var(--gold-300);
  background:var(--footer-bg);
  color:var(--ink-2);
  border-top:none;
  padding-top:clamp(20px, 2.5vw, 32px);
}
.dark .site-footer .footer-bottom{
  border-top:none;
  margin-top:8px;
}

.dark .buysell,
.dark .services,
.dark .transactions{
  background:
    radial-gradient(1100px 620px at 50% 0%, rgba(196,169,104,.08), transparent 62%),
    var(--onyx-950);
}

.dark .how-it-works .step-num{
  color:var(--onyx-950);
  box-shadow:
    inset 0 0 0 2px rgba(255,250,232,.8),
    inset 0 -8px 16px rgba(70,52,24,.5),
    inset 0 8px 14px rgba(255,246,214,.6),
    0 16px 32px -8px rgba(154,127,76,.55),
    0 0 0 10px rgba(38,33,26,.55) !important;
}

.dark .mobile-nav{
  background:rgba(27,23,18,.97);
  border-color:var(--line-brass);
}

.dark .site-footer .wordmark{ color:var(--text-on-dark); }
.dark .site-footer .wordmark em{ color:var(--gold); }
.dark .site-footer .footer-brand p,
.dark .site-footer .footer-nav a,
.dark .site-footer .footer-bottom-inner,
.dark .site-footer .footer-powered{ color:var(--ink-3); }
.dark .site-footer .footer-nav-title{ color:var(--gold-300); }
.dark .site-footer .footer-nav a:hover,
.dark .site-footer .footer-bottom a:hover{ color:var(--text-on-dark); }
.dark .site-footer .footer-bottom a,
.dark .site-footer .footer-powered a{ color:var(--gold-300); }
.dark .site-footer .footer-form label{ color:var(--ink-3); }
.dark .site-footer .footer-form input{
  background:rgba(241,235,221,.06);
  color:var(--text-on-dark);
  border-color:var(--line-brass);
}
.dark .site-footer .footer-form input::placeholder{ color:var(--ink-3); opacity:.7; }
.dark .site-footer .footer-form input:focus{
  background:rgba(241,235,221,.1);
  border-color:var(--gold);
}

/* ---- Inverted surfaces: reset text tokens so --ink reads on bone cards ---- */
.dark .bs-card,
.dark .why-card,
.dark .expanded-card,
.dark .news-card,
.dark .contact-form,
.dark .carousel,
.dark .services-hero-copy .services-list li,
.dark .dash{
  --ink:var(--onyx-950);
  --ink-2:var(--neutral-700);
  --ink-3:var(--neutral-500);
  --panel-text:var(--onyx-950);
  --panel-text-muted:var(--neutral-700);
  --brass-ink:var(--gold-800);
  background:var(--elevated-bg) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid var(--elevated-border) !important;
  box-shadow:var(--elevated-shadow) !important;
}

.dark .why-card::before{
  background:linear-gradient(180deg, rgba(255,253,247,.35), rgba(255,253,247,0) 42%) !important;
  opacity:1 !important;
}

/* Regulatory company band stays a fixed dark onyx panel in both themes —
   it hosts the static white CAEP logo, which only reads on a dark
   background, so it must not follow the light-mode "elevated card" flip
   the other --panel-* consumers get in dark mode. */
.dark .regulatory-company{
  --panel-bg:linear-gradient(165deg, #2b251d, var(--onyx-950) 78%);
  --panel-text:var(--text-on-dark);
  --panel-text-muted:var(--text-on-dark-muted);
  background:var(--panel-bg);
  border-color:var(--line-gold);
  box-shadow:
    0 1px 0 rgba(255,253,247,.1) inset,
    0 20px 34px -18px rgba(0,0,0,.45);
}

.dark .why-card:hover,
.dark .bs-card:hover,
.dark .news-card:hover{
  border-color:rgba(196,169,104,.55) !important;
  box-shadow:var(--elevated-shadow-hover) !important;
}

/* Dark how-it-works steps — onyx cards, light text */
.dark .how-it-works .step{
  --ink:var(--text-on-dark);
  --ink-2:var(--text-on-dark-muted);
  --ink-3:var(--text-on-dark-muted);
  --brass-ink:var(--gold-300);
  background:linear-gradient(165deg, #2b251d, var(--onyx-950) 78%) !important;
  border:1px solid var(--line-gold) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:
    0 1px 0 rgba(255,253,247,.1) inset,
    0 2px 4px rgba(0,0,0,.28),
    0 20px 34px -18px rgba(0,0,0,.42) !important;
}
.dark .how-it-works .step h3{ color:var(--text-on-dark) !important; }
.dark .how-it-works .step p{ color:var(--text-on-dark-muted) !important; }
.dark .how-it-works .step:hover{
  transform:translateY(-8px) scale(1.01) !important;
  border-color:var(--gold) !important;
  box-shadow:
    0 1px 0 rgba(255,253,247,.14) inset,
    0 10px 20px rgba(0,0,0,.35),
    0 32px 48px -16px rgba(0,0,0,.45) !important;
}

/* Dark service cards — onyx, light text (laptop + mobile) */
.dark .service-card{
  --ink:var(--text-on-dark);
  --ink-2:var(--text-on-dark-muted);
  --ink-3:var(--text-on-dark-muted);
  --brass-ink:var(--gold-300);
  background:linear-gradient(165deg, #2b251d, var(--onyx-950) 78%) !important;
  border:1px solid var(--line-gold) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:
    0 1px 0 rgba(255,253,247,.1) inset,
    0 2px 4px rgba(0,0,0,.28),
    0 20px 34px -18px rgba(0,0,0,.42) !important;
}
.dark .service-card::before{
  background:linear-gradient(180deg, rgba(255,253,247,.08), rgba(255,253,247,0) 42%) !important;
  opacity:1 !important;
}
.dark .service-card .service-top{ border-bottom:none; }
.dark .service-card h4{ color:var(--text-on-dark) !important; }
.dark .service-card p{ color:var(--text-on-dark-muted) !important; }
.dark .service-card:hover{
  --ty:-8px; --sc:1.015;
  border-color:var(--gold) !important;
  box-shadow:
    0 1px 0 rgba(255,253,247,.14) inset,
    0 10px 20px rgba(0,0,0,.35),
    0 32px 48px -16px rgba(0,0,0,.45) !important;
}

/* Buy/sell inner panels on bone cards */
.dark .bs-card .bs-block{
  background:var(--inset-panel-bg);
  border-color:rgba(154,127,76,.22);
  box-shadow:inset 0 1px 0 rgba(255,253,247,.5);
}
.dark .bs-card .bs-label{
  background:var(--verdigris);
  color:#fff;
  border-color:var(--verdigris);
}
.dark .bs-card .bs-heading{ color:var(--onyx-950) !important; }
.dark .bs-card .bs-list li,
.dark .bs-card .bs-list-how li,
.dark .bs-card .bs-list-why li{
  color:var(--neutral-700) !important;
}
.dark .bs-card .bs-list-how li{
  background:var(--inset-row-bg) !important;
  border-color:rgba(154,127,76,.28) !important;
  box-shadow:0 1px 0 rgba(255,253,247,.55) inset, 0 8px 18px -14px rgba(27,23,18,.18) !important;
}

/* Gold primary + verdigris secondary — same in light and dark */

/* Contact form fields on bone surface */
.dark .contact-form-field input,
.dark .contact-form-field textarea{
  background:rgba(255,253,247,.55);
  color:var(--onyx-950);
  border-color:rgba(154,127,76,.35);
}
.dark .contact-form-field input:focus,
.dark .contact-form-field textarea:focus{
  background:var(--bone-50);
  border-color:var(--gold);
}

/* Carousel details on bone panel */
.dark .carousel-media{ background:var(--onyx-950); }
.dark .carousel-dots button{ background:rgba(27,23,18,.22); }
.dark .carousel-dots button.active{ background:var(--gold); }

.dark .media-placeholder{ background:var(--onyx-900); }
.dark .dash-chrome,
.dark .ledger-head{ background:rgba(255,253,247,.22); }
.dark .ledger-row:not(.ledger-head):hover{ background:rgba(196,169,104,.12); }

html.dark,
html.dark body{
  transition:background-color .35s ease, color .35s ease;
}

/* ===================================================================
   Hero photo background (car) — image sits centre-right, bone scrim
   heaviest on the left so the copy stays fully legible and never
   overlaps the car. Replaces the coin stage on the home hero.
=================================================================== */
.hero-photo .hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-photo .hero-bg-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:58% center;
}
/* per-theme image: bone interior for light, brown interior for dark */
.hero-photo .hero-bg-dark{ display:none; }
html.dark .hero-photo .hero-bg-light{ display:none; }
html.dark .hero-photo .hero-bg-dark{ display:block; }

/* Dark onyx scrim on the LEFT only — behind the copy — fading to fully
   transparent by mid so the middle-to-right shows the photo cleanly. */
.hero-photo .hero-media-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(27,23,18,.94) 0%,
    rgba(27,23,18,.82) 28%,
    rgba(27,23,18,.52) 48%,
    rgba(27,23,18,.24) 62%,
    rgba(27,23,18,0) 74%);
}
.hero-photo .hero-inner{ grid-template-columns:1fr; position:relative; z-index:2; }
.hero-photo .hero-copy{ max-width:600px; }

/* Copy sits on a dark scrim in both themes → force light text */
.hero-photo .hero-title .line{ color:#f1ebdd; }
.hero-photo .hero-tagline .ht-lead{ color:#f1ebdd; }
.hero-photo .hero-tagline .ht-sub{ color:var(--gold-300); }
.hero-photo .hero-lede{ color:#c4b9a1; }

@media (max-width:820px){
  /* focus the crop on the steering wheel (right side after flip) */
  .hero-photo .hero-bg-img{ object-position:92% center; }
  .hero-photo .hero-media-scrim{
    background:linear-gradient(180deg, rgba(27,23,18,.9) 0%, rgba(27,23,18,.6) 45%, rgba(27,23,18,.85) 100%);
  }
}

/* Mobile hero — headline is the centrepiece, tagline supporting */
@media (max-width:768px){
  .hero-photo .hero-inner{
    justify-content:center;
    padding-top:calc(
      max(8px, env(safe-area-inset-top))
      + clamp(52px, 13vw, 56px)
      + clamp(28px, 7vw, 44px)
    );
    padding-bottom:clamp(36px, 9vw, 52px);
    gap:0;
  }

  .hero-title .line{
    font-size:clamp(54px, 14vw, 72px);
    line-height:1.02;
  }
  .hero-title .hero-accent{
    font-size:clamp(60px, 15.5vw, 80px);
    line-height:1.08;
    margin-top:.08em;
  }

  .hero-foot{ margin-top:clamp(22px, 5.5vw, 30px); }

  .hero-tagline{
    margin-top:clamp(14px, 3.5vw, 20px);
    max-width:32ch;
    gap:3px;
  }
  .hero-tagline .ht-lead{
    font-family:var(--serif);
    font-size:clamp(16px, 4.2vw, 20px);
    font-weight:600;
    letter-spacing:-.01em;
    text-transform:none;
    line-height:1.3;
    color:var(--ink-2);
  }
  .hero-tagline .ht-sub{
    font-size:11px;
    letter-spacing:.14em;
    opacity:.9;
  }
  .hero-photo .hero-tagline .ht-lead{ color:rgba(241,235,221,.88); }
  .hero-photo .hero-tagline .ht-sub{ color:rgba(220,199,154,.8); }
}