/* DIVA Skin Clinic Poipet — Homepage V13
   Tokens follow the DIVA corrected UI system: system font stack, accent #9b6f5c, text #1d1d1f.
   #86594a is the same accent darkened for text/button contrast (AA on white). */
:root{
  --ink:#1d1d1f;
  --muted:#5f6368;
  --paper:#ffffff;
  --porcelain:#f3f4f2;
  --line:#e2e4e1;
  --accent:#9b6f5c;
  --accent-strong:#86594a;
  --accent-wash:#f4ece8;
  --focus:#1d1d1f;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans Khmer","Noto Sans Thai","PingFang SC","Microsoft YaHei",sans-serif;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4.5rem;--s9:6.5rem;
  --r-sm:6px;--r-md:12px;
  --wrap:1180px;
  --header-h:64px;
  --bar-h:0px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--font);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--paper);padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-strong);text-underline-offset:.18em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0;font-weight:650}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s4)}
@media (min-width:720px){.wrap{padding:0 var(--s6)}}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:var(--s2) var(--s4);z-index:100}
.skip:focus{left:var(--s4);top:var(--s4)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.25rem;border-radius:var(--r-sm);font:inherit;font-weight:600;font-size:1rem;text-decoration:none;border:1px solid transparent;cursor:pointer;line-height:1.2;text-align:center}
.btn-primary{background:var(--accent-strong);color:#fff}
.btn-primary:hover{background:var(--ink);color:#fff}
.btn-secondary{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:#fff}
.btn-quiet{padding-left:0;padding-right:0;min-height:44px;color:var(--accent-strong);text-decoration:underline;background:none}
.btn svg{width:20px;height:20px;flex:none}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
@supports (backdrop-filter:blur(8px)){.site-header{background:rgba(255,255,255,.86);backdrop-filter:blur(10px)}}
.header-in{display:flex;align-items:center;gap:var(--s4);min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:650;letter-spacing:-.01em;margin-right:auto}
.brand img{width:67px;height:48px;border-radius:var(--r-sm);object-fit:cover}
.brand span{font-size:.95rem;line-height:1.2;max-width:9.5rem}
.nav{display:none}
.nav ul{display:flex;gap:1.1rem;list-style:none;margin:0;padding:0}
.nav a{white-space:nowrap;color:var(--ink);text-decoration:none;font-size:.93rem;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="true"]{border-bottom-color:var(--accent)}
.header-actions{display:flex;gap:var(--s2);align-items:center}
.header-actions .btn{min-height:42px;padding:.5rem .95rem;font-size:.9rem;white-space:nowrap}
.header-actions .btn-appt{display:none}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);cursor:pointer}
.menu-btn svg{width:22px;height:22px}
.header-actions .btn-primary{display:none}
.mobile-nav{border-top:1px solid var(--line);background:var(--paper)}
.mobile-nav[hidden]{display:none}
.mobile-nav ul{list-style:none;margin:0;padding:var(--s2) 0 var(--s4)}
.mobile-nav a{display:block;padding:.8rem 0;color:var(--ink);text-decoration:none;font-size:1.05rem;border-bottom:1px solid var(--line)}
.mobile-nav .btn{width:100%;margin-top:var(--s4)}
@media (min-width:1080px){
  .nav{display:block}
  .menu-btn,.mobile-nav{display:none!important}
  .header-actions .btn-primary{display:inline-flex}
}
@media (min-width:1440px){.header-actions .btn-appt{display:inline-flex}}

/* Section rhythm */
.section{padding:var(--s8) 0}
.section.tint{background:var(--porcelain)}
.section-head{max-width:46rem;margin-bottom:var(--s6)}
.section-head h2{font-size:clamp(1.65rem,1.2rem + 2vw,2.5rem)}
.section-head p{margin-top:var(--s3);color:var(--muted);font-size:1.075rem;max-width:40rem}
@media (min-width:900px){.section{padding:var(--s9) 0}}

/* Hero */
.hero{padding:var(--s6) 0 var(--s7)}
.hero-grid{display:grid;gap:var(--s6)}
.eyebrow{font-size:.95rem;color:var(--accent-strong);font-weight:600;margin-bottom:var(--s3)}
.hero h1{font-size:clamp(2.1rem,1.35rem + 3.3vw,3.7rem);letter-spacing:-.03em;max-width:18ch}
.hero-lede{margin-top:var(--s4);font-size:1.15rem;color:#3b3d40;max-width:36rem}
.trust{list-style:none;padding:0;margin:var(--s5) 0 0;display:flex;flex-wrap:wrap;gap:.5rem .75rem}
.trust li{display:flex;align-items:center;gap:.4rem;font-size:.95rem;color:var(--ink)}
.trust li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6);align-items:center}
.hero-ctas .btn{flex:1 1 220px}
.hero-ctas .btn-quiet{flex:0 0 auto}
.hero-note{margin-top:var(--s4);color:var(--muted);font-size:.95rem}
.hero-media{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--porcelain);aspect-ratio:4/3}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.hero-media figcaption{position:absolute;left:var(--s3);bottom:var(--s3);background:rgba(255,255,255,.92);padding:.3rem .6rem;border-radius:var(--r-sm);font-size:.82rem;color:var(--ink)}
@media (min-width:900px){
  .hero{padding:var(--s8) 0 var(--s8)}
  .hero-grid{grid-template-columns:1.15fr .85fr;align-items:center;gap:var(--s8)}
  .hero-media{aspect-ratio:4/5}
  .hero-ctas .btn{flex:0 0 auto}
}

