@font-face {
  font-family: "Anuphan";
  src: url("Font/Anuphan/Anuphan-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 700;
  font-display: swap;
}

:root {
  /* accent: brand orange, used sparingly */
  --orange: #FC571F;
  --orange-deep: #E0461A;
  --orange-tint: #FFE9DF;
  /* button fills: deep enough for white label text (AA 4.5:1) */
  --cta: #CC4410;             /* 4.8:1 with white */
  --cta-deep: #B33A0D;        /* 6:1 with white, hover */
  --accent-text: #B33A0D;     /* orange for small units on light surfaces (5:1 on --surface) */
  /* LINE chat button: brand green for the logo, a deeper green behind white text */
  --line-brand: #06C755;
  --line-fill: #00873C;       /* 4.6:1 with white */
  --line-fill-deep: #00732F;  /* 6:1 with white, hover */

  /* graphite ink */
  --ink: #22272C;
  --ink-deep: #15191D;
  --ink-soft: #454C53;
  --muted: #5E666E;          /* 4.9:1 on --surface, 6:1 on white */
  --shade: 16 20 24;         /* rgb channels for overlays and shadows */

  /* cool drafting paper */
  --paper: #F3F5F7;
  --paper-rgb: 243 245 247;
  --grid: rgb(34 39 44 / .035);
  --surface: #E8ECEF;
  --line: #D9DEE3;
  --line-strong: #C3CAD1;
  --white: #FFFFFF;           /* literal white: text on photos/orange, chips over imagery */
  --hero-bg: #1E2328;

  /* theme-dependent roles */
  --card: #FFFFFF;            /* cards and raised controls */
  --card-rgb: 255 255 255;
  --on-ink: #FFFFFF;          /* text on --ink fills (segmented thumb, ink button) */
  --hover: rgb(16 20 24 / .06);
  --orange-rgb: 252 87 31;
  /* frosted glass (EPC flow): translucent card colour over the lit stage */
  --glass: rgb(var(--card-rgb) / .62);
  --glass-strong: rgb(var(--card-rgb) / .84);
  --glass-line: rgb(255 255 255 / .8);
  --glass-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 18px 40px -28px rgb(var(--shade) / .4);
  --sweep: rgb(255 255 255 / .5);
  --graphite: #22272C;        /* fixed dark text on always-white chips */
  --frame-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110' fill='none' stroke='%2322272C' stroke-opacity='.26' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M30 78 58 40h74l-28 38z'/%3E%3Cpath d='M48.5 78 76.5 40M67 78 95 40M85.5 78 113.5 40M39.3 65.3h74M48.7 52.7h74'/%3E%3Cpath d='M44 78v14M96 78v14M20 92h120' stroke-dasharray='3 3'/%3E%3Ccircle cx='132' cy='20' r='7'/%3E%3C/svg%3E");
  color-scheme: light;

  --r-panel: 20px;
  --r-card: 12px;
  --r-pill: 999px;

  --container: 1320px;
  --gutter: clamp(16px, 2.4vw, 20px);
  --section-gap: clamp(80px, 10vw, 140px);

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* Dark: deep obsidian base, charcoal panels, off-white ink; orange stays the accent.
   Set on <html data-theme> by the inline script in index.html (stored choice,
   otherwise the OS preference). */
:root[data-theme="dark"] {
  --ink: #F2F4F6;
  --ink-deep: #FFFFFF;
  --ink-soft: #C3C8CF;
  --muted: #8C939C;          /* 5:1 on --card, 5.9:1 on --paper */
  --shade: 0 0 0;

  --paper: #0D0F12;
  --paper-rgb: 13 15 18;
  --grid: rgb(255 255 255 / .028);
  --surface: #1A1D24;
  --line: #2A2E39;
  --line-strong: #3A3F4C;
  --hero-bg: #0D0F12;
  --orange-tint: rgb(252 87 31 / .16);
  --accent-text: #FC571F;     /* 5:1 on the dark --surface */

  --card: #1E222B;
  --card-rgb: 30 34 43;
  --on-ink: #0D0F12;
  --hover: rgb(255 255 255 / .06);
  --glass-line: rgb(255 255 255 / .09);
  --glass-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 18px 40px -28px rgb(0 0 0 / .8);
  --sweep: rgb(255 255 255 / .07);
  --frame-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110' fill='none' stroke='%23F2F4F6' stroke-opacity='.22' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M30 78 58 40h74l-28 38z'/%3E%3Cpath d='M48.5 78 76.5 40M67 78 95 40M85.5 78 113.5 40M39.3 65.3h74M48.7 52.7h74'/%3E%3Cpath d='M44 78v14M96 78v14M20 92h120' stroke-dasharray='3 3'/%3E%3Ccircle cx='132' cy='20' r='7'/%3E%3C/svg%3E");
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Anuphan", "Noto Sans Thai", "Leelawadee UI", "Thonburi", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  /* faint 32px drafting grid */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a, button, input, label { -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* keyboard users: first tab stop jumps past the nav to the page content */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--card); color: var(--ink);
  font-size: 15px; font-weight: 500;
  box-shadow: 0 12px 32px -18px rgb(var(--shade) / .5);
  transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; }
#content:focus { outline: none; }

/* ---------- shared pieces ---------- */

.kicker {
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 400;
}

.h2 {
  font-size: clamp(30px, 2.4vw + 14px, 46px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.h3 {
  font-size: clamp(22px, 1.2vw + 14px, 30px);
  font-weight: 400;
  line-height: 1.3;
}

.lede { color: var(--muted); font-size: 16px; line-height: 1.7; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px 0 22px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .25s, color .25s, transform .25s var(--ease);
}
.btn--plain { padding: 0 22px; }
.btn-ico {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
}
.btn-ico svg { width: 12px; height: 12px; }

.btn--orange { background: var(--cta); color: var(--white); }
.btn--orange .btn-ico { background: var(--white); color: var(--cta); }
.btn--orange:hover { background: var(--cta-deep); }

/* sits over photography in both themes, so its colours are fixed */
.btn--white { background: var(--white); color: var(--graphite); }
.btn--white:hover { background: #FFE9DF; }

.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink .btn-ico { background: var(--cta); color: var(--white); }
.btn--ink:hover { background: var(--ink-deep); }

/* LINE chat: the logo leads, so the round slot sits on the left */
.btn--line { padding: 0 22px 0 8px; background: var(--line-fill); color: var(--white); }
.btn--line .btn-ico { background: var(--white); color: var(--line-brand); }
.btn--line .btn-ico svg { width: 20px; height: 20px; }
.btn--line:hover { background: var(--line-fill-deep); }
.btn.btn--line:hover .btn-ico svg { transform: none; }  /* the logo stays upright */

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; }

/* ---------- hero ---------- */

.hero-shell { padding: clamp(8px, 1.2vw, 16px) clamp(8px, 1.2vw, 16px) 0; }

.hero {
  position: relative;
  height: max(720px, calc(100vh - 16px));
  max-height: 900px;
  border-radius: var(--r-panel);
  overflow: hidden;
  color: var(--white);
  background: var(--hero-bg);
}

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(var(--shade) / .55) 0%, rgb(var(--shade) / 0) 22%),
    linear-gradient(0deg, rgb(var(--shade) / .78) 0%, rgb(var(--shade) / .35) 34%, rgb(var(--shade) / 0) 60%);
  pointer-events: none;
}

.nav {
  position: absolute; z-index: 3;
  top: 22px; left: 28px; right: 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 12px;   /* keeps the link pill off the logo and the actions on narrow desktops */
  align-items: center;
}

/* transparent mark straight on the header: white type over the hero, ink once the bar is stuck */
.logo-chip {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px;
  margin: -4px;
  border-radius: 12px;
  color: var(--white);
}
.logo-chip img { display: block; height: 48px; width: auto; object-fit: contain; filter: drop-shadow(0 1px 6px rgb(0 0 0 / .35)); }
.logo-chip span { font-size: 15px; font-weight: 500; line-height: 1.2; text-shadow: 0 1px 10px rgb(0 0 0 / .35); }

.nav-links {
  position: relative;
  display: flex; gap: 2px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-links a {
  position: relative; z-index: 1;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  font-size: 14px;
  color: rgba(255,255,255,.88);
  transition: background-color .2s, color .2s;
}
.nav-links a:hover { background: rgba(255,255,255,.14); color: var(--white); }
.nav-links a[aria-current="page"],
.nav-links a[aria-current="page"]:hover { background: transparent; color: var(--graphite); }
/* narrow desktops: seven links only fit once "home" goes (the logo links home) */
@media (max-width: 1300px) {
  .nav-links a[href="#top"] { display: none; }
  .nav-links > a { padding: 7px 12px; }
}
@media (max-width: 1100px) {
  .nav-links > a { padding: 7px 9px; }
}

.nav-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav-drawer-foot { display: none; }
.nav-actions .btn { height: 44px; }

/* theme switch: knob slides over the active icon (sun = light, moon = dark) */
.theme-toggle {
  position: relative;
  flex: none;
  display: inline-flex; align-items: center; justify-content: space-between;
  width: 76px; height: 44px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  color: rgb(255 255 255 / .75);
  background: rgb(255 255 255 / .14);
  border: 1px solid rgb(255 255 255 / .22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color .25s, border-color .25s;
}
.theme-toggle:hover { background: rgb(255 255 255 / .22); }
.theme-toggle svg { position: relative; z-index: 1; width: 16px; height: 16px; transition: color .3s; }
.theme-knob {
  position: absolute; top: 5px; left: 5px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--white);
  transition: transform .4s var(--ease), background-color .25s;
}
.theme-toggle[aria-checked="true"] .theme-knob { transform: translateX(32px); }
.theme-toggle[aria-checked="false"] .i-sun,
.theme-toggle[aria-checked="true"] .i-moon { color: var(--graphite); }
/* on the light/dark sticky bar the switch takes the ink colours, like the segmented controls */
.nav.is-stuck .theme-toggle { color: var(--muted); background: var(--surface); border-color: transparent; }
.nav.is-stuck .theme-toggle .theme-knob { background: var(--ink); }
.nav.is-stuck .theme-toggle[aria-checked="false"] .i-sun,
.nav.is-stuck .theme-toggle[aria-checked="true"] .i-moon { color: var(--on-ink); }

.hero-card {
  position: absolute; z-index: 2;
  right: 30%; top: 38%;
  width: 240px;
  padding: 14px;
  border-radius: var(--r-card);
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hero-card-ico {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white);
  color: var(--graphite);
  margin-bottom: 10px;
}
.hero-card-ico svg { width: 16px; height: 16px; }
.hero-card strong { display: block; font-size: 14px; font-weight: 500; }
.hero-card p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.82); margin-top: 4px; }

.hero-bottom {
  position: absolute; z-index: 2;
  left: clamp(20px, 3.4vw, 44px); right: clamp(20px, 3.4vw, 44px); bottom: clamp(20px, 3.4vw, 44px);
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 48px;
  align-items: end;
}

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--r-pill);
  font-size: 14px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(40px, 4.5vw + 16px, 76px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.hero h1 .line { display: block; }
.hero h1 .line[hidden] { display: none; }

.hero-copy p {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,.86);
  margin-bottom: 24px;
}
.hero-actions { display: flex; gap: 10px; }

