/* ==========================================================================
   ROSIE'S BEAUTY CORNER — Shared Stylesheet
   Brand: soft cream base · deep cherry red · blush pink · warm gold
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Base */
  --cream:        #FFF8F5;
  --cream-deep:   #FDF1EC;
  --white:        #FFFDFC;

  /* Cherry red */
  --cherry:       #992940;
  --cherry-light: #B32E48;
  --cherry-deep:  #6E1A2C;

  /* Blush */
  --blush:        #F8E2E8;
  --blush-soft:   #FDF2F6;

  /* Rose gold */
  --gold:         #C98C6A;   /* rose gold  */
  --gold-light:   #DFA783;   /* light rose gold */
  --gold-deep:    #BE7F5D;   /* deep rose gold (warm, not bronze) */
  --gold-pale:    #F2DBCB;   /* pale rose */

  /* Text */
  --ink:          #4A2C38;   /* soft dark rose-brown */
  --ink-soft:     #6E4B57;
  --ink-mute:     #937580;

  /* Type */
  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Space */
  --nav-h: 82px;
  --max:   1180px;
  --gut:   clamp(20px, 5vw, 48px);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-soft: 0 10px 40px -18px rgba(110,26,44,.22);
  --shadow-lift: 0 24px 60px -24px rgba(110,26,44,.32);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.75;
  letter-spacing:.012em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:300; line-height:1.12; letter-spacing:.005em; }

/* ---------- 3. LAYOUT HELPERS ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:820px; }
.section{ padding:clamp(70px,10vw,130px) 0; }
.page-top{ padding-top:calc(var(--nav-h) + clamp(56px,8vw,96px)); }
.center{ text-align:center; }

/* ---------- 4. TYPE SCALE ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--cherry-light);
  margin:0 0 18px;
}
.page-title{
  font-size:clamp(2.6rem,6.4vw,4.6rem);
  color:var(--cherry-deep);
  margin-bottom:6px;
}
.page-title em{ font-style:italic; color:var(--cherry); }
.page-title .emo, .hero-name .emo{ font-size:.42em; vertical-align:.5em; margin-left:.14em; white-space:nowrap; }
.lede{
  font-size:clamp(1.02rem,1.6vw,1.16rem);
  color:var(--ink-soft);
  max-width:60ch;
  margin:18px auto 0;
}
p{ margin:0 0 1.1em; }

/* Gold divider with cherry dot */
.rule{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:26px auto 0; max-width:230px;
}
.rule::before,.rule::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-pale),var(--gold));
}
.rule::after{ background:linear-gradient(270deg,transparent,var(--gold-pale),var(--gold)); }
.rule span{
  width:7px; height:7px; border-radius:50%;
  background:var(--cherry); flex:none;
  box-shadow:0 0 0 4px rgba(153,41,64,.09);
}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 34px;
  border-radius:999px;
  font-family:var(--sans);
  font-size:12px; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  border:1px solid transparent;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease),
             background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  will-change:transform;
}
.btn-gold{
  background:linear-gradient(135deg,#D4A78A 0%,#C98C6A 52%,#BE7F5D 100%);
  color:#FFFDFC;
  text-shadow:0 1px 2px rgba(122,74,48,.42);
  box-shadow:0 12px 30px -14px rgba(190,127,93,.6);
}
.btn-gold:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px -14px rgba(190,127,93,.7), 0 0 0 8px rgba(248,226,232,.85);
}
.btn-cherry{
  background:var(--cherry); color:#fff;
  box-shadow:0 12px 30px -16px rgba(153,41,64,.8);
}
.btn-cherry:hover{ transform:translateY(-3px); background:var(--cherry-light);
  box-shadow:0 20px 44px -16px rgba(153,41,64,.85), 0 0 0 6px rgba(153,41,64,.1); }
.btn-outline{
  background:rgba(255,253,252,.5); color:var(--gold-deep);
  border-color:var(--gold-pale);
}
.btn-outline:hover{
  transform:translateY(-3px);
  border-color:var(--gold);
  background:var(--blush);
  color:var(--cherry-deep);
  box-shadow:0 16px 36px -18px rgba(190,127,93,.5);
}
.btn-sm{ padding:12px 26px; font-size:11px; }
.btn svg{ width:14px; height:14px; flex:none; }

/* ---------- 6. NAVIGATION ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(255,248,245,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(153,41,64,.07);
  transition:background .5s var(--ease), box-shadow .5s var(--ease), height .5s var(--ease);
}
.nav.scrolled{
  background:rgba(255,248,245,.94);
  box-shadow:0 8px 34px -22px rgba(110,26,44,.5);
}
.nav-inner{
  width:100%; max-width:var(--max); margin-inline:auto;
  padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nav-logo{ order:1; }
.nav-inner nav{ order:2; margin-left:auto; }
.nav-logo{ display:flex; align-items:center; gap:11px; flex:none; }
.nav-logo img{ height:34px; width:auto; }
.nav-logo .nl-txt{ display:flex; flex-direction:column; line-height:1; }
.nav-logo .nl-1{
  font-family:var(--serif); font-size:19px; letter-spacing:.2em;
  color:var(--cherry-deep); text-transform:uppercase;
}
.nav-logo .nl-2{
  font-size:8px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:4px;
}
.nav-links{ display:flex; align-items:center; gap:clamp(20px,3vw,40px); list-style:none; margin:0; padding:0; }
.nav-links a{
  position:relative;
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); padding:6px 0;
  transition:color .35s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:0; height:1px; background:var(--gold);
  transform:translateX(-50%);
  transition:width .4s var(--ease);
}
.nav-links a:hover{ color:var(--cherry); }
.nav-links a:hover::after{ width:100%; }
.nav-links a.active{ color:var(--cherry); }
.nav-links a.active::after{ width:100%; background:var(--cherry); }
.nav-links .nav-cta a{
  color:#FFFDFC;
  text-shadow:0 1px 2px rgba(122,74,48,.42);
  background:linear-gradient(135deg,#D4A78A,#C98C6A);
  padding:11px 24px; border-radius:999px;
  box-shadow:0 10px 24px -14px rgba(190,127,93,.75);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.nav-links .nav-cta a::after{ display:none; }
.nav-links .nav-cta a:hover{ transform:translateY(-2px); color:#FFFDFC;
  box-shadow:0 16px 34px -14px rgba(190,127,93,.85), 0 0 0 6px rgba(248,226,232,.7); }

/* Hamburger */
.burger{
  display:none; background:none; border:0; padding:8px; flex:none;
  width:44px; height:44px; position:relative; z-index:120;
  order:3; margin-left:auto;
}
.burger span{
  display:block; height:1.4px; width:24px; margin:5px auto;
  background:var(--cherry-deep); border-radius:2px;
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.burger.open span:nth-child(1){ transform:translateY(6.4px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6.4px) rotate(-45deg); }

.nav-overlay{
  position:fixed; inset:0; z-index:98;
  background:rgba(61,34,41,.28);
  backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
body.menu-open .nav-overlay{ opacity:1; visibility:visible; }
body.menu-open{ overflow:hidden; }

/* ---------- 7. HERO (home) ---------- */
.hero{
  position:relative;
  min-height:min(78svh,720px);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h) + 34px) var(--gut) clamp(28px,4vw,44px);
  overflow:hidden;
  background:var(--cream);
}
.hero-inner{ position:relative; z-index:2; max-width:760px; }
.hero-logo{
  position:relative; z-index:2;
  width:100%; height:auto;
  margin:0;
  object-fit:contain;               /* never stretched */
}
.hero-logo-wrap{
  position:relative;
  width:min(380px,76vw);
  margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
}
/* soft rose gold glow — gentle, premium, no hard edge */

