/* =========================================================
   Heatwave Pools & Spas — styles.css
   "Desert Oasis" — cool pool tones grounded in desert warmth.
   Signature: The Waterline (rippling dividers + caustic shimmer).
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --c-deep:   #06414f;
  --c-deep-2: #052e38;
  --c-aqua:   #16a6bc;
  --c-aqua-2: #43c6d6;
  --c-white:  #fbfcfd;
  --c-sand:   #f3e8d4;
  --c-sand-2: #faf3e6;
  --c-terra:  #dd7a5b;
  --c-sun:    #e9a23c;
  --c-ink:    #16252b;
  --c-ink-soft: #4a5b62;
  --c-line:   #e4e9ea;

  --grad-heat: linear-gradient(100deg, var(--c-sun) 0%, var(--c-terra) 34%, var(--c-aqua) 72%, var(--c-deep) 100%);
  --grad-deep: linear-gradient(160deg, var(--c-deep) 0%, var(--c-deep-2) 100%);

  --shadow-sm: 0 2px 10px rgba(6, 65, 79, .07);
  --shadow-md: 0 14px 40px rgba(6, 65, 79, .12);
  --shadow-lg: 0 30px 70px rgba(6, 65, 79, .22);

  --radius: 18px;
  --radius-sm: 12px;

  --container: min(1200px, 92vw);
  --header-h: 76px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { list-style: none; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-aqua); outline-offset: 3px; border-radius: 4px; }

.container { width: var(--container); margin-inline: auto; }

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 1000;
  background: var(--c-deep); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------- Type scale ---------- */
.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-aqua); margin-bottom: .9rem;
}
.eyebrow--light { color: var(--c-aqua-2); }

.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.04;
  letter-spacing: -.015em;
  font-size: clamp(1.9rem, 1.3rem + 2.7vw, 3.2rem);
  color: var(--c-deep);
}
.section--deep .section__title,
.section--deep .eyebrow { color: #fff; }
.section--deep .section__title { color: #fff; }

.section__lead {
  margin-top: 1rem; max-width: 54ch; color: var(--c-ink-soft);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-weight: 700; letter-spacing: .01em;
  padding: .85em 1.5em; border-radius: 100px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  will-change: transform;
}
.btn--sm { padding: .6em 1.15em; font-size: .92rem; }
.btn--lg { padding: 1em 1.8em; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--c-aqua); color: #fff; box-shadow: 0 8px 22px rgba(22,166,188,.35); }
.btn--primary:hover { background: var(--c-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(6,65,79,.3); }
.btn--ghost { color: #fff; border: 1.5px solid rgba(255,255,255,.6); backdrop-filter: blur(4px); }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-2px); }
.btn--outline { color: var(--c-deep); border: 1.5px solid rgba(6,65,79,.28); }
.btn--outline:hover { border-color: var(--c-deep); background: rgba(6,65,79,.06); transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--c-deep); }
.btn--light:hover { background: var(--c-sand); transform: translateY(-2px); }

/* ---------- Wordmark / logo ---------- */
.wordmark { display: inline-flex; align-items: center; }
.wordmark__img { display: block; width: auto; max-width: 100%; height: clamp(38px, 1.2vw + 28px, 46px); }

/* Header: logo is white over the dark hero, then flips to its true black
   once the header goes light on scroll (mirrors the nav-link treatment). */
.site-header .wordmark__img {
  filter: brightness(0) invert(1);
  transition: filter .3s var(--ease);
}
.site-header.is-scrolled .wordmark__img { filter: none; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(251,252,253,.9);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 var(--c-line), var(--shadow-sm);
}
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; width: var(--container); }
.primary-nav { display: flex; gap: 1.6rem; margin-left: auto; }
.primary-nav a {
  font-weight: 600; font-size: .98rem; color: #fff; position: relative; padding: .3em 0;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
  transition: color .2s var(--ease);
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--c-aqua);
  transition: width .25s var(--ease);
}
.primary-nav a:hover::after { width: 100%; }
.site-header.is-scrolled .primary-nav a { color: var(--c-ink); text-shadow: none; }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }
.call-link {
  display: inline-flex; align-items: center; gap: .5em; font-weight: 700; color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.4); white-space: nowrap;
}
.call-link .icon { width: 18px; height: 18px; fill: var(--c-aqua-2); }
.site-header.is-scrolled .call-link { color: var(--c-ink); text-shadow: none; }
.site-header.is-scrolled .call-link .icon { fill: var(--c-aqua); }