/* hero entrance lives in the motion section at the end of this file */

/* ---------- media frames ----------
   Photo/video frames show a line drawing of a panel array on the surface tone
   until their media arrives (main.js: initFrame). Final images dropped at a
   frame's data-img path cover the drawing; missing files leave it in place. */

.media-frame {
  background-color: var(--surface);
  background-image: var(--frame-art);
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(46%, 220px) auto;
}
.frame-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.media-frame video { transition: opacity .5s ease; }
.media-frame.is-loading video { opacity: 0; }
/* skeleton sweep while the clip is still loading */
.media-frame.is-loading::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--sweep) 50%, transparent 70%) -150% 0 / 200% 100% no-repeat;
  animation: frame-sweep 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes frame-sweep { to { background-position: 250% 0; } }

/* ---------- impact ---------- */

.impact { padding: clamp(72px, 9vw, 128px) 0 0; }

.impact-head { text-align: center; max-width: 620px; margin: 0 auto 56px; }
.impact-head .h2 { margin: 10px 0 16px; }

.impact-panel {
  position: relative;
  height: 600px;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--surface);
}
.impact-panel video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.impact-panel::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, var(--paper) 0%, rgb(var(--paper-rgb) / .6) 18%, rgb(var(--paper-rgb) / 0) 45%);
}

