/* ── Brows For Life · design v2 ───────────────────────────────────────────
   Two skins share this file. A skin only redefines the tokens at the top;
   everything below is written against those tokens, so the same markup
   renders as "full pink" or "balanced" with nothing else changed.        */

*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
section{padding:clamp(4rem,8vw,7rem) 0}

/* Display type. The reference leans on a high-contrast serif for the name
   and a script for the little asides; both come from Google Fonts. */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;
         letter-spacing:.01em;text-wrap:balance;margin:0}
.script{font-family:var(--script);font-weight:400;line-height:1.3}

.kicker{font-family:var(--sans);font-size:.68rem;font-weight:500;
        letter-spacing:.32em;text-transform:uppercase;color:var(--accent-ink)}

/* ── header ─────────────────────────────────────────────────────────── */
header{background:var(--header-bg);border-bottom:1px solid var(--hairline);
       position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;gap:2rem;height:84px}
.nav-left,.nav-right{display:flex;gap:1.9rem;flex:1}
.nav-right{justify-content:flex-end;align-items:center}
.nav a{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
       text-decoration:none;color:var(--ink);opacity:.82;transition:opacity .2s,color .2s}
.nav a:hover{opacity:1;color:var(--accent-ink)}
.brand{font-family:var(--display);font-size:1.5rem;letter-spacing:.06em;
       text-align:center;line-height:1;white-space:nowrap}
.brand small{display:block;font-family:var(--sans);font-size:.56rem;
             letter-spacing:.42em;margin-top:.42rem;opacity:.7}

.btn{display:inline-block;border:0;cursor:pointer;text-decoration:none;
     font-family:var(--sans);font-size:.72rem;font-weight:600;
     letter-spacing:.18em;text-transform:uppercase;
     padding:.95rem 1.9rem;border-radius:999px;
     background:var(--btn);color:#fff;transition:transform .25s,box-shadow .25s,filter .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--btn-glow);filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink-line)}
.btn-ghost:hover{background:var(--ink);color:var(--page);box-shadow:none}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{background:var(--hero-bg);position:relative;overflow:hidden;padding:0}
.hero .wrap{max-width:none;padding:0}
.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;align-items:center;
           gap:clamp(2rem,5vw,4rem);min-height:clamp(560px,66vh,680px)}
/* Copy keeps the page gutter; the photo runs off the right edge. */
.hero-copy{padding-left:max(32px,calc((100vw - 1180px)/2))}
.hero-copy{padding-top:4rem;padding-bottom:4rem;padding-right:1rem}
.hero-copy h1{font-size:clamp(3.2rem,7vw,5.6rem);letter-spacing:.02em}
.hero-copy h1 .l2{display:block;font-size:.52em;letter-spacing:.3em;
                  margin-top:.5rem;opacity:.92}
.hero-tag{margin:1.6rem 0 0;font-size:.74rem;letter-spacing:.26em;
          text-transform:uppercase;color:var(--accent-ink)}
.hero-copy .lede{margin:1.3rem 0 2.2rem;font-size:1.04rem;max-width:23em;color:var(--body)}
.hero-loc{margin-top:2rem;font-size:.7rem;letter-spacing:.24em;
          text-transform:uppercase;color:var(--muted)}
.hero-media{position:relative;height:100%;min-height:420px;align-self:stretch}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-note{position:absolute;right:clamp(1rem,4vw,3rem);bottom:clamp(2rem,7vw,4.5rem);
           font-family:var(--script);font-size:clamp(1.3rem,2.3vw,1.9rem);
           color:var(--accent-ink);text-align:center;line-height:1.35;
           text-shadow:0 2px 14px rgba(255,255,255,.75)}

/* ── trust strip ────────────────────────────────────────────────────── */
.strip{background:var(--strip-bg);border-top:1px solid var(--hairline);
       border-bottom:1px solid var(--hairline);padding:2.2rem 0}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.strip-item{display:flex;flex-direction:column;align-items:center;gap:.7rem;
            position:relative}
