/* Big Bend Services — production stylesheet.
 *
 * Every value here is lifted from the Claude Design prototype
 * ("Big Bend Services Website.dc.html"), which expressed all styling as inline
 * attributes. The prototype's `style-hover` / `style-focus` attributes are a
 * design-tool convention; they become real :hover / :focus-visible rules here. */

/* ---------------------------------------------------------------- tokens */
:root {
  --navy:        #0C3A5E;
  --navy-deep:   #0A2E4A;
  --blue:        #0F6FBF;
  --ink:         #12232E;
  --muted:       #4A5A66;
  --border:      #E5EDF3;
  --border-soft: #F0F5F9;
  --field:       #D8E4EE;
  --pale:        #E8F1FA;
  --soft:        #F5F8FB;
  --white:       #FFFFFF;
  --rule:        #9FB3C2;
  --sky:         #9FC8EA;
  --sky-mid:     #7FB6E4;
  --error:       #A32020;
  --error-bg:    #FDECEC;
  --error-line:  #F3C9C9;

  --head: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: Mulish, system-ui, -apple-system, "Segoe UI", sans-serif;

  --shell: 1200px;
  --gutter: 24px;
}

/* ---------------------------------------------------------------- reset */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--soft);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); }
a:hover { color: var(--navy); }

img { max-width: 100%; }

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

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- layout */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.shell--narrow { max-width: 1100px; }
.shell--prose  { max-width: 760px; }
.shell--faq    { max-width: 820px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font: 600 15px var(--head);
  text-decoration: none;
}
.skip:focus { left: 0; color: #fff; }

main { display: block; outline: none; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  font: 600 16px var(--head);
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--navy); color: #fff; }

.btn--secondary {
  background: #fff;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  padding: 0 26px;
}
.btn--secondary:hover { background: var(--pale); color: var(--blue); }

.btn--on-blue { background: #fff; color: var(--blue); }
.btn--on-blue:hover { background: var(--pale); color: var(--blue); }

.btn--ghost-light {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.75);
  color: #fff;
  padding: 0 26px;
}
.btn--ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }

.btn--sm { min-height: 48px; padding: 0 24px; font-size: 15.5px; }
.btn--block { width: 100%; min-height: 52px; font-size: 16.5px; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  background: var(--navy-deep);
  color: rgba(255,255,255,.82);
}
.topbar__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 9px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 18px;
  font: 500 13.5px/1.4 var(--body);
  white-space: nowrap;
}
.topbar__phone { display: flex; align-items: center; gap: 8px; }
.topbar__label { color: rgba(255,255,255,.6); }
.topbar__number { color: #fff; font-weight: 700; text-decoration: none; }
.topbar__number:hover { color: #fff; }

@media (max-width: 1023px) {
  .topbar__label { display: none; }
}

/* ---------------------------------------------------------------- header */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(12,58,94,.06);
}
.header__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.logo__name {
  font: 700 19px var(--head);
  color: var(--navy);
  letter-spacing: -.015em;
}
.logo__sub {
  font: 600 10.5px var(--head);
  color: var(--blue);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.logo--light .logo__name { color: #fff; font-size: 17px; }
.logo--light .logo__sub { color: var(--sky); font-size: 10px; }

/* ---------------------------------------------------------------- nav */
.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  padding: 10px 12px;
  font: 600 15px var(--head);
  color: var(--ink);
  text-decoration: none;
  border-radius: 6px;
}
.nav__link:hover { color: var(--blue); }
.nav__link[aria-current="page"] { color: var(--blue); }

.nav__cta { margin-left: 10px; min-height: 46px; padding: 0 22px; font-size: 15px; }

.drop { position: relative; }
.drop__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font: 600 15px var(--head);
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: 6px;
}
.drop__btn:hover { color: var(--blue); }
.drop__panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(10,46,74,.14);
  padding: 10px;
  display: none;
  flex-direction: column;
}
.drop__panel--wide { min-width: 308px; }
.drop[data-open="true"] .drop__panel { display: flex; }
.drop__item {
  padding: 10px 12px;
  border-radius: 8px;
  font: 500 15px var(--body);
  color: var(--ink);
  text-decoration: none;
}
.drop__item:hover { background: var(--pale); color: var(--ink); }
.drop__all {
  margin-top: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  font: 600 14px var(--head);
  color: var(--blue);
  text-decoration: none;
}

/* ---------------------------------------------------------------- mobile nav */
.header__mobile { display: none; align-items: center; gap: 10px; }
.header__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: 600 15px var(--head);
  text-decoration: none;
}
.header__call:hover { color: #fff; }
.burger {
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--navy); }

