/*
Theme Name: Inspire Wellness
Theme URI: https://inspirewellness-center.com
Author: Inspire Wellness Center
Author URI: https://inspirewellness-center.com
Description: Custom WordPress theme for Inspire Wellness Center — Luxury · Healing · Longevity. Built from the inspire-wellness-homepage.html reference design; layout, section structure, CI colors and fonts preserved as-is.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: inspire-wellness
*/

/* ==========================================================================
   NOTE ON THIS FILE
   :root and every rule below have been updated in place across several
   rounds — colors/fonts now match `ci-mockup-v3.html` (the approved
   reference), not the original static reference file's dark maroon
   palette. New structural additions (hero auto-slider controls, service
   card photos, floating LINE button, scroll-reveal, the space gallery
   marquee, contact banner, etc.) live under "NEW: WORDPRESS THEME
   ADDITIONS" further down.
   ========================================================================== */

:root{
  /* ==========================================================================
     CI COLORS — matches ci-mockup-v3.html exactly (Aug 2026, final
     pre-deploy pass). Only 5 brand colors + 2 derived golds/hairline +
     2 neutral text colors — NO dark section colors anywhere anymore
     (--ink-deep / --gold-pale from the previous round were retired:
     every section on the site is now ivory/white/blush-soft).
     ========================================================================== */
  --ivory:#FFF5E9;
  --ivory-deep:#FBEBD8; /* derived: a touch deeper than ivory for large gradient endpoints — no 2nd ivory shade given in the brand sheet */
  --white:#FFFFFF;
  --blush:#F9D6DF;
  --blush-soft:#FBD6E2;
  --gold:#D4AF37;
  --gold-deep:#B3922E;  /* derived: darker gold for hover/active states only, never a large fill */
  --mauve:#C8A2AC;
  --rose-deep:#962C48;  /* derived: NOT a re-introduction of the old dark/gray palette — this is mauve's own hue (344°) pushed to higher saturation + lower lightness, i.e. a deep rose/berry from the *same* pink-mauve family. Used for the marquee strip only (see item 1, Aug 2026). */
  --line:#F0E2D8;       /* hairline divider — replaces box-shadow on most cards */
  /* Text-only neutrals — NOT brand colors, used solely for legibility */
  --text:#2E2A28;
  --text-soft:#6B6360;
  --shadow: 0 10px 28px rgba(46,42,40,0.08); /* softened — hairline borders (--line) do most of the work now, this is only for hover "lift" */
  /* Thai display/heading font (unchanged this round) */
  --font-th-display: 'Anuphan', 'Cinzel', serif;
  /* Latin-only display font per the brand pairing (Cinzel Light + Montserrat Light) */
  --font-latin: 'Montserrat', sans-serif;
  /* Heading treatment v20 (Aug 2026) — approved via
     inspire-wellness-headings-mockup-v20.html, applied to Hero,
     Philosophy, Services, Our Space (+ FAQ's own heading only, see
     faq-section.css). Deliberately its own small palette, separate
     from --gold/--rose-deep above — confirmed decision per the
     approved mockup, not palette drift. */
  --heading-rose-mid:#D98CA8;
  --heading-rose:#A54F62;
  --heading-gold:#C9A46A;
  --font-script:'Mrs Saint Delafield', cursive;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* Global horizontal-overflow safety net (Aug 2026). body alone already
   had overflow-x:hidden, but html didn't — in a couple of real cases
   found in this audit (elements offset via negative inset/right/left
   past their own section, e.g. the Philosophy card's offset shadow-
   frame) document.documentElement.scrollWidth still ballooned past
   clientWidth even with body clipped, because the overflowing box's
   nearest clipping ancestor was body, not html. Setting overflow-x:
   hidden + max-width:100% on BOTH catches it regardless of which
   element ends up being the source next time a new decorative bit is
   added. This does not replace fixing the actual source of each
   overflow (done throughout this file) — it's the backstop, not the
   fix. */
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}
body{
  font-family:'IBM Plex Sans Thai','Montserrat',sans-serif;
  color:var(--text);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
.eyebrow{
  /* NEW: Montserrat per the brand pairing — eyebrows are pure English
     labels ("Our Space", "Luxury · Healing · Longevity", etc). */
  font-family:var(--font-latin);
  font-weight:300;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:26px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
h1,h2,h3{
  font-family:var(--font-th-display);
  font-weight:500;
  color:var(--text);
  line-height:1.25;
}

/* ================= SECTION DIVIDER — "Soft Fade Blend" (Sep 2026) =================
   Sitewide seam component between two full-width sections of different
   background colors: a plain vertical color-blend bar + a thin gold
   hairline (fading in from both sides) flanking a small heart icon at
   dead centre. Ported from the approved mockup
   `section-divider-options-preview.html` (option A) and first built for
   page-about.php; promoted here (was originally scoped to
   inner-pages.css, which only loads on the 4 inner-page templates) so
   the homepage can use it too — deliberately references --ivory/--white
   directly rather than inner-pages.css's --ip-pearl alias, so this
   never silently breaks if that stylesheet isn't loaded.

   Replaces the old `.ip-scallop` (lace-edge) divider that used to live
   in inner-pages.css — removed from there, this is the only section-
   seam divider in the theme now.

   Two color pairs cover the ivory<->white seam, the most common one on
   this site (used via modifier class); ANY other pair (e.g. the
   Services→Quote Band or FAQ→Why Us seams on the homepage, which each
   meet at a color that isn't plain ivory/white) sets --divider-from/
   --divider-to inline instead — see front-page.php. Sections that
   already share the same color at a seam skip the divider entirely
   (no seam to blend), same rule as page-about.php. */
.ip-divider-fade{
  position:relative;height:90px;z-index:2;
  background:linear-gradient(180deg, var(--divider-from, var(--ivory)) 0%, var(--divider-to, var(--white)) 100%);
}
.ip-divider-fade.ip-fade-to-white{--divider-from:var(--ivory);--divider-to:var(--white);}
.ip-divider-fade.ip-fade-to-pearl{--divider-from:var(--white);--divider-to:var(--ivory);}
.ip-divider-fade .ip-divider-heart{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;opacity:.6;pointer-events:none;}
.ip-divider-fade .ip-divider-heart path{fill:none;stroke:var(--gold);stroke-width:1.2;}
.ip-divider-fade .ip-divider-line{position:absolute;top:50%;height:1px;width:90px;background:linear-gradient(90deg, transparent, var(--gold));pointer-events:none;}
.ip-divider-fade .ip-divider-line-l{left:calc(50% - 100px);}
.ip-divider-fade .ip-divider-line-r{right:calc(50% - 100px);background:linear-gradient(90deg, var(--gold), transparent);}
@media (max-width:768px){
	.ip-divider-fade{height:72px;}
	.ip-divider-fade .ip-divider-line{width:70px;}
	.ip-divider-fade .ip-divider-line-l{left:calc(50% - 80px);}
	.ip-divider-fade .ip-divider-line-r{right:calc(50% - 80px);}
}
@media (max-width:480px){
	.ip-divider-fade{height:56px;}
	.ip-divider-fade .ip-divider-heart{width:18px;height:18px;}
	.ip-divider-fade .ip-divider-line{width:44px;}
	.ip-divider-fade .ip-divider-line-l{left:calc(50% - 54px);}
	.ip-divider-fade .ip-divider-line-r{right:calc(50% - 54px);}
}

/* ================= HEADING TREATMENT v20 (Aug 2026) =================
   Approved via inspire-wellness-headings-mockup-v20.html. Applied to
   Hero, Philosophy, Services, Our Space — the 4 sections the mockup
   had examples for (Why Inspire Wellness / Marquee / Contact Banner
   deliberately untouched, no example existed for them). FAQ gets the
   same eyebrow+h2 treatment too, but defined in faq-section.css since
   it's a separate stylesheet with its own font/color system already.

   .eyebrow-script is a NEW class, not a restyle of the sitewide
   .eyebrow — .eyebrow is still used as-is on Why Inspire Wellness and
   Contact Banner, restyling it directly would have changed those too. */
.eyebrow-script{
  font-family:var(--font-script);font-size:26px;font-weight:400;color:var(--heading-rose-mid);
  display:flex;align-items:center;gap:12px;margin-bottom:14px;line-height:1;width:100%;
  opacity:0;transform:translateY(8px);animation:headingRise .7s .05s cubic-bezier(.2,.7,.2,1) forwards;
}
.eyebrow-script::after{
  content:'';flex:1;height:1px;margin-top:6px;
  background:linear-gradient(90deg, rgba(201,164,106,0.55) 0%, rgba(201,164,106,0.16) 55%, transparent 100%);
}
.eyebrow-script svg{
  width:16px;height:16px;flex-shrink:0;color:var(--heading-gold);position:relative;top:1px;
  transform-origin:50% 85%;animation:eyebrowSway 2.8s ease-in-out infinite;
}
@keyframes eyebrowSway{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg);}}
@keyframes headingRise{to{opacity:1;transform:translateY(0);}}

/* accent phrase within a v20 heading — same typeface as the heading
   itself (not a separate italic), continuous rose-gold shimmer + a
   pulsing glow. Deliberately never stops animating, per the approved
   mockup ("คงไว้เป๊ะ ไม่ต้องปรับให้นิ่งลง"). */
.heading-accent{
  font-family:var(--font-th-display);font-weight:500;
  background:linear-gradient(100deg,
    #C77E63 18%, #F0B99A 42%, #FFE9DE 50%, #F0A8B8 58%, #C77E63 82%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;padding:0 .04em;position:relative;
  opacity:0;transform:translateY(10px);
  animation:headingShimmer 3.2s ease-in-out infinite, headingRiseAccent .8s .3s cubic-bezier(.2,.7,.2,1) forwards, headingGlow 3.2s ease-in-out infinite;
}
@keyframes headingShimmer{
  0%{background-position:120% 0;}
  100%{background-position:-120% 0;}
}
@keyframes headingRiseAccent{to{opacity:1;transform:translateY(0);}}
@keyframes headingGlow{
  0%,100%{filter:drop-shadow(0 0 0px rgba(217,140,168,0));}
  50%{filter:drop-shadow(0 0 7px rgba(217,140,168,0.5));}
}

/* soft blush glow sitting behind an eyebrow+h2/h1 pair. Needs a TIGHT
   wrapper around just that pair (not the whole section) so the glow's
   top:10%/height:80% sizing matches the mockup's proportions instead
   of stretching across an entire multi-paragraph column — see the
   markup in front-page.php, each of the 4 sections wraps just its
   eyebrow-script+heading in .heading-glow-wrap. :has() is supported by
   every current-generation browser; no separate fallback needed. */
.heading-glow-wrap{position:relative;}
.heading-glow-wrap:has(.eyebrow-script)::before{
  content:'';position:absolute;top:10%;left:15%;width:70%;height:80%;
  background:radial-gradient(ellipse at center, rgba(246,214,228,0.35), transparent 68%);
  filter:blur(30px);pointer-events:none;z-index:0;
}
.heading-glow-wrap > *{position:relative;z-index:1;}

/* tiny heart doodle closing a headline — used once, on Our Space */
.heart-doodle{display:inline-flex;margin-left:8px;position:relative;top:2px;opacity:.85;}
.heart-doodle svg{width:15px;height:15px;}

@media (prefers-reduced-motion: reduce){
  .eyebrow-script,.eyebrow-script svg,.heading-accent{animation:none !important;}
  .eyebrow-script,.heading-accent{opacity:1;transform:none;}
}
.serif-en{font-family:'Cinzel',serif;}
.container{
  max-width:1220px;
  margin:0 auto;
  padding:0 40px;
}
.btn{
  /* Aug 2026 fix: every .btn label on this site is Thai ("นัดหมายฟรี
     วันนี้", "จองคิวปรึกษา", etc), but this rule hardcoded Cinzel — a
     Latin-only serif with no Thai glyphs — so every button on the whole
     site was silently falling back to the browser's uncontrolled default
     serif instead of our chosen brand Thai font. Switched to
     --font-th-display (Anuphan) and tightened tracking, since wide
     letter-spacing on Thai text can pull combining vowel/tone marks away
     from their base consonant. */
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-th-display);
  font-weight:500;
  font-size:.82rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:16px 34px;
  border-radius:2px;
  transition:all .35s ease;
  cursor:pointer;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-gold{
  /* middle stop uses --gold (the brand's true primary gold) rather than
     --gold-deep (now the darker "hover/active" shade) so the resting
     button shows the actual CI gold, saving the deeper tone for :hover */
  background:linear-gradient(135deg,#E8C879,var(--gold) 55%,#B9862F);
  color:#3C2A14;
  box-shadow:0 12px 30px rgba(196,150,50,0.35);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(196,150,50,0.45);}
.btn-outline{
  border-color:var(--gold);
  color:var(--gold);
  background:transparent;
}
.btn-outline:hover{background:var(--gold);color:#fff;}

/* ================= TOP BAR ================= */
.topbar{
  /* CI mockup v3: no more dark sections anywhere on the site — light
     ivory bar with a hairline bottom border instead. */
  background:var(--ivory);
  color:var(--text-soft);
  border-bottom:1px solid var(--line);
  font-size:.76rem;
  letter-spacing:.04em;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:9px;
  padding-bottom:9px;
  gap:20px;
}
.topbar-left{display:flex;gap:26px;flex-wrap:wrap;}
.topbar-left span{opacity:.85;}
.topbar-right{display:flex;gap:16px;align-items:center;}
.topbar-right a{
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--gold);
  color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;
  transition:.3s;
}
.topbar-right a:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;}

/* ================= STICKY HEADER WRAP (Sep 2026) =================
   Plain `header{position:sticky}` (the old approach, now removed
   below) doesn't actually work in this theme: html/body both set
   `overflow-x:hidden` (see that rule's own comment further up — a
   deliberate fix for a real horizontal-overflow bug, not something to
   undo for this), and that turns body into a scroll container in a
   way that breaks `position:sticky` for descendants in Chrome —
   confirmed in headless Chrome (header scrolled away with the page
   instead of pinning). `position:fixed` on the wrapper around both
   .topbar + header sidesteps that entirely, since fixed positioning
   isn't affected by an ancestor's `overflow`. See header.php for the
   wrapper markup + #siteHeaderSpacer (an empty in-flow div right
   after it that main.js keeps sized to the wrap's real height, so
   content is never hidden underneath the now out-of-flow bar) and
   main.js for the scroll listener that adds/removes `.is-scrolled`. */
.site-header-wrap{
  position:fixed;top:0;left:0;right:0;z-index:100;
}
.site-header-wrap.is-scrolled .topbar{display:none;}
.site-header-wrap.is-scrolled header{box-shadow:0 8px 24px rgba(46,42,40,0.1);}

/* Anchor targets the nav's fallback links jump to on the homepage
   (home_url('/#top') etc, used until each has its own real page — see
   header.php's comment). Now that the header is a fixed overlay
   instead of sitting in normal flow, an in-page jump to any of these
   would otherwise land right under it. main.js sets --header-offset
   to the fixed wrap's actual current height (topbar shown or hidden)
   on load/resize/scroll, so this stays correct at every breakpoint
   and scroll state; 150px is just the pre-JS/no-JS fallback. */
#top,#philosophy,#services,#space,#why,#contact{
  scroll-margin-top:var(--header-offset, 150px);
}

