/* =========================================================
   ORION — shared styles
   Designed to port cleanly into Elementor. All sections use
   .section / .wrap utility wrappers so they can be lifted out
   as individual blocks.
   ========================================================= */

/* Google Fonts are loaded via wp_enqueue_style in functions.php — single
   combined non-blocking request with display=swap, much faster than three
   @import lines (which block CSS parsing). */

:root {
  /* Palette — Terra DTC, white background */
  --bg: #ffffff;
  --bg-2: #fbf3eb;            /* warm cream */
  --bg-card: #ffffff;
  --ink: #0e0e0c;             /* deep modern black */
  --ink-2: #2a2a28;
  --ink-soft: #6a6a66;
  --line: #ebe3d3;            /* warm hairline */
  --line-soft: #f3ede0;
  --cream: #fbf3eb;
  --accent: #b85c34;          /* Terra — warm DTC */
  --accent-2: #93431f;        /* deep terra hover */
  --accent-soft: #f7dbc7;
  --green: #4a6a3d;
  --green-soft: #e6ecdd;
  --trustpilot: #00b67a;      /* Trustpilot brand green */
  --trustpilot-2: #009d68;
  --danger: #b14a3a;

  /* Type — geometric sans matching the Orion logo */
  --serif: "Sora", -apple-system, system-ui, sans-serif;
  --sans: "Sora", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Sizing */
  --maxw: 1280px;
  --maxw-narrow: 760px;
  --radius: 4px;
  --radius-lg: 12px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
  letter-spacing: -0.005em;
}
img { max-width: 100%; display: block; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ========== Layout wrappers ========== */
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }
.section--dark { background: var(--ink); color: #f0ece0; }
.section--cream { background: var(--bg-2); }
.wrap { width: 100%; max-width: var(--maxw); padding: 0 20px; margin: 0 auto; }
.wrap--narrow { max-width: var(--maxw-narrow); }

/* ========== Type ========== */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.section--dark .eyebrow { color: #a89c84; }
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.h-display {
  font-size: clamp(40px, 7.2vw, 88px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.h-section {
  font-size: clamp(32px, 5vw, 60px);
  letter-spacing: -0.03em;
  line-height: 1.0;
  font-weight: 500;
}
.h-card {
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 500;
}
.lede {
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 56ch;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.section--dark .lede { color: #a8a39a; }
em.mark {
  font-style: italic;
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.section--dark em.mark { color: #f0ece0; }

/* ========== Top promo bar ========== */
.promo {
  background: var(--ink);
  color: var(--cream);
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.05em;
  text-align: center;
  padding: 9px 16px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.promo .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); display: inline-block; }
.promo strong { color: var(--accent); font-weight: 500; }

/* ========== Nav ========== */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  max-width: var(--maxw);
  margin: 0 auto;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 22px;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
}
.brand img {
  display: block;
  height: 26px;
  width: auto;
  object-fit: contain;
}
@media (min-width: 720px) {
  .brand img { height: 30px; }
}
.brand sup { font-size: 9px; vertical-align: super; opacity: .55; letter-spacing: 0; }
.nav-links {
  display: none;
  gap: 28px;
  font-size: 14px;
  color: var(--ink-2);
}
.nav-links a:hover { color: var(--accent-2); }
@media (min-width: 880px) { .nav-links { display: flex; } }
.nav-right { display: flex; gap: 8px; align-items: center; }
.icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--ink);
  position: relative;
  transition: background .2s var(--ease);
}
.icon-btn:hover { background: rgba(0,0,0,.06); }
.cart-count {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--accent);
  color: white;
  font-size: 10px;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 500;
}

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform .15s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--ink);
  color: var(--cream);
}
.btn--primary:hover { background: #2a2520; }
.btn--accent {
  background: var(--accent);
  color: white;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 14px 28px -14px rgba(184,92,52,.55);
}
.btn--accent:hover { background: var(--accent-2); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--lg { padding: 18px 28px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }
.btn .arrow {
  width: 16px; height: 16px; flex-shrink: 0;
  transition: transform .2s var(--ease);
}
.btn:hover .arrow { transform: translateX(3px); }

/* ========== Pill / chips ========== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
}
.pill--accent { background: var(--accent); color: white; }
.pill--outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }

/* ========== Bullet list ========== */
.bullets {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 10px;
}
.bullets li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
}
.bullets li::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  transform: translateY(2px);
}
.bullets--check li::before {
  content: "✓";
  background: none;
  color: var(--green);
  font-weight: 600;
  width: auto;
  font-size: 14px;
  transform: translateY(0);
}

/* ========== Trust strip ========== */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  align-items: center;
}
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { color: var(--green); }

