/* =====================================================================
   SoCalFun365 - main.css
   Design system: tokens, base, layout, components, animation.
   Mobile-first. Palette is provisional and will be tuned to the logo.
   No build step required; edit variables below to reskin.
   ===================================================================== */

:root {
  /* --- Brand palette (provisional; tune to logo) --- */
  --ink: #16252b;          /* deep ocean charcoal (from logo) */
  --ink-2: #39474d;        /* secondary text */
  --muted: #5b646b;        /* tertiary text (WCAG AA verified 5.6:1 on cream) */
  --paper: #faf6ee;        /* warm sun-kissed sand cream */
  --paper-2: #fffdf8;      /* raised warm surface */
  --card: #ffffff;
  --line: #ebe2d5;         /* warm hairline */

  --primary: #e3a008;      /* SUN GOLD - dominant brand color (logo #c09000) */
  --primary-deep: #7f5804; /* deep bronze-gold for text/icons (WCAG AA 5.9:1 on cream) */
  --primary-soft: #fbeecb; /* light gold tint */
  --accent: #0a98c4;       /* OCEAN BLUE - brand wave (logo #0090c0) */
  --accent-deep: #0a6e8f;  /* accessible ocean blue for white text */
  --grape: #0a6e8f;        /* remapped to deep ocean */
  --teal: #14b3c8;         /* bright aqua pop for confetti */

  /* --- Type --- */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-eyebrow: 0.78rem;
  --fs-small: 0.9rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.15rem, 0.9rem + 1.1vw, 1.4rem);
  --fs-h3: clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem);
  --fs-h2: clamp(1.85rem, 1.35rem + 2.3vw, 3rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 4.3vw, 4.75rem);

  /* --- Space + shape --- */
  --sp-section: clamp(3.5rem, 2rem + 6vw, 7rem);
  --container: 1180px;
  --container-narrow: 760px;
  --radius: 14px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(26, 20, 32, 0.06);
  --shadow: 0 14px 40px -18px rgba(26, 20, 32, 0.28);
  --shadow-lg: 0 30px 70px -30px rgba(26, 20, 32, 0.4);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}

/* --------------------------- Reset / base --------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { text-wrap: pretty; }
::selection { background: var(--primary); color: #fff; }
:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 0.75rem 1.15rem; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* --------------------------- Layout --------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.15rem, 0.6rem + 2.5vw, 2.5rem); }
.section { padding-block: var(--sp-section); }
.section--tint { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }
.narrow { max-width: var(--container-narrow); margin-inline: auto; }
.center { text-align: center; }
[id] { scroll-margin-top: 88px; }

/* Page hero (interior pages) */
.page-hero { position: relative; padding-block: clamp(2.5rem, 1rem + 5vw, 4.5rem) clamp(1.5rem, 0.5rem + 2vw, 2.5rem); overflow: hidden; }
.page-hero__inner { max-width: 760px; }
.page-hero h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem); margin-bottom: 1rem; }
.page-hero .lead { max-width: 60ch; }
.page-hero .hero__cta-row { margin-top: 1.6rem; }
.breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.1rem; }
.breadcrumb a:hover { color: var(--accent-deep); }

/* Checklist */
.checklist { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem 1.6rem; }
.checklist__item { display: flex; gap: 0.85rem; align-items: flex-start; }
.checklist__tick { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-deep); margin-top: 2px; }
.checklist__item strong { display: block; font-family: var(--font-display); font-size: 1.08rem; }
.checklist__item span { color: var(--ink-2); font-size: 0.98rem; }

/* Booth compare */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.compare__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.compare__media { aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--primary-soft), var(--blue-soft, #d7eef6)); overflow: hidden; }
.compare__media picture { display: block; height: 100%; }
.compare__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Full-bleed photo band */
.photo-band { display: flex; gap: 4px; width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--ink); }
.photo-band::-webkit-scrollbar { display: none; }
.photo-band__item { flex: 1 0 auto; }
.photo-band__item picture { display: block; height: 100%; }
.photo-band__img, .photo-band__item img { height: clamp(160px, 20vw, 240px); width: auto; object-fit: cover; display: block; }
@media (max-width: 620px) { .photo-band__img, .photo-band__item img { height: 150px; } }
.compare__body { padding: 1.4rem 1.5rem 1.6rem; }
.compare__body h3 { margin-bottom: 0.5rem; }
.compare__tag { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }

