/* Kingdom homepage v3: based on the Playcart reference.
   Header lives inside the hero, condensed display type, one accent color. */

:root {
  --an-h: 40px; /* announcement bar */
  /* Metallic gold: gradient for fills, solid for lines, darker gold for text on white */
  --accent: #b8913f;
  --accent-ink: #1b1406;
  --accent-fill: linear-gradient(135deg, #f0d48e 0%, #c9a24b 48%, #9c752b 100%);
  --accent-text: #7c5d1f;
  --accent-soft: #f7efdc;
  --accent-light: #e9cd8c;
  --ink: #111;
  --ink-2: #3c3c3c;
  --muted: #66625b;
  --line: #ddd6c8;
  --card: #ebe5d9;
  --sand: #e9e3d6;   /* trust strip, collection tabs */
  --media: #e8e2d5;  /* behind product photos */
  --paper: #f4f0e8;  /* page background: warm "bone", picked over pure white 22 Oct 2026 (less glare next to the gold and black) */
  --dark: #0d0d0d;

  --f-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 16px;
  --page: 1360px;
  --pad: clamp(16px, 2.6vw, 36px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Smooth scrolling (Lenis, js/v3.js): it drives the page's own scroll, so native smooth-scroll must step aside */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; } /* only mid-scroll, so the YouTube player stays clickable */
/* the canvas behind everything is the hero's black, so Safari's address and tool bars (which take the page
   colour) and the bounce at the top and bottom match the hero and footer; the light sections paint their own */
html { background: var(--dark); }
body {
  margin: 0;
  background: var(--dark);
  color: var(--ink);
  font: 400 15px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, dl, dd, blockquote { margin: 0; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section[id] { scroll-margin-top: 100px; }

.page { max-width: var(--page); margin: 0 auto; padding: 0 var(--pad); }
/* Hero runs edge to edge; the old 2% gap now sits inside it, so the header and content keep their place.
   The crossed marquee bands (--mq-h tall) straddle its bottom edge: half inside the hero, half over the page */
.hero-wrap { --mq-h: clamp(170px, 18vw, 250px); margin-bottom: calc(var(--mq-h) / 2); }
/* Scroll reveal: the hero pins once its marquee reaches the bottom of the screen (--hero-top, set in
   js/v3.js) and the rest of the page (.sheet) scrolls up over it, straight edge, no shadow */
.hero-wrap { position: sticky; top: var(--hero-top, 0px); z-index: 1; }
/* covered by the sheet that slid over it: skip painting it (js/v3.js updateHeader) */
.is-covered { visibility: hidden; }
.is-covered * { animation-play-state: paused !important; }
.sheet { position: relative; z-index: 2; background: var(--paper); overflow-x: clip; } /* clip: the motifs hang off the screen edge without a sideways scroll */

/* Brand motif: the site logo (crown over KINGDOM), big and faint gold, tilted and hanging off the screen
   edge, alternating sides down the page */
.has-motif { position: relative; isolation: isolate; }
.motif { position: absolute; z-index: -1; top: 20px; width: clamp(440px, 52vw, 780px); height: auto; aspect-ratio: 4 / 3; color: var(--accent); opacity: .1; pointer-events: none; }
.motif-left { left: calc(50% - 50vw); transform: translateX(-32%) rotate(-10deg); }
.motif-right { right: calc(50% - 50vw); transform: translateX(32%) rotate(10deg); }
.faith .motif { top: 50%; margin-top: calc(clamp(440px, 52vw, 780px) * -.375); }
@media (max-width: 720px) { .motif { width: 380px; opacity: .09; } }
/* Same idea further down: the content above Our story pins once its bottom reaches the bottom of the
   screen (--pin-top, js/v3.js) and the second sheet, from Our story on, scrolls up over it */
[data-pin] { position: sticky; top: var(--pin-top, 0px); z-index: 1; }

h1, h2 {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .98;
}
h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
h3 { font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 22px 0 26px;
  border-radius: 999px;
  border: 0;
  font: 700 13px/1 var(--f-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .2s, background .2s;
}
.btn svg { width: 18px; height: 18px; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn-accent { background: var(--accent-fill); color: var(--accent-ink); }
.btn-accent:hover { filter: brightness(1.08); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2a2a2a; }
.btn-sm { height: 42px; padding: 0 16px 0 20px; font-size: 12px; }

/* Hero */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(clamp(640px, 56vw, 820px) + var(--mq-h) / 2); /* the extra half is the band's top half */
  padding: 14px 2% calc(var(--mq-h) / 2);
  background: var(--dark);
  color: #fff;
  isolation: isolate;
}
.header-space { height: calc(92px + var(--an-h)); } /* the header's height plus its gap, so the hero lays out as if it were inside */
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 35%;
  z-index: -2;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(0deg, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 35%);
}

/* Light from above. js/v3.js sets, on .hero: --fx/--fy (his face), --sx/--sy (the source), --bl/--br (beam length
   and angle), --kx/--ky (the key light, nudged toward the source). Three layers, each blended on its own:
   .hero-light (screen: the hazy beam itself), .hero-key (soft-light: lifts only the lit skin and highlights, so the
   shadows stay deep, the way real light falls) and .hero-dust (screen: dust drifting through the beam). */
.hero { --bw: 260px; --gw: 220px; --kw: 150px; --kh: 190px; --hl-blur: 12px;
  --hl-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.9 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (min-width: 721px) { .hero { --bw: clamp(340px, 28vw, 440px); --gw: clamp(260px, 22vw, 340px); --kw: clamp(200px, 17vw, 260px); --kh: clamp(250px, 21vw, 320px); --hl-blur: 18px; } }
.hero-light, .hero-key, .hero-dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 2.2s ease .3s; }
.hero.has-light :is(.hero-light, .hero-key, .hero-dust) { opacity: 1; }
.hero-light { overflow: hidden; mix-blend-mode: screen; }
.hl-beam { position: absolute; left: var(--sx); top: var(--sy); width: var(--bw); height: var(--bl); margin-left: calc(var(--bw) / -2); transform: rotate(var(--br)); transform-origin: 50% 0; filter: blur(var(--hl-blur)); animation: hl-breathe 9s ease-in-out infinite; }
/* the haze: streaky noise stretched along the beam, so it reads as light through dusty air rather than a flat cone */
.hl-beam i { position: absolute; inset: 0; -webkit-mask: var(--hl-noise) 0 0 / 100% 100%; mask: var(--hl-noise) 0 0 / 100% 100%; }
.hl-wide { clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255, 240, 214, .5) 0%, rgba(255, 233, 198, .3) 42%, rgba(255, 226, 186, .17) 78%, rgba(255, 226, 186, 0) 100%); }
/* the brighter core down the middle of the beam */
.hl-core { clip-path: polygon(47.5% 0, 52.5% 0, 70% 100%, 30% 100%); background: linear-gradient(180deg, rgba(255, 247, 228, .55) 0%, rgba(255, 238, 208, .3) 52%, rgba(255, 238, 208, 0) 94%); -webkit-mask-size: 160% 100% !important; mask-size: 160% 100% !important; -webkit-mask-position: 40% 0 !important; mask-position: 40% 0 !important; }
.hl-source { position: absolute; left: var(--sx); top: var(--sy); width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 222, .38) 0%, rgba(255, 236, 200, .12) 35%, rgba(255, 236, 200, 0) 65%); }
.hl-glow { position: absolute; left: var(--kx); top: var(--ky); width: var(--gw); height: var(--gw); margin: calc(var(--gw) / -2) 0 0 calc(var(--gw) / -2); border-radius: 50%; background: radial-gradient(circle, rgba(255, 232, 196, .2) 0%, rgba(255, 232, 196, .07) 40%, rgba(255, 232, 196, 0) 70%); }
.hero-key { mix-blend-mode: soft-light; background: radial-gradient(ellipse var(--kw) var(--kh) at var(--kx) var(--ky), rgba(255, 228, 186, .95) 0%, rgba(255, 226, 182, .5) 38%, rgba(255, 226, 182, 0) 72%); }
.hero-dust { width: 100%; height: 100%; mix-blend-mode: screen; }
@keyframes hl-breathe { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hl-beam { animation: none; } }

/* Header inside the hero */
/* Always fixed, so it can follow you on the hero too. Resting (at the very top): transparent and full width.
   Floating (.is-stuck, past 60px): the compact glass bar, hidden while you scroll down, back when you scroll up.
   Top, width and colours all transition, so it eases between the two (js/v3.js updateHeader) */
.header {
  position: fixed;
  top: calc(var(--an-h) + 18px);
  left: calc(2% + 14px);
  right: calc(2% + 14px);
  max-width: 2400px;
  margin: 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 14px 0 22px;
  height: 64px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
  transition: top .45s cubic-bezier(.2, .7, .2, 1), max-width .55s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, background .4s, border-color .4s, text-shadow .4s, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.header.is-stuck {
  top: 10px;
  left: calc(2% + 14px);
  right: calc(2% + 14px);
  max-width: 1120px; /* a compact floating bar, centred, instead of running edge to edge */
  margin: 0 auto;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(12, 12, 12, .82);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
  text-shadow: none;
}
/* Past the hero the header hides while you scroll down and comes back as soon as you scroll up (js/v3.js) */
.header.is-stuck.is-hidden { transform: translateY(calc(-100% - 24px)); }
.header.is-instant { transition: none !important; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 26px/1 var(--f-display);
  letter-spacing: .02em;
}
.logo svg { width: 22px; height: 22px; color: var(--accent); }
.logo-light { color: #fff; }
.nav { display: flex; align-items: center; gap: 30px; margin: 0 auto; font-size: 14px; font-weight: 500; }
/* Top-level links: a gold underline grows from the centre on hover (and while the mega menu is open) */
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; border: 0; background: none; color: rgba(255, 255, 255, .78); font: inherit; text-shadow: inherit; cursor: pointer; transition: color .2s; }
.nav-link svg { width: 16px; height: 16px; transition: transform .25s; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent-fill); transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.nav-link:hover, .nav-link[aria-expanded="true"] { color: #fff; }
.nav-link:hover::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-link[aria-expanded="true"] svg { transform: rotate(180deg); }
/* "New drop" carries a small pulsing gold dot */
.nav-new::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(201, 162, 75, .6); animation: new-pulse 2.4s ease-out infinite; }
@keyframes new-pulse { 70%, 100% { box-shadow: 0 0 0 7px rgba(201, 162, 75, 0); } }

/* Shop mega menu: dark glass panel under the header */
.mega { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 32px; padding: 30px 30px 30px 34px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px; background: rgba(12, 12, 12, .9); backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); text-shadow: none; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .3s ease, visibility 0s .3s; }
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s ease; }
.mega-col { display: flex; flex-direction: column; gap: 12px; }
.mega-title { margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-light); }
.mega-col a { font-size: 15px; color: rgba(255, 255, 255, .78); transition: color .2s, transform .2s; }
.mega-col a:hover { color: #fff; transform: translateX(4px); }
.mega-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px !important; font-weight: 600; color: #fff !important; }
.mega-all svg { width: 15px; height: 15px; }
.mega-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 220px; padding: 18px; overflow: hidden; border-radius: 16px; isolation: isolate; }
.mega-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.mega-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 60%); }
.mega-card:hover img { transform: scale(1.05); }
.mega-card .spot-badge { top: 14px; left: 14px; }
.mega-card-text strong { display: block; font: 400 24px/1 var(--f-display); text-transform: uppercase; }
.mega-card-text span { font-size: 13px; color: rgba(255, 255, 255, .7); }
.mega-card-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent-light); }
.mega-card-go svg { width: 15px; height: 15px; }
.header-icons { display: flex; align-items: center; gap: 2px; }
.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.icon-btn:hover { background: rgba(255, 255, 255, .12); }
.count {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent-fill);
  color: var(--accent-ink);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.count.bump { animation: bump .35s ease; }
