/* 3D Cars Studio site styles, v1.
   Extracted from index.html. Served from /assets/ with an immutable one-year cache
   (vercel.json), so never edit this file in place once it is live: copy it to
   site.v2.css and bump every <link> that points at it. */

:root{
  --bg:#0c0d11;
  --bg-2:#14151b;
  --bg-3:#1c1e26;
  --paper:#f4efe6;
  --paper-2:#e4dccb;
  --ink:#14150f;
  --cream:#ece7dd;
  --cream-dim:rgba(236,231,221,.60);
  /* .52 on --bg is 4.8:1, the lowest step that clears WCAG AA for the footer's small text */
  --cream-faint:rgba(236,231,221,.52);
  --brass:#cba15c;
  --brass-lt:#e6ce9c;
  --brass-deep:#a67c37;
  --line-dark:rgba(236,231,221,.12);
  --line-paper:rgba(20,21,15,.14);
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --maxw:1440px;
  --pad:clamp(20px,4.4vw,56px);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0;background:var(--bg);color:var(--cream);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;}
/* <picture> only adds a WebP source; contents keeps the <img> laid out as if unwrapped.
   <source> has no display:none in the UA sheet, so without the second rule it becomes
   an empty grid item once its parent is display:contents. */
picture{display:contents;}
picture>source{display:none;}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} }

/* shared bits */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lt);}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);}
.paper .eyebrow{color:var(--brass-deep);} .paper .eyebrow::before{background:var(--brass-deep);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;
  font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s,border-color .25s;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--brass);color:#1a1305;padding:15px 30px;font-size:15px;}
.btn-primary:hover{background:var(--brass-lt);}
.btn-ghost{border:1px solid rgba(236,231,221,.36);color:var(--cream);padding:15px 30px;font-size:15px;
  background:rgba(8,9,12,.28);backdrop-filter:blur(4px);}
.btn-ghost:hover{border-color:var(--cream);}

/* ---------- TOP BAR (launch strip + nav, stuck together) ---------- */
.topbar{position:sticky;top:0;z-index:60;}
.launch-bar{background:var(--bg-2);border-bottom:1px solid rgba(236,231,221,.1);}
.launch-inner{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,16px);
  padding-top:11px;padding-bottom:11px;flex-wrap:wrap;}
.launch-tag{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--brass);white-space:nowrap;}
.launch-tag .pop{font-size:13px;letter-spacing:0;}
.say-short{display:none;}
.launch-say{margin:0;font-size:14px;font-weight:500;color:rgba(236,231,221,.85);text-align:center;}
.launch-say em{font-family:var(--serif);color:var(--brass-lt);font-style:italic;}
.launch-go{font-size:13.5px;font-weight:600;color:var(--brass-lt);text-decoration:none;
  border-bottom:1px solid rgba(203,161,92,.5);padding-bottom:1px;white-space:nowrap;}
.launch-go:hover{border-bottom-color:var(--brass-lt);}

/* ---------- NAV ---------- */
/* Transparent while it sits over the hero image, solid once scrolled past it.
   A permanently solid bar would kill the hero; a permanently transparent one
   would be cream text on the cream sections below. */
.nav{position:relative;z-index:3;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;}
.topbar.stuck .nav{background:rgba(12,13,17,.9);backdrop-filter:blur(12px);
  border-bottom-color:var(--line-dark);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:20px;padding-bottom:20px;}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--cream);}
.brand img{display:block;height:28px;width:auto;}
.nav-right{display:flex;align-items:center;gap:22px;}
.nav-note{font-size:13px;color:rgba(236,231,221,.45);}
.nav .btn-primary{padding:11px 24px;font-size:13.5px;}
@media(max-width:720px){ .nav-note{display:none;} }

