/* =========================================================
   Lioréa Lounge — Website
   Colors, type scale, radii and shadows are matched to the
   client's own reference site (liorealounge.vercel.app) —
   see the :root block below for the exact palette, pulled
   from its own Tailwind theme custom properties.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  /* ---- palette pulled verbatim from the reference site's own Tailwind
     theme (its --color-* custom properties, read directly off
     liorealounge.vercel.app) — not resampled/approximated ---- */
  --color-bg:        #f7f4ee;   /* ivory */
  --color-bg-alt:     #f2ece4;  /* blush-tinted ivory, for alternating sections */
  --color-ink:        #171715;  /* ink */
  --color-ink-soft:   #736c62;  /* muted */
  --color-accent:     #9f7f46;  /* champagne */
  --color-accent-soft:#ddc79b;  /* champagne-pale */
  --color-accent-light:#c2a473; /* champagne-light */
  --color-line:       #ded5c6;  /* line */
  --color-line-dark:  #35332d;  /* line-dark, for borders on dark sections */
  --color-blush:      #efe3db;  /* blush */
  --color-dark:        #171715;
  --color-dark-soft:   #262320;
  --color-cream:       #fbf9f5; /* ivory-100 */

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;

  --container: 1320px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --pad-card: clamp(1.75rem, 4vw, 2.5rem); /* shared padding for all "card" components (highlights, standards, reviews, form, contact) so they read as one consistent family */
  --radius: 999px;       /* pill buttons, matched to reference */
  --radius-card: 1.75rem;   /* radius-card, matched to reference */
  --radius-card-lg: 2.25rem; /* radius-frame, matched to reference */

  --shadow-card: 0 32px 70px -42px rgba(23,23,21,.55), 0 1px 0 0 rgba(255,255,255,.7) inset;
  --shadow-gold: 0 16px 36px -16px rgba(159,127,70,.8);
  --card-gradient: linear-gradient(150deg, #fff, var(--color-cream) 70%);
  --dark-card-gradient: linear-gradient(142deg, rgba(45,42,36,.78), rgba(23,23,21,.55));
  --rule-gold: linear-gradient(90deg, transparent, rgba(194,164,115,.65), transparent);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-ink);
  background:var(--color-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:300; margin:0; color:var(--color-ink); }
h3{ font-weight:400; }
h2 em, h1.page-title em, .hero-line--accent{
  background:linear-gradient(100deg, #edd9b3 0%, #c2a473 42%, #e3cda1 100%);
  background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
svg.icon{ width:20px; height:20px; display:block; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

.container{ max-width:var(--container); margin:0 auto; padding:0 clamp(1.5rem,4vw,2.5rem); }
.section{ padding:clamp(3.5rem,8vw,6.5rem) 0; }
/* franchise.html's first section, sitting right under the fixed header
   with no hero-style spacing of its own — a little extra breathing room */
.franchise-hero{ padding-top:calc(clamp(3.5rem,8vw,6.5rem) + 1.5rem); }
.section--alt{ background:linear-gradient(180deg, var(--color-bg) 0%, var(--color-blush) 50%, var(--color-bg) 100%); }
.section--darkbed{ background:var(--color-dark); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-body);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:1.1rem;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--color-accent); display:inline-block; }
.section-head{ max-width:640px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
h2, h1.page-title{ font-size:clamp(2.2rem,5.2vw,4.4rem); line-height:1.04; }
.section-sub{ margin-top:1rem; color:var(--color-ink-soft); font-size:1.05rem; max-width:52ch; }
.section-head--center .section-sub{ margin-left:auto; margin-right:auto; }

/* section header split into heading (left) / supporting copy (right) —
   the reference reuses this exact pattern for Intro, Services and the
   Treatment Explorer, so it's a shared class here too */
.section-head-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:end; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-head-split .section-sub{ margin-top:0; padding-bottom:.4rem; }

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1.05rem 2rem;
  font-family:var(--font-body); font-weight:600;
  font-size:.7rem; letter-spacing:.11em; text-transform:uppercase;
  border-radius:var(--radius);
  transition:all .35s var(--ease);
  border:1px solid transparent;
  white-space:nowrap;
}
.btn--primary{ background:linear-gradient(100deg, #ecd6ab 0%, #c6a577 34%, #a58150 62%, #dcc094 100%); color:var(--color-ink); box-shadow:var(--shadow-gold); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(159,127,70,.9); }
.btn--ghost{ border-color:currentColor; }
.btn--ghost:hover{ background:var(--color-ink); color:var(--color-cream); border-color:var(--color-ink); }
.section--darkbed .btn--ghost{ border-color:rgba(255,253,250,.6); }
.section--darkbed .btn--ghost:hover{ background:var(--color-cream); color:var(--color-dark); }
.btn--sm{ padding:.7rem 1.4rem; box-shadow:none; }
.btn svg.icon{ width:15px; height:15px; }

/* icon badges — small circular icon chips reused across highlight
   cards, the services filmstrip, intro pills, standards cards and
   the contact card */
.icon-badge{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--color-accent); }
.icon-badge--dark{ color:var(--color-accent-soft); }
.icon-badge svg{ width:26px; height:26px; }
.icon-badge--sm svg{ width:20px; height:20px; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.45s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:.55s; }

/* ---------- placeholder image treatment ----------
   No real photography yet, so instead of random stock
   photos we show a clearly-labeled neutral block. Once
   client photography arrives, swap each .ph-block for a
   real <img class="ph-img" src="..."> — the .ph-img rule
   below is already there waiting for it. */
.ph-img-wrap{ position:relative; overflow:hidden; background:var(--color-bg-alt); border-radius:var(--radius-card); }
.hero-media, .filmstrip-panel .ph-img-wrap{ border-radius:0; }
.ph-img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.25) sepia(.12) saturate(1.05); transition:transform .8s var(--ease); }
/* Visit Lioréa's embedded Google Map — no API key needed (the "output=embed"
   form), per the client's redesign brief. object-fit doesn't apply to
   iframes, so this gets its own rule instead of reusing .ph-img, and skips
   the sepia photo filter (would make the map unreadable). */
.map-embed{ width:100%; height:100%; border:0; display:block; }
.ph-block{ transition:transform .8s var(--ease); }
.ph-img-wrap:hover .ph-img, .ph-img-wrap:hover .ph-block{ transform:scale(1.05); }
.ph-img-wrap::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,24,21,0) 40%, rgba(28,24,21,.35) 100%); pointer-events:none; }

