/* ═══════════════════════════════════════════════════════════════
   VARINPAT CLINIC — design system
   Palette extends the existing logo CI (navy V monogram on white).
   No Tailwind, no CDN CSS: every class below is defined in this file,
   so a class can never silently fail the way a partial Tailwind build
   does. Fonts are self-hosted (Switzer / Instrument Serif) + Google
   (IBM Plex Sans Thai).
   ═══════════════════════════════════════════════════════════════ */

/* ─── self-hosted Latin ───────────────────────────────────────── */
@font-face { font-family:'Switzer'; src:url('/assets/fonts/Switzer-Light.woff2')    format('woff2'); font-weight:300; font-style:normal; font-display:swap }
@font-face { font-family:'Switzer'; src:url('/assets/fonts/Switzer-Regular.woff2')  format('woff2'); font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:'Switzer'; src:url('/assets/fonts/Switzer-Medium.woff2')   format('woff2'); font-weight:500; font-style:normal; font-display:swap }
@font-face { font-family:'Switzer'; src:url('/assets/fonts/Switzer-Semibold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap }
@font-face { font-family:'Switzer'; src:url('/assets/fonts/Switzer-Bold.woff2')     format('woff2'); font-weight:700; font-style:normal; font-display:swap }
@font-face { font-family:'Instrument Serif'; src:url('/assets/fonts/InstrumentSerif-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap }

/* ═══ TOKENS ═══════════════════════════════════════════════════ */
:root{
  /* Navy CI scale — sampled from the logo, extended into a full ramp */
  --ink:      #0A1E38;   /* deepest — hero / footer / dark spreads      */
  --ink-soft: #102743;   /* dark panels sitting next to --ink           */
  --navy:     #123156;   /* primary text accent on LIGHT backgrounds    */
  --steel:    #4E739F;   /* secondary text, icons                       */
  --sky:      #9FBBDB;   /* accent on DARK backgrounds — never on light */
  --mist:     #E7EEF6;   /* pale blue fill                              */
  --line:     #D7E2EF;   /* hairlines on light                          */
  --paper:    #F7F9FC;   /* default page background                     */
  --bone:     #F3EFE9;   /* warm neutral — alternate section, stops the
                            all-cool palette from reading clinical-cold */
  --white:    #FFFFFF;
  --body:     #41597A;   /* body copy on light                          */
  --body-dk:  #D5E1EF;   /* body copy on dark                           */

  /* Type */
  --f-display: 'Instrument Serif', 'IBM Plex Sans Thai', serif;
  --f-sans:    'Switzer', 'IBM Plex Sans Thai', -apple-system, sans-serif;
  --f-thai:    'IBM Plex Sans Thai', 'Switzer', sans-serif;

  /* Rhythm */
  --gut: clamp(20px, 4.4vw, 40px);
  --sec: clamp(64px, 9vw, 132px);   /* vertical section padding */
  --max: 1240px;
  --radius: 16px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ═══ RESET ════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* NEVER overflow-x:hidden on html/body — it silently kills position:sticky */
html,body{overflow-x:clip}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-sans); font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ═══ TYPE SCALE ═══════════════════════════════════════════════ */
/* Thai copy sits in Plex Thai; Latin inside Thai copy renders in Switzer
   because Switzer leads the stack and has no Thai glyphs to fall back on. */
.th{font-family:var(--f-thai);font-weight:300}

/* Display = English only. Plex Thai is placed before `serif` in --f-display
   so a stray Thai character can never be rendered by a looped serif. */
.d1{font-family:var(--f-display);font-weight:400;font-size:clamp(46px,7.2vw,94px);line-height:.98;letter-spacing:-.012em}
.d2{font-family:var(--f-display);font-weight:400;font-size:clamp(36px,4.6vw,62px);line-height:1.04;letter-spacing:-.01em}
.d3{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3.1vw,42px);line-height:1.1}

/* Thai headings — max 2 visual lines, always loopless.
   `text-wrap:pretty` stops a Thai heading from dropping one short syllable
   onto its own last line, which reads as a typo rather than a line break. */
.d1,.d2,.d3,.h2,.h3,.h4{text-wrap:pretty}
.h2{font-family:var(--f-thai);font-weight:600;font-size:clamp(23px,2.9vw,38px);line-height:1.38;letter-spacing:-.01em}
.h3{font-family:var(--f-thai);font-weight:600;font-size:clamp(18px,1.65vw,22px);line-height:1.5}
.h4{font-family:var(--f-thai);font-weight:600;font-size:16.5px;line-height:1.55}

.lead{font-family:var(--f-thai);font-weight:300;font-size:clamp(15.5px,1.3vw,18px);line-height:1.95;color:var(--body)}
.copy{font-family:var(--f-thai);font-weight:300;font-size:15.5px;line-height:1.95;color:var(--body)}
.small{font-family:var(--f-thai);font-weight:300;font-size:13.5px;line-height:1.8;color:var(--steel)}

/* EVERY numeral on the site is Switzer — never the serif, never Plex Thai.
   Licence numbers, ratings, prices, hours, index numbers all use .num. */
.num{font-family:var(--f-sans);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.eyebrow{font-family:var(--f-sans);font-weight:500;letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:var(--steel)}
.eyebrow-line{display:inline-flex;align-items:center;gap:12px}
.eyebrow-line::before{content:'';width:26px;height:1px;background:currentColor;opacity:.5}

/* on dark spreads */
.on-dark{color:var(--white)}
.on-dark .lead,.on-dark .copy{color:var(--body-dk)}
.on-dark .small,.on-dark .eyebrow{color:var(--sky)}

/* ═══ LAYOUT ═══════════════════════════════════════════════════ */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:840px;margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.section-sm{padding-block:clamp(44px,6vw,78px)}
.bg-paper{background:var(--paper)}
.bg-white{background:var(--white)}
.bg-mist{background:var(--mist)}
.bg-bone{background:var(--bone)}
.bg-ink{background:var(--ink);color:var(--white)}
.bg-ink-soft{background:var(--ink-soft);color:var(--white)}
.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,222px),1fr))}
.stack{display:flex;flex-direction:column}
.row{display:flex;flex-wrap:wrap;align-items:center}
.hr{height:1px;background:var(--line);border:0}
/* icon + text list row. NOT .row — .row wraps, which drops a long line of
   copy underneath its own bullet icon instead of beside it. */