@keyframes bump { 50% { transform: scale(1.3); } }
.menu-btn { display: none; }

/* Gold "Shop the drop" button at the end of the header (desktop) */
.head-cta { display: inline-flex; height: 40px; margin-left: 8px; padding: 0 18px; font-size: 12px; white-space: nowrap; }
.head-cta:hover { filter: brightness(1.08); }

.drawer {
  color: var(--ink);
  text-shadow: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 8px 20px 16px;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
}
.drawer a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); font: 400 22px/1.1 var(--f-display); text-transform: uppercase; }
.drawer a:last-child { border: 0; }
.drawer .nav-new { display: flex; align-items: center; }

.hero-content { align-self: center; padding: 24px clamp(24px, 4vw, 56px); max-width: 700px; }
/* Store news above the headline: a plain line with a gold pin, no pill */
.hero-note { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; font-size: 14px; color: rgba(255, 255, 255, .78); transition: color .2s; }
.hero-note svg { flex: none; width: 18px; height: 18px; color: var(--accent-light); }
.hero-note strong { font-weight: 600; color: var(--accent-light); }
.hero-note .hero-note-go { width: 15px; height: 15px; color: currentColor; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.hero-note:hover { color: #fff; }
.hero-note:hover .hero-note-go { opacity: 1; transform: none; }
.hero h1 { font-size: clamp(3.4rem, 7.4vw, 6.6rem); margin-bottom: 20px; }
.hero-content > p { max-width: 30em; margin-bottom: 30px; color: rgba(255, 255, 255, .8); font-size: 15.5px; }
.h1-gold { color: transparent; background: var(--accent-fill); -webkit-background-clip: text; background-clip: text; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-ghost { border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .04); color: #fff; backdrop-filter: blur(6px); }
.btn-ghost:hover { background: #fff; color: var(--ink); }
/* Three brand points under the buttons */
.hero-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.hero-points li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hp-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--accent-light); }
.hp-ico svg { width: 18px; height: 18px; }
.hero-points strong { display: block; font-size: 13.5px; font-weight: 600; }
.hero-points li > span:last-child { font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .62); }

/* Hero foot: the Spotlight product card */
.hero-foot {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  padding: 0 clamp(24px, 4vw, 56px) clamp(20px, 2.4vw, 32px);
}
.arrows { display: flex; gap: 10px; }
.arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.arrow:hover { background: #fff; color: var(--ink); }
.arrow-line { border-color: var(--line); color: var(--ink); }
.arrow-line:hover { background: var(--ink); color: #fff; }
.arrow-accent { border: 0; background: var(--accent-fill); color: var(--accent-ink); }
.arrow-accent:hover { background: var(--accent-fill); filter: brightness(1.08); color: var(--accent-ink); }

.wish.wish-ghost {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  backdrop-filter: blur(6px);
}
.wish.wish-ghost[aria-pressed="true"] { color: var(--accent-light); }

/* Desktop: the headline block sits centred on the left, the spotlight bottom right */
@media (min-width: 1081px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; }
  .hero > .header-space { grid-column: 1 / -1; }
  .hero-content { grid-column: 1; grid-row: 2; }
  .hero-foot { grid-column: 2; grid-row: 2; align-self: end; grid-template-columns: min(460px, 34vw); }
}

/* Spotlight */
.spot { justify-self: end; display: grid; width: min(460px, 100%); }
.spot-card {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 18px;
  padding: 12px;
  border-radius: 22px;
  background: rgba(14, 14, 14, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(18px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.spot-card.is-active { opacity: 1; visibility: visible; transform: none; }
.spot-media { position: relative; }
.spot-card img { width: 136px; height: 168px; object-fit: cover; border-radius: 14px; }
.spot-badge { position: absolute; top: 8px; left: 8px; padding: 4px 8px; border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.spot-info { display: flex; flex-direction: column; padding: 6px 4px 2px 0; min-width: 0; }
.spot-kicker { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--accent-light); }
.spot-card .spot-name { font: 400 26px/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; margin: 12px 44px 6px 0; }
.spot-meta { font-size: 13px; color: rgba(255, 255, 255, .65); }
.spot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}
.spot-row strong { color: var(--accent-light); font-size: 17px; font-weight: 600; }
.spot-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.spot-link svg { width: 16px; height: 16px; transition: transform .2s; }
.spot-link:hover svg { transform: translateX(3px); }
.spot-card .wish { top: 14px; right: 14px; }
/* Progress bars: each fills in 5s, then the next product comes in (js/v3.js); tap one to jump. Paused on hover */
.spot { touch-action: pan-y; }
.spot-bar { display: flex; gap: 6px; margin: 1px 0 -5px; }
.spot-bar button { position: relative; flex: 1; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.spot-bar button::before, .spot-bar i { content: ""; position: absolute; left: 0; top: 11px; height: 2px; border-radius: 2px; }
.spot-bar button::before { right: 0; background: rgba(255, 255, 255, .2); transition: background .2s; }
.spot-bar button:hover::before { background: rgba(255, 255, 255, .4); }
.spot-bar i { width: 0; background: var(--accent-fill); }
.spot-bar button.done i { width: 100%; }
.spot-bar button.is-active i { animation: spot-fill 5s linear forwards; }
.spot.is-paused .spot-bar button.is-active i, .spot.is-offscreen .spot-bar button.is-active i { animation-play-state: paused; }
@keyframes spot-fill { to { width: 100%; } }

.wish {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.wish svg { width: 17px; height: 17px; }
.wish[aria-pressed="true"] { color: var(--accent-text); }
.wish[aria-pressed="true"] svg path { fill: currentColor; }

/* Sections */
.section { padding-top: clamp(64px, 8vw, 110px); }
.head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }

/* Categories: a bento of link cards. Tees tall on the left, Hoodies and Jackets side by side,
   Supplements wide underneath. The whole card is the link. */
.cats { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: repeat(2, clamp(240px, 21vw, 310px)); gap: 16px; }
.cat { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); background: #111; color: #fff; }
.cat:nth-child(1) { grid-row: span 2; }
.cat:nth-child(4) { grid-column: span 2; }
.cat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 55%); }
.cat:nth-child(4)::before { background: linear-gradient(90deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .1) 70%); }
.cat-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.cat-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.cat:hover .cat-media img { transform: scale(1.05); }
.cat-count, .cat-go { position: absolute; top: 16px; z-index: 1; }
.cat-count { left: 16px; padding: 6px 11px; border-radius: 999px; background: rgba(10, 10, 10, .5); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cat-go { right: 16px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--ink); transform: rotate(-45deg); transition: transform .35s ease, background .2s, color .2s; }
.cat-go svg { width: 18px; height: 18px; }
.cat:hover .cat-go { transform: none; background: var(--accent-fill); color: var(--accent-ink); }
.cat-body { position: absolute; left: 22px; right: 22px; bottom: 22px; }
.cat:nth-child(4) .cat-body { right: 45%; top: 50%; bottom: auto; transform: translateY(-40%); }
.cat h3 { margin-bottom: 10px; font: 400 clamp(28px, 2.6vw, 38px)/1 var(--f-display); text-transform: uppercase; }
.cat:is(:nth-child(1), :nth-child(4)) h3 { font-size: clamp(40px, 4.4vw, 64px); }
.cat p { max-width: 34ch; font-size: 13px; color: rgba(255, 255, 255, .78); }
.cat-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 18px; border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cat-cta svg { width: 16px; height: 16px; transition: transform .25s; }
.cat:hover .cat-cta svg { transform: translateX(4px); }

/* Featured: light section, collection tabs over a product carousel. Gold prices in the darker text gold */
.featured {
  --f-ink: var(--ink);
  --f-muted: var(--muted);
  --f-media: var(--media);
  --f-price: var(--accent-text);
  color: var(--f-ink);
}
.feat-head { display: flex; align-items: flex-end; gap: 32px; margin-bottom: 30px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--f-muted); margin-bottom: 10px; }

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 20px) / 3.35);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.grid::-webkit-scrollbar { display: none; }
.grid > li { scroll-snap-align: start; }
.prod-frame { position: relative; }
.prod-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: var(--f-media); }
.prod-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.prod-media .alt { opacity: 0; }
.prod:hover .prod-media .alt { opacity: 1; }
.prod:hover .prod-media img:first-child { transform: scale(1.04); }
.tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.prod .tag { background: rgba(10, 10, 10, .55); border: 1px solid rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(8px); }
.prod-frame > .wish { top: 12px; right: 12px; background: rgba(0, 0, 0, .45); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.plus { display: none; }
.quick {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  transform: translateY(10px);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 12px;
  border-radius: 14px;
  background: rgba(14, 14, 14, .8);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.prod:hover .quick, .quick:focus-within { opacity: 1; pointer-events: auto; transform: none; }
.quick span { flex: 1; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.quick button {
  min-width: 32px;
  height: 34px;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.quick button:hover { background: #fff; color: var(--ink); }
.quick .quick-add { flex: 1; background: var(--accent-fill); color: var(--accent-ink); }
.quick .quick-add:hover { background: var(--accent-fill); filter: brightness(1.08); color: var(--accent-ink); }
.quick button.added { background: var(--accent-fill); color: var(--accent-ink); }
.prod-info { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding-top: 14px; }
.prod-info h3 { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.prod-info h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.price { font-size: 15px; font-weight: 600; color: var(--f-price); white-space: nowrap; }
.prod-meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--f-muted); }
.swatches { display: inline-flex; gap: 5px; }
.swatches i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }

/* Featured head: headline, collection tabs in the middle, arrows on the right */
.feat-head .coll-tabs { margin: 0 auto 6px; }
.feat-head .arrows { margin-bottom: 6px; }
.coll-tabs { display: flex; gap: 2px; width: max-content; max-width: 100%; padding: 4px; border-radius: 999px; background: var(--sand); overflow-x: auto; scrollbar-width: none; }
.coll-tabs::-webkit-scrollbar { display: none; }
.coll-tab { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 13px/1 var(--f-body); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.coll-tab svg { width: 15px; height: 15px; }
.coll-tab sup { font-size: 11px; opacity: .6; }
.coll-tab:hover { color: var(--ink); }
.coll-tab.is-active { background: var(--ink); color: #fff; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.coll-tab.is-active svg { color: var(--accent-light); }
.car-progress { height: 2px; margin-top: 36px; border-radius: 2px; background: var(--line); overflow: hidden; }
.car-progress i { display: block; height: 100%; background: var(--accent-fill); transform-origin: left; transform: scaleX(.3); transition: transform .4s ease; }
.feat-foot { display: flex; justify-content: center; margin-top: 36px; }
.prod.is-filtered { animation: prod-in .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--fi, 0) * 60ms); }
@keyframes prod-in { from { opacity: 0; transform: translateY(18px); } }

.prod[hidden] { display: none; } /* filtered out by a collection tab */


/* Call to action pair: two tall photo cards */
.cta-head { margin: 0 auto 40px; max-width: 640px; text-align: center; }
.cta-head .eyebrow { color: var(--muted); }
.cta-sub { margin: 14px auto 0; max-width: 32em; font-size: 15px; color: var(--muted); }
.cp-tag { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cp-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; font-size: 14px; font-weight: 600; letter-spacing: .02em; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .4s ease; }
.cp-link svg { width: 18px; height: 18px; transition: transform .3s; }

.cp { gap: 20px; }
.cp-card { position: relative; display: flex; align-items: flex-end; height: clamp(480px, 48vw, 660px); border-radius: var(--r-xl); overflow: hidden; background: #1a1a1a; color: #fff; isolation: isolate; }
.cp-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.cp-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 70%); }
@media (max-width: 720px) { .cp-card::before { background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .6) 45%, rgba(0, 0, 0, 0) 75%); } }
.cp-card:hover img { transform: scale(1.06); }
.cp-card:hover .cp-link svg { transform: translateX(4px); }
.cp-text { padding: clamp(24px, 3.4vw, 44px); max-width: 520px; }
.cp-tag { margin-bottom: 18px; background: rgba(255, 255, 255, .14); color: var(--accent-light); backdrop-filter: blur(6px); }
.cp-text h3 { font: 400 clamp(40px, 4.6vw, 68px)/.95 var(--f-display); text-transform: uppercase; margin-bottom: 14px; }
.cp-text p { margin-bottom: 22px; font-size: 15px; color: rgba(255, 255, 255, .8); }

