/* ============================================================================
   WILDERBLOMMETJIES — ONLINE STORE
   Design system. Square corners, brand gradients, lift-on-hover.
   Palette sampled from the logo, the Bible covers and the poster art.
   ========================================================================== */

:root {
  /* --- Brand palette ------------------------------------------------ */
  --sage:        #6B7A52;
  --sage-deep:   #4E5A3B;
  --sage-tint:   #EDF0E4;
  --lime:        #9FC23D;
  /* the deep tones are the text tones. Both are set dark enough to clear
     4.5:1 on cream, on white and on their own tint. */
  --lime-deep:   #5C7212;
  --lime-tint:   #F0F6DC;
  --coral:       #F5758C;
  --coral-deep:  #C4354F;
  --coral-tint:  #FDECEF;
  --lavender:    #8571B5;
  --lav-deep:    #6F5AA0;
  --lav-tint:    #F0ECF8;
  --amber:       #EAA832;
  --amber-deep:  #B8790F;
  --amber-tint:  #FCF2DF;
  --sunshine:    #EDD949;
  --rust:        #B85C2B;
  --rust-deep:   #8F4520;
  --rust-tint:   #F8EDE6;
  --sky:         #8EC5E8;

  --cream:       #FDF8EE;
  --cream-deep:  #F6EEDC;
  --paper:       #FFFFFF;
  --ink:         #23221B;
  --ink-soft:    #5B5A4E;
  --ink-faint:   #8C8A78;
  --line:        rgba(35, 34, 27, 0.12);
  --line-soft:   rgba(35, 34, 27, 0.07);

  /* --- Gradients ----------------------------------------------------- */
  --grad-brand:   linear-gradient(120deg, var(--coral) 0%, var(--lavender) 52%, var(--sage) 100%);
  --grad-warm:    linear-gradient(120deg, var(--amber) 0%, var(--coral) 100%);
  --grad-fresh:   linear-gradient(120deg, var(--lime) 0%, var(--sage) 100%);
  --grad-soft:    linear-gradient(160deg, var(--cream) 0%, var(--cream-deep) 100%);
  --grad-dusk:    linear-gradient(135deg, var(--lav-deep) 0%, var(--coral-deep) 100%);
  --grad-line:    linear-gradient(90deg, var(--coral), var(--amber), var(--lime), var(--lavender));

  /* --- Type ---------------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Rhythm -------------------------------------------------------- */
  --container: 1440px;
  --gutter: 28px;
  --radius: 0px;          /* square corners, by request */
  --radius-chip: 0px;
  --header-h: 64px;
  --bar-h: 0px;

  --ease:        cubic-bezier(.16, 1, .3, 1);
  --ease-soft:   cubic-bezier(.22, .61, .36, 1);
  --ease-bounce: cubic-bezier(.34, 1.4, .64, 1);

  --shadow-sm: 0 2px 0 rgba(35,34,27,.06);
  --shadow-md: 0 14px 34px -18px rgba(35,34,27,.45);
  --shadow-lg: 0 30px 60px -30px rgba(35,34,27,.5);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--bar-h) + 12px);
  overflow-x: hidden; width: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  width: 100%;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; }
p { margin: 0; }

::selection { background: var(--lime); color: var(--ink); }

html { scrollbar-width: thin; scrollbar-color: var(--coral) var(--cream-deep); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--cream-deep); }
::-webkit-scrollbar-thumb { background: var(--grad-brand); }
::-webkit-scrollbar-thumb:hover { background: var(--grad-dusk); }

/* ============================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 900px; }
.section { padding-block: clamp(64px, 8.5vw, 132px); }
.section-tight { padding-block: clamp(42px, 5.5vw, 78px); }

.band-cream  { background: linear-gradient(180deg, var(--cream-deep) 0%, #F9F2E3 100%); }
.band-paper  { background: linear-gradient(180deg, var(--paper) 0%, #FEFBF5 100%); }
.band-sage   { background: var(--sage); color: var(--cream); }
.band-ink    { background: var(--ink); color: var(--cream); }
.band-grad   { background: var(--grad-soft); }
.band-dusk   { background: var(--grad-dusk); color: #fff; }
/* A light, bright multi-tint wash, the same recipe as the hero sections,
   used where a band needs energy without going dark. Three variants so
   consecutive glow bands down a page don't all read identically: each
   swaps which tints lead and where they sit. */
.band-glow {
  background:
    radial-gradient(55% 65% at 8% 12%,  rgba(159,194,61,.22), transparent 62%),
    radial-gradient(55% 65% at 92% 88%, rgba(245,117,140,.20), transparent 64%),
    radial-gradient(45% 55% at 50% 100%, rgba(133,113,181,.16), transparent 66%),
    var(--grad-soft);
}
.band-glow-2 {
  background:
    radial-gradient(58% 62% at 92% 8%,  rgba(245,117,140,.22), transparent 62%),
    radial-gradient(50% 60% at 4% 92%,  rgba(234,168,50,.20), transparent 64%),
    radial-gradient(46% 50% at 60% 40%, rgba(159,194,61,.14), transparent 66%),
    var(--grad-soft);
}
.band-glow-3 {
  background:
    radial-gradient(52% 60% at 50% 0%,   rgba(133,113,181,.22), transparent 60%),
    radial-gradient(56% 64% at 96% 96%,  rgba(159,194,61,.20), transparent 64%),
    radial-gradient(40% 48% at 6% 80%,   rgba(245,117,140,.15), transparent 66%),
    var(--grad-soft);
}

.rule-top { border-top: 1px solid var(--line); }
.rule-bottom { border-bottom: 1px solid var(--line); }

/* ============================================================================
   TYPE HELPERS
   ========================================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; flex: none; opacity: .6; }
.eyebrow.center { justify-content: center; }
.eyebrow.on-dark { color: rgba(253,248,238,.74); }
.eyebrow.plain::before { display: none; }

.h-xl { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 400; }
.h-lg { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 400; }
.h-md { font-size: clamp(1.35rem, 2.1vw, 1.8rem); font-weight: 400; }
.h-sm { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 500; }

.lede { font-size: 15.5px; line-height: 1.68; color: var(--ink-soft); max-width: 58ch; }
.lede.center { margin-inline: auto; text-align: center; }
.muted { color: var(--ink-faint); }
.center { text-align: center; }

/* Centred head with a short rule beneath, the quiet default */
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: clamp(32px, 4vw, 54px); }
.section-head > h2::after {
  content: ''; display: block; width: 46px; height: 1px; margin: 16px auto 0;
  background: var(--ink); opacity: .35;
}
.section-head.left { align-items: flex-start; text-align: left; }
.section-head.left > h2::after { margin-inline: 0; }
.section-head.row { flex-direction: row; align-items: flex-end; justify-content: space-between; text-align: left; gap: 24px; flex-wrap: wrap; }
.section-head.row > h2::after { display: none; }
.section-head .head-left { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; }
.band-ink .section-head > h2::after, .band-sage .section-head > h2::after { background: var(--cream); }

/* ============================================================================
   BUTTONS
   ========================================================================== */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: var(--radius);
  font-size: 13.5px; font-weight: 500; letter-spacing: .03em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s;
}
.btn svg { transition: transform .35s var(--ease-bounce); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; }

.btn-primary { background: var(--sage-deep); color: var(--cream); }
.btn-primary:hover { background: var(--ink); }
.btn-primary:hover svg { transform: translateX(4px); }

.btn-outline { background: transparent; color: var(--ink); border-color: rgba(35,34,27,.3); }
.btn-outline:hover { border-color: var(--ink); background: var(--ink); color: var(--cream); }

.btn-light { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-light:hover { border-color: var(--ink); }

.btn-grad { background: var(--coral-deep); color: #fff; }
.btn-grad:hover { background: var(--ink); }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); }

.btn-sm { padding: 11px 20px; font-size: 12.5px; }
.btn-lg { padding: 17px 38px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .03em;
  padding-bottom: 3px; border-bottom: 1px solid rgba(35,34,27,.35);
  transition: gap .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow:hover { gap: 14px; color: var(--sage-deep); border-color: var(--sage-deep); }

/* ============================================================================
   HEADER
   ========================================================================== */
/* Fixed and transparent at rest, so every page's hero gradient bleeds up
   underneath it; once scrolled it becomes the same solid, blurred bar as
   before. Hero/page-head sections compensate with extra top padding so
   their readable content still clears the bar (see HERO and PAGE HEADER). */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: box-shadow .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.site-header.stuck {
  background: rgba(253, 248, 238, .96);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px rgba(35,34,27,.55);
}
/* A soft glow behind the mark and controls while the bar is transparent,
   so they stay legible over a photo or a busy gradient. */
.site-header:not(.stuck) .brand-icon,
.site-header:not(.stuck) .brand-word,
.site-header:not(.stuck) .nav-link,
.site-header:not(.stuck) .icon-btn,
.site-header:not(.stuck) .menu-toggle span {
  filter: drop-shadow(0 1px 3px rgba(253,248,238,.9)) drop-shadow(0 0 14px rgba(253,248,238,.7));
}

.header-inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  height: var(--header-h);
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
}

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-logo { width: 44px; height: 44px; object-fit: contain; flex: none; transition: transform .5s var(--ease-bounce); }
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.06); }
.foot-brand .brand-logo { width: 58px; height: 58px; }
.brand-word {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: var(--sage-deep);
}
.foot-brand .brand-word { font-size: 17px; }
@media (max-width: 480px) { .brand-word { display: none; } }

/* --- Primary nav + mega menu --- */
.main-nav { display: flex; align-items: center; gap: 4px; justify-self: center; }
.nav-item { position: relative; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 15px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .3s var(--ease);
}
.nav-link::after {
  content: ''; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .38s var(--ease);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link .caret { transition: transform .3s var(--ease); }
.nav-item.open .nav-link .caret { transform: rotate(180deg); }

.nav-item.has-mega { position: static; }
.mega {
  position: fixed; top: calc(var(--mega-top, var(--header-h)) + 1px); left: 50%; transform: translate(-50%, 10px);
  width: min(960px, 92vw); background: var(--paper); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); padding: 28px; z-index: 70;
  max-height: calc(100vh - var(--mega-top, var(--header-h)) - 24px); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
}
.nav-item.open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.mega::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--grad-line); }
.mega-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.mega-tile { display: flex; flex-direction: column; position: relative; overflow: hidden; background: var(--paper); }
.mega-tile .mt-img { aspect-ratio: 1 / 1; overflow: hidden; }
.mega-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.mega-tile:hover img { transform: scale(1.08); }
.mega-tile .mt-cap { flex: 1; padding: 12px 14px 14px; background: var(--paper); }
.mega-tile .mt-img { background: var(--cream-deep); }
.mega-tile .mt-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.mega-tile .mt-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-top: 3px; transition: color .3s var(--ease); }
.mega-tile:hover .mt-name { color: var(--coral-deep); }
.mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.mega-links { display: flex; gap: 20px; flex-wrap: wrap; }
.mega-links a { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); transition: color .3s var(--ease); }
.mega-links a:hover { color: var(--coral-deep); }

/* --- Header actions --- */
.header-actions { display: flex; align-items: center; gap: 2px; }
.icon-btn {
  position: relative; display: grid; place-items: center; width: 42px; height: 42px;
  color: var(--ink); transition: color .3s var(--ease);
}
.icon-btn svg { transition: transform .4s var(--ease-bounce); }
.icon-btn:hover { color: var(--coral-deep); }
.icon-btn:hover svg { transform: translateY(-3px) scale(1.06); }
.icon-btn:focus-visible { outline: 2px solid var(--lavender); outline-offset: 1px; }
.icon-btn .pill {
  position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; background: var(--coral-deep); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
  transform: scale(0); transition: transform .4s var(--ease-bounce);
}
.icon-btn .pill.on { transform: scale(1); }

