/* ============================================================
   LEONICS WEBSITE — ABB-STYLE B2B DESIGN
   Reference: ABB.com / Schneider Electric / Hitachi
   3-color discipline: White + Black + LEONICS Green
   Editorial typography · Sharp corners · Hairline separators
   Last updated: 2026-05-07
   ============================================================ */

:root {
  /* === TRI-COLOR PALETTE (3 สีเท่านั้น) === */
  --bg: #FFFFFF;            /* ขาวล้วน — 90% ของหน้า */
  --black: #0A0A0A;         /* near-black */
  --green: #00734D;         /* LEONICS Green ลึก (ปรับจาก #00895A ให้ B2B กว่า) */
  --green-d: #005A3C;       /* Hover */
  --green-pale: #F4FAF7;    /* subtle bg เฉพาะที่ใช้น้อยมาก */

  /* === GREYS (3 ระดับเท่านั้น) === */
  --text: #0A0A0A;          /* primary */
  --text-2: #404040;        /* secondary */
  --muted: #6E6E6E;         /* tertiary */
  --line: #E5E5E5;          /* hairline separator */
  --line-soft: #F0F0F0;     /* very faint */
  --bg-soft: #FAFAFA;       /* subtle section bg ถ้าจำเป็น */

  /* === TYPOGRAPHY === */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* === SIZES === */
  --container: 1280px;
  --container-narrow: 920px;
  --radius: 2px;
  --radius-pill: 99px;

  /* === TRANSITIONS === */
  --transition: 0.18s ease;

  /* === TYPE SCALE (single source of truth — 8 steps) === */
  --fs-display: clamp(28px, 3.2vw, 40px);   /* hero H1 */
  --fs-h2:      clamp(22px, 2.4vw, 28px);   /* section title */
  --fs-h3:      18px;                        /* subsection */
  --fs-lead:    18px;                        /* intro paragraph */
  --fs-body:    16px;                        /* default body */
  --fs-sm:      14px;                        /* secondary / dense */
  --fs-caption: 13px;                        /* meta, captions */
  --fs-micro:   11px;                        /* eyebrow, pill, label (min) */
  --fs-stat-lg: clamp(24px, 2.2vw, 34px);     /* hero / big KPI number (fits 6-col stats) */
  --fs-stat:    32px;                         /* standard KPI number */
  --fs-stat-sm: 24px;                         /* small KPI / large label */
  --fs-section-title: clamp(20px, 1.7vw, 26px); /* section heading (smaller than h2, ABB restraint) */

  /* === SPACING SCALE (8px grid) === */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-6: 48px; --sp-8: 64px; --sp-12: 96px;

  /* === LINE HEIGHTS === */
  --lh-tight: 1.2;   --lh-heading: 1.3;   --lh-body: 1.6;   --lh-relaxed: 1.7;
}

/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;              /* prevent horizontal scroll on viewport */
}
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  overflow-x: hidden;              /* safety net — child element won't push body wider */
  width: 100%;
  max-width: 100vw;
}

/* === Grid/flex children should be allowed to shrink — prevents overflow === */
.hero-grid > *,
.feature-grid > *,
.card-grid > *,
.footer-grid > *,
.cta-band .container > *,
.stats-grid > * {
  min-width: 0;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--green-d); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }

/* === KEYBOARD FOCUS =========================================================
   Until now the site relied on each browser's default ring, which differs per
   browser and does not match the design. One designed indicator, applied only
   for keyboard users (:focus-visible), so mouse clicks stay clean.
   Two-tone ring — white inner + black outer — stays visible on white cards,
   the green gradient and the dark CTA band alike. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
  border-radius: 1px;
}
/* On dark surfaces invert so the ring never disappears into the background */
.cta-band :focus-visible,
.proof-headline :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }

/* Skip link — WCAG 2.4.1 "bypass blocks". Off-screen until focused, then it
   appears as a normal button at top-left. Government and hospital procurement
   checklists look for this. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--black);
  color: #fff;
  padding: 12px 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  color: #fff;
}

/* === LAYOUT === */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 32px; }
.section { padding: var(--sp-6) 0; }
.section-sm { padding: var(--sp-4) 0; }
.section-lg { padding: var(--sp-8) 0; }

/* Hairline separator between sections */
.section-divide { border-top: 1px solid var(--line); }

/* ════════════════════════════════════════════
   ALTERNATING SECTION BACKGROUND
   White / Light grey alternating for visual rhythm
   Apply class="section-alt" to give a section the subtle grey bg
   ════════════════════════════════════════════ */
.section-alt { background: var(--bg-soft); }

/* Auto-alternate consecutive .section elements on the homepage
   (every 2nd section gets light grey bg automatically) */
main > .section:nth-of-type(even):not(.no-alt) { background: var(--bg-soft); }
/* Reset border when section-alt has bg color (no need for divide line) */
main > .section:nth-of-type(even).section-divide { border-top: 1px solid transparent; }
/* Stats bar before alt section — reset its divide line */
.stats-bar + .section-divide { border-top-color: var(--line); }

