/* ============================================================
   FANTASTIC PHOTO BOOTH — WHITE LIQUID GLASS DESIGN SYSTEM
   Palette: Pink #E879F9 · Purple #4169E1 · Cyan #06B6D4
   Background: #FFFFFF (white, confetti + balloons behind everything)
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --pink:         #e879f9;
  --purple:       #4169e1;
  --cyan:         #06b6d4;
  --green:        #22c55e;
  --red:          #ef4444;
  --red-deep:     #dc2626; /* red/green for small text on white -- the bright ones are too light to read */
  --green-deep:   #15803d;
  --blue-deep:    #1d4ed8; /* Book Now: brighter, deeper blue than the general --purple/royal-blue */
  --blue-deep-hi: #2f5fee;
  --pink-dim:     rgba(232,121,249,0.17);
  --purple-dim:   rgba(65,105,225,0.17);
  --cyan-dim:     rgba(6,182,212,0.17);
  --green-dim:    rgba(34,197,94,0.17);

  /* Section backgrounds — alt stays semi-transparent so the fixed
     confetti/balloon canvas behind the page shows through, but the
     footer is deliberately opaque: it sits right where the animation
     is busiest (the cannons anchor to the bottom corners), so it needs
     to fully cover the canvas rather than let it show through. */
  --bg-base:      #ffffff;
  --bg-alt:       rgba(65,105,225,0.045);
  --bg-footer:    #f8f6fb;

  /* Glass card interior */
  --glass-bg:     rgba(255,255,255,0.66);
  --glass-bg2:    rgba(255,255,255,0.76);

  /* Text */
  --text-bright:  #1a1625;
  --text-mid:     rgba(26,22,37,0.72);
  --text-muted:   rgba(26,22,37,0.48);
  --text-dim:     rgba(26,22,37,0.32);
  --text-label:   var(--purple);

  /* Borders / highlights */
  --border-glass: rgba(65,105,225,0.14);
  --highlight:    rgba(65,105,225,0.16);
  --highlight-sm: rgba(65,105,225,0.10);

  --font: 'Plus Jakarta Sans', system-ui, sans-serif;

  --nav-h: 72px;
  /* Safe areas: how far the iPhone notch / Dynamic Island / home bar / landscape notch intrude into the
     screen. 0 on desktop and on phones without them, so nothing moves there. */
  --safe-top: env(safe-area-inset-top, 0px);
  /* home bar, or Safari's own bottom toolbar if it covers the page (main.js measures that into --toolbar-inset), whichever is bigger */
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--toolbar-inset, 0px));
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --bottom-bar-h: calc(68px + var(--safe-bottom)); /* 48px pill + 10px gaps, plus the home-bar inset underneath */
  --container: 1200px;
  --container-narrow: 760px;
  --radius-pill: 9999px;
  --radius-card: 20px;
  --radius-card-lg: 24px;
  --radius-modal: 24px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
  background: var(--bg-base);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
ul { list-style: none; }
abbr { text-decoration: none; }

/* ── ACCENT TEXT ────────────────────────────────────────────── */
.gradient-text {
  color: var(--purple);
}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container {
  width: min(var(--container), 100% - 3rem);
  margin-inline: auto;
}
.container--narrow {
  width: min(var(--container-narrow), 100% - 3rem);
  margin-inline: auto;
}

/* ── SECTION BASE ────────────────────────────────────────────── */
.section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.section--alt,
.section--dark,
.section--subtle { background: var(--bg-alt); }

.section__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-label);
  margin-bottom: 16px;
}
.section__label::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
  flex-shrink: 0;
}
.section__title {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--text-bright);
  margin-bottom: 56px;
}
.section__cta {
  text-align: center;
  margin-top: 48px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 24px;
  transition: color .2s;
}
.back-link:hover { color: var(--purple); }

/* ── GLOW ORBS (shared across sections) ─────────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
}
.orb-pink  { background: var(--pink); }
.orb-purple{ background: var(--purple); }
.orb-cyan  { background: var(--cyan); }

/* Hero orbs */
.orb--1 {
  width: 700px; height: 700px;
  top: -200px; left: -150px;
  opacity: 0.06;
  background: var(--pink);
}
.orb--2 {
  width: 550px; height: 550px;
  top: 80px; right: -120px;
  opacity: 0.055;
  background: var(--purple);
}
.orb--3 {
  width: 450px; height: 450px;
  bottom: 0; left: 35%;
  opacity: 0.045;
  background: var(--cyan);
}

/* CTA banner orbs */
.orb--cta1 {
  width: 420px; height: 420px;
  top: -140px; left: -60px;
  opacity: 0.18;
  background: var(--pink);
}
.orb--cta2 {
  width: 320px; height: 320px;
  bottom: -100px; right: 8%;
  opacity: 0.14;
  background: var(--cyan);
}

/* ── LIQUID GLASS CARD ───────────────────────────────────────── */
/*
  Usage: add class .glass + --glow-a / --glow-shadow CSS vars
  e.g.: style="--glow-a:#e879f9;--glow-shadow:rgba(232,121,249,0.17)"
*/
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glow-a, var(--pink));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--radius-card);
  box-shadow:
    0 0 28px var(--glow-shadow, var(--pink-dim)),
    inset 0 1.5px 0 var(--highlight-sm),
    0 16px 40px -20px rgba(65,105,225,0.35);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: rgba(65,105,225,0.3);
  pointer-events: none;
  z-index: 1;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: all .2s var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
}
.btn--lg { padding: 16px 44px; font-size: 16px; }
.btn--sm { padding: 9px 18px; font-size: 13.5px; }
.btn--full { width: 100%; justify-content: center; }

.btn--primary {
  background: var(--blue-deep);
  color: #fff;
  box-shadow: 0 8px 40px rgba(29,78,216,0.45);
}
.btn--primary:hover {
  background: var(--blue-deep-hi);
  transform: translateY(-2px);
  box-shadow: 0 12px 48px rgba(29,78,216,0.6);
}
.btn--primary:active { transform: translateY(0); }

.btn--outline {
  border: 1.5px solid rgba(65,105,225,0.28);
  color: var(--text-bright);
  background: #fff;
}
.btn--outline:hover {
  border-color: var(--pink);
  color: var(--pink);
  box-shadow: 0 0 20px var(--pink-dim);
}

.btn--ghost {
  border: 1.5px solid rgba(26,22,37,0.18);
  color: var(--text-mid);
  background: transparent;
}
.btn--ghost:hover {
  border-color: rgba(26,22,37,0.4);
  color: var(--text-bright);
}

.btn--white {
  background: #fff;
  color: var(--purple);
  font-weight: 800;
}
.btn--white:hover {
  background: rgba(255,255,255,0.92);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255,255,255,0.2);
}

.btn--ghost-white {
  border: 1.5px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.8);
  background: transparent;
}
.btn--ghost-white:hover {
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}

/* Loading spinner */
.btn__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
.btn--loading .btn__spinner { display: inline-block; }
.btn--loading .btn__label   { opacity: .6; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── NAV ─────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: var(--safe-top); left: 0; right: 0;
  z-index: 900;
  height: var(--nav-h);
  /* Nav itself is transparent; pill lives inside */
}

/* ── BOOK NOW (fixed) ───────────────────────────────────────────
   Its own permanent fixed element, top-right, independent of the nav
   pill and never tucked inside the collapsible mobile menu -- always on
   screen no matter the scroll position or hamburger state. */
.book-now-fixed {
  position: fixed;
  top: calc(20px + var(--safe-top)); right: max(20px, var(--safe-right));
  z-index: 950;
}
/* Repositioned under 768px (see that breakpoint) once the hamburger is
   the only thing left in the nav pill and both want the same corner. */

/* ── BRAND BADGE ────────────────────────────────────────────── */
/* The site logo, as its own fixed element flush in the page's top-left
   corner rather than living inside the nav pill -- a deliberate step up
   in prominence from the old inline-SVG mark + text that used to sit
   inside .nav__inner. Higher z-index than .nav so it reads as sitting
   on top of the pill if their edges ever overlap on narrower widths. */
.brand-badge {
  position: fixed;
  top: calc(6px + var(--safe-top)); left: max(12px, var(--safe-left));
  z-index: 950;
  display: block;
  line-height: 0;
}
.brand-badge img {
  height: 150px;
  width: auto;
  display: block;
}

/* ── PROMO RIBBON ───────────────────────────────────────────────
   Matches the user's reference: bold italic underlined serif, solid
   blue, steeply diagonal (left edge down, right edge up). Size/position
   are a starting point -- to be tuned together against the reference. */
.promo-ribbon {
  position: fixed;
  /* Sits in the band between the badge and the Polaroid wall, closer to
     the frames. top/width/font-size all scale with svh (not fixed px)
     so this whole block shrinks together with the wall's padding-top
     below on short windows instead of overflowing -- a short, wide
     browser window (e.g. a laptop with toolbars eating into the
     viewport) has far less height to work with than a phone held
     upright, and fixed-px sizing here doesn't know that. Values cap out
     at the sizes already tuned/approved at a normal desktop height. */
  top: calc(clamp(150px, 20svh, 230px) + var(--safe-top));
  left: clamp(14px, 3.2vw, 48px); /* a little in from the screen edge */
  z-index: 940;
  /* Width follows the window's height AND width (26vw, so it stops short of the red card, which
     starts at 32vw) so it stays inside the empty band between the logo, the Polaroid cards and
     the screen edge. */
  width: clamp(250px, min(43svh, calc(26vw - 20px)), 520px);
  transform: rotate(-16deg);
  transform-origin: center;
  /* The sentence is SVG text bent along gentle arcs (one curve per line) so it reads
     like a banner. Barlow Semi Condensed Bold, per the owner's request (was Kaushan
     Script, then Times New Roman before that). The type scales with the width above. */
}
@media (max-width: 480px) {
  .promo-ribbon {
    width: clamp(250px, 88vw, 380px);
    left: clamp(20px, 6vw, 36px);
    top: calc(clamp(96px, 18.7svh, 150px) + 34px + var(--safe-top));
  }
}
.promo-ribbon svg { display: block; width: 100%; height: auto; overflow: visible; }
.promo-ribbon__m { display: none !important; }
@media (max-width: 480px) {
  /* Phones: a shorter, wider 3-line banner -- the band between the logo and the cards is only ~90px tall */
  .promo-ribbon__d { display: none !important; }
  .promo-ribbon__m { display: block !important; }
  .promo-ribbon .promo-ribbon__m text { font-size: 28px; }
}
/* Sticker lettering, built from four copies of the sentence stacked back to front: a hard red offset
   shadow (the same one the site's cards use), a navy outline, a white border, then the letters
   themselves -- each word blue, red or green. Solid colors only. */
