/* ===================================================================
   นพวิทย์ ฟาร์ม — shared stylesheet
   Palette: deep rice-paddy green, straw gold, clay brick, warm paper
   Type: Noto Serif Thai (headings) + Noto Sans Thai (body)
=================================================================== */

:root{
  --green-deep:   #1F3A2E;   /* rice-paddy shade, dark */
  --green-mid:    #35573F;
  --straw:        #C99A3E;   /* dried straw / feed corn */
  --straw-light:  #E9C97C;
  --clay:         #A8532B;   /* brick / clay-tile roof */
  --paper:        #F6F1E4;   /* warm rice-paper background */
  --paper-deep:   #EFE7D3;
  --ink:          #232019;
  --ink-soft:     #58513F;
  --line:         #DACFA9;
  --white:        #FFFDF8;

  --serif: "Noto Serif Thai", "Noto Serif", serif;
  --sans:  "Noto Sans Thai", "Noto Sans", sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:700;
  color:var(--green-deep);
  line-height:1.35;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2rem,4.5vw,3.1rem); }
h2{ font-size:clamp(1.5rem,3vw,2.2rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1.1em; max-width:64ch; color:var(--ink-soft); }
.lede{ font-size:1.15rem; color:var(--ink); }

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 28px;
}

/* ---------- skip link / focus ---------- */
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--green-deep); color:var(--white);
  padding:10px 18px; z-index:200; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }
a:focus-visible, button:focus-visible{
  outline:3px solid var(--clay);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  max-width:1120px; margin:0 auto;
  gap:20px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.brand-mark{
  width:44px; height:44px; flex:none;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-text strong{
  font-family:var(--serif); font-size:1.15rem; color:var(--green-deep);
}
.brand-text span{ font-size:.78rem; color:var(--ink-soft); letter-spacing:.02em; }

nav.main-nav ul{
  list-style:none; display:flex; gap:2px; margin:0; padding:0;
  flex-wrap:wrap;
}
nav.main-nav a{
  text-decoration:none;
  font-size:.96rem;
  padding:10px 14px;
  border-radius:4px;
  color:var(--ink);
}
nav.main-nav a:hover{ background:var(--paper-deep); }
nav.main-nav a[aria-current="page"]{
  color:var(--green-deep);
  font-weight:700;
  border-bottom:2px solid var(--straw);
  border-radius:4px 4px 0 0;
}
.nav-toggle{ display:none; }

@media (max-width:820px){
  .header-inner{ flex-wrap:wrap; }
  nav.main-nav ul{ width:100%; justify-content:flex-start; gap:4px; }
  nav.main-nav a{ padding:9px 10px; font-size:.9rem; }
}

/* ---------- hero / banner ---------- */
.hero{
  position:relative;
  color:var(--white);
  overflow:hidden;
  min-height:min(78vh,620px);
  display:flex; align-items:flex-end;
}
.hero-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,34,25,.35) 0%, rgba(18,28,20,.55) 55%, rgba(15,23,17,.88) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  max-width:1120px; margin:0 auto;
  padding:64px 28px 56px;
  width:100%;
}
.hero-eyebrow{
  display:inline-block;
  font-size:.85rem;
  background:rgba(255,253,248,.14);
  border:1px solid rgba(255,253,248,.4);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:18px;
}
.hero h1{ color:var(--white); max-width:16ch; }
.hero p.lede{ color:#F1EBDA; max-width:52ch; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }

.page-banner{
  position:relative; color:var(--white);
  min-height:280px; display:flex; align-items:flex-end;
  overflow:hidden;
}
.page-banner .hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-banner::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,34,25,.45) 0%, rgba(15,23,17,.82) 100%);
}
.page-banner .hero-inner{ padding:52px 28px 40px; }
.page-banner h1{ color:var(--white); margin-bottom:.2em; }
.page-banner p{ color:#EFE7D3; margin:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px;
  border-radius:4px;
  text-decoration:none;
  font-weight:700;
  font-size:.98rem;
  border:1.5px solid transparent;
}
.btn-primary{ background:var(--straw); color:var(--green-deep); }
.btn-primary:hover{ background:var(--straw-light); }
.btn-ghost{ border-color:rgba(255,253,248,.7); color:var(--white); }
.btn-ghost:hover{ background:rgba(255,253,248,.12); }
.btn-outline{ border-color:var(--green-deep); color:var(--green-deep); }
.btn-outline:hover{ background:var(--green-deep); color:var(--white); }