/* === TYPOGRAPHY (Editorial — Inter all weights) === */
h1, h2, h3, h4, h5 {
  font-family: var(--font);
  color: var(--text);
  font-weight: 700;
}
h1 {
  font-size: var(--fs-display);   /* tighter — readable, no over-wrap */
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
}
h2 {
  font-size: var(--fs-h2);   /* paired with smaller H1 */
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-heading);
}
h4 { font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; }
p { color: var(--text-2); }
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-2);
  font-weight: 400;
}

.eyebrow {
  display: inline-block;
  font-size: 11px;                 /* slightly smaller */
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 14px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--green);
}

/* Section title — explicit override on top of h2 base.
   ABB-style restraint: ~24px desktop, never above 26px. Pairs cleanly with
   10.5px eyebrow (~2.3x ratio) and 16px body (~1.5x ratio). */
.section-title {
  font-size: var(--fs-section-title);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-bottom: 12px;
  max-width: 800px;
}
.text-center .section-title { margin-left: auto; margin-right: auto; }
.section-sub {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  max-width: 640px;
  margin-bottom: 32px;          /* down from 48px */
  font-weight: 400;
}

/* === BADGES === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--line);
}
.badge.green { background: var(--bg); color: var(--green); border-color: var(--green); }
.badge.neutral { background: var(--bg-soft); color: var(--muted); border-color: var(--line); }
.badge.amber, .badge.teal { background: var(--bg); color: var(--text); border-color: var(--text); }

.spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.spec-pill .label { color: var(--muted); }
.spec-pill .value { color: var(--text); font-weight: 600; }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: var(--radius);
  transition: all var(--transition);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-d); color: #fff; }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--text); }
.btn-secondary:hover { background: var(--text); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--text);
  padding: 6px 0;
  font-weight: 500;
}
.btn-ghost:hover { color: var(--green); }
.btn-ghost::after {
  content: '→';
  margin-left: 4px;
  transition: transform var(--transition);
}
.btn-ghost:hover::after { transform: translateX(4px); }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* === ICONS === */
.icon { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.5; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 28px; height: 28px; }

/* === HEADER / NAV === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 20px;
  flex-wrap: nowrap;
  min-width: 0;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.nav-logo .logo-mark {
  width: 40px; height: 40px;
  background: var(--green);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
}
.nav-logo .logo-text {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.nav-links { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.nav-links a {
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: var(--radius);
  transition: color var(--transition);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--green); }
.nav-links a.active { color: var(--green); }
.nav-links a.nav-highlight {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 6px 12px;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
}
.nav-links a.nav-highlight:hover {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.nav-links a.nav-highlight.active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

/* ════════════════════════════════════════════
   NAV DROPDOWN (Resources, Company groupings)
   ════════════════════════════════════════════ */
.nav-dropdown { position: relative; }
.nav-dropdown .nav-trigger {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: color var(--transition);
  white-space: nowrap;
}
.nav-dropdown.active .nav-trigger,
.nav-dropdown:hover .nav-trigger { color: var(--green); }
.nav-dropdown .nav-trigger svg {
  transition: transform var(--transition);
  opacity: 0.7;
}
.nav-dropdown.open .nav-trigger svg,
.nav-dropdown:hover .nav-trigger svg { transform: rotate(180deg); }

/* Dropdown menu */
.nav-dropdown .nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
  z-index: 100;
}
/* Show on hover (desktop) AND when .open class added (click/mobile/keyboard) */
.nav-dropdown:hover .nav-menu,
.nav-dropdown.open .nav-menu,
.nav-dropdown:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav-dropdown .nav-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition);
}
.nav-dropdown .nav-menu a:hover,
.nav-dropdown .nav-menu a:focus { background: var(--bg-soft); }
.nav-dropdown .nav-menu a.active { background: var(--green-pale); }
.nav-dropdown .nav-menu a.active .ddi-label { color: var(--green); }

.nav-dropdown .nav-menu .ddi-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.nav-dropdown .nav-menu .ddi-desc {
  display: block;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* ════════════════════════════════════════════
   PRODUCTS MEGA-MENU (wide 5-column dropdown)
   ════════════════════════════════════════════ */
.nav-dropdown-mega { position: relative; }
/* Anchor mega-menu to LEFT edge of trigger (not centered) so the wide panel
   doesn't get clipped off-screen on the left when Products sits near the
   start of the nav. Width is tuned so the right edge stays inside a 1280px
   viewport when the trigger sits ~200-300px from page left. */
/* The mega panel anchors to the nav row, not to the "Products" item itself.
   Anchored to the item it began 307px in and ran 1040px wide, so on a 1280px
   screen it fell 67px off the right edge and clipped the Critical Power column
   ("Modular Frequency Converter" was the first label long enough to show it). */
.nav-wrap { position: relative; }
.nav-dropdown-mega { position: static; }

.nav-dropdown-mega .nav-mega {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  transform: translateY(-4px);
  width: min(1040px, 100%);
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.08);
  padding: 28px 32px 20px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
}
.nav-dropdown-mega:hover .nav-mega,
.nav-dropdown-mega.open .nav-mega,
.nav-dropdown-mega:focus-within .nav-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* "Browse all products" CTA — sits at the TOP of the mega-menu so it's the
   most prominent way to navigate to products.html. Clicking the trigger button
   itself only opens the menu (does NOT navigate). */
