/* ==========================================================================
   Della Spa — UI additions
   --------------------------------------------------------------------------
   Loaded AFTER tailwind-output.css.

   STRICTLY ADDITIVE. Every component class the site already uses
   (.section-container, .gmain, .proimg, .btn-gold, .heading-gold,
   .prose-spa, .scroll-animate, .glass-header, .nav-link, .card-spa ...)
   is defined in assets/css/input.css and compiled into tailwind-output.css.
   Redefining any of them here would silently override the real design,
   so this file only adds things that do not exist yet.

   To change an existing component, edit assets/css/input.css and rebuild
   with build-css.bat (needs Node.js installed).

   Palette: jade accent on neutral charcoal. These values mirror the `gold`
   and `charcoal` scales in tailwind.config.js -- those keys keep their old
   names because every view references them; only the values changed.
   ========================================================================== */

:root {
  --accent-300: #79d9b4;
  --accent-400: #43c396;
  --accent-500: #17a97b;
  --accent-600: #0d8a64;
  --accent-700: #0c6e51;

  --ink-50:  #f6f7f7;
  --ink-100: #e7e9e9;
  --ink-200: #cfd3d3;
  --ink-300: #a9afaf;
  --ink-400: #7c8484;
  --ink-500: #5d6565;
  --ink-600: #464d4d;
  --ink-700: #333939;
  --ink-800: #212525;
  --ink-900: #151818;
  --ink-950: #0b0d0d;

  --ui-ring: 0 0 0 3px rgba(23, 169, 123, 0.35);
}

/* ---------- Accessibility ------------------------------------------------ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.7rem 1.15rem;
  background: var(--accent-500);
  color: var(--ink-950);
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 0 0 12px 0;
  text-decoration: none;
}

.skip-link:focus { left: 0; }

/* Keyboard focus was invisible across the site. :focus-visible only shows
   for keyboard users, so mouse users see no change. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
label:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ui-ring);
  border-radius: 6px;
}

::selection { background: rgba(23, 169, 123, 0.3); }

/* ---------- Breadcrumbs -------------------------------------------------- */

.breadcrumb-bar {
  border-bottom: 1px solid var(--ink-200);
  background: var(--ink-50);
}

.dark .breadcrumb-bar {
  border-bottom-color: var(--ink-800);
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
}

.breadcrumb-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.7rem 1rem;
}

@media (min-width: 640px)  { .breadcrumb-inner { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .breadcrumb-inner { padding-left: 2rem;   padding-right: 2rem; } }

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.breadcrumb-item { display: flex; align-items: center; gap: 0.4rem; }

.breadcrumb-item a { color: var(--ink-500); text-decoration: none; transition: color 0.18s ease; }
.dark .breadcrumb-item a { color: var(--ink-300); }
.breadcrumb-item a:hover { color: var(--accent-600); }
.dark .breadcrumb-item a:hover { color: var(--accent-500); }

.breadcrumb-item [aria-current="page"] { color: var(--accent-600); font-weight: 600; }
.dark .breadcrumb-item [aria-current="page"] { color: var(--accent-500); }

.breadcrumb-sep { color: var(--ink-300); -webkit-user-select: none; user-select: none; }
.dark .breadcrumb-sep { color: var(--ink-600); }

/* ==========================================================================
   LOCATIONS MENU
   --------------------------------------------------------------------------
   Replaces the old dropdown, which showed on hover but only loaded its data
   on click (so it usually read "Click to load locations..."), then dumped
   every area and every service into one 450x300 scrolling list.

   This version: click to toggle, data fetched once and cached, a search box,
   areas in one pane and that area's services in the other, full keyboard
   support. Same markup drives desktop and mobile.
   ========================================================================== */

.locmenu { position: relative; }

.locmenu-panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  z-index: 60;
  width: min(44rem, calc(100vw - 2rem));
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.dark .locmenu-panel { background: var(--ink-900); border-color: var(--ink-700); }

.locmenu-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* --- search bar --- */
.locmenu-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ink-200);
  background: var(--ink-50);
}

.dark .locmenu-search { border-bottom-color: var(--ink-800); background: var(--ink-950); }

.locmenu-search svg { width: 1rem; height: 1rem; color: var(--ink-400); flex: none; }

