/* Titah Manufacturing — site styles
   Built from Figma file "Titah Manufacturing — Website v2" (desktop frames @1440).
   Design tokens mirror the Figma variables. */
:root{
  --ink:#2b2d30; --ink-2:#55585c; --ink-inv:#f4f2ee; --ink-inv-2:#b8bbbf;
  --accent:#2f5f8f; --accent-dark:#7fa8d6;
  --surface:#f4f2ee; --raised:#fbfaf8; --sunken:#e8e5df; --inverse:#2b2d30;
  --line:#d3d0ca; --line-inv:#4a4d52; --line-strong:#2b2d30; --ti-grey:#8a8d91;
  --f-sans:"Jost","Noto Sans Thai",system-ui,sans-serif;
  --f-mono:"JetBrains Mono","Noto Sans Thai",ui-monospace,monospace;
  --f-thai:"Noto Sans Thai",var(--f-sans);
  --f-loc:var(--f-sans);
  --pad:80px;
}
html[lang="th"]{--f-loc:"IBM Plex Sans Thai",sans-serif}
html[lang="vi"]{--f-loc:"Be Vietnam Pro",sans-serif}
html[lang="ko"]{--f-loc:"IBM Plex Sans KR",sans-serif}
html[lang="ja"]{--f-loc:"IBM Plex Sans JP",sans-serif}
html.loc{--f-mono:"JetBrains Mono",var(--f-loc),ui-monospace,monospace}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--f-sans);font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
p,h1,h2,h3,h4,ul,ol,figure,dl,dd{margin:0;padding:0}
h1,h2,h3,h4{font-weight:400}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:none}
button,input,select,textarea{font:inherit;color:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--ink-inv);padding:8px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dark :focus-visible,.dark:focus-visible{outline-color:var(--accent-dark)}

/* ---------- type primitives ---------- */
.sans{font-family:var(--f-sans)}
.mono{font-family:var(--f-mono)}
.thai{font-family:var(--f-thai)}
.w3{font-weight:300}.w4{font-weight:400}.w5{font-weight:500}
.up{text-transform:uppercase}
.nowrap{white-space:nowrap}
.pre{white-space:pre}
/* localized-font hook (added by the generator on /th /vi /ko /ja pages) */
.L{font-family:var(--f-loc)!important}
.L.w3{font-weight:300}.L.w4{font-weight:400}.L.w5{font-weight:500}
.L.display{line-height:1.28!important;letter-spacing:0!important}
.L.lbl{letter-spacing:.02em!important}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1440px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding-top:112px;padding-bottom:112px}
.section--nopt{padding-top:0}
.bg-inverse{background:var(--inverse);color:var(--ink-inv)}
.bg-sunken{background:var(--sunken)}
.stack{display:flex;flex-direction:column}
.spacer{flex:1 0 0;min-height:1px}

/* ---------- top strip ---------- */
.topstrip{background:var(--inverse);color:var(--ink-inv-2);font-family:var(--f-mono);font-size:11px;letter-spacing:.44px;line-height:15px}
.topstrip .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px;gap:24px}
.topstrip__legal{white-space:nowrap}
.topstrip__right{display:flex;align-items:center;white-space:nowrap}
.langs{display:flex;gap:21px}
.langs a:hover{color:var(--ink-inv)}
.langs a[aria-current="true"]{color:var(--accent-dark);text-decoration:underline;text-underline-position:from-font}
.topstrip__contact{margin-left:42px}

