/* ==========================================================================
   Solar Technical Services — site styles
   Theme: the STS logo's greens with its sun yellow (client, 2026-10-12). The token names navy, blue and sky
   are from the earlier blue theme; they now hold the logo's dark, mid and leaf greens.
   ========================================================================== */

:root {
  --navy-950: #062612;
  --navy-900: #0a3317;
  --navy-850: #0c3e1b;
  --navy-800: #0e4c1e;
  --navy-700: #146028;
  --blue-600: #1f7a36;
  --sky-400: #8ac02e;
  --leaf-300: #c2e872;   /* a light tint of the logo's leaf green, for words on the green photos */
  --sun-600: #c99400;
  --sun-500: #f0b800;
  --sun-400: #f8c20a;
  --sun-300: #ffd645;
  --sun-100: #fff5d1;
  --red-500: #f04438;
  --green-500: #43a73f;
  --sky-600: #2a8a40;
  --sky-500: #309848;
  --blue-700: #196a2e;
  --blue-800: #145a26;

  --ink: #0c1f12;
  --text: #263a2c;
  --muted: #5a6b5e;
  --line: #dce8da;
  --line-strong: #c2d6c0;
  --paper: #f3f8f1;
  --paper-2: #e6f0e3;
  --white: #fff;
  --on-dark: rgba(232, 244, 234, 0.8);

  --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --topbar-h: 40px;
  --radius: 22px;
  --shadow-s: 0 1px 2px rgba(10, 51, 23, 0.05), 0 4px 14px rgba(10, 51, 23, 0.05);
  --shadow: 0 2px 6px rgba(10, 51, 23, 0.06), 0 18px 40px -12px rgba(10, 51, 23, 0.18);
  --shadow-l: 0 40px 90px -30px rgba(6, 38, 18, 0.45);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.no-scroll { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
}

p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }
sub { font-size: 0.68em; line-height: 0; vertical-align: -0.22em; }

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

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

section[id] { scroll-margin-top: 92px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.i {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--sun-400);
  color: var(--navy-900);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue-600);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.link .i { width: 1em; height: 1em; }

@media (max-width: 899px) { .hide-md { display: none !important; } }
@media (max-width: 639px) { .hide-sm { display: none !important; } }
@media (max-width: 479px) { .hide-xs { display: none !important; } }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--h);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn .i { width: 1.15em; height: 1.15em; transition: transform 0.2s var(--ease); }
.btn:hover > .i:last-child:not(:first-child) { transform: translateX(3px); }
.btn--lg { --h: 56px; padding: 0 28px; font-size: 1.02rem; }
.btn--sm { --h: 42px; padding: 0 18px; font-size: 0.92rem; }
.btn--block { width: 100%; }

.btn--sun {
  background: var(--sun-400);
  color: var(--navy-900);
}
.btn--sun:hover { background: var(--sun-300); transform: translateY(-1px); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); }

.btn--navy { background: var(--navy-800); color: #fff; }
.btn--navy:hover { background: var(--navy-700); transform: translateY(-1px); }

.btn--outline {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--navy-800);
}
.btn--outline:hover { border-color: var(--navy-800); }

/* ---------------------------------------------------------------- section scaffolding */
.section {
  position: relative;
  padding-block: clamp(76px, 9vw, 128px);
}
.section--paper { background: var(--paper); }
.section--dark {
  color: var(--on-dark);
  background: var(--navy-900);
}
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }

.section-head {
  display: grid;
  gap: 18px 64px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head > p {
  max-width: 54ch;
  color: var(--muted);
  font-size: 1.08rem;
}
.section--dark .section-head > p { color: var(--on-dark); }
@media (min-width: 900px) {
  .section-head { grid-template-columns: 1.3fr 1fr; align-items: end; }
  .section-head > p { padding-bottom: 6px; }
}

/* the short label over a section heading, in plain sentence case */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-head);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--blue-600);
}
.section--dark .eyebrow { color: var(--sky-400); }

.display {
  font-size: clamp(2.05rem, 1.1rem + 3.2vw, 3.65rem);
  line-height: 1.02;
  letter-spacing: -0.042em;
}
.display--sm {
  font-size: clamp(1.7rem, 1.05rem + 2vw, 2.65rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

/* the four service lines beside the services heading, in plain readable type; each stays whole */
.section-head > .tagline {
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--navy-800);
  text-wrap: balance;
}
.tagline > span { white-space: nowrap; }
.tagline .tagline__sep { margin-inline: 0.12em; color: var(--blue-600); }

.subhead {
  font-size: clamp(1.55rem, 1rem + 1.6vw, 2.25rem);
  letter-spacing: -0.038em;
}

/* shared list styles */
.checks { display: grid; gap: 11px; }
.checks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.97rem;
  line-height: 1.45;
}
.checks .i {
  width: 21px;
  height: 21px;
  padding: 4px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--blue-600);
  stroke-width: 3;
}
.checks--light .i { background: rgba(255, 255, 255, 0.1); color: var(--sky-400); }

.ticks { display: grid; gap: 8px; }
.ticks li {
  position: relative;
  padding-left: 24px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.42em;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--blue-600);
  border-bottom: 2px solid var(--blue-600);
  transform: rotate(-45deg);
}
.ticks--light li { color: var(--on-dark); }
.ticks--light li::before { border-color: var(--sky-400); }

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: relative;
  z-index: 61;
  background: var(--blue-800);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.84rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--topbar-h);
}
.topbar__offer { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.topbar__offer strong { color: var(--leaf-300); }
.topbar__links { display: flex; gap: 22px; }
.topbar__links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.86);
}
.topbar__links a:hover { color: var(--sun-400); }
.topbar__links .i { width: 15px; height: 15px; color: var(--sky-400); }


/* ---------------------------------------------------------------- navigation */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 0;
}
.nav {
  position: relative;
  top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100% - 24px, 1240px);
  margin-inline: auto;
  padding: 7px 7px 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 12px 30px -12px rgba(6, 38, 18, 0.4);
  transition: background 0.3s, box-shadow 0.3s;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 16px 40px -14px rgba(6, 38, 18, 0.45);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}
.brand img { flex: none; border-radius: 50%; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--navy-800);
  white-space: nowrap;
}
.brand__sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.nav__links { display: none; gap: 2px; }
.nav__links a {
  padding: 10px 13px;
  border-radius: 999px;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--navy-800);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.nav__links a:hover { background: var(--paper-2); }
.nav__links a.is-active { background: var(--navy-800); color: #fff; }

.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--navy-800);
  color: #fff;
  cursor: pointer;
}

@media (min-width: 1280px) {
  .nav { padding-left: 10px; }
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
}
@media (max-width: 560px) {
  .nav__cta { display: none; }
  .brand__name { font-size: 0.95rem; }
}
@media (max-width: 360px) { .brand__sub { display: none; } }

