/* =========================================================================
   YELLOW · NAVY · RED — design system v4
   Matches the food-delivery reference: bright yellow header, deep navy hero,
   red CTA pills, bold DM Sans throughout.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..900;1,9..40,400..900&family=Satisfy&display=swap');

:root {
  /* Yellows */
  --sp-yellow:        #F5C518;   /* primary — header, feature bands */
  --sp-yellow-deep:   #E8B610;   /* hover, darker band */
  --sp-yellow-soft:   #FEE168;   /* highlight */

  /* Navy / darks */
  --sp-navy:          #0F1020;   /* hero bg, dark cards */
  --sp-navy-soft:     #1A1C33;   /* raised surfaces on dark */
  --sp-navy-edge:     #282B45;   /* borders on dark */

  /* Red */
  --sp-red:           #E63946;   /* CTAs, accent band */
  --sp-red-deep:      #C12A37;   /* hover */

  /* Neutrals */
  --sp-cream:         #FAF7F0;   /* body bg */
  --sp-cream-soft:    #F2EEE3;   /* alt section */
  --sp-white:         #FFFFFF;
  --sp-ink:           #141520;   /* body text on cream */
  --sp-ink-mid:       #5A5B6D;   /* secondary text on cream */
  --sp-on-navy:       #F7F4EC;   /* text on navy */
  --sp-on-navy-dim:   rgba(247,244,236,0.68);

  /* Font */
  --sp-sans: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sp-script: 'Satisfy', 'Brush Script MT', cursive;
}

/* =========================================================================
   Global base — reset body to match the new palette
   ========================================================================= */
html, body,
body.bg-gray-900,
body.nb-body,
body.v-body,
body.sp-body {
  background: var(--sp-cream) !important;
  color: var(--sp-ink) !important;
  font-family: var(--sp-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0;
  /* `clip` instead of `hidden` so position:sticky descendants still work.
     Both prevent horizontal scroll, but `clip` does NOT create a new scroll
     containing block. Supported in Chrome 90+/Firefox 81+/Safari 16+. */
  overflow-x: clip;
  max-width: 100vw;
}

body::before { display: none !important; content: none !important; }

/* Hide every remnant of prior iterations */
.v-sidebar,
.v-drawer,
.v-backdrop,
.v-menu-trigger,
.v-footer,
.v-colophon,
.nb-header,
.nb-footer,
.nb-ticker { display: none !important; }

/* =========================================================================
   TOPBAR — trust marquee strip above the yellow header
   ========================================================================= */
.sp-topbar {
  background: var(--sp-navy);
  color: var(--sp-cream);
  height: 34px;
  overflow: hidden;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(245, 197, 24, 0.18);
  z-index: 50;            /* high enough to sit above any in-page sticky elements */
}
.sp-topbar-track {
  display: flex;
  width: max-content;
  animation: sp-topbar-scroll 45s linear infinite;
  will-change: transform;
}
.sp-topbar:hover .sp-topbar-track {
  animation-play-state: paused;       /* let the user actually read it */
}
.sp-topbar-list {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
.sp-topbar-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  font-family: var(--sp-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sp-cream);
  white-space: nowrap;
  position: relative;
}
/* Yellow dot separator between items */
.sp-topbar-list li::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(245, 197, 24, 0.5);
}
.sp-topbar-tick {
  color: var(--sp-yellow);
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
}
@keyframes sp-topbar-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }    /* exactly one of the two duplicate lists */
}
@media (prefers-reduced-motion: reduce) {
  .sp-topbar-track { animation: none; transform: none; }
}
@media (max-width: 640px) {
  .sp-topbar { height: 30px; border-bottom-width: 0; }
  .sp-topbar-list li { font-size: 11px; padding: 0 20px; }
}

/* =========================================================================
   HEADER — two-row yellow bar
   ========================================================================= */
.sp-header {
  background: var(--sp-yellow);
  color: var(--sp-ink);
  position: relative;
  z-index: 10;
}

.sp-header-row1 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.sp-header-row2 {
  background: var(--sp-yellow);
  border-top: 1px solid rgba(20,21,32,0.10);
}
.sp-header-row2-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo */
.sp-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--sp-ink);
  flex-shrink: 0;
}

.sp-logo-mark {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sp-red);
  color: var(--sp-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  /* Layered rings via stacked box-shadow:
     1) inner-light highlight on the red disc itself
     2) 3px yellow ring just outside
     3) 1.5px thin dark outline framing the yellow ring
     4) soft red drop shadow grounding the badge */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 0 0 3px var(--sp-yellow),
    0 0 0 4.5px rgba(20, 21, 32, 0.4),
    0 6px 14px rgba(230, 57, 70, 0.4);
  transition: transform 260ms cubic-bezier(.4,.0,.2,1),
              box-shadow 260ms ease;
}
/* Small red dot accent — top-right, just outside the yellow ring */
.sp-logo-mark::after {
  content: "";
  position: absolute;
  top: -7px; right: -5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sp-red);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.sp-logo:hover .sp-logo-mark {
  transform: rotate(-6deg) scale(1.05);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 0 0 3px var(--sp-yellow),
    0 0 0 4.5px rgba(20, 21, 32, 0.4),
    0 12px 24px rgba(230, 57, 70, 0.5);
}

.sp-logo-wordmark {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--sp-ink);
  line-height: 1;
}
.sp-logo-wordmark small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-ink-mid);
  margin-top: 4px;
  font-weight: 600;
}

/* Top nav */
.sp-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}
.sp-nav a {
  font-weight: 600;
  font-size: 14px;
  color: var(--sp-ink);
  text-decoration: none;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color 200ms ease;
}
.sp-nav a:hover { color: var(--sp-red); }

/* Search input */
.sp-search {
  position: relative;
  flex: 1 1 180px;
  max-width: 280px;
  min-width: 0;
}
.sp-search input {
  width: 100%;
  height: 42px;
  padding: 0 42px 0 18px;
  border: 1px solid rgba(20,21,32,0.15);
  background: var(--sp-cream);
  border-radius: 999px;
  font-family: var(--sp-sans);
  font-size: 14px;
  color: var(--sp-ink);
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.sp-search input::placeholder { color: var(--sp-ink-mid); }
.sp-search input:focus {
  border-color: var(--sp-ink);
  box-shadow: 0 0 0 3px rgba(20,21,32,0.08);
}
.sp-search .sp-search-icon {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--sp-ink-mid);
  pointer-events: none;
}

/* --- Autocomplete dropdown — shared by header search + drawer search --- */
.sp-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--sp-white);
  border: 1px solid rgba(20, 21, 32, 0.08);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(20, 21, 32, 0.18);
  max-height: 480px;
  overflow-y: auto;
  z-index: 200;
  display: none;
  padding: 8px;
}
.sp-search-results.is-open { display: block; }
.sp-search-group {
  padding: 6px 4px;
}
.sp-search-group + .sp-search-group {
  border-top: 1px solid rgba(20, 21, 32, 0.06);
  margin-top: 4px;
  padding-top: 10px;
}
.sp-search-group-title {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sp-ink-mid);
  padding: 6px 10px 4px;
}
.sp-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--sp-ink);
  cursor: pointer;
  transition: background 180ms ease;
}
.sp-search-item:hover,
.sp-search-item.is-active {
  background: rgba(245, 197, 24, 0.14);
}
.sp-search-item-thumb {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sp-navy-soft);
  flex-shrink: 0;
}
.sp-search-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-search-item-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(20, 21, 32, 0.06);
  color: var(--sp-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sp-search-item-icon svg { width: 16px; height: 16px; }
.sp-search-item-body {
  flex: 1; min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sp-search-item-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--sp-ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-search-item-sub {
  font-size: 11.5px;
  color: var(--sp-ink-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-search-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--sp-ink-mid);
  font-size: 13px;
}
.sp-search-loading {
  padding: 20px 16px;
  text-align: center;
  color: var(--sp-ink-mid);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* In-drawer search: dropdown positions under the search input */
.sp-drawer-search .sp-search-results {
  top: calc(100% + 6px);
  max-height: 360px;
}

/* Row-2 sub-nav (category chips) */
.sp-subnav {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.sp-subnav a {
  font-weight: 600;
  font-size: 13px;
  color: var(--sp-ink);
  text-decoration: none;
  letter-spacing: 0;
  padding: 4px 0;
  position: relative;
  transition: color 200ms ease;
}
.sp-subnav a:hover { color: var(--sp-red); }
.sp-subnav a:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--sp-red);
  border-radius: 2px;
}

.sp-subnav-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sp-ink);
}
.sp-subnav-right svg { width: 18px; height: 18px; }

/* Buttons */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sp-sans);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: all 220ms cubic-bezier(.4,.0,.2,1);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.sp-btn-red {
  background: var(--sp-red);
  color: var(--sp-white);
  padding: 11px 24px;
  border-radius: 999px;
}
.sp-btn-red:hover {
  background: var(--sp-red-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(230,57,70,0.35);
}

.sp-btn-yellow {
  background: var(--sp-yellow);
  color: var(--sp-ink);
  padding: 14px 28px;
  border-radius: 999px;
}
.sp-btn-yellow:hover {
  background: var(--sp-yellow-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(245,197,24,0.4);
}

.sp-btn-green {
  background: #25D366;
  color: #FFFFFF;
  padding: 14px 28px;
  border-radius: 999px;
}
.sp-btn-green:hover {
  background: #1DB954;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(37,211,102,0.4);
}

.sp-btn-large {
  padding: 16px 34px;
  font-size: 15px;
}

.sp-btn-ghost {
  background: transparent;
  color: var(--sp-on-navy);
  border: 1px solid rgba(247,244,236,0.4);
  padding: 14px 26px;
  border-radius: 999px;
}
.sp-btn-ghost:hover {
  background: var(--sp-on-navy);
  color: var(--sp-navy);
  border-color: var(--sp-on-navy);
}

.sp-menu-trigger {
  display: none;
  background: var(--sp-ink);
  border: 0;
  color: var(--sp-yellow);
  width: 42px; height: 42px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sp-menu-trigger svg { width: 18px; height: 18px; }

/* =========================================================================
   HERO — navy block, split copy + photo
   ========================================================================= */
.sp-hero {
  background: var(--sp-navy);
  color: var(--sp-on-navy);
  padding: 72px 40px 96px;
  position: relative;
  overflow: hidden;
}

/* Subtle decorative dots on the navy */
.sp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(245,197,24,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
}

.sp-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
  min-height: 520px;
}

.sp-hero-copy { max-width: 720px; }

.sp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-yellow);
  margin-bottom: 28px;
}
.sp-hero-eyebrow::before {
  content: "";
  width: 32px; height: 2px;
  background: var(--sp-yellow);
  border-radius: 2px;
}

.sp-hero-headline {
  font-weight: 800;
  font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--sp-on-navy);
  margin: 0 0 24px 0;
}
.sp-hero-headline > span,
.sp-hero-headline > em {
  display: block;
  /* Allow long titles (e.g. "Mumbai Sexy Aunty") to wrap instead of clip.
     Individual lines still break on the span/em block boundary for rhythm. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.sp-hero-headline em {
  font-style: normal;
  font-weight: 800;
  color: var(--sp-yellow);
  position: relative;
  display: inline-block;
}
.sp-hero-headline em::after {
  /* subtle underline flourish under the yellow word */
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 2px;
  height: 8px;
  background: rgba(245,197,24,0.15);
  z-index: -1;
  border-radius: 4px;
}

.sp-hero-desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--sp-on-navy-dim);
  max-width: 560px;
  margin: 0 0 16px 0;
}
.sp-hero-sub {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sp-on-navy);
  max-width: 560px;
  margin: 0 0 36px 0;
  letter-spacing: 0.01em;
}
.sp-hero-sub strong {
  color: var(--sp-yellow);
  font-weight: 600;
}

.sp-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.sp-hero-meta {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.sp-hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sp-hero-meta-item strong {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--sp-yellow);
  line-height: 1;
}
.sp-hero-meta-item span {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-on-navy-dim);
}
.sp-hero-meta-divider {
  width: 1px;
  height: 32px;
  background: rgba(247,244,236,0.18);
}

/* Hero photo column (right) */
.sp-hero-figure {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Big yellow disc behind the portrait */
.sp-hero-figure::before {
  content: "";
  position: absolute;
  inset: 4%;
  background: radial-gradient(circle at 35% 35%,
    var(--sp-yellow) 0%,
    var(--sp-yellow) 45%,
    var(--sp-yellow-deep) 100%);
  border-radius: 50%;
  z-index: 0;
  box-shadow: 0 40px 120px rgba(245,197,24,0.22);
}

/* Portrait itself — full circle on top of the disc, slightly offset */
.sp-hero-figure img {
  position: relative;
  z-index: 2;
  width: 96%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 50%;
  filter: contrast(1.04) saturate(1.04);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}

/* Decorative "topping" circles around the portrait */
.sp-hero-figure .deco {
  position: absolute;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
}
.sp-hero-figure .deco.d1 { width: 44px; height: 44px; top: 8%;  left: 4%;  background: var(--sp-red); box-shadow: 0 10px 24px rgba(230,57,70,0.4); }
.sp-hero-figure .deco.d2 { width: 28px; height: 28px; top: 0%;  right: 22%; background: var(--sp-white); opacity: 0.9; }
.sp-hero-figure .deco.d3 { width: 20px; height: 20px; top: 45%; right: 0;  background: var(--sp-red); opacity: 0.9; }
.sp-hero-figure .deco.d4 { width: 36px; height: 36px; bottom: 12%; right: 8%; background: var(--sp-yellow-soft); }
.sp-hero-figure .deco.d5 { width: 16px; height: 16px; bottom: 6%; left: 26%; background: var(--sp-white); opacity: 0.6; }
.sp-hero-figure .deco.d6 { width: 10px; height: 10px; top: 28%; left: 0;   background: var(--sp-yellow); }

/* Orbit-only variant — drop the yellow disc background; the orbit IS the
   visual. Center anchor + spinning thumbnails carry the section. */
.sp-hero-figure--orbit-only::before {
  display: none;
}

/* Hero orbit — circular ring of profile thumbnails. Each item's center
   is positioned via inline `left`/`top` percentages computed in PHP
   (50% + radius × cos/sin of its angle), then snapped to center via
   `translate(-50%, -50%)`. The whole ring spins fast on a continuous
   linear animation. */
.sp-hero-orbit {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  animation: sp-hero-orbit-spin 40s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes sp-hero-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Pause the spin if the user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sp-hero-orbit { animation: none; }
}
/* Pause on hover so users can click a profile without it sliding away */
.sp-hero-figure:hover .sp-hero-orbit {
  animation-play-state: paused;
}
.sp-hero-orbit-item {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: auto;
  background: var(--sp-navy-soft);
  border: 3px solid var(--sp-white);
  box-shadow:
    0 0 0 3px var(--sp-ink),
    0 10px 22px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  transition: transform 250ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 250ms ease,
              border-color 250ms ease;
  text-decoration: none;
}
.sp-hero-orbit-item:hover {
  transform: translate(-50%, -50%) scale(1.18);
  z-index: 5;
  border-color: var(--sp-red);
  box-shadow:
    0 0 0 3px var(--sp-ink),
    0 16px 30px rgba(0, 0, 0, 0.6),
    0 0 28px rgba(230, 57, 70, 0.5);
}
.sp-hero-orbit-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

/* Center anchor — subtle dark disc with a "300+ Verified" stamp so the
   middle of the yellow circle reads as intentional rather than empty. */
.sp-hero-figure--orbit-only::after {
  content: "300+\A Verified";
  white-space: pre;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2A2A38 0%, #0F0F1A 70%);
  color: var(--sp-yellow);
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--sp-yellow);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 3px var(--sp-ink),
    0 14px 28px rgba(0, 0, 0, 0.55);
}

@media (max-width: 960px) {
  .sp-hero-orbit-item {
    width: 78px; height: 78px;
    border-width: 2px;
    box-shadow:
      0 0 0 2px var(--sp-ink),
      0 6px 14px rgba(0, 0, 0, 0.4);
  }
  .sp-hero-figure--orbit-only::after {
    width: 100px; height: 100px;
    font-size: 14px;
    border-width: 2px;
  }
}
@media (max-width: 560px) {
  .sp-hero-orbit-item {
    width: 60px; height: 60px;
    border-width: 2px;
  }
  .sp-hero-figure--orbit-only::after {
    width: 80px; height: 80px;
    font-size: 11.5px;
  }
}

/* Floating badge */
.sp-hero-badge {
  position: absolute;
  top: 8%; right: 2%;
  z-index: 4;
  background: var(--sp-red);
  color: var(--sp-white);
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transform: rotate(8deg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sp-hero-badge .dot {
  width: 8px; height: 8px;
  background: var(--sp-white);
  border-radius: 50%;
  display: inline-block;
}

/* Bottom-left info card floating over photo */
.sp-hero-tag {
  position: absolute;
  bottom: 4%; left: 0;
  z-index: 4;
  background: var(--sp-white);
  color: var(--sp-ink);
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}
.sp-hero-tag strong {
  font-weight: 700;
  font-size: 14px;
  color: var(--sp-ink);
}
.sp-hero-tag span {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-red);
}

/* Wide variant — single centered column. Used on index pages (category list,
   location list, etc.) where no right-side figure is needed. */
.sp-hero.sp-hero--wide .sp-hero-inner {
  grid-template-columns: 1fr;
  max-width: 900px;
  min-height: 0;
  text-align: center;
  padding: 0;
}
.sp-hero.sp-hero--wide .sp-hero-copy {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sp-hero.sp-hero--wide .sp-hero-eyebrow,
.sp-hero.sp-hero--wide .sp-crumbs {
  justify-content: center;
}
.sp-hero.sp-hero--wide .sp-hero-desc,
.sp-hero.sp-hero--wide .sp-hero-sub {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.sp-hero.sp-hero--wide .sp-hero-ctas,
.sp-hero.sp-hero--wide .sp-hero-meta {
  justify-content: center;
}

/* =========================================================================
   BREADCRUMBS — slim nav trail above hero headline (navy bg)
   ========================================================================= */
.sp-crumbs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-on-navy-dim);
  margin: 0 0 22px 0;
  position: relative;
  z-index: 2;
}
.sp-crumbs a {
  color: var(--sp-on-navy-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.18s ease;
}
.sp-crumbs a:hover { color: var(--sp-yellow); }
.sp-crumbs a svg { width: 12px; height: 12px; }
.sp-crumbs-sep {
  display: inline-flex;
  align-items: center;
  color: rgba(247,244,236,0.35);
}
.sp-crumbs-sep svg { width: 9px; height: 9px; }
.sp-crumbs-current {
  color: var(--sp-yellow);
  position: relative;
}
.sp-crumbs-current::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sp-yellow);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 4px rgba(245,197,24,0.18);
}

/* Breadcrumb variant for cream/light backgrounds (if ever used outside hero) */
.sp-crumbs.on-light { color: var(--sp-ink-mid); }
.sp-crumbs.on-light a { color: var(--sp-ink-mid); }
.sp-crumbs.on-light a:hover { color: var(--sp-red); }
.sp-crumbs.on-light .sp-crumbs-sep { color: rgba(20,21,32,0.28); }
.sp-crumbs.on-light .sp-crumbs-current { color: var(--sp-red); }
.sp-crumbs.on-light .sp-crumbs-current::before {
  background: var(--sp-red);
  box-shadow: 0 0 0 4px rgba(230,57,70,0.15);
}

@media (max-width: 560px) {
  .sp-crumbs { font-size: 10px; letter-spacing: 0.18em; gap: 8px; }
}

/* =========================================================================
   FEATURE STRIP — red band bridging hero and about
   ========================================================================= */
.sp-features-wrap {
  background: linear-gradient(to bottom, var(--sp-navy) 50%, var(--sp-cream) 50%);
  padding: 0 40px;
  position: relative;
  z-index: 4;
}

