/* =====================================================================
   MOTEE AESTHETICS — Core Stylesheet
   Brand: rose-gold metallic · warm cream · gold shimmer
   Type:  Playfair Display (display) + Jost (UI / body)
   Author: built for Motee Aesthetics
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root{
  /* Surfaces — warm, matched to the logo's near-white ground */
  --ivory:        #FCF8F4;
  --cream:        #F6ECE3;
  --champagne:    #EFE1D4;
  --blush:        #F4DEDF;
  --blush-soft:   #FAEDED;
  --blush-deep:   #E7C7C9;

  /* Rose gold (the logo's metal) */
  --rose:         #B27C81;
  --rose-deep:    #8C5358;
  --rose-light:   #D7AEB1;
  --rose-muted:   #C29A9D;

  /* Gold shimmer accent */
  --gold:         #BE9A4A;
  --gold-light:   #E6CD86;
  --gold-pale:    #F3E6C4;

  /* Ink */
  --ink:          #3A2C2D;
  --ink-soft:     #6B5557;
  --ink-faint:    #9A8587;

  /* Lines & shadow */
  --line:         rgba(140, 83, 88, .16);
  --line-strong:  rgba(140, 83, 88, .30);
  --shadow-sm:    0 2px 14px rgba(120, 78, 82, .08);
  --shadow-md:    0 18px 50px -22px rgba(120, 70, 74, .35);
  --shadow-lg:    0 40px 90px -40px rgba(110, 62, 66, .45);

  /* Gradients */
  --metal: linear-gradient(135deg,#E0BABD 0%,#C2999D 18%,#B27C81 42%,#8C5358 62%,#B98A8E 82%,#E0BABD 100%);
  --metal-soft: linear-gradient(135deg,#D7AEB1,#B27C81 55%,#9C5F64);
  --gold-line: linear-gradient(90deg,rgba(190,154,74,0) 0%,var(--gold-light) 35%,#FFFDF6 50%,var(--gold) 65%,rgba(190,154,74,0) 100%);
  --rose-band: linear-gradient(135deg,#8C5358 0%,#A4646A 45%,#7E4A50 100%);

  /* Type */
  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-ui:      "Jost", "Century Gothic", system-ui, -apple-system, sans-serif;

  /* Rhythm */
  --maxw:         1180px;
  --maxw-narrow:  760px;
  --gutter:       clamp(20px, 5vw, 48px);
  --section-y:    clamp(72px, 9vw, 132px);
  --radius:       18px;
  --radius-lg:    28px;

  --ease:         cubic-bezier(.22,.61,.36,1);
  --nav-h:        78px;
}

/* ---------------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}

body{
  font-family:var(--font-ui);
  font-weight:400;
  color:var(--ink);
  background:var(--ivory);
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

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

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.12; color:var(--ink); }

::selection{ background:var(--blush-deep); color:var(--rose-deep); }

:focus-visible{
  outline:2px solid var(--rose-deep);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:16px; top:-60px;
  background:var(--rose-deep); color:#fff;
  padding:10px 18px; border-radius:0 0 10px 10px;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  z-index:2000; transition:top .25s var(--ease);
}
.skip-link:focus{ top:0; }

/* ---------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   --------------------------------------------------------------------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.container--narrow{ max-width:var(--maxw-narrow); }

.section{ padding-block:var(--section-y); position:relative; }
.section--cream{ background:var(--cream); }
.section--blush{ background:linear-gradient(180deg,var(--blush-soft),#FCEFEF); }
.section--tight{ padding-block:clamp(54px,6vw,84px); }

/* Eyebrow + heading pattern */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--font-ui); font-weight:500;
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--rose-deep);
}
.eyebrow::before{
  content:""; width:30px; height:1px;
  background:var(--metal-soft);
}
.eyebrow--center{ }
.eyebrow--center::after{
  content:""; width:30px; height:1px; background:var(--metal-soft);
}