/* Side by side, the card you point at opens wide and the other steps back, so the two never compete */
.cp { display: flex; }
.cp-card { flex: 1; min-width: 0; transition: flex .8s cubic-bezier(.2, .7, .2, 1); }
.cp-card.is-on { flex: 1.9; }
.cp-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .6s ease; }
.cp-card:not(.is-on)::after { opacity: 1; }
.cp-text { min-width: 360px; }
/* tablets: the two cards sit side by side at equal width (no hover to open one, and the text needs the room) */
@media (max-width: 1080px) {
  .cp-card.is-on { flex: 1; }
  .cp-card:not(.is-on)::after { opacity: 0; }
  .cp-text { min-width: 0; }
}
/* touch screens wider than a phone: show the round add button, since hover quick-add isn't there */
@media (hover: none) and (min-width: 721px) {
  .plus { display: grid; place-items: center; position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4); }
  .plus svg { width: 18px; height: 18px; }
}
.cp-card:not(.is-on) :is(.cp-text p, .cp-link) { opacity: 0; }
.cp-card :is(.cp-text p, .cp-link) { transition: opacity .4s ease; }
.cp-card:not(.is-on) h3 { font-size: clamp(32px, 3vw, 44px); }
.cp-text h3 { transition: font-size .6s ease; }

/* Why Kingdom: pillar deck on the left (deck styles under Story); on the right the active
   pillar's title, its text and three facts of its own */
.faith .eyebrow { color: var(--muted); }
.faith { padding-bottom: clamp(64px, 8vw, 110px); } /* same breathing room below as above, before the black story band */
.faith-side { align-self: center; }
.faith-side .st-chapter h2 { margin: 0 0 20px; font-size: clamp(2.6rem, 4.4vw, 4rem); line-height: .95; }
.faith-side .st-chapter > p { max-width: 34em; margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-2); }