/* hamburger */
.nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; }
.nav-toggle__bar { display: block; height: 2.5px; width: 24px; margin-inline: auto; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease), background .3s var(--ease); }
.site-header.is-scrolled .nav-toggle__bar { background: var(--c-ink); }
body.nav-open .nav-toggle__bar { background: #fff; }
body.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Mobile overlay ---------- */
.nav-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: var(--grad-deep);
  display: flex; flex-direction: column; justify-content: center; gap: 2.5rem;
  padding: var(--header-h) 8vw 8vh;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.nav-overlay.is-open { opacity: 1; pointer-events: auto; transform: none; }
.nav-overlay__menu { display: flex; flex-direction: column; gap: 1.2rem; }
.nav-overlay__menu a {
  font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 4vw, 3rem); font-weight: 600; color: #fff;
}
.nav-overlay__menu a:hover { color: var(--c-aqua-2); }
.nav-overlay__foot { display: flex; flex-direction: column; gap: 1rem; }
.call-link--lg { font-size: 1.15rem; color: #fff; text-shadow: none; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding-bottom: clamp(4rem, 10vh, 8rem); isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,46,56,.55) 0%, rgba(6,46,56,.05) 30%, rgba(6,46,56,.15) 60%, rgba(5,46,56,.85) 100%),
    linear-gradient(75deg, rgba(6,46,56,.7) 0%, rgba(6,46,56,0) 55%);
}
.hero__caustics {
  position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: url("../assets/images/texture-water.jpg") center/cover;
  mix-blend-mode: soft-light; opacity: .35;
  animation: caustic-drift 26s ease-in-out infinite alternate;
}
@keyframes caustic-drift {
  0%   { transform: scale(1.05) translate3d(0,0,0); }
  100% { transform: scale(1.18) translate3d(-3%, -2%, 0); }
}
.hero__inner { position: relative; color: #fff; max-width: 760px; }
.hero__title {
  font-family: var(--font-display); font-weight: 600; font-optical-sizing: auto;
  font-size: clamp(2.6rem, 1.5rem + 6vw, 5.4rem); line-height: .98; letter-spacing: -.02em;
  margin: .2em 0 .35em; text-shadow: 0 4px 30px rgba(0,0,0,.35);
}
.hero__sub { font-size: clamp(1.05rem, .98rem + .55vw, 1.3rem); max-width: 50ch; color: rgba(255,255,255,.92); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.hero__trust { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 2.4rem; }
.hero__trust li { position: relative; font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.92); padding-left: 1.3rem; }
.hero__trust li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--c-aqua-2); box-shadow: 0 0 12px var(--c-aqua-2); }

/* =========================================================
   THE WATERLINE (signature divider)
   ========================================================= */
.waterline { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; pointer-events: none; }
/* Static and exactly full-width: no transform or oversizing, so no edge can ever be exposed
   in any browser. (An earlier drift animation relied on an over-wide SVG, which Firefox
   renders at 100% width, leaving a margin-sized gap on the right.) */
.waterline svg { display: block; width: 100%; height: clamp(48px, 7vw, 110px); }
.waterline--hero path { fill: var(--c-white); }
.waterline--sand path { fill: var(--c-sand); }

/* =========================================================
   SECTION SHELL
   ========================================================= */
.section { position: relative; padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.services { padding-bottom: clamp(5rem, 4rem + 7vw, 9rem); }
.section--sand { background: var(--c-sand); }
.section--deep { background: var(--grad-deep); color: rgba(255,255,255,.85); }
.section__head { max-width: 60ch; margin-bottom: clamp(2.2rem, 1.5rem + 2vw, 3.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }

/* =========================================================
   SERVICES
   ========================================================= */
.services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1rem, .6rem + 1.4vw, 1.6rem); }
.card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 16px; background: linear-gradient(150deg, rgba(22,166,188,.14), rgba(221,122,91,.14));
  margin-bottom: 1.1rem;
}
.card__icon svg { width: 28px; height: 28px; fill: none; stroke: var(--c-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card:hover .card__icon svg { stroke: var(--c-aqua); }
.card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--c-deep); margin-bottom: .5rem; line-height: 1.15; }
.card__text { color: var(--c-ink-soft); font-size: .98rem; }

