/* =========================================================
   YAMILL IMPACT SOLUTION — Stylesheet
   Section 1: Navbar + Hero
   (Structured so future sections drop in without refactoring)
   ========================================================= */

/* =========================== TOKENS =========================== */
:root {
  /* Brand palette */
  --carbon:     #101820;   /* dark background / dark UI surfaces */
  --white:      #FFFFFF;   /* text on dark */
  --slate:      #C9CFD4;   /* paragraph text on dark (soft grey, not pure white) */
  --mist:       #F5F7F8;   /* light section background (section 3) */
  --ink-soft:   #4A5560;   /* paragraph text on light background (section 3) */
  --teal:       #00B4D8;   /* EXCLUSIVE to the CTA button */
  --teal-deep:  #0090AD;   /* CTA hover */
  --teal-ink:   #007891;   /* WCAG AA-safe teal for teal TEXT/icons on light backgrounds (--mist/--white) — plain --teal fails 4.5:1 there */

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  /* Layout */
  --page-max:  1440px;
  --gutter:    clamp(1.25rem, 4vw, 4rem);
  --nav-h:     84px;

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--white);
  background: var(--carbon);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

/* ============================ BUTTONS ============================ */
/* Teal appears ONLY here — the CTA. Nowhere else in this section. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: 10px;
  transition: background-color .25s var(--ease-out), transform .25s var(--ease-out);
  will-change: transform;
}

.btn--cta {
  background-color: var(--teal);
  color: var(--white);
  padding: 0.95rem 1.6rem;
  font-size: 1rem;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.7);
}
.btn--cta:hover,
.btn--cta:focus-visible { background-color: var(--teal-deep); transform: scale(1.03); }
.btn--cta:active { transform: scale(0.99); }

/* =========================== NAVBAR =========================== */
.navbar {
  position: fixed;
  top: clamp(0.75rem, 1.6vw, 1.25rem);
  left: 0;
  right: 0;
  z-index: 100;
  padding-inline: var(--gutter);
}

/* Floating translucent capsule */
.nav-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 clamp(1rem, 2vw, 1.75rem);
  background: rgba(16, 24, 32, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.9);
}

/* Logo — brand PNG already in dark-mode colours (white "YAMILL", teal
   "IMPACT SOLUTION", white/teal icon) on a transparent background. No filter.
   The logo is the ONE brand-identity exception to the teal-only-on-CTA rule. */
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img {
  height: clamp(30px, 3.4vw, 42px);
  width: auto;
}

.nav-menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}
.nav-links a {
  position: relative;
  font-weight: 500;
  font-size: 1rem;
  color: var(--white);
  padding: 0.35rem 0;
  transition: opacity .2s var(--ease-out);
}
/* Hover: underline grows from the centre */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .28s var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }

/* Language toggle — same type scale/family as the nav links so it reads as
   part of the existing navbar, not a new/different element. Active = teal
   (the site's usual "active/interactive" signal), inactive = dimmed white. */
.lang-toggle { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.lang-toggle__btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 0.35rem 0.1rem;
  transition: color .2s var(--ease-out);
}
.lang-toggle__btn.is-active { color: var(--teal); }
.lang-toggle__btn:hover:not(.is-active),
.lang-toggle__btn:focus-visible:not(.is-active) { color: var(--white); }
.lang-toggle__sep { color: rgba(255, 255, 255, 0.3); font-size: 0.9rem; }

/* Products dropdown — CLICK ONLY (no :hover/:focus-within trigger by design —
   the user explicitly removed hover because it closed the panel before a
   click on Windows/Doors could land). Visibility is driven entirely by the
   .is-open class, toggled in main.js's setupProductsDropdown(); that toggle
   works with zero JS/GSAP failure too since it's a plain class, and GSAP
   layers a fade+y animation on top when available. No `transform` here on
   the panel — GSAP owns `y` exclusively so a baked-in CSS transform can
   never stack with it (see feedback-animation-hidden-state-js-only). */
.nav-dropdown { position: relative; }
.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--white);
  padding: 0.35rem 0;
}
.nav-dropdown__chevron { width: 10px; height: auto; transition: transform .2s var(--ease-out); }
.nav-dropdown.is-open .nav-dropdown__chevron { transform: rotate(180deg); }

.nav-dropdown__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: 172px;
  margin-left: -86px;
  background: rgba(16, 24, 32, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 0.5rem;
  box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nav-dropdown.is-open .nav-dropdown__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-dropdown__panel a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: 9px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--white);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.nav-dropdown__panel a:hover,
.nav-dropdown__panel a:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--teal); }
.nav-dropdown__panel a[aria-current="page"] { color: var(--teal); }
.nav-dropdown__divider { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 0.3rem 0.2rem; }
.nav-dropdown__minor { font-size: 0.82rem !important; color: rgba(255, 255, 255, 0.55) !important; }
.nav-dropdown__minor:hover, .nav-dropdown__minor:focus-visible { color: var(--white) !important; }

/* Mobile flat Windows/Doors links — hidden on desktop; shown instead of the
   dropdown at <=900px (see the .nav-dropdown mobile override below). */
.nav-links__mobile-only { display: none; }

/* Hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 2;
}
.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .2s var(--ease-out);
}

/* Backdrop behind the mobile panel */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 16, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;   /* never intercept clicks unless active */
  z-index: 90;
}

