/* ============================================================
   stART Studio | startstudio.sg
   Warm redesign, Era-1 palette: cream / tan / warm brown
   Hand-written CSS, no build step. Mobile-first.
   ============================================================ */

:root {
  /* Pastel watercolour palette (2026-09-05), extracted from Elfin's KiKnowa
     reference screenshots + the physical box. Direction from the 9/3 Zeta
     thread: teal/green + ink navy instead of brown/gold; "pastel watercolour".
     NOTE: several custom property NAMES are historical (--gold is now sage,
     --brown is now ink navy, --tan* are sage-tinted neutrals). They are used in
     hundreds of places across 18 pages, so the names stay and the VALUES moved.
     Read the comment on each line, not the name. */
  --paper:       #fffdf8;
  --cream:       #fbf5e8;   /* warm ivory, from the reference page bg */
  --cream-soft:  #fefaf1;
  --tan:         #6f9ba1;   /* mid accent (was gold mid): the book-cover teal */
  --gold:        #47707a;   /* PRIMARY action colour: deep cover-teal, AA on cream */
  --gold-deep:   #35565e;   /* hover / links */
  --gold-light:  #b8d3d2;   /* soft borders + highlight swash: misty cover teal */
  --tan-soft:    #dfe6e4;   /* hairline borders, teal-grey */
  --tan-faint:   #ecf2f0;   /* faint fills, teal mist */
  --terracotta:  #c87a35;   /* small accents: the cover's sunset orange */
  --sage:        #7a9e7e;
  --brown:       #304d76;   /* headings: ink navy, from the reference serif titles */
  --brown-dark:  #2c3e5c;   /* footer: deep navy ink */
  --ink:         #4f596b;   /* body text: slate, cool but not black */
  --white:       #ffffff;
  --wa-green:    #4e7a5a;
  /* the true warm thread: kept for the book page + quote borders only */
  --gold-true:   #b39666;
  --gold-true-soft: #e6d3ae;

  --font-display: 'DM Serif Text', Georgia, serif;
  --font-body:    'Outfit', 'Segoe UI', sans-serif;
  --font-marker:  'Permanent Marker', 'Comic Sans MS', cursive;

  --shadow-soft:  0 10px 30px rgba(48, 77, 118, .12);
  --shadow-lift:  0 18px 44px rgba(48, 77, 118, .18);
  --radius:       20px;
  --radius-lg:    28px;

  --container:    1160px;
  --header-h:     78px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* overflow-x on BOTH html and body: mobile browsers allow horizontal
   touch-panning if only body clips. clip > hidden (no scroll container). */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold-deep); text-decoration: none; }
ul { padding: 0; list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--tan);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -999px; top: 10px; z-index: 200;
  background: var(--brown); color: var(--white);
  padding: .6rem 1.2rem; border-radius: 999px;
}
.skip-link:focus { left: 10px; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--brown); }
h1 { font-size: clamp(2.15rem, 1.2rem + 4.2vw, 3.9rem); line-height: 1.12; }
h2 { font-size: clamp(1.6rem, 1.15rem + 2.1vw, 2.55rem); line-height: 1.18; }
h3 { font-size: clamp(1.25rem, 1.15rem + .5vw, 1.45rem); line-height: 1.3; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-deep);
}
.eyebrow::before { content: '✦'; color: var(--terracotta); font-size: .9em; }

/* Rough paint-swash highlight behind a key word */
.highlight {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpath d='M6 30C36 20 74 19 112 20c30 1 56-1 78 4 5 1 4 8-1 9-38 7-77 3-115 5-22 1-45 3-64-2-5-2-8-13-4-16z' fill='rgba(233,196,130,.7)'/%3E%3C/svg%3E") no-repeat center bottom / 100% .62em;
  padding-bottom: .04em;
}

/* Rough brush-stroke underline for section headings */
.squig::after {
  content: '';
  display: block;
  width: 150px; height: 13px;
  margin-top: .85rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10C33 4 63 3 95 4c34 1 66-2 100 2 3 0 3 4 0 5-32 5-66 2-99 3-31 1-62 4-91 1-3 0-4-9-2-5z' fill='%23dfa752'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.center .squig::after { margin-inline: auto; }

/* Paint splats, sprinkled sparingly */
.splat {
  position: absolute; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23a9c087' d='M48 12c7-3 15 1 17 8 2 6 9 6 13 10 5 5 4 14-2 18-5 3-5 9-9 13-5 5-14 5-19 0-4-4-10-3-15-6-6-4-8-13-4-19 3-5 0-10 2-15 2-6 10-6 17-9z'/%3E%3Ccircle cx='84' cy='30' r='4' fill='%23a9c087'/%3E%3Ccircle cx='90' cy='54' r='3' fill='%23a9c087'/%3E%3Ccircle cx='16' cy='72' r='4' fill='%23a9c087'/%3E%3Ccircle cx='70' cy='88' r='3' fill='%23a9c087'/%3E%3Ccircle cx='11' cy='34' r='3' fill='%23a9c087'/%3E%3C/svg%3E") no-repeat center / contain;
}
.splat-a { width: 150px; height: 150px; top: 60px; left: 1.5%; opacity: .55; transform: rotate(-16deg); }
.splat-b { width: 104px; height: 104px; top: -16px; right: 6%; opacity: .6;  transform: rotate(26deg); }
.splat-c { width: 170px; height: 170px; bottom: -40px; left: -34px; opacity: .55; transform: rotate(160deg); }
/* The base splat is foliage green, like the cover art; the b/c variants are
   hue-rotated into the cover's cerulean and amber, so three watercolour
   splashes recur without three SVGs. */
.splat-b { filter: hue-rotate(120deg); }
.splat-c { filter: hue-rotate(-55deg) saturate(1.3); }

/* ---------- Layout helpers ---------- */
.container { width: min(var(--container), 100% - 2.5rem); margin-inline: auto; }
.section { padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
.section-head { max-width: 640px; margin-bottom: clamp(2.2rem, 2rem + 2vw, 3.6rem); position: relative; }
.section-head p { margin-top: 1rem; color: #5d6678; }
.center { text-align: center; margin-inline: auto; }

.bg-cream      { background: var(--cream); }
.bg-cream-soft { background: var(--cream-soft); }

/* Grid overflow guards: photos must never inflate mobile grid tracks */
.hero .container > *, .about-grid > *, .trial-panel > *,
.grow-panel > *, .visit-grid > * { min-width: 0; }
.blob-wrap img, .grow-visual img, .polaroid-main > img, .visit-photo .polaroid img { width: 100%; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.7rem; border-radius: 999px;
  font-weight: 600; font-size: 1rem; line-height: 1;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn svg { flex: none; }
.btn-primary { background: var(--gold); color: var(--paper); box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--gold-deep); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-ghost { border: 2px solid var(--gold); color: var(--gold-deep); }
.btn-ghost:hover { background: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-sm { padding: .65rem 1.25rem; font-size: .92rem; }

.text-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--gold-deep);
  border-bottom: 2px solid var(--gold-light);
  padding-bottom: .15rem;
  transition: gap .2s ease, border-color .2s ease;
}
.text-link:hover { gap: .7rem; border-color: var(--gold); }

/* ============================================================
   Header
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 100;
  /* Transparent over the hero; the white glass lives on ::before and fades in
     once the page scrolls (js toggles .scrolled at 8px). The glass is a layer
     rather than a background so its opacity can transition smoothly. */
  background: none;
  transition: box-shadow .3s ease;
}
.header::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 253, 248, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .35s ease;
}
.header.scrolled { box-shadow: 0 6px 26px rgba(48, 77, 118, .14); }
.header.scrolled::before,
body.nav-open .header::before { opacity: 1; } /* solid behind the open drawer too */

.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 44px; width: auto; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: clamp(1rem, .5rem + 1vw, 1.9rem); }
.site-nav a {
  font-weight: 500; font-size: .98rem; color: var(--ink);
  padding: .3rem 0; position: relative;
}
.site-nav a::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 3px; border-radius: 3px;
  background: var(--tan); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.site-nav a:hover::after { transform: scaleX(1); }

