/* ============================================================
   Kate's Studios Co. — shared stylesheet
   "Websites in full bloom" · garden / Love Shack Fancy feel
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Barlow+Semi+Condensed:wght@400;500;600;700&family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=La+Belle+Aurore&family=Fraunces:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root{
  /* — palette (from Brand Kit) — */
  --pink:#ff66c4;
  --blush:#edc2d1;
  --light-magenta:#ffdcf0;
  --rose:#d198a2;
  --terracotta:#c3756d;
  --cream:#f6efe8;
  --off-white:#faf5f8;
  --gray:#c3c0c4;
  --ink:#2b2b2b;            /* body text — never pink for small text */
  --ink-soft:#5a5a5a;
  --sage:#a9b89e;
  --eucalyptus:#c6d3b8;
  --garden:#7c8c6a;

  /* — type — */
  --display:'Barlow Semi Condensed','Jost',sans-serif;   /* H1 / hero headlines */
  --serif:'Alumni Sans','Jost',sans-serif;               /* subheads & pull-quotes */
  --sans:'Jost',-apple-system,BlinkMacSystemFont,sans-serif;
  --script:'La Belle Aurore',cursive;

  /* — system — */
  --maxw:1180px;
  --gutter:clamp(22px,5vw,72px);
  --radius:18px;
  --shadow-soft:0 18px 50px -32px rgba(195,117,109,.55);
  --shadow-lift:0 28px 70px -36px rgba(184,108,124,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%;}
a{color:var(--terracotta);text-decoration:none;}

/* ---------- typography ---------- */
.eyebrow{
  font-family:var(--sans);font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;
  font-size:11px;color:var(--terracotta);
}
h1,h2,h3{color:var(--pink);line-height:1.1;}
h1{font-family:var(--display);font-weight:600;font-size:clamp(48px,9.5vw,110px);letter-spacing:-.005em;line-height:1.02;}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,5vw,58px);letter-spacing:.005em;}
h3{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.5vw,29px);color:#3a3a3a;}
.lead{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(19px,2.4vw,25px);color:var(--ink-soft);
}
.script{font-family:var(--script);color:var(--rose);line-height:1.2;}
p{max-width:62ch;}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
section{padding-block:clamp(64px,9vw,128px);position:relative;}
.center{text-align:center;}
.center p{margin-inline:auto;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--sans);font-weight:400;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:16px 34px;border-radius:40px;cursor:pointer;border:1px solid transparent;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.btn-primary{background:var(--pink);color:#fff;box-shadow:0 16px 34px -16px rgba(255,102,196,.7);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 44px -16px rgba(255,102,196,.85);}
.btn-ghost{background:transparent;color:var(--terracotta);border-color:var(--rose);}
.btn-ghost:hover{background:var(--off-white);transform:translateY(-3px);border-color:var(--terracotta);}
.btn .arrow{transition:transform .4s var(--ease);}
.btn:hover .arrow{transform:translateX(5px);}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:fixed;top:16px;left:0;right:0;z-index:60;
  margin-inline:clamp(14px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px 11px 22px;
  border-radius:999px;
  box-shadow:0 12px 34px -24px rgba(184,108,124,.55);
  transition:box-shadow .5s var(--ease),padding .5s var(--ease),top .5s var(--ease);
}
/* Frosted-glass background lives on a pseudo-element, NOT on .nav itself.
   backdrop-filter on .nav would make it the containing block for the
   position:fixed mobile drawer (.nav-links) — pinning the open menu to the
   little nav pill instead of the screen. Keeping the blur here fixes that and
   the -webkit- prefix makes the blur actually render on iOS Safari. */
.nav::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:rgba(250,245,248,.5);
  border:1px solid rgba(209,152,162,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
.nav.scrolled{
  top:10px;
  box-shadow:var(--shadow-lift);
  padding-block:8px;
}
.nav.scrolled::before{
  background:rgba(246,239,232,.9);
  border-color:rgba(209,152,162,.36);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.nav-brand{display:flex;align-items:center;gap:12px;}
.nav-brand img{height:34px;width:auto;}
.nav-brand .name{font-family:var(--serif);font-weight:500;font-size:20px;color:var(--pink);letter-spacing:.01em;white-space:nowrap;}
.nav-links{display:flex;align-items:center;gap:38px;list-style:none;}
.nav-links a{
  font-family:var(--sans);font-weight:400;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  position:relative;padding-block:4px;transition:color .3s var(--ease);
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--pink);
  transition:width .4s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--pink);}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%;}
