/* GA Spas — calm, spa-like home (sage / sand / forest). Home page only. */
:root{
  --cream:#F6F1E9;
  --cream-deep:#EFE7DA;
  --sand:#E5D9C6;
  --sage:#8B9A7E;
  --sage-deep:#6E7E61;
  --forest:#2E3A2E;
  --forest-soft:#4A573F;
  --clay:#BE7B54;
  --clay-deep:#A9663F;
  --paper:#FFFDF9;
  --line:rgba(46,58,46,0.10);
  --muted:#7A7466;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--forest);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:88%;max-width:1180px;margin:0 auto}
.serif{font-family:'Cormorant Garamond',Georgia,serif}
a{color:inherit;text-decoration:none}
.eyebrow{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage-deep);font-weight:500;
}

/* ---------- nav ---------- */
nav{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 6%;
}
.logo{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:700;letter-spacing:.01em;color:var(--forest)}
.logo span{color:var(--sage-deep)}
.nav-links{display:flex;gap:34px;list-style:none;font-size:14px;font-weight:600}
.nav-links a{color:var(--forest-soft);transition:color .2s}
.nav-links a:hover{color:var(--sage-deep)}
.nav-cta{
  font-size:13px;font-weight:600;color:var(--forest);
  border:1px solid var(--line);border-radius:100px;padding:10px 22px;
  background:rgba(255,255,255,.5);transition:all .2s;
}
.nav-cta:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)}
/* nav sits over the light cream scrim → dark treatment, with a soft light
   shadow so the right-side links stay legible where they cross the photo */
.logo{color:var(--forest);text-shadow:0 1px 3px rgba(246,241,233,.85)}
.logo span{color:var(--sage-deep)}
.nav-links a{color:var(--forest-soft);text-shadow:0 1px 3px rgba(246,241,233,.8)}
.nav-links a:hover{color:var(--sage-deep)}
.nav-cta{color:var(--forest);border-color:rgba(46,58,46,.22);background:rgba(255,253,249,.6)}
.nav-cta:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:150px 0 96px;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(139,154,126,.28), transparent 55%),
    radial-gradient(90% 80% at 0% 110%, rgba(190,123,84,.12), transparent 50%),
    linear-gradient(180deg, var(--cream-deep), var(--cream));
}

/* full-bleed photo hero: crossfading background + cream scrim, dark text */
.hero--photo{background:var(--cream-deep)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:70% center;
  opacity:0;transition:opacity 1.6s ease;transform:scale(1.04);
}
.hero-slide.on{opacity:1}
/* desktop: landscape photos, biased right where the subject sits */
.hslide-1{background-image:url('/images/hero-1.jpg')}
.hslide-2{background-image:url('/images/hero-2.jpg')}
.hslide-3{background-image:url('/images/hero-3.jpg')}
/* phones get dedicated PORTRAIT hero photos, centered (no right-bias crop) */
@media (max-width:640px){
  .hero-slide{background-position:center}
  .hslide-1{background-image:url('/images/hero-mobile-1.jpg')}
  .hslide-2{background-image:url('/images/hero-mobile-2.jpg')}
  .hslide-3{background-image:url('/images/hero-mobile-3.jpg')}
  /* on phones the text spans full width over the photo — use a stronger, more
     even cream veil (top→bottom) so the hero copy + "updated weekly" stay legible */
  .hero--photo::after{
    background:
      linear-gradient(180deg, rgba(246,241,233,.80) 0%, rgba(246,241,233,.62) 42%, rgba(246,241,233,.74) 100%),
      linear-gradient(95deg, rgba(246,241,233,.78) 0%, rgba(246,241,233,.5) 60%, rgba(246,241,233,.34) 100%);
  }
}
/* scrim: opaque cream on the left (under the text), clearing to the photo on the right */
.hero--photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(95deg, rgba(246,241,233,.94) 0%, rgba(246,241,233,.82) 38%, rgba(246,241,233,.34) 72%, rgba(246,241,233,.12) 100%),
    linear-gradient(180deg, rgba(246,241,233,.4) 0%, rgba(246,241,233,0) 26%, rgba(246,241,233,.3) 100%);
}
.hero--photo .hero-inner{z-index:3}
.hero--photo .leaf{z-index:2}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none}}