.mnav {
  display: none;
  border-top: 1px solid var(--border);
  background: #fff;
  padding: 12px var(--gutter) 22px;
  flex-direction: column;
  gap: 2px;
  max-height: 72vh;
  overflow: auto;
}
.mnav[data-open="true"] { display: flex; }
.mnav__link {
  padding: 14px 4px;
  font: 600 16px var(--head);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
}
.mnav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  font: 600 16px var(--head);
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.mnav__toggle span { color: var(--blue); font-size: 20px; }
.mnav__panel {
  display: none;
  flex-direction: column;
  padding: 4px 0 10px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.mnav__panel[data-open="true"] { display: flex; }
.mnav__sub {
  padding: 12px 4px;
  font: 500 15px var(--body);
  color: var(--muted);
  text-decoration: none;
}
.mnav__all {
  padding: 12px 4px;
  font: 600 15px var(--head);
  color: var(--blue);
  text-decoration: none;
}
.mnav__cta {
  margin-top: 14px;
  min-height: 50px;
  font-size: 16px;
}

@media (max-width: 1023px) {
  .nav { display: none; }
  .header__mobile { display: flex; }
}

/* ---------------------------------------------------------------- ribbon */
.ribbon {
  background: #FDF3E2;
  border-bottom: 1px solid #F0DCB8;
  color: #7A5416;
  font: 600 13.5px var(--head);
  padding: 10px var(--gutter);
  text-align: center;
}

/* ---------------------------------------------------------------- crumbs */
.crumbs {
  padding: 16px 0 0;
  font: 500 13.5px var(--body);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs a { color: var(--blue); text-decoration: none; }
.crumbs__sep { color: var(--rule); }

/* ---------------------------------------------------------------- hero */
.hero {
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.hero__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: stretch;
  padding: 56px 0 64px;
}
.kicker {
  margin: 0;
  font: 600 13px var(--head);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}
.hero__h1 {
  margin: 14px 0 0;
  font: 700 clamp(31px, 4vw, 50px)/1.14 var(--head);
  color: var(--navy);
  letter-spacing: -.02em;
  text-wrap: pretty;
}
.hero__lead {
  margin: 20px 0 0;
  font: 400 clamp(16px, 1.2vw, 18px)/1.68 var(--body);
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* ---------------------------------------------------------------- media */
/* The box a picture sits in. Its size comes from the component class
 * (.media--hero, --split, --form, --card, --band, --banner); see the image
 * layout system at the end of this file. */
.media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--navy);
  min-width: 0;
  max-width: 100%;
}
.media--banner { aspect-ratio: 21/9; }
.media--card { aspect-ratio: 16/10; background: var(--pale); border-radius: 0; }

.media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background: linear-gradient(160deg, #10456F 0%, #0C3A5E 60%, #0A2E4A 100%);
}
.media--card .media__placeholder {
  background: linear-gradient(160deg, #DCEAF7 0%, #E8F1FA 100%);
}
.media__placeholder-text {
  font: 500 13.5px/1.5 var(--body);
  color: rgba(255,255,255,.62);
  text-wrap: pretty;
}
.media--card .media__placeholder-text { color: #5B7B95; }

.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(12,58,94,0) 55%, rgba(10,46,74,.28) 100%);
}

/* ---------------------------------------------------------------- sections */
.section { padding: 74px 0; }
.section--white { background: var(--white); }
.section--pale  { background: var(--pale); }
.section--soft  { background: var(--soft); }
.section--blue  { background: var(--blue); }

.section__head { max-width: 70ch; }
.section__head--prose { max-width: 74ch; }

.h2 {
  margin: 12px 0 0;
  font: 700 clamp(25px, 2.7vw, 34px)/1.22 var(--head);
  color: var(--navy);
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.h2--flush { margin-top: 0; }
.section__sub {
  margin: 14px 0 0;
  font: 400 17px/1.7 var(--body);
  color: var(--muted);
  text-wrap: pretty;
}
.prose-p {
  margin: 18px 0 0;
  font: 400 17.5px/1.72 var(--body);
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
  gap: 24px;
  margin-top: 38px;
}
.grid--tight { gap: 20px; margin-top: 36px; }
.grid--steps {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 22px;
  margin-top: 36px;
}
.grid--links {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  margin-top: 32px;
}

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(12,58,94,.05);
}
.card:hover {
  border-color: var(--blue);
  box-shadow: 0 12px 28px rgba(10,46,74,.10);
}
.card__media { position: relative; }
.card__body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.card__title {
  margin: 0;
  font: 600 18.5px/1.3 var(--head);
  color: var(--navy);
  text-wrap: pretty;
}
.card__text {
  margin: 0;
  font: 400 15.5px/1.62 var(--body);
  color: var(--muted);
  flex: 1;
  text-wrap: pretty;
}
/* The repeating section CTA pair. Wraps to one button per line on a phone. */
.sectioncta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* The card is itself the link, so this is a span, not a button element. It
   carries the button's look only; the click target is the whole card. */
.card__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: 600 14.5px var(--head);
  white-space: nowrap;
}

.tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 22px;
}
.tile__title {
  margin: 0;
  font: 600 17.5px/1.32 var(--head);
  color: var(--navy);
  text-wrap: pretty;
}
.tile__text {
  margin: 10px 0 0;
  font: 400 15.5px/1.65 var(--body);
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- split */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: stretch;
}
.split__text--flip { order: 2; }
.split__media--flip { order: 1; }
.split p {
  margin: 16px 0 0;
  font: 400 17px/1.72 var(--body);
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- ticks */
.ticks {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ticks li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font: 400 16px/1.55 var(--body);
  color: var(--ink);
}
.ticks svg { flex-shrink: 0; margin-top: 3px; }

/* ---------------------------------------------------------------- spec list */
.spec {
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.spec > div { background: #fff; padding: 20px 22px; }
.spec dt {
  font: 600 14px var(--head);
  color: var(--blue);
  letter-spacing: .02em;
}
.spec dd {
  margin: 8px 0 0;
  font: 400 16px/1.6 var(--body);
  color: var(--ink);
}
.spec__note {
  margin: 16px 0 0;
  font: 400 14.5px/1.6 var(--body);
  color: var(--muted);
}

/* ---------------------------------------------------------------- process */
.steps {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 22px;
}
.step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 24px;
}
.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pale);
  color: var(--blue);
  font: 700 17px var(--head);
}
.step__title {
  margin: 16px 0 0;
  font: 600 18px/1.3 var(--head);
  color: var(--navy);
}
.step__text {
  margin: 9px 0 0;
  font: 400 15.5px/1.65 var(--body);
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- coverage */
.arealink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: 600 15.5px var(--head);
  color: var(--navy);
  text-decoration: none;
}
.arealink:hover { border-color: var(--blue); color: var(--blue); }
.arealink span { color: var(--blue); }
/* Town tile with its service pages (county hubs). */
.grid--towns {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin-top: 32px;
}
.towntile {
  background: rgba(255,255,255,.9);
  border: 1px solid var(--glass-line, var(--border));
  border-radius: var(--radius-lg, 14px);
  padding: 18px 20px 16px;
}
.towntile__town {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  font: 600 16.5px var(--head);
  color: var(--navy);
  text-decoration: none;
}
.towntile__town span { color: var(--blue); }
.towntile__town:hover { color: var(--blue); }
.towntile__svc {
  list-style: none;
  margin: 8px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 2px;
}
.towntile__svc a {
  display: block;
  padding: 7px 0;
  min-height: 24px;
  font: 500 15px/1.4 var(--body);
  color: var(--muted);
  text-decoration: none;
}
.towntile__svc a:hover,
.towntile__svc a:focus-visible { color: var(--blue); text-decoration: underline; }
.arealink--plain {
  background: rgba(255,255,255,.55);
  border: 1px dashed var(--field);
  font: 500 15.5px var(--body);
  color: var(--muted);
  justify-content: flex-start;
}
.coverage__note {
  margin: 20px 0 0;
  font: 400 15.5px/1.6 var(--body);
  color: var(--muted);
}

/* ---------------------------------------------------------------- faq */
.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 44px;
  align-items: start;
}
.faq__aside {
  margin: 16px 0 0;
  font: 400 16.5px/1.7 var(--body);
  color: var(--muted);
}
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.qa {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  min-height: 56px;
  cursor: pointer;
  font: 600 16.5px/1.4 var(--head);
  color: var(--navy);
}
.qa__mark { color: var(--blue); font-size: 22px; line-height: 1; }
details[open] > .qa__q .qa__mark::before { content: "\2212"; }
details:not([open]) > .qa__q .qa__mark::before { content: "+"; }
.qa__a {
  padding: 0 20px 20px;
  font: 400 16px/1.7 var(--body);
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- form */
.formwrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
  align-items: stretch;
}
.contactblock {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contactblock__phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 700 22px var(--head);
  color: var(--navy);
  text-decoration: none;
}
.contactblock__meta {
  margin: 0;
  font: 400 15.5px/1.6 var(--body);
  color: var(--muted);
}

.form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 2px 6px rgba(12,58,94,.05);
  position: relative;
}
.form--lp {
  padding: 26px;
  box-shadow: 0 10px 30px rgba(10,46,74,.10);
}
.form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 18px;
}
.form__stack { display: flex; flex-direction: column; gap: 16px; }
.field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field label { font: 600 14.5px var(--head); color: var(--navy); }
.field .req { color: var(--error); }
.field .opt { font: 400 13.5px var(--body); color: var(--muted); }
.field input,
.field select,
.field textarea {
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--field);
  border-radius: 9px;
  font: 400 16px var(--body);
  color: var(--ink);
  background: #fff;
}
.field select { padding: 0 12px; }
.field textarea {
  padding: 12px 14px;
  line-height: 1.6;
  resize: vertical;
  min-height: 0;
}
.field__error { font: 600 14px var(--body); color: var(--error); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--error); }

.form__section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.form__section-title {
  margin: 0 0 14px;
  font: 600 14.5px var(--head);
  color: var(--blue);
  letter-spacing: .02em;
}
.form__foot {
  margin: 14px 0 0;
  font: 400 14px/1.6 var(--body);
  color: var(--muted);
}
.form__submit { margin-top: 24px; }

.errorbox {
  margin-bottom: 20px;
  background: var(--error-bg);
  border: 1px solid var(--error-line);
  border-radius: 10px;
  padding: 16px 18px;
}
.errorbox p {
  margin: 0;
  font: 700 15.5px var(--head);
  color: var(--error);
}
.errorbox ul {
  margin: 10px 0 0;
  padding-left: 18px;
  font: 400 15px/1.6 var(--body);
  color: var(--error);
}
.errorbox[hidden] { display: none; }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------- cta band */
.ctaband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.ctaband__h2 {
  margin: 0;
  font: 700 clamp(24px, 2.5vw, 32px)/1.22 var(--head);
  color: #fff;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.ctaband__body {
  margin: 12px 0 0;
  font: 400 17px/1.7 var(--body);
  color: rgba(255,255,255,.9);
  text-wrap: pretty;
}
.ctaband__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- article */
.article-hero { max-width: 800px; padding: 44px 0 40px; }
.article-hero__h1 {
  margin: 14px 0 0;
  font: 700 clamp(30px, 3.6vw, 44px)/1.16 var(--head);
  color: var(--navy);
  letter-spacing: -.02em;
  text-wrap: pretty;
}
.article-hero__lead {
  margin: 20px 0 0;
  font: 400 19px/1.68 var(--body);
  color: var(--ink);
  text-wrap: pretty;
}
.article-hero__meta {
  margin: 22px 0 0;
  font: 500 14px var(--body);
  color: var(--muted);
}
.article-hero__media { margin-bottom: -60px; }

.article-body { padding: 96px 0 74px; }
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 48px;
  align-items: start;
}
.toc {
  position: sticky;
  top: 110px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  max-width: 320px;
}
.toc__title {
  margin: 0 0 12px;
  font: 600 13px var(--head);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
}
.toc nav { display: flex; flex-direction: column; gap: 2px; }
.toc a {
  padding: 8px 0;
  font: 500 15px/1.45 var(--body);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
}
.toc a:hover { color: var(--blue); }

