:root {
  --navy: #06253a;
  --navy-deep: #031925;
  --navy-soft: #0d3c57;
  --blue-mist: #eaf2f7;
  --blue-pale: #f4f8fb;
  --yellow: #ffc31c;
  --yellow-bright: #ffd44f;
  --ink: #0d2637;
  --muted: #607281;
  --line: #d9e3e9;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(1, 26, 41, 0.16);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
textarea {
  font: inherit;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a,
summary,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid rgba(255, 195, 28, 0.8);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.topbar {
  position: relative;
  z-index: 40;
  background: var(--navy-deep);
  color: #d9e8f1;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.topbar-inner {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.topbar-links {
  display: flex;
  gap: 24px;
}

.topbar a:hover {
  color: var(--yellow);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 35;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(7, 38, 57, 0.09);
  backdrop-filter: blur(16px);
}

.nav-wrap {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: block;
  width: 230px;
  height: 76px;
  overflow: hidden;
  flex: 0 0 auto;
}

.brand-crop {
  position: relative;
  display: block;
  width: 230px;
  height: 76px;
  overflow: hidden;
}

.brand-crop img {
  position: absolute;
  width: 230px;
  max-width: none;
  left: 0;
  top: -50px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 27px;
  color: #18384b;
  font-size: 0.91rem;
  font-weight: 700;
}

.main-nav > a:not(.nav-call) {
  position: relative;
  padding: 30px 0 28px;
}

.main-nav > a:not(.nav-call)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 22px;
  height: 2px;
  background: var(--yellow);
  transition: right 180ms ease;
}

.main-nav > a:hover::after {
  right: 0;
}

.nav-call {
  background: var(--yellow);
  color: var(--navy-deep);
  padding: 12px 19px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(255, 195, 28, 0.25);
}

.nav-call:hover {
  background: var(--yellow-bright);
}

.menu-toggle {
  display: none;
  width: 45px;
  height: 45px;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.menu-toggle > span:not(.sr-only) {
  width: 19px;
  height: 2px;
  background: white;
  border-radius: 2px;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 710px;
  padding: 78px 0 92px;
  color: white;
  background:
    radial-gradient(circle at 16% 10%, rgba(41, 103, 137, 0.3), transparent 27%),
    linear-gradient(90deg, rgba(2, 26, 41, 0.94) 0%, rgba(2, 28, 42, 0.78) 48%, rgba(3, 27, 39, 0.56) 100%),
    url("/frostklar-hero-vinter.png") center 55% / cover no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  width: 520px;
  height: 520px;
  right: -210px;
  top: -230px;
  border: 95px solid rgba(255, 195, 28, 0.12);
  border-radius: 50%;
}

.snow {
  position: absolute;
  z-index: -1;
  inset: -80px 0 0 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.6) 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 2px);
  background-size: 130px 130px, 180px 180px, 90px 90px;
  background-position: 0 0, 50px 80px, 20px 30px;
  animation: snow-fall 18s linear infinite;
}

.snow-two {
  opacity: 0.27;
  transform: scale(1.35);
  animation-duration: 30s;
  animation-direction: reverse;
}

@keyframes snow-fall {
  from { background-position: 0 0, 50px 80px, 20px 30px; }
  to { background-position: 70px 260px, 0 350px, 90px 300px; }
}

.hero-road {
  position: absolute;
  z-index: -1;
  left: -5%;
  right: -5%;
  bottom: -160px;
  height: 290px;
  border-radius: 50% 50% 0 0;
  transform: rotate(-2deg);
  background: linear-gradient(150deg, rgba(167, 195, 210, 0.25), rgba(240, 248, 251, 0.08));
  box-shadow: 0 -18px 55px rgba(190, 220, 234, 0.1);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(430px, 0.82fr);
  gap: 70px;
  align-items: center;
}

.hero-copy {
  padding: 28px 0 36px;
}

.eyebrow {
  margin: 0 0 13px;
  color: #526a78;
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.eyebrow.light {
  color: var(--yellow);
}

.hero h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(3rem, 5.4vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.hero-lead {
  max-width: 650px;
  margin: 28px 0 0;
  color: #dceaf1;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.68;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 34px;
}

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 7px;
  padding: 13px 21px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--yellow);
  color: var(--navy-deep);
  box-shadow: 0 12px 25px rgba(255, 195, 28, 0.2);
}

.button-primary:hover {
  background: var(--yellow-bright);
  box-shadow: 0 16px 30px rgba(255, 195, 28, 0.28);
}

.button-ghost {
  border: 1px solid rgba(255,255,255,.42);
  color: white;
  background: rgba(255,255,255,.05);
}

.button-ghost:hover {
  background: rgba(255,255,255,.12);
}

.button-dark {
  background: var(--navy);
  color: white;
}

.hero-services {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 40px;
  color: #d6e6ef;
  font-size: 0.82rem;
  font-weight: 800;
}

.hero-services span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-services span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #42d36b;
  box-shadow: 0 0 0 3px rgba(66, 211, 107, .12);
}