.mega-cta {
  margin: -8px -8px 20px;
  padding: 12px 16px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mega-cta-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.2px;
}
.mega-cta-link::after {
  content: '→';
  transition: transform var(--transition);
}
.mega-cta-link:hover { color: var(--green-d); }
.mega-cta-link:hover::after { transform: translateX(4px); }

.mega-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}

.mega-col {
  min-width: 0;
}
.mega-col-wide {
  /* Power Electronics column — wider with sub-groups */
}

.mega-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--green);
  display: inline-block;
}

.mega-subgroup {
  margin-bottom: 16px;
}
.mega-subgroup:last-child { margin-bottom: 0; }
.mega-subgroup-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 6px;
}

.mega-col a {
  display: block;
  /* Product names run long ("Solar Charge Controller with DC Load Timer"); let
     them wrap inside the column instead of pushing past it. */
  white-space: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  padding: 4px 0;
  text-decoration: none;
  transition: color var(--transition), padding-left var(--transition);
  line-height: 1.4;
}
.mega-col a:hover {
  color: var(--green);
  padding-left: 4px;
}

.mega-new {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--green);
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  vertical-align: 1px;
  line-height: 1;
}

.mega-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: right;
}
.mega-footer a {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  transition: color var(--transition);
}
.mega-footer a:hover { color: var(--green-d); }

/* Responsive — collapse mega-menu to vertical when narrow */
@media (max-width: 1180px) {
  .nav-dropdown-mega .nav-mega { width: calc(100vw - 32px); padding: 24px; }
  .mega-grid { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
}
@media (max-width: 900px) {
  /* When mobile nav opens — mega becomes inline collapsible */
  .nav-links.mobile-open .nav-dropdown-mega .nav-mega {
    position: static;
    width: 100%;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 16px;
    opacity: 1;
    visibility: visible;
    background: transparent;
    display: none;
  }
  .nav-links.mobile-open .nav-dropdown-mega.open .nav-mega { display: block; }
  .nav-links.mobile-open .nav-dropdown-mega:hover .nav-mega { display: none; }
  .nav-links.mobile-open .nav-dropdown-mega.open .nav-mega { display: block; }
  .nav-links.mobile-open .mega-grid { grid-template-columns: 1fr; gap: 16px; }
}
.nav-cta { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; flex-shrink: 0; }
.nav-cta .btn { white-space: nowrap; }
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 18px;
}

/* === HERO (Editorial — large H1) === */
.hero {
  padding: 40px 0 56px;       /* down from 96px 0 80px — ABB-style tight from top */
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.hero h1 {
  margin-bottom: 18px;
  max-width: 720px;
  line-height: 1.15;
}
.hero h1 .accent { color: var(--green); }
.hero .lead {
  margin-bottom: 24px;
  max-width: 600px;
  font-size: 18px;
  line-height: 1.6;
}
/* Product-detail hero highlights — pinned right after the lead, tight margin,
   becomes the visual anchor of the hero (4-cell spec strip). */
.hero-highlights {
  margin-top: 8px;
  margin-bottom: 0;
}
/* A product or portal screen shown at full container width. Hairline frame
   rather than a shadow — the screenshots are mostly white, and without an edge
   they bleed into the page. The caption carries what the screen cannot say for
   itself: when it was taken, and which of its numbers are illustrative. */
.portal-shot { margin: 0; }
.portal-shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.portal-shot figcaption {
  margin-top: 12px;
  max-width: 68ch;
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--text-2);
}

/* Scopes the figures in the row above: they are design outcomes, not results
   measured at the reader's site. Quiet on purpose — it has to be readable
   without competing with the numbers, so it sits at caption size in the muted
   ink rather than being boxed or badged. 12px, above the 11px floor. */
.metrics-note {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--text-2);
}
/* Tighten the gap between hero and the section directly below it on
   product-detail (and similar single-entity detail pages). */
.hero + .section { padding-top: var(--sp-4); }
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
  padding: 4px 16px 4px 0;
  border-right: 1px solid var(--line);
  margin-right: 16px;
  white-space: nowrap;
}
.trust-item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.trust-item .icon { color: var(--green); width: 16px; height: 16px; flex-shrink: 0; }