.strip-item + .strip-item::before{content:"";position:absolute;left:0;top:10%;
            height:80%;width:1px;background:var(--hairline)}
.strip-item svg{width:26px;height:26px;stroke:var(--accent-ink);fill:none;stroke-width:1.2}
.strip-item span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
                 color:var(--body);line-height:1.5}

/* ── services ───────────────────────────────────────────────────────── */
.section-head{text-align:center;margin-bottom:clamp(2.5rem,5vw,3.8rem)}
.section-head h2{font-size:clamp(2rem,4vw,3rem);margin-top:.9rem}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.svc{background:var(--card);border:1px solid var(--hairline);border-radius:4px;
     overflow:hidden;transition:transform .3s,box-shadow .3s}
.svc:hover{transform:translateY(-4px);box-shadow:0 18px 44px var(--shadow)}
.svc figure{margin:0;aspect-ratio:4/3;background:var(--ph);overflow:hidden}
.svc figure img{width:100%;height:100%;object-fit:cover}
.svc-body{padding:1.8rem 1.7rem 2rem;text-align:center}
.svc h3{font-size:1.28rem;letter-spacing:.06em}
.svc .price{font-family:var(--display);font-size:1.7rem;color:var(--accent-ink);margin:.5rem 0 .8rem}
.svc p{font-size:.93rem;color:var(--body);margin:0 0 1.3rem;line-height:1.62}
.svc .more{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
           text-decoration:none;color:var(--accent-ink);border-bottom:1px solid currentColor;
           padding-bottom:3px}

/* ── story ──────────────────────────────────────────────────────────── */
.story{background:var(--story-bg)}
.story-grid{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;
            gap:clamp(2.5rem,6vw,5rem)}
.story-media{aspect-ratio:4/3;background:var(--ph);overflow:hidden;position:relative}
.story-media img{width:100%;height:100%;object-fit:cover}
.story h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:.9rem 0 1.2rem}
.story p{color:var(--body);margin:0 0 1.8rem;max-width:32em}
.story-note{font-family:var(--script);font-size:1.5rem;color:var(--accent-ink);
            margin-top:1.8rem}

/* ── results ────────────────────────────────────────────────────────── */
.results{background:var(--results-bg)}
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.ba{background:var(--card);border:1px solid var(--hairline);padding:12px}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ba-pair figure{margin:0;aspect-ratio:1/1;background:var(--ph);overflow:hidden;position:relative}
.ba-pair figure img{width:100%;height:100%;object-fit:cover}
.ba-pair figcaption{position:absolute;left:0;right:0;bottom:0;text-align:center;
     padding:.45rem;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
     background:var(--label-bg);color:var(--label-ink)}
.results-cta{text-align:center;margin-top:2.6rem}

/* ── reviews ────────────────────────────────────────────────────────── */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.rev{background:var(--card);border:1px solid var(--hairline);padding:2rem 1.8rem;margin:0}
.rev .hearts{color:var(--accent-ink);font-size:.78rem;letter-spacing:.3em;margin-bottom:1rem}
.rev blockquote{margin:0 0 1.3rem;font-size:.97rem;line-height:1.65;color:var(--ink)}
.rev figcaption b{display:block;font-size:.9rem}
.rev figcaption span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ── closing band ───────────────────────────────────────────────────── */
.cta{background:var(--cta-bg);color:var(--cta-ink);text-align:center}
.cta h2{font-size:clamp(2rem,4.4vw,3.2rem);color:var(--cta-ink)}
.cta p{margin:1.2rem auto 2.2rem;max-width:34em;color:var(--cta-body)}
.cta .btn{background:var(--cta-btn);color:var(--cta-btn-ink)}

footer{background:var(--footer-bg);color:var(--footer-ink);padding:3.5rem 0;
       font-size:.85rem;text-align:center}
footer a{color:inherit}