/* ================= HEADER / NAV ================= */
header{
  /* position now comes from .site-header-wrap above, not this element
     itself — kept as a plain block so it just fills the fixed wrap. */
  background:rgba(255,248,242,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
nav.navwrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:72px;width:auto;}
.brand .brand-text{line-height:1.05;}
.brand .brand-text .n1{
  font-family:'Cinzel',serif;font-size:1.18rem;letter-spacing:.14em;color:var(--text);
}
.brand .brand-text .n2{
  font-family:'Cinzel',serif;font-size:.56rem;letter-spacing:.28em;color:var(--gold);
}
.menu{display:flex;align-items:center;gap:38px;}
.menu > li{position:relative;}
.menu > li > a{
  font-size:.86rem;
  font-weight:500;
  letter-spacing:.02em;
  padding:10px 2px;
  position:relative;
}
.menu > li > a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);
  transition:width .3s;
}
.menu > li > a:hover::after{width:100%;}
.has-dropdown > a{display:flex;align-items:center;gap:5px;}
.caret{font-size:.6rem;transform:translateY(1px);color:var(--gold);transition:transform .3s;}
.has-dropdown:hover .caret{transform:translateY(1px) rotate(180deg);}

/* ---- Mega menu: services with sub-services ---- */
.mega-menu{
  position:absolute;top:120%;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--white);
  width:900px;
  max-width:88vw;
  padding:34px 40px 26px;
  border-radius:8px;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  opacity:0;visibility:hidden;
  transition:all .3s ease;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px 34px;
  z-index:40;
}
.mega-menu::before{
  content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:14px;height:14px;background:var(--white);
  border-left:1px solid var(--line);border-top:1px solid var(--line);
}
.has-dropdown:hover .mega-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.mega-col .cat-link{
  display:flex;align-items:flex-start;gap:9px;
  font-family:var(--font-latin);font-weight:500;font-size:.72rem;
  letter-spacing:.05em;line-height:1.5;
  color:var(--text);
  padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid var(--line);
}
.mega-col .cat-link .dot{
  flex:0 0 auto;width:6px;height:6px;border-radius:50%;margin-top:5px;
  background:linear-gradient(135deg,var(--gold-deep),var(--gold));
  box-shadow:0 0 0 3px var(--blush-soft);
}
.mega-col .cat-link:hover{color:var(--gold);}
.mega-col ul{display:flex;flex-direction:column;gap:9px;}
.mega-col ul a{
  font-size:.79rem;color:var(--text-soft);display:block;line-height:1.4;
  position:relative;padding-left:0;
  transition:color .2s ease, padding-left .2s ease;
}
.mega-col ul a:hover{color:var(--gold-deep);padding-left:6px;}
.mega-foot{
  grid-column:1/-1;margin-top:6px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.mega-foot p{font-size:.78rem;color:var(--text-soft);font-weight:300;line-height:1.6;max-width:520px;}
.mega-foot a.btn{padding:12px 26px;font-size:.7rem;}
.nav-cta{display:flex;align-items:center;gap:22px;}
.nav-cta .phone{font-size:.82rem;display:flex;align-items:center;gap:8px;color:var(--text-soft);}
.nav-cta .phone b{color:var(--text);font-weight:600;}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;}
.burger span{width:24px;height:1.5px;background:var(--text);}

/* ================= INTRO SECTION (class="hero", kept as-is) =================
   Asymmetric 2-column layout — left-aligned copy (~55%) + circular
   portrait (~45%) + stat band. This used to BE the hero; as of this
   round the real hero-slider (template-parts/hero-slider-standby.php)
   is back at the very top of the page, and this whole block now renders
   as the next section right below it — an "intro" section, not the
   hero. Class names were deliberately NOT renamed (still called .hero/
   .hero-main/etc.) to avoid touching dozens of selectors for a purely
   cosmetic rename; front-page.php's comment above the markup explains
   the role change. .hero-stat-band no longer straddles into the
   marquee below (that only made sense when this section sat flush
   under the old full-bleed slide) — it now sits fully inside this
   section's own bottom padding instead. */
.hero{
  position:relative;
  padding:56px 0 64px;
  overflow:visible;
  background:
    radial-gradient(circle at 85% 10%, rgba(249,214,223,0.55), transparent 45%),
    radial-gradient(circle at 0% 90%, rgba(212,175,55,0.10), transparent 40%),
    var(--ivory);
}
.hero-main{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:center;
  padding-bottom:70px;
}
.hero-copy{text-align:left;}
/* v20 heading treatment: eyebrow-script + hero-title now live inside
   .heading-glow-wrap (see front-page.php) so the blush glow sizes
   correctly behind just the two of them, not the whole .hero-copy
   column (which also has the paragraph + buttons below). */
.hero-title{margin:18px 0 20px;}
.hero-title-line1,
.hero-title-line2{
  display:block;
  font-family:var(--font-th-display);
  font-weight:300; /* v20: was 500 */
  font-size:clamp(1.9rem, 3.4vw, 2.65rem);
  line-height:1.62; /* v20: was 1.3 */
}
.hero-title-line1,
.hero-title-line2{color:var(--heading-rose);} /* v20: was --rose-deep / --text */
/* v20: the old "highlighter pen" background box on "ดีที่สุด" is
   replaced by .heading-accent (shimmer gradient text) directly in the
   markup — see front-page.php. .hero-highlight rule removed, it's no
   longer referenced anywhere. */
.hero-copy p{
  font-size:1.02rem;
  color:var(--text-soft);
  line-height:1.85;
  max-width:480px;
  margin:0 0 32px;
  font-weight:300;
}
.hero-actions{display:flex;justify-content:flex-start;gap:16px;flex-wrap:wrap;}

/* ---- circular portrait ---- */
.hero-portrait{
  position:relative;
  width:320px;height:320px;
  margin:0 auto;
}
.hero-portrait-ring{
  position:absolute;inset:-24px;
  border-radius:50%;
  border:1.5px dashed var(--gold);
  opacity:.85;
  pointer-events:none;
  /* Ring v2 (Aug 2026): continuous slow rotation, was static */
  animation:heroRingRotate 40s linear infinite;
}
@keyframes heroRingRotate{ to{ transform:rotate(360deg); } }
.hero-portrait-photo{
  position:absolute;inset:0;
  z-index:2;
  border-radius:50%;
  overflow:hidden;
  border:9px solid var(--white);
  box-shadow:var(--shadow);
}
.hero-portrait-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* source photo (Sep 2026 replacement) is a perfect 700×700 square —
     matches the circular frame's 1:1 ratio exactly, so object-fit:cover
     doesn't crop anything regardless of position; center is correct */
  object-position:center;
}

/* ---- Ring v2 (Aug 2026, per approved mockup v2) ----
   Everything below replaces the old single dashed ring + 3 plain dot
   sparkles: a second static gradient-arc ring layered under the
   rotating dashed one, 3 orbiting gold dots (different size/radius/
   speed/direction) + a trailing blurred "shine" dot on the same path
   as the largest orbit, a fuller 4-leaf branch, 2 diamond accents, and
   3 twinkling ✦/✧ stars. Orbits use the classic 0-size pivot trick: a
   wrapper positioned dead-center that only rotates, with the dot
   pushed out to the target radius via a negative top offset — as the
   wrapper spins, the dot sweeps a circle without any JS. */