.hero-name{
  font-family:var(--serif);
  font-size:clamp(2.1rem,6.6vw,3.9rem);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--cherry-deep); margin:0;
}
.hero-estd{
  font-size:10.5px; letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold); margin:18px 0 0;
}
.hero-tag{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.35rem,3.4vw,2.05rem);
  color:var(--cherry); margin:26px 0 0; line-height:1.4;
}
.hero-sub{
  font-size:11.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-mute); margin:20px 0 0;
}
.hero-btns{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
  margin-top:44px;
}

/* ---------- 8. HOME SUB-SECTIONS ---------- */
.band{ background:var(--cream); }
.band-cream{ background:var(--cream); }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,38px); margin-top:56px; }
.pillar{
  text-align:center; padding:40px 26px;
  background:var(--white); border:1px solid rgba(201,140,106,.22);
  border-radius:20px; box-shadow:var(--shadow-soft);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.pillar:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lift); border-color:var(--gold); }
.pillar .ic{ font-size:26px; display:block; margin-bottom:16px; }
.pillar h3{ font-size:1.45rem; color:var(--cherry-deep); margin-bottom:10px; }
.pillar p{ font-size:15px; color:var(--ink-soft); margin:0; }

.quote{ text-align:center; }
.quote blockquote{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,3.6vw,2.4rem); line-height:1.45;
  color:var(--cherry-deep); max-width:22ch; margin-inline:auto;
}
.quote .qmark{ font-family:var(--serif); font-size:4rem; color:var(--gold-pale); line-height:.6; display:block; margin-bottom:12px; }

/* ---------- 9. ABOUT ---------- */
.about-grid{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(34px,6vw,80px); align-items:center;
}
.photo-frame{
  position:relative; border-radius:22px; overflow:hidden;
  background:linear-gradient(150deg,var(--blush),var(--blush-soft));
  border:1px solid rgba(201,140,106,.3);
  aspect-ratio:4/5;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-soft);
}
.photo-frame::after{
  content:""; position:absolute; inset:12px;
  border:1px solid rgba(201,140,106,.35); border-radius:14px; pointer-events:none;
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; }
.ph-note{ text-align:center; padding:26px; color:var(--ink-mute); }
.ph-note .ic{ font-size:30px; display:block; margin-bottom:12px; }
.ph-note span{ font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; }

.about-copy p{ color:var(--ink-soft); font-size:1.03rem; }
.about-copy p.first{
  font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.62rem);
  line-height:1.55; color:var(--ink); font-weight:300;
}
.sig{
  font-family:var(--serif); font-style:italic; font-size:1.9rem;
  color:var(--cherry); margin-top:26px;
}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 24px; margin-top:8px;
  border:1px solid var(--gold); border-radius:999px;
  background:linear-gradient(135deg,rgba(242,219,203,.35),rgba(255,253,252,.6));
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:#8A5233;
}

.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); margin-top:52px; }
.fact{
  background:var(--blush-soft);
  border:1px solid rgba(201,140,106,.28);
  border-radius:18px; padding:26px 20px; text-align:center;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.fact:hover{ transform:translateY(-6px); background:var(--blush); box-shadow:var(--shadow-lift); }
.fact .ic{ font-size:22px; display:block; margin-bottom:12px; }
.fact .lbl{ font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-mute); display:block; margin-bottom:6px; }
.fact .val{ font-family:var(--serif); font-size:1.35rem; color:var(--cherry-deep); }

/* ---------- 10. SERVICES ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,32px); margin-top:56px; }
.svc{
  position:relative;
  background:linear-gradient(160deg,var(--blush-soft),var(--white));
  border:1px solid rgba(201,140,106,.32);
  border-radius:22px;
  padding:clamp(30px,4vw,42px);
  display:flex; flex-direction:column;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.svc:hover{ transform:translateY(-8px); border-color:var(--gold); box-shadow:var(--shadow-lift); }
.svc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.svc h3{ font-size:clamp(1.5rem,2.5vw,1.85rem); color:var(--cherry-deep); }
.svc .tag{
  flex:none; font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px;
  background:var(--cherry); color:#fff;
}
.svc .tag.gold{ background:linear-gradient(135deg,#D4A78A,#C98C6A); color:#FFFDFC; }
.svc p{ color:var(--ink-soft); font-size:15.5px; margin:14px 0 22px; }
.svc .price{
  font-family:var(--serif); font-size:1.75rem; color:var(--cherry);
  margin:auto 0 0; padding-top:20px;
  border-top:1px solid rgba(201,140,106,.3);
}
.svc .price small{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); display:block; margin-bottom:4px; font-family:var(--sans); }
.svc .btn{ margin-top:24px; align-self:flex-start; }
.note{
  margin-top:48px; text-align:center;
  font-size:14px; color:var(--ink-mute); font-style:italic;
}

/* ---------- 11. CLIENT GALLERY ---------- */
/* Desktop: even grid, every tile the same shape — no gaps, nothing missing. */
.masonry{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,22px);
  margin-top:56px;
}
.tile{
  position:relative; margin:0;
  border-radius:18px; overflow:hidden;
  background:linear-gradient(150deg,var(--blush),var(--blush-soft));
  border:1px solid rgba(201,140,106,.22);
  aspect-ratio:3/4;
  display:flex; align-items:center; justify-content:center;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.tile:hover{ transform:translateY(-5px); border-color:var(--gold); box-shadow:var(--shadow-lift); }
.tile img{
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  transition:transform .8s var(--ease);
}
.tile:hover img{ transform:scale(1.06); }
.tile .ph{ text-align:center; padding:30px 18px; color:var(--ink-mute); }
.tile .ph .ic{ font-size:24px; display:block; margin-bottom:10px; opacity:.75; }
.tile .ph span{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; }
/* legacy shape classes are no-ops now — the grid keeps everything even */
.t-tall,.t-sq,.t-wide{ aspect-ratio:3/4; }

/* hidden until "Load More" */
.tile.is-hidden{ display:none; }

.load-more-wrap{ text-align:center; margin-top:clamp(30px,4vw,44px); }
.load-more-count{
  display:block; margin-bottom:18px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute);
}

.ig-cta{ text-align:center; margin-top:60px; }

