/* ============================================================
   249 CONSTRUCTION — stylesheet
   Palette: charcoal / iron / concrete / steel-light / limestone
   Accent : safety amber (hazard-signage orange)
   Type   : Chakra Petch (display) + Sarabun (body, Thai)
   ============================================================ */

:root{
  --charcoal: #212220;
  --iron: #4a4a45;
  --concrete: #82817a;
  --steel-light: #c8c6bd;
  --limestone: #efeee8;
  --limestone-2: #e5e3da;
  --white: #ffffff;
  --ink: #201f1c;
  --amber: #e2820f;
  --amber-dark: #b8660a;

  --container: 1180px;
  --radius: 2px;
  --shadow: 0 12px 30px -14px rgba(33,34,32,.35);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--limestone);
  color:var(--ink);
  font-family:'Sarabun', sans-serif;
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Chakra Petch', 'Sarabun', sans-serif;
  font-weight:600;
  color:var(--charcoal);
  line-height:1.25;
  margin:0 0 .5em;
  letter-spacing:.01em;
}
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

/* ---------- eyebrow / kicker ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:'Chakra Petch', sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--amber-dark);
  margin-bottom:.9em;
}
.eyebrow::before{
  content:"";
  width:26px; height:2px;
  background:var(--amber);
  display:inline-block;
}

/* ---------- hazard stripe divider (signature element) ---------- */
.stripe{
  height:8px;
  background:repeating-linear-gradient(
    -45deg,
    var(--charcoal) 0 16px,
    var(--amber) 16px 32px
  );
}
.stripe--thin{ height:5px; }

/* ---------- blueprint corner-mark frame (signature element) ---------- */
.blueprint-frame{
  position:relative;
  overflow:hidden;
  background:var(--iron);
}
.blueprint-frame img{
  width:100%; height:100%; object-fit:cover;
  display:block;
}
.blueprint-frame::before,
.blueprint-frame::after{
  content:"";
  position:absolute;
  width:22px; height:22px;
  pointer-events:none;
  z-index:2;
}
.blueprint-frame::before{
  top:10px; left:10px;
  border-top:2px solid var(--amber);
  border-left:2px solid var(--amber);
}
.blueprint-frame::after{
  bottom:10px; right:10px;
  border-bottom:2px solid var(--amber);
  border-right:2px solid var(--amber);
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  background:var(--charcoal);
  position:sticky; top:0; z-index:50;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  max-width:var(--container);
  margin:0 auto;
}
.logo{
  display:flex;
  align-items:baseline;
  gap:.4em;
  font-family:'Chakra Petch', sans-serif;
  font-weight:700;
  font-size:1.25rem;
  color:var(--white);
  letter-spacing:.02em;
}
.logo span{
  color:var(--amber);
}
.nav-links{
  display:flex;
  gap:2.2rem;
}
.nav-links a{
  color:var(--steel-light);
  font-size:.95rem;
  font-weight:500;
  padding:.4em 0;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"]{
  color:var(--white);
  border-color:var(--amber);
}
.nav-cta{
  display:flex;
  align-items:center;
  gap:1.2rem;
}
.nav-tel{
  display:none;
  color:var(--white);
  font-family:'Chakra Petch',sans-serif;
  font-weight:600;
  font-size:.92rem;
  white-space:nowrap;
}
.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--iron);
  border-radius:var(--radius);
  width:42px; height:42px;
  color:var(--white);
  font-size:1.3rem;
  cursor:pointer;
}

@media (min-width:900px){
  .nav-tel{ display:inline-block; }
}

