/* =========================================================================
   ROYS DIECAST — Design System
   Açık, modern, premium otomotiv teması. Mobil öncelikli.
   ========================================================================= */

:root {
  /* Renkler — açık tema */
  --bg:            #fbfbfd;
  --bg-soft:       #f4f5f7;
  --bg-card:       #ffffff;
  --ink:           #0c0e14;
  --ink-2:         #3a3f4b;
  --muted:         #6b7280;
  --line:          #e7e8ec;
  --line-2:        #eef0f3;

  /* Marka aksanı — yarış kırmızısı */
  --accent:        #e4002b;
  --accent-ink:    #b30022;
  --accent-soft:   #ffe9ec;
  --accent-glow:   rgba(228, 0, 43, .18);

  --gold:          #c8912b;

  /* Efektler */
  --radius:        18px;
  --radius-sm:     12px;
  --radius-lg:     28px;
  --shadow-sm:     0 1px 2px rgba(12,14,20,.05), 0 2px 8px rgba(12,14,20,.04);
  --shadow-md:     0 10px 30px rgba(12,14,20,.08), 0 2px 8px rgba(12,14,20,.04);
  --shadow-lg:     0 30px 60px rgba(12,14,20,.12), 0 8px 24px rgba(12,14,20,.06);
  --shadow-accent: 0 20px 45px rgba(228,0,43,.22);

  --maxw:          1180px;
  --ease:          cubic-bezier(.22,.61,.36,1);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sora", var(--font-sans);
}

/* ---- Reset / base ------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Accessible focus ring — visible only for keyboard users */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
button:focus-visible, .btn:focus-visible, a.btn:focus-visible {
  outline: 3px solid var(--accent-glow);
  outline-offset: 4px;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -.02em; margin: 0; font-weight: 700; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 650; font-size: 15px; letter-spacing: -.01em;
  padding: 14px 24px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
  white-space: nowrap; line-height: 1;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn-primary:hover { background: var(--accent-ink); transform: translateY(-2px); box-shadow: 0 24px 50px rgba(228,0,43,.3); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: #d3d5db; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-lg { padding: 17px 30px; font-size: 16px; }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; }

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,251,253,.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 14px; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: 19px; min-width: 0; flex-shrink: 1; }
.brand > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .mark {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ink), #2a2d38); color: #fff; flex: none;
  box-shadow: var(--shadow-sm);
}
.brand .mark svg { width: 20px; height: 20px; }
/* Admin-uploaded site logo — fills the whole mark tile, keeps corners rounded */
.brand-has-logo .mark { background: transparent; box-shadow: none; padding: 0; overflow: hidden; border-radius: 50%; }
.brand-logo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand b { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; min-width: 0; }
.nav-links a {
  padding: 9px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 550; color: var(--ink-2);
  transition: background .2s, color .2s; white-space: nowrap;
}
.nav-links a:hover { background: var(--bg-soft); color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; align-items: center; justify-content: center; flex: none; }
.nav-toggle svg { width: 22px; height: 22px; }

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; padding: 60px 0 40px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 620px; z-index: -1;
  background:
    radial-gradient(60% 55% at 78% 8%, var(--accent-glow), transparent 60%),
    radial-gradient(50% 50% at 12% 0%, rgba(12,14,20,.06), transparent 60%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650;
  letter-spacing: .02em; color: var(--accent-ink); background: var(--accent-soft);
  padding: 7px 13px; border-radius: 999px; margin-bottom: 20px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.hero h1 { font-size: clamp(2.3rem, 6vw, 3.7rem); font-weight: 800; letter-spacing: -.03em; }
.hero h1 .hl { color: var(--accent); }
.hero .lead { margin-top: 20px; font-size: clamp(1.02rem, 2.2vw, 1.2rem); color: var(--ink-2); max-width: 33ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; }
.hero-trust .t { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); font-weight: 550; }
.hero-trust .t svg { width: 19px; height: 19px; color: var(--accent); flex: none; }