.ph-block{
  width:100%; height:100%; min-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  text-align:center; padding:1.5rem;
  background:
    repeating-linear-gradient(135deg, rgba(169,124,80,.10) 0 2px, transparent 2px 14px),
    linear-gradient(150deg, var(--color-bg-alt), var(--color-accent-soft) 140%);
}
.ph-block-label{
  font-family:var(--font-body); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-ink-soft); border:1px dashed var(--color-accent); border-radius:999px;
  padding:.5rem 1rem; background:rgba(255,253,250,.6);
}
/* the exact upload path a placeholder is waiting for — see
   $expectedPhotoPath() in treatment-template.php. Monospace so it reads
   as a literal file path/name, not prose. */
.ph-block-path{
  font-family:'Courier New', Courier, monospace; font-size:.62rem; line-height:1.5;
  color:var(--color-ink-soft); opacity:.75; word-break:break-all; max-width:22ch;
}
/* dark-bed sections and full-bleed photos sit behind light text,
   so their placeholder block uses the dark variant regardless of section */
.hero-media .ph-block, .dark-card .ph-block, .section--darkbed .ph-block, .filmstrip-panel .ph-block{
  min-height:100%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px),
    linear-gradient(150deg, #2c2521, #46392c 140%);
}
.hero-media .ph-block-label, .dark-card .ph-block-label, .section--darkbed .ph-block-label, .filmstrip-panel .ph-block-label{ color:#e6dccf; background:rgba(28,24,21,.5); }
.hero-media .ph-block-path, .dark-card .ph-block-path, .section--darkbed .ph-block-path, .filmstrip-panel .ph-block-path{ color:#cfc6bd; }

/* =========================== SIDE RAIL =========================== */
/* dot scroll-nav + social icons, fixed to the left edge — matched
   pixel-for-pixel to the reference site's own rail:
   top:50%, left:20px, gap:32px between groups, dots 10px/6px,
   56px divider, 36px social circles. Reference only shows this on
   very wide screens (>=1620px) so it doesn't crowd normal laptops. */
.side-rail{
  display:none;
  position:fixed; top:50%; left:20px; transform:translateY(-50%);
  z-index:40;
  flex-direction:column; align-items:center; gap:2rem;
}
@media (min-width:1620px){ .side-rail{ display:flex; } }

.side-dots{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.side-dots button{
  display:block; width:6px; height:6px; border-radius:50%;
  background:rgba(23,23,21,.25); border:0; padding:0; cursor:pointer;
  transition:all .5s var(--ease);
}
.side-dots button:hover{ background:rgba(159,127,70,.7); }
.side-dots button.is-active{ width:10px; height:10px; background:var(--color-accent); }

.side-divider{ width:1px; height:56px; background:var(--color-line); }

.side-social{ display:flex; flex-direction:column; gap:.75rem; }
.side-social a{
  display:flex; width:36px; height:36px; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--color-line); background:rgba(255,255,255,.7);
  color:var(--color-ink-soft); transition:all .5s var(--ease);
}
.side-social a svg.icon{ width:16px; height:16px; }
.side-social a:hover{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-cream); }

/* =========================== HEADER =========================== */
/* Transparent over the hero (so it floats on the photo like the
   reference), but switches to a solid, blurred bar once the page is
   scrolled — .is-scrolled is toggled by main.js. Without this the
   header stayed unreadable over light sections further down the page. */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.4rem 0;
  background:transparent;
  /* own compositing layer, matching .nav.is-open's — without it some
     Android Chrome builds mis-order the two fixed siblings during the
     nav's transform transition and paint the menu over the header,
     hiding the toggle/logo (reported: header "disappears" on mobile) */
  transform:translateZ(0);
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
.site-header.is-scrolled{
  padding:1rem 0;
  background:rgba(247,244,238,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--color-line), 0 20px 40px -28px rgba(23,23,21,.35);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.logo-lockup{ display:inline-flex; flex-direction:row; align-items:center; gap:20px; }
.logo-img{ height:26px; width:auto; display:block; filter:brightness(0) invert(1); transition:filter .35s var(--ease); }
.site-header.is-scrolled .logo-img{ filter:none; }
.logo-icon{ max-width:45px; width:100%; height:auto; display:block; flex:none; }

.nav a{ color:var(--color-cream); transition:color .35s var(--ease); }
.nav a::after{ background:var(--color-cream); transition:width .3s var(--ease), background .35s var(--ease); }
.site-header.is-scrolled .nav a{ color:var(--color-ink); }
.site-header.is-scrolled .nav a::after{ background:var(--color-ink); }
/* .mega lives inside .nav, so the broad ".nav a" scroll-state override
   above also matches mega-menu links — pin them back to their own
   colors regardless of scroll state so the dropdown text doesn't shift
   color when the header switches to its scrolled/solid state. */
.site-header.is-scrolled .mega .mega-col a{ color:var(--color-ink-soft); }
.site-header.is-scrolled .mega .mega-col a:hover,
.site-header.is-scrolled .mega .mega-col a.current{ color:var(--color-accent); }

.nav{ display:flex; gap:2rem; }
.nav a{ font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; position:relative; padding:.3rem 0; }
.nav a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; transition:width .3s var(--ease); }
.nav a:hover::after{ width:100%; }

/* position+z-index needed so this stays above .nav.is-open's fixed
   mobile overlay (z-index:99) — without an explicit position here,
   this whole block (incl. the toggle button) is static in-flow content,
   which always paints below ANY positioned+z-index descendant of
   .site-header regardless of that descendant's z-index number, hiding
   the toggle behind the open menu with no visible way to close it */
.header-actions{ display:flex; align-items:center; gap:1.2rem; position:relative; z-index:999; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.3rem; }
.nav-toggle span{ width:22px; height:1px; background:var(--color-cream); transition:all .3s; transform-origin:center; }
/* the mobile menu panel it opens is light, so the toggle (which stays
   in the fixed header, on top of that panel) switches to dark bars
   while open — and morphs into an X so it visibly doubles as the
   close control (client reported no obvious way to close the menu) */
.nav-toggle.is-open span{ background:var(--color-ink); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.site-header.is-scrolled .nav-toggle span{ background:var(--color-ink); }

/* permanently solid/dark header (treatment landing pages — see $darkHeader
   in header.php): no transparent-over-photo hero and no light breadcrumb
   bar to blend into below it, so it doesn't toggle light-on-scroll like
   the homepage header does. ":not(.is-open)" keeps the mobile menu's own
   open/close X — which needs dark bars against its light dropdown panel —
   working normally even though this selector is otherwise more specific. */
.site-header--dark{ background:var(--color-dark); }
.site-header--dark.is-scrolled{
  background:var(--color-dark);
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 20px 40px -28px rgba(0,0,0,.5);
}
.site-header--dark.is-scrolled .logo-img{ filter:brightness(0) invert(1); }
.site-header--dark.is-scrolled .nav a{ color:var(--color-cream); }
.site-header--dark.is-scrolled .nav a::after{ background:var(--color-cream); }
.site-header--dark.is-scrolled .mega .mega-col a{ color:var(--color-ink-soft); }
.site-header--dark.is-scrolled .mega .mega-col a:hover,
.site-header--dark.is-scrolled .mega .mega-col a.current{ color:var(--color-accent); }
.site-header--dark.is-scrolled .nav-toggle:not(.is-open) span{ background:var(--color-cream); }

/* ============ FLOATING BOOK NOW — shown on every screen size (not just
   mobile) and always visible, not scroll-triggered, per the client's
   request. On desktop this sits alongside the header's own Book Now
   button; on mobile it's the only persistent one (the header's hides
   below 980px, see .header-actions .btn--primary). ============ */
.floating-book{
  display:inline-flex;
  position:fixed;
  right:1.1rem;
  bottom:calc(1.1rem + env(safe-area-inset-bottom, 0px));
  z-index:90;
  box-shadow:0 16px 36px -10px rgba(23,23,21,.45);
}

/* =========================== HERO =========================== */
.hero{
  position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end;
  color:var(--color-cream); overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(23,23,21,.94) 0%, rgba(23,23,21,.45) 50%, rgba(23,23,21,.25) 100%); }
.hero-content{ position:relative; z-index:1; padding-bottom:clamp(6.5rem,min(11vw,9vh),9rem); width:100%; }
.hero-kicker{ font-size:clamp(.7rem,1.6vw,.78rem); letter-spacing:.25em; text-transform:uppercase; color:var(--color-accent-soft); margin-bottom:clamp(1rem,3vw,1.4rem); }
/* font-size used to scale off viewport WIDTH only (8.4vw), so on wide-but-
   short screens (common laptop resolutions) the heading grew tall enough
   to run into the header. min(8.4vw,11vh) lets viewport HEIGHT cap it too. */
.hero h1{ display:flex; flex-direction:column; font-size:clamp(2.9rem,min(8.4vw,11vh),7rem); color:var(--color-cream); line-height:1.05; }
.hero-line{ display:block; }
.hero-line--italic{ font-style:italic; }
.hero-kicker{ display:block; font-family:var(--font-body); font-size:.78rem; font-weight:600; font-style:normal; letter-spacing:.2em; text-transform:uppercase; line-height:1.4; color:var(--color-accent-soft); margin-bottom:1.2rem; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.hero-sub{ margin-top:clamp(1rem,3vw,1.4rem); max-width:44ch; font-size:clamp(1rem,2vw,1.1rem); color:#eee6dc; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.hero-cta{ display:flex; gap:clamp(.75rem,2vw,1rem); margin-top:clamp(1.75rem,5vw,2.4rem); flex-wrap:wrap; }
.hero-meta{ margin-top:clamp(2rem,6vw,3rem); display:flex; gap:clamp(1rem,3vw,1.5rem); flex-wrap:wrap; font-size:.85rem; color:#e6dccf; }
.hero-meta span{ opacity:.6; margin:0 .5rem; }

/* =========================== HIGHLIGHT STRIP =========================== */
/* floating cards that overlap the bottom of the hero, matched to reference */
.highlights{ position:relative; z-index:2; margin-top:clamp(-4rem,-9vw,-6.5rem); }
.highlights .container{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.highlight-item{
  padding:var(--pad-card);
  background:var(--card-gradient);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
.highlight-item .icon-badge{ margin-bottom:1.2rem; }
.highlight-item h3{ font-size:1.3rem; margin-bottom:.5rem; }
.highlight-item p{ color:var(--color-ink-soft); font-size:.92rem; }
.highlight-item .link-arrow{ display:inline-block; margin-top:1.1rem; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--color-accent); color:var(--color-accent); }

/* =========================== INTRO =========================== */
.intro-divider{ height:1px; background:var(--rule-gold); margin:clamp(2rem,5vw,3rem) 0; }
.intro-pills{ display:flex; gap:1rem; flex-wrap:wrap; }
.intro-pill{
  flex:1 1 140px;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  padding:1.75rem 1rem;
  background:var(--card-gradient);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  text-align:center;
}
.intro-pill span{ font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--color-ink-soft); }

/* =========================== SERVICES FILMSTRIP =========================== */
.filmstrip{ display:flex; gap:.9rem; height:560px; }
.filmstrip-panel{
  position:relative; overflow:hidden; border-radius:var(--radius-card);
  flex:0 0 96px; transition:flex-basis .6s var(--ease), flex-grow .6s var(--ease);
  cursor:pointer; border:0; padding:0; text-align:left; background:var(--color-ink); outline-offset:4px;
}
.filmstrip-panel.is-active{ flex:1 1 auto; }
.filmstrip-panel .ph-img-wrap{ position:absolute; inset:0; height:100%; }
.filmstrip-panel::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(23,23,21,.9) 0%, rgba(23,23,21,.35) 45%, rgba(23,23,21,.15) 100%); transition:opacity .4s var(--ease); }
.filmstrip-panel:not(.is-active)::after{ background:linear-gradient(0deg, rgba(23,23,21,.65) 0%, rgba(23,23,21,.35) 100%); }

.filmstrip-num{ position:absolute; z-index:2; font-family:var(--font-display); font-size:.9rem; color:var(--color-accent-soft); }
.filmstrip-panel.is-active .filmstrip-num{ left:2rem; top:2rem; }
.filmstrip-panel:not(.is-active) .filmstrip-num{ left:50%; bottom:1.25rem; transform:translateX(-50%); }

.filmstrip-label{ position:absolute; z-index:2; left:50%; top:1.6rem; transform:translateX(-50%); writing-mode:vertical-rl; font-size:.85rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--color-cream); white-space:nowrap; }
.filmstrip-panel.is-active .filmstrip-label{ display:none; }

.filmstrip-panel-content{ display:none; position:relative; z-index:2; height:100%; flex-direction:column; justify-content:flex-end; padding:clamp(1.75rem,3vw,2.75rem); color:var(--color-cream); max-width:520px; }
.filmstrip-panel.is-active .filmstrip-panel-content{ display:flex; }
.filmstrip-panel-content .icon-badge{ margin-bottom:1.2rem; }
.filmstrip-panel-content h3{ color:var(--color-cream); font-size:clamp(1.6rem,3vw,2.1rem); }
.filmstrip-panel-content p{ color:#e6dccf; margin-top:.7rem; font-size:.95rem; max-width:42ch; }
.filmstrip-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem; }
.filmstrip-tags span{ font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:#e6dccf; border:1px solid rgba(255,255,255,.25); padding:.4rem .8rem; border-radius:999px; }
.filmstrip-panel-content .btn{ margin-top:1.6rem; align-self:flex-start; }

/* =========================== DARK CARD (franchise banner / final CTA) =========================== */
.dark-card{
  position:relative; overflow:hidden;
  background:var(--dark-card-gradient); border-radius:var(--radius-card-lg);
  padding:clamp(2rem,5vw,4rem);
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center;
  color:var(--color-cream);
}
.dark-card::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(221,199,155,.5) 1px, transparent 1px); background-size:24px 24px; opacity:.3; pointer-events:none; }
.dark-card > *{ position:relative; z-index:1; min-width:0; }
.dark-card h2, .dark-card h1.page-title{ color:var(--color-cream); }
.dark-card p{ margin-top:1.1rem; color:#cfc6bd; max-width:48ch; }
.dark-card .eyebrow{ color:var(--color-accent-soft); }
.dark-card .tag-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.dark-card .tag-row span{ padding:.5rem 1rem; border:1px solid rgba(255,255,255,.22); border-radius:999px; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; }

.dark-card-media{ display:flex; justify-content:center; }
.ph-img-wrap--circle{ position:relative; width:min(320px,80%); aspect-ratio:1; border-radius:50%; }
.ph-img-wrap--circle::before{
  content:''; position:absolute; inset:-8px; border-radius:50%; z-index:-1;
  background:conic-gradient(from 200deg, transparent 0deg, rgba(221,199,155,.15) 40deg, rgba(194,164,115,.85) 130deg, rgba(237,217,179,.95) 190deg, rgba(159,127,70,.35) 250deg, transparent 300deg);
}

/* Gift card visual (gift-cards.php) — CSS mockup, matches the brand's actual
   printed/digital card look (dark ground, gold display type, wordmark). */
.gift-card-visual{
  width:min(320px,100%); aspect-ratio:1.6/1; border-radius:16px;
  background:linear-gradient(135deg, #232320, #0e0e0d);
  border:1px solid rgba(221,199,155,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem;
  padding:1.5rem; text-align:center; margin:0 auto;
}
.gift-card-visual-logo{ height:20px; width:auto; filter:brightness(0) invert(1); }
.gift-card-visual-title{ font-family:var(--font-display); font-style:italic; font-size:1.7rem; color:var(--color-accent-soft); }
.gift-card-visual-tag{ font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-soft); opacity:.85; line-height:1.6; }

.dark-card--center{ grid-template-columns:1fr; text-align:center; }
.dark-card--center .tag-row, .dark-card--center .hero-cta{ justify-content:center; }
.dark-card--center p{ margin-left:auto; margin-right:auto; }
.dark-card--center .hero-meta{ justify-content:center; margin-top:1.8rem; }

/* =========================== EXPLORER TABS =========================== */
.explorer-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:clamp(1.5rem,4vw,2rem); }
.tab-btn{ padding:.7rem 1.3rem; background:none; border:1px solid var(--color-line); border-radius:999px; font-size:.78rem; letter-spacing:.02em; color:var(--color-ink-soft); transition:all .3s var(--ease); }
.tab-btn.is-active, .tab-btn:hover{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-ink); }