.sp-features {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--sp-red);
  color: var(--sp-white);
  border-radius: 22px;
  padding: 32px 40px;
  box-shadow: 0 30px 60px rgba(230,57,70,0.35);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: center;
}

.sp-feature {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 12px;
  border-right: 1px solid rgba(255,255,255,0.18);
}
.sp-feature:last-child { border-right: 0; }

.sp-feature-icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--sp-yellow);
}
.sp-feature-icon svg { width: 22px; height: 22px; }

.sp-feature-text h4 {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--sp-white);
  margin: 0 0 4px 0;
  line-height: 1.15;
}

.sp-feature-text p {
  font-weight: 400;
  font-size: 13px;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
  margin: 0;
}

/* =========================================================================
   ABOUT SECTION — cream background, text + image
   ========================================================================= */
.sp-about {
  background: var(--sp-cream);
  padding: 96px 40px;
  position: relative;
}

.sp-about-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}

.sp-about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-red);
  margin-bottom: 20px;
}
.sp-about-eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-red);
  border-radius: 2px;
}

.sp-about-headline {
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0 0 20px 0;
  max-width: 640px;
}
.sp-about-headline em {
  font-style: normal;
  color: var(--sp-red);
}

.sp-about-desc {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  color: var(--sp-ink-mid);
  margin: 0 0 32px 0;
  max-width: 560px;
}

.sp-about-list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}
.sp-about-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--sp-ink);
  letter-spacing: 0.01em;
}
.sp-about-list li::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sp-yellow);
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23141520' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
}

.sp-about-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--sp-navy);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 30px 60px rgba(20,21,32,0.25);
  overflow: visible;
}
.sp-about-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 14px;
  position: relative;
  z-index: 1;
}

.sp-about-figure .badge {
  position: absolute;
  top: 32px; left: 32px;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 3;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Decorative floating dots — match the "garnish" vibe of the reference */
.sp-about-figure::before {
  content: "";
  position: absolute;
  top: -24px; right: -24px;
  width: 72px; height: 72px;
  background: var(--sp-red);
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 10px 24px rgba(230,57,70,0.35);
}
.sp-about-figure::after {
  content: "";
  position: absolute;
  bottom: -20px; left: -20px;
  width: 48px; height: 48px;
  background: var(--sp-yellow);
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 8px 20px rgba(245,197,24,0.35);
}

/* Extra small dots floating around */
.sp-about-dot {
  position: absolute;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}
.sp-about-dot.d1 { width: 22px; height: 22px; top: 40%; right: -32px; background: var(--sp-yellow); }
.sp-about-dot.d2 { width: 16px; height: 16px; bottom: 30%; left: -28px; background: var(--sp-white); opacity: 0.85; }
.sp-about-dot.d3 { width: 12px; height: 12px; top: 8%; left: -16px; background: var(--sp-red); }

/* About — arc carousel of featured profiles.
   Items orbit a curved arc. Center item is largest (active), neighbors
   shrink and fade. Auto-rotates every 4 s; pauses on hover. Reuses the
   same red/yellow accent blobs as the figure version for visual continuity. */
.sp-arc-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Cosmic "universe" backdrop — layered from front to back:
     1) Stars: tiny radial dots, varied size + opacity for depth.
     2) Nebula clouds: soft violet + indigo + pink glows.
     3) Horizon glow: warm yellow rising from bottom (active spotlight).
     4) Base: deep cosmic blue-black gradient (top → bottom).
     Browsers render this as a single composited background; no markup
     changes needed, structure/flow stays identical. */
  background:
    /* --- distant stars (top half, sparser at bottom) --- */
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.85), transparent 50%),
    radial-gradient(1px   1px   at 25% 8%,  rgba(255,255,255,0.7),  transparent 50%),
    radial-gradient(1px   1px   at 38% 24%, rgba(245,197,24,0.85),  transparent 50%),
    radial-gradient(1px   1px   at 50% 14%, rgba(255,255,255,0.6),  transparent 50%),
    radial-gradient(1.5px 1.5px at 62% 6%,  rgba(255,255,255,0.9),  transparent 50%),
    radial-gradient(1px   1px   at 78% 22%, rgba(255,255,255,0.7),  transparent 50%),
    radial-gradient(2px   2px   at 88% 10%, rgba(245,197,24,0.75),  transparent 50%),
    radial-gradient(1px   1px   at 8%  38%, rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(1px   1px   at 92% 35%, rgba(255,255,255,0.7),  transparent 50%),
    radial-gradient(1.5px 1.5px at 30% 46%, rgba(255,255,255,0.5),  transparent 50%),
    radial-gradient(1px   1px   at 70% 44%, rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(1px   1px   at 5%  60%, rgba(255,255,255,0.45), transparent 50%),
    radial-gradient(1px   1px   at 96% 65%, rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(1px   1px   at 18% 78%, rgba(245,197,24,0.5),   transparent 50%),
    /* --- nebula clouds: soft violet + indigo + pink --- */
    radial-gradient(ellipse 35% 25% at 78% 22%,
      rgba(150, 90, 230, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 32% 22% at 18% 32%,
      rgba(80, 110, 230, 0.20) 0%, transparent 70%),
    radial-gradient(ellipse 28% 18% at 50% 8%,
      rgba(220, 100, 200, 0.16) 0%, transparent 70%),
    /* --- horizon spotlight: keeps the active profile glowing on a "moon" --- */
    radial-gradient(ellipse 78% 60% at 50% 100%,
      rgba(245, 197, 24, 0.45) 0%,
      rgba(245, 197, 24, 0.18) 30%,
      transparent 65%),
    /* --- cosmic base: deep blue-black with subtle vertical depth --- */
    linear-gradient(180deg,
      #04061F 0%,
      #08092B 35%,
      #0C1138 65%,
      #14193F 100%);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
/* Decorative red + yellow blobs — match .sp-about-figure rhythm */
.sp-arc-carousel::before {
  content: "";
  position: absolute;
  top: -24px; right: -24px;
  width: 72px; height: 72px;
  background: var(--sp-red);
  border-radius: 50%;
  z-index: 6;
  box-shadow: 0 10px 24px rgba(230, 57, 70, 0.35);
}
.sp-arc-carousel::after {
  content: "";
  position: absolute;
  bottom: -20px; left: -20px;
  width: 48px; height: 48px;
  background: var(--sp-yellow);
  border-radius: 50%;
  z-index: 6;
  box-shadow: 0 8px 20px rgba(245, 197, 24, 0.35);
}

/* "Featured" tag — top-left, same vibe as the old badge */
.sp-arc-tag {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 5;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* Dashed arc curve sitting behind the items.
   overflow:visible so the curve isn't clipped where control points exceed
   the viewBox bounds. */
.sp-arc-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.sp-arc-curve path { vector-effect: non-scaling-stroke; }

.sp-arc-track {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* No overflow:hidden — let circles spill nicely beyond if angle is steep */
}

/* Each slot has explicit top/left/scale values. JS assigns slot classes
   based on each item's offset from the active index. CSS transitions on
   top/left/transform/opacity handle the motion smoothly.

   Layout (matching the food reference):
   - 4 small/medium items on the ∩ arc above
   - 1 BIG active item at bottom-center, below the arc
*/
.sp-arc-item {
  position: absolute;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sp-navy-soft);
  display: block;
  text-decoration: none;
  /* Hidden default — at center, scaled to 0 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  z-index: 1;
  transition: top 700ms cubic-bezier(.4, 0, .2, 1),
              left 700ms cubic-bezier(.4, 0, .2, 1),
              transform 700ms cubic-bezier(.4, 0, .2, 1),
              opacity 500ms ease,
              box-shadow 400ms ease;
  /* Floating-in-space treatment: tight white ring → warm yellow halo →
     soft violet nebula glow → drop shadow. Reads as a planet/moon
     glowing in the cosmic backdrop. */
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.92),
    0 0 16px 2px rgba(245, 197, 24, 0.35),
    0 0 28px 8px rgba(150, 90, 230, 0.18),
    0 12px 24px rgba(0, 0, 0, 0.45);
}
.sp-arc-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* 5 curve positions — distributed along the dashed ∩ arc.
   Mirrored layout: pos-1 ↔ pos-5, pos-2 ↔ pos-4, pos-3 = peak. */
.sp-arc-item.pos-1 {
  /* far-left edge of arc */
  top: 26%; left: 10%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0.8;
  z-index: 2;
}
.sp-arc-item.pos-2 {
  /* upper-left of peak */
  top: 14%; left: 28%;
  transform: translate(-50%, -50%) scale(0.62);
  opacity: 0.95;
  z-index: 3;
}
.sp-arc-item.pos-3 {
  /* peak — top-center */
  top: 9%; left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 1;
  z-index: 4;
}
.sp-arc-item.pos-4 {
  /* upper-right of peak */
  top: 14%; left: 72%;
  transform: translate(-50%, -50%) scale(0.62);
  opacity: 0.95;
  z-index: 3;
}
.sp-arc-item.pos-5 {
  /* far-right edge of arc */
  top: 26%; left: 90%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0.8;
  z-index: 2;
}

/* Active position — moved slightly up to leave clear room for the name
   below it. Single yellow ring + soft warm glow (no double-ring). */
.sp-arc-item.is-active {
  top: 54%; left: 50%;
  transform: translate(-50%, -50%) scale(1.3);
  opacity: 1;
  z-index: 5;
  box-shadow:
    0 0 0 4px var(--sp-yellow),
    0 0 32px 6px rgba(245, 197, 24, 0.32),
    0 24px 50px rgba(20, 21, 32, 0.32);
}

/* Inline info — sits in the lower third of the carousel with breathing
   room below the active circle. Nav buttons are pulled up to flank the
   active profile, so the info zone no longer needs to clear them. */
.sp-arc-info {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  text-align: center;
  width: 80%;
  max-width: 360px;
}
.sp-arc-name {
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.05em;
  color: var(--sp-yellow);
  margin: 0;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-arc-type {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.7);
  margin: 4px 0 10px;
}
.sp-arc-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--sp-cream);
  padding: 4px 0;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--sp-yellow);
  transition: color 200ms ease, border-color 200ms ease, gap 200ms ease;
}
.sp-arc-cta svg { transition: transform 200ms ease; }
.sp-arc-cta:hover {
  color: var(--sp-yellow);
  border-bottom-color: var(--sp-yellow);
  gap: 10px;
}
.sp-arc-cta:hover svg { transform: translateX(2px); }

/* Prev / Next nav — vertically centered on the BIG active profile, sitting
   to its left and right at the canvas edges. Compose translateY(-50%) with
   the hover scale so the centering offset survives the transform change. */
.sp-arc-nav {
  position: absolute;
  top: 54%;                      /* matches .sp-arc-item.is-active top */
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
  transform: translateY(-50%);
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}
.sp-arc-nav:hover {
  background: var(--sp-red);
  color: var(--sp-white);
  transform: translateY(-50%) scale(1.1);
}
.sp-arc-nav.prev { left: 4%; }
.sp-arc-nav.next { right: 4%; }
.sp-arc-nav svg { width: 16px; height: 16px; }

@media (max-width: 960px) {
  .sp-arc-carousel {
    max-width: 480px;
    margin: 0 auto;
  }
}
@media (max-width: 560px) {
  /* Mobile: tighten curve positions and shrink active for the smaller canvas */
  .sp-arc-item.pos-1 { top: 28%; left: 8%;  transform: translate(-50%, -50%) scale(0.42); }
  .sp-arc-item.pos-2 { top: 16%; left: 27%; transform: translate(-50%, -50%) scale(0.54); }
  .sp-arc-item.pos-3 { top: 11%; left: 50%; transform: translate(-50%, -50%) scale(0.6); }
  .sp-arc-item.pos-4 { top: 16%; left: 73%; transform: translate(-50%, -50%) scale(0.54); }
  .sp-arc-item.pos-5 { top: 28%; left: 92%; transform: translate(-50%, -50%) scale(0.42); }
  .sp-arc-item.is-active {
    top: 54%;
    transform: translate(-50%, -50%) scale(1.18);
    box-shadow:
      0 0 0 3px var(--sp-yellow),
      0 0 24px 5px rgba(245, 197, 24, 0.32),
      0 18px 36px rgba(20, 21, 32, 0.3);
  }
  .sp-arc-info { bottom: 30px; }
  /* Keep nav buttons aligned to the (mobile-shifted) active center */
  .sp-arc-nav { top: 54%; width: 36px; height: 36px; }
  .sp-arc-nav.prev { left: 3%; }
  .sp-arc-nav.next { right: 3%; }
}
@media (max-width: 480px) {
  .sp-arc-info { bottom: 24px; max-width: 90%; }
  .sp-arc-name { font-size: 19px; letter-spacing: 0.04em; }
  .sp-arc-type { font-size: 10px; letter-spacing: 0.16em; margin: 3px 0 8px; }
  .sp-arc-cta { font-size: 11px; }
  .sp-arc-nav { width: 32px; height: 32px; }
  .sp-arc-nav svg { width: 14px; height: 14px; }
}

@media (max-width: 960px) {
  .sp-features {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px;
  }
  .sp-feature { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 14px; }
  .sp-feature:last-child { border-bottom: 0; padding-bottom: 8px; }

  .sp-about { padding: 64px 20px; }
  .sp-about-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .sp-about-figure { max-width: 420px; margin: 0 auto; }
  .sp-about-list { grid-template-columns: 1fr; }
  .sp-features-wrap { padding: 0 20px; }
}

/* =========================================================================
   PROFILE GRID — reusable for Model of the Day & Independent grid
   ========================================================================= */
.sp-section {
  background: var(--sp-cream);
  padding: 80px 40px;
}
.sp-section.alt { background: var(--sp-white); }
.sp-section.dark {
  background: var(--sp-navy);
  color: var(--sp-on-navy);
}
.sp-section.yellow {
  background: var(--sp-yellow);
  position: relative;
}
/* Subtle pattern on yellow */
.sp-section.yellow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(20,21,32,0.04) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
}
.sp-section.yellow > * { position: relative; z-index: 1; }

.sp-section-head {
  max-width: 1280px;
  margin: 0 auto 48px;
  text-align: center;
}
.sp-section-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-red);
  margin-bottom: 16px;
}
.sp-section-head .kicker::before,
.sp-section-head .kicker::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-red);
  border-radius: 2px;
}
.sp-section-head h2 {
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0;
}
.sp-section-head h2 em {
  font-style: normal;
  color: var(--sp-red);
}
.sp-section.dark .sp-section-head h2 { color: var(--sp-on-navy); }
.sp-section.dark .sp-section-head h2 em { color: var(--sp-yellow); }
.sp-section.dark .sp-section-head .kicker { color: var(--sp-yellow); }
.sp-section.dark .sp-section-head .kicker::before,
.sp-section.dark .sp-section-head .kicker::after { background: var(--sp-yellow); }

/* Landscape business-card style grid */
.sp-profile-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.sp-profile-card {
  background: var(--sp-navy);
  color: var(--sp-on-navy);
  border-radius: 18px;
  position: relative;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: 24px;
  align-items: stretch;
  box-shadow: 0 12px 32px rgba(20,21,32,0.2);
  transition: transform 280ms cubic-bezier(.4,.0,.2,1),
              box-shadow 280ms cubic-bezier(.4,.0,.2,1);
  overflow: hidden;
}
.sp-profile-card::before {
  /* Decorative yellow blob behind photo side */
  content: "";
  position: absolute;
  right: -80px;
  top: 50%;
  width: 340px;
  height: 340px;
  background: var(--sp-yellow);
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.sp-profile-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 56px rgba(20,21,32,0.32);
}
.sp-profile-card:hover::before { opacity: 0.2; }

.sp-profile-photo {
  position: relative;
  display: block;
  width: 100%;
  min-height: 240px;
  text-decoration: none;
  justify-self: end;
  align-self: stretch;
  z-index: 2;
}
.sp-profile-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 60% 30% 55% 25% / 40% 55% 30% 60%;
  transition: transform 500ms cubic-bezier(.4,.0,.2,1),
              border-radius 800ms cubic-bezier(.4,.0,.2,1);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}
.sp-profile-card:hover .sp-profile-photo img {
  transform: scale(1.04);
  border-radius: 30% 60% 25% 55% / 55% 40% 60% 30%;
}
/* Small yellow accent dot floating behind image */
.sp-profile-photo::before {
  content: "";
  position: absolute;
  top: -12px; left: -12px;
  width: 22px; height: 22px;
  background: var(--sp-yellow);
  border-radius: 50%;
  z-index: -1;
}
.sp-profile-photo::after {
  content: "";
  position: absolute;
  bottom: -8px; right: -14px;
  width: 14px; height: 14px;
  background: var(--sp-red);
  border-radius: 50%;
  z-index: -1;
}

/* Badge (top-left) — red description pill */
.sp-profile-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  background: var(--sp-red);
  color: var(--sp-white);
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: calc(100% - 80px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(230,57,70,0.35);
}

