/* =========================================================================
   Freedom Plumbing — theme stylesheet
   Ported from the approved HTML5 comp. Section order and rule order below
   deliberately mirror the original file so future comps can be diffed
   against it easily.
   ========================================================================= */

:root {
  --navy: #292a86;
  --navy-dark: #1c1d5e;
  --red: #cc1f27;
  --red-dark: #a5181f;
  --gold: #ddb469;
  --lavender: #e4e6f5;
  --lavender-soft: #f4f5fb;
  --white: #ffffff;
  --ink: #2e2f63;
  --muted: #5c5d8e;
  --green: #1f9d55;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 18px;
  --shadow: 0 12px 30px -12px rgba(30, 31, 90, 0.25);
  --shadow-sm: 0 1px 2px rgba(30, 31, 90, 0.06), 0 4px 12px -6px rgba(30, 31, 90, 0.14);
  --shadow-lg: 0 2px 6px rgba(30, 31, 90, 0.06), 0 30px 60px -24px rgba(30, 31, 90, 0.38);
  --line: #e4e6f2;
  --font-display: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --z-sticky: 50;
  --z-mobilebar: 60;
  --wrap-max: 1240px;
  --wrap-pad: 40px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-feature-settings: "cv11", "ss01";
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 108%;
  margin: 0;
  color: var(--navy);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

::selection {
  background: var(--navy);
  color: #fff;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

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

img {
  max-width: 100%;
  display: block;
  height: auto;
}

button {
  font-family: inherit;
}

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--red);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

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

.btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.06s;
}

.btn-lg {
  padding: 17px 28px;
  font-size: 16px;
}

.btn-sm {
  padding: 10px 16px;
  font-size: 14px;
  gap: 8px;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.72);
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px rgba(41, 42, 134, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
}

.btn-ghost svg {
  fill: var(--red);
}

.btn-ghost:hover {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--navy), var(--shadow-sm);
}

.btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.btn-red {
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(204, 31, 39, 0.55);
}

.btn-red:hover {
  background: var(--red-dark);
  box-shadow: 0 14px 28px -10px rgba(204, 31, 39, 0.6);
}

.btn-navy {
  background: var(--navy);
  color: #fff;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
}

.btn-outline:hover {
  background: var(--navy);
  color: #fff;
}

.btn-white {
  background: #fff;
  color: var(--red);
}

/* Skip link sits above the sticky header. */
.skip-link:focus {
  z-index: 100000;
}

/* ============ HEADER ============ */
/*
 * --fp-hero-bg is injected from PHP with an absolute URL. Keep it absolute:
 * a relative url() inside a custom property resolves against the stylesheet
 * that *uses* it, not the one that declares it, which silently breaks.
 *
 * No overflow:hidden here — the navigation lives inside this region, and
 * clipping would cut off the dropdown submenus on interior pages. The hero
 * image's negative margin is tuned to land exactly on the region's edge, so
 * there is nothing to clip anyway.
 */
.hero-region {
  position: relative;
  background-image: var(--fp-hero-bg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.stars-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.55) 1.5px, transparent 1.5px);
  background-size: 34px 34px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, black 40%, transparent 75%);
  mask-image: radial-gradient(ellipse at 30% 20%, black 40%, transparent 75%);
  pointer-events: none;
}

.topbar {
  position: relative;
  z-index: 2;
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--wrap-pad) 20px;
}

.logo img,
.logo .custom-logo {
  height: 76px;
  width: auto;
  max-width: none;
}

.call-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f5f5fb;
  border-radius: 10px;
  padding: 12px 22px;
  box-shadow: var(--shadow);
}

.call-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.call-icon svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.call-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--navy);
}

.call-number {
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
}

.call-hours {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 500;
}

.navbar {
  position: relative;
  z-index: 3;
}

.navbar .wrap {
  background: var(--navy);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--wrap-pad);
  box-shadow: var(--shadow);
}

.nav-links {
  display: flex;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}

.nav-links a:hover,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a {
  color: var(--gold);
}

/* Dropdowns for the Services / Service Areas submenus. */
.nav-links li {
  position: relative;
}

.nav-links .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  min-width: 240px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  list-style: none;
  margin: 0;
  padding: 10px 0;
  display: none;
  z-index: 20;
}

.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu {
  display: block;
}

/*
 * An invisible bridge across the gap between the trigger and the panel.
 *
 * The panel is offset 14px below the menu item so it reads as a separate
 * card. Without this, moving the cursor down from "Services" leaves the <li>
 * before it reaches the panel — :hover drops and the menu vanishes mid-reach.
 * The bridge is a child of the panel, so hovering it still counts as hovering
 * the <li>, which keeps the menu open.
 *
 * Its height matches the offset exactly and it starts at the item's bottom
 * edge, so it never covers the link itself and cannot swallow a click.
 */
.nav-links .sub-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.nav-links .sub-menu a {
  display: block;
  padding: 9px 22px;
  color: var(--ink);
  font-weight: 500;
  font-size: 14.5px;
}

.nav-links .sub-menu a:hover {
  color: var(--red);
  background: var(--lavender-soft);
}

.service-areas-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}

.service-areas-link svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

/* ============ HERO ============ */
.hero {
  position: relative;
  z-index: 1;
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  padding: 44px var(--wrap-pad) 64px;
  gap: 28px;
}

.hero-copy .fp-live {
  margin-bottom: 22px;
}

.hero-copy h1 {
  font-size: clamp(40px, 4.1vw, 60px);
  font-weight: 900;
  font-stretch: 104%;
  text-transform: uppercase;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 0.98;
}

.hero-copy .hero-lead {
  margin-top: 22px;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 34em;
}

.hero-actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-text-us {
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--muted);
}

.hero-text-us a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(41, 42, 134, 0.3);
  text-underline-offset: 3px;
}

.hero-text-us a:hover {
  color: var(--red);
  text-decoration-color: currentColor;
}

/* "What's going on?" — symptom shortcuts straight into the right service. */
.hero-finder {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(41, 42, 134, 0.12);
  max-width: 560px;
}

.hero-finder__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-finder__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-finder__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(41, 42, 134, 0.14), 0 1px 2px rgba(30, 31, 90, 0.06);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease), color 0.2s var(--ease);
}

.hero-finder__chip svg {
  width: 16px;
  height: 16px;
  padding: 3px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--lavender);
  fill: var(--navy);
  transition: background-color 0.2s var(--ease), fill 0.2s var(--ease);
}

.hero-finder__chip:hover {
  background: #fff;
  color: var(--red);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(204, 31, 39, 0.35), var(--shadow-sm);
}

.hero-finder__chip:hover svg {
  background: var(--red);
  fill: #fff;
}

.hero-image {
  position: relative;
  align-self: end;
  /* Cancels the section's bottom padding so the crew stands on the true edge. */
  margin-bottom: -64px;
}

.hero-image > img {
  width: 100%;
  max-width: 660px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 30px 26px rgba(30, 31, 90, 0.22));
}

/* Floating proof cards over the crew photo. */
.hero-float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), var(--shadow-lg);
  color: var(--navy);
}

.hero-float--rating {
  left: -4%;
  bottom: 26%;
  transition: transform 0.25s var(--ease);
}

.hero-float--rating:hover {
  transform: translateY(-3px);
}

.hero-float__score {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 900;
  font-stretch: 112%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hero-float__meta {
  display: grid;
  gap: 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.hero-float__stars {
  display: flex;
  gap: 2px;
}

.hero-float__stars svg {
  width: 15px;
  height: 15px;
  fill: var(--gold);
}

/* Both proof cards sit low, over legs and boots — never over a face. The
   crew photo is a crowd shot with heads across its whole top third. */
.hero-float--award {
  right: -3%;
  bottom: 9%;
  max-width: 210px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.hero-float--award img {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

/* ============ TRUST BAR ============ */
.trust-bar {
  position: relative;
  z-index: 2;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -20px 40px -30px rgba(30, 31, 90, 0.35);
}

.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
}

.trust-item + .trust-item {
  border-left: 1px solid var(--line);
}

.trust-item__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 26px 22px;
  transition: background-color 0.2s var(--ease);
}

.trust-item:first-child .trust-item__inner {
  padding-left: 0;
}

a.trust-item__inner:hover {
  background: var(--lavender-soft);
}

.trust-item__visual {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--lavender-soft);
}

.trust-item__visual svg {
  width: 22px;
  height: 22px;
  fill: var(--navy);
}

.trust-item__visual img {
  width: 56px;
  height: 56px;
}

.trust-item:first-child .trust-item__visual {
  width: 56px;
  height: 56px;
  background: none;
}

.trust-item__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.trust-item__title {
  font-family: var(--font-display);
  font-stretch: 104%;
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.2;
  color: var(--navy);
}

.trust-item__figure {
  color: var(--red);
  font-weight: 900;
  margin-right: 2px;
  font-variant-numeric: tabular-nums;
}

.trust-item__text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* ============ SERVICES ============ */
.services {
  padding: 100px 0 90px;
  background: var(--white);
}

.section-head {
  max-width: 640px;
  margin-bottom: 56px;
}

.section-head h2 {
  font-size: 42px;
  text-transform: uppercase;
  margin-top: 14px;
}

.section-head p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

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

.service-card {
  border: 1px solid #e7e8f3;
  border-radius: var(--radius);
  padding: 34px 28px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  background: #fff;
}

.service-card:hover,
.service-card:focus-within {
  box-shadow: var(--shadow);
  border-color: transparent;
  transform: translateY(-4px);
}

.service-icon {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: var(--lavender);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.service-icon svg {
  width: 26px;
  height: 26px;
  fill: var(--navy);
}

.service-card h3 {
  font-size: 19px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.3px;
}

.service-card p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.service-card .card-link {
  display: inline-block;
  margin-top: 16px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.services-footer {
  margin-top: 44px;
  text-align: center;
}

/* ============ PROCESS ============ */
.process {
  position: relative;
  background: var(--navy-dark);
  padding: 100px 0 110px;
  overflow: hidden;
}

.process .stars-overlay {
  opacity: 0.12;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, black 30%, transparent 70%);
  mask-image: radial-gradient(ellipse at 70% 30%, black 30%, transparent 70%);
}

.process .wrap {
  position: relative;
  z-index: 1;
}

.process .section-head h2 {
  color: #fff;
}

.process .eyebrow.on-dark {
  color: var(--gold);
}

.process .section-head p {
  color: #b7b8e0;
}

.pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 30px;
}

.pipeline::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 6%;
  right: 6%;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 18px, transparent 18px 26px);
  border-radius: 6px;
}

.pipe-step {
  position: relative;
  padding: 0 22px;
  text-align: left;
}

.pipe-node {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--red);
  border: 5px solid var(--navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--gold);
  margin-bottom: 26px;
  position: relative;
  z-index: 2;
}

.pipe-node svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