@media (max-width:860px){
  .nav-links{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--charcoal);
    flex-direction:column;
    gap:0;
    padding:8px 24px 20px;
    display:none;
    border-top:1px solid var(--iron);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{
    padding:.9em 0;
    border-bottom:1px solid var(--iron);
    width:100%;
  }
  .nav-toggle{ display:block; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:'Chakra Petch',sans-serif;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.03em;
  padding:.9em 1.7em;
  border-radius:var(--radius);
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:var(--amber);
  color:var(--charcoal);
}
.btn-primary:hover{ background:var(--amber-dark); color:var(--white); }
.btn-outline{
  border-color:rgba(255,255,255,.5);
  color:var(--white);
}
.btn-outline:hover{ border-color:var(--white); background:rgba(255,255,255,.08); }
.btn-dark{
  background:var(--charcoal);
  color:var(--white);
}
.btn-dark:hover{ background:var(--iron); }
.btn-block{ width:100%; justify-content:center; }

/* ============================================================
   HERO — homepage
   ============================================================ */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:flex-end;
  color:var(--white);
  background:var(--charcoal);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,20,18,.55) 0%, rgba(20,20,18,.35) 35%, rgba(20,20,18,.92) 100%);
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px);
  opacity:.5;
}
.hero-content{
  position:relative;
  z-index:2;
  padding:120px 24px 64px;
  max-width:var(--container);
  margin:0 auto;
  width:100%;
}
.hero-content .eyebrow{ color:var(--amber); }
.hero-content h1{
  color:var(--white);
  font-size:clamp(2.3rem, 5.4vw, 4.1rem);
  max-width:16ch;
  margin-bottom:.35em;
}
.hero-content .lead{
  color:var(--steel-light);
  font-size:1.15rem;
  max-width:52ch;
  margin-bottom:1.8em;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:2.6em;
}
.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:2.6rem;
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:1.6em;
}
.hero-stats div{ min-width:120px; }
.hero-stats .num{
  font-family:'Chakra Petch',sans-serif;
  font-weight:700;
  font-size:2rem;
  color:var(--amber);
  display:block;
}
.hero-stats .label{
  font-size:.85rem;
  color:var(--steel-light);
}

/* small page hero (about / contact / privacy) */
.page-hero{
  position:relative;
  color:var(--white);
  background:var(--charcoal);
  padding:90px 24px 56px;
  overflow:hidden;
}
.page-hero .hero-bg{ opacity:.55; }
.page-hero .hero-bg::after{
  background:linear-gradient(180deg, rgba(20,20,18,.55), rgba(20,20,18,.94));
}
.page-hero-content{
  position:relative; z-index:2;
  max-width:var(--container);
  margin:0 auto;
}
.page-hero h1{ color:var(--white); font-size:clamp(2rem,4.6vw,3rem); margin-bottom:.3em; }
.page-hero .lead{ color:var(--steel-light); max-width:60ch; font-size:1.05rem; }

/* ============================================================
   SECTIONS — general
   ============================================================ */
section{ padding:88px 0; }
.section-tight{ padding:64px 0; }
.section-alt{ background:var(--white); }
.section-dark{ background:var(--charcoal); color:var(--steel-light); }
.section-dark h2{ color:var(--white); }
.section-head{
  max-width:640px;
  margin-bottom:3rem;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem,3vw,2.4rem); }
.section-head p{ color:var(--iron); font-size:1.05rem; }
.section-dark .section-head p{ color:var(--steel-light); }

/* about intro w/ image */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
.split.reverse .split-media{ order:2; }
.split-media{ aspect-ratio:4/5; }
.split-text .eyebrow{ margin-bottom:.9em; }
.split-text h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
.split-text p{ color:var(--iron); }

@media (max-width:820px){
  .split{ grid-template-columns:1fr; gap:2.2rem; }
  .split.reverse .split-media{ order:0; }
}

/* services grid */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.8rem;
}
.grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.6rem;
}
@media (max-width:960px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .grid-3, .grid-4{ grid-template-columns:1fr; }
}

.service-card{
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}
.service-card .blueprint-frame{ aspect-ratio:4/3; }
.service-card-body{ padding:1.6rem 1.5rem 1.9rem; }
.service-card-body h3{ font-size:1.2rem; margin-bottom:.5em; }
.service-card-body p{ color:var(--iron); font-size:.96rem; margin-bottom:0; }
.service-tag{
  display:inline-block;
  font-family:'Chakra Petch',sans-serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--amber-dark);
  background:rgba(226,130,15,.12);
  padding:.35em .8em;
  border-radius:100px;
  margin-bottom:.9em;
}

/* value / feature cards (no numbering — not a sequence) */
.feature-card{
  padding:2rem 1.7rem;
  background:var(--white);
  border-left:3px solid var(--amber);
  box-shadow:var(--shadow);
}
.feature-card h3{ font-size:1.1rem; margin-bottom:.5em; }
.feature-card p{ color:var(--iron); font-size:.95rem; margin-bottom:0; }