/* ── placeholder art, so the mock reads without any image files ─────── */
.ph{display:flex;align-items:center;justify-content:center;height:100%;
    background:repeating-linear-gradient(45deg,var(--ph),var(--ph) 12px,var(--ph2) 12px,var(--ph2) 24px);
    color:var(--muted);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:1rem}

@media (max-width:900px){
  .hero-grid,.story-grid{grid-template-columns:1fr}
  .hero .wrap{padding:0}
  .hero-media{min-height:320px;order:-1}
  .hero-copy{padding:2.6rem 32px 3rem}
  .svc-grid,.ba-grid,.rev-grid{grid-template-columns:1fr}
  .strip-grid{grid-template-columns:repeat(2,1fr);gap:1.8rem}
  .strip-item:nth-child(3)::before{display:none}
  .nav-left,.nav-right{display:none}
  .nav{justify-content:center}
}

/* ══ BLING LAYER ═══════════════════════════════════════════════════════
   Marble, neon, glitter and glass. All of it is CSS so the mock-up needs
   no image files; the real build can swap the marble for a photo.      */

/* ── marble ─────────────────────────────────────────────────────────── */
.marble{position:relative;isolation:isolate}
.marble::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* veins */
    linear-gradient(118deg, transparent 38%, rgba(255,255,255,.85) 39%, rgba(255,255,255,.2) 40.4%, transparent 41%),
    linear-gradient(104deg, transparent 61%, rgba(255,255,255,.6) 62%, transparent 63.2%),
    linear-gradient(142deg, transparent 22%, rgba(214,160,185,.35) 23%, transparent 24.4%),
    linear-gradient(97deg,  transparent 74%, rgba(214,160,185,.28) 75%, transparent 76.6%),
    /* soft cloudiness */
    radial-gradient(60% 45% at 22% 28%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(50% 40% at 78% 70%, rgba(255,255,255,.6), transparent 72%),
    radial-gradient(45% 38% at 62% 18%, rgba(244,214,228,.7), transparent 70%),
    var(--marble-base);
}

/* ── neon sign ──────────────────────────────────────────────────────── */
.neon{
  font-family:var(--script);font-size:clamp(1.9rem,3.4vw,3.1rem);
  line-height:1.25;text-align:center;color:#FFFFFF;
  text-shadow:
    0 0 2px #fff,
    0 0 6px #FFD9E8,
    0 0 14px var(--neon),
    0 0 26px var(--neon),
    0 0 46px var(--neon),
    0 0 86px var(--neon-far);
  animation:flicker 5.5s infinite;
}
@keyframes flicker{
  0%,96%,100%{opacity:1}
  97%{opacity:.62}
  98%{opacity:1}
  98.6%{opacity:.7}
}
@media (prefers-reduced-motion:reduce){ .neon{animation:none} }

/* ── glitter dust ───────────────────────────────────────────────────── */
.glitter{position:relative}
.glitter::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 27% 62%, #fff 50%, transparent 52%),
    radial-gradient(2.2px 2.2px at 41% 24%, #FFF0F6 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 56% 78%, #fff 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 68% 34%, #FFE9F2 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 81% 66%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px   at 91% 22%, #fff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 34% 88%, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 74% 90%, #FFF0F6 50%, transparent 52%);
  animation:twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{opacity:.45} to{opacity:1} }
@media (prefers-reduced-motion:reduce){ .glitter::after{animation:none;opacity:.7} }