.promo-ribbon text {
  font-family: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 38px; /* viewBox units -- the whole svg scales with the ribbon's width */
  text-anchor: middle;
  stroke-linejoin: round;
  paint-order: stroke;
}
.pr-l--shadow { transform: translate(4px, 5px); }
.pr-l--shadow text { fill: var(--red-deep); stroke: var(--red-deep); stroke-width: 15px; }
.pr-l--edge text   { fill: #10246b; stroke: #10246b; stroke-width: 15px; }
.pr-l--white text  { fill: #fff; stroke: #fff; stroke-width: 9px; }
.pr-l--fill text   { stroke: none; }
.pr-l--fill .c0 { fill: var(--blue-deep); }
.pr-l--fill .c1 { fill: var(--red-deep); }
.pr-l--fill .c2 { fill: #16a34a; }
.pr-star { fill: #facc15; stroke: #10246b; stroke-width: 2.4px; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
/* Arrives with a little pop, and the sparkles twinkle. Not on hover, nothing here follows the mouse. */
@media (prefers-reduced-motion: no-preference) {
  .promo-ribbon svg { animation: pr-pop .8s cubic-bezier(.2, 1.5, .4, 1) .15s both; }
  .pr-star { animation: pr-twinkle 2.4s ease-in-out var(--d, 0s) infinite; }
}
@keyframes pr-pop {
  from { opacity: 0; transform: scale(.45) translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pr-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.6); }
}

/* ── POLAROID WALL ──────────────────────────────────────────────
   Home page only: a scattered cluster of Polaroid-style cards with
   alternating tilt. Photo area reuses the gallery page's solid-color
   tile placeholder look until real event photos replace them. Opaque
   cards per the standing rule -- center content hides the canvas
   behind it, same as the nav/bottom bar. */
.polaroid-wall {
  /* Purely a semantic wrapper now -- no layout of its own. Cards below
     are individually position:fixed (like the ribbon/badge/nav), each
     placed at explicit left/top coordinates matched directly against
     the user's reference sketch, instead of letting a CSS grid
     auto-arrange them. The grid approach kept producing a plausible
     but wrong layout (evenly distributed/clustered) that didn't match
     the sketch's actual spread (far left, then two higher up further
     right) no matter how gap/max-width were tuned -- explicit
     positions are the only way to match a specific hand-drawn layout
     exactly. Fixed positioning also means these cards contribute
     nothing to document height, so "no scroll" no longer needs
     balancing against card size/position at all. */
}
.polaroid {
  position: fixed;
  z-index: 500;
  background: #fff;
  /* Same size logic as before (viewport-HEIGHT-based ceiling so it
     adapts on short windows), just no longer tied to a grid column. */
  width: clamp(172px, 28.75svh, 345px);
  /* Bottom value must stay bigger than the caption's own height (margin
     -top 10px + ~13px line) or the absolutely-positioned caption below
     spills past this padding box and gets clipped by the fixed bottom
     bar underneath -- the old 28px floor was too close to that, caught
     visually clipping "Birthday Bash" at 666x694. */
  padding: clamp(8px, 1.3svh, 14px);
  container-type: inline-size; /* the card's text scales with the card's own width (cqw) */
  border-radius: 4px;
  box-shadow: 0 16px 30px -12px rgba(20,20,30,0.3), 0 2px 8px rgba(20,20,30,0.1);
  transition: transform .25s var(--ease-out);
}
/* Positions read directly off the reference sketch (as % of viewport,
   matching how the ribbon is already positioned) -- left card low and
   near the left edge, the other two pulled up high and spread further
   right, not evenly distributed across a centered row. */
.polaroid--2 { left: 14vw; top: 40vh; transform: rotate(5deg); }
.polaroid--3 { left: 32vw; top: 26vh; transform: rotate(-6deg); }
.polaroid--4 { left: 70vw; top: 28vh; transform: rotate(4deg); }
/* 4th card, restored -- slotted into the gap between --3 and --4, at
   the same "low" tier as --2 to keep the low/high/low/high rhythm. */
.polaroid--1 { left: 50vw; top: 40vh; transform: rotate(-7deg); }
/* Bigger stagger per sketch -- left card noticeably lower, the other
   two both pulled up close to the row's top edge (unchanged from
   before, so ribbon clearance still holds) instead of everyone sitting
   near the same height. */
.polaroid--2 { transform: rotate(5deg); margin-top: 47px; }
.polaroid--3 { transform: rotate(-6deg); margin-top: -6px; }
.polaroid--4 { transform: rotate(4deg); margin-top: -4px; }
.polaroid__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.polaroid__caption {
  position: absolute;
  margin-top: 10px;
  width: calc(100% - 24px);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid);
}
@media (min-height: 950px) {
  /* Grows further on genuinely tall windows, where the ribbon's own
     svh-based clearance has already capped out (~825px+) so extra
     viewport height goes straight to spare budget instead of also
     being eaten by a growing ribbon -- verified safe (0 overflow) at
     960px and up; below that the default ratio above is the largest
     that stays safe. No longer paired with a wall max-width (that
     grid-column logic doesn't apply now that cards are individually
     fixed-positioned). */
  .polaroid { width: clamp(172px, 39.1svh, 437px); }
}
@media (max-width: 480px) {
  /* Card width/padding now scale with vh (see .polaroid above); only the
     caption text still needs a phone-specific override here. */
  .polaroid__caption { font-size: 12px; }
  /* The explicit left/top spread above is tuned for a wide desktop
     screen (matches the reference sketch) and doesn't fit a narrow
     phone width -- falls back to a 2x2 grid here (4 cards is too many
     to fit legibly in one row on a phone): a centered, snug layout
     with a small stagger, verified safe (0 overflow, no ribbon
     overlap) at 375x812. */
  .polaroid-wall {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: start;
    gap: 10px 8px;
    max-width: clamp(299px, 57.5svh, 483px);
    margin: 0 auto;
    padding: calc(clamp(210px, 36svh, 380px) + 84px + var(--safe-top)) 24px calc(var(--bottom-bar-h) - 2px);
  }
  .polaroid {
    position: relative;
    z-index: auto;
    width: 100%;
    margin-inline: auto;
    left: auto; top: auto;
  }
  .polaroid--1 { margin-top: 0; }
  .polaroid--2 { margin-top: 18px; }
  .polaroid--3 { margin-top: -6px; }
  .polaroid--4 { margin-top: 10px; }
}
.nav__inner {
  display: flex;
  align-items: center;
  height: calc(100% - 20px);
  /* Hugs its own links and sits centered on the screen. Only shown from 1230px wide (below that
     it collapses to the hamburger), where the centered pill always clears the logo badge on the
     left (~162px) and the Book Now button on the right (~150px) -- so no empty space inside it. */
  margin: 10px auto 0;
  width: fit-content;
  max-width: calc(100% - 340px);
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--radius-pill);
  padding: 0 12px;
  box-shadow: 0 4px 32px rgba(65,105,225,0.12);
  border: 1px solid var(--border-glass);
  transition: box-shadow .3s;
}
.nav.scrolled .nav__inner {
  box-shadow: 0 4px 40px rgba(65,105,225,0.2);
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav__logo-text { display: flex; flex-direction: column; }
.nav__logo-text .top {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-bright);
  letter-spacing: -0.3px;
  line-height: 1.1;
}
.nav__logo-text .sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--purple);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.1;
}
.nav__links {
  display: flex;
  gap: 2px;
}
.nav__links a {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 16.1px;
  font-weight: 800;
  color: var(--text-bright);
  transition: color .2s, background .2s;
}
/* Each link its own solid brand color -- colorful, but no gradient on
   any single word. */
/* Home (1st) is green, then blue/red/green repeating, so every other link keeps the color it had before Home was added */
.nav__links li:nth-child(1) a { color: var(--green); }
.nav__links li:nth-child(2) a { color: var(--purple); }
.nav__links li:nth-child(3) a { color: var(--red); }
.nav__links li:nth-child(4) a { color: var(--green); }
.nav__links li:nth-child(5) a { color: var(--purple); }
.nav__links li:nth-child(6) a { color: var(--red); }
.nav__links li:nth-child(7) a { color: var(--green); }
.nav__links li:nth-child(8) a { color: var(--purple); }
.nav__links li:nth-child(9) a { color: var(--red); }
.nav__links a:hover, .nav__links a.active {
  background: rgba(65,105,225,0.08);
}
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  margin-left: auto;
}
.nav__hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text-bright);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.nav__mobile {
  display: none;
  padding: 12px 16px 20px;
  margin: 0 auto;
  width: min(var(--container), 100% - 3rem);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(16px);
  border-radius: 0 0 20px 20px;
  border: 1px solid var(--border-glass);
  border-top: none;
}
.nav__mobile.open { display: block; }
.nav__mobile ul { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.nav__mobile a {
  display: block;
  padding: 12px 16px;
  color: var(--text-bright);
  font-weight: 800;
  border-radius: 12px;
}
.nav__mobile li:nth-child(1) a { color: var(--green); }
.nav__mobile li:nth-child(2) a { color: var(--purple); }
.nav__mobile li:nth-child(3) a { color: var(--red); }
.nav__mobile li:nth-child(4) a { color: var(--green); }
.nav__mobile li:nth-child(5) a { color: var(--purple); }
.nav__mobile li:nth-child(6) a { color: var(--red); }
.nav__mobile li:nth-child(7) a { color: var(--green); }
.nav__mobile li:nth-child(8) a { color: var(--purple); }
.nav__mobile li:nth-child(9) a { color: var(--red); }
.nav__mobile a:hover { background: rgba(65,105,225,0.08); }

/* ── BOTTOM BAR ─────────────────────────────────────────────── */
/* Mirrors the nav's floating glass-pill look, anchored to the bottom
   of the viewport instead of the top. Mix of a quick action (Call Now)
   and secondary links (phone/email/legal) -- the bits that
   don't belong in the main nav but should still always be reachable. */
.bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  height: var(--bottom-bar-h);
}
.bottom-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 48px;
  margin: 0 auto calc(10px + var(--safe-bottom));
  /* Runs nearly edge to edge (16px breathing room each side) rather than
     stopping at the 1200px content container like the top nav does. */
  width: calc(100% - 2rem - 2 * max(var(--safe-left), var(--safe-right)));
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--radius-pill);
  padding: 0 10px 0 22px;
  box-shadow: 0 -4px 32px rgba(65,105,225,0.12);
  border: 1px solid var(--border-glass);
}
.bottom-bar__links {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.bottom-bar__links a {
  /* 16px when there's room, shrinking with the window so the three links
     never get ellipsis-truncated before they hide under 720px. */
  font-size: clamp(12px, calc((100vw - 340px) / 32.5), 16px);
  font-weight: 700;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s;
}
.bottom-bar__links a:hover { color: var(--purple); }
.bottom-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .bottom-bar__links { display: none; }
  .bottom-bar__inner { justify-content: center; padding: 0 10px; }
}

/* ── SITEWIDE CONFETTI + BALLOON BACKGROUND ───────────────────── */
/* Fixed to the viewport (not document height) so it's always visible
   behind the page regardless of scroll position, and cheap to run. */
#bg-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100lvh; /* the LARGE viewport: covers the whole phone screen, not just the strip between its browser bars */
  pointer-events: none;
}

/* ── iPHONE: BACKGROUND BEHIND THE CLOCK + SAFARI'S BOTTOM TOOLBAR ──
   Safari on iPhone clips position:fixed layers to the strip between its clock bar and its bottom
   toolbar, but it does paint ordinary page content behind both. So on iPhones (the fx-doc class is
   set in <head>) the roles swap: <body> becomes a tall, scrolling box holding the whole site,
   and the document underneath is just a tall locked backdrop -- --fx-pad taller than the screen
   above and below, scrolled down by --fx-pad (main.js) -- that holds the confetti/balloon canvas as
   ordinary content. Every fixed piece of the site (badge, nav, Book Now, bottom bar) still works
   exactly as before; only phone-width layouts are affected. */
:root { --fx-pad: 150px; }
@media (max-width: 700px) {
  html.fx-doc {
    height: calc(100vh + 2 * var(--fx-pad));
    height: calc(100lvh + 2 * var(--fx-pad));
    overflow: hidden;
    background: var(--bg-base);
    /* Safari's toolbar stays expanded here (the page doesn't scroll, so it never collapses), so the Call
       Now pill hugs it: 48px pill + a 6px gap, instead of the 20px gap the other layouts have. */
    --bottom-bar-h: calc(54px + var(--safe-bottom));
  }
  /* The page itself (<body>) is the scroller, but it is NOT fixed: it is a tall box in the locked document
     (150px taller than the screen above and below), so its content is ordinary page content that scrolls
     all the way up behind the clock bar and down behind Safari's toolbar, then off the screen, instead of
     being cut off at the edge of the strip between them. Its padding puts the first line of content right
     where it always was (top of the visible area); the spacer after it lets the last line scroll up clear of
     the Call Now bar. */
  html.fx-doc body {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: calc(100svh + 2 * var(--fx-pad));
    box-sizing: border-box;
    padding-top: var(--fx-pad);
    background: transparent; /* Safari tints its bars from fixed layers' own colors */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  html.fx-doc body::after { content: ''; display: block; height: var(--fx-pad); }
  /* Home and Gallery fit on one screen, so their page box had nothing to scroll -- and on those pages (only) Safari
     stopped drawing the animation behind the clock bar. Giving the box a few pixels of scroll room on every page
     (an invisible 1px dot just below it) makes them behave like the pages that scroll. */
  html.fx-doc body::before { content: ''; position: absolute; left: 0; top: calc(100% + 4px); width: 1px; height: 1px; pointer-events: none; }
  html.fx-doc #bg-fx {
    position: absolute;
    top: 0; left: 0; right: auto; bottom: auto;
    width: 100%;
    height: calc(100vh + 2 * var(--fx-pad));
    height: calc(100lvh + 2 * var(--fx-pad));
  }
}