.quote-card {
  color: var(--ink);
  background: rgba(255,255,255,.98);
  padding: 32px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.quote-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}

.quote-heading h2 {
  margin: 0;
  max-width: 350px;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.quote-intro {
  margin: 12px 0 23px;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.92rem;
}

.quote-form {
  display: grid;
  gap: 13px;
}

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

.quote-form label {
  display: grid;
  gap: 4px;
  color: #2d4859;
  font-size: 0.78rem;
  font-weight: 800;
}

.quote-form .field-label {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: #2d4859;
}

.quote-form .field-label .required {
  color: #d58c00;
}

.quote-form small {
  color: #788994;
  font-size: 0.68rem;
  font-weight: 600;
}

.quote-form input,
.quote-form textarea {
  width: 100%;
  border: 1px solid #cfdae0;
  border-radius: 6px;
  background: #fafdff;
  color: var(--ink);
  padding: 12px 13px;
  outline: none;
  font-size: 0.89rem;
  resize: vertical;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.quote-form input:focus,
.quote-form textarea:focus {
  border-color: var(--navy-soft);
  box-shadow: 0 0 0 3px rgba(13, 60, 87, 0.1);
}

.quote-form input::placeholder,
.quote-form textarea::placeholder {
  color: #98a7b0;
}

.quote-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #627682;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
}

.quote-form .consent input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 1px;
  accent-color: var(--navy);
}

.quote-form .consent em {
  color: #d58c00;
  font-style: normal;
}

.honeypot {
  position: absolute !important;
  left: -9999px;
}

.submit-button {
  width: 100%;
  margin-top: 2px;
}

.submit-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.form-note {
  margin: 0;
  text-align: center;
  color: #72838e;
  font-size: 0.72rem;
}

.form-note a {
  color: var(--navy);
  font-weight: 800;
}

.form-status {
  margin: 0;
  padding: 11px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.form-status.success {
  background: #e9f8ed;
  color: #1a6c35;
}

.form-status.preview {
  background: #fff6d9;
  color: #725108;
}

.form-status.error {
  background: #fff0ee;
  color: #9c2e22;
}

.section {
  padding: 108px 0;
}

.section-heading h2,
.process-intro h2,
.plan-card h2,
.rules-heading h2,
.area-copy h2,
.faq-intro h2,
.final-cta h2 {
  margin: 0;
  font-size: clamp(2.3rem, 4.3vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.052em;
  text-wrap: balance;
}

.split-heading {
  display: grid;
  grid-template-columns: 1.1fr 0.72fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 52px;
}

.split-heading > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.audience-section {
  background: var(--blue-pale);
}

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

.audience-card {
  position: relative;
  overflow: hidden;
  min-height: 465px;
  display: flex;
  flex-direction: column;
  padding: 35px 32px 31px;
  background: white;
  border: 1px solid #dce6eb;
  border-radius: 11px;
  box-shadow: 0 15px 45px rgba(8, 46, 67, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.audience-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(8, 46, 67, 0.11);
}

.audience-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5px;
  background: var(--yellow);
}

.card-index {
  position: absolute;
  right: 25px;
  top: 22px;
  color: #dce6eb;
  font-size: 2.5rem;
  font-weight: 900;
}

.audience-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  margin-bottom: 30px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--yellow);
  font-size: 2rem;
}

.audience-card h3 {
  margin: 0 0 14px;
  font-size: 1.65rem;
  letter-spacing: -0.035em;
}

.audience-card > p {
  min-height: 79px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.check-list {
  display: grid;
  gap: 11px;
  margin: 25px 0 28px;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9rem;
  font-weight: 700;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--yellow);
}

.audience-card > a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: auto;
  color: var(--navy);
  font-weight: 900;
  font-size: 0.87rem;
}

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

.centered-heading {
  max-width: 760px;
  margin: 0 auto 65px;
  text-align: center;
}

.centered-heading > p:last-child {
  max-width: 620px;
  margin: 20px auto 0;
  color: #acc3d0;
  line-height: 1.7;
}

.service-stack {
  display: grid;
  gap: 25px;
}

.service-row {
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  min-height: 380px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: #082c42;
}

.service-row.reversed {
  grid-template-columns: 1.16fr 0.84fr;
}

.service-row.reversed .service-visual {
  order: 2;
}

.service-visual {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), transparent),
    #0e415e;
}

.service-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 34px 34px;
}

.service-copy {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 54px 60px;
}