.pipe-step h3 {
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.pipe-step p {
  margin-top: 10px;
  color: #b7b8e0;
  font-size: 14.5px;
  line-height: 1.6;
}

.pipe-step .step-tag {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}

/* ============ WHY US ============ */
.why-us {
  padding: 100px 0;
  background: var(--white);
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.why-image {
  position: relative;
}

.why-image img {
  border-radius: var(--radius);
}

.why-badge {
  position: absolute;
  bottom: -24px;
  right: -24px;
  background: var(--red);
  color: #fff;
  padding: 20px 26px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.why-badge .big {
  font-size: 32px;
  font-weight: 700;
}

.why-badge .small {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.why-copy h2 {
  font-size: 38px;
  text-transform: uppercase;
  margin-top: 14px;
}

.why-copy > p.why-intro {
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.why-list {
  margin-top: 30px;
  display: grid;
  gap: 20px;
}

.why-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.why-check {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--lavender);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.why-check svg {
  width: 15px;
  height: 15px;
  fill: var(--navy);
}

/* h3 rather than h4 so the heading order does not skip a level. */
.why-item h3 {
  font-size: 16.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.why-item p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ============ MEMBERSHIP ============ */
.membership {
  padding: 90px 0;
  background: var(--lavender-soft);
}

.membership-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  overflow: hidden;
}

.membership-copy {
  padding: 46px 44px;
}

.membership-copy h2 {
  font-size: 32px;
  text-transform: uppercase;
  margin-top: 14px;
}

.membership-copy > p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
}

.membership-benefits {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.membership-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.membership-benefits svg {
  width: 20px;
  height: 20px;
  fill: var(--red);
  flex-shrink: 0;
  margin-top: 1px;
}

.membership-price {
  background: var(--navy);
  color: #fff;
  padding: 46px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.membership-price .stars-overlay {
  opacity: 0.12;
  -webkit-mask-image: none;
  mask-image: none;
}

.membership-price > * {
  position: relative;
  z-index: 1;
}

.membership-price .amount {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

.membership-price .per {
  font-size: 14px;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 10px;
}

.membership-price .note {
  font-size: 13.5px;
  color: #c6c7e6;
  margin-top: 18px;
  line-height: 1.6;
  max-width: 240px;
}

.membership-price .btn {
  margin-top: 24px;
}

/* ============ TESTIMONIALS ============ */
.testimonials {
  padding: 110px 0;
  background: var(--lavender-soft);
}

.testimonials.on-white {
  background: var(--white);
}

.reviews-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.6fr);
  gap: 56px;
  align-items: start;
}

.reviews-summary {
  position: sticky;
  top: 96px;
}

.reviews-summary h2 {
  margin-top: 14px;
  font-size: clamp(32px, 3.4vw, 42px);
  text-transform: uppercase;
}

.reviews-summary > p {
  margin-top: 18px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
}

.reviews-summary .btn {
  margin-top: 26px;
}

.reviews-score {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.reviews-score__number {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 900;
  font-stretch: 112%;
  line-height: 0.9;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.reviews-score__meta {
  display: grid;
  gap: 6px;
}

.reviews-score .stars-row {
  margin: 0;
}

.reviews-score .stars-row svg {
  width: 19px;
  height: 19px;
}

.reviews-score__count {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.reviews-score__count svg {
  width: 16px;
  height: 16px;
}

.reviews-wall {
  columns: 2;
  column-gap: 20px;
}

.reviews-wall > * {
  break-inside: avoid;
  margin-bottom: 20px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

.testimonial-card {
  position: relative;
  margin: 0;
  background: #fff;
  border-radius: 14px;
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.testimonial-card::after {
  content: "\201C";
  position: absolute;
  top: 6px;
  right: 18px;
  font-family: Georgia, serif;
  font-size: 72px;
  line-height: 1;
  color: var(--lavender);
  pointer-events: none;
}

.testimonial-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.stars-row {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}

.stars-row svg {
  width: 16px;
  height: 16px;
  fill: var(--gold);
}

.testimonial-card blockquote {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}

.testimonial-by {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.testimonial-card:nth-child(3n + 2) .testimonial-avatar {
  background: var(--red);
}

.testimonial-card:nth-child(3n + 3) .testimonial-avatar {
  background: var(--gold);
  color: var(--navy-dark);
}

.testimonial-name {
  display: block;
  font-weight: 700;
  color: var(--navy);
  font-size: 15px;
}

.testimonial-source {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
}

/* ============ SERVICE AREAS ============ */
.areas {
  padding: 100px 0;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

.areas .stars-overlay {
  opacity: 0.1;
}

.areas .wrap {
  position: relative;
  z-index: 1;
}

.areas-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.areas .eyebrow {
  color: var(--gold);
}

.areas h2 {
  color: #fff;
  font-size: 38px;
  text-transform: uppercase;
  margin-top: 14px;
}

.areas p.lead {
  margin-top: 16px;
  color: #c6c7e6;
  font-size: 16px;
  line-height: 1.6;
}

.area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.area-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 9px 18px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease;
}

a.area-chip:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--gold);
  color: var(--gold);
}

.address-check-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 34px 32px;
  box-shadow: var(--shadow);
}

.address-check-card h3 {
  font-size: 20px;
  font-weight: 700;
  text-transform: none;
  color: var(--navy);
}

.address-check-card > p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.address-input-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.fp-address-input {
  flex: 1;
  min-width: 200px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1.5px solid #dadbef;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease;
}

.fp-address-input:focus {
  border-color: var(--navy);
}

.fp-address-btn {
  padding: 14px 24px;
  white-space: nowrap;
}

.fp-address-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.address-result {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  display: none;
}

.address-result.show {
  display: block;
}

.address-result.state-loading {
  background: var(--lavender-soft);
  color: var(--muted);
}

.address-result.state-yes {
  background: #e9f7ee;
  color: #1e6b3a;
  border: 1px solid #bfe6cc;
}

.address-result.state-no,
.address-result.state-error {
  background: #fcefef;
  color: #9a2a2a;
  border: 1px solid #f2c9c9;
}

.address-result strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}

/* ============ BLOG ============ */
/*
 * Named .fp-blog, not .blog, on purpose. WordPress puts a `blog` class on
 * <body> for the posts index, so a bare `.blog` section rule also matches the
 * body element and dumps the section's padding and background onto the whole
 * page. Any single-token class name here risks the same collision — check new
 * ones against the body_class() list before using them.
 */
.fp-blog {
  padding: 100px 0;
  background: #fff;
}

.blog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  flex-wrap: wrap;
  gap: 20px;
}

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

.blog-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid #e7e8f3;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: block;
  background: #fff;
}

.blog-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.blog-thumb {
  height: 180px;
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.blog-thumb svg {
  width: 38px;
  height: 38px;
  fill: rgba(255, 255, 255, 0.55);
}

.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-body {
  padding: 26px 24px;
}

.blog-date {
  color: var(--red);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.blog-body h3 {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 600;
  text-transform: none;
  line-height: 1.35;
}

.blog-body p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.blog-read {
  margin-top: 16px;
  display: inline-block;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--navy);
}

/* ============ FINAL CTA ============ */
.final-cta {
  background: var(--red);
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}

.final-cta .stars-overlay {
  opacity: 0.12;
  -webkit-mask-image: none;
  mask-image: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6) 1.5px, transparent 1.5px);
}

.final-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
}

.final-cta h2 {
  color: #fff;
  font-size: 36px;
  text-transform: uppercase;
  max-width: 560px;
}

.final-cta-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.final-cta .phone-link {
  color: #fff;
  font-weight: 700;
  font-size: 19px;
}

/* ============ FOOTER ============ */
.site-footer {
  background: var(--navy-dark);
  padding: 70px 0 30px;
  color: #b7b8e0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 50px;
}

.footer-logo img {
  height: 56px;
  width: auto;
  max-width: none;
  /*
   * The brand mark is full-color artwork drawn for light backgrounds — its
   * navy lettering disappears against the footer. Rather than filter it
   * (which flattens the whole logo to a single color), it sits on a small
   * white plate, which reads as a deliberate badge.
   */
  background: #fff;
  padding: 10px 16px;
  border-radius: 10px;
}

.footer-about p {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.7;
  max-width: 280px;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.footer-social a:hover {
  background: var(--red);
}

.footer-social svg {
  width: 17px;
  height: 17px;
  fill: #fff;
}

/* h2 rather than h4: these head the footer landmark's own sections. */
.footer-col__title {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

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

.footer-col a {
  font-size: 14.5px;
}

.footer-col a:hover {
  color: var(--gold);
}

.footer-contact li {
  font-size: 14.5px;
  line-height: 1.6;
}

.footer-contact .hours-line {
  color: #8f90c4;
}

.footer-bottom {
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
}

/* ============ INTERIOR PAGES ============ */
.page-hero {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 66px 0 60px;
}

.page-hero .stars-overlay {
  opacity: 0.12;
}

.page-hero .wrap {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  color: #fff;
  font-size: 44px;
  text-transform: uppercase;
  margin-top: 14px;
}

.page-hero .eyebrow {
  color: var(--gold);
}

.page-hero p.lead {
  margin-top: 16px;
  color: #c6c7e6;
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 680px;
}

.fp-breadcrumbs {
  font-size: 13.5px;
  color: #a2a3d4;
  margin-bottom: 14px;
}

.fp-breadcrumbs a:hover {
  color: var(--gold);
}

.fp-breadcrumbs .sep {
  opacity: 0.5;
  padding: 0 6px;
}

.content-area {
  padding: 70px 0 90px;
}

.entry-content {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 760px;
}

.entry-content > * + * {
  margin-top: 1.25em;
}

.entry-content h2 {
  font-size: 30px;
  margin-top: 1.8em;
}

.entry-content h3 {
  font-size: 22px;
  font-weight: 700;
  margin-top: 1.6em;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.4em;
}

.entry-content li + li {
  margin-top: 0.5em;
}

.entry-content a {
  color: var(--red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.entry-content blockquote {
  border-left: 4px solid var(--gold);
  padding-left: 24px;
  margin-left: 0;
  font-size: 18px;
  color: var(--navy);
}

.entry-content img {
  border-radius: var(--radius);
}

.entry-content .alignwide {
  max-width: min(1100px, 92vw);
  margin-left: calc(50% - min(550px, 46vw));
}

.entry-content .alignfull {
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

.fp-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.fp-pagination {
  margin-top: 56px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fp-pagination .page-numbers {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #e7e8f3;
  font-weight: 600;
  font-size: 14.5px;
}

.fp-pagination .page-numbers.current,
.fp-pagination .page-numbers:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.error-404 {
  padding: 110px 0 120px;
  text-align: center;
}

.error-404 h1 {
  font-size: 92px;
  color: var(--lavender);
}

.error-404 h2 {
  font-size: 32px;
  margin-top: 10px;
  text-transform: uppercase;
}

.error-404 p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
}

.error-404 .btn {
  margin-top: 30px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 40px;
  }

  .hero-image {
    order: -1;
    margin-bottom: 20px;
  }

  .hero-copy h1 {
    font-size: 44px;
  }

  .services-grid,
  .testimonial-grid,
  .blog-grid,
  .fp-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid,
  .areas-inner,
  .membership-card {
    grid-template-columns: 1fr;
  }

  .why-badge {
    right: 16px;
  }

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

  .pipeline {
    grid-template-columns: 1fr 1fr;
    row-gap: 50px;
  }

  .pipeline::before {
    display: none;
  }

  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .navbar.is-open .nav-links {
    display: flex;
    position: absolute;
    top: calc(100% + 10px);
    left: var(--wrap-pad);
    right: var(--wrap-pad);
    background: var(--navy);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 0;
    padding: 10px 0;
    box-shadow: var(--shadow);
    z-index: 30;
  }

  .navbar.is-open .nav-links > li > a {
    display: block;
    padding: 13px 26px;
  }

  .navbar.is-open .nav-links .sub-menu {
    position: static;
    display: block;
    box-shadow: none;
    background: transparent;
    padding: 0 0 8px;
    min-width: 0;
  }

  .navbar.is-open .nav-links .sub-menu::before {
    display: none;
  }

  .navbar.is-open .nav-links .sub-menu a {
    color: #c6c7e6;
    padding: 8px 26px 8px 42px;
    background: transparent;
  }
}

@media (max-width: 700px) {
  :root {
    --wrap-pad: 22px;
  }

  .topbar {
    flex-direction: column;
    gap: 16px;
    padding: 22px 22px 16px;
  }

  .service-areas-link span {
    display: none;
  }

  .hero {
    padding: 32px 22px 0;
  }

  .hero-copy h1 {
    font-size: 36px;
  }

  .services-grid,
  .testimonial-grid,
  .blog-grid,
  .pipeline,
  .fp-archive-grid {
    grid-template-columns: 1fr;
  }

  .services,
  .process,
  .why-us,
  .testimonials,
  .areas,
  .fp-blog,
  .membership {
    padding: 64px 0;
  }

  .section-head h2 {
    font-size: 32px;
  }

  .page-hero h1 {
    font-size: 32px;
  }

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

  .final-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .trust-bar .wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .trust-right {
    text-align: left;
  }

  .trust-rating {
    justify-content: flex-start;
  }

  .membership-copy,
  .membership-price {
    padding: 36px 26px;
  }

  .why-badge {
    bottom: -18px;
    right: 12px;
    padding: 14px 18px;
  }
}

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

  * {
    transition: none !important;
  }
}

/* =========================================================================
   Button icon colors, header variants, and block-editor block styles.
   ========================================================================= */

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-red svg,
.btn-navy svg {
  fill: #fff;
}

.btn-white svg {
  fill: var(--red);
}

.btn-outline svg {
  fill: var(--navy);
}

.btn-outline:hover svg {
  fill: #fff;
}

/* Interior pages reuse the flag backdrop, cropped to just the header band. */
.hero-region--compact {
  padding-bottom: 26px;
  background-position: center 30%;
}

.call-number {
  display: block;
}

.call-number:hover {
  color: var(--red);
}

.service-card h3 a:hover,
.blog-card:hover h3 {
  color: var(--red);
}

/* --- Block styles registered in inc/blocks.php ------------------------- */

.wp-block-button.is-style-fp-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
}

.wp-block-button.is-style-fp-outline .wp-block-button__link:hover {
  background: var(--navy);
  color: #fff;
}

.wp-block-group.is-style-fp-card {
  background: #fff;
  border: 1px solid #e7e8f3;
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow);
}

.wp-block-list.is-style-fp-checklist {
  list-style: none;
  padding-left: 0;
}

.wp-block-list.is-style-fp-checklist li {
  position: relative;
  padding-left: 32px;
}

.wp-block-list.is-style-fp-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lavender)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23292A86'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
}

/* --- Widgets and comments --------------------------------------------- */

.widget {
  margin-bottom: 36px;
}

.widget-title {
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.fp-comments {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid #e7e8f3;
}

.comment-list {
  list-style: none;
  padding-left: 0;
}

.comment-list .children {
  list-style: none;
  padding-left: 28px;
}

/* --- Admin bar offset -------------------------------------------------- */

.admin-bar .navbar.is-open .nav-links {
  top: calc(100% + 10px);
}

/* =========================================================================
   INTERIOR TEMPLATES — service pages, area pages, articles
   ========================================================================= */

/* --- Page hero variants ------------------------------------------------ */

/*
 * Constrain the measure of the hero text, not the hero band itself — putting
 * the max-width on the section stops the navy background halfway across the
 * viewport.
 */
.page-hero--service .page-hero__grid > *,
.page-hero--post .wrap > * {
  max-width: 820px;
}

.page-hero__actions {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.page-hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.page-hero__phone svg {
  width: 18px;
  height: 18px;
  fill: var(--gold);
}

.page-hero__phone:hover {
  color: var(--gold);
}

.page-hero__price {
  margin-top: 18px;
  color: #c6c7e6;
  font-size: 15px;
}

.page-hero__price strong {
  color: #fff;
  font-size: 20px;
}

/* --- Trust strip ------------------------------------------------------- */

.fp-trust-strip {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 38px;
}

.fp-trust-strip__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c6c7e6;
  font-size: 14px;
  font-weight: 600;
}

.fp-trust-strip__item svg {
  width: 18px;
  height: 18px;
  fill: var(--gold);
  flex-shrink: 0;
}

/* --- Two column layout with the conversion rail ------------------------ */

.fp-layout {
  padding: 64px 0 20px;
}

.fp-layout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 60px;
  align-items: start;
}

.fp-layout__main {
  min-width: 0;
}

.fp-layout__main > * + * {
  margin-top: 52px;
}

.fp-layout .entry-content {
  max-width: none;
}

.fp-rail {
  position: sticky;
  top: 28px;
}

.fp-rail__card {
  background: #fff;
  border: 1px solid #e7e8f3;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 26px;
}

.fp-rail__heading {
  font-size: 20px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.3px;
}

.fp-rail__blurb {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.fp-rail__phone {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--lavender-soft);
  transition: background 0.15s ease;
}

.fp-rail__phone:hover {
  background: var(--lavender);
}

.fp-rail__phone svg {
  width: 22px;
  height: 22px;
  fill: var(--red);
  flex-shrink: 0;
}

.fp-rail__phone small {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

.fp-rail__phone strong {
  display: block;
  font-size: 19px;
  color: var(--navy);
  margin-top: 2px;
}

.fp-rail__btn {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
}

.fp-rail__text-link {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fp-rail__text-link:hover {
  color: var(--red);
}

.fp-rail__hours {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #eceef7;
}

.fp-rail__hours-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--navy);
}

.fp-rail__hours-title svg {
  width: 15px;
  height: 15px;
  fill: var(--navy);
}

.fp-rail__hours ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.fp-rail__hours li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink);
}

