/* =====================================================================
   demo/demo.css  ·  Style-preview engine
   Version 2.0 · 2026-06-04 · per-industry content, work strip, animated
   calculator, scroll indicator, scroll reveals, working mobile menu.
   ---------------------------------------------------------------------
   One shared layout (markup in content.js), themed 21 ways. The base
   below is driven entirely by CSS variables; each body[data-style="..."]
   block swaps those variables, and a handful of special-case rules add
   effects (glass blur, gradients, neon glow, brutalist edges). No em
   dashes in copy.

   Variable contract:
     --c-bg --c-surface --c-ink --c-ink-soft --c-accent --c-on-accent
     --c-accent2 --c-border --font-display --font-body --radius --border-w
     --shadow --hero-bg --head-transform --head-weight --maxw
   ===================================================================== */

/* ---- defaults (overridden per style) ---- */
:root {
  --c-bg: #ffffff;
  --c-surface: #f6f6f4;
  --c-ink: #18181b;
  --c-ink-soft: #555;
  --c-accent: #2a27dc;
  --c-on-accent: #ffffff;
  --c-accent2: #2a27dc;
  --c-border: #e4e4e7;
  --font-display: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --radius: 12px;
  --border-w: 1px;
  --shadow: 0 18px 40px -24px rgba(0,0,0,0.35);
  --hero-bg: transparent;
  --head-transform: none;
  --head-weight: 800;
  --maxw: 1080px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* , *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--c-bg);
  color: var(--c-ink-soft);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--c-ink);
  font-weight: var(--head-weight);
  text-transform: var(--head-transform);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h1 em, h2 em { font-style: normal; color: var(--c-accent); }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

.demo-section-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }

/* in-page nav anchors land clear of the sticky preview bar */
#demo-services, #demo-work, #demo-calc, #demo-contact { scroll-margin-top: 64px; }

/* ---- preview bar ---- */
.demo-previewbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--c-ink); color: var(--c-bg);
  padding: 10px clamp(16px, 4vw, 32px);
  font-family: var(--font-body); font-size: 0.82rem;
}
.demo-pb-label strong { color: var(--c-accent2); margin-left: 4px; }
.demo-pb-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.demo-pb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-pb-back {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: color-mix(in srgb, var(--c-bg) 14%, transparent);
  color: var(--c-bg);
  border: 1px solid color-mix(in srgb, var(--c-bg) 32%, transparent);
  border-radius: var(--radius);
  padding: 6px 12px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; line-height: 1;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.demo-pb-back svg { width: 15px; height: 15px; }
.demo-pb-back:hover { background: color-mix(in srgb, var(--c-bg) 26%, transparent); border-color: var(--c-bg); }
.demo-pb-back:active { transform: translateY(1px); }
.demo-pb-actions { display: flex; align-items: center; gap: 10px; }
.demo-pb-actions a { opacity: 0.85; }
.demo-pb-actions a:hover { opacity: 1; }
.demo-pb-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-accent); color: var(--c-on-accent);
  padding: 7px 14px; border-radius: var(--radius); font-weight: 600; opacity: 1 !important;
}
.demo-pb-cta svg { width: 14px; height: 14px; }

/* ---- nav ---- */
.demo-nav { border-bottom: var(--border-w) solid var(--c-border); background: var(--c-bg); }
.demo-nav-inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: 16px clamp(20px, 5vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.demo-brand { font-family: var(--font-display); font-weight: var(--head-weight); font-size: 1.4rem; color: var(--c-ink); letter-spacing: -0.02em; }
.demo-brand-dot { color: var(--c-accent); }
.demo-navlinks { display: none; gap: 22px; }
.demo-navlinks a { color: var(--c-ink-soft); font-size: 0.92rem; font-weight: 500; }
.demo-navlinks a:hover { color: var(--c-accent); }
@media (min-width: 720px) { .demo-navlinks { display: flex; } }

/* ---- nav right cluster + mobile menu ---- */
.demo-nav { position: relative; }
.demo-nav-right { display: flex; align-items: center; gap: 10px; }
.demo-burger {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: none; cursor: pointer; color: var(--c-ink);
}
.demo-burger-box { position: relative; width: 22px; height: 14px; }
.demo-burger-box span {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease), opacity 0.2s ease, top 0.25s var(--ease);
}
.demo-burger-box span:nth-child(1) { top: 0; }
.demo-burger-box span:nth-child(2) { top: 6px; }
.demo-burger-box span:nth-child(3) { top: 12px; }
.demo-nav.menu-open .demo-burger-box span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.demo-nav.menu-open .demo-burger-box span:nth-child(2) { opacity: 0; }
.demo-nav.menu-open .demo-burger-box span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (min-width: 720px) { .demo-burger { display: none; } }
@media (max-width: 719px) {
  .demo-nav-right .demo-nav-cta { display: none; }
  .demo-nav.menu-open .demo-navlinks {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    background: var(--c-bg);
    border-bottom: var(--border-w) solid var(--c-border);
    padding: 6px clamp(20px, 5vw, 40px) 14px;
    box-shadow: var(--shadow);
  }
  .demo-nav.menu-open .demo-navlinks a {
    padding: 13px 2px; font-size: 1.02rem; color: var(--c-ink);
    border-top: 1px solid var(--c-border);
  }
  .demo-nav.menu-open .demo-navlinks a:first-child { border-top: none; }
}

