@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=DM+Sans:wght@300;400;500&family=Great+Vibes&display=swap');
/* =============================================================
   Team Flawless — "Rosé & Mauve" theme
   Base feminine restyle + Version-2 palette, baked into one file.
   Rollback: restore css/style.dark-backup.css
   ============================================================= */

/* =====================================================================
   DUAL-THEME FEMININE SYSTEM (restyle only — layout/structure/photos same)
   DEFAULT = LIGHT (blush + cream) — used by most pages (feminine-forward).
   DARK (warm espresso) is scoped to the two dramatic pages via [data-page].
   Fonts: Cormorant Garamond (headlines) + Montserrat (body).
   ===================================================================== */
:root {
  /* ---- LIGHT — WARM CREAM (default) ---- */
  --bg:          #F4ECDF;   /* warm cream / greige base (not pink) */
  --surface:     #FBF5EA;   /* light cream — cards & panels */
  --surface-2:   #EBDFCD;   /* soft sand — inputs, insets, badges */
  --dark:        #EADCC9;   /* legacy "dark" tone -> warm sand */
  --dark-2:      #F1E7D6;   /* footer band — gentle cream */
  --text:        #4A4036;   /* warm coffee-brown body text */
  --muted:       #7C6E5D;   /* readable warm taupe (supporting text) */
  --cream:       #2E2620;   /* deep mocha-ink (emphasis on cream) */
  --inv:         #2E2620;   /* headings/emphasis on cream surfaces */
  --inv-muted:   #6B5D50;
  --gold:        #A9833F;   /* antique gold — readable as text on cream */
  --gold-light:  #CBA868;   /* champagne — hovers / decoration */
  --gold-pale:   #A9833F;
  --gold-dim:    rgba(169,131,63,0.12);
  --rose:        #BC8D7F;   /* soft taupe-rose accent (restrained) */
  --mauve:       #A5837C;
  --on-gold:     #322619;   /* mocha text for use on gold fills */
  --border:      rgba(110,86,58,0.22);
  --border-sub:  rgba(46,38,32,0.07);
  /* DARK-TONE TOKENS (used by the dark pages + scattered charcoal bands).
     A theme only needs to override these to recolor every dark moment. */
  --d-bg:        #15100E;   /* rich black mocha */
  --d-surface:   #1E1714;
  --d-surface-2: #28201C;
  --d-dark:      #100C0A;
  --d-dark-2:    #0D0A09;
  --d-text:      #ECE0D4;
  --d-muted:     #A2907F;
  --d-cream:     #F6ECE0;
  --d-inv-muted: #BBA897;
  --d-gold:      #CBA86A;
  --d-gold-light:#E0C28E;
  --d-gold-pale: #EDDAB6;
  --d-gold-dim:  rgba(203,168,106,0.14);
  --d-rose:      #DAA9A1;
  --d-mauve:     #C49B97;
  --d-on-gold:   #271C14;
  --d-border:    rgba(233,214,178,0.13);
  --serif:       'Cormorant Garamond', Georgia, serif;
  --body:        'EB Garamond', Georgia, serif;   /* feminine readable body serif */
  --sans:        'Montserrat', system-ui, sans-serif;
  --script:      'Great Vibes', 'Cormorant Garamond', cursive;
  --ease:        cubic-bezier(0.25,0.1,0.25,1);
  --ease-out:    cubic-bezier(0,0,0.2,1);
}

/* ---- DARK pages (Portfolio + Charm Pageant) — built from --d-* tokens ---- */
body[data-page="portfolio"],
body[data-page="charm-pageant"] {
  --bg:var(--d-bg); --surface:var(--d-surface); --surface-2:var(--d-surface-2);
  --dark:var(--d-dark); --dark-2:var(--d-dark-2);
  --text:var(--d-text); --muted:var(--d-muted); --cream:var(--d-cream);
  --inv:var(--d-cream); --inv-muted:var(--d-inv-muted);
  --gold:var(--d-gold); --gold-light:var(--d-gold-light); --gold-pale:var(--d-gold-pale);
  --gold-dim:var(--d-gold-dim); --rose:var(--d-rose); --mauve:var(--d-mauve);
  --on-gold:var(--d-on-gold); --border:var(--d-border); --border-sub:rgba(255,255,255,0.05);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scrollbar-gutter:stable; overflow-x:hidden; }
body { background:var(--bg); color:var(--text); font-family:var(--sans); font-size:1rem; font-weight:300; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

.ann-bar { padding-left:max(1rem,env(safe-area-inset-left)); padding-right:max(1rem,env(safe-area-inset-right)); }
.site-header .container { padding-inline:max(clamp(1.5rem,5vw,4rem),env(safe-area-inset-left)); }
.mobile-nav { padding-left:max(2rem,env(safe-area-inset-left)); padding-right:max(2rem,env(safe-area-inset-right)); padding-bottom:max(2rem,env(safe-area-inset-bottom)); }
.cart-foot { padding-bottom:max(2rem,env(safe-area-inset-bottom)); }

img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,textarea,select { font-family:inherit; font-size:inherit; }

/* ---- ACCESSIBILITY: Focus ---- */
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
:focus:not(:focus-visible) { outline:none; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim); outline:none; }

/* ---- TYPE ---- */
h1,h2,h3,h4 { font-family:var(--serif); font-weight:300; line-height:1.1; letter-spacing:0.01em; }
h1 { font-size:clamp(3rem,7vw,6.5rem); }
h2 { font-size:clamp(2rem,4.5vw,3.8rem); }
h3 { font-size:clamp(1.4rem,2.5vw,2.2rem); }
h4 { font-size:1.15rem; font-weight:400; }
.eyebrow { font-family:var(--sans); font-size:0.65rem; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); display:block; }
.eyebrow-light { color:var(--gold-pale); }

/*
  WCAG AA CONTRAST AUDIT
  PASS: --text (#f0e8df) on --bg (#0c0c0c) — ~17:1
  PASS: --gold (#b8894a) on --bg (#0c0c0c) — ~4.6:1 (AA)
  PASS: --gold-pale (#e8d5b0) on --bg (#0c0c0c) — ~11:1
  MARGINAL: --muted (#8a7a6a) on --bg (#0c0c0c) — ~3.4:1
    Used only as supporting text. Passes for large text and UI components.
*/