/* ---------- nav ---------- */
.nav{background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:20}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:20px}
.logo{display:flex;align-items:center;gap:12px;color:var(--ink)}
.logo__mark{position:relative;width:34px;height:34px;flex:none}
.logo__mark img{position:absolute;inset:0;width:34px;height:34px}
.logo__ti{position:absolute;left:0;top:7.5px;width:34px;text-align:center;font-family:var(--f-sans);font-weight:500;font-size:13px;line-height:normal}
.logo__words{display:flex;flex-direction:column;gap:2px;line-height:normal;white-space:nowrap}
.logo__name{font-family:var(--f-sans);font-size:24px;letter-spacing:3.84px}
.logo__sub{font-family:var(--f-mono);font-weight:500;font-size:9px;letter-spacing:2.16px}
.nav__links{display:flex;align-items:center;gap:36px;font-family:var(--f-sans);font-weight:500;font-size:15px;line-height:normal;white-space:nowrap}
.nav__links a:hover{color:var(--accent)}
.nav__links a[aria-current="page"]{color:var(--accent);text-decoration:underline;text-underline-position:from-font}
.nav__toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:2px;width:44px;height:44px;padding:0;cursor:pointer;align-items:center;justify-content:center}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{display:block;width:20px;height:1.5px;background:var(--ink);position:relative;content:"";transition:transform .2s}
.nav__toggle span::before{position:absolute;top:-6px}
.nav__toggle span::after{position:absolute;top:6px}
.nav[data-open="true"] .nav__toggle span{background:transparent}
.nav[data-open="true"] .nav__toggle span::before{transform:translateY(6px) rotate(45deg)}
.nav[data-open="true"] .nav__toggle span::after{transform:translateY(-6px) rotate(-45deg)}
.nav__panel{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 20px 0 24px;border-radius:2px;border:1px solid transparent;font-family:var(--f-sans);font-weight:500;font-size:15px;letter-spacing:.3px;line-height:normal;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s;flex:none}
.btn img{width:16px;height:16px;flex:none}
.btn--primary{background:var(--accent);color:var(--ink-inv)}
.btn--primary:hover{background:#26507a}
.btn--secondary{border-color:var(--line-strong);color:var(--ink)}
.btn--secondary:hover{background:var(--raised)}
.btn--ondark{border-color:var(--ink-inv);color:var(--ink-inv)}
.btn--ondark:hover{background:rgba(244,242,238,.08)}
.actions{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}

/* ---------- spec label ---------- */
.speclabel{display:flex;align-items:center;gap:10px}
.speclabel::before{content:"";width:6px;height:6px;background:var(--accent);flex:none}
.speclabel span{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.96px;text-transform:uppercase;color:var(--ink-2);line-height:normal;white-space:nowrap}
.speclabel--dark::before{background:var(--accent-dark)}
.speclabel--dark span{color:var(--ink-inv-2)}

/* ---------- headings ---------- */
.h1{font-family:var(--f-sans);font-size:64px;line-height:1.06;letter-spacing:-.64px;color:var(--ink-inv)}
.h2{font-family:var(--f-sans);font-size:48px;line-height:normal;letter-spacing:-.48px;color:var(--ink);max-width:1040px}
.dark .h2,.h2--inv{color:var(--ink-inv)}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.sechead__copy{display:flex;flex-direction:column;gap:20px}
.lead{font-family:var(--f-sans);font-size:19px;line-height:1.55;color:var(--ink-inv-2);max-width:600px}

/* ---------- photo placeholder (design component: real photography pending) ---------- */
.ph{background:var(--sunken);border:1px dashed var(--ti-grey);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;text-align:center;padding:0 12px}
.ph img{width:28px;height:28px}
.ph__label{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.88px;text-transform:uppercase;color:var(--ink-2);line-height:normal}
.ph__cap{font-family:var(--f-mono);font-size:11px;color:var(--ink-2);line-height:normal}

/* ---------- product card ---------- */
.pcard{background:var(--raised);border:1px solid var(--line);display:flex;flex-direction:column;flex:1 0 0;min-width:0}
.pcard .ph{border:1px dashed var(--ti-grey)}
.pcard .ph{height:280px;width:100%}
.pcard__body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
.pcard__tag{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.66px;text-transform:uppercase;color:var(--accent);line-height:normal}
.pcard__name{font-family:var(--f-sans);font-weight:500;font-size:20px;line-height:normal}
.pcard__spec{font-family:var(--f-mono);font-size:12px;line-height:1.5;color:var(--ink-2)}
.pcard__div{height:1px;background:var(--line)}
.pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pcard__meta{font-family:var(--f-mono);font-size:12px;color:var(--ink-2);line-height:normal;white-space:nowrap}
.tlink{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-sans);font-weight:500;font-size:14px;color:var(--accent);line-height:normal;white-space:nowrap}
.tlink img{width:16px;height:16px}
.tlink:hover{text-decoration:underline}

/* ---------- common card/table bits ---------- */
.tag{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.96px;color:var(--accent);line-height:normal;white-space:nowrap}
.tag--up{text-transform:uppercase}
.t24{font-family:var(--f-sans);font-size:24px;line-height:normal}
.t15{font-family:var(--f-sans);font-size:15px;line-height:1.55;color:var(--ink-2)}
.note{font-family:var(--f-mono);font-size:12px;line-height:1.6;color:var(--ink-2)}
.cols{display:flex;align-items:stretch}
.cols>*{flex:1 0 0;min-width:0}
.ruled{border-top:1px solid var(--line-strong)}
.ruled--b{border-bottom:1px solid var(--line-strong)}
.cell{display:flex;flex-direction:column}
.cell+.cell{border-left:1px solid var(--line)}