.stats {
  position: absolute; z-index: 2;
  left: 24px; right: 24px; bottom: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
}
.stat {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 20px 22px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.stat:nth-child(1) { height: 170px; }
.stat:nth-child(2) { height: 210px; }
.stat:nth-child(3) { height: 290px; }
.stat:nth-child(4) { height: 245px; }
.stat-num {
  font-size: clamp(40px, 3vw + 20px, 60px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-num small { font-size: 26px; color: var(--orange); margin-left: 4px; font-weight: 400; }
.stat-label { font-size: 14px; color: var(--ink-soft); }

/* branch network: the HQ is the one filled card, the branches are quiet outlines.
   Nothing here is a link, so there are no hover states. */
.branches {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.branches-title { font-size: clamp(22px, 1vw + 16px, 28px); font-weight: 400; line-height: 1.3; }
.branches-title span { display: inline-block; }
.branches-head p { margin-top: 12px; max-width: 360px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.branch-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.branch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}
.branch svg { grid-row: span 2; width: 22px; height: 22px; margin-top: 2px; color: var(--muted); }
.branch strong { font-size: 18px; font-weight: 500; line-height: 1.4; }
.branch span { font-size: 14px; line-height: 1.5; color: var(--muted); }
.branch--hq {
  grid-row: span 2;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto;
  padding: 20px;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}
.branch--hq svg { grid-row: auto; width: 28px; height: 28px; margin: 0 0 24px; color: var(--orange); }
.branch--hq strong { font-size: 26px; font-weight: 400; }
.branch--hq span { color: var(--on-ink); opacity: .8; }

/* ---------- packages ---------- */

.packages { padding: var(--section-gap) 0 0; }

.split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
}
.split-left { position: sticky; top: 40px; align-self: start; }
.split-left .h2 { margin-top: 10px; }

.pk-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 28px;
}
.pk-head .h3 { margin: 10px 0 12px; }
.pk-head .lede { max-width: 520px; font-size: 15px; }

.seg {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface);
}
.seg button {
  position: relative; z-index: 1;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.seg button[aria-pressed="true"] { color: var(--on-ink); }

.pk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pk {
  display: flex; flex-direction: column;
}
.pk-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 16px;
}
.pk-media video { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* a supplied photo replaces the clip (main.js removes it); hover zooms the photo */
.pk-media .frame-img { transition: transform .9s var(--ease); }
.pk:hover .pk-media .frame-img { transform: scale(1.04); }
.pk-badge {
  position: absolute; z-index: 2; top: 10px; left: 10px;
  background: var(--card);
  border-radius: var(--r-pill);
  font-size: 14px;
  padding: 3px 10px;
}
.pk h4 { font-size: 18px; font-weight: 500; line-height: 1.4; }
.pk-specs { margin-bottom: 0; }
.pk-fit { font-size: 14px; color: var(--muted); margin: 4px 0 14px; min-height: 42px; line-height: 1.6; }
.pk-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.pk-specs div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.pk-specs div:nth-child(odd) { padding-right: 10px; }
.pk-specs dt { font-size: 14px; color: var(--muted); }
.pk-specs dd { font-size: 14px; font-weight: 500; white-space: nowrap; }
.pk-price {
  display: flex; flex-direction: column;
  margin-top: auto;
  padding-top: 14px;
}
.pk-price span { font-size: 14px; color: var(--muted); }
.pk-price strong { font-size: 24px; font-weight: 400; letter-spacing: -0.01em; }
.pk-more {
  margin-top: 12px;
  font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  align-self: flex-start;
  line-height: 1.5;
}
.pk-more:hover { color: var(--orange); border-color: var(--orange); }

.pk-note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted);
}

.benefits { margin-top: 56px; }
.benefits > p { font-size: 15px; margin-bottom: 14px; color: var(--ink-soft); }
.benefit {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  margin-bottom: 10px;
  transition: background-color .25s, border-color .25s;
}
.benefit button {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  text-align: left;
}
.benefit-t { font-size: clamp(17px, .8vw + 12px, 22px); font-weight: 400; }
.benefit svg { width: 14px; height: 14px; justify-self: end; transition: transform .25s; }
.benefit-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.benefit-body > div { overflow: hidden; }
.benefit-body p { padding: 0 20px 18px 64px; color: var(--ink-soft); font-size: 15px; max-width: 680px; }
.benefit.is-open { background: var(--card); border-color: var(--line); }
.benefit.is-open .benefit-body { grid-template-rows: 1fr; }
.benefit.is-open svg { transform: rotate(90deg); }

/* ---------- calculator ---------- */

.calc { padding: var(--section-gap) 0 0; }

.calc-panel {
  background: var(--surface);
  border-radius: var(--r-panel);
  padding: clamp(20px, 4vw, 56px);
}
.calc-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 40px;
}
.calc-top .h2 { margin-top: 10px; }
.calc-top .lede { font-size: 15px; max-width: 480px; justify-self: end; }

.calc-body {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 16px;
}

.calc-inputs {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 28px;
  display: flex; flex-direction: column; gap: 30px;
}
.calc-inputs .seg { align-self: flex-start; }

.field label, .field .field-label { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.field-val { font-size: 32px; font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.field-val small { font-size: 14px; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.field-hint { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* The input is a 32px-tall touch target; the visible track is drawn 4px high inside it. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 32px;
  background: transparent;
  outline: none;
  cursor: pointer;
  touch-action: pan-y;        /* horizontal drags move the slider, vertical ones still scroll */
  --thumb: 22px;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--orange) var(--fill, 50%), var(--line) var(--fill, 50%));
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--orange); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--thumb); height: var(--thumb);
  margin-top: calc((4px - var(--thumb)) / 2);
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--orange);
  box-shadow: 0 1px 3px rgb(var(--shade) / .18);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: calc(var(--thumb) - 4px); height: calc(var(--thumb) - 4px);
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--orange);
  cursor: grab;
}
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--orange); outline-offset: 3px; }

.tariff {
  display: flex; align-items: center; gap: 8px;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.tariff input {
  border: 0; outline: 0; width: 80px;
  font-size: 18px;
  background: transparent;
}
.tariff span { font-size: 14px; color: var(--muted); }
.tariff:focus-within { border-color: var(--orange); }

.calc-out {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 16px;
}
.out-card {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 22px 24px;
}
.out-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: end;
  padding: 28px;
}
.out-hero .out-label { font-size: 14px; color: var(--ink-soft); }
.payback {
  font-size: clamp(72px, 6vw + 32px, 112px);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -0.03em;
  margin-top: 8px;
}
.payback small { font-size: 28px; color: var(--orange); margin-left: 8px; letter-spacing: 0; font-weight: 400; }

.chart { height: 140px; display: flex; flex-direction: column; }
.bars {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  gap: 3px;
  align-items: center;
  position: relative;
}
.bars::after {
  content: "";
  position: absolute; left: 0; right: 0;
  top: var(--zero, 50%);
  border-top: 1px dashed var(--line-strong);
}
.bar { height: 100%; position: relative; }
.bar i {
  position: absolute; left: 0; right: 0;
  border-radius: 2px;
  background: var(--line-strong);
  transition: top .35s ease, height .35s ease, background-color .35s;
}
.bar.pos i { background: var(--orange); }
.chart-axis {
  display: flex; justify-content: space-between;
  font-size: 14px; color: var(--muted);
  margin-top: 6px;
}
.chart-cap { font-size: 14px; color: var(--muted); margin-bottom: 8px; }

.out-label { font-size: 14px; color: var(--muted); }
.out-val { font-size: 30px; font-weight: 300; line-height: 1.25; margin-top: 6px; letter-spacing: -0.01em; }
.out-val small { font-size: 14px; color: var(--muted); margin-left: 4px; letter-spacing: 0; }