/* === HERO VISUAL === */
.hero-visual {
  position: relative;
  border: 1px solid var(--line);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Hero Photo (alternative to 4-quadrant grid) */
.hero-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-photo .photo-caption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  right: 16px;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.1px;
}
.hero-photo .photo-caption strong {
  font-weight: 600;
  color: #fff;
}
.hero-photo .photo-caption .spec {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}
.hero-visual .visual-item {
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
}
.hero-visual .visual-item:nth-child(2),
.hero-visual .visual-item:nth-child(4) { border-right: 0; }
.hero-visual .visual-item:nth-child(3),
.hero-visual .visual-item:nth-child(4) { border-bottom: 0; }
.hero-visual .visual-item .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
}
.hero-visual .visual-item .name {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: auto;
}
.hero-visual .visual-item .spec {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* === STATS BAR (Hairline only — no green left border) === */
.stats-bar {
  padding: 40px 0;              /* down from 56px */
  border-bottom: 1px solid var(--line);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* 6 stats in single row */
  gap: 0;
}
.stat-item {
  text-align: left;
  padding: 0 20px;
  border-right: 1px solid var(--line);
  min-width: 0;                            /* allow shrinking */
}
.stat-item:first-child { padding-left: 0; }
.stat-item:last-child { border-right: 0; padding-right: 0; }
.stat-item .stat-num {
  font-size: var(--fs-stat-lg);     /* responsive — fits 6 cols */
  font-weight: 700;
  color: var(--text);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 6px;
  white-space: nowrap;                      /* keep "100+ MWh" on 1 line */
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-item .stat-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

/* === CARDS === */
/* Content-card grids — ABB "tile" treatment: breathing room between cards, each
   card a self-contained hairline tile (not a dense seamless grid). Every
   .card-grid on the site holds content cards (products, solutions, projects,
   testimonials, tools, references, blog). Genuine data tables use OTHER classes
   (.highlights-row, .metrics-row, .ref-grid, .stats-grid) and keep the seamless
   hairline look — they are unaffected by this. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}
.card-grid > * { border: 1px solid var(--line); }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Each card uses border-right + border-bottom — creates seamless grid.
   Uses flex column so card-link is pushed to the bottom for uniform card heights —
   matches .solution-card and .project-card layout discipline. */
.card {
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 36px 28px;
  transition: background var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
}
.card:hover { background: var(--bg-soft); }
.card:hover h3 { color: var(--green); }
.card .card-img {
  margin: -36px -28px 20px;
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.card .card-img img { width: 100%; height: 100%; object-fit: cover; }

/* Product shots are studio cut-outs on white, not scenes: cropping one to fill
   the frame lops the top off a tall unit. Show the whole product and let the
   frame letterbox instead. Site photos above keep object-fit: cover — a photo
   letterboxed on white would read as a mistake. 4/3 because catalogue shots
   run anywhere from near-square (1.03) to wide rack units (2.16), and 16/9
   leaves a near-square product floating in side bars. */
.card .card-img.card-img-product {
  aspect-ratio: 4 / 3;
  background: #fff;
}
.card .card-img.card-img-product img {
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
}

/* === Chart frame — reusable SVG data-chart container (ABB) === */
.chart-frame {
  background: #fff;
  border: 1px solid var(--line);
  padding: 28px;
  margin-top: 24px;
  max-width: 820px;
  overflow-x: auto;
}
.chart-frame svg { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; }
.chart-frame .chart-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.chart-frame .chart-cap   { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0 0 12px; max-width: 680px; }
.chart-frame .chart-src   { font-size: 11px; line-height: 1.6; color: var(--muted); margin: 12px 0 0; max-width: 680px; }
.card .card-img .placeholder {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
}
/* Broken/missing image → same placeholder look via ::after (no emoji, ABB) */
.card .card-img.img-fallback::after {
  content: 'Site photo';
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
}

/* === SOLUTION DETAIL — structured Challenge + Architecture ===
   Lists/steps are more scannable and more AI-Search-extractable than prose. */
/* Each major block (Challenge, Architecture, Benefits, Specs, References, FAQ,
   Products) is a distinct subject. The rest of the site breathes at a 96px section
   rhythm, so the 32px (mt-4) gap here read as cramped — give them 64px. The first
   block (The Challenge) has no mt-4, so it stays flush to the hero. */
[data-leonics-solution-detail] > h2.section-title.mt-4 { margin-top: var(--sp-8); }
.sd-prose { font-size: 16px; line-height: 1.8; max-width: 760px; color: var(--text); }
.sd-lead  { font-size: 16px; line-height: 1.8; max-width: 760px; color: var(--text); margin: 0 0 18px; }
.sd-points { list-style: none; padding: 0; margin: 0; max-width: 820px; }
.sd-points li {
  display: flex; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px; line-height: 1.7;
}
/* Marker centred on the FIRST line via line-height math — no magic pixel offset */
.sd-points li .dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  background: var(--green);
  margin-top: calc((1.7em - 6px) / 2);
}
.sd-points li .txt { color: var(--text-2); }
.sd-points li .txt strong { color: var(--text); }
.sd-steps { max-width: 820px; }
.sd-step {
  display: flex; gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.sd-step-n {
  flex: 0 0 auto; min-width: 30px;
  font-size: 13px; font-weight: 700;
  color: var(--green); letter-spacing: 0.06em;
  padding-top: 3px;
}
.sd-step-body h3 { font-size: 16px; margin: 0 0 5px; color: var(--text); }
.sd-step-body p  { font-size: 14px; line-height: 1.7; color: var(--text-2); margin: 0; }
.card .card-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0;
  margin-bottom: 10px;
  color: var(--green);
  align-self: flex-start;
}
.card .card-tag.neutral { color: var(--muted); }
.card .card-tag.amber, .card .card-tag.teal { color: var(--text); }
.card h3 {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  transition: color var(--transition);
}
.card .card-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.card .card-summary {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 16px;
}
.card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  margin-top: auto;
  align-self: flex-start;
}
.card:hover .card-link { color: var(--green); border-bottom-color: var(--green); }
/* Stretched-link pattern — entire card becomes clickable while .card-link stays
   the visual anchor. The pseudo-element overlay covers the card; the NEW flag
   is lifted above so it stays visible (and not clickable through). Only cards
   that actually contain a .card-link get the pointer cursor + overlay — keeps
   non-clickable sub-cards (configs, models, subProducts) inert. */
.card:has(.card-link) { cursor: pointer; }
.card .card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card-new-flag { z-index: 2; }
.card .card-new-flag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 3px 6px;
  border-radius: var(--radius);
  text-transform: uppercase;
}

