/* ─────────────────────────────────────────────────────────────────────────
   BookSesh Instant Partner Sites — template: atelier-light
   Phase 0 spike. Mobile-first. ~14 KB minified target.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --col-bg:        #FAF7F2;
  --col-bg-alt:    #F1ECE3;
  --col-ink:       #1F1B17;
  --col-ink-soft:  #4A443D;
  --col-muted:     #837A6E;
  --col-line:      #E5DECE;
  --col-accent:    #B8946A;
  --col-accent-hi: #9C7A50;
  --col-white:     #FFFFFF;

  --font-serif: 'Fraunces', ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-sans:  'Inter',   ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-display: clamp(2.5rem, 6vw + 0.5rem, 5rem);
  --t-h1:      clamp(2rem,   4.5vw + 0.5rem, 3.6rem);
  --t-h2:      clamp(1.5rem, 2.4vw + 0.5rem, 2.2rem);
  --t-h3:      clamp(1.125rem, 0.8vw + 0.9rem, 1.4rem);
  --t-lede:    clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-eyebrow: 0.75rem;

  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.25rem;
  --sp-5: 3.5rem;
  --sp-6: 5.5rem;
  --sp-7: 8rem;

  --max-w-text:   62ch;
  --max-w-prose:  720px;
  --max-w-wide:   1180px;

  --rad: 4px;
  --shadow-soft: 0 1px 2px rgba(31, 27, 23, 0.04), 0 8px 24px rgba(31, 27, 23, 0.06);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--col-bg);
  color: var(--col-ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a {
  color: var(--col-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--col-line);
  transition: border-color .2s ease, color .2s ease;
}
a:hover { border-color: var(--col-accent); color: var(--col-accent-hi); }
button { font: inherit; cursor: pointer; }

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, .display {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}
.display      { font-size: var(--t-display); line-height: 1.05; letter-spacing: -0.02em; }
h1            { font-size: var(--t-h1); }
h2            { font-size: var(--t-h2); }
h3            { font-size: var(--t-h3); }
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--col-muted);
  font-weight: 500;
}
.lede { font-size: var(--t-lede); color: var(--col-ink-soft); line-height: 1.55; }
p { margin: 0 0 1em; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.wrap     { width: 100%; max-width: var(--max-w-wide); margin: 0 auto; padding: 0 1.25rem; }
.wrap-md  { width: 100%; max-width: var(--max-w-prose); margin: 0 auto; padding: 0 1.25rem; }
.section  { padding: var(--sp-6) 0; }
.section-tight { padding: var(--sp-5) 0; }

/* ── Nav ───────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--col-bg) 90%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.nav.is-scrolled { border-bottom-color: var(--col-line); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 80px;
}
.nav-brand {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  border-bottom: none;
}
/* Sarah's-Studio horizontal nav — flat ul.nav-list, centered between brand and Book button */
.nav-list {
  display: none;
  gap: 2rem;
  list-style: none; margin: 0; padding: 0;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.nav-list li { list-style: none; }
.nav-list a {
  position: relative;
  border-bottom: none;
  font-size: 0.9375rem;
  color: var(--col-ink-soft);
  white-space: nowrap;
  padding-bottom: 0.35rem;
  transition: color .2s ease;
}
.nav-list a:hover { color: var(--col-accent-hi); }
/* Owner polish (2026-09-20): Salient-style animated underline hover -- thin bar in the
   tenant accent colour, grows left-to-right on hover/focus, persists on .is-active if
   the template ever tracks a current section for the top nav. Mobile menu (.mobile-menu-list)
   is a separate element tree and is untouched by this rule. */
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--col-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.nav-list a:hover::after,
.nav-list a:focus-visible::after,
.nav-list a.is-active::after { transform: scaleX(1); }
.nav-cta {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem 1.05rem;
  border: 1px solid var(--col-ink);
  border-radius: 999px;
  background: var(--col-ink); color: var(--col-bg);
  font-size: 0.875rem; font-weight: 500;
  border-bottom: 1px solid var(--col-ink);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.nav-cta:hover { background: var(--col-accent-hi); border-color: var(--col-accent-hi); color: var(--col-white); }
@media (min-width: 720px) {
  .nav-list { display: flex; }
  /* Owner polish (2026-09-20): desktop-only 20px nav link size; mobile menu (.mobile-menu-list)
     is unaffected -- it lives outside this breakpoint's scope entirely. */
  .nav-list a { font-size: 20px; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  padding: var(--sp-5) 0 var(--sp-6);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; gap: var(--sp-5); align-items: center; }
}
.hero-text   { max-width: 36rem; }
.hero-eyebrow { margin-bottom: 1rem; display: inline-block; }
.hero-headline {
  font-size: var(--t-display);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 1.25rem;
}
.hero-sub  { color: var(--col-ink-soft); font-size: var(--t-lede); margin: 0 0 2rem; max-width: 32rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-image {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--col-bg-alt);
  border-radius: var(--rad);
  overflow: hidden;
  /* Stronger drop shadow — premium "lifted" feel on the top-right featured image */
  box-shadow:
    0 1px 2px rgba(31, 27, 23, 0.08),
    0 12px 24px rgba(31, 27, 23, 0.10),
    0 32px 64px -16px rgba(31, 27, 23, 0.18);
}
.hero-image img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ── Hero featured image: STATIC (owner decision 2026-09-20) ────────────── */
/* The Ken Burns slow-zoom (.kenburns img animation + @keyframes kenburns)
   was removed entirely: it failed owner acceptance twice — a load "shake"
   (fill-mode jump, then a compounding data-reveal slide, both fixed earlier
   this date) and finally residual pixel shimmer on real hardware at 80%
   browser zoom despite mathematically smooth computed transforms. Owner
   standing rule: slow subtle zoom ONLY if smoothness is guaranteed,
   otherwise static. Nothing else used the kenburns keyframes, so they were
   deleted as dead code. The hero image now renders its final framing from
   the first frame (plain object-fit cover, no transform animation), and the
   prefers-reduced-motion path is identical by construction. */

/* ── Fade-up reveal on scroll ───────────────────────────────────────────── */
/* site-reveal-googlebot 2026-10-28: progressive enhancement. Content is
   VISIBLE by default (no JS, crawlers such as Googlebot, a failed or blocked
   script). Elements are hidden only while <html> carries .js-reveal (set by
   the inline head flag in page.php, which skips bots / reduced motion / no
   IntersectionObserver and drops itself after 3 s if script.js never ran)
   AND script.js has not yet revealed them. .reveal-done = final state with
   no transition (set ~1.1 s after a reveal, or at once by the fallbacks). */
html.js-reveal [data-reveal] {
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
html.js-reveal [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-reveal].reveal-done {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  html.js-reveal [data-reveal],
  html.js-reveal [data-reveal]:not(.is-visible) { opacity: 1; transform: none; transition: none; }
}
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 1.5rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-primary {
  background: var(--col-ink);
  color: var(--col-bg);
  border-color: var(--col-ink);
}
.btn-primary:hover { background: var(--col-accent-hi); border-color: var(--col-accent-hi); color: var(--col-white); transform: translateY(-1px); }
.btn-ghost {
  background: transparent; color: var(--col-ink);
  border-color: var(--col-line);
}
.btn-ghost:hover { border-color: var(--col-ink); color: var(--col-ink); }

/* ── Intro ─────────────────────────────────────────────────────────────── */
.intro {
  background: var(--col-bg);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--col-line);
}
.intro-inner { max-width: var(--max-w-text); }
.intro-headline { font-size: var(--t-h1); margin: 0 0 1.5rem; }
.intro-body { font-size: var(--t-lede); color: var(--col-ink-soft); }

/* ── Services ──────────────────────────────────────────────────────────── */
.services { background: var(--col-bg-alt); padding: var(--sp-6) 0; }
.services-head {
  display: grid; gap: 1rem;
  margin-bottom: var(--sp-5);
  max-width: var(--max-w-prose);
}
.services-head h2 { font-size: var(--t-h1); }
.services-head p  { color: var(--col-ink-soft); font-size: var(--t-lede); margin: 0; }
.services-list {
  display: grid;
  gap: var(--sp-2);
}
.service-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: var(--sp-3);
  background: var(--col-white);
  border-radius: var(--rad);
  border: 1px solid var(--col-line);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.service-card:hover {
  border-color: var(--col-accent);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -16px rgba(31, 27, 23, 0.18);
}

/* Mobile elevation — at small widths cards read flat/borderless with no
   hover state to reveal depth. Give them a permanent, subtle lift instead
   (reuses the existing --shadow-soft token). CSS-only, no layout change. */
@media (max-width: 639px) {
  .service-card { box-shadow: var(--shadow-soft); }
}

/* Service card with image — premium stacked layout
   (image on top, text + price-and-book below). Same shape at every viewport,
   just denser/sparser depending on grid columns. */
.service-card.has-image {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.service-card.has-image .service-image {
  aspect-ratio: 16 / 11;
  background: var(--col-bg-alt);
  overflow: hidden;
}
.service-card.has-image .service-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.service-card.has-image:hover .service-image img { transform: scale(1.045); }
.service-card.has-image .service-main {
  padding: 1.25rem var(--sp-3) 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.service-card.has-image .service-action {
  padding: .5rem var(--sp-3) 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  border-top: 0;
}

/* At 720px and up, text-only cards keep the existing horizontal layout */
@media (min-width: 720px) {
  .service-card:not(.has-image) {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 1.75rem var(--sp-3);
    gap: var(--sp-3);
  }
}

/* Services list — TWO columns at tablet+. No :has() (compat).
   Consistent 2-per-row keeps the section disciplined. */
@media (min-width: 640px) {
  .services-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  /* Orphan-card rule — when a category has an odd count (1, 3, 5, 7 ...),
     the last card has no pair. Span it across both columns AND switch it to
     image-LEFT layout so it reads as a deliberate "feature card" rather
     than an unfinished grid cell. Premium variation, not a layout bug. */
  .services-list .service-card.has-image:nth-child(odd):last-child {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .services-list .service-card.has-image:nth-child(odd):last-child .service-image {
    flex: 0 0 38%;
    max-width: 380px;
    aspect-ratio: auto;
    min-height: 220px;
  }
  .services-list .service-card.has-image:nth-child(odd):last-child .service-main {
    padding: 1.5rem var(--sp-3) .5rem;
    flex: 1;
  }
  .services-list .service-card.has-image:nth-child(odd):last-child .service-action {
    padding: 0 var(--sp-3) 1.5rem;
  }
}
.service-main { display: flex; flex-direction: column; gap: .35rem; }
.service-cat  { font-family: var(--font-sans); font-size: var(--t-eyebrow); color: var(--col-muted); letter-spacing: 0.12em; text-transform: uppercase; }
.service-name { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 400; letter-spacing: -0.005em; line-height: 1.2; }
.service-blurb { color: var(--col-ink-soft); font-size: 0.9375rem; line-height: 1.55; margin-top: .35rem; max-width: 50ch; }
.service-meta {
  display: flex; align-items: center; gap: 1.25rem;
  font-size: .875rem; color: var(--col-muted); margin-top: .5rem;
}
.service-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.service-action {
  display: flex; align-items: center; gap: 1.25rem;
  justify-content: space-between;
}
.service-price {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.service-book {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  background: var(--col-ink); color: var(--col-bg);
  border-bottom: none;
  font-size: 0.875rem;
}
.service-book:hover { background: var(--col-accent-hi); color: var(--col-white); }

/* ── About ─────────────────────────────────────────────────────────────── */
.about { padding: var(--sp-6) 0; }
.about-inner { max-width: var(--max-w-text); }
.about h2 { margin: 0 0 1.25rem; font-size: var(--t-h1); }
.about p  { color: var(--col-ink-soft); font-size: var(--t-lede); }

/* About section with portrait — image-on-top mobile, image-left desktop */
.about.has-portrait .about-inner {
  max-width: var(--max-w-wide);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.about.has-portrait .about-portrait {
  aspect-ratio: 4 / 5;
  max-width: 420px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--rad);
  background: var(--col-bg-alt);
  box-shadow:
    0 1px 2px rgba(31, 27, 23, 0.06),
    0 12px 24px -8px rgba(31, 27, 23, 0.12),
    0 32px 64px -24px rgba(31, 27, 23, 0.18);
}
.about.has-portrait .about-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.about.has-portrait .about-copy { max-width: var(--max-w-text); }

@media (min-width: 820px) {
  .about.has-portrait .about-inner {
    grid-template-columns: 420px 1fr;
    gap: var(--sp-5);
    align-items: center;
  }
  .about.has-portrait .about-portrait { margin: 0; }
}

/* ── Location ──────────────────────────────────────────────────────────── */
.location {
  background: var(--col-ink);
  color: var(--col-bg);
  padding: var(--sp-6) 0;
}
.location h2 { color: var(--col-bg); font-size: var(--t-h1); margin: 0 0 1rem; }
.location-addr {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin: 0 0 1rem;
  color: var(--col-bg);
}
.location-note { color: color-mix(in srgb, var(--col-bg) 80%, transparent); font-size: var(--t-body); margin: 0 0 1.5rem; }
.location a {
  color: var(--col-bg); border-color: color-mix(in srgb, var(--col-bg) 30%, transparent);
}
.location a:hover { border-color: var(--col-accent); color: var(--col-bg); }

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact { padding: var(--sp-6) 0; background: var(--col-bg); }
.contact-inner { max-width: var(--max-w-text); }
.contact h2 { margin: 0 0 1rem; font-size: var(--t-h1); }
.contact p  { color: var(--col-ink-soft); font-size: var(--t-lede); }
.contact-cta { margin-top: 1.5rem; display: inline-flex; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer {
  background: var(--col-bg-alt);
  padding: var(--sp-5) 0 calc(var(--sp-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--col-line);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  align-items: flex-start;
}
@media (min-width: 720px) {
  .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ── Sticky mobile booking CTA ─────────────────────────────────────────── */
.book-stuck {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--col-bg) 96%, transparent);
  border-top: 1px solid var(--col-line);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  display: flex; justify-content: center;
}
.book-stuck .btn { width: 100%; max-width: 30rem; justify-content: center; }
@media (min-width: 980px) { .book-stuck { display: none; } }

/* ── Booking modal (iframe to /partners) ──────────────────────────────── */
/* Sits ABOVE the mobile menu (z-index 60) so the menu can never visually
   trap the booking iframe on small screens. */
.book-modal {
  position: fixed; inset: 0; z-index: 70;
  display: none;
  background: color-mix(in srgb, var(--col-ink) 70%, transparent);
}
.book-modal.is-open { display: flex; }
.book-modal-card {
  margin: auto;
  width: min(100%, 980px);
  height: min(100%, 86vh);
  background: var(--col-bg);
  border-radius: var(--rad);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
}
.book-modal-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--col-line);
  background: var(--col-bg);
}
.book-modal-bar strong { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 400; }
.book-modal-close {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--col-ink);
}
.book-modal-close:hover { background: var(--col-bg-alt); }
.book-modal-frame { flex: 1; width: 100%; border: 0; background: var(--col-bg); }

/* ── Accessibility ─────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--col-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
  html { scroll-behavior: auto; }
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
  .nav, .book-stuck, .book-modal { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ─────────────────────────────────────────────────────────────────────────
   atelier-light — Phase 0 review additions
   - Logo in nav, hamburger menu, mobile menu overlay
   - Service category groups
   - Gallery carousel + dot nav
   - What's On list
   - Contact form
   - Action bar (sticky mobile CTAs)
   - Footer attribution + referral
   ───────────────────────────────────────────────────────────────────────── */

/* Nav additions */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.nav-logo {
  width: 48px; height: 48px;
  object-fit: contain;
  background: transparent;
  /* No rounding — many partner logos have transparent backgrounds and
     designed wordmarks that we don't want clipped to a circle. */
}
.nav-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: -0.005em;
}
.nav-actions {
  display: inline-flex; align-items: center; gap: .6rem;
}
.nav-burger {
  appearance: none; background: transparent; border: 0;
  width: 40px; height: 40px;
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 5px; padding: 8px;
  cursor: pointer; border-radius: 999px;
}
.nav-burger span {
  display: block; height: 2px; background: var(--col-ink);
  border-radius: 2px;
}
.nav-burger:hover { background: var(--col-bg-alt); }
@media (min-width: 720px) {
  .nav-burger { display: none; }
}
@media (max-width: 719px) {
  .nav-list { display: none; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--col-ink) 60%, transparent);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu-card {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(85vw, 360px);
  background: var(--col-bg);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,0.2);
}
.mobile-menu-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--col-line);
}
.mobile-menu-title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
}
.mobile-menu-close {
  width: 36px; height: 36px;
  appearance: none; background: transparent; border: 0;
  font-size: 24px; cursor: pointer;
  color: var(--col-ink);
  border-radius: 999px;
}
.mobile-menu-close:hover { background: var(--col-bg-alt); }
.mobile-menu-list {
  display: flex; flex-direction: column;
  padding: 1rem 1.25rem;
  gap: .25rem;
}
.mobile-menu-list a {
  display: block;
  padding: .85rem 0;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--col-line);
  color: var(--col-ink-soft);
}
.mobile-menu-list a:last-child { border-bottom: 0; }
.mobile-menu-cta {
  margin-top: 1rem;
  text-align: center;
  background: var(--col-ink) !important;
  color: var(--col-bg) !important;
  border-radius: 999px;
  padding: 1rem !important;
}

