/* ============================================================
   Nancy Tychowski — Mortgage Consultant
   Clean, calm, confident. Sans-serif only.
   Brand: navy #003049 / teal #A8DADC / cream #F1F0E8
   Spatial rhythm + soft cards borrowed from Marketing Well Core.
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --navy:        #003049;
  --navy-strong: #00263a;
  --navy-deep:   #001d2c;
  --teal:        #A8DADC;
  --teal-soft:   #d6edee;
  --teal-tint:   #eef7f7;
  --teal-ink:    #2c7378;   /* readable teal for small accent text */
  --cream:       #F1F0E8;
  --cream-deep:  #e8e7db;
  --white:       #ffffff;
  --ink:         #1a1a1a;

  --text:        var(--ink);
  --text-soft:   color-mix(in srgb, var(--ink) 66%, transparent);
  --text-muted:  color-mix(in srgb, var(--ink) 46%, transparent);
  --on-navy:     #eaf4f6;
  --on-navy-soft: color-mix(in srgb, #eaf4f6 72%, transparent);

  --line:        color-mix(in srgb, var(--navy) 13%, transparent);
  --line-soft:   color-mix(in srgb, var(--navy) 8%, transparent);

  /* ---- Spacing (4px base) ---- */
  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 20px;
  --space-6: 24px;  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 92px;

  /* ---- Radii ---- */
  --radius-card: 18px;
  --radius-md:   14px;
  --radius-pill: 999px;

  /* ---- Shadows (warm-cool, low contrast, ink-tinted) ---- */
  --shadow-sm:   0 1px 2px rgba(0,48,73,.05), 0 6px 18px rgba(0,48,73,.06);
  --shadow-card: 0 1px 2px rgba(0,48,73,.04), 0 10px 26px rgba(0,48,73,.07);
  --shadow-md:   0 2px 6px rgba(0,48,73,.07), 0 18px 44px rgba(0,48,73,.12);
  --shadow-lg:   0 8px 18px rgba(0,48,73,.10), 0 30px 60px rgba(0,48,73,.18);

  /* ---- Layout ---- */
  --container: 1180px;
  --gutter:    24px;
  --section-y: var(--space-24);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.4,.1,.2,1);
  --dur:      .22s;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: "Outfit", "Manrope", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--navy);
  text-wrap: balance;
}

p { text-wrap: pretty; }
a { color: var(--navy); text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--space-20); }
.bg-cream { background: var(--cream); }
.measure { max-width: 56ch; }

/* Eyebrow kicker */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--teal);
  border-radius: 2px;
}
.eyebrow--center { justify-content: center; }

/* Section heading block */
.section-head { max-width: 640px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.7rem);
}
.section-head .lead {
  margin-top: var(--space-4);
  font-size: 1.1rem;
  color: var(--text-soft);
}

/* Flourish divider (line · dot · line) */
.flourish {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 0 auto var(--space-5);
}
.flourish span { height: 1.5px; width: 46px; background: var(--teal); border-radius: 2px; }
.flourish i { width: 5px; height: 5px; border-radius: 50%; background: var(--teal-ink); }

/* ============================================================
   Buttons (pill, arrow nudge)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.btn svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.btn:hover svg.arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--navy-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn--secondary {
  background: var(--teal);
  color: var(--navy);
}
.btn--secondary:hover {
  background: var(--teal-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--navy); transform: translateY(-2px); }

/* On dark/navy bands */
.btn--cream {
  background: var(--cream);
  color: var(--navy);
}
.btn--cream:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline-light {
  background: transparent;
  color: var(--on-navy);
  border-color: color-mix(in srgb, var(--teal) 55%, transparent);
}
.btn--outline-light:hover { background: rgba(255,255,255,.08); border-color: var(--teal); }

.btn--lg { padding: 17px 34px; font-size: 1.08rem; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--teal) 75%, var(--navy));
  outline-offset: 3px;
  border-radius: 6px;
}