.section-head{ max-width:660px; margin-bottom:clamp(36px,5vw,60px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ margin-bottom:18px; }
.section-head .title{
  font-size:clamp(2rem,4.6vw,3.3rem);
  letter-spacing:-.012em;
  margin-top:18px;
}
.section-head .lede{
  margin-top:20px; color:var(--ink-soft);
  font-size:1.05rem; max-width:56ch;
}
.section-head--center .lede{ margin-inline:auto; }

/* Metallic text fill (used sparingly on display headings) */
.metal-text{
  background:var(--metal);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  /* graceful fallback */
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .metal-text{ color:var(--rose-deep); -webkit-text-fill-color:currentColor; }
}

.serif-accent{ font-family:var(--font-display); font-style:italic; }

/* ---------------------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------------------- */
.btn{
  --pad-y:15px; --pad-x:30px;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:var(--pad-y) var(--pad-x);
  font-family:var(--font-ui); font-weight:500;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  border-radius:50px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primary{
  background:linear-gradient(135deg,var(--rose) 0%,var(--rose-deep) 100%);
  color:#FFF8F4;
  box-shadow:0 14px 30px -14px rgba(140,83,88,.7);
}
.btn--primary:hover{ box-shadow:0 20px 40px -14px rgba(140,83,88,.85); }

.btn--ghost{
  background:transparent;
  color:var(--rose-deep);
  border:1px solid var(--line-strong);
}
.btn--ghost:hover{ border-color:var(--rose-deep); background:rgba(178,124,129,.06); }

.btn--light{
  background:rgba(255,255,255,.92);
  color:var(--rose-deep);
  box-shadow:var(--shadow-sm);
}
.btn--light:hover{ background:#fff; }

.btn--on-dark{
  background:#FCF8F4; color:var(--rose-deep);
}
.btn--on-dark:hover{ background:#fff; }

.btn--block{ width:100%; }
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

.text-link{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:500; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rose-deep);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.text-link:hover{ border-color:var(--rose); gap:.85em; }

/* ---------------------------------------------------------------------
   5. SHIMMER WAVE (signature element) + DIVIDERS
   --------------------------------------------------------------------- */
.shimmer-divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:0 auto;
}
.shimmer-divider .line{
  height:1px; width:min(120px,22vw);
  background:var(--gold-line);
}
.shimmer-divider .dot{
  width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FFFDF6,var(--gold));
  box-shadow:0 0 10px rgba(230,205,134,.9);
}

/* animated sparkle motif used as a small flourish */
.sparkle{
  position:relative; display:inline-block;
  width:14px; height:14px; vertical-align:middle;
}
.sparkle::before,.sparkle::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle, #FFFDF6 0%, var(--gold-light) 30%, transparent 60%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}
.sparkle::after{ transform:scale(.45) rotate(45deg); opacity:.8; }

/* ---------------------------------------------------------------------
   6. NAVIGATION
   --------------------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease);
}
.nav__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__brand{ display:flex; align-items:center; flex:0 0 auto; }
.nav__brand img{ height:42px; width:auto; transition:height .4s var(--ease); }

.nav__links{
  display:flex; align-items:center; gap:clamp(20px,2.4vw,38px);
}
.nav__link{
  position:relative;
  font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); padding-block:8px;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--metal-soft);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{ color:var(--rose-deep); }
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); }

.nav__cta{ flex:0 0 auto; }
.nav__cta .btn{ --pad-y:11px; --pad-x:24px; font-size:.72rem; }

/* solid state on scroll */
.nav.is-scrolled{
  height:66px;
  background:rgba(252,248,244,.88);
  backdrop-filter:saturate(120%) blur(14px);
  -webkit-backdrop-filter:saturate(120%) blur(14px);
  box-shadow:0 1px 0 var(--line), 0 12px 30px -22px rgba(120,70,74,.4);
}
.nav.is-scrolled .nav__brand img{ height:36px; }

/* hamburger */
.nav__toggle{
  display:none; width:44px; height:44px; position:relative; z-index:1200;
  border-radius:50%;
}
.nav__toggle span{
  position:absolute; left:11px; right:11px; height:1.6px; border-radius:2px;
  background:var(--ink); transition:transform .35s var(--ease), opacity .25s var(--ease), background .3s var(--ease);
}
.nav__toggle span:nth-child(1){ top:16px; }
.nav__toggle span:nth-child(2){ top:21.2px; }
.nav__toggle span:nth-child(3){ top:26.4px; }
body.menu-open .nav__toggle span:nth-child(1){ transform:translateY(5.2px) rotate(45deg); }
body.menu-open .nav__toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav__toggle span:nth-child(3){ transform:translateY(-5.2px) rotate(-45deg); }

/* mobile drawer */
.nav__drawer{
  position:fixed; inset:0; z-index:1100;
  background:linear-gradient(165deg,#FCF8F4 0%,#F7E9E6 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:90px 24px 40px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
body.menu-open .nav__drawer{ opacity:1; visibility:visible; transform:none; }
.nav__drawer a{
  font-family:var(--font-display);
  font-size:1.7rem; color:var(--ink);
  padding:10px 0; letter-spacing:.01em;
  opacity:0; transform:translateY(14px);
}
body.menu-open .nav__drawer a{ animation:drawerIn .5s var(--ease) forwards; }
body.menu-open .nav__drawer a:nth-child(1){ animation-delay:.08s; }
body.menu-open .nav__drawer a:nth-child(2){ animation-delay:.14s; }
body.menu-open .nav__drawer a:nth-child(3){ animation-delay:.20s; }
body.menu-open .nav__drawer a:nth-child(4){ animation-delay:.26s; }
body.menu-open .nav__drawer a:nth-child(5){ animation-delay:.32s; }
body.menu-open .nav__drawer a:nth-child(6){ animation-delay:.38s; }
body.menu-open .nav__drawer .btn{ margin-top:18px; animation:drawerIn .5s var(--ease) .46s forwards; opacity:0; font-family:var(--font-ui); }
.nav__drawer a[aria-current="page"]{ color:var(--rose-deep); font-style:italic; }
@keyframes drawerIn{ to{ opacity:1; transform:none; } }

.nav__drawer-tag{
  margin-top:26px; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-faint); opacity:0;
}
body.menu-open .nav__drawer-tag{ animation:drawerIn .5s var(--ease) .54s forwards; }

/* ---------------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding-top:var(--nav-h); padding-bottom:40px;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, #FFFFFF 0%, var(--ivory) 38%, #F6E7E2 100%);
}
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__glow{
  position:absolute; width:62vw; height:62vw; max-width:760px; max-height:760px;
  left:50%; top:38%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(215,174,177,.45) 0%, rgba(244,222,223,.25) 40%, transparent 70%);
  filter:blur(8px);
}
.hero__inner{ position:relative; z-index:2; width:100%; text-align:center; }
.hero__logo{
  width:min(560px,82vw); margin:0 auto 6px;
  filter:drop-shadow(0 20px 40px rgba(150,100,104,.18));
  animation:floatLogo 7s ease-in-out infinite;
}
@keyframes floatLogo{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

.hero__eyebrow{ margin-bottom:22px; justify-content:center; }
.hero__headline{
  font-size:clamp(2.1rem,5.3vw,3.9rem);
  font-weight:500; line-height:1.08; letter-spacing:-.015em;
  margin:0 auto;
}
.hero__headline em{ font-style:italic; color:var(--rose-deep); }
.hero__sub{
  margin:24px auto 0; max-width:54ch;
  color:var(--ink-soft); font-size:1.08rem;
}
.hero__cta{
  margin-top:38px; display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
}
.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:3;
  font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-faint);
}
.hero__scroll .mouse{
  width:22px; height:36px; border:1px solid var(--line-strong); border-radius:14px;
  position:relative;
}
.hero__scroll .mouse::after{
  content:""; position:absolute; left:50%; top:7px; transform:translateX(-50%);
  width:3px; height:7px; border-radius:3px; background:var(--rose);
  animation:scrollDot 1.8s var(--ease) infinite;
}
@keyframes scrollDot{ 0%{ opacity:0; transform:translate(-50%,0); } 40%{ opacity:1; } 80%,100%{ opacity:0; transform:translate(-50%,11px); } }

/* floating sparkles in hero */
.hero__spark{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle,#FFFDF6,var(--gold-light) 45%,transparent 70%);
  box-shadow:0 0 12px rgba(230,205,134,.8);
  animation:twinkle 4s ease-in-out infinite;
  z-index:1;
}
@keyframes twinkle{ 0%,100%{ opacity:.25; transform:scale(.7);} 50%{ opacity:1; transform:scale(1);} }

/* ---------------------------------------------------------------------
   8. INTRO / WELCOME (split)
   --------------------------------------------------------------------- */
.intro{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px); align-items:center; }
.intro__media{ position:relative; }
.intro__body .eyebrow{ margin-bottom:18px; }
.intro__body .title{ font-size:clamp(1.9rem,3.6vw,2.8rem); }
.intro__body p{ margin-top:18px; color:var(--ink-soft); }
.intro__sign{
  margin-top:26px; font-family:var(--font-display); font-style:italic;
  font-size:1.5rem; color:var(--rose-deep);
}

/* ---------------------------------------------------------------------
   9. PHOTO FRAME / PLACEHOLDER (elegant, on-brand)
   Replace the inner content with: <img src="images/your-photo.jpg" alt="...">
   --------------------------------------------------------------------- */
.frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:
    linear-gradient(135deg,var(--blush-soft) 0%, var(--blush) 45%, var(--champagne) 100%);
  box-shadow:var(--shadow-md);
}
.frame::after{ /* thin metallic inner border */
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), inset 0 0 0 2px var(--line);
  pointer-events:none;
}
.frame img{ width:100%; height:100%; object-fit:cover; }
.frame--portrait{ aspect-ratio:4/5; }
.frame--square{ aspect-ratio:1/1; }
.frame--wide{ aspect-ratio:3/2; }
.frame--tall{ aspect-ratio:3/4; }

