/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  transition: transform .45s var(--ease-out);
}
.nav::before { /* solid state fades in rather than repainting */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--limestone);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.nav.is-solid::before, .nav.is-menu::before { opacity: 1; }
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}
.nav__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: none;
  min-height: 44px;
  text-decoration: none;
}
.nav__word {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-variation-settings: "opsz" 48, "SOFT" 50;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.nav__sub { font-size: .625rem; color: var(--ink-soft); }
.nav__links { display: flex; gap: clamp(14px, 2vw, 32px); }
.nav__links a, .nav__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-size: 1rem;
}
.nav__links a:hover, .nav__phone:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.nav__actions { display: flex; align-items: center; gap: 18px; flex: none; }
.nav__phone { font-weight: 600; }
.nav__cta-short { display: none; }
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav__toggle svg { transition: transform .4s var(--ease-out); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }

/* Mobile menu */
.is-locked { overflow: hidden; }
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-h) + 32px) var(--gutter) 32px;
  overflow-y: auto;
  background: var(--limestone);
}
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 12vw, 4rem);
  font-variation-settings: "opsz" 120, "SOFT" 50;
  font-weight: 380;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-decoration: none;
}
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}

/* ---------- W-01 Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(16px, 2.4vw, 40px));
  padding-bottom: clamp(32px, 3.4vw, 56px);
  overflow: clip;
}
.hero__grid { align-items: end; min-height: calc(100svh - var(--nav-h) - 116px); }
.hero__copy {
  position: relative;
  z-index: 3; /* above the sun rays so text keeps its colour */
  grid-column: 1 / 8;
  align-self: center;
}
.hero__sub { margin-top: clamp(22px, 2.6vw, 36px); max-width: 52ch; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: clamp(24px, 2.6vw, 36px);
}
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-top: clamp(24px, 2.6vw, 36px);
  font-size: .9375rem;
  color: var(--ink-soft);
}
.hero__proof li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-inline: 14px;
  border-left: 1px solid var(--line);
}
.hero__proof li:first-child { padding-left: 0; border-left: 0; }
.star { flex: none; fill: var(--brick); }

.hero__figure {
  grid-column: 8 / 13;
  position: relative;
  height: clamp(480px, calc(100svh - var(--nav-h) - 116px), 860px);
  padding-inline: 14px 46px;
}
.window {
  position: relative;
  height: calc(100% - 16px);
  padding: 13px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-bottom: 0;
}
.window::after { /* sill */
  content: "";
  position: absolute;
  inset: 100% -14px auto;
  height: 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
}
.window__glass {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--limestone);
  outline: 1.5px solid var(--ink);
}
.window__glass picture { height: 100%; }
.window__photo { width: 100%; height: 100%; object-fit: cover; }
.window__sash {
  position: absolute;
  inset-inline: 0;
  height: 50%;
}
.window__sash--top {
  top: 0;
  border-bottom: 5px solid var(--paper);
  box-shadow: 0 1.5px 0 var(--ink);
}
.window__sash--bottom {
  bottom: 0;
  border-top: 5px solid var(--paper);
  box-shadow: 0 -1.5px 0 var(--ink);
}
.window__sash::before { /* centre mullion */
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 3px;
  background: var(--paper);
  transform: translateX(-50%);
}
.window__travel {
  position: absolute;
  inset: 0;
  border-top: 10px solid var(--paper);
  opacity: 0;
  pointer-events: none;
}
.hero__dim { top: 0; bottom: 16px; right: 8px; }

