/* ==========================================================================
   J.R. Wray, Realtor — Roanoke, Virginia
   Palette extracted from the brand logo:
     Deep navy    #0B1323 / #080F1D
     Sky blue     #2B91D1 / #3CA0DC
     White / gray #FFFFFF / #F8F9FA
   ========================================================================== */

:root {
  --navy-900: #080f1d;
  --navy-800: #0b1323;
  --navy-700: #111c33;
  --navy-600: #17263f;

  --blue: #2b91d1;
  --blue-light: #3ca0dc;
  --blue-dim: rgba(43, 145, 209, 0.14);

  --white: #ffffff;
  --gray-50: #f8f9fa;
  --gray-100: #eef1f5;
  --gray-200: #e0e5ec;
  --gray-500: #6b7686;
  --ink: #0b1323;

  /* sampled from the supplied logo file, which has an opaque background */
  --logo-navy: #000e26;

  --on-dark: rgba(255, 255, 255, 0.74);
  --on-dark-faint: rgba(255, 255, 255, 0.5);
  --rule-dark: rgba(255, 255, 255, 0.14);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shell: 1240px;
  --gutter: 28px;
  --footer-gutter: clamp(20px, 3vw, 44px);
  --radius: 4px;

  --shadow-card: 0 18px 46px rgba(8, 15, 29, 0.1);
  --shadow-lift: 0 28px 64px rgba(8, 15, 29, 0.18);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 18px;
}

.eyebrow.on-dark { color: var(--blue-light); }

.section-title {
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 20px;
}

.section-intro {
  font-size: 18px;
  color: var(--gray-500);
  max-width: 62ch;
}

.section-intro.on-dark { color: var(--on-dark); }

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }

section { padding: clamp(72px, 9vw, 122px) 0; }

.section-light { background: var(--white); }
.section-tint { background: var(--gray-50); }
.section-dark { background: var(--navy-800); color: var(--white); }
.section-dark .section-title { color: var(--white); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 17px 34px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.28s var(--ease), color 0.28s var(--ease),
              border-color 0.28s var(--ease), transform 0.28s var(--ease);
}

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

.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-light); }

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.42);
}
.btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }

.btn-outline {
  background: transparent;
  color: var(--navy-800);
  border-color: var(--gray-200);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

.btn-sm { padding: 13px 24px; font-size: 12px; }

/* ---------- media placeholders ----------
   Every block below is a marked slot awaiting a real asset.
   Search the HTML for "INSERT" to find them all.
--------------------------------------------- */

.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--navy-700) 0%, var(--navy-800) 52%, var(--navy-900) 100%);
  color: var(--on-dark-faint);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* faint architectural line pattern so placeholders read as imagery, not gaps */
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(43, 145, 209, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 145, 209, 0.15) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 78%);
}

.ph span { position: relative; z-index: 1; line-height: 1.7; }

.ph-light {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-50) 100%);
  color: var(--gray-500);
}
.ph-light::before { background-image:
    linear-gradient(rgba(11, 19, 35, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 19, 35, 0.07) 1px, transparent 1px); }

/* ---------- brand logo ----------
   The supplied logo is a 1254 x 1254 stacked lockup on an opaque navy field
   (#000E26, sampled from the file). Two presentations:

   .logo-mark  header. Crops to the circular emblem only, because the wordmark
               below it is unreadable at header size. The emblem was measured
               in the source at x 296 to 961, y 123 to 776, and the offsets
               below are derived from those numbers. If the logo file is ever
               replaced, re measure rather than nudging these by eye.

   .footer-logo  footer. Shows the full lockup as a deliberate tile. The file
                 has no transparency, so its navy field sits slightly lighter
                 than the footer. The rounded corner and hairline border make
                 that read as intentional. A transparent PNG or an SVG would
                 remove the need for both.
--------------------------------------------- */

.logo-mark {
  width: 56px;
  height: 56px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  display: block;
  background: var(--logo-navy);
}

.logo-mark img {
  width: 105.6px;
  height: 105.6px;
  max-width: none;
  margin-left: -24.9px;
  margin-top: -9.9px;
}

.footer-logo {
  width: 132px;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--rule-dark);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  --header-h: 92px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: transparent;
  transition: background 0.34s var(--ease), box-shadow 0.34s var(--ease),
              border-color 0.34s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
  background: rgba(8, 15, 29, 0.94);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom-color: var(--rule-dark);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  /* --header-h drives BOTH the header height and where the mobile panel
     starts. They were hardcoded separately before, so once the header shrank
     on scroll the panel kept starting at the old 92px and left a gap. */
  height: var(--header-h);
  transition: height 0.34s var(--ease);
}

