@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url("assets/fonts/manrope-latin.woff2") format("woff2")}
/* TopLine Pro — homepage.
   Implements Figma "WIRE - TOP LINE 3" (file kcEThPbqFNrFV1aObvgHzW, node 6075:9120).
   Desktop spec: 1920 frame, 1280 content column, 1440 wide column. */

:root {
  /* Color */
  --navy-950: #0c1b29;
  --navy-925: #101922;
  --navy-900: #16324a;
  --navy-800: #203e59;
  --navy-700: #224666;
  --navy-line: #2e5476;
  --blue-600: #4a7fa7;
  --blue-500: #5993bf;
  --blue-400: #7bbdec;
  --blue-300: #a4d9ff;
  --ice-300: #c4e1f6;
  --ice-200: #d9eefd;
  --ice-150: #d2eafb;
  --ice-100: #d7edfd;
  --sky-50: #e3f1fb;
  --slate-700: #44525e;
  --slate-600: #62707b;
  --silver-300: #cfd5da;
  --silver-200: #e4e9ed;
  --shade: 7 21 36;          /* #071524 — photo multiply shade */
  --navy-rgb: 22 50 74;      /* #16324a */

  /* Gradients */
  --grad-ice: linear-gradient(180deg, #fff 0%, var(--ice-200) 46%, var(--ice-300) 100%);
  --grad-blue: linear-gradient(180deg, var(--blue-300) 0%, var(--blue-400) 46%, var(--blue-600) 100%);
  --grad-navy: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-925) 100%);
  /* One background for every dark panel and band (2026-10-20): navy-800 light
     in the top-right corner falling to navy-950. */
  --grad-dark: radial-gradient(120% 130% at 85% 0%, var(--navy-800) 0%, var(--navy-900) 38%, var(--navy-950) 78%);
  --grad-text-sky: linear-gradient(180deg, var(--ice-300) 0%, var(--blue-600) 100%);
  --grad-text-deep: linear-gradient(180deg, #88b2d0 0%, var(--blue-600) 100%);

  /* Shape and depth */
  --radius-xl: 26px;
  --radius-lg: 13px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --pill: 999px;
  --shadow-card: 0 48px 64px rgb(132 148 160 / .15);
  --shadow-panel: 0 45px 56px rgb(132 148 160 / .35);
  --inset-sheen: inset 0 1px 0 rgb(255 255 255 / .62), inset 0 -1px 0 rgb(164 217 255 / .38);

  /* Layout */
  --content: 1280px;
  --wide: 1440px;
  /* Landscape phones: never let the column run under a notch. */
  --gutter: max(clamp(20px, 4vw, 40px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

  /* Type scale (fluid down from the 1280 column) */
  --h1: clamp(44px, 5.86vw, 75px);
  --h2: clamp(34px, 3.9vw, 50px);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: #fff;
  color: var(--navy-800);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
/* Light image protection, paired with initImageGuard in app.js: no iOS
   long-press save sheet and no drag ghost. It only deters casual saving. */
img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; 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; top: -80px; left: 16px; z-index: 100;
  padding: 12px 18px; border-radius: var(--pill);
  background: #fff; color: var(--navy-900); font-weight: 700;
}
.skip-link:focus { top: 16px; }

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

.h2 {
  font-size: var(--h2);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.06em;
  color: var(--navy-800);
}
.text-ice, .text-sky, .text-sky-deep {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: transparent;
  /* background-clip: text only paints inside the box. With the tight negative
     tracking the last glyph (and descenders) overhang it and got cut, so the
     paint area is padded out and the padding cancelled by a negative margin. */
  padding: 0 .12em .16em .04em;
  margin: 0 -.12em -.16em -.04em;
}
.text-ice { background-image: var(--grad-ice); }
.text-sky { background-image: var(--grad-text-sky); }
.text-sky-deep { background-image: var(--grad-text-deep); }

/* Section kicker: a small caps label held between two 28px rules. */
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--blue-600);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kicker::before, .kicker::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.kicker--center { justify-content: center; }
.kicker--light { color: var(--ice-300); }

/* Blue fade that grounds the copy on photo cards (Figma stacks three layers
   over the bottom 288px of the card). */
.photo-card::before,
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, var(--navy-800) 0, rgb(4 16 31 / 0) 288px),
    linear-gradient(0deg, var(--blue-600) 0, rgb(4 16 31 / 0) 288px),
    linear-gradient(0deg, rgb(var(--shade)) 80px, rgb(4 16 31 / 0) 267px);
  pointer-events: none;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  height: 55px;
  padding: 0 15px 0 20px;
  overflow: hidden;
  border: 0;
  border-radius: var(--pill);
  background: var(--grad-ice);
  --btn-shadow: var(--inset-sheen);
  --pulse-rgb: 196 225 246;
  box-shadow: var(--btn-shadow);
  color: var(--navy-900);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
/* Diagonal sheen that sweeps across on hover (Figma: skewed 109px highlight). */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140px;
  z-index: 1;
  width: 109px;
  height: 100%;
  background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / .35) 50%, rgb(255 255 255 / 0));
  opacity: .7;
  transform: skewX(-12deg);
  transition: left .8s var(--ease-out);
  pointer-events: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { left: calc(100% + 30px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad-navy);
  box-shadow: inset 0 2.9px 3.4px rgb(123 189 236 / .25);
  color: #edf7fe;
  transition: transform .45s var(--ease-out);
}
.btn__icon svg { width: 13.125px; height: 13.125px; }
.btn:hover .btn__icon { transform: translateX(2px); }

.btn--blue {
  height: 58px;
  background: var(--grad-blue);
  --btn-shadow: 0 0 0 1px rgb(123 189 236 / .5), var(--inset-sheen);
  --pulse-rgb: 123 189 236;
}
.btn--blue .btn__icon { color: var(--blue-400); }
.btn--glow {
  background: linear-gradient(180deg, var(--blue-300) 0%, var(--blue-400) 46%, var(--blue-500) 100%);
  --btn-shadow: 0 0 69px 1px rgb(123 189 236 / .2), 0 10px 58px -14px rgb(123 189 236 / .5), var(--inset-sheen);
  --pulse-rgb: 123 189 236;
}
.btn--md { height: 50px; font-size: 13px; }
.btn--sm {
  height: 45px;
  gap: 13px;
  padding: 0 14px 0 18px;
  --btn-shadow: 0 0 0 .9px #fff, var(--inset-sheen);
  font-size: 13.5px;
  line-height: 19px;
}
.btn--sm .btn__icon { width: 24.4px; height: 24.4px; }
.btn--sm .btn__icon svg { width: 11.5px; height: 11.5px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 58px;
  padding: 4.6px;
  border: 1.16px solid rgb(255 255 255 / .38);
  border-radius: var(--pill);
  background: rgb(255 255 255 / .1);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .3s, border-color .3s;
}
.btn-ghost > span { padding: 11.6px 17.4px; }
.btn-ghost:hover { border-color: rgb(255 255 255 / .7); background: rgb(255 255 255 / .18); }
.btn-ghost--nav {
  min-height: 45px;
  padding: 0 4px;
  border: 1px solid #fff;
  background: transparent;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 14px;
}
.btn-ghost--nav > span { padding: 0 15px; }
.btn-ghost { --btn-shadow: 0 0 0 0 transparent; --pulse-rgb: 255 255 255; }
/* Call buttons (2026-09-29): same disc-fill hover as .text-link. A white
   disc with the phone sits on the right; on hover it grows until it fills
   the pill, the label turns navy and the disc flips to navy. */
.btn-ghost--call {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 12px;
  padding: 4.6px 15px 4.6px 4.6px;
  transition: color .35s, border-color .35s, background-color .3s;
}
.btn-ghost--call::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  z-index: -1;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.btn-ghost__disc {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy-900);
  transition: background-color .35s, color .35s, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.btn-ghost__disc svg { width: 13.125px; height: 13.125px; }
.btn-ghost--call:hover, .btn-ghost--call:focus-visible { border-color: #fff; color: var(--navy-900); }
.btn-ghost--call:hover::before, .btn-ghost--call:focus-visible::before { transform: scale(20); }
.btn-ghost--call:hover .btn-ghost__disc, .btn-ghost--call:focus-visible .btn-ghost__disc {
  background: var(--navy-900);
  color: #fff;
  transform: translateX(2px) rotate(-14deg);
}
.btn-ghost--nav.btn-ghost--call { padding: 0 10px 0 4px; }
/* Icon-to-label gap: the label span keeps its left padding only, the flex gap
   does the rest (Get Free Estimate uses ~12-15px). */
.btn-ghost.btn-ghost--call > span,
.hero__copy .cta-row .btn-ghost.btn-ghost--call > span,
.cta-row .btn-ghost.btn-ghost--call > span { padding-right: 0; }
.btn-ghost--nav.btn-ghost--call { gap: 10px; }
.btn-ghost--nav.btn-ghost--call::before { right: 10px; width: 24.4px; height: 24.4px; margin-top: -12.2px; }
.btn-ghost--nav .btn-ghost__disc { width: 24.4px; height: 24.4px; }
.btn-ghost--nav .btn-ghost__disc svg { width: 11.5px; height: 11.5px; }
/* Opening: the pill widens first, then the number fades in once there is room.
   Closing reverses it: the text fades out before the pill folds. */
.btn-ghost--nav.btn-ghost--call > span { display: block; max-width: 220px; overflow: hidden; white-space: nowrap; transition: max-width .9s var(--ease-soft), padding .9s var(--ease-soft), opacity .45s ease .3s, filter .45s ease .3s; }
.btn-ghost--nav.btn-ghost--call { transition: padding .9s var(--ease-soft), gap .9s var(--ease-soft); }
.has-hero:not(.is-past-hero) .btn-ghost--nav.btn-ghost--call { gap: 0; padding: 0 10px; }
.has-hero:not(.is-past-hero) .btn-ghost--nav.btn-ghost--call > span { max-width: 0; padding: 0; opacity: 0; filter: blur(4px); transition: max-width .7s var(--ease-soft) .1s, padding .7s var(--ease-soft) .1s, opacity .2s ease, filter .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .btn-ghost--call::before { transition: none; }
  .btn-ghost--call:hover .btn-ghost__disc { transform: none; }
}

/* Hover pulse: a soft glow that swells into a 25px ring and fades, every 2s,
   while the pointer stays on the button. The button's own shadows ride along
   in --btn-shadow so the pulse never wipes them. Touch screens skip it. */
@keyframes btn-pulse {
  0% { box-shadow: 0 0 21px -6px rgb(var(--pulse-rgb) / 1), var(--btn-shadow); }
  70% { box-shadow: 0 0 0 25px rgb(var(--pulse-rgb) / 0), var(--btn-shadow); }
  100% { box-shadow: 0 0 0 0 rgb(var(--pulse-rgb) / 0), var(--btn-shadow); }
}
@media (hover: hover) {
  .btn:hover, .btn-ghost:hover { animation: btn-pulse 2s infinite; }
}

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 11.6px; }