.header-cta { flex: none; }
.nav-cta-item { display: none; } /* CTA lives in .header-cta on desktop; shown in the drawer on mobile */

.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; margin-left: auto;
  border-radius: 12px;
}
.nav-toggle span {
  display: block; width: 24px; height: 2.5px; margin-inline: auto;
  background: var(--brown); border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* 1180px, not 960: the nav carries 8 top-level items now, so it needs the
   drawer earlier than the single-page version did. */
@media (max-width: 1180px) {
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--paper);
    box-shadow: 0 24px 40px rgba(48, 77, 118, .18);
    padding: 1rem 1.4rem 1.6rem;
    opacity: 0; transform: translateY(-12px);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
    /* 8 top-level items plus an expanded submenu can outrun a short phone,
       so the drawer scrolls rather than clipping. */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  body.nav-open .site-nav { opacity: 1; transform: none; pointer-events: auto; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--tan-soft); }
  .site-nav li:last-child { border: none; padding-top: 1rem; }
  .nav-cta-item { display: block; }
  .site-nav a { display: block; padding: .9rem .2rem; font-size: 1.05rem; }
  .site-nav .btn {
    display: flex; justify-content: center;
    width: 100%; padding: .95rem 1.25rem;
  }
  .site-nav .btn-primary { color: var(--paper); }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero .container {
  position: relative; z-index: 1;
  display: grid; align-items: center;
  gap: clamp(2.5rem, 2rem + 3vw, 5rem);
  padding-block: clamp(3.2rem, 2.5rem + 3vw, 6rem) clamp(4.2rem, 3rem + 4vw, 7rem);
}
@media (min-width: 880px) {
  .hero .container { grid-template-columns: 1.08fr .92fr; }
}

.hero-copy h1 { margin: 1.1rem 0 1.2rem; }
.hero-copy .lede { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: #33415c; max-width: 34rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.9rem; }

.hero-stats {
  display: flex; flex-wrap: wrap;
  gap: clamp(1.2rem, 1rem + 2vw, 2.8rem);
  margin-top: 2.6rem;
}
.stat { min-width: 108px; }
.stat-num {
  font-family: var(--font-marker);
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem);
  color: var(--gold-deep);
  display: block; line-height: 1.15;
}
.stat-label { font-size: .88rem; color: #6f7889; letter-spacing: .02em; }

/* Hero photo in an organic blob */
.hero-photo { position: relative; max-width: 460px; margin-inline: auto; }
.blob-wrap { position: relative; }
.blob-wrap::before {
  content: ''; position: absolute;
  inset: 7% -6% -7% 6%;
  background: var(--tan-soft);
  border-radius: 52% 48% 44% 56% / 46% 58% 42% 54%;
  transform: rotate(-7deg);
}
.blob-wrap img { position: relative; }

.hero-tag {
  position: absolute; left: -4%; bottom: 7%;
  background: var(--white); color: var(--gold-deep);
  font-family: var(--font-marker); font-size: .95rem;
  padding: .55rem 1.1rem; border-radius: 999px;
  box-shadow: var(--shadow-soft);
  transform: rotate(-4deg);
}

/* floating decorations */
.dot, .sparkle { position: absolute; pointer-events: none; }
.dot { border-radius: 50%; animation: floaty 6s ease-in-out infinite alternate; }
.dot-1 { width: 16px; height: 16px; background: var(--tan);        top: 6%;  right: 4%; }
.dot-2 { width: 10px; height: 10px; background: var(--terracotta); top: 18%; right: 14%; animation-delay: -2s; }
.dot-3 { width: 13px; height: 13px; background: var(--gold-light); bottom: 12%; right: -2%; animation-delay: -4s; }
.sparkle { color: var(--tan); font-size: 1.4rem; animation: twinkle 3.2s ease-in-out infinite alternate; }
.sparkle-1 { top: -2%; left: 8%; }
.sparkle-2 { bottom: 4%; left: -3%; font-size: 1rem; animation-delay: -1.4s; }

@keyframes floaty  { from { transform: translateY(-7px); } to { transform: translateY(8px); } }
@keyframes twinkle { from { opacity: .25; transform: scale(.85) rotate(-8deg); } to { opacity: 1; transform: scale(1.08) rotate(8deg); } }

/* wave divider under cream hero */
/* .wave dividers removed 2026-09-05: a flat-fill shape between two
   flat colours worked, but on the watercolour washes it read as banding.
   The heroes now bleed into the page via the fade layer in the wash block. */

@keyframes scrollX { to { transform: translateX(-50%); } }

/* ============================================================
   About
   ============================================================ */
.about-grid {
  display: grid; align-items: center;
  gap: clamp(2.6rem, 2rem + 3vw, 5rem);
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: .92fr 1.08fr; }
}

.about-photo { position: relative; max-width: 430px; margin-inline: auto; }
.founder-chip {
  position: absolute; right: -4%; bottom: -7%;
  display: flex; align-items: center; gap: .8rem;
  background: var(--white); border-radius: 18px;
  padding: .7rem 1.05rem;
  box-shadow: var(--shadow-lift);
  transform: rotate(2.5deg);
  max-width: 275px;
}
.founder-chip img {
  width: 52px; height: 52px; object-fit: cover;
  border-radius: 50%; border: 3px solid var(--cream);
}
.founder-chip strong { display: block; font-size: .95rem; color: var(--brown); line-height: 1.3; }
.founder-chip small  { font-size: .78rem; color: #6f7889; line-height: 1.35; display: block; }

.about-copy .eyebrow { margin-bottom: .9rem; }
.about-copy p { margin-top: 1.1rem; color: #4f596b; }

.quote-card {
  margin-top: 1.6rem;
  background: var(--cream);
  border-left: 5px solid var(--tan);
  border-radius: 14px;
  padding: 1.15rem 1.4rem;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem);
  color: var(--brown); line-height: 1.5;
}

.tagline-line {
  margin-top: 1.3rem;
  font-family: var(--font-marker);
  color: var(--gold-deep);
  font-size: clamp(1rem, .95rem + .4vw, 1.2rem);
}

.feature-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.feature-chips li {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--cream-soft);
  border: 1.5px solid var(--tan-soft);
  color: var(--brown); font-weight: 600; font-size: .9rem;
  padding: .5rem 1rem; border-radius: 999px;
}
.feature-chips li::before { content: '✔'; color: var(--sage); font-size: .8em; }