/* placeholder visual (shown until a real <img> is added) */
.frame__ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:24px; color:var(--rose-deep);
}
.frame__ph svg{ width:40px; height:40px; opacity:.5; }
.frame__ph .ph-label{
  font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--rose-deep);
}
.frame__ph .ph-note{
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint);
}
.frame__corner{ position:absolute; width:22px; height:22px; border:1px solid var(--rose-muted); opacity:.6; }
.frame__corner.tl{ top:16px; left:16px; border-right:0; border-bottom:0; }
.frame__corner.tr{ top:16px; right:16px; border-left:0; border-bottom:0; }
.frame__corner.bl{ bottom:16px; left:16px; border-right:0; border-top:0; }
.frame__corner.br{ bottom:16px; right:16px; border-left:0; border-top:0; }

.intro__badge{
  position:absolute; right:-14px; bottom:-14px;
  width:120px; height:120px; border-radius:50%;
  background:var(--rose-band); color:#FCEFEF;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; box-shadow:var(--shadow-md);
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; line-height:1.5;
}
.intro__badge strong{ font-family:var(--font-display); font-size:1.5rem; font-weight:500; letter-spacing:0; }

/* ---------------------------------------------------------------------
   10. SERVICE / FEATURE CARDS
   --------------------------------------------------------------------- */
.cards{ display:grid; gap:26px; }
.cards--3{ grid-template-columns:repeat(3,1fr); }
.cards--2{ grid-template-columns:repeat(2,1fr); }
.cards--4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px 30px;
  position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card::before{
  content:""; position:absolute; left:0; top:0; right:0; height:2px;
  background:var(--gold-line); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.card:hover::before{ transform:scaleX(1); }
.card__icon{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:20px;
  background:linear-gradient(135deg,var(--blush),var(--champagne));
  color:var(--rose-deep);
}
.card__icon svg{ width:26px; height:26px; }
.card__title{ font-size:1.32rem; }
.card__text{ margin-top:12px; color:var(--ink-soft); font-size:.96rem; }
.card--plain{ text-align:center; padding:30px 24px; background:var(--ivory); }
.card--plain .card__title{ font-size:1.18rem; letter-spacing:.01em; }
.card--plain .card__text{ font-size:.9rem; margin-top:10px; }

/* Service (price) cards */
.service-card{
  background:var(--ivory); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--rose-muted); }
.service-card.is-featured{ border-color:var(--rose-muted); box-shadow:var(--shadow-md); }
.service-card__media{ position:relative; }
.service-card__media .frame{ border-radius:0; box-shadow:none; }
.service-card__media .frame::after{ box-shadow:none; }
.service-card__tag{
  position:absolute; top:16px; left:16px; z-index:2;
  background:rgba(252,248,244,.92); color:var(--rose-deep);
  padding:7px 15px; border-radius:40px;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  box-shadow:var(--shadow-sm);
}
.service-card__body{ padding:30px 28px 32px; display:flex; flex-direction:column; flex:1; }
.service-card__row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.service-card__name{ font-size:1.5rem; }
.service-card__price{
  font-family:var(--font-display); font-size:1.5rem; color:var(--rose-deep); white-space:nowrap;
}
.service-card__meta{
  margin-top:6px; display:flex; align-items:center; gap:10px;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
}
.service-card__meta .pipe{ width:4px; height:4px; border-radius:50%; background:var(--rose-muted); }
.service-card__desc{ margin-top:18px; color:var(--ink-soft); font-size:.96rem; flex:1; }
.service-card__cta{ margin-top:26px; }

/* ---------------------------------------------------------------------
   11. PRICE LIST (alt layout)
   --------------------------------------------------------------------- */
.pricelist{ display:grid; gap:0; }
.price-row{
  display:grid; grid-template-columns:1fr auto; gap:10px 24px;
  padding:30px 0; border-bottom:1px solid var(--line);
  align-items:start;
}
.price-row:first-child{ border-top:1px solid var(--line); }
.price-row__name{ font-family:var(--font-display); font-size:1.5rem; }
.price-row__price{ font-family:var(--font-display); font-size:1.4rem; color:var(--rose-deep); text-align:right; white-space:nowrap; }
.price-row__meta{ grid-column:1; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-top:2px; }
.price-row__desc{ grid-column:1 / -1; color:var(--ink-soft); margin-top:14px; max-width:70ch; font-size:.97rem; }