.fp-rail__hours li span:last-child {
  font-weight: 600;
  text-align: right;
}

.fp-rail__hours-note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.fp-rail__member {
  margin-top: 24px;
  padding: 18px 18px 16px;
  border-radius: 8px;
  background: var(--navy);
  color: #c6c7e6;
}

.fp-rail__member strong {
  display: block;
  color: #fff;
  font-size: 14.5px;
}

.fp-rail__member p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.fp-rail__member a {
  display: inline-block;
  margin-top: 12px;
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
}

/* --- Labelled checklist ------------------------------------------------ */

.fp-checklist__heading {
  font-size: 28px;
  margin-bottom: 22px;
}

.fp-checklist__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.fp-checklist__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.65;
}

.fp-checklist__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lavender);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 3px;
}

.fp-checklist__icon svg {
  width: 14px;
  height: 14px;
  fill: var(--navy);
}

.fp-checklist__list strong {
  color: var(--navy);
}

.fp-checklist__text {
  color: var(--muted);
}

/* --- Pricing ----------------------------------------------------------- */

.fp-pricing h2 {
  font-size: 28px;
  margin-bottom: 22px;
}

.fp-pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.fp-pricing__tier {
  border: 1px solid #e7e8f3;
  border-radius: var(--radius);
  padding: 26px 24px;
  background: #fff;
}

.fp-pricing__name {
  font-weight: 700;
  color: var(--navy);
  font-size: 16px;
}

.fp-pricing__price {
  font-size: 34px;
  font-weight: 900;
  color: var(--red);
  margin-top: 8px;
  line-height: 1;
}

.fp-pricing__note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* --- Callout ----------------------------------------------------------- */

.fp-callout {
  display: flex;
  gap: 18px;
  padding: 26px 26px;
  border-radius: var(--radius);
  background: var(--lavender-soft);
  border-left: 4px solid var(--gold);
}

.fp-callout__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fp-callout__icon svg {
  width: 20px;
  height: 20px;
  fill: var(--navy);
}

.fp-callout h3 {
  font-size: 17px;
  font-weight: 700;
  text-transform: none;
}

.fp-callout p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* --- Mini process ------------------------------------------------------ */

.fp-process-block h2 {
  font-size: 28px;
  margin-bottom: 22px;
}

.fp-mini-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.fp-mini-process__step {
  position: relative;
  border: 1px solid #e7e8f3;
  border-radius: var(--radius);
  padding: 20px 16px 18px;
  text-align: center;
}

.fp-mini-process__num {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
}

.fp-mini-process__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--red);
}

.fp-mini-process__icon svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

.fp-mini-process__label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
}

/* --- FAQ accordion ----------------------------------------------------- */

.fp-faqs h2 {
  font-size: 28px;
  margin-bottom: 22px;
}

.fp-faq {
  border-bottom: 1px solid #e7e8f3;
}

.fp-faq:first-of-type {
  border-top: 1px solid #e7e8f3;
}

.fp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--navy);
  list-style: none;
}

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

.fp-faq summary:hover {
  color: var(--red);
}

.fp-faq summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.fp-faq__marker {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.fp-faq__marker::before,
.fp-faq__marker::after {
  content: "";
  position: absolute;
  background: var(--red);
  border-radius: 2px;
  transition: transform 0.18s ease;
}

.fp-faq__marker::before {
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
}

.fp-faq__marker::after {
  top: 0;
  left: 7px;
  width: 2px;
  height: 16px;
}

.fp-faq[open] .fp-faq__marker::after {
  transform: rotate(90deg);
}

.fp-faq__answer {
  padding: 0 4px 22px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 68ch;
}

/* --- Area page --------------------------------------------------------- */

.area-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}

.area-hero__facts {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}

.area-hero__fact {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #c6c7e6;
  font-size: 14.5px;
  font-weight: 600;
}

.area-hero__fact svg {
  width: 17px;
  height: 17px;
  fill: var(--gold);
  flex-shrink: 0;
}

.area-cta-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 28px;
}

.area-cta-card h2 {
  font-size: 21px;
  text-transform: none;
  letter-spacing: -0.3px;
}

.area-cta-card > p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.area-cta-card__phone {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 15px 16px;
  border-radius: 8px;
  background: var(--navy);
  transition: background 0.15s ease;
}

.area-cta-card__phone:hover {
  background: var(--navy-dark);
}

.area-cta-card__phone svg {
  width: 22px;
  height: 22px;
  fill: var(--gold);
  flex-shrink: 0;
}

.area-cta-card__phone small {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #a2a3d4;
}

.area-cta-card__phone strong {
  display: block;
  font-size: 20px;
  color: #fff;
  margin-top: 2px;
}

.area-cta-card__btn {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
}

.area-cta-card__text {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.area-cta-card__hours {
  list-style: none;
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #eceef7;
  display: grid;
  gap: 8px;
}

.area-cta-card__hours li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink);
}

.area-cta-card__hours li span:last-child {
  font-weight: 600;
}

.content-area--tight {
  padding: 60px 0 20px;
}

.entry-content--wide {
  max-width: 860px;
}

.area-coverage {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 44px;
  padding: 34px 32px;
  background: var(--lavender-soft);
  border-radius: var(--radius);
}

.area-coverage h2 {
  font-size: 20px;
  text-transform: none;
}

.area-coverage__hoods {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 24px;
}

.area-coverage__hoods li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink);
}

.area-coverage__hoods svg {
  width: 15px;
  height: 15px;
  fill: var(--red);
  flex-shrink: 0;
}

.area-coverage__zips {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.7;
}

.area-coverage__note {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

.areas--nearby {
  padding: 76px 0;
}

.areas--nearby .section-head h2 {
  color: #fff;
}

.areas--nearby .eyebrow {
  color: var(--gold);
}

.services--area {
  background: var(--white);
}

/* --- Article ----------------------------------------------------------- */

.fp-article__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.fp-article__meta .sep {
  opacity: 0.6;
}

.fp-article__hero-image {
  background: linear-gradient(to bottom, var(--navy) 0 50%, transparent 50% 100%);
}

.fp-article__hero-image img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.fp-layout--article {
  padding-top: 52px;
}

.fp-article__body {
  font-size: 17.5px;
  line-height: 1.8;
  max-width: 68ch;
}

.fp-article__body h2 {
  font-size: 27px;
}

.fp-article__body h3 {
  font-size: 21px;
}

.fp-article__cta {
  display: flex;
  gap: 20px;
  padding: 30px 30px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #c6c7e6;
}

.fp-article__cta-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fp-article__cta-icon svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}

.fp-article__cta h2 {
  color: #fff;
  font-size: 21px;
  text-transform: none;
}

.fp-article__cta p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.65;
}

.fp-article__cta-actions {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.fp-article__cta-phone {
  color: #fff;
  font-weight: 700;
  font-size: 17px;
}

.fp-article__cta-phone:hover {
  color: var(--gold);
}

.fp-article__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 26px;
  border-top: 1px solid #e7e8f3;
  font-size: 14px;
  color: var(--muted);
}

.fp-article__cats a {
  color: var(--red);
  font-weight: 600;
}

.fp-article__share {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fp-article__share span {
  font-weight: 700;
  color: var(--navy);
}

.fp-article__share a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--lavender-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.fp-article__share a:hover {
  background: var(--navy);
}

.fp-article__share svg {
  width: 16px;
  height: 16px;
  fill: var(--navy);
}

.fp-article__share a:hover svg {
  fill: #fff;
}

/* --- Blog index feature card ------------------------------------------ */

.fp-feature-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  border: 1px solid #e7e8f3;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 30px;
  background: #fff;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fp-feature-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.fp-feature-card__media {
  min-height: 300px;
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
}

.fp-feature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fp-feature-card__placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-feature-card__placeholder svg {
  width: 54px;
  height: 54px;
  fill: rgba(255, 255, 255, 0.5);
}

.fp-feature-card__body {
  padding: 40px 38px;
  align-self: center;
}

.fp-feature-card__body .blog-date {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fp-feature-card__body h2 {
  margin-top: 14px;
  font-size: 30px;
  text-transform: none;
  line-height: 1.2;
}

.fp-feature-card__body p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
}

.fp-feature-card__body .blog-read {
  margin-top: 20px;
}

/* --- Footer hours ------------------------------------------------------ */

.footer-contact .hours-heading {
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 6px;
}

.footer-contact .hours-line--service {
  color: #8f90c4;
  font-size: 13px;
  font-style: italic;
}