/* ============================ HERO ============================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Background photo (with a little vertical overscan for the scroll parallax) */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__bg-img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: 70% center;   /* keep the lit house in frame */
  will-change: transform, opacity;
}

/* Dark gradient so the left-side copy stays legible over the photo */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(16, 24, 32, 0.94) 0%,
      rgba(16, 24, 32, 0.80) 30%,
      rgba(16, 24, 32, 0.45) 60%,
      rgba(16, 24, 32, 0.10) 100%),
    linear-gradient(180deg,
      rgba(16, 24, 32, 0.55) 0%,
      rgba(16, 24, 32, 0.0) 25%);
}

.hero__content {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  /* Compact vertical rhythm so the whole hero fits in one viewport.
     Top padding clears the fixed navbar; the rest scales with viewport height. */
  padding: calc(var(--nav-h) + clamp(0.75rem, 2.5vh, 1.75rem)) var(--gutter) clamp(1.25rem, 4vh, 2.75rem);
}

/* Headline — Fraunces line reveal.
   Font size is capped by BOTH width (vw) and height (vh) so it shrinks on short
   laptops (e.g. 1366×768) and the hero never overflows the screen. */
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, min(6.3vw, 8.6vh), 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(0.85rem, 1.6vh, 1.35rem);
  color: var(--white);
  max-width: 15ch;
}
.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;   /* room for descenders inside the mask */
}
.line { display: block; }

.hero__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--slate);
  max-width: 42ch;
  margin: 0 0 clamp(1.1rem, 2.4vh, 1.75rem);
}

.hero__cta {
  padding: 1.1rem 2rem;
  font-size: 1.05rem;
}

/* ==================================================================
   ENTRANCE ANIMATION
   Initial hidden states are set exclusively from JS (gsap.set) — never
   here in CSS. If GSAP fails to load or motion is reduced, the hero shows
   in its final state and is never left invisible by a failed animation.
   ================================================================== */

/* ===================== SECTION 2 · WHY ===================== */
.why {
  --card-w: clamp(258px, 27vw, 326px);
  --card-gap: clamp(1rem, 1.5vw, 1.5rem);
  background: var(--carbon);
  position: relative;
}

/* --- Part A: trust bar (white marquee) --- */
.trustbar {
  background: var(--white);
  overflow: hidden;
  padding-block: clamp(0.8rem, 1.5vh, 1.1rem);
}
.trustbar__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.trustbar__set { display: flex; align-items: center; }

.tb-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: clamp(1.3rem, 2.5vw, 2.4rem);
  white-space: nowrap;
  color: var(--carbon);
}
.tb-logo__mark { font-size: clamp(1rem, 1.15vw, 1.2rem); letter-spacing: 0.02em; }
.tb-logo__mark--serif { font-family: var(--font-display); font-weight: 600; }
.tb-logo__mark--heavy { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.04em; }
.tb-logo__div { width: 1px; height: 20px; background: rgba(16, 24, 32, 0.28); }
.tb-logo__sub {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.5rem;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(16, 24, 32, 0.68);
}
.tb-sep { width: 1px; height: 26px; background: rgba(16, 24, 32, 0.15); flex: none; }
.tb-cred {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: clamp(0.62rem, 0.72vw, 0.74rem);
  letter-spacing: 0.14em;
  color: rgba(16, 24, 32, 0.72);
  padding-inline: clamp(0.95rem, 1.9vw, 1.65rem);
  white-space: nowrap;
}
.tb-dot { color: rgba(16, 24, 32, 0.4); font-size: 0.8rem; }

/* --- Part B: why block --- */
.why__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vh, 6rem) 0 clamp(3.5rem, 8vh, 6rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 1px minmax(0, 1.2fr);
  column-gap: clamp(1.75rem, 4vw, 4rem);
  align-items: stretch;
}

.why__intro { align-self: center; }
.why__eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: clamp(0.68rem, 0.8vw, 0.78rem);
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 clamp(1.1rem, 2.2vh, 1.6rem);
}
.why__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0 0 clamp(1.1rem, 2.4vh, 1.6rem);
}
.why__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--slate);
  max-width: 30ch;
  margin: 0;
}

.why__divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
  align-self: stretch;
  justify-self: center;
}

/* --- Cards carousel --- */
.why__carousel { min-width: 0; }
.cards-viewport { overflow: hidden; }
.cards-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.cards-set { display: flex; }

.wcard {
  width: var(--card-w);
  flex: none;
  margin-right: var(--card-gap);
  display: flex;
  flex-direction: column;
  justify-content: center;   /* icon + title + desc balanced & centred */
  align-items: center;
  text-align: center;
  gap: 1rem;
  min-height: clamp(300px, 38vh, 356px);
  padding: clamp(1.9rem, 3vh, 2.6rem) clamp(1.25rem, 2vw, 1.75rem);
  background: #151e29;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}
.wcard__icon { color: var(--white); line-height: 0; }
.wcard__icon svg { width: clamp(80px, 8vw, 96px); height: auto; }
.wcard__icon .ic-teal { stroke: var(--teal); }
.wcard__icon .ic-teal-fill { fill: var(--teal); stroke: none; }
.wcard__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.15;
  color: var(--white);
  margin: 0;
}
.wcard__desc {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.5;
  color: var(--slate);
  margin: 0;
}

.cards-dots {
  display: flex;
  gap: 0.55rem;
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background-color 0.3s var(--ease-out);
}
.dot.is-active { background: var(--teal); }