/* ========== Image placeholder ========== */
.ph {
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.025) 0 1px, transparent 1px 14px),
    #f6f4f0;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.ph--dark {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 14px),
    #161614;
  color: #7a7770;
  border-color: #1f1f1c;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(0,0,0,.1);
  pointer-events: none;
  border-radius: 2px;
}
.ph--dark::after { border-color: rgba(255,255,255,.1); }
.ph-label { z-index: 2; max-width: 70%; line-height: 1.4; }

/* ========== Hero ========== */
.hero { padding: 32px 0 64px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 72px; }
  .hero { padding: 64px 0 112px; }
}
.hero-visual {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.hero-visual .ph { position: absolute; inset: 0; border: 0; border-radius: 0; }
.hero-badge {
  position: absolute;
  top: 18px; right: 18px;
  background: var(--accent);
  color: white;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  z-index: 3;
}
.hero-logoplate {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #ffffff;
  padding: 24px 28px 28px;
  text-align: center;
  border-top: 1px solid var(--line);
  z-index: 2;
}
.hero-logoplate .word {
  font-family: var(--serif);
  font-size: clamp(40px, 6.4vw, 64px);
  letter-spacing: 0.16em;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.hero-logoplate .meta {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 22px; }
.hero-ctas {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 28px;
}
.hero-microsignal {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.stars { color: var(--trustpilot); letter-spacing: 1px; font-family: var(--sans); font-weight: 500; }

/* Hero variant: centered editorial */
.hero[data-variant="centered"] .hero-grid {
  grid-template-columns: 1fr;
  text-align: center;
}
.hero[data-variant="centered"] .lede { margin-left: auto; margin-right: auto; }
.hero[data-variant="centered"] .hero-visual {
  max-width: 520px; margin: 0 auto;
  aspect-ratio: 5/4;
}
.hero[data-variant="centered"] .hero-ctas,
.hero[data-variant="centered"] .hero-microsignal { justify-content: center; }
.hero[data-variant="centered"] .bullets { max-width: 520px; margin-left: auto; margin-right: auto; text-align: left; }

/* Hero variant: full-bleed */
.hero[data-variant="bleed"] .hero-grid {
  grid-template-columns: 1fr;
  position: relative;
}
.hero[data-variant="bleed"] .hero-visual {
  aspect-ratio: 16/10;
  border-radius: var(--radius-lg);
}
@media (min-width: 880px) {
  .hero[data-variant="bleed"] .hero-visual { aspect-ratio: 21/9; }
  .hero[data-variant="bleed"] .hero-copy {
    position: absolute;
    left: 8%; bottom: 8%;
    color: var(--cream);
    max-width: 520px;
    z-index: 4;
  }
  .hero[data-variant="bleed"] .hero-copy h1,
  .hero[data-variant="bleed"] .hero-copy .lede { color: var(--cream); }
  .hero[data-variant="bleed"] .hero-copy .hero-eyebrow { color: #b8ad95; }
  .hero[data-variant="bleed"] .hero-visual::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 100%);
    z-index: 2;
  }
}

/* ========== Step bar ========== */
.steps-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  background: var(--bg-2);
}
.steps-bar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 720px) {
  .steps-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
.step {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.step strong { font-family: var(--sans); font-size: 15px; color: var(--ink); font-weight: 500; letter-spacing: -0.005em; text-transform: none; }

/* ========== Pain cards ========== */
.pain-list { display: grid; gap: 16px; }
.pain-card {
  background: #161614;
  border: 1px solid #1f1f1c;
  border-radius: var(--radius-lg);
  padding: 28px;
  color: #f0ece0;
  position: relative;
  transition: border-color .2s var(--ease);
}
.pain-card:hover { border-color: #2e2e2a; }
.pain-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 14px;
}
.pain-card h3 { font-family: var(--serif); font-size: 26px; margin-bottom: 10px; font-weight: 400; letter-spacing: -0.015em; }
.pain-card p { color: #a8a39a; margin: 0; font-size: 14px; line-height: 1.55; }
@media (min-width: 720px) {
  .pain-list { grid-template-columns: repeat(2, 1fr); }
}

/* ========== Feature plate (large badge) ========== */
.feature-plate {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 56px 32px;
  text-align: center;
  max-width: 540px;
  margin: 0 auto;
}
.feature-plate .num {
  font-family: var(--serif);
  font-size: clamp(96px, 14vw, 180px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 400;
}
.feature-plate .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 14px;
}

/* ========== Solution features ========== */
.features {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.feature {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.feature-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2);
}
.feature h4 { font-family: var(--sans); font-size: 16px; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.005em; }
.feature p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; max-width: 60ch; }

/* ========== Customer profile cards ========== */
.profiles { display: grid; gap: 16px; }
@media (min-width: 880px) { .profiles { grid-template-columns: repeat(3, 1fr); } }
.profile {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.profile-head { display: flex; align-items: baseline; justify-content: space-between; }
.profile-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.profile-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.profile h3 { font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -0.015em; }
.profile-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink-2);
  padding: 16px 18px;
  background: #ffffff;
  border-radius: var(--radius);
  border-left: 2px solid var(--accent);
}
.profile p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.profile-rec {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
}
.profile-rec strong { font-weight: 500; }

/* ========== Review block ========== */
.reviews-head {
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: end; justify-content: space-between;
  margin-bottom: 28px;
}
.review-stats {
  display: flex; align-items: baseline; gap: 14px;
}
.review-stats .score {
  font-family: var(--serif);
  font-size: 68px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.review-stats .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.review-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
.review {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.review .stars { font-size: 14px; }
.review-text {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.review-author { font-size: 13px; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; }
.verified {
  display: inline-flex;
  align-items: center; gap: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--green);
  text-transform: uppercase;
}

/* ========== Composition transparency table ========== */
.composition {
  border-top: 1px solid var(--line);
}
.comp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.comp-row .name { font-size: 15px; }
.comp-row .name small { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
.comp-row .pct {
  font-family: var(--serif);
  font-size: 36px;
  letter-spacing: -0.025em;
  font-weight: 400;
}

/* ========== Founder note ========== */
.founder {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 56px);
  display: grid; gap: 28px;
  align-items: center;
}
@media (min-width: 880px) {
  .founder { grid-template-columns: 220px 1fr; gap: 40px; }
}
.founder-photo { aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.founder-photo .ph { border-radius: 50%; }
.founder-quote {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  text-wrap: pretty;
  font-weight: 400;
}
.founder-sign {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ========== Offer block ========== */
.offer {
  background: var(--ink);
  color: #f0ece0;
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 64px);
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 880px) {
  .offer { grid-template-columns: 1.1fr 1fr; gap: 48px; }
}
.offer h2 { font-family: var(--serif); font-size: clamp(32px, 5vw, 56px); letter-spacing: -0.02em; line-height: 1.0; font-weight: 400; }
.offer .lede { color: #a8a39a; }
.offer-price {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 12px;
}
.offer-price .now {
  font-family: var(--serif);
  font-size: clamp(44px, 6.6vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #ffffff;
  font-weight: 400;
}
.offer-price .was { color: #6e6a62; text-decoration: line-through; font-size: 18px; }
.offer-price .per { color: #a8a39a; font-size: 13px; font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.offer-card {
  background: #1a1a18;
  border: 1px solid #2a2a26;
  border-radius: var(--radius-lg);
  padding: 28px;
}

/* ========== FAQ ========== */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  max-width: 70ch;
}

/* ========== Footer ========== */
footer.foot {
  background: var(--ink);
  color: #a8a39a;
  padding: 80px 0 32px;
}
.foot-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .foot-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.foot h5 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #7a7770; margin: 0 0 12px; font-weight: 500; }
.foot .brand { color: #ffffff; }
.foot .brand img {
  height: 40px;
  filter: brightness(0) invert(1);
}
@media (min-width: 720px) {
  .foot .brand img { height: 48px; }
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot li a { font-size: 14px; }
.foot li a:hover { color: var(--cream); }
.foot-bottom {
  border-top: 1px solid #1f1f1c;
  margin-top: 48px;
  padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #7a7770;
}

/* =========================================================
   PRODUCT PAGE
   ========================================================= */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 28px 0;
}
@media (min-width: 960px) {
  .product-grid { grid-template-columns: 1.1fr 1fr; gap: 56px; padding: 40px 0; align-items: start; }
}

/* Breadcrumb */
.crumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 14px 0;
}
.crumb a:hover { color: var(--accent-2); }
.crumb .sep { margin: 0 8px; opacity: .5; }

/* Gallery */
.gallery { position: relative; }
.gallery-main {
  aspect-ratio: 1;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.gallery-main .ph { position: absolute; inset: 0; border: 0; border-radius: 0; }
.gallery-badges {
  position: absolute;
  top: 16px; left: 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 2;
}
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.gallery-thumb {
  aspect-ratio: 1;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .15s var(--ease);
}
.gallery-thumb.is-active { border-color: var(--ink); border-width: 2px; }
.gallery-thumb .ph { position: absolute; inset: 0; border: 0; border-radius: 0; font-size: 9px; }
.gallery-sticky { position: sticky; top: 80px; }
@media (max-width: 959px) { .gallery-sticky { position: static; } }

/* Buy box */
.buybox h1 { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 8px; line-height: 1.1; }
.buybox-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.buybox-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.buybox-price .now { font-family: var(--serif); font-size: 32px; font-weight: 500; letter-spacing: -0.01em; }
.buybox-price .was { color: var(--ink-soft); text-decoration: line-through; font-size: 16px; }
.buybox-price .save { background: var(--accent); color: white; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; padding: 4px 8px; border-radius: 999px; text-transform: uppercase; }
.buybox-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; color: var(--ink-soft); }
.buybox-rating .stars { font-size: 14px; }
.buybox-bullets { margin: 18px 0 22px; padding: 18px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.buybox-bullets li { font-size: 14px; }

/* Selector groups */
.selector { margin-bottom: 18px; }
.selector-label {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
}
.selector-label strong { font-weight: 500; }
.selector-label .value { color: var(--ink-soft); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.selector-label .guide {
  color: var(--accent-2);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Color swatches */
.colors { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid transparent;
  outline: 1px solid var(--line);
  outline-offset: -1px;
  position: relative;
  cursor: pointer;
  transition: transform .15s var(--ease);
}
.swatch:hover { transform: scale(1.05); }
.swatch.is-active { border-color: var(--ink); outline-color: var(--ink); }
.swatch[disabled] { opacity: .35; cursor: not-allowed; }
.swatch[disabled]::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: linear-gradient(45deg, transparent calc(50% - 1px), var(--ink-soft) 50%, transparent calc(50% + 1px));
}

/* Size buttons */
.sizes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.size-btn {
  padding: 14px 0;
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 14px;
  transition: all .15s var(--ease);
}
.size-btn:hover { border-color: var(--ink); }
.size-btn.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.size-btn[disabled] { color: var(--ink-soft); background: transparent; cursor: not-allowed; text-decoration: line-through; }
.size-btn[disabled]:hover { border-color: var(--line); }

/* Pack selector (bundles) */
.packs { display: grid; gap: 10px; }
.pack {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1.5px solid var(--line);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all .15s var(--ease);
  position: relative;
}
.pack:hover { border-color: var(--ink-soft); }
.pack.is-active { border-color: var(--ink); background: var(--bg-2); }
.pack-radio {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  position: relative;
}
.pack.is-active .pack-radio { border-color: var(--ink); background: var(--ink); }
.pack.is-active .pack-radio::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--cream);
  border-radius: 50%;
}
.pack-body { display: grid; gap: 4px; }
.pack-title { font-weight: 500; font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pack-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  background: var(--accent); color: white;
  padding: 3px 6px; border-radius: 999px; text-transform: uppercase;
}
.pack-sub { font-size: 12px; color: var(--ink-soft); font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.pack-price { text-align: right; white-space: nowrap; }
.pack-price .now { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.pack-price .was { display: block; color: var(--ink-soft); text-decoration: line-through; font-size: 11px; font-family: var(--mono); }
.pack-best {
  position: absolute;
  top: -8px; right: 16px;
  background: var(--accent);
  color: white;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
}

/* Accordion */
.acc { margin-top: 24px; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.acc summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; color: var(--accent-2); font-size: 18px; transition: transform .2s var(--ease); }
.acc details[open] summary::after { content: "−"; }
.acc details > div { padding-top: 14px; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.acc details ul { padding-left: 18px; margin: 8px 0 0; }
.acc details li { margin-bottom: 4px; }

/* Reassurance row (under cart) */
.reassure {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.reassure-item {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 10px 8px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.reassure-item svg { color: var(--ink); }

/* Sticky add-to-cart (mobile) */
.sticky-buy {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(244,237,224,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 50;
  transform: translateY(100%);
  transition: transform .3s var(--ease);
}
.sticky-buy.is-visible { transform: translateY(0); }
.sticky-buy .sb-info { flex: 1; min-width: 0; }
.sticky-buy .sb-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-buy .sb-price { font-family: var(--serif); font-size: 18px; }
.sticky-buy .btn { flex-shrink: 0; padding: 12px 18px; font-size: 14px; }

/* Modal (size guide) */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(26,23,20,.65);
  z-index: 60;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.modal-backdrop.is-open { display: flex; opacity: 1; }
.modal {
  background: var(--bg);
  border-radius: var(--radius-lg);
  max-width: 640px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: clamp(20px, 4vw, 36px);
  position: relative;
}
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 18px;
}
.modal h2 { font-family: var(--serif); font-size: 28px; margin-bottom: 12px; }
.size-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; }
.size-table th, .size-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.size-table th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
.size-table tr.is-active { background: var(--bg-card); }
.size-table tr.is-active td:first-child { color: var(--accent-2); font-weight: 600; }

/* Comparison strip */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 32px 0 0;
}
.compare-col {
  border-radius: var(--radius-lg);
  padding: 22px;
  border: 1px solid var(--line);
}
.compare-col.us { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.compare-col.them { background: var(--bg-card); }
.compare h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; font-weight: 500; }
.compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.compare li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; }
.compare .us li::before { content: "✓"; color: #a8c98c; font-weight: 600; }
.compare .them li::before { content: "×"; color: var(--ink-soft); font-weight: 600; }

/* TWEAKS panel container — minimal */
#tweaks-root { position: fixed; z-index: 80; pointer-events: none; inset: 0; }
#tweaks-root > * { pointer-events: auto; }

/* =========================================================
   MOBILE — comprehensive tightening + nav drawer
   ========================================================= */

/* Hamburger button — visible only on mobile */
.nav-toggle {
  display: inline-flex;
  width: 40px; height: 40px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  color: var(--ink);
  transition: background .15s var(--ease);
}
.nav-toggle:hover { background: rgba(0,0,0,.06); }
.nav-toggle .icon-close { display: none; }
.nav.is-open .nav-toggle .icon-open { display: none; }
.nav.is-open .nav-toggle .icon-close { display: inline-block; }
@media (min-width: 880px) { .nav-toggle { display: none; } }

/* Mobile nav drawer */
@media (max-width: 879px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 12px 20px 22px;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    box-shadow: 0 22px 36px -28px rgba(0,0,0,.2);
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a {
    font-family: var(--display);
    font-style: italic;
    font-size: 24px;
    letter-spacing: -0.015em;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
  }
  .nav-links a:last-child { border-bottom: 0; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }

  /* Section rhythm */
  .section { padding: 56px 0; }
  .section--tight { padding: 36px 0; }

  /* Wrap */
  .wrap { padding: 0 18px; }

  /* Promo */
  .promo { font-size: 11px; padding: 8px 14px; gap: 10px; letter-spacing: 0.03em; }

  /* Nav */
  .nav-inner { padding: 12px 18px; gap: 12px; }
  .brand img { height: 24px; }
  .icon-btn { width: 38px; height: 38px; }

  /* Hero */
  .hero { padding: 24px 0 48px; }
  .hero-grid { gap: 28px; }
  .hero h1.h-display { font-size: clamp(34px, 9vw, 52px); letter-spacing: -0.025em; }
  .hero-eyebrow { font-size: 10px; margin-bottom: 14px; }
  .hero .lede { font-size: 15px; }
  .hero-ctas { flex-direction: column; gap: 10px; margin-top: 22px; }
  .hero-ctas .btn { width: 100%; justify-content: center; padding: 16px 22px; }
  .hero-microsignal { flex-wrap: wrap; font-size: 10px; gap: 8px; }
  .hero-logoplate { padding: 16px 18px 18px; }
  .hero-logoplate .word { font-size: 36px; letter-spacing: 0.1em; }
  .hero-logoplate .meta { font-size: 9px; letter-spacing: 0.08em; }
  .hero-badge { font-size: 10px; padding: 6px 10px; top: 14px; right: 14px; }

  /* Steps bar */
  .steps-bar { padding: 18px 0; }
  .step strong { font-size: 13px; }
  .step { font-size: 10px; letter-spacing: 0.06em; gap: 2px; }

  /* Trustpilot */
  .trustpilot { padding: 28px 0; gap: 12px; }
  .tp-star { width: 30px; height: 30px; font-size: 18px; }
  .tp-meta { font-size: 13px; gap: 8px; }
  .tp-rating { font-size: 20px; }

  /* Categories */
  .cat-body { padding: 14px 16px 16px; gap: 10px; }
  .cat-body h3 { font-size: 17px; }
  .cat-body small { font-size: 9px; letter-spacing: 0.06em; }
  .cat-arrow { width: 30px; height: 30px; }
  .cat-tag { font-size: 9px; padding: 4px 7px; top: 10px; left: 10px; }

  /* Pain cards */
  .pain-card { padding: 22px; }
  .pain-card h3 { font-size: 22px; }

  /* Feature plate */
  .feature-plate { padding: 40px 24px; }

  /* Solution features */
  .feature { padding: 18px 0; grid-template-columns: 44px 1fr; gap: 12px; }
  .feature-icon { width: 36px; height: 36px; }
  .feature h4 { font-size: 15px; }
  .feature p { font-size: 13px; }

  /* Marquee */
  .marquee { padding: 16px 0; }

  /* Profiles */
  .profile { padding: 22px; }
  .profile h3 { font-size: 26px; }
  .quote { font-size: 16px; padding: 14px 14px; }

  /* Composition */
  .comp-row { padding: 14px 0; }
  .comp-row .name { font-size: 14px; }
  .comp-row .name small { font-size: 11px; }
  .comp-row .pct { font-size: 26px; }

  /* Stats */
  .stat { padding: 18px 8px; }
  .stat-num { font-size: 32px; }
  .stat-label { font-size: 10px; letter-spacing: 0.08em; }

  /* UGC wall — collapse modifiers */
  .ugc-wall { gap: 8px; }
  .ugc-tile.is-wide,
  .ugc-tile.is-tall { grid-column: span 1; grid-row: span 1; aspect-ratio: 1; }

  /* Reviews */
  .reviews-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .review { padding: 22px; }
  .review-text { font-size: 17px; }
  .review-stats .score { font-size: 52px; }

  /* Reel */
  .reel-head { gap: 14px; }
  .reel-card { flex-basis: 78%; }
  .reel-caption { font-size: 15px; }

  /* Founder */
  .founder { padding: 28px 22px; gap: 22px; }
  .founder-photo { max-width: 160px; margin: 0 auto; }
  .founder-quote { font-size: 19px; }

  /* Offer */
  .offer { padding: 32px 24px; gap: 22px; }
  .offer h2 { font-size: 30px; }
  .offer-price .now { font-size: 46px; }
  .offer-card { padding: 22px; }

  /* FAQ */
  .faq details { padding: 18px 0; }
  .faq summary { font-size: 18px; gap: 14px; }
  .faq summary::after { width: 28px; height: 28px; font-size: 20px; }

  /* Footer */
  .foot { padding: 56px 0 28px; }
  .foot .brand img { height: 36px; }
  .foot-bottom { font-size: 10px; flex-direction: column; gap: 6px; }

  /* ============ PRODUCT PAGE ============ */
  .product-grid { gap: 24px; padding: 20px 0; }
  .crumb { padding: 12px 0; font-size: 10px; }

  /* Gallery */
  .gallery-thumbs { grid-template-columns: repeat(5, 1fr); gap: 6px; }

  /* Buy box */
  .buybox h1 { font-size: 26px; }
  .buybox-price .now { font-size: 28px; }
  .buybox-bullets { padding: 16px 0; margin: 16px 0 18px; }
  .buybox-bullets li { font-size: 13px; }

  /* Sizes / fit / colors */
  .sizes { gap: 6px; }
  .size-btn { padding: 12px 0; font-size: 13px; }
  .swatch { width: 34px; height: 34px; }

  /* Packs */
  .pack { padding: 14px; grid-template-columns: 20px 1fr auto; gap: 12px; }
  .pack-title { font-size: 14px; }
  .pack-sub { font-size: 11px; }
  .pack-price .now { font-size: 18px; }
  .pack-best { font-size: 8px; padding: 3px 7px; }

  /* Accordion */
  .acc details { padding: 16px 0; }
  .acc summary { font-size: 14px; }

  /* Comparison */
  .compare { grid-template-columns: 1fr; gap: 10px; }
  .compare-col { padding: 18px; }

  /* Sticky buy */
  .sticky-buy { padding: 10px 14px; gap: 10px; }
  .sticky-buy .sb-title { font-size: 12px; }
  .sticky-buy .sb-price { font-size: 16px; }
  .sticky-buy .btn { padding: 11px 16px; font-size: 13px; }

  /* Modal */
  .modal { padding: 24px 20px; }
  .size-table th, .size-table td { padding: 10px 6px; font-size: 12px; }
}

@media (max-width: 420px) {
  .promo { font-size: 10px; gap: 6px; }
  .promo .dot { display: none; }
  .wrap { padding: 0 16px; }

  /* Hero — even tighter */
  .hero h1.h-display { font-size: 30px; letter-spacing: -0.02em; line-height: 1.0; }

  /* Trustpilot — stack vertically with cleaner separators */
  .tp-meta { flex-direction: column; gap: 4px; }
  .tp-meta > span:nth-child(3),
  .tp-meta > span:nth-child(5) { display: none; }

  /* Categories — single col on tiny */
  .cats { grid-template-columns: 1fr; }
  .cat-media { aspect-ratio: 3/2; }

  /* UGC — 2 col stays */
  .ugc-wall { grid-template-columns: repeat(2, 1fr); }

  /* Stats — make 2x2 grid prettier */
  .stat { padding: 14px 6px; }
  .stat-num { font-size: 28px; }

  /* Offer card width */
  .offer-price .now { font-size: 38px; }

  /* Sticky buy doesn't crowd content */
  body.has-sticky-buy { padding-bottom: 76px; }
}

/* ========== Marquee ========== */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  padding: 22px 0;
}
.marquee-track {
  display: flex;
  gap: 56px;
  animation: scroll 35s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.marquee-item {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.015em;
  font-weight: 400;
  display: inline-flex; align-items: center; gap: 56px;
}
.marquee-item::after {
  content: "★";
  color: var(--accent);
  font-size: 14px;
}
@keyframes scroll {
  to { transform: translateX(calc(-50%)); }
}

/* Press / quoted-in row */
.press {
  display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-soft);
}
.press-item { display: inline-flex; align-items: center; gap: 8px; }
.press-item::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--line);
  display: inline-block;
}

/* =========================================================
   CATEGORY STRIP — 4-up cards (Boxers / Sport / etc.)
   ========================================================= */
.cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (min-width: 720px) { .cats { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  transition: transform .25s var(--ease), border-color .15s var(--ease), box-shadow .25s var(--ease);
  text-decoration: none;
  color: inherit;
}
.cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: 0 18px 36px -22px rgba(26,23,20,.35);
}

.cat-media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.cat-media .ph {
  position: absolute; inset: 0;
  border: 0; border-radius: 0;
}
.cat-card[data-tone="sand"] .cat-media .ph { background:
  repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0 1px, transparent 1px 14px),
  #e8dec8;
}
.cat-card[data-tone="navy"] .cat-media .ph { background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px),
  #1f2942;
  color: #8a93ac;
}
.cat-card[data-tone="navy"] .cat-media .ph::after { border-color: rgba(255,255,255,.1); }
.cat-card[data-tone="moss"] .cat-media .ph { background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px),
  #2f4332;
  color: #8aa088;
}
.cat-card[data-tone="moss"] .cat-media .ph::after { border-color: rgba(255,255,255,.1); }
.cat-card[data-tone="terra"] .cat-media .ph { background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px),
  var(--accent-2);
  color: #f3d8c4;
}
.cat-card[data-tone="terra"] .cat-media .ph::after { border-color: rgba(255,255,255,.18); }

.cat-tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--cream);
  color: var(--ink);
  padding: 4px 8px;
  border-radius: 999px;
}
.cat-tag--soon {
  background: rgba(255,255,255,.85);
  color: var(--ink-soft);
}
.cat-tag--new {
  background: var(--accent);
  color: white;
}