.locmenu-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 0.9rem;
  color: var(--ink-900);
  padding: 0.15rem 0;
}

.dark .locmenu-search input { color: var(--ink-50); }
.locmenu-search input::placeholder { color: var(--ink-400); }
.locmenu-search input:focus { outline: none; box-shadow: none; }

.locmenu-count {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-400);
  flex: none;
}

/* --- two panes --- */
.locmenu-body { display: grid; grid-template-columns: 15rem 1fr; min-height: 17rem; }

.locmenu-areas {
  border-right: 1px solid var(--ink-200);
  max-height: 20rem;
  overflow-y: auto;
  padding: 0.5rem;
}

.dark .locmenu-areas { border-right-color: var(--ink-800); }

.locmenu-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-700);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.dark .locmenu-area { color: var(--ink-200); }

.locmenu-area:hover { background: var(--ink-100); color: var(--accent-600); }
.dark .locmenu-area:hover { background: var(--ink-800); color: var(--accent-400); }

.locmenu-area.is-active {
  background: rgba(23, 169, 123, 0.12);
  color: var(--accent-600);
  font-weight: 700;
}

.dark .locmenu-area.is-active { color: var(--accent-400); }

.locmenu-area .locmenu-badge {
  flex: none;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--ink-500);
}

.dark .locmenu-area .locmenu-badge { background: var(--ink-800); color: var(--ink-300); }
.locmenu-area.is-active .locmenu-badge { background: var(--accent-500); color: #fff; }

/* --- services pane --- */
.locmenu-services { padding: 0.9rem 1rem; max-height: 20rem; overflow-y: auto; }

.locmenu-services-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0 0 0.6rem;
}

.locmenu-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem; }

.locmenu-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--ink-600);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.dark .locmenu-link { color: var(--ink-300); }
.locmenu-link:hover { background: var(--ink-100); color: var(--accent-600); }
.dark .locmenu-link:hover { background: var(--ink-800); color: var(--accent-400); }

.locmenu-link::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-500);
  opacity: 0.45;
}

.locmenu-link:hover::before { opacity: 1; }

/* --- states --- */
.locmenu-state {
  padding: 2.5rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-400);
  grid-column: 1 / -1;
}

.locmenu-spinner {
  width: 1.4rem;
  height: 1.4rem;
  margin: 0 auto 0.6rem;
  border: 2px solid var(--ink-200);
  border-top-color: var(--accent-500);
  border-radius: 50%;
  animation: locmenu-spin 0.7s linear infinite;
}

.dark .locmenu-spinner { border-color: var(--ink-700); border-top-color: var(--accent-500); }

@keyframes locmenu-spin { to { transform: rotate(360deg); } }

/* --- footer --- */
.locmenu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--ink-200);
  background: var(--ink-50);
  font-size: 0.78rem;
}

.dark .locmenu-foot { border-top-color: var(--ink-800); background: var(--ink-950); }

.locmenu-foot a { color: var(--accent-600); font-weight: 600; text-decoration: none; }
.dark .locmenu-foot a { color: var(--accent-400); }
.locmenu-foot a:hover { text-decoration: underline; }
.locmenu-foot span { color: var(--ink-400); }

/* --- mobile: stack the panes, panel goes inline --- */
@media (max-width: 768px) {
  .locmenu-body { grid-template-columns: 1fr; min-height: 0; }
  .locmenu-areas {
    border-right: 0;
    border-bottom: 1px solid var(--ink-200);
    max-height: 11rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .dark .locmenu-areas { border-bottom-color: var(--ink-800); }
  .locmenu-area { width: auto; padding: 0.4rem 0.65rem; border: 1px solid var(--ink-200); border-radius: 999px; font-size: 0.78rem; }
  .dark .locmenu-area { border-color: var(--ink-700); }
  .locmenu-links { grid-template-columns: 1fr; }
  .locmenu-services { max-height: 14rem; }
}

/* Inline variant used inside the mobile slide-in menu. */
.locmenu-inline .locmenu-panel {
  position: static;
  width: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  margin-top: 0.5rem;
}

.locmenu-inline .locmenu-panel[hidden] { display: none; }

/* ==========================================================================
   SPA BACKGROUND — depth + floating orbs
   --------------------------------------------------------------------------
   A flat near-black page looked hard. This adds a soft tinted gradient plus
   slow-drifting jade orbs behind everything.

   z-index sits at 0 and the structural blocks below are lifted to 1, rather
   than putting the layer at -1: a negative index can end up painted behind
   the body background and vanish. pointer-events:none keeps it click-through.
   ========================================================================== */

.spa-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgba(23, 169, 123, 0.10), transparent 60%),
    radial-gradient(50rem 36rem at 105% 8%,  rgba(23, 169, 123, 0.07), transparent 60%),
    radial-gradient(45rem 40rem at 50% 115%, rgba(67, 195, 150, 0.06), transparent 60%);
}