.why-experience {
  margin-top: 10px;
  color: var(--navy);
  font-weight: 600;
  font-size: 15.5px;
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1080px) {
  .fp-layout__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .fp-rail {
    position: static;
  }

  .fp-rail__card {
    max-width: 460px;
  }

  .area-hero {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .area-cta-card {
    max-width: 460px;
  }
}

@media (max-width: 980px) {
  .fp-mini-process {
    grid-template-columns: repeat(2, 1fr);
  }

  .area-coverage {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .fp-feature-card {
    grid-template-columns: 1fr;
  }

  .fp-feature-card__media {
    min-height: 220px;
  }
}

@media (max-width: 700px) {
  .fp-layout {
    padding-top: 44px;
  }

  .fp-layout__main > * + * {
    margin-top: 40px;
  }

  .fp-checklist__heading,
  .fp-pricing h2,
  .fp-process-block h2,
  .fp-faqs h2 {
    font-size: 24px;
  }

  .fp-callout,
  .fp-article__cta {
    flex-direction: column;
    padding: 24px 22px;
  }

  .fp-feature-card__body {
    padding: 28px 24px;
  }

  .fp-feature-card__body h2 {
    font-size: 24px;
  }

  .fp-article__body {
    font-size: 16.5px;
  }

  .fp-trust-strip {
    gap: 12px 20px;
  }
}

/* Service hours in the rail — a quieter block beneath the phone hours. */
.fp-rail__service-hours {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed #e2e3f0;
}

.fp-rail__service-hours-title {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

.fp-rail__service-hours ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.fp-rail__service-hours li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}

.footer-contact .hours-heading--service {
  color: #8f90c4;
  margin-top: 12px;
}

/* =========================================================================
   PHOTOGRAPHY — hero photos, the work gallery, service card images, team
   ========================================================================= */

/*
 * Photo heroes.
 *
 * The overlay is deliberately heavy and is layered *over* the photo rather
 * than tinting it. These pages take whatever photograph an editor uploads —
 * bright sky, white bathroom, a snowy driveway — and white text has to stay
 * readable on all of them. A light overlay looks better on the three photos
 * you tested and fails on the fourth.
 *
 * On wide screens the gradient is stronger on the left, where the text sits,
 * so some of the photograph still reads on the right.
 */
.page-hero--photo {
  background-image:
    linear-gradient(100deg, rgba(28, 29, 94, 0.96) 0%, rgba(28, 29, 94, 0.9) 42%, rgba(28, 29, 94, 0.6) 100%),
    var(--fp-hero-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-hero--photo .stars-overlay {
  opacity: 0.06;
}

@media (max-width: 900px) {
  /* Text is full width here, so the whole photo needs holding back. */
  .page-hero--photo {
    background-image:
      linear-gradient(180deg, rgba(28, 29, 94, 0.94) 0%, rgba(28, 29, 94, 0.92) 100%),
      var(--fp-hero-photo);
  }
}

/* --- Recent work gallery ------------------------------------------------ */

.fp-work {
  padding: 96px 0;
  background: var(--white);
}

.fp-work--tinted {
  background: var(--lavender-soft);
}

.fp-work__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.fp-work__item figure {
  margin: 0;
  background: #fff;
  border: 1px solid #e7e8f3;
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fp-work__item figure:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

/*
 * Fixed-ratio window with object-fit. Job photos arrive in every shape —
 * portrait phone shots, wide DSLR frames — and without this the grid rows
 * jump around.
 */
.fp-work__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--lavender);
}

.fp-work__item figcaption {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.fp-work__caption {
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--navy);
}

.fp-work__where {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.fp-work__where svg {
  width: 13px;
  height: 13px;
  fill: var(--red);
  flex-shrink: 0;
}

/* --- Service cards with a photo ----------------------------------------- */

.service-card--photo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.service-card__photo {
  display: block;
  background: var(--lavender);
}

.service-card__photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.service-card--photo h3 {
  margin-top: 0;
}

.service-card--photo > *:not(.service-card__photo) {
  padding-left: 28px;
  padding-right: 28px;
}

.service-card--photo > h3 {
  padding-top: 24px;
}

.service-card--photo > .card-link {
  padding-bottom: 26px;
}

/* --- Team --------------------------------------------------------------- */

.fp-team {
  padding: 96px 0;
  background: var(--white);
}

.fp-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.fp-team-card {
  border: 1px solid #e7e8f3;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.fp-team-card__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  background: var(--lavender);
}

.fp-team-card__placeholder {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-team-card__placeholder svg {
  width: 44px;
  height: 44px;
  fill: rgba(255, 255, 255, 0.45);
}

.fp-team-card__body {
  padding: 24px 24px 26px;
}

.fp-team-card__body h3 {
  font-size: 20px;
  text-transform: none;
}

.fp-team-card__role {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--red);
}

.fp-team-card__bio {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}

.fp-team-card__bio p {
  margin: 0 0 0.8em;
}

.fp-team-card__meta {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #eceef7;
  display: grid;
  gap: 7px;
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 600;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 980px) {
  .fp-work__grid,
  .fp-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .fp-work,
  .fp-team {
    padding: 64px 0;
  }

  .fp-work__grid,
  .fp-team__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   1.3 — CONVERSION LAYER, REFINED COMPONENTS, MOTION
   Appended rather than interleaved so the original comp port above stays
   easy to diff. Rules here intentionally win on source order.
   ========================================================================= */

/* --- Section rhythm ----------------------------------------------------- */

.section-head h2,
.why-copy h2,
.areas h2,
.membership-copy h2,
.final-cta h2,
.page-hero h1 {
  font-stretch: 110%;
  font-weight: 900;
  letter-spacing: -0.015em;
}

.section-head h2 {
  font-size: clamp(32px, 3.6vw, 46px);
}

.section-head p {
  max-width: 36em;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* --- Live "phones open" indicator --------------------------------------- */

.fp-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.fp-live[hidden] {
  display: none;
}

.fp-live__dot {
  position: relative;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9a9bbd;
}

.fp-live.is-open .fp-live__dot {
  background: var(--green);
}

.fp-live.is-open .fp-live__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--green);
  opacity: 0;
  animation: fp-ping 2.2s var(--ease) infinite;
}

@keyframes fp-ping {
  0% { transform: scale(0.6); opacity: 0.7; }
  80%, 100% { transform: scale(1.6); opacity: 0; }
}

.fp-live--pill,
.fp-live--pill-dark {
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
}

.fp-live--pill {
  background: rgba(255, 255, 255, 0.8);
  color: var(--navy);
  box-shadow: inset 0 0 0 1px rgba(41, 42, 134, 0.12);
}

.fp-live--pill.is-open {
  background: #eaf7ef;
  color: #17643a;
  box-shadow: inset 0 0 0 1px rgba(31, 157, 85, 0.25);
}

.fp-live--pill-dark {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.fp-live--pill-dark.is-open .fp-live__dot {
  background: #3ddc84;
}

.fp-live--pill-dark.is-open .fp-live__dot::after {
  border-color: #3ddc84;
}

.fp-live--inline {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.fp-live--inline.is-open {
  color: #17643a;
}

.page-hero .fp-live,
.final-cta .fp-live {
  margin-top: 20px;
}

/* Header call box: label tightened now the live line sits under the number. */
.call-label {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.call-number {
  font-family: var(--font-display);
  font-stretch: 106%;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.call-box {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), var(--shadow);
  border-radius: 14px;
}

.navbar .wrap {
  border-radius: 14px;
}

.nav-links a {
  position: relative;
  transition: color 0.2s var(--ease);
}

.nav-links > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.nav-links > li > a:hover::after,
.nav-links > .current-menu-item > a::after,
.nav-links > .current_page_item > a::after,
.nav-links > .current-menu-ancestor > a::after {
  transform: scaleX(1);
}

.nav-links .sub-menu {
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
}

.nav-links .sub-menu a {
  border-radius: 8px;
  padding: 9px 14px;
}

/* --- Sticky compact header (desktop) ------------------------------------ */

.fp-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: 10px var(--wrap-pad);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgba(30, 31, 90, 0.5);
  transform: translateY(-110%);
  transition: transform 0.35s var(--ease);
}

.fp-sticky.is-visible {
  transform: translateY(0);
}

.admin-bar .fp-sticky {
  top: 32px;
}

.fp-sticky__inner {
  max-width: calc(var(--wrap-max) - 2 * var(--wrap-pad));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.fp-sticky__brand img {
  height: 40px;
  width: auto;
}

.fp-sticky .fp-live {
  margin: 0;
}

.fp-sticky__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.fp-sticky__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-stretch: 106%;
  font-weight: 800;
  font-size: 18px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.fp-sticky__phone svg {
  fill: var(--red);
}

.fp-sticky__phone:hover {
  color: var(--red);
}

/* --- Mobile action bar --------------------------------------------------- */

.fp-mobilebar {
  display: none;
}

/* --- Services: bento ----------------------------------------------------- */

.services {
  padding: 110px 0 100px;
}

.services-grid--bento {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 20px;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.service-card:hover,
.service-card:focus-within {
  box-shadow: var(--shadow-lg);
  border-color: transparent;
  transform: translateY(-4px);
}

.service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px 26px 24px;
}

.service-card .service-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  margin-bottom: 18px;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease-spring);
}

.service-card:hover .service-icon {
  background: var(--red);
  transform: rotate(-6deg) scale(1.05);
}

.service-card:hover .service-icon svg {
  fill: #fff;
}

.service-icon svg {
  transition: fill 0.3s var(--ease);
}

.service-card__title {
  font-family: var(--font-display);
  font-stretch: 104%;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* The whole card is the click target; the title link stretches over it. */
.service-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.service-card__title a:focus-visible {
  outline: none;
}

.service-card:has(.service-card__title a:focus-visible) {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.service-card p {
  margin-top: 10px;
  font-size: 14.5px;
}

.service-card .card-link {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.6px;
}

.service-card .card-link svg {
  fill: currentColor;
  transition: transform 0.25s var(--ease);
}

.service-card:hover .card-link svg {
  transform: translateX(4px);
}

.service-card--photo .service-card__photo {
  overflow: hidden;
}

.service-card--photo .service-card__photo img {
  transition: transform 0.6s var(--ease);
}

.service-card--photo:hover .service-card__photo img {
  transform: scale(1.05);
}

.service-card--photo > *:not(.service-card__photo) {
  padding-left: 26px;
  padding-right: 26px;
}

/* Lead card: spans two rows, navy, with the brand mark as a watermark. */
.service-card--lead {
  grid-row: span 2;
  background: var(--navy);
  border-color: var(--navy);
  color: #c6c7e6;
  isolation: isolate;
}

.service-card--lead::before {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -30px;
  width: 260px;
  height: 380px;
  background: url("../images/mark.webp") center / contain no-repeat;
  opacity: 0.09;
  transform: rotate(-8deg);
  z-index: -1;
}

.service-card--lead .service-card__body {
  padding: 34px 32px 30px;
}

.service-card--lead .service-icon {
  background: rgba(255, 255, 255, 0.1);
}

.service-card--lead .service-icon svg {
  fill: var(--gold);
}

.service-card--lead .service-card__title {
  font-size: 30px;
  font-stretch: 110%;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
}

.service-card--lead .service-card__title a {
  color: #fff;
}

.service-card--lead p {
  color: #c6c7e6;
  font-size: 16px;
}

.service-card--lead .card-link {
  color: var(--gold);
}

.service-card__covers {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.service-card__covers li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
}

.service-card__covers svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--red);
  fill: #fff;
}

.service-card--lead.service-card--photo .service-card__photo img {
  aspect-ratio: 16 / 9;
}

.services-more {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title all" "list list";
  align-items: center;
  gap: 4px 24px;
  padding: 28px 30px;
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(221, 180, 105, 0.16), transparent 55%),
    var(--lavender-soft);
  border: 1px dashed rgba(41, 42, 134, 0.18);
}

.services-more__title {
  grid-area: title;
  font-size: 19px;
  text-transform: none;
  font-weight: 800;
}

.services-more__list {
  grid-area: list;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.services-more__list a {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  transition: color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.services-more__list a:hover {
  color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}

.services-more__all {
  grid-area: all;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--red);
}

.services-more__all svg {
  fill: currentColor;
  transition: transform 0.25s var(--ease);
}

.services-more__all:hover svg {
  transform: translateX(4px);
}

/* --- Process ------------------------------------------------------------- */

.process {
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(204, 31, 39, 0.18), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(221, 180, 105, 0.1), transparent 60%),
    var(--navy-dark);
}

.pipe-step h3 {
  font-family: var(--font-display);
  font-stretch: 108%;
  font-weight: 800;
}

.pipe-node {
  transition: transform 0.4s var(--ease-spring);
}

.pipe-step:hover .pipe-node {
  transform: scale(1.08) rotate(-4deg);
}

/* --- Why us -------------------------------------------------------------- */

.why-image img {
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}

.why-image::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  z-index: -1;
}

.why-image {
  isolation: isolate;
}

.why-badge {
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}

.why-badge .big {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
}

.why-check {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.why-check svg {
  width: 18px;
  height: 18px;
}

.why-item h3 {
  font-family: var(--font-display);
  font-stretch: 104%;
  font-weight: 800;
  font-size: 17px;
}

/* --- Membership ---------------------------------------------------------- */

.membership-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.membership-benefits {
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
}

.membership-fee {
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--muted);
}

.membership-price {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(221, 180, 105, 0.22), transparent 70%),
    var(--navy);
}

.membership-price__tag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.membership-price .amount {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: 60px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.membership-math {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  max-width: 280px;
}

/* --- Areas + map --------------------------------------------------------- */

.areas {
  background:
    radial-gradient(70% 90% at 100% 50%, rgba(255, 255, 255, 0.08), transparent 60%),
    var(--navy);
}

.areas-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
}

.area-chip--all {
  background: transparent;
  border-style: dashed;
  color: var(--gold);
}

.areas .address-check-card {
  margin-top: 30px;
  padding: 26px 26px;
  border-radius: 16px;
}

.areas .address-check-card h3 {
  font-size: 18px;
}

.areas-map-card {
  border-radius: 22px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}

.fp-map {
  margin: 0;
}

.fp-map__svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-body);
}

.fp-map__field {
  fill: var(--lavender-soft);
}

.fp-map__ring {
  fill: none;
  stroke: rgba(41, 42, 134, 0.16);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.fp-map__ring--outer {
  stroke: rgba(204, 31, 39, 0.5);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
}

.fp-map__ring-label {
  font-size: 10px;
  font-weight: 700;
  fill: rgba(41, 42, 134, 0.45);
  letter-spacing: 0.4px;
}

.fp-map__state {
  stroke: rgba(41, 42, 134, 0.28);
  stroke-width: 1.2;
  stroke-dasharray: 1 4;
  stroke-linecap: round;
}

.fp-map__state-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  fill: rgba(41, 42, 134, 0.32);
}

.fp-map__dot {
  fill: var(--navy);
  stroke: #fff;
  stroke-width: 2;
  transition: r 0.2s var(--ease), fill 0.2s var(--ease);
}

.fp-map__leader {
  stroke: rgba(41, 42, 134, 0.3);
  stroke-width: 1;
}

.fp-map__name {
  font-size: 12px;
  font-weight: 700;
  fill: var(--navy);
  paint-order: stroke;
  stroke: var(--lavender-soft);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.fp-map__town:hover .fp-map__dot,
.fp-map__town:focus .fp-map__dot,
.fp-map__town.is-current .fp-map__dot {
  fill: var(--red);
}

.fp-map__town:hover .fp-map__name,
.fp-map__town:focus .fp-map__name {
  fill: var(--red);
}

.fp-map__base {
  fill: var(--red);
  stroke: #fff;
  stroke-width: 3;
}

.fp-map__pulse {
  fill: rgba(204, 31, 39, 0.18);
  transform-origin: center;
  transform-box: fill-box;
  animation: fp-map-pulse 2.6s var(--ease) infinite;
}

@keyframes fp-map-pulse {
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(2.1); opacity: 0; }
}

.fp-map__star {
  fill: #fff;
}

.fp-map__home-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  fill: var(--red);
  paint-order: stroke;
  stroke: var(--lavender-soft);
  stroke-width: 4px;
}

.fp-map__caption {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  padding: 12px 4px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.fp-map__caption > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fp-map__key {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--navy);
}

.fp-map__key--base {
  background: var(--red);
}

/* --- Recent work --------------------------------------------------------- */

.fp-work__grid {
  gap: 20px;
}

.fp-work__grid--bento {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fp-work__grid--bento .fp-work__item {
  grid-column: span 2;
}

.fp-work__grid--bento .fp-work__item:first-child {
  grid-row: span 2;
}

.fp-work__grid--bento .fp-work__item:nth-child(n + 4) {
  grid-column: span 2;
}

.fp-work__item figure {
  border-radius: 16px;
  border: 0;
  box-shadow: var(--shadow-sm);
}

.fp-work__item figure:hover {
  box-shadow: var(--shadow-lg);
}

.fp-work__media {
  overflow: hidden;
}

.fp-work__media img {
  transition: transform 0.6s var(--ease);
}

.fp-work__item figure:hover .fp-work__media img {
  transform: scale(1.04);
}

.fp-work__grid--bento .fp-work__item:first-child .fp-work__media,
.fp-work__grid--bento .fp-work__item:first-child .fp-compare {
  position: relative;
  flex: 1;
  min-height: 340px;
  aspect-ratio: auto;
}

.fp-work__grid--bento .fp-work__item:first-child figcaption {
  flex: none;
}

.fp-work__grid--bento .fp-work__item:first-child .fp-work__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.fp-work__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.fp-work__service {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red);
  padding: 3px 9px;
  border-radius: 6px;
  background: #fcefef;
}

.fp-work__service:hover {
  background: var(--red);
  color: #fff;
}

/* Before / after comparison. The after photo sits underneath; the before
   photo is clipped to the left of the handle, driven by --fp-split. */
.fp-compare {
  --fp-split: 50%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--lavender);
  user-select: none;
}

.fp-compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}

.fp-compare__before {
  clip-path: inset(0 calc(100% - var(--fp-split)) 0 0);
}

.fp-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--fp-split);
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.fp-compare__handle::after {
  content: "\2194";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}

.fp-compare__label {
  position: absolute;
  top: 12px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(28, 29, 94, 0.82);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  pointer-events: none;
}

.fp-compare__label--before {
  left: 12px;
}

.fp-compare__label--after {
  right: 12px;
  background: var(--red);
}

.fp-compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.fp-compare__range:focus-visible + .fp-compare__handle,
.fp-compare:focus-within .fp-compare__handle {
  background: var(--gold);
}

/* --- Blog cards ---------------------------------------------------------- */

.blog-card {
  border-radius: 16px;
  border-color: var(--line);
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  box-shadow: var(--shadow-lg);
}

.blog-thumb {
  height: auto;
  aspect-ratio: 16 / 9;
}

.blog-thumb img {
  transition: transform 0.6s var(--ease);
}

.blog-card:hover .blog-thumb img {
  transform: scale(1.05);
}

