/* ============================================================================
   WAIWA V2.1.0 — "ENGINEERED PRECISION" PUBLIC REDESIGN
   Loaded AFTER site.css. A materially new visual language for the V2.1.0 release:
   graphite-steel surfaces (not green), monospace technical labels, drawing
   "title-block" section heads, flat hairline spec-cards, a graphite data-hero.
   Brand red (#FA0D01) = the single action colour. Brand green (#085231) =
   supporting identity / LINE / verified accent only.

   PRESERVES: all JS hooks (data-slider/header/nav-toggle/cookie/aos), the
   About media-frame fix, and the contact-bar 641–940px breakpoint logic
   (only colours are overridden here, never the responsive layout rules).
   ============================================================================ */

/* ── 1. Token re-theme: green-cast neutrals → cool graphite-steel ────────── */
:root {
  /* Graphite / steel neutral scale (cool, no green cast) */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f7f9;
  --neutral-100: #eef0f3;
  --neutral-200: #e0e4e9;
  --neutral-300: #cbd1d8;
  --neutral-400: #9aa4ad;
  --neutral-500: #6b757e;
  --neutral-600: #49525a;
  --neutral-700: #333b42;
  --neutral-800: #1f262c;
  --neutral-900: #12171b;

  /* Signature graphite surfaces for dark bands / hero / footer */
  --ink:        #12171b;
  --graphite:   #1a2126;
  --graphite-2: #232c33;
  --steel:      #3a444d;

  --surface-soft: #f2f4f6;
  --text:   #171d22;
  --muted:  #566069;
  --border: #dde1e6;
  --line:   #e2e6ea;
  --line-strong: #cdd3da;
  --on-dark:    #eef1f4;
  --on-dark-2:  #a7b0b8;

  /* Sharper, engineering-grade geometry */
  --radius-xs: 2px; --radius-sm: 2px; --radius-md: 3px;
  --radius-lg: 4px; --radius-xl: 5px; --radius-2xl: 6px;

  /* Flat, neutral shadows (no green tint) */
  --shadow-xs: 0 1px 2px rgba(18,23,27,0.05);
  --shadow-sm: 0 1px 3px rgba(18,23,27,0.08);
  --shadow-md: 0 2px 8px rgba(18,23,27,0.08);
  --shadow-lg: 0 10px 28px rgba(18,23,27,0.12);
  --shadow-xl: 0 18px 44px rgba(18,23,27,0.16);
  --shadow: var(--shadow-md);

  /* New V3 tokens */
  --font-mono: 'IBM Plex Mono', 'Cascadia Code', 'Segoe UI Mono', Consolas, ui-monospace, monospace;
  --hair: 1px solid var(--line);
  --hair-strong: 1px solid var(--line-strong);
  --grid-dark:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  --grid-size: 46px 46px;
}

body { background: var(--neutral-50); color: var(--text); }