.article { max-width: 74ch; }
.article__section { margin-bottom: 44px; scroll-margin-top: 110px; }
.article__h2 {
  margin: 0;
  font: 700 clamp(23px, 2.3vw, 30px)/1.25 var(--head);
  color: var(--navy);
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.article__section p {
  margin: 16px 0 0;
  font: 400 17.5px/1.75 var(--body);
  color: var(--ink);
  text-wrap: pretty;
}
.article .ticks li { font-size: 16.5px; line-height: 1.6; }
.article .ticks { margin-top: 18px; gap: 9px; }
.article .ticks svg { margin-top: 4px; }

.rows {
  margin: 22px 0 0;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.rows > div {
  background: #fff;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 6px;
}
.rows dt { font: 600 15px var(--head); color: var(--navy); }
.rows dd { margin: 0; font: 400 16px/1.6 var(--body); color: var(--muted); }

.sources {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 36px;
}
.sources h2 { margin: 0 0 14px; font: 600 17px var(--head); color: var(--navy); }
.sources ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font: 400 15.5px/1.6 var(--body);
  color: var(--muted);
}
.sources strong { color: var(--ink); font-weight: 600; }

.related {
  background: var(--blue);
  border-radius: 16px;
  padding: 32px;
}
.related h2 { margin: 0; font: 700 24px/1.25 var(--head); color: #fff; }
.related p {
  margin: 10px 0 0;
  font: 400 16.5px/1.65 var(--body);
  color: rgba(255,255,255,.9);
}
.related__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

@media (max-width: 900px) {
  .article-grid { grid-template-columns: 1fr; }
  .toc { position: static; max-width: none; order: -1; }
}

/* ---------------------------------------------------------------- landing */
.lpbar { background: var(--navy-deep); }
.lpbar__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lpbar__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font: 700 16px var(--head);
  text-decoration: none;
}

.lp__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: stretch;
  padding: 48px 0 56px;
}
.lp__h1 {
  margin: 0;
  font: 700 clamp(30px, 3.6vw, 44px)/1.16 var(--head);
  color: var(--navy);
  letter-spacing: -.02em;
  text-wrap: pretty;
}
.lp__lead {
  margin: 18px 0 0;
  font: 400 18px/1.68 var(--body);
  color: var(--muted);
  max-width: 52ch;
  text-wrap: pretty;
}
.lp__call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: 700 19px var(--head);
  text-decoration: none;
}
.lp__call:hover { color: #fff; }
.lp__hours {
  margin: 14px 0 0;
  font: 500 15px var(--body);
  color: var(--muted);
}
.lp__media { margin-top: 28px; }
.lp__formtitle { margin: 0; font: 700 21px var(--head); color: var(--navy); }
.lp__formsub {
  margin: 8px 0 20px;
  font: 400 15.5px/1.6 var(--body);
  color: var(--muted);
}
.lp__submit { margin-top: 22px; min-height: 54px; font-size: 17px; width: 100%; }
.lp__fineprint {
  margin: 12px 0 0;
  font: 400 13.5px/1.6 var(--body);
  color: var(--muted);
}
.lp__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px;
}
.lp__final {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.lp__final p {
  margin: 0;
  font: 700 clamp(22px, 2.2vw, 28px)/1.3 var(--head);
  color: #fff;
  max-width: 32ch;
}
.lp__finalcall {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font: 700 19px var(--head);
  text-decoration: none;
}
.lp__footer {
  background: var(--navy-deep);
  padding: 22px var(--gutter);
  text-align: center;
  font: 400 13.5px var(--body);
  color: rgba(255,255,255,.65);
}

/* ---------------------------------------------------------------- utility */
.utility { background: #fff; padding: 80px 0 90px; min-height: 60vh; }
.utility__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--pale);
  margin-bottom: 22px;
}
.utility__h1 {
  margin: 0;
  font: 700 clamp(29px, 3.4vw, 42px)/1.18 var(--head);
  color: var(--navy);
  letter-spacing: -.02em;
  text-wrap: pretty;
}
.utility__lead {
  margin: 18px 0 0;
  font: 400 18.5px/1.7 var(--body);
  color: var(--ink);
  text-wrap: pretty;
}
.utility__para {
  margin: 16px 0 0;
  font: 400 17px/1.72 var(--body);
  color: var(--muted);
  text-wrap: pretty;
}
.utility__section { margin-top: 32px; }
.utility__h2 { margin: 0; font: 600 21px/1.3 var(--head); color: var(--navy); }
.utility__body {
  margin: 10px 0 0;
  font: 400 16.5px/1.72 var(--body);
  color: var(--muted);
  text-wrap: pretty;
}
.utility__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* ---------------------------------------------------------------- footer */
.footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,.78);
  padding: 64px 0 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 40px;
  padding-bottom: 48px;
}
.footer__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.footer__blurb {
  margin: 0 0 18px;
  font: 400 15.5px/1.65 var(--body);
  color: rgba(255,255,255,.72);
  max-width: 34ch;
}
.footer__nap {
  margin: 0;
  font: 400 15.5px/1.8 var(--body);
  color: rgba(255,255,255,.72);
  font-style: normal;
}
.footer__nap a { color: #fff; font-weight: 700; text-decoration: none; }
.footer__social {
  display: inline-block;
  margin-top: 16px;
  font: 600 14.5px var(--head);
  color: var(--sky);
  text-decoration: none;
}
.footer__title {
  margin: 0 0 16px;
  font: 600 13px var(--head);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.footer__nav { display: flex; flex-direction: column; gap: 11px; }
.footer__nav a {
  font: 400 15.5px var(--body);
  color: rgba(255,255,255,.76);
  text-decoration: none;
}
.footer__nav a:hover { color: #fff; }
.footer__bar {
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 22px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  font: 400 14px var(--body);
  color: rgba(255,255,255,.6);
}
.footer__legal { display: flex; gap: 18px; }
.footer__legal a { color: rgba(255,255,255,.7); text-decoration: none; }

/* ---------------------------------------------------------- Services mega menu
   Three columns: Garage Doors, Gutters, Other Services. The panel is anchored to
   the right of its trigger so a wide menu cannot run off the viewport on a
   1024px screen. Falls back to a single column below 1180px, where the desktop
   nav is already close to giving way to the mobile menu. */
.drop__panel--mega {
  min-width: 640px;
  left: auto;
  right: 0;
}
.mega {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 4px 18px;
}
.mega__col { display: flex; flex-direction: column; }
.mega__title {
  font: 600 12px/1.2 var(--head);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.mega__title:hover { color: var(--navy); }
.mega__title:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

@media (max-width: 1180px) {
  .drop__panel--mega { min-width: 320px; }
  .mega { grid-template-columns: 1fr; gap: 0; }
  .mega__col + .mega__col { margin-top: 6px; }
}

/* Group labels inside the mobile Services accordion. */
.mnav__group {
  font: 600 12px/1.2 var(--head);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 14px 0 2px;
  padding: 0 2px;
}
.mnav__group:first-child { margin-top: 4px; }

/* ------------------------------------------------------ mobile touch targets
   Buttons already clear 44px. These are the text links that did not: footer
   navigation, breadcrumbs, the legal row and the tel: links. On a phone they
   are the ones people actually mis-tap, so they get a real target rather than
   the height of their own text. Desktop is untouched. */
@media (max-width: 767px) {
  .footer__nav a,
  .footer__legal a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__nav { gap: 0; }

  .topbar__number,
  .footer__nap a,
  .footer__social {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .contactblock__phone { min-height: 44px; }

  /* Breadcrumbs stay compact so they do not push the H1 down the page, but
     clear the WCAG 2.2 AA 24px minimum with room to spare. */
  .crumbs a,
  .crumbs span { display: inline-flex; align-items: center; min-height: 30px; }
}

/* ================================================================
   DESIGN ENHANCEMENTS — added 2026-09-19
   Polish, motion and responsive conveniences layered on top of the
   existing design system. All motion respects prefers-reduced-motion.
   ================================================================ */

/* ---------------------------------------------------------------- globals */
html { scroll-behavior: smooth; }
::selection { background: rgba(15,111,191,.18); color: var(--navy-deep); }

/* ---------------------------------------------------------------- buttons — micro-interactions */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary:hover { box-shadow: 0 8px 20px rgba(15,111,191,.28); }
.btn--secondary:hover { box-shadow: 0 6px 16px rgba(15,111,191,.12); }

/* ---------------------------------------------------------------- scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: .08s; }
.reveal--delay-2 { transition-delay: .16s; }
.reveal--delay-3 { transition-delay: .24s; }

/* ---------------------------------------------------------------- hero polish */
.hero {
  position: relative;
  background:
    radial-gradient(circle at 80% 20%, rgba(15,111,191,.06) 0%, transparent 35%),
    radial-gradient(circle at 10% 90%, rgba(12,58,94,.04) 0%, transparent 30%),
    #fff;
}
.hero__grid { padding-top: 64px; padding-bottom: 72px; }
.media {
  box-shadow: 0 18px 45px rgba(10,46,74,.12);
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1);
}
.media:hover { transform: translateY(-3px); box-shadow: 0 24px 55px rgba(10,46,74,.16); }
.media__placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.08) 0%, transparent 25%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 12px);
  pointer-events: none;
}
.media__placeholder::after {
  content: "📷";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 34px;
  opacity: .22;
  filter: grayscale(1);
}
.media--card .media__placeholder::after { opacity: .18; }

/* ---------------------------------------------------------------- cards — premium hover */
.card {
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), border-color .25s ease;
  will-change: transform;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(10,46,74,.12);
}
.card__media { overflow: hidden; }
.card__media .media__img { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.card:hover .card__media .media__img { transform: scale(1.04); }
.card__btn { transition: background .2s ease, box-shadow .2s ease; }
.card__btn > span { transition: transform .2s ease; }
.card:hover .card__btn { background: var(--navy); box-shadow: 0 8px 20px rgba(15,111,191,.28); }
.card:hover .card__btn > span { transform: translateX(3px); }

/* ---------------------------------------------------------------- tiles — subtle lift */
.tile {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10,46,74,.08);
  border-color: var(--blue);
}