/* mobile menu: a card that drops from the header, the page dimmed behind it; the header stays on top */
.mobile-menu { position: fixed; inset: 0; z-index: 55; } /* under the header (z-index 60) */
.mobile-menu[hidden] { display: none; }
.mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(6, 38, 18, 0.42); }
.mobile-menu__panel {
  position: absolute;
  top: var(--menu-top, 84px);
  right: 12px;
  width: min(100% - 24px, 420px);
  max-height: calc(100% - var(--menu-top, 84px) - 12px);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px -18px rgba(6, 38, 18, 0.55);
  overscroll-behavior: contain;
}
.mobile-menu.is-open .mobile-menu__backdrop { animation: menu-dim 0.2s ease; }
.mobile-menu.is-open .mobile-menu__panel { animation: menu-drop 0.24s var(--ease); transform-origin: top right; }
@keyframes menu-dim { from { opacity: 0; } }
@keyframes menu-drop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .mobile-menu.is-open .mobile-menu__panel, .mobile-menu.is-open .mobile-menu__backdrop { animation: none; } }
.mobile-menu__links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mobile-menu__links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 14px;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy-800);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.mobile-menu__links a:hover { background: var(--paper-2); }
.mobile-menu__links a.is-active { background: var(--navy-800); color: #fff; } /* the section being read */
.mobile-menu__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; padding: 10px 2px 2px; border-top: 1px solid var(--line); }
.mobile-menu__foot .btn { --h: 46px; padding: 0 10px; font-size: 0.92rem; }
@media (max-width: 340px) { .mobile-menu__foot { grid-template-columns: 1fr; } }
body.menu-open .dock { transform: translateY(calc(100% + 80px)); } /* the bottom bar (or floating Messenger button) steps aside while the menu is open */

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  color: #fff;
  background: var(--blue-700);
}
.hero__frame {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(700px, calc(100svh - var(--topbar-h)), 1080px);
  padding: 150px 0 clamp(48px, 7vw, 88px);
  overflow: hidden;
}
/* room for the photo controls (arrows row, pause row) below the buttons */
@media (min-width: 701px) { .js .hero__frame { padding-bottom: 144px; } }
/* phones: the photo controls sit right under the buttons (controls rule below, after .hero__controls) */
@media (max-width: 700px) {
  .hero__frame { flex-direction: column; justify-content: center; padding: 120px 0 48px; }
}

/* Scroll-driven photos (main.js): where the screen can hold the hero, the section is taller than the
   screen and its frame stays pinned while each photo fades in over the one before. At the top of the
   page, and on screens too short to pin, a timer and the arrows and dots switch photos. */
@media (min-width: 701px) and (min-height: 600px), (max-width: 700px) and (min-height: 620px) {
  .js .hero { height: calc(100svh + 2 * 50svh); } /* one 50svh step per photo change */
  .js .hero__frame { position: sticky; top: 0; height: 100svh; min-height: 0; }
  .js .hero.is-scrolling .hero__slide { transition: none; } /* follow the scroll exactly */
  .js .hero.is-settling .hero__slide { transition-duration: 0.4s; } /* as scrolling takes over from the timer */
}
@media (min-width: 701px) and (min-height: 600px) {
  .js .hero__controls { bottom: calc(24px + var(--topbar-h)); } /* clear of the fold before the top bar scrolls away */
  /* every text sits centered between the menu and the photo controls */
  .js .hero__frame { padding: clamp(100px, 16svh, 150px) 0 168px; }
  .js .hero__text { align-self: center; }
}
@media (max-width: 700px) and (min-height: 620px) {
  /* pinned on phones: tighter spacing, and the bottom padding keeps the controls clear of the fold
     before the top bar scrolls away */
  .js .hero__frame { padding: 96px 0 calc(16px + var(--topbar-h)); }
  .js .hero__title { margin-bottom: 16px; }
  .js .hero__actions { margin-top: 24px; }
  .js .hero__actions .btn--lg { --h: 48px; }
}
/* While pinned, main.js shrinks the hero text (--fit) just enough for the longest text to fit the frame.
   Where even the smallest size doesn't fit, it adds .is-unpinned and the hero scrolls normally. */
.js .hero.is-unpinned { height: auto; }
.js .hero.is-unpinned .hero__frame { position: relative; height: auto; min-height: clamp(700px, calc(100svh - var(--topbar-h)), 1080px); }

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__slide,
.hero__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* later photos sit on top and fade in over the earlier ones */
.hero__slide {
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.hero__slide:first-child { opacity: 1; }
.hero__slide img {
  object-fit: cover;
  object-position: var(--pos, 62% 68%);
}

.hero__controls {
  position: absolute;
  left: 50%;
  bottom: 24px;
  display: grid;
  grid-template-columns: repeat(3, auto); /* ‹ dots › with the pause button centered below */
  align-items: center;
  justify-items: center;
  gap: 8px;
  translate: -50% 0;
}
.hero__controls[hidden] { display: none; }
@media (max-width: 700px) {
  .hero__controls { position: static; translate: none; margin-top: 24px; }
  .js .hero__controls[hidden] { display: grid; visibility: hidden; } /* keep their space until main.js shows them */
}
.hero__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.hero__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); }
.hero__btn:disabled { opacity: 0.35; cursor: default; }
.hero__btn .i { width: 18px; height: 18px; }
.hero__btn[hidden] { display: none; }
.hero__pause { grid-column: 1 / -1; }
.hero__pause .i { width: 16px; height: 16px; }
.hero__dots { display: flex; }
.hero__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.2s, transform 0.2s;
}
.hero__dot:hover::before { background: rgba(255, 255, 255, 0.85); }
.hero__dot[aria-current="true"]::before { background: var(--sun-400); transform: scale(1.25); }

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* the logo's dark green, strong behind the text and gone past it, so the photo keeps its real colours */
  background: linear-gradient(90deg, rgba(14, 76, 30, 0.8) 0%, rgba(14, 76, 30, 0.7) calc(50% + 380px), rgba(14, 76, 30, 0.3) calc(50% + 500px), rgba(14, 76, 30, 0.12) 100%);
}
@media (min-width: 1100px) {
  .hero__shade { background: linear-gradient(90deg, rgba(14, 76, 30, 0.8) 0%, rgba(14, 76, 30, 0.7) calc(50% + 320px), rgba(14, 76, 30, 0.3) calc(50% + 480px), rgba(14, 76, 30, 0) calc(50% + 720px)); }
}
@media (max-width: 700px) {
  /* phones: light at the top, where there is no text, then strong behind the headline and below */
  .hero__shade { background: linear-gradient(180deg, rgba(14, 76, 30, 0.25) 0%, rgba(14, 76, 30, 0.72) 24%, rgba(14, 76, 30, 0.82) 60%); }
}

/* each photo's text and buttons share one spot sized for the tallest, so the page below never jumps;
   the outgoing text fades out before the next one fades in */
.hero__texts { display: grid; }
.hero__text {
  grid-area: 1 / 1;
  align-self: end; /* every photo's buttons end at the same height, so the controls below never jump */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0s 0.2s;
}
.hero__text.is-current { opacity: 1; visibility: visible; transition: opacity 0.3s 0.2s; }

.hero__title {
  max-width: 15em;
  margin: 0 0 24px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: max(24px, calc(clamp(2.5rem, 1.05rem + 4.7vw, 4.75rem) * var(--fit, 1))); /* --fit: main.js */
  line-height: 0.98;
  letter-spacing: -0.047em;
  color: #fff;
}
.hero__title .line { display: block; text-wrap: balance; } /* a line that wraps splits evenly, no lone word */
/* the headline's key words: light leaf green, so the yellow stays with the buttons */
.hl {
  position: relative;
  font-style: normal;
  color: var(--leaf-300);
}
@media (min-width: 520px) { .hl { white-space: nowrap; } }

.hero__lead {
  max-width: 58ch;
  font-size: max(13px, calc(clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem) * var(--fit, 1)));
  color: #fff;
  text-wrap: balance;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------------------------------------------------------------- about */
