:root{
  --bg:#FFFFFF; --bg2:#F5F5F7; --surface:#FFFFFF; --ink:#1D1D1F; --ink2:#6E6E73; --ink3:#86868B; --line:#E8E8ED; --line2:#D2D2D7;
  --teal:#0D5E5A; --teal-d:#0A4A47; --teal-l:#E6F0EF; --teal-t:#0D5E5A; --on-teal2:#B5D3D0;
  --red:#D4151C; --ok:#1E7A4C; --focus:#2F8F89; --dark:#000000; --dark2:#161617; --ondark:#F5F5F7; --ondark2:#A1A1A6;
  --r:28px; --r2:18px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000000; --bg2:#161617; --surface:#1D1D1F; --ink:#F5F5F7; --ink2:#A1A1A6; --ink3:#86868B; --line:#2C2C2E; --line2:#3A3A3C;
  --teal-l:#14312F; --teal-t:#62BAB3; --dark:#0E0E0F; --dark2:#1D1D1F; --focus:#62BAB3;
}}
:root[data-theme="dark"]{
  --bg:#000000; --bg2:#161617; --surface:#1D1D1F; --ink:#F5F5F7; --ink2:#A1A1A6; --ink3:#86868B; --line:#2C2C2E; --line2:#3A3A3C;
  --teal-l:#14312F; --teal-t:#62BAB3; --dark:#0E0E0F; --dark2:#1D1D1F; --focus:#62BAB3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:60px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;letter-spacing:0;touch-action:manipulation;transition:background .25s,color .25s}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:0;line-height:1.25;font-weight:600}
p{margin:0}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap.w{max-width:1200px}
.eyebrow{font-size:14px;font-weight:600;color:var(--teal-t);letter-spacing:0}
.ic{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:980px;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .2s,color .2s,transform .2s,border-color .2s;white-space:nowrap;}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.btn.primary{background:var(--teal);color:#fff}
.btn.primary:hover{background:var(--teal-d)}
.btn.white{background:#fff;color:#1D1D1F}
.btn.white:hover{background:#E8E8ED}
.btn.outline{background:transparent;color:var(--teal-t);border-color:var(--teal-t)}
.btn.outline:hover{background:var(--teal);color:#fff}
.btn.onteal{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.onteal:hover{background:#fff;color:#1D1D1F}
.lnk{color:var(--teal-t);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:4px}
.lnk::after{content:"›";font-size:1.2em;line-height:1}
.lnk:hover{text-decoration:underline}
.card{background:var(--surface);border-radius:var(--r);box-shadow:0 2px 12px rgba(0,0,0,.04)}
.tile{background:var(--surface);border-radius:var(--r);padding:36px}
.dark .tile,.deep .tile{background:var(--dark2)}

/* nav */
.top{display:none}
nav.main{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
:root[data-theme="dark"] nav.main{background:rgba(22,22,23,.8);border-color:rgba(255,255,255,.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) nav.main{background:rgba(22,22,23,.8);border-color:rgba(255,255,255,.1)}}
nav.main .wrap{display:flex;align-items:center;justify-content:space-between;height:52px;gap:24px;max-width:1040px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand .logo{width:34px;height:34px;flex:none;display:block}
.brand .logo b{font-size:15px;font-weight:700;color:var(--red);line-height:1}
.brand .t strong{font-size:15px;font-weight:600;color:var(--ink);}
.brand .t small{display:none}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
nav.main ul a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:13px;color:var(--ink);opacity:.8;text-decoration:none;border-radius:6px}
nav.main ul a:hover{opacity:1}
nav.main ul a.on{opacity:1;font-weight:600}
.navr{display:flex;align-items:center;gap:10px}
.navr .btn{min-height:32px;padding:0 14px;font-size:13px}
.lang{display:inline-flex;gap:2px}
.lang button{min-width:36px;min-height:32px;border:0;background:transparent;color:var(--ink3);font:500 12px inherit;font-family:inherit;cursor:pointer;border-radius:6px}
.lang button.on{color:var(--ink);font-weight:600}
.burger{display:none;width:44px;height:44px;border:0;border-radius:6px;background:transparent;color:var(--ink);cursor:pointer;place-items:center}
@media (max-width:980px){nav.main ul{display:none}.burger{display:grid}.navr .btn{display:none}}
.mnav{display:none;background:var(--bg);border-bottom:1px solid var(--line)}
.mnav.open{display:block}
.mnav a{display:block;padding:16px 24px;text-decoration:none;font-size:17px;font-weight:500;border-top:1px solid var(--line)}

/* hero */
.hero{background:var(--bg2);color:var(--ink);text-align:center;position:relative;overflow:hidden}
.hero svg.bgp{display:none}
.hero .wrap{display:block;padding:96px 24px 0;max-width:1040px}
.hero .eyebrow{font-size:17px}
.hero h1{font-size:clamp(38px,6vw,68px);font-weight:700;line-height:1.2;margin-top:12px}
.hero .lead{font-size:clamp(18px,2.1vw,22px);color:var(--ink2);max-width:30em;margin:20px auto 28px;line-height:1.6;font-weight:400}
.hero .cta{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;font-size:19px}
.hero .cta .btn{background:none;border:0;padding:0;min-height:0;color:var(--teal-t);font-size:19px;font-weight:400}
.hero .cta .btn::after{content:"›";font-size:1.25em}
.hero .cta .btn:hover{text-decoration:underline}
.hero .meta{display:none}
.glance{background:var(--surface);overflow:hidden;text-align:left;color:var(--ink)}
.glance .gh{padding:22px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.glance .gh h3{font-size:17px;font-weight:600}
.glance .gh span{font-size:12px;color:var(--ink3);font-weight:500}
.glance table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.glance th{font-size:12px;font-weight:500;color:var(--ink3);text-align:left;padding:14px 32px 8px}
.glance th:not(:first-child),.glance td:not(:first-child){text-align:right}
.glance td{padding:14px 32px;border-top:1px solid var(--line)}
.glance td:first-child{font-weight:600}
.glance td:first-child small{display:block;font-weight:400;color:var(--ink2);font-size:13px}
.glance td b{color:var(--ink);font-weight:700;font-size:22px;}
.glance .gf{padding:16px 32px;background:var(--bg2);font-size:13px;color:var(--ink2);display:flex;justify-content:space-between;align-items:center;gap:12px}
.glance .gf a{color:var(--teal-t);text-decoration:none;font-weight:500}

/* trust strip → simple centered row */
.trust{background:var(--bg);border:0}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:56px 24px 0;max-width:1040px}
.trust .it{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;padding:0;border:0}
.trust .it .ic{color:var(--teal-t);width:28px;height:28px;margin:0}
.trust b{display:block;font-weight:600;font-size:15px;}
.trust span{font-size:13px;color:var(--ink2)}
@media (max-width:700px){.trust .wrap{grid-template-columns:1fr 1fr}}

/* sections */
section{padding:112px 0}
section.alt{background:var(--bg2)}
section.deep,section.dark{background:var(--dark);color:var(--ondark)}
.sh{display:block;text-align:center;margin:0 auto 56px;padding:0;border:0;max-width:760px}
.sh .num{display:none}
.sh .ttl{display:block}
.sh .eyebrow{display:block;margin-bottom:10px}
.sh h2{font-size:clamp(30px,4.2vw,48px);font-weight:700;line-height:1.25}
.deep h2,.dark h2{color:var(--ondark)}
.sh p{color:var(--ink2);font-size:clamp(16px,1.8vw,19px);line-height:1.65;margin:14px auto 0;max-width:40em}
.deep .sh p,.dark .sh p{color:var(--ondark2)}
.deep .eyebrow{color:#62BAB3}
.phead{background:var(--bg2);text-align:center}
.phead::after{display:none}
.phead .wrap{padding:88px 24px 64px;position:relative}
.phead h1{font-size:clamp(36px,5.2vw,60px);font-weight:700;margin:10px 0 14px;line-height:1.2}
.phead p{color:var(--ink2);font-size:clamp(16px,1.9vw,20px);max-width:36em;margin:0 auto;line-height:1.65}
.phead .eyebrow{color:var(--teal-t)!important;font-size:17px}
.tabs{display:inline-flex;gap:4px;margin-top:32px;padding:4px;background:rgba(0,0,0,.06);border-radius:980px;flex-wrap:wrap;justify-content:center}
.tabs a{min-height:36px;display:inline-flex;align-items:center;padding:0 18px;border-radius:980px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.tabs a.on{background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.1)}

/* grade tiles */
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wrap.w{max-width:1200px}
.grade{background:var(--surface);border-radius:var(--r);padding:32px 28px;overflow:hidden;display:flex;flex-direction:column;gap:14px;position:relative;transition:transform .25s,box-shadow .25s;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.grade:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.grade::before{display:none}
.alt .grade{box-shadow:none}
.grade .pct{font-size:56px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,var(--teal) 0%,#2F8F89 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.grade .pct small{font-size:13px;color:var(--ink3);letter-spacing:0;-webkit-text-fill-color:var(--ink3);margin-left:4px;font-weight:500}
.grade h3{font-size:19px;font-weight:600;}
.grade .for{font-size:14px;color:var(--ink2);display:flex;gap:8px;align-items:center}
.grade .for .ic{width:18px;height:18px;color:var(--teal-t)}
.grade dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px;padding-top:14px;border-top:1px solid var(--line)}
.grade dt{color:var(--ink2)}
.grade dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.grade .btn{margin-top:auto;align-self:flex-start;background:none;border:0;padding:0;min-height:0;color:var(--teal-t);font-size:15px}
.grade .btn::after{content:"›";font-size:1.2em}
.grade .btn:hover{text-decoration:underline;background:none;color:var(--teal-t)}
.grade .tag{position:absolute;top:22px;right:22px;font-size:11px;font-weight:600;color:#fff;background:var(--red);padding:4px 10px;border-radius:980px}
@media (max-width:980px){.grades{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grades{grid-template-columns:1fr}}

/* comparison */
.cmpwrap{margin-top:16px;overflow:hidden;box-shadow:none;border:1px solid var(--line)}
.cmphead{padding:24px 32px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap}
.cmphead h3{font-size:19px;font-weight:600}
.cmphead span{font-size:14px;color:var(--ink2)}
.cmpbody{display:grid;grid-template-columns:1.5fr 1fr}
.tblwrap{overflow-x:auto}
table.spec{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
table.spec th,table.spec td{padding:14px 24px;text-align:right;border-bottom:1px solid var(--line)}
table.spec th{font-size:12px;font-weight:500;color:var(--ink3)}
table.spec th:first-child,table.spec td:first-child{text-align:left}
table.spec td:first-child{font-weight:500}
table.spec td:first-child small{color:var(--ink3);font-weight:400;margin-left:6px}
table.spec tr:last-child td{border-bottom:0}
table.spec td.hl{font-weight:700}
.safe{border-left:1px solid var(--line);padding:20px 28px}
.safe h4{font-size:12px;font-weight:500;color:var(--ink3);margin-bottom:8px}
.safe ul{list-style:none;margin:0;padding:0;font-size:14px}
.safe li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.safe li:first-child{border-top:0}
.safe li b{font-weight:600;white-space:nowrap}
@media (max-width:980px){.cmpbody{grid-template-columns:1fr}.safe{border-left:0;border-top:1px solid var(--line)}}
/* 2026-10-02 review: a grid item will not shrink below its min-content, and .cmpwrap hides the overflow, so the
   English safety panel (nowrap values) was clipped mid-word at 320 px — 46 px of text with no way to reach it. */
.cmpbody>*{min-width:0}
@media (max-width:400px){.safe li{gap:8px}.safe li b{white-space:normal;text-align:right}}

/* why / bento */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why .w{background:var(--surface);border-radius:var(--r);padding:36px 32px;min-height:300px;display:flex;flex-direction:column}
.alt .why .w{box-shadow:none}
.why .badge{width:44px;height:44px;border-radius:12px;background:var(--teal-l);color:var(--teal-t);display:grid;place-items:center;margin-bottom:auto}
.why .badge .ic{width:24px;height:24px}
.why h3{font-size:22px;font-weight:600;margin:28px 0 10px;line-height:1.3}
.why p{color:var(--ink2);font-size:15px;line-height:1.5}
@media (max-width:900px){.why{grid-template-columns:1fr}}

.hist4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hist4>div{padding:32px 28px;border-radius:var(--r);background:var(--dark2);color:var(--ondark)}
.hist4 b{display:block;font-size:44px;font-weight:700;line-height:1;margin-bottom:16px;color:#62BAB3;font-variant-numeric:tabular-nums}
.hist4 h3{font-size:17px;font-weight:600;margin-bottom:6px;color:var(--ondark)}
.hist4 p{font-size:14px;color:var(--ondark2)}
@media (max-width:980px){.hist4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hist4{grid-template-columns:1fr}}

.gteaser{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gt{display:grid;grid-template-columns:24px 1fr;gap:4px 14px;padding:26px;border-radius:var(--r2);text-decoration:none;color:var(--ink);background:var(--surface);transition:transform .2s,box-shadow .2s}
.gt:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.gt .ic{color:var(--teal-t);grid-row:span 2;width:24px;height:24px;margin-top:2px}
.gt b{font-weight:600;font-size:16px;}
.gt span{font-size:13px;color:var(--ink2)}
@media (max-width:980px){.gteaser{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gteaser{grid-template-columns:1fr}}

.ctaband{display:block;text-align:center;padding:72px 40px;background:var(--dark);color:var(--ondark);border-radius:var(--r);border:0}
.ctaband .eyebrow{color:#62BAB3;font-size:17px}
.ctaband h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;margin:10px 0 12px;line-height:1.3}
.ctaband p{color:var(--ondark2);font-size:18px;margin-bottom:28px;max-width:34em;margin-left:auto;margin-right:auto}
.ctaband .btn.primary{background:#fff;color:#1D1D1F}
.ctaband .btn.primary:hover{background:#E8E8ED}
.ctaband .btn.outline{color:#fff;border-color:rgba(255,255,255,.5)}
.ctaband>div[style]{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.ctaband b{color:var(--ondark)}

/* about */
.about2{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start}
.about2 h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;margin:8px 0 20px}
.about2 p{color:var(--ink2);font-size:17px;margin-bottom:16px;line-height:1.55}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.facts div{padding:22px}
.facts b{font-size:36px}
.facts div{padding:28px;border-radius:var(--r2);background:var(--bg2)}
.facts b{display:block;font-size:44px;font-weight:700;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.facts span{font-size:14px;color:var(--ink2)}
@media (max-width:900px){.about2{grid-template-columns:1fr}}
.timeline{list-style:none;margin:0 auto;padding:0;max-width:820px}
.timeline li{display:grid;grid-template-columns:140px 1fr;gap:32px;padding:36px 0;border-top:1px solid var(--line2)}
.timeline li:first-child{border-top:0;padding-top:0}
.timeline .yr{font-size:34px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.timeline h3{font-size:22px;font-weight:600;margin-bottom:8px}
.timeline p{color:var(--ink2);font-size:16px;line-height:1.55}
@media (max-width:600px){.timeline li{grid-template-columns:1fr;gap:8px}}
.orgs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.org{padding:36px;display:flex;flex-direction:column;gap:12px;background:var(--bg2);box-shadow:none}
.org .mark{align-self:flex-start;font-size:12px;font-weight:600;color:var(--teal-t);background:var(--teal-l);padding:6px 12px;border-radius:980px}
.org h3{font-size:22px;font-weight:600;}
.org p{color:var(--ink2);font-size:15px}
.org small{font-size:13px;color:var(--ink3);border-top:1px solid var(--line2);padding-top:12px;margin-top:4px}
@media (max-width:900px){.orgs{grid-template-columns:1fr}}
.units{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;justify-content:center}
.units span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:980px;font-size:14px;font-weight:500;background:var(--bg2)}
.units .ic{width:17px;height:17px;color:var(--teal-t)}

/* steps */
.prow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
@media (max-width:900px){.prow{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative}
.steps::before{display:none}
.step{padding:28px 24px;border-radius:var(--r2);background:var(--dark2);position:relative}
.step .k{width:36px;height:36px;border-radius:50%;background:#62BAB3;color:#000;display:grid;place-items:center;font-weight:700;font-size:14px;margin-bottom:18px}
.step h3{font-size:17px;font-weight:600;margin-bottom:6px;color:var(--ondark)}
.step p{font-size:13.5px;color:var(--ondark2)}
.step .m{margin-top:12px;font-size:12px;font-weight:600;color:#62BAB3;display:inline-block;font-variant-numeric:tabular-nums}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* cats / services / certs / docs / terms */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cats.two{grid-template-columns:1fr 1fr}
.cat{padding:32px 28px;display:flex;flex-direction:column;gap:10px;box-shadow:none;background:var(--surface)}
.alt .cat{background:var(--surface)}
.cat .badge{width:44px;height:44px;border-radius:12px;background:var(--teal-l);color:var(--teal-t);display:grid;place-items:center;margin-bottom:10px}
.cat .badge .ic{width:24px;height:24px}
.cat h3{font-size:20px;font-weight:600;}
.cat p{color:var(--ink2);font-size:15px;flex:1}
.cat small{font-size:12px;font-weight:600;color:var(--teal-t)}
@media (max-width:980px){.cats,.cats.two{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cats,.cats.two{grid-template-columns:1fr}}
.oil{display:grid;grid-template-columns:48px 1fr auto;gap:20px;align-items:center;padding:28px 32px;border-radius:var(--r);background:var(--bg2);margin-top:16px}
.oil .badge{width:48px;height:48px;border-radius:12px;background:var(--surface);color:var(--teal-t);display:grid;place-items:center}
.oil h3{font-size:21px;font-weight:600;margin:4px 0 6px}
.oil p{color:var(--ink2);font-size:15px}
@media (max-width:900px){.oil{grid-template-columns:1fr}}
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.person{background:var(--surface);border-radius:var(--r);padding:32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.person .avatar{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--teal) 0%,#2F8F89 100%);color:#fff;display:grid;place-items:center;font-size:34px;font-weight:600;margin-bottom:10px}
.person b{font-size:18px;font-weight:600}
.person span{font-size:14px;color:var(--ink2)}
@media (max-width:900px){.people{grid-template-columns:1fr}}
.svcs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.svc{padding:32px;display:grid;grid-template-columns:48px 1fr;gap:20px;align-items:start;background:var(--bg2);box-shadow:none;overflow:hidden}
.svc .badge{width:48px;height:48px;border-radius:12px;background:var(--surface);color:var(--teal-t);display:grid;place-items:center}
.svc .badge .ic{width:24px;height:24px}
.svc h3{font-size:21px;font-weight:600;margin-bottom:6px}
.svc p{color:var(--ink2);font-size:15px;margin-bottom:12px}
.tag2{display:inline-block;font-size:12px;font-weight:600;color:var(--teal-t);background:var(--teal-l);padding:4px 12px;border-radius:980px}
@media (max-width:900px){.svcs{grid-template-columns:1fr}}
.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.certs.four{grid-template-columns:repeat(2,1fr)}
@media (min-width:1100px){.certs.four{grid-template-columns:repeat(3,1fr)}}
.certimg{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;aspect-ratio:1.414/1;max-height:220px}
.certimg img{width:100%;height:100%;object-fit:cover;object-position:top}
.cert{padding:32px;display:flex;flex-direction:column;gap:12px;background:var(--bg2);box-shadow:none}
.cert .row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.cert .mark{font-size:13px;font-weight:700;color:var(--teal-t);background:var(--surface);padding:8px 14px;border-radius:980px}
.cert .st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ok)}
.cert .st .ic{width:16px;height:16px}
.cert h3{font-size:19px;font-weight:600;}
.cert p{font-size:14.5px;color:var(--ink2);flex:1}
.cert .iss{font-size:13px;color:var(--ink3);border-top:1px solid var(--line2);padding-top:12px}
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.doc{display:flex;align-items:center;gap:14px;padding:20px 24px;text-decoration:none;border-radius:var(--r2);background:var(--bg2);box-shadow:none;transition:transform .2s}
.doc:hover{transform:translateY(-2px)}
.doc .ic{color:var(--teal-t);width:24px;height:24px}
.doc b{display:block;font-weight:600;font-size:15px}
.doc span{font-size:13px;color:var(--ink2)}
.doc .dl{margin-left:auto;color:var(--ink3)}
@media (max-width:900px){.certs,.docs{grid-template-columns:1fr}}
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.term{padding:32px;background:var(--bg2);box-shadow:none}
.alt .term{background:var(--surface)}
.term h3{font-size:18px;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.term h3 .ic{color:var(--teal-t)}
.term dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14.5px}
.term dt{color:var(--ink2)}
.term dd{margin:0;font-weight:500}
@media (max-width:900px){.terms{grid-template-columns:1fr}}

/* quote */
.qgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start}
.form{padding:40px;box-shadow:none;background:var(--bg2)}
.form h3{font-size:24px;font-weight:600;}
.form .sub{font-size:14px;color:var(--ink2);margin:4px 0 24px}
fieldset{border:0;padding:0;margin:0 0 8px}
legend{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;margin-bottom:14px;padding-top:24px;border-top:1px solid var(--line2);width:100%}
fieldset:first-of-type legend{border-top:0;padding-top:0}
legend .n{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:600;font-size:12px;display:grid;place-items:center}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:500;color:var(--ink2)}
.field label i{font-style:normal;color:var(--red)}
.field .help{font-size:12px;color:var(--ink3)}
.field input,.field select,.field textarea{min-height:48px;font:inherit;font-size:17px;padding:10px 16px;border:1px solid var(--line2);border-radius:12px;background:var(--surface);color:var(--ink);width:100%}
.field textarea{min-height:90px;resize:vertical}
.field :is(input,select,textarea):focus{outline:3px solid var(--focus);outline-offset:0;border-color:var(--teal-t)}
.field.err :is(input,select,textarea){border-color:var(--red)}
.field .msg{display:none;font-size:12.5px;color:var(--red)}
.field.err .msg{display:block}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;background:var(--line);border-radius:12px}
.seg button{min-height:42px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:600 15px inherit;font-family:inherit;cursor:pointer;transition:background .15s}
.seg button.on{background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.seg button:focus-visible{outline:3px solid var(--focus)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chk{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border:1px solid var(--line2);border-radius:12px;font-size:14px;cursor:pointer;background:var(--surface)}
.chk input{width:18px;height:18px;accent-color:var(--teal);margin:0}
.preview{position:sticky;top:68px;background:var(--dark);color:var(--ondark);border-radius:var(--r);padding:36px}
.preview .eyebrow{color:#62BAB3!important}
.preview h3{font-size:22px;font-weight:600;margin:6px 0 16px;}
.preview .row{font-size:13px;color:var(--ondark2);margin-bottom:6px;display:grid;grid-template-columns:44px 1fr;gap:8px}
.preview .row b{color:var(--ondark);font-weight:500;word-break:break-word}
.mail{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.6;white-space:pre-wrap;background:var(--dark2);border-radius:14px;padding:18px;max-height:330px;overflow:auto;margin-top:12px;color:var(--ondark)}
.preview .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.preview .note{font-size:12.5px;color:var(--ondark2);margin-top:14px}
@media (max-width:980px){.qgrid{grid-template-columns:1fr}.preview{position:static}.f2,.seg{grid-template-columns:1fr 1fr}}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact .info{padding:40px;background:var(--bg2);box-shadow:none}
.contact dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:18px 20px;font-size:16px}
.contact dt{color:var(--ink2);display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px}
.contact dt .ic{width:18px;height:18px;color:var(--teal-t)}
.contact dd{margin:0}
.contact dd small{display:block;color:var(--ink2);font-size:13.5px}
.map{min-height:320px;border-radius:var(--r);background:var(--bg2);position:relative;display:grid;place-items:center;overflow:hidden}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map span{position:relative;background:var(--surface);padding:10px 18px;border-radius:980px;font-size:14px;color:var(--ink2);box-shadow:0 2px 10px rgba(0,0,0,.08)}
@media (max-width:900px){.contact{grid-template-columns:1fr}}

footer{background:var(--bg2);color:var(--ink2);font-size:12px;padding:40px 0 24px;border-top:1px solid var(--line)}
footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;max-width:1040px}
footer h3{color:var(--ink);font-size:12px;font-weight:600;margin-bottom:10px}
footer p{max-width:36em}
footer a{text-decoration:none;display:block;padding:3px 0;color:var(--ink2)}
footer a:hover{text-decoration:underline}
footer .copy{grid-column:1/-1;border-top:1px solid var(--line2);padding-top:16px;margin-top:8px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--ink3)}
@media (max-width:900px){footer .wrap{grid-template-columns:1fr 1fr}}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:980px;font-size:14px;opacity:0;pointer-events:none;transition:.22s ease-out;display:flex;gap:8px;align-items:center;z-index:100}
.toast.show{opacity:1;transform:translate(-50%,0)}
.skip{position:fixed;left:-999px;top:8px;background:var(--teal);color:#fff;padding:8px 12px;border-radius:6px;z-index:200}
.skip:focus{left:8px}
.page[hidden]{display:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ---- modern functions ---- */
.langbtn{min-width:44px;height:36px;border-radius:980px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);font:600 12px inherit;font-family:inherit;cursor:pointer;padding:0 12px}
.langbtn:hover{background:var(--bg2)}
.tbtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
.tbtn:hover{transform:rotate(15deg)}
.tbtn .ic{width:18px;height:18px}
.tbtn .moon{display:none}
:root[data-theme="dark"] .tbtn .sun{display:none}
:root[data-theme="dark"] .tbtn .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tbtn .sun{display:none}:root:not([data-theme="light"]) .tbtn .moon{display:block}}
nav.main.scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(0,0,0,.06)}
.progress{position:fixed;top:0;left:0;height:2px;background:var(--teal-t);width:0;z-index:50;transition:width .1s linear}
.reveal{opacity:.35;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.totop{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);border:0;display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;transform:translateY(8px);z-index:60;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.mcta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
:root[data-theme="dark"] .mcta{background:rgba(22,22,23,.85)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mcta{background:rgba(22,22,23,.85)}}
.mcta .btn{width:100%}
@media (max-width:980px){.mcta{display:block}body{padding-bottom:72px}.totop{bottom:84px}}
.count{font-variant-numeric:tabular-nums}
table.spec td:not(:first-child):hover,table.spec td.colhi{background:var(--teal-l)}
.qprog{display:flex;gap:6px;margin:0 0 20px}
.qprog span{flex:1;height:4px;border-radius:2px;background:var(--line2);transition:background .3s}
.qprog span.done{background:var(--teal-t)}
.qprog{position:relative}
.qprog::after{content:attr(data-label);position:absolute;right:0;top:10px;font-size:12px;color:var(--ink2)}
.saved{font-size:12px;color:var(--ink3);margin-top:8px}
kbd{font:inherit;font-size:11px;border:1px solid var(--line2);border-radius:4px;padding:0 5px;color:var(--ink2)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- photo slots (swap for real photos) ---- */
.ph{position:relative;border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,#0A4A47 0%,#0D5E5A 55%,#2F8F89 100%);color:#fff;display:grid;place-items:center;isolation:isolate}
.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.18),transparent 55%),radial-gradient(ellipse at 80% 90%,rgba(0,0,0,.25),transparent 60%);z-index:-1}
.ph .cap{position:absolute;left:18px;bottom:16px;font-size:12px;font-weight:500;letter-spacing:.02em;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);padding:6px 12px;border-radius:980px;color:#fff}
.ph .ic{width:40px;height:40px;opacity:.45}
.ph.wide{aspect-ratio:21/8}
.ph.sq{aspect-ratio:4/3}
.ph.tall{aspect-ratio:3/4}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph.sm{border-radius:var(--r2)}
.ph.sm .ic{width:28px;height:28px}
.ph.sm .cap{left:12px;bottom:10px;font-size:11px;padding:4px 10px}
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:16px}
.gallery .ph:first-child{grid-row:span 2;aspect-ratio:auto;min-height:420px}
@media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}.gallery .ph:first-child{grid-column:span 2;grid-row:auto;min-height:260px}}
.band{padding:0 0 112px}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split2 h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;margin:8px 0 16px;line-height:1.25}
.split2 p{color:var(--ink2);font-size:17px;margin-bottom:14px}
@media (max-width:900px){.split2{grid-template-columns:1fr;gap:28px}}
.grade .gph{margin:-32px -28px 4px;border-radius:var(--r) var(--r) 0 0;aspect-ratio:16/8}
.grade .gph .cap{display:none}
.svc .sph{grid-column:1/-1;margin:-32px -32px 8px;border-radius:var(--r) var(--r) 0 0;aspect-ratio:16/6}
.svc{padding-top:32px}

/* ---- hero photo composition ---- */
.hero .wrap{padding:88px 24px 40px}
.heroart{position:relative;padding:0 24px 0!important;display:grid;grid-template-columns:1fr;}
.heroimg{border-radius:var(--r);overflow:hidden;aspect-ratio:21/9;background:var(--bg2)}
.heroimg img{width:100%;height:100%;object-fit:cover;display:block}
.heroart .glance{margin:-120px 24px 0 auto;max-width:520px;position:relative;border-radius:var(--r);box-shadow:0 30px 80px -20px rgba(0,0,0,.35);font-size:14px}
.heroart .glance td,.heroart .glance th{padding-left:22px;padding-right:22px}
.heroart .glance td b{font-size:19px}
@media (max-width:900px){.heroimg{aspect-ratio:16/10}.heroart .glance{margin:16px 0 0;max-width:none}}
.hero{padding-bottom:72px}

.brand .t strong{white-space:nowrap}
@media (max-width:480px){.brand .t strong{font-size:14px}.checks{grid-template-columns:1fr}.seg{grid-template-columns:repeat(4,1fr)}.seg button{font-size:13px}.f2{grid-template-columns:1fr}}
.reveal{opacity:.6}

.nb{white-space:nowrap}
/* a phone number split across two lines is unusable — owner, 2026-09-25 */
a[href^="tel:"]{white-space:nowrap}
a:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.ph img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ph:hover img{transform:scale(1.03)}
.grade .gph img{transition:transform .6s}
.hero .wrap>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.hero .wrap>*:nth-child(2){animation-delay:.08s}.hero .wrap>*:nth-child(3){animation-delay:.16s}.hero .wrap>*:nth-child(4){animation-delay:.24s}
.heroart{animation:rise .8s .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero .wrap>*,.heroart{animation:none}.ph:hover img{transform:none}}
nav.main ul a{position:relative}
nav.main ul a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:var(--teal-t)}
.sh .eyebrow{letter-spacing:.02em}

/* ===== v22: industry-reference UX ===== */
.hero.cine{background:#0B1416;color:#fff;text-align:left;min-height:min(86vh,760px);display:flex;align-items:flex-end;padding:0;position:relative;overflow:hidden}
.hero.cine .hbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:.9;animation:kb 18s ease-out both}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero.cine .hgrad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,22,.35) 0%,rgba(8,20,22,.15) 35%,rgba(8,20,22,.78) 75%,rgba(8,20,22,.92) 100%)}
.hero.cine .hcopy{position:relative;padding:160px 24px 150px;max-width:1200px;width:100%}
.hero.cine .eyebrow{color:#9ED6D0;font-size:15px;font-weight:600}
.hero.cine h1{font-size:clamp(40px,6.4vw,76px);line-height:1.12;max-width:14em;margin-top:14px;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero.cine .lead{color:rgba(255,255,255,.82);margin:22px 0 32px;max-width:32em;font-size:clamp(17px,1.9vw,21px)}
.hero.cine .cta{justify-content:flex-start;gap:12px}
.hero.cine .cta .btn{min-height:50px;padding:0 26px;font-size:16px;font-weight:600;border-radius:980px;border:1px solid transparent}
.hero.cine .cta .btn::after{content:none}
.hero.cine .cta .btn.white{background:#fff;color:#1D1D1F}
.hero.cine .cta .btn.onteal{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.hero.cine .cta .btn.onteal:hover{background:#fff;color:#1D1D1F;text-decoration:none}
.hero.cine .hmeta{display:flex;gap:28px;margin-top:44px;font-size:14px;color:rgba(255,255,255,.72);flex-wrap:wrap}
.hero.cine .hmeta span{display:inline-flex;align-items:center;gap:8px}
.hero.cine .hmeta span::before{content:"";width:6px;height:6px;border-radius:50%;background:#62BAB3}
.heroart{margin-top:-96px!important;position:relative;z-index:2}
.heroart .glance{margin:0 auto;max-width:1040px;font-size:15px}
@media (min-width:901px){.heroart .glance table{table-layout:fixed}}
@media (max-width:600px){.heroart .glance td,.heroart .glance th{padding-left:14px;padding-right:14px}.heroart .glance td:first-child{white-space:nowrap}.heroart .glance td:first-child small{white-space:normal}}
@media (max-width:900px){.hero.cine{min-height:0}.hero.cine .hcopy{padding:120px 24px 120px}.heroart{margin-top:-72px!important}}
@media (prefers-reduced-motion:reduce){.hero.cine .hbg{animation:none}}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pil{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}
.pil:hover{transform:translateY(-4px);box-shadow:0 24px 60px -24px rgba(0,0,0,.28)}
.pil .pimg{aspect-ratio:4/3;overflow:hidden;background:var(--bg2)}
.pil .pimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pil:hover .pimg img{transform:scale(1.04)}
.pil .pbody{padding:28px 28px 30px;display:flex;flex-direction:column;gap:10px;flex:1}
.pil .pbody .eyebrow{margin:0;font-size:13px}
.pil h3{font-size:22px;font-weight:600;line-height:1.3}
.pil p{color:var(--ink2);font-size:15px;line-height:1.6;flex:1}
.pil .lnk{margin-top:6px}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}
.resp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rt{padding:36px 32px;border-radius:var(--r);background:var(--bg2)}
.rt b{display:block;font-size:64px;font-weight:700;line-height:1;color:var(--teal-t);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rt b small{font-size:22px;font-weight:600;margin-left:4px}
.rt h3{font-size:19px;font-weight:600;margin:18px 0 8px;line-height:1.35}
.rt p{color:var(--ink2);font-size:15px;line-height:1.6}
@media (max-width:900px){.resp{grid-template-columns:1fr}}
[data-theme="dark"] .rt{background:var(--dark2)}

/* ---- staff-zone entry in the nav (shell) ---- */
.stafflink{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--ink2);text-decoration:none;padding:7px 12px;border-radius:980px;border:1px solid var(--line2);transition:color .2s,border-color .2s}
.stafflink .ic{width:15px;height:15px}
.stafflink:hover{color:var(--teal-t);border-color:var(--teal-t)}
@media(max-width:980px){.stafflink{display:none}}

/* ===== 2026-09-15 fix round (fix order R1 · P1–P7 · C10) ===== */
/* text-safe red/green: the brand --red and --ok fail 4.5:1 on the dark surfaces (measured 3.38:1 and 3.40:1) */
:root{--red-t:#B3121A;--ok-t:#17693F}
:root[data-theme="dark"]{--red-t:#FF7A7A;--ok-t:#5FD39A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--red-t:#FF7A7A;--ok-t:#5FD39A}}
.cert .st{color:var(--ok-t)}
.field label i,.form .sub i{color:var(--red-t)!important}
.field .msg{color:var(--red-t)}
.field label{font-size:14px}
.navr .btn{min-height:44px}
/* heading order: a section that opens on card titles (h3) gets a hidden h2 */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.glance .gh h2{font-size:17px;font-weight:600}
.inl{color:var(--teal-t);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
/* contact card overflowed a 360 px screen by 137 px */
.contact dd{min-width:0;overflow-wrap:anywhere}
.contact dd a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:560px){.contact .info{padding:28px 22px}.contact dl{grid-template-columns:1fr;gap:4px}.contact dt{margin-top:14px}}
/* fish oil has no true photo yet: an honest icon panel instead of a picture of a dryer */
.pil .pimg.noimg{background:linear-gradient(135deg,#0A4A47 0%,#0D5E5A 55%,#2F8F89 100%);color:#fff;display:grid;place-items:center}
.pil .pimg.noimg .ic{width:64px;height:64px;opacity:.6}
.safe .safenote{font-size:13px;color:var(--ink2);margin-top:10px}
.safe .safenote a{color:var(--teal-t);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
@media print{.reveal{opacity:1!important;transform:none!important}}
/* second pass — measured on the rebuilt site at 360–1440 px, both themes */
:root{--ink3:#6E6E73} /* light only (the dark blocks out-rank :root): #86868B measured 3.62:1 on white and 3.33:1 on the grey cards */
@media (max-width:900px){
  .certs.four{grid-template-columns:1fr} /* .certs.four out-ranked the one-column rule, leaving two 161 px columns on a phone */
  .contact>*{min-width:0}
  .contact .ph.sq{min-height:0!important} /* inline min-height 320px × aspect-ratio 4/3 forced a 427 px-wide column */
}
.glance .gf a,.lnk,.grade .btn,.seg button,.brand,.langbtn,.tbtn{min-height:44px}
.glance .gf a{display:inline-flex;align-items:center}
.langbtn,.tbtn{min-width:44px}
footer .wrap>div>a{display:flex;align-items:center;min-height:44px}
/* text on photos: the 2026-09-15 aerial hero is bright (overcast sky, white roofs) where the copy sits */
.hero.cine .hgrad{background:linear-gradient(90deg,rgba(8,20,22,.7) 0%,rgba(8,20,22,.5) 40%,rgba(8,20,22,.15) 70%,rgba(8,20,22,0) 85%),linear-gradient(180deg,rgba(8,20,22,.35) 0%,rgba(8,20,22,.15) 35%,rgba(8,20,22,.78) 75%,rgba(8,20,22,.92) 100%)}
@media (max-width:900px){.hero.cine .hgrad{background:linear-gradient(180deg,rgba(8,20,22,.64) 0%,rgba(8,20,22,.62) 45%,rgba(8,20,22,.82) 75%,rgba(8,20,22,.92) 100%)}}
.hero.cine .eyebrow{color:#B8E6E1} /* measured on the photo pixels at 360 px: #9ED6D0 fell to 3.9:1 over the pale roofs */
.ph .cap{background:rgba(0,0,0,.6)} /* white 12 px on black 60% stays ≥ 5.7:1 even over a pure-white patch of photo (35% gave 2.4:1) */
/* 2026-09-17 photo round 2: the fish-oil block carries a real photo where the icon badge sat */
.oil.withimg{grid-template-columns:168px 1fr auto}
.oil .oimg{width:168px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--surface)}
.oil .oimg img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.oil.withimg{grid-template-columns:1fr}.oil .oimg{width:100%;max-width:360px}}
/* ≤389 px: the three 44 px nav buttons leave the brand about 92 px, so "(1988)" slid under the EN button at 360 px
   (measured: title right edge 195 px, buttons start at 184 px). Let it take a second line instead. */
@media (max-width:389px){nav.main .brand strong{display:block;white-space:normal;line-height:1.3}}
/* 2026-09-18 three-lens review */
/* English mode: an eyebrow that says the same thing as its heading reads twice ("Products / Products") — site.js marks it */
.en-dup{display:none!important}
/* home "at a glance": the <small> carries the English grade name under the Thai one; in English it would repeat it */
html[lang="en"] .glance td small{display:none}
/* …and on phones the first column is nowrap so Thai grade names stay whole; the longer English label ("No.1 · export grade")
   may wrap instead of pushing the table 19 px past a 360 px screen (measured 2026-09-18) */
html[lang="en"] .glance td:first-child{white-space:normal}
/* skip-link target: main takes focus so the next Tab lands in the page, but a ring around the whole page helps nobody */
#main:focus{outline:none}
/* the copy toast also reports failure — no tick mark then */
.toast.warn svg{display:none}
/* 2026-09-18 review round 1 (functional checker) */
/* pages that carry data-hide-cta (the quote page itself) and an open phone menu hide the fixed quote bar */
.mcta[hidden],.menu-open .mcta{display:none!important}
/* the phone menu is taller than a landscape phone: it scrolls inside itself instead of running off the screen */
.mnav.open{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain}
/* print: no fixed bars, buttons or toasts over the content */
@media print{.mcta,.totop,.toast,.progress,.skip,nav.main .navr,#mnav{display:none!important}body{padding-bottom:0!important}}
/* English: "Pattani Fish Meal (1988)" is longer than the Thai name and ran under the ไทย button at 390–411 px */
@media (max-width:430px){html[lang="en"] nav.main .brand strong{display:block;white-space:normal;line-height:1.3}}
/* the dark-theme tile colour also applies when dark comes from the system setting */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rt{background:var(--dark2)}}
/* 320 px in English: the fish-oil button label ("Request specification and quotation") may wrap instead of widening the
   page by 41 px, and form grid items may shrink below their widest option ("Delivered to customer's mill (Thailand)") */
.oil .btn{white-space:normal;text-align:center;line-height:1.3;padding-top:10px;padding-bottom:10px}
.qgrid>*,.f2>*,.field{min-width:0}
.field select{max-width:100%;text-overflow:ellipsis}
/* below 360 px four grade buttons in a row are 43 px wide (under the 44 px touch minimum): two rows of two instead */
@media (max-width:359px){.seg{grid-template-columns:1fr 1fr}}

/* ---- 2026-09-18 review round 2 ------------------------------------------------------------------------------------ */
/* Grade cards are titled Thai over English so the four cards keep one height ("เบอร์กุ้ง · Shrimp Grade" wrapped at
   1280 px and pushed its spec rows 24 px below the other three); English mode shows the translated title only. */
.grade h3 small{display:block;font-size:14px;font-weight:500;color:var(--ink2);margin-top:2px}
html[lang="en"] .grade h3 small{display:none}
/* D1 — the English label "Company registration no." did not wrap and squeezed the values to 117 px at 901–949 px
   (e-mail split as "pfm@cmr2002. / com"). Labels now wrap inside a capped column. */
.contact dt{white-space:normal}
.contact dl{grid-template-columns:fit-content(9em) 1fr} /* em = the list's 16 px: 9em = 144 px, which the longest Thai label (≈139 px) fits */
@media (max-width:560px){.contact dl{grid-template-columns:1fr}}
/* D4 — the protein figure's gradient started at --teal, which has no dark-theme value: 2.5–2.7:1 on the dark card. */
:root{--pct-a:#0D5E5A;--pct-b:#2F8F89}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pct-a:#62BAB3;--pct-b:#9AD9D3}}
:root[data-theme="dark"]{--pct-a:#62BAB3;--pct-b:#9AD9D3}
.grade .pct{background:linear-gradient(135deg,var(--pct-a) 0%,var(--pct-b) 100%);-webkit-background-clip:text;background-clip:text}
/* D6 — at 320–329 px the photo squares are ~130 px wide and a caption wrapped to 3–4 lines, out through the top. */
@media (max-width:380px){.gallery .ph.sq .cap{left:6px;right:6px;bottom:6px;font-size:11px;line-height:1.3;padding:4px 8px;border-radius:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
/* D7 — .reveal.in{transform:none} out-ranked the hover lift, and .alt .grade removed the hover shadow. */
.grade.reveal.in:hover{transform:translateY(-4px)}
.gt.reveal.in:hover{transform:translateY(-3px)}
.alt .grade:hover{box-shadow:0 16px 40px rgba(0,0,0,.08)}
@media (prefers-reduced-motion:reduce){.grade.reveal.in:hover,.gt.reveal.in:hover{transform:none}}
/* Safety section: two cards now (the committee figures and the 11-point policy had no source). */
.why.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.why.two{grid-template-columns:1fr}}
/* D5 + D9 — print. The e-mail preview kept its 330 px scroll box and was cut after "Please send"; with Chrome's default
   (background graphics off) the dark sections printed white text on white paper, the hero photo dropped out and the
   footer language button printed. Paper = dark ink on white, photo in the flow, no controls. */
@media print{
  .mail{max-height:none!important;overflow:visible!important}
  .hero.cine .hbg{position:static!important;display:block;width:100%;height:auto;max-height:95mm;opacity:1!important;animation:none!important;transform:none!important}
  .hero.cine .hgrad{display:none!important}
  section.deep,section.dark,.hist4>div,.ctaband,.step,.preview,.mail,.phead,.person .avatar,.deep .tile,.dark .tile{background:none!important;box-shadow:none!important}
  .hero *,section.deep *,section.dark *,.hist4 *,.ctaband *,.preview,.preview *,.mail,.phead *,.person .avatar{color:#111!important;-webkit-text-fill-color:#111!important}
  .person .avatar{border:1px solid #999}
  .grade .pct{background:none!important;color:#0D5E5A!important;-webkit-text-fill-color:#0D5E5A!important}
  .langbtn{display:none!important}
}

/* ---- 2026-09-19 review round 3 -------------------------------------------------------------------------------------- */
/* Print: on screen the hero is a clipped flex row; on paper it must be a plain block — photo, then text — or the in-flow
   photo pushes the headline off the page (round 3: page 1 printed blank, or solid black with graphics on). */
@media print{
  .hero.cine{display:block!important;min-height:0!important;overflow:visible!important;background:none!important}
  .hero.cine .hbg{max-height:80mm!important}
  .hero.cine .hcopy{padding:14px 0 0!important;max-width:none!important}
  .hero .cta{display:none!important}
  .btn{color:#111!important;-webkit-text-fill-color:#111!important;background:none!important;border:1px solid #999!important}
  /* The spec card's screen overlap (-72/-96px) would sit on the badge row, which now ends the printed hero. */
  .heroart{margin-top:14px!important;animation:none!important;transform:none!important}
  .heroart .glance{box-shadow:none!important;border:1px solid #ccc!important}
}
/* 320–380 px: with the 2-line clamp the top of line 3 showed in the pill's bottom padding. A transparent border takes that
   space instead — the clip edge is the padding box, so line 3 is now cut right under line 2. */
@media (max-width:380px){.gallery .ph.sq .cap{padding-bottom:0;border-bottom:4px solid transparent}}
/* English header below 360 px: "Pattani Fish Meal (1988)" had a 50 px column and wrapped to 4 lines, 73 px tall in the
   53 px bar — "Pattani" cut off above, "(1988)" over the hero (320 px; 3 lines edge to edge at 340 px). Tighter logo gap,
   30 px logo and 12 px type: 3 lines at 320 px, 2 lines from 340 px, every header control kept. */
@media (max-width:359px){html[lang="en"] nav.main .brand{gap:6px}html[lang="en"] nav.main .brand .logo{width:30px;height:30px}html[lang="en"] nav.main .brand strong{font-size:12px;line-height:1.15}}
/* Keyboard focus must never sit under the fixed bottom quote bar (WCAG 2.2 · 2.4.11); the bar shows at ≤ 980 px. */
@media (max-width:980px){html{scroll-padding-bottom:96px}}
/* One-column "why" cards kept the 300 px desktop height — mostly empty on a phone. */
@media (max-width:900px){.why .w{min-height:0}.why h3{margin-top:18px}}

/* ---- 2026-09-19 review round 4 -------------------------------------------------------------------------------------- */
/* D3 — Thai header at 300–322 px: the unbreakable "ปัตตานีปลาป่น" ended 6 px under the EN button. The < 360 px English
   treatment (6 px gap, 30 px logo) now applies to Thai too, with 13 px type. */
@media (max-width:359px){nav.main .brand{gap:6px}nav.main .brand .logo{width:30px;height:30px}html:not([lang="en"]) nav.main .brand strong{font-size:13px}}
@media print{
  /* D5 — the dark theme (toggle or system) printed grey on white, or black pages with invisible headings. Paper always
     gets the light palette; every variable the dark blocks change is reset (focus colour aside). */
  :root,:root[data-theme]{--bg:#FFFFFF!important;--bg2:#F5F5F7!important;--surface:#FFFFFF!important;--ink:#1D1D1F!important;--ink2:#6E6E73!important;--ink3:#6E6E73!important;--line:#E8E8ED!important;--line2:#D2D2D7!important;--teal-l:#E6F0EF!important;--teal-t:#0D5E5A!important;--dark:#000000!important;--dark2:#161617!important;--red-t:#B3121A!important;--ok-t:#17693F!important;--pct-a:#0D5E5A!important;--pct-b:#2F8F89!important}
  nav.main{background:none!important}
  .rt{background:var(--bg2)!important}
  /* D4 — photo captions printed light grey on white (graphics off, 2.3:1) or dark on the dark pill (graphics on); the quote
     form's step numbers the same. Dark text on a white pill either way. */
  .ph .cap{background:#fff!important;color:#111!important;-webkit-text-fill-color:#111!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  legend .n{background:none!important;color:#111!important;border:1px solid #999}
  /* D6 — at A4 page breaks a card's last line was covered by the next card (Quality: the GHPs certificate number; Group:
     "ขวด · แก้ว · ถัง"). Cards and photos move whole to the next page instead of splitting. */
  .card,.cert,.cat,.certimg,.ph{break-inside:avoid}
  /* the hero headline's screen glow printed as a grey blur */
  .hero.cine h1,.hero.cine .lead{text-shadow:none!important}
}

/* ---- 2026-09-19 review round 5 -------------------------------------------------------------------------------------- */
/* D1 — the phone menu never shows in the desktop layout, even if it was open when the window widened. */
@media (min-width:981px){.mnav{display:none!important}}
/* D2 — at 452–1116 px the fixed to-top button sat on the footer language button and took its clicks. */
footer .copy{padding-right:60px}
/* D5 — the dark theme never declared color-scheme, so browser-drawn parts (the month field's calendar button) stayed black on
   the dark field (1.25:1). */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
/* Placeholder text used the browser default (3.65:1 on the dark field); the muted text token gives ~5:1 light, ~4.6:1 dark. */
.field ::placeholder{color:var(--ink3);opacity:1}
@media print{
  :root,:root[data-theme]{color-scheme:light!important}
  /* D3 — round 4's no-split rule covered .card only: grade tiles, fact boxes, history tiles and people cards still printed
     their figure on one page and its label on the next. */
  .grade,.rt,.why .w,.gt,.step,.hist4>div,.person,.pil,.glance,.oil,.ctaband,.facts>div,.doc,.timeline li,.trust .it{break-inside:avoid}
  /* 2026-09-29 — a printed page must not END on a heading whose text follows overleaf: the footer column headings did
     that on the English products sheet once the payment row came off the page. Keep each footer column whole. */
  footer .wrap>div{break-inside:avoid}
  footer h3{break-after:avoid}
}

/* ---- 2026-09-19 review round 6 -------------------------------------------------------------------------------------- */
/* D4 — hidden (max 6 s, see head.html) until site.js has applied English, instead of flashing Thai first. */
html.lang-pending body{visibility:hidden}
/* D1 — Windows High Contrast drops backgrounds and shadows, which were the only sign of the selected protein grade. */
@media (forced-colors:active){.seg button.on{outline:3px solid Highlight;outline-offset:-3px}}
/* D5 — scroll-padding-top (60 px) is taller than the 52 px sticky header, so focusing a header control counted as hidden and
   scrolled the page 150–764 px. Round 7: moving the offset onto page targets (round 6's first fix) left footer links and form
   text fields under the header on Shift+Tab — so the page padding stays and the header's own controls are exempt instead. */
nav.main :is(a[href],button){scroll-margin-top:-60px}
/* D6 — on short pages in tall windows the to-top button never appears but Tab still reached it: show it while focused. */
.totop:focus-visible{opacity:1;pointer-events:auto;transform:none}

/* ---- 2026-09-19 review round 7 -------------------------------------------------------------------------------------- */
/* D3 — a deep link to an inner page painted the home page until site.js arrived (0.4–2 s on slower links). The head boot
   script names the page (data-route); CSS shows only that page until site.js takes over and removes the attribute. */
html[data-route] .page[data-page="home"]{display:none}
html[data-route="about"] .page[data-page="about"],html[data-route="products"] .page[data-page="products"],html[data-route="services"] .page[data-page="services"],html[data-route="quality"] .page[data-page="quality"],html[data-route="group"] .page[data-page="group"],html[data-route="quote"] .page[data-page="quote"],html[data-route="contact"] .page[data-page="contact"]{display:block}
html[data-route="quote"] #mcta{display:none}
/* The to-top button sat over the open phone menu (4–13 % of a row's tap area); the quote bar already hides then. */
body.menu-open .totop{display:none}

/* ---- 2026-09-19 review round 8 -------------------------------------------------------------------------------------- */
/* D1 — the open phone menu scrolls on its own on short screens, and its rows carry the header controls' scroll-margin-top:-60px
   (round 7), so Shift+Tab put the focused row up to 60 px above the menu's visible top. The menu's own padding cancels it
   inside the menu; for the page (html scroll-padding-top:60px) the rows still never trigger a scroll. */
#mnav{scroll-padding-top:60px}
/* D2 — the quote bar is hidden while the menu is open, so the page's 96 px bottom padding only made Chrome scroll the page
   behind the sticky menu on every Tab through its lower rows (the visitor ended 125–780 px away). */
html:has(body.menu-open){scroll-padding-bottom:0}
/* Print: a section heading block (eyebrow, heading, intro) is never left alone at the foot of a page. */
@media print{.sh{break-inside:avoid}}

/* ---- 2026-09-19 review round 9 -------------------------------------------------------------------------------------- */
/* The skip link is position:fixed (rule above): as position:absolute at the top of the document, Shift+Tab onto it from the
   header threw a mid-page reader back to the top (1,500 px). */

/* ---- 2026-09-20 review round 10 ------------------------------------------------------------------------------------- */
/* D1 — two 44 px four-digit figures (2518, 2531) plus padding need ~325 px, so the About facts grid made the page wider than
   a 320–348 px screen (once the figures showed; the old count-up started them at 0, which every width check measured). */
@media (max-width:400px){.facts div{padding:18px}.facts b{font-size:34px}}

/* ---- 2026-09-29 typography pass (after a walk through the group's other site, cmr2002.com) ----------------------------- */
/* What makes that site read as "brand" is three things, not its colours: uppercase letter-spaced labels, a looser
   line-height on display text, and one page skeleton repeated everywhere. The first two are adopted here.
   ⚠️ LATIN ONLY. Thai must never be letter-spaced or uppercased — spacing pushes the tone mark off its consonant and
   text-transform does nothing for Thai — so every label rule below is scoped to html[lang="en"] (site.js sets it). */
/* eyebrows keep their own case on purpose: some carry a whole phrase ("Safety limits · verified by SGS") and an
   all-caps phrase reads slower — and it would also rewrite what the fact gates read, since they read rendered text. */
html[lang="en"] .eyebrow{letter-spacing:.06em}
html[lang="en"] nav.main ul a{text-transform:uppercase;letter-spacing:.05em;font-size:12px}
html[lang="en"] footer h3{text-transform:uppercase;letter-spacing:.08em}
html[lang="en"] .hero h1,html[lang="en"] .sh h2{letter-spacing:-.01em}
/* display rhythm, both languages: 1.25 is tight at 48px, and Thai needs the room for its upper and lower marks */
.sh h2{line-height:1.3}
.grade h3,.pil h3,.gt b,.doc h3{line-height:1.35}
/* the standards line the whole group shows on every page — same certificates this site already documents on /quality */
.fstd{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fstd span{font-size:12px;font-weight:600;color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:4px 10px}

/* ---- module: staff ---- */
/* staff zone — every class is prefixed st- so it never collides with the shell */
.st-zones{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.st-zone{padding:32px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);border:2px solid transparent}
.st-zone .ic{width:34px;height:34px;color:var(--teal-t)}
.st-zone h3{font-size:22px;font-weight:700;margin:0}
.st-zone p{margin:0;color:var(--ink2);font-size:16px}
.st-zone .st-link{margin-top:auto;font-weight:600;color:var(--teal-t)}
.st-zone.on{border-color:var(--teal-t);background:var(--teal-l)}
a.st-zone:hover{border-color:var(--line2)}

/* ---- sign-in panel ---- */
.st-panel{padding:36px;max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.st-panel h2{font-size:28px;font-weight:700;margin:0}
.st-panel p{margin:0;color:var(--ink2);font-size:16px}
.st-big{min-height:56px;font-size:17px;font-weight:600;padding:0 26px;align-self:flex-start}
.st-big .ic{width:20px;height:20px}
.st-hint{font-size:14px!important;color:var(--ink3)!important}

.st-seg[hidden]{display:none}
.st-seg{display:inline-flex;flex-wrap:wrap;align-self:flex-start;border:2px solid var(--line2);border-radius:980px;overflow:hidden}
.st-seg button{font:inherit;font-size:15px;font-weight:600;min-height:44px;padding:0 18px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.st-seg button+button{border-left:2px solid var(--line2)}
.st-seg button[aria-pressed="true"]{background:var(--teal);color:#fff}
.st-seg button:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}

.st-where{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.st-where li{display:grid;grid-template-columns:110px minmax(0,1fr) auto;grid-template-areas:"lbl addr copy" "lbl state copy";column-gap:14px;row-gap:2px;align-items:center;padding:14px 18px;background:var(--surface)}
.st-where li+li{border-top:1px solid var(--line)}
.st-where b{grid-area:lbl;font-size:16px;font-weight:700}
.st-where .st-addr{grid-area:addr;font-family:ui-monospace,Consolas,"SF Mono",monospace;font-size:16px;overflow-wrap:anywhere;user-select:all}
.st-where em{grid-area:state;font-style:normal;font-size:14px;color:var(--ok)}
.st-where li.off .st-addr{color:var(--ink3)}
.st-where li.off em{color:var(--ink3)}
.st-copy{grid-area:copy;font:inherit;font-size:14px;font-weight:600;min-height:40px;padding:0 14px;border-radius:980px;border:1px solid var(--line2);background:var(--surface);color:var(--teal-t);cursor:pointer}
.st-copy:hover{border-color:var(--teal-t)}
.st-copy:focus-visible{outline:3px solid var(--focus);outline-offset:2px}


/* ---- department menu ---- */
.st-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.st-mod{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 18px 16px;border-radius:var(--r2);border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;text-align:left;text-decoration:none;min-height:112px;position:relative}
.st-mod .ic{width:26px;height:26px;color:var(--teal-t)}
.st-mod-name{font-size:17px;font-weight:700;padding-right:104px}
.st-mod small{font-size:13px;color:var(--ink3);line-height:1.4}
.st-badge{position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;padding:4px 9px;border-radius:980px;background:var(--bg2);color:var(--ink3)}
a.st-mod.live{cursor:pointer}
a.st-mod.live .st-badge{background:var(--teal-l);color:var(--teal-t)}
a.st-mod.live:hover{border-color:var(--teal-t)}
a.st-mod.live:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.st-mod.soon{opacity:.72}

/* ---- steps ---- */
.st-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.st-steps li{background:var(--surface);border-radius:var(--r2);padding:26px}
.st-steps b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;font-size:16px;margin-bottom:12px}
.st-steps h3{font-size:19px;font-weight:700;margin:0 0 6px}
.st-steps p{margin:0;color:var(--ink2);font-size:15.5px}

@media(max-width:820px){
  .st-zones,.st-steps{grid-template-columns:1fr}
  .st-menu{grid-template-columns:1fr 1fr}
  .st-panel{padding:26px}
}
@media(max-width:520px){
  .st-menu{grid-template-columns:1fr}
  .st-where li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lbl copy" "addr addr" "state state"}
}