/* ---------------------------------------------------------------- steps — connector line on desktop */
@media (min-width: 1024px) {
  .steps {
    position: relative;
  }
  .steps::before {
    content: "";
    position: absolute;
    top: 52px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent);
    z-index: 0;
  }
  .step { position: relative; z-index: 1; }
}
.step { transition: transform .2s ease, box-shadow .2s ease; }
.step:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(10,46,74,.08); }

/* ---------------------------------------------------------------- area links */
.arealink {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.arealink:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10,46,74,.08);
}
.arealink span { transition: transform .2s ease; display: inline-block; }
.arealink:hover span { transform: translateX(5px); }

/* ---------------------------------------------------------------- FAQ polish */
.qa {
  transition: box-shadow .2s ease, border-color .2s ease;
}
.qa:hover { box-shadow: 0 6px 18px rgba(10,46,74,.06); }
.qa__q { transition: color .2s ease; }
.qa__q:hover { color: var(--blue); }
.qa__mark { transition: transform .2s ease; }
details[open] > .qa__q .qa__mark { transform: rotate(180deg); }
details[open] > .qa__q .qa__mark::before { content: "\2212"; transform: none; }
.qa__a {
  animation: faqOpen .25s ease-out;
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------- form polish */
.field input,
.field select,
.field textarea {
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--sky-mid); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(15,111,191,.12);
  transform: translateY(-1px);
}
.form__submit { transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.form__submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,111,191,.28); }