/* Service category groups */
.services-group + .services-group { margin-top: var(--sp-5); }
.services-group-title {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--col-muted);
  font-weight: 500;
  margin: 0 0 var(--sp-2);
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--col-line);
}

/* Accordion — overflow services hidden until "Show N more" is clicked.
   Applies whenever a group has more than 3 surfaced services. */
.services-group[data-collapsible="1"]:not([data-expanded="1"]) .service-card[data-hidden="1"] {
  display: none;
}
.services-group[data-collapsible="1"][data-expanded="1"] .service-card[data-hidden="1"] {
  animation: bksesh-service-card-in 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes bksesh-service-card-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}
.services-group-toggle {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 1.1rem auto 0;
  padding: .75rem 1.3rem;
  background: transparent;
  border: 1px solid var(--col-line);
  border-radius: 999px;
  color: var(--col-ink-soft);
  font: inherit; font-size: 0.9rem; font-weight: 500;
  letter-spacing: .005em;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.services-group-toggle:hover {
  border-color: var(--col-ink);
  color: var(--col-ink);
  background: color-mix(in srgb, var(--col-ink) 4%, transparent);
}
.services-group-toggle:focus-visible {
  outline: 2px solid var(--col-accent);
  outline-offset: 3px;
}
.services-group-toggle:active { transform: translateY(1px); }
.services-group-toggle-icon {
  transition: transform .3s ease;
  flex: 0 0 auto;
}
.services-group[data-expanded="1"] .services-group-toggle-icon {
  transform: rotate(180deg);
}
/* Centre the toggle on its own line below the cards */
.services-group {
  display: flex; flex-direction: column;
  align-items: center;
}
.services-group > .services-group-title,
.services-group > .services-list {
  align-self: stretch;
}
@media (prefers-reduced-motion: reduce) {
  .services-group[data-collapsible="1"][data-expanded="1"] .service-card[data-hidden="1"] {
    animation: none;
  }
  .services-group-toggle-icon { transition: none; }
}

/* Gallery carousel */
.gallery {
  background: var(--col-bg);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--col-line);
}
.gallery-head { margin-bottom: var(--sp-4); }
.gallery-head h2 { font-size: var(--t-h1); }
.gallery-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--rad);
}
.gallery-track {
  display: flex;
  gap: 0;
  transition: transform .55s cubic-bezier(0.32, 0.72, 0.20, 0.99);
  will-change: transform;
}
.gallery-slide {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--col-bg-alt);
}
.gallery-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.gallery-prev, .gallery-next {
  appearance: none; background: transparent; border: 1px solid var(--col-line);
  width: 40px; height: 40px;
  border-radius: 999px;
  font-size: 16px;
  cursor: pointer;
  color: var(--col-ink);
  transition: border-color .2s ease, background .2s ease;
}
.gallery-prev:hover, .gallery-next:hover { border-color: var(--col-ink); background: var(--col-bg-alt); }
.gallery-dots {
  display: inline-flex; gap: .4rem;
}
.gallery-dot {
  appearance: none; border: 0; padding: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--col-ink) 25%, transparent);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.gallery-dot.is-active {
  background: var(--col-ink);
  transform: scale(1.2);
}