.explorer-meta{ display:flex; align-items:baseline; justify-content:space-between; padding-top:1.5rem; }
.explorer-meta-title{ font-family:var(--font-display); font-size:1.3rem; }
.explorer-meta-count{ font-size:.8rem; color:var(--color-ink-soft); }
.explorer-divider{ height:1px; background:var(--color-line); margin:1.25rem 0 0; }

.treatment-list{ display:none; flex-direction:column; }
.treatment-list.is-active{ display:flex; }
.treatment-item{ border-bottom:1px solid var(--color-line); }
.treatment-item-head{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:1.6rem 0; background:none; border:0; text-align:left; gap:1.5rem; }
.treatment-item-head h4{ font-size:1.43rem; }
.treatment-item-head p{ color:var(--color-ink-soft); font-size:.99rem; margin-top:.3rem; }
.treatment-item-toggle{ flex-shrink:0; width:34px; height:34px; border:1px solid var(--color-line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease); }
.treatment-item.is-open .treatment-item-toggle{ transform:rotate(45deg); background:var(--color-ink); border-color:var(--color-ink); color:var(--color-cream); }
.treatment-item-body{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
/* generous ceiling, not a tuned value — the box always renders at its
   actual (shorter) content height thanks to overflow:hidden, this just
   needs to never be LESS than the tallest real content. 420px worked
   for the 2-column desktop layout but clipped invisibly on mobile once
   text re-wrapped taller in the narrower single column (see README). */
.treatment-item.is-open .treatment-item-body{ max-height:2000px; }
.treatment-item-body-inner{ padding:0 0 2rem; display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; }
/* only on the ~13 Treatment Explorer items that have a dedicated SEO
   landing page (client-requested, Sept 2026) — the explorer previously
   had no internal links at all to the 15 Phase 1 pages, hurting their
   discoverability/SEO value. Sits as the last element in the Benefits/
   What to Expect column, per the client's own placement instruction. */
.explorer-learn-more{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent); }
.explorer-learn-more:hover{ color:var(--color-accent-soft); }
.explorer-learn-more svg{ width:13px; height:13px; }
.treatment-item-body-inner ul{ margin-top:.6rem; }
.treatment-item-body-inner li{ position:relative; padding-left:1.1rem; font-size:.9rem; color:var(--color-ink-soft); margin-bottom:.5rem; }
.treatment-item-body-inner li::before{ content:''; position:absolute; left:0; top:.55em; width:5px; height:5px; background:var(--color-accent); border-radius:50%; }
.treatment-item-body-inner h5{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent); margin-bottom:.5rem; }