.nav-links .btn{padding:11px 24px;font-size:12px;}
.nav-links .btn::after{display:none;}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;position:relative;z-index:70;}
.nav-toggle span{width:26px;height:1.6px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s var(--ease);}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(6.6px) rotate(45deg);}
.nav.open .nav-toggle span:nth-child(2){opacity:0;}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg);}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  min-height:100svh;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:auto 1fr auto;
  column-gap:clamp(16px,3vw,40px);
  padding:clamp(104px,13vh,142px) var(--gutter) clamp(38px,5vh,62px);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--light-magenta) 0%, rgba(255,220,240,0) 55%),
    radial-gradient(70% 60% at 90% 106%, var(--eucalyptus) 0%, rgba(198,211,184,0) 60%),
    radial-gradient(70% 60% at 6% 104%, var(--sage) 0%, rgba(169,184,158,0) 58%),
    linear-gradient(165deg,var(--off-white) 0%,var(--cream) 58%,#eef0e6 100%);
}

/* oversized headline — overlaps the portrait */
.hero-title{
  grid-column:1 / 13;grid-row:1;align-self:start;
  position:relative;z-index:3;pointer-events:none;
  margin-top:clamp(60px,9.5vh,144px);
  font-family:var(--display);font-weight:600;color:var(--pink);text-transform:uppercase;
  font-size:clamp(48px,10.4vw,150px);line-height:.92;letter-spacing:.05em;
}
.hero-title span{display:block;}
.hero-title span:last-child{padding-left:.06em;} /* slight stagger, editorial feel */

/* portrait — tall right column, sits under the headline's right edge */
.hero-photo{
  grid-column:7 / 13;grid-row:1 / 3;align-self:stretch;
  position:relative;z-index:2;overflow:hidden;border-radius:6px;
  min-height:clamp(320px,54vh,580px);box-shadow:var(--shadow-lift);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;}

/* intro + buttons — sit just under the headline, reaching toward the photo */
.hero-intro{
  grid-column:1 / 7;grid-row:2;align-self:start;
  position:relative;z-index:4;margin-top:clamp(56px,10vh,124px);
}
.hero-intro p{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(19px,2.3vw,26px);color:var(--ink-soft);
  max-width:40ch;margin-bottom:clamp(56px,10vh,124px);
}
.hero-intro em{color:var(--rose);}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}

/* studio name — caption beneath the photo */
.hero-name{
  grid-column:7 / 13;grid-row:3;align-self:start;position:relative;z-index:4;margin-top:14px;
  font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(17px,2.3vw,29px);color:var(--terracotta);
}

/* Laptop / desktop — larger section labels for The Studio & How it works */
@media(min-width:881px){
  .studio .eyebrow,
  .services .eyebrow{font-size:15px;letter-spacing:.36em;}
}

@media(max-width:880px){
  .hero{grid-template-columns:1fr;grid-template-rows:none;row-gap:16px;padding-top:clamp(84px,11vh,116px);}
  .hero-email,.hero-title,.hero-photo,.hero-intro,.hero-name{grid-column:1;grid-row:auto;}
  .hero-title{font-size:clamp(46px,13.5vw,86px);line-height:.96;pointer-events:auto;margin-top:clamp(2px,0.5vh,8px);position:relative;z-index:3;}
  .hero-photo{min-height:auto;aspect-ratio:4/5;max-height:72vh;margin-top:clamp(-56px,-11.5vw,-30px);}
  .hero-name{order:1;margin-top:14px;}
  .hero-intro{order:2;margin-top:clamp(6px,1.5vh,14px);}
  .hero-intro p{max-width:42ch;margin-bottom:clamp(22px,5vh,44px);font-size:clamp(22px,2.8vw,30px);}
  .hero-cta .btn{padding:15px 31px;font-size:13.5px;}
}

