/* ═══ lx — editorial layer (1 ต.ค. 2569) ══════════════════════════════
   User: "awwwards-level", minimal + luxurious, same colours, no rows of
   boxes, no hero split left/right — and not just everything stacked.
   So the page is built from moves instead of containers: type at
   display size, a photograph that opens to full width, a statement
   that darkens as it is read, a pinned horizontal run of doctors, one
   giant numeral the steps pass over, a full-bleed film, the makers as
   a type index, a marquee, and a single orb to act on.

   Loaded only by pages with body.lx-page (after site.css). Motion is
   driven by /lx.js through classes and custom properties; without JS
   or with reduced motion every section renders in its final state.
   Fonts: Thai = Prompt only · English display = Boska · every numeral
   = Switzer (.num) · no uppercase anywhere (client rule). */

body.lx-page{--lx-ink:#05275B;--lx-blue:#1A4FA5;--lx-sky:#7495B5;--lx-mist:#B4CADD;
  --lx-cloud:#FCFDFE;--lx-hair:rgba(5,39,91,.14);--lx-mute:rgba(5,39,91,.56);
  --lx-ease:cubic-bezier(.16,1,.3,1);--lx-sec:clamp(88px,9vw,150px);
  background:var(--lx-cloud)}
/* the site-wide sky haze stays, but as a breath, not a wash */
body.v5.lx-page{background-color:var(--lx-cloud)}
body.lx-page .v5-amb{opacity:.3}
.lx{overflow:clip}
.lx section{position:relative}
/* site.css lifts the section after a hero into a dome — not here */
body.lx-page main > section[data-dark-hero] + section{border-radius:0;margin-top:0;
  padding-top:0;overflow:visible;z-index:auto}

/* ── shared type ──────────────────────────────────────────────── */
.lx-kicker{font-family:var(--f-sans);font-weight:500;font-size:11.5px;letter-spacing:.2em;
  color:var(--lx-sky);margin:0 0 clamp(22px,2.4vw,34px)}
.lx-kicker i{font-style:normal;margin:0 .5em;opacity:.6}
.lx-h2{font-family:var(--f-thai);font-weight:300;color:var(--lx-ink);
  font-size:clamp(30px,4.4vw,64px);line-height:1.28;letter-spacing:-.015em;margin:0;
  text-wrap:balance}
.lx-h2 em,.lx-display em{font-style:normal;color:var(--lx-sky)}
.lx-h2 em{display:block}
.lx-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-thai);
  font-weight:400;font-size:15px;color:var(--lx-ink);text-decoration:none;
  padding-bottom:6px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:background-size .5s var(--lx-ease),gap .4s var(--lx-ease)}
.lx-link:hover{gap:16px;background-size:30% 1px}

/* ── reveal ───────────────────────────────────────────────────── */
html.js .lx [data-lx="rise"]{opacity:0;transform:translate3d(0,34px,0);
  transition:opacity 1.1s var(--lx-ease) var(--d,0ms),transform 1.3s var(--lx-ease) var(--d,0ms)}
html.js .lx [data-lx="rise"].is-in{opacity:1;transform:none}

/* ── 1 · hero ─────────────────────────────────────────────────── */
body.lx-page .lx-hero{text-align:center;background:none;
  padding:clamp(96px,12vw,180px) var(--gut,24px) clamp(64px,7vw,110px)}
.lx-hero::before{content:"";position:absolute;inset:-20% -10% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 46% at 50% 38%,rgba(180,202,221,.42),transparent 70%),
             radial-gradient(30% 30% at 82% 12%,rgba(116,149,181,.16),transparent 70%)}
.lx-display{font-family:var(--f-thai);font-weight:300;color:var(--lx-ink);margin:0 auto;
  font-size:clamp(44px,8.2vw,128px);line-height:1.2;letter-spacing:-.025em;max-width:13em}
.lx-line{display:block}
.lx-display em{white-space:nowrap}
/* the clinic itself, set into the sentence */
.lx-pill{display:inline-block;width:1.7em;height:.78em;border-radius:999px;overflow:hidden;
  vertical-align:.02em;margin:0 .16em;background:#DCE6F2;
  box-shadow:0 18px 40px -22px rgba(5,39,91,.55);transform:translateZ(0)}
