/* C · Dew. Each scene sits on one field sampled from its plate (fields.css, written by tools/optimize.py):
   pearl, the logo's periwinkle, or the logo's navy. Words are navy on pearl AND on periwinkle (white on
   periwinkle is 2.7:1, navy is 6.3:1) and pearl on navy. Labels pair English with a short Korean phrase.
   Motion: each object settles onto its field like a drop coming to rest; words rise once. */
.dir-c-dew {
  /* the illustration and accent blues, as tokens so a version can retune them in one place */
  --c-deep: #4450B8;
  --c-mid: #7C87E8;
  --c-soft: #A9B1F2;
  --c-ink: #2F3A9E;
  --c-wash: #E6E8FA;
  --page: var(--pearl, #F4F3F8);
  --text: #000C36;
  --heading: #000C36;
  --muted: #3A4060;
  --label: var(--c-deep);            /* the logo's periwinkle, deepened until it reads on pearl (6.2:1) */
  --link: #000C36;
  --focus: var(--c-deep);
  --btn: #000C36;
  --btn-hover: #1A2759;
  --btn-text: #FFFFFF;
  --btn-radius: 10px;
  --nav-text: #000C36;
  --header-bg: var(--page);
  --header-bg-blur: rgb(244 243 248 / .82);
  --header-line: rgb(0 12 54 / .08);
  --foot-bg: #000C36;
  --foot-text: #E9E8F3;
  --foot-logo-bg: #F4F3F8;
  --body: "Poppins", "Helvetica Neue", Arial, system-ui, sans-serif;
  --display: "Poppins", "Helvetica Neue", Arial, system-ui, sans-serif;
  --display-weight: 600;
  --h-track: -.022em;
  --h1-comp: clamp(2.35rem, 4.9vw, 5.1rem);  /* comp: cap height 53px at 1536 → 71px font at 1440 */
  --h2-comp: clamp(2.15rem, 4.4vw, 4.6rem);  /* comp section titles: cap 45–53px at 1536 (one role, sized to their average) */
  --h1-lh: 1.08;
  --h2-lh: 1.12;
  --h1-tablet: clamp(2.3rem, 4.8vw, 2.8rem);
  --h2-tablet: clamp(2.1rem, 4.3vw, 2.5rem);
}
.dir-c-dew body { font-size: 1rem; line-height: 1.65; }
.dir-c-dew .label { font-weight: 500; letter-spacing: .2em; }
.dir-c-dew .btn { font-weight: 500; }

.tone-peri { --scene-text: #000C36; --label: #000C36; --muted: #0B1540; }
.tone-navy { --scene-text: #F4F3F8; --heading: #F4F3F8; --label: var(--c-soft); --link: #F4F3F8; --muted: #D5D7EC; --focus: var(--c-soft); }

@media (min-width: 1024px) {
  .dir-c-dew .s-top > .copy { padding-top: calc(var(--header-h) + 2.2vw); }
  .dir-c-dew .s-boosters { --copy-w: 46vw; }
  .dir-c-dew .s-hydro { --copy-w: 58vw; }
  .dir-c-dew .s-teens { --copy-w: 42vw; }
  .dir-c-dew .s-about { --copy-w: 56vw; }
  .dir-c-dew .s-visit { --copy-w: 52vw; }
}
@media (max-width: 1023px) {
  /* Stacked: the object, then the words on the same field. The hero leads with its words, as in the comp. */
  .dir-c-dew .s-top { display: flex; flex-direction: column; }
  .dir-c-dew .s-top > .copy { order: -1; padding-bottom: 28px; }
  .dir-c-dew .overlay:not(.s-top) .plate img { -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .dir-c-dew [data-reveal] .plate { transform: scale(.972); opacity: .001; }
  .dir-c-dew:not(.js) [data-reveal] .plate { animation: mein-show 0s 2.5s forwards; }
  .dir-c-dew [data-reveal].is-in .plate { transform: none; opacity: 1; animation: none; transition: transform .8s cubic-bezier(.3, 1.35, .5, 1), opacity .35s; }
  .dir-c-dew .s-top .plate { transform: none; opacity: 1; animation: none; }
  .dir-c-dew .s-top .plate img { animation: c-rise 1.4s var(--ease) both; }
  .dir-c-dew [data-reveal].is-instant .plate { transition: none; }
  @keyframes c-rise { from { transform: translateY(3.5%); opacity: .6; } to { transform: none; opacity: 1; } }
}

.dir-c-dew .treatments, .dir-c-dew .reviews { background: var(--pearl, #F4F3F8); }
/* Reviews: half-size white cards (30rem → 15rem) drifting like B, each with an initial avatar and five stars. */
.dir-c-dew { --rv-font: 500 clamp(.9rem, .87rem + .1vw, .96rem)/1.6 var(--display); --rv-track: -.005em; --rv-w: 15rem; --pic-radius: 14px; }
.dir-c-dew .rv figure { background: #FFFFFF; border-radius: 16px; padding: 18px 18px 8px; gap: 12px; align-content: start; grid-template-rows: auto 1fr auto; }
.dir-c-dew .rv { flex-basis: min(72vw, var(--rv-w)); }
.dir-c-dew .rv-track { gap: clamp(12px, 1.2vw, 18px); }
.dir-c-dew .rv figcaption { font-size: .8rem; gap: 0 12px; }
.dir-c-dew .rv-name { min-height: 0; padding-top: 6px; }   /* a name is not a link: no tap-size box, so the card stays compact */
.dir-c-dew .rv-meta { display: flex; align-items: center; gap: 10px; }
.dir-c-dew .rv-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-wash); color: var(--c-ink); font: 600 .95rem/1 var(--display); }
.dir-c-dew .rv:nth-child(3n + 2) .rv-avatar { background: #858EE5; color: #000C36; }
.dir-c-dew .rv:nth-child(3n + 3) .rv-avatar { background: #000C36; color: #F4F3F8; }
.dir-c-dew .rv-stars { display: inline-flex; gap: 2px; }
.dir-c-dew .rv-stars svg { width: 14px; height: 14px; fill: var(--c-deep); }
/* the object floats on the pearl page: the picture's own corners fade out, so no square shows */
.dir-c-dew .tx-group-pic { border-radius: 0; -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); }
.dir-c-dew .tx-name { font-weight: 600; letter-spacing: -.01em; }
.dir-c-dew .tx-head h3 { letter-spacing: -.02em; }

/* Water drops, drawn in CSS (no images): a small bright highlight toward the light (upper left), light gathered
   on the far inner side, a darker rim, and on a surface a soft shadow down-right. 1em = the drop's diameter.
   Positions and sizes per framing: drops.css. Lead gesture: drops bead up when their scene arrives. Supporting:
   drops in the air drift at their own depth as the page scrolls (CSS scroll-driven animation, where supported). */
.drops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.drop { position: absolute; display: none; width: 1em; height: 1em; font-size: calc(var(--s, 1) * 1cqw); translate: -50% -50%; }
/* Matched to the photographed spray (c-hydro): a dark blue refraction rim, a clear body, a crisp white highlight. */
.drop i { display: block; width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 27%, #FFFFFF 0 5.5%, rgb(255 255 255 / 0) 11%),
    radial-gradient(circle at 67% 73%, rgb(255 255 255 / .9) 0 7%, rgb(255 255 255 / 0) 27%),
    radial-gradient(circle at 42% 38%, rgb(255 255 255 / .34) 0 36%, rgb(64 88 176 / .2) 62%, rgb(24 40 118 / .58) 90%, rgb(18 30 96 / .8) 100%);
  box-shadow: inset .05em .06em .1em rgb(10 20 80 / .38), inset -.06em -.08em .12em rgb(255 255 255 / .75); }
/* On a surface: the shadow falls down-right, and the light that passes through gathers in a bright spot beside it. */
.drops-surface .drop i { box-shadow: inset .05em .06em .1em rgb(10 20 80 / .4), inset -.06em -.08em .12em rgb(255 255 255 / .75), .08em .14em .2em rgb(0 12 54 / .28); }
.drops-surface .drop::after { content: ""; position: absolute; left: 62%; top: 78%; width: .5em; height: .22em; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / .75), rgb(255 255 255 / 0)); }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .dir-c-dew [data-reveal] .drop i { transform: scale(.2); opacity: 0; }
  .dir-c-dew:not(.js) [data-reveal] .drop i { animation: mein-show 0s 2.5s forwards; }
  .dir-c-dew [data-reveal].is-in .drop i { animation: drop-bead .9s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(.3s + var(--i, 0) * 90ms); }
  .dir-c-dew [data-reveal].is-instant .drop i { animation: none; transform: none; opacity: 1; }
  @keyframes drop-bead { 0% { transform: scale(.2); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dir-c-dew .has-drops { view-timeline: --scene block; }
    .drops-air .drop { animation: drop-drift linear both; animation-timeline: --scene; }
    /* centred in the view = at its designed spot; above/below it = pushed by its depth */
    @keyframes drop-drift {
      from { transform: translate3d(calc(var(--dx, 0) * var(--k, 1) * -1vw), calc(var(--d, 0) * var(--k, 1) * 1vh), 0); }
      to { transform: translate3d(calc(var(--dx, 0) * var(--k, 1) * 1vw), calc(var(--d, 0) * var(--k, 1) * -1vh), 0); }
    }
    /* stacked layouts: the plate is a short strip, so the drops travel a third as far and stay in it */
    @media (max-width: 1023px) { .drops-air .drop { --k: .33; } }
  }
}

/* ── How it works ──────────────────────────────────────────────────────────────────────────────────────────────
   One progress value --t (0 = before, 1 = after; set by site.js, the slider or the play button) becomes three step
   values --a, --b, --c, and each part of the drawing moves or fades from those. The default is the "after" state,
   so without the script the drawing shows the result and all three steps read as text. */
.tx-act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.sim-open { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--c-ink); font: 500 .95rem var(--display); cursor: pointer; }
.sim-open:hover { text-decoration: underline; text-underline-offset: 6px; }
.sim-dot { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 18%, var(--c-soft) 40%, var(--c-deep) 100%); box-shadow: 0 1px 2px rgb(0 12 54 / .25); }

.sim-pop { width: min(94vw, 38rem); max-height: min(92vh, 50rem); overflow: auto; margin: auto; padding: clamp(22px, 3.4vw, 36px); border: 0; border-radius: 20px; background: #FFFFFF; color: var(--text); box-shadow: 0 30px 90px rgb(0 12 54 / .28); }
.sim-pop::backdrop { background: rgb(0 12 54 / .4); }
@supports (backdrop-filter: blur(4px)) { .sim-pop::backdrop { backdrop-filter: blur(4px); } }
.sim-pop { display: none; }
.sim-pop:popover-open { display: grid; gap: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .sim-pop:popover-open { animation: tp-in2 .32s var(--ease); }
  @keyframes tp-in2 { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
.sim-title { font: 600 clamp(1.4rem, 1.2rem + .8vw, 1.8rem)/1.2 var(--display); letter-spacing: -.02em; margin: 0; }
.sim-lede { color: var(--muted); }
.sim { --t: 1; --a: clamp(0, var(--t) * 3, 1); --b: clamp(0, var(--t) * 3 - 1, 1); --c: clamp(0, var(--t) * 3 - 2, 1); border-radius: 14px; overflow: hidden; background: #F4F3F8; }
.sim svg { display: block; width: 100%; height: auto; }
.sim-ctl { display: flex; align-items: center; gap: 14px; }
.sim-play { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid #000C36; border-radius: 50%; background: none; cursor: pointer; }
.sim-play span { width: 0; height: 0; margin-left: 3px; border-left: 11px solid #000C36; border-block: 7px solid transparent; }
.sim-range { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .8rem; color: var(--muted); }
.sim-range input { flex: 1; min-width: 0; height: 44px; accent-color: var(--c-deep); }
.sim-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: s; }
.sim-steps li { counter-increment: s; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: 8px; font-size: .92rem; color: var(--muted); transition: color .3s; }
.sim-steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--c-wash); color: var(--c-ink); font: 600 .72rem/1 var(--display); grid-row: span 2; transition: background-color .3s, color .3s; }
.sim-steps b { color: var(--text); font-weight: 600; }
.sim-steps li.is-on { color: var(--text); }
.sim-steps li.is-on::before { background: var(--c-deep); color: #FFFFFF; }
.sim-note { font-size: .78rem; color: var(--muted); }

/* the drawing: shared skin */
.sim .s-air { fill: #F4F3F8; }
.sim .s-epi { fill: #E6E3F6; }
.sim .s-der { fill: #F4E7EE; }
.sim .s-surf { stroke: rgb(0 12 54 / .35); stroke-width: 1; fill: none; }
.sim .s-lbl { font: 500 9px var(--display); fill: rgb(0 12 54 / .55); letter-spacing: .02em; }
.sim .s-pore { fill: #F4F3F8; stroke: rgb(0 12 54 / .18); }
.sim .s-tool { fill: #FFFFFF; stroke: rgb(0 12 54 / .3); }
.sim .s-ha, .sim .boost circle { fill: var(--c-mid); }
.sim g, .sim ellipse, .sim rect, .sim circle, .sim path { transform-box: fill-box; }
.sim .halo { fill: #E7A0AE; opacity: .5; }

/* me:in Method: read → tailor → restore */
.sim-mein-method .scan { fill: var(--c-deep); transform: translateX(calc(var(--a) * 207px)); opacity: calc(var(--a) * 1.5 - var(--b) * 1.5); }
.sim-mein-method .s-deb { fill: #B9A88D; opacity: calc(1 - var(--c)); }
.sim-mein-method .dull rect { fill: #CFC8DA; opacity: calc(1 - var(--c)); }
.sim-mein-method .bars { opacity: clamp(.25, var(--a) * 1.5, 1); }
.sim-mein-method .track { fill: var(--c-wash); }
.sim-mein-method .bar { fill: var(--c-deep); transform-origin: left center; }
.sim-mein-method .b-hyd { transform: scaleX(calc(.3 + .55 * var(--c))); }
.sim-mein-method .b-con { transform: scaleX(calc(.72 - .45 * var(--c))); fill: #9AA2EE; }
.sim-mein-method .b-sen { transform: scaleX(calc(.55 - .25 * var(--c))); fill: #9AA2EE; }
.sim-mein-method .chips rect { fill: var(--c-deep); opacity: calc(.15 + .85 * var(--b)); }
.sim-mein-method .chips text { font: 600 8.5px var(--display); fill: #FFFFFF; text-anchor: middle; opacity: calc(.4 + .6 * var(--b)); }

/* Soothe: calm → replenish → seal */
.sim-soothe text.s-lbl:first-of-type { display: none; }   /* the barrier bricks fill the epidermis band */
.sim-soothe .halo { opacity: calc(.55 - .5 * var(--a)); }
.sim-soothe .bricks rect { fill: #D9D5F1; stroke: rgb(0 12 54 / .12); }
.sim-soothe .mortar rect { fill: var(--c-mid); transform-origin: center; transform: scaleY(var(--b)); opacity: var(--b); }
.sim-soothe .s-leak { fill: #9AB6F2; opacity: calc(1 - var(--c)); transform: translateY(calc(var(--t) * -8px)); }
.sim-soothe .sheen { fill: var(--c-soft); opacity: calc(var(--c) * .8); }

/* Hydro: loosen → lift out → hydrate */
.sim-hydro { --b1: clamp(0, var(--t) * 6 - 2, 1); --b2: clamp(0, var(--t) * 6 - 3, 1); }
.sim-hydro .tip { transform: translateX(calc(var(--b) * 120px)); }
.sim-hydro .swirl { transform-origin: center; transform: rotate(calc(var(--t) * 1080deg)); }
.sim-hydro .s-swirl { fill: none; stroke: var(--c-mid); stroke-width: 1.5; stroke-dasharray: 6 4; }
.sim-hydro .deb { fill: #B9A88D; }
.sim-hydro .d1 { transform: translateY(calc(var(--b1) * -52px)); opacity: calc(1 - var(--b1)); }
.sim-hydro .d2 { transform: translateY(calc(var(--b2) * -52px)); opacity: calc(1 - var(--b2)); }
.sim-hydro .s-ha { transform: translateY(calc(var(--c) * 32px)); opacity: clamp(0, var(--c) * 3, 1); }
.sim-hydro .plump { fill: var(--c-soft); opacity: calc(var(--c) * .45); }

/* Clarity (and First Skin): cleanse → extract → blue LED (teen: calm) */
.sim-clarity .flakes rect, .sim-first-skin .flakes rect { fill: #C9C1D8; opacity: calc(1 - var(--a)); }
.sim-clarity .plug, .sim-first-skin .plug { fill: #C7B48E; transform: translateY(calc(var(--b) * -54px)); opacity: calc(1 - var(--b)); }
.sim-clarity .s-bac, .sim-first-skin .s-bac { fill: #B4475A; }
.sim-clarity .bac { opacity: calc(1 - var(--c)); }
.sim-clarity .halo, .sim-first-skin .halo { opacity: calc(.6 - .5 * var(--c)); }
.sim-clarity .rays path { stroke: #5B7CFF; stroke-width: 3; stroke-linecap: round; opacity: calc(var(--c) * .75); }
.sim-clarity .calm { display: none; }
.sim-first-skin .rays { display: none; }
.sim-first-skin .bac { opacity: calc(1 - var(--b) * .6); }
.sim-first-skin .calm { fill: var(--c-soft); opacity: calc(var(--c) * .75); }

/* Lift: warm → tighten → rebuild */
.sim-lift .heat { fill: #F4B79A; opacity: calc(var(--a) * .6 - var(--c) * .35); }
.sim-lift .waves path { fill: none; stroke: #E58E6B; stroke-width: 2; stroke-dasharray: 5 5; opacity: calc(var(--a) - var(--c) * .8); }
.sim-lift .f { fill: none; stroke: #9C6B87; stroke-width: 2.2; stroke-linecap: round; }
.sim-lift .slack { opacity: calc(1 - var(--b)); }
.sim-lift .taut { opacity: var(--b); }
.sim-lift .neo path { stroke: var(--c-deep); stroke-width: 2; stroke-linecap: round; transform-origin: left center; transform: scaleX(var(--c)); }
.sim-lift .s-probe { fill: #D8DCF7; stroke: rgb(0 12 54 / .3); }

/* Xeomin: signal → quiet → soften */
.sim-xeomin .crease { fill: none; stroke: rgb(0 12 54 / .5); stroke-width: 2; stroke-linecap: round; opacity: calc(1 - var(--c)); }
.sim-xeomin .nerve { fill: none; stroke: #D4A63A; stroke-width: 2.5; stroke-linecap: round; }
.sim-xeomin .s-pulse { fill: #F2C14E; }
.sim-xeomin .pulse { transform: translateX(calc(var(--a) * 96px)); opacity: calc(1 - var(--b)); }
.sim-xeomin .bunched path, .sim-xeomin .relaxed path { fill: none; stroke: #D98E9B; stroke-width: 5; stroke-linecap: round; }
.sim-xeomin .bunched { opacity: calc(1 - var(--c)); }
.sim-xeomin .relaxed { opacity: var(--c); }
.sim-xeomin .s-tox { fill: var(--c-mid); }
.sim-xeomin .toxin { opacity: var(--b); }

/* Microneedling: channels → boosters → collagen */
.sim-microneedling .needles path { stroke: #7A7F9A; stroke-width: 1.4; stroke-linecap: round; }
.sim-microneedling .pen { transform: translateY(calc((var(--a) - var(--b)) * 34px)); }
.sim-microneedling .chan rect { fill: #FFFFFF; opacity: calc(var(--a) - var(--c) * .9); }
.sim-microneedling .boost { transform: translateY(calc(var(--b) * 34px)); opacity: calc(var(--b) - var(--c) * .6); }
.sim-microneedling .s-fib { fill: #EAA3B8; opacity: calc(.45 + .55 * var(--c)); }
.sim-microneedling .neo path { stroke: var(--c-deep); stroke-width: 2; stroke-linecap: round; transform-origin: left center; transform: scaleX(var(--c)); }

/* Reset Peel: apply → shed → renew */
.sim-reset-peel { --b1: clamp(0, var(--t) * 6 - 2, 1); --b2: clamp(0, var(--t) * 6 - 3, 1); }
.sim-reset-peel .l1 rect, .sim-reset-peel .l2 rect, .sim-reset-peel .l3 rect { fill: #D6CFE0; stroke: rgb(0 12 54 / .12); }
.sim-reset-peel .l1 { transform: translate(calc(var(--b1) * -10px), calc(var(--b1) * -30px)) rotate(calc(var(--b1) * -3deg)); opacity: calc(1 - var(--b1)); }
.sim-reset-peel .l2 { transform: translate(calc(var(--b2) * 10px), calc(var(--b2) * -34px)) rotate(calc(var(--b2) * 3deg)); opacity: calc(1 - var(--b2)); }
.sim-reset-peel .l3 { transform: translateY(calc(var(--c) * -30px)); opacity: calc(1 - var(--c)); }
.sim-reset-peel .acid { fill: var(--c-soft); opacity: calc(var(--a) * .35 - var(--c) * .35); }
.sim-reset-peel .s-pig { fill: #A7806A; opacity: calc(1 - .65 * var(--c)); }
.sim-reset-peel .sheen { fill: #FFFFFF; opacity: calc(var(--c) * .9); }

/* ── Water UI: drops that follow the mouse, and buttons that ripple (site.js; fine pointers, motion allowed) ── */
.drop-layer { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.cursor-drop { position: absolute; left: 0; top: 0; width: 1em; height: 1em; }
.cursor-drop i { display: block; width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 27%, #FFFFFF 0 7%, rgb(255 255 255 / 0) 14%),
    radial-gradient(circle at 67% 73%, rgb(255 255 255 / .85) 0 8%, rgb(255 255 255 / 0) 30%),
    radial-gradient(circle at 42% 38%, rgb(255 255 255 / .3) 0 36%, rgb(64 88 176 / .22) 62%, rgb(24 40 118 / .55) 90%, rgb(18 30 96 / .75) 100%);
  box-shadow: inset .05em .06em .1em rgb(10 20 80 / .35), inset -.06em -.08em .12em rgb(255 255 255 / .7); }
.water-ui .btn, .water-ui .rv-btn, .water-ui .sim-play { position: relative; overflow: hidden; isolation: isolate; }
.ripple { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgb(255 255 255 / 0) 42%, rgb(255 255 255 / .55) 58%, rgb(255 255 255 / 0) 72%); }
.rv-btn .ripple, .sim-play .ripple { background: radial-gradient(circle, rgb(68 80 184 / 0) 42%, rgb(68 80 184 / .35) 58%, rgb(68 80 184 / 0) 72%); }

/* C treatment list: one treatment per row, its How it works diagram as a thumbnail on the left (click opens the
   panel; hover replays it), the description cut to two lines (the whole text is in the panel), Best for on its own
   line. */
.dir-c-dew .tx-list { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3vw, 40px); }
.dir-c-dew .tx.has-sim { grid-template-columns: clamp(170px, 17vw, 236px) minmax(0, 1fr); column-gap: clamp(18px, 2.4vw, 36px); align-items: start; }
.sim-thumb { display: grid; gap: 8px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--c-ink); }
.sim-thumb .sim { display: block; border-radius: 12px; box-shadow: 0 0 0 1px rgb(0 12 54 / .06); transition: box-shadow .3s, transform .3s var(--ease); }
.sim-thumb:hover .sim, .sim-thumb:focus-visible .sim { box-shadow: 0 0 0 1px rgb(68 80 184 / .35), 0 10px 24px rgb(0 12 54 / .1); transform: translateY(-2px); }
.sim-thumb .s-lbl { display: none; }
.sim-thumb-l { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font: 500 .86rem var(--display); }
.sim-thumb:hover .sim-thumb-l { text-decoration: underline; text-underline-offset: 5px; }
.dir-c-dew .tx-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.dir-c-dew .tx-best-k { display: block; margin: 0 0 3px; }
.sim-about { display: grid; gap: 8px; padding-top: 14px; margin-top: 2px; border-top: 1px solid rgb(0 12 54 / .08); font-size: .95rem; }
.sim-meta { color: var(--muted); font-size: .9rem; }
.sim-about .tx-best-k { display: block; margin: 0 0 3px; }
@media (max-width: 700px) {
  .dir-c-dew .tx.has-sim { grid-template-columns: 116px minmax(0, 1fr); column-gap: 14px; }
  .sim-thumb-l { font-size: .78rem; gap: 6px; }
  .sim-thumb .sim-dot { display: none; }
}
/* the narrowest phones: the diagram goes above the words instead of beside them */
@media (max-width: 360px) {
  .dir-c-dew .tx.has-sim { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .sim-thumb { width: min(100%, 220px); }
}

/* Consultation: scan → read → plan */
.sim-consultation .scan { fill: var(--c-deep); transform: translateX(calc(var(--a) * 357px)); opacity: calc(var(--a) * 1.5 - var(--b) * 1.5); }
.sim-consultation .s-deb { fill: #B9A88D; }
.sim-consultation .marks circle { fill: none; stroke: var(--c-deep); stroke-width: 1.6; stroke-dasharray: 3 3; transform-origin: center; transform: scale(calc(.4 + .6 * var(--b))); opacity: var(--b); }
.sim-consultation .plan rect { fill: #FFFFFF; stroke: rgb(0 12 54 / .15); }
.sim-consultation .plan .ln { fill: var(--c-soft); stroke: none; }
.sim-consultation .plan { opacity: var(--c); transform: translateY(calc((1 - var(--c)) * 8px)); }

/* Dermaplaning: glide → lift → absorb */
.sim-dermaplaning { --h1: clamp(0, var(--b) * 4, 1); --h2: clamp(0, var(--b) * 4 - 1, 1); --h3: clamp(0, var(--b) * 4 - 2, 1); --h4: clamp(0, var(--b) * 4 - 3, 1); }
.sim-dermaplaning .fz path { stroke: #9C8C7A; stroke-width: 1.2; stroke-linecap: round; }
.sim-dermaplaning .fz rect { fill: #C9C1D8; }
.sim-dermaplaning .h1 { opacity: calc(1 - var(--h1)); transform: translateY(calc(var(--h1) * -10px)); }
.sim-dermaplaning .h2 { opacity: calc(1 - var(--h2)); transform: translateY(calc(var(--h2) * -10px)); }
.sim-dermaplaning .h3 { opacity: calc(1 - var(--h3)); transform: translateY(calc(var(--h3) * -10px)); }
.sim-dermaplaning .h4 { opacity: calc(1 - var(--h4)); transform: translateY(calc(var(--h4) * -10px)); }
.sim-dermaplaning .blade { transform: translate(calc(var(--b) * 310px), calc((1 - var(--a)) * -24px)); opacity: calc(var(--a) - var(--c)); }
.sim-dermaplaning .edge { stroke: #7A7F9A; stroke-width: 2; stroke-linecap: round; }
.sim-dermaplaning .s-ha { transform: translateY(calc(var(--c) * 30px)); opacity: clamp(0, var(--c) * 3, 1); }

/* A client's words under a treatment: a hanging periwinkle quote mark, the quote in navy, who and what in small type.
   No box: the mark and the indent set it apart. */
.tx-quote { position: relative; display: grid; gap: 6px; margin: 6px 0 2px; padding-left: 26px; }
.tx-quote::before { content: "“"; position: absolute; left: 0; top: -.12em; font: 600 2rem/1 var(--display); color: #858EE5; }
.tx-quote blockquote { margin: 0; }
.tx-quote p { font-size: .95rem; line-height: 1.55; color: #000C36; text-wrap: pretty; }
.tx-quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: .82rem; color: var(--muted); }
.txq-name { font-weight: 600; color: #000C36; }
.txq-src { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: 4px; }
.sim-about .tx-quote { margin-top: 10px; }

/* Booking page (geometry in base.css): white cards on the pearl field, the chosen one navy; the calendar in a
   rounded white pane with a periwinkle glow. */
.dir-c-dew { --bk-field: #F4F3F8; --bk-opt: #FFFFFF; --bk-hover: #E6E8FB; --bk-on: #000C36; --bk-on-text: #FFFFFF; --bk-gap: 8px; --bk-radius: 16px; --bk-name-font: 500 1.02rem/1.3 var(--display); --bk-frame-radius: 24px; --bk-frame-shadow: 0 1px 2px rgb(0 12 54 / .05), 0 36px 80px -40px rgb(68 80 184 / .5); }

/* Highlight strip (geometry in base.css): a navy ribbon along the bottom of the hero; on phones and tablets it sits
   between the hero words and the photograph. */
.dir-c-dew { --hl-bg: #000C36; --hl-text: #F4F3F8; --hl-ico: var(--c-soft); --hl-dot: rgb(169 177 242 / .7); --hl-font: 500 .9rem/1 var(--display); }
@media (max-width: 1023px) {
  .dir-c-dew .s-top > .hl-strip { order: 0; }
  .dir-c-dew .s-top > .plate-box { order: 1; }
}