/* ---- falling rose petals (subtle background drift) ---- */
.petals{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.petal{position:absolute;top:-6%;left:var(--left);will-change:transform;
  animation:petal-fall var(--dur) linear var(--delay) infinite;}
.petal i{display:block;width:var(--size);height:calc(var(--size) * .74);
  background:var(--col);border-radius:0 100% 0 100%;opacity:.7;
  box-shadow:inset 0 0 6px rgba(255,255,255,.5);
  animation:petal-sway var(--sway) ease-in-out infinite alternate;}
@keyframes petal-fall{
  0%{transform:translate3d(0,0,0);opacity:0;}
  8%{opacity:.95;}
  90%{opacity:.95;}
  100%{transform:translate3d(var(--drift),108vh,0);opacity:0;}
}
@keyframes petal-sway{from{transform:translateX(-14px) rotate(0deg);}to{transform:translateX(14px) rotate(360deg);}}

@media(prefers-reduced-motion:reduce){
  .petals{display:none;}
}

/* ============================================================
   ABOUT (home — right after hero)
   ============================================================ */
.about{background:var(--off-white);}
.about-grid{display:grid;grid-template-columns:0.85fr 1fr;gap:clamp(34px,6vw,84px);align-items:center;}
.about-photo{position:relative;}
.about-photo img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:300px 300px 22px 22px;   /* arch top */
  box-shadow:var(--shadow-lift);
}
.about-photo .frame{
  content:'';position:absolute;inset:14px;border:1px solid var(--blush);
  border-radius:290px 290px 16px 16px;pointer-events:none;
}
.about-photo .leaf{position:absolute;right:-22px;bottom:30px;width:120px;opacity:.85;color:var(--sage);}
.about-text h2{margin-bottom:8px;}
.about-text .lead{margin-bottom:22px;}
.about-text p+p{margin-top:16px;}
.about-text .sig{font-family:var(--script);font-size:34px;color:var(--rose);margin-top:26px;}

/* ============================================================
   STUDIO — feature cards
   ============================================================ */
.studio{text-align:center;padding-bottom:clamp(28px,4vw,52px);}
.studio .eyebrow{line-height:1.1;margin-bottom:16px;}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:54px;}
.feature{
  background:var(--off-white);border:1px solid rgba(209,152,162,.22);
  border-radius:200px 200px var(--radius) var(--radius);
  padding:46px 30px 38px;box-shadow:var(--shadow-soft);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.feature:hover{transform:translateY(-8px);box-shadow:var(--shadow-lift);}
.feature .ico{
  width:62px;height:62px;margin:0 auto 22px;border-radius:50%;
  display:grid;place-items:center;background:var(--light-magenta);color:var(--pink);
}
.feature:nth-child(2) .ico{background:var(--eucalyptus);color:var(--garden);}
.feature:nth-child(3) .ico{background:var(--blush);color:var(--terracotta);}
.feature h3{margin-bottom:10px;}
.feature p{font-size:15px;color:var(--ink-soft);margin-inline:auto;}

/* animated scroll cue — thin pink arrow nudging toward "How it works" */
.scroll-cue{display:block;width:30px;height:auto;margin:clamp(80px,9vw,120px) auto 0;color:var(--pink);}
.scroll-cue span{display:block;animation:cueBounce 1.9s ease-in-out infinite;}
.scroll-cue svg{display:block;width:100%;height:auto;}
.scroll-cue:hover{color:var(--rose);}
@keyframes cueBounce{
  0%,100%{transform:translateY(0);opacity:.55;}
  50%{transform:translateY(10px);opacity:1;}
}

/* ============================================================
   SERVICES — 3 step process
   ============================================================ */
.services{background:linear-gradient(180deg,var(--cream),#efe4dc);text-align:center;padding-top:clamp(28px,4vw,52px);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;position:relative;}
.step{padding:0 18px;position:relative;}
.step .num{
  font-family:var(--serif);font-style:italic;font-size:56px;color:var(--rose);
  line-height:1;display:block;margin-bottom:14px;
}
.step h3{margin-bottom:8px;}
.step p{font-size:15px;color:var(--ink-soft);margin-inline:auto;}
.step:not(:last-child)::after{
  content:'❧';position:absolute;right:-14px;top:18px;color:var(--sage);font-size:22px;
}

/* ============================================================
   CTA strip
   ============================================================ */
.cta-strip{text-align:center;background:
   radial-gradient(80% 120% at 50% 0%,var(--light-magenta),var(--off-white) 70%);}
.cta-strip h2{margin-bottom:8px;}
.cta-strip .lead{margin-bottom:34px;}

/* ============================================================
   WORK — portfolio grid
   ============================================================ */
.page-head{padding-top:160px;text-align:center;background:
   radial-gradient(90% 70% at 50% -20%,var(--light-magenta),transparent 60%);}
.page-head .eyebrow{margin-bottom:10px;}
.page-head .lead{margin:14px auto 0;}

.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,4vw,48px);margin-top:18px;}
.project{transition:transform .5s var(--ease);}
.project:hover{transform:translateY(-6px);}
/* browser-frame mockup */
.mock{
  border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:var(--shadow-soft);border:1px solid rgba(209,152,162,.2);
  transition:box-shadow .5s var(--ease);
}
.project:hover .mock{box-shadow:var(--shadow-lift);}
.mock .bar{
  display:flex;align-items:center;gap:7px;padding:11px 16px;
  background:var(--off-white);border-bottom:1px solid rgba(209,152,162,.18);
}
.mock .bar i{width:10px;height:10px;border-radius:50%;background:var(--blush);}
.mock .bar i:nth-child(2){background:var(--eucalyptus);}
.mock .bar i:nth-child(3){background:var(--gray);}
.mock .bar .url{
  margin-left:10px;flex:1;height:18px;border-radius:9px;background:var(--cream);
  font-size:10px;color:var(--gray);display:flex;align-items:center;padding:0 12px;letter-spacing:.08em;
}
.mock .shot{
  position:relative;
  aspect-ratio:16/11;background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.4) 0 18px,transparent 18px 36px),
    linear-gradient(150deg,var(--light-magenta),var(--eucalyptus));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--terracotta);text-align:center;padding:24px;
}
.mock .shot .ph-script{font-family:var(--script);font-size:30px;color:var(--rose);}
.mock .shot .ph-note{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--terracotta);opacity:.75;}
.mock .shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
/* real screenshot — match the frame to the screenshot's own ~1.97:1 ratio so the
   hero fills the card edge-to-edge with no letterbox bands */
