/* Layout: navy sunset hero → white content bands → aqua wave into navy footer. Single brand look, set explicitly. */
:root{
  --navy:#0B1F3A; --navy-2:#132D52; --coral:#FF6B4A; --sun:#FFC93C; --aqua:#14B8A6; --aqua-d:#0E9488;
  --paper:#FFFFFF; --sand:#FFF6E8; --ink:#0B1F3A; --muted:#51627A; --line:#E6E9EF;
  --f-script:"Pacifico",cursive; --f-body:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif; --f-thai:"Prompt","Poppins",system-ui,sans-serif;
  --wrap:1120px; color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.65}
a{color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}
h1,h2,h3{line-height:1.15;text-wrap:balance;margin:0}
h2{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em}
h3{font-size:18px;font-weight:700}
p{margin:0}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--coral)}
.script{font-family:var(--f-script);font-weight:400}
.thai{font-family:var(--f-thai)}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--navy);color:var(--paper);border-bottom:1px solid rgba(255,255,255,.08)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:44px;height:44px}
.brand span{font-family:var(--f-script);font-size:20px;line-height:1}
nav.links{display:flex;gap:22px;font-size:14px;font-weight:500}
nav.links a{text-decoration:none;opacity:.85}
nav.links a:hover{opacity:1;color:var(--sun)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 22px;font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-coral{background:var(--coral);color:var(--paper)}
.btn-coral:hover{background:#ff5a35}
.btn-ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.top .btn{padding:9px 18px;font-size:14px}
@media (max-width:860px){nav.links{display:none}}

/* hero */
.hero{background:var(--navy);color:var(--paper);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-block:72px 120px}
.hero h1{font-size:clamp(34px,5.4vw,60px);font-weight:800;letter-spacing:-.025em;margin-top:14px}
.hero h1 .script{color:var(--sun);font-size:1.05em;letter-spacing:0}
.hero .lede{margin-top:20px;font-size:18px;color:#C9D3E3;max-width:56ch}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.sunset{position:relative;justify-self:center;width:min(100%,400px);aspect-ratio:1;max-width:100%}
.sunset .disc{position:absolute;inset:0;border-radius:50%;background:linear-gradient(180deg,#FF8F6B 0%,var(--sun) 58%,#FFE7A0 100%);overflow:hidden}
.sunset .disc::before{content:"";position:absolute;left:28%;right:28%;top:52%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.5)}
.sunset .sea{position:absolute;left:0;right:0;bottom:0;height:38%}
.sunset .card{position:absolute;left:-8%;bottom:6%;background:var(--paper);color:var(--ink);border-radius:16px;padding:16px 18px;box-shadow:0 18px 40px rgba(0,0,0,.28);width:min(270px,80%)}
.card .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.card dl{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}
.card dt{color:var(--muted)}
.card dd{margin:0;font-weight:600}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--aqua-d);margin-top:10px}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--aqua)}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:70px;display:block}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;padding-block:48px 96px}.sunset{width:min(100%,320px)}.sunset .card{left:0}}

/* sections */
section{padding-block:88px}
.head{display:grid;gap:12px;max-width:680px;margin-bottom:44px}
.head p{color:var(--muted);font-size:17px}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.why article{display:grid;gap:10px;align-content:start}
.why .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--sand)}
.why p{color:var(--muted);font-size:15px}
@media (max-width:860px){.why{grid-template-columns:1fr}}

.steps-band{background:var(--sand)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.steps li{background:var(--paper);border-radius:18px;padding:24px;display:grid;gap:8px;align-content:start;counter-increment:s;position:relative}
.steps li::before{content:counter(s);font-family:var(--f-script);font-size:30px;color:var(--coral);line-height:1}
.steps p{color:var(--muted);font-size:14.5px}
.steps .who{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aqua-d)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}