/* ---------------------------------------------------------------------
   12. VALUES / STEPS
   --------------------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; counter-reset:step; }
.step{ position:relative; padding-top:18px; }
.step__num{
  font-family:var(--font-display); font-style:italic; font-size:2.4rem;
  color:var(--rose-light);
}
.step__title{ font-size:1.25rem; margin-top:8px; }
.step__text{ margin-top:10px; color:var(--ink-soft); font-size:.95rem; }

/* ---------------------------------------------------------------------
   13. GALLERY
   --------------------------------------------------------------------- */
.gallery-filter{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px;
}
.gallery-filter button{
  padding:9px 20px; border-radius:40px; border:1px solid var(--line);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  color:var(--ink-soft); background:var(--ivory);
  transition:all .3s var(--ease);
}
.gallery-filter button:hover{ border-color:var(--rose-muted); color:var(--rose-deep); }
.gallery-filter button.is-active{
  background:var(--rose-band); color:#FCEFEF; border-color:transparent;
}

.gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  grid-auto-flow:dense;
}
.gallery__item{
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer;
  background:linear-gradient(135deg,var(--blush-soft),var(--champagne));
  box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.gallery__item.tall{ grid-row:span 2; }
.gallery__item:not(.tall){ aspect-ratio:1/1; }
.gallery__item.tall{ aspect-ratio:1/2; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery__item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.gallery__item:hover img{ transform:scale(1.06); }
.gallery__item .ph-mini{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; color:var(--rose-deep); padding:16px; text-align:center;
}
.gallery__item .ph-mini svg{ width:30px; height:30px; opacity:.45; }
.gallery__item .ph-mini span{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); }
.gallery__item .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 18px; color:#fff;
  background:linear-gradient(0deg,rgba(58,44,45,.6),transparent);
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:all .4s var(--ease);
}
.gallery__item:hover .cap{ opacity:1; transform:none; }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:2000;
  background:rgba(40,28,30,.86); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(92vw,1000px); max-height:86vh; border-radius:12px; box-shadow:var(--shadow-lg); }
.lightbox__close,.lightbox__nav{
  position:absolute; color:#FCEFEF; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.1);
  transition:background .3s var(--ease);
}
.lightbox__close:hover,.lightbox__nav:hover{ background:rgba(255,255,255,.22); }
.lightbox__close{ top:22px; right:22px; font-size:1.4rem; }
.lightbox__nav{ top:50%; transform:translateY(-50%); font-size:1.6rem; }
.lightbox__nav.prev{ left:18px; }
.lightbox__nav.next{ right:18px; }

/* ---------------------------------------------------------------------
   14. INSTAGRAM STRIP
   --------------------------------------------------------------------- */
.ig-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.ig-tile{
  position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg,var(--blush-soft),var(--champagne));
  box-shadow:var(--shadow-sm);
}
.ig-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.ig-tile:hover img{ transform:scale(1.07); }
.ig-tile .ig-overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(140,83,88,.0); color:#fff; opacity:0; transition:all .35s var(--ease);
}
.ig-tile:hover .ig-overlay{ background:rgba(140,83,88,.45); opacity:1; }
.ig-tile .ig-overlay svg{ width:26px; height:26px; }
.ig-tile .ig-ph{ position:absolute; inset:0; display:grid; place-items:center; color:var(--rose-muted); }
.ig-tile .ig-ph svg{ width:30px; height:30px; opacity:.55; }
.ig-handle{
  display:inline-flex; align-items:center; gap:10px; margin-top:6px;
  font-size:.84rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rose-deep); font-weight:500;
}

/* ---------------------------------------------------------------------
   15. TESTIMONIALS
   --------------------------------------------------------------------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.quote{
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px; position:relative;
}
.quote__mark{ font-family:var(--font-display); font-size:3.4rem; line-height:.6; color:var(--rose-light); }
.quote__text{ margin-top:8px; font-family:var(--font-display); font-style:italic; font-size:1.12rem; color:var(--ink); }
.quote__stars{ margin-top:18px; color:var(--gold); letter-spacing:3px; font-size:.9rem; }
.quote__name{ margin-top:10px; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }

/* ---------------------------------------------------------------------
   16. CTA BAND
   --------------------------------------------------------------------- */
