@font-face {
  font-family: Montserrat;
  src: url(assets/montserrat.woff2) format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --paper: #f8f6f0;
  --ink: #0b4d2e;
  --accent: #84d221;
  --charcoal: #2b2b2b;
  --muted: #858a7b;
  --line: #d9dcd1;
  --paint: #8e9c86;
  /* Header height once the page scrolls; floor set by the logo's 220px minimum width. */
  --header-compact: 88px;
  /* Brand guide (p.6): Montserrat, with Helvetica/Arial as fallbacks. */
  --body: Montserrat, "Helvetica Neue", Arial, sans-serif;
  --display: Montserrat, "Helvetica Neue", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-compact);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid #c6925c;
  outline-offset: 6px;
}
img {
  display: block;
  width: 100%;
  object-fit: cover;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
}
h2 {
  font-size: clamp(32px, 3.2vw, 50px);
  line-height: 1.13;
  letter-spacing: -0.025em;
}
h3 {
  font-size: 28px;
  letter-spacing: -0.01em;
}
p {
  line-height: 1.65;
}
button {
  border: 0;
}
em,
.serif-word {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
}
::selection {
  background: var(--accent);
  color: var(--charcoal);
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  background: var(--paper);
  padding: 15px;
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: none;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 999px;
  /* Height comes from the label, not the arrow: 18px text, 22px arrow, 17px vertical padding. */
  padding: 17px 30px;
  font-size: 18px;
  font-weight: 700;
  transition:
    background 0.25s,
    transform 0.25s;
  min-height: 48px;
}
.button:hover {
  transform: translateY(-3px);
}
.button span {
  font-size: 26px;
  /* Tight line box so the bigger arrow doesn't make the button taller than its label needs. */
  line-height: 0.8;
  /* Montserrat's arrow sits 0.07em below its line-box center; lift it to the label's optical center. */
  transform: translateY(-0.07em);
}
.button-light {
  background: var(--paper);
  color: var(--ink);
}
.button-light:hover {
  background: #e5ead7;
}
.button-dark {
  background: var(--ink);
  color: var(--paper);
}
.button-dark:hover {
  background: #073b23;
}
.button-accent {
  background: var(--accent);
  color: var(--charcoal);
  font-weight: 700;
}
.button-accent:hover {
  background: #94df34;
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 128px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  background: var(--paper);
  z-index: 30;
  border-bottom: 1px solid var(--line);
  transition:
    background 0.25s,
    height 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.site-header.is-scrolled {
  height: var(--header-compact);
  border-bottom-color: transparent;
  /* Lime (CTA accent) edge plus a soft lime glow so the header clearly separates from content. */
  box-shadow:
    0 3px 0 var(--accent),
    0 12px 30px rgba(132, 210, 33, 0.35);
}
.brand {
  display: block;
  flex-shrink: 0;
  /* Full horizontal master: never scale below the guide's 220px minimum. */
  width: 252px;
  margin-right: 26px;
  transition: width 0.3s ease;
}
.site-header.is-scrolled .brand {
  width: 220px;
}
.brand-logo {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.desktop-nav {
  display: flex;
  gap: 44px;
  font-size: 19px;
  font-weight: 700;
}
.desktop-nav a {
  position: relative;
  white-space: nowrap;
  padding: 12px 0;
}
.desktop-nav a:after {
  content: "";
  height: 1px;
  background: currentColor;
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 100%;
  transition: right 0.3s;
}
.desktop-nav a[aria-current="page"]:after {
  right: 0;
}
.desktop-nav a:hover:after {
  right: 0;
}
.header-cta {
  transition:
    background 0.25s,
    transform 0.25s,
    padding 0.3s ease,
    font-size 0.3s ease;
}
.header-cta {
  white-space: nowrap;
  flex-shrink: 0;
}
/* Narrow desktops: tighten the menu so the full-size CTA still fits on one line. */
@media (max-width: 1400px) {
  .desktop-nav {
    gap: 28px;
  }
}
/* Compact once the header shrinks on scroll; at the top it matches the hero CTA. */
.site-header.is-scrolled .header-cta {
  padding: 13px 24px;
  font-size: 16px;
}
.menu-toggle,
.mobile-nav {
  display: none;
}
.hero {
  min-height: 780px;
  height: 100svh;
  max-height: 1200px;
  position: relative;
  overflow: hidden;
  color: var(--paper);
  /* Matches the video's opening black frame so the first paint blends into playback. */
  background: #0d1210;
}
.hero-image,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-image {
  object-position: 57% center;
  will-change: transform;
  /* Still image is only a fallback for when the video can't play. */
  opacity: 0;
}
.hero.video-fallback .hero-image {
  opacity: 1;
}
.hero-shade {
  background:
    linear-gradient(
      90deg,
      rgba(12, 27, 22, 0.61) 0%,
      rgba(15, 27, 24, 0.3) 47%,
      rgba(15, 27, 24, 0.03) 80%
    ),
    linear-gradient(
      0deg,
      rgba(15, 25, 22, 0.47),
      transparent 30%,
      transparent 75%,
      rgba(15, 25, 22, 0.23)
    );
}
.hero-copy {
  position: absolute;
  left: 7%;
  top: 50%;
  transform: translateY(-41%);
  max-width: 960px;
}
.hero h1 {
  font-weight: 800;
  font-size: clamp(56px, 5.6vw, 96px);
  line-height: 1.015;
  letter-spacing: -0.035em;
}
.serif-word {
  letter-spacing: -5px;
}
.hero-description {
  max-width: 700px;
  font-size: 21px;
  line-height: 1.8;
  margin: 25px 0 30px;
  font-weight: 500;
  color: var(--paper);
}
/* Trust strip: overlays the bottom of the hero video on desktop, a green band below it on phones. */
.hero-trust {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: -112px 0 0;
  height: 112px;
  padding: 0 max(7%, calc((100vw - 1400px) / 2));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(rgba(10, 22, 16, 0.15), rgba(10, 22, 16, 0.55));
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-trust img {
  /* Thin ring around each icon for a quieter, more finished badge. */
  width: 52px;
  height: 52px;
  padding: 9px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}
.hero-trust span {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
.hero-trust strong {
  font-size: 17px;
  font-weight: 700;
}
/* Phones: a dark band right under the video (same tone as its shade, so it reads as one piece),
   with the three items as hairline-separated rows. */
@media (max-width: 700px) {
  .hero-trust {
    margin: 0;
    height: auto;
    padding: 6px 7% 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 0;
    background: #101c16;
  }
  .hero-trust li {
    gap: 14px;
    padding: 16px 0;
  }
  .hero-trust li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .hero-trust img {
    width: 42px;
    height: 42px;
    padding: 8px;
  }
  .hero-trust span {
    font-size: 14px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.78);
  }
  .hero-trust strong {
    font-size: 16px;
    color: #ffffff;
  }
}
.nowrap {
  white-space: nowrap;
}
.section-pad {
  padding: 100px 7%;
}
.text-link {
  display: inline-flex;
  gap: 35px;
  align-items: center;
  font-size: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink);
  font-weight: 600;
  background: none;
  color: var(--ink);
}
.text-link span {
  font-size: 30px;
}
.paint-experience {
  height: 190vh;
  position: relative;
  background: var(--paper);
}
.paint-stage {
  /* Pin below the fixed header so the room isn't hidden behind it. */
  height: calc(100svh - var(--header-compact));
  min-height: 560px;
  position: sticky;
  top: var(--header-compact);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 36px max(7%, calc((100vw - 1400px) / 2));
  --house-position: 50% 50%;
}
.paint-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.paint-head p {
  max-width: 380px;
  font-size: 18px;
  font-weight: 500;
  color: #687363;
}
.paint-house {
  position: relative;
  flex: 1;
  min-height: 0;
}
.house-frame {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #cccdbd;
}
.house-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--house-position);
}
/* Each swatch has a pre-painted copy of the room; the active one fades in over the others. */
.room-paint {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.room-paint.is-active {
  opacity: 1;
}
.wall-after {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.paint-bottom {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  color: var(--ink);
}
.color-picker {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 15px;
  background: var(--paper);
  border-radius: 999px;
}
.swatch {
  background: var(--swatch);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: relative;
  border: 3px solid var(--paper);
}
.swatch.active {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}
.swatch:focus-visible {
  outline: 3px solid #ba885d;
  outline-offset: 3px;
}
#color-name {
  font-size: 15px;
  padding-left: 6px;
  min-width: 89px;
  white-space: nowrap;
}
#brush-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 48px;
}
.section-heading > p {
  max-width: 460px;
  font-size: 18px;
  font-weight: 500;
  color: #687363;
}
/* Services: photo panels; the hovered/tapped one widens and reveals its copy and CTA. */
.panels {
  display: flex;
  gap: 12px;
  height: min(640px, calc(100svh - var(--header-compact) - 120px));
  min-height: 480px;
}
.panel {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
  color: var(--paper);
  background: #cccdbd;
  transition:
    flex 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    clip-path 1s cubic-bezier(0.77, 0, 0.18, 1);
}
.panel.is-open {
  flex: 3.2;
}
.panel img {
  position: absolute;
  inset: 0;
  height: 100%;
  transition: transform 1.2s cubic-bezier(0.2, 0.65, 0.3, 1);
}
.panel.is-open img {
  transform: scale(1.04);
}
.panel:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8, 30, 20, 0.75));
}
.panel-label {
  position: absolute;
  z-index: 1;
  left: 24px;
  bottom: 28px;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: opacity 0.3s;
}
.panel.is-open .panel-label {
  opacity: 0;
}
.panel-body {
  position: absolute;
  z-index: 1;
  left: 36px;
  right: 36px;
  bottom: 34px;
  min-width: 320px;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.6s cubic-bezier(0.2, 0.65, 0.3, 1);
}
.panel.is-open .panel-body {
  opacity: 1;
  transform: none;
  transition-delay: 0.25s;
}
.panel-body h3 {
  font-size: clamp(26px, 2.4vw, 36px);
  letter-spacing: -0.02em;
}
.panel-body p {
  margin-top: 10px;
  max-width: 440px;
  font-size: 18px;
  font-weight: 500;
}
.panel-cta {
  margin-top: 22px;
}
/* Panels paint in top-down, one after another, when the section scrolls into view. */
.js-motion .panels.reveal .panel {
  clip-path: inset(0 0 100% 0 round 18px);
}
.js-motion .panels.reveal.visible .panel {
  clip-path: inset(0 0 0 0 round 18px);
}
.js-motion .panels.reveal.visible .panel:nth-child(2) {
  transition-delay: 0s, 0.12s;
}
.js-motion .panels.reveal.visible .panel:nth-child(3) {
  transition-delay: 0s, 0.24s;
}
.js-motion .panels.reveal.visible .panel:nth-child(4) {
  transition-delay: 0s, 0.36s;
}
@media (max-width: 700px) {
  .panels {
    flex-direction: column;
    gap: 10px;
    height: 680px;
    min-height: 0;
  }
  .panel-label {
    left: 22px;
    bottom: auto;
    top: 50%;
    writing-mode: horizontal-tb;
    transform: translateY(-50%);
  }
  .panel-body {
    left: 22px;
    right: 22px;
    bottom: 24px;
    min-width: 0;
  }
  .panel-body p {
    font-size: 16px;
  }
  .panel-cta {
    margin-top: 16px;
  }
}
.approach {
  --slant: clamp(28px, 3.5vw, 60px);
  position: relative;
  isolation: isolate;
}
/* Parallel slanted top and bottom edges (both drop toward the right). */
/* Accent half of a heading: a deeper lime so it stays readable on the light background. */
.title-accent {
  color: #5f9a16;
}
.approach::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #ebede3;
  clip-path: polygon(
    0 0,
    100% var(--slant),
    100% 100%,
    0 calc(100% - var(--slant))
  );
}
/* Doubled selector so .section-pad shorthands in media queries keep the slant room. */
.approach.section-pad {
  margin-top: 56px;
  padding-top: calc(64px + var(--slant));
  padding-bottom: calc(64px + var(--slant));
}
@media (max-width: 700px) {
  .approach.section-pad {
    margin-top: 32px;
    padding-top: calc(48px + var(--slant));
    padding-bottom: calc(48px + var(--slant));
  }
}
/* Process: illustrated step cards. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* minmax(0, 1fr): equal columns even when a nowrap title is long. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  --step-gap: 48px;
  gap: var(--step-gap);
}
/* Arrow in the gap after each card, at the card's vertical center. */
.step-card {
  position: relative;
}
.step-card:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: calc(var(--step-gap) / -2);
  translate: 50% -50%;
  /* Same short, bold arrow glyph as the footer's back-to-top button. */
  content: "→";
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.step-card {
  text-align: center;
  padding: 14px 14px 30px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(11, 77, 46, 0.08);
  transition:
    transform 0.4s cubic-bezier(0.2, 0.65, 0.3, 1),
    box-shadow 0.4s ease;
}
.step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(11, 77, 46, 0.14);
}
.step-art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.65, 0.3, 1);
}
.step-art img {
  width: 88%;
  height: auto;
  transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.step-card:hover .step-art img {
  transform: scale(1.05) rotate(-2deg);
}

.step-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  /* Same green as the heading accent, so the numbers tie back to "from start to finish." */
  background: #5f9a16;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(95, 154, 22, 0.3);
}
.step-card h3 {
  margin-top: 22px;
  padding: 0 8px;
  font-size: clamp(17px, 1.4vw, 24px);
  white-space: nowrap;
}
.step-card p {
  margin: 8px auto 0;
  padding: 0 12px;
  max-width: 300px;
  font-size: 17px;
  font-weight: 500;
  color: #65705e;
}
.js-motion .steps .step-card:nth-child(2) { transition-delay: 0.1s; }
.js-motion .steps .step-card:nth-child(3) { transition-delay: 0.2s; }
.js-motion .steps .step-card:nth-child(4) { transition-delay: 0.3s; }
.approach-cta {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}
/* Narrower desktops: tighten the gap, then let long titles wrap rather than overflow the card. */
@media (max-width: 1360px) {
  .steps {
    --step-gap: 34px;
  }
}
@media (max-width: 1240px) {
  .step-card h3 {
    white-space: normal;
  }
}
/* Reviews: two rows drifting in opposite directions; hover pauses, edges fade into the page. */
/* FAQ: centered heading over a narrow column of white cards; the + turns into a minus when open. */
.faq h2 {
  text-align: center;
}
.faq-list {
  /* Full content width, same edges as the step cards and other sections. */
  margin: 48px 0 0;
  display: grid;
  /* Two independent columns, so opening a question never stretches its neighbour. */
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  align-items: start;
}
.faq-col {
  display: grid;
  gap: 14px;
}
.faq-item {
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(11, 77, 46, 0.06);
  transition: box-shadow 0.3s ease;
}
.faq-item:hover,
.faq-item[open] {
  box-shadow: 0 14px 34px rgba(11, 77, 46, 0.11);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  border-radius: 18px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eff5e8;
  transition: background 0.3s ease;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  translate: -50% -50%;
  transition:
    rotate 0.3s ease,
    background 0.3s ease;
}
.faq-icon::after {
  rotate: 90deg;
}
.faq-item[open] .faq-icon {
  background: #5f9a16;
}
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after {
  background: #ffffff;
}
.faq-item[open] .faq-icon::after {
  rotate: 0deg;
}
.faq-item p {
  padding: 0 28px 26px;
  max-width: 680px;
  font-size: 17px;
  font-weight: 500;
  color: #65705e;
}
/* Smooth open/close where the browser supports animating details content. */
@supports (interpolate-size: allow-keywords) {
  .faq-item {
    interpolate-size: allow-keywords;
  }
  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.35s ease,
      content-visibility 0.35s allow-discrete;
  }
  .faq-item[open]::details-content {
    block-size: auto;
  }
}
@media (max-width: 700px) {
  .faq-list {
    margin-top: 32px;
    gap: 10px;
  }
  .faq-col {
    gap: 10px;
  }
  .faq-item summary {
    padding: 20px;
    font-size: 17px;
    gap: 14px;
  }
  .faq-icon {
    width: 30px;
    height: 30px;
  }
  .faq-item p {
    padding: 0 20px 22px;
    font-size: 16px;
  }
}
.reviews {
  padding: 100px 0 110px;
  overflow: hidden;
  background: var(--paper);
}
.reviews-head {
  justify-content: center;
  text-align: center;
  padding: 0 7%;
}
.review-row {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.review-row + .review-row {
  margin-top: 22px;
}
.review-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: review-drift var(--drift, 70s) linear infinite;
}
.review-row--reverse .review-track {
  animation-direction: reverse;
  --drift: 80s;
}
.review-row:hover .review-track {
  animation-play-state: paused;
}
@keyframes review-drift {
  to {
    transform: translateX(calc(-100% / 3));
  }
}
.review-card {
  flex: 0 0 auto;
  width: 380px;
  margin: 0;
  padding: 30px 30px 26px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e6e8df;
  box-shadow: 0 8px 24px rgba(11, 77, 46, 0.06);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.65, 0.3, 1),
    box-shadow 0.35s ease;
}
.review-card:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 0 18px 40px rgba(11, 77, 46, 0.14);
}
.review-stars {
  font-size: 18px;
  letter-spacing: 3px;
  color: #e2a72e;
}
.review-card blockquote {
  margin: 14px 0 24px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--charcoal);
  flex: 1;
}
.review-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}
.review-card strong {
  display: block;
  font-size: 16px;
  color: var(--ink);
}
.review-card small {
  font-size: 14px;
  color: #7b8373;
}
@media (max-width: 700px) {
  .reviews {
    padding: 56px 0 60px;
  }
  /* Phones: smaller cards so both rows fit in roughly one screen. */
  .review-row + .review-row {
    margin-top: 14px;
  }
  .review-track {
    gap: 14px;
  }
  .review-card {
    width: 310px;
    padding: 18px 18px 16px;
    border-radius: 16px;
  }
  .review-stars {
    font-size: 15px;
    letter-spacing: 2px;
  }
  .review-card blockquote {
    margin: 10px 0 16px;
    font-size: 15px;
    line-height: 1.55;
  }
  .review-avatar {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }
  .review-card strong {
    font-size: 15px;
  }
  .review-card small {
    font-size: 13px;
  }
  .review-row {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.estimate {
  --wave: 80px;
  position: relative;
  isolation: isolate;
  color: var(--paper);
  display: grid;
  /* Same two columns as the FAQ above, so the CTA centers under its right column. */
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  align-items: start;
}
/* Doubled selector so the .section-pad shorthand in media queries can't drop the wave room. */
.estimate.section-pad {
  padding-top: calc(64px + var(--wave));
  padding-bottom: calc(64px + var(--wave));
}
/* Green band with wavy top and bottom edges; it sweeps in left to right like a fresh coat. */
.estimate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url("assets/wave-top.svg") top / 100% var(--wave) no-repeat,
    url("assets/wave-bottom.svg") bottom / 100% var(--wave) no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 100%
      calc(100% - 2 * var(--wave) + 4px) no-repeat;
}
/* One animated value (--sweep, 0 to 1) drives both the band's edge and the heading's
   green-to-white switch, so the text turns white exactly where the paint has reached. */
@property --sweep {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
.js-motion .estimate {
  --sweep: 0;
  transition: --sweep 1.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.js-motion .estimate.is-painted {
  --sweep: 1;
}
.js-motion .estimate::before {
  clip-path: inset(0 calc((1 - var(--sweep)) * 100%) 0 0);
}
.js-motion .estimate-copy h2 {
  --edge: calc(var(--sweep) * var(--section-w, 100vw) - var(--head-x, 0px));
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--paper) var(--edge),
    var(--ink) var(--edge)
  );
  -webkit-background-clip: text;
  background-clip: text;
}
.js-motion .estimate > .estimate-action {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease 0.85s,
    transform 0.7s cubic-bezier(0.2, 0.6, 0.3, 1) 0.85s;
}
.js-motion .estimate.is-painted > .estimate-action {
  opacity: 1;
  transform: none;
}
.estimate-copy h2 {
  font-size: 80px;
  margin: 27px 0 24px;
  line-height: 1.07;
  letter-spacing: -0.025em;
}
/* Closing CTA: a short line and the button, sitting at the heading's baseline. */
.estimate-action {
  align-self: end;
  justify-self: center;
  margin-bottom: 30px;
  max-width: 520px;
}
.estimate-action p {
  margin: 0 0 30px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(248, 246, 240, 0.86);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
label {
  font-size: 14px;
  font-weight: 600;
  display: block;
  margin-bottom: 22px;
}
input,
select,
textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 9px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #cbd1c2;
  border-radius: 0;
  padding: 8px 0 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
textarea {
  resize: vertical;
  min-height: 87px;
}
input::placeholder,
textarea::placeholder {
  color: #899080;
  opacity: 1;
}
/* Focus: the underline itself darkens and thickens (inset shadow, so nothing shifts). */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--ink);
}
/* Contact form: the contact fields sit closer in scale to the question groups below them. */
.contact-form-card .form-row {
  column-gap: 32px;
}
.contact-form-card .form-row label {
  font-size: 16px;
  margin-bottom: 26px;
}
.contact-form-card .form-row input,
.contact-form-card textarea {
  margin-top: 10px;
  padding: 10px 0 14px;
  font-size: 18px;
}
/* Required marker next to a label or question; the field itself carries `required` for assistive tech. */
.req {
  margin-left: 3px;
  color: #d4502a;
  font-weight: 700;
}
/* The last field's bottom margin already adds space, so the first group sits a little closer. */
.contact-form-card .form-row + .type-group {
  margin-top: 22px;
}
@media (max-width: 700px) {
  .contact-form-card .form-row label {
    font-size: 15px;
    margin-bottom: 22px;
  }
  .contact-form-card .form-row + .type-group {
    margin-top: 18px;
  }
  .contact-form-card .form-row input,
  .contact-form-card textarea {
    font-size: 17px;
  }
}
/* "What are we painting?" — checkbox cards (native checkbox kept for keyboard and screen readers). */
.type-group {
  /* Groups are separated by space alone; the cards and underlines already carry enough lines. */
  margin: 44px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.type-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
}
.type-head legend {
  padding: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.type-head > span {
  font-size: 14px;
  font-weight: 500;
  color: #7b8373;
}
.type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
label.type-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 18px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
label.type-card:hover {
  border-color: #a7c77e;
}
.type-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.type-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid #c3c9bb;
  border-radius: 6px;
  background: #ffffff center / 14px no-repeat;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.type-icon {
  flex-shrink: 0;
  display: flex;
}
.type-icon img {
  width: 36px;
  height: 36px;
}
.type-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.type-text strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.type-text small {
  font-size: 14px;
  font-weight: 500;
  color: #7b8373;
}
label.type-card:has(input:checked) {
  border-color: var(--ink);
  background: #f6faf0;
  box-shadow: 0 0 0 1px var(--ink);
}
.type-card input:checked + .type-check {
  border-color: var(--ink);
  background-color: var(--ink);
  background-image: url("assets/check.svg");
}
label.type-card:has(input:focus-visible) {
  outline: 3px solid #c6925c;
  outline-offset: 3px;
}
.type-error {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #b2442f;
}
/* Four in a row only when each card has room; otherwise 2 x 2 (never 3 + 1). */
@media (max-width: 1600px) {
  .type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .type-head {
    flex-direction: column;
    gap: 2px;
  }
  .type-head legend {
    font-size: 18px;
  }
  .type-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  label.type-card {
    padding: 14px;
    gap: 14px;
  }
  .type-icon img {
    width: 32px;
    height: 32px;
  }
  .type-text strong {
    font-size: 16px;
  }
}
/* Single-choice rows (timeline, estimate time): radio cards in the same style as the type cards. */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
label.choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
label.choice-card:hover {
  border-color: #a7c77e;
}
.choice-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.choice-dot {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid #c3c9bb;
  border-radius: 50%;
  background: #ffffff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
label.choice-card:has(input:checked) {
  border-color: var(--ink);
  background: #f6faf0;
  box-shadow: 0 0 0 1px var(--ink);
}
.choice-card input:checked + .choice-dot {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 5px var(--ink);
}
label.choice-card:has(input:focus-visible) {
  outline: 3px solid #c6925c;
  outline-offset: 3px;
}
.choice-hint {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #7b8373;
}
label.notes-field {
  margin: 0;
}
label.notes-field textarea {
  margin-top: 0;
}
@media (max-width: 700px) {
  .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  label.choice-card {
    gap: 10px;
    padding: 14px 12px;
    font-size: 15px;
    white-space: nowrap;
  }
  .choice-dot {
    width: 18px;
    height: 18px;
  }
  .choice-card input:checked + .choice-dot {
    box-shadow: inset 0 0 0 4.5px var(--ink);
  }
}
@media (max-width: 370px) {
  label.type-card {
    gap: 12px;
    padding: 12px;
  }
  .type-icon img {
    width: 30px;
    height: 30px;
  }
  .type-text small {
    font-size: 13px;
  }
  .choice-grid {
    gap: 8px;
  }
  label.choice-card {
    gap: 7px;
    padding: 13px 8px;
    font-size: 14px;
  }
  .choice-dot {
    width: 16px;
    height: 16px;
  }
  .choice-card input:checked + .choice-dot {
    box-shadow: inset 0 0 0 4px var(--ink);
  }
}
.choice-hint span {
  white-space: nowrap;
}
.form-submit {
  margin-top: 8px;
}
/* Spam trap: off-screen field that only bots fill in. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-submit.is-sending {
  opacity: 0.7;
  cursor: progress;
}
.form-error {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #b2442f;
}
.contact-form-card .form-submit {
  margin-top: 44px;
}
@media (max-width: 700px) {
  .type-group {
    margin-top: 36px;
  }
  .contact-form-card .form-submit {
    margin-top: 36px;
  }
}
.form-submit {
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.25s;
}
/* Sent state: the button itself confirms; the form stays as filled in. */
.form-submit.is-sent,
.form-submit.is-sent:hover {
  background: var(--ink);
  color: var(--paper);
  cursor: default;
  transform: none;
}
.form-submit.is-sent .submit-icon {
  animation: sent-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes sent-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}
.form-submit .submit-label,
.form-submit .submit-label span {
  font-size: inherit;
  transform: none;
}
/* Long label on wide screens, a one-line short label on phones, and the sent state. */
.label-short,
.label-sent,
.form-submit.is-sent .label-long,
.form-submit.is-sent .label-short {
  display: none;
}
.form-submit.is-sent .label-sent {
  display: inline;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Contact page: the header is fixed, so the page starts below it. */
.page-contact main {
  padding-top: 128px;
}
.contact-page.section-pad {
  padding-top: 56px;
}
/* Full-width page banner under the header; copy aligns with the page content edges. */
.contact-hero {
  padding: 96px max(7%, calc((100vw - 1400px) / 2)) 100px;
  /* Color-swatch still from the hero video under a deep green wash (copy stays readable on the left). */
  background:
    linear-gradient(
      90deg,
      rgba(8, 40, 25, 0.92) 0%,
      rgba(8, 40, 25, 0.72) 45%,
      rgba(8, 40, 25, 0.35) 100%
    ),
    var(--contact-banner, url("assets/contact-banner.webp")) center 40% / cover no-repeat;
  color: var(--paper);
}
.contact-intro h1 {
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.contact-intro p {
  margin-top: 14px;
  max-width: 560px;
  font-size: 18px;
  font-weight: 500;
  color: #e4ebe0;
}
.contact-form-card {
  /* Landing on contact.html#estimate leaves a little air below the fixed header. */
  scroll-margin-top: 28px;
  margin-top: 0;
  padding: 44px 52px;
  border-radius: 22px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 14px 40px rgba(11, 77, 46, 0.08);
}
@media (max-width: 700px) {
  .page-contact main {
    padding-top: var(--header-compact);
  }
  .contact-page.section-pad {
    padding-top: 28px;
  }
  .contact-hero {
    padding: 64px 7% 68px;
    /* Phones: a more even wash, since the copy spans the full width. */
    background:
      linear-gradient(rgba(8, 40, 25, 0.82), rgba(8, 40, 25, 0.82)),
      var(--contact-banner, url("assets/contact-banner.webp")) 70% 40% / cover no-repeat;
  }
  .contact-intro p {
    font-size: 16px;
  }
  .contact-form-card {
    margin-top: 0;
    padding: 28px 22px;
    border-radius: 18px;
  }
}
/* Service areas: map (left) and the city list (right); hovering a city lights its pin. */
.service-areas {
  display: grid;
  /* The map is tall, so its column is capped; the city list takes the rest of the content width. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  margin-top: 96px;
}
.areas-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  background: #e8e6df;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(11, 77, 46, 0.08);
}
/* Basemap fades in once its first tiles have loaded. */
.real-map {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: #f4f2ec;
  font-family: var(--body);
}
.areas-map.has-real-map .real-map {
  opacity: 1;
}
/* Fly-in city names: a small dot with the name beside it, in the basemap's label style. */
.real-map .fly-labels {
  transition: opacity 0.6s ease;
}
.real-map .fly-labels.is-faded {
  opacity: 0;
}
.fly-label {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  padding-left: 12px;
  white-space: nowrap;
  font: 600 13px/1 var(--body);
  color: #5c6259;
  text-shadow:
    0 0 2px #ffffff,
    0 0 4px #ffffff,
    0 0 6px #ffffff;
}
.fly-label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #7d8379;
  box-shadow: 0 0 0 1.5px #ffffff;
}
.fly-label.is-minor {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.real-map .fly-labels.show-minor .fly-label.is-minor {
  opacity: 1;
}
/* Near the east edge the name sits left of its dot so it is never clipped. */
.fly-label.label-left {
  left: auto;
  right: 0;
  padding: 0 12px 0 0;
}
.fly-label.label-left::before {
  left: auto;
  right: 0;
}
/* Inset from the rounded corner so the credit is never clipped (OSM attribution must stay visible). */
.real-map .leaflet-control-attribution {
  margin: 0 14px 12px 0;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.85);
}
.real-pin {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow:
    0 0 0 3px #ffffff,
    0 3px 10px rgba(11, 77, 46, 0.45);
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    opacity 0.35s ease,
    translate 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.real-pin {
  cursor: pointer;
}
/* Bigger, invisible hover target around the small dot. */
.real-pin::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}
.real-pin.is-hidden {
  opacity: 0;
  translate: 0 -12px;
}
.real-pin span {
  position: absolute;
  top: 50%;
  left: calc(100% + 9px);
  translate: 0 -50%;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ffffff;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(11, 77, 46, 0.15);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.real-pin.label-left span {
  left: auto;
  right: calc(100% + 9px);
}
/* Major cities are always labelled; the rest show their name on hover. */
.real-pin.is-anchor span,
.real-pin.is-active span {
  opacity: 1;
}
.real-pin.is-active {
  z-index: 2;
  transform: scale(1.35);
  background: var(--accent);
}
.real-pin.is-active span {
  transform: scale(0.74);
  transform-origin: left center;
}
.real-pin.label-left.is-active span {
  transform-origin: right center;
}
.areas-copy > p:not(.areas-note) {
  margin-top: 14px;
  max-width: 520px;
  font-size: 18px;
  font-weight: 500;
  color: #687363;
}
.area-chips {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  /* As many columns as fit while every box keeps room for "American Fork" plus padding. */
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 14px;
}
.area-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px solid #c9dcb0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  cursor: default;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.area-chip img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.area-chip.is-active {
  background: #eff5e8;
  border-color: #8db55c;
}
.areas-note {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  font-weight: 500;
  color: #65705e;
}
/* The link looks freshly painted: a lime brush stroke sweeps in behind it. */
.areas-note a {
  padding: 2px 6px;
  margin: 0 -2px;
  font-weight: 700;
  color: var(--ink);
  background: url("assets/brush-highlight.svg") left center / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.45s;
}
.areas-note a:hover,
.areas-note a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.js-motion .areas-note:not(.visible) a {
  background-size: 0% 100%;
}
@media (max-width: 1000px) {
  .service-areas {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 64px;
  }
  .areas-copy {
    order: -1;
  }
  .areas-map {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 700px) {
  .service-areas {
    margin-top: 48px;
  }
  /* Phones: pins crowd together and there is no hover, so the city list stands alone. */
  .areas-map {
    display: none;
  }
  .areas-copy > p:not(.areas-note) {
    font-size: 17px;
  }
  .area-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .areas-note {
    font-size: 15px;
  }
  /* Two compact columns on phones, sized so the longest name still keeps side padding. */
  .area-chip {
    gap: 6px;
    padding: 13px 11px;
    font-size: 14px;
  }
  .area-chip img {
    width: 16px;
    height: 16px;
  }
}
footer {
  background: var(--paper);
}
.footer-bar {
  padding: 64px max(7%, calc((100vw - 1400px) / 2)) 24px;
}
.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.footer-info address {
  margin-top: 24px;
  font-style: normal;
  font-size: 17px;
  line-height: 1.75;
  color: #65705e;
}
.footer-info address a {
  font-weight: 600;
  color: var(--ink);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding-top: 14px;
  font-size: 17px;
  font-weight: 500;
}
.footer-nav a {
  color: var(--ink);
  transition: opacity 0.2s;
}
.footer-nav a:hover {
  opacity: 0.6;
}
.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  font-size: 14px;
  color: #7b8373;
}
/* Full-width Utah scene that closes the page; the top fades out of the paper color. */
.footer-scene {
  position: relative;
  height: clamp(180px, 22vw, 340px);
  overflow: hidden;
}
.footer-scene img {
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.footer-scene::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 45%;
  z-index: 1;
  background: linear-gradient(var(--paper), transparent);
}
.back-top {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1.5px solid var(--ink);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}
.back-top:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-3px);
}
.js-motion .reveal {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.js-motion .reveal.visible {
  opacity: 1;
  transform: none;
}
@media (min-width: 1600px) {
  .section-pad {
    padding-left: max(7%, calc((100vw - 1400px) / 2));
    padding-right: max(7%, calc((100vw - 1400px) / 2));
  }
  .hero-copy {
    left: max(7%, calc((100vw - 1400px) / 2));
  }
}
/* Narrow desktops and below: the text links collapse into the menu; the CTA stays in the header. */
@media (max-width: 1280px) {
  .desktop-nav {
    display: none;
  }
  .header-cta {
    margin-left: auto;
  }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    background: transparent;
    color: inherit;
    width: 44px;
    height: 44px;
    padding: 8px;
    flex-shrink: 0;
  }
  .menu-toggle span {
    height: 1px;
    width: 26px;
    background: currentColor;
    transition: transform 0.2s;
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(4px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }
  .site-header.menu-open {
    background: var(--paper);
  }
  .mobile-nav:not([hidden]) {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--ink);
    color: var(--paper);
    padding: 20px 6% 32px;
    flex-direction: column;
    gap: 0;
  }
  .mobile-nav a {
    font-size: 19px;
    padding: 15px 0;
    border-bottom: 1px solid #ffffff25;
  }
}
@media (min-width: 701px) and (max-width: 1280px) {
  .menu-toggle {
    margin-left: 20px;
  }
  .mobile-nav-cta {
    display: none;
  }
}
@media (max-width: 1000px) {
  .faq-list {
    grid-template-columns: 1fr;
    max-width: 820px;
  }
  /* The form column is narrow from tablet down: use the one-line short label. */
  .label-long {
    display: none;
  }
  .form-submit:not(.is-sent) .label-short {
    display: inline;
  }
  .hero {
    min-height: 720px;
  }
  .hero h1 {
    font-size: 68px;
  }
  .hero-copy {
    left: 6%;
  }
  .section-pad {
    padding: 80px 6%;
  }
  .estimate-copy h2 {
    font-size: 68px;
  }
  .form-row {
    gap: 12px;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
    --step-gap: 24px;
    row-gap: 44px;
  }
  /* In a 2x2 grid a left-to-right arrow would mislead after step 2. */
  .step-card:not(:last-child)::after {
    display: none;
  }
}
@media (max-width: 700px) {
  .desktop-only {
    display: none;
  }
  h2 {
    font-size: 32px;
    letter-spacing: -0.025em;
  }
  /* Phones: a slimmer header that stays the same size on scroll. */
  :root {
    --header-compact: 72px;
  }
  .site-header,
  .site-header.is-scrolled {
    height: var(--header-compact);
    padding: 0 max(22px, 6%);
  }
  .brand,
  .site-header.is-scrolled .brand {
    width: 156px;
    margin-right: 22px;
  }
  .desktop-nav,
  .header-cta {
    display: none;
  }
  /* Fill exactly one screen (svh ignores the collapsing URL bar); the floor only guards tiny screens. */
  .hero {
    height: 100svh;
    min-height: 540px;
    max-height: none;
  }
  .hero-image {
    object-position: 62% center;
  }
  .hero-shade {
    background:
      /* bottom fades into the trust band's color so video and band read as one piece */
      linear-gradient(0deg, #101c16, transparent 14%),
      linear-gradient(90deg, #13241c80, #13241c10),
      linear-gradient(0deg, #0d211a55, transparent 55%);
  }
  /* Lighter shade on phones; a soft shadow keeps the white copy readable over bright frames. */
  .hero-copy {
    text-shadow: 0 2px 14px rgba(8, 20, 14, 0.45);
  }
  .hero-copy .button {
    text-shadow: none;
  }
  .hero-copy {
    left: 7%;
    right: 5%;
    transform: translateY(-42%);
  }
  .hero h1 {
    font-size: clamp(36px, 12vw, 64px);
    letter-spacing: -0.035em;
    line-height: 1.07;
  }
  .hero h1 .serif-word {
    letter-spacing: -3px;
  }
  .hero-description {
    font-size: 18px;
    margin: 25px 0;
  }
  .button {
    padding: 15px 24px;
    font-size: 17px;
  }
  .button span {
    font-size: 24px;
  }
  .section-pad {
    padding: 65px 7%;
  }
  .paint-experience {
    height: 160svh;
  }
  .paint-stage {
    min-height: 580px;
    height: 85svh;
    gap: 20px;
    padding: 28px 7%;
    /* Narrow frames crop to the freestanding wall in the middle of the room. */
    --house-position: 58% 50%;
  }
  .paint-head {
    display: block;
  }
  .paint-head p {
    margin-top: 12px;
    font-size: 16px;
  }
  .paint-bottom {
    right: auto;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
  }
  .color-picker {
    padding: 9px 12px;
  }
  #color-name {
    font-size: 14px;
  }
  .section-heading {
    display: block;
    margin-bottom: 33px;
  }
  .section-heading > p {
    margin-top: 16px;
    font-size: 17px;
  }
  .steps {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  /* Stacked on phones: the arrow points down between cards. */
  .approach-cta {
    margin-top: 40px;
  }
  .step-card:not(:last-child)::after {
    display: block;
    top: auto;
    bottom: -24px;
    right: 50%;
    translate: 50% 50%;
    content: "↓";
  }
  .steps {
    row-gap: 36px;
  }
  .step-card:not(:last-child)::after {
    bottom: -18px;
    font-size: 26px;
  }
  /* Phones: a compact row (art left, text right) so all four steps fit in a short scroll. */
  .step-card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    padding: 12px 16px 12px 12px;
    text-align: left;
  }
  .step-art {
    grid-row: 1 / span 2;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: #f3f6ee;
  }
  .step-art img {
    width: 92%;
  }
  .step-badge {
    top: 6px;
    left: 6px;
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
  .step-card h3 {
    align-self: end;
    margin-top: 0;
    padding: 0;
    font-size: 18px;
    white-space: normal;
  }
  .step-card p {
    align-self: start;
    margin: 4px 0 0;
    padding: 0;
    max-width: none;
    font-size: 15px;
  }
  /* Let the reviews heading wrap naturally instead of the forced desktop break. */
  #reviews-title br {
    display: none;
  }
  .estimate {
    --wave: 40px;
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .estimate.section-pad {
    padding-top: calc(48px + var(--wave));
    padding-bottom: calc(48px + var(--wave));
  }
  .estimate-copy h2 {
    font-size: 52px;
  }
  .estimate-copy h2 br:nth-child(2) {
    display: none;
  }


  .estimate-action {
    margin-bottom: 0;
  }
  .estimate-action p {
    margin-bottom: 26px;
    font-size: 18px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  input,
  select,
  textarea {
    font-size: 16px;
  }
  label {
    font-size: 14px;
  }
  .footer-bar {
    padding: 44px 7% 20px;
  }
  .footer-main {
    flex-direction: column;
    gap: 28px;
  }
  .footer-info address,
  .footer-nav {
    font-size: 16px;
  }
  .footer-nav {
    flex-direction: column;
    padding-top: 0;
  }
  .footer-legal {
    margin-top: 36px;
    font-size: 13px;
  }
  .back-top {
    display: none;
  }
}
@media (max-width: 359px) {
  .button.panel-cta {
    padding: 12px 16px;
    font-size: 15px;
  }
  .button {
    gap: 8px;
    padding: 14px 20px;
    font-size: 16px;
  }
  .button span {
    font-size: 22px;
  }
  .menu-toggle {
    width: 34px;
    padding-left: 4px;
    padding-right: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* No drifting: let people scroll the rows themselves. */
  .review-row {
    overflow-x: auto;
  }
  .review-track {
    animation: none;
    padding: 0 7%;
  }
  .hero-image {
    opacity: 1;
  }
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
  .js-motion .reveal {
    opacity: 1;
    transform: none;
  }
  .paint-experience {
    height: auto;
  }
  .paint-stage {
    position: relative;
    height: 650px;
  }
  .wall-after {
    clip-path: none !important;
  }
  #brush-canvas {
    display: none;
  }
  .hero-image {
    transform: none !important;
  }
}

/* Hero video fills the section; cover preserves the source ratio. */
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; pointer-events:none; }
.hero-video.is-playing { opacity:1; }
@media (min-width:701px) {
  .hero { height:100vh; height:100dvh; min-height:0; max-height:none; }
}
@media (min-width:701px) and (max-height:800px) {
  .hero-copy { top:52%; transform:translateY(-42%); }
  .hero-copy h1 { font-size:clamp(38px,10vh,80px); }
  .hero-description { margin:14px 0 18px; }
}
@media (min-width:701px) and (max-height:560px) {
  .hero-description { display:none; }
  .hero-cta { margin-top:16px; }
}
/* Very narrow phones: two columns no longer fit the longest names. */
@media (max-width: 370px) {
  .area-chips {
    grid-template-columns: 1fr;
  }
}
/* Smallest phones: a smaller step art keeps each step to a few lines. */
@media (max-width: 370px) {
  .step-card {
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 12px;
  }
  .step-card h3 {
    font-size: 17px;
  }
  .step-card p {
    font-size: 14px;
  }
}
/* Smallest phones: give the form card's content the full width it can get. */
@media (max-width: 370px) {
  .contact-form-card {
    padding-inline: 16px;
  }
}
/* Tablets: the CTA column gets too narrow beside the heading, so stack them. */
@media (max-width: 900px) {
  .estimate {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .estimate-action {
    margin-bottom: 0;
  }
}
/* Smallest phones: keep the closing heading to three lines. */
@media (max-width: 370px) {
  .estimate-copy h2 {
    font-size: 42px;
  }
}