/* 90'S ENGINEER — shared stylesheet
   Colors/fonts/components lifted as-is from the original design (Home/Services/Contact/
   Portfolio/BusinessInfo/Calculators pages) so the real site matches the brand exactly.
   Added on top: responsive layout, mobile nav, and a working portfolio modal + contact form. */

* { box-sizing: border-box; }

:root{
  --ink: oklch(22% 0.013 268);
  --ink-soft: oklch(40% 0.013 268);
  --ink-mute: oklch(48% 0.013 268);
  --ink-faint: oklch(50% 0.013 268);
  --line: oklch(92% 0.0052 268);
  --line-soft: oklch(88% 0.0065 268);
  --bg: oklch(98% 0.0033 268);
  --bg-header: oklch(95% 0.0097 268);
  --dark: oklch(27% 0.008 268);
  --accent: oklch(42% 0.17 25);
  --accent-hover: oklch(34% 0.18 25);
  --accent-strong: oklch(50% 0.18 25);
  --accent-ink: oklch(99% 0.005 268);
  --tile: oklch(90% 0.0195 268);
  --chip-bg: oklch(93% 0.013 268);
  --chip-ink: oklch(38% 0.16 25);
  --ok-bg: oklch(88% 0.055 145);
  --ok-ink: oklch(35% 0.09 145);
}

html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Noto Sans Thai","Sarabun",sans-serif;
  background:var(--bg);
  color:var(--ink);
}
h1,h2,h3,.disp{ font-family:"Prompt","Noto Sans Thai",sans-serif; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-hover); }
img{ max-width:100%; display:block; }