/* Outline pill with an icon disc (2026-09-29, after the Journey reference):
   on hover the navy disc behind the icon grows until it fills the button,
   the label turns white and the icon tips up to a "go" arrow. */
.text-link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  min-height: 0;
  padding: 0 10px 0 20px;
  overflow: hidden;
  border: 1.5px solid var(--navy-800);
  border-radius: var(--pill);
  background: none;
  color: var(--navy-800);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .35s, border-color .35s, transform .2s;
}
.text-link:not(:has(.text-link__ic)) { padding: 0 20px; }
.text-link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: -1;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  background: var(--navy-900);
  transform: scale(0);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.text-link:not(:has(.text-link__ic))::before { right: 50%; margin-right: -14px; }
.text-link:hover::before, .text-link:focus-visible::before { transform: scale(16); }
.text-link:hover, .text-link:focus-visible { border-color: var(--navy-900); color: #fff; }
.text-link:active { transform: translateY(1px); }
.text-link__ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  transition: background-color .35s, color .35s, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.text-link__ic svg { width: 15px; height: 15px; }
.text-link:hover .text-link__ic, .text-link:focus-visible .text-link__ic {
  background: var(--ice-300);
  color: var(--navy-900);
  transform: translateX(2px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .text-link::before { transition: none; }
  .text-link__ic { transition: background-color .2s, color .2s; }
  .text-link:hover .text-link__ic { transform: none; }
}

.underline-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid rgb(255 255 255 / .56);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: border-color .3s;
}
.underline-link:hover { border-color: #fff; }

.inline-link {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Shared photo treatment: Figma lays a soft-light #C4E1F6 wash (35%) over every photo. */
.photo-card::after,
.service-card::after,
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ice-300);
  opacity: .35;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.photo-card::after, .service-card::after { z-index: -1; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  padding-top: 20px;
  transition: padding .4s var(--ease-out), background-color .4s, box-shadow .4s;
}
/* Once the page scrolls the bar becomes a floating glass capsule inside the
   column: rounded, translucent navy, a hairline and a soft drop, logo a touch smaller. */
.site-header.is-scrolled { padding-top: 12px; }
.site-header__bar { transition: padding .4s var(--ease-out), background-color .4s, box-shadow .4s, border-color .4s; border: 1px solid transparent; border-radius: var(--pill); }
.site-header.is-scrolled .site-header__bar {
  padding: 10px 14px 10px 30px;
  border-color: rgb(255 255 255 / .14);
  background: rgb(12 27 41 / .66);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 18px 40px rgb(7 21 36 / .28), inset 0 1px 0 rgb(255 255 255 / .1);
}
.brand img { transition: transform .4s var(--ease-out); transform-origin: left center; }
.site-header.is-scrolled .brand img { transform: scale(.82); }
.site-header.is-scrolled .site-nav { padding: 10px 24px; }
@media (max-width: 1099px) { .site-header.is-scrolled .site-header__bar { padding: 8px 12px 8px 22px; } }
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { flex: none; }
.brand img { width: 129px; height: auto; }
.site-nav {
  display: flex;
  gap: 28px;
  padding: 18px 30px;
  border-radius: 83px;
}
.site-nav a {
  position: relative;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.site-nav a::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 0;
  right: 100%;
  height: 1px;
  background: #fff;
  transition: right .35s var(--ease-out);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after { right: 0; }
.site-header__actions { display: flex; align-items: center; gap: 8.7px; }

.menu-toggle {
  display: none;
  place-content: center;
  gap: 7px;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / .5);
  border-radius: 50%;
  background: rgb(255 255 255 / .08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: #fff;
  transition: transform .3s var(--ease-out);
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.mobile-nav {
  width: min(var(--content), 100% - 2 * var(--gutter));
  margin: 14px auto 0;
  padding: 10px;
  border: 1px solid rgb(255 255 255 / .25);
  border-radius: 20px;
  background: rgb(12 27 41 / .88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.mobile-nav:not([hidden]) { display: grid; }
.mobile-nav a {
  padding: 14px 16px;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.mobile-nav a:hover, .mobile-nav a:focus-visible { background: rgb(255 255 255 / .08); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  background: var(--navy-950);
  color: #fff;
}
/* The photo runs 36px past the hero and is cut into two thin strips (Figma "Group 3"). */
.hero__media {
  position: absolute;
  inset: 0 0 -36px;
  z-index: -1;
  overflow: hidden;
  background: var(--navy-950);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent calc(100% - 36px) calc(100% - 31px), #000 calc(100% - 31px) calc(100% - 14px), transparent calc(100% - 14px) calc(100% - 9px), #000 calc(100% - 9px));
  mask-image: linear-gradient(#000 calc(100% - 36px), transparent calc(100% - 36px) calc(100% - 31px), #000 calc(100% - 31px) calc(100% - 14px), transparent calc(100% - 14px) calc(100% - 9px), #000 calc(100% - 9px));
}
/* The aerial's house sits at the frame's centre, behind the copy. Drawn at 116%
   from the top-left corner, it moves into the right half beside the headline. */
.hero__media img {
  width: 116%;
  height: 116%;
  max-width: none;
  object-fit: cover;
  object-position: 22% 0%;
  transform-origin: 0 0;
  /* Entrance zoom: the photo settles from 108% to its resting frame on page load. */
  transform: scale(1.08);
  animation: hero-zoom 2600ms var(--ease-soft) both;
}
@keyframes hero-zoom { to { transform: scale(1); } }
.hero__media > picture { display: contents; }
.hero__media > .hero__cutout { display: none; }
/* Bottom multiply shade (Figma stacks six #071524 layers at 45%). */
.hero__media::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 760px;
  background: linear-gradient(0deg, rgb(var(--shade) / .98) 0%, rgb(var(--shade) / .8) 12%, rgb(var(--shade) / .32) 24%, rgb(var(--shade) / 0) 38%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.hero__shade {
  position: absolute;
  pointer-events: none;
  top: -50px;
  left: -5%;
  width: 105%;
  height: 1250px;
  /* The aerial is a soft, upscaled photo: a left-hand navy scrim keeps the copy
     off the house's detail and gives the headline a calm ground. */
  background:
    linear-gradient(90deg, rgb(6 24 39 / .78) 0%, rgb(6 24 39 / .55) 28%, rgb(6 24 39 / .12) 52%, rgb(6 24 39 / 0) 64%),
    linear-gradient(167.4deg, rgb(6 24 39 / .75) 11%, rgb(var(--navy-rgb) / 0) 56%),
    linear-gradient(149.2deg, rgb(var(--navy-rgb) / .75) 10%, rgb(var(--navy-rgb) / 0) 37%);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  column-gap: 40px;
  min-height: 950px;
  padding-top: 143px;
  padding-bottom: 150px;
}
.hero__copy { grid-column: 1; grid-row: 1; }
.eyebrow {
  margin-bottom: 5px;
  color: var(--ice-100);
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero h1 {
  font-size: var(--h1);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.0666em;
}
.hero__lead {
  max-width: 504px;
  margin-top: 25px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}
.hero__copy .cta-row { margin-top: 35px; }

.hero-stats {
  grid-column: 1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  width: min(568px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-stats li { display: flex; flex-direction: column; gap: 6px; }
.hero-stats strong {
  font-size: 29px;
  font-weight: 500;
  line-height: 1.37;
  letter-spacing: -.056em;
  white-space: nowrap;
}
.hero-stats li > span { font-size: 12px; line-height: 15px; }
.star { margin-left: .28em; font-size: .67em; vertical-align: .16em; letter-spacing: 0; }

.hero-showcase {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: end;
  display: grid;
  gap: 12px;
  width: 386px;
}
.hero-showcase__frame {
  position: relative;
  display: block;
  padding: 8px;
  border-radius: 12px;
  background: rgb(164 217 255 / .2);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  transition: transform .5s var(--ease-out);
}
.hero-showcase__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.1px solid rgb(164 217 255 / .6);
  border-radius: inherit;
  pointer-events: none;
}
.hero-showcase__frame:hover { transform: translateY(-4px); }
.hero-showcase__viewport {
  position: relative;
  display: block;
  height: 244px;
  overflow: hidden;
  border-radius: 8px;
}
.hero-showcase__slide {
  position: absolute;
  inset: 4px 6px;
  width: calc(100% - 12px);
  height: calc(100% - 8px);
  border-radius: 7.7px;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .9s ease, transform 1.4s var(--ease-out);
}
.hero-showcase__slide.is-active { opacity: 1; transform: none; }
.hero-showcase__progress { display: flex; align-items: center; gap: 8px; height: 24px; }
.hero-showcase__num {
  padding: 0;
  border: 0;
  background: none;
  color: var(--silver-200);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  opacity: .55;
  transition: opacity .3s;
}
.hero-showcase__num.is-active, .hero-showcase__num:hover { opacity: 1; }
.hero-showcase__bar {
  flex: 1;
  height: 2px;
  overflow: hidden;
  border-radius: 10px;
  background: rgb(255 255 255 / .2);
}
.hero-showcase__bar i {
  display: block;
  height: 100%;
  background: var(--blue-400);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- Difference ---------- */
.difference {
  position: relative;
  z-index: 2;
  margin-top: -57px;
  padding-bottom: 138px;
}
.difference-intro {
  display: flex;
  gap: 58px;
  /* Figma frame 6075:9473 is 432px tall; holding that height keeps every
     section below on the design's vertical grid. */
  min-height: 432px;
  padding: 60px 84px;
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-panel);
}
.difference-intro__head { flex: none; width: 424px; }
.difference-intro__copy {
  flex: 1;
  color: var(--slate-700);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}
.difference-intro__copy p + p { margin-top: 24px; }
.difference-intro__copy .is-strong { color: var(--navy-900); font-weight: 700; }

.difference-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 17px;
}
.photo-card {
  position: relative;
  isolation: isolate;
  height: 557px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--navy-925);
  color: #fff;
}
.photo-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  transition: transform 1.2s var(--ease-out);
}
.photo-card:hover img { transform: scale(1.05); }
.photo-card__body {
  position: absolute;
  bottom: 56px;
  left: 43px;
  right: 43px;
  display: grid;
  gap: 13.5px;
}
.photo-card__eyebrow {
  color: var(--blue-400);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .116em;
  text-transform: uppercase;
}
/* Figma sets the line measure per card (261px, 328px); --measure carries it. */
.photo-card h3 {
  max-width: var(--measure, 7.7em);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.023em;
}

/* Same finish as the service cards (2026-09-29): neutral shade under the
   copy instead of the Figma navy/blue stack, photo in full colour above. */
.photo-card::before {
  inset: auto 0 0;
  height: 62%;
  background: linear-gradient(0deg,
    rgb(var(--shade) / .94) 0%,
    rgb(var(--shade) / .84) 22%,
    rgb(var(--shade) / .6) 46%,
    rgb(var(--shade) / .26) 72%,
    rgb(var(--shade) / 0) 100%);
}
.photo-card:has(.photo-card__copy)::before { height: 78%; }
.photo-card::after { opacity: .16; }
.photo-card h3 { text-shadow: 0 2px 18px rgb(var(--shade) / .55); }
.photo-card__eyebrow { text-shadow: 0 1px 10px rgb(var(--shade) / .5); }

/* ---------- Sky band (services → reviews background) ---------- */
.sky-band {
  background: linear-gradient(180deg, var(--sky-50) 0%, #ebf5fc 28%, #f2f8fc 55%, #fff 100%);
}

/* ---------- Services ---------- */
.services { padding-top: 71px; overflow-x: clip; }
.services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.services__head .h2 { max-width: 430px; }
.services__intro .text-link { min-height: 0; }
.services__intro { width: min(560px, 100%); }
.services__intro p {
  color: var(--slate-700);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.service-carousel {
  --card-w: 423px;
  --card-w-active: 640px;
  --card-h: 560px;
  margin-top: 73px;
  touch-action: pan-y;
}
.service-track {
  display: flex;
  gap: 7px;
  transition: transform .8s var(--ease-out);
  will-change: transform;
}
.service-card {
  position: relative;
  isolation: isolate;
  flex: 0 0 var(--card-w);
  height: var(--card-h);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--navy-950);
  color: #fff;
  transition: flex-basis .8s var(--ease-out);
}
.service-card.is-active { flex-basis: var(--card-w-active); }
.service-card > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  transition: transform 1.2s var(--ease-out);
}
.service-card:not(.is-active):hover > img { transform: scale(1.05); }
/* Copy sits on the bottom edge; opening a card grows it upward. */
.service-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(700px, 100%);
  padding: 48px;
}
.service-card__meta {
  color: rgb(255 255 255 / .74);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.service-card h3 {
  max-width: 310px;
  margin-top: 16px;
  font-size: clamp(28px, 2.7vw, 35px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.066em;
  text-wrap: balance;
}
.service-card.is-active h3 { max-width: 489px; }
.service-card__more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .6s var(--ease-out), opacity .35s ease, visibility 0s linear .6s;
}
.service-card__more > div { min-height: 0; overflow: hidden; }
/* Once the card has finished opening, let the buttons' hover lift and pulse
   glow spill out instead of being clipped by the reveal wrapper. */
@keyframes service-more-open { to { overflow: visible; } }
.service-card.is-active .service-card__more > div { animation: service-more-open 0s .9s forwards; }
.service-card.is-active .service-card__more {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows .7s var(--ease-out) .15s, opacity .5s ease .25s, visibility 0s;
}
.service-card__copy {
  max-width: 520px;
  padding-top: 18px;
  color: rgb(255 255 255 / .82);
  font-size: 16px;
  line-height: 26.4px;
}
.service-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding-top: 24px;
}
.service-card__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  border-radius: inherit;
  background: transparent;
}
.service-card.is-active .service-card__hit { display: none; }
/* Service card finish (2026-09-29): the photo stays clean at the top; the
   copy sits on a deeper neutral shade, so the text has real contrast
   without a flat blue wash. The shade grows when the card opens and shows more copy. */
.service-card { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.service-card::before {
  inset: auto 0 0;
  height: 62%;
  background: linear-gradient(0deg,
    rgb(var(--shade) / .94) 0%,
    rgb(var(--shade) / .84) 22%,
    rgb(var(--shade) / .6) 46%,
    rgb(var(--shade) / .26) 72%,
    rgb(var(--shade) / 0) 100%);
  transition: height .8s var(--ease-out);
}
.service-card.is-active::before { height: 78%; }
.service-card::after { opacity: .16; }
/* Kicker becomes a small glass tag. */
.service-card__meta {
  display: inline-flex;
  padding: 6px 12px;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 999px;
  background: rgb(255 255 255 / .1);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  color: #fff;
}
/* Secondary action reads as a button: white outline pill instead of an underline. */
.service-card__actions .underline-link {
  height: 50px;
  padding: 0 22px;
  border: 1px solid rgb(255 255 255 / .72);
  border-radius: var(--pill);
  background: rgb(255 255 255 / .06);
  transition: background-color .3s, border-color .3s, transform .45s var(--ease-out);
}
.service-card__actions .underline-link:hover { border-color: #fff; background: rgb(255 255 255 / .14); transform: translateY(-2px); }
.service-card__actions { gap: 12px; }
.service-card h3 { text-shadow: 0 2px 18px rgb(var(--shade) / .55); }
.service-card__copy { color: rgb(255 255 255 / .92); text-shadow: 0 1px 12px rgb(var(--shade) / .5); }
@media (max-width: 767px) {
  .service-card::before { height: 72%; }
  .service-card.is-active::before { height: 92%; }
}

/* ---------- Projects ---------- */
.projects { padding-top: 121px; }
.projects__title { line-height: 1.1; }
/* Copy pinned on the left; photos stack on the right. Each photo sticks at
   --stack-top and the next one slides over it, so the column scrolls like a deck. */
.projects { --stack-top: 110px; }
.projects__grid { display: grid; grid-template-columns: minmax(0, 520fr) minmax(0, 760fr); gap: 80px; align-items: start; }
.projects__copy { position: sticky; top: var(--stack-top); }
.projects__copy .section-head { gap: 22px; }
.projects__lead { max-width: 420px; color: var(--slate-700); font-size: 17px; font-weight: 500; line-height: 1.55; }
.project-stack { display: grid; gap: 24px; }
.project-stack__item {
  position: sticky;
  top: var(--stack-top);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--silver-300);
}
.project-stack__item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--pos, center); }

/* ---------- About ---------- */
.about { padding-top: 198px; }
.about-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 830px;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: var(--radius-xl);
  background: var(--navy-950);
  box-shadow: 0 48px 128px rgb(132 148 160 / .15);
}
/* Scene and cut-out share one frame so the owners register exactly. Figma
   draws the photo at 1635×920, 1px left of and 37px above the card; the frame
   tracks the card's right edge so the owners stay clear of the copy panel. */
.about-card__scene, .about-card__people { position: absolute; inset: 0; pointer-events: none; }
.about-card__scene { z-index: -1; overflow: hidden; }
.about-card__people { z-index: 1; }
.about-card__frame {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}
.about-card__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
/* Bottom multiply shade and soft-light wash, on the scene and again on the cut-out. */
.about-card__scene::before,
.about-card__people .about-card__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgb(var(--shade) / .45) 15px, rgb(var(--shade) / 0) 283px);
  mix-blend-mode: multiply;
}
/* The frame hangs 53px below the card, so its shade is lifted to the card's edge. */
.about-card__people .about-card__frame::before { bottom: 53px; }
.about-card__scene::after,
.about-card__people .about-card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ice-300);
  opacity: .35;
  mix-blend-mode: soft-light;
}
.about-card__people .about-card__frame {
  -webkit-mask: url("assets/about-owners-cutout.webp") 0 0 / 100% 100% no-repeat;
  mask: url("assets/about-owners-cutout.webp") 0 0 / 100% 100% no-repeat;
}
.about-card__copy {
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: min(686px, 100% - 1440px + 686px);
  margin-left: 61px;
  padding: 40px;
  border-radius: var(--radius-xl);
  background: #fff;
}
.about-card__copy .h2 { max-width: 492px; }
/* Note and quote stop 57px short of the panel edge, clear of the owners. */
.about-card__note {
  width: calc(100% - 59px);
  padding: 20px;
  border-radius: var(--radius-md);
  background: rgb(228 233 237 / .3);
  color: var(--slate-700);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}