/* About: a kicker and a bold statement, then ruled rows (Who We Are, What We Do, Our Approach) */
.about-statement {
  max-width: 21em;
  font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #fff;
}
.about-statement em { font-style: normal; color: var(--leaf-300); }
.about-rows { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.about-row {
  display: grid;
  gap: 12px 48px;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
@media (min-width: 760px) {
  .about-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); align-items: baseline; }
}
.about-row h4 { font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); letter-spacing: -0.03em; color: #fff; }
.about-row p { max-width: 62ch; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); color: var(--on-dark); }
.about-approach { gap: 14px 32px; }
@media (min-width: 560px) { .about-approach { grid-template-columns: 1fr 1fr; } }
/* the logo large beside Who We Are, on a white circle; it opens full size */
.about-who { display: grid; gap: 28px; margin-top: clamp(40px, 5vw, 64px); }
.about-who .about-rows { margin-top: 0; }
@media (min-width: 900px) {
  .about-who { grid-template-columns: clamp(240px, 23vw, 320px) minmax(0, 1fr); gap: clamp(36px, 4vw, 64px); align-items: start; }
  .about-logo { padding-top: clamp(22px, 2.6vw, 34px); } /* level with "Who We Are" */
}
.about-logo { display: grid; justify-items: center; gap: 14px; }
.about-logo__disc {
  display: grid;
  place-items: center;
  width: min(100%, 300px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
  cursor: zoom-in;
  transition: transform 0.3s var(--ease);
}
.about-logo__disc:hover { transform: scale(1.03); }
.about-logo__disc img { width: 80%; height: auto; }
@media (max-width: 899px) { .about-logo__disc { width: min(68vw, 280px); } }
.about-logo__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 0;
  background: none;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sky-400);
  cursor: pointer;
}
.about-logo__more:hover { color: #fff; }
.about-logo__more .i { width: 16px; height: 16px; }
.logo-full { width: min(92vw, 720px); max-height: 92vh; padding: clamp(18px, 4vw, 36px); overflow: hidden; border: 0; border-radius: 28px; background: #fff; }
.logo-full::backdrop { background: rgba(6, 38, 18, 0.78); }
.logo-full img { display: block; width: 100%; height: auto; max-height: calc(92vh - 72px); object-fit: contain; }
.logo-full__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--navy-800);
  cursor: pointer;
}
.logo-full__close:hover { border-color: var(--navy-800); }
@media (min-width: 1000px) { .about-approach { grid-template-columns: repeat(3, 1fr); } }
.ticks--light.about-approach li {
  font-family: var(--font-head);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

/* ---------------------------------------------------------------- mission & vision */
/* Mission & Vision: a centered intro, the four commitments as a ruled grid, the vision as a closing statement */
/* the purpose as a lead statement, its supporting paragraph beside it (stacked on phones) */
.mission__intro { display: grid; gap: 20px 64px; }
@media (min-width: 900px) {
  /* both columns end on the same line: the paragraph's last line sits level with the statement's */
  .mission__intro { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; align-items: last baseline; }
}
.mission__lead {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 0.95rem + 1.2vw, 1.95rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.mission__lead em { font-style: normal; color: var(--blue-600); }
.mission__support { max-width: 50ch; font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.18rem); line-height: 1.6; color: var(--text); text-wrap: pretty; } /* no lone last word */
.mission__support strong { font-weight: 700; color: var(--ink); }
.purpose { display: grid; gap: clamp(48px, 6vw, 80px); margin-top: clamp(48px, 6vw, 72px); }
.purpose__label {
  margin-bottom: 18px;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--blue-600);
}
.mission-list { display: grid; border-top: 1px solid var(--line-strong); }
@media (min-width: 760px) { .mission-list { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.mission-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(18px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.mission-list .i { flex: none; width: 20px; height: 20px; color: var(--blue-600); stroke-width: 2.6; translate: 0 3px; }
.vision-statement {
  max-width: 30em;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.vision-statement em { font-style: normal; color: var(--blue-600); }

/* ---------------------------------------------------------------- statement */
.statement { overflow: hidden; }
.statement__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 51, 23, 0.93), rgba(6, 38, 18, 0.97)),
    url("../img/bg/aerial-rooftop.webp") center / cover;
}
.statement .container { position: relative; }
.statement__big {
  margin: 6px 0 30px;
  font-size: clamp(2.7rem, 0.9rem + 7.2vw, 7.4rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
}
.statement__big span { display: block; }
.statement__big .not { color: rgba(255, 255, 255, 0.32); }
.statement__big s {
  position: relative;
  color: rgba(255, 255, 255, calc(0.45 - 0.22 * var(--crossed, 1))); /* fades as the X crosses it out */
  text-decoration: none;
}
/* the X and the check: drawn lines (pathLength 1) that main.js draws with the scroll; fully drawn without it */
.mark { position: absolute; overflow: visible; pointer-events: none; }
.mark__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}
.mark--x { left: 50%; top: 50%; width: 1.2em; height: 0.8em; translate: -50% -44%; }
.mark--x .mark__line { stroke: var(--red-500); stroke-width: 8.5; }
.mark--check {
  position: relative;
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.14em;
  vertical-align: -0.05em;
}
/* a bold, tapered check; main.js wipes it in from the left as it draws */
.mark__fill { fill: var(--green-500); }
@media (min-width: 420px) { .statement__big em { white-space: nowrap; } } /* the check stays with "one." */
/* a quick tick when the check finishes */
.statement__big.is-checked .mark--check { animation: mark-pop 0.5s var(--ease); }
@keyframes mark-pop { 45% { transform: scale(1.25) rotate(-8deg); } }
.statement__big .only { color: #fff; }
.statement__big em { font-style: normal; color: var(--leaf-300); }

/* the four differentiators as a ruled list; each row lights up as it reaches the middle of the
   screen and stays lit (main.js) */
.diff-list { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.diff-row {
  display: grid;
  gap: 10px 48px;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
@media (min-width: 760px) {
  .diff-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: baseline; }
}
.diff-row__title {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: clamp(1.55rem, 1.05rem + 1.9vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
  transition: color 0.6s var(--ease);
}
.diff-row__num { flex: none; font-size: 0.42em; letter-spacing: 0; color: var(--leaf-300); transition: color 0.6s var(--ease); }
.diff-row p { max-width: 46ch; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); color: var(--on-dark); transition: color 0.6s var(--ease); }
.js .diff-row:not(.is-lit) .diff-row__title { color: rgba(255, 255, 255, 0.38); }
.js .diff-row:not(.is-lit) .diff-row__num { color: rgba(194, 232, 114, 0.4); }
.js .diff-row:not(.is-lit) p { color: rgba(232, 244, 234, 0.4); }

/* ---------------------------------------------------------------- capabilities */
.caps { display: grid; gap: 16px; }
@media (min-width: 640px) { .caps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .caps { grid-template-columns: repeat(3, 1fr); } }
.cap {
  position: relative;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}
.cap:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--shadow); }
.cap__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tone) 11%, white);
  color: var(--tone);
}
.cap__icon .i { width: 26px; height: 26px; }
.cap h3 { margin-bottom: 8px; font-size: 1.22rem; }
.cap p { font-size: 0.97rem; color: var(--muted); }

/* sectors */
.sectors-head,
.lv-head {
  display: grid;
  gap: 10px 40px;
  margin: clamp(60px, 7vw, 88px) 0 26px;
}
.sectors-head p,
.lv-head p { max-width: 62ch; color: var(--muted); }
@media (min-width: 900px) {
  .sectors-head,
  .lv-head { grid-template-columns: 1fr 1.35fr; align-items: end; }
}

.sectors { display: grid; gap: 16px; }
@media (min-width: 600px) { .sectors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .sectors { grid-template-columns: repeat(4, 1fr); } }
.sector {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.sector:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.sector__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-800); }
.sector__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
  transition: transform 0.7s var(--ease), filter 0.4s;
}
.sector:hover .sector__img img { transform: scale(1.05); filter: none; }
.sector__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.sector h4 { font-size: 1.18rem; }
.sector__body > p:not(.sector__tag) { font-size: 0.93rem; color: var(--muted); }
.sector__body > .sector__proof {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-800);
}
.sector__proof .i { width: 16px; height: 16px; margin-top: 1px; color: var(--blue-600); }