.wrap{ max-width:1312px; margin:0 auto; padding-left:32px; padding-right:32px; }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:10px;
  font-family:"Prompt"; font-weight:600; font-size:16px; cursor:pointer; border:none;
}
.btn-primary{ background:var(--accent-strong); color:var(--accent-ink); }
.btn-dark{ background:var(--dark); color:#fff; }
.btn-ghost{ background:transparent; color:oklch(28% 0.013 268); border:1.5px solid var(--line-soft); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.card{ background:#fff; border:1px solid var(--line); border-radius:14px; }
.chip{ padding:7px 15px; border-radius:999px; background:var(--chip-bg); color:var(--chip-ink); font-size:13.5px; font-weight:500; display:inline-block; }
.chip-ok{ background:var(--ok-bg); color:var(--ok-ink); font-size:12px; padding:5px 11px; }
.pillar-icon{ width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.navlink{ color:oklch(32% 0.013 268); }
.navlink-active{ color:var(--accent); font-weight:700; }

.field-label{ font-size:13px; font-weight:600; color:oklch(30% 0.013 268); margin-bottom:7px; display:block; }
.field-input{
  width:100%; padding:12px 14px; border-radius:9px; border:1.5px solid var(--line-soft);
  font-family:"Noto Sans Thai"; font-size:14px; color:oklch(24% 0.013 268); background:#fff;
}
.field-input:focus{ outline:2px solid var(--accent-strong); outline-offset:1px; }
textarea.field-input{ resize:vertical; font-family:inherit; }

.kv-row{ display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.kv-row:last-child{ border-bottom:none; }

/* ---------- NAV ---------- */
.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:40px; height:40px; border-radius:50%; }
.brand-name{ font-size:20px; font-weight:700; color:inherit; }
.brand-name span{ color:var(--accent); }
.nav-links{ display:flex; align-items:center; gap:28px; font-weight:500; font-size:14.5px; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-login{ font-weight:600; color:oklch(30% 0.013 268); }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle svg{ display:block; }

@media (max-width: 900px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .2s ease;
  }
  .nav-links.open{ max-height:420px; }
  .nav-links a{ width:100%; padding:14px 24px; border-top:1px solid var(--line); }
  .nav-cta{ gap:10px; }
  .nav-login{ display:none; }
  .nav-toggle{ display:inline-flex; }
}

/* ---------- PAGE HEADER ---------- */
.page-header{
  padding:56px 32px 44px 32px;
  background: linear-gradient(180deg, var(--bg-header), var(--bg) 70%);
}
.crumb{ font-size:13.5px; color:var(--ink-mute); margin-bottom:14px; }
.crumb a{ color:inherit; }
.page-header h1{ font-size:38px; line-height:1.3; font-weight:700; margin:0 0 14px 0; }
.page-header p{ font-size:16px; line-height:1.75; color:var(--ink-soft); margin:0; }
.header-row{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.header-actions{ display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width: 640px){
  .page-header h1{ font-size:29px; }
  .header-actions .btn{ padding:11px 18px; font-size:14.5px; }
}

/* ---------- SOCIAL STRIP + FOOTER ---------- */
.social-strip{
  background:var(--dark); padding:36px 32px; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.social-strip .disp{ color:#fff; font-weight:600; font-size:16px; }
.social-links{ display:flex; gap:28px; color:oklch(88% 0.013 268); font-size:14.5px; font-weight:500; }
.social-links a{ color:inherit; }

.site-footer{
  background:#fff; padding:44px 32px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:32px;
}
.footer-cols{ display:flex; gap:56px; font-size:14px; color:var(--ink-soft); flex-wrap:wrap; }
.footer-col{ display:flex; flex-direction:column; gap:10px; }
.footer-col b{ color:oklch(24% 0.013 268); }
.footer-copy{ font-size:13px; color:var(--ink-faint); margin-top:8px; }

/* ---------- GRID HELPERS ---------- */
.grid-4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.two-col{ display:flex; gap:32px; align-items:flex-start; }

@media (max-width: 960px){
  .grid-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .grid-3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .two-col{ flex-direction:column; }
}
@media (max-width: 600px){
  .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; }
  .wrap, .page-header, .site-nav, .social-strip, .site-footer{ padding-left:20px; padding-right:20px; }
}

/* ---------- PORTFOLIO MODAL ---------- */
.pf-card{ overflow:hidden; cursor:pointer; }
.pf-thumb{ height:150px; background-position:center; background-size:cover; }
.pf-body{ padding:20px; }
.pf-modal{
  display:none; position:fixed; inset:0; background:rgba(20,14,12,0.82); z-index:100;
  align-items:center; justify-content:center; padding:24px;
}
.pf-modal.open{ display:flex; }
.pf-modal-inner{
  background:#fff; border-radius:16px; max-width:1040px; width:100%; max-height:88vh;
  overflow-y:auto; padding:32px;
}
.pf-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:16px; }
.pf-gallery{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.pf-gallery img{ width:100%; border-radius:10px; }
.pf-gallery .full{ grid-column:1 / -1; }

/* ---------- CALCULATOR MODULE CARDS ---------- */
.mod-card{ padding:26px; display:block; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s, box-shadow .15s; }
a.mod-card:hover{ border-color:var(--accent-strong); transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.06); }
.mod-title{ font-weight:700; font-size:16px; }
.mod-sub{ font-size:12.5px; color:var(--ink-faint); margin:6px 0 10px 0; }
.mod-desc{ font-size:13.5px; line-height:1.7; color:var(--ink-mute); margin:0 0 16px 0; }

/* ---------- FORM STATUS ---------- */
.form-status{ font-size:13.5px; padding:12px 14px; border-radius:9px; margin-top:14px; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ background:oklch(93% 0.05 145); color:oklch(30% 0.09 145); }
.form-status.err{ background:oklch(93% 0.05 25); color:oklch(35% 0.12 25); }

.notebox{
  background:oklch(96% 0.03 90); border:1px solid oklch(85% 0.08 90); border-radius:12px;
  padding:16px 18px; font-size:13.5px; line-height:1.7; color:oklch(32% 0.05 90);
}
.notebox.red{
  background:oklch(96% 0.03 25); border-color:oklch(80% 0.12 25); color:oklch(34% 0.1 25);
}