.sunrays {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.sunrays i {
  position: absolute;
  top: -40%;
  left: var(--x);
  width: var(--w);
  height: 180%;
  background: linear-gradient(90deg, transparent, var(--sun) 35%, var(--glass) 60%, transparent);
  rotate: 24deg;
  animation: sun-drift 20s ease-in-out infinite alternate;
}
.sunrays.is-paused i { animation-play-state: paused; }
.sunrays i:nth-child(1) { --x: 8%; --w: 26%; }
.sunrays i:nth-child(2) { --x: 40%; --w: 12%; opacity: .8; }
.sunrays i:nth-child(3) { --x: 62%; --w: 30%; }

/* ---------- Trust strip ---------- */
.trust {
  position: relative;
  overflow: hidden;
  background: var(--sun);
  border-block: 1.5px solid var(--ink);
}
/* Four identical lists, moved by exactly one: the loop stays seamless on very wide screens. */
.trust__track {
  display: flex;
  width: max-content;
  animation: trust-slide 45s linear infinite;
}
.trust__list { display: flex; flex: none; }
.trust__list li {
  display: flex;
  align-items: center;
  padding-block: clamp(12px, 1.3vw, 18px);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-variation-settings: "opsz" 48, "SOFT" 50;
  font-weight: 380;
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.trust__list li::after { /* drawn window between items */
  content: "";
  flex: none;
  width: .72em;
  height: .94em;
  margin-inline: clamp(20px, 3vw, 44px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24' fill='none' stroke='%2317212A' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M1 1h16v22H1zM1 12h16M9 1v22'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- W-02 Why ---------- */
.why__copy { grid-column: 1 / 6; }
.why__text { margin-top: clamp(22px, 2.6vw, 36px); }
.why__points {
  display: flex;
  flex-direction: column;
  margin-top: clamp(24px, 3vw, 40px);
  font-weight: 600;
}
.why__points li { padding-block: 10px; border-top: 1px solid var(--line); }
.why__points li:last-child { border-bottom: 1px solid var(--line); }

.heat { grid-column: 7 / 13; }
.heat__toggle { display: inline-flex; border: 1.5px solid var(--ink); max-width: 100%; }
.heat__btn {
  min-height: 48px;
  padding: 8px clamp(10px, 2vw, 20px);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .3s var(--ease-out);
}
.heat__btn + .heat__btn { border-left: 1.5px solid var(--ink); }
.heat__btn[aria-pressed="true"] { background: var(--sun); }
.heat__stage { position: relative; margin-top: 24px; padding-bottom: 44px; }
.heat__svg { width: 100%; height: auto; overflow: visible; }
.heat__dim { left: 0; right: 0; bottom: 10px; }
.heat__caption { min-height: 3.2em; margin-top: 8px; max-width: 52ch; color: var(--ink-soft); }

.heat__room { transition: opacity .8s var(--ease-out); }
.heat__room--warm { fill: var(--sun); opacity: .34; }
.heat__room--cool { fill: var(--glass); opacity: 0; }
.heat__text {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .08em;
}
.heat__wall rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.heat__wall path { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .55; }
.heat__frame { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.heat__pane { transition: opacity .6s var(--ease-out); }
.heat__pane--old { stroke: var(--ink); stroke-width: 3; }
.heat__pane--new { opacity: 0; }
.heat__pane--new line { stroke: var(--ink); stroke-width: 1.5; }
.heat__gas { fill: var(--glass); }
.heat__seal { fill: var(--brick); opacity: 0; transition: opacity .6s var(--ease-out); }
.heat__out { fill: var(--sun); }
.heat__arrow {
  fill: var(--sun);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform .9s var(--ease-sash), opacity .9s var(--ease-out);
}
.heat__back { color: var(--sun-deep); opacity: 0; transition: opacity .7s var(--ease-out); }
.heat__leak { color: var(--ink-soft); stroke-dasharray: 6 6; transition: opacity .6s var(--ease-out); }
.heat__tag { transition: opacity .5s var(--ease-out); }
.heat__tag--new { opacity: 0; }

.heat[data-mode="new"] .heat__room--warm { opacity: 0; }
.heat[data-mode="new"] .heat__room--cool { opacity: .75; }
.heat[data-mode="new"] .heat__pane--old,
.heat[data-mode="new"] .heat__leak,
.heat[data-mode="new"] .heat__tag--old { opacity: 0; }
.heat[data-mode="new"] .heat__pane--new,
.heat[data-mode="new"] .heat__seal,
.heat[data-mode="new"] .heat__back,
.heat[data-mode="new"] .heat__tag--new { opacity: 1; }
.heat[data-mode="new"] .heat__arrow { transform: scale(.55, .16); opacity: .7; }
.heat[data-mode="new"] .heat__arrow--a,
.heat[data-mode="new"] .heat__arrow--c { transform: scale(.3, .1); opacity: 0; }

/* ---------- W-03 Services ---------- */
.services { padding-top: 0; }
.services__head {
  grid-column: 1 / 5;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.services__title { display: inline-block; }
.services__dim { position: relative; display: block; width: min(100%, 240px); margin-top: 22px; }
.services__body { grid-column: 5 / 13; }
.schedule, .schedule thead, .schedule tbody { display: block; width: 100%; }
.schedule { border-top: 1.5px solid var(--ink); }
.schedule__row {
  position: relative;
  display: grid;
  grid-template-columns: 64px 84px minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  column-gap: var(--gap);
  padding-block: clamp(14px, 1.6vw, 22px);
  border-bottom: 1px solid var(--line);
}
.schedule__row--head {
  padding-block: 10px;
  border-bottom: 1.5px solid var(--ink);
  color: var(--ink-soft);
  text-align: left;
}
.schedule__row--head th { font-weight: 600; }
.schedule__mark { color: var(--brick); }
.schedule__item { font-weight: 380; }
.schedule__note { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.5; }
.schedule__rule {
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--ink);
  opacity: .22;
  transform-origin: left;
}
.motion .schedule tbody .schedule__row { border-bottom-color: transparent; }
.elev { overflow: visible; }
.elev__move { transition: transform .55s var(--ease-sash); }
.schedule__row:hover .elev__move--up { transform: translateY(-16px); }
.schedule__row:hover .elev__move--side { transform: translateX(14px); }
.schedule__row:hover .elev__move--side-small { transform: translateX(3px); }
.schedule__row:hover .elev__move--down { transform: translateY(12px); }
.services__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: clamp(28px, 3.4vw, 48px);
}

/* ---------- W-04 Windows ---------- */
.windows { padding-top: 0; }
.windows__head { align-items: end; row-gap: 24px; }
.windows__title { grid-column: 1 / 8; }
.windows__intro { grid-column: 8 / 13; }
.styles { margin-top: clamp(40px, 5vw, 72px); }
.styles__tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1.5px solid var(--ink);
  scrollbar-width: none;
}
.styles__tabs::-webkit-scrollbar { display: none; }
.styles__tab {
  position: relative;
  flex: 1 0 auto;
  min-height: 56px;
  padding: 10px clamp(14px, 2vw, 28px);
  border-left: 1px solid var(--line);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-soft);
}
.styles__tab:first-child { border-left: 0; }
.styles__tab[aria-selected="true"] { color: var(--ink); background: var(--paper); }
.styles__tab::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: var(--sun);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.styles__tab[aria-selected="true"]::after { transform: scaleX(1); }
.styles__tab:focus-visible { outline-offset: -4px; box-shadow: none; }
.styles__panels { touch-action: pan-y; }
.style {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding-block: clamp(32px, 5vw, 72px);
}
.style:focus-visible { outline-offset: -2px; box-shadow: none; }
.style__figure {
  --h: clamp(300px, 38vw, 540px);
  position: relative;
  width: min(calc(100% - 36px), calc(var(--h) * var(--ar)));
  margin: 0 0 40px 36px;
  justify-self: center;
}
.style__figure[data-ar="narrow"] { --ar: .75; }
.style__figure[data-ar="wide"] { --ar: 1.5; }
.style__svg { width: 100%; height: auto; overflow: visible; }
.style__glass { fill: var(--glass); stroke: none; opacity: .55; }
.style__dim-v { top: 0; bottom: 0; left: -32px; }
.style__dim-h { left: 0; right: 0; bottom: -32px; }
.style__text .prose { margin-top: 16px; }
.style__good { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.style__good .label { color: var(--brick); margin-right: 4px; }

.windows__foot { align-items: stretch; row-gap: 32px; border-top: 1px solid var(--line); padding-top: clamp(28px, 3.4vw, 48px); }
.features {
  grid-column: 1 / 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(24px, 3vw, 48px);
  align-content: start;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-variation-settings: "opsz" 36, "SOFT" 50;
  font-weight: 380;
  line-height: 1.25;
}
.features li { position: relative; padding-left: 22px; }
.features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 8px;
  height: 8px;
  background: var(--sun-deep);
}
.black-frames {
  grid-column: 9 / 13;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--ink);
  color: var(--limestone);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-variation-settings: "opsz" 36, "SOFT" 50;
  line-height: 1.25;
}

/* ---------- W-06 Process ---------- */
.process {
  position: relative;
  z-index: 1;
  padding-block: var(--section-y);
  background: var(--ink);
  color: var(--limestone);
  --dim-bg: var(--ink);
}
.process__track {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.process__head { max-width: 780px; margin-bottom: clamp(44px, 6vw, 88px); }
.process__steps {
  border-left: 1px solid var(--line-on-ink);
  margin-left: 6px;
}
.step {
  position: relative;
  padding: 0 0 clamp(44px, 8vw, 72px) 28px;
}
.step:last-child { padding-bottom: 0; }
.step__node {
  position: absolute;
  top: 5px;
  left: -6px;
  width: 11px;
  height: 11px;
  background: var(--ink);
  border: 1.5px solid var(--sun);
}
.step__count { display: block; margin-bottom: 12px; color: var(--sun); }
.step p { max-width: 42ch; margin-top: 12px; color: var(--limestone); opacity: .84; }
.process__rail {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
.process.has-rail .process__rail { display: block; }
.process__line { fill: none; stroke: var(--sun); stroke-width: 1.5; }
.process__sun { fill: var(--sun); }

@media (min-width: 900px) {
  .process__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gap);
    margin-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line-on-ink);
  }
  .step { padding: 28px 16px 0 0; }
  .step__node { top: -6px; left: 0; }
}