.blog-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-date {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-date .sep {
  opacity: 0.5;
}

.blog-body h3,
.blog-body h2 {
  font-family: var(--font-display);
  font-stretch: 104%;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 12px;
}

.blog-read {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-read svg {
  fill: currentColor;
  transition: transform 0.25s var(--ease);
}

.blog-card:hover .blog-read svg {
  transform: translateX(4px);
}

/* Branded stand-in for posts without a photo. */
.fp-placeholder {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 18px 20px;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(204, 31, 39, 0.35), transparent 55%),
    linear-gradient(135deg, var(--navy), var(--navy-dark));
}

.fp-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(120deg, black, transparent 70%);
  mask-image: linear-gradient(120deg, black, transparent 70%);
}

.fp-placeholder::after {
  content: "";
  position: absolute;
  right: 6%;
  top: 50%;
  width: 34%;
  height: 120%;
  transform: translateY(-50%) rotate(-8deg);
  background: url("../images/mark.webp") center / contain no-repeat;
  opacity: 0.22;
}

.fp-placeholder__label {
  position: relative;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.fp-feature-card {
  border-radius: 18px;
}

/* --- Final CTA ----------------------------------------------------------- */

.final-cta {
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(28, 29, 94, 0.35), transparent 60%),
    var(--red);
  padding: 88px 0;
}

.final-cta h2 {
  font-size: clamp(30px, 3.4vw, 42px);
  max-width: 620px;
}

.final-cta .fp-live--pill-dark {
  background: rgba(28, 29, 94, 0.28);
}

.final-cta-actions {
  gap: 14px 24px;
}

.final-cta .phone-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-stretch: 106%;
  font-weight: 800;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.final-cta .phone-link svg {
  fill: currentColor;
}

.final-cta .phone-link--text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  opacity: 0.9;
}

.final-cta .phone-link:hover {
  color: var(--navy-dark);
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  position: relative;
  overflow: hidden;
}

.site-footer__mark {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 340px;
  height: 500px;
  background: url("../images/mark.webp") center / contain no-repeat;
  opacity: 0.05;
  transform: rotate(-10deg);
  pointer-events: none;
}

.site-footer .wrap {
  position: relative;
}

.footer-col__title {
  font-family: var(--font-display);
  font-stretch: 108%;
}

.footer-legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Interior heroes ----------------------------------------------------- */

.page-hero {
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(204, 31, 39, 0.16), transparent 60%),
    var(--navy);
}

.page-hero h1 {
  font-size: clamp(34px, 4.2vw, 54px);
}

/* --- About --------------------------------------------------------------- */

.fp-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: start;
}

.fp-about__photo {
  margin: 0;
  position: sticky;
  top: 96px;
}

.fp-about__photo img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.fp-about__photo figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--muted);
}

/* --- Contact ------------------------------------------------------------- */

.fp-contact {
  padding: 64px 0 100px;
  background: linear-gradient(180deg, var(--lavender-soft), #fff 320px);
}

.fp-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 48px;
  align-items: start;
}

.fp-contact__methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.fp-method {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  height: 100%;
  padding: 22px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

a.fp-method:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.fp-method__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--lavender);
}

.fp-method__icon svg {
  width: 22px;
  height: 22px;
  fill: var(--navy);
}

.fp-method__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.fp-method__label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted);
}

.fp-method__value {
  font-family: var(--font-display);
  font-stretch: 104%;
  font-size: 19px;
  font-weight: 800;
  color: var(--navy);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.fp-method__note {
  font-size: 13.5px;
  color: var(--muted);
}

.fp-method--primary {
  background: var(--navy);
}

.fp-method--primary .fp-method__icon {
  background: var(--red);
}

.fp-method--primary .fp-method__icon svg {
  fill: #fff;
}

.fp-method--primary .fp-method__value {
  color: #fff;
  font-size: 24px;
}

.fp-method--primary .fp-method__label,
.fp-method--primary .fp-method__note {
  color: #b7b8e0;
}

.fp-contact__hours {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 28px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}

.fp-contact__subhead {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--navy);
}

.fp-hours-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.fp-hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

.fp-hours-list li span:last-child {
  font-weight: 700;
  color: var(--navy);
}

.fp-hours-list--quiet li,
.fp-hours-list--quiet li span:last-child {
  color: var(--muted);
  font-weight: 500;
}

.fp-contact__note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.fp-contact__content {
  margin-top: 40px;
  max-width: none;
}

.fp-contact__aside {
  position: sticky;
  top: 96px;
}

.fp-form-card {
  padding: 32px 30px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  border-top: 5px solid var(--red);
}

.fp-form-card__title {
  font-size: 26px;
  font-stretch: 110%;
  font-weight: 900;
  text-transform: uppercase;
}

.fp-form-card__intro {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.fp-form-card__form {
  margin-top: 22px;
}

.fp-form-card__btn {
  width: 100%;
  margin-top: 14px;
}

.fp-form-card__btn:first-of-type {
  margin-top: 22px;
}

.fp-form-card__admin {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff8e6;
  color: #7a5a12;
  font-size: 13px;
  line-height: 1.5;
}

.fp-form-card__admin a {
  font-weight: 700;
  text-decoration: underline;
}

.fp-form-card__fine {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}

/* --- Form plugins: make Fluent Forms (and plain WP forms) look native ---- */

.fp-form-card .ff-el-group,
.fp-form-card .wpforms-field {
  margin-bottom: 16px;
}

.fp-form-card .ff-el-input--label label,
.fp-form-card label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}

.fp-form-card .ff-el-is-required.asterisk-right label::after {
  color: var(--red);
}

.fp-form-card input[type="text"],
.fp-form-card input[type="email"],
.fp-form-card input[type="tel"],
.fp-form-card input[type="number"],
.fp-form-card input[type="date"],
.fp-form-card select,
.fp-form-card textarea,
.fp-form-card .ff-el-form-control {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1.5px solid #d9dbee;
  background: #fbfbfe;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  box-shadow: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}

.fp-form-card input:focus,
.fp-form-card select:focus,
.fp-form-card textarea:focus,
.fp-form-card .ff-el-form-control:focus {
  outline: none;
  border-color: var(--navy);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(41, 42, 134, 0.12);
}

.fp-form-card .ff-el-is-error .ff-el-form-control,
.fp-form-card [aria-invalid="true"] {
  border-color: var(--red);
}

.fp-form-card .error,
.fp-form-card .ff-el-is-error .text-danger {
  margin-top: 6px;
  font-size: 13px;
  color: var(--red-dark);
}

.fp-form-card button[type="submit"],
.fp-form-card .ff-btn-submit,
.fp-form-card input[type="submit"] {
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 10px;
  background: var(--red) !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(204, 31, 39, 0.55);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.fp-form-card button[type="submit"]:hover,
.fp-form-card .ff-btn-submit:hover {
  background: var(--red-dark) !important;
  transform: translateY(-1px);
}

.fp-form-card .ff-message-success {
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid #bfe6cc;
  background: #e9f7ee;
  color: #1e6b3a;
  box-shadow: none;
}

/* --- Scroll reveal ------------------------------------------------------- */
/* Only active once site.js has confirmed motion is welcome, so the page is
   never left blank if JavaScript fails. */

.fp-js-reveal [data-fp-reveal]:not([data-fp-stagger]),
.fp-js-reveal [data-fp-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--fp-delay, 0ms);
}

.fp-js-reveal [data-fp-reveal].is-revealed:not([data-fp-stagger]),
.fp-js-reveal [data-fp-stagger].is-revealed > * {
  opacity: 1;
  transform: none;
}

/* Hero entrance. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: fp-rise 0.8s var(--ease) both;
  }

  .hero-copy > *:nth-child(2) { animation-delay: 0.06s; }
  .hero-copy > *:nth-child(3) { animation-delay: 0.12s; }
  .hero-copy > *:nth-child(4) { animation-delay: 0.18s; }
  .hero-copy > *:nth-child(5) { animation-delay: 0.24s; }
  .hero-copy > *:nth-child(6) { animation-delay: 0.3s; }

  .hero-image > img {
    animation: fp-rise 1s var(--ease) 0.1s both;
  }

  .hero-float {
    animation: fp-pop 0.7s var(--ease-spring) 0.6s both;
  }

  .hero-float--award {
    animation-delay: 0.8s;
  }
}

@keyframes fp-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes fp-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-live.is-open .fp-live__dot::after,
  .fp-map__pulse {
    animation: none;
  }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1180px) {
  .trust-list {
    grid-template-columns: 1fr 1fr;
  }

  .trust-item:nth-child(3) {
    border-left: 0;
  }

  .trust-item:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .trust-item:nth-child(3) .trust-item__inner {
    padding-left: 0;
  }

  .hero-float--rating {
    left: 0;
  }
}

@media (max-width: 1080px) {
  .reviews-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .reviews-summary {
    position: static;
    max-width: 640px;
  }

  .fp-contact__grid {
    grid-template-columns: 1fr;
  }

  .fp-contact__aside {
    position: static;
    max-width: 560px;
  }

  .fp-about__grid {
    grid-template-columns: 1fr;
  }

  .fp-about__photo {
    position: static;
    max-width: 760px;
  }
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 28px;
  }

  .hero-image {
    order: 0;
    margin: 10px auto -64px;
    max-width: 560px;
  }

  .hero-copy h1 {
    font-size: clamp(38px, 8vw, 56px);
  }

  .services-grid--bento {
    grid-template-columns: 1fr 1fr;
  }

  .service-card--lead {
    grid-row: auto;
    grid-column: span 2;
  }

  .services-more {
    grid-column: 1 / -1;
  }

  .areas-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .areas-map-card {
    max-width: 560px;
  }

  .fp-work__grid--bento {
    grid-template-columns: 1fr 1fr;
  }

  .fp-work__grid--bento .fp-work__item,
  .fp-work__grid--bento .fp-work__item:nth-child(n + 4) {
    grid-column: span 1;
  }

  .fp-work__grid--bento .fp-work__item:first-child {
    grid-column: span 2;
    grid-row: auto;
  }

  .why-image::before {
    inset: 14px -10px -14px 14px;
  }

  .fp-sticky {
    display: none;
  }
}

@media (max-width: 860px) {
  /* The bottom bar takes over from the header call box on phones. */
  .fp-mobilebar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-mobilebar);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    padding: 6px;
    border-radius: 18px;
    background: rgba(28, 29, 94, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45);
  }

  .fp-mobilebar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    border-radius: 13px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    transition: background-color 0.2s var(--ease), transform 0.1s var(--ease);
  }

  .fp-mobilebar__item svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
  }

  .fp-mobilebar__item:active {
    transform: scale(0.97);
  }

  .fp-mobilebar__item--call {
    background: var(--red);
  }

  .fp-mobilebar__item:not(.fp-mobilebar__item--call) {
    background: rgba(255, 255, 255, 0.08);
  }

  body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  /* The bottom bar carries the phone number now; give the hero the room. */
  .topbar .call-box {
    display: none;
  }

  .topbar {
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .logo img,
  .logo .custom-logo {
    height: 60px;
  }

  .hero-copy .fp-live--pill {
    font-size: 12.5px;
  }
}

@media (max-width: 700px) {
  .hero {
    padding: 22px 22px 0;
  }

  .hero-copy h1 {
    font-size: clamp(36px, 10.5vw, 48px);
  }

  .hero-copy .hero-lead {
    font-size: 16.5px;
  }

  .hero-actions .btn {
    flex: 1 1 100%;
  }

  .hero-float {
    padding: 9px 12px;
    gap: 9px;
  }

  .hero-float__score {
    font-size: 26px;
  }

  /* The proof strip right below repeats the award; keep the crew's faces clear. */
  .hero-float--award {
    display: none;
  }

  .hero-float--rating {
    left: 0;
    bottom: 18%;
  }

  .fp-map__name {
    font-size: 14px;
  }

  .fp-map__ring-label,
  .fp-map__state-label {
    font-size: 12px;
  }

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

  .trust-item + .trust-item {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .trust-item .trust-item__inner {
    padding: 18px 0;
  }

  .services-grid--bento {
    grid-template-columns: 1fr;
  }

  .service-card--lead {
    grid-column: auto;
  }

  .services-more {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "list" "all";
  }

  .services-more__all {
    margin-top: 12px;
  }

  .service-card--lead .service-card__title {
    font-size: 26px;
  }

  .reviews-wall {
    columns: 1;
  }

  .membership-benefits {
    grid-template-columns: 1fr;
  }

  .fp-work__grid--bento {
    grid-template-columns: 1fr;
  }

  .fp-work__grid--bento .fp-work__item:first-child {
    grid-column: auto;
  }

  .fp-contact__methods,
  .fp-contact__hours {
    grid-template-columns: 1fr;
  }

  .final-cta .phone-link {
    font-size: 18px;
  }

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

/* Bento work grid: the side tiles run wider than 4:3 so the pair stays
   level with the lead photo instead of towering over it. */
.fp-work__grid--bento .fp-work__item:not(:first-child) .fp-work__media img,
.fp-work__grid--bento .fp-work__item:not(:first-child) .fp-compare {
  aspect-ratio: 16 / 9;
}

/* --- Area page: coverage facts beside the map --------------------------- */

.area-coverage-wrap {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 28px;
  align-items: start;
}

.area-coverage-wrap .area-coverage {
  margin-top: 0;
  grid-template-columns: 1fr;
  gap: 28px;
  align-content: start;
}

.area-map {
  padding: 16px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow);
}

.fp-contact__methods li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .area-coverage-wrap {
    grid-template-columns: 1fr;
  }

  .area-map {
    max-width: 480px;
  }
}

/* --- Comment form -------------------------------------------------------- */

.comment-form p {
  margin: 0 0 16px;
}

.comment-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid #d9dbee;
  font: inherit;
  font-size: 15px;
}

.comment-form textarea:focus,
.comment-form input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(41, 42, 134, 0.12);
}

.comment-form .submit {
  padding: 14px 24px;
  border: 0;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.comment-form .comment-form-cookies-consent label {
  display: inline;
  font-weight: 500;
}

/* --- Service areas archive ---------------------------------------------- */

.service-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--red);
}

.service-card__meta svg {
  fill: currentColor;
}

.fp-areas-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 48px;
  align-items: center;
  margin-bottom: 56px;
  padding: 36px;
  border-radius: var(--radius-lg);
  background: var(--lavender-soft);
}