/* Section 2 — mobile: stack intro above carousel, hide vertical divider */
@media (max-width: 860px) {
  .why { --card-w: 78vw; }
  .why__inner {
    grid-template-columns: 1fr;
    padding: clamp(2.75rem, 6vh, 4rem) 0 clamp(2.75rem, 6vh, 4rem) var(--gutter);
    row-gap: clamp(1.5rem, 4vh, 2rem);
  }
  .why__intro { align-self: start; max-width: 40ch; }
  .why__divider { display: none; }
}

/* ============ SECTION 3 · PRODUCTS (light band, windows carousel) ============ */
.products {
  --pcard-w: clamp(280px, 26vw, 380px);   /* square cards, ~3-4 visible */
  --pcard-gap: clamp(1rem, 1.6vw, 1.5rem);
  background: var(--mist);
  padding-block: clamp(2.5rem, 5.5vh, 4rem);
  overflow: hidden;   /* full-bleed carousel never spills horizontally */
}
/* windows.html/doors.html: .products is the FIRST section (no hero above it
   to already clear the fixed navbar), so it needs extra top padding — home
   page's S3/S4 never need this, hence a modifier rather than touching .products. */
.products--first { padding-top: calc(var(--nav-h) + clamp(2rem, 4.5vh, 3.25rem)); }

.products__head {
  max-width: 60rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.products__eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--teal-ink);
  letter-spacing: 0.2em;
  font-size: clamp(0.7rem, 0.8vw, 0.8rem);
  margin: 0 0 1rem;
}
.products__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--carbon);
  margin: 0;
}
.products__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: clamp(1rem, 2vh, 1.5rem) auto 0;
}

.products__carousel { margin-top: clamp(1.75rem, 3.5vh, 2.75rem); }
.pcards-viewport, .dcards-viewport { overflow: hidden; }   /* .dcards-* = section 4 (doors) */
.pcards-track, .dcards-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.pcards-set, .dcards-set { display: flex; }

.pcard {
  width: var(--pcard-w);
  flex: none;
  margin-right: var(--pcard-gap);
  background: var(--white);
  border: 1px solid rgba(16, 24, 32, 0.09);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 34px -22px rgba(16, 24, 32, 0.35);
}
.pcard__media {
  /* The card matches the photos' 1:1 ratio, so cover fills it edge-to-edge with
     no empty bands and the window is never cropped (container ratio == image
     ratio). The grey matches the studio backdrop as a safety for any sliver. */
  aspect-ratio: 1 / 1;
  background: #e6e6e6;
}
.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.pcard__body { padding: clamp(0.9rem, 1.2vw, 1.2rem) clamp(1.1rem, 1.4vw, 1.35rem) clamp(1.2rem, 1.5vw, 1.4rem); }
.pcard__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.2;
  color: var(--carbon);
  margin: 0;
  min-height: 2.4em;   /* reserve 2 lines so all cards align */
}
.pcard__line {
  display: block;
  width: 42px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  margin-top: 0.85rem;
}

.pcards-dots, .dcards-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  padding-inline: var(--gutter);
}
/* Dots share .dot with section 2, but here they sit on a LIGHT background,
   so inactive dots need a mid-grey (the shared white is invisible on --mist). */
.pcards-dots .dot, .dcards-dots .dot { background: #B0B8BF; }
.pcards-dots .dot.is-active, .dcards-dots .dot.is-active { background: var(--teal); }

/* "View All Windows/Doors" — secondary/outline treatment (never the teal CTA
   fill), same AA-safe teal-ink used elsewhere on the light --mist band. */
.products__viewall-wrap { text-align: center; margin-top: clamp(1.5rem, 3vh, 2rem); }
.btn--outline-teal.products__viewall { color: var(--teal-ink); border-color: var(--teal-ink); }

/* ============ FRAME COLOR SWATCHES (reusable — home S3/S4 + windows.html/doors.html) ============
   Lives on the light --mist band in all 4 locations, so labels/note use
   --ink-soft (not --slate) and the accent ring uses --teal-ink (not --teal) —
   the same AA-safe swap already used for every other light-band accent on
   this site (plain --slate/--teal fail contrast on --mist/--white). */
.swatches { margin-top: clamp(1.5rem, 3vh, 2rem); }
.swatches__groups {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.swatches__group { text-align: center; }
.swatches__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
}
.swatches__row { display: flex; gap: 0.75rem; justify-content: center; }

.swatch {
  position: relative;
  width: clamp(28px, 3vw, 32px);
  height: clamp(28px, 3vw, 32px);
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(16, 24, 32, 0.14);
  transition: box-shadow 0.2s var(--ease-out);
}
.swatch--white { background: #F2F1EC; border-color: rgba(16, 24, 32, 0.22); }
.swatch--bronze { background: #5A4531; }
.swatch--black { background: #1C1C1C; }
.swatch--clear { background: #C9C9C3; }

.swatch:hover, .swatch:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 120, 145, 0.35), 0 0 0 1.5px var(--teal-ink);
  outline: none;
}

.swatch__tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--carbon);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  white-space: nowrap;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s var(--ease-out), visibility 0.15s;
  z-index: 5;
}
.swatch__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--carbon);
}
.swatch:hover .swatch__tooltip,
.swatch:focus-visible .swatch__tooltip,
.swatch.is-active .swatch__tooltip {
  opacity: 1;
  visibility: visible;
}