/* ---- LAYOUT ---- */
.container { width:min(1280px,100%); margin-inline:auto; padding-inline:clamp(1.5rem,5vw,4rem); }
.container.narrow { max-width:780px; }
.section-pad { padding:clamp(5rem,10vw,9rem) 0; }
.center { text-align:center; }
.section-sub { color:var(--muted); max-width:52ch; font-size:0.95rem; margin-top:1rem; }
.center .section-sub { margin-inline:auto; }
.hide-mobile { display:inline; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- DIVIDERS ---- */
.divider-gold { display:block; width:3.5rem; height:1px; background:linear-gradient(90deg,var(--gold),transparent); margin:1rem 0 1.8rem; }
.center .divider-gold { margin-inline:auto; }

/* ---- SECTION HEADER ---- */
.section-header { margin-bottom:clamp(3rem,5vw,4.5rem); }
.section-header .eyebrow { margin-bottom:0.8rem; }
.section-header h2 { margin-bottom:0.5rem; }

/* ---- BUTTONS ---- */
.btn { display:inline-flex; align-items:center; gap:0.6rem; padding:1rem 2.4rem; font-family:var(--sans); font-size:0.7rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; transition:all 0.3s var(--ease); white-space:nowrap; }
.btn-gold { background:var(--gold); color:#fff; }
.btn-gold:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 12px 32px rgba(184,137,74,0.35); }
.btn-outline { border:1px solid var(--gold); color:var(--gold); }
.btn-outline:hover { background:var(--gold-dim); transform:translateY(-2px); }
.btn-outline-light { border:1px solid rgba(245,237,227,0.35); color:var(--inv); }
.btn-outline-light:hover { border-color:var(--gold-pale); background:rgba(255,255,255,0.06); }
.btn-full { width:100%; justify-content:center; }
.btn-gold-sm { padding:0.55rem 1.1rem; font-size:0.62rem; letter-spacing:0.15em; }

/* ============================================
   ANNOUNCEMENT BAR
   ============================================ */
.ann-bar { position:fixed; top:0; left:0; right:0; z-index:1002; background:var(--gold); padding:0.75rem 1rem; text-align:center; }
.ann-bar p { font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:#fff; line-height:1.5; }
.ann-bar a { text-decoration:underline; text-underline-offset:3px; }
.ann-spacer { height:38px; }

/* ============================================
   HEADER
   ============================================ */
.site-header { position:fixed; top:38px; left:0; right:0; z-index:1000; transition:all 0.4s var(--ease); }
.site-header.scrolled { background:rgba(7,7,7,0.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }

.site-header:not(.scrolled) .nav-link { color:rgba(245,237,227,0.7); }
.site-header:not(.scrolled) .nav-link:hover { color:var(--inv); }
.site-header:not(.scrolled) .header-actions a,
.site-header:not(.scrolled) .header-actions button { color:rgba(245,237,227,0.7); }
.site-header:not(.scrolled) .logo-word { color:var(--inv); }
.site-header:not(.scrolled) .logo-tag { color:var(--gold-pale); }
.site-header:not(.scrolled) .burger { color:var(--inv); }

.site-header.scrolled .nav-link { color:var(--muted); }
.site-header.scrolled .nav-link:hover,.site-header.scrolled .nav-link.active { color:var(--inv); }
.site-header.scrolled .logo-word { color:var(--inv); }
.site-header.scrolled .logo-tag { color:var(--gold); }
.site-header.scrolled .header-actions a,.site-header.scrolled .header-actions button { color:var(--muted); }
.site-header.scrolled .header-actions a:hover,.site-header.scrolled .header-actions button:hover { color:var(--gold); }
.site-header.scrolled .burger { color:var(--inv); }

/* Centered, symmetric header: logo on top, one centered nav row, cart pinned right */
.header-inner { display:flex; flex-direction:column; align-items:center; gap:0.4rem; padding:0.8rem 0; position:relative; }

.header-nav { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0.7rem 2.6rem; }
.header-actions { position:absolute; right:0; top:50%; transform:translateY(-50%); }
.nav-link { font-size:0.68rem; font-weight:500; letter-spacing:0.13em; text-transform:uppercase; white-space:nowrap; transition:color 0.3s; position:relative; }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 0.3s var(--ease); }
.nav-link:hover::after,.nav-link.active::after { transform:scaleX(1); }

/* Services dropdown */
.nav-dropdown { position:relative; display:inline-flex; align-items:center; }
.nav-caret { font-size:0.55rem; margin-left:0.2rem; opacity:0.75; }
.nav-submenu { position:absolute; top:100%; left:50%; transform:translate(-50%,8px); min-width:230px; padding:0.5rem 0; margin-top:0.6rem; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 18px 50px -16px rgba(60,30,40,0.4); opacity:0; visibility:hidden; transition:opacity 0.22s var(--ease), transform 0.22s var(--ease); z-index:1100; }
.nav-submenu::before { content:''; position:absolute; bottom:100%; left:0; right:0; height:0.8rem; }
.nav-dropdown:hover .nav-submenu, .nav-dropdown:focus-within .nav-submenu { opacity:1; visibility:visible; transform:translate(-50%,0); }
.nav-submenu a { display:block; padding:0.6rem 1.3rem; font-size:0.66rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--text); white-space:nowrap; transition:background 0.15s, color 0.15s; }
.nav-submenu a:hover { background:var(--gold-dim); color:var(--gold); }

.logo { text-align:center; display:block; }
.logo-word { font-family:var(--serif); font-size:1.55rem; font-weight:300; letter-spacing:0.28em; transition:color 0.4s; }
.logo-tag { font-size:0.52rem; letter-spacing:0.38em; text-transform:uppercase; color:var(--gold); margin-top:0.15rem; transition:color 0.4s; display:block; }

.header-actions { display:flex; align-items:center; gap:1.2rem; justify-content:flex-end; }
.header-actions a.nav-link { font-style:normal; }
.cart-badge { display:inline-flex; align-items:center; justify-content:center; width:1.1rem; height:1.1rem; background:#c0392b; color:#fff; font-size:0.6rem; font-weight:700; border-radius:50%; margin-left:0.15rem; vertical-align:super; }
.burger { display:none; flex-direction:column; gap:5px; padding:4px; transition:color 0.4s; }
.burger span { display:block; width:22px; height:1px; background:currentColor; transition:all 0.3s; }

/* ============================================
   MOBILE NAV
   ============================================ */
.mobile-nav { position:fixed; inset:0; background:var(--bg); z-index:1500; display:flex; flex-direction:column; padding:2rem; transform:translateX(-100%); transition:transform 0.45s var(--ease-out); overflow-y:auto; border-right:1px solid var(--border); }
.mobile-nav.open { transform:translateX(0); }
.mobile-nav-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:3rem; }
.mobile-nav-close { width:2.5rem; height:2.5rem; border:1px solid var(--border); color:var(--text); display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.mobile-nav-links { display:flex; flex-direction:column; }
.mobile-nav-links a { font-family:var(--serif); font-size:2.4rem; font-weight:300; color:var(--text); padding:0.7rem 0; border-bottom:1px solid var(--border); transition:color 0.3s; }
.mobile-nav-links a:hover,.mobile-nav-links a.active { color:var(--gold); }
.mobile-subnav { display:flex; flex-direction:column; }
.mobile-subnav a { font-family:var(--sans) !important; font-size:0.95rem !important; font-weight:400 !important; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted) !important; padding:0.5rem 0 0.5rem 1.3rem !important; border-bottom:none !important; }
.mobile-subnav a:hover { color:var(--gold) !important; }

/* ============================================
   CART DRAWER
   ============================================ */
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); backdrop-filter:blur(6px); z-index:2000; opacity:0; pointer-events:none; transition:opacity 0.4s; }
.cart-overlay.open { opacity:1; pointer-events:all; }
.cart-drawer { position:fixed; top:0; right:0; bottom:0; width:min(440px,100vw); background:var(--surface); border-left:1px solid var(--border); z-index:2001; display:flex; flex-direction:column; transform:translateX(100%); transition:transform 0.45s var(--ease-out); }
.cart-drawer.open { transform:translateX(0); }
.cart-head { display:flex; align-items:center; justify-content:space-between; padding:2rem; border-bottom:1px solid var(--border); }
.cart-head h3 { font-size:0.75rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--inv); }
.cart-x { width:2.5rem; height:2.5rem; border:1px solid var(--border); color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:1.2rem; transition:all 0.3s; }
.cart-x:hover { border-color:var(--gold); color:var(--gold); }
.cart-items { flex:1; overflow-y:auto; padding:1.5rem 2rem; display:flex; flex-direction:column; gap:1.5rem; }
.cart-items::-webkit-scrollbar { width:2px; }
.cart-items::-webkit-scrollbar-thumb { background:var(--border); }
.cart-empty { color:var(--muted); font-size:0.88rem; padding:1rem 0; }
.cart-item { display:grid; grid-template-columns:5rem 1fr; gap:1rem; align-items:start; }
.cart-item-img { aspect-ratio:1/1; object-fit:cover; background:var(--surface-2); width:5rem; }
.cart-item-name { font-family:var(--serif); font-size:0.95rem; color:var(--inv); margin-bottom:0.25rem; }
.cart-item-price { font-size:0.82rem; color:var(--muted); margin-bottom:0.6rem; }
.cart-item-controls { display:flex; align-items:center; justify-content:space-between; }
.cart-qty { display:flex; align-items:center; gap:0.7rem; border:1px solid var(--border); padding:0.25rem 0.7rem; }
.cart-qty button { color:var(--muted); font-size:1rem; transition:color 0.2s; }
.cart-qty button:hover { color:var(--gold); }
.cart-qty span { font-size:0.82rem; min-width:1rem; text-align:center; color:var(--inv); }
.cart-item-remove { font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); background:none; border:none; cursor:pointer; transition:color 0.2s; }
.cart-item-remove:hover { color:var(--inv); }
.cart-foot { padding:1.5rem 2rem 2rem; border-top:1px solid var(--border); }
.cart-coming-soon { background:rgba(255,220,50,0.07); border:1px solid rgba(255,200,40,0.2); color:#c9a83a; font-size:0.72rem; line-height:1.55; padding:0.75rem 1rem; margin-bottom:1.2rem; text-align:center; }
.cart-subtotal { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.cart-subtotal span { font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.cart-subtotal strong { font-family:var(--serif); font-size:1.5rem; font-weight:300; color:var(--inv); }
.cart-checkout { display:block; width:100%; padding:1rem; background:var(--gold); color:#fff; font-size:0.7rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; text-align:center; transition:background 0.3s; }
.cart-checkout:hover { background:var(--gold-light); }
.cart-continue { display:block; text-align:center; margin-top:0.8rem; font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:color 0.3s; }
.cart-continue:hover { color:var(--inv); }

/* ============================================
   HERO — cinematic full-screen
   ============================================ */
#home-hero { position:relative; height:100svh; min-height:640px; display:flex; align-items:flex-end; justify-content:flex-end; overflow:hidden; }
.hero-media { position:absolute; inset:0; }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:center 20%; filter:brightness(1); transform:scale(1); transform-origin:center center; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to left,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.6) 40%,rgba(0,0,0,0.1) 75%,rgba(0,0,0,0) 100%); }
.hero-content { position:relative; z-index:2; width:100%; max-width:520px; padding:0 clamp(2rem,5vw,4rem) clamp(3rem,6vw,5rem); }
.hero-content .eyebrow { margin-bottom:1.5rem; }
.hero-content h1 { color:var(--inv); margin-bottom:1.2rem; max-width:16ch; font-size:clamp(2rem,3.2vw,3.6rem); }
.hero-content h1 em { font-style:italic; color:var(--gold-pale); }
.hero-sub { color:rgba(245,237,227,0.72); max-width:46ch; margin-bottom:3rem; font-size:1rem; line-height:1.8; }
.hero-cta-group { display:flex; flex-wrap:wrap; gap:1rem; }
.hero-scroll-hint { position:absolute; bottom:2.5rem; right:4rem; display:flex; flex-direction:column; align-items:center; gap:0.7rem; z-index:3; color:rgba(245,237,227,0.38); font-size:0.58rem; letter-spacing:0.25em; text-transform:uppercase; }

/* ============================================
   PAGE HERO (interior pages)
   ============================================ */
.page-hero { position:relative; height:100vh; min-height:600px; display:flex; align-items:flex-end; overflow:hidden; padding-bottom:4rem; }
.page-hero-short { height:70vh; min-height:400px; }
.page-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 15%; filter:brightness(1); transform:scale(1); transform-origin:center center; }
.page-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.2) 100%); }
.page-hero-content { position:relative; z-index:2; padding:0 clamp(1.5rem,5vw,4rem); width:100%; max-width:1280px; margin:0 auto; }
.page-hero-content h1 { color:var(--inv); }