.fp-areas-overview__copy h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-stretch: 108%;
  font-weight: 900;
  text-transform: uppercase;
}

.fp-areas-overview__copy p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 34em;
}

.fp-areas-overview__copy .btn {
  margin-top: 24px;
}

.fp-areas-overview__map {
  padding: 14px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow);
}

@media (max-width: 900px) {
  .fp-areas-overview {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 28px;
  }
}

/* =========================================================================
   FORMS — Contact Form 7, using the theme's own field markup (fp-form).
   Scoped to .fp-form so the same form looks right on the Contact page, in a
   sidebar, or dropped into any page with the shortcode.
   ========================================================================= */

.fp-form {
  display: grid;
  gap: 16px;
}

.fp-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.fp-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.fp-field__label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}

.fp-field__label abbr {
  color: var(--red);
  text-decoration: none;
  border: 0;
}

.fp-field__optional {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.fp-field__hint {
  font-size: 12.5px;
  color: var(--muted);
}

.fp-form .wpcf7-form-control-wrap {
  display: block;
  position: relative;
}

.fp-form input[type="text"],
.fp-form input[type="email"],
.fp-form input[type="tel"],
.fp-form input[type="url"],
.fp-form input[type="number"],
.fp-form input[type="date"],
.fp-form select,
.fp-form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid #d9dbee;
  background: #fbfbfe;
  font-family: inherit;
  font-size: 16px; /* 16px stops iOS zooming into the field. */
  line-height: 1.4;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}

.fp-form textarea {
  min-height: 0;
  resize: vertical;
}

.fp-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23292A86'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 22px;
}

.fp-form input::placeholder,
.fp-form textarea::placeholder {
  color: #9c9dbf;
}

.fp-form input:focus,
.fp-form select:focus,
.fp-form textarea:focus {
  outline: none;
  border-color: var(--navy);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(41, 42, 134, 0.12);
}

/* Radio and checkbox groups as tappable chips. */
.fp-form .wpcf7-radio,
.fp-form .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fp-form .wpcf7-list-item {
  margin: 0;
}

.fp-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid #d9dbee;
  background: #fbfbfe;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.fp-form .wpcf7-list-item label:hover {
  border-color: var(--navy);
}

.fp-form .wpcf7-list-item input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--red);
}

.fp-form .wpcf7-list-item label:has(input:checked) {
  border-color: var(--navy);
  background: var(--lavender);
}

.fp-form .wpcf7-list-item label:has(input:focus-visible) {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.fp-field--check .wpcf7-list-item label {
  border-radius: 10px;
}

/* File input. */
.fp-form input[type="file"] {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1.5px dashed #c9cbe6;
  background: var(--lavender-soft);
  font-family: inherit;
  font-size: 14px;
  color: var(--muted);
}

.fp-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Submit. */
.fp-form__submit {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.fp-form .wpcf7-submit {
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(204, 31, 39, 0.55);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.fp-form .wpcf7-submit:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
}

.fp-form .wpcf7-submit:active {
  transform: scale(0.98);
}

.fp-form .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.fp-form .wpcf7-spinner {
  position: absolute;
  right: 14px;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.85);
}

.fp-form__fine {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* Validation and responses. */
.fp-form .wpcf7-not-valid {
  border-color: var(--red) !important;
  background: #fff8f8 !important;
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red-dark);
}

.wpcf7 form .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 10px;
  border-left: 4px solid var(--gold);
  background: var(--lavender-soft);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}

.wpcf7 form.sent .wpcf7-response-output {
  border-left-color: var(--green);
  background: #e9f7ee;
  color: #17643a;
  font-weight: 600;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-left-color: var(--gold);
  background: #fff8e6;
  color: #6f5212;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-left-color: var(--red);
  background: #fcefef;
  color: #8f2323;
}

/* Once sent, the fields have done their job. */
.wpcf7 form.sent .fp-form > :not(.fp-form__fine) {
  display: none;
}

/* Compact variant for sidebars. */
.fp-form--compact {
  gap: 12px;
}

.fp-form--compact .fp-field__label {
  font-size: 12.5px;
}

.fp-form--compact input,
.fp-form--compact textarea {
  padding: 10px 12px;
}

.fp-form--compact .wpcf7-submit {
  padding: 13px 18px;
  font-size: 15px;
}

/* Sidebar callback drawer. */
.fp-rail__callback {
  margin-top: 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
}

.fp-rail__callback summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

.fp-rail__callback summary::-webkit-details-marker {
  display: none;
}

.fp-rail__callback summary::after {
  content: "+";
  margin-left: auto;
  font-size: 18px;
  font-weight: 600;
  color: var(--red);
  transition: transform 0.2s var(--ease);
}

.fp-rail__callback[open] summary::after {
  transform: rotate(45deg);
}

.fp-rail__callback summary svg {
  fill: var(--red);
}

.fp-rail__callback-form {
  padding: 0 14px 14px;
}

/* --- Freedom Preferred page ---------------------------------------------- */

.fp-member-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 48px;
  align-items: center;
}

.fp-member-price {
  padding: 26px 26px 22px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: #c6c7e6;
  text-align: center;
}

.fp-member-price__amount {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.fp-member-price__amount span {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
}

.fp-member-price p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.fp-member__title {
  font-size: 26px;
  font-stretch: 108%;
  font-weight: 900;
  text-transform: uppercase;
}

.fp-member__benefits {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fp-member__benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  color: var(--navy);
}

.fp-member__benefits svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--red);
  fill: #fff;
}

.fp-member__fine {
  margin-top: 28px;
  font-size: 13.5px;
  color: var(--muted);
}

@media (max-width: 900px) {
  .fp-member-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .fp-member-price {
    max-width: 360px;
  }
}

@media (max-width: 560px) {
  .fp-form__row,
  .fp-member__benefits {
    grid-template-columns: 1fr;
  }
}

/* CF7 ships these hide rules in its own stylesheet; repeated here so an
   empty response box never shows if that stylesheet is dequeued. */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output,
.wpcf7 .wpcf7-response-output:empty {
  display: none;
}

/* Single column: the form comes straight after the hero. Call is still one
   tap away in the bottom bar, so nobody has to scroll past the "what to tell
   us" notes to reach the form. */
@media (max-width: 1080px) {
  .fp-contact__aside {
    order: -1;
  }
}

/* --- Map: the side of the state line the company is not licensed in ----- */

.fp-map__hatch-bg {
  fill: #eceaf0;
}

.fp-map__hatch-line {
  stroke: #d7d4df;
  stroke-width: 3;
}

.fp-map__state {
  stroke: rgba(41, 42, 134, 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
}

.fp-map__unserved-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  fill: #8a8799;
  paint-order: stroke;
  stroke: #eceaf0;
  stroke-width: 4px;
}

.fp-map__unserved-note {
  font-size: 11px;
  font-weight: 600;
  fill: #8a8799;
  paint-order: stroke;
  stroke: #eceaf0;
  stroke-width: 4px;
}

.fp-map__key--unserved {
  border-radius: 3px;
  background: repeating-linear-gradient(45deg, #eceaf0 0 3px, #d7d4df 3px 5px);
}

@media (max-width: 700px) {
  .fp-map__unserved-note {
    font-size: 12px;
  }
}

/* --- Reviews wall: breathing room ---------------------------------------- */
/* The card's own `margin: 0` was cancelling the wall's gap, so stacked cards
   touched. Inline-block keeps the margin from collapsing at column breaks. */

.reviews-wall {
  column-gap: 24px;
}

.reviews-wall > .testimonial-card {
  display: inline-flex;
  width: 100%;
  margin: 0 0 24px;
}

.testimonial-card {
  padding: 28px 28px 24px;
}

.reviews-fresh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px !important;
  padding: 7px 12px;
  border-radius: 8px;
  background: #fff8e6;
  color: #7a5a12 !important;
  font-size: 13.5px !important;
  font-weight: 600;
}

.reviews-fresh svg {
  fill: var(--gold);
}

.testimonial-grid {
  gap: 24px;
}

/* --- SEO-driven additions: locality in service headings, town links ----- */

.page-hero h1 .h1-where {
  display: block;
  margin-top: 6px;
  font-size: 0.48em;
  font-stretch: 104%;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.fp-where {
  padding: 56px 0;
  background: var(--lavender-soft);
}

.fp-where__title {
  font-size: 22px;
  font-stretch: 106%;
  font-weight: 800;
  text-transform: none;
}

.fp-where__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fp-where__list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  transition: color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.fp-where__list a svg {
  fill: var(--red);
}

.fp-where__list a:hover {
  color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}

.footer-address {
  font-style: normal;
}

.footer-areas {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13.5px;
  line-height: 2;
  color: #8f90c4;
}

.footer-areas__label {
  margin-right: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.footer-areas a {
  white-space: nowrap;
}

.footer-areas a:hover {
  color: var(--gold);
}

.footer-areas + .footer-bottom {
  margin-top: 22px;
}

/* --- Recent Work: links, archive, single job (1.5) ----------------------- */

.fp-work__caption--link {
  display: inline;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s var(--ease);
}

.fp-work__caption--link svg {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  vertical-align: -2px;
  fill: currentColor;
  transition: transform 0.2s var(--ease);
}

.fp-work__caption--link:hover {
  background-size: 100% 2px;
}

.fp-work__caption--link:hover svg {
  transform: translateX(3px);
}

/* The whole card is the click target for a job with its own page. */
.fp-work__item figure {
  position: relative;
}

.fp-work__caption--link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.fp-work__item .fp-compare,
.fp-work__item .fp-work__service {
  position: relative;
  z-index: 2;
}

.fp-work__more {
  margin-top: 36px;
  text-align: center;
}

.fp-work__more .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fp-work__more svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.fp-work--archive {
  padding-top: 56px;
}

.fp-work__grid--archive {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fp-work__grid--archive > [hidden] {
  display: none;
}

.fp-work-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.fp-work-filter button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font: 600 14.5px/1 var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.fp-work-filter button span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--lavender);
  font-size: 12px;
}

.fp-work-filter button:hover {
  border-color: var(--navy);
}

.fp-work-filter button[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.fp-work-filter button[aria-pressed="true"] span {
  background: rgba(255, 255, 255, 0.18);
}

.fp-work-filter__empty,
.fp-work-notice {
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--lavender-soft);
  color: var(--muted);
}

.fp-work-notice {
  margin-bottom: 28px;
  border-left: 4px solid var(--gold);
}

.fp-work-notice a {
  margin-left: 6px;
  font-weight: 700;
  color: var(--red);
}

.fp-job__photo {
  margin: 0 0 20px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--lavender);
}

.fp-job__photo > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: cover;
}

.fp-job__photo .fp-compare {
  aspect-ratio: 4 / 3;
}

.fp-job__photo figcaption {
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--muted);
  background: #fff;
}

.fp-job__gallery {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.fp-job__gallery a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
}

.fp-job__gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.fp-job__gallery a:hover img {
  transform: scale(1.05);
}

.fp-job__story {
  margin-bottom: 32px;
}

.fp-job__facts {
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
}

.fp-job__facts > div {
  padding: 16px 18px;
  background: #fff;
}

.fp-job__facts dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.fp-job__facts dd {
  margin: 4px 0 0;
  font-weight: 700;
  color: var(--navy);
}

.fp-job__facts a {
  color: var(--red);
}

.fp-job__back a {
  font-weight: 600;
  color: var(--navy);
}

@media (max-width: 1080px) {
  .fp-work__grid--archive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .fp-work__grid--archive {
    grid-template-columns: 1fr;
  }

  .fp-work-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-left: calc(var(--wrap-pad) * -1);
    margin-right: calc(var(--wrap-pad) * -1);
    padding: 0 var(--wrap-pad) 6px;
    scrollbar-width: none;
  }

  .fp-work-filter button {
    flex: none;
  }
}

