/* ============================================================
   Shutterbird — "Sunny" theme
   Palette + design language borrowed from the Chasey iOS game:
   warm cream paper, heavy ink outlines, flat colour, rounded type,
   sticker-style hard shadows, everything slightly askew. Whimsical.
   ============================================================ */

@font-face {
  font-family: 'Fuzzy Bubbles';
  src: url('/fonts/FuzzyBubbles-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #f9f1e2;        /* background                    */
  --paper-2: #fffaf0;      /* raised card surface           */
  --ink: #3a3230;          /* text + outlines               */
  --faded: #7a6f62;        /* muted copy                    */
  --hairline: #c9bca4;
  --coral: #e8674c;
  --teal: #2fa39b;
  --mustard: #f2b33d;
  --sky: #9fd3e8;
  --leaf: #bfd9a0;
  --grape: #b14ad6;        /* brand mark — the purple lens  */
  --grape-deep: #8b2fb0;
  --outline: 2.5px;
  --radius: 16px;
  --maxw: 1120px;
  /* signature hard "sticker" shadow — no blur, offset in ink */
  --sticker: 5px 5px 0 var(--ink);
  --sticker-sm: 3px 3px 0 var(--ink);
  /* The product's real polaroid: warm cream card, soft ink shadow, thin chin —
     the same design system as the host dashboard and the public events gallery,
     so a photo shown here reads as the genuine article, not a marketing prop. */
  --sb-card: #fffdf7;
  --sb-live: #2f9e6f;
  --sb-polaroid-shadow: 0 12px 28px rgba(58, 46, 34, 0.22), 0 3px 6px rgba(58, 46, 34, 0.12);
  --sb-polaroid-shadow-lift: 0 22px 44px rgba(58, 46, 34, 0.28), 0 6px 12px rgba(58, 46, 34, 0.16);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: ui-rounded, 'SF Pro Rounded', 'Hiragino Maru Gothic ProN',
    -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  /* faint confetti dots on the paper */
  background-image:
    radial-gradient(var(--mustard) 1.5px, transparent 1.6px),
    radial-gradient(var(--sky) 1.5px, transparent 1.6px);
  background-size: 44px 44px, 44px 44px;
  background-position: 0 0, 22px 22px;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { letter-spacing: -0.01em; }
::selection { background: var(--mustard); color: var(--ink); }

/* handwriting for polaroid captions */
figcaption, .brand-lens + *, .hand { font-family: 'Fuzzy Bubbles', cursive; }

/* ─────────────── shutter flash ─────────────── */
.shutter {
  position: fixed; inset: 0; background: #fff; z-index: 999;
  pointer-events: none; opacity: 0;
  animation: flash 0.7s ease-out 0.15s 1 forwards;
}
@keyframes flash { 0%{opacity:0} 8%{opacity:.9} 100%{opacity:0} }
@media (prefers-reduced-motion: reduce) { .shutter { display: none; } }

/* ─────────────── nav ─────────────── */
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem clamp(1rem, 5vw, 3rem);
  position: sticky; top: 0; z-index: 50;
  background: rgba(249, 241, 226, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: var(--outline) solid var(--ink);
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.2rem; }
.brand-lens {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff 0 12%, var(--grape) 16% 52%, var(--grape-deep) 56% 100%);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--grape);
  flex: none;
  margin: 4px;
}
.nav nav { display: flex; gap: 1.3rem; align-items: center; }
.nav nav > a:not(.btn) { color: var(--ink); font-size: 0.95rem; font-weight: 600; }
.nav nav > a:not(.btn):hover { color: var(--coral); }
@media (max-width: 720px) { .nav nav > a:not(.btn) { display: none; } }

/* ─────────────── buttons (chunky) ─────────────── */
.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-weight: 800; font-size: 0.95rem;
  border: var(--outline) solid var(--ink);
  box-shadow: var(--sticker-sm);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  white-space: nowrap;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-lg { padding: 0.85rem 1.7rem; font-size: 1.05rem; }
.btn-primary { background: var(--coral); color: var(--paper); }
.btn-ghost { background: var(--paper-2); color: var(--ink); }

/* ─────────────── layout ─────────────── */
section { max-width: var(--maxw); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 5vw, 3rem); }
section > h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.08; margin: 0 0 0.6rem; font-weight: 850; }
.section-sub { color: var(--faded); font-size: clamp(1rem, 2vw, 1.15rem); max-width: 640px; margin: 0 0 2.4rem; }
.muted-h { color: var(--teal); }