.cta-band{
  position:relative; overflow:hidden;
  background:var(--rose-band); color:#FBEDED;
  text-align:center; padding-block:clamp(64px,8vw,108px);
}
.cta-band::before,.cta-band::after{
  content:""; position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,250,240,.18), transparent 70%);
}
.cta-band::before{ width:420px; height:420px; left:-120px; top:-160px; }
.cta-band::after{ width:480px; height:480px; right:-160px; bottom:-200px; }
.cta-band__inner{ position:relative; z-index:2; max-width:680px; margin-inline:auto; }
.cta-band .eyebrow{ color:#F4D7D8; justify-content:center; }
.cta-band .eyebrow::before,.cta-band .eyebrow::after{ background:rgba(244,215,216,.6); }
.cta-band__title{ color:#FFF6F2; font-size:clamp(2rem,4.6vw,3.2rem); margin-top:16px; }
.cta-band__text{ margin-top:18px; color:#F2D8D9; }
.cta-band__cta{ margin-top:34px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------------------------------------------------------------------
   17. CONTACT / FORM
   --------------------------------------------------------------------- */
.contact{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(36px,6vw,72px); align-items:start; }
.contact__info .lede{ color:var(--ink-soft); margin-top:18px; }
.info-list{ margin-top:34px; display:grid; gap:22px; }
.info-item{ display:flex; gap:16px; align-items:flex-start; }
.info-item__ic{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; color:var(--rose-deep);
  background:linear-gradient(135deg,var(--blush),var(--champagne));
}
.info-item__ic svg{ width:22px; height:22px; }
.info-item__label{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); }
.info-item__value{ font-size:1.05rem; color:var(--ink); margin-top:3px; }
.info-item__value a:hover{ color:var(--rose-deep); }

.socials{ display:flex; gap:12px; margin-top:30px; }
.socials a{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--rose-deep);
  transition:all .3s var(--ease);
}
.socials a:hover{ background:var(--rose-band); color:#fff; border-color:transparent; transform:translateY(-3px); }
.socials svg{ width:20px; height:20px; }

.form-card{
  background:var(--ivory); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(28px,4vw,44px);
  box-shadow:var(--shadow-md);
}
.field{ margin-bottom:20px; }
.field label{
  display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:9px; font-weight:500;
}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--font-ui); font-size:.98rem; color:var(--ink);
  background:#fff; border:1px solid var(--line-strong); border-radius:12px;
  padding:14px 16px; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--rose); box-shadow:0 0 0 3px rgba(178,124,129,.14);
}
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-msg{
  margin-top:8px; padding:14px 16px; border-radius:12px; font-size:.9rem; display:none;
}
.form-msg.show{ display:block; }
.form-msg.ok{ background:#EAF5EC; color:#2F6B40; border:1px solid #C8E6CF; }
.form-msg.err{ background:#FBECEC; color:#9C3A3A; border:1px solid #F0CFCF; }
.form-fine{ margin-top:14px; font-size:.78rem; color:var(--ink-faint); }

/* ---------------------------------------------------------------------
   18. FAQ
   --------------------------------------------------------------------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 0; font-family:var(--font-display); font-size:1.18rem; color:var(--ink);
}
.faq__q .ic{ flex:0 0 auto; width:26px; height:26px; position:relative; }
.faq__q .ic::before,.faq__q .ic::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--rose-deep);
  transition:transform .3s var(--ease);
}
.faq__q .ic::before{ width:14px; height:1.6px; transform:translate(-50%,-50%); }
.faq__q .ic::after{ width:1.6px; height:14px; transform:translate(-50%,-50%); }
.faq__item.open .ic::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq__a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq__a p{ padding:0 0 24px; color:var(--ink-soft); max-width:68ch; }

/* ---------------------------------------------------------------------
   19. PAGE HEADER (interior pages)
   --------------------------------------------------------------------- */
.page-head{
  position:relative; padding-top:calc(var(--nav-h) + clamp(50px,7vw,86px));
  padding-bottom:clamp(50px,7vw,86px);
  text-align:center; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%, #FFFFFF 0%, var(--ivory) 45%, #F7E8E4 100%);
}
.page-head__inner{ position:relative; z-index:2; max-width:720px; margin-inline:auto; }
.page-head .eyebrow{ justify-content:center; margin-bottom:18px; }
.page-head__title{ font-size:clamp(2.4rem,5.6vw,4rem); letter-spacing:-.015em; }
.page-head__title em{ font-style:italic; color:var(--rose-deep); }
.page-head__sub{ margin-top:20px; color:var(--ink-soft); font-size:1.08rem; }
.breadcrumb{
  margin-top:24px; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
}
.breadcrumb a:hover{ color:var(--rose-deep); }
.breadcrumb span{ margin:0 8px; color:var(--rose-light); }

/* ---------------------------------------------------------------------
   20. FOOTER
   --------------------------------------------------------------------- */
.footer{
  background:linear-gradient(180deg,#4A383A 0%, #3A2C2D 100%);
  color:#E9D9DA; padding-top:clamp(60px,7vw,90px);
}
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; }
.footer__brand .wordmark{ margin-bottom:18px; }
.footer__brand p{ color:#C7B4B6; font-size:.95rem; max-width:34ch; }
.wordmark{ display:inline-block; line-height:1; }
.wordmark .wm-main{
  font-family:var(--font-display); font-size:1.9rem; font-weight:600; letter-spacing:.04em;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  display:block;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){ .wordmark .wm-main{ color:var(--rose-light); -webkit-text-fill-color:currentColor; } }
.wordmark .wm-sub{
  display:block; font-family:var(--font-ui); font-size:.6rem; letter-spacing:.5em; text-transform:uppercase;
  color:var(--rose-light); margin-top:6px; padding-left:.2em;
}
.footer__col h4{
  font-family:var(--font-ui); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase;
  color:#C29A9D; margin-bottom:18px;
}
.footer__col ul{ display:grid; gap:11px; }
.footer__col a{ color:#D9C8C9; font-size:.92rem; transition:color .3s var(--ease); }
.footer__col a:hover{ color:#fff; }
.footer__socials{ display:flex; gap:10px; margin-top:8px; }
.footer__socials a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(233,217,218,.2); color:#E9D9DA; transition:all .3s var(--ease);
}
.footer__socials a:hover{ background:var(--rose); border-color:transparent; color:#fff; transform:translateY(-3px); }
.footer__socials svg{ width:18px; height:18px; }
.footer__bar{
  border-top:1px solid rgba(233,217,218,.14);
  padding:22px 0 30px; display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between;
  font-size:.78rem; color:#B7A4A6;
}
.footer__bar a:hover{ color:#fff; }

/* ---------------------------------------------------------------------
   21. REVEAL ANIMATIONS + BACK TO TOP
   --------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }

.to-top{
  position:fixed; right:24px; bottom:24px; z-index:900;
  width:48px; height:48px; border-radius:50%;
  background:var(--rose-band); color:#fff; display:grid; place-items:center;
  box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(12px);
  transition:all .35s var(--ease);
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ transform:translateY(-3px); }
.to-top svg{ width:18px; height:18px; }

/* ---------------------------------------------------------------------
   19b. SERVICE DETAIL / CHIPS / TICKS / BRIDAL / TIMELINE
   --------------------------------------------------------------------- */
.price-row--link{ text-decoration:none; transition:background .3s var(--ease), padding .3s var(--ease); }
.price-row--link:hover{ background:var(--cream); }
.price-row--link:hover .price-row__name{ color:var(--rose-deep); }

.service-detail{
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,6vw,72px); align-items:center;
}
.service-detail--reverse .service-detail__media{ order:2; }
.service-detail__body .title{ margin-top:6px; }
.service-detail__body p{ margin-top:16px; color:var(--ink-soft); }
.service-detail__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 18px; border-radius:40px; font-size:.82rem; font-weight:500; letter-spacing:.02em;
  background:var(--rose-band); color:#FCEFEF;
}
.chip--ghost{ background:transparent; color:var(--rose-deep); border:1px solid var(--rose-light); }
.service-detail__perfect{ background:var(--blush-soft); border-left:3px solid var(--rose-light); padding:16px 20px; border-radius:0 10px 10px 0; margin-top:24px !important; font-size:.95rem; }
.service-detail__perfect strong{ color:var(--rose-deep); }
.service-detail__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

.ticks{ margin-top:16px; display:grid; gap:12px; }
.ticks li{ position:relative; padding-left:32px; color:var(--ink-soft); font-size:.97rem; }
.ticks li::before{
  content:""; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg,var(--blush),var(--champagne));
}
.ticks li::after{
  content:""; position:absolute; left:6.5px; top:6px; width:8px; height:5px;
  border-left:1.6px solid var(--rose-deep); border-bottom:1.6px solid var(--rose-deep);
  transform:rotate(-45deg);
}

.bridal-teaser{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,6vw,64px); align-items:center; }
.bridal-teaser__content p{ margin-top:16px; color:var(--ink-soft); }
.bridal-teaser__media{ max-width:360px; width:100%; justify-self:end; }

/* Included grid (bridal) */
.incl-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 36px; margin-top:10px; }
.incl-item{ display:flex; gap:16px; align-items:flex-start; }
.incl-item__ic{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--blush),var(--champagne)); color:var(--rose-deep);
}
.incl-item__ic svg{ width:22px; height:22px; }
.incl-item h3{ font-size:1.12rem; }
.incl-item p{ margin-top:6px; color:var(--ink-soft); font-size:.92rem; }