/* Reusable monospace "technical label" */
.v3-mono, .hero-eyebrow, .section-eyebrow,
.section-head > a, .breadcrumb, .card small,
.home-cat-count, .quote-band .btn, .contact-bar-item {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

/* ── 2. Header + primary nav ─────────────────────────────────────────────── */
.site-header {
  background: var(--neutral-0);
  border-bottom: var(--hair-strong);
  box-shadow: none;
}
.site-header[data-header-scrolled="true"] { box-shadow: var(--shadow-sm); }
/* Red datum line across the very top — kept, sharpened */
.site-header::before {
  content: ""; display: block; height: 3px;
  background: var(--brand);
}
.brand-name-en { font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.brand-name-th { color: var(--muted); }

.main-nav { background: var(--neutral-0); border-top: var(--hair); }
.menu-item > a {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  color: var(--neutral-700);
}
.menu-item.is-active > a { color: var(--ink); }
.menu-item.is-active > a::after,
.menu-item > a[aria-current="page"]::after {
  background: var(--brand);
}
.lang-switch a {
  font-family: var(--font-mono);
  font-size: .74rem;
  border-color: var(--line-strong);
}
.lang-switch a.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.header-search-inline input { border-color: var(--line-strong); border-radius: var(--radius-sm); }

/* ── 3. Buttons ──────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.btn:not(.alt):not(.hero-line-btn) { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.btn:not(.alt):not(.hero-line-btn):hover { background: var(--brand-deep); box-shadow: var(--shadow-accent); }
.btn.alt {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line-strong);
}
.btn.alt:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn.hero-line-btn { background: #06c755; border: 1px solid #06c755; color: #fff; }
.btn.hero-line-btn:hover { background: #05b34c; }
.btn:active { transform: translateY(1px); }

/* ── 4. Section heads → drawing "title blocks" ───────────────────────────── */
.section-head {
  position: relative;
  border-top: 2px solid var(--ink);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}
.section-head::before {           /* corner datum tick */
  content: ""; position: absolute; top: -2px; left: 0;
  width: 46px; height: 2px; background: var(--brand);
}
.section-head h2 {
  color: var(--ink); letter-spacing: -0.01em; line-height: 1.12;
}
.section-head > a {
  text-transform: uppercase; letter-spacing: .1em; font-size: .74rem;
  color: var(--brand-deep); font-weight: 600;
}
.section-eyebrow {
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .72rem; color: var(--brand-deep); font-weight: 600;
}

/* ── 5. Hero → graphite technical data-panel (photo becomes faint texture) ── */
.hero-industrial { background: var(--ink); }
/* Remove the leftover V2 centered red "datum bar" above the headline: it sits in
   normal flow (position:static) and floated misaligned once the V3 hero became
   left-aligned. The V3 hero uses a single left-aligned eyebrow tick instead. */
.hero-industrial .slide-content::before { display: none !important; }
.hero-industrial .slide-media {
  filter: grayscale(1) contrast(1.04) brightness(0.42);
  background-color: var(--ink);
}
.hero-industrial .slide-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(115deg, rgba(15,19,23,0.94) 0%, rgba(20,26,31,0.86) 55%, rgba(26,33,39,0.78) 100%),
    var(--grid-dark);
  background-size: auto, var(--grid-size);
}
.hero-inner { position: relative; z-index: 3; }
.hero-eyebrow {
  color: #fff; text-transform: uppercase; letter-spacing: .2em;
  font-size: .74rem; position: relative; padding-left: 52px;
}
.hero-eyebrow::before {           /* red measurement tick before the eyebrow */
  content: ""; position: absolute; left: 0; top: 50%; width: 40px; height: 2px;
  background: var(--brand); transform: translateY(-50%);
}
.slide-heading {
  color: #fff; letter-spacing: -0.02em; line-height: 1.06;
  font-weight: 700;
}
.hero-sub { color: var(--on-dark-2); }
.slider-dots button, .slider-dots [data-slider-dot] { border-radius: 0 !important; }

/* ── 6. Home category quick-nav tiles ────────────────────────────────────── */
.home-cat-tile {
  border: var(--hair-strong); border-radius: var(--radius-sm);
  background: var(--neutral-0); transition: border-color var(--duration-fast), transform var(--duration-fast);
}
.home-cat-tile:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.home-cat-tile::before {          /* left datum edge */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-green);
}
.home-cat-name { color: var(--ink); font-weight: 600; }
.home-cat-count { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.home-cat-arrow { color: var(--brand); }

/* ── 7. Capability plates ────────────────────────────────────────────────── */
.highlight-card {
  background: var(--neutral-0); border: var(--hair);
  border-left: 3px solid var(--brand-green); border-radius: var(--radius-sm);
  box-shadow: none;
}
.highlight-card h3 { color: var(--ink); }
.highlight-card p { color: var(--muted); }

/* ── 8. Cards → flat hairline "spec cards" ───────────────────────────────── */
.card {
  background: var(--neutral-0);
  border: var(--hair-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  position: relative;
}
.card::after {                     /* red top accent drawn on hover */
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card:hover::after { transform: scaleX(1); }
.product-card img, .card > img {
  background: var(--surface-soft);
  border-bottom: var(--hair);
}
.card small, .product-card small {
  text-transform: uppercase; letter-spacing: .1em; font-size: .68rem;
  color: var(--brand-green); font-weight: 600;
}
.card h3 { color: var(--ink); }
.card p { color: var(--muted); }
.card > a:last-child, .service-card-link, .resource-card .resource-card-body a {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
  font-size: .72rem; color: var(--brand-deep); font-weight: 600;
}

/* ── 9. Inside-Waiwa proof band → graphite ───────────────────────────────── */
.inside-waiwa {
  background: var(--graphite);
  background-image: var(--grid-dark); background-size: var(--grid-size);
}
.inside-waiwa .section-eyebrow { color: #fff; }
.inside-waiwa h2 { color: #fff; }
.inside-waiwa-lead { color: var(--on-dark-2); }
.inside-feature figcaption, .inside-support figcaption {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .66rem;
}
/* BUGFIX (pre-existing since V2): the feature <img height:100%> collapsed because
   the percentage height never resolved against the stretched-but-auto grid cell
   (the supports render because they use aspect-ratio). Absolute-fill the frame —
   the same proven pattern used for the About media frame. */
.inside-feature { position: relative; min-height: 320px; }
.inside-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── 10. Quotation / services CTA bands → graphite with red edge ─────────── */
.quote-band, .services-cta {
  background: var(--ink);
  background-image: var(--grid-dark); background-size: var(--grid-size);
  border-top: 3px solid var(--brand);
}
.quote-band h2, .services-cta h2, .services-cta-inner h2 { color: #fff; letter-spacing: -0.01em; }
.quote-band p, .services-cta p { color: var(--on-dark-2); }
.quote-band .btn.alt, .services-cta .btn.alt { color: #fff; border-color: rgba(255,255,255,0.4); }
.quote-band .btn.alt:hover, .services-cta .btn.alt:hover { background: #fff; color: var(--ink); border-color:#fff; }

/* ── 11. Inner-page header band → graphite title block ───────────────────── */
.page-header {
  background: var(--graphite);
  background-image: var(--grid-dark); background-size: var(--grid-size);
  border-bottom: 3px solid var(--brand);
}
.page-header h1 { color: #fff; letter-spacing: -0.015em; }
.page-header-lead { color: var(--on-dark-2); }
.breadcrumb--on-dark, .breadcrumb--on-dark a, .breadcrumb--on-dark span {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem;
  color: var(--on-dark-2);
}
.breadcrumb--on-dark a:hover { color: #fff; }

/* ── 12. Products page sidebar ───────────────────────────────────────────── */
.products-cat-link {
  border-radius: var(--radius-sm); color: var(--neutral-700);
  border-left: 3px solid transparent;
}
.products-cat-link:hover { background: var(--surface-soft); }
.products-cat-link.is-active {
  background: var(--surface-soft); color: var(--ink); font-weight: 600;
  border-left-color: var(--brand);
}

/* ── 13. Footer → ink/graphite ───────────────────────────────────────────── */
.site-footer { background: var(--ink); color: var(--on-dark); }
.ft-identity { background: var(--graphite); border-bottom: 1px solid rgba(255,255,255,0.08); }
.ft-identity::after { background: var(--brand); }   /* thin red top accent only (site.css ::before grid overlay left intact) */
.ft-company-name-en { color: #fff; }
.ft-company-name-th { color: var(--on-dark-2); }
.ft-tagline { color: var(--on-dark-2); }
.ft-info-heading {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: .74rem; color: #fff;
}
.ft-info-heading::after { background: var(--brand); }
.ft-contact-item, .ft-contact-item a, .ft-nav-list a { color: var(--on-dark-2); }
.ft-contact-item a:hover, .ft-nav-list a:hover { color: #fff; }
.ft-contact-item i { color: var(--brand); }
.ft-social-label { color: var(--on-dark-2); }
.ft-legal-bar { background: rgba(0,0,0,0.25); border-top: 1px solid rgba(255,255,255,0.08); }
.ft-legal-nav a { color: var(--on-dark-2); }
.ft-legal-nav a:hover { color: #fff; }
.ft-bottom { background: rgba(0,0,0,0.4); }
.ft-bottom-copy, .ft-bottom-copy a { color: var(--on-dark-2); font-size: .8rem; }

/* ── 14. Fixed bottom contact bar — COLOURS ONLY (keep 641–940 layout) ───── */
.contact-bar { background: var(--ink); border-top: 2px solid var(--brand); }
.contact-bar-item, .contact-bar-item a, .contact-bar-text, .contact-bar-text-short { color: var(--on-dark); }
.contact-bar-item i { color: var(--brand); }
a.contact-bar-item:hover { color: #fff; }
.contact-bar-line { background: #06c755; color: #fff; border-radius: var(--radius-sm); }
.contact-bar-line:hover { background: #05b34c; }

/* ── 15. Brand partner strip ─────────────────────────────────────────────── */
.brand-strip { background: var(--neutral-0); border-top: var(--hair); border-bottom: var(--hair); }

/* ── 16. Forms ───────────────────────────────────────────────────────────── */
input, select, textarea {
  border-radius: var(--radius-sm) !important;
  border-color: var(--line-strong);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10,90,55,0.18);
}
label { color: var(--ink); }

/* ── 16b. Contact quick-actions: guaranteed clean 3-up (removes the auto-fit
   phantom 4th column and the asymmetric 2+1 wrap); stacks on small screens. ── */
.contact-quick-row { grid-template-columns: repeat(3, 1fr); }
.contact-quick-item { border-radius: var(--radius-sm); }
.contact-quick-item:hover { border-color: var(--line-strong); }
.contact-quick-label { font-family: var(--font-mono); color: var(--muted); }
.contact-quick-value { color: var(--ink); }
@media (max-width: 760px) { .contact-quick-row { grid-template-columns: 1fr; } }

/* ── 17. Accessibility: visible focus + reduced motion ───────────────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible,
[tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .card:hover { transform: none; }
}

/* ── 18. Rich content images stay contained (reinforce V2 safety net) ────── */
.rich-content img { border-radius: var(--radius-sm); }