/* ─────────────── HERO ─────────────── */
.hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  align-items: center; gap: clamp(2rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: 1rem;
}
/* Single column: the photo stage drops BELOW the hero copy (DOM order). */
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }

/* min-width:0 stops the (nowrap) headline from widening this grid track and
   squeezing the photo column — the headline is free to overflow instead. */
.hero-copy { min-width: 0; }

.eyebrow {
  display: inline-block; font-size: 0.9rem; font-weight: 800;
  color: var(--ink); background: var(--mustard);
  border: var(--outline) solid var(--ink);
  box-shadow: var(--sticker-sm);
  padding: 0.4rem 0.9rem; border-radius: 999px; margin-bottom: 1.3rem;
  transform: rotate(-1.5deg);
}
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 0.98; margin: 0 0 1.2rem; font-weight: 850; }
/* Two explicit lines, each kept on one line so the tagline never exceeds 2 lines.
   The headline floats over the top of the photo stage (above a hovered polaroid),
   and is click-through so the photos beneath stay interactive. */
.hero h1 { position: relative; z-index: 6; pointer-events: none; width: max-content; }
.hero h1 .l1, .hero h1 .l2 { display: block; white-space: nowrap; }
@media (max-width: 900px) { .hero h1 { width: auto; } }
.hero h1 .hl {
  color: var(--paper);
  background: var(--teal);
  border: var(--outline) solid var(--ink);
  box-shadow: var(--sticker-sm);
  padding: 0 0.2em 0.06em;
  border-radius: 10px;
  display: inline-block;
  transform: rotate(-2deg);
}
.lede { color: var(--faded); font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 520px; margin: 0 0 1.8rem; }
.lede em { color: var(--coral); font-style: normal; font-weight: 700; }
.cta { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.fineprint { color: var(--faded); font-size: 0.9rem; margin: 1.1rem 0 0; }
.fineprint.centered { text-align: center; margin-top: 1.8rem; }

/* ── hero polaroid stage ── */
/* Column: the scattered polaroids sit in .stage-cards, the changing label +
   dots sit under them. */
.hero-stage { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.stage-cards { position: relative; width: 100%; min-height: clamp(340px, 44vw, 480px); }
.pol {
  position: absolute; margin: 0;
  width: clamp(140px, 20vw, 195px);
  background: var(--sb-card);
  padding: 0.65rem 0.65rem 0;
  border-radius: 3px;
  box-shadow: var(--sb-polaroid-shadow);
  transform: rotate(var(--tilt));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pol:hover { transform: rotate(0deg) scale(1.05); z-index: 5; box-shadow: var(--sb-polaroid-shadow-lift); }
.shot { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--mustard); border: 2px solid var(--ink); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Polaroid photo well: no chunky outline, warm placeholder gradient — the frame
   does the talking, matching the host/events polaroids. */
.pol .shot { background: linear-gradient(135deg, #cdbfa6, #a7967a); border: none; border-radius: 1px; }
.pol figcaption {
  color: var(--ink); text-align: center;
  padding: 0.6rem 0 0.8rem; font-size: 1.2rem; line-height: 1.05;
}
.pol-a { top: 2%; left: 4%; } .pol-b { top: 0; right: 6%; }
.pol-c { bottom: 4%; left: 14%; } .pol-d { bottom: 0; right: 2%; z-index: 2; }

/* "Click in": each photo appears from nothing — no drift, scale, or fade —
   punched into existence by a camera flash, staggered across the four slots.
   scripts.js replays this every time the carousel changes group. */
.clickin { opacity: 0; animation: reveal 0.34s steps(1, start) forwards; animation-delay: calc(var(--i,0) * 130ms + 60ms); }
.pol-a{--i:0} .pol-b{--i:1} .pol-c{--i:2} .pol-d{--i:3}
@keyframes reveal { 0% { opacity: 0; } 100% { opacity: 1; } }
/* The capture flash: the frame is blown white the instant the photo lands,
   then clears to reveal it. */
.clickin .shot::after {
  content: ''; position: absolute; inset: 0; background: #fff; pointer-events: none;
  animation: snap-flash 0.34s ease-out both; animation-delay: calc(var(--i,0) * 130ms + 60ms);
}
@keyframes snap-flash {
  0%   { opacity: 0.92; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .clickin { animation: none; opacity: 1; }
  .clickin .shot::after { animation: none; opacity: 0; }
}

/* ── stage label + carousel dots (which event example is showing) ── */
.stage-meta { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.stage-label {
  margin: 0;
  font-family: 'Fuzzy Bubbles', cursive;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  color: var(--ink);
  background: var(--mustard);
  border: var(--outline) solid var(--ink);
  box-shadow: var(--sticker-sm);
  padding: 0.1rem 1.1rem 0.2rem;
  border-radius: 999px;
  transform: rotate(-1.5deg);
}
.stage-label.swap { animation: label-pop 0.34s cubic-bezier(0.2, 0.7, 0.3, 1.2); }
@keyframes label-pop {
  0%   { transform: rotate(-1.5deg) scale(0.6); opacity: 0; }
  60%  { transform: rotate(-1.5deg) scale(1.06); opacity: 1; }
  100% { transform: rotate(-1.5deg) scale(1); opacity: 1; }
}
.stage-dots { display: flex; gap: 0.5rem; }
.stage-dots button {
  width: 9px; height: 9px; padding: 0;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.stage-dots button[aria-current="true"] { background: var(--coral); transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) {
  .stage-label.swap { animation: none; }
}

/* whimsical doodles */
.doodle { position: absolute; font-size: 2rem; color: var(--coral); animation: spin 6s linear infinite; }
.doodle-star { top: 6%; right: 2%; color: var(--mustard); }
.doodle-spark { bottom: 8%; left: 2%; color: var(--teal); animation-duration: 8s; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .doodle { animation: none; } }

/* ─────────────── reveal ─────────────── */
.reveal { opacity: 0; transform: translateY(20px) rotate(-1deg); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ─────────────── cards ─────────────── */
.grid { display: grid; gap: 1.4rem; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: var(--paper-2);
  border: var(--outline) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--sticker);
  padding: 1.6rem;
  position: relative;
}
/* colour tab across the top of each card, per --c */
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 12px;
  background: var(--c, var(--coral));
  border-bottom: var(--outline) solid var(--ink);
  border-radius: 13px 13px 0 0;
}
.card > * { position: relative; }
.card-emoji {
  font-size: 1.6rem; display: grid; place-items: center;
  width: 3rem; height: 3rem; margin: 0.4rem 0 0.7rem;
  background: var(--c, var(--coral)); border: var(--outline) solid var(--ink);
  border-radius: 12px; box-shadow: var(--sticker-sm);
}
.card h3 { margin: 0 0 0.5rem; font-size: 1.2rem; font-weight: 800; }
.card p { margin: 0; color: var(--faded); }
.card em { color: var(--ink); font-style: italic; }
.tag {
  display: inline-block; font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--ink);
  background: var(--c, var(--mustard));
  border: 2px solid var(--ink); box-shadow: var(--sticker-sm);
  padding: 0.25rem 0.6rem; border-radius: 999px; margin-bottom: 0.9rem;
}

/* ─────────────── SWITCH ─────────────── */
.switch h2 { text-align: center; margin-bottom: 2.6rem; }
.switch-punch { text-align: center; font-size: clamp(1.15rem, 2.6vw, 1.5rem); margin: 2.8rem auto 0; max-width: 660px; font-weight: 600; }
.switch-punch strong { color: var(--coral); }

/* ─────────────── HOW ─────────────── */
.how h2 { text-align: center; margin-bottom: 3rem; }
.steps {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.step {
  position: relative; background: var(--paper-2);
  border: var(--outline) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--sticker); padding: 2.2rem 1.6rem 1.6rem; text-align: center;
}
.step:nth-child(1){ transform: rotate(-1deg); } .step:nth-child(3){ transform: rotate(1deg); }
/* hand-drawn arrows in the gaps between steps */
.step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  top: 50%; right: -1.7rem; transform: translateY(-50%);
  width: 42px; height: 24px;
  background: url(/arrow.svg) center / contain no-repeat;
}
@media (max-width: 812px) { /* stacked column: arrows point down */
  .step:not(:last-child)::after {
    top: auto; right: 50%; bottom: -1.75rem;
    transform: translateX(50%) rotate(90deg);
  }
}
.step-num {
  position: absolute; top: -1.1rem; left: 50%; transform: translateX(-50%);
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 850; color: var(--ink);
  background: var(--c, var(--mustard)); border: var(--outline) solid var(--ink);
  box-shadow: var(--sticker-sm);
}
.step-face {
  width: 88px; height: 88px; margin: 0.8rem auto 1rem; border-radius: 18px;
  display: grid; place-items: center; font-size: 2rem;
  background: var(--c, var(--sky)); border: var(--outline) solid var(--ink);
  box-shadow: var(--sticker-sm);
}
.step h3 { margin: 0 0 0.4rem; font-size: 2.4rem; font-weight: 800; line-height: 1.1; }
.step p { margin: 0; color: var(--faded); }
.qr {
  width: 46px; height: 46px;
  background:
    linear-gradient(var(--ink) 0 0) 0 0/16px 16px no-repeat,
    linear-gradient(var(--ink) 0 0) 100% 0/16px 16px no-repeat,
    linear-gradient(var(--ink) 0 0) 0 100%/16px 16px no-repeat,
    conic-gradient(from 0deg, var(--ink) 0 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0) 50% 50%/12px 12px;
}
.step-icon { display: block; }

/* ─────────────── LOOKS / film strip ─────────────── */
.looks-head { text-align: center; }
.looks-head .section-sub { margin-inline: auto; }
.film-strip {
  display: flex; gap: 1rem; overflow-x: auto; padding: 1.4rem;
  scroll-snap-type: x mandatory;
  background: var(--ink);
  border: var(--outline) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--sticker);
  /* sprocket holes top & bottom */
  background-image:
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(249,241,226,0.85) 26px 40px),
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(249,241,226,0.85) 26px 40px);
  background-size: 100% 10px, 100% 10px;
  background-position: top, bottom; background-repeat: no-repeat;
}
.frame {
  flex: 0 0 auto; scroll-snap-align: center; width: 155px; margin: 0;
  background: #fff; padding: 0.6rem 0.6rem 0;
  border: var(--outline) solid var(--ink); border-radius: 3px;
  box-shadow: var(--sticker-sm); transition: transform 0.2s ease;
}
.frame:hover { transform: translateY(-6px) rotate(-2deg); }
.frame figcaption { text-align: center; padding: 0.45rem 0 0.6rem; color: var(--ink); font-size: 1.05rem; }
.shot.retro img { filter: sepia(0.55) saturate(1.35) contrast(0.95) hue-rotate(-8deg); }
.shot.bw img    { filter: grayscale(1) contrast(1.12); }
.shot.pola img  { filter: saturate(1.25) brightness(1.06) contrast(0.94); }
.shot.cine img  { filter: contrast(1.2) saturate(1.15) brightness(0.9) hue-rotate(6deg); }
.shot.flash img { filter: brightness(1.22) contrast(1.25) saturate(0.9); }

/* ─────────────── THE EVENT BOOK ─────────────── */
.book-head { text-align: center; }
.book-head .section-sub { margin-inline: auto; }
.book-layout {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
}
@media (max-width: 860px) { .book-layout { grid-template-columns: 1fr; } }

/* Block, not flex: a flex item's automatic minimum size would let the page's
   contents override its square aspect ratio. */
.book-visual { display: block; text-align: center; }
/* A single square page of the book: cream stock, soft shadow, no hard outline —
   the page is paper, not a sticker, so it reads as the printed article. */
.book-page {
  width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto 0.9rem;
  background: var(--sb-card);
  border-radius: 4px;
  box-shadow: var(--sb-polaroid-shadow);
  transform: rotate(-1deg);
  padding: clamp(0.7rem, 2.2vw, 1.1rem);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: clamp(0.5rem, 1.8vw, 0.9rem);
  place-items: center;
}
/* Four polaroids tiled 2×2, each tossed at its own angle — same card, chin and
   shadow as the hero polaroids. */
/* Sized off the row height, not the cell width, so the square photo plus its
   chin always fits and the page stays square. */
.book-pol {
  --pad: 0.4rem;
  --chin: 1.5rem;
  margin: 0; height: 100%; width: fit-content;
  min-width: 0; min-height: 0;
  background: var(--sb-card);
  padding: var(--pad) var(--pad) 0;
  border-radius: 2px;
  box-shadow: var(--sb-polaroid-shadow);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.book-pol:hover { transform: rotate(0deg) scale(1.04); box-shadow: var(--sb-polaroid-shadow-lift); }
.book-pol .shot {
  height: calc(100% - var(--pad) - var(--chin)); width: auto; aspect-ratio: 1;
  background: linear-gradient(135deg, #cdbfa6, #a7967a);
  border: none; border-radius: 1px;
}
.book-pol figcaption {
  height: var(--chin); display: grid; place-items: center;
  color: var(--ink); text-align: center;
  font-size: clamp(0.7rem, 1.4vw, 0.88rem); line-height: 1;
}
.book-caption {
  font-family: 'Fuzzy Bubbles', cursive; color: var(--faded);
  text-align: center; font-size: 1.05rem;
}

.book-formats { display: grid; gap: 1.2rem; }
.format {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--paper-2);
  border: var(--outline) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--sticker-sm); padding: 1.1rem 1.3rem;
}
.format-icon {
  flex: none; font-size: 1.4rem;
  width: 3rem; height: 3rem; display: grid; place-items: center;
  border-radius: 12px; background: var(--c, var(--coral));
  border: var(--outline) solid var(--ink);
}
.format h3 { margin: 0 0 0.25rem; font-size: 1.2rem; font-weight: 800; }
.format p { margin: 0; color: var(--faded); font-size: 0.95rem; }

/* ─────────────── LIVE GALLERY ─────────────── */
.gallery-head { text-align: center; }
.gallery-head .section-sub { margin-inline: auto; }
.live-gallery {
  /* one centred strip of overlapping polaroids; scripts.js sets --x per card.
     --step = visible fraction of each card, the rest tucks under its neighbour */
  --polw: clamp(160px, 20vw, 240px);
  --step: 0.78;
  position: relative;
  height: calc(var(--polw) + 5.5rem);
  overflow: visible;
}
.g-pol {
  position: absolute; top: 2rem; left: 50%;
  width: var(--polw);
  background: var(--sb-card); padding: 0.55rem 0.55rem 0;
  border-radius: 3px;
  box-shadow: var(--sb-polaroid-shadow);
  transform: translateX(var(--x, -50%)) rotate(var(--r, 0deg));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease, filter 0.45s ease;
}
/* A new photo appears from nothing on the strip: it's inserted at full size in
   its slot — no scale, no drift — and a camera flash blows the frame white for
   an instant, then clears to reveal it. JS adds .snap for the flash, then drops
   it so the strip's glide (below) can take over. */
.g-pol.snap .shot::after {
  content: ''; position: absolute; inset: 0; background: #fff; pointer-events: none;
  animation: snap-flash 0.32s ease-out both;
}
.g-pol.out {
  opacity: 0;
  transform: translateX(var(--x, -50%)) translateY(12px) rotate(var(--r, 0deg)) scale(0.92);
}
@media (max-width: 640px) {
  .live-gallery { --polw: 150px; --step: 0.55; }

  /* On phones a scattered pile is cramped: show one centred polaroid per event
     (scripts.js picks a random shot from the group) so it reads clearly. */
  .stage-cards {
    position: static;
    min-height: auto;
    display: flex;
    justify-content: center;
    padding-top: 0.4rem;
  }
  .stage-cards .pol { position: static; }
  .pol-b, .pol-c, .pol-d { display: none; }
  .pol-a { width: min(74vw, 300px); --tilt: -2deg; }
  .stage-cards .doodle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .g-pol { transition: none; }
  .g-pol.snap { animation: none; }
  .g-pol.snap .shot::after { animation: none; opacity: 0; }
}
.g-pol .shot {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: linear-gradient(135deg, #cdbfa6, #a7967a);
  border: none; border-radius: 1px;
}
.g-pol .meta { display: flex; justify-content: center; padding: 0.55rem 0.35rem 0.7rem; color: var(--ink); font-size: 1.05rem; font-family: 'Fuzzy Bubbles', cursive; }
.g-pol .meta .who { white-space: nowrap; font-weight: 700; }
.gallery-note { text-align: center; color: var(--faded); margin-top: 1.6rem; font-size: 0.95rem; font-weight: 600; }
.gallery-note .dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal); border: 1.5px solid var(--ink);
  animation: pulse 1.6s infinite; margin-right: 0.4rem; vertical-align: middle;
}
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(47,163,155,.5)} 70%{box-shadow:0 0 0 8px rgba(47,163,155,0)} 100%{box-shadow:0 0 0 0 rgba(47,163,155,0)} }