/* Event cards grid */
.event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.event-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.event-card h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.event-card p { color: var(--ink-2); font-size: 0.98rem; }
.event-card__link { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.9rem; font-weight: 700; color: var(--accent-deep); font-size: 0.95rem; }
.event-card--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); }
.event-card--soft { background: var(--paper-2); }
.event-card__badge { position: absolute; top: 1rem; right: 1rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: #fff; background: linear-gradient(135deg, #0a98c4, #0a6e8f); padding: 0.2rem 0.55rem; border-radius: 999px; }

.eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep);
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem;
}
.section--ink .eyebrow { color: var(--accent); }
.section-head { max-width: 52ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head.center { margin-inline: auto; }
.lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.55; }
.section--ink .lead { color: #e8dfe8; }

/* AEO lead answer: the direct 40-60 word answer that opens key sections */
.answer {
  font-size: var(--fs-lead); line-height: 1.6; color: var(--ink);
  border-left: 4px solid var(--accent); padding: 0.35rem 0 0.35rem 1.15rem; margin-bottom: 1.4rem;
}
.section--ink .answer { color: var(--paper); border-color: var(--accent); }

/* --------------------------- Buttons --------------------------- */
.btn {
  --btn-bg: var(--primary); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: 1rem; letter-spacing: 0.005em;
  padding: 0.9rem 1.5rem; border: 0; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease), background 0.2s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn--primary { --btn-bg: var(--primary); --btn-fg: var(--ink); background-image: linear-gradient(135deg, #efab12, #d59206); }
.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--ink); background-image: linear-gradient(135deg, var(--accent), var(--accent-deep)); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border: 2px solid var(--ink); box-shadow: none; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.section--ink .btn--ghost { --btn-fg: var(--paper); border-color: rgba(255,255,255,0.5); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.08rem; }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.9rem; }

/* --------------------------- Header / nav --------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); background: color-mix(in srgb, var(--paper) 92%, transparent); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; }
.logo__img { height: 60px; width: auto; display: block; }
.logo__img--footer { height: 64px; }
@media (max-width: 520px) { .logo__img { height: 50px; } }

.logo { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ink); }
.logo__mark { color: var(--primary); display: inline-flex; }
.logo__accent { color: var(--primary); }
/* Wordmark text beside the cropped sun-and-palms mark */
.logo__word { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.05rem + 0.85vw, 1.7rem); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.logo__word--socal { color: var(--accent-deep); }
.logo__word--365 { color: var(--primary-deep); }
@media (max-width: 380px) { .logo__word { font-size: 1.12rem; } .logo__img { height: 44px; } }
.logo--footer { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.logo--footer .logo__word--socal { color: #fff; }
.logo--footer .logo__word--365 { color: var(--primary); }

.nav { display: flex; align-items: center; }
.nav__menu { display: flex; align-items: center; gap: clamp(0.5rem, 0.1rem + 1vw, 1.4rem); }
.nav__link { font-weight: 600; font-size: 0.98rem; color: var(--ink-2); padding: 0.4rem 0.2rem; position: relative; transition: color 0.2s; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--primary); border-radius: 2px; transition: right 0.28s var(--ease); }
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { right: 0; }
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { right: 0; }
/* flex-shrink:0 + nowrap stop the CTA being the item that compresses when the nav runs
   out of room. Without these the button text wrapped inside the pill (seen 2026-07-26). */
.nav__cta { margin-left: 0.5rem; flex-shrink: 0; white-space: nowrap; }
.nav__menu > .nav__link { flex-shrink: 0; white-space: nowrap; }
.nav__toggle { display: none; }

@media (max-width: 1100px) {
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--card); position: relative; z-index: 120;
  }
  .nav__bars, .nav__bars::before, .nav__bars::after { content: ""; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; }
  .nav__bars::before { position: absolute; transform: translateY(-6px); }
  .nav__bars::after { position: absolute; transform: translateY(6px); }
  .nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
  .nav__toggle[aria-expanded="true"] .nav__bars::before { transform: rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__bars::after { transform: rotate(-45deg); }
  .nav__menu {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px);
    flex-direction: column; align-items: flex-start; gap: 0.4rem;
    background: var(--paper); padding: 5.5rem 1.6rem 2rem; box-shadow: var(--shadow-lg);
    transform: translateX(100%); overflow-y: auto;
    /* visibility:hidden pulls the 8 closed links out of the tab order for keyboard and
       switch users. Delayed 0.34s on close so the slide-out animation still plays. */
    visibility: hidden;
    transition: transform 0.34s var(--ease), visibility 0s linear 0.34s;
  }
  .nav__menu.is-open { transform: translateX(0); visibility: visible; transition: transform 0.34s var(--ease), visibility 0s linear 0s; }
  .nav__link { font-size: 1.25rem; padding: 0.55rem 0; width: 100%; }
  .nav__cta { margin: 0.8rem 0 0; width: 100%; }
  body.nav-open { overflow: hidden; }
  .nav-scrim { position: fixed; inset: 0; background: rgba(26,20,32,0.4); opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 90; }
  .nav-scrim.is-open { opacity: 1; pointer-events: auto; }
}

/* --------------------------- Cards / pills --------------------------- */
.pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-deep); }
.pill--accent { background: #fff2d6; color: var(--accent-deep); }
.pill--grape { background: #ece7ff; color: var(--grape); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.3rem, 1rem + 1vw, 1.9rem); box-shadow: var(--shadow-sm); transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease); height: 100%; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-deep); margin-bottom: 1rem; }
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--ink-2); font-size: 1rem; }

/* Photo variant: real event photo up top, icon + copy below (2026-07-25). */
.card--photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--photo .card__media { aspect-ratio: 4 / 3; background: var(--paper-2); }
.card--photo .card__media-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card--photo .card__body { padding: clamp(1.3rem, 1rem + 1vw, 1.9rem); }

.grid { display: grid; gap: clamp(1rem, 0.6rem + 1.5vw, 1.6rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* --------------------------- Real-texture section treatment --------------------------- */
/* Uses real prop / backdrop photos at low opacity instead of synthetic gradients. */
.texture {
  position: relative; isolation: isolate;
}
.texture::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--texture-img, none);
  background-size: cover; background-position: center;
  opacity: var(--texture-opacity, 0.10); filter: saturate(1.1);
}
.texture--ink::before { mix-blend-mode: luminosity; opacity: 0.14; }