/* =========================== ABOUT =========================== */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.about-media .ph-img-wrap{ aspect-ratio:4/5; border-radius:var(--radius-card-lg); }
.about-stats{ display:flex; gap:2.5rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--color-line); }
.about-stats .stat-label{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-ink-soft); margin-bottom:.3rem; }
.about-stats .stat-value{ font-family:var(--font-display); font-size:1.4rem; font-variant-numeric:lining-nums; }

/* =========================== STANDARDS =========================== */
.standards-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
/* Gift Cards — How It Works has 3 cards, not 4: repeat(4,1fr) left an empty
   trailing column instead of filling the row evenly. Same specificity as
   .standards-grid (plain class, not #gift-how ...) and placed right after
   it in source order, so the 980px/620px responsive overrides below still
   win at their breakpoints instead of this pinning 3 columns everywhere. */
.gift-how-grid{ grid-template-columns:repeat(3,1fr); }
.standard-card{ background:var(--card-gradient); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:var(--pad-card); }
.standard-card-top{ display:flex; align-items:center; justify-content:space-between; }
.standard-num{ font-size:.72rem; color:var(--color-ink-soft); letter-spacing:.1em; }
.standard-card h3{ font-size:1.25rem; margin-top:1.4rem; }
.standard-card p{ margin-top:.6rem; font-size:.9rem; color:var(--color-ink-soft); }