.menu-toggle { display: none; position: relative; width: 42px; height: 42px; place-items: center; color: var(--ink); }
.menu-toggle span { display: grid; place-items: center; grid-area: 1 / 1; transition: opacity .25s, transform .3s var(--ease); }
.menu-toggle .mt-close { opacity: 0; transform: scale(.6) rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .mt-open { opacity: 0; transform: scale(.6) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .mt-close { opacity: 1; transform: scale(1) rotate(0); }

/* --- Search overlay --- */
.search-panel {
  position: fixed; inset: 0; z-index: 90; background: rgba(35,34,27,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
}
.search-panel.open { opacity: 1; visibility: visible; }
.search-sheet {
  background: var(--cream); border-bottom: 1px solid var(--line);
  padding: 30px var(--gutter) 34px; transform: translateY(-100%); transition: transform .45s var(--ease);
  max-height: 88vh; overflow-y: auto;
}
.search-panel.open .search-sheet { transform: none; }
.search-form { display: flex; align-items: center; gap: 14px; max-width: var(--container); margin-inline: auto; border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.search-form input {
  flex: 1; border: 0; background: none; outline: none;
  font-family: var(--font-display); font-size: clamp(1.4rem, 3.2vw, 2.3rem); font-weight: 500;
}
.search-form input::placeholder { color: var(--ink-faint); }
.search-results { max-width: var(--container); margin: 26px auto 0; }
.search-meta { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px; }
.search-suggest { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.chip:hover { transform: translateY(-2px); border-color: var(--ink); background: var(--ink); color: var(--cream); }

/* --- Mobile drawer --- */
.mobile-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 90vw); z-index: 95;
  background: var(--cream); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .45s var(--ease);
  display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none;
}
.mobile-drawer::-webkit-scrollbar { display: none; }
.mobile-drawer.open { transform: none; }
.md-head { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); border-bottom: 1px solid var(--line); }
.md-body { padding: 10px var(--gutter) 40px; }
.md-group + .md-group { border-top: 1px solid var(--line-soft); }
.md-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0;
  font-family: var(--font-display); font-size: 21px; font-weight: 600;
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.md-link:hover { color: var(--coral-deep); padding-left: 6px; }
.md-sub { display: grid; gap: 2px; padding-bottom: 14px; }
.md-sub a { padding: 8px 0 8px 14px; font-size: 14px; color: var(--ink-soft); border-left: 2px solid var(--line); transition: border-color .3s var(--ease), color .3s var(--ease), padding-left .3s var(--ease); }
.md-sub a:hover { color: var(--coral-deep); border-color: var(--coral); padding-left: 20px; }
.scrim { position: fixed; inset: 0; background: rgba(35,34,27,.5); opacity: 0; visibility: hidden; z-index: 88; transition: opacity .35s var(--ease), visibility .35s; }
.scrim.on { opacity: 1; visibility: visible; }

/* ============================================================================
   HERO
   ========================================================================== */
/* The photograph is the hero: the open Bible, whole, uncropped, on a fabric
   mat that bleeds off the right edge. The copy sits on a warm gradient field
   beside it. */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 62% at 2% 10%,   rgba(245,117,140,.13), transparent 62%),
    radial-gradient(58% 66% at 26% 104%, rgba(159,194,61,.20), transparent 64%),
    radial-gradient(40% 48% at 52% 0%,   rgba(133,113,181,.11), transparent 66%),
    var(--grad-soft);
  /* The header now floats over the top of the page (transparent until
     scrolled), so it no longer reserves its own space: the hero fills the
     full viewport itself, and its gradient bleeds up behind the bar. dvh so
     mobile browser chrome collapsing does not leave a gap or force a scroll. */
  min-height: 100vh;
  min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  align-items: center; gap: clamp(28px, 4vw, 60px);
}
/* Pads the copy out to the same left edge as every other section, without
   negative margins, so the photo can still reach the viewport edge. Extra
   top padding clears the fixed, transparent header. */
.hero-copy-col {
  display: flex; align-items: center; position: relative; z-index: 2;
  padding: calc(var(--header-h) + clamp(32px, 5vh, 80px)) 0 clamp(32px, 5vh, 80px)
           max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
.hero-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.hero-title { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 300; line-height: 1.06; letter-spacing: -.005em; }
/* Each word carries its pillar's colour, so the hero and the pillars below
   read as one idea rather than a decorated headline. */
.hero-title .word { display: inline-block; font-style: italic; }
.hero-title .w-faith { color: var(--lav-deep); }
.hero-title .w-love  { color: var(--coral-deep); }
.hero-title .w-learn { color: var(--amber-deep); }
.hero-title .w-grow  { color: var(--lime-deep); }
.hero-sub { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); max-width: 42ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 10px; }
.hero-trust div { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.hero-trust svg { color: var(--lime-deep); flex: none; }

.hero-plate {
  position: relative; align-self: center;
  aspect-ratio: 1230 / 800;
  max-height: calc(100dvh - 150px);
  margin-right: calc(-1 * max(0px, (100vw - var(--container)) / 2));
}
/* the mat: a lime field offset behind the photo, like a fabric square laid
   under it on the table */
.hero-plate::before {
  content: ''; position: absolute; inset: 30px 30px -30px -30px; z-index: 0;
  background: linear-gradient(140deg, var(--lime-tint), var(--coral-tint) 120%);
  border: 1px solid var(--line-soft);
}
.hero-plate picture, .hero-plate video {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%;
  overflow: hidden; border: 1px solid var(--line); background: var(--paper);
}
.hero-plate img, .hero-plate video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  display: block; transition: transform 1.4s var(--ease);
}
.hero-plate:hover img, .hero-plate:hover video { transform: scale(1.03); }

.hero-tag {
  position: absolute; z-index: 3;
  background: var(--paper); border: 1px solid var(--line); padding: 12px 16px;
  box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 11px;
}
.hero-tag strong { font-family: var(--font-display); font-size: 16px; font-weight: 700; display: block; }
.hero-tag span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.hero-tag.t1 { left: -52px; bottom: -34px; animation: floaty 7s ease-in-out infinite; }
.hero-tag.t2 { right: 34px; top: -24px; animation: floaty 8.5s ease-in-out infinite reverse; }
.hero-tag .dot { width: 34px; height: 34px; display: grid; place-items: center; background: var(--grad-fresh); color: #fff; flex: none; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .hero-tag { animation: none !important; } }

/* Kept as a faint warmth behind the hero, not a colour wash */
.hero-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .14; pointer-events: none; }
.hero-blob.b1 { width: 420px; height: 420px; background: var(--coral); top: -130px; left: -110px; }
.hero-blob.b2 { width: 360px; height: 360px; background: var(--lime); bottom: -150px; left: 22%; }
.hero-blob.b3 { width: 300px; height: 300px; background: var(--lavender); top: 26%; left: 34%; opacity: .1; }

/* short laptop screens: let it scroll rather than crush the content */
@media (max-height: 620px) and (min-width: 1025px) {
  .hero { min-height: auto; padding-block: 40px; }
  .hero-plate { max-height: none; }
}
/* Below the split, the photo becomes a band above the copy and takes only
   the height the copy can spare, so the fold stays exact here too. */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; align-items: stretch; }
  .hero-plate {
    aspect-ratio: auto; height: 40vh; height: 40dvh;
    max-height: none; margin-right: 0;
  }
  .hero-plate::before { display: none; }
  .hero-plate picture, .hero-plate video { border: 0; border-bottom: 1px solid var(--line); }
  .hero-copy-col { padding: calc(var(--header-h) + 24px) var(--gutter) 30px; align-items: flex-start; }
  .hero-copy { gap: 14px; }
  .hero-trust { gap: 14px; padding-top: 4px; }
  .hero-trust div { font-size: 11.5px; }
}
@media (max-width: 720px) {
  .hero-plate { height: 34vh; height: 34dvh; }
  .hero-actions .btn { padding: 13px 22px; font-size: 12.5px; }
}

/* ============================================================================
   CHARACTERS HERO — full viewport, with the companions floating free
   ========================================================================== */
.chars-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(58% 60% at 6% 10%,   rgba(133,113,181,.18), transparent 62%),
    radial-gradient(54% 58% at 94% 88%,  rgba(245,117,140,.15), transparent 64%),
    radial-gradient(42% 46% at 62% 100%, rgba(159,194,61,.18), transparent 66%),
    var(--grad-soft);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--line);
}
.chars-hero-crumbs {
  position: relative; z-index: 3; max-width: var(--container); width: 100%;
  margin-inline: auto; padding: calc(var(--header-h) + 20px) var(--gutter) 0;
}
.chars-hero-inner {
  position: relative; z-index: 2; flex: 1; min-height: 0;
  max-width: var(--container); width: 100%; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 60%) minmax(0, 1fr);
  align-items: center; gap: clamp(24px, 4vw, 60px);
  padding: clamp(20px, 4vh, 40px) var(--gutter) clamp(40px, 6vh, 74px);
}
.chars-hero-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
/* Big, like a page-head title, but tuned so each sentence still holds to
   one line rather than wrapping mid-word. */
.chars-hero-copy .page-title { font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1.14; }
.chars-hero-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.chars-hero-hint span:last-child { display: inline-block; animation: hintnudge 1.8s ease-in-out infinite; }
@keyframes hintnudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (hover: none), (pointer: coarse) { .chars-hero-hint { display: none; } }

/* The stage: a relative box the floating companions are pinned inside,
   sized to the right column and clear of both the copy and the strip below. */
.chars-hero-stage { position: relative; height: clamp(340px, 58vh, 620px); width: 100%; }
.chars-float {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
  animation: charfloat 7.5s ease-in-out infinite;
}
.chars-float:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 10px; border-radius: 16px; }
.chars-float.cf-meerkat { top: 0;   left: 34%; --cf-size: clamp(150px, 15vw, 220px); z-index: 3; }
.chars-float.cf-lamb    { top: 48%; left: 0;   --cf-size: clamp(120px, 12vw, 175px); z-index: 2; animation-delay: -2.4s; }
.chars-float.cf-cactus  { top: 56%; left: 58%; --cf-size: clamp(130px, 13vw, 195px); z-index: 2; animation-delay: -4.8s; }
.chars-float.cf-daisy   { top: 2%;  left: 74%; --cf-size: clamp(140px, 14vw, 210px); z-index: 2; animation-delay: -1.2s; }
.chars-float.cf-lion    { top: 80%; left: 30%; --cf-size: clamp(130px, 13vw, 195px); z-index: 1; animation-delay: -6s; }
.cf-glow {
  position: absolute; inset: 10%; z-index: 0; border-radius: 50%;
  background: var(--char-tone, var(--sage)); filter: blur(34px); opacity: .3;
  transition: opacity .4s var(--ease), transform .5s var(--ease-bounce);
}
.cf-art {
  position: relative; z-index: 1; width: var(--cf-size, 180px); height: auto; object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(35,34,27,.18));
  transition: transform .5s var(--ease-bounce);
}
.cf-tag {
  position: relative; z-index: 2; opacity: 0; transform: translateY(6px);
  background: var(--paper); border: 1px solid var(--line); padding: 6px 14px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-sm); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.chars-float:hover, .chars-float:focus-visible { animation-play-state: paused; z-index: 4; }
.chars-float:hover .cf-art, .chars-float:focus-visible .cf-art { transform: scale(1.1) rotate(-3deg); }
.chars-float:hover .cf-glow, .chars-float:focus-visible .cf-glow { opacity: .55; transform: scale(1.18); }
.chars-float:hover .cf-tag, .chars-float:focus-visible .cf-tag { opacity: 1; transform: translateY(0); }

@keyframes charfloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .chars-float { animation: none !important; }
  .chars-hero-hint span:last-child { animation: none !important; }
}
@media (max-height: 620px) and (min-width: 1025px) {
  .chars-hero { min-height: auto; }
  .chars-hero-inner { padding-block: 30px 50px; }
}
@media (max-width: 1024px) {
  .chars-hero { min-height: auto; }
  .chars-hero-inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 8px; padding-top: 6px; }
  .chars-hero-stage { height: clamp(280px, 44vh, 420px); order: 2; margin-top: 36px; }
}
@media (max-width: 640px) {
  .chars-hero-stage { margin-top: 48px; }
}
@media (max-width: 640px) {
  .chars-float.cf-meerkat { top: 0;   left: 30%; }
  .chars-float.cf-lamb    { top: 40%; left: -2%; }
  .chars-float.cf-cactus  { top: 50%; left: 56%; }
  .chars-float.cf-daisy   { top: 0;   left: 70%; }
  .chars-float.cf-lion    { top: 82%; left: 26%; }
}

/* ============================================================================
   USP STRIP — icon lifts
   ========================================================================== */