/* Edge swatches: anchor the tooltip to the swatch's own edge instead of
   centering it, so the longest name ("Clear Anodize") never overflows the
   viewport on narrow screens — verified clipped by ~8px at 390px before this. */
.swatches__row .swatch:first-child .swatch__tooltip { left: 0; transform: none; }
.swatches__row .swatch:first-child .swatch__tooltip::after { left: 14px; transform: none; }
.swatches__row .swatch:last-child .swatch__tooltip { left: auto; right: 0; transform: none; }
.swatches__row .swatch:last-child .swatch__tooltip::after { left: auto; right: 14px; transform: none; }

.swatches__note {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
  max-width: 46ch;
  margin: clamp(1rem, 2vh, 1.5rem) auto 0;
}

@media (max-width: 480px) {
  .swatches__groups { gap: 1.5rem 2rem; }
}

@media (max-width: 640px) {
  /* One large square card (~82vw) with a subtle peek of the neighbour. */
  .products { --pcard-w: 82vw; }
}

/* ============ PRODUCT CATALOG GRID (windows.html / doors.html) ============
   Reuses .pcard/.pcard__media/.pcard__name/.pcard__line as-is (same visual
   card as the home carousels) inside a CSS grid instead of the flex track —
   .pgrid overrides just the carousel-only sizing (fixed width/margin-right). */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
  max-width: var(--page-max);
  margin: clamp(1.75rem, 3.5vh, 2.75rem) auto 0;
  padding-inline: var(--gutter);
}
.pgrid .pcard { width: 100%; margin-right: 0; }
.pgrid .pcard__media { overflow: hidden; }
.pgrid .pcard__media img { transition: transform .4s var(--ease-out); }
.pgrid .pcard:hover .pcard__media img { transform: scale(1.03); }

@media (max-width: 1024px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: clamp(0.7rem, 3vw, 1.1rem); }
  .pgrid .pcard__body { padding: clamp(0.7rem, 2.5vw, 0.9rem); }
  .pgrid .pcard__name { font-size: clamp(0.85rem, 3.4vw, 1rem); min-height: 2.3em; }
}

/* ============ SECTION 5 · HOW IT WORKS + SCHEDULE WIZARD ============ */
.howto {
  background: var(--mist);
  padding-block: clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
}
.howto__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* --- Left: intro + steps --- */
.howto__eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--teal-ink);
  font-size: clamp(0.7rem, 0.8vw, 0.8rem);
  letter-spacing: 0.2em;
  margin: 0 0 1.1rem;
}
.howto__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--carbon);
  margin: 0 0 1.1rem;
  max-width: 15ch;
}
.howto__subtitle {
  font-family: var(--font-body);
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 clamp(2rem, 4vh, 3rem);
}
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 1.1vw, 1.15rem); }
.step-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(16, 24, 32, 0.09);
  border-radius: 14px;
  padding: clamp(1.1rem, 1.5vw, 1.4rem);
}
.step-card__num { font-family: var(--font-mono); color: var(--teal-ink); font-weight: 500; font-size: 0.95rem; }
.step-card__icon {
  position: absolute;
  top: clamp(1rem, 1.5vw, 1.35rem);
  right: clamp(1rem, 1.5vw, 1.35rem);
  color: var(--teal-ink);
  line-height: 0;
}
.step-card__icon svg { width: clamp(30px, 3vw, 36px); height: auto; }
.step-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--carbon);
  font-size: 1.02rem;
  line-height: 1.25;
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0.4rem;
}
.step-card__desc { font-family: var(--font-body); color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; margin: 0; }

/* --- Right: dark wizard card --- */
.wizard-card {
  background: var(--carbon);
  color: var(--white);
  border-radius: 20px;
  padding: clamp(1.4rem, 2.4vw, 2.4rem);
  color-scheme: dark;   /* native date picker renders dark */
  box-shadow: 0 30px 60px -30px rgba(16, 24, 32, 0.5);
}

/* Step indicator */
.wsteps { display: flex; align-items: center; margin-bottom: clamp(1.4rem, 3vh, 1.9rem); }
.wstep {
  width: clamp(30px, 3.4vw, 36px);
  height: clamp(30px, 3.4vw, 36px);
  flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}
.wstep.is-done { border-color: var(--teal); color: var(--teal); }
.wstep.is-active { background: var(--teal); border-color: var(--teal); color: var(--white); }
.wline { flex: 1; height: 1.5px; background: rgba(255, 255, 255, 0.18); margin: 0 clamp(0.25rem, 0.6vw, 0.5rem); }
.wline.is-done { background: var(--teal); }

.wizard__stepno {
  font-family: var(--font-mono);
  color: var(--teal);
  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  letter-spacing: 0.18em;
  margin: 0 0 0.9rem;
}

.wpanels { position: relative; }
.wpanel__q {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--white);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.22;
  margin: 0 0 1.2rem;
}
.wpanel__optional {
  font-family: var(--font-body);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.62em;
  letter-spacing: 0.01em;
}

/* Product options (step 1) */
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1.1rem 0.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.opt svg { width: 34px; height: auto; color: rgba(255, 255, 255, 0.85); transition: color 0.2s; }
.opt[aria-pressed="true"] { border-color: var(--teal); background: rgba(0, 180, 216, 0.12); }
.opt[aria-pressed="true"] svg, .opt[aria-pressed="true"] span { color: var(--teal); }