.site-header.is-stuck { --header-h: 74px; }

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.nav a {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--on-dark);
  padding: 6px 0;
  position: relative;
  transition: color 0.24s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--blue-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav a:hover { color: var(--blue-light); }
.nav a:hover::after { transform: scaleX(1); }

.header-phone {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.header-phone svg { width: 15px; height: 15px; stroke: var(--blue-light); flex: none; }
.header-phone:hover { color: var(--blue-light); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  padding: 9px 11px;
  cursor: pointer;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 19px;
  height: 1.5px;
  background: var(--white);
  margin: 4px 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px 0 96px;
  background: var(--navy-900);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-photo,
.page-hero-media img,
.thanks-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.hero-media .ph {
  width: 100%;
  height: 100%;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 30px 34px;
  font-size: 10px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(8, 15, 29, 0.95) 0%, rgba(8, 15, 29, 0.82) 46%, rgba(8, 15, 29, 0.5) 100%);
}

.hero .shell { position: relative; z-index: 2; }

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

.hero-flag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-light);
  border: 1px solid rgba(43, 145, 209, 0.4);
  background: var(--blue-dim);
  border-radius: 999px;
  padding: 9px 20px;
  margin-bottom: 30px;
}

.hero h1 {
  font-size: clamp(42px, 6.6vw, 82px);
  color: var(--white);
  margin-bottom: 26px;
}

.hero h1 em {
  font-style: italic;
  color: var(--blue-light);
}

.hero-sub {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--on-dark);
  max-width: 60ch;
  margin-bottom: 40px;
  font-weight: 300;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 46px;
  margin-top: 68px;
  padding-top: 34px;
  border-top: 1px solid var(--rule-dark);
}

.hero-stat .n {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  color: var(--white);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}

.hero-stat .l {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}

/* ==========================================================================
   PAGE HERO
   Compact banner for interior pages. Shorter than the home hero so the page
   content starts above the fold.
   ========================================================================== */

.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 56vh;
  padding: 170px 0 68px;
  background: var(--navy-900);
  overflow: hidden;
}

.page-hero-media { position: absolute; inset: 0; z-index: 0; }

.page-hero-media .ph {
  width: 100%;
  height: 100%;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 26px 30px;
  font-size: 10px;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(8, 15, 29, 0.95) 0%, rgba(8, 15, 29, 0.84) 48%, rgba(8, 15, 29, 0.55) 100%);
}

.page-hero .shell { position: relative; z-index: 2; }

.page-hero h1 {
  font-size: clamp(38px, 5.4vw, 68px);
  color: var(--white);
  margin-bottom: 22px;
}

.page-hero-sub {
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 300;
  color: var(--on-dark);
  max-width: 58ch;
}

/* ==========================================================================
   SERVICE AREAS
   ========================================================================== */

.crumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 22px;
}

.crumbs a { color: var(--blue-light); }
.crumbs a:hover { text-decoration: underline; }

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

.area-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.36s var(--ease), box-shadow 0.36s var(--ease);
}

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

.area-media { display: block; overflow: hidden; }

.area-media img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.area-card:hover .area-media img { transform: scale(1.04); }

.area-body {
  padding: 30px 30px 34px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.area-body h3 { font-size: 26px; color: var(--navy-800); margin-bottom: 12px; }
.area-body h3 a:hover { color: var(--blue); }

.area-body p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--gray-500);
  margin-bottom: 20px;
}

.area-body .hood-tags { margin-bottom: 24px; }

.area-body .hood-tags span {
  color: var(--blue);
  border-color: rgba(43, 145, 209, 0.34);
}

.area-link {
  margin-top: auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.area-link::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.28s var(--ease);
}

.area-link:hover::after { transform: rotate(45deg) translate(3px, -3px); }

/* list of additional communities */
.area-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  overflow: hidden;
}

.area-list li {
  background: var(--navy-700);
  padding: 22px 24px;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--white);
}

/* ---------- individual area page layout ---------- */

.area-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: start;
}

.area-main .lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
}

.area-main p { color: #414b5a; }

.area-subhead {
  font-size: 26px;
  color: var(--navy-800);
  margin: 46px 0 26px;
  padding-top: 34px;
  border-top: 1px solid var(--gray-200);
}

.nb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.nb h4 {
  font-size: 19px;
  color: var(--navy-800);
  margin-bottom: 10px;
}

.nb p { font-size: 15px; line-height: 1.68; color: var(--gray-500); }

.area-side { display: grid; gap: 22px; position: sticky; top: 116px; }

.side-card {
  background: var(--navy-800);
  border-radius: var(--radius);
  padding: 32px 30px;
  color: var(--white);
}

.side-card h3 { font-size: 22px; margin-bottom: 12px; }

.side-card p {
  font-size: 15px;
  line-height: 1.68;
  color: var(--on-dark);
  margin-bottom: 22px;
}

.side-card .btn { width: 100%; }
.side-card .btn + .btn { margin-top: 10px; }
.side-card .btn-outline { color: var(--white); border-color: var(--rule-dark); }
.side-card .btn-outline:hover { color: var(--blue-light); border-color: var(--blue-light); }

.side-card-alt {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--ink);
}

