/* SIGN SEED — public site styles. Green/white minimal, faithful to reference. */
:root { --brand:#2D7D4A; --radius:14px; }
* , *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:'IBM Plex Sans Thai',system-ui,sans-serif; color:#1F2A24; background:#fff; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; display:block; }
h1,h2,h3,h4 { margin:0; }
a { color:inherit; }

@keyframes floatY  {0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes floatY2 {0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}}
@keyframes shineText {0%{background-position:0% 50%}100%{background-position:200% 50%}}

.container { max-width:1160px; margin:0 auto; }
.section { scroll-margin-top:80px; padding:clamp(56px,8vw,96px) 26px; }
.why { background:linear-gradient(180deg,#F5F9F6,#F1F6F2); }
.eyebrow { color:var(--brand); font-weight:600; font-size:.86rem; letter-spacing:1.4px; text-transform:uppercase; }
.sec-head { text-align:center; max-width:620px; margin:0 auto clamp(38px,5vw,60px); }
.sec-head h2 { font-size:clamp(1.75rem,3.6vw,2.55rem); font-weight:700; letter-spacing:-.4px; margin:12px 0 14px; color:#17221C; }
.sec-head p { color:#66756C; font-size:1.04rem; line-height:1.7; margin:0; }

/* Buttons */
.btn-primary,.btn-ghost { display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:600; font-size:1rem; padding:15px 28px; border-radius:var(--radius); transition:transform .22s,box-shadow .22s,background .22s,border-color .22s; }
.btn-primary { background:var(--brand); color:#fff; box-shadow:0 10px 26px color-mix(in srgb,var(--brand),transparent 60%); }
.btn-primary:hover { transform:translateY(-3px); background:color-mix(in srgb,var(--brand),#000 12%); }
.btn-ghost { background:#fff; color:color-mix(in srgb,var(--brand),#000 10%); border:1.5px solid color-mix(in srgb,var(--brand),#fff 62%); }
.btn-ghost:hover { transform:translateY(-3px); background:color-mix(in srgb,var(--brand),#fff 92%); border-color:var(--brand); }

/* Navbar */
.nav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid #EDF1EE; }
.nav-inner { max-width:1160px; margin:0 auto; padding:15px 26px; display:flex; justify-content:space-between; align-items:center; gap:18px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-logo { border-radius:12px; object-fit:cover; flex:none; }
.brand-logo-ph { display:flex; align-items:center; justify-content:center; background:var(--brand); color:#fff; font-family:'Poppins',sans-serif; font-weight:700; font-size:1.4rem; }
.brand-text { display:flex; flex-direction:column; line-height:1.08; }
.brand-name { font-family:'Poppins',sans-serif; font-weight:700; font-size:1.16rem; letter-spacing:.3px; color:#16211B; }
.brand-sub { font-size:.72rem; color:#7A867F; font-weight:500; }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-link { text-decoration:none; color:#47554D; font-weight:500; font-size:.93rem; padding:4px 0; border-bottom:2px solid transparent; transition:color .2s,border-color .2s; }
.nav-link:hover { color:var(--brand); border-bottom-color:var(--brand); }
.btn-quote { text-decoration:none; background:var(--brand); color:#fff; font-weight:600; font-size:.9rem; padding:10px 20px; border-radius:999px; box-shadow:0 6px 16px color-mix(in srgb,var(--brand),transparent 66%); transition:transform .2s,background .2s; }
.btn-quote:hover { transform:translateY(-2px); background:color-mix(in srgb,var(--brand),#000 12%); }
.lang-switch { display:flex; gap:2px; background:#F1F5F2; border-radius:999px; padding:3px; }
.lang-switch .lang { text-decoration:none; font-size:.8rem; font-weight:600; color:#7A867F; padding:5px 10px; border-radius:999px; }
.lang-switch .lang.on { background:#fff; color:var(--brand); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.menu-btn { display:none; border:1px solid #E4EAE6; background:#fff; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; cursor:pointer; color:#1F2A24; }
.mobile-menu { display:none; border-top:1px solid #EDF1EE; background:#fff; padding:10px 26px 20px; }
.mobile-menu a { display:block; text-decoration:none; color:#35423B; font-weight:500; font-size:1.02rem; padding:13px 6px; border-bottom:1px solid #F1F4F2; }
.mobile-lang { display:flex; gap:6px; padding:12px 6px; }
.mobile-lang a { display:inline-block; padding:8px 16px; border:1px solid #E4EAE6; border-radius:999px; font-size:.9rem; font-weight:600; color:#7A867F; }
.mobile-lang a.on { background:var(--brand); color:#fff; border-color:var(--brand); }
.mobile-quote { display:block; text-align:center; margin-top:8px; text-decoration:none; background:var(--brand); color:#fff; font-weight:600; padding:13px; border-radius:12px; }
body.menu-open .mobile-menu { display:block; }

/* Hero */
.hero { position:relative; overflow:hidden; background:radial-gradient(1100px 520px at 88% -8%,color-mix(in srgb,var(--brand),#fff 84%),transparent 60%),linear-gradient(180deg,#F6FAF7 0%,#fff 78%); }
.hero-inner { max-width:1160px; margin:0 auto; padding:clamp(56px,8vw,104px) 26px clamp(60px,8vw,100px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,68px); align-items:center; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:color-mix(in srgb,var(--brand),#fff 88%); color:color-mix(in srgb,var(--brand),#000 14%); font-weight:600; font-size:.82rem; padding:7px 15px; border-radius:999px; }
.hero-h1 { font-size:clamp(2.15rem,5.4vw,3.65rem); line-height:1.1; font-weight:700; letter-spacing:-.5px; margin:20px 0 0; color:#17221C; }
.hero-h1 .shine { background:linear-gradient(100deg,var(--brand) 0%,color-mix(in srgb,var(--brand),#7CE0A3 70%) 25%,#B6F0CC 50%,color-mix(in srgb,var(--brand),#7CE0A3 70%) 75%,var(--brand) 100%); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:shineText 3.6s linear infinite; }
.hero-p { font-size:clamp(1rem,1.7vw,1.16rem); line-height:1.75; color:#56655C; margin:20px 0 34px; max-width:490px; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; }
.hero-graphic { position:relative; min-height:340px; }
.hero-frame-wrap { position:relative; max-width:100%; margin:0 auto; padding:10px; }
.hero-frame { position:relative; border-radius:22px; overflow:hidden; box-shadow:0 30px 60px rgba(20,50,35,.16); background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--brand),#fff 90%) 0 12px,color-mix(in srgb,var(--brand),#fff 95%) 12px 24px); }
.hero-slide { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1s ease; }
.hero-slide.on { opacity:1; }
.hero-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:color-mix(in srgb,var(--brand),#000 6%); text-align:center; padding:20px; }
.hero-empty span { font-size:.8rem; opacity:.85; }
.hero-dots { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:2; }
.hero-dot { width:9px; height:9px; border-radius:999px; border:0; background:rgba(255,255,255,.55); cursor:pointer; padding:0; transition:width .3s,background .3s; }
.hero-dot.on { width:22px; background:#fff; }
.hero-float { position:absolute; border-radius:11px; }
.hero-float-l { left:4px; bottom:14px; background:linear-gradient(145deg,var(--brand),color-mix(in srgb,var(--brand),#000 22%)); color:#fff; padding:10px 14px; box-shadow:0 12px 26px color-mix(in srgb,var(--brand),transparent 55%); animation:floatY 5.2s ease-in-out infinite; }
.hf-title { font-family:'Poppins',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.4px; }
.hf-sub { font-size:.62rem; opacity:.85; margin-top:1px; }
.hero-float-r { right:4px; top:20px; display:flex; align-items:center; gap:8px; background:#fff; padding:8px 12px 8px 9px; box-shadow:0 12px 26px rgba(20,50,35,.16); animation:floatY2 4.6s ease-in-out infinite; }
.hf-icon { width:30px; height:30px; border-radius:9px; background:linear-gradient(145deg,#E8A317,#C7860B); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 11px rgba(200,135,10,.4); }
.hf-title2 { font-weight:700; font-size:.74rem; color:#22302A; }
.hf-sub2 { font-size:.62rem; color:#7A867F; }

/* Stats */
.stats-wrap { max-width:1160px; margin:0 auto; padding:0 26px; transform:translateY(-32px); }
.stats { background:linear-gradient(135deg,color-mix(in srgb,var(--brand),#000 12%),color-mix(in srgb,var(--brand),#000 34%)); border-radius:20px; padding:clamp(26px,4vw,40px) clamp(20px,4vw,46px); display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:26px; box-shadow:0 24px 50px color-mix(in srgb,var(--brand),transparent 62%); }
.stat { text-align:center; border-left:1px solid rgba(255,255,255,.16); }
.stat-n { font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(1.9rem,3.4vw,2.6rem); color:#fff; line-height:1; }
.stat-l { color:rgba(255,255,255,.85); font-size:.9rem; margin-top:8px; }

/* Services */
.svc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.svc-card { position:relative; background:#fff; border:1px solid #E7ECE9; border-radius:18px; padding:36px 30px; transition:transform .34s cubic-bezier(.22,.61,.36,1),box-shadow .34s,border-color .34s,background .34s; }
.svc-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 22px 44px rgba(20,50,35,.13); border-color:color-mix(in srgb,var(--brand),#fff 55%); background:color-mix(in srgb,var(--brand),#fff 97%); }
.svc-extra { display:none; }
#services.show-all .svc-extra { display:block; }
.svc-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:26px; }
.svc-icon { color:var(--brand); display:inline-flex; }
.svc-num { font-family:'Poppins',sans-serif; font-weight:700; font-size:1.05rem; color:color-mix(in srgb,var(--brand),#fff 55%); }
.svc-card h3 { font-size:1.18rem; font-weight:700; margin:0 0 9px; color:#1D2A23; }
.svc-card p { color:#7A867F; font-size:.95rem; line-height:1.65; margin:0; }
.svc-more-wrap { text-align:center; margin-top:30px; }
.svc-more { cursor:pointer; }

/* Why */
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; }
.why-card { background:#fff; border-radius:18px; padding:34px 28px; text-align:center; border:1px solid #E8EEEA; transition:transform .3s,box-shadow .3s; }
.why-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(20,50,35,.10); }
.why-ic { width:64px; height:64px; border-radius:50%; margin:0 auto 18px; background:linear-gradient(145deg,var(--brand),color-mix(in srgb,var(--brand),#000 20%)); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px color-mix(in srgb,var(--brand),transparent 62%); }
.why-card h3 { font-size:1.22rem; font-weight:700; margin:0 0 10px; color:#1D2A23; }
.why-card p { color:#66756C; font-size:.98rem; line-height:1.7; margin:0; }

/* Portfolio */
.port-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
.port-card { border-radius:16px; overflow:hidden; background:#fff; border:1px solid #EBF0ED; cursor:pointer; transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s; }
.port-card:hover { transform:translateY(-8px); box-shadow:0 24px 46px rgba(20,50,35,.14); }
.port-cover { aspect-ratio:4/3; position:relative; background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--brand),#fff 88%) 0 14px,color-mix(in srgb,var(--brand),#fff 94%) 14px 28px); }
.port-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.port-nocover { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.72rem; color:color-mix(in srgb,var(--brand),#000 4%); opacity:.7; }
.port-tag { position:absolute; top:12px; left:12px; background:rgba(255,255,255,.92); color:color-mix(in srgb,var(--brand),#000 8%); font-size:.72rem; font-weight:600; padding:5px 11px; border-radius:999px; }
.port-count { position:absolute; bottom:12px; right:12px; background:rgba(18,32,26,.72); color:#fff; font-size:.72rem; font-weight:600; padding:5px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; }
.port-foot { padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:color-mix(in srgb,var(--brand),#000 6%); }
.port-foot h3 { font-size:1.04rem; font-weight:600; margin:0; color:#1D2A23; }

/* CTA */
.cta-sec { padding:clamp(56px,8vw,92px) 26px; }
.cta-rule { max-width:1160px; margin:0 auto clamp(40px,6vw,64px); height:1px; background:linear-gradient(90deg,transparent,#DDE6E0 20%,#DDE6E0 80%,transparent); }
.cta-quote { max-width:960px; margin:0 auto clamp(40px,5vw,60px); padding:0 12px; display:flex; align-items:stretch; justify-content:center; gap:clamp(8px,2vw,22px); }
.cta-quote .qmark { flex:none; font-family:'Poppins',serif; font-size:clamp(3.4rem,8vw,6rem); line-height:1; color:color-mix(in srgb,var(--brand),#fff 55%); }
.cta-quote .qmark-end { align-self:flex-end; }
.cta-quote p { align-self:center; font-size:clamp(1.4rem,3.2vw,2.15rem); font-weight:600; line-height:1.5; letter-spacing:-.3px; color:#1D2A23; margin:0; text-align:center; }
.cta-quote .q-em { color:var(--brand); }
/* Staggered line reveal for the quote — minimal soft rise + fade per line. */
.cta-quote-lines .q-line { display:block; opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.cta-quote-lines.in .q-line { opacity:1; transform:none; }
.cta-quote .qmark { opacity:0; transform:translateY(10px); transition:opacity .8s ease, transform .8s ease; }
.cta-quote .qmark.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .cta-quote-lines .q-line, .cta-quote .qmark { opacity:1; transform:none; } }
.cta-card { max-width:1050px; margin:0 auto; border-radius:26px; background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand),#000 30%)); color:#fff; padding:clamp(34px,5vw,56px) clamp(26px,5vw,56px); position:relative; overflow:hidden; box-shadow:0 30px 66px color-mix(in srgb,var(--brand),transparent 55%); }
.cta-blob { position:absolute; border-radius:50%; }
.cta-blob-1 { width:320px; height:320px; background:rgba(255,255,255,.08); top:-120px; right:-90px; }
.cta-blob-2 { width:220px; height:220px; background:rgba(255,255,255,.06); bottom:-110px; left:-60px; }
.cta-grid { position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,46px); align-items:center; }
.cta-grid-noqr { grid-template-columns:1fr; text-align:center; }
.cta-qr { display:flex; flex-direction:column; align-items:center; gap:14px; }
.cta-qr-box { background:#fff; padding:14px; border-radius:20px; box-shadow:0 18px 40px rgba(0,0,0,.22); }
.cta-qr-box img { width:clamp(150px,40vw,190px); height:clamp(150px,40vw,190px); border-radius:10px; object-fit:cover; }
.cta-qr-label { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem; }
.cta-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); color:#fff; font-weight:600; font-size:.82rem; padding:7px 15px; border-radius:999px; margin-bottom:16px; }
.cta-copy h2 { font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:700; letter-spacing:-.4px; margin:0 0 12px; }
.cta-copy p { font-size:1.06rem; line-height:1.7; opacity:.92; margin:0 0 28px; max-width:440px; }
.cta-grid-noqr .cta-copy p { margin-left:auto; margin-right:auto; }
.cta-btns { display:flex; gap:12px; flex-wrap:wrap; }
.cta-grid-noqr .cta-btns { justify-content:center; }
.cta-btn { display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:700; font-size:.98rem; padding:14px 24px; border-radius:var(--radius); transition:transform .22s,box-shadow .22s,filter .22s; }
.cta-btn:hover { transform:translateY(-3px); }
.cta-btn-white { background:#fff; color:color-mix(in srgb,var(--brand),#000 12%); }
.cta-btn-line { background:#06C755; color:#fff; }
.cta-btn-map { background:#4285F4; color:#fff; }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:24px; align-items:stretch; }
.contact-info { background:#fff; border-radius:20px; padding:30px 28px; border:1px solid #E8EEEA; }
.ci-brand { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.ci-logo { width:48px; height:48px; border-radius:12px; object-fit:cover; }
.ci-name { font-weight:700; font-size:1.12rem; color:#1B271F; }
.ci-tax { font-size:.82rem; color:#7A867F; margin-top:2px; }
.ci-row { display:flex; align-items:flex-start; gap:12px; padding:12px 0; color:#47554D; border-top:1px solid #F1F4F2; }
.ci-row svg { flex:none; color:var(--brand); margin-top:2px; }
.ci-row a { text-decoration:none; }
.ci-btns { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.ci-line,.ci-fb { display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:600; font-size:.92rem; padding:11px 18px; border-radius:12px; transition:transform .2s,filter .2s; }
.ci-line:hover,.ci-fb:hover { transform:translateY(-2px); filter:brightness(1.06); }
.ci-line { background:#06C755; color:#fff; }
.ci-fb { background:#1877F2; color:#fff; }
.contact-map { border-radius:20px; overflow:hidden; border:1px solid #E8EEEA; display:flex; min-height:340px; }
.contact-map iframe { border:0; width:100%; flex:1; min-height:340px; }
.map-ph { flex:1; display:flex; align-items:center; justify-content:center; color:#9AA8A0; background:#fff; }

/* Footer */
.footer { background:#16211B; color:#A7BAAF; padding:clamp(44px,6vw,64px) 26px 0; }
.footer-inner { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:36px; padding-bottom:36px; }
.footer-brand { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img { width:40px; height:40px; border-radius:10px; object-fit:cover; }
.footer-brand .brand-name { color:#fff; }
.footer-desc { font-size:.92rem; line-height:1.7; margin:0; max-width:280px; }
.footer-desc span { display:block; font-weight:600; color:#fff; margin-bottom:6px; }
.footer-col h4 { color:#fff; font-size:1rem; margin:0 0 14px; }
.footer-col a,.footer-item { display:block; color:#A7BAAF; text-decoration:none; margin-bottom:8px; font-size:.92rem; }
.footer-col a:hover { color:#fff; }
.footer-bottom { max-width:1160px; margin:0 auto; padding:22px 0; border-top:1px solid rgba(255,255,255,.09); font-size:.82rem; color:#7E9188; text-align:center; }

/* Floating LINE */
.fab-line { position:fixed; right:18px; bottom:18px; z-index:60; display:inline-flex; align-items:center; gap:9px; background:#06C755; color:#fff; text-decoration:none; font-weight:700; font-size:.95rem; padding:14px 20px; border-radius:999px; box-shadow:0 10px 26px rgba(6,199,85,.44); transition:transform .2s,filter .2s; }
.fab-line:hover { transform:translateY(-3px); filter:brightness(1.05); }

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(12,20,16,.94); display:none; flex-direction:column; align-items:center; justify-content:center; padding:20px; }
.lightbox.open { display:flex; }
.lb-stage { flex:1; display:flex; align-items:center; justify-content:center; max-height:70vh; width:100%; }
.lb-stage img { max-width:92vw; max-height:70vh; border-radius:12px; object-fit:contain; }
.lb-close,.lb-prev,.lb-next { position:absolute; background:rgba(255,255,255,.14); color:#fff; border:0; width:48px; height:48px; border-radius:50%; font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lb-close { top:20px; right:20px; }
.lb-prev { left:16px; top:50%; transform:translateY(-50%); }
.lb-next { right:16px; top:50%; transform:translateY(-50%); }
.lb-thumbs { display:flex; gap:8px; overflow-x:auto; max-width:92vw; padding:16px 4px 4px; }
.lb-thumbs img { width:70px; height:70px; object-fit:cover; border-radius:8px; cursor:pointer; opacity:.55; flex:none; border:2px solid transparent; }
.lb-thumbs img.on { opacity:1; border-color:#fff; }

/* Preview bar */
.preview-bar { position:sticky; top:0; z-index:70; background:#17221C; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 16px; font-size:.85rem; }
.preview-bar a { color:#8FE3AC; text-decoration:none; }
.preview-sizes button { background:rgba(255,255,255,.12); color:#fff; border:0; padding:6px 12px; border-radius:8px; cursor:pointer; margin-left:4px; }
.preview-sizes button.on { background:var(--brand); }
body.vp-tablet #site-root { max-width:820px; margin:0 auto; box-shadow:0 0 0 100vw rgba(0,0,0,.15); }
body.vp-mobile #site-root { max-width:400px; margin:0 auto; box-shadow:0 0 0 100vw rgba(0,0,0,.15); }

/* Reveal animation */
[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1); }
[data-reveal].in { opacity:1; transform:none; }

/* Responsive */
@media (max-width:880px) {
  .hero-inner { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .cta-grid { grid-template-columns:1fr; text-align:center; }
  .cta-copy p { margin-left:auto; margin-right:auto; }
  .cta-btns { justify-content:center; }
  .footer-inner { grid-template-columns:1fr 1fr; row-gap:28px; }
  .nav-links { display:none; }
  .menu-btn { display:flex; }
}

/* ── Mobile phones: keep the hero from overflowing the screen ── */
@media (max-width:600px) {
  .footer-inner { grid-template-columns:1fr; }
  /* Navbar must be FULLY opaque on phones — the see-through version let the
     hero badge below show through and overlap the brand name. */
  .nav { background:#fff; backdrop-filter:none; }
  .nav-inner { padding:12px 16px; }
  .hero-inner { padding:34px 18px 48px; }
  /* Headline: smaller + allow Thai (no spaces = one long "word") to wrap
     instead of running off the right edge. */
  .hero-h1 { font-size:23px; line-height:1.2; letter-spacing:0; }
  .hero-h1, .hero-h1 .shine { word-break:break-word; overflow-wrap:anywhere; white-space:normal; }
  .hero-p  { font-size:.98rem; max-width:100%; }
  /* Hero image frame stays fully inside the screen. On phones we ignore the
     admin's fixed pixel height + aspect ratio (which computed a width wider
     than the screen and got clipped) — width leads, height follows. */
  .hero-graphic { min-height:0; width:100%; }
  .hero-frame-wrap { padding:4px; max-width:100%; width:100%; }
  .hero-frame { width:100%; max-width:100%; height:auto !important; aspect-ratio:16/10 !important; max-height:56vh; }
  .hero-slide { object-fit:cover; }
  /* Decorative floating chips overlap the frame on small screens and read as
     a "cut" image — hide them on phones. */
  .hero-float { display:none; }
  /* Brand text under the logo: keep name + sub on their own lines, no overflow. */
  .brand-name { font-size:1.02rem; }
  .brand-sub { font-size:.64rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw; }
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} [data-reveal]{opacity:1;transform:none} }