.about-card__note p + p { margin-top: 24px; }
.about-card__quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 116px;
  padding-left: 23px;
  border-left: 2px solid var(--blue-600);
}
.about-card__quote p {
  max-width: calc(100% - 57px);
  color: var(--navy-800);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.about-card__quote cite {
  display: block;
  padding-top: 18px;
  color: var(--blue-600);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 19.2px;
}

/* ---------- Reviews ----------
   Head on the left, arrows on the right, then a snap carousel three cards wide.
   Each card: person on top, the quote, five stars at the foot. */
.reviews { padding-top: 87px; padding-bottom: 62px; }
.reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.reviews__head .section-head { gap: 18px; }
.reviews__lead { color: var(--slate-700); font-size: 17px; font-weight: 500; line-height: 1.3; }
.reviews__nav { display: flex; flex: none; gap: 8px; padding-bottom: 6px; }
.reviews__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--silver-300);
  border-radius: 50%;
  background: #fff;
  color: var(--navy-900);
  transition: background-color .3s, border-color .3s, color .3s, opacity .3s;
}
.reviews__arrow svg { width: 20px; height: 20px; }
.reviews__arrow[data-reviews-prev] svg { transform: scaleX(-1); }
.reviews__arrow:hover { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
.reviews__arrow:disabled { opacity: .35; pointer-events: none; }
/* No scroller here: the rail slides with a transform. The track does not clip
   (a clip box drew hard side edges through the card shadows); cards outside
   the current view fade out instead, and the section clips the long rail. */
.reviews { overflow-x: clip; }
.reviews__track { --rail-gap: 20px; margin: 48px calc(-1 * var(--rail-gap)) -40px; padding: 16px var(--rail-gap) 56px; }
.reviews__rail .review-card { transition: opacity .45s var(--ease-out), visibility 0s linear 0s; }
.reviews__rail .review-card.is-off { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out), visibility 0s linear .3s; }
.reviews__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--rail-gap)) / 3);
  gap: var(--rail-gap);
  transition: transform .7s var(--ease-out);
}
.review-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
  min-height: 300px;
  padding: 30px 30px 28px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 8px 24px rgb(132 148 160 / .16);
}
.review-card__person { display: flex; align-items: center; gap: 12px; }
.review-card__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--silver-200); display: grid; place-items: center; color: var(--navy-800); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.review-card__person p { color: var(--navy-800); font-size: 15px; font-weight: 600; line-height: 1.3; }
.review-card__person p span { display: block; color: var(--slate-600); font-size: 13px; font-weight: 500; }
.review-card__quote { color: var(--navy-800); font-size: 17px; font-weight: 500; line-height: 1.5; }
.review-card__quote.is-placeholder { display: grid; gap: 0; align-content: start; }
.skeleton { height: 9px; margin-top: 15px; border-radius: 5px; background: var(--silver-200); }
.skeleton:first-child { margin-top: 4px; }
.skeleton--short { width: 68%; }
.review-card__stars { display: flex; gap: 4px; color: var(--blue-500); }
.review-card__stars span { display: grid; place-items: center; }
.review-card__stars svg { width: 20px; height: 20px; }
.review-card__label { color: var(--slate-600); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.reviews__cta { display: flex; justify-content: center; margin-top: 48px; }

/* ---------- Where we work ---------- */
.areas { position: relative; z-index: 1; }
.areas__band {
  position: relative;
  min-height: 595px;
  color: #fff;
}
.areas__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--navy-950);
}
/* Shared geometry for the photo and the crew cut-out so they register exactly:
   Figma places both at 1927×1084, 5px left and 207px above the band. */
