/* ==========================================================================
   TrustLine Real Estate — Design System
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout
   5.  Buttons
   6.  Header & navigation
   7.  Hero
   8.  Sections & decoration
   9.  Cards & content components
   10. Forms
   11. Footer
   12. Motion, utilities, print
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Brand — drawn from the TrustLine mark */
  --navy-950: #04101f;
  --navy-900: #061428;
  --navy-800: #0a1f3c;
  --navy-700: #0e2a4f;
  --navy-600: #123a6b;
  --blue-600: #17497f;
  --blue-500: #1d5a9e;
  --blue-400: #2e74bd;
  --blue-300: #5697d6;
  --blue-200: #a9cbe9;
  --blue-100: #e3eefa;

  /* Platinum / silver — the metallic half of the logo */
  --steel-700: #4c5a68;
  --steel-600: #64717f;
  --steel-500: #808d9b;
  --steel-400: #9fabb8;
  --steel-300: #c0c9d3;
  --steel-200: #dde3e9;
  --steel-100: #eef1f5;

  /* Neutrals */
  --ink: #0f171f;
  --ink-2: #2c3742;
  --ink-3: #55626f;
  /* 5.57:1 on white, 5.23:1 on --paper. The previous #7b8794 measured 3.66:1,
     below the 4.5:1 WCAG AA minimum for normal-size text — and this token is
     used for field hints, stat labels, and form footnotes, which are all small.
     Do not lighten this without re-measuring both backgrounds. */
  --ink-4: #5f6976;
  --paper: #f6f8fa;
  --paper-2: #fbfcfd;
  --white: #ffffff;

  /* Feedback */
  --success: #16704a;
  --success-bg: #e7f4ee;
  --danger: #a3231f;
  --danger-bg: #fdeceb;
  --warn: #8a6100;
  --warn-bg: #fdf4e2;

  /* Composites */
  --grad-brand: linear-gradient(135deg, #0a1f3c 0%, #17497f 52%, #2e74bd 100%);
  --grad-brand-soft: linear-gradient(135deg, #0e2a4f 0%, #1d5a9e 100%);
  --grad-deep: linear-gradient(165deg, #04101f 0%, #0a1f3c 46%, #123a6b 100%);
  --grad-metal: linear-gradient(180deg, #ffffff 0%, #dfe6ed 38%, #9aa7b6 56%, #f2f5f8 100%);
  --grad-rule: linear-gradient(90deg, transparent, var(--steel-300) 18%, var(--steel-400) 50%, var(--steel-300) 82%, transparent);
  --grad-rule-dark: linear-gradient(90deg, transparent, rgba(169, 203, 233, .5) 20%, rgba(169, 203, 233, .8) 50%, rgba(169, 203, 233, .5) 80%, transparent);

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-eyebrow: .7rem;
  --fs-sm: .875rem;
  --fs-base: 1.0625rem;
  --fs-lead: 1.1875rem;

  /* Spacing */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --container: 1200px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Shape */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(6, 20, 40, .06);
  --shadow-sm: 0 2px 8px rgba(6, 20, 40, .07), 0 1px 2px rgba(6, 20, 40, .05);
  --shadow: 0 10px 30px -12px rgba(6, 20, 40, .18), 0 2px 6px rgba(6, 20, 40, .05);
  --shadow-lg: 0 28px 60px -24px rgba(6, 20, 40, .32), 0 6px 16px rgba(6, 20, 40, .07);
  --shadow-nav: 0 1px 0 rgba(10, 31, 60, .07), 0 8px 28px -18px rgba(6, 20, 40, .35);

  --header-h: 84px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;

  /* Cormorant Garamond ships OLD-STYLE figures by default: "1" is drawn as a
     short serifed stem that reads as a capital I, and "0" as a small oval that
     reads as an O — so a step counter rendered "01" as "OI" and a stat of "1"
     as "I".
     lining-nums switches to cap-height figures. It is an inherited property, so
     declaring it here covers every display-font heading, stat, and ::before
     counter at once; Inter is lining by default, so body copy is unaffected. */
  font-variant-numeric: lining-nums;
}

body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }

/* Baseline size for every icon() SVG.
   ---------------------------------------------------------------------------
   icon() emits a <svg class="icon" viewBox="0 0 24 24"> with NO width or height
   attribute. Without a CSS size the browser falls back to the intrinsic default
   for a replaced element (300x150) and the icon renders enormous — and in a
   flex row it stretches further still.
   Every component below that contains an icon overrides this with its own
   pixel size; this rule is the safety net for any context that does not, so a
   missed selector can never produce a giant glyph again. em-based so it tracks
   the surrounding text. */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

a { color: var(--blue-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-500); }

/* The `font` shorthand resets font-variant-numeric, so re-inherit it explicitly
   or form controls would silently fall back to the font's default figures. */
button, input, select, textarea { font: inherit; color: inherit; font-variant-numeric: inherit; }
button { cursor: pointer; }

ul, ol { padding-left: 1.15rem; }

hr { border: 0; height: 1px; background: var(--steel-200); margin: var(--space-6) 0; }

:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--blue-200); color: var(--navy-900); }

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 1000;
  background: var(--navy-800);
  color: #fff;
  padding: .75rem 1.5rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4, h5 {
  margin: 0 0 .6em;
  color: var(--navy-900);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.012em;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 5.6vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -.02em;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.95rem, 3.6vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -.014em;
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  font-weight: 650;
  letter-spacing: -.008em;
  line-height: 1.32;
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -.004em;
}

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