/* Location (centered near bottom of image) */
.sp-profile-location {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Actions (top-right) */
.sp-profile-actions {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-profile-chip {
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: 999px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.sp-profile-chip:hover { background: var(--sp-white); transform: scale(1.05); }
.sp-profile-chip svg { width: 13px; height: 13px; }
.sp-profile-chip .count {
  font-weight: 700;
  font-size: 11px;
  color: var(--sp-ink);
}
.sp-profile-chip.like svg { color: var(--sp-red); }
.sp-profile-chip.views svg { color: var(--sp-ink-mid); }

/* Body — business-card style content */
.sp-profile-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.sp-profile-name {
  font-family: var(--sp-script);
  font-weight: 400;
  font-size: 44px;
  color: var(--sp-yellow);
  line-height: 1;
  letter-spacing: 0;
  margin: 0 0 4px 0;
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 200ms ease;
}
.sp-profile-name:hover { color: var(--sp-white); }

.sp-profile-type {
  font-family: var(--sp-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--sp-on-navy);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.sp-profile-meta {
  border-top: 1px solid rgba(247,244,236,0.18);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}
.sp-profile-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sp-sans);
  font-size: 12.5px;
  color: var(--sp-on-navy-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.sp-profile-meta-item strong {
  color: var(--sp-on-navy);
  font-weight: 700;
}
.sp-profile-meta-item .sp-meta-sep {
  opacity: 0.4;
  margin: 0 2px;
}
.sp-profile-meta-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sp-profile-meta-icon svg { width: 11px; height: 11px; }
.sp-profile-meta-icon.heart { background: var(--sp-red); color: var(--sp-white); }
.sp-profile-meta-icon.verified { background: #22C55E; color: var(--sp-white); }
.sp-profile-meta-icon.live {
  background: var(--sp-yellow);
  color: var(--sp-ink);
  position: relative;
}
.sp-profile-meta-item .live-dot {
  width: 7px; height: 7px;
  background: #22C55E;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  animation: sp-live-pulse 1.6s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
}
@keyframes sp-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Action row — call icon, WhatsApp icon, Book Now pill */
.sp-profile-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
.sp-icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  border: 0;
  cursor: pointer;
}
.sp-icon-btn svg { width: 16px; height: 16px; }
.sp-icon-btn.call {
  background: var(--sp-yellow);
  color: var(--sp-ink);
}
.sp-icon-btn.call:hover {
  background: var(--sp-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245,197,24,0.4);
}
.sp-icon-btn.whatsapp {
  background: #25D366;
  color: var(--sp-white);
}
.sp-icon-btn.whatsapp:hover {
  background: #1DB954;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37,211,102,0.4);
}
.sp-btn-booknow {
  background: var(--sp-yellow);
  color: var(--sp-ink);
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--sp-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  transition: all 220ms ease;
}
.sp-btn-booknow:hover {
  background: var(--sp-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245,197,24,0.4);
}
.sp-btn-booknow svg { width: 12px; height: 12px; }

@media (max-width: 960px) {
  .sp-section { padding: 56px 20px; }
  .sp-section-head { margin-bottom: 32px; }
  .sp-profile-grid { grid-template-columns: 1fr; gap: 20px; }
  .sp-profile-card {
    grid-template-columns: 1fr 150px;
    padding: 22px 24px;
    min-height: 0;
    gap: 18px;
  }
  .sp-profile-name { font-size: 36px; }
  .sp-profile-type { font-size: 13px; margin-bottom: 12px; }
  .sp-profile-meta-item { font-size: 12.5px; gap: 7px; }
  .sp-profile-photo { min-height: 180px; }
}

@media (max-width: 560px) {
  .sp-profile-card {
    grid-template-columns: 1fr 120px;
    padding: 18px 18px;
    gap: 14px;
  }
  .sp-profile-name { font-size: 30px; }
  .sp-profile-type { font-size: 12px; margin-bottom: 10px; }
  .sp-profile-meta { padding-top: 10px; gap: 6px; }
  .sp-profile-meta-item { font-size: 11.5px; gap: 6px; }
  .sp-profile-meta-item strong { font-size: 12px; }
  .sp-profile-meta-icon { width: 22px; height: 22px; }
  .sp-profile-meta-icon svg { width: 11px; height: 11px; }
  .sp-profile-photo { min-height: 160px; }
}

@media (max-width: 400px) {
  .sp-profile-card {
    grid-template-columns: 1fr 100px;
    padding: 16px;
    gap: 12px;
  }
  .sp-profile-name { font-size: 26px; }
  .sp-profile-type { font-size: 11.5px; margin-bottom: 8px; }
  .sp-profile-meta-item {
    font-size: 11px;
    /* Break strong onto its own line on ultra-narrow */
    flex-wrap: wrap;
    line-height: 1.3;
  }
  .sp-profile-meta-item strong { font-size: 11.5px; }
  .sp-profile-meta-icon { width: 20px; height: 20px; }
  .sp-profile-meta-icon svg { width: 10px; height: 10px; }
  .sp-profile-photo { min-height: 140px; }
}

/* =========================================================================
   PILLARS — pendant/shield-shaped "Why Book With Us" cards
   Rounded top + elliptical arc bottom. Middle card pops in yellow.
   ========================================================================= */
.sp-pillars-section {
  background: var(--sp-navy);
  padding: 96px 40px 72px;
  position: relative;
  overflow: hidden;
}
.sp-pillars-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(245,197,24,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
}

.sp-pillars-head {
  max-width: 1080px;
  margin: 0 auto 56px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.sp-pillars-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-yellow);
  margin-bottom: 16px;
}
.sp-pillars-head .kicker::before,
.sp-pillars-head .kicker::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-yellow);
  border-radius: 2px;
}
.sp-pillars-head h2 {
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sp-on-navy);
  margin: 0;
}
.sp-pillars-head h2 em {
  font-style: normal;
  color: var(--sp-yellow);
}

.sp-pillars-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  position: relative;
  z-index: 2;
}

.sp-pillar-card {
  background: var(--sp-navy-soft);
  color: var(--sp-on-navy);
  padding: 54px 28px 60px;
  text-align: center;
  position: relative;
  /* Pendant shape: mildly rounded top corners + shallow arched bottom */
  border-radius: 28px 28px 50% 50% / 28px 28px 20% 20%;
  transition: transform 320ms cubic-bezier(.4,.0,.2,1),
              box-shadow 320ms cubic-bezier(.4,.0,.2,1);
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
}
.sp-pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.42);
}

/* Middle/accent card — yellow fill with inverted text */
.sp-pillar-card.is-accent {
  background: var(--sp-yellow);
  color: var(--sp-ink);
  box-shadow: 0 20px 48px rgba(245,197,24,0.25);
}
.sp-pillar-card.is-accent:hover {
  box-shadow: 0 32px 68px rgba(245,197,24,0.38);
}

/* Circular icon badge at top center */
.sp-pillar-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  box-shadow: 0 8px 18px rgba(245,197,24,0.38);
}
.sp-pillar-icon svg { width: 20px; height: 20px; }

/* Invert badge on yellow card */
.sp-pillar-card.is-accent .sp-pillar-icon {
  background: var(--sp-ink);
  color: var(--sp-yellow);
  box-shadow: 0 8px 18px rgba(20,21,32,0.32);
}

.sp-pillar-title {
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: inherit;
  margin: 0 0 12px;
}

.sp-pillar-desc {
  font-family: var(--sp-sans);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(247,244,236,0.7);
  margin: 0 auto;
  max-width: 240px;
}
.sp-pillar-card.is-accent .sp-pillar-desc {
  color: rgba(20,21,32,0.72);
}

@media (max-width: 960px) {
  .sp-pillars-section { padding: 72px 20px 56px; }
  .sp-pillars-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 380px;
  }
  .sp-pillar-card { padding: 46px 26px 52px; }
  /* Shallower arc looks nicer at single-column */
  .sp-pillar-card {
    border-radius: 24px 24px 44% 44% / 24px 24px 14% 14%;
  }
}

/* =========================================================================
   MENU-STYLE PROFILE GRID — circular photos on dark cards (Independent Escorts)
   Big hollow title + script accent, stagger grid, TOP badges.
   ========================================================================= */
.sp-menu-section {
  background: var(--sp-navy);
  color: var(--sp-on-navy);
  padding: 96px 40px 80px;
  position: relative;
  overflow: hidden;
}
/* Subtle radial light for ambiance */
.sp-menu-section::before {
  content: "";
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: 80%; height: 400px;
  background: radial-gradient(ellipse at center, rgba(245,197,24,0.06), transparent 70%);
  pointer-events: none;
}

.sp-menu-head {
  max-width: 1280px;
  margin: 0 auto 72px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center;
  flex-direction: column;
}
.sp-menu-head-top {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.sp-menu-title {
  font-family: var(--sp-sans);
  font-weight: 900;
  font-size: clamp(72px, 12vw, 180px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--sp-on-navy);
  text-transform: uppercase;
  margin: 0;
}
.sp-menu-accent {
  font-family: var(--sp-script);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 84px);
  color: var(--sp-yellow);
  line-height: 0.9;
  letter-spacing: 0;
  margin: 0;
}
.sp-menu-subtitle {
  font-family: var(--sp-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sp-on-navy-dim);
  margin-top: 14px;
}

.sp-menu-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 96px 22px; /* generous top-gap between rows for photo overflow + breathing room */
  padding-top: 90px; /* room for circular photo overflow */
  position: relative;
  z-index: 2;
}

/* Option C — frosted-glass dark cards with a yellow accent stripe.
   Semi-transparent dark surface, backdrop blur, thin yellow line at top.
   Photos still pop, the section feels lighter and more modern. */
.sp-menu-card {
  background: rgba(20, 21, 32, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(247, 244, 236, 0.10);
  border-top: 2px solid var(--sp-yellow);
  border-radius: 14px;
  padding: 90px 18px 26px;
  position: relative;
  text-align: center;
  min-height: 340px;
  transition: transform 320ms cubic-bezier(.4,.0,.2,1),
              box-shadow 320ms cubic-bezier(.4,.0,.2,1),
              border-top-color 320ms ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 32px rgba(0,0,0,0.45),
              inset 0 1px 0 rgba(255,255,255,0.04);
}
.sp-menu-card:hover {
  transform: translateY(-6px);
  border-top-color: var(--sp-red);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6),
              inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Circular photo — overlaps card top. Glass-card edition: yellow ring
   matches the top accent stripe; subtle outer glow ties to brand. */
.sp-menu-photo {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  width: 148px; height: 148px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: var(--sp-navy);
  box-shadow: 0 12px 30px rgba(0,0,0,0.55),
              0 0 0 4px rgba(20, 21, 32, 0.55),
              0 0 0 6px var(--sp-yellow),
              0 0 24px rgba(245, 197, 24, 0.25);
  z-index: 3;
  text-decoration: none;
}
.sp-menu-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.4,.0,.2,1);
}
.sp-menu-card:hover .sp-menu-photo img { transform: scale(1.08); }

/* TOP X badge floating above the circle — yellow pill on the dark
   section, dark text inside. Yellow matches the card's top accent. */
.sp-menu-badge {
  position: absolute;
  top: -118px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sp-yellow);
  color: var(--sp-ink);
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 4;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  white-space: nowrap;
}

/* Card content — cream text on the glass card */
.sp-menu-name {
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--sp-on-navy);
  margin: 0 0 12px;
  text-decoration: none;
  display: block;
  line-height: 1.2;
  transition: color 200ms ease;
}
.sp-menu-name:hover { color: var(--sp-yellow); }

.sp-menu-desc {
  font-family: var(--sp-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--sp-on-navy-dim);
  margin: 0 0 22px;
  min-height: 38px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Profile bio content — descriptive paragraph from abt_profile */
.sp-menu-content {
  font-family: var(--sp-sans);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sp-on-navy-dim);
  margin: 0 0 18px;
  min-height: 100px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}
.sp-menu-content strong {
  color: var(--sp-on-navy);
  font-weight: 600;
}

/* Bottom footer row — stats on left, call/WhatsApp icons on right.
   Hairline divider tinted cream for dark surface. */
.sp-menu-stats {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(247,244,236,0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sp-menu-stats-left,
.sp-menu-stats-right {
  display: flex;
  align-items: center;
}
.sp-menu-stats-left { gap: 12px; }
.sp-menu-stats-right { gap: 6px; }

/* Action icon buttons (call / WhatsApp) */
.sp-menu-action {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.sp-menu-action svg { width: 14px; height: 14px; }
.sp-menu-action.call {
  background: var(--sp-yellow);
  color: var(--sp-ink);
}
.sp-menu-action.call:hover {
  background: var(--sp-white);
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(245,197,24,0.4);
}
.sp-menu-action.whatsapp {
  background: #25D366;
  color: var(--sp-white);
}
.sp-menu-action.whatsapp:hover {
  background: #1DB954;
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(37,211,102,0.4);
}
.sp-menu-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sp-sans);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--sp-on-navy-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: default;
}
.sp-menu-stat svg { width: 14px; height: 14px; }
.sp-menu-stat.likes svg { color: var(--sp-red); }
.sp-menu-stat.views svg { color: var(--sp-yellow); }
.sp-menu-stat.like-button { cursor: pointer; transition: transform 180ms ease, color 180ms ease; }
.sp-menu-stat.like-button:hover { transform: scale(1.08); color: var(--sp-on-navy); }

/* --- Liked state: heart fills red, count goes red ---------------------- */
.sp-menu-stat.like-button.is-liked { color: var(--sp-red); cursor: default; }
.sp-menu-stat.like-button.is-liked svg { color: var(--sp-red); fill: var(--sp-red); }
/* Pop animation on the SVG when newly clicked */
.sp-menu-stat.like-button.is-popping svg {
  animation: sp-like-pop 500ms cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: center;
}
@keyframes sp-like-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.55); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* --- "+1" floats up and fades out, anchored to the heart button ------ */
.sp-menu-stat.like-button { position: relative; }
.sp-like-float {
  position: absolute;
  left: 6px; top: -2px;
  font-family: var(--sp-sans);
  font-weight: 900;
  font-size: 13px;
  color: var(--sp-red);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  animation: sp-like-float 900ms ease-out forwards;
  z-index: 5;
}
@keyframes sp-like-float {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.7); }
  20%  { opacity: 1;   transform: translate(0, -8px) scale(1); }
  100% { opacity: 0;   transform: translate(0, -34px) scale(1); }
}

/* --- "Call now to book" pill: appears after liking, fades out --------- */
.sp-menu-stats-left { position: relative; }
.sp-like-cta {
  position: absolute;
  left: -4px; bottom: calc(100% + 10px);
  white-space: nowrap;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  padding: 7px 12px;
  border-radius: 999px;
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow:
    0 8px 18px rgba(245, 197, 24, 0.45),
    0 0 0 1px rgba(20, 21, 32, 0.12);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms ease, transform 280ms cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
  z-index: 10;
}
.sp-like-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sp-like-cta::after {
  content: "";
  position: absolute;
  left: 14px; bottom: -4px;
  width: 8px; height: 8px;
  background: var(--sp-yellow);
  transform: rotate(45deg);
}
.sp-like-cta:hover { background: var(--sp-white); }

/* Section head + load more reuse */
.sp-menu-section .sp-loadmore-btn {
  background: var(--sp-yellow);
  color: var(--sp-ink);
  box-shadow: 0 8px 20px rgba(245,197,24,0.28);
}
.sp-menu-section .sp-loadmore-btn:hover {
  background: var(--sp-white);
  color: var(--sp-ink);
  box-shadow: 0 14px 32px rgba(0,0,0,0.3);
}
.sp-menu-section .sp-loadmore-status { color: var(--sp-on-navy-dim); }
.sp-menu-section .sp-loadmore-wrap { margin-top: 80px; }

/* Live count for menu section */
.sp-menu-section .live-count {
  background: rgba(34,197,94,0.15);
  color: #4ADE80;
}

@media (max-width: 1100px) {
  .sp-menu-grid { grid-template-columns: repeat(3, 1fr); gap: 130px 20px; padding-top: 100px; }
  .sp-menu-title { font-size: clamp(56px, 10vw, 108px); }
}

@media (max-width: 820px) {
  .sp-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 130px 16px; padding-top: 100px; }
  .sp-menu-title { font-size: clamp(48px, 9vw, 78px); letter-spacing: -0.04em; }
  .sp-menu-accent { font-size: clamp(36px, 7vw, 60px); }
}

@media (max-width: 480px) {
  .sp-menu-section { padding: 64px 12px 56px; }
  .sp-menu-head { margin-bottom: 40px; }
  /* `minmax(0, 1fr)` lets the grid items SHRINK below their content's intrinsic
     width on very narrow viewports — without it, the photo (110px) + padding
     forces every cell to a min-width that overflows the viewport. */
  .sp-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 110px 8px; padding-top: 80px; }
  .sp-menu-card { padding: 64px 8px 16px; min-height: 250px; min-width: 0; }
  .sp-menu-photo { width: 96px; height: 96px; top: -46px; }
  .sp-menu-badge { top: -82px; font-size: 9px; padding: 4px 10px; }
  .sp-menu-title { font-size: clamp(40px, 11vw, 58px); letter-spacing: -0.03em; }
  .sp-menu-accent { font-size: clamp(30px, 8vw, 44px); }
  .sp-menu-subtitle { font-size: 11px; letter-spacing: 0.22em; }
  .sp-menu-name { font-size: 12px; margin-bottom: 8px; }
  .sp-menu-desc { font-size: 11px; margin-bottom: 12px; min-height: 28px; }
  .sp-menu-content { -webkit-line-clamp: 3; min-height: 56px; font-size: 11px; }
  .sp-menu-stats { gap: 6px; padding-top: 8px; min-width: 0; }
  .sp-menu-stats-left { gap: 6px; min-width: 0; flex-shrink: 1; }
  .sp-menu-stats-right { gap: 4px; flex-shrink: 0; }
  .sp-menu-stat { font-size: 10.5px; min-width: 0; gap: 3px; }
  .sp-menu-stat svg { width: 11px; height: 11px; }
  .sp-menu-action { width: 24px; height: 24px; }
  .sp-menu-action svg { width: 11px; height: 11px; }
}

/* Very narrow phones (320–360px) — KEEP 2-column, shrink the layer inside
   each card so two cards still fit side-by-side without horizontal clip. */
@media (max-width: 360px) {
  .sp-menu-section { padding: 50px 8px 44px; }
  .sp-menu-grid { gap: 96px 6px; padding-top: 74px; }
  .sp-menu-card { padding: 58px 6px 14px; min-height: 230px; }
  .sp-menu-photo { width: 84px; height: 84px; top: -40px; }
  .sp-menu-badge { top: -72px; font-size: 8.5px; padding: 3px 8px; letter-spacing: 0.12em; }
  .sp-menu-name { font-size: 11.5px; margin-bottom: 6px; letter-spacing: 0; }
  .sp-menu-desc { font-size: 10.5px; margin-bottom: 10px; min-height: 26px; }
  .sp-menu-content { font-size: 10.5px; -webkit-line-clamp: 3; min-height: 50px; }
  .sp-menu-stats { gap: 4px; padding-top: 6px; }
  .sp-menu-stats-left { gap: 5px; }
  .sp-menu-stats-right { gap: 3px; }
  .sp-menu-stat { font-size: 10px; gap: 2px; letter-spacing: 0; }
  .sp-menu-stat svg { width: 10px; height: 10px; }
  .sp-menu-action { width: 22px; height: 22px; }
  .sp-menu-action svg { width: 10px; height: 10px; }
}

/* =========================================================================
   SITE FOOTER — navy brand footer with columns
   ========================================================================= */
.sp-footer {
  background: var(--sp-navy);
  color: var(--sp-on-navy);
  padding: 80px 40px 0;
  position: relative;
  overflow: hidden;
  font-family: var(--sp-sans);
}
.sp-footer::before {
  /* Red top stripe with diagonal texture */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--sp-red) 0%, #F07078 50%, var(--sp-red) 100%);
}
.sp-footer::after {
  /* Decorative dots bg */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(245,197,24,0.05) 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  pointer-events: none;
  opacity: 0.6;
}

.sp-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Brand header row */
.sp-footer-brand {
  display: grid;
  grid-template-columns: 1.8fr 360px;
  gap: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(247,244,236,0.1);
  margin-bottom: 48px;
  align-items: center;
  justify-content: space-between;
}
.sp-footer-mark {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sp-footer-wordmark {
  font-family: var(--sp-script);
  font-size: clamp(48px, 6vw, 72px);
  color: var(--sp-yellow);
  line-height: 0.9;
  margin: 0;
  letter-spacing: 0;
}
.sp-footer-city {
  font-family: var(--sp-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-on-navy);
}
.sp-footer-tagline {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sp-on-navy-dim);
  margin: 0 0 20px;
  max-width: 440px;
}
.sp-footer-hours {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(34,197,94,0.14);
  color: #4ADE80;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sp-footer-hours .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22C55E;
  animation: sp-live-pulse 1.6s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
}

.sp-footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.sp-footer-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--sp-navy-soft);
  border: 1px solid rgba(247,244,236,0.1);
  border-radius: 12px;
  color: var(--sp-on-navy);
  text-decoration: none;
  transition: all 220ms ease;
  min-width: 0;
}
.sp-footer-contact-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.sp-footer-contact-text strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-footer-contact:hover {
  background: var(--sp-navy);
  border-color: var(--sp-yellow);
  transform: translateX(-3px);
}
.sp-footer-contact-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 220ms ease;
}
.sp-footer-contact-icon svg { width: 15px; height: 15px; }
.sp-footer-contact.call .sp-footer-contact-icon {
  background: var(--sp-yellow);
  color: var(--sp-ink);
}
.sp-footer-contact.whatsapp .sp-footer-contact-icon {
  background: #25D366;
  color: var(--sp-white);
}
.sp-footer-contact.email .sp-footer-contact-icon {
  background: var(--sp-red);
  color: var(--sp-white);
}
.sp-footer-contact:hover .sp-footer-contact-icon {
  transform: scale(1.08);
}
.sp-footer-contact-text small {
  display: block;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-on-navy-dim);
  margin-bottom: 2px;
}
.sp-footer-contact-text strong {
  font-weight: 700;
  font-size: 14px;
  color: var(--sp-on-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Link columns */
.sp-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(247,244,236,0.1);
  margin-bottom: 24px;
}
.sp-footer-col h4 {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sp-yellow);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(245,197,24,0.2);
}
.sp-footer-col a,
.sp-footer-col .footer-info {
  display: block;
  color: rgba(247,244,236,0.72);
  padding: 5px 0;
  font-weight: 500;
  font-size: 13.5px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: all 200ms ease;
}
.sp-footer-col a:hover {
  color: var(--sp-yellow);
  transform: translateX(4px);
}
.sp-footer-col .social-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.sp-footer-col .social-row a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--sp-navy-soft);
  border: 1px solid rgba(247,244,236,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sp-on-navy);
  padding: 0;
  transition: all 220ms ease;
}
.sp-footer-col .social-row a:hover {
  background: var(--sp-yellow);
  color: var(--sp-ink);
  border-color: var(--sp-yellow);
  transform: translateY(-3px);
}
.sp-footer-col .social-row svg { width: 14px; height: 14px; }

