/* =========================================================
   EcoWater — shared design system (light, maison style)
   Ground ivory · ink #201E1F · accent logo teal #019390
   ========================================================= */

:root {
  --ivory: #fbfaf7;
  --sand: #f3efe7;
  --white: #ffffff;
  --ink: #201e1f;
  --ink-soft: #5c5856;
  --teal: #019390;
  --teal-700: #016b69;          /* teal for small text on light grounds (AA) */
  --teal-900: #0d3332;          /* deep field */
  --teal-100: #e3f1f0;
  --line: rgba(32, 30, 31, 0.12);

  --font-serif: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --font-sans: "Jost", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 56px);
  --header-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
strong { font-weight: 500; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
::selection { background: var(--teal); color: var(--white); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.05;
  margin: 0 0 0.45em;
  color: var(--ink);
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(3.4rem, 8.4vw, 8.6rem); font-weight: 300; line-height: 0.92; letter-spacing: -0.03em; }
h2 { font-size: clamp(2.4rem, 4.8vw, 4.4rem); font-weight: 300; }
h3 { font-size: clamp(1.5rem, 2vw, 1.9rem); }
h1 em, h2 em { font-style: italic; color: var(--teal); }
p { margin: 0 0 1em; }

:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { letter-spacing: 0.02em; font-weight: 500; line-height: 1.2; }
:lang(zh) body { font-weight: 400; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.section { padding: clamp(96px, 13vw, 200px) 0; position: relative; }
.section--white { background: var(--white); }
.section--sand { background: var(--sand); }
.section--teal { background: var(--teal-900); color: rgba(255, 255, 255, 0.82); }
.section--teal h2 { color: var(--white); }

/* Small tracked label: a deliberate maison detail */
.eyebrow {
  display: block;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 24px;
}

.lead { font-size: clamp(1.06rem, 1.3vw, 1.22rem); color: var(--ink-soft); max-width: 54ch; }

.section-head { max-width: 760px; margin-bottom: clamp(56px, 7vw, 96px); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  --btn-border: var(--ink);
  --btn-fill: var(--teal);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 34px;
  border: 1px solid var(--btn-border);
  border-radius: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease), border-color 0.5s, transform 0.2s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn:hover { border-color: var(--btn-fill); color: var(--white); }
.btn:active { transform: scale(0.98); }
.btn svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: rgba(32, 30, 31, 0.4); }
.btn--light { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-border: var(--white); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--teal);
  padding-bottom: 6px;
}
.link-arrow svg { width: 15px; transition: transform 0.4s var(--ease); }
.link-arrow:hover svg, a:hover > .link-arrow svg { transform: translateX(5px); }

/* ---------- Header: full-width bar ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(251, 250, 247, 0.94);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s, background 0.4s, transform 0.5s var(--ease);
}
.site-header.is-scrolled { background: var(--ivory); border-bottom-color: var(--line); }

.bar {
  width: min(1320px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand { display: block; flex-shrink: 0; }
.brand img { height: 24px; width: auto; }

.main-nav { flex: 1; display: flex; align-items: center; justify-content: space-evenly; }
.main-nav a {
  position: relative;
  padding: 6px 4px;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.3s;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 18px;
  height: 1px;
  margin-left: -9px;
  background: var(--teal);
  transform: scaleX(0);
  transition: transform 0.4s var(--ease);
}
.main-nav a:hover, .main-nav a.is-active { color: var(--ink); }
.main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.lang-switch { display: flex; align-items: center; }
.lang-switch button {
  border: 0;
  background: none;
  padding: 6px 7px;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.3s;
}
.lang-switch button.is-active { color: var(--ink); font-weight: 500; }
.lang-switch button:hover { color: var(--teal-700); }

.icon-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: color 0.3s;
}
.icon-btn:hover { color: var(--teal-700); }
.icon-btn svg { width: 17px; height: 17px; }

/* Search panel drops down from the bar */
.search-panel {
  position: fixed;
  top: var(--header-offset, var(--header-h));
  left: 0;
  right: 0;
  z-index: 95;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  padding: 34px 0 44px;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), visibility 0.4s;
}
body.search-open .search-panel { opacity: 1; transform: none; visibility: visible; }
.search-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(32, 30, 31, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
body.search-open .search-scrim { opacity: 1; visibility: visible; }
.search-inner { width: min(720px, 100% - 48px); margin-inline: auto; }
.search-field { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.search-field svg { width: 20px; height: 20px; color: var(--ink-soft); flex-shrink: 0; }
.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink);
}
.search-label { margin: 28px 0 10px; font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft); }
.search-results { list-style: none; padding: 0; margin: 0; }
.search-results a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  color: var(--ink);
  transition: color 0.3s, padding 0.3s var(--ease);
}
.search-results a::before { content: "→"; color: var(--teal); }
.search-results a:hover { color: var(--teal-700); padding-left: 6px; }
.search-empty { color: var(--ink-soft); padding: 9px 0; }