/* Timeline (bridal) */
.timeline{ max-width:760px; margin-inline:auto; display:grid; gap:0; }
.timeline__item{ position:relative; padding:0 0 36px 56px; }
.timeline__item::before{
  content:""; position:absolute; left:17px; top:6px; bottom:-6px; width:1.5px; background:var(--rose-light);
}
.timeline__item:last-child{ padding-bottom:0; }
.timeline__item:last-child::before{ display:none; }
.timeline__dot{
  position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:var(--rose-band); color:#FCEFEF;
  font-family:var(--font-display); font-size:1rem; z-index:1;
}
.timeline__item h3{ font-size:1.18rem; }
.timeline__item p{ margin-top:8px; color:var(--ink-soft); font-size:.95rem; max-width:60ch; }

/* Map */
.map-frame{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  border:1px solid var(--line); line-height:0;
}
.map-frame iframe{ width:100%; height:380px; border:0; display:block; filter:grayscale(.2) sepia(.08); }

/* ---------------------------------------------------------------------
   22. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width:1024px){
  .cards--4{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; gap:34px; }
  .ig-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:860px){
  .nav__links,.nav__cta{ display:none; }
  .nav__toggle{ display:block; }
  .intro{ grid-template-columns:1fr; }
  .intro__media{ order:-1; max-width:440px; margin-inline:auto; width:100%; }
  .cards--3,.cards--2,.cards--4{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:24px; }
  .quotes{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .contact{ grid-template-columns:1fr; }
  .contact__info{ order:-1; }
  .service-detail{ grid-template-columns:1fr; gap:32px; }
  .service-detail--reverse .service-detail__media{ order:-1; }
  .service-detail__media{ max-width:440px; margin-inline:auto; width:100%; }
  .bridal-teaser{ grid-template-columns:1fr; gap:32px; }
  .bridal-teaser__media{ order:-1; justify-self:center; margin-inline:auto; }
  .incl-grid{ grid-template-columns:1fr; gap:20px; }
}

@media (max-width:560px){
  :root{ --nav-h:70px; }
  .gallery{ grid-template-columns:1fr 1fr; gap:12px; }
  .ig-grid{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .footer__top{ grid-template-columns:1fr; }
  .price-row{ grid-template-columns:1fr; }
  .price-row__price{ text-align:left; }
  .field--row{ grid-template-columns:1fr; }
  .hero__cta .btn{ width:100%; }
  .cta-band__cta .btn{ width:100%; }
}

/* ---------------------------------------------------------------------
   23. REDUCED MOTION
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* =====================================================================
   24. GLAM ENHANCEMENT LAYER  ✦  (added — elevated wow factor)
   Editorial motion, gold shimmer, facials, sticky mobile booking.
   All effects degrade safely; reduced-motion neutralises animation.
   ===================================================================== */