/* Bottom bar */
.sp-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 24px;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--sp-on-navy-dim);
  letter-spacing: 0.02em;
}
.sp-footer-bottom .age-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(230,57,70,0.15);
  color: #F87A83;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-left: 8px;
}
.sp-footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.sp-footer-legal a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}
.sp-footer-legal a:hover { color: var(--sp-yellow); }

/* Scroll-to-top button (new style) */
.sp-scroll-top {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 50;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--sp-red);
  color: var(--sp-white);
  border: 0;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(230,57,70,0.35);
  transition: all 220ms ease;
}
.sp-scroll-top.visible { display: inline-flex; }
.sp-scroll-top:hover {
  background: var(--sp-red-deep);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(230,57,70,0.5);
}
.sp-scroll-top svg { width: 20px; height: 20px; }

/* Age-gate modal — restyled */
.sp-age-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15,16,32,0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.sp-age-modal.visible { display: flex; }
.sp-age-card {
  max-width: 460px;
  width: 100%;
  background: var(--sp-cream);
  border-radius: 20px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.4);
  border-top: 6px solid var(--sp-red);
}
.sp-age-card::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(rgba(245,197,24,0.2), transparent 70%);
  pointer-events: none;
}
/* Brand bar at top of the modal — wordmark + 18+ pill side by side */
.sp-age-brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(20, 21, 32, 0.08);
  position: relative;
  z-index: 1;
}
.sp-age-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;            /* let text truncate gracefully on tiny screens */
}
.sp-age-brand-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  border: 2px solid var(--sp-ink);
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.sp-age-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sp-age-brand-text strong {
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: 15px;
  color: var(--sp-ink);
  letter-spacing: -0.005em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-age-brand-text span {
  font-size: 10px;
  color: var(--sp-ink-mid);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-age-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sp-red);
  color: var(--sp-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(230, 57, 70, 0.4);
  position: relative;
  z-index: 1;
}
.sp-age-card h3 {
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.3;
  color: var(--sp-ink);
  margin: 0 0 12px;
  position: relative;
  z-index: 1;
}
.sp-age-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sp-ink-mid);
  margin: 0 0 20px;
  position: relative;
  z-index: 1;
}
.sp-age-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.sp-age-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sp-ink);
}
.sp-age-list li::before {
  content: "";
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sp-yellow);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23141520' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 11px 11px;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 1px;
}
.sp-age-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.sp-age-actions .agree {
  flex: 1 1 auto;
}

/* Inline link styling for the Terms & Conditions reference */
.sp-age-terms-link {
  color: var(--sp-red);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}
.sp-age-terms-link:hover { color: var(--sp-red-deep, #B83B4A); }

/* Exit link — quiet ghost style instead of a heavy ghost button */
.sp-age-exit {
  flex: 0 0 auto;
  font-family: var(--sp-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sp-ink-mid);
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 999px;
  transition: color 200ms ease, background 200ms ease;
}
.sp-age-exit:hover { color: var(--sp-ink); background: rgba(20, 21, 32, 0.06); }

/* ----- Mobile responsive ----- */
@media (max-width: 540px) {
  .sp-age-card {
    padding: 28px 22px;
    border-radius: 16px;
    border-top-width: 5px;
  }
  .sp-age-brandbar { margin-bottom: 18px; padding-bottom: 14px; gap: 10px; }
  .sp-age-brand-mark { width: 38px; height: 38px; font-size: 15px; border-width: 2px; }
  .sp-age-brand-text strong { font-size: 14px; }
  .sp-age-brand-text span { font-size: 9.5px; letter-spacing: 0.16em; }
  .sp-age-icon { width: 48px; height: 48px; font-size: 16px; }
  .sp-age-card h3 { font-size: 18px; line-height: 1.25; margin-bottom: 10px; }
  .sp-age-card p { font-size: 13px; margin-bottom: 16px; }
  .sp-age-list { margin-bottom: 22px; gap: 10px; }
  .sp-age-list li { font-size: 13px; }
  .sp-age-actions { gap: 4px; }
  .sp-age-actions .agree { width: 100%; flex-basis: 100%; justify-content: center; }
  .sp-age-exit { width: 100%; text-align: center; padding: 10px; }
}
@media (max-width: 380px) {
  .sp-age-card { padding: 22px 18px; }
  .sp-age-brand-mark { width: 34px; height: 34px; font-size: 14px; }
  .sp-age-brand-text strong { font-size: 13px; }
  .sp-age-icon { width: 44px; height: 44px; font-size: 14px; }
  .sp-age-card h3 { font-size: 16px; }
}

@media (max-width: 960px) {
  .sp-footer { padding: 56px 20px 0; }
  .sp-footer-brand { grid-template-columns: 1fr; gap: 32px; }
  .sp-footer-wordmark { font-size: 44px; }
  .sp-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 540px) {
  .sp-footer-bottom { justify-content: center; text-align: center; flex-direction: column; gap: 12px; }
  .sp-footer-cols { gap: 28px 16px; }
  .sp-footer-contact { padding: 12px 14px; gap: 10px; }
  .sp-footer-contact-icon { width: 34px; height: 34px; }
  .sp-footer-contact-text strong { font-size: 13px; }
}

/* =========================================================================
   FAQ SECTION — accordion using <details>
   ========================================================================= */
.sp-faq {
  background: var(--sp-cream);
  padding: 88px 40px;
}
.sp-faq-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.sp-faq-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-red);
  margin-bottom: 16px;
}
.sp-faq-head .kicker::before,
.sp-faq-head .kicker::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-red);
  border-radius: 2px;
}
.sp-faq-head h2 {
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0 0 14px;
}
.sp-faq-head h2 em { font-style: normal; color: var(--sp-red); }
.sp-faq-head p {
  font-size: 15px;
  color: var(--sp-ink-mid);
  margin: 0;
  line-height: 1.65;
}

.sp-faq-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  align-items: start;  /* prevent cards from stretching to match row height */
}

/* Accordion item using <details> */
.sp-faq-item {
  background: var(--sp-white);
  border: 1px solid rgba(20,21,32,0.08);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(20,21,32,0.04);
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.sp-faq-item[open] {
  border-color: var(--sp-red);
  box-shadow: 0 12px 28px rgba(230,57,70,0.12);
}
.sp-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  cursor: pointer;
  font-family: var(--sp-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--sp-ink);
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-item summary:hover { color: var(--sp-red); }
.sp-faq-item summary .icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(230,57,70,0.1);
  color: var(--sp-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 260ms cubic-bezier(.4,.0,.2,1), background 200ms ease;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}
.sp-faq-item[open] summary .icon {
  transform: rotate(45deg);
  background: var(--sp-red);
  color: var(--sp-white);
}
.sp-faq-item .answer {
  padding: 0 22px 20px;
  color: var(--sp-ink-mid);
  font-size: 14.5px;
  line-height: 1.7;
  border-top: 1px solid rgba(20,21,32,0.06);
  padding-top: 16px;
  margin-top: -4px;
}

@media (max-width: 800px) {
  .sp-faq { padding: 56px 20px; }
  .sp-faq-grid { grid-template-columns: 1fr; gap: 12px; }
  .sp-faq-item summary { padding: 16px 18px; font-size: 14px; }
}

/* =========================================================================
   RULES SECTION — icon tiles showing dos/don'ts
   ========================================================================= */
/* =========================================================================
   RULES & REGULATIONS — infographic style
   Dark backdrop + diagonal pinstripe + central yellow halo behind a dark
   disc, with 4 yellow pill-cards on each side. Icons are dark circles
   that pop off the inside edge of each pill (toward the center).
   ========================================================================= */
.sp-rules {
  background: #0A0A12;
  padding: 96px 40px;
  position: relative;
  overflow: hidden;
}
/* Diagonal pinstripe texture across the whole section */
.sp-rules::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.022) 0,
    rgba(255, 255, 255, 0.022) 1px,
    transparent 1px,
    transparent 10px
  );
  pointer-events: none;
}
/* Diagonal corner cuts (top-right + bottom-left), echoing the reference */
.sp-rules::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0 calc(100% - 60px), rgba(255,255,255,0.05) calc(100% - 60px) calc(100% - 30px), transparent calc(100% - 30px)) right top / 180px 180px no-repeat,
    linear-gradient(135deg, transparent 0 calc(100% - 60px), rgba(255,255,255,0.05) calc(100% - 60px) calc(100% - 30px), transparent calc(100% - 30px)) left bottom / 180px 180px no-repeat;
  pointer-events: none;
}

.sp-rules-stage {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* ---------- Side columns ---------- */
.sp-rules-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---------- Pill card ---------- */
.sp-rule-card {
  position: relative;
  background: linear-gradient(180deg, #FFD23A 0%, var(--sp-yellow) 50%, #D9A906 100%);
  border-radius: 999px;
  padding: 18px 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 14px 24px rgba(0, 0, 0, 0.45);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.sp-rule-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 18px 32px rgba(0, 0, 0, 0.55);
}

/* Wrapper around num + h4. On desktop it's invisible to layout
   (display:contents) so the existing desktop flex still works. On mobile
   it becomes a real flex container so num + h4 sit side-by-side as one
   "content block" that can be placed in either the yellow or dark zone. */
.sp-rule-content { display: contents; }

.sp-rule-num {
  font-family: var(--sp-sans);
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  color: var(--sp-ink);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.sp-rule-card h4 {
  flex: 1;
  margin: 0;
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: 15px;
  color: var(--sp-ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.sp-rule-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2A2A38 0%, #0F0F1A 70%);
  color: var(--sp-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 6px 14px rgba(0, 0, 0, 0.55);
  /* Pop the icon off the pill's inside edge — the side rules below
     decide which edge. */
}
.sp-rule-icon svg { width: 30px; height: 30px; }

/* LEFT side cards — number on far-left, icon pops out to the right (toward center) */
.sp-rules-left .sp-rule-card {
  padding-right: 14px;
  text-align: left;
}
.sp-rules-left .sp-rule-card h4 { text-align: left; padding-left: 6px; }
.sp-rules-left .sp-rule-icon {
  margin-right: -22px;   /* hangs off the inside (right) edge */
}

/* RIGHT side cards — icon pops off to the left (toward center), number on far-right */
.sp-rules-right .sp-rule-card {
  padding-left: 14px;
  text-align: right;
}
.sp-rules-right .sp-rule-card h4 { text-align: right; padding-right: 6px; }
.sp-rules-right .sp-rule-icon {
  margin-left: -22px;    /* hangs off the inside (left) edge */
}

/* ---------- Center hub: yellow halo behind a dark disc ---------- */
.sp-rules-center {
  position: relative;
  width: 360px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* The yellow ring/halo + offset shadow that gives the 3D feel */
.sp-rules-center-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    var(--sp-yellow) 0%,
    var(--sp-yellow) 64%,
    transparent 67%);
  /* Offset crescent shadow (matches the reference's curved drop) */
  filter: drop-shadow(18px 18px 0 rgba(245, 197, 24, 0.18));
}
.sp-rules-center-disc {
  position: relative;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2A2A38 0%, #0F0F1A 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 18px 40px rgba(0, 0, 0, 0.55);
  z-index: 2;
}
.sp-rules-center-kicker {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sp-yellow);
  margin-bottom: 8px;
}
.sp-rules-center-title {
  font-family: var(--sp-sans);
  font-weight: 900;
  font-size: 52px;
  line-height: 0.95;
  color: var(--sp-white);
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
}
.sp-rules-center-sub {
  margin-top: 10px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--sp-yellow);
  text-transform: uppercase;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sp-rules-center { width: 300px; height: 300px; }
  .sp-rules-center-title { font-size: 36px; }
}

/* ===== MOBILE — circular "warning seal" badges =====
   8 prohibition stamps in a 2×4 grid. Each card is a big dark-navy
   icon circle with a yellow ring + outer halo, a red NUMBER badge
   stamped on its top-right (notification-bubble style), and an
   uppercase title beneath. The mood is "collected warning seals"
   rather than "list of rules" — visually different from desktop
   yet still in the same dark/yellow/red palette. */
@media (max-width: 900px) {
  .sp-rules {
    background: var(--sp-navy);
    padding: 60px 20px 70px;
    overflow: hidden;
  }
  /* Subtle yellow dot pattern across the section */
  .sp-rules::before {
    inset: 0;
    background-image: radial-gradient(rgba(245, 197, 24, 0.07) 1.4px, transparent 1.4px);
    background-size: 22px 22px;
  }
  .sp-rules::after { display: none; }

  .sp-rules-stage {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 460px;
    margin: 0 auto;
    padding: 0;
  }

  /* Header — clean centered, no pill */
  .sp-rules-center {
    width: auto;
    height: auto;
    margin: 0 0 40px;
    order: -1;
    display: block;
  }
  .sp-rules-center-halo { display: none; }
  .sp-rules-center-disc {
    width: 100%; height: auto;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    text-align: center;
  }
  .sp-rules-center-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.32em;
    color: var(--sp-yellow);
    margin: 0 0 10px;
    text-transform: uppercase;
  }
  .sp-rules-center-kicker::before,
  .sp-rules-center-kicker::after {
    content: "";
    width: 22px; height: 2px;
    background: var(--sp-yellow);
    border-radius: 2px;
  }
  .sp-rules-center-title { font-size: 32px; color: var(--sp-cream); margin: 0; line-height: 1.05; }
  .sp-rules-center-sub { margin-top: 6px; font-size: 11px; color: var(--sp-yellow); letter-spacing: 0.32em; }

  /* Each side becomes its own 2-col grid; stacked = continuous 4×2 */
  .sp-rules-side {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 14px;
    padding: 0;
  }
  .sp-rules-left { margin-bottom: 32px; }

  /* CARD — transparent wrapper holding badge + title (no card chrome) */
  .sp-rule-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 12px 4px 4px;
    text-align: center;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: visible;
    grid-template-columns: none;
    transition: transform 220ms ease;
  }
  .sp-rule-card:hover,
  .sp-rule-card:active {
    transform: translateY(-3px);
  }
  .sp-rule-card::before,
  .sp-rule-card::after { display: none; content: none; }

  /* Reset desktop side overrides */
  .sp-rules-left .sp-rule-card,
  .sp-rules-right .sp-rule-card {
    padding: 12px 4px 4px;
    text-align: center;
    flex-direction: column;
  }
  .sp-rules-left .sp-rule-icon,
  .sp-rules-right .sp-rule-icon { margin: 0; }

  /* Force visual order: ICON on top, CONTENT (title) below — regardless
     of DOM order. LEFT cards have [content, icon] in DOM; RIGHT cards
     have [icon, content]. Without this, LEFT cards would render the
     title at the top and the number bubble would land on the title. */
  .sp-rule-card .sp-rule-icon    { order: 1; }
  .sp-rule-card .sp-rule-content { order: 2; }

  /* ICON — big circular "warning seal" badge */
  .sp-rule-icon {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 96px;
    height: 96px;
    flex: none;
    margin: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, #2A2A38 0%, #0F0F1A 70%);
    border: 2.5px solid var(--sp-yellow);
    color: var(--sp-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 0 0 6px rgba(245, 197, 24, 0.10),   /* outer yellow halo */
      0 14px 28px rgba(0, 0, 0, 0.6);
    z-index: 1;
    transition: box-shadow 220ms ease, border-color 220ms ease;
  }
  .sp-rule-icon svg { width: 42px; height: 42px; }
  .sp-rule-card:hover .sp-rule-icon,
  .sp-rule-card:active .sp-rule-icon {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 0 0 8px rgba(245, 197, 24, 0.16),
      0 18px 32px rgba(0, 0, 0, 0.7);
  }

  /* Content wrapper — column-stacked (only h4 visible inside) */
  .sp-rule-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: static;
  }
  .sp-rules-right .sp-rule-content { flex-direction: column; }

  /* NUMBER — RED notification-bubble stamp on the icon's top-right */
  .sp-rule-num {
    position: absolute;
    top: 4px;
    left: calc(50% + 32px);
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    background: var(--sp-red);
    color: var(--sp-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sp-sans);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-shadow: none;
    border: 2.5px solid var(--sp-navy);    /* matches section bg → "punched out" look */
    box-shadow: 0 4px 10px rgba(230, 57, 70, 0.5);
    z-index: 3;
    flex: none;
  }

  /* TITLE — uppercase cream below the badge */
  .sp-rule-card h4 {
    font-family: var(--sp-sans);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 1.3;
    color: var(--sp-cream);
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    max-width: 130px;
    flex: none;
  }

  /* Wipe out any per-parity rules from previous designs.
     IMPORTANT: keep `order` matching the base rule (icon=1, content=2)
     so the LEFT-container cards (DOM: content, icon) still render the
     icon on top and the title below. */
  .sp-rules-side .sp-rule-card:nth-child(odd),
  .sp-rules-side .sp-rule-card:nth-child(even) {
    padding: 12px 4px 4px;
    text-align: center;
  }
  .sp-rules-side .sp-rule-card:nth-child(odd) .sp-rule-icon,
  .sp-rules-side .sp-rule-card:nth-child(even) .sp-rule-icon {
    left: auto; transform: none; margin: 0; order: 1;
  }
  .sp-rules-side .sp-rule-card:nth-child(odd) .sp-rule-content,
  .sp-rules-side .sp-rule-card:nth-child(even) .sp-rule-content {
    grid-column: auto; justify-self: auto; padding: 0;
    flex-direction: column; order: 2;
  }
  .sp-rules-side .sp-rule-card:nth-child(odd) .sp-rule-num,
  .sp-rules-side .sp-rule-card:nth-child(even) .sp-rule-num {
    color: var(--sp-white); text-shadow: none;
  }
  .sp-rules-side .sp-rule-card:nth-child(odd) h4,
  .sp-rules-side .sp-rule-card:nth-child(even) h4 {
    color: var(--sp-cream); text-align: center; padding: 0;
  }
}

@media (max-width: 480px) {
  .sp-rules { padding: 48px 14px 60px; }
  .sp-rules-stage { padding: 0; }
  .sp-rules-side { gap: 26px 10px; }
  .sp-rules-left { margin-bottom: 26px; }
  .sp-rules-center { margin: 0 0 32px; }
  .sp-rules-center-title { font-size: 26px; }
  .sp-rules-center-sub { font-size: 10px; }

  .sp-rule-icon { width: 82px; height: 82px; }
  .sp-rule-icon svg { width: 36px; height: 36px; }
  .sp-rule-num {
    width: 30px;
    height: 30px;
    font-size: 11px;
    top: 2px;
    left: calc(50% + 28px);
    border-width: 2px;
  }
  .sp-rule-card h4 { font-size: 12px; max-width: 110px; }
}

/* =========================================================================
   REVIEWS SECTION — client testimonial screenshots on dark bg
   ========================================================================= */
.sp-reviews {
  background: var(--sp-navy);
  padding: 96px 40px;
  position: relative;
  overflow: hidden;
}
.sp-reviews::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(245,197,24,0.07), transparent 70%);
  pointer-events: none;
}
.sp-reviews::after {
  content: "\201C";
  position: absolute;
  top: 20px; left: 40px;
  font-family: var(--sp-serif, Georgia, serif);
  font-size: 280px;
  line-height: 0.8;
  color: rgba(245,197,24,0.08);
  pointer-events: none;
  font-weight: 900;
}