/* =========================== FRANCHISE — EXPANDED SECTIONS ===========================
   reuses .standard-card / .tag-row / .franchise-intro-list look & feel rather than
   inventing new visual language, per the brief's "minimal clutter" note */
.franchise-services-grid, .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.franchise-services-grid .standard-card{ text-align:center; }
.franchise-services-grid .icon-badge{ margin:0 auto; }
.journey-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1.6rem; }
.dark-card--center .journey-row{ justify-content:center; }
.journey-arrow{ color:var(--color-accent-soft); opacity:.6; font-size:.85rem; }

/* ---- What Franchisees Receive: 3-stage rail, per the client's mockup ---- */
.receive-rail{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,3.5rem); }
.receive-rail::before{
  content:''; position:absolute; top:27px; left:calc(16.66% + 4px); right:calc(16.66% + 4px); height:1px;
  background:repeating-linear-gradient(90deg, var(--color-accent) 0 8px, transparent 8px 16px); opacity:.5;
}
.receive-stage-head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; position:relative; z-index:1; }
.receive-node{
  flex:0 0 auto; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--color-ink); color:var(--color-accent-soft); font-family:var(--font-display); font-size:1.1rem;
  box-shadow:0 0 0 6px var(--color-cream);
}
.receive-stage--ongoing .receive-node{ box-shadow:0 0 0 6px var(--color-cream), 0 0 0 9px var(--color-accent-soft); }
.receive-node svg.icon{ width:20px; height:20px; }
.receive-stage-tag{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent); font-weight:600; margin-bottom:.2rem; }
.receive-stage-meta h3{ font-size:1.25rem; }
.receive-stage-list{ display:flex; flex-direction:column; gap:0; }
.receive-stage-list li{ display:flex; align-items:flex-start; gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--color-line); font-size:.92rem; color:var(--color-ink-soft); }
.receive-stage-list li:last-child{ border-bottom:0; }
.receive-stage-list li svg.icon{ width:16px; height:16px; margin-top:.2rem; color:var(--color-accent); flex-shrink:0; }
.receive-strip{ margin-top:clamp(2.5rem,5vw,4rem); padding-top:2.5rem; border-top:1px solid var(--color-line); color:var(--color-ink-soft); font-size:.95rem; max-width:52ch; }
.receive-strip strong{ display:block; font-family:var(--font-display); font-style:italic; font-size:1.35rem; color:var(--color-ink); font-weight:400; margin-bottom:.4rem; }

/* ---- Ideal Franchise Partner: certificate card, per the client's mockup ----
   Title/eyebrow on the left, certificate card on the right — same split
   layout as .franchise-form, so this section doesn't need to stack its
   heading above the card (which was too tall to fit short viewports). */
.partner-split{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,4rem); align-items:center; }
.partner-cert{
  position:relative; background:var(--color-cream); border:1px solid var(--color-line);
  padding:clamp(1.5rem,4vh,2.25rem) clamp(1.5rem,4vw,2.5rem); box-shadow:var(--shadow-card);
}
.partner-cert-corner{ position:absolute; width:22px; height:22px; border:1px solid var(--color-accent); opacity:.7; }
.partner-cert-corner.tl{ top:12px; left:12px; border-width:1px 0 0 1px; }
.partner-cert-corner.tr{ top:12px; right:12px; border-width:1px 1px 0 0; }
.partner-cert-corner.bl{ bottom:12px; left:12px; border-width:0 0 1px 1px; }
.partner-cert-corner.br{ bottom:12px; right:12px; border-width:0 1px 1px 0; }
.partner-cert-seal{
  width:clamp(46px,8vh,78px); height:clamp(46px,8vh,78px); margin:0 auto clamp(.6rem,2vh,1.6rem); border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--color-ink); box-shadow:0 0 0 1px var(--color-accent-soft), 0 0 0 5px var(--color-cream), 0 0 0 6px var(--color-accent-soft);
}
.partner-cert-seal svg.icon{ width:30px; height:30px; color:var(--color-accent-soft); }
.partner-cert-seal--logo{ background:none; box-shadow:none; } /* the brand mark already has its own ring, no need for the dark seal circle behind it */
.partner-cert-seal--logo img{ width:100%; height:100%; object-fit:contain; }
.partner-cert-label{ text-align:center; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent); font-weight:600; margin-bottom:.4rem; }
.partner-cert-title{ text-align:center; font-family:var(--font-display); font-style:italic; font-size:1.4rem; margin-bottom:clamp(1rem,3vh,2.4rem); }
.partner-cert-grid{ list-style:none; display:grid; grid-template-columns:1fr 1fr; column-gap:2rem; }
.partner-cert-grid li{ display:flex; align-items:flex-start; gap:.9rem; padding:clamp(.6rem,1.8vh,1.1rem) 0; border-bottom:1px solid var(--color-line); font-size:.88rem; }
.partner-cert-grid li:nth-child(5), .partner-cert-grid li:nth-child(6){ border-bottom:0; }
.partner-check{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1px solid var(--color-accent);
  display:flex; align-items:center; justify-content:center; margin-top:.1rem;
}
.partner-check svg.icon{ width:11px; height:11px; color:var(--color-accent); stroke-width:2.2; }

/* =========================== GALLERY ===========================
   explicit 4-col / 3-row masonry, matched line-for-line to the
   reference's own grid placement (not a generic pattern) */
.gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:8.5rem; gap:.75rem; }
.gallery-item{ position:relative; overflow:hidden; border-radius:1.25rem; box-shadow:0 30px 70px -52px rgba(23,23,21,.8); }
.gallery-item:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.gallery-item .ph-img-wrap{ height:100%; }
.gallery-caption{ position:absolute; left:1rem; bottom:1rem; z-index:2; color:#fff; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; }

@media (min-width:640px){
  .gallery-grid{ grid-auto-rows:11rem; gap:1rem; }
}
@media (min-width:1024px){
  .gallery-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:14rem; gap:1.25rem; }
  .gallery-item:nth-child(1){ grid-column:1; grid-row:1 / span 2; }
  .gallery-item:nth-child(2){ grid-column:2; grid-row:1; }
  .gallery-item:nth-child(3){ grid-column:3; grid-row:1 / span 2; }
  .gallery-item:nth-child(4){ grid-column:4; grid-row:1; }
  .gallery-item:nth-child(5){ grid-column:2; grid-row:2; }
  .gallery-item:nth-child(6){ grid-column:4; grid-row:2 / span 2; }
  .gallery-item:nth-child(7){ grid-column:1; grid-row:3; }
  .gallery-item:nth-child(8){ grid-column:2; grid-row:3; }
  .gallery-item:nth-child(9){ grid-column:3; grid-row:3; }
}
@media (min-width:1280px){
  .gallery-grid{ grid-auto-rows:16rem; }
}

/* =========================== REVIEWS =========================== */
.reviews-wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.stars-row{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.3rem; }
.stars-row svg.icon{ width:15px; height:15px; fill:var(--color-accent); stroke:none; }
.stars-row span{ font-size:.8rem; color:var(--color-ink-soft); font-weight:600; }
/* Smaller cards shown all at once, no carousel/navigation — client asked to
   fit more reviews in this space. Add more .review-card-mini blocks in
   index.php to show more; nothing else to update. */
.review-grid{ display:flex; flex-direction:column; gap:1.1rem; }
.review-card-mini{ background:var(--card-gradient); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:clamp(1.25rem,2.6vw,1.75rem); }
.review-quote-mini{ font-family:var(--font-display); font-size:1.05rem; line-height:1.5; color:var(--color-ink); }
.review-quote-mini::before{ content:'\201C'; color:var(--color-accent); }
.review-quote-mini::after{ content:'\201D'; color:var(--color-accent); }
.review-mini-footer{ display:flex; align-items:baseline; gap:.6rem; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--color-line); }
.review-mini-name{ font-weight:600; font-size:.85rem; }
.review-mini-tag{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--color-accent); }

/* =========================== STATS BAR =========================== */
.stats-bar{ padding:2.75rem 0; }
.stats-bar .container{ display:flex; justify-content:center; flex-wrap:wrap; }
.stats-bar-item{ padding:0 clamp(1.5rem,4vw,3.5rem); border-left:1px solid var(--color-line); text-align:center; }
.stats-bar-item:first-child{ border-left:0; }
.stats-bar-item .stat-value{ font-family:var(--font-display); font-size:2rem; color:var(--color-accent); font-variant-numeric:lining-nums; }
.stats-bar-item .stat-label{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-ink-soft); margin-top:.3rem; }

/* =========================== FRANCHISE INQUIRY FORM =========================== */
.franchise-form{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,4rem); align-items:flex-start; }
.franchise-intro-list{ margin-top:2rem; display:flex; flex-direction:column; gap:1rem; }
.franchise-intro-list li{ display:flex; gap:.9rem; font-size:.92rem; color:var(--color-ink-soft); padding-left:1.4rem; position:relative; }
.franchise-intro-list li::before{ content:''; position:absolute; left:0; top:.5em; width:6px; height:6px; border-radius:50%; background:var(--color-accent); }

/* Gift Cards terms: "Label:" + description as two flex items lands the
   description at a different x-position on every row, since the label's
   width isn't fixed (visible as ragged left edges on the description text).
   Give the label a fixed column so descriptions line up underneath one
   another, like a proper definition list. */
.gift-terms-list li{ align-items:flex-start; gap:1.2rem; }
.gift-terms-list li strong{ flex:0 0 150px; color:var(--color-ink); }
@media (max-width:560px){
  .gift-terms-list li{ flex-direction:column; gap:.3rem; }
  .gift-terms-list li strong{ flex-basis:auto; }
}
.form-card{ background:var(--card-gradient); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:var(--pad-card); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-field{ margin-bottom:1.1rem; }
.form-field label{ display:block; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--color-ink-soft); margin-bottom:.5rem; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:.85rem 1rem; border:1px solid var(--color-line); background:var(--color-bg);
  font-family:var(--font-body); font-size:.95rem; color:var(--color-ink); border-radius:12px;
  transition:border-color .3s var(--ease);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--color-accent); }
.form-field textarea{ resize:vertical; min-height:100px; }
.form-consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; color:var(--color-ink-soft); margin:1.3rem 0 1.5rem; }
.form-consent input{ margin-top:.25rem; }
.form-note{ font-size:.78rem; color:var(--color-ink-soft); margin-top:1rem; }
.form-status{ margin-top:1rem; font-size:.85rem; display:none; }
.form-status.is-success{ display:block; color:#3f7a4d; }
.form-status.is-error{ display:block; color:#b34a3a; }
/* once the inquiry is sent, drop the inputs and leave only the
   confirmation message — nothing left to edit or resubmit. Collapsed
   smoothly (not an instant display:none) so the sudden loss of ~800px
   of form height doesn't yank the rest of the page up under the user's
   thumb — main.js adds .is-collapsing first to animate this, then swaps
   to .is-sent (the instant display:none) once the transition has
   finished, so the final state still has zero layout cost. */
.form-card > *:not(.form-status){ transition:opacity .35s ease, max-height .35s ease, margin .35s ease, padding .35s ease; overflow:hidden; max-height:2000px; }
.form-card.is-collapsing > *:not(.form-status){ opacity:0; max-height:0; margin:0; padding:0; pointer-events:none; }
.form-card.is-sent > *:not(.form-status){ display:none; }
.form-card.is-sent .form-status{ margin-top:0; font-size:1rem; }

/* =========================== FINAL CTA =========================== */
.final-cta h2{ max-width:18ch; margin:0 auto; }

/* =========================== CONTACT / FOOTER =========================== */
.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:stretch; }
.contact-card{ min-width:0; background:var(--card-gradient); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:var(--pad-card); display:flex; flex-direction:column; }
.contact-row{ display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 0; border-top:1px solid var(--color-line); }
.contact-row:first-child{ border-top:0; padding-top:0; }
.contact-label{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-ink-soft); margin-bottom:.35rem; }
.contact-value{ font-size:.98rem; }
.hours-list{ display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; }
.hours-list li{ display:flex; justify-content:space-between; gap:1rem; }
.hours-list li span:first-child{ color:var(--color-ink-soft); }
.hours-list li.is-closed span:last-child{ color:var(--color-ink-soft); }
.contact-social{ display:flex; gap:1.5rem; margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--color-line); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
/* fills whatever's left in the card below the social row — per the
   client's redesign brief, the map goes here (under Visit Lioréa's
   contact links), not swapped in for the interior photo on the right. */