.card.featured h3 { color: var(--green); }

/* === TOOL CARDS (on tools.html) ===
   Logo shown as a banner at the top of the card (full width, ~150px tall) —
   wide enough that the Solar Insight wordmark is readable. Uses object-fit:
   contain so the logo isn't cropped, with soft background for separation.
   Both cards share the same logo (LEONICS Solar tools brand), so heights stay
   uniform — tag/name/CTA distinguish Free Tool vs Pro Service. */
.tool-card .tool-logo {
  margin: -36px -28px 24px;     /* match .card padding so banner reaches edges */
  height: 150px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px 24px;
}
.tool-card .tool-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.tool-card .tool-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;        /* push to bottom — uniform card heights */
  align-self: stretch;
}

/* === CORPORATE PROFILE TABLE (on about.html) ===
   2-column label/value layout with hairline separators — ABB-style.
   Same visual language as procurement Q&A tables on other pages. */
.corp-table {
  border-top: 1px solid var(--line);
  max-width: 960px;
}
.corp-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  border-bottom: 1px solid var(--line);
}
.corp-label {
  padding: 18px 28px 18px 0;
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0.3px;
  border-right: 1px solid var(--line);
  padding-right: 28px;
}
.corp-value {
  padding: 18px 0 18px 28px;
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.55;
}
@media (max-width: 768px) {
  .corp-row { grid-template-columns: 1fr; }
  .corp-label { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 14px 0; }
  .corp-value { padding: 14px 0; }
}

/* === REFERENCE PROJECTS GRID (on about.html) ===
   Hairline grid of 5 reference projects — credibility for AI Search
   and procurement teams. Uses same .card style as solution-card. */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.ref-card {
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 24px;
  transition: background var(--transition);
}
.ref-card:hover { background: var(--bg-soft); }
.ref-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}
.ref-card .ref-loc {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
}
.ref-card .ref-year {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ref-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.3;
  color: var(--text);
}
.ref-card p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .ref-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ref-grid { grid-template-columns: 1fr; }
}

/* === PRODUCT GROUPS (grouped sections on products.html) ===
   Each primaryGroup gets a section with H2 + intro paragraph + grid of cards.
   Improves SEO (topical authority per group) and AI Search citation accuracy. */
.products-grouped { display: flex; flex-direction: column; gap: 64px; }
.product-group { scroll-margin-top: 80px; }
.product-group-head {
  margin-bottom: 28px;
  max-width: 760px;
}
.product-group .section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.product-group-count {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 6px;
  letter-spacing: 0;
}
.product-group-intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}

/* === HIGHLIGHTS / SPEC ROW === */
.highlights-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
  margin: 16px 0 20px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.highlight-item {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px;
}
.highlight-item .ico { display: none; }
.highlight-item .label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  font-weight: 500;
}
.highlight-item .value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* === FEATURE CARDS (Why LEONICS — numbered ABB style) === */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.feature-card {
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 36px 28px;
  transition: background var(--transition);
  position: relative;
}
.feature-card:hover { background: var(--bg-soft); }
.feature-card:hover h3 { color: var(--green); }
.feature-card .feat-num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--green);
  margin-bottom: 24px;
  display: block;
  font-feature-settings: 'tnum';
}
.feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.25;
  transition: color var(--transition);
}
.feature-card p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
}
/* Hide old emoji/SVG icons in feature cards (numbered style replaces them) */
.feature-card .feat-icon { display: none; }