/* ---------- HERO ---------- */
.hero{position:relative;min-height:clamp(520px,74vh,720px);margin-top:-84px;
  display:flex;align-items:flex-end;overflow:hidden;}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:64% 42%;}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(94deg,rgba(8,9,12,.95) 0%,rgba(8,9,12,.8) 25%,rgba(8,9,12,.4) 55%,transparent 80%),
             linear-gradient(0deg,rgba(8,9,12,.75) 0%,transparent 45%);}
/* padding-top clears the pinned nav (84px) with room to spare: the keyword hero is
   taller than the old quote hero, and the hero sits under the nav via margin-top:-84px */
.hero-inner{position:relative;z-index:2;padding-top:140px;padding-bottom:clamp(48px,7vw,72px);}
.hero-inner > *{max-width:700px;}
.hero h1{font-family:var(--serif);font-size:clamp(36px,4.8vw,60px);line-height:1.04;
  letter-spacing:-.015em;margin:22px 0 0;font-weight:400;}
.hero h1 em{color:var(--brass-lt);font-weight:500;font-style:italic;}
.hero-lead{margin:22px 0 0;font-size:clamp(16px,1.5vw,19px);line-height:1.5;max-width:36ch;
  text-shadow:0 1px 18px rgba(0,0,0,.65);}
.hero-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;}
/* Phones only. The source is 2.33:1, so a tall narrow hero shows about a third
   of its width and the 64% focal point sliced the screen and car in half. Shifting
   the focal point right moves the image left and keeps the pointing gesture, the
   car and the tint percentages in frame. Tablet and desktop already show 30% to
   83% of the image and need no change. */
/* Both bars stick, so on a phone they were holding 194px, about a quarter of the
   screen, for the whole scroll. Tighten the strip and shrink the nav once stuck. */
@media(max-width:640px){
  /* one line, or the pinned pair eats the screen: swap in the trimmed copy,
     drop the "Launch offer" words (the popper carries it) and stop wrapping */
  .launch-inner{padding-top:8px;padding-bottom:8px;gap:8px;flex-wrap:nowrap;
    justify-content:center;}
  .say-full{display:none;} .say-short{display:inline;}
  .launch-tag .lbl{display:none;}
  .launch-say{font-size:12.5px;line-height:1.3;white-space:nowrap;}
  .launch-tag,.launch-go{font-size:12px;}
  .topbar.stuck .nav-inner{padding-top:9px;padding-bottom:9px;}
  .topbar.stuck .brand img{height:24px;}
  .topbar.stuck .nav .btn-primary{padding:8px 16px;font-size:12.5px;}
}

@media(max-width:640px){
  .hero{margin-top:-64px;}
  /* The keyword hero is taller than the old quote; keep its top clear of the pinned nav */
  .hero-inner{padding-top:120px;}
  .hero .eyebrow{font-size:11px;}
  .hero-media img{object-position:76% 42%;}
  /* The default scrim runs left to right, for the desktop layout where the copy
     sits in the left third. On a phone the copy spans the full width, so it needs
     a bottom-up scrim instead or the headline sits on the bright white car. */
  .hero-scrim{background:
    linear-gradient(0deg,rgba(8,9,12,.94) 0%,rgba(8,9,12,.86) 30%,rgba(8,9,12,.62) 55%,rgba(8,9,12,.3) 78%,rgba(8,9,12,.12) 100%);}
}

/* ---------- COUNTER (paper) ---------- */
.counter{background:var(--paper-2);color:var(--ink);}
.counter-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,4.6vw,64px);align-items:center;
  padding-top:clamp(56px,7vw,80px);padding-bottom:clamp(56px,7vw,80px);}
.counter h2{font-family:var(--serif);font-size:clamp(30px,4vw,48px);line-height:1.06;
  letter-spacing:-.02em;margin:18px 0 0;font-weight:400;}
.counter h2 em{color:var(--brass-deep);font-style:italic;}
.counter p{margin:20px 0 0;font-size:17px;line-height:1.6;color:rgba(20,21,15,.7);max-width:42ch;}
.counter .kicker{margin-top:22px;font-family:var(--serif);font-style:italic;
  font-size:clamp(18px,1.8vw,21px);color:var(--brass-deep);}