.bullet{display:flex;gap:11px;align-items:flex-start;flex-wrap:nowrap}
.bullet > svg{flex:none;margin-top:6px}
.bullet > span{flex:1;min-width:0}
.on-dark .hr{background:rgba(159,187,219,.24)}

/* ═══ BUTTONS ══════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-thai);font-weight:500;font-size:15px;line-height:1;
  padding:15px 26px;border-radius:999px;transition:all .3s var(--ease);
  white-space:nowrap;
}
.btn svg{flex:none}
.btn-line{background:#06C755;color:#fff}
.btn-line:hover{background:#05b34c;transform:translateY(-1px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--navy);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line);color:var(--navy);background:var(--white)}
.btn-ghost:hover{border-color:var(--steel);background:var(--mist)}
.on-dark .btn-ghost{border-color:rgba(159,187,219,.4);color:var(--white);background:transparent}
.on-dark .btn-ghost:hover{border-color:var(--sky);background:rgba(159,187,219,.12)}
.btn-sm{padding:11px 19px;font-size:14px}

.link-arrow{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--f-thai);
  font-weight:500;font-size:14.5px;color:var(--navy);transition:gap .3s var(--ease)
}
.link-arrow:hover{gap:12px}
.on-dark .link-arrow{color:var(--sky)}

/* ═══ CARDS ════════════════════════════════════════════════════ */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,32px);transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)
}
a.card:hover{border-color:var(--steel);transform:translateY(-3px);box-shadow:0 14px 34px -20px rgba(10,30,56,.35)}
.on-dark .card{background:rgba(255,255,255,.05);border-color:rgba(159,187,219,.2)}
.on-dark a.card:hover{border-color:var(--sky);background:rgba(255,255,255,.08)}

.card-index{font-family:var(--f-sans);font-weight:600;font-size:12px;letter-spacing:.1em;color:var(--sky)}