/* ─────────────── TRUST / stats ─────────────── */
.trust h2 { text-align: center; margin-bottom: 2.6rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2rem; margin-top: 2.6rem; }
.stat {
  text-align: center; background: var(--c, var(--coral));
  border: var(--outline) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--sticker); padding: 1.6rem 1rem; color: var(--ink);
}
.stat:nth-child(odd) { transform: rotate(-1.5deg); } .stat:nth-child(even) { transform: rotate(1.5deg); }
.stat b { display: block; font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 850; line-height: 1; color: var(--ink); }
.stat b span { font-size: 0.55em; }
.stat-label { display: block; color: var(--ink); font-size: 0.9rem; margin-top: 0.5rem; font-weight: 600; opacity: 0.85; }

/* ─────────────── TWO SIDES ─────────────── */
.two-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@media (max-width: 760px) { .two-sides { grid-template-columns: 1fr; } }
.side {
  background: var(--paper-2); border: var(--outline) solid var(--ink);
  border-radius: var(--radius); box-shadow: var(--sticker); padding: 2rem;
  border-top: 12px solid var(--c, var(--teal));
}
.side-kicker { display: inline-block; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c, var(--teal)); margin-bottom: 0.6rem; }
.side h3 { margin: 0 0 1.1rem; font-size: 1.5rem; font-weight: 850; }
.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.side li { position: relative; padding-left: 2rem; color: var(--faded); }
.side li::before {
  content: "✓"; position: absolute; left: 0; top: 0.05rem;
  width: 1.3rem; height: 1.3rem; display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 900; color: var(--paper);
  background: var(--c, var(--teal)); border: 2px solid var(--ink); border-radius: 50%;
}