.counter img{width:100%;height:auto;border-radius:14px;
  box-shadow:0 40px 80px -44px rgba(20,21,15,.55);}
@media(max-width:860px){ .counter-grid{grid-template-columns:1fr;} }

/* ---------- DEMO ---------- */
.demo{padding-top:clamp(52px,6vw,72px);padding-bottom:clamp(56px,6.5vw,76px);
  background:radial-gradient(120% 90% at 82% -10%,rgba(203,161,92,.08),transparent 55%),var(--bg);}
.demo-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  margin-bottom:28px;flex-wrap:wrap;}
.demo-head h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,42px);margin:0;font-weight:400;}
.demo-head h2 em{color:var(--brass-lt);font-style:italic;}
.demo-head .note{font-size:14.5px;color:rgba(236,231,221,.5);max-width:44ch;}
.browser{border-radius:18px;overflow:hidden;border:1px solid rgba(203,161,92,.35);
  box-shadow:0 0 0 1px rgba(203,161,92,.1),0 60px 140px -40px rgba(0,0,0,.9);}
.browser-bar{display:flex;align-items:center;gap:16px;height:44px;padding:0 15px;
  background:linear-gradient(180deg,#1a1c23,#141519);}
.dots{display:flex;gap:8px;}
.dots i{width:11px;height:11px;border-radius:50%;display:block;}
.dots i:nth-child(1){background:#e05c4b;} .dots i:nth-child(2){background:#e6b23c;} .dots i:nth-child(3){background:#4fb15e;}
.addr{flex:1;max-width:420px;margin:0 auto;height:26px;border-radius:999px;background:rgba(0,0,0,.32);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;color:rgba(236,231,221,.6);}
.bar-spacer{width:44px;flex:0 0 44px;}
/* No max-height here. With aspect-ratio set, capping the height makes the box
   shrink its WIDTH to match (540 x 1.6 = 864 inside a 1328 frame), which left a
   dead black column and squeezed the studio. Let the ratio set the height. */
.demo-viewport{position:relative;aspect-ratio:16/10;background:#0b0c10;}
.demo-viewport img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  transition:opacity .6s ease;}
.demo-viewport.booted img.poster{opacity:0;pointer-events:none;}
.demo-viewport iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.demo-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 22px;display:flex;
  justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(0deg,rgba(10,11,15,.85),transparent);transition:opacity .5s ease;}
.demo-viewport.booted .demo-foot{opacity:0;pointer-events:none;}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chips span{font-size:12.5px;font-weight:600;border-radius:999px;padding:8px 16px;}
.chips span:first-child{color:#1a1305;background:var(--brass);}
/* the outlined chips sit over the poster; transparent they wash out on the white car */
.chips span+span{color:rgba(236,231,221,.82);border:1px solid rgba(236,231,221,.3);
  background:rgba(10,11,15,.5);backdrop-filter:blur(5px);}
.spin{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:#1a1305;
  background:var(--brass);border-radius:999px;padding:12px 22px;border:0;cursor:pointer;font-family:inherit;}

/* Phones. A 16:10 box is only ~220px tall here, too small to read the studio, and
   the base .demo-viewport rule sits above this point, so these must come after it
   to win on equal specificity. */
@media(max-width:640px){
  .demo-viewport{aspect-ratio:4/5;max-height:none;}
  .demo-viewport img.poster{object-position:50% 50%;}
  .demo-foot{flex-direction:column;align-items:stretch;gap:12px;padding:16px;}
  .chips{justify-content:center;}
  .spin{width:100%;justify-content:center;}
}

/* ---------- PROCESS ---------- */
.process h2{font-family:var(--serif);font-size:clamp(28px,3.2vw,40px);line-height:1.05;
  margin:clamp(48px,5.6vw,72px) 0 36px;font-weight:400;}
.process h2 em{color:var(--brass-lt);font-style:italic;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.step{border:1px solid var(--line-dark);border-radius:16px;overflow:hidden;background:var(--bg-2);}
.step-media{height:230px;}
.step-media img{width:100%;height:100%;object-fit:cover;}
.step-media.booked{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(80% 80% at 50% 40%,rgba(203,161,92,.18),transparent 70%),#101118;}
.step-media.booked span{font-family:var(--serif);font-size:clamp(32px,3.4vw,44px);color:var(--brass-lt);font-style:italic;}
.step-body{padding:22px 24px 26px;}
.step-body h3{margin:0;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--brass-lt);font-weight:400;}
.step-body p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:rgba(236,231,221,.6);}
@media(max-width:900px){ .steps{grid-template-columns:1fr;} .step-media{height:200px;} }

/* ---------- FEATURE BAND ---------- */
.features{background:var(--paper);color:var(--ink);
  padding-top:clamp(52px,6vw,72px);padding-bottom:clamp(52px,6vw,72px);}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.feature{padding:0 32px;border-right:1px solid var(--line-paper);}
.feature:first-child{padding-left:0;} .feature:last-child{padding-right:0;border-right:0;}
.feature h3{margin:0 0 9px;font-family:var(--serif);font-style:italic;font-size:20px;
  color:var(--brass-deep);font-weight:400;}
.feature p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(20,21,15,.65);}
@media(max-width:1040px){
  .feature-grid{grid-template-columns:1fr 1fr;gap:32px 0;}
  .feature:nth-child(2){padding-right:0;border-right:0;}
  .feature:nth-child(3){padding-left:0;}
  .feature:nth-child(4){border-right:0;}
}
@media(max-width:620px){
  .feature-grid{grid-template-columns:1fr;gap:30px;}
  .feature{padding:0;border-right:0;}
}

/* ---------- CLOSE ---------- */
.close{position:relative;overflow:hidden;background:var(--bg);}
.close-media{position:absolute;top:0;right:0;width:46%;height:100%;}
.close-media img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;}
.close-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,#0c0d11 0%,#0c0d11 52%,rgba(12,13,17,.35) 58%,transparent 64%);}
.close-inner{position:relative;z-index:2;padding-top:clamp(64px,9vw,120px);
  padding-bottom:clamp(64px,9vw,120px);}
.close-inner > *{max-width:680px;}
.close h2{font-family:var(--serif);font-size:clamp(32px,4.2vw,52px);line-height:1.06;margin:0;font-weight:400;}
.close h2 em{color:var(--brass-lt);font-style:italic;}
.close .btn-primary{margin-top:32px;padding:18px 38px;font-size:16px;font-weight:700;}
.close-trust{margin-top:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-size:13px;color:rgba(236,231,221,.45);}
.close-trust .sep{opacity:.5;}
/* block, not flex: as flex items the label and line would not shrink below their
   content width (min-width:auto) and the offer ran out under the product shot */
/* the middot separators dangle at a line break on narrow screens */
@media(max-width:520px){ .close-trust .sep{display:none;} .close-trust{gap:2px 14px;} }
.close-offer{margin-top:clamp(36px,4.4vw,52px);border-left:2px solid var(--brass);
  padding-left:18px;max-width:34ch;}
.close-offer .lbl{display:block;margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);}
.close-offer .val{display:block;font-family:var(--serif);font-size:clamp(17px,1.7vw,19px);line-height:1.4;color:rgba(236,231,221,.85);}
.close-offer .val em{color:var(--brass-lt);font-style:italic;}
@media(max-width:900px){
  .close-media{position:relative;width:100%;height:300px;}
  .close-scrim{background:linear-gradient(0deg,#0c0d11 12%,rgba(12,13,17,.55) 55%,transparent 100%);}
  .close-inner{padding-top:40px;}
}


/* ---------- FAQ ---------- */
.faq{background:var(--paper);color:var(--ink);
  padding-top:clamp(52px,6vw,76px);padding-bottom:clamp(52px,6vw,76px);}
.faq h2{font-family:var(--serif);font-size:clamp(26px,3vw,38px);line-height:1.1;
  margin:18px 0 clamp(28px,3.4vw,44px);font-weight:400;letter-spacing:-.015em;}
/* details/summary like the rest of the site. Answers stay in the DOM when
   collapsed, so crawlers and the FAQPage markup are unaffected. */
.faq-grid{display:flex;flex-direction:column;gap:10px;max-width:78ch;}
.faq-item{background:rgba(20,21,15,.035);border:1px solid var(--line-paper);
  border-radius:14px;padding:2px 22px;transition:background .25s ease;}
.faq-item[open]{background:rgba(20,21,15,.055);}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:17px 0;font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.35;
  cursor:pointer;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"";flex:0 0 auto;width:11px;height:11px;
  border-right:1.8px solid var(--brass-deep);border-bottom:1.8px solid var(--brass-deep);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease;}
.faq-item[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px);}
.faq-item summary:focus-visible{outline:2px solid var(--brass-deep);outline-offset:4px;border-radius:6px;}
.faq-item p{margin:0;padding:0 0 20px;font-size:15px;line-height:1.65;color:rgba(20,21,15,.68);max-width:66ch;}