/* Hero görsel — foto→model dönüşüm kartı */
.hero-visual { position: relative; }
.transform-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 22px; position: relative;
}
.tc-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.tc-tile { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; position: relative; border: 1px solid var(--line-2); }
.tc-tile .label { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; background: rgba(255,255,255,.9); padding: 4px 9px; border-radius: 999px; color: var(--ink-2); }
.tc-photo { background: linear-gradient(135deg, #e9edf2, #d7dde6); }
.tc-model { background: linear-gradient(135deg, #fff, #fbe9ec); }
.tc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-arrow { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-accent); }
.tc-arrow svg { width: 20px; height: 20px; }
.tc-caption { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tc-caption .badge { font-size: 12px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); padding: 6px 11px; border-radius: 999px; }
.tc-caption .meta { font-size: 13px; color: var(--muted); }
.hero-visual .float-chip {
  position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-md); padding: 11px 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;
}
.float-chip svg { width: 20px; height: 20px; color: var(--accent); }
.float-chip.fc-1 { top: -18px; right: 18px; }
.float-chip.fc-2 { bottom: -18px; left: -14px; }

/* Marka şeridi */
.marquee { border-block: 1px solid var(--line); background: var(--bg-soft); overflow: hidden; margin-top: 44px; }
.marquee .track { display: flex; gap: 46px; padding: 15px 0; white-space: nowrap; animation: scroll 26s linear infinite; }
.marquee span { font-family: var(--font-display); font-weight: 700; color: #b7bcc6; font-size: 15px; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 46px; }
.marquee span::after { content: "•"; color: var(--accent); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---- Sections ----------------------------------------------------------- */
section { position: relative; }
.section { padding: 78px 0; }
.section-head { max-width: 640px; margin: 0 auto 46px; text-align: center; }
.section-head .kicker { color: var(--accent); font-weight: 700; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; }
.section-head h2 { font-size: clamp(1.8rem, 4.5vw, 2.7rem); margin-top: 12px; }
.section-head p { margin-top: 14px; color: var(--ink-2); font-size: 1.06rem; }
.bg-soft { background: var(--bg-soft); }

/* ---- How it works ------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.step {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; box-shadow: var(--shadow-sm); position: relative; transition: transform .3s var(--ease), box-shadow .3s;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step .icon { width: 50px; height: 50px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 16px; }
.step .icon svg { width: 26px; height: 26px; }
.step .num { position: absolute; top: 20px; right: 22px; font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--line); line-height: 1; }
.step h3 { font-size: 1.14rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14.5px; }

/* ---- Packages ----------------------------------------------------------- */
.packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.pkg {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s; position: relative;
}
.pkg:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.pkg.featured {
  border-color: transparent; background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, var(--accent), #ff5b6e) border-box;
  border: 2px solid transparent; box-shadow: var(--shadow-lg); transform: translateY(-10px);
}
.pkg.featured:hover { transform: translateY(-14px); }
@media (min-width: 921px) { .pkg.featured { z-index: 2; } }
.pkg-badge {
  align-self: flex-start; font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  padding: 7px 13px; border-radius: 999px; margin-bottom: 18px; text-transform: uppercase;
  background: var(--bg-soft); color: var(--ink-2);
}
.pkg.featured .pkg-badge { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.pkg .scale-visual {
  display: flex; align-items: flex-end; gap: 8px; height: 54px; margin-bottom: 16px; color: var(--ink);
}
.pkg .scale-visual svg { height: 100%; width: auto; opacity: .9; }
.pkg h3 { font-size: 1.1rem; color: var(--muted); font-weight: 600; }
.pkg .scale { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.pkg .price { display: flex; align-items: baseline; gap: 4px; margin: 6px 0 4px; }
.pkg .price .amt { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; }
.pkg .price .cur { font-size: 1.4rem; font-weight: 700; color: var(--ink-2); }
.pkg .size-note { font-size: 13px; color: var(--muted); }
.pkg .blurb { color: var(--ink-2); font-size: 14.5px; margin: 14px 0 18px; }
.pkg ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 11px; }
.pkg ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.pkg ul li svg { width: 19px; height: 19px; color: var(--accent); flex: none; margin-top: 1px; }
.pkg .pkg-cta { margin-top: auto; }
.pkg-note { text-align: center; margin-top: 26px; color: var(--muted); font-size: 14px; }

/* ---- Gallery ------------------------------------------------------------ */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gcard {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-card);
  box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s;
}
.gcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gcard .art { aspect-ratio: 5/4; display: grid; place-items: center; position: relative; }
.gcard .art svg { width: 78%; height: auto; color: rgba(12,14,20,.82); }
.gcard .art .tag { position: absolute; top: 11px; left: 11px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.92); padding: 4px 10px; border-radius: 999px; color: var(--ink-2); z-index: 2; backdrop-filter: blur(4px); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.gcard .art.has-photo { background: #f4f4f6; }
.gcard .art img { transition: transform .5s var(--ease, ease); }
.gcard:hover .art img { transform: scale(1.04); }
.gcard .cap { padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; }
.gcard .cap b { font-size: 14.5px; }
.gcard .cap span { font-size: 12.5px; color: var(--accent-ink); font-weight: 700; }
.g1 { background: linear-gradient(135deg, #eef1f5, #dfe4ea); }
.g2 { background: linear-gradient(135deg, #fff0f2, #ffd9de); }
.g3 { background: linear-gradient(135deg, #eaf1ff, #d7e4fb); }
.g4 { background: linear-gradient(135deg, #f0f3ee, #dee7d6); }
.g5 { background: linear-gradient(135deg, #fbf2e6, #f3e2c6); }
.g6 { background: linear-gradient(135deg, #f2eefb, #e2d7f6); }
.g7 { background: linear-gradient(135deg, #e9f6f4, #cfeae4); }
.g8 { background: linear-gradient(135deg, #f6eef0, #ecd6dd); }

/* ---- Feature band ------------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feat { text-align: center; padding: 8px; }
.feat .ic { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.feat .ic svg { width: 27px; height: 27px; color: var(--accent); }
.feat h4 { font-size: 1.05rem; margin-bottom: 6px; }
.feat p { color: var(--muted); font-size: 14px; }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .25s, border-color .25s; }
.faq-item[open] { box-shadow: var(--shadow-md); border-color: #dcdee4; }
.faq-item summary { list-style: none; cursor: pointer; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 650; font-size: 1.02rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; transition: transform .3s var(--ease), background .2s; }
.faq-item summary .chev svg { width: 17px; height: 17px; }
.faq-item[open] summary .chev { transform: rotate(180deg); background: var(--accent-soft); color: var(--accent); }
.faq-item .ans { padding: 0 22px 20px; color: var(--ink-2); font-size: 15px; }

/* ---- CTA band ----------------------------------------------------------- */
.cta-band { background: linear-gradient(135deg, var(--ink), #1c1f2a); color: #fff; border-radius: var(--radius-lg); padding: 54px 40px; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 120% at 80% 0%, var(--accent-glow), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
.cta-band p { margin: 14px auto 26px; color: rgba(255,255,255,.72); max-width: 46ch; }
.cta-band .btn-ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.18); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 30px; margin-top: 20px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
.foot-brand p { color: var(--muted); font-size: 14.5px; margin-top: 14px; max-width: 34ch; }
.foot-col h5 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 14px; font-family: var(--font-sans); font-weight: 700; }
.foot-col a { display: block; padding: 6px 0; color: var(--ink-2); font-size: 14.5px; }
.foot-col a:hover { color: var(--accent); }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; background: #fff; transition: transform .2s, border-color .2s, color .2s; }
.social a:hover { transform: translateY(-2px); color: var(--accent); border-color: var(--accent); }
.social a svg { width: 20px; height: 20px; }
.foot-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; }

/* ---- Reveal animation --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-1 { transition-delay: .08s; }
.reveal-2 { transition-delay: .16s; }
.reveal-3 { transition-delay: .24s; }
.reveal-4 { transition-delay: .32s; }

/* ---- Hero blobs & float animations -------------------------------------- */
.blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.blob-1 { width: 460px; height: 460px; top: -140px; right: -80px; background: radial-gradient(circle, var(--accent-glow), transparent 70%); animation: floatBlob 14s ease-in-out infinite; }
.blob-2 { width: 380px; height: 380px; top: 120px; left: -120px; background: radial-gradient(circle, rgba(12,14,20,.08), transparent 70%); animation: floatBlob 18s ease-in-out infinite reverse; }
@keyframes floatBlob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,26px) scale(1.08); } }
.floaty { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.float-chip { animation: floaty 5s ease-in-out infinite; }
.float-chip.fc-2 { animation-delay: 1.4s; }
.hero .eyebrow .dot { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px var(--accent-glow); } 50% { box-shadow: 0 0 0 8px transparent; } }

/* ---- Language switcher -------------------------------------------------- */
.lang-switch { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 12px; font-size: 13.5px; font-weight: 650; color: var(--ink); box-shadow: var(--shadow-sm); transition: border-color .2s, transform .2s; }
.lang-btn:hover { border-color: #d3d5db; transform: translateY(-1px); }
.lang-btn .flag { font-size: 15px; line-height: 1; }
.lang-btn svg { transition: transform .25s var(--ease); }
.lang-switch.open .lang-btn svg { transform: rotate(180deg); }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: all .22s var(--ease); z-index: 120; }
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; font-size: 14.5px; font-weight: 550; color: var(--ink-2); transition: background .15s; }
.lang-menu a:hover { background: var(--bg-soft); color: var(--ink); }
.lang-menu a.active { color: var(--accent); font-weight: 650; }
.lang-menu a .flag { font-size: 17px; }
.mobile-langs { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 8px; border-bottom: 1px solid var(--line-2); }
.mobile-langs a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; }
.mobile-langs a.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- Logo marquee ------------------------------------------------------- */
.marquee { position: relative; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-soft), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg-soft), transparent); }
.marquee .track { align-items: center; }
.marquee .logo { display: inline-flex; align-items: center; color: #aab0bb; transition: color .3s, transform .3s; flex: none; }
.marquee .logo svg { height: 30px; width: auto; }
.marquee .logo:hover { color: var(--ink); transform: scale(1.06); }
.marquee:hover .track { animation-play-state: paused; }

/* ---- Live chat widget --------------------------------------------------- */
.chat-widget { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
/* WhatsApp button — small green circle above the chat FAB. */
.wa-fab {
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 24px rgba(37,211,102,.4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  position: relative;
}
.wa-fab:hover { transform: scale(1.08); background: #1eb959; box-shadow: 0 14px 30px rgba(37,211,102,.5); }
.wa-fab:active { transform: scale(.95); }
.wa-fab svg { width: 28px; height: 28px; }
/* Gentle pulse to draw the eye */
.wa-fab::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.6);
  animation: waPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
/* Chat panel is absolutely-positioned relative to the widget — this keeps it
   anchored to the bottom-right corner of the FAB stack, not both buttons. */
.chat-fab { position: relative; width: 60px; height: 60px; border-radius: 50%; border: none; background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); display: grid; place-items: center; transition: transform .3s var(--ease), background .2s; }
.chat-fab:hover { transform: scale(1.06); background: var(--accent-ink); }
.chat-fab svg { width: 27px; height: 27px; position: absolute; transition: opacity .25s, transform .25s; }
.chat-fab .i-close { opacity: 0; transform: rotate(-45deg) scale(.6); }
.chat-widget.open .chat-fab .i-chat { opacity: 0; transform: rotate(45deg) scale(.6); }
.chat-widget.open .chat-fab .i-close { opacity: 1; transform: none; }
.chat-fab-dot { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #16a34a; border: 2.5px solid #fff; }
.chat-widget.open .chat-fab-dot { display: none; }

.chat-panel { position: absolute; right: 0; bottom: 76px; width: 360px; max-width: calc(100vw - 40px); background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 120px)); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.96); transform-origin: bottom right; transition: all .3s var(--ease); }
.chat-widget.open .chat-panel { opacity: 1; visibility: visible; transform: none; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(135deg, var(--ink), #1c1f2a); color: #fff; }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; flex: none; }
.chat-avatar svg { width: 24px; height: 24px; color: #fff; }
.chat-head-txt { flex: 1; line-height: 1.3; }
.chat-head-txt b { font-family: var(--font-display); font-size: 15px; }
.chat-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.7); }
.chat-status .d { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }
.chat-status.off .d { background: #9aa3b0; }
.chat-min { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; }
.chat-min:hover { background: rgba(255,255,255,.22); }
.chat-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-soft); }
.chat-msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; word-wrap: break-word; animation: msgIn .3s var(--ease); }
/* System / notice bubbles (connecting, joined) */
.chat-msg.system {
  align-self: center; max-width: 90%; background: transparent; border: none;
  color: var(--muted); font-size: 12.5px; text-align: center; padding: 6px 10px;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.chat-msg.system.connecting {
  background: var(--bg-soft); border: 1px dashed var(--line); border-radius: 999px; padding: 8px 14px;
}
.chat-msg.system.joined {
  color: var(--accent-ink); font-weight: 600; padding: 10px 8px 4px;
}
.chat-msg.system.joined::before, .chat-msg.system.joined::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.cm-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Sender line for admin bubbles */
.cm-sender { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--accent-ink); text-transform: uppercase; margin-bottom: 4px; opacity: .8; }
/* Typing bubble */
.chat-msg.typing { padding: 8px 14px; display: inline-flex; align-items: center; gap: 8px; }
.cm-typing-name { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.cm-typing-dots { display: inline-flex; gap: 3px; }
.cm-typing-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted); display: inline-block;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.cm-typing-dots i:nth-child(1) { animation-delay: 0s; }
.cm-typing-dots i:nth-child(2) { animation-delay: .15s; }
.cm-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce { 0%,80%,100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chat-msg.bot { background: #fff; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 5px; }
.chat-msg.me { background: var(--accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.chat-input { padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.chat-name { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; margin-bottom: 8px; }
.chat-name:focus { outline: none; border-color: var(--accent); }
.chat-id-row { display: grid; grid-template-columns: 1fr 1.35fr; gap: 6px; margin-bottom: 8px; }
.chat-id-row .chat-name, .chat-id-row .chat-email { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.chat-id-row .chat-email:focus, .chat-id-row .chat-name:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.chat-id-row .chat-email.bad { border-color: var(--accent); background: var(--accent-soft); }
.chat-hint { margin-top: 8px; font-size: 12px; color: var(--accent); background: var(--accent-soft); padding: 8px 10px; border-radius: 8px; }
.chat-hint[hidden] { display: none !important; }
.chat-send-row { display: flex; gap: 8px; }
.chat-send-row input { flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 14px; }
.chat-send-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.chat-send-row button { flex: none; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--accent); color: #fff; display: grid; place-items: center; transition: background .2s, transform .2s; }
.chat-send-row button:hover { background: var(--accent-ink); transform: scale(1.05); }
.chat-send-row button svg { width: 19px; height: 19px; }

@media (max-width: 720px) {
  .chat-widget { right: 16px; bottom: 16px; }
  .chat-panel { bottom: 72px; }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- Mobile nav drawer -------------------------------------------------- */
.mobile-menu { display: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero .lead { max-width: none; }
  .hero-visual { max-width: 460px; margin-inline: auto; width: 100%; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .packages { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .pkg.featured { transform: none; order: -1; }
  .pkg.featured:hover { transform: translateY(-6px); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-cta .lang-switch { display: none; }        /* moved into mobile drawer */
  .nav-cta .btn-primary { display: none; }        /* moved into mobile drawer */
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 720px) {
  .section { padding: 58px 0; }
  .hero { padding: 34px 0 20px; }
  .hero-actions .btn { flex: 1; }
  .cta-band { padding: 40px 24px; }

  .mobile-menu {
    display: block; position: fixed; inset: 68px 0 auto 0; z-index: 90;
    background: rgba(251,251,253,.98); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
    transform: translateY(-120%); transition: transform .4s var(--ease); padding: 18px 22px 26px;
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .mobile-menu.open { transform: translateY(0); }
  .mobile-menu a { display: block; padding: 14px 8px; font-weight: 600; font-size: 1.05rem; border-bottom: 1px solid var(--line-2); }
  .mobile-menu a:last-of-type { border-bottom: none; }
  .mobile-menu .btn { margin-top: 16px; }
  .mobile-langs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
  .mobile-langs a {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 14px;
    border: 1px solid var(--line); border-radius: 999px; background: #fff; border-bottom: 1px solid var(--line);
  }
  .mobile-langs a.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
}

@media (max-width: 460px) {
  .wrap { padding-inline: 16px; }
  .nav { height: 60px; gap: 10px; }
  .brand { font-size: 17px; }
  .brand .mark { width: 30px; height: 30px; }
  .brand .mark svg { width: 17px; height: 17px; }
  .mobile-menu { inset: 60px 0 auto 0; max-height: calc(100vh - 60px); }
  .hero-trust { gap: 14px; }
  .tc-caption { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .btn { padding: 13px 20px; font-size: 14.5px; }
  .btn-lg { padding: 15px 22px; font-size: 15px; }
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.5rem !important; }
  .chat-widget { right: 14px; bottom: 14px; }
  .chat-fab { width: 54px; height: 54px; }
  .chat-fab svg { width: 24px; height: 24px; }
}

/* ---- Global overflow guards: nothing may push horizontal scroll ---- */
html, body { max-width: 100%; }
img, svg, video, iframe { max-width: 100%; height: auto; }
.wrap, section, main, footer, header { max-width: 100%; }

/* ---- Chat widget: category picker (shown before the first message) ------ */
.chat-intro { padding: 18px 16px 4px; background: #fff; }
.chat-intro-lead { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.chat-cats { display: grid; gap: 8px; }
.chat-cat {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  text-align: left; transition: border-color .18s, background .18s, transform .18s;
}
.chat-cat:hover { border-color: var(--accent); background: var(--accent-soft); }
.chat-cat:active { transform: scale(.98); }
.chat-cat .ic { font-size: 18px; flex: none; }
.chat-input[hidden] { display: none !important; }

/* =========================================================================
   ROYS DIECAST — V2 premium redesign
   Cream paper + deep navy + brass, Playfair serif for headlines.
   All new classes live under -v2 so nothing existing regresses.
   ========================================================================= */
:root {
  --paper:  #faf7f1;
  --paper-2:#f2ecdd;
  --navy:   #0a1628;
  --navy-2: #12213b;
  --brass:  #b8892c;
  --brass-2:#c8912b;
}
body { background: var(--paper); }
/* If the header sits on the paper, tint its glass accordingly */
.site-header { background: rgba(250,247,241,.78); }
:root { --maxw: 1220px; }

/* Big CTA + block variants used across the page */
.btn-xl { padding: 18px 34px; font-size: 16.5px; letter-spacing: -.01em; }
.btn.sm { padding: 10px 18px; font-size: 13px; }
.btn-primary { background: var(--accent); }

/* ---- Section shell + shared headers ------------------------------------ */
.section-v2 { padding: 90px 0; position: relative; }
.section-v2.bg-paper { background: var(--paper-2); }
.section-v2.bg-navy  { background: var(--navy); color: #eae4d3; }
.sh { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.sh .rule { display: inline-block; width: 42px; height: 2px; background: var(--brass); margin-bottom: 22px; }
.sh .rule.brass { background: var(--brass-2); }
.sh .kicker { text-transform: uppercase; letter-spacing: .22em; font-size: 11.5px; font-weight: 700; color: var(--brass); margin: 0 0 14px; }
.sh h2 {
  font-family: 'Playfair Display', 'Sora', serif;
  font-weight: 700; letter-spacing: -.015em; line-height: 1.08;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  color: var(--navy);
}
.sh .dek { margin-top: 18px; font-size: 16px; color: #4a5566; line-height: 1.65; }
.sh.light h2 { color: #f5efdc; }
.sh.light .dek { color: rgba(234,228,211,.72); }
.kicker.brass { color: var(--brass-2); text-transform: uppercase; letter-spacing: .22em; font-size: 11.5px; font-weight: 700; }

/* ============================ HERO v2 =================================== */
.hero-v2 {
  display: grid; grid-template-columns: 1.15fr 1fr;
  min-height: min(720px, 100vh);
  background: var(--navy);
  overflow: hidden;
  border-bottom: 1px solid rgba(184,137,44,.25);
}
.hero-photo {
  background-size: cover; background-position: center;
  position: relative;
  filter: contrast(1.03) saturate(1.03);
}
.hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,22,40,0) 55%, rgba(10,22,40,.55) 90%, rgba(10,22,40,.9) 100%),
              linear-gradient(180deg, rgba(10,22,40,.28), rgba(10,22,40,0) 40%);
}
.hero-panel {
  display: flex; align-items: center; padding: 60px 64px 70px;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(184,137,44,.10), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, #08111f 100%);
  color: #f5efdc; position: relative;
}
.hero-inner { max-width: 480px; }
.brass-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.brass-mark span { display: inline-block; width: 44px; height: 1px; background: var(--brass-2); }
.brass-mark::after { content: '★'; color: var(--brass-2); font-size: 11px; }
.hero-eyebrow-v2 {
  text-transform: uppercase; letter-spacing: .28em; font-size: 11.5px;
  color: var(--brass-2); font-weight: 700; margin: 0 0 26px;
}
.hero-title-v2 {
  font-family: 'Playfair Display', serif; font-weight: 700; font-style: normal;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  line-height: 1.02; letter-spacing: -.02em; color: #f5efdc;
  margin: 0;
}
.hero-title-v2 em {
  font-style: italic; color: var(--brass-2); font-weight: 700;
}
.hero-lead-v2 {
  margin: 26px 0 34px; font-size: 17px; line-height: 1.68;
  color: rgba(245,239,220,.78); max-width: 44ch;
}
.hero-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-cta-row .btn-primary { box-shadow: 0 22px 50px rgba(228,0,43,.28); }
.hero-anchor { font-size: 13.5px; color: rgba(245,239,220,.7); }
.hero-anchor b { color: #f5efdc; font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; margin-right: 6px; letter-spacing: -.01em; }
.hero-scarcity {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 40px; padding: 8px 14px 8px 10px;
  background: rgba(184,137,44,.12); border: 1px solid rgba(184,137,44,.3);
  border-radius: 999px; font-size: 12.5px; color: #ead8a4; font-weight: 600;
}
.hero-scarcity .dot-live {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse-live 1.8s infinite;
}
@keyframes pulse-live { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }

/* Marquee band — sits between hero and craft section on cream */
.marquee-band { background: var(--paper-2); border-bottom: 1px solid rgba(0,0,0,.05); padding: 26px 0; }
.marquee-band .marquee .track { animation-duration: 45s; }

/* ============================ CRAFT ===================================== */
.craft-row {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center;
  padding: 46px 0; border-bottom: 1px solid rgba(0,0,0,.06);
}
.craft-row:last-child { border-bottom: none; }
.craft-row.flipped { direction: rtl; }
.craft-row.flipped > * { direction: ltr; }
.craft-media {
  position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(10,22,40,.14), 0 4px 12px rgba(10,22,40,.06);
}
.craft-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 4s ease; }
.craft-row:hover .craft-media img { transform: scale(1.03); }
.craft-week {
  position: absolute; top: 18px; left: 18px;
  font-family: 'Playfair Display', serif; font-style: italic; font-size: 13px;
  color: #f5efdc; background: rgba(10,22,40,.6); backdrop-filter: blur(6px);
  padding: 6px 12px; border-radius: 999px; letter-spacing: .05em;
}
.craft-copy .stepno {
  font-family: 'Playfair Display', serif; font-style: italic; font-size: 15px;
  color: var(--brass); margin: 0 0 12px; letter-spacing: .05em;
}
.craft-copy h3 {
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; margin: 0 0 16px;
  color: var(--navy); letter-spacing: -.01em;
}
.craft-copy p { color: #4a5566; font-size: 16px; line-height: 1.72; }

/* ============================ COMPARE =================================== */
.compare .sh { margin-bottom: 44px; }
.cmp-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch;
  max-width: 980px; margin: 0 auto;
}
.cmp-col {
  padding: 34px 30px; border-radius: 12px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(245,239,220,.10);
}
.cmp-us  { border-color: rgba(184,137,44,.35); background: rgba(184,137,44,.06); }
.cmp-head { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; margin: 0 0 22px; color: rgba(245,239,220,.6); }
.cmp-us .cmp-head { color: var(--brass-2); }
.cmp-col ul { list-style: none; margin: 0; padding: 0; }
.cmp-col li {
  padding: 12px 0 12px 30px; position: relative;
  font-size: 15px; line-height: 1.5; color: rgba(245,239,220,.85);
  border-bottom: 1px dashed rgba(245,239,220,.08);
}
.cmp-col li:last-child { border-bottom: none; }
.cmp-them li::before {
  content: '✕'; position: absolute; left: 0; top: 12px;
  color: #ef4444; font-weight: 700; font-size: 15px;
}
.cmp-us li::before {
  content: '✓'; position: absolute; left: 0; top: 12px;
  color: var(--brass-2); font-weight: 800; font-size: 16px;
}
.cmp-vs {
  align-self: center;
  font-family: 'Playfair Display', serif; font-style: italic; font-size: 28px;
  color: var(--brass-2); letter-spacing: .04em;
  display: grid; place-items: center; padding: 0 4px;
}

/* ============================ MATERIALS ================================= */
.materials .sh { max-width: 620px; }
.mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 44px; }
.mat { text-align: left; }
.mat-ico {
  width: 46px; height: 46px; display: grid; place-items: center; color: var(--brass);
  border: 1px solid rgba(184,137,44,.35); border-radius: 8px; margin-bottom: 18px;
  background: rgba(184,137,44,.06);
}
.mat-ico svg { width: 22px; height: 22px; }
.mat h4 {
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 20px;
  color: var(--navy); margin: 0 0 10px; letter-spacing: -.01em;
}
.mat p { font-size: 14.5px; color: #4a5566; line-height: 1.65; margin: 0; }

/* ============================ PACKAGES v2 =============================== */
.pkgs .sh { max-width: 680px; }
.pkg-grid-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.pkg-v2 {
  position: relative; padding: 40px 32px 36px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 12px 26px rgba(10,22,40,.05);
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s;
}
.pkg-v2:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(10,22,40,.12); }
.pkg-v2.featured {
  background: var(--navy); color: #eae4d3;
  border-color: var(--brass); box-shadow: 0 30px 60px rgba(10,22,40,.28);
  transform: translateY(-8px);
}
.pkg-v2.featured:hover { transform: translateY(-12px); }
.pkg-ribbon {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--brass-2); color: #0a1628; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.pkg-scale { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.pkg-v2.featured .pkg-scale { color: rgba(234,228,211,.55); }
.pkg-scale span { color: var(--brass); font-weight: 700; }
.pkg-v2.featured .pkg-scale span { color: var(--brass-2); }
.pkg-name { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 30px; margin: 0 0 6px; color: var(--navy); letter-spacing: -.01em; }
.pkg-v2.featured .pkg-name { color: #f5efdc; }
.pkg-size { font-size: 13px; color: var(--muted); margin: 0 0 14px; font-style: italic; }
.pkg-v2.featured .pkg-size { color: rgba(234,228,211,.65); }
.pkg-blurb { font-size: 14.5px; color: #4a5566; line-height: 1.6; margin: 0 0 22px; }
.pkg-v2.featured .pkg-blurb { color: rgba(234,228,211,.8); }
.pkg-price { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 44px; color: var(--navy); margin: 6px 0 22px; letter-spacing: -.02em; }
.pkg-price .cur { font-size: 24px; color: var(--brass); vertical-align: super; margin-right: 4px; }
.pkg-v2.featured .pkg-price { color: #f5efdc; }
.pkg-v2.featured .pkg-price .cur { color: var(--brass-2); }
.pkg-feat { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; }
.pkg-feat li {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  font-size: 14px; color: #4a5566; line-height: 1.55;
  border-bottom: 1px solid var(--line);
}
.pkg-feat li:last-child { border-bottom: none; }
.pkg-feat li svg { width: 15px; height: 15px; color: var(--brass); flex: none; margin-top: 3px; }
.pkg-v2.featured .pkg-feat li { color: rgba(234,228,211,.85); border-color: rgba(245,239,220,.12); }
.pkg-v2.featured .pkg-feat li svg { color: var(--brass-2); }
.pkg-note { text-align: center; margin-top: 30px; color: var(--muted); font-size: 13.5px; font-style: italic; }

/* ============================ GALLERY v2 ================================ */
.gallery-v2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gcard-v2 {
  position: relative; aspect-ratio: 4/5; border-radius: 10px; overflow: hidden;
  display: block; background: #eee; text-decoration: none;
  box-shadow: 0 12px 26px rgba(10,22,40,.08);
}
.gcard-v2 img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s ease;
}
.gcard-v2:hover img { transform: scale(1.06); }
.gcard-v2::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,22,40,.75) 100%);
}
.gcard-cap {
  position: absolute; left: 18px; bottom: 16px; color: #f5efdc; z-index: 1;
}
.gcard-cap .scale {
  display: inline-block; font-size: 11px; letter-spacing: .12em; font-weight: 700;
  color: var(--brass-2); text-transform: uppercase; margin-bottom: 4px;
}
.gcard-cap b { display: block; font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; }

/* ============================ TESTIMONIALS ============================== */
.testimonials { background: var(--paper-2); }
.testimonials .sh h2 { font-style: italic; font-weight: 600; }
.tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tst {
  background: #fff; border-radius: 12px; padding: 30px;
  box-shadow: 0 8px 20px rgba(10,22,40,.06);
  border: 1px solid rgba(0,0,0,.04);
  display: flex; flex-direction: column; gap: 18px; margin: 0;
}
.tst-stars { color: var(--brass); font-size: 15px; letter-spacing: 3px; }
.tst blockquote {
  margin: 0; font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 18px; line-height: 1.55; color: var(--navy);
}
.tst figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tst-avatar {
  width: 46px; height: 46px; border-radius: 50%; background: var(--navy);
  color: var(--brass-2); font-family: 'Playfair Display', serif;
  font-weight: 700; font-size: 16px; display: grid; place-items: center; flex: none;
}
.tst-who b { display: block; font-size: 14.5px; color: var(--navy); font-weight: 600; }
.tst-who span { font-size: 12.5px; color: var(--muted); }

/* ============================ FOUNDER =================================== */
.founder { padding: 100px 0; }
.founder-grid { display: grid; grid-template-columns: 260px 1fr; gap: 60px; align-items: center; max-width: 1000px; margin: 0 auto; }
.founder-frame { position: relative; }
.founder-frame svg { width: 100%; height: auto; border-radius: 50%; box-shadow: 0 20px 40px rgba(10,22,40,.12); }
.founder-badge {
  position: absolute; bottom: 0; right: 0; background: var(--brass);
  color: #0a1628; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  padding: 6px 12px; border-radius: 999px;
}
.founder-copy .kicker { text-transform: uppercase; letter-spacing: .2em; font-size: 11.5px; color: var(--brass); font-weight: 700; margin: 0 0 12px; }
.founder-copy h2 {
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.15; letter-spacing: -.015em; color: var(--navy); margin: 0 0 22px;
}
.founder-copy p { color: #4a5566; font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.founder-copy .signature { font-family: 'Playfair Display', serif; font-style: italic; color: var(--brass); margin-top: 22px; }

/* ============================ FAQ v2 ==================================== */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item-v2 {
  border-bottom: 1px solid rgba(10,22,40,.10);
  padding: 20px 0;
}
.faq-item-v2 summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 19px;
  color: var(--navy); gap: 20px; letter-spacing: -.01em;
}
.faq-item-v2 summary::-webkit-details-marker { display: none; }
.faq-item-v2 summary svg { width: 18px; height: 18px; color: var(--brass); transition: transform .3s ease; flex: none; }
.faq-item-v2[open] summary svg { transform: rotate(180deg); }
.faq-item-v2 .ans { padding: 14px 0 4px; color: #4a5566; font-size: 15.5px; line-height: 1.72; }

/* ============================ FINAL CTA ================================= */
.finale { padding: 110px 0; }
.finale-inner {
  position: relative; text-align: center; max-width: 720px; margin: 0 auto;
  padding: 24px 28px;
}
.finale h2 {
  font-family: 'Playfair Display', serif; font-weight: 700; color: #f5efdc;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -.02em;
  margin: 18px 0 20px;
}
.finale .dek { color: rgba(245,239,220,.75); font-size: 17px; line-height: 1.65; margin: 0 auto 34px; max-width: 40ch; }
.finale .btn-xl { padding: 20px 40px; font-size: 17px; }
.finale .cta-mini { margin-top: 20px; font-size: 13px; color: rgba(245,239,220,.55); }
.brass-corner { position: absolute; width: 34px; height: 34px; border: 1px solid var(--brass-2); }
.brass-corner.tl { top: -6px; left: -6px; border-right: none; border-bottom: none; }
.brass-corner.tr { top: -6px; right: -6px; border-left: none; border-bottom: none; }
.brass-corner.bl { bottom: -6px; left: -6px; border-right: none; border-top: none; }
.brass-corner.br { bottom: -6px; right: -6px; border-left: none; border-top: none; }

/* ============================ Mobile sticky CTA ========================= */
.mob-cta {
  /* Sits above the chat FAB on mobile so we don't collide with it */
  position: fixed; left: 12px; right: 88px; bottom: 12px; z-index: 90;
  background: var(--navy); color: #f5efdc; padding: 12px 14px 12px 18px;
  border-radius: 14px; display: none; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 20px 40px rgba(10,22,40,.35), 0 0 0 1px rgba(184,137,44,.35);
  font-size: 13.5px;
}
.mob-cta b { color: var(--brass-2); font-family: 'Playfair Display', serif; font-size: 17px; margin-right: 2px; letter-spacing: -.01em; }
.mob-cta .btn { flex: none; }

/* ============================ Responsive ================================ */
@media (max-width: 980px) {
  .hero-v2 { grid-template-columns: 1fr; min-height: auto; }
  .hero-photo { min-height: 340px; }
  .hero-photo::after { background: linear-gradient(180deg, rgba(10,22,40,0) 40%, rgba(10,22,40,.7) 90%, rgba(10,22,40,.95) 100%); }
  .hero-panel { padding: 44px 26px 60px; }
  .craft-row, .craft-row.flipped { grid-template-columns: 1fr; gap: 26px; direction: ltr; padding: 34px 0; }
  .cmp-grid { grid-template-columns: 1fr; gap: 14px; }
  .cmp-vs { padding: 0; font-size: 22px; }
  .mat-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .pkg-grid-v2 { grid-template-columns: 1fr; gap: 16px; }
  .pkg-v2.featured { transform: none; }
  .pkg-v2.featured:hover { transform: translateY(-4px); }
  .gallery-v2 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tst-grid { grid-template-columns: 1fr; }
  .founder-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .founder-frame { max-width: 200px; margin: 0 auto; }
  .section-v2 { padding: 64px 0; }
  .sh { margin-bottom: 40px; }
  .mob-cta { display: flex; }
  /* leave room for sticky CTA above footer */
  .site-footer { padding-bottom: 90px; }
}
@media (max-width: 560px) {
  .hero-title-v2 { font-size: 2.2rem; }
  .hero-lead-v2 { font-size: 15.5px; }
  .hero-panel { padding: 36px 22px 50px; }
  .mat-grid { grid-template-columns: 1fr; }
  .gallery-v2 { grid-template-columns: 1fr; }
  .pkg-name { font-size: 26px; }
  .pkg-price { font-size: 38px; }
  .finale h2 { font-size: 1.8rem; }
}

/* =========================================================================
   THEME · TRACK — motorsport night, charcoal + chartreuse, condensed sans
   All rules scoped under .theme-track so nothing collides with other themes.
   ========================================================================= */
.theme-track {
  --trk-bg:      #08090c;
  --trk-bg-2:    #101216;
  --trk-line:    rgba(255,255,255,.08);
  --trk-ink:     #f5f6f2;
  --trk-mute:    #7a8087;
  --trk-accent:  #d4ff33;    /* chartreuse / racing highlight */
  --trk-accent-2:#ff2f4a;    /* pit-red */
  background: var(--trk-bg);
  color: var(--trk-ink);
  font-family: 'Inter', system-ui, sans-serif;
}
.theme-track ~ .site-footer { background: #05060a; color: rgba(245,246,242,.65); }

.theme-track .trk-mono { font-family: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace; letter-spacing: .03em; }
.theme-track .trk-label {
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: var(--trk-mute);
}
.theme-track .trk-tick { color: var(--trk-accent); margin-right: 8px; font-size: 20px; line-height: 1; vertical-align: -3px; }

/* Section wrappers */
.theme-track .trk-section { padding: 100px 0; border-top: 1px solid var(--trk-line); }
.theme-track .trk-sec-head { margin-bottom: 26px; display: flex; align-items: center; gap: 6px; }
.theme-track .trk-h2 {
  font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.02;
  color: var(--trk-ink); margin: 0 0 40px; max-width: 22ch;
  text-transform: uppercase;
}
.theme-track .trk-h2 br + * { display: block; }

/* HERO */
.theme-track .trk-hero {
  position: relative; min-height: min(760px, 100vh);
  display: flex; align-items: flex-end; overflow: hidden;
  padding: 100px 0 70px;
  background: var(--trk-bg);
}
.theme-track .trk-hero-photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: contrast(.95) saturate(.85) brightness(.55);
}
.theme-track .trk-hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,9,12,.75) 0%, rgba(8,9,12,.55) 30%, rgba(8,9,12,.4) 55%, rgba(8,9,12,.95) 100%),
    linear-gradient(90deg, rgba(8,9,12,.85) 0%, rgba(8,9,12,0) 60%);
}
.theme-track .trk-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.35'/></svg>");
  mix-blend-mode: overlay; opacity: .5;
}
.theme-track .trk-hero-inner {
  position: relative; z-index: 2; max-width: 1220px;
  margin: 0 auto; padding: 0 32px; width: 100%;
}
.theme-track .trk-timing {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--trk-mute); letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 14px; background: rgba(0,0,0,.5); border: 1px solid var(--trk-line);
  border-radius: 2px; margin-bottom: 32px;
}
.theme-track .trk-timing b { color: var(--trk-accent); font-weight: 500; }
.theme-track .trk-h1 {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(3rem, 8vw, 6.4rem); line-height: .95; letter-spacing: -.035em;
  text-transform: uppercase; margin: 0;
}
.theme-track .trk-line-1 { display: block; color: var(--trk-ink); }
.theme-track .trk-line-2 { display: block; color: var(--trk-accent); font-style: italic; }
.theme-track .trk-line-3 { display: block; color: rgba(245,246,242,.45); font-weight: 400; }
.theme-track .trk-lead {
  max-width: 44ch; margin: 34px 0 40px; font-size: 17px; line-height: 1.6;
  color: rgba(245,246,242,.72);
}
.theme-track .trk-hero-cta { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

.theme-track .trk-btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--trk-accent); color: #08090c;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13.5px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 18px 28px; border-radius: 2px; border: none; cursor: pointer;
  text-decoration: none;
  transition: transform .18s, background .18s, box-shadow .18s;
}
.theme-track .trk-btn:hover { background: #e6ff6a; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(212,255,51,.22); }
.theme-track .trk-btn-ghost { background: transparent; color: var(--trk-ink); border: 1px solid var(--trk-line); }
.theme-track .trk-btn-ghost:hover { border-color: var(--trk-accent); color: var(--trk-accent); background: transparent; box-shadow: none; }
.theme-track .trk-btn-lg { padding: 22px 36px; font-size: 14.5px; }
.theme-track .trk-arrow { font-family: ui-monospace, monospace; transition: transform .18s; }
.theme-track .trk-btn:hover .trk-arrow { transform: translateX(4px); }

.theme-track .trk-stats { display: flex; gap: 28px; }
.theme-track .trk-stats > div { display: flex; flex-direction: column; gap: 2px; }
.theme-track .trk-stats span { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--trk-mute); }
.theme-track .trk-stats b { font-size: 22px; color: var(--trk-ink); font-weight: 500; letter-spacing: .04em; }

/* SPECS */
.theme-track .trk-specs { background: var(--trk-bg-2); }
.theme-track .trk-spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--trk-line); }
.theme-track .trk-spec {
  display: grid; grid-template-columns: 60px 1fr; gap: 18px; align-items: baseline;
  padding: 26px 0 26px 4px; border-bottom: 1px solid var(--trk-line);
}
.theme-track .trk-spec:nth-child(odd) { padding-right: 32px; border-right: 1px solid var(--trk-line); }
.theme-track .trk-spec:nth-child(even) { padding-left: 32px; }
.theme-track .trk-spec-id { color: var(--trk-accent); font-size: 15px; }
.theme-track .trk-spec-body b { display: block; font-size: 12px; color: var(--trk-mute); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 4px; }
.theme-track .trk-spec-body p { margin: 0; font-size: 16.5px; color: var(--trk-ink); line-height: 1.4; }

/* GALLERY */
.theme-track .trk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.theme-track .trk-tile { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #111; text-decoration: none; }
.theme-track .trk-tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.15); transition: transform .8s ease, filter .3s; }
.theme-track .trk-tile:hover img { filter: grayscale(0); transform: scale(1.05); }
.theme-track .trk-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.9) 100%);
}
.theme-track .trk-tile-cap {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1;
  display: flex; align-items: baseline; gap: 8px; color: var(--trk-ink);
}
.theme-track .trk-tile-cap b { font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; flex: 1; }
.theme-track .trk-tile-cap .trk-mono { color: var(--trk-accent); font-size: 12px; }
.theme-track .trk-tile-cap .trk-scale { font-size: 10.5px; color: rgba(245,246,242,.6); letter-spacing: .1em; }

/* PODIUM */
.theme-track .trk-podium-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--trk-line); }
.theme-track .trk-tier {
  padding: 42px 32px; background: var(--trk-bg);
  display: flex; flex-direction: column; gap: 16px;
}
.theme-track .trk-tier.pole { background: var(--trk-bg-2); border-top: 3px solid var(--trk-accent); }
.theme-track .trk-tier header { display: flex; align-items: center; justify-content: space-between; }
.theme-track .trk-pos { font-size: 42px; font-weight: 700; color: var(--trk-accent); letter-spacing: -.02em; }
.theme-track .trk-scale-tag { font-size: 12px; color: var(--trk-mute); letter-spacing: .16em; text-transform: uppercase; }
.theme-track .trk-tier h3 { font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 800; margin: 0; text-transform: uppercase; letter-spacing: -.01em; }
.theme-track .trk-tier-blurb { color: rgba(245,246,242,.65); font-size: 14px; margin: 0; line-height: 1.55; }
.theme-track .trk-tier-price { font-size: 44px; font-weight: 500; color: var(--trk-ink); }
.theme-track .trk-tier.pole .trk-tier-price { color: var(--trk-accent); }
.theme-track .trk-tier ul { list-style: none; margin: 8px 0 0; padding: 0; flex: 1; }
.theme-track .trk-tier li {
  padding: 10px 0; font-size: 13.5px; color: rgba(245,246,242,.75);
  border-bottom: 1px dashed var(--trk-line); position: relative; padding-left: 20px;
}
.theme-track .trk-tier li::before { content: '›'; position: absolute; left: 0; color: var(--trk-accent); }
.theme-track .trk-tier .trk-btn { margin-top: 12px; align-self: flex-start; }

/* FAQ */
.theme-track .trk-faq { background: var(--trk-bg-2); }
.theme-track .trk-faq-list { max-width: 860px; margin: 32px auto 0; }
.theme-track .trk-faq-item { border-top: 1px solid var(--trk-line); padding: 22px 0; }
.theme-track .trk-faq-item:last-child { border-bottom: 1px solid var(--trk-line); }
.theme-track .trk-faq-item summary {
  cursor: pointer; list-style: none; display: grid; grid-template-columns: 60px 1fr 30px; align-items: baseline;
  gap: 16px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px; color: var(--trk-ink);
  letter-spacing: -.01em;
}
.theme-track .trk-faq-item summary::-webkit-details-marker { display: none; }
.theme-track .trk-faq-no { color: var(--trk-accent); font-size: 14px; }
.theme-track .trk-faq-plus { color: var(--trk-accent); font-size: 22px; text-align: right; transition: transform .3s; }
.theme-track .trk-faq-item[open] .trk-faq-plus { transform: rotate(45deg); }
.theme-track .trk-faq-a { padding: 12px 0 0 76px; color: rgba(245,246,242,.7); font-size: 15px; line-height: 1.65; }

/* CTA */
.theme-track .trk-cta { background: var(--trk-accent); color: #08090c; padding: 100px 0; }
.theme-track .trk-cta .trk-cta-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.theme-track .trk-cta .trk-label { color: #08090c; opacity: .6; }
.theme-track .trk-cta .trk-tick { color: var(--trk-accent-2); }
.theme-track .trk-cta .trk-h2 { color: #08090c; margin: 20px auto 22px; max-width: none; }
.theme-track .trk-cta-sub { color: rgba(8,9,12,.7); font-size: 16px; margin: 0 auto 34px; max-width: 46ch; line-height: 1.6; }
.theme-track .trk-cta .trk-btn { background: #08090c; color: var(--trk-accent); }
.theme-track .trk-cta .trk-btn:hover { background: #000; color: #e6ff6a; box-shadow: 0 12px 30px rgba(0,0,0,.35); }

@media (max-width: 900px) {
  .theme-track .trk-spec-grid { grid-template-columns: 1fr; }
  .theme-track .trk-spec:nth-child(odd) { padding-right: 4px; border-right: none; }
  .theme-track .trk-spec:nth-child(even) { padding-left: 4px; }
  .theme-track .trk-grid { grid-template-columns: repeat(2, 1fr); }
  .theme-track .trk-podium-grid { grid-template-columns: 1fr; }
  .theme-track .trk-hero-cta { flex-direction: column; align-items: flex-start; gap: 22px; }
  .theme-track .trk-stats { flex-wrap: wrap; gap: 20px; }
  .theme-track .trk-section { padding: 64px 0; }
  .theme-track .trk-hero { padding: 90px 0 50px; }
  .theme-track .trk-hero-inner { padding: 0 22px; }
}

/* =========================================================================
   THEME · GALLERY — museum catalogue, ultra-white paper, italic serif
   ========================================================================= */
.theme-gallery {
  --gal-paper: #fdfcf9;
  --gal-ink:   #1a1a1a;
  --gal-mute:  #6d6d68;
  --gal-line:  #e8e6e0;
  --gal-accent:#8f2b20;    /* muted burgundy, used sparingly */
  background: var(--gal-paper);
  color: var(--gal-ink);
  font-family: 'Inter', sans-serif;
}
.theme-gallery ~ .site-footer { background: var(--gal-paper); color: var(--gal-mute); border-top: 1px solid var(--gal-line); }

.theme-gallery em { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; }
.theme-gallery .gal-band-k {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
  color: var(--gal-accent); letter-spacing: .06em; text-transform: none;
  display: block; margin-bottom: 24px;
}
.theme-gallery .gal-h1 {
  font-family: 'Playfair Display', serif; font-weight: 500;
  font-size: clamp(3rem, 7vw, 6.4rem); line-height: 1.0; letter-spacing: -.02em;
  color: var(--gal-ink); margin: 0;
}
.theme-gallery .gal-h1 em { color: var(--gal-accent); }
.theme-gallery .gal-h2 {
  font-family: 'Playfair Display', serif; font-weight: 500; font-style: normal;
  font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.1; letter-spacing: -.015em;
  margin: 0 0 20px;
}
.theme-gallery .gal-h2-lg { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.theme-gallery .gal-lede {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400;
  font-size: 20px; line-height: 1.55; color: var(--gal-mute); max-width: 52ch;
}
.theme-gallery .gal-k {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .16em; color: var(--gal-mute); margin-bottom: 4px;
}
.theme-gallery .gal-link {
  color: var(--gal-accent); font-weight: 500; font-size: 15px;
  border-bottom: 1px solid rgba(143,43,32,.35); transition: border-color .2s;
}
.theme-gallery .gal-link:hover { border-color: var(--gal-accent); }
.theme-gallery .gal-link-lg { font-size: 16px; }

/* HERO */
.theme-gallery .gal-hero {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px;
  padding: 80px 60px 100px; align-items: end;
  max-width: 1400px; margin: 0 auto;
}
.theme-gallery .gal-plate {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 18px; border-bottom: 1px solid var(--gal-line);
  margin-bottom: 46px; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gal-mute);
}
.theme-gallery .gal-plate-num { color: var(--gal-accent); font-family: 'Playfair Display', serif; font-style: italic; text-transform: none; font-size: 15px; letter-spacing: normal; }
.theme-gallery .gal-hero-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  margin-top: 60px; padding-top: 28px; border-top: 1px solid var(--gal-line);
}
.theme-gallery .gal-hero-meta b { font-size: 15.5px; font-weight: 500; color: var(--gal-ink); font-family: 'Inter', sans-serif; }
.theme-gallery .gal-hero-fig {
  margin: 0; position: relative;
}
.theme-gallery .gal-hero-fig img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  filter: grayscale(.1);
}
.theme-gallery .gal-hero-fig figcaption {
  margin-top: 14px; font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 13.5px; color: var(--gal-mute); text-align: left;
}

/* SECTIONS */
.theme-gallery .gal-section {
  padding: 120px 60px; max-width: 1400px; margin: 0 auto;
  border-top: 1px solid var(--gal-line);
}
.theme-gallery .gal-band { max-width: 640px; margin: 0 auto 80px; text-align: center; }

/* COLLECTION */
.theme-gallery .gal-collection-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 90px 60px;
}
.theme-gallery .gal-piece { margin: 0; }
.theme-gallery .gal-piece img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
  filter: grayscale(.05);
}
.theme-gallery .gal-plaque { padding: 20px 0 0; }
.theme-gallery .gal-plaque-num {
  font-family: 'Playfair Display', serif; font-style: italic; color: var(--gal-accent);
  font-size: 13px; margin-bottom: 6px;
}
.theme-gallery .gal-plaque b {
  font-family: 'Playfair Display', serif; font-weight: 500; font-size: 22px;
  color: var(--gal-ink); display: block; margin-bottom: 12px;
}
.theme-gallery .gal-plaque-meta {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--gal-mute); line-height: 1.5;
  font-family: 'Playfair Display', serif; font-style: italic;
}

/* ESSAY */
.theme-gallery .gal-essay-body { max-width: 660px; margin: 0 auto; }
.theme-gallery .gal-essay-body p {
  font-family: 'Playfair Display', serif; font-size: 20px; line-height: 1.7;
  color: var(--gal-ink); margin: 0 0 24px; font-weight: 400;
}
.theme-gallery .gal-drop {
  font-family: 'Playfair Display', serif; font-weight: 500;
  font-size: 68px; float: left; line-height: 0.85; padding: 12px 12px 0 0;
  color: var(--gal-accent);
}

/* EDITIONS */
.theme-gallery .gal-editions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.theme-gallery .gal-edition { padding: 30px 0; border-top: 1px solid var(--gal-ink); }
.theme-gallery .gal-featured { border-top-color: var(--gal-accent); border-top-width: 3px; padding-top: 28px; }
.theme-gallery .gal-ed-num { font-family: 'Playfair Display', serif; font-style: italic; font-size: 13px; color: var(--gal-mute); margin: 0 0 14px; }
.theme-gallery .gal-edition h3 { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 34px; margin: 0 0 8px; color: var(--gal-ink); letter-spacing: -.01em; }
.theme-gallery .gal-ed-size { font-family: 'Playfair Display', serif; font-style: italic; font-size: 14px; color: var(--gal-mute); margin: 0 0 20px; }
.theme-gallery .gal-ed-desc { font-size: 15px; color: var(--gal-mute); line-height: 1.65; margin: 0 0 24px; }
.theme-gallery .gal-ed-price { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 500; margin: 0 0 22px; color: var(--gal-ink); }

/* ENQUIRE */
.theme-gallery .gal-enquire { padding: 160px 60px; text-align: center; }
.theme-gallery .gal-enquire-inner { max-width: 680px; margin: 0 auto; }
.theme-gallery .gal-btn {
  display: inline-block; margin: 30px 0 20px;
  font-family: 'Playfair Display', serif; font-style: italic; font-size: 20px;
  color: var(--gal-paper); background: var(--gal-ink);
  padding: 20px 44px; text-decoration: none;
  transition: background .18s;
}
.theme-gallery .gal-btn:hover { background: var(--gal-accent); }
.theme-gallery .gal-fine { font-size: 12.5px; color: var(--gal-mute); margin-top: 16px; font-family: 'Playfair Display', serif; font-style: italic; }

@media (max-width: 980px) {
  .theme-gallery .gal-hero { grid-template-columns: 1fr; gap: 40px; padding: 60px 26px 70px; }
  .theme-gallery .gal-hero-meta { grid-template-columns: 1fr 1fr; gap: 20px; }
  .theme-gallery .gal-collection-grid { grid-template-columns: 1fr; gap: 60px; }
  .theme-gallery .gal-editions-grid { grid-template-columns: 1fr; gap: 40px; }
  .theme-gallery .gal-section { padding: 80px 26px; }
  .theme-gallery .gal-enquire { padding: 100px 26px; }
}

/* =========================================================================
   SITE-WIDE THEME OVERRIDES
   Homepage templates set their own scoped look, but the header, order form,
   chat widget and footer follow whatever `html[data-theme]` says. Each
   override block here re-skins those shared surfaces to match the theme.
   ========================================================================= */

/* --------- PREMIUM (cream / navy / brass — magazine editorial) --------- */
html[data-theme="premium"] body { background: #faf7f1; }
html[data-theme="premium"] .site-header { background: rgba(250,247,241,.82); border-bottom-color: rgba(184,137,44,.14); }
html[data-theme="premium"] .site-header.scrolled { border-bottom-color: rgba(184,137,44,.35); }
html[data-theme="premium"] .brand .mark { background: linear-gradient(135deg, #0a1628, #142943); }
html[data-theme="premium"] .brand b { color: #b8892c; }
html[data-theme="premium"] .nav-links a { color: #3a3f4b; }
html[data-theme="premium"] .nav-links a:hover { background: rgba(184,137,44,.10); color: #0a1628; }
html[data-theme="premium"] .btn-primary { background: #e4002b; }
html[data-theme="premium"] .btn-ghost { background: #fff; border-color: #e5ded0; }
html[data-theme="premium"] .site-footer { background: #0a1628; color: rgba(245,239,220,.72); border-top: 1px solid rgba(184,137,44,.2); }
html[data-theme="premium"] .site-footer .brand { color: #f5efdc; }
html[data-theme="premium"] .site-footer .brand b { color: #b8892c; }
html[data-theme="premium"] .site-footer a { color: rgba(245,239,220,.72); }
html[data-theme="premium"] .site-footer a:hover { color: #b8892c; }
/* Chat widget — brass + navy */
html[data-theme="premium"] .chat-fab { background: #0a1628; box-shadow: 0 12px 26px rgba(10,22,40,.35), 0 0 0 3px rgba(184,137,44,.35); }
html[data-theme="premium"] .chat-fab-dot { background: #b8892c; }
html[data-theme="premium"] .chat-panel { border-color: rgba(184,137,44,.25); }
html[data-theme="premium"] .chat-head { background: linear-gradient(135deg, #0a1628, #142943); color: #f5efdc; }
html[data-theme="premium"] .chat-head .chat-status.on { color: #d4e0a8; }
html[data-theme="premium"] .chat-msg.me { background: #b8892c; color: #0a1628; }
html[data-theme="premium"] .chat-send-row button { background: #b8892c; }
html[data-theme="premium"] .chat-cat:hover { border-color: #b8892c; background: rgba(184,137,44,.08); }
/* Order page */
html[data-theme="premium"] .order-shell { background: #faf7f1; }
html[data-theme="premium"] .order-card { border-color: #e5ded0; }
html[data-theme="premium"] .order-head h1 { font-family: 'Playfair Display', serif; font-weight: 700; color: #0a1628; }
html[data-theme="premium"] .step-panel h2 { font-family: 'Playfair Display', serif; font-weight: 700; color: #0a1628; }
html[data-theme="premium"] .steps-bar .node.active .dot { background: #b8892c; border-color: #b8892c; box-shadow: 0 10px 24px rgba(184,137,44,.3); }
html[data-theme="premium"] .steps-bar .node.done .dot { background: #0a1628; border-color: #0a1628; }
html[data-theme="premium"] .steps-bar .bar.done { background: #0a1628; }
html[data-theme="premium"] .pick.selected { border-color: #b8892c; background: linear-gradient(0deg, rgba(184,137,44,.08), #fff 60%); }
html[data-theme="premium"] .pick.selected .check { background: #b8892c; border-color: #b8892c; }
html[data-theme="premium"] .pick .info .b { color: #0a1628; background: rgba(184,137,44,.18); }
html[data-theme="premium"] .pkg-note { color: #6b7280; font-style: italic; }

/* --------- CLASSIC — leave the site as it originally was --------------- */
/* No overrides needed — the original CSS already renders like this. */

/* --------- TRACK (charcoal / chartreuse — motorsport dashboard) -------- */
html[data-theme="track"] body { background: #08090c; color: #f5f6f2; }
html[data-theme="track"] .site-header { background: rgba(8,9,12,.85); backdrop-filter: blur(14px); border-bottom-color: rgba(255,255,255,.06); }
html[data-theme="track"] .site-header.scrolled { border-bottom-color: rgba(212,255,51,.35); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
html[data-theme="track"] .brand { color: #f5f6f2; text-transform: uppercase; font-family: 'Inter', sans-serif; letter-spacing: -.02em; }
html[data-theme="track"] .brand .mark { background: linear-gradient(135deg, #d4ff33, #b3e015); color: #08090c; }
html[data-theme="track"] .brand .mark svg { color: #08090c; }
html[data-theme="track"] .brand b { color: #d4ff33; }
html[data-theme="track"] .nav-links a { color: #a0a5ab; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
html[data-theme="track"] .nav-links a:hover { color: #d4ff33; background: rgba(212,255,51,.08); }
html[data-theme="track"] .btn-primary { background: #d4ff33; color: #08090c; border-radius: 2px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; box-shadow: 0 12px 28px rgba(212,255,51,.28); }
html[data-theme="track"] .btn-primary:hover { background: #e6ff6a; color: #000; box-shadow: 0 16px 36px rgba(212,255,51,.4); }
html[data-theme="track"] .btn-ghost { background: transparent; color: #f5f6f2; border-color: rgba(255,255,255,.15); border-radius: 2px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
html[data-theme="track"] .btn-ghost:hover { border-color: #d4ff33; color: #d4ff33; background: transparent; box-shadow: none; }
html[data-theme="track"] .nav-toggle { background: transparent; border-color: rgba(255,255,255,.15); color: #f5f6f2; }
html[data-theme="track"] .nav-toggle svg { color: #f5f6f2; }
html[data-theme="track"] .lang-btn { background: transparent; color: #a0a5ab; border-color: rgba(255,255,255,.15); }
html[data-theme="track"] .lang-menu { background: #12141a; border-color: rgba(255,255,255,.1); }
html[data-theme="track"] .lang-menu a { color: #d0d5db; }
html[data-theme="track"] .lang-menu a:hover, html[data-theme="track"] .lang-menu a.active { background: rgba(212,255,51,.1); color: #d4ff33; }
/* Footer */
html[data-theme="track"] .site-footer { background: #05060a; color: rgba(245,246,242,.65); border-top: 1px solid rgba(212,255,51,.15); }
html[data-theme="track"] .site-footer .brand { color: #f5f6f2; }
html[data-theme="track"] .site-footer .brand b { color: #d4ff33; }
html[data-theme="track"] .site-footer a { color: rgba(245,246,242,.65); }
html[data-theme="track"] .site-footer a:hover { color: #d4ff33; }
html[data-theme="track"] .site-footer h4 { color: #d4ff33; letter-spacing: .18em; text-transform: uppercase; font-size: 11px; }
/* Chat widget */
html[data-theme="track"] .chat-fab { background: #d4ff33; color: #08090c; box-shadow: 0 12px 26px rgba(212,255,51,.35); }
html[data-theme="track"] .chat-fab svg { color: #08090c; }
html[data-theme="track"] .chat-fab-dot { background: #ff2f4a; box-shadow: 0 0 0 3px #08090c; }
html[data-theme="track"] .chat-panel { background: #12141a; border-color: rgba(212,255,51,.2); color: #f5f6f2; }
html[data-theme="track"] .chat-head { background: #08090c; color: #f5f6f2; border-bottom: 1px solid rgba(212,255,51,.15); }
html[data-theme="track"] .chat-avatar { background: #d4ff33; color: #08090c; }
html[data-theme="track"] .chat-head .chat-status.on { color: #d4ff33; }
html[data-theme="track"] .chat-body { background: #08090c; }
html[data-theme="track"] .chat-msg.bot { background: #1a1d24; color: #f5f6f2; border: 1px solid rgba(255,255,255,.06); }
html[data-theme="track"] .chat-msg.me { background: #d4ff33; color: #08090c; }
html[data-theme="track"] .chat-input { background: #12141a; border-top: 1px solid rgba(255,255,255,.06); }
html[data-theme="track"] .chat-name, html[data-theme="track"] .chat-email, html[data-theme="track"] .chat-send-row input {
  background: #1a1d24; color: #f5f6f2; border-color: rgba(255,255,255,.08); }
html[data-theme="track"] .chat-name:focus, html[data-theme="track"] .chat-email:focus, html[data-theme="track"] .chat-send-row input:focus { border-color: #d4ff33; box-shadow: 0 0 0 3px rgba(212,255,51,.15); }
html[data-theme="track"] .chat-send-row button { background: #d4ff33; color: #08090c; border-radius: 2px; }
html[data-theme="track"] .chat-intro { background: #12141a; }
html[data-theme="track"] .chat-intro-lead { color: #f5f6f2; }
html[data-theme="track"] .chat-cat { background: #1a1d24; color: #f5f6f2; border-color: rgba(255,255,255,.06); }
html[data-theme="track"] .chat-cat:hover { border-color: #d4ff33; background: rgba(212,255,51,.05); }
/* Order page — dark racing look */
html[data-theme="track"] .order-shell { background: #08090c; }
html[data-theme="track"] .order-card { background: #12141a; border-color: rgba(255,255,255,.08); color: #f5f6f2; }
html[data-theme="track"] .order-head h1, html[data-theme="track"] .step-panel h2 { color: #f5f6f2; text-transform: uppercase; font-weight: 800; letter-spacing: -.02em; }
html[data-theme="track"] .order-head p, html[data-theme="track"] .step-panel .sub { color: rgba(245,246,242,.65); }
html[data-theme="track"] .steps-bar .dot { background: #1a1d24; border-color: rgba(255,255,255,.12); color: rgba(245,246,242,.6); }
html[data-theme="track"] .steps-bar .node.active .dot { background: #d4ff33; border-color: #d4ff33; color: #08090c; box-shadow: 0 12px 24px rgba(212,255,51,.35); }
html[data-theme="track"] .steps-bar .node.done .dot { background: #f5f6f2; border-color: #f5f6f2; color: #08090c; }
html[data-theme="track"] .steps-bar .node .label { color: rgba(245,246,242,.55); }
html[data-theme="track"] .steps-bar .node.active .label, html[data-theme="track"] .steps-bar .node.done .label { color: #f5f6f2; }
html[data-theme="track"] .steps-bar .bar { background: rgba(255,255,255,.08); }
html[data-theme="track"] .steps-bar .bar.done { background: #f5f6f2; }
html[data-theme="track"] .pick { background: #1a1d24; border-color: rgba(255,255,255,.08); color: #f5f6f2; }
html[data-theme="track"] .pick:hover { border-color: rgba(212,255,51,.4); }
html[data-theme="track"] .pick .check { border-color: rgba(255,255,255,.15); }
html[data-theme="track"] .pick .info .s { color: #f5f6f2; }
html[data-theme="track"] .pick .info .d { color: rgba(245,246,242,.6); }
html[data-theme="track"] .pick .info .b { background: rgba(212,255,51,.15); color: #d4ff33; }
html[data-theme="track"] .pick .cost .amt { color: #d4ff33; }
html[data-theme="track"] .pick.selected { border-color: #d4ff33; background: rgba(212,255,51,.05); box-shadow: 0 0 0 1px #d4ff33 inset; }
html[data-theme="track"] .pick.selected .check { background: #d4ff33; border-color: #d4ff33; }
html[data-theme="track"] .pick.selected .check svg { color: #08090c; }
html[data-theme="track"] .field label { color: rgba(245,246,242,.7); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
html[data-theme="track"] .field input, html[data-theme="track"] .field textarea, html[data-theme="track"] .field select {
  background: #1a1d24; color: #f5f6f2; border-color: rgba(255,255,255,.08); border-radius: 2px;
}
html[data-theme="track"] .field input:focus, html[data-theme="track"] .field textarea:focus { border-color: #d4ff33; box-shadow: 0 0 0 3px rgba(212,255,51,.15); }
html[data-theme="track"] .field input::placeholder, html[data-theme="track"] .field textarea::placeholder { color: rgba(245,246,242,.4); }
html[data-theme="track"] .ship-hint { background: rgba(212,255,51,.06); border-color: rgba(212,255,51,.2); color: rgba(245,246,242,.75); }
html[data-theme="track"] .ship-hint svg { color: #d4ff33; }
html[data-theme="track"] .pay-summary { background: rgba(212,255,51,.06); border: 1px solid rgba(212,255,51,.2); }
html[data-theme="track"] .pay-summary .l .t { color: rgba(245,246,242,.6); }
html[data-theme="track"] .pay-summary .l .v { color: #f5f6f2; }
html[data-theme="track"] .pay-summary .amt { color: #d4ff33; font-family: ui-monospace, monospace; }
html[data-theme="track"] .consent { color: rgba(245,246,242,.75); }
html[data-theme="track"] .schema { background: #1a1d24; border-color: rgba(255,255,255,.08); }
html[data-theme="track"] .schema-lock { background: rgba(0,0,0,.5); color: rgba(245,246,242,.5); }
html[data-theme="track"] .slot-chip { background: #1a1d24; color: #f5f6f2; border-color: rgba(255,255,255,.08); }
html[data-theme="track"] .slot-chip:hover { border-color: #d4ff33; }
html[data-theme="track"] .success-screen { background: #12141a; color: #f5f6f2; border-color: rgba(212,255,51,.25); }
html[data-theme="track"] .success-screen .tick { background: #d4ff33; box-shadow: 0 12px 26px rgba(212,255,51,.35); }
html[data-theme="track"] .success-screen .tick svg { color: #08090c; }
html[data-theme="track"] .success-screen .ref { background: rgba(212,255,51,.08); color: #d4ff33; border-color: rgba(212,255,51,.3); font-family: ui-monospace, monospace; }

/* --------- GALLERY (ultra-white / burgundy — museum programme) --------- */
html[data-theme="gallery"] body { background: #fdfcf9; color: #1a1a1a; }
html[data-theme="gallery"] .site-header { background: rgba(253,252,249,.9); border-bottom-color: transparent; }
html[data-theme="gallery"] .site-header.scrolled { border-bottom-color: #e8e6e0; box-shadow: none; }
html[data-theme="gallery"] .brand { font-family: 'Playfair Display', serif; font-weight: 500; letter-spacing: -.01em; }
html[data-theme="gallery"] .brand .mark { background: transparent; border: 1px solid #1a1a1a; color: #1a1a1a; box-shadow: none; }
html[data-theme="gallery"] .brand .mark svg { color: #1a1a1a; }
html[data-theme="gallery"] .brand b { color: #8f2b20; font-style: italic; }
html[data-theme="gallery"] .nav-links a { color: #6d6d68; font-family: 'Playfair Display', serif; font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; }
html[data-theme="gallery"] .nav-links a:hover { color: #8f2b20; background: transparent; }
html[data-theme="gallery"] .btn-primary { background: #1a1a1a; color: #fdfcf9; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; border-radius: 0; box-shadow: none; }
html[data-theme="gallery"] .btn-primary:hover { background: #8f2b20; box-shadow: none; transform: none; }
html[data-theme="gallery"] .btn-ghost { background: transparent; color: #1a1a1a; border-color: #1a1a1a; border-radius: 0; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; }
html[data-theme="gallery"] .btn-ghost:hover { background: #1a1a1a; color: #fdfcf9; border-color: #1a1a1a; box-shadow: none; }
html[data-theme="gallery"] .site-footer { background: #fdfcf9; color: #6d6d68; border-top: 1px solid #e8e6e0; }
html[data-theme="gallery"] .site-footer .brand { color: #1a1a1a; }
html[data-theme="gallery"] .site-footer .brand b { color: #8f2b20; }
html[data-theme="gallery"] .site-footer a { color: #6d6d68; }
html[data-theme="gallery"] .site-footer a:hover { color: #8f2b20; }
html[data-theme="gallery"] .site-footer h4 { color: #1a1a1a; font-family: 'Playfair Display', serif; font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 500; }
/* Chat widget — quiet paper */
html[data-theme="gallery"] .chat-fab { background: #1a1a1a; box-shadow: 0 12px 26px rgba(26,26,26,.3); }
html[data-theme="gallery"] .chat-fab-dot { background: #8f2b20; }
html[data-theme="gallery"] .chat-panel { border-color: #e8e6e0; }
html[data-theme="gallery"] .chat-head { background: #fdfcf9; color: #1a1a1a; border-bottom: 1px solid #e8e6e0; }
html[data-theme="gallery"] .chat-head b { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; }
html[data-theme="gallery"] .chat-avatar { background: transparent; color: #8f2b20; border: 1px solid #1a1a1a; }
html[data-theme="gallery"] .chat-msg.me { background: #1a1a1a; color: #fdfcf9; }
html[data-theme="gallery"] .chat-msg.bot { background: #fdfcf9; color: #1a1a1a; border-color: #e8e6e0; }
html[data-theme="gallery"] .chat-send-row button { background: #1a1a1a; }
html[data-theme="gallery"] .chat-send-row button:hover { background: #8f2b20; }
html[data-theme="gallery"] .chat-cat:hover { border-color: #8f2b20; background: rgba(143,43,32,.04); color: #8f2b20; }
/* Order page — paper, italic serif titles */
html[data-theme="gallery"] .order-shell { background: #fdfcf9; }
html[data-theme="gallery"] .order-card { background: #fff; border-color: #e8e6e0; box-shadow: none; border-radius: 0; }
html[data-theme="gallery"] .order-head h1 { font-family: 'Playfair Display', serif; font-weight: 500; font-style: italic; color: #1a1a1a; letter-spacing: -.01em; }
html[data-theme="gallery"] .step-panel h2 { font-family: 'Playfair Display', serif; font-weight: 500; font-style: italic; color: #1a1a1a; letter-spacing: -.01em; }
html[data-theme="gallery"] .step-panel .sub { font-family: 'Playfair Display', serif; font-style: italic; color: #6d6d68; }
html[data-theme="gallery"] .steps-bar .dot { background: #fff; border-color: #e8e6e0; color: #6d6d68; }
html[data-theme="gallery"] .steps-bar .node.active .dot { background: #8f2b20; border-color: #8f2b20; box-shadow: none; }
html[data-theme="gallery"] .steps-bar .node.done .dot { background: #1a1a1a; border-color: #1a1a1a; }
html[data-theme="gallery"] .steps-bar .bar.done { background: #1a1a1a; }
html[data-theme="gallery"] .pick { border-color: #e8e6e0; border-radius: 0; background: #fff; }
html[data-theme="gallery"] .pick:hover { border-color: #8f2b20; }
html[data-theme="gallery"] .pick .info .s { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 1.3rem; }
html[data-theme="gallery"] .pick .info .b { background: transparent; color: #8f2b20; padding: 0; font-family: 'Playfair Display', serif; font-style: italic; font-size: 12px; letter-spacing: 0; text-transform: none; }
html[data-theme="gallery"] .pick .cost .amt { font-family: 'Playfair Display', serif; font-weight: 500; color: #1a1a1a; }
html[data-theme="gallery"] .pick.selected { border-color: #8f2b20; border-width: 2px; background: rgba(143,43,32,.03); box-shadow: none; }
html[data-theme="gallery"] .pick.selected .check { background: #8f2b20; border-color: #8f2b20; }
html[data-theme="gallery"] .field label { color: #6d6d68; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; }
html[data-theme="gallery"] .field input, html[data-theme="gallery"] .field textarea, html[data-theme="gallery"] .field select {
  background: #fff; border-color: #d8d5cf; border-radius: 0; color: #1a1a1a; }
html[data-theme="gallery"] .field input:focus, html[data-theme="gallery"] .field textarea:focus { border-color: #8f2b20; box-shadow: none; }
html[data-theme="gallery"] .ship-hint { background: rgba(143,43,32,.05); border-color: #e8e6e0; color: #6d6d68; font-family: 'Playfair Display', serif; font-style: italic; }
html[data-theme="gallery"] .ship-hint svg { color: #8f2b20; }
html[data-theme="gallery"] .pay-summary { background: #fdfcf9; border: 1px solid #e8e6e0; border-radius: 0; }
html[data-theme="gallery"] .pay-summary .l .v { font-family: 'Playfair Display', serif; font-weight: 500; }
html[data-theme="gallery"] .pay-summary .amt { font-family: 'Playfair Display', serif; font-weight: 500; color: #1a1a1a; }
html[data-theme="gallery"] .consent { color: #6d6d68; font-family: 'Playfair Display', serif; font-style: italic; }
html[data-theme="gallery"] .schema { background: #fff; border-color: #e8e6e0; border-radius: 0; }
html[data-theme="gallery"] .schema-head .sh-title { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; color: #1a1a1a; }
html[data-theme="gallery"] .slot-chip { background: #fff; border-color: #e8e6e0; color: #1a1a1a; border-radius: 0; }
html[data-theme="gallery"] .slot-chip:hover { border-color: #8f2b20; background: rgba(143,43,32,.03); box-shadow: none; }
html[data-theme="gallery"] .success-screen { background: #fff; border-color: #e8e6e0; border-radius: 0; }
html[data-theme="gallery"] .success-screen h2 { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; }
html[data-theme="gallery"] .success-screen .tick { background: #8f2b20; box-shadow: none; }
html[data-theme="gallery"] .success-screen .ref { background: #fdfcf9; color: #1a1a1a; border-color: #d8d5cf; font-family: 'Playfair Display', serif; font-style: italic; }

/* Lead-time pill — sits under the features grid on Premium; used with .brass */
.lead-time-pill {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 50px auto 0; padding: 12px 22px;
  background: rgba(184,137,44,.10); border: 1px solid rgba(184,137,44,.35);
  border-radius: 999px; color: var(--navy, #0a1628);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  position: relative; left: 50%; transform: translateX(-50%);
}
.lead-time-pill svg { width: 16px; height: 16px; color: var(--brass, #b8892c); }

/* =========================================================================
   TRACK — RED / WHITE VARIANT (.theme-track.trk-var-red)
   Same layout, palette flipped: pit-red accent on cream white,
   dark charcoal ink for text. Feels like a Ferrari pit-board.
   ========================================================================= */
.theme-track.trk-var-red {
  --trk-bg:      #fbfaf7;    /* cream paper */
  --trk-bg-2:    #f2ecdd;    /* slightly warmer */
  --trk-line:    rgba(10,22,40,.10);
  --trk-ink:     #0a1628;    /* deep navy ink instead of near-white */
  --trk-mute:    #6d7482;
  --trk-accent:  #e4002b;    /* pit red */
  --trk-accent-2:#08090c;    /* charcoal used as secondary */
}
/* Body / footer surfaces re-tint under red variant */
html[data-theme="track-red"] body { background: #fbfaf7; color: #0a1628; }
html[data-theme="track-red"] .site-header { background: rgba(251,250,247,.85); border-bottom-color: rgba(228,0,43,.12); }
html[data-theme="track-red"] .site-header.scrolled { border-bottom-color: rgba(228,0,43,.35); box-shadow: 0 8px 24px rgba(10,22,40,.08); }
html[data-theme="track-red"] .brand { color: #0a1628; }
html[data-theme="track-red"] .brand .mark { background: linear-gradient(135deg, #e4002b, #b30022); color: #fff; }
html[data-theme="track-red"] .brand b { color: #e4002b; }
html[data-theme="track-red"] .nav-links a { color: #6d7482; }
html[data-theme="track-red"] .nav-links a:hover { color: #e4002b; background: rgba(228,0,43,.06); }
html[data-theme="track-red"] .btn-primary { background: #e4002b; color: #fff; border-radius: 2px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; box-shadow: 0 12px 28px rgba(228,0,43,.25); }
html[data-theme="track-red"] .btn-primary:hover { background: #b30022; box-shadow: 0 16px 36px rgba(228,0,43,.35); }
html[data-theme="track-red"] .btn-ghost { background: transparent; color: #0a1628; border-color: rgba(10,22,40,.15); border-radius: 2px; }
html[data-theme="track-red"] .btn-ghost:hover { border-color: #e4002b; color: #e4002b; background: transparent; box-shadow: none; }
html[data-theme="track-red"] .site-footer { background: #f2ecdd; color: #6d7482; border-top: 1px solid rgba(228,0,43,.15); }
html[data-theme="track-red"] .site-footer .brand { color: #0a1628; }
html[data-theme="track-red"] .site-footer .brand b { color: #e4002b; }
html[data-theme="track-red"] .site-footer a { color: #6d7482; }
html[data-theme="track-red"] .site-footer a:hover { color: #e4002b; }
html[data-theme="track-red"] .site-footer h4 { color: #e4002b; letter-spacing: .18em; text-transform: uppercase; font-size: 11px; }
/* Chat widget */
html[data-theme="track-red"] .chat-fab { background: #e4002b; color: #fff; box-shadow: 0 12px 26px rgba(228,0,43,.35); }
html[data-theme="track-red"] .chat-fab svg { color: #fff; }
html[data-theme="track-red"] .chat-panel { background: #fff; border-color: rgba(228,0,43,.15); color: #0a1628; }
html[data-theme="track-red"] .chat-head { background: #0a1628; color: #fff; border-bottom: 1px solid rgba(228,0,43,.15); }
html[data-theme="track-red"] .chat-avatar { background: #e4002b; color: #fff; }
html[data-theme="track-red"] .chat-msg.bot { background: #f2ecdd; color: #0a1628; border: 1px solid rgba(10,22,40,.08); }
html[data-theme="track-red"] .chat-msg.me { background: #e4002b; color: #fff; }
html[data-theme="track-red"] .chat-send-row button { background: #e4002b; color: #fff; border-radius: 2px; }
/* Order page */
html[data-theme="track-red"] .order-shell { background: #fbfaf7; }
html[data-theme="track-red"] .order-card { background: #fff; border-color: rgba(10,22,40,.08); color: #0a1628; box-shadow: 0 12px 28px rgba(10,22,40,.06); }
html[data-theme="track-red"] .order-head h1, html[data-theme="track-red"] .step-panel h2 { color: #0a1628; text-transform: uppercase; font-weight: 800; letter-spacing: -.02em; }
html[data-theme="track-red"] .steps-bar .dot { background: #fff; border-color: rgba(10,22,40,.15); color: #6d7482; }
html[data-theme="track-red"] .steps-bar .node.active .dot { background: #e4002b; border-color: #e4002b; color: #fff; }
html[data-theme="track-red"] .steps-bar .node.done .dot { background: #0a1628; border-color: #0a1628; color: #fff; }
html[data-theme="track-red"] .steps-bar .bar.done { background: #0a1628; }
html[data-theme="track-red"] .pick { background: #fff; border-color: rgba(10,22,40,.08); color: #0a1628; }
html[data-theme="track-red"] .pick:hover { border-color: rgba(228,0,43,.4); }
html[data-theme="track-red"] .pick.selected { border-color: #e4002b; background: rgba(228,0,43,.04); }
html[data-theme="track-red"] .pick.selected .check { background: #e4002b; border-color: #e4002b; }
html[data-theme="track-red"] .pick .cost .amt { color: #e4002b; }
html[data-theme="track-red"] .field input, html[data-theme="track-red"] .field textarea, html[data-theme="track-red"] .field select { background: #fff; color: #0a1628; border-color: rgba(10,22,40,.15); border-radius: 2px; }
html[data-theme="track-red"] .field input:focus, html[data-theme="track-red"] .field textarea:focus { border-color: #e4002b; box-shadow: 0 0 0 3px rgba(228,0,43,.12); }

/* --- SECTION SURFACES override (the .theme-track base is dark; flip to light) --- */
.theme-track.trk-var-red { background: var(--trk-bg); color: var(--trk-ink); }
.theme-track.trk-var-red .trk-hero-photo { filter: contrast(1.05) saturate(.9) brightness(.85); }
.theme-track.trk-var-red .trk-hero-photo::after {
  background:
    linear-gradient(180deg, rgba(251,250,247,.35) 0%, rgba(251,250,247,.4) 35%, rgba(251,250,247,.55) 60%, rgba(251,250,247,.98) 100%),
    linear-gradient(90deg, rgba(251,250,247,.6) 0%, rgba(251,250,247,0) 60%);
}
.theme-track.trk-var-red .trk-grain { mix-blend-mode: multiply; opacity: .18; }
.theme-track.trk-var-red .trk-timing { background: rgba(255,255,255,.9); border-color: var(--trk-line); color: var(--trk-mute); }
.theme-track.trk-var-red .trk-timing b { color: var(--trk-accent); }
.theme-track.trk-var-red .trk-line-1 { color: var(--trk-ink); }
.theme-track.trk-var-red .trk-line-2 { color: var(--trk-accent); font-style: italic; }
.theme-track.trk-var-red .trk-line-3 { color: rgba(10,22,40,.4); font-weight: 400; }
.theme-track.trk-var-red .trk-lead { color: rgba(10,22,40,.72); }
.theme-track.trk-var-red .trk-stats span { color: var(--trk-mute); }
.theme-track.trk-var-red .trk-stats b { color: var(--trk-ink); }
.theme-track.trk-var-red .trk-btn { background: var(--trk-accent); color: #fff; box-shadow: 0 12px 28px rgba(228,0,43,.25); }
.theme-track.trk-var-red .trk-btn:hover { background: #b30022; box-shadow: 0 16px 36px rgba(228,0,43,.35); }
.theme-track.trk-var-red .trk-btn-ghost { background: transparent; color: var(--trk-ink); border: 1px solid var(--trk-line); }
.theme-track.trk-var-red .trk-btn-ghost:hover { border-color: var(--trk-accent); color: var(--trk-accent); }

/* Section wrappers on white */
.theme-track.trk-var-red .trk-section { border-top: 1px solid var(--trk-line); }
.theme-track.trk-var-red .trk-h2 { color: var(--trk-ink); }
.theme-track.trk-var-red .trk-label { color: var(--trk-mute); }
.theme-track.trk-var-red .trk-tick { color: var(--trk-accent); }
.theme-track.trk-var-red .trk-specs { background: var(--trk-bg-2); }
.theme-track.trk-var-red .trk-spec-grid { border-top-color: var(--trk-line); }
.theme-track.trk-var-red .trk-spec { border-bottom-color: var(--trk-line); }
.theme-track.trk-var-red .trk-spec:nth-child(odd) { border-right-color: var(--trk-line); }
.theme-track.trk-var-red .trk-spec-id { color: var(--trk-accent); }
.theme-track.trk-var-red .trk-spec-body b { color: var(--trk-mute); }
.theme-track.trk-var-red .trk-spec-body p { color: var(--trk-ink); }

/* Gallery tiles — light bg, red-highlight caption */
.theme-track.trk-var-red .trk-tile { background: #ddd; }
.theme-track.trk-var-red .trk-tile img { filter: grayscale(.05); }
.theme-track.trk-var-red .trk-tile::after {
  background: linear-gradient(180deg, transparent 55%, rgba(10,22,40,.85) 100%);
}
.theme-track.trk-var-red .trk-tile-cap b { color: #fff; }
.theme-track.trk-var-red .trk-tile-cap .trk-mono { color: var(--trk-accent); }
.theme-track.trk-var-red .trk-tile-cap .trk-scale { color: rgba(255,255,255,.7); }

/* Podium — light cards, red highlight */
.theme-track.trk-var-red .trk-podium-grid { background: var(--trk-line); }
.theme-track.trk-var-red .trk-tier { background: var(--trk-bg); }
.theme-track.trk-var-red .trk-tier.pole { background: #fff; border-top: 3px solid var(--trk-accent); }
.theme-track.trk-var-red .trk-pos { color: var(--trk-accent); }
.theme-track.trk-var-red .trk-scale-tag { color: var(--trk-mute); }
.theme-track.trk-var-red .trk-tier h3 { color: var(--trk-ink); }
.theme-track.trk-var-red .trk-tier-blurb { color: rgba(10,22,40,.65); }
.theme-track.trk-var-red .trk-tier-price { color: var(--trk-ink); }
.theme-track.trk-var-red .trk-tier.pole .trk-tier-price { color: var(--trk-accent); }
.theme-track.trk-var-red .trk-tier li { color: rgba(10,22,40,.75); border-bottom-color: var(--trk-line); }
.theme-track.trk-var-red .trk-tier li::before { color: var(--trk-accent); }

/* FAQ light */
.theme-track.trk-var-red .trk-faq { background: var(--trk-bg-2); }
.theme-track.trk-var-red .trk-faq-item { border-top-color: var(--trk-line); }
.theme-track.trk-var-red .trk-faq-item:last-child { border-bottom-color: var(--trk-line); }
.theme-track.trk-var-red .trk-faq-item summary { color: var(--trk-ink); }
.theme-track.trk-var-red .trk-faq-no { color: var(--trk-accent); }
.theme-track.trk-var-red .trk-faq-plus { color: var(--trk-accent); }
.theme-track.trk-var-red .trk-faq-a { color: rgba(10,22,40,.7); }

/* Final CTA — red panel with cream text (inverse of dark variant) */
.theme-track.trk-var-red .trk-cta { background: var(--trk-accent); color: #fff; }
.theme-track.trk-var-red .trk-cta .trk-label { color: #fff; opacity: .75; }
.theme-track.trk-var-red .trk-cta .trk-tick { color: #fff; }
.theme-track.trk-var-red .trk-cta .trk-h2 { color: #fff; }
.theme-track.trk-var-red .trk-cta-sub { color: rgba(255,255,255,.85); }
.theme-track.trk-var-red .trk-cta .trk-btn { background: #fff; color: var(--trk-accent); }
.theme-track.trk-var-red .trk-cta .trk-btn:hover { background: var(--trk-bg-2); color: #b30022; box-shadow: 0 16px 36px rgba(0,0,0,.15); }

/* ============================================================
   Reviews section — shared across all themes, restyled per theme
   below via html[data-theme="..."] overrides.
   ============================================================ */
.reviews-section { padding: 88px 0; background: linear-gradient(180deg, #fbf9f4 0%, #f6f2e8 100%); border-top: 1px solid rgba(0,0,0,.05); }
.reviews-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.reviews-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #b45309; margin-bottom: 12px; }
.reviews-h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 44px); font-weight: 700; margin: 0 0 20px; letter-spacing: -.01em; color: var(--ink); }
.reviews-summary { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; background: #fff; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.06); margin-bottom: 16px; }
.reviews-stars-big { display: inline-flex; gap: 2px; }
.reviews-meta { font-size: 14px; color: var(--muted); }
.reviews-meta b { color: var(--ink); font-weight: 700; font-size: 16px; }
.reviews-lede { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 40px; }
.review-card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.03); transition: transform .2s, box-shadow .2s; }
.review-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.review-head { display: flex; align-items: center; gap: 12px; }
.review-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #0a1e3d, #1a3660); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.review-who { flex: 1; min-width: 0; }
.review-who b { display: block; font-size: 14.5px; font-weight: 650; color: var(--ink); line-height: 1.2; }
.review-place { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.review-stars { display: inline-flex; gap: 1px; }
.review-body { font-size: 14px; line-height: 1.55; color: #333; margin: 0; flex: 1; }
.review-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,.08); font-size: 12px; }
.review-car { color: var(--ink); font-weight: 600; }
.review-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.reviews-cta { text-align: center; }
.reviews-cta .btn { padding: 14px 32px; font-size: 15px; }
.reviews-cta-note { display: block; margin-top: 12px; font-size: 13px; color: var(--muted); }

/* Track (motorsport) theme: darker, more aggressive reviews look */
html[data-theme="track"] .reviews-section,
html[data-theme="track-red"] .reviews-section { background: #0f0f10; border-top: 1px solid rgba(255,255,255,.08); }
html[data-theme="track"] .reviews-h2,
html[data-theme="track-red"] .reviews-h2 { color: #fff; font-family: 'Sora', sans-serif; }
html[data-theme="track"] .reviews-eyebrow,
html[data-theme="track-red"] .reviews-eyebrow { color: #35c26b; }
html[data-theme="track-red"] .reviews-eyebrow { color: #ff4757; }
html[data-theme="track"] .reviews-summary,
html[data-theme="track-red"] .reviews-summary { background: #1a1a1c; color: #fff; }
html[data-theme="track"] .reviews-meta,
html[data-theme="track-red"] .reviews-meta { color: rgba(255,255,255,.65); }
html[data-theme="track"] .reviews-meta b,
html[data-theme="track-red"] .reviews-meta b { color: #fff; }
html[data-theme="track"] .reviews-lede,
html[data-theme="track-red"] .reviews-lede { color: rgba(255,255,255,.7); }
html[data-theme="track"] .review-card,
html[data-theme="track-red"] .review-card { background: #17171a; border: 1px solid rgba(255,255,255,.08); color: #eee; }
html[data-theme="track"] .review-who b,
html[data-theme="track-red"] .review-who b,
html[data-theme="track"] .review-car,
html[data-theme="track-red"] .review-car { color: #fff; }
html[data-theme="track"] .review-body,
html[data-theme="track-red"] .review-body { color: rgba(255,255,255,.82); }
html[data-theme="track"] .review-place,
html[data-theme="track-red"] .review-place,
html[data-theme="track"] .review-date,
html[data-theme="track-red"] .review-date { color: rgba(255,255,255,.55); }
html[data-theme="track"] .review-foot,
html[data-theme="track-red"] .review-foot { border-top-color: rgba(255,255,255,.1); }
html[data-theme="track"] .review-avatar { background: linear-gradient(135deg, #35c26b, #1a8a4a); }
html[data-theme="track-red"] .review-avatar { background: linear-gradient(135deg, #ff4757, #b30022); }

/* Gallery (museum) — softer, more editorial */
html[data-theme="gallery"] .reviews-section { background: #f7f4ed; }
html[data-theme="gallery"] .reviews-eyebrow { color: #8a6d3b; }
html[data-theme="gallery"] .review-avatar { background: linear-gradient(135deg, #4a3820, #8a6d3b); }

@media (max-width: 640px) {
  .reviews-section { padding: 56px 0; }
  .reviews-grid { grid-template-columns: 1fr; gap: 14px; }
  .review-card { padding: 18px; }
}


/* ==========================================================================
   Content pages — trust pages (about, shipping, terms, privacy, returns,
   payments), guides (long-form), and car-model landings. Editorial layout
   with a hero header, section-card body, TOC / meta bar, FAQ, related and
   CTA. Reads like a proper magazine article, not a wall of Word text.
   ========================================================================== */

/* Overall shell — two-column on desktop, single column below.
   The wider column (760px) is more comfortable for policies than the
   original 780; we constrain the max page width to keep line length
   sensible (~72ch) at the 16px body size. */
.content-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 28px 22px 96px;
}
@media (min-width: 1040px) {
    .content-page { max-width: 840px; padding-top: 40px; }
}

/* Breadcrumb — minimal, out of the way. Wraps cleanly on mobile. */
.content-crumbs {
    font-size: 12.5px;
    color: var(--muted);
    margin: 0 0 18px;
    letter-spacing: .01em;
}
.content-crumbs a { color: var(--muted); text-decoration: none; }
.content-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumb-current { color: var(--ink); font-weight: 500; }

/* Meta-bar (reading time, updated, author). Small, quiet, sits under H1. */
.content-meta-bar {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--muted);
    margin: -8px 0 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.content-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}
.content-meta-author b { color: var(--ink); font-weight: 650; }

/* Table of contents — floats subtly in the flow at top of long articles.
   On desktop it becomes an inline info panel; on mobile it collapses to
   full width. Refined against the plain box. */
.content-toc {
    background: linear-gradient(180deg, #faf7f1, #f5f0e5);
    border: 1px solid rgba(10,30,61,.08);
    border-left: 3px solid #0a1e3d;
    border-radius: 12px;
    padding: 20px 24px;
    margin: 0 0 40px;
    font-size: 14.5px;
}
.content-toc b {
    display: block;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -.005em;
}
.content-toc ol {
    margin: 0;
    padding-left: 22px;
    color: var(--muted);
    line-height: 1.7;
}
.content-toc li { margin: 3px 0; }
.content-toc a {
    color: #0a1e3d;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color .15s;
}
.content-toc a:hover { border-bottom-color: #0a1e3d; }

/* ============ THE BODY: this is where trust pages were "rezalet" ============ */

/* The first section on every content page becomes the hero: a single
   massive serif H1 centred with generous space, and a soft divider before
   the rest. Subsequent sections are visually distinct cards / rules so the
   page doesn't feel like one long wall of text. */
.content-body { color: #2a2a2a; }

.content-body section {
    margin: 0 0 44px;
    padding: 0;
}
.content-body section:first-of-type {
    text-align: center;
    padding: 8px 0 40px;
    margin-bottom: 48px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.content-body section:first-of-type h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 700;
    letter-spacing: -.018em;
    line-height: 1.08;
    margin: 0 auto 20px;
    color: var(--ink);
    max-width: 20ch;
}
.content-body section:first-of-type p {
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.55;
    color: #444;
    max-width: 60ch;
    margin: 0 auto 14px;
}
.content-body section:first-of-type p strong { color: var(--ink); }

/* Subsequent H2/H3 — clean editorial hierarchy */
.content-body h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    letter-spacing: -.014em;
    margin: 0 0 20px;
    color: var(--ink);
    line-height: 1.15;
}
.content-body h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -.006em;
    margin: 48px 0 16px;
    color: var(--ink);
    line-height: 1.25;
    position: relative;
    padding-top: 10px;
}
.content-body h2::before {
    content: '';
    display: block;
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg, #e4002b, #0a1e3d);
    margin-bottom: 14px;
    border-radius: 2px;
}
.content-body h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -.003em;
    margin: 28px 0 10px;
    color: var(--ink);
}

/* Body text — comfortable reading rhythm */
.content-body p {
    font-size: 16.5px;
    line-height: 1.72;
    color: #2f2f2f;
    margin: 0 0 18px;
    letter-spacing: -.003em;
}
.content-body p:last-child { margin-bottom: 0; }

/* Lists — spacing, custom bullets that match the brand */
.content-body ul,
.content-body ol {
    font-size: 16.5px;
    line-height: 1.7;
    color: #2f2f2f;
    margin: 0 0 22px;
    padding-left: 4px;
    list-style: none;
}
.content-body ul li,
.content-body ol li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
}
.content-body ul li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e4002b;
    box-shadow: 0 0 0 3px rgba(228,0,43,.14);
}
.content-body ol { counter-reset: ol-c; }
.content-body ol li { counter-increment: ol-c; }
.content-body ol li::before {
    content: counter(ol-c) '.';
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #0a1e3d;
    font-size: 17px;
    line-height: 1.6;
    min-width: 22px;
}

/* Strong / em / links */
.content-body strong { font-weight: 650; color: var(--ink); }
.content-body em     { font-style: italic; color: #444; }
.content-body a {
    color: #0a1e3d;
    text-decoration: none;
    background-image: linear-gradient(0deg, rgba(228,0,43,.35) 0, rgba(228,0,43,.35) 1px, transparent 1px);
    background-position: 0 100%;
    background-repeat: repeat-x;
    padding-bottom: 1px;
    transition: color .15s;
}
.content-body a:hover {
    color: #e4002b;
    background-image: linear-gradient(0deg, #e4002b 0, #e4002b 2px, transparent 2px);
}
.content-body a strong { color: inherit; }

/* Small helper blockquote if any guide uses one */
.content-body blockquote {
    margin: 24px 0;
    padding: 18px 22px;
    background: #faf7f1;
    border-left: 3px solid #e4002b;
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: #444;
    font-size: 16px;
    line-height: 1.6;
}

/* ============ FAQ block — proper card style, subtle chevron ============ */
.content-faq {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid rgba(0,0,0,.08);
}
.content-faq h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 24px;
    color: var(--ink);
}
.content-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.content-faq-item {
    background: #fff;
    border: 1px solid rgba(10,30,61,.09);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .18s, border-color .18s;
}
.content-faq-item[open] {
    box-shadow: 0 6px 22px rgba(10,30,61,.07);
    border-color: rgba(10,30,61,.14);
}
.content-faq-item summary {
    padding: 18px 22px;
    font-weight: 600;
    cursor: pointer;
    font-size: 15.5px;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    list-style: none;
}
.content-faq-item summary::-webkit-details-marker { display: none; }
.content-faq-item summary::after {
    content: '';
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-right: 2px solid #0a1e3d;
    border-bottom: 2px solid #0a1e3d;
    transform: rotate(45deg);
    transition: transform .2s;
}
.content-faq-item[open] summary::after { transform: rotate(-135deg); }
.content-faq-a {
    padding: 0 22px 20px;
    font-size: 15px;
    line-height: 1.65;
    color: #4a4a4a;
}

/* ============ Related reading widget ============ */
.content-related { margin-top: 56px; padding-top: 36px; border-top: 1px solid rgba(0,0,0,.08); }
.content-related h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(22px, 2.4vw, 26px);
    font-weight: 700;
    margin: 0 0 22px;
    color: var(--ink);
    letter-spacing: -.008em;
}
.content-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.content-related-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    background: #faf7f1;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    border: 1px solid rgba(10,30,61,.07);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.content-related-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(10,30,61,.09);
    border-color: rgba(10,30,61,.14);
}
.content-related-card b { font-size: 15px; line-height: 1.35; }
.content-related-card span { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ============ Final CTA band ============ */
.content-cta {
    margin-top: 56px;
    padding: 32px 24px;
    background: linear-gradient(135deg, #faf7f1, #f0eadb);
    border: 1px solid rgba(10,30,61,.08);
    border-radius: 16px;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.content-cta .btn { padding: 13px 26px; font-size: 15px; }

/* ============ Mobile refinement ============ */
@media (max-width: 640px) {
    .content-page { padding: 22px 18px 72px; }
    .content-body section:first-of-type { padding: 4px 0 28px; margin-bottom: 32px; }
    .content-body section:first-of-type h1 { font-size: clamp(30px, 8vw, 40px); }
    .content-body section:first-of-type p  { font-size: 16px; }
    .content-body h2 { margin-top: 40px; font-size: 24px; }
    .content-body p  { font-size: 16px; line-height: 1.68; }
    .content-body ul, .content-body ol { font-size: 16px; }
    .content-toc    { padding: 16px 18px; }
    .content-related-grid { grid-template-columns: 1fr; }
    .content-cta    { padding: 26px 20px; flex-direction: column; }
    .content-cta .btn { width: 100%; text-align: center; }
    .content-faq-item summary { padding: 16px 18px; font-size: 15px; }
    .content-faq-a  { padding: 0 18px 18px; }
}

/* ============ Dark themes (track / track-red) ============ */

/* Content pages (trust / guides / cars) are ALWAYS light-theme regardless of
   the homepage's active data-theme. This guarantees readable body text no
   matter which theme the admin selects. Header/footer keep their own theme.
   The body element itself may inherit a dark background from theme wrappers,
   so we paint our own white background on the content page container. */
html[data-theme] .content-page {
    background: #fefdfa;
    color: #2a2a2a;
    border-radius: 0;
}
html[data-theme] .content-body,
html[data-theme] .content-body h1,
html[data-theme] .content-body h2,
html[data-theme] .content-body h3 {
    color: var(--ink, #0c1424);
    font-family: unset;
}
html[data-theme] .content-body h1,
html[data-theme] .content-body h2 { font-family: 'Playfair Display', serif; }
html[data-theme] .content-body h3 { font-family: 'Inter', sans-serif; }
html[data-theme] .content-body p,
html[data-theme] .content-body li { color: #2f2f2f; }
html[data-theme] .content-body a { color: #0a1e3d; background-image: linear-gradient(0deg, rgba(228,0,43,.35) 0, rgba(228,0,43,.35) 1px, transparent 1px); }
html[data-theme] .content-body a:hover { color: #e4002b; }
html[data-theme] .content-body ul li::before { background: #e4002b; box-shadow: 0 0 0 3px rgba(228,0,43,.14); }
html[data-theme] .content-body ol li::before { color: #0a1e3d; background: none; box-shadow: none; }
html[data-theme] .content-body h2::before { background: linear-gradient(90deg, #e4002b, #0a1e3d); }
html[data-theme] .content-body section:first-of-type { border-bottom-color: rgba(0,0,0,.06); }
html[data-theme] .content-toc { background: linear-gradient(180deg, #faf7f1, #f5f0e5); border-left-color: #0a1e3d; color: #2a2a2a; }
html[data-theme] .content-toc b { color: var(--ink, #0c1424); }
html[data-theme] .content-toc a { color: #0a1e3d; }
html[data-theme] .content-faq { border-top-color: rgba(0,0,0,.08); }
html[data-theme] .content-faq h2 { color: var(--ink, #0c1424); }
html[data-theme] .content-faq-item { background: #fff; border-color: rgba(10,30,61,.09); color: var(--ink, #0c1424); }
html[data-theme] .content-faq-item summary { color: var(--ink, #0c1424); }
html[data-theme] .content-faq-item summary::after { border-color: #0a1e3d; }
html[data-theme] .content-faq-a { color: #4a4a4a; }
html[data-theme] .content-related h2 { color: var(--ink, #0c1424); }
html[data-theme] .content-related-card { background: #faf7f1; color: var(--ink, #0c1424); border-color: rgba(10,30,61,.07); }
html[data-theme] .content-related-card span { color: var(--muted, #7a7a7a); }
html[data-theme] .content-related { border-top-color: rgba(0,0,0,.08); }
html[data-theme] .content-cta { background: linear-gradient(135deg, #faf7f1, #f0eadb); border-color: rgba(10,30,61,.08); }
html[data-theme] .content-crumbs,
html[data-theme] .content-crumbs a { color: var(--muted, #7a7a7a); }
html[data-theme] .crumb-current { color: var(--ink, #0c1424); }
html[data-theme] .content-meta-bar { color: var(--muted, #7a7a7a); border-bottom-color: rgba(0,0,0,.08); }
html[data-theme] .content-meta-author b { color: var(--ink, #0c1424); }

/* Body-level background: paint the whole viewport light behind content pages
   so a dark homepage theme doesn't bleed around the article. Applied ONLY to
   the <body> when a content page is loaded — we can't add a body class from
   here, so we scope via a body:has() selector. Older browsers fall back to
   the page-level white background above. */
body:has(> .content-page) { background: #fefdfa !important; }

/* ==========================================================================
   Video gallery — Instagram Stories style — v2 (bulletproof theming)
   Every selector is prefixed with .vidgal-section or .vidgal-modal so no
   parent-theme cascade can leak white text onto white background.
   ========================================================================== */

/* Section shell — bulletproof dark background with subtle noise gradient */
.vidgal-section,
html[data-theme] .vidgal-section {
    background: radial-gradient(1200px 500px at 50% -200px, rgba(255,71,87,.08), transparent 60%),
                linear-gradient(180deg, #0d0d10 0%, #14151a 55%, #0d0d10 100%) !important;
    color: #ffffff !important;
    padding: 96px 0 84px;
    margin: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
/* Subtle grain texture (SVG data URI — no extra request) */
.vidgal-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .35;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}
.vidgal-section > .wrap { position: relative; z-index: 1; }

/* HEAD — eyebrow / title / lede */
.vidgal-section .vidgal-head {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
    padding: 0 24px;
}
.vidgal-section .vidgal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #ff4757 !important;
    margin-bottom: 16px;
    padding: 6px 14px;
    background: rgba(255,71,87,.1);
    border: 1px solid rgba(255,71,87,.28);
    border-radius: 999px;
}
.vidgal-section .vidgal-eyebrow::before {
    content: '';
    width: 6px; height: 6px;
    background: #ff4757;
    border-radius: 50%;
    box-shadow: 0 0 8px #ff4757;
    animation: vidgal-pulse 1.6s ease-in-out infinite;
}
@keyframes vidgal-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.vidgal-section .vidgal-h2 {
    font-family: 'Sora', 'Playfair Display', sans-serif !important;
    font-size: clamp(32px, 4.4vw, 52px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0 0 16px;
    color: #ffffff !important;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.75) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.vidgal-section .vidgal-lede {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,.65) !important;
    margin: 0;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

/* GRID — 5 cards desktop, snap-scroll mobile */
.vidgal-section .vidgal-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    padding: 4px 24px 24px;
    max-width: 1280px;
    margin: 0 auto;
}
@media (max-width: 1080px) { .vidgal-section .vidgal-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .vidgal-section .vidgal-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
    .vidgal-section .vidgal-row {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 20px;
        gap: 14px;
        padding: 4px 20px 24px;
        margin: 0 -20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .vidgal-section .vidgal-row::-webkit-scrollbar { display: none; }
    .vidgal-section .vidgal-card {
        flex: 0 0 66%;
        max-width: 280px;
        scroll-snap-align: center;
    }
}

/* CARD — Instagram Stories-style with gradient ring */
.vidgal-section .vidgal-card {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 20px;
    background: #16171a;
    padding: 0;
    border: 0;
    cursor: pointer;
    outline: none;
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
    /* IG-style gradient ring via pseudo-element */
    isolation: isolate;
}
.vidgal-section .vidgal-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    background: linear-gradient(135deg, #ff4757, #ff6b8a 30%, #ffa751 70%, #ff4757);
    z-index: -1;
    opacity: .8;
    transition: opacity .3s, transform .3s;
}
.vidgal-section .vidgal-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.7) 100%);
    z-index: 2;
    pointer-events: none;
    transition: opacity .3s;
}
.vidgal-section .vidgal-card:hover,
.vidgal-section .vidgal-card:focus-visible {
    transform: translateY(-6px) scale(1.02);
}
.vidgal-section .vidgal-card:hover::before {
    opacity: 1;
    transform: scale(1.02);
}
.vidgal-section .vidgal-card:focus-visible {
    outline: 3px solid rgba(255,71,87,.65);
    outline-offset: 4px;
}
.vidgal-section .vidgal-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    border-radius: 20px;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

/* Card overlay — play badge + hint pill */
.vidgal-section .vidgal-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,.15);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1.5px solid rgba(255,255,255,.35);
    border-radius: 50%;
    color: #ffffff !important;
    opacity: 0;
    transition: opacity .25s, transform .3s cubic-bezier(.2,.7,.3,1);
    pointer-events: none;
}
.vidgal-section .vidgal-hint svg { width: 22px; height: 22px; margin-left: 3px; }
.vidgal-section .vidgal-hint span { display: none; }
.vidgal-section .vidgal-card:hover .vidgal-hint,
.vidgal-section .vidgal-card:focus-visible .vidgal-hint {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
}

/* ---------- Full-screen modal — Instagram Stories chrome ----------
   IMPORTANT: no opacity fade on the modal container. An earlier
   opacity:0→1 transition on aria-hidden was hiding the whole modal
   even after JS set aria-hidden="false" (the browser resolved the
   base rule but the transition target never applied — this is the
   "video plays but nothing on screen" freeze the user reported).
   The stage's vidgal-zoom animation gives the entrance polish
   instead — modal container is either fully visible (no hidden attr)
   or display:none (hidden attr set). */
.vidgal-modal,
html[data-theme] .vidgal-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(4, 5, 8, 0.94) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 32px;
    color: #ffffff !important;
    animation: vidgal-modal-in .28s ease both;
}
@keyframes vidgal-modal-in {
    from { background-color: rgba(4,5,8,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
    to   { background-color: rgba(4,5,8,.94); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); }
}
.vidgal-modal[hidden] { display: none !important; }

.vidgal-modal .vidgal-modal-stage {
    position: relative;
    max-width: min(460px, 92vw);
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: calc(100vh - 80px);
    background: #000;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
    animation: vidgal-zoom .35s cubic-bezier(.2,.7,.3,1);
}
@keyframes vidgal-zoom {
    from { transform: scale(.9); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.vidgal-modal .vidgal-modal-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    outline: none;
    display: block;
}

/* Progress bar — Instagram-style gradient */
.vidgal-modal .vidgal-modal-progress {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    height: 3px;
    background: rgba(255,255,255,.22);
    border-radius: 999px;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
}
.vidgal-modal .vidgal-modal-progress::after {
    content: '';
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, #ff4757, #ffa751);
    box-shadow: 0 0 8px rgba(255,71,87,.6);
    transition: width .1s linear;
}

/* Close + nav buttons */
.vidgal-modal .vidgal-modal-close,
.vidgal-modal .vidgal-modal-nav {
    background: rgba(255,255,255,.09) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #ffffff !important;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background .2s, transform .2s, border-color .2s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.vidgal-modal .vidgal-modal-close:hover,
.vidgal-modal .vidgal-modal-nav:hover {
    background: rgba(255,255,255,.18) !important;
    border-color: rgba(255,255,255,.35) !important;
    transform: scale(1.08);
}
.vidgal-modal .vidgal-modal-close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 42px;
    height: 42px;
    z-index: 10;
}
.vidgal-modal .vidgal-modal-nav[disabled] {
    opacity: .25;
    cursor: not-allowed;
    transform: none !important;
}

/* Mobile modal — video full-height, arrows floating at bottom */
@media (max-width: 720px) {
    .vidgal-modal { padding: 14px; gap: 0; flex-direction: column; }
    .vidgal-modal .vidgal-modal-stage {
        max-height: calc(100vh - 120px);
        border-radius: 16px;
    }
    .vidgal-modal .vidgal-modal-close { top: 20px; right: 20px; }
    .vidgal-modal .vidgal-modal-nav {
        position: fixed;
        bottom: 28px;
        width: 56px;
        height: 56px;
    }
    .vidgal-modal .vidgal-modal-prev { left: 24px; }
    .vidgal-modal .vidgal-modal-next { right: 24px; }
}

/* Prevent body scroll while modal open */
body.vidgal-open { overflow: hidden; }

/* ---------- Modal spinner (shown while video buffers) ---------- */
.vidgal-modal-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 4;
    background: rgba(0,0,0,.15);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.vidgal-modal-spinner.is-on { opacity: 1; }
.vidgal-spin {
    width: 44px; height: 44px;
    border: 3px solid rgba(255,255,255,.18);
    border-top-color: #ff4757;
    border-radius: 50%;
    animation: vidgal-spin 0.9s linear infinite;
    box-shadow: 0 0 20px rgba(255,71,87,.35);
}
@keyframes vidgal-spin { to { transform: rotate(360deg); } }

/* ---------- "Tap to unmute" fallback pill (bottom-center of modal video) ---------- */
.vidgal-modal-unmute {
    position: absolute;
    bottom: 68px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255,71,87,.95) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 8px 22px rgba(255,71,87,.5);
    -webkit-tap-highlight-color: transparent;
    animation: vidgal-unmute-in .3s cubic-bezier(.2,.7,.3,1);
    transition: transform .18s, box-shadow .18s;
}
.vidgal-modal-unmute:hover {
    transform: translateX(-50%) scale(1.06);
    box-shadow: 0 12px 30px rgba(255,71,87,.6);
}
.vidgal-modal-unmute[hidden] { display: none !important; }
@keyframes vidgal-unmute-in {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}