.areas__frame { position: absolute; inset: 0; }
.areas__media .areas__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.areas__shade {
  position: absolute;
  top: -93px;
  left: -2.6%;
  width: 105%;
  height: 1250px;
  background:
    linear-gradient(145.6deg, rgb(var(--navy-rgb) / .9) 22%, rgb(var(--navy-rgb) / .45) 30%, rgb(var(--navy-rgb) / 0) 37.3%),
    linear-gradient(125.9deg, rgb(var(--navy-rgb) / .35) 17.2%, rgb(var(--navy-rgb) / 0) 80.2%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.areas__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ice-300);
  opacity: .35;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.areas__cutout { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.areas__crew {
  position: absolute;
  top: 12.59%;
  left: 61.18%;
  width: 25.9%;
  height: auto;
}
.areas__intro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  padding-top: 66px;
}
.areas__intro img { width: 129px; height: auto; }
.areas__intro h2 {
  font-size: clamp(40px, 4.7vw, 60px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.05em;
}
.areas__intro p {
  max-width: 406px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}
.areas__intro strong { color: var(--ice-150); font-weight: 700; }
.areas__cue {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.areas__cue span { width: 22px; height: 1px; background: #fff; }

.areas__regions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 87px;
  padding-top: 63px;
  padding-bottom: 21px;
}
.region h3 {
  color: var(--blue-600);
  font-size: 13px;
  font-weight: 700;
  line-height: 14.56px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.region h3 + .region__group { padding-top: 24px; }
.region__group + h3 { margin-top: 18px; }
.region__group {
  padding-top: 18px;
  color: var(--slate-600);
  font-size: 13px;
  line-height: 24.7px;
}
.region__group strong {
  display: block;
  padding-bottom: 3px;
  color: var(--navy-800);
  font-weight: 700;
}

/* ---------- Contact ---------- */
.contact { padding-top: 120px; padding-bottom: 120px; }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 748fr) minmax(0, 680fr);
  gap: 12px;
}
/* The details card alone fills the column, level with the form beside it. */
.contact__side { display: grid; }
.contact-card {
  display: flex;
  gap: 35px;
  padding: 49px 41px;
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-xl);
  background: var(--grad-dark);
  color: #fff;
}
/* Social links sit on the column's bottom edge, level with the last list item. */
.contact-card__lead {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 25px;
  width: 283px;
}
.contact-card__lead .social { margin-top: auto; }
.contact-card__logo { width: 150px; height: auto; }

.social { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: .76px solid currentColor;
  border-radius: 50%;
  color: #fff;
  transition: background-color .3s, color .3s;
}
.social a:hover { background: #fff; color: var(--navy-900); text-decoration: none; }
.social svg { width: 100%; height: 100%; }
.contact-card__lead h2 {
  max-width: 267px;
  font-size: clamp(34px, 3.5vw, 45px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.067em;
}
.contact-card__lead p {
  max-width: 236px;
  font-size: 17px;
  font-weight: 600;
  line-height: 28px;
}
.contact-card__list { display: grid; align-content: start; gap: 33px; margin: 0; min-width: 0; }
.contact-card__list dt { color: var(--blue-400); font-size: 14px; }
.contact-card__list dd {
  margin: 0;
  padding-top: 9.3px;
  font-size: 18.67px;
  font-weight: 500;
  line-height: 29.9px;
  overflow-wrap: anywhere;
}
.contact-card__list dd span { display: block; }
.contact-card__list dd span + span { margin-top: 5px; }
.contact-card__list a:hover { text-decoration: underline; text-underline-offset: 4px; }

.estimate-form {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 71px 38px 47px;
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card), var(--shadow-card);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 10px; min-width: 0; }
.field__label { color: var(--navy-800); font-size: 13px; font-weight: 500; }
.req { color: var(--slate-600); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid var(--silver-300);
  border-radius: var(--pill);
  background: rgb(255 255 255 / .82);
  color: var(--navy-800);
  font-size: 16px;
  font-weight: 500;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}
.field select {
  height: 54px;
  padding-right: 48px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23203E59' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 25px center;
  cursor: pointer;
}
.field select:invalid { color: var(--slate-600); }
.field textarea {
  height: 96px;
  padding: 14px 15px;
  border-radius: 31px;
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--slate-600); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgb(123 189 236 / .25);
}
.field input:user-invalid, .field select:user-invalid { border-color: #b4413c; }
.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}
.form-foot__note {
  max-width: 367px;
  color: var(--slate-600);
  font-size: 12px;
  line-height: 1.4;
}
.form-foot__note strong { display: block; color: var(--blue-600); font-weight: 700; }
.form-feedback {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--sky-50);
  color: var(--navy-900);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Closing CTA + footer ---------- */
.closing-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-950);
  color: #fff;
}
.closing-wrap__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.closing-wrap__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.closing-wrap__shade {
  position: absolute;
  pointer-events: none;
  top: -54px;
  left: -5%;
  width: 105%;
  height: 1250px;
  background:
    linear-gradient(167.75deg, rgb(var(--navy-rgb) / .75) 5.6%, rgb(var(--navy-rgb) / 0) 56.2%),
    linear-gradient(166.9deg, rgb(var(--navy-rgb) / .75) 1.4%, rgb(var(--navy-rgb) / 0) 43.2%);
}
.closing-wrap__shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(151.95deg, rgb(var(--navy-rgb) / .75) 3.3%, rgb(var(--navy-rgb) / 0) 41.9%);
  mix-blend-mode: multiply;
}
/* Dark fade behind the footer, from Figma node 6075:9614: eight #071524
   multiply layers at 45% in four shapes. Each three-deep stack is folded into
   one layer, its opacity matched to the Figma render's brightness. They hang
   115px past the page end, where the Figma frame ends. */
.closing-wrap { --fade-drop: -115px; }
.closing-wrap__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--fade-drop);
  height: var(--h);
  background: linear-gradient(0deg, rgb(var(--shade)) 14.833%, rgb(4 16 31 / 0) var(--to));
  mix-blend-mode: multiply;
  opacity: var(--a);
  pointer-events: none;
}
.closing { min-height: 660px; padding-top: 110px; }
/* Block-level flex: as inline-flex the kicker sat on a line box whose strut
   pushed it 9px below the 110px top padding in Figma node 6075:9628. */
.closing .kicker { display: flex; width: fit-content; margin-bottom: 15px; }
.closing h2 {
  max-width: 14.5em;
  font-size: clamp(36px, 4.3vw, 55px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.055em;
}
.closing__inner > p:not(.kicker) {
  max-width: 530px;
  margin-top: 25px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}
.closing__inner .cta-row { margin-top: 35px; }

.site-footer { padding: 25px 0 95px; font-size: 13px; }
/* Footer as a frosted glass bar over the sharp closing photo (Gabriel,
   2026-09-29; replaces the masked progressive-blur copy of the photo). */
.site-footer {
  position: relative;
  padding-top: 64px;
  background: rgb(var(--navy-rgb) / .42);
  border-top: 1px solid rgb(255 255 255 / .14);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}
/* Footer shares the 1280 content column (Gabriel, 2026-09-26; previously the
   1440 wide column with a 510/255/297/212 split). The brand block keeps its
   300px measure and the three link columns size to their content, spread with
   space-between so the last column ends flush with the right edge of the
   column instead of leaving a 200px hole after "Company". */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 300px) repeat(3, auto);
  justify-content: space-between;
  gap: 40px;
}
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__brand img { width: 170px; height: auto; }
.site-footer__brand p { max-width: 300px; padding-top: 22px; line-height: 21.45px; }
.site-footer__brand a { padding-top: 10px; }
.site-footer__brand .site-footer__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 22px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.04em;
}
.site-footer__phone svg { flex: none; width: 22px; height: 22px; color: var(--blue-300); }
.site-footer__brand .social { margin-top: 19px; }
.site-footer__brand .social a { padding: 0; }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.site-footer__col h3 {
  padding-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 15.7px;
}
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 55px;
  font-size: 12px;
  line-height: 19.2px;
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / .2);
  font-size: 11px;
  line-height: 18.15px;
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 10px; font-weight: 700; }
.site-footer__links .inline-link { color: #fff; }
.site-footer__links .inline-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__credit { display: flex; align-items: center; gap: 10px; }
.site-footer__credit img { width: 74px; height: auto; }
/* Credit logo: lifts and glows under the pointer; the padding is the touch target. */
.site-footer__broud { display: inline-flex; align-items: center; margin: -12px -8px; padding: 12px 8px; border-radius: 10px; }
.site-footer__broud img { transition: transform .45s var(--ease-out), filter .35s ease, opacity .35s ease; }
@media (hover: hover) {
  .site-footer__broud:hover img { transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 6px 14px rgb(164 217 255 / .55)); }
}
.site-footer__broud:active img { transform: scale(.96); opacity: .8; }
.site-footer__broud:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .site-footer__broud img { transition: none; } }