/* =========================================================
   ABOUT
   ========================================================= */
.about__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.about__media { position: relative; }
/* The slot is 4:5 portrait but the photography is 3:2 landscape, so `cover` crops
   horizontally. Biased left of centre because this shot's subject — the waterfall and
   fire bowls — sits left of centre; a centred crop pushes the near fire bowl into the
   edge. Re-check this value if the About photo is ever swapped again. */
.about__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 35% center; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.about__badge {
  position: absolute; left: -14px; bottom: 26px;
  background: #fff; color: var(--c-deep); font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; padding: .8rem 1.2rem; border-radius: 14px; box-shadow: var(--shadow-md);
  border-left: 4px solid var(--c-terra);
}
.about__lead { margin-top: 1.2rem; color: var(--c-ink-soft); font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem); }
.about__points { margin-top: 1.8rem; display: grid; gap: 1.1rem; }
.about__points li { display: grid; gap: .15rem; padding-left: 1.6rem; position: relative; }
.about__points li::before {
  content: ""; position: absolute; left: 0; top: .35rem; width: 12px; height: 12px; border-radius: 50%;
  background: var(--grad-heat);
}
.about__points strong { color: var(--c-deep); font-size: 1.05rem; }
.about__points span { color: var(--c-ink-soft); font-size: .96rem; }

/* =========================================================
   PROCESS
   ========================================================= */
.process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, .5rem + 2vw, 2.4rem); counter-reset: step; }
.step { position: relative; padding-top: 1.6rem; }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--c-aqua), transparent); }
.step__num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 500; color: var(--c-aqua-2); display: block; line-height: 1; margin-bottom: .6rem; opacity: .9; }
.step__title { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: #fff; margin-bottom: .4rem; }
.step__text { color: rgba(255,255,255,.78); font-size: .98rem; }

/* =========================================================
   GALLERY
   ========================================================= */
/* Row height is derived from the column width so every cell resolves to 3:2 — the
   native aspect of the project photos — which keeps object-fit cropping minimal.
   Column count is written out per breakpoint rather than fed through repeat(var(--n)),
   which parses inconsistently across engines. */
.gallery__grid {
  --gallery-gap: 14px;
  --gallery-cols: 3;
  --gallery-col: calc((var(--container) - (var(--gallery-cols) - 1) * var(--gallery-gap)) / var(--gallery-cols));
  width: var(--container); margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc(var(--gallery-col) / 1.5); gap: var(--gallery-gap);
}
.gallery__item {
  position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--c-deep);
  box-shadow: var(--shadow-sm); transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .3s var(--ease); }
.gallery__item::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,46,56,.45));
  opacity: 0; transition: opacity .35s var(--ease);
}
.gallery__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item:hover::after { opacity: 1; }
/* 2x2 feature + two stacked + a row of three fills a 3x3 grid exactly, no stranded cells. */
.gallery__item--feature { grid-column: span 2; grid-row: span 2; }

/* =========================================================
   FINANCING + PAYMENT CALCULATOR
   ========================================================= */
.financing__grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.financing__lead { margin-top: 1rem; color: var(--c-ink-soft); max-width: 46ch; }
.financing__lead strong { color: var(--c-deep); font-weight: 700; }