.lx-pill video{width:100%;height:100%;object-fit:cover;display:block}
.lx-en{font-family:'Boska',serif;font-weight:300;font-style:italic;color:var(--lx-blue);
  font-size:clamp(20px,2.1vw,32px);margin:clamp(20px,2.4vw,34px) 0 0}
.lx-meta{list-style:none;margin:clamp(40px,4.6vw,68px) auto 0;padding:0;display:flex;
  flex-wrap:wrap;justify-content:center;font-family:var(--f-thai);font-weight:300;
  font-size:14px;color:var(--lx-mute)}
.lx-meta li{padding:4px clamp(16px,2.2vw,30px)}
.lx-meta li + li{border-left:1px solid var(--lx-hair)}
.lx-meta .num{color:var(--lx-ink);font-weight:500}

/* ── 2 · the photograph opens to full width ───────────────────── */
.lx-expand{height:175vh}
.lx-expand-frame{position:sticky;top:0;height:100vh;height:100svh;margin:0;overflow:hidden;
  --q:calc(1 - var(--p,0));
  clip-path:inset(calc(var(--q) * 14%) calc(var(--q) * 21%) round calc(var(--q) * 36px))}
.lx-expand-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;
  transform:scale(calc(1.18 - var(--p,0) * .18));transform-origin:50% 40%}
.lx-expand-frame figcaption{position:absolute;left:0;right:0;bottom:clamp(26px,4vw,52px);
  text-align:center;font-family:var(--f-thai);font-weight:300;font-size:15px;color:#fff;
  opacity:calc((var(--p,0) - .7) * 3.4);text-shadow:0 1px 18px rgba(5,39,91,.5)}
.lx-expand-frame figcaption .num{font-size:12px;letter-spacing:.14em;margin-right:10px;opacity:.85}
.lx-expand-frame::after{content:"";position:absolute;inset:auto 0 0;height:34%;pointer-events:none;
  background:linear-gradient(transparent,rgba(5,39,91,.36));opacity:calc(var(--p,0) * 1.2)}

/* ── 3 · statement ────────────────────────────────────────────── */
.lx-statement{text-align:center;padding:var(--lx-sec) var(--gut,24px)}
.lx-words{font-family:var(--f-thai);font-weight:300;color:var(--lx-ink);margin:0 auto;
  font-size:clamp(24px,3.3vw,48px);line-height:1.62;letter-spacing:-.01em;max-width:21em;
  text-wrap:pretty}
html.js .lx-words .w{color:rgba(5,39,91,.14);transition:color .5s var(--lx-ease)}
html.js .lx-words .w.on{color:var(--lx-ink)}

/* ── 4 · doctors: pinned horizontal run ───────────────────────── */
.lx-hs{background:linear-gradient(180deg,var(--lx-cloud),#EEF4FB 40%,#EEF4FB 70%,var(--lx-cloud))}
.lx-hs-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);padding-top:clamp(88px,9vh,120px)}
.lx-hs-head{text-align:center;padding:0 var(--gut,24px)}
.lx-hs-head .lx-h2{font-size:clamp(26px,3.2vw,46px)}
.lx-hs-head .lx-h2 em{display:inline}
.lx-count{margin:14px 0 0;font-size:13px;color:var(--lx-sky);letter-spacing:.1em}
.lx-count .num + .num{margin-left:6px;opacity:.6}
.lx-hs-track{display:flex;align-items:flex-end;gap:clamp(36px,4.4vw,80px);
  padding:clamp(20px,3vh,40px) max(var(--gut,24px),calc(50vw - 170px)) clamp(28px,5vh,56px);
  will-change:transform;transform:translate3d(calc(var(--x,0) * -1px),0,0)}
