/* ══ POLISH ════════════════════════════════════════════════════════════
   Loaded last by both skins. Three jobs: a full-bleed hero with the copy
   over a gradient, one real neon sign (the closing band only), and type
   that can actually be read. Every other "neon" is now plain script.     */

.skin-pink{--ink:#3D2230;--body:#5A3E4A;--muted:#80606E;--accent-ink:#B5306F;--shade-rgb:249,213,227}
.skin-white{--ink:#1F171B;--body:#4A3F44;--muted:#76676E;--accent-ink:#C2347A;--shade-rgb:255,232,241}

/* ── 1. hero: video fills the band, copy sits on a left-hand gradient ── */
.hero-full{position:relative;overflow:hidden;padding:0;display:flex;align-items:center;
  aspect-ratio:832/464}
.hero-full::before{display:none}
/* The band takes the clip's own 832x464 shape, so the whole frame shows with
   nothing enlarged and nothing cropped. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 50%;z-index:0}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgb(var(--shade-rgb)) 0%, rgba(var(--shade-rgb),.96) 20%,
    rgba(var(--shade-rgb),.8) 32%, rgba(var(--shade-rgb),.35) 44%,
    rgba(var(--shade-rgb),0) 56%)}
.hero-shade::before{content:"";position:absolute;inset:0;
  background:#F9CFE0;mix-blend-mode:multiply;opacity:.2}
.hero-full .wrap{max-width:1240px;width:100%;padding:0 40px;position:relative;z-index:4}
.hero-full .hero-copy{padding:4.5rem 0;max-width:31rem}
.hero-full .star{display:block}
.hero-script{position:absolute;right:clamp(1.2rem,3vw,3rem);bottom:clamp(1.2rem,2.6vw,2rem);
  z-index:4;margin:0;font-family:var(--script);font-size:clamp(1.7rem,2.9vw,2.6rem);
  line-height:1.2;text-align:center;color:#B5306F;transform:rotate(-4deg);
  text-shadow:0 0 3px #fff,0 0 14px rgba(255,255,255,.95),0 0 28px rgba(255,255,255,.8)}

@media (max-width:900px){
  .hero-full{display:block;aspect-ratio:auto}
  .hero-video{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:832/464;display:block}
  .hero-shade{display:none}
  .hero-full .wrap{padding:0 26px}
  .hero-full .hero-copy{padding:2.4rem 0 3rem;max-width:none}
  .hero-script{top:calc(55.8vw - 4.6rem);bottom:auto;right:1rem;font-size:1.35rem}
}

/* ── 2. script asides (no glow, just handwriting) ───────────────────── */
.script-line{font-family:var(--script);font-weight:400;line-height:1.3;
  color:var(--accent-ink);font-size:clamp(1.7rem,2.6vw,2.3rem);margin:0}
.svc-bling .script-line{color:#A8296A;text-align:center;position:relative;z-index:4}
.story .story-note{display:block;margin:2.2rem 0 0;padding:0;background:none;box-shadow:none;
  color:var(--accent-ink);font-size:clamp(1.8rem,2.9vw,2.4rem);max-width:none}
.story-media .wall-script{position:absolute;left:8%;top:8%;z-index:3;margin:0;
  font-family:var(--script);font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.3;color:#fff;
  text-shadow:0 2px 12px rgba(60,15,40,.7),0 0 2px rgba(60,15,40,.5)}

/* ── 3. the one real neon sign ──────────────────────────────────────── */
.cta.cta-sign{position:relative;overflow:hidden;text-align:center;
  padding:clamp(5rem,9vw,8rem) 0;
  background:radial-gradient(70% 90% at 50% 38%,#FF8FC0 0%,#F2619F 36%,#DD3F86 70%,#C92E75 100%)}
.cta.cta-sign .wrap{position:relative}

/* clear acrylic backboard on four standoffs, the way a real sign is hung */
.signboard{position:relative;display:inline-block;padding:2.4rem clamp(1.8rem,5vw,4rem) 2.7rem;
  border-radius:28px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.15),
             0 28px 60px rgba(110,15,60,.35)}
.signboard::before{content:"";position:absolute;inset:-18% -12%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,190,222,.85),rgba(255,140,195,.35) 55%,transparent 75%);
  filter:blur(18px);animation:sign-halo 2.8s ease-in-out infinite}
.screw{position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#E6E6E6 45%,#9C9C9C 100%);
  box-shadow:0 2px 4px rgba(90,10,50,.45)}

/* monoline script reads as bent glass tubing; the stroke fattens the tube */
.cta.cta-sign .sign{margin:0;font-family:'Sacramento',var(--script);font-weight:400;
  font-size:clamp(2.7rem,6.4vw,5.2rem);line-height:1.12;letter-spacing:.01em;
  color:#fff;-webkit-text-stroke:1.2px #fff;
  animation:sign-blink 2.8s ease-in-out infinite}

/* 반짝, 반짝: fully lit, a soft dip, lit again. Even beats, never a stutter. */
@keyframes sign-blink{
  0%,36%,50%,86%,100%{color:#fff;-webkit-text-stroke-color:#fff;
    text-shadow:0 0 2px #fff,0 0 6px #fff,0 0 12px #FFB8D9,0 0 24px #FF7DB8,
      0 0 48px #FF4D9E,0 0 96px rgba(255,77,158,.75),0 12px 10px rgba(105,10,55,.38)}
  43%,93%{color:#FFD3E6;-webkit-text-stroke-color:#FFD3E6;
    text-shadow:0 0 1px #FFE3EF,0 0 3px rgba(255,255,255,.4),0 0 6px rgba(255,184,217,.4),
      0 0 10px rgba(255,125,184,.25),0 0 14px rgba(255,77,158,.15),0 0 20px rgba(255,77,158,0),
      0 12px 10px rgba(105,10,55,.3)}
}
@keyframes sign-halo{0%,36%,50%,86%,100%{opacity:1} 43%,93%{opacity:.25}}

/* four-point sparkles that pop in turn around the sign */
.cta.cta-sign .star{--neon:#FFC2DE;--neon-far:rgba(255,190,222,.6);
  animation:sparkle 2.8s ease-in-out infinite;animation-delay:var(--dl,0s);opacity:0}
@keyframes sparkle{0%,100%{transform:scale(0) rotate(0deg);opacity:0}
                   50%{transform:scale(1) rotate(45deg);opacity:1}}

.cta.cta-sign p{margin:2.6rem auto 2.2rem;max-width:34em;color:#fff;font-size:1.15rem;
  font-weight:500;line-height:1.6;text-shadow:0 1px 10px rgba(120,15,65,.45)}
.cta.cta-sign .btn{background:#fff;color:#B5306F;font-size:.84rem;font-weight:600;
  box-shadow:0 12px 30px rgba(110,15,60,.32)}
.cta.cta-sign .btn:hover{background:#FFF1F7;color:#9C2460;transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .cta.cta-sign .sign,.signboard::before{animation:none}
  .cta.cta-sign .sign{text-shadow:0 0 2px #fff,0 0 6px #fff,0 0 12px #FFB8D9,0 0 24px #FF7DB8,
    0 0 48px #FF4D9E,0 0 96px rgba(255,77,158,.75),0 12px 10px rgba(105,10,55,.38)}
  .cta.cta-sign .star{animation:none;opacity:.9}
}

/* ── 4. legibility ──────────────────────────────────────────────────────
   Nothing under 400 weight, body copy at 16px or more, labels big enough to
   read, and pinks deep enough to hold contrast on white.                 */
body{font-weight:400;color:var(--ink)}
h1,h2,h3{font-weight:500}
.kicker{font-size:.8rem;font-weight:500;letter-spacing:.26em;color:var(--accent-ink)}
.nav a:not(.btn){font-size:.8rem;letter-spacing:.14em;font-weight:500;opacity:1;color:var(--ink)}
.nav a:not(.btn):hover{color:var(--accent-ink)}

.hero-copy h1{font-weight:500;
  background:linear-gradient(100deg,#B5306F 0%,#DB5C97 28%,#F08BB6 44%,#D24C87 60%,#B5306F 80%,#DB5C97 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.hero-copy h1 .l2{color:var(--accent-ink);-webkit-text-fill-color:currentColor;font-weight:500}
.hero-tag{font-size:.8rem;letter-spacing:.24em;font-weight:500;color:var(--accent-ink)}
.hero-copy .lede{font-size:1.15rem;font-weight:400;line-height:1.65;color:var(--ink)}
.hero-loc{font-size:.78rem;font-weight:500;color:var(--body)}

.strip-item span{font-size:.78rem;letter-spacing:.16em;font-weight:500;color:var(--body)}
.strip-item svg{stroke:var(--accent-ink);stroke-width:1.3;opacity:1}

.section-head h2,.story h2{font-weight:500}
.svc h3{font-size:1.35rem;font-weight:500}
.svc .price{font-size:1.6rem;font-weight:500;color:var(--accent-ink)}
.svc p{font-size:1rem;line-height:1.65;font-weight:400;color:var(--body)}
.svc .more{font-size:.76rem;letter-spacing:.18em;font-weight:600;color:var(--accent-ink)}
.story p{font-size:1.08rem;font-weight:400;line-height:1.75}
.rev blockquote{font-size:1.06rem;font-weight:400;line-height:1.7;color:var(--ink)}
.rev .hearts{font-size:.9rem;color:var(--accent-ink)}
.rev figcaption b{font-size:.98rem}
.rev figcaption span{font-size:.76rem;color:var(--body)}
.ba-pair figcaption{font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--accent-ink)}

/* white on the old pale-pink buttons was about 3:1; this is close to 5:1 */
.btn,header .btn,.nav a.btn{background:linear-gradient(135deg,#E8639C,#C93F7B);color:#fff;
  opacity:1;font-size:.8rem;font-weight:600;letter-spacing:.16em;border-radius:999px;
  box-shadow:0 8px 22px rgba(201,63,123,.3)}
.btn:hover,header .btn:hover{background:linear-gradient(135deg,#EE74A8,#D24C87);color:#fff;
  transform:translateY(-2px);box-shadow:0 14px 30px rgba(201,63,123,.4)}
.btn-ghost{background:#fff;color:var(--accent-ink);border:1.5px solid currentColor;box-shadow:none}
.btn-ghost:hover{background:var(--accent-ink);color:#fff;border-color:var(--accent-ink)}

footer{background:#F7D3E2;color:#6B3550;font-size:.95rem}
footer p:first-child{font-size:.8rem;font-weight:500}

/* ── reusable glow lighting ─────────────────────────────────────────────
   .glow       soft lit script, the look of the earlier closing band
   .glow-field a scatter of tiny twinkling points behind any pink section
   Both need a pink ground; on white the light has nothing to show against. */
.glow{font-family:var(--script);font-weight:400;color:#fff;
  text-shadow:0 0 2px #fff,0 0 7px #FFE0EC,0 0 16px #FF9CC8,0 0 32px #FF6FB0,0 0 60px rgba(255,111,176,.55);
  animation:glow-breathe 2.8s ease-in-out infinite alternate}
@keyframes glow-breathe{
  from{text-shadow:0 0 2px #fff,0 0 5px #FFE0EC,0 0 10px #FF9CC8,0 0 18px #FF6FB0,0 0 30px rgba(255,111,176,.35)}
  to  {text-shadow:0 0 3px #fff,0 0 9px #FFE8F1,0 0 20px #FF9CC8,0 0 40px #FF6FB0,0 0 78px rgba(255,111,176,.65)}}
.glow-field{position:relative}
.glow-field::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1.6px 1.6px at 9% 22%,#fff 50%,transparent 52%),
    radial-gradient(1.2px 1.2px at 21% 61%,#fff 50%,transparent 52%),
    radial-gradient(2px 2px at 34% 18%,#fff 50%,transparent 52%),
    radial-gradient(1.4px 1.4px at 47% 84%,#fff 50%,transparent 52%),
    radial-gradient(1.8px 1.8px at 60% 30%,#fff 50%,transparent 52%),
    radial-gradient(1.2px 1.2px at 72% 70%,#fff 50%,transparent 52%),
    radial-gradient(2px 2px at 84% 16%,#fff 50%,transparent 52%),
    radial-gradient(1.4px 1.4px at 93% 58%,#fff 50%,transparent 52%);
  animation:twinkle 3.2s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.glow,.glow-field::after{animation:none}}


/* ── hero: her frame at 78% width, pinned right ─────────────────────────
   The whole clip still shows, just smaller, so the face stops filling the
   screen. The band gets shorter to match, and the left 22% is plain pink
   that the gradient dissolves into the edge of the video.               */
@media (min-width:901px){
  .hero-full{aspect-ratio:832/362;min-height:520px}
  .hero-video{inset:0 0 0 auto;width:78%}
  .hero-shade{background:linear-gradient(90deg,
    rgb(var(--shade-rgb)) 0%, rgb(var(--shade-rgb)) 27%,
    rgba(var(--shade-rgb),.85) 36%, rgba(var(--shade-rgb),.4) 46%,
    rgba(var(--shade-rgb),0) 58%)}
}

/* ── closing sign, take two ─────────────────────────────────────────────
   Back to the soft pink wall of the earlier version, with more pink in it,
   and no backboard: the lettering itself is the sign. What makes it read as
   real tubing rather than glowing text is the even monoline stroke, the
   white-hot core, and the shadow the tube throws on the wall beneath it. */
.cta.cta-sign{background:
  radial-gradient(60% 75% at 50% 40%,rgba(255,214,232,.55),transparent 70%),
  linear-gradient(135deg,#F7A3C6 0%,#F080B1 50%,#EC6CA6 100%)}
.signboard{display:block;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.signboard::before{inset:-40% 8%;filter:blur(30px);
  background:radial-gradient(closest-side,rgba(255,225,240,.9),rgba(255,170,210,.4) 55%,transparent 78%)}
.cta.cta-sign .sign{font-size:clamp(2.6rem,6vw,5rem);line-height:1.2;-webkit-text-stroke:1px #fff}
.cta.cta-sign p{margin-top:2rem}
.cta.cta-sign.glow-field::after{z-index:0}
.cta.cta-sign .wrap{z-index:1}


/* ── hero clarity ───────────────────────────────────────────────────────
   The haze came from three things stacked: a pink grade baked into the clip,
   a multiply wash over it, and a copy gradient reaching across her face. The
   clip is re-encoded clean, the wash is gone, and the gradient now stops
   before her cheek.                                                     */
.hero-shade::before{display:none}
@media (min-width:901px){
  .hero-shade{background:linear-gradient(90deg,
    rgb(var(--shade-rgb)) 0%, rgb(var(--shade-rgb)) 25%,
    rgba(var(--shade-rgb),.8) 32%, rgba(var(--shade-rgb),.3) 40%,
    rgba(var(--shade-rgb),0) 48%)}
}
/* a nudge that it moves, shown only while it is at rest */
.hero-full .hero-video{transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.hero-full.is-playing .hero-video{transform:scale(1.015)}


/* ── hero atmosphere: soft bokeh ────────────────────────────────────────
   Neither the old pink fog nor a bare clip. Out-of-focus discs of warm
   cream light drift over the pink side and the corners of the frame, and a
   soft-light wash warms the clip without flattening it, so her face stays
   sharp while the band around it feels like a lit studio.               */
.hero-bokeh{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hero-bokeh i{position:absolute;left:var(--x);top:var(--y);width:var(--d);height:var(--d);
  border-radius:50%;opacity:var(--o);filter:blur(5px);
  background:radial-gradient(circle,rgba(255,240,228,.95) 0%,rgba(255,232,220,.85) 55%,
    rgba(255,226,214,.55) 68%,rgba(255,226,214,0) 74%);
  mix-blend-mode:screen;
  animation:bokeh-drift var(--t,10s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@keyframes bokeh-drift{
  from{transform:translate(0,0) scale(1);opacity:calc(var(--o) * .55)}
  to  {transform:translate(14px,-22px) scale(1.12);opacity:var(--o)}}
/* warmth over the clip: soft-light keeps contrast, unlike the old multiply */
.hero-shade::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(55% 70% at 100% 0%,rgba(255,205,215,.5),transparent 70%),
    radial-gradient(45% 60% at 100% 100%,rgba(255,200,215,.45),transparent 70%),
    linear-gradient(rgba(255,214,224,.55),rgba(255,214,224,.55));
  mix-blend-mode:soft-light}
/* the pink side takes the dusty blush of the reference rather than candy pink */
.skin-white{--shade-rgb:250,226,231}
.skin-pink{--shade-rgb:246,212,222}
@media (prefers-reduced-motion:reduce){.hero-bokeh i{animation:none}}
@media (max-width:900px){.hero-bokeh{display:none}}


/* ── bokeh, corrected ───────────────────────────────────────────────────
   Two mistakes in the first pass: a flat light wash over the whole clip
   brought the fog back, and cream discs on a near-white ground were
   invisible. The clip is left untouched now apart from a blush in the two
   right-hand corners, the pink side drops a tone like the reference, and the
   discs are painted normally with a defined rim so they read as lens bokeh. */
.hero-shade::after{background:
    radial-gradient(40% 55% at 100% 0%,rgba(248,196,210,.55),transparent 72%),
    radial-gradient(38% 50% at 100% 100%,rgba(248,196,210,.5),transparent 72%);
  mix-blend-mode:normal}
.skin-white{--shade-rgb:244,208,217}
.skin-pink{--shade-rgb:240,198,211}
.hero-bokeh i{mix-blend-mode:normal;filter:blur(2.5px);
  background:radial-gradient(circle,rgba(255,238,226,.92) 0%,rgba(255,236,224,.9) 62%,
    rgba(255,244,236,.98) 66%,rgba(255,236,224,0) 71%)}

/* The white skin restated the four-column service grid outside any media
   query, which kept four columns on phones. Restate the breakpoints last. */
@media (max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}
  .svc-bling{min-height:260px}}
.mockbar{overflow-x:auto;justify-content:flex-start;white-space:nowrap}
@media (min-width:900px){.mockbar{justify-content:center}}

/* no zoom on play: the resting frame and the playing clip must line up exactly */
.hero-full.is-playing .hero-video,.hero-full .hero-video{transform:none}