/* process steps — a genuine ordered sequence, numbering is meaningful here */
.process{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.2rem;
  counter-reset:step;
}
@media (max-width:960px){ .process{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .process{ grid-template-columns:1fr; } }
.step{
  position:relative;
  padding:1.8rem 1.4rem 1.6rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
}
.step::before{
  counter-increment:step;
  content: counter(step, decimal-leading-zero);
  display:block;
  font-family:'Chakra Petch',sans-serif;
  font-weight:700;
  font-size:1.6rem;
  color:var(--amber);
  margin-bottom:.5em;
}
.step h3{ color:var(--white); font-size:1.02rem; margin-bottom:.4em; }
.step p{ color:var(--steel-light); font-size:.88rem; margin-bottom:0; }

/* CTA banner */
.cta-banner{
  background:var(--amber);
  color:var(--charcoal);
  padding:3.4rem 0;
}
.cta-banner .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.cta-banner h2{ color:var(--charcoal); font-size:clamp(1.5rem,3vw,2rem); margin-bottom:.2em; }
.cta-banner p{ margin-bottom:0; color:rgba(33,34,32,.75); }

/* gallery */
.gallery{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:130px;
  gap:10px;
}
.gallery .blueprint-frame:nth-child(1){ grid-column:span 3; grid-row:span 2; }
.gallery .blueprint-frame:nth-child(2){ grid-column:span 3; grid-row:span 1; }
.gallery .blueprint-frame:nth-child(3){ grid-column:span 2; grid-row:span 1; }
.gallery .blueprint-frame:nth-child(4){ grid-column:span 2; grid-row:span 2; }
.gallery .blueprint-frame:nth-child(5){ grid-column:span 2; grid-row:span 1; }
@media (max-width:760px){
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .gallery .blueprint-frame{ grid-column:span 1 !important; grid-row:span 1 !important; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:3rem;
}
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-card{
  background:var(--white);
  box-shadow:var(--shadow);
  padding:2.2rem;
}
.contact-list{ margin-top:1.6rem; }
.contact-list li{
  display:flex;
  gap:1rem;
  padding:1rem 0;
  border-top:1px solid var(--limestone-2);
}
.contact-list li:first-child{ border-top:none; }
.contact-list .k{
  font-family:'Chakra Petch',sans-serif;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--amber-dark);
  min-width:100px;
}
.contact-list .v{ color:var(--ink); font-size:.98rem; }
.contact-list a.v:hover{ color:var(--amber-dark); }

.map-frame{
  width:100%;
  min-height:340px;
  border:0;
  filter:grayscale(.35) contrast(1.05);
  box-shadow:var(--shadow);
}

.form-field{ margin-bottom:1.3rem; }
.form-field label{
  display:block;
  font-family:'Chakra Petch',sans-serif;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--iron);
  margin-bottom:.5em;
}
.form-field input,
.form-field textarea{
  width:100%;
  padding:.85em 1em;
  border:1.5px solid var(--limestone-2);
  background:var(--limestone);
  border-radius:var(--radius);
  font-family:'Sarabun',sans-serif;
  font-size:.98rem;
  color:var(--ink);
}
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--amber);
  background:var(--white);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

/* ============================================================
   PRIVACY PAGE
   ============================================================ */
.policy{
  max-width:820px;
  margin:0 auto;
}
.policy h2{
  font-size:1.35rem;
  margin-top:2.4em;
  padding-top:1.2em;
  border-top:1px solid var(--limestone-2);
}
.policy h2:first-of-type{ margin-top:0; padding-top:0; border-top:none; }
.policy p, .policy li{ color:var(--iron); }
.policy ul{ margin:0 0 1.2em; padding-left:1.3em; list-style:disc; }
.policy li{ margin-bottom:.5em; }
.policy .updated{
  display:inline-block;
  font-family:'Chakra Petch',sans-serif;
  font-size:.82rem;
  color:var(--amber-dark);
  background:rgba(226,130,15,.1);
  padding:.4em .9em;
  margin-bottom:2em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--charcoal);
  color:var(--steel-light);
  padding:64px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2.6rem;
  padding-bottom:3rem;
  border-bottom:1px solid var(--iron);
}
@media (max-width:760px){
  .footer-grid{ grid-template-columns:1fr; gap:2rem; }
}
.footer-brand .logo{ margin-bottom:1em; }
.footer-brand p{ color:var(--concrete); font-size:.92rem; max-width:34ch; }
.footer-col h4{
  color:var(--white);
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:1.1em;
}
.footer-col li{ margin-bottom:.7em; font-size:.92rem; }
.footer-col a:hover{ color:var(--amber); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.8rem;
  padding:1.6rem 0;
  font-size:.82rem;
  color:var(--concrete);
}
.footer-bottom a:hover{ color:var(--amber); }