/* ── HERO ─────────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  padding-top: var(--nav-h);
  padding-bottom: 60px;
  /* No background here on purpose — the fixed #bg-fx canvas (confetti +
     balloons) should be visible right away, not hidden behind an opaque
     hero panel. */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 56px;
  width: 100%;
}

/* Centered content + mirror wrapper */
.hero__body {
  display: flex;
  align-items: center;
  gap: 56px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 48px;
  position: relative;
  z-index: 2;
}
.hero::before {
  content: '';
  position: absolute;
  top: -100px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 700px;
  border-radius: 50%;
  background: rgba(232,121,249,0.1);
  filter: blur(100px);
  pointer-events: none;
}

/* Photo strips left/right columns */
.hero__strips {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  overflow: hidden;
  height: 520px;
  padding: 0 12px;
}

/* Single animated strip */
.photo-strip {
  width: 100px;
  height: 520px;
  overflow: hidden;
  border-radius: 14px;
}
.photo-strip__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: strip-scroll linear infinite;
}
@keyframes strip-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1104px); } /* 8 tiles * (128 + 10) = 1104 */
}
.photo-strip__tile {
  width: 100px;
  height: 128px;
  border-radius: 10px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-strip__tile::after {
  content: 'photo';
  font-size: 7px;
  color: rgba(0,0,0,0.18);
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
}

/* ── HERO MIRROR ────────────────────────────────────────────── */
.hero__mirror-wrap {
  flex-shrink: 0;
  width: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 40px;
  position: relative;
  z-index: 2;
}

/* Real PNG — drop in img/mirror.png and swap the placeholder div for:
   <img src="img/mirror.png" alt="Magic Mirror Photo Booth" class="hero__mirror-img"> */
.hero__mirror-img {
  width: 470px;
  max-width: none;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
  animation: heroFloat 5s ease-in-out infinite;
  filter:
    drop-shadow(0 20px 60px rgba(232,121,249,0.55))
    drop-shadow(0 0 100px rgba(65,105,225,0.3));
}

/* CSS placeholder silhouette ─ shown until real image is added */
.hero__mirror-placeholder {
  width: 210px;
  height: 420px;
  border-radius: 105px 105px 16px 16px;
  background: rgba(16,12,30,0.95);
  border: 3px solid var(--purple);
  box-shadow:
    0 0 70px rgba(232,121,249,0.38),
    0 0 140px rgba(65,105,225,0.18),
    inset 0 0 50px rgba(65,105,225,0.07);
  animation: heroFloat 5s ease-in-out infinite;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Camera / sensor lens dot */
.hero__mirror-placeholder::before {
  content: '';
  position: absolute;
  top: 22px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 14px rgba(6,182,212,0.9), 0 0 28px rgba(6,182,212,0.4);
  z-index: 2;
}

/* Glass / screen area */
.hero__mirror-glass {
  position: absolute;
  top: 52px;
  left: 13px;
  right: 13px;
  bottom: 18px;
  border-radius: 90px 90px 10px 10px;
  background: rgba(65,105,225,0.06);
  border: 1px solid rgba(232,121,249,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 22px;
  overflow: hidden;
}

/* Bottom touch-bar indicator */
.hero__mirror-bar {
  width: 72px;
  height: 5px;
  border-radius: 3px;
  background: rgba(65,105,225,0.6);
  box-shadow: 0 0 10px rgba(65,105,225,0.5);
  margin-bottom: 9px;
}

.hero__mirror-label {
  font-size: 7px;
  letter-spacing: 3px;
  font-weight: 700;
  color: rgba(232,121,249,0.45);
  text-transform: uppercase;
  font-family: monospace;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-20px); }
}

/* Hero content */
.hero__content {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 580px;
  align-self: flex-start;
  margin-top: -50px;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  background: rgba(232,121,249,0.1);
  border: 1px solid rgba(232,121,249,0.25);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 16px;
}
.hero__badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pink);
  flex-shrink: 0;
}
.hero__headline {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--text-bright);
  margin-bottom: 16px;
}
.hero__headline .line-white { color: var(--text-bright); }
.hero__sub {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  color: var(--text-muted);
  max-width: 500px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.hero__proof {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
}
.hero__proof .stars { color: var(--pink); font-size: 16px; letter-spacing: 2px; }
.hero__proof-avatars {
  display: flex;
}
.hero__proof-avatars div {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--bg-base);
  margin-left: -10px;
  flex-shrink: 0;
}
.hero__proof-avatars div:first-child { margin-left: 0; }
.hero__proof strong { color: var(--text-bright); }

/* ── STATS ───────────────────────────────────────────────────── */
.hero__stats-row {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 2;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat-card {
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
}
.stat-card:nth-child(1) { background: rgba(232,121,249,0.08); border: 1px solid rgba(232,121,249,0.18); }
.stat-card:nth-child(2) { background: rgba(65,105,225,0.08);  border: 1px solid rgba(65,105,225,0.18);  }
.stat-card:nth-child(3) { background: rgba(6,182,212,0.08);   border: 1px solid rgba(6,182,212,0.18);   }
.stat-card:nth-child(4) { background: rgba(232,121,249,0.08); border: 1px solid rgba(232,121,249,0.18); }
.stat-card__num {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-card:nth-child(1) .stat-card__num { color: var(--pink); }
.stat-card:nth-child(2) .stat-card__num { color: var(--purple); }
.stat-card:nth-child(3) .stat-card__num { color: var(--cyan); }
.stat-card:nth-child(4) .stat-card__num { color: var(--pink); }
.stat-card__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Subtle glow behind glass-card sections */
#whats-included::before {
  content: '';
  position: absolute;
  top: -80px; left: 20%; transform: translateX(-50%);
  width: 600px; height: 500px;
  border-radius: 50%;
  background: rgba(232,121,249,0.07);
  filter: blur(90px);
  pointer-events: none;
}
#perfect-for::before {
  content: '';
  position: absolute;
  top: 0; right: -80px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: rgba(65,105,225,0.07);
  filter: blur(90px);
  pointer-events: none;
}
#how-it-works::before {
  content: '';
  position: absolute;
  bottom: -60px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 400px;
  border-radius: 50%;
  background: rgba(6,182,212,0.06);
  filter: blur(90px);
  pointer-events: none;
}
#testimonials::before {
  content: '';
  position: absolute;
  top: 50%; left: 10%; transform: translateY(-50%);
  width: 500px; height: 500px;
  border-radius: 50%;
  background: rgba(232,121,249,0.06);
  filter: blur(90px);
  pointer-events: none;
}

/* ── FEATURES GRID ───────────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}
.feature-card {
  padding: 32px 28px;
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 40px var(--glow-shadow, var(--pink-dim)), inset 0 1.5px 0 var(--highlight);
}
.feature-card:nth-child(3n+1) { --glow-a: var(--pink);   --glow-b: var(--purple); --glow-shadow: var(--pink-dim); }
.feature-card:nth-child(3n+2) { --glow-a: var(--purple); --glow-b: var(--cyan);   --glow-shadow: var(--purple-dim); }
.feature-card:nth-child(3n)   { --glow-a: var(--cyan);   --glow-b: var(--pink);   --glow-shadow: var(--cyan-dim); }

.feature-card__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  margin-bottom: 20px;
  background: var(--glow-a, var(--pink));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 20px var(--glow-shadow, var(--pink-dim));
  flex-shrink: 0;
}
.feature-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 8px;
}
.feature-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ── EVENTS GRID ─────────────────────────────────────────────── */
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}
.event-card {
  border-radius: var(--radius-card);
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease-out);
  cursor: pointer;
}
.event-card:hover { transform: translateY(-4px); }
.event-card__label {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-bright);
  position: relative;
  z-index: 1;
}
.event-card__link {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-top: 16px;
  position: relative;
  z-index: 1;
  color: var(--glow-a, var(--pink));
}

/* Per-card glow colors */
.event-card:nth-child(1) { --glow-a: var(--pink); --glow-b: var(--purple); --glow-shadow: var(--pink-dim); }
.event-card:nth-child(2) { --glow-a: var(--purple); --glow-b: var(--cyan); --glow-shadow: var(--purple-dim); }
.event-card:nth-child(3) { --glow-a: var(--cyan); --glow-b: var(--pink); --glow-shadow: var(--cyan-dim); }
.event-card:nth-child(4) { --glow-a: var(--pink); --glow-b: var(--cyan); --glow-shadow: var(--pink-dim); }
.event-card:nth-child(5) { --glow-a: var(--purple); --glow-b: var(--pink); --glow-shadow: var(--purple-dim); }
.event-card:nth-child(6) { --glow-a: var(--cyan); --glow-b: var(--purple); --glow-shadow: var(--cyan-dim); }

/* ── HOW IT WORKS ────────────────────────────────────────────── */
.steps {
  display: flex;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.step {
  flex: 1;
  padding: 40px 36px;
  transition: transform .25s var(--ease-out);
}
.step:hover { transform: translateY(-4px); }
.step:nth-child(1) { --glow-a: var(--pink);   --glow-b: var(--purple); --glow-shadow: var(--pink-dim); }
.step:nth-child(2) { --glow-a: var(--purple); --glow-b: var(--cyan);   --glow-shadow: var(--purple-dim); }
.step:nth-child(3) { --glow-a: var(--cyan);   --glow-b: var(--pink);   --glow-shadow: var(--cyan-dim); }
.step__number {
  font-size: 3.25rem;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--glow-a, var(--pink));
  line-height: 1;
  margin-bottom: 24px;
}
.step h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 12px;
}
.step p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ── SCROLLING GALLERY ───────────────────────────────────────── */
.gallery-scroll-wrap {
  display: flex;
  gap: 12px;
  height: 520px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}