/* What's On list */
.whats-on {
  background: var(--col-bg-alt);
  padding: var(--sp-6) 0;
}
.whats-on-head { max-width: var(--max-w-prose); margin-bottom: var(--sp-4); }
.whats-on-head h2 { font-size: var(--t-h1); margin: .35rem 0 .5rem; }
.whats-on-head p  { color: var(--col-ink-soft); font-size: var(--t-lede); margin: 0; }
.whats-on-empty {
  background: var(--col-bg); padding: 1.5rem; border-radius: var(--rad);
  border: 1px dashed var(--col-line);
  color: var(--col-ink-soft);
}
.whats-on-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .75rem;
}
.whats-on-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  background: var(--col-bg);
  border: 1px solid var(--col-line);
  border-radius: var(--rad);
  padding: 1.25rem;
}
@media (min-width: 720px) {
  .whats-on-item {
    grid-template-columns: 200px 1fr auto;
    align-items: center;
    gap: 1.5rem;
  }
}
.whats-on-meta { display: flex; flex-direction: column; gap: .25rem; }
.whats-on-date { font-family: var(--font-serif); font-size: 1.125rem; }
.whats-on-cat  {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--col-muted);
}
.whats-on-name { font-family: var(--font-serif); font-size: 1.25rem; margin: 0; font-weight: 400; }

