/* Category visual-identity system — one shared mechanism (.theme-layer inside a
   [data-category-theme] banner), five distinct material languages. Loaded only on
   treatments.php category/detail pages via $extraHead, not sitewide.

   Deliberately NOT more glassmorphism (already used elsewhere this session) — each identity
   has its own real visual vocabulary: light/beam, fluid gradient, point-field, organic blob,
   energy-grid. All animation is `aria-hidden`, sits behind real content/photos (never affects
   layout — position:absolute, non-participating), and has a static, honest
   prefers-reduced-motion fallback rather than being removed outright. */

/* Asymmetric split composition instead of a full-bleed photo with an invisible tint behind
   it: the theme identity owns the left ~44% (fully visible, where the oversized type sits),
   the real photo is clipped into the right ~62% with a soft feathered edge where the two meet.
   "Current imagery can remain" — it's still the same real photo, just composed asymmetrically
   instead of full-bleed, which is also the "sophisticated asymmetric layout" the brief asked for. */
.treatment-banner--themed { position: relative; background: #14100d; }
.theme-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.treatment-banner--themed img {
  position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 30% 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 42%);
}
@media (max-width: 640px) {
  .treatment-banner--themed img { clip-path: polygon(0 34%, 100% 22%, 100% 100%, 0 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 14%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, transparent 14%, #000 34%); }
}
.treatment-banner--themed .treatment-banner-scrim { z-index: 2; background: linear-gradient(90deg, rgba(20,16,13,0.55) 0%, rgba(20,16,13,0.15) 40%, transparent 55%), linear-gradient(to top, rgba(20,16,13,0.75), transparent 60%); }
.treatment-banner--themed .treatment-banner-content { z-index: 3; max-width: 60%; }
@media (max-width: 640px) { .treatment-banner--themed .treatment-banner-content { max-width: 100%; } .treatment-banner--themed .treatment-banner-scrim { background: linear-gradient(to top, rgba(20,16,13,0.85), rgba(20,16,13,0.2) 55%, transparent 70%); } }

/* Oversized editorial type treatment for the category/service name in themed banners. */
.banner-h1-xl { font-size: clamp(2.4rem, 6vw, 4.4rem) !important; letter-spacing: -0.03em !important; line-height: 0.98 !important; }

/* Treatment facts strip — real per-service numbers (session length, benefit count, concerns
   addressed) as a count-up visual moment, distinct from the plain paragraph/list treatment
   used for the description and benefits below it. Numbers animate via [data-count-to] in
   site.js; this is pure presentation, the values themselves come straight from the DB. */
.treatment-facts { display: flex; margin: 40px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.treatment-fact { flex: 1; text-align: center; padding: 28px 12px; position: relative; }
.treatment-fact + .treatment-fact::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 56%; background: var(--hairline); }
.treatment-fact-num { display: block; font-family: var(--font-serif); font-size: clamp(2.1rem, 5vw, 3.1rem); font-weight: 600; color: var(--charcoal); line-height: 1; }
.treatment-fact-label { display: block; margin-top: 8px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--graphite); }
@media (max-width: 640px) { .treatment-fact { padding: 18px 6px; } .treatment-fact-num { font-size: 1.8rem; } .treatment-fact-label { font-size: 0.62rem; } }

/* ============================== LASER HAIR REMOVAL — precise light/beam ============================== */
.theme-laser { background: linear-gradient(120deg, #0d1210 0%, #16201c 60%, #0d1210 100%); }
.theme-laser::before {
  content: ''; position: absolute; inset: -20% -10%;
  background: linear-gradient(100deg, transparent 42%, rgba(180, 220, 255, 0.22) 48%, rgba(255,255,255,0.5) 50%, rgba(180, 220, 255, 0.22) 52%, transparent 58%);
  animation: laserSweep 5s ease-in-out infinite;
}
.theme-laser::after {
  content: ''; position: absolute; left: 0; right: 0; top: 30%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,220,255,0.5), transparent);
  box-shadow: 0 60px 0 -0.5px rgba(180,220,255,0.3), 0 -80px 0 -0.5px rgba(180,220,255,0.2);
  animation: laserScan 3.4s ease-in-out infinite alternate;
}
@keyframes laserSweep { 0%, 100% { transform: translateX(-8%); } 50% { transform: translateX(8%); } }
@keyframes laserScan { from { opacity: 0.3; transform: translateY(0); } to { opacity: 0.9; transform: translateY(40px); } }

/* ============================== FACIALS — fluid, luminous glass-skin ============================== */
.theme-facials { background: linear-gradient(135deg, #1c1512 0%, #2e1f1a 100%); }
.theme-facials::before {
  content: ''; position: absolute; width: 75%; height: 150%; top: -25%; left: -15%;
  background: radial-gradient(circle at 40% 40%, rgba(255,240,220,0.6), rgba(255,220,190,0.25) 40%, transparent 68%);
  filter: blur(24px);
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  animation: facialsMorph 9s ease-in-out infinite;
}
.theme-facials::after {
  content: ''; position: absolute; width: 60%; height: 130%; bottom: -20%; right: -15%;
  background: radial-gradient(circle at 60% 60%, rgba(230,190,140,0.5), transparent 62%);
  filter: blur(28px);
  border-radius: 55% 45% 40% 60% / 45% 55% 50% 50%;
  animation: facialsMorph 11s ease-in-out infinite reverse;
}
@keyframes facialsMorph {
  0%, 100% { border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; transform: scale(1) translate(0,0); }
  50% { border-radius: 55% 45% 40% 60% / 45% 55% 50% 50%; transform: scale(1.12) translate(3%, -2%); }
}

/* ============================== MICRONEEDLING — micro-particle / point field ============================== */
.theme-microneedling { background: linear-gradient(135deg, #16181c 0%, #20232a 100%); }
.point-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ============================== BIO-ALGAE PEEL — organic botanical ============================== */
.theme-bioalgae { background: linear-gradient(135deg, #172018 0%, #1f2a20 100%); }
.blob-svg { position: absolute; width: 90%; height: 90%; top: 5%; left: 5%; opacity: 0.4; }
.blob-path { fill: #6b8f5f; transition: d 0.4s ease; }
@supports (d: path("M0 0")) {
  .blob-path { animation: blobMorph 12s ease-in-out infinite; }
}
@keyframes blobMorph {
  0%, 100% { d: path("M47.7,-58.5C60.5,-48.5,68.7,-32.7,71.6,-16.2C74.5,0.3,72.1,17.5,64.2,32.1C56.3,46.7,42.9,58.7,27.5,65.2C12.1,71.7,-5.3,72.7,-21.6,68.1C-37.9,63.5,-53.1,53.3,-62.5,39.1C-71.9,24.9,-75.5,6.7,-72.4,-10.1C-69.3,-26.9,-59.5,-42.3,-46.1,-52.4C-32.7,-62.5,-16.4,-67.3,0.6,-68C17.6,-68.7,34.9,-68.5,47.7,-58.5Z"); }
  50% { d: path("M38.6,-49.9C51.5,-42.1,64.4,-32.8,69.9,-19.6C75.4,-6.4,73.5,10.7,65.8,24.6C58.1,38.5,44.6,49.2,29.9,56.4C15.2,63.6,-0.7,67.3,-16.4,64.6C-32.1,61.9,-47.6,52.8,-58.1,39.5C-68.6,26.2,-74.1,8.7,-72.3,-8.1C-70.5,-24.9,-61.4,-41,-48.2,-49C-35,-57,-17.5,-56.9,-1.8,-54.4C13.9,-51.9,25.7,-57.7,38.6,-49.9Z"); }
}

/* ============================== ADVANCED SKIN TREATMENTS — futuristic energy/light ============================== */
.theme-advanced { background: linear-gradient(135deg, #0f1418 0%, #171e24 100%); }
.theme-advanced::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(160,200,220,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(160,200,220,0.08) 1px, transparent 1px);
  background-size: 36px 36px;
  animation: advancedGridDrift 14s linear infinite;
}
.theme-advanced::after {
  content: ''; position: absolute; inset: -30%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(120,190,220,0.25) 30deg, transparent 90deg, transparent 360deg);
  animation: advancedSweep 7s linear infinite;
}
@keyframes advancedGridDrift { from { background-position: 0 0, 0 0; } to { background-position: 36px 36px, 36px 36px; } }
@keyframes advancedSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Reduced motion: every theme keeps its identity as a static composition, just doesn't move. */
@media (prefers-reduced-motion: reduce) {
  .theme-laser::before, .theme-laser::after,
  .theme-facials::before, .theme-facials::after,
  .theme-advanced::before, .theme-advanced::after,
  .blob-path { animation: none !important; }
  .theme-laser::before { transform: translateX(0); opacity: 0.6; }
  .theme-laser::after { opacity: 0.5; }
  .theme-facials::before, .theme-facials::after { transform: none; }
}

/* ============================== Asymmetric service-list layout ============================== */
.card-grid--asymmetric { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.icon-service-card--wide { grid-column: span 2; }
@media (max-width: 640px) { .icon-service-card--wide { grid-column: span 1; } }

.benefit-item { opacity: 0; transform: translateX(-8px); transition: opacity 0.45s var(--ease-luxury), transform 0.45s var(--ease-luxury); }
.benefit-item.revealed { opacity: 1; transform: translateX(0); }

/* Process timeline "draw-in" — the static border-left becomes a progress line that fills as
   the section scrolls into view, reusing the journey-line-fill visual idea from the homepage. */
.process-timeline--draw { border-left-color: transparent; position: relative; }
.process-timeline--draw::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--hairline); }
.process-timeline-fill { position: absolute; left: -1px; top: 0; width: 1px; height: 0%; background: var(--champagne-dark); transition: height 1.1s var(--ease-luxury); }
@media (prefers-reduced-motion: reduce) { .process-timeline-fill { transition: none; } }

/* ============================== Treatment Universe — immersive full-bleed sections ==============================
   Replaces the old compact editorial-row list: each category is now a full-viewport-height,
   themed, asymmetric section instead of a link list — a genuine "explore" experience rather
   than a directory. Reuses the same 5 identities as category/detail banners so the whole site
   speaks one visual language, just at a much larger scale here. */
.universe-section { position: relative; display: flex; align-items: center; overflow: hidden; color: var(--ivory); padding: 72px 0; background: #14100d; }
/* The category's real photo, dimmed and softened, fills the section behind everything —
   the theme identity (light beams, point-field, etc.) sits on top of it via `screen` blend
   so the photo stays visible instead of being hidden under a solid gradient. */
.universe-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.universe-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: blur(2px) brightness(0.5) saturate(0.9); }
.universe-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,13,0.8) 0%, rgba(20,16,13,0.55) 45%, rgba(20,16,13,0.88) 100%); }
.universe-section .theme-layer { z-index: 1; mix-blend-mode: screen; opacity: 0.65; }
.universe-index {
  position: absolute; z-index: 2; right: 4%; bottom: -6%;
  font-family: var(--font-serif); font-weight: 500; font-size: min(18vw, 11rem); line-height: 1;
  color: rgba(250,247,242,0.06); pointer-events: none; user-select: none;
}
.universe-inner {
  position: relative; z-index: 3; width: 100%; max-width: var(--max-content); margin: 0 auto;
  padding: 0 24px; display: grid; gap: 56px; align-items: center;
}
@media (min-width: 900px) { .universe-inner { grid-template-columns: 0.85fr 1fr; gap: 64px; } }
.universe-section:nth-of-type(even) .universe-media { order: 2; }
/* A plain rounded rectangle, same as every other photo on the site (treatment banners,
   showcase cards) — the organic "blob" crop this used to have read as an odd, overly
   decorative one-off rather than a considered choice, and made the photo feel oversized
   next to the plainer text column beside it. */
.universe-media { position: relative; aspect-ratio: 4/3; max-width: 440px; margin: 0 auto; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-cinematic); }
@media (min-width: 900px) { .universe-media { max-width: none; } }
.universe-media a { display: block; width: 100%; height: 100%; }
.universe-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-luxury); }
.universe-media:hover img { transform: scale(1.05); }
.universe-h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); color: #fff; letter-spacing: -0.03em; line-height: 0.98; margin-top: 8px; }
.universe-desc { margin-top: 16px; max-width: 30rem; font-size: 1.02rem; color: rgba(250,247,242,0.78); }
.universe-services { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.universe-pill { font-size: 0.82rem; font-weight: 600; padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(250,247,242,0.25); color: rgba(250,247,242,0.9); transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
.universe-pill:hover { background: var(--champagne); border-color: var(--champagne); color: var(--charcoal); }
.universe-pill-price { margin-left: 8px; padding-left: 8px; border-left: 1px solid rgba(250,247,242,0.3); font-weight: 700; color: var(--champagne); }
.universe-pill:hover .universe-pill-price { color: var(--charcoal); border-left-color: rgba(43,40,37,0.3); }
@media (max-width: 899px) { .universe-section { padding: 56px 0; } .universe-index { font-size: 22vw; bottom: -4%; } }

/* Category page — same visual language as the homepage "What We Do" cards. */
.cat-heading { text-align:center; max-width:640px; margin:8px auto 0; }
.cat-heading h1 { font-family:var(--font-serif); font-weight:500; font-size:clamp(2rem,4.5vw,3rem); line-height:1.05; letter-spacing:-0.01em; color:var(--charcoal); margin:8px 0 12px; }
.cat-heading p:not(.eyebrow) { color:var(--graphite); }
.cat-grid { margin-top:40px; display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:640px) { .cat-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .cat-grid { grid-template-columns:repeat(4,1fr); } }
.cat-card { display:block; background:#fff; border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:0 0 22px; text-align:center; color:var(--charcoal); transition:border-color .3s ease, box-shadow .4s var(--ease-luxury), transform .4s var(--ease-luxury); }
.cat-card:hover { border-color:var(--champagne-dark); box-shadow:var(--shadow-card); transform:translateY(-3px); }
.cat-card-media { width:64px; height:64px; border-radius:50%; overflow:hidden; margin:28px auto 0; box-shadow:var(--shadow-card); background:#f4efe7; display:flex; align-items:center; justify-content:center; }
.cat-card-media img { width:100%; height:100%; object-fit:cover; }
.cat-card-icon { width:26px; height:26px; color:var(--champagne-dark); }
.cat-card h3 { font-family:var(--font-serif); font-weight:500; font-size:1.1rem; margin:16px 20px 0; }
.cat-card p { margin:10px 20px 0; font-size:0.88rem; color:var(--graphite); }
.cat-card-meta { margin:12px 20px 0; font-size:0.8rem; font-weight:600; color:var(--champagne-dark); }
.cat-card-link { display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:0.85rem; font-weight:600; color:var(--champagne-dark); }

.cat-card-info { display:block; color:inherit; }