.side-card-alt h3 { color: var(--navy-800); margin-bottom: 18px; }

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

.side-links a {
  font-size: 15px;
  color: var(--gray-500);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.side-links a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--blue);
  border-right: 1.5px solid var(--blue);
  transform: rotate(45deg);
  flex: none;
}

.side-links a:hover { color: var(--blue); }

/* ==========================================================================
   VALUE CARDS  (About page)
   ========================================================================== */

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

.value-card {
  background: var(--navy-700);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  padding: 38px 34px;
  transition: transform 0.36s var(--ease), border-color 0.36s var(--ease);
}

.value-card:hover { transform: translateY(-6px); border-color: rgba(43, 145, 209, 0.5); }

.value-num {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--blue-light);
  margin-bottom: 18px;
}

.value-card h3 { font-size: 26px; color: var(--white); margin-bottom: 14px; }

.value-card p { font-size: 15.5px; line-height: 1.7; color: var(--on-dark); }

/* ==========================================================================
   SERVICES  (Services page)
   ========================================================================== */

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

.service {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  transition: transform 0.36s var(--ease), box-shadow 0.36s var(--ease);
}

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

.service-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--blue-dim);
  margin-bottom: 24px;
}

.service-icon svg { width: 24px; height: 24px; stroke: var(--blue); }

.service h3 { font-size: 24px; color: var(--navy-800); margin-bottom: 14px; }
.service h3 a { transition: color 0.24s var(--ease); }
.service h3 a:hover { color: var(--blue); }

/* the bullet list should not sit flush against the Learn More link */
.service .area-link { margin-top: 24px; }
.service .service-points + .area-link { margin-top: 22px; }

.service > p { font-size: 15.5px; line-height: 1.7; color: var(--gray-500); }

.service-points {
  list-style: none;
  margin: 24px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--gray-200);
  display: grid;
  gap: 11px;
}

.service-points li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray-500);
}

.service-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--blue);
  border-bottom: 1.6px solid var(--blue);
  transform: rotate(45deg);
}

/* ==========================================================================
   PROCESS STEPS  (Services page)
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.step { position: relative; padding-top: 30px; border-top: 1px solid var(--rule-dark); }

.step-num {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  color: rgba(43, 145, 209, 0.5);
  margin-bottom: 18px;
}

.step h3 { font-size: 22px; color: var(--white); margin-bottom: 12px; }

.step p { font-size: 15px; line-height: 1.68; color: var(--on-dark); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */

.cta-band {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: clamp(34px, 5vw, 62px);
  box-shadow: var(--shadow-card);
}

.cta-band .section-title { margin-bottom: 16px; }

.cta-actions { display: flex; flex-direction: column; gap: 12px; }

/* ==========================================================================
   THANK YOU PAGE
   ========================================================================== */

.thanks {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 160px 0 96px;
  background: var(--navy-900);
  overflow: hidden;
}

.thanks-media { position: absolute; inset: 0; z-index: 0; }

.thanks-media .ph {
  width: 100%;
  height: 100%;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 26px 30px;
  font-size: 10px;
}

.thanks::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(8, 15, 29, 0.93);
}

.thanks .shell { position: relative; z-index: 2; }

.thanks-panel { max-width: 760px; }

.thanks-mark {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue-dim);
  border: 1px solid rgba(43, 145, 209, 0.5);
  margin-bottom: 30px;
}

.thanks-mark svg { width: 30px; height: 30px; stroke: var(--blue-light); }

.thanks h1 {
  font-size: clamp(34px, 4.8vw, 58px);
  color: var(--white);
  margin-bottom: 22px;
}

.thanks-sub {
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 300;
  color: var(--on-dark);
  max-width: 56ch;
  margin-bottom: 52px;
}

.thanks-next h2 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 26px;
}

.thanks-next ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.thanks-next li {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--rule-dark);
}

.thanks-next li:last-child { border-bottom: 1px solid var(--rule-dark); }

.thanks-next .n {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--blue-light);
  flex: none;
  padding-top: 2px;
}

.thanks-next b {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
}