.financing__points { margin-top: 2rem; display: grid; gap: 1.4rem; }
.financing__points li { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .15rem; align-items: start; }
.financing__icon {
  grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; background: rgba(22,166,188,.13);
}
.financing__icon svg { width: 21px; height: 21px; fill: none; stroke: var(--c-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.financing__points strong { color: var(--c-deep); font-weight: 700; }
.financing__points li > span:not(.financing__icon) { color: var(--c-ink-soft); font-size: .96rem; }
.financing__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }

.calc { background: #fff; border-radius: var(--radius); padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); box-shadow: var(--shadow-md); border: 1px solid var(--c-line); }
.calc__title { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; color: var(--c-deep); line-height: 1.15; }
.calc__sub { margin-top: .4rem; font-size: .93rem; color: var(--c-ink-soft); }
.calc__controls { margin-top: 1.6rem; display: grid; gap: 1.5rem; }
.calc__field { display: grid; gap: .5rem; }
.calc__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.calc__row label { font-size: .85rem; font-weight: 700; color: var(--c-deep); }
.calc__value { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--c-deep); font-variant-numeric: tabular-nums; }
.calc__scale { display: flex; justify-content: space-between; font-size: .76rem; color: var(--c-ink-soft); }
.calc__hint { font-size: .8rem; color: var(--c-ink-soft); line-height: 1.45; }
.calc__select {
  width: 100%; padding: .8em .9em; border: 1.5px solid var(--c-line); border-radius: 12px; background: var(--c-sand-2);
  font: inherit; color: inherit; transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.calc__select:focus-visible { outline: none; border-color: var(--c-aqua); background: #fff; box-shadow: 0 0 0 4px rgba(22,166,188,.14); }

/* Range inputs: the filled track is painted as a background gradient on the input itself and
   driven by --pct from JS. Both engines' native tracks are forced transparent so the single
   gradient is the only track that renders — Chrome and Firefox then agree. */
.calc__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; margin: 0; cursor: pointer; border-radius: 999px;
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--c-aqua) 0 var(--pct, 50%), rgba(6,65,79,.16) var(--pct, 50%) 100%);
  background-size: 100% 6px; background-position: 0 50%; background-repeat: no-repeat;
}
.calc__range::-webkit-slider-runnable-track { height: 6px; background: transparent; border: none; }
.calc__range::-moz-range-track { height: 6px; background: transparent; border: none; }
.calc__range::-moz-range-progress { height: 6px; background: transparent; }
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; box-sizing: border-box;
  background: #fff; border: 3px solid var(--c-aqua); box-shadow: 0 2px 8px rgba(6,65,79,.25);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.calc__range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
  background: #fff; border: 3px solid var(--c-aqua); box-shadow: 0 2px 8px rgba(6,65,79,.25);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.calc__range:hover::-webkit-slider-thumb { transform: scale(1.1); }
.calc__range:hover::-moz-range-thumb { transform: scale(1.1); }
.calc__range:focus { outline: none; }
.calc__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(22,166,188,.3); }
.calc__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(22,166,188,.3); }

.calc__result { margin-top: 1.7rem; padding: 1.5rem 1.2rem; border-radius: var(--radius-sm); background: var(--grad-deep); text-align: center; }
.calc__result-label { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-aqua-2); }
.calc__amount {
  display: block; margin-top: .3rem; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.3rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.calc__total { margin-top: .6rem; font-size: .9rem; color: rgba(255,255,255,.75); }
.calc__disclaimer { margin-top: 1.2rem; font-size: .82rem; line-height: 1.55; color: var(--c-ink-soft); }
.calc__disclaimer strong { color: var(--c-ink); font-weight: 700; }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band { position: relative; padding-block: clamp(4.5rem, 3rem + 7vw, 8rem); color: #fff; text-align: center; isolation: isolate; overflow: hidden; }
.cta-band__media { position: absolute; inset: 0; z-index: -1; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__scrim { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(6,46,56,.78), rgba(221,122,91,.45) 130%), rgba(6,46,56,.35); }
.cta-band__inner { max-width: 640px; }
.cta-band__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); line-height: 1.05; }
.cta-band__text { margin: 1rem auto 0; max-width: 46ch; color: rgba(255,255,255,.9); font-size: 1.1rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.contact__lead { margin-top: 1rem; color: var(--c-ink-soft); max-width: 42ch; }
.contact__info { margin-top: 2rem; display: grid; gap: 1.3rem; }
.contact__info li { display: grid; gap: .15rem; }
.contact__label { font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-aqua); }
.contact__value { font-weight: 600; color: var(--c-ink); }
.contact__value--lg { font-family: var(--font-display); font-size: 1.6rem; color: var(--c-deep); }
.contact__link { color: var(--c-deep); font-weight: 700; border-bottom: 2px solid var(--c-terra); width: max-content; padding-bottom: 1px; }
.contact__link:hover { color: var(--c-aqua); }