/* ---------- PILLARS + FOOTER ---------- */
.pillars{background:var(--bg);}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);}
.pillar{padding:52px 40px 56px;border-right:1px solid var(--line-dark);}
.pillar:first-child{padding-left:0;} .pillar:last-child{padding-right:0;}
.pillar:last-child{border-right:0;}
.pillar h3{margin:0 0 11px;font-family:var(--serif);font-style:italic;font-size:23px;
  color:var(--brass-lt);font-weight:400;}
.pillar p{margin:0;font-size:15px;line-height:1.6;color:rgba(236,231,221,.6);}
@media(max-width:900px){
  .pillars-grid{grid-template-columns:1fr;}
  .pillar{border-right:0;border-bottom:1px solid var(--line-dark);padding:36px 0 40px;}
  .pillar:last-child{border-bottom:0;}
}
.pricing .wrap:first-child{padding-top:clamp(56px,7vw,96px);}
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);}
.price-lead{margin:14px 0 0;max-width:62ch;font-size:16px;line-height:1.6;color:rgba(236,231,221,.72);}
.pricing .wrap:last-child{padding-bottom:clamp(40px,5vw,64px);}
@media(max-width:900px){ .price-grid{grid-template-columns:1fr;} }
/* company name links home; inherits its surroundings so it reads as text until hovered.
   the footer's utility links take the same treatment */