.cat-body {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 20px;
}
.cat-body h3 {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.15;
}
.cat-body small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
  font-weight: 400;
}
.cat-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background .15s var(--ease), color .15s var(--ease), transform .2s var(--ease);
}
.cat-card:hover .cat-arrow { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateX(3px); }
.cat-card[data-state="soon"] .cat-arrow { opacity: .45; }
.cat-card[data-state="soon"] { cursor: default; }
.cat-card[data-state="soon"]:hover { transform: none; border-color: var(--line-soft); box-shadow: none; }

/* =========================================================
   UGC WALL — customer photo grid
   ========================================================= */
.ugc-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 720px) { .ugc-wall { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .ugc-wall { grid-template-columns: repeat(6, 1fr); } }

.ugc-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: transform .2s var(--ease);
}
.ugc-tile:hover { transform: scale(1.02); }
.ugc-tile.is-wide { grid-column: span 2; aspect-ratio: 2/1; }
.ugc-tile.is-tall { grid-row: span 2; aspect-ratio: 1/2; }
.ugc-tile .ph {
  position: absolute; inset: 0; border: 0; border-radius: 0;
  font-size: 10px;
}
.ugc-tile .ugc-handle {
  position: absolute;
  left: 8px; bottom: 8px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  background: rgba(0,0,0,.55);
  color: white;
  padding: 3px 7px;
  border-radius: 3px;
}
.ugc-tile .ugc-stars {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  font-size: 10px;
  color: var(--accent);
  background: rgba(244,237,224,.92);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 1px;
}
.ugc-tile.is-video::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-size: 22px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  z-index: 2;
  pointer-events: none;
}