/* === SOLUTION CARDS === */
.solution-card {
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 36px 28px;
  transition: background var(--transition);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 240px;
}
.solution-card:hover { background: var(--bg-soft); }
.solution-card:hover h3 { color: var(--green); }
.solution-card .icon-wrap {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  margin-bottom: 8px;
}
.solution-card:hover .icon-wrap { color: var(--green); }
.solution-card .icon-wrap svg {
  width: 28px; height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.solution-card h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  transition: color var(--transition);
}
.solution-card .summary {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}
.solution-card .badge { align-self: flex-start; }
.solution-card { position: relative; cursor: pointer; }
.solution-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  margin-top: auto;
}
.solution-card .card-link::after {
  content: '→';
  transition: transform var(--transition);
}
/* Stretched-link overlay: makes the whole solution-card clickable. The arrow
   pseudo-element above relies on ::after for content — to avoid clobbering it,
   we put the click overlay on a NEW pseudo-element via the .card-link itself
   using an outer ::before. */
.solution-card .card-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.solution-card:hover .card-link { color: var(--green); }
.solution-card:hover .card-link::after { transform: translateX(4px); }

/* === PROJECT CARDS === */
.project-card {
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition: background var(--transition);
}
.project-card:hover { background: var(--bg-soft); }
.project-card:hover h3 { color: var(--green); }
.project-card .project-img {
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  font-weight: 600;
  letter-spacing: 1.5px;
  font-size: 11px;
  text-transform: uppercase;
}
.project-card .project-img img { width: 100%; height: 100%; object-fit: cover; }
.project-card .project-body { padding: 24px 28px 28px; }
.project-card .project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}
.project-card .project-meta > * { position: relative; padding-right: 12px; }
.project-card .project-meta > *::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--line);
}
.project-card .project-meta > *:last-child::after { display: none; }
.project-card h3 { font-size: 18px; margin-bottom: 12px; line-height: 1.3; transition: color var(--transition); }
.project-card .project-summary { font-size: 14px; color: var(--text-2); margin-bottom: 16px; line-height: 1.6; }
/* Highlights sit between the summary and the metric grid — prose above, hard
   numbers below, and the two or three things worth citing in between. A square
   marker rather than a disc keeps the same geometric language as the rest of
   the system; 13px places them under the 14px summary without touching the
   11px floor. */
.project-card .project-highlights {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.project-card .project-highlights li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.project-card .project-highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 5px;
  height: 5px;
  background: var(--green);
}
.project-card .metrics-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.project-card .metric {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}
.project-card .metric .m-value {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.project-card .metric .m-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
  font-weight: 500;
}

/* === TESTIMONIAL === */
.testimonial {
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 28px;
  transition: background var(--transition);
}
.testimonial:hover { background: var(--bg-soft); }
.testimonial .quote {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 20px;
  font-weight: 400;
  font-style: normal;
}
.testimonial .quote::before {
  content: '"';
  font-size: 32px;
  color: var(--green);
  margin-right: 4px;
  line-height: 1;
  vertical-align: -8px;
  font-weight: 700;
}
.testimonial .author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.testimonial .author .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
}
.testimonial .author-info .name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.testimonial .author-info .title { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ════════════════════════════════════════════
   TIMELINE — vertical line with green dot markers
   Used on about.html via [data-leonics-about-timeline]
   ════════════════════════════════════════════ */
.timeline {
  position: relative;
  padding-left: 40px;
  margin-top: 32px;
  max-width: 720px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--line);
}
.timeline-item {
  position: relative;
  padding: 0 0 28px 0;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -33px;
  top: 7px;
  width: 9px;
  height: 9px;
  background: var(--green);
  border-radius: 50%;
  outline: 3px solid var(--bg);
  z-index: 1;
}
.timeline-item .year {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-feature-settings: 'tnum';
}
.timeline-item .desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

/* On section-alt (light grey bg), adjust dot outline */
.section-alt .timeline-item::before,
main > .section:nth-of-type(even) .timeline-item::before {
  outline-color: var(--bg-soft);
}

/* === FAQ ACCORDION === */
.faq-list { margin-top: 24px; border-top: 1px solid var(--line); }
.faq-item {
  border-bottom: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  transition: background var(--transition);
}
.faq-item:hover { background: var(--bg-soft); }
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  list-style: none;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  font-size: 24px;
  color: var(--text);
  font-weight: 300;
  transition: transform var(--transition);
  flex-shrink: 0;
  width: 16px; text-align: center;
  line-height: 1;
}
.faq-item[open] .faq-question::after { transform: rotate(45deg); color: var(--green); }
.faq-item[open] .faq-question { color: var(--green); }
.faq-answer {
  padding: 0 24px 24px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.75;
}
.faq-category {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--green);
  margin-right: 12px;
}