.htv,.foot nav a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(236,231,221,.28);
  transition:border-color .25s ease,color .25s ease;}
.htv:hover,.foot nav a:hover{color:var(--brass-lt);border-bottom-color:var(--brass);}
.foot{padding-top:26px;padding-bottom:26px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;
  align-items:center;gap:14px 24px;flex-wrap:wrap;font-size:12.5px;color:var(--cream-faint);background:var(--bg);}
.foot nav{display:flex;gap:20px;flex-wrap:wrap;}

/* ---------- SITE NAV (header links + footer page links) ---------- */
/* Header links sit in .nav-right ahead of the note and the button. Under 900px
   they hide and the bar keeps only the brand and Book a call; every page is
   still one tap away in the footer. The note drops earlier so the row fits. */
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);}
.nav-links a{font-size:14px;font-weight:500;color:rgba(236,231,221,.78);text-decoration:none;
  white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,.55);transition:color .2s ease;}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--brass-lt);}
.nav-links a:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:4px;}
@media(max-width:1100px){ .nav-note{display:none;} }
@media(max-width:899px){ .nav-links{display:none;} }

.foot .foot-site{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:10px 22px;padding-bottom:20px;
  border-bottom:1px solid var(--line-dark);font-size:13.5px;}
.foot .foot-site a{color:rgba(236,231,221,.7);border-bottom-color:transparent;}
.foot .foot-site a:hover{color:var(--brass-lt);border-bottom-color:var(--brass);}