.usp-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.usp {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 11px; padding: 22px 20px;
  border-right: 1px solid var(--line-soft); background: var(--paper);
  transition: background .4s var(--ease);
}
.usp:last-child { border-right: 0; }
.usp:hover { background: linear-gradient(180deg, var(--paper), var(--lime-tint)); }
.usp::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--grad-fresh); transform: scaleY(0); transform-origin: bottom;
  transition: transform .4s var(--ease);
}
.usp:hover::after { transform: scaleY(1); }
.usp-ico {
  display: grid; place-items: center; flex: none; color: var(--sage-deep);
  transition: transform .45s var(--ease-bounce);
}
.usp:hover .usp-ico { transform: translateY(-4px); }
.usp h4 { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.usp p { display: none; }   /* one line only, the heading says it */

/* ============================================================================
   CATEGORY GRID
   ========================================================================== */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-grid.rows-2 > *:nth-child(1), .cat-grid.rows-2 > *:nth-child(6) { grid-column: span 2; }
.cat-card {
  position: relative; display: block; overflow: hidden; background: var(--ink); isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cat-card .cc-img { position: absolute; inset: 0; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .6s var(--ease); }
.cat-card:hover img { transform: scale(1.07); }
/* A graded scrim rather than a flat one: light at the top so the product
   still reads, heavy at the bottom where the words sit. */
/* The words sit at the foot of the tile, where the scrim is heaviest, so
   the product stays visible above them and the type stays readable. */
.cat-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,19,14,.04) 0%, rgba(20,19,14,.24) 44%, rgba(18,17,12,.82) 100%);
  transition: background .55s var(--ease);
}
.cat-card:hover::after, .cat-card:focus-visible::after {
  background: linear-gradient(180deg, rgba(78,90,59,.20) 0%, rgba(24,23,17,.44) 42%, rgba(16,15,11,.90) 100%);
}
.cat-body { position: relative; z-index: 2; height: 100%; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: 6px; padding: 24px 24px 28px; color: #fff; }
.cat-grid.rows-2 > *:nth-child(1) .cat-body, .cat-grid.rows-2 > *:nth-child(6) .cat-body { min-height: 360px; }
.cat-eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.cat-name { position: relative; font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 400; padding-bottom: 10px; }
/* the brand rule sweeps out from the middle under the name */
.cat-name::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px;
  background: var(--grad-line);
  transition: left .55s var(--ease), right .55s var(--ease);
}
.cat-card:hover .cat-name::after, .cat-card:focus-visible .cat-name::after { left: 0; right: 0; }
.cat-blurb { display: none; }
.cat-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.86); }
.cat-go svg { transition: transform .4s var(--ease-bounce); }
.cat-card:hover .cat-go svg { transform: translateX(6px); }

/* ============================================================================
   PRODUCT CARD
   ========================================================================== */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.prod-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.pcard { position: relative; display: flex; flex-direction: column; background: transparent; transition: transform .45s var(--ease); }
.pcard:hover, .pcard:focus-within { transform: translateY(-5px); }

.pcard-media {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1; display: block; isolation: isolate;
  background: linear-gradient(150deg, var(--cream-deep) 0%, var(--sage-tint) 130%);
}
.pcard-media-link { position: absolute; inset: 0; display: block; z-index: 1; }
.pcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .55s var(--ease), transform .9s var(--ease); }
.pcard-media .img-alt { opacity: 0; }
.pcard:hover .pcard-media .img-main, .pcard:focus-within .pcard-media .img-main { opacity: 0; transform: scale(1.05); }
.pcard:hover .pcard-media .img-alt,  .pcard:focus-within .pcard-media .img-alt  { opacity: 1; transform: scale(1.05); }
/* a single pass of light across the picture, like turning it to the window */
.pcard-media::after {
  content: ''; position: absolute; inset: -20%; z-index: 2; pointer-events: none;
  background: linear-gradient(118deg, transparent 40%, rgba(255,255,255,.34) 50%, transparent 60%);
  transform: translateX(-115%);
  transition: transform .95s var(--ease);
}
.pcard:hover .pcard-media::after, .pcard:focus-within .pcard-media::after { transform: translateX(115%); }

.pcard-badges { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.badge {
  padding: 5px 10px; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.94); color: var(--ink-soft); border: 1px solid var(--line-soft);
}
.badge.grad { background: var(--coral-deep); color: #fff; border-color: transparent; }
.badge.fresh { background: var(--sage-deep); color: var(--cream); border-color: transparent; }
.badge.out { background: rgba(255,255,255,.94); color: var(--ink-faint); }

.pcard-fav {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--ink); border: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.pcard:hover .pcard-fav, .pcard-fav.on { opacity: 1; transform: none; }
.pcard-fav:hover { background: var(--coral); color: #fff; }
.pcard-fav.on { color: var(--coral-deep); }
.pcard-fav.on svg { fill: currentColor; }

.pcard-quick {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.pcard:hover .pcard-quick { opacity: 1; transform: none; }
@media (hover: none) { .pcard-quick { opacity: 1; transform: none; } .pcard-fav { opacity: 1; transform: none; } }

/* Card face carries image, title and price. Nothing else. */
.pcard-body { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 14px 22px; flex: 1; }
.pcard-title { font-family: var(--font-body); font-size: 14.5px; font-weight: 500; line-height: 1.35; transition: color .3s var(--ease); text-decoration: none; }
.pcard-title:hover, .pcard:hover .pcard-title, .pcard:focus-within .pcard-title { color: var(--sage-deep); text-decoration: none; }
.pcard-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.pcard-price .now { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); }
.pcard-price .was { font-size: 13px; color: var(--ink-faint); text-decoration: line-through; }
.stars { display: inline-flex; gap: 1px; color: var(--amber); }
.sw {
  width: 20px; height: 20px; border: 1px solid var(--line); position: relative; flex: none;
  transition: transform .3s var(--ease-bounce), box-shadow .3s var(--ease);
}
.sw:hover, .sw.on { transform: translateY(-3px) scale(1.1); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.sw.out::after { content: ''; position: absolute; inset: -1px; background: linear-gradient(to top right, transparent 46%, var(--ink-faint) 46%, var(--ink-faint) 54%, transparent 54%); }
.sw-more { font-size: 11px; font-weight: 800; color: var(--ink-faint); align-self: center; }

/* ============================================================================
   CAROUSEL / RAIL
   ========================================================================== */
.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(258px, 1fr);
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 8px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-nav { display: flex; gap: 8px; }
.rail-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), opacity .3s;
}
.rail-btn:hover { background: var(--ink); color: var(--cream); transform: translateY(-3px); }
.rail-btn[disabled] { opacity: .3; pointer-events: none; }

/* ============================================================================
   FEATURE BANNER
   ========================================================================== */
.feature {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  border: 1px solid var(--line); background: var(--paper); overflow: hidden;
}
.feature.flip .feat-media { order: 2; }
.feat-media { position: relative; overflow: hidden; min-height: 460px; background: var(--cream-deep); }
.feat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.feature:hover .feat-media img { transform: scale(1.05); }
.feat-body { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(30px, 4vw, 62px); }
.feat-list { display: grid; gap: 10px; margin-top: 4px; }
.feat-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); }
.feat-list svg { color: var(--lime-deep); flex: none; margin-top: 3px; }
.feat-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.feat-pricebar { display: flex; align-items: center; gap: 14px; padding-top: 6px; }
.feat-pricebar .p { font-family: var(--font-display); font-size: 30px; font-weight: 700; }

/* ============================================================================
   CHARACTERS — big sections
   ========================================================================== */
.char-block { position: relative; overflow: hidden; }
.char-inner {
  max-width: var(--container); margin-inline: auto; padding: clamp(48px, 6vw, 96px) var(--gutter);
  display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px, 4vw, 70px); align-items: center;
}
.char-block.flip .char-art-col { order: 2; }
.char-art-col { position: relative; }
/* Compact variant for the homepage: art only, shorter block */
.char-block.compact .char-inner { padding-block: clamp(40px, 4.5vw, 68px); grid-template-columns: .85fr 1.15fr; }
.char-block.compact.flip .char-inner { grid-template-columns: 1.15fr .85fr; }
.char-block.compact .char-stage { aspect-ratio: 4 / 3; }

.char-stage {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1;
  overflow: visible;
}
.char-tone-rust  { --char-tone: #B85C2B; }
.char-tone-coral { --char-tone: #F5758C; }
.char-tone-lime  { --char-tone: #9FC23D; }
.char-tone-sage  { --char-tone: #6B7A52; }
.char-tone-amber { --char-tone: #EAA832; }
.char-tone-lavender { --char-tone: #8571B5; }
.char-tone-orange { --char-tone: #F0932B; }
.char-stage::before {
  content: ''; position: absolute; height: 86%; width: auto; aspect-ratio: 1; border-radius: 50%;
  background: var(--char-tone, var(--sage)); opacity: .3;
  transition: transform 1s var(--ease), opacity .6s var(--ease);
}
.char-block:hover .char-stage::before { transform: scale(1.1); opacity: .42; }
/* Full-resolution transparent artwork, so it can fill the stage properly. */
.char-art { position: relative; z-index: 2; width: auto; height: 88%; object-fit: contain; transition: transform .8s var(--ease-bounce); }
.char-block:hover .char-art { transform: translateY(-12px) scale(1.04); }
/* Daisy's artwork fills more of its frame than the others, so she sits a touch smaller in her circle. */
#char-daisy .char-art { height: 76%; }
.char-scene { margin-top: 16px; border: 1px solid var(--line); overflow: hidden; background: var(--cream-deep); }
.char-scene img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .9s var(--ease); }
.char-scene:hover img { transform: scale(1.05); }

.char-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.char-name { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 400; }
.char-role { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.char-copy p { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); max-width: 52ch; }
.char-copy p + p { display: none; }   /* one paragraph per character, not two */
.char-traits { display: none; }
.char-num {
  position: absolute; top: clamp(20px, 3vw, 40px); right: var(--gutter);
  font-family: var(--font-display); font-size: clamp(5rem, 13vw, 11rem); font-weight: 700;
  line-height: .8; color: var(--ink); opacity: .05; pointer-events: none; user-select: none;
}

/* ============================================================================
   CONTACT PAGE — copy column stretched to match the form's height
   ========================================================================== */
.contact-split { align-items: stretch; }
.contact-copy {
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-start; gap: 28px;
}
.contact-copy-top { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.contact-list { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.contact-row {
  display: flex; gap: 16px; align-items: center; font-size: 15px;
  padding: 14px;
}
.contact-row b { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.link-plain { color: inherit; transition: color .25s var(--ease); }
.link-plain:hover { color: var(--coral-deep); }
.contact-ico {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  position: relative; z-index: 0; color: var(--char-tone, var(--sage-deep));
  transition: transform .4s var(--ease-bounce), color .35s var(--ease);
}
.contact-ico::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--char-tone, var(--sage)); opacity: .16;
  transition: opacity .35s var(--ease), transform .4s var(--ease-bounce);
}
.contact-row:hover .contact-ico { transform: scale(1.12) rotate(-6deg); color: #fff; }
.contact-row:hover .contact-ico::before { opacity: 1; transform: scale(1.06); }
@media (max-width: 900px) { .contact-copy { gap: 22px; } }

/* ============================================================================
   COMPANION CARDS — the "meet the companions" summary grid (story.html)
   ========================================================================== */
.companion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.companion-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: var(--paper); border: 1px solid var(--line);
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 28px) clamp(24px, 2.8vw, 30px);
  color: inherit; text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.companion-card:hover, .companion-card:focus-visible {
  transform: translateY(-7px); box-shadow: var(--shadow-md); border-color: var(--char-tone, var(--line));
}
.companion-card-stage {
  position: relative; width: 100%; max-width: 148px; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}
.companion-card-stage::before {
  content: ''; position: absolute; inset: 4%; border-radius: 50%;
  background: var(--char-tone, var(--sage)); opacity: .24;
  transition: transform .6s var(--ease-bounce), opacity .4s var(--ease);
}
.companion-card:hover .companion-card-stage::before { transform: scale(1.14); opacity: .38; }
.companion-card-stage img {
  position: relative; z-index: 1; width: 80%; height: 80%; object-fit: contain;
  transition: transform .5s var(--ease-bounce);
}
.companion-card:hover .companion-card-stage img { transform: translateY(-5px) scale(1.05); }
.companion-card-role { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--char-tone, var(--ink-faint)); }
.companion-card h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.companion-card p { color: var(--ink-soft); line-height: 1.65; font-size: 14.5px; }
.companion-card .link-arrow { margin-top: auto; padding-top: 8px; border-bottom: none; }
.companion-card:hover .link-arrow { gap: 14px; color: var(--char-tone, var(--sage-deep)); }
@media (max-width: 720px) { .companion-grid { grid-template-columns: 1fr; } }
.companion-card-soon {
  border-style: dashed; border-color: var(--line); background: var(--paper);
  color: var(--ink-faint);
}
.companion-card-soon:hover, .companion-card-soon:focus-visible {
  transform: none; box-shadow: none; border-color: var(--line);
}
.companion-card-stage-soon {
  width: 100%; max-width: 148px; aspect-ratio: 1 / 1; border-radius: 50%;
  border: 1.5px dashed var(--line); font-size: 2rem; font-weight: 300;
  color: var(--ink-faint); display: grid; place-items: center;
  background: var(--paper);
}
.companion-card-soon h3 { color: var(--ink-faint); }
.companion-card-soon p { color: var(--ink-faint); }

/* ============================================================================
   VIDEO SHELF
   ========================================================================== */
.vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.vcard { position: relative; overflow: hidden; background: var(--ink); display: block; border: 1px solid var(--line-soft); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.vcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.vcard-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.vcard.tall .vcard-media { aspect-ratio: 9 / 16; }
.vcard-media img, .vcard-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .5s var(--ease); }
.vcard:hover .vcard-media img, .vcard:hover .vcard-media video { transform: scale(1.05); }
.vcard-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,19,14,.8), rgba(20,19,14,.05) 60%); }
.vcard-play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
}
.vcard-play span {
  width: 68px; height: 68px; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--ink);
  transition: transform .45s var(--ease-bounce), background-color .35s var(--ease), color .35s var(--ease);
}
.vcard:hover .vcard-play span { transform: scale(1.12); background: var(--grad-warm); color: #fff; }
.vcard-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 18px 20px; color: #fff; display: flex; flex-direction: column; gap: 4px; }
.vcard-sub { font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); }
.vcard-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.vcard-dur { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 5px 9px; background: rgba(20,19,14,.72); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; }

.vid-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(15,14,10,.9); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; padding: var(--gutter); }
.vid-modal.open { opacity: 1; visibility: visible; }
.vid-modal video { width: min(1100px, 94vw); max-height: 84vh; background: #000; }
.vid-modal .vm-close { position: absolute; top: 20px; right: 24px; width: 46px; height: 46px; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; transition: background-color .3s, transform .3s var(--ease); }
.vid-modal .vm-close:hover { background: #fff; color: var(--ink); transform: rotate(90deg); }
.vid-modal .vm-note { color: rgba(255,255,255,.72); font-size: 14px; text-align: center; max-width: 46ch; }

/* ============================================================================
   REVIEWS
   ========================================================================== */
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rev {
  display: flex; flex-direction: column; gap: 14px; padding: 26px;
  background: var(--paper); border: 1px solid var(--line-soft);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s;
}
.rev:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line); }
.rev-quote { font-family: var(--font-display); font-size: 16.5px; line-height: 1.5; font-weight: 500; }
.rev-who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; }
.rev-who img { width: 42px; height: 42px; object-fit: cover; border: 1px solid var(--line); flex: none; }
.rev-name { font-size: 13.5px; font-weight: 800; }
.rev-place { font-size: 11.5px; color: var(--ink-faint); }
.rev-prod { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-deep); }