/* ============================================================
   Programs
   ============================================================ */
/* Flex, not grid: with 5 programme cards a 4-column grid strands the last
   card alone at the left. Wrapping flex rows centre the leftover row. */
.program-grid {
  display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center;
}
.program-grid > .program-card { flex: 1 1 300px; max-width: 380px; }
.program-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
/* The img is absolutely positioned so a tall image can never stretch the box:
   aspect-ratio is only a preferred size, and an in-flow img with height:100%
   resolves against an indefinite height, i.e. its natural height wins.
   padding-top, not aspect-ratio, fixes the 4/3 box: with the img out of flow,
   aspect-ratio collapses to 0 where unsupported. Safe because the box spans
   its card's full width, so the percentage resolves against its own width. */
.program-media { position: relative; padding-top: 75%; overflow: hidden; }
.program-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.program-card:hover .program-media img { transform: scale(1.05); }
.badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--gold); color: var(--paper);
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 999px;
}
.badge-tan { background: var(--terracotta); color: var(--paper); }
.program-body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.program-body .prog-sub { font-size: .92rem; font-weight: 600; color: var(--gold-deep); margin-top: -.35rem; flex: 0 0 auto; }
.program-body p { font-size: .95rem; color: #5d6678; flex: 1; }
.program-body .text-link { font-size: .92rem; align-self: flex-start; }

/* ============================================================
   Trial
   ============================================================ */
.trial-panel {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 1.4rem + 2.5vw, 4rem);
  display: grid; align-items: center;
  gap: clamp(2.2rem, 1.6rem + 2.5vw, 4rem);
  position: relative; overflow: hidden;
}
@media (min-width: 920px) {
  .trial-panel { grid-template-columns: 1.15fr .85fr; }
}
.trial-panel::after {
  content: ''; position: absolute;
  width: 340px; height: 340px; right: -120px; top: -120px;
  background: var(--tan-faint);
  border-radius: 50% 50% 44% 56% / 48% 56% 44% 52%;
  pointer-events: none;
}
.trial-copy, .trial-visual { position: relative; z-index: 1; }

.price-lockup { display: flex; align-items: baseline; gap: .7rem; margin: 1.2rem 0 .4rem; }
.price {
  font-family: var(--font-marker);
  font-size: clamp(2.4rem, 1.9rem + 2.5vw, 3.6rem);
  color: var(--gold-deep);
}
.price-note { font-weight: 600; color: #6f7889; }

/* Currency prefix stays in the clean body font: marker's S reads like a 5 */
.stat-num .cur, .price .cur {
  font-family: var(--font-body);
  font-weight: 700; font-size: .58em;
  margin-right: .08em;
}

.trial-list { margin-top: 1rem; display: grid; gap: .55rem; }
.trial-list li { display: flex; gap: .65rem; align-items: flex-start; color: #4f596b; }
.trial-list li::before { content: '🎨'; flex: none; font-size: .95rem; line-height: 1.7; }
.trial-list li:nth-child(2)::before { content: '🖌️'; }
.trial-list li:nth-child(3)::before { content: '🌱'; }
.trial-list li:nth-child(4)::before { content: '🖼️'; }
.trial-list li:nth-child(5)::before { content: '🎁'; }

.price-was { font-size: .92rem; color: #6f7889; }
.price-was s { text-decoration-color: var(--terracotta); }

.package-card {
  margin-top: 1.5rem;
  background: var(--white);
  border: 1.5px dashed var(--tan);
  border-radius: 16px;
  padding: 1.1rem 1.3rem;
  font-size: .95rem; color: #4f596b;
}
.package-card strong { color: var(--brown); }

.trial-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.7rem; }

.trial-visual { display: grid; place-items: center; }
.polaroid {
  background: var(--white); padding: 12px 12px 16px;
  border-radius: 12px; box-shadow: var(--shadow-lift);
  position: relative;
}
.polaroid img { border-radius: 6px; }
.polaroid-main { transform: rotate(3deg); max-width: 300px; }
.polaroid-side {
  position: absolute; bottom: -9%; left: -14%;
  max-width: 175px; transform: rotate(-7deg);
}
.tape::before {
  content: ''; position: absolute; z-index: 2;
  top: -12px; left: 50%;
  width: 88px; height: 25px;
  background: rgba(150, 186, 185, .62);
  transform: translateX(-50%) rotate(-4deg);
  border-radius: 2px;
}

/* ============================================================
   Gallery marquee
   ============================================================ */
.gallery-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  padding-block: 1.4rem .6rem;
}
.gallery-track {
  display: flex; gap: 2rem; width: max-content;
  animation: scrollX 55s linear infinite;
}
.gallery-marquee:hover .gallery-track { animation-play-state: paused; }
.art-frame {
  background: var(--white); padding: 10px 10px 14px;
  border-radius: 10px; box-shadow: var(--shadow-soft);
  position: relative; flex: none;
  transition: transform .3s ease;
}
.art-frame:nth-child(odd)  { transform: rotate(1.8deg); }
.art-frame:nth-child(even) { transform: rotate(-2deg); }
.art-frame:hover { transform: rotate(0) scale(1.04); z-index: 2; box-shadow: var(--shadow-lift); }
.art-frame img { height: 215px; width: auto; border-radius: 5px; }

/* ============================================================
   Grow STRONG
   ============================================================ */
.grow-panel {
  display: grid; align-items: center;
  gap: clamp(2.2rem, 1.8rem + 2.5vw, 4rem);
}
@media (min-width: 880px) {
  .grow-panel { grid-template-columns: 1.15fr .85fr; }
}
.grow-copy p { margin-top: 1.05rem; color: #4f596b; }
.grow-cta-line {
  margin-top: 1.4rem;
  font-family: var(--font-marker);
  color: var(--gold-deep);
  font-size: clamp(1.05rem, .95rem + .55vw, 1.3rem);
  line-height: 1.7;
}
.grow-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.5rem; }
.grow-visual { position: relative; max-width: 360px; margin-inline: auto; }
.grow-visual::before {
  content: ''; position: absolute; inset: 10% -4% -6% 4%;
  background: var(--cream);
  border-radius: 50% 50% 46% 54% / 48% 56% 44% 52%;
  transform: rotate(6deg);
}
.grow-visual img { position: relative; }
.heart-float {
  position: absolute; top: 2%; right: 2%;
  font-size: 1.8rem; color: var(--terracotta);
  animation: floaty 5s ease-in-out infinite alternate;
}

/* ============================================================
   Beyond the studio (book / kiknowa / discovery)
   ============================================================ */
.beyond-grid {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}
.beyond-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
}
.beyond-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
/* Same padding-top + absolute-img sizing as .product-media: a fixed 16/11 box
   no image can stretch or collapse. inset:0 + margin:auto centres an img that
   carries its own inline width/height (the homepage book card does). */
