/* ==========================================================================
   PADDIO — shared stylesheet
   Used by every design version. Version-specific overrides live in the
   version folder's own <style> block, never here.
   ========================================================================== */

:root {
  --leaf: #2e7d4f;
  --leaf-deep: #173d29;
  --moss: #4f9d6c;
  --sage: #b8d3b8;
  --cream: #f5f1e8;
  --bone: #faf7f1;
  --ink: #1a2218;
  --muted: #5a6557;
  --sun: #f3c969;
  --rust: #c97b4a;
  --line: rgba(46, 125, 79, .14);
  --radius: 18px;
  --maxw: 1240px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bone);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html[lang="th"] body { font-family: 'Noto Sans Thai', 'Inter', -apple-system, sans-serif; }

img { display: block; max-width: 100%; height: auto; }
/* height:auto is load-bearing: every <img> carries width/height attributes
   to prevent layout shift, and without this a rule like `width:100%` with
   no height would render the image at its raw attribute height — stretched. */
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 36px;
  transition: all .35s var(--ease);
}
.nav.scrolled,
.nav.solid {
  background: rgba(250, 247, 241, .93);
  backdrop-filter: blur(14px);
  padding: 12px 36px;
  box-shadow: 0 1px 0 rgba(26, 34, 24, .07);
}
.nav-logo {
  font-weight: 800; font-size: 22px; letter-spacing: -.02em;
  color: #fff; transition: color .35s var(--ease);
}
.nav-logo span { color: var(--moss); }
.nav.scrolled .nav-logo,
.nav.solid .nav-logo { color: var(--leaf-deep); }

.nav-links { display: flex; gap: 30px; align-items: center; min-width: 0; }
@media (max-width: 1100px) { .nav-links { gap: 18px; } }
.nav-links > a {
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  color: rgba(255, 255, 255, .92);
  transition: color .25s var(--ease);
  position: relative;
}
.nav.scrolled .nav-links > a,
.nav.solid .nav-links > a { color: var(--ink); }
.nav-links > a:hover { color: var(--moss); }
.nav-links > a.current::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--moss); border-radius: 2px;
}
.nav-cta {
  background: var(--leaf); color: #fff !important;
  padding: 10px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  transition: transform .2s var(--ease), background .25s var(--ease);
}
.nav-cta:hover { background: var(--leaf-deep); transform: translateY(-1px); }
.nav-cta.current::after { display: none; }