.dark .spa-bg {
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgba(23, 169, 123, 0.16), transparent 60%),
    radial-gradient(50rem 36rem at 105% 8%,  rgba(23, 169, 123, 0.11), transparent 60%),
    radial-gradient(45rem 40rem at 50% 115%, rgba(67, 195, 150, 0.09), transparent 60%);
}

.spa-bg span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(1px);
  background: radial-gradient(circle at 32% 30%,
              rgba(255, 255, 255, 0.55),
              rgba(121, 217, 180, 0.28) 42%,
              rgba(23, 169, 123, 0.10) 70%,
              transparent 72%);
  border: 1px solid rgba(121, 217, 180, 0.18);
  opacity: 0.5;
  animation: spa-float 22s ease-in-out infinite;
}

.dark .spa-bg span {
  background: radial-gradient(circle at 32% 30%,
              rgba(255, 255, 255, 0.16),
              rgba(67, 195, 150, 0.20) 42%,
              rgba(23, 169, 123, 0.08) 70%,
              transparent 72%);
  border-color: rgba(67, 195, 150, 0.16);
  opacity: 0.75;
}

.spa-bg span:nth-child(1) { width: 15rem; height: 15rem; left:  4%; top: 12%; animation-duration: 26s; }
.spa-bg span:nth-child(2) { width:  7rem; height:  7rem; left: 22%; top: 62%; animation-duration: 19s; animation-delay: -4s; }
.spa-bg span:nth-child(3) { width: 11rem; height: 11rem; left: 68%; top: 18%; animation-duration: 30s; animation-delay: -9s; }
.spa-bg span:nth-child(4) { width:  5rem; height:  5rem; left: 84%; top: 55%; animation-duration: 17s; animation-delay: -2s; }
.spa-bg span:nth-child(5) { width:  9rem; height:  9rem; left: 46%; top: 78%; animation-duration: 24s; animation-delay: -12s; }
.spa-bg span:nth-child(6) { width:  4rem; height:  4rem; left: 57%; top: 34%; animation-duration: 15s; animation-delay: -7s; }

@keyframes spa-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(1.6rem, -2.4rem, 0) scale(1.06); }
  66%      { transform: translate3d(-1.2rem, -1.2rem, 0) scale(0.95); }
}

/* Lift real content above the decorative layer. */
.breadcrumb-bar,
main#main-content,
footer { position: relative; z-index: 1; }

/*
 * The full-width section wrappers are bg-white / dark:bg-charcoal-900, which
 * is opaque and paints straight over .spa-bg -- so the orbs were invisible.
 *
 * Tailwind writes those as rgb(R G B / var(--tw-bg-opacity)), so lowering that
 * one variable on the TOP-LEVEL wrappers only makes them translucent while
 * keeping every colour relationship (including the light/dark section
 * alternation) intact. Cards nested inside keep their own solid backgrounds,
 * because the variable is re-declared by their own bg-* utility.
 */
main#main-content > section,
main#main-content > div,
footer { --tw-bg-opacity: 0.86; }

.dark main#main-content > section,
.dark main#main-content > div,
.dark footer { --tw-bg-opacity: 0.80; }

/* Small screens: fewer, calmer orbs. */
@media (max-width: 768px) {
  .spa-bg span:nth-child(3),
  .spa-bg span:nth-child(6) { display: none; }
  .spa-bg span { opacity: 0.4; }
}