.sp-reviews-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.sp-reviews-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-yellow);
  margin-bottom: 16px;
}
.sp-reviews-head .kicker::before,
.sp-reviews-head .kicker::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-yellow);
  border-radius: 2px;
}
.sp-reviews-head h2 {
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sp-on-navy);
  margin: 0 0 14px;
}
.sp-reviews-head h2 em {
  font-style: normal;
  color: var(--sp-yellow);
}
.sp-reviews-head p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--sp-on-navy-dim);
  margin: 0;
}

.sp-reviews-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
  z-index: 2;
}

.sp-review-card {
  background: linear-gradient(180deg, var(--sp-navy-soft) 0%, #20233F 100%);
  border-radius: 18px;
  overflow: hidden;
  padding: 16px 14px 14px;
  border: 1px solid rgba(247,244,236,0.08);
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
  transition: transform 280ms cubic-bezier(.4,.0,.2,1),
              box-shadow 280ms ease,
              border-color 280ms ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 52px rgba(0,0,0,0.45);
  border-color: rgba(245,197,24,0.3);
}

/* Card header — stars + verified badge */
.sp-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px 0;
}
.sp-review-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--sp-yellow);
}
.sp-review-stars svg {
  width: 14px; height: 14px;
  fill: currentColor;
}
.sp-review-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(34,197,94,0.14);
  color: #4ADE80;
  font-family: var(--sp-sans);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sp-review-verified svg {
  width: 10px; height: 10px;
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
}

/* Screenshot image */
.sp-review-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(247,244,236,0.06);
}

/* Card footer — client attribution */
.sp-review-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 0;
  border-top: 1px solid rgba(247,244,236,0.08);
  padding-top: 10px;
}
.sp-review-client {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sp-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sp-on-navy);
  letter-spacing: 0.02em;
}
.sp-review-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0;
  flex-shrink: 0;
}
.sp-review-date {
  font-family: var(--sp-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--sp-on-navy-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .sp-reviews { padding: 64px 0; }
  .sp-reviews-head { padding: 0 20px; }
  .sp-reviews-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    padding: 0 20px 10px;
    scroll-padding-left: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sp-reviews-grid::-webkit-scrollbar { display: none; }
  .sp-review-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
}
@media (max-width: 420px) {
  .sp-review-card { flex: 0 0 240px; }
}

/* =========================================================================
   LOCATIONS CARD — split layout with cream top, red strip, dark photo row
   ========================================================================= */
.sp-locations {
  background: var(--sp-cream);
  padding: 88px 40px;
}
.sp-locations-card {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--sp-white);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(20,21,32,0.14);
  border: 1px solid rgba(20,21,32,0.06);
  position: relative;
}
/* Decorative waves/dots on top-left corner */
.sp-locations-card::before {
  content: "";
  position: absolute;
  top: -40px; left: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(rgba(245,197,24,0.08) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  pointer-events: none;
}

.sp-locations-top {
  padding: 52px 56px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.sp-locations-head { display: flex; flex-direction: column; }
.sp-locations-count {
  font-family: var(--sp-sans);
  font-weight: 900;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--sp-ink);
  margin: 0 0 4px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.sp-locations-count sup {
  font-size: 0.4em;
  font-weight: 800;
  color: var(--sp-red);
  top: -0.6em;
  position: relative;
}
.sp-locations-label {
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0 0 16px;
}
.sp-locations-label em {
  font-style: normal;
  font-family: var(--sp-script);
  color: var(--sp-red);
  font-size: 1.05em;
  font-weight: 400;
  margin-left: 4px;
}
.sp-locations-sub {
  font-size: 14px;
  line-height: 1.65;
  color: var(--sp-ink-mid);
  margin: 0;
  max-width: 360px;
}

.sp-locations-right { display: flex; flex-direction: column; gap: 18px; }

.sp-locations-badge {
  align-self: flex-start;
  background: var(--sp-red);
  color: var(--sp-white);
  padding: 8px 20px;
  border-radius: 999px;
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(230,57,70,0.3);
  white-space: nowrap;
}
.sp-locations-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sp-locations-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sp-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--sp-ink);
  text-decoration: none;
  padding: 4px 0;
  transition: color 200ms ease, transform 200ms ease;
}
.sp-locations-list a::before {
  content: "•";
  color: var(--sp-red);
  font-size: 22px;
  line-height: 0.5;
  flex-shrink: 0;
}
.sp-locations-list a:hover {
  color: var(--sp-red);
  transform: translateX(3px);
}

/* View All — styled as a list item with red accent + arrow */
.sp-locations-list li.viewall-item a {
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: 14px;
  color: var(--sp-red);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  gap: 6px;
  padding: 6px 0;
  white-space: nowrap;
}
.sp-locations-list li.viewall-item a::before {
  display: none;
}
.sp-locations-list li.viewall-item a svg {
  transition: transform 200ms ease;
}
.sp-locations-list li.viewall-item a:hover {
  color: var(--sp-ink);
  transform: translateX(3px);
}
.sp-locations-list li.viewall-item a:hover svg { transform: translateX(3px); }

/* Red strip divider */
.sp-locations-strip {
  height: 10px;
  background: linear-gradient(90deg, var(--sp-red) 0%, #F07078 50%, var(--sp-red) 100%);
  position: relative;
}
.sp-locations-strip::after {
  /* subtle diagonal texture */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0) 0 8px, rgba(255,255,255,0.1) 8px 10px);
  pointer-events: none;
}

/* Dark gallery strip */
.sp-locations-gallery {
  background: var(--sp-navy);
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  position: relative;
}
.sp-locations-photo {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--sp-navy-soft);
  display: block;
  text-decoration: none;
  transition: transform 260ms cubic-bezier(.4,.0,.2,1);
}
.sp-locations-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.4,.0,.2,1);
}
.sp-locations-photo:hover { transform: translateY(-4px); }
.sp-locations-photo:hover img { transform: scale(1.08); }
.sp-locations-photo .name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 12px 10px;
  color: var(--sp-white);
  font-family: var(--sp-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  background: linear-gradient(to top, rgba(15,16,32,0.9), transparent);
  text-transform: capitalize;
}

@media (max-width: 960px) {
  .sp-locations { padding: 56px 20px; }
  .sp-locations-top {
    grid-template-columns: 1fr;
    padding: 36px 28px;
    gap: 28px;
    text-align: center;
  }
  .sp-locations-head { align-items: center; }
  .sp-locations-right { align-items: center; }
  .sp-locations-badge { align-self: center; }
  .sp-locations-list { width: 100%; text-align: left; }

  /* Horizontal scroll gallery on mobile — all photos visible, swipeable */
  .sp-locations-gallery {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    padding: 20px 22px;
    scroll-padding-left: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .sp-locations-gallery::-webkit-scrollbar { display: none; } /* Safari/Chrome */
  .sp-locations-photo {
    flex: 0 0 160px;
    scroll-snap-align: start;
  }
}

@media (max-width: 520px) {
  .sp-locations-list {
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
  }
  .sp-locations-list a { font-size: 13px; gap: 8px; }
  .sp-locations-list a::before { font-size: 18px; }
  .sp-locations-list li.viewall-item a { font-size: 12.5px; }
  .sp-locations-list li.viewall-item .hide-mobile { display: none; }
  .sp-locations-photo { flex: 0 0 140px; }
}

/* =========================================================================
   COMPARE SECTION — side-by-side comparison cards (Escorts vs Relationships)
   ========================================================================= */
.sp-compare {
  background: var(--sp-cream);
  padding: 80px 40px 96px;
}
.sp-compare-head {
  max-width: 900px;
  margin: 0 auto 48px;
  text-align: center;
}
.sp-compare-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-red);
  margin-bottom: 14px;
}
.sp-compare-head .kicker::before,
.sp-compare-head .kicker::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-red);
  border-radius: 2px;
}
.sp-compare-head h2 {
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0;
}
.sp-compare-head h2 em {
  font-style: normal;
  color: var(--sp-red);
}

.sp-compare-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
  position: relative;
}
/* Center divider */
.sp-compare-grid::before {
  content: "VS";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.06em;
  z-index: 4;
  box-shadow: 0 8px 20px rgba(245,197,24,0.35);
}

.sp-compare-card {
  background: var(--sp-white);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 28px rgba(20,21,32,0.08);
  border: 1px solid rgba(20,21,32,0.06);
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.sp-compare-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(20,21,32,0.14);
}

.sp-compare-banner {
  position: relative;
  padding: 36px 32px 28px;
  color: var(--sp-white);
  overflow: hidden;
}
.sp-compare-banner::before {
  /* soft dotted pattern */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  pointer-events: none;
}
.sp-compare-card.escorts .sp-compare-banner {
  background: linear-gradient(135deg, var(--sp-red) 0%, #9F1E28 100%);
}
.sp-compare-card.relationships .sp-compare-banner {
  background: linear-gradient(135deg, var(--sp-navy) 0%, #262C50 100%);
}
.sp-compare-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.sp-compare-icon svg { width: 26px; height: 26px; color: var(--sp-white); }
.sp-compare-banner h3 {
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--sp-white);
  margin: 0 0 6px;
  position: relative; z-index: 1;
}
.sp-compare-banner p {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
  margin: 0;
  max-width: 340px;
  position: relative; z-index: 1;
}

.sp-compare-body { padding: 26px 30px 28px; }
.sp-compare-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sp-compare-body li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--sp-ink);
  font-weight: 500;
}
.sp-compare-body li .dot {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.sp-compare-card.escorts .dot {
  background: rgba(230,57,70,0.14);
  color: var(--sp-red);
}
.sp-compare-card.relationships .dot {
  background: rgba(15,16,32,0.08);
  color: var(--sp-navy);
}
.sp-compare-body li .dot svg { width: 13px; height: 13px; }

@media (max-width: 820px) {
  .sp-compare { padding: 56px 20px 72px; }
  .sp-compare-grid { grid-template-columns: 1fr; gap: 48px; }
  .sp-compare-grid::before {
    top: auto;
    bottom: 50%;
    /* hide the VS circle on mobile; the visual stack speaks for itself */
    display: none;
  }
  .sp-compare-banner { padding: 28px 22px 22px; }
  .sp-compare-banner h3 { font-size: 24px; }
  .sp-compare-body { padding: 22px; }
}

/* =========================================================================
   STEPS SECTION — how-it-works with numbered cards
   ========================================================================= */
.sp-steps {
  background: var(--sp-navy);
  color: var(--sp-on-navy);
  padding: 96px 40px;
  position: relative;
  overflow: hidden;
}
.sp-steps::before {
  content: "";
  position: absolute;
  bottom: -20%; left: 50%;
  width: 60%; height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(245,197,24,0.06), transparent 70%);
  pointer-events: none;
}

.sp-steps-head {
  max-width: 900px;
  margin: 0 auto 56px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.sp-steps-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-yellow);
  margin-bottom: 18px;
}
.sp-steps-head .kicker::before,
.sp-steps-head .kicker::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-yellow);
  border-radius: 2px;
}
.sp-steps-head h2 {
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sp-on-navy);
  margin: 0 0 16px;
}
.sp-steps-head h2 em {
  font-style: normal;
  color: var(--sp-yellow);
}
.sp-steps-head p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--sp-on-navy-dim);
  margin: 0;
}

.sp-steps-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}

.sp-step-card {
  background: var(--sp-navy-soft);
  border-radius: 18px;
  padding: 32px 26px 28px;
  position: relative;
  transition: transform 260ms cubic-bezier(.4,.0,.2,1),
              box-shadow 260ms ease;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}
.sp-step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
}
.sp-step-num {
  font-family: var(--sp-sans);
  font-weight: 900;
  font-size: 72px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(245,197,24,0.3);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
  display: inline-block;
}
.sp-step-icon {
  position: absolute;
  top: 32px; right: 26px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sp-step-icon svg { width: 20px; height: 20px; }
.sp-step-card h3 {
  font-weight: 800;
  font-size: 17px;
  color: var(--sp-on-navy);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.sp-step-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sp-on-navy-dim);
  margin: 0;
}

/* Tips card (cream, sits below steps) */
.sp-tips {
  max-width: 900px;
  margin: 72px auto 0;
  position: relative;
  z-index: 2;
  background: var(--sp-cream);
  color: var(--sp-ink);
  border-radius: 20px;
  padding: 40px 44px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.25);
}
.sp-tips-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sp-red);
  margin-bottom: 10px;
}
.sp-tips-kicker::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--sp-red);
  border-radius: 2px;
}
.sp-tips h3 {
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0 0 20px;
  line-height: 1.15;
}
.sp-tips ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}
.sp-tips li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sp-ink-mid);
}
.sp-tips li::before {
  content: "";
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--sp-yellow);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23141520' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 1px;
}

@media (max-width: 960px) {
  .sp-steps { padding: 64px 20px; }
  .sp-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sp-step-card { padding: 26px 22px 24px; }
  .sp-step-num { font-size: 56px; }
  .sp-step-icon { width: 38px; height: 38px; }
  .sp-step-icon svg { width: 17px; height: 17px; }
  .sp-tips { padding: 32px 28px; margin-top: 48px; }
  .sp-tips ul { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sp-steps-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   SPLIT SECTION — text + photo grid (navy background)
   Used for "Shed all your stress" type marketing blocks.
   ========================================================================= */
.sp-split {
  background: var(--sp-navy);
  color: var(--sp-on-navy);
  padding: 96px 40px;
  position: relative;
  overflow: hidden;
}
.sp-split::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 60%; height: 500px;
  background: radial-gradient(ellipse at center, rgba(245,197,24,0.08), transparent 70%);
  pointer-events: none;
}

/* Light/cream variant — flips copy colors for a soft closing section.
   Kicker + em accents go red on cream. Buttons keep their default colors. */
.sp-split.sp-split--light {
  background: var(--sp-cream);
  color: var(--sp-ink);
}
.sp-split.sp-split--light::before {
  background: radial-gradient(ellipse at center, rgba(230,57,70,0.06), transparent 70%);
}
.sp-split.sp-split--light .sp-split-copy .kicker {
  color: var(--sp-red);
}
.sp-split.sp-split--light .sp-split-copy .kicker::before {
  background: var(--sp-red);
}
.sp-split.sp-split--light .sp-split-copy h2 {
  color: var(--sp-ink);
}
.sp-split.sp-split--light .sp-split-copy h2 em {
  color: var(--sp-red);
}
.sp-split.sp-split--light .sp-split-copy p {
  color: var(--sp-ink-mid);
}
.sp-split.sp-split--light .sp-split-copy p strong,
.sp-split.sp-split--light .sp-split-copy p b {
  color: var(--sp-ink);
}

/* Text-only variant — no right-column photo duo, copy centers full-width.
   Used on location detail closing CTAs where location images would duplicate. */
.sp-split.sp-split--text .sp-split-inner {
  grid-template-columns: 1fr;
  max-width: 780px;
  text-align: center;
}
.sp-split.sp-split--text .sp-split-copy { text-align: center; }
.sp-split.sp-split--text .sp-split-copy .kicker {
  margin-left: auto;
  margin-right: auto;
}
.sp-split.sp-split--text .sp-copy-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* On mobile, keep Call + WhatsApp buttons side-by-side in a single row.
   Buttons share the row equally; padding/text shrink so both fit. */
@media (max-width: 560px) {
  .sp-split.sp-split--light .sp-copy-cta {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
  }
  .sp-split.sp-split--light .sp-copy-cta .sp-btn-large {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 10px;
    font-size: 13px;
    gap: 6px;
  }
  .sp-split.sp-split--light .sp-copy-cta .sp-btn-large svg {
    flex-shrink: 0;
  }
}
.sp-split-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.sp-split-copy .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-yellow);
  margin-bottom: 20px;
}
.sp-split-copy .kicker::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-yellow);
  border-radius: 2px;
}

.sp-split-copy h2 {
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--sp-on-navy);
  margin: 0 0 24px;
}
.sp-split-copy h2 em {
  font-style: normal;
  color: var(--sp-yellow);
}

.sp-split-copy p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--sp-on-navy-dim);
  margin: 0 0 18px;
}
.sp-split-copy p:last-of-type { margin-bottom: 32px; }
.sp-split-copy p strong, .sp-split-copy p b {
  color: var(--sp-on-navy);
  font-weight: 700;
}

/* 2x2 photo grid */
.sp-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.sp-split-photo {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 16px;
  background: var(--sp-navy-soft);
  transition: transform 280ms cubic-bezier(.4,.0,.2,1),
              box-shadow 280ms ease;
  cursor: pointer;
}
.sp-split-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(.4,.0,.2,1);
}
.sp-split-photo:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.4);
}
.sp-split-photo:hover img { transform: scale(1.08); }

/* Offset alternating photos for rhythm */
.sp-split-photo:nth-child(2) { transform: translateY(20px); }
.sp-split-photo:nth-child(2):hover { transform: translateY(16px); }
.sp-split-photo:nth-child(3) { transform: translateY(-20px); }
.sp-split-photo:nth-child(3):hover { transform: translateY(-24px); }

/* Duo variant — 2 circular photos side-by-side */
.sp-split-duo {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.sp-split-circle {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 260px;
  flex: 1 1 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sp-navy-soft);
  box-shadow: 0 14px 30px rgba(0,0,0,0.4);
  transition: transform 320ms cubic-bezier(.4,.0,.2,1), box-shadow 320ms ease;
}
.sp-split-circle img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(.4,.0,.2,1);
}
.sp-split-circle:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(0,0,0,0.5); }
.sp-split-circle:hover img { transform: scale(1.08); }

/* Accent ring on each circle */
.sp-split-circle::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid var(--sp-yellow);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
.sp-split-circle:nth-child(1) { transform: translateY(-16px); }
.sp-split-circle:nth-child(1):hover { transform: translateY(-22px); }
.sp-split-circle:nth-child(2) { transform: translateY(16px); }
.sp-split-circle:nth-child(2):hover { transform: translateY(10px); }
.sp-split-circle:nth-child(2)::before { border-color: var(--sp-red); opacity: 0.6; }

@media (max-width: 960px) {
  .sp-split-duo { gap: 14px; }
  .sp-split-circle { max-width: 180px; }
  .sp-split-circle:nth-child(1),
  .sp-split-circle:nth-child(2) { transform: none; }
  .sp-split-circle:nth-child(1):hover,
  .sp-split-circle:nth-child(2):hover { transform: translateY(-5px); }
}

@media (max-width: 960px) {
  .sp-split { padding: 64px 20px; }
  .sp-split-inner { grid-template-columns: 1fr; gap: 40px; }
  .sp-split-copy h2 { font-size: clamp(28px, 6vw, 40px); }
  .sp-split-grid { gap: 10px; }
  .sp-split-photo:nth-child(2),
  .sp-split-photo:nth-child(3) { transform: none; }
  .sp-split-photo:nth-child(2):hover,
  .sp-split-photo:nth-child(3):hover { transform: translateY(-4px); }
}

/* =========================================================================
   RECIPE CARDS — compact profile grid (Independent Escorts)
   Photo top, category + age pills, name, likes + views stats.
   ========================================================================= */
.sp-recipe-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.sp-recipe-card {
  background: var(--sp-navy);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 20px rgba(20,21,32,0.15);
  transition: transform 280ms cubic-bezier(.4,.0,.2,1),
              box-shadow 280ms cubic-bezier(.4,.0,.2,1);
  display: flex;
  flex-direction: column;
}
.sp-recipe-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 52px rgba(20,21,32,0.28);
}

.sp-recipe-photo {
  position: relative;
  aspect-ratio: 4/5;
  display: block;
  overflow: hidden;
  background: var(--sp-navy-soft);
  text-decoration: none;
}
.sp-recipe-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.4,.0,.2,1);
}
.sp-recipe-card:hover .sp-recipe-photo img { transform: scale(1.06); }