.hero-portrait-ring-arc{
  position:absolute;inset:-24px;
  width:calc(100% + 48px);height:calc(100% + 48px);
  pointer-events:none;
}
.hero-portrait-orbit{
  position:absolute;top:50%;left:50%;
  width:0;height:0;
  pointer-events:none;
  animation:heroOrbitSpin 12s linear infinite;
}
.hero-portrait-orbit--rev{animation-duration:18s;animation-direction:reverse;}
.hero-portrait-orbit--fast{animation-duration:9s;}
.hero-portrait-orbit--shine{animation-duration:12s;animation-delay:-3s;}
@keyframes heroOrbitSpin{ to{ transform:rotate(360deg); } }
.orbit-dot{position:absolute;border-radius:50%;}
.orbit-dot--lg{
  top:-170px;left:-4.5px;width:9px;height:9px;
  background:var(--gold);
  box-shadow:0 0 8px 2px rgba(212,175,55,.65), 0 0 16px rgba(212,175,55,.35);
}
.orbit-dot--md{
  top:-150px;left:-2.5px;width:5px;height:5px;
  background:var(--gold-deep);
  box-shadow:0 0 6px 1.5px rgba(212,175,55,.6);
}
.orbit-dot--sm{
  top:-190px;left:-2px;width:4px;height:4px;
  background:linear-gradient(135deg,#fff,var(--blush));
  box-shadow:0 0 6px 2px rgba(249,214,223,.75);
}
.orbit-shine{
  position:absolute;top:-170px;left:-3px;
  width:6px;height:6px;border-radius:50%;
  background:#fff;
  filter:blur(2px);
  box-shadow:0 0 10px 3px rgba(255,255,255,.85);
  opacity:.8;
}
.hero-portrait-branch{position:absolute;top:-26px;left:-22px;width:76px;height:76px;z-index:3;pointer-events:none;}
.hero-portrait-diamond{
  position:absolute;
  width:7px;height:7px;
  background:var(--gold);
  transform:rotate(45deg);
  filter:drop-shadow(0 0 5px rgba(212,175,55,.75));
  pointer-events:none;
}
.hero-portrait-diamond.dm1{top:8%;right:-14px;}
.hero-portrait-diamond.dm2{bottom:20%;left:-16px;}
.hero-portrait-star{
  position:absolute;
  font-size:.85rem;line-height:1;
  color:var(--gold);
  pointer-events:none;
  animation:heroStarPulse 3.4s ease-in-out infinite;
}
.hero-portrait-star.st1{top:-6%;left:24%;animation-delay:0s;}
.hero-portrait-star.st2{bottom:4%;right:-8%;font-size:.65rem;animation-delay:1.1s;}
.hero-portrait-star.st3{top:48%;left:-10%;font-size:.7rem;animation-delay:2.2s;}
@keyframes heroStarPulse{
  0%,100%{opacity:.3;transform:scale(.8) rotate(0deg);}
  50%{opacity:1;transform:scale(1.25) rotate(15deg);}
}
@media (prefers-reduced-motion: reduce){
  .hero-portrait-ring,
  .hero-portrait-orbit,
  .hero-portrait-star{animation:none;}
}
@media(max-width:820px){
  /* scale the whole ornament set down so it doesn't sweep past the
     stat band or hero copy once the portrait itself shrinks in the
     stacked mobile/tablet layout */
  .orbit-dot--lg{top:-120px;}
  .orbit-dot--md{top:-105px;}
  .orbit-dot--sm{top:-135px;}
  .orbit-shine{top:-120px;}
  .hero-portrait-branch{width:60px;height:60px;}
}
@media(max-width:480px){
  /* smallest phones: drop the two outermost/most-detached flourishes
     (small orbiting dot + its shine trail land ~135-190px out from a
     240px-wide photo — visibly disconnected from the circle at this
     size) and tighten the rest further */
  .hero-portrait-orbit--fast,
  .hero-portrait-orbit--shine{display:none;}
  .orbit-dot--lg{top:-92px;}
  .orbit-dot--md{top:-80px;}
  .hero-portrait-branch{width:50px;height:50px;top:-18px;left:-16px;}
  .hero-portrait-star.st3{display:none;}
}

/* ---- stat band: full-width white card, 3 number stats + 4 icon
   stats, hairline dividers. No longer straddles into the section
   below — this section now stands on its own (see note above). ---- */
.hero-stat-band{
  width:calc(100% - 48px);
  max-width:1180px;
  margin:0 auto;
  position:relative;z-index:5;
  background:var(--white);
  border-radius:16px;
  box-shadow:var(--shadow);
  display:flex;flex-wrap:wrap;
  overflow:hidden;
}
.stat-cell{
  flex:1 1 0;
  min-width:130px;
  padding:26px 16px;
  text-align:center;
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
}
.stat-cell:first-child{border-left:none;}
.stat-cell--number .stat-num{font-family:'Cinzel',serif;font-size:1.85rem;color:var(--gold-deep);}
.stat-cell--number .stat-label{font-size:.72rem;color:var(--text-soft);line-height:1.4;max-width:130px;overflow-wrap:break-word;}
.stat-cell--icon .stat-icon-badge{
  width:36px;height:36px;border-radius:50%;
  background:var(--blush);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;
}
.stat-cell--icon .stat-icon-badge svg{width:17px;height:17px;}
.stat-cell--icon .stat-label{font-size:.7rem;color:var(--text-soft);max-width:100px;line-height:1.35;overflow-wrap:break-word;}

@media(max-width:1080px){
  /* minmax(0,1fr), not bare 1fr — see the long note at .philo-grid's
     mobile rule below for why. Applied here too as a precaution: real
     device testing found the .philo-grid track blown out to 649px at
     375px viewport from this exact bare-1fr issue, and every other
     bare-1fr single-column stacking rule in this file could carry the
     same latent bug depending on what content ends up inside it, even
     if it hasn't visibly broken yet. */
  .hero-main{grid-template-columns:minmax(0,1fr);gap:44px;padding-bottom:60px;}
  .hero-copy{text-align:center;}
  /* .eyebrow is a flex row (icon-line + text) so text-align on the
     ancestor above doesn't center it on its own — same fix already
     applied to .philo-right/.contact-banner-copy's eyebrows. Without
     this it sits left-flush directly under the now-centered portrait
     circle, most visible at tablet widths (~768-1024px) where the
     layout has just folded from 2 columns to 1. */
  .hero-copy .eyebrow{justify-content:center;}
  .hero-copy p{margin-left:auto;margin-right:auto;}
  .hero-actions{justify-content:center;}
  .hero-portrait{order:-1;}
}
@media(max-width:820px){
  .hero-stat-band{
    margin:32px auto 0;
    flex-wrap:wrap;border-radius:12px;
  }
  .stat-cell{
    flex:1 1 50%;
    border-left:none;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:20px 10px;
  }
  .stat-cell:nth-child(even){border-right:none;}
}
@media(max-width:480px){
  .hero-portrait{width:240px;height:240px;}
  .hero-portrait-ring,
  .hero-portrait-ring-arc{inset:-18px;width:calc(100% + 36px);height:calc(100% + 36px);}
}
/* stat-band dots: hidden by default (desktop/tablet keep the plain
   flex-wrap band above), only shown once the carousel kicks in below */
.stat-dots{display:none;}
@media(max-width:640px){
  /* Follow-up round: 7-cell band becomes a single-row scroll-snap
     carousel on phones, same technique as the services slider
     (.slider-track) — was a messy 2-col flex-wrap (3 number cells +
     4 icon cells landing unevenly) that forced a lot of vertical
     scrolling. Tablet (768-834px, above this breakpoint) keeps the
     existing 2-col wrap from the block above untouched. */
  .hero-stat-band{
    display:flex;flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:9%;
    -ms-overflow-style:none;scrollbar-width:none;
    background:none;box-shadow:none;border-radius:0;
    padding:4px 2px 6px;
  }
  .hero-stat-band::-webkit-scrollbar{display:none;}
  .stat-cell,
  .hero-stat-band .stat-cell:nth-child(even){
    scroll-snap-align:center;
    scroll-snap-stop:always;
    flex:0 0 82%;
    min-width:0;
    min-height:128px;
    margin-right:14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--white);
    box-shadow:var(--shadow);
  }
  .stat-cell:last-child{margin-right:0;}
  .stat-dots{display:flex;justify-content:center;gap:9px;margin-top:14px;}
  .stat-dots .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--line);cursor:pointer;transition:.3s;
  }
  .stat-dots .dot.active{background:var(--gold-deep);width:22px;border-radius:5px;}
}
@keyframes floatMark{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
/* ================= MARQUEE STRIP =================
   Deepened to --rose-deep (pink-mauve family, not the old gray/maroon
   palette). This round (item 2) layers on: a repeating gold leaf
   pattern in the background, a diagonal shine sweep + independently-
   blinking bokeh dots on top, gold-gradient text (was flat cream), a
   diamond separator (was a ✦ glyph), and an inset shadow for thickness.
   Stacking: background+leaf (auto) < bokeh (z1) < track/text (z1,
   own stacking context) < edge-fade masks (z2) < shine sweep (z3, on
   top of everything so it visibly sweeps across the text too). */
.marquee-strip{
  position:relative;
  /* Layered "light hitting from one corner" gradient (was a flat
     --rose-deep fill) — a soft highlight glow at upper-left, a darker
     pooling shadow at lower-right, and a subtle base linear gradient
     underneath, all still within the rose-deep/mauve hue family (344°).
     Glow opacity is deliberately capped at .22, not brighter — the gold
     text gradient's contrast against it was measured (see below) and a
     brighter glow starts pushing contrast below AA. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1' stroke-opacity='0.17'%3E%3Cpath d='M10 190C35 165 50 130 42 95C36 68 18 42 26 15'/%3E%3Cpath d='M26 55C42 50 55 38 50 20'/%3E%3Cpath d='M30 100C48 96 60 84 56 68'/%3E%3Cpath d='M34 145C50 141 62 129 58 113'/%3E%3Cpath d='M150 15C175 40 188 72 178 100C172 125 152 150 160 185'/%3E%3Cpath d='M164 55C148 50 135 38 140 20'/%3E%3Cpath d='M160 100C142 96 130 84 134 68'/%3E%3Cpath d='M156 145C140 141 128 129 132 113'/%3E%3C/g%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 65% 60% at 28% 20%, rgba(202,99,126,.22) 0%, rgba(202,99,126,0) 62%),
    radial-gradient(ellipse 60% 65% at 74% 85%, rgba(84,23,39,.55) 0%, rgba(84,23,39,0) 65%),
    linear-gradient(160deg, #7A2339 0%, var(--rose-deep) 50%, #7A2339 100%);
  background-size:200px 200px, auto, auto, auto;
  color:var(--ivory);
  padding:22px 0;
  overflow:hidden;
  white-space:nowrap;
  border-top:1px solid var(--gold-deep);
  border-bottom:1px solid var(--gold-deep);
  /* inset shadow top/bottom — gives the strip a touch of physical
     thickness instead of reading as a flat color band */
  box-shadow:inset 0 3px 8px rgba(0,0,0,.18), inset 0 -3px 8px rgba(0,0,0,.18);
}
.marquee-strip::before,
.marquee-strip::after{
  content:"";
  position:absolute;top:0;bottom:0;width:110px;
  z-index:2;pointer-events:none;
}
.marquee-strip::before{left:0;background:linear-gradient(90deg, var(--rose-deep) 0%, rgba(150,44,72,0) 100%);}
.marquee-strip::after{right:0;background:linear-gradient(270deg, var(--rose-deep) 0%, rgba(150,44,72,0) 100%);}

/* shine sweep — a soft diagonal highlight crosses the whole strip every
   ~6s (gradient-overlay translateX, same technique used on the
   philosophy card and, this round, the contact-banner button) */
.marquee-shine{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(100deg, transparent 42%, rgba(255,245,233,.32) 50%, transparent 58%);
  transform:translateX(-160%);
  animation:marqueeShine 6s ease-in-out infinite;
}
@keyframes marqueeShine{
  0%,78%,100%{transform:translateX(-160%);}
  90%{transform:translateX(160%);}
}

/* bokeh sparkles — scattered across the strip (not the scrolling text),
   independent size/blur/timing per dot via inline style + delay */
.marquee-bokeh{position:absolute;inset:0;z-index:1;pointer-events:none;}
.marquee-bokeh span{
  position:absolute;
  border-radius:50%;
  background:var(--gold);
  animation:marqueeBokeh 4.2s ease-in-out infinite;
}
@keyframes marqueeBokeh{
  0%,100%{opacity:.12;transform:scale(.7);}
  50%{opacity:.85;transform:scale(1.2);}
}

.marquee-track{
  position:relative;z-index:1;
  display:inline-flex;
  align-items:center;
  gap:0;
  animation:scrollX 36s linear infinite;
}
.marquee-track span{
  /* English words (Healing/Longevity/Love/Balance/Premium) → Montserrat */
  font-family:var(--font-latin);
  font-size:.82rem;
  font-weight:300;
  letter-spacing:.34em;
  text-transform:uppercase;
  display:flex;align-items:center;
  padding:0 42px;
  position:relative;
  /* gradient text: cream → gold (was flat cream). Bottom stop is pure
     --gold, not the darker --gold-deep — checked contrast against the
     new layered background (incl. its brightest glow patch, the worst
     case): cream 6.24:1, gold 3.11–3.63:1 depending on position. The
     darker gold-deep stop was dropped because it measured as low as
     1.26:1 against the glow, unreadable — gold alone stays acceptable
     for this size of decorative uppercase tracking-heavy text. */
  background:linear-gradient(180deg, #FFF5E9 0%, #E8C879 55%, #D4AF37 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.marquee-track span::after{
  /* small rotated diamond, was a ✦ glyph — glows via drop-shadow */
  content:"";
  display:inline-block;
  width:6px;height:6px;
  background:var(--gold);
  transform:rotate(45deg);
  margin-left:42px;
  filter:drop-shadow(0 0 4px rgba(212,175,55,.85));
}
.marquee-track span:last-child::after{content:none;}
@media (prefers-reduced-motion: reduce){
  .marquee-shine,.marquee-bokeh span{animation:none;}
}
@keyframes scrollX{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* ================= PHILOSOPHY / CONCEPT ================= */
/* white base (was --ivory) + a very faint pink glow near the top-center,
   same technique as the intro section's background radial — keeps the
   "clean white" feel while adding a touch of warmth, and makes the
   pink floating logo card in the left column read as more distinctly
   its own thing against a lighter, less pink-tinted backdrop. */
.philosophy{
  padding:110px 0;
  position:relative;
  background:
    radial-gradient(circle at 50% 0%, rgba(251,214,226,0.13), transparent 55%),
    var(--white);
}
.philo-head{text-align:center;max-width:720px;margin:0 auto 68px;}
/* v20 heading treatment (Our Space is the only user of .philo-head) */
.philo-head h2{font-size:2.2rem;font-weight:300;color:var(--heading-rose);line-height:1.62;}
.philo-head p{color:var(--text-soft);margin-top:18px;line-height:1.9;font-weight:300;}
.concept-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  position:relative;
}
.concept-card{
  --accent: var(--gold); /* was --gold-deep, which is now the darker hover/active shade — accent here should show the true brand gold */
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  padding:46px 28px 38px;
  text-align:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 10px 30px rgba(61,37,48,0.07);
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease;
}
.concept-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.55;transition:opacity .4s ease, height .4s ease;
}
.concept-card::after{
  content:attr(data-index);
  position:absolute;top:14px;right:20px;
  font-family:'Cinzel',serif;font-size:2.1rem;font-weight:600;
  color:var(--text);opacity:.045;letter-spacing:0;
  line-height:1;pointer-events:none;
}
.concept-card:hover{
  transform:translateY(-10px);
  box-shadow:0 26px 46px rgba(61,37,48,0.18);
  border-color:rgba(212,175,55,0.45);
}
.concept-card:hover::before{opacity:1;height:4px;}
.concept-card .icon{
  /* Aug 2026: enlarged from 78px so the new, more detailed botanical-line
     icons (see front-page.php) have room to read clearly. */
  width:90px;height:90px;margin:0 auto 24px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFFDF9, var(--blush-soft) 78%);
  border:1px solid var(--line);
  position:relative;
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease;
}
.concept-card:hover .icon{
  transform:scale(1.08) rotate(-4deg);
  box-shadow:0 10px 24px rgba(212,175,55,0.28);
  border-color:var(--accent);
}
.concept-card .icon svg{width:52px;height:52px;}
.concept-card h3{font-size:1.08rem;margin-bottom:9px;}
.concept-card .en{
  font-family:var(--font-latin);font-weight:300;font-size:.62rem;letter-spacing:.3em;color:var(--gold);
  text-transform:uppercase;margin-bottom:16px;display:inline-flex;align-items:center;gap:8px;
}
.concept-card .en::before,.concept-card .en::after{content:"";width:14px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));}
.concept-card .en::after{background:linear-gradient(90deg,var(--gold),transparent);}
.concept-card p{font-size:.86rem;color:var(--text-soft);line-height:1.75;font-weight:300;}
.concept-card:nth-child(1){--accent:#D98CA0;}
.concept-card:nth-child(1) .icon{background:radial-gradient(circle at 35% 30%, #FFFDF9, var(--blush-soft) 78%);}
.concept-card:nth-child(2){--accent:var(--gold);}
.concept-card:nth-child(3){--accent:#D98CA0;}
.concept-card:nth-child(4){--accent:var(--gold);}

/* ==========================================================================
   PHILOSOPHY — full 2-column redesign (Aug 2026). The .concept-grid/
   .concept-card rules just above are no longer used by the markup
   (superseded by .philo-* below) — left in place, unused, harmless.

   "Shine/sparkle" effects are all flat 2D CSS (gradient sweep + opacity/
   scale pulses) on purpose — no 3D/glass simulation, per explicit
   direction after an earlier attempt at that didn't look good.
   ========================================================================== */
.philo-grid{
  display:grid;
  grid-template-columns:.72fr 1fr; /* ~42% / 58% */
  gap:60px;
  align-items:center;
}

/* ---- LEFT: floating logo card ---- */
.philo-left{position:relative;padding-left:38px;}
.philo-vertical{
  position:absolute;left:-8px;top:50%;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:left center;
  display:flex;align-items:center;gap:10px;
  white-space:nowrap;
}
.philo-vertical .line{width:28px;height:1px;background:var(--gold);flex:none;}
.philo-vertical span{
  font-family:var(--font-latin);font-weight:300;
  font-size:.7rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--mauve);
}
.philo-card-wrap{position:relative;max-width:320px;margin:0 auto;}
.philo-card-ghost{
  position:absolute;top:14px;left:13px;right:-13px;bottom:-14px;
  border:1.5px dashed var(--gold);
  border-radius:18px;
  opacity:.5;
  z-index:1;
}
.philo-card{
  position:relative;z-index:2;
  aspect-ratio:1/1.02;
  border-radius:18px;
  /* white (top-left) → blush-soft → a deeper dusty rose (bottom-right,
     same 344° hue family as --mauve/--rose-deep, not an arbitrary pink)
     — was a flat blush-soft→ivory wash, this reads brighter + has more
     dimension */
  background:linear-gradient(135deg, var(--white) 0%, var(--blush-soft) 55%, #E6A8B8 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  /* item 6 flourish: subtle mouse-tilt parallax on desktop (see main.js)
     — this transition just smooths/eases the JS-driven transform so it
     doesn't track the cursor with a hard 1:1 snap */
  transition:transform .2s ease-out;
  will-change:transform;
}
@media(max-width:1080px){
  .philo-card{transition:none;} /* tilt effect is desktop-only anyway (see main.js hover:hover check) */
}
.philo-card img{width:48%;height:auto;position:relative;z-index:2;}
/* 2 fine-line botanical branches, low-opacity, tucked into opposite
   corners so they add texture without competing with the centered logo */
.philo-card-branch{position:absolute;width:64px;height:64px;z-index:1;pointer-events:none;opacity:.5;}
.philo-card-branch.tl{top:-6px;left:-6px;}
.philo-card-branch.br{bottom:-6px;right:-6px;transform:rotate(180deg);}
/* shine sweep — a narrow diagonal highlight crosses the card every 5s,
   the same technique premium sites use for button/card "shimmer" (a
   gradient overlay translated across, not a lighting simulation) */
.philo-card::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(112deg, transparent 42%, rgba(255,255,255,.6) 50%, transparent 58%);
  transform:translateX(-160%);
  animation:philoShine 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes philoShine{
  0%,80%,100%{transform:translateX(-160%);}
  90%{transform:translateX(160%);}
}
.philo-corner-bracket{position:absolute;top:-6px;left:-6px;width:22px;height:22px;z-index:3;pointer-events:none;}
.philo-corner-bracket::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--gold);}
.philo-corner-bracket::after{content:"";position:absolute;top:0;left:0;width:2px;height:100%;background:var(--gold);}
.philo-plus-mark{
  position:absolute;top:14px;right:16px;z-index:3;
  font-family:var(--font-latin);font-size:1.2rem;line-height:1;color:var(--gold);
  animation:philoPulse 3.2s ease-in-out infinite;
}
.philo-badge{
  position:absolute;bottom:-16px;right:-8px;z-index:4;
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:#3C2A14;
  padding:9px 18px 9px 14px;
  border-radius:999px;
  font-family:var(--font-latin);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;
  /* glow: plain drop-shadow, not a lit/glass simulation */
  filter:drop-shadow(0 0 10px rgba(212,175,55,.55));
}
.philo-badge svg{width:12px;height:12px;flex:none;}
.philo-deco-dotted{position:absolute;width:70px;height:70px;border:1px dotted var(--gold);border-radius:50%;top:-26px;right:-18px;z-index:0;pointer-events:none;}
.philo-deco-circle{position:absolute;width:32px;height:32px;border:1.5px solid var(--gold);border-radius:50%;bottom:-34px;right:56px;z-index:0;pointer-events:none;}
.philo-deco-plus{position:absolute;font-family:var(--font-latin);color:var(--gold);font-size:.85rem;line-height:1;pointer-events:none;animation:philoPulse 3.4s ease-in-out infinite;}
.philo-deco-plus.p1{top:8%;left:-16px;animation-delay:.3s;}
.philo-deco-plus.p2{bottom:14%;left:-26px;animation-delay:1.1s;}
.philo-deco-plus.p3{top:42%;right:-20px;animation-delay:1.8s;}
@keyframes philoPulse{
  0%,100%{opacity:.35;transform:scale(.88);}
  50%{opacity:1;transform:scale(1.15);}
}

/* ---- RIGHT: philosophy content ----
   v20 heading treatment: eyebrow-script + philo-title now live inside
   .heading-glow-wrap (see front-page.php) — the old "+" prefix
   (.philo-eyebrow-plus) is replaced by the shared leaf SVG, and the
   "ชีวิตที่ดีที่สุด" phrase now uses .heading-accent instead of a
   flat .c-gold color. */
.philo-title{margin:16px 0 20px;}
.philo-title-line1,.philo-title-line2{
  display:block;
  font-family:var(--font-th-display);
  font-weight:300; /* v20: was 500 */
  font-size:clamp(1.85rem, 3vw, 2.35rem);
  line-height:1.62; /* v20: was 1.4 */
}
.philo-title-line1{color:var(--heading-rose);} /* v20: was --rose-deep */
.philo-title-line2 .c-mauve{color:var(--heading-rose);} /* v20: was --rose-deep */
.philo-intro{color:var(--text-soft);font-size:.98rem;line-height:1.85;max-width:520px;margin-bottom:36px;font-weight:300;}

.philo-rows{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px;}
/* v3 card redesign (Aug 2026), ported from the approved mockup
   (inspire-wellness-philosophy-cards-mockup-v3.html) — same
   rose/blush "feminine card" technique already used for Why Inspire
   Wellness (.why-item), independently scoped here (not sharing CSS
   rules with .why-item) so neither section can affect the other, but
   using the identical values/technique per the brief. */
.philo-row{
  --rose:#C46A85;
  --rose-deep:#9C4C68;
  --blush-soft:#FDECF1;
  --line:#F5E4E9;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  text-align:left; /* .philo-right centers text at ≤1080px — cards need to stay left-aligned internally regardless */
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px 20px 18px;
  max-width:340px;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.philo-row:hover{
  transform:translateY(-5px);
  box-shadow:0 26px 42px -20px rgba(196,106,133,.3);
  border-color:rgba(196,106,133,.35);
}
/* hover-triggered top-edge line reveal, same technique as .why-item::before */
.philo-row::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;z-index:1;
  background:linear-gradient(90deg,var(--rose),var(--blush));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s ease;
  pointer-events:none;
}
.philo-row:hover::before{transform:scaleX(1);}

.philo-row .top-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;}
.philo-row .icon-circle{
  width:46px;height:46px;flex-shrink:0;border-radius:50%;
  background:radial-gradient(circle at 32% 26%, #FFFFFF, var(--blush-soft) 60%, var(--blush) 100%);
  border:1px solid rgba(196,106,133,.25);
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.philo-row:hover .icon-circle{transform:scale(1.08) rotate(-4deg);box-shadow:0 12px 24px -8px rgba(196,106,133,.35);}
.philo-row .icon-circle svg{width:20px;height:20px;color:var(--rose-deep);}
.philo-row .num{font-family:var(--font-script);font-size:26px;font-weight:400;color:var(--blush);opacity:.9;margin-top:-2px;}

.philo-row h4{font-size:14.5px;font-weight:500;color:#A54F62;margin-bottom:5px;line-height:1.4;}
.philo-row .accent-line{display:flex;align-items:center;gap:5px;margin-bottom:8px;}
.philo-row .accent-line span{width:14px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,var(--rose),transparent);}
.philo-row .accent-line svg{width:8px;height:8px;color:var(--rose);flex:none;}
.philo-row p{font-size:11.5px;color:#D98CA8;line-height:1.65;}
@media (prefers-reduced-motion: reduce){
  .philo-row::before{transition:none;}
}

.philo-outro{color:var(--text-soft);font-size:.95rem;line-height:1.85;margin-bottom:30px;font-weight:300;}

.philo-pills{display:flex;flex-wrap:wrap;gap:10px;}
.philo-pill{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--gold);color:var(--gold-deep);
  padding:7px 14px;border-radius:999px;
  font-family:var(--font-latin);font-size:.72rem;font-weight:500;letter-spacing:.02em;
  transition:.3s;
}
.philo-pill:hover{background:var(--gold);color:#fff;}

/* scroll-reveal stagger: left card first, then right content one piece
   at a time (title → intro → 4 rows → outro → pills). All of these are
   within one viewport chunk so IntersectionObserver alone would fire
   them together — the sequence comes from transition-delay. v20: the
   eyebrow-script + philo-title no longer carry .reveal — they now
   have their own built-in entrance animation (headingRise/
   headingShimmer, fires on page load, not on scroll-into-view) as
   part of the approved heading treatment, so .philo-intro is now the
   first .reveal element in this stagger sequence. */
.philo-left.reveal{transition-delay:0s;}
.philo-intro.reveal{transition-delay:.1s;}
.philo-row.reveal:nth-child(1){transition-delay:.34s;}
.philo-row.reveal:nth-child(2){transition-delay:.4s;}
.philo-row.reveal:nth-child(3){transition-delay:.46s;}
.philo-row.reveal:nth-child(4){transition-delay:.52s;}
.philo-outro.reveal{transition-delay:.6s;}
.philo-pills.reveal{transition-delay:.66s;}

@media(max-width:1080px){
  /* ROOT CAUSE of the Philosophy mobile overflow that survived 2 prior
     "fix" rounds (badge/ghost offset tweaks, .philo-left flex
     centering) — verified via real headless-Chrome layout at 375px,
     not just reasoning: bare `1fr` on a CSS Grid track has an implicit
     *automatic minimum size* equal to the largest min-content width of
     the items placed in it — NOT 0. Measured before this fix:
     .philo-grid's single column computed to 649.359px wide at a
     375px viewport (getComputedStyle(...).gridTemplateColumns), even
     though .philo-grid itself correctly measured 375px — the TRACK
     was blown out internally, dragging .philo-left/.philo-right (and
     everything in them — the card, the badge, the h2) out to 649px
     with them. Every earlier fix was adjusting things *inside* that
     already-649px box, which could never have worked. `minmax(0,1fr)`
     overrides the automatic minimum to 0, letting the track actually
     shrink to the container's real width — verified after this fix:
     .philo-left/.philo-right both measure exactly 327px (375px
     viewport − 48px container padding), no overflow. */
  .philo-grid{grid-template-columns:minmax(0,1fr);gap:56px;}
  /* card first (top), text after (bottom) when stacked — was the
     reverse (text before card). Bug fix: .philo-card-wrap's own
     margin:0 auto centering was mathematically correct (verified),
     but the card's decorations (ghost -13px/-14px right/bottom,
     badge -8px/-16px right/bottom vs. corner-bracket/branch only
     -6px left/top) are NOT symmetric — they lean the card's visual
     weight toward the bottom-right, which reads as "not centered"
     even though the CSS box technically is. Switching .philo-left to
     flex+align-items:center is a second, more robust centering
     mechanism layered on top (belt-and-suspenders, doesn't rely on
     margin:auto/max-width interaction alone); the decoration offsets
     themselves are also tightened below for phones specifically. */
  .philo-left{order:1;padding-left:0;padding-top:30px;display:flex;flex-direction:column;align-items:center;}
  .philo-right{order:2;text-align:center;}
  .philo-right .eyebrow-script{justify-content:center;}
  .philo-intro{margin-left:auto;margin-right:auto;}
  .philo-vertical{display:none;} /* decorative-only, dropped when stacked per brief */
  .philo-pills{justify-content:center;}
}
.philo-dots{display:none;}
@media(max-width:640px){
  /* Follow-up round: the 4 philosophy rows become a single-row
     scroll-snap carousel, same technique as the why-us/stat-band
     carousels. v3 card redesign: .philo-row is now a full standalone
     card at every breakpoint (border/background/radius all live in
     the base rule above), so this block only needs the carousel-
     specific sizing — was redeclaring border/background/radius/
     shadow here too, back when the base rule was still a plain list
     row with just a top divider. max-width:none overrides the base
     rule's max-width:340px so flex-basis is the only thing controlling
     width in carousel mode (340px would otherwise cap the "peek"
     sizing on anything wider than ~405px, e.g. large phones/phablets
     up to the 640px ceiling of this breakpoint). */
  .philo-rows{
    display:flex;flex-wrap:nowrap;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:8%;
    padding:4px 2px 6px;
    margin-bottom:8px;
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .philo-rows::-webkit-scrollbar{display:none;}
  .philo-row{
    scroll-snap-align:center;
    scroll-snap-stop:always;
    flex:0 0 84%;
    min-width:0;
    max-width:none;
  }
  .philo-dots{display:flex;justify-content:center;gap:9px;margin-top:4px;}
  .philo-dots .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--line);cursor:pointer;transition:.3s;
  }
  .philo-dots .dot.active{background:var(--gold-deep);width:22px;border-radius:5px;}
  .philo-deco-dotted,.philo-deco-circle,.philo-deco-plus{display:none;} /* keep the mobile version calm — card + badge still shine/pulse */
}
@media(max-width:480px){
  /* Bug fix: root cause was .philo-card-wrap staying at its full
     max-width:320px on narrow phones while .philo-card-ghost
     (right:-13px/bottom:-14px) and .philo-badge (right:-8px/bottom:
     -16px) are deliberately offset PAST the card's own edges — by
     design (an "offset shadow-frame" look), fine when there's enough
     surrounding margin, but at ~375-428px viewport the container's
     inner width (~327-380px) leaves barely any margin around a 320px
     card, so the ghost's -13px offset pushed past the container edge
     and (in real testing) triggered horizontal page scroll — the
     .philo-deco-* elements above are already display:none by this
     width so they're not part of the problem. Rather than shrink each
     offset individually (which would visibly change the "offset
     frame" look), shrinking the card itself opens up enough margin
     for the *same* unmodified offsets to fit safely — at the narrowest
     tested width (375px) this leaves ~23px of margin on each side,
     comfortably more than the 13px/8px/6px the ghost/badge/corner
     -bracket need.

     Follow-up round: that fix addressed actual page overflow, but the
     card's decorations were still visually lopsided — ghost/badge lean
     -13px/-16px right/bottom while corner-bracket/branch only lean
     -6px left/top, so the whole assembly's visual center sits a bit
     right-and-down of .philo-card-wrap's true (correctly centered) CSS
     box, reading as "not centered" on a small screen where that
     several-px skew is proportionally more noticeable. Tightening
     ghost/badge to be closer to the left/top offsets balances the
     silhouette around the wrap's actual center. */
  .philo-card-wrap{max-width:280px;}
  .philo-card-ghost{top:9px;left:9px;right:-7px;bottom:-8px;}
  .philo-badge{right:-3px;bottom:-9px;}
}
@media (prefers-reduced-motion: reduce){
  .philo-card::after,.philo-plus-mark,.philo-deco-plus{animation:none;}
}

/* ================= SERVICES ================= */
.services{padding:100px 0;background:linear-gradient(180deg,var(--ivory) 0%, var(--ivory-deep) 100%);}
.services-top{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:56px;flex-wrap:wrap;gap:24px;
}
/* v20 heading treatment: .services-top is a flex ROW (heading | blurb
   side by side), so eyebrow-script + h2 are wrapped in
   .heading-glow-wrap to become a single flex item on the left — the
   old .services-top h2{max-width} moves onto that wrapper instead. */
.services-top .heading-glow-wrap{max-width:520px;}
.services-top h2{font-size:2.2rem;font-weight:300;color:var(--heading-rose);line-height:1.62;}
.services-top p{color:var(--text-soft);max-width:360px;font-size:.92rem;line-height:1.8;font-weight:300;}
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.service-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  padding:38px 32px;
  position:relative;
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease;
}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);}
.service-card .tag{
  font-family:var(--font-latin);font-weight:300;font-size:.62rem;letter-spacing:.2em;
  color:var(--gold);text-transform:uppercase;
  background:var(--blush-soft);
  display:inline-block;padding:6px 14px;border-radius:20px;
  margin-bottom:22px;
}
.service-card .icon{width:42px;height:42px;margin-bottom:20px;}
.service-card .icon svg{width:100%;height:100%;}
.service-card h3{font-size:1.18rem;margin-bottom:10px;}
.service-card p{font-size:.87rem;color:var(--text-soft);line-height:1.75;margin-bottom:22px;font-weight:300;}
/* ---- service slider ----
   Aug 2026: full-bleed edge-to-edge (was boxed to the same 1220px/40px
   container as everything else, which clipped the leftmost card against
   the container edge). Only .slider-wrap changed — .services-top (the
   heading/blurb) stays in a normal .container above it. */