/* ---------- 12. BOOK ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.6vw,26px); margin-top:56px; }
.contact{
  display:flex; gap:20px; align-items:flex-start;
  background:var(--white);
  border:1px solid rgba(201,140,106,.28);
  border-radius:20px; padding:30px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.contact:hover{ transform:translateY(-6px); border-color:var(--gold); box-shadow:var(--shadow-lift); }
.contact .ic{
  flex:none; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; font-size:21px;
  background:var(--blush); border:1px solid rgba(201,140,106,.3);
}
.contact .lbl{ font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-mute); display:block; margin-bottom:5px; }
.contact .val{ font-family:var(--serif); font-size:1.32rem; color:var(--cherry-deep); line-height:1.35; }
.contact a.val:hover{ color:var(--cherry-light); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:5px; }
.contact .sm{ font-size:13.5px; color:var(--ink-mute); margin:6px 0 0; }

.notes{
  margin-top:clamp(40px,6vw,64px);
  background:var(--blush-soft);
  border:1px solid rgba(201,140,106,.28);
  border-radius:22px; padding:clamp(30px,4vw,44px);
}
.notes h3{ font-size:1.7rem; color:var(--cherry-deep); text-align:center; }
.notes ul{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; }
.notes li{
  display:flex; gap:14px; align-items:flex-start;
  font-size:15.5px; color:var(--ink-soft);
  padding-bottom:14px; border-bottom:1px solid rgba(201,140,106,.18);
}
.notes li:last-child{ border-bottom:0; padding-bottom:0; }
.notes li .ic{ flex:none; }
.book-cta{ text-align:center; margin-top:clamp(40px,6vw,60px); }

/* ---------- 13. FOOTER ---------- */
.footer{
  background:var(--cream);
  border-top:1px solid rgba(201,140,106,.28);
  padding:clamp(50px,7vw,72px) 0 34px;
  text-align:center;
}
.footer-cherry{ height:56px; width:auto; margin:0 auto 20px; opacity:.9; }
.footer-name{
  font-family:var(--serif); font-size:1.25rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cherry-deep);
}
.footer-estd{ font-size:9.5px; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); margin-top:10px; }
.footer-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  list-style:none; margin:32px 0 0; padding:0;
}
.footer-nav a{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft);
  transition:color .35s var(--ease);
}
.footer-nav a:hover{ color:var(--cherry); }
.footer-ig{
  display:inline-flex; align-items:center; gap:10px; margin-top:30px;
  padding:11px 22px; border-radius:999px;
  border:1px solid rgba(153,41,64,.22);
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cherry);
  transition:background .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease);
}
.footer-ig:hover{ background:var(--blush); transform:translateY(-2px); border-color:var(--cherry); }
.footer-ig svg{ width:15px; height:15px; }
.footer-fine{
  margin:34px 0 0; padding-top:24px;
  border-top:1px solid rgba(201,140,106,.2);
  font-size:11px; letter-spacing:.06em; color:var(--ink-mute);
}

/* ---------- 14. REVEAL ANIMATION ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.09s } .reveal.d2{ transition-delay:.18s }
.reveal.d3{ transition-delay:.27s } .reveal.d4{ transition-delay:.36s }
.reveal.d5{ transition-delay:.45s } .reveal.d6{ transition-delay:.54s }

/* ---------- 15. RESPONSIVE ---------- */
@media (max-width:1000px){
  .masonry{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  :root{ --nav-h:72px; }
  .burger{ display:block; }
  .nav-links{
    position:fixed; top:0; right:0; z-index:110;
    width:min(330px,84vw); height:100dvh;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:6px;
    padding:100px 40px 40px;
    background:var(--cream);
    border-left:1px solid rgba(201,140,106,.3);
    box-shadow:-24px 0 70px -30px rgba(110,26,44,.5);
    transform:translateX(102%);
    transition:transform .6s var(--ease);
  }
  body.menu-open .nav-links{ transform:none; }
  .nav-links li{ width:100%; opacity:0; transform:translateX(18px);
    transition:opacity .5s var(--ease), transform .5s var(--ease); }
  body.menu-open .nav-links li{ opacity:1; transform:none; }
  body.menu-open .nav-links li:nth-child(1){ transition-delay:.14s }
  body.menu-open .nav-links li:nth-child(2){ transition-delay:.20s }
  body.menu-open .nav-links li:nth-child(3){ transition-delay:.26s }
  body.menu-open .nav-links li:nth-child(4){ transition-delay:.32s }
  body.menu-open .nav-links li:nth-child(5){ transition-delay:.38s }
  .nav-links a{
    display:block; width:100%; font-size:14px; letter-spacing:.22em;
    padding:15px 0; border-bottom:1px solid rgba(201,140,106,.2);
  }
  .nav-links a::after{ left:0; transform:none; }
  .nav-links .nav-cta{ margin-top:26px; }
  .nav-links .nav-cta a{
    text-align:center; border-bottom:0; padding:16px 24px; font-size:12px;
  }
  .about-grid{ grid-template-columns:1fr; }
  .photo-frame{ max-width:400px; margin-inline:auto; aspect-ratio:1; }
  .pillars{ grid-template-columns:1fr; }
  .svc-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  body{ font-size:16.5px; }
  .facts{ grid-template-columns:repeat(2,1fr); }
  .hero-btns .btn{ width:100%; }
  .contact{ padding:24px; gap:16px; }
  .nav-logo .nl-1{ font-size:16px; }
  .nav-logo img{ height:30px; }
}
@media (max-width:359px){
  .facts{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* ==========================================================================
   16. PHOTOGRAPHY · QUALIFICATIONS · SPARKLES · FOOTER CREDIT
   ========================================================================== */

/* ---------- 16.1 Real photography ---------- */
.photo-frame img{
  width:100%; height:100%; object-fit:cover; object-position:center 32%;
}
.photo-frame.has-photo{
  background:var(--blush-soft);
  border:1px solid var(--gold-pale);
  box-shadow:0 26px 60px -30px rgba(110,26,44,.4), 0 0 0 1px rgba(201,140,106,.14);
}
.photo-frame.has-photo::after{ inset:10px; border-color:rgba(255,253,252,.55); }

/* Certificates */
.certs{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,3vw,34px);
  margin-top:clamp(40px,5vw,58px);
}
.cert{ margin:0; }
.cert-img{
  position:relative;
  border-radius:18px; overflow:hidden;
  border:1px solid var(--gold-pale);
  background:var(--blush-soft);
  box-shadow:0 20px 50px -26px rgba(110,26,44,.4);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.cert-img::after{
  content:""; position:absolute; inset:0; border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(255,253,252,.5); pointer-events:none;
}
.cert:hover .cert-img{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:0 30px 66px -26px rgba(110,26,44,.5);
}
.cert-img img{ width:100%; height:auto; display:block; }
.cert figcaption{
  margin-top:16px; text-align:center;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-mute);
}
.cert figcaption b{ color:var(--cherry); font-weight:400; letter-spacing:.24em; }
.certs-note{
  margin-top:26px; text-align:center;
  font-family:var(--serif); font-style:italic;
  font-size:1.25rem; color:var(--gold-deep);
}

/* ---------- 16.2 Qualifications panel ---------- */
.quals{
  margin-top:clamp(40px,5vw,60px);
  background:linear-gradient(160deg,var(--blush-soft),var(--white));
  border:1px solid var(--gold-pale);
  border-radius:24px;
  padding:clamp(30px,4vw,46px);
  box-shadow:0 22px 60px -34px rgba(110,26,44,.35);
}
.quals h3{ font-size:clamp(1.6rem,3vw,2rem); color:var(--cherry-deep); text-align:center; }
.quals ul{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
.quals li{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--white);
  border:1px solid rgba(201,140,106,.24);
  border-radius:14px; padding:16px 20px;
  font-size:15px; color:var(--ink-soft);
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.quals li:hover{ border-color:var(--gold); transform:translateY(-3px); }
.quals li .tick{
  flex:none; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; margin-top:1px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));
  color:#fff; font-size:11px; line-height:1;
}
.quals li strong{ display:block; color:var(--cherry-deep); font-weight:400;
  font-family:var(--serif); font-size:1.2rem; line-height:1.25; margin-bottom:3px; }
.quals li span.meta{ font-size:12.5px; color:var(--ink-mute); letter-spacing:.04em; }

/* ---------- 16.3 Three-layer sparkle field ---------- */
.sparkles{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:1;
}
.sparkles.page-layer{ position:fixed; z-index:0; }
.sparkles i{
  position:absolute; display:block;
  width:var(--s,5px); height:var(--s,5px);
  border-radius:50%;
  opacity:0;
  will-change:transform,opacity;
  backface-visibility:hidden;
}

/* ---- layer 1 · fine dust: tiny pale specks, always drifting ---- */
.sparkles i.dust{
  background:radial-gradient(circle at 50% 50%,
             var(--sc,rgba(255,250,244,.95)) 0%,
             var(--sc,rgba(255,250,244,.95)) 35%,
             transparent 72%);
  animation:drift var(--d,26s) linear var(--dl,0s) infinite;
}

/* ---- layer 2 · soft sparkles: medium rose gold points that twinkle ---- */
.sparkles i.twinkle{
  background:radial-gradient(circle at 50% 50%,
             rgba(255,255,255,.98) 0%,
             var(--sc,rgba(201,140,106,.9)) 40%,
             transparent 74%);
  animation:drift var(--d,22s) linear var(--dl,0s) infinite,
            twinkle var(--td,4.5s) ease-in-out var(--dl,0s) infinite;
}
/* four-point star flare, so the medium ones read as sparkle not dot */
.sparkles i.twinkle::before,
.sparkles i.twinkle::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--sc,rgba(201,140,106,.55));
  transform:translate(-50%,-50%);
  border-radius:2px;
}
.sparkles i.twinkle::before{ width:230%; height:1px; }
.sparkles i.twinkle::after{ width:1px; height:230%; }