/* Top-left category tag */
.sp-recipe-tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  background: var(--sp-red);
  color: var(--sp-white);
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: calc(100% - 80px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(230,57,70,0.35);
}

/* Top-right live status */
.sp-recipe-live {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  background: rgba(247,244,236,0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--sp-ink);
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sp-recipe-live .dot {
  width: 7px; height: 7px;
  background: #22C55E;
  border-radius: 50%;
  animation: sp-live-pulse 1.6s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
}

/* Age pill bottom-center on photo */
.sp-recipe-age {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Body */
.sp-recipe-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-recipe-name {
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: 16px;
  color: var(--sp-on-navy);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 200ms ease;
}
.sp-recipe-name:hover { color: var(--sp-yellow); }

.sp-recipe-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(247,244,236,0.12);
}

.sp-recipe-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sp-sans);
  font-weight: 700;
  font-size: 12px;
  color: var(--sp-on-navy-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  cursor: default;
  background: transparent;
  border: 0;
}
.sp-recipe-stat svg { width: 14px; height: 14px; }
.sp-recipe-stat.likes svg { color: var(--sp-red); }
.sp-recipe-stat.views svg { color: var(--sp-yellow); }
.sp-recipe-stat.like-button { cursor: pointer; transition: transform 180ms ease; }
.sp-recipe-stat.like-button:hover { transform: scale(1.08); }

/* Load more button */
.sp-loadmore-wrap {
  text-align: center;
  margin-top: 48px;
}
.sp-loadmore-btn {
  background: var(--sp-ink);
  color: var(--sp-yellow);
  border: 0;
  padding: 14px 36px;
  border-radius: 999px;
  font-family: var(--sp-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 220ms ease;
  box-shadow: 0 8px 20px rgba(20,21,32,0.2);
}
.sp-loadmore-btn:hover {
  background: var(--sp-red);
  color: var(--sp-white);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(230,57,70,0.35);
}
.sp-loadmore-btn svg { width: 14px; height: 14px; }
.sp-loadmore-status {
  display: block;
  color: var(--sp-ink-mid);
  font-weight: 500;
  font-size: 13px;
  margin-top: 18px;
  letter-spacing: 0.02em;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
.sp-menu-section .sp-loadmore-status {
  color: var(--sp-on-navy-dim);
}

/* Section head "online now" live indicator */
.sp-section-head .live-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 14px;
  background: rgba(34,197,94,0.12);
  color: #0F7D3A;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sp-section-head .live-count .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22C55E;
  animation: sp-live-pulse 1.6s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
}

@media (max-width: 1100px) {
  .sp-recipe-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .sp-recipe-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sp-recipe-body { padding: 14px 14px 16px; gap: 8px; }
  .sp-recipe-name { font-size: 14px; }
  .sp-recipe-stat { font-size: 11px; }
  .sp-recipe-tag { font-size: 9px; padding: 4px 8px; }
  .sp-recipe-age { font-size: 10px; padding: 4px 12px; }
  .sp-recipe-live { font-size: 9px; padding: 3px 8px 3px 6px; }
}
@media (max-width: 420px) {
  .sp-recipe-grid { gap: 12px; }
  .sp-recipe-body { padding: 12px; }
}

/* =========================================================================
   SP-COPY — long-form editorial text block (cream bg)
   Used for multiple SEO text sections
   ========================================================================= */
.sp-copy {
  background: var(--sp-cream);
  padding: 80px 40px;
}
.sp-copy-inner {
  max-width: 1040px;
  margin: 0 auto;
}

/* When sp-copy sections stack (e.g. the Call Girls tip blocks),
   collapse the doubled vertical padding so sections don't drift apart. */
.sp-copy + .sp-copy { padding-top: 0; }
@supports selector(:has(*)) {
  .sp-copy:has(+ .sp-copy) { padding-bottom: 32px; }
}
.sp-copy .sp-copy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-red);
  margin-bottom: 14px;
}
.sp-copy .sp-copy-eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-red);
  border-radius: 2px;
}
.sp-copy h2 {
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 56px 0 18px;
}
.sp-copy h2:first-of-type { margin-top: 0; }
.sp-copy h2 em {
  font-style: normal;
  color: var(--sp-red);
}
.sp-copy h2 + p { margin-top: 0; }
.sp-copy h3 {
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--sp-ink);
  margin: 36px 0 12px;
}
.sp-copy h3 em {
  font-style: normal;
  color: var(--sp-red);
}
.sp-copy h3 + p { margin-top: 0; }
.sp-copy p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--sp-ink-mid);
  margin: 0 0 18px;
}
.sp-copy p strong,
.sp-copy p b {
  color: var(--sp-ink);
  font-weight: 700;
}
.sp-copy ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 28px;
}
.sp-copy ul li {
  position: relative;
  padding: 12px 0 12px 40px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sp-ink);
  border-bottom: 1px dashed rgba(20,21,32,0.10);
}
.sp-copy ul li:last-child { border-bottom: 0; }
.sp-copy ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 24px; height: 24px;
  background-color: var(--sp-yellow);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23141520' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center;
}
.sp-copy-cta {
  margin-top: 40px;
  text-align: center;
}
@media (max-width: 880px) {
  .sp-copy { padding: 56px 20px; }
  .sp-copy h2 { margin: 36px 0 14px; }
}

/* =========================================================================
   PROFILE DETAIL PAGE — components used on profiledetails.php
   ========================================================================= */

/* Hero name headline — no nowrap, allow wrapping for long names */
.sp-hero-headline.sp-hero-headline--name {
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* Stat chips below the profile name in the hero */
.sp-profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 36px;
}
.sp-profile-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(247, 244, 236, 0.06);
  border: 1px solid rgba(247, 244, 236, 0.12);
  border-radius: 12px;
  padding: 10px 16px;
  min-width: 90px;
}
.sp-profile-chip .label {
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-on-navy-dim);
}
.sp-profile-chip .value {
  font-weight: 800;
  font-size: 15px;
  color: var(--sp-yellow);
  letter-spacing: -0.01em;
}

/* --- Photo gallery --- */
.sp-gallery-section {
  background: var(--sp-cream);
  padding: 80px 40px;
}
.sp-gallery-head {
  max-width: 1280px;
  margin: 0 auto 40px;
  text-align: center;
}
.sp-gallery-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-red);
  margin-bottom: 14px;
}
.sp-gallery-head .kicker::before,
.sp-gallery-head .kicker::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-red);
  border-radius: 2px;
}
.sp-gallery-head h2 {
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0;
}
.sp-gallery-head h2 em {
  font-style: normal;
  color: var(--sp-red);
}

.sp-gallery-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  gap: 14px;
}
/* First tile is the "magazine lead" — spans 2x2 on desktop */
.sp-gallery-grid .sp-gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.sp-gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(20, 21, 32, 0.15);
  background: var(--sp-navy-soft);
  cursor: zoom-in;
  transition: transform 280ms cubic-bezier(.4,.0,.2,1),
              box-shadow 280ms ease;
}
.sp-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(20, 21, 32, 0.32);
}
.sp-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(.4,.0,.2,1);
}
.sp-gallery-item:hover img { transform: scale(1.08); }

/* Hover overlay — gradient + caption slide-up + zoom icon */
.sp-gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(15, 16, 32, 0.72) 0%,
    rgba(15, 16, 32, 0.3) 40%,
    transparent 70%);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
  z-index: 1;
}
.sp-gallery-item::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sp-yellow);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23141520' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/><line x1='11' y1='8' x2='11' y2='14'/><line x1='8' y1='11' x2='14' y2='11'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(.4,.0,.2,1);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.sp-gallery-item:hover::before { opacity: 1; }
.sp-gallery-item:hover::after { opacity: 1; transform: translateY(0); }

/* --- Lightbox dialog --- */
.sp-lightbox {
  border: 0;
  background: rgba(15, 16, 32, 0.96);
  color: var(--sp-on-navy);
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  margin: 0;
  inset: 0;
}
.sp-lightbox::backdrop {
  background: rgba(15, 16, 32, 0.92);
  backdrop-filter: blur(4px);
}
.sp-lightbox[open] {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  padding: 48px 64px;
  box-sizing: border-box;
}
.sp-lightbox-img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.sp-lightbox-caption {
  color: var(--sp-on-navy-dim);
  font-size: 13px;
  text-align: center;
  margin: 16px 0 0;
  padding: 0 20px;
}
.sp-lightbox-close,
.sp-lightbox-prev,
.sp-lightbox-next {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(247, 244, 236, 0.12);
  border: 0;
  color: var(--sp-on-navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, transform 200ms ease;
  z-index: 2;
}
.sp-lightbox-close:hover,
.sp-lightbox-prev:hover,
.sp-lightbox-next:hover {
  background: var(--sp-yellow);
  color: var(--sp-ink);
  transform: scale(1.08);
}
.sp-lightbox-close svg,
.sp-lightbox-prev svg,
.sp-lightbox-next svg { width: 20px; height: 20px; }
.sp-lightbox-close { top: 20px; right: 20px; }
.sp-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.sp-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.sp-lightbox-prev:hover { transform: translateY(-50%) scale(1.08); }
.sp-lightbox-next:hover { transform: translateY(-50%) scale(1.08); }

/* --- About + Stats split (inside sp-copy variant) --- */
.sp-bio-section .sp-bio-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1120px;
}
.sp-bio-main p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--sp-ink-mid);
}
.sp-stats-card {
  background: var(--sp-navy);
  color: var(--sp-on-navy);
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: 0 18px 40px rgba(20, 21, 32, 0.2);
  position: sticky;
  top: 24px;
}
.sp-stats-card h3 {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-yellow);
  margin: 0 0 18px;
}
.sp-stats-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin: 0;
}
.sp-stats-list dt {
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-on-navy-dim);
  margin: 0;
}
.sp-stats-list dd {
  font-weight: 700;
  font-size: 14px;
  color: var(--sp-on-navy);
  margin: 0 0 4px;
  text-align: right;
  letter-spacing: -0.01em;
}

/* --- Rates section --- */
.sp-rates-section {
  background: var(--sp-navy);
  color: var(--sp-on-navy);
  padding: 88px 40px;
  position: relative;
  overflow: hidden;
}
.sp-rates-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(245,197,24,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
}
.sp-rates-head {
  max-width: 1080px;
  margin: 0 auto 48px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.sp-rates-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-yellow);
  margin-bottom: 14px;
}
.sp-rates-head .kicker::before,
.sp-rates-head .kicker::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-yellow);
  border-radius: 2px;
}
.sp-rates-head h2 {
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.02em;
  color: var(--sp-on-navy);
  margin: 0 0 14px;
}
.sp-rates-head h2 em {
  font-style: normal;
  color: var(--sp-yellow);
}
.sp-rates-head p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--sp-on-navy-dim);
  margin: 0;
}

.sp-rates-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative;
  z-index: 2;
}
.sp-rate-card {
  background: var(--sp-navy-soft);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  position: relative;
  transition: transform 260ms cubic-bezier(.4,.0,.2,1),
              box-shadow 260ms ease;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
.sp-rate-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.38);
}
.sp-rate-card.is-popular {
  background: var(--sp-yellow);
  color: var(--sp-ink);
  box-shadow: 0 18px 40px rgba(245,197,24,0.28);
}
.sp-rate-card.is-popular:hover {
  box-shadow: 0 28px 56px rgba(245,197,24,0.4);
}
.sp-rate-ribbon {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--sp-ink);
  color: var(--sp-yellow);
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(20,21,32,0.3);
}
.sp-rate-duration {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-on-navy-dim);
  margin-bottom: 10px;
}
.sp-rate-card.is-popular .sp-rate-duration { color: rgba(20,21,32,0.7); }
.sp-rate-price {
  font-weight: 900;
  font-size: 26px;
  color: var(--sp-on-navy);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
}
.sp-rate-card.is-popular .sp-rate-price { color: var(--sp-ink); }
.sp-rate-note {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--sp-on-navy-dim);
}
.sp-rate-card.is-popular .sp-rate-note { color: rgba(20,21,32,0.72); }

/* Optional feature bullets list inside a rate card (used on /price) */
.sp-rate-features {
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(247,244,236,0.14);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.45;
}
.sp-rate-card.is-popular .sp-rate-features {
  border-top-color: rgba(20,21,32,0.18);
}
.sp-rate-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--sp-on-navy-dim);
}
.sp-rate-card.is-popular .sp-rate-features li {
  color: rgba(20,21,32,0.78);
}
.sp-rate-features li::before {
  content: "";
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--sp-yellow);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23141520' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: center;
}
.sp-rate-card.is-popular .sp-rate-features li::before {
  background-color: var(--sp-ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F5C518' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.sp-rate-cta {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.sp-rate-cta .sp-btn {
  padding: 10px 18px;
  font-size: 12px;
}

/* --- Services section --- */
.sp-services-section {
  background: var(--sp-cream);
  padding: 80px 40px;
}
.sp-services-head {
  max-width: 1080px;
  margin: 0 auto 36px;
  text-align: center;
}
.sp-services-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-red);
  margin-bottom: 14px;
}
.sp-services-head .kicker::before,
.sp-services-head .kicker::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-red);
  border-radius: 2px;
}
.sp-services-head h2 {
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0;
}
.sp-services-head h2 em {
  font-style: normal;
  color: var(--sp-red);
}
.sp-services-grid {
  max-width: 920px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.sp-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sp-navy);
  color: var(--sp-on-navy);
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgba(20,21,32,0.18);
  transition: transform 200ms ease, background 200ms ease;
}
.sp-service-chip::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sp-yellow);
  flex-shrink: 0;
}
.sp-service-chip:hover {
  transform: translateY(-2px);
  background: var(--sp-ink);
}
.sp-services-note {
  text-align: center;
  margin: 32px 0 0;
  font-size: 13px;
  color: var(--sp-ink-mid);
  font-style: italic;
}

/* --- Profile reviews (rendered from DB) --- */
.sp-profile-reviews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}
.sp-profile-review {
  background: var(--sp-white);
  border: 1px solid rgba(20, 21, 32, 0.08);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 8px 20px rgba(20, 21, 32, 0.06);
}
.sp-profile-review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.sp-profile-review-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  font-weight: 900;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sp-profile-review-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sp-profile-review-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--sp-ink);
  letter-spacing: -0.01em;
}
.sp-profile-review-stars {
  display: inline-flex;
  gap: 2px;
  color: rgba(20, 21, 32, 0.18);
}
.sp-profile-review-stars svg { width: 13px; height: 13px; }
.sp-profile-review-stars svg.is-filled { color: var(--sp-yellow); }
.sp-profile-review-date {
  font-size: 11px;
  color: var(--sp-ink-mid);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sp-profile-review-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sp-ink-mid);
  margin: 0;
}
.sp-profile-reviews-empty {
  font-size: 15px;
  color: var(--sp-ink-mid);
  font-style: italic;
  padding: 20px 0 0;
}

/* --- Review submission form --- */
.sp-review-form-wrap {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(20, 21, 32, 0.08);
}
.sp-review-form-wrap h3 {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--sp-ink);
  margin: 0 0 6px;
}
.sp-review-form-sub {
  font-size: 13.5px;
  color: var(--sp-ink-mid);
  margin: 0 0 20px;
}

.sp-review-form,
.sp-contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Honeypot — positioned offscreen but still rendered so bots fill it */
.sp-review-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.sp-review-row,
.sp-contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sp-review-field label,
.sp-contact-field label {
  display: block;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-ink-mid);
  margin-bottom: 8px;
}
.sp-review-field input,
.sp-review-field textarea,
.sp-contact-field input,
.sp-contact-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--sp-white);
  border: 1px solid rgba(20, 21, 32, 0.14);
  border-radius: 10px;
  font-family: var(--sp-sans);
  font-size: 14px;
  color: var(--sp-ink);
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  box-sizing: border-box;
}
.sp-review-field textarea,
.sp-contact-field textarea { resize: vertical; min-height: 96px; }
.sp-review-field input:focus,
.sp-review-field textarea:focus,
.sp-contact-field input:focus,
.sp-contact-field textarea:focus {
  border-color: var(--sp-yellow);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.2);
}

.sp-star-rating {
  display: inline-flex;
  gap: 4px;
}
.sp-star {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: rgba(20, 21, 32, 0.2);
  transition: color 150ms ease, transform 150ms ease;
  line-height: 0;
}
.sp-star:hover { transform: scale(1.1); }
.sp-star svg { width: 26px; height: 26px; }
.sp-star.is-active { color: var(--sp-yellow); }

.sp-review-form .sp-btn {
  align-self: flex-start;
  margin-top: 4px;
}

.sp-review-msg {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
}
.sp-review-msg.is-success { color: #16a34a; }
.sp-review-msg.is-error { color: var(--sp-red); }

@media (max-width: 560px) {
  .sp-review-row,
  .sp-contact-row { grid-template-columns: 1fr; }
  .sp-star svg { width: 24px; height: 24px; }
}

/* =========================================================================
   CONTACT PAGE — 2-column layout: navy info card + cream form card
   ========================================================================= */
.sp-contact {
  background: var(--sp-cream);
  padding: 80px 40px;
}
.sp-contact-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Left: dark info card */
.sp-contact-info {
  background: var(--sp-navy);
  color: var(--sp-on-navy);
  border-radius: 20px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(20, 21, 32, 0.25);
}
.sp-contact-info::before {
  content: "";
  position: absolute;
  top: -30%; right: -20%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(245,197,24,0.14), transparent 70%);
  pointer-events: none;
}
.sp-contact-info > * { position: relative; z-index: 1; }
.sp-contact-info .kicker {
  display: inline-block;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sp-yellow);
  margin-bottom: 10px;
}
.sp-contact-info h2 {
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sp-on-navy);
  margin: 0 0 12px;
}
.sp-contact-info h2 em {
  font-style: normal;
  color: var(--sp-yellow);
}
.sp-contact-info > p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--sp-on-navy-dim);
  margin: 0 0 24px;
}

/* Big direct-book CTAs at the top of the info card */
.sp-contact-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.sp-contact-ctas .sp-btn { flex: 1 1 140px; min-width: 140px; justify-content: center; }

/* Info rows — icon + label + value */
.sp-contact-list {
  list-style: none;
  padding: 20px 0 0;
  margin: 0;
  border-top: 1px solid rgba(247, 244, 236, 0.14);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sp-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.sp-contact-item-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(245, 197, 24, 0.15);
  color: var(--sp-yellow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sp-contact-item-icon svg { width: 18px; height: 18px; }
.sp-contact-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-contact-item-label {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-on-navy-dim);
}
.sp-contact-item-value {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--sp-on-navy);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-contact-item-value a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}
.sp-contact-item-value a:hover { color: var(--sp-yellow); }

/* Right: form card */
.sp-contact-form-wrap {
  background: var(--sp-white);
  border: 1px solid rgba(20, 21, 32, 0.08);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 14px 32px rgba(20, 21, 32, 0.08);
}
.sp-contact-form-wrap h2 {
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0 0 6px;
}
.sp-contact-form-wrap h2 em {
  font-style: normal;
  color: var(--sp-red);
}
.sp-contact-form-wrap > p {
  font-size: 13.5px;
  color: var(--sp-ink-mid);
  margin: 0 0 24px;
}
.sp-contact-form .sp-btn {
  align-self: flex-start;
  margin-top: 6px;
}
.sp-contact-alert {
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
}
.sp-contact-alert.is-success {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.25);
}
.sp-contact-alert.is-error {
  background: rgba(230, 57, 70, 0.08);
  color: var(--sp-red);
  border: 1px solid rgba(230, 57, 70, 0.25);
}

@media (max-width: 960px) {
  .sp-contact { padding: 56px 20px; }
  .sp-contact-inner { grid-template-columns: 1fr; gap: 28px; }
  .sp-contact-info { padding: 28px 24px; }
  .sp-contact-form-wrap { padding: 28px 24px; }
}