/* ---------- Hero: words left, the villa right ---------- */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--ivory);
}
.hero-text {
  padding: calc(var(--header-h) + clamp(48px, 8vh, 110px)) var(--gutter) clamp(40px, 6vh, 72px);
  padding-left: max(var(--gutter), (100vw - 1320px) / 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero h1 { font-size: clamp(3.4rem, 6.8vw, 8rem); margin-bottom: 36px; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero .lead { color: var(--ink-soft); margin-bottom: 44px; max-width: 42ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .btn { padding-inline: 26px; }
.hero-facts dt, .stat .num, .pk-flow, .dealer-tiers dt { font-variant-numeric: lining-nums; }

.hero-facts {
  display: flex;
  gap: clamp(28px, 4vw, 56px);
  margin: clamp(40px, 7vh, 88px) 0 0;
}
.hero-facts div { margin: 0; }
.hero-facts dt { font-family: var(--font-serif); font-size: clamp(1.9rem, 2.6vw, 2.5rem); font-weight: 400; line-height: 1; color: var(--ink); }
.hero-facts dd { margin: 10px 0 0; font-size: 0.86rem; color: var(--ink-soft); }

.hero-media { position: relative; overflow: hidden; min-height: 70svh; background: var(--sand); }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }

/* ---------- Intro split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 8vw, 128px); align-items: center; }
.intro-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sand); }
.intro-media img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 50% 50%; }

.check-list { list-style: none; padding: 0; margin: 36px 0 48px; display: grid; gap: 18px; }
.check-list li { display: flex; gap: 18px; align-items: baseline; color: var(--ink); }
.check-list .tick { width: 8px; height: 8px; background: var(--teal); flex-shrink: 0; transform: translateY(-2px); }

/* ---------- Stats on the deep teal field ---------- */
.section--teal h2 { max-width: 14ch; margin-bottom: clamp(56px, 7vw, 96px); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat .num { font-family: var(--font-serif); font-size: clamp(4rem, 8vw, 7.5rem); font-weight: 300; line-height: 0.9; color: var(--white); letter-spacing: -0.03em; }
.stat .num sup { font-size: 0.4em; color: #5fd0cc; margin-left: 4px; vertical-align: top; position: relative; top: 0.3em; }
.stat p { margin: 18px 0 0; font-size: 1rem; max-width: 18ch; }

/* ---------- Products ---------- */
.product-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.product { display: flex; flex-direction: column; color: var(--ink); }
.product-img {
  aspect-ratio: 4 / 5;
  background: var(--white);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 32px;
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
.product-img img { width: 78%; height: 86%; object-fit: contain; transition: transform 1.1s var(--ease); }
.product:hover .product-img img { transform: scale(1.05); }
.product-img--photo { position: relative; outline: 0; background: var(--sand); }
.product-img--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The RO photo is a tall 9:16 frame with the unit in its lower half: anchor the crop low so the whole purifier shows */
img[src*="lifestyle/ro.jpg"] { object-position: 50% 82% !important; }
.product .tag { font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal-700); margin-bottom: 10px; }
.product p { color: var(--ink-soft); flex: 1; }
.product .link-arrow { align-self: flex-start; margin-top: 12px; }

/* ---------- Home packages (the live picker) ---------- */
.packages { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 8vw, 128px); align-items: center; }
.pk-picker { background: var(--white); padding: clamp(32px, 5vw, 64px); }
.pk-q { font-size: 1rem; color: var(--ink-soft); margin-bottom: 18px; }
.pk-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 44px; }
.pk-options button {
  padding: 18px 8px;
  border: 1px solid var(--line);
  background: var(--ivory);
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--ink);
  transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.2s var(--ease);
}
.pk-options button:hover { border-color: var(--teal); }
.pk-options button:active { transform: scale(0.97); }
.pk-options button[aria-checked="true"] { background: var(--teal); border-color: var(--teal); color: var(--white); }
.pk-flow { font-family: var(--font-serif); font-size: clamp(3.4rem, 6vw, 5.2rem); font-weight: 300; line-height: 1; color: var(--ink); margin-bottom: 18px; letter-spacing: -0.02em; }
.pk-flow small { font-family: var(--font-sans); font-size: 1rem; color: var(--ink-soft); letter-spacing: 0; }
.pk-result p { color: var(--ink-soft); margin-bottom: 28px; min-height: 3.2em; }

/* ---------- Process ---------- */
.process { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); counter-reset: step; }
.process-step { border-top: 1px solid var(--ink); padding-top: 28px; }
.process-step h3 { margin-bottom: 14px; }
.process-step p { color: var(--ink-soft); font-size: 1rem; }

/* ---------- Water quiz ---------- */
.quiz { display: grid; grid-template-columns: 0.9fr 1.1fr; background: var(--ivory); }
.quiz-aside { position: relative; overflow: hidden; color: var(--white); display: flex; align-items: flex-end; min-height: 520px; }
.quiz-aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quiz-aside::after { content: ""; position: absolute; inset: 0; background: rgba(13, 51, 50, 0.62); }
.quiz-aside-text { position: relative; z-index: 1; padding: clamp(32px, 5vw, 64px); }
.quiz-aside h2 { color: var(--white); font-size: clamp(2rem, 3.4vw, 3rem); }
.quiz-aside .eyebrow { color: #8fe0dc; }
.quiz-aside p { color: rgba(255, 255, 255, 0.88); margin: 0; }
.quiz-body { padding: clamp(32px, 5vw, 64px); min-height: 440px; display: flex; flex-direction: column; }
.quiz-progress { height: 2px; background: var(--line); margin-bottom: 40px; }
.quiz-progress span { display: block; height: 100%; width: 0; background: var(--teal); transition: width 0.6s var(--ease); }
.quiz-step { display: none; animation: fadeUp 0.6s var(--ease); }
.quiz-step.is-active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.quiz-step .q-count { font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal-700); }
.quiz-step h3 { margin: 12px 0 26px; }
.quiz-options { display: grid; gap: 10px; }
.quiz-options button {
  text-align: left;
  padding: 18px 22px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.quiz-options button:hover { border-color: var(--teal); transform: translateX(4px); }
.quiz-options button::after { content: "→"; color: var(--teal); }
.quiz-result .result-name { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 400; color: var(--ink); margin: 8px 0 14px; line-height: 1.05; }
.quiz-result p { color: var(--ink-soft); }
.quiz-result .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- Testimonials ---------- */
.testimonials { max-width: 980px; }
.testimonial { display: none; animation: fadeUp 0.8s var(--ease); }
.testimonial.is-active { display: block; }
.testimonial blockquote {
  margin: 0 0 34px;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 300;
  line-height: 1.3;
  color: var(--ink);
}
.testimonial .who strong { display: block; font-weight: 500; }
.testimonial .who span { color: var(--ink-soft); }
.quote-mark { font-family: var(--font-serif); font-size: 7rem; line-height: 0.6; color: var(--teal); display: block; margin-bottom: 18px; }
.t-dots { display: flex; gap: 10px; margin-top: 42px; }
.t-dots button { width: 32px; height: 24px; padding: 0; border: 0; background: linear-gradient(var(--line), var(--line)) center / 100% 2px no-repeat; transition: width 0.4s var(--ease); }
.t-dots button.is-active { background-image: linear-gradient(var(--teal), var(--teal)); width: 56px; }

/* ---------- Dealer band ---------- */
.dealer-band { position: relative; overflow: hidden; background: var(--teal-900); color: rgba(255, 255, 255, 0.85); padding: clamp(110px, 14vw, 210px) 0; isolation: isolate; }
.dealer-band > img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; z-index: -2; }
.dealer-band::after { content: ""; position: absolute; inset: 0; background: rgba(13, 51, 50, 0.78); z-index: -1; }
.dealer-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: end; }
.dealer-band h2 { color: var(--white); }
.dealer-band .eyebrow { color: #8fe0dc; }
.dealer-band .lead { color: rgba(255, 255, 255, 0.85); margin: 0; }
.dealer-side { display: grid; gap: 40px; justify-items: start; }
.dealer-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 0; width: 100%; }
.dealer-tiers dt { font-family: var(--font-serif); font-size: clamp(1.7rem, 2.4vw, 2.3rem); font-weight: 300; line-height: 1.1; color: var(--white); }
.dealer-tiers dd { margin: 12px 0 0; }