/* ---- layer 3 · accent glimmers: larger, slower, softly glowing ---- */
.sparkles i.glimmer{
  background:radial-gradient(circle at 50% 50%,
             rgba(255,255,255,.95) 0%,
             var(--sc,rgba(201,140,106,.75)) 34%,
             transparent 70%);
  filter:blur(.4px);
  box-shadow:0 0 10px 2px var(--sc,rgba(201,140,106,.28));
  animation:drift var(--d,42s) linear var(--dl,0s) infinite,
            twinkle var(--td,7s) ease-in-out var(--dl,0s) infinite;
}

@keyframes drift{
  0%   { transform:translate3d(0,14vh,0) scale(.55); }
  100% { transform:translate3d(var(--x,20px),-104vh,0) scale(1); }
}
@keyframes twinkle{
  0%,100%{ opacity:calc(var(--o,.5) * .18); }
  50%    { opacity:var(--o,.5); }
}
/* dust doesn't twinkle — it just fades in and out at the edges of its run */
.sparkles i.dust{ animation-name:driftFade; }
@keyframes driftFade{
  0%   { transform:translate3d(0,14vh,0) scale(.5); opacity:0; }
  14%  { opacity:var(--o,.4); }
  86%  { opacity:var(--o,.4); }
  100% { transform:translate3d(var(--x,20px),-104vh,0) scale(1); opacity:0; }
}


/* content always sits above the sparkle field */
main > .section, main > .hero, .footer{ position:relative; z-index:2; }
.hero-inner{ position:relative; z-index:3; }

/* ---------- 16.4 Footer credit ---------- */
.footer-credit{
  margin:16px 0 0; text-align:center;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(147,117,128,.72);
}
.footer-credit a{ color:inherit; transition:color .35s var(--ease); }
.footer-credit a:hover{ color:var(--cherry); }

/* ---------- 16.5 Responsive additions ---------- */
@media (max-width:900px){
  .quals ul{ grid-template-columns:1fr; }
  .certs{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .photo-frame{ aspect-ratio:4/5; }
}
@media (prefers-reduced-motion:reduce){
  .sparkles{ display:none; }
  
}

/* hero certification line */
.hero-cert{
  display:inline-block; margin:18px 0 0;
  padding:9px 20px; border-radius:999px;
  border:1px solid var(--gold-pale);
  background:rgba(255,253,252,.62);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep);
}

/* ---------- 17. ROSE GOLD ICONOGRAPHY ---------- */
svg.spark{
  width:1em; height:1em; flex:none;
  color:var(--gold); vertical-align:-.12em;
}
.btn svg.spark{ width:15px; height:15px; color:currentColor; }
.badge svg.spark{ color:var(--gold-deep); }
.page-title .emo{ display:inline-block; }
.page-title .emo svg.spark{ width:.62em; height:.62em; color:var(--gold); vertical-align:.06em; }
.certs-note svg.spark{ color:var(--gold); }
.hero-cert svg.spark{ width:12px; height:12px; color:var(--gold-deep); }
.lede svg.spark{ color:var(--gold); }
.ic-spark svg.spark{ width:26px; height:26px; color:var(--gold); }
.tile .ph .ic-spark svg.spark{ width:24px; height:24px; opacity:.7; }

/* rose gold tick badge (qualifications + booking notes) */
.notes .tick,
.quals li .tick{
  flex:none; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; margin-top:2px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));
  color:#FFFDFC; font-size:11px; line-height:1;
}
.notes .tick.warn{ background:linear-gradient(135deg,var(--cherry-light),var(--cherry-deep)); font-weight:500; }

/* gallery: real photographs keep their natural proportions */

/* emphasis inside the booking notes */
.notes li strong{ font-weight:500; color:var(--cherry-deep); }
.quals li strong{ font-weight:400; }

/* ==========================================================================
   18. BOOKING FORM
   ========================================================================== */
.booking{
  margin-top:clamp(44px,6vw,68px);
  background:linear-gradient(165deg,var(--blush-soft) 0%,var(--white) 62%,var(--blush-soft) 100%);
  border:1px solid var(--gold-pale);
  border-radius:26px;
  padding:clamp(28px,4vw,52px);
  box-shadow:0 26px 70px -38px rgba(110,26,44,.4);
  position:relative;
}
.booking-head{ text-align:center; margin-bottom:clamp(28px,4vw,40px); }
.booking-head h2{ font-size:clamp(1.8rem,3.4vw,2.4rem); color:var(--cherry-deep); }
.booking-head p{
  margin:16px auto 0; max-width:52ch;
  font-size:15px; color:var(--ink-soft);
}

.bk-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,26px); }
.bk-field{ display:flex; flex-direction:column; }
.bk-field.full{ grid-column:1 / -1; }