/* ============================================
   MARQUEE
   ============================================ */
.marquee-strip { background:var(--gold); padding:0.85rem 0; overflow:hidden; }
.marquee-track { display:flex; animation:marquee 30s linear infinite; width:max-content; }
.marquee-track span { font-size:0.65rem; font-weight:600; letter-spacing:0.25em; text-transform:uppercase; color:#fff; white-space:nowrap; padding:0 1.8rem; }
.marquee-track .sep { opacity:0.5; padding:0; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee { background:var(--gold); padding:0.85rem 0; overflow:hidden; }
.marquee .marquee-track { animation-duration:28s; }
.marquee-item { font-size:0.65rem; font-weight:600; letter-spacing:0.25em; text-transform:uppercase; color:#fff; white-space:nowrap; padding:0 1.8rem; }
.marquee-item::after { content:'✦'; opacity:0.45; margin-left:1.8rem; }

/* ============================================
   SERVICES SECTION
   ============================================ */
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.services-grid-3 { grid-template-columns:repeat(3,1fr); }
.service-card { position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--surface-2); cursor:pointer; }
.service-card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--ease), filter 0.5s; filter:brightness(0.72); }
.service-card:hover .service-card-img { transform:scale(1.07); filter:brightness(0.52); }
.service-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.08) 65%); }
.service-card-content { position:absolute; bottom:0; left:0; right:0; padding:2rem; }
.service-card-content .eyebrow { color:var(--gold); margin-bottom:0.5rem; }
.service-card-content h3 { color:var(--inv); font-size:1.6rem; margin-bottom:0.8rem; }
.service-card-content > p { font-size:0.85rem; color:rgba(245,237,227,0.72); max-height:0; overflow:hidden; opacity:0; transition:all 0.4s var(--ease); }
.service-card:hover .service-card-content > p { opacity:1; max-height:6rem; }
.service-card-link { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.65rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-top:1rem; opacity:0; transform:translateY(0.5rem); transition:all 0.35s 0.05s; }
.service-card:hover .service-card-link { opacity:1; transform:translateY(0); }

/* ============================================
   PRODUCTS / SHOP
   ============================================ */
.shop-filters { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:3rem; }
.filter-btn { padding:0.5rem 1.2rem; border:1px solid var(--border); font-size:0.7rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:all 0.3s; font-family:var(--sans); background:transparent; }
.filter-btn.active,.filter-btn:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:2px; }
.featured-grid { grid-template-columns:repeat(4,1fr); }
.product-card { background:var(--surface); overflow:hidden; display:flex; flex-direction:column; transition:transform 0.4s var(--ease); }
.product-card.hidden { display:none; }
.product-card:hover { transform:translateY(-4px); }
.product-card-img-wrap { position:relative; overflow:hidden; aspect-ratio:1/1; }
.product-card-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s var(--ease); }
.product-card:hover .product-card-img-wrap img { transform:scale(1.06); }
.product-card-badges { position:absolute; top:1rem; left:1rem; display:flex; gap:0.4rem; flex-direction:column; }
.badge-bestseller { background:var(--gold); color:#fff; font-size:0.56rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; padding:0.25rem 0.6rem; }
.badge-new { background:var(--surface-2); color:var(--inv); border:1px solid var(--border); font-size:0.56rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; padding:0.25rem 0.6rem; }
.product-quick-add { position:absolute; bottom:0; left:0; right:0; background:var(--gold); color:#fff; font-size:0.63rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; padding:0.9rem; font-family:var(--sans); opacity:0; transform:translateY(100%); transition:all 0.35s var(--ease); border:none; cursor:pointer; }
.product-card:hover .product-quick-add { opacity:1; transform:translateY(0); }
.product-quick-add:hover { background:var(--gold-light); }
.product-card-info { padding:1.3rem 1.3rem 1.6rem; flex:1; display:flex; flex-direction:column; border-top:1px solid var(--border); }
.product-card-category { font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:0.35rem; }
.product-card-title { font-family:var(--serif); font-size:1.15rem; font-weight:300; color:var(--inv); margin-bottom:0.5rem; line-height:1.3; }
.product-card-desc { font-size:0.82rem; color:var(--muted); line-height:1.6; margin-bottom:0.8rem; flex:1; }
.product-card-price { font-size:0.9rem; font-weight:500; color:var(--gold-pale); }

/* ============================================
   ABOUT SPLIT
   ============================================ */
.about-split-inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,7rem); align-items:center; }
.about-split-img { position:relative; }
.about-split-img img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center; display:block; }
.about-split-img::before { content:''; position:absolute; inset:-8px 8px 8px -8px; border:1px solid var(--border); z-index:-1; }
.about-img-badge { position:absolute; bottom:2rem; right:-2rem; background:var(--surface); border-left:3px solid var(--gold); padding:1.5rem 1.8rem; }
.badge-number { display:block; font-family:var(--serif); font-size:3rem; color:var(--gold); line-height:1; }
.badge-label { display:block; font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); margin-top:0.5rem; }
.about-split-text .eyebrow { margin-bottom:0.8rem; }
.about-split-text h2 { margin-bottom:1.5rem; }
.about-split-text p { color:var(--muted); font-size:0.95rem; margin-bottom:1.2rem; line-height:1.8; }
.about-stats { display:flex; gap:2.5rem; margin-top:2rem; padding-top:2rem; border-top:1px solid var(--border); flex-wrap:wrap; }
.stat-number { display:block; font-family:var(--serif); font-size:2.4rem; color:var(--gold); line-height:1; }
.stat-label { display:block; font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); margin-top:0.4rem; }

/* Values grid */
.values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:3rem; }
.value-card { background:var(--surface); padding:2.5rem 2rem; text-align:center; border-bottom:2px solid transparent; transition:border-color 0.3s; }
.value-card:hover { border-color:var(--gold); }
.value-icon { font-size:1.1rem; color:var(--gold); margin-bottom:1.2rem; }
.value-card h3 { font-size:1.35rem; margin-bottom:0.8rem; color:var(--inv); }
.value-card p { font-size:0.85rem; color:var(--muted); }