.lede {
  font-size: clamp(1.0625rem, 1.5vw, var(--fs-lead));
  line-height: 1.62;
  color: var(--ink-3);
  font-weight: 350;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-500);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.metal {
  background: var(--grad-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-muted { color: var(--ink-3); }
.text-small { font-size: var(--fs-sm); }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.9em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.35rem; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--blue-400); }

/* ==========================================================================
   4. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: 1380px; }

/* Constrain a measure inside an existing .container without doubling the
   gutter padding — use instead of nesting one .container inside another. */
.measure { max-width: var(--container-narrow); margin-inline: auto; }
.measure--tight { max-width: 62ch; }

.section { padding-block: clamp(3.5rem, 8vw, var(--space-9)); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--tint { background: var(--paper); }
.section--tint-2 {
  background: linear-gradient(180deg, var(--white) 0%, var(--paper) 42%, var(--paper) 100%);
}

.section--navy {
  background: var(--grad-deep);
  color: rgba(232, 240, 249, .86);
  position: relative;
  overflow: hidden;
}
.section--navy h1, .section--navy h2, .section--navy h3,
.section--navy h4, .section--navy .h2, .section--navy .h3 { color: #fff; }
.section--navy .lede { color: rgba(214, 228, 243, .82); }
.section--navy .eyebrow { color: var(--blue-200); }
.section--navy a:not(.btn) { color: var(--blue-200); }
.section--navy a:not(.btn):hover { color: #fff; }

.section__head { max-width: 720px; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head p:last-child { margin-bottom: 0; }

.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.15fr .85fr; }
  .split--wide-right { grid-template-columns: .85fr 1.15fr; }
  .split--reverse > :first-child { order: 2; }
}

.stack > * + * { margin-top: var(--space-4); }
.stack--lg > * + * { margin-top: var(--space-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.cluster--center { justify-content: center; }

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
  --btn-bg: var(--navy-800);
  --btn-fg: #fff;
  --btn-bd: var(--navy-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.75rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
.btn .icon { width: 17px; height: 17px; }
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--navy-800);
  --btn-bd: var(--navy-800);
  background: var(--grad-brand);
  box-shadow: 0 8px 22px -12px rgba(10, 31, 60, .8);
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Lightest stop is capped at --blue-400: white label text on anything
     lighter drops below 4.5:1, and hover is a state WCAG still applies to. */
  background: linear-gradient(135deg, #0e2a4f 0%, #1d5a9e 55%, #2e74bd 100%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.btn--primary:hover::after { opacity: 1; }
.btn--primary:hover { box-shadow: 0 16px 34px -14px rgba(23, 73, 127, .75); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  --btn-bd: var(--steel-300);
}
.btn--outline:hover {
  --btn-bd: var(--navy-800);
  background: var(--navy-800);
  --btn-fg: #fff;
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--navy-900);
  --btn-bd: #fff;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .5);
}
.btn--light:hover { --btn-bg: var(--blue-100); --btn-bd: var(--blue-100); }

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .38);
}
.btn--ghost-light:hover {
  --btn-bd: #fff;
  background: rgba(255, 255, 255, .1);
}

.btn--lg { padding: 1.1rem 2.25rem; font-size: .9rem; }
.btn--sm { padding: .65rem 1.15rem; font-size: .78rem; }
.btn--block { display: flex; width: 100%; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blue-600);
}
.link-arrow .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }
.section--navy .link-arrow { color: var(--blue-200); }
.section--navy .link-arrow:hover { color: #fff; }

/* ==========================================================================
   6. Header & navigation
   ========================================================================== */

.topbar {
  background: var(--navy-950);
  color: rgba(214, 228, 243, .8);
  font-size: .78rem;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(169, 203, 233, .12);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  flex-wrap: wrap;
}
.topbar__list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: inherit;
  text-decoration: none;
  transition: color .2s var(--ease);
}
.topbar a:hover { color: #fff; }
.topbar .icon { width: 14px; height: 14px; opacity: .7; }
.topbar__note { display: inline-flex; align-items: center; gap: .4rem; }
.topbar__firm { font-weight: 600; }

/* FREC Rule 61J2-10.025(3)(a) requires the brokerage firm name adjacent to the
   point-of-contact information. The top bar carries a phone number and an email
   address on every page, so .topbar__firm must stay visible at EVERY width —
   only the license label and the shield icon collapse on small screens. */
@media (max-width: 860px) {
  .topbar__license, .topbar__shield { display: none; }
  .topbar__inner { justify-content: center; gap: .5rem 1rem; }
  .topbar__list { gap: 1.1rem; }
}
@media (max-width: 520px) {
  .topbar__note { flex-basis: 100%; justify-content: center; }
  .topbar__firm { font-size: .74rem; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--steel-200);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-nav); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  color: var(--navy-900);
  flex-shrink: 0;
}
.brand__logo { height: 50px; width: auto; }
.brand__mark { height: 46px; width: auto; }