/* ---- buttons ---- */
.demo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  padding: 12px 22px; border-radius: var(--radius);
  border: var(--border-w) solid transparent; cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.demo-btn svg { width: 1.05em; height: 1.05em; }
.demo-btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.demo-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.demo-btn--ghost { border-color: var(--c-border); color: var(--c-ink); background: transparent; }
.demo-btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }
.demo-nav-cta { padding: 9px 18px; font-size: 0.85rem; }
/* pressed feedback on every interactive control (focus is the global :focus-visible ring) */
.demo-btn:active { transform: translateY(1px); box-shadow: none; }
.demo-calc-cta:active, .demo-calc-opt:active, .demo-calc-addon:active, .demo-variant-btn:active { transform: translateY(1px); }

/* ---- hero ---- */
.demo-hero { background: var(--hero-bg); padding: clamp(56px, 9vw, 104px) 0; position: relative; }
.demo-hero-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.demo-eyebrow {
  display: inline-block; font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-accent); margin-bottom: 18px;
}
.demo-h1 {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  color: var(--c-ink); max-width: 16ch; margin-bottom: 22px;
}
.demo-lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--c-ink-soft); max-width: 54ch; margin-bottom: 32px; line-height: 1.6; }
.demo-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- stats ---- */
.demo-stats { border-block: var(--border-w) solid var(--c-border); background: var(--c-surface); }
.demo-stats-inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: clamp(28px, 5vw, 48px) clamp(20px, 5vw, 40px);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px;
}
@media (min-width: 720px) { .demo-stats-inner { grid-template-columns: repeat(4, 1fr); } }
.demo-stat b { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--head-weight); color: var(--c-accent); line-height: 1; letter-spacing: -0.03em; }
.demo-stat span { font-size: 0.82rem; color: var(--c-ink-soft); margin-top: 8px; display: block; }

/* ---- sections ---- */
.demo-services, .demo-quote, .demo-ctaband { padding: clamp(56px, 9vw, 100px) 0; }
.demo-kicker { display: inline-block; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px; }
.demo-h2 { font-size: clamp(1.9rem, 4vw, 3rem); color: var(--c-ink); margin-bottom: 14px; }
.demo-section-lede { font-size: 1.08rem; color: var(--c-ink-soft); max-width: 52ch; margin-bottom: 44px; }

/* ---- service cards ---- */
.demo-cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .demo-cards { grid-template-columns: repeat(3, 1fr); } }
.demo-card {
  background: var(--c-surface);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.demo-card:hover { transform: translateY(-4px); }
.demo-card-ico {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: var(--radius);
  background: var(--c-accent); color: var(--c-on-accent); margin-bottom: 18px;
}
.demo-card-ico svg { width: 26px; height: 26px; }
.demo-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.demo-card p { font-size: 0.97rem; color: var(--c-ink-soft); line-height: 1.6; }

/* ---- quote ---- */
.demo-quote { background: var(--c-surface); text-align: center; }
.demo-stars { display: inline-flex; gap: 4px; color: var(--c-accent2); margin-bottom: 22px; }
.demo-stars svg { width: 22px; height: 22px; }
.demo-quote blockquote {
  font-family: var(--font-display); font-weight: var(--head-weight);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem); color: var(--c-ink);
  line-height: 1.25; letter-spacing: -0.02em; max-width: 22ch; margin: 0 auto 22px;
}
.demo-quote cite { font-style: normal; font-size: 0.9rem; color: var(--c-ink-soft); }

/* ---- cta band ---- */
.demo-ctaband { text-align: center; }
.demo-ctaband .demo-section-lede { margin-inline: auto; }

/* ---- footer ---- */
.demo-footer { border-top: var(--border-w) solid var(--c-border); background: var(--c-bg); padding: 40px 0; }
.demo-footer-inner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.demo-foot-note { font-size: 0.82rem; color: var(--c-ink-soft); }
.demo-foot-note a { color: var(--c-accent); border-bottom: 1px solid var(--c-accent); }
/* subtle authorship signature: a quiet line, not a legal notice */
.demo-foot-sign {
  flex-basis: 100%;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--c-border);
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-ink-soft); opacity: 0.62;
}

/* =====================================================================
   THEMES
   ===================================================================== */

/* 1. Editorial Luxe (dark navy + gold, serif) */
body[data-style="editorial-luxe"] {
  --c-bg: #0a1628; --c-surface: #0f1f3d; --c-ink: #ffffff; --c-ink-soft: rgba(255,255,255,0.66);
  --c-accent: #c9a84c; --c-on-accent: #0a1628; --c-accent2: #c9a84c; --c-border: rgba(255,255,255,0.14);
  --font-display: "Playfair Display", Georgia, serif; --font-body: "Inter", system-ui, sans-serif;
  --radius: 8px; --border-w: 1px; --shadow: 0 30px 60px -30px rgba(0,0,0,0.7); --head-weight: 700;
}
body[data-style="editorial-luxe"] h1 em, body[data-style="editorial-luxe"] h2 em { font-style: italic; }