.leaf{position:absolute;opacity:.5;pointer-events:none;color:var(--sage)}
.leaf-1{top:120px;right:7%;width:120px;animation:sway 9s ease-in-out infinite}
.leaf-2{bottom:60px;left:4%;width:84px;opacity:.35;animation:sway 11s ease-in-out infinite reverse}
.leaf-3{top:46%;right:30%;width:46px;opacity:.25;animation:sway 7s ease-in-out infinite}
@keyframes sway{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(4deg)}}
.hero-inner{position:relative;z-index:2;max-width:760px}
.hero h1{
  font-size:clamp(44px,6.4vw,82px);font-weight:500;line-height:1.04;
  letter-spacing:-.01em;margin:22px 0 0;color:var(--forest);
}
.hero h1 em{font-style:italic;color:var(--sage-deep)}
.hero-sub{font-size:18px;color:var(--forest-soft);max-width:540px;margin:26px 0 0;font-weight:300}
.hero-proof{font-size:14px;color:var(--forest-soft);margin-top:18px;text-shadow:0 1px 3px rgba(246,241,233,.92)}
.hero-proof strong{color:var(--forest);font-weight:600}

.search{margin-top:34px;display:flex;gap:10px;flex-wrap:wrap;max-width:620px}
.search-box{
  flex:1 1 300px;min-width:0;display:flex;align-items:center;gap:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:100px;
  padding:6px 6px 6px 22px;box-shadow:0 14px 40px -22px rgba(46,58,46,.4);
}
.search-box input{flex:1;border:0;outline:0;background:transparent;font-family:'Inter';font-size:15px;color:var(--forest)}
.search-box input::placeholder{color:#A39D8E}
.btn{font-family:'Inter';font-size:14px;font-weight:500;cursor:pointer;border:0;border-radius:100px;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn-go{background:var(--sage-deep);color:#fff;padding:13px 26px}
.btn-go:hover{background:var(--forest)}

/* text is selectable/copyable site-wide — better for sharing + SEO */
.card img{-webkit-user-drag:none;user-drag:none;pointer-events:none}

.loc-note{margin-top:14px;font-size:13px;font-weight:500;color:var(--sage-deep);background:rgba(110,126,97,.12);border:1px solid rgba(110,126,97,.22);border-radius:100px;padding:9px 16px;display:inline-block}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.pill{
  font-size:13px;font-weight:500;color:var(--forest-soft);
  background:rgba(255,255,255,.55);border:1px solid var(--line);
  border-radius:100px;padding:8px 18px;transition:all .2s;display:inline-block;
}
.pill:hover{background:#fff;border-color:var(--sage)}
.pill.active{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.pill.bo{color:var(--clay-deep);border-color:rgba(190,123,84,.4)}
.pill.bo:hover{background:var(--clay);color:#fff;border-color:var(--clay)}

/* ---------- section frame ---------- */
section.band{padding:90px 0}
/* faint polka-dots on the featured section — just a little attitude */
.band--dots{background-image:radial-gradient(circle,rgba(46,58,46,.05) 1.4px,transparent 1.5px);background-size:24px 24px;background-position:center}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px}
.sec-head h2{font-size:clamp(30px,3.6vw,44px);font-weight:500;line-height:1.08;letter-spacing:-.01em}
.sec-link{font-size:14px;font-weight:500;color:var(--sage-deep);white-space:nowrap}
.sec-link:hover{color:var(--forest)}

/* ---------- featured cards ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.feat-grid + .feat-grid{margin-top:26px}
/* "all spas" grid caps at ~10 rows (30 cards) until "Show all" lifts .capped */
.all-grid.capped > .card:nth-child(n+31){display:none}
.sort-ctrl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap}
.sort-ctrl select{font-family:'Inter';font-size:13px;font-weight:600;color:var(--forest);background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:8px 14px;cursor:pointer}
.sort-ctrl select:hover{border-color:var(--sage)}
.show-more-wrap{display:flex;justify-content:center;margin-top:34px}
.show-more-btn{font-family:'Inter';font-size:14px;font-weight:600;color:var(--forest);background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:13px 30px;cursor:pointer;transition:all .2s}
.show-more-btn:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:22px;
  /* clip the backdrop image to the padding box so it never bleeds past the
     rounded corners / under the border when the card stretches */
  background-clip:padding-box;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 28px 50px -30px rgba(46,58,46,.45)}
.card-photo{height:156px;position:relative;overflow:hidden;background:#EFE7DA url('/images/noimageprovided.jpg') center / cover no-repeat}
.card-photo.p2{background:linear-gradient(135deg,#A6B292,#7C8C6B)}
/* image carousel inside the photo window */
.ph-track{position:absolute;inset:0}
.ph-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease}
.ph-slide.on{opacity:1}
.ph-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
.ph-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:all .25s}
.ph-dot.on{background:#fff;width:16px;border-radius:10px}
/* like / save heart (top-right of the photo) */
.like-btn{position:absolute;top:10px;right:10px;z-index:4;width:34px;height:34px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,253,249,.85);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:pointer;transition:transform .15s ease,background .2s;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.like-btn:hover{transform:scale(1.1);background:#fff}
.like-btn svg{width:18px;height:18px;fill:none;stroke:var(--forest);stroke-width:2}
.like-btn.liked{background:#fff;animation:likePop .3s ease}
.like-btn.liked svg{fill:var(--clay);stroke:var(--clay)}
@keyframes likePop{0%,100%{transform:scale(1)}50%{transform:scale(1.32)}}
/* liked page empty state */
.liked-empty{text-align:center;padding:60px 0}
.liked-empty .le-heart{font-size:40px;color:rgba(190,123,84,.35)}
.liked-empty h2{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;margin:14px 0 8px;color:var(--forest)}
.liked-empty p{color:var(--muted);font-weight:300}
.liked-empty a{color:var(--sage-deep);font-weight:600}
/* floating location toggle */
.loc-fab{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:0;border-radius:100px;background:var(--forest);color:var(--cream);font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 10px 26px -8px rgba(0,0,0,.45);transition:transform .2s ease,background .2s}
.loc-fab:hover{transform:translateY(-2px)}
.loc-fab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}
.loc-fab.on{background:#3FA66A}
.loc-fab.on svg{fill:currentColor}
.loc-fab.loading{opacity:.7;pointer-events:none}
.loc-fab.loading svg{animation:fabPulse 1s ease-in-out infinite}
@keyframes fabPulse{0%,100%{opacity:1}50%{opacity:.4}}
/* .pwa-fab (the floating install button) is styled in js/pwa.js, which owns it */

@media (max-width:600px){.loc-fab{right:12px;bottom:12px;padding:12px}.loc-fab-label{display:none}}

/* nav like count chip */
.nav-links .like-count{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;font-size:11px;font-weight:700;line-height:18px;text-align:center;color:#fff;background:var(--clay);border-radius:100px}

/* premium "featured" cards read as more valuable */
.card.is-premium{border-color:rgba(190,123,84,.42);box-shadow:0 18px 42px -28px rgba(120,80,40,.55)}
.card.is-premium:hover{box-shadow:0 32px 60px -28px rgba(120,80,40,.65);border-color:rgba(190,123,84,.65)}
.card.is-premium::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:4;background:linear-gradient(90deg,var(--clay),#E6B877 50%,var(--clay))}
.ph-feat{z-index:2}
/* Black-Owned corner ribbon (top-left) */
.bo-ribbon{position:absolute;top:0;left:0;width:118px;height:118px;overflow:hidden;z-index:3;pointer-events:none}
.bo-ribbon span{position:absolute;left:-42px;top:22px;width:170px;padding:5px 0;text-align:center;transform:rotate(-45deg);
  background:linear-gradient(135deg,var(--clay),var(--clay-deep));color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.06em;box-shadow:0 2px 7px rgba(0,0,0,.28)}
.cb{font-size:11px;font-weight:600;letter-spacing:.04em;padding:6px 12px;border-radius:100px;display:flex;align-items:center;gap:6px}
/* live status — bottom-left of the photo */
.cb-status{position:absolute;left:12px;bottom:12px;z-index:3;background:rgba(255,253,249,.94);color:var(--forest)}
.cb-status.state-open{border:1.5px solid #3FA66A}
.cb-status.state-open .dot{background:#3FA66A;animation:livePulse 1.8s ease-in-out infinite}
.cb-status.state-closing,.cb-status.state-opening{background:#FBEFD8;color:#8A5A16}
.cb-status.state-closing .dot,.cb-status.state-opening .dot{background:#E0A23E}
.cb-status.state-closed{background:rgba(245,241,233,.94);color:var(--muted)}
.cb-status.state-closed .dot{background:#B3AC9C}
/* status bell: rings while the store is open (or closing soon), rests otherwise */
.cb-status .bell{display:inline-block;transform-origin:50% 12%}
.cb-status.state-open .bell,.cb-status.state-closing .bell{animation:bellRing 2.2s ease-in-out infinite}
@keyframes bellRing{0%,55%,100%{transform:rotate(0)}60%{transform:rotate(-16deg)}66%{transform:rotate(13deg)}72%{transform:rotate(-10deg)}78%{transform:rotate(7deg)}84%{transform:rotate(-3deg)}90%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.cb-status .bell{animation:none!important}}
.dot{width:7px;height:7px;border-radius:50%;background:var(--sage-deep);display:inline-block}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(63,166,106,.55)}70%{box-shadow:0 0 0 5px rgba(63,166,106,0)}}
@media (prefers-reduced-motion:reduce){.cb-status.state-open .dot{animation:none}}
.card-photo .ph-feat{
  position:absolute;top:14px;right:14px;font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:6px 12px;border-radius:100px;
}
.ph-feat.premium{background:linear-gradient(135deg,#3C4A38,#2E3A2E);color:#F2E4C4;border:1px solid rgba(230,184,119,.45);box-shadow:0 3px 12px rgba(40,30,10,.28)}
.ph-feat.standard{background:rgba(255,253,249,.9);color:var(--sage-deep);border:1px solid rgba(110,126,97,.5)}
.card-pad{padding:18px 20px 18px;display:flex;flex-direction:column;flex:1}
/* photo bleeds down the whole card as a soft, blurred backdrop behind the text;
   the high-opacity scrim on .card-pad keeps the copy crisp and readable */
.card.has-photo{
  background-image:var(--card-img);
  /* sized by width + top-aligned; home.js nudges background-position-y so the
     backdrop continues exactly where the photo window's crop leaves off, revealing
     the part of the (often square) image the window cropped below */
  background-size:100% auto;background-position:top center;background-repeat:no-repeat;
}
.card.has-photo .card-pad{
  position:relative;background:rgba(255,253,249,.93);
  -webkit-backdrop-filter:blur(7px) saturate(1.05);backdrop-filter:blur(7px) saturate(1.05);
  /* no flat seam: a soft inset shadow up top makes the bleeding image read as
     sliding *under* the photo cover rather than meeting a solid color line */
  box-shadow:inset 0 11px 14px -9px rgba(46,58,46,.5);
}
.card-cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep);font-weight:500}
.card-name{font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:600;line-height:1.12;margin:6px 0 0}
.card-name a{color:inherit}
.card-name a:hover{color:var(--sage-deep)}
.card-meta{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:13px;color:var(--muted)}
.card-meta--new{font-style:italic;color:var(--sage-deep);opacity:.85}
.stars{display:inline-flex;gap:2px}
.star{color:var(--clay);display:inline-block;line-height:1}
.star.off{color:rgba(190,123,84,.26)}
.rate-num{font-weight:700;color:var(--forest)}

/* featured (premium) cards: stars pop one after another. Per-card speed,
   delays and direction are set in home.js so no two cards match. */
.is-premium .star{animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(1);filter:none;color:var(--clay)}45%{transform:scale(1.24);filter:drop-shadow(0 0 4px rgba(212,160,90,.9));color:#E0A94E}}
@media (prefers-reduced-motion:reduce){.is-premium .star{animation:none}}
.card-nbhd{font-size:13px;color:var(--muted);margin-top:8px}
/* distance chip — overlaid on the photo (bottom-right) so it adds no card height */
.card-dist{position:absolute;right:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;font-family:'Inter';font-size:13px;font-weight:700;color:var(--forest);background:rgba(255,253,249,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.4);border-radius:100px;padding:7px 14px;cursor:pointer;transition:all .2s;box-shadow:0 2px 10px rgba(0,0,0,.22);text-shadow:0 1px 2px rgba(255,255,255,.5)}
.card-dist:hover{background:rgba(255,253,249,.82)}
.card-dist .pin{font-size:11px}
.card-dist .ext-ic{opacity:.85;margin-left:1px;display:inline-block}
.card-dist.has-dist .ext-ic{animation:extNudge var(--ext-dur,2.6s) ease-in-out infinite}
@keyframes extNudge{0%,70%,100%{transform:translate(0,0)}78%{transform:translate(2.5px,-2.5px)}86%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.card-dist .ext-ic{animation:none!important}}
.card-dist.has-dist{color:var(--forest)}
.card-desc{font-size:14px;color:var(--forest-soft);margin-top:10px;font-weight:300;line-height:1.5}
.read-more{color:var(--sage-deep);font-weight:500;white-space:nowrap}
.read-more:hover{color:var(--forest);text-decoration:underline}
/* row label that separates the standard listings from the featured row */
.tier-row-label{
  margin:40px 0 22px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:500;display:flex;align-items:center;gap:14px;
}
.tier-row-label::after{content:"";flex:1;height:1px;background:var(--line)}

/* tags scroll sideways so a spa can list more than fits */
.card-tags-wrap{position:relative;margin-top:12px}
.tags-arrow{
  position:absolute;right:-2px;top:50%;transform:translateY(-50%);
  font-size:17px;line-height:1;font-weight:700;color:var(--sage-deep);
  padding:0 2px 0 22px;background:linear-gradient(90deg,transparent,var(--paper) 55%);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.card-tags-wrap.scrollable .tags-arrow{opacity:1;animation:arrowNudge 1.2s ease-in-out infinite}
.card-tags-wrap.at-end .tags-arrow{opacity:0}
@keyframes arrowNudge{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(5px)}}
/* featured cards get a distinct gold arrow */
.is-premium .tags-arrow{color:var(--clay);font-size:19px;text-shadow:0 0 7px rgba(190,123,84,.4)}
.card-tags{
  display:flex;flex-wrap:nowrap;gap:8px;margin-top:0;
  overflow-x:auto;padding-bottom:6px;
  scrollbar-width:thin;scrollbar-color:var(--sage) transparent;
}
.card-tags::-webkit-scrollbar{height:5px}
.card-tags::-webkit-scrollbar-thumb{background:var(--sage);border-radius:10px}
.card-tags::-webkit-scrollbar-track{background:transparent}
.tag{flex:0 0 auto;white-space:nowrap;font-size:12.5px;color:var(--forest-soft);background:var(--cream-deep);border-radius:100px;padding:8px 15px}
.tag.bo{background:rgba(190,123,84,.14);color:var(--clay-deep)}

/* per-spa perks carousel */
.card-perks{position:relative;margin-top:12px;background:rgba(190,123,84,.10);border:1px solid rgba(190,123,84,.22);border-radius:13px;padding:10px 14px}
.perk{font-size:13px;color:var(--clay-deep);font-weight:500;line-height:1.45;display:none}
.perk.active{display:block;animation:perkfade .45s ease}
@keyframes perkfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.perk-dots{display:flex;gap:5px;margin-top:10px}
.perk-dot{width:6px;height:6px;border-radius:50%;background:rgba(169,102,63,.28);cursor:pointer;transition:all .2s}
.perk-dot.on{background:var(--clay);width:16px;border-radius:10px}
.card-foot{margin-top:auto;padding-top:16px}
.card-actions{display:flex;gap:10px;align-items:stretch}
.card-btn-wide{width:100%;margin-bottom:10px}
/* price (in the rating row) + free-tier claim upsell */
.card-price{font-weight:700;color:var(--forest)}
.card-claim{display:block;margin-top:10px;text-align:center;font-size:12px;font-weight:600;color:var(--sage-deep)}
.card-claim:hover{color:var(--forest);text-decoration:underline}
.dir-ic{font-weight:700}

/* Top-10 ranked grid — a numbered badge floats over each card */
.rank-card{position:relative;display:flex;flex-direction:column}
.rank-card>.card{flex:1;width:100%}
.rank-badge{position:absolute;top:-12px;left:-10px;z-index:6;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--forest),var(--sage-deep));color:#F2E4C4;font-weight:700;font-size:17px;font-family:'Cormorant Garamond',serif;box-shadow:0 5px 16px rgba(40,40,20,.3);border:2px solid var(--paper)}
.rank-top .rank-badge{background:linear-gradient(135deg,#E8C079,#C8922F);color:#3a2c0e;box-shadow:0 5px 18px rgba(160,120,30,.4)}
/* Superlative highlight row above the Top 10 — two cards, pill label instead of a number. */
.spot-grid{grid-template-columns:repeat(3,1fr);margin-bottom:26px}
.spot-card>.rank-badge{display:none}
.spot-badge{position:absolute;top:-12px;left:16px;z-index:6;display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:999px;background:linear-gradient(135deg,#E8C079,#C8922F);color:#3a2c0e;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 5px 16px rgba(160,120,30,.35);border:2px solid var(--paper);white-space:nowrap}
@media(max-width:760px){.spot-grid{grid-template-columns:1fr}}
/* buttons size to their own text — Call is compact, Request fills the rest */
.card-btn{display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;font-size:13px;font-weight:500;padding:11px 18px;border-radius:100px;transition:all .2s;white-space:nowrap}
.card-btn.solid{flex:1}
/* phone only "rings" when the store is open — staggered per card via JS duration */
.ph-ic{display:inline-block;transform-origin:50% 65%}
.card-btn.ghost.is-open .ph-ic{animation:phoneRing 3s ease-in-out infinite}
@keyframes phoneRing{0%,70%,100%{transform:rotate(0)}73%{transform:rotate(-15deg)}76%{transform:rotate(13deg)}79%{transform:rotate(-10deg)}82%{transform:rotate(7deg)}85%{transform:rotate(-4deg)}88%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.ph-ic{animation:none!important}}
.card-btn.ghost{flex:0 0 auto;background:var(--paper);border:1px solid var(--line);color:var(--forest-soft)}

/* ---- example / preview cards (curated demo seeds) ---- */
.card.is-example{position:relative;overflow:hidden}
/* slim sand banner pinned across the top — the unmistakable "preview" signal */
.card-example{display:block;text-align:center;background:var(--sand);color:var(--forest);
  font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid rgba(46,58,46,.12)}
.card-example:hover{background:#dccbb1}
/* photo reads as a mockup: slightly desaturated + a faint wash over it */
.card.is-example .card-photo::after{content:"";position:absolute;inset:0;background:rgba(246,241,233,.18);z-index:2}
.card.is-example .ph-slide{filter:saturate(.7) brightness(1.06)}
/* grayed CTAs — clearly not live, but they route to /pricing/ (a pitch, not a dead end) */
.card-btn--demo{opacity:.6;filter:grayscale(.4);cursor:pointer}
.card-btn--demo:hover{opacity:.85;filter:grayscale(0)}
.card-btn.ghost:hover{border-color:var(--sage)}
/* open store → glossy green Call button with a flare sweep (staggered per card) */
.card-btn.ghost.is-open{position:relative;overflow:hidden;color:#fff;border-color:#3FA66A;
  background:linear-gradient(180deg,#57BB7F,#3FA66A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 7px 16px -7px rgba(63,166,106,.65)}
.card-btn.ghost.is-open:hover{background:linear-gradient(180deg,#4DAF73,#369059);border-color:#369059}
.card-btn.ghost.is-open::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  transform:translateX(-130%);animation:flare var(--flare-dur,3s) ease-in-out infinite}
@keyframes flare{0%,68%{transform:translateX(-130%)}86%,100%{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){.card-btn.ghost.is-open::after{animation:none;opacity:0}}
.card-btn.solid{background:var(--clay);color:#fff}
.card-btn.solid:hover{background:var(--clay-deep)}
/* claim card */
.card.claim{background:repeating-linear-gradient(135deg,var(--cream-deep),var(--cream-deep) 14px,var(--cream) 14px,var(--cream) 28px);border-style:dashed;border-color:rgba(139,154,126,.5)}
.card.claim .card-pad{justify-content:center;align-items:flex-start;text-align:left;min-height:340px}
.claim-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep);font-weight:600}
.claim-h{font-family:'Cormorant Garamond',serif;font-size:27px;font-weight:600;margin:10px 0;line-height:1.1}
.claim-p{font-size:14px;color:var(--forest-soft);font-weight:300;margin-bottom:18px}
.claim-price{font-size:13px;color:var(--clay-deep);font-weight:500;margin-bottom:22px}
.claim-btn{background:var(--forest);color:var(--cream);font-size:13px;font-weight:500;padding:13px 24px;border-radius:100px}
.claim-btn:hover{background:var(--forest-soft)}
.claim-btn.ghost{background:var(--paper);color:var(--forest);border:1px solid var(--line)}
.claim-btn.ghost:hover{background:var(--forest);color:var(--cream)}
/* filler-card link lists (nearby cities / browse by type) */
.claim-links{display:flex;flex-direction:column;gap:8px;margin:4px 0 20px}
.claim-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:500;color:var(--forest);padding:9px 14px;background:var(--paper);border:1px solid var(--line);border-radius:12px;transition:all .2s}
.claim-links a:hover{border-color:var(--sage);background:var(--cream)}
.claim-links a span{font-size:12px;font-weight:600;color:var(--muted)}

/* ---------- black-owned band ---------- */
.bo-band{background:linear-gradient(135deg,var(--sage-deep),var(--forest));color:var(--cream);border-radius:28px;padding:60px}
.bo-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:50px;align-items:center}
.bo-band .eyebrow{color:rgba(246,241,233,.7)}
.bo-band h2{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,3.6vw,46px);font-weight:500;line-height:1.1;margin:14px 0 16px;color:var(--cream)}
.bo-band p{color:rgba(246,241,233,.82);font-weight:300;max-width:440px}
.bo-cta{display:inline-block;margin-top:24px;background:var(--cream);color:var(--forest);font-size:14px;font-weight:500;padding:13px 26px;border-radius:100px}
.bo-cta:hover{background:#fff}
.bo-stat{text-align:center;border-left:1px solid rgba(246,241,233,.2);padding-left:50px}
.bo-num{font-family:'Cormorant Garamond',serif;font-size:84px;font-weight:500;line-height:1;color:var(--cream)}
.bo-stat-l{font-size:13px;color:rgba(246,241,233,.7);margin-top:8px}

/* ---------- cities ---------- */
.cities-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.city{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px 22px;transition:all .25s}
.city:hover{border-color:var(--sage);transform:translateY(-3px)}
.city.hero-city{grid-column:span 2;background:linear-gradient(135deg,var(--sand),var(--cream-deep));border-color:transparent}
.city-name{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:600}
.city.hero-city .city-name{font-size:30px}
.city-sub{font-size:12.5px;color:var(--muted);margin-top:6px;font-weight:300}
.city-top{font-size:12.5px;color:var(--forest-soft);font-weight:500;margin-top:10px;display:flex;align-items:center;gap:5px}
.city-top .ct-star{color:var(--clay)}
.city.hero-city .city-top{font-size:13.5px}
.city-count{font-size:13px;color:var(--sage-deep);font-weight:500;margin-top:12px}
.city.all{display:flex;flex-direction:column;justify-content:center;background:var(--forest);border-color:transparent}
.city.all .city-name,.city.all .city-count{color:var(--cream)}
.city.all .city-sub{color:rgba(246,241,233,.6)}

/* ---------- testimonials ---------- */
.testi-band{background:var(--cream-deep)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:30px}
.testi-stars{color:var(--clay);letter-spacing:2px;font-size:14px}
.testi-q{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:500;font-style:italic;line-height:1.4;color:var(--forest);margin:16px 0 22px}
.testi-by{display:flex;align-items:center;gap:12px}
.av{width:42px;height:42px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.testi-name{font-size:14px;font-weight:600}
.testi-detail{font-size:12.5px;color:var(--muted)}

/* ---------- footer ---------- */
footer{background:var(--forest);color:rgba(246,241,233,.75);padding:70px 0 36px;position:relative;overflow:hidden}
/* faint allover vein texture */
footer::before{content:"";position:absolute;inset:0;background:url('/images/vein-texture.svg') repeat;background-size:240px 240px;opacity:.06;pointer-events:none;z-index:0}
footer .wrap{position:relative;z-index:1}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(246,241,233,.12)}
.foot-logo{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:var(--cream)}
.foot-logo span{color:var(--sage)}
.foot-tag{font-size:13.5px;font-weight:300;max-width:300px;margin-top:14px;line-height:1.6}
.foot-col-h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,241,233,.5);font-weight:500;margin-bottom:16px}
.foot-col a{display:block;font-size:14px;margin-bottom:11px;color:rgba(246,241,233,.78);font-weight:300}
.foot-col a:hover{color:var(--cream)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:13px;color:rgba(246,241,233,.82);font-weight:400}
.foot-list{background:var(--clay);color:#fff;font-size:13px;font-weight:500;padding:11px 22px;border-radius:100px}
.foot-list:hover{background:var(--clay-deep)}

@media(max-width:900px){
  .feat-grid,.testi-grid{grid-template-columns:1fr}
  .cities-grid{grid-template-columns:repeat(2,1fr)}
  .city.hero-city{grid-column:span 2}
  .bo-grid{grid-template-columns:1fr;gap:34px}
  .bo-stat{border-left:0;border-top:1px solid rgba(246,241,233,.2);padding-left:0;padding-top:30px}
  .foot-top{grid-template-columns:1fr 1fr}
  nav{padding:20px 6%}
  .nav-links{display:none}
}

/* ---- footer credit link ---- */
.foot-by{color:var(--clay);text-decoration:none;font-weight:600}
.foot-by:hover{text-decoration:underline}

/* ---- FREE card = the "ghost listing": no photo. Like button floats top-right ---- */
.card.is-free{position:relative}
.card.is-free .card-pad{min-height:0}
.card.is-free .card-name{padding-right:40px}
.card.is-free .like-btn{top:14px;right:14px}

/* ---- pricing tiers ---- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.tier{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:32px 28px;position:relative;display:flex;flex-direction:column}
.tier--featured{border:2px solid var(--clay);box-shadow:0 22px 60px -28px rgba(169,102,63,.55)}
.tier-flag{position:absolute;top:-13px;left:28px;background:var(--clay);color:#fff;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 13px;border-radius:100px}
.tier-name{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep);font-weight:700}
.tier-price{font-family:'Cormorant Garamond',Georgia,serif;font-size:48px;font-weight:600;color:var(--forest);line-height:1;margin:12px 0 6px}
.tier-price span{font-family:'Inter',sans-serif;font-size:15px;font-weight:400;color:var(--muted)}
.tier-tag{font-size:14px;color:var(--forest-soft);font-weight:300;margin-bottom:22px;min-height:42px}
.tier-cta{display:block;text-align:center;background:var(--forest);color:var(--cream);font-size:14px;font-weight:500;padding:13px 0;border-radius:100px;margin-bottom:24px;transition:opacity .2s}
.tier--featured .tier-cta{background:var(--clay)}
.tier-cta.ghost{background:var(--paper);border:1px solid var(--line);color:var(--forest)}
.tier-cta:hover{opacity:.9}
.tier-feats{list-style:none;display:flex;flex-direction:column;gap:12px;padding:0;margin:0}
.tier-feats li{font-size:13.5px;color:var(--forest-soft);padding-left:24px;position:relative;line-height:1.45}
.tier-feats li::before{content:"✓";position:absolute;left:0;color:var(--sage-deep);font-weight:700}
.tier-feats li.off{color:var(--muted)}
.tier-feats li.off::before{content:"–";color:var(--sand)}
.tier-feats li.hd{font-weight:600;color:var(--forest);padding-left:0;margin-top:4px}
.tier-feats li.hd::before{content:""}
.bo-free{max-width:760px;margin:34px auto 0;text-align:center;background:rgba(139,154,126,.1);border:1px solid rgba(139,154,126,.4);border-radius:14px;padding:16px 22px;font-size:14px;color:var(--forest-soft);line-height:1.55}
.bo-free strong{color:var(--forest)}
.bo-free a{color:var(--clay-deep);font-weight:600;white-space:nowrap}
.pricing-note{max-width:680px;margin:22px auto 0;text-align:center;font-size:14px;color:var(--forest-soft);font-weight:300;line-height:1.6}
.pricing-note a{color:var(--clay-deep);font-weight:500}
/* black-owned pill on a (photoless) free card */
.bo-pill{display:inline-block;font-size:10.5px;letter-spacing:.06em;font-weight:700;color:var(--sage-deep);background:rgba(139,154,126,.14);border-radius:100px;padding:3px 10px;margin-bottom:8px}
/* free cards have no photo, so the distance chip sits inline in the foot */
.card.is-free .card-dist{position:static;align-self:flex-start;margin-bottom:10px;background:var(--cream);border:1px solid var(--line);color:var(--forest-soft);box-shadow:none;text-shadow:none}
.card.is-free .card-dist:hover{background:var(--cream-deep)}
@media (max-width:880px){.pricing-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}}

/* ---- "Own this spa?" claim modal ---- */
.claim-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:5vh 16px}
.claim-modal[hidden]{display:none}
.cm-backdrop{position:fixed;inset:0;background:rgba(46,58,46,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cm-dialog{position:relative;z-index:1;width:100%;max-width:540px;background:var(--paper);border-radius:20px;padding:34px 32px 30px;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);animation:cmIn .22s ease}
@keyframes cmIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cm-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border:0;border-radius:50%;background:var(--cream-deep);color:var(--forest);font-size:14px;cursor:pointer;transition:background .2s}
.cm-x:hover{background:var(--sand)}
.cm-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep);font-weight:700}
.cm-title{font-size:28px;font-weight:600;color:var(--forest);margin:6px 0 8px;line-height:1.1}
.cm-sub{font-size:13.5px;color:var(--forest-soft);font-weight:300;line-height:1.5;margin-bottom:8px}
.cm-form{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.cm-plan{display:flex;gap:10px}
.cm-plan label{flex:1;display:flex;align-items:center;gap:8px;justify-content:center;border:1px solid var(--line);border-radius:100px;padding:10px 12px;font-size:13px;font-weight:500;color:var(--forest-soft);cursor:pointer}
.cm-plan label:has(input:checked){border-color:var(--clay);background:rgba(190,123,84,.08);color:var(--forest)}
.cm-sec-h{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-deep);font-weight:700;margin-top:8px;border-top:1px solid var(--line);padding-top:16px}
.cm-field{display:flex;flex-direction:column;gap:5px}
.cm-label{font-size:13px;font-weight:600;color:var(--forest)}
.cm-hint{font-size:11.5px;color:var(--muted)}
.cm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cm-form input[type=text],.cm-form input[type=url],.cm-form textarea,.cm-form select{font-family:'Inter',sans-serif;font-size:14px;color:var(--forest);background:var(--cream);border:1px solid var(--line);border-radius:11px;padding:11px 13px;width:100%;transition:border-color .2s}
.cm-form input:focus,.cm-form textarea:focus,.cm-form select:focus{outline:none;border-color:var(--sage)}
.cm-form textarea{resize:vertical}
.cm-checks,.cm-inline{display:flex;flex-wrap:wrap;gap:10px 16px}
.cm-checks label,.cm-inline{font-size:13px;color:var(--forest-soft);display:flex;align-items:center;gap:6px;font-weight:400}
.cm-premium{border:1px dashed rgba(139,154,126,.5);border-radius:13px;padding:0 16px;background:repeating-linear-gradient(135deg,var(--cream-deep),var(--cream-deep) 14px,var(--cream) 14px,var(--cream) 28px)}
.cm-premium summary{cursor:pointer;padding:14px 0;font-weight:600;font-size:14px;color:var(--forest)}
.cm-premium summary span{font-weight:400;color:var(--muted)}
.cm-premium[open]{padding-bottom:16px;display:flex;flex-direction:column;gap:14px}
.cm-premium[open] summary{margin-bottom:0}
.cm-send{background:var(--clay);color:#fff;border:0;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;padding:14px;border-radius:100px;cursor:pointer;margin-top:6px;transition:background .2s}
.cm-send:hover{background:var(--clay-deep)}
.cm-foot{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.5}
@media (max-width:520px){.cm-dialog{padding:28px 20px 24px}.cm-row{grid-template-columns:1fr}}

/* Legal pages (/privacy/, /terms/) — brand style */
.legal{max-width:760px;margin:0 auto;padding:46px 2px 64px;line-height:1.66}
.legal h1{font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:600;margin:0 0 6px;color:var(--forest,#2E3A2E)}
.legal-date{color:var(--sage-deep,#6E7C5E);font-size:14px;margin:0 0 30px}
.legal h2{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;margin:34px 0 8px;color:var(--forest,#2E3A2E)}
.legal p,.legal li{color:#3a4034}
.legal ul{padding-left:20px;margin:8px 0}
.legal li{margin:6px 0}
.legal a{color:var(--terracotta,#A9663F);text-decoration:underline}