.beyond-media {
  padding-top: 68.75%;
  background: var(--cream-soft);
  overflow: hidden; position: relative;
}
.beyond-media img { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; object-fit: cover; }
.beyond-media.contain img { object-fit: contain; padding: 1.2rem; }
.beyond-body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.beyond-body p { font-size: .95rem; color: #5d6678; flex: 1; }
.beyond-body .text-link { align-self: flex-start; font-size: .92rem; }

/* ============================================================
   Visit
   ============================================================ */
.visit-grid {
  display: grid; align-items: center;
  gap: clamp(2.2rem, 1.8rem + 2.5vw, 4rem);
}
@media (min-width: 920px) {
  .visit-grid { grid-template-columns: .95fr 1.05fr; }
}
.visit-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem);
}
.visit-rows { margin-top: 1.4rem; display: grid; gap: 1.15rem; }
.visit-row { display: flex; gap: .95rem; align-items: flex-start; }
.visit-ico {
  flex: none; width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--white); border-radius: 12px;
  box-shadow: var(--shadow-soft);
  font-size: 1.1rem;
}
.visit-row strong { display: block; color: var(--brown); font-size: .98rem; }
.visit-row p, .visit-row a.plain { font-size: .95rem; color: #4f596b; }
.visit-row a.plain { display: block; }
.visit-row a.plain:hover { color: var(--brown); text-decoration: underline; }

.hours-table { font-size: .95rem; color: #4f596b; display: grid; gap: .15rem; }
.hours-table div { display: flex; justify-content: space-between; gap: 1.5rem; max-width: 300px; }
.hours-table dt { font-weight: 500; }
.hours-table dd { margin: 0; font-weight: 600; color: var(--gold-deep); }

.social-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.social-chips a {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--white); border: 1.5px solid var(--tan-soft);
  padding: .45rem .95rem; border-radius: 999px;
  font-weight: 600; font-size: .88rem; color: var(--brown);
  transition: border-color .2s ease, transform .2s ease;
}
.social-chips a:hover { border-color: var(--tan); transform: translateY(-2px); }
.social-chips a::after { content: '↗'; color: var(--tan); }
/* internal chip links are not outbound, so no arrow */
.social-chips.internal a::after { content: none; }

.visit-photo { position: relative; }
.visit-photo .polaroid { transform: rotate(-1.5deg); }
.visit-photo figcaption {
  margin-top: 1rem; text-align: center;
  font-size: .92rem; color: #6f7889;
}

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--brown-dark); color: var(--cream); }
.footer a { color: var(--tan-soft); transition: color .2s ease; }
.footer a:hover { color: var(--white); }

.footer-grid {
  display: grid; gap: 2.4rem;
  padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem) 2.4rem;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.footer-brand img { height: 52px; width: auto; }
.footer-brand p { margin-top: 1rem; font-size: .93rem; color: var(--tan-soft); max-width: 30ch; }

.footer h4 {
  font-family: var(--font-body); font-weight: 700;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tan); margin-bottom: 1rem;
}
.footer-col ul { display: grid; gap: .55rem; font-size: .95rem; }

.footer-bottom {
  border-top: 1px solid rgba(150, 186, 185, .25);
  padding-block: 1.3rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.8rem;
  justify-content: space-between;
  font-size: .84rem; color: rgba(217, 208, 194, .8);
}

/* ============================================================
   Floating WhatsApp
   ============================================================ */
.wa-float {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--wa-green); color: var(--white);
  font-weight: 600; font-size: .95rem;
  padding: .85rem 1.35rem; border-radius: 999px;
  box-shadow: 0 12px 30px rgba(122, 158, 126, .45);
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.wa-float.show { opacity: 1; transform: none; pointer-events: auto; }
.wa-float:hover { transform: translateY(-3px); }
.wa-float svg { flex: none; }
@media (max-width: 560px) {
  .wa-float span { display: none; }
  .wa-float { padding: .95rem; }
}

/* ============================================================
   Reveal on scroll (classes applied by JS only)
   ============================================================ */
.reveal-init { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.revealed    { opacity: 1; transform: none; }

/* ============================================================
   KiKnowa page (/kiknowa)
   ============================================================ */
.kk-hero-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 4.6;
  max-width: 430px;
  margin-inline: auto;
  background: var(--cream-soft);
}
.kk-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 12% center;
}