/* ---------- sections ---------- */
section{ padding:72px 0; }
section.tight{ padding:48px 0; }
.section-alt{ background:var(--paper-deep); }
.section-deep{ background:var(--green-deep); color:var(--paper); }
.section-deep h2, .section-deep h3{ color:var(--white); }
.section-deep p{ color:#D9D0B4; }

.eyebrow{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:700;
  color:var(--clay);
  letter-spacing:.02em;
  margin-bottom:10px;
  display:block;
}

.section-head{ max-width:70ch; margin-bottom:36px; }

/* ---------- grid / cards ---------- */
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
}

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
}
.card img{ width:100%; height:210px; object-fit:cover; }
.card-body{ padding:22px; }
.card-body h3{ margin-bottom:.35em; }
.card-body p{ margin-bottom:0; font-size:.97rem; }

.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:48px; align-items:center;
}
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }
.split img{ border-radius:6px; width:100%; height:420px; object-fit:cover; }
.split.reverse img{ order:2; }
@media (max-width:820px){ .split.reverse img{ order:0; } }

/* ---------- stats ---------- */
.stat-row{
  display:flex; flex-wrap:wrap; gap:40px;
  padding:36px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat b{
  display:block; font-family:var(--serif); font-size:2rem; color:var(--green-deep);
}
.stat span{ font-size:.88rem; color:var(--ink-soft); }

/* ---------- process steps ---------- */
.steps{ counter-reset:step; display:grid; gap:24px; grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ border-top:3px solid var(--straw); padding-top:16px; }
.step::before{
  counter-increment:step; content: counter(step,decimal-leading-zero);
  font-family:var(--serif); font-size:1.4rem; color:var(--clay); display:block; margin-bottom:6px;
}

/* ---------- list check ---------- */
.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.check-list li{ position:relative; padding-left:30px; color:var(--ink-soft); }
.check-list li::before{
  content:"✓"; position:absolute; left:0; top:0;
  width:20px; height:20px; border-radius:50%;
  background:var(--green-mid); color:var(--white);
  font-size:.72rem; display:flex; align-items:center; justify-content:center;
}

/* ---------- info table ---------- */
.info-table{ width:100%; border-collapse:collapse; }
.info-table th, .info-table td{
  text-align:left; padding:12px 16px; border-bottom:1px solid var(--line);
  vertical-align:top;
}
.info-table th{ width:38%; color:var(--green-deep); font-weight:700; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{
  background:var(--white); border:1px solid var(--line); border-radius:6px; padding:26px;
}
.contact-card + .contact-card{ margin-top:20px; }
.contact-card h3{ margin-bottom:6px; }
.map-frame{
  width:100%; height:380px; border:1px solid var(--line); border-radius:6px;
  filter:sepia(8%) saturate(92%);
}

form.simple-form{ display:grid; gap:16px; }
form.simple-form label{ font-size:.9rem; font-weight:700; color:var(--green-deep); display:block; margin-bottom:6px; }
form.simple-form input, form.simple-form textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:4px;
  font-family:var(--sans); font-size:1rem; background:var(--white); color:var(--ink);
}
form.simple-form textarea{ min-height:130px; resize:vertical; }
form.simple-form input:focus, form.simple-form textarea:focus{ border-color:var(--green-mid); }
.form-note{ font-size:.85rem; color:var(--ink-soft); margin-top:-6px; }

/* ---------- footer ---------- */
footer.site-footer{
  background:var(--green-deep); color:#D9D0B4;
  padding:52px 0 26px;
}
footer.site-footer h4{ color:var(--white); font-size:1rem; margin-bottom:14px; }
footer.site-footer a{ text-decoration:none; color:#D9D0B4; }
footer.site-footer a:hover{ color:var(--straw-light); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:.94rem; }
.footer-bottom{
  border-top:1px solid rgba(217,208,180,.2);
  margin-top:40px; padding-top:20px;
  font-size:.82rem; color:#B9AF8E;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ---------- banner decoration (roofline) ---------- */
.roofline{
  position:relative; z-index:2;
  display:block; width:100%; height:26px; margin-top:-2px;
}