/* Time slots (step 2) */
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.4rem; }
.slot {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.8rem 0.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.slot small { color: rgba(255, 255, 255, 0.5); font-size: 0.7rem; font-weight: 400; }
.slot[aria-pressed="true"] { border-color: var(--teal); background: rgba(0, 180, 216, 0.12); }

/* Inputs */
.wlabel { display: block; font-family: var(--font-body); font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); margin: 0 0 0.5rem; }
.wlabel--mt { margin-top: 1.1rem; }
.wpanel__note { font-family: var(--font-body); font-size: 0.78rem; color: var(--slate); margin: 0.6rem 0 0; line-height: 1.4; }
.winput {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
}
.winput:focus { outline: none; border-color: var(--teal); }
.winput::placeholder { color: rgba(255, 255, 255, 0.35); }

.wpanel__err { color: #ff9a9a; font-family: var(--font-body); font-size: 0.82rem; margin: 0.7rem 0 0; min-height: 1.1em; }

/* Progress */
.wprogress { display: flex; align-items: center; gap: 0.9rem; margin-top: clamp(1.2rem, 2.5vh, 1.6rem); }
.wprogress__label { font-family: var(--font-mono); font-size: 0.76rem; color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
.wprogress__track { flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.wprogress__fill { height: 100%; background: var(--teal); border-radius: 999px; transform-origin: left center; transform: scaleX(0.2); }

/* Nav */
.wnav { display: flex; align-items: center; gap: 1rem; margin-top: clamp(1.2rem, 2.5vh, 1.6rem); }
.wcontinue {
  flex: 1;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  border: 0;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
}
.wcontinue:hover { background: var(--teal-deep); }
.wcontinue:active { transform: scale(0.99); }
.wback { order: -1; background: none; border: 0; color: rgba(255, 255, 255, 0.6); font-family: var(--font-body); font-size: 0.95rem; cursor: pointer; padding: 0.6rem 0.4rem; }
.wback:hover { color: var(--white); }
.wback[hidden] { display: none; }

/* Success */
.wsuccess { text-align: center; padding: clamp(1rem, 3vh, 2rem) 0; }
.wsuccess__icon { color: var(--teal); display: inline-block; line-height: 0; }
.wsuccess__icon svg { width: 58px; height: auto; }
.wsuccess__title { font-family: var(--font-display); font-weight: 500; color: var(--white); font-size: 1.6rem; margin: 1rem 0 0.6rem; }
.wsuccess__msg { color: var(--white); font-family: var(--font-body); font-size: 1.02rem; line-height: 1.5; margin: 0 auto; max-width: 36ch; }
.wsuccess__es { color: rgba(255, 255, 255, 0.6); font-family: var(--font-body); font-size: 0.9rem; line-height: 1.5; margin: 0.6rem auto 0; max-width: 36ch; }
.wsuccess[hidden] { display: none; }

/* Divider + WhatsApp + language line */
.wizard__divider { height: 1px; background: rgba(255, 255, 255, 0.12); margin: clamp(1.2rem, 2.5vh, 1.6rem) 0; }
.wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.95rem 1.5rem;
  border: 1.5px solid var(--teal);
  border-radius: 12px;
  color: var(--teal);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.2s;
}
.wa-btn svg { width: 22px; height: auto; }
.wa-btn:hover { background: rgba(0, 180, 216, 0.1); }
.wizard__lang { font-family: var(--font-body); text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; margin: 0.9rem 0 0; }

/* Section 5 — stack columns; compact steps on small screens */
@media (max-width: 900px) {
  .howto__inner { grid-template-columns: 1fr; gap: clamp(2rem, 5vh, 3rem); align-items: stretch; }
  .howto__title { max-width: 20ch; }
  .howto__subtitle { max-width: 52ch; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .step-card { padding: 1.1rem 1.2rem; }
  .step-card__title { margin-top: 1.4rem; }
  .opts { grid-template-columns: 1fr; }
  .opt { flex-direction: row; justify-content: flex-start; gap: 0.9rem; padding: 0.9rem 1rem; font-size: 1rem; }
  .opt svg { width: 28px; }
  .slots { grid-template-columns: 1fr; }
  .slot { flex-direction: row; align-items: baseline; gap: 0.5rem; }
}

/* ============ SECTION 6 · FEATURED PROJECTS (dark, arrow carousel) ============ */
.projects {
  background: var(--carbon);
  padding-block: clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
}
.projects__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* --- Left: image carousel --- */
.proj-media { position: relative; }
.proj-media__viewport {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  overflow: hidden;
  background: #1c2732;   /* neutral safety backdrop; photos are already 3:2 */
}
.proj-slide { position: absolute; inset: 0; display: none; }
.proj-slide.is-active { display: block; }
.proj-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.proj-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(40px, 4.5vw, 48px);
  height: clamp(40px, 4.5vw, 48px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(16, 24, 32, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  z-index: 2;
}
.proj-arrow svg { width: 42%; height: 42%; }
.proj-arrow--prev { left: clamp(0.6rem, 1.5vw, 1.1rem); }
.proj-arrow--next { right: clamp(0.6rem, 1.5vw, 1.1rem); }
.proj-arrow:hover, .proj-arrow:focus-visible {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 4px 16px rgba(0, 180, 216, 0.45);
}
.proj-arrow:active { transform: translateY(-50%) scale(0.94); }

.proj-dots { display: flex; justify-content: center; gap: 0.55rem; margin-top: clamp(1.25rem, 2.5vh, 1.75rem); }

/* --- Right: switching content --- */
.proj-content { min-width: 0; }
.proj-eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--teal);
  font-size: clamp(0.7rem, 0.8vw, 0.8rem);
  letter-spacing: 0.2em;
  margin: 0 0 1.1rem;
}

/* All panels are stacked on the SAME grid cell (grid-area: 1 / 1) instead of
   toggling display:none/block in normal flow. This keeps every panel — active
   or not — contributing to the row's height at all times, so the row itself
   never grows/shrinks when the outgoing and incoming panel briefly coexist
   during the cross-fade (which was collapsing/jumping the whole block). Only
   visibility/opacity change; nothing ever leaves the grid to affect sizing. */
.proj-panels { display: grid; align-items: start; }
.proj-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.proj-panel.is-active { visibility: visible; opacity: 1; }

.proj-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.85rem, 3.3vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 1.1rem;
  max-width: 18ch;
  /* Pinned to the longest title among all 10 projects (3 lines) so switching
     projects never changes this box's height and shifts the image below it.
     Verified against all 10 (incl. projects 7-10 added later) — still holds. */
  min-height: 3.42em;
}
.proj-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.65;
  color: var(--slate);
  max-width: 52ch;
  margin: 0 0 clamp(1.75rem, 3.5vh, 2.5rem);
  /* Pinned to the longest description among all 10 projects (5 lines) — same
     reasoning as .proj-title above. Verified against all 10 — still holds. */
  min-height: 8.25em;
}