/* ---------------------------------------------------------------- systems */
.systems { display: grid; gap: 18px; }
@media (min-width: 1000px) { .systems { grid-template-columns: repeat(3, 1fr); } }
.system {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
}
.system--feature { border-color: var(--navy-800); box-shadow: 0 0 0 1px var(--navy-800), var(--shadow); }
/* what each system is made of, in the kicker style (beats the header's paragraph style) */
.system__head .system__tag {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-size: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--blue-600);
}
.system__plus { margin-inline: 0.08em; color: var(--sky-500); }
.system__head h3 { margin-bottom: 8px; font-size: 1.42rem; }
.system__head p { font-size: 0.96rem; color: var(--muted); }
.system__label {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.system__note {
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--paper);
  font-size: 0.88rem;
  line-height: 1.5;
}
.system__note strong { color: var(--ink); }


.systems__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 24px;
  padding: 22px 26px;
  border-radius: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.systems__cta p { font-family: var(--font-head); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }

/* ---------------------------------------------------------------- projects */
.featured {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow);
}
@media (min-width: 980px) { .featured { grid-template-columns: 1.12fr 1fr; } }
.featured__media,
.lv__media,
.proj__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--paper-2);
  cursor: zoom-in;
}
.featured__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.8s var(--ease), opacity 0.25s; }
/* the featured project: big picture over a band of its photos in the workmanship wall's style */
.featured__media-wrap { display: flex; flex-direction: column; min-width: 0; }
.featured__media-wrap > .featured__media { flex: 1; min-height: 300px; }
/* the photo fills its frame without sizing it: the card's text sets the height on wide screens */
.featured__media-wrap > .featured__media img { position: absolute; inset: 0; aspect-ratio: auto; }
@media (max-width: 979px) { .featured__media-wrap > .featured__media { flex: none; min-height: 0; aspect-ratio: 4 / 3; } }
.featured__band-wrap { position: relative; }
.featured__band { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding-top: 3px; background: #fff; }
.featured__thumb {
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--paper-2);
  cursor: pointer;
}
.featured__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); transition: filter 0.25s; }
.featured__thumb:hover img { filter: brightness(0.85); }
.featured__thumb[aria-pressed="true"] img { filter: none; }
.featured__thumb:focus-visible { outline-offset: -3px; border-radius: 0; }
/* the wall's round arrows, centred on the band's top edge */
.featured__nav { position: absolute; left: 50%; top: 0; z-index: 2; display: flex; gap: 12px; translate: -50% -50%; }
.featured__nav[hidden] { display: none; }
@media (max-width: 560px) {
  .featured__nav .work-wall__btn { width: 40px; height: 40px; }
  .featured__nav .work-wall__btn .i { width: 18px; height: 18px; }
}
#more-projects { scroll-margin-top: 104px; }
.featured__media:hover img,
.lv__media:hover img,
.proj__media:hover img { transform: scale(1.04); }
.media-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(6, 38, 18, 0.8);
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}
.featured__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(24px, 4vw, 44px); }
.featured__body .eyebrow { margin-bottom: -4px; }
.featured__body h3 { font-size: clamp(1.6rem, 1rem + 1.5vw, 2.25rem); letter-spacing: -0.04em; }
.featured__client { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; color: var(--muted); }
.featured__client .i { margin-top: 3px; color: var(--blue-600); }
.featured .ticks { margin-bottom: 6px; }

.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.spec {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.spec dd {
  font-family: var(--font-mono);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy-800);
}
.spec dt { font-size: 0.8rem; color: var(--muted); }

.lv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 980px) { .lv-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.lv {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.lv__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.7s var(--ease); }
.lv__media .media-badge { left: 10px; bottom: 10px; padding: 5px 10px; }
.lv__body { display: flex; flex: 1; flex-direction: column; padding: 16px 18px 18px; }
/* opens the system's photos; sits at the foot of every card, level across the row */
.lv .kv { margin-bottom: 16px; }
.lv__more { margin-top: auto; }
@media (max-width: 560px) { .lv__more { padding-inline: 12px; } }
.lv h4 { margin-bottom: 10px; font-size: 1.12rem; }
.kv { font-size: 0.84rem; }
.kv div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line); }
.kv dt { color: var(--muted); }
.kv dd { font-family: var(--font-mono); font-weight: 600; text-align: right; color: var(--navy-800); }
@media (max-width: 420px) {
  .kv div { flex-direction: column; gap: 0; }
  .kv dd { text-align: left; }
}