/* Contact form */
.contact-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}
.contact-row {
  display: grid; gap: 1rem;
}
@media (min-width: 720px) {
  .contact-row { grid-template-columns: 1fr 1fr; }
}
.contact-label {
  display: flex; flex-direction: column; gap: .35rem;
  font-size: .9rem;
  color: var(--col-ink-soft);
}
.contact-form input,
.contact-form textarea {
  font: inherit;
  background: var(--col-bg);
  border: 1px solid var(--col-line);
  border-radius: var(--rad);
  padding: .85rem 1rem;
  color: var(--col-ink);
  transition: border-color .2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--col-accent);
  outline: none;
}
.contact-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
}
.contact-submit { justify-self: start; margin-top: .5rem; }
.contact-status {
  margin: .5rem 0 0;
  padding: .65rem .9rem;
  border-radius: var(--rad);
  font-size: .9rem;
}
.contact-status[data-state="ok"]    { background: color-mix(in srgb, var(--col-accent) 12%, transparent); color: var(--col-ink); border: 1px solid color-mix(in srgb, var(--col-accent) 40%, transparent); }
.contact-status[data-state="err"]   { background: #FDECEC; color: #5A1A1A; border: 1px solid #F2B8B8; }
.contact-fine { font-size: .8125rem; color: var(--col-muted); margin: 0; }

/* Action bar removed (Phase 0 review round 4) — kept below as dead rules
   purely for backwards compat if any HTML still emits .action-bar. */
.book-stuck,
.action-bar { display: none !important; }
.action-bar .action-btn {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem .75rem;
  border-radius: 999px;
  font-size: .9rem; font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  min-height: 44px;  /* WCAG tap target */
}
.action-primary {
  background: var(--col-ink);
  color: var(--col-bg);
}
.action-primary:hover { background: var(--col-accent-hi); color: var(--col-white); }
.action-secondary {
  background: transparent;
  border: 1px solid var(--col-ink);
  color: var(--col-ink);
}
.action-secondary:hover { background: var(--col-bg-alt); }
.action-tertiary {
  background: transparent;
  border: 1px solid var(--col-line);
  color: var(--col-ink-soft);
}
.action-tertiary:hover { color: var(--col-ink); border-color: var(--col-ink); }
@media (min-width: 980px) {
  .action-bar { display: none; }
}

/* Footer — "Built with love ♥ by BOOKSESH.COM" left + referral right, same baseline */
.footer-attr,
.footer-referral {
  margin: 0;
  font-size: .85rem;
  color: var(--col-muted);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  line-height: 1.4;
}
.footer-attr a,
.footer-referral a {
  color: var(--col-ink-soft);
  border-bottom-color: var(--col-line);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: .75rem;
  margin-left: .25rem;
}
.footer-referral a:hover,
.footer-attr a:hover { color: var(--col-accent-hi); border-bottom-color: var(--col-accent); }

/* BookSesh brand red */
.footer-heart {
  color: #ff5757;
  vertical-align: -2px;
}

/* ── Service description clamp + "Read more" toggle (owner polish item 5,
      2026-09-20). Markup opt-in via [data-clamp] — only newly rendered sites
      emit it, so these rules are inert on already-published pages. The toggle
      button is injected by script.js ONLY when the text actually overflows
      its clamp (4 lines desktop / 5 lines mobile). ───────────────────────── */
.service-blurb[data-clamp] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
@media (min-width: 900px) {
  .service-blurb[data-clamp] { -webkit-line-clamp: 4; line-clamp: 4; }
}
.service-blurb[data-clamp].is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.service-readmore {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  margin-top: .2rem;
  font: inherit;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--col-ink-soft);
  cursor: pointer;
  border-bottom: 1px solid var(--col-line);
  transition: color .2s ease, border-bottom-color .2s ease;
}
.service-readmore:hover { color: var(--col-ink); border-bottom-color: var(--col-ink); }
.service-readmore:focus-visible {
  outline: 2px solid var(--col-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Gallery auto-fade (2026-10-28; owner: auto fading transition "same as in the
   platform listing pages" — 1300 ms ease-in-out dissolve, 5 s hold, set in
   script.js). .is-fade is added by script.js only for galleries with >= 2
   slides, so no-JS / single-image cards are unchanged. Slides stack in one
   grid cell instead of sliding along the track. */
[data-carousel].is-fade .gallery-track {
  display: grid;
  grid-template-columns: 100%;
  transform: none !important;
  transition: none;
  will-change: auto;
}
[data-carousel].is-fade .gallery-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 1300ms ease-in-out;
  will-change: opacity;
}
[data-carousel].is-fade .gallery-slide.is-active { opacity: 1; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-carousel].is-fade .gallery-slide { transition: none; }
}