/* 2. Pressroom Bold (paper + electric + lime, this site) */
body[data-style="pressroom-bold"] {
  --c-bg: #f3efe5; --c-surface: #fbfaf5; --c-ink: #17150f; --c-ink-soft: #46423a;
  --c-accent: #2a27dc; --c-on-accent: #ffffff; --c-accent2: #d4f53d; --c-border: #17150f;
  --font-display: "Bricolage Grotesque", sans-serif; --font-body: "Space Grotesk", sans-serif;
  --radius: 10px; --border-w: 2px; --shadow: 5px 5px 0 #17150f; --head-weight: 800;
}
body[data-style="pressroom-bold"] .demo-btn--primary:hover,
body[data-style="pressroom-bold"] .demo-card:hover { transform: translate(-3px,-3px); }
/* this site's own signature: emphasised words sit on an acid-lime mark, and the
   review stars use the electric accent so they stay legible on warm paper */
body[data-style="pressroom-bold"] .demo-h1 em,
body[data-style="pressroom-bold"] .demo-h2 em {
  color: var(--c-ink); background: var(--c-accent2);
  padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
body[data-style="pressroom-bold"] .demo-stars { color: var(--c-accent); }

/* 3. Warm Minimal (sage + stone, airy) */
body[data-style="warm-minimal"] {
  --c-bg: #eef1ee; --c-surface: #ffffff; --c-ink: #27302b; --c-ink-soft: #5b7065;
  --c-accent: #3d564a; --c-on-accent: #eef1ee; --c-accent2: #8a9b91; --c-border: #d7ddd9;
  --font-display: "Hanken Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --radius: 16px; --border-w: 1px; --shadow: 0 24px 50px -34px rgba(39,48,43,0.3); --head-weight: 600;
}

/* 4. Dark Tech (ink + mint, mono accents) */
body[data-style="dark-tech"] {
  --c-bg: #0b0f17; --c-surface: #121826; --c-ink: #e7eefc; --c-ink-soft: #8aa0c0;
  --c-accent: #2bd4b0; --c-on-accent: #06140f; --c-accent2: #6366f1; --c-border: #1f2a3d;
  --font-display: "Space Grotesk", sans-serif; --font-body: "Inter", system-ui, sans-serif;
  --radius: 12px; --border-w: 1px; --shadow: 0 30px 60px -30px rgba(0,0,0,0.7); --head-weight: 700;
}
body[data-style="dark-tech"] .demo-eyebrow, body[data-style="dark-tech"] .demo-kicker { font-family: "JetBrains Mono", monospace; text-transform: none; }
body[data-style="dark-tech"] .demo-eyebrow::before { content: "// "; }

/* 5. Playful Pop (bright, rounded) */
body[data-style="playful-pop"] {
  --c-bg: #fff7e6; --c-surface: #ffffff; --c-ink: #16140f; --c-ink-soft: #5b5647;
  --c-accent: #7048e8; --c-on-accent: #ffffff; --c-accent2: #ffb400; --c-border: #16140f;
  --font-display: "Fredoka", system-ui, sans-serif; --font-body: "Nunito", system-ui, sans-serif;
  --radius: 22px; --border-w: 2.5px; --shadow: 5px 5px 0 #16140f; --head-weight: 700;
}
body[data-style="playful-pop"] .demo-btn { border-radius: 999px; }
body[data-style="playful-pop"] .demo-card-ico { background: var(--c-accent2); color: #16140f; }
body[data-style="playful-pop"] .demo-btn--primary:hover, body[data-style="playful-pop"] .demo-card:hover { transform: translate(-3px,-3px); }

/* 6. Classic Trade (blue + white, dependable) */
body[data-style="classic-trade"] {
  --c-bg: #ffffff; --c-surface: #f4f7fb; --c-ink: #13243a; --c-ink-soft: #4a5b70;
  --c-accent: #1b5fc4; --c-on-accent: #ffffff; --c-accent2: #1b5fc4; --c-border: #d4dde8;
  --font-display: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
  --radius: 8px; --border-w: 1px; --shadow: 0 20px 44px -28px rgba(19,36,58,0.4); --head-weight: 800;
}

/* 7. Mono Brutalist (black/white + orange, stark) */
body[data-style="mono-brutalist"] {
  --c-bg: #f4f4f0; --c-surface: #ffffff; --c-ink: #000000; --c-ink-soft: #333333;
  --c-accent: #ff4d00; --c-on-accent: #ffffff; --c-accent2: #000000; --c-border: #000000;
  --font-display: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif;
  --radius: 0px; --border-w: 3px; --shadow: 6px 6px 0 #000000; --head-transform: uppercase; --head-weight: 800;
}
body[data-style="mono-brutalist"] .demo-eyebrow, body[data-style="mono-brutalist"] .demo-kicker { font-family: "JetBrains Mono", monospace; color: var(--c-ink); }
body[data-style="mono-brutalist"] .demo-btn--primary:hover, body[data-style="mono-brutalist"] .demo-card:hover { transform: translate(-3px,-3px); }
body[data-style="mono-brutalist"] .demo-card-ico { background: #000; }

/* 8. Soft Boutique (clay + cream, elegant serif) */
body[data-style="soft-boutique"] {
  --c-bg: #f6ebe4; --c-surface: #fbf5f0; --c-ink: #5a4334; --c-ink-soft: #9c7c66;
  --c-accent: #b08968; --c-on-accent: #ffffff; --c-accent2: #c9a98c; --c-border: #e3d3c6;
  --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Jost", system-ui, sans-serif;
  --radius: 18px; --border-w: 1px; --shadow: 0 26px 54px -34px rgba(90,67,52,0.35); --head-weight: 600;
}
body[data-style="soft-boutique"] .demo-h1, body[data-style="soft-boutique"] .demo-quote blockquote { font-weight: 500; }
body[data-style="soft-boutique"] .demo-btn { border-radius: 999px; }
body[data-style="soft-boutique"] h1 em, body[data-style="soft-boutique"] h2 em { font-style: italic; }

/* 9. Coastal Calm (sky + sand, airy) */
body[data-style="coastal-calm"] {
  --c-bg: #eef5f7; --c-surface: #ffffff; --c-ink: #16384a; --c-ink-soft: #466b78;
  --c-accent: #2b8aa6; --c-on-accent: #ffffff; --c-accent2: #d8b88c; --c-border: #cfe0e6;
  --font-display: "Poppins", system-ui, sans-serif; --font-body: "Poppins", system-ui, sans-serif;
  --radius: 16px; --border-w: 1px; --shadow: 0 26px 54px -34px rgba(22,56,74,0.3); --head-weight: 700;
}

/* 10. Industrial Strong (concrete + safety yellow) */
body[data-style="industrial-strong"] {
  --c-bg: #232323; --c-surface: #2e2e2e; --c-ink: #f2f2f2; --c-ink-soft: #a8a8a8;
  --c-accent: #ffd400; --c-on-accent: #1a1a1a; --c-accent2: #ffd400; --c-border: #444444;
  --font-display: "Oswald", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
  --radius: 2px; --border-w: 2px; --shadow: 0 24px 50px -30px rgba(0,0,0,0.8); --head-transform: uppercase; --head-weight: 700;
}
body[data-style="industrial-strong"] .demo-h1, body[data-style="industrial-strong"] .demo-h2 { letter-spacing: 0; }

/* 11. Botanical Natural (forest + leaf, serif) */
body[data-style="botanical-natural"] {
  --c-bg: #f1f0e6; --c-surface: #ffffff; --c-ink: #20402d; --c-ink-soft: #4f6b58;
  --c-accent: #3a6b4a; --c-on-accent: #f1f0e6; --c-accent2: #aabf5a; --c-border: #dcdac9;
  --font-display: "Fraunces", Georgia, serif; --font-body: "Mulish", system-ui, sans-serif;
  --radius: 16px; --border-w: 1px; --shadow: 0 26px 54px -34px rgba(32,64,45,0.3); --head-weight: 600;
}
body[data-style="botanical-natural"] h1 em, body[data-style="botanical-natural"] h2 em { font-style: italic; }

/* 12. Vibrant Gradient (purple to amber) */
body[data-style="vibrant-gradient"] {
  --c-bg: #faf8ff; --c-surface: #ffffff; --c-ink: #2b1b4d; --c-ink-soft: #6b5b8a;
  --c-accent: #7c3aed; --c-on-accent: #ffffff; --c-accent2: #ec4899; --c-border: #ece5f7;
  --font-display: "Sora", system-ui, sans-serif; --font-body: "Sora", system-ui, sans-serif;
  --radius: 18px; --border-w: 1px; --shadow: 0 24px 50px -28px rgba(124,58,237,0.4); --head-weight: 700;
  --hero-bg: linear-gradient(135deg, #ede9fe, #fce7f3 55%, #ffedd5);
}
body[data-style="vibrant-gradient"] .demo-btn--primary { background: linear-gradient(135deg, #7c3aed, #ec4899); border: none; }
body[data-style="vibrant-gradient"] .demo-card-ico { background: linear-gradient(135deg, #7c3aed, #ec4899); }
body[data-style="vibrant-gradient"] .demo-stat b, body[data-style="vibrant-gradient"] .demo-h1 em {
  background: linear-gradient(135deg, #7c3aed, #ec4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* 13. Glass Frost (pastel gradient + frosted panels) */
body[data-style="glass-frost"] {
  --c-bg: #eaf0ff; --c-surface: rgba(255,255,255,0.55); --c-ink: #2b2350; --c-ink-soft: #5b4b8a;
  --c-accent: #6d5bd0; --c-on-accent: #ffffff; --c-accent2: #ec4899; --c-border: rgba(255,255,255,0.7);
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --radius: 20px; --border-w: 1px; --shadow: 0 30px 60px -30px rgba(60,40,120,0.35); --head-weight: 700;
  --hero-bg: linear-gradient(135deg, #c7d2fe, #fbcfe8 55%, #bbf7d0);
}
body[data-style="glass-frost"] { background: linear-gradient(160deg, #e0e7ff, #fbe8f3 45%, #d6f5e3); }
body[data-style="glass-frost"] .demo-nav, body[data-style="glass-frost"] .demo-stats,
body[data-style="glass-frost"] .demo-quote, body[data-style="glass-frost"] .demo-card,
body[data-style="glass-frost"] .demo-footer {
  background: rgba(255,255,255,0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body[data-style="glass-frost"] .demo-card { border-color: rgba(255,255,255,0.8); }

/* 14. Newsprint Editorial (paper + red, serif) */
body[data-style="newsprint-editorial"] {
  --c-bg: #f6f2e9; --c-surface: #fffdf8; --c-ink: #16140f; --c-ink-soft: #57534a;
  --c-accent: #b23b2e; --c-on-accent: #ffffff; --c-accent2: #b23b2e; --c-border: #ddd2bd;
  --font-display: "Lora", Georgia, serif; --font-body: "Lora", Georgia, serif;
  --radius: 2px; --border-w: 1px; --shadow: none; --head-weight: 700;
}
body[data-style="newsprint-editorial"] .demo-eyebrow, body[data-style="newsprint-editorial"] .demo-kicker { font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1rem; }

/* 15. Neon Night (black + neon glow) */
body[data-style="neon-night"] {
  --c-bg: #0a0a14; --c-surface: #14141f; --c-ink: #ffffff; --c-ink-soft: #9a9ab5;
  --c-accent: #ff2e88; --c-on-accent: #ffffff; --c-accent2: #22d3ee; --c-border: #2a2a3d;
  --font-display: "Sora", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
  --radius: 12px; --border-w: 1px; --shadow: 0 0 40px -8px rgba(255,46,136,0.5); --head-weight: 700;
}
body[data-style="neon-night"] .demo-h1 em { color: var(--c-accent2); text-shadow: 0 0 18px rgba(34,211,238,0.7); }
body[data-style="neon-night"] .demo-h1 { text-shadow: 0 0 22px rgba(255,46,136,0.35); }
body[data-style="neon-night"] .demo-eyebrow, body[data-style="neon-night"] .demo-kicker { font-family: "JetBrains Mono", monospace; text-transform: none; }
body[data-style="neon-night"] .demo-btn--primary { box-shadow: 0 0 24px -4px rgba(255,46,136,0.7); }
body[data-style="neon-night"] .demo-card-ico { box-shadow: 0 0 24px -6px rgba(255,46,136,0.7); }

/* ---- layout variant switcher (preview bar) ---- */
.demo-variants { display: flex; align-items: center; gap: 6px; }
.demo-variants-label { font-size: 0.72rem; opacity: 0.7; margin-right: 2px; }
.demo-variant-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 5px;
  font-size: 0.73rem; font-weight: 700; font-family: inherit;
  border: 1px solid color-mix(in srgb, var(--c-bg) 42%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--c-bg) 78%, transparent);
  cursor: pointer; transition: all 0.15s ease; line-height: 1;
}
.demo-variant-btn.active,
.demo-variant-btn[aria-pressed="true"] { background: var(--c-bg); border-color: var(--c-bg); color: var(--c-ink); }
.demo-variant-btn:hover:not(.active) { border-color: var(--c-bg); color: var(--c-bg); }

/* ---- hero layout variants ---- */
.demo-hero-main { width: 100%; }
.demo-hero-aside { display: none; }

/* variant B: split hero with side stat panel */
body[data-variant="b"] .demo-hero-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
body[data-variant="b"] .demo-hero-aside {
  display: flex; flex-direction: column; gap: 16px;
}
body[data-variant="b"] .demo-hero-stat {
  background: var(--c-surface);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  padding: 18px 22px;
}
body[data-variant="b"] .demo-hero-stat b {
  display: block; font-family: var(--font-display); font-size: 1.9rem;
  font-weight: var(--head-weight); color: var(--c-accent); line-height: 1; letter-spacing: -0.03em;
}
body[data-variant="b"] .demo-hero-stat span { font-size: 0.82rem; color: var(--c-ink-soft); margin-top: 4px; display: block; }
@media (max-width: 720px) {
  body[data-variant="b"] .demo-hero-inner { grid-template-columns: 1fr; }
  body[data-variant="b"] .demo-hero-aside { display: none; }
}

/* variant C: oversized centered magazine hero */
body[data-variant="c"] .demo-hero {
  text-align: center;
  padding: clamp(80px, 14vw, 160px) 0;
  border-bottom: var(--border-w) solid var(--c-border);
}
body[data-variant="c"] .demo-hero-inner { display: flex; flex-direction: column; align-items: center; }
body[data-variant="c"] .demo-h1 { font-size: clamp(3.2rem, 8.5vw, 7.5rem); max-width: none; }
body[data-variant="c"] .demo-lede { max-width: 44ch; margin-inline: auto; }
body[data-variant="c"] .demo-cta-row { justify-content: center; }
body[data-variant="c"] .demo-eyebrow { display: none; }
body[data-variant="c"] .demo-hero-aside { display: none; }

/* ---- interactive calculator section ---- */
.demo-calc { padding: clamp(56px, 9vw, 100px) 0; background: var(--c-surface); }
.demo-calc-grid {
  display: grid; gap: 24px; margin-top: 0;
}
@media (min-width: 860px) { .demo-calc-grid { grid-template-columns: 3fr 2fr; } }
.demo-calc-panel {
  background: var(--c-bg);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 34px);
}
.demo-calc-step-label {
  display: block; font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-accent); margin-bottom: 12px; margin-top: 22px;
}
.demo-calc-step-label:first-child { margin-top: 0; }
.demo-calc-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 4px; }
.demo-calc-opts.four { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 520px) { .demo-calc-opts.four { grid-template-columns: repeat(4, 1fr); } }
.demo-calc-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: var(--border-w) solid var(--c-border);
  border-radius: calc(var(--radius) * 0.65); padding: 10px 12px;
  font-family: var(--font-body); color: var(--c-ink-soft);
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
  min-height: 44px;
}
.demo-calc-opt:hover { border-color: var(--c-accent); color: var(--c-ink); }
.demo-calc-opt.active {
  background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent);
}
.demo-calc-opt strong { display: block; font-size: 0.88rem; font-weight: 700; color: inherit; margin-bottom: 1px; }
.demo-calc-opt small { display: block; font-size: 0.7rem; opacity: 0.75; }
.demo-calc-addons { display: grid; gap: 8px; margin-bottom: 4px; }
@media (min-width: 520px) { .demo-calc-addons { grid-template-columns: repeat(2, 1fr); } }
.demo-calc-addon {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer; text-align: left;
  background: transparent; border: var(--border-w) solid var(--c-border);
  border-radius: calc(var(--radius) * 0.65); padding: 10px 14px;
  font-family: var(--font-body); font-size: 0.88rem; color: var(--c-ink-soft);
  transition: border-color 0.16s ease, background 0.16s ease; min-height: 44px;
}
.demo-calc-addon:hover { border-color: var(--c-accent); color: var(--c-ink); }
.demo-calc-addon.active { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 9%, transparent); color: var(--c-ink); }
.demo-calc-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; min-width: 18px; border-radius: 4px;
  border: 1.5px solid var(--c-border); margin-top: 1px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.demo-calc-addon.active .demo-calc-check { background: var(--c-accent); border-color: var(--c-accent); }
.demo-calc-addon.active .demo-calc-check::after {
  content: ''; display: block; width: 9px; height: 5px;
  border-left: 2px solid var(--c-on-accent); border-bottom: 2px solid var(--c-on-accent);
  transform: rotate(-45deg) translate(1px, -1px);
}
.demo-addon-label { display: block; font-weight: 600; font-size: 0.88rem; }
.demo-calc-addon small { display: block; font-size: 0.72rem; opacity: 0.65; margin-top: 1px; }

.demo-calc-result {
  background: var(--c-accent); color: var(--c-on-accent);
  border-radius: var(--radius); padding: clamp(22px, 4vw, 34px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 280px;
}
.demo-calc-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.88; margin-bottom: 8px;
}
.demo-calc-range {
  font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--head-weight); line-height: 1.05; letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.demo-calc-note { font-size: 0.84rem; opacity: 0.92; line-height: 1.55; }
.demo-calc-items {
  list-style: none; font-size: 0.8rem; opacity: 0.9;
  margin-top: 14px; border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 12px; display: flex; flex-direction: column; gap: 5px;
}
.demo-calc-items li::before { content: '+ '; opacity: 0.6; }
.demo-calc-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--c-bg); color: var(--c-accent);
  text-align: center; padding: 14px 20px; border-radius: calc(var(--radius) * 0.75);
  font-weight: 700; font-size: 0.93rem; font-family: var(--font-body);
  cursor: pointer; text-decoration: none; transition: opacity 0.18s;
}
.demo-calc-cta svg { width: 14px; height: 14px; }
.demo-calc-cta:hover { opacity: 0.88; }
.demo-calc-demo-note {
  text-align: center; font-size: 0.8rem; color: var(--c-ink-soft);
  opacity: 0.7; margin-top: 20px; font-style: italic;
}

/* =====================================================================
   NEW THEMES (16 - 21)
   ===================================================================== */

/* 16. Luxury Marble (ivory + charcoal + gold, serif) */
body[data-style="luxury-marble"] {
  --c-bg: #f9f7f3; --c-surface: #ffffff; --c-ink: #1c1610; --c-ink-soft: #6b5e52;
  --c-accent: #c8a96a; --c-on-accent: #1c1610; --c-accent2: #c8a96a; --c-border: #e8e2d8;
  --font-display: "Playfair Display", Georgia, serif; --font-body: "Jost", system-ui, sans-serif;
  --radius: 2px; --border-w: 1px; --shadow: 0 20px 50px -30px rgba(28,22,16,0.18); --head-weight: 700;
}
body[data-style="luxury-marble"] h1 em, body[data-style="luxury-marble"] h2 em { font-style: italic; }
body[data-style="luxury-marble"] .demo-kicker, body[data-style="luxury-marble"] .demo-eyebrow { letter-spacing: 0.22em; }
body[data-style="luxury-marble"] .demo-btn { border-radius: 0; }

/* 17. Retro Craft (amber + burnt orange, vintage warmth) */
body[data-style="retro-craft"] {
  --c-bg: #f5eddf; --c-surface: #fdf7ee; --c-ink: #3b2a18; --c-ink-soft: #7a5c3c;
  --c-accent: #c8631a; --c-on-accent: #ffffff; --c-accent2: #e8a234; --c-border: #d4b590;
  --font-display: "Playfair Display", Georgia, serif; --font-body: system-ui, sans-serif;
  --radius: 6px; --border-w: 2px; --shadow: 4px 4px 0 #3b2a18; --head-weight: 700;
}
body[data-style="retro-craft"] .demo-eyebrow, body[data-style="retro-craft"] .demo-kicker { font-family: "Courier New", Courier, monospace; letter-spacing: 0.14em; }
body[data-style="retro-craft"] h1 em, body[data-style="retro-craft"] h2 em { font-style: italic; color: var(--c-accent2); }
body[data-style="retro-craft"] .demo-btn--primary:hover, body[data-style="retro-craft"] .demo-card:hover { transform: translate(-3px,-3px); }

/* 18. Neo Corporate (white + deep navy + electric blue, enterprise) */
body[data-style="neo-corporate"] {
  --c-bg: #ffffff; --c-surface: #f5f8fc; --c-ink: #0f1f3d; --c-ink-soft: #4e607a;
  --c-accent: #0043d4; --c-on-accent: #ffffff; --c-accent2: #00b4d8; --c-border: #dde4ee;
  --font-display: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
  --radius: 6px; --border-w: 1px; --shadow: 0 16px 38px -22px rgba(15,31,61,0.28); --head-weight: 800;
}
body[data-style="neo-corporate"] .demo-stat b { color: var(--c-accent); }
body[data-style="neo-corporate"] .demo-kicker, body[data-style="neo-corporate"] .demo-eyebrow { color: var(--c-accent2); }

/* 19. Sport and Energy (black + neon yellow, athletic) */
body[data-style="sport-energy"] {
  --c-bg: #0f0f0f; --c-surface: #1a1a1a; --c-ink: #f2f2f2; --c-ink-soft: #aaaaaa;
  --c-accent: #e8f200; --c-on-accent: #0f0f0f; --c-accent2: #e8f200; --c-border: #2d2d2d;
  --font-display: "Oswald", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
  --radius: 4px; --border-w: 2px; --shadow: 0 24px 50px -20px rgba(0,0,0,0.85);
  --head-transform: uppercase; --head-weight: 700;
}
body[data-style="sport-energy"] .demo-h1 { font-size: clamp(3rem, 7.5vw, 6rem); letter-spacing: -0.03em; }
body[data-style="sport-energy"] .demo-h1 em { color: var(--c-accent); text-shadow: 0 0 30px rgba(232,242,0,0.45); font-style: normal; }
body[data-style="sport-energy"] .demo-btn--primary { box-shadow: 0 0 22px -4px rgba(232,242,0,0.55); }
body[data-style="sport-energy"] .demo-stat b { text-shadow: 0 0 12px rgba(232,242,0,0.3); }

/* 20. Aurora (teal-purple gradient, soft modern ethereal) */
body[data-style="aurora"] {
  --c-bg: #f0f4fa; --c-surface: rgba(255,255,255,0.68); --c-ink: #1a2340; --c-ink-soft: #5a6a8c;
  --c-accent: #4f6ef7; --c-on-accent: #ffffff; --c-accent2: #29d4b8; --c-border: rgba(100,130,200,0.24);
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --radius: 18px; --border-w: 1px; --shadow: 0 24px 50px -28px rgba(79,110,247,0.32); --head-weight: 700;
  --hero-bg: linear-gradient(135deg, #c7d8ff 0%, #a8f2e8 50%, #e4d0ff 100%);
}
body[data-style="aurora"] { background: linear-gradient(160deg, #e4eeff 0%, #dbf8f2 50%, #efe5ff 100%); }
body[data-style="aurora"] .demo-btn--primary { background: linear-gradient(135deg, #4f6ef7, #29d4b8); border: none; }
body[data-style="aurora"] .demo-card-ico { background: linear-gradient(135deg, #4f6ef7, #29d4b8); }
body[data-style="aurora"] .demo-nav, body[data-style="aurora"] .demo-card, body[data-style="aurora"] .demo-stats, body[data-style="aurora"] .demo-footer {
  background: rgba(255,255,255,0.58); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body[data-style="aurora"] .demo-h1 em {
  background: linear-gradient(135deg, #4f6ef7, #29d4b8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* 21. Sacred Ink (deep purple + gold, ultra premium) */
body[data-style="sacred-ink"] {
  --c-bg: #0d0b14; --c-surface: #161221; --c-ink: #f0ecff; --c-ink-soft: #9e95c0;
  --c-accent: #c8a96a; --c-on-accent: #0d0b14; --c-accent2: #c8a96a; --c-border: rgba(200,169,106,0.22);
  --font-display: "Playfair Display", Georgia, serif; --font-body: "Jost", system-ui, sans-serif;
  --radius: 4px; --border-w: 1px; --shadow: 0 30px 60px -30px rgba(0,0,0,0.9); --head-weight: 700;
}
body[data-style="sacred-ink"] h1 em, body[data-style="sacred-ink"] h2 em { font-style: italic; }
body[data-style="sacred-ink"] .demo-btn--primary { box-shadow: 0 0 30px -6px rgba(200,169,106,0.45); }
body[data-style="sacred-ink"] .demo-stat b { text-shadow: 0 0 18px rgba(200,169,106,0.35); }
body[data-style="sacred-ink"] .demo-kicker, body[data-style="sacred-ink"] .demo-eyebrow { letter-spacing: 0.2em; }

/* =====================================================================
   HERO SCROLL INDICATOR
   Absolute to the hero (not the viewport). Sits below nav/previewbar,
   fades out via .hidden when the hero scrolls away (set from JS).
   ===================================================================== */
.demo-scroll {
  position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%);
  z-index: 5;
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 999px;
  color: var(--c-ink);
  border: var(--border-w) solid var(--c-border);
  background: color-mix(in srgb, var(--c-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0.92;
  transition: opacity 0.4s ease, color 0.2s ease, border-color 0.2s ease;
  animation: demo-bob 2.4s ease-in-out infinite;
}
.demo-scroll svg { width: 20px; height: 20px; }
.demo-scroll:hover { opacity: 1; color: var(--c-accent); border-color: var(--c-accent); }
.demo-scroll:focus-visible { opacity: 1; }
.demo-scroll.hidden { opacity: 0; pointer-events: none; }
@keyframes demo-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}
@media (max-width: 480px) { .demo-scroll { display: none; } }

/* =====================================================================
   WORK / PORTFOLIO STRIP
   ===================================================================== */
.demo-work { padding: clamp(56px, 9vw, 100px) 0; background: var(--c-bg); }
.demo-work .demo-kicker { margin-top: 0; }
.demo-work-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 10px;
}
@media (min-width: 760px) { .demo-work-grid { grid-template-columns: repeat(4, 1fr); } }
.demo-work-item { display: flex; flex-direction: column; gap: 12px; }
.demo-work-item:hover { transform: translateY(-5px); }
.demo-work-thumb {
  position: relative; display: block; aspect-ratio: 4 / 5;
  border-radius: var(--radius); overflow: hidden;
  border: var(--border-w) solid var(--c-border);
  background: linear-gradient(150deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 35%, var(--c-surface)));
  box-shadow: var(--shadow);
}
.demo-work-item:nth-child(2) .demo-work-thumb { background: linear-gradient(150deg, var(--c-accent2), color-mix(in srgb, var(--c-accent2) 38%, var(--c-surface))); }
.demo-work-item:nth-child(3) .demo-work-thumb { background: linear-gradient(220deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 55%, var(--c-ink))); }
.demo-work-item:nth-child(4) .demo-work-thumb { background: linear-gradient(120deg, color-mix(in srgb, var(--c-accent2) 70%, var(--c-accent)), color-mix(in srgb, var(--c-accent) 30%, var(--c-surface))); }
.demo-work-num {
  position: absolute; left: 14px; bottom: 8px;
  font-family: var(--font-display); font-weight: var(--head-weight);
  font-size: 2.6rem; line-height: 1; letter-spacing: -0.04em;
  color: var(--c-on-accent); opacity: 0.55;
}
.demo-work-cap strong { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; color: var(--c-ink); }
.demo-work-cap small { display: block; font-size: 0.82rem; color: var(--c-ink-soft); margin-top: 2px; }

/* =====================================================================
   SCROLL REVEAL
   Uses the independent `translate` property so it never clashes with the
   `transform` used for hover lift on cards and work items.
   ===================================================================== */
.reveal { opacity: 0; translate: 0 22px; transition: opacity 0.7s var(--ease), translate 0.7s var(--ease); }
.reveal.in { opacity: 1; translate: 0 0; }

/* cards and work items keep a snappy hover (transform) AND reveal (translate) */
.demo-card, .demo-work-item {
  transition:
    transform 0.22s var(--ease),
    box-shadow 0.22s var(--ease),
    opacity 0.6s var(--ease),
    translate 0.6s var(--ease);
}
/* stagger only the reveal (opacity/translate), never the hover (transform/shadow) */
.demo-cards .demo-card:nth-child(2) { transition-delay: 0s, 0s, 0.07s, 0.07s; }
.demo-cards .demo-card:nth-child(3) { transition-delay: 0s, 0s, 0.14s, 0.14s; }
.demo-work-grid .demo-work-item:nth-child(2) { transition-delay: 0s, 0s, 0.06s, 0.06s; }
.demo-work-grid .demo-work-item:nth-child(3) { transition-delay: 0s, 0s, 0.12s, 0.12s; }
.demo-work-grid .demo-work-item:nth-child(4) { transition-delay: 0s, 0s, 0.18s, 0.18s; }

/* =====================================================================
   PER-VARIANT SECTION REFLOWS (beyond the hero)
   ===================================================================== */
/* variant B: portfolio-led, larger landscape work tiles */
body[data-variant="b"] .demo-work-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
body[data-variant="b"] .demo-work-thumb { aspect-ratio: 16 / 10; }
body[data-variant="b"] .demo-work-num { font-size: 3.2rem; }

/* variant C: magazine, centered section headers */
body[data-variant="c"] .demo-services .demo-section-inner,
body[data-variant="c"] .demo-work .demo-section-inner { text-align: center; }
body[data-variant="c"] .demo-services .demo-section-lede { margin-inline: auto; }

/* ---- stronger per-variant character (layout only, palette + fonts unchanged) ---- */

/* B: structured, portfolio-led. Denser vertical rhythm and flat cards with an
   accent rule instead of a lifted shadow, so it reads as a working portfolio. */
body[data-variant="b"] .demo-services,
body[data-variant="b"] .demo-work,
body[data-variant="b"] .demo-calc,
body[data-variant="b"] .demo-quote { padding-block: clamp(44px, 6.5vw, 78px); }
body[data-variant="b"] .demo-card { box-shadow: none; border-left: 3px solid var(--c-accent); }
body[data-variant="b"] .demo-card:hover { transform: translateY(-3px); }
body[data-variant="b"] .demo-section-lede { max-width: 60ch; }

/* C: editorial, airy. Generous rhythm, a tighter centred card column and a
   larger pull quote, so it reads like a magazine spread. */
body[data-variant="c"] .demo-services,
body[data-variant="c"] .demo-work,
body[data-variant="c"] .demo-calc,
body[data-variant="c"] .demo-quote { padding-block: clamp(72px, 11vw, 132px); }
body[data-variant="c"] .demo-cards { max-width: 1000px; margin-inline: auto; }
body[data-variant="c"] .demo-quote blockquote { font-size: clamp(1.9rem, 4.2vw, 3.1rem); max-width: 26ch; }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1 !important; translate: none !important; }
  .demo-scroll { animation: none !important; }
}