/* tel link inline */
.tel-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--navy); white-space: nowrap;
}
.tel-link svg { width: 17px; height: 17px; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--white) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  height: 76px;
}
.brand-mark { display: flex; flex-direction: column; line-height: 1; }
.brand-logo { display: block; width: auto; height: 52px; }
.brand-mark .name {
  font-family: "Outfit", sans-serif; font-weight: 600;
  font-size: 1.25rem; color: var(--navy); letter-spacing: -0.02em;
}
.brand-mark .role {
  font-size: .62rem; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--teal-ink); margin-top: 4px;
}
.main-nav { display: flex; align-items: center; gap: var(--space-8); }
.main-nav a.nav-link {
  font-weight: 600; font-size: .95rem; color: var(--text-soft);
  transition: color var(--dur);
}
.main-nav a.nav-link:hover { color: var(--navy); }
.main-nav a.nav-link.is-active { color: var(--navy); }
.main-nav a.nav-link.is-active::after {
  content: ""; display: block; height: 2px; border-radius: 2px;
  background: var(--teal); margin-top: 4px;
}
.header-actions { display: flex; align-items: center; gap: var(--space-5); }
.header-actions .tel-link { color: var(--navy); font-size: .98rem; }
.nav-toggle { display: none; background: none; border: none; padding: 8px; color: var(--navy); cursor: pointer; }
.nav-toggle svg { width: 26px; height: 26px; }

.mobile-menu {
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--white) 96%, transparent);
  backdrop-filter: blur(10px);
}
.mobile-menu nav { display: flex; flex-direction: column; gap: var(--space-2); padding-block: var(--space-5); }
.mobile-menu nav > a:not(.btn):not(.tel-link) {
  font-weight: 600; color: var(--text-soft); padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu nav .tel-link { padding: 12px 0; }
.mobile-menu nav .btn { margin-top: var(--space-3); align-self: flex-start; }

/* ---- Services dropdown (desktop) ---- */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.main-nav a.nav-parent { cursor: pointer; }
.nav-chev {
  width: 14px; height: 14px; display: inline-block; vertical-align: middle;
  margin-left: 3px; transition: transform var(--dur) var(--ease-out);
}
.nav-item.has-dropdown:hover .nav-chev,
.nav-item.has-dropdown:focus-within .nav-chev { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 246px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  z-index: 70;
}
/* invisible bridge so the pointer can cross the gap without the menu closing */
.nav-dropdown::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 14px; }
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(6px);
}
.nav-dropdown a {
  padding: 9px 14px; border-radius: 10px;
  font-size: .92rem; font-weight: 600; color: var(--text-soft); white-space: nowrap;
  transition: background var(--dur), color var(--dur);
}
.nav-dropdown a:hover,
.nav-dropdown a.is-active { background: var(--teal-tint); color: var(--navy); }

/* ---- Services accordion (mobile) ---- */
.m-group { display: flex; flex-direction: column; border-bottom: 1px solid var(--line-soft); }
.m-parent {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; padding: 10px 0;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; font-weight: 600; font-size: 1rem; color: var(--text-soft);
}
.m-parent.is-active { color: var(--navy); }
.m-parent .nav-chev { margin-left: 0; }
.m-parent[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
.m-submenu { display: flex; flex-direction: column; padding: 2px 0 10px var(--space-4); }
.m-submenu[hidden] { display: none; }
.m-submenu a {
  padding: 8px 0; font-weight: 500; font-size: .95rem; color: var(--text-soft);
}
.m-submenu a.is-active { color: var(--navy); }

/* ---- City / service-area services grid ---- */
.area-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-10); }
.area-service {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  font-family: "Outfit", sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--navy);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.area-service:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--teal) 45%, transparent);
}
.area-service svg { width: 20px; height: 20px; flex: none; color: var(--teal-ink); transition: transform var(--dur) var(--ease-out); }
.area-service:hover svg { transform: translateX(3px); }
@media (max-width: 640px) { .area-services { grid-template-columns: 1fr; } }

/* Service Areas index — region groups */
.area-group + .area-group { margin-top: var(--space-16); }
.area-group__title {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); color: var(--navy);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--line-soft);
}
.area-group .area-services { margin-top: var(--space-6); }

/* ============================================================
   Blog
   ============================================================ */
/* Post meta under the hero title */
.post-meta {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: var(--space-5); color: var(--text-muted);
  font-size: .9rem; font-weight: 600;
}
.post-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); }

/* Article body */
.post { max-width: 760px; margin: 0 auto; }
.post-body { font-size: 1.12rem; line-height: 1.75; color: var(--text-soft); }
.post-body > * + * { margin-top: var(--space-5); }
.post-body h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); color: var(--navy);
  margin-top: var(--space-12); line-height: 1.25;
}
.post-body h2 + p { margin-top: var(--space-4); }
.post-body strong { color: var(--navy); font-weight: 600; }
.post-body a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { color: var(--navy); }
.post-body ul, .post-body ol { padding-left: 1.35em; display: flex; flex-direction: column; gap: var(--space-2); }
.post-body li { padding-left: 4px; }
.post-back { max-width: 760px; margin: var(--space-12) auto 0; text-align: center; }