.thanks-next div {
  font-size: 15px;
  line-height: 1.68;
  color: var(--on-dark);
}

.thanks-urgent { margin: 34px 0 40px; }

.thanks-urgent p { font-size: 15.5px; color: var(--on-dark); }

.thanks-urgent a { color: var(--blue-light); font-weight: 600; white-space: nowrap; }
.thanks-urgent a:hover { text-decoration: underline; }

.thanks-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   VALUE BAR
   ========================================================================== */

.value-bar {
  background: var(--blue);
  padding: 26px 0;
}

.value-bar .shell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 34px;
}

.value-bar span {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.06em;
}

.value-bar .dot {
  font-family: var(--sans);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.66);
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(40px, 6vw, 88px);
  row-gap: clamp(34px, 4vw, 52px);
  align-items: start;
}

/* The column holds the photo AND the credentials grid beneath it. The badge
   and the corner rule anchor to .portrait-frame, not to the whole column, so
   they stay pinned to the photo rather than drifting past the credentials. */
.about-portrait { position: static; }

.portrait-frame { position: relative; }

.about-portrait .ph,
.about-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
}

/* source is 1024 x 1536, taller than the 4:5 frame, so it crops top and
   bottom. Bias upward to keep his head clear of the edge. */
.about-photo {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 50% 18%;
}

.portrait-frame::after {
  content: "";
  position: absolute;
  left: -18px;
  bottom: -18px;
  width: 128px;
  height: 128px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  z-index: -1;
}

.about-badge {
  position: absolute;
  right: -16px;
  bottom: 34px;
  background: var(--navy-800);
  color: var(--white);
  padding: 20px 26px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  max-width: 216px;
}

.about-badge .t {
  font-family: var(--serif);
  font-size: 19px;
  margin-bottom: 4px;
}

.about-badge .s {
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue-light);
}

.about-body p { color: #414b5a; }
.about-body p.lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 400;
}

/* Spans the full width of the about grid as its own row, under the photo and
   the bio, so four columns have room to breathe. */
.creds {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 20px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
}

.cred {
  background: var(--white);
  padding: 24px 26px;
}

.cred .k {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--navy-800);
  margin-bottom: 5px;
}

.cred .v {
  font-size: 13.5px;
  color: var(--gray-500);
  line-height: 1.55;
}

/* ==========================================================================
   NEIGHBORHOODS
   ========================================================================== */

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

.hood {
  background: var(--navy-700);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.36s var(--ease), border-color 0.36s var(--ease);
}

.hood:hover { transform: translateY(-6px); border-color: rgba(43, 145, 209, 0.5); }

.hood .ph,
.hood-photo {
  aspect-ratio: 16 / 11;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.hood-body { padding: 30px 30px 34px; }

.hood h3 {
  font-size: 25px;
  color: var(--white);
  margin-bottom: 12px;
}

.hood p {
  font-size: 15.5px;
  color: var(--on-dark);
  line-height: 1.68;
  margin-bottom: 20px;
}

.hood-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* call to action below the neighborhood cards */
.hood-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 46px;
  padding-top: 40px;
  border-top: 1px solid var(--rule-dark);
}

.hood-cta p {
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 23px);
  color: var(--white);
  margin: 0;
  max-width: 60ch;
}

.hood-tags span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-light);
  border: 1px solid rgba(43, 145, 209, 0.34);
  border-radius: 999px;
  padding: 6px 13px;
}

/* ==========================================================================
   AVAILABLE PROPERTIES
   Outbound call to action replacing the former listing card grid.
   ========================================================================== */

.properties-cta {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.properties-media { position: relative; min-height: 100%; }

/* fills the panel column edge to edge whatever the panel's height works out to */
.properties-media .ph,
.properties-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.properties-body { padding: clamp(34px, 5vw, 68px); }

.properties-body .section-title { margin-bottom: 18px; }

.properties-body .section-intro { max-width: 52ch; }

.properties-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.properties-actions .btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex: none;
}

.properties-note {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--gray-200);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--gray-500);
}

.properties-note a {
  color: var(--blue);
  font-weight: 600;
  white-space: nowrap;
}

.properties-note a:hover { text-decoration: underline; }
/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */

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

.quote {
  background: var(--navy-700);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  padding: 40px 34px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.quote::before {
  content: "\201C";
  font-family: var(--serif);
  font-size: 92px;
  line-height: 0.8;
  color: rgba(43, 145, 209, 0.34);
  position: absolute;
  top: 24px;
  right: 30px;
}

.stars { display: flex; gap: 3px; margin-bottom: 20px; }
.stars svg { width: 16px; height: 16px; fill: var(--blue-light); }

.quote blockquote {
  margin: 0 0 26px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
  color: var(--white);
  font-weight: 400;
}

.quote figcaption {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--rule-dark);
}