/* ---------- HOME: hero ---------- */
.hero{background:var(--inverse);color:var(--ink-inv)}
.hero .wrap{padding-top:88px;display:flex;flex-direction:column;gap:72px}
.hero__row{display:flex;align-items:center;gap:64px}
.hero__copy{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.blueprint{position:relative;width:520px;height:520px;flex:none;overflow:hidden}
.blueprint>img{position:absolute;inset:0;width:520px;height:520px}
.blueprint p{position:absolute;white-space:nowrap;line-height:normal}
.bp-ti{left:260px;top:151.5px;width:320px;transform:translateX(-50%);text-align:center;font-family:var(--f-sans);font-weight:300;font-size:150px;color:var(--ink-inv)}
.bp-lbl{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.66px;color:var(--accent-dark)}
.bp-title{font-family:var(--f-mono);font-size:10px;letter-spacing:.6px;color:var(--ink-inv-2)}
.specbar{display:flex;border-top:1px solid var(--line-inv);white-space:nowrap}
.specbar>div{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:8px;padding:28px 24px 32px}
.specbar>div:first-child{padding-left:0}
.specbar>div+div{border-left:1px solid var(--line-inv)}
.specbar__k{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.88px;text-transform:uppercase;color:var(--ink-inv-2);line-height:normal}
.specbar__v{font-family:var(--f-sans);font-size:28px;color:var(--ink-inv);line-height:normal}
.footnote{padding-bottom:28px;font-family:var(--f-mono);font-size:11px;color:var(--ink-inv-2);line-height:normal}

/* entries */
.entries{display:flex;gap:24px;min-height:490px}
.entry{flex:1 0 0;min-width:0;background:var(--raised);border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.entry__title{font-family:var(--f-sans);font-size:30px;line-height:normal}
.entry__desc{font-family:var(--f-sans);font-size:16px;line-height:1.55;color:var(--ink-2)}
.dashlist{width:100%;font-family:var(--f-mono);font-size:13px}
.dashlist li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:flex-start}
.dashlist .dash{color:var(--ti-grey);line-height:normal;white-space:nowrap}
.dashlist .txt{flex:1 0 0;min-width:0;line-height:1.5;color:var(--ink)}
.entry .spacer{align-self:stretch}

.grid4{display:flex;gap:24px;align-items:stretch}

/* process */
.process{display:flex;border-top:1px solid var(--line-strong)}
.step{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:10px;padding:24px 24px 0 0}
.step__num{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.96px;color:var(--accent);line-height:normal}
.step__num::before{content:"";width:8px;height:8px;background:var(--accent);flex:none}
.step__title{font-family:var(--f-sans);font-size:24px;line-height:normal;white-space:nowrap}
.step__desc{font-family:var(--f-sans);font-size:15px;line-height:1.5;color:var(--ink-2)}
.photos3{display:flex;gap:24px}
.photos3 .ph{flex:1 0 0;min-width:0;height:320px}

/* proof */
.proofcards{display:flex;gap:24px;min-height:297px}
.proof{flex:1 0 0;min-width:0;background:var(--raised);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:14px}
.proof__foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;gap:12px}
.proof__id{font-family:var(--f-mono);font-size:12px;letter-spacing:.48px;color:var(--ink-2);white-space:nowrap;line-height:normal}
.compare{border-top:1px solid var(--line-strong)}
.compare__row{display:flex;gap:24px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.compare__row>*{flex:1 0 0;min-width:0;line-height:normal}
.compare__row>:first-child{flex:0 0 260px}
.compare__head{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.72px;text-transform:uppercase}
.compare__head>:nth-child(1){color:var(--ink-2)}
.compare__head>:nth-child(2){color:var(--accent)}
.compare__head>:nth-child(3){color:var(--ink-2)}
.compare__k{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.72px;text-transform:uppercase;color:var(--ink)}
.compare__a{font-family:var(--f-sans);font-size:16px;color:var(--ink)}
.compare__b{font-family:var(--f-sans);font-size:16px;color:var(--ink-2)}

/* local */
.localgrid{display:flex;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.localgrid>div{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:12px;padding:32px 28px 36px}
.localgrid>div:first-child{padding-left:0}
.localgrid>div+div{border-left:1px solid var(--line)}

/* CTA */
.cta{background:var(--inverse);color:var(--ink-inv)}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:0;padding-top:96px;padding-bottom:96px}
.cta__copy{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:20px}
.cta__h{font-family:var(--f-sans);font-size:48px;line-height:1.12;letter-spacing:-.48px;color:var(--ink-inv)}

/* footer */
.footer{background:var(--inverse);color:var(--ink-inv);border-top:1px solid var(--line-inv)}
.footer .wrap{display:flex;flex-direction:column;gap:48px;padding-top:56px;padding-bottom:32px}
.footer__top{display:flex;gap:48px;align-items:flex-start}
.footer__brand{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:16px}
.footer__name{font-family:var(--f-sans);font-size:28px;letter-spacing:4.48px;line-height:normal}
.footer__addr{font-family:var(--f-mono);font-size:12px;line-height:1.7;color:var(--ink-inv-2);max-width:360px}
.footer__col{width:220px;flex:none;display:flex;flex-direction:column;gap:12px;line-height:normal;white-space:nowrap}
.footer__h{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.88px;text-transform:uppercase;color:var(--ink-inv-2)}
.footer__col a,.footer__col span{font-family:var(--f-sans);font-size:15px;color:var(--ink-inv)}
.footer__col a:hover{color:var(--accent-dark)}
.footer__bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line-inv);padding-top:20px;font-family:var(--f-mono);font-size:11px;color:var(--ink-inv-2);line-height:normal}