/* Own layers up front, so pinning and the moving rail don't repaint the wide track mid-scroll. */
.process.is-pinned { height: 100svh; padding-block: 0; overflow: hidden; will-change: transform; }
.process.is-pinned .process__track,
.process.is-pinned .process__rail { will-change: transform; }
.process.is-pinned .process__track {
  display: flex;
  width: max-content;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
}
.process.is-pinned .process__head {
  flex: none;
  width: 44vw;
  max-width: none;
  margin: 0;
  padding: calc(var(--nav-h) + 24px) 4vw 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
.process.is-pinned .process__steps {
  display: flex;
  flex: none;
  border: 0;
}
.process.is-pinned .step {
  flex: none;
  width: max(30vw, 340px);
  padding: 28px 40px 0 28px;
}
.process.is-pinned .step__node { top: -6px; left: -6px; }
.process.is-pinned .step:nth-child(1) { margin-top: 56vh; }
.process.is-pinned .step:nth-child(2) { margin-top: 44vh; }
.process.is-pinned .step:nth-child(3) { margin-top: 32vh; }
.process.is-pinned .step:nth-child(4) { margin-top: 20vh; margin-right: 12vw; }

/* ---------- W-07 Reviews ---------- */
.reviews__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.reviews__rating { display: inline-flex; align-items: center; gap: 7px; }
.reviews__list { row-gap: clamp(28px, 3vw, 44px); }
.review--lead { grid-column: 1 / 8; grid-row: 1 / 3; }
.review--a { grid-column: 9 / 13; padding-top: 12px; border-top: 1px solid var(--ink); }
.review--b { grid-column: 9 / 13; padding-top: 12px; border-top: 1px solid var(--ink); }
.review__mark { width: clamp(48px, 5vw, 74px); height: auto; fill: var(--sun-deep); margin-bottom: 20px; }
.review__quote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.5vw, 1.375rem);
  font-variation-settings: "opsz" 24, "SOFT" 50;
  line-height: 1.35;
}
.review--lead .review__quote {
  font-size: clamp(1.75rem, 3.5vw, 3.125rem);
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 50;
  font-weight: 340;
  line-height: 1.14;
  letter-spacing: -.01em;
}
.review__by { margin-top: 18px; color: var(--ink-soft); font-size: 1rem; }
.review__by strong { color: var(--ink); font-weight: 600; }
.reviews__nav { display: none; align-items: center; gap: 12px; margin-top: 24px; }
.reviews__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--ink);
}
.reviews__cta { margin-top: clamp(36px, 4.5vw, 64px); }