.quote .where {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-light);
}

/* ---------- reviews: link out to verifiable profiles ---------- */

.reviews-connect {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
  margin-top: 46px;
  padding-top: 46px;
  border-top: 1px solid var(--rule-dark);
}

/* standalone variant: its own section on the area pages, so no divider above */
.reviews-connect-solo {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Framed to the faces. The lower part of the source photo shows paperwork
   with handwritten client details, so the crop deliberately excludes it. */
.reviews-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 32%;
  border-radius: var(--radius);
  border: 1px solid var(--rule-dark);
}

.reviews-connect-body h3 {
  font-size: clamp(24px, 3vw, 34px);
  color: var(--white);
  margin-bottom: 16px;
}

.reviews-connect-body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--on-dark);
  max-width: 62ch;
}

.socials-lg { margin-top: 26px; gap: 10px; }

.socials-lg a {
  font-size: 13.5px;
  padding: 11px 20px 11px 16px;
}

.socials-lg svg { width: 17px; height: 17px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-grid {
  display: grid;
  /* minmax(0, …) rather than a bare fr: a bare fr floors the track at the
     item's min-content width, so one wide child (a select, a map slot) can
     push the whole grid past the viewport. */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 6vw, 84px);
  align-items: start;
}

.contact-grid > * { min-width: 0; }

/* a select is sized by its widest option, which can exceed a narrow column */
.field select { max-width: 100%; min-width: 0; }

.contact-lines { margin-top: 40px; display: grid; gap: 4px; }

.cline {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-200);
}

.cline:first-child { border-top: 1px solid var(--gray-200); }

.cline svg { width: 19px; height: 19px; stroke: var(--blue); flex: none; margin-top: 4px; }

.cline .k {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 4px;
}

.cline .v {
  font-size: 17px;
  font-weight: 500;
  color: var(--navy-800);
  line-height: 1.5;
}

.cline a.v:hover { color: var(--blue); }

.form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: clamp(30px, 4vw, 46px);
  box-shadow: var(--shadow-card);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 9px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.24s var(--ease), background 0.24s var(--ease);
}

.field textarea { resize: vertical; min-height: 122px; line-height: 1.6; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--white);
}

/* ---------- GoHighLevel embedded form ----------
   The form renders inside a cross origin iframe, so none of the styling above
   reaches it. Everything here is about the frame, not its contents.

   form_embed.js measures the form and writes an inline height onto the iframe.
   Do NOT set a CSS height or min-height on the iframe: a CSS rule beats the
   script's inline style in neither direction cleanly, and a min-height taller
   than the form leaves dead space under it on mobile, where the form is
   shortest. Let the script own the height.
--------------------------------------------- */

.form-card:has(.ghl-form) {
  padding: clamp(14px, 2vw, 22px);
}

.ghl-form iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  /* the frame paints before the form loads, so match the card behind it */
  background: var(--white);
}

.form-card .btn { width: 100%; margin-top: 6px; }

.form-note {
  font-size: 13px;
  color: var(--gray-500);
  text-align: center;
  margin-top: 18px;
  line-height: 1.6;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--navy-900);
  color: var(--on-dark);
  padding: 82px 0 0;
}

/* The footer runs the full width of the viewport rather than sitting inside
   the 1240px shell, with only a minimal gutter. The legal block below uses the
   same gutter so its edges line up with the columns above it. */
.site-footer .shell {
  max-width: none;
  padding-inline: var(--footer-gutter);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr 1.05fr 1fr;
  gap: 46px;
  padding-bottom: 56px;
}

.footer-brand p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--on-dark);
  margin-top: 24px;
  max-width: 42ch;
}

/* ---------- social links ---------- */

.socials {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.socials a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--on-dark);
  border: 1px solid var(--rule-dark);
  border-radius: 999px;
  padding: 8px 15px 8px 12px;
  transition: color 0.24s var(--ease), border-color 0.24s var(--ease),
              background 0.24s var(--ease);
}

.socials svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: currentColor;
  stroke: none;
}

/* the two house glyphs are drawn as outlines, so they stroke rather than fill */
.socials li:nth-child(1) svg,
.socials li:nth-child(2) svg {
  fill: none;
  stroke: currentColor;
}

.socials a:hover {
  color: var(--white);
  border-color: rgba(43, 145, 209, 0.6);
  background: var(--blue-dim);
}

/* ---------- contact list with icons ---------- */

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.footer-contact svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 4px;
  stroke: var(--blue-light);
}

/* ---------- map slot ---------- */