.proj-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.proj-stat { display: flex; align-items: flex-start; gap: 0.6rem; }
.proj-stat__icon { color: var(--teal); flex: none; line-height: 0; }
.proj-stat__icon svg { width: clamp(22px, 2.2vw, 26px); height: auto; }
.proj-stat__text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.proj-stat__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
}
.proj-stat__value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.9rem, 1vw, 0.98rem);
  color: var(--white);
  line-height: 1.3;
  /* "Impact Windows & Doors" wraps to 2 lines while shorter values sit on 1 —
     pin to 2 lines so that difference never changes the block's height either. */
  min-height: 2.6em;
}

/* Section 6 — mobile: image stays first in source order (already on top), content stacks below */
@media (max-width: 900px) {
  .projects__inner { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vh, 2.5rem); }
  .proj-title { max-width: 22ch; }
}
@media (max-width: 560px) {
  .proj-stats { grid-template-columns: 1fr; gap: 0.9rem; }
}

/* ============ SECTION 7A · FAQ STRIP (light, thin) ============ */
.faq-strip { background: var(--mist); }
.faq-strip__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(0.9rem, 1.8vh, 1.15rem) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
}
.faq-strip__text {
  font-family: var(--font-body);
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.4;
  margin: 0;
  max-width: 46ch;
}
.faq-strip__btn { flex: none; }

.btn--outline-teal {
  background: transparent;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  padding: 0.65rem 1.35rem;
  font-size: 0.92rem;
}
.btn--outline-teal:hover,
.btn--outline-teal:focus-visible { background: rgba(0, 180, 216, 0.08); }
/* This button sits on the light --mist strip, where plain --teal text fails AA;
   compound selector so it wins over .btn--outline-teal without touching the
   shared class (also used on dark backgrounds, e.g. the FAQ page's closing CTA). */
.btn--outline-teal.faq-strip__btn { color: var(--teal-ink); border-color: var(--teal-ink); }

/* ============ SECTION 7B · FINAL CTA (dark) ============ */
.cta-final { background: var(--carbon); padding-block: clamp(4rem, 9vh, 7rem); }
.cta-final__inner {
  max-width: 780px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.cta-final__eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--teal);
  letter-spacing: 0.2em;
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  margin: 0 0 1.25rem;
}
.cta-final__title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--white);
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}
.cta-final__subtitle {
  font-family: var(--font-body);
  color: var(--slate);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto 0.85rem;
}
.cta-final__lang {
  font-family: var(--font-body);
  color: var(--slate);
  opacity: 0.8;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  margin: 0 auto clamp(2rem, 4vh, 2.75rem);
}
.cta-final__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cta-final__schedule,
.cta-final__whatsapp { min-width: 200px; }
.btn--outline-white {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  color: var(--white);
  padding: 0.95rem 1.6rem;
  font-size: 1rem;
  gap: 0.6rem;
}
.btn--outline-white:hover,
.btn--outline-white:focus-visible { background: rgba(255, 255, 255, 0.08); }
.btn--outline-white svg { width: 20px; height: auto; }

/* Section 7 — mobile: stack the strip and the two CTA buttons */
@media (max-width: 640px) {
  .faq-strip__inner { justify-content: center; text-align: center; }
  .faq-strip__text { max-width: none; }
  .cta-final__actions { flex-direction: column; }
  .cta-final__schedule,
  .cta-final__whatsapp { width: 100%; max-width: 320px; }
}

/* =========================================================
   FAQ PAGE (faq.html) — hero band, accordion, closing CTA
   Same navbar/tokens as index.html; independent classnames so
   nothing here can ever affect the real Hero (Section 1).
   ========================================================= */