/* Text fallback, used only if the logo file is missing or fails to load.
   Both lines are centered on each other — see the note on letter-spacing. */
.brand__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--navy-800);
  /* Letter-spacing is applied after EVERY character, including the last, so
     the box carries an invisible trailing gap and the ink centers left of
     true center. The negative margin removes exactly that trailing gap. */
  margin-right: -.045em;
}
.brand__sub {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin-top: .3rem;
  margin-right: -.34em;   /* same trailing-gap correction, see above */
}
@media (max-width: 420px) {
  .brand__logo { height: 40px; }
  .brand__name { font-size: 1.25rem; }
  .brand__sub { font-size: .5rem; letter-spacing: .26em; margin-right: -.26em; }
}

.nav { display: flex; align-items: center; gap: 1.75rem; }

.nav__list {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .65rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--radius-xs);
  transition: color .2s var(--ease);
}
.nav__link .icon { width: 13px; height: 13px; opacity: .6; transition: transform .25s var(--ease); }
.nav__link::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .3rem;
  height: 1.5px;
  background: var(--grad-brand-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover { color: var(--navy-800); }
.nav__link:hover::after,
.nav__item.is-active > .nav__link::after { transform: scaleX(1); }
.nav__item.is-active > .nav__link { color: var(--navy-800); }

.nav__item--has-children:hover .nav__link .icon,
.nav__item--has-children:focus-within .nav__link .icon { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 250px;
  padding: .5rem;
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav__item--has-children:hover > .nav__dropdown,
.nav__item--has-children:focus-within > .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__dropdown a {
  display: block;
  padding: .6rem .8rem;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--radius-xs);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav__dropdown a:hover { background: var(--paper); color: var(--navy-800); }

.nav__cta { display: inline-flex; }

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--navy-800);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.nav__toggle:hover { border-color: var(--steel-400); }
.nav__toggle .icon { width: 22px; height: 22px; }
.nav__toggle .icon--close { display: none; }
.nav__toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav__toggle[aria-expanded="true"] .icon--close { display: block; }

@media (max-width: 1120px) {
  .nav__cta { display: none; }
}

@media (max-width: 1020px) {
  :root { --header-h: 72px; }
  .nav__toggle { display: inline-flex; }
  .nav__list { display: none; }

  .nav__drawer {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 480;
    background: #fff;
    overflow-y: auto;
    padding: 1.5rem var(--gutter) 3rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav__drawer.is-open { opacity: 1; visibility: visible; transform: none; }
}

@media (min-width: 1021px) {
  .nav__drawer { display: none; }
}

.drawer__list { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.drawer__item { border-bottom: 1px solid var(--steel-200); }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem .25rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--navy-900);
  text-decoration: none;
}
/* Active state carries weight and a rule as well as color, so it is not
   signaled by color alone (WCAG 2.1 SC 1.4.1). aria-current carries it for
   assistive technology. */
.drawer__item.is-active > .drawer__link {
  color: var(--blue-500);
  font-weight: 700;
  box-shadow: inset 3px 0 0 0 var(--blue-500);
  padding-left: .8rem;
}
/* Decorative affordance only — kept muted so the label carries the active state. */
.drawer__link .icon { width: 17px; height: 17px; color: var(--steel-400); }
.drawer__sub { list-style: none; margin: 0 0 .75rem; padding: 0 0 0 1rem; }
.drawer__sub a {
  display: block;
  padding: .55rem .25rem;
  font-size: .95rem;
  color: var(--ink-3);
  text-decoration: none;
}
.drawer__sub a:hover { color: var(--blue-500); }
.drawer__contact {
  display: grid;
  gap: .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--steel-200);
  margin-top: 1.5rem;
}
.drawer__firm { margin: 0; font-size: .9rem; font-weight: 650; color: var(--navy-900); }
.drawer__contact a {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .95rem;
  color: var(--ink-2);
  text-decoration: none;
}
.drawer__contact .icon { width: 18px; height: 18px; color: var(--blue-500); }