/* =====================================================================
   INNER PAGES
   Everything below is used by the inner pages built from
   tools/page-template.html. None of it is referenced by index.html.
   ===================================================================== */

/* ---------- PAGE HERO ---------- */
/* Inner pages have no photo hero, so the top bar carries class="stuck" from the
   start (solid background) and the page hero sits below it in normal flow. */
.page-hero{background:radial-gradient(110% 120% at 85% -20%,rgba(203,161,92,.13),transparent 55%),var(--bg);
  border-bottom:1px solid var(--line-dark);}
.page-hero .wrap{padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(52px,7vw,92px);}
.page-hero .wrap > *{max-width:780px;}
.page-hero h1{font-family:var(--serif);font-size:clamp(34px,4.6vw,58px);line-height:1.05;
  letter-spacing:-.015em;margin:20px 0 0;font-weight:400;}
.page-hero h1 em{color:var(--brass-lt);font-weight:500;font-style:italic;}
.page-hero .lead{margin:22px 0 0;font-size:clamp(16px,1.5vw,19px);line-height:1.55;max-width:58ch;
  color:rgba(236,231,221,.82);}
.page-hero .hero-cta{margin-top:30px;}

/* ---------- BREADCRUMBS ---------- */
.crumbs{margin:0 0 22px;}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;
  font-size:13px;color:var(--cream-faint);}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.6;}
.crumbs a{color:var(--cream-dim);text-decoration:none;}
.crumbs a:hover{color:var(--brass-lt);}
.crumbs [aria-current="page"]{color:var(--cream-dim);}

/* ---------- GENERIC SECTION ---------- */
/* .section is a padded band. Dark by default; add .paper to flip it to ink on
   cream, and .paper.alt for the darker cream used by the home page counter. */
.section{padding-top:clamp(52px,6vw,80px);padding-bottom:clamp(52px,6vw,80px);background:var(--bg);}
.section.paper{background:var(--paper);color:var(--ink);}
.section.paper.alt{background:var(--paper-2);}
.section-head{max-width:760px;margin-bottom:clamp(28px,3.4vw,44px);}
.section h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,42px);line-height:1.08;
  letter-spacing:-.015em;margin:18px 0 0;font-weight:400;}
.section h2 em{color:var(--brass-lt);font-style:italic;}
.section.paper h2 em{color:var(--brass-deep);}
.section-head p{margin:16px 0 0;font-size:16.5px;line-height:1.6;color:rgba(236,231,221,.72);max-width:62ch;}
.paper .section-head p{color:rgba(20,21,15,.7);}

/* ---------- PROSE (long-form text) ---------- */
.prose{max-width:70ch;font-size:17px;line-height:1.7;color:rgba(236,231,221,.82);}
.prose > :first-child{margin-top:0;}
.prose h2{font-family:var(--serif);font-size:clamp(26px,2.8vw,34px);line-height:1.12;font-weight:400;
  letter-spacing:-.01em;color:var(--cream);margin:2.2em 0 0;}
.prose h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(20px,2vw,23px);
  line-height:1.3;color:var(--brass-lt);margin:1.8em 0 0;}
.prose p,.prose ul,.prose ol,.prose blockquote{margin:1em 0 0;}
.prose ul,.prose ol{padding-left:1.3em;}
.prose li+li{margin-top:.4em;}
.prose li::marker{color:var(--brass);}
.prose strong{color:var(--cream);font-weight:600;}
.prose a{color:var(--brass-lt);text-decoration:none;border-bottom:1px solid rgba(203,161,92,.45);}
.prose a:hover{border-bottom-color:var(--brass-lt);}
.prose blockquote{border-left:2px solid var(--brass);padding-left:18px;font-family:var(--serif);
  font-style:italic;font-size:1.1em;color:var(--cream);}