/* Concern index — the signature element */
.concern-groups{display:grid;gap:var(--s7)}
.concern-group h3{font-size:1rem;font-weight:600;color:var(--muted);padding-bottom:var(--s3);border-bottom:2px solid var(--ink);letter-spacing:0}
.concern-list{list-style:none;margin:0;padding:0}
.concern-list li{border-bottom:1px solid var(--line)}
.concern-link{display:grid;grid-template-columns:1fr auto;gap:.25rem var(--s4);align-items:baseline;padding:var(--s4) 0;text-decoration:none;color:var(--ink)}
.concern-name{font-size:clamp(1.2rem,1rem + .9vw,1.6rem);font-weight:620;letter-spacing:-.02em;line-height:1.2}
.concern-desc{grid-column:1/-1;color:var(--muted);font-size:.98rem;max-width:34rem}
.concern-go{font-size:.9rem;font-weight:600;color:var(--accent-strong);white-space:nowrap}
.concern-link:hover .concern-name{color:var(--accent-strong)}
.concern-link:hover .concern-go{text-decoration:underline}
.concern-more[hidden]{display:none}
.concern-toggle{margin-top:var(--s5)}
@media (min-width:900px){
  .concern-groups{grid-template-columns:repeat(3,1fr);gap:var(--s6)}
  .concern-link{grid-template-columns:1fr}
  .concern-go{order:3}
}
.no-js .concern-more[hidden]{display:block}
.no-js .concern-toggle{display:none}

/* Why DIVA */
.why-grid{display:grid;gap:0;border-top:1px solid var(--line)}
.why-item{padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.why-item h3{font-size:1.15rem;letter-spacing:-.01em}
.why-item p{margin-top:var(--s2);color:var(--muted);max-width:32rem}
@media (min-width:760px){.why-grid{grid-template-columns:1fr 1fr;column-gap:var(--s7)}}
@media (min-width:1080px){.why-grid{grid-template-columns:repeat(3,1fr)}}

/* How it works — real sequence, so it is numbered */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);counter-reset:step}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5)}
.step-num{display:block;font-size:.9rem;font-weight:700;color:var(--accent-strong);margin-bottom:var(--s3)}
.step h3{font-size:1.15rem;letter-spacing:-.01em}
.step p{margin-top:var(--s2);color:var(--muted)}
.confirm-note{margin-top:var(--s6);padding:var(--s4) var(--s5);border-left:3px solid var(--accent);background:var(--paper);font-weight:600;max-width:44rem}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}

/* Treatment groups */
.treat-grid{display:grid;gap:var(--s3)}
.treat{display:block;padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;color:var(--ink);background:var(--paper)}
.treat:hover{border-color:var(--ink)}
.treat h3{font-size:1.1rem;letter-spacing:-.01em}
.treat p{margin-top:.25rem;color:var(--muted);font-size:.95rem}
.treat-also{margin-top:var(--s6);color:var(--muted);font-size:.98rem}
.treat-also a{margin-right:.9rem;display:inline-block;padding:.35rem 0}
@media (min-width:640px){.treat-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.treat-grid{grid-template-columns:repeat(3,1fr)}}
.anchor{display:block;height:0;overflow:hidden}