/* ---------------------------------------------------------------- CTA band */
.section--blue {
  position: relative;
  overflow: hidden;
}
.section--blue::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,.08) 0%, transparent 35%),
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.06) 0%, transparent 30%);
  pointer-events: none;
}
.ctaband { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- floating mobile CTA */
.floating-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  display: none;
  padding: 10px 16px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(10,46,74,.08);
  gap: 10px;
}
.floating-cta.is-visible { display: flex; }
.floating-cta .btn { flex: 1; min-height: 48px; font-size: 15px; padding: 0 16px; }
.floating-cta .btn--secondary { flex: 0 0 auto; padding: 0 14px; }

@media (max-width: 1023px) {
  body { padding-bottom: 76px; } /* reserve space for floating CTA */
  .floating-cta.is-visible { display: flex; }
}

/* ---------------------------------------------------------------- back to top */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 94px;
  z-index: 80;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(10,46,74,.1);
}
.back-to-top:hover { background: var(--pale); box-shadow: 0 6px 18px rgba(10,46,74,.14); }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top svg { width: 20px; height: 20px; }

@media (min-width: 1024px) {
  .back-to-top { right: 24px; bottom: 24px; }
}

/* ---------------------------------------------------------------- section separators */
.section--white + .section--white,
.section--pale + .section--pale,
.section--soft + .section--soft { position: relative; }
.section--white + .section--white::before,
.section--pale + .section--pale::before,
.section--soft + .section--soft::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(85%, var(--shell));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}

/* ---------------------------------------------------------------- footer social icon polish */
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s ease, transform .2s ease;
}
.footer__social:hover { transform: translateX(3px); }
.footer__social::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .btn,
  .media,
  .card,
  .tile,
  .step,
  .arealink,
  .qa,
  .field input,
  .field select,
  .field textarea,
  .form__submit,
  .back-to-top {
    transition: none !important;
    animation: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  .card:hover,
  .tile:hover,
  .step:hover,
  .arealink:hover,
  .media:hover,
  .btn:hover,
  .form__submit:hover { transform: none; }
}

/* ---------------------------------------------------------------- print */
@media print {
  .topbar,
  .header,
  .footer,
  .floating-cta,
  .back-to-top,
  .hero__actions,
  .form,
  .drop__panel,
  .mnav,
  .header__mobile { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 24px 0; }
  a { text-decoration: underline; color: #000; }
  .card, .tile, .step { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
}

/* ---------------------------------------------------------------- small-screen typography tune */
@media (max-width: 480px) {
  .hero__h1 { font-size: clamp(28px, 8vw, 36px); }
  .h2 { font-size: clamp(24px, 7vw, 30px); }
  .hero__grid { padding-top: 44px; padding-bottom: 52px; }
  .section { padding: 56px 0; }
  .card__body { padding: 18px; }
}

/* =====================================================================
   2030 LAYER (owner direction 2026-09-21)
   A futurist look in the same palette: navy, blue and sky. Glass panels,
   a faint blueprint grid, soft light glows, larger display type, and a
   picture in every section (see src/lib/render/art.js). Structure and
   markup are unchanged; this layer only restyles.
   ===================================================================== */
:root {
  --glow: 0 0 0 1px rgba(159,200,234,.35), 0 18px 48px -18px rgba(15,111,191,.45);
  --glass: rgba(255,255,255,.72);
  --glass-line: rgba(159,200,234,.45);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --grid-line: rgba(15,111,191,.06);
}

body {
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(159,200,234,.35), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(15,111,191,.10), transparent 60%),
    var(--soft);
}

/* header: frosted glass that stays readable over any section */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--glass-line);
}

/* buttons: a gradient with a soft light edge */
.btn { border-radius: 999px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn--primary {
  background: linear-gradient(120deg, var(--blue) 0%, #1B86DB 55%, var(--sky-mid) 130%);
  box-shadow: 0 10px 28px -12px rgba(15,111,191,.75), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(15,111,191,.85), inset 0 1px 0 rgba(255,255,255,.3); }
.btn--secondary { border-radius: 999px; backdrop-filter: blur(6px); }

/* hero: deep navy with a blueprint grid and a light glow */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 420px at 85% 10%, rgba(159,200,234,.38), transparent 65%),
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, #0F5A9B 100%);
  border-bottom: 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(159,200,234,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,200,234,.10) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 95%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 95%);
}
.hero .shell { position: relative; }
.hero .kicker { color: var(--sky); }
.hero__h1 { color: #fff; font-size: clamp(33px, 4.6vw, 58px); letter-spacing: -.025em; }
.hero__lead { color: rgba(232,241,250,.86); }
.hero .crumbs a { color: var(--sky); }
.hero .crumbs, .hero .crumbs li { color: rgba(232,241,250,.7); }
.hero .btn--secondary { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(159,200,234,.55); }
.hero .btn--secondary:hover { background: rgba(255,255,255,.16); color: #fff; }
.hero .media { box-shadow: var(--glow); border: 1px solid rgba(159,200,234,.35); }

/* media and illustrations */
.media { border-radius: var(--radius-xl); background: var(--navy-deep); }
.media__art, .media__art .art, .art { display: block; width: 100%; height: 100%; }
.media__art { position: absolute; inset: 0; }
.media--card { border-radius: 0; }

/* sections: a faint blueprint grid on the pale bands */
.section { padding: clamp(56px, 7vw, 92px) 0; position: relative; }
.section--pale, .section--soft {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}
.section--pale { background-color: var(--pale); }
.section--soft { background-color: var(--soft); }
.h2 { font-size: clamp(27px, 3vw, 40px); letter-spacing: -.02em; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
}
.kicker::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--sky));
}