/* ---------- inner pages ---------- */
.crumb{background:var(--inverse);color:var(--ink-inv-2)}
.crumb .wrap{padding-top:24px;font-family:var(--f-mono);font-size:11px;letter-spacing:.44px;line-height:normal;white-space:pre}
.crumb a:hover,.crumb--light a:hover{text-decoration:underline}
.phero{background:var(--inverse);color:var(--ink-inv)}
.phero .wrap{display:flex;align-items:center;gap:64px;padding-top:56px;padding-bottom:96px}
.phero__copy{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.phero .lead{font-size:18px}
.thai-line{font-family:var(--f-thai);font-size:18px;line-height:1.5;color:var(--accent-dark)}
.cafes-hero-ph{width:560px;height:600px;flex:none}

/* why grid (cafés) */
.why{display:flex;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.why>div{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:14px;padding:32px 28px 36px}
.why>div:first-child{padding-left:0}
.why>div+div{border-left:1px solid var(--line)}

/* programs */
.programs{display:flex;gap:24px;min-height:603px}
.program{flex:1 0 0;min-width:0;background:var(--raised);border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.program>*:not(.btn){align-self:stretch}
.program__title{font-family:var(--f-sans);font-size:28px;line-height:normal}
.pluslist{display:flex;flex-direction:column;gap:8px;line-height:normal}
.pluslist li{display:flex;gap:10px;align-items:flex-start}
.pluslist .plus{font-family:var(--f-mono);font-size:13px;color:var(--accent)}
.pluslist .txt{flex:1 0 0;min-width:0;font-family:var(--f-sans);font-size:15px;color:var(--ink)}
.kv{border-top:1px solid var(--line-strong);white-space:nowrap}
.kv>div{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);line-height:normal;gap:12px}
.kv dt{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.88px;text-transform:uppercase;color:var(--ink-2)}
.kv dd{margin:0;font-family:var(--f-mono);font-size:13px;color:var(--ink)}
.small-note{font-family:var(--f-mono);font-size:11px;color:var(--ink-2);line-height:normal;max-width:900px}

/* drops */
.drops{display:flex;border-top:1px solid var(--line-strong)}
.drop{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:10px;padding:24px 24px 0 0}
.drop__date{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.72px;text-transform:uppercase;color:var(--accent);line-height:normal;white-space:nowrap}
.drop__date::before{content:"";width:8px;height:8px;background:var(--accent);flex:none}
.drop__sub{font-family:var(--f-mono);font-size:13px;color:var(--ink-2);line-height:normal}

/* four coffees */
.scenes{display:flex;gap:24px}
.scene{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:14px}
.scene .ph{height:380px}
.scene__t{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.72px;color:var(--accent-dark);line-height:normal}
.scene__c{font-family:var(--f-sans);font-size:20px;color:var(--ink-inv);line-height:normal}

/* faq */
.faq .wrap{display:flex;gap:64px;align-items:flex-start}
.faq__head{width:420px;flex:none;display:flex;flex-direction:column;gap:20px}
.faq__h{font-family:var(--f-sans);font-size:40px;line-height:1.15;letter-spacing:-.4px}
.faq__list{flex:1 0 0;min-width:0;border-top:1px solid var(--line-strong)}
.faq__item{display:flex;flex-direction:column;gap:10px;padding:24px 0;border-bottom:1px solid var(--line)}
.faq__q{font-family:var(--f-sans);font-weight:500;font-size:20px;line-height:normal}
.faq__a{font-family:var(--f-sans);font-size:16px;line-height:1.55;color:var(--ink-2)}

/* OEM */
.oem-h1{font-size:60px;letter-spacing:-.6px}
.drawing{position:relative;width:500px;height:540px;flex:none;overflow:hidden}
.drawing>img{position:absolute;inset:0;width:500px;height:540px}
.drawing p{position:absolute;white-space:nowrap;line-height:normal}
.dw-lbl{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.44px;color:var(--accent-dark)}
.tiers{border-top:1px solid var(--line-strong)}
.tiers__row{display:flex;gap:24px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--line)}
.tiers__head{padding:14px 0;border-bottom:1px solid var(--line-strong);font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.88px;text-transform:uppercase;color:var(--ink-2);line-height:normal}
.tiers__row>:nth-child(1){flex:0 0 220px}
.tiers__row>:nth-child(2){flex:1 0 0;min-width:0}
.tiers__row>:nth-child(3){flex:0 0 140px}
.tiers__row>:nth-child(4),.tiers__row>:nth-child(5){flex:0 0 150px}
.tiers__row>:nth-child(6){flex:0 0 230px}
.tiers__name{font-family:var(--f-sans);font-weight:500;font-size:20px;line-height:normal}
.tiers__desc{font-family:var(--f-sans);font-size:16px;line-height:1.5;color:var(--ink-2)}
.tiers__v{font-family:var(--f-mono);font-size:14px;line-height:normal}
.caps{display:flex;border-top:1px solid var(--line-strong)}
.caps--last{border-bottom:1px solid var(--line-strong)}
.caps>div{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:10px;padding:28px 24px 32px}
.caps>div:first-child{padding-left:0}
.caps>div+div{border-left:1px solid var(--line)}
.caps__code{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.72px;color:var(--accent);line-height:normal}
.caps__t{font-family:var(--f-sans);font-size:22px;line-height:normal;white-space:nowrap}
.docs .wrap{display:flex;gap:64px;align-items:flex-start}
.docs__list{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:32px}
.doclist{border-top:1px solid var(--line-strong)}
.doclist li{display:flex;gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);line-height:normal}
.doclist .code{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.72px;color:var(--accent)}
.doclist .txt{font-family:var(--f-sans);font-size:18px}
.casecard{flex:1 0 0;min-width:0;background:var(--raised);border:1px solid var(--line);display:flex;flex-direction:column;gap:20px;padding-bottom:32px}
.casecard .ph{height:300px}
.casecard>p{padding:0 32px}