/* Pricing */
.price-grid{display:grid;gap:var(--s3)}
.price{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.price h3{font-size:1.1rem;letter-spacing:-.01em}
.price .price-amount{font-size:2.3rem;font-weight:650;letter-spacing:-.03em;margin-top:var(--s2);line-height:1.1}
.price p{margin-top:var(--s2);color:var(--muted);font-size:.97rem}
.price-explain{margin-top:var(--s5);max-width:44rem;color:#3b3d40}
.price-cta{margin-top:var(--s5)}
.fixed-prices{margin-top:var(--s7)}
.fixed-prices h3{font-size:1.2rem;margin-bottom:var(--s3)}
.fixed-table{width:100%;border-collapse:collapse;max-width:44rem}
.fixed-table th,.fixed-table td{text-align:left;padding:.8rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.fixed-table td{text-align:right;font-weight:600;white-space:nowrap;padding-left:var(--s4)}
.fixed-table th a{font-weight:500}
.fixed-note{margin-top:var(--s3);color:var(--muted);font-size:.93rem;max-width:44rem}
@media (min-width:640px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.price-grid{grid-template-columns:repeat(4,1fr)}}

/* Results */
.results{display:grid;gap:var(--s4) var(--s3);grid-template-columns:1fr 1fr}
.case{margin:0}
.case-img{border-radius:var(--r-md);overflow:hidden;background:var(--porcelain);aspect-ratio:1/1}
.case-img img{width:100%;height:100%;object-fit:contain}
.case figcaption{margin-top:var(--s3)}
.case-concern{font-weight:620;font-size:.98rem}
.case-meta{color:var(--muted);font-size:.9rem}
.results-more[hidden]{display:none}
.results-foot{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6);align-items:center}
.results-disclaimer{margin-top:var(--s4);color:var(--muted);font-size:.93rem;max-width:44rem}
@media (min-width:560px){.results{gap:var(--s5)}}
@media (min-width:960px){.results{grid-template-columns:repeat(4,1fr)}}
.no-js .results-more[hidden]{display:contents}
.no-js #resultsToggle{display:none}

/* Expectations */
.expect{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.expect li{padding:var(--s4) var(--s5);background:var(--paper);border-radius:var(--r-md);border:1px solid var(--line)}
.expect strong{display:block;font-size:1.05rem}
.expect span{color:var(--muted);font-size:.96rem}
@media (min-width:760px){.expect{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.expect{grid-template-columns:repeat(3,1fr)}}

/* Technology */
.tech{display:grid;gap:0;border-top:1px solid var(--line)}
.tech div{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.tech dt{font-weight:620}
.tech dd{margin:.2rem 0 0;color:var(--muted);font-size:.96rem}
.tech-msg{margin-top:var(--s5);font-weight:600;max-width:40rem}
@media (min-width:760px){.tech{grid-template-columns:1fr 1fr;column-gap:var(--s7)}}
@media (min-width:1080px){.tech{grid-template-columns:repeat(3,1fr)}}

/* Homecare */
#homecare{padding-top:0}
.homecare{display:grid;gap:var(--s5);padding:var(--s6);background:var(--accent-wash);border-radius:var(--r-md)}
.homecare h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem)}
.homecare p{max-width:40rem}
.homecare ul{margin:var(--s2) 0 0;padding-left:1.1rem;color:#3b3d40}
@media (min-width:900px){.homecare{grid-template-columns:1.2fr .8fr;align-items:end}}

/* Clinic / founder */
.clinic-grid{display:grid;gap:var(--s6)}
.founder{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.founder-name{font-size:1.3rem;font-weight:650;letter-spacing:-.01em}
.founder-role{color:var(--accent-strong);font-weight:600;margin-top:.15rem}
.founder p{margin-top:var(--s3);color:#3b3d40}
.clinic-photos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.clinic-photos figure{margin:0}
.clinic-photos .ph{border-radius:var(--r-md);overflow:hidden;background:var(--porcelain);aspect-ratio:3/4}
.clinic-photos .ph img{width:100%;height:100%;object-fit:cover}
.clinic-photos .wide{grid-column:1/-1}
.clinic-photos .wide .ph{aspect-ratio:16/9}
.clinic-photos figcaption{font-size:.88rem;color:var(--muted);margin-top:.4rem}
.clinic-facts{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;gap:.4rem}
.clinic-facts li{color:#3b3d40}
@media (min-width:900px){.clinic-grid{grid-template-columns:.9fr 1.1fr;align-items:start}}

/* Accordions (policies + FAQ) */
.acc{border-top:1px solid var(--line);max-width:52rem}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:var(--s4) 2.2rem var(--s4) 0;font-weight:600;font-size:1.05rem;position:relative}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:.35rem;top:50%;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.acc details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.acc .acc-body{padding:0 0 var(--s5);color:#3b3d40;max-width:44rem}
.acc .acc-body p+p,.acc .acc-body p+ul,.acc .acc-body ul+p{margin-top:var(--s3)}
.acc .acc-body ul{margin:var(--s2) 0 0;padding-left:1.1rem}
.acc .acc-body li+li{margin-top:.3rem}
.policy-source{margin-top:var(--s4);color:var(--muted);font-size:.92rem}

/* Contact */
.contact-grid{display:grid;gap:var(--s7)}
.channel-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.channel{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;color:var(--ink);background:var(--paper)}
.channel:hover{border-color:var(--ink)}
.channel.primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.channel.primary:hover{background:var(--ink);border-color:var(--ink)}
.channel svg{width:26px;height:26px;flex:none}
.channel strong{display:block;font-size:1.05rem}
.channel span{font-size:.92rem;opacity:.85}
.contact-meta{margin-top:var(--s5);color:var(--muted);font-size:.95rem}
.form{display:grid;gap:var(--s4);padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.form h3{font-size:1.25rem}
.form .form-intro{color:var(--muted);font-size:.96rem;margin-top:-.4rem}
.field{display:grid;gap:.35rem}
.field label,.field legend{font-weight:600;font-size:.95rem}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;padding:.7rem .8rem;border:1px solid #c9ccc8;border-radius:var(--r-sm);background:#fff;color:var(--ink);min-height:48px;width:100%}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
fieldset.field{border:0;padding:0;margin:0}
.radios{display:flex;gap:var(--s3);flex-wrap:wrap}
.radios label{display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border:1px solid #c9ccc8;border-radius:var(--r-sm);font-weight:500;cursor:pointer;min-height:44px}
.radios input{width:18px;height:18px;min-height:0;accent-color:var(--accent-strong)}
.row2{display:grid;gap:var(--s4)}
@media (min-width:560px){.row2{grid-template-columns:1fr 1fr}}
.form-status{padding:var(--s4);border-radius:var(--r-sm);font-weight:600}
.form-status[hidden]{display:none}
.form-status.ok{background:var(--accent-wash);color:var(--ink)}
.form-status.err{background:#fbeceb;color:#8a1f16}
.form-fine{font-size:.9rem;color:var(--muted)}
@media (min-width:960px){.contact-grid{grid-template-columns:.9fr 1.1fr;align-items:start}}

/* Footer */
.site-footer{background:var(--ink);color:#d9dbdc;padding:var(--s7) 0 var(--s6)}
.site-footer a{color:#fff}
.footer-grid{display:grid;gap:var(--s6)}
.footer-brand{font-weight:650;color:#fff;font-size:1.1rem}
.site-footer ul{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:.4rem}
.site-footer h2{font-size:.95rem;color:#fff;letter-spacing:0;font-weight:600}
.footer-legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid #3a3b3e;font-size:.88rem;color:#b3b6b8}
@media (min-width:760px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}

/* Mobile sticky conversion bar */
.convert-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-top:1px solid var(--line);padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom,0px));gap:.4rem;box-shadow:0 -4px 16px rgba(29,29,31,.06)}
.convert-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:52px;border-radius:var(--r-sm);text-decoration:none;font-size:.82rem;font-weight:600;color:var(--ink)}
.convert-bar a svg{width:22px;height:22px}
.convert-bar a.main{background:var(--accent-strong);color:#fff}
body.has-bar{--bar-h:68px}
@media (min-width:1080px){.convert-bar{display:none}body.has-bar{--bar-h:0px}}

/* Language switcher (hidden until approved languages exist) */
.lang[hidden]{display:none}
.lang select{font:inherit;font-size:.9rem;padding:.3rem .4rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;min-height:40px}