/* ---------- About: hero ---------- */
.about-hero { background: var(--sand); padding: calc(var(--header-h) + clamp(64px, 10vh, 120px)) 0 clamp(80px, 10vw, 140px); }
.about-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.about-hero h1 { font-size: clamp(3rem, 5.4vw, 6rem); margin-bottom: 32px; }
.about-hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.founder-card { margin: 0; width: 100%; max-width: 640px; justify-self: end; }
.founder-card img { width: 100%; height: auto; display: block; background: #2a2724; box-shadow: 0 30px 60px -40px rgba(32, 30, 31, 0.6); }
.founder-card figcaption { margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--teal); font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- About: story ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.story h2 { max-width: 12ch; }
.story-seal { width: clamp(150px, 16vw, 210px); height: auto; margin-top: clamp(28px, 4vw, 48px); mix-blend-mode: multiply; opacity: 0.9; }
.story-text p { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.65; }
.story-text p + p { color: var(--ink-soft); }

/* ---------- About: timeline ---------- */
.timeline { background: var(--ivory); padding: clamp(40px, 6vw, 80px) 0 clamp(96px, 12vw, 180px); overflow: hidden; }
.timeline-pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.timeline-head h2 { max-width: 16ch; margin-bottom: clamp(48px, 6vw, 80px); }
.timeline-track {
  list-style: none;
  margin: 0;
  padding: 0 max(var(--gutter), (100vw - 1240px) / 2);
  display: flex;
  gap: clamp(32px, 4vw, 64px);
  overflow-x: auto;
  scrollbar-width: none;
}
.timeline-track::-webkit-scrollbar { display: none; }
.timeline-track li { flex: 0 0 clamp(240px, 24vw, 320px); border-top: 1px solid var(--ink); padding-top: 28px; }
.timeline-track .tl-year { display: block; font-family: var(--font-serif); font-size: clamp(3.4rem, 6vw, 5.6rem); font-weight: 300; line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: lining-nums; margin-bottom: 22px; }
.timeline-track p { color: var(--ink-soft); margin: 0; }
.timeline-track .tl-now { border-top-color: var(--teal); }
.timeline-track .tl-now .tl-year { color: var(--teal); }
.timeline-progress { width: min(1240px, 100% - 2 * var(--gutter)); margin: 56px auto 0; height: 2px; background: var(--line); display: none; }
.timeline-progress span { display: block; height: 100%; background: var(--teal); transform: scaleX(0); transform-origin: left; }
.is-pinned .timeline-track { overflow: visible; }
.is-pinned .timeline-progress { display: block; }

/* ---------- About: strength, ownership, certificates ---------- */
.stats--5 { grid-template-columns: repeat(5, 1fr); }
.stats--5 .num { font-size: clamp(3.4rem, 6vw, 6rem); }
.owner, .certs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.owner-quote blockquote { margin: 0 0 24px; font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 300; line-height: 1.1; color: var(--ink); }
.owner-quote figcaption { color: var(--ink-soft); }
/* Certification marks: equal tiles, logos optically balanced by height */
.cert-logos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cert-logos li { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; padding: 24px 12px 18px; background: var(--white); text-align: center; }
.section--white .cert-logos li { background: var(--ivory); }
.cert-logos img { height: 64px; width: auto; max-width: 100%; object-fit: contain; }
.cert-logos img[src*="iso"], .cert-logos img[src*="ul"] { height: 48px; margin-block: 8px; }
.cert-logos span { font-size: 0.78rem; line-height: 1.3; color: var(--ink-soft); }
.cert-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.cert-list li { padding: 20px 0; border-top: 1px solid var(--line); }
.cert-list strong { display: block; font-family: var(--font-serif); font-size: 1.9rem; font-weight: 400; line-height: 1; margin-bottom: 6px; }
.cert-list span { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- About: Indonesia ---------- */
.indonesia { background: var(--teal-900); color: rgba(255, 255, 255, 0.85); padding-bottom: clamp(96px, 12vw, 180px); }
/* Studio lineup of the current range: shown whole on wide screens, centred crop on phones */
.indonesia-media { position: relative; overflow: hidden; aspect-ratio: 2000 / 860; min-height: 300px; max-height: 760px; width: 100%; background: #efe9df; }
.indonesia-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.hero-media img[src*="lineup-current"] { object-position: 47% 100%; }
.indonesia-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 7vw, 120px); padding-top: clamp(72px, 9vw, 140px); }
.indonesia h2, .indonesia h3 { color: var(--white); }
.indonesia .eyebrow { color: #8fe0dc; }
.indonesia .lead { color: rgba(255, 255, 255, 0.85); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 48px 40px; }
.steps li { border-top: 1px solid rgba(255, 255, 255, 0.35); padding-top: 24px; }
.steps p { margin: 0; }

/* ---------- About: close ---------- */
.about-close-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: end; }
.about-close .lead { margin-bottom: 36px; }

/* ---------- Products ---------- */
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--white); --btn-border: rgba(255, 255, 255, 0.5); --btn-fill: var(--white); }
.btn--ghost:hover { color: var(--ink); }