.slider-wrap{
  position:relative;
  width:100%;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:14px;
}
.slider-track{
  display:flex;
  gap:26px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  /* NOTE: no scroll-behavior:smooth here on purpose — applying CSS
     smooth-scroll easing on top of native touch-momentum scrolling is a
     known iOS Safari conflict that keeps mandatory scroll-snap from
     settling precisely on a card after a swipe (it can stop mid-card
     instead). The arrow/dot buttons below already pass their own
     {behavior:'smooth'} per call in services.js, which works
     independently of this CSS property, so removing it only affects —
     and fixes — native touch-driven scrolling. */
  scroll-padding-inline:2px; /* matches this element's own 2px horizontal padding */
  padding:8px 2px 26px;
  flex:1;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.slider-track::-webkit-scrollbar{display:none;}
.service-card{
  scroll-snap-align:start;
  scroll-snap-stop:always; /* don't let a fast swipe skip past multiple cards */
  flex:0 0 300px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:34px 28px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.service-card::before{
  content:"";
  position:absolute;left:0;top:0;right:0;height:4px;
  background:var(--accent, var(--gold));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent;}
.service-card:hover::before{transform:scaleX(1);}
.service-card .num{
  position:absolute;top:26px;right:26px;
  font-family:'Cinzel',serif;font-size:.72rem;color:var(--mauve);
  letter-spacing:.1em;
}
.service-card .tag{
  font-family:var(--font-latin);font-weight:300;font-size:.6rem;letter-spacing:.16em;
  color:var(--accent, var(--gold));text-transform:uppercase;
  background:var(--accent-soft, var(--blush-soft));
  display:inline-block;padding:6px 13px;border-radius:20px;
  margin-bottom:20px;
}
.service-card .icon{
  width:46px;height:46px;margin-bottom:18px;
  color:var(--accent, var(--gold));
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--accent-soft, var(--blush-soft));
}
.service-card .icon svg{width:24px;height:24px;}
.service-card h3{font-size:1.06rem;margin-bottom:8px;line-height:1.35;min-height:2.7em;}
.service-card .tagline{font-size:.82rem;color:var(--text-soft);line-height:1.65;margin-bottom:22px;font-weight:300;min-height:2.6em;}
.service-card .more{
  font-size:.78rem;font-weight:600;color:var(--text);
  display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--text);
  padding-bottom:2px;
}
.service-card:hover .more{color:var(--accent, var(--gold));border-color:var(--accent, var(--gold));}
.service-card .count-badge{
  position:absolute;bottom:26px;right:26px;
  font-size:.7rem;color:var(--text-soft);
  display:flex;align-items:center;gap:5px;
}
.slider-arrow{
  flex:none;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--text);
  font-size:1.3rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.3s;
}
.slider-arrow:hover{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep);}
.slider-dots{
  display:flex;justify-content:center;gap:9px;margin-top:8px;
}
.slider-dots .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--line);
  cursor:pointer;transition:.3s;
}
.slider-dots .dot.active{background:var(--gold-deep);width:22px;border-radius:5px;}