/* --- Profile page responsive --- */
@media (max-width: 960px) {
  .sp-gallery-section { padding: 56px 20px; }
  .sp-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  /* Reset the desktop 2x2 feature on smaller screens — uniform tiles */
  .sp-gallery-grid .sp-gallery-item:first-child {
    grid-column: auto;
    grid-row: auto;
  }

  .sp-bio-section .sp-bio-grid { grid-template-columns: 1fr; gap: 32px; }
  .sp-stats-card { position: static; }

  .sp-rates-section { padding: 64px 20px; }
  .sp-rates-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .sp-services-section { padding: 56px 20px; }

  .sp-profile-reviews { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sp-profile-chips { gap: 8px; }
  .sp-profile-chip { padding: 8px 12px; min-width: 76px; }
  .sp-profile-chip .label { font-size: 9px; }
  .sp-profile-chip .value { font-size: 13px; }

  .sp-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sp-gallery-item { border-radius: 10px; }

  .sp-rates-grid { grid-template-columns: 1fr; gap: 14px; }
  .sp-rate-card { padding: 22px 18px; }

  .sp-service-chip { font-size: 12px; padding: 10px 16px; }

  .sp-lightbox[open] { padding: 40px 16px 24px; }
  .sp-lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .sp-lightbox-prev { left: 8px; width: 40px; height: 40px; }
  .sp-lightbox-next { right: 8px; width: 40px; height: 40px; }
}

/* =========================================================================
   PROFILE HERO — 3-column "business-card top" variant (editorial polish)
   Portrait | identity + CTAs | stats panel. Desktop adds decorative layers:
   organic yellow blob behind portrait + diagonal accent band on the right.
   ========================================================================= */
.sp-hero.sp-hero--profile {
  padding: 72px 40px 104px;
  position: relative;
}
/* Diagonal yellow accent stripe running across the background (top-right) */
.sp-hero.sp-hero--profile::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 80%;
  height: 180%;
  background: linear-gradient(105deg,
    transparent 0%,
    transparent 42%,
    rgba(245, 197, 24, 0.06) 44%,
    rgba(245, 197, 24, 0.12) 48%,
    rgba(245, 197, 24, 0.06) 52%,
    transparent 54%,
    transparent 100%);
  transform: rotate(14deg);
  pointer-events: none;
  z-index: 0;
}
.sp-hero.sp-hero--profile .sp-hero-inner {
  grid-template-columns: 280px 1fr 320px;
  gap: 56px;
  align-items: center;
  min-height: 0;
  position: relative;
  z-index: 1;
}

/* Portrait (left column) — larger circle with editorial blob + accent dots */
.sp-profile-portrait {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 0;
  justify-self: center;
  z-index: 2;
}
/* Large organic yellow blob behind portrait (not just a ring) */
.sp-profile-portrait::before {
  content: "";
  position: absolute;
  top: -18%;
  left: -18%;
  width: 136%;
  height: 136%;
  background: radial-gradient(circle at 38% 38%,
    var(--sp-yellow) 0%,
    var(--sp-yellow) 38%,
    var(--sp-yellow-deep) 78%,
    transparent 80%);
  border-radius: 58% 42% 46% 54% / 52% 50% 50% 48%;
  opacity: 0.18;
  filter: blur(2px);
  z-index: -1;
  animation: sp-blob 12s ease-in-out infinite;
}
/* Red accent dot — top right of portrait */
.sp-profile-portrait::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sp-red);
  box-shadow: 0 8px 20px rgba(230, 57, 70, 0.45);
  z-index: 3;
}
@keyframes sp-blob {
  0%, 100% { border-radius: 58% 42% 46% 54% / 52% 50% 50% 48%; }
  50%      { border-radius: 46% 54% 58% 42% / 48% 52% 48% 52%; }
}
.sp-profile-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(245, 197, 24, 0.55),
              0 0 0 8px rgba(15, 16, 32, 0.9),
              0 28px 56px rgba(0, 0, 0, 0.5);
  display: block;
  position: relative;
  z-index: 1;
}
.sp-profile-portrait .badge {
  position: absolute;
  bottom: 6px; right: 4px;
  z-index: 3;
  background: #25D366;
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 14px rgba(37, 211, 102, 0.42);
}
.sp-profile-portrait .badge .dot {
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
}

/* Identity (middle column) — breadcrumb, eyebrow, name, CTAs */
.sp-profile-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sp-hero.sp-hero--profile .sp-hero-headline {
  font-size: clamp(34px, 4.2vw, 58px);
  margin-bottom: 22px;
  position: relative;
  display: inline-block;
}
/* Yellow underline flourish under the name — editorial touch */
.sp-hero.sp-hero--profile .sp-hero-headline::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  background: var(--sp-yellow);
  border-radius: 4px;
  margin-top: 14px;
  box-shadow: 0 4px 12px rgba(245, 197, 24, 0.35);
}
.sp-hero.sp-hero--profile .sp-hero-headline > span,
.sp-hero.sp-hero--profile .sp-hero-headline > em {
  white-space: normal;
}

/* Stats panel (right column) — yellow left-edge accent + subtle inner pattern */
.sp-profile-statspanel {
  background: rgba(247, 244, 236, 0.04);
  border: 1px solid rgba(247, 244, 236, 0.1);
  border-radius: 16px;
  padding: 24px 26px 24px 28px;
  align-self: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Yellow edge stripe on the left */
.sp-profile-statspanel::before {
  content: "";
  position: absolute;
  top: 16px; bottom: 16px;
  left: 0;
  width: 3px;
  background: linear-gradient(to bottom,
    var(--sp-yellow) 0%,
    var(--sp-yellow-deep) 100%);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px rgba(245, 197, 24, 0.3);
}
/* Soft dot texture */
.sp-profile-statspanel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(245, 197, 24, 0.04) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.sp-profile-statspanel dl { position: relative; z-index: 1; }

/* Hero right column: thumbnail grid of the profile's other photos.
   2x2 grid; click any thumb opens the lightbox. */
.sp-profile-thumbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-self: center;
  width: 320px;
  justify-self: end;
  position: relative;
  z-index: 2;
}
.sp-profile-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sp-navy-soft);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  cursor: zoom-in;
  transition: transform 260ms cubic-bezier(.4,.0,.2,1),
              box-shadow 260ms ease;
  text-decoration: none;
}
.sp-profile-thumb:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5);
  z-index: 3;
}
.sp-profile-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(.4,.0,.2,1);
}
.sp-profile-thumb:hover img { transform: scale(1.08); }
/* Hidden thumbs stay in DOM so lightbox can still navigate through them */
.sp-profile-thumb.is-hidden { display: none; }
/* "+N more" overlay on the last visible thumb when extra photos exist */
.sp-profile-thumb.has-more::after {
  content: attr(data-more);
  position: absolute;
  inset: 0;
  background: rgba(15, 16, 32, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: var(--sp-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sp-sans);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.02em;
  z-index: 2;
  transition: background 220ms ease;
}
.sp-profile-thumb.has-more:hover::after { background: rgba(15, 16, 32, 0.58); }

/* Role subtitle (category) right under the H1 name in the hero */
.sp-profile-role {
  font-family: var(--sp-sans);
  font-weight: 600;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-yellow);
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sp-profile-role::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--sp-yellow);
  border-radius: 2px;
}

/* Views / Likes / Since meta row — subtle info line under role */
.sp-profile-id-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0 0 28px;
  color: var(--sp-on-navy-dim);
}
.sp-profile-id-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.sp-profile-id-stat svg { width: 14px; height: 14px; opacity: 0.75; flex-shrink: 0; }
.sp-profile-id-stat strong {
  color: var(--sp-on-navy);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Wider first-name headline when we use a single word */
.sp-hero-firstname {
  display: inline-block;
}

/* Profile hero CTA buttons — smaller than default sp-btn-large so they
   sit comfortably in the identity column on desktop and don't dominate
   the narrow width on mobile. */
.sp-hero.sp-hero--profile .sp-hero-ctas {
  gap: 10px;
}
.sp-hero.sp-hero--profile .sp-hero-ctas .sp-btn,
.sp-hero.sp-hero--profile .sp-hero-ctas .sp-btn-large {
  padding: 11px 22px;
  font-size: 13px;
  letter-spacing: 0.02em;
  gap: 8px;
}
.sp-hero.sp-hero--profile .sp-hero-ctas .sp-btn svg {
  width: 13px;
  height: 13px;
}
@media (max-width: 560px) {
  .sp-hero.sp-hero--profile .sp-hero-ctas {
    gap: 8px;
    width: 100%;
    justify-content: center;
  }
  .sp-hero.sp-hero--profile .sp-hero-ctas .sp-btn,
  .sp-hero.sp-hero--profile .sp-hero-ctas .sp-btn-large {
    padding: 10px 16px;
    font-size: 12.5px;
    flex: 1 1 140px;
    max-width: 180px;
    justify-content: center;
  }
}

/* =========================================================================
   PROFILE QUICK FACTS — 6 stat cards in a strip right under the hero
   ========================================================================= */
.sp-profile-facts {
  background: var(--sp-cream);
  padding: 32px 40px;
  border-bottom: 1px solid rgba(20, 21, 32, 0.08);
}
.sp-profile-facts-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.sp-fact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--sp-white);
  border: 1px solid rgba(20, 21, 32, 0.06);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(20, 21, 32, 0.04);
  transition: transform 220ms ease, box-shadow 220ms ease;
  min-width: 0;
}
.sp-fact:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(20, 21, 32, 0.1);
}
.sp-fact-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(245, 197, 24, 0.28);
}
.sp-fact-icon svg { width: 16px; height: 16px; }
.sp-fact-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.sp-fact-label {
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-ink-mid);
}
.sp-fact-value {
  font-weight: 800;
  font-size: 14px;
  color: var(--sp-ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
  /* Allow long values (e.g. "English, Hindi, Marathi") to wrap instead of truncate */
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Availability: green icon + green value */
.sp-fact.is-available .sp-fact-icon {
  background: rgba(74, 222, 128, 0.2);
  color: #16a34a;
  box-shadow: 0 4px 10px rgba(74, 222, 128, 0.28);
}
.sp-fact.is-available .sp-fact-value {
  color: #16a34a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sp-fact.is-available .sp-fact-value::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
  flex-shrink: 0;
  animation: sp-pulse 2s ease-in-out infinite;
}
@keyframes sp-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
  50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.12); }
}

@media (max-width: 960px) {
  .sp-profile-facts { padding: 24px 20px; }
  .sp-profile-facts-inner { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
  .sp-fact { padding: 12px 14px; gap: 10px; }
  .sp-fact-icon { width: 34px; height: 34px; }
}
@media (max-width: 560px) {
  .sp-profile-facts-inner { grid-template-columns: 1fr 1fr; }
  .sp-fact-value { font-size: 13px; }
}
.sp-profile-statspanel dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 18px;
  margin: 0;
  align-items: center;
}
.sp-profile-statspanel dt {
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-on-navy-dim);
  margin: 0;
}
.sp-profile-statspanel dd {
  font-weight: 700;
  font-size: 14px;
  color: var(--sp-on-navy);
  margin: 0;
  text-align: right;
  letter-spacing: -0.01em;
}
.sp-profile-statspanel dd .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(74, 222, 128, 0.18);
  color: #4ADE80;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
}
.sp-profile-statspanel dd .pill::before {
  content: "";
  width: 5px; height: 5px;
  background: #4ADE80;
  border-radius: 50%;
}

/* =========================================================================
   PROFILE BODY LAYOUT — 2-col main + sticky sidebar (desktop)
   ========================================================================= */
.sp-profile-layout {
  background: var(--sp-cream);
  padding: 72px 40px 88px;
}
.sp-profile-layout-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}

/* Main column */
.sp-profile-main {
  display: flex;
  flex-direction: column;
  gap: 56px;
  min-width: 0;
}
.sp-profile-block-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-red);
  margin-bottom: 14px;
}
.sp-profile-block-eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-red);
  border-radius: 2px;
}
.sp-profile-main h2 {
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0 0 18px;
}
.sp-profile-main h2 em {
  font-style: normal;
  color: var(--sp-red);
}
.sp-profile-main p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--sp-ink-mid);
  margin: 0 0 16px;
}
/* Services grid inside main — override justify-content to left-align */
.sp-profile-main .sp-services-grid {
  justify-content: flex-start;
  margin: 0;
}
.sp-profile-main .sp-services-note {
  text-align: left;
  margin: 20px 0 0;
}
/* Reviews grid inside main — collapse to 1-col so content reads cleanly
   given the sidebar takes ~320px */
.sp-profile-main .sp-profile-reviews {
  grid-template-columns: 1fr;
  margin-top: 18px;
}

/* Sticky sidebar */
.sp-profile-sidebar {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Sticky "Book now" card inside the sidebar */
.sp-profile-book-card {
  background: var(--sp-navy);
  color: var(--sp-on-navy);
  border-radius: 18px;
  padding: 26px 24px 22px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(20, 21, 32, 0.22);
  position: relative;
  overflow: hidden;
}
.sp-profile-book-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 0%, rgba(245, 197, 24, 0.1), transparent 60%);
  pointer-events: none;
}
.sp-profile-book-card > * { position: relative; z-index: 1; }
.sp-profile-book-card .kicker {
  display: inline-block;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sp-yellow);
  margin-bottom: 10px;
}
.sp-profile-book-card h3 {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--sp-on-navy);
  margin: 0 0 8px;
}
.sp-profile-book-card h3 em {
  font-style: normal;
  color: var(--sp-yellow);
}
.sp-profile-book-card p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--sp-on-navy-dim);
  margin: 0 0 18px;
}
.sp-profile-book-card .sp-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 8px;
  padding: 12px 16px;
  font-size: 13px;
}
.sp-profile-book-card .sp-btn:last-child { margin-bottom: 0; }

/* "Similar Profiles" card in the sidebar */
.sp-profile-similar {
  background: var(--sp-white);
  border: 1px solid rgba(20, 21, 32, 0.08);
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 12px 28px rgba(20, 21, 32, 0.06);
}
.sp-profile-similar h3 {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sp-red);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(230, 57, 70, 0.14);
}
.sp-profile-similar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-profile-similar-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--sp-ink);
  padding: 8px;
  border-radius: 12px;
  transition: background 200ms ease;
}
.sp-profile-similar-item a:hover {
  background: rgba(245, 197, 24, 0.12);
}
.sp-profile-similar-thumb {
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--sp-navy-soft);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.sp-profile-similar-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.sp-profile-similar-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-profile-similar-name {
  font-weight: 800;
  font-size: 13px;
  color: var(--sp-ink);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.sp-profile-similar-type {
  font-size: 11.5px;
  color: var(--sp-ink-mid);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-profile-similar-item a:hover .sp-profile-similar-name { color: var(--sp-red); }

/* Responsive — collapse 3-col hero and 2-col body */
@media (max-width: 1100px) {
  .sp-hero.sp-hero--profile .sp-hero-inner {
    grid-template-columns: 220px 1fr 280px;
    gap: 40px;
  }
  .sp-profile-portrait { width: 220px; height: 220px; }
  .sp-hero.sp-hero--profile .sp-hero-headline { font-size: clamp(30px, 3.8vw, 46px); }
  .sp-profile-thumbs { width: 280px; }
  .sp-profile-layout-inner { grid-template-columns: 1fr 300px; gap: 36px; }
}
@media (max-width: 960px) {
  .sp-hero.sp-hero--profile { padding: 48px 20px 64px; }
  .sp-hero.sp-hero--profile::after { display: none; }
  .sp-hero.sp-hero--profile .sp-hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .sp-profile-portrait { width: 200px; height: 200px; justify-self: center; }
  .sp-profile-identity { align-items: center; }
  .sp-profile-identity .sp-crumbs { justify-content: center; }
  .sp-hero.sp-hero--profile .sp-hero-ctas { justify-content: center; }
  .sp-hero.sp-hero--profile .sp-hero-headline::after { margin-left: auto; margin-right: auto; }
  .sp-profile-statspanel { max-width: 480px; width: 100%; margin: 0 auto; }
  .sp-profile-thumbs {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    justify-self: center;
  }

  .sp-profile-layout { padding: 56px 20px 64px; }
  .sp-profile-layout-inner { grid-template-columns: 1fr; gap: 36px; }
  .sp-profile-sidebar { position: static; }
  .sp-profile-main { gap: 44px; }
}
@media (max-width: 560px) {
  .sp-profile-portrait { width: 170px; height: 170px; }
  .sp-profile-portrait::after { width: 22px; height: 22px; }
  .sp-profile-statspanel dl { grid-template-columns: 1fr; gap: 10px; }
  .sp-profile-statspanel dd { text-align: left; }
  .sp-profile-statspanel dt { font-size: 9.5px; }
  .sp-profile-thumbs { max-width: 320px; gap: 8px; }
  .sp-profile-thumb.has-more::after { font-size: 22px; }
}

/* =========================================================================
   HERO FACES — cluster of 4 circular profile photos on location pages.
   Asymmetric composition: one large lead + three supporting circles with
   slight rotations for editorial motion. Each face links to its profile.
   ========================================================================= */
.sp-hero-faces {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1 / 1;
  justify-self: end;
  margin: 0;
}

/* Soft yellow radial glow warming the background behind the cluster */
.sp-hero-faces::before {
  content: "";
  position: absolute;
  inset: 5%;
  background: radial-gradient(circle at 40% 40%,
    rgba(245, 197, 24, 0.35) 0%,
    rgba(245, 197, 24, 0.12) 45%,
    transparent 72%);
  border-radius: 50%;
  filter: blur(4px);
  z-index: 0;
  pointer-events: none;
}

/* Each face — circular, double-ringed, with a gentle lift on hover */
.sp-hero-face {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sp-navy-soft);
  box-shadow: 0 0 0 5px rgba(245, 197, 24, 0.55),
              0 0 0 8px rgba(15, 16, 32, 0.92),
              0 20px 44px rgba(0, 0, 0, 0.5);
  transition: transform 340ms cubic-bezier(.4,.0,.2,1),
              box-shadow 340ms ease;
  text-decoration: none;
  display: block;
}
.sp-hero-face img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(.4,.0,.2,1);
}
.sp-hero-face:hover {
  z-index: 10;
  box-shadow: 0 0 0 5px var(--sp-yellow),
              0 0 0 9px rgba(15, 16, 32, 0.95),
              0 30px 60px rgba(0, 0, 0, 0.6);
}
.sp-hero-face:hover img { transform: scale(1.08); }

/* Lead face — largest, center-left of the composition */
.sp-hero-face.is-main {
  width: 62%;
  height: 62%;
  top: 18%;
  left: 4%;
  z-index: 3;
}
.sp-hero-face.is-main:hover { transform: scale(1.04); }

/* Secondary — top-right, small rotation to add motion */
.sp-hero-face.is-two {
  width: 34%;
  height: 34%;
  top: 2%;
  right: 10%;
  z-index: 2;
  transform: rotate(5deg);
}
.sp-hero-face.is-two:hover { transform: rotate(0deg) scale(1.07); }

/* Tertiary — right-middle, opposite rotation for rhythm */
.sp-hero-face.is-three {
  width: 36%;
  height: 36%;
  bottom: 12%;
  right: 2%;
  z-index: 2;
  transform: rotate(-4deg);
}
.sp-hero-face.is-three:hover { transform: rotate(0deg) scale(1.07); }

/* Quaternary — bottom-center, smallest, forward rotation */
.sp-hero-face.is-four {
  width: 28%;
  height: 28%;
  bottom: 4%;
  left: 38%;
  z-index: 2;
  transform: rotate(6deg);
}
.sp-hero-face.is-four:hover { transform: rotate(0deg) scale(1.07); }