.prod-hero { background: var(--ivory); padding-top: calc(var(--header-h) + clamp(56px, 9vh, 110px)); }
.prod-hero-inner { display: grid; gap: clamp(40px, 6vw, 72px); }
.prod-hero h1 { font-size: clamp(3.2rem, 7vw, 7.4rem); margin-bottom: 32px; }
.prod-hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.prod-hero .lead { max-width: 44ch; }
.prod-hero-inner > div { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: clamp(40px, 6vw, 96px); align-items: end; }
.prod-hero-inner > div > .eyebrow { grid-column: 1 / -1; }
.prod-hero-inner > div > h1 { margin-bottom: 0; }
.prod-hero-inner > div > .lead { margin-bottom: 0.6em; }
.prod-hero--split { padding-bottom: clamp(64px, 8vw, 110px); }
.prod-hero--split .prod-hero-inner { grid-template-columns: 1.15fr 0.85fr; align-items: end; }
.prod-hero--split .prod-hero-inner > div { grid-template-columns: 1fr; }
.prod-hero--split .prod-hero-inner > div > h1 { margin-bottom: 32px; }
.prod-hero--split .prod-hero-media { aspect-ratio: 4 / 5; max-height: 78svh; }
.prod-hero--split .prod-hero-media img { object-position: 50% 50%; }
.prod-hero-media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-height: 78svh; background: var(--sand); }
.prod-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

