html { scroll-padding-top: 80px; }
/* =====================================================
PEONELLA AESTHETICS — v4 DESIGN SYSTEM
Dual brand: Laser (deep teal) · Beauty (light teal)
Lora + Poppins · Embedded fonts
===================================================== */
@import url('fonts.css');
:root {
/* ── PRIMARY TEAL (core brand) ── */
--laser: #14A7A0;
--laser-deep: #0D7377;
--laser-mid: #5FD6CF;
--laser-lite: #E8F7F6;
--laser-glow: rgba(20,167,160,.15);
--laser-grad: linear-gradient(135deg, #0D7377, #14A7A0);
/* ── BEAUTY BRAND (distinct from laser) ── */
--beauty: #0ABAB5;
--beauty-mid: #4DCFCA;
--beauty-lite: #F0FBFB;
--beauty-deep: #087370;
--beauty-glow: rgba(10,186,181,.12);
/* ── BACKGROUND SYSTEM ── */
--cream: #F7F3EE;
--cream-deep: #EFE7DF;
--cream-border: #E2D8CF;
/* ── DARK SYSTEM ── */
--dark: #2B2B2B;
--dark-card: #3A3A3A;
--charcoal: #2B2B2B;
/* ── TEXT ── */
--ink: #2B2B2B;
--mid: #555555;
--muted: #9A9A9A;
--white: #FFFFFF;
/* ── ACCENT (sparingly — icons, highlights only) ── */
--accent: #E8BFA3;
/* ── LEGACY ALIASES (keep pages working) ── */
--sand: #E2D8CF;
--sand-lite: #EFE7DF;
/* ── TYPOGRAPHY ── */
--serif: 'Lora', 'Georgia', serif;
--sans: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
/* ── SPACING / RADIUS ── */
--r: 6px;
--rl: 14px;
--rx: 24px;
/* ── SHADOWS ── */
--sh1: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
--sh2: 0 4px 16px rgba(0,0,0,.08), 0 20px 48px rgba(0,0,0,.10);
--sh3: 0 8px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
--sh4: 0 24px 64px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
/* ── TRANSITION ── */
--t: .22s cubic-bezier(.4,0,.2,1);
}
/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* HYBRID: Poppins default, Lora for h1/h2 only */
body { padding-top: 68px; font-family: var(--sans); }
h1, h2 { font-family: var(--serif); font-weight: 600; }
html { scroll-behavior: smooth; overflow-x: hidden; }
* { box-sizing: border-box; }
body { overflow-x: hidden; font-family: var(--sans); font-weight: 400; background: var(--cream); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1,h2 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
h3,h4,h5 { font-family: var(--sans); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
/* ── LAYOUT ─────────────────────────────────────────── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.wrap-sm { max-width: 760px; margin: 0 auto; padding: 0 32px; }
/* ── BUTTONS ─────────────────────────────────────────── */
.btn { border-radius: 6px !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 32px; height: 52px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; border-radius: var(--r); transition: all var(--t); white-space: nowrap; }
.btn-laser { background: var(--laser); color: var(--white); }
.btn-laser:hover { background: var(--laser-mid); transform: translateY(-1px); box-shadow: var(--sh2); }
.btn-beauty { background: var(--beauty); color: var(--white); }
.btn-beauty:hover { background: var(--beauty-mid); transform: translateY(-1px); box-shadow: var(--sh2); }
.btn-primary { background: var(--laser); color: var(--white); box-shadow: 0 2px 12px rgba(13,115,119,.25); }
.btn-primary:hover { background: var(--laser-deep); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13,115,119,.35); }
.btn-outline { background: transparent; color: var(--laser); border: 1.5px solid var(--laser); }
.btn-outline:hover { background: var(--laser); color: var(--white); box-shadow: 0 4px 14px rgba(13,115,119,.2); }
.btn-outline-beauty { background: transparent; color: var(--beauty-deep); border: 1.5px solid var(--beauty); }
.btn-outline-beauty:hover { background: var(--beauty); color: var(--white); }
.btn-white { background: var(--white); color: var(--laser-deep); }
.btn-white:hover { background: var(--white); color: var(--laser); box-shadow: 0 6px 20px rgba(0,0,0,.15); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.2); }
.btn-ghost:hover { background: rgba(255,255,255,.15); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.btn-sand { background: var(--sand-lite); color: var(--ink); border: 1.5px solid var(--sand); }
.btn-sm { height: 42px; padding: 0 20px; font-size: 10px; }
.btn-lg { height: 60px; padding: 0 36px; font-size: 12px; }
.btn-full { width: 100%; }
/* ── WIREFRAME PLACEHOLDER ──────────────────────────── */
/* Grey Figma-style photo placeholder */
.ph {
background: #C8CDD4;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 10px; position: relative; overflow: hidden;
}
.ph::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(160deg, #D4D9E0 0%, #BFC5CC 100%);
}
.ph-inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ph-icon {
width: 48px; height: 48px;
background: rgba(255,255,255,.5);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
}
.ph-icon svg { opacity: .55; }
.ph-label {
font-family: var(--sans); font-size: 11px; font-weight: 500;
color: rgba(0,0,0,.35); letter-spacing: .04em;
background: rgba(255,255,255,.55); padding: 3px 10px; border-radius: 20px;
}
/* Sizes */
.ph-hero { height: 100%; min-height: 420px; }
.ph-card { height: 180px; }
.ph-card-lg { height: 220px; }
.ph-thumb { height: 140px; }
.ph-portrait { height: 320px; }
.ph-tall { height: 480px; }
/* Camera icon SVG (inline as data URI background — works offline) */
.ph-icon::after {
content: '';
display: block; width: 24px; height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='5' width='22' height='14' rx='2'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M8 5l2-4h4l2 4'/%3E%3C/svg%3E");
background-size: contain; background-repeat: no-repeat;
}
/* ── PROTOTYPE BANNER ────────────────────────────────── */
/* ── NAV ──────────────────────────────────────────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: rgba(255,255,255,.99); backdrop-filter: blur(24px); border-bottom: 1px solid var(--cream-deep); box-shadow: 0 2px 20px rgba(0,0,0,.06); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-logo { text-decoration: none; display: flex; align-items: center; gap: 10px; }
.nav-logo-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--laser); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-logo-icon span { font-family: var(--sans); font-size: 15px; color: #fff; font-weight: 600; letter-spacing: .05em; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.nav-logo-main { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--laser-deep); letter-spacing: .2em; text-transform: uppercase; }
.nav-logo-sub { font-family: var(--sans); font-weight: 300; font-size: 8px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.nav-links { display: flex; align-items: center; gap: 0; list-style: none; }
.nav-links > li > a { font-size: 11px; font-weight: 500; color: var(--mid); text-decoration: none; letter-spacing: .04em; transition: color var(--t); padding: 28px 16px; display: block; }
.nav-links > li > a:hover { color: var(--laser); }
/* Beauty nav items */
.nav-links > li.beauty-nav > a { color: var(--beauty-deep); }
.nav-links > li.beauty-nav > a:hover { color: var(--beauty); }
.nav-actions { display: flex; gap: 10px; }
/* NAV DROPDOWN */
.dd { position: relative; }
.dd > a::after { content: ''; }
.dd-menu { display: none; position: absolute; top: 100%; left: -12px; min-width: 220px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--rl); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12); padding: 8px; z-index: 250; }
.dd:hover .dd-menu { display: block; }
.dd-menu a { display: block; padding: 10px 14px; font-size: 12px; color: var(--ink); text-decoration: none; border-radius: var(--r); transition: background var(--t); letter-spacing: .01em; }
.dd-menu a:hover { background: var(--cream); }
.dd-menu .laser-link:hover { background: var(--laser-lite); color: var(--laser); }
.dd-menu .beauty-link:hover { background: var(--beauty-lite); color: var(--beauty-deep); }
.dd-menu .dd-secondary { font-size: 11px !important; color: var(--mid) !important; padding: 7px 14px !important; }
.dd-menu .dd-section-label { font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 10px 14px 4px; margin: 0; }
.dd-menu .dd-section-label:first-child { padding-top: 4px; }
.dd-menu .dd-secondary:hover { color: var(--ink) !important; background: var(--cream) !important; }
.dd-sep { border: none; border-top: 1px solid var(--cream-deep); margin: 6px 0; }
/* MOBILE */
.mobile-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--white); border-top: 1px solid var(--cream-deep); padding: 12px 16px; gap: 10px; box-shadow: 0 -8px 32px rgba(0,0,0,.1); }
.mobile-bar .btn { border-radius: 6px !important; flex: 1; height: 48px; font-size: 10px; }
/* ── PAGE NUMBER ──────────────────────────────────────── */
/* Large faded number top-left of page hero */
.page-num {
position: absolute;
top: 20px; left: 32px;
font-family: var(--serif); font-size: 120px; font-weight: 400;
line-height: 1; letter-spacing: -.04em;
color: rgba(255,255,255,.07);
pointer-events: none; user-select: none;
z-index: 1;
}
@media (max-width: 600px) { .page-num { font-size: 72px; top: 12px; } }
/* ── PAGE HERO ───────────────────────────────────────── */
.page-hero { padding: 72px 0 48px; position: relative; overflow: hidden; }
.page-hero.laser-hero { background: #0a0a0a; }
.page-hero.beauty-hero { background: #0a0a0a; }
.page-hero.neutral-hero { background: #0a0a0a; }
/* Marble texture — full image, slightly dimmed for elegance */
.page-hero-bg { position: absolute; inset: 0; z-index: 0; background: url('../images/hero-marble.jpg') center center / cover no-repeat; opacity: 0.85; pointer-events: none; }
/* Darkening overlay — heavier on the left where text sits, fades toward the right */
.page-hero-glow { position: absolute; z-index: 1; inset: 0; background: linear-gradient(100deg, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.35) 45%, rgba(10,10,10,0.15) 100%); pointer-events: none; }
.page-hero-inner { position: relative; z-index: 2; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,.35); margin-bottom: 10px; letter-spacing: .02em; }
.breadcrumb a { color: rgba(255,255,255,.35); text-decoration: none; transition: color var(--t); }
.breadcrumb a:hover { color: rgba(255,255,255,.65); }
.breadcrumb span { opacity: .4; }
.page-hero h1 { color: var(--white); font-size: clamp(32px,4.5vw,54px); margin-bottom: 14px; letter-spacing: -.02em; }
.page-hero p { font-size: 15px; color: rgba(255,255,255,.88); max-width: 560px; line-height: 1.65; }
/* ── SECTION HELPERS ─────────────────────────────────── */
/* Hairline section divider — drop between two sections to separate same-tone backgrounds */
.sec-divider { height: 1px; background: rgba(8,115,112,0.1); border: 0; margin: 0; }
.sec-divider-dark { height: 1px; background: rgba(255,255,255,0.06); border: 0; margin: 0; }
.section { padding: 24px 0; }
.section-sm { padding: 16px 0; }
.bg-white { background: var(--white); }
.bg-cream { background: var(--cream); }
.bg-cream-deep { background: var(--cream-deep); }
.bg-charcoal { background: var(--charcoal); }
.bg-laser { background: var(--laser); }
.bg-laser-lite { background: var(--laser-lite); }
.bg-beauty-lite { background: var(--beauty-lite); }
.bg-beauty { background: var(--beauty-deep); }
.sec-label { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sec-label-line { width: 32px; height: 1px; background: var(--laser-mid); flex-shrink: 0; }
.sec-label span { font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--laser-mid); }
.sec-label.beauty .sec-label-line { background: var(--beauty); }
.sec-label.beauty span { color: var(--beauty-deep); }
.sec-label.light .sec-label-line { background: rgba(255,255,255,.3); }
.sec-label.light span { color: rgba(255,255,255,.45); }
.sec-head { margin-bottom: 24px; }
.sec-head h2 { font-size: clamp(30px,4vw,48px); margin-bottom: 16px; color: var(--laser-deep); }
.sec-head.beauty h2 { color: var(--beauty-deep); }
.sec-head p { font-size: 15px; color: var(--mid); max-width: 480px; line-height: 1.75; }
.sec-head.center { text-align: center; }
.sec-head.center p { margin: 0 auto; }
.sec-head.light h2 { color: var(--white); }
.sec-head.light p { color: rgba(255,255,255,.6); }
/* ── GALLERY CARD ────────────────────────────────────── */
/* Shared between laser and beauty pages */
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.gallery-card { background: var(--white); border: 1px solid var(--cream-deep); border-radius: var(--rl); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: all .2s cubic-bezier(.4,0,.2,1); box-shadow: var(--sh1); }
.gallery-card:hover { transform: translateY(-3px); box-shadow: var(--sh3); }
.gallery-card.laser-card:hover { border-color: var(--laser-mid); }
.gallery-card.beauty-card:hover { border-color: var(--beauty); }
.gallery-card-img { aspect-ratio: 3/4; flex-shrink: 0; position: relative; overflow: hidden; }
.gallery-card-badge { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.9); border-radius: 20px; padding: 3px 10px; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--laser); }
.gallery-card.beauty-card .gallery-card-badge { color: var(--beauty-deep); }
.gallery-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.gallery-card-type { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--laser-mid); margin-bottom: 6px; }
.gallery-card.beauty-card .gallery-card-type { color: var(--beauty); }
.gallery-card-body h3 { font-size: 17px; color: var(--laser-deep); margin-bottom: 7px; }
.gallery-card.beauty-card h3 { color: var(--beauty-deep); }
.gallery-card-body p { font-size: 13px; color: var(--muted); line-height: 1.6; flex: 1; margin-bottom: 14px; }
.gallery-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; margin: 0 -20px -20px; background: var(--laser-lite); border-top: 1px solid var(--cream-deep); border-radius: 0 0 var(--rl) var(--rl); }
.gallery-card-price { font-family: var(--sans); font-size: 22px; color: var(--laser-deep); font-weight: 600; }
.gallery-card.beauty-card .gallery-card-price { color: var(--beauty-deep); }
.gallery-card-dur { font-size: 11px; color: var(--muted); }
.gallery-card-link { font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--laser-mid); }
.gallery-card.beauty-card .gallery-card-link { color: var(--beauty); }
/* Category headers on laser page */
.cat-header { display: flex; align-items: center; gap: 20px; margin: 56px 0 24px; padding-bottom: 16px; border-bottom: 2px solid var(--laser-lite); }
.cat-header h2 { font-size: 28px; color: var(--laser-deep); }
.cat-header .cat-count { font-size: 12px; color: var(--muted); }
.cat-header .cat-see-all { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--laser-mid); text-decoration: none; margin-left: auto; }
.cat-header .cat-see-all:hover { color: var(--laser); }
/* ── CONCERN / FYT TILES ─────────────────────────────── */
.fyt-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--cream-deep); border: 1px solid var(--cream-deep); border-radius: var(--rx); overflow: hidden; }
.fyt-tile { background: var(--white); padding: 32px 28px; text-decoration: none; display: block; transition: background var(--t); }
.fyt-tile:hover { background: var(--cream); }
.fyt-type { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; margin-bottom: 14px; display: inline-block; }
.fyt-type.laser-tag { background: var(--laser-lite); color: var(--laser); }
.fyt-type.beauty-tag { background: var(--beauty-lite); color: var(--beauty-deep); }
.fyt-tile h3 { font-size: 18px; margin-bottom: 8px; color: var(--laser-deep); }
.fyt-tile p { font-size: 13px; color: var(--mid); line-height: 1.65; margin-bottom: 16px; }
.fyt-arrow { font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--laser-mid); display: flex; align-items: center; gap: 6px; transition: gap var(--t); }
.fyt-tile:hover .fyt-arrow { gap: 10px; }
/* ── PRICING TABLE ───────────────────────────────────── */
.price-section-title { font-size: 22px; color: var(--laser-deep); margin: 52px 0 4px; display: flex; align-items: center; gap: 12px; }
.price-section-title::after { content: ''; flex: 1; height: 1px; background: var(--laser-lite); }
.price-section-sub { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.price-tbl { width: 100%; border-collapse: collapse; margin-bottom: 4px; border-radius: var(--r); overflow: hidden; }
.price-tbl thead tr { background: var(--laser); }
.price-tbl th { text-align: left; padding: 13px 16px; color: var(--white); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-family: var(--sans); }
.price-tbl th:not(:first-child) { text-align: right; }
.price-tbl tbody tr:nth-child(even) { background: rgba(224,244,244,.3); }
.price-tbl tbody tr:hover { background: var(--laser-lite); }
.price-tbl td { padding: 13px 16px; border-bottom: 1px solid rgba(224,244,244,.6); font-size: 13px; color: var(--mid); vertical-align: middle; }
.price-tbl td:first-child { color: var(--ink); font-size: 14px; }
.price-tbl td:not(:first-child) { text-align: right; font-family: var(--sans); font-size: 17px; color: var(--laser-deep); font-weight: 500; }
.price-tbl .best-val { background: var(--laser-lite) !important; }
.price-tbl .best-val td:not(:first-child) { font-weight: 600; }
.price-tbl .best-val td:last-child::after { content: ' ⭐'; font-size: 12px; }
.price-tbl .note-cell { font-size: 12px; color: var(--muted); font-family: var(--sans); font-style: italic; }
/* ── BOOKING CARD ────────────────────────────────────── */
.book-card { background: var(--white); border: 1px solid var(--cream-deep); border-radius: var(--rx); padding: 32px; box-shadow: var(--sh2); position: sticky; top: 88px; }
.book-card h3 { font-size: 26px; margin-bottom: 4px; color: var(--laser-deep); }
.book-card.beauty-book h3 { color: var(--beauty-deep); }
.book-card .sub { font-size: 12px; color: var(--muted); margin-bottom: 24px; display: block; }
/* ── £30 BOOKING FEE NOTE ─────────────────────────────── */
/* Used everywhere the consultation CTA appears */
.consult-note {
background: var(--laser-lite); border-radius: var(--r);
padding: 14px 16px; margin-top: 12px;
font-size: 12px; color: var(--laser-deep); line-height: 1.7; text-align: center;
border-left: 3px solid var(--laser-mid);
}
.consult-note strong { display: block; font-size: 14px; font-family: var(--sans); font-weight: 600; margin-bottom: 3px; }
.consult-note.beauty-note { background: var(--beauty-lite); color: var(--beauty-deep); border-left-color: var(--beauty); }
/* ── PRICING TIERS (booking widget) ──────────────────── */
.price-tiers { background: var(--white); border: 1px solid var(--cream-deep); border-radius: var(--rl); overflow: hidden; margin: 24px 0; }
.p-tier { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--cream-deep); transition: background var(--t); }
.p-tier:last-child { border-bottom: none; }
.p-tier:hover { background: var(--cream); }
.p-tier.best { background: var(--laser-lite); border-left: 3px solid var(--laser); }
.p-tier.best:hover { background: #c8e8e8; }
.p-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.p-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.p-badge { display: inline-block; background: var(--laser); color: var(--white); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; margin-top: 5px; }
.p-amount { font-family: var(--sans); font-size: 26px; color: var(--laser-deep); font-weight: 600; white-space: nowrap; }
.p-save { display: block; font-size: 11px; color: var(--laser-mid); font-family: var(--sans); }
/* ── CALLOUT BLOCKS ──────────────────────────────────── */
.callout { background: var(--laser-lite); border-radius: var(--rl); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; box-shadow: var(--sh1); border: 1px solid rgba(13,115,119,.15); }
.callout h3 { font-size: 20px; color: var(--laser-deep); margin-bottom: 6px; }
.callout p { font-size: 13px; color: var(--mid); }
.callout.beauty-callout { background: var(--beauty-lite); border-color: rgba(10,186,181,.2); }
.callout.beauty-callout h3 { color: var(--beauty-deep); }
.dark-callout { background: var(--laser); border-radius: var(--rl); padding: 40px 48px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.dark-callout h3 { font-size: 28px; color: var(--white); margin-bottom: 10px; }
.dark-callout p { font-size: 14px; color: rgba(255,255,255,.65); max-width: 480px; }
.dark-callout.beauty-dark { background: var(--beauty-deep); }
/* ── TABS ────────────────────────────────────────────── */
.tab-row { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--cream-deep); margin-bottom: 40px; overflow: visible; }
.tab-btn { padding: 14px 22px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; font-family: var(--sans); white-space: nowrap; transition: all var(--t); }
.tab-btn:hover { color: var(--laser); }
.tab-btn.on { color: var(--laser); border-bottom-color: var(--laser); }
.beauty-tabs .tab-btn:hover { color: var(--beauty-deep); }
.beauty-tabs .tab-btn.on { color: var(--beauty-deep); border-bottom-color: var(--beauty); }
/* ── FEATURES LIST ───────────────────────────────────── */
.feat-list { list-style: none; margin: 24px 0 32px; }
.feat-list li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--cream-deep); font-size: 14px; color: var(--mid); }
.feat-list li:last-child { border-bottom: none; }
.feat-check { width: 20px; height: 20px; flex-shrink: 0; background: var(--laser-lite); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--laser); margin-top: 1px; }
.feat-check.beauty { background: var(--beauty-lite); color: var(--beauty-deep); }
/* ── INFO LIST ───────────────────────────────────────── */
.info-list { list-style: none; }
.info-list li { display: flex; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--cream-deep); font-size: 14px; color: var(--mid); }
.info-list li:last-child { border-bottom: none; }
.info-list .k { font-weight: 500; color: var(--ink); min-width: 120px; flex-shrink: 0; }
/* ── FAQ ─────────────────────────────────────────────── */
details { border: 1px solid var(--cream-deep); border-radius: var(--r); margin-bottom: 8px; }
details summary { padding: 18px 20px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; transition: background var(--t); }
details summary:hover { background: var(--cream); }
details summary::after { content: '+'; font-size: 18px; color: var(--laser-mid); flex-shrink: 0; }
details[open] summary::after { content: '−'; }
details .faq-body { padding: 0 20px 20px; font-size: 14px; color: var(--mid); line-height: 1.75; }
/* ── SESSIONS BOX ────────────────────────────────────── */
.sessions-box { background: var(--laser-lite); border-radius: var(--rl); padding: 22px 24px; margin: 24px 0; border-left: 3px solid var(--laser); }
.sessions-box h4 { font-size: 13px; font-weight: 600; color: var(--laser-deep); font-family: var(--sans); margin-bottom: 6px; }
.sessions-box p { font-size: 13px; color: var(--mid); line-height: 1.7; }
/* ── REVIEW CARDS ────────────────────────────────────── */
.review-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.rev-card { user-select: none; -webkit-user-select: none; background: var(--white); border-radius: var(--rl); padding: 30px; border: 1px solid rgba(0,0,0,.05); }
.rev-card * { user-select: none; -webkit-user-select: none; }
.rev-stars { color: #c8a84b; font-size: 12px; letter-spacing: 2px; margin-bottom: 14px; }
.rev-text { font-family: var(--sans); font-size: 15px; font-style: normal; font-weight: 400; color: var(--ink); line-height: 1.75; margin-bottom: 22px; }
.rev-author { display: flex; align-items: center; gap: 12px; }
.rev-init { width: 38px; height: 38px; background: var(--laser-lite); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--laser); flex-shrink: 0; }
.rev-name { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.rev-detail { font-size: 11px; color: var(--muted); }
/* ── TEAM / ABOUT ────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 420px 1fr; gap: 80px; align-items: center; }
.about-vis { border-radius: var(--rx); overflow: hidden; }
.cred-list { list-style: none; margin: 24px 0 32px; }
.cred-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--cream-deep); font-size: 13px; color: var(--mid); }
.cred-list li:last-child { border-bottom: none; }
.cred-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--laser-mid); flex-shrink: 0; }
/* ── EMAIL CAPTURE ───────────────────────────────────── */
.email-inner { text-align: center; max-width: 520px; margin: 0 auto; }
.email-inner h2 { color: var(--white); margin-bottom: 14px; }
.email-inner > p { font-size: 15px; color: rgba(255,255,255,.45); margin-bottom: 32px; line-height: 1.7; }
.email-form { display: flex; gap: 10px; margin-bottom: 14px; }
.email-form input { flex: 1; height: 52px; padding: 0 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r); color: var(--white); font-family: var(--sans); font-size: 14px; outline: none; transition: border-color var(--t); }
.email-form input::placeholder { color: rgba(255,255,255,.25); }
.email-form input:focus { border-color: rgba(255,255,255,.35); }
.email-fine { font-size: 11px; color: rgba(255,255,255,.25); }
/* ── FOOTER ──────────────────────────────────────────── */
.footer { background: var(--charcoal); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 280px 1fr 1fr 1fr; gap: 56px; margin-bottom: 48px; }
.footer-logo { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--white); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; display: flex; flex-direction: column; line-height: 1.2; margin-bottom: 14px; }
.footer-logo em { font-style: italic; font-weight: 300; font-size: 11px; letter-spacing: .22em; color: var(--laser-mid); }
.footer-brand p { font-size: 12px; color: rgba(255,255,255,.3); line-height: 1.8; }
.footer-addr { font-size: 11px; color: rgba(255,255,255,.25); margin-top: 12px; line-height: 1.8; }
.footer-col h4 { font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 16px; font-family: var(--sans); }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 9px; }
.footer-col ul a { font-size: 12px; color: rgba(255,255,255,.45); text-decoration: none; transition: color var(--t); }
.footer-col ul a:hover { color: var(--white); }
.footer-col ul a.laser-link:hover { color: var(--laser-mid); }
.footer-col ul a.beauty-link:hover { color: var(--beauty-mid); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.35); text-align: center; line-height: 1.6; }
.footer-bottom .fb-clinic { color: rgba(255,255,255,.55); }
.footer-bottom .fb-legal, .footer-bottom .fb-tech { color: rgba(255,255,255,.35); }
@media (max-width: 700px) {
.footer-bottom { font-size: 11px; padding-top: 18px; }
}
/* ── FRESHA HANDOFF PAGE ─────────────────────────────── */
.fresha-transition-banner {
background: linear-gradient(135deg, var(--laser) 0%, var(--laser-mid) 100%);
border-radius: var(--rl); padding: 28px 32px;
display: flex; align-items: center; gap: 20px;
margin-bottom: 32px;
}
.fresha-transition-icon {
width: 52px; height: 52px; flex-shrink: 0;
background: rgba(255,255,255,.15); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
}
.fresha-transition-text h3 { font-size: 18px; color: var(--white); margin-bottom: 5px; }
.fresha-transition-text p { font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.6; }
.fresha-mock-frame {
border: 2px dashed var(--cream-deep);
border-radius: var(--rx); overflow: hidden;
position: relative;
}
.fresha-mock-label {
position: absolute; top: 0; left: 0; right: 0;
background: repeating-linear-gradient(45deg, #f0c040, #f0c040 10px, #2C1810 10px, #2C1810 20px);
height: 6px;
z-index: 10;
}
.fresha-mock-topbar {
background: var(--white); border-bottom: 1px solid var(--cream-deep);
padding: 12px 20px 12px; display: flex; align-items: center; gap: 12px;
margin-top: 6px;
}
.fresha-mock-url {
flex: 1; background: var(--cream); border: 1px solid var(--cream-deep);
border-radius: 20px; padding: 7px 16px; font-size: 12px; color: var(--mid);
display: flex; align-items: center; gap: 8px;
}
.fresha-mock-url::before { content: '🔒'; font-size: 11px; }
.fresha-logo-badge {
font-size: 13px; font-weight: 700; color: #00b398;
letter-spacing: -.02em;
}
/* ── PACKAGE ROWS ────────────────────────────────────── */
.pkg-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); text-decoration: none; transition: all var(--t); }
.pkg-row:hover { background: rgba(255,255,255,.11); transform: translateX(3px); }
.pkg-row.featured-row { background: var(--white); border-color: var(--white); }
.pkg-row.featured-row .pkg-row-name { color: var(--laser-deep); }
.pkg-row.featured-row .pkg-row-price { color: var(--laser-deep); }
.pkg-row.featured-row .pkg-row-desc { color: var(--mid); }
.pkg-row-info { flex: 1; }
.pkg-row-name { font-size: 15px; color: var(--white); font-family: var(--sans); font-weight: 500; margin-bottom: 3px; }
.pkg-row-desc { font-size: 11px; color: rgba(255,255,255,.4); line-height: 1.5; }
.pkg-row-price { font-family: var(--sans); font-size: 22px; color: var(--white); font-weight: 600; white-space: nowrap; }
.pkg-row-badge { font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--laser-lite); color: var(--laser-deep); padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
/* ── DIVIDER ─────────────────────────────────────────── */
hr.div { border: none; border-top: 1px solid var(--cream-deep); margin: 48px 0; }
/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1100px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.about-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 900px) {
.gallery-grid { grid-template-columns: repeat(2,1fr); }
.review-grid { grid-template-columns: 1fr; }
.fyt-grid { grid-template-columns: repeat(2,1fr); }
.nav-links { display: none; }
.nav-actions .btn-outline { display: none; }
.mobile-bar { display: flex; }
body { padding-bottom: 76px; }
.dark-callout { flex-direction: column; gap: 24px; padding: 28px 24px; }
}
@media (max-width: 600px) {
.wrap { padding: 0 20px; }
.gallery-grid { grid-template-columns: 1fr; }
.fyt-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.email-form { flex-direction: column; }
.page-num { font-size: 64px; }
}
/* ── TREATMENT IMAGES (real photos via Unsplash CDN) ─── */
.treat-img {
width: 100%; height: 100%; object-fit: cover;
display: block; position: absolute; inset: 0;
transition: transform .4s ease;
}
.gallery-card:hover .treat-img { transform: scale(1.04); }
.gallery-card-img { position: relative; }
/* Fallback ph shown only when img fails */
.gallery-card-img .ph {
position: absolute; inset: 0; z-index: 1;
}
.gallery-card-img img.loaded + .ph { display: none; }
/* ── LOGO text fix ─────────────────────────────────────── */
/* ensure nav logo subtitle is readable on cream bg */
.nav-logo em { color: var(--laser-mid) !important; }
/* ── FIX: white text on light laser-lite backgrounds ─── */
.page-hero.laser-hero .page-num { color: rgba(255,255,255,.06); }
/* Ensure proper contrast on page hero variants */
.page-hero h1, .page-hero p, .page-hero .breadcrumb,
.page-hero .breadcrumb a { /* already white - fine */ }
/* Fix light-background section headings that were inheriting white */
.sec-head h2 { color: var(--laser-deep); }
.sec-head.beauty h2 { color: var(--beauty-deep); }
/* ── PACKAGES page fix ─────────────────────────────────── */
.pkg-detail-grid { display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: start; }
/* ── SKIN CONCERNS page ────────────────────────────────── */
.concern-full-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.concern-full-card {
background: var(--white);
border: 1px solid var(--cream-deep);
border-radius: var(--rl);
overflow: hidden;
text-decoration: none;
display: flex;
transition: all var(--t);
}
.concern-full-card:hover { border-color: var(--laser-mid); transform: translateY(-2px); box-shadow: var(--sh2); }
.concern-full-card.beauty-concern { }
.concern-full-card.beauty-concern:hover { border-color: var(--beauty); }
.concern-card-img { width: 180px; flex-shrink: 0; position: relative; overflow: hidden; }
.concern-card-img img { width: 100%; height: 100%; object-fit: cover; }
.concern-card-body { padding: 24px; flex: 1; }
.concern-card-body .concern-type { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; display: inline-block; padding: 3px 9px; border-radius: 20px; }
.concern-card-body h3 { font-size: 20px; color: var(--laser-deep); margin-bottom: 8px; }
.concern-card-body.beauty-body h3 { color: var(--beauty-deep); }
.concern-card-body p { font-size: 13px; color: var(--mid); line-height: 1.65; margin-bottom: 14px; }
.concern-arrow { font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--laser-mid); display: flex; align-items: center; gap: 6px; }
.concern-full-card.beauty-concern .concern-arrow { color: var(--beauty); }
@media (max-width: 800px) {
.concern-full-grid { grid-template-columns: 1fr; }
.pkg-detail-grid { grid-template-columns: 1fr; }
}
/* ── INDEX.HTML supplementary classes ─────────────────── */
/* Logo splash */
.logo-splash{display:none}
.logo-mark{width:64px;height:64px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:32px;color:var(--white);font-weight:600;margin-bottom:2px}
.logo-name{font-family:var(--sans);font-size:clamp(26px,5vw,48px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--white);line-height:1}
.logo-tag{font-family:var(--sans);font-size:clamp(12px,2vw,16px);font-weight:300;letter-spacing:.22em;color:var(--laser-mid)}
.logo-div{width:40px;height:1px;background:rgba(255,255,255,.18);margin:4px 0}
.logo-creds{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.35);text-transform:uppercase}
.logo-sep{opacity:.3}
/* Site nav (new naming) */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(248,244,238,.96);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.07)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-btns{display:flex;gap:8px}
.has-dd{position:relative}
.has-dd .dd{display:none;position:absolute;top:100%;left:-12px;min-width:210px;background:var(--white);border:1px solid var(--cream-deep);border-radius:var(--rl);box-shadow:var(--sh2);padding:8px;z-index:250}
.has-dd:hover .dd{display:block}
.has-dd .dd a{display:block;padding:9px 13px;font-size:12px;color:var(--ink);text-decoration:none;border-radius:var(--r);transition:background var(--t)}
.has-dd .dd a:hover{background:var(--laser-lite);color:var(--laser)}
.beauty-item .dd a:hover{background:var(--beauty-lite);color:var(--beauty-deep)}
.has-dd .dd hr{border:none;border-top:1px solid var(--cream-deep);margin:5px 0}
.beauty-item>a{color:var(--beauty-deep)!important}
/* Mobile bar (new) */
.mob-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--white);border-top:1px solid var(--cream-deep);padding:10px 16px;gap:8px;box-shadow:0 -6px 24px rgba(0,0,0,.09)}
.mob-bar .btn{flex:1;height:48px;font-size:10px}
/* Buttons (new short names) */
.btn-pr{background:var(--laser);color:var(--white)}
.btn-pr:hover{background:var(--laser-mid);transform:translateY(-1px);box-shadow:var(--sh2)}
.btn-ol{background:transparent;color:var(--laser);border:1.5px solid var(--laser)}
.btn-ol:hover{background:var(--laser);color:var(--white);transform:translateY(-2px);box-shadow:0 6px 20px rgba(13,115,119,.35)}
.btn-wh{background:var(--white);color:var(--laser-deep)}
.btn-wh:hover{background:var(--white);color:var(--laser);box-shadow:0 6px 20px rgba(0,0,0,.15);transform:translateY(-2px)}
.btn-gh{background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.25)}
.btn-gh:hover{background:rgba(255,255,255,.12)}
/* Explore cards (homepage hero) */
.explore-grid{display:grid;grid-template-columns:1fr 1fr}
.exp-card{position:relative;overflow:hidden;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;padding:36px 44px;text-decoration:none}
.lsr{background:var(--dark)}
.bty{background:var(--dark)}
.exp-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .4s,transform .4s}
.exp-card:hover .exp-photo{opacity:.45;transform:scale(1.03)}
.exp-card::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 65%);z-index:1}
.exp-body{position:relative;z-index:2}
.exp-eye{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px}
.exp-card h2{font-size:clamp(28px,3.5vw,42px);color:var(--white);margin-bottom:10px;line-height:1.08}
.exp-card h2 em{font-style:italic;font-weight:300}
.exp-desc{font-size:13px;color:rgba(255,255,255,.68);line-height:1.65;max-width:340px;margin-bottom:20px}
.exp-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.exp-tag{font-size:10px;color:rgba(255,255,255,.5);padding:3px 9px;border:1px solid rgba(255,255,255,.18);border-radius:20px}
.exp-btn{display:inline-flex;align-items:center;height:42px;padding:0 20px;background:var(--white);border-radius:4px;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:all .2s}
.lsr .exp-btn{color:var(--laser-deep)}
.bty .exp-btn{color:var(--beauty-deep)}
.exp-btn:hover{background:var(--cream);transform:translateY(-1px)}
/* Home intro */
.home-intro{background:var(--dark);padding:48px 0 48px;text-align:center}
.priv-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--mid);background:var(--white);border:1px solid var(--cream-deep);border-radius:20px;padding:5px 14px;margin-bottom:28px}
.home-h1{font-size:clamp(38px,5vw,60px);color:var(--laser-deep);margin-bottom:14px;line-height:1.08}
.home-h1 em{font-style:italic;font-weight:300;color:var(--laser-mid)}
.home-p{font-size:14px;color:var(--muted);line-height:1.75;margin-bottom:0;max-width:560px;margin-left:auto;margin-right:auto}
.home-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:52px}
/* Section tag (new) */
.sec-tag{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sec-tag-line{width:28px;height:1px;background:var(--dark);flex-shrink:0}
.sec-tag span{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--laser-mid)}
.sec-tag.light .sec-tag-line{background:rgba(255,255,255,.3)}
.sec-tag.light span{color:rgba(255,255,255,.45)}
/* BG helpers (new) */
.bg-L{background:var(--laser)}
.bg-c2{background:var(--cream-deep)}
.bg-choc{background:var(--charcoal)}
/* Footer (new) */
.site-footer{background:var(--charcoal);padding:60px 0 24px}
.footer-cols{display:grid;grid-template-columns:280px 1fr 1fr 1fr;gap:52px;margin-bottom:44px}
.footer-addr{font-size:11px;color:rgba(255,255,255,.22);margin-top:10px;line-height:1.75}
.footer-addr span{color:rgba(255,255,255,.18)}
/* Rev grid (new) */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.explore-grid{grid-template-columns:1fr}.exp-card{min-height:360px;padding:28px}.mob-bar{display:flex}body{padding-bottom:72px}.rev-grid{grid-template-columns:1fr}}
@media(max-width:600px){.home-ctas{flex-direction:column;align-items:center}.footer-cols{grid-template-columns:1fr;gap:24px}}
/* ── Photo ID labels (remove this block when going live) ── */
.photo-wrap {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.photo-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-wrap::after {
content: attr(data-pid);
position: absolute;
top: 6px;
left: 6px;
background: rgba(0,0,0,.72);
color: #fff;
font-size: 10px;
font-family: monospace;
padding: 2px 6px;
border-radius: 3px;
pointer-events: none;
z-index: 10;
line-height: 1.4;
}
/* For position:absolute images (hero cards etc) */
.photo-abs-wrap {
position: absolute;
inset: 0;
}
.photo-abs-wrap::after {
content: attr(data-pid);
position: absolute;
top: 6px;
left: 6px;
background: rgba(0,0,0,.72);
color: #fff;
font-size: 10px;
font-family: monospace;
padding: 2px 6px;
border-radius: 3px;
pointer-events: none;
z-index: 10;
line-height: 1.4;
}
.photo-abs-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── TREATMENT SIDEBAR LAYOUT ── */
.treat-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 36px;
align-items: start;
padding: 0;
}
@media(max-width:800px){
.treat-layout { grid-template-columns: 1fr; }
.treat-sidebar { display: none; }
}
.treat-sidebar {
background: var(--white);
border: 1px solid var(--cream-deep);
border-radius: var(--rl);
padding: 20px;
position: sticky;
top: 80px;
}
.tsb-header {
display: flex; align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.tsb-title {
font-size: 15px; font-weight: 600;
color: var(--ink);
}
.tsb-clear {
font-size: 11px; color: var(--laser);
background: none; border: none;
cursor: pointer; text-decoration: underline;
padding: 0; display: none;
}
.tsb-group { margin-bottom: 8px; border-top: 1px solid var(--cream-deep); padding-top: 14px; }
.tsb-group-btn {
width: 100%; display: flex; align-items: center;
justify-content: space-between;
font-size: 13px; font-weight: 600; color: var(--ink);
background: none; border: none; cursor: pointer;
padding: 0 0 10px; text-align: left;
}
.tsb-chevron { font-size: 12px; transition: transform .2s; }
.tsb-group-btn.collapsed .tsb-chevron { transform: rotate(-90deg); }
.tsb-group-body { display: flex; flex-direction: column; gap: 8px; }
.tsb-group-body.hidden { display: none; }
.tsb-check {
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: var(--mid); cursor: pointer;
}
.tsb-check input[type=checkbox] {
width: 16px; height: 16px; accent-color: var(--laser);
cursor: pointer; flex-shrink: 0;
}
.tsb-check span:first-of-type { flex: 1; }
.tsb-count {
font-size: 11px; color: var(--muted);
background: var(--cream-deep); border-radius: 10px;
padding: 1px 7px;
}
/* Topbar */
.treat-topbar {
display: flex; align-items: center;
gap: 12px; flex-wrap: wrap;
margin-bottom: 20px; min-height: 28px;
}
.treat-count {
font-size: 13px; color: var(--muted);
}
.treat-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.treat-pill {
display: flex; align-items: center; gap: 5px;
background: var(--laser-lite); border: 1px solid rgba(13,115,119,.2);
border-radius: 20px; padding: 3px 10px;
font-size: 11px; font-weight: 600; color: var(--laser-deep);
text-transform: capitalize;
}
.treat-pill-x {
cursor: pointer; font-size: 13px; line-height: 1;
color: var(--laser); margin-left: 2px;
}
/* Pagination */
.treat-pagination {
display: flex; align-items: center;
justify-content: center; gap: 20px;
margin-top: 0; padding-top: 16px;
border-top: 1px solid var(--cream-deep);
}
.tpg-btn {
font-size: 13px; font-weight: 600;
color: var(--laser); background: none;
border: 1.5px solid var(--laser);
border-radius: var(--r); padding: 8px 20px;
cursor: pointer; transition: all .15s;
}
.tpg-btn:hover { background: var(--laser); color: #fff; }
.tpg-btn:disabled { opacity: .3; cursor: not-allowed; }
.tpg-btn:disabled:hover { background: none; color: var(--laser); }
.tpg-info {
font-size: 13px; color: var(--muted);
}
.treat-pagination-top {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--cream-deep);
border-top: none;
padding-top: 0;
margin-top: 0;
}
.gallery-card.beauty-card .gallery-card-footer { background: var(--beauty-lite, #fdf6f9); }
/* Bundle cards — prominent savings display (v246) */
.gallery-card.bundle-card {
position: relative;
border: 1.5px solid var(--laser-mid);
box-shadow: 0 2px 12px rgba(20, 167, 160, 0.08);
}
.gallery-card.bundle-card:hover {
border-color: var(--laser);
box-shadow: 0 4px 18px rgba(20, 167, 160, 0.15);
}
.gallery-card-badge.bundle-badge {
background: var(--laser);
color: #fff;
font-weight: 700;
letter-spacing: 0.1em;
padding: 6px 12px;
font-size: 11px;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.gallery-card-type.bundle-type {
color: var(--laser);
font-weight: 700;
letter-spacing: 0.14em;
}
.bundle-savings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
margin: 12px 0;
background: var(--laser-lite);
border-radius: 8px;
border-left: 3px solid var(--laser);
}
.bundle-price-line {
display: flex;
flex-direction: column;
gap: 2px;
}
.bundle-price {
font-family: var(--sans);
font-size: 22px;
font-weight: 600;
color: var(--laser-deep);
line-height: 1;
}
.bundle-strike {
font-size: 11px;
color: var(--muted);
text-decoration: line-through;
font-weight: 500;
}
.bundle-save-pill {
background: var(--laser-deep);
color: #fff;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
white-space: nowrap;
}
/* ============================================================
TEXTURE SYSTEM v250
Per the texture brief: textures should be FELT not seen.
Subtle overlays on top of solid colour bases.
Distribution: Plaster 45% / Paper 20% / Graphite 15% / Teal 12% / Marble 5% / Glass 3%
============================================================ */
/* 01 — Warm Clinical Plaster (the base wall) */
.tx-plaster {
position: relative;
background: var(--cream);
}
.tx-plaster::before {
content: '';
position: absolute; inset: 0;
background: url('../images/01_WARM_CLINICAL_PLASTER.png') center / cover no-repeat;
opacity: 0.40;
pointer-events: none;
z-index: 0;
}
.tx-plaster > * { position: relative; z-index: 1; }
/* 02 — Dark Graphite Brushed Charcoal */
.tx-graphite {
position: relative;
background: #2B2B2B;
}
.tx-graphite::before {
content: '';
position: absolute; inset: 0;
background: url('../images/02_DARK_GRAPHITE_BRUSHED_CHARCOAL.png') center / cover no-repeat;
opacity: 0.70;
pointer-events: none;
z-index: 0;
}
.tx-graphite > * { position: relative; z-index: 1; }
/* 03 — Mineral Teal Surface (premium teal panels) */
.tx-teal {
position: relative;
background: var(--beauty-deep);
}
.tx-teal::before {
content: '';
position: absolute; inset: 0;
background: url('../images/03_MINERAL_TEAL_SURFACE.png') center / cover no-repeat;
opacity: 0.35;
pointer-events: none;
z-index: 0;
}
.tx-teal > * { position: relative; z-index: 1; }
/* Variant: Laser teal */
.tx-teal-laser {
position: relative;
background: var(--laser-deep);
}
.tx-teal-laser::before {
content: '';
position: absolute; inset: 0;
background: url('../images/03_MINERAL_TEAL_SURFACE.png') center / cover no-repeat;
opacity: 0.35;
pointer-events: none;
z-index: 0;
}
.tx-teal-laser > * { position: relative; z-index: 1; }
/* 04 — Refined Dark Marble (rare, statement-only) */
.tx-marble {
position: relative;
background: #1a3f3e url('../images/04_REFINED_DARK_MARBLE.png') center / cover no-repeat;
}
.tx-marble::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(155deg, rgba(8, 115, 112, 0.55) 0%, rgba(10, 60, 58, 0.7) 100%);
pointer-events: none;
z-index: 0;
}
.tx-marble > * { position: relative; z-index: 1; }
/* 05 — Luxury Paper Soft Grain (information density) */
.tx-paper {
position: relative;
background: #FAFAF8;
}
.tx-paper::before {
content: '';
position: absolute; inset: 0;
background: url('../images/05_LUXURY_PAPER_SOFT_GRAIN.png') center / cover no-repeat;
opacity: 0.35;
pointer-events: none;
z-index: 0;
}
.tx-paper > * { position: relative; z-index: 1; }
/* 06 — Frosted Mineral Glass (overlays, modals) */
.tx-glass {
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.4);
}
.tx-glass-image {
position: relative;
}
.tx-glass-image::before {
content: '';
position: absolute; inset: 0;
background: url('../images/06_FROSTED_MINERAL_GLASS.png') center / cover no-repeat;
opacity: 0.12;
pointer-events: none;
z-index: 0;
}
.tx-glass-image > * { position: relative; z-index: 1; }
.tx-graphite-soft {
position: relative;
background: #3a3a3a;
}
.tx-graphite-soft::before {
content: '';
position: absolute; inset: 0;
background: url('../images/02_DARK_GRAPHITE_BRUSHED_CHARCOAL.png') center / cover no-repeat;
opacity: 0.85;
pointer-events: none;
z-index: 0;
}
.tx-graphite-soft > * { position: relative; z-index: 1; }
/* Text colour overrides inside dark sections */
.tx-graphite-soft h2 { color: #ffffff !important; }
.tx-graphite-soft p { color: rgba(255,255,255,0.78) !important; }
.tx-graphite-soft .sec-tag span { color: rgba(255,255,255,0.55) !important; }
.tx-graphite-soft .sec-tag-line { background: rgba(255,255,255,0.25) !important; }
.tx-graphite-soft .cat-header h2,
.tx-graphite-soft .cat-header { border-color: rgba(255,255,255,0.15) !important; }
.tx-graphite-soft .cat-header h2 { color: #fff !important; }
.tx-graphite-soft .cat-count { color: rgba(255,255,255,0.6) !important; }
/* Re-establish dark text inside white cards that live in dark sections (v280, extended v295) */
.tx-graphite-soft .rev-card p,
.tx-graphite-soft .rev-card .rev-name,
.tx-graphite-soft .rev-card .rev-detail,
.tx-graphite-soft .rev-card .rev-text { color: var(--ink) !important; }
.tx-graphite-soft .rev-card .rev-detail { color: var(--mid) !important; }
/* Gallery cards inside dark sections — body text must stay dark on white card bg */
.tx-graphite-soft .gallery-card:not(.premium-flagship) h3 { color: var(--laser-deep) !important; }
.tx-graphite-soft .gallery-card.beauty-card:not(.premium-flagship) h3 { color: var(--beauty-deep) !important; }
.tx-graphite-soft .gallery-card:not(.premium-flagship) p { color: var(--mid) !important; }
.tx-graphite-soft .gallery-card:not(.premium-flagship) .gallery-card-type { color: var(--mid) !important; }
.tx-graphite-soft .gallery-card:not(.premium-flagship) .gallery-card-dur { color: var(--mid) !important; }
/* Debug label */
/* tx-marble-section — Dark marble for full-section backgrounds (Programmes section etc) */
.tx-marble-section {
position: relative;
background: #1a1a1a url('../images/04_REFINED_DARK_MARBLE.png') center / cover no-repeat;
}
.tx-marble-section::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(155deg, rgba(8, 115, 112, 0.65) 0%, rgba(10, 50, 48, 0.8) 100%);
pointer-events: none;
z-index: 0;
}
.tx-marble-section > * { position: relative; z-index: 1; }
/* Text colour overrides inside marble sections */
.tx-marble-section h2 { color: #ffffff !important; }
.tx-marble-section p { color: rgba(255,255,255,0.78) !important; }
.tx-marble-section .sec-tag span { color: var(--accent) !important; }
.tx-marble-section .sec-tag-line { background: rgba(232,191,163,0.4) !important; }
.tx-marble-section .cat-header h2,
.tx-marble-section .cat-header { border-color: rgba(255,255,255,0.15) !important; }
.tx-marble-section .cat-count { color: rgba(255,255,255,0.6) !important; }
/* Debug label */
.page-hero.p01-logo-hero {
background: #2B2B2B url('../images/hero-marble.jpg') center / cover no-repeat;
padding: 88px 0 88px;
min-height: 520px;
display: flex;
align-items: center;
position: relative;
}
.page-hero.p01-logo-hero .page-hero-bg {
background:
linear-gradient(100deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.55) 35%, rgba(10,10,10,0.15) 60%, rgba(10,10,10,0) 100%),
linear-gradient(135deg, rgba(8, 115, 112, 0.35) 0%, rgba(10, 50, 48, 0.55) 100%);
opacity: 1;
z-index: 1;
}
.page-hero.p01-logo-hero .page-hero-glow { display: none; }
.page-hero.p01-logo-hero .page-hero-inner { position: relative; z-index: 2; width: 100%; }
.p01-hero-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 56px;
align-items: center;
}
.p01-hero-copy { max-width: 480px; }
.p01-hero-eyebrow {
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
margin-bottom: 16px;
font-weight: 500;
}
.page-hero.p01-logo-hero h1 {
font-family: var(--serif);
color: #fff;
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1.15;
letter-spacing: -.015em;
margin-bottom: 16px;
font-weight: 600;
}
.page-hero.p01-logo-hero h1 em {
color: var(--laser-mid);
font-style: italic;
}
.page-hero.p01-logo-hero p {
font-size: 14px;
color: rgba(255,255,255,.82);
line-height: 1.7;
max-width: none;
}
.p01-hero-logo {
display: flex;
align-items: center;
justify-content: center;
}
.p01-hero-logo img {
width: 100%;
height: auto;
max-width: 620px;
display: block;
}
/* Stack vertically on smaller screens — logo above, copy below */
@media (max-width: 880px) {
.p01-hero-grid { grid-template-columns: 1fr; gap: 32px; }
.p01-hero-logo { order: -1; }
.p01-hero-logo img { max-width: 480px; margin: 0 auto; }
.page-hero.p01-logo-hero { padding: 56px 0 56px; min-height: 0; }
}
/* ============================================================
p01 LOGO HERO — variant A (matches iteration A)
Marble backdrop + teal diagonal wash · logo above · copy centred
============================================================ */
.page-hero.p01-logo-hero {
position: relative;
padding: 90px 0;
background: #2B2B2B url('../images/hero-marble.jpg') center / cover no-repeat;
overflow: hidden;
}
.page-hero.p01-logo-hero .page-hero-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(43, 43, 43, 0.25) 0%, rgba(20, 20, 20, 0.40) 100%);
pointer-events: none;
z-index: 1;
}
.page-hero.p01-logo-hero .page-hero-inner {
position: relative;
z-index: 2;
}
.p01-hero-logo {
margin: 0 auto 36px;
text-align: center;
}
.p01-hero-logo img {
display: block;
margin: 0 auto;
max-width: 900px;
width: 90%;
height: auto;
}
.p01-hero-copy {
max-width: 580px;
margin: 0 auto;
text-align: center;
}
.p01-hero-eyebrow {
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
margin-bottom: 14px;
font-weight: 500;
}
.page-hero.p01-logo-hero h1 {
font-family: var(--serif);
font-weight: 600;
color: #fff;
font-size: clamp(28px, 3.4vw, 40px);
line-height: 1.15;
letter-spacing: -.015em;
margin-bottom: 16px;
}
.page-hero.p01-logo-hero h1 em {
color: var(--laser-mid);
font-style: italic;
}
.page-hero.p01-logo-hero p {
font-size: 14px;
color: rgba(255,255,255,.78);
line-height: 1.7;
max-width: none;
}
@media (max-width: 880px) {
.page-hero.p01-logo-hero { padding: 56px 0; }
.p01-hero-logo img { max-width: 480px; width: 90%; }
}
/* Footer logo image (replaces text-based footer logo, v279) */
.footer-logo {
display: block !important;
margin-bottom: 14px;
}
.footer-logo-img {
display: block;
width: 100%;
max-width: 280px;
height: auto;
}
@media (max-width: 880px) {
.footer-logo-img { max-width: 220px; }
}
/* ── p12 laser-skin: new sections (v303) ─────────────────── */
/* How it works — 3-step grid */
.ls-how-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 800px) { .ls-how-grid { grid-template-columns: 1fr; } }
.ls-how-step {
padding: 28px 24px;
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.12);
border-radius: var(--rl);
position: relative;
}
.ls-how-num {
font-family: var(--serif);
font-size: 36px;
color: var(--accent);
font-weight: 500;
line-height: 1;
margin-bottom: 16px;
opacity: 0.85;
}
.ls-how-step h3 {
font-family: var(--serif);
font-size: 18px;
color: var(--beauty-deep);
margin: 0 0 10px;
font-weight: 500;
}
.ls-how-step p {
font-size: 13.5px;
color: var(--mid);
line-height: 1.7;
margin: 0;
}
/* What to expect — 4-tile grid */
.ls-expect-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 880px) { .ls-expect-grid { grid-template-columns: repeat(2, 1fr); } }
.ls-expect-tile {
padding: 26px 20px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--rl);
text-align: center;
}
.ls-expect-icon {
font-size: 22px;
color: var(--accent);
margin-bottom: 12px;
opacity: 0.7;
}
.ls-expect-label {
font-size: 10px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 8px;
}
.ls-expect-value {
font-family: var(--serif);
font-size: 20px;
color: #fff;
font-weight: 500;
line-height: 1.2;
margin-bottom: 6px;
}
.ls-expect-note {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.5;
}
/* Your journey — 4-step vertical list */
.ls-journey {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0;
}
.ls-journey-step {
display: flex;
gap: 22px;
padding: 22px 0;
border-bottom: 1px solid rgba(13, 115, 119, 0.1);
}
.ls-journey-step:last-child { border-bottom: none; }
.ls-journey-num {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--beauty-deep);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 18px;
font-weight: 500;
}
.ls-journey-body { flex: 1; }
.ls-journey-body h4 {
font-family: var(--serif);
font-size: 17px;
color: var(--beauty-deep);
margin: 0 0 8px;
font-weight: 500;
}
.ls-journey-body p {
font-size: 13.5px;
color: var(--mid);
line-height: 1.7;
margin: 0;
}
/* FAQ accordion */
.ls-faqs { display: flex; flex-direction: column; gap: 10px; }
.ls-faq {
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.12);
border-radius: 8px;
overflow: hidden;
}
.ls-faq summary {
padding: 18px 22px;
font-size: 14px;
font-weight: 500;
color: var(--beauty-deep);
cursor: pointer;
list-style: none;
position: relative;
padding-right: 44px;
user-select: none;
}
.ls-faq summary::-webkit-details-marker { display: none; }
.ls-faq summary::after {
content: '+';
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: var(--accent);
font-weight: 400;
transition: transform .2s;
}
.ls-faq[open] summary::after { content: '–'; }
.ls-faq p {
padding: 0 22px 20px;
font-size: 13.5px;
color: var(--mid);
line-height: 1.7;
margin: 0;
}
/* ── p12 laser-skin: before/after results section (v309) ─── */
.ls-results-frame {
position: relative;
max-width: 720px;
margin: 0 auto;
border-radius: var(--rl);
overflow: hidden;
box-shadow: 0 8px 28px rgba(13, 60, 60, 0.18);
}
.ls-results-frame img {
display: block;
width: 100%;
height: auto;
}
.ls-results-label {
position: absolute;
top: 14px;
padding: 6px 14px;
background: rgba(43, 43, 43, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 4px;
font-family: var(--sans);
}
.ls-label-before { left: 14px; }
.ls-label-after { right: 14px; }
.ls-results-disclaimer {
font-size: 11.5px;
color: var(--mid);
margin: 18px auto 0;
max-width: 640px;
text-align: center;
line-height: 1.55;
font-style: italic;
opacity: 0.85;
font-family: var(--sans);
}
@media (max-width: 600px) {
.ls-results-label { font-size: 9px; padding: 4px 10px; top: 10px; }
.ls-label-before { left: 10px; }
.ls-label-after { right: 10px; }
}
/* ── p12 laser-skin: split intro section (v310) ───────────── */
.ls-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.ls-split-left { min-width: 0; }
.ls-split-right { min-width: 0; }
.ls-meta-pill {
display: inline-block;
padding: 6px 14px;
background: rgba(13, 115, 119, 0.08);
color: var(--beauty-deep);
font-size: 11.5px;
font-weight: 500;
border-radius: 100px;
font-family: var(--sans);
margin-right: 8px;
margin-bottom: 8px;
border: 1px solid rgba(13, 115, 119, 0.15);
letter-spacing: 0.03em;
}
/* When image column hidden (vascular/rejuvenation): text takes full width */
.ls-split.no-image { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.ls-split.no-image .ls-split-right { display: none; }
@media (max-width: 800px) {
.ls-split { grid-template-columns: 1fr; gap: 32px; }
.ls-split-right { order: -1; } /* image first on mobile */
}
/* ── p12 laser-skin: inline How-it-works steps inside split (v311) ─ */
.ls-split { align-items: start; } /* override align-items:center now that left is taller */
.ls-split-steps {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid rgba(13, 115, 119, 0.15);
}
.ls-split-steps-header {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
font-family: var(--sans);
}
.ls-split-step {
display: flex;
gap: 14px;
margin-bottom: 14px;
}
.ls-split-step:last-child { margin-bottom: 0; }
.ls-split-step-num {
flex: 0 0 26px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 12.5px;
font-weight: 500;
margin-top: 1px;
}
.ls-split-step-body { flex: 1; min-width: 0; }
.ls-split-step-title {
font-size: 13.5px;
font-weight: 600;
color: var(--beauty-deep);
margin: 0 0 3px;
line-height: 1.3;
font-family: var(--sans);
}
.ls-split-step-text {
font-size: 12.5px;
color: var(--mid);
margin: 0;
line-height: 1.55;
font-family: var(--sans);
}
/* Shrink the photo so left column doesn't dominate visually */
.ls-split-right .ls-results-frame {
max-width: 460px;
margin: 0 auto;
}
/* ── p12 laser-skin: v313 — Gaida strip, reviews, cross-discovery, real icons ── */
/* Gaida credentials strip */
.ls-gaida-strip { padding: 22px 0 24px; border-top: 1px solid rgba(13, 115, 119, 0.08); border-bottom: 1px solid rgba(13, 115, 119, 0.08); }
.ls-gaida-inner {
display: flex;
align-items: center;
gap: 22px;
max-width: 820px;
margin: 0 auto;
}
.ls-gaida-avatar {
flex: 0 0 64px;
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--beauty-deep), var(--accent));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 22px;
font-weight: 500;
letter-spacing: 0.04em;
box-shadow: 0 3px 10px rgba(13, 60, 60, 0.18);
}
.ls-gaida-avatar span { line-height: 1; }
.ls-gaida-text { flex: 1; min-width: 0; }
.ls-gaida-credentials {
font-size: 14px;
color: var(--ink);
line-height: 1.55;
margin: 0 0 6px;
font-family: var(--sans);
}
.ls-gaida-credentials strong { color: var(--beauty-deep); font-weight: 600; }
.ls-gaida-link {
font-size: 12.5px;
color: var(--accent);
text-decoration: none;
font-family: var(--sans);
font-weight: 500;
letter-spacing: 0.02em;
}
.ls-gaida-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
.ls-gaida-inner { flex-direction: column; text-align: center; gap: 14px; }
.ls-gaida-avatar { width: 56px; height: 56px; flex-basis: 56px; font-size: 19px; }
}
/* SVG icons in the typical-session tiles */
.ls-expect-icon svg {
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
color: var(--accent);
opacity: 0.85;
}
/* "See more results" link below the photo */
.ls-results-more-link {
display: inline-block;
margin-top: 10px;
font-size: 12.5px;
color: var(--accent);
text-decoration: none;
font-family: var(--sans);
font-weight: 500;
letter-spacing: 0.02em;
text-align: center;
}
.ls-split-right { text-align: center; }
.ls-results-more-link:hover { text-decoration: underline; }
/* Reviews row — 3 quote cards */
.ls-reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 800px) {
.ls-reviews-grid { grid-template-columns: 1fr; gap: 12px; }
}
.ls-review-card {
padding: 22px 20px;
background: #fff;
border-radius: var(--rl);
border: 1px solid rgba(13, 115, 119, 0.1);
display: flex;
flex-direction: column;
gap: 14px;
}
.ls-review-quote {
font-family: var(--serif);
font-size: 14.5px;
color: var(--beauty-deep);
line-height: 1.5;
font-style: italic;
flex: 1;
}
.ls-review-attrib {
font-size: 12px;
color: var(--mid);
font-family: var(--sans);
letter-spacing: 0.02em;
}
/* Cross-discovery strip */
.ls-cross-discovery { border-top: 1px solid rgba(13, 115, 119, 0.08); }
.ls-cross-inner {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
justify-content: center;
}
.ls-cross-label {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mid);
font-family: var(--sans);
}
.ls-cross-links {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.ls-cross-link {
display: flex;
flex-direction: column;
padding: 12px 20px;
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.15);
border-radius: var(--rs);
text-decoration: none;
transition: all .15s;
min-width: 200px;
}
.ls-cross-link:hover {
border-color: var(--accent);
background: rgba(13, 115, 119, 0.03);
transform: translateY(-1px);
}
.ls-cross-link-title {
font-family: var(--serif);
font-size: 15px;
color: var(--beauty-deep);
font-weight: 500;
margin-bottom: 3px;
}
.ls-cross-link-sub {
font-size: 12px;
color: var(--mid);
font-family: var(--sans);
}
/* ── p12 laser-skin: v315 — 3-column split (text | photo | bullets) ── */
.ls-split-3col {
display: grid;
grid-template-columns: 1fr 1fr 1.5fr;
gap: 36px;
align-items: start;
}
.ls-split-text { min-width: 0; }
.ls-split-photo { min-width: 0; text-align: center; }
.ls-split-photo .ls-results-frame { max-width: 360px; margin: 0 auto; }
.ls-split-bullets { min-width: 0; }
.ls-bullets-header {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
font-family: var(--sans);
}
.ls-bullet {
display: flex;
gap: 12px;
margin-bottom: 18px;
align-items: flex-start;
}
.ls-bullet:last-child { margin-bottom: 0; }
.ls-bullet-num {
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 13px;
font-weight: 500;
margin-top: 1px;
}
.ls-bullet-body { flex: 1; min-width: 0; }
.ls-bullet-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--beauty-deep);
margin: 0 0 4px;
font-family: var(--sans);
}
.ls-bullet-text {
font-size: 12.5px;
color: var(--mid);
margin: 0;
line-height: 1.55;
font-family: var(--sans);
}
/* When image hidden (vascular/rejuvenation no photo yet): collapse to 2-col */
.ls-split-3col.no-image {
grid-template-columns: 1.2fr 1fr;
}
.ls-split-3col.no-image .ls-split-photo { display: none; }
@media (max-width: 1024px) {
.ls-split-3col { grid-template-columns: 1fr 1fr; gap: 32px; }
.ls-split-bullets { grid-column: 1 / -1; }
.ls-split-bullets .ls-bullet { display: flex; }
/* On medium screens, show bullets as a horizontal 3-col row beneath */
.ls-bullets-grid-md {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
}
@media (max-width: 720px) {
.ls-split-3col { grid-template-columns: 1fr; gap: 28px; }
}
/* Expanded notes (v316) — accommodate longer practical detail */
.ls-expect-note {
font-size: 12px !important;
line-height: 1.5 !important;
margin-top: 8px !important;
}
.ls-expect-tile {
padding: 22px 18px !important;
text-align: left !important;
}
.ls-expect-icon {
text-align: center;
margin-bottom: 14px !important;
}
.ls-expect-label {
text-align: center;
margin-bottom: 6px !important;
}
.ls-expect-value {
text-align: center;
margin-bottom: 6px !important;
}
/* Hero gets curved bottom edge via polygon approximation of Bezier curve */
.page-hero.has-curve-bottom {
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - 30px),
93.7% calc(100% - 51px),
84.4% calc(100% - 62.5px),
75% calc(100% - 61.6px),
65.6% calc(100% - 56px),
56.3% calc(100% - 48px),
46.9% calc(100% - 40px),
37.5% calc(100% - 33.6px),
28.1% calc(100% - 30.5px),
18.8% calc(100% - 32.4px),
9.4% calc(100% - 41px),
0 calc(100% - 60px)
);
/* keep glow inside the clipped region */
overflow: hidden;
}
/* Section immediately below the curved hero — extend up to fill the clipped curve area */
.after-curve-hero {
margin-top: -60px;
padding-top: 100px !important;
position: relative;
z-index: 1;
}
/* Hide the old SVG wave styling on p12 — no longer needed */
.has-curve-bottom .hero-curve { display: none; }
@media (max-width: 700px) {
/* Smaller curve depth on mobile */
.page-hero.has-curve-bottom {
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - 20px),
93.7% calc(100% - 33px),
84.4% calc(100% - 40px),
75% calc(100% - 40px),
65.6% calc(100% - 36px),
56.3% calc(100% - 31px),
46.9% calc(100% - 26px),
37.5% calc(100% - 22px),
28.1% calc(100% - 20px),
18.8% calc(100% - 21px),
9.4% calc(100% - 27px),
0 calc(100% - 39px)
);
}
.after-curve-hero {
margin-top: -40px;
padding-top: 70px !important;
}
}
/* Laser treatment 4-card grid (v320) */
.gallery-grid.cols-4-laser {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
@media (max-width: 1100px) {
.gallery-grid.cols-4-laser { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.gallery-grid.cols-4-laser { grid-template-columns: 1fr; }
}
/* Treatment cards with stacked session options (v321) — used on polynucleotides + pigmentation */
.treat-stack-grid {
display: grid;
gap: 18px;
}
.treat-stack-3 { grid-template-columns: repeat(3, 1fr); }
.treat-stack-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
@media (max-width: 960px) {
.treat-stack-3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.treat-stack-2 { grid-template-columns: 1fr; }
}
.treat-stack-card {
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.12);
border-radius: var(--rl);
overflow: hidden;
display: flex;
flex-direction: column;
}
.treat-stack-header {
padding: 22px 22px 18px;
border-bottom: 1px solid rgba(13, 115, 119, 0.08);
}
.treat-stack-header h3 {
font-family: var(--serif);
font-size: 20px;
color: var(--beauty-deep);
margin: 0 0 6px;
font-weight: 500;
line-height: 1.25;
}
.treat-stack-header p {
font-size: 13px;
color: var(--mid);
line-height: 1.55;
margin: 0;
font-family: var(--sans);
}
.treat-stack-sessions {
display: flex;
flex-direction: column;
}
.treat-stack-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 14px;
align-items: center;
padding: 16px 22px;
border-top: 1px solid rgba(13, 115, 119, 0.06);
text-decoration: none;
color: inherit;
transition: background .15s;
}
.treat-stack-row:first-child { border-top: none; }
.treat-stack-row:hover { background: rgba(13, 115, 119, 0.03); }
.treat-stack-row.featured { background: rgba(13, 115, 119, 0.04); }
.treat-stack-row.featured:hover { background: rgba(13, 115, 119, 0.07); }
.treat-stack-label {
font-size: 14px;
color: var(--ink);
font-family: var(--sans);
font-weight: 500;
}
.treat-stack-save {
display: inline-block;
font-size: 10.5px;
color: var(--accent);
background: rgba(13, 115, 119, 0.08);
padding: 2px 8px;
border-radius: 100px;
font-weight: 600;
letter-spacing: 0.03em;
margin-left: 8px;
vertical-align: middle;
}
.treat-stack-price {
font-family: var(--serif);
font-size: 20px;
color: var(--beauty-deep);
font-weight: 500;
white-space: nowrap;
}
.treat-stack-cta {
font-size: 12px;
color: var(--accent);
font-weight: 600;
letter-spacing: 0.04em;
white-space: nowrap;
}
/* v322 — fix cat-header excessive top gap inside section[data-cat-section] */
section[data-cat-section] .cat-header {
margin-top: 0;
}
/* v322 — photo at top of treat-stack-card */
.treat-stack-photo {
width: 100%;
height: 200px;
overflow: hidden;
background: #f0ede8;
position: relative;
}
.treat-stack-photo .photo-wrap,
.treat-stack-photo img {
width: 100%;
height: 100%;
display: block;
}
.treat-stack-photo img {
object-fit: cover;
}
.treat-stack-photo .ph {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f4ede4, #e8dfd3);
}
/* v325 — beauty page typography normalization */
/* Canonical section h2 for all beauty pages — matches laser-skin pattern */
.beauty-h2-section {
font-family: var(--serif);
font-size: clamp(24px, 3vw, 32px);
color: var(--beauty-deep);
margin: 0 0 16px;
line-height: 1.2;
font-weight: 500;
letter-spacing: -0.005em;
}
/* Variant: tighter margin for headers immediately followed by sub-text/lede */
.beauty-h2-section--tight { margin: 0 0 8px; }
/* Variant: hero CTA section, white text */
.beauty-h2-section--invert {
color: #fff;
font-size: clamp(22px, 3vw, 36px);
margin: 0 0 12px;
}
/* Canonical hero subtitle for beauty pages — small, dimmed, max-width */
.beauty-hero-sub {
font-size: 15px;
color: rgba(255, 255, 255, 0.78);
margin: 12px 0 0;
line-height: 1.6;
font-family: var(--sans);
max-width: 540px;
}
/* v328 — canonical session selector (ported from treatment.html so it works in style.css too) */
.session-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border: 1.5px solid var(--cream-deep);
border-radius: var(--r);
margin-bottom: 6px;
cursor: pointer;
transition: all .15s ease;
text-decoration: none;
color: var(--ink);
background: #fff;
user-select: none;
}
.session-option:hover { border-color: var(--laser-mid); background: var(--laser-lite); }
.session-option.beauty-opt:hover { border-color: var(--beauty); background: var(--beauty-lite); }
.session-option.best-val { border: 2px solid var(--laser-mid); }
.session-option.beauty-opt.best-val { border-color: var(--beauty); }
.sess-left { flex: 1; min-width: 0; }
.sess-name { font-size: 16px; font-weight: 500; color: var(--ink); font-family: var(--sans); }
.sess-saving { font-size: 13px; color: var(--laser-deep); margin-top: 3px; font-weight: 500; font-family: var(--sans); }
.session-option.beauty-opt .sess-saving { color: var(--beauty-deep); }
.sess-badge {
display: inline-block;
margin-top: 6px;
font-size: 9px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 20px;
background: var(--laser);
color: #fff;
}
.session-option.beauty-opt .sess-badge { background: var(--beauty); }
.sess-right { text-align: right; flex-shrink: 0; }
.sess-price { font-family: var(--sans); font-weight: 600; font-size: 22px; color: var(--laser-deep); line-height: 1; }
.session-option.beauty-opt .sess-price { color: var(--beauty-deep); }
.sess-was { font-size: 13px; color: var(--muted); text-decoration: line-through; margin-top: 4px; font-family: var(--sans); }
/* v330 — Book button (ported from treatment.html, was inline) */
.sess-book-btn {
display: block;
width: 100%;
text-align: center;
padding: 16px;
border-radius: var(--r);
font-size: 14px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
transition: all .18s ease;
margin-top: 10px;
background: var(--cream-deep);
color: var(--muted);
pointer-events: none;
cursor: default;
border: none;
font-family: var(--sans);
}
.sess-book-btn.active {
background: var(--laser);
color: #fff;
pointer-events: auto;
cursor: pointer;
}
.sess-book-btn.active:hover {
background: var(--laser-mid);
transform: translateY(-1px);
box-shadow: var(--sh2);
}
.sess-book-btn.beauty-btn.active {
background: var(--beauty);
color: #fff;
pointer-events: auto;
cursor: pointer;
}
.sess-book-btn.beauty-btn.active:hover {
background: var(--beauty-mid);
transform: translateY(-1px);
}
/* Selected state for session-option (cross-page parity) */
.session-option.selected {
border: 2px solid var(--laser-deep);
background: var(--laser-deep);
color: #fff;
box-shadow: 0 0 0 3px rgba(9,83,86,.2);
}
.session-option.beauty-opt.selected {
border-color: var(--beauty-deep);
background: var(--beauty-deep);
box-shadow: 0 0 0 3px rgba(8,115,112,.2);
}
.session-option.selected .sess-name,
.session-option.selected .sess-price { color: #fff; }
.session-option.selected .sess-saving { color: rgba(255,255,255,.85); }
.session-option.selected .sess-was { color: rgba(255,255,255,.5); }
.session-option.selected .sess-badge { background: rgba(255,255,255,.25); }
/* v331 — vertical center alignment for split intro columns with photo */
.ls-split-3col {
align-items: center !important;
}
/* v331 — add a little breathing room around "See more results →" */
.ls-results-more-link {
display: inline-block;
margin-top: 14px;
}
/* v332 — laser-skin cat-header upsize: prominent section heading */
section[data-cat-section] .cat-header {
border-bottom: 1px solid rgba(13, 115, 119, 0.15);
padding-bottom: 18px;
margin-bottom: 32px;
}
section[data-cat-section] .cat-header h2 {
font-family: var(--serif) !important;
font-size: clamp(28px, 4vw, 42px) !important;
color: var(--beauty-deep) !important;
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.15;
}
section[data-cat-section] .cat-header .cat-count {
font-size: 14px !important;
color: var(--mid);
font-family: var(--sans);
margin-left: 16px;
font-style: italic;
}
/* When section has dark bg, invert colors */
section[data-cat-section].tx-graphite-soft .cat-header {
border-bottom-color: rgba(255, 255, 255, 0.15);
}
section[data-cat-section].tx-graphite-soft .cat-header h2 {
color: #fff !important;
}
section[data-cat-section].tx-graphite-soft .cat-header .cat-count {
color: rgba(255, 255, 255, 0.65);
}
/* The "Larger or different areas" consultation CTA stays on white — already pops on dark bg */
/* v334 — Refined consult card on light bg (no longer transparent) */
.treat-stack-card.consult-card {
background: #fff;
}
.consult-only-block {
padding: 20px 6px 6px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 14px;
min-height: 200px; /* matches typical Nose/Face card session area height */
}
.consult-only-copy {
font-size: 13.5px;
line-height: 1.6;
color: var(--mid);
margin: 0;
font-family: var(--sans);
text-align: left;
}
.consult-only-copy strong {
color: var(--ink);
font-weight: 600;
display: block;
margin-bottom: 6px;
}
.treat-stack-card.consult-card .sess-book-btn {
margin-top: auto;
}
/* v334 — split intro text card + cards-light bg adjustments */
/* Wrap the description column in a visually distinct card */
.ls-split-text {
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.10);
border-left: 3px solid var(--accent);
border-radius: 6px;
padding: 24px 26px;
}
.ls-split-text .sec-tag { margin-top: 0; }
/* The new "cards-light" section background — warmer mid-tone taupe */
.tx-cards-light {
position: relative;
}
.tx-cards-light .treat-stack-card {
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.08);
}
/* Consultation-only card variant — restored for v334 with refined sizing */
.treat-stack-card.consult-card {
background: #fff;
}
.consult-only-block {
padding: 20px 4px 4px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 14px;
height: 100%;
}
.consult-only-copy {
font-size: 13.5px;
line-height: 1.6;
color: var(--mid);
margin: 0;
font-family: var(--sans);
}
.consult-only-copy strong {
color: var(--beauty-deep);
font-weight: 600;
}
.treat-stack-card.consult-card .sess-book-btn {
margin-top: auto;
}
/* Make sure 3-card grid collapses well */
@media (max-width: 1100px) {
.treat-stack-grid.treat-stack-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.treat-stack-grid.treat-stack-3 { grid-template-columns: 1fr; }
}
/* v334 — boxed text card in the split intro left column */
.ls-split-text {
background: #fff;
padding: 28px 30px;
border-radius: 10px;
border: 1px solid rgba(13, 115, 119, 0.08);
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
/* v334 — consultation-only treatment-stack-card polish */
.treat-stack-card.consult-card {
background: #fff;
}
.consult-only-block {
padding: 22px 22px 22px;
display: flex;
flex-direction: column;
gap: 14px;
}
.consult-only-copy {
font-size: 14px;
line-height: 1.65;
color: var(--mid);
margin: 0;
font-family: var(--sans);
}
.treat-stack-card.consult-card .sess-book-btn {
margin-top: 6px;
}
/* v335 — bullets vertically distributed across full column height, more space between each */
.ls-split-bullets {
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
height: 100%;
}
.ls-bullet {
margin-bottom: 0 !important; /* gap on parent handles spacing now */
}
/* v335 — make split rows stretch so bullets can fill column height */
.ls-split-3col {
align-items: stretch !important;
}
.ls-split-text,
.ls-split-bullets,
.ls-split-photo {
display: flex;
flex-direction: column;
justify-content: center;
}
/* v335 — ensure What to Expect tiles render correctly on dark bg */
.tx-graphite-soft .ls-expect-tile {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
}
.tx-graphite-soft .ls-expect-icon { color: rgba(255, 255, 255, 0.7); }
.tx-graphite-soft .ls-expect-label { color: rgba(255, 255, 255, 0.55); }
.tx-graphite-soft .ls-expect-value { color: #fff; }
.tx-graphite-soft .ls-expect-note { color: rgba(255, 255, 255, 0.7); }
/* v336 — tx-cream: warm cream matching p04 treat-body background */
.tx-cream {
position: relative;
background: var(--cream); /* #F7F3EE — same as p04 .treat-body */
}
.tx-cream > * { position: relative; z-index: 1; }
/* v351 — white frame card wraps ONLY the photo (no text inside); caption sits below as plain text */
.ls-photo-frame-card {
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.16);
border-radius: 12px;
padding: 14px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
max-width: 396px; /* matches p04 sidebar (essentials + 25%, then -10%) */
margin: 0 auto;
}
.ls-photo-frame-card .ls-results-frame {
margin: 0;
max-width: none;
}
.ls-photo-frame-card .ls-results-frame img {
width: 100%;
height: auto;
display: block;
}
.ls-photo-caption-card {
margin-top: 16px;
text-align: center;
}
.ls-photo-caption-card-eyebrow {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--beauty-deep);
margin-bottom: 10px;
display: block;
}
.ls-photo-caption-card .ls-results-disclaimer {
font-size: 12.5px;
color: var(--muted);
margin: 0 0 8px;
line-height: 1.5;
font-style: italic;
}
.ls-photo-caption-card .ls-results-more-link {
display: inline-block;
font-size: 13px;
color: var(--beauty-deep);
font-weight: 600;
text-decoration: none;
letter-spacing: 0.02em;
}
.ls-photo-caption-card .ls-results-more-link:hover {
text-decoration: underline;
}
/* v341 — results.html photo with caption-below pattern */
.results-photo-card {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--rl);
overflow: hidden;
}
.results-photo-card .photo-wrap {
aspect-ratio: 3/4;
}
.results-photo-caption {
padding: 14px 18px;
}
.results-photo-caption-eyebrow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--beauty-deep);
font-weight: 700;
margin-bottom: 4px;
}
.results-photo-caption-detail {
font-size: 14px;
color: var(--ink);
font-weight: 500;
}
/* v344 — photo filename badge (dev/QA aid: shows photo-XXX.jpg on every image) */
.photo-wrap { position: relative; }
.photo-wrap[data-pid]::after {
content: attr(data-pid);
position: absolute;
top: 6px;
left: 6px;
font-family: monospace;
font-size: 11px;
font-weight: 600;
color: #fff;
background: rgba(0, 0, 0, 0.78);
padding: 3px 7px;
border-radius: 3px;
pointer-events: none;
z-index: 12;
letter-spacing: 0.02em;
max-width: calc(100% - 12px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Fallback badge for imgs without .photo-wrap parent (added via JS) */
.photo-fn-badge {
position: absolute;
top: 6px;
left: 6px;
font-family: monospace;
font-size: 11px;
font-weight: 600;
color: #fff;
background: rgba(0, 0, 0, 0.78);
padding: 3px 7px;
border-radius: 3px;
pointer-events: none;
z-index: 12;
letter-spacing: 0.02em;
}
/* v349 — equal-height treat-stack-headers so sessions start at same Y across cards */
.treat-stack-card .treat-stack-header {
display: flex;
flex-direction: column;
}
.treat-stack-card .treat-stack-header p {
flex: 1;
}
.treat-stack-grid .treat-stack-card .treat-stack-header {
min-height: 158px;
}
/* v359 — Pigmentation: text box matches photo height; tight gap to bullets */
.ls-split-2col-photo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: stretch; /* both columns equal height */
}
@media (max-width: 900px) {
.ls-split-2col-photo { grid-template-columns: 1fr; gap: 32px; }
}
/* Plain text column — no card; vertically centered. Overrides legacy .ls-split-text rules. */
.ls-split-2col-photo .ls-split-text {
background: transparent;
border: none;
border-left: none;
border-radius: 0;
box-shadow: none;
padding: 0 8px 0 0;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Compressed gap to horizontal bullets (no divider line; tighter margins) */
.ls-bullets-horizontal {
margin-top: 28px;
}
.ls-bullets-horizontal .ls-bullets-header {
text-align: center;
margin-bottom: 18px;
}
.ls-bullets-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
@media (max-width: 900px) {
.ls-bullets-grid { grid-template-columns: 1fr; gap: 24px; }
}
.ls-bullet.ls-bullet-horizontal {
margin-bottom: 0;
}