.comp{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:15.5px}
.checks svg{margin-top:3px}
.docs{background:var(--navy);color:var(--paper);border-radius:22px;padding:30px}
.docs h3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.docs h3 small{font-weight:500;font-size:12px;color:var(--sun);letter-spacing:.1em;text-transform:uppercase}
.docs ol{margin:18px 0 0;padding-left:22px;display:grid;gap:9px;color:#D5DDEA;font-size:14.5px}
.docs .cite{margin-top:18px;font-size:12.5px;color:#9FB0C8}
.docs .cite a{color:var(--sun)}
@media (max-width:860px){.comp{grid-template-columns:1fr}}

.notice{background:var(--sun);color:var(--navy)}
.notice .wrap{display:grid;grid-template-columns:auto 1fr;gap:20px 28px;align-items:center;padding-block:34px}
.notice .tag{font-family:var(--f-script);font-size:28px;line-height:1}
.notice p{font-size:15.5px;max-width:80ch}
.notice p + p{margin-top:6px}
.notice .thai{font-size:15px}
@media (max-width:700px){.notice .wrap{grid-template-columns:1fr}}

.leader{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:center}
.portrait{aspect-ratio:1;border-radius:50%;background:linear-gradient(180deg,#FF8F6B,var(--sun));display:grid;place-items:center;max-width:100%;position:relative;overflow:hidden}
.portrait span{font-family:var(--f-script);font-size:72px;color:var(--navy)}
.leader .role{color:var(--coral);font-weight:600;margin-top:4px}
.leader p.bio{margin-top:16px;color:var(--muted);max-width:62ch}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.facts span{background:var(--sand);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500}
@media (max-width:760px){.leader{grid-template-columns:1fr}.portrait{width:200px}}

footer{background:var(--navy);color:var(--paper);position:relative}
.foot-wave{display:block;width:100%;height:60px;background:var(--paper)}
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;padding-block:56px 40px;align-items:start}
.contact h2 .script{color:var(--sun)}
.contact p{color:#C9D3E3;margin-top:14px;max-width:52ch}
.mail{background:var(--navy-2);border-radius:18px;padding:22px;display:grid;gap:14px}
.mail .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9FB0C8;font-weight:600}
.mail .addr{font-size:clamp(16px,2.4vw,19px);font-weight:600;word-break:break-all;user-select:all}
.mail .row{display:flex;flex-wrap:wrap;gap:10px}
.mail .loc{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px;color:#C9D3E3}
.mail .loc b{color:var(--paper);font-weight:600}
.copied{font-size:13px;color:var(--sun);align-self:center}
.legal{border-top:1px solid rgba(255,255,255,.1);padding-block:22px;font-size:12.5px;color:#9FB0C8;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
@media (max-width:860px){.contact{grid-template-columns:1fr}}

/* multi-page additions */
.nav-r{display:flex;align-items:center;gap:12px}
nav.links a[aria-current="page"]{opacity:1;color:var(--sun)}
details.menu{display:none;position:relative}
details.menu summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
details.menu summary::-webkit-details-marker{display:none}
details.menu .panel{position:absolute;right:0;top:52px;background:var(--navy-2);border-radius:16px;padding:10px;display:grid;min-width:220px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
details.menu .panel a{padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:500}
details.menu .panel a:hover,details.menu .panel a[aria-current="page"]{background:rgba(255,255,255,.08);color:var(--sun)}
@media (max-width:860px){details.menu{display:block}.top .btn{display:none}}
.page-hero{background:var(--navy);color:var(--paper);position:relative;overflow:hidden}
.page-hero .wrap{padding-block:56px 96px;display:grid;gap:14px;max-width:var(--wrap)}
.page-hero h1{font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-.025em}
.page-hero h1 .script{color:var(--sun);letter-spacing:0}
.page-hero p{color:#C9D3E3;font-size:18px;max-width:60ch}
.crumbs{font-size:13px;color:#9FB0C8}
.crumbs a{text-decoration:none;color:#C9D3E3}
.explore{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.explore a{display:grid;gap:8px;align-content:start;text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.explore a:hover{transform:translateY(-3px);border-color:var(--coral);box-shadow:0 14px 30px rgba(11,31,58,.08)}
.explore .n{font-family:var(--f-script);font-size:26px;color:var(--coral);line-height:1.1}
.explore p{color:var(--muted);font-size:15px}
.explore .go{font-weight:600;font-size:14px;color:var(--aqua-d);margin-top:6px}
.explore a.feature{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.explore a.feature p{color:#C9D3E3}
.explore a.feature .go{color:var(--sun)}
@media (max-width:900px){.explore{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.explore{grid-template-columns:1fr}}
.next{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:28px;margin-top:56px}
.next a{font-weight:600;color:var(--aqua-d);text-decoration:none}
.facts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fact{background:var(--sand);border-radius:18px;padding:24px;display:grid;gap:8px;align-content:start}
.fact p,.fact li{color:var(--muted);font-size:15px}
.fact ul{margin:0;padding-left:20px;display:grid;gap:6px}
.fact .thai{color:var(--ink)}
@media (max-width:760px){.facts-grid{grid-template-columns:1fr}}
.warn{background:var(--navy);color:var(--paper);border-radius:22px;padding:28px;display:grid;gap:10px;margin-top:24px}
.warn p{color:#D5DDEA}
.warn .thai{color:var(--paper)}
.contact-page{background:var(--navy);color:var(--paper)}
.sitefoot{background:var(--navy);color:var(--paper)}
.sitefoot .grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;padding-block:48px 32px}
.sitefoot .brand span{font-size:22px}
.sitefoot p{color:#9FB0C8;font-size:14px;margin-top:12px;max-width:40ch}
.sitefoot h4{margin:0 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9FB0C8;font-weight:600}
.sitefoot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.sitefoot ul a{text-decoration:none;color:#D5DDEA}
.sitefoot ul a:hover{color:var(--sun)}
.sitefoot .em{word-break:break-all;user-select:all;color:#D5DDEA;font-size:14px}
@media (max-width:760px){.sitefoot .grid{grid-template-columns:1fr}}

.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.story-text{display:grid;gap:16px;color:var(--muted);font-size:16.5px;max-width:62ch}
@media (max-width:860px){.story{grid-template-columns:1fr}}
.probs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prob{background:var(--paper);border-radius:18px;padding:24px;display:grid;gap:10px;align-content:start;border-top:4px solid var(--coral)}
.prob .what{color:var(--muted);font-size:14.5px}
.prob .how{font-size:14.5px;background:var(--sand);border-radius:12px;padding:12px 14px}
.prob .how b{color:var(--aqua-d)}
@media (max-width:900px){.probs{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.probs{grid-template-columns:1fr}}
.bens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:26px 40px}
.bens li{display:grid;grid-template-columns:28px 1fr;gap:12px}
.bens li svg{margin-top:4px}
.bens p{color:var(--muted);font-size:15px;margin-top:4px}
@media (max-width:760px){.bens{grid-template-columns:1fr}}
.role-note{margin-top:40px;background:var(--navy);color:var(--paper);border-radius:22px;padding:28px;display:grid;gap:10px}
.role-note p{color:#D5DDEA;max-width:80ch}
.thai-sum{background:var(--navy);color:var(--paper)}
.thai-sum .eyebrow{color:var(--sun)}
.th-text{display:grid;gap:14px;margin-top:18px;color:#D5DDEA;font-size:16.5px;max-width:72ch}
.th-text ul{margin:0;padding-left:22px;display:grid;gap:8px}