.recent { display: grid; gap: 18px; }
@media (min-width: 640px) { .recent { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .recent { grid-template-columns: repeat(3, 1fr); } }
.proj {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.proj:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.proj.is-extra { display: none; }
.recent.is-expanded .proj.is-extra { display: flex; }
.proj__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.7s var(--ease); }
/* what kind of place it is, in the kicker style, close over the name */
.proj__type {
  margin-bottom: -4px;
  font-family: var(--font-head);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--blue-600);
}
.proj__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.proj h4 { font-size: 1.2rem; }
.proj__meta { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--muted); }
.proj__meta .i { width: 16px; height: 16px; color: var(--blue-600); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--navy-800);
}
.proj__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: auto;
  padding: 8px 0 0;
  border: 0;
  background: none;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-600);
  cursor: pointer;
}
.proj__link .i { transition: transform 0.2s var(--ease); }
.proj__link:hover .i { transform: translateX(3px); }
.recent__more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 30px; }
/* how many are showing, in plain words; the numbers stand out */
.recent__count { font-size: 0.98rem; color: var(--muted); }
.recent__count strong { font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------- products */
.products .section-title { margin-bottom: 14px; }
.products__lead {
  margin-bottom: clamp(28px, 4vw, 44px);
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
  font-weight: 700;
  color: var(--blue-600);
}
/* step 1, the brand: two options with their inverter, package count and size range */
.brand-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 660px; margin: 0 auto clamp(30px, 4vw, 48px); }
.brand-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 18px 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.brand-tab img { flex: none; width: auto; height: 54px; filter: drop-shadow(0 4px 6px rgba(6, 38, 18, 0.18)); }
.brand-tab > span { min-width: 0; }
.brand-tab strong { display: block; font-family: var(--font-head); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--navy-800); }
.brand-tab small { display: block; margin-top: 2px; font-size: 0.86rem; line-height: 1.35; color: var(--muted); }
.brand-tab .nowrap { white-space: nowrap; }
.brand-tab:hover { border-color: var(--navy-800); }
.brand-tab[aria-selected="true"] { border-color: var(--navy-800); background: var(--navy-800); box-shadow: 0 12px 26px -16px rgba(6, 38, 18, 0.6); }
.brand-tab[aria-selected="true"] strong { color: #fff; }
.brand-tab[aria-selected="true"] small { color: rgba(255, 255, 255, 0.78); }
@media (max-width: 480px) {
  .brand-tab { gap: 10px; padding: 10px 12px 10px 10px; }
  .brand-tab img { height: 44px; }
}
/* step 2, the size: one option per package; the size, who it suits and what it makes a day */
.pkg-step { margin-bottom: 12px; text-align: center; font-family: var(--font-head); font-weight: 700; color: var(--navy-800); }
.pkg-sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.pkg-sizes > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .pkg-sizes { grid-template-columns: repeat(var(--count), minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
  .pkg-sizes > :last-child:nth-child(odd) { grid-column: auto; }
}
.pkg-size {
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 16px 44px 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.pkg-size__kw { font-family: var(--font-head); font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.04em; color: var(--navy-800); }
.pkg-size__fit { font-size: 0.88rem; line-height: 1.35; color: var(--muted); }
.pkg-size__gen { margin-top: 5px; font-size: 0.84rem; font-weight: 600; color: var(--blue-600); }
/* a radio circle in the corner; the chosen one fills blue with a check */
.pkg-size::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
}
.pkg-size:hover { border-color: var(--navy-800); }
.pkg-size[aria-checked="true"] { border-color: var(--blue-600); background: #f0f8ee; box-shadow: 0 0 0 3px rgba(31, 122, 54, 0.12); }
.pkg-size[aria-checked="true"] .pkg-size__kw { color: var(--blue-600); }
.pkg-size[aria-checked="true"]::after {
  border-color: var(--blue-600);
  background: var(--blue-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* step 3, the product card: the package's own slide pictures, laid out as on the slide (inverter in the middle,
   solar panel top right, battery bottom right), beside the package details */
.pkg-view { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
@media (min-width: 900px) { .pkg__body { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }
.pkg__body[hidden] { display: none; } /* only the chosen package shows */
.pkg__media { display: grid; align-content: center; gap: 14px; padding: clamp(20px, 2.8vw, 36px); background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.pkg__collage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 16px); width: 100%; max-width: 480px; margin-inline: auto; }
.pkg__pic { position: relative; display: block; padding: 0; border: 0; border-radius: 14px; background: none; cursor: zoom-in; transition: transform 0.25s var(--ease); }
.pkg__pic:hover { transform: translateY(-3px); }
.pkg__pic--inverter { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.pkg__pic--panel { grid-column: 2; grid-row: 1; }
.pkg__pic--battery { grid-column: 2; grid-row: 2; }
.pkg__pic img { display: block; }
/* square pictures with their own backgrounds */
.pkg__pic.is-graphic { aspect-ratio: 1; overflow: hidden; box-shadow: 0 12px 26px -16px rgba(6, 38, 18, 0.5); }
.pkg__pic.is-graphic img { width: 100%; height: 100%; object-fit: cover; }
/* products on a clear background stand on the panel */
.pkg__pic.is-cutout img { width: 82%; height: auto; margin-inline: auto; filter: drop-shadow(0 14px 14px rgba(6, 38, 18, 0.18)); }
/* the Hopetrek slides' two batteries, the second a step in front */
.pkg__pair { position: relative; display: block; aspect-ratio: 1; }
.pkg__pair img { position: absolute; bottom: 6%; width: auto; height: 86%; filter: drop-shadow(0 12px 12px rgba(6, 38, 18, 0.18)); }
.pkg__pair img:first-child { left: 10%; }
.pkg__pair img:last-child { left: 40%; bottom: 0; }
.pkg__zoom {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 8px;
  padding: 6px 4px;
  border: 0;
  background: none;
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--blue-600);
  cursor: pointer;
}
.pkg__zoom .i { width: 18px; height: 18px; }
.pkg__zoom:hover { color: var(--navy-800); }
.pkg__info { padding: clamp(24px, 3.4vw, 42px); }
@keyframes pkg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pkg__body.is-entering, .pkg-brand.is-entering { animation: pkg-in 0.38s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .pkg__body.is-entering, .pkg-brand.is-entering { animation: none; } }
.pkg__kicker { font-family: var(--font-head); font-weight: 700; color: var(--blue-600); }
.pkg__title { margin-top: 2px; font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.3rem); line-height: 1.05; letter-spacing: -0.045em; }
.pkg__fit-line { margin-top: 8px; color: var(--muted); }
.pkg__stats { display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0 18px; border-block: 1px solid var(--line); }
.pkg__stats p { padding: 16px 16px 16px 0; }
.pkg__stats p + p { padding-left: 20px; border-left: 1px solid var(--line); }
.pkg__stats strong { display: block; font-family: var(--font-head); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.04em; white-space: nowrap; color: var(--navy-800); }
.pkg__stats strong small { font-size: 0.6em; letter-spacing: -0.01em; }
.pkg__stats span { display: block; margin-top: 4px; font-size: 0.86rem; color: var(--muted); }
@media (max-width: 480px) {
  .pkg__stats { grid-template-columns: 1fr; }
  .pkg__stats p + p { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
.pkg__body .kv { font-size: 0.92rem; }
.pkg__body .kv dd { font-family: var(--font-body); font-weight: 600; }
.pkg__all { margin-top: 16px; border-bottom: 1px solid var(--line); }
.pkg__all summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy-800);
  cursor: pointer;
}
.pkg__all summary::-webkit-details-marker { display: none; }
.pkg__all summary span { font-family: var(--font-body); font-weight: 500; color: var(--muted); }
.pkg__all summary .i { width: 18px; height: 18px; margin-left: auto; color: var(--blue-600); transition: transform 0.25s var(--ease); }
.pkg__all[open] summary .i { transform: rotate(45deg); }
.pkg__all ul { padding-bottom: 14px; font-size: 0.9rem; }
@media (min-width: 640px) { .pkg__all ul { columns: 2; column-gap: 28px; } }
.pkg__all li { position: relative; padding: 4px 0 4px 16px; break-inside: avoid; }
.pkg__all li::before { content: ""; position: absolute; left: 2px; top: 0.85em; width: 5px; height: 5px; border-radius: 50%; background: var(--sky-500); }
.pkg__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
.pkg__actions p { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
#assessment-form { scroll-margin-top: 104px; } /* "Ask for a quotation" lands on the form, clear of the header */
.products__note { max-width: 70ch; margin: clamp(24px, 3vw, 36px) auto 0; text-align: center; font-size: 0.9rem; color: var(--muted); }

/* ---------------------------------------------------------------- process */
.process__grid { display: grid; gap: 48px; }
@media (min-width: 1000px) {
  .process__grid { grid-template-columns: 0.95fr 1.05fr; gap: 72px; }
  .process__intro { position: sticky; top: 104px; align-self: start; }
}
.process__intro > p:not(.eyebrow):not(.process__lead) { max-width: 54ch; }
.process__lead {
  margin: 22px 0 14px;
  font-family: var(--font-head);
  font-size: clamp(1.14rem, 1rem + 0.45vw, 1.38rem);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: #fff;
}
.process__photo { position: relative; margin-top: 28px; overflow: hidden; border-radius: 22px; }
.process__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.process__photo figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(6, 38, 18, 0.78);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.steps { position: relative; display: grid; gap: 14px; }
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  left: 27px;
  top: var(--rail-start, 36px);
  width: 2px;
  border-radius: 2px;
}
.steps::before { height: var(--rail-length, calc(100% - 72px)); background: rgba(255, 255, 255, 0.1); }
.steps::after {
  height: calc(var(--progress, 0) * var(--rail-length, 0px));
  background: var(--sun-400);
}
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px; }
.step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: var(--navy-850);
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--sky-400);
  transition: background 0.4s, color 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.step > div {
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  transition: background 0.4s, border-color 0.4s;
}
.step.is-active .step__num {
  border-color: transparent;
  background: var(--sun-400);
  color: var(--navy-900);
}
.step.is-active > div { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.065); }
.step h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 1.2rem; }
.step h3 .i { width: 22px; height: 22px; color: var(--sky-400); }
.step p { font-size: 0.97rem; }
.steps__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
}
.steps__end p { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; }

/* ---------------------------------------------------------------- workmanship */
.standards { display: grid; gap: 18px; }
@media (min-width: 900px) { .standards { grid-template-columns: repeat(3, 1fr); } }
.standard {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
}
.standard__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, white);
  color: var(--accent);
}
.standard__icon .i { width: 26px; height: 26px; }
.standard h3 { margin: 18px 0 14px; font-size: 1.3rem; }

/* the installations joined into one long wall; main.js slides it sideways as the page scrolls and
   the arrows move it further. Without JavaScript it scrolls sideways by hand. */