.lx-doc{flex:none;width:clamp(240px,22vw,320px);text-align:center}
.lx-doc-shot{position:relative;aspect-ratio:3/3.9;border-radius:999px 999px 22px 22px;overflow:hidden;
  background:linear-gradient(180deg,#F7FAFE 0%,#DCE8F6 62%,#C9DAEE 100%);margin:0 0 22px;
  height:min(46vh,calc(clamp(240px,22vw,320px) * 1.3));width:auto;margin-inline:auto}
.lx-doc-shot img{position:absolute;left:50%;bottom:0;height:94%;width:auto;max-width:none;
  transform:translateX(-50%);transition:transform 1.2s var(--lx-ease)}
.lx-doc:hover .lx-doc-shot img{transform:translateX(-50%) scale(1.035)}
.lx-doc-i{font-size:11.5px;letter-spacing:.16em;color:var(--lx-sky);margin:0 0 8px}
.lx-doc-n{font-family:var(--f-thai);font-weight:400;font-size:clamp(16px,1.25vw,19px);
  line-height:1.5;color:var(--lx-ink);margin:0}
.lx-doc-r{font-family:var(--f-thai);font-weight:300;font-size:13.5px;color:var(--lx-mute);margin:4px 0 0}
.lx-doc-l{font-family:var(--f-thai);font-weight:300;font-size:12.5px;line-height:1.7;
  color:var(--lx-mute);margin:8px auto 0;max-width:26em}
.lx-doc-v{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-family:var(--f-thai);
  font-size:12.5px;color:var(--lx-blue);text-decoration:none;border-bottom:1px solid rgba(26,79,165,.3);
  padding-bottom:2px}
.lx-doc-v:hover{border-bottom-color:var(--lx-blue)}

/* ── 5 · steps over one giant numeral ─────────────────────────── */
.lx-steps{padding:var(--lx-sec) var(--gut,24px) calc(var(--lx-sec) * .6);text-align:center}
.lx-steps-num{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;
  display:grid;place-items:center;pointer-events:none;z-index:0}
.lx-steps-num span.num{font-family:var(--f-sans);font-weight:300;line-height:1;letter-spacing:-.06em;
  font-size:clamp(220px,46vh,520px);color:transparent;
  -webkit-text-stroke:1.2px rgba(116,149,181,.42)}
.lx-steps-head,.lx-steps-list{position:relative;z-index:1}
.lx-steps-head{margin-bottom:clamp(40px,8vh,90px)}
.lx-steps-list{list-style:none;margin:0 auto;padding:0;max-width:30em}
.lx-steps-list li{min-height:62vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.18;transition:opacity .7s var(--lx-ease)}
html:not(.js) .lx-steps-list li,.lx-steps-list li.on{opacity:1}
.lx-step-i{font-size:12px;letter-spacing:.18em;color:var(--lx-sky);margin:0 0 14px}
.lx-steps-list h3{font-family:var(--f-thai);font-weight:300;color:var(--lx-ink);
  font-size:clamp(32px,4.4vw,62px);line-height:1.25;margin:0 0 18px}
.lx-steps-list p:not(.lx-step-i){font-family:var(--f-thai);font-weight:300;font-size:clamp(15.5px,1.25vw,18px);
  line-height:1.95;color:#2B3F5C;margin:0 auto;max-width:26em}

/* ── 6 · authenticity ─────────────────────────────────────────── */
.lx-auth{padding:0 0 var(--lx-sec);text-align:center}
.lx-auth-film{position:relative;margin:0;height:min(92vh,960px);overflow:hidden;
  clip-path:inset(9% 7% round 32px);transition:clip-path 1.6s var(--lx-ease)}
html:not(.js) .lx-auth-film,.lx-auth-film.is-in{clip-path:inset(0 0 round 0)}
.lx-auth-film video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12);
  transition:transform 2.2s var(--lx-ease)}