/* ==========================================================================
   7. Hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--grad-deep);
  color: rgba(226, 236, 247, .88);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(950px 620px at 12% 8%, rgba(46, 116, 189, .38), transparent 62%),
    radial-gradient(760px 560px at 88% 92%, rgba(86, 151, 214, .22), transparent 66%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/pattern-grid.svg");
  background-size: 64px 64px;
  opacity: .5;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
}

/* Photographic hero -------------------------------------------------------
   The photo sits at the very back; .hero::before (the radial brand bloom) and
   this scrim sit over it. The scrim is deliberately heavy: the headline is
   white and the photograph is arbitrary, so legibility cannot depend on the
   image being dark. Measured against the brightest pixel of the supplied
   banner, the h1 holds well above the 4.5:1 minimum. */
.hero--photo .hero__photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.hero--photo::after {
  background-image: none;
  background-color: transparent;
}
.hero--photo .hero__inner { position: relative; }
.hero--photo .hero__inner::before {
  content: "";
  position: absolute;
  inset: -3rem calc(var(--gutter) * -1) -3rem calc(var(--gutter) * -1);
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(4, 16, 31, .92) 0%,
    rgba(4, 16, 31, .86) 55%,
    rgba(4, 16, 31, .62) 100%);
  pointer-events: none;
}
@media (max-width: 760px) {
  /* Narrow screens have no room for a horizontal falloff — darken uniformly. */
  .hero--photo .hero__inner::before {
    background: rgba(4, 16, 31, .88);
  }
}

.hero__skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: -1;
  width: 100%;
  height: auto;
  opacity: .5;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  padding-block: clamp(4.5rem, 12vw, 9rem);
  max-width: 780px;
}
.hero--home .hero__inner { padding-block: clamp(5.5rem, 14vw, 11rem); }

.hero__title { color: #fff; margin-bottom: .5em; }
.hero__title em {
  font-style: italic;
  background: linear-gradient(180deg, #ffffff 0%, #cfe0f2 48%, #8fb6dc 78%, #e9f2fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede {
  font-size: clamp(1.0625rem, 1.7vw, 1.3rem);
  line-height: 1.6;
  color: rgba(214, 230, 246, .85);
  font-weight: 300;
  max-width: 60ch;
}
.hero__eyebrow { color: var(--blue-200); }
.hero__actions { margin-top: 2.25rem; }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(169, 203, 233, .2);
}
.hero__meta-item { display: flex; align-items: center; gap: .7rem; font-size: .875rem; }
.hero__meta-item .icon { width: 20px; height: 20px; color: var(--blue-200); }

/* Page hero (interior pages) */
.hero--page .hero__inner { padding-block: clamp(3.5rem, 8vw, 6rem); max-width: 760px; }
.hero--page .hero__title { font-size: clamp(2.15rem, 4.6vw, 3.5rem); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(184, 208, 232, .82);
}
.breadcrumb a { color: rgba(207, 226, 245, .92); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb .icon { width: 12px; height: 12px; opacity: .5; }
.breadcrumb [aria-current="page"] { color: #fff; }

/* ==========================================================================
   8. Sections & decoration
   ========================================================================== */

.rule-metal {
  height: 1px;
  border: 0;
  background: var(--grad-rule);
  margin: 0;
}
.section--navy .rule-metal { background: var(--grad-rule-dark); }

.pattern-fade { position: relative; overflow: hidden; }
.pattern-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/pattern-grid-light.svg");
  background-size: 64px 64px;
  opacity: .6;
  pointer-events: none;
  mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
}
.pattern-fade > * { position: relative; }

/* Decorative framed media panel — stands in for photography until real
   images are dropped into /assets/img/. */
.media-panel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  background: var(--grad-brand);
  isolation: isolate;
}
.media-panel img { width: 100%; height: 100%; object-fit: cover; }
.media-panel--tall { aspect-ratio: 3 / 4; }
.media-panel--wide { aspect-ratio: 16 / 10; }
.media-panel__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.media-panel__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.75rem 1.5rem;
  /* Reaches meaningful opacity before the caption's first line rather than
     ramping from transparent: the <strong> title sits at the TOP of this block,
     and over a bright photograph the old ramp left it barely readable. */
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(4, 16, 31, .55) 30%,
    rgba(4, 16, 31, .92) 100%);
  color: #fff;
  font-size: .875rem;
  letter-spacing: .04em;
}
.media-panel__caption strong { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: .15rem; }