/* ---------- Dialog ---------- */
.preview-dialog {
  width: min(560px, 100% - 32px);
  max-height: 85vh;
  padding: 52px 40px 36px;
  border: 1px solid var(--silver-200);
  border-radius: var(--radius-xl);
  color: var(--navy-800);
  box-shadow: var(--shadow-panel);
}
.preview-dialog::backdrop { background: rgb(9 20 31 / .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.preview-dialog h2 { font-size: 30px; font-weight: 500; letter-spacing: -.05em; }
.preview-dialog p { margin-top: 16px; color: var(--slate-700); font-size: 15px; line-height: 1.6; }
.preview-dialog .dialog-done { margin-top: 28px; }
.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 26px;
  line-height: 1;
}
.dialog-close:hover { background: var(--silver-200); }

/* ---------- Scroll reveal ---------- */
/* Every entrance uses the hero headline's move: out of a 10px blur, up 14px. */
.js [data-reveal] {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  transition: opacity .9s var(--ease-soft), filter .9s var(--ease-soft), transform .9s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; filter: none; transform: none; }
/* Scroll-reveal twin of .enter-each, for rows of glass buttons. */
.js [data-reveal-each] > * { opacity: 0; }
.js [data-reveal-each].is-in > * { opacity: 1; }
:where(.js [data-reveal-each].is-in) > * {
  animation: enter-in 900ms var(--ease-soft) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* ---------- Hero entrance ----------
   The headline arrives word by word out of a soft blur; the supporting pieces
   rise in after it on a 90ms stagger set by --i. */
.reveal-words > span {
  display: inline-block;
  opacity: .001;
  filter: blur(10px);
  transform: translateY(14px);
  animation: word-in 900ms var(--ease-soft) both;
  animation-delay: calc(360ms + var(--i, 0) * 62ms);
}
@keyframes word-in { to { opacity: 1; filter: blur(0); transform: none; } }

/* Fill is `backwards`, not `both`, so nothing is left animating once the
   entrance is over. */
.enter {
  animation: enter-in 900ms var(--ease-soft) backwards;
  animation-delay: calc(560ms + var(--i, 0) * 90ms);
}
@keyframes enter-in {
  from { opacity: .001; filter: blur(10px); transform: translateY(14px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* Headings everywhere else get the hero's word-by-word entrance too. app.js
   wraps each word of an h1.enter or a revealed h2 in .rw; page titles play on
   load, section titles when their [data-reveal] block scrolls in. The heading
   itself then holds still so the words carry the motion. */
.js .rw {
  display: inline-block;
  opacity: .001;
  filter: blur(10px);
  transform: translateY(14px);
}
.js .rw-load .rw { animation: word-in 900ms var(--ease-soft) both; animation-delay: calc(360ms + var(--w-i, 0) * 62ms); }
.js .is-in .rw, .js .is-in.rw-host .rw { animation: word-in 900ms var(--ease-soft) both; animation-delay: calc(120ms + var(--w-i, 0) * 62ms); }
.js .rw-host.enter { animation: none; }
.js [data-reveal].rw-host { opacity: 1; filter: none; transform: none; }
/* Wrappers that hold glass pieces (backdrop-filter) animate each child rather
   than themselves. A wrapper fading in becomes a backdrop root, so the blur on
   the Call button and the project card would only switch on once the fade
   ended. Fading the glass element itself keeps the blur live from frame one. */
:where(.enter-each) > * {
  animation: enter-in 900ms var(--ease-soft) backwards;
  animation-delay: calc(560ms + var(--i, 0) * 90ms);
}
/* The group entrances above sit at zero specificity so a button's hover pulse
   can take the `animation` property over. app.js tags a button .has-entered on
   first hover; from then on the entrance is dropped, so moving the pointer
   away never replays it. */
:where(.enter-each, [data-reveal-each]) > .has-entered { animation: none; }

/* ---------- Scroll-filled text ----------
   app.js wraps each word of a [data-reveal-text] block and writes --w (0 to 1)
   as the block crosses the screen. Without the script the text stays fully lit. */
.rt-word {
  display: inline-block;
  white-space: pre;
  opacity: calc(.16 + .84 * var(--w, 1));
  transition: opacity 120ms linear;
}

/* ---------- Responsive ---------- */
/* Below a 1300px card the owners would run into the copy panel, so the about
   card stacks: copy first, then the scene photo on its own. */
@media (max-width: 1379px) {
  .about-card { flex-direction: column; align-items: stretch; min-height: 0; background: #fff; }
  .about-card__scene { position: relative; inset: auto; order: 2; aspect-ratio: 4 / 3; }
  .about-card__scene .about-card__frame { top: 0; left: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .about-card__scene img { object-fit: cover; object-position: 50% 30%; }
  .about-card__people { display: none; }
  .about-card__copy { width: auto; margin: 0; padding: 56px 61px; border-radius: 0; }
  .about-card__note { width: auto; max-width: 640px; }
  .about-card__quote p { max-width: 640px; }
}

@media (max-width: 1279px) {
  .hero-showcase { width: 340px; }
  .hero-showcase__viewport { height: 214px; }
  .difference-intro { padding: 52px 56px; gap: 48px; }
  .difference-intro__head { width: 360px; }
}

@media (max-width: 1099px) {
  .site-nav, .btn-ghost--nav { display: none; }
  .menu-toggle { display: grid; }
  .site-header__actions { margin-left: auto; }

  .difference-intro { flex-direction: column; gap: 32px; min-height: 0; padding: 44px 40px; }
  /* Stacked footer runs much taller: keep the darkest band on screen. */
  .closing-wrap { --fade-drop: 0px; }
  .difference-intro__head { width: auto; }
  .difference-intro__head .h2 { max-width: 560px; }

  .service-carousel { --card-w: 340px; --card-w-active: 520px; --card-h: 520px; }
  .service-card__body { padding: 36px; }

  .about-card__copy { padding: 44px 40px 48px; }

  .reviews__rail { grid-auto-columns: calc((100% - var(--rail-gap)) / 2); }

  .contact__grid { grid-template-columns: 1fr; gap: 10px; }

  .site-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 48px;
    min-height: 0;
    padding-top: 136px;
    padding-bottom: 72px;
  }
  .hero__copy, .hero-stats, .hero-showcase { grid-column: 1; grid-row: auto; }
  .hero-showcase { align-self: start; width: min(386px, 100%); }
  /* Stats hold one row at any width: the figures scale with the row itself
     (container units), the labels wrap underneath. */
  .hero-stats {
    container-type: inline-size;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    column-gap: 12px;
  }
  .hero-stats strong { font-size: clamp(19px, 7cqi, 29px); }

  .difference-cards { grid-template-columns: 1fr; }
  .photo-card { height: 420px; }

  .services__head { flex-direction: column; align-items: flex-start; gap: 20px; }

  .projects { padding-top: 110px; }
  .projects__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; }
  .about { padding-top: 120px; }
  .reviews { padding-top: 96px; }

  .areas__regions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
  .region:last-child { grid-column: 1 / -1; padding-top: 18px; }

  .contact-card { gap: 32px; }
  .contact-card__lead { width: 240px; }
}

/* The card keeps its lead | details split on tablets and stacks only when
   the details column would squeeze the email address. */
@media (max-width: 679px) {
  .contact-card { flex-direction: column; }
  .contact-card__lead { width: auto; }
}

@media (max-width: 767px) {
  .site-header { padding-top: 18px; }
  .brand img { width: 108px; }
  .site-header__actions .btn--sm { display: none; }

  .hero__lead { font-size: 16px; }
  .hero-stats li > span { font-size: 11px; line-height: 14px; }
  .hero__copy .cta-row .btn-ghost > span { padding-inline: 14px; }

  .difference { margin-top: -36px; padding-bottom: 96px; }
  .difference-intro { padding: 32px 24px; }
  .photo-card__body { bottom: 36px; left: 28px; right: 28px; }

  .services { padding-top: 72px; }
  .service-carousel { --card-w: 72vw; --card-w-active: 84vw; --card-h: 500px; margin-top: 48px; }
  .service-card__body { padding: 26px; }
  .service-card__actions { gap: 12px; }
  .service-card__actions .underline-link { display: none; }

  .br-desktop { display: none; }
  /* Tiles leave their columns and flow two-up at one square size. */
  .projects { --stack-top: 88px; }
  .projects__grid { grid-template-columns: 1fr; gap: 36px; }
  .projects__copy { position: static; }
  .project-stack { gap: 16px; }

  .about-card__copy { padding: 32px 24px 36px; gap: 28px; }
  .about-card__quote p { font-size: 19px; }
  /* Figma 6096:656: the photo panel runs 398 × 410 and the scene is drawn at
     818 × 461, 340px left and 25px above the panel, so the owners fill it. */
  .about-card__scene { aspect-ratio: 4 / 5; }
  .about-card__scene img { object-position: 50% 25%; }
  .about-card__scene::before {
    inset: auto 0 -6.3%;
    height: 86.8%;
    background: linear-gradient(0deg, rgb(var(--shade)) 13.75%, rgb(4 16 31 / 0) 51.48%);
    opacity: .45;
  }

  .reviews__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .reviews__track { --rail-gap: 12px; margin: 36px calc(-1 * var(--gutter)) -32px; padding: 8px var(--gutter) 48px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .reviews__track::-webkit-scrollbar { display: none; }
  .reviews__rail { grid-auto-columns: min(82%, 320px); transform: none !important; }
  .reviews__rail .review-card.is-off { opacity: 1; visibility: visible; }
  .review-card { scroll-snap-align: start; }
  .review-card { min-height: 0; padding: 24px 22px; gap: 20px; }

  .areas__band { min-height: 560px; }
  .areas__media .areas__frame img { object-position: 50% 45%; }
  .areas__shade { top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgb(var(--navy-rgb) / .95) 0%, rgb(var(--navy-rgb) / .75) 45%, rgb(var(--navy-rgb) / .1) 80%); }
  .areas__intro { padding-top: 52px; }
  .areas__intro p { font-size: 16px; }
  .areas__regions { grid-template-columns: 1fr; }
  .region + .region { padding-top: 32px; }

  .contact { padding-top: 80px; padding-bottom: 64px; }
  .contact-card { padding: 36px 26px; }
  .estimate-form { padding: 36px 22px; }
  .form-row { grid-template-columns: 1fr; gap: 20px; }

  .closing { min-height: 0; padding-top: 110px; padding-bottom: 180px; }
  .closing__inner > p:not(.kicker) { font-size: 16px; }
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

.btn-ghost__icon { display: none; }

/* Phones: Estimate and Call share one row. The Call button drops the number
   (still read out through its label) and gains a handset icon instead. */
@media (max-width: 767px) {
  .cta-row { gap: 8px; }
  .cta-row .btn { height: 50px; gap: 10px; padding: 0 11px 0 18px; font-size: 14.5px; }
  .cta-row .btn-ghost { min-height: 50px; font-size: 14.5px; }
  .hero__copy .cta-row .btn-ghost > span,
  .cta-row .btn-ghost > span { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 12px; }
  .btn-ghost__icon { display: block; flex: none; width: 17px; height: 17px; }
  .call-number { display: none; }
}
/* Smallest phones (320px) still fit the pair on one row. */
@media (max-width: 359px) {
  .cta-row .btn { gap: 8px; padding-left: 14px; font-size: 13.5px; }
  .cta-row .btn-ghost { font-size: 13.5px; }
  .hero__copy .cta-row .btn-ghost > span,
  .cta-row .btn-ghost > span { padding: 0 13px 0 10px; }
}

/* ---------- Tablet & phone adaptations ---------- */

/* Portrait tablets: the headline takes the full width, then the stats and the
   project card share one row instead of leaving the card stranded on the left. */
@media (min-width: 600px) and (max-width: 899px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
  .hero__copy { grid-column: 1 / -1; }
  .hero-stats { grid-column: 1; grid-row: 2; align-self: end; }
  .hero-showcase { grid-column: 2; grid-row: 2; width: 100%; }
  .hero-showcase__viewport { height: auto; aspect-ratio: 16 / 10; }
}

/* The three difference cards do the same once they no longer fit three-up,
   at the photos' own portrait ratio. */
@media (max-width: 899px) {
  .difference-cards {
    display: flex;
    gap: 10px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .difference-cards::-webkit-scrollbar { display: none; }
  .difference-cards .photo-card {
    flex: 0 0 min(78%, 340px);
    height: auto;
    aspect-ratio: 947 / 1114;
    scroll-snap-align: start;
  }
}

.mobile-cta { display: none; }

@media (max-width: 767px) {
  /* Footer holds two columns: Metal Roofing beside Company, then the long
     services list across the full width, itself split in two. */
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__col--wide {
    order: 3;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    justify-items: start;
  }
  .site-footer__col--wide h3 { grid-column: 1 / -1; }
  .site-footer { padding-bottom: 56px; }

  .preview-dialog { padding: 52px 24px 28px; }

  /* Hero plate, Figma 6098:3047 (440 frame). The scene and a cut-out of the
     two roofers are cropped from the Figma layers to one shared box, so they
     register; the cut-out sits above the navy shading and the multiply stack
     so the roofers stay bright. Boxes are placed off the screen's centre line
     with the Figma geometry, and the copy starts below the roofers. */
  .hero__inner { padding-top: 287px; }
  /* The aerial photo is landscape: drawn at twice the screen width so the
     house fills the top of the hero, above the copy. */
  .hero__media img {
    position: absolute;
    top: 0;
    left: -62vw;
    z-index: 0;
    width: 200vw;
    max-width: none;
    height: auto;
    object-fit: fill;
    transform-origin: 50% 0;
  }
  .hero__shade {
    z-index: 1;
    top: -110px;
    left: calc(50% - 988.45px);
    width: 1490.61px;
    height: 923.87px;
    background:
      linear-gradient(149.18deg, rgb(var(--navy-rgb) / .75) 9.827%, rgb(var(--navy-rgb) / 0) 37.296%),
      linear-gradient(167.41deg, rgb(6 24 39 / .75) 11.108%, rgb(var(--navy-rgb) / 0) 56.18%);
  }
  /* Figma's four multiply layers, top first, multiplied into one another and
     then into the photo. Anchored to the hero's bottom edge (the media box
     runs 36px past it for the strips). */
  .hero__media::before {
    z-index: 2;
    inset: auto auto 36px calc(50% - 917px);
    width: 1419px;
    height: 1278px;
    background:
      linear-gradient(-0.709deg, rgb(14 29 46) 58.978%, rgb(26 61 100 / 0) 77.734%),
      linear-gradient(-0.853deg, rgb(26 61 100) 13.749%, rgb(26 61 100 / 0) 51.484%),
      linear-gradient(-0.853deg, rgb(26 61 100) 13.749%, rgb(26 61 100 / 0) 51.484%),
      linear-gradient(-0.853deg, rgb(26 61 100 / .45) 13.749%, rgb(26 61 100 / 0) 51.484%);
    background-blend-mode: multiply;
  }
  .hero__media > .hero__cutout { position: absolute; inset: 0; z-index: 3; display: block; }
  /* Soft-light wash: Figma's layer stops 976px down, on a soft edge. */
  .hero__media::after {
    z-index: 4;
    inset: 0 0 auto;
    height: 996px;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
  }

  /* Closing photo, Figma 6096:1188. The plate is drawn at 1576 × 1349, 78px
     above the section and centred 30px left of the screen's middle, kept
     sharp as the design shows it. The grid sizes the media box to the closing
     section, but the plate runs on under the footer (overflow visible) so the
     glass footer bar has photo to frost; its lower edge melts into #06080b. */
  .closing-wrap { display: grid; grid-template-columns: minmax(0, 1fr); background: #06080b; }
  .closing-wrap__media { position: relative; inset: auto; grid-area: 1 / 1; overflow: visible; }
  .closing { grid-area: 1 / 1; min-height: 640px; }
  .closing-wrap__media img {
    position: absolute;
    top: -78px;
    left: calc(50% - 818px);
    width: 1576px;
    max-width: none;
    height: 1349px;
    -webkit-mask-image: linear-gradient(#000 70%, transparent);
    mask-image: linear-gradient(#000 70%, transparent);
  }
  .closing-wrap__shade { top: -22px; left: calc(50% - 317px); width: 1055px; height: 654px; }
  /* Bottom fades: Figma stacks three 45% multiply layers for two of the four
     shapes; each stack is one layer here at the combined .83. */
  .closing-wrap__fade {
    left: calc(50% - 266.5px);
    right: auto;
    bottom: -168.27px;
    width: 1005px;
    background: linear-gradient(0deg, rgb(var(--shade)) 14.833%, rgb(4 16 31 / 0) 89.045%);
  }
  .closing-wrap__fade:nth-of-type(2) {
    height: 586px;
    opacity: .83;
    background: linear-gradient(0deg, rgb(var(--shade)) 14.833%, rgb(4 16 31 / 0) 30.203%);
  }
  .closing-wrap__fade:nth-of-type(3) { height: 586px; opacity: .45; }
  .closing-wrap__fade:nth-of-type(4) { height: 508px; opacity: .83; }
  .closing-wrap__fade:nth-of-type(5) { height: 593px; opacity: .45; }

  /* Quick contact bar: Call and Estimate within thumb reach, clear of the
     home indicator. app.js shows it after the hero's own buttons scroll away
     and hides it again over the form and the closing CTA. */
  .mobile-cta {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 30;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
    border: 1px solid rgb(255 255 255 / .16);
    border-radius: var(--pill);
    background: rgb(12 27 41 / .8);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 18px 40px rgb(7 21 36 / .35);
    transform: translateY(calc(100% + 32px));
    visibility: hidden;
    transition: transform .55s var(--ease-out), visibility 0s linear .55s;
  }
  .mobile-cta.is-visible {
    transform: none;
    visibility: visible;
    transition: transform .55s var(--ease-out), visibility 0s;
  }
  .mobile-cta__call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 14px 0 12px;
    border: 1px solid rgb(255 255 255 / .38);
    border-radius: var(--pill);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .mobile-cta__call svg { width: 18px; height: 18px; }
  .mobile-cta .btn { height: 48px; justify-content: space-between; gap: 8px; padding: 0 8px 0 18px; font-size: 14px; white-space: nowrap; }
  /* Narrow phones: the number stays, the arrow disc gives up its room. */
  @media (max-width: 389px) {
    .mobile-cta__call { gap: 6px; padding: 0 12px 0 10px; font-size: 13.5px; }
    .mobile-cta .btn { justify-content: center; padding: 0 12px; font-size: 13.5px; }
    .mobile-cta .btn__icon { display: none; }
  }
  @media (max-width: 339px) {
    .mobile-cta__call { gap: 5px; padding: 0 10px 0 8px; font-size: 12.5px; }
    .mobile-cta__call svg { width: 15px; height: 15px; }
    .mobile-cta .btn { padding: 0 8px; font-size: 12.5px; }
  }
}

/* Touch: every link and control gets a 40–44px target, without changing
   the visual rhythm of the lists they sit in. */
@media (pointer: coarse) {
  .social a { width: 44px; height: 44px; }
  .hero-showcase__num { min-width: 44px; min-height: 44px; margin-block: -10px; }
  .hero-showcase__num:first-child { margin-left: -13px; }
  .hero-showcase__num:last-child { margin-right: -13px; }
  .text-link, .services__intro .text-link { min-height: 0; }
  .contact-card__list dd a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -7px; }
  .site-footer__brand > a { display: inline-flex; align-items: center; min-height: 40px; padding-top: 0; }
  .site-footer__brand .site-footer__phone { margin-top: 12px; padding-top: 0; }
  .site-footer__col { gap: 0; }
  .site-footer__col h3 { padding-bottom: 6px; }
  .site-footer__col a,
  .site-footer__links a,
  .site-footer__links .inline-link { display: inline-flex; align-items: center; min-width: 44px; min-height: 40px; }
  .site-footer__links { gap: 0 18px; }
}

/* No hover on touch: a tap would leave cards zoomed and buttons lifted. */
@media (hover: none) {
  .btn:hover, .hero-showcase__frame:hover { transform: none; }
  .btn:hover::after { left: -140px; }
  .btn:active { transform: scale(.98); }
  .photo-card:hover img,
  .service-card:not(.is-active):hover > img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .hero__media img { transform: none; }
  .reveal-words > span, .enter, .js .rw { opacity: 1; filter: none; transform: none; animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-reveal-each] > * { opacity: 1; }
}

/* ---------- Compact contact ---------- */
/* Compact estimate form, the same one the inner pages use (pages.css): less
   padding, shorter fields, email + address on one row, 1280 column. */
/* Same 1280 column as the nav bar; the two cards share it 50/50. */
@media (min-width: 768px) { .contact--compact .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.contact--compact .estimate-form { gap: 16px; padding: 36px 36px 32px; }
.contact--compact .estimate-form .form-row { gap: 14px; }
.contact--compact .estimate-form .form-row--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact--compact .field { gap: 7px; }
.contact--compact .field__label { font-size: 12.5px; }
.contact--compact .field input, .contact--compact .field select { min-height: 46px; height: 46px; }
.contact--compact .field textarea { height: 84px; padding: 12px 15px; }
.contact--compact .form-foot { margin-top: 4px; }
.contact--compact .contact-card { gap: 28px; padding: 38px 32px; }
.contact--compact .contact-card__lead { width: 236px; }
.contact--compact .contact-card__lead h2 { font-size: 34px; }
.contact--compact .contact-card__list { gap: 24px; }
.contact--compact .contact-card__list dt { font-size: 13px; }
.contact--compact .contact-card__list dd { padding-top: 6px; font-size: 16px; line-height: 26px; }
@media (max-width: 767px) {
  .contact--compact .estimate-form { padding: 28px 22px 28px; }
  .contact--compact .estimate-form .form-row--pair { grid-template-columns: 1fr; }
  .contact--compact .contact-card { padding: 32px 24px; }
  .contact--compact .contact-card__lead { width: auto; }
  .contact--compact .contact-card__lead h2 { font-size: 30px; }
}

/* Where We Work, dotted map version (2026-10-15): full-width navy band, the
   content on the 1280 column, copy on the left and the animated service-area
   map (Amherst HQ to every region we serve) on the right. */
.areas { padding-top: 24px; }
/* A rounded card on the 1440 grid (like the Most Companies panel); the
   .container inside keeps the copy and map on the 1280 column. */
.areas__band { display: block; min-height: 0; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl); box-shadow: var(--shadow-panel); }
.areas__band .areas__media { border-radius: inherit; }
.areas__band .areas__grid { width: min(var(--content), 100% - 2 * 64px); }
.areas__media { background: var(--grad-dark); }
.areas__media::after { display: none; }
.areas__seams {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 64px);
}
.areas__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 32px;
  padding: 20px 0;
}
.areas__grid .areas__intro { padding-top: 0; gap: 22px; }
.areas__grid .areas__intro .kicker { max-width: none; margin-bottom: -6px; font-size: 10px; font-weight: 700; line-height: 15px; }
.areas__grid .areas__intro h2 { line-height: 1.1; }
.areas__map { margin: 0; justify-self: end; width: min(100%, 535px); }
.areas__map img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
@media (max-width: 899px) {
  .areas__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 56px 0 32px; }
  .areas__band .areas__grid { width: calc(100% - 2 * 24px); }
  .areas__map { justify-self: center; width: min(100%, 560px); }
}
@media (max-width: 767px) {
  .areas__band { border-radius: 20px; }
  .areas__map img { -webkit-mask-image: none; mask-image: none; }
}

/* Closing band without a photo (2026-10-15): navy with standing seam ribs that
   catch a soft light from the upper right, and the TopLine mark as a watermark. */
.closing-wrap__media { background: var(--grad-dark); }
.closing-wrap__seams {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 35%, rgb(191 227 255 / .07) 55%, transparent 75%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .07) 0 1px, rgb(0 0 0 / .18) 1px 2px, transparent 2px 72px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.closing-wrap .closing-wrap__media img.closing-wrap__mark {
  position: absolute;
  top: 150px;
  right: max(24px, calc(50% - 640px));
  left: auto;
  width: min(34vw, 460px);
  height: auto;
  max-width: none;
  object-fit: contain;
  opacity: .07;
  -webkit-mask-image: none;
  mask-image: none;
}
@media (max-width: 767px) {
  .closing-wrap .closing-wrap__media img.closing-wrap__mark { display: none; }
}

/* Closing CTA on white (2026-10-15): tag and title on the left, copy and
   buttons on the right, then a continuous reel of project photos. The navy
   band now only carries the footer. */
.closing { min-height: 0; padding: 120px 0 0; overflow: hidden; background: #fff; color: var(--navy-900); }
.closing__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.closing .kicker { margin-inline: auto; color: var(--blue-600); }
.closing h2 { max-width: 13.5em; margin-inline: auto; color: var(--navy-900); }
.closing h2 br { display: none; }
.closing .text-ice { background-image: var(--grad-text-sky); }
.closing__side { display: flex; flex-direction: column; align-items: center; }
.closing__inner .closing__side > p { max-width: 520px; margin: 0 auto; color: var(--slate-700); font-size: 18px; font-weight: 500; line-height: 1.5; }
.closing__inner .cta-row { justify-content: center; margin-top: 28px; }
.closing .btn--light { background: var(--grad-blue); --btn-shadow: 0 0 0 1px rgb(123 189 236 / .5), var(--inset-sheen); --pulse-rgb: 123 189 236; }
.closing .btn-ghost { border-color: rgb(22 50 74 / .22); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--navy-900); }
.closing .btn-ghost__disc { background: var(--navy-900); color: #fff; }
.closing .btn-ghost--call::before { background: var(--navy-900); }
.closing .btn-ghost--call:hover, .closing .btn-ghost--call:focus-visible { border-color: var(--navy-900); color: #fff; }
.closing .btn-ghost--call:hover .btn-ghost__disc, .closing .btn-ghost--call:focus-visible .btn-ghost__disc { background: #fff; color: var(--navy-900); }

.reel { margin-top: 64px; padding: 8px 0 120px; overflow: hidden; }
.reel__track { display: flex; gap: 24px; width: max-content; animation: reel-loop 120s linear infinite; }
@keyframes reel-loop { to { transform: translateX(calc(-50% - 12px)); } }
.reel__item { position: relative; flex: none; display: block; width: 420px; height: 300px; overflow: hidden; border-radius: 22px; background: var(--silver-200); }
.reel__item img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  .reel { overflow-x: auto; }
  .reel__track { animation: none; padding: 0 var(--gutter); }
  .reel__item[aria-hidden="true"] { display: none; }
}

@media (max-width: 767px) {
  .closing { padding-top: 80px; }
  .closing__inner { gap: 18px; }
  .closing__inner .closing__side > p { font-size: 16px; }
  .reel { margin-top: 44px; padding-bottom: 72px; }
  .reel__track { gap: 14px; animation-duration: 90s; }
  @keyframes reel-loop { to { transform: translateX(calc(-50% - 7px)); } }
  .reel__item { width: 260px; height: 190px; border-radius: 16px; }
}


/* Services intro (2026-10-15): breathing room between the copy and the button. */
.services__intro .text-link { margin-top: 20px; }

/* About, split version (2026-10-15): the copy and the owners' photo sit in two
   separate cards side by side, the same pattern as the estimate block. */
.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.about-panel {
  display: flex;
  flex-direction: column;
  gap: 35px;
  padding: 56px 48px;
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card), var(--shadow-card);
}
.about-panel .h2 { max-width: 492px; }
.about-panel .about-card__note { width: auto; }
.about-panel .about-card__quote p { max-width: none; }
.about-photo {
  position: relative;
  margin: 0;
  min-height: 560px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--navy-950);
  box-shadow: var(--shadow-card), var(--shadow-card);
}
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
@media (max-width: 1099px) {
  .about-panel { padding: 44px 40px 48px; }
}
@media (max-width: 899px) {
  .about-split { grid-template-columns: minmax(0, 1fr); }
  .about-photo { min-height: 0; aspect-ratio: 4 / 5; }
}
@media (max-width: 767px) {
  .about-panel { gap: 28px; padding: 32px 24px 36px; }
  .about-panel .about-card__quote p { font-size: 19px; }
}


/* Hero, arc version (2026-10-20). The blurry aerial plate is gone: the copy
   sits centred on navy, and under it a strip of real
   project photos curves away like the inside of a drum. Cards near the middle
   are small and face the viewer; toward the edges they grow and turn inward.
   app.js (initArc) places every card each frame and drifts the strip sideways.
   Sizes follow the window height so the arc stays on the first screen on a
   laptop. The selectors here override the old photo-plate rules above. */
.hero { overflow: clip; padding-bottom: clamp(88px, 12vh, 132px); }
.hero__media { background: #0c1b29; }
.hero__media::after { display: none; }
/* The plate sits on ::before so it can zoom in on load inside the masked frame. */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: auto;
  width: auto;
  height: auto;
  display: block;
  background: url("assets/hero-bg.webp") center top / cover no-repeat;
  mix-blend-mode: normal;
  opacity: 1;
  transform-origin: 50% 0;
  animation: hero-zoom-in 2600ms var(--ease-soft) both;
}
@keyframes hero-zoom-in { from { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hero__media::before { animation: none; } }
.hero__inner {
  display: block;
  min-height: 0;
  padding-top: clamp(118px, 17vh, 168px);
  padding-bottom: 0;
  text-align: center;
}
.hero__copy { display: flex; flex-direction: column; align-items: center; }
.hero h1 { font-size: min(var(--h1), 8.2vh); }
.hero__lead { max-width: 560px; margin-top: clamp(14px, 2.4vh, 22px); color: rgb(255 255 255 / .86); }
.hero__copy .cta-row { justify-content: center; margin-top: clamp(20px, 3.4vh, 32px); }

.hero-arc {
  --card-h: clamp(150px, 25vh, 250px);
  position: relative;
  height: calc(var(--card-h) * 1.8);
  /* The edge cards are taller than the middle ones and rise beside the
     buttons, so the strip is pulled up under the copy. */
  margin-top: calc(var(--card-h) * -.3 + 24px);
  /* The box overlaps the buttons above it (it is pulled up so the tall edge
     cards rise beside them), so only the cards themselves take the pointer. */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.hero-arc__card { pointer-events: auto; touch-action: pan-y; cursor: grab; }
.hero-arc.is-dragging .hero-arc__card { cursor: grabbing; }
.hero__inner { position: relative; z-index: 2; }
.hero-arc__stage { position: absolute; inset: 0; }
.hero-arc__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--card-h) * .8);
  height: var(--card-h);
  margin: calc(var(--card-h) * -.5) 0 0 calc(var(--card-h) * -.4);
  overflow: hidden;
  border-radius: 14px;
  background: var(--navy-800);
  box-shadow: 0 18px 40px rgb(4 12 22 / .45);
  will-change: transform;
  backface-visibility: hidden;
}
.hero-arc__card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Until app.js lays the cards out, keep them hidden so they don't flash in a pile. */
.hero-arc:not(.is-ready) .hero-arc__card { opacity: 0; }

@media (max-width: 899px) {
  .hero__inner { padding-top: 132px; }
  .hero h1 { font-size: clamp(38px, 10.4vw, 56px); }
  .hero__lead { font-size: 16px; }
  .hero-arc { --card-h: clamp(170px, 48vw, 240px); margin-top: calc(var(--card-h) * -.12 + 24px); height: calc(var(--card-h) * 1.5); }
  .hero { padding-bottom: 80px; }
}

/* Buttons, Lumos-style hover (2026-10-20, after lumos19-studio "Booking now").
   Replaces the 2s hover pulse, which fought the entrance animations and made
   the hover feel jumpy. On hover a lighter fill sweeps up from the bottom,
   a light streak crosses once (it also passes on its own every 4.8s), the
   button lifts on a spring, and the arrow slips out to the right and comes
   back in from the left. All motion lives on the background, the pseudo
   elements and the arrow, never on the button's `animation`. */
@media (hover: hover) {
  .btn:hover, .btn-ghost:hover { animation: none; }
}
.btn { --btn-fill: var(--grad-ice); --btn-fill-hover: linear-gradient(180deg, #fff 0%, var(--ice-100) 100%); }
.btn--blue, .btn--glow, .closing .btn--light { --btn-fill: var(--grad-blue); --btn-fill-hover: var(--grad-ice); }
.btn--glow { --btn-fill: linear-gradient(180deg, var(--blue-300) 0%, var(--blue-400) 46%, var(--blue-500) 100%); }
.btn.btn {
  background:
    var(--btn-fill-hover) 50% 100% / 100% 0% no-repeat,
    var(--btn-fill) 0 0 / 100% 100% no-repeat;
  transition:
    transform .45s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .45s var(--ease-out),
    background-size .45s cubic-bezier(.65, 0, .35, 1);
}
.btn.btn:hover, .btn.btn:focus-visible {
  background-size: 100% 100%, 100% 100%;
  transform: translateY(-2px);
  box-shadow: 0 0 0 6px rgb(196 225 246 / .14), 0 18px 44px -12px rgb(123 189 236 / .6), var(--btn-shadow);
}
.btn.btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
/* Glass highlight on the top half. */
.btn::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 8%;
  right: 8%;
  z-index: -1;
  height: 45%;
  border-radius: var(--pill);
  background: linear-gradient(180deg, rgb(255 255 255 / .5), rgb(255 255 255 / 0));
  opacity: .55;
  pointer-events: none;
}
/* Light streak: a slow pass every 4.8s, one quick pass on hover. */
.btn::after {
  left: 0;
  z-index: -1;
  width: 100%;
  background: linear-gradient(115deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / .6) 45%, rgb(255 255 255 / .1) 55%, rgb(255 255 255 / 0) 65%);
  opacity: 1;
  transform: translateX(-120%);
  transition: none;
  animation: btn-sheen 4.8s var(--ease-out) infinite;
}
.btn:hover::after, .btn:focus-visible::after { left: 0; animation: btn-sheen-fast .8s var(--ease-out) forwards; }
@keyframes btn-sheen { 0%, 62% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } }
@keyframes btn-sheen-fast { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
/* Arrow in the dark disc slips out right and re-enters from the left. */
.btn__icon { overflow: hidden; }
.btn:hover .btn__icon, .btn:focus-visible .btn__icon { transform: none; }
.btn:hover .btn__icon svg, .btn:focus-visible .btn__icon svg { animation: btn-orb-arrow .55s var(--ease-out); }
@keyframes btn-orb-arrow { 0% { transform: none; } 45% { transform: translateX(160%); } 46% { transform: translateX(-160%); } 100% { transform: none; } }
@media (hover: none) {
  .btn.btn:hover { background-size: 100% 0%, 100% 100%; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn::after { animation: none; }
  .btn:hover .btn__icon svg { animation: none; }
}

/* Outline-only ghost buttons (2026-10-20): no glass fill, just the white
   hairline, like the Call button in the header. The Call hover (white disc
   filling the pill) stays. */
.btn-ghost {
  border: 1px solid #fff;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.btn-ghost:hover { border-color: #fff; background: transparent; }

/* Key phrases in subtexts (2026-10-20): semibold in the dark navy. On dark
   sections the navy would vanish, so those set --hl to white. */
.hl { color: var(--hl, var(--navy-900)); font-weight: 600; }
.hero__lead, .page-hero__lead, .service-card, .heights__intro, .heights__note,
.hybrid__body, .prose--light, .pointer__body { --hl: #fff; }

/* Where We Work as a card (2026-10-20, after the Liham Creative hero). On the
   navy band: copy on the left; on the right three columns of project photos
   that drift up, down, up and bleed off the band's top and bottom edges (no
   fade). Each track holds its photos twice so the loop is seamless: one pass
   is half the track plus half a gap. Reduced motion stops it. */
.areas__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  height: clamp(480px, 64vh, 560px);
}
.areas__info {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 48px 40px 48px clamp(32px, 5vw, 72px);
}
.areas__info .kicker { margin-bottom: -6px; font-size: 10px; font-weight: 700; line-height: 15px; }
.areas__info h2 { font-size: clamp(40px, 4.7vw, 60px); font-weight: 500; line-height: 1.1; letter-spacing: -.05em; }
.areas__states { max-width: 440px; color: rgb(255 255 255 / .82); font-size: 17px; font-weight: 500; line-height: 1.6; }
.areas__states strong { color: var(--ice-150); font-weight: 700; }
.areas__audience { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.areas__audience li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: var(--pill);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}
.areas__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad-ice);
  box-shadow: var(--inset-sheen);
  color: var(--navy-900);
}
.areas__icon svg { width: 19px; height: 19px; }
.areas__info .cta-row { margin-top: 8px; }

.areas__projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  height: 100%;
  padding-right: 12px;
  overflow: hidden;
}
.areas__col { min-width: 0; overflow: hidden; }
.areas__track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: areas-up 52s linear infinite;
  will-change: transform;
}
.areas__col--down .areas__track { animation-name: areas-down; animation-duration: 60s; }
.areas__col:nth-child(3) .areas__track { animation-duration: 46s; animation-delay: -18s; }
.areas__track img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 14px; object-fit: cover; }
@keyframes areas-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 6px)); } }
@keyframes areas-down { from { transform: translateY(calc(-50% - 6px)); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .areas__track { animation: none; }
  .areas__col--down .areas__track { transform: translateY(-30%); }
}
@media (max-width: 899px) {
  .areas__layout { grid-template-columns: minmax(0, 1fr); height: auto; }
  .areas__info { padding: 48px 24px 28px; }
  .areas__projects { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 380px; padding: 0 12px; }
  .areas__col:nth-child(3) { display: none; }
}
@media (max-width: 767px) {
  .areas__info { gap: 16px; padding: 44px 20px 24px; }
  .areas__states { font-size: 16px; }
  .areas__audience li { font-size: 14px; }
}

/* Dark surfaces share --grad-dark (2026-10-20); the closing band drops its
   seam ribs like the hero did, so every dark panel reads the same. */
.closing-wrap__seams { display: none; }

/* Hero stats (2026-10-21): plain small figures centred under the middle of the
   arc, where the cards are smallest and leave room below them. */
.hero-mini-stats {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  margin: calc(clamp(150px, 25vh, 250px) * -.26) auto 0;
  padding: 0 16px;
  list-style: none;
  text-align: center;
  color: #fff;
}
.hero-mini-stats li { display: flex; flex-direction: column; gap: 2px; }
.hero-mini-stats strong { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; white-space: nowrap; }
.hero-mini-stats .star { font-size: .7em; margin-left: 3px; vertical-align: .15em; }
.hero-mini-stats li > span { font-size: 12px; line-height: 15px; opacity: .8; }
@media (max-width: 599px) {
  .hero-mini-stats { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 14px 32px; margin-top: 8px; }
}

/* Where We Work, Figma 6236:555 (2026-10-21), measured off the 1440 x 533
   frame: radial navy band, house outlines (laid out on a 560px-tall plate, so
   they run past the bottom edge) and the 01 · 02 · 03 project showcase
   (shared with the old hero) at 819px from the left, 63px down, 516px wide. */
.areas__band { box-shadow: 0 45px 56px rgb(132 148 160 / .35); border-radius: 26px; }
.areas__band .areas__media {
  background: radial-gradient(105% 120% at 30.5% 2%, #203e59 0%, #16324a 38%, #0c1b29 100%);
}
.areas__band .areas__media::before {
  content: "";
  position: absolute;
  top: 44.8%;
  left: 27.66%;
  width: 91.68%;
  height: 61.3%;
  background: url("assets/areas-houses.svg") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.areas__layout { grid-template-columns: minmax(0, 702fr) minmax(0, 738fr); height: clamp(480px, 37vw, 533px); }
.areas__showcase {
  grid-column: auto;
  grid-row: auto;
  align-self: start;
  justify-self: start;
  width: 69.9%;
  margin: clamp(40px, 4.4vw, 63px) 0 0 15.85%;
  gap: 16px;
}
.areas__showcase .hero-showcase__frame { padding: 10.7px; border-radius: 16px; }
.areas__showcase .hero-showcase__frame::after { border-width: 1.3px; }
.areas__showcase .hero-showcase__viewport { height: auto; aspect-ratio: 494 / 326; border-radius: 10.7px; }
.areas__showcase .hero-showcase__slide { inset: 5.3px 8px; width: calc(100% - 16px); height: calc(100% - 10.6px); border-radius: 10.3px; }
.areas__showcase .hero-showcase__progress { gap: 10.7px; height: 36px; }
/* Each step is its audience's icon instead of a number. */
.areas__showcase .hero-showcase__num { flex: none; min-width: 0; min-height: 0; margin: 0; padding: 0; cursor: pointer; }
/* Outline circles, so they read apart from the ice-filled chips in the copy;
   the active step fills with the progress bar's blue. */
.areas__showcase .hero-showcase__num.areas__icon {
  background: rgb(255 255 255 / .06);
  box-shadow: inset 0 0 0 1px rgb(164 217 255 / .45);
  color: #fff;
  transition: opacity .3s, background-color .3s, color .3s;
}
.areas__showcase .hero-showcase__num.is-active { opacity: 1; background: #7bbdec; box-shadow: none; color: var(--navy-900); }
.areas__audience li { transition: border-color .4s, background-color .4s; }
.areas__audience li.is-active { border-color: rgb(196 225 246 / .55); background: rgb(164 217 255 / .1); }
.areas__showcase .hero-showcase__bar { height: 2.7px; }
.areas__showcase .hero-showcase__bar i { background: #7bbdec; }
@media (max-width: 899px) {
  .areas__layout { grid-template-columns: 1fr; height: auto; }
  .areas__showcase { justify-self: center; width: calc(100% - 48px); margin: 0 0 32px; }
  .areas__band .areas__media::before { top: auto; bottom: 0; left: -10%; width: 160%; height: 40%; }
}

/* Phones (2026-10-21): Where We Work and Testimonials stack centred. */
@media (max-width: 599px) {
  .areas__info { align-items: center; text-align: center; padding-inline: 24px; }
  .areas__states { max-width: none; }
  .areas__audience { justify-content: center; }
  .areas__showcase .hero-showcase__progress { justify-content: center; }
  .reviews__head { align-items: center; text-align: center; }
  .reviews__head .section-head { align-items: center; }
  .reviews__nav { justify-content: center; }
  .review-card { text-align: center; }
  .review-card__person { justify-content: center; text-align: left; }
  .review-card__stars { justify-content: center; }
}

/* Footer on phones (2026-10-21): flat navy instead of the frosted glass, which
   picked up an uneven glow from the closing band behind it; everything centred. */
@media (max-width: 599px) {
  .site-footer {
    background: var(--navy-950);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-align: center;
  }
  .site-footer__top { grid-template-columns: 1fr; justify-items: center; }
  .site-footer__brand, .site-footer__col { align-items: center; }
  .site-footer__brand p { margin-inline: auto; }
  .site-footer__brand .site-footer__phone { justify-content: center; }
  .site-footer__brand .social { justify-content: center; }
  .site-footer__col--wide { justify-items: center; }
  .site-footer__bottom { align-items: center; text-align: center; }
  .site-footer__links { justify-content: center; }
  .site-footer__credit { justify-content: center; }
}

/* Reviews on phones (2026-10-21): one card centred with a sliver of the
   previous and next card on each side. */
@media (max-width: 767px) {
  .reviews__track { padding-inline: 14vw; scroll-padding-inline: 14vw; }
  .reviews__rail { grid-auto-columns: 72vw; }
  .review-card { scroll-snap-align: center; }
}

/* Footer link groups (2026-10-21). Desktop: the toggle is just the heading.
   Phones: full-width accordion rows with hairline dividers and 52px targets;
   links inside sit left-aligned in two columns. */
.site-footer__panel { display: contents; }
.site-footer__toggle { all: unset; display: inline-flex; align-items: center; gap: 8px; font: inherit; color: inherit; cursor: default; }
.site-footer__toggle svg { display: none; }
@media (max-width: 599px) {
  .site-footer__top { justify-items: stretch; row-gap: 0; }
  .site-footer__brand { justify-self: center; margin-bottom: 28px; }
  .site-footer__col, .site-footer__col--wide {
    display: block;
    order: 0;
    grid-column: 1 / -1;
    text-align: left;
    border-top: 1px solid rgb(255 255 255 / .12);
  }
  .site-footer__col:last-child { border-bottom: 1px solid rgb(255 255 255 / .12); }
  .site-footer__col h3 { width: 100%; margin: 0; padding: 0; }
  .site-footer__toggle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
  }
  .site-footer__toggle:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; border-radius: 6px; }
  .site-footer__toggle svg { display: block; width: 16px; height: 16px; color: var(--blue-300); transition: transform .25s var(--ease-soft); }
  .is-open .site-footer__toggle svg { transform: rotate(180deg); }
  .site-footer__panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    justify-items: start;
    width: 100%;
    margin: 0;
    padding-bottom: 14px;
  }
  .site-footer__col:not(.is-open) .site-footer__panel { display: none; }
  .site-footer__panel a { min-height: 40px; color: rgb(255 255 255 / .78); }
}