@font-face{font-family:'Kanit';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/kanit-300-latin.woff2?v=20260725f') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Kanit';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/kanit-300-thai.woff2?v=20260725f') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/kanit-400-latin.woff2?v=20260725f') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/kanit-400-thai.woff2?v=20260725f') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/kanit-500-latin.woff2?v=20260725f') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/kanit-500-thai.woff2?v=20260725f') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/kanit-600-latin.woff2?v=20260725f') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/kanit-600-thai.woff2?v=20260725f') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}@font-face{font-family:'Kanit';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/kanit-700-latin.woff2?v=20260725f') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Kanit';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/kanit-700-thai.woff2?v=20260725f') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}
/* =========================================================
   Solar Force — Design System
   Theme: Premium Eco-Tech / Modern Eco-Tech Corporate
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand colors */
  --navy: #073E7C;
  --navy-dark: #052c58;
  --blue: #1478B8;
  --blue-soft: #e6f1fa;
  --yellow: #FFD600;
  --orange: #F79400;
  --green: #63A928;
  --green-num: #2F7D25;
  --bg: #F5FAF7;
  --white: #ffffff;
  --ink: #1c2b3a;
  --muted: #5c6b7a;
  --line: #e4edf3;

  /* Gradients */
  --grad-primary: linear-gradient(90deg, #FFD600 0%, #F79400 100%);
  --grad-navy: linear-gradient(135deg, #073E7C 0%, #1478B8 100%);
  --grad-sun: radial-gradient(circle at 30% 30%, rgba(255,214,0,.35), transparent 60%);

  /* Site background image + brand-tone overlay (adjust opacities to taste) */
  --site-bg-image: url('/assets/images/site-bg.webp?v=20260725f');
  --site-bg-overlay: linear-gradient(180deg, rgba(5,26,54,.92) 0%, rgba(4,18,42,.94) 100%);

  /* Glass / overlay theme (frosted cards on the dark backdrop) */
  --glass-bg: rgba(255,255,255,.08);
  --glass-bg-strong: rgba(255,255,255,.12);
  --glass-border: rgba(255,255,255,.16);
  --glass-blur: blur(12px) saturate(120%);
  --glass-shadow: 0 10px 34px rgba(2,10,26,.34);
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255,255,255,.82);
  --on-dark-mute: rgba(255,255,255,.62);
  --accent-green: #7fd15a;
  --accent-blue: #8fd0ff;

  /* Shadows (soft blue) */
  --shadow-sm: 0 4px 14px rgba(7, 62, 124, .08);
  --shadow-md: 0 10px 30px rgba(7, 62, 124, .12);
  --shadow-lg: 0 18px 50px rgba(7, 62, 124, .16);
  --shadow-btn: 0 8px 20px rgba(247, 148, 0, .35);

  /* Radius */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --container: 1200px;
  --header-h: 92px;
}

/* ---------- Reset / Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Kanit', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-weight: 300;
  overflow-x: hidden;
}

/* Full-site background image, fixed behind all content, with brand-tone overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    var(--site-bg-overlay),
    var(--site-bg-image) center center / cover no-repeat;
  pointer-events: none;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

h1, h2, h3, h4 { color: var(--navy); font-weight: 600; line-height: 1.25; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 22px;
}

section { position: relative; }

/* ---------- Utilities ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-soft);
  color: var(--navy);
  font-weight: 500;
  font-size: .82rem;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  letter-spacing: .3px;
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
}

.section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 16px 0 12px; }
.section-head p { color: var(--muted); font-size: 1.05rem; }

.text-green { color: var(--green-num); font-weight: 600; }

.pad { padding: 84px 0; }
.pad-sm { padding: 56px 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-weight: 500;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--grad-primary);
  color: #3a2a00;
  font-weight: 600;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(247,148,0,.45); }

.btn-secondary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 20px rgba(20,120,184,.28);
}
.btn-secondary:hover { transform: translateY(-2px); background: #0f6aa5; }

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: #fff; }

.btn-ghost-white {
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  backdrop-filter: blur(6px);
}
.btn-ghost-white:hover { background: rgba(255,255,255,.24); }

.btn-lg { padding: 16px 34px; font-size: 1.08rem; }
.btn-consult { padding: 9px 18px; font-size: .88rem; gap: 7px; }
.btn-consult svg { width: 15px; height: 15px; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(7,62,124,.05);
}
.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
/* Centered nav like the reference site: logo left · menu center · CTA right */
.main-nav { flex: 1; display: flex; justify-content: center; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--grad-navy);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.brand-logo svg { width: 28px; height: 28px; }
/* Real logo image (transparent PNG) */
.brand-logo-img { height: 74px; width: auto; display: block; }
.footer-logo-img { height: 92px; }
.brand-name { line-height: 1.1; }
.brand-name strong { display: block; color: var(--navy); font-weight: 700; font-size: 1.18rem; letter-spacing: .3px; }
.brand-name span { font-size: .72rem; color: var(--green-num); font-weight: 500; letter-spacing: 1.5px; }