/* A four-point sparkle, the shape the reference uses beside the logo. */
.spark{display:inline-block;width:1em;height:1em;vertical-align:-.08em;
  background:currentColor;
  -webkit-mask:radial-gradient(circle at 0 0,transparent 70%,#000 71%) 0 0/50% 50% no-repeat,
          radial-gradient(circle at 100% 0,transparent 70%,#000 71%) 100% 0/50% 50% no-repeat,
          radial-gradient(circle at 0 100%,transparent 70%,#000 71%) 0 100%/50% 50% no-repeat,
          radial-gradient(circle at 100% 100%,transparent 70%,#000 71%) 100% 100%/50% 50% no-repeat;
          mask:radial-gradient(circle at 0 0,transparent 70%,#000 71%) 0 0/50% 50% no-repeat,
          radial-gradient(circle at 100% 0,transparent 70%,#000 71%) 100% 0/50% 50% no-repeat,
          radial-gradient(circle at 0 100%,transparent 70%,#000 71%) 0 100%/50% 50% no-repeat,
          radial-gradient(circle at 100% 100%,transparent 70%,#000 71%) 100% 100%/50% 50% no-repeat;
}
.brand .spark{width:.5em;height:.5em;vertical-align:.5em;color:var(--accent-ink)}

/* ── frosted glass card ─────────────────────────────────────────────── */
.glass{
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
          backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 16px 46px rgba(170,110,140,.16), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── rose-gold rule and foil text ───────────────────────────────────── */
.foil{
  background:linear-gradient(100deg,#B76E82 0%,#E8A9BE 22%,#FFF1F5 38%,#D98FA8 54%,#B05C79 72%,#EBB3C5 90%,#B76E82 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 9s linear infinite;
}
@keyframes sheen{ to{background-position:220% 0} }
@media (prefers-reduced-motion:reduce){ .foil{animation:none} }

.rule{height:1px;border:0;margin:0 auto;width:min(160px,40%);
  background:linear-gradient(90deg,transparent,var(--accent-ink),transparent);opacity:.65}

/* ── section polish that uses the above ─────────────────────────────── */
.svc{border-radius:14px}
.svc figure{position:relative}
.svc figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(255,255,255,.35));pointer-events:none}
.ba{border-radius:14px}
.rev{border-radius:14px}

.strip-item svg{filter:drop-shadow(0 0 6px var(--neon-soft))}

/* the closing band gets the neon treatment */
.cta{position:relative;overflow:hidden}
.cta h2.neon{color:#FFF3F8}


/* A neon sign needs a wall. These give the glowing text a dark ground so the
   light has something to sit on; on a pale page the glow is invisible. */
.hero-media{background:var(--wall)}
.hero-note.neon{
  right:auto;left:50%;transform:translateX(-50%);
  width:min(88%,420px);padding:1.6rem 1.4rem;border-radius:16px;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.cta{background:var(--wall-deep)}
.cta h2.neon{font-family:var(--script);font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.2}
.cta p{color:rgba(255,255,255,.82)}
.cta .btn{background:#fff;color:#A8446B}
/* A translucent panel on a pale ground just looks muddy, so this one gets a
   solid wall like a framed neon sign hanging in the studio. */
.story-note.neon{
  display:inline-block;margin-top:2rem;padding:1.5rem 2rem;border-radius:16px;
  background:var(--wall-deep);font-size:clamp(1.4rem,2.4vw,1.9rem);
  box-shadow:0 14px 40px rgba(90,39,64,.28), 0 0 44px var(--neon-soft);
}
/* keep the button and the sign from colliding */
.story .btn-ghost{vertical-align:middle}

.hero-media .ph{background:none;color:rgba(255,240,246,.5)}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 40%, rgba(255,200,222,.18), transparent 70%)}

/* ══ BLING LAYER 2 ═════════════════════════════════════════════════════
   The reference leans on big four-point starbursts, a diamond panel and a
   painted brush stroke. All drawn here so the mock reads before photos.  */

/* ── big starbursts ─────────────────────────────────────────────────── */
.star{position:absolute;pointer-events:none;z-index:3;
  width:var(--s,90px);height:var(--s,90px);opacity:var(--o,.9);
  background:
    linear-gradient(to right, transparent 47.5%, #fff 49.4%, #fff 50.6%, transparent 52.5%),
    linear-gradient(to bottom, transparent 47.5%, #fff 49.4%, #fff 50.6%, transparent 52.5%),
    radial-gradient(closest-side, rgba(255,255,255,.9) 0 6%, transparent 30%);
  -webkit-mask:radial-gradient(closest-side, #000 0 12%, rgba(0,0,0,.75) 30%, transparent 82%);
          mask:radial-gradient(closest-side, #000 0 12%, rgba(0,0,0,.75) 30%, transparent 82%);
  filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px var(--neon))
         drop-shadow(0 0 30px var(--neon-far));
  animation:pulse 3.4s ease-in-out infinite alternate;
}
.star::after{content:"";position:absolute;inset:34%;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.85) 32%,transparent 70%)}
@keyframes pulse{from{transform:scale(.88);opacity:calc(var(--o,.9) * .6)}
                 to  {transform:scale(1.06);opacity:var(--o,.9)}}
@media (prefers-reduced-motion:reduce){.star{animation:none}}

/* ── diamond ────────────────────────────────────────────────────────── */
.diamond{position:absolute;pointer-events:none;width:var(--d,150px);aspect-ratio:1/.86;
  opacity:.9;
  clip-path:polygon(50% 100%, 0% 32%, 20% 0%, 80% 0%, 100% 32%);
  background:
    linear-gradient(112deg, rgba(255,255,255,.95) 0 18%, rgba(244,206,222,.55) 18% 34%,
      rgba(255,255,255,.9) 34% 46%, rgba(226,166,193,.5) 46% 60%,
      rgba(255,255,255,.95) 60% 72%, rgba(238,190,211,.6) 72% 86%, rgba(255,255,255,.85) 86%);
  filter:drop-shadow(0 8px 26px rgba(180,110,145,.35)) drop-shadow(0 0 20px rgba(255,255,255,.7));
}
.diamond::before{content:"";position:absolute;inset:0;
  clip-path:polygon(50% 100%, 0% 32%, 20% 0%, 80% 0%, 100% 32%);
  background:
    linear-gradient(to right, transparent 49.6%, rgba(255,255,255,.75) 50%, transparent 50.4%),
    linear-gradient(68deg,  transparent 49.6%, rgba(255,255,255,.55) 50%, transparent 50.4%),
    linear-gradient(-68deg, transparent 49.6%, rgba(255,255,255,.55) 50%, transparent 50.4%),
    linear-gradient(to bottom, rgba(255,255,255,.6) 0 32%, transparent 32.4%)}

/* ── painted brush stroke ───────────────────────────────────────────── */
.brush{position:absolute;pointer-events:none;width:var(--w,320px);height:var(--h,120px);
  opacity:.42;
  background:
    radial-gradient(70% 52% at 30% 50%, rgba(216,150,178,.95), transparent 72%),
    radial-gradient(55% 44% at 62% 44%, rgba(232,176,199,.9), transparent 70%),
    radial-gradient(42% 60% at 84% 58%, rgba(206,134,166,.85), transparent 74%);
  filter:blur(.4px);
  -webkit-mask:radial-gradient(75% 46% at 50% 50%, #000 58%, transparent 76%);
          mask:radial-gradient(75% 46% at 50% 50%, #000 58%, transparent 76%);
  transform:rotate(-6deg)}

/* ── the fourth services tile, a pink "bling" card ──────────────────── */
.svc-grid{grid-template-columns:repeat(3,1fr) .82fr}
.svc-bling{position:relative;border-radius:14px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#F7D9E6,#EFBBD3 55%,#F9E3EC);
  display:flex;align-items:center;justify-content:center;padding:2rem 1.4rem;
  box-shadow:0 18px 44px rgba(170,110,140,.18)}
.svc-bling .neon{font-size:clamp(1.5rem,2.2vw,2.05rem);position:relative;z-index:4;
  background:none;padding:0;text-align:center}
@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .svc-grid{grid-template-columns:1fr}
}

/* ── studio photo gets its own neon on the wall ─────────────────────── */
.story-media{border-radius:14px}
.story-media .neon-wall{position:absolute;left:7%;top:12%;z-index:3;
  font-family:var(--script);font-size:clamp(1.15rem,2vw,1.7rem);line-height:1.5;
  text-shadow:0 0 2px #fff,0 0 6px #FFD9E8,0 0 14px var(--neon),0 0 30px var(--neon),0 0 56px var(--neon-far);
  color:#fff}

/* ── section rhythm: give the marble bands a soft edge ──────────────── */
/* Only the pale marble bands fade out; the hero has a dark photo wall on one
   side and a fade there just reads as a grey smear. */
.marble:not(.hero)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
  pointer-events:none;background:linear-gradient(transparent,var(--page))}

/* ── a livelier neon for the closing sign ───────────────────────────────
   The subtle flicker above suits a sign you read once. The closing band is
   the last thing on the page, so it gets a proper buzzing tube: the glow
   breathes, and now and then a letter stutters the way real neon does.   */
.neon-live{animation:buzz 2.6s ease-in-out infinite alternate, flicker 7s infinite}
@keyframes buzz{
  from{text-shadow:0 0 2px #fff,0 0 5px #FFD9E8,0 0 11px var(--neon),
                   0 0 20px var(--neon),0 0 34px var(--neon-far)}
  to  {text-shadow:0 0 3px #fff,0 0 9px #FFE4EE,0 0 20px var(--neon),
                   0 0 38px var(--neon),0 0 72px var(--neon),0 0 120px var(--neon-far)}
}
@media (prefers-reduced-motion:reduce){ .neon-live{animation:none} }

/* the sign's own halo on the wall behind it */
.neon-halo{position:relative}
.neon-halo::before{content:"";position:absolute;left:50%;top:50%;
  width:min(720px,86%);aspect-ratio:2/1;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, var(--neon-soft), transparent 70%);
  filter:blur(26px);pointer-events:none;animation:halo 2.6s ease-in-out infinite alternate}
@keyframes halo{from{opacity:.5}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .neon-halo::before{animation:none} }

/* ── real logo in the header ────────────────────────────────────────── */
.brand img{height:62px;width:auto;display:block;margin:0 auto}
.brand.has-logo{font-size:0;line-height:0;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto}
.brand.has-logo a{display:block;line-height:0}
.nav{height:104px}
@media (max-width:900px){ .brand img{height:46px} .nav{height:78px} }


/* ── real hero photo ────────────────────────────────────────────────────
   The 16:9 render is much wider than this column, so object-position keeps
   the face in frame instead of centring on the empty text side.          */
.hero-media img{object-position:72% 42%}
.hero-media.has-photo{background:none}
.hero-media.has-photo::after{
  background:linear-gradient(90deg,var(--hero-bg-fade) 0%,transparent 42%),
             radial-gradient(60% 50% at 70% 62%, rgba(232,97,155,.22), transparent 70%);
}
/* the neon sign sits lower over a photo so it clears the face */
.hero-media.has-photo .hero-note{bottom:clamp(1.4rem,4vw,2.6rem)}


/* ── hero video ─────────────────────────────────────────────────────────
   The clip is warm and white-backed while the page is pink, so it gets a
   pink wash on top and a soft fade into the copy side rather than a hard
   vertical edge.                                                        */
.hero-media video{width:100%;height:100%;object-fit:cover;object-position:62% 38%;display:block}
.hero-media.has-photo{overflow:hidden}
.hero-media.has-photo::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--hero-tint);mix-blend-mode:multiply;opacity:.55}
.hero-media.has-photo::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,var(--hero-bg-fade) 0%,rgba(255,255,255,0) 34%),
             radial-gradient(70% 60% at 68% 56%, rgba(255,150,195,.16), transparent 72%)}
.hero-media.has-photo .hero-note{z-index:5}

.hero-media.has-photo video{object-position:60% 30%}
.hero-media.has-photo .hero-note{
  left:50%;bottom:1.4rem;width:min(78%,360px);
  font-size:clamp(1.05rem,1.7vw,1.5rem);padding:.9rem 1rem;
  background:rgba(255,255,255,.14)}

/* ══ REFINEMENT ════════════════════════════════════════════════════════
   What reads as "expensive" is mostly restraint: more air, quieter rules,
   slower motion, and type that is set rather than just sized.           */

/* ── air ────────────────────────────────────────────────────────────── */
section{padding:clamp(5rem,10vw,9rem) 0}
.section-head{margin-bottom:clamp(3rem,6vw,4.6rem)}
.wrap{max-width:1240px;padding:0 40px}
@media (max-width:700px){ .wrap{padding:0 26px} }

/* ── type ───────────────────────────────────────────────────────────── */
.section-head .kicker{display:block;margin-bottom:1.1rem}
.section-head h2{letter-spacing:.015em;line-height:1.12}
.svc h3{letter-spacing:.055em;font-size:1.22rem;line-height:1.35}
.svc .price{font-size:1.55rem;letter-spacing:.02em;margin:.7rem 0 1rem;
            font-weight:300}
.svc p{font-size:.9rem;line-height:1.72;color:var(--body)}
.svc .more{font-size:.63rem;letter-spacing:.24em}
.story p{font-size:1.02rem;line-height:1.78}
.rev blockquote{font-size:1rem;line-height:1.75;font-weight:300}
.hero-copy .lede{line-height:1.7;font-weight:300;font-size:1.06rem}

/* Small caps labels sit better with a hair more tracking and less weight. */
.kicker{font-weight:400;letter-spacing:.34em}
.strip-item span{letter-spacing:.22em;font-weight:400;font-size:.63rem}

/* ── cards: thinner edges, deeper hover ─────────────────────────────── */
.svc,.ba,.rev{border-radius:2px}
.svc{border:1px solid rgba(255,255,255,.7);box-shadow:0 2px 18px rgba(170,110,140,.07)}
.svc:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(170,110,140,.16)}
.svc figure{aspect-ratio:4/3}
.svc-body{padding:2.1rem 1.9rem 2.3rem}
.ba{padding:10px;border:1px solid rgba(255,255,255,.7)}
.ba-pair{gap:6px}
.rev{padding:2.4rem 2.1rem;border:1px solid rgba(255,255,255,.7)}

/* photographs get a whisper of warmth pulled out, so they sit in the pink */
.svc figure img,.ba-pair figure img,.story-media img{
  filter:saturate(.94) contrast(1.02);
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1), filter .5s ease}
.svc:hover figure img{transform:scale(1.04);filter:saturate(1) contrast(1.03)}

/* ── the before/after labels, quieter ───────────────────────────────── */
.ba-pair figcaption{font-size:.55rem;letter-spacing:.28em;padding:.55rem;
  background:linear-gradient(transparent,rgba(255,255,255,.92) 45%);
  color:var(--muted);font-weight:500}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn{padding:1.05rem 2.3rem;font-size:.68rem;letter-spacing:.24em;font-weight:500}
.btn-ghost{border-color:rgba(0,0,0,.14)}

/* ── the strip: lighter dividers ────────────────────────────────────── */
.strip{padding:2.8rem 0}
.strip-item + .strip-item::before{background:var(--hairline);opacity:.7}
.strip-item svg{stroke-width:1;opacity:.85}

/* ── story: let the photo breathe, and align the note ───────────────── */
.story-grid{gap:clamp(3rem,7vw,6rem)}
.story-media{aspect-ratio:4/5;border-radius:2px}
.story h2{margin:1.1rem 0 1.5rem}
.story .btn-ghost{margin-top:.4rem}

/* ── footer ─────────────────────────────────────────────────────────── */
footer{padding:4.5rem 0 3.5rem;font-size:.8rem;letter-spacing:.04em}
footer p:first-child{letter-spacing:.14em;text-transform:uppercase;font-size:.7rem}

/* ── motion, slowed down ────────────────────────────────────────────── */
@keyframes twinkle{ from{opacity:.3} to{opacity:.85} }
.glitter::after{animation-duration:6s}
.star{animation-duration:5s}


/* The figure sets the aspect ratio; the image has to fill it or the figure's
   own background shows through underneath. */
.svc figure img,.ba-pair figure img,.story-media img{
  width:100%;height:100%;object-fit:cover;display:block}
.svc figure{background:var(--ph)}
/* the gloss overlay was reading as a grey band over a photo, so drop it */
.svc figure::after{display:none}


/* ── neon over a bright photo ───────────────────────────────────────────
   The studio shot is lit, so a glow alone vanishes against it. A soft dark
   vignette in that corner gives the sign something to burn against, the way
   a real sign is read against a shaded wall. */
.story-media{position:relative}
.story-media::before{content:"";position:absolute;left:0;top:0;width:62%;height:42%;
  z-index:2;pointer-events:none;
  background:radial-gradient(120% 120% at 0 0, rgba(70,28,48,.5), transparent 72%)}
.story-media .neon-wall{z-index:3;left:8%;top:9%}

/* The framed sign was shouting. A pale panel with the glow doing the work
   reads as neon on a wall rather than a sticker. */
.story-note.neon{
  background:linear-gradient(150deg,#FBDCE9,#F6C4DA);
  color:#fff;padding:1.4rem 1.9rem;
  box-shadow:0 10px 30px rgba(190,120,155,.2), inset 0 0 28px rgba(255,255,255,.5);
  text-shadow:0 0 2px #fff,0 0 8px #FF9FC8,0 0 18px var(--neon),0 0 34px var(--neon-far)}

/* let the button and sign share a line cleanly */
.story-grid > div > .btn-ghost{margin-right:1rem}


/* ══ HERO REVEAL ═══════════════════════════════════════════════════════
   At rest the video column is a narrow strip showing the right half of her
   face. On hover it widens and the clip plays, so the reveal is the reward
   for reaching for it. The grid columns animate, which means the copy side
   gains room rather than being covered.                                  */
.hero-grid{transition:grid-template-columns .85s cubic-bezier(.22,.7,.25,1)}
.hero-grid{grid-template-columns:1fr .62fr}
.hero-grid:hover,.hero-grid:focus-within{grid-template-columns:1fr 1.15fr}

.hero-media.has-photo video{
  object-position:38% 30%;
  transition:object-position .85s cubic-bezier(.22,.7,.25,1),
             transform .85s cubic-bezier(.22,.7,.25,1),
             filter .6s ease;
  transform:scale(1.06);filter:saturate(.9)}
.hero-grid:hover .hero-media.has-photo video,
.hero-grid:focus-within .hero-media.has-photo video{
  object-position:60% 30%;transform:scale(1);filter:saturate(1)}

/* a hint that it opens */
.hero-reveal{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);
  z-index:6;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.9);box-shadow:0 6px 22px rgba(170,110,140,.3);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .45s ease, transform .45s ease;pointer-events:none}
.hero-reveal::after{content:"";width:0;height:0;margin-left:3px;
  border-left:11px solid var(--accent-ink);
  border-top:7px solid transparent;border-bottom:7px solid transparent}
.hero-grid:hover .hero-reveal,.hero-grid:focus-within .hero-reveal{
  opacity:0;transform:translate(-50%,-50%) scale(.8)}

/* the neon caption only appears once it is open */
.hero-media.has-photo .hero-note{
  opacity:0;transform:translateX(-50%) translateY(10px);
  transition:opacity .6s ease .15s, transform .6s ease .15s}
.hero-grid:hover .hero-note,.hero-grid:focus-within .hero-note{
  opacity:1;transform:translateX(-50%) translateY(0)}

/* Touch devices have no hover, so there the wide state is simply the default. */
@media (hover:none){
  .hero-grid,.hero-grid:hover{grid-template-columns:1fr 1.02fr}
  .hero-media.has-photo video{object-position:60% 30%;transform:none}
  .hero-media.has-photo .hero-note{opacity:1;transform:translateX(-50%)}
  .hero-reveal{display:none}
}
@media (max-width:900px){
  .hero-grid,.hero-grid:hover{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .hero-grid,.hero-media.has-photo video{transition:none}
}

.svc figure{aspect-ratio:3/2}