.gallery-col { flex: 1; overflow: hidden; }
.gallery-scroll-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gallery-col--a .gallery-scroll-inner { animation: galleryUp 28s linear infinite; }
.gallery-col--b .gallery-scroll-inner { animation: galleryUp 36s linear infinite; animation-delay: -10s; }
.gallery-col--c .gallery-scroll-inner { animation: galleryUp 22s linear infinite; animation-delay: -5s; }
.gallery-scroll-wrap:hover .gallery-scroll-inner { animation-play-state: paused; }
@keyframes galleryUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.gallery-tile {
  height: 220px;
  border-radius: 16px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  transition: transform .3s var(--ease-out);
}
.gallery-tile:hover { transform: scale(1.03); }
.g--lavender { background: #c4aef0; }
.g--sky      { background: #a4c8f0; }
.g--mint     { background: #9ae4c2; }
.g--gold     { background: #f0cf90; }
.g--pink     { background: #f09ec4; }
.g--blue     { background: #90b8f0; }

/* ── TESTIMONIALS ────────────────────────────────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}
.testimonial-card {
  padding: 32px 28px;
  transition: transform .25s var(--ease-out);
}
.testimonial-card:hover { transform: translateY(-4px); }
.testimonial-card:nth-child(1) { --glow-a: var(--pink);   --glow-b: var(--purple); --glow-shadow: var(--pink-dim); }
.testimonial-card:nth-child(2) { --glow-a: var(--purple); --glow-b: var(--cyan);   --glow-shadow: var(--purple-dim); }
.testimonial-card:nth-child(3) { --glow-a: var(--cyan);   --glow-b: var(--pink);   --glow-shadow: var(--cyan-dim); }
.testimonial-card__stars {
  display: block;
  margin-bottom: 20px;
  color: var(--pink);
  font-size: 18px;
  letter-spacing: 2px;
}
.testimonial-card__stars svg { flex-shrink: 0; }
.testimonial-card blockquote {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 24px;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.testimonial-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright);
  display: block;
}
.testimonial-card__event {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
}

/* ── PACKAGES ────────────────────────────────────────────────── */
#packages::before {
  content: '';
  position: absolute;
  top: -60px; right: 15%;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: rgba(65,105,225,0.07);
  filter: blur(90px);
  pointer-events: none;
}


.packages-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.packages-tab {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-bright);
  background: rgba(65,105,225,0.05);
  border: 1.5px solid var(--border-glass);
  border-radius: var(--radius-pill);
  padding: 11px 22px;
  transition: color .2s, background .2s, border-color .2s;
}
.packages-tab:hover { background: rgba(65,105,225,0.1); border-color: rgba(65,105,225,0.3); }
.packages-tab.is-active {
  color: #fff;
  background: var(--purple);
  border-color: transparent;
}
.packages-panel { display: none; }
.packages-panel.is-active { display: block; }

.packages-grid {
  display: flex;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.package-card {
  flex: 1;
  padding: 40px 32px;
  border-radius: var(--radius-card-lg);
  transition: transform .25s var(--ease-out);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.package-card::before { z-index: 0; }
.package-card > * { position: relative; z-index: 1; }
.package-card:hover { transform: translateY(-6px); }
.package-card:nth-child(1) {
  --glow-shadow: var(--pink-dim);
  background: var(--glass-bg);
  border: 1.5px solid rgba(232,121,249,0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 0 18px var(--pink-dim), inset 0 1.5px 0 var(--highlight-sm);
}
.package-card:nth-child(3) {
  background: var(--glass-bg);
  border: 1.5px solid rgba(65,105,225,0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 0 18px var(--purple-dim), inset 0 1.5px 0 var(--highlight-sm);
}
.package-card--featured {
  background: var(--glass-bg2) !important;
  border: 1.5px solid var(--pink) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 0 50px rgba(232,121,249,0.35),
    inset 0 1.5px 0 var(--highlight),
    0 16px 40px -16px rgba(65,105,225,0.4) !important;
}

/* Bundle tab: 4-up grid + the high-end "Ultimate" add-on card */
.packages-bundle-note {
  text-align: center;
  font-size: 14.5px;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto 32px;
  line-height: 1.7;
}
.packages-bundle-note strong { color: var(--text-bright); }
.packages-grid--bundle { gap: 16px; }
.packages-grid--bundle .package-card { padding: 32px 22px; }
.package-card--ultimate {
  background: var(--glass-bg2);
  border: 1.5px solid #f59e0b;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 0 50px rgba(245,158,11,0.3),
    inset 0 1.5px 0 var(--highlight),
    0 16px 40px -16px rgba(65,105,225,0.4);
}
.package-card__badge--ultimate {
  background: #f59e0b;
  color: #1a1206;
}

.package-card__badge {
  display: block;
  width: fit-content;
  margin: 0 auto 20px;
  background: var(--purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 18px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.package-card__tier {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.package-card__price {
  font-size: 3.25rem;
  font-weight: 800;
  color: var(--text-bright);
  letter-spacing: -2px;
  line-height: 1;
  margin-bottom: 4px;
}
.package-card__duration {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 32px;
}
.package-card__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}
.package-card .package-btn { margin-top: auto; }
.package-card__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-mid);
}
.package-card__features .check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--purple);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── CHOOSE YOUR SETUP ───────────────────────────────────────── */
.setup-grid {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
  margin-bottom: 36px;
}
.setup-card {
  flex: 1;
  padding: 36px 28px;
  border-radius: var(--radius-card-lg);
  text-align: center;
  transition: transform .25s var(--ease-out);
}
.setup-card:hover { transform: translateY(-6px); }
.setup-card--compact {
  flex: 1;
  padding: 24px 18px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.setup-card--featured {
  background: var(--glass-bg2);
  border: 1.5px solid var(--pink);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 0 50px rgba(232,121,249,0.35),
    inset 0 1.5px 0 var(--highlight),
    0 16px 40px -16px rgba(65,105,225,0.4);
}
.setup-card__badge {
  display: block;
  width: fit-content;
  margin: 0 auto 16px;
  background: var(--purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 18px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.setup-card__photo {
  width: 100%;
  max-width: 190px;
  height: auto;
  margin: 0 auto 20px;
  border-radius: 14px;
}
.setup-card--featured .setup-card__photo {
  max-width: 250px;
}
.setup-card__icon { font-size: 32px; margin-bottom: 16px; }
.setup-card--compact .setup-card__icon { font-size: 24px; margin-bottom: 10px; }
.setup-card__title { font-size: 18px; font-weight: 800; color: var(--text-bright); margin-bottom: 10px; letter-spacing: -0.2px; }
.setup-card--compact .setup-card__title { font-size: 14px; margin-bottom: 6px; }
.setup-card__desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.setup-card--compact .setup-card__desc { font-size: 12px; }

.setup-note {
  max-width: 640px;
  margin: 0 auto 28px;
  text-align: center;
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.7;
}
.setup-note strong { color: var(--cyan); }
.setup-perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
}
.setup-perk {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-mid);
  background: rgba(65,105,225,0.05);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}
.setup-cta { text-align: center; }

@media (max-width: 900px) {
  .setup-grid { flex-direction: column; }
  .setup-card--compact { width: 100%; flex: 1; }
}

/* ── WHAT YOU GET (hardware) ────────────────────────────────── */
.hardware-panel {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 64px;
  align-items: center;
}
.hardware-media {
  background: #f6f2fb;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-card-lg);
  padding: 28px;
  box-shadow:
    0 0 60px var(--purple-dim),
    0 24px 50px -20px rgba(65,105,225,0.35);
}
.hardware-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}
.hardware-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.hardware-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.hardware-item__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: rgba(65,105,225,0.06);
  border: 1px solid var(--border-glass);
}
.hardware-item__title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text-bright);
  margin-bottom: 4px;
}
.hardware-item__desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .hardware-panel { grid-template-columns: 1fr; gap: 36px; }
}

/* ── THEME / BACKDROP PICKER ─────────────────────────────────── */
.theme-intro {
  font-size: 15.5px;
  color: var(--text-muted);
  max-width: 52ch;
  margin-bottom: 40px;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.theme-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1.5px solid var(--border-glass);
  display: flex;
  align-items: flex-end;
  transition: transform .2s var(--ease-out), border-color .2s;
}
.theme-tile:hover { transform: translateY(-4px); }
.theme-tile span {
  position: relative;
  z-index: 2;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  padding: 16px;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.theme-tile::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: rgba(0,0,0,.55);
}
.theme-tile.is-selected { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-dim); }
.theme-tile[data-swatch="sequin"]   { background: #6a3d8f; }
.theme-tile[data-swatch="floral"]   { background: #d6428c; }
.theme-tile[data-swatch="neon"]     { background: #0891b2; }
.theme-tile[data-swatch="rustic"]   { background: #8a6238; }
.theme-tile[data-swatch="glam"]     { background: #4169e1; }
.theme-tile[data-swatch="tropical"] { background: #0d9488; }
.theme-tile[data-swatch="winter"]   { background: #3b82f6; }
.theme-tile[data-swatch="corporate"] { background: #374151; }
.theme-tile--custom {
  background: rgba(65,105,225,0.04);
  border-style: dashed;
  align-items: center;
  justify-content: center;
}
.theme-tile--custom::after { display: none; }
.theme-tile--custom span { text-align: center; color: var(--text-muted); text-shadow: none; }
.theme-cta { text-align: center; }
.theme-cta p { font-size: 13.5px; color: var(--text-muted); margin-bottom: 20px; }
@media (max-width: 700px) {
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── COMPARE: STANDARD vs MAGIC MIRROR ───────────────────────── */
.compare-intro {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 48px;
  color: var(--text-muted);
  font-size: 15.5px;
}
.compare-photo {
  max-width: 780px;
  margin: 0 auto 48px;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  border: 1px solid var(--border-glass);
  box-shadow: 0 20px 50px -22px rgba(65,105,225,0.4);
}
.compare-photo img {
  width: 100%;
  height: auto;
  display: block;
}
.compare-table {
  max-width: 780px;
  margin: 0 auto;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  border: 1px solid var(--border-glass);
  background: var(--glass-bg);
}
.compare-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  align-items: center;
}
.compare-row:not(.compare-row--head) {
  border-top: 1px solid var(--border-glass);
}
.compare-row--price { background: rgba(65,105,225,0.035); }
.compare-cell {
  padding: 16px 20px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-mid);
}
.compare-cell--label {
  text-align: left;
  font-weight: 700;
  color: var(--text-bright);
  font-size: 13.5px;
}
.compare-cell--mirror {
  background: rgba(232,121,249,0.06);
  color: var(--text-bright);
  font-weight: 600;
}
.compare-cell--col { padding: 28px 20px 22px; position: relative; }
.compare-cell__photo {
  width: 100px;
  height: auto;
  margin: 0 auto 14px;
  border-radius: 10px;
}
.compare-cell__name { font-weight: 800; font-size: 16px; color: var(--text-bright); }
.compare-cell__badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--purple);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.compare-check { color: #34d399; font-weight: 800; font-size: 16px; }
.compare-dash { color: var(--text-dim); font-weight: 700; }
.compare-cell__price { font-size: 1.7rem; font-weight: 800; color: var(--text-bright); }
.compare-cell--mirror.compare-cell__price {
  color: var(--purple);
}
.compare-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .compare-row { grid-template-columns: 1fr 1fr 1fr; }
  .compare-cell { padding: 12px 8px; font-size: 12px; }
  .compare-cell--label { font-size: 12px; }
  .compare-cell__photo { width: 64px; }
  .compare-cell__name { font-size: 13px; }
  .compare-cell__price { font-size: 1.3rem; }
}

/* ── ABOUT ───────────────────────────────────────────────────── */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about__content p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 16px;
}
.about__content .section__title { margin-bottom: 24px; }
.about__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* Mirror frame illustration */
.mirror-frame {
  width: 300px; height: 400px;
  border-radius: 150px 150px 110px 110px;
  background: var(--glass-bg);
  border: 2px solid var(--pink);
  overflow: hidden;
  margin: auto;
  box-shadow: 0 0 60px var(--pink-dim), inset 0 1.5px 0 var(--highlight);
}
.mirror-frame__photo {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 20%;
}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border-glass); }
.faq-item__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-mid);
  text-align: left;
  gap: 16px;
  transition: color .2s;
}
.faq-item__q:hover,
.faq-item__q[aria-expanded="true"] { color: var(--text-bright); }
.faq-item__icon {
  font-size: 22px;
  font-weight: 400;
  color: var(--purple);
  flex-shrink: 0;
  transition: transform .3s;
  line-height: 1;
}
.faq-item__q[aria-expanded="true"] .faq-item__icon { transform: rotate(45deg); }
.faq-item__a {
  max-height: 0;
  overflow: hidden;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  transition: max-height .35s var(--ease-out), padding .35s;
}
.faq-item__a.open { max-height: 400px; padding-bottom: 24px; }

/* ── CTA BANNER ──────────────────────────────────────────────── */
.cta-banner {
  margin: 0 auto;
  width: min(var(--container), 100% - 3rem);
  margin-bottom: 80px;
  border-radius: 28px;
  background: var(--blue-deep);
  padding: 80px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -120px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 400px;
  border-radius: 50%;
  background: rgba(232,121,249,0.25);
  filter: blur(90px);
  pointer-events: none;
}
.cta-banner .container { position: relative; z-index: 2; }
.cta-banner h2 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -1.5px;
  margin-bottom: 16px;
  line-height: 1.1;
}
/* The banner's own background is solid blue, so the accent word just
   stays solid white to read clearly against it. */
.cta-banner .gradient-text {
  color: #fff;
}
.cta-banner p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.72);
  margin-bottom: 44px;
}
.cta-banner__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── LEGAL PAGE (rental agreement) ──────────────────────────── */
.legal-header {
  position: relative;
  z-index: 10;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-glass);
}
.legal-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.legal-header__back {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color .2s;
}
.legal-header__back:hover { color: var(--text-bright); }

.legal-page {
  min-height: 100vh;
  padding: 56px 0 100px;
}
.legal-banner {
  background: rgba(232,121,249,0.08);
  border: 1px solid rgba(232,121,249,0.25);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 13.5px;
  color: var(--text-mid);
  line-height: 1.6;
  margin-bottom: 40px;
}
.legal-banner strong { color: var(--pink); display: block; margin-bottom: 4px; }
.legal-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text-bright);
  margin-bottom: 8px;
}
.legal-updated {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 48px;
}
.legal-content h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-bright);
  margin-top: 40px;
  margin-bottom: 12px;
  letter-spacing: -0.2px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.75;
}
.legal-content a { color: var(--cyan); text-decoration: underline; }

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer {
  background: var(--bg-footer);
  padding: 60px 0 32px;
  border-top: 1px solid var(--border-glass);
}
/* rental-agreement.html's content section, between the nav and footer --
   holds the agreement text (not yet written; placeholder container for
   now). Top padding clears the fixed badge/nav the same way .hero does
   on index.html. */
.rental-content {
  padding: 190px 0 100px;
}
.rental-content h1 {
  margin-bottom: 24px;
}