.header-hidden .site-header { transform: translateY(-100%); }
.cat-nav { position: sticky; top: var(--header-h); z-index: 60; transition: top 0.5s var(--ease); background: var(--ivory); border-bottom: 1px solid var(--line); }
.header-hidden .cat-nav { top: 0; }
.cat-nav-inner { display: flex; gap: clamp(20px, 4vw, 56px); overflow-x: auto; scrollbar-width: none; }
.cat-nav-inner::-webkit-scrollbar { display: none; }
.cat-nav a { flex-shrink: 0; padding: 20px 0 18px; font-size: 0.95rem; color: var(--ink-soft); border-bottom: 2px solid transparent; transition: color 0.3s, border-color 0.3s; white-space: nowrap; }
.cat-nav a span:first-child { font-family: var(--font-serif); font-size: 1.15rem; color: var(--teal-700); margin-right: 6px; }
.cat-nav a:hover, .cat-nav a.is-active { color: var(--ink); border-bottom-color: var(--teal); }

.category { padding: clamp(96px, 12vw, 180px) 0; background: var(--ivory); scroll-margin-top: 60px; }
.category--white { background: var(--white); }
/* Photo column stays in view; text and model cards scroll beside it. Sides alternate per category. */
.category-inner { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.category--flip .category-inner { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.category--flip .category-img { order: 2; }
.category-img { position: sticky; top: 140px; overflow: hidden; aspect-ratio: 4 / 5; max-height: calc(100svh - 180px); background: var(--sand); }
.category-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.category-body > h2 { margin-bottom: 20px; }
.category-body > p { font-size: 1.1rem; color: var(--ink-soft); max-width: 52ch; }
.feature-list { list-style: none; padding: 0; margin: 24px 0 40px; display: grid; gap: 12px; }
.feature-list li { padding-left: 22px; position: relative; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; background: var(--teal); }

.models { display: grid; gap: 16px; }
.model { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: center; padding: clamp(20px, 2.4vw, 32px); background: var(--white); }
.category--white .model { background: var(--ivory); }
.model-thumb { display: block; width: 148px; height: 184px; padding: 12px; object-fit: contain; background: var(--white); }
.model-thumb--empty { background: var(--white) url("../images/ecowater-mark.png") center / 56px no-repeat; opacity: 0.55; }
.model h3 { font-size: clamp(1.7rem, 2.2vw, 2.1rem); margin-bottom: 6px; font-variant-numeric: lining-nums; }
.model h3 small { font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.02em; color: var(--teal-700); margin-left: 8px; }
.model p { color: var(--ink-soft); margin-bottom: 18px; }
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 0; }
.model .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.model .spec div:last-child { grid-column: 1 / -1; }
.spec dt { font-size: 0.8rem; color: var(--ink-soft); }
.spec dd { margin: 2px 0 0; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }
.model .spec div:last-child dd { white-space: nowrap; }

/* ---------- Portfolio ---------- */
.pf-hero { padding-bottom: clamp(56px, 7vw, 96px); }
.pf-filter button {
  flex-shrink: 0;
  padding: 20px 0 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s;
}
.pf-filter button:hover, .pf-filter button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--teal); }
.pf-section { padding-top: clamp(56px, 7vw, 96px); }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(56px, 7vw, 104px) clamp(24px, 4vw, 56px); }
.project[hidden] { display: none; }
.project-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand); margin-bottom: 24px; }
.project-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.project:hover .project-img img { transform: scale(1.04); }
.project--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.project--wide .project-img { aspect-ratio: 16 / 10; margin-bottom: 0; }
.project-type { font-size: 0.9rem; color: var(--teal-700); margin-bottom: 8px; }
.project h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); margin-bottom: 10px; }
.project-place { color: var(--ink-soft); margin-bottom: 16px; }
.project-systems { font-size: 0.92rem; color: var(--ink); margin: 0; font-variant-numeric: lining-nums; }
.project-systems span { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 2px; }
.seg-list strong { font-size: 1.6rem; }

