/* Thai Webstudio — v2 "Quiet Luxury" design system. Self-contained, CSP-safe (self-hosted fonts). */
@import url("/assets/fonts/premium-fonts.css");

:root{
  --ink:#0C1210; --ink-2:#101815; --ink-3:#16211c;
  --bone:#F2EFE7; --bone-2:#E8E4D8; --bone-3:#DCD7C8;
  --brass:#C29A4C; --brass-deep:#8c6a2e; --clay:#3f8f6f;
  --muted:#7e847a; --muted-lo:#9aa096;
  --line:rgba(12,18,16,.13); --line-dk:rgba(242,239,231,.15);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --tserif:'Noto Serif Thai','Cormorant Garamond',serif;
  --tsans:'Sarabun',system-ui,sans-serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --maxw:1240px; --pad:clamp(20px,5vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bone);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
:lang(th),.th{font-family:var(--tsans)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--brass)}
.serif{font-family:var(--serif)}
h2.sec{font-family:var(--tserif);font-weight:600;font-size:clamp(28px,4vw,50px);line-height:1.22;letter-spacing:-.005em;max-width:20ch}
.sec-en{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,52px);line-height:1.05}

/* reveal motion (progressive; visible by default under no-JS) */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
html.no-js .reveal{opacity:1;transform:none}