.out-cta {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--card);
  border-radius: var(--r-card);
  padding: 18px 18px 18px 24px;
}
.out-cta p { font-size: 14px; color: var(--muted); max-width: 520px; line-height: 1.6; }

/* ---------- projects ---------- */

.projects { padding: var(--section-gap) 0 0; }

.split-left .lede { margin-top: 18px; font-size: 15px; max-width: 340px; }

.award {
  margin-top: 28px;
  max-width: 340px;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.award img { width: 84px; height: auto; border-radius: 8px; }
.award strong { display: block; font-size: 15px; font-weight: 500; line-height: 1.4; }
.award span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--muted); }

.pj-feature {
  background: var(--surface);
  border-radius: var(--r-panel);
  padding: clamp(12px, 1.4vw, 16px);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(16px, 2.4vw, 32px);
}
.pj-feature[hidden] { display: none; }
/* the photo fills the card height beside the text */
.pj-feature-media {
  position: relative;
  min-height: 280px;
  border-radius: var(--r-card);
  overflow: hidden;
}
.pj-feature-body {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 20px;
  padding: 12px 12px 12px 0;
}
.pj-feature-body h3 { margin-top: 8px; font-size: clamp(20px, .8vw + 14px, 26px); font-weight: 400; line-height: 1.35; }
.pj-loc { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.pj-feature-stats {
  display: grid;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
}
.pj-feature-stats strong {
  display: block;
  font-size: clamp(34px, 1.6vw + 18px, 44px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pj-feature-stats small { margin-left: 4px; font-size: 24px; font-weight: 400; letter-spacing: 0; color: var(--accent-text); }
.pj-feature-stats span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* labels a 3D render (a project not yet handed over) so it isn't read as a site photo */
.pj-chip {
  position: absolute; z-index: 1;
  top: 12px; left: 12px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 14px; line-height: 1.4;
  color: var(--ink);
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}

.pj-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 16px;
  margin: 32px 0 20px;
}
.pj-count { font-size: 14px; color: var(--muted); }

.pj-grid {
  scroll-margin-top: 96px;   /* clear the sticky nav when "show less" scrolls back */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 16px;
}
.pj { display: flex; flex-direction: column; }
.pj-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 14px;
}
.pj-name { font-size: 17px; font-weight: 500; line-height: 1.45; }
.pj .pj-loc { margin-top: 2px; }
.pj-specs { margin-top: 12px; border-top: 1px solid var(--line); }
.pj-specs div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.pj-specs dt { font-size: 14px; color: var(--muted); white-space: nowrap; }
.pj-specs dd { font-size: 14px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

.pj-more {
  width: 100%;
  min-height: 48px;
  margin-top: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 15px;
  color: var(--ink);
}

.logo-wall { margin-top: 56px; }
.logo-wall-title { margin-bottom: 14px; font-size: 14px; font-weight: 400; color: var(--ink-soft); }
.logos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
/* logos keep their own colours, so every tile is white in both themes */
.logos li {
  display: flex; align-items: center; justify-content: center;
  height: 88px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.logos img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.logos--brands li { height: 76px; padding: 14px 16px; }
.logo-note { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---------- EPC workflow ---------- */
/* Four phases, E → P → C → D, as frosted-glass cards on a lit drafting stage.
   Without JS all four phase panels show in order. main.js adds .is-interactive and
   turns the cards into tabs: one panel at a time, the bar fills to the chosen phase. */

.process { padding: var(--section-gap) 0 0; }
.process-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
  align-items: end;
}
.process-head .h2 { margin-top: 10px; }
.process-head .lede { max-width: 560px; }

/* the stage: drafting grid under two soft sun glows, so the glass has light to catch */
.flow {
  position: relative;
  margin-top: 48px;
  padding: clamp(12px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: calc(var(--r-panel) + 8px);
  background:
    radial-gradient(55% 70% at 8% 0%, rgb(var(--orange-rgb) / .2), transparent 70%),
    radial-gradient(45% 60% at 100% 100%, rgb(var(--orange-rgb) / .12), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--surface);
  scroll-margin-top: 96px;
  isolation: isolate;
}

.flow-rail {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.flow-rail li { display: flex; }
.flow-tab {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "badge letter" "en en" "name name" "sum sum";
  align-content: start;
  gap: 2px 12px;
  min-height: 44px;
  padding: 18px 18px 20px;
  text-align: left;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-panel);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s, background-color .3s;
}
.flow-badge {
  grid-area: badge;
  width: 44px; height: 44px;
  border-radius: var(--r-card);
  display: grid; place-items: center;
  color: var(--accent-text);
  background: var(--orange-tint);
  transition: background .35s, color .35s, box-shadow .4s var(--ease), transform .4s var(--ease);
}
.flow-badge svg { width: 22px; height: 22px; }
/* E / P / C / D: large orange letters, the section's accent */
.flow-letter {
  grid-area: letter;
  justify-self: end;
  font-size: 46px; font-weight: 300; line-height: .9;
  background: linear-gradient(180deg, var(--orange) 10%, rgb(var(--orange-rgb) / .22) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: transform .4s var(--ease);
}
.flow-en { grid-area: en; margin-top: 16px; font-size: 14px; color: var(--muted); }
.flow-name { grid-area: name; font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.flow-name-short { display: none; }
.flow-sum { grid-area: sum; margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* the chosen phase: lifted, orange edge and glow, badge filled */
.flow:not(.is-interactive) .flow-badge,
.flow-tab[aria-selected="true"] .flow-badge {
  color: var(--white);
  background: linear-gradient(135deg, var(--orange), var(--cta-deep));
  box-shadow: 0 8px 18px -8px rgb(var(--orange-rgb) / .7);
}
.flow-tab[aria-selected="true"] {
  transform: translate3d(0, -3px, 0);
  border-color: rgb(var(--orange-rgb) / .55);
  background: var(--glass-strong);
  box-shadow: var(--glass-shadow), 0 0 0 1px rgb(var(--orange-rgb) / .3), 0 24px 48px -28px rgb(var(--orange-rgb) / .75);
}
.flow-tab.is-done .flow-badge { color: var(--cta); }
.is-interactive .flow-tab { cursor: pointer; }
@media (hover: hover) {
  .flow-tab:hover:not([aria-selected="true"]) {
    transform: translate3d(0, -3px, 0) scale(1.015);
    border-color: rgb(var(--orange-rgb) / .3);
    box-shadow: var(--glass-shadow), 0 20px 40px -28px rgb(var(--orange-rgb) / .6);
  }
  .flow-tab:hover .flow-badge { transform: rotate(-6deg); }
  .flow-tab:hover .flow-letter { transform: translate3d(0, -2px, 0); }
}
.is-interactive .flow-tab:active { transform: scale(.98); transition-duration: .12s; }
.flow-tab:focus-visible { outline-offset: 4px; }

/* progress: fills to the end of the chosen phase */
.flow-line {
  position: relative;
  margin: 14px 4px 0;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.flow-line i {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--orange), var(--cta));
  transform-origin: left center;
  transform: scaleX(var(--p, 1));
  transition: transform .6s var(--ease);
}

.flow-panels { margin-top: 14px; }
.flow-panel {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px 48px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-panel);
  background: var(--glass-strong);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.flow-panel + .flow-panel { margin-top: 12px; }
.flow-panel[hidden] { display: none; }
.flow-count { font-size: 14px; font-weight: 500; color: var(--accent-text); }
.flow-title { margin-top: 8px; font-size: clamp(22px, 1.2vw + 14px, 30px); font-weight: 400; line-height: 1.3; }
.flow-title:focus { outline: none; }
.flow-desc { margin-top: 12px; max-width: 560px; font-size: 16px; line-height: 1.75; color: var(--ink-soft); }

/* the two grid authorities, named in full */
.flow-auth { list-style: none; margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 560px; }
.flow-auth li {
  display: grid; gap: 2px;
  padding: 14px 16px;
  border: 1px solid rgb(var(--orange-rgb) / .22);
  border-radius: var(--r-card);
  background: linear-gradient(135deg, rgb(var(--orange-rgb) / .1), rgb(var(--orange-rgb) / .02));
}
.flow-auth strong { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--accent-text); }
.flow-auth span { font-size: 15px; line-height: 1.5; }
.flow-auth small { font-size: 14px; line-height: 1.5; color: var(--muted); }

.flow-get { align-self: start; padding-left: 32px; border-left: 1px solid var(--line); }
.flow-get h4 { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.flow-get ul { list-style: none; margin-top: 12px; display: grid; gap: 12px; }
.flow-get li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; line-height: 1.6; }
.flow-get svg { width: 22px; height: 22px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--orange-tint); color: var(--accent-text); }

.flow-nav {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.flow:not(.is-interactive) .flow-nav { display: none; }
.flow-prev {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px 0 10px;
  border-radius: var(--r-pill);
  font-size: 15px; color: var(--ink-soft);
  transition: background-color .2s, color .2s;
}
.flow-prev:hover { background: var(--hover); color: var(--ink); }
.flow-prev svg { width: 14px; height: 14px; transform: rotate(180deg); }

/* One-shot moments (main.js, playOnce): the bar draws in after the cards arrive; a
   chosen phase's badge pops and its panel settles in, checklist items following. */
@keyframes rail-draw { from { transform: scaleX(0); } }
@keyframes flow-in { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); } }
@keyframes badge-pop {
  from { transform: scale(.82); box-shadow: 0 0 0 0 rgb(var(--orange-rgb) / .55); }
  60% { box-shadow: 0 0 0 12px rgb(var(--orange-rgb) / 0); }
}
.flow-line.rail-draw i { animation: rail-draw 1.1s var(--ease) .35s backwards; }
.flow-badge.badge-pop { animation: badge-pop .6s var(--ease); }
.flow-panel.flow-in { animation: flow-in .5s var(--ease) backwards; }
.flow-panel.flow-in .flow-get li,
.flow-panel.flow-in .flow-auth li { animation: rise-in .5s var(--ease) backwards; animation-delay: calc(120ms + var(--i, 0) * 70ms); }
.flow-get li:nth-child(2), .flow-auth li:nth-child(2) { --i: 1; }
.flow-get li:nth-child(3) { --i: 2; }
.flow-get li:nth-child(4) { --i: 3; }

/* ---------- engineering standards ---------- */

.standards { padding: var(--section-gap) 0 0; }
.std-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  border-top: 1px solid var(--line-strong);
}
.std {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.std-ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-card);
  background: var(--orange-tint);
  color: var(--accent-text);
}
.std-ico svg { width: 24px; height: 24px; }
.std h3 { font-size: 18px; font-weight: 500; line-height: 1.4; text-wrap: balance; }
.std p { margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.std-tag {
  display: inline-flex;
  margin-top: 12px;
  padding: 3px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--ink-soft);
}

@media (max-width: 1024px) {
  .process-head { grid-template-columns: 1fr; gap: 16px; }
  .flow-panel { grid-template-columns: 1fr; }
  .flow-get { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .flow-sum { display: none; }
  .flow-letter { font-size: 40px; }
}
/* phones and small tablets: four compact cards, badge over a short name, letter in the corner */
@media (max-width: 767px) {
  .flow { margin-top: 36px; }
  .flow-rail { gap: 8px; }
  .flow-tab {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-areas: "badge" "name";
    justify-items: center;
    gap: 10px;
    padding: 16px 6px 12px;
    text-align: center;
    border-radius: var(--r-card);
  }
  .flow-letter { position: absolute; top: 6px; right: 8px; font-size: 18px; font-weight: 500; }
  .flow-en, .flow-name-full { display: none; }
  .flow-name-short { display: inline; }
  .flow-name { font-size: 15px; }
  .flow-badge { width: 40px; height: 40px; }
}
@media (max-width: 639px) {
  .flow { padding: 8px; border-radius: var(--r-panel); }
  .flow-panel { padding: 22px 20px; }
  .flow-auth { grid-template-columns: 1fr; }
  .flow-nav .btn { padding-left: 18px; }
  .std-list { grid-template-columns: 1fr; }
  .std { padding: 20px 0; }
}

/* ---------- footer ---------- */

.foot-shell { padding: var(--section-gap) clamp(8px, 1.2vw, 16px) clamp(8px, 1.2vw, 16px); }
.foot {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-panel);
  overflow: hidden;
  padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 40px) 0;
}
.foot-cta {
  display: flex; align-items: end; justify-content: space-between;
  gap: 40px;
  padding: 8px 8px 40px;
}
.foot-cta .h2 { max-width: 640px; }
/* Thai has no spaces inside phrases: wrap only between them */
.foot-cta .h2 span { display: inline-block; }
.foot-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.foot-cta-actions .btn[hidden] { display: none; }