.main-nav ul { display: flex; align-items: center; gap: 6px; }
.main-nav a {
  display: block;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-weight: 400;
  color: var(--ink);
  font-size: .98rem;
  transition: background .2s, color .2s;
}
.main-nav a:hover { background: var(--blue-soft); color: var(--navy); }
.main-nav a.active { background: var(--navy); color: #fff; font-weight: 500; }

.header-cta { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  align-items: center; justify-content: center;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: .3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Transparent overlay header on the homepage hero --- */
body[data-page="home"] .site-header {
  position: fixed; left: 0; right: 0;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body[data-page="home"] .site-header .nav-toggle span { background: #fff; }
body[data-page="home"] .site-header.scrolled {
  background: rgba(4,18,42,.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--glass-border);
  box-shadow: 0 8px 26px rgba(2,10,26,.32);
}
body[data-page="home"] .site-header.scrolled .nav-toggle span { background: #fff; }

/* --- Inner pages: let the hero image reach the top, header overlays it --- */
body:has(.page-hero) .site-header {
  position: fixed; left: 0; right: 0;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body:has(.page-hero) .site-header .main-nav a { color: #fff; }
body:has(.page-hero) .site-header .main-nav a:hover { background: rgba(255,255,255,.16); color: #fff; }
body:has(.page-hero) .site-header .main-nav a.active { background: rgba(255,255,255,.20); color: #fff; }
body:has(.page-hero) .site-header .nav-toggle { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
body:has(.page-hero) .site-header .nav-toggle span { background: #fff; }
/* Scrolled -> dark frosted glass (matches the theme) */
body:has(.page-hero) .site-header.scrolled {
  background: rgba(4,18,42,.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--glass-border);
  box-shadow: 0 8px 26px rgba(2,10,26,.32);
}
/* push hero content below the now-overlapping fixed header */
body:has(.page-hero) .page-hero { padding-top: 132px; }
@media (min-width: 821px) {
  body[data-page="home"] .site-header .main-nav a { color: #fff; }
  body[data-page="home"] .site-header .main-nav a:hover { background: rgba(255,255,255,.16); color: #fff; }
  body[data-page="home"] .site-header .main-nav a.active { background: rgba(255,255,255,.18); color: #fff; }
  body[data-page="home"] .site-header.scrolled .main-nav a { color: #fff; }
  body[data-page="home"] .site-header.scrolled .main-nav a:hover { background: rgba(255,255,255,.16); color: #fff; }
  body[data-page="home"] .site-header.scrolled .main-nav a.active { background: rgba(255,255,255,.20); color: #fff; }
}

/* =========================================================
   HERO / BANNER
   ========================================================= */
.hero {
  position: relative;
  padding: 70px 0 130px;
  background:
    var(--grad-sun),
    linear-gradient(180deg, #f5faf7 0%, #eaf3fb 100%);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(255,214,0,.22), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 50px;
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  font-weight: 700;
  margin: 20px 0 18px;
}
.hero-copy h1 .hl {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-copy p.lead { font-size: 1.15rem; color: var(--muted); margin-bottom: 30px; max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 26px; }
.hero-badge { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--ink); }
.hero-badge .ic {
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(99,169,40,.14);
  color: var(--green); display: grid; place-items: center;
}
.hero-badge .ic svg { width: 20px; height: 20px; }

.hero-visual { position: relative; }
.hero-visual .art {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  background: #fff;
}
.hero-float {
  position: absolute;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
}
.hero-float .fnum { font-size: 1.35rem; font-weight: 700; color: var(--green-num); line-height: 1; }
.hero-float .ftxt { font-size: .78rem; color: var(--muted); }
.hero-float.f1 { left: -24px; top: 40px; }
.hero-float.f2 { right: -18px; bottom: 46px; }
.hero-float .fic {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--grad-primary); display: grid; place-items: center;
}
.hero-float .fic svg { width: 22px; height: 22px; }

/* ---------- HERO: full-width cover banner (RMA-style) ---------- */
.hero-cover {
  padding: 0; background: linear-gradient(118deg, #061a33 0%, #0a3563 48%, #05162e 100%);
  /* ^ dark base matching the overlay: .hero's light gradient would otherwise
     flash through in the moment before the poster image paints */
  /* 16:9 box matched to the video so it shows full-frame (no zoom/crop),
     with a floor so text always fits and a cap at the viewport height.
     min-height, not height: on short laptop screens the headline needs one
     line more than the 16:9 box allows, and overflow:hidden would clip it */
  min-height: clamp(600px, 56.25vw, 100vh);
  display: grid;
  align-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero-cover::after { display: none; }
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  animation: heroKenBurns 22s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.15) translate(-1.6%, -1.2%); }
}
/* Still frame that paints immediately (the LCP element). The video, once it
   has buffered, fades in on top of it. */
.hero-poster,
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;   /* hero box is 16:9 -> fills exactly, no crop */
  pointer-events: none;
  filter: contrast(1.1) saturate(1.16) brightness(1.03);  /* crisper, punchier look */
}
/* Both sit at z-index 0; DOM order puts the video over the poster, and the
   overlay + copy that follow in the markup stay above them. */
.hero-poster { z-index: 0; }
.hero-video {
  z-index: 0;
  opacity: 0;
  transition: opacity .6s ease;
  transform: translateZ(0);                  /* GPU layer -> smoother */
}
.hero-video.ready { opacity: 1; }
/* faint overlay on the hero video: darker at top (behind the menu) & bottom, clear in the middle */
.hero-cover .hero-overlay {
  display: block;
  background:
    linear-gradient(180deg,
      rgba(4,16,38,.58) 0%,
      rgba(4,16,38,.14) 20%,
      transparent 44%,
      rgba(4,16,38,.16) 74%,
      rgba(4,16,38,.52) 100%);
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 16% 10%, rgba(255,176,54,.28) 0%, transparent 46%),   /* warm sunset glow */
    radial-gradient(120% 90% at 50% 122%, rgba(20,120,184,.34) 0%, transparent 60%),  /* blue glow bottom */
    radial-gradient(140% 120% at 50% 45%, transparent 52%, rgba(3,16,38,.62) 100%),    /* vignette */
    linear-gradient(118deg, rgba(4,22,50,.86) 0%, rgba(7,62,124,.52) 48%, rgba(4,20,46,.82) 100%);
}
/* faint tech / solar-cell grid that fades out */
.hero-overlay::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(115% 80% at 50% 28%, #000 0%, transparent 74%);
  mask-image: radial-gradient(115% 80% at 50% 28%, #000 0%, transparent 74%);
  opacity: .55;
}
/* soft pulsing sun glow */
.hero-overlay::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 44% at 17% 13%, rgba(255,196,74,.30) 0%, transparent 70%);
  animation: heroGlow 7s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  from { opacity: .5;  transform: scale(1); }
  to   { opacity: .95; transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-overlay::after { animation: none; }
  .hero-bg { animation: none; transform: scale(1.04); }
}
.hero-cover-inner {
  position: relative;
  z-index: 2;
  max-width: 940px;
  padding-top: 96px;
  padding-bottom: 150px;   /* room for the calculator bar to overlap */
  margin: 0 auto;
  text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
}
.eyebrow-light {
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(4px);
}
.eyebrow-light::before { background: var(--yellow); }
.hero-cover h1 {
  color: #fff;
  font-size: clamp(2.6rem, 6.2vw, 4.9rem);
  font-weight: 700;
  margin: 24px auto 20px;
  line-height: 1.12;
  letter-spacing: -0.5px;
  text-shadow: 0 4px 30px rgba(0,0,0,.38);
}
.hero-cover h1 .hl {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--yellow);
  color: var(--yellow);
  padding: 0 4px;
  text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5);
}
/* Brand name sits inside the H1 (search reads it as part of the heading) but
   renders as a kicker line, so the headline itself keeps its original wrap */
.hero-cover h1 .h1-brand {
  display: block;
  font-size: .3em;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--yellow);
  margin-bottom: 6px;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.hero-cover .lead {
  color: rgba(255,255,255,.92);
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  max-width: 720px;
  margin: 0 auto 26px;
}
.hero-bullets {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 28px; margin: 0 auto 32px; max-width: 760px;
}
.hero-bullets li {
  position: relative; padding-left: 26px;
  font-size: .98rem; color: #fff; font-weight: 400;
}
.hero-bullets li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.hero-cover .hero-actions { justify-content: center; margin-bottom: 0; }

@media (max-width: 560px) {
  .hero-cover { height: auto; min-height: auto; }
  .hero-cover-inner { padding-top: 60px; padding-bottom: 120px; }
  .hero-cover h1 { font-size: 2rem; line-height: 1.2; }
  .hero-cover h1 .h1-brand { font-size: .58em; letter-spacing: 3px; margin-bottom: 4px; }
  .hero-cover .lead { font-size: .92rem; }
  .hero-bullets { gap: 8px 18px; }
  .hero-bullets li { font-size: .85rem; padding-left: 22px; }
  .hero-bullets li::before { width: 15px; height: 15px; }
  .hero-cover .hero-actions .btn { width: 100%; }
}

/* =========================================================
   CALCULATOR BAR
   ========================================================= */
.calc-wrap { margin-top: -70px; position: relative; z-index: 5; }
.calc-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  overflow: hidden;
}
.calc-head {
  background: var(--grad-navy);
  color: #fff;
  padding: 22px 30px;
  display: flex; align-items: center; gap: 14px;
}
.calc-head svg { width: 30px; height: 30px; }
.calc-head h2 { color: #fff; font-size: 1.3rem; margin-bottom: 2px; }
.calc-head p { font-size: .9rem; opacity: .85; }

.calc-body { padding: 30px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 34px; }
.calc-inputs { display: grid; gap: 20px; }
.field label, .field .field-label { display: block; font-size: .92rem; font-weight: 500; color: var(--navy); margin-bottom: 8px; }
.field label span { color: var(--green-num); font-weight: 600; float: right; }
.field input[type="range"] {
  width: 100%; height: 7px; border-radius: 6px; -webkit-appearance: none;
  background: linear-gradient(90deg, var(--orange) 0%, var(--line) 0%);
  outline: none; cursor: pointer;
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-primary); border: 3px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer;
}
.field input[type="number"] {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); font-family: inherit; font-size: 1rem; color: var(--ink);
}
.field input[type="number"]:focus { outline: none; border-color: var(--blue); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-dropdown { display: none; }  /* shown only on mobile */
.chip {
  padding: 8px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: #fff; font-family: inherit; font-size: .9rem; cursor: pointer; color: var(--muted);
  transition: .2s;
}
.chip.active, .chip:hover { border-color: var(--blue); background: var(--blue-soft); color: var(--navy); }

/* Mobile only: chips -> dropdown (down arrow, tap to pick from a list).
   Placed AFTER the base .chip-row/.chip-dropdown rules so it wins on mobile. */
@media (max-width: 560px) {
  .chip-row { display: none; }
  .chip-dropdown { display: block; position: relative; }
  .chip-toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; border-radius: var(--r-pill);
    border: 1.5px solid var(--blue); background: var(--blue-soft); color: var(--navy);
    font-family: inherit; font-size: .95rem; font-weight: 500; cursor: pointer;
  }
  .chip-current { text-align: left; }
  .chip-caret { width: 20px; height: 20px; flex: 0 0 auto; transition: transform .25s ease; }
  .chip-dropdown.open .chip-caret { transform: rotate(180deg); }
  .chip-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
    display: none; flex-direction: column; gap: 2px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: 0 14px 34px rgba(2, 10, 26, .2); padding: 6px;
  }
  .chip-dropdown.open .chip-menu { display: flex; }
  .chip-option {
    text-align: left; padding: 11px 14px; border: 0; border-radius: 10px;
    background: transparent; font-family: inherit; font-size: .92rem;
    color: var(--navy); cursor: pointer; transition: background .15s ease;
  }
  .chip-option:hover, .chip-option.is-active {
    background: var(--blue-soft); font-weight: 500;
  }
}

.calc-result {
  background: linear-gradient(180deg, #f0f8f0 0%, #eaf3fb 100%);
  border-radius: var(--r-md);
  padding: 26px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.calc-result .rrow { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px dashed #cddbe6; }
.calc-result .rrow:last-of-type { border: none; padding: 0; }
.calc-result .rlabel { font-size: .92rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.calc-result .rval { font-size: 1.55rem; font-weight: 700; color: var(--green-num); }
.calc-result .rval.blue { color: var(--navy); }
.calc-result .rval small { font-size: .85rem; font-weight: 400; color: var(--muted); }
.calc-note { font-size: .78rem; color: var(--muted); text-align: center; margin-top: 6px; }

/* =========================================================
   STATS
   ========================================================= */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.stat-card {
  background: #fff; border-radius: var(--r-md); padding: 30px 24px;
  text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--line);
}
.stat-card .snum { font-size: 2.4rem; font-weight: 700; color: var(--navy); line-height: 1; }
.stat-card.green .snum { color: var(--green-num); }
.stat-card .slabel { color: var(--muted); font-size: .95rem; margin-top: 8px; }

/* =========================================================
   SERVICE CARDS
   ========================================================= */
.carousel { position: relative; }
.carousel-btn { display: none; }  /* shown only on mobile */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.service-card {
  background: #fff; border-radius: var(--r-lg); padding: 34px 28px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  transition: transform .25s, box-shadow .25s; position: relative; overflow: hidden;
  display: flex; flex-direction: column;   /* so the link can pin to the bottom */
}
.service-card::before {
  content: ""; position: absolute; top: -50px; right: -50px;
  width: 150px; height: 150px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.20), transparent 68%);
  border-radius: 50%;
  opacity: 0; transition: opacity .3s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-card:hover::before { opacity: 1; }
.service-card .sc-ic {
  width: 62px; height: 62px; border-radius: 16px;
  background: var(--grad-navy); display: grid; place-items: center; margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.service-card .sc-ic svg { width: 32px; height: 32px; }
.service-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.service-card p { color: var(--muted); font-size: .98rem; margin-bottom: 16px; }
.service-card .sc-link { color: var(--blue); font-weight: 500; font-size: .95rem; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; align-self: flex-start; }
.service-card .sc-link svg { width: 16px; height: 16px; transition: transform .2s; }
.service-card:hover .sc-link svg { transform: translateX(4px); }

/* =========================================================
   TRUST / PARTNERS
   ========================================================= */
.trust {
  position: relative;
  background-image:
    linear-gradient(rgba(4,20,46,.80), rgba(5,32,66,.88)),
    url('/assets/images/trust-bg.webp?v=20260725f');
  background-size: cover;
  background-position: center;
  color: #fff;
}
/* Services page: drop the house background image, blend with the site backdrop */
body[data-page="services"] .trust { background-image: none; }
.trust .eyebrow { background: rgba(255,255,255,.14); color: #fff; }
.trust .section-head h2 { color: #fff; }
.trust .section-head p { color: rgba(255,255,255,.82); }
.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.trust-item { text-align: center; padding: 26px 18px; }
.trust-item .ti-ic {
  width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--blue-soft); display: grid; place-items: center;
}
.trust-item .ti-ic svg { width: 32px; height: 32px; color: var(--navy); }
.trust-item h3 { font-size: 1.08rem; margin-bottom: 6px; }
.trust-item p { color: var(--muted); font-size: .9rem; }
/* trust section on dark background image */
.trust .trust-item .ti-ic { background: rgba(255,255,255,.14); }
.trust .trust-item .ti-ic svg { color: #fff; }
.trust .trust-item h3 { color: #fff; }
.trust .trust-item p { color: rgba(255,255,255,.78); }
.trust .partners .plabel { color: rgba(255,255,255,.72); }

.partners { margin-top: 46px; }
.partners .plabel { text-align: center; color: var(--muted); font-size: .88rem; letter-spacing: 1px; margin-bottom: 22px; text-transform: uppercase; }
.marquee {
  position: relative; overflow: hidden; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee-scroll 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; gap: 34px; padding-right: 34px; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.plogo {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font-weight: 700; font-size: 1.05rem; letter-spacing: .5px; color: #5a6b78;
  padding: 18px 32px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: color .2s ease, box-shadow .2s ease;
}
.plogo:hover { color: var(--navy); box-shadow: 0 8px 20px rgba(4,20,46,.1); }
.plogo img { height: 54px; width: auto; max-width: 210px; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* =========================================================
   BEFORE / AFTER
   ========================================================= */
.ba-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 30px; }
.ba-card { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.ba-slider { position: relative; aspect-ratio: 16/10; overflow: hidden; user-select: none; }
.ba-slider .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-slider .ba-after { clip-path: inset(0 0 0 50%); }
.ba-tag { position: absolute; top: 14px; padding: 5px 14px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 600; color: #fff; z-index: 4; }
.ba-tag.before { left: 14px; background: rgba(28,43,58,.75); }
.ba-tag.after { right: 14px; background: var(--green); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; z-index: 5; transform: translateX(-50%); }
.ba-handle::after {
  content: "⇆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--navy);
  display: grid; place-items: center; box-shadow: var(--shadow-md); font-size: 1.1rem; font-weight: 700;
}
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 6; }
.ba-info { padding: 20px 24px; }
.ba-info h4 { margin-bottom: 4px; }
.ba-info p { color: var(--muted); font-size: .9rem; }
.ba-info .ba-save { color: var(--green-num); font-weight: 600; font-size: .92rem; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }

/* =========================================================
   PORTFOLIO GALLERY (real installation photos)
   ========================================================= */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gallery-item {
  position: relative; margin: 0; aspect-ratio: 4/3; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); background: var(--blue-soft);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; display: block; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 18px 15px; color: #fff; font-size: .96rem; font-weight: 500;
  background: linear-gradient(transparent, rgba(4,20,46,.55) 40%, rgba(4,20,46,.9) 100%);
}
.gallery-item .g-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--grad-primary); color: #3a2a00; font-weight: 600; font-size: .74rem;
  padding: 5px 12px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}
.gallery-item img { cursor: zoom-in; }

@media (max-width: 980px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* Mobile only: 2 rows, centered "main" card, slide with arrows/drag.
   Position is driven by JS transform: translateX() — NO native scroll,
   so it can never rubber-band / snap back ("ฟึบ"). */
@media (max-width: 560px) {
  .gallery-carousel { overflow: hidden; }   /* clip the track */
  .gallery-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: auto auto;
    grid-auto-columns: 92%;
    align-items: start;
    gap: 10px;
    padding-inline: 4%;          /* (100 - 92) / 2 so a column sits centred */
    padding-bottom: 6px;
    touch-action: pan-y;         /* vertical = scroll page; horizontal = our drag */
    will-change: transform;
  }
  .gallery-item {
    aspect-ratio: 4 / 3;
    opacity: .5;
    transition: opacity .35s ease, box-shadow .35s ease;
  }
  /* guarantee the image fills the card (no top gap / vanishing row) */
  .gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .gallery-item.is-active {          /* the centered "main" card */
    opacity: 1;
    box-shadow: var(--shadow-lg);
  }

  .gallery-carousel .carousel-btn {
    display: grid; place-items: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5; width: 42px; height: 42px; border-radius: 50%;
    background: var(--navy); color: #fff; border: none; cursor: pointer;
    box-shadow: 0 6px 18px rgba(2, 10, 26, .28);
    transition: background .25s ease, opacity .25s ease;
  }
  .gallery-carousel .carousel-btn:disabled { opacity: .3; cursor: default; }
  .gallery-carousel .carousel-prev { left: 2px; }
  .gallery-carousel .carousel-prev svg { transform: rotate(180deg); }
  .gallery-carousel .carousel-next { right: 2px; }
  .gallery-carousel .carousel-btn svg { width: 20px; height: 20px; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: center; justify-content: center; padding: 30px;
  background: rgba(4,16,38,.93); backdrop-filter: blur(5px);
}
.lightbox.open { display: flex; animation: lbFade .2s ease; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lb-img {
  max-width: 92vw; max-height: 82vh; object-fit: contain;
  border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.lb-caption {
  position: absolute; bottom: 22px; left: 0; right: 0; text-align: center;
  color: #fff; font-size: 1rem; font-weight: 400; padding: 0 24px; text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.lb-close, .lb-nav {
  position: absolute; border: none; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.15); backdrop-filter: blur(4px);
  border-radius: 50%; display: grid; place-items: center; line-height: 1; transition: background .2s, transform .2s;
}
.lb-close { top: 18px; right: 22px; width: 46px; height: 46px; font-size: 1.8rem; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2rem; }
.lb-close:hover { background: rgba(255,255,255,.3); }
.lb-nav:hover { background: var(--grad-primary); color: #3a2a00; }
.lb-prev { left: 18px; } .lb-next { right: 18px; }
.lb-count { position: absolute; top: 24px; left: 24px; color: rgba(255,255,255,.85); font-size: .95rem; }
@media (max-width: 560px) {
  .lb-nav { width: 42px; height: 42px; font-size: 1.5rem; }
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
}

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.review-card {
  background: #fff; border-radius: var(--r-lg); padding: 30px 28px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px;
}
.review-stars { color: var(--yellow); font-size: 1.1rem; letter-spacing: 2px; }
.review-card p.quote { color: var(--ink); font-weight: 300; font-size: 1rem; flex: 1; }
.review-user { display: flex; align-items: center; gap: 12px; }
.review-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--grad-navy); color: #fff; display: grid; place-items: center; font-weight: 600; overflow: hidden; flex-shrink: 0; }
.review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-user strong { display: block; font-weight: 500; color: var(--navy); font-size: .98rem; }
.review-user span { font-size: .82rem; color: var(--muted); }

/* =========================================================
   CTA STRIP
   ========================================================= */
.cta-strip { background: var(--grad-navy); border-radius: var(--r-lg); padding: 54px 44px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.cta-strip > * { position: relative; z-index: 2; }
.cta-strip h2 { color: #fff; font-size: clamp(1.6rem,3vw,2.3rem); margin-bottom: 12px; }
.cta-strip p { color: rgba(255,255,255,.88); max-width: 560px; margin: 0 auto 26px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* =========================================================
   PRODUCTS (สินค้าขาย)
   ========================================================= */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-card {
  margin: 0; background: transparent; border: 0;
  border-radius: var(--r-lg); box-shadow: none; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .25s ease;
}
.product-card:hover { transform: translateY(-4px); }
.product-card img {
  width: 100%; height: auto; display: block; cursor: zoom-in;
  border-radius: var(--r-lg);
  background: var(--blue-soft);
}
.product-card .btn-line { margin: 14px 0 0; }
.btn-line {
  background: #06C755; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-line:hover { background: #05b34c; color: #fff; }

@media (max-width: 980px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }

/* Mobile only: single row, moved with the arrows only — pan-y lets the page
   still scroll vertically from here, but kills the sideways finger swipe
   (which used to run past the last card and drag the whole page with it).
   The arrows scroll it programmatically, which touch-action does not block. */
@media (max-width: 560px) {
  .product-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto; overflow-y: hidden; touch-action: pan-y; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .product-grid::-webkit-scrollbar { display: none; }
  .product-card { flex: 0 0 80%; scroll-snap-align: start; }

  .products-carousel .carousel-btn {
    display: grid; place-items: center;
    position: absolute; top: 42%; transform: translateY(-50%);
    z-index: 5; width: 42px; height: 42px; border-radius: 50%;
    background: var(--navy); color: #fff; border: none; cursor: pointer;
    box-shadow: 0 6px 18px rgba(2, 10, 26, .28);
    transition: background .25s ease, opacity .25s ease;
  }
  .products-carousel .carousel-btn:disabled { opacity: .3; cursor: default; }
  .products-carousel .carousel-prev { left: 2px; }
  .products-carousel .carousel-prev svg { transform: rotate(180deg); }
  .products-carousel .carousel-next { right: 2px; }
  .products-carousel .carousel-btn svg { width: 20px; height: 20px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--navy); color: rgba(255,255,255,.82); padding: 60px 0 0; margin-top: 30px; }
.footer-grid { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0; padding-bottom: 40px; }
.footer-brand { max-width: 560px; }
.footer-brand .brand { justify-content: center; }
.footer-social { justify-content: center; }
.footer-brand .brand-name strong { color: #fff; }
.footer-brand .brand-name span { color: var(--yellow); }
.footer-brand p { margin: 18px 0; font-size: .95rem; line-height: 1.7; opacity: .8; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.1); display: grid; place-items: center; transition: .2s; }
.footer-social a:hover { background: var(--grad-primary); }
.footer-social a svg { width: 20px; height: 20px; color: #fff; }
.footer-col h4 { color: #fff; font-size: 1.05rem; margin-bottom: 18px; }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a, .footer-col li { font-size: .95rem; opacity: .82; transition: .2s; }
.footer-col a:hover { opacity: 1; color: var(--yellow); }
.footer-contact li { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; }
.footer-contact svg { width: 19px; height: 19px; color: var(--yellow); flex-shrink: 0; margin-top: 3px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; text-align: center; font-size: .88rem; opacity: .7; }

/* =========================================================
   PAGE HEADER (inner pages)
   ========================================================= */
.page-hero {
  position: relative; overflow: hidden;
  padding: 88px 0 96px;
  text-align: center;
  background: #073E7C url('/assets/images/hero-banner.webp?v=20260725f') center / cover no-repeat;
}
/* dark overlay to match the home cover banner */
.page-hero::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(90% 80% at 18% 12%, rgba(255,176,54,.20) 0%, transparent 48%),
    radial-gradient(120% 100% at 50% 120%, rgba(20,120,184,.30) 0%, transparent 60%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(3,16,38,.55) 100%),
    linear-gradient(118deg, rgba(4,22,50,.86) 0%, rgba(7,62,124,.60) 50%, rgba(4,20,46,.84) 100%);
}
/* Services / review / contact heroes share the same banner image */
body[data-page="services"] .page-hero,
body[data-page="review"] .page-hero,
body[data-page="contact"] .page-hero { background-image: url('/assets/images/services-hero.webp?v=20260725f'); background-position: center 20%; }
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 { text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.page-hero h1 { color: #fff; font-size: clamp(2rem,4vw,3rem); margin-bottom: 12px; }
.page-hero p { color: rgba(255,255,255,.88); max-width: 640px; margin: 0 auto; font-size: 1.08rem; }
.breadcrumb { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; font-size: .9rem; }
.breadcrumb a, .breadcrumb span { color: rgba(255,255,255,.75); }
.breadcrumb a:hover { color: #fff; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.contact-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 900px; margin: 0 auto; width: 100%; }
.contact-item {
  background: #fff; border-radius: var(--r-md); padding: 22px 24px; display: flex; gap: 16px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line); align-items: center;
}
.contact-item .ci-ic { width: 44px; display: grid; place-items: center; flex-shrink: 0; }
.contact-item .ci-ic svg { width: 34px; height: 34px; color: var(--navy); }
.contact-item.line .ci-ic svg { color: #06C755; }
.contact-item h3 { margin-bottom: 3px; font-size: 1.05rem; }
.contact-item a, .contact-item p { color: var(--muted); font-size: .98rem; }
.contact-item a:hover { color: var(--blue); }
/* whole-card is clickable (phone / LINE) */
a.contact-item { text-decoration: none; color: inherit; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
a.contact-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
a.contact-item:active { transform: translateY(-1px); }

.contact-form {
  background: #fff; border-radius: var(--r-lg); padding: 36px; box-shadow: var(--shadow-md); border: 1px solid var(--line);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 500; color: var(--navy); margin-bottom: 8px; font-size: .95rem; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-family: inherit; font-size: 1rem; color: var(--ink); background: #fff; transition: border .2s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20,120,184,.12); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: .85rem; color: var(--muted); margin-top: 8px; }
.form-success { background: rgba(99,169,40,.12); color: var(--green-num); padding: 14px 18px; border-radius: var(--r-sm); font-size: .95rem; margin-top: 16px; display: none; align-items: center; gap: 10px; }
.form-success.show { display: flex; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-list { max-width: 800px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item { background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-q { padding: 20px 24px; font-weight: 500; color: var(--navy); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq-q .faq-ic { position: relative; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-soft); color: var(--navy); font-size: 0; transition: .3s; }
/* crisp, perfectly centered "+" drawn from two bars (rotates to × when open) */
.faq-q .faq-ic::before,
.faq-q .faq-ic::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 2px; }
.faq-q .faq-ic::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.faq-q .faq-ic::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.faq-item.open .faq-ic { transform: rotate(45deg); background: var(--navy); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s; padding: 0 24px; color: var(--muted); }
.faq-item.open .faq-a { max-height: 300px; padding: 0 24px 22px; }

/* =========================================================
   PROCESS STEPS
   ========================================================= */
.steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; }
.step-card {
  position: relative;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 44px 26px 30px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.step-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.step-num {
  width: 84px; height: 88px;
  margin: 0 auto 16px;
  background: url('/assets/images/bulb.svg?v=20260725f') center top / contain no-repeat;
  color: #fff;
  font-weight: 700; font-size: 2.15rem;
  text-shadow: 0 1px 3px rgba(120,72,0,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 8px;
  filter:
    drop-shadow(0 0 3px rgba(255,238,120,.7))
    drop-shadow(0 0 9px rgba(255,214,0,.5))
    drop-shadow(0 0 19px rgba(255,190,0,.38))
    drop-shadow(0 4px 14px rgba(247,148,0,.28));
  transition: transform .3s ease, filter .3s ease;
}
.step-card:hover .step-num {
  filter:
    drop-shadow(0 0 5px rgba(255,245,160,.9))
    drop-shadow(0 0 14px rgba(255,214,0,.7))
    drop-shadow(0 0 30px rgba(255,190,0,.5))
    drop-shadow(0 6px 20px rgba(247,148,0,.4));
}
.step-card h3 { margin-bottom: 10px; color: var(--navy); font-size: 1rem; }
.step-card p { color: var(--muted); font-size: .92rem; }

/* Mobile only: process steps -> centered "main" card, slide with arrows */
@media (max-width: 560px) {
  .steps-grid.is-carousel {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 16px 11%;
    scroll-padding-inline: 11%;
  }
  .steps-grid.is-carousel::-webkit-scrollbar { display: none; }
  .steps-grid.is-carousel .step-card {
    flex: 0 0 78%;
    scroll-snap-align: center;
    opacity: .5;
    transform: scale(.9);
    transition: opacity .4s ease, transform .4s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .steps-grid.is-carousel .step-card.is-active {        /* the "main" card */
    opacity: 1;
    transform: scale(1);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
  }

  .steps-carousel .carousel-btn {
    display: grid; place-items: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5; width: 42px; height: 42px; border-radius: 50%;
    background: var(--navy); color: #fff; border: none; cursor: pointer;
    box-shadow: 0 6px 18px rgba(2, 10, 26, .28);
    transition: background .25s ease, opacity .25s ease;
  }
  .steps-carousel .carousel-btn:disabled { opacity: .3; cursor: default; }
  .steps-carousel .carousel-prev { left: 2px; }
  .steps-carousel .carousel-prev svg { transform: rotate(180deg); }
  .steps-carousel .carousel-next { right: 2px; }
  .steps-carousel .carousel-btn svg { width: 20px; height: 20px; }
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 520px; margin: 0 auto; }
  .calc-body { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .cards-grid, .reviews-grid { grid-template-columns: repeat(2,1fr); }
  .trust-grid { grid-template-columns: repeat(2,1fr); }
  .steps-grid { grid-template-columns: repeat(2,1fr); }
  .ba-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* iPad / tablet: service cards stay a single row of 3 columns
   (overrides the 2-column rule above for this width range) */
@media (min-width: 768px) and (max-width: 980px) {
  .cards-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

body.nav-open { overflow: hidden; }

/* Fading dark backdrop behind the mobile drawer */
.navbar-menu-backdrop {
  position: fixed; inset: 0; z-index: 999; /* below the header/drawer, above the page */
  background: rgba(3,12,28,.55);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.navbar-menu-backdrop.open { opacity: 1; visibility: visible; }
/* blur the header logo along with the page when the drawer is open */
.site-header .brand { transition: filter .35s ease, opacity .35s ease; }
body.nav-open .site-header .brand { filter: blur(7px); opacity: .55; }

/* In-panel header (logo + close) — mobile drawer only */
.nav-panel-head { display: none; }

@media (min-width: 821px) { .navbar-menu-backdrop { display: none; } }

@media (max-width: 820px) {
  .nav-toggle { display: flex; }

  /* backdrop-filter on the header makes it the containing block for the
     fixed drawer, collapsing the drawer to header height. Drop it on
     mobile/tablet so the drawer can span the full viewport. */
  .site-header,
  body[data-page="home"] .site-header,
  body[data-page="home"] .site-header.scrolled,
  body:has(.page-hero) .site-header,
  body:has(.page-hero) .site-header.scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Side drawer sliding in from the right — clean solid brand navy */
  .main-nav {
    display: block;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(340px, 86vw);
    padding: 0;
    background: linear-gradient(165deg, #0c3d72 0%, #072648 60%, #051b38 100%);
    border-left: 1px solid rgba(255,255,255,.12);
    box-shadow: -18px 0 50px rgba(0,0,0,.4);
    transform: translateX(105%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    overflow-y: auto; z-index: 1001;
  }
  .main-nav.open { transform: none; }

  /* header row inside the drawer */
  .nav-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-h);
    padding: 0 18px;
    border-bottom: 1px solid var(--glass-border);
  }
  .nav-panel-logo img { height: 56px; width: auto; display: block; }
  .nav-close {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(255,255,255,.12);
    border: 1px solid var(--glass-border);
    display: grid; place-items: center; cursor: pointer;
    transition: background .2s;
  }
  .nav-close:hover { background: rgba(255,255,255,.20); }
  .nav-close svg { width: 22px; height: 22px; stroke: #fff; }

  .main-nav ul { flex-direction: column; align-items: stretch; gap: 6px; padding: 22px 18px; }
  /* white text on the dark drawer — beats the per-page overlay colours */
  .site-header .main-nav a { padding: 15px 18px; font-size: 1.08rem; color: #fff; }
  .site-header .main-nav a { border-radius: 10px; transition: background .2s, box-shadow .2s; }
  .site-header .main-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
  .site-header .main-nav a.active {
    background: rgba(127,209,90,.14);
    color: #fff; font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent-green);
  }
  /* toggle: translucent glass with white bars on every page/state */
  .site-header .nav-toggle { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.30); }
  .site-header .nav-toggle span { background: #fff; }
}

@media (max-width: 560px) {
  .pad { padding: 60px 0; }
  .reviews-grid, .contact-info { grid-template-columns: 1fr; }
  /* services: single horizontal scrolling row on mobile (steps use their own carousel) */
  .cards-grid {
    display: flex; grid-template-columns: none;
    overflow-x: auto; gap: 14px;
    overflow-y: hidden;              /* lock vertical: card frame can't hide upward */
    touch-action: pan-x;             /* swipe left/right only, never up/down */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .cards-grid::-webkit-scrollbar { display: none; }
  /* services: center the active card, navigate with buttons */
  .cards-grid { padding-inline: 10%; gap: 12px; }
  .cards-grid .service-card { flex: 0 0 80%; scroll-snap-align: center; }
  .carousel-btn {
    display: grid; place-items: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5; width: 42px; height: 42px; border-radius: 50%;
    background: var(--navy); color: #fff; border: none; cursor: pointer;
    box-shadow: 0 6px 18px rgba(2,10,26,.28);
  }
  .carousel-prev { left: 2px; }
  .carousel-prev svg { transform: rotate(180deg); }
  .carousel-next { right: 2px; }
  .carousel-btn svg { width: 20px; height: 20px; }
  .carousel-btn:disabled { opacity: .3; cursor: default; }
  /* trust: 2 columns on mobile */
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* stats: 2 columns on mobile */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .stat-card { padding: 22px 14px; }
  .stat-card .snum { font-size: 1.8rem; }
  .stat-card .slabel { font-size: .82rem; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-float { display: none; }
  .cta-strip { padding: 40px 24px; }
  .calc-head, .calc-body, .contact-form { padding: 22px; }
  .hero:not(.hero-cover) { padding: 40px 0 110px; }
  .btn-consult { display: none; } /* keep header clean next to hamburger on small phones */
}

/* =========================================================
   GLASS / OVERLAY THEME  (site-wide frosted look)
   Every content section reads as a full-bleed band over the
   dark backdrop; cards become frosted glass with light text.
   Remove this whole block to revert to the light theme.
   ========================================================= */

/* Section titles + intro text now sit on the dark overlay */
.section-head h2 { color: var(--on-dark); }
.section-head p  { color: var(--on-dark-soft); }

/* Shared frosted-glass surface */
.stat-card,
.service-card,
.review-card,
.faq-item,
.contact-item,
.step-card,
.calc-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

/* Stats */
.stat-card .sic {
  margin: 0 auto 12px;
  display: grid; place-items: center;
}
.stat-card .sic svg { width: 32px; height: 32px; color: var(--accent-blue); }
.stat-card.green .sic svg { color: var(--accent-green); }
.stat-card .snum,
.stat-card.green .snum { color: var(--on-dark); }
.stat-card.green .snum { color: var(--accent-green); }
.stat-card .slabel { color: var(--on-dark-soft); }

/* Service cards */
.service-card h3 { color: var(--on-dark); }
.service-card p  { color: var(--on-dark-soft); }
.service-card .sc-link { color: var(--accent-blue); }
.service-card .sc-ic {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

/* Reviews */
.review-card p.quote { color: var(--on-dark-soft); }
.review-user strong  { color: var(--on-dark); }
.review-user span    { color: var(--on-dark-mute); }

/* FAQ */
.faq-q { color: var(--on-dark); }
.faq-q .faq-ic { background: var(--glass-bg-strong); color: var(--on-dark); }
.faq-item.open .faq-ic { background: var(--yellow); color: var(--navy); }
.faq-a { color: var(--on-dark-soft); }

/* Contact cards */
.contact-item h3 { color: var(--on-dark); }
.contact-item a, .contact-item p { color: var(--on-dark-soft); }
.contact-item .ci-ic svg { color: var(--on-dark); }
.contact-item.line .ci-ic svg { color: #06C755; }
.contact-item.phone .ci-ic svg { color: #8fd0ff; }
.contact-item.map .ci-ic svg { color: #F79400; }
.contact-item.time .ci-ic svg { color: #FFD600; }
a.contact-item:hover { box-shadow: 0 14px 40px rgba(2,10,26,.45); }

/* Process steps */
.step-card h3 { color: var(--on-dark); }
.step-card p  { color: var(--on-dark-soft); }
.step-card:hover { box-shadow: 0 16px 44px rgba(2,10,26,.5); border-color: transparent; }

/* Calculator */
.calc-head {
  background: linear-gradient(120deg, rgba(20,120,184,.16) 0%, rgba(7,62,124,.10) 100%);
  border-bottom: 1px solid var(--glass-border);
}
.calc-body { background: transparent; }
.field label, .field .field-label { color: var(--on-dark); }
.field input[type="number"] {
  background: var(--glass-bg-strong); color: var(--on-dark);
  border-color: var(--glass-border);
}
.field input[type="range"] {
  background: linear-gradient(90deg, var(--orange) 0%, rgba(255,255,255,.18) 0%);
}
.chip {
  background: var(--glass-bg); color: var(--on-dark-soft);
  border-color: var(--glass-border);
}
.chip.active, .chip:hover {
  background: var(--glass-bg-strong); color: var(--on-dark); border-color: var(--yellow);
}
.calc-result {
  background: transparent;
  border: 1px solid transparent;
}
.calc-result .rrow { border-bottom-color: rgba(255,255,255,.18); }
.calc-result .rlabel { color: var(--on-dark-soft); }
.calc-result .rval { color: var(--accent-green); }
.calc-result .rval.blue { color: var(--accent-blue); }
.calc-result .rval small { color: var(--on-dark-mute); }
.calc-note { color: var(--on-dark-mute); }

/* Footer as a frosted overlay band (backdrop shows through) */
.site-footer {
  background: linear-gradient(180deg, rgba(4,18,42,.55) 0%, rgba(4,18,42,.78) 100%);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
}
.footer-social a { background: var(--glass-bg-strong); }

/* ---- Service-area Thailand map (contact page) ---- */
.area-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: start; }
.area-grid .contact-info { grid-template-columns: 1fr; max-width: none; margin: 0; align-self: start; }
.area-grid .map-card { max-width: none; width: 100%; margin: 0; }
.service-area .map-card {
  max-width: 900px; margin: 0 auto; padding: 34px 30px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.map-wrap { position: relative; width: 100%; max-width: 580px; margin: 0 auto; aspect-ratio: 1 / 1; }
.map-wrap::before {
  content: ""; position: absolute; inset: -8%;
  background: radial-gradient(circle at 50% 46%, rgba(255,214,0,.16), transparent 62%);
  pointer-events: none;
}
.th-map {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #1e8fd6 0%, #1478B8 42%, #073E7C 78%, #052c58 100%);
  -webkit-mask: url('/assets/images/thailand.svg?v=20260725f') center / contain no-repeat;
          mask: url('/assets/images/thailand.svg?v=20260725f') center / contain no-repeat;
  filter: drop-shadow(0 8px 22px rgba(20,120,184,.4));
}
.map-dot { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 2; }
.map-dot i {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,214,0,.25);
  position: relative;
}
.map-dot i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--yellow); animation: mapPulse 2.2s ease-out infinite;
}
@keyframes mapPulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(3.4); opacity: 0; } }
.map-dot b {
  font-size: .72rem; font-weight: 500; color: #fff; white-space: nowrap;
  background: rgba(4,18,42,.62); padding: 2px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.map-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 28px; }
.map-note span { color: var(--on-dark-soft); font-size: .96rem; }
.map-note strong { color: #fff; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .map-dot i::after { animation: none; } }
@media (max-width: 860px) { .area-grid { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 560px) {
  /* keep the region names visible on mobile, just smaller so they don't collide */
  .map-dot { gap: 3px; }
  .map-dot i { width: 10px; height: 10px; }
  .map-dot b { font-size: .58rem; padding: 1px 6px; font-weight: 600; }
}

/* =========================================================
   OFFICE MAP EMBED (contact page)
   Google's iframe ships fixed width="600" height="450", which
   overflows a phone. Sized by aspect-ratio here instead so it
   never forces the page sideways.
   ========================================================= */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  background: var(--glass-bg);
}
.map-embed iframe,
.map-embed a,
.map-embed img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-embed img {
  object-fit: cover;
  transition: transform .4s ease;
}
.map-embed a:hover img { transform: scale(1.04); }
@media (max-width: 560px) {
  .map-embed { aspect-ratio: 4 / 3; }
}

/* =========================================================
   SKIP LINK
   Appended at the end on purpose: tools/build-critical-css.py slices style.css
   by fixed line numbers, so anything inserted above line 1239 would silently
   shift what lands in critical.css. The link only appears on :focus, well after
   first paint, so it does not need to be in the critical block.
   ========================================================= */
.skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 2001;
  transform: translate(-50%, -200%);
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: .92rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: transform .25s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* =========================================================
   HEADING-ORDER HELPERS
   .sr-only names a section the design gives no visible title, so the outline
   has no gap. .policy-h keeps the privacy page's section headings at their
   old h3 size now that they are h2 — the tag changed, the look must not.
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.policy-h { font-size: 1.17em; }