/* NAV */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;padding:22px 0;transition:background .4s,padding .4s,box-shadow .4s}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:.01em;color:var(--bone);white-space:nowrap;transition:color .4s}
.brand .dot{color:var(--brass)}
.brand em{display:none}
.nav{display:flex;gap:30px;align-items:center}
.nav a{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#d3c9b6;font-weight:500;transition:color .3s}
.nav a:hover{color:var(--bone)}
.nav .nav-line{font-family:var(--tsans);text-transform:none;letter-spacing:.02em;font-size:12.5px;border:1px solid var(--brass);color:var(--bone);padding:8px 18px;border-radius:100px}
.nav .nav-line:hover{background:var(--brass);color:var(--ink)}
.topbar.scrolled{background:rgba(242,239,231,.92);backdrop-filter:blur(12px);padding:14px 0;box-shadow:0 1px 0 var(--line)}
.topbar.scrolled .brand{color:var(--ink)}
.topbar.scrolled .nav a{color:#5c5344}.topbar.scrolled .nav a:hover{color:var(--ink)}
.topbar.scrolled .nav .nav-line{color:var(--ink)}
.nav-toggle{display:none}

/* HERO — type-forward on deep ink */
.hero{position:relative;background:var(--ink);color:var(--bone);min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero .heromesh{position:absolute;inset:0;z-index:0;--mkx-mesh-a:#2f7d5e;--mkx-mesh-b:#3f9b7a;--mkx-mesh-c:#b8904a;--mkx-mesh-opacity:.6;--mkx-ambient-duration:42s}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(120% 90% at 82% 8%,rgba(194,154,76,.10),transparent 52%),
  linear-gradient(to top,rgba(5,10,8,.60),transparent 46%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:160px;padding-bottom:60px}
@media (prefers-reduced-motion:no-preference){
  .hero .wrap{animation:heroIn 1.05s cubic-bezier(.2,.7,.2,1) both}
  @keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
}
.hero .idx{position:absolute;top:160px;right:var(--pad);font-family:var(--serif);font-size:15px;color:var(--muted);letter-spacing:.08em}
.kick{display:flex;align-items:center;gap:15px;margin-bottom:24px}
.kick .rule{width:60px;height:1px;background:var(--brass)}
.hero h1{font-family:var(--tserif);font-weight:600;font-size:clamp(38px,6.2vw,88px);line-height:1.14;letter-spacing:-.006em;max-width:16ch}
.hero h1 .accent{color:var(--brass)}
.hero .en{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(19px,2.2vw,29px);color:#d8cdb8;margin-top:20px;max-width:34ch;line-height:1.36}
.hero .lead{font-family:var(--tsans);font-size:16px;color:#b6ab98;margin-top:24px;max-width:48ch;line-height:1.85}
.hero-actions{display:flex;align-items:center;gap:26px;margin-top:38px;flex-wrap:wrap}
.link-cta{font-family:var(--tsans);font-size:16px;color:var(--bone);border-bottom:1px solid var(--brass);padding-bottom:5px;transition:color .3s}
.link-cta:hover{color:var(--brass)}
.line-pill{display:inline-flex;align-items:center;gap:9px;background:#06C755;color:#04331b;font-weight:600;font-size:13.5px;font-family:var(--tsans);padding:12px 22px;border-radius:100px;transition:transform .3s}
.line-pill:hover{transform:translateY(-2px)}
.hero-meta{display:flex;gap:40px;margin-top:44px;flex-wrap:wrap}
.hero-meta div{border-top:1px solid var(--line-dk);padding-top:12px;min-width:120px}
.hero-meta dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero-meta dd{font-family:var(--serif);font-size:24px;color:var(--bone);margin-top:3px}
.scroll-hint{position:absolute;bottom:30px;right:var(--pad);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* NOTICE strip */
.notice{background:var(--ink-2);color:#c2c9be;font-family:var(--tsans);font-size:13.5px;line-height:1.7}
.notice .wrap{padding:18px var(--pad);display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.notice strong{color:var(--brass);font-weight:600;white-space:nowrap}

/* STATEMENT */
.statement{padding:clamp(80px,12vw,140px) 0}
.statement .big{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.6vw,48px);line-height:1.3;max-width:22ch;color:var(--ink)}
.statement .big em{font-style:italic;color:var(--brass-deep)}
.statement .sub{font-family:var(--tserif);font-weight:400;font-size:clamp(17px,1.6vw,20px);line-height:1.85;color:#5b5241;max-width:52ch;margin-top:28px}

/* SECTION scaffold */
.section{padding:clamp(70px,10vw,120px) 0}
.section .head{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 0;margin-bottom:clamp(36px,5vw,58px)}
.section .head .eyebrow{margin-bottom:16px;display:block}
.section .head p.intro{font-family:var(--tsans);color:#5b5241;font-size:16px;line-height:1.85;max-width:52ch;margin-top:18px}

/* SERVICES — editorial 2-col rows, no cards/emoji */
.svc-list{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,72px)}
.svc-list .row{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line)}
.svc-list .num{font-family:var(--serif);font-size:19px;color:var(--brass)}
.svc-list h3{font-family:var(--tserif);font-weight:600;font-size:20px;line-height:1.4}
.svc-list p{font-family:var(--tsans);font-size:14.5px;color:#5f5645;line-height:1.8;margin-top:6px}

/* PORTFOLIO */
.work{background:var(--ink);color:var(--bone)}
.work .head h2 .thai{font-family:var(--tserif);font-weight:600;display:block;font-size:.62em;color:var(--brass);margin-top:10px}
.work .head{display:flex;justify-content:space-between;align-items:flex-end}
.work .head .eyebrow{color:var(--brass)}
.work .head .h2en{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4vw,54px);line-height:1;margin-top:8px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.piece{grid-column:span 1}.piece.wide{grid-column:span 2}
.frame{display:block;position:relative;border-radius:7px;overflow:hidden;aspect-ratio:16/10;background:#12201a center/cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.piece.wide .frame{aspect-ratio:21/9}
.frame-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.frame::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(5,11,8,.72),rgba(5,11,8,.05) 55%)}
.frame:hover{transform:translateY(-4px)}
.frame .cap{position:absolute;left:26px;bottom:22px;right:26px;z-index:2}
.frame .cap .n{font-family:var(--serif);font-size:13px;color:var(--brass);letter-spacing:.14em}
.frame .cap .t{display:block;font-family:var(--serif);font-size:27px;font-weight:500;margin-top:1px}
.frame .cap .m{display:block;font-family:var(--tsans);font-size:12.5px;color:#c8bda7;letter-spacing:.03em;margin-top:3px}
.work .foot{margin-top:34px;font-family:var(--tsans);font-size:13px;color:var(--muted-lo);font-style:italic}

/* PROCESS — vertical editorial steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.steps .st{border-top:2px solid var(--brass);padding-top:20px}
.steps .st .n{font-family:var(--serif);font-size:15px;color:var(--brass);letter-spacing:.1em}
.steps .st h3{font-family:var(--tserif);font-weight:600;font-size:19px;margin-top:8px;line-height:1.4}
.steps .st p{font-family:var(--tsans);font-size:14px;color:#5f5645;line-height:1.75;margin-top:8px}

/* OFFER — editorial price rows */
.offer{background:var(--bone-2)}
.offer .row{display:grid;grid-template-columns:1.4fr 0.7fr 2fr;gap:24px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line)}
.offer .row:last-child{border-bottom:1px solid var(--line)}
.offer .row.star{background:linear-gradient(90deg,rgba(194,154,76,.10),transparent 70%);margin:0 calc(var(--pad)*-1);padding-left:var(--pad);padding-right:var(--pad)}
.offer .kind{font-family:var(--tsans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-deep);font-weight:600}
.offer h3{font-family:var(--serif);font-size:26px;color:var(--ink);font-weight:600}
.offer p{font-family:var(--tsans);font-size:14px;color:#5f5645;line-height:1.75}

/* QUALITY — editorial 2x2 */
.quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px)}
.quality-grid .q{border-left:2px solid var(--brass);padding:4px 0 4px 22px}
.quality-grid .q strong{font-family:var(--tserif);font-weight:600;font-size:18px;display:block}
.quality-grid .q span{font-family:var(--tsans);font-size:14px;color:#5f5645;line-height:1.8;display:block;margin-top:8px}

/* ENGLISH-LINK band */
.enband{background:var(--ink);color:var(--bone)}
.enband .wrap{padding:clamp(50px,7vw,84px) var(--pad);display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.enband .l .eyebrow{color:var(--brass)}
.enband .l h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,40px);margin-top:8px}
.enband .l .th{font-family:var(--tsans);color:#b6ab98;font-size:14.5px;margin-top:8px;max-width:46ch;line-height:1.8}
.ghost-cta{font-family:var(--tsans);border:1px solid var(--brass);color:var(--bone);padding:14px 28px;border-radius:100px;font-size:14px;white-space:nowrap;transition:background .3s,color .3s}
.ghost-cta:hover{background:var(--brass);color:var(--ink)}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.contact-grid .c{border-top:1px solid var(--line);padding-top:20px}
.contact-grid .c strong{font-family:var(--tserif);font-weight:600;font-size:17px;display:block;margin-bottom:10px}
.contact-grid .c a{color:var(--brass-deep);font-family:var(--tsans);font-size:15px;border-bottom:1px solid transparent;transition:border-color .3s}
.contact-grid .c a:hover{border-color:var(--brass)}
.contact-grid .c span{font-family:var(--tsans);font-size:14.5px;color:#5f5645;line-height:1.7}
.contact-grid .line-cta{display:inline-block;margin-top:10px;background:#06C755;color:#04331b;font-weight:600;padding:9px 18px;border-radius:100px;font-size:13px;border:none}

/* FOOTER */
.footer{background:var(--ink);color:#b0a794;padding:clamp(56px,7vw,80px) 0 44px;font-family:var(--tsans);font-size:13.5px;line-height:1.85}
.footer .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:40px}
.footer .brand{font-family:var(--serif);font-size:22px;color:var(--bone);display:block;margin-bottom:16px}
.footer a{color:var(--brass);border-bottom:1px solid transparent}.footer a:hover{border-color:var(--brass)}
.footer .legal strong{color:#d3c9b6;font-weight:600;display:block;margin-bottom:6px}
.footer .legal span{display:block;color:#8c8371}
.footer .copy{grid-column:1/-1;border-top:1px solid var(--line-dk);margin-top:30px;padding-top:22px;color:#7d7361;font-size:12.5px}

/* EN pages — Cormorant serif headings instead of Thai serif */
body.en h2.sec{font-family:var(--serif);font-weight:600;letter-spacing:0;line-height:1.1}
body.en .hero h1{font-family:var(--serif);font-weight:600;letter-spacing:0;line-height:1.06;font-size:clamp(44px,6.6vw,96px);max-width:15ch}
body.en .svc-list h3,body.en .steps .st h3,body.en .quality-grid .q strong,body.en .contact-grid .c strong{font-family:var(--serif);font-weight:600;font-size:21px}
body.en .hero .lead,body.en .section .head p.intro,body.en .svc-list p,body.en .steps .st p,body.en .offer p,body.en .quality-grid .q span,body.en .contact-grid .c span{font-family:var(--sans)}
body.en .notice,body.en .statement .sub{font-family:var(--sans)}

/* RESPONSIVE */
@media (max-width:900px){
  .svc-list{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr}.piece.wide{grid-column:span 1}.piece.wide .frame{aspect-ratio:16/10}
  .offer .row{grid-template-columns:1fr;gap:6px}.offer .row.star{margin:0;padding:26px 16px}
  .quality-grid,.contact-grid{grid-template-columns:1fr}
  .footer .wrap{grid-template-columns:1fr}
  .work .head{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:680px){
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;background:rgba(10,16,13,.97);backdrop-filter:blur(10px);padding:24px var(--pad);gap:18px;align-items:flex-start;transform:translateY(-130%);transition:transform .4s;border-bottom:1px solid var(--line-dk)}
  .nav.open{transform:none}
  .nav a{color:#e7ddca;font-size:14px}
  .nav-toggle{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
  .nav-toggle span{width:26px;height:2px;background:var(--bone);transition:background .3s}
  .topbar.scrolled .nav-toggle span{background:var(--ink)}
  .hero .idx,.scroll-hint{display:none}
  .steps{grid-template-columns:1fr}
  .hero-meta{gap:22px}
}