.work-wall-wrap { position: relative; margin-top: clamp(48px, 6vw, 72px); }
.work-wall {
  --wall-h: clamp(260px, 28vw, 440px);
  overflow-x: auto;
  scrollbar-width: thin;
}
.work-wall.is-sliding { overflow: hidden; }
.work-wall__track { display: flex; width: max-content; }
.work-wall.is-sliding .work-wall__track { will-change: transform; }
.work-wall.is-nudging .work-wall__track { transition: transform 0.55s var(--ease); }
.work-wall figure { flex: none; margin: 0; }
.work-wall img {
  width: calc(var(--wall-h) * 3 / 4);
  max-width: none;
  height: var(--wall-h);
  object-fit: cover;
  border-right: 3px solid #fff;
}
/* the arrows sit across the bottom edge of the wall, centered */
.work-wall__nav {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: 12px;
  translate: -50% 50%;
}
.work-wall__nav[hidden] { display: none; }
.work-wall__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px -6px rgba(6, 38, 18, 0.35);
  color: var(--navy-800);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.work-wall__btn:hover:not(:disabled) { border-color: var(--navy-800); background: var(--navy-800); color: #fff; }
.work-wall__btn:disabled { cursor: default; color: var(--line-strong); box-shadow: none; }
.work-wall__btn .i { width: 20px; height: 20px; }
/* the section's closing statement under the wall */
.work-wall__caption {
  margin-top: 64px;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}
.work-wall__caption span { color: var(--blue-600); }

/* ---------------------------------------------------------------- support */
@media (min-width: 900px) { .section-head--full { grid-template-columns: 1fr; } }
/* a big centered title opens each main section (Why Choose Us, About Us, Our Services...) */
.section-title {
  grid-column: 1 / -1; /* spans the columns where the section content is a grid */
  margin-bottom: clamp(48px, 6vw, 88px);
  font-size: clamp(2.6rem, 1.3rem + 4.4vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
  text-align: center;
}
:is(.process__grid, .areas__grid, .faq) > .section-title { margin-bottom: 0; } /* the grid gap spaces it */
.support__title { max-width: 24ch; }
.support__title span { color: var(--blue-600); }
/* the six services as an index: one ruled row each, name and description side by side */
.svc-index { display: grid; gap: 32px; }
@media (min-width: 1000px) {
  .svc-index { grid-template-columns: minmax(300px, 0.75fr) 1.25fr; gap: 64px; align-items: start; }
}
.svc-index__photo { overflow: hidden; margin: 0; border-radius: 20px; background: var(--paper-2); }
.svc-index__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%; }
@media (min-width: 1000px) {
  .svc-index__photo { position: sticky; top: 104px; } /* stays beside the rows while they scroll past */
  .svc-index__photo img { aspect-ratio: 4 / 5; }
}
/* the photo brushed onto the page over paint strokes laid out like the logo: sun, panel, leaf */
.svc-index__photo--painted { overflow: visible; max-width: 480px; border-radius: 0; background: none; }
.svc-index__photo--painted svg { display: block; width: 100%; height: auto; overflow: visible; }
/* beside the list the paint reaches into the page margin, so the photo keeps its size */
@media (min-width: 1000px) {
  .svc-index__photo--painted { width: calc(100% + 56px); max-width: none; margin-left: -56px; }
}
.svc-index__list { border-top: 1px solid var(--line-strong); }
.svc-index__row {
  display: grid;
  gap: 6px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-strong);
}
@media (min-width: 640px) {
  .svc-index__row { grid-template-columns: minmax(180px, 0.85fr) 1.15fr; gap: 28px; align-items: baseline; }
}
.svc-index__row h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem); letter-spacing: -0.025em; }
.svc-index__row p { color: var(--muted); }

/* ---------------------------------------------------------------- project support strategy */
/* centered title and line, then three equal cards with a small line icon, everything centered */
.strategy-head { max-width: 46rem; margin: 0 auto clamp(40px, 5vw, 56px); text-align: center; }
.strategy-head__title { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); line-height: 1.08; letter-spacing: -0.035em; }
.strategy-head p { margin-top: 14px; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); color: var(--muted); text-wrap: balance; }
.strategy { display: grid; gap: 16px; }
@media (min-width: 900px) { .strategy { grid-template-columns: repeat(3, 1fr); } }
.strategy__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(30px, 3vw, 42px) clamp(22px, 2.4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  text-align: center;
}
.strategy__icon { width: 30px; height: 30px; margin-bottom: 8px; color: var(--muted); stroke-width: 1.5; }
.strategy__card h4 { font-size: clamp(1.15rem, 1.05rem + 0.3vw, 1.3rem); letter-spacing: -0.02em; }
.strategy__card p { max-width: 34ch; font-size: 0.95rem; color: var(--muted); text-wrap: balance; }
.strategy__chain { font-weight: 600; color: var(--text); }
.strategy__card .strategy__note { font-size: 0.88rem; }

/* ---------------------------------------------------------------- equipment */
.equipment { padding-bottom: 0; overflow: hidden; }
.equip {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--line);
}
@media (min-width: 640px) { .equip { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .equip { grid-template-columns: repeat(3, 1fr); } }
.equip__item { padding: 26px; background: #fff; }
.equip__item .i { width: 28px; height: 28px; margin-bottom: 18px; color: var(--blue-600); }
.equip__item h3 { margin-bottom: 6px; font-size: 1.15rem; }
.equip__item p { font-size: 0.94rem; color: var(--muted); }

.equip-photos {
  display: grid;
  grid-auto-columns: minmax(200px, 72%);
  grid-auto-flow: column;
  gap: 12px;
  margin-top: 40px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
@media (min-width: 640px) {
  .equip-photos { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}
.equip-photos figure { margin: 0; scroll-snap-align: start; }
.equip-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; background: var(--paper-2); }
.equip-photos figcaption { margin-top: 10px; font-size: 0.92rem; color: var(--muted); }

.marquee {
  margin-top: clamp(56px, 7vw, 88px);
  padding: 26px 0 30px;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.marquee__label {
  margin-bottom: 14px;
  text-align: center;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--muted);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; flex: none; }
.marquee__list li {
  display: flex;
  align-items: center;
  padding-right: 64px;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 1rem + 1.3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--navy-800);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- reviews */
.reviews { display: grid; gap: 18px; }
@media (min-width: 980px) { .reviews { grid-template-columns: 1.3fr 1fr 1fr; } }
.review {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
}
.review blockquote p {
  font-family: var(--font-head);
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.review__en {
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--muted);
}
.review__stars {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; font-size: 0.86rem; color: var(--muted); }
.review figcaption strong { display: block; font-family: var(--font-head); font-size: 1rem; color: var(--ink); }
.review__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy-800);
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--sun-400);
}
.review--feature { border-color: transparent; background: var(--navy-800); color: var(--on-dark); }
.review--feature blockquote p { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); color: #fff; }
.review--feature .review__stars { color: var(--sun-400); }
.review--feature .review__avatar { background: var(--sun-400); color: var(--navy-900); }
.review--feature figcaption { color: rgba(255, 255, 255, 0.6); }
.review--feature figcaption strong { color: #fff; }

/* ---------------------------------------------------------------- areas */
.areas { overflow: hidden; }
.areas__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(6, 38, 18, 0.97) 0%, rgba(6, 38, 18, 0.9) 45%, rgba(6, 38, 18, 0.74) 100%),
    url("../img/bg/rooftop-array-sky.webp") center / cover;
}
.areas__grid { position: relative; display: grid; gap: 48px; }
@media (min-width: 1000px) { .areas__grid { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 64px; } }
.areas__copy .display { margin-bottom: 20px; }
.areas__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* the provinces as a ruled list in big type; Bataan, home of the office, in yellow */
.provinces { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.province {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  padding: clamp(16px, 1.2rem + 0.6vw, 26px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.province h3 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -0.045em; color: #fff; }
.province--home { align-items: center; } /* the name sits level with the office note and address beside it */
.province--home h3 { color: var(--leaf-300); }
.province__tag {
  font-family: var(--font-head);
  font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--leaf-300);
}
/* the office address, under its note; level with the province name where there is room */
.province__office { max-width: 300px; }
.province__office address { margin-top: 4px; font-style: normal; font-size: 0.95rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.province__office address span { display: inline-block; } /* when it wraps, it wraps after the street */

/* ---------------------------------------------------------------- faq */
.faq { display: grid; gap: 40px; }
@media (min-width: 980px) {
  .faq { grid-template-columns: 0.85fr 1.15fr; align-items: start; gap: 72px; }
  .faq__intro { position: sticky; top: 104px; }
}
.faq__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.faq__intro .eyebrow { margin-bottom: -2px; }
.faq__intro > p:not(.eyebrow) { color: var(--muted); }
.faq__list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  list-style: none;
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--blue-600); }
.qa__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background 0.3s, border-color 0.3s;
}
.qa__icon::before,
.qa__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy-800);
  transform: translate(-50%, -50%);
}
.qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.3s var(--ease); }
.qa[open] .qa__icon { border-color: var(--sun-400); background: var(--sun-400); }
.qa[open] .qa__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa__a { padding: 0 52px 24px 0; }
.qa[open] .qa__a { animation: fade-in 0.35s var(--ease); }