/* ---- price popup modal (editorial photo-bg redesign, Sep 2026) ----
   Ported from the approved mockup service-popup-redesign-preview.html.
   Applies identically to all 7 category popups — services.js swaps in
   each category's icon/title/tagline/rows/background image on click,
   nothing here is per-category CSS. Local --pink here is this
   redesign's own accent (mockup's --pink), distinct from the sitewide
   --heading-rose-mid/--heading-rose used elsewhere — kept scoped to
   .price-modal like --rose/--rose-deep/--blush-soft already were, not
   promoted to :root, since no other component uses this exact shade. */
.price-modal-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(61,37,48,0.55);
  backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.price-modal-overlay.open{opacity:1;visibility:visible;}
.price-modal{
  --rose:#C46A85;
  --rose-deep:#9C4C68;
  --blush-soft:#FDECF1;
  --pink:#D6407D;

  /* Sep 2026: the flat white→blush-soft wash is gone — #priceModalBg
     (a real photo, swapped per category by services.js) + .pm-scrim
     now paint the whole card, so .price-modal itself has no background
     of its own (would never show under them anyway). */
  width:100%;max-width:620px;
  max-height:86vh;
  border-radius:30px;
  border:1px solid var(--blush);
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;
  transform:translateY(30px) scale(.97);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 40px 70px -20px rgba(150,44,72,.3);
}
.price-modal-overlay.open .price-modal{transform:translateY(0) scale(1);}

/* full-bleed background photo + rose-brown tint scrim — z-index 0/1,
   sit behind every other .price-modal child. Flex/grid items respect
   z-index even at the default position:static, so .price-modal-head/
   -body/-foot below don't need position:relative just to layer above
   these; only the absolutely-positioned decoration needs to leave the
   flex flow explicitly. */
.pm-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.pm-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;}
.pm-scrim{
  position:absolute;inset:0;z-index:1;
  /* exact intensity from the approved mockup's latest pass — dark
     enough for white text to read clearly, not so dark the photo
     disappears */
  background:
    linear-gradient(180deg, rgba(60,20,30,0.22) 0%, rgba(60,20,30,0.12) 30%, rgba(40,15,22,0.32) 65%, rgba(30,10,16,0.58) 100%);
}

.price-modal-close{
  position:absolute;top:18px;right:18px;z-index:5;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.18);backdrop-filter:blur(6px); /* Sep 2026: frosted glass, was solid white */
  border:1px solid rgba(255,255,255,.4);
  color:#fff;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease, background .3s ease;
}
.price-modal-close svg{width:15px;height:15px;}
.price-modal-close:hover{background:rgba(255,255,255,.3);transform:rotate(90deg);}

.price-modal-head{
  position:relative;z-index:3;
  padding:32px 34px 4px;
  flex:none;
}
.price-modal-head .cat-row{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.pm-icon{
  width:52px;height:52px;border-radius:50%;flex:none;position:relative;
  /* Sep 2026: frosted glass badge on the photo bg, was an opaque
     gradient fill (only worked on the old flat-color header) */
  background:rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.55);
  color:var(--pink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:none;
}
/* Sep 2026: slow-spinning dashed pink ring around the category-tag
   icon badge, per the mockup's .heart-badge::before */
.pm-icon::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px dashed rgba(214,64,125,.55);
  animation:pmBadgeSpin 12s linear infinite;
}
.pm-icon svg{width:22px;height:22px;}
.pm-eyebrow{
  font-family:var(--font-latin);font-size:.72rem;letter-spacing:.14em;font-weight:500;
  color:#fff; /* Sep 2026: white on the photo bg, was pink */
  text-transform:uppercase;
}

/* frosted heading panel — full width (matches .pm-row width below, not
   just a wrap-content box around the text) */
.pm-heading-panel{
  width:100%;
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:18px;
  padding:14px 20px;
  margin-bottom:4px;
}
.price-modal-head h3{
  font-family:var(--font-th-display);font-size:1.3rem;font-weight:500;color:var(--pink);
  line-height:1.35;margin-bottom:4px;
  text-shadow:0 0 14px rgba(255,255,255,.9), 0 2px 6px rgba(0,0,0,.1); /* white glow keeps pink readable over the photo */
}
.price-modal-head p{
  font-family:var(--font-script);font-size:1.15rem;color:#fff;opacity:1;font-weight:400;
  text-shadow:0 2px 10px rgba(0,0,0,.3);
}

/* flourish divider — replaces the old plain gradient-line under the
   header, per the mockup */
.pm-flourish{display:flex;align-items:center;gap:10px;margin:16px 0 4px;}
.pm-flourish-line{flex:1;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.55));}
.pm-flourish-line-right{background:linear-gradient(90deg, rgba(255,255,255,.55), transparent);}
.pm-flourish svg{width:13px;height:13px;flex-shrink:0;fill:none;stroke:var(--pink);stroke-width:1.6;}

.price-modal-body{
  position:relative;z-index:3;
  padding:14px 34px 8px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.5) transparent;
}
.price-modal-body::-webkit-scrollbar{width:6px;}
.price-modal-body::-webkit-scrollbar-track{background:transparent;}
.price-modal-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.5);border-radius:3px;}
.pm-group-title{
  font-family:var(--font-th-display);
  font-size:.86rem;font-weight:600;color:#fff;
  margin:22px 0 10px;
  display:flex;align-items:center;gap:8px;
}
.pm-group-title:first-child{margin-top:14px;}

/* frosted glass service-item card (Sep 2026 no-price update) —
   translucent border, no more solid blush-soft hover fill (the
   mockup's .item). Price is gone entirely now: the old right-hand
   price slot is a circular arrow button (.pm-row-arrow) that fills
   pink on hover, and the name gets a small leading heart icon
   (.pm-row-icon) — item.price/item.consult are still set in
   SERVICE_DATA (services.js) for possible reuse elsewhere, just no
   longer read by rowHTML(). Padding/radius widened slightly (was 14px
   18px / 16px) now that each card holds less content, and the hover
   lift is more pronounced (was translateY(-2px), no box-shadow). */
.pm-row{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.28);
  border-radius:18px;
  padding:18px 20px;
  margin-bottom:12px;
  position:relative;
  transition:background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.pm-row:last-child{margin-bottom:0;}
.pm-row:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.55);transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.18);}
.pm-row-info{display:flex;align-items:flex-start;gap:12px;min-width:0;}
.pm-row-icon{width:16px;height:16px;margin-top:3px;flex-shrink:0;opacity:.85;color:var(--pink);}
.pm-row-icon svg{width:100%;height:100%;}
.pm-row-left{display:flex;flex-direction:column;gap:4px;min-width:0;}
.pm-row-name{font-family:var(--font-th-display);font-size:1rem;color:#fff;font-weight:400;letter-spacing:.01em;}
.pm-row-link{
  font-size:.78rem;color:var(--pink);
  display:inline-flex;align-items:center;gap:4px;
  width:fit-content;
}
.pm-row-link svg{width:10px;height:10px;}
.pm-row-link:hover{text-decoration:underline;}
/* circular arrow button, replaces the old price slot */
.pm-row-arrow{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease, border-color .3s ease;
}
.pm-row-arrow svg{width:14px;height:14px;transition:transform .3s ease;}
.pm-row:hover .pm-row-arrow{background:var(--pink);border-color:var(--pink);}
.pm-row:hover .pm-row-arrow svg{transform:translateX(2px);}

.price-modal-foot{
  position:relative;z-index:3;
  flex:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 34px 28px;
  border-top:1px solid rgba(255,255,255,.25);
  margin-top:6px;
  flex-wrap:wrap;
}
.price-modal-foot span{font-size:.78rem;color:rgba(255,255,255,.85);font-weight:300;max-width:260px;line-height:1.6;}
.price-modal-foot .btn{padding:13px 26px;font-size:.72rem;} /* .btn-gold keeps the brand's gold-deep→gold gradient as-is */
/* shine sweep on the modal's CTA button specifically (not every
   .btn-gold sitewide — kept scoped to this context, unchanged from the
   previous redesign; this is a gradient sweep on a solid gold pill,
   not the sparkle-SVG effect this redesign avoids elsewhere). */
#priceModalCta{position:relative;overflow:hidden;}
#priceModalCta::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg, transparent 42%, rgba(255,255,255,.6) 50%, transparent 58%);
  transform:translateX(-160%);
  animation:pmCtaShine 5.5s ease-in-out infinite;
}
@keyframes pmCtaShine{
  0%,80%,100%{transform:translateX(-160%);}
  90%{transform:translateX(160%);}
}
@media (prefers-reduced-motion: reduce){
  #priceModalCta::after{animation:none;}
}

/* ambient decoration — 3 soft pink/gold bokeh glow-dots + 1 floating
   heart, z-index 2 (above the scrim, below the head/body/foot
   content). Deliberately NOT the sitewide 4-point sparkle SVG used
   elsewhere (.ip-sparkle etc) — tried here in an earlier round and it
   rendered as a large solid gold triangle, so this redesign only ever
   uses soft blurred glow-dots + this one heart. */
.pm-glow-dot{position:absolute;border-radius:50%;z-index:2;pointer-events:none;filter:blur(2px);animation:pmDotPulse 3.6s ease-in-out infinite;}
.pm-glow-dot.pm-pink{background:radial-gradient(circle, rgba(242,169,196,.9), rgba(242,169,196,0) 70%);}
.pm-glow-dot.pm-gold{background:radial-gradient(circle, rgba(212,175,55,.85), rgba(212,175,55,0) 70%);}
.pm-glow-dot:nth-of-type(1){width:26px;height:26px;top:7%;left:7%;animation-delay:.2s;}
.pm-glow-dot:nth-of-type(2){width:18px;height:18px;top:16%;right:10%;animation-delay:1.4s;}
.pm-glow-dot:nth-of-type(3){width:20px;height:20px;bottom:16%;left:5%;animation-delay:2.3s;}
.pm-tiny-heart{position:absolute;top:11%;right:22%;width:11px;height:11px;z-index:2;opacity:.75;pointer-events:none;animation:pmHeartFloat 4.5s ease-in-out infinite;}
.pm-tiny-heart svg{width:100%;height:100%;fill:none;stroke:var(--pink);stroke-width:1.8;}
@keyframes pmBadgeSpin{to{transform:rotate(360deg);}}
@keyframes pmDotPulse{0%,100%{opacity:.25;transform:scale(.8);} 50%{opacity:.8;transform:scale(1.15);}}
@keyframes pmHeartFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
@media (prefers-reduced-motion: reduce){
  .pm-icon::before,.pm-glow-dot,.pm-tiny-heart{animation:none;}
  .pm-glow-dot{opacity:.4;}
  .pm-tiny-heart{opacity:.5;}
}

@media(max-width:640px){
  .service-card{flex:0 0 260px;}
  .price-modal-head{padding:26px 22px 4px;}
  .pm-heading-panel{padding:12px 16px;}
  .price-modal-head h3{font-size:1.15rem;}
  .price-modal-head p{font-size:1.02rem;}
  .price-modal-body{padding:10px 22px 4px;}
  .pm-row{padding:14px 16px;border-radius:16px;gap:12px;}
  .pm-row-arrow{width:34px;height:34px;}
  .pm-row-arrow svg{width:12px;height:12px;}
  .price-modal-foot{padding:18px 22px 24px;}
}
@media(max-width:420px){
  .price-modal{max-height:92vh;}
  .price-modal-head{padding:22px 18px 4px;}
  .pm-icon{width:44px;height:44px;}
  .pm-icon svg{width:18px;height:18px;}
  .price-modal-body{padding:8px 18px 4px;}
  .pm-row{padding:12px 14px;}
  .price-modal-foot{padding:16px 18px 22px;}
}

/* ================= QUOTE BAND =================
   Full replacement (Aug 2026) — now lives entirely in
   assets/css/quote-section.css (ported from an approved standalone
   mockup, its own local palette/fonts, same pattern as
   faq-section.css). This used to be the Quote Band's CSS block; the
   old .quote-mark-wrap/.quote-flourish/.quote-cite-row/etc rules that
   were here are gone, not left as dead code, since the new markup in
   front-page.php doesn't use any of those classes anymore. */

/* ================= SPACE / GALLERY ================= */
/* white base (was inheriting body's --ivory) + faint pink glow near the
   top, same technique as Philosophy/intro sections */
.space-section{
  padding:110px 0;
  position:relative;
  background:
    radial-gradient(circle at 50% 0%, rgba(251,214,226,0.13), transparent 55%),
    var(--white);
}
.space-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  margin-top:56px;
}
.space-grid .big, .space-grid .stack{border-radius:6px;overflow:hidden;position:relative;box-shadow:var(--shadow);}
.space-grid .big img{height:100%;object-fit:cover;min-height:520px;}
.space-grid .stack{display:flex;flex-direction:column;gap:24px;}
.space-grid .stack .cell{border-radius:6px;overflow:hidden;box-shadow:var(--shadow);flex:1;position:relative;}
.space-grid .stack .cell img{height:100%;object-fit:cover;min-height:248px;}
.space-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:22px 26px;
  background:linear-gradient(0deg, rgba(40,25,20,0.66), transparent);
  color:#fff;
}
.space-caption .en{font-family:var(--font-latin);font-weight:300;font-size:.6rem;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;}
.space-caption h4{font-family:var(--font-th-display);font-weight:500;font-size:1.05rem;margin-top:4px;}