/* --------------------------- CTA band + footer --------------------------- */
.cta-band { background: linear-gradient(135deg, var(--ink), #2c2033); color: var(--paper); padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem); position: relative; overflow: hidden; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.8rem; flex-wrap: wrap; }
.cta-band__title { color: #fff; margin-bottom: 0.4rem; }
.cta-band__sub { color: #e8dfe8; max-width: 44ch; }
.cta-band .eyebrow { color: var(--accent); }

.site-footer { background: var(--ink); color: #cfc4d0; padding-block: clamp(2.75rem, 1.5rem + 3vw, 4rem) 1.5rem; }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1.6fr repeat(3, 1fr); }
.site-footer__brand .logo { margin-bottom: 0.9rem; }
.site-footer__blurb { color: #b7abb9; max-width: 34ch; font-size: 0.98rem; }
.site-footer__social { display: flex; gap: 1rem; margin-top: 1.1rem; }
.site-footer__social a { font-weight: 600; color: var(--accent); }
.site-footer__heading { font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 0.9rem; }
.site-footer__col { display: flex; flex-direction: column; gap: 0.55rem; }
.site-footer__col a { color: #cfc4d0; font-size: 0.98rem; transition: color 0.2s; width: fit-content; }
.site-footer__col a:hover { color: #fff; }
.site-footer__note { color: #9c8fa0; font-size: 0.92rem; }
.site-footer__cta { margin-top: 0.4rem; }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.9rem; color: #9c8fa0; }
.site-footer__legal { display: flex; gap: 1.2rem; }
.site-footer__legal a:hover { color: #fff; }

@media (max-width: 820px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* --------------------------- Floating Book Now --------------------------- */
.book-now {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 95;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff;
  padding: 0.85rem 1.25rem; border-radius: var(--radius-pill); font-weight: 700;
  box-shadow: var(--shadow-lg); transform: translateY(0);
  transition: transform 0.25s var(--ease), box-shadow 0.25s, opacity 0.3s;
}
.book-now:hover { transform: translateY(-3px) scale(1.02); }
.book-now__icon { display: inline-flex; }
.book-now.is-hidden { opacity: 0; pointer-events: none; transform: translateY(120%); }
@media (max-width: 520px) { .book-now__label { display: none; } .book-now { padding: 0.9rem; } }

/* --------------------------- Animation framework --------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-reveal="left"] { transform: translateX(-26px); }
.reveal[data-reveal="right"] { transform: translateX(26px); }
.reveal[data-reveal="scale"] { transform: scale(0.94); }
/* staggered children settle in with slight imperfection */
.stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.stagger.is-visible > * { opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 0.07s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 0.20s; }

/* ---- No-JS / JS-failure safety net (added 2026-07-25, audit SCF-003) ----
   .reveal and .stagger start at opacity:0 and are revealed by main.js. If JS is
   disabled, blocked, or main.js throws before the IntersectionObserver runs, the
   page would render blank, including the quote form. head.html adds .js to <html>
   before first paint, so these rules restore visibility whenever that did not happen. */
html:not(.js) .reveal,
html:not(.js) .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Hero tagline: the brand line demoted from the H1 so the H1 can carry the keyword (SCF-002). */
.hero__tagline {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 600; line-height: 1.25;
  margin: 0.55rem 0 0.5rem; color: var(--paper, #fff); opacity: 0.95;
}
.stagger.is-visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 0.29s; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
}

/* --------------------------- Utilities --------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mt-0 { margin-top: 0; } .flow > * + * { margin-top: 1rem; }
.text-primary { color: var(--primary-deep); }
.section-more { margin-top: 1.7rem; }
.link-more { font-weight: 700; color: var(--primary-deep); border-bottom: 2px solid transparent; transition: border-color 0.2s; }
.link-more:hover { border-color: var(--primary); }

/* =========================== Homepage / shared page components =========================== */

/* Hero */
.hero { position: relative; padding-block: clamp(2.25rem, 0.5rem + 6vw, 5rem) clamp(2.75rem, 1rem + 7vw, 6rem); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.hero__title { font-size: var(--fs-h1); margin-bottom: 1.1rem; }
.hero__hl { color: var(--accent-deep); }
.hero__sub { font-size: var(--fs-lead); color: var(--ink-2); max-width: 50ch; margin-bottom: 1.7rem; }
.hero__cta-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.7rem; }
.hero__trust { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem 1.5rem; font-weight: 600; font-size: 0.95rem; color: var(--ink-2); }
.hero__trust li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__trust svg { color: var(--primary); }
.hero__trust a { border-bottom: 2px solid var(--primary-soft); }
.hero__trust a:hover { border-color: var(--primary); }

.hero__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.confetti { position: absolute; width: 18px; height: 18px; border-radius: 4px; }
.confetti--1 { top: 12%; left: 8%; background: var(--accent); transform: rotate(18deg); }
.confetti--2 { top: 26%; right: 12%; width: 14px; height: 14px; border-radius: 50%; background: var(--grape); }
.confetti--3 { bottom: 18%; left: 16%; width: 22px; height: 10px; border-radius: 5px; background: var(--teal); transform: rotate(-12deg); }
.confetti--4 { top: 58%; right: 22%; width: 12px; height: 12px; background: var(--primary); transform: rotate(30deg); }
.confetti--5 { bottom: 26%; right: 8%; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); }

.hero__strip-wrap { display: flex; justify-content: center; }
.photo-strip-hero { background: #fff; border-radius: 18px; padding: 14px 14px 8px; box-shadow: var(--shadow-lg); width: min(290px, 78%); border: 1px solid var(--line); transform: rotate(-3deg); }
.ps-frame { aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; margin-bottom: 10px; background: linear-gradient(135deg, var(--primary-soft), #fff2d6); display: grid; place-items: center; }
.ps-frame img { width: 100%; height: 100%; object-fit: cover; }
.ps-ph { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.ps-logo { text-align: center; font-family: var(--font-display); font-weight: 700; padding: 3px 0 7px; color: var(--ink); }
.ps-logo .logo__accent { color: var(--primary); }

.hero__collage { position: relative; display: flex; justify-content: center; align-items: center; min-height: 400px; }
.hero__collage picture { display: block; }
.collage-strip { margin: 0; background: #fff; border-radius: 14px; padding: 12px 12px 14px; box-shadow: var(--shadow-lg); transform: rotate(-4deg); z-index: 1; }
.collage-strip img { height: clamp(300px, 38vw, 430px); width: auto; border-radius: 8px; display: block; }
.collage-pola { position: absolute; margin: 0; background: #fff; border-radius: 12px; padding: 9px 9px 12px; box-shadow: var(--shadow); width: clamp(128px, 20vw, 176px); }
.collage-pola img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 7px; display: block; }
.collage-pola--1 { top: -4%; right: 0%; transform: rotate(6deg); z-index: 2; }
.collage-pola--2 { bottom: -6%; left: -2%; transform: rotate(-7deg); z-index: 2; }
.gt-tile picture { display: block; }

@media (max-width: 780px) {
  .hero__inner { grid-template-columns: 1fr; text-align: left; }
  .hero__collage { order: -1; margin-bottom: 1rem; min-height: 340px; }
  .collage-pola { width: clamp(110px, 30vw, 150px); }
}

/* Photo hero: full-bleed image + left-to-right gradient scrim (2026-07-24).
   Add class="photo-hero" alongside .hero or .page-hero. Text stays fully
   legible on the left; the scrim fades to nothing so the photo shows clean
   on the right. Reuses --ink as the scrim color to match .cta-band / .pet-photo-caption. */
.photo-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; }
.photo-hero__bg { position: absolute; inset: 0; z-index: -2; }
/* display:contents makes the <img> a layout child of .photo-hero__bg so its
   height:100% resolves. Without it <picture> stays height:auto, the img renders
   at its own 16:9 height (810px at 1440 wide) inside a ~727px box, overflows the
   bottom, and object-fit/object-position do nothing. That silently cut the bottom
   ~10% off EVERY desktop hero (the 360 platform, guests low in frame). The mobile
   block below already did this; desktop never got it. */
.photo-hero__bg picture { display: contents; }
.photo-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(22,37,43,0.95) 0%, rgba(22,37,43,0.87) 30%, rgba(22,37,43,0.52) 52%, rgba(22,37,43,0.1) 70%, rgba(22,37,43,0) 82%); }
.photo-hero .hero__inner { display: block; max-width: 620px; }
.photo-hero .page-hero__inner { max-width: 640px; }
/* Interior-page photo heroes (Services/About/FAQ/Contact) were sizing purely off
   text content, which left almost no vertical room to see the photo (2026-07-25).
   Give them a real minimum height and center the text block inside it. */
.photo-hero.page-hero { min-height: clamp(420px, 50vw, 620px); display: flex; align-items: center; }
.photo-hero .eyebrow { color: var(--accent); }
.photo-hero h1, .photo-hero .hero__title { color: #fff; }
.photo-hero .hero__hl { color: var(--primary); }
.photo-hero .hero__sub, .photo-hero .lead { color: #e7eaeb; }
.photo-hero .breadcrumb, .photo-hero .breadcrumb a { color: #cfd6d8; }
.photo-hero .hero__trust { color: #e2e5e6; }
.photo-hero .hero__trust a { border-color: rgba(255,255,255,0.4); }
.photo-hero .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,0.65); }
.photo-hero .btn--ghost:hover { background: #fff; color: var(--ink); }
@media (max-width: 780px) {
  /* Mobile restack (2026-07-25): the overlay-on-photo treatment above needed the
     scrim near-opaque right where the eyes land, which hid the photo anyway, and
     it depended on .photo-hero__bg picture stretching to 100% height - which it
     never did (picture defaults to height:auto and nothing overrode it), so the
     img rendered at its own aspect-ratio height instead of filling the box. That
     left a dead gap under the photo (verified live: ~170-345px depending on page).
     Fix: stop overlaying. Photo goes on top at a fixed ratio (full, not cropped-
     looking - side-cropped only, so heads/figures stay intact top to bottom),
     title/lead/CTAs sit below it in normal flow on the page's own background.
     Mirrors the site's own .blog-hero-banner pattern, which never had this bug. */
  .hero.photo-hero, .page-hero.photo-hero {
    display: block; min-height: 0; padding-block: 0; color: var(--ink);
  }
  .photo-hero__bg { position: static; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
  .photo-hero__bg picture { display: contents; }
  .photo-hero__bg img { width: 100%; height: 100%; object-position: center 30%; }
  .photo-hero__scrim { display: none; }
  .photo-hero .hero__inner, .photo-hero .page-hero__inner {
    max-width: none; padding-block: 1.75rem 1.5rem;
  }
  .photo-hero .eyebrow { color: var(--accent-deep); }
  .photo-hero h1, .photo-hero .hero__title { color: var(--ink); }
  .photo-hero .hero__sub, .photo-hero .lead { color: var(--ink-2); }
  .photo-hero .breadcrumb, .photo-hero .breadcrumb a { color: var(--muted); }
  .photo-hero .hero__trust { color: var(--ink-2); }
  .photo-hero .hero__trust a { border-color: var(--primary-soft); }
  .photo-hero .btn--ghost { --btn-fg: var(--ink); border-color: var(--ink); }
  .photo-hero .btn--ghost:hover { background: var(--ink); color: var(--paper); }
}

/* Trust strip */
.trust-strip { border-block: 1px solid var(--line); background: var(--paper-2); padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.trust-strip__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.4rem 1.8rem; }
.trust-strip__item strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); margin-bottom: 0.15rem; }
.trust-strip__item span { color: var(--muted); font-size: 0.94rem; }

/* Steps */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 1.6rem; margin-bottom: 2.5rem; }
.step { position: relative; }
.step__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin-bottom: 0.9rem; box-shadow: var(--shadow-sm); }
.step h3 { margin-bottom: 0.35rem; }
.step p { color: var(--ink-2); font-size: 1rem; }

/* Event pills */
.event-pills { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.event-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.15rem; border-radius: var(--radius-pill); background: var(--card); border: 1px solid var(--line); font-weight: 600; box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease), border-color 0.2s, color 0.2s; }
.event-pill:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary-deep); }
.event-pill--featured { background: linear-gradient(135deg, #0a98c4, #0a6e8f); color: #fff; border-color: transparent; }
.event-pill--featured:hover { color: #fff; }
.event-pill__badge { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; background: #fff; color: var(--grape); padding: 0.12rem 0.5rem; border-radius: 999px; font-weight: 800; }
.event-pill--more { background: transparent; border-style: dashed; color: var(--ink-2); }

/* Gallery teaser (draggable strip) */
.gallery-teaser { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
@media (min-width: 700px) { .gallery-teaser { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .gallery-teaser { grid-template-columns: repeat(4, 1fr); } }
.gallery-teaser.is-grabbing { cursor: grabbing; }
.gallery-teaser::-webkit-scrollbar { height: 8px; }
.gallery-teaser::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 999px; }
.gt-tile { margin: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.gt-ph { display: block; aspect-ratio: 4 / 5; background: linear-gradient(135deg, #d7eef6, #fbeecb); }
.gt-tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; display: block; }
.gt-tile figcaption { padding: 0.85rem 1rem; font-weight: 600; color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; font-size: 0.94rem; background: #fff; }

/* FAQ */
.faq-teaser__wrap { max-width: 840px; }
.faq-teaser { margin-bottom: 0.5rem; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--card); margin-bottom: 0.8rem; box-shadow: var(--shadow-sm); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; font-weight: 600; font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__mark { position: relative; width: 16px; height: 16px; flex: none; }
.faq-item__mark::before, .faq-item__mark::after { content: ""; position: absolute; background: var(--primary); border-radius: 2px; transition: transform 0.25s var(--ease); }
.faq-item__mark::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-item__mark::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item[open] .faq-item__mark::after { transform: scaleY(0); }
.faq-item__body { padding: 0 1.3rem 1.2rem; color: var(--ink-2); }
.faq-item__body p { font-size: 1rem; }

@media (max-width: 620px) {
  .hero__cta-row .btn { flex: 1 1 auto; }
}

/* Split (text + media) */
.split { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(1.6rem, 1rem + 3vw, 3.5rem); align-items: center; }
.split__text h2 { margin-bottom: 0.4rem; }
.split__text p { margin: 0 0 1.1rem; line-height: 1.7; }
.split__text p:last-of-type { margin-bottom: 0; }
.pet-photo-slot { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--primary-soft), #d7eef6); display: grid; place-items: center; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.pet-photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.pet-photo-slot__inner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--accent-deep); font-weight: 600; }
.center-pills { justify-content: center; }
.area-list { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.6rem; }
.section-note { font-size: 1rem; }
@media (max-width: 780px) { .split { grid-template-columns: 1fr; } .split__media { order: -1; } }

/* FAQ groups + generic media slot */
.faq-group { margin-bottom: 2.5rem; }
.faq-group__title { font-size: 1.4rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary-soft); }
.faq-cta { text-align: center; margin-top: 2.75rem; padding: clamp(1.75rem, 1rem + 2vw, 2.75rem); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.faq-cta h2 { margin-bottom: 0.5rem; }
.faq-cta .lead { max-width: 46ch; margin: 0 auto 1.3rem; }
.media-slot { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--primary-soft), #d7eef6); display: grid; place-items: center; color: var(--accent-deep); font-weight: 600; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; text-align: center; padding: 1rem; }
.media-slot picture { display: block; width: 100%; height: 100%; }
.media-slot img { width: 100%; height: 100%; object-fit: cover; }

/* ============================= Contact form ============================= */
.contact-grid { display: grid; grid-template-columns: 1.4fr 0.85fr; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: start; }
.contact-form-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); box-shadow: var(--shadow); }
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field label { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.field .req { color: var(--primary-deep); }
.field .opt { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper-2); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 0.75rem 0.9rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10, 152, 196, 0.16);
}
.contact-form .has-error { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.14); }
.field-error { color: #c0392b; font-size: 0.85rem; min-height: 0; }
.field-error:empty { display: none; }
.cf-turnstile { margin: 0.2rem 0; min-height: 65px; }
.h-captcha { margin: 0.2rem 0; min-height: 65px; }
.contact-submit { align-self: flex-start; margin-top: 0.2rem; }
.form-status { font-weight: 600; font-size: 0.98rem; }
.form-status.is-pending { color: var(--accent-deep); }
.form-status.is-success { color: #1a7a4f; }
.form-status.is-error { color: #c0392b; }
.form-fineprint { font-size: 0.85rem; color: var(--muted); }
.form-fineprint a { color: var(--accent-deep); text-decoration: underline; }

.contact-aside { display: flex; flex-direction: column; gap: 1rem; }
.contact-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.contact-card h2, .contact-card h3 { margin-bottom: 0.4rem; }
.contact-card p { color: var(--ink-2); font-size: 0.98rem; }
.contact-email { display: inline-block; margin-top: 0.5rem; font-weight: 700; font-size: 1.1rem; color: var(--accent-deep); word-break: break-all; }
.contact-email:hover { text-decoration: underline; }
.contact-list { list-style: none; padding: 0; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.contact-list li { position: relative; padding-left: 1.5rem; color: var(--ink-2); font-size: 0.98rem; }
.contact-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.contact-social { display: flex; gap: 1rem; margin-top: 0.8rem; }
.contact-social a { font-weight: 700; color: var(--accent-deep); }
.contact-social a:hover { text-decoration: underline; }

@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } .contact-submit { align-self: stretch; } }

/* ============================= Legal pages ============================= */
.legal-page { max-width: 760px; margin-inline: auto; }
.legal-page h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); margin-top: 2.3rem; margin-bottom: 0.6rem; }
.legal-page > .reveal:first-child h2, .legal-page h2:first-of-type { margin-top: 0; }
.legal-page p { margin-bottom: 1rem; color: var(--ink-2); }
.legal-page ul { margin: 0 0 1.2rem 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; color: var(--ink-2); }
.legal-page li { padding-left: 0.3rem; }
.legal-page a { color: var(--accent-deep); text-decoration: underline; }
.legal-page strong { color: var(--ink); }

/* ============================= Gallery ============================= */
.booth-strip-outer { background: var(--ink); border-radius: var(--radius-lg); padding: clamp(1rem, 0.5rem + 1.5vw, 1.6rem); box-shadow: var(--shadow); }
.booth-strip { display: flex; gap: 12px; overflow-x: auto; padding: 0.4rem 0.2rem; scroll-snap-type: x mandatory; cursor: grab; scrollbar-width: thin; }
.booth-strip.is-grabbing { cursor: grabbing; }
.booth-strip::-webkit-scrollbar { height: 8px; }
.booth-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 999px; }
.booth-frame { flex: 0 0 auto; width: auto; margin: 0; background: #fff; border-radius: 10px; padding: 9px 9px 16px; box-shadow: var(--shadow); scroll-snap-align: center; }
.booth-frame:nth-child(odd) { transform: rotate(-1.5deg); }
.booth-frame:nth-child(even) { transform: rotate(1.5deg); }
.booth-frame picture { display: block; }
.booth-frame img { height: clamp(240px, 44vw, 330px); width: auto; border-radius: 6px; display: block; }
.booth-strip__hint { color: #cfc4d0; font-size: 0.85rem; margin-top: 0.7rem; text-align: right; }

.gallery-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.gallery-filter { padding: 0.5rem 1rem; border-radius: var(--radius-pill); border: 1.5px solid var(--line); background: var(--card); font-weight: 600; font-size: 0.92rem; color: var(--ink-2); transition: border-color 0.2s, color 0.2s, background 0.2s; }
.gallery-filter:hover { border-color: var(--accent); color: var(--accent-deep); }
.gallery-filter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Masonry gallery: uncropped, no horizontal scroll, reflows on filter. */
.gallery-grid { column-count: 2; column-gap: 0.9rem; }
@media (min-width: 640px) { .gallery-grid { column-count: 3; } }
@media (min-width: 980px) { .gallery-grid { column-count: 4; } }
.gallery-grid .g-tile { break-inside: avoid; margin: 0 0 0.9rem; width: 100%; }
.g-tile { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; border: 1px solid var(--line); position: relative; transition: transform 0.25s var(--ease); }
.g-tile:hover { transform: translateY(-3px); }
.g-tile.is-hidden { display: none; }
.g-tile__ph { display: block; aspect-ratio: 1 / 1; background: linear-gradient(135deg, var(--primary-soft), #d7eef6); }
.g-tile picture { display: block; }
.g-tile img, .g-tile video { width: 100%; height: auto; max-height: 460px; object-fit: cover; object-position: top center; display: block; background: #f3eee4; }
.g-tile figcaption { position: absolute; left: 0.6rem; bottom: 0.6rem; z-index: 2; }
.gallery-note { margin-top: 1.5rem; color: var(--muted); }

/* Video loops */
.video-row { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.video-tile { margin: 0; flex: 1 1 300px; max-width: 430px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); background: #000; }
.video-tile video { width: 100%; height: auto; display: block; }
.gt-tile--video video, .gt-tile__v { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; display: block; background: #000; }

/* Horizontal scroller arrows (click to see more) */
.scroller-wrap { position: relative; }
.scroll-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 46px; height: 46px; border-radius: 50%; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; transition: opacity 0.2s var(--ease), background 0.2s, color 0.2s, transform 0.15s; }
.scroll-arrow:hover { background: var(--primary); border-color: var(--primary); color: var(--ink); transform: translateY(-50%) scale(1.06); }
.scroll-arrow--prev { left: -8px; }
.scroll-arrow--next { right: -8px; }
.scroll-arrow.is-hidden { opacity: 0; pointer-events: none; }
@media (max-width: 620px) { .scroll-arrow { width: 40px; height: 40px; } .scroll-arrow--prev { left: 2px; } .scroll-arrow--next { right: 2px; } }

/* ============================= Photobooth prop decorations ============================= */
/* Subtle grey outlined props scattered behind content on every page (replaces the dot motif). */
body { position: relative; }
.confetti { display: none !important; }           /* retire the old confetti dots */
.prop-decor { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.prop-decor__item { position: absolute; display: block; color: #b7ac97; opacity: 0.5; }
.prop-decor__item svg { display: block; width: 100%; height: auto; }
.section--ink .prop-decor__item, .cta-band .prop-decor__item { color: #ffffff; opacity: 0.06; }
@media (max-width: 640px) {
  .prop-decor__item { opacity: 0.4; }
  .prop-decor__item[data-hide-mobile] { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .prop-decor__item { transition: opacity 0.6s var(--ease); }
}

/* ============================= Lightbox (click to enlarge) ============================= */
.lb-trigger { cursor: zoom-in; }
/* hover affordance on gallery media */
.g-tile, .booth-frame, .video-tile, .gt-tile { position: relative; }
.g-tile .lb-hint, .booth-frame .lb-hint, .video-tile .lb-hint, .gt-tile .lb-hint {
  position: absolute; top: 0.55rem; right: 0.55rem; z-index: 3; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(22,37,43,0.55); color: #fff; display: grid; place-items: center;
  opacity: 0; transform: scale(0.85); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); pointer-events: none;
}
.g-tile:hover .lb-hint, .booth-frame:hover .lb-hint, .video-tile:hover .lb-hint, .gt-tile:hover .lb-hint { opacity: 1; transform: scale(1); }
.video-tile .lb-hint, .gt-tile--video .lb-hint { background: rgba(22,37,43,0.72); }
@media (hover: none) { .lb-hint { opacity: 0.9 !important; } }

.lightbox { position: fixed; inset: 0; z-index: 200; display: none; }
.lightbox.is-open { display: block; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(12,10,14,0.9); backdrop-filter: blur(5px); animation: lb-fade 0.25s var(--ease); }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__stage { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(3.2rem, 8vw, 5rem) clamp(0.75rem, 6vw, 4.5rem); }
.lightbox__media { max-width: min(94vw, 1200px); max-height: 84vh; border-radius: 12px; box-shadow: var(--shadow-lg); display: block; background: #000; animation: lb-pop 0.28s var(--ease); }
img.lightbox__media { object-fit: contain; width: auto; height: auto; }
video.lightbox__media { width: auto; height: auto; }
@keyframes lb-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.lightbox__caption { position: absolute; left: 0; right: 0; bottom: max(0.9rem, env(safe-area-inset-bottom)); margin: 0 auto; max-width: 70ch; text-align: center; color: #f4eee6; font-size: 0.95rem; padding: 0 3.5rem; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.lightbox__count { position: absolute; top: clamp(0.8rem,2vw,1.4rem); left: clamp(0.8rem,2vw,1.4rem); z-index: 3; color: #f4eee6; font-size: 0.9rem; font-weight: 600; background: rgba(0,0,0,0.35); padding: 0.3rem 0.75rem; border-radius: 999px; }
.lightbox__btn { position: absolute; z-index: 3; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.16); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background 0.2s var(--ease), transform 0.15s var(--ease); }
.lightbox__btn:hover { background: rgba(255,255,255,0.32); }
.lightbox__close { top: clamp(0.8rem,2vw,1.4rem); right: clamp(0.8rem,2vw,1.4rem); }
.lightbox__close:hover { transform: scale(1.08) rotate(90deg); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav:hover { transform: translateY(-50%) scale(1.08); }
.lightbox__nav--prev { left: clamp(0.5rem,2vw,1.6rem); }
.lightbox__nav--next { right: clamp(0.5rem,2vw,1.6rem); }
.lightbox__nav[hidden] { display: none; }
@media (max-width: 620px) {
  .lightbox__btn { width: 44px; height: 44px; }
  .lightbox__caption { font-size: 0.85rem; padding: 0 1rem; }
  .lightbox__stage { padding: 4rem 0.5rem 3.5rem; }
}
body.lb-open { overflow: hidden; }

/* ============================= Thank-you page ============================= */
.thankyou-check { display: inline-grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-deep); margin-bottom: 1.2rem; box-shadow: var(--shadow-sm); }
.thankyou-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.thankyou-cards .card h3 { margin-bottom: 0.4rem; }
@media (max-width: 620px) { .thankyou-cards { grid-template-columns: 1fr; } }

/* Mobile drawer hardening. The header's backdrop-filter establishes a containing block +
   stacking context that lets the homepage hero collage composite over the fixed drawer.
   While the drawer is open, suppress parallax transforms and hide the decorative collage
   so nothing bleeds over the menu. Scrim stays at z-index 90 (below the header's 100). */
body.nav-open [data-parallax] { transform: none !important; }
body.nav-open .hero__collage { visibility: hidden; }
/* The blur made the header a containing block for the fixed drawer, clipping it to header
   height and hiding the lower links. Drop it where the drawer is used so the drawer fills
   the viewport. The header keeps its (near-opaque) background + sticky z-index stacking. */
@media (max-width: 1100px) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--paper) 94%, transparent); }
  .site-header.is-stuck { background: var(--paper); }
}

/* =====================================================================
   Blog + pet concept images + CTA button emphasis (appended)
   Uses existing design tokens so everything stays on-system.
   ===================================================================== */

/* --- Primary CTA: more presence and a clearer invitation --- */
.btn--primary { box-shadow: 0 10px 24px -8px rgba(227, 160, 8, 0.55), 0 2px 6px rgba(22, 37, 43, 0.12); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -10px rgba(227, 160, 8, 0.62), 0 5px 12px rgba(22, 37, 43, 0.16); }
.btn--primary:active { transform: translateY(-1px); }

/* --- Blog article --- */
.article-meta { color: var(--muted); font-size: var(--fs-small); margin-bottom: 1.2rem; }
.article-body > h2 { font-family: var(--font-display); font-size: var(--fs-h3); margin: 2rem 0 0.6rem; }
.article-body > h3 { font-family: var(--font-display); margin: 1.4rem 0 0.4rem; }
.article-body > p { margin: 0 0 1rem; line-height: 1.75; }
.article-body ul, .article-body ol { margin: 0 0 1.2rem 1.25rem; }
.article-body li { margin: 0.4rem 0; line-height: 1.6; }
.article-body a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--primary-deep); }
.article-body strong { color: var(--ink); }

/* comparison tables */
.article-body table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: 0.98rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.article-body th, .article-body td { padding: 0.7rem 0.85rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-body thead th { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); font-family: var(--font-body); font-size: 0.95rem; }
.article-body tbody td:first-child { background: var(--primary-soft); font-weight: 600; }

/* Comparison tables on standalone pages (360 / photo booth / city pages, 2026-07-25).
   Mirrors .article-body table so the two look identical. .table-wrap keeps it scrollable
   on narrow screens instead of forcing horizontal page overflow. */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; min-width: 520px; border-collapse: collapse; margin: 1.4rem 0; font-size: 0.98rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.compare-table th, .compare-table td { padding: 0.7rem 0.85rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare-table thead th { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); font-family: var(--font-body); font-size: 0.95rem; }
.compare-table tbody th[scope="row"] { background: var(--primary-soft); font-weight: 600; }

/* inline CTA */
.article-cta { margin: 2.4rem 0 1.6rem; padding: clamp(1.4rem, 1rem + 2vw, 2rem); background: linear-gradient(135deg, var(--primary-soft), #eaf6fb); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.article-cta .eyebrow { margin-bottom: 0.5rem; }
.article-cta__body { font-size: var(--fs-lead); color: var(--ink); margin-bottom: 1.1rem; line-height: 1.5; }

/* related links */
.article-related { margin: 2rem 0 0; padding: 1.2rem 1.4rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); }
.article-related h2 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.article-related ul { margin: 0; padding-left: 1.1rem; }
.article-related li { margin: 0.3rem 0; }
.article-related a { color: var(--accent-deep); }

/* --- Blog index cards (extends .card) --- */
.blog-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 0; overflow: hidden; }
.blog-card__media { aspect-ratio: 16 / 10; background: var(--paper-2); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.3rem, 1rem + 1vw, 1.9rem); }
.blog-card__tag { align-self: flex-start; background: var(--primary-soft); color: var(--primary-deep); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 0.8rem; }
.blog-card h3 { font-size: 1.15rem; margin-bottom: 0.4rem; line-height: 1.25; }
.blog-card p { color: var(--ink-2); font-size: 0.98rem; flex: 1; }
.blog-card__more { color: var(--accent-deep); font-weight: 700; margin-top: 0.9rem; font-size: 0.95rem; }
.blog-card:hover .blog-card__more { text-decoration: underline; }

/* --- Pet page: hero image caption + concept gallery --- */
.pet-photo-slot--filled { margin: 0; padding: 0; position: relative; }
.pet-photo-caption { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(22, 37, 43, 0.85), rgba(22, 37, 43, 0)); color: #fff; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.35; padding: 2.4rem 1.1rem 1rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.concept-note { font-family: var(--font-body); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: var(--radius-pill); padding: 2px 9px; font-weight: 600; }
.pet-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1rem, 0.6rem + 1.5vw, 1.6rem); }
.pet-gallery__item { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); background: var(--card); }
.pet-gallery__item img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.pet-gallery__item figcaption { padding: 0.7rem 1rem; color: var(--ink-2); font-size: 0.92rem; }
.concept-disclaimer { color: var(--muted); font-size: var(--fs-small); margin-top: 1rem; font-style: italic; }

/* --- About: tilted owner photo frames --- */
.owner-photos { position: relative; min-height: 440px; }
.owner-frame { position: absolute; margin: 0; width: 64%; background: #fff; padding: 12px 12px 46px; border-radius: 4px; box-shadow: var(--shadow); transition: transform .3s var(--ease); }
.owner-frame img { width: 100%; height: auto; display: block; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; }
.owner-frame figcaption { text-align: center; font-family: var(--font-display); color: var(--ink-2); font-size: .95rem; padding-top: 10px; }
.owner-frame::before { content: ""; position: absolute; top: -11px; left: 50%; width: 84px; height: 26px; transform: translateX(-50%) rotate(-4deg); background: rgba(227,160,8,.32); border: 1px solid rgba(227,160,8,.28); border-radius: 2px; }
.owner-frame--1 { top: 0; right: -10%; transform: rotate(8deg); z-index: 2; }
.owner-frame--2 { bottom: 0; left: 0; transform: rotate(-12deg); z-index: 1; }
.owner-frame--1:hover { transform: rotate(3deg) scale(1.03); z-index: 3; }
.owner-frame--2:hover { transform: rotate(-4deg) scale(1.03); z-index: 3; }
@media (max-width: 780px) { .owner-photos { min-height: 0; display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; padding: 1rem 0; } .owner-frame { position: static; width: 78%; } .owner-frame--1 { transform: rotate(5deg);} .owner-frame--2 { transform: rotate(-6deg);} }

/* --- Blog hero banner (renders when an article sets heroImage) --- */
.blog-hero-banner { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.blog-hero-banner img { width: 100%; height: auto; display: block; aspect-ratio: 16/7; object-fit: cover; }


/* ===================== Clip/photo teaser tiles: overlaid caption (option E, s9) =====================
   Was: a solid white caption bar BELOW the media, with the media forced to aspect-ratio 4/5 and
   object-fit:cover anchored to the top. Both clip aspect ratios in use (0.744 and 0.561) are
   narrower than 0.800, so every clip lost its bottom edge - which is exactly where the booth burns
   in the event name ("Maria & Ventura", "Cora's Bat Mitzvah") and where its frame border sits.
   Now: caption is overlaid at the TOP behind a downward gradient, and video is contained rather
   than cropped. The caption sits at the top on purpose: the bottom of every clip carries the
   booth's own burned-in text, so a bottom-anchored caption collides with it.
   Photos keep object-fit:cover - they have no critical edge content and cropping reads as normal.
   The dark tile background is invisible behind a cover-fitted photo and forms the letterbox
   framing behind a contained clip. */
.gt-tile { background: #0c1418; }
.gt-tile figcaption {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  padding: 0.8rem 2.6rem 2.4rem 0.9rem;   /* right padding clears the .lb-hint button */
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  background: linear-gradient(to bottom,
    rgba(12,20,24,0.95) 0%, rgba(12,20,24,0.82) 32%, rgba(12,20,24,0.40) 66%, rgba(12,20,24,0) 100%);
}
.gt-tile figcaption .pill, .gt-tile figcaption .pill--accent {
  background: rgba(255,255,255,0.16); color: #fff; text-shadow: none;
}
.gt-tile--video video, .gt-tile__v { object-fit: contain; background: #0c1418; }