/* ═══ NAVBAR ═══════════════════════════════════════════════════ */
.nav{position:sticky;top:0;z-index:60;background:rgba(247,249,252,.82);backdrop-filter:blur(14px);
     border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.nav-dark{background:rgba(10,30,56,.78);border-bottom-color:rgba(159,187,219,.2)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:22px;
     max-width:var(--max);margin-inline:auto;padding:13px var(--gut)}
.nav-logo{display:flex;align-items:center;gap:11px;flex:none}
.nav-logo .mark{height:38px;width:auto}
/* colour mark on light surfaces, flat white on dark ones */
.nav-logo .mark-w{display:none}
.nav-dark .nav-logo .mark-c,
.mobile-menu .nav-logo .mark-c,
.footer .nav-logo .mark-c{display:none}
.nav-dark .nav-logo .mark-w,
.mobile-menu .nav-logo .mark-w,
.footer .nav-logo .mark-w{display:block}
.nav-logo .wordmark{display:flex;flex-direction:column;line-height:1.08}
.nav-logo .wordmark b{font-family:var(--f-sans);font-weight:600;font-size:15px;letter-spacing:.02em}
.nav-logo .wordmark span{font-family:var(--f-sans);font-weight:400;font-size:9.5px;letter-spacing:.22em;color:var(--steel)}
.nav-dark .nav-logo .wordmark span{color:var(--sky)}

.nav-links{display:none;gap:clamp(16px,2vw,30px);align-items:center}
@media (min-width:1000px){.nav-links{display:flex}}
.nav-links a{font-family:var(--f-thai);font-weight:400;font-size:14.5px;color:var(--navy);
  position:relative;padding:6px 0;transition:color .25s var(--ease)}
.nav-dark .nav-links a{color:#E3ECF6}
.nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:currentColor;transition:right .35s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}

.nav-cta{display:none}
@media (min-width:1000px){.nav-cta{display:inline-flex}}
.nav-burger{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border:1px solid var(--line);border-radius:11px;color:var(--navy)}
.nav-dark .nav-burger{border-color:rgba(159,187,219,.3);color:#fff}
@media (min-width:1000px){.nav-burger{display:none}}

/* Treatments flyout (desktop) */
.has-flyout{position:relative}
.flyout{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  padding-top:14px;opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease)
}
.has-flyout:hover .flyout,.has-flyout:focus-within .flyout{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.flyout-inner{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 24px 60px -30px rgba(10,30,56,.45);padding:20px;
  display:grid;grid-template-columns:repeat(2,minmax(210px,1fr));gap:6px 22px
}
.flyout-inner .grp{font-family:var(--f-sans);font-weight:600;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel);padding:10px 10px 5px;grid-column:span 2}
.flyout-inner a{display:block;padding:9px 11px;border-radius:9px;font-family:var(--f-thai);
  font-weight:400;font-size:14.5px;color:var(--navy);transition:background .2s var(--ease)}
.flyout-inner a::after{display:none}
.flyout-inner a:hover{background:var(--mist)}

/* Mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:80;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.mobile-menu[hidden]{display:none}
.mobile-menu .mm-top{display:flex;align-items:center;justify-content:space-between;
  padding:13px var(--gut);border-bottom:1px solid rgba(159,187,219,.2);flex:none}
.mobile-menu nav{padding:12px var(--gut) 34px;flex:1}
.mobile-menu nav > a,.mm-acc-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:16px 0;border-bottom:1px solid rgba(159,187,219,.16);
  font-family:var(--f-thai);font-weight:400;font-size:18px;color:#fff;text-align:left}
.mm-sub{padding:2px 0 12px}
.mm-sub a{display:block;padding:10px 0 10px 16px;font-family:var(--f-thai);font-weight:300;
  font-size:15.5px;color:var(--body-dk)}
.mm-foot{padding:0 var(--gut) 40px;display:flex;flex-direction:column;gap:11px}

/* ═══ FOOTER ═══════════════════════════════════════════════════ */
.footer{background:var(--ink);color:var(--white);padding-block:clamp(52px,7vw,86px) 34px}
.footer a:hover{color:var(--sky)}
.footer-grid{display:grid;gap:clamp(30px,4vw,52px);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.footer h4{font-family:var(--f-sans);font-weight:600;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sky);margin-bottom:16px}
.footer li{margin-bottom:9px}
.footer li a,.footer li span{font-family:var(--f-thai);font-weight:300;font-size:14.5px;color:var(--body-dk)}
.footer-legal{margin-top:44px;padding-top:24px;border-top:1px solid rgba(159,187,219,.2);
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between}

/* Licence block — legally required, must stay legible, never tucked away */
.licence{background:rgba(255,255,255,.05);border:1px solid rgba(159,187,219,.22);
  border-radius:12px;padding:16px 18px;margin-top:20px}
.licence dt{font-family:var(--f-thai);font-weight:300;font-size:12.5px;color:var(--sky)}
.licence dd{font-family:var(--f-sans);font-weight:600;font-size:15px;margin:2px 0 12px;letter-spacing:.01em}
.licence dd:last-child{margin-bottom:0}

/* ═══ COMPONENTS ═══════════════════════════════════════════════ */

/* Trust bar — the three authorised brands. Text-only by design: we do NOT
   host Galderma/Menarini/UltraV logos without written permission. */
.trust{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}
.trust > *{background:var(--white);padding:26px 24px}
.trust b{display:block;font-family:var(--f-sans);font-weight:600;font-size:17px;letter-spacing:-.01em;margin-bottom:6px}
.trust p{font-family:var(--f-thai);font-weight:300;font-size:13.5px;line-height:1.8;color:var(--body)}
.trust .verify{margin-top:11px;font-family:var(--f-thai);font-weight:500;font-size:12.5px;color:var(--steel);
  display:inline-flex;align-items:center;gap:6px}

/* Stat row */
.stats{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,54px)}
.stats .n{display:block;font-family:var(--f-sans);font-weight:600;font-size:clamp(28px,3.4vw,40px);
  line-height:1;letter-spacing:-.025em}