.lang-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  color: rgba(255, 255, 255, .5); user-select: none; margin-right: 6px;
}
.nav.scrolled .lang-toggle,
.nav.solid .lang-toggle { color: rgba(26, 34, 24, .42); }
.lang-toggle button {
  background: none; border: none; cursor: pointer;
  letter-spacing: inherit; color: inherit; padding: 4px 6px;
  transition: color .2s var(--ease);
}
.lang-toggle button.active { color: #fff; }
.nav.scrolled .lang-toggle button.active,
.nav.solid .lang-toggle button.active { color: var(--leaf-deep); }
.lang-toggle button:hover { color: var(--moss); }
.lang-toggle .divider { opacity: .5; }

/* Mobile menu */
.nav-burger {
  display: none; background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; position: relative; z-index: 110;
}
.nav-burger span {
  display: block; height: 2px; width: 22px; margin: 0 auto;
  background: #fff; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease), background .3s var(--ease);
}
.nav-burger span + span { margin-top: 5px; }
.nav.scrolled .nav-burger span,
.nav.solid .nav-burger span,
body.menu-open .nav-burger span { background: var(--leaf-deep); }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav { padding: 14px 18px; }
  .nav.scrolled, .nav.solid { padding: 10px 18px; }
  .nav-burger { display: block; }
  .nav-links {
    position: fixed; inset: 0; background: var(--bone);
    flex-direction: column; justify-content: center; gap: 22px;
    padding: 40px;
    overflow-y: auto;

    /* The closed menu used to be hidden by transform alone. That is fragile:
       anything that neutralises the transform — a stacking/containing-block
       change from an ancestor, a devtools override, a UA that ignores the
       inset shorthand — puts the whole menu back on screen, and the symptom
       is menu text appearing to spill out of the fixed header.

       visibility:hidden is belt and braces: nothing paints and nothing can
       be reached, whatever happens to the transform. It also fixes a real
       accessibility bug — an off-screen menu is still in the tab order, so
       keyboard users were tabbing through invisible links on every page. */
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .45s var(--ease), visibility 0s linear .45s;
  }
  body.menu-open .nav-links {
    transform: none;
    visibility: visible;
    transition: transform .45s var(--ease), visibility 0s;
  }
  .nav-links > a { color: var(--leaf-deep) !important; font-size: 26px; font-weight: 700; }
  .nav-links > a.current::after { display: none; }
  /* Must be `.nav-links > a.nav-cta`, not `.nav-cta`. The rule above is
     (0,1,1) and beats a bare (0,1,0) class, so the pill was inheriting the
     26px menu type AND losing its white text to the dark-green !important —
     dark green on a green pill, oversized. Matching the same specificity
     fixes both. */
  .nav-links > a.nav-cta { font-size: 16px; padding: 14px 30px; color: #fff !important; }
  .lang-toggle { color: rgba(26, 34, 24, .42) !important; font-size: 15px; margin: 0; }
  .lang-toggle button.active { color: var(--leaf-deep) !important; }
}

/* ==========================================================================
   TYPOGRAPHY & LAYOUT
   ========================================================================== */
section { padding: 120px 36px; }
.container { max-width: var(--maxw); margin: 0 auto; }
.container-narrow { max-width: 860px; margin: 0 auto; }

.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--leaf); margin-bottom: 18px;
}
html[lang="th"] .eyebrow { letter-spacing: .06em; text-transform: none; }

h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
h2 {
  font-size: clamp(36px, 5vw, 64px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.04;
  color: var(--leaf-deep); margin-bottom: 28px;
}
html[lang="th"] h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.2; letter-spacing: -.01em; }
h2 em { font-style: normal; color: var(--moss); }
h3 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--leaf-deep); margin-bottom: 10px; }
h4 { font-size: 17px; font-weight: 700; color: var(--leaf-deep); }
/* Some card titles sit directly under a section's h2 with no h3 between, which
   skips a heading level and makes the page harder to navigate by screen
   reader. Those are promoted to h3 in the markup and carry this class, so the
   document outline is correct while the type stays exactly as designed. */