/* Floating red "Verified" badge — top-left of cluster */
.sp-hero-faces-badge {
  position: absolute;
  top: 6%;
  left: -2%;
  z-index: 6;
  background: var(--sp-red);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(230, 57, 70, 0.45);
  transform: rotate(-8deg);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sp-hero-faces-badge .dot {
  width: 7px; height: 7px;
  background: #fff;
  border-radius: 50%;
}

/* Responsive — scale down cluster, preserve composition */
@media (max-width: 1100px) {
  .sp-hero-faces { max-width: 460px; }
}
@media (max-width: 960px) {
  .sp-hero-faces {
    max-width: 440px;
    margin: 0 auto;
    justify-self: center;
  }
}
@media (max-width: 560px) {
  .sp-hero-faces { max-width: 340px; }
  .sp-hero-face {
    box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.55),
                0 0 0 6px rgba(15, 16, 32, 0.92),
                0 14px 28px rgba(0, 0, 0, 0.48);
  }
  .sp-hero-face:hover {
    box-shadow: 0 0 0 4px var(--sp-yellow),
                0 0 0 7px rgba(15, 16, 32, 0.95),
                0 20px 36px rgba(0, 0, 0, 0.55);
  }
  .sp-hero-faces-badge {
    font-size: 10px;
    letter-spacing: 0.14em;
    padding: 8px 13px;
    top: 4%;
  }
}

/* =========================================================================
   LEGACY SEO CONTENT WRAPPERS — neutralize Tailwind classes used inside
   per-location and per-category sub-views so they render correctly on a
   cream background without rewriting each file.
   ========================================================================= */
.sp-location-seo .text-white,
.sp-category-seo .text-white { color: var(--sp-ink-mid) !important; }
.sp-location-seo .text-yellow-400,
.sp-category-seo .text-yellow-400 { color: var(--sp-red) !important; }
.sp-location-seo .text-yellow-400:hover,
.sp-category-seo .text-yellow-400:hover { color: var(--sp-red-deep) !important; }
.sp-location-seo .text-gray-800,
.sp-category-seo .text-gray-800 { color: var(--sp-ink) !important; }
.sp-location-seo .text-rose-600,
.sp-category-seo .text-rose-600 { color: var(--sp-red) !important; }
.sp-location-seo .bg-black,
.sp-location-seo .bg-opacity-40,
.sp-category-seo .bg-black,
.sp-category-seo .bg-opacity-40 { background: transparent !important; }
/* Hide absolute-positioned dark overlays that assumed a dark background */
.sp-location-seo .absolute.inset-0,
.sp-category-seo .absolute.inset-0 { display: none !important; }

.sp-location-seo img,
.sp-category-seo img {
  border-radius: 14px !important;
  margin: 24px 0 !important;
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  box-shadow: 0 18px 40px rgba(20, 21, 32, 0.15);
}
.sp-location-seo a,
.sp-category-seo a {
  color: var(--sp-red);
  text-decoration: none;
  font-weight: 600;
}
.sp-location-seo a:hover,
.sp-category-seo a:hover { color: var(--sp-red-deep); text-decoration: underline; }

/* Headings inside sub-views — add a red underline accent to match design */
.sp-location-seo h2::after,
.sp-location-seo h3::after,
.sp-category-seo h2::after,
.sp-category-seo h3::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--sp-red);
  margin-top: 10px;
  border-radius: 2px;
}

/* Some category sub-views wrap their content in a "card" container —
   strip the container chrome so content flows inside sp-copy naturally. */
.sp-category-seo .container {
  padding: 0 !important;
  max-width: 100% !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* =========================================================================
   OTHER CATEGORIES — compact numbered card grid for category detail pages
   ========================================================================= */
.sp-cat-more {
  background: var(--sp-cream);
  padding: 72px 40px;
}
.sp-cat-more-head {
  max-width: 1280px;
  margin: 0 auto 40px;
  text-align: center;
}
.sp-cat-more-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-red);
  margin-bottom: 14px;
}
.sp-cat-more-head .kicker::before,
.sp-cat-more-head .kicker::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-red);
  border-radius: 2px;
}
.sp-cat-more-head h2 {
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0;
}
.sp-cat-more-head h2 em {
  font-style: normal;
  color: var(--sp-red);
}
.sp-cat-more-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Each card is a landscape gradient tile with a profile photo bleeding
   in from the right and a color-veil overlay that tints the photo into
   the card's mood. Gradient cycles through 8 hues via nth-child so a
   long list still feels varied. */
.sp-cat-more-card {
  position: relative;
  display: flex;
  align-items: stretch;
  aspect-ratio: 16 / 9;
  min-height: 170px;
  padding: 22px 24px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cc1, #5C81FF), var(--cc2, #3F5FE6));
  box-shadow: 0 14px 28px rgba(20, 20, 40, 0.18);
  text-decoration: none;
  color: var(--sp-white);
  transition: transform 250ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 250ms ease;
}
.sp-cat-more-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 42px rgba(20, 20, 40, 0.32);
}

/* Profile photo — actual <img> element fills the RIGHT 60% of the card
   so the face has a clean, generous area to live in. object-position
   biased toward the top so portrait photos show the face, not the body. */
.sp-cat-more-photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  z-index: 1;
  display: block;
  transition: transform 450ms ease;
  border: 0;
}
.sp-cat-more-card:hover .sp-cat-more-photo {
  transform: scale(1.05);
}

/* Color veil — dense brand tint on the LEFT 45% of the card (where the
   title sits, fully opaque), then fades through a soft mid-band, then
   leaves the RIGHT 25% clear so the face shows naturally. */
.sp-cat-more-veil {
  position: absolute;
  inset: 0;
  background:
    /* horizontal tint */
    linear-gradient(95deg,
      var(--cc1, #1F2240) 0%,
      var(--cc1, #1F2240) 42%,
      rgba(0, 0, 0, 0.35) 65%,
      rgba(0, 0, 0, 0.05) 95%),
    /* gentle bottom darkening for legibility of the bottom CTA */
    linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.25) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Info block — left-aligned text column */
.sp-cat-more-info {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  max-width: 60%;
}

.sp-cat-more-eyebrow {
  font-family: var(--sp-sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.sp-cat-more-card .sp-cat-more-title {
  margin: 6px 0 4px;
  font-family: var(--sp-sans);
  font-weight: 900;
  font-size: clamp(22px, 1.8vw, 30px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--sp-white);
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-cat-more-meta {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}

.sp-cat-more-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 7px 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  font-family: var(--sp-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-white);
  backdrop-filter: blur(4px);
  transition: background 200ms ease, gap 200ms ease;
}
.sp-cat-more-card:hover .sp-cat-more-cta {
  background: rgba(0, 0, 0, 0.45);
  gap: 10px;
}
.sp-cat-more-cta svg { transition: transform 200ms ease; }
.sp-cat-more-card:hover .sp-cat-more-cta svg { transform: translateX(2px); }

/* ---- Brand-aligned cycling palette ----
   All gradients sit in the site's warm-rich family: deep red, amber/gold,
   navy, and brick/wine. cc1 drives the left-side veil tint and the
   bottom-right gradient ramp, so each card stays clearly on-brand
   while still feeling distinct from its neighbours. */
.sp-cat-more-card:nth-child(8n+1) { --cc1: #B83B4A; --cc2: #6E1F28; } /* deep red */
.sp-cat-more-card:nth-child(8n+2) { --cc1: #1F2240; --cc2: #0A0F1F; } /* navy night */
.sp-cat-more-card:nth-child(8n+3) { --cc1: #C99412; --cc2: #7A5A0B; } /* amber/gold */
.sp-cat-more-card:nth-child(8n+4) { --cc1: #A8332B; --cc2: #5B1A14; } /* brick red */
.sp-cat-more-card:nth-child(8n+5) { --cc1: #6B2940; --cc2: #3D1722; } /* wine */
.sp-cat-more-card:nth-child(8n+6) { --cc1: #2D3068; --cc2: #1A1F45; } /* deep indigo navy */
.sp-cat-more-card:nth-child(8n+7) { --cc1: #D9580E; --cc2: #8B3506; } /* burnt orange */
.sp-cat-more-card:nth-child(8n+8) { --cc1: #8B6914; --cc2: #4D3A0B; } /* dark gold */

@media (max-width: 1024px) {
  .sp-cat-more-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
  .sp-cat-more { padding: 56px 18px; }
  .sp-cat-more-grid { grid-template-columns: 1fr; gap: 14px; }
  .sp-cat-more-card {
    aspect-ratio: 16 / 9;
    min-height: 150px;
    padding: 18px 20px;
    border-radius: 16px;
  }
  .sp-cat-more-card .sp-cat-more-title { font-size: 22px; }
  .sp-cat-more-meta { font-size: 11px; }
  .sp-cat-more-cta { font-size: 10px; padding: 6px 12px; }
}

/* =========================================================================
   OTHER LOCATIONS — compact card grid on location detail pages
   ========================================================================= */
.sp-loc-more {
  background: var(--sp-cream);
  padding: 72px 40px;
}
.sp-loc-more-head {
  max-width: 1280px;
  margin: 0 auto 40px;
  text-align: center;
}
.sp-loc-more-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-red);
  margin-bottom: 14px;
}
.sp-loc-more-head .kicker::before,
.sp-loc-more-head .kicker::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--sp-red);
  border-radius: 2px;
}
.sp-loc-more-head h2 {
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0;
}
.sp-loc-more-head h2 em {
  font-style: normal;
  color: var(--sp-red);
}

.sp-loc-more-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.sp-loc-more-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(20, 21, 32, 0.16);
  transition: transform 280ms cubic-bezier(.4,.0,.2,1),
              box-shadow 280ms ease;
  background: var(--sp-navy-soft);
}
.sp-loc-more-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(20, 21, 32, 0.3);
}
.sp-loc-more-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(.4,.0,.2,1);
}
.sp-loc-more-card:hover img { transform: scale(1.08); }
.sp-loc-more-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(15, 16, 32, 0.82) 0%,
    rgba(15, 16, 32, 0.2) 55%,
    transparent 100%);
  pointer-events: none;
}
.sp-loc-more-name {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  color: var(--sp-on-navy);
  font-family: var(--sp-sans);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sp-loc-more-name .arrow {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sp-yellow);
  color: var(--sp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.sp-loc-more-card:hover .sp-loc-more-name .arrow { transform: translateX(3px); }
.sp-loc-more-name .arrow svg { width: 12px; height: 12px; }

@media (max-width: 560px) {
  .sp-loc-more { padding: 56px 20px; }
  .sp-loc-more-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sp-loc-more-name { font-size: 13px; }
}

/* =========================================================================
   CATEGORY TILES — 4-across icon/title cards
   ========================================================================= */
.sp-tiles-wrap {
  background: var(--sp-cream);
  padding: 72px 40px 56px;
  position: relative;
}
.sp-tiles {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sp-tile {
  background: var(--sp-navy-soft);
  border: 1px solid var(--sp-navy-edge);
  border-radius: 20px;
  padding: 32px 20px 28px;
  text-align: center;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
  position: relative;
  overflow: hidden;
}
.sp-tile:hover {
  transform: translateY(-4px);
  border-color: var(--sp-yellow);
  background: #1F2240;        /* slightly lifted from --sp-navy-soft */
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(245, 197, 24, 0.4);
}
.sp-tile-icon {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--sp-yellow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  position: relative;
  transition: background 220ms ease;
  /* Soft halo so the yellow circle reads as glowing on the dark card */
  box-shadow: 0 0 24px rgba(245, 197, 24, 0.28);
}
.sp-tile:hover .sp-tile-icon { background: var(--sp-red); box-shadow: 0 0 28px rgba(230, 57, 70, 0.4); }
.sp-tile:hover .sp-tile-icon svg { color: var(--sp-white); }
.sp-tile-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px dashed rgba(245, 197, 24, 0.45);
  border-radius: 50%;
}
.sp-tile-icon svg {
  width: 42px; height: 42px;
  color: var(--sp-ink);
  transition: color 220ms ease;
}
.sp-tile-kicker {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-yellow);
  margin-bottom: 6px;
}
.sp-tile h6 {
  font-weight: 800;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--sp-cream);
  margin: 0;
}
@media (max-width: 960px) {
  .sp-tiles-wrap { padding: 48px 20px 24px; }
  .sp-tiles { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sp-tile { padding: 24px 16px 20px; }
  .sp-tile-icon { width: 76px; height: 76px; }
  .sp-tile-icon svg { width: 34px; height: 34px; }
  .sp-tile h6 { font-size: 15px; }
}

/* =========================================================================
   MOBILE DRAWER
   ========================================================================= */
.sp-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 88vw; max-width: 400px;
  background: var(--sp-cream);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.4,.0,.2,1);
  z-index: 100;
  box-shadow: -24px 0 60px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0;
}
.sp-drawer.open { transform: translateX(0); }

/* Close button — absolute top-right corner */
.sp-drawer-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sp-ink);
  color: var(--sp-yellow);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, transform 200ms ease;
  z-index: 3;
}
.sp-drawer-close:hover { background: var(--sp-red); color: var(--sp-white); transform: rotate(90deg); }

/* Brand header — navy block at the top of the drawer */
.sp-drawer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 24px 22px;
  background: var(--sp-navy);
  color: var(--sp-on-navy);
}
.sp-drawer-mark {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sp-red);
  color: var(--sp-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 0 0 3px var(--sp-yellow),
    0 0 0 4.5px rgba(247, 244, 236, 0.18),
    0 6px 14px rgba(230, 57, 70, 0.45);
}
.sp-drawer-mark::after {
  content: "";
  position: absolute;
  top: -7px; right: -5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sp-red);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.sp-drawer-word {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--sp-on-navy);
  line-height: 1;
}
.sp-drawer-word small {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-yellow);
  margin-top: 4px;
}

/* Search input in drawer */
.sp-drawer-search {
  position: relative;
  margin: 16px 20px 4px;
}
.sp-drawer-search input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  border: 1px solid rgba(20,21,32,0.14);
  background: var(--sp-white);
  border-radius: 999px;
  font-family: var(--sp-sans);
  font-size: 14px;
  color: var(--sp-ink);
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.sp-drawer-search input:focus {
  border-color: var(--sp-yellow);
  box-shadow: 0 0 0 3px rgba(245,197,24,0.2);
}
/* Direct-child selector so SVGs inside the autocomplete results (.sp-search-results
   nested inside .sp-drawer-search) don't get absolute-positioned. */
.sp-drawer-search > svg {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--sp-ink-mid);
  pointer-events: none;
}

/* Kicker labels for drawer sections */
.sp-drawer-kicker {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-ink-mid);
  margin: 20px 24px 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sp-drawer-kicker::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--sp-red);
  border-radius: 2px;
}

/* Nav section wrapper */
.sp-drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 0 12px;
}

/* Individual drawer link with icon + label + arrow */
.sp-drawer-link {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 12px 14px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--sp-ink) !important;
  text-decoration: none !important;
  letter-spacing: -0.01em;
  border-bottom: 0 !important;
  border-radius: 12px;
  transition: background 200ms ease, color 200ms ease;
  position: relative;
}
.sp-drawer-link:hover { background: rgba(245,197,24,0.14); }
.sp-drawer-link.is-active {
  background: var(--sp-yellow);
  color: var(--sp-ink) !important;
}
.sp-drawer-link.is-active .sp-drawer-link-icon { color: var(--sp-ink); }
.sp-drawer-link-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(20,21,32,0.06);
  color: var(--sp-ink-mid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 200ms ease, color 200ms ease;
}
.sp-drawer-link.is-active .sp-drawer-link-icon {
  background: var(--sp-ink);
  color: var(--sp-yellow);
}
.sp-drawer-link:hover .sp-drawer-link-icon {
  background: var(--sp-ink);
  color: var(--sp-yellow);
}
.sp-drawer-link-icon svg { width: 15px; height: 15px; }
.sp-drawer-link-label { flex: 1; min-width: 0; }
.sp-drawer-link-arrow {
  width: 18px; height: 18px;
  color: rgba(20,21,32,0.28);
  flex-shrink: 0;
  transition: transform 200ms ease, color 200ms ease;
}
.sp-drawer-link:hover .sp-drawer-link-arrow { color: var(--sp-red); transform: translateX(3px); }
.sp-drawer-link.is-active .sp-drawer-link-arrow { color: var(--sp-ink); }

/* Prominent CTA button row — Call + WhatsApp */
.sp-drawer-ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 20px 24px 8px;
  margin: 0;
}
.sp-drawer-ctas .sp-btn {
  width: 100%;
  justify-content: center;
  padding: 12px 10px;
  font-size: 13px;
  gap: 6px;
}
.sp-drawer-ctas .sp-btn svg { width: 13px; height: 13px; }

/* Contact info rows with icons */
.sp-drawer-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 24px 8px;
}
.sp-drawer-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--sp-ink-mid);
  font-size: 13.5px;
  text-decoration: none;
  transition: color 200ms ease;
}
.sp-drawer-info-item:hover { color: var(--sp-ink); }
.sp-drawer-info-item svg {
  width: 16px; height: 16px;
  color: var(--sp-red);
  flex-shrink: 0;
}

/* Footer — small legal line at the bottom of the drawer */
.sp-drawer-footer {
  margin-top: auto;
  padding: 16px 24px 24px;
  font-size: 10.5px;
  color: var(--sp-ink-mid);
  text-align: center;
  border-top: 1px solid rgba(20,21,32,0.08);
  letter-spacing: 0.05em;
}
.sp-drawer-footer strong {
  color: var(--sp-red);
  font-weight: 800;
  letter-spacing: 0.15em;
}

.sp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,16,32,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  z-index: 90;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sp-backdrop.open { opacity: 1; pointer-events: auto; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1280px) {
  .sp-nav { gap: 22px; }
  .sp-nav a { font-size: 13px; }
}

@media (max-width: 1180px) {
  .sp-search { display: none; }
}

@media (max-width: 1100px) {
  .sp-nav { gap: 18px; }
  .sp-header-row1 { padding: 16px 28px; }
  .sp-hero-headline { font-size: clamp(44px, 7vw, 72px); }
  .sp-hero-inner { gap: 40px; }
}

@media (max-width: 880px) {
  .sp-header-row1 { padding: 14px 20px; gap: 12px; }
  .sp-header-row2 { display: none; }
  .sp-nav { display: none; }
  .sp-search { display: none; }
  .sp-header-cta .sp-btn-red { display: none; }
  .sp-menu-trigger { display: inline-flex; }

  .sp-hero { padding: 40px 20px 72px; }
  .sp-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: 0;
  }
  .sp-hero-copy { max-width: 100%; }
  .sp-hero-headline { font-size: clamp(34px, 9vw, 56px); }
  .sp-hero-sub { font-size: 15px; }

  .sp-hero-figure {
    justify-self: center;
    max-width: 360px;
    margin-top: 8px;
  }
  .sp-hero-meta { gap: 18px; }
  .sp-hero-meta-item strong { font-size: 22px; }
  .sp-hero-badge { top: 2%; right: -4%; font-size: 10px; padding: 10px 14px; }
  .sp-hero-tag { bottom: 0; left: -4%; padding: 10px 14px; min-width: 120px; }

  .sp-logo-wordmark { font-size: 18px; }
  .sp-logo-wordmark small { display: none; }
  .sp-logo-mark { width: 40px; height: 40px; font-size: 16px; }
}

/* =========================================================================
   Age-gate modal override
   ========================================================================= */
#ageModal { font-family: var(--sp-sans) !important; }
#ageModal > div {
  background: var(--sp-cream) !important;
  border: 2px solid var(--sp-yellow) !important;
  border-radius: 18px !important;
  color: var(--sp-ink) !important;
}
#ageModal h2 {
  font-family: var(--sp-sans) !important;
  font-weight: 800 !important;
  color: var(--sp-ink) !important;
}