.media-frame {
  position: relative;
  padding: 0;
}
.media-frame::before {
  content: "";
  position: absolute;
  inset: -18px -18px 18px 18px;
  border: 1px solid var(--steel-300);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.section--navy .media-frame::before { border-color: rgba(169, 203, 233, .28); }

/* ==========================================================================
   9. Cards & content components
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.15rem);
  background: #fff;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--steel-300); }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--ink-3); font-size: .96rem; }
.card p:last-child { margin-bottom: 0; }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.35rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, var(--blue-100), #fff);
  border: 1px solid var(--blue-100);
  color: var(--blue-500);
}
.card__icon .icon { width: 24px; height: 24px; }

.card--accent::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: var(--grad-brand);
  border-radius: var(--radius) var(--radius) 0 0;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.card--accent:hover::before { opacity: 1; }

.card--dark {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(169, 203, 233, .18);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.card--dark:hover { border-color: rgba(169, 203, 233, .4); background: rgba(255, 255, 255, .075); }
.card--dark h3 { color: #fff; }
.card--dark p { color: rgba(206, 223, 240, .82); }
.card--dark .card__icon {
  background: rgba(86, 151, 214, .14);
  border-color: rgba(169, 203, 233, .25);
  color: var(--blue-200);
}

.card__link {
  margin-top: auto;
  padding-top: 1.25rem;
}

/* Full-card clickable overlay */
.card--linked .card__stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Numbered process steps */
.steps { counter-reset: step; display: grid; gap: clamp(1.25rem, 2.4vw, 1.75rem); }
.steps--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.step {
  position: relative;
  counter-increment: step;
  padding: 1.75rem 1.5rem 1.5rem;
  background: #fff;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: .9rem;
  font-family: var(--font-display);
  font-size: 2.35rem;
  font-weight: 600;
  line-height: 1;
  background: var(--grad-brand-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step h3 { margin-bottom: .45rem; }
.step p { color: var(--ink-3); font-size: .95rem; margin-bottom: 0; }
.section--navy .step { background: rgba(255, 255, 255, .045); border-color: rgba(169, 203, 233, .18); }
.section--navy .step::before {
  background: linear-gradient(135deg, #a9cbe9, #5697d6);
  -webkit-background-clip: text;
  background-clip: text;
}
.section--navy .step p { color: rgba(206, 223, 240, .82); }

/* Ordered list with rules — used for "what to expect" style lists */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: .98rem;
  color: var(--ink-2);
}
.check-list .icon {
  width: 20px;
  height: 20px;
  margin-top: .2rem;
  color: var(--blue-500);
}
.section--navy .check-list li { color: rgba(214, 230, 246, .88); }
.section--navy .check-list .icon { color: var(--blue-200); }
.check-list--tight li { font-size: .92rem; }

/* Statistics */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.stat { text-align: center; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--navy-800);
  letter-spacing: -.02em;
}
.section--navy .stat__num {
  background: var(--grad-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label {
  display: block;
  margin-top: .75rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.section--navy .stat__label { color: rgba(169, 203, 233, .78); }

/* Pull quote / testimonial */
.quote {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.quote__mark { width: 32px; height: 32px; color: var(--blue-200); margin-bottom: 1rem; }
.quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  line-height: 1.5;
  color: var(--navy-900);
  font-weight: 400;
  margin-bottom: 1.35rem;
}
.quote__meta { margin-top: auto; display: flex; align-items: center; gap: .85rem; }
.quote__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grad-brand-soft);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.quote__name { font-size: .92rem; font-weight: 650; color: var(--navy-900); line-height: 1.3; }
.quote__role { font-size: .8rem; color: var(--ink-4); }
.quote__stars { display: flex; gap: .15rem; margin-bottom: .9rem; color: #c8952b; }
.quote__stars .icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* Area cards */
.area-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 1.6rem;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-brand);
  color: #fff;
  text-decoration: none;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.area-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); color: #fff; }
/* Scrim over the photograph. The bottom stop is heavy on purpose: the card text
   sits on an arbitrary photograph, so legibility cannot depend on that image
   being dark. At .88 the white heading holds ~13:1 and the meta line ~10:1 even
   over a pure-white photo. */
.area-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(86, 151, 214, .28), transparent 60%),
    linear-gradient(180deg, rgba(4, 16, 31, .10) 0%, rgba(4, 16, 31, .55) 55%, rgba(4, 16, 31, .88) 100%);
  transition: opacity .4s var(--ease);
}
/* Full opacity — the scrim above does the darkening, so photographs stay
   themselves instead of being washed out. */
.area-card__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.area-card:hover .area-card__art { transform: scale(1.04); }
.area-card__body { margin-top: auto; }
.area-card__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
  margin: 0 0 .3rem;
  line-height: 1.15;
}
.area-card__meta { font-size: .82rem; color: rgba(222, 235, 249, .95); letter-spacing: .03em; }
.area-card__tag {
  align-self: flex-start;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 100px;
  /* The tag sits at the top of the card where the scrim is at its weakest, and
     now over a photograph, so it carries its own. At .62 the white label holds
     5.4:1 even against a pure-white image; .45 only reached 3.1:1. */
  background: rgba(4, 16, 31, .62);
  color: #fff;
}

/* Accordion / FAQ */
.accordion { border-top: 1px solid var(--steel-200); }
.accordion__item { border-bottom: 1px solid var(--steel-200); }
.accordion__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.4rem .25rem;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy-900);
  line-height: 1.4;
  transition: color .2s var(--ease);
}
.accordion__trigger:hover { color: var(--blue-500); }
.accordion__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: .1rem;
  color: var(--blue-500);
  transition: transform .3s var(--ease);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease);
}
/* An author `display` declaration beats the UA stylesheet's [hidden] rule,
   so the hidden attribute has to be re-honored explicitly. */