/* long values (opening hours) must not force the stat row onto a second line */
.stats .n.n-sm{font-size:clamp(19px,1.9vw,24px);letter-spacing:-.01em}
.stats .l{display:block;font-family:var(--f-thai);font-weight:300;font-size:13px;margin-top:9px;color:var(--steel)}
.on-dark .stats .l{color:var(--sky)}

/* Symptom nav — "อาการแบบนี้ ใช่คุณไหม" */
.symptom{display:flex;flex-wrap:wrap;gap:10px}
.symptom a{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--white);font-family:var(--f-thai);font-weight:400;
  font-size:14.5px;color:var(--navy);transition:all .28s var(--ease)}
.symptom a:hover{border-color:var(--steel);background:var(--mist);transform:translateY(-2px)}

/* Treatment card */
.tcard{display:flex;flex-direction:column;height:100%}
.tcard .cat{font-family:var(--f-sans);font-weight:600;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel);margin-bottom:13px}
.tcard h3{margin-bottom:9px}
.tcard p{flex:1;margin-bottom:17px}
.tcard .meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.tcard .meta span{font-family:var(--f-thai);font-weight:300;font-size:12px;color:var(--steel);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.sig{position:relative}
.sig::before{content:'SIGNATURE';position:absolute;top:-1px;right:18px;
  font-family:var(--f-sans);font-weight:600;font-size:9.5px;letter-spacing:.16em;
  background:var(--ink);color:var(--sky);padding:5px 11px;border-radius:0 0 7px 7px}
/* on a dark spread the badge must invert, or it disappears into the section */
.on-dark .sig::before{background:var(--sky);color:var(--ink)}

/* Review card */
.rcard{display:flex;flex-direction:column;gap:13px;height:100%}
.rcard .stars{display:flex;gap:2px;color:#E8B23A}
.rcard blockquote{font-family:var(--f-thai);font-weight:300;font-size:15px;line-height:1.9;color:var(--body);flex:1}
.rcard .who{display:flex;align-items:center;gap:11px;padding-top:13px;border-top:1px solid var(--line)}
.rcard .who b{font-family:var(--f-thai);font-weight:500;font-size:14px;color:var(--ink)}
.rcard .who span{font-family:var(--f-thai);font-weight:300;font-size:12.5px;color:var(--steel)}
.rcard .avatar{width:36px;height:36px;border-radius:50%;background:var(--mist);flex:none;
  display:grid;place-items:center;font-family:var(--f-sans);font-weight:600;font-size:14px;color:var(--navy)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--f-thai);font-weight:500;font-size:16.5px;line-height:1.6;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:15px;height:15px;margin-top:6px;
  background:currentColor;transition:transform .3s var(--ease);
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");
          mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E")}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 0 24px;max-width:74ch}

/* Before/after — consent + results-vary disclaimer is NON-NEGOTIABLE */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);
  border-radius:12px;overflow:hidden}
.ba figure{position:relative;margin:0;background:var(--mist);aspect-ratio:3/4}
.ba figcaption{position:absolute;left:10px;top:10px;font-family:var(--f-sans);font-weight:600;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:rgba(10,30,56,.72);padding:5px 10px;border-radius:6px}
.ba-note{margin-top:12px;font-family:var(--f-thai);font-weight:300;font-size:12px;
  line-height:1.75;color:var(--steel)}