/* QUOTE */
.qbody .wrap{display:flex;gap:64px;align-items:flex-start;padding-top:48px;padding-bottom:112px}
.qform{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:40px}
.crumb--light{font-family:var(--f-mono);font-size:11px;letter-spacing:.44px;color:var(--ink-2);white-space:pre;line-height:normal}
.qh1{font-family:var(--f-sans);font-size:48px;line-height:1.1;letter-spacing:-.48px}
.formcard{background:var(--raised);border:1px solid var(--line);padding:40px;display:flex;flex-direction:column;gap:32px;margin:0}
.fgroup{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.flabel{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.88px;text-transform:uppercase;color:var(--ink-2);white-space:pre;line-height:normal;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;padding:12px 18px;border:1px solid var(--line-strong);border-radius:2px;background:var(--raised);font-family:var(--f-sans);font-size:15px;color:var(--ink);line-height:normal;white-space:nowrap;cursor:pointer;transition:background-color .12s,color .12s}
.chip input:checked+span{background:var(--inverse);border-color:var(--inverse);color:var(--ink-inv)}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.chip:hover input:not(:checked)+span{background:var(--surface)}
.frow{display:flex;gap:24px}
.field{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:8px}
.input{height:52px;width:100%;padding:0 16px;background:var(--raised);border:1px solid var(--line-strong);border-radius:2px;font-family:var(--f-sans);font-size:16px;color:var(--ink);outline:none}
.input::placeholder{color:var(--ink-2);opacity:1}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.dropzone{position:relative;background:var(--surface);border:1px dashed var(--ti-grey);display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 24px;text-align:center;line-height:normal;cursor:pointer}
.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.dropzone.is-over{background:var(--sunken);border-color:var(--accent)}
.dropzone__t{font-family:var(--f-sans);font-weight:500;font-size:16px;color:var(--accent)}
.dropzone__s{font-family:var(--f-mono);font-size:12px;color:var(--ink-2);white-space:pre}
.fsubmit{display:flex;align-items:center;gap:24px;border-top:1px solid var(--line);padding-top:28px}
.fsubmit .btn{border:0}
.fsubmit p{flex:1 0 0;min-width:0;font-family:var(--f-mono);font-size:12px;line-height:1.5;color:var(--ink-2)}
.form-status{font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.hp{display:none}
.qaside{width:400px;flex:none;display:flex;flex-direction:column;gap:24px}
.next{background:var(--inverse);color:var(--ink-inv);padding:32px;display:flex;flex-direction:column}
.next .speclabel{margin-bottom:20px}
.next__row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line-inv)}
.next__k{width:64px;flex:none;font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.48px;color:var(--accent-dark);line-height:normal}
.next__c{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:6px}
.next__t{font-family:var(--f-sans);font-size:20px;line-height:normal;color:var(--ink-inv)}
.next__d{font-family:var(--f-sans);font-size:14px;line-height:1.55;color:var(--ink-inv-2)}
.contactbox{background:var(--raised);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:16px;line-height:normal;white-space:nowrap}
.contactbox__h{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.88px;color:var(--ink-2)}
.contactbox__row{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);gap:12px}
.contactbox__row span:first-child{font-family:var(--f-sans);font-size:15px;color:var(--ink-2)}
.contactbox__row span:last-child{font-family:var(--f-mono);font-size:13px;color:var(--ink)}