/* ============================================================================
   UGC GRID + STOCKISTS
   ========================================================================== */
.ugc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ugc-cell { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--cream-deep); display: block; }
.ugc-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s; }
.ugc-cell:hover img { transform: scale(1.09); }
.ugc-cell::after { content: attr(data-handle); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,19,14,.66); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; opacity: 0; transition: opacity .4s var(--ease); }
.ugc-cell:hover::after { opacity: 1; }

.stockists { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(22px, 4vw, 56px); }
.stockists img { height: 46px; width: auto; opacity: .5; filter: grayscale(1); transition: opacity .4s var(--ease), filter .4s var(--ease), transform .4s var(--ease); }
.stockists a:hover img { opacity: 1; filter: none; transform: translateY(-4px); }

/* ============================================================================
   NEWSLETTER
   ========================================================================== */
.news { position: relative; overflow: hidden; background: var(--sage-deep); color: var(--cream); }
.news-inner { max-width: 640px; margin-inline: auto; padding: clamp(58px, 7vw, 104px) var(--gutter); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.news h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 400; }
.news p { color: rgba(253,248,238,.75); max-width: 50ch; font-size: 15px; }
.news-form { display: flex; gap: 10px; width: min(520px, 100%); margin-top: 8px; flex-wrap: wrap; }
.news-form input {
  flex: 1 1 240px; padding: 15px 18px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.34); color: #fff; outline: none;
  transition: border-color .3s, background-color .3s;
}
.news-form input::placeholder { color: rgba(255,255,255,.62); }
.news-form input:focus { border-color: #fff; background: rgba(255,255,255,.2); }
.news-note { font-size: 12px; color: rgba(255,255,255,.6); }

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--ink); color: var(--cream); }
.foot-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr) 1.1fr; gap: 34px; padding-block: clamp(46px, 5vw, 72px); }
.foot-brand { display: flex; flex-direction: column; gap: 14px; }
.foot-brand .brand-word { color: var(--lime); }
.foot-blurb { font-size: 13.5px; color: rgba(253,248,238,.62); max-width: 34ch; line-height: 1.6; }
.foot-col h5 { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); margin-bottom: 14px; }
.foot-col a, .foot-col li { display: block; padding: 5px 0; font-size: 13.5px; color: rgba(253,248,238,.72); transition: color .3s var(--ease), transform .3s var(--ease); }
.foot-col a:hover { color: #fff; transform: translateX(4px); }
.foot-contact li { color: rgba(253,248,238,.72); }
.socials { display: flex; gap: 8px; margin-top: 6px; }
.socials a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(253,248,238,.22); color: var(--cream);
  transition: transform .4s var(--ease-bounce), background-color .3s, color .3s, border-color .3s;
}
.socials a:hover { transform: translateY(-4px); background: var(--lime); color: var(--ink); border-color: var(--lime); }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 22px; border-top: 1px solid rgba(253,248,238,.14); font-size: 12px; color: rgba(253,248,238,.55); }
.pay-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pay-chip { padding: 6px 10px; border: 1px solid rgba(253,248,238,.2); font-size: 10px; font-weight: 800; letter-spacing: .1em; color: rgba(253,248,238,.75); }
.foot-policies { display: flex; gap: 18px; flex-wrap: wrap; }
/* padded so each policy link clears a 24px tap target on a phone */
.foot-policies a { display: inline-block; padding-block: 4px; }
.foot-policies a:hover { color: #fff; }

/* ============================================================================
   PAGE HEADER (collection / content pages)
   ========================================================================== */
.page-head {
  position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(56% 64% at 4% 8%,   rgba(245,117,140,.16), transparent 62%),
    radial-gradient(50% 60% at 96% 92%, rgba(159,194,61,.18), transparent 64%),
    radial-gradient(40% 48% at 60% 0%,  rgba(133,113,181,.14), transparent 66%),
    var(--grad-soft);
}
/* Extra top padding clears the fixed, transparent header, whose bar the
   page's own gradient now runs up behind. */
.page-head-inner {
  max-width: var(--container); margin-inline: auto;
  padding: calc(var(--header-h) + clamp(34px, 4vw, 62px)) var(--gutter) clamp(34px, 4vw, 62px);
  display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2;
}
.page-head.slim .page-head-inner { padding-block: calc(var(--header-h) + 18px) 18px; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); flex-wrap: wrap; }
.crumbs a:hover { color: var(--coral-deep); }
.page-title { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 600; }

/* ============================================================================
   COLLECTION LAYOUT
   ========================================================================== */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 38px; align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 22px); display: flex; flex-direction: column; gap: 26px; }
.filter-group h5 { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }
.filter-list { display: grid; gap: 2px; }
.filter-list button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 12px; text-align: left; font-size: 13.5px; font-weight: 600;
  border-left: 2px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s, color .3s, padding-left .3s var(--ease);
}
.filter-list button:hover { background: var(--cream-deep); padding-left: 16px; }
.filter-list button.on { background: var(--sage-tint); color: var(--sage-deep); border-color: var(--sage-deep); font-weight: 600; }
.filter-list button .n { font-size: 11px; opacity: .6; }

.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.shop-count { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap select { appearance: none; padding: 11px 38px 11px 15px; border: 1px solid var(--line); background: var(--paper); font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .3s; }
.select-wrap select:hover { border-color: var(--ink); }
.select-wrap svg { position: absolute; right: 13px; pointer-events: none; }
.filter-toggle { display: none; }

.empty-state { padding: 70px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; border: 1px dashed var(--line); }

/* ============================================================================
   PRODUCT PAGE
   ========================================================================== */
.pdp { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(28px, 4vw, 62px); align-items: start; }

.gallery { display: grid; grid-template-columns: 84px 1fr; gap: 14px; position: sticky; top: calc(var(--header-h) + 22px); }
.thumbs { display: flex; flex-direction: column; gap: 10px; max-height: 560px; overflow-y: auto; scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumb {
  position: relative; aspect-ratio: 1; overflow: hidden; background: var(--cream-deep);
  border: 1px solid var(--line-soft); flex: none;
  transition: border-color .3s var(--ease), transform .35s var(--ease);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { transform: translateY(-3px); border-color: var(--ink); }
.thumb.on { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--ink); }
.thumb .tplay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,19,14,.45); color: #fff; }

.stage { position: relative; overflow: hidden; background: var(--cream-deep); border: 1px solid var(--line-soft); aspect-ratio: 1 / 1; }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease), transform .8s var(--ease); }
.stage img.on { opacity: 1; }
.stage.zoomable:hover img.on { transform: scale(1.35); }
.stage-badge { position: absolute; top: 14px; left: 14px; z-index: 3; }
.stage-hint { position: absolute; bottom: 14px; right: 14px; z-index: 3; padding: 7px 11px; background: rgba(255,255,255,.9); border: 1px solid var(--line); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

.stage-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
  display: grid; place-items: center; background: rgba(255,255,255,.92); border: 1px solid var(--line);
  border-radius: 50%; color: var(--ink); cursor: pointer; transition: background .25s var(--ease), transform .25s var(--ease);
}
.stage-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.stage-nav.prev { left: 14px; }
.stage-nav.next { right: 14px; }

.buybox { display: flex; flex-direction: column; gap: 20px; }
.pdp-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 600; }
.pdp-rating { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); }
.pdp-price { display: flex; align-items: baseline; gap: 12px; }
.pdp-price .now { font-family: var(--font-display); font-size: 32px; font-weight: 700; }
.pdp-price .was { font-size: 17px; color: var(--ink-faint); text-decoration: line-through; }
.pdp-price .save { padding: 5px 10px; background: var(--grad-warm); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.opt-block { display: flex; flex-direction: column; gap: 11px; }
.opt-label { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.opt-label b { color: var(--ink); font-weight: 800; }
.var-row { display: flex; gap: 10px; flex-wrap: wrap; }
.var {
  display: flex; align-items: center; gap: 10px; padding: 9px 13px 9px 9px;
  border: 1px solid var(--line); background: var(--paper); text-align: left;
  transition: transform .35s var(--ease-bounce), border-color .3s, box-shadow .3s;
}
.var:hover { transform: translateY(-3px); border-color: var(--ink); }
.var.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.var.out { opacity: .45; }
.var-thumb { width: 42px; height: 42px; object-fit: cover; border: 1px solid var(--line-soft); flex: none; background: var(--cream-deep); }
.var-name { font-size: 13px; font-weight: 800; display: block; line-height: 1.2; }
.var-sub { font-size: 11px; color: var(--ink-faint); }

.size-row { display: flex; gap: 8px; flex-wrap: wrap; }
.size-btn { padding: 11px 16px; border: 1px solid var(--line); background: var(--paper); font-size: 12.5px; font-weight: 700; transition: transform .3s var(--ease-bounce), border-color .3s, background-color .3s, color .3s; }
.size-btn:hover { transform: translateY(-3px); border-color: var(--ink); }
.size-btn.on { background: var(--sage-deep); color: var(--cream); border-color: var(--sage-deep); }

.qty-row { display: flex; gap: 12px; align-items: stretch; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--paper); flex: none; }
.qty button { width: 44px; height: 100%; display: grid; place-items: center; transition: background-color .3s, color .3s; }
.qty button:hover { background: var(--ink); color: var(--cream); }
.qty input { width: 48px; text-align: center; border: 0; outline: none; background: none; font-weight: 800; }
.qty-add { flex: 1; }
.qty-fav { flex: none; padding: 15px 18px; }

.stock-line { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; }
.stock-dot { width: 9px; height: 9px; background: var(--lime-deep); flex: none; }
.stock-line.out .stock-dot { background: var(--coral-deep); }

.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 4px; }
.trust-cell { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--cream-deep); transition: background-color .35s var(--ease), transform .35s var(--ease); }
.trust-cell:hover { transform: translateY(-4px); background: var(--lime-tint); }
.trust-cell svg { color: var(--sage-deep); }
.trust-cell span { font-size: 11.5px; font-weight: 700; line-height: 1.35; }