.lx-auth-film.is-in video{transform:scale(1)}
.lx-auth-film::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,39,91,.08) 0%,rgba(5,39,91,.18) 40%,rgba(5,39,91,.72) 100%)}
.lx-auth-film figcaption{position:absolute;left:0;right:0;bottom:clamp(44px,8vh,96px);z-index:1;padding:0 var(--gut,24px)}
.lx-auth-film .lx-kicker{color:rgba(255,255,255,.78)}
.lx-auth-film .lx-h2{color:#fff}
.lx-auth-film .lx-h2 em{color:var(--lx-mist)}
.lx-auth-note{font-family:var(--f-thai);font-weight:300;font-size:13px;color:var(--lx-mute);
  margin:18px auto 0;padding:0 var(--gut,24px)}
.lx-promise{list-style:none;padding:0 var(--gut,24px);margin:clamp(80px,9vw,140px) auto 0;
  max-width:1120px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.lx-promise li{font-family:var(--f-thai);font-weight:300;font-size:clamp(16px,1.35vw,20px);
  line-height:1.8;color:var(--lx-ink);padding:0 clamp(20px,3vw,48px)}
.lx-promise li + li{border-left:1px solid var(--lx-hair)}
.lx-promise .num{display:block;font-family:'Boska',serif;font-style:italic;font-weight:300;
  font-size:26px;color:var(--lx-sky);margin-bottom:12px;letter-spacing:0}
.lx-makers-k{margin-top:clamp(96px,11vw,160px)}
.lx-makers{list-style:none;margin:0 auto;padding:0 var(--gut,24px);max-width:1200px;
  border-bottom:1px solid var(--lx-hair)}
.lx-makers a{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:6px 24px;padding:clamp(22px,2.6vw,36px) clamp(8px,1.6vw,24px);text-decoration:none;
  border-top:1px solid var(--lx-hair);overflow:hidden;isolation:isolate;text-align:left}
.lx-makers a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lx-ink);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .7s var(--lx-ease)}
.lx-makers a:hover::before,.lx-makers a:focus-visible::before{transform:scaleY(1)}
.lx-mk-n{font-family:'Boska',serif;font-weight:300;font-size:clamp(40px,6.4vw,104px);line-height:1;
  color:var(--lx-ink);letter-spacing:-.02em;transition:color .5s,transform .7s var(--lx-ease)}
.lx-mk-p{grid-column:1;font-family:var(--f-thai);font-weight:300;font-size:14px;color:var(--lx-mute);
  transition:color .5s}
.lx-mk-a{grid-row:1/span 2;grid-column:2;font-size:clamp(28px,3vw,44px);color:var(--lx-sky);
  transition:color .5s,transform .7s var(--lx-ease)}