/* Team grid */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:3rem; }
.team-card { background:var(--surface); overflow:hidden; }
.team-card-img { aspect-ratio:1/1; overflow:hidden; }
.team-card-img img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform 0.7s var(--ease), filter 0.5s; filter:brightness(0.95); }
.team-card:hover .team-card-img img { transform:scale(1.05); filter:brightness(1.05); }
.team-card-info { padding:1.8rem 1.5rem; border-top:1px solid var(--border); }
.team-card-info h3 { font-size:1.35rem; color:var(--inv); margin-bottom:0.25rem; }
.team-title { font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.team-bio { font-size:0.85rem; color:var(--muted); line-height:1.75; margin-bottom:1rem; }
.team-specialties { display:flex; flex-wrap:wrap; gap:0.4rem; }
.team-specialties span { font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; border:1px solid var(--border); padding:0.2rem 0.6rem; color:var(--muted); }

/* Stats banner */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
.stat-block .stat-number { font-family:var(--serif); font-size:3.5rem; display:block; line-height:1; }
.stat-block .stat-label { display:block; font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase; margin-top:0.6rem; }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:3rem; }
.testimonial-card { background:var(--surface); padding:3rem 2.5rem; position:relative; }
.testimonial-card::before { content:'\201C'; position:absolute; top:1.5rem; left:2rem; font-family:var(--serif); font-size:5rem; color:var(--gold); line-height:1; opacity:0.2; }
.stars { color:var(--gold); font-size:0.75rem; margin-bottom:1.5rem; letter-spacing:0.3em; }
.testimonial-card p { font-family:var(--serif); font-size:1.05rem; font-style:italic; color:rgba(245,237,227,0.82); line-height:1.75; margin-bottom:1.5rem; }
.testimonial-card cite { font-style:normal; font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); }

/* ============================================
   LOOKBOOK / PORTFOLIO
   ============================================ */
.lookbook-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:2px; }
.lookbook-item { overflow:hidden; position:relative; cursor:pointer; aspect-ratio:3/4; }
.lookbook-item img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 0.7s var(--ease); filter:brightness(0.78); }
.lookbook-item:hover img { transform:scale(1.06); filter:brightness(0.55); }
.lookbook-item-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.4s; }
.lookbook-item:hover .lookbook-item-overlay { opacity:1; }
.lookbook-item-overlay span { font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--inv); border-bottom:1px solid var(--gold); padding-bottom:4px; }
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:2px; }
.portfolio-item { overflow:hidden; position:relative; cursor:pointer; aspect-ratio:1/1; transition:opacity 0.3s var(--ease); }
.portfolio-item img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform 0.4s ease; filter:brightness(1); }
.portfolio-item:hover img { transform:scale(1.03); filter:brightness(0.52); }
.portfolio-item .lookbook-item-overlay { opacity:0; }
.portfolio-item:hover .lookbook-item-overlay { opacity:1; }
.portfolio-item.hidden { display:none; }

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.4s; padding:20px; box-sizing:border-box; }
.lightbox.open { opacity:1; pointer-events:all; }
.lightbox-inner { display:flex; align-items:center; justify-content:center; max-width:min(90vw,960px); max-height:85vh; overflow:visible; }
.lightbox-inner img { max-width:min(90vw,960px); max-height:85vh; width:auto; height:auto; object-fit:contain !important; object-position:center; display:block; }
.lightbox-close { position:absolute; top:1.5rem; right:1.5rem; color:var(--inv); font-size:2rem; cursor:pointer; opacity:0.6; transition:opacity 0.2s; background:none; border:none; line-height:1; z-index:1; }
.lightbox-close:hover { opacity:1; }
.lightbox-prev,.lightbox-next { position:absolute; top:50%; transform:translateY(-50%); color:var(--inv); font-size:3rem; opacity:0.5; cursor:pointer; transition:opacity 0.2s; background:none; border:none; line-height:1; z-index:1; padding:1rem; }
.lightbox-prev:hover,.lightbox-next:hover { opacity:1; }
.lightbox-prev { left:1rem; }
.lightbox-next { right:1rem; }

/* ============================================
   NEWSLETTER
   ============================================ */
.newsletter { padding:clamp(5rem,8vw,7rem) 0; background:var(--surface); text-align:center; border-top:1px solid var(--border); }
.newsletter .eyebrow { margin-bottom:1rem; display:block; }
.newsletter h2 { color:var(--inv); margin-bottom:1rem; }
.newsletter p { color:var(--muted); max-width:48ch; margin:0 auto 2.5rem; font-size:0.95rem; }
.newsletter-form { display:flex; max-width:480px; margin:0 auto 1.5rem; border:1px solid var(--border); }
.newsletter-form input { flex:1; background:transparent; border:none; color:var(--inv); padding:0 1.5rem; font-size:0.85rem; outline:none; height:3rem; }
.newsletter-form input::placeholder { color:var(--muted); }
.newsletter-form input:focus { background:var(--surface-2); }
.newsletter-form button { flex-shrink:0; height:3rem; padding:0 1.8rem; background:var(--gold); color:#fff; font-family:var(--sans); font-size:0.68rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; transition:background 0.3s; border:none; cursor:pointer; }
.newsletter-form button:hover { background:var(--gold-light); }
.newsletter-note { font-size:0.68rem; color:var(--muted); }

/* ============================================
   FOOTER
   ============================================ */
.site-footer { background:var(--dark-2); border-top:1px solid var(--border); padding-top:clamp(3.5rem,6vw,5rem); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding-bottom:4rem; border-bottom:1px solid var(--border); }
.footer-brand .logo-word { color:var(--inv); font-family:var(--serif); font-size:1.55rem; letter-spacing:0.28em; }
.footer-brand .logo-tag { color:var(--gold); display:block; font-size:0.52rem; letter-spacing:0.38em; text-transform:uppercase; margin-bottom:1.2rem; }
.footer-brand p { font-size:0.85rem; color:var(--muted); max-width:30ch; line-height:1.8; margin-bottom:1.8rem; }
.footer-social { display:flex; gap:0.8rem; }
.footer-social a { width:2.5rem; height:2.5rem; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:all 0.3s; }
.footer-social a:hover { border-color:var(--gold); color:var(--gold); }
.footer-col h5 { font-family:var(--sans); font-size:0.65rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--inv); margin-bottom:1.5rem; }
.footer-col ul { display:flex; flex-direction:column; gap:0.8rem; }
.footer-col ul li a { font-size:0.83rem; color:var(--muted); transition:color 0.3s; }
.footer-col ul li a:hover { color:var(--gold-pale); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding:1.5rem 0; }
.footer-bottom p { font-size:0.7rem; color:var(--muted); }
.footer-bottom p a:hover { color:var(--gold-pale); }
.pay-icons { display:flex; gap:0.5rem; }
.pay-icon { height:1.5rem; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:3px; padding:0 0.5rem; font-size:0.58rem; color:var(--muted); display:flex; align-items:center; letter-spacing:0.06em; text-transform:uppercase; }

/* ============================================
   SERVICE DETAIL
   ============================================ */
.service-detail-inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,6rem); align-items:center; }
.service-detail-inner.reverse .service-detail-text { order:-1; }
.service-detail-img img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top center; display:block; border-radius:4px; }
.service-detail-text .eyebrow { margin-bottom:0.8rem; }
.service-detail-text h2 { margin-bottom:1.5rem; }
.service-detail-text > p { color:var(--muted); font-size:0.95rem; margin-bottom:1rem; line-height:1.8; }
.pricing-list { margin:2rem 0 0.5rem; border-top:1px solid var(--border); }
.pricing-item { display:flex; justify-content:space-between; align-items:center; padding:0.85rem 0; border-bottom:1px solid var(--border); }
.pricing-name { font-size:0.88rem; color:var(--text); }
.pricing-price { font-family:var(--serif); font-size:1.2rem; color:var(--gold); }

/* ============================================
   FORMS
   ============================================ */
