/* ============================================================
   BizCraft Studio — Minimal Luxury Design System (v3)
   Ink #16243a · Amber #E07C24 · Paper #F5F1EA
   Font: Prompt (loopless / ไม่มีหัว), light weights + air
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@200;300;400;500;600&display=swap');

:root {
  --ink:        #16243a;
  --ink-deep:   #101b2c;
  --ink-soft:   #2a3a52;
  --ink-2:      #27364d;
  --amber:      #E07C24;
  --amber-deep: #c56a1b;
  --paper:      #F5F1EA;
  --paper-2:    #EDE6DA;
  --cream-line: rgba(22,36,58,0.12);
  --dark-line:  rgba(255,255,255,0.14);
  --on-paper:   #1b2432;
  --on-paper-mut:#59636f;
  --on-ink:     rgba(255,255,255,0.96);
  --on-ink-mut: rgba(255,255,255,0.86);
  --maxw: 1320px;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --font: 'Prompt', sans-serif;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body {
  font-family:var(--font);
  font-weight:400;
  background:var(--paper);
  color:var(--on-paper);
  line-height:1.75;
  overflow-x:hidden;
  word-break:normal;
  overflow-wrap:break-word;
  -webkit-hyphens:none;
  hyphens:none;
}
/* Thai text carries ZWSP word boundaries; break there. break-word only for stray long tokens. */
p, .lead, .manifesto, .hero-sub, .pagehead-sub, .muted, .faq-a, h1, h2, h3, .display { overflow-wrap:break-word; }
/* keep intentional line breaks on ALL sizes so whole phrases stay on their own line */
.nb { display:inline; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul,ol { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
::selection { background:var(--amber); color:#fff; }

/* ── Layout ── */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.wrap-narrow { max-width:920px; margin:0 auto; padding:0 32px; }
.sec { padding:120px 0; }
.sec-lg { padding:160px 0; }
.sec-sm { padding:80px 0; }
@media (max-width:768px){ .sec,.sec-lg{ padding:80px 0; } .wrap,.wrap-narrow{ padding:0 22px; } }

/* section themes */
.theme-paper { background:var(--paper); color:var(--on-paper); }
.theme-paper2 { background:var(--paper-2); color:var(--on-paper); }
.theme-ink { background:var(--ink); color:var(--on-ink); }
.theme-ink-deep { background:var(--ink-deep); color:var(--on-ink); }

/* ── Typography ── */
h1,h2,h3,h4 { font-family:var(--font); font-weight:500; line-height:1.2; letter-spacing:-0.01em; color:inherit; }
.display {
  font-weight:400;
  font-size:clamp(2.6rem,6vw,5rem);
  line-height:1.12;
  letter-spacing:-0.02em;
}
.h1 { font-weight:500; font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.18; letter-spacing:-0.015em; }
.h2 { font-weight:500; font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.22; letter-spacing:-0.01em; }
.h3 { font-weight:400; font-size:1.3rem; letter-spacing:-0.01em; }
.lead { font-size:clamp(1.05rem,1.5vw,1.25rem); font-weight:300; line-height:1.75; color:var(--on-paper-mut); }
.theme-ink .lead, .theme-ink-deep .lead { color:var(--on-ink-mut); }
strong,b { font-weight:600; }
.amber { color:var(--amber); }
.serif-accent { font-style:italic; }

/* eyebrow / label */
.eyebrow {
  display:inline-flex; align-items:center; gap:12px;
  font-size:0.78rem; font-weight:500; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--amber);
  margin-bottom:26px;
}
.eyebrow::before { content:''; width:28px; height:1px; background:var(--amber); display:block; }
.eyebrow.center::after { content:''; width:28px; height:1px; background:var(--amber); display:block; }
.eyebrow.on-ink { color:var(--amber); }

/* index numbers */
.idx { font-weight:400; font-size:clamp(2.2rem,4vw,3.2rem); color:var(--amber); line-height:1; letter-spacing:-0.02em; }
.idx-mut { font-weight:500; font-size:0.95rem; letter-spacing:0.1em; color:var(--on-paper-mut); }

/* hairline rule */
.rule { height:1px; background:var(--cream-line); border:0; width:100%; }
.theme-ink .rule, .theme-ink-deep .rule { background:var(--dark-line); }

.muted { color:var(--on-paper-mut); }
.center { text-align:center; }
.mx-auto { margin-left:auto; margin-right:auto; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; font-family:var(--font); font-weight:500;
  font-size:0.92rem; letter-spacing:0.02em; line-height:1;
  border-radius:2px; transition:all .35s var(--ease); cursor:pointer;
  border:1px solid transparent;
}
.btn-lg { padding:18px 38px; font-size:0.98rem; }
.btn-accent { background:var(--amber); color:#fff; }
.btn-accent:hover { background:var(--amber-deep); transform:translateY(-2px); }
.btn-solid { background:var(--ink); color:#fff; }
.btn-solid:hover { background:var(--ink-deep); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--cream-line); }
.btn-ghost:hover { border-color:var(--ink); }
.theme-ink .btn-ghost, .theme-ink-deep .btn-ghost, .hero .btn-ghost, .pagehead .btn-ghost { color:#fff; border-color:var(--dark-line); }
.theme-ink .btn-ghost:hover, .theme-ink-deep .btn-ghost:hover, .hero .btn-ghost:hover, .pagehead .btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,0.05); }
/* keep a whole phrase together so it wraps to a new line as a unit */
.nw { white-space:nowrap; }
/* same, but only above tablet width — long clauses that wrap fine as separate lines on narrow screens would overflow if forced nowrap there */
@media (min-width:769px){ .nw-lg { white-space:nowrap; } }
/* keep short English compound terms (product names, units) from breaking mid-phrase */
.nb-term { white-space:nowrap; }
.btn-line { color:var(--amber); font-weight:500; letter-spacing:0.02em; display:inline-flex; align-items:center; gap:8px; transition:gap .3s var(--ease); }
.btn-line:hover { gap:14px; }

/* ── Navbar ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:all .4s var(--ease);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:84px; }
.nav.scrolled { background:rgba(22,36,58,0.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.nav.scrolled .nav-inner { height:68px; }
.nav-logo img { height:52px; width:auto; filter:brightness(0) invert(1); transition:.3s; }
.nav.scrolled .nav-logo img { height:46px; }
.nav-links { display:flex; align-items:center; gap:34px; }
.nav-link { font-size:0.9rem; font-weight:400; color:rgba(255,255,255,0.78); letter-spacing:0.01em; transition:.3s; }
.nav-link:hover, .nav-link.active { color:#fff; }
.nav-cta {
  font-size:0.82rem; font-weight:500; letter-spacing:0.06em; text-transform:uppercase;
  color:#fff; border:1px solid rgba(255,255,255,0.3); padding:11px 20px; border-radius:2px; transition:.3s;
}
.nav-cta:hover { background:var(--amber); border-color:var(--amber); }
.nav-ham { display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-ham span { display:block; width:24px; height:1.5px; background:#fff; transition:.3s; }
@media (max-width:860px){
  .nav-ham { display:flex; }
  .nav-links { display:none; position:fixed; top:68px; left:0; right:0; background:var(--ink); flex-direction:column; padding:28px; gap:22px; border-top:1px solid var(--dark-line); }
  .nav-links.open { display:flex; }
}

/* ── Hero ── */
.hero { position:relative; min-height:92vh; display:flex; align-items:center; background:var(--ink); overflow:hidden; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center right; opacity:0.95; }
.hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--ink) 8%,rgba(22,36,58,0.62) 42%,rgba(22,36,58,0.18) 100%); }
.hero-inner { position:relative; z-index:2; padding:118px 0 70px; max-width:760px; }
.hero .wrap { position:relative; z-index:2; width:100%; }
.hero .display { color:#fff; }
.hero .lead, .pagehead .lead, .hero-sub, .pagehead-sub { color:var(--on-ink-mut); }
.hero-sub { margin:30px 0 0; max-width:560px; }
.hero-actions { display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; }
.hero-meta { margin-top:56px; padding-top:30px; border-top:1px solid var(--dark-line); display:flex; gap:48px; flex-wrap:wrap; }
.hero-meta-num { font-weight:400; font-size:2.1rem; color:#fff; line-height:1; letter-spacing:-0.02em; }
.hero-meta-num .amber { font-weight:500; }
.hero-meta-lbl { font-size:0.8rem; color:var(--on-ink-mut); margin-top:8px; max-width:150px; line-height:1.5; }
@media (max-width:768px){ .hero-meta{ gap:28px; } .hero-meta-num{ font-size:1.6rem; } }

/* ── Generic section header ── */
.sec-head { max-width:720px; }
.sec-head.center { margin:0 auto; text-align:center; }

/* ── Cards / editorial blocks ── */
.card-min { border:1px solid var(--cream-line); padding:38px 34px; transition:.4s var(--ease); background:transparent; }
.card-min:hover { border-color:rgba(22,36,58,0.28); }
.theme-ink .card-min { border-color:var(--dark-line); }
.theme-ink .card-min:hover { border-color:rgba(255,255,255,0.32); }

/* symptom / stat row */
.stat-lg { font-weight:400; font-size:clamp(2.4rem,4vw,3.4rem); letter-spacing:-0.02em; line-height:1; }

/* image frames */
.imgframe { overflow:hidden; }
.imgframe img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease); }
.imgframe:hover img { transform:scale(1.04); }