h3.as-h4 { font-size: 17px; font-weight: 700; letter-spacing: 0; margin-bottom: 0; }
.body-lg { font-size: 19px; color: var(--muted); max-width: 640px; }
.section-head { margin-bottom: 56px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .2s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--leaf); color: #fff; }
.btn-primary:hover { background: var(--leaf-deep); }
.btn-ghost { border-color: rgba(46, 125, 79, .35); color: var(--leaf-deep); background: transparent; }
.btn-ghost:hover { border-color: var(--leaf); background: rgba(46, 125, 79, .06); }
.btn-light { background: #fff; color: var(--leaf-deep); }
.btn-light:hover { background: var(--sage); }
.btn-outline-light { border-color: rgba(255, 255, 255, .4); color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.btn-row {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px;
  /* align-items matters: these are flex children, so the default `stretch`
     made every pill grow to the height of the tallest sibling — which is why
     the LINE/phone/email buttons were rendering over-tall next to the QR
     slot. Centring keeps each pill at its own natural height. */
  align-items: center;
}

/* TODO marker — every unverified fact is wrapped in this so nothing
   unconfirmed can ship by accident. Remove the class once data is supplied. */
.todo {
  background: rgba(243, 201, 105, .3);
  border-bottom: 1px dashed var(--rust);
  padding: 0 3px; border-radius: 3px;
  cursor: help;
}
.todo::after {
  content: ' ⚑'; font-size: .8em; color: var(--rust); vertical-align: super;
}
body.hide-todo .todo { background: none; border-bottom: none; }
body.hide-todo .todo::after { display: none; }

/* ==========================================================================
   PAGE HERO (sub-pages)
   ========================================================================== */
.page-hero {
  position: relative; min-height: 62vh; display: flex; align-items: flex-end;
  background: var(--leaf-deep); overflow: hidden;
  padding: 140px 36px 64px;
}
.page-hero .bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .55;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 26, 16, .6) 0%, rgba(11, 26, 16, .3) 40%, rgba(11, 26, 16, .88) 100%);
}
.page-hero .container { position: relative; z-index: 2; color: #fff; }
.page-hero .eyebrow { color: var(--sage); }
.page-hero h1 { color: #fff; margin-bottom: 20px; }
.page-hero p { font-size: clamp(17px, 2vw, 21px); color: rgba(255, 255, 255, .86); max-width: 620px; }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
/* position + clip: .motif-corner children are position:absolute with right:-6%,
   so they are deliberately hung off the edge. Without position:relative here
   their containing block is the viewport, which means an ancestor's overflow
   cannot clip them — they widened the document by ~86px and gave the whole page
   a horizontal scrollbar. Positioning the section makes it their containing
   block, at which point overflow-x:clip actually contains them. clip rather
   than hidden so no scroll container is created and sticky/scrollIntoView keep
   working. */
.stats { background: var(--leaf-deep); color: #fff; padding: 50px 36px; position: relative; overflow-x: clip; }
.stats-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
}
.stat-num {
  font-size: clamp(34px, 4.5vw, 56px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1; color: #fff;
}
.stat-num span { color: var(--moss); }
.stat-label {
  margin-top: 10px; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
html[lang="th"] .stat-label { letter-spacing: .04em; text-transform: none; }
@media (max-width: 760px) { .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 28px; } }

/* ==========================================================================
   CARDS / GRIDS
   ========================================================================== */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .grid-4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 26px 0; text-align: left;
  font-size: 17px; font-weight: 600; color: var(--leaf-deep);
}
.faq-q .ic {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.faq-item.open .faq-q .ic { transform: rotate(45deg); background: var(--leaf-deep); color: #fff; border-color: var(--leaf-deep); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a p { padding-bottom: 26px; color: var(--muted); font-size: 15.5px; max-width: 720px; }
.faq-item.open .faq-a { max-height: 600px; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gal-grid { columns: 3; column-gap: 18px; }
@media (max-width: 1000px) { .gal-grid { columns: 2; } }
@media (max-width: 620px) { .gal-grid { columns: 1; } }
.gal-item {
  break-inside: avoid; margin-bottom: 18px; border-radius: var(--radius);
  overflow: hidden; position: relative; cursor: zoom-in; background: var(--cream);
}
.gal-item img { width: 100%; height: auto; transition: transform 1s var(--ease); }
.gal-item:hover img { transform: scale(1.04); }
.gal-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 18px 16px; color: #fff; font-size: 13.5px; font-weight: 500;
  background: linear-gradient(180deg, transparent, rgba(11, 26, 16, .8));
  opacity: 0; transition: opacity .3s var(--ease);
}
.gal-item:hover figcaption { opacity: 1; }

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(8, 18, 12, .94); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 40px;
}
.lightbox.on { display: flex; }
.lightbox img { max-width: 100%; max-height: 84vh; border-radius: 10px; }
.lightbox .cap { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .8); font-size: 14px; }
.lightbox .x, .lightbox .prev, .lightbox .next {
  position: absolute; background: rgba(255, 255, 255, .1); border: none; cursor: pointer;
  color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 20px;
  display: grid; place-items: center; transition: background .2s var(--ease);
}
.lightbox .x:hover, .lightbox .prev:hover, .lightbox .next:hover { background: rgba(255, 255, 255, .22); }
.lightbox .x { top: 26px; right: 26px; }
.lightbox .prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 26px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .lightbox { padding: 16px; }
  .lightbox .prev { left: 8px; } .lightbox .next { right: 8px; }
}

/* ==========================================================================
   DATA VIZ (traffic / catchment bars)
   ========================================================================== */
.bars { display: grid; gap: 20px; margin-top: 36px; }
.bar-row { display: grid; grid-template-columns: 140px 1fr 130px; gap: 18px; align-items: center; }
@media (max-width: 700px) { .bar-row { grid-template-columns: 100px 1fr; } .bar-row .bar-val { grid-column: 2; text-align: left; } }
.bar-label { font-size: 14px; font-weight: 600; color: var(--leaf-deep); }
.bar-track { height: 12px; background: rgba(46, 125, 79, .1); border-radius: 999px; overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, var(--moss), var(--leaf));
  transition: width 1.2s var(--ease);
}
.bar-fill.alt { background: linear-gradient(90deg, var(--sun), var(--rust)); }
.bar-val { font-size: 14px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.donut-wrap { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.donut { width: 200px; height: 200px; flex-shrink: 0; }
.donut circle { fill: none; stroke-width: 22; }
.donut-key { display: grid; gap: 12px; }
.donut-key > div { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.donut-key i { width: 14px; height: 14px; border-radius: 4px; }
.donut-key b { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   MAP
   ========================================================================== */
.map-embed {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--cream);
  aspect-ratio: 16/10; position: relative;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 700px) { .map-embed { aspect-ratio: 4/5; } }

.landmarks { display: grid; gap: 0; margin-top: 10px; }
.landmark {
  display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center;
  padding: 17px 0; border-bottom: 1px solid var(--line);
}
.landmark:last-child { border-bottom: none; }
.landmark .lm-name { font-weight: 600; color: var(--leaf-deep); font-size: 15.5px; }
.landmark .lm-type { font-size: 12.5px; color: var(--muted); }
.landmark .lm-dist { font-size: 14px; font-weight: 700; color: var(--leaf); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 620px) {
  .landmark { grid-template-columns: 1fr auto; }
  .landmark .lm-type { grid-column: 1; grid-row: 2; }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { background: var(--leaf-deep); color: #fff; position: relative; overflow: hidden; }
.contact::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(79, 157, 108, .4), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(243, 201, 105, .15), transparent 40%);
}
.contact .container { position: relative; }
.contact h2 { color: #fff; max-width: 720px; }
.contact h2 em { color: var(--sun); }
.contact .body-lg { color: rgba(255, 255, 255, .78); }
.contact .eyebrow { color: var(--sun); }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.contact-card {
  background: rgba(255, 255, 255, .06); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 26px; border-radius: var(--radius);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.contact-card:hover { background: rgba(255, 255, 255, .1); transform: translateY(-3px); }
.contact-card .name { font-weight: 700; font-size: 17px; margin-bottom: 2px; }
.contact-card .role { font-size: 12.5px; color: rgba(255, 255, 255, .6); margin-bottom: 16px; letter-spacing: .04em; }
.contact-card .phone { font-weight: 700; font-size: 16px; color: var(--sage); margin-bottom: 5px; display: block; }
.contact-card .phone:hover { color: var(--sun); }
.contact-card .email { font-size: 12.5px; color: rgba(255, 255, 255, .7); word-break: break-all; }
.contact-card .email:hover { color: #fff; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer.site {
  background: #0a1610; color: rgba(255, 255, 255, .55);
  padding: 70px 36px 40px; font-size: 14px;
  position: relative; overflow-x: clip;   /* same reason as .stats above */
}
footer.site .foot-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
@media (max-width: 900px) { footer.site .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { footer.site .foot-grid { grid-template-columns: 1fr; } }
footer.site .brand { color: #fff; font-weight: 800; font-size: 24px; letter-spacing: -.02em; margin-bottom: 12px; }
footer.site .brand span { color: var(--moss); }
footer.site h3,
footer.site h4,
footer.site h5 {
  color: #fff; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 16px; font-weight: 700;
}
html[lang="th"] footer.site h3,
footer.site h4,
footer.site h5 { letter-spacing: .04em; text-transform: none; }
footer.site ul { list-style: none; display: grid; gap: 10px; }
footer.site a:hover { color: var(--sage); }
footer.site .foot-bottom {
  max-width: var(--maxw); margin: 0 auto; padding-top: 26px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255, 255, 255, .4);
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--leaf-deep); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

@media (max-width: 760px) { section { padding: 80px 20px; } .stats { padding: 40px 20px; } }