.service-tag {
  color: var(--yellow);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.service-copy h3 {
  margin: 15px 0 15px;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.service-copy > p {
  margin: 0;
  color: #b9ced9;
  line-height: 1.72;
}

.service-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.service-points span {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 99px;
  color: #dfedf4;
  font-size: 0.76rem;
  font-weight: 700;
}

.machine-body,
.machine-cabin,
.machine-plow,
.machine-wheel,
.snow-bank,
.salt-pile,
.salt-dot,
.ice-line,
.safe-path {
  position: absolute;
  display: block;
}

.machine-body {
  width: 220px;
  height: 85px;
  left: 80px;
  top: 155px;
  border-radius: 14px 28px 10px 10px;
  background: var(--navy-deep);
  box-shadow: 0 15px 35px rgba(0,0,0,.25);
}

.machine-cabin {
  width: 90px;
  height: 80px;
  left: 105px;
  top: 82px;
  transform: skew(-8deg);
  border: 12px solid var(--navy-deep);
  border-bottom: 0;
  background: #9fbed0;
}

.machine-wheel {
  z-index: 3;
  width: 62px;
  height: 62px;
  top: 212px;
  border: 15px solid #02141e;
  border-radius: 50%;
  background: #69889a;
}

.wheel-one { left: 105px; }
.wheel-two { left: 240px; }

.machine-plow {
  width: 110px;
  height: 85px;
  left: 292px;
  top: 177px;
  transform: skew(17deg) rotate(4deg);
  border-radius: 0 0 9px 50px;
  background: var(--yellow);
  box-shadow: 0 14px 20px rgba(0,0,0,.18);
}

.snow-bank {
  width: 290px;
  height: 85px;
  right: -100px;
  bottom: 34px;
  border-radius: 90% 0 0 0;
  background: rgba(239, 248, 252, 0.72);
  box-shadow: -20px -8px 45px rgba(255,255,255,.18);
}

.salt-visual {
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.15), transparent 30%),
    #0d3b55;
}

.salt-pile {
  width: 270px;
  height: 180px;
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg, #fff4bf, var(--yellow));
  filter: drop-shadow(0 24px 25px rgba(0,0,0,.25));
}

.salt-visual strong {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 93px;
  transform: translateX(-50%);
  color: var(--navy);
  font-size: 1.2rem;
  letter-spacing: 0.3em;
}

.salt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow-bright);
  box-shadow: 16px 10px var(--yellow-bright), 27px -11px #fff2af, -17px 18px white;
}

.salt-one { left: 19%; top: 21%; }
.salt-two { right: 24%; top: 29%; transform: scale(.75); }
.salt-three { left: 42%; top: 13%; transform: scale(.6); }

.ice-visual {
  background:
    linear-gradient(145deg, rgba(153, 209, 236, .32), transparent 45%),
    #0a344c;
}

.ice-line {
  height: 5px;
  border-radius: 50%;
  background: rgba(205, 238, 250, 0.75);
  box-shadow: 0 0 22px rgba(202, 241, 255, 0.35);
}

.line-one { width: 230px; left: 80px; top: 118px; transform: rotate(-17deg); }
.line-two { width: 180px; left: 178px; top: 220px; transform: rotate(18deg); }
.line-three { width: 140px; left: 52px; top: 258px; transform: rotate(7deg); }

.safe-path {
  right: 35px;
  bottom: 30px;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy-deep);
  font-size: .76rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .07em;
}

.process-section {
  background: white;
}

.process-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 100px;
}

.process-intro {
  position: sticky;
  top: 135px;
  align-self: start;
}

.process-intro > p:not(.eyebrow) {
  margin: 24px 0;
  color: var(--muted);
  line-height: 1.75;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-weight: 900;
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 4px;
}

.process-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
  border-top: 1px solid var(--line);
}

.process-list li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  padding: 33px 10px;
  border-bottom: 1px solid var(--line);
}

.process-list li > span {
  color: var(--yellow);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.process-list h3 {
  margin: 0 0 9px;
  font-size: 1.25rem;
}

.process-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.plan-section {
  background: var(--blue-mist);
}

.plan-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 30px;
}

.plan-card,
.weather-card {
  min-height: 550px;
  padding: 55px;
  border-radius: 14px;
}

.plan-card {
  color: white;
  background: var(--navy);
}

.plan-card > p:not(.eyebrow) {
  max-width: 570px;
  margin: 22px 0;
  color: #bdd1dd;
  line-height: 1.7;
}

.plan-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.13);
  list-style: none;
}

.plan-list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
  padding: 18px 12px 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.13);
  font-size: .88rem;
  line-height: 1.4;
}

.plan-list li:nth-child(odd) {
  border-right: 1px solid rgba(255,255,255,.13);
}

.plan-list li:nth-child(even) {
  padding-left: 18px;
}

.weather-card {
  color: var(--navy);
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.9), transparent 25%),
    linear-gradient(150deg, #daeaf2, #a6c9d9);
}

.temperature {
  display: grid;
}

.temperature small {
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .17em;
}

.temperature strong {
  margin-top: 5px;
  font-size: 6.2rem;
  line-height: 1;
  letter-spacing: -.08em;
}

.temperature span {
  color: #365d72;
  font-weight: 800;
}

.weather-timeline {
  display: grid;
  gap: 10px;
  margin-top: 40px;
}

.weather-timeline > div {
  display: grid;
  grid-template-columns: 66px 1fr;
  align-items: center;
  padding: 13px 15px;
  border-radius: 8px;
  background: rgba(255,255,255,.5);
}

.weather-timeline span {
  color: #57778a;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.weather-timeline p {
  margin: 0;
  font-size: .84rem;
  font-weight: 800;
}