.mock .shot--photo{aspect-ratio:2870/1456;background:#cbc1e0;}
.mock .shot--photo img{object-fit:cover;}
/* preview-based cards (Lash'd, The Vanity) share the photo cards' wide frame
   so every card in the grid sits at the same height */
.mock .shot:has(.pv--laneah),
.mock .shot:has(.pv--salon){aspect-ratio:2870/1456;}
.project .meta{padding:18px 4px 0;}
.project .meta h3{color:#3a3a3a;}
.project .meta .tag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);}

/* ============================================================
   WORK — brand hero previews (mini homepage mockups in-frame)
   Built as scalable CSS so they stay crisp at any card width.
   Sizing uses container-query units (cqw) off the .shot width.
   ============================================================ */
.mock .shot{container-type:inline-size;}
.preview{
  position:absolute;inset:0;display:flex;flex-direction:column;
  font-family:var(--sans);color:var(--ink);overflow:hidden;text-align:left;
}
.preview .pv-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:3.6cqw 5.4cqw 0;flex-shrink:0;
}
.preview .pv-logo{font-family:var(--serif);font-weight:600;font-size:3.6cqw;letter-spacing:.04em;}
.preview .pv-links{
  display:flex;gap:3.2cqw;font-size:1.85cqw;letter-spacing:.2em;
  text-transform:uppercase;opacity:.55;
}
.preview .pv-hero{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:0 6cqw;gap:1.3cqw;position:relative;
}
.preview .pv-script{font-family:var(--script);font-size:6.4cqw;line-height:1;color:var(--rose);}
.preview .pv-h{font-family:var(--display);font-weight:600;font-size:9.2cqw;line-height:.92;letter-spacing:-.012em;}
.preview .pv-sub{font-size:2.35cqw;line-height:1.55;max-width:26ch;opacity:.72;margin-top:.8cqw;}
.preview .pv-btn{
  margin-top:2.4cqw;align-self:flex-start;font-size:1.85cqw;letter-spacing:.18em;
  text-transform:uppercase;padding:2.6cqw 4.8cqw;border-radius:40px;color:#fff;background:var(--rose);
}
/* split (text + decorative panel) */
.preview .pv-split{flex:1;display:grid;grid-template-columns:1.05fr .95fr;}
.preview .pv-split .pv-col{display:flex;flex-direction:column;justify-content:center;padding:0 5.6cqw;gap:1.2cqw;}
.preview .pv-split .pv-script{font-size:5.2cqw;}
.preview .pv-split .pv-h{font-size:6.8cqw;}
.preview .pv-split .pv-sub{font-size:2.05cqw;}
.preview .pv-split .pv-btn{font-size:1.7cqw;padding:2.2cqw 4.2cqw;}
.preview .pv-panel{position:relative;overflow:hidden;}
/* centered variant */
.pv--center .pv-hero{align-items:center;text-align:center;}
.pv--center .pv-sub{margin-inline:auto;}
.pv--center .pv-btn{align-self:center;}