.lx-makers a:hover .lx-mk-n,.lx-makers a:focus-visible .lx-mk-n{color:#fff;transform:translateX(14px)}
.lx-makers a:hover .lx-mk-p,.lx-makers a:focus-visible .lx-mk-p{color:var(--lx-mist)}
.lx-makers a:hover .lx-mk-a,.lx-makers a:focus-visible .lx-mk-a{color:#fff;transform:rotate(45deg)}

/* ── 7 · marquee ──────────────────────────────────────────────── */
.lx-marquee{overflow:hidden;border-block:1px solid var(--lx-hair);padding:clamp(18px,2.4vw,34px) 0;
  white-space:nowrap}
.lx-marquee-t{display:inline-flex;align-items:center;gap:clamp(24px,3vw,48px);
  animation:lx-mq 46s linear infinite;padding-right:clamp(24px,3vw,48px)}
.lx-marquee-t span{font-family:'Boska',serif;font-weight:300;font-style:italic;color:var(--lx-ink);
  font-size:clamp(40px,7vw,112px);line-height:1.1}
.lx-marquee-t i{font-style:normal;color:var(--lx-sky);font-size:clamp(20px,2.6vw,40px)}
@keyframes lx-mq{to{transform:translateX(-50%)}}

/* ── 8 · facts ────────────────────────────────────────────────── */
.lx-facts{text-align:center;padding:var(--lx-sec) var(--gut,24px)}
.lx-facts-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(56px,6vw,96px) auto;
  max-width:1180px}
.lx-facts-row > div{padding:0 clamp(16px,2.6vw,40px)}
.lx-facts-row > div + div{border-left:1px solid var(--lx-hair)}
.lx-facts-row dt{font-family:var(--f-thai);font-weight:300;font-size:13.5px;color:var(--lx-mute);margin:0 0 18px}
.lx-facts-row dd{margin:0;font-family:var(--f-sans);font-weight:300;letter-spacing:-.04em;
  color:var(--lx-ink);font-size:clamp(34px,4.6vw,76px);line-height:1}

/* ── 9 · CTA ──────────────────────────────────────────────────── */
.lx-cta{text-align:center;padding:var(--lx-sec) var(--gut,24px) calc(var(--lx-sec) * 1.1);
  background:radial-gradient(52% 60% at 50% 70%,rgba(180,202,221,.38),transparent 72%)}
.lx-cta-h{font-family:var(--f-thai);font-weight:300;color:var(--lx-ink);margin:0;
  font-size:clamp(48px,9vw,148px);line-height:1.12;letter-spacing:-.03em}
.lx-cta-p{font-family:var(--f-thai);font-weight:300;font-size:clamp(15.5px,1.3vw,18px);color:#2B3F5C;
  max-width:30em;margin:clamp(22px,2.4vw,32px) auto 0;line-height:1.9}
.lx-orb{display:inline-grid;place-items:center;width:clamp(150px,13vw,200px);aspect-ratio:1;
  border-radius:50%;margin-top:clamp(44px,5vw,72px);background:var(--lx-ink);color:#fff;
  text-decoration:none;font-family:var(--f-thai);font-weight:400;font-size:15px;line-height:1.5;
  box-shadow:0 30px 60px -30px rgba(5,39,91,.7);
  transform:translate3d(var(--mx,0),var(--my,0),0);transition:transform .6s var(--lx-ease),background .4s}
.lx-orb span{display:grid;justify-items:center;gap:8px;transform:translate3d(calc(var(--mx,0) * .35),calc(var(--my,0) * .35),0);
  transition:transform .6s var(--lx-ease)}
.lx-orb:hover{background:var(--lx-blue)}
.lx-orb:focus-visible{outline:2px solid var(--lx-blue);outline-offset:6px}

/* ── About hero: the five doctors, words fade in over the scrubs ──
   The faces sit in the top ~46% of team-scrubs; the words live in the
   bottom band only and the shade starts below the faces. Overlay only
   on landscape screens — on portrait a cover-crop cuts the doctors at
   either end, so there the photo is shown whole and the words follow. */
.lx-banner{position:relative;overflow:hidden;background:#F4F7FB}
.lx-banner-shot{margin:0}
.lx-banner-shot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;
  animation:lx-settle 2.6s var(--lx-ease) both}
.lx-banner-copy{text-align:center;padding:clamp(36px,6vw,64px) var(--gut,24px) 0}
.lx-banner-h{font-family:var(--f-thai);font-weight:300;color:var(--lx-ink);margin:0;
  font-size:clamp(32px,8.4vw,56px);line-height:1.25;letter-spacing:-.02em}
.lx-banner .lx-en{margin-top:12px}
.lx-banner .lx-meta{margin-top:26px}
.lx-fade{animation:lx-fade 1.8s var(--lx-ease) var(--d,0ms) both}
@keyframes lx-fade{from{opacity:0;filter:blur(10px);transform:translate3d(0,14px,0)}
  to{opacity:1;filter:none;transform:none}}
@keyframes lx-settle{from{transform:scale(1.06);opacity:.4}to{transform:none;opacity:1}}
@media (min-aspect-ratio:13/10) and (min-width:900px){
  .lx-banner{height:calc(100svh - 70px);min-height:540px;max-height:1040px}
  .lx-banner-shot,.lx-banner-shot img{position:absolute;inset:0;width:100%;height:100%}
  .lx-banner-shot img{object-fit:cover;object-position:50% 60%;aspect-ratio:auto}
  .lx-banner-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 0 56%,rgba(5,39,91,.42) 78%,rgba(5,39,91,.74) 100%)}
  .lx-banner-copy{position:absolute;left:0;right:0;bottom:clamp(28px,5.4vh,64px);padding-top:0}
  body.lx-page .lx-banner .lx-kicker{color:rgba(255,255,255,.78);margin-bottom:14px}
  body.lx-page .lx-banner .lx-banner-h{color:#fff;font-size:min(4.4vw,7.4vh);text-shadow:0 2px 30px rgba(5,39,91,.35)}
  .lx-banner .lx-en{color:#DCE6F2;font-size:min(1.9vw,3.2vh);margin-top:min(1.2vw,1.6vh)}
  .lx-banner .lx-meta{color:rgba(255,255,255,.78);margin-top:min(2vw,2.8vh)}
  .lx-banner .lx-meta li + li{border-left-color:rgba(255,255,255,.3)}
  .lx-banner .lx-meta .num{color:#fff}
}
/* short landscape screens: drop the fact row so the words stay low */
@media (min-aspect-ratio:13/10) and (min-width:900px) and (max-height:760px){
  .lx-banner .lx-meta{display:none}
}

/* ── About doctors: all five, one row, no scrolling ───────────── */
.lx-team{text-align:center;padding:var(--lx-sec) var(--gut,24px)}
.lx-team-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,34px);
  max-width:1320px;margin:clamp(44px,5vw,76px) auto 0;align-items:start}