.booking-layout { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start; }
.booking-info .eyebrow { margin-bottom:0.8rem; }
.booking-info h2 { margin-bottom:1.5rem; }
.booking-info > p { color:var(--muted); font-size:0.95rem; margin-bottom:2rem; line-height:1.8; }
.booking-features { display:flex; flex-direction:column; gap:1.5rem; margin-bottom:2rem; }
.booking-feature { display:flex; gap:1.2rem; align-items:flex-start; }
.booking-feature-icon { flex-shrink:0; width:2.8rem; height:2.8rem; border:1px solid var(--gold); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:0.9rem; color:var(--gold); }
.booking-feature h4 { font-size:0.8rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:0.3rem; font-family:var(--sans); color:var(--inv); }
.booking-feature p { font-size:0.85rem; color:var(--muted); }
.booking-note { background:var(--surface-2); border-left:3px solid var(--gold); padding:1.2rem 1.5rem; font-size:0.88rem; color:var(--muted); }
.booking-form-wrap,.contact-form-wrap { background:var(--surface); padding:2.5rem; border:1px solid var(--border); }
.booking-form h3,.contact-form-wrap h3 { font-family:var(--sans); font-size:0.78rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--inv); margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-size:0.62rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:0.5rem; }
.form-group input,.form-group select,.form-group textarea { display:block; width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:0.9rem 1rem; font-size:0.88rem; outline:none; transition:border-color 0.3s; -webkit-appearance:none; appearance:none; }
.form-group input::placeholder,.form-group textarea::placeholder { color:rgba(138,122,106,0.55); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-group select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7a6a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-color:var(--surface-2); padding-right:2.5rem; cursor:pointer; color-scheme:dark; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-disclaimer { font-size:0.7rem; color:var(--muted); text-align:center; margin-top:1rem; line-height:1.6; }
.form-success { text-align:center; padding:4rem 2rem; }
.success-icon { font-size:2rem; color:var(--gold); margin-bottom:1.2rem; }
.form-success h3 { font-size:1.8rem; margin-bottom:0.6rem; color:var(--inv); }
.form-success p { color:var(--muted); font-size:0.92rem; }
.form-error { display:none; color:#e05252; font-size:0.82rem; margin-top:0.75rem; padding:0.75rem 1rem; background:rgba(192,57,43,0.1); border-left:3px solid #c0392b; line-height:1.5; }
.form-honeypot { display:none !important; visibility:hidden; position:absolute; left:-9999px; }

.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start; }
.contact-info .eyebrow { margin-bottom:0.8rem; }
.contact-info h2 { margin-bottom:1.5rem; }
.contact-info > p { color:var(--muted); font-size:0.95rem; margin-bottom:2rem; line-height:1.8; }
.contact-details { display:flex; flex-direction:column; gap:1.2rem; margin-bottom:2rem; }
.contact-detail { display:flex; flex-direction:column; gap:0.25rem; }
.contact-detail-label { font-size:0.62rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.contact-detail-value { font-size:0.92rem; color:var(--text); }
a.contact-detail-value:hover { color:var(--gold); }
.contact-social { margin-bottom:2rem; }
.contact-social-label { font-size:0.62rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.social-links { display:flex; gap:1rem; flex-wrap:wrap; }
.social-link { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.8rem; color:var(--text); padding:0.6rem 1rem; border:1px solid var(--border); transition:all 0.3s; }
.social-link:hover { border-color:var(--gold); color:var(--gold); }
.contact-booking-prompt { padding-top:2rem; border-top:1px solid var(--border); }
.contact-booking-prompt p { font-size:0.88rem; color:var(--muted); margin-bottom:0; }

/* FAQ */
.faq-list { display:flex; flex-direction:column; gap:1px; margin-top:2.5rem; }
.faq-item { background:var(--surface); }
.faq-item summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:1.3rem 1.5rem; font-size:0.9rem; font-weight:400; color:var(--text); letter-spacing:0.02em; user-select:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; color:var(--gold); font-size:1.3rem; font-weight:300; transition:transform 0.3s; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p { padding:0 1.5rem 1.3rem; font-size:0.88rem; color:var(--muted); line-height:1.8; }

/* Legal */
.legal-body { max-width:720px; margin:0 auto; padding:clamp(3rem,8vw,6rem) clamp(1.5rem,5vw,4rem); }
.legal-body h1 { color:var(--inv); margin-bottom:0.5rem; }
.legal-body .updated { font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:3rem; display:block; }
.legal-body h2 { font-size:1.3rem; margin:2.5rem 0 0.75rem; color:var(--inv); }
.legal-body p,.legal-body li { font-size:0.92rem; color:var(--muted); line-height:1.8; margin-bottom:0.75rem; }
.legal-body ul { padding-left:1.5rem; margin-bottom:0.75rem; }
.legal-body ul li { list-style:disc; }
.legal-body a { color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

/* ============================================
   APP DOWNLOAD BANNER
   ============================================ */
/* App showcase — real Totally Flawless app screenshots in phone frames */
.app-showcase { position:relative; overflow:hidden; background:linear-gradient(135deg,#2b1d18 0%,#1a1110 100%); }
.app-showcase-inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; padding-block:clamp(3rem,6vw,5rem); }
.app-showcase-text { max-width:520px; }
.app-showcase-text h2 { color:var(--cream); margin-bottom:0.8rem; font-size:clamp(1.8rem,3.4vw,2.8rem); }
.app-showcase-text p { color:rgba(245,237,227,0.75); font-size:0.95rem; line-height:1.75; margin-bottom:2rem; }
.app-showcase-phones { display:flex; justify-content:center; align-items:center; }
.app-phone { width:min(190px,30%); aspect-ratio:1179/2277; border-radius:28px; overflow:hidden;
  border:6px solid #15110f; background:#000; box-shadow:0 34px 70px -24px rgba(0,0,0,0.7); flex:0 0 auto; }
.app-phone img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.app-phone-main { z-index:3; transform:translateY(-14px) scale(1.07); }
.app-phone-side { z-index:1; opacity:0.94; }
.app-phone-side:first-child { transform:translateX(20px) rotate(-5deg); }
.app-phone-side:last-child { transform:translateX(-20px) rotate(5deg); }
.app-store-btns { display:flex; gap:1rem; flex-wrap:wrap; }
.app-store-btn { display:inline-flex; align-items:center; gap:0.6rem; padding:0.75rem 1.5rem; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.3); color:var(--inv); font-family:var(--sans); font-size:0.75rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; transition:all 0.3s; backdrop-filter:blur(4px); }
.app-store-btn:hover { background:var(--gold); border-color:var(--gold); color:#fff; }
@media(max-width:768px) {
  .app-showcase-inner { grid-template-columns:1fr; text-align:center; gap:2.5rem; }
  .app-showcase-text { margin-inline:auto; }
  .app-showcase-text .eyebrow, .app-showcase-text .divider-gold { margin-inline:auto; }
  .app-showcase-phones { justify-content:center; }
  .app-phone { width:min(200px,42%); }
  .app-phone-side:first-child { transform:translateX(12px) rotate(-4deg); }
  .app-phone-side:last-child { display:none; }
  .app-store-btns { justify-content:center; }
  .app-store-btn { justify-content:center; }
}

/* ============================================
   CHARM PAGEANT
   ============================================ */
.nav-link-charm { color:var(--gold) !important; }
.nav-link-charm::after { background:var(--gold); }

.charm-brand-bar { background:var(--surface); border-bottom:1px solid var(--border); padding:1.5rem 0; }
.charm-brand-inner { display:flex; align-items:center; justify-content:center; gap:2.5rem; }
.charm-brand-logo { text-align:center; }
.charm-brand-name { display:block; font-family:var(--serif); font-size:1.4rem; font-weight:300; color:var(--inv); letter-spacing:0.1em; }
.charm-brand-tag { display:block; font-size:0.58rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-top:0.25rem; }
.charm-brand-sep { font-family:var(--serif); font-size:2rem; color:var(--gold); opacity:0.5; }

.charm-reg-btns { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }

.charm-paths { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:3rem; }
.charm-path-card { background:var(--surface-2); padding:3rem 2.5rem; border-top:3px solid var(--gold); }
.charm-path-icon { font-size:1.5rem; color:var(--gold); margin-bottom:1.5rem; display:block; }
.charm-path-card h3 { font-family:var(--serif); font-size:1.8rem; color:var(--inv); margin-bottom:1rem; }
.charm-path-card p { font-size:0.88rem; color:var(--muted); line-height:1.8; margin-bottom:1.5rem; }
.charm-path-list { display:flex; flex-direction:column; gap:0.5rem; padding-left:0; }
.charm-path-list li { font-size:0.82rem; color:var(--text); list-style:none; padding-left:1.2rem; position:relative; }
.charm-path-list li::before { content:'✦'; position:absolute; left:0; color:var(--gold); font-size:0.55rem; top:0.15rem; }

.charm-services { display:flex; flex-direction:column; border-top:1px solid var(--border); margin-top:2rem; }
.charm-service-item { display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; padding:1.5rem 0; border-bottom:1px solid var(--border); }
.charm-service-info { flex:1; }
.charm-service-info h4 { font-family:var(--serif); font-size:1.2rem; color:var(--inv); margin-bottom:0.4rem; }
.charm-service-info p { font-size:0.85rem; color:var(--muted); line-height:1.7; }
.charm-service-price { flex-shrink:0; }

.charm-schedule { display:flex; flex-direction:column; gap:0; margin-top:2rem; }
.charm-schedule-item { display:grid; grid-template-columns:180px 1fr; gap:2rem; padding:2rem 0; border-bottom:1px solid rgba(255,255,255,0.06); align-items:start; }
.charm-schedule-time { text-align:right; }
.charm-schedule-label { display:block; font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:0.3rem; }
.charm-schedule-date { display:block; font-family:var(--serif); font-size:1.1rem; color:var(--cream); }
.charm-schedule-body h4 { font-family:var(--sans); font-size:0.85rem; font-weight:600; color:var(--cream); margin-bottom:0.4rem; letter-spacing:0.05em; }
.charm-schedule-body p { font-size:0.83rem; color:rgba(245,237,227,0.55); line-height:1.7; }

/* Responsive */
@media(max-width:768px) {
  .charm-paths { grid-template-columns:1fr; }
  .charm-brand-inner { gap:1.5rem; }
  .charm-service-item { flex-direction:column; gap:0.5rem; }
  .charm-schedule-item { grid-template-columns:1fr; gap:0.5rem; }
  .charm-schedule-time { text-align:left; }
  .charm-reg-btns { flex-direction:column; }
}

/* ============================================
   PORTFOLIO CATEGORY TILES
   ============================================ */
.portfolio-cats { display:grid; grid-template-columns:repeat(5,1fr); gap:2px; }
.portfolio-cat-tile { position:relative; display:block; overflow:hidden; aspect-ratio:1/1; cursor:pointer; text-decoration:none; }
.portfolio-cat-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform 0.8s var(--ease), filter 0.5s; filter:brightness(0.75); }
.portfolio-cat-tile:hover img { transform:scale(1.03); filter:brightness(0.45); }
.portfolio-cat-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.1) 60%); }
.portfolio-cat-info { position:absolute; bottom:0; left:0; right:0; padding:1.8rem 1.5rem; }
.portfolio-cat-info h3 { font-family:var(--serif); font-size:1.8rem; font-weight:300; color:var(--inv); margin-bottom:0.3rem; line-height:1; }
.portfolio-cat-count { font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); }

/* ============================================
   BLOG
   ============================================ */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.blog-card { background:var(--surface); overflow:hidden; display:flex; flex-direction:column; transition:transform 0.4s var(--ease); }
.blog-card:hover { transform:translateY(-4px); }
.blog-card-img-wrap { display:block; position:relative; overflow:hidden; aspect-ratio:1/1; }
.blog-card-img-wrap img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform 0.4s ease; filter:brightness(0.88); }
.blog-card:hover .blog-card-img-wrap img { transform:scale(1.03); filter:brightness(0.7); }
.blog-card-cat { position:absolute; top:1rem; left:1rem; background:var(--gold); color:#fff; font-size:0.58rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; padding:0.25rem 0.7rem; }
.blog-card-body { padding:1.8rem; flex:1; display:flex; flex-direction:column; border-top:1px solid var(--border); }
.blog-card-date { font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:0.6rem; }
.blog-card-body h3 { font-family:var(--serif); font-size:1.25rem; font-weight:300; color:var(--inv); margin-bottom:0.8rem; line-height:1.3; flex:1; }
.blog-card-body h3 a { color:inherit; transition:color 0.3s; }
.blog-card-body h3 a:hover { color:var(--gold-pale); }
.blog-card-body p { font-size:0.83rem; color:var(--muted); line-height:1.7; margin-bottom:1.2rem; }
.blog-read-more { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.65rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-top:auto; transition:gap 0.3s; }
.blog-card:hover .blog-read-more { gap:0.7rem; }

/* ============================================
   VIDEOS
   ============================================ */
.videos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.video-card { background:var(--surface); overflow:hidden; display:flex; flex-direction:column; }
.video-embed { position:relative; aspect-ratio:16/9; background:var(--dark); overflow:hidden; }
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.video-card-info { padding:1.5rem; border-top:1px solid var(--border); flex:1; }
.video-cat { font-size:0.58rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:0.5rem; }
.video-card-info h3 { font-family:var(--serif); font-size:1.1rem; font-weight:300; color:var(--inv); margin-bottom:0.5rem; line-height:1.3; }
.video-card-info p { font-size:0.82rem; color:var(--muted); line-height:1.6; }

/* ============================================
   PRESS LOGOS
   ============================================ */
.press-logos { display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem 2.5rem; }
.press-logos span { font-family:var(--serif); font-size:1.1rem; font-weight:300; color:rgba(245,237,227,0.35); letter-spacing:0.12em; text-transform:uppercase; white-space:nowrap; }

/* ============================================
   ANIMATIONS
   ============================================ */
/* Progressive enhancement: visible by default, animated only after JS loads */
.fade-up { opacity:1; transform:none; }
body.js-ready .fade-up { opacity:0; transform:translateY(2rem); transition:opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); }
body.js-ready .fade-up.visible { opacity:1; transform:translateY(0); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media(hover:none){
  .product-quick-add { opacity:1; transform:translateY(0); }
  .service-card-content > p { opacity:1; max-height:none; }
  .service-card-link { opacity:1; transform:translateY(0); }
}
@media(max-width:1200px){
  .portfolio-cats { grid-template-columns:repeat(3,1fr); }
  .blog-grid { grid-template-columns:repeat(2,1fr); }
  .videos-grid { grid-template-columns:repeat(2,1fr); }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .featured-grid { grid-template-columns:repeat(2,1fr); }
  .values-grid { grid-template-columns:repeat(2,1fr); }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .testimonials-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .service-detail-img img { aspect-ratio:3/4; object-position:top center; }
}
@media(max-width:1024px){
  .header-nav { display:none; }
  .burger { display:flex; }
  /* Hide text nav links — keep only cart icon + burger */
  .header-actions a.nav-link { display:none; }
  /* 3-part mobile header: Team Flawless | Luxury Beauty Artists | icons */
  .header-inner { display:flex; flex-direction:row; align-items:center; justify-content:space-between; padding:1rem 0; gap:0; }
  .logo { display:flex; flex-direction:row; align-items:center; gap:0; flex:1; text-align:left; }
  .logo-word { font-size:1rem; letter-spacing:0.1em; white-space:nowrap; flex-shrink:0; }
  .logo-tag { flex:1; text-align:center; font-size:0.42rem; letter-spacing:0.2em; color:var(--gold); display:block; margin:0; padding:0 0.5rem; }
  .header-actions { position:static; transform:none; flex-shrink:0; gap:1rem; }
  .about-split-inner { grid-template-columns:1fr; gap:3rem; }
  .about-split-img::before { display:none; }
  .about-img-badge { right:0; }
  .service-detail-inner { grid-template-columns:1fr; gap:3rem; }
  .service-detail-inner.reverse .service-detail-text { order:0; }
  .booking-layout { grid-template-columns:1fr; gap:3rem; }
  .contact-layout { grid-template-columns:1fr; gap:3rem; }
}
@media(max-width:768px){
  .portfolio-cats { grid-template-columns:repeat(2,1fr); }
  .portfolio-cat-info h3 { font-size:1.4rem; }
  .blog-grid { grid-template-columns:1fr; }
  .videos-grid { grid-template-columns:1fr; }
  .section-pad { padding:3.5rem 0; }
  input,select,textarea { font-size:16px !important; }
  *{ -webkit-tap-highlight-color:transparent; }
  button,a { touch-action:manipulation; }
  .ann-bar { padding:0.6rem 1rem; }
  .ann-bar p { font-size:0.58rem; }
  .site-header .container { padding-inline:1rem; }
  #home-hero { min-height:100svh; align-items:flex-end; justify-content:flex-start; }
  .hero-content { max-width:100%; padding:0 1.5rem 3.5rem; }
  .hero-content h1 { font-size:clamp(2.8rem,12vw,4rem); max-width:100%; }
  .hero-sub { font-size:0.9rem; margin-bottom:2rem; }
  .hero-cta-group { flex-direction:column; gap:0.75rem; }
  .hero-cta-group .btn { width:100%; justify-content:center; }
  .hero-scroll-hint { display:none; }
  .page-hero { height:60vh; min-height:500px; padding-bottom:2.5rem; }
  .page-hero-short { height:60vh; min-height:500px; }
  .page-hero-content { padding-inline:1.5rem; }
  .services-grid { grid-template-columns:1fr; }
  .service-card { aspect-ratio:4/3; }
  .featured-grid { grid-template-columns:1fr 1fr; }
  .products-grid { grid-template-columns:1fr 1fr; }
  .product-card-img-wrap { aspect-ratio:1/1; }
  .product-card-desc { display:none; }
  .about-split-img img { aspect-ratio:3/2; }
  .about-img-badge { bottom:1rem; padding:1rem 1.2rem; }
  .badge-number { font-size:2rem; }
  .about-stats { gap:1.5rem; }
  .values-grid { grid-template-columns:1fr 1fr; }
  .team-grid { grid-template-columns:1fr 1fr; }
  .team-card-img { aspect-ratio:1/1; }
  .team-bio { display:none; }
  .stats-row { grid-template-columns:repeat(2,1fr); gap:1.5rem; }
  .stat-block .stat-number { font-size:2.8rem; }
  .testimonials-grid { grid-template-columns:1fr; }
  .testimonial-card { padding:2rem; }
  .lookbook-grid { grid-template-columns:repeat(2,1fr); }
  .lookbook-item { aspect-ratio:1/1; }
  .portfolio-grid { grid-template-columns:1fr 1fr; }
  .newsletter-form { flex-direction:column; border:none; gap:2px; }
  .newsletter-form input { border:1px solid var(--border); height:3.2rem; }
  .newsletter-form button { height:3.2rem; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; padding-bottom:2.5rem; }
  .footer-bottom { flex-direction:column; gap:1rem; text-align:center; }
  .pay-icons { justify-content:center; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .form-group { margin-bottom:1rem; }
  .form-group input,.form-group select,.form-group textarea { padding:1rem; font-size:16px !important; }
  .booking-form-wrap,.contact-form-wrap { padding:1.5rem; }
  .btn { min-height:48px; }
  .pricing-item { flex-direction:column; align-items:flex-start; gap:0.2rem; padding:1rem 0; }
  .cart-drawer { width:100%; border-left:none; }
  .cart-head,.cart-items,.cart-foot { padding-left:1.5rem; padding-right:1.5rem; }
  .mobile-nav-links a { font-size:2rem; padding:0.6rem 0; }
}
@media(max-width:640px){
  /* Lightbox arrows — small, pinned to screen edges, never overlap image */
  .lightbox-prev,.lightbox-next { font-size:1.8rem; padding:0.4rem 0.6rem; }
  .lightbox-prev { left:0; }
  .lightbox-next { right:0; }
  .lightbox-close { top:0.75rem; right:0.75rem; font-size:1.5rem; }
  /* Portfolio category tiles — 2 col on small phones */
  .portfolio-cats { grid-template-columns:1fr 1fr; }
  /* Charm pageant schedule */
  .charm-schedule-item { grid-template-columns:1fr; gap:0.3rem; }
  .charm-schedule-time { text-align:left; }
  /* Hero content full width */
  .hero-content { text-align:left; }
  /* Blog grid single col */
  .blog-grid { grid-template-columns:1fr; }
  /* Stats single col on very small */
  .stats-row { grid-template-columns:1fr 1fr; }
  /* Header: hide the small tagline on phones so the logo + cart + menu don't crowd/overlap */
  .site-header .logo-tag { display:none; }
  /* Charm Pageant hero: show the wide banner at its natural height (kills the black letterbox void) */
  body[data-page="charm-pageant"] .page-hero { height:auto; min-height:0; padding-bottom:0; display:block; }
  body[data-page="charm-pageant"] .page-hero > img { position:static; height:auto; }
  body[data-page="charm-pageant"] .page-hero-overlay { display:none; }
}
@media(max-width:480px){
  h1 { font-size:clamp(2.4rem,11vw,3.2rem); }
  h2 { font-size:clamp(1.7rem,7vw,2.4rem); }
  .featured-grid,.products-grid { grid-template-columns:1fr; }
  .product-card-img-wrap { aspect-ratio:3/2; }
  .product-card-desc { display:block; }
  .values-grid,.team-grid { grid-template-columns:1fr; }
  .team-card-img { aspect-ratio:1/1; }
  .team-bio { display:block; }
  .lookbook-grid { grid-template-columns:repeat(2,1fr); }
  .portfolio-grid { grid-template-columns:1fr 1fr; }
  .portfolio-item { aspect-ratio:1/1; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .ann-bar p .hide-mobile { display:none; }
  .service-card { aspect-ratio:3/2; }
  .section-header { margin-bottom:2rem; }
  /* Ensure 16px minimum padding from screen edges */
  .container { padding-inline:1rem; }
  .page-hero-content { padding-inline:1rem; }
}

/* =====================================================================
   DUAL-THEME FEMININE RESTYLE — targeted overrides
   Only colors/fonts change; layout, spacing, and every photo stay the
   same. GLOBAL rules apply to both themes; light-default fixes are then
   re-asserted for the dark pages (portfolio + charm-pageant).
   ===================================================================== */

/* ---- GLOBAL (both themes) ---- */

/* Text/icons that sit on top of darkened PHOTOS must always stay light */
#home-hero .hero-content h1,
.page-hero-content h1,
.service-card-content h3,
.portfolio-cat-info h3,
.lookbook-item-overlay span,
.app-showcase-text h2,
.app-store-btn,
.lightbox-close,
.lightbox-prev,
.lightbox-next { color:#F7EFE6; }

.btn-outline-light { color:#F7EFE6; border-color:rgba(247,239,230,0.4); }
.btn-outline-light:hover { border-color:var(--gold-light); background:rgba(255,255,255,0.08); }

/* Espresso text on every gold fill — consistent + classy on both themes */
.btn-gold,
.ann-bar p,
.ann-bar a,
.marquee-track span,
.marquee-item,
.badge-bestseller,
.product-quick-add,
.cart-checkout,
.blog-card-cat { color:var(--on-gold); }
.btn-gold:hover { box-shadow:0 12px 32px rgba(174,132,66,0.28); }

/* Soft rose woven into a few hover moments */
.footer-col ul li a:hover,
.blog-card-body h3 a:hover,
.mobile-nav-links a:hover { color:var(--rose); }

/* A touch more editorial air on small-caps labels */
.eyebrow { letter-spacing:0.3em; }

/* ---- LIGHT THEME (default) — fix hardcoded light-on-dark colors ---- */
.site-header.scrolled { background:rgba(251,239,234,0.92); border-bottom:1px solid var(--border); }
.testimonial-card p { color:rgba(74,65,61,0.9); }
.press-logos span { color:rgba(74,65,61,0.42); }
.pay-icon { background:rgba(120,95,70,0.06); }
.cart-overlay { background:rgba(58,45,38,0.5); }
.form-group select { color-scheme:light; }

/* ---- DARK PAGES (portfolio + charm-pageant) — restore dark-theme colors ---- */
body[data-page="portfolio"] .site-header.scrolled,
body[data-page="charm-pageant"] .site-header.scrolled { background:rgba(20,15,14,0.96); }
body[data-page="portfolio"] .testimonial-card p,
body[data-page="charm-pageant"] .testimonial-card p { color:rgba(245,237,227,0.82); }
body[data-page="portfolio"] .press-logos span,
body[data-page="charm-pageant"] .press-logos span { color:rgba(245,237,227,0.35); }
body[data-page="portfolio"] .pay-icon,
body[data-page="charm-pageant"] .pay-icon { background:rgba(255,255,255,0.04); }
body[data-page="portfolio"] .cart-overlay,
body[data-page="charm-pageant"] .cart-overlay { background:rgba(0,0,0,0.75); }
body[data-page="portfolio"] .form-group select,
body[data-page="charm-pageant"] .form-group select { color-scheme:dark; }

/* =====================================================================
   ELEGANT SCRIPT HEADLINES
   Script (Great Vibes) on the big DISPLAY headlines (h1/h2 — heroes &
   section titles). Small titles (h3/h4, card names), the logo, nav, form
   headings and body all stay in the sleek serif/sans for legibility.
   Script needs a size bump (small x-height) + extra line-height (tall
   flourishes), and no letter-spacing (the letters must connect).
   ===================================================================== */
h1, h2 { font-family:var(--script); font-weight:400; letter-spacing:0; line-height:1.2; }
h1 { font-size:clamp(4rem,9vw,8.5rem); }
h2 { font-size:clamp(3rem,6vw,5.4rem); }
h1 em, h2 em { font-style:normal; }   /* script has no italic — keep accent colour only */

/* Display headlines that sit over photos keep their layout-tuned sizes */
#home-hero .hero-content h1 { font-size:clamp(3.4rem,7vw,5.6rem); line-height:1.15; }
.page-hero-content h1 { font-size:clamp(3.8rem,8vw,6.8rem); line-height:1.12; }
.app-showcase-text h2 { font-size:clamp(2.6rem,4.5vw,3.6rem); }

@media(max-width:768px){
  h1 { font-size:clamp(3.4rem,15vw,5rem); }
  h2 { font-size:clamp(2.8rem,11vw,3.8rem); }
}
@media(max-width:480px){
  h1 { font-size:clamp(3rem,16vw,4.2rem); }
  h2 { font-size:clamp(2.4rem,13vw,3.2rem); }
}

/* =====================================================================
   FEMININE BODY COPY
   Paragraph text moves to an elegant serif (EB Garamond) for a softer,
   more feminine read; sizes/positions unchanged. Small uppercase labels,
   nav, buttons, and form fields stay in the clean sans for crispness.
   Bumped a touch (serif x-height is smaller) with airy line-height.
   ===================================================================== */
p, .legal-body li, .charm-path-list li, .pricing-name, .contact-detail-value, .cart-item-name {
  font-family:var(--body);
  letter-spacing:0.004em;
}
.ann-bar p { font-family:var(--sans); }  /* keep the tiny UI band crisp */
.hero-sub { font-size:1.05rem; }          /* serif x-height is smaller — a hair larger */

/* =====================================================================
   FEMININE IMAGE FRAMING — used selectively, only where it elevates
   Arched "window-cut" tops + gold keylines on the few hero/feature
   portrait images; service grids, category tiles, products, blog stay
   square. CSS-only — image sources, positions and layout unchanged.
   ===================================================================== */

/* ARCHED "window" images — the editorial feature shots only */
.about-split-img img,
.service-detail-img img,
.team-card-img {
  border-radius:46% 46% 4px 4px / 18% 18% 4px 4px;
  overflow:hidden;
}

/* GOLD KEYLINE FRAMES tracing those arched feature images */
.about-split-img::before {
  border:1px solid var(--gold);
  border-radius:46% 46% 4px 4px / 18% 18% 4px 4px;
}
.service-detail-img { position:relative; }
.service-detail-img::after {
  content:""; position:absolute; inset:11px; pointer-events:none; z-index:2;
  border:1px solid rgba(203,168,106,0.55);
  border-radius:44% 44% 3px 3px / 16% 16% 3px 3px;
}

/* =====================================================================
   LOOKBOOK — a softer, editorial "staggered portraits" layout
   (a more feminine way to arrange the gallery: arched tops, varied
   heights, and a gentle vertical wave instead of a rigid grid).
   ===================================================================== */
.lookbook-grid { gap:clamp(12px,1.6vw,22px); align-items:start; }
.lookbook-item { border-radius:46% 46% 4px 4px / 16% 16% 4px 4px; }
.lookbook-item:nth-child(odd)  { aspect-ratio:3/4.25; }
.lookbook-item:nth-child(even) { aspect-ratio:3/3.7; }
.lookbook-item:nth-child(2) { margin-top:44px; }
.lookbook-item:nth-child(3) { margin-top:14px; }
.lookbook-item:nth-child(4) { margin-top:58px; }
.lookbook-item:nth-child(5) { margin-top:24px; }

@media(max-width:768px){
  .about-split-img img, .service-detail-img img, .team-card-img {
    border-radius:34% 34% 4px 4px / 12% 12% 4px 4px;  /* gentler arch on phones */
  }
  .lookbook-item { margin-top:0 !important; aspect-ratio:3/4; }  /* no stagger on small grids */
}

/* =====================================================================
   HEADER LEGIBILITY ON THE CREAM HOME HERO
   The transparent (top-of-page) header was built for a dark PHOTO hero,
   so its light nav text disappeared on the cream home hero — only the
   gold "Charm Pageant" stayed visible. Force dark nav text on the home
   header so every menu item is readable. (Interior pages keep light text
   because they still sit over dark image heroes.)
   ===================================================================== */
/* DEFAULT (light pages): dark, readable nav so every tab stays visible at the
   top of the page — fixes invisible nav on home, shop, booking, legal pages, etc. */
.site-header:not(.scrolled) .nav-link,
.site-header:not(.scrolled) .header-actions a,
.site-header:not(.scrolled) .header-actions button { color:var(--text); }
.site-header:not(.scrolled) .nav-link:hover,
.site-header:not(.scrolled) .nav-link.active { color:var(--gold); }
.site-header:not(.scrolled) .logo-word { color:var(--inv); }
.site-header:not(.scrolled) .logo-tag { color:var(--gold); }
.site-header:not(.scrolled) .burger { color:var(--text); }

/* Pages that DO sit over a dark image hero keep the original light nav text. */
body:has(.page-hero) .site-header:not(.scrolled) .nav-link,
body:has(.page-hero) .site-header:not(.scrolled) .header-actions a,
body:has(.page-hero) .site-header:not(.scrolled) .header-actions button { color:rgba(245,237,227,0.7); }
body:has(.page-hero) .site-header:not(.scrolled) .nav-link:hover,
body:has(.page-hero) .site-header:not(.scrolled) .nav-link.active { color:var(--inv); }
body:has(.page-hero) .site-header:not(.scrolled) .logo-word { color:var(--inv); }
body:has(.page-hero) .site-header:not(.scrolled) .logo-tag { color:var(--gold-pale); }
body:has(.page-hero) .site-header:not(.scrolled) .burger { color:var(--inv); }

/* Scrolled header: theme-aware bar (light/blush on light pages, espresso on dark
   pages) instead of a hardcoded near-black band — matches the Rosé & Mauve look. */
.site-header.scrolled { background:color-mix(in srgb, var(--surface) 92%, transparent); border-bottom:1px solid var(--border); }
.site-header.scrolled .nav-link { color:var(--text); }
.site-header.scrolled .nav-link:hover,
.site-header.scrolled .nav-link.active { color:var(--gold); }
.site-header.scrolled .header-actions a,
.site-header.scrolled .header-actions button { color:var(--text); }
.site-header.scrolled .header-actions a:hover,
.site-header.scrolled .header-actions button:hover { color:var(--gold); }
.site-header.scrolled .logo-word { color:var(--inv); }
.site-header.scrolled .logo-tag { color:var(--gold); }
.site-header.scrolled .burger { color:var(--text); }

/* =====================================================================
   DARK CHARCOAL FEATURE BAND (home) — keeps the rich black-mocha drama
   inside the cream flow. Charcoal bands are SCATTERED across the site —
   alternating with cream so the dark appears here and there, never in a
   block — plus a charcoal footer site-wide as the anchor.
   ===================================================================== */
body[data-page="home"] .about-split,                                        /* home: "Crafting Confidence" band */
body[data-page="services"] .service-detail:has(.service-detail-inner.reverse), /* services: alternating rows (Hair, Artist Training) */
body[data-page="about"] .stats-banner,                                      /* about: "by the numbers" band */
.site-footer {                                                              /* every page: charcoal footer anchor */
  --surface:var(--d-surface); --surface-2:var(--d-surface-2);
  --dark:var(--d-bg); --dark-2:var(--d-dark-2);
  --text:var(--d-text); --muted:var(--d-muted); --cream:var(--d-cream); --inv:var(--d-cream); --inv-muted:var(--d-inv-muted);
  --gold:var(--d-gold); --gold-light:var(--d-gold-light); --gold-pale:var(--d-gold-pale); --gold-dim:var(--d-gold-dim);
  --rose:var(--d-rose); --border:var(--d-border);
  background:var(--d-bg); color:var(--d-text);
}
/* small hardcoded light-on-dark fixups inside the charcoal footer */
.site-footer .pay-icon { background:rgba(255,255,255,0.05); }
.site-footer .press-logos span { color:rgba(245,237,227,0.4); }

/* === Rosé & Mauve palette + fonts (override, must stay last) === */
:root {
  --bg:#F6E9E6; --surface:#FCF3F0; --surface-2:#EFDAD5; --dark:#ECD7D2; --dark-2:#F4E4E0;
  --text:#4A3A3C; --muted:#8A6E72; --cream:#3A2A30; --inv:#3A2A30; --inv-muted:#6E5A60;
  --gold:#BC8C6C; --gold-light:#D8AB8C; --gold-pale:#BC8C6C; --gold-dim:rgba(188,140,108,0.12);
  --rose:#C67E9E; --mauve:#A56E86; --on-gold:#3A2A22;
  --border:rgba(120,80,90,0.22); --border-sub:rgba(58,42,48,0.07);
  --serif:'Fraunces',Georgia,serif;
  --body:'DM Sans',system-ui,sans-serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --script:'Great Vibes','Cormorant Garamond',cursive;
  /* deep plum dark tone */
  --d-bg:#2A1622; --d-surface:#341C2A; --d-surface-2:#3F2333; --d-dark:#23121C; --d-dark-2:#1E0F18;
  --d-text:#F0DDE6; --d-muted:#C29CAE; --d-cream:#F8E9F0; --d-inv-muted:#C9A8B8;
  --d-gold:#D9AE86; --d-gold-light:#ECC6A2; --d-gold-pale:#F0D8BE; --d-gold-dim:rgba(217,174,134,0.16);
  --d-rose:#E2A6C2; --d-mauve:#CC9CB2; --d-on-gold:#2A1622; --d-border:rgba(240,221,230,0.14);
}