/* Blog index cards */
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.post-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-8);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-card__date { color: var(--teal-ink); font-weight: 700; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.post-card h2 { font-size: 1.3rem; color: var(--navy); margin-top: var(--space-3); line-height: 1.25; }
.post-card p { color: var(--text-soft); margin-top: var(--space-3); flex: 1; }
.post-card .more { margin-top: var(--space-6); color: var(--navy); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.post-card .more svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.post-card:hover .more svg { transform: translateX(3px); }
@media (max-width: 720px) { .post-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero::before {
  /* faint geometric accent */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(820px 520px at 92% -10%, var(--teal-tint), transparent 60%);
  z-index: 0;
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(48px, 6vw, 88px);
}
.hero h1 {
  font-size: clamp(2.3rem, 1.3rem + 3.4vw, 3.5rem);
  font-weight: 700;
}
.hero h1 .accent { color: var(--teal-ink); }
.hero .subhead {
  margin-top: var(--space-5);
  font-size: 1.18rem;
  color: var(--text-soft);
  max-width: 38ch;
}
.hero-cta {
  margin-top: var(--space-8);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
}
.hero-cta .tel-link { padding: 14px 20px; font-size: 1.02rem; }

.hero-photo {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 460px;
}
.hero-photo .frame {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 4.4;
  background: var(--cream);
}
.hero-photo .frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-photo::after {
  /* soft teal blob behind */
  content: "";
  position: absolute; inset: auto -28px -28px auto;
  width: 62%; height: 62%;
  background: var(--teal);
  border-radius: 42% 58% 60% 40% / 50% 45% 55% 50%;
  z-index: -1;
  opacity: .55;
}
.hero-photo .badge {
  position: absolute; left: -22px; bottom: 30px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
}
.hero-photo .badge .num {
  font-family: "Outfit", sans-serif; font-weight: 700;
  font-size: 1.6rem; color: var(--navy); line-height: 1;
}
.hero-photo .badge .lbl { font-size: .82rem; color: var(--text-soft); line-height: 1.3; }

/* ============================================================
   Trust bar
   ============================================================ */
.trust-bar { background: var(--navy); }
.trust-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: var(--space-6) var(--space-12);
  padding-block: var(--space-6);
}
.trust-item {
  display: flex; align-items: center; gap: 10px;
  color: var(--on-navy); font-weight: 600; font-size: .98rem;
}
.trust-item svg { width: 19px; height: 19px; color: var(--teal); flex: none; }

/* ============================================================
   Services grid
   ============================================================ */
.services-grid {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.service-card {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.medallion {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--teal-tint);
  color: var(--navy);
  border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
  transition: background var(--dur), color var(--dur);
}
.medallion svg { width: 24px; height: 24px; }
.service-card:hover .medallion { background: var(--teal); }
.service-card h3 { font-size: 1.18rem; font-weight: 600; }
.service-card p { font-size: .98rem; color: var(--text-soft); line-height: 1.55; }
.service-card .more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Outfit", sans-serif; font-weight: 600; font-size: .92rem;
  color: var(--teal-ink);
  padding-top: var(--space-3);
}
.service-card .more svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.service-card:hover .more svg { transform: translateX(4px); }

/* Other services — lighter secondary row */
.other-services {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.other-services__label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.other-services__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.other-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--white);
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: .95rem;
  color: var(--navy);
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.other-item svg { width: 18px; height: 18px; flex: none; color: var(--teal-ink); }
.other-item:hover {
  background: var(--teal-tint);
  border-color: color-mix(in srgb, var(--teal) 55%, transparent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Brokerage affiliation */
.brokerage {
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}
.brokerage__logo { display: block; width: auto; height: 46px; }
.brokerage__line {
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* ============================================================
   Apply band (full-width feature band)
   ============================================================ */
.apply-band {
  position: relative;
  background: var(--navy);
  color: var(--on-navy);
  overflow: hidden;
}
.apply-band::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 360px at 12% 120%, rgba(168,218,220,.16), transparent 60%),
    radial-gradient(520px 320px at 95% -20%, rgba(168,218,220,.12), transparent 60%);
}
.apply-band .wrap { position: relative; text-align: center; }
.apply-band h2 {
  color: #fff;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.8rem);
}
.apply-band p { margin-top: var(--space-4); color: var(--on-navy-soft); font-size: 1.1rem; }
.apply-band .btn { margin-top: var(--space-8); }

/* ============================================================
   Why Nancy — value props
   ============================================================ */
.value-grid {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.value-item .medallion { width: 56px; height: 56px; border-radius: 16px; margin-bottom: var(--space-5); }
.value-item .medallion svg { width: 27px; height: 27px; }
.value-item h3 { font-size: 1.3rem; margin-bottom: var(--space-3); }
.value-item p { color: var(--text-soft); }

/* ============================================================
   Testimonials
   ============================================================ */
.testi-grid {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.testi-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.stars { display: flex; gap: 3px; color: #e0a008; }
.stars svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.testi-card blockquote { font-size: 1.02rem; color: var(--text); line-height: 1.6; }
.testi-card .who { font-family: "Outfit", sans-serif; font-weight: 600; color: var(--navy); font-size: .98rem; }

/* ============================================================
   Areas served
   ============================================================ */
.areas { text-align: center; }
.areas .chips {
  margin-top: var(--space-8);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 940px; margin-inline: auto;
}
.areas .chips span {
  font-size: .9rem; font-weight: 600; color: var(--navy);
  background: var(--teal-tint);
  border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent);
  padding: 7px 15px; border-radius: var(--radius-pill);
}
.areas .more-note { margin-top: var(--space-6); color: var(--text-muted); font-size: .95rem; }

/* ============================================================
   Final contact
   ============================================================ */
.contact { background: var(--navy); color: var(--on-navy); }
.contact-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.contact h2 { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.7rem); }
.contact .lead { margin-top: var(--space-4); color: var(--on-navy-soft); font-size: 1.1rem; max-width: 42ch; }
.contact .actions { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.contact-rows { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.contact-rows a, .contact-rows span {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--on-navy); font-weight: 600;
}
.contact-rows svg { width: 19px; height: 19px; color: var(--teal); flex: none; }

.signup {
  background: rgba(255,255,255,.06);
  border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  backdrop-filter: blur(6px);
}
.signup .eyebrow { color: var(--teal); }
.signup h3 { color: #fff; font-size: 1.4rem; }
.signup p { color: var(--on-navy-soft); margin-top: var(--space-3); font-size: .98rem; }
.signup form { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.signup input {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--teal) 32%, transparent);
  background: rgba(255,255,255,.95);
  color: var(--ink);
  font: inherit;
}
.signup input::placeholder { color: var(--text-muted); }
.signup .btn { width: 100%; }
.signup .note { font-size: .8rem; color: var(--on-navy-soft); margin-top: 4px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--navy-deep); color: var(--on-navy-soft); }
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-10);
}
.footer-inner .brand-mark .name { color: #fff; }
.footer-brand { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-brokerage {
  font-size: .8rem; font-weight: 500; line-height: 1.4;
  color: color-mix(in srgb, var(--on-navy-soft) 80%, transparent);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.footer-nav a { color: var(--on-navy-soft); font-weight: 600; font-size: .92rem; transition: color var(--dur); }
.footer-nav a:hover { color: var(--teal); }
.footer-legal { width: 100%; border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--space-6); font-size: .82rem; color: color-mix(in srgb, var(--on-navy-soft) 70%, transparent); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .main-nav, .header-actions .tel-link, .header-actions .btn--primary { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-photo { justify-self: center; max-width: 380px; margin-top: var(--space-8); }
  .value-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .testi-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 1rem; }
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .service-card { padding: var(--space-5); }
  :root { --section-y: var(--space-16); }
}
@media (max-width: 420px) {
  .services-grid { grid-template-columns: 1fr; }
}

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

/* Entrance — gentle, gated to reduced-motion preference */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); }
  .reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
}

/* ============================================================
   Book A Call page
   ============================================================ */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(720px 460px at 88% -20%, var(--teal-tint), transparent 62%);
}
.page-hero .wrap { position: relative; padding-block: clamp(48px, 6vw, 84px); text-align: center; }
.page-hero h1 { font-size: clamp(2.2rem, 1.3rem + 3vw, 3.1rem); }
.page-hero h1 .accent { color: var(--teal-ink); }
.page-hero .subhead {
  margin: var(--space-5) auto 0; max-width: 56ch;
  font-size: 1.15rem; color: var(--text-soft);
}