.bk-label{
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:10px; font-weight:400;
}
.bk-label .req{ color:var(--cherry); margin-left:3px; }
.bk-hint{ font-size:12.5px; color:var(--ink-mute); margin:9px 0 0; font-style:italic; }

.bk-input,
.bk-select,
.bk-textarea{
  width:100%;
  font-family:var(--sans); font-size:15.5px; font-weight:300;
  color:var(--ink);
  background:var(--white);
  border:1px solid rgba(201,140,106,.34);
  border-radius:14px;
  padding:15px 18px;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.bk-textarea{ min-height:120px; resize:vertical; line-height:1.65; }
.bk-input::placeholder,.bk-textarea::placeholder{ color:rgba(147,117,128,.7); }
.bk-input:hover,.bk-select:hover,.bk-textarea:hover{ border-color:rgba(201,140,106,.6); }
.bk-input:focus,.bk-select:focus,.bk-textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(248,226,232,.9);
  background:#fff;
}
.bk-select{
  cursor:pointer; padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C98C6A' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 17px center;
  background-size:17px;
}
.bk-select option{ color:var(--ink); }

/* validation */
.bk-error{
  font-size:12.5px; color:var(--cherry); margin:9px 0 0;
  display:none; letter-spacing:.02em;
}
.bk-field.invalid .bk-error{ display:block; }
.bk-field.invalid .bk-input,
.bk-field.invalid .bk-select,
.bk-field.invalid .bk-picker{
  border-color:var(--cherry-light);
  box-shadow:0 0 0 4px rgba(179,46,72,.09);
}

/* ---------- 18.1 Calendar picker ---------- */
.bk-picker{
  background:var(--white);
  border:1px solid rgba(201,140,106,.34);
  border-radius:16px;
  padding:16px 16px 18px;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.cal-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:14px;
}
.cal-title{
  font-family:var(--serif); font-size:1.28rem; color:var(--cherry-deep);
  letter-spacing:.03em; text-align:center; flex:1;
}
.cal-nav{
  width:34px; height:34px; flex:none;
  border-radius:50%; border:1px solid rgba(201,140,106,.35);
  background:var(--blush-soft); color:var(--gold-deep);
  display:grid; place-items:center;
  transition:background .35s var(--ease), border-color .35s var(--ease),
             transform .35s var(--ease), opacity .35s var(--ease);
}
.cal-nav svg{ width:15px; height:15px; }
.cal-nav:hover:not(:disabled){ background:var(--blush); border-color:var(--gold); transform:scale(1.06); }
.cal-nav:disabled{ opacity:.3; cursor:not-allowed; }
.cal-dow{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
  margin-bottom:6px;
}
.cal-dow span{
  text-align:center; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute); padding:6px 0;
}
.cal-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-day{
  aspect-ratio:1; min-height:38px;
  border:1px solid transparent; border-radius:11px;
  background:transparent; color:var(--ink-soft);
  font-family:var(--sans); font-size:14px; font-weight:300;
  display:grid; place-items:center;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.cal-day:hover:not(:disabled):not(.is-selected){
  background:var(--blush); border-color:var(--gold-pale); transform:translateY(-1px);
}
.cal-day:disabled{ color:rgba(147,117,128,.32); cursor:not-allowed; }
.cal-day.is-today{ border-color:var(--gold-pale); color:var(--gold-deep); }
.cal-day.is-today::after{
  content:""; position:absolute; /* dot handled by wrapper below */
}
.cal-day.is-selected{
  background:linear-gradient(135deg,#D4A78A,#C98C6A);
  color:#FFFDFC; border-color:transparent;
  box-shadow:0 8px 20px -10px rgba(190,127,93,.8);
}
.cal-day:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.cal-empty{ min-height:38px; }
.cal-foot{
  margin-top:12px; padding-top:12px;
  border-top:1px solid rgba(201,140,106,.18);
  font-size:12.5px; color:var(--ink-mute); text-align:center;
}
.cal-foot b{ color:var(--cherry); font-weight:400; }

/* ---------- 18.2 Time slots ---------- */
.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:9px; }
.slot{
  padding:13px 8px; border-radius:12px;
  border:1px solid rgba(201,140,106,.34);
  background:var(--white); color:var(--ink-soft);
  font-family:var(--sans); font-size:14px; letter-spacing:.06em;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.slot:hover:not(.is-selected){
  background:var(--blush); border-color:var(--gold); transform:translateY(-2px);
}
.slot.is-selected{
  background:linear-gradient(135deg,#D4A78A,#C98C6A);
  color:#FFFDFC; border-color:transparent;
  box-shadow:0 10px 24px -12px rgba(190,127,93,.8);
}
.slot:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.slots-empty{
  grid-column:1/-1; text-align:center; padding:18px;
  font-size:14px; color:var(--ink-mute); font-style:italic;
}

/* ---------- 18.3 Submit + confirmation ---------- */
.bk-submit{ grid-column:1/-1; text-align:center; margin-top:8px; }
.bk-submit .btn{ min-width:270px; }
.bk-submit .btn[disabled]{ opacity:.62; cursor:wait; transform:none; }
.bk-smallprint{
  margin:16px auto 0; max-width:46ch;
  font-size:12px; color:var(--ink-mute); line-height:1.6;
}

.bk-success{
  display:none;
  text-align:center; padding:clamp(20px,4vw,44px) clamp(10px,3vw,30px);
  animation:fadeUp .8s var(--ease) both;
}
.booking.is-sent .bk-form,
.booking.is-sent .booking-head{ display:none; }
.booking.is-sent .bk-success{ display:block; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.bk-success .tickbig{
  width:76px; height:76px; margin:0 auto 24px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));
  color:#FFFDFC; font-size:31px; line-height:1;
  box-shadow:0 16px 40px -18px rgba(190,127,93,.85);
}
.bk-success h3{ font-size:clamp(1.7rem,3.4vw,2.3rem); color:var(--cherry-deep); }
.bk-success p{ margin:18px auto 0; max-width:44ch; color:var(--ink-soft); font-size:1.02rem; }
.bk-recap{
  margin:30px auto 0; max-width:430px; text-align:left;
  background:var(--white); border:1px solid var(--gold-pale);
  border-radius:18px; padding:22px 26px;
}
.bk-recap dl{ margin:0; display:grid; gap:11px; }
.bk-recap .row{ display:flex; justify-content:space-between; gap:18px; align-items:baseline; }
.bk-recap dt{
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-mute); flex:none;
}
.bk-recap dd{
  margin:0; text-align:right;
  font-family:var(--serif); font-size:1.1rem; color:var(--cherry-deep); line-height:1.3;
}

/* ---------- 18.4 Responsive ---------- */
@media (max-width:820px){
  .bk-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .booking{ padding:24px 18px 30px; border-radius:20px; }
  .cal-day,.cal-empty{ min-height:40px; }
  .cal-day{ font-size:14.5px; }
  .slots{ grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); }
  .bk-submit .btn{ width:100%; min-width:0; }
  .bk-recap{ padding:20px; }
  .bk-recap .row{ flex-direction:column; gap:3px; }
  .bk-recap dd{ text-align:left; }
}