/* ---------- Company profile ---------- */
.cp-hero { padding-bottom: clamp(64px, 8vw, 110px); }
.cp-hero .lead { margin-bottom: 28px; }
.cp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.fact-sheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(24px, 3vw, 48px); margin: 0; }
.fact-sheet div { padding: 24px 0 28px; border-top: 1px solid var(--line); }
.fact-sheet dt { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 8px; }
.fact-sheet dd { margin: 0; font-family: var(--font-serif); font-size: 1.45rem; line-height: 1.25; color: var(--ink); }
.cp-glance h2 { margin-bottom: clamp(40px, 5vw, 64px); }

.group-chain { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.group-chain li { position: relative; padding: 0 0 36px 40px; }
.group-chain li::before { content: ""; position: absolute; left: 5px; top: 0.7em; bottom: -0.3em; width: 1px; background: var(--line); }
.group-chain li:last-child::before { display: none; }
.group-chain li::after { content: ""; position: absolute; left: 0; top: 0.45em; width: 11px; height: 11px; border: 1px solid var(--ink); background: var(--ivory); border-radius: 50%; }
.group-chain li.is-us::after { background: var(--teal); border-color: var(--teal); }
.group-chain strong { display: block; font-family: var(--font-serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 400; line-height: 1.15; }
.group-chain span { color: var(--ink-soft); }
.group-chain .is-us strong { color: var(--teal-700); }

.cp-list { list-style: none; padding: 0; margin: 32px 0 0; }
.cp-list li { border-top: 1px solid var(--line); }
.cp-list li:last-child { border-bottom: 1px solid var(--line); }
.cp-list li > a, .cp-list li > strong { display: block; padding: 20px 0; }
.cp-list strong { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 400; }
.cp-list a strong { display: block; transition: color 0.3s; }
.cp-list a span { font-size: 0.9rem; color: var(--ink-soft); }
.cp-list a:hover strong { color: var(--teal-700); }

.cp-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px; }
.cp-person { font-family: var(--font-serif); font-size: 2rem; line-height: 1.1; margin-bottom: 6px; }
.cp-contacts p:not(.cp-person) { color: var(--ink-soft); margin: 0; }
.cp-channels { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
.cp-channels a { overflow-wrap: anywhere; }
.cp-channels a:hover { color: var(--teal-700); }

/* ---------- Dealer ---------- */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(48px, 6vw, 80px); }
.benefits > div { border-top: 1px solid var(--ink); padding-top: 28px; }
.benefits p { color: var(--ink-soft); }
.section--white > .container > h2 { max-width: 20ch; }

.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.tier { background: var(--white); padding: clamp(32px, 5vw, 64px); }
.tier--dark { background: var(--teal-900); color: rgba(255, 255, 255, 0.85); }
.tier--dark h3 { color: var(--white); }
.tier--dark .feature-list li::before { background: #5fd0cc; }
.tier .feature-list { margin-bottom: 0; }
.tier-tag { display: inline-block; font-size: 0.85rem; color: var(--teal-700); border: 1px solid currentColor; padding: 6px 14px; margin-bottom: 28px; }
.tier--dark .tier-tag { color: #8fe0dc; }
.tier h3 { font-size: clamp(2rem, 3.2vw, 2.8rem); }

.est-note { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }

.process--5 { grid-template-columns: repeat(5, 1fr); }
.handle-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.handle-cols h3 { color: var(--white); }
.section--teal .feature-list li::before { background: #5fd0cc; }

.form-direct a { border-bottom: 1px solid var(--teal); }
.apply-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.apply-form .span-2 { grid-column: 1 / -1; }
.apply-form label { display: grid; gap: 8px; font-size: 0.9rem; color: var(--ink-soft); }
.apply-form input, .apply-form select, .apply-form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 16px;
  transition: border-color 0.3s;
}
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus { outline: none; border-color: var(--teal); }
.apply-form .btn { justify-self: start; }
.form-error { color: #b42318; margin: 0; }

/* ---------- Contact ---------- */
.ct-hero { padding-bottom: clamp(80px, 10vw, 140px); }
.ct-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.ct-hero h1 { font-size: clamp(3.2rem, 6.4vw, 6.6rem); }
.ct-channels { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 0; }
.ct-channels li { display: grid; grid-template-columns: 7rem 1fr; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.ct-channels span { font-size: 0.85rem; color: var(--ink-soft); }
.ct-channels a { font-family: var(--font-serif); font-size: 1.5rem; font-variant-numeric: lining-nums; overflow-wrap: anywhere; transition: color 0.3s; }
.ct-channels a:hover { color: var(--teal-700); }
.booking { background: var(--white); padding: clamp(28px, 4vw, 48px); }
.booking h2 { font-size: clamp(1.9rem, 2.6vw, 2.4rem); margin-bottom: 4px; }
.booking .btn { justify-self: stretch; }

.ct-address { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.3; max-width: 22ch; }
.ct-social { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 10px; }
.ct-social a { color: var(--ink-soft); transition: color 0.3s; }
.ct-social a:hover { color: var(--teal-700); }
.ct-map { position: relative; aspect-ratio: 4 / 3; background: var(--sand); overflow: hidden; }
.ct-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.85) contrast(1.05); }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-family: var(--font-serif); font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--font-sans); font-size: 1.5rem; font-weight: 300; color: var(--teal); transition: transform 0.4s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--teal-700); }
.faq details p { color: var(--ink-soft); margin: 0 0 24px; max-width: 60ch; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; padding: calc(var(--header-h) + 100px) 0 90px; background: var(--sand); overflow: hidden; }
.page-hero h1 { font-size: clamp(2.8rem, 6vw, 5.4rem); }
.breadcrumb { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--teal-700); }