/* ================= WHY US =================
   Aug 2026 (item 3): fixed a real contrast bug — .why-us's background was
   correctly flipped to light ivory during the CI-mockup-v3 pass, but
   these child rules still had hardcoded literal colors (#fff, #C9B8A8,
   #B7A695) left over from when the section was dark-themed. Because
   they're literal hex, not var(), the earlier sitewide token-rename
   script couldn't catch them — white-on-ivory measured 1.08:1 contrast
   (i.e. invisible), nowhere near the 4.5:1 AA minimum. Now uses
   var(--text)/var(--text-soft) like everywhere else (13.2:1 / 5.45:1).
   Also: icons are now filled blush circles (were bare outline, so they
   visually sank into the page), each item is a white card with a
   hairline border + hover lift, and reveal is staggered per item. */
.why-us{
  padding:100px 0;
  position:relative;
  overflow:hidden; /* contains the v2 branch/pattern layers below */
  color:var(--text);
  /* white base + faint pink glow (top) + faint gold glow (bottom-left,
     added Aug 2026 v2) — two balanced points of depth instead of one */
  background:
    radial-gradient(circle at 50% 0%, rgba(251,214,223,0.13), transparent 55%),
    radial-gradient(circle at 8% 92%, rgba(212,175,55,0.10), transparent 50%),
    var(--white);
}
/* Aug 2026 v2: faint repeating leaf/branch pattern across the whole
   section — same line-art technique as .contact-banner-pattern, just
   fainter (.1 vs .16) and warmer (gold vs mauve) so it reads as
   texture, not a competing pattern. */
.why-us::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  opacity:.1;
  pointer-events:none;
  background-repeat:repeat;
  background-size:220px 220px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1'%3E%3Cpath d='M10 210C40 180 60 140 50 100C42 68 20 40 30 10'/%3E%3Cpath d='M30 60C50 55 65 40 60 20'/%3E%3Cpath d='M35 110C55 105 70 90 65 70'/%3E%3Cpath d='M40 160C60 155 75 140 70 120'/%3E%3C/g%3E%3C/svg%3E");
}
/* shine sweep across the whole section — same technique as the
   marquee/contact-banner/why-item shines, just a slower ~7s cadence
   since this one covers a much larger area */
.why-us::after{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg, transparent 44%, rgba(255,255,255,.5) 50%, transparent 56%);
  transform:translateX(-160%);
  animation:whyUsShine 7s ease-in-out infinite;
}
@keyframes whyUsShine{
  0%,80%,100%{transform:translateX(-160%);}
  90%{transform:translateX(160%);}
}
.why-us-branch{
  position:absolute;right:-30px;bottom:-20px;z-index:0;
  width:280px;height:280px;
  opacity:.5;
  pointer-events:none;
}
.why-gold-dust{position:absolute;inset:0;z-index:0;pointer-events:none;}
.why-gold-dust span{
  position:absolute;border-radius:50%;
  background:var(--gold);
  animation:whyGoldDust 4.4s ease-in-out infinite;
}
@keyframes whyGoldDust{
  0%,100%{opacity:.15;transform:scale(.7);}
  50%{opacity:.8;transform:scale(1.15);}
}
@media (prefers-reduced-motion: reduce){
  .why-us::after,
  .why-gold-dust span{animation:none;}
}
@media(max-width:640px){
  /* keep the big branch from dominating a narrow screen */
  .why-us-branch{width:180px;height:180px;right:-24px;bottom:-14px;}
}
.why-grid{
  position:relative;z-index:1; /* sit above the ::before/::after layers */
  display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;
}
/* v20 heading treatment (added on a follow-up decision — this section
   was originally left out alongside Marquee/Contact Banner) */
.why-grid h2{color:var(--heading-rose);font-weight:300;line-height:1.62;font-size:2.1rem;margin-bottom:22px;}
.why-grid > div:first-child p{color:var(--text-soft);line-height:1.9;font-weight:300;font-size:.95rem;}
.why-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
/* v2 card redesign (Aug 2026), ported from the approved mockup
   (inspire-wellness-whyus-cards-mockup-v2.html) — "softer": heart/
   sprout/shield icons, rose-blush palette, script numerals, rounder
   corners. Locally-scoped custom properties (not added to the
   sitewide :root) since --rose/--rose-deep/--blush-soft here are the
   mockup's own exact values, which don't match the sitewide
   --rose-deep (#962C48, used by the marquee/hero/philosophy titles)
   or --blush-soft (#FBD6E2, used elsewhere) — scoping to .why-item
   keeps this card's palette isolated without touching either. */
.why-item{
  --rose:#C46A85;
  --rose-deep:#9C4C68;
  --blush-soft:#FDECF1;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--white);
  /* was 1px solid var(--line) — a near-white hairline that vanished
     once the section background became white too. Mauve tint gives
     the card a visible edge without needing a heavier border. Resting
     border stays as-is per the brief (only the hover border/shadow
     and the divider adopt the new rose palette). */
  border:1px solid rgba(200,162,172,.4);
  border-radius:22px; /* v2: was 10px */
  padding:30px 26px 26px;
  box-shadow:0 4px 14px rgba(46,42,40,.05);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease, border-color .35s ease;
}
/* script numeral, top-right corner — replaces the old faint
   attr(data-index) corner numeral (Cinzel, barely-visible gold) with
   a real, visible Mrs Saint Delafield numeral per the mockup.
   var(--font-script) and the site's own var(--blush) are both already
   declared on the sitewide :root (added for the v20 heading treatment
   / the original CI palette respectively) — reused directly here,
   nothing new to enqueue. */
.why-item .num{
  position:absolute;top:14px;right:22px;z-index:1;
  font-family:var(--font-script);font-size:2.1rem;font-weight:400;
  color:var(--blush);opacity:.9;line-height:1;
  pointer-events:none;
}
/* hover-triggered top-edge line reveal (new, per mockup's .card::before) */
.why-item::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;z-index:1;
  background:linear-gradient(90deg,var(--rose),var(--blush));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s ease;
  pointer-events:none;
}
.why-item:hover::before{transform:scaleX(1);}
/* shine sweep — same technique as marquee/contact-btn/philo-card,
   staggered per card so all 4 don't flash at once. Kept as-is (not
   part of the mockup, but the brief says keep existing hover/ambient
   behavior, just recolor what the mockup actually recolors — this
   sweep is already colorless (white) so nothing to change here). */
.why-item::after{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(112deg, transparent 42%, rgba(255,255,255,.75) 50%, transparent 58%);
  transform:translateX(-160%);
  animation:whyItemShine 6.5s ease-in-out infinite;
}
.why-item:nth-child(2)::after{animation-delay:1.6s;}
.why-item:nth-child(3)::after{animation-delay:3.2s;}
.why-item:nth-child(4)::after{animation-delay:4.8s;}
@keyframes whyItemShine{
  0%,78%,100%{transform:translateX(-160%);}
  90%{transform:translateX(160%);}
}
.why-item:hover{
  transform:translateY(-5px); /* v2: was -6px, matches mockup's -5px lift */
  box-shadow:0 26px 42px -20px rgba(196,106,133,.3); /* v2: was gold-toned var(--shadow) */
  border-color:rgba(196,106,133,.35); /* v2: was var(--gold) */
}
.why-item .icon-circle{
  position:relative;z-index:1;
  width:58px;height:58px;flex:none;margin-bottom:16px; /* v2: was 52px, no margin (flex-row layout) */
  background:radial-gradient(circle at 32% 26%, #FFFFFF, var(--blush-soft) 60%, var(--blush) 100%); /* v2: white→blush-soft→blush, was a flat blush radial */
  border:1px solid rgba(196,106,133,.25); /* v2: was solid var(--gold) */
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(196,106,133,.18); /* v2: rose-toned, was gold-toned */
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.why-item:hover .icon-circle{transform:scale(1.08) rotate(-4deg);box-shadow:0 12px 24px -8px rgba(196,106,133,.35);} /* v2: was scale(1.12) rotate(-6deg), gold shadow */
.why-item .icon-circle svg{
  width:24px;height:24px;color:var(--rose-deep);
  /* Follow-up round: thinner stroke for a softer feel — overrides the
     stroke-width="1.5" attribute set inline on each of these 4 icons
     in front-page.php (a CSS rule beats a presentation attribute, so
     this alone re-thins all 4 without touching the markup). Scoped to
     .why-item .icon-circle svg specifically — doesn't touch any other
     icon on the site. */
  stroke-width:1.15px;
}
.why-item h4{
  position:relative;z-index:1;font-family:var(--font-th-display);font-size:1rem;
  margin-bottom:7px;
  color:#A54F62; /* follow-up round: was var(--text) */
  font-weight:500; /* already 500, not 600 — no change needed but kept explicit */
}
/* divider: was a plain gold ::before line; now a tiny heart + fading
   rose line per the mockup */
.why-item .accent-line{position:relative;z-index:1;display:flex;align-items:center;gap:6px;margin-bottom:11px;}
.why-item .accent-line span{width:16px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,var(--rose),transparent);}
.why-item .accent-line svg{width:9px;height:9px;color:var(--rose);flex:none;}
.why-item p{
  position:relative;z-index:1;font-size:.82rem;line-height:1.7;font-weight:300;
  color:#D98CA8; /* follow-up round: was var(--text-soft) */
}
@media (prefers-reduced-motion: reduce){
  .why-item::after{animation:none;}
  .why-item::before,.why-item:hover::before{transition:none;}
}
/* staggered scroll-reveal — all 4 items enter the viewport at roughly
   the same time, so the stagger comes from transition-delay, not from
   IntersectionObserver firing at different times */
.why-item.reveal:nth-child(1){transition-delay:0s;}
.why-item.reveal:nth-child(2){transition-delay:.1s;}
.why-item.reveal:nth-child(3){transition-delay:.2s;}
.why-item.reveal:nth-child(4){transition-delay:.3s;}
/* why-dots: hidden by default (desktop/tablet keep the 2x2 grid),
   only shown once the carousel kicks in below */
.why-dots{display:none;}
/* Follow-up round: .why-grid already collapses to 1 column at ≤1080px
   (see RESPONSIVE block) and a first pass made .why-list a plain
   1-column stack below 640px — fixed the cramped-card bug but still
   meant a long vertical scroll through all 4 cards. Now a single-row
   scroll-snap carousel instead, same technique as the services slider
   (.slider-track) and the stat-band carousel above. */
@media(max-width:640px){
  .why-list{
    display:flex;flex-wrap:nowrap;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:8%;
    padding:4px 2px 6px;
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .why-list::-webkit-scrollbar{display:none;}
  .why-item{
    scroll-snap-align:center;
    scroll-snap-stop:always;
    flex:0 0 84%;
    min-width:0;
  }
  .why-dots{display:flex;justify-content:center;gap:9px;margin-top:16px;}
  .why-dots .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--line);cursor:pointer;transition:.3s;
  }
  .why-dots .dot.active{background:var(--gold-deep);width:22px;border-radius:5px;}
}

/* ================= BOOKING CTA ================= */
.cta-band{
  padding:90px 0;
  background:var(--ivory-deep);
  position:relative;
}
.cta-inner{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:30px;
  background:linear-gradient(120deg,#fff, var(--blush-soft));
  border:1px solid var(--line);
  border-radius:8px;
  padding:52px 56px;
  box-shadow:var(--shadow);
}
.cta-inner h2{font-size:1.9rem;max-width:480px;}
.cta-inner p{color:var(--text-soft);margin-top:10px;font-size:.9rem;font-weight:300;}
.cta-actions{display:flex;gap:16px;flex-wrap:wrap;}

/* ================= FOOTER =================
   Light theme flowing from the contact banner above it, separated by a
   thin gold rule. Background is a soft blush-soft→ivory wash (was flat
   ivory) — text bumped slightly darker than the sitewide --text-soft
   specifically in this footer to keep contrast comfortable on the pink.
   Structural borders/boxes replaced with soft mauve dividers; social
   icons are thin gold outline circles with a gold-deep fill on hover. */
footer{
  /* local override: every var(--text-soft) inside footer (brand blurb,
     nav links, contact list, bottom bar) automatically picks up this
     darker tone via CSS custom-property cascading — kept comfortably
     readable on the blush-soft wash without touching each child rule */
  --text-soft:#5C5451;
  background:linear-gradient(180deg, var(--blush-soft) 0%, var(--ivory) 55%);
  color:var(--text-soft);
  padding-top:92px;
  border-top:2px solid var(--gold);
  position:relative;
  overflow:hidden;
}
footer::before{
  content:"";
  position:absolute;right:-80px;top:-80px;
  width:380px;height:380px;
  background:radial-gradient(circle, rgba(212,175,55,0.1), transparent 70%);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.2fr;
  gap:56px;
  padding-bottom:56px;
  border-bottom:1px solid rgba(200,162,172,.35);
  position:relative;
}
.footer-brand img{height:88px;width:auto;margin-bottom:18px;}
.footer-brand p{font-size:.86rem;line-height:1.9;color:var(--text-soft);font-weight:300;max-width:300px;margin-bottom:22px;}
.footer-social{display:flex;gap:12px;}
.footer-social a{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--gold);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:.78rem;
  transition:.3s;
}
.footer-social a svg{width:16px;height:16px;}
.footer-social a:hover{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep);}
.footer-col h4{
  font-family:var(--font-th-display);font-weight:600;font-size:.78rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--text);margin-bottom:24px;
}
.footer-col ul li{margin-bottom:13px;}
.footer-col ul li a{font-size:.87rem;color:var(--text-soft);transition:.25s;}
.footer-col ul li a:hover{color:var(--gold-deep);padding-left:4px;}
.footer-contact li{
  display:flex;gap:12px;font-size:.86rem;color:var(--text-soft);margin-bottom:16px;line-height:1.6;
  align-items:flex-start;
}
.footer-contact li .ic{color:var(--gold);margin-top:2px;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding:30px 0;font-size:.78rem;color:var(--text-soft);flex-wrap:wrap;gap:12px;
}
.footer-bottom .links{display:flex;gap:24px;}
.footer-bottom .links a:hover{color:var(--gold-deep);}