/* ---------- W-08 Area + FAQ ---------- */
.area { padding-top: 0; }
.area__grid { row-gap: 56px; }
.area__map { grid-column: 1 / 6; }
.area__faq { grid-column: 7 / 13; }
.map { width: 100%; margin-top: 24px; max-width: 520px; }
.map__lake { fill: var(--glass); opacity: .7; }
.map__roads { color: var(--ink); opacity: .4; stroke-width: 1.25; }
.map__road {
  fill: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
}
.map__points circle { fill: var(--ink); }
.map__points text {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
}
.map__home circle { fill: var(--sun); stroke: var(--ink); stroke-width: 1.5; }
.map__home .map__home-ring { fill: none; stroke-width: 1; }
.map__home text { font-size: 22px; }
.map__home .map__base {
  fill: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}
.area__note { margin-top: 16px; max-width: 42ch; }
.faq { margin-top: 24px; border-top: 1.5px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  position: relative;
  display: block;
  padding: 16px 44px 16px 0;
  min-height: 56px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before, .faq__q::after {
  content: "";
  position: absolute;
  top: 28px;
  right: 6px;
  width: 15px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .35s var(--ease-out);
}
.faq__q::after { transform: rotate(90deg); }
.faq__item[open] > .faq__q::after, .faq__item.is-opening > .faq__q::after { transform: rotate(0); }
.faq__item.is-closing > .faq__q::after { transform: rotate(90deg); }
.faq__a { overflow: hidden; }
.faq__a p { max-width: 58ch; padding-bottom: 20px; color: var(--ink-soft); }

/* ---------- W-09 Quote ---------- */
.quote { padding-top: 0; }
.quote__head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.quote__head .prose { margin-top: 16px; }
.quote__grid { row-gap: 48px; align-items: start; }
.quote__panel {
  grid-column: 1 / 9;
  position: relative;
  display: grid;
  min-height: var(--panel-h, 0);
  background: var(--paper);
  outline: 1.5px solid var(--ink);
  outline-offset: 5px;
  border: 1.5px solid var(--ink);
}
.qform, .quote__success { grid-area: 1 / 1; min-width: 0; }
.qform {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 3.4vw, 48px);
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.qform__status { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(24px, 3vw, 40px); }
.qform__panes rect { fill: var(--sun); fill-opacity: 0; stroke: var(--ink); stroke-width: 1.5; transition: fill-opacity .4s var(--ease-out); }
.qform__panes rect.is-filled { fill-opacity: 1; }
.field + .field { margin-top: 28px; }
.field__legend { margin-bottom: 16px; padding: 0; }
.field__label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 1rem; }
.field__hint { font-weight: 400; color: var(--ink-soft); }
.field__error { margin-top: 8px; color: var(--brick); font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.field__error:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; display: block; cursor: pointer; }
.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 22px;
  background: var(--limestone);
  border: 1.5px solid var(--ink);
  font-weight: 600;
  line-height: 1.2;
}
.chip:hover span { background: var(--paper); }
.chip input:checked + span { background: var(--sun); }
.chip input:focus-visible + span { outline: 2px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
.input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  background: var(--limestone);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  appearance: none;
}
textarea.input { resize: vertical; }
select.input {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%2317212A' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='m1 1 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.input[aria-invalid="true"] { border-color: var(--brick); border-width: 2px; }
.qform__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px var(--gap);
}
.qform__fields .field + .field { margin-top: 0; }
.qform__wide { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 1rem; }
.check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.qform__actions { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: clamp(28px, 3.4vw, 44px); }
.qform__actions #qform-next { margin-left: auto; }