/* Placeholder for assets the client still owes us — deliberately visible,
   never a fake photo. Every one of these is listed in docs/RESEARCH.md §8. */
.todo{display:grid;place-items:center;gap:7px;background:repeating-linear-gradient(
    -45deg,var(--mist),var(--mist) 11px,#DDE7F2 11px,#DDE7F2 22px);
  border:1px dashed var(--steel);border-radius:12px;padding:30px 22px;text-align:center;min-height:170px}
.todo b{font-family:var(--f-sans);font-weight:600;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel)}
.todo span{font-family:var(--f-thai);font-weight:300;font-size:13px;color:var(--body);max-width:32ch}

/* Sticky consult bar — treatment pages, mobile only */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:9px;
  padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom));
  background:rgba(247,249,252,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.sticky-bar .btn{flex:1}
@media (min-width:860px){.sticky-bar{display:none}}
body.has-sticky-bar{padding-bottom:76px}
@media (min-width:860px){body.has-sticky-bar{padding-bottom:0}}

/* Marquee — pauses on hover and under reduced-motion */
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
         mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;gap:20px;width:max-content;animation:slide 62s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track > *{width:min(78vw,352px);flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee{overflow-x:auto}.marquee-track{animation:none}}

/* Scroll reveal.
   Scoped to .js — that class is added by a synchronous inline script at the top
   of <body>. If scripting is off, blocked, or the script 404s, the rule never
   applies and the content is simply visible. Content must never be able to end
   up permanently invisible because an animation hook failed: half a clinic
   homepage silently disappearing is a far worse outcome than no animation. */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none}}

/* Skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font-family:var(--f-thai);font-size:14px}
.skip:focus{left:0}

/* ═══════════════════════════════════════════════════════════════════════
   V2 — THE FILM LAYER
   The v1 layout was a stack of eyebrow + heading + card-grid sections with
   two-column blocks alternating left and right. That reads as a template.
   v2 replaces it with three section types and nothing else:
       .stage   full-bleed film, type sits ON the footage
       .say     one sentence, alone, on ink
       .index   a full-width list, no cards
   Nothing here alternates left/right, and no section is a boxed grid of
   equal cards. v1 classes stay defined until every page is converted.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --v-ease: cubic-bezier(.16,1,.3,1);
  --v-slow: 1.1s;
}

/* ─── full-bleed film stage ─────────────────────────────────────── */
.stage{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:clip;background:var(--ink);color:#fff;isolation:isolate}
.stage-short{min-height:78svh}
.stage-media{position:absolute;inset:0;z-index:-2}
.stage-media video,.stage-media img{width:100%;height:100%;object-fit:cover;display:block}
/* two-stop scrim: keeps type legible without flattening the footage */
.stage::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,30,56,.62) 0%,rgba(10,30,56,.18) 34%,rgba(10,30,56,.52) 72%,rgba(10,30,56,.92) 100%)}
.stage-inner{position:relative;width:100%;max-width:var(--max);margin-inline:auto;
  padding:0 var(--gut) clamp(38px,7vh,88px)}

/* ─── display type ──────────────────────────────────────────────── */
.d0{font-family:var(--f-display);font-weight:400;letter-spacing:-.022em;
  font-size:clamp(52px,10.5vw,168px);line-height:.88}
.d0-th{font-family:var(--f-thai);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(30px,5.6vw,86px);line-height:1.22}
/* line-by-line mask reveal; .is-in is set by motion.js */
.rise{display:block;overflow:hidden}
.rise > span{display:block;transform:translateY(105%);opacity:0;
  transition:transform 1.15s var(--v-ease),opacity .9s var(--v-ease)}
.is-in .rise > span{transform:none;opacity:1}
.rise:nth-of-type(2) > span{transition-delay:.09s}
.rise:nth-of-type(3) > span{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.rise > span{transform:none;opacity:1}}

/* ─── meta rail under a stage ───────────────────────────────────── */
.rail{display:flex;flex-wrap:wrap;gap:clamp(18px,3.4vw,46px);align-items:baseline;
  margin-top:clamp(26px,4vh,46px);padding-top:20px;border-top:1px solid rgba(255,255,255,.22)}