.booking { padding-block: var(--space-20); }
.booking-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: clamp(28px, 3.5vw, 52px);
  align-items: start;
}

/* Call-type selector list */
.call-list { display: flex; flex-direction: column; gap: var(--space-3); position: sticky; top: 96px; }
.call-list__label {
  font-size: .75rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--teal-ink); margin-bottom: var(--space-2);
}
.call-option {
  display: flex; align-items: flex-start; gap: var(--space-4);
  width: 100%; text-align: left;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}
.call-option:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.call-option .medallion { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.call-option .medallion svg { width: 21px; height: 21px; }
.call-option__body { display: flex; flex-direction: column; gap: 3px; }
.call-option__title {
  font-family: "Outfit", sans-serif; font-weight: 600; font-size: 1.02rem;
  color: var(--navy); line-height: 1.25;
}
.call-option__desc { font-size: .9rem; color: var(--text-soft); line-height: 1.45; }
.call-option.is-active {
  border-color: var(--navy);
  background: var(--navy);
}
.call-option.is-active .call-option__title { color: #fff; }
.call-option.is-active .call-option__desc { color: var(--on-navy-soft); }
.call-option.is-active .medallion {
  background: var(--teal); color: var(--navy);
  border-color: color-mix(in srgb, var(--teal) 60%, white);
}

/* Calendly mount */
.calendly-panel {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 1080px;
}
.calendly-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--line-soft);
  background: var(--teal-tint);
}
.calendly-panel__head h2 { font-size: 1.3rem; }
.calendly-panel__head p { font-size: .92rem; color: var(--text-soft); margin-top: 2px; }
.calendly-mount { min-height: 1000px; height: 1000px; }
.calendly-mount .calendly-inline-widget { min-width: 320px; height: 1000px; }
/* Calendly injects its own widget div via initInlineWidget — force it to fill */
.calendly-mount > div { min-height: 1000px; height: 1000px; }
.calendly-mount iframe { min-height: 1000px; height: 1000px; }