/* =========================================================================
   Motion (1.6)
   Two switches decide what runs:
     .fp-motion-full / -subtle / -off  on <body>, from Site Settings — for
                                       effects that are pure CSS.
     .fpm / .fpm-full                  on <html>, added by motion.js — for
                                       anything that hides content until a
                                       script reveals it, so a failed script
                                       can never leave the page blank.
   Everything sits behind prefers-reduced-motion: no-preference.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* --- Headline word reveals -------------------------------------------- */

  .fp-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: 0.06em 0.02em 0.1em;
    margin: -0.06em -0.02em -0.1em;
  }

  .fp-word__in {
    display: inline-block;
    transform: translateY(110%) rotate(4deg);
    transform-origin: 0 100%;
    transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--w, 0) * 55ms + var(--fp-split-delay, 0ms));
  }

  .is-split-in .fp-word__in {
    transform: none;
  }

  .hero-copy h1 {
    --fp-split-delay: 120ms;
  }

  /* Hold the big headlines back a beat so the script can split them before
     they show; if it never runs, they simply appear after 1.4s. */
  .fp-motion-full .hero-copy h1:not([data-fp-split]),
  .fp-motion-full .page-hero h1:not([data-fp-split]) {
    animation: fp-wait 0.01s 1.4s both;
  }

  .fp-motion-full .hero-copy h1[data-fp-split],
  .fp-motion-full .page-hero h1[data-fp-split] {
    animation: none;
    opacity: 1;
  }

  @keyframes fp-wait {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* --- Hero: proof cards drift, spotlight follows the mouse --------------- */

  .fp-motion-full .hero-float {
    animation:
      fp-pop 0.8s var(--ease-spring) 0.9s both,
      fp-drift 6s ease-in-out 1.7s infinite alternate;
  }

  .fp-motion-full .hero-float--award {
    animation-delay: 1.15s, 2.4s;
    animation-duration: 0.8s, 7.5s;
  }

  @keyframes fp-drift {
    from { transform: translateY(0); }
    to { transform: translateY(-9px); }
  }

  .fpm-full .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(460px circle at var(--fp-mx, 70%) var(--fp-my, 40%), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 70%);
    /* Fade the edges so the light never shows the box it lives in. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    opacity: 0;
    transition: opacity 0.6s var(--ease);
  }

  .fpm-full .hero-region.is-lit .hero::before {
    opacity: 1;
  }

  /* Hero image and cards ease back to centre when the mouse leaves. */
  .fpm-full .hero-image > img,
  .fpm-full .hero-float {
    will-change: translate;
  }

  /* --- Primary buttons: a light sweep -------------------------------------- */

  .fp-motion-full .btn-red {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .fp-motion-full .btn-red::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    z-index: -1;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
    transform: skewX(-18deg) translateX(0);
    pointer-events: none;
  }

  .fp-motion-full .btn-red:hover::after {
    animation: fp-sweep 0.9s var(--ease);
  }

  /* The hero's main button catches the light twice after the page settles. */
  .fp-motion-full .hero-actions .btn-red::after {
    animation: fp-sweep-idle 4.5s ease-in-out 2.2s 2;
  }

  @keyframes fp-sweep {
    to { transform: skewX(-18deg) translateX(420%); }
  }

  @keyframes fp-sweep-idle {
    0% { transform: skewX(-18deg) translateX(0); }
    25%, 100% { transform: skewX(-18deg) translateX(420%); }
  }

  .fp-magnetic {
    transition: translate 0.3s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
  }

  /* --- Tilt cards ---------------------------------------------------------- */

  .fp-tilt {
    position: relative;
    transition: transform 0.6s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  }

  .fp-tilt.is-tilting {
    transition: transform 0.12s linear, box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  }

  .fp-tilt::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%);
    opacity: 0;
    transition: opacity 0.35s var(--ease);
  }

  .fp-tilt.is-tilting::after {
    opacity: 1;
  }

  /* --- Section eyebrows: the little rule draws itself ----------------------- */

  .eyebrow::before {
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
  }

  .fpm .eyebrow:not(.is-in)::before {
    transform: scaleX(0);
  }

  /* --- Process: the pipe fills, water runs through it ----------------------- */

  .fpm-full .pipeline::before {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
  }

  .fpm-full .pipeline.is-in::before {
    transform: none;
    animation: fp-flow 1.4s linear 2s infinite;
  }

  @keyframes fp-flow {
    to { background-position: 26px 0; }
  }

  .fpm-full .pipeline:not(.is-in) .pipe-node {
    opacity: 0;
  }

  .fpm-full .pipeline.is-in .pipe-node {
    animation: fp-node 0.7s var(--ease-spring) both;
  }

  .fpm-full .pipeline.is-in .pipe-step:nth-child(1) .pipe-node { animation-delay: 0.25s; }
  .fpm-full .pipeline.is-in .pipe-step:nth-child(2) .pipe-node { animation-delay: 0.7s; }
  .fpm-full .pipeline.is-in .pipe-step:nth-child(3) .pipe-node { animation-delay: 1.15s; }
  .fpm-full .pipeline.is-in .pipe-step:nth-child(4) .pipe-node { animation-delay: 1.6s; }

  @keyframes fp-node {
    0% {
      opacity: 0;
      scale: 0.3;
      box-shadow: 0 0 0 3px var(--gold), 0 0 0 0 rgba(221, 180, 105, 0.7);
    }
    60% {
      opacity: 1;
      scale: 1.08;
    }
    100% {
      scale: 1;
      box-shadow: 0 0 0 3px var(--gold), 0 0 0 22px rgba(221, 180, 105, 0);
    }
  }

  /* --- Coverage map: rings ripple out from the shop, towns pop in ---------- */

  .fpm-full .fp-map__ring,
  .fpm-full .fp-map__dot {
    transform-box: fill-box;
    transform-origin: center;
  }

  .fpm-full .fp-map:not(.is-in) .fp-map__ring,
  .fpm-full .fp-map:not(.is-in) .fp-map__town {
    opacity: 0;
  }

  .fpm-full .fp-map.is-in .fp-map__ring {
    animation: fp-ring 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--i, 0) * 0.18s);
  }

  .fpm-full .fp-map.is-in .fp-map__town {
    animation: fp-fade 0.5s ease both;
    animation-delay: calc(0.45s + var(--i, 0) * 60ms);
  }

  .fpm-full .fp-map.is-in .fp-map__dot {
    animation: fp-dot 0.7s var(--ease-spring) both;
    animation-delay: calc(0.45s + var(--i, 0) * 60ms);
  }

  @keyframes fp-ring {
    from { opacity: 0; transform: scale(0.15); }
  }

  @keyframes fp-dot {
    from { transform: scale(0); }
  }

  @keyframes fp-fade {
    from { opacity: 0; }
  }

  /* --- Reviews: the stars fill in one by one ------------------------------- */

  .fpm .testimonial-card:not(.is-in) .stars-row svg,
  .fpm .reviews-score:not(.is-in) .stars-row svg {
    opacity: 0;
  }

  .fpm .testimonial-card.is-in .stars-row svg,
  .fpm .reviews-score.is-in .stars-row svg {
    animation: fp-star 0.5s var(--ease-spring) both;
  }

  .stars-row svg:nth-child(1) { animation-delay: 0.15s !important; }
  .stars-row svg:nth-child(2) { animation-delay: 0.23s !important; }
  .stars-row svg:nth-child(3) { animation-delay: 0.31s !important; }
  .stars-row svg:nth-child(4) { animation-delay: 0.39s !important; }
  .stars-row svg:nth-child(5) { animation-delay: 0.47s !important; }

  @keyframes fp-star {
    from { opacity: 0; scale: 0.2; rotate: -40deg; }
  }

  /* --- Photos wipe open --------------------------------------------------- */

  .fpm-full .why-image img,
  .fpm-full .fp-job__photo > img,
  .fpm-full .fp-job__photo .fp-compare {
    transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1), scale 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .fpm-full .why-image:not(.is-in) img,
  .fpm-full .fp-job__photo:not(.is-in) > img,
  .fpm-full .fp-job__photo:not(.is-in) .fp-compare {
    clip-path: inset(0 0 100% 0);
    scale: 1.08;
  }

  .fpm-full .why-image::before {
    transition: translate 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, opacity 0.8s ease 0.3s;
  }

  .fpm-full .why-image:not(.is-in)::before {
    translate: -22px -22px;
    opacity: 0;
  }

  /* Gallery photos settle in from slightly zoomed as their group reveals. */
  .fpm-full [data-fp-stagger] > .fp-work__item img {
    scale: 1.12;
    transition: scale 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--fp-delay, 0ms);
  }

  .fpm-full [data-fp-stagger].is-revealed > .fp-work__item img {
    scale: 1;
  }

  /* --- Membership price: a slow sheen when it arrives ----------------------- */

  .fpm-full .membership-price {
    overflow: hidden;
  }

  .fpm-full .membership-price::after {
    content: "";
    position: absolute;
    inset: -20% auto -20% -40%;
    width: 30%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
    transform: skewX(-16deg);
    opacity: 0;
  }

  .fpm-full .membership-price.is-in::after {
    animation: fp-sheen 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.4s;
  }

  @keyframes fp-sheen {
    0% { opacity: 1; transform: skewX(-16deg) translateX(0); }
    100% { opacity: 1; transform: skewX(-16deg) translateX(520%); }
  }

  /* --- Reading progress -------------------------------------------------- */

  .fp-progress {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    right: 0;
    z-index: 1000;
    height: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .fp-progress.is-active {
    opacity: 1;
  }

  .fp-progress span {
    display: block;
    height: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--red), #e8545a 60%, var(--gold));
    box-shadow: 0 0 12px rgba(204, 31, 39, 0.45);
    border-radius: 0 3px 3px 0;
  }
}

/* Water droplet running along the process pipe — wide screens only, where
   the pipe is drawn. */
@media (prefers-reduced-motion: no-preference) and (min-width: 981px) {
  .fpm-full .pipeline::after {
    content: "";
    position: absolute;
    top: 30px;
    left: 6%;
    right: 6%;
    height: 14px;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at center, #e6f6ff 0 2.5px, rgba(120, 200, 255, 0.85) 3.5px, rgba(80, 170, 255, 0) 7px) no-repeat;
    background-size: 28px 14px;
    background-position: 0% 0;
    opacity: 0;
  }

  .fpm-full .pipeline.is-in::after {
    animation: fp-drop 4.2s cubic-bezier(0.45, 0, 0.55, 1) 2.2s infinite;
  }

  @keyframes fp-drop {
    0% { background-position: 0% 0; opacity: 0; }
    8% { opacity: 1; }
    80% { opacity: 1; }
    92%, 100% { background-position: 100% 0; opacity: 0; }
  }
}

/* =========================================================================
   Navigation (1.7) — one floating glass header at every width
   template-parts/site-nav.php · assets/js/navigation.js
   ========================================================================= */

/* The header is fixed; the background region it floats over makes room. */
.hero-region {
  padding-top: 112px;
}

.hero-region--compact {
  padding-top: 112px;
}

.fp-nav {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 70;
  padding: 0 var(--wrap-pad);
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), top 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-bar .fp-nav {
  top: calc(var(--wp-admin--admin-bar--height, 32px) + 14px);
}

.fp-nav__bar {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 78px;
  padding: 0 10px 0 22px;
  border-radius: 22px;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    0 1px 2px rgba(30, 31, 90, 0.06),
    0 18px 40px -20px rgba(30, 31, 90, 0.45);
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, box-shadow 0.3s ease, border-radius 0.35s ease;
}

.fp-nav.is-scrolled {
  top: 10px;
}

.admin-bar .fp-nav.is-scrolled {
  top: calc(var(--wp-admin--admin-bar--height, 32px) + 10px);
}

.fp-nav.is-scrolled .fp-nav__bar {
  height: 66px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    0 22px 44px -20px rgba(30, 31, 90, 0.5);
}

.fp-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.fp-nav__logo img {
  height: 54px;
  width: auto;
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.fp-nav.is-scrolled .fp-nav__logo img {
  height: 44px;
}

/* --- Links with a gliding pill ------------------------------------------- */

.fp-nav__menu {
  position: static;
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.fp-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fp-nav__item {
  position: static;
}

.fp-nav__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--navy);
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: 0.1px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease;
}

.fp-nav__link svg {
  fill: currentColor;
  opacity: 0.7;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.fp-nav__item.is-open .fp-nav__link svg,
.fp-nav:not(.is-js) .has-panel:hover .fp-nav__link svg {
  transform: rotate(180deg);
}

/* Current page: a small gold dot under the label. */
.fp-nav__item.is-current > .fp-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--red);
}

.fp-nav__glow {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 0;
  height: 42px;
  margin-top: -21px;
  border-radius: 12px;
  background: rgba(41, 42, 134, 0.08);
  box-shadow: inset 0 0 0 1px rgba(41, 42, 134, 0.06);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.fp-nav__glow.is-on {
  opacity: 1;
}

/* --- Actions ------------------------------------------------------------- */

.fp-nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.fp-nav__phone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: 14px;
  color: var(--navy);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.fp-nav__phone:hover {
  background: rgba(41, 42, 134, 0.06);
}

.fp-nav__phone-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fff;
  color: var(--red);
  box-shadow: 0 4px 12px -6px rgba(30, 31, 90, 0.35), inset 0 0 0 1px var(--line);
}

.fp-nav__phone-icon svg {
  fill: currentColor;
}

/* Green while phones are answered, grey otherwise. */
.fp-nav__dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #a3a5c2;
  box-shadow: 0 0 0 2px #fff;
}

.fp-phones-open .fp-nav__dot {
  background: #22c55e;
}

.fp-phones-open .fp-nav__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  animation: fp-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.fp-nav__phone-text {
  display: grid;
  line-height: 1.2;
}

.fp-nav__phone-text strong {
  font-size: 16px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

.fp-nav__phone-text .fp-live {
  font-size: 11.5px;
}

.fp-nav__cta {
  height: 50px;
  padding: 0 20px;
  border-radius: 14px;
  gap: 8px;
}

.fp-nav__cta svg {
  fill: currentColor;
}

.fp-burger {
  display: none;
}

/* --- Mega panel ---------------------------------------------------------- */

.fp-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.985);
  transform-origin: 50% 0;
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s;
}

/* An invisible bridge so the mouse can cross the gap without closing it. */
.fp-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.fp-nav__item.is-open .fp-panel,
.fp-nav:not(.is-js) .has-panel:hover .fp-panel,
.fp-nav:not(.is-js) .has-panel:focus-within .fp-panel {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

.fp-panel__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 10px;
  padding: 10px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 40px 80px -30px rgba(30, 31, 90, 0.55),
    0 8px 20px -10px rgba(30, 31, 90, 0.2);
}

.fp-panel__main {
  padding: 14px 10px 10px 14px;
}

.fp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 6px 12px;
}

.fp-panel__eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
}

.fp-panel__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}

.fp-panel__all svg {
  fill: currentColor;
  transition: transform 0.25s var(--ease);
}

.fp-panel__all:hover svg {
  transform: translateX(3px);
}

.fp-panel__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.fp-panel__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 12px;
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.fp-panel__link:hover,
.fp-panel__link:focus-visible {
  background: var(--lavender-soft);
}

.fp-panel__link[aria-current="page"] {
  background: var(--lavender-soft);
  box-shadow: inset 0 0 0 1.5px var(--lavender);
}

.fp-panel__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--lavender-soft);
  color: var(--navy);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s var(--ease-spring);
}

.fp-panel__icon svg {
  fill: currentColor;
}

.fp-panel__link:hover .fp-panel__icon,
.fp-panel__link:focus-visible .fp-panel__icon {
  background: var(--red);
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
}

.fp-panel__text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.fp-panel__text strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}

.fp-panel__text span {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}