.rail div{display:flex;align-items:baseline;gap:9px}
.rail b{font-family:var(--f-sans);font-weight:600;font-size:clamp(17px,1.7vw,23px);letter-spacing:-.02em}
.rail span{font-family:var(--f-thai);font-weight:300;font-size:12.5px;color:rgba(255,255,255,.7)}

.cue{position:absolute;left:var(--gut);bottom:14px;display:flex;align-items:center;gap:10px;
  font-family:var(--f-sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);
  animation:cueDrop 2.4s var(--v-ease) infinite}
@keyframes cueDrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  46%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ─── the sentence-alone section ────────────────────────────────── */
.say{background:var(--ink);color:#fff;padding-block:clamp(96px,20vh,240px)}
.say .wrap{max-width:1180px}
.say p{font-family:var(--f-thai);font-weight:300;letter-spacing:-.015em;
  font-size:clamp(26px,4.4vw,64px);line-height:1.34;max-width:20ch}
.say .mark{font-family:var(--f-display);font-size:.62em;color:var(--sky);
  display:block;margin-bottom:.28em;letter-spacing:0}
.say-light{background:var(--bone);color:var(--ink)}
.say-light .mark{color:var(--steel)}

/* ─── pinned proof sequence ─────────────────────────────────────── */
.pin{position:relative}
.pin-sticky{position:sticky;top:0;height:100svh;overflow:clip;
  display:flex;align-items:center;background:var(--ink);color:#fff;isolation:isolate}
.pin-sticky .stage-media{opacity:.34}
.pin-sticky::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,30,56,.95),rgba(10,30,56,.55))}
.pin-steps > div{min-height:100svh}
.step{position:absolute;inset:0;display:flex;align-items:center;opacity:0;
  transition:opacity .55s var(--v-ease);pointer-events:none}