/* Pillar call to action: a dark box with a line and a button, one per pillar */
.faith-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
  padding: 22px 22px 22px 26px;
  border-radius: 20px;
  background: var(--dark);
  color: #fff;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .5);
}
.faith-cta strong { display: block; margin-bottom: 4px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.faith-cta span { display: block; font-size: 14px; color: rgba(255, 255, 255, .62); }
.faith-cta .btn { flex: none; }

/* Podcast: player and playlist */
/* Black band behind it (outside .page, straight after the story); the podcast itself stays a
   contained card at the page width, a shade lighter with a faint edge so it reads on the black */
.pod-wrap { padding: clamp(64px, 8vw, 110px) var(--pad); background: var(--dark); color: #f4f1ea; }
.pod { max-width: calc(var(--page) - 2 * var(--pad)); margin: 0 auto; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-xl); background: #151515; border: 1px solid rgba(255, 255, 255, .07); }
/* The "Words we live by" quote box sits under the podcast in the same black band, same width, same faint edge */
.pod-wrap .wq { max-width: calc(var(--page) - 2 * var(--pad)); margin: 24px auto 0; border: 1px solid rgba(255, 255, 255, .07); }
.pod-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
.pod .eyebrow { color: var(--accent-light); }
.pod-head-aside { max-width: 440px; }
.pod-head-aside p { font-size: 14.5px; color: rgba(244, 241, 234, .65); margin-bottom: 20px; }
.pod-head-aside .btn svg { width: 16px; height: 16px; }
.pod-body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; align-items: start; }
.player-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; }
.player-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.player-frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .55) 100%); pointer-events: none; }
.player-frame iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.player-frame.is-playing .player-play, .player-frame.is-playing::after { display: none; }
.player-play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--accent-ink);
  box-shadow: 0 0 0 12px rgba(233, 205, 140, .16);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .3s, box-shadow .3s;
}
.player-play svg { width: 28px; height: 28px; margin-left: 4px; }
.player-play:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 18px rgba(233, 205, 140, .12); }
.now { padding-top: 22px; }
.now-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 234, .55); }
.now-label em { font-style: normal; color: var(--accent-light); }
.now-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.8s ease infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.now h3 { font: 400 clamp(26px, 3vw, 40px)/1 var(--f-display); text-transform: uppercase; margin: 12px 0 8px; }
.now-sub { font-size: 14px; color: rgba(244, 241, 234, .6); }
.playlist { display: flex; flex-direction: column; max-height: 560px; padding: 18px 8px 8px; border-radius: 18px; background: #1d1d1d; }
/* desktop: as tall as the player beside it, and the episodes scroll inside (contain: size keeps the list from stretching the row) */
@media (min-width: 1081px) { .pod-body { align-items: stretch; } .playlist { max-height: none; contain: size; } }
.playlist-head { display: flex; justify-content: space-between; margin: 0 6px 8px; padding: 0 6px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 13px; color: rgba(244, 241, 234, .5); }
.playlist-head strong { color: #fff; font-size: 14px; }
.eps { display: grid; align-content: start; gap: 4px; flex: 1; min-height: 0; margin: 0; padding: 0 4px 0 0; list-style: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.ep {
  display: grid;
  grid-template-columns: 112px 1fr 18px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s;
}
.ep:hover { background: rgba(255, 255, 255, .05); }
.ep.is-active { background: rgba(233, 205, 140, .08); box-shadow: inset 2px 0 0 var(--accent); }
.ep-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ep-dur { position: absolute; right: 5px; bottom: 5px; padding: 2px 5px; border-radius: 4px; background: rgba(0, 0, 0, .78); font-size: 10.5px; font-weight: 600; }
.ep-text { display: flex; flex-direction: column; min-width: 0; }
.ep-text em { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-light); }
.ep-text strong { margin: 3px 0 2px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.ep-text span { font-size: 12.5px; color: rgba(244, 241, 234, .5); }
.ep-eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.ep.is-active .ep-eq { display: flex; }
.ep-eq i { width: 3px; height: 100%; border-radius: 1px; background: var(--accent-light); animation: eq 1s ease-in-out infinite; transform-origin: bottom; }
.ep-eq i:nth-child(2) { animation-delay: -.3s; }
.ep-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ep-eq i, .now-dot { animation: none; } }

/* Story */
.text-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.text-arrow svg { width: 18px; height: 18px; transition: transform .2s; }
.text-arrow:hover svg { transform: translateX(4px); }

/* Card deck, used by the faith pillars and the story chapters */
.st { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.st-deck-wrap { display: flex; flex-direction: column; align-items: center; }
.st-deck { position: relative; width: 100%; max-width: 440px; aspect-ratio: 4 / 5; max-height: 560px; touch-action: pan-y; }
.st-card {
  --i: 0;
  --r: 0deg;
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #0d0d0d;
  color: #fff;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .18);
  transform: translateY(calc(var(--i) * 14px)) scale(calc(1 - var(--i) * .04)) rotate(var(--r));
  z-index: calc(10 - var(--i));
  cursor: grab;
  user-select: none;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), opacity .4s ease;
}
.st-card.is-hidden { opacity: 0; }
.st-card.is-dragging { transition: none; cursor: grabbing; }
.st-card.is-out { transform: translateX(130%) rotate(16deg); opacity: 0; }
.st-card.is-out-left { transform: translateX(-130%) rotate(-16deg); opacity: 0; }
.st-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transform: scale(1.05); transition: opacity .9s ease, transform 6s ease; }
/* each pillar is a small slideshow: the front card crossfades through its photos (js/v3.js) */
.st-card img.is-on { opacity: 1; transform: none; }
.st-card-dots { position: absolute; top: 24px; right: 20px; z-index: 1; display: flex; gap: 4px; }
.st-card-dots i { width: 14px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); transition: background .3s, width .3s; }
.st-card-dots i.is-on { width: 22px; background: var(--accent-light); }
.st-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .8)); pointer-events: none; }
.st-card-brand { position: absolute; top: 20px; left: 20px; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; }
.st-card-brand svg { width: 18px; height: 18px; color: var(--accent-light); }
.st-card figcaption { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.st-card figcaption span { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: var(--accent-light); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.st-card figcaption strong { font: 400 clamp(28px, 2.8vw, 38px)/1 var(--f-display); text-transform: uppercase; }
.st-bars { display: flex; gap: 6px; width: 100%; max-width: 440px; margin-top: 48px; }
.st-bars span { flex: 1; height: 3px; border-radius: 3px; background: #e2e2e2; overflow: hidden; }
.st-bars i { display: block; width: 0; height: 100%; background: var(--accent-fill); }
.st-bars span.done i { width: 100%; }
.st-bars span.is-on i { animation: st-fill 6s linear forwards; }
.st.is-paused .st-bars span.is-on i,
.st.is-offscreen .st-bars span.is-on i { animation-play-state: paused; }
@keyframes st-fill { to { width: 100%; } }
.st-bars.st-timer { height: 0; margin: 0; visibility: hidden; } /* still animates, so the deck still turns on its own */

/* Why Kingdom: a gold "Swipe or tap" badge follows the mouse over the deck (js/v3.js adds it for mouse users only) */
.has-swipe-cursor { cursor: none; }
.swipe-cursor { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; }
.swipe-cursor span { display: grid; place-items: center; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--accent-fill); color: var(--accent-ink); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); font: 700 11px/1.25 var(--f-body); letter-spacing: .12em; text-align: center; text-transform: uppercase; transform: scale(0); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.swipe-cursor.is-on span { transform: scale(1); }
.swipe-cursor.is-pressed span { transform: scale(.82); }
.st-deck:focus-visible { outline: 2px solid var(--accent); outline-offset: 10px; border-radius: 26px; }
.st-side { display: flex; flex-direction: column; min-width: 0; }
.st-chapters { display: grid; }
/* one at a time: the old chapter fades out first, then the new one comes in, so the two never sit on top of each other */
.st-chapter { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; }
.st-chapter.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .25s, transform .45s ease .25s, visibility 0s .25s; }



/* Words we live by: rotating statement */

.wq { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(480px, 46vw, 620px); padding: clamp(28px, 5vw, 72px); border-radius: var(--r-xl); overflow: hidden; background: #0d0d0d; color: #fff; isolation: isolate; }
.wq-media { position: absolute; inset: 0 0 0 34%; z-index: -2; }
.wq-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transform: scale(1.06); filter: grayscale(.2); transition: opacity 1s ease, transform 8s linear; }
.wq-media img.is-on { opacity: 1; transform: scale(1); }
/* text on the left over solid black, the subject on the right with the photo fading in from the left */
.wq::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0d0d0d 0%, #0d0d0d 34%, rgba(13, 13, 13, .82) 46%, rgba(13, 13, 13, .25) 70%, rgba(13, 13, 13, 0) 100%), linear-gradient(0deg, rgba(13, 13, 13, .55), rgba(13, 13, 13, 0) 35%); }
.wq-mark { position: absolute; top: clamp(10px, 2vw, 24px); left: clamp(24px, 5vw, 64px); margin: 0; font: 400 clamp(140px, 16vw, 230px)/1 var(--f-display); color: transparent; background: var(--accent-fill); -webkit-background-clip: text; background-clip: text; }
.wq-quotes { display: grid; max-width: min(58%, 760px); margin-bottom: 40px; }
.wq-quote { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease, visibility .6s; }
.wq-quote.is-on { opacity: 1; visibility: visible; transform: none; }
.wq-quote blockquote { font: 400 clamp(36px, 4.8vw, 72px)/.98 var(--f-display); text-transform: uppercase; letter-spacing: .005em; }
.wq-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 15px; font-weight: 600; }
.wq-quote figcaption span { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--accent-light); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.wq-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wq-dots { display: flex; gap: 8px; }
/* 24px tall to tap, the visible line stays 3px */
.wq-dot { position: relative; width: 44px; height: 24px; margin: -10px 0; padding: 0; border: 0; background: none; cursor: pointer; }
.wq-dot::before, .wq-dot i { content: ""; position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; }
.wq-dot::before { right: 0; background: rgba(255, 255, 255, .25); }
.wq-dot i { display: block; width: 0; background: var(--accent-fill); }
.wq-dot.done i { width: 100%; }
.wq-dot.is-on i { animation: st-fill 7s linear forwards; }
.wq.is-paused .wq-dot.is-on i, .wq.is-offscreen .wq-dot.is-on i { animation-play-state: paused; }