/* --- FAQ hero band (compact, dark photo band under the floating navbar) --- */
.faq-hero {
  position: relative;
  min-height: clamp(300px, 38vw, 420px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.faq-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.faq-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.faq-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(16, 24, 32, 0.94) 0%, rgba(16, 24, 32, 0.82) 35%, rgba(16, 24, 32, 0.55) 70%, rgba(0, 180, 216, 0.22) 100%),
    linear-gradient(180deg, rgba(16, 24, 32, 0.5) 0%, rgba(16, 24, 32, 0) 30%);
}
.faq-hero__content {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(1.5rem, 3vh, 2.25rem)) var(--gutter) clamp(1.5rem, 4vh, 2.25rem);
  text-align: center;
}
.faq-hero__eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--teal);
  letter-spacing: 0.2em;
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  margin: 0 0 1rem;
}
.faq-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--white);
  font-size: clamp(2.1rem, 4.8vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 auto 0.9rem;
  max-width: 20ch;
}
.faq-hero__subtitle {
  font-family: var(--font-body);
  color: var(--slate);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.5;
  max-width: 52ch;
  margin: 0 auto;
}

/* --- Accordion list --- */
.faq-list { background: var(--mist); padding-block: clamp(2.5rem, 6vh, 4rem); }
.faq-list__inner { max-width: 860px; margin: 0 auto; padding-inline: var(--gutter); }

.faq-item {
  border-bottom: 1px solid rgba(16, 24, 32, 0.1);
  padding-block: clamp(1.1rem, 2.2vh, 1.5rem);
}
.faq-item:first-child { padding-top: 0; }

.faq-item__summary {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  padding-right: clamp(2rem, 4vw, 2.5rem);
  position: relative;
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary::marker { content: ""; }

.faq-item__num {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(38px, 3.6vw, 46px);
  height: clamp(38px, 3.6vw, 46px);
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  color: var(--teal-ink);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
}
.faq-item__q {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--carbon);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.35;
  padding-top: 0.35rem;
}
.faq-item__icon {
  position: absolute;
  top: 0.5rem;
  right: 0;
  color: var(--teal-ink);
  flex: none;
  line-height: 0;
}
.faq-item__icon svg { width: clamp(18px, 1.8vw, 22px); height: auto; }

.faq-item__panel { overflow: hidden; height: 0; }
.faq-item__a {
  font-family: var(--font-body);
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.65;
  max-width: 68ch;
  margin: clamp(0.75rem, 1.6vh, 1rem) 0 0;
  padding-left: calc(clamp(38px, 3.6vw, 46px) + clamp(0.9rem, 2vw, 1.5rem));
}

/* --- Closing CTA strip --- */
.faq-cta { background: var(--carbon); padding-block: clamp(2.5rem, 5vh, 3.5rem); }
.faq-cta__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
}
.faq-cta__title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--white);
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  line-height: 1.15;
  margin: 0 0 0.4rem;
}
.faq-cta__subtitle {
  font-family: var(--font-body);
  color: var(--slate);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  margin: 0;
}
.faq-cta__divider { display: none; }
.faq-cta__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; flex: none; }
.faq-cta__whatsapp { padding: 0.95rem 1.6rem; font-size: 1rem; gap: 0.6rem; }
.faq-cta__whatsapp svg { width: 20px; height: auto; }

/* FAQ page — mobile */
@media (max-width: 900px) {
  .faq-item__q { font-size: clamp(1rem, 3.6vw, 1.15rem); }
}
@media (max-width: 640px) {
  .faq-cta__inner { flex-direction: column; text-align: center; }
  .faq-cta__actions { flex-direction: column; width: 100%; }
  .faq-cta__whatsapp,
  .faq-cta__schedule { width: 100%; max-width: 320px; }
  .faq-item__a { padding-left: 0; }
  .faq-item__summary { gap: 0.75rem; }
}

/* =========================================================
   SECONDARY PAGE · LEGAL CONTENT (terms.html)
   Plain long-form prose sections; reuses the hero (.faq-hero*)
   and closing CTA (.faq-cta*) blocks from the FAQ page above.
   ========================================================= */
.legal-content { background: var(--mist); padding-block: clamp(2.5rem, 6vh, 4rem); }
.legal-content__inner { max-width: 780px; margin: 0 auto; padding-inline: var(--gutter); }
.legal-updated {
  font-family: var(--font-mono);
  color: var(--ink-soft);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  margin: 0 0 clamp(2rem, 4vh, 2.75rem);
}
.legal-section { padding-block: clamp(1.4rem, 3vh, 2rem); border-bottom: 1px solid rgba(16, 24, 32, 0.1); }
.legal-section:first-of-type { padding-top: 0; }
.legal-section:last-child { border-bottom: none; padding-bottom: 0; }
.legal-section__title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--carbon);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  margin: 0 0 0.85rem;
}
.legal-section__text {
  font-family: var(--font-body);
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.05vw, 1.02rem);
  line-height: 1.7;
  max-width: 68ch;
  margin: 0 0 1rem;
}
.legal-section__text:last-child { margin-bottom: 0; }
.legal-section__text strong { color: var(--carbon); font-weight: 600; }
.legal-note {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.55;
  max-width: 68ch;
  margin: 0 0 clamp(2rem, 4vh, 2.75rem);
}
.legal-section__list {
  list-style: disc;
  padding-left: 1.25rem;
  font-family: var(--font-body);
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.05vw, 1.02rem);
  line-height: 1.7;
  max-width: 68ch;
  margin: 0 0 1rem;
}
.legal-section__list li { margin-bottom: 0.4rem; }
.legal-section__list li:last-child { margin-bottom: 0; }
.legal-section__list strong { color: var(--carbon); font-weight: 600; }