.accordion__panel[hidden] { display: none; }
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel-inner { overflow: hidden; }
.accordion__panel-inner > div { padding: 0 3rem 1.5rem .25rem; color: var(--ink-3); font-size: .98rem; }
.accordion__panel-inner p:last-child { margin-bottom: 0; }
.section--navy .accordion,
.section--navy .accordion__item { border-color: rgba(169, 203, 233, .2); }
.section--navy .accordion__trigger { color: #fff; }
.section--navy .accordion__panel-inner > div { color: rgba(206, 223, 240, .82); }

/* CTA band */
/* The CTA band carries body copy on a colored field, so its gradient is the
   darker --grad-brand-soft and the light bloom is kept low. The full-strength
   --grad-brand tops out at --blue-400, which puts 17px body text under 4.5:1. */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-brand-soft);
  color: #fff;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(700px 400px at 85% 15%, rgba(255, 255, 255, .1), transparent 65%),
    url("../img/pattern-grid.svg");
  background-size: auto, 56px 56px;
  opacity: .85;
}
.cta-band__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1.4fr auto; gap: 3rem; }
}
.cta-band h2 { color: #fff; margin-bottom: .4rem; }
.cta-band p { color: #eaf2fc; margin-bottom: 0; max-width: 56ch; }

/* Firm-name line required adjacent to point-of-contact information */
.contact-firm {
  margin-bottom: 1.25rem;
  color: var(--ink-3);
  line-height: 1.7;
}

/* Contact method tiles */
.contact-methods { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.contact-method {
  display: flex;
  gap: 1rem;
  padding: 1.4rem;
  background: #fff;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-method:hover { border-color: var(--blue-300); transform: translateY(-2px); box-shadow: var(--shadow-sm); color: inherit; }
.contact-method__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--blue-100);
  color: var(--blue-600);
}
.contact-method__icon .icon { width: 21px; height: 21px; }
.contact-method__label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: .2rem;
}
.contact-method__value { display: block; font-size: 1.02rem; font-weight: 600; color: var(--navy-900); line-height: 1.35; word-break: break-word; }
.contact-method__note { display: block; font-size: .82rem; color: var(--ink-4); margin-top: .15rem; }

/* Person / broker profile */
.person {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 860px) { .person { grid-template-columns: 330px 1fr; } }

.person__portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--grad-brand);
  box-shadow: var(--shadow-lg);
}
.person__portrait img { width: 100%; height: 100%; object-fit: cover; }
.person__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .5rem .85rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-600);
  background: var(--blue-100);
  border-radius: 100px;
}
.person__badge .icon { width: 15px; height: 15px; }
.person__name { margin-bottom: .2rem; }
.person__role {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 1.5rem;
}

/* MLS / IDX required disclaimers — one block per participating MLS */
.mls-disclaimers {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--steel-200);
}
.mls-disclaimer {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.mls-disclaimer__logo { width: 56px; height: auto; flex-shrink: 0; }
.mls-disclaimer__body { min-width: 0; }
.mls-disclaimer__body p { font-size: .8rem; line-height: 1.6; color: var(--ink-4); margin-bottom: .35rem; }
.mls-disclaimer__stamp { font-size: .76rem; color: var(--ink-4); font-style: italic; }

/* IDX placeholder */
.idx-slot {
  position: relative;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff, var(--paper));
  padding: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
}
.idx-slot__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.idx-slot__icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-600);
}
.idx-slot__icon .icon { width: 30px; height: 30px; }
.idx-embed { width: 100%; }
.idx-embed iframe { width: 100%; border: 0; min-height: 720px; }

/* Search bar (visual, forwards to IDX/contact) */
.search-bar {
  display: grid;
  gap: .75rem;
  padding: 1rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}
@media (min-width: 720px) {
  .search-bar { grid-template-columns: 1fr auto auto; align-items: center; }
}
.search-bar input, .search-bar select {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .95);
  color: var(--ink);
  font-size: .95rem;
}
.search-bar input::placeholder { color: var(--ink-4); }

