@font-face { font-family: "Newsreader Local"; src: url("../fonts/newsreader.woff2") format("woff2"); font-style: normal; font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Manrope Local"; src: url("../fonts/manrope.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; }

:root {
  --ink: #101b25;
  --navy: #132d40;
  --navy-deep: #071722;
  --navy-soft: #24475d;
  --blue: #4da6c8;
  --copper: #a96e48;
  --sand: #d9c7aa;
  --plaster: #f2f0eb;
  --linen: #e7e2d8;
  --paper: #fbfaf7;
  --white: #ffffff;
  --muted: #68737b;
  --border: #d8d7d2;
  --site-width: 1360px;
  --page-pad: clamp(24px, 5vw, 68px);
  --section-space: clamp(76px, 9vw, 132px);
  --font-display: "Newsreader Local";
  --font-body: "Manrope Local";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body), sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  overflow-x: hidden;
}

button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 3px solid #5ab4d7;
  outline-offset: 4px;
}

.site-shell {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--site-width);
  padding-inline: var(--page-pad);
  width: 100%;
}

section[id] {
  scroll-margin-top: 98px;
}

.utility-bar {
  background: var(--navy-deep);
  color: #b9c4ca;
  font-size: 11px;
}

.utility-inner {
  align-items: center;
  display: flex;
  height: 36px;
  justify-content: space-between;
}

.utility-inner div { display: flex; gap: 16px; }
.utility-inner a { color: var(--white); font-weight: 700; }

.main-header {
  background: rgba(251, 250, 247, .96);
  border-bottom: 1px solid rgba(16, 27, 37, .1);
  position: sticky;
  top: 0;
  z-index: 40;
}

.header-inner {
  align-items: center;
  display: flex;
  height: 78px;
  justify-content: space-between;
}

.brand {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 12px;
}

.brand-seal {
  align-items: center;
  background: var(--navy);
  border-radius: 50% 50% 46% 46%;
  color: var(--white);
  display: inline-flex;
  font-family: var(--font-display), serif;
  font-size: 28px;
  font-style: italic;
  height: 44px;
  justify-content: center;
  line-height: 1;
  padding-top: 1px;
  width: 44px;
}

.brand-words strong,
.brand-words small { display: block; }

.brand-words strong {
  color: var(--navy);
  font-family: var(--font-display), serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.05;
}

.brand-words small {
  color: #6f777b;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.main-header nav {
  display: flex;
  gap: clamp(16px, 2.2vw, 34px);
  margin-left: auto;
  margin-right: clamp(20px, 3vw, 46px);
}

.main-header nav a {
  color: #46535b;
  font-size: 12px;
  font-weight: 650;
}