/* time panel matches the calendar's height and reads as a pair with it */
.bk-field[data-field="time"]{ min-width:0; }
.bk-field[data-field="time"] .bk-picker{
  flex:1; display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:20px;
}
.bk-field[data-field="time"] .slots-empty{ margin:auto 0; }
.bk-field[data-field="time"] .slots{ grid-template-columns:repeat(2,1fr); gap:11px; }
.bk-field[data-field="time"] .slot{ padding:16px 8px; font-size:15px; }
.slots-cap{
  margin:0 0 14px; text-align:center;
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);
}
.slots-cap b{ color:var(--cherry); font-weight:400; letter-spacing:.1em; text-transform:none; font-size:12.5px; }
@media (max-width:820px){
  .bk-field[data-field="time"] .bk-picker{ min-height:0; }
}
@media (max-width:380px){
  .bk-field[data-field="time"] .slots{ grid-template-columns:1fr; }
}
.slots-cap{ grid-column:1/-1; }

/* ==========================================================================
   19. HOME EXTRAS · REVIEWS · CLIENTS · AFTERCARE · POLICIES
   ========================================================================== */

/* ---------- 19.1 Availability banner ---------- */
.avail{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px 30px;
  margin:44px auto 0; max-width:720px;
  padding:22px 30px;
  background:var(--white);
  border:1px solid var(--gold-pale);
  border-radius:999px;
  box-shadow:0 16px 44px -28px rgba(110,26,44,.35);
}
.avail .item{ display:flex; align-items:center; gap:10px; }
.avail .dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(201,140,106,.16);
  animation:pulseDot 2.8s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{ box-shadow:0 0 0 4px rgba(201,140,106,.16); }
                     50%{ box-shadow:0 0 0 8px rgba(201,140,106,.06); } }
.avail .lbl{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute); }
.avail .val{ font-family:var(--serif); font-size:1.06rem; color:var(--cherry-deep); }
.avail .sep{ width:1px; height:26px; background:rgba(201,140,106,.28); }
@media (max-width:680px){
  .avail{ border-radius:22px; flex-direction:column; gap:16px; padding:24px; }
  .avail .sep{ display:none; }
  .avail .item{ flex-direction:column; text-align:center; gap:6px; }
}

/* ---------- 19.2 The Rosie difference ---------- */
.diffs{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,24px); margin-top:52px; }
.diff{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--white);
  border:1px solid rgba(201,140,106,.26);
  border-radius:18px; padding:26px 28px;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.diff:hover{ transform:translateY(-5px); border-color:var(--gold); box-shadow:var(--shadow-lift); }
.diff svg.spark{ flex:none; width:19px; height:19px; margin-top:3px; color:var(--gold); }
.diff h3{ font-size:1.24rem; color:var(--cherry-deep); margin-bottom:5px; }
.diff p{ margin:0; font-size:14.5px; color:var(--ink-soft); }

/* ---------- 19.3 Three step journey ---------- */
.journey{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,34px); margin-top:56px; }
.step{ text-align:center; position:relative; padding:0 10px; }
.step .num{
  width:58px; height:58px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#D4A78A,#C98C6A);
  color:#FFFDFC; font-family:var(--serif); font-size:1.5rem;
  box-shadow:0 14px 32px -16px rgba(190,127,93,.8);
}
.step h3{ font-size:1.5rem; color:var(--cherry-deep); margin-bottom:9px; }
.step p{ margin:0; font-size:14.5px; color:var(--ink-soft); }
.step:not(:last-child)::after{
  content:""; position:absolute; top:29px; left:calc(50% + 42px); right:calc(-50% + 42px);
  height:1px; background:linear-gradient(90deg,var(--gold-pale),rgba(201,140,106,.5),var(--gold-pale));
}
@media (max-width:820px){
  .diffs{ grid-template-columns:1fr; }
  .journey{ grid-template-columns:1fr; gap:34px; }
  .step:not(:last-child)::after{ display:none; }
}

/* ---------- 19.4 Reviews ---------- */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,28px); margin-top:56px; }
.review{
  background:linear-gradient(165deg,var(--blush-soft),var(--white));
  border:1px solid var(--gold-pale);
  border-radius:22px;
  padding:clamp(28px,3.4vw,38px);
  display:flex; flex-direction:column;
  transition:transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
}
.review:hover{ transform:translateY(-7px); border-color:var(--gold); box-shadow:var(--shadow-lift); }
.review .qmark{
  font-family:var(--serif); font-size:3.4rem; line-height:.55;
  color:var(--gold-pale); display:block; margin-bottom:16px;
}
.review blockquote{
  margin:0 0 auto; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.24rem,2vw,1.48rem); line-height:1.5; color:var(--cherry-deep);
}
.review .stars{ margin-top:24px; display:flex; gap:5px; }
.review .stars svg{ width:14px; height:14px; color:var(--gold); }
.review .who{
  margin-top:16px; padding-top:16px;
  border-top:1px solid rgba(201,140,106,.22);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute);
}
.review.soon{ background:var(--white); border-style:dashed; }
.review.soon blockquote{ font-size:1.2rem; color:var(--ink-mute); }

/* mobile: horizontal swipe carousel */
@media (max-width:860px){
  .reviews{
    display:flex; gap:16px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 4px 20px;
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
    scrollbar-width:none;
  }
  .reviews::-webkit-scrollbar{ display:none; }
  .review{ flex:0 0 min(82vw,340px); scroll-snap-align:center; }
}
.swipe-hint{
  display:none; text-align:center; margin-top:4px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);
}
@media (max-width:860px){ .swipe-hint{ display:block; } }

/* ---------- 19.5 Aftercare + patch test ---------- */
.care-grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(30px,5vw,64px); align-items:center; margin-top:52px;
}
.care-photo{
  border-radius:22px; overflow:hidden;
  border:1px solid var(--gold-pale);
  box-shadow:0 24px 60px -32px rgba(110,26,44,.42);
}
.care-photo img{ width:100%; height:auto; display:block; }
.care-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.care-list li{
  background:var(--white);
  border:1px solid rgba(201,140,106,.24);
  border-radius:16px; padding:18px 22px;
  font-size:14.5px; color:var(--ink-soft);
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.care-list li:hover{ border-color:var(--gold); transform:translateX(3px); }
.care-list b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:1.16rem; color:var(--cherry-deep); margin-bottom:4px;
}
@media (max-width:860px){ .care-grid{ grid-template-columns:1fr; } }

.patch{
  margin-top:clamp(44px,6vw,70px);
  background:linear-gradient(165deg,var(--blush-soft),var(--white));
  border:1px solid var(--gold-pale);
  border-radius:24px; padding:clamp(28px,4vw,48px);
}
.patch h2{ font-size:clamp(1.7rem,3.2vw,2.2rem); color:var(--cherry-deep); text-align:center; }
.patch ul{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:13px; grid-template-columns:repeat(2,1fr); }
.patch li{
  display:flex; gap:13px; align-items:flex-start;
  font-size:14.5px; color:var(--ink-soft);
  background:var(--white); border:1px solid rgba(201,140,106,.22);
  border-radius:14px; padding:16px 20px;
}
.patch .note{
  margin:24px auto 0; max-width:60ch; text-align:center;
  font-size:13.5px; font-style:italic; color:var(--ink-mute);
}
@media (max-width:820px){ .patch ul{ grid-template-columns:1fr; } }