/* ---------- Footer ---------- */
.site-footer { background: var(--sand); color: var(--ink-soft); padding: 110px 0 36px; font-size: 0.96rem; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 48px; }
.footer-grid h4 { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--teal-700); margin-bottom: 24px; font-weight: 400; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-grid a { color: var(--ink); transition: color 0.3s; overflow-wrap: anywhere; }
.footer-grid a:hover { color: var(--teal-700); }
.footer-brand img { height: 28px; width: auto; margin-bottom: 24px; }
.footer-brand p { max-width: 34ch; }
.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(32, 30, 31, 0.2); display: grid; place-items: center; transition: background 0.3s, border-color 0.3s, color 0.3s; }
.socials a:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.socials svg { width: 16px; height: 16px; }
.footer-name {
  margin: 96px 0 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(5rem, 21vw, 21rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--ink);
  white-space: nowrap;
}
.footer-bottom { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 0.84rem; }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px -10px rgba(37, 211, 102, 0.6);
  transition: transform 0.4s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 27px; height: 27px; }

/* Before motion.js runs, hide what it will bring in (removed if GSAP fails to load) */
.js .reveal, .js [data-hero-fade], .js [data-hero-fact] { opacity: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .main-nav a { letter-spacing: 0.14em; font-size: 0.66rem; }
}