/* every section carries a picture: prose beside it, lists under a band */
.withart {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
.withart__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--glow);
  border: 1px solid var(--glass-line);
}
.artband {
  position: relative;
  height: clamp(130px, 18vw, 200px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: clamp(26px, 3vw, 40px);
  box-shadow: var(--glow);
  border: 1px solid var(--glass-line);
}
.artband .art { height: 100%; }

/* glass cards, tiles, steps and FAQs */
.card, .tile, .step, .qa, .spec > div, .arealink {
  background: rgba(255,255,255,.9);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card { overflow: hidden; }
.card:hover, .tile:hover, .arealink:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow);
  border-color: rgba(15,111,191,.45);
}
.tile { position: relative; padding-top: 26px; }
.tile::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--blue), var(--sky));
}
.step__n {
  background: linear-gradient(135deg, var(--blue), var(--sky-mid));
  box-shadow: 0 0 0 6px rgba(159,200,234,.25), 0 10px 24px -10px rgba(15,111,191,.8);
  color: #fff;
}
.qa[open] { box-shadow: var(--glow); }

/* the quote form sits on a glass panel */
.formwrap {
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 70px -40px rgba(12,58,94,.55);
  padding: clamp(22px, 3.2vw, 44px);
}
.form input, .form textarea, .form select { border-radius: 14px; }

/* blue CTA band: glow and grid */
.section--blue {
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(159,200,234,.4), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
}
.ctaband { border-radius: var(--radius-xl); }

/* footer: deep navy with a top light line */
.footer { border-top: 2px solid transparent; border-image: linear-gradient(90deg, var(--blue), var(--sky), var(--blue)) 1; }

/* phones and tablets */
@media (max-width: 860px) {
  .withart { grid-template-columns: 1fr; }
  .withart__media { order: -1; }
  .formwrap { padding: 20px; }
  .header { position: sticky; }
}
@media (max-width: 480px) {
  .hero__h1 { font-size: clamp(29px, 8vw, 36px); }
  .artband { height: 120px; }
}

/* people who ask for less motion get none */
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .tile, .arealink { transition: none; }
  .btn--primary:hover, .card:hover, .tile:hover, .arealink:hover { transform: none; }
}

/* ======================================================== image layout system
 * Owner direction 2026-09-21: one responsive system for every picture on the
 * site. The component box decides the size; the picture always fills it with
 * object-fit: cover and can never make its section taller.
 *
 *   .media--hero     hero picture beside the H1
 *   .media--split    picture beside a section's text: split sections and the
 *                    side panels next to intros and calls to action
 *   .media--form     picture under the heading of a quote form (and the paid
 *                    landing page), filling down to the bottom of the form
 *   .media--card     card picture, fixed 16:10, so a row of cards is level
 *   .media--band     wide picture strip above a list, process or FAQ section
 *   .media--banner   article hero banner, fixed 21:9
 *   .media--contain  logos, icons, badges and line illustrations: never cropped
 *
 * 861px and up: two columns, stretched. The text decides the height; the media
 * minimum only stops a short section from collapsing, and short text is centred
 * against it. 860px and down (the site's existing stacking point): one column,
 * and every picture gets a controlled height instead of its natural one.
 * Rules are scoped to these components; nothing here touches a bare img. */
:root {
  --media-min: clamp(320px, 36vw, 520px);
  --media-min-hero: clamp(300px, 30vw, 460px);
  --media-min-form: clamp(180px, 14vw, 240px);
  --media-stack: clamp(240px, 62vw, 380px);
  --media-stack-gap: 24px;
}

.media--hero > .media__img,
.media--split > .media__img,
.media--form > .media__img,
.media--card > .media__img,
.media--band > .media__img,
.media--banner > .media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Subject sits off-centre: keep it in frame when the box crops hard. Set per
 * picture in src/lib/images.js (STOCK `pos`), never per page. */
.media__img.media__img--top { object-position: center 25%; }
.media__img.media__img--bottom { object-position: center 75%; }
.media__img.media__img--left { object-position: 30% center; }
.media__img.media__img--right { object-position: 70% center; }

/* Never cropped: logos, icons, badges and line illustrations. (The drawn
 * illustrations in render/art.js are scaled whole by their own
 * preserveAspectRatio="xMidYMid meet".) */
.media--contain { background: transparent; }
.media--contain > .media__img { object-fit: contain; }

/* hero, split, form and landing columns: text beside a picture of equal height */
.hero__content,
.split__text,
.withart__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.media--hero { min-height: var(--media-min-hero); }
.media--split { min-height: var(--media-min); }