/* Contact strip under booking */
.book-contact { background: var(--navy); color: var(--on-navy); }
.book-contact .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-6) var(--space-12); padding-block: var(--space-10); text-align: center;
}
.book-contact a, .book-contact span {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--on-navy); font-weight: 600;
}
.book-contact svg { width: 19px; height: 19px; color: var(--teal); flex: none; }
.book-contact .crisis { color: var(--on-navy-soft); font-weight: 500; font-size: .92rem; }

@media (max-width: 920px) {
  .booking-layout { grid-template-columns: 1fr; }
  .call-list { position: static; }
}

/* ============================================================
   Service page template
   (Residential Mortgages, and any future service page)
   ============================================================ */

/* Breadcrumb under the page hero eyebrow */
.page-hero .crumbs {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600; color: var(--text-muted);
  margin-bottom: var(--space-5);
}
.page-hero .crumbs a { color: var(--teal-ink); }
.page-hero .crumbs a:hover { color: var(--navy); }
.page-hero .crumbs svg { width: 14px; height: 14px; color: var(--text-muted); }
/* On the plain (non-photo) centered hero, keep the breadcrumb on its own line */
.page-hero:not(.page-hero--photo) .crumbs { display: flex; justify-content: center; }

.page-hero .page-hero__cta {
  margin-top: var(--space-8);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-4);
}

/* --- Photo hero (residential) --- */
.page-hero--photo {
  background: var(--navy-deep);
  border-bottom: none;
  isolation: isolate;
}
.page-hero--photo::before { display: none; }
.page-hero--photo .hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero--photo .hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;
}
.page-hero--photo .hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(96deg,
      rgba(0,29,44,.94) 0%,
      rgba(0,34,52,.86) 26%,
      rgba(0,38,58,.55) 52%,
      rgba(0,38,58,.12) 78%,
      rgba(0,38,58,0) 100%),
    linear-gradient(0deg, rgba(0,29,44,.35), rgba(0,29,44,0) 40%);
}
.page-hero--photo .wrap {
  position: relative; z-index: 2;
  text-align: left;
  padding-block: clamp(72px, 9vw, 128px);
  max-width: var(--container);
}
.page-hero--photo h1,
.page-hero--photo .subhead { max-width: 30ch; }
.page-hero--photo h1 { color: var(--white); margin: 0; }
.page-hero--photo h1 .accent { color: var(--teal); }
.page-hero--photo .subhead {
  margin-left: 0; margin-right: 0;
  color: var(--on-navy);
}
.page-hero--photo .eyebrow { color: var(--teal); display: block; margin-top: var(--space-4); }
.page-hero--photo .page-hero__cta { justify-content: flex-start; }
.page-hero--photo .crumbs { color: var(--on-navy-soft); display: flex; flex-wrap: wrap; }
.page-hero--photo .crumbs a { color: var(--teal); }
.page-hero--photo .crumbs a:hover { color: var(--white); }
.page-hero--photo .crumbs strong { color: var(--white); font-weight: 600; }
.page-hero--photo .crumbs svg { color: var(--on-navy-soft); }