.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 17px 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; text-align: left; transition: color .3s; }
.acc-head:hover { color: var(--coral-deep); }
.acc-head .pm { position: relative; width: 16px; height: 16px; flex: none; }
.acc-head .pm::before, .acc-head .pm::after { content: ''; position: absolute; background: currentColor; transition: transform .35s var(--ease); }
.acc-head .pm::before { inset: 7px 0; height: 2px; }
.acc-head .pm::after { inset: 0 7px; width: 2px; }
.acc-item.open .acc-head .pm::after { transform: scaleY(0); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.acc-item.open .acc-panel { max-height: 700px; }
.acc-body { padding: 0 0 20px; font-size: 14.5px; color: var(--ink-soft); display: grid; gap: 11px; }

.pdp-video { margin-top: clamp(40px, 5vw, 72px); }

.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(253,248,238,.97); border-top: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: translateY(105%); transition: transform .45s var(--ease);
}
.sticky-buy.on { transform: none; }
.sticky-inner { max-width: var(--container); margin-inline: auto; padding: 12px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sticky-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sticky-left img { width: 48px; height: 48px; object-fit: cover; border: 1px solid var(--line); flex: none; }
.sticky-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-price { font-size: 13px; font-weight: 800; color: var(--ink-soft); }

/* ============================================================================
   CART DRAWER
   ========================================================================== */
.cart-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(440px, 92vw); z-index: 100;
  background: var(--cream); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .45s var(--ease);
  display: flex; flex-direction: column;
}
.cart-drawer.open { transform: none; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--gutter); border-bottom: 1px solid var(--line); }
.cart-head h3 { font-size: 21px; }
.cart-body { flex: 1; overflow-y: auto; padding: 8px var(--gutter); }
.cart-line { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.cart-line img { width: 76px; height: 86px; object-fit: cover; background: var(--cream-deep); border: 1px solid var(--line-soft); }
.cl-name { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.cl-var { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.cl-price { font-size: 13.5px; font-weight: 800; margin-top: 6px; }
.cl-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); margin-top: 8px; }
.cl-qty button { width: 28px; height: 28px; display: grid; place-items: center; font-weight: 800; transition: background-color .25s, color .25s; }
.cl-qty button:hover { background: var(--ink); color: var(--cream); }
.cl-qty span { min-width: 30px; text-align: center; font-size: 12.5px; font-weight: 800; }
.cl-remove { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); align-self: flex-start; transition: color .3s; }
.cl-remove:hover { color: var(--coral-deep); }
.cart-foot { padding: 20px var(--gutter) 26px; border-top: 1px solid var(--line); background: var(--paper); display: grid; gap: 12px; }
.cart-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.cart-row.total { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.ship-bar { height: 6px; background: var(--cream-deep); overflow: hidden; }
.ship-bar i { display: block; height: 100%; background: var(--grad-fresh); width: 0; transition: width .6s var(--ease); }
.ship-note { font-size: 12px; color: var(--ink-soft); }
.cart-empty { padding: 60px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--ink-faint); }

/* ============================================================================
   ACCOUNT
   ========================================================================== */
.acct-layout { display: grid; grid-template-columns: 240px 1fr; gap: 38px; align-items: start; }
.acct-nav { position: sticky; top: calc(var(--header-h) + 22px); display: grid; gap: 2px; }
.acct-nav button {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; text-align: left;
  font-size: 13.5px; font-weight: 700; border-left: 2px solid transparent;
  transition: background-color .3s, border-color .3s, color .3s, padding-left .3s var(--ease);
}
.acct-nav button:hover { background: var(--cream-deep); padding-left: 18px; }
.acct-nav button.on { background: var(--sage-tint); color: var(--sage-deep); border-color: var(--sage-deep); }
.acct-panel { display: none; }
.acct-panel.on { display: block; }

.card-box { background: var(--paper); border: 1px solid var(--line); padding: clamp(22px, 3vw, 34px); }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.field input, .field select, .field textarea {
  padding: 13px 15px; border: 1px solid var(--line); background: var(--cream); outline: none;
  transition: border-color .3s var(--ease), background-color .3s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); background: var(--paper); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.order-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.order-row:last-child { border-bottom: 0; }