/* ================= RESPONSIVE ================= */
@media(max-width:1080px){
  .mega-menu{width:640px;grid-template-columns:repeat(2,1fr);}
  .concept-grid{grid-template-columns:repeat(2,1fr);}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  /* minmax(0,1fr), not bare 1fr — see .philo-grid's mobile rule above
     for the full explanation (verified real bug, not precautionary
     there; precautionary here). */
  .space-grid{grid-template-columns:minmax(0,1fr);}
  .why-grid{grid-template-columns:minmax(0,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:820px){
  .menu, .nav-cta .phone{display:none;}
  .burger{display:flex;}
  .container{padding:0 24px;}
  /* h1 font-size now fluid via clamp() in the base .hero-copy h1 rule —
     no fixed override needed here anymore */
  .service-grid{grid-template-columns:minmax(0,1fr);}
  .concept-grid{grid-template-columns:1fr 1fr;}
  .cta-inner{flex-direction:column;align-items:flex-start;}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:36px;}
  .topbar-left span:nth-child(2){display:none;}
}

/* ==========================================================================
   NEW: WORDPRESS THEME ADDITIONS
   Everything below is new — it does not exist in the reference file and
   does not modify anything above. Purely additive: hero auto-slider
   controls, service-card photos, floating LINE button, scroll-reveal
   and stat-counter animation hooks, and mobile mega-menu tap support.
   ========================================================================== */

/* ---- Hero auto-slider (Aug 2026: full-bleed banner at the top of the
   page; copy/CTA/stats moved below it — see .hero-copy above). Same
   #heroSlider / .hero-slide / .hero-slider-nav / .hero-slider-arrow
   markup and hero-slider.js as before, only the sizing changed: no more
   boxed 460px card with a floating bob animation, now a full-width,
   full-bleed strip that ignores .container's max-width/padding. ---- */
.hero-slider{
  /* full-bleed: placed as a direct child of <section class="hero">,
     outside .container, so 100% width already spans edge-to-edge —
     no negative-margin/100vw hack needed (and none of the horizontal
     scrollbar edge cases that hack can introduce). */
  position:relative;
  width:100%;
  height:82vh;
  min-height:540px;
  max-height:860px;
  overflow:hidden;
}
.hero-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1s ease;
  pointer-events:none;
}
.hero-slide.is-active{opacity:1;pointer-events:auto;z-index:2;}
.hero-slide img{width:100%;height:100%;object-fit:cover;}
/* New first slide (Aug 2026): pure statement slide, no overlay of any
   kind — the photo already has "YOUR SKIN IS A REFLECTION OF how you
   treat yourself" baked into the image. A .hero-slide-cta pill was
   tried in an earlier round but real measurement across desktop/
   tablet/mobile found it sitting on top of the photo at every size, not
   just mobile — removed entirely (markup, this rule, and its mobile
   override) rather than just hidden, so nothing is left half-wired. */
/* Third fix for this bug — 2 previous attempts didn't hold on real
   tablets. Round 1 was mobile-only (≤640px). Round 2 widened to
   ≤1024px width, but that's STILL only a width check — real iPad
   testing at 768/810/834/1024px in LANDSCAPE still cropped, because
   landscape orientation on every current iPad is *wider* than
   1024px (roughly 1180-1366px CSS width depending on model), so it
   fell straight through to this file's desktop rule (height:82vh +
   cover) same as before. A pure width breakpoint can never reliably
   catch both orientations of every tablet size — the actual thing
   that determines whether object-fit:cover crops the image is the
   VIEWPORT'S OWN aspect ratio vs. the photos' 16:9, not its width in
   isolation. Every iPad in either orientation has an aspect ratio
   between ~1.33 and ~1.44 (portrait: ~0.75; landscape: ~1.33-1.44 —
   even landscape is well short of 16:9's 1.78), so this now checks
   aspect-ratio directly, OR'd with the width check for phones (which
   also needs the min-height:0/max-height:none reset regardless of
   their portrait aspect ratio already being caught by the
   aspect-ratio clause on its own — the width clause is kept mainly
   for clarity/explicitness on the phone case). Consolidated into ONE
   media condition covering .hero-slider + .hero-slide img together
   (was 3 separate, overlapping max-width tiers — 1080/1024/1024 —
   easy to lose track of which one actually wins where; now just one).
   Placed AFTER the base .hero-slide img{object-fit:cover} rule above
   on purpose — same specificity, so source order decides, and this
   needs to come later to win when its condition matches. */
@media (max-width:1024px), (max-aspect-ratio:3/2){
  .hero-slider{
    height:auto;min-height:0;max-height:none;
    aspect-ratio:16/9;
    background:
      radial-gradient(circle at 30% 15%, rgba(249,214,223,.4), transparent 55%),
      var(--ivory);
  }
  .hero-slide img{object-fit:contain;}
}

.hero-slider-nav{
  position:absolute;left:0;right:0;bottom:26px;
  display:flex;justify-content:center;gap:8px;z-index:3;
}
.hero-slider-nav button{
  width:8px;height:8px;border-radius:50%;
  border:1px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.35);
  cursor:pointer;padding:0;transition:.3s;
}
.hero-slider-nav button.is-active{background:var(--gold-deep);border-color:var(--gold-deep);width:22px;border-radius:5px;}
.hero-slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:3;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(61,37,48,0.35);
  backdrop-filter:blur(4px);
  color:#fff;font-size:1.2rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.3s;
}
.hero-slider-arrow:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#2b1f16;}
.hero-slider-arrow.prev{left:24px;}
.hero-slider-arrow.next{right:24px;}
@media(max-width:640px){
  .hero-slider-arrow{width:38px;height:38px;font-size:1.05rem;}
  .hero-slider-arrow.prev{left:12px;}
  .hero-slider-arrow.next{right:12px;}
}

/* ---- Service card (Aug 2026: decluttered — photo fills the top half,
   one compact Thai title line below it, a single pill CTA button. The
   old center SVG icon is demoted to a small corner badge on the photo;
   the EN subtitle/tag pill/count badge/text-link are dropped entirely
   (still defined higher up in this file under the original .service-card
   rules — unused now, left as-is, harmless). Card markup comes from
   assets/js/services.js. ---- */
.service-card{
  padding:0;
  overflow:hidden;
}
.service-card .thumb{
  position:relative;
  aspect-ratio:4/5;
}
.service-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;}

.service-card .num{
  top:14px;right:14px;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}
.service-card .icon-badge{
  position:absolute;bottom:12px;left:12px;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--accent, var(--gold));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.service-card .icon-badge svg{width:18px;height:18px;}

.service-card .card-body{
  padding:18px 22px 24px;
  text-align:center;
}
.service-card .card-body h3{
  font-size:.98rem;
  margin-bottom:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.service-card .card-cta{
  /* Aug 2026 redesign: was a solid-filling boxed pill (border all round +
     fills solid on hover) that read as heavy, and the text/icon combo
     could wrap onto an awkward second line. Now a plain text+arrow link
     with just a thin --accent underline — lighter, single line
     guaranteed via nowrap, arrow nudges right on hover instead. */
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-th-display);font-weight:500;font-size:.82rem;
  color:var(--text);
  background:none;
  border:none;
  border-bottom:1px solid var(--accent, var(--gold));
  padding:0 0 3px;
  white-space:nowrap;
  transition:color .3s ease;
}
.service-card .card-cta svg{width:13px;height:13px;flex:none;color:var(--accent, var(--gold));transition:transform .3s ease;}
.service-card:hover .card-cta{color:var(--accent, var(--gold));}
.service-card:hover .card-cta svg{transform:translateX(4px);}

/* fallback if a service photo fails to load: show the icon large &
   centered instead of a broken image, so the card layout never collapses */
.service-card.no-thumb .thumb{
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft, var(--blush-soft));
}
.service-card.no-thumb .thumb img{display:none;}
.service-card.no-thumb .num{color:var(--accent, var(--gold));text-shadow:none;}
.service-card.no-thumb .icon-badge{
  position:static;width:64px;height:64px;
  background:transparent;box-shadow:none;
}
.service-card.no-thumb .icon-badge svg{width:34px;height:34px;}

/* ---- Floating CTA (4 channels) ----
   Full replacement (Aug 2026), ported from the approved mockup
   (inspire-wellness-fab-mockup-final.html) essentially unchanged —
   local custom properties (not on the sitewide :root) since --rose/
   --rose-deep/--blush-soft here are the mockup's own exact values,
   same pattern as the other v2/v3 "feminine" components (Why Us,
   Philosophy cards, popups, Quote Band). */
.fab-stack{
  --rose:#C46A85;
  --rose-deep:#9C4C68;
  --blush-soft:#FDECF1;

  position:fixed;right:24px;bottom:28px;z-index:200;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}