.weather-note {
  margin: 25px 0 0;
  color: #45697c;
  font-size: .78rem;
  line-height: 1.5;
}

.rules-section {
  padding: 100px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #f5f8fa;
}

.rules-shell {
  display: grid;
  gap: 34px;
}

.rules-heading {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 100px;
  align-items: end;
}

.rules-lead {
  max-width: 690px;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.75;
}

.rules-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--line);
}

.rules-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px;
  color: var(--navy);
  background: white;
  font-size: .88rem;
  font-weight: 850;
  transition: color .2s ease, background .2s ease;
}

.rules-nav a:hover {
  color: var(--navy-deep);
  background: #fff7dc;
}

.rules-nav span {
  color: #a66d00;
  font-size: .7rem;
  letter-spacing: .08em;
}

.rules-main-rule {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 54px;
  padding: 44px 48px;
  border-radius: 16px;
  color: white;
  background:
    radial-gradient(circle at 92% 10%, rgba(255,190,22,.14), transparent 28%),
    var(--navy-deep);
}

.rules-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--yellow);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.rules-main-copy h3,
.rules-consequences h3 {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.rules-main-copy p {
  margin: 20px 0 0;
  color: rgba(255,255,255,.77);
  line-height: 1.72;
}

.rules-fact-check {
  padding: 25px 28px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  background: rgba(255,255,255,.07);
}

.rules-fact-check strong {
  display: block;
  margin-bottom: 13px;
  font-size: 1rem;
}

.rules-fact-check p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: .88rem;
  line-height: 1.65;
}

.rules-fact-check p + p {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.rules-articles {
  display: grid;
  gap: 18px;
}

.rules-article {
  padding: 38px 42px 40px;
  scroll-margin-top: 120px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  box-shadow: 0 14px 45px rgba(6,37,58,.045);
}

.rules-article-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 29px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.rules-article-header > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--navy-deep);
  background: var(--yellow);
  font-size: .75rem;
  font-weight: 950;
}

.rules-article-header p {
  margin: 1px 0 5px;
  color: #946100;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.rules-article-header h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.16;
  letter-spacing: -.03em;
}

.rules-article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 54px;
  align-items: start;
}

.rules-article h4 {
  margin: 0 0 18px;
  color: var(--navy);
  font-size: .95rem;
}

.rules-list {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rules-list li {
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.62;
}

.rules-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .6em;
  width: 8px;
  height: 8px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 1px #d39a00;
}

.rules-explanation {
  display: grid;
  gap: 15px;
}

.rules-explanation p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.68;
}

.rules-note {
  padding: 24px 25px;
  border-left: 4px solid var(--yellow);
  border-radius: 4px 10px 10px 4px;
  background: #edf5f8;
}

.rules-note strong {
  display: block;
  margin-bottom: 10px;
  color: var(--navy);
  font-size: .9rem;
}

.rules-note p {
  margin: 0;
  color: #45697c;
  font-size: .84rem;
  line-height: 1.65;
}

.rules-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rules-steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: start;
}

.rules-steps span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #c8dbe4;
  border-radius: 8px;
  color: var(--navy);
  background: #f7fafb;
  font-size: .72rem;
  font-weight: 900;
}

.rules-steps p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.58;
}

.insurance-panel {
  padding: 42px 44px;
  border: 1px solid #ead38f;
  border-radius: 15px;
  background: #fff8e3;
}

.insurance-heading {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  column-gap: 70px;
  align-items: end;
  margin-bottom: 30px;
}

.insurance-heading .eyebrow {
  grid-column: 1 / -1;
}

.insurance-heading h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.55rem, 2.8vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}

.insurance-heading > p:last-child {
  margin: 0;
  color: #665a3d;
  font-size: .91rem;
  line-height: 1.65;
}

.insurance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #e4ca7c;
}

.insurance-grid > div {
  padding: 25px 25px 0 0;
}

.insurance-grid > div + div {
  padding-left: 25px;
  border-left: 1px solid #e4ca7c;
}

.insurance-grid span {
  display: block;
  margin-bottom: 14px;
  color: #996600;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.insurance-grid strong {
  display: block;
  color: var(--navy);
  font-size: .92rem;
}

.insurance-grid p {
  margin: 10px 0 0;
  color: #665a3d;
  font-size: .82rem;
  line-height: 1.62;
}

.rules-consequences {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px;
  padding: 40px 44px;
  border-radius: 14px;
  color: white;
  background: var(--navy);
}

.rules-consequences ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rules-consequences li {
  position: relative;
  padding-left: 22px;
  color: rgba(255,255,255,.8);
  font-size: .87rem;
  line-height: 1.55;
}

.rules-consequences li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
}

.rules-sources {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 70px;
  padding: 29px 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}

.rules-sources strong {
  color: var(--navy);
}

.rules-sources p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.58;
}

.rules-source-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}

.rules-source-links a {
  color: var(--navy);
  font-size: .76rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: #d7a413;
  text-underline-offset: 3px;
}

.area-section {
  overflow: hidden;
  color: white;
  background: var(--navy-deep);
}