.header-call { margin-right: 20px; text-align: right; }
.header-call small { color: #7b858b; display: block; font-size: 9px; }
.header-call strong { color: var(--navy); display: block; font-size: 13px; }

.button {
  align-items: center;
  background: var(--copper);
  border: 1px solid var(--copper);
  border-radius: 2px;
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  letter-spacing: .01em;
  min-height: 54px;
  padding: 0 24px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.button:hover {
  background: #8f5635;
  border-color: #8f5635;
  transform: translateY(-2px);
}

.button-compact { min-height: 43px; padding-inline: 18px; }

.hero {
  color: var(--white);
  min-height: calc(100vh - 114px);
  overflow: hidden;
  position: relative;
}

.hero-photo,
.hero-shade {
  inset: 0;
  position: absolute;
}

.hero-photo {
  background-image: url("../images/houston-home.jpg");
  background-position: center 48%;
  background-size: cover;
  transform: scale(1.015);
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(5, 17, 26, .92) 0%, rgba(7, 24, 36, .74) 42%, rgba(8, 25, 35, .2) 74%, rgba(8, 23, 32, .12) 100%),
    linear-gradient(0deg, rgba(5, 16, 23, .72), transparent 48%);
}

.hero-inner {
  align-items: end;
  display: grid;
  gap: 7vw;
  grid-template-columns: minmax(0, 1fr) 320px;
  min-height: calc(100vh - 184px);
  padding-bottom: clamp(66px, 9vw, 116px);
  padding-top: clamp(72px, 8vw, 110px);
  position: relative;
}

.hero-copy { max-width: 780px; }

.kicker {
  color: #e4d4bc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  margin: 0 0 22px;
  text-transform: uppercase;
}

.kicker-dark { color: #8d5f41; }

.hero h1,
.section-heading h2,
.story-intro h2,
.care-copy h2,
.estimate-copy h2 {
  font-family: var(--font-display), serif;
  font-weight: 500;
  letter-spacing: -.04em;
}

.hero h1 {
  font-size: clamp(54px, 7.2vw, 104px);
  line-height: .88;
  margin: 0;
  max-width: 820px;
}

.hero h1 em {
  color: #e7d6ba;
  display: block;
  font-weight: 400;
}

.hero-lede {
  color: #d6dde1;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.65;
  margin: 30px 0 34px;
  max-width: 610px;
}

.hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.quiet-link {
  border-bottom: 1px solid rgba(255,255,255,.4);
  font-size: 12px;
  font-weight: 700;
  padding-block: 8px;
}

.quiet-link span { margin-left: 12px; }

.hero-card {
  backdrop-filter: blur(14px);
  background: rgba(248, 245, 237, .92);
  border-top: 4px solid var(--copper);
  color: var(--ink);
  padding: 26px;
}

.hero-card > p {
  font-family: var(--font-display), serif;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 18px;
}

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

.hero-card li {
  align-items: start;
  border-top: 1px solid #d8d4ca;
  color: #526069;
  display: grid;
  font-size: 11px;
  gap: 11px;
  grid-template-columns: 24px 1fr;
  padding: 13px 0;
}

.hero-card li span {
  color: var(--copper);
  font-size: 9px;
  font-weight: 800;
}

.hero-card > a {
  color: var(--navy);
  display: flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: space-between;
  margin-top: 15px;
}

.hero-trust {
  backdrop-filter: blur(12px);
  background: rgba(8, 24, 34, .84);
  border-top: 1px solid rgba(255,255,255,.12);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
}

.trust-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trust-inner span {
  align-items: center;
  border-right: 1px solid rgba(255,255,255,.12);
  color: #ccd5da;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  min-height: 70px;
  padding-inline: 22px;
}

.trust-inner span::before {
  color: #d3a67e;
  content: "✓";
  margin-right: 10px;
}

.problem-section,
.services-section,
.process-section,
.faq-section,
.estimate-section {
  padding-block: var(--section-space);
}

.problem-section { background: var(--plaster); }

.problem-layout {
  align-items: start;
  display: grid;
  gap: clamp(48px, 8vw, 110px);
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
}

.section-heading { max-width: 650px; }

.section-heading h2,
.story-intro h2,
.care-copy h2,
.estimate-copy h2 {
  color: var(--navy);
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1;
  margin: 0 0 24px;
}

.section-heading > p:last-of-type {
  color: var(--muted);
  margin: 0;
  max-width: 570px;
}

.text-button {
  border-bottom: 1px solid var(--copper);
  color: var(--navy);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 30px;
  margin-top: 30px;
  padding-bottom: 7px;
}

.concern-panel {
  background: var(--paper);
  border: 1px solid #dedbd3;
  box-shadow: 0 24px 70px rgba(20, 40, 52, .08);
  padding: clamp(30px, 4vw, 52px);
}

.concern-panel > p {
  color: var(--navy);
  font-family: var(--font-display), serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 20px;
}

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

.concern-panel li {
  border-top: 1px solid var(--border);
  color: #4f5c64;
  display: flex;
  font-size: 13px;
  gap: 12px;
  padding: 13px 0;
}

.concern-panel li span { color: var(--copper); font-weight: 900; }

.concern-note {
  background: #e7ded0;
  margin-top: 26px;
  padding: 22px;
}

.concern-note strong {
  color: var(--navy);
  font-family: var(--font-display), serif;
  font-size: 19px;
}

.concern-note p { color: #59636a; font-size: 11px; margin: 7px 0 12px; }
.concern-note a { color: #814e30; font-size: 11px; font-weight: 800; }

.scroll-story {
  background: var(--navy-deep);
  color: var(--white);
  position: relative;
}

.story-layout {
  display: grid;
  gap: clamp(48px, 7vw, 94px);
  grid-template-columns: minmax(340px, .72fr) minmax(520px, 1.28fr);
  position: relative;
}

.story-copy { padding-bottom: 25vh; }

.story-intro {
  padding-top: var(--section-space);
}

.story-intro h2 { color: var(--white); }
.story-intro > p:last-child { color: #90a1aa; max-width: 470px; }

.story-copy article {
  min-height: 72vh;
  opacity: .26;
  padding-top: 25vh;
  transition: opacity .35s ease;
}

.story-copy article.active { opacity: 1; }

.story-copy article > span {
  color: #a98a70;
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  margin-bottom: 40px;
}

.story-label {
  color: #c7b79f !important;
  font-size: 10px !important;
  font-weight: 800;
  letter-spacing: .16em;
  margin: 0 0 18px !important;
  text-transform: uppercase;
}

.story-copy article h3 {
  font-family: var(--font-display), serif;
  font-size: clamp(36px, 4vw, 55px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.02;
  margin: 0 0 22px;
}

.story-copy article > p:last-child {
  color: #9aabb4;
  font-size: 14px;
  margin: 0;
  max-width: 500px;
}

.story-visual-wrap {
  height: 100%;
  position: relative;
}

.story-visual {
  background: #0c2331;
  box-shadow: 0 40px 120px rgba(0,0,0,.35);
  height: min(74vh, 720px);
  overflow: hidden;
  position: sticky;
  top: 13vh;
  transform: perspective(1200px) rotateY(-2deg);
}

.story-home-image {
  background-image: url("../images/houston-home.jpg");
  background-position: center;
  background-size: cover;
  inset: 0;
  opacity: .92;
  position: absolute;
  transform: scale(1.02);
  transition: opacity .7s ease, filter .7s ease, transform .7s ease;
}

.story-overlay {
  background: linear-gradient(0deg, rgba(5,20,29,.65), rgba(4,18,27,.12));
  inset: 0;
  position: absolute;
  transition: background .7s ease;
}

.story-visual.stage-1 .story-home-image,
.story-visual.stage-2 .story-home-image {
  filter: saturate(.65) brightness(.48);
  opacity: .26;
  transform: scale(1.06);
}

.story-visual.stage-3 .story-home-image {
  filter: saturate(.8) brightness(.72);
  opacity: .78;
}

.cutaway-house {
  bottom: 16%;
  left: 9%;
  opacity: 0;
  perspective: 900px;
  position: absolute;
  right: 9%;
  top: 18%;
  transform: translateY(24px) rotateX(2deg);
  transition: opacity .6s ease, transform .7s ease;
}

.stage-1 .cutaway-house,
.stage-2 .cutaway-house,
.stage-3 .cutaway-house {
  opacity: 1;
  transform: translateY(0) rotateX(2deg);
}

.house-roof {
  border-bottom: 70px solid rgba(182, 198, 206, .16);
  border-left: 220px solid transparent;
  border-right: 220px solid transparent;
  filter: drop-shadow(0 -1px 0 rgba(207, 221, 228, .42));
  left: 50%;
  position: absolute;
  top: -68px;
  transform: translateX(-50%);
}

.house-wall {
  backdrop-filter: blur(3px);
  background: rgba(10, 35, 50, .5);
  border: 1px solid rgba(200, 218, 226, .45);
  height: 100%;
  position: relative;
  transform: rotateY(-3deg);
  transform-origin: left;
}

.house-room {
  border: 1px solid rgba(197, 217, 226, .18);
  color: #6f8b9b;
  font-size: 7px;
  letter-spacing: .14em;
  padding: 9px;
  position: absolute;
}

.room-one { height: 50%; left: 0; top: 0; width: 48%; }
.room-two { height: 50%; right: 0; top: 0; width: 52%; }
.room-three { bottom: 0; height: 50%; left: 0; width: 58%; }
.room-four { bottom: 0; height: 50%; right: 0; width: 42%; }

.old-line,
.new-line {
  border-radius: 10px;
  position: absolute;
  transition: opacity .6s ease, filter .6s ease;
  z-index: 3;
}

.old-line {
  background: #725b4c;
  box-shadow: inset 0 0 0 1px #9a765d;
  opacity: 0;
}

.stage-1 .old-line { opacity: 1; }
.stage-2 .old-line { opacity: .15; filter: blur(1px); }
.stage-3 .old-line { opacity: 0; }

.old-main { bottom: 25%; height: 7px; left: 8%; right: 8%; }
.old-branch-a { bottom: 25%; height: 45%; left: 34%; width: 7px; }
.old-branch-b { bottom: 25%; height: 36%; right: 25%; width: 7px; }

.new-line { opacity: 0; }
.stage-2 .new-line, .stage-3 .new-line { opacity: 1; }

.new-line::after {
  animation: waterTravel 1.4s linear infinite;
  background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(255,255,255,.9) 22px, transparent 24px 44px);
  border-radius: inherit;
  content: "";
  inset: 0;
  position: absolute;
}

.cold-line {
  background: #49b9e3;
  box-shadow: 0 0 14px rgba(73,185,227,.65);
}

.hot-line {
  background: #cc6961;
  box-shadow: 0 0 12px rgba(204,105,97,.45);
}

.cold-main { bottom: 25%; height: 5px; left: 8%; right: 8%; }
.cold-a { bottom: 25%; height: 45%; left: 34%; width: 5px; }
.cold-b { bottom: 25%; height: 36%; right: 25%; width: 5px; }
.hot-main { bottom: 40%; height: 5px; left: 19%; right: 15%; }
.hot-a { bottom: 40%; height: 30%; left: 55%; width: 5px; }

.connection {
  background: #c18a61;
  border: 2px solid #ecc19d;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(193,138,97,.16);
  height: 10px;
  opacity: 0;
  position: absolute;
  transition: opacity .5s ease .25s;
  width: 10px;
  z-index: 4;
}

.stage-2 .connection, .stage-3 .connection { opacity: 1; }
.connection-a { bottom: calc(25% - 2px); left: calc(34% - 2px); }
.connection-b { bottom: calc(40% - 2px); left: calc(55% - 2px); }
.connection-c { bottom: calc(25% - 2px); right: calc(25% - 2px); }

.water-tank {
  align-items: center;
  background: linear-gradient(90deg,#657883,#a5b1b6,#5f707a);
  border-radius: 14px 14px 3px 3px;
  bottom: 3%;
  color: #273b47;
  display: flex;
  font-size: 8px;
  height: 32%;
  justify-content: center;
  left: 50%;
  position: absolute;
  width: 10%;
}

.issue {
  background: #bd664e;
  border-radius: 2px;
  color: #fff;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .12em;
  opacity: 0;
  padding: 5px 7px;
  position: absolute;
  z-index: 5;
}

.stage-1 .issue { opacity: 1; }
.issue-a { left: 33%; top: 30%; }
.issue-b { bottom: 21%; right: 23%; }

.scene-topline {
  display: flex;
  font-size: 8px;
  font-weight: 800;
  justify-content: space-between;
  left: 24px;
  letter-spacing: .12em;
  position: absolute;
  right: 24px;
  text-transform: uppercase;
  top: 22px;
}

.scene-status { align-items: center; display: inline-flex; gap: 8px; }
.scene-status i {
  background: #75cda0;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(117,205,160,.13);
  height: 6px;
  width: 6px;
}

.pressure-readout {
  backdrop-filter: blur(14px);
  background: rgba(6, 24, 35, .86);
  border: 1px solid rgba(202, 218, 226, .22);
  bottom: 24px;
  padding: 16px 18px;
  position: absolute;
  right: 24px;
  width: 210px;
}

.pressure-readout small { color: #8297a3; display: block; font-size: 7px; letter-spacing: .14em; }
.pressure-readout strong { display: block; font-family: var(--font-display), serif; font-size: 36px; line-height: 1.1; }
.pressure-readout strong span { color: #8799a4; font-family: var(--font-body), sans-serif; font-size: 8px; }
.pressure-readout > div { background: #233e4d; height: 3px; }
.pressure-readout > div i { background: #79b9cf; display: block; height: 100%; transition: width .6s ease; }
.pressure-readout p { color: #7e919c; font-size: 7px; margin: 8px 0 0; }

.story-progress {
  bottom: 0;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(4, 1fr);
  left: 0;
  position: absolute;
  right: 0;
}

.story-progress span { background: rgba(255,255,255,.1); height: 4px; }
.story-progress span.filled { background: var(--copper); }

.services-section { background: var(--paper); }

.services-heading {
  align-items: end;
  display: grid;
  gap: 60px;
  grid-template-columns: 1.1fr .9fr;
  max-width: none;
}

.services-heading > p {
  justify-self: end;
  max-width: 460px !important;
}

.service-list {
  border-top: 1px solid var(--border);
  margin-top: 64px;
}

.service-list article {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  grid-template-columns: 38px minmax(220px, .7fr) minmax(300px, 1fr) 155px;
  min-height: 148px;
  transition: background .25s ease, padding .25s ease;
}

.service-list article:hover {
  background: #f2ede4;
  padding-inline: 18px;
}

.service-number {
  color: #aa7653;
  font-size: 9px;
  font-weight: 800;
}

.service-list article div > p {
  color: #9a6849;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  margin: 0 0 5px;
  text-transform: uppercase;
}

.service-list h3 {
  color: var(--navy);
  font-family: var(--font-display), serif;
  font-size: 29px;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
}

.service-list article > p {
  color: #68747b;
  font-size: 12px;
  margin: 0;
}

.service-list article > a {
  color: var(--navy);
  display: flex;
  font-size: 10px;
  font-weight: 800;
  justify-content: space-between;
}

.care-section {
  background: var(--navy);
  color: var(--white);
  min-height: 760px;
  overflow: hidden;
  position: relative;
}

.care-photo {
  background:
    linear-gradient(90deg, rgba(13,38,54,.05), rgba(13,38,54,.72) 75%, rgba(13,38,54,.96)),
    url("../images/houston-home.jpg") center / cover;
  inset: 0 45% 0 0;
  position: absolute;
}

.care-inner {
  display: flex;
  justify-content: flex-end;
  min-height: 760px;
  position: relative;
}

.care-copy {
  align-self: center;
  max-width: 580px;
  padding-block: var(--section-space);
  width: 48%;
}

.care-copy h2 { color: var(--white); }
.care-copy > p:not(.kicker) { color: #bcc9cf; }

.care-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  margin: 34px 0;
}

.care-grid span {
  border-bottom: 1px solid rgba(255,255,255,.16);
  color: #d4dde1;
  font-size: 10px;
  font-weight: 700;
  padding: 15px 8px 15px 0;
}

.care-grid span::before { color: #d4a077; content: "✓"; margin-right: 9px; }
.button-light { background: #f0e4d2; border-color: #f0e4d2; color: var(--navy); }

.process-section { background: var(--plaster); }

.process-heading { margin-bottom: 60px; max-width: 760px; }

.process-track {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
}

.process-track article {
  background: var(--paper);
  border: 1px solid #dfdcd4;
  min-height: 270px;
  padding: 32px;
}

.process-track article > span {
  align-items: center;
  background: var(--navy);
  border-radius: 50%;
  color: var(--white);
  display: flex;
  font-family: var(--font-display), serif;
  font-size: 20px;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.process-track h3 {
  color: var(--navy);
  font-family: var(--font-display), serif;
  font-size: 30px;
  font-weight: 600;
  margin: 42px 0 10px;
}

.process-track p { color: var(--muted); font-size: 12px; margin: 0; }

.faq-section { background: var(--paper); }

.faq-layout {
  align-items: start;
  display: grid;
  gap: clamp(50px, 8vw, 110px);
  grid-template-columns: .75fr 1.25fr;
}

.faq-list { border-top: 1px solid var(--border); }
.faq-list article { border-bottom: 1px solid var(--border); }

.faq-list button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  font-family: var(--font-display), serif;
  font-size: 23px;
  font-weight: 600;
  justify-content: space-between;
  padding: 22px 0;
  text-align: left;
  width: 100%;
}

.faq-list button i { font-family: var(--font-body), sans-serif; font-style: normal; font-weight: 300; }
.faq-list article > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-list article > div p { color: var(--muted); font-size: 13px; margin: 0; max-width: 650px; overflow: hidden; }
.faq-list article.open > div { grid-template-rows: 1fr; }
.faq-list article.open > div p { padding-bottom: 24px; }

.estimate-section {
  background: var(--navy-deep);
  color: var(--white);
}

.estimate-layout {
  display: grid;
  gap: clamp(50px, 8vw, 110px);
  grid-template-columns: .78fr 1.22fr;
}

.estimate-copy { align-self: start; position: sticky; top: 120px; }
.estimate-copy h2 { color: var(--white); }
.estimate-copy > p:not(.kicker) { color: #9dafb8; }

.direct-contact { border-top: 1px solid rgba(255,255,255,.16); margin-top: 38px; }
.direct-contact a { border-bottom: 1px solid rgba(255,255,255,.16); display: block; padding: 15px 0; }
.direct-contact small { color: #718893; display: block; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.direct-contact strong { display: block; font-size: 13px; margin-top: 3px; }

.estimate-section form {
  background: var(--paper);
  color: var(--ink);
  min-height: 690px;
  padding: clamp(30px, 5vw, 60px);
}

.form-title {
  align-items: end;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  padding-bottom: 18px;
}

.form-title h3 {
  color: var(--navy);
  font-family: var(--font-display), serif;
  font-size: 32px;
  font-weight: 600;
  margin: 0;
}

.form-title span { color: #8b694f; font-size: 9px; font-weight: 800; text-transform: uppercase; }

.form-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}

.estimate-section label {
  color: #69747b;
  display: grid;
  font-size: 9px;
  font-weight: 800;
  gap: 8px;
  letter-spacing: .08em;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.estimate-section input,
.estimate-section select,
.estimate-section textarea {
  background: #f0efeb;
  border: 1px solid #dad8d1;
  border-radius: 0;
  color: var(--ink);
  min-height: 50px;
  padding: 0 14px;
  text-transform: none;
}

.estimate-section textarea { min-height: 110px; padding-top: 13px; resize: vertical; }

.form-actions {
  align-items: end;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 30px;
  justify-content: space-between;
  padding-top: 24px;
}

.form-actions p { color: #7d878c; font-size: 9px; margin: 0; max-width: 350px; }

.form-success {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 560px;
}

.form-success > span {
  align-items: center;
  background: #dfece5;
  border-radius: 50%;
  color: #3b7557;
  display: flex;
  font-size: 21px;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.form-success h3 {
  color: var(--navy);
  font-family: var(--font-display), serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.05;
  margin: 24px 0 12px;
}

.form-success p { color: var(--muted); max-width: 500px; }

footer {
  background: #050f16;
  color: var(--white);
  padding-block: 64px 28px;
}

.footer-inner {
  display: grid;
  gap: 50px;
  grid-template-columns: 1.2fr .8fr .9fr;
}

.footer-brand .brand-seal { background: #e8dac4; color: var(--navy); }
.footer-brand .brand-words strong { color: var(--white); }
.footer-inner > div:first-child > p { color: #6f828d; font-size: 11px; max-width: 360px; }

.footer-links,
.footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-links a, .footer-contact a { color: #adbcc4; font-size: 11px; }
.footer-contact span { color: #617581; font-size: 9px; margin-top: 8px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  color: #566b76;
  display: flex;
  font-size: 8px;
  grid-column: 1 / -1;
  justify-content: space-between;
  padding-top: 24px;
}

.mobile-actions { display: none; }

@keyframes waterTravel {
  to { transform: translateX(44px); }
}

@media (max-width: 1080px) {
  .main-header nav, .header-call { display: none; }
  .hero-inner { gap: 50px; grid-template-columns: 1fr 280px; }
  .story-layout { grid-template-columns: minmax(300px, .8fr) minmax(440px, 1.2fr); }
  .service-list article { grid-template-columns: 30px .8fr 1fr; }
  .service-list article > a { display: none; }
}

@media (max-width: 820px) {
  body { padding-bottom: 62px; }
  :root {
    --page-pad: clamp(24px, 6vw, 40px);
    --section-space: 78px;
  }
  .utility-inner > span { display: none; }
  .utility-inner { justify-content: center; }
  .header-inner { height: 68px; }
  .button-compact { display: none; }

  .hero {
    min-height: auto;
  }

  .hero-shade {
    background:
      linear-gradient(0deg, rgba(5, 17, 26, .9) 0%, rgba(6, 22, 32, .57) 60%, rgba(7, 24, 36, .2) 100%);
  }

  .hero-photo { background-position: 58% center; }

  .hero-inner {
    align-items: end;
    grid-template-columns: 1fr;
    min-height: 760px;
    padding-bottom: 158px;
  }

  .hero-copy { max-width: 650px; }
  .hero-card { display: none; }
  .trust-inner { grid-template-columns: 1fr 1fr; }
  .trust-inner span { font-size: 8px; min-height: 52px; padding-inline: 8px; }

  .problem-layout,
  .services-heading,
  .faq-layout,
  .estimate-layout {
    grid-template-columns: 1fr;
  }

  .problem-layout { gap: 48px; }
  .services-heading > p { justify-self: start; }

  .story-layout {
    display: flex;
    flex-direction: column;
  }

  .story-copy {
    padding-bottom: 0;
  }

  .story-intro,
  .story-copy article {
    padding-inline: 0;
  }

  .story-copy article {
    min-height: 58vh;
    padding-top: 18vh;
  }

  .story-visual-wrap {
    order: -1;
  }

  .story-visual {
    border-left: 1px solid rgba(255,255,255,.12);
    border-right: 1px solid rgba(255,255,255,.12);
    height: 62vh;
    top: 68px;
    transform: none;
    z-index: 5;
  }

  .story-copy {
    padding-top: 62vh;
  }

  .story-intro {
    padding-top: 70px;
  }

  .service-list article {
    align-items: start;
    gap: 12px 18px;
    grid-template-columns: 28px 1fr;
    padding-block: 24px;
  }

  .service-list article > p {
    grid-column: 2;
  }

  .care-photo { inset: 0; opacity: .28; }
  .care-inner { min-height: 690px; }
  .care-copy { max-width: 620px; width: 100%; }
  .process-track { grid-template-columns: 1fr 1fr; }
  .estimate-copy { position: static; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-inner > div:first-child, .footer-bottom { grid-column: 1 / -1; }

  .mobile-actions {
    background: var(--paper);
    bottom: 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,.12);
    color: var(--navy);
    display: grid;
    grid-template-columns: .7fr .7fr 1.5fr;
    height: 62px;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 50;
  }

  .mobile-actions a {
    align-items: center;
    border-right: 1px solid var(--border);
    display: flex;
    font-size: 11px;
    font-weight: 800;
    justify-content: center;
  }

  .mobile-actions a:last-child { background: var(--copper); color: var(--white); }
}

@media (max-width: 560px) {
  :root { --page-pad: 24px; }
  .brand-words strong { font-size: 19px; }
  .brand-words small { font-size: 7px; }
  .hero h1 { font-size: clamp(52px, 16vw, 72px); }
  .hero-lede { font-size: 15px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .quiet-link { align-self: flex-start; }
  .section-heading h2, .story-intro h2, .care-copy h2, .estimate-copy h2 { font-size: 43px; }
  .process-track { grid-template-columns: 1fr; }
  .care-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-inner > div:first-child, .footer-bottom { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
  .story-visual { height: 54vh; }
  .story-copy { padding-top: 54vh; }
  .house-roof { border-bottom-width: 50px; border-left-width: 150px; border-right-width: 150px; top: -48px; }
  .pressure-readout { bottom: 18px; left: 18px; right: 18px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}