/* Items cascade in when the panel opens. */
.fp-panel__grid li {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.fp-nav__item.is-open .fp-panel__grid li,
.fp-nav:not(.is-js) .fp-panel__grid li {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.fp-nav__item.is-open .fp-panel__grid li:nth-child(2) { transition-delay: 0.02s; }
.fp-nav__item.is-open .fp-panel__grid li:nth-child(3) { transition-delay: 0.04s; }
.fp-nav__item.is-open .fp-panel__grid li:nth-child(4) { transition-delay: 0.06s; }
.fp-nav__item.is-open .fp-panel__grid li:nth-child(5) { transition-delay: 0.08s; }
.fp-nav__item.is-open .fp-panel__grid li:nth-child(6) { transition-delay: 0.1s; }
.fp-nav__item.is-open .fp-panel__grid li:nth-child(7) { transition-delay: 0.12s; }
.fp-nav__item.is-open .fp-panel__grid li:nth-child(8) { transition-delay: 0.14s; }
.fp-nav__item.is-open .fp-panel__grid li:nth-child(9) { transition-delay: 0.16s; }
.fp-nav__item.is-open .fp-panel__grid li:nth-child(n + 10) { transition-delay: 0.18s; }

/* The feature card. */
.fp-panel__feature {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px;
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(204, 31, 39, 0.45), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(221, 180, 105, 0.22), transparent 60%),
    var(--navy-dark);
}

.fp-panel__feature-title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1.1;
}

.fp-panel__feature-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: #c9cae9;
}

.fp-panel__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  font-stretch: 108%;
  box-shadow: 0 12px 24px -12px rgba(204, 31, 39, 0.9);
}

.fp-panel__phone svg,
.fp-panel__areas svg {
  fill: currentColor;
}

.fp-panel__areas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold);
}

.fp-panel__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  color: #c9cae9;
}

.fp-panel__rating strong {
  color: #fff;
}

.fp-drawer__stars {
  display: inline-flex;
  gap: 2px;
}

.fp-drawer__stars svg {
  width: 14px;
  height: 14px;
  fill: var(--gold);
}

/* The page dims slightly while a panel is open. */
.fp-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(20, 21, 60, 0.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.fp-panel-open .fp-nav-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

/* The old slim desktop header and the hero's separate call box retire. */
.fp-sticky {
  display: none !important;
}

/* --- Narrower desktops ---------------------------------------------------- */

@media (max-width: 1380px) {
  .fp-nav__phone-text {
    display: none;
  }

  .fp-nav__phone {
    padding: 0;
  }
}

@media (max-width: 1240px) {
  .fp-nav__link {
    padding: 0 11px;
    font-size: 14px;
  }

  .fp-nav__bar {
    gap: 12px;
  }

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

  .fp-panel__inner {
    grid-template-columns: minmax(0, 1fr) 270px;
  }
}

@media (max-width: 1080px) {
  .fp-nav__cta span {
    display: none;
  }

  .fp-nav__cta {
    width: 50px;
    padding: 0;
  }

  .fp-nav__logo img {
    height: 46px;
  }
}

/* --- Phones and tablets -------------------------------------------------- */

.fp-drawer {
  display: none;
}

@media (max-width: 980px) {
  .hero-region,
  .hero-region--compact {
    padding-top: 84px;
  }

  .fp-nav {
    top: 10px;
    padding: 0 10px;
  }

  .admin-bar .fp-nav,
  .admin-bar .fp-nav.is-scrolled {
    top: calc(var(--wp-admin--admin-bar--height, 46px) + 10px);
  }

  .fp-nav.is-scrolled {
    top: 10px;
  }

  .fp-nav__bar,
  .fp-nav.is-scrolled .fp-nav__bar {
    height: 62px;
    padding: 0 8px 0 14px;
    border-radius: 20px;
    justify-content: space-between;
  }

  .fp-nav__logo img,
  .fp-nav.is-scrolled .fp-nav__logo img {
    height: 44px;
  }

  .fp-nav__menu,
  .fp-nav__cta,
  .fp-nav-scrim {
    display: none;
  }

  .fp-nav.is-tucked {
    transform: translateY(calc(-100% - 24px));
  }

  .fp-nav__phone {
    padding: 0;
  }

  .fp-nav__phone-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .fp-nav__phone:active .fp-nav__phone-icon {
    transform: scale(0.94);
  }

  .fp-burger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 16px 0 14px;
    border-radius: 14px;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: 0.2px;
    text-decoration: none;
    box-shadow: 0 8px 18px -8px rgba(41, 42, 134, 0.7);
    transition: transform 0.15s var(--ease), background-color 0.2s ease;
  }

  .fp-burger:active {
    transform: scale(0.96);
  }

  /* Three lines that fold into an X. */
  .fp-burger__box {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 14px;
  }

  .fp-burger__box i {
    position: absolute;
    left: 0;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease, width 0.3s ease;
  }

  .fp-burger__box i:nth-child(1) { top: 0; }
  .fp-burger__box i:nth-child(2) { top: 6px; width: 70%; }
  .fp-burger__box i:nth-child(3) { top: 12px; }

  .fp-burger[aria-expanded="true"] .fp-burger__box i:nth-child(1),
  .fp-burger__box.is-x i:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .fp-burger[aria-expanded="true"] .fp-burger__box i:nth-child(2),
  .fp-burger__box.is-x i:nth-child(2) {
    opacity: 0;
  }

  .fp-burger[aria-expanded="true"] .fp-burger__box i:nth-child(3),
  .fp-burger__box.is-x i:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* --- Drawer ----------------------------------------------------------- */

  .fp-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    color: #fff;
  }

  /* No JavaScript: plain :target toggle. */
  .fp-drawer:target,
  .fp-drawer.is-mounted {
    display: block;
  }

  .fp-drawer__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
      radial-gradient(110% 55% at 100% 0%, rgba(204, 31, 39, 0.38), transparent 62%),
      radial-gradient(90% 50% at 0% 100%, rgba(221, 180, 105, 0.2), transparent 60%),
      linear-gradient(170deg, var(--navy) 0%, var(--navy-dark) 70%);
  }

  .fp-drawer__bg .stars-overlay {
    opacity: 0.18;
  }

  .fp-drawer__inner {
    position: relative;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 22px calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .fp-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
  }

  .fp-drawer__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-stretch: 108%;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .fp-drawer__brand img {
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: 12px;
    background: #fff;
    object-fit: contain;
  }

  .fp-drawer__close {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  }

  .fp-drawer .fp-live {
    align-self: flex-start;
  }

  /* Links */

  .fp-drawer__list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
  }

  .fp-drawer__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  .fp-drawer__row {
    display: flex;
    align-items: center;
  }

  .fp-drawer__row .fp-drawer__link {
    flex: 1;
  }

  .fp-drawer__link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    padding: 10px 2px;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-stretch: 108%;
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -0.2px;
    text-decoration: none;
  }

  .fp-drawer__num {
    width: 26px;
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--gold);
    opacity: 0.85;
  }

  .fp-drawer__label {
    flex: 1;
  }

  .fp-drawer__arrow {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    transition: transform 0.25s var(--ease), background-color 0.2s ease;
  }

  .fp-drawer__arrow svg,
  .fp-drawer__expand svg {
    fill: currentColor;
  }

  .fp-drawer__link:active .fp-drawer__arrow {
    transform: translateX(4px);
    background: var(--red);
  }

  .fp-drawer__item.is-current > .fp-drawer__link,
  .fp-drawer__item.is-current > .fp-drawer__row .fp-drawer__link {
    color: var(--gold);
  }

  .fp-drawer__expand {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.2s ease;
  }

  .fp-drawer__item.is-expanded .fp-drawer__expand {
    transform: rotate(180deg);
    background: var(--red);
  }

  /* Smooth height without measuring: a one-row grid going 0fr → 1fr. */
  .fp-drawer__sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .fp-drawer__item.is-expanded .fp-drawer__sub,
  .fp-drawer:not(.is-js) .fp-drawer__sub {
    grid-template-rows: 1fr;
  }

  .fp-drawer__subgrid {
    min-height: 0;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .fp-drawer__item.is-expanded .fp-drawer__subgrid,
  .fp-drawer:not(.is-js) .fp-drawer__subgrid {
    padding-bottom: 16px;
  }

  .fp-drawer__sublink {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    min-height: 56px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.15s var(--ease);
  }

  .fp-drawer__sublink:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.12);
  }

  .fp-drawer__sublink[aria-current="page"] {
    box-shadow: inset 0 0 0 1.5px var(--gold);
  }

  .fp-drawer__subicon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    background: rgba(221, 180, 105, 0.16);
    color: var(--gold);
  }

  .fp-drawer__subicon svg {
    fill: currentColor;
  }

  /* Quick actions */

  .fp-drawer__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 6px;
  }

  .fp-drawer__action {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s var(--ease);
  }

  .fp-drawer__action:active {
    transform: scale(0.97);
  }

  .fp-drawer__action--call {
    grid-column: 1 / -1;
    min-height: 72px;
    background: var(--red);
    box-shadow: 0 16px 30px -14px rgba(204, 31, 39, 0.8);
  }

  .fp-drawer__action-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
  }

  .fp-drawer__action--call .fp-drawer__action-icon {
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.2);
  }

  .fp-drawer__action-icon svg {
    fill: currentColor;
  }

  .fp-drawer__action-text {
    display: grid;
    line-height: 1.2;
  }

  .fp-drawer__action-text small {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.8;
  }

  .fp-drawer__action-text strong {
    font-size: 15px;
  }

  .fp-drawer__action--call .fp-drawer__action-text strong {
    font-family: var(--font-display);
    font-stretch: 108%;
    font-size: 22px;
    font-weight: 800;
  }

  /* Proof */

  .fp-drawer__proof {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    font-size: 13.5px;
    color: #c9cae9;
  }

  .fp-drawer__proof p {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .fp-drawer__rating strong {
    color: #fff;
    font-size: 15px;
  }

  .fp-drawer__stars {
    display: inline-flex;
    gap: 2px;
  }

  .fp-drawer__stars svg {
    width: 14px;
    height: 14px;
    fill: var(--gold);
  }

  .fp-drawer__award img {
    width: 34px;
    height: 34px;
  }

  .fp-drawer__award span {
    color: #fff;
    font-weight: 700;
  }

  .fp-drawer__hours svg {
    fill: var(--gold);
  }

  /* While the drawer is open: no page scroll, no bottom bar. */
  .fp-drawer-open,
  .fp-drawer-open body {
    overflow: hidden;
  }

  .fp-mobilebar {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .fp-drawer-open .fp-mobilebar {
    transform: translateY(160%);
  }

  .fp-mobilebar__item--call {
    position: relative;
    overflow: visible;
  }

  .fp-phones-open .fp-mobilebar__item--call::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: fp-call-ring 2.6s ease-out infinite;
    pointer-events: none;
  }
}

@media (min-width: 600px) and (max-width: 980px) {
  .fp-drawer__subgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fp-drawer__actions {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .fp-drawer__action--call {
    grid-column: auto;
  }
}

/* The header and phone bar arrive with the page. */
@media (prefers-reduced-motion: no-preference) {
  .fp-nav__bar {
    animation: fp-nav-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }

  .fp-mobilebar {
    animation: fp-bar-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s backwards;
  }

  @keyframes fp-nav-in {
    from { opacity: 0; transform: translateY(-20px) scale(0.98); }
  }

  @keyframes fp-bar-in {
    from { opacity: 0; transform: translateY(140%); }
  }
}

/* Motion for the drawer — skipped entirely for reduced motion. */
@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  .fp-drawer.is-js .fp-drawer__bg {
    clip-path: circle(0 at var(--ox, 88%) var(--oy, 40px));
    transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .fp-drawer.is-js.is-open .fp-drawer__bg {
    clip-path: circle(150% at var(--ox, 88%) var(--oy, 40px));
  }

  .fp-drawer.is-js .fp-drawer__top,
  .fp-drawer.is-js .fp-live,
  .fp-drawer.is-js .fp-drawer__item,
  .fp-drawer.is-js .fp-drawer__actions,
  .fp-drawer.is-js .fp-drawer__proof {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .fp-drawer.is-js.is-open .fp-drawer__top,
  .fp-drawer.is-js.is-open .fp-live,
  .fp-drawer.is-js.is-open .fp-drawer__item,
  .fp-drawer.is-js.is-open .fp-drawer__actions,
  .fp-drawer.is-js.is-open .fp-drawer__proof {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .fp-drawer.is-js.is-open .fp-drawer__top { transition-delay: 0.12s; }
  .fp-drawer.is-js.is-open .fp-live { transition-delay: 0.16s; }
  .fp-drawer.is-js.is-open .fp-drawer__item { transition-delay: calc(0.18s + var(--i, 0) * 0.05s); }
  .fp-drawer.is-js.is-open .fp-drawer__actions { transition-delay: 0.5s; }
  .fp-drawer.is-js.is-open .fp-drawer__proof { transition-delay: 0.58s; }

  /* Service tiles cascade when Services opens. */
  .fp-drawer__subgrid li {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .fp-drawer__item.is-expanded .fp-drawer__subgrid li,
  .fp-drawer:not(.is-js) .fp-drawer__subgrid li {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .fp-drawer__item.is-expanded .fp-drawer__subgrid li:nth-child(1) { transition-delay: 0.08s; }
  .fp-drawer__item.is-expanded .fp-drawer__subgrid li:nth-child(2) { transition-delay: 0.11s; }
  .fp-drawer__item.is-expanded .fp-drawer__subgrid li:nth-child(3) { transition-delay: 0.14s; }
  .fp-drawer__item.is-expanded .fp-drawer__subgrid li:nth-child(4) { transition-delay: 0.17s; }
  .fp-drawer__item.is-expanded .fp-drawer__subgrid li:nth-child(5) { transition-delay: 0.2s; }
  .fp-drawer__item.is-expanded .fp-drawer__subgrid li:nth-child(6) { transition-delay: 0.23s; }
  .fp-drawer__item.is-expanded .fp-drawer__subgrid li:nth-child(7) { transition-delay: 0.26s; }
  .fp-drawer__item.is-expanded .fp-drawer__subgrid li:nth-child(8) { transition-delay: 0.29s; }
  .fp-drawer__item.is-expanded .fp-drawer__subgrid li:nth-child(n + 9) { transition-delay: 0.32s; }

  @keyframes fp-call-ring {
    0% { box-shadow: 0 0 0 0 rgba(204, 31, 39, 0.55); }
    70%, 100% { box-shadow: 0 0 0 12px rgba(204, 31, 39, 0); }
  }
}