.formwrap__aside,
.lp__intro {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.media--form {
  flex: 1 1 auto;
  min-height: var(--media-min-form);
  margin-top: 26px;
}

/* bands keep their strip height; the picture fills it */
.media--band { overflow: hidden; }

@media (max-width: 860px) {
  .hero__grid,
  .split,
  .formwrap,
  .lp__grid { grid-template-columns: 1fr; }
  .hero__grid,
  .split,
  .withart,
  .formwrap,
  .lp__grid { gap: var(--media-stack-gap); }
  .hero__content,
  .split__text,
  .withart__text { justify-content: flex-start; }
  .media--hero,
  .media--split,
  .media--form,
  .media--banner {
    min-height: 0;
    height: var(--media-stack);
    aspect-ratio: auto;
    flex: none;
  }
  .media--form { margin-top: var(--media-stack-gap); }
}

/* ======================================================== county hub features
 * Owner direction 2026-09-30: on the nine county hubs, the sections that were
 * grids of small cards are a split instead: copy on one side, one photo of the
 * section's trade on the other, alternating sides down the page. Short items
 * are labelled rows inside the copy; six or more run in two columns. Palette
 * is the site's own: navy, blue, pale blue and white. */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: stretch;
}
.feature--long { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
.feature--flip { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.feature--flip.feature--long { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
.feature--flip .feature__media { order: -1; }
.feature__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.feature__text .section__head { max-width: none; }
.feature__media {
  min-height: clamp(360px, 36vw, 540px);
  border-radius: 22px;
  border: 0;
  box-shadow: 0 30px 60px -38px rgba(12,58,94,.6);
  outline: 1px solid rgba(159,200,234,.55);
  outline-offset: 10px;
}
.feature__rows {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid rgba(12,58,94,.14);
}
.feature__row {
  display: grid;
  grid-template-columns: minmax(0, 11.5em) minmax(0, 1fr);
  column-gap: 28px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(12,58,94,.14);
}
.feature__title {
  margin: 0;
  font: 600 16px/1.4 var(--head);
  color: var(--navy);
  letter-spacing: -.005em;
  text-wrap: pretty;
}
.feature__body {
  margin: 0;
  font: 400 15.5px/1.65 var(--body);
  color: var(--muted);
  text-wrap: pretty;
}
/* six or more items: two columns, title over body */
.feature__rows--cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  border-top: 0;
}
.feature__rows--cols .feature__row {
  display: block;
  border-bottom: 0;
  border-top: 1px solid rgba(12,58,94,.14);
  padding: 16px 0 14px;
}
.feature__rows--cols .feature__body { margin-top: 5px; }
/* links under the rows: underlined text links, not boxes */
.feature .grid--links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 24px !important;
}
.feature .arealink,
.feature .arealink:hover {
  min-height: 0;
  padding: 0 0 5px;
  background: none;
  border: 0;
  border-bottom: 1.5px solid var(--sky);
  border-radius: 0;
  box-shadow: none;
  transform: none;
  justify-content: flex-start;
  gap: 8px;
  font: 600 15px/1.4 var(--head);
  color: var(--navy);
}
.feature .arealink:hover { color: var(--blue); border-bottom-color: var(--blue); }

@media (max-width: 1100px) {
  .feature__rows--cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .feature,
  .feature--long,
  .feature--flip,
  .feature--flip.feature--long { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .feature__media,
  .feature--flip .feature__media {
    order: -1;
    min-height: 0;
    height: var(--media-stack);
    outline-offset: 6px;
  }
  .feature__text { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .feature__row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}
/* A long list (six or more items) would stretch its picture into a thin strip.
 * The picture keeps a set height and stays in view beside the list instead. */
@media (min-width: 861px) {
  .feature--long .feature__media {
    align-self: start;
    position: sticky;
    top: 104px;
    min-height: 0;
    height: min(calc(100vh - 150px), clamp(460px, 50vw, 720px));
  }
}

/* Numbered process cards, every page (owner correction 2026-09-30). Four steps
 * sit in one row on desktop and two by two on tablets, so a fourth card never
 * wraps alone at in-between widths; phones keep one column. */
/* Scoped to pages with breadcrumbs, which is every page but the homepage: the
 * homepage keeps its design exactly (owner, 2026-09-30). */
@media (min-width: 600px) and (max-width: 1099px) {
  main:has(.crumbs) .steps:has(> .step:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  main:has(.crumbs) .steps:has(> .step:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Three steps (paid landing pages): one row from tablet width up. */
@media (min-width: 700px) {
  .steps:has(> .step:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Header dropdowns (owner, 2026-09-30): the label is a link to the hub page and
 * the chevron is the menu button. Together they look like the old single
 * trigger: same type, colour and spacing. */
.drop { display: flex; align-items: center; }
.drop__link {
  display: flex;
  align-items: center;
  padding: 10px 2px 10px 12px;
  font: 600 15px var(--head);
  color: var(--ink);
  text-decoration: none;
  border-radius: 6px;
}
.drop__link:hover,
.drop__link[aria-current] { color: var(--blue); }
.drop__btn--toggle { padding: 10px 10px 10px 4px; }
.drop__btn--toggle:hover,
.drop:hover .drop__btn--toggle { color: var(--blue); }

/* Brand logo (owner artwork, 2026-09-30). Height is fixed per place so the
 * header, footer and landing bar keep their existing heights; width follows
 * the artwork's own ratio. */
.logo__img { display: block; height: 54px; width: auto; max-width: none; }
.footer__brand { display: inline-flex; margin-bottom: 18px; }
.footer__brand .logo__img { height: 64px; }
.lpbar .logo__img { height: 44px; }
@media (max-width: 767px) {
  .header .logo__img { height: 46px; }
}