/* ---- 24.1  Fine luxe grain (barely-there tactile texture) --------- */
body::after{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 24.2  Gold shimmer text (liquid-metal headings) -------------- */
.gold-shimmer-text{
  background:linear-gradient(100deg,#C9A24E 0%,#E8D18A 22%,#FFFBEF 38%,#E8D18A 54%,#BE9A4A 72%,#E8D18A 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:goldFlow 7s linear infinite;
}
.metal-text{ background-size:220% auto; animation:goldFlow 8s linear infinite; }
.wordmark .wm-main{ background-size:220% auto; animation:goldFlow 9s linear infinite; }
@keyframes goldFlow{ 0%{ background-position:0% center; } 100%{ background-position:220% center; } }
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .gold-shimmer-text{ color:var(--gold); -webkit-text-fill-color:currentColor; animation:none; }
}

/* ---- 24.3  Editorial marquee ribbon ------------------------------- */
.marquee{
  position:relative; overflow:hidden; background:var(--rose-band);
  padding:20px 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.12);
}
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg,#8C5358,transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,#7E4A50,transparent); }
.marquee__track{
  display:flex; align-items:center; width:max-content;
  animation:marqueeMove 34s linear infinite; will-change:transform;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track > span{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.15rem,2.6vw,1.8rem); color:#FBEDED; letter-spacing:.01em;
  padding:0 .55em;
}
.marquee__star{
  display:inline-block; margin:0 .85em; font-size:.7em; font-style:normal;
  color:var(--gold-light); text-shadow:0 0 12px rgba(230,205,134,.6);
  transform:translateY(-.06em);
}
@keyframes marqueeMove{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* ---- 24.4  Hero upgrades (shimmer sweep + rotating gold ring) ----- */
.hero__ring{
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  width:min(70vw,640px); aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(230,205,134,.0) 60deg,rgba(230,205,134,.35) 130deg,rgba(255,251,238,.5) 170deg,rgba(190,154,74,.2) 210deg,transparent 300deg);
  filter:blur(18px); opacity:.55; z-index:0;
  animation:ringSpin 26s linear infinite;
}
@keyframes ringSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.hero__logo-wrap{ position:relative; width:min(560px,82vw); margin:0 auto 6px; }
.hero__logo-wrap .hero__logo{ width:100%; margin:0; }
.hero__logo-wrap .hero__shine{
  content:""; position:absolute; inset:0; pointer-events:none; overflow:hidden;
  -webkit-mask:url("images/motee-logo.png") center/contain no-repeat;
          mask:url("images/motee-logo.png") center/contain no-repeat;
}
.hero__logo-wrap .hero__shine::before{
  content:""; position:absolute; top:-20%; bottom:-20%; width:42%; left:-60%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,253,246,.0) 30%,rgba(255,253,246,.85) 50%,rgba(255,253,246,0) 70%,transparent 100%);
  filter:blur(2px);
  animation:logoSweep 5.6s var(--ease) infinite;
}
@keyframes logoSweep{ 0%{ left:-60%; } 55%,100%{ left:130%; } }

/* staged hero entrance on load */
.hero__inner > *{ opacity:0; transform:translateY(20px); }
body.is-loaded .hero__inner > *{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }
body.is-loaded .hero__logo-wrap{ transition-delay:.05s; }
body.is-loaded .hero__eyebrow{ transition-delay:.22s; }
body.is-loaded .hero__headline{ transition-delay:.34s; }
body.is-loaded .hero__sub{ transition-delay:.46s; }
body.is-loaded .hero__cta{ transition-delay:.58s; }

/* ---- 24.5  Primary button sheen ----------------------------------- */
.btn--primary{ position:relative; overflow:hidden; isolation:isolate; }
.btn--primary::after{
  content:""; position:absolute; top:0; left:-130%; width:60%; height:100%; z-index:-1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg); transition:left .7s var(--ease);
}
.btn--primary:hover::after{ left:140%; }

/* ---- 24.6  Richer card hover glow --------------------------------- */
.service-card,.card{ position:relative; }
.service-card::after,.card--lift::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 1px transparent; opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(120% 80% at 50% 0%,rgba(215,174,177,.16),transparent 60%);
}
.service-card:hover::after,.card--lift:hover::after{ opacity:1; }

/* ---- 24.7  Facials / skincare cards ------------------------------- */
.facials{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.facial-card{
  position:relative; overflow:hidden; background:var(--ivory);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 32px 32px; box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.facial-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--gold-line); transform:scaleX(.4); transform-origin:left; opacity:.7;
  transition:transform .6s var(--ease), opacity .4s var(--ease);
}
.facial-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--rose-muted); }
.facial-card:hover::before{ transform:scaleX(1); opacity:1; }
.facial-card__eyebrow{ font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--rose); margin-bottom:14px; }
.facial-card__row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.facial-card__name{ font-family:var(--font-display); font-size:1.6rem; line-height:1.1; }
.facial-card__price{ font-family:var(--font-display); font-size:1.5rem; color:var(--rose-deep); white-space:nowrap; }
.facial-card__meta{ margin-top:8px; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }
.facial-card__desc{ margin-top:18px; color:var(--ink-soft); font-size:.97rem; }
.facial-card__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

/* ---- 24.8  Faint monogram watermark ------------------------------- */
.watermark{
  position:absolute; pointer-events:none; z-index:0; font-family:var(--font-display);
  font-weight:600; line-height:.8; color:var(--rose-deep); opacity:.045;
  font-size:clamp(16rem,34vw,30rem); top:50%; left:50%;
  transform:translate(-50%,-46%); user-select:none;
}
.page-head,.cta-band{ overflow:hidden; }
.cta-band .watermark{ color:#fff; opacity:.06; }

/* ---- 24.9  Sticky mobile booking bar ------------------------------ */
.book-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  padding:12px clamp(14px,4vw,20px) calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(252,248,244,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); box-shadow:0 -10px 30px -18px rgba(110,62,66,.5);
  transform:translateY(115%); transition:transform .5s var(--ease);
}
.book-bar.show{ transform:none; }
.book-bar__inner{ display:flex; align-items:center; gap:14px; }
.book-bar__label{ flex:1; min-width:0; line-height:1.15; }
.book-bar__label .l1{ display:block; font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:var(--ink); }
.book-bar__label .l2{ display:block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin-top:2px; }
.book-bar .btn{ --pad-y:13px; --pad-x:22px; flex:0 0 auto; }

/* ---- 24.10  Mobile editorial scale-up + glam polish --------------- */
@media (max-width:860px){
  .book-bar{ display:block; }
  .to-top{ bottom:86px; }
  /* bigger, bolder type for impact on phones */
  .hero__logo-wrap{ width:min(560px,86vw); }
  .hero__headline{ font-size:clamp(2.5rem,9vw,3.4rem); line-height:1.06; }
  .hero__sub{ font-size:1.06rem; max-width:36ch; }
  .page-head__title{ font-size:clamp(2.7rem,11vw,3.6rem); }
  .section-head .title,.intro__body .title{ font-size:clamp(2.1rem,7.6vw,2.7rem); }
  .eyebrow{ font-size:.66rem; }
  .facials{ grid-template-columns:1fr; gap:18px; }
  .marquee{ padding:16px 0; }
  /* generous tap targets */
  .btn{ --pad-y:15px; }
  .nav__drawer a{ padding:.35em 0; }
}
@media (max-width:560px){
  .hero__headline{ font-size:clamp(2.3rem,9.4vw,3rem); }
  .book-bar__label .l1{ font-size:1rem; }
  .watermark{ font-size:42vw; }
}