/* ==========================================================================
   HEADING SYSTEM
   --------------------------------------------------------------------------
   Scoped to #main-content on purpose. The headings already carry Tailwind
   utilities (text-charcoal-900, dark:text-white, text-2xl ...), and a class
   selector (0,1,0) outranks a bare element selector (0,0,1). Adding the ID
   raises these to (1,0,1) so they win, without needing !important or a
   rewrite of every view.

   Sizes are fluid via clamp(), so they scale smoothly between phone and
   desktop instead of jumping at each breakpoint.
   ========================================================================== */

#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4 {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.015em;
  /* Stops a lone trailing word on its own line. Ignored where unsupported. */
  text-wrap: balance;
}

/* --- H1: the page subject --- */
#main-content h1 {
  font-size: clamp(1.85rem, 1.15rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  margin-bottom: 0.6em;
}

.dark #main-content h1 { color: #fff; }

/* The secondary line inside a profile H1 must not inherit the display size.
 *
 * -webkit-text-fill-color INHERITS. A child of a gradient .heading-gold would
 * therefore be transparent while having no background of its own to clip
 * against, i.e. invisible. Resetting the fill colour here is what keeps it
 * readable -- setting `color` alone is not enough, because text-fill-color
 * wins over color wherever it is supported. */
#main-content h1 span.block,
#main-content .heading-gold span.block,
#main-content .heading-gold small {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: clamp(0.9rem, 0.78rem + 0.5vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ink-500);
  -webkit-text-fill-color: var(--ink-500);
  background-image: none;
}

.dark #main-content h1 span.block,
.dark #main-content .heading-gold span.block,
.dark #main-content .heading-gold small {
  color: var(--ink-300);
  -webkit-text-fill-color: var(--ink-300);
}

/* --- H2: section headings --- */
#main-content h2 {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink-900);
}

.dark #main-content h2 { color: var(--ink-50); }

/* --- H3: sub-headings, tinted with the accent --- */
#main-content h3 {
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
  line-height: 1.3;
  font-weight: 700;
  color: var(--accent-700);
}

.dark #main-content h3 { color: var(--accent-400); }

#main-content h4 {
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink-800);
}

.dark #main-content h4 { color: var(--ink-100); }

/*
 * .heading-gold is the shared page-title class. Give it a gradient fill.
 * The solid `color` first is the fallback: if background-clip:text is not
 * supported the text stays visible rather than turning transparent.
 */
#main-content .heading-gold {
  color: var(--accent-700);
  background-image: linear-gradient(100deg, var(--accent-600) 0%, var(--accent-400) 55%, var(--accent-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #main-content .heading-gold {
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.dark #main-content .heading-gold {
  background-image: linear-gradient(100deg, var(--accent-400) 0%, var(--accent-300) 60%, #eafaf3 100%);
}

/* A gradient span nested inside a heading keeps its own fill. */
#main-content h1 .text-transparent,
#main-content h2 .text-transparent {
  -webkit-text-fill-color: transparent;
}

/* Long-form headings stay in the body face -- serif at small sizes inside
   running copy reads as a mistake rather than a choice. */
#main-content .prose-spa h2,
#main-content .prose-spa h3,
#main-content .prose-spa h4 {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
}

#main-content .prose-spa h2 { font-size: 1.3rem; }
#main-content .prose-spa h3 { font-size: 1.1rem; color: var(--ink-900); }
.dark #main-content .prose-spa h3 { color: var(--ink-50); }

/* ==========================================================================
   CATEGORY GRID — mobile fix
   --------------------------------------------------------------------------
   These grids were grid-cols-2 on phones. At 375px that left each card about
   170px, and after 16px padding, a 48px icon and a 12px gap the label had
   roughly 78px to work with. Names like "Female to male spa near me 24 hours
   price list" wrapped to six or more lines and the cards went ragged.

   The markup now starts at one column and steps up (1 / sm:2 / md:3 / lg:4).
   The rules below handle what Tailwind utilities could not, because
   min-w-0 and break-words are not in the compiled stylesheet.
   ========================================================================== */

.cat-grid > a {
  min-height: 4.25rem;
  align-items: center;
}

/* A flex item will not shrink below its content width without this, which is
   what pushes the chevron off the card and forces mid-word breaks. */
.cat-grid > a > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.35;
}

.cat-grid > a > img,
.cat-grid > a > div {
  flex: none;
}