.area-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 90px;
  align-items: center;
}

.area-map {
  position: relative;
  height: 520px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50% 50% 12px 12px;
  background:
    linear-gradient(31deg, transparent 43%, rgba(255,255,255,.1) 44%, transparent 45%),
    linear-gradient(-42deg, transparent 55%, rgba(255,255,255,.08) 56%, transparent 57%),
    radial-gradient(circle at center, #0b405e, #06263a);
}

.map-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,195,28,.29);
  border-radius: 50%;
}

.ring-large { width: 420px; height: 420px; }
.ring-medium { width: 290px; height: 290px; }
.ring-small { width: 155px; height: 155px; }

.map-pin {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--yellow);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.map-pin span {
  width: 58px;
  height: 58px;
  border: 15px solid var(--yellow);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--navy);
  box-shadow: 0 0 0 10px rgba(255,195,28,.11);
}

.map-route {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--yellow));
  transform-origin: right;
}

.route-one { width: 190px; left: 30px; top: 150px; transform: rotate(26deg); }
.route-two { width: 170px; right: 45px; bottom: 130px; transform: rotate(32deg); }

.area-copy > p:not(.eyebrow) {
  margin: 24px 0;
  color: #b5cbd7;
  line-height: 1.72;
}

.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 28px 0 33px;
}

.area-tags span {
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 99px;
  color: #dcebf3;
  font-size: .78rem;
  font-weight: 700;
}

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

.faq-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 100px;
}

.faq-intro > p:not(.eyebrow) {
  margin: 23px 0 30px;
  color: var(--muted);
  line-height: 1.72;
}

.faq-list {
  border-top: 1px solid #cbd9e1;
}

.faq-list details {
  border-bottom: 1px solid #cbd9e1;
}

.faq-list summary {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 900;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list details p {
  max-width: 670px;
  margin: -3px 0 25px;
  padding-right: 50px;
  color: var(--muted);
  line-height: 1.7;
}

.final-cta {
  position: relative;
  overflow: hidden;
  padding: 74px 0;
  color: white;
  background: var(--navy);
}

.final-cta::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -150px;
  width: 390px;
  height: 390px;
  border: 75px solid rgba(255,195,28,.14);
  border-radius: 50%;
}

.final-cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
}

.final-cta h2 {
  max-width: 750px;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}

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

.final-phone {
  display: grid;
  gap: 4px;
}

.final-phone small {
  color: #a8c0cd;
  font-size: .7rem;
}

.final-phone strong {
  font-size: 1.35rem;
}

.site-footer {
  padding: 70px 0 23px;
  color: #b8ccd7;
  background: #02131d;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr .7fr .9fr 1fr;
  gap: 60px;
  padding-bottom: 58px;
}

.footer-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-brand p {
  max-width: 300px;
  margin: 8px 0 0;
  line-height: 1.65;
}

.footer-logo-crop {
  position: relative;
  display: block;
  width: 245px;
  height: 90px;
  overflow: hidden;
  border-radius: 6px;
  background: white;
}

.footer-logo-crop img {
  position: absolute;
  width: 245px;
  max-width: none;
  left: 0;
  top: -52px;
}

.footer-grid h3 {
  margin: 9px 0 10px;
  color: white;
  font-size: .9rem;
}

.footer-grid a,
.footer-grid p {
  margin: 0;
  color: #9fb6c2;
  font-size: .82rem;
  line-height: 1.6;
}

.footer-grid a:hover {
  color: var(--yellow);
}

.footer-grid .footer-cta {
  margin-top: 8px;
  color: var(--yellow);
  font-weight: 900;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 21px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: #6f8a98;
  font-size: .72rem;
}