/* Height comes from the aspect ratio ALONE. Do not add a min-height here.
   When a min-height clamps the height of a box that has an aspect-ratio, the
   used WIDTH is re-derived from the ratio (min-height x ratio), so the box
   grows sideways and overflows its column. min-width does not prevent this,
   because the result is a used width rather than a minimum. Change the ratio
   per breakpoint instead, as below. */
.map-slot {
  position: relative;
  aspect-ratio: 4 / 3;
  min-width: 0;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Contact page map. Sits below the contact grid and runs the full width of
   the shell rather than being squeezed into the details column. */
.map-slot-lg {
  aspect-ratio: 21 / 8;
  margin-top: clamp(48px, 6vw, 76px);
}

.map-slot .ph,
.map-slot iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.footer-col h4 {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 22px;
}

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

.footer-col a,
.footer-col li {
  font-size: 15px;
  color: var(--on-dark);
  line-height: 1.6;
  transition: color 0.24s var(--ease);
}

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

.footer-legal {
  border-top: 1px solid var(--rule-dark);
  padding: 30px 0 40px;
  text-align: center;
}

/* No max-width: the disclaimer is meant to run as one continuous block from
   gutter to gutter rather than wrapping early into a narrow column. */
.footer-legal p {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--on-dark-faint);
  margin: 0 auto 14px;
  text-wrap: pretty;
}

.footer-legal .eho {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--on-dark);
}

.footer-legal .eho svg { width: 22px; height: 22px; fill: var(--on-dark); flex: none; }

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */

/* Content is visible by default. The hidden starting state applies only once
   the inline head script has confirmed JavaScript is running, so a script
   failure degrades to a plain visible page rather than a blank one. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.72s var(--ease), transform 0.72s var(--ease);
}

.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .hood-grid,
  .services-grid,
  .values-grid,
  .area-grid,
  .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-card:nth-child(odd):last-child { grid-column: 1 / -1; }
  .area-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-layout { grid-template-columns: minmax(0, 1fr); }
  .area-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-connect { grid-template-columns: minmax(0, 1fr); }
  .reviews-photo { max-width: 420px; }
  .value-card:last-child,
  .service:nth-child(odd):last-child { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .cta-band { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: row; flex-wrap: wrap; }
  .quote:last-child { grid-column: 1 / -1; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(8, 15, 29, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule-dark);
    padding: 8px var(--gutter) 24px;

    /* Thirteen links plus the services submenu can easily exceed a phone
       screen. Cap the panel at the space actually below the header and let it
       scroll itself, so the last item is always reachable. dvh tracks the
       browser chrome collapsing on scroll; vh is the fallback. */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;

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

  /* Set by script.js while the panel is open. Without it the page scrolls
     behind the menu, which moves the header out from under the panel. */
  .nav-locked, .nav-locked body { overflow: hidden; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--rule-dark); font-size: 16px; }
  .nav a:last-child { border-bottom: none; }
  .nav-toggle { display: block; }

  /* Mobile header: call left, logo centred, hamburger right.
     A three column grid with equal outer tracks keeps the logo optically
     centred no matter how wide the toggle or the phone link happen to be.
     The nav panel is position:fixed, so it is out of flow and does not
     occupy a grid cell.
     Placement is by grid-column rather than DOM order, so the header markup
     stays one block that build.mjs copies verbatim onto every page. */
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
  }

  /* grid-row is explicit on all three. Without it auto-placement walks the
     cursor forward in DOM order (logo, toggle, phone) and any item whose
     column sits behind the cursor is pushed onto a second row. */
  .header-phone { grid-row: 1; grid-column: 1; justify-self: start; margin-left: 0; }
  .logo-mark { grid-row: 1; grid-column: 2; justify-self: center; }
  .nav-toggle { grid-row: 1; grid-column: 3; justify-self: end; margin-left: 0; }

  .about-grid,
  .contact-grid,
  .properties-cta { grid-template-columns: minmax(0, 1fr); }
  .about-portrait { max-width: 420px; }
  .about-badge { right: 12px; }

  /* the media panel loses its column, so give it an explicit height */
  .properties-media { min-height: 300px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { min-height: auto; padding: 132px 0 78px; }
  .hero-stats { gap: 28px 40px; margin-top: 48px; }
  .hood-grid,
  .services-grid,
  .values-grid,
  .steps,
  .area-grid,
  .area-list,
  .area-side,
  .nb-grid,
  .quote-grid { grid-template-columns: 1fr; }
  .area-card:nth-child(odd):last-child { grid-column: auto; }
  .hood-cta { flex-direction: column; align-items: flex-start; }
  .hood-cta .btn { width: 100%; }
  .quote:last-child,
  .value-card:last-child,
  .service:nth-child(odd):last-child { grid-column: auto; }
  /* a 16:9 map is a thin strip on a phone, so square it up */
  .map-slot-lg { aspect-ratio: 4 / 3; }
  .page-hero { min-height: auto; padding: 132px 0 56px; }
  .thanks { min-height: auto; padding: 128px 0 72px; }
  .thanks-actions .btn { width: 100%; }
  .cta-actions .btn { width: 100%; }
  .creds { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .header-phone span { display: none; }
  .hero-actions .btn { width: 100%; }
}

/* ==========================================================================
   CASH OFFER FUNNEL
   Paid traffic landing pages. Same palette and type as the main site, but a
   tighter layout: reduced chrome, one visible action, and a sticky call to
   action bar on small screens.
   ========================================================================== */

/* ---------- reduced header and footer ---------- */

.header-inner-funnel { justify-content: space-between; }

.funnel-footer { padding: 56px 0 0; }

.funnel-footer-inner {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  border-top: 1px solid var(--rule-dark);
  padding: 40px 0;
}

.funnel-footer-inner .footer-logo { width: 96px; flex: none; }
.funnel-footer p { font-size: 14px; color: var(--on-dark); margin-bottom: 10px; }
.funnel-footer a { color: var(--blue-light); font-weight: 600; white-space: nowrap; }
.funnel-legal { font-size: 12.5px; line-height: 1.7; color: var(--on-dark-faint); }

/* ---------- hero and step banners ---------- */

.funnel-hero,
.funnel-step {
  position: relative;
  padding: clamp(128px, 15vw, 176px) 0 clamp(64px, 8vw, 96px);
  background: var(--navy-900);
  overflow: hidden;
}

.funnel-hero-media,
.funnel-step-media { position: absolute; inset: 0; z-index: 0; }

.funnel-hero-media img,
.funnel-step-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.funnel-hero::after,
.funnel-step::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(8, 15, 29, 0.96) 0%, rgba(8, 15, 29, 0.88) 50%, rgba(8, 15, 29, 0.7) 100%);
}