/* ---- 24.11  Respect reduced motion (neutralise new motion) -------- */
@media (prefers-reduced-motion:reduce){
  .marquee__track{ animation:none !important; }
  .hero__ring,.hero__logo-wrap .hero__shine::before,.gold-shimmer-text,.metal-text,.wordmark .wm-main{ animation:none !important; }
  .hero__inner > *{ opacity:1 !important; transform:none !important; }
}

/* =====================================================================
   25. IMAGERY, MOUSEOVER FX & DEEPER GLAM (10/10 pass)
   ===================================================================== */

/* ---- 25.1  Brand motifs: wave divider + footer seal --------------- */
.wave-divider{ display:block; width:min(220px,58%); height:auto; margin:14px auto 2px; opacity:.95; animation:waveFloat 6s ease-in-out infinite; }
@keyframes waveFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.page-head .wave-divider{ margin-bottom:6px; }
.footer__seal{ display:block; width:94px; height:auto; margin-top:26px; opacity:.92; transition:transform .7s var(--ease), filter .5s var(--ease); filter:drop-shadow(0 6px 16px rgba(0,0,0,.25)); }
.footer__seal:hover{ transform:rotate(10deg) scale(1.05); }

/* ---- 25.2  Frame imagery + shine sweep on hover ------------------- */
.frame{ overflow:hidden; }
.frame img{ transition:transform 1s var(--ease), filter .6s var(--ease); }
.frame:hover img{ transform:scale(1.06); }
.frame::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,253,246,.45) 50%,transparent 58%);
  transform:translateX(-130%); transition:transform 1s var(--ease);
}
.frame:hover::before{ transform:translateX(130%); }
.frame:hover{ box-shadow:var(--shadow-lg); }

/* ---- 25.3  Gallery tiles: zoom + gradient + caption + gold edge --- */
.gallery__item{ position:relative; cursor:pointer; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.gallery__item::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s var(--ease);
  background:linear-gradient(165deg,rgba(140,83,88,0) 50%,rgba(110,62,66,.5));
  box-shadow:inset 0 0 0 1px rgba(230,205,134,.5);
}
.gallery__item:hover::after{ opacity:1; }
.gallery__item:hover img{ transform:scale(1.08); }
.gallery__item .cap{
  position:absolute; left:16px; bottom:14px; z-index:2; color:#FFF6F2;
  font-family:var(--font-display); font-style:italic; font-size:1.05rem;
  opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease);
  text-shadow:0 2px 12px rgba(60,30,32,.5);
}
.gallery__item:hover .cap{ opacity:1; transform:none; }

/* ---- 25.4  Instagram tiles imagery ------------------------------- */
.ig-tile img{ width:100%; height:100%; object-fit:cover; }

/* ---- 25.5  Facial card media banner ------------------------------ */
.facial-card{ overflow:hidden; }
.facial-card__media{ margin:-34px -32px 22px; aspect-ratio:16/6; overflow:hidden; position:relative; }
.facial-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.facial-card__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,253,246,.4) 50%,transparent 58%);
  transform:translateX(-130%); transition:transform 1s var(--ease);
}
.facial-card:hover .facial-card__media img{ transform:scale(1.07); }
.facial-card:hover .facial-card__media::after{ transform:translateX(130%); }

/* ---- 25.6  3D tilt cards (JS-driven) ----------------------------- */
.tilt{ transform-style:preserve-3d; transition:transform .25s var(--ease), box-shadow .4s var(--ease); will-change:transform; }
.tilt .service-card__body,.tilt .facial-card__row,.tilt .facial-card__name{ transform:translateZ(18px); }

/* ---- 25.7  Nav brand glow + logo polish -------------------------- */
.nav__brand{ position:relative; }
.nav__brand img{ filter:drop-shadow(0 4px 10px rgba(150,100,104,.18)); transition:filter .5s var(--ease), transform .5s var(--ease); }
.nav__brand:hover img{ filter:drop-shadow(0 6px 16px rgba(190,154,74,.4)); transform:translateY(-1px); }

/* ---- 25.8  Ghost / light button sheen ---------------------------- */
.btn--ghost,.btn--light,.btn--on-dark{ position:relative; overflow:hidden; isolation:isolate; }
.btn--ghost::after,.btn--light::after,.btn--on-dark::after{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; z-index:-1;
  background:linear-gradient(105deg,transparent,rgba(190,154,74,.22),transparent);
  transform:skewX(-18deg); transition:left .7s var(--ease);
}
.btn--ghost:hover::after,.btn--light:hover::after,.btn--on-dark:hover::after{ left:150%; }

/* ---- 25.9  Hero cursor-follow glow ------------------------------- */
.hero__cursorglow{
  position:absolute; z-index:1; width:340px; height:340px; border-radius:50%; pointer-events:none;
  left:var(--mx,50%); top:var(--my,40%); transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(230,205,134,.22),rgba(215,174,177,.12) 40%,transparent 70%);
  opacity:0; transition:opacity .6s var(--ease); mix-blend-mode:screen;
}
.hero:hover .hero__cursorglow{ opacity:1; }

/* ---- 25.10  Section sparkle accents ------------------------------ */
.spark-field{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.spark-field .hero__spark{ position:absolute; }

/* ---- 25.11  Responsive tweaks for imagery ------------------------ */
@media (max-width:860px){
  .facial-card__media{ aspect-ratio:16/7; }
  .wave-divider{ width:min(200px,64%); }
  .gallery__item .cap{ font-size:.95rem; }
}
@media (prefers-reduced-motion:reduce){
  .wave-divider{ animation:none !important; }
  .frame::before,.facial-card__media::after,.btn--ghost::after,.btn--primary::after{ display:none; }
  .tilt{ transform:none !important; }
}