/* Comparison / two-column value table */
.compare { width: 100%; border-collapse: collapse; font-size: .95rem; }
.compare th, .compare td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--steel-200); vertical-align: top; }
.compare thead th {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom-color: var(--steel-300);
}
.compare tbody th { font-weight: 600; color: var(--navy-900); }
.compare .is-yes { color: var(--success); font-weight: 600; }
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Badge / pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .8rem;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--blue-100);
  color: var(--blue-600);
}
.pill .icon { width: 14px; height: 14px; }
.pill--light { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.pill--outline { background: transparent; border: 1px solid var(--steel-300); color: var(--ink-3); }

/* Feature list with left rule */
.feature-list { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.feature {
  position: relative;
  padding-left: 3.5rem;
}
.feature__icon {
  position: absolute;
  left: 0;
  top: .1rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--blue-100);
  color: var(--blue-600);
}
.feature__icon .icon { width: 20px; height: 20px; }
.feature h3 { margin-bottom: .35rem; }
.feature p { color: var(--ink-3); font-size: .96rem; margin-bottom: 0; }
.section--navy .feature__icon { background: rgba(86, 151, 214, .16); color: var(--blue-200); }
.section--navy .feature p { color: rgba(206, 223, 240, .82); }

/* Anchor-linked mini nav for long pages */
.jumpnav {
  position: sticky;
  top: var(--header-h);
  z-index: 300;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--steel-200);
}
/* Wraps rather than scrolls. The longest of these navs (sell and join-our-team,
   nine items) needs ~1141px while the container caps at 1104px, so it
   overflowed at EVERY width — including desktop — and the scrollbar was hidden,
   which left the last item silently unreachable. Wrapping guarantees every item
   is visible, and keeps working if a section is ever added. */