.funnel-hero .shell,
.funnel-step .shell { position: relative; z-index: 2; }

.funnel-hero-grid,
.funnel-step-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}

.funnel-hero h1,
.funnel-step h1 {
  font-size: clamp(34px, 4.8vw, 60px);
  color: var(--white);
  margin-bottom: 20px;
}

.funnel-hero h1 em,
.funnel-step h1 em { font-style: italic; color: var(--blue-light); }

.funnel-hero-sub {
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 300;
  color: var(--on-dark);
  max-width: 54ch;
  margin-bottom: 30px;
}

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

.funnel-ticks li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  color: var(--on-dark);
}

.funnel-ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 9px;
  height: 15px;
  border-right: 2px solid var(--blue-light);
  border-bottom: 2px solid var(--blue-light);
  transform: rotate(45deg);
}

/* ---------- form card ---------- */

.funnel-form-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 38px);
  box-shadow: var(--shadow-lift);
}

.funnel-form-card h2 {
  font-size: clamp(23px, 2.4vw, 29px);
  color: var(--navy-800);
  margin-bottom: 12px;
}

.funnel-form-card > p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-500);
  margin-bottom: 22px;
}

.btn-block { width: 100%; }

.funnel-form-note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gray-500);
  text-align: center;
  margin-top: 14px;
}

/* ---------- placeholder slots ----------
   Each slot is awaiting real content. Search the fragments for PLACEHOLDER.
--------------------------------------------- */

.slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.9;
}

.slot-form { min-height: 240px; margin-bottom: 20px; }
.slot-form-tall { min-height: 360px; }

/* ---------- comparison ---------- */

.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.compare-col {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 38px);
}

.compare-col h3 {
  font-size: 24px;
  color: var(--navy-800);
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gray-200);
}

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

.compare-col li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-500);
}

/* the listing column reads as friction, the cash column as relief */
.compare-col li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.6px solid var(--gray-200);
}

.compare-col-alt { background: var(--navy-800); border-color: var(--navy-800); }
.compare-col-alt h3 { color: var(--white); border-bottom-color: var(--rule-dark); }
.compare-col-alt li { color: var(--on-dark); }

.compare-col-alt li::before {
  width: 9px;
  height: 15px;
  top: 3px;
  border: none;
  border-right: 2px solid var(--blue-light);
  border-bottom: 2px solid var(--blue-light);
  border-radius: 0;
  transform: rotate(45deg);
}

.compare-note {
  margin: 30px auto 0;
  font-size: 15.5px;
  color: var(--gray-500);
  text-align: center;
  max-width: 70ch;
}