/* === CTA BAND (full-width black, sharp) === */
.cta-band {
  background: var(--black);
  color: #fff;
  padding: 72px 0;              /* down from 96px */
  margin: 0;
}
.cta-band .container {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: 16px; max-width: 720px; }
.cta-band p { color: rgba(255, 255, 255, 0.7); font-size: 18px; line-height: 1.6; max-width: 600px; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.cta-band .btn-primary { background: var(--green); color: #fff; }
.cta-band .btn-primary:hover { background: var(--green-d); }
.cta-band .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.cta-band .btn-secondary:hover { background: #fff; color: var(--black); border-color: #fff; }

/* === FOOTER (pure black, minimal) === */
.site-footer {
  background: var(--black);
  color: rgba(255, 255, 255, 0.7);
  padding: 56px 0 24px;          /* down from 64px */
  border-top: 4px solid var(--green);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand .logo-mark { background: var(--green); color: #fff; }
.footer-brand .logo-text { color: #fff; }
.footer-brand .tagline {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.6;
  margin: 16px 0 24px;
  max-width: 360px;
}
.footer-brand .contact-info {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
}
.footer-brand .contact-info strong { color: #fff; font-weight: 500; }
.footer-col h3 {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}
.footer-col ul a:hover { color: #fff; }
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.footer-social { display: flex; gap: 8px; }
.footer-social a {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: all var(--transition);
  font-size: 11px;
  font-weight: 600;
}
.footer-social a:hover { background: var(--green); border-color: var(--green); color: #fff; }

/* === STICKY CONTACT FAB === */
.fab-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fab {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--green);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 700;
  transition: background var(--transition);
  text-decoration: none;
  border: 1px solid var(--green);
}
.fab:hover { background: var(--green-d); border-color: var(--green-d); color: #fff; }
.fab.line { background: #06C755; border-color: #06C755; }
.fab.line:hover { background: #04a946; border-color: #04a946; color: #fff; }

/* === BREADCRUMB === */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 500; }

/* === FORM === */
.form { max-width: 640px; }
.form-group { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 16px;
  color: var(--text);
  transition: border-color var(--transition);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--green);
}
/* Suppress the ring for POINTER users only. The previous blanket outline:none
   also removed it for keyboard users, leaving a 1px border-colour change as the
   only focus indicator on the contact form. Keyboard users now get the green
   border AND the 2px ring. */
.form-input:focus:not(:focus-visible),
.form-textarea:focus:not(:focus-visible),
.form-select:focus:not(:focus-visible) { outline: none; }
.form-textarea { min-height: 120px; resize: vertical; }

/* === UTILITY === */
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.text-green { color: var(--green); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.mb-5 { margin-bottom: 32px; }
.mt-2 { margin-top: 16px; }
.mt-4 { margin-top: 32px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.hidden { display: none; }

/* === RESPONSIVE === */

/* Hide nav links earlier (header was too crowded on common laptop widths) */
@media (max-width: 1180px) {
  .nav-links a { padding: 8px 8px; font-size: 13px; }
  .nav-cta .btn-secondary { display: none; }     /* hide call button at this size */
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 64px 0 48px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  /* Drop 4-col grids (products, solutions) to 2 cols on tablet */
  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid .footer-col:last-child { grid-column: span 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .cta-band .container { grid-template-columns: 1fr; gap: 24px; }
  .cta-band .cta-actions { justify-content: flex-start; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 8px 6px; font-size: 12px; }

  /* Stats: 6 cols too tight — drop to 3 cols × 2 rows */
  .stats-grid { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .stat-item { padding: 0 24px; border-right: 1px solid var(--line); }
  .stat-item:first-child { padding-left: 0; }
  .stat-item:last-child { border-right: 1px solid var(--line); padding-right: 24px; }
  .stat-item:nth-child(3n) { border-right: 0; padding-right: 0; }
  .stat-item:nth-child(3n+1) { padding-left: 0; }
  .stat-item .stat-num { font-size: var(--fs-stat-lg); }
}

@media (max-width: 900px) {
  .nav-links { display: none; }                  /* mobile nav at this breakpoint */
  .nav-toggle { display: flex; align-items: center; justify-content: center; }

  /* Mobile menu lives below the header instead of stretching the header row. */
  .nav-wrap { position: relative; }
  .nav-links.mobile-open {
    display: flex;
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 16px 32px rgba(10, 10, 10, 0.12);
    z-index: 110;
  }
  .nav-links.mobile-open > a { width: 100%; padding: 10px 12px; }
  .nav-links.mobile-open .nav-dropdown { width: 100%; }
  .nav-links.mobile-open .nav-dropdown .nav-trigger { width: 100%; justify-content: space-between; padding: 10px 12px; }
  .nav-links.mobile-open .nav-dropdown .nav-menu {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 16px;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    background: transparent;
  }
  .nav-links.mobile-open .nav-dropdown.open .nav-menu { display: block; }
  .nav-links.mobile-open .nav-dropdown:hover .nav-menu { display: none; }
  .nav-links.mobile-open .nav-dropdown.open .nav-menu { display: block; }
}

@media (max-width: 768px) {
  .container, .container-narrow { padding: 0 20px; }
  .section { padding: var(--sp-6) 0; }
  .section-lg { padding: var(--sp-8) 0; }

  .hero { padding: 48px 0 32px; }
  .hero .lead { font-size: 18px; }
  .hero-trust { gap: 0; }
  .trust-item { padding: 6px 14px 6px 0; margin-right: 14px; }

  /* Stats: drop to 2 cols × 3 rows on mobile */
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .stat-item { padding: 0 16px; border-right: 1px solid var(--line); }
  .stat-item:first-child { padding-left: 0; }
  .stat-item:nth-child(2n) { border-right: 0; padding-right: 0; }
  .stat-item:nth-child(2n+1) { padding-left: 0; }
  /* Reset overrides from the 768-1024 breakpoint */
  .stat-item:nth-child(3n) { border-right: 1px solid var(--line); padding-right: 16px; }
  .stat-item:nth-child(3n):nth-child(2n) { border-right: 0; padding-right: 0; }
  /* Scale with the column instead of a fixed 32px: at two columns on a 375px
     screen a value like "100+ MWh" needed 160px in a 155px box and the ellipsis
     ate the unit. Same failure mode as the earlier "28.8 MWp" truncation. */
  .stat-item .stat-num { font-size: clamp(20px, 7vw, 28px); }
  /* At two columns the 32px number dwarfs a 12px label (worst on long Thai
     labels that wrap to 3 lines) — pull the pair closer together. */
  .stat-item .stat-label { font-size: 13px; }

  .card-grid, .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid .footer-col:last-child { grid-column: auto; display: block; }
  .cta-band { padding: 56px 0; }
  .fab { width: 44px; height: 44px; font-size: 16px; }
}

/* === Tool "how it works" steps (homepage Solar Insight card) ==============
   Was an inline-styled 2-col grid. Grid items default to min-width:auto, so the
   longest phrase set the track width and the card — which clips with
   overflow:hidden — silently cut the last steps off on a phone. min-width:0 lets
   the tracks shrink, and below 560px the grid becomes a single column. */
.tool-steps {
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-left: 1px solid var(--line);
}
.tool-steps > * { min-width: 0; }
.tool-step { padding: 0 16px 16px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tool-step:nth-child(2) { padding: 0 0 16px 16px; border-right: 0; }
.tool-step:nth-child(3) { padding: 16px 16px 0 0; border-bottom: 0; }
.tool-step:nth-child(4) { padding: 16px 0 0 16px; border-right: 0; border-bottom: 0; }
.tool-steps .ts-num {
  font-size: var(--fs-micro);
  letter-spacing: 1.5px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.tool-steps .ts-txt {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
  line-height: var(--lh-heading);
  overflow-wrap: anywhere;
}

/* Phone widths. The header's right-hand cluster (language toggle + quote button
   + hamburger) measured 279px next to the logo, which pushed the page to 462px
   inside a 375px viewport — the whole site then scrolled sideways and text ran
   past the screen edge. The quote CTA is repeated in the hero and in the CTA
   band on every page, so the header can drop it at this size. */
@media (max-width: 560px) {
  .nav-cta .btn-primary { display: none; }
  .nav-cta { gap: 6px; }
  .lang-toggle button { padding: 4px 8px; }
  .container, .container-narrow { padding: 0 16px; }
  /* Long unbroken strings (model codes, URLs) must wrap rather than widen the page */
  h1, h2, h3, .card-summary, .project-summary, .lead { overflow-wrap: anywhere; }

  /* Two columns of steps do not fit a phone card — stack them */
  .tool-steps { grid-template-columns: 1fr; padding: 24px; }
  .tool-step,
  .tool-step:nth-child(2),
  .tool-step:nth-child(3),
  .tool-step:nth-child(4) {
    padding: 14px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .tool-step:nth-child(4) { border-bottom: 0; padding-bottom: 0; }
  .tool-step:first-child { padding-top: 0; }
}

/* ════════════════════════════════════════════
   BILINGUAL — show/hide based on <html lang>
   Default: en (English shown, Thai hidden)
   ════════════════════════════════════════════ */
html[lang="en"] [data-lang="th"],
html[lang="en"] .lang-th { display: none !important; }
html[lang="th"] [data-lang="en"],
html[lang="th"] .lang-en { display: none !important; }

/* Language toggle button group */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
}
.lang-toggle button {
  padding: 7px 12px;
  background: #fff;
  color: var(--muted);
  border-right: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  font-family: var(--font);
}
.lang-toggle button:last-child { border-right: 0; }
.lang-toggle button.active {
  background: var(--text);
  color: #fff;
}
.lang-toggle button:hover:not(.active) {
  color: var(--text);
  background: var(--bg-soft);
}

/* === PREVIEW BANNER === */
.preview-banner {
  background: var(--text);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  padding: 8px 16px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--text);
}
.preview-banner a {
  color: #fff;
  text-decoration: underline;
  margin-left: 12px;
  opacity: 0.85;
}
.preview-banner a:hover { opacity: 1; color: #fff; }