/* =========================================================
   TRUSTPILOT STRIP — green star widget
   ========================================================= */
.trustpilot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 36px 0;
}
.tp-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tp-rating {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.tp-stars {
  display: flex;
  gap: 4px;
}
.tp-star {
  width: 36px;
  height: 36px;
  background: var(--trustpilot);
  display: grid;
  place-items: center;
  color: white;
  font-size: 22px;
  line-height: 1;
  border-radius: 3px;
}
.tp-star.is-half {
  background: linear-gradient(90deg, var(--trustpilot) 50%, #d5d5d5 50%);
}
.tp-star.is-empty {
  background: #d5d5d5;
}
.tp-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-soft);
  flex-wrap: wrap;
  justify-content: center;
}
.tp-meta strong { color: var(--ink); font-weight: 600; }
.tp-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tp-logo::before {
  content: "★";
  color: var(--trustpilot);
  font-size: 18px;
  line-height: 1;
}

/* Compact inline variant (header bar) */
.trustpilot--inline {
  flex-direction: row;
  padding: 12px 0;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.trustpilot--inline .tp-star { width: 22px; height: 22px; font-size: 14px; }
.trustpilot--inline .tp-rating { font-size: 14px; }

/* Stars helper (re-uses --trustpilot) */
.stars--green { color: var(--trustpilot); }

/* =========================================================
   STATS / TRUST METRICS ROW
   ========================================================= */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: center;
}
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: 24px 12px;
  border-right: 1px solid var(--line);
}
.stats .stat:last-child { border-right: 0; }
@media (max-width: 719px) {
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.stat-num {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
}
.reel-head {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.reel-nav { display: flex; gap: 8px; }
.reel-nav button {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); transition: all .15s var(--ease);
}
.reel-nav button:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.reel-nav button[disabled] { opacity: .35; cursor: not-allowed; }
.reel-nav button[disabled]:hover { background: var(--bg-card); color: var(--ink); border-color: var(--line); }

.reel-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 20px 24px;
  scroll-padding-left: 20px;
}
.reel-scroll::-webkit-scrollbar { display: none; }