.funnel-points { border-top: none; padding-top: 0; }

.area-list-light { background: var(--gray-200); border-color: var(--gray-200); }
.area-list-light li { background: var(--gray-50); color: var(--navy-800); }

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

.faq {
  display: grid;
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq details { background: var(--white); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  padding: 22px 26px;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--navy-800);
  transition: color 0.24s var(--ease);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }

.faq summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.28s var(--ease);
}

.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }

.faq details p {
  padding: 0 26px 24px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--gray-500);
  max-width: 78ch;
}

/* ---------- steps two and three ---------- */

.funnel-step-center { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; }

.funnel-thanks { max-width: 760px; margin: 0 auto; text-align: center; }
.funnel-thanks .thanks-mark { margin: 0 auto 26px; }
.funnel-thanks .funnel-hero-sub { margin-inline: auto; }
.funnel-thanks .thanks-next { text-align: left; }
/* the phone sits directly above the buttons on this page, so give the row
   its own separation rather than letting the two blocks collide */
.funnel-thanks .thanks-actions { justify-content: center; margin-top: 40px; }

.funnel-aside { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--rule-dark); }
.funnel-aside-center { display: inline-block; border-top: none; }

.funnel-aside-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 6px;
}

.funnel-aside-phone {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  color: var(--white);
}

.funnel-aside-phone:hover { color: var(--blue-light); }

/* ---------- sticky mobile bar ---------- */

.funnel-bar { display: none; }

/* ==========================================================================
   FUNNEL RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .funnel-hero-grid,
  .funnel-step-grid { grid-template-columns: minmax(0, 1fr); }
  .funnel-form-card { max-width: 560px; }
}

@media (max-width: 720px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
  .funnel-footer-inner { flex-direction: column; gap: 20px; }
  .funnel-step-center { min-height: auto; }
  .faq summary { font-size: 16.5px; padding: 18px 20px; }
  .faq details p { padding: 0 20px 20px; font-size: 15px; }

  /* Sticky conversion bar. The extra bottom padding on the funnel sections
     keeps it from covering the final call to action. */
  .funnel-hero,
  .funnel-step { padding-bottom: 104px; }

  .funnel-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(8, 15, 29, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--rule-dark);
  }

  .funnel-bar .btn { flex: 1; padding: 15px 18px; font-size: 12px; }
  .funnel-bar-call { flex: 0 0 96px; color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
  .funnel-bar-call:hover { color: var(--blue-light); border-color: var(--blue-light); }
}

/* ==========================================================================
   SERVICES SUBMENU
   Pure CSS. Opens on :hover for a pointer and on :focus-within for a keyboard,
   so tabbing through the header reveals it without any script. Below 920px the
   nav is already a stacked panel, so the children render inline and indented
   rather than hiding behind a second tap.
   ========================================================================== */

.nav-group { position: relative; display: flex; align-items: center; }

.nav-group-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-caret {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  flex: none;
  transition: transform 0.28s var(--ease);
}

.nav-group:hover .nav-caret,
.nav-group:focus-within .nav-caret { transform: rotate(180deg); }

.nav-sub {
  position: absolute;
  top: 100%;
  left: -18px;
  z-index: 5;
  min-width: 248px;
  display: grid;
  padding: 10px;
  background: rgba(8, 15, 29, 0.97);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);

  /* hidden but still focusable order; visibility flips with the reveal */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease),
              visibility 0.24s var(--ease);
}

/* a small bridge so the pointer can travel from the label to the panel
   without crossing a dead gap and closing it */
.nav-group::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.nav-group:hover .nav-sub,
.nav-group:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-sub a {
  padding: 10px 14px;
  font-size: 13.5px;
  border-radius: 3px;
  white-space: nowrap;
  color: var(--on-dark);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

/* the shared underline animation would look wrong inside a panel */
.nav-sub a::after { display: none; }

.nav-sub a:hover,
.nav-sub a:focus-visible {
  background: var(--blue-dim);
  color: var(--blue-light);
}

@media (max-width: 920px) {
  .nav-group { display: block; }

  .nav-group-top {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid var(--rule-dark);
    font-size: 16px;
  }

  .nav-caret { display: none; }

  /* inline, indented, always open: one tap per destination */
  .nav-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 6px 16px;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-group::after { display: none; }

  .nav-sub a {
    padding: 12px 0;
    font-size: 14.5px;
    border-bottom: 1px solid var(--rule-dark);
    border-radius: 0;
  }

  .nav-sub a:last-child { border-bottom: none; }
  .nav-sub a:hover { background: none; color: var(--blue-light); }
}