/* ---------- 19.6 Booking policies ---------- */
.policies{
  margin-top:clamp(44px,6vw,68px);
  background:linear-gradient(165deg,var(--blush-soft),var(--white));
  border:1px solid var(--gold-pale);
  border-radius:24px; padding:clamp(28px,4vw,46px);
}
.policies h2{ font-size:clamp(1.7rem,3.2vw,2.15rem); color:var(--cherry-deep); text-align:center; }
.policies ul{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
.policies li{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--white); border:1px solid rgba(201,140,106,.22);
  border-radius:14px; padding:17px 21px;
  font-size:14.5px; color:var(--ink-soft);
}
.policies li .ic{ flex:none; font-size:17px; line-height:1.3; }
.policies li b{ color:var(--cherry-deep); font-weight:500; }
@media (max-width:820px){ .policies ul{ grid-template-columns:1fr; } }

/* ---------- 19.8 Services price rows ---------- */
.svc .prices{
  margin:auto 0 0; padding-top:20px;
  border-top:1px solid rgba(201,140,106,.3);
  display:grid; gap:9px;
}
.svc .prow{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.svc .prow .k{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); }
.svc .prow .v{ font-family:var(--serif); font-size:1.5rem; color:var(--cherry); }

/* ---------- 20. CLIENTS: MOBILE SWIPE CAROUSEL ---------- */
@media (max-width:820px){
  .masonry{
    display:flex;
    grid-template-columns:none;
    /* must not be centred: an overflowing flex row centred this way spills
       off the left edge, where scrolling cannot reach it */
    justify-content:flex-start;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    padding:4px 0 18px;
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
    scroll-padding-inline:var(--gut);
    scrollbar-width:none;
  }
  .masonry::-webkit-scrollbar{ display:none; }
  .tile{
    flex:0 0 min(78vw,310px);
    scroll-snap-align:start;
    aspect-ratio:3/4;
  }
  .tile:hover{ transform:none; box-shadow:none; }
  .tile:hover img{ transform:none; }
}
.gal-hint{
  display:none; text-align:center; margin-top:2px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);
}
@media (max-width:820px){
  .gal-hint{ display:block; }
  .load-more-wrap{ margin-top:26px; }
}

/* [hidden] must beat the button's own display value */
.btn[hidden], [hidden]{ display:none !important; }

/* ---------- 21. REVIEW CARDS WITH PHOTOS ---------- */
.review.has-photo{ padding:0; overflow:hidden; }
.review-photo{
  position:relative; margin:0;
  aspect-ratio:4/5; overflow:hidden;
  background:var(--blush);
  border-bottom:1px solid var(--gold-pale);
}
.review-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 32%;
  transition:transform .9s var(--ease);
}
.review.has-photo:hover .review-photo img{ transform:scale(1.05); }
.review-body{
  padding:clamp(24px,2.8vw,32px);
  display:flex; flex-direction:column; flex:1;
}
.review.has-photo .qmark{ font-size:2.6rem; margin-bottom:10px; }
.review.has-photo blockquote{ font-size:clamp(1.14rem,1.7vw,1.32rem); }

/* Gallery balances itself to the number of photos, so a small set never
   leaves an empty column. Falls back to the plain 3-up grid without :has(). */
@media (min-width:821px){
  .masonry{ justify-content:center; }
  .masonry:not(:has(> .tile:nth-child(3))){
    grid-template-columns:repeat(2,1fr);
    max-width:660px; margin-inline:auto;
  }
  .masonry:not(:has(> .tile:nth-child(2))){
    grid-template-columns:1fr;
    max-width:340px;
  }
}

/* the "coming soon" card shouldn't stretch to the height of a photo card */
.review.soon{ align-self:center; }
@media (max-width:860px){ .review.soon{ align-self:stretch; } }

