/* Local Galano Grotesque Alt font family */
@font-face {
  font-family: "Galano Grotesque Alt";
  src: url("./assets/font/GalanoGrotesqueAltExtraLight.otf") format("opentype");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "Galano Grotesque Alt";
  src: url("./assets/font/GalanoGrotesqueAltLight.otf") format("opentype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Galano Grotesque Alt";
  src: url("./assets/font/GalanoGrotesqueAltRegular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Galano Grotesque Alt";
  src: url("./assets/font/GalanoGrotesqueAltMedium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Galano Grotesque Alt";
  src: url("./assets/font/GalanoGrotesqueAltSemiBold.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Galano Grotesque Alt";
  src: url("./assets/font/GalanoGrotesqueAltBold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Galano Grotesque Alt";
  src: url("./assets/font/GalanoGrotesqueAltExtraBold.otf") format("opentype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Galano Grotesque Alt";
  src: url("./assets/font/GalanoGrotesqueAltBlack.otf") format("opentype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --blue-light: #acd0ee;
  --blue-mid: #79b2e1;
  --blue-deep: #63a5dc;
  --blue-shadow: rgba(58, 105, 154, 0.24);
  --text: #555555;
  --text-dark: #4f4f4f;
  --muted: #626262;
  --white: #ffffff;
  --gray-strip: #d9d9d9;
  --section-blue: linear-gradient(180deg, #acd0ee 0%, #66a9df 100%);
  --card-blue: rgba(229, 242, 255, 0.43);
  --page-wrap: min(1120px, calc(100% - 96px));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  color: var(--text);
  font-family: "Galano Grotesque Alt", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; user-select: none; }
button { font: inherit; }

main[class$="-page"] {
  width: 100%;
  min-width: 320px;
  overflow: hidden;
  background: #fff;
}

.page-wrap {
  width: var(--page-wrap);
  margin: 0 auto;
}

.section-white { background: #fff; }
.section-blue { color: #fff; background: var(--section-blue); }

.section-heading { text-align: center; }

.section-heading h2 {
  margin: 0;
  font-size: clamp(38px, 3.96vw, 60px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.7px;
}

.section-heading p {
  margin: 13px auto 0;
  font-size: clamp(14px, 1.32vw, 21px);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: 0.04px;
}

.section-heading-light,
.section-heading-light h2,
.section-heading-light p { color: #fff; }
.section-heading-dark,
.section-heading-dark h2 { color: var(--text-dark); }
.section-heading-dark p { color: #686868; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(132px, 9vw, 170px);
  height: clamp(38px, 2.9vw, 50px);
  padding: 0 clamp(22px, 1.8vw, 34px);
  border: 0;
  border-radius: 999px;
  font-size: clamp(13px, 0.96vw, 16px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.button:hover, .button:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(29, 71, 112, 0.16);
}

.button-light { color: #333; background: #fff; }
.button-primary { color: #fff; background: linear-gradient(180deg, #74afe3 0%, #5a9bda 100%); }

/* HERO */
.hero {
  position: relative;
  height: clamp(580px, 100svh, 780px);
  min-height: 620px;
  overflow: hidden;
  color: #fff;
  background-image:
    url("./assets/hero%20car.png"),
    radial-gradient(circle at 22% 26%, rgba(255,255,255,0.58), rgba(255,255,255,0) 44%),
    linear-gradient(112deg, #c1dbf2 0%, #8ec1ea 46%, #5aa2dc 100%);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(112, 173, 226, 0.02) 0%, rgba(112, 173, 226, 0) 68%, rgba(38, 80, 121, 0.05) 100%);
  pointer-events: none;
}






















.hero-copy {
  position: relative;
  z-index: 3;
  padding-top: clamp(160px, 20vh, 220px);
  text-align: center;
}

.hero-copy h1 {
  max-width: 860px;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(48px, 4.1vw, 72px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.9px;
}

.hero-copy p {
  margin: 14px 0 20px;
  color: rgba(255,255,255,0.92);
  font-size: clamp(16px, 1.25vw, 21px);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0.04px;
}

.info-strip {
  min-height: clamp(34px, 3.7vw, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: #626262;
  background: var(--gray-strip);
  font-size: clamp(10px, 1.08vw, 16px);
  font-weight: 300;
  letter-spacing: 0.08px;
  text-align: center;
}

/* COUNTY */
.service-area {
  padding: clamp(72px, 7.8vw, 120px) 0;
}

.county-grid {
  display: grid;
  grid-template-columns: minmax(250px, 380px) minmax(360px, 1fr);
  align-items: center;
  gap: clamp(70px, 10vw, 160px);
}

.county-copy h2 {
  margin: 0;
  color: var(--text-dark);
  font-size: clamp(42px, 4.8vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.8px;
}

.county-copy p {
  max-width: 360px;
  margin: 16px 0 0;
  color: #575757;
  font-size: clamp(15px, 1.42vw, 22px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.02px;
}

.county-map-card {
  width: min(520px, 42vw);
  justify-self: end;
}

.county-map-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* SERVICES */
.services {
  padding: clamp(72px, 7.7vw, 118px) 0 clamp(76px, 8vw, 120px);
}

.service-cards.three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 34px);
  margin-top: clamp(45px, 5vw, 72px);
}

.feature-card {
  min-height: clamp(205px, 24vw, 340px);
  padding: clamp(44px, 4.8vw, 70px) clamp(18px, 2vw, 34px) clamp(24px, 3vw, 46px);
  border-radius: clamp(26px, 2.6vw, 42px);
  color: #fff;
  background: var(--card-blue);
  box-shadow: 0 13px 24px var(--blue-shadow), inset 0 0 0 1px rgba(255,255,255,0.26);
  text-align: center;
}

.feature-icon {
  width: clamp(70px, 7vw, 110px);
  height: clamp(70px, 7vw, 110px);
  margin: 0 auto 20px;
}

.feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature-card h3 {
  margin: 0;
  font-size: clamp(18px, 1.75vw, 29px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.18px;
}

.feature-card p {
  max-width: 260px;
  margin: 8px auto 0;
  color: rgba(255,255,255,0.93);
  font-size: clamp(14px, 1.3vw, 21px);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: 0.05px;
}

/* DESTINATIONS */
.destinations {
  padding: clamp(78px, 8vw, 125px) 0;
}

.destination-list {
  display: grid;
  gap: clamp(16px, 1.8vw, 25px);
  margin-top: clamp(45px, 5vw, 72px);
}

.destination-pill {
  position: relative;
  min-height: clamp(66px, 6.7vw, 96px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  isolation: isolate;
  background-color: #78aedd;
  background-image:
    linear-gradient(90deg, rgba(82, 146, 204, 0.80), rgba(111, 170, 224, 0.74) 52%, rgba(91, 166, 196, 0.79)),
    var(--destination-image, linear-gradient(120deg, #75aada, #9cc5e8));
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}

.destination-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 10% 50%, rgba(255,255,255,0.15), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
}

.destination-pill span {
  position: relative;
  max-width: 92%;
  color: #fff;
  font-size: clamp(16px, 1.55vw, 25px);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
}

.dest-1 { --destination-image: url("./assets/34.png"); }
.dest-2 { --destination-image: url("./assets/31.png"); }
.dest-3 { --destination-image: url("./assets/23.png"); }
.dest-4 { --destination-image: url("./assets/28.png"); }
.dest-5 { --destination-image: url("./assets/18.png"); }

/* LOCAL NEEDS */
.needs {
  padding: clamp(70px, 7.5vw, 115px) 0 clamp(68px, 7vw, 105px);
}

.small-cards { margin-top: clamp(28px, 3.4vw, 48px) !important; }

.compact-card {
  min-height: clamp(140px, 13vw, 215px);
  padding: clamp(40px, 4vw, 65px) clamp(22px, 2.4vw, 38px) clamp(24px, 2.7vw, 42px);
  text-align: left;
}

.compact-card h3 {
  font-size: clamp(18px, 1.7vw, 28px);
  line-height: 1.15;
}

.compact-card p {
  max-width: 260px;
  margin: 7px 0 0;
  font-size: clamp(13px, 1.22vw, 20px);
  line-height: 1.22;
}

/* CTA */
.cta {
  padding: clamp(86px, 8.7vw, 130px) 0;
}

.cta-wrap { text-align: center; }

.cta .section-heading p {
  margin-top: 14px;
  font-size: clamp(14px, 1.22vw, 20px);
  line-height: 1.32;
}

.cta .button {
  margin-top: clamp(22px, 2.2vw, 34px);
}

/* FOOTER */
.footer {
  color: #fff;
  background: linear-gradient(180deg, #a7ccea 0%, #8ab6e0 100%);
}

.footer-inner {
  min-height: clamp(70px, 7vw, 105px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
}

.footer-brand img {
  width: clamp(100px, 9vw, 145px);
  height: auto;
  max-width: none;
  object-fit: contain;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 2vw, 35px);
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
}

.footer-nav a,
.footer-contact {
  font-size: clamp(9px, 0.86vw, 13px);
  font-weight: 300;
  line-height: 1.35;
}

.footer-contact {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding-left: 0;
  color: rgba(255,255,255,0.97);
  font-style: normal;
  text-align: left;
  line-height: 1.2;
}

.footer-contact a {
  display: grid;
  grid-template-columns: 20px auto;
  align-items: center;
  column-gap: 10px;
  color: inherit;
  white-space: nowrap;
}

.footer-contact-icon {
  width: 20px;
  min-width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 0.92em;
  line-height: 1;
}

@media (max-width: 1180px) {
  
  
  
  
  
  
  .hero-copy h1 { font-size: clamp(42px, 5vw, 62px); }
}

@media (max-width: 900px) {
  :root { --page-wrap: min(100%, calc(100% - 56px)); }
  .hero { min-height: 580px; height: 86svh; }
  .hero-copy { padding-top: clamp(128px, 19vh, 160px); }
  .hero-copy h1 { font-size: clamp(38px, 6.5vw, 54px); }
  .hero-copy p { font-size: clamp(15px, 2.3vw, 19px); }
  .button { min-width: 136px; height: 40px; font-size: 14px; }
  .county-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .county-copy h2 { font-size: 40px; }
  .county-copy p { font-size: 14px; }
  .county-map-card { width: min(360px, 42vw); }
  .footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
    padding: 28px 0;
    text-align: center;
  }
  .footer-contact { justify-self: center; align-items: center; text-align: center; }
  .footer-nav { flex-wrap: wrap; row-gap: 8px; }
}

@media (max-width: 760px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

  

  
  
  

  

  

  

  

  
  

  .page-wrap,
  .services .page-wrap,
  .destinations .page-wrap,
  .needs .page-wrap,
  .cta .page-wrap {
    width: min(100%, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .hero {
    min-height: 540px;
    height: 88svh;
    max-height: 720px;
    background-position: center bottom;
    background-size: cover;
  }

  .hero-copy {
    width: min(100%, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    padding-top: clamp(118px, 19vh, 138px);
  }

  .hero-copy h1 {
    max-width: 360px;
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.7px;
  }

  .hero-copy p {
    margin: 12px 0 18px;
    font-size: clamp(14px, 3.6vw, 18px);
  }

  .hero .button, .button {
    min-width: 142px;
    height: 43px;
    padding: 0 26px;
    font-size: 14.5px;
  }

  .info-strip {
    min-height: 36px;
    font-size: 10px;
    line-height: 1.25;
  }

  .service-area {
    padding: 52px 0 56px;
  }

  .county-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }

  .county-copy p {
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
  }

  .county-map-card {
    width: min(300px, 82vw);
    justify-self: center;
  }

  .services,
  .destinations,
  .needs,
  .cta {
    padding-top: 58px;
    padding-bottom: 62px;
  }

  .section-heading h2 {
    font-size: clamp(28px, 7.8vw, 38px);
  }

  .section-heading p,
  .cta .section-heading p {
    font-size: 13.5px;
  }

  .service-cards.three-col {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 16px;
    margin-top: 34px;
    margin-left: auto;
    margin-right: auto;
  }

  .feature-card,
  .compact-card {
    width: 100%;
    max-width: min(100%, 430px);
    min-height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 34px clamp(18px, 6vw, 28px) 28px;
    border-radius: 24px;
    text-align: center;
  }

  .feature-card p,
  .compact-card p {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 14px;
  }

  .feature-icon {
    width: 66px;
    height: 66px;
  }

  .destination-list {
    width: 100%;
    max-width: 100%;
    gap: 14px;
    margin-left: auto;
    margin-right: auto;
  }

  .destination-pill {
    width: 100%;
    max-width: 100%;
    min-height: 58px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 24px;
    padding: 12px 18px;
  }

  .destination-pill span {
    font-size: clamp(12px, 3.3vw, 14.5px);
    line-height: 1.25;
  }

  .footer-contact a { grid-template-columns: 18px auto; column-gap: 8px; font-size: 12px; }
}

@media (max-width: 560px) {
  .hero { min-height: 520px; height: 86svh; }
  .hero-copy { padding-top: clamp(122px, 20vh, 142px); }
  .hero-copy h1 { max-width: 330px; font-size: clamp(28px, 8.2vw, 38px); }
  .hero-copy p { font-size: clamp(13px, 3.5vw, 16px); margin: 10px 0 16px; }
  .county-copy h2 { font-size: clamp(34px, 9vw, 42px); }
  .coverage br, .section-heading br, .cta br { display: none; }
}

@media (max-width: 374px) {
  

  

  

  .page-wrap,
  .services .page-wrap,
  .destinations .page-wrap,
  .needs .page-wrap,
  .cta .page-wrap {
    width: min(100%, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
  }

  .hero-copy { padding-top: 116px; }
  .hero-copy h1 { font-size: clamp(27px, 8.8vw, 34px); }
}

/* ========================================================================== 
   COUNTY HERO/NAV LAYOUT MATCH TO MAIN LANDING PAGE
   Keeps county-specific labels/content, but matches the main landing page
   hero scale, navbar position, button sizing, and desktop/tablet behavior.
   ========================================================================== */
@media (min-width: 901px) {
  .hero {
    height: calc(100svh + 56px) !important;
    min-height: 735px !important;
    max-height: none !important;
    background-size: cover !important;
    background-position: center calc(100% + 32px) !important;
  }

  @supports not (height: 100svh) {
    .hero { height: calc(100vh + 56px) !important; }
  }

  

  

  

  

  

  

  

  

  .hero-copy {
    width: min(980px, calc(100% - 96px)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: clamp(172px, 20.5vh, 215px) !important;
  }

  .hero-copy h1 {
    max-width: 930px !important;
    font-size: clamp(50px, 4.1vw, 74px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1px !important;
  }

  .hero-copy p {
    margin: clamp(13px, 1.1vw, 18px) 0 clamp(21px, 1.55vw, 28px) !important;
    font-size: clamp(17px, 1.32vw, 24px) !important;
    line-height: 1.28 !important;
  }

  .hero .hero-copy .button,
  .hero .button,
  .cta .button {
    min-width: clamp(204px, 13.44vw, 264px) !important;
    height: clamp(58px, 4.08vw, 74px) !important;
    padding: 0 clamp(34px, 2.75vw, 50px) !important;
    font-size: clamp(19px, 1.34vw, 24px) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  .hero {
    height: calc(100svh + 42px) !important;
    min-height: 700px !important;
    background-position: center calc(100% + 26px) !important;
  }

  @supports not (height: 100svh) {
    .hero { height: calc(100vh + 42px) !important; }
  }

  

  .hero-copy { padding-top: clamp(156px, 19vh, 190px) !important; }

  .hero-copy h1 { font-size: clamp(46px, 3.85vw, 68px) !important; }

  .hero .hero-copy .button,
  .hero .button,
  .cta .button {
    min-width: 170px !important;
    height: 48px !important;
    font-size: 16px !important;
  }
}





@media (min-width: 561px) and (max-width: 900px) {
  .hero {
    min-height: 620px !important;
    height: 86svh !important;
    background-position: center calc(100% + 18px) !important;
  }

  .hero-copy {
    padding-top: clamp(105px, 17vh, 140px) !important;
  }

  .hero-copy h1 {
    max-width: 680px !important;
    font-size: clamp(38px, 6.5vw, 54px) !important;
  }

  .hero-copy p {
    font-size: clamp(15px, 2.3vw, 19px) !important;
    margin: 12px 0 18px !important;
  }

  .hero .hero-copy .button,
  .hero .button,
  .cta .button {
    min-width: 163px !important;
    height: 48px !important;
    padding: 0 30px !important;
    font-size: 17px !important;
  }
}



/* ========================================================================== 
   FINAL COUNTY HERO MATCH PATCH
   Matches county hero/nav sizing and placement to the main landing page.
   This sits last so previous rushed county overrides cannot shrink the CTA
   or push the desktop nav outside the viewport.
   ========================================================================== */
@media (min-width: 901px) {
  .hero {
    min-height: 735px !important;
    height: calc(100svh + 56px) !important;
    max-height: none !important;
    background-size: cover !important;
    background-position: center calc(100% + 32px) !important;
  }

  @supports not (height: 100svh) {
    .hero { height: calc(100vh + 56px) !important; }
  }

  

  

  

  

  

  

  

  
  

  .hero-copy,
  .hero-copy.page-wrap {
    position: relative !important;
    z-index: 3 !important;
    width: min(980px, calc(100% - 96px)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: clamp(172px, 20.5vh, 215px) !important;
    text-align: center !important;
  }

  .hero-copy h1 {
    max-width: 930px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(50px, 4.1vw, 74px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1px !important;
  }

  .hero-copy p {
    margin: clamp(13px, 1.1vw, 18px) 0 clamp(21px, 1.55vw, 28px) !important;
    font-size: clamp(17px, 1.32vw, 24px) !important;
    line-height: 1.28 !important;
  }

  .hero .hero-copy .button,
  .hero .button {
    min-width: clamp(204px, 13.44vw, 264px) !important;
    height: clamp(58px, 4.08vw, 74px) !important;
    padding: 0 clamp(34px, 2.75vw, 50px) !important;
    font-size: clamp(19px, 1.34vw, 24px) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  .cta .button {
    min-width: clamp(204px, 13.44vw, 264px) !important;
    height: clamp(58px, 4.08vw, 74px) !important;
    padding: 0 clamp(34px, 2.75vw, 50px) !important;
    font-size: clamp(19px, 1.34vw, 24px) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  .hero {
    min-height: 700px !important;
    height: calc(100svh + 42px) !important;
    background-position: center calc(100% + 26px) !important;
  }

  @supports not (height: 100svh) {
    .hero { height: calc(100vh + 42px) !important; }
  }

  

  .hero-copy,
  .hero-copy.page-wrap { padding-top: clamp(156px, 19vh, 190px) !important; }

  .hero-copy h1 { font-size: clamp(46px, 3.85vw, 68px) !important; }

  /* Keep this AFTER the height media query so it does not shrink like before. */
  .hero .hero-copy .button,
  .hero .button,
  .cta .button {
    min-width: clamp(204px, 13.44vw, 264px) !important;
    height: clamp(58px, 4.08vw, 74px) !important;
    padding: 0 clamp(34px, 2.75vw, 50px) !important;
    font-size: clamp(19px, 1.34vw, 24px) !important;
    font-weight: 500 !important;
  }
}





@media (min-width: 561px) and (max-width: 900px) {
  .hero {
    min-height: 620px !important;
    height: 86svh !important;
    background-position: center calc(100% + 18px) !important;
  }

  .hero-copy,
  .hero-copy.page-wrap {
    width: min(100%, calc(100% - 48px)) !important;
    padding-top: clamp(112px, 18vh, 148px) !important;
  }

  .hero-copy h1 {
    max-width: 680px !important;
    font-size: clamp(38px, 6.5vw, 54px) !important;
  }

  .hero-copy p {
    font-size: clamp(15px, 2.3vw, 19px) !important;
    margin: 12px 0 18px !important;
  }

  .hero .hero-copy .button,
  .hero .button,
  .cta .button {
    min-width: 163px !important;
    height: 48px !important;
    padding: 0 30px !important;
    font-size: 17px !important;
    font-weight: 500 !important;
  }
}



/* ========================================================================== 
   FINAL COUNTY DESKTOP NAV MATCH PATCH
   - raises the county navbar to match the main landing page
   - keeps county hero sizing aligned with the main landing page
   - makes Become a Partner bold like the main landing page
   - prevents the desktop nav from clipping on laptop widths
   ========================================================================== */
@media (min-width: 901px) {
  

  

  

  

  

  

  

  

  .hero-copy,
  .hero-copy.page-wrap {
    padding-top: clamp(172px, 20.5vh, 215px) !important;
  }

  .hero .hero-copy .button,
  .hero .button,
  .cta .button {
    min-width: clamp(204px, 13.44vw, 264px) !important;
    height: clamp(58px, 4.08vw, 74px) !important;
    padding: 0 clamp(34px, 2.75vw, 50px) !important;
    font-size: clamp(19px, 1.34vw, 24px) !important;
    font-weight: 500 !important;
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  

  .hero-copy,
  .hero-copy.page-wrap {
    padding-top: clamp(156px, 19vh, 190px) !important;
  }
}






/* ============================================================================
   FINAL COUNTY NAVBAR CLONE FROM MAIN LANDING PAGE
   The county name stays beside the logo, but it does not affect the nav
   spacing. This keeps Home / Services / buttons aligned like the main page.
   ============================================================================ */








/* ============================================================================
   FINAL TINY COUNTY NAVBAR ALIGNMENT FIX
   - Moves county navbar slightly upward to match the main landing page.
   - Forces Become a Partner text to be visible/black even against the white pill.
   ============================================================================ */







/* ============================================================================
   FINAL NAVBAR HEIGHT + PARTNER TEXT SIZE TUNE
   Moves the county navbar higher and makes Become a Partner slightly larger.
   ============================================================================ */






/* ==========================================================================
   FINAL MOBILE EDGE-SPACING FIX
   Fixes narrow-device overflow so cards/sections do not press against the
   right edge, especially under responsive widths below 320px.
   ========================================================================== */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  main[class$="-page"] {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .page-wrap {
    width: min(100%, calc(100% - 40px)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .services .page-wrap,
  .destinations .page-wrap,
  .needs .page-wrap,
  .cta .page-wrap {
    width: min(100%, calc(100% - 40px)) !important;
  }

  .service-cards.three-col {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .feature-card,
  .compact-card {
    width: 100% !important;
    max-width: 310px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .destination-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .destination-pill {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 360px) {
  .page-wrap,
  .services .page-wrap,
  .destinations .page-wrap,
  .needs .page-wrap,
  .cta .page-wrap {
    width: min(100%, calc(100% - 32px)) !important;
  }

  .feature-card,
  .compact-card {
    max-width: 100% !important;
  }

  .service-cards.three-col {
    gap: 16px !important;
  }
}

/* ==========================================================================
   UNIVERSAL COUNTY NAV EDGE FIX
   Keeps county navbars independent from .page-wrap/mobile content spacing.
   ========================================================================== */












/* ==========================================================================
   FINAL UNIVERSAL COUNTY MOBILE NAVBAR
   Fixed edge-to-edge navbar + centered hamburger dropdown.
   Keeps navbar independent from .page-wrap and section/card spacing.
   ========================================================================== */
@media (max-width: 760px) {
  html,
  body,
  main[class$="-page"] {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  

  

  

  

  

  

  

  

  

  

  section[id] {
    scroll-margin-top: 90px !important;
  }
}



/* ========================================================================== 
   FINAL COUNTY DESKTOP + MOBILE NAV CORRECTION
   Matches the main landing navbar, keeps county label beside logo, and adds
   the same fixed/scrolled navbar behavior on county pages.
   ========================================================================== */




@media (max-width: 760px) {
  

  
  
  

  

  

  
  
  
  

  section[id] { scroll-margin-top: 90px !important; }
}

/* ==========================================================================
   FINAL COUNTY NAVBAR = MAIN LANDING NAVBAR
   Uses the same fixed desktop position, full-width scroll bar behavior,
   mobile edge-to-edge bar, and centered mobile menu as the main landing page.
   ========================================================================== */

/* Desktop/tablet: same as main .top-nav */


/* Exact same medium-desktop compression behavior as the main page */


/* Mobile: same edge-to-edge fixed bar and centered dropdown as main page */
@media (max-width: 760px) {
  

  

  

  

  

  

  

  

  

  

  section[id] {
    scroll-margin-top: 90px !important;
  }
}

/* ==========================================================================
   ABSOLUTE FINAL COUNTY NAV MATCH
   Exact main landing navbar positioning + smoother scroll transition.
   County label remains beside logo without changing the nav alignment.
   ========================================================================== */

/* Desktop/tablet navbar: same vertical placement as the main landing page */


/* Same desktop compression as the main landing page */


/* Mobile: edge-to-edge navbar + centered menu */
@media (max-width: 760px) {
  

  

  

  

  

  

  

  

  

  

  section[id] {
    scroll-margin-top: 90px !important;
  }
}

/* ==========================================================================
   FINAL COUNTY NAV SCROLL = MOVE UP ONLY
   No shrinking, no background pop, no blur animation.
   On desktop/tablet scroll, the navbar simply moves upward a little.
   ========================================================================== */




/* ==========================================================================
   FINAL: COUNTY NAVBAR CLONED FROM MAIN LANDING PAGE
   Same classes, same position, same scroll behavior, same mobile dropdown.
   Only extra is the county label beside the logo.
   ========================================================================== */

























/* Main landing fixed/scrolled navbar behavior */






/* Main landing mobile navbar behavior, centered dropdown */
@media (max-width: 760px) {
  html,
  body,
  main[class$="-page"] {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  

  

  

  

  

  

  

  

  

  

  section[id] {
    scroll-margin-top: 90px !important;
  }
}

/* ==========================================================================
   FINAL COUNTY NAV TINY HIGHER
   Moves the county navbar a very small amount higher from the previous tune.
   ========================================================================== */




/* ==========================================================================
   FINAL COUNTY NAV HIGHER MATCH OFFSET
   Moves county navbar a bit higher to line up with main landing page.
   ========================================================================== */




/* ==========================================================================
   FINAL MOBILE RESPONSIVE ENHANCEMENT - COUNTY PAGES
   Safer mobile nav, hero, cards, destination pills, sections, and footer.
   ========================================================================== */
@media (max-width: 1024px) {
  .county-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 38px !important;
    text-align: center !important;
  }

  .county-copy p {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .county-map-card {
    width: min(520px, 88vw) !important;
    justify-self: center !important;
  }
}

@media (max-width: 760px) {
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  html,
  body,
  main[class$="-page"],
  [class^="gc"][class$="-page"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100% !important;
  }

  

  

  

  

  

  

  

  

  

  

  .hero {
    min-height: 620px !important;
    height: auto !important;
    padding-bottom: 48px !important;
    background-position: center bottom !important;
    background-size: cover !important;
  }

  .hero-copy,
  .hero-copy.page-wrap {
    width: min(100%, calc(100vw - 32px)) !important;
    max-width: 430px !important;
    padding-top: clamp(126px, 21vh, 158px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .hero-copy h1 {
    max-width: 430px !important;
    font-size: clamp(34px, 10vw, 50px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.7px !important;
  }

  .hero-copy p {
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(15px, 4.2vw, 18px) !important;
    line-height: 1.35 !important;
  }

  .button,
  .hero .button {
    width: min(220px, 72vw) !important;
    min-width: 0 !important;
    height: 50px !important;
    font-size: 16px !important;
  }

  .info-strip {
    width: min(100%, calc(100vw - 32px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    text-align: center !important;
  }

  .page-wrap,
  .services .page-wrap,
  .destinations .page-wrap,
  .needs .page-wrap,
  .cta .page-wrap,
  .service-area .page-wrap {
    width: min(100%, calc(100vw - 32px)) !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .service-area,
  .services,
  .destinations,
  .needs,
  .cta {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  .county-grid {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
    text-align: center !important;
  }

  .county-copy h2,
  .section-heading h2,
  .cta h2 {
    font-size: clamp(30px, 8.7vw, 42px) !important;
    line-height: 1.12 !important;
  }

  .county-copy p,
  .section-heading p,
  .cta p {
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(15px, 4.1vw, 18px) !important;
    line-height: 1.35 !important;
  }

  .county-map-card {
    width: min(360px, 92vw) !important;
    justify-self: center !important;
  }

  .service-cards.three-col,
  .small-cards {
    width: 100% !important;
    max-width: 430px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: 18px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .feature-card,
  .compact-card {
    width: 100% !important;
    max-width: 430px !important;
    min-height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 30px 20px !important;
    border-radius: 24px !important;
    text-align: center !important;
  }

  .feature-icon {
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 16px !important;
  }

  .feature-card h3,
  .compact-card h3 {
    font-size: clamp(19px, 5.6vw, 25px) !important;
    line-height: 1.16 !important;
  }

  .feature-card p,
  .compact-card p {
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .destination-list {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 14px !important;
  }

  .destination-pill {
    width: 100% !important;
    min-height: 78px !important;
    padding: 14px 18px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 24px !important;
  }

  .destination-pill span {
    max-width: 100% !important;
    font-size: clamp(14px, 4.2vw, 17px) !important;
    line-height: 1.22 !important;
    text-align: center !important;
  }

  .footer-inner {
    width: min(100%, calc(100vw - 32px)) !important;
    max-width: 430px !important;
    min-height: 0 !important;
    padding: 28px 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }

  .footer-nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 16px !important;
    white-space: normal !important;
  }

  .footer-contact {
    justify-self: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  section[id] {
    scroll-margin-top: 90px !important;
  }
}

@media (max-width: 380px) {
  .page-wrap,
  .hero-copy,
  .hero-copy.page-wrap,
  .service-cards.three-col,
  .small-cards,
  .destination-list,
  .footer-inner {
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: 100% !important;
  }

  

  .hero-copy h1 {
    font-size: clamp(31px, 9.8vw, 40px) !important;
  }
}

/* ========================================================================== 
   COUNTY HERO TYPOGRAPHY + BRAND + CAR POSITION — FINAL OVERRIDE
   ========================================================================== */

/* Keep the county name readable against the light hero and enlarge the logo. */




@media (min-width: 1201px) {
  

  /* Reference typography: 70.86px size, 80px line-height, 700 weight. */
  .hero-copy h1,
  .hero-copy.page-wrap h1 {
    max-width: 940px !important;
    font-size: 70.86px !important;
    font-weight: 700 !important;
    line-height: 80px !important;
    letter-spacing: 0 !important;
  }

  .hero-copy p,
  .hero-copy.page-wrap p {
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 30px !important;
    letter-spacing: 0 !important;
  }

  /* Restore the original full-size hero image and position it lower so more is cropped at the bottom. */
  .hero {
    background-size: cover, auto, cover !important;
    background-position: center calc(100% + 68px), center, center !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  

  .hero-copy h1,
  .hero-copy.page-wrap h1 {
    max-width: 820px !important;
    font-size: clamp(52px, 5.6vw, 64px) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  .hero-copy p,
  .hero-copy.page-wrap p {
    font-size: clamp(18px, 1.9vw, 21px) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
  }

  .hero {
    background-size: cover, auto, cover !important;
    background-position: center calc(100% + 58px), center, center !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  

  .hero-copy h1,
  .hero-copy.page-wrap h1 {
    font-size: clamp(43px, 6.7vw, 54px) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  .hero-copy p,
  .hero-copy.page-wrap p {
    font-size: clamp(17px, 2.3vw, 19px) !important;
    font-weight: 400 !important;
  }

  .hero {
    background-position: center calc(100% + 40px), center, center !important;
  }
}

@media (max-width: 760px) {
  

  

  

  .hero-copy h1,
  .hero-copy.page-wrap h1 {
    font-size: clamp(30px, 9vw, 42px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  .hero-copy p,
  .hero-copy.page-wrap p {
    font-size: clamp(14px, 4vw, 17px) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
  }

  /* Preserve the original mobile cover size while positioning the vehicle lower. */
  .hero {
    background-position: center calc(100% + 28px), center, center !important;
  }
}

/* ==========================================================================
   COUNTY FINAL SCALE UPDATE
   - Keeps the restored navbar behavior and all earlier hero/logo changes.
   - Makes every H1/H2/H3 heading 25% smaller than its original size.
   - Makes the feature cards and compact cards 15% smaller than their
     original dimensions without changing the page content.
   ========================================================================== */

/* Preserve the shared navbar class pairing used by the restored JavaScript. */


/* ------------------------------
   HEADINGS: 25% SMALLER
   ------------------------------ */

/* Large desktop hero heading: 75% of 70.86px / 80px. */
@media (min-width: 1201px) {
  .hero-copy h1,
  .hero-copy.page-wrap h1 {
    max-width: 760px !important;
    font-size: 53.145px !important;
    line-height: 60px !important;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .hero-copy h1,
  .hero-copy.page-wrap h1 {
    max-width: 680px !important;
    font-size: clamp(39px, 4.2vw, 48px) !important;
    line-height: 1.12 !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .hero-copy h1,
  .hero-copy.page-wrap h1 {
    max-width: 540px !important;
    font-size: clamp(32.25px, 5.025vw, 40.5px) !important;
    line-height: 1.12 !important;
  }
}

@media (max-width: 760px) {
  .hero-copy h1,
  .hero-copy.page-wrap h1 {
    max-width: 300px !important;
    font-size: clamp(22.5px, 6.75vw, 31.5px) !important;
    line-height: 1.1 !important;
  }
}

/* Main section headings. */
.section-heading h2 {
  font-size: clamp(28.5px, 2.97vw, 45px) !important;
  line-height: 1.12 !important;
}

/* County heading. */
.county-copy h2 {
  font-size: clamp(31.5px, 3.6vw, 54px) !important;
  line-height: 1.08 !important;
}

/* Card headings. */
.feature-card h3 {
  font-size: clamp(13.5px, 1.3125vw, 21.75px) !important;
  line-height: 1.18 !important;
}

.compact-card h3 {
  font-size: clamp(13.5px, 1.275vw, 21px) !important;
  line-height: 1.15 !important;
}

@media (max-width: 760px) {
  .section-heading h2 {
    font-size: clamp(21px, 5.85vw, 28.5px) !important;
  }

  .county-copy h2 {
    font-size: clamp(25.5px, 6.75vw, 31.5px) !important;
  }

  .feature-card h3,
  .compact-card h3 {
    font-size: clamp(13.5px, 4vw, 16px) !important;
  }
}

/* ------------------------------
   CARDS: 15% SMALLER
   ------------------------------ */

.service-cards.three-col {
  gap: clamp(13.6px, 1.87vw, 28.9px) !important;
  margin-top: clamp(38.25px, 4.25vw, 61.2px) !important;
}

.feature-card {
  min-height: clamp(174.25px, 20.4vw, 289px) !important;
  padding:
    clamp(37.4px, 4.08vw, 59.5px)
    clamp(15.3px, 1.7vw, 28.9px)
    clamp(20.4px, 2.55vw, 39.1px) !important;
  border-radius: clamp(22.1px, 2.21vw, 35.7px) !important;
}

.feature-icon {
  width: clamp(59.5px, 5.95vw, 93.5px) !important;
  height: clamp(59.5px, 5.95vw, 93.5px) !important;
  margin-bottom: 17px !important;
}

.compact-card {
  min-height: clamp(119px, 11.05vw, 182.75px) !important;
  padding:
    clamp(34px, 3.4vw, 55.25px)
    clamp(18.7px, 2.04vw, 32.3px)
    clamp(20.4px, 2.295vw, 35.7px) !important;
}

@media (max-width: 900px) {
  .service-cards.three-col {
    gap: 13.6px !important;
  }
}

@media (max-width: 760px) {
  .service-cards.three-col {
    gap: 13.6px !important;
    margin-top: 28.9px !important;
  }

  .feature-card,
  .compact-card {
    min-height: auto !important;
    padding: 28.9px clamp(15.3px, 5.1vw, 23.8px) 23.8px !important;
    border-radius: 20.4px !important;
  }

  .feature-icon {
    width: 56.1px !important;
    height: 56.1px !important;
    margin-bottom: 17px !important;
  }
}


/* ==========================================================================
   COUNTY FINAL CORRECTION
   - Restores the navbar interactions for normal and file:// previews.
   - Makes all heading text another 10% smaller than the previous version.
   - Moves the hero heading, subtitle, and Book A Ride button lower.
   ========================================================================== */

/* Clear visual feedback for the working mobile menu button. */


/* Hero header: another 10% reduction from the previous size. */
@media (min-width: 1201px) {
  .hero-copy,
  .hero-copy.page-wrap {
    padding-top: clamp(225px, 27vh, 290px) !important;
  }

  .hero-copy h1,
  .hero-copy.page-wrap h1 {
    max-width: 700px !important;
    font-size: 47.8305px !important;
    line-height: 54px !important;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .hero-copy,
  .hero-copy.page-wrap {
    padding-top: clamp(210px, 26vh, 265px) !important;
  }

  .hero-copy h1,
  .hero-copy.page-wrap h1 {
    max-width: 620px !important;
    font-size: clamp(35.1px, 3.78vw, 43.2px) !important;
    line-height: 1.12 !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .hero-copy,
  .hero-copy.page-wrap {
    padding-top: clamp(180px, 25vh, 220px) !important;
  }

  .hero-copy h1,
  .hero-copy.page-wrap h1 {
    max-width: 500px !important;
    font-size: clamp(29.025px, 4.5225vw, 36.45px) !important;
    line-height: 1.12 !important;
  }
}

@media (max-width: 760px) {
  .hero-copy,
  .hero-copy.page-wrap {
    padding-top: clamp(165px, 26vh, 210px) !important;
  }

  .hero-copy h1,
  .hero-copy.page-wrap h1 {
    max-width: 280px !important;
    font-size: clamp(20.25px, 6.075vw, 28.35px) !important;
    line-height: 1.1 !important;
  }
}

/* Every remaining H2/H3 heading: another 10% smaller. */
.section-heading h2 {
  font-size: clamp(25.65px, 2.673vw, 40.5px) !important;
}

.county-copy h2 {
  font-size: clamp(28.35px, 3.24vw, 48.6px) !important;
}

.feature-card h3 {
  font-size: clamp(12.15px, 1.18125vw, 19.575px) !important;
}

.compact-card h3 {
  font-size: clamp(12.15px, 1.1475vw, 18.9px) !important;
}

@media (max-width: 760px) {
  .section-heading h2 {
    font-size: clamp(18.9px, 5.265vw, 25.65px) !important;
  }

  .county-copy h2 {
    font-size: clamp(22.95px, 6.075vw, 28.35px) !important;
  }

  .feature-card h3,
  .compact-card h3 {
    font-size: clamp(12.15px, 3.6vw, 14.4px) !important;
  }
}

/* ========================================================================== 
   COUNTY NAVBAR GLASS BACKGROUND RESTORE
   Restores the translucent navbar layer while preserving the current sizing,
   hero placement, scroll animation, and mobile menu functionality.
   ========================================================================== */


/* ==========================================================================
   COUNTY SCROLLED NAVBAR MATCH
   Keeps the transparent/glass navbar at the top, then changes it into the
   compact full-width blue bar shown in the supplied reference after scrolling.
   ========================================================================== */


/* ========================================================================== 
   FINAL NAVBAR TRANSPARENCY BEHAVIOR
   Clear over the hero at the top of the page; translucent glass only after
   the page has been scrolled. This overrides the previous solid-blue patch.
   ========================================================================== */






/* ========================================================================== 
   COUNTY NAVBAR TOP-SPACING CORRECTION
   At the top of the page the navbar returns to its original lower, clear
   position. Once scrolling begins it moves to the top edge and becomes glass.
   ========================================================================== */


/* Keep the hero group comfortably below the lowered transparent navbar. */
@media (min-width: 1201px) {
  .hero-copy,
  .hero-copy.page-wrap {
    padding-top: clamp(260px, 31vh, 325px) !important;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .hero-copy,
  .hero-copy.page-wrap {
    padding-top: clamp(235px, 29vh, 290px) !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .hero-copy,
  .hero-copy.page-wrap {
    padding-top: clamp(205px, 28vh, 245px) !important;
  }
}

/* ========================================================================== 
   FINAL SCROLLED NAVBAR LOWER OFFSET
   Keeps the navbar clear in its normal position, then places the glass navbar
   slightly below the browser edge after scrolling instead of pinning it flush
   against the very top.
   ========================================================================== */


/* ========================================================================== 
   STABLE NAVBAR MOTION FIX — JULY 2026
   Keeps the navbar geometry identical before and after scrolling. The only
   positional animation is a small upward translate; no width, padding, gap,
   font-size, or child-position values change during the transition.
   ========================================================================== */






/* ========================================================================== 
   FINAL NAVBAR VERTICAL-ONLY TRANSITION FIX
   Top state: transparent and slightly lower over the hero.
   Scrolled state: moves straight upward until it is flush with the viewport.
   No horizontal position, width, padding, gap, or child layout changes.
   ========================================================================== */


/* ========================================================================== 
   FINAL NAVBAR MOTION — VERTICAL ONLY
   The navbar keeps exactly the same horizontal geometry in both states.
   It starts slightly lower while transparent, then moves straight upward
   to the viewport edge when the glass background is activated.
   ========================================================================== */




/* ========================================================================== 
   FINAL SMOOTH NAVBAR TRANSITION
   Keeps all horizontal geometry locked and eases only the vertical movement
   plus the glass-background appearance/disappearance.
   ========================================================================== */




/* ========================================================================== 
   CONTINUOUS NAVBAR SCROLL MOTION
   Uses scroll-driven CSS variables so the navbar never snaps between states.
   The glass layer remains full width and fades independently from the content.
   ========================================================================== */




/* ========================================================================== 
   FULL-WIDTH GLASS NAVBAR LAYER
   The glass background is detached from the moving navbar content so it
   always spans the full viewport and always begins at the very top edge.
   ========================================================================== */




/* ========================================================================== 
   FINAL NAVBAR GLASS CONTAINMENT FIX
   The full-width glass is part of the navbar itself. Only the navbar content
   moves vertically, so the logo, links, and buttons always remain inside it.
   ========================================================================== */




/* ========================================================================== 
   DEFINITIVE NAVBAR SHELL
   One full-width fixed bar. The glass belongs to the bar, and one inner row
   moves only on the Y axis. No child can drift sideways during the transition.
   ========================================================================== */

/* ==========================================================================
   DEFINITIVE NAVBAR IMPLEMENTATION
   One fixed, full-width navbar shell with one inner max-width row. The top
   state is transparent; .navbar-scrolled adds the full-width glass effect.
   Only a subtle Y-axis movement is animated.
   ========================================================================== */

.site-navbar {
  position: fixed;
  z-index: 2147482000;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 84px;
  min-height: 84px;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: blur(0) saturate(100%);
  backdrop-filter: blur(0) saturate(100%);
  transition:
    background-color 360ms ease,
    border-color 360ms ease,
    box-shadow 360ms ease,
    -webkit-backdrop-filter 360ms ease,
    backdrop-filter 360ms ease;
}

.site-navbar__inner {
  width: min(1280px, calc(100% - 64px));
  height: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 2vw, 34px);
  transform: translate3d(0, 52px, 0);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.site-navbar.navbar-scrolled {
  background-color: rgba(78, 153, 214, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 30px rgba(28, 74, 116, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}

.site-navbar.navbar-scrolled .site-navbar__inner {
  transform: translate3d(0, 0, 0);
}

.site-navbar .brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 14px;
  margin: 0;
  color: #111111;
  line-height: 1;
  transform: none;
}

.site-navbar .brand img {
  width: clamp(150px, 11vw, 190px);
  height: auto;
  max-width: none;
  object-fit: contain;
  flex: 0 0 auto;
}

.site-navbar .brand-divider {
  position: static;
  display: inline-block;
  color: rgba(17, 17, 17, 0.58);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transform: none;
}

.site-navbar .brand-county {
  position: static;
  display: inline-block;
  margin-left: -5px;
  color: #111111;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform: none;
}

.site-navbar .nav-links {
  min-width: 0;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 1.65vw, 30px);
  color: #ffffff;
  white-space: nowrap;
  transform: none;
}

.site-navbar .nav-links > a {
  margin: 0;
  color: inherit;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 600;
  line-height: 1;
  transform: none;
  transition: opacity 160ms ease, box-shadow 160ms ease;
}

.site-navbar .nav-links > a:hover,
.site-navbar .nav-links > a:focus-visible {
  opacity: 0.82;
}

.site-navbar .nav-contact,
.site-navbar .nav-partner {
  height: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(20px, 1.6vw, 28px);
  border-radius: 999px;
}

.site-navbar .nav-contact {
  border: 1.2px solid rgba(255, 255, 255, 0.95);
  background: transparent;
}

.site-navbar .nav-links > a.nav-partner,
.site-navbar .nav-partner {
  border: 1.2px solid #ffffff;
  color: #000000 !important;
  background: #ffffff;
  font-weight: 700;
}

.site-navbar .menu-toggle {
  display: none;
}

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

@media (min-width: 761px) and (max-width: 1260px) {
  .site-navbar__inner {
    width: min(100%, calc(100% - 44px));
    gap: 16px;
  }

  .site-navbar .brand {
    gap: 10px;
  }

  .site-navbar .brand img {
    width: clamp(132px, 12.5vw, 158px);
  }

  .site-navbar .brand-divider,
  .site-navbar .brand-county {
    font-size: 10px;
  }

  .site-navbar .nav-links {
    gap: clamp(11px, 1.25vw, 18px);
  }

  .site-navbar .nav-links > a {
    font-size: clamp(10.5px, 1.12vw, 13.5px);
  }

  .site-navbar .nav-contact,
  .site-navbar .nav-partner {
    height: 38px;
    min-height: 38px;
    padding: 0 16px;
  }
}

@media (max-width: 760px) {
  .site-navbar,
  .site-navbar.navbar-scrolled {
    height: 74px;
    min-height: 74px;
    background-color: rgba(80, 153, 212, 0.82);
    border-bottom-color: rgba(255, 255, 255, 0.20);
    box-shadow: 0 10px 28px rgba(34, 83, 127, 0.12);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    backdrop-filter: blur(12px) saturate(125%);
  }

  .site-navbar__inner,
  .site-navbar.navbar-scrolled .site-navbar__inner {
    width: 100%;
    height: 74px;
    min-height: 74px;
    padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
    gap: 12px;
    transform: none;
    transition: none;
  }

  .site-navbar .brand {
    gap: 7px;
  }

  .site-navbar .brand img {
    width: clamp(104px, 30vw, 126px);
  }

  .site-navbar .brand-divider,
  .site-navbar .brand-county {
    font-size: clamp(7.5px, 2.2vw, 9.5px);
  }

  .site-navbar .menu-toggle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    flex: 0 0 40px;
    background: rgba(255, 255, 255, 0.20);
    cursor: pointer;
  }

  .site-navbar .menu-toggle span {
    width: 21px;
    height: 2px;
    border-radius: 999px;
    background: #ffffff;
    transform-origin: center;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .site-navbar .menu-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-navbar .menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
  }

  .site-navbar .menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-navbar .nav-links {
    position: fixed;
    z-index: 2147482001;
    top: 82px;
    left: 50%;
    right: auto;
    width: min(290px, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
    margin: 0;
    padding: 14px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    border-radius: 20px;
    color: #ffffff;
    background: rgba(70, 133, 190, 0.96);
    box-shadow: 0 16px 28px rgba(34, 69, 106, 0.24);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    white-space: normal;
    transform: translateX(-50%);
  }

  .site-navbar .nav-links.is-open {
    display: flex;
  }

  .site-navbar .nav-links > a,
  .site-navbar .nav-contact,
  .site-navbar .nav-partner {
    width: 100%;
    min-height: 40px;
    height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 14px;
  }

  .site-navbar .nav-contact {
    border: 1px solid rgba(255, 255, 255, 0.75);
  }

  .site-navbar .nav-links > a.nav-partner,
  .site-navbar .nav-partner {
    color: #000000 !important;
    background: #ffffff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-navbar,
  .site-navbar__inner {
    transition-duration: 1ms;
  }
}

/* ==========================================================================
   COUNTY NAVBAR LOGO — 20% SIZE INCREASE
   Enlarges the header logo consistently across desktop, tablet, and mobile.
   ========================================================================== */
.site-navbar .brand img {
  width: clamp(180px, 13.2vw, 228px) !important;
}

@media (min-width: 761px) and (max-width: 1260px) {
  .site-navbar .brand img {
    width: clamp(158.4px, 15vw, 189.6px) !important;
  }
}

@media (max-width: 760px) {
  .site-navbar .brand img {
    width: clamp(124.8px, 36vw, 151.2px) !important;
  }
}


/* ==========================================================================
   FINAL COUNTY NAME SIZE UPDATE
   Enlarges the county label beside the navbar logo across all breakpoints.
   ========================================================================== */
.site-navbar .brand-county {
  font-size: 18px !important;
  margin-left: -2px !important;
  letter-spacing: 0.025em !important;
}

.site-navbar .brand-divider {
  font-size: 15px !important;
}

@media (min-width: 761px) and (max-width: 1260px) {
  .site-navbar .brand-county {
    font-size: 13px !important;
    margin-left: -2px !important;
  }

  .site-navbar .brand-divider {
    font-size: 11.5px !important;
  }
}

@media (max-width: 760px) {
  .site-navbar .brand-county {
    font-size: clamp(10.5px, 3vw, 13px) !important;
    margin-left: -1px !important;
  }

  .site-navbar .brand-divider {
    font-size: clamp(9px, 2.55vw, 11px) !important;
  }
}

body > main, body > footer.footer { display: none; }
.coming-soon-page { min-height: 100vh; position: relative; overflow: hidden; color: #292929; background: #ffffff; font-family: "Public Sans", Arial, sans-serif; }
.coming-soon-header { height: 138px; padding: 0 clamp(24px, 3.5vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.coming-soon-brand { display: flex; align-items: center; gap: 7px; color: #292929; font-size: 18px; text-decoration: none; }
.coming-soon-brand img { width: 126px; height: auto; display: block; }
.coming-soon-county { width: 125px; height: 35px; display: grid; place-items: center; border-radius: 15px; color: #ffffff; background: #6f6f6f; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; }
.coming-soon-hero { min-height: calc(100vh - 138px); box-sizing: border-box; display: grid; place-items: center; padding: 20px; }
.coming-soon-copy { max-width: 720px; margin: 0 auto; text-align: center; }
.coming-soon-eyebrow { margin: 0 0 10px; font-size: 20px; line-height: 1.4; }
.coming-soon-copy h1 { margin: 0; font-size: clamp(42px, 4vw, 54px); font-weight: 400; letter-spacing: -1.1px; line-height: 1.15; }
.coming-soon-copy p:not(.coming-soon-eyebrow) { margin: 18px 0 0; color: #5b5b5b; font-size: 16px; line-height: 1.6; }
.coming-soon-drive { position: absolute; right: 0; bottom: 0; left: 0; height: 132px; }
.coming-soon-left-shape, .coming-soon-message { position: absolute; bottom: 54px; height: 31px; background: #747474; }
.coming-soon-left-shape { left: 0; width: 161px; clip-path: polygon(0 0, 65px 0, 161px 100%, 0 100%); }
.coming-soon-message { right: 0; left: clamp(540px, 53vw, 635px); display: flex; align-items: center; padding-left: 120px; color: #ffffff; font-size: 18px; font-weight: 400; letter-spacing: 5px; white-space: nowrap; clip-path: polygon(0 0, 100% 0, 100% 100%, 80px 100%); }
.coming-soon-drive img { position: absolute; bottom: 0; left: clamp(100px, 15.4vw, 184px); width: min(445px, 42vw); height: auto; }
@media (max-width: 860px) { .coming-soon-header { height: 95px; padding: 0 20px; } .coming-soon-brand img { width: 112px; } .coming-soon-brand { font-size: 16px; } .coming-soon-hero { min-height: calc(100vh - 95px); padding: 20px; } .coming-soon-eyebrow { font-size: 18px; } .coming-soon-message { left: 52%; padding-left: 58px; font-size: 13px; letter-spacing: 3px; } .coming-soon-drive img { bottom: 10px; left: 24px; width: min(390px, 58vw); } }
@media (max-width: 600px) { .coming-soon-header { height: 82px; padding: 0 16px; } .coming-soon-brand img { width: min(112px, 32vw); } .coming-soon-brand { gap: 5px; font-size: 14px; } .coming-soon-county { width: min(105px, 31vw); height: 32px; font-size: 10px; } .coming-soon-hero { min-height: calc(100vh - 82px); padding: 16px; } .coming-soon-eyebrow { font-size: 16px; } .coming-soon-copy h1 { font-size: 38px; } .coming-soon-copy p:not(.coming-soon-eyebrow) { font-size: 14px; } .coming-soon-left-shape { display: none; } .coming-soon-message { right: 0; left: 0; bottom: 18px; height: 38px; justify-content: flex-end; padding: 0 14px 0 42%; font-size: 10px; letter-spacing: 1.8px; clip-path: none; } .coming-soon-drive img { bottom: 26px; left: -4px; width: min(315px, 66vw); } }