/* ── FIT-TO-SCREEN PAGES (About, Compare) ───────────────────────
   One opaque "sticker" card (.fit-card) holding all of a page's content:
   thick blue outline, hard red offset shadow, tilted tag. Solid colors
   only. The page never scrolls: main.js sizes the card's text to fit
   (--fit-fs); top padding clears the logo badge. */
.fit-page {
  padding: calc(176px + var(--safe-top)) 24px calc(var(--bottom-bar-h) + 24px);
}
/* On wide screens the nav is a slim pill (72px), so the card can start right
   below it and sit to the right of the logo badge instead of below it.
   The left padding is whatever keeps the card's left edge >= 215px (clear of
   the badge) at any width -- 24px once the screen is wide enough to center it. */
@media (min-width: 1131px) {
  .fit-page {
    padding: calc(94px + var(--safe-top)) 24px calc(var(--bottom-bar-h) + 18px) clamp(24px, calc(1694px - 100vw), 215px);
  }
}
/* Desktop-size windows: the page is exactly one screen tall and never
   scrolls; main.js shrinks the card's text until it fits. If it ever can't
   (tiny window), main.js adds --overflow and the page scrolls instead of
   cutting content off. */
@media (min-width: 701px) {
  .fit-page { height: 100svh; overflow: hidden; }
  .fit-page.fit-page--overflow { height: auto; overflow: visible; }
}
.fit-card {
  --fit-fs: clamp(14px, 1.75svh, 16px);
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  background: #fff;
  border: 4px solid var(--purple);
  border-radius: 24px;
  box-shadow: 10px 10px 0 var(--red);
  padding: 20px 30px 0;
  font-size: var(--fit-fs);
  color: var(--text-bright);
}
.fit-card__tag {
  position: absolute;
  top: -17px;
  left: 28px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  transform: rotate(-3deg);
}
.about-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 6px;
}
.about-card__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0; /* the normalize sheet gives h1 a .67em margin that beats the global reset */
}
.about-card__title span { color: var(--purple); }
.fit-card__tagline {
  font-size: 1.3em;
  font-weight: 800;
  color: var(--red-deep);
}
.about-card__intro {
  font-size: 1.04em;
  line-height: 1.4;
  margin-bottom: 10px;
}
.about-card__cols {
  display: grid;
  grid-template-columns: 1fr 1.55fr 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.about-col { --c: var(--purple); }
.about-col--red { --c: var(--red-deep); }
.about-col--green { --c: var(--green-deep); }
.about-col h2 {
  font-size: 1.15em;
  font-weight: 800;
  color: var(--c);
  margin-bottom: 6px;
}
.about-col h2::after {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--c);
  margin-top: 4px;
}
.about-col h2:not(:first-child) { margin-top: 10px; }
.about-col p { line-height: 1.45; }
.about-col--story {
  background: #eef3ff;
  border: 2px solid var(--purple);
  border-radius: 16px;
  padding: 10px 14px 12px;
}
.about-hl--blue  { color: var(--purple);     font-weight: 800; }
.about-hl--red   { color: var(--red-deep);   font-weight: 800; }
.about-hl--green { color: var(--green-deep); font-weight: 800; }
.about-card__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 12px -30px 0;
  padding: 9px 30px;
  background: var(--blue-deep);
  border-radius: 0 0 20px 20px;
  color: #fff;
}
.about-card__band p {
  font-size: 1.25em;
  font-weight: 800;
  line-height: 1.3;
}
.about-card__cta { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1100px) {
  .about-card__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .fit-page { padding-left: 16px; padding-right: 16px; }
  .fit-card { padding: 26px 20px 0; box-shadow: 6px 6px 0 var(--red); }
  .about-card__cols { grid-template-columns: 1fr; }
  .about-card__band { margin: 20px -20px 0; padding: 14px 20px; }
}
/* Wide screens (1300px+): the card sits BETWEEN the two cannons. Side margins
   are equal on both sides -- the cannon's reach (--cannon-w, from main.js)
   plus a gap, never less than the logo badge's width -- and it's centered
   vertically between the nav and the bottom bar. Kept last so it wins over
   the base rules above. */
@media (min-width: 1300px) {
  .fit-page {
    padding: calc(94px + var(--safe-top)) max(calc(var(--cannon-w, 215px) + 30px), 215px) calc(var(--bottom-bar-h) + 20px);
    display: flex;
    align-items: center;
  }
  .fit-card { width: 100%; max-width: none; }
}
.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 48px;
}
.footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-bright);
}
.footer__brand p {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 260px;
}
.footer__social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.footer__social a {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(65,105,225,0.06);
  color: var(--text-muted);
  transition: background .2s, color .2s;
}
.footer__social a:hover { background: var(--purple); color: #fff; }
.footer__col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 11px; }
.footer__col a, .footer__col li {
  font-size: 13px;
  color: var(--text-muted);
  transition: color .2s;
}
.footer__col a:hover { color: var(--text-mid); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border-glass);
  font-size: 12px;
  color: var(--text-dim);
  flex-wrap: wrap;
  gap: 12px;
}

/* ── MODALS ──────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.modal.open {
  pointer-events: all;
  opacity: 1;
}
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(16,36,107,.62); /* solid deep blue, not black */
  backdrop-filter: blur(4px);
}
.modal__dialog {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border: 4px solid var(--purple);
  border-radius: var(--radius-modal);
  padding: 30px 40px 28px;
  width: min(640px, 100%);
  max-height: min(92svh, 840px);
  overflow-y: auto;
  box-shadow: 10px 10px 0 var(--red); /* same hard red offset shadow as the page cards */
  transform: translateY(24px) scale(.97);
  transition: transform .3s var(--ease-out);
}
.modal.open .modal__dialog {
  transform: translateY(0) scale(1);
}
.modal__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--purple);
  box-shadow: 2px 3px 0 var(--red);
  font-size: 22px;
  color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: background .2s, color .2s;
}
.modal__close:hover { background: var(--purple); color: #fff; }
.modal__header { margin-bottom: 20px; padding-right: 48px; }
/* the little tilted tag, like the ones on the page cards (red for Book Now, green for Contact) */
.modal__header .section__label {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  transform: rotate(-3deg);
}
.modal__header .section__label::before { display: none; }
#contact-modal .modal__header .section__label { background: #16a34a; }
.modal__header h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--text-bright);
  line-height: 1.12;
  letter-spacing: -0.5px;
  margin-top: 0;
}

/* ── THANK-YOU SCREEN (shown in place of the form after a successful send) ── */
.modal-thanks { display: none; text-align: center; padding: 28px 0 8px; }
.modal--sent .modal__header,
.modal--sent .modal-form { display: none; }
.modal--sent .modal-thanks { display: block; }
.modal-thanks__emoji { font-size: 56px; line-height: 1; margin-bottom: 16px; }
.modal-thanks__title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--purple);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  outline: none;
}
.modal-thanks p {
  font-size: 17px;
  color: var(--text-mid);
  margin-bottom: 28px;
}

/* Full-screen confetti celebration -- above the modal (1000), below the toast (2000). */
.celebrate-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1500;
  pointer-events: none;
}

/* ── FORMS ───────────────────────────────────────────────────── */
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-group label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-bright);
}
.form-group label abbr { color: var(--red-deep); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--text-bright);
  background: #fff;
  border: 2.5px solid var(--purple);
  border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-dim); }
.form-group select option { background: #ffffff; color: var(--text-bright); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue-deep);
  box-shadow: 3px 3px 0 var(--red);
}
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: var(--red-deep);
  box-shadow: 3px 3px 0 #fca5a5;
}
.form-error {
  font-size: 12px;
  color: var(--red-deep);
  font-weight: 700;
  min-height: 14px;
}
.form-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid);
  text-align: center;
  margin-top: -8px;
}
.form-disclaimer {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  margin-top: -4px;
}
.form-disclaimer a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}
.form-disclaimer a:hover { color: var(--red-deep); }

/* the big submit / Close buttons inside the popups: chunky, with the same hard red shadow */
.modal .btn--primary {
  border: 3px solid #10246b;
  box-shadow: 4px 5px 0 var(--red);
}
.modal .btn--primary:hover {
  background: var(--blue-deep);
  filter: brightness(1.12);
  transform: none;
  box-shadow: 4px 5px 0 var(--red);
}

.footer__legal-link {
  color: var(--text-dim);
  text-decoration: underline;
  transition: color .2s;
}
.footer__legal-link:hover { color: var(--text-mid); }

/* ── TOAST ───────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(var(--bottom-bar-h) + 16px); right: 28px;
  z-index: 2000;
  padding: 14px 22px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright);
  background: #ffffff;
  border: 3px solid var(--purple);
  box-shadow: 5px 5px 0 var(--red);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  max-width: 340px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast--success { border-color: #16a34a; box-shadow: 5px 5px 0 #15803d; }
.toast--error   { border-color: var(--red-deep); box-shadow: 5px 5px 0 #fca5a5; }

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { transition-delay: .1s; }
[data-reveal-delay="2"] { transition-delay: .2s; }
[data-reveal-delay="3"] { transition-delay: .3s; }
[data-reveal-delay="4"] { transition-delay: .4s; }
[data-reveal-delay="5"] { transition-delay: .5s; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .features-grid   { grid-template-columns: repeat(2, 1fr); }
  .packages-grid   { flex-direction: column; }
  .about           { grid-template-columns: 1fr; gap: 48px; }
  .mirror-frame    { display: none; }
  .steps           { flex-direction: column; }
  .footer__inner   { grid-template-columns: 1fr 1fr; gap: 32px; }
  .stats-grid      { grid-template-columns: repeat(2, 1fr); }
  .hero__strips    { display: none; }
  .hero__mirror-wrap { display: none; }
  .hero__content   { max-width: 100%; padding: 100px 0 60px; }
}

/* Nav collapses to the hamburger at 1229px (not 768px) -- with 9 links (Home added) the
   pill is ~1015px wide and runs into the fixed Book Now button below that. */
@media (max-width: 1229px) {
  .nav__links { display: none; }
  .nav__inner .btn { display: none; }
  .nav__hamburger { display: flex; }
  /* Only the hamburger is left in the pill at this width, so drop the
     200px badge-clearing padding (it isn't needed with no links to clear
     it for) and right-align the now-tiny pill instead of leaving it
     hugging the badge on the left. Book Now stacks below it rather than
     beside it -- both wanting the top-right corner has no room to sit
     side by side at these widths. */
  .nav__inner { margin: 10px max(16px, var(--safe-right)) 0 auto; padding: 0 4px; }
  /* Book Now sits in the top row, right beside (to the left of) the menu button: the menu pill is 51.6px wide
     and 16px from the edge, so Book Now ends 8px before it, and is centered on the menu button (36px down). */
  .book-now-fixed { top: calc(16.5px + var(--safe-top)); right: calc(max(16px, var(--safe-right)) + 59.6px); }
}

@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .hero__headline { letter-spacing: -1.5px; }
  .features-grid      { grid-template-columns: 1fr; }
  .events-grid        { grid-template-columns: 1fr 1fr; }
  .testimonials-grid  { grid-template-columns: 1fr; }
  .gallery-scroll-wrap { height: 420px; }
  .gallery-tile        { height: 180px; }
  .footer__inner      { grid-template-columns: 1fr; }
  .footer__bottom     { flex-direction: column; text-align: center; }
  .modal__dialog      { padding: 26px 20px 22px; }
  .form-row           { grid-template-columns: 1fr; }
  .cta-banner         { padding: 60px 32px; margin: 0 12px 60px; }
  .stats-grid         { grid-template-columns: 1fr 1fr; }
  .about__actions     { justify-content: center; }
  .hero__stats-row    { padding: 0 24px; }
}

@media (max-width: 480px) {
  .modal__dialog { border-width: 3px; box-shadow: 6px 6px 0 var(--red); }
  .modal__close  { top: 14px; right: 14px; width: 36px; height: 36px; }
  .hero__actions    { flex-direction: column; align-items: center; }
  .cta-banner__actions { flex-direction: column; align-items: center; }
  .events-grid      { grid-template-columns: 1fr; }
  .gallery-scroll-wrap { height: 360px; gap: 8px; }
  .gallery-col--b      { display: none; }
  .stats-grid       { grid-template-columns: 1fr; }
}