.jumpnav__list {
  display: flex;
  flex-wrap: wrap;
  /* Tightened from .35rem so the nine-item navs clear 1104px of content width
     and stay on one row at desktop. Wrapping remains the safety net below that
     and if a section is ever added. */
  gap: 0 .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Narrow screens: nine items would wrap to four rows and swallow the viewport,
   so scroll there instead — but with a visible fade so it is discoverable, and
   end padding so the last item clears the edge. */
@media (max-width: 720px) {
  .jumpnav { position: sticky; }
  .jumpnav__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-right: 2.25rem;
  }
  .jumpnav__list::-webkit-scrollbar { display: none; }
  .jumpnav li { scroll-snap-align: start; }
  .jumpnav::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.75rem;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96) 65%);
  }
}
.jumpnav a {
  display: block;
  padding: 1rem .8rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.jumpnav a:hover, .jumpnav a.is-active { color: var(--navy-800); border-bottom-color: var(--blue-400); }

/* ==========================================================================
   10. Forms
   ========================================================================== */

.form-panel {
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  background: #fff;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.form-panel__head { margin-bottom: 1.75rem; }
.form-panel__head h2 { font-size: clamp(1.55rem, 2.6vw, 2rem); margin-bottom: .4rem; }
.form-panel__head p { color: var(--ink-3); font-size: .96rem; margin-bottom: 0; }

.form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 620px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: .45rem; }
.field__label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field__label .req { color: var(--danger); margin-left: .15rem; }
.field__hint { font-size: .82rem; color: var(--ink-4); }

.input, .select, .textarea {
  width: 100%;
  padding: .85rem 1rem;
  /* --steel-500, not --steel-300: WCAG 2.1 SC 1.4.11 requires 3:1 for the
     visual boundary of a form control. Measured on both backgrounds a field can
     sit on: #c0c9d3 was 1.68:1 / 1.58:1 and #9fabb8 only reached 2.34:1;
     #808d9b gives 3.39:1 on white and 3.18:1 on --paper. */
  border: 1px solid var(--steel-500);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--steel-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(46, 116, 189, .16);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(163, 35, 31, .1);
}
.textarea { min-height: 150px; resize: vertical; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355626f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 18px;
  padding-right: 2.75rem;
}

.field__error {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: .82rem;
  font-weight: 500;
  color: var(--danger);
}

.checkgrid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.choice {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .8rem .95rem;
  border: 1px solid var(--steel-300);
  border-radius: var(--radius-sm);
  font-size: .92rem;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.choice:hover { border-color: var(--blue-300); background: var(--paper-2); }
.choice input {
  margin: .2rem 0 0;
  width: 17px;
  height: 17px;
  accent-color: var(--blue-500);
  flex-shrink: 0;
}
.choice:has(input:checked) { border-color: var(--blue-400); background: var(--blue-100); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-3);
}
.consent input { margin: .25rem 0 0; width: 17px; height: 17px; accent-color: var(--blue-500); flex-shrink: 0; }

/* Honeypot — visually and programmatically hidden from humans */
.tl-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: .95rem;
  margin-bottom: 1.75rem;
}
.alert .icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: .12rem; }
.alert p { margin: 0; }
.alert p + p { margin-top: .4rem; }
.alert strong { display: block; margin-bottom: .15rem; }
.alert--success { background: var(--success-bg); border-color: rgba(22, 112, 74, .3); color: #14503a; }
.alert--error { background: var(--danger-bg); border-color: rgba(163, 35, 31, .28); color: #7d1c19; }
.alert--info { background: var(--blue-100); border-color: rgba(46, 116, 189, .28); color: var(--blue-600); }
.alert--warn { background: var(--warn-bg); border-color: rgba(138, 97, 0, .3); color: #6b4c00; }

.form-footnote {
  font-size: .8rem;
  color: var(--ink-4);
  line-height: 1.6;
  margin-top: 1.25rem;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.site-footer {
  background: var(--navy-950);
  color: rgba(190, 209, 228, .78);
  font-size: .92rem;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/pattern-grid.svg");
  background-size: 72px 72px;
  opacity: .35;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 60%);
}
.site-footer > * { position: relative; }

.footer__main {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .footer__main { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 1060px) { .footer__main { grid-template-columns: 1.7fr 1fr 1fr 1.3fr; } }

.footer__nav { min-width: 0; }
.footer__brand { max-width: 380px; }
.footer__logo { height: 111px; width: auto; margin-bottom: 1.5rem; }
.footer__brand p { font-size: .92rem; line-height: 1.65; color: rgba(180, 201, 222, .75); }

.footer__title {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(169, 203, 233, .95);
  margin: 0 0 1.25rem;
}

.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.footer__list a {
  color: rgba(190, 209, 228, .8);
  text-decoration: none;
  font-size: .92rem;
  transition: color .2s var(--ease);
}
.footer__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.footer__firm {
  margin: 0 0 .9rem;
  font-size: .88rem;
  font-weight: 600;
  color: rgba(214, 230, 246, .92);
}
.footer__contact { display: grid; gap: 1rem; }
.footer__contact-item { display: flex; gap: .75rem; align-items: flex-start; }
.footer__contact-item .icon { width: 17px; height: 17px; color: var(--blue-300); margin-top: .22rem; flex-shrink: 0; }
.footer__contact-item a { color: rgba(214, 230, 246, .92); text-decoration: none; }
.footer__contact-item a:hover { color: #fff; text-decoration: underline; }
.footer__contact-label {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(150, 176, 202, .7);
  margin-bottom: .1rem;
}

.social {
  display: flex;
  gap: .6rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(169, 203, 233, .25);
  border-radius: var(--radius-sm);
  color: rgba(190, 209, 228, .85);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.social a:hover { background: var(--blue-500); border-color: var(--blue-500); color: #fff; transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; }

.footer__legal {
  border-top: 1px solid rgba(169, 203, 233, .15);
  padding-block: 1.75rem 2.25rem;
  font-size: .8rem;
  color: rgba(160, 184, 208, .7);
  line-height: 1.7;
}
.footer__legal-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__legal-links a { color: rgba(180, 201, 222, .8); text-decoration: none; }
.footer__legal-links a:hover { color: #fff; text-decoration: underline; }
.footer__disclosure { max-width: 78ch; }
.footer__disclosure + .footer__disclosure { margin-top: .75rem; }

.footer__marks {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.footer__marks svg, .footer__marks img { width: 34px; height: 34px; color: rgba(190, 209, 228, .55); }
/* The official mark is supplied as solid white artwork; the hand-drawn EHO glyph
   beside it is dimmed to .55, so this is toned to sit with it rather than
   shouting. Opacity only — the artwork itself is never recolored. */
.footer__mark-realtor { object-fit: contain; opacity: .72; }
/* Word-mark fallback until the official REALTOR(R) artwork is dropped in. */
.footer__mark-text {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(190, 209, 228, .7);
  border: 1px solid rgba(169, 203, 233, .3);
  border-radius: var(--radius-xs);
  padding: .3rem .5rem;
  white-space: nowrap;
}

/* ==========================================================================
   12. Motion, utilities, print
   ========================================================================== */

/* Reveal-on-scroll is OPT-IN, applied by site.js only after it has actually
   run (it sets .js-reveal on <html>). Previously .reveal hid content by
   default: if site.js 404'd, errored, or was blocked, every content block on
   the site stayed permanently invisible — and the inline <head> script had
   already removed .no-js, so the no-JS fallback never fired either. Content
   must never depend on a script to become visible. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .4s; }

/* --- No-JavaScript fallbacks -------------------------------------------
   The inline script in <head> strips .no-js before first paint, so these only
   apply when scripting is genuinely unavailable. Everything must still be
   readable and navigable. */
.no-js .reveal { opacity: 1; transform: none; }
.no-js .to-top { display: none; }
.no-js .nav__toggle { display: none; }
.no-js .accordion__panel,
.no-js .accordion__panel[hidden] { display: grid; grid-template-rows: 1fr; }
.no-js .accordion__icon { display: none; }
.no-js .accordion__trigger { cursor: default; }

@media (max-width: 1020px) {
  .no-js .nav__drawer {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    inset: auto;
    padding-top: 0;
    border-bottom: 1px solid var(--steel-200);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }

.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 400;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--steel-300);
  border-radius: 50%;
  background: #fff;
  color: var(--navy-800);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top .icon { width: 20px; height: 20px; transform: rotate(-90deg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .topbar, .site-header, .nav__drawer, .to-top, .cta-band, .jumpnav { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .hero, .section--navy { background: none !important; color: #000 !important; }
  .hero__title, .section--navy h2, .section--navy h3 { color: #000 !important; }
  .site-footer { background: none; color: #000; border-top: 1px solid #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .card, .step, .quote { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
}