/* Footer */
.footer { background: var(--dark); color: #fff; overflow: hidden; }
.footer-inner { max-width: var(--page); margin: 0 auto; padding: 64px var(--pad) 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand p { margin: 16px 0 22px; max-width: 24em; color: rgba(255, 255, 255, .6); font-size: 14px; }
.footer h3 { font: 400 18px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 18px; }
.footer li { margin-bottom: 10px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.footer li a:hover { color: #fff; }
.news-msg { margin-top: 10px; min-height: 1.4em; font-size: 13px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; color: rgba(255, 255, 255, .5); }

/* Footer extras: quick-action cards on top, social icons, and a bottom bar with legal links,
   payment methods and back to top. Payment methods and legal pages are placeholders to confirm. */
.ft-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 56px; }
.ft-card { display: flex; align-items: center; gap: 16px; padding: 22px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: #151515; transition: border-color .25s, background .25s; }
.ft-card:hover { border-color: rgba(201, 162, 75, .6); background: #181818; }
.ft-card-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-fill); color: var(--accent-ink); }
.ft-card-ico svg { width: 20px; height: 20px; }
.ft-card-text { min-width: 0; }
.ft-card-text strong { display: block; font-size: 15px; font-weight: 600; }
.ft-card-text span { display: block; margin-top: 3px; overflow: hidden; font-size: 13px; color: rgba(255, 255, 255, .55); text-overflow: ellipsis; white-space: nowrap; }
.ft-card-go { width: 18px; height: 18px; margin-left: auto; color: rgba(255, 255, 255, .5); transition: transform .25s, color .25s; }
.ft-card:hover .ft-card-go { transform: translateX(3px); color: var(--accent-light); }
.ft-social { display: flex; gap: 8px; }
.ft-social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; color: #fff; transition: background .2s, color .2s, border-color .2s; }
.ft-social a svg { width: 18px; height: 18px; }
.ft-social a:hover { border-color: transparent; background: var(--accent-fill); color: var(--accent-ink); }
.footer-bottom { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "copy pay" "legal top"; align-items: center; gap: 16px 24px; margin-top: 56px; padding-top: 26px; }
.ft-copy { grid-area: copy; }
.ft-legal { grid-area: legal; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer .ft-legal li, .footer .ft-pay li { margin: 0; }
.ft-pay svg { flex: none; width: 15px; height: 15px; fill: #f4f1ea; }
.ft-legal a { color: rgba(255, 255, 255, .55); transition: color .2s; }
.ft-legal a:hover { color: #fff; }
.ft-pay { grid-area: pay; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.footer .ft-pay li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: rgba(255, 255, 255, .75); }
.ft-top { grid-area: top; display: inline-flex; justify-self: end; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: none; color: #fff; font: 600 12.5px/1 var(--f-body); cursor: pointer; transition: background .2s, color .2s; }
.ft-top svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.ft-top:hover { background: #fff; color: var(--ink); }
@media (max-width: 1080px) { .ft-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .footer-bottom { grid-template-columns: 1fr; grid-template-areas: "copy" "legal" "pay" "top"; }
  .ft-pay { justify-content: flex-start; }
  .ft-top { justify-self: start; }
}

a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* ---------- Trust strip: one warm panel, four points with thin dividers ---------- */
.trust { padding-top: clamp(48px, 6vw, 80px); }
.faith + .trust { padding: 0 0 clamp(64px, 8vw, 110px); } /* after Why Kingdom (which already leaves room above), before the black story band */
.trust-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 24px 28px; border-radius: var(--r-lg); background: var(--sand); }
.trust-list li { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 0 20px; }
.trust-list li:first-child { padding-left: 0; }
.trust-list li + li { border-left: 1px solid rgba(0, 0, 0, .08); }
.trust-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--paper); color: var(--accent-text); }
.trust-ico svg { width: 22px; height: 22px; }
.trust-list strong { display: block; font-size: 14.5px; font-weight: 600; }
.trust-list div span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
@media (max-width: 1080px) {
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .trust-list li { padding: 0 16px 0 0; }
  .trust-list li + li { border-left: 0; }
}
@media (max-width: 720px) {
  .trust-list { gap: 12px; row-gap: 22px; padding: 18px; }
  .trust-list li { flex-direction: column; align-items: flex-start; gap: 10px; }
  .trust-ico { width: 38px; height: 38px; }
  .trust-ico svg { width: 18px; height: 18px; }
  .trust-list strong { font-size: 13px; }
  .trust-list div span { font-size: 12px; }
}

/* ---------- Reviews: two rows of review cards gliding in opposite directions, pausing on hover ----------
   Built like the old "Words" marquee. The quotes, names and the 0.0 / 00 rating are samples until real reviews come in. */
.rv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 16px; }
.rv-score { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.rv-score strong { font: 400 56px/1 var(--f-display); }
.rv-score span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.draft-note { display: inline-block; margin-bottom: 28px; padding: 6px 12px; border: 1px dashed #d9b866; border-radius: 8px; background: #fbf6e9; color: #8a6a22; font-size: 12px; }
.stars { display: inline-flex; gap: 2px; color: var(--accent); }
.stars svg { width: 15px; height: 15px; }
.rv-marquee { display: grid; gap: 16px; margin: 0 calc(-1 * var(--pad)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.rv-row { overflow: hidden; }
.rv-track { display: flex; gap: 16px; width: max-content; animation: rv-glide 80s linear infinite; }
.rv-row-rev .rv-track { animation-direction: reverse; }
.rv-marquee:hover .rv-track { animation-play-state: paused; }
@keyframes rv-glide { to { transform: translateX(calc(-50% - 8px)); } }
.rv-card { flex: none; display: flex; align-items: center; gap: 18px; width: 460px; margin: 0; padding: 16px 24px 16px 16px; border-radius: 20px; background: var(--card); }
.rv-card:nth-child(3n + 2) { background: #0d0d0d; color: #fff; }
.rv-card:nth-child(3n) { background: var(--accent-fill); color: var(--accent-ink); }
.rv-card:nth-child(3n + 2) .stars { color: var(--accent-light); }
.rv-card:nth-child(3n) .stars { color: var(--accent-ink); }
.rv-card img { flex: none; width: 76px; height: 76px; border-radius: 14px; object-fit: cover; }
.rv-card blockquote { margin: 6px 0; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.rv-card figcaption { font-size: 12.5px; opacity: .65; }
@media (prefers-reduced-motion: reduce) { .rv-track { animation: none; } .rv-row { overflow-x: auto; } }
@media (max-width: 720px) {
  .rv-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rv-score strong { font-size: 44px; }
  .rv-card { width: 300px; gap: 14px; padding: 14px 18px 14px 14px; }
  .rv-card img { width: 60px; height: 60px; }
  .rv-card blockquote { font-size: 14px; }
}

/* ---------- Instagram wall: five posts in a masonry. Tall post left, the other two columns split at different heights ---------- */
.ig-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.ig-head .eyebrow { font-size: 13px; letter-spacing: .04em; text-transform: none; color: var(--accent-text); }
.ig-sub { margin-top: 12px; color: var(--muted); }
.ig-head .btn svg { width: 18px; height: 18px; }
.ig-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, clamp(64px, 6.6vw, 96px)); grid-template-areas: "a b d" "a b d" "a b e" "a b e" "a c e" "a c e"; gap: 14px; }
.ig-list > li:nth-child(1) { grid-area: a; }
.ig-list > li:nth-child(2) { grid-area: b; }
.ig-list > li:nth-child(3) { grid-area: c; }
.ig-list > li:nth-child(4) { grid-area: d; }
.ig-list > li:nth-child(5) { grid-area: e; }
.ig-list > li:nth-child(3) img { object-position: 50% 22%; } /* keep "Jesus is King" on the back in frame */
.ig-list > li:nth-child(4) img { object-position: 50% 62%; } /* the jars, not the poster headline */
.ig-tile { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 20px; background: #eee; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.ig-hover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .35); color: #fff; opacity: 0; transition: opacity .3s ease; }
.ig-hover svg { width: 34px; height: 34px; }
.ig-tile:hover .ig-hover { opacity: 1; }
.ig-tile:hover img { transform: scale(1.05); }
@media (max-width: 720px) {
  .ig-head { flex-direction: column; align-items: flex-start; }
  .ig-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, 72px); grid-template-areas: "a b" "a b" "a c" "a c" "d e" "d e"; gap: 8px; }
  .ig-tile { border-radius: 14px; }
}

/* ---------- Closing: "Not of this world" as an endless band, solid and gold outline in turn, then the drop list
   on a gold band: what you get on the left, the form on the right. Dark, and it runs straight into the footer ---------- */
.closing { margin-top: clamp(64px, 8vw, 110px); padding: clamp(70px, 8vw, 120px) 0 clamp(64px, 8vw, 100px); background: var(--dark); box-shadow: 0 0 0 100vmax var(--dark); clip-path: inset(0 -100vmax); color: #f4f1ea; }
.fin-mq { margin-inline: calc(50% - 50vw); overflow: hidden; }
.fin-mq-track { display: flex; align-items: center; width: max-content; font: 400 clamp(80px, 12vw, 200px)/1.05 var(--f-display); text-transform: uppercase; animation: fin-mq 50s linear infinite; }
.fin-mq-track > * { flex: none; margin-right: .35em; }
.fin-mq-track .o { color: transparent; -webkit-text-stroke: 2px var(--accent); }
.fin-mq-track i { display: grid; place-items: center; color: var(--accent); }
.fin-mq-track i svg { width: .45em; height: .45em; }
@keyframes fin-mq { to { transform: translateX(-50%); } }

.fin-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 64px); margin-top: clamp(48px, 6vw, 84px); padding: clamp(32px, 4.4vw, 64px); border-radius: 28px; background: var(--accent-fill); color: var(--accent-ink); }
.fin-head { font: 400 clamp(48px, 5.4vw, 88px)/.9 var(--f-display); text-transform: uppercase; }
.fin-outline { color: transparent; -webkit-text-stroke: 2px var(--accent-ink); }
.fin-sub { max-width: 34em; margin-top: 18px; font-size: 16px; color: rgba(27, 20, 6, .75); }
.fin-perks { display: grid; gap: 10px; margin-top: 22px; }
.fin-perks li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.fin-perks svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--accent-ink); color: var(--accent-light); }

.fin-foot { display: flex; flex-direction: column; gap: 14px; }
.drop-form { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--dark); box-shadow: 0 18px 40px -18px rgba(27, 20, 6, .55); }
.drop-form { transition: box-shadow .2s; }
.drop-form:focus-within { box-shadow: 0 0 0 2px var(--accent-ink), 0 18px 40px -18px rgba(27, 20, 6, .55); }
.drop-field { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; }
.drop-field svg { flex: none; width: 19px; height: 19px; color: var(--accent-light); }
.drop-form input { flex: 1; min-width: 0; height: 46px; border: 0; background: none; color: #fff; font: 400 15px var(--f-body); outline: none; }
.drop-form input::placeholder { color: rgba(255, 255, 255, .45); }
.drop-form button { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); font: 600 13px/1 var(--f-body); letter-spacing: .04em; white-space: nowrap; cursor: pointer; transition: filter .2s; }
.drop-form button svg { width: 16px; height: 16px; }
.drop-form button:hover { filter: brightness(1.08); }
.fin-note { display: flex; align-items: center; gap: 8px; padding-left: 20px; font-size: 13px; color: rgba(27, 20, 6, .7); }
.fin-note svg { flex: none; width: 14px; height: 14px; }
.fin-foot .news-msg { margin-top: 0; padding-left: 20px; font-weight: 600; }
.fin-foot .news-msg:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .fin-mq-track { animation: none; } }
@media (max-width: 720px) {
  .fin-band { grid-template-columns: 1fr; border-radius: 22px; }
  .fin-sub { font-size: 15px; }
  /* stacked: the email field and the button each get a full-width row inside the dark card */
  .drop-form { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; border-radius: 30px; }
  .drop-field { flex: none; height: 52px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
  .drop-form input { height: 100%; font-size: 16px; } /* 16px stops iOS zooming in on focus */
  .drop-form button { justify-content: center; height: 52px; font-size: 13.5px; }
  .fin-note, .fin-foot .news-msg { padding-left: 6px; }
}

/* ---------- Giving back (#Kicks4Kids): two tabs. The drives as cards (a photo where we have one, a big date
   where we don't), then the ways to help as photo cards ---------- */
.give-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: 32px; }
.give-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--card); }
.give-tabs button { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 14px var(--f-body); cursor: pointer; transition: background .25s, color .25s; }
.give-tabs button:hover { color: var(--ink); }
.give-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.give-panel { animation: give-in .5s cubic-bezier(.2, .7, .2, 1); }
.give-panel[hidden] { display: none !important; }
@keyframes give-in { from { opacity: 0; transform: translateY(14px); } }
.give-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.gc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gc-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; padding: 24px; overflow: hidden; border-radius: var(--r-lg); color: #fff; isolation: isolate; }
.gc-card h3 { margin: 6px 0 6px; font: 400 clamp(28px, 2.6vw, 38px)/1 var(--f-display); text-transform: uppercase; }
.gc-card p { font-size: 14.5px; line-height: 1.5; opacity: .82; }
.gc-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-light); }
.gc-photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.gc-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .1) 60%); }
.gc-photo:hover img { transform: scale(1.04); }
.gc-date { justify-content: space-between; }
.gc-card .gc-big { font: 400 clamp(76px, 8vw, 120px)/.85 var(--f-display); text-transform: uppercase; opacity: 1; }
.gc-gold { background: var(--accent-fill); color: var(--accent-ink); }
.gc-gold .gc-kicker { color: var(--accent-ink); opacity: .7; }
.gc-dark { background: var(--dark); }
.gc-card.gc-dark .gc-big { color: transparent; -webkit-text-stroke: 2px var(--accent-light); }
.gc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 24px; padding: 22px 26px; border-radius: var(--r-lg); background: var(--card); }
.gc-foot p { max-width: 46em; font-size: 15.5px; color: var(--ink-2); }
.gc-foot-dark { background: var(--dark); }
.gc-foot-dark p { color: rgba(244, 241, 234, .75); }