/* ── COMPARE PAGE ───────────────────────────────────────────────
   Uses the shared .fit-page / .fit-card shell (see About). Three option
   cards share ONE 7-row grid via subgrid, so the photo, name, each feature
   row, and "Best for" line up across cards. Every size inside is in em, so
   when main.js shrinks/grows --fit-fs to fit the screen, everything
   (photos included) scales together. The Magic Mirror card is the
   highlighted "top pick". */
.compare-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin-bottom: 0.9em;
}
.compare-card__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0; /* the normalize sheet gives h1 a .67em margin that beats the global reset */
}
.compare-card__title span { color: var(--purple); }
.compare-card__includes {
  flex: 1 1 340px;
  font-size: 1.02em;
  line-height: 1.4;
}
.compare-card__includes strong { color: var(--purple); font-weight: 800; }
.compare-card__opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(7, auto);
  column-gap: 1.1em;
  padding-top: 0.6em;
}
.compare-opt {
  --c: var(--purple);
  position: relative;
  grid-row: span 7;
  display: grid;
  grid-template-rows: subgrid;
  padding: 0.5em 0.9em 0.8em;
  background: #fff;
  border: 2px solid var(--c);
  border-radius: 16px;
}
.compare-opt--green { --c: var(--green-deep); }
.compare-opt--red   { --c: var(--red-deep); }
.compare-opt--blue  { --c: var(--purple); }
.compare-opt--pick {
  background: #fff5f5;
  border-width: 3px;
}
.compare-opt__badge {
  position: absolute;
  top: -0.85em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: #fff;
  font-size: 0.8em;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 0.3em 1.1em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.compare-opt__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9.5em;
  padding-bottom: 0.3em;
}
.compare-opt__photo img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.compare-opt__name {
  font-size: 1.3em;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  color: var(--c);
  padding-bottom: 0.3em;
}
.compare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7em;
  padding: 0.36em 0;
  border-top: 1px solid var(--border-glass);
  font-size: 0.92em;
  line-height: 1.25;
}
.compare-row span { color: var(--text-mid); }
.compare-row b { font-weight: 800; text-align: right; }
.compare-row .compare-no  { color: var(--text-muted); font-weight: 700; }
.compare-row .compare-yes { color: var(--green-deep); }
.compare-opt__best {
  font-size: 0.95em;
  line-height: 1.35;
  padding-top: 0.5em;
  border-top: 2px solid var(--c);
}
.compare-opt__best strong { color: var(--c); font-weight: 800; }
.compare-band {
  display: flex;
  align-items: center;
  gap: 0.6em 1.6em;
  margin: 1em -30px 0;
  padding: 0.65em 30px;
  background: var(--blue-deep);
  border-radius: 0 0 20px 20px;
  color: #fff;
}
.compare-band__label {
  font-size: 0.85em;
  font-weight: 800;
  letter-spacing: 1.5px;
}
.compare-band__item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-size: 0.98em;
  line-height: 1.3;
}
.compare-band__item strong { font-weight: 800; }
.compare-band__thumb {
  --c: var(--purple);
  position: relative;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: zoom-in;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.6em;
  width: 3.6em;
  background: #fff;
  border-radius: 12px;
}
.compare-band__thumb img { height: 88%; width: auto; transition: transform .3s ease; }
.compare-band__thumb:hover img { transform: scale(1.08); }
.compare-band__thumb:focus { outline: none; }
.compare-band__thumb:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* smaller magnifier badge, tucked on the corner so it doesn't cover the picture */
.compare-band__thumb .zoom-badge { width: 20px; height: 20px; padding: 3px; right: -7px; bottom: -7px; border-width: 2px; }
@media (max-width: 800px) {
  .compare-card__opts { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1.6em; }
  .compare-opt { grid-row: auto; display: block; }
  .compare-opt--pick { padding-top: 1.6em; } /* the OUR TOP PICK tag hangs ~8px into the card; keep it off the photo */
  .compare-band { flex-wrap: wrap; margin: 1em -20px 0; padding: 0.8em 20px; }
}

/* ── PACKAGES PAGE ──────────────────────────────────────────────
   Uses the shared .fit-page / .fit-card shell (see About). Four "metal"
   cards -- Base, Silver, Gold, Platinum. A package IS its equipment:
   Base = Classic Booth, Silver = Magic Mirror, Gold = both, Platinum =
   both + the slideshow projector. Every size is in em so the fit
   (main.js) scales everything, photos included. */
.pkg-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin-bottom: 0.4em;
}
.pkg-card__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0; /* the normalize sheet gives h1 a .67em margin that beats the global reset */
}
.pkg-card__title span { color: var(--purple); }
.pkg-card__intro { flex: 1 1 340px; font-size: 1.02em; line-height: 1.4; }
.pkg-card__intro strong { color: var(--purple); font-weight: 800; }
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1em;
  align-items: stretch;
  padding-top: 1em; /* room for the RECOMMENDED badge that overhangs the top */
}
.pkg {
  --m: #4b5563; --mt: #fff; --mb: #f3f4f6; --mborder: #4b5563;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mb);
  border: 2px solid var(--mborder);
  border-radius: 14px;
}
.pkg--silver   { --m: #cbd5e1; --mt: #1e293b; --mb: #f8fafc; --mborder: #94a3b8; }
.pkg--gold     { --m: #f59e0b; --mt: #1a1206; --mb: #fffbeb; --mborder: #d97706; }
.pkg--platinum { --m: #334155; --mt: #fff;    --mb: #f1f5f9; --mborder: #334155; }
.pkg--pick { border-width: 4px; box-shadow: 6px 6px 0 var(--red); }
.pkg__badge {
  position: absolute;
  top: -0.95em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background: var(--red);
  color: #fff;
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 0.3em 1em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pkg__top {
  background: var(--m);
  color: var(--mt);
  text-align: center;
  padding: 0.55em 0.8em 0.5em;
  border-radius: 11px 11px 0 0;
}
.pkg--pick .pkg__top { border-radius: 9px 9px 0 0; padding-top: 0.75em; }
.pkg__name { font-size: 1.5em; font-weight: 800; line-height: 1.1; }
.pkg__tag { font-size: 0.95em; font-weight: 700; line-height: 1.25; }
.pkg__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.4em;
  padding: 0.4em 0.5em 0.1em;
}
.pkg__photo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.pkg__list {
  flex: 1;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 0.5em 0.8em 0.6em;
}
.pkg__list li { position: relative; padding-left: 1.4em; font-size: 1em; font-weight: 600; line-height: 1.3; color: var(--text-bright); }
.pkg__list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--green-deep);
  font-weight: 800;
}
.pkg__btn {
  margin: 0 0.8em 0.8em;
  padding: 0.55em 1em;
  background: var(--m);
  color: var(--mt);
  border-radius: var(--radius-pill);
  font-size: 0.98em;
  font-weight: 800;
  text-align: center;
  transition: transform 0.2s;
}
.pkg__btn:hover { transform: translateY(-2px); }
.pkg__btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.pkg-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6em 1.5em;
  margin: 1em -30px 0;
  padding: 0.65em 30px;
  background: var(--blue-deep);
  border-radius: 0 0 20px 20px;
  color: #fff;
}
.pkg-band p { font-size: 1.08em; font-weight: 800; line-height: 1.3; }
@media (max-width: 900px) {
  .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6em; }
  .pkg--pick .pkg__top { padding-top: 1.3em; } /* keep the RECOMMENDED tag from sitting on top of "Gold" */
}
@media (max-width: 560px) {
  .pkg-grid { grid-template-columns: 1fr; }
  .pkg-band { margin: 1em -20px 0; padding: 0.8em 20px; }
}

/* One clear "Every package includes" strip under the cards (instead of
   repeating the same four lines inside every card) -- frees the room the
   card text needs to be bigger. */
.pkg-includes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4em 1.2em;
  margin-top: 1em;
  padding: 0.55em 0.9em;
  background: #eef3ff;
  border: 2px solid var(--purple);
  border-radius: 12px;
}
.pkg-includes__label {
  font-size: 0.82em;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--purple);
}
.pkg-includes ul { display: flex; flex-wrap: wrap; gap: 0.3em 1.4em; list-style: none; }
.pkg-includes li { position: relative; padding-left: 1.3em; font-size: 1em; font-weight: 700; color: var(--text-bright); }
.pkg-includes li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--green-deep);
  font-weight: 800;
}

/* Big photos of the two machines in the empty side gutters beside the card
   (wide screens only -- that's when the card sits between the cannons and
   there IS a gutter). They're fixed, so they never affect the page's fit;
   each sits between the nav and the top of its cannon, centered in the same
   gutter width the card's margin uses. */
.pkg-side { display: none; }
@media (min-width: 1300px) {
  .pkg-side {
    position: fixed;
    top: 170px;
    bottom: calc(var(--bottom-bar-h) + var(--cannon-h, 140px) + 14px);
    width: calc(max(var(--cannon-w, 215px) + 30px, 215px) - 34px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    pointer-events: none;
  }
  .pkg-side--left  { left: 12px; }
  .pkg-side--right { right: 12px; }
  .pkg-side__photo { flex: 1 1 0; min-height: 0; width: 100%; }
  .pkg-side__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 8px 14px rgba(26,22,37,0.25));
  }
  .pkg-side figcaption {
    padding-top: 0.35em;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    color: var(--purple);
  }
}

/* ── BACKDROPS PAGE ─────────────────────────────────────────────
   Uses the shared .fit-page / .fit-card shell (see About). Nine backdrop
   photos, five on top and four centered underneath. Sizes are in em, so the
   fit in main.js scales the whole gallery to the screen. The grid is 10
   equal tracks and every photo spans two, which is what lets the bottom four
   sit exactly centered. */
.bd-card__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  text-align: center;
  margin: 0 0 0.45em; /* the normalize sheet gives h1 a .67em margin that beats the global reset */
}
.bd-grid {
  --tile: 14em;
  --gap: 0.9em;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--gap);
  width: 100%;
  max-width: calc(5 * var(--tile) + 4 * var(--gap));
  margin: 0 auto;
  padding: 0.3em 0 1.4em;
}
.bd-tile {
  --c: var(--purple);
  grid-column: span 2;
  aspect-ratio: 1024 / 1110;
  margin: 0;
  overflow: hidden;
  background: #e5e7eb;
  border: 3px solid var(--c);
  border-radius: 14px;
}
.bd-tile:nth-child(3n + 2) { --c: var(--red); }
.bd-tile:nth-child(3n)     { --c: var(--green); }
.bd-tile:nth-child(6)      { grid-column: 2 / span 2; }
.bd-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Portrait tablets: three across, three rows. */
@media (max-width: 1130px) and (orientation: portrait) {
  .bd-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: calc(3 * var(--tile) + 2 * var(--gap)); }
  .bd-tile:nth-child(6) { grid-column: span 2; }
}
/* Phones: two across; the ninth photo sits centered on its own row. */
@media (max-width: 700px) {
  .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .bd-tile,
  .bd-tile:nth-child(6) { grid-column: auto; }
  .bd-tile:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--gap) / 2);
  }
}

/* Click a photo to see it big: any button with data-large (Backdrops photos, the Compare
   projector picture). The viewer itself is built by main.js "PHOTO LIGHTBOX". */
.bd-tile { position: relative; }
.bd-tile__btn {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: zoom-in;
}
.bd-tile__btn:focus { outline: none; }
.bd-tile:has(.bd-tile__btn:focus-visible) { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c); }
.bd-tile img { transition: transform .3s ease; }
.bd-tile__btn:hover img { transform: scale(1.06); }
/* little magnifier badge so it's obvious (on phones too) that the photo can be tapped */
.zoom-badge {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: clamp(22px, 2.2em, 34px);
  height: clamp(22px, 2.2em, 34px);
  padding: 5px;
  border-radius: 50%;
  background: #fff;
  color: var(--c);
  border: 2px solid var(--c);
  pointer-events: none;
}
.zoom-badge svg { display: block; width: 100%; height: 100%; }

.lightbox {
  --lb-ratio: 0.9225; /* shape of the big photo (width / height); main.js sets it per photo */
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  cursor: zoom-out;
}
.lightbox[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
.lightbox__shade {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 32, 0.88);
  opacity: 0;
  transition: opacity .25s;
}
.lightbox.is-open .lightbox__shade { opacity: 1; }
.lightbox__img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(94vw, calc(92svh * var(--lb-ratio)));
  height: auto;
  aspect-ratio: var(--lb-ratio);
  object-fit: cover;
  background: #e5e7eb;
  border: 5px solid #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform-origin: 0 0;
}
.lightbox__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--red);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s;
}
.lightbox.is-open .lightbox__close { opacity: 1; }
.lightbox__close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .lightbox__shade, .lightbox__close, .bd-tile img { transition: none; }
}