.status { padding: 5px 11px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.status.done { background: var(--lime-tint); color: var(--sage-deep); }
.status.ship { background: var(--amber-tint); color: var(--amber-deep); }
.status.made { background: var(--lav-tint); color: var(--lav-deep); }

/* ============================================================================
   CONTENT / STORY
   ========================================================================== */
.prose { max-width: 70ch; display: grid; gap: 18px; }
.prose p { font-size: 16px; color: var(--ink-soft); line-height: 1.72; }
.prose h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-top: 14px; }
.prose a { color: var(--coral-deep); border-bottom: 1px solid currentColor; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.split-media { overflow: hidden; border: 1px solid var(--line); background: var(--cream-deep); }
.split-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .9s var(--ease); }
.split-media:hover img { transform: scale(1.05); }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat { background: var(--paper); padding: 26px 22px; display: flex; flex-direction: column; gap: 6px; transition: background-color .4s var(--ease); }
.stat:hover { background: var(--cream-deep); }
.stat b { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

.faq-list { display: grid; gap: 0; border-top: 1px solid var(--line); }

/* ============================================================================
   TOAST
   ========================================================================== */
.toast-host { position: fixed; right: 20px; bottom: 20px; z-index: 130; display: grid; gap: 10px; }
.toast {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: var(--ink); color: var(--cream); box-shadow: var(--shadow-lg);
  transform: translateY(20px); opacity: 0; transition: transform .4s var(--ease), opacity .4s var(--ease);
  max-width: 330px;
}
.toast.on { transform: none; opacity: 1; }
.toast svg { color: var(--lime); flex: none; }
.toast span { font-size: 13.5px; font-weight: 600; }

/* ============================================================================
   REVEAL ON SCROLL
   Plain elements (no data-anim) keep the original single fade+rise
   transition, staggered by data-delay="1".."5" in fixed .08s steps.
   An element that opts in with data-anim="<name>" instead plays one of
   the keyframe variants below, so entrances read as varied and a little
   more "alive" rather than one motion repeated down every page. Its
   data-delay is read in the same 1..5 steps but drives animation-delay,
   since the entrance is a keyframe animation rather than a transition.
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .4s; }

/* ---- data-anim entrance library --------------------------------------- */
.reveal[data-anim] { transition: none; transform: none; }
.reveal[data-anim].in {
  animation-duration: .95s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}
.reveal[data-anim][data-delay="1"] { animation-delay: .08s; }
.reveal[data-anim][data-delay="2"] { animation-delay: .16s; }
.reveal[data-anim][data-delay="3"] { animation-delay: .24s; }
.reveal[data-anim][data-delay="4"] { animation-delay: .32s; }
.reveal[data-anim][data-delay="5"] { animation-delay: .4s; }

[data-anim="rise"].in      { animation-name: a_rise; }
@keyframes a_rise      { from { opacity:0; transform:translateY(46px) } to { opacity:1; transform:none } }
[data-anim="drop"].in      { animation-name: a_drop; }
@keyframes a_drop      { from { opacity:0; transform:translateY(-46px) } to { opacity:1; transform:none } }
[data-anim="left"].in      { animation-name: a_left; }
@keyframes a_left      { from { opacity:0; transform:translateX(60px) } to { opacity:1; transform:none } }
[data-anim="right"].in     { animation-name: a_right; }
@keyframes a_right     { from { opacity:0; transform:translateX(-60px) } to { opacity:1; transform:none } }
[data-anim="zoomin"].in    { animation-name: a_zoomin; }
@keyframes a_zoomin    { from { opacity:0; transform:scale(.78) } to { opacity:1; transform:scale(1) } }
[data-anim="zoomout"].in   { animation-name: a_zoomout; }
@keyframes a_zoomout   { from { opacity:0; transform:scale(1.22) } to { opacity:1; transform:scale(1) } }
[data-anim="flipx"].in     { animation-name: a_flipx; }
@keyframes a_flipx     { from { opacity:0; transform:perspective(900px) rotateX(58deg); transform-origin:top } to { opacity:1; transform:perspective(900px) rotateX(0) } }
[data-anim="flipy"].in     { animation-name: a_flipy; }
@keyframes a_flipy     { from { opacity:0; transform:perspective(900px) rotateY(-62deg); transform-origin:left } to { opacity:1; transform:perspective(900px) rotateY(0) } }
[data-anim="swing"].in     { animation-name: a_swing; transform-origin: top center; }
@keyframes a_swing     { 0% { opacity:0; transform:rotate(-7deg) translateY(-30px) } 60% { opacity:1; transform:rotate(3deg) } 100% { transform:rotate(0) } }
[data-anim="blur"].in      { animation-name: a_blur; }
@keyframes a_blur      { from { opacity:0; filter:blur(16px); transform:scale(1.05) } to { opacity:1; filter:blur(0); transform:none } }
[data-anim="wipeup"].in    { animation-name: a_wipeup; }
@keyframes a_wipeup    { from { opacity:0; clip-path:inset(100% 0 0 0) } to { opacity:1; clip-path:inset(0 0 0 0) } }
[data-anim="wipedown"].in  { animation-name: a_wipedown; }
@keyframes a_wipedown  { from { opacity:0; clip-path:inset(0 0 100% 0) } to { opacity:1; clip-path:inset(0 0 0 0) } }
[data-anim="wipeleft"].in  { animation-name: a_wipeleft; }
@keyframes a_wipeleft  { from { opacity:0; clip-path:inset(0 0 0 100%) } to { opacity:1; clip-path:inset(0 0 0 0) } }
[data-anim="wiperight"].in { animation-name: a_wiperight; }
@keyframes a_wiperight { from { opacity:0; clip-path:inset(0 100% 0 0) } to { opacity:1; clip-path:inset(0 0 0 0) } }
[data-anim="skew"].in      { animation-name: a_skew; }
@keyframes a_skew      { from { opacity:0; transform:skewY(7deg) translateY(40px) } to { opacity:1; transform:none } }
[data-anim="pop"].in       { animation-name: a_pop; }
@keyframes a_pop       { 0% { opacity:0; transform:scale(.5) } 70% { opacity:1; transform:scale(1.08) } 100% { transform:scale(1) } }
[data-anim="tilt"].in      { animation-name: a_tilt; }
@keyframes a_tilt      { from { opacity:0; transform:rotate(-9deg) translate(-24px,24px) } to { opacity:1; transform:none } }
[data-anim="growx"].in     { animation-name: a_growx; transform-origin: left; }
@keyframes a_growx     { from { opacity:0; transform:scaleX(0) } to { opacity:1; transform:scaleX(1) } }
[data-anim="growy"].in     { animation-name: a_growy; transform-origin: bottom; }
@keyframes a_growy     { from { opacity:0; transform:scaleY(0) } to { opacity:1; transform:scaleY(1) } }
[data-anim="spiral"].in    { animation-name: a_spiral; }
@keyframes a_spiral    { from { opacity:0; transform:rotate(-28deg) scale(.6) } to { opacity:1; transform:none } }
[data-anim="diagUL"].in    { animation-name: a_diagUL; }
@keyframes a_diagUL    { from { opacity:0; transform:translate(48px,48px) } to { opacity:1; transform:none } }
[data-anim="diagUR"].in    { animation-name: a_diagUR; }
@keyframes a_diagUR    { from { opacity:0; transform:translate(-48px,48px) } to { opacity:1; transform:none } }
[data-anim="curtain"].in   { animation-name: a_curtain; }
@keyframes a_curtain   { from { opacity:0; clip-path:inset(0 50% 0 50%) } to { opacity:1; clip-path:inset(0 0 0 0) } }
[data-anim="bounce"].in    { animation-name: a_bounce; }
@keyframes a_bounce    { 0% { opacity:0; transform:translateY(50px) } 55% { opacity:1; transform:translateY(-10px) } 100% { transform:translateY(0) } }
[data-anim="rollin"].in    { animation-name: a_rollin; }
@keyframes a_rollin    { from { opacity:0; transform:rotate(-120deg) scale(.4) } to { opacity:1; transform:none } }
[data-anim="iris"].in      { animation-name: a_iris; }
@keyframes a_iris      { from { opacity:0; clip-path:circle(0% at 50% 50%) } to { opacity:1; clip-path:circle(75% at 50% 50%) } }
[data-anim="peel"].in      { animation-name: a_peel; }
@keyframes a_peel      { from { opacity:0; transform:perspective(900px) rotateY(30deg) rotateX(-10deg) } to { opacity:1; transform:none } }
[data-anim="rubber"].in    { animation-name: a_rubber; }
@keyframes a_rubber    { 0% { opacity:0; transform:scale(.3,1.4) } 50% { opacity:1; transform:scale(1.1,.9) } 100% { transform:scale(1,1) } }
[data-anim="slantup"].in   { animation-name: a_slantup; }
@keyframes a_slantup   { from { opacity:0; transform:translateY(60px) rotate(3deg) } to { opacity:1; transform:none } }
[data-anim="tuck"].in      { animation-name: a_tuck; }
@keyframes a_tuck      { from { opacity:0; transform:translateX(30px) scale(.9) } to { opacity:1; transform:none } }
[data-anim="spring"].in    { animation-name: a_spring; }
@keyframes a_spring    { 0% { opacity:0; transform:scale(0) } 70% { opacity:1; transform:scale(1.15) } 100% { transform:scale(1) } }
[data-anim="unfold"].in    { animation-name: a_unfold; }
@keyframes a_unfold    { from { opacity:0; transform:perspective(800px) rotateX(-75deg) } to { opacity:1; transform:perspective(800px) rotateX(0) } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 14px 20px; background: var(--ink); color: var(--cream); font-weight: 700; }
.skip-link:focus { left: 12px; top: 12px; }

/* Readable to a screen reader, invisible on screen */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid.rows-2 > *:nth-child(1), .cat-grid.rows-2 > *:nth-child(6) { grid-column: span 1; }
  .foot-top { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 1024px) {
  :root { --gutter: 22px; }
  .main-nav { display: none; }
  .menu-toggle { display: grid; }
  /* With the nav hidden, the middle grid track can collapse unpredictably
     and let header-actions drift away from the true right edge. Flex with
     space-between keeps the brand pinned left and actions pinned right. */
  .header-inner { display: flex; align-items: center; justify-content: space-between; }
  .hero-tag.t1 { left: 10px; } .hero-tag.t2 { right: 10px; }
  .usp-strip { grid-template-columns: repeat(2, 1fr); }
  .usp:nth-child(2) { border-right: 0; }
  .usp:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .feature, .feature.flip { grid-template-columns: 1fr; }
  .feature.flip .feat-media { order: 0; }
  .feat-media { min-height: 340px; }
  .char-inner, .char-block.flip .char-inner,
  .char-block.compact .char-inner, .char-block.compact.flip .char-inner { grid-template-columns: 1fr; }
  .char-block.flip .char-art-col { order: 0; }
  .vid-grid { grid-template-columns: repeat(2, 1fr); }
  .rev-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp { grid-template-columns: 1fr; }
  .gallery { position: static; }
  .shop-layout { grid-template-columns: 1fr; }
  .filters { position: static; display: none; padding: 20px; border: 1px solid var(--line); background: var(--paper); }
  .filters.open { display: flex; }
  .filter-toggle { display: inline-flex; }
  .acct-layout { grid-template-columns: 1fr; }
  .acct-nav { position: static; grid-auto-flow: column; overflow-x: auto; border-bottom: 1px solid var(--line); }
  .acct-nav button { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .split { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .ugc-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  :root { --gutter: 18px; --header-h: 58px; }
  /* Account and wishlist live in the drawer on a phone, so the header fits */
  .header-actions > a.icon-btn { display: none; }
  .icon-btn { width: 40px; height: 40px; }
  .prod-grid, .prod-grid.cols-3 { grid-template-columns: 1fr; gap: 22px; }
  .pcard-quick { display: none; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-body { min-height: 250px; padding: 18px; }
  .cat-blurb { display: none; }
  .usp-strip { grid-template-columns: 1fr; }
  .usp { border-right: 0; border-bottom: 1px solid var(--line); }
  .vid-grid { grid-template-columns: 1fr; }
  .rev-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .stage { order: 1; }
  .thumbs { order: 2; flex-direction: row; overflow-x: auto; max-height: none; margin-top: 4px; }
  .thumb { width: 74px; }

  /* Add-to-bag row: quantity + wishlist share the top line, the primary
     button gets its own full-width line beneath, so nothing gets squeezed
     into an unreadable sliver next to the quantity stepper. */
  .qty-row { flex-wrap: wrap; }
  .qty-row .qty { order: 1; }
  .qty-row .qty-fav { order: 2; margin-left: auto; }
  .qty-row .qty-add { order: 3; flex: 1 1 100%; }

  .work-strip { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 26px; }
  .foot-brand { grid-column: span 2; }
  .form-grid { grid-template-columns: 1fr; }
  .trust-row { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .ugc-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-word { font-size: 16px; }
  .hero-tag { display: none; }   /* they cover the photo at phone width */
  .order-row { grid-template-columns: 1fr auto; }
  .toast-host { left: 16px; right: 16px; }
  .toast { max-width: none; }
}


/* ============================================================================
   CUSTOM CURSOR
   Only mounts on fine pointers with motion allowed, so touch and
   reduced-motion users keep the native cursor untouched.
   ========================================================================== */
body.has-cursor,
body.has-cursor a,
body.has-cursor button,
body.has-cursor .thumb,
body.has-cursor .sw,
body.has-cursor .companion-card-soon,
body.has-cursor [data-video] { cursor: none; }
/* text entry keeps its caret, because hiding that is genuinely annoying */
body.has-cursor input,
body.has-cursor textarea,
body.has-cursor select { cursor: auto; }

.cursor { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0; transition: opacity .25s var(--ease); }
.cursor.on { opacity: 1; }

/* A thin pink bar across the very top of the viewport, above the header,
   that fills as the person scrolls down the page. */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 210; pointer-events: none;
  width: 100%; height: 3px; background: transparent;
}
.scroll-progress i {
  display: block; height: 100%; width: 0%; background: var(--coral-deep);
  transition: width .12s linear;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress i { transition: none; } }

/* The cursor is a dot and a ring. It never contains text. Do not add a
   label element here: no "Play", no "View", no words of any kind. */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; will-change: transform;
}
.cursor-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--coral-deep);
  transition: width .3s var(--ease), height .3s var(--ease), background-color .3s var(--ease), opacity .3s;
}
.cursor-ring {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(196,53,79,.45);
  transition: width .38s var(--ease), height .38s var(--ease), border-width .3s var(--ease),
              border-color .3s var(--ease), opacity .3s var(--ease);
}

/* over a link: the ring tightens onto the dot */
.cursor.over-link .cursor-ring { width: 20px; height: 20px; border-color: var(--coral-deep); }
.cursor.over-link .cursor-dot  { width: 5px; height: 5px; background: var(--coral-deep); }

/* over a tile or a film: the ring opens out and gets heavier */
.cursor.over-media .cursor-ring {
  width: 54px; height: 54px; border-width: 2px; border-color: var(--coral-deep);
}
.cursor.over-media .cursor-dot { width: 5px; height: 5px; background: var(--coral-deep); }

/* click */
.cursor.down .cursor-ring { filter: brightness(.9); }
.cursor.down .cursor-dot  { width: 11px; height: 11px; }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
  body.has-cursor, body.has-cursor * { cursor: auto; }
}


/* ============================================================================
   THE FOUR PILLARS
   Faith, Love, Learn, Grow. Each one owns a colour from the palette and
   an icon drawn in running stitch. The icon plates are tilted a degree or
   two apiece, the way fabric squares end up when you lay them on a table.
   ========================================================================== */
.pillars { background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 72%); }
.pillar-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }

.pillar {
  --pt: var(--sage); --ptd: var(--sage-deep); --ptt: var(--sage-tint); --tilt: 0deg;
  position: relative; display: flex; flex-direction: column; gap: 11px;
  padding: clamp(24px, 2.4vw, 34px) clamp(20px, 2vw, 28px) clamp(30px, 2.8vw, 38px);
  border: 1px solid var(--line);
  background: linear-gradient(158deg, var(--ptt) 0%, var(--paper) 46%);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.pil-faith { --pt: var(--lavender); --ptd: var(--lav-deep);   --ptt: var(--lav-tint);   --tilt: -2.2deg; }
.pil-love  { --pt: var(--coral);    --ptd: var(--coral-deep); --ptt: var(--coral-tint); --tilt:  1.8deg; }
.pil-learn { --pt: var(--amber);    --ptd: var(--amber-deep); --ptt: var(--amber-tint); --tilt: -1.3deg; }
.pil-grow  { --pt: var(--lime);     --ptd: var(--lime-deep);  --ptt: var(--lime-tint);  --tilt:  2.4deg; }

.pillar::after {
  content: ''; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 4px;
  background: linear-gradient(90deg, var(--pt), var(--ptd));
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.pillar:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); border-color: var(--pt); }
.pillar:hover::after { transform: scaleX(1); }

.pillar-ico {
  width: clamp(72px, 6.6vw, 94px); height: clamp(72px, 6.6vw, 94px);
  display: grid; place-items: center; color: var(--ptd);
  background: linear-gradient(140deg, var(--paper) 0%, var(--ptt) 108%);
  border: 1px solid var(--pt); box-shadow: var(--shadow-sm);
  transform: rotate(var(--tilt));
  transition: transform .6s var(--ease-bounce), box-shadow .5s var(--ease);
}
.pillar-ico svg { width: 62%; height: 62%; }
/* the stitch dashes creep one stitch along, the way a seam is sewn */
.pillar-ico svg path, .pillar-ico svg circle { transition: stroke-dashoffset .9s var(--ease); }
.pillar:hover .pillar-ico { transform: rotate(var(--tilt)) translateY(-6px) scale(1.04); }
.pillar:hover .pillar-ico svg path { stroke-dashoffset: -13; }

.pillar-word { font-family: var(--font-display); font-size: clamp(1.5rem, 2.1vw, 1.95rem); font-weight: 400; font-style: italic; color: var(--ptd); line-height: 1.1; margin-top: 4px; }
.pillar-head { font-size: 14.5px; font-weight: 700; }
.pillar-line { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }

@media (max-width: 1024px) { .pillar-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pillar-row { grid-template-columns: 1fr; } }


/* ============================================================================
   THE WORD
   The one dark band on the page. It is where the brand line lives, so it
   gets the weight.
   ========================================================================== */
.word-band {
  padding-block: clamp(64px, 8.5vw, 132px);
  color: var(--ink);
  background:
    radial-gradient(60% 62% at 2% 10%,   rgba(245,117,140,.13), transparent 62%),
    radial-gradient(58% 66% at 26% 104%, rgba(159,194,61,.20), transparent 64%),
    radial-gradient(40% 48% at 52% 0%,   rgba(133,113,181,.11), transparent 66%),
    var(--grad-soft);
}
.word-inner { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px, 4vw, 66px); align-items: center; }
.word-media { position: relative; }
.word-media img { width: 100%; display: block; position: relative; z-index: 1; border: 1px solid rgba(35,34,27,.12); }
.word-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.word-copy .lede { color: var(--ink-soft); }

.word-langs { list-style: none; margin: 8px 0 0; padding: 0; width: 100%; border-top: 1px solid rgba(35,34,27,.14); }
.word-langs li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(35,34,27,.1); }
.word-langs span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); flex: none; }
.word-langs strong { font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.45rem); font-weight: 400; text-align: right; color: var(--ink); }