/* ─────────────── PRICING ─────────────── */
.pricing { text-align: center; }
.pricing .section-sub { margin-inline: auto; }
.bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.3rem; margin-top: 0.6rem; }
.band {
  background: var(--c, var(--sky)); border: var(--outline) solid var(--ink);
  border-radius: var(--radius); box-shadow: var(--sticker); padding: 1.8rem 1rem;
  position: relative; color: var(--ink);
}
.band:nth-child(odd) { transform: rotate(-1.5deg); } .band:nth-child(even) { transform: rotate(1.5deg); }
.band.featured { transform: rotate(0deg) scale(1.04); }
.band-tag {
  position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%);
  font-size: 0.7rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--ink); color: var(--paper);
  padding: 0.25rem 0.75rem; border-radius: 999px; white-space: nowrap;
  border: 2px solid var(--ink);
}
.band-size { display: block; font-size: 1.6rem; font-weight: 850; }
.band-name { display: block; margin-top: 0.3rem; font-size: 1.1rem; font-family: 'Fuzzy Bubbles', cursive; }

/* ─────────────── FINAL CTA ─────────────── */
.final-cta { padding-inline: clamp(1rem, 5vw, 3rem); }
.final-inner {
  position: relative; text-align: center;
  background: var(--mustard);
  border: var(--outline) solid var(--ink); border-radius: 24px;
  box-shadow: var(--sticker); padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
}
.final-inner .doodle { top: 1rem; right: 1.5rem; color: var(--coral); }
.final-inner h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 0.8rem; color: var(--ink); font-weight: 850; }
.final-inner p { color: var(--ink); max-width: 480px; margin: 0 auto 1.8rem; font-size: 1.1rem; opacity: 0.9; }
.final-inner .btn-primary { background: var(--ink); color: var(--mustard); }

/* ─────────────── footer ─────────────── */
footer { border-top: var(--outline) solid var(--ink); padding: 2.5rem clamp(1rem, 5vw, 3rem) 4.5rem; max-width: var(--maxw); margin: 0 auto; }
.foot-grid { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.foot-brand p { color: var(--faded); max-width: 340px; margin: 0.6rem 0 0; font-size: 0.95rem; }
.foot-links { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.foot-links a { color: var(--ink); font-size: 0.95rem; font-weight: 600; }
.foot-links a:hover { color: var(--coral); }
.copyright { color: var(--faded); font-size: 0.85rem; margin: 0; }