/* =========================================================
   FOOTER — last section of the site, identical on every page
   ========================================================= */
.site-footer { background: var(--carbon); }

.site-footer__top { padding-block: clamp(2.75rem, 6vh, 4.5rem); }
.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.15fr 0.9fr 0.9fr;
  gap: clamp(2rem, 4vw, 3rem);
}

.footer-col { min-width: 0; }
.footer-col__title {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--teal);
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  margin: 0 0 1.1rem;
}

/* --- Column 1: brand --- */
.footer-logo { display: inline-flex; }
.footer-logo img { height: clamp(30px, 3vw, 38px); width: auto; }
.footer-tagline {
  font-family: var(--font-body);
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 32ch;
  margin: 1rem 0 0;
}

/* --- Column 2: contact --- */
.footer-contact__item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-family: var(--font-body);
  color: var(--white);
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 0.9rem;
  transition: color 0.2s var(--ease-out);
}
.footer-contact__item:hover,
.footer-contact__item:focus-visible { color: var(--teal); }
.footer-contact__icon { width: 18px; height: auto; flex: none; margin-top: 0.1rem; color: inherit; }
.footer-contact__item--whatsapp { color: var(--teal); }
.footer-contact__item--address span { max-width: 24ch; }

.footer-map {
  border-radius: 12px;
  overflow: hidden;
  margin-top: 0.5rem;
  filter: grayscale(20%) contrast(1.05);
  background: #1c2732;
}
.footer-map__frame { display: block; border: 0; }
.footer-map__link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--teal);
  font-size: 0.85rem;
  margin-top: 0.65rem;
}
.footer-map__link:hover,
.footer-map__link:focus-visible { text-decoration: underline; }

/* --- Columns 3 & 4: lists --- */
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 0.75rem; font-family: var(--font-body); color: var(--slate); font-size: 0.95rem; }
.footer-list__primary { color: var(--white); font-weight: 600; }
.footer-list a { color: var(--slate); transition: color 0.2s var(--ease-out); }
.footer-list a:hover,
.footer-list a:focus-visible { color: var(--teal); }

/* --- Legal strip --- */
.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: clamp(1.25rem, 2.5vh, 1.75rem) var(--gutter);
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}
.footer-legal__copy { font-family: var(--font-body); color: var(--slate); font-size: 0.82rem; margin: 0; }
.footer-legal__links { display: flex; gap: 1.5rem; }
.footer-legal__links a { font-family: var(--font-body); color: var(--slate); font-size: 0.82rem; transition: color 0.2s var(--ease-out); }
.footer-legal__links a:hover,
.footer-legal__links a:focus-visible { color: var(--teal); }

/* Footer — mobile: single column, generous spacing */
@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .site-footer__legal { flex-direction: column; text-align: center; }
}

/* =========================================================
   CONTACT PAGE (contact.html) — reuses .howto's layout/tokens;
   these are just the contact-info + map block on the light side.
   ========================================================= */
.contact-info { display: flex; flex-direction: column; gap: 0.9rem; margin: 0 0 1.75rem; }
.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-family: var(--font-body);
  color: var(--carbon);
  font-size: 1rem;
  line-height: 1.4;
  transition: color 0.2s var(--ease-out);
}
.contact-info__item:hover,
.contact-info__item:focus-visible { color: var(--teal-ink); }
.contact-info__icon { width: 20px; height: auto; flex: none; margin-top: 0.15rem; color: var(--teal-ink); }
.contact-info__item--whatsapp { color: var(--teal-ink); }

.contact-map { border-radius: 12px; overflow: hidden; max-width: 460px; background: #e7e9ea; }
.contact-map iframe { display: block; border: 0; border-radius: 8px; }

/* Honeypot anti-bot field: positioned off-screen (never display:none —
   some bots skip hidden fields only when detected via computed display). */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ========================= RESPONSIVE ========================= */
@media (max-width: 900px) {
  :root { --nav-h: 72px; }

  .nav-toggle { display: flex; }

  /* Off-canvas panel */
  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(82vw, 340px);
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2.25rem;
    padding: 5rem 2rem 2rem;
    background: rgba(16, 24, 32, 0.98);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-left: 1px solid rgba(255, 255, 255, 0.10);
    transform: translateX(100%);   /* start off-screen; GSAP slides it in */
    z-index: 95;
  }

  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .nav-links a { font-size: 1.35rem; }
  .nav-links a::after { height: 2px; }

  /* Products dropdown -> two flat links on mobile (nested dropdowns are
     awkward on touch); .nav-links__mobile-only mirrors .nav-links a exactly. */
  .nav-dropdown { display: none; }
  .nav-links__mobile-only { display: block; }

  .lang-toggle__btn { font-size: 1.1rem; }

  .nav-cta { width: 100%; padding: 1rem 1.5rem; }

  /* Hamburger → X */
  .nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-backdrop.is-active { pointer-events: auto; }

  /* Lock scroll when the menu is open */
  .nav-open, .nav-open body { overflow: hidden; }
}

@media (max-width: 480px) {
  .hero__title { max-width: 12ch; }
  .hero__subtitle { max-width: 34ch; }
  .hero__cta { width: 100%; }
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .btn { transition: background-color .2s ease; }
  .btn--cta:hover { transform: none; }
}