.word-note { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }
.word-verses { display: flex; flex-wrap: wrap; gap: 8px; }
.word-verses span {
  font-family: var(--font-display); font-style: italic; font-size: 14.5px;
  padding: 8px 15px; border: 1px dashed rgba(35,34,27,.24); color: var(--ink);
}
@media (max-width: 900px) { .word-inner { grid-template-columns: 1fr; } }


/* ============================================================================
   THE GROWTH LANDSCAPE
   A rising path across the first three years. The stitched line draws
   itself once, the flowers open behind it, and the three companions walk
   to whichever stage is selected. The cards below carry the actual words.
   ========================================================================== */
.journey { background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%); }
.jr { display: flex; flex-direction: column; gap: clamp(22px, 2.8vw, 38px); }

.jr-stage {
  position: relative; overflow: hidden;
  aspect-ratio: 1200 / 380; min-height: 152px;
  border: 1px solid var(--line); background: var(--cream);
}
.jr-land { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the draw: an SVG clip rect whose width animates from nothing to the
   full board, so the seam appears to be sewn from left to right */
.jr-clip { width: 0; }
.jr-stage.drawn .jr-clip { width: 1200px; transition: width 2.4s var(--ease); }

.jr-flower { transform: scale(0); transform-box: fill-box; transform-origin: 50% 100%; }
.jr-stage.drawn .jr-flower {
  transform: scale(1);
  transition: transform .7s var(--ease-bounce);
  transition-delay: calc(.3s + var(--i) * .11s);
}
.jr-sun { animation: jrsun 8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes jrsun { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.07); opacity: 1; } }
.jr-cloud { transform-box: fill-box; }
.jr-cloud.c1 { animation: jrdrift 34s linear infinite; }
.jr-cloud.c2 { animation: jrdrift 52s linear infinite -18s; }
@keyframes jrdrift { 0% { transform: translateX(-40px); } 100% { transform: translateX(1240px); } }

/* the three companions, walking */
.jr-trio {
  position: absolute; z-index: 2; pointer-events: none;
  display: flex; align-items: flex-end; gap: 1px;
  transform: translate(-78%, -100%) translateY(-20px);
  transition: left .9s var(--ease), top .9s var(--ease);
}
.jr-char {
  height: clamp(32px, 4.6vw, 64px); width: auto; display: block;
  filter: drop-shadow(0 7px 11px rgba(35,34,27,.24));
  animation: jrbob 3.4s ease-in-out infinite;
}
.jr-char:nth-child(2) { height: clamp(26px, 3.8vw, 53px); animation-duration: 4.1s; animation-delay: .5s; }
.jr-char:nth-child(3) { height: clamp(29px, 4.2vw, 58px); animation-duration: 3.8s; animation-delay: .9s; }
@keyframes jrbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* the stage markers */
/* The button is padded out to a 45px touch target while the pin itself
   stays dead centre on the ridge. The age label hangs below it, outside
   the button box, so it cannot pull the pin off the line. */
.jr-mark {
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  display: block; padding: 14px; background: none; border: 0; line-height: 0;
}
.jr-pin {
  display: block; width: 17px; height: 17px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--sage-deep);
  box-shadow: 0 0 0 0 rgba(196,53,79,.2);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.jr-mark.on .jr-pin { background: var(--coral-deep); border-color: var(--coral-deep); box-shadow: 0 0 0 8px rgba(196,53,79,.2); }
.jr-age {
  position: absolute; top: calc(100% - 9px); left: 50%; transform: translateX(-50%);
  font-size: 10.5px; line-height: 1.5; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; padding: 4px 9px; color: var(--ink-soft);
  background: rgba(253,248,238,.92); border: 1px solid var(--line-soft);
  transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.jr-mark.on .jr-age { color: var(--cream); background: var(--ink); border-color: var(--ink); }
.jr-mark:focus-visible { outline: 0; }
.jr-mark:focus-visible .jr-pin { outline: 2px solid var(--ink); outline-offset: 4px; }

/* the cards, which are the content */
.jr-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.jr-card {
  position: relative; display: flex; flex-direction: column; gap: 9px;
  padding: 24px 20px 20px; background: var(--paper); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s var(--ease);
}
.jr-card::before {
  content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
  background: var(--grad-line); opacity: 0; transition: opacity .35s var(--ease);
}
.jr-card.on { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--coral); }
.jr-card.on::before { opacity: 1; }
.jr-card-age { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-deep); }
.jr-card-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; line-height: 1.15; }
.jr-card-doing { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.jr-card-piece { font-size: 13.5px; line-height: 1.55; font-weight: 600; }
.jr-card-verse { font-family: var(--font-display); font-style: italic; font-size: 14.5px; color: var(--sage-deep); }
.jr-card-foot {
  display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
}
.jr-card-char { width: 32px; height: 32px; object-fit: contain; flex: none; }
.jr-card-link { display: inline-flex; align-items: center; gap: 7px; padding-block: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.jr-card-link svg { transition: transform .35s var(--ease); }
.jr-card:hover .jr-card-link svg, .jr-card-link:hover svg { transform: translateX(4px); }

@media (max-width: 1024px) {
  .jr-cards { grid-template-columns: repeat(2, 1fr); }
  .jr-stage { aspect-ratio: 1200 / 470; }
}
@media (max-width: 720px) {
  .jr-age { display: none; }
  .jr-stage { aspect-ratio: 1200 / 560; }
}
@media (max-width: 560px) { .jr-cards { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .jr-stage .jr-clip { width: 1200px; transition: none; }
  .jr-flower { transform: none; transition: none; }
  .jr-trio { transition: none; }
  .jr-char, .jr-sun, .jr-cloud { animation: none; }
}


/* ============================================================================
   FILM — a single video given its own section
   An eight-second silent clip is a loop, not something you click. These
   autoplay muted, loop, and only run while they are actually on screen.
   ========================================================================== */
.film { position: relative; overflow: hidden; }
.film-inner {
  max-width: var(--container); margin-inline: auto;
  padding: clamp(56px, 7vw, 104px) var(--gutter);
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.film.flip .film-media { order: 2; }
.film.flip .film-inner { grid-template-columns: .85fr 1.15fr; }

/* A vertical reel is a phone shape. Given a whole 1400px band it floats in
   dead space, so the reel variant pulls the container in and pins the media
   column to a real width instead of a fraction of the page. */
.film.reel .film-inner {
  max-width: 1040px;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
}
.film.reel.flip .film-inner { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
.film.reel .film-copy { max-width: 46ch; }

.film-media {
  position: relative; overflow: hidden; background: var(--cream-deep);
  border: 1px solid var(--line-soft);
}
.film-media video, .film-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.film-media .film-frame { position: relative; aspect-ratio: 16 / 9; }
.film.reel .film-media .film-frame { aspect-ratio: 9 / 16; }

/* The PDP walkthrough video: autoplaying like the homepage films, but
   half the wrap's width rather than full-bleed. */
.pdp-video { width: min(50%, 560px); }
@media (max-width: 720px) { .pdp-video { width: 100%; } }
.film-media .film-poster {
  position: absolute; inset: 0; z-index: 2;
  transition: opacity .6s var(--ease);
}
.film-media.playing .film-poster { opacity: 0; }

.film-badge {
  position: absolute; z-index: 3; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; background: rgba(255,255,255,.92); border: 1px solid var(--line-soft);
  font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.film-badge i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--coral-deep);
  animation: filmpulse 2.4s ease-in-out infinite;
}
@keyframes filmpulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.film-expand {
  position: absolute; z-index: 3; right: 14px; bottom: 14px;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255,255,255,.92); border: 1px solid var(--line-soft); color: var(--ink);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background-color .3s, color .3s;
}
.film-media:hover .film-expand { opacity: 1; transform: none; }
.film-expand:hover { background: var(--ink); color: var(--cream); }

.film-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.film-copy .h-lg { max-width: 18ch; }

@media (prefers-reduced-motion: reduce) {
  .film-media .film-poster { opacity: 1 !important; }
  .film-badge i { animation: none; }
}

@media (max-width: 1024px) {
  .film-inner, .film.flip .film-inner,
  .film.reel .film-inner, .film.reel.flip .film-inner { grid-template-columns: 1fr; }
  .film.flip .film-media { order: 0; }
  .film.reel .film-media { max-width: 380px; }
}

/* ==========================================================================
   FLIPBOOK
   The fabric Baby Bible, turnable on the page. Built on a real 3D rotation
   so the leaf is hinged at the spine and lit from the front of the book.
   ========================================================================== */
.fb {
  --fb-page-w: min(390px, 34vw);
  --fb-ratio: 1.0665;                 /* 160 / 150, the finished page shape */
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  outline: none;
}
.fb:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 10px; }

/* Language switch above the book */
.fb-langs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 0 auto 26px; max-width: 760px;
}
.fb-lang {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 132px; padding: 10px 16px 11px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: inherit; cursor: pointer;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.fb-lang-name { font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.fb-lang-title { font-size: 12px; font-style: italic; opacity: .72; }
.fb-lang:hover { transform: translateY(-2px); border-color: var(--ink); }
.fb-lang.on { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.fb-lang:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; }
@media (max-width: 520px) {
  .fb-langs { gap: 8px; }
  .fb-lang { min-width: calc(50% - 4px); padding: 9px 10px; }
}

.fb-stage {
  perspective: 2600px;
  perspective-origin: 50% 46%;
  padding: 10px 0 26px;
  touch-action: pan-y;
}

.fb-book {
  position: relative;
  width: calc(var(--fb-page-w) * 2);
  height: calc(var(--fb-page-w) * var(--fb-ratio));
  transform-style: preserve-3d;
}
.fb-single .fb-book { width: var(--fb-page-w); }

/* the block of paper sitting under everything, and its shadow on the table.
   It covers one half while the book is shut and both halves once it is open. */
.fb-base {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  background: var(--cream-deep);
  box-shadow:
    0 2px 0 rgba(35,34,27,.07), 0 4px 0 rgba(35,34,27,.05),
    0 6px 0 rgba(35,34,27,.035),
    0 30px 60px -18px rgba(35,34,27,.42),
    0 8px 18px -8px rgba(35,34,27,.26);
  transition: left .62s cubic-bezier(.33,.02,.2,1), width .62s cubic-bezier(.33,.02,.2,1);
}
.fb.at-start .fb-base { left: 50%; width: 50%; }
.fb.at-end   .fb-base { left: 0;   width: 50%; }

/* a shut book sits centred on its cover */
.fb-book { transition: transform .62s cubic-bezier(.33,.02,.2,1); }
.fb.at-start .fb-book { transform: translateX(-25%); }
.fb.at-end   .fb-book { transform: translateX(25%); }
.fb-single .fb-book { transform: none !important; }
.fb-single .fb-base { left: 0 !important; width: 100% !important; }

.fb.at-start .fb-gutter, .fb.at-end .fb-gutter { opacity: 0; }
.fb-gutter { transition: opacity .5s var(--ease); }

/* the crease down the middle of the open book */
.fb-gutter {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 76px;
  transform: translateX(-50%); z-index: 60; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, rgba(35,34,27,.13) 34%, rgba(35,34,27,.22) 50%,
    rgba(35,34,27,.13) 66%, transparent 100%);
}
.fb-single .fb-gutter { display: none; }

/* the shadow the turning leaf throws across the page underneath */
.fb-cast {
  --x: 0%;
  position: absolute; inset: 0; z-index: 55; opacity: 0; pointer-events: none;
  transition: opacity .2s linear;
  background: linear-gradient(100deg,
    transparent 0%, rgba(35,34,27,.30) var(--x), transparent calc(var(--x) + 26%));
}

/* ------------------------------------------------------------------ leaf */
.fb-sheet {
  position: absolute; top: 0; left: 50%;
  width: 50%; height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.33,.02,.2,1);
}
.fb-single .fb-sheet { left: 0; width: 100%; }
.fb-sheet.is-turned { transform: rotateY(-180deg); }
/* while a leaf is being turned by hand or by script, JS owns the transform */
.fb-sheet.is-active { transition: none; }

.fb-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(35,34,27,.07);
}
.fb-back { transform: rotateY(180deg); }
.fb-blank { background: var(--cream-deep); }

.fb-face img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  user-select: none; -webkit-user-drag: none;
}

