/* Layout: same structure as the original Enfold homepage, rebuilt mobile-first */
:root{
  --navy:#072f4c; --blue:#0f5a93; --blue-2:#094978; --sky:#e9f1f8;
  --ink:#1e2b36; --muted:#5d6d7a; --line:#dbe3ea; --paper:#ffffff;
  --display:"Cormorant Garamond","Noto Serif Thai","Noto Serif SC",Georgia,serif;
  --body:"Open Sans","Sarabun","Noto Sans SC",Helvetica,Arial,sans-serif;
  --gut:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 var(--body);-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:inherit}
a[href^="tel:"]{white-space:nowrap}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.2;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut-r)}
:lang(th) h1,:lang(th) h2,:lang(th) h3{line-height:1.4}
:focus-visible{outline:3px solid #7fb3e0;outline-offset:2px}

/* Top bar + header */
.topbar{background:var(--navy);color:#fff;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:6px}
.topbar a{text-decoration:none;font-weight:600}
.lang{display:flex;gap:4px}
.lang button{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;font:600 13px var(--body);padding:4px 10px;border-radius:3px;cursor:pointer;min-height:32px}
.lang button[aria-pressed="true"]{background:#fff;color:var(--navy)}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#fff;border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:#fff}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.logo img{height:52px;width:auto}
.menu-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;background:none;cursor:pointer;color:var(--navy)}
.menu-btn svg{width:28px;height:28px}
nav.main{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(7,47,76,.12)}
nav.main ul{list-style:none;margin:0;padding:8px var(--gut-r) 16px var(--gut)}
nav.main a{display:block;padding:12px 4px;text-decoration:none;font-size:16px;color:var(--ink);border-bottom:1px solid var(--line)}
nav.main a.active{color:var(--blue);font-weight:600}
nav.main .sub a{padding-left:20px;font-size:15px;color:var(--muted)}

/* Hero */
.hero{position:relative;color:#fff;background:var(--navy) url("https://www.mlc-thailand.com/wp-content/uploads/2023/04/ANT_0687-Edit-1500x998.png") center/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(7,47,76,.72),rgba(15,90,147,.62))}
.hero .wrap{position:relative;text-align:center;padding-block:64px 56px}
.hero .kicker{font-size:clamp(17px,2.4vw,24px);margin-bottom:10px;opacity:.95}
.hero h1{font-size:clamp(34px,6.4vw,64px)}

/* Service cards */
.services{background:var(--sky)}
.services .grid{display:grid;gap:0;grid-template-columns:1fr}
.svc{padding:36px 28px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.svc h3{font-size:clamp(26px,3vw,30px)}
.svc p{font-size:15px;max-width:42ch}
.svc.c1{background:#fff;color:var(--ink)}
.svc.c2{background:var(--blue);color:#fff}
.svc.c3{background:var(--navy);color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 26px;border-radius:999px;font:600 15px var(--body);text-decoration:none;margin-top:auto}
.btn.dark{background:var(--navy);color:#fff}
.btn.light{background:#fff;color:var(--navy)}

/* Sections */
section.block{padding-block:64px}
.head{text-align:center;max-width:760px;margin:0 auto 40px}
.head h2{font-size:clamp(32px,4.4vw,46px);color:var(--ink)}
.head p{color:var(--muted);margin-top:10px}
.divider{width:110px;height:1px;background:var(--line);margin:22px auto 0;position:relative}
.divider::after{content:"";position:absolute;left:50%;top:-4px;width:9px;height:9px;margin-left:-5px;border-radius:50%;background:var(--muted)}

.contact-grid{display:grid;gap:20px;grid-template-columns:1fr}
.contact{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid var(--line);border-radius:6px}
.contact .ic{flex:0 0 52px;height:52px;border-radius:50%;background:var(--sky);color:var(--blue);display:flex;align-items:center;justify-content:center}
.contact .ic svg{width:24px;height:24px}
.contact h3{font-size:24px;margin-bottom:4px}
.contact p{color:var(--muted);font-size:15px;min-width:0;overflow-wrap:anywhere}
.contact a{color:var(--blue);font-weight:600}

.team{display:grid;gap:36px;grid-template-columns:1fr;margin-top:56px}
.team h3{font-size:clamp(28px,3.4vw,36px);margin-bottom:12px}
.team p{color:var(--muted);max-width:65ch}

.band{background:linear-gradient(45deg,var(--blue-2),var(--blue));color:#fff;text-align:center}
.band .wrap{padding-block:48px;display:flex;flex-direction:column;align-items:center;gap:12px}
.band h2{font-size:clamp(28px,4vw,40px)}
.band p{max-width:60ch;opacity:.92}

.areas{display:grid;gap:24px;grid-template-columns:1fr}
.area{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.area .pic{aspect-ratio:845/321;max-width:100%;background:var(--navy) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#fff}
.area .pic svg{width:46px;height:46px;opacity:.85}
.area .body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.area h3{font-size:26px}
.area p{color:var(--muted);font-size:15px}
.area .btn{align-self:flex-start}

.stats .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 16px;padding-block:44px;text-align:center}
.stat b{display:block;font:600 clamp(34px,5vw,48px)/1.1 var(--display);font-variant-numeric:tabular-nums}
.stat span{font-size:14px;opacity:.9}

footer{background:var(--navy);color:#d7e3ee;font-size:15px}
footer .ask{background:var(--sky);color:var(--ink);text-align:center}
footer .ask .wrap{padding-block:44px;display:flex;flex-direction:column;gap:8px;align-items:center}
footer .ask h2{font-size:clamp(26px,3.6vw,34px)}
footer .ask a{color:var(--blue);font-weight:600;overflow-wrap:anywhere}
footer .cols{display:grid;gap:28px;grid-template-columns:1fr;padding-block:44px}
footer h4{font:600 13px var(--body);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin:0 0 10px}
footer .brand{font:600 34px var(--display);color:#fff;line-height:1}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
.socket{border-top:1px solid rgba(255,255,255,.12);font-size:13px}
.socket .wrap{padding-block:16px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* Mobile quick-action bar */
.quick{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:repeat(3,1fr);background:var(--navy);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);box-shadow:0 -4px 16px rgba(0,0,0,.18)}
.quick a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;color:#fff;text-decoration:none;font-size:12px;font-weight:600}
.quick a+a{border-left:1px solid rgba(255,255,255,.14)}
.quick svg{width:22px;height:22px}
body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}

/* Tablet (iPad portrait and up) */
@media (min-width:700px){
  .contact-grid{grid-template-columns:repeat(3,1fr)}
  .contact{flex-direction:column;align-items:center;text-align:center}
  .areas{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:1fr 1fr}
  .stats .wrap{grid-template-columns:repeat(4,1fr)}
  footer .cols{grid-template-columns:1.3fr 1fr 1fr}
}
/* Desktop + iPad landscape */
@media (min-width:1024px){
  .menu-btn{display:none}
  nav.main{position:static;box-shadow:none;border:0;background:none}
  nav.main[hidden]{display:block!important}
  nav.main > ul{display:flex;gap:4px;padding:0}
  nav.main li{position:relative}
  nav.main > ul > li > a{border:0;padding:24px 12px;font-size:14px;color:var(--muted)}
  nav.main > ul > li > a.active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--blue)}
  nav.main .sub{display:none}
  nav.main li:hover > .subwrap .sub, nav.main li:focus-within > .subwrap .sub{display:block}
  .subwrap{position:absolute;left:0;top:100%;min-width:240px}
  nav.main .sub{background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px rgba(7,47,76,.12);padding:6px 0}
  nav.main .sub a{padding:10px 16px;border:0}
  .hero .wrap{padding-block:120px 170px}
  .services{background:linear-gradient(to bottom,transparent 0,transparent 110px,#fff 110px)}
  .services .grid{grid-template-columns:repeat(3,1fr);margin-top:-110px;position:relative}
  .hero + .services{background:none;position:relative}
  .areas{grid-template-columns:repeat(3,1fr)}
  .quick{display:none}
  body{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.pagehead{background:linear-gradient(45deg,var(--blue-2),var(--blue));color:#fff}
.pagehead .wrap{padding-block:48px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.pagehead h1{font-size:clamp(34px,5vw,52px)}
.pagehead p{opacity:.9;max-width:60ch}
.lead{font-size:18px;color:var(--muted);max-width:65ch;margin:0 auto 40px;text-align:center}
.details{display:grid;gap:24px;grid-template-columns:1fr}
.detail{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.detail .pic{aspect-ratio:845/321;max-width:100%;background:var(--navy) center/cover no-repeat}
.detail .body{padding:24px;display:flex;flex-direction:column;gap:10px}
.detail h2{font-size:clamp(26px,3vw,32px)}
.detail p{color:var(--muted)}
.detail h4{font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:6px 0 0}
.detail ul{margin:0;padding-left:20px}
.cards3{display:grid;gap:20px;grid-template-columns:1fr;margin-top:48px}
.linkcard{display:flex;flex-direction:column;gap:6px;padding:24px;border:1px solid var(--line);border-radius:6px;text-decoration:none;background:#fff;min-height:48px}
.linkcard h3{font-size:26px;color:var(--ink)}
.linkcard p{color:var(--muted);font-size:15px}
.linkcard span{color:var(--blue);font-weight:600;margin-top:auto}
.linkcard:hover{border-color:var(--blue)}
.people{display:grid;gap:24px;grid-template-columns:1fr}
.person{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.person img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:top;background:var(--sky)}
.person .body{padding:22px;display:flex;flex-direction:column;gap:6px}
.person h2{font-size:26px}
.person .role{color:var(--blue);font-weight:600;font-size:14px}
.person p{color:var(--muted);font-size:15px}
.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.logos figure{margin:0;border:1px solid var(--line);border-radius:6px;padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;background:#fff}
.logos img{height:90px;width:100%;object-fit:contain}
.logos figcaption{font-size:14px;color:var(--muted)}
.office{margin-top:48px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.office h2{font-size:clamp(28px,3.4vw,36px)}
.office p{color:var(--muted);max-width:50ch}
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:26px;margin:28px 0 6px}
.prose p{margin:8px 0}
.prose ul{padding-left:20px;margin:8px 0}
.disc{opacity:.75;max-width:80ch}
.center{text-align:center;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (min-width:700px){.details,.people{grid-template-columns:1fr 1fr}.cards3,.logos{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.people{grid-template-columns:repeat(3,1fr)}}