/* social channels: equal-width frosted pills, two to a row, 46px tall (one per row
   only where the column is too narrow for two, e.g. desktops near 1100px).
   The fill is the page tone, translucent, so the pills read as set into the card
   (lighter on the light theme, darker on the dark one). LINE lives in the CTA. */
.social {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 10px;
  max-width: 300px;
  margin-top: 20px;
}
.social a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgb(var(--paper-rgb) / .72);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--ink);
  white-space: nowrap;
  transition: border-color .25s, color .25s, background-color .25s, transform .3s var(--ease);
}
.social svg { width: 18px; height: 18px; flex: none; color: var(--ink-soft); transition: color .25s; }
.social a:hover { border-color: rgb(var(--orange-rgb) / .55); color: var(--accent-text); }
.social a:hover svg { color: var(--accent-text); }
.social a:active { transform: scale(.97); }
@media (hover: hover) { .social a:hover { transform: translateY(-1px); } }

/* HQ map: directions button beside the embedded Google Maps listing */
.foot-map {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.4fr;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.foot-map-info { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 20px; }
.foot-map-info h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.foot-map-info h3 svg { width: 18px; height: 18px; color: var(--accent-text); }
.foot-map-info p { margin-top: 8px; max-width: 300px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.foot-map-frame { position: relative; height: 280px; border-radius: var(--r-card); overflow: hidden; }
.foot-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.foot-card {
  position: relative; z-index: 2;
  background: var(--card);
  border-radius: var(--r-card);
  padding: clamp(20px, 2.5vw, 32px);
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
}
.foot-brand img { height: 64px; width: auto; margin-bottom: 14px; border-radius: 10px; }
/* the logo artwork has a baked-in white background, so it keeps a white chip in dark mode */
[data-theme="dark"] .foot-brand img { background: var(--white); padding: 4px; }
.foot-brand p { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 280px; }
.foot-col h3 { font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.foot-col li { list-style: none; font-size: 14px; color: var(--muted); line-height: 2; overflow-wrap: anywhere; }
.foot-col a:hover { color: var(--orange); }
.foot-legal {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between;
  font-size: 14px; color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.wordmark {
  font-size: clamp(64px, 22vw, 300px);
  font-weight: 600;
  line-height: .78;
  letter-spacing: -0.045em;
  text-align: center;
  white-space: nowrap;
  margin-top: -.13em;
  margin-bottom: -.15em;
  user-select: none;
  position: relative; z-index: 1;
  padding-top: .23em;
}


.wordmark .ch {
  display: inline-block;
  padding: .12em 0 .06em;
  margin: -.12em 0 -.06em;
  background: linear-gradient(180deg, var(--orange) 8%, #FFB08F 58%, rgba(252,87,31,.08) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================
   Motion
   Full movement by default; for prefers-reduced-motion the
   same moments become plain fades (no travel, no scaling).
   ========================================================= */

/* ---------- video pause control ---------- */

.video-toggle {
  position: absolute; z-index: 3;
  top: 92px; right: 28px;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--white);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color .25s, transform .25s var(--ease);
}
.video-toggle:hover { background: rgba(255,255,255,.26); }
.video-toggle:active { transform: scale(.92); }
.video-toggle svg { width: 14px; height: 14px; }
.video-toggle .i-play { display: none; }
.video-toggle[aria-pressed="true"] .i-play { display: block; }
.video-toggle[aria-pressed="true"] .i-pause { display: none; }

/* mobile menu button: only shown below 1024px */
.menu-btn {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  place-items: center;
  color: var(--white);
  background: rgb(255 255 255 / .14);
  border: 1px solid rgb(255 255 255 / .22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.menu-btn svg { width: 18px; height: 18px; }
.menu-btn .i-close, .menu-btn[aria-expanded="true"] .i-menu { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }
.nav.is-stuck .menu-btn { color: var(--ink); background: var(--surface); border-color: transparent; }

/* same control on the impact footage, inked for the light panel */
.video-toggle--panel {
  top: 20px; right: 20px;
  color: var(--ink);
  background: rgb(var(--card-rgb) / .78);
  border-color: rgb(var(--shade) / .08);
}
.video-toggle--panel:hover { background: var(--card); }

/* ---------- hero load sequence ---------- */

.hero h1 .line {
  overflow: hidden;
  padding: .14em 0 .08em;
  margin: -.14em 0 -.08em;
}
.hero h1 .line > span { display: block; }

/* ---------- entrance and scroll motion ----------
   Purely additive: nothing is ever hidden by a resting style. Elements render in
   their final, visible state; motion is a one-shot CSS animation whose keyframes
   start from the offset and end at the element's own style (no fill-forwards).
   If JS, IntersectionObserver or animations don't run, everything simply shows. */

@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
@keyframes drop-in { from { opacity: 0; transform: translate3d(0, -10px, 0); } }
@keyframes line-up { from { transform: translate3d(0, 108%, 0); } }
@keyframes video-in { from { opacity: 0; transform: scale(1.06); } }
@keyframes aperture { from { clip-path: inset(4% 3% 0 3% round 24px); } to { clip-path: inset(0 0 0 0 round 20px); } }
@keyframes settle { from { transform: scale(1.06); } }
@keyframes letter-up { from { transform: translate3d(0, 60%, 0); } }
@keyframes fade-in { from { opacity: 0; } }

/* hero: plays on first paint, no JS needed (backwards fill only covers each delay) */
.hero-video { animation: video-in 1.8s var(--ease) backwards; }
.hero [data-in] { animation: rise-in .8s var(--ease) var(--d, 0ms) backwards; }
.hero .nav[data-in] { animation-name: drop-in; }
.hero h1 .line > span { animation: line-up .9s var(--ease) var(--d, 0ms) backwards; }

/* scroll reveal: main.js adds .reveal-in just before a block enters the viewport */
.reveal-in { animation: rise-in .8s var(--ease) var(--d, 0ms) backwards; }
.impact-panel.reveal-in { animation: aperture 1.1s var(--ease) backwards; }
.impact-panel.reveal-in video { animation: settle 1.4s var(--ease) backwards; }
.wordmark.reveal-in { animation: none; }
.wordmark.reveal-in .ch { animation: letter-up 1s var(--ease) var(--d, 0ms) backwards; }

@media print {
  *, *::before, *::after { animation: none !important; }
}

/* ---------- sliding indicators (segmented control, nav) ---------- */

.seg-thumb, .nav-thumb {
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  border-radius: var(--r-pill);
  pointer-events: none;
  transition: transform .5s var(--ease), width .5s var(--ease);
}
.seg-thumb { background: var(--ink); }
.nav-thumb { top: 5px; bottom: 5px; background: var(--white); }

/* ---------- sticky nav after the hero ---------- */

.nav.is-stuck {
  position: fixed;
  top: 12px; left: 44px; right: 44px;
  z-index: 50;
  padding: 6px;
  border-radius: 18px;
  background: rgb(var(--card-rgb) / .86);
  border: 1px solid rgb(var(--shade) / .06);
  box-shadow: 0 12px 32px -18px rgb(var(--shade) / .35);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  animation: nav-drop .5s var(--ease);
}
.nav.is-stuck .logo-chip { color: var(--ink); }
.nav.is-stuck .logo-chip span { text-shadow: none; }
.nav.is-stuck .logo-chip img { filter: none; }
.nav.is-stuck .logo-chip img { height: 40px; }
.nav.is-stuck .nav-links { background: var(--surface); border-color: transparent; }
.nav.is-stuck .nav-links a { color: var(--ink-soft); }
.nav.is-stuck .nav-links a:hover { background: var(--hover); color: var(--ink); }
.nav.is-stuck .nav-links a[aria-current="page"] { color: var(--on-ink); }
.nav.is-stuck .nav-thumb { background: var(--ink); }
@keyframes nav-drop { from { transform: translate3d(0, -130%, 0); } to { transform: none; } }

/* ---------- micro-interactions ---------- */

.btn:active { transform: scale(.97); }
.btn-ico { transition: transform .4s var(--ease); }
.btn-ico svg { transition: transform .45s var(--ease); }
.btn:hover .btn-ico { transform: scale(1.08); }
.btn:hover .btn-ico svg { transform: rotate(45deg); }

.logo-chip { transition: transform .35s var(--ease); }
.logo-chip:hover { transform: translateY(-1px); }

.seg button:not([aria-pressed="true"]):hover { color: var(--ink); }
.seg button:active { transform: scale(.97); }

.pk-media video { transition: transform 1.2s var(--ease); }
.pk:hover .pk-media video { transform: scale(1.06); }
.pk-badge { transition: background-color .3s, color .3s; }
.pk:hover .pk-badge { background: var(--cta); color: var(--white); }
.pk-more {
  border-bottom: 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: color .25s, background-size .45s var(--ease);
}
.pk-more svg { transition: transform .4s var(--ease); }
.pk-more:hover { background-size: 0 1px; background-position: 100% 100%; }
.pk-more:hover svg { transform: rotate(45deg); }

.benefit:not(.is-open):hover { background: var(--surface); border-color: var(--surface); }
.benefit:not(.is-open):hover svg { transform: translateX(3px); }
.benefit button:active .benefit-t { opacity: .7; }

.pj-more { transition: background-color .25s, border-color .25s; }
.pj-more:hover { background: var(--surface); border-color: var(--surface); }

.out-val, .payback { font-variant-numeric: tabular-nums; }

input[type="range"]::-webkit-slider-thumb { transition: transform .25s var(--ease), box-shadow .25s; }
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(252,87,31,.12); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); box-shadow: 0 0 0 9px rgba(252,87,31,.16); cursor: grabbing; }

.tariff { transition: border-color .25s, box-shadow .25s; }
.tariff:focus-within { box-shadow: 0 0 0 4px rgba(252,87,31,.1); }

.foot-col a { transition: color .2s; }

.bar i { transition: top .5s var(--ease), height .5s var(--ease), background-color .4s; }

/* ---------- reduced motion: fades only ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* motion becomes a short fade; nothing is held hidden */
  .hero-video, .hero [data-in], .hero .nav[data-in], .hero h1 .line > span,
  .reveal-in, .impact-panel.reveal-in, .wordmark.reveal-in .ch,
  .flow-panel.flow-in, .flow-line.rail-draw i,
  .flow-panel.flow-in .flow-get li, .flow-panel.flow-in .flow-auth li { animation-name: fade-in; }
  .flow-badge.badge-pop { animation: none; }
  .impact-panel.reveal-in video { animation: none; }
  .nav.is-stuck { animation: nav-fade .4s ease; }
  .pk:hover .pk-media video, .pk:hover .pk-media .frame-img { transform: none; }
  .seg-thumb, .nav-thumb, .theme-knob,
  .nav-links,
  .bar i, .benefit-body, .benefit svg { transition-duration: .01s; }
  .btn:active, .seg button:active, .video-toggle:active, .social a:active, .social a:hover { transform: none; }
  .btn:hover .btn-ico, .btn:hover .btn-ico svg, .pk-more:hover svg,
  .logo-chip:hover, .benefit:not(.is-open):hover svg { transform: none; }
}
@keyframes nav-fade { from { opacity: .35; } }


/* =========================================================
   Responsive
   Three tiers, desktop-first:
     desktop  > 1024px   full multi-column layout (above)
     tablet   640–1024px top nav bar, two-column grids
     phone    < 640px    menu drawer, single-column stacks
   Type and spacing are fluid via clamp() throughout.
   ========================================================= */

/* ---------- ≤1100px: narrow desktops ---------- */
@media (max-width: 1100px) {
  .hero-card { display: none; }
  .hero-bottom { grid-template-columns: 1fr; gap: 24px; }
  .hero-copy { max-width: 560px; }

  .split { grid-template-columns: 1fr; gap: 28px; }
  .split-left { position: static; }
  .split-left .h2 br { display: none; }
  .split-left .lede { max-width: 560px; }

  .pk-head { grid-template-columns: 1fr; gap: 20px; }

  .calc-top { grid-template-columns: 1fr; gap: 16px; }
  .calc-top .lede { justify-self: start; }
  .calc-body { grid-template-columns: 1fr; }

  .stats { left: 16px; right: 16px; bottom: 16px; gap: 10px; }
  .stat { padding: 18px; }

  .foot-card { grid-template-columns: repeat(4, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}

/* ---------- ≤1024px: tablets and iPads ---------- */
@media (max-width: 1024px) {
  /* streamlined top bar: logo mark, compact links, theme switch (+ CTA from 900px) */
  .nav {
    top: 16px; left: 16px; right: 16px;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
  .nav.is-stuck { top: 8px; left: 12px; right: 12px; }
  .nav-links { justify-self: center; }
  .nav-links > a { padding: 8px 12px; font-size: 14px; }
  .nav-links a[href="#top"] { display: none; }   /* the logo already links home */
  .logo-chip span { display: none; }
  .logo-chip img, .nav.is-stuck .logo-chip img { height: 40px; }
  .video-toggle { top: 84px; right: 16px; }

  /* hero is a column: content sits in flow under the bar */
  .hero {
    height: auto;
    min-height: clamp(600px, calc(100svh - 16px), 900px);
    max-height: none;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 120px clamp(20px, 3.4vw, 44px) clamp(24px, 3.4vw, 44px);
  }
  .hero-bottom { position: relative; left: auto; right: auto; bottom: auto; }
  .tag { margin-bottom: 16px; }

  /* impact: footage on top, stats as a 2×2 grid */
  .impact-head { margin-bottom: 40px; }
  .impact-panel { height: auto; padding-top: clamp(220px, 34vw, 320px); }
  .stats {
    position: relative; z-index: 2;
    left: auto; right: auto; bottom: auto;
    grid-template-columns: 1fr 1fr;
    padding: 12px;
    gap: 10px;
  }
  .stat:nth-child(n) { height: auto; min-height: 150px; gap: 16px; }

  /* branches: copy above, HQ across the top, branches three to a row */
  .branches { grid-template-columns: 1fr; gap: 20px; }
  .branches-head p { max-width: 560px; }
  .branch-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .branch--hq { grid-column: 1 / -1; grid-row: auto; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; column-gap: 12px; }
  .branch--hq svg { grid-row: span 2; margin: 2px 0 0; }

  /* packages: two columns; an odd last card spans both with photo beside text */
  .pk-grid { grid-template-columns: 1fr 1fr; gap: 36px 16px; }
  .pk-fit { min-height: 0; }
  .pk:nth-child(odd):last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto) 1fr;
    column-gap: 20px;
  }
  .pk:nth-child(odd):last-child > * { grid-column: 2; }
  .pk:nth-child(odd):last-child .pk-media { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; align-self: start; }
  .pk:nth-child(odd):last-child .pk-more { align-self: start; }

  /* calculator: inputs side by side, results as a 2-column grid */
  .calc-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
    align-items: start;
  }
  .calc-inputs .seg { grid-column: 1 / -1; justify-self: start; }

  /* projects: two columns of cards */
  .pj-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- <900px: portrait tablets: the bar keeps the links on one line, without the CTA ---------- */
@media (max-width: 899px) {
  .nav-actions > .btn { display: none; }
}

/* ---------- ≤767px: small tablets, phones in landscape ---------- */
@media (max-width: 767px) {

  .out-cta { flex-direction: column; align-items: flex-start; }

  /* projects: the featured card stacks, photo first */
  .pj-feature { grid-template-columns: 1fr; gap: 8px; }
  .pj-feature-media { min-height: 0; aspect-ratio: 16 / 10; }
  .pj-feature-body { padding: 8px 8px 12px; }

  .foot-cta { flex-direction: column; align-items: flex-start; gap: 20px; padding: 4px 4px 28px; }
  .foot-card { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot-map { grid-template-columns: 1fr; gap: 16px; }
  .foot-map-frame { height: 260px; }
}

/* ---------- <640px: phones ---------- */
@media (max-width: 639px) {
  /* bar: logo + menu button; links, theme switch and CTA live in the drawer */
  .nav { grid-template-columns: 1fr auto; gap: 8px; }
  .menu-btn { display: grid; }
  .nav-actions > .theme-toggle { display: none; }
  .logo-chip { gap: 8px; }
  .logo-chip span { display: inline; font-size: 14px; }
  .logo-chip img, .nav.is-stuck .logo-chip img { height: 36px; }

  .branch-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .branch { padding: 14px; column-gap: 8px; }
  .branch svg { width: 20px; height: 20px; }
  .branch--hq { padding: 16px; }
  .branch--hq strong { font-size: 22px; }

  .nav-links {
    position: absolute;
    top: calc(100% + 8px); left: 0; right: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px -20px rgb(var(--shade) / .45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* closed: invisible and unfocusable; opens with a short fade + drop */
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, -8px, 0) scale(.98);
    transform-origin: top right;
    transition: opacity .2s ease, transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav.is-open .nav-links {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s ease, transform .3s var(--ease), visibility 0s;
  }
  .nav-thumb { display: none; }

  .nav .nav-links > a,
  .nav.is-stuck .nav-links > a {
    display: flex; align-items: center;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 16px;
    color: var(--ink-soft);
  }
  .nav .nav-links > a[href="#top"] { display: flex; }
  .nav .nav-links > a:hover,
  .nav.is-stuck .nav-links > a:hover { background: var(--paper); color: var(--ink); }
  .nav .nav-links > a[aria-current="page"],
  .nav.is-stuck .nav-links > a[aria-current="page"] { background: var(--surface); color: var(--ink); }
  .nav.is-stuck .nav-links { background: var(--card); border-color: var(--line); }

  .nav-drawer-foot {
    display: grid; gap: 10px;
    margin-top: 6px;
    padding: 12px 6px 6px;
    border-top: 1px solid var(--line);
  }
  .drawer-row {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 46px;
    padding: 0 8px;
    font-size: 16px;
    color: var(--ink-soft);
  }
  .nav-links .theme-toggle { color: var(--muted); background: var(--surface); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-links .theme-toggle .theme-knob { background: var(--ink); }
  .nav-links .theme-toggle[aria-checked="false"] .i-sun,
  .nav-links .theme-toggle[aria-checked="true"] .i-moon { color: var(--on-ink); }
  .drawer-cta { height: 48px; justify-content: space-between; }

  /* hero */
  .hero { min-height: max(600px, calc(100svh - 8px)); max-height: none; padding: 104px 16px 20px; }
  .hero-copy p { font-size: 15px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* segmented controls span the width; labels may wrap to two lines */
  .seg { display: flex; width: 100%; }
  .seg button {
    flex: 1 1 0;
    min-height: 44px; height: auto;
    padding: 6px 10px;
    white-space: normal; line-height: 1.3; text-align: center;
  }

  /* impact stats: one column, each a compact row */
  .impact-head { margin-bottom: 32px; }
  .impact-panel { padding-top: 200px; }
  .stats { grid-template-columns: 1fr; gap: 8px; padding: 8px; }
  .stat:nth-child(n) {
    flex-direction: row; align-items: center; gap: 16px;
    min-height: 0;
    padding: 14px 16px;
  }
  .stat-num { flex: none; min-width: 4.2ch; font-size: 40px; }
  .stat-label { font-size: 14px; line-height: 1.5; }

  /* packages: one column */
  .pk-grid { grid-template-columns: 1fr; gap: 40px; }
  .pk:nth-child(odd):last-child { display: flex; grid-column: auto; }
  .pk:nth-child(odd):last-child .pk-media { margin-bottom: 16px; }
  .pk-media { aspect-ratio: 16 / 9; }
  .pk-specs dd { white-space: normal; }

  .benefit button { grid-template-columns: 1fr 20px; padding: 14px 16px; }
  .benefit-body p { padding: 0 16px 16px; }

  /* calculator: stacked */
  .calc-inputs { display: flex; flex-direction: column; padding: 20px; gap: 26px; }
  .field-val { font-size: 28px; }
  input[type="range"] { --thumb: 28px; height: 40px; }
  .calc-out { grid-template-columns: 1fr; gap: 12px; }
  .out-hero { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .out-card { padding: 18px 20px; }
  .out-cta { padding: 18px 20px; }
  .out-cta .btn { white-space: normal; height: auto; min-height: 46px; padding-top: 8px; padding-bottom: 8px; }

  /* projects: one column, wider photos */
  .award { max-width: none; }
  .pj-bar { margin-top: 24px; }
  .pj-count { width: 100%; }
  .pj-grid { grid-template-columns: 1fr; gap: 36px; }
  .pj-media { aspect-ratio: 16 / 10; }
  .logo-wall { margin-top: 44px; }
  .logos { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .logos li { height: 72px; padding: 12px 16px; }
  .logos--brands li { height: 64px; }

  .foot-legal { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .media-frame.is-loading::after { animation: none; }
  .flow-line i, .flow-tab, .flow-badge, .flow-letter, .flow-prev { transition-duration: .01s; }
  .flow-tab[aria-selected="true"], .flow-tab:hover:not([aria-selected="true"]), .is-interactive .flow-tab:active,
  .flow-tab:hover .flow-badge, .flow-tab:hover .flow-letter { transform: none; }
  .nav-links, .nav.is-open .nav-links { transform: none; transition-duration: .01s; }
  .social a { transform: none; }
}