/* ── FAQ PAGE ───────────────────────────────────────────────────
   Uses the shared .fit-page / .fit-card shell (see About). Four topic
   columns of questions (24 total), one answer panel underneath that shows
   whichever question is selected, and a "Have more questions? Ask us." band
   with a Contact button. On screens 701px+ the topics/lists are flattened
   into ONE grid (display: contents) so every answer sits stacked in the same
   bottom cell: the panel is always as tall as the longest answer, so
   picking a different question never changes the page's height (the page
   is locked to one screen). Phones: a normal tap-to-open accordion. */
.faq-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 0.7em;
}
.faq-card__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0; /* the normalize sheet gives h1 a .67em margin that beats the global reset */
}
.faq-card__title span { color: var(--purple); }
.faq-card__hint { font-size: 1.05em; font-weight: 700; color: var(--red-deep); }

.faq-topic {
  --c: var(--purple);
  --t: #eef3ff;
  margin-bottom: 1em;
}
.faq-topic--red   { --c: var(--red-deep);   --t: #fef2f2; }
.faq-topic--green { --c: var(--green-deep); --t: #f0fdf4; }
.faq-topic h2 {
  margin: 0 0 0.4em;
  padding-bottom: 0.2em;
  border-bottom: 3px solid var(--c);
  font-size: 1.15em;
  font-weight: 800;
  line-height: 1.2;
  color: var(--c);
}
.faq-topic ul { list-style: none; margin: 0; padding: 0; }
.faq-item { margin-bottom: 0.4em; padding: 0; border: 0; } /* some sitewide list rule draws a hairline under every li */
.faq-q {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5em 0.75em;
  font: inherit;
  font-size: 1.02em;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  color: var(--text-bright);
  background: #fff;
  border: 2px solid var(--c);
  border-radius: 10px;
  cursor: pointer;
}
.faq-q:hover { background: var(--t); }
.faq-q:focus { outline: none; }
.faq-q:focus-visible { outline: 3px solid var(--text-bright); outline-offset: 2px; }
.faq-item.is-active .faq-q { background: var(--c); color: #fff; }

.faq-a {
  display: none;
  margin: 0.4em 0 0.6em;
  padding: 0.7em 1em 0.8em;
  background: var(--t);
  border: 3px solid var(--c);
  border-radius: 14px;
  font-size: 1.15em;
  line-height: 1.4;
  color: var(--text-bright);
}
.faq-item.is-active .faq-a { display: block; }
.faq-a__q { display: none; }
.faq-a a { color: var(--purple); font-weight: 800; text-decoration: underline; }

.faq-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6em 1.5em;
  margin: 1em -20px 0;
  padding: 0.8em 20px;
  background: var(--blue-deep);
  border-radius: 0 0 20px 20px;
  color: #fff;
}
.faq-band p { font-size: 1.3em; font-weight: 500; line-height: 1.3; }
.faq-band p strong { font-weight: 800; }

@media (min-width: 701px) {
  .faq-topics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 1.1em;
    row-gap: 0.4em;
    align-items: stretch;
  }
  .faq-topic, .faq-topic ul, .faq-item { display: contents; }
  .faq-topic:nth-child(1) { --col: 1; }
  .faq-topic:nth-child(2) { --col: 2; }
  .faq-topic:nth-child(3) { --col: 3; }
  .faq-topic:nth-child(4) { --col: 4; }
  .faq-item:nth-child(1) { --row: 2; }
  .faq-item:nth-child(2) { --row: 3; }
  .faq-item:nth-child(3) { --row: 4; }
  .faq-item:nth-child(4) { --row: 5; }
  .faq-item:nth-child(5) { --row: 6; }
  .faq-item:nth-child(6) { --row: 7; }
  .faq-topic h2 { grid-column: var(--col); grid-row: 1; margin-bottom: 0; }
  .faq-q { grid-column: var(--col); grid-row: var(--row); }
  /* every answer shares this one cell; only the selected one is visible */
  .faq-a {
    display: block;
    visibility: hidden;
    grid-column: 1 / -1;
    grid-row: 8;
    margin: 0.5em 0 0;
  }
  .faq-item.is-active .faq-a { visibility: visible; }
  .faq-a__q { display: block; margin: 0 0 0.15em; font-weight: 800; color: var(--c); }
  .faq-band { margin: 1em -30px 0; padding: 0.65em 30px; }
}
@media (max-width: 640px) {
  .faq-band { margin: 1em -20px 0; padding: 0.8em 20px; }
}

/* ── SETUP PAGE ─────────────────────────────────────────────────
   Uses the shared .fit-page / .fit-card shell (see About). "Your event day,
   start to finish": four numbered step cards (blue/red/green/blue), then two
   strips -- what we bring / what we need from you -- and a "questions? ask
   us" band with a Contact button. All sizes in em so the fit (main.js)
   scales everything. */
.eday-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 0.8em;
}
.eday-card__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0; /* the normalize sheet gives h1 a .67em margin that beats the global reset */
}
.eday-card__title span { color: var(--purple); }
.setup-steps {
  list-style: none;
  margin: 0;
  padding: 0.2em 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1em;
}
.setup-step {
  --c: var(--purple);
  --t: #eef3ff;
  display: flex;
  flex-direction: column;
  padding: 0.7em 0.9em 0.9em;
  background: var(--t);
  border: 3px solid var(--c);
  border-radius: 16px;
}
.setup-step--red   { --c: var(--red-deep);   --t: #fef2f2; }
.setup-step--green { --c: var(--green-deep); --t: #f0fdf4; }
.setup-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin-bottom: 0.45em;
}
.setup-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-size: 1.25em;
  font-weight: 800;
  line-height: 1;
}
.setup-step__who {
  padding: 0.2em 0.7em;
  border: 2px solid var(--c);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 0.8em;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c);
}
.setup-step h2 {
  margin: 0 0 0.4em;
  font-size: 1.35em;
  font-weight: 800;
  line-height: 1.15;
  color: var(--c);
}
.setup-step ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4em; }
.setup-step li {
  position: relative;
  padding-left: 1.3em;
  font-size: 1.02em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-bright);
}
.setup-step li::before {
  content: '';
  position: absolute;
  left: 0.15em;
  top: 0.5em;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--c);
}
.setup-step a, .setup-strip a { color: var(--purple); font-weight: 800; text-decoration: underline; }

.setup-strips {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.1em;
  margin-top: 1em;
}
.setup-strip {
  --c: var(--green-deep);
  padding: 0.55em 0.9em 0.65em;
  background: #fff;
  border: 3px solid var(--c);
  border-radius: 14px;
}
.setup-strip--red { --c: var(--red-deep); }
.setup-strip h2 {
  margin: 0 0 0.3em;
  font-size: 0.85em;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c);
}
.setup-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25em; }
.setup-strip__row { flex-direction: row !important; flex-wrap: wrap; gap: 0.25em 1.3em !important; }
.setup-strip li {
  position: relative;
  padding-left: 1.3em;
  font-size: 1.02em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-bright);
}
.setup-strip li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--c);
  font-weight: 800;
}

.setup-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6em 1.5em;
  margin: 1em -20px 0;
  padding: 0.8em 20px;
  background: var(--blue-deep);
  border-radius: 0 0 20px 20px;
  color: #fff;
}
.setup-band p { font-size: 1.3em; font-weight: 500; line-height: 1.3; }
.setup-band p strong { font-weight: 800; }
@media (min-width: 701px) {
  .setup-band { margin: 1em -30px 0; padding: 0.65em 30px; }
}
@media (max-width: 900px) {
  .setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.1em; }
  .setup-strips { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .setup-steps { grid-template-columns: 1fr; }
}
.eday-card, .eday-card h1, .eday-card h2, .eday-card p, .eday-card li { text-align: left; }

/* ── RENTAL AGREEMENT PAGE ──────────────────────────────────────
   Shared .fit-page / .fit-card shell. A friendly "what to expect" summary:
   eight short cards (blue/red/green), a "this is a summary" note, and the
   same blue "ask us" band the Setup page uses (.setup-band). Sizes in em so
   the fit (main.js) scales everything. */
.ra-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 0.8em;
}
.ra-card__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0; /* the normalize sheet gives h1 a .67em margin that beats the global reset */
}
.ra-card__title span { color: var(--purple); }
.ra-grid {
  list-style: none;
  margin: 0;
  padding: 0.2em 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1em 1.1em;
}
.ra-item {
  --c: var(--purple);
  --t: #eef3ff;
  padding: 0.6em 0.9em 0.8em;
  background: var(--t);
  border: 3px solid var(--c);
  border-radius: 16px;
}
.ra-item--red   { --c: var(--red-deep);   --t: #fef2f2; }
.ra-item--green { --c: var(--green-deep); --t: #f0fdf4; }
.ra-item h2 {
  margin: 0 0 0.3em;
  font-size: 1.3em;
  font-weight: 800;
  line-height: 1.15;
  color: var(--c);
}
.ra-item p { margin: 0; font-size: 1.02em; font-weight: 600; line-height: 1.3; color: var(--text-bright); }
.ra-note { margin: 0.9em 0 0; font-size: 1em; line-height: 1.3; color: var(--text-bright); }
.ra-note strong { color: var(--purple); font-weight: 800; }
.ra-card, .ra-card h1, .ra-card h2, .ra-card p, .ra-card li { text-align: left; }
@media (max-width: 900px) {
  .ra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ra-grid { grid-template-columns: 1fr; }
}

/* ── GALLERY PAGE ───────────────────────────────────────────────
   Shared .fit-page / .fit-card shell. Four 4:5 photos of our real booths in
   one row, each click-to-enlarge (the generic PHOTO LIGHTBOX in main.js, via
   data-large). No event photos yet -- add more .gal-tile figures as they
   arrive. Sizes are em-based, so the fitter (main.js) scales the whole row;
   card has data-fit-min="6" like Backdrops since there is no small text to
   protect. */
.gal-card__head { text-align: center; margin-bottom: 0.5em; }
.gal-card__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0; /* the normalize sheet gives h1 a .67em margin that beats the global reset */
}
.gal-card__sub { margin: 0.15em 0 0; font-size: 1.3em; font-weight: 800; color: var(--red-deep); }
.gal-grid {
  --tile: 16em;
  --gap: 1em;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  width: 100%;
  max-width: calc(4 * var(--tile) + 3 * var(--gap));
  margin: 0 auto;
  padding: 0.3em 0 1.2em;
}
.gal-tile { --c: var(--purple); margin: 0; }
.gal-tile:nth-child(2) { --c: var(--red); }
.gal-tile:nth-child(3) { --c: var(--green); }
.gal-tile__btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--c);
  border-radius: 14px;
  font: inherit;
  cursor: zoom-in;
}
.gal-tile__btn:focus { outline: none; }
.gal-tile__btn:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c); }
.gal-tile__btn img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.gal-tile__btn:hover img { transform: scale(1.05); }
.gal-tile figcaption {
  margin-top: 0.45em;
  text-align: center;
  font-size: 1.1em;
  font-weight: 800;
  color: var(--text-bright);
}
.gal-tile__btn .zoom-badge { right: 7px; bottom: 7px; }
@media (prefers-reduced-motion: reduce) { .gal-tile__btn img { transition: none; } }
@media (max-width: 900px) {
  .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(2 * var(--tile) + var(--gap)); }
  .gal-tile:nth-child(3) { --c: var(--purple); }
  .gal-tile:nth-child(4) { --c: var(--green); }
}

/* Gallery empty state: no event photos yet, so the page invites people to send some.
   (When real photos arrive, put .gal-grid / .gal-tile figures back above or in place of this.) */
.gal-empty { max-width: 34em; margin: 0 auto; padding: 0.4em 0 1.8em; text-align: center; }
.gal-empty__icon { display: block; width: 4.4em; height: 4.4em; margin: 0 auto 0.4em; color: var(--purple); }
.gal-empty__title { margin: 0 0 0.35em; font-size: 2em; font-weight: 800; line-height: 1.15; letter-spacing: -0.3px; text-align: center; }
.gal-empty__title span { color: var(--purple); }
.gal-empty__text { margin: 0 auto 1.1em; font-size: 1.2em; font-weight: 600; line-height: 1.4; color: var(--text-bright); text-align: center; }