/* Below this width the menu moves to its own row and scrolls sideways — no hamburger */
@media (max-width: 1040px) {
  :root { --header-h: 92px; }
  .site-header { --nav-row: 44px; }
  .bar { flex-wrap: wrap; height: auto; row-gap: 0; }
  .brand, .header-actions { height: 48px; display: flex; align-items: center; }
  .main-nav {
    order: 3;
    flex: 0 0 calc(100% + 2 * var(--gutter));
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    height: var(--nav-row);
    justify-content: flex-start;
    gap: 26px;
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--line);
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a:last-child { padding-right: var(--gutter); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats, .stats--5 { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .timeline-pin { min-height: 0; }
  .timeline-track { flex-direction: column; overflow: visible; padding: 0 var(--gutter); gap: 40px; }
  .timeline-track li { flex: none; display: grid; grid-template-columns: 7.5rem 1fr; gap: 20px; align-items: baseline; }
  .timeline-track .tl-year { font-size: 3rem; margin: 0; }
  .process { grid-template-columns: 1fr 1fr; row-gap: 48px; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-text { padding: 40px var(--gutter) 56px; }
  .hero-media { order: -1; min-height: 0; height: 38svh; margin-top: var(--header-h); }
  .split, .packages, .quiz, .dealer-inner, .about-hero-inner, .story, .owner, .certs, .indonesia-inner, .about-close-inner { grid-template-columns: 1fr; }
  .founder-card { justify-self: start; max-width: none; }
  .category-inner, .category--flip .category-inner { grid-template-columns: 1fr; }
  .pf-grid, .project--wide, .cp-split { grid-template-columns: 1fr; }
  .fact-sheet { grid-template-columns: 1fr 1fr; }
  .benefits, .tiers, .ct-top { grid-template-columns: 1fr; }
  .process--5 { grid-template-columns: 1fr 1fr; }
  .project--wide .project-img { aspect-ratio: 4 / 3; }
  .category-img, .category--flip .category-img { position: relative; top: 0; order: 0; aspect-ratio: 4 / 3; max-height: none; }
  .prod-hero-media { aspect-ratio: 4 / 3; }
  .prod-hero-inner > div, .prod-hero--split .prod-hero-inner { grid-template-columns: 1fr; }
  .prod-hero-inner > div > h1 { margin-bottom: 28px; }
  .steps { grid-template-columns: 1fr; }
  .product-row { grid-template-columns: 1fr; max-width: 520px; }
  .quiz-aside { min-height: 360px; }
}

@media (max-width: 560px) {
  .brand img { height: 20px; }
  .lang-switch button { padding: 6px 5px; }
  .footer-grid, .process { grid-template-columns: 1fr; }
  .hero-facts { gap: 24px; }
  .hero-actions .btn { width: 100%; }
  .stat .num { font-size: 4rem; }
  .cert-list { grid-template-columns: 1fr; }
  .cert-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model { grid-template-columns: 1fr; gap: 16px; }
  .fact-sheet, .cp-contacts, .cp-channels, .handle-cols, .apply-form { grid-template-columns: 1fr; }
  .apply-form .btn { justify-self: stretch; }
  .ct-channels li { grid-template-columns: 1fr; gap: 2px; }
  .ct-channels a { font-size: 1.3rem; }
  .model-thumb { width: 100%; height: 200px; }
  .timeline-track li { grid-template-columns: 5.5rem 1fr; }
  .timeline-track .tl-year { font-size: 2.4rem; }
  .dealer-tiers { grid-template-columns: 1fr 1fr; gap: 20px; }
  .wa-float { right: 16px; bottom: 16px; }
}

/* ---------- Print (company profile "save as PDF", and any page) ---------- */
@media print {
  @page { margin: 16mm 14mm; }
  .site-header, .search-panel, .search-scrim, .site-footer, .wa-float, .cat-nav, .no-print { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-size: 11pt; background: var(--white); }
  .reveal, [data-hero-fade], [data-hero-fact], [data-hero-title] { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .section, .prod-hero, .cp-hero { padding: 28px 0 !important; }
  .container { width: 100%; }
  h1 { font-size: 40pt !important; }
  h2 { font-size: 22pt; }
  .stat .num { font-size: 32pt; }
  section { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}