/* editorial figure with text-on-photo caption */
.art-fig { position:relative; overflow:hidden; aspect-ratio:4/5; }
.art-fig img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease); }
.art-fig:hover img { transform:scale(1.04); }
.art-fig::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(16,27,44,0.82) 0%, rgba(16,27,44,0.15) 45%, transparent 70%); pointer-events:none; }
.art-fig figcaption { position:absolute; left:0; bottom:0; padding:26px 28px; z-index:2; }
.art-fig .cap-k { font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber); display:flex; align-items:center; gap:10px; }
.art-fig .cap-k::before { content:''; width:22px; height:1px; background:var(--amber); }
.art-fig .cap-t { color:#fff; font-weight:300; font-size:1.5rem; line-height:1.2; letter-spacing:-0.01em; margin-top:8px; }
/* Mobile: illustration images go landscape so the page isn't so tall to scroll */
@media (max-width:600px){
  .art-fig { aspect-ratio:16/10; }
  .imgframe.illus { aspect-ratio:16/10 !important; }
  .founder-photo-lg { aspect-ratio:4/3 !important; max-height:none !important; }
  .art-fig .cap-t { font-size:1.3rem; }
  .art-fig figcaption { padding:20px 22px; }
}

/* proof grid */
.proof-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.proof-grid img { width:100%; height:auto; display:block; border:1px solid var(--cream-line); }
@media (max-width:700px){ .proof-grid{ grid-template-columns:1fr; } }

/* footer */
.footer { background:var(--ink-deep); color:var(--on-ink); padding:90px 0 40px; }
.footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; }
.footer-logo img { height:48px; filter:brightness(0) invert(1); margin-bottom:20px; }
.footer-tag { color:var(--on-ink-mut); font-weight:300; font-size:0.92rem; line-height:1.7; max-width:260px; }
.footer-h { font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:20px; }
.footer-links { display:flex; flex-direction:column; gap:12px; }
.footer-links a, .footer-links span { color:var(--on-ink-mut); font-size:0.92rem; font-weight:300; transition:.3s; }
.footer-links a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:70px; padding-top:28px; border-top:1px solid var(--dark-line); flex-wrap:wrap; gap:16px; }
.footer-copy { font-size:0.82rem; color:rgba(255,255,255,0.6); }
.footer-soc { display:flex; gap:10px; }
.footer-soc a { font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--on-ink-mut); border:1px solid var(--dark-line); padding:8px 14px; border-radius:2px; transition:.3s; }
.footer-soc a:hover { color:#fff; border-color:#fff; }
@media (max-width:768px){ .footer-top{ grid-template-columns:1fr 1fr; gap:36px; } }

/* float */
.float { position:fixed; right:26px; bottom:26px; z-index:900; }
.float a { display:flex; align-items:center; gap:10px; background:var(--ink); color:#fff; padding:14px 20px; border-radius:2px; font-size:0.85rem; font-weight:500; letter-spacing:0.03em; box-shadow:0 10px 40px rgba(22,36,58,0.28); transition:.35s var(--ease); border:1px solid rgba(255,255,255,0.08); }
.float a:hover { background:var(--amber); border-color:var(--amber); transform:translateY(-2px); }

/* reveal animation */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* page header (interior pages) */
.pagehead { background:var(--ink); color:#fff; padding:170px 0 90px; position:relative; overflow:hidden; }
.pagehead .display { color:#fff; }
.pagehead-sub { max-width:600px; margin-top:24px; }

/* util */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--cream-line); }
.theme-ink .grid-3 { background:var(--dark-line); }
@media (max-width:820px){ .grid-2{ grid-template-columns:1fr; gap:40px; } .grid-3{ grid-template-columns:1fr; } }
.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-40{margin-bottom:40px}.mb-64{margin-bottom:64px}
.mt-24{margin-top:24px}.mt-40{margin-top:40px}

/* ── Tablet ── */
@media (max-width:900px){
  .sec { padding:88px 0; }
  .sec-lg { padding:104px 0; }
}
/* ── Mobile ── */
@media (max-width:600px){
  .display { font-size:1.6rem; line-height:1.22; letter-spacing:-0.01em; }
  .hero { min-height:auto; }
  .hero-inner { max-width:100%; padding:116px 0 68px; }
  .hero-sub { max-width:100%; font-size:1rem; }
  .hero-meta { gap:20px 24px; margin-top:38px; padding-top:26px; }
  .hero-meta > div { flex:1 1 40%; }
  .hero-meta-num { font-size:1.7rem; }
  .hero-meta-lbl { max-width:none; font-size:0.8rem; }
  .h1 { font-size:1.55rem; }
  .h2 { font-size:1.4rem; }
  .h3 { font-size:1.2rem; }
  .lead { font-size:1.0rem; }
  .manifesto { font-size:1.3rem !important; line-height:1.55; }
  .pagehead { padding:116px 0 60px; }
  .idx { font-size:1.9rem; }
  .eyebrow { margin-bottom:20px; }
  .btn, .btn-lg { padding:15px 24px; font-size:0.95rem; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .btn, .hero-actions .btn-lg { width:100%; justify-content:center; }
  .float a { padding:13px 18px; font-size:0.85rem; }
  .footer { padding:64px 0 32px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .sec, .sec-lg { padding:72px 0; }
}
@media (max-width:400px){
  .display { font-size:1.45rem; }
}