.stat-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.8rem, 1.5rem + 1.5vw, 2.8rem);
  text-align: center;
  position: relative;
}
.stat-panel .big-num {
  display: block;
  font-family: var(--font-marker);
  font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem);
  color: var(--gold-deep);
  line-height: 1.1;
}
.stat-panel .big-label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem);
  color: var(--brown);
  margin-top: .3rem;
}
.stat-panel p { margin-top: 1.1rem; font-size: .97rem; color: #5d6678; }

.who-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.who-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.7rem 1.6rem;
  text-align: center;
}
.who-card .who-ico {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px;
  background: var(--tan-faint);
  border-radius: 50%;
  font-size: 1.5rem;
  margin-bottom: .9rem;
}
.who-card p { margin-top: .5rem; font-size: .95rem; color: #5d6678; }

.steps { display: grid; gap: 1.5rem; counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.7rem 1.6rem;
  position: relative;
}
.step-num {
  font-family: var(--font-marker);
  color: var(--gold);
  font-size: 2rem; line-height: 1;
  display: block; margin-bottom: .7rem;
}
.step h3 { margin-bottom: .5rem; }
.step p { font-size: .95rem; color: #5d6678; }
.step .magic-line {
  margin-top: .8rem;
  font-family: var(--font-marker);
  color: var(--gold-deep);
  font-size: 1rem;
}

.deck-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.deck-card {
  border-radius: 16px;
  padding: 1.3rem 1rem 1.4rem;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease;
}
.deck-card:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: var(--shadow-lift); }
.deck-card .deck-no {
  font-family: var(--font-marker);
  font-size: .85rem; letter-spacing: .08em;
  opacity: .75; display: block; margin-bottom: .45rem;
}
.deck-card .deck-name {
  font-family: var(--font-display);
  font-size: 1.02rem; line-height: 1.3;
}
.deck-card small { display: block; margin-top: .4rem; font-size: .78rem; opacity: .8; }
/* pastel deck colours lifted from the physical set */
.deck-1 { background: #ecdcc0; color: #6a5636; }
.deck-2 { background: #f3bcc0; color: #7c4046; }
.deck-3 { background: #cfbce4; color: #584573; }
.deck-4 { background: #f5c5a2; color: #7c5230; }
.deck-5 { background: #bcc9a5; color: #4d5c38; }
.deck-6 { background: #b9d0e8; color: #3d5673; }
.deck-7 { background: #abd6c8; color: #35604f; }

.kk-list { margin-top: 1.2rem; display: grid; gap: .7rem; }
.kk-list li { display: flex; gap: .7rem; align-items: flex-start; color: #4f596b; }
.kk-list li::before { content: '♥'; color: var(--terracotta); flex: none; font-size: .85rem; line-height: 1.8; }

/* Testimonial video block (homepage, Why choose section) */
.video-block {
  max-width: 840px;
  margin: clamp(3.2rem, 2.8rem + 2vw, 5rem) auto 0;
  text-align: center;
}
.video-block h3 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); }
.video-block .center-squig::after { margin-inline: auto; }
.video-block video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: var(--shadow-lift);
  margin-top: 1.8rem;
  background: var(--tan-faint);
}
.video-caption { margin-top: 1rem; font-size: .92rem; color: #6f7889; }
.video-block .btn { margin-top: 1.4rem; }

.philosophy {
  text-align: center;
  max-width: 620px; margin-inline: auto;
}
.philosophy .phil-quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.25rem, 1.1rem + 1vw, 1.7rem);
  color: var(--brown); line-height: 1.45;
}
.philosophy .text-link { margin-top: 1.4rem; }

.kk-brandmark { height: 60px; width: auto; border-radius: 10px; margin-bottom: 1.2rem; }

/* KiKnowa character hero: transparent PNG floats on the cream */
.kk-character { max-width: 380px; margin-inline: auto; }
.kk-character img { filter: drop-shadow(0 18px 30px rgba(48, 77, 118, .22)); }

.speech-bubble {
  position: relative;
  max-width: 330px;
  margin: -1.4rem auto 0;
  background: var(--white);
  border-radius: 18px;
  padding: 1rem 1.3rem;
  box-shadow: var(--shadow-lift);
  font-size: .97rem; color: var(--brown);
  transform: rotate(-1.5deg);
}
.speech-bubble::before {
  content: '';
  position: absolute; top: -10px; left: 48px;
  border: 11px solid transparent;
  border-bottom-color: var(--white);
  border-top: none;
}

.agreement { text-align: center; margin-top: clamp(2.4rem, 2rem + 2vw, 3.6rem); }
.agreement-chips { justify-content: center; margin-top: 1.1rem; }
.agreement-note {
  margin-top: 1.1rem;
  font-family: var(--font-display); font-style: italic;
  color: var(--brown); font-size: 1.05rem;
}

.deck-card small { font-style: italic; line-height: 1.45; }

.guide-band {
  max-width: 640px; margin: clamp(2.6rem, 2.2rem + 2vw, 4rem) auto 0;
  text-align: center;
}
.guide-band .quote-card { text-align: left; }
.guide-band > p { margin-top: 1.3rem; color: #5d6678; }
.coming-chip {
  display: inline-block; margin-top: 1rem;
  border: 2px dashed var(--tan);
  border-radius: 999px; padding: .5rem 1.2rem;
  font-family: var(--font-marker); font-size: .92rem;
  color: var(--gold-deep);
}

/* Placeholder panels for videos / testimonials (honest coming-soon) */
.placeholder-panel {
  max-width: 620px; margin-inline: auto;
  background: var(--cream-soft);
  border: 2px dashed var(--tan);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.6rem + 2vw, 3rem);
  text-align: center;
  color: #5d6678;
}
.play-badge {
  display: inline-grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--gold); color: var(--paper);
  font-size: 1.3rem; margin-bottom: 1rem;
}
.play-badge.heart { background: var(--terracotta); }
.coming-line {
  font-family: var(--font-marker);
  color: var(--gold-deep);
  font-size: 1.15rem; margin-bottom: .6rem;
}

/* ============================================================
   Small screens: pull decorative overhangs inside the viewport
   so nothing creates horizontal overflow on phones
   ============================================================ */
@media (max-width: 640px) {
  .hero-tag { left: 2%; }
  .founder-chip { right: 2%; }
  .blob-wrap::before { inset: 7% -3% -7% 3%; }
  .grow-visual::before { inset: 10% -2% -6% 2%; }
  .polaroid-side { left: -5%; }
  .splat-a { left: 0; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gallery-track, .dot, .sparkle, .heart-float { animation: none !important; }
  .reveal-init { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; }
}

/* ============================================================
   Multi-page site additions
   Nav dropdowns, page heroes, accordions, filter gallery,
   testimonials, podcast grid, pricing, events, blog, shop.
   ============================================================ */

/* ---------- Nav dropdowns ---------- */
.site-nav .has-drop { position: relative; }
.site-nav .drop-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 500; font-size: .98rem; color: var(--ink);
  padding: .3rem 0; font-family: inherit;
}
.site-nav .drop-btn .caret {
  width: 8px; height: 8px; border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold); transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
}
.site-nav .drop {
  position: absolute; top: calc(100% + .8rem); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 232px; background: var(--paper);
  border: 1px solid var(--tan-soft); border-radius: 16px;
  box-shadow: var(--shadow-lift); padding: .5rem;
  display: grid; gap: .1rem;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 20;
}
/* invisible bridge so the menu survives the gap on the way down */
.site-nav .drop::before {
  content: ''; position: absolute; left: 0; right: 0; top: -.8rem; height: .8rem;
}
.site-nav .has-drop:hover .drop,
.site-nav .has-drop:focus-within .drop {
  opacity: 1; pointer-events: auto; transform: translateX(-50%);
}
.site-nav .has-drop:hover .caret,
.site-nav .has-drop:focus-within .caret { transform: rotate(225deg) translateY(-2px); }
.site-nav .drop a {
  display: block; padding: .58rem .8rem; border-radius: 10px;
  font-size: .95rem; white-space: nowrap;
}
.site-nav .drop a::after { display: none; }
.site-nav .drop a:hover { background: var(--tan-faint); color: var(--brown); }
.site-nav a[aria-current="page"] { color: var(--gold-deep); font-weight: 600; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

@media (max-width: 1180px) {
  .site-nav .has-drop { border-bottom: 1px solid var(--tan-soft); }
  .site-nav .drop-btn {
    display: flex; width: 100%; justify-content: space-between;
    padding: .9rem .2rem; font-size: 1.05rem;
  }
  .site-nav .drop {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    min-width: 0; border: none; box-shadow: none; background: none;
    padding: 0 0 .7rem .9rem; display: none;
  }
  .site-nav .drop::before { display: none; }
  .site-nav .has-drop:hover .drop { display: none; }
  .site-nav .has-drop.open .drop,
  .site-nav .has-drop.open:hover .drop { display: grid; }
  .site-nav .has-drop.open .caret { transform: rotate(225deg) translateY(-2px); }
  .site-nav .drop a { padding: .55rem .2rem; font-size: .98rem; }
}

/* ---------- Page hero (subpages) ---------- */
.page-hero { position: relative; overflow: hidden; background: var(--cream); }
.page-hero .container {
  padding-block: clamp(2.6rem, 2rem + 3.4vw, 4.6rem);
  position: relative; z-index: 1;
}
.page-hero.with-photo .container {
  display: grid; gap: clamp(2rem, 1.5rem + 3vw, 3.6rem);
  align-items: center; grid-template-columns: 1fr;
}
.page-hero h1 { margin: .9rem 0 1rem; }
.page-hero .lede {
  font-size: clamp(1.03rem, 1rem + .35vw, 1.2rem);
  color: #33415c; max-width: 44rem;
}
.page-hero .hero-ctas { margin-top: 1.6rem; }
.page-hero-photo { position: relative; max-width: 440px; margin-inline: auto; }
.crumbs { font-size: .86rem; color: #6f7889; display: flex; gap: .45rem; flex-wrap: wrap; }
.crumbs a { color: #6f7889; }
.crumbs a:hover { color: var(--gold-deep); text-decoration: underline; }

@media (min-width: 900px) {
  .page-hero.with-photo .container { grid-template-columns: 1.15fr .85fr; }
}

/* ---------- Accordion ---------- */
.accordion { display: grid; gap: .8rem; max-width: 860px; }
.accordion.wide { max-width: none; }
.acc-item {
  background: var(--white); border: 1px solid var(--tan-soft);
  border-radius: 16px; overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.acc-item[open] { box-shadow: var(--shadow-soft); border-color: var(--gold-light); }
.acc-item > summary {
  cursor: pointer; list-style: none;
  padding: 1.05rem 3rem 1.05rem 1.2rem; position: relative;
  font-family: var(--font-display); font-size: 1.05rem;
  color: var(--brown); line-height: 1.35;
}
.acc-item > summary::-webkit-details-marker { display: none; }
.acc-item > summary::after {
  content: ''; position: absolute; right: 1.25rem; top: 1.45rem;
  width: 9px; height: 9px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg); transition: transform .25s ease;
}
.acc-item[open] > summary::after { transform: rotate(225deg); }
.acc-item > summary:hover { background: var(--tan-faint); }
.acc-body { padding: 0 1.2rem 1.25rem; font-size: .97rem; color: #4f596b; }
.acc-body p + p { margin-top: .8rem; }
.acc-body ul { display: grid; gap: .45rem; margin-top: .6rem; }
.acc-body ul li { display: flex; gap: .6rem; }
.acc-body ul li::before { content: '\2022'; color: var(--tan); font-weight: 700; }

/* ---------- Filterable gallery ---------- */
.gallery-filters {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin-bottom: clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
}
.gallery-filters button {
  padding: .5rem 1.05rem; border-radius: 999px;
  border: 1.5px solid var(--tan-soft); background: var(--white);
  font-size: .9rem; font-weight: 500; color: var(--ink);
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}
.gallery-filters button:hover { border-color: var(--tan); transform: translateY(-2px); }
.gallery-filters button[aria-pressed="true"] {
  background: var(--gold); border-color: var(--gold); color: var(--paper);
}
.gallery-grid {
  display: grid; gap: clamp(.7rem, .5rem + .6vw, 1.1rem);
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.gallery-grid figure {
  margin: 0; background: var(--white); padding: .5rem;
  border-radius: 12px; box-shadow: var(--shadow-soft);
  transition: transform .28s ease, box-shadow .28s ease;
}
.gallery-grid figure:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-lift); }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.gallery-grid figure[hidden] { display: none; }
.gallery-count { text-align: center; margin-top: 1.6rem; font-size: .9rem; color: #6f7889; }

/* ---------- Testimonials ---------- */
.tcard-grid {
  display: grid; gap: clamp(1rem, .8rem + .8vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.tcard {
  background: var(--white); border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.3rem; box-shadow: var(--shadow-soft);
  border-top: 4px solid var(--gold-light);
  display: flex; flex-direction: column; gap: .7rem;
}
.tcard h3 { font-size: 1.05rem; }
.tcard blockquote { font-size: .96rem; color: #4f596b; flex: 1; }
.tcard .who {
  font-size: .85rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold-deep);
}
.tcard .stars { color: var(--tan); letter-spacing: .12em; font-size: .9rem; }

/* ---------- Podcast grid ---------- */
.pod-grid {
  display: grid; gap: clamp(1rem, .8rem + .8vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.pod-card {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-soft); display: flex; flex-direction: column;
  transition: transform .28s ease, box-shadow .28s ease;
}
.pod-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.pod-thumb {
  position: relative; aspect-ratio: 16 / 9; background: var(--tan-faint);
  border: none; padding: 0; width: 100%; cursor: pointer; display: block;
}
.pod-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pod-thumb iframe { width: 100%; height: 100%; border: 0; display: block; }
.pod-thumb .play {
  position: absolute; inset: 0; margin: auto;
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(71, 112, 122, .93); color: #fff;
  display: grid; place-items: center; font-size: 1.15rem;
  box-shadow: 0 8px 22px rgba(44, 62, 92, .35);
  transition: transform .25s ease, background .25s ease;
}
.pod-thumb:hover .play { transform: scale(1.1); background: var(--gold-deep); }
.pod-body { padding: 1rem 1.15rem 1.2rem; }
.pod-body h3 { font-size: 1.02rem; line-height: 1.32; }

/* Placeholder tile used while the podcast video links are being restored.
   Not a button, so nothing can load a dead iframe. */
.pod-thumb-idle {
  cursor: default;
  background:
    radial-gradient(circle at 30% 25%, rgba(150, 186, 185, .5), transparent 60%),
    radial-gradient(circle at 75% 80%, rgba(213, 126, 71, .22), transparent 62%),
    var(--tan-faint);
  display: grid; place-items: center;
}
.pod-thumb-idle .play-idle {
  position: static; width: 52px; height: 52px;
  background: rgba(71, 112, 122, .18); color: var(--gold-deep);
  box-shadow: none; font-size: 1.35rem;
}
.pod-card:hover .pod-thumb-idle .play-idle { transform: none; background: rgba(71, 112, 122, .18); }

/* ---------- Icon / value grids ---------- */
.mini-grid {
  display: grid; gap: clamp(1rem, .8rem + .8vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.mini-card {
  background: var(--white); border-radius: var(--radius);
  padding: 1.5rem 1.35rem; box-shadow: var(--shadow-soft);
  border: 1px solid var(--tan-soft);
}
.mini-card .ico { font-size: 1.75rem; display: block; margin-bottom: .7rem; }
.mini-card h3 { font-size: 1.05rem; }
.mini-card p { margin-top: .45rem; font-size: .93rem; color: #5d6678; }

.pillar-grid {
  display: grid; gap: clamp(1rem, .8rem + .8vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pillar {
  text-align: center; padding: 1.8rem 1.4rem;
  background: var(--cream-soft); border-radius: var(--radius-lg);
  border: 1px dashed var(--gold-light);
}
.pillar .ico {
  width: 62px; height: 62px; margin: 0 auto .9rem;
  border-radius: 50%; background: var(--tan-faint);
  display: grid; place-items: center; font-size: 1.6rem;
}
.pillar p { margin-top: .5rem; font-size: .93rem; color: #5d6678; }

/* ---------- Photo + copy alternating rows ---------- */
.alt-row {
  display: grid; gap: clamp(1.6rem, 1.2rem + 2.4vw, 3.2rem);
  align-items: center; grid-template-columns: 1fr;
}
.alt-row + .alt-row { margin-top: clamp(3rem, 2.4rem + 2.6vw, 5rem); }
.alt-row .alt-copy p { margin-top: 1rem; color: #4f596b; }
.alt-row .alt-photo { max-width: 520px; margin-inline: auto; width: 100%; }
.alt-row .alt-photo img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
@media (min-width: 860px) {
  .alt-row { grid-template-columns: 1fr 1fr; }
  .alt-row.flip .alt-copy { order: 2; }
}
.meta-list { display: grid; gap: .5rem; margin-top: 1.2rem; }
.meta-list li { display: flex; gap: .7rem; font-size: .95rem; color: #4f596b; }
.meta-list strong { color: var(--brown); min-width: 5.5rem; flex: none; }

/* ---------- Pricing tiers ---------- */
.tier-grid {
  display: grid; gap: clamp(1rem, .8rem + .8vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 760px; margin-inline: auto;
}
.tier {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 1.9rem 1.6rem; text-align: center;
  box-shadow: var(--shadow-soft); border: 2px solid var(--tan-soft);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.tier:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--gold-light); }
.tier .tier-name { font-family: var(--font-display); font-size: 1.3rem; color: var(--brown); }
.tier .tier-price {
  font-family: var(--font-display); font-size: 2.6rem; color: var(--gold-deep);
  line-height: 1; margin: .6rem 0 .3rem;
}
.tier .tier-dur { font-size: .9rem; font-weight: 600; color: #6f7889; letter-spacing: .04em; }
.tier ul { margin-top: 1.1rem; display: grid; gap: .45rem; font-size: .93rem; color: #4f596b; }
.tier ul li::before { content: '\2726'; color: var(--tan); margin-right: .45rem; }

/* ---------- Activity chips grid ---------- */
.activity-grid {
  display: grid; gap: clamp(.8rem, .6rem + .6vw, 1.2rem);
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.activity {
  background: var(--white); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-soft); text-align: center;
  transition: transform .26s ease, box-shadow .26s ease;
}
.activity:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.activity img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.activity span {
  display: block; padding: .7rem .6rem .85rem; font-size: .86rem;
  font-weight: 500; color: var(--brown); line-height: 1.3;
}

/* ---------- Blog list ---------- */
.post-list { display: grid; gap: clamp(1rem, .8rem + .8vw, 1.5rem); }
.post-card {
  background: var(--white); border-radius: var(--radius);
  padding: 1.5rem 1.6rem; box-shadow: var(--shadow-soft);
  border-left: 4px solid var(--gold-light);
  transition: transform .26s ease, box-shadow .26s ease;
}
.post-card:hover { transform: translateX(4px); box-shadow: var(--shadow-lift); }
.post-card h2 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
.post-meta { font-size: .84rem; color: #6f7889; margin: .4rem 0 .7rem; letter-spacing: .02em; }
.post-card p { font-size: .96rem; color: #4f596b; }
.post-card .text-link { margin-top: .9rem; font-size: .9rem; }

/* ---------- Shop ---------- */
.product-grid {
  display: grid; gap: clamp(1rem, .8rem + .8vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.product {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-soft); display: flex; flex-direction: column;
  transition: transform .28s ease, box-shadow .28s ease;
}
.product:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
/* Same absolute-img + padding-top trick as .program-media: keeps every card's
   media box an identical 4/3 whatever the image's own shape. */
.product-media { padding-top: 75%; background: var(--tan-faint); position: relative; overflow: hidden; }
.product-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product-media.contain img { object-fit: contain; padding: 1.1rem; }
.product-body { padding: 1.25rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.product-body p { font-size: .93rem; color: #5d6678; flex: 1; }
.product-price { font-family: var(--font-display); font-size: 1.45rem; color: var(--gold-deep); }
.product-price small { font-size: .8rem; color: #6f7889; font-family: var(--font-body); }
.order-note {
  margin-top: clamp(2.4rem, 2rem + 2vw, 3.4rem);
  background: var(--tan-faint); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); text-align: center;
}
.order-note h3 { margin-bottom: .6rem; }
.order-note p { color: #4f596b; max-width: 52ch; margin-inline: auto; }
.order-note .trial-ctas { justify-content: center; }

/* ---------- Map ---------- */
.map-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-soft); border: 1px solid var(--tan-soft);
  line-height: 0;
}
.map-frame iframe { width: 100%; height: 400px; border: 0; display: block; }

/* ---------- Simple CTA band ---------- */
.cta-band {
  background: var(--cream); border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.6rem + 2vw, 3.4rem); text-align: center;
  position: relative; overflow: hidden;
}
.cta-band h2 { max-width: 30ch; margin-inline: auto; }
.cta-band p { margin-top: .9rem; color: #4f596b; max-width: 52ch; margin-inline: auto; }
.cta-band .trial-ctas { justify-content: center; }

/* ---------- Author card ---------- */
.author-card {
  display: grid; gap: clamp(1.6rem, 1.2rem + 2vw, 2.8rem); align-items: start;
  background: var(--white); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 1.3rem + 1.6vw, 2.6rem);
  box-shadow: var(--shadow-soft);
}
.author-card .author-photo { max-width: 240px; margin-inline: auto; }
.author-card .author-photo img { border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.author-card p { margin-top: .9rem; font-size: .96rem; color: #4f596b; }
@media (min-width: 800px) { .author-card { grid-template-columns: 240px 1fr; } }

/* ---------- Book preview carousel ---------- */
.preview-stage {
  position: relative;
  display: grid; place-items: center;
  padding: clamp(1.4rem, 1rem + 2vw, 2.6rem) 0;
}
.preview-frame {
  position: relative;
  /* Every child is absolutely positioned, so the frame has no intrinsic height.
     aspect-ratio would do this, but it collapses to 0 where unsupported, and a
     percentage padding-ratio resolves against the *container* width, not the
     element's. So set both axes explicitly: 1600/1040 = 1.5385, and
     78vw * 1.5385 = 120vw, so the ratio holds in both regimes. */
  width: min(360px, 78vw);
  height: min(554px, 120vw);
  border-radius: 10px;
  overflow: hidden;
  background: var(--tan-faint);
  box-shadow: var(--shadow-lift);
}
.preview-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .38s ease;
}
.preview-frame img.is-current { opacity: 1; }
/* the spine shadow, so a single page still reads as a book */
.preview-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(44, 62, 92, .16) 0%, rgba(44, 62, 92, 0) 7%);
}
.preview-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1.1rem; margin-top: 1.4rem;
}
.preview-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--tan-soft); background: var(--white);
  display: grid; place-items: center; color: var(--gold-deep);
  font-size: 1.05rem; line-height: 1;
  transition: border-color .22s ease, transform .22s ease, background .22s ease;
}
.preview-btn:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-2px); }
.preview-btn:disabled { opacity: .35; cursor: default; }
.preview-count {
  font-size: .88rem; letter-spacing: .06em; color: #6f7889;
  min-width: 5.5rem; text-align: center;
}
.preview-caption {
  text-align: center; margin-top: 1rem;
  font-size: .9rem; color: #6f7889;
}

/* ---------- Book preview: expanded / fullscreen ----------
   A fixed overlay rather than the Fullscreen API: the native API needs a user
   gesture, is blocked on iOS Safari for non-video elements, and cannot be
   styled. This behaves the same and works everywhere.
   The frame itself is repositioned, so the 14 pages are never duplicated. */
.preview-frame { cursor: zoom-in; }
.preview-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 2; pointer-events: none;
  background: rgba(44, 62, 92, .72); color: var(--cream);
  font-size: .74rem; letter-spacing: .04em;
  padding: .34rem .8rem; border-radius: 999px;
  opacity: 0; transition: opacity .25s ease;
}
.preview-frame:hover .preview-hint,
.preview-frame:focus-visible .preview-hint { opacity: 1; }

.preview-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20, 29, 44, .97);
  opacity: 0; transition: opacity .3s ease;
}
body.preview-open .preview-backdrop { opacity: 1; }
.preview-backdrop[hidden] { display: none; }

body.preview-open { overflow: hidden; }
/* The frame has to stay inside .preview-stage, and the stage carries
   data-reveal. Any transform on an ancestor makes position:fixed resolve
   against that ancestor instead of the viewport, so clear it while expanded. */
body.preview-open .preview-stage { transform: none; }
body.preview-open .preview-frame {
  position: fixed; z-index: 310;
  top: 50%; left: 50%;
  /* 1600/1040 = 1.5385. Both axes are clamped so the ratio holds whichever
     dimension runs out first. 190px is reserved below for the caption and
     the control bar, and the frame is nudged up by half of that so the page
     stays optically centred in the space that is left. */
  width: min(calc((100vh - 190px) / 1.5385), 92vw);
  height: min(calc(100vh - 190px), 141.5vw);
  transform: translate(-50%, calc(-50% - 45px));
  cursor: grab;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
/* the floating WhatsApp pill would sit on top of the expanded page */
body.preview-open .wa-float { display: none; }
body.preview-open .preview-frame.is-dragging { cursor: grabbing; }
body.preview-open .preview-hint { display: none; }

/* Click zones, only meaningful once expanded */
.preview-zone { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; display: none; }
body.preview-open .preview-zone { display: block; }
.preview-zone-prev { left: 0; cursor: w-resize; }
.preview-zone-next { right: 0; cursor: e-resize; }

.preview-close {
  position: fixed; top: 18px; right: 18px; z-index: 320;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 253, 247, .14); color: var(--cream);
  border: 1px solid rgba(255, 253, 247, .3);
  display: none; place-items: center; font-size: 1.3rem; line-height: 1;
  transition: background .22s ease, transform .22s ease;
}
body.preview-open .preview-close { display: grid; }
.preview-close:hover { background: rgba(255, 253, 247, .26); transform: scale(1.06); }

/* Controls float over the backdrop when expanded */
body.preview-open .preview-controls {
  position: fixed; z-index: 320;
  left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
}
body.preview-open .preview-btn {
  background: rgba(255, 253, 247, .14);
  border-color: rgba(255, 253, 247, .3);
  color: var(--cream);
}
body.preview-open .preview-btn:hover:not(:disabled) { background: rgba(255, 253, 247, .26); }
body.preview-open .preview-count { color: var(--cream); }
body.preview-open .preview-caption {
  position: fixed; z-index: 320;
  left: 50%; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 62px);
  transform: translateX(-50%);
  color: rgba(251, 245, 232, .75); margin: 0;
}

/* ---------- Retailers ---------- */
.retailer-grid {
  display: grid; gap: clamp(.8rem, .6rem + .6vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-width: 680px; margin-inline: auto;
}
.retailer {
  background: var(--white); border: 1px solid var(--tan-soft);
  border-radius: var(--radius); padding: 1.5rem 1.2rem; text-align: center;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.retailer:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--gold-light); }
.retailer-name {
  font-family: var(--font-display); font-size: 1.15rem;
  color: var(--brown); margin-bottom: .9rem;
}
.retailer .btn { width: 100%; }

/* ---------- Book block ---------- */
.book-row {
  display: grid; gap: clamp(1.6rem, 1.2rem + 2vw, 3rem); align-items: center;
  background: var(--white); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 1.3rem + 1.6vw, 2.6rem);
  box-shadow: var(--shadow-soft); border: 1px solid var(--tan-soft);
}
.book-row + .book-row { margin-top: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); }
.book-cover { max-width: 260px; margin-inline: auto; }
.book-cover img { border-radius: 12px; box-shadow: var(--shadow-lift); }
.book-row .sub { font-size: .97rem; color: var(--gold-deep); font-weight: 500; margin-top: .35rem; }
.book-row p { margin-top: .9rem; font-size: .96rem; color: #4f596b; }
@media (min-width: 820px) { .book-row { grid-template-columns: 260px 1fr; } }


/* ============================================================
   Watercolour layer (2026-09-05 pastel retheme)
   Lives at the END of the sheet on purpose: these override the flat
   var(--cream) backgrounds that .bg-cream / .page-hero / .cta-band set
   earlier. Soft deck-pastel pools bleeding into the ivory; background
   layers only, so they never touch layout.
   ============================================================ */
/* One painted wash on clean paper, like the cover: the artwork
   (images/watercolour-hero.svg, real ragged-edge watercolour via SVG
   turbulence) sits on the photo side of the hero. Everything else stays
   white so the paint reads as paint, not as a tinted background. */
.page-hero,
.hero.bg-cream {
  background:
    /* top layer: the paint "dries out" before the section edge, so a blot is
       never cut by a straight line */
    linear-gradient(180deg, rgba(255, 253, 248, 0) 62%, var(--paper) 96%),
    url("/images/watercolour-hero.svg") no-repeat right -8ch top -6ch / 76ch auto,
    var(--paper);
}
.cta-band {
  background:
    linear-gradient(90deg, var(--cream-soft) 30%, rgba(254, 250, 241, 0) 70%),
    url("/images/watercolour-hero.svg") no-repeat right -14ch center / 60ch auto,
    var(--cream-soft);
}
@media (max-width: 900px) {
  .page-hero,
  .hero.bg-cream {
    background-size: 58ch auto;
    background-position: right -12ch top -4ch;
  }
}

/* The quote cards keep the one warm thread: the gold of the box art and the
   book pages, so Elfin's print material still feels at home on the site. */
.quote-card { border-left-color: var(--gold-true); }

/* Deck-pastel rotation: testimonial cards wear the seven KiKnowa deck
   colours in order, quietly tying the studio's voices to the card decks. */
.tcard:nth-child(7n+1) { border-top-color: #ecdcc0; }
.tcard:nth-child(7n+2) { border-top-color: #f3bcc0; }
.tcard:nth-child(7n+3) { border-top-color: #cfbce4; }
.tcard:nth-child(7n+4) { border-top-color: #f5c5a2; }
.tcard:nth-child(7n+5) { border-top-color: #bcc9a5; }
.tcard:nth-child(7n+6) { border-top-color: #b9d0e8; }
.tcard:nth-child(7n)   { border-top-color: #abd6c8; }

/* Pillar icons sit in rotating pastel pools instead of one flat tint */
.pillar:nth-child(3n+1) .ico { background: #e7eeda; }
.pillar:nth-child(3n+2) .ico { background: #fbeed3; }
.pillar:nth-child(3n)   .ico { background: #e2edf5; }

/* Post cards + product accents pick up the rotation too */
.post-card:nth-child(3n+1) { border-left-color: #b9d0e8; }
.post-card:nth-child(3n+2) { border-left-color: #e9c489; }
.post-card:nth-child(3n)   { border-left-color: #b5cc95; }