/* Home page frames: no event photos exist yet, so each frame says one true thing about the service
   (solid brand colors, white text, simple icon). Positions/sizes/tilt are the owner-tuned ones above.
   Text sizes use cqw (the card's own width) with a readable floor, so they scale with the card. */
.polaroid__photo--blue  { background: var(--purple); }
.polaroid__photo--red   { background: var(--red-deep); }
.polaroid__photo--green { background: var(--green-deep); }
.polaroid__photo--navy  { background: var(--blue-deep); }
.polaroid__info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: max(6px, 3.2cqw);
  padding: 6cqw;
  color: #fff;
  text-align: center;
}
.polaroid__icon { width: max(28px, 16cqw); height: max(28px, 16cqw); flex: none; }
.polaroid__title { margin: 0; font-size: max(14px, 9cqw); font-weight: 800; line-height: 1.15; color: #fff; text-align: center; }
.polaroid__text { margin: 0; font-size: max(12px, 6.8cqw); font-weight: 600; line-height: 1.3; color: #fff; text-align: center; }

/* Phone/tablet menu fixes (found in the phone-layout audit): the fixed logo badge sits over the menu's
   top-left corner and was hiding the first link, the panel was see-through (page content and the home
   headline showed through it), and the home headline sat ABOVE the menu. Now: the list starts below the
   logo (badge bottom = 6px + 150px), the panel is solid white, the headline sits under the menu, and
   the panel scrolls if a short phone can't fit all links above the bottom bar. */
.nav__mobile {
  padding-top: 104px;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  max-height: calc(100svh - 138px - var(--safe-top) - var(--safe-bottom));
  overflow-y: auto;
}
@media (max-height: 740px) {
  .nav__mobile { padding-top: 96px; }
  .nav__mobile a { padding-top: 9px; padding-bottom: 9px; }
}
/* Short phones: nine links (Home added) -- tighten the list so Contact isn't pushed below the fold. */
@media (max-height: 680px) {
  .nav__mobile ul { gap: 1px; margin-bottom: 8px; }
  .nav__mobile a { padding-top: 6px; padding-bottom: 6px; }
}
.promo-ribbon { z-index: 800; }

/* Phones: slightly shorter frames so all four (tilted) clear the bottom bar even on short phones
   like 360x740, with the text still fitting inside each panel. */
@media (max-width: 480px) {
  .polaroid__photo { aspect-ratio: 1 / 1.12; }
}

/* Phones, round 2 (from the phone audit): more space between the tilted frames so their corners don't
   touch, more room under the last row so it clears the bottom bar even when a short phone has to scroll,
   and slightly smaller text on tiny (<=340px) phones so nothing is clipped. */
@media (max-width: 480px) {
  .polaroid-wall { gap: 22px 14px; padding-bottom: calc(var(--bottom-bar-h) + 14px); }
}
@media (max-width: 340px) {
  .polaroid__title { font-size: 13px; }
  .polaroid__text { font-size: 11px; }
  .polaroid__icon { width: 22px; height: 22px; }
}
@media (max-width: 480px) {
  .polaroid__info { padding: max(6px, 4.5cqw); }
}
@media (max-width: 340px) {
  .polaroid__photo { aspect-ratio: 4 / 5; } /* tiny phones scroll anyway; give the text the room it needs */
}

/* Phones: a slightly more compact Book Now so it clears the logo beside it (same row as the menu button). */
@media (max-width: 420px) {
  .book-now-fixed { top: calc(18px + var(--safe-top)); height: 36px; padding: 0 16px; font-size: 14px; }
}
@media (max-width: 340px) {
  .brand-badge img { height: 108px; } /* tiny phones: keep the logo clear of the Book Now button beside the menu */
}

/* ONE-SCREEN HOME PAGE (phones): the ribbon, the four frames and the Call Now bar all fit in one
   screen with nothing to scroll (the owner didn't want the fixed ribbon sliding over the frames).
   Everything is sized from the screen HEIGHT (svh) so it holds on tall and short phones alike:
   the ribbon takes the top ~40 percent, the 2x2 frames sit below it, shorter and wider than before. */
@media (max-width: 480px) {
  .promo-ribbon {
    width: clamp(220px, min(46svh, 80vw), 350px);
    top: calc(max(150px, 21.6svh) + var(--safe-top)); /* just below the 150px-tall logo */
  }
  .polaroid-wall {
    max-width: clamp(250px, 50svh, 460px);
    gap: 10px 10px;
    padding: calc(max(47svh, 280px) + var(--safe-top)) 16px calc(var(--bottom-bar-h) + 6px);
  }
  .polaroid--1 { margin-top: 0; }
  .polaroid--2 { margin-top: 8px; }
  .polaroid--3 { margin-top: -4px; }
  .polaroid--4 { margin-top: 4px; }
  .polaroid { padding: 7px; }
  .polaroid__photo { aspect-ratio: 1 / 1; }
  .polaroid__info { gap: 5px; padding: 3.5cqw; }
  .polaroid__icon { width: 22px; height: 22px; }
  .polaroid__title { font-size: max(12.5px, 8.2cqw); }
  .polaroid__text { font-size: max(11px, 6.4cqw); line-height: 1.25; }
}
@media (max-width: 340px) {
  .polaroid__photo { aspect-ratio: 1 / 0.96; }
  .polaroid__title { font-size: 12px; }
  .polaroid__text { font-size: 10.5px; }
  .polaroid__icon { width: 18px; height: 18px; }
}

/* PHONE POLISH (mobile audit, 2026-10-09): touch-friendly sizes and no iOS surprises. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* no font inflation when the phone turns sideways */
a, button, input, select, textarea, label, summary { touch-action: manipulation; } /* no double-tap-zoom delay */
@media (max-width: 768px) {
  /* iOS Safari zooms the whole page in when you tap a field whose text is under 16px */
  .form-group input, .form-group select, .form-group textarea { font-size: 16px; }
  /* thumb-sized tap targets (44px is Apple's minimum) */
  .nav__hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0; }
  .bottom-bar__actions .btn { padding: 12px 26px; font-size: 15px; }
  .book-now-fixed::after { content: ''; position: absolute; inset: -6px -4px; } /* bigger hit area, same look */
  .faq-q { min-height: 44px; display: flex; align-items: center; }
  .pkg__btn { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .btn--white, .btn--ghost-white { min-height: 44px; }
  /* small labels and badges: 12px at the least */
  .setup-step__who, .setup-strip h2, .compare-opt__badge, .compare-band__label, .pkg__badge, .pkg-includes__label { font-size: 12px; }
}
@media (max-width: 480px) {
  .polaroid__text { font-size: max(12px, 6.4cqw); }
}
@media (max-width: 340px) {
  .polaroid__text { font-size: 11px; }
}

/* The big logo shrinks once a phone page is scrolled, so it stops covering the text (the home page doesn't scroll, so it keeps its size there). */
@media (max-width: 700px) {
  .brand-badge img { transition: height .25s var(--ease-out); }
  html.is-scrolled .brand-badge img { height: 64px; }
}

/* SHORT SCREENS (a phone held sideways, or a short browser window): the home page is the only one built from
   fixed-position pieces (ribbon + four frames) and they collided when the screen is under ~520px tall. Here
   the ribbon and frames flow like normal page content instead (the page scrolls), with a smaller logo. */
@media (max-height: 520px) and (min-width: 481px) {
  .brand-badge img { height: 74px; }
  .fit-page { padding-top: calc(100px + var(--safe-top)); } /* the other pages: less empty space above the card */
  .promo-ribbon {
    position: absolute;
    top: 14px; left: 100px;
    width: min(340px, 44vw);
    transform: rotate(-3deg);
  }
  .promo-ribbon__d { display: none !important; }
  .promo-ribbon__m { display: block !important; }
  .promo-ribbon .promo-ribbon__m text { font-size: 28px; stroke-width: 6px; }
  .polaroid-wall {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    padding: 146px 16px calc(var(--bottom-bar-h) + 16px);
  }
  .polaroid { position: relative; left: auto; top: auto; flex: none; width: clamp(140px, 20vw, 200px); margin: 0; z-index: auto; }
  .polaroid--2 { margin-top: 10px; }
  .polaroid--3 { margin-top: -4px; }
  .polaroid--4 { margin-top: 6px; }
  .polaroid { padding: 7px; }
  .polaroid__photo { aspect-ratio: 1 / 0.92; }
  .polaroid__info { gap: 4px; padding: 3.5cqw; }
  .polaroid__icon { width: 22px; height: 22px; }
  .polaroid__title { font-size: max(12.5px, 8.2cqw); }
  .polaroid__text { font-size: max(12px, 6.4cqw); line-height: 1.25; }
}

/* MOBILE VIEW: NO BOTTOM BAR, NO CANNONS (owner request, 2026-10-09). "Mobile view" = a phone held upright
   (<=700px wide) OR sideways (<=500px tall and <=1000px wide). The Call Now bar goes away; its phone number,
   Call Now button, email and Rental Agreement link live at the bottom of the drop-down menu instead. The cannons
   are switched off in main.js with the same media query. */
.nav__mobile-contact { display: none; }
@media (max-width: 700px), (max-height: 500px) and (max-width: 1000px) {
  .bottom-bar { display: none; }
  :root, html.fx-doc { --bottom-bar-h: 0px; }

  /* menu: two columns of links, then a divider and the contact block */
  .nav__mobile ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-bottom: 10px; }
  .nav__mobile-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 12px;
    border-top: 3px solid var(--purple);
  }
  .nav__mobile .nav__mobile-contact .btn--primary { color: #fff; justify-content: center; text-align: center; margin-bottom: 4px; padding: 14px 16px; border-radius: var(--radius-pill); }
  .nav__mobile .nav__mobile-contact .nav__mobile-link { color: var(--purple); font-weight: 700; font-size: 15px; padding: 11px 16px; word-break: break-all; }
}
/* a phone held sideways: the menu is wide and short, so use three columns and lay the contact block out in a row */
@media (max-height: 500px) and (max-width: 1000px) {
  .fit-page { height: auto; overflow: visible; } /* the page scrolls here instead of being fitted to the screen */
  .nav__mobile { padding-top: 84px; max-height: calc(100svh - 76px - var(--safe-top) - var(--safe-bottom)); }
  .nav__mobile ul { grid-template-columns: repeat(3, 1fr); }
  .nav__mobile a { padding-top: 6px; padding-bottom: 6px; }
  .nav__mobile-contact { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .nav__mobile .nav__mobile-contact .btn--primary { margin: 0; padding: 10px 22px; }
  .nav__mobile .nav__mobile-contact .nav__mobile-link { padding: 8px 6px; }
}

/* While the drop-down menu is open the big logo steps aside (it used to sit on top of the menu and force a 104px gap
   above the first link), and the menu starts right under the top buttons. */
@media (max-width: 1229px) {
  .brand-badge { transition: opacity .2s ease, transform .2s ease; }
  html.menu-open .brand-badge { opacity: 0; transform: scale(.85); pointer-events: none; }
  html.menu-open .nav__mobile { padding-top: 14px; max-height: calc(100svh - 84px - var(--safe-top) - var(--safe-bottom)); }
}

/* Drop-down menu: fully rounded corners and a clear blue outline (plus a soft shadow) so it stands apart from the page. */
.nav__mobile {
  border: 3px solid var(--purple);
  border-radius: 30px;
  margin-top: 4px;
  box-shadow: 0 12px 32px rgba(16,36,107,0.22);
}

/* SEO + FORM + MENU TOUCHES (2026-10-09) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* spam-bot trap, never seen by people */
/* menu links: the same blue / red / green, just deep enough to read on white (the old bright green was 2.3:1) */
:root { --nav-green: #00891e; --nav-red: #e11d2d; }
.nav__links li:nth-child(3n+1) a, .nav__mobile li:nth-child(3n+1) a { color: var(--nav-green); }
.nav__links li:nth-child(3n+2) a, .nav__mobile li:nth-child(3n+2) a { color: var(--purple); }
.nav__links li:nth-child(3n)   a, .nav__mobile li:nth-child(3n)   a { color: var(--nav-red); }