.step.on{opacity:1;pointer-events:auto}
.step-inner{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.step .n{font-family:var(--f-sans);font-weight:600;font-size:11px;letter-spacing:.24em;color:var(--sky)}
.step h3{font-family:var(--f-sans);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(40px,7vw,104px);line-height:1;margin:16px 0 18px}
.step p{font-family:var(--f-thai);font-weight:300;font-size:clamp(15px,1.35vw,18.5px);
  line-height:1.9;color:var(--body-dk);max-width:44ch}

/* ─── the index list (replaces the card grid) ───────────────────── */
.index{position:relative;background:var(--paper);isolation:isolate}
.index-bg{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .6s var(--v-ease);background:var(--ink)}
.index-bg.on{opacity:1}
.index-bg video,.index-bg img{width:100%;height:100%;object-fit:cover;opacity:.4}
.index.lit{background:var(--ink)}
.index-row{display:block;border-top:1px solid var(--line);padding:clamp(20px,3.2vh,34px) 0;
  transition:border-color .45s var(--v-ease),padding .45s var(--v-ease)}
.index-row:last-child{border-bottom:1px solid var(--line)}
.index.lit .index-row{border-color:rgba(159,187,219,.26)}
.index-head{display:flex;align-items:baseline;gap:clamp(14px,2.4vw,34px);flex-wrap:wrap}
.index-row .k{font-family:var(--f-sans);font-weight:600;font-size:11px;letter-spacing:.2em;
  color:var(--steel);flex:none;min-width:34px}
.index-row h3{font-family:var(--f-thai);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(24px,4vw,54px);line-height:1.16;transition:color .35s var(--v-ease),transform .55s var(--v-ease);flex:1}
.index.lit .index-row h3{color:rgba(255,255,255,.45)}
.index.lit .index-row.hot h3{color:#fff;transform:translateX(clamp(6px,1vw,18px))}
.index-row .tail{font-family:var(--f-thai);font-weight:300;font-size:13.5px;color:var(--steel);
  opacity:0;transition:opacity .4s var(--v-ease);max-width:34ch}
.index.lit .index-row.hot .tail{opacity:1;color:var(--sky)}
@media (hover:none){.index-row .tail{opacity:1}.index.lit .index-row h3{color:#fff}}

/* ─── horizontal gallery ────────────────────────────────────────── */
.hgal{display:flex;gap:clamp(10px,1.4vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hgal::-webkit-scrollbar{display:none}
.hgal > figure{flex:none;width:min(84vw,560px);scroll-snap-align:center;margin:0}
.hgal img{width:100%;border-radius:12px;display:block}
.hgal figcaption{font-family:var(--f-thai);font-weight:300;font-size:13px;color:var(--steel);margin-top:10px}
.hgal-cue{font-family:var(--f-sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--steel);display:flex;align-items:center;gap:10px}
.hgal-cue::after{content:'';flex:1;height:1px;background:var(--line);max-width:120px}

/* ─── single large quote ────────────────────────────────────────── */
.voice{background:var(--bone);padding-block:clamp(80px,16vh,190px)}
.voice blockquote{font-family:var(--f-thai);font-weight:300;letter-spacing:-.012em;
  font-size:clamp(21px,3.1vw,44px);line-height:1.5;max-width:24ch;margin:0}
.voice .who{font-family:var(--f-thai);font-weight:400;font-size:14px;color:var(--steel);margin-top:clamp(22px,4vh,40px)}
.voice-dots{display:flex;gap:7px;margin-top:26px}
.voice-dots button{width:26px;height:2px;background:var(--line);border-radius:2px;transition:background .3s}
.voice-dots button[aria-selected="true"]{background:var(--navy)}

/* ─── nav over film ─────────────────────────────────────────────── */
.nav-film{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
.nav-film .nav-links a,.nav-film .nav-logo .wordmark b{color:#fff}
.nav-film .nav-logo .wordmark span{color:rgba(255,255,255,.7)}
.nav-film .nav-burger{border-color:rgba(255,255,255,.35);color:#fff}

/* ─── mobile ────────────────────────────────────────────────────── */
@media (max-width:760px){
  .stage{min-height:92svh}
  .pin-sticky{height:92svh}
  .say p{max-width:none}
}

/* ═══ V2 refinements after the first full-page review ═════════════════
   The lower half dropped out of the film language into flat white panels
   with small type, so the page lost its momentum after the index. These
   rules carry the dark, edge-to-edge treatment through results and voice. */

/* a scrim behind the nav so links stay legible over bright footage */
.nav-film::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,30,56,.55),rgba(10,30,56,0))}
.nav-film{position:sticky;isolation:isolate}
.nav-film .nav-links a{color:#fff;text-shadow:0 1px 12px rgba(10,30,56,.5)}

/* opener: keep the meta rail clear of the fold on a 900px-tall laptop */
.stage-inner{padding-bottom:clamp(56px,9vh,104px)}
.stage .lead{text-wrap:pretty}

/* the sentence-alone section: control the break instead of letting Thai
   wrap one word onto its own line */
.say p{max-width:24ch;text-wrap:balance}
@media (min-width:900px){.say p{max-width:none;width:min(100%,19em)}}

/* results, now dark and edge to edge */
.reel{background:var(--ink);color:#fff;padding-block:clamp(70px,12vh,150px)}
.reel .hgal > figure{width:min(88vw,660px)}
.reel .hgal img{border-radius:14px}
.reel .hgal figcaption{color:var(--sky)}
.reel .hgal-cue{color:var(--sky)}
.reel .hgal-cue::after{background:rgba(159,187,219,.3)}
.reel .ba-note{color:rgba(213,225,239,.75)}

/* voice: one review, large enough to be the whole screen's job */
.voice{padding-block:clamp(92px,18vh,220px)}
.voice blockquote{font-size:clamp(24px,3.6vw,52px);line-height:1.42;max-width:20ch}
.voice [data-slide]{min-height:clamp(220px,30vh,340px)}

/* FAQ headings a touch larger so the section is not an afterthought */
.faq summary{font-size:clamp(16.5px,1.5vw,19px);padding-block:26px}

/* Pinned steps only stack on top of each other once JS is alive to switch
   between them. Without .js they lay out as ordinary blocks, so steps 2 and 3
   can never become permanently invisible. */
.step{position:static;opacity:1;pointer-events:auto}
.js .pin-sticky .step{position:absolute;inset:0;opacity:0;pointer-events:none}
.js .pin-sticky .step.on{opacity:1;pointer-events:auto}
:root:not(.js) .pin-sticky{position:static;height:auto;display:block;padding-block:clamp(60px,10vh,120px)}
:root:not(.js) .pin-steps{display:none}

/* On a phone the index row's flex squeezed the Thai title into a narrow
   column and broke it mid-word. Stack the parts instead. */
@media (max-width:820px){
  .index-head{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
  .index-row .k{grid-row:1}
  .index-row h3{grid-row:1;font-size:clamp(21px,5.6vw,30px)}
  .index-row .tail{grid-column:2;font-size:12.5px}
}