@media (max-width: 1080px) {
  .main-nav {
    gap: 18px;
    font-size: .82rem;
  }

  .hero-grid {
    grid-template-columns: .95fr 1.05fr;
    gap: 38px;
  }

  .hero h1 {
    font-size: clamp(3rem, 5.8vw, 4.5rem);
  }

  .audience-card {
    padding: 33px 24px 28px;
  }

  .service-copy {
    padding: 45px 40px;
  }

  .process-grid,
  .faq-grid {
    gap: 60px;
  }

  .final-cta-inner {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .footer-grid > div:last-child {
    grid-column: 2 / 4;
  }
}

@media (max-width: 860px) {
  .topbar-inner > span {
    display: none;
  }

  .topbar-inner {
    justify-content: center;
  }

  .site-header {
    top: 0;
  }

  .nav-wrap {
    min-height: 75px;
  }

  .menu-toggle {
    display: flex;
  }

  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 10px 20px 22px;
    background: white;
    border-top: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(6,37,58,.12);
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav > a:not(.nav-call) {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  .main-nav > a:not(.nav-call)::after {
    display: none;
  }

  .nav-call {
    margin-top: 14px;
    text-align: center;
  }

  .hero {
    padding: 56px 0 70px;
  }

  .hero-grid,
  .split-heading,
  .process-grid,
  .area-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    gap: 45px;
  }

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

  .hero h1 {
    max-width: 760px;
  }

  .quote-card {
    max-width: 650px;
  }

  .trust-grid {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .weather-current {
    grid-template-columns: 44px auto minmax(90px, 1fr) minmax(82px, .66fr) minmax(78px, .62fr);
    min-height: 64px;
    padding: 6px 8px;
  }

  .weather-current > .weather-icon {
    width: 38px;
    height: 38px;
  }

  .weather-current-condition {
    margin-left: 6px;
    padding-left: 8px;
    font-size: .8rem;
  }

  .weather-current-stat {
    gap: 5px;
    padding-left: 8px;
    border-left: 1px solid #d5e6ef;
  }

  .weather-current-stat:nth-of-type(1) {
    grid-column: auto;
  }

  .weather-current-stat:nth-of-type(2) {
    border-left: 1px solid #d5e6ef;
  }

  .weather-periods {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }

  .weather-period {
    min-height: 88px;
    padding: 6px 3px 5px;
  }

  .weather-period .weather-icon {
    width: 30px;
    height: 30px;
  }

  .weather-period-temperature {
    font-size: 1.05rem;
  }

  .weather-period-time,
  .weather-period-rain {
    font-size: .6rem;
  }

  .split-heading,
  .process-grid,
  .area-grid,
  .faq-grid {
    gap: 44px;
  }

  .rules-heading,
  .rules-main-rule,
  .insurance-heading,
  .rules-consequences,
  .rules-sources {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .rules-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rules-main-rule {
    padding: 38px 36px;
  }

  .rules-article-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .insurance-heading .eyebrow {
    grid-column: auto;
  }

  .rules-consequences {
    padding: 36px;
  }

  .audience-grid {
    grid-template-columns: 1fr;
  }

  .audience-card {
    min-height: auto;
  }

  .audience-card > p {
    min-height: auto;
  }

  .service-row,
  .service-row.reversed {
    grid-template-columns: 1fr;
  }

  .service-row.reversed .service-visual {
    order: 0;
  }

  .service-visual {
    min-height: 330px;
  }

  .process-intro {
    position: static;
  }

  .plan-grid {
    grid-template-columns: 1fr;
  }

  .plan-card,
  .weather-card {
    min-height: auto;
  }

  .area-map {
    max-width: 590px;
    width: 100%;
    margin: 0 auto;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid > div:last-child {
    grid-column: auto;
  }
}

@media (max-width: 580px) {
  .shell {
    width: min(100% - 28px, 1180px);
  }

  .topbar {
    display: none;
  }

  .brand,
  .brand-crop {
    width: 205px;
    height: 69px;
  }

  .brand-crop img {
    width: 205px;
    left: 0;
    top: -44px;
  }

  .hero {
    padding-top: 45px;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }

  .hero-lead {
    font-size: .98rem;
  }

  .hero-actions,
  .final-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-services {
    gap: 10px 15px;
  }

  .quote-card {
    padding: 25px 20px;
    margin-left: -2px;
    margin-right: -2px;
  }

  .quote-heading h2 {
    font-size: 1.55rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .trust-grid {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .weather-trust-item {
    gap: 7px;
  }

  .weather-title strong {
    font-size: 1rem;
  }

  .weather-title small {
    font-size: .72rem;
  }

  .weather-current {
    grid-template-columns: 42px auto minmax(0, 1fr);
    gap: 5px;
    padding: 7px;
  }

  .weather-current > .weather-icon {
    width: 36px;
    height: 36px;
  }

  .weather-current-temperature {
    font-size: 2.15rem;
  }

  .weather-current-condition {
    grid-column: auto;
    min-height: 32px;
    margin-left: 4px;
    padding-top: 0;
    padding-left: 6px;
    border-top: 0;
    border-left: 1px solid #d5e6ef;
    font-size: .78rem;
  }

  .weather-current-stat:nth-of-type(1),
  .weather-current-stat:nth-of-type(2) {
    min-width: 0;
    gap: 5px;
    padding: 6px 0 0;
    border-top: 1px solid #d5e6ef;
    border-left: 0;
  }

  .weather-current-stat:nth-of-type(1) {
    grid-column: 1 / 3;
  }

  .weather-current-stat:nth-of-type(2) {
    grid-column: 3;
    padding-left: 6px;
    border-left: 1px solid #d5e6ef;
  }

  .weather-current-stat > svg {
    width: 18px;
    height: 21px;
  }

  .weather-current-stat small {
    font-size: .62rem;
  }

  .weather-current-stat strong {
    font-size: .72rem;
  }

  .weather-periods {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 12px) / 3);
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .weather-periods::-webkit-scrollbar {
    display: none;
  }

  .weather-period {
    min-height: 84px;
    padding: 6px 3px 5px;
    scroll-snap-align: start;
  }

  .weather-period .weather-icon {
    width: 28px;
    height: 28px;
  }

  .weather-period-temperature {
    font-size: 1rem;
  }

  .weather-period-time,
  .weather-period-rain {
    font-size: .59rem;
  }

  .frost-risk-icon {
    top: 4px;
    right: 3px;
    width: 14px;
    height: 14px;
  }

  .section {
    padding: 80px 0;
  }

  .section-heading h2,
  .process-intro h2,
  .plan-card h2,
  .rules-heading h2,
  .area-copy h2,
  .faq-intro h2,
  .final-cta h2 {
    font-size: clamp(2.1rem, 10vw, 3rem);
  }

  .rules-section {
    padding: 70px 0;
  }

  .rules-shell {
    gap: 24px;
  }

  .rules-heading {
    gap: 18px;
  }

  .rules-lead {
    font-size: .94rem;
    line-height: 1.66;
  }

  .rules-nav a {
    gap: 8px;
    padding: 14px 11px;
    font-size: .75rem;
  }

  .rules-main-rule {
    gap: 23px;
    padding: 28px 22px;
  }

  .rules-main-copy h3,
  .rules-consequences h3 {
    font-size: 1.62rem;
  }

  .rules-main-copy p {
    margin-top: 14px;
    font-size: .88rem;
  }

  .rules-fact-check {
    padding: 20px;
  }

  .rules-article {
    padding: 27px 20px 28px;
  }

  .rules-article-header {
    gap: 14px;
    margin-bottom: 23px;
    padding-bottom: 20px;
  }

  .rules-article-header > span {
    width: 39px;
    height: 39px;
  }

  .rules-article-header h3 {
    font-size: 1.3rem;
  }

  .rules-list li,
  .rules-steps p {
    font-size: .85rem;
  }

  .rules-note {
    padding: 20px;
  }

  .insurance-panel {
    padding: 29px 21px;
  }

  .insurance-heading {
    gap: 16px;
    margin-bottom: 22px;
  }

  .insurance-grid {
    grid-template-columns: 1fr;
  }

  .insurance-grid > div {
    padding: 20px 0;
  }

  .insurance-grid > div + div {
    padding-left: 0;
    border-top: 1px solid #e4ca7c;
    border-left: 0;
  }

  .rules-consequences {
    gap: 23px;
    padding: 29px 22px;
  }

  .rules-sources {
    gap: 22px;
    padding: 24px 20px;
  }

  .rules-source-links {
    grid-template-columns: 1fr;
  }

  .audience-card {
    padding: 32px 23px 28px;
  }

  .service-copy {
    padding: 38px 24px;
  }

  .service-visual {
    min-height: 285px;
  }

  .machine-body {
    left: 35px;
    top: 125px;
    transform: scale(.82);
    transform-origin: left center;
  }

  .machine-cabin {
    left: 55px;
    top: 65px;
    transform: skew(-8deg) scale(.82);
    transform-origin: left bottom;
  }

  .machine-wheel {
    top: 172px;
    transform: scale(.82);
  }

  .wheel-one { left: 54px; }
  .wheel-two { left: 165px; }
  .machine-plow { left: 218px; top: 144px; transform: skew(17deg) rotate(4deg) scale(.82); }

  .salt-pile {
    width: 220px;
    height: 150px;
  }

  .line-one { left: 35px; }
  .line-two { left: 100px; }
  .safe-path { width: 90px; height: 90px; }

  .process-list li {
    grid-template-columns: 55px 1fr;
    gap: 12px;
    padding: 27px 0;
  }

  .plan-card,
  .weather-card {
    padding: 34px 24px;
  }

  .plan-list {
    grid-template-columns: 1fr;
  }

  .plan-list li:nth-child(odd) {
    border-right: 0;
  }

  .plan-list li:nth-child(even) {
    padding-left: 0;
  }

  .temperature strong {
    font-size: 5rem;
  }

  .area-map {
    height: 360px;
  }

  .ring-large { width: 310px; height: 310px; }
  .ring-medium { width: 210px; height: 210px; }
  .ring-small { width: 115px; height: 115px; }

  .route-one,
  .route-two {
    display: none;
  }

  .final-cta {
    padding: 60px 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5}
.site-header{background:#fff;backdrop-filter:none;border-bottom:1px solid #d9e3e9}
.brand,.brand-crop{width:235px;height:78px}.brand-crop img{width:235px;top:-15px}
.hero{background:linear-gradient(90deg,rgba(2,26,41,.95),rgba(2,28,42,.7)),url('assets/drain-service.png') center/cover no-repeat;padding:68px 0 74px;min-height:720px}
.hero h1{font-weight:500;font-size:clamp(3rem,5vw,4.6rem)}.hero::after{display:none}
.quote-card{background:#fff}.quote-heading h2{font-weight:500}.quote-form select{width:100%;padding:12px 13px;border:1px solid #cfdae0;border-radius:6px;background:#fafdff;color:var(--ink);font:inherit}
.hero-services span::before{background:var(--yellow);box-shadow:none}
.form-status[hidden]{display:none}.section h2{font-weight:500}.audience-card{min-height:330px}.audience-card h3{margin:22px 0 14px;font-size:1.65rem}.audience-card p{color:var(--muted)}
.service-visual{display:flex;align-items:center;justify-content:center}.service-visual svg{width:88%;max-width:430px;position:relative}.visual-label{position:absolute;bottom:20px;left:25px;font-size:11px;letter-spacing:2px;color:#adc9d8}
.extra-services{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}.extra-services article{padding:28px;border:1px solid #315063;border-radius:10px}.extra-services p{color:#b9ced9;margin-bottom:0}.extra-services h3{margin:0;font-size:1.35rem}
.dan-process{display:grid;grid-template-columns:1fr 1fr;gap:90px}.steps{margin:0;padding:0;list-style:none;counter-reset:steps}.steps li{border-top:1px solid var(--line);padding:22px 0 22px 50px;position:relative;counter-increment:steps}.steps li:before{content:'0' counter(steps);position:absolute;left:0;top:24px;color:#8598a5;font-weight:bold}.steps h3{margin:0 0 6px}.steps p{margin:0;color:var(--muted)}
.problem-band{background:var(--blue-pale)}.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.symptoms{list-style:none;padding:0;margin:0}.symptoms li{padding:17px 0;border-bottom:1px solid var(--line);display:flex;gap:20px}.symptoms strong{color:var(--navy);min-width:150px}.symptoms span{color:var(--muted)}
.areas{background:var(--navy);color:white}.area-pills{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0}.area-pills span{padding:10px 17px;border:1px solid #466074;border-radius:100px}.area-copy>p{color:#bad0dc;max-width:730px}.areas a{margin-top:14px}
.dan-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.dan-faq details{border-bottom:1px solid var(--line);padding:22px 0}.dan-faq summary{cursor:pointer;font-weight:bold;list-style:none;display:flex;justify-content:space-between;gap:20px}.dan-faq summary:after{content:'+';color:#728896}.dan-faq details[open] summary:after{content:'−'}.dan-faq details p{color:var(--muted);margin:14px 0 0;line-height:1.7}.faq-intro>p{color:var(--muted)}
.dan-footer{background:var(--navy-deep);color:#b9ced9;padding:55px 0 25px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:55px}.footer-logo{background:white;border-radius:5px;width:240px;height:85px;object-fit:cover}.dan-footer h3{color:white;margin-top:0}.dan-footer a{display:block;margin:8px 0}.footer-bottom{border-top:1px solid #28414e;margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;font-size:12px}.footer-bottom a{display:inline}
.mobile-contact{display:none}.skip-link{position:fixed;top:-100px;z-index:100;background:white;padding:12px}.skip-link:focus{top:5px}
@media(max-width:1000px){.hero-grid{gap:35px;grid-template-columns:1fr 1fr}.main-nav{gap:15px;font-size:12px}.brand,.brand-crop{width:210px}.brand-crop img{width:210px;top:-11px}.quote-card{padding:24px}.dan-process,.dan-faq,.problem-grid{gap:40px}.service-copy{padding:35px}}
@media(max-width:760px){html{scroll-padding-top:85px}.topbar-inner{min-height:32px}.topbar-links a:first-child{display:none}.site-header .nav-wrap{min-height:76px}.brand,.brand-crop{height:68px;width:215px}.brand-crop img{width:215px;top:-14px}.menu-toggle{display:flex}.main-nav{display:none;position:absolute;top:76px;left:0;right:0;background:white;padding:20px;box-shadow:0 10px 20px #06253a15;font-size:16px}.main-nav.is-open{display:flex;flex-direction:column;align-items:stretch}.main-nav>a:not(.nav-call){padding:8px}.hero{padding:40px 0 45px;min-height:0;background-position:65% center}.hero-grid{grid-template-columns:1fr;gap:24px}.hero-copy{padding:10px 0}.hero h1{font-size:3.2rem;max-width:520px}.hero-lead{margin-top:20px}.hero-actions{margin-top:24px}.hero-services{gap:13px;margin-top:25px}.section{padding:65px 0}.split-heading,.dan-process,.problem-grid,.dan-faq,.footer-grid{grid-template-columns:1fr;gap:30px}.split-heading{margin-bottom:30px}.audience-grid{grid-template-columns:1fr}.audience-card{min-height:0;padding:26px}.audience-card>a{margin-top:18px}.service-row,.service-row.reversed{grid-template-columns:1fr}.service-row.reversed .service-visual{order:0}.service-visual{min-height:230px}.service-copy{padding:30px}.extra-services{grid-template-columns:1fr}.symptoms li{flex-direction:column;gap:4px}.footer-grid{gap:28px}.footer-bottom{flex-direction:column;gap:10px}.quote-card{padding:24px}.form-row{grid-template-columns:1fr 1fr}.area-pills span{padding:8px 12px}.mobile-contact{display:flex;position:fixed;bottom:14px;right:15px;z-index:50;background:var(--yellow);border-radius:50px;padding:13px 21px;font-weight:bold;color:var(--navy-deep);box-shadow:0 8px 25px #03192544}.dan-footer{padding-bottom:85px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
/* Keep all lettering in the supplied logo visible. */
.brand-crop img{top:-22px}
@media(max-width:760px){.brand-crop img{top:-22px}}
.form-row{align-items:end}