.lx-team .lx-doc{width:auto}
.lx-team .lx-doc-shot{height:auto;width:100%;margin-bottom:18px}
.lx-team .lx-doc-n{font-size:clamp(14px,1.05vw,16.5px)}
.lx-team .lx-doc-l{font-size:12px}

/* ── About steps: one compact row ─────────────────────────────── */
.lx-way{text-align:center;padding:clamp(72px,7vw,120px) var(--gut,24px)}
.lx-way-row{list-style:none;padding:0;margin:clamp(40px,4.4vw,64px) auto 0;max-width:1240px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.lx-way-row li{border-top:1px solid var(--lx-hair);padding-top:clamp(20px,2vw,28px)}
.lx-way-row .num{display:block;font-family:var(--f-sans);font-weight:300;color:var(--lx-sky);
  font-size:clamp(30px,2.8vw,42px);letter-spacing:-.03em;line-height:1;margin-bottom:16px}
.lx-way-row h3{font-family:var(--f-thai);font-weight:400;color:var(--lx-ink);
  font-size:clamp(17px,1.35vw,20px);line-height:1.5;margin:0 0 10px}
.lx-way-row p{font-family:var(--f-thai);font-weight:300;font-size:14.5px;line-height:1.85;
  color:#2B3F5C;margin:0 auto;max-width:22em}

/* ── phones / tablets ─────────────────────────────────────────── */
@media (max-width:899px){
  .lx-display{font-size:clamp(40px,11.6vw,72px);line-height:1.24}
  .lx-meta{flex-direction:column;gap:6px}
  .lx-meta li + li{border-left:0}
  .lx-expand{height:150vh}
  .lx-expand-frame{clip-path:inset(calc(var(--q) * 16%) calc(var(--q) * 8%) round calc(var(--q) * 24px))}
  /* the run scrolls natively on touch — no pin */
  .lx-hs{height:auto!important}
  .lx-hs-pin{position:static;height:auto;padding-block:var(--lx-sec) 0}
  .lx-hs-track{transform:none;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:36px var(--gut,24px) 48px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lx-hs-track::-webkit-scrollbar{display:none}
  .lx-doc{width:72vw;scroll-snap-align:center}
  .lx-doc-shot{height:auto;width:100%}
  .lx-steps-list li{min-height:52vh}
  .lx-steps-num span.num{font-size:min(62vw,46vh)}
  .lx-promise,.lx-facts-row{grid-template-columns:minmax(0,1fr)}
  .lx-promise li + li,.lx-facts-row > div + div{border-left:0;border-top:1px solid var(--lx-hair)}
  .lx-promise li{padding:28px 0}
  .lx-facts-row > div{padding:30px 0}
  .lx-auth-film{height:78vh;clip-path:inset(6% 4% round 22px)}
  .lx-mk-p{font-size:13px}
  .lx-team-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .lx-team-row > :last-child{grid-column:1/-1;width:calc(50% - 8px);margin-inline:auto}
  .lx-way-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
}
@media (max-width:520px){
  .lx-way-row{grid-template-columns:minmax(0,1fr)}
}

/* ── less motion: every section in its final state ────────────── */
@media (prefers-reduced-motion:reduce){
  .lx-fade,.lx-banner-shot img{animation:none}
  .lx-expand{height:auto}
  .lx-expand-frame{position:relative;height:70vh;clip-path:none}
  .lx-expand-frame img{transform:none}
  .lx-expand-frame figcaption,.lx-expand-frame::after{opacity:1}
  .lx-hs{height:auto!important}
  .lx-hs-pin{position:static;height:auto;padding-block:var(--lx-sec) 0}
  .lx-hs-track{transform:none;overflow-x:auto;padding-inline:var(--gut,24px)}
  .lx-steps-list li{opacity:1;min-height:0;padding:48px 0}
  .lx-steps-num{display:none}
  .lx-marquee-t{animation:none}
  html.js .lx [data-lx="rise"]{opacity:1;transform:none;transition:none}
  html.js .lx-words .w{color:var(--lx-ink)}
  .lx-auth-film{clip-path:none}
}

/* ── Treatments hero: centred words, three real clips as the index ──
   The three panels are the clinic's own footage of its doctors at work
   (svc-clip-*), one per category, each a link to its section. The
   middle one sits lower — a rhythm, not a grid of boxes. */
.lx-thero{text-align:center;padding:clamp(72px,8.4vw,124px) var(--gut,24px) clamp(80px,8vw,128px)}
.lx-thero::before{content:"";position:absolute;inset:-10% -10% 30%;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 50% at 50% 30%,rgba(180,202,221,.4),transparent 70%)}
body.lx-page .lx-thero-h{font-family:var(--f-thai);font-weight:300;color:var(--lx-ink);margin:0;
  font-size:clamp(34px,5.4vw,80px);line-height:1.22;letter-spacing:-.025em}
.lx-thero-h em{display:block;font-style:normal;color:var(--lx-sky)}
.lx-thero .lx-en{margin-top:clamp(14px,1.6vw,22px)}
.lx-thero-p{font-family:var(--f-thai);font-weight:300;font-size:clamp(15.5px,1.25vw,18px);line-height:1.9;
  color:#2B3F5C;max-width:34em;margin:clamp(18px,2vw,26px) auto 0;text-wrap:balance}
.lx-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,28px);
  max-width:1080px;margin:clamp(52px,5.6vw,84px) auto 0;align-items:start}
.lx-tri-i{position:relative;display:block;aspect-ratio:3/4;border-radius:22px;overflow:hidden;
  isolation:isolate;text-decoration:none;background:#DCE6F2;
  box-shadow:0 40px 80px -48px rgba(5,39,91,.55)}
.lx-tri-i:nth-child(2){margin-top:clamp(28px,4vw,64px)}
.lx-tri-i video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--lx-ease)}
.lx-tri-i::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgba(5,39,91,.68) 100%)}
.lx-tri-l{position:absolute;left:0;right:0;bottom:clamp(18px,2vw,28px);z-index:2;display:grid;
  justify-items:center;gap:4px;color:#fff;padding:0 14px}
.lx-tri-l .num{font-size:11.5px;letter-spacing:.18em;color:rgba(255,255,255,.7)}
.lx-tri-l b{font-family:var(--f-thai);font-weight:400;font-size:clamp(17px,1.5vw,22px);line-height:1.4}
.lx-tri-l small{font-family:var(--f-thai);font-weight:300;font-size:13px;color:#DCE6F2}
.lx-tri-i:hover video{transform:scale(1.045)}
.lx-tri-i:focus-visible{outline:2px solid var(--lx-blue);outline-offset:4px}
@media (max-width:899px){
  .lx-tri{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:68vw;overflow-x:auto;
    scroll-snap-type:x mandatory;margin-inline:calc(var(--gut,24px) * -1);padding:0 var(--gut,24px) 8px;
    scrollbar-width:none}
  .lx-tri::-webkit-scrollbar{display:none}
  .lx-tri-i{scroll-snap-align:center}
  .lx-tri-i:nth-child(2){margin-top:0}
}