/* 1 · skincare studio */
.pv--skincare{background:linear-gradient(158deg,#faf5f8,#f3e4ec 52%,#e6ede0);}

/* 2 · wellness retreat — "Stillwater" full-bleed forest hero */
.pv--still{background:#1a2116;}
.pv--still .pv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.pv--still .pv-still-grad{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(26,33,22,.45) 0%,rgba(26,33,22,.05) 32%,rgba(26,33,22,.15) 60%,rgba(26,33,22,.78) 100%),
    linear-gradient(90deg,rgba(26,33,22,.5),transparent 55%);
}
.pv--still .pv-nav{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:3.4cqw 5cqw 0;
}
.pv--still .pv-links{
  display:flex;gap:2.6cqw;font-size:1.45cqw;letter-spacing:.12em;
  text-transform:uppercase;color:#f3efe4;opacity:.92;white-space:nowrap;
}
.pv--still .pv-pill{
  font-size:1.3cqw;letter-spacing:.13em;text-transform:uppercase;color:#f3efe4;white-space:nowrap;
  border:1px solid rgba(243,239,228,.4);border-radius:999px;padding:1.5cqw 2.8cqw;
  background:rgba(250,247,239,.14);
}
.pv--still .pv-still-body{
  position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:space-between;
  padding:5cqw 5cqw 4cqw;
}
.pv--still .pv-h{
  font-family:'Fraunces',serif;font-weight:420;color:#f3efe4;
  font-size:13cqw;line-height:1;text-transform:uppercase;letter-spacing:.02em;
  text-shadow:0 1cqw 5cqw rgba(0,0,0,.28);
}
.pv--still .pv-still-cta{display:flex;align-items:center;gap:2.4cqw;margin-top:2.6cqw;}
.pv--still .pv-btn{
  font-size:1.4cqw;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  background:#f3efe4;color:#222b1d;border-radius:999px;padding:1.7cqw 3.2cqw;
}
.pv--still .pv-link{
  font-size:1.5cqw;color:#f3efe4;letter-spacing:.03em;
  border-bottom:1px solid rgba(243,239,228,.6);padding-bottom:.5cqw;
}
.pv--still .pv-still-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2cqw;
  border-top:1px solid rgba(243,239,228,.22);padding-top:2.4cqw;
}
.pv--still .pv-eyebrow{
  font-size:1.25cqw;letter-spacing:.24em;text-transform:uppercase;color:#cdd0bd;
  font-weight:600;display:inline-flex;align-items:center;gap:1.1cqw;
}
.pv--still .pv-eyebrow::before{content:"";width:4cqw;height:1px;background:currentColor;display:inline-block;}
.pv--still .pv-meta{display:flex;gap:3cqw;font-size:1.2cqw;color:rgba(243,239,228,.82);letter-spacing:.02em;line-height:1.35;}
.pv--still .pv-meta b{display:block;font-family:'Fraunces',serif;font-size:2.5cqw;font-weight:380;color:#f3efe4;letter-spacing:0;}

/* 3 · hair & beauty bar — "The Vanity" full-bleed photo + arched copy hero */
.pv--salon{background:#d4d2cb;}
.pv--salon .pv-salon-card{
  position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden;
  background:#d4d2cb;
}
/* full-bleed grayscale salon photo, matching the live hero */
.pv--salon .pv-salon-card::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url("https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=1200&q=80");
  background-size:cover;background-position:center 20%;
  filter:grayscale(100%) contrast(1.05);
}
/* legibility wash over the photo */
.pv--salon .pv-salon-card::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 100% at 80% 6%, rgba(255,255,255,.35) 0%, transparent 55%),
    linear-gradient(155deg, rgba(239,236,228,.32) 0%, rgba(20,18,14,.22) 100%);
}
.pv--salon .pv-nav,
.pv--salon .pv-salon-grid{position:relative;z-index:1;}
/* nav: full rounded pill · leading links · centered logo · book pill */
.pv--salon .pv-nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.6cqw;
  margin:3cqw 3.4cqw 0;padding:1.3cqw 1.3cqw 1.3cqw 3cqw;
  border:1px solid rgba(20,18,14,.16);border-radius:999px;
  background:rgba(255,255,255,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.pv--salon .pv-links--lead{display:flex;gap:2.4cqw;font-size:1.45cqw;letter-spacing:.18em;
  text-transform:uppercase;opacity:.7;white-space:nowrap;}
.pv--salon .pv-logo{
  position:static;transform:none;text-align:center;
  font-family:'Fraunces',serif;font-weight:600;font-size:2.9cqw;letter-spacing:.01em;color:#14120e;
}
.pv--salon .pv-pill{
  justify-self:end;font-size:1.35cqw;letter-spacing:.16em;text-transform:uppercase;
  color:#14120e;white-space:nowrap;
  border:1px solid rgba(20,18,14,.5);border-radius:999px;padding:1.7cqw 3cqw;
}
/* grid: arched copy card left, photo shows through on the right */
.pv--salon .pv-salon-grid{
  flex:1;display:grid;grid-template-columns:1.05fr .95fr;
  align-items:stretch;gap:4cqw;padding:3.4cqw 4.4cqw 0;min-height:0;
}
/* arch: cream card with rounded top holding the copy, mirrors the live hero */
.pv--salon .pv-arch{
  align-self:stretch;border-radius:999px 999px 0 0;background-color:#e7e2d9;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:9cqw 4cqw 4cqw;
  box-shadow:0 4cqw 10cqw -6cqw rgba(0,0,0,.55);
}
.pv--salon .pv-h{
  font-family:'Fraunces',serif;font-weight:600;color:#14120e;
  font-size:6.6cqw;line-height:.98;letter-spacing:-.01em;
}
.pv--salon .pv-rule{
  height:1px;width:58%;background:#14120e;margin:4cqw auto 0;
  transform:scaleX(0);transform-origin:left center;
  animation:pv-draw 2.6s cubic-bezier(.55,0,.45,1) .4s infinite;
}
@keyframes pv-draw{
  0%{transform:scaleX(0);transform-origin:left center;}
  45%{transform:scaleX(1);transform-origin:left center;}
  55%{transform:scaleX(1);transform-origin:right center;}
  100%{transform:scaleX(0);transform-origin:right center;}
}
@media (prefers-reduced-motion:reduce){.pv--salon .pv-rule{animation:none;transform:scaleX(1);}}
.pv--salon .pv-sub{
  font-size:2.05cqw;line-height:1.55;color:#6b665e;max-width:24ch;
  opacity:1;margin:3.6cqw auto 0;
}
.pv--salon .pv-btn{
  align-self:center;margin-top:4.4cqw;font-size:1.6cqw;letter-spacing:.16em;
  text-transform:uppercase;color:#efece4;background:#14120e;border:1px solid #14120e;
  border-radius:999px;padding:2.4cqw 4.6cqw;
}

/* 5 · holistic practice */
.pv--practice{background:linear-gradient(165deg,#eef0e6,#e2e8d6);}
.pv--practice .pv-hero::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54cqw;height:54cqw;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);z-index:0;
}
.pv--practice .pv-hero>*{position:relative;z-index:1;}
.pv--practice .pv-script{color:var(--garden);}
.pv--practice .pv-btn{background:var(--garden);}

/* 5b · personal stylist — palette & type mirror the live hero (Jost, flat lavender) */
.pv--stylist{background:#ddd2f2;color:#221b33;font-family:'Jost',var(--sans);}
.pv--stylist .pv-logo{font-family:'Jost',var(--sans);font-weight:600;letter-spacing:.06em;color:#221b33;}
.pv--stylist .pv-logo .pv-dot{color:#6b4fa6;}
.pv--stylist .pv-links{color:#221b33;letter-spacing:.22em;opacity:.7;}
.pv--stylist .pv-col{gap:1.8cqw;}
.pv--stylist .pv-eyebrow{
  display:flex;align-items:center;gap:1.4cqw;
  font-size:1.55cqw;letter-spacing:.3em;text-transform:uppercase;color:#6b4fa6;
}
.pv--stylist .pv-eyebrow::before{content:"";width:4.5cqw;height:1px;background:#6b4fa6;display:inline-block;}
.pv--stylist .pv-h{font-family:'Jost',var(--sans);color:#42385c;font-weight:500;font-size:7.4cqw;line-height:.97;letter-spacing:-.018em;}
.pv--stylist .pv-h em{display:block;font-style:italic;font-weight:300;color:#6b4fa6;}
.pv--stylist .pv-btn{
  background:#221b33;color:#f4f0fa;border-radius:2px;margin-top:1.2cqw;
  font-family:'Jost',var(--sans);letter-spacing:.26em;
}
.pv--stylist .pv-panel{display:block;}
.pv--stylist .pv-cream{
  position:absolute;top:6%;right:5%;width:66%;height:76%;
  background:#f3ecdf;border:1px solid rgba(34,27,51,.08);
}
.pv--stylist .pv-photo{
  position:absolute;left:2%;bottom:6%;width:62%;height:74%;overflow:hidden;
  box-shadow:0 4cqw 8cqw -3cqw rgba(34,27,51,.5);
}
.pv--stylist .pv-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:grayscale(.35) contrast(1.03);}
.pv--stylist .pv-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(107,79,166,.28),transparent 60%);mix-blend-mode:multiply;
}
.pv--stylist .pv-scard{
  position:absolute;left:0;bottom:12%;width:47%;
  background:rgba(244,240,250,.78);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.6);border-radius:1.4cqw;
  padding:1.8cqw 2cqw;box-shadow:0 4cqw 7cqw -3cqw rgba(34,27,51,.45);
}
.pv--stylist .pv-sc-top{
  display:flex;align-items:center;gap:1.4cqw;
  padding-bottom:1.4cqw;margin-bottom:1.4cqw;border-bottom:1px solid rgba(34,27,51,.16);
}
.pv--stylist .pv-sc-avatar{width:5cqw;height:5cqw;border-radius:50%;object-fit:cover;flex-shrink:0;}
.pv--stylist .pv-name{font-family:'Jost',var(--sans);font-weight:600;font-size:1.9cqw;color:#221b33;letter-spacing:0;}
.pv--stylist .pv-role{font-size:1.25cqw;letter-spacing:.18em;text-transform:uppercase;color:#6b4fa6;margin-top:.4cqw;}
.pv--stylist .pv-stars{display:flex;gap:.3cqw;color:#6b4fa6;font-size:2cqw;line-height:1;letter-spacing:.1em;}
.pv--stylist .pv-quote{font-size:1.7cqw;line-height:1.45;font-style:italic;color:#4b4065;margin-top:1cqw;}
.pv--stylist .pv-sc-foot{
  display:flex;align-items:center;gap:1.2cqw;margin-top:1.6cqw;
  font-size:1.25cqw;letter-spacing:.18em;text-transform:uppercase;color:#221b33;font-weight:500;
}
.pv--stylist .pv-dot2{width:1.4cqw;height:1.4cqw;border-radius:50%;background:#4caf6e;box-shadow:0 0 0 .7cqw rgba(76,175,110,.18);}

/* 6 · lash & brow studio */
.pv--lashes{background:linear-gradient(158deg,#ffdcf0,#f7e2ea 58%,#f6efe8);}
.pv--lashes .pv-script{color:var(--pink);}
.pv--lashes .pv-btn{background:var(--pink);}

/* 1 · Lash'd by Laneah — real site with live video hero
   Warm gold/cream brand palette: cream #F2EAD8, gold #B89968, dark #1F1612 */
.pv--laneah{background:#1F1612;}
.pv--laneah .pv-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.pv--laneah .pv-video-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(31,22,18,.5),rgba(31,22,18,.75));
}
.pv--laneah .pv-nav,
.pv--laneah .pv-hero{position:relative;z-index:2;}
.pv--laneah .pv-logo{font-family:'Fraunces',serif;font-weight:500;font-style:italic;color:#F2EAD8;}
.pv--laneah .pv-links{font-family:'Inter',sans-serif;color:#F2EAD8;opacity:.88;}
.pv--laneah .pv-h{
  font-family:'Fraunces',serif;font-weight:300;letter-spacing:-.02em;color:#F2EAD8;
  font-size:10cqw;line-height:.9;text-shadow:0 2cqw 6cqw rgba(0,0,0,.35);
}
.pv--laneah .pv-h em{font-style:italic;font-weight:400;color:#B89968;}
.pv--laneah .pv-dot{color:#B89968;}
.pv--laneah .pv-btn{
  font-family:'Inter',sans-serif;margin-top:3.2cqw;background:#B89968;border:none;color:#1F1612;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:160px var(--gutter) 110px;position:relative;overflow:hidden;
  background:
    radial-gradient(100% 90% at 50% 0%,var(--light-magenta),transparent 55%),
    linear-gradient(170deg,var(--off-white),var(--cream));
}
.contact-panel{
  position:relative;z-index:2;max-width:680px;background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:clamp(40px,6vw,72px);
  border:1px solid rgba(209,152,162,.3);
  /* scalloped feel via large radius + mask shadow */
  border-radius:40px;box-shadow:var(--shadow-lift);
}
.contact-panel .script-tag{font-family:var(--script);font-size:34px;color:var(--rose);}
.contact-panel h1{font-size:clamp(40px,7vw,72px);margin:4px 0 18px;}
.contact-panel .lead{margin:0 auto 40px;max-width:46ch;}
.contact-actions{display:flex;flex-direction:column;gap:18px;align-items:center;}

/* ---- contact form ---- */
.contact-form{width:100%;max-width:520px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:26px;}
.contact-form .field{position:relative;}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;box-sizing:border-box;
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rose);
  padding:10px 2px;border-radius:0;outline:none;
  -webkit-appearance:none;appearance:none;
  transition:border-color .35s var(--ease);
}
.contact-form textarea{resize:vertical;min-height:120px;line-height:1.55;}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:var(--gray);opacity:1;}
.contact-form select{color:var(--gray);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d198a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;padding-right:28px;
}
.contact-form select.has-value{color:var(--ink);}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{border-bottom-color:var(--pink);}
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible{box-shadow:0 1px 0 0 var(--pink);}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}
.cf-submit{align-self:flex-start;font-size:15px;padding:18px 40px;margin-top:6px;border:0;cursor:pointer;}
.cf-submit[disabled]{opacity:.6;cursor:default;transform:none;}
.cf-status{margin:0;font-size:14px;font-family:var(--sans);color:var(--ink-soft);min-height:1em;}
.cf-status.error{color:var(--terracotta);}
.cf-status.success{color:var(--garden);}

.socials{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px;}
.social{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);
  padding:12px 24px;border:1px solid var(--rose);border-radius:40px;
  transition:background .35s var(--ease),transform .35s var(--ease),color .35s var(--ease);
}
.social:hover{background:var(--light-magenta);color:var(--pink);transform:translateY(-3px);}
.contact-panel .sig{font-family:var(--script);font-size:30px;color:var(--rose);margin-top:38px;}
.contact .petal{position:absolute;border-radius:50%;opacity:.5;filter:blur(1px);}
.contact .petal.a{width:260px;height:260px;left:-70px;top:14%;background:radial-gradient(circle at 30% 30%,var(--blush),transparent 70%);}
.contact .petal.b{width:300px;height:300px;right:-90px;bottom:6%;background:radial-gradient(circle at 60% 40%,var(--eucalyptus),transparent 70%);}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--light-magenta);text-align:center;padding:70px var(--gutter) 56px;
}
.footer .wordmark{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,42px);color:var(--pink);letter-spacing:.01em;}
.footer .tag{font-family:var(--serif);font-style:italic;color:var(--terracotta);font-size:18px;margin-top:4px;text-align:center;margin-inline:auto;}
.footer-links{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin:26px 0 22px;
  list-style:none;}
.footer-links a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);transition:color .3s var(--ease);}
.footer-links a:hover{color:var(--pink);}
.footer .fine{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);text-align:center;margin-inline:auto;}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.1s;}
.reveal.d2{transition-delay:.2s;}
.reveal.d3{transition-delay:.3s;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .scroll-cue span{animation:none;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:30px;}
  .about-photo{max-width:420px;margin-inline:auto;}
  .about-text{text-align:center;}
  .about-text .eyebrow{margin-bottom:18px;}
  .about-text p{margin-inline:auto;}
  .card-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto;}
  .steps{grid-template-columns:1fr;gap:44px;}
  .step:not(:last-child)::after{content:'❧';right:auto;left:50%;top:auto;bottom:-30px;transform:translateX(-50%);}
}
@media(max-width:760px){
  .nav-toggle{display:flex;}
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:min(78vw,320px);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:30px;
    background:var(--off-white);padding:60px 44px;
    transform:translateX(100%);transition:transform .5s var(--ease);
    box-shadow:-30px 0 80px -40px rgba(0,0,0,.4);
  }
  .nav.open .nav-links{transform:translateX(0);}
  .nav-links a{font-size:16px;padding-block:10px;}      /* ~44px tap target */
  .nav-links .btn{padding:15px 28px;}
  .nav-brand .name{font-size:18px;}
  .work-grid{grid-template-columns:1fr;}
  .footer-links{gap:14px 24px;}
  .footer-links a{padding:10px 4px;}                    /* easier to tap */
  .social{padding:14px 24px;}
}
@media(max-width:480px){
  .hero-cta{flex-direction:column;width:100%;}
  .hero-cta .btn{justify-content:center;width:100%;}
  .cf-submit{align-self:stretch;text-align:center;width:100%;}
  .contact-form{gap:24px;}
}