.contact__form-wrap { background: #fff; border-radius: var(--radius); padding: clamp(1.4rem, 1rem + 1.5vw, 2.4rem); box-shadow: var(--shadow-md); border: 1px solid var(--c-line); }
.quote-form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { font-size: .85rem; font-weight: 700; color: var(--c-deep); }
.field label span { color: var(--c-terra); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8em .9em; border: 1.5px solid var(--c-line); border-radius: 12px; background: var(--c-sand-2);
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-aqua); background: #fff; box-shadow: 0 0 0 4px rgba(22,166,188,.14); }
.field input:user-invalid, .field input[aria-invalid="true"] { border-color: var(--c-terra); }
.field textarea { resize: vertical; min-height: 110px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-fineprint { font-size: .82rem; color: var(--c-ink-soft); text-align: center; }
.form-status { padding: .8em 1em; border-radius: 12px; font-weight: 600; font-size: .95rem; }
.form-status[data-kind="ok"] { background: rgba(22,166,188,.12); color: var(--c-deep); }
.form-status[data-kind="err"] { background: rgba(221,122,91,.14); color: #a8482e; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--c-deep-2); color: rgba(255,255,255,.75); padding-top: clamp(3rem, 2rem + 4vw, 5rem); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.wordmark--footer .wordmark__img { height: clamp(50px, 4vw + 18px, 62px); filter: brightness(0) invert(1); }
.site-footer__tag { margin-top: 1rem; max-width: 36ch; font-size: .96rem; }
.site-footer__nav, .site-footer__contact { display: grid; gap: .7rem; align-content: start; }
.site-footer__nav a:hover, .site-footer__contact a:hover { color: var(--c-aqua-2); }
.site-footer__contact span { font-size: .95rem; }
.site-footer__base {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding-block: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .88rem;
}
.site-footer__top:hover { color: var(--c-aqua-2); }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(5,30,37,.92); backdrop-filter: blur(4px); }
.lightbox__stage { position: relative; z-index: 1; width: min(92vw, 1100px); display: grid; place-items: center; }
.lightbox__img { max-width: 92vw; max-height: 82vh; border-radius: 12px; box-shadow: var(--shadow-lg); }
.lightbox__btn { position: absolute; z-index: 2; color: #fff; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 1.8rem; line-height: 1; transition: background .2s var(--ease), transform .2s var(--ease); }
.lightbox__btn:hover { background: rgba(255,255,255,.26); transform: scale(1.06); }
.lightbox__close { top: -64px; right: 0; }
.lightbox__prev { left: -68px; }
.lightbox__next { right: -68px; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* anchor offset for fixed header */
:where(section[id], #top) { scroll-margin-top: var(--header-h); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 460px; }
  .process__steps { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .contact__grid { grid-template-columns: 1fr; }
  .financing__grid { grid-template-columns: 1fr; }
  /* 6 equal tiles across 2 columns packs perfectly; the feature span would strand a cell. */
  .gallery__grid { --gallery-cols: 2; grid-template-columns: repeat(2, 1fr); }
  .gallery__item--feature { grid-column: span 1; grid-row: span 1; }
}

@media (max-width: 880px) {
  .primary-nav, .site-header__actions { display: none; }
  .nav-toggle { display: flex; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  :root { --header-h: 66px; }
  .hero { min-height: 100svh; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .services__grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .financing__actions { flex-direction: column; align-items: stretch; }
  .financing__actions .btn { width: 100%; }

  /* Vertical rhythm on phones.
     Display type is deliberately set tight (.98–1.05) because at desktop sizes these
     headings occupy one or two lines, where tight leading reads as confident. The
     clamp() floors keep the type large as the viewport narrows, so on a ~316px column
     the same headings wrap to three lines — and at a ratio below 1 the line boxes are
     shorter than the glyphs, so Fraunces' ascenders and descenders collide. Relax the
     leading only here; every width above this keeps its original setting.
     Measured on a Galaxy Z Fold 5 cover screen (344px): hero title went 3 lines @ 0.98. */
  .hero__title { line-height: 1.14; }
  .section__title { line-height: 1.16; }
  .cta-band__title { line-height: 1.16; }

  /* These gaps are horizontal gutters while the grids have columns, but become the
     only separation between blocks once they stack. 16–22px is too tight for that. */
  .services__grid { gap: 1.75rem; }
  .about__points { gap: 1.6rem; }
  .financing__points { gap: 1.6rem; }
  .gallery__grid { --gallery-cols: 1; grid-template-columns: 1fr; }
  .about__badge { left: 0; }
  .lightbox__prev { left: 6px; }
  .lightbox__next { right: 6px; }
  .lightbox__close { top: 8px; right: 8px; background: rgba(0,0,0,.4); }
  .site-footer__grid { grid-template-columns: 1fr; gap: 1.8rem; }
}

@media (max-width: 360px) {
  .process__steps { grid-template-columns: 1fr; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__caustics { animation: none; }
}