@media (max-width: 640px) {
  .page-hero--photo .hero-bg img { object-position: 68% center; }
  .page-hero--photo .hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(0,29,44,.88) 0%,
        rgba(0,34,52,.72) 45%,
        rgba(0,38,58,.55) 100%);
  }
  .page-hero--photo h1, .page-hero--photo .subhead { max-width: none; }
}

/* --- Intro / definition split --- */
.svc-intro__grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.svc-intro__aside { position: sticky; top: 100px; }
.svc-intro__aside h2 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.3rem); }
.svc-intro__body > p { color: var(--text-soft); font-size: 1.1rem; }
.svc-intro__body > p + p { margin-top: var(--space-5); }
.svc-intro__body strong { color: var(--navy); font-weight: 600; }

/* Small stat / reassurance card inside the aside */
.svc-note {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--teal-tint);
  border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent);
  border-radius: var(--radius-card);
}
.svc-note .num {
  font-family: "Outfit", sans-serif; font-weight: 700;
  font-size: 2rem; color: var(--navy); line-height: 1;
}
.svc-note p { margin-top: var(--space-3); font-size: .96rem; color: var(--text-soft); }

/* --- Pain-points → reassurance --- */
.pain-grid {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.pain-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.pain-card .worry {
  font-family: "Outfit", sans-serif; font-style: italic; font-weight: 500;
  font-size: 1.16rem; color: var(--navy); line-height: 1.35;
}
.pain-card .worry::before {
  content: "\201C"; color: var(--teal-ink); font-size: 1.4em;
  line-height: 0; vertical-align: -0.15em; margin-right: 2px;
}
.pain-card .answer { color: var(--text-soft); font-size: 1rem; line-height: 1.6; }
.pain-card .answer-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Outfit", sans-serif; font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; color: var(--teal-ink); margin-bottom: 6px;
}
.pain-card .answer-label svg { width: 16px; height: 16px; }

/* --- Terms glossary (native accordion) --- */
.glossary { max-width: 860px; margin: var(--space-12) auto 0; }
.term {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.term[open] { box-shadow: var(--shadow-card); border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.term summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-family: "Outfit", sans-serif; font-weight: 600; font-size: 1.14rem;
  color: var(--navy);
}
.term summary::-webkit-details-marker { display: none; }
.term summary .t-medallion {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; border-radius: 11px;
  background: var(--teal-tint); color: var(--navy);
  border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
}
.term summary .t-medallion svg { width: 20px; height: 20px; }
.term summary .t-title { flex: 1; }
.term summary .chev {
  width: 22px; height: 22px; flex: none; color: var(--teal-ink);
  transition: transform var(--dur) var(--ease-out);
}
.term[open] summary .chev { transform: rotate(180deg); }
.term__body {
  padding: 0 var(--space-6) var(--space-6) calc(var(--space-6) + 40px + var(--space-4));
  color: var(--text-soft); line-height: 1.65;
}
.term__body strong { color: var(--navy); font-weight: 600; }

/* --- Considerations checklist --- */
.consider__grid {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-10);
}
.consider-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.consider-item .check {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--teal); color: var(--navy);
}
.consider-item .check svg { width: 20px; height: 20px; }
.consider-item h3 { font-size: 1.14rem; margin-bottom: 4px; }
.consider-item p { color: var(--text-soft); font-size: .98rem; line-height: 1.55; }

@media (max-width: 900px) {
  .svc-intro__grid { grid-template-columns: 1fr; }
  .svc-intro__aside { position: static; }
  .pain-grid { grid-template-columns: 1fr; }
  .consider__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}