.reel-card {
  flex: 0 0 72%;
  scroll-snap-align: start;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  aspect-ratio: 9 / 16;
  cursor: pointer;
  transition: transform .25s var(--ease);
}
.reel-card:hover { transform: translateY(-2px); }
@media (min-width: 560px) { .reel-card { flex-basis: 46%; } }
@media (min-width: 880px) { .reel-card { flex-basis: 30%; } }
@media (min-width: 1100px) { .reel-card { flex-basis: 23%; } }

.reel-card .ph {
  position: absolute; inset: 0; border: 0; border-radius: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 14px),
    #221d18;
  color: #8a8170;
}
.reel-card .ph::after { border-color: rgba(255,255,255,.08); }
.reel-card .ph-label { color: #b8ad95; max-width: 80%; }

.reel-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%);
  z-index: 2;
}
.reel-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(244,237,224,.95);
  display: grid; place-items: center;
  color: var(--ink);
  z-index: 3;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.reel-card:hover .reel-play { transform: translate(-50%, -50%) scale(1.08); background: var(--accent); color: white; }
.reel-duration {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  background: rgba(0,0,0,.55);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-flex; align-items: center; gap: 5px;
}
.reel-duration::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #e74c3c; display: inline-block;
}
.reel-meta {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 3;
  color: white;
}
.reel-author {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.reel-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 13px;
  color: white;
  font-weight: 500;
  flex-shrink: 0;
  border: 2px solid white;
}
.reel-handle {
  font-size: 13px;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.reel-caption {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.25;
  font-style: italic;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  max-width: 28ch;
  text-wrap: balance;
}
.reel-card .reel-tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(244,237,224,.92);
  color: var(--ink);
  padding: 5px 8px;
  border-radius: 999px;
}
.reel-card .reel-shop {
  position: absolute;
  bottom: 14px; right: 14px;
  z-index: 4;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: white;
  color: var(--ink);
  display: grid; place-items: center;
  border: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: transform .15s var(--ease);
}
.reel-card .reel-shop:hover { transform: scale(1.08); background: var(--accent); color: white; }

/* Reel section variant on dark */
.section--dark .reel-nav button {
  background: #221d18; border-color: #2c261f; color: var(--cream);
}
.section--dark .reel-nav button:hover { background: var(--accent); border-color: var(--accent); color: white; }