.fab-stack .sub-item{
  display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(14px) scale(.7);
  transition:opacity .3s cubic-bezier(.2,.8,.3,1), transform .3s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;
}
.fab-stack.open .sub-item{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.fab-stack.open .sub-item:nth-child(1){transition-delay:.18s;}
.fab-stack.open .sub-item:nth-child(2){transition-delay:.12s;}
.fab-stack.open .sub-item:nth-child(3){transition-delay:.06s;}
.fab-stack.open .sub-item:nth-child(4){transition-delay:0s;}
.fab-stack .sub-label-persist{
  background:var(--white);color:var(--rose-deep);font-size:.68rem;font-weight:600;
  padding:6px 13px;border-radius:100px;white-space:nowrap;
  box-shadow:0 6px 14px -6px rgba(150,44,72,.3);
  border:1px solid var(--blush-soft);
}

.fab-stack .sub-btn{
  width:48px;height:48px;border-radius:50%;background:var(--white);flex:none;
  border:1.5px solid var(--blush);box-shadow:0 10px 24px -8px rgba(150,44,72,.35);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  transition:transform .3s ease;
}
.fab-stack .sub-btn svg{width:22px;height:22px;}
.fab-stack .sub-btn:hover{transform:scale(1.08);}
.fab-stack .sub-btn.tel svg{color:var(--rose-deep);}
.fab-stack .sub-btn.line svg{color:#06C755;}
.fab-stack .sub-btn.fb svg{color:#1877F2;}
.fab-stack .sub-btn.tiktok svg{color:#25252A;}

.fab-stack .main-wrap{position:relative;width:62px;height:62px;}
/* pink pulse glow — lives on the WRAPPER, not the button itself, on
   purpose: .main-btn below has overflow:hidden (needed to clip the
   shine sweep to the button's own circular surface), and a glow that
   extends past the button's edges would get clipped along with it if
   it were on the same element. */
.fab-stack .main-wrap::before{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  background:radial-gradient(circle, rgba(249,214,223,.7), transparent 70%);
  animation:fabPulse 2.6s ease-in-out infinite;z-index:-1;
}
@keyframes fabPulse{0%,100%{opacity:.6;transform:scale(1);}50%{opacity:1;transform:scale(1.15);}}
.fab-stack .spin-ring{position:absolute;inset:-10px;pointer-events:none;animation:fabSpin 12s linear infinite;}
@keyframes fabSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.fab-stack .spin-ring circle{fill:none;stroke:url(#fabRingGrad);}

.fab-stack .main-btn{
  width:62px;height:62px;border-radius:50%;border:1.5px solid var(--blush);cursor:pointer;position:relative;
  background:var(--white);overflow:hidden;
  box-shadow:0 16px 32px -10px rgba(156,76,104,.4);
  display:flex;align-items:center;justify-content:center;
  padding:0;
}
/* shine sweep — clipped to the button's own surface by .main-btn's
   overflow:hidden above (the glow/ring/sparkles sit on .main-wrap
   instead, so they're unaffected) */
.fab-stack .main-btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:30%;
  background:linear-gradient(100deg,transparent,rgba(249,214,223,.9) 50%,transparent);
  transform:skewX(-18deg);animation:fabSweep 4.5s ease-in-out infinite;
}
@keyframes fabSweep{0%{left:-60%;}45%{left:140%;}100%{left:140%;}}

.fab-stack .spark{position:absolute;color:var(--gold);font-size:11px;opacity:0;pointer-events:none;}
.fab-stack.open .spark{animation:fabSparkPop .7s ease forwards;}
@keyframes fabSparkPop{
  0%{opacity:0;transform:scale(0) translate(0,0) rotate(0deg);}
  40%{opacity:1;}
  100%{opacity:0;transform:scale(1) translate(var(--dx),var(--dy)) rotate(60deg);}
}
.fab-stack .main-btn svg{width:26px;height:26px;color:var(--rose-deep);transition:transform .35s cubic-bezier(.2,.8,.3,1);}
.fab-stack .main-btn img{width:40px;height:auto;object-fit:contain;transition:transform .35s cubic-bezier(.2,.8,.3,1), opacity .35s ease;}
.fab-stack .icon-chat{opacity:1;}
.fab-stack .icon-close{opacity:0;position:absolute;color:var(--rose-deep);transform:rotate(-90deg) scale(.6);}
.fab-stack.open .icon-chat{opacity:0;transform:rotate(90deg) scale(.6);}
.fab-stack.open .icon-close{opacity:1;transform:rotate(0deg) scale(1);}

@media (prefers-reduced-motion: reduce){
  .fab-stack .main-wrap::before,
  .fab-stack .spin-ring,
  .fab-stack .main-btn::after,
  .fab-stack.open .spark{animation:none;}
}

@media(max-width:640px){
  .fab-stack{right:16px;bottom:16px;gap:12px;}
  .fab-stack .sub-btn{width:44px;height:44px;}
  .fab-stack .sub-btn svg{width:20px;height:20px;}
  .fab-stack .sub-label-persist{font-size:.64rem;padding:5px 11px;}
  .fab-stack .main-wrap{width:56px;height:56px;}
  .fab-stack .main-btn{width:56px;height:56px;}
  .fab-stack .main-btn img{width:36px;}
}

/* ---- Scroll reveal (progressive enhancement) ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
/* variant: fade + scale instead of fade-up (used on the quote-band logo
   mark) — add both classes ("reveal reveal-scale"); main.js already
   observes every .reveal element generically, no JS change needed. */
.reveal.reveal-scale{transform:scale(.88);transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1);}
.reveal.reveal-scale.is-visible{transform:scale(1);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---- Mobile mega-menu (tap to open, since :hover doesn't apply on touch) ---- */
@media(max-width:820px){
  .has-dropdown.is-open .mega-menu{
    position:static;transform:none;opacity:1;visibility:visible;
    width:100%;max-width:100%;box-shadow:none;border:none;
    grid-template-columns:minmax(0,1fr);padding:18px 0 4px;
  }
  .has-dropdown.is-open .mega-menu::before{display:none;}
  .has-dropdown.is-open .caret{transform:rotate(180deg);}
}

/* ---- Doctor photo placeholder note ----
   The reference design has no "Meet Your Physician" section and no doctor
   photo was supplied, so no image hook was added here. See theme README
   notes in functions.php header for how to add one later. */

/* ==========================================================================
   NEW: "OUR SPACE" — 2-ROW AUTO-SCROLLING MARQUEE GALLERY (Aug 2026)
   Replaces the cinematic main-stage + thumbnail-rail slider that was
   here before (no progress bar / arrows / thumbnail rail anymore — they
   didn't fit this layout). Pure CSS, same technique as .marquee-strip /
   .marquee-track above: each row's card list is rendered twice in the
   markup and scrolled exactly -50% on a linear infinite loop, so it
   wraps seamlessly. No JS — pause-on-hover/focus is a plain CSS
   animation-play-state toggle. The bento grid (.space-grid / .big /
   .stack / .cell) and the single-stage slider it replaced last round
   are both left defined-but-unused above, harmless.
   ========================================================================== */
.space-gallery{
  margin-top:56px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.space-gallery-row{
  position:relative;
  overflow:hidden;
}
/* Bug fix (Aug 2026): the edge-fade here used to be mask-image/
   -webkit-mask-image on a row whose child (.space-gallery-track) is
   under a continuous transform animation, carrying many duplicated
   cards. Real-device testing found the whole gallery invisible on
   mobile (images never appearing, space reserved but empty) with no
   reproducible cause in headless Chrome — CSS structure, the reveal/
   IntersectionObserver JS, image lazy-loading, and the PHP data
   feeding the loop all checked out clean in isolation (console clear,
   .is-visible correctly applied, opacity:1, images loaded and
   rendered at their expected size). mask-image + an animated
   transformed child is a known mobile-Safari-class trouble spot this
   Chrome-based testing can't reproduce (different rendering engine) —
   the mask can fail to composite correctly on some mobile GPUs/
   browsers, and unlike a normal CSS property, a mask that fails
   doesn't degrade to "fully visible", it can degrade to "fully
   hidden". Rather than chase an unreproducible browser bug, replaced
   the whole technique with the ::before/::after gradient-overlay fade
   already proven working elsewhere in this exact theme for the
   identical visual effect (see .marquee-strip::before/::after) —
   doesn't use `mask` at all, so this class of failure can't happen
   regardless of which mobile browser/GPU a visitor has. */
.space-gallery-row::before,
.space-gallery-row::after{
  content:"";
  position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none;
}
.space-gallery-row::before{left:0;background:linear-gradient(90deg, var(--white) 0%, rgba(255,255,255,0) 100%);}
.space-gallery-row::after{right:0;background:linear-gradient(270deg, var(--white) 0%, rgba(255,255,255,0) 100%);}
@media(max-width:640px){
  .space-gallery-row::before,
  .space-gallery-row::after{width:32px;}
}
.space-gallery-track{
  display:flex;
  gap:20px;
  width:max-content;
  animation:spaceScrollLeft 46s linear infinite;
  /* Mobile jank fix (Aug 2026): this was already transform-driven (never
     left/margin) and already linear (correct for a continuous marquee,
     not a harsh default), so the real cause measured on-device wasn't
     the animation math — it was that a continuously-transformed element
     this wide (11 photos x2 for the seamless loop, several thousand px)
     had no compositor layer promoted for it. Without one, mobile Chrome
     has to repaint/re-rasterize the track's content on the main thread
     every frame instead of just moving an already-composited layer,
     which is what reads as stutter on weaker mobile GPUs even though
     desktop looks smooth. will-change:transform promotes it to its own
     layer up front (not opportunistically mid-scroll); backface-
     visibility:hidden is the classic companion nudge that gets Safari/
     older WebKit to actually commit to GPU compositing for a transform
     layer instead of falling back to software painting. */
  will-change:transform;
  backface-visibility:hidden;
}
.space-gallery-row.row-reverse .space-gallery-track{
  animation-name:spaceScrollRight;
}
.space-gallery-row:hover .space-gallery-track,
.space-gallery-row:focus-within .space-gallery-track{
  animation-play-state:paused;
}
@keyframes spaceScrollLeft{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes spaceScrollRight{ from{transform:translateX(-50%);} to{transform:translateX(0);} }
@media (prefers-reduced-motion: reduce){
  .space-gallery-track{animation:none;}
}

.space-card{
  position:relative;
  flex:0 0 300px;
  aspect-ratio:4/3;
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.space-card img{width:100%;height:100%;object-fit:cover;display:block;}
.space-card-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:16px 18px;
  background:linear-gradient(0deg, rgba(20,14,10,0.82), transparent);
  color:#fff;
}
.space-card-caption .en{
  font-family:var(--font-latin);font-weight:300;font-size:.58rem;letter-spacing:.22em;
  color:var(--gold);text-transform:uppercase;
}
.space-card-caption h4{
  font-family:var(--font-th-display);font-weight:500;font-size:.98rem;margin-top:4px;
}
@media(max-width:640px){
  .space-card{flex:0 0 220px;}
  .space-card-caption{padding:12px 14px;}
  .space-card-caption h4{font-size:.9rem;}
}

/* ==========================================================================
   CONTACT BANNER — replaces the old .cta-band/.cta-inner "Book a
   consultation" section entirely (that CSS is left above, unused,
   harmless). Relit for the Ci Brand.png palette (Aug 2026, part B1):
   was a dark ink→brown gradient with a logo mark; now a light
   blush-soft → ivory wash, no logo (headline speaks for itself), gold
   CTA pill, and the contact photo bleeding to the right edge with a
   soft seam into the light background instead of a dark one.
   ========================================================================== */
.contact-banner{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  min-height:380px;
  background:linear-gradient(120deg, var(--blush-soft) 0%, var(--ivory) 60%, var(--ivory) 100%);
}
.contact-banner-pattern{
  position:absolute;inset:0;
  z-index:1;
  opacity:.16;
  pointer-events:none;
  background-repeat:repeat;
  background-size:220px 220px;
  /* mauve leaf/branch line pattern (was gold, for the old dark version —
     mauve reads softer/more legible against this light background) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23C8A2AC' stroke-width='1'%3E%3Cpath d='M10 210C40 180 60 140 50 100C42 68 20 40 30 10'/%3E%3Cpath d='M30 60C50 55 65 40 60 20'/%3E%3Cpath d='M35 110C55 105 70 90 65 70'/%3E%3Cpath d='M40 160C60 155 75 140 70 120'/%3E%3Cpath d='M160 20C190 40 205 75 195 110C188 138 165 165 175 200'/%3E%3Cpath d='M175 60C155 55 140 40 145 20'/%3E%3Cpath d='M170 110C150 105 135 90 140 70'/%3E%3Cpath d='M165 160C145 155 130 140 135 120'/%3E%3C/g%3E%3C/svg%3E");
}
.contact-banner-content{
  position:relative;z-index:2;
  flex:1 1 62%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:40px;
  padding:56px clamp(24px,5vw,64px);
}
.contact-banner-copy{max-width:400px;}
.contact-banner-copy .eyebrow{margin-bottom:14px;}
.contact-banner-title{
  /* enlarged 1.9rem→2.2rem + tightened line-height, per item 2 (Aug 2026) */
  font-family:var(--font-th-display);
  font-style:italic;
  font-weight:600;
  font-size:2.2rem;
  line-height:1.25;
  color:var(--text);
}
.contact-banner-title .c-highlight{color:var(--rose-deep);}
/* small flourish between the title and the subline — gives the two
   lines a beat of rhythm instead of sitting flush against each other */
.contact-banner-divider{display:flex;align-items:center;gap:8px;margin:16px 0;}
.contact-banner-divider .line{width:28px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);}
.contact-banner-divider .dot{width:4px;height:4px;border-radius:50%;background:var(--gold);flex:none;}
.contact-banner-sub{
  font-size:.95rem;
  color:var(--text-soft);
  font-weight:300;
}
/* was align-items:flex-start — left-flushed the button and the note
   text to the same X, but since they have different natural widths the
   note ended up left-aligned WITH the button rather than centered
   UNDER it. center makes both children align to their shared column
   width (set by the wider one, the button) so the note sits centered
   relative to the button, not just flush with its left edge. */
.contact-banner-cta{display:flex;flex-direction:column;align-items:center;}
.contact-banner-btn{
  /* label is Thai ("นัดหมาย / ปรึกษาแพทย์") → font-th-display, not Cinzel */
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-th-display);font-weight:500;font-size:.86rem;letter-spacing:.02em;text-transform:uppercase;
  padding:18px 38px;border-radius:999px;
  position:relative;overflow:hidden;
  /* 3-stop gradient (was a flat 2-stop) + a darker gold bottom border for
     a "pressable" edge, plus a diffuse shadow below */
  background:linear-gradient(160deg, #F3DFA0 0%, var(--gold) 55%, var(--gold-deep) 100%);
  border-bottom:4px solid #8A6E22;
  color:#3C2A14;
  box-shadow:0 14px 34px rgba(196,150,50,.35);
  transition:transform .3s ease, box-shadow .3s ease;
  white-space:nowrap;
}
.contact-banner-btn svg{width:19px;height:19px;flex:none;position:relative;z-index:1;}
.contact-banner-btn span{position:relative;z-index:1;}
.contact-banner-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(196,150,50,.45);}
/* shine sweep across the button — same technique as the marquee strip */
.contact-banner-btn::after{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform:translateX(-160%);
  animation:contactBtnShine 5s ease-in-out infinite;
}
@keyframes contactBtnShine{
  0%,78%,100%{transform:translateX(-160%);}
  90%{transform:translateX(160%);}
}
@media (prefers-reduced-motion: reduce){
  .contact-banner-btn::after{animation:none;}
}
.contact-banner-note{
  margin-top:14px;
  font-size:.75rem;
  letter-spacing:.03em;
  color:var(--text-soft);
  opacity:.85;
  text-align:center; /* belt-and-suspenders alongside .contact-banner-cta's align-items:center, in case it ever wraps to 2 lines */
}

/* ---------- floating sakura petals (Sep 2026) ----------
   Same device as the inner pages' hero petals (page-contact.php etc.,
   .ip-petal/@keyframes ipDrift in inner-pages.css), reused here so
   template-parts/contact-banner.php gets the same floating-petal
   treatment wherever it's included (homepage + every inner page).
   Scoped under .contact-banner so a bare `.petal` class can never leak
   into/collide with anything else. Positions cluster in the left ~60%
   (the open background before .contact-banner-photo starts, so they
   read clearly instead of disappearing under the photo) and the fall
   distance/count are both scaled down from the hero version to match
   this section's shorter min-height (380px vs a full hero).
   Opacity raised from the hero's .55 to .78 and the gradient's second
   stop switched to a deeper mauve (#9C6E7A — same derived tone as
   --ip-mauve-deep in inner-pages.css; sitewide style.css has no
   --mauve-deep token of its own, so it's inlined here) — checked
   against the live render: at .55 opacity + plain --mauve, the petals'
   own blush start-color nearly disappeared into this banner's
   blush-soft/ivory background on the left side. */
.contact-banner .petal{
  position:absolute;width:14px;height:18px;
  background:linear-gradient(135deg, var(--blush) 10%, #9C6E7A 100%);
  border-radius:0 60% 0 60%;
  opacity:.78;
  animation:contactBannerPetalDrift 12s linear infinite;
  z-index:1;pointer-events:none;
}
.contact-banner .petal:nth-child(2){left:8%;top:-10%;animation-delay:0s;animation-duration:13s;}
.contact-banner .petal:nth-child(3){left:22%;top:-13%;animation-delay:2.5s;animation-duration:11s;transform:scale(.75);}
.contact-banner .petal:nth-child(4){left:38%;top:-11%;animation-delay:5s;animation-duration:14s;}
.contact-banner .petal:nth-child(5){left:52%;top:-9%;animation-delay:1.5s;animation-duration:12s;transform:scale(.85);}
.contact-banner .petal:nth-child(6){left:60%;top:-13%;animation-delay:3.5s;animation-duration:13s;transform:scale(.65);}
@keyframes contactBannerPetalDrift{
  0%{transform:translateY(0) rotate(0deg);opacity:0;}
  12%{opacity:.78;}
  88%{opacity:.5;}
  100%{transform:translateY(420px) rotate(200deg);opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .contact-banner .petal{animation:none;opacity:0;}
}
.contact-banner-photo{
  position:relative;
  flex:0 0 38%;
  z-index:1;
}
.contact-banner-photo img{width:100%;height:100%;object-fit:cover;object-position:78% 22%;display:block;}
.contact-banner-photo::before{
  /* seam: widened to a gradual 3-stop fade across ~70% of the photo
     (was a hard 0→40% cut that read as a visible edge) so the banner
     background dissolves into the image slowly instead of stopping short */
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,
    var(--ivory) 0%,
    rgba(255,245,233,.65) 22%,
    rgba(255,245,233,.28) 45%,
    rgba(255,245,233,0) 70%);
}
.contact-banner-photo::after{
  /* wash: blush + gold mixed with soft-light (was multiply-only, which
     just flatly darkened) so the tint blends into the photo's own
     tones — lightens where the photo is already light, warms where
     it's mid-tone — reading as one continuous surface with the banner
     instead of a photo pasted on top of a differently-toned background */
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(200deg, rgba(249,214,223,.4), rgba(212,175,55,.26));
  mix-blend-mode:soft-light;
}

@media(max-width:1080px){
  .contact-banner-content{flex:1 1 58%;padding:48px clamp(20px,4vw,48px);}
  .contact-banner-photo{flex:0 0 42%;}
}
@media(max-width:820px){
  .contact-banner{flex-direction:column;min-height:0;}
  .contact-banner-content{
    flex:none;width:100%;
    flex-direction:column;align-items:flex-start;
    padding:52px 28px;gap:28px;
  }
  /* Follow-up round: everything in the stacked mobile layout used to
     stay left-aligned (inherited from the desktop side-by-side rule),
     which read unbalanced once the button/text column no longer had a
     photo panel next to it to justify the left edge. Centering the
     whole content column — copy block included — makes eyebrow/title/
     divider/subline/button/note all share one visual axis. */
  .contact-banner-content{align-items:center;text-align:center;}
  .contact-banner-copy{max-width:420px;margin:0 auto;}
  /* .eyebrow/.contact-banner-divider are flex rows (for their own
     decorative line+text/line+dot+line layout), so text-align alone
     doesn't center them — same fix already used for .philo-right
     .eyebrow on tablet/mobile. */
  .contact-banner-copy .eyebrow{justify-content:center;}
  .contact-banner-divider{justify-content:center;}
  .contact-banner-cta{align-items:center;width:100%;}
  .contact-banner-title{font-size:1.8rem;}
  /* photo becomes a soft blurred backdrop behind the stacked text rather
     than a hard-edged side panel — there isn't room to bleed it cleanly */
  .contact-banner-photo{
    position:absolute;inset:0;z-index:0;
    flex:none;
  }
  .contact-banner-photo img{
    filter:blur(3px) saturate(.9);
    transform:scale(1.06);
  }
  .contact-banner-photo::before{display:none;}
  .contact-banner-photo::after{
    /* mobile needs a much more opaque wash for text legibility over the
       blurred photo, but still tinted blush/gold (not flat ivory) so it
       matches the desktop treatment instead of looking like a plain
       white scrim slapped over the image */
    background:linear-gradient(160deg, rgba(255,245,233,.9), rgba(249,214,223,.55));
    mix-blend-mode:normal;
  }
}
@media (prefers-reduced-motion: reduce){
  .contact-banner-btn{transition:none;}
}