.quote__success {
  align-self: center;
  padding: clamp(24px, 4vw, 64px);
}
.quote__success-icon { margin-bottom: 28px; }
.quote__success-glass { fill: var(--glass); stroke: none; }
.quote__success .h2:focus { outline: none; box-shadow: none; }

.quote__aside { grid-column: 10 / 13; display: flex; flex-direction: column; gap: 32px; }
.quote__contact { display: flex; flex-direction: column; align-items: flex-start; }
.quote__phone {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  font-variation-settings: "opsz" 48, "SOFT" 50;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}
.quote__contact .link { overflow-wrap: anywhere; font-size: .9375rem; }
.quote__hours { margin-top: 12px; color: var(--ink-soft); }
.quote__next h3 { padding-bottom: 10px; border-bottom: 1px solid var(--line); font-weight: 600; }
.quote__next li { padding-block: 10px; border-bottom: 1px solid var(--line); line-height: 1.4; font-size: 1rem; }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  padding-block: clamp(56px, 8vw, 112px) 28px;
  border-top: 1.5px solid var(--ink);
  background: var(--limestone);
}
.footer__line {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 10vw, 9.5rem);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-weight: 380;
  line-height: .98;
  letter-spacing: -.025em;
}
.footer__cta { margin-top: clamp(24px, 3vw, 40px); }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px var(--gap);
  margin-top: clamp(44px, 6vw, 88px);
  font-size: 1rem;
}
.footer__head { margin-bottom: 12px; color: var(--ink-soft); font-weight: 600; }
.footer__cols a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  overflow-wrap: anywhere;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.footer__cols li:not(:has(a)) { padding-block: 4px; }
.footer__area { max-width: 28ch; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 32px;
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .9375rem;
}
.footer__bottom a { display: inline-block; padding-block: 12px; color: var(--ink); text-underline-offset: 4px; }