@media (max-width: 1080px) {
  .gc-grid { grid-template-columns: minmax(0, 1fr); }
  .gc-card { min-height: 320px; }
}
@media (max-width: 720px) {
  .give-tabs { width: 100%; }
  .give-tabs button { flex: 1; padding: 0 12px; }
  /* the cards become a swipe row with the next one peeking in, instead of three tall cards stacked */
  .gc-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .gc-grid::-webkit-scrollbar { display: none; }
  .gc-card { min-height: 360px; padding: 20px; scroll-snap-align: start; }
  .gc-card h3 { font-size: 30px; }
  .gc-card .gc-big { font-size: 76px; }
  .give-head { margin-bottom: 24px; }
  .gc-foot { margin-top: 16px; }
  .gc-foot { padding: 20px; }
  .gc-foot .btn, .gc-foot .give-cta-actions { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .give-panel { animation: none; } }

/* ---------- Recent purchase note: slides in bottom right now and then (js/v3.js). Real orders only; the draft
   samples carry a "Sample" tag ---------- */
.buy-note { position: fixed; right: 20px; bottom: 20px; z-index: 180; display: flex; align-items: center; gap: 12px; width: min(340px, calc(100% - 24px)); padding: 10px 12px 10px 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(17, 17, 17, .94); backdrop-filter: blur(12px); box-shadow: 0 20px 44px -16px rgba(0, 0, 0, .5); color: #f4f1ea; transform: translateX(calc(100% + 40px)); visibility: hidden; transition: transform .55s cubic-bezier(.2, .8, .2, 1), visibility .55s; }
.buy-note.is-on { transform: none; visibility: visible; }
.buy-note img { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #222; }
.bn-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; color: rgba(244, 241, 234, .7); }
.bn-text strong { color: #fff; font-weight: 600; }
.bn-prod { display: block; overflow: hidden; margin: 1px 0 3px; font-size: 14px; font-weight: 600; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.bn-prod:hover { color: var(--accent-light); }
.bn-time { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(244, 241, 234, .5); }
.bn-time svg { width: 12px; height: 12px; color: var(--accent-light); }
.bn-tag { padding: 1px 6px; border-radius: 4px; background: rgba(233, 205, 140, .16); color: var(--accent-light); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bn-close { position: relative; display: grid; flex: none; align-self: flex-start; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: rgba(244, 241, 234, .6); cursor: pointer; }
.bn-close::after { content: ""; position: absolute; inset: -8px; }
.bn-close:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.bn-close svg { width: 14px; height: 14px; transform: rotate(45deg); }
@media (max-width: 720px) {
  .buy-note { right: 12px; bottom: 12px; width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) { .buy-note { transform: none; opacity: 0; transition: opacity .3s, visibility .3s; } .buy-note.is-on { opacity: 1; } }

/* ---------- Cookie notice: small dark card bottom left, slides in after the loading screen (js/v3.js) ---------- */
.cookie { position: fixed; left: 20px; bottom: 20px; z-index: 185; width: min(330px, calc(100% - 24px)); padding: 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: rgba(17, 17, 17, .95); backdrop-filter: blur(12px); box-shadow: 0 20px 44px -16px rgba(0, 0, 0, .5); color: #f4f1ea; opacity: 0; transform: translateY(16px); visibility: hidden; transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1), visibility .55s; }
.cookie[hidden] { display: none; }
.cookie.is-on { opacity: 1; transform: none; visibility: visible; }
.ck-head { display: flex; align-items: center; gap: 10px; }
.ck-ico { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-fill); color: var(--accent-ink); }
.ck-ico svg { width: 18px; height: 18px; }
.ck-title { font: 600 14.5px/1.2 var(--f-body); letter-spacing: -.005em; text-transform: none; color: #fff; }
.ck-text { margin: 10px 0 14px; font-size: 13px; line-height: 1.55; color: rgba(244, 241, 234, .66); }
.ck-text a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 3px; }
.ck-text a:hover { color: #fff; }
.ck-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ck-btn { min-height: 40px; padding: 0 14px; border-radius: 999px; font: 600 13px var(--f-body); cursor: pointer; transition: background .2s, border-color .2s, filter .2s; }
.ck-decline { border: 1px solid rgba(255, 255, 255, .22); background: none; color: #f4f1ea; }
.ck-decline:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); }
.ck-accept { border: 0; background: var(--accent-fill); color: var(--accent-ink); }
.ck-accept:hover { filter: brightness(1.08); }
.ck-btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
@media (max-width: 720px) {
  .cookie { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 14px; }
  .ck-text { margin: 8px 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .cookie { transform: none; transition: opacity .3s, visibility .3s; } }

/* ---------- Announcement bar: fixed at the very top while the header rests, slides up with the first scroll ---------- */
.announce { position: fixed; top: 0; left: 0; right: 0; z-index: 101; display: flex; align-items: center; justify-content: center; gap: 12px; height: var(--an-h); padding: 0 16px; border: 0; background: var(--accent-fill); color: var(--accent-ink); font: 500 13px/1 var(--f-body); cursor: pointer; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.past-top .announce { transform: translateY(-100%); }
.an-tag { flex: none; white-space: nowrap; padding: 5px 9px; border-radius: 999px; background: var(--accent-ink); color: var(--accent-light); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.an-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-text strong { font-weight: 700; }
.an-short { display: none; }
.an-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.an-cta svg { width: 14px; height: 14px; transition: transform .25s; }
.announce:hover .an-cta svg { transform: translateX(3px); }
@media (max-width: 720px) {
  :root { --an-h: 36px; }
  .announce { gap: 8px; font-size: 12px; }
  .an-long, .an-cta { display: none; }
  .an-short { display: inline; }
  .an-text::after { content: " \2192"; font-weight: 700; }
}

/* ---------- Pre-order pop-up ---------- */
.po { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 20px; }
.po[hidden] { display: none; }
.po-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 5, .72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s ease; }
.po-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(880px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: var(--r-xl); background: var(--paper); color: var(--ink); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.po.is-open .po-backdrop { opacity: 1; }
.po.is-open .po-card { opacity: 1; transform: none; }
.po-close { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); cursor: pointer; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4); }
.po-close svg { width: 18px; height: 18px; transform: rotate(45deg); }
.po-media { position: relative; min-height: 460px; background: #181818; }
.po-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.po-badge { position: absolute; top: 16px; left: 16px; padding: 6px 11px; border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.po-flip { position: absolute; left: 50%; bottom: 16px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(13, 13, 13, .7); backdrop-filter: blur(8px); transform: translateX(-50%); }
.po-flip button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .75); font: 600 12.5px var(--f-body); cursor: pointer; }
.po-flip button.is-on { background: #fff; color: var(--ink); }
.po-body { display: flex; flex-direction: column; padding: clamp(26px, 3.4vw, 40px); }
.po-kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.po-body h2 { margin: 8px 0 12px; font-size: clamp(36px, 4vw, 52px); line-height: .95; }
.po-body h2 span { color: transparent; background: var(--accent-fill); -webkit-background-clip: text; background-clip: text; }
.po-text { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.po-price { margin: 16px 0 18px; font: 400 30px/1 var(--f-display); }
.po-label { margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.po-label strong { color: var(--ink); font-weight: 600; }
/* colour swatches and the size dropdown share one row */
.po-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 22px; }
.po-pick .po-label { display: block; }
.po-swatches { display: flex; gap: 10px; min-height: 46px; align-items: center; }
.po-swatch { width: 34px; height: 34px; padding: 0; border: 2px solid var(--paper); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .2s; }
.po-swatch.is-on { box-shadow: 0 0 0 2px var(--ink); }
.po-select { position: relative; }
.po-select select { width: 100%; height: 46px; padding: 0 40px 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: 600 14px var(--f-body); cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color .2s; }
.po-select select:hover, .po-select select:focus { border-color: var(--ink); outline: none; }
.po-select select:invalid { color: var(--muted); }
.po-select.is-missing select { border-color: #b3261e; }
.po-select svg { position: absolute; top: 50%; right: 14px; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; }
.po-msg { min-height: 20px; margin: 10px 0 6px; font-size: 13px; font-weight: 600; color: #b3261e; }
.po-buy { justify-content: center; width: 100%; }
.po-buy svg { width: 16px; height: 16px; }
.po-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
.po-note a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .po { align-items: end; padding: 0; }
  /* compact sheet: a small photo beside the title and price, everything else full width under it */
  .po-card { grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: start; max-height: 90vh; max-height: 90svh; padding: 24px 18px calc(20px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; transform: translateY(40px); }
  .po-card::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: #e2e0da; }
  .po-body { display: contents; }
  .po-media { grid-column: 1; grid-row: 1 / span 3; min-height: 0; height: 140px; overflow: hidden; border-radius: 14px; }
  .po-badge { display: none; }
  .po-flip { bottom: 6px; gap: 2px; padding: 3px; }
  .po-flip button { min-height: 26px; padding: 0 9px; font-size: 11px; }
  .po-card { grid-template-rows: auto auto 1fr; }
  .po-kicker, .po-body h2, .po-price { grid-column: 2; }
  .po-kicker { grid-row: 1; }
  .po-body h2 { grid-row: 2; }
  .po-price { grid-row: 3; align-self: end; } /* sits level with the bottom of the photo */
  .po-kicker { padding-right: 40px; font-size: 11px; letter-spacing: .14em; }
  .po-body h2 { margin: 6px 0 8px; font-size: 32px; }
  .po-price { margin: 0; font-size: 24px; }
  .po-text, .po-pick, .po-msg, .po-buy, .po-note { grid-column: 1 / -1; }
  .po-text { margin-top: 14px; font-size: 14px; line-height: 1.55; }
  .po-pick { gap: 16px; margin-top: 14px; }
  .po-swatches { gap: 8px; }
  .po-msg { min-height: 18px; margin: 8px 0 4px; }
  .po-note { margin-top: 12px; text-align: center; }
  .po-close { top: 14px; right: 12px; width: 34px; height: 34px; background: var(--sand); box-shadow: none; }
  .po-close svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .po-card, .po-backdrop { transition: opacity .2s; transform: none; } }

/* ---------- Loading screen: crown, wordmark and a gold line, then the curtain lifts (js/v3.js) ---------- */
.loader { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: #0b0b0b; color: #f4f1ea; transition: transform .9s cubic-bezier(.76, 0, .24, 1); animation: ld-fallback .01s 4.5s forwards; }
.loader.is-done { transform: translateY(-100%); }
@keyframes ld-fallback { to { transform: translateY(-100%); visibility: hidden; } }
.ld-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ld-crown { width: 46px; height: 46px; color: var(--accent); animation: ld-crown .9s cubic-bezier(.2, .8, .2, 1) both; }
.ld-word { margin: 0; overflow: hidden; font: 400 clamp(44px, 7vw, 76px)/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; animation: ld-rise .9s .15s cubic-bezier(.2, .8, .2, 1) both; }
.ld-sub { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--accent-light); animation: ld-fade .8s .45s ease both; }
.ld-bar { width: 140px; height: 2px; margin-top: 14px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.ld-bar i { display: block; width: 100%; height: 100%; background: var(--accent-fill); transform: scaleX(0); transform-origin: left; animation: ld-fill 1.1s .2s cubic-bezier(.6, 0, .2, 1) forwards; }
.ld-quick .ld-bar i { animation-duration: .45s; animation-delay: 0s; }
@keyframes ld-crown { from { opacity: 0; transform: translateY(10px) scale(.8); } }
@keyframes ld-rise { from { opacity: 0; transform: translateY(40%); } }
@keyframes ld-fade { from { opacity: 0; } }
@keyframes ld-fill { to { transform: scaleX(1); } }
html.is-loading { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .loader { transition: opacity .4s; }
  .loader.is-done { transform: none; opacity: 0; }
  .ld-crown, .ld-word, .ld-sub, .ld-bar i { animation: none; transform: none; }
}

/* ---------- Mini cart: floating bar at the bottom once something is in the cart ---------- */
.mini-cart { position: fixed; left: 50%; bottom: 20px; z-index: 190; display: flex; align-items: center; gap: 14px; width: min(580px, calc(100% - 24px)); padding: 10px 10px 10px 12px; border: 1px solid rgba(201, 162, 75, .35); border-radius: 22px; background: rgba(17, 17, 17, .94); backdrop-filter: blur(12px); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .55); color: #f4f1ea; transform: translate(-50%, calc(100% + 40px)); visibility: hidden; transition: transform .5s cubic-bezier(.2, .8, .2, 1), visibility .5s; }
.mini-cart.is-open { transform: translate(-50%, 0); visibility: visible; }
.mc-thumbs { display: flex; flex: none; }
.mc-thumbs img { width: 46px; height: 46px; border: 2px solid #111; border-radius: 12px; object-fit: cover; background: #222; }
.mc-thumbs img + img { margin-left: -18px; }
.mc-thumbs img:first-child { animation: mc-in .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes mc-in { from { transform: translateY(10px) scale(.8); opacity: 0; } }
.mc-text { flex: 1; min-width: 0; }
.mc-text strong { display: block; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mc-text span { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 13px; color: rgba(244, 241, 234, .6); white-space: nowrap; }
.mc-text b { font-weight: 600; color: #f4f1ea; }
.mc-text em { font-style: normal; }
.mc-text i { width: 3px; height: 3px; margin: 0 4px; border-radius: 50%; background: currentColor; }
.mc-btn { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); font-size: 14px; font-weight: 600; transition: filter .2s; }
.mc-btn:hover { filter: brightness(1.08); }
.mc-btn svg { width: 16px; height: 16px; }
.mc-close { display: grid; flex: none; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: rgba(244, 241, 234, .7); cursor: pointer; }
.mc-close:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.mc-close svg { width: 16px; height: 16px; transform: rotate(45deg); }
/* small round buttons: a 6px larger invisible ring to tap */
.arrow, .mc-close { position: relative; }
.wish::after, .plus::after, .arrow::after, .mc-close::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
@media (max-width: 720px) {
  .mini-cart { bottom: 12px; gap: 10px; padding: 8px; border-radius: 18px; }
  .mc-thumbs img { width: 40px; height: 40px; border-radius: 10px; }
  .mc-thumbs img:nth-child(n + 2) { display: none; }
  .mc-text span { font-size: 12px; }
  .mc-text .mc-in-cart, .mc-text .mc-sub { display: none; }
  .mc-btn { height: 42px; padding: 0 14px; font-size: 13px; }
  .mc-btn svg { display: none; }
  .mc-close { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .mini-cart, .mc-thumbs img:first-child { transition: none; animation: none; } }

/* Tablet */
@media (max-width: 1080px) {
  .nav, .mega { display: none; }
  .menu-btn { display: inline-grid; }
  .head-cta { display: none !important; }
  .logo { margin-right: auto; }
  .hero-foot { grid-template-columns: 1fr; }
  .spot { justify-self: stretch; width: auto; max-width: 520px; }
  .grid { grid-auto-columns: calc((100% - 20px) / 2.3); }
  .feat-head { flex-wrap: wrap; justify-content: space-between; row-gap: 22px; }
  .feat-head .coll-tabs { order: 3; margin: 0; }
  .cats { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: minmax(240px, auto); }
  .cat:nth-child(1) { grid-row: auto; grid-column: span 2; height: 340px; }
  .pod-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .pod-body { grid-template-columns: 1fr; }
  .playlist { max-height: 460px; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: span 3; }
}

/* Phone */
@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .hide-sm { display: none !important; }
  .hero-wrap { --mq-h: 180px; }
  .header.is-stuck { left: calc(2% + 10px); right: calc(2% + 10px); }
  /* phones: the photo sits 40px up and fills the top 520px, framed on his face and the JESUS patch on his chest,
     which stays clear (no darkening) down to about 385px. Then it fades to black and the text starts just under
     the patch, where John marked it (the hero is taller so the content sits lower) */
  .hero { min-height: calc(1175px + var(--mq-h) / 2); padding-top: 10px; background-color: #070707; }
  .hero-img { inset: -40px 0 auto; height: 560px; object-position: 62% 50%; }
  .hero::before { background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .05) 110px, rgba(0, 0, 0, .06) 385px, rgba(7, 7, 7, .62) 445px, #070707 510px); }
  .header { top: calc(var(--an-h) + 12px); left: calc(2% + 10px); right: calc(2% + 10px); height: 58px; padding: 0 8px 0 16px; }
  /* all five header icons on phones (search, wishlist, cart, account, menu): a touch smaller so they fit beside the logo */
  .header { gap: 8px; padding: 0 6px 0 14px; }
  .header .icon-btn { width: 36px; height: 36px; }
  .header-space { height: calc(78px + var(--an-h)); }
  .logo { font-size: 22px; }
  .hero-content { align-self: end; padding: 20px; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4rem); }
  .hero-foot { padding: 0 20px 18px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-note { max-width: calc(100vw - 115px); font-size: 13px; } /* wraps before it reaches the spinning badge on small phones */
  .hero-note .hero-note-go { display: none; }
  .hero-points { gap: 12px; margin-top: 26px; }
  .hero-points li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-points strong { font-size: 13px; }
  .hero-points li > span:last-child { font-size: 12px; }
  .arrow { width: 38px; height: 38px; }
  .spot-card { grid-template-columns: 104px 1fr; gap: 14px; padding: 10px; }
  .spot-card img { width: 104px; height: 132px; }
  .spot-card .spot-name { font-size: 21px; margin-top: 8px; }
  .spot-meta { font-size: 12.5px; }

  .head { flex-wrap: wrap; }

  .grid { grid-auto-columns: 72%; gap: 12px; }
  .feat-head .arrows { display: none; }
  .cats { gap: 10px; }
  .cat:nth-child(1) { height: 300px; }
  .cat-body { left: 14px; right: 14px; bottom: 14px; }
  .cat:nth-child(4) .cat-body { right: 14px; top: auto; bottom: 14px; transform: none; }
  .cat:nth-child(4)::before { background: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 60%); }
  .cat:not(:nth-child(1), :nth-child(4)) p { display: none; }
  .cat-count { display: none; }
  .cat-go { width: 34px; height: 34px; top: 10px; right: 10px; }
  .prod-info { grid-template-columns: 1fr; padding-top: 10px; }
  .prod-info h3 { font-size: 14px; }
  .price { font-size: 14px; }
  .prod-meta { font-size: 12px; }
  .tag { top: 10px; left: 10px; font-size: 10.5px; padding: 5px 8px; }
  .quick { display: none; }
  .plus { display: grid; place-items: center; position: absolute; z-index: 2; right: 8px; bottom: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); }
  .prod-frame > .wish { top: 8px; right: 8px; }
  .cp-card { height: 460px; }
  .cp { flex-direction: column; }
  .cp-card, .cp-card.is-on { flex: none; }
  .cp-card:not(.is-on)::after { opacity: 0; }
  .cp-card:not(.is-on) :is(.cp-text p, .cp-link) { opacity: 1; }
  .cp-card:not(.is-on) h3 { font-size: clamp(40px, 4.6vw, 68px); }
  .cp-text { min-width: 0; }

  .faith-cta { flex-direction: column; align-items: flex-start; padding: 20px; }
  .pod { padding: 22px 16px; border-radius: 22px; }
  .faith-cta .btn { width: 100%; justify-content: center; }
  .player-play { width: 64px; height: 64px; }
  .player-play svg { width: 22px; height: 22px; }
  .ep { grid-template-columns: 96px 1fr 14px; gap: 12px; padding: 8px; }

  .st { grid-template-columns: minmax(0, 1fr); gap: 64px; } /* the cards behind stick out under the deck, so the text needs the room */
  .st-deck { max-width: 300px; }
  .st-bars { max-width: 340px; margin-top: 40px; }

  .wq { min-height: 520px; padding: 24px; border-radius: 22px; }
  .wq-media { inset: 0; }
  .wq::before { background: linear-gradient(0deg, rgba(13, 13, 13, .95) 0%, rgba(13, 13, 13, .75) 50%, rgba(13, 13, 13, .3) 100%); }
  .wq-quotes { max-width: none; }
  .wq-quote blockquote { font-size: 34px; }
  .wq-foot { flex-direction: column; align-items: flex-start; }
  .wq-dot { width: 32px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

/* ---------- Story, told on scroll ----------
   The Stud Von Axe "who we are" experience, in this site's own type and colours: a dark panel
   pins for the length of .ss (the extra height is the scroll that drives it), the background
   settles from a slight zoom, the text comes in out of a blur (the line letter by letter, the
   story word by word) and each photo joins at the side when the story reaches its phrase.
   js/v3.js drives it from scroll position only; it never moves the page. Without JS, under
   reduced motion and on phones it is a plain panel with everything visible. */
/* Full bleed: outside .page, dark edge to edge, no gaps or corners */
.ss { height: 420vh; background: var(--dark); }
.ss-stage {
  /* Pins to the top and fills the screen; the floating header sits on top of it, like in the hero */
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--dark); color: #f4f1ea; isolation: isolate;
}
.ss-bg {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 55% at 50% 45%, rgba(201, 162, 75, .16), rgba(201, 162, 75, 0) 70%), var(--dark);
  transform: scale(1.18);
}
.ss-track { display: contents; }
.ss-inner { position: relative; z-index: 1; width: min(700px, 52%); text-align: center; }
.ss-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 26px;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-light);
}
.ss-eyebrow svg { width: 15px; height: 15px; }
.ss-lead { margin: 0 0 26px; font: 400 clamp(30px, 3.5vw, 54px)/1.04 var(--f-display); text-transform: uppercase; letter-spacing: .005em; color: #fff; }
.ss-body { margin: 0 auto; max-width: 36em; font-size: clamp(16px, 1.22vw, 19px); line-height: 1.75; color: rgba(244, 241, 234, .78); }
.ss-key { color: #fff; transition: color .35s ease; }
.ss-key.is-current { color: var(--accent-light); }
.ss-cta { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 34px; }
/* Reveal units: words, and the letters of the lead line (spaces sit between spans) */
.ss [data-u] { display: inline-block; }

.ss-side { position: absolute; inset: 84px 0 0; z-index: 0; pointer-events: none; }
.ss-ph { position: absolute; margin: 0; overflow: hidden; border-radius: var(--r-md); background: #1a1a1a; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8); }
.ss-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-ph figcaption {
  position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px;
  background: rgba(13, 13, 13, .7); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  backdrop-filter: blur(6px);
}
/* Sized by the panel's height, so the three on each side stack with gaps on short screens too;
   max-width keeps them clear of the text column on narrow ones. */
.ss-ph { max-width: 16%; }
.ss-ph--l1 { left: 4%; top: 6%; height: 36%; aspect-ratio: 3 / 4; }
.ss-ph--l2 { left: 10%; top: 47%; height: 22%; aspect-ratio: 1 / 1; }
.ss-ph--l3 { left: 3%; top: 74%; height: 20%; aspect-ratio: 4 / 3; }
.ss-ph--r1 { right: 4%; top: 7%; height: 32%; aspect-ratio: 4 / 5; }
.ss-ph--r2 { right: 10%; top: 44%; height: 24%; aspect-ratio: 1 / 1; }
.ss-ph--r3 { right: 4%; top: 73%; height: 22%; aspect-ratio: 3 / 4; }
@media (max-width: 1080px), (max-height: 780px) {
  .ss-ph figcaption { display: none; }
}
@media (max-width: 1080px) {
  .ss-inner { width: min(620px, 58%); }
}

/* Phones, reduced motion: no pinning, everything shown, the photos as a grid under the text */
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
  .ss { height: auto; }
  .ss-stage { position: relative; top: 0; height: auto; min-height: 0; flex-direction: column; padding: 56px 22px 22px; }
  .ss-bg { transform: none; }
  .ss-inner { width: 100%; }
  .ss-side { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 36px; order: 2; }
  .ss-ph { position: relative; inset: auto; width: auto; height: auto; max-width: none; aspect-ratio: 1 / 1; opacity: 1 !important; transform: none !important; }
  .ss-ph figcaption { display: none; }
}

/* Phones (motion allowed): nothing reveals until the black panel fills the screen. Then the text holds still,
   centred on the black, for one screen of scrolling while it reveals (js/v3.js), and the photo grid follows. */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .ss { padding-top: 0; }
  .ss-stage { padding-top: 0; overflow: clip; } /* clip, not hidden: hidden would stop the text sticking */
  .ss-track { display: block; width: 100%; }
  .ss-track::after { content: ""; display: block; height: 100vh; height: 100svh; }
  .ss-inner { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; padding: 72px 0 24px; }
  .ss-eyebrow { align-self: center; }
}

/* Phones: the whole episode list sits in the page (no scroll box inside the scroll), and the footer card lines can wrap */
@media (max-width: 720px) {
  .playlist { max-height: none; }
  .eps { overflow: visible; padding-right: 0; }
  .ft-card-text span { white-space: normal; }
}