.prose .source{font-size:13px;color:var(--cream-faint);}
.paper .prose{color:rgba(20,21,15,.75);}
.paper .prose h2,.paper .prose strong,
.paper .prose blockquote{color:var(--ink);}
.paper .prose h3,.paper .prose a{color:var(--brass-deep);}
.paper .prose li::marker{color:var(--brass-deep);}
.paper .prose .source{color:rgba(20,21,15,.5);}

/* ---------- COMPARISON TABLE ---------- */
/* Always wrap the table in .table-scroll: on a phone it scrolls sideways inside
   its own box instead of widening the page. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-dark);
  border-radius:14px;}
.compare-table{width:100%;min-width:620px;border-collapse:collapse;font-size:15px;line-height:1.45;}
.compare-table caption{caption-side:bottom;text-align:left;padding:12px 18px;font-size:13px;color:var(--cream-faint);}
.compare-table th,.compare-table td{padding:14px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-dark);}
.compare-table thead th{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-dim);background:var(--bg-2);}
.compare-table tbody th{font-weight:600;color:var(--cream);}
.compare-table td{color:rgba(236,231,221,.72);}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:0;}
.compare-table .us{background:rgba(203,161,92,.08);color:var(--cream);}
.compare-table thead .us{color:var(--brass-lt);}
.compare-table .yes{color:var(--brass-lt);font-weight:600;}
.compare-table .no{color:var(--cream-faint);}
.paper .table-scroll{border-color:var(--line-paper);}
.paper .compare-table th,.paper .compare-table td{border-bottom-color:var(--line-paper);}
.paper .compare-table thead th{background:rgba(20,21,15,.05);color:rgba(20,21,15,.6);}
.paper .compare-table tbody th{color:var(--ink);}
.paper .compare-table td{color:rgba(20,21,15,.72);}
.paper .compare-table .us{background:rgba(203,161,92,.16);color:var(--ink);}
.paper .compare-table thead .us,
.paper .compare-table .yes{color:var(--brass-deep);}
.paper .compare-table .no,
.paper .compare-table caption{color:rgba(20,21,15,.5);}

/* ---------- RELATED PAGES ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.card{display:block;padding:22px 24px 24px;border:1px solid var(--line-dark);border-radius:16px;
  background:var(--bg-2);color:var(--cream);text-decoration:none;
  transition:border-color .25s ease,transform .25s cubic-bezier(.22,1,.36,1);}
.card:hover{border-color:rgba(203,161,92,.55);transform:translateY(-2px);}
.card h3{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:19px;color:var(--brass-lt);}
.card p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:rgba(236,231,221,.6);}
@media(max-width:900px){ .card-grid{grid-template-columns:1fr;} }

/* ---------- CLOSING CTA BAND ---------- */
.cta-band{background:radial-gradient(90% 140% at 100% 0%,rgba(203,161,92,.14),transparent 60%),var(--bg);
  border-top:1px solid var(--line-dark);}
.cta-band .wrap{padding-top:clamp(60px,8vw,108px);padding-bottom:clamp(60px,8vw,108px);}
.cta-band .wrap > *{max-width:680px;}
.cta-band h2{font-family:var(--serif);font-size:clamp(30px,4vw,48px);line-height:1.06;margin:0;font-weight:400;}
.cta-band h2 em{color:var(--brass-lt);font-style:italic;}
.cta-band p{margin:18px 0 0;font-size:16.5px;line-height:1.6;color:rgba(236,231,221,.72);max-width:54ch;}
.cta-band .btn-primary{margin-top:30px;padding:18px 38px;font-size:16px;font-weight:700;}