/* RETAIL (v3 shop layout) */
.shopnav{background:var(--inverse);color:var(--ink-inv);position:relative;z-index:20}
.shopnav .wrap{display:flex;align-items:center;gap:28px;padding:26px 120px;max-width:1440px}
.shoplogo{display:flex;align-items:center;gap:10px;flex:none}
.shoplogo__mark{position:relative;width:34px;height:34px;border:1px solid var(--ink-inv)}
.shoplogo__mark span{position:absolute;left:7px;top:4px;font-family:var(--f-sans);font-weight:500;font-size:18px;line-height:normal;color:var(--ink-inv)}
.shoplogo__name{font-family:var(--f-sans);font-size:22px;letter-spacing:3.52px;line-height:normal;color:var(--ink-inv)}
.shopnav__links{flex:1 0 0;min-width:0;display:flex;gap:21px;overflow:hidden;font-family:var(--f-sans);font-size:13px;letter-spacing:1.04px;color:var(--ink-inv-2);line-height:normal;white-space:nowrap}
.shopnav__links a:hover{color:var(--ink-inv)}
.shopnav__tools{display:flex;gap:20px;font-size:13px;color:var(--ink-inv);line-height:normal;white-space:nowrap;font-family:var(--f-sans)}
.shopnav__tools a:hover{color:var(--accent-dark)}
.shopnav .nav__toggle{border-color:var(--ink-inv)}
.shopnav .nav__toggle span,.shopnav .nav__toggle span::before,.shopnav .nav__toggle span::after{background:var(--ink-inv)}
.shopnav[data-open="true"] .nav__toggle span{background:transparent}
.rhero{position:relative;height:620px;overflow:hidden;background:var(--inverse)}
.rhero__bg{position:absolute;inset:0;background-color:var(--sunken);background-size:cover;background-position:center}
.rhero__ov{position:absolute;inset:0;background:linear-gradient(to right,rgba(43,45,48,.7) 0%,rgba(43,45,48,0) 60%)}
.rhero__inner{position:relative;height:100%;max-width:1440px;margin:0 auto}
.rhero__copy{position:absolute;left:120px;top:380px;display:flex;flex-direction:column;gap:14px;line-height:normal;white-space:nowrap}
.rhero__k{font-family:var(--f-mono);font-size:13px;letter-spacing:.78px;color:var(--ink-inv-2)}
.rhero__h{font-family:var(--f-sans);font-size:56px;color:var(--ink-inv);font-weight:400}
.rhero__th{font-family:var(--f-thai);font-size:22px;color:var(--ink-inv-2)}
.rhero__dots{position:absolute;left:656px;top:588px;width:98px;height:8px}
.rhero__arrow{position:absolute;top:280px;font-family:var(--f-sans);font-size:40px;line-height:normal;color:var(--ink-inv);background:none;border:0;padding:0;cursor:default}
.rhero__arrow--l{left:40px}.rhero__arrow--r{left:1380px}
.rwrap{max-width:1440px;margin:0 auto;padding-left:200px;padding-right:200px}
.catbanner{padding-top:72px;padding-bottom:72px}
.catcard{background:var(--sunken);display:flex;align-items:center}
.catcard__copy{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:16px;padding:0 40px 0 64px;line-height:normal}
.catcard__y{font-family:var(--f-sans);font-size:30px;letter-spacing:1.2px}
.catcard__t{font-family:var(--f-sans);font-size:34px;letter-spacing:.68px}
.catcard__m{font-family:var(--f-mono);font-size:14px;color:var(--ink-2)}
.catcard__l{font-family:var(--f-thai);font-size:15px;color:var(--ink);white-space:pre}
.catcard__l:hover{text-decoration:underline}
.slot{background-color:var(--sunken);background-size:cover;background-position:center}
.catcard__img{width:420px;height:420px;flex:none}
.tiles{display:flex;gap:24px;padding-bottom:96px}
.tile{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:10px;align-items:center;line-height:normal;white-space:nowrap}
.tile .slot{height:320px;width:100%}
.tile__t{font-family:var(--f-sans);font-size:15px;color:var(--ink-2)}
.tile__th{font-family:var(--f-thai);font-size:13px;color:var(--ti-grey)}
.tile:hover .tile__t{color:var(--ink)}
.cats{padding-top:24px;padding-bottom:96px;display:flex;flex-direction:column;align-items:center;gap:8px;line-height:normal}
.cats__h{font-family:var(--f-sans);font-size:26px;color:var(--ink);font-weight:400}
.cats__th{font-family:var(--f-thai);font-size:14px;color:var(--ink-2)}
.cats__grid{display:flex;flex-wrap:wrap;gap:28px 16px;padding-top:36px;width:100%}
.cat{display:flex;align-items:center;gap:12px;width:196px;height:56px;white-space:nowrap}
.cat__cut{width:56px;height:48px;background:var(--raised);border:1px solid var(--line);flex:none}
.cat__t{font-family:var(--f-sans);font-size:14px;color:var(--ink-2)}
.cat:hover .cat__t{color:var(--ink)}
/* Background image slots: images from Figma "Image library" were not embedded in the file.
   Drop the JPGs into assets/img/bg/ and uncomment the lines below. */