/* ---------- 22. NAV STACKING (mobile menu must sit above the overlay) ---------- */
.nav{ z-index:100; }
.nav-overlay{ z-index:98; }
@media (max-width:900px){
  .nav-links{ z-index:110; }
  .burger{ z-index:120; }
  /* the panel is opaque and readable in its own right */
  .nav-links{
    background:var(--cream);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .nav-links a{ color:var(--ink); }
  .nav-links a.active{ color:var(--cherry); }
  .nav-links li{ pointer-events:auto; }
  /* closed panel must not swallow taps */
  .nav-links{ visibility:hidden; }
  body.menu-open .nav-links{ visibility:visible; }
}

/* ---------- 23. CLIENTS PAGE — COMPACT INSTAGRAM BLOCK ---------- */
/* thin rose gold divider · line of text · button · thin divider,
   then the aftercare heading straight after. No dead space. */
.hairline{
  height:1px; width:100%;
  background:linear-gradient(90deg,
    rgba(201,140,106,0) 0%,
    rgba(201,140,106,.42) 22%,
    rgba(201,140,106,.42) 78%,
    rgba(201,140,106,0) 100%);
}
.ig-cta{
  text-align:center;
  margin-top:clamp(22px,3vw,32px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(16px,2.2vw,22px);
}
.ig-line{
  margin:0; max-width:46ch;
  font-size:clamp(.98rem,1.5vw,1.08rem);
  color:var(--ink-soft);
}
/* the grid no longer needs a big bottom gap */
.load-more-wrap{ margin-top:clamp(18px,2.4vw,26px); }
/* aftercare starts right after the divider */
.section-tight{ padding-top:clamp(34px,4.5vw,54px); }
#clients-portfolio-end{ display:none; }
@media (max-width:820px){
  .ig-cta{ margin-top:18px; gap:15px; }
  .section-tight{ padding-top:30px; }
}
/* the portfolio section ends right after the second divider */
.section-tight-end{ padding-bottom:clamp(22px,2.6vw,34px); }
.section-tight{ padding-top:clamp(30px,3.6vw,44px); }
.section-tight .eyebrow{ margin-bottom:12px; }
@media (max-width:820px){
  .section-tight-end{ padding-bottom:20px; }
  .section-tight{ padding-top:26px; }
}

/* ---------- 24. HOME — availability sits closer to the hero ---------- */
.section-lift{ padding-top:clamp(34px,4.6vw,58px); }
@media (max-width:820px){
  .section-lift{ padding-top:30px; }
  .hero{ min-height:auto; padding-bottom:34px; }
}

/* ---------- 25. CLIENT PHOTOS — clean rose gold border ---------- */
/* No glow, no bloom — just a crisp 2px rose gold frame that follows the
   rounded corners of each photo. */
.tile{
  border:2px solid #C98C6A;
  box-shadow:none;
}
.tile:hover{
  border-color:#C98C6A;
  box-shadow:var(--shadow-lift);
}

/* ==========================================================================
   26. TRANSPARENT HEADER
   The bar itself carries no fill, so the cream background and the drifting
   sparkles read straight through it. Nothing moves or resizes — only the
   background, blur, hairline and scrolled shadow are removed.
   ========================================================================== */
.nav,
.nav.scrolled{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:0;
  box-shadow:none;
}

/* The fixed sparkle layer already spans the whole viewport, so it is visible
   through the header. Nudge it above the page background but still far below
   every piece of content. */
.sparkles.page-layer{ z-index:0; }

/* The mobile slide-in panel stays opaque — it must never be see-through. */
@media (max-width:900px){
  .nav-links{ background:var(--cream); }
}

/* --------------------------------------------------------------------------
   OPTIONAL — readability when photos scroll behind the transparent header.

   The header is fully transparent as requested, which looks lovely at the top
   of every page. Once you scroll on Clients (and past the portrait on About),
   photos pass directly behind the bar and the logo and links get hard to read.

   If that bothers you, delete the opening and closing comment marks around the
   rule below. The header then stays completely transparent at the top of the
   page — sparkles and all — and only fades in a soft cream veil once you have
   scrolled past it.
   -------------------------------------------------------------------------- */
/*
.nav.scrolled{
  background:linear-gradient(180deg,
    rgba(255,248,245,.94) 0%,
    rgba(255,248,245,.80) 68%,
    rgba(255,248,245,0)  100%);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
*/

/* ==========================================================================
   27. HEADER SITS AT THE TOP OF THE PAGE, NOT PINNED TO THE VIEWPORT
   ========================================================================== */
.nav{
  position:absolute;
  top:0; left:0; right:0;
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:0; box-shadow:none;
}

/* ==========================================================================
   28. SALON PHOTO AS THE HERO BACKGROUND — MOBILE ONLY
   Desktop keeps the plain cream + sparkles.
   ========================================================================== */
@media (max-width:900px){
  .hero{
    background-image:
      linear-gradient(180deg,
        rgba(255,250,247,.78) 0%,
        rgba(255,250,247,.60) 42%,
        rgba(255,250,247,.74) 100%),
      linear-gradient(0deg, rgba(255,236,220,.16), rgba(201,140,106,.08)),
      url("../assets/salon.jpg");
    background-size:cover;
    background-position:center 38%;
    background-repeat:no-repeat;
  }
}

/* ==========================================================================
   29. SPARKLES VISIBLE THE FULL HEIGHT OF THE HOMEPAGE
   The hero and the .band sections each painted their own opaque cream fill,
   which sat above the fixed sparkle layer and hid it — which is why the
   homepage looked like the sparkles faded out. The <body> already provides
   the cream, so these can simply be transparent. Appearance is identical;
   the sparkles now show through top to bottom, header included.
   ========================================================================== */
.hero{ background-color:transparent; }
.band,
.band-cream{ background:transparent; }
.footer{ background:transparent; }

/* mobile keeps the salon photo behind the hero — only the flat fill is dropped */
@media (max-width:900px){
  .hero{ background-color:transparent; }
}

/* homepage sparkles a touch brighter, other pages untouched */
.sparkles.home-layer{ filter:brightness(1.08) saturate(1.06); }

/* ==========================================================================
   30. FAQ PAGE
   ========================================================================== */
.faq-list{ margin-top:clamp(40px,5vw,58px); display:grid; gap:14px; }
.faq-item{
  background:linear-gradient(165deg,var(--blush-soft),var(--white));
  border:1px solid var(--gold-pale);
  border-radius:18px;
  overflow:hidden;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.faq-item[open]{ border-color:var(--gold); box-shadow:0 18px 46px -30px rgba(110,26,44,.4); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:clamp(20px,2.6vw,26px) clamp(22px,3vw,30px);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:focus-visible{ outline:2px solid var(--gold); outline-offset:-3px; }
.faq-q{
  font-family:var(--serif);
  font-size:clamp(1.14rem,2vw,1.36rem);
  color:var(--cherry-deep); line-height:1.35;
}
.faq-mark{
  flex:none; position:relative; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--gold); background:var(--white);
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.faq-mark::before,.faq-mark::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--gold-deep); transform:translate(-50%,-50%);
  transition:opacity .35s var(--ease), background .35s var(--ease);
}
.faq-mark::before{ width:9px; height:1.5px; }
.faq-mark::after{ width:1.5px; height:9px; }
.faq-item[open] .faq-mark{ background:linear-gradient(135deg,#D4A78A,#C98C6A); transform:rotate(180deg); }
.faq-item[open] .faq-mark::before,
.faq-item[open] .faq-mark::after{ background:#FFFDFC; }
.faq-item[open] .faq-mark::after{ opacity:0; }
.faq-a{
  padding:0 clamp(22px,3vw,30px) clamp(22px,2.8vw,28px);
  animation:faqOpen .45s var(--ease) both;
}
.faq-a p{
  margin:0; padding-top:16px;
  border-top:1px solid rgba(201,140,106,.24);
  font-size:15.5px; color:var(--ink-soft);
}
@keyframes faqOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .faq-a{ animation:none; } }

/* ==========================================================================
   31. CLIENT PHOTO LIGHTBOX
   ========================================================================== */
.tile img{ cursor:zoom-in; }
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(61,34,41,.82);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:16px;
  border:2px solid #C98C6A;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
  transform:scale(.96);
  transition:transform .4s var(--ease);
}
.lightbox.is-open img{ transform:scale(1); }
.lightbox-close{
  position:absolute; top:clamp(12px,2.5vw,24px); right:clamp(12px,2.5vw,24px);
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(255,248,245,.14);
  color:#FFFDFC; font-size:0; line-height:0;
  display:grid; place-items:center;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.lightbox-close::before,.lightbox-close::after{
  content:""; position:absolute; width:17px; height:1.6px;
  background:#FFFDFC; border-radius:2px;
}
.lightbox-close::before{ transform:rotate(45deg); }
.lightbox-close::after{ transform:rotate(-45deg); }
.lightbox-close:hover{ background:rgba(201,140,106,.55); transform:scale(1.06); }
body.lightbox-open{ overflow:hidden; }
@media (max-width:640px){
  .lightbox{ padding:10px; }
  .lightbox img{ border-radius:12px; }
}
/* close button must sit above the photo */
.lightbox-close{ z-index:2; }

/* footer: full cherry logo + business email */
.footer-cherry{ height:78px; width:auto; }
.footer-email{
  margin:14px 0 0; text-align:center;
  font-size:12px; letter-spacing:.06em; color:var(--ink-mute);
}
.footer-email a{ color:var(--ink-soft); transition:color .35s var(--ease); }
.footer-email a:hover{ color:var(--cherry); text-decoration:underline;
  text-decoration-color:var(--gold); text-underline-offset:4px; }

/* full cherry in the header — a touch taller so the bow reads */
.nav-logo img{ height:44px; }
@media (max-width:640px){ .nav-logo img{ height:38px; } }

/* home availability: elegant line in place of the capsule */
.avail-line{
  margin:clamp(26px,3.4vw,38px) auto 0;
  text-align:center;
  font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-mute);
}

/* booking form: note above the date/time fields */
.bk-prefs-note{
  margin:0; padding:16px 20px;
  background:var(--white);
  border:1px solid var(--gold-pale);
  border-radius:14px;
  font-size:14.5px; color:var(--ink-soft); line-height:1.65;
}