.contact-map{ flex:1; min-height:180px; margin-top:1.4rem; border-radius:14px; overflow:hidden; }
.contact-social .accent{ color:var(--color-accent); }
.contact-media{ position:relative; min-width:0; min-height:320px; }
.contact-media .ph-img-wrap{ height:100%; }
.map-pin{ position:absolute; left:1.25rem; right:1.25rem; bottom:1.25rem; z-index:2; background:var(--color-dark); color:var(--color-cream); border-radius:16px; padding:1rem 1.3rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.map-pin small{ display:block; font-size:.65rem; font-weight:400; text-transform:none; letter-spacing:0; opacity:.7; margin-top:.2rem; }

/* extra bottom padding clears the always-visible .floating-book pill
   (height ~53px + its 1.1rem offset), which otherwise sits on top of
   the footer-bottom social links */
.site-footer{ background:var(--color-dark-soft); color:#cfc6bd; padding:4rem 0 6rem; }
/* .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.12); } */
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1.1fr 1fr 1.6fr; gap:2rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-grid .logo-lockup{ align-items:flex-start; }
.footer-grid .logo-img{ height:30px; }
.footer-grid p{ margin-top:1rem; font-size:.9rem; max-width:32ch; }
.footer-col h4{ color:#fff; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-family:var(--font-body); margin-bottom:1.1rem; }
.footer-col li{ margin-bottom:.7rem; font-size:.9rem; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:1.5rem; font-size:.8rem; flex-wrap:wrap; gap:1rem; }
.footer-social{ display:flex; gap:1rem; }
.footer-privacy{ margin-left:.6rem; padding-left:.8rem; border-left:1px solid rgba(255,255,255,.25); }
.footer-privacy:hover{ color:#fff; }

/* =========================== SERVICES MEGA-MENU =========================== */
.nav-item{ position:relative; }
.nav-item > a{ display:flex; align-items:center; gap:.35rem; }
.mega-caret{ font-size:.6rem; transition:transform .25s var(--ease); }
.nav-item:hover .mega-caret, .nav-item.is-open .mega-caret{ transform:rotate(180deg); }
.mega{
  /* top:100% (not "+ gap") so the mega's own box is flush against the
     trigger with no dead space between them — a gap here breaks :hover
     on .nav-item while the mouse travels down to the panel, closing it
     before a click on the links inside can register. The visual gap
     moves into padding-top instead, which stays inside the hoverable box. */
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  width:min(760px,90vw); background:var(--card-gradient); border:1px solid var(--color-line); border-radius:16px;
  padding:calc(1.75rem + 1.2rem) 1.75rem 1.75rem;
  box-shadow:var(--shadow-card);
  opacity:0; visibility:hidden; transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem 1.6rem;
  z-index:50;
}
/* hover-capable devices only (real mouse) — on touch, tapping a link can
   leave :hover "stuck" until the next tap elsewhere (a well-known mobile
   Safari/Chrome quirk), which was firing this desktop reveal transform on
   top of the mobile tap-to-expand accordion below and shoving the whole
   opened panel off-screen to the left. The accordion sets its own
   opacity/visibility directly, so it doesn't need this rule at all. */
@media (hover:hover) and (pointer:fine) {
  .nav-item:hover .mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
}
.mega-col h4{ font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent); margin-bottom:.6rem; font-weight:700; }
.mega-col a{ display:block; font-size:.82rem; color:var(--color-ink-soft); padding:.3rem 0; }
.mega-col a:hover, .mega-col a.current{ color:var(--color-accent); }

/* Treatment landing pages (the 15 published mockups) live in css/landing.css. */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.review-grid .stars-row{ margin-bottom:.9rem; }

/* Privacy policy — plain long-form text column */
.policy-hero h2, .policy-hero h1.page-title{ color:var(--color-cream); }
.policy{ max-width:760px; margin:0 auto; }
.policy p, .policy li{ color:var(--color-ink-soft); line-height:1.75; }
.policy p{ margin-bottom:1rem; }
.policy h3{ font-size:1.5rem; margin:2.2rem 0 .8rem; }
.policy ul{ list-style:disc; padding-left:1.3rem; margin-bottom:1rem; }
.policy li{ margin-bottom:.6rem; }
.policy a{ color:var(--color-accent); text-decoration:underline; text-underline-offset:2px; }
.policy strong{ color:var(--color-ink); font-weight:600; }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 980px){
  /* full-width dropdown panel below the header, matched to the
     reference's mobile menu — large serif links, not a side drawer */
  .nav{
    position:fixed; inset:0 0 0 0; top:0;
    background:var(--color-bg); border-top:1px solid var(--color-line);
    flex-direction:column; align-items:flex-start;
    padding:5.5rem 1.5rem 2rem; gap:1.2rem;
    overflow-y:auto;
    transform:translateY(-100%); transition:transform .4s var(--ease);
    z-index:99; width:auto; height:100vh;
  }
  .nav.is-open{ transform:translateY(0); }
  .nav a{ color:var(--color-ink) !important; font-family:var(--font-display); font-weight:300; font-size:1.9rem; letter-spacing:0; text-transform:none; }
  .nav-toggle{ display:flex; }
  .header-actions .btn--primary{ display:none; }

  .section-head-split, .about, .franchise-form, .contact-wrap, .reviews-wrap, .partner-split{ grid-template-columns:1fr; }
  .dark-card{ grid-template-columns:1fr; text-align:center; }
  .dark-card .tag-row, .dark-card .hero-cta{ justify-content:center; }
  .dark-card p{ margin-left:auto; margin-right:auto; }
  .standards-grid{ grid-template-columns:repeat(2,1fr); gap:1.5rem; }
  .franchise-services-grid, .why-grid{ grid-template-columns:repeat(2,1fr); gap:1.5rem; }
  .receive-rail{ grid-template-columns:1fr; gap:2.5rem; }
  .receive-rail::before{ display:none; }
  .partner-cert-grid{ grid-template-columns:1fr; }
  .highlights .container{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-item:nth-child(1){ grid-column:span 2; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }

  .filmstrip{ flex-direction:column; height:auto; }
  .filmstrip-panel{ flex:0 0 84px; height:84px; }
  .filmstrip-panel.is-active{ flex:0 0 480px; height:480px; }
  .filmstrip-label{ writing-mode:horizontal-tb; top:50%; transform:translate(-50%,-50%); }
  .filmstrip-num{ display:none; }
  .filmstrip-panel.is-active .filmstrip-num{ display:block; }

  .hero-content{ padding-bottom:clamp(9rem,22vw,12rem); }

  /* mega-menu: no hover on touch, so "Services" becomes a tap-to-expand
     disclosure inline in the mobile nav drawer instead of a hover flyout —
     main.js toggles .is-open on .nav-item via the .mega-trigger link.
     .nav's align-items:flex-start makes every flex child (incl. .nav-item)
     shrink-fit its own content width instead of filling the drawer — .mega's
     own width:100% was resolving against that narrow shrink-fit width
     (~176px, just "Services ▾"'s text width), not the drawer, squeezing
     all 7 categories into one cramped, badly-wrapping column. align-self
     opts this one item out of the shrink-fit sizing so .mega actually gets
     the full drawer width to lay out in. */
  .nav-item{ align-self:stretch; }
  .mega{
    position:static; transform:none; opacity:1; visibility:visible;
    width:100%; background:none; box-shadow:none; padding:0; border-radius:0;
    grid-template-columns:1fr; gap:1.5rem;
    max-height:0; overflow:hidden; margin-top:0;
    transition:max-height .35s var(--ease), margin-top .35s var(--ease), padding .35s var(--ease);
  }
  /* generous ceiling, not a tuned value (7 categories now, not 4 — a
     value tuned to fit exactly would need re-tuning every time a
     category/item is added) */
  .nav-item.is-open .mega{ max-height:3000px; margin-top:1.2rem; padding:10px; }
  .mega-col a{ font-size:1rem; }

  .review-grid{ grid-template-columns:1fr; }
}
/* Desktop windows short enough (~600px tall or less — a maximized browser
   on a small laptop screen, or a small resized window) that shrinking the
   heading via min(vw,vh) alone still isn't enough room: drop the subtext
   and tighten the remaining spacing instead of continuing to shrink text. */
@media (min-width: 981px) and (max-height: 600px){
  .hero-sub{ display:none; }
  .hero-cta{ margin-top:clamp(1rem,3vh,1.75rem); }
  .hero-content{ padding-bottom:clamp(3rem,6vh,6.5rem); }
}
@media (max-width: 620px){
  .standards-grid{ grid-template-columns:1fr; }
  /* Gift Cards — How It Works: the first card sits noticeably tighter under
     the section heading than the row-gap between cards once stacked to a
     single column. Only relevant here — a multi-column grid keeps every
     first-row card aligned, so this can't be a global .standard-card rule. */
  #gift-how .standard-card:first-child{ margin-top:var(--gap); }
  .franchise-services-grid, .why-grid{ grid-template-columns:1fr; }
  .treatment-item-body-inner{ grid-template-columns:1fr; gap:1.5rem; }
  .gallery-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:140px; }
  .footer-grid{ grid-template-columns:1fr; }
  /* stats-bar: flex-wrap turns this into a 2x2 grid on phones, but the
     divider (a plain border-left, meant for one row of 4) leaves a
     stray vertical line floating before item 3 and no line between the
     rows. Make the wrap intentional: a real 2x2 grid with a clean "+"
     divider instead of a broken one. */
  .stats-bar .container{ display:grid; grid-template-columns:1fr 1fr; row-gap:1.75rem; }
  .stats-bar-item{ border-left:0; padding:0 1rem; }
  .stats-bar-item:nth-child(odd){ border-right:1px solid var(--color-line); }
  .stats-bar-item:nth-child(-n+2){ padding-bottom:1.75rem; border-bottom:1px solid var(--color-line); }
  .intro-pill{ flex-basis:calc(50% - .5rem); }
  .explorer-meta{ flex-direction:column; align-items:flex-start; gap:.3rem; }
  /* long franchise-page CTA labels ("Request the Franchise Information
     Package") don't fit on one line at phone widths — .btn is nowrap
     by default for short desktop labels, so let it wrap here instead
     of silently overflowing the dark-card's overflow:hidden edge */
  .btn{ white-space:normal; text-align:center; }
}

/* =========================== MONTHLY PROMOS POPUP ===========================
   Mirrors the promo popup on the client's current site (liorealounge.ca),
   shown once per browser session when the Services section scrolls into
   view. Update the eyebrow month + list each month — see README. */
.promo-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:1.25rem;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.promo-modal.is-open{ opacity:1; pointer-events:auto; }
.promo-modal-backdrop{ position:absolute; inset:0; background:rgba(23,23,21,.6); }
.promo-modal-card{
  position:relative; z-index:1; width:100%; max-width:420px; max-height:88vh; overflow-y:auto;
  background:var(--color-cream); border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  padding:clamp(2rem,5vw,2.75rem) clamp(1.5rem,5vw,2.25rem) clamp(1.75rem,5vw,2.25rem);
  transform:translateY(12px) scale(.98); transition:transform .3s var(--ease);
}
.promo-modal.is-open .promo-modal-card{ transform:translateY(0) scale(1); }
.promo-modal-card h3{ font-size:1.6rem; margin-top:.3rem; }
.promo-modal-close{
  position:absolute; top:1rem; right:1rem; width:32px; height:32px; border-radius:50%; border:1px solid var(--color-line);
  background:transparent; color:var(--color-ink-soft); font-size:1.2rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.promo-modal-close:hover{ background:var(--color-ink); color:var(--color-cream); border-color:var(--color-ink); }
.promo-modal-list{ margin:1.5rem 0 1.75rem; display:flex; flex-direction:column; }
.promo-modal-list li{ display:flex; justify-content:space-between; gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--color-line); font-size:.88rem; }
.promo-modal-list li:last-child{ border-bottom:0; }
.promo-modal-list li span:first-child{ color:var(--color-ink); }
.promo-modal-list li span:last-child{ color:var(--color-accent); font-weight:600; white-space:nowrap; }
.promo-modal-card .btn{ width:100%; justify-content:center; }