/* .slot--09-pond{background-image:url(../img/bg/09-pond-16x9.jpg)} */
/* .slot--03-river-canopy{background-image:url(../img/bg/03-river-canopy-16x9.jpg)} */
/* .slot--04-jungle-path{background-image:url(../img/bg/04-jungle-path-16x9.jpg)} */
/* .slot--07-monstera-closeup{background-image:url(../img/bg/07-monstera-closeup-4x3.jpg)} */
/* .slot--01-coast-aerial{background-image:url(../img/bg/01-coast-aerial-16x9.jpg)} */

/* thanks page */
.thanks .wrap{padding-top:112px;padding-bottom:112px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}

/* =========================================================
   Responsive — desktop (≥1200px) matches the 1440 Figma frames.
   ========================================================= */
@media (max-width:1360px){
  .nav__links{gap:24px}
  .blueprint{transform:scale(.85);transform-origin:right center;margin-left:-78px}
}
@media (max-width:1199px){
  :root{--pad:40px}
  .section{padding-top:88px;padding-bottom:88px}
  .nav__links,.nav .wrap>.btn{display:none}
  .nav__toggle{display:inline-flex}
  .nav__panel{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(43,45,48,.08)}
  .nav[data-open="true"] .nav__panel{display:block}
  .nav__panel .wrap{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-top:8px;padding-bottom:24px}
  .nav__panel a:not(.btn){font-family:var(--f-sans);font-weight:500;font-size:18px;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav__panel a[aria-current="page"]{color:var(--accent)}
  .nav__panel .btn{margin-top:20px;align-self:flex-start}
  .hero__row{flex-direction:column;align-items:flex-start}
  .blueprint{transform:none;margin:0 auto;max-width:100%}
  .h1{font-size:52px}
  .h2{font-size:40px}
  .cta__h{font-size:40px}
  .entries,.proofcards,.programs{flex-direction:column;min-height:0}
  .entry .spacer,.program .spacer,.proof .spacer{display:none}
  .grid4{flex-wrap:wrap}
  .grid4>.pcard{flex:1 0 calc(50% - 12px)}
  .process,.drops{flex-wrap:wrap}
  .step,.drop{flex:1 0 calc(33.333% - 1px);padding-bottom:24px}
  .specbar{flex-wrap:wrap}
  .specbar>div{flex:1 0 50%}
  .specbar>div:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--line-inv)}
  .specbar>div:nth-child(4){border-top:1px solid var(--line-inv)}
  .localgrid,.why{flex-wrap:wrap}
  .localgrid>div,.why>div{flex:1 0 50%}
  .localgrid>div:nth-child(3),.why>div:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .localgrid>div:nth-child(4),.why>div:nth-child(4){border-top:1px solid var(--line)}
  .cta .wrap{flex-direction:column;align-items:flex-start;gap:32px}
  .footer__top{flex-wrap:wrap}
  .footer__brand{flex:1 0 100%}
  .footer__col{width:auto;flex:1 0 0}
  .phero .wrap{flex-direction:column;align-items:flex-start}
  .cafes-hero-ph{width:100%;height:420px}
  .drawing{margin:0 auto}
  .scenes{flex-wrap:wrap}
  .scene{flex:1 0 calc(50% - 12px)}
  .faq .wrap,.docs .wrap{flex-direction:column}
  .faq__head{width:auto}
  .docs__list,.casecard{width:100%;flex:none}
  .tiers__row>:nth-child(6){flex-basis:180px}
  .tiers{overflow-x:auto}
  .tiers__row{min-width:900px}
  .caps{flex-wrap:wrap}
  .caps>div{flex:1 0 50%}
  .caps>div:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .caps>div:nth-child(4){border-top:1px solid var(--line)}
  .qbody .wrap{flex-direction:column}
  .qaside{width:100%}
  /* retail */
  .rhero{height:520px}
  .rhero__copy{left:var(--pad);top:auto;bottom:72px;white-space:normal;right:var(--pad)}
  .rhero__dots{left:50%;transform:translateX(-50%);top:auto;bottom:24px}
  .rhero__arrow{display:none}
  .rwrap{padding-left:var(--pad);padding-right:var(--pad)}
  .catcard__img{width:320px;height:320px}
  .cats__grid{justify-content:flex-start}
}
@media (max-width:767px){
  :root{--pad:20px}
  .section{padding-top:64px;padding-bottom:64px}
  .topstrip__legal{display:none}
  .topstrip .wrap{justify-content:center}
  .topstrip__contact{display:none}
  .langs{gap:16px}
  .hero .wrap{padding-top:56px;gap:48px}
  .footnote{white-space:normal}
  .h1,.oem-h1{font-size:40px;letter-spacing:-.4px}
  .h2,.qh1{font-size:32px;letter-spacing:-.32px}
  .cta__h{font-size:32px}
  .faq__h{font-size:32px}
  .lead,.phero .lead{font-size:17px}
  .blueprint{transform:scale(.62);transform-origin:left top;margin:0 0 -198px 0;max-width:none}
  .drawing{transform:scale(.66);transform-origin:left top;margin:0 0 -184px 0}
  .specbar>div{flex:1 0 100%;border-left:0!important;padding-left:0;border-top:1px solid var(--line-inv)}
  .specbar>div:first-child{border-top:0}
  .specbar__v{font-size:24px}
  .sechead{flex-direction:column;align-items:flex-start}
  .entry,.program{padding:24px}
  .entry__title{font-size:26px}
  .grid4>.pcard{flex:1 0 100%}
  .step,.drop{flex:1 0 100%;padding-right:0}
  .step__title{white-space:normal}
  .photos3{flex-direction:column}
  .photos3 .ph{flex:none;height:220px}
  .compare__row{flex-wrap:wrap;gap:6px 16px}
  .compare__row>:first-child{flex:1 0 100%}
  .compare__head>:first-child{display:none}
  .localgrid>div,.why>div,.caps>div{flex:1 0 100%;border-left:0!important;padding-left:0;padding-right:0;border-top:1px solid var(--line)}
  .localgrid>div:first-child,.why>div:first-child,.caps>div:first-child{border-top:0}
  .caps__t{white-space:normal}
  .cta .wrap{padding-top:64px;padding-bottom:64px}
  .footer__col{flex:1 0 100%}
  .footer__bottom{flex-direction:column}
  .cafes-hero-ph{height:320px}
  .scene{flex:1 0 100%}
  .scene .ph{height:280px}
  .formcard{padding:24px}
  .frow{flex-direction:column}
  .fsubmit{flex-direction:column;align-items:flex-start}
  .next{padding:24px}
  .contactbox__row{flex-wrap:wrap}
  .shoplogo__name{font-size:20px}
  .rhero{height:460px}
  .rhero__h{font-size:38px}
  .rhero__th{font-size:18px}
  .catbanner{padding-top:40px;padding-bottom:40px}
  .catcard{flex-direction:column;align-items:stretch}
  .catcard__copy{padding:32px 24px}
  .catcard__t{font-size:26px;white-space:normal}
  .catcard__img{width:100%;height:260px}
  .tiles{flex-direction:column;padding-bottom:64px}
  .tile .slot{height:240px}
  .cats__grid{gap:16px}
  .cat{width:calc(50% - 8px)}
  .cat__t{white-space:normal}
  .btn{white-space:nowrap}
  .actions .btn{flex:none}
}

/* retail shop nav: fits only at full design width */
@media (max-width:1439px){.shopnav .wrap{padding-left:40px;padding-right:40px}}
@media (max-width:1359px){
  .shopnav .wrap{padding:20px var(--pad);justify-content:space-between}
  .shopnav__links,.shopnav__tools{display:none}
  .shopnav .nav__toggle{display:inline-flex}
  .shopnav .nav__panel{position:absolute;left:0;right:0;top:100%;background:var(--inverse);border-top:1px solid var(--line-inv)}
  .shopnav[data-open="true"] .nav__panel{display:block}
  .shopnav .nav__panel a{display:block;color:var(--ink-inv);border-bottom:1px solid var(--line-inv);font-size:15px;letter-spacing:1.04px;padding:14px 0}
}
/* Figma breaks Thai/Korean headings only at spaces; mirror that on desktop */
@media (min-width:1200px){html[lang="ko"] .display{word-break:keep-all}html[lang="th"] .nw{white-space:nowrap}}
@media (max-width:1199px){h3.nowrap,h2.nowrap{white-space:normal}}