@media (max-width: 639px) {
  /* Full-width rows on phones: icon left, label with real room, chevron right. */
  .cat-grid > a {
    min-height: 3.5rem;
    padding: 0.7rem 0.85rem;
    gap: 0.7rem;
  }

  .cat-grid > a > img {
    width: 2.25rem;
    height: 2.25rem;
  }

  .cat-grid > a > span {
    font-size: 0.875rem;
  }

  /* The hover chevron only ever appears on pointer devices, and on a phone it
     just steals horizontal space from the label. */
  .cat-grid > a > svg:last-child {
    display: none;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  /* Two columns here, so keep the label compact and let it wrap to two lines. */
  .cat-grid > a { min-height: 4rem; padding: 0.75rem; gap: 0.6rem; }
  .cat-grid > a > img { width: 2.5rem; height: 2.5rem; }
  .cat-grid > a > span { font-size: 0.8125rem; }
  .cat-grid > a > svg:last-child { display: none; }
}

/* ---------- Client reviews ------------------------------------------------ */

.review-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 0 1.75rem;
  font-size: 0.9rem;
  color: var(--ink-500);
}

.dark .review-summary { color: var(--ink-300); }

.review-summary strong {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink-900);
}

.dark .review-summary strong { color: #fff; }

.review-stars {
  color: #e8b923;
  letter-spacing: 0.08em;
  font-size: 1rem;
  line-height: 1;
}

.review-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .review-grid { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
}

@media (min-width: 1280px) {
  .review-grid { grid-template-columns: repeat(3, 1fr); }
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  background: #fff;
}

.dark .review-card { border-color: var(--ink-700); background: var(--ink-900); }

.review-card h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink-900);
}

.dark .review-card h3 { color: var(--ink-50); }

.review-card p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--ink-500);
}

.dark .review-card p { color: var(--ink-300); }

.review-card footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ink-200);
  font-size: 0.78rem;
}

.dark .review-card footer { border-top-color: var(--ink-800); }

.review-who { font-weight: 700; color: var(--ink-800); }
.dark .review-who { color: var(--ink-100); }
.review-where { color: var(--ink-400); }

.review-empty {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--ink-300);
  border-radius: 16px;
  color: var(--ink-500);
}

.dark .review-empty { border-color: var(--ink-700); color: var(--ink-300); }

.review-empty-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-800);
}

.dark .review-empty-title { color: var(--ink-100); }

.review-empty p { margin: 0; font-size: 0.86rem; line-height: 1.65; }

.review-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
}

.review-google {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dark .review-google { color: var(--accent-400); }

/* ---------- Review form --------------------------------------------------- */

.review-form {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  padding: 1.5rem;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  background: #fff;
  display: grid;
  gap: 0.9rem;
}

.dark .review-form { border-color: var(--ink-700); background: var(--ink-900); }

.review-form[hidden] { display: none; }

.review-form-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-400);
}

.review-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-700);
}

.dark .review-form label { color: var(--ink-200); }

.review-form input[type="text"],
.review-form select,
.review-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink-900);
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 9px;
}

.dark .review-form input[type="text"],
.dark .review-form select,
.dark .review-form textarea {
  color: var(--ink-50);
  background: var(--ink-950);
  border-color: var(--ink-700);
}

.review-form textarea { resize: vertical; min-height: 6rem; }

.review-form-row { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }

@media (min-width: 560px) {
  .review-form-row { grid-template-columns: 1fr 1fr; }
}

.review-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}