/* ---------- Mobile call bar ---------- */
.mobile-bar { display: none; }

/* ---------- Motion start states (only ever set when motion is allowed) ---------- */
.motion .window__photo { clip-path: inset(100% 0 0 0); animation: hero-show .01s linear .9s forwards; }
.motion .hero__title { opacity: 0; animation: hero-show .01s linear .9s forwards; }
.motion .hero.is-live .window__photo { animation: none; }
.motion .hero.is-live .hero__title { opacity: 1; animation: none; }
.motion .hero__dim line { stroke-dashoffset: 1; }
.motion .hero__dim .dim__tag { opacity: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav__phone { display: none; }
}

@media (max-width: 959px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav__actions { gap: 8px; }
  .nav__cta-long { display: none; }
  .nav__cta-short { display: inline; }
}

@media (max-width: 899px) {
  .hero__grid { min-height: 0; row-gap: 8px; }
  .hero__copy, .hero__figure { grid-column: 1 / -1; }
  .hero__copy { padding-bottom: 36px; }
  .hero__figure { height: clamp(420px, 118vw, 760px); padding-inline: 14px 40px; }
  .why__copy, .heat { grid-column: 1 / -1; }
  .heat { margin-top: 40px; }
  .services__head, .services__body { grid-column: 1 / -1; position: static; }
  .services__body { margin-top: 32px; }
  .windows__title, .windows__intro { grid-column: 1 / -1; }
  .style { grid-template-columns: minmax(0, 1fr); }
  .style__figure { --h: clamp(280px, 74vw, 520px); justify-self: start; }
  .features, .black-frames { grid-column: 1 / -1; }
  .review--lead { grid-column: 1 / -1; grid-row: auto; }
  .review--a { grid-column: 1 / 7; }
  .review--b { grid-column: 7 / 13; }
  .area__map, .area__faq { grid-column: 1 / -1; }
  .quote__panel, .quote__aside { grid-column: 1 / -1; }
  .quote__aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .nav__sub { font-size: .5625rem; }
  .schedule__row--head { display: none; }
  .schedule__row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "mark item elev" ". note elev";
    row-gap: 6px;
    align-items: start;
  }
  .schedule__mark { grid-area: mark; padding-top: 6px; }
  .schedule__item { grid-area: item; }
  .schedule__note { grid-area: note; }
  .schedule__elev { grid-area: elev; }
  .features { grid-template-columns: minmax(0, 1fr); }


  .js .review:not(.is-active) { display: none; }
  .review--a, .review--b { grid-column: 1 / -1; }
  .js .reviews__nav { display: flex; }

  .qform__fields { grid-template-columns: minmax(0, 1fr); }
  .quote__aside { grid-template-columns: minmax(0, 1fr); }
  .footer { padding-bottom: calc(28px + 60px + env(safe-area-inset-bottom)); }

  .mobile-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 80;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1.5px solid var(--ink);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--paper);
    transition: transform .4s var(--ease-out);
  }
  .mobile-bar.is-hidden { transform: translateY(101%); }
  .mobile-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    font-weight: 600;
    text-decoration: none;
  }
  .mobile-bar__quote { background: var(--sun); border-left: 1.5px solid var(--ink); }
}

@media (max-width: 419px) {
  .nav__sub { display: none; }
  .hero__proof li { padding-inline: 10px; }
  .chip span { padding-inline: 16px; }
}

@keyframes trust-slide {
  to { transform: translateX(-25%); }
}
@keyframes hero-show {
  to { opacity: 1; clip-path: inset(0); }
}
@keyframes sun-drift {
  to { transform: translateX(45%); }
}

@media (prefers-reduced-motion: reduce) {
  .trust__track { width: 100%; animation: none; }
  .trust__list {
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 32px;
    padding: 12px var(--gutter);
  }
  .trust__list--dupe { display: none; }
  .trust__list li { padding-block: 4px; white-space: normal; }
  .trust__list li::after { display: none; }
  .sunrays { display: none; }
}