/* ---------------------------------------------------------------- contact */
.contact {
  display: grid;
  overflow: hidden;
  border-radius: 32px;
  background: #fff;
  box-shadow: var(--shadow-l);
}
@media (min-width: 1000px) { .contact { grid-template-columns: 0.92fr 1.08fr; } }
.contact__info {
  padding: clamp(28px, 5vw, 56px);
  color: var(--on-dark);
  background: var(--navy-900);
}
.contact__info .eyebrow { color: var(--sky-400); }
.contact__info h3 { color: #fff; }
.contact__lead { margin: 16px 0 28px; font-size: 1.08rem; }
/* the next steps: plain yellow numerals on a thin line, so they read in order */
.next { position: relative; display: grid; gap: 14px; margin-bottom: 36px; }
.next::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 13px; width: 2px; background: rgba(194, 232, 114, 0.35); }
.next li { display: grid; grid-template-columns: 28px 1fr; align-items: baseline; gap: 14px; font-weight: 500; color: #fff; }
/* each numeral sits on a patch of the panel's navy, which breaks the line around it */
.next span {
  position: relative;
  padding-block: 3px;
  background: var(--navy-900);
  text-align: center;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--leaf-300);
}
/* how to reach STS: a ruled list, the label on the left, the number or address on the right */
.contact__list { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.contact__list > div {
  display: grid;
  grid-template-columns: 7.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.contact__list dt { font-size: 0.94rem; font-weight: 600; color: var(--sky-400); }
.contact__list dt .i { display: inline-block; width: 17px; height: 17px; margin-right: 9px; vertical-align: -0.2em; }
.contact__list dd { font-size: 1.02rem; color: #fff; }
.contact__list dd > span { display: inline-block; } /* the address wraps after the street */
.contact__list a { font-weight: 600; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.contact__list a:hover { color: var(--sun-400); }
@media (max-width: 520px) { .contact__list > div { grid-template-columns: minmax(0, 1fr); } }

.contact__form { display: grid; align-content: start; gap: 18px; padding: clamp(28px, 5vw, 56px); }
.form-head h3 { font-size: 1.5rem; }
.form-head p { font-size: 0.95rem; color: var(--muted); }
.field-row { display: grid; gap: 18px; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label,
.field legend { padding: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.field legend { margin-bottom: 8px; }
.field input,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #8a9a8f; }
.field input:focus,
.field textarea:focus {
  border-color: var(--blue-600);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 4px rgba(31, 122, 54, 0.16);
}
.field input[aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.1); }
.input-prefix { position: relative; }
.input-prefix span {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  color: var(--muted);
}
.input-prefix input { padding-left: 32px; }
.optional { font-weight: 400; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chip span .i { width: 18px; height: 18px; color: var(--blue-600); }
.chip:hover span { border-color: var(--navy-800); }
.chip input:checked + span { border-color: var(--navy-800); background: var(--navy-800); color: #fff; }
.chip input:checked + span .i { color: var(--sun-400); }
.chip input:focus-visible + span { outline: 3px solid var(--sun-400); outline-offset: 2px; }

.form-error { font-size: 0.92rem; font-weight: 600; color: #b42318; }
.send { display: grid; gap: 10px; margin-top: 4px; }
.send .btn--sun .i { width: 1.3em; height: 1.3em; }
/* the do-it-yourself ways under the main button: three small buttons (two rows on narrow phones) */
.send__or { margin-top: 4px; text-align: center; font-size: 0.86rem; color: var(--muted); }
.send__alt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.send__alt .btn { --h: 44px; gap: 8px; padding: 0 10px; font-size: 0.9rem; }
@media (max-width: 440px) {
  .send__alt { grid-template-columns: 1fr 1fr; }
  .send__alt > :first-child { grid-column: 1 / -1; }
}
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* after sending, the fields give way to a thank-you */
.form-done { display: none; justify-items: center; gap: 12px; padding: clamp(32px, 6vw, 64px) 8px; text-align: center; }
.contact__form.is-sent > :not(.form-done) { display: none; }
.contact__form.is-sent .form-done { display: grid; }
.form-done:focus { outline: none; }
.form-done__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--paper-2); color: var(--blue-600); }
.form-done__icon .i { width: 30px; height: 30px; }
.form-done h3 { font-size: 1.5rem; }
.form-done p { color: var(--muted); }
.form-note { font-size: 0.82rem; color: var(--muted); }
/* the quick quotation form that opens from a package: the package (pictures, figures, parts) beside a short form */
.quote {
  width: min(100% - 24px, 460px);
  max-height: min(94svh, 820px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 28px;
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-l);
  overscroll-behavior: contain;
}
.quote::backdrop { background: rgba(6, 38, 18, 0.72); }
.quote[open] { animation: quote-in 0.24s var(--ease); }
@keyframes quote-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .quote[open] { animation: none; } }
@media (min-width: 760px) {
  .quote { width: min(100% - 48px, 880px); }
  .quote[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.quote__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--navy-800);
  cursor: pointer;
}
.quote__close:hover { border-color: var(--navy-800); }
/* the chosen package, as it shows on the page */
.quote__item { display: grid; align-content: start; gap: 16px; padding: clamp(22px, 5vw, 32px); background: var(--paper); }
.quote__head { padding-right: 44px; }
.quote__kicker { font-family: var(--font-head); font-weight: 700; color: var(--blue-600); }
.quote__head h2 { margin-top: 2px; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.8rem); line-height: 1.1; letter-spacing: -0.035em; color: var(--ink); }
.quote__head h2:focus { outline: none; }
.quote__pkg { margin-top: 6px; font-size: 0.92rem; color: var(--muted); }
.quote__pics { display: flex; gap: 8px; }
.quote__pic { flex: none; width: clamp(60px, 17vw, 96px); aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.quote__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.quote__pic.is-cutout img,
.quote__pic.is-pair img { padding: 6px; object-fit: contain; }
.quote__details { display: grid; gap: 6px; }
.quote .pkg__stats { grid-template-columns: 1fr 1fr; margin: 0; }
.quote .pkg__stats p { padding: 10px 10px 10px 0; }
.quote .pkg__stats p + p { padding-left: 14px; border-top: 0; border-left: 1px solid var(--line); }
.quote .pkg__stats strong { font-size: clamp(1.05rem, 0.9rem + 1vw, 1.3rem); }
.quote .pkg__stats span { font-size: 0.8rem; }
.quote .kv { font-size: 0.84rem; }
.quote .kv div { flex-direction: row; gap: 10px; padding: 6px 0; }
.quote .kv dd { font-family: var(--font-body); font-weight: 600; text-align: right; }
/* the visitor's details */
.quote__form { position: relative; display: grid; align-content: start; gap: 14px; padding: clamp(22px, 5vw, 32px); }
.quote__form-title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.quote__direct { display: flex; flex-wrap: wrap; gap: 8px; }
.quote__direct .btn { --h: 44px; flex: 1 1 auto; padding: 0 14px; font-size: 0.92rem; }
@media (max-width: 480px) { .quote__num { display: none; } } /* phones dial straight away; the number shows on wider screens */
/* after sending, the fields give way to a thank-you */
.quote__done { display: none; justify-items: center; gap: 12px; padding: 8px 0 4px; text-align: center; }
.quote__form.is-sent > :not(.quote__done) { display: none; }
.quote__form.is-sent .quote__done { display: grid; }
.quote__done:focus { outline: none; }
.quote__done h3 { font-size: 1.4rem; }
.quote__done p { color: var(--muted); }

/* ---------------------------------------------------------------- footer */
.footer {
  padding: clamp(56px, 7vw, 88px) 0 28px;
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.95rem;
}
.footer__grid { display: grid; gap: 40px; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .footer__grid { grid-template-columns: 1.5fr 0.75fr 1fr 1.15fr; gap: 48px; } }
/* the owner's line, as the footer's closing statement; the second sentence in yellow */
.footer__motto {
  margin-bottom: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-head);
  font-size: clamp(2rem, 1.1rem + 3vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: #fff;
  text-wrap: balance;
}
.footer__motto span { display: block; } /* each sentence starts its own line */
.footer__motto span:last-child { color: var(--leaf-300); }
/* column headings in the kicker style */
.footer h3 {
  margin-bottom: 16px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sky-400);
}
.footer ul { display: grid; gap: 10px; }
.footer a { color: rgba(255, 255, 255, 0.84); text-decoration: none; }
.footer a:hover { color: var(--sun-400); }
.brand--light .brand__name { color: #fff; }
.brand--light .brand__sub {
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: rgba(255, 255, 255, 0.62);
}
.brand--light .brand__sub > span { white-space: nowrap; }
.footer__dot { margin-inline: 0.12em; color: var(--sky-400); }
.footer__slogan { margin: 22px 0 6px; font-family: var(--font-head); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; color: #fff; }
.footer__offer { max-width: 44ch; margin-bottom: 20px; line-height: 1.7; }
.footer__offer > span { white-space: nowrap; }
/* plain icons, no tiles; the padding keeps a comfortable tap area */
.footer__social { display: flex; gap: 6px; margin-left: -10px; }
.footer__social a { display: grid; place-items: center; width: 44px; height: 44px; color: rgba(255, 255, 255, 0.84); }
.footer__social .i { width: 22px; height: 22px; }
.footer address { margin-bottom: 16px; font-style: normal; line-height: 1.7; }
/* registration numbers: plain labels, the numbers in white with even-width figures */
.footer__reg { font-size: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer__reg div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.footer__reg dd { font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.86rem;
}

/* ---------------------------------------------------------------- floating actions */
/* quick contact: on phones a floating bar like the header (round Call and Messenger buttons, the
   consultation as the wide one); on wider screens a floating Messenger button */
.dock { position: fixed; z-index: 70; transition: transform 0.35s var(--ease); }
.dock.is-visible { transform: none; }
.dock__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.dock__btn--msg { background: var(--navy-800); color: #fff; }
@media (max-width: 759px) {
  .footer { padding-bottom: 96px; }
  .dock {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 520px;
    margin-inline: auto;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 16px 36px -14px rgba(6, 38, 18, 0.45);
    transform: translateY(calc(100% + 80px)); /* fully off screen, even above a home bar */
  }
  .dock__btn { flex: none; width: 46px; height: 46px; border-radius: 50%; }
  .dock__btn .i { width: 20px; height: 20px; }
  .dock__btn--call { background: var(--paper-2); color: var(--navy-800); }
  .dock__btn--call span,
  .dock__btn--msg span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .dock__btn--quote { flex: 1; width: auto; min-width: 0; padding: 0 18px; border-radius: 999px; background: var(--sun-400); font-size: 0.95rem; color: var(--navy-900); }
  .dock__btn--quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 760px) {
  .dock { right: 24px; bottom: 24px; transform: translateY(calc(100% + 80px)); }
  .dock__btn--call,
  .dock__btn--quote { display: none; }
  .dock__btn--msg {
    min-height: 54px;
    padding: 0 22px 0 18px;
    border-radius: 999px;
    box-shadow: 0 16px 36px -10px rgba(6, 38, 18, 0.5);
    font-size: 0.95rem;
  }
  .dock__btn--msg:hover { background: var(--navy-700); }
  .dock__btn--msg .i { width: 22px; height: 22px; color: var(--sun-400); }
}

.to-top {
  position: fixed;
  right: 24px;
  bottom: 90px;
  z-index: 69;
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--navy-800);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s var(--ease);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 760px) { .to-top { display: grid; } }

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 90;
  max-width: min(92vw, 440px);
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--navy-900);
  box-shadow: var(--shadow-l);
  font-size: 0.94rem;
  font-weight: 500;
  color: #fff;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- gallery dialog */
.gallery {
  width: min(1180px, 100% - 24px);
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: var(--navy-950);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  color: var(--on-dark);
}
.gallery[open] { display: flex; animation: pop 0.35s var(--ease); }
.gallery::backdrop { background: rgba(3, 18, 8, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
.gallery__layout { display: grid; flex: 1; grid-template-rows: auto minmax(0, 1fr); min-height: 0; width: 100%; }
.gallery__stage { position: relative; height: 50dvh; background: #000; }
.gallery__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 960px) {
  .gallery__layout { grid-template-columns: minmax(0, 1.55fr) minmax(330px, 1fr); grid-template-rows: none; height: min(780px, calc(100dvh - 24px)); }
  .gallery__stage { height: auto; }
}
.gallery__nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy-900);
  box-shadow: var(--shadow);
  transform: translateY(-50%);
  cursor: pointer;
}
.gallery__nav[hidden] { display: none; }
.gallery__nav--prev { left: 14px; }
.gallery__nav--next { right: 14px; }
.gallery__counter {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: #fff;
}
.gallery__panel { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 28px; overflow: auto; }
.gallery__panel .eyebrow { margin-bottom: 0; color: var(--sky-400); }
.gallery__panel h2 { padding-right: 44px; font-size: 1.6rem; letter-spacing: -0.035em; color: #fff; }
.gallery__meta { font-weight: 500; }
.gallery__note { padding-left: 12px; border-left: 3px solid var(--sun-400); font-style: italic; color: rgba(255, 255, 255, 0.8); }
.gallery__close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
}
.gallery__close:hover { background: rgba(255, 255, 255, 0.14); }
.specs--dark .spec { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); }
.specs--dark .spec dd { color: var(--leaf-300); }
.specs--dark .spec dt { color: rgba(255, 255, 255, 0.62); }
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; margin-top: auto; padding-top: 6px; }
.gallery__thumbs button {
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: none;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s;
}
.gallery__thumbs button:hover { opacity: 0.9; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--sun-400); opacity: 1; }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- reveal on scroll */
.js [data-reveal] {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.8s var(--ease), translate 0.8s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js [data-reveal].is-visible { opacity: 1; translate: none; }

.hero__copy > * { animation: rise 0.9s var(--ease) both; }
.hero__copy > :nth-child(2) { animation-delay: 0.08s; }
.hero__copy > :nth-child(3) { animation-delay: 0.16s; }
.hero__copy > :nth-child(4) { animation-delay: 0.24s; }
.hero__copy > :nth-child(5) { animation-delay: 0.32s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal] { opacity: 1; translate: none; }
  .marquee__track { animation: none; }
}