.review-form-msg { font-size: 0.82rem; font-weight: 600; }
.review-form-msg.is-ok { color: var(--accent-600); }
.dark .review-form-msg.is-ok { color: var(--accent-400); }
.review-form-msg.is-err { color: #c0392b; }
.dark .review-form-msg.is-err { color: #ff8a7a; }

/* Honeypot: off-screen for people, still fillable by bots. */
.review-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Video cards --------------------------------------------------- */

/*
 * Auto-fitting grid. Rather than fixed breakpoints, cards are given a minimum
 * width and the browser fits as many per row as will comfortably go: 1 on a
 * phone, 2 on a tablet, 3 on a desktop, with no breakpoint to maintain.
 */
.video-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .video-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}

@media (min-width: 1280px) {
  .video-grid { grid-template-columns: repeat(3, 1fr); }
}

.video-card {
  margin: 0;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.dark .video-card { border-color: var(--ink-700); background: var(--ink-900); }

/* Fixed ratio reserves the space before the poster loads, so nothing shifts.
   object-fit: cover fills the frame edge to edge with no black bars, which is
   what makes a mixed set of portrait and landscape clips look like one set. */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  overflow: hidden;
}

.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Taller frame on phones, where a single wide card looks cramped. */
@media (max-width: 559px) {
  .video-frame { aspect-ratio: 3 / 2; }
}

/* Older browsers without aspect-ratio support still get a sane box. */
@supports not (aspect-ratio: 4 / 3) {
  .video-frame { height: 0; padding-bottom: 75%; }
}

.video-card figcaption { padding: 0.95rem 1.1rem 1.15rem; }

.video-card figcaption h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-900);
}

.dark .video-card figcaption h3 { color: var(--ink-50); }

.video-card figcaption p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-500);
}

.dark .video-card figcaption p { color: var(--ink-300); }

@media (max-width: 639px) {
  .video-card figcaption { padding: 0.8rem 0.9rem 1rem; }
  .video-card figcaption h3 { font-size: 0.95rem; }
  .video-card figcaption p { font-size: 0.78rem; }
}

/* ---------- RTA / adults-only notice ------------------------------------- */

.rta-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--ink-200);
  border-left: 3px solid var(--accent-500);
  border-radius: 12px;
  background: var(--ink-50);
}

.dark .rta-notice {
  border-color: var(--ink-700);
  border-left-color: var(--accent-500);
  background: rgba(23, 169, 123, 0.06);
}

.rta-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent-500);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rta-notice p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-500);
}

.dark .rta-notice p { color: var(--ink-300); }

.rta-notice strong { color: var(--ink-800); }
.dark .rta-notice strong { color: var(--ink-100); }

.rta-notice a {
  color: var(--accent-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.dark .rta-notice a { color: var(--accent-400); }

@media (max-width: 639px) {
  .rta-notice { padding: 0.8rem 0.9rem; gap: 0.7rem; }
  .rta-badge { width: 2rem; height: 2rem; font-size: 0.7rem; }
  .rta-notice p { font-size: 0.74rem; }
}

/* ---------- Elevation ---------------------------------------------------- */

/* Deeper, softer shadows than the flat borders the cards had. */
.card-spa,
.gmain {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 12px 28px -14px rgba(0, 0, 0, 0.18);
}

.dark .card-spa,
.dark .gmain {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30), 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}

.card-spa:hover,
.gmain:hover {
  box-shadow: 0 4px 10px rgba(23, 169, 123, 0.10), 0 22px 48px -18px rgba(23, 169, 123, 0.30);
}

.dark .card-spa:hover,
.dark .gmain:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.40), 0 26px 56px -20px rgba(23, 169, 123, 0.35);
}

/* ---------- Layout safety ------------------------------------------------ */

/* Nothing should ever cause the page itself to scroll sideways. */
html, body { overflow-x: hidden; }

/* Wide tables inside long-form content scroll in their own box. */
.prose-spa > table,
.prose-spa .table-wrap {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Images keep their aspect ratio when width/height attributes are present,
   which is what stops layout shift (CLS) as they load. */
img[width][height] { height: auto; }

/* ---------- Scrollbar ---------------------------------------------------- */

.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.dark ::-webkit-scrollbar-track { background: var(--ink-950); }
.dark ::-webkit-scrollbar-thumb {
  background: var(--ink-700);
  border-radius: 10px;
  border: 2px solid var(--ink-950);
}
.dark ::-webkit-scrollbar-thumb:hover { background: var(--accent-700); }

/* ---------- Motion preferences ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The reveal animation must not leave content permanently invisible. */
  .scroll-animate { opacity: 1 !important; transform: none !important; }
}

/* ---------- Print --------------------------------------------------------- */

@media print {
  .breadcrumb-bar,
  .skip-link,
  #main-header,
  #mobile-menu,
  #mobile-menu-overlay,
  .locmenu-panel,
  .back-to-top,
  footer { display: none !important; }

  body { background: #fff !important; color: #000 !important; }
  .scroll-animate { opacity: 1 !important; transform: none !important; }
}