/* the light on the leaf. The face turning away loses it, the face turning
   towards you gains it. --p is how far through the turn the leaf is. */
.fb-gloss {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .1s linear;
}
.fb-front .fb-gloss {
  opacity: calc(var(--p, 0) * .92);
  background:
    linear-gradient(90deg, rgba(35,34,27,.40) 0%, rgba(35,34,27,.10) 22%,
                           rgba(255,255,255,.16) 62%, rgba(35,34,27,.30) 100%);
}
.fb-back .fb-gloss {
  opacity: calc((1 - var(--p, 0)) * .92);
  background:
    linear-gradient(90deg, rgba(35,34,27,.34) 0%, rgba(255,255,255,.14) 40%,
                           rgba(35,34,27,.12) 78%, rgba(35,34,27,.42) 100%);
}
/* a soft band of light that rides the curl at the middle of the turn */
.fb-face .fb-edge {
  position: absolute; inset: 0; pointer-events: none;
  opacity: calc(var(--bow, 0) * .5);
  background: linear-gradient(90deg,
    transparent 30%, rgba(255,255,255,.55) 52%, transparent 74%);
}
/* the shaded strip where every page meets the spine */
.fb-front::after, .fb-back::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 34px;
  pointer-events: none;
}
.fb-front::after { left: 0;  background: linear-gradient(90deg, rgba(35,34,27,.16), transparent); }
.fb-back::after  { right: 0; background: linear-gradient(270deg, rgba(35,34,27,.16), transparent); }
.fb-single .fb-front::after, .fb-single .fb-back::after { width: 22px; }

.fb-stage { cursor: grab; }
.fb.is-dragging .fb-stage { cursor: grabbing; }
.fb.is-dragging .fb-face img { pointer-events: none; }

/* ---------------------------------------------------------------- controls */
.fb-bar { display: flex; align-items: center; gap: 18px; }
.fb-btn {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              transform .25s var(--ease), opacity .25s var(--ease);
}
.fb-btn:hover:not(:disabled) { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.fb-btn:disabled { opacity: .3; cursor: default; }

.fb-dots { display: flex; gap: 7px; align-items: center; }
.fb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(35,34,27,.2); transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.fb-dot.on { background: var(--coral-deep); transform: scale(1.5); }

.fb-hint {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0;
}

@media (max-width: 819px) {
  .fb { --fb-page-w: min(330px, 78vw); }
  .fb-hint::after { content: ' or tap it'; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-sheet { transition: none; }
}

/* ============================================================================
   OUR STORY — page-specific components
   ========================================================================== */

/* -- verse stitch: a hand-drawn running-stitch rule with a scripture line
      resting on it, used to break the page into chapters without another
      flat horizontal line. -------------------------------------------- */
.verse-stitch { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding-block: clamp(8px, 1.5vw, 16px); }
.verse-stitch svg { width: min(320px, 70vw); height: 14px; color: var(--line); }
.verse-stitch blockquote {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--sage-deep); max-width: 46ch; line-height: 1.5;
}
.verse-stitch cite { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }

/* -- pillar photo cards: each of the four words gets a real in-action
      photo, the hand-drawn icon, and the verse it is built on. ---------- */
.pillar-photo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); }
.pillar-photo {
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pillar-photo:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pillar-photo-img { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--cream-deep); }
.pillar-photo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pillar-photo:hover .pillar-photo-img img { transform: scale(1.06); }
.pillar-photo-ico {
  position: absolute; left: 14px; top: 14px; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--cream); border: 1px solid var(--line);
}
.pillar-photo-ico svg { width: 24px; height: 24px; }
.pillar-photo-body { display: flex; flex-direction: column; gap: 8px; padding: 20px clamp(16px, 2vw, 22px) 24px; }
.pillar-photo-word { font-family: var(--font-display); font-size: 1.3rem; }
.pillar-photo-p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.pillar-photo-verse { font-family: var(--font-display); font-style: italic; font-size: 13.5px; color: var(--sage-deep); border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 2px; }
@media (max-width: 1180px) { .pillar-photo-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .pillar-photo-row { grid-template-columns: 1fr; } }

/* -- scripture map: a hand-stitched diagram tracing one verse from page
      to product, three stops joined by a running-stitch line. ---------- */
.scripture-map { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.smap-line { width: 100%; height: auto; overflow: visible; }
.smap-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); }
.smap-stop { display: flex; flex-direction: column; gap: 10px; }
.smap-num {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1.5px solid var(--ink); font-family: var(--font-display); font-size: 15px;
}
.smap-stop h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; }
.smap-stop p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 819px) { .smap-row { grid-template-columns: 1fr; } }

/* -- hands-at-work strip: three tight in-action crops, deliberately not
      a slideshow, so the eye can compare all three at once. ------------ */
.work-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--line); }
.work-strip figure { margin: 0; position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--cream-deep); }
.work-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.work-strip figure:hover img { transform: scale(1.06); }
.work-strip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: #fff;
  background: linear-gradient(0deg, rgba(20,19,14,.72), rgba(20,19,14,0));
}

/* -- conviction band: the fuller faith perspective, set as a manuscript
      column with a stitched drop-cap mark rather than a stock icon. ---- */
.conviction { max-width: 62ch; margin-inline: auto; display: grid; gap: 20px; }
.conviction-mark { width: 46px; height: 46px; color: var(--coral-deep); }
.conviction p { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.78; color: var(--ink-soft); }
.conviction p:first-of-type::first-letter {
  font-family: var(--font-display); font-size: 3.4rem; line-height: .78; float: left;
  padding: 4px 8px 0 0; color: var(--ink);
}
.conviction .sig { font-family: var(--font-display); font-style: italic; color: var(--ink); margin-top: 4px; }

/* ============================================================================
   ACCOUNTS, TRACKING AND ORDER DETAIL
   ============================================================================ */
.icon-btn.is-signed-in { position: relative; }
.icon-btn.is-signed-in::after {
  content: ''; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--paper);
}
.form-msg { margin-top: 14px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; border: 1px solid var(--line); background: var(--cream); }
.form-msg.ok  { background: var(--lime-tint); border-color: transparent; color: var(--sage-deep); }
.form-msg.err { background: var(--coral-tint); border-color: transparent; color: var(--coral-deep); }
.form-msg[hidden] { display: none; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--coral-deep); border-bottom: 1px solid; cursor: pointer; }
.check-field { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-soft); margin: 6px 0 18px; }
.check-field input { margin-top: 3px; accent-color: var(--sage-deep); }
.signed-in-note { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; padding: 12px 14px; margin-bottom: 20px; background: var(--sage-tint); font-size: 13.5px; color: var(--sage-deep); }

.status.pending_payment, .status.payment_failed { background: var(--cream-deep); color: var(--ink-soft); }
.status.paid        { background: #E4F1FA; color: #2C6A92; }
.status.in_workroom { background: var(--lav-tint); color: var(--lav-deep); }
.status.shipped     { background: var(--amber-tint); color: var(--amber-deep); }
.status.delivered   { background: var(--lime-tint); color: var(--sage-deep); }
.status.cancelled, .status.refunded { background: var(--coral-tint); color: var(--coral-deep); }

.order-card { border-bottom: 1px solid var(--line-soft); }
.order-card:last-child { border-bottom: 0; }
.order-card > summary { list-style: none; cursor: pointer; }
.order-card > summary::-webkit-details-marker { display: none; }
.order-card[open] > summary .order-row { border-bottom: 0; }
.order-detail { padding: 4px 0 24px; display: grid; gap: 22px; }
.order-items { display: grid; gap: 8px; font-size: 13.5px; }
.order-items div { display: flex; justify-content: space-between; gap: 12px; }
.order-items .muted { font-size: 12.5px; }

.progress-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.progress-steps li { list-style: none; padding-top: 12px; border-top: 3px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.progress-steps li.done { border-color: var(--sage); color: var(--sage-deep); }
.progress-steps li.now  { border-color: var(--coral); color: var(--coral-deep); }

.timeline { display: grid; gap: 0; margin: 0; padding: 0; }
.timeline li { list-style: none; position: relative; padding: 0 0 16px 22px; font-size: 13.5px; color: var(--ink-soft); }
.timeline li::before { content: ''; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--sage); }
.timeline li::after { content: ''; position: absolute; left: 4px; top: 16px; bottom: 0; width: 1px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline time { display: block; font-size: 11.5px; color: var(--ink-faint); margin-bottom: 2px; }
.timeline li.internal::before { background: var(--amber); }
.coming-soon-tag { display: inline-block; margin-left: 8px; padding: 3px 8px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--amber-tint); color: var(--amber-deep); vertical-align: middle; }
@media (max-width: 640px) { .progress-steps li { font-size: 10.5px; letter-spacing: .02em; } }

/* Story page: flipbook between the introduction and the scripture map. */
.story-flip { margin: clamp(8px, 2vw, 20px) 0 clamp(48px, 6vw, 84px); }

/* ============================================================================
   MOBILE SWEEP (phones). Tighter controls, two-up product grid, and a
   newsletter button as wide as the email field.
   ============================================================================ */
/* Zoom works with a mouse only, so the hint is not shown on touch screens. */
@media (hover: none), (pointer: coarse) { .stage-hint { display: none; } }

@media (max-width: 600px) {
  .news-form { flex-direction: column; align-items: stretch; }
  .news-form input, .news-form .btn { flex: none; width: 100%; }
}

@media (max-width: 720px) {
  .btn { padding: 13px 22px; font-size: 13px; }
  .btn-lg { padding: 14px 24px; font-size: 13.5px; }
  .btn-sm { padding: 10px 16px; font-size: 12px; }

  /* Product cards: two per row, smaller heart and badges. */
  .prod-grid, .prod-grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .pcard:hover, .pcard:focus-within { transform: none; }
  .pcard-body { padding: 12px 6px 16px; gap: 4px; }
  .pcard-title { font-size: 13px; }
  .pcard-price .now { font-size: 13px; }
  .pcard-price .was { font-size: 11.5px; }
  .pcard-fav { top: 7px; right: 7px; width: 32px; height: 32px; }
  .pcard-fav svg { width: 16px; height: 16px; }
  .pcard-badges { top: 8px; left: 8px; gap: 4px; }
  .pcard-badges .badge { padding: 4px 7px; font-size: 9px; letter-spacing: .1em; }

  /* Product page */
  .stage-nav { width: 34px; height: 34px; }
  .stage-nav svg { width: 16px; height: 16px; }
  .stage-nav.prev { left: 10px; }
  .stage-nav.next { right: 10px; }
  .stage-badge { top: 10px; left: 10px; }
  .thumb { width: 60px; }
  .thumbs { gap: 8px; }
  .buybox { gap: 16px; }
  .pdp-price .now { font-size: 26px; }
  .var-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .var { padding: 7px 9px 7px 7px; gap: 8px; min-width: 0; }
  .var-thumb { width: 34px; height: 34px; }
  .var-name { font-size: 12.5px; }
  .var-sub { font-size: 10.5px; display: block; line-height: 1.3; }
  .var > span:last-child { min-width: 0; }
  .size-btn { padding: 9px 12px; font-size: 12px; }
  .stock-line { font-size: 12.5px; font-weight: 600; }
  .qty button { width: 38px; }
  .qty input { width: 38px; }
  .qty-fav { padding: 10px 13px; }
  .qty-fav svg { width: 18px; height: 18px; }
  /* Quantity, Add to bag and heart on one row. */
  .qty-row { flex-wrap: nowrap; gap: 8px; }
  .qty-row .qty { order: 1; }
  .qty-row .qty-add { order: 2; flex: 1 1 auto; min-width: 0; padding: 13px 12px; white-space: nowrap; font-size: 12.5px; }
  .qty-row .qty-fav { order: 3; margin-left: 0; }
  .qty button { width: 34px; }
  .qty input { width: 30px; }

  /* Trust points: one compact row of three. */
  .buybox .trust-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .buybox .trust-cell { padding: 12px 8px; gap: 6px; font-size: 11.5px; text-align: center; align-items: center; }
  .buybox .trust-cell svg { width: 20px; height: 20px; }

  /* Flipbook controls */
  .fb-btn { width: 38px; height: 38px; }
}

@media (max-width: 340px) {
  .prod-grid, .prod-grid.cols-3 { grid-template-columns: 1fr; }
  .var-row { grid-template-columns: 1fr; }
}