/* ── Marketing site stylesheet — Modern Canadian redesign (PR #38) ──────
   Replaces the generic-coral aesthetic shipped in PRs #31–#36. Goal:
   confident, sophisticated, professional. Reads like Stripe + Linear +
   restrained editorial real-estate, not "Webflow template 2022."

   Palette: warm-white background, deep navy/charcoal ink, coral kept as
   a single sparing accent (not a brand-everywhere color). Type scale
   widens dramatically — headlines are big and confident, body breathes.
   Geometry tightens — smaller radii, sharper edges, less shadow.

   Brand update (board session, July 2026): strict two-colour theme —
   warm white + deep navy #0F172A. The CRM (/css/app.css) keeps its coral;
   the internal tool and the public site are deliberately separate brands. */

:root {
  /* Ink (text + sharp ui) — deep navy charcoal, more "real estate" than slate */
  --ink:   #0F172A;
  --ink-2: #334155;
  --ink-3: #64748B;
  --ink-4: #94A3B8;

  /* Surfaces — warm white, not blue-white. Slight cream undertone. */
  --bg:   #FAFAF7;
  --bg-2: #F2F0E9;
  --bg-3: #E8E5DB;

  /* Borders + dividers — barely visible navy at low alpha */
  --border:        rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.16);
  --border-ink:    rgba(15, 23, 42, 0.92);

  /* Brand — deep navy. Strict two-colour theme (warm white + navy), board
     brand session July 2026. The CRM keeps its coral (css/app.css) — the
     internal tool and the public site are deliberately separate brands.
     --brand-light is the "accent ON dark surfaces" role and must stay
     light (warm-white tint), or hero/footer accents vanish into navy. */
  --brand:       #0F172A;
  --brand-dark:  #1E293B;
  --brand-light: #E8E5DB;
  --brand-soft:  rgba(15, 23, 42, 0.06);

  /* Functional red — form errors ONLY, never decorative (board ruling) */
  --error:       #B42318;

  /* Geometry — tighter, more confident. 4–8px radii max, not 12–20px. */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Shadows — almost imperceptible. We rely on borders + spacing for separation. */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-3: 0 24px 48px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01'; /* Inter stylistic sets — single-storey a, more open digits, etc. — gracefully ignored if Inter isn't available */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 120ms;
}
a:hover { text-decoration-color: var(--brand); }
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
/* On dark sections a navy focus ring is invisible — use white there */
.hero :focus-visible, .cta-band :focus-visible {
  outline-color: #ffffff;
}

/* ── Layout ──────────────────────────────────────────────────────── */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 520px) { .wrap { padding: 0 18px; } }
.row { display: grid; gap: 32px; }
@media (min-width: 720px) { .row.cols-2 { grid-template-columns: 1fr 1fr; gap: 48px; } }
@media (min-width: 720px) { .row.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* ── Typography utilities ────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.eyebrow.accent { color: var(--brand-dark); }
.eyebrow-divider {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 12px;
  opacity: 0.6;
}

/* Anchor links land below the sticky nav, not behind it. */
html { scroll-padding-top: 110px; }

/* ── Top utility bar ──────────────────────────────────────────────────
   Thin secondary nav above the main nav — affiliation on the left,
   secondary links + brokerage info on the right. Inspired by CREA.ca's
   tabbed top bar. Sits ABOVE the sticky main nav so it scrolls away
   while the main nav stays pinned. */
.utility-bar {
  background: var(--ink);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 9px 24px;
  gap: 16px;
}
.utility-affiliation {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brand-light);
  font-size: 11px;
}
.utility-links {
  display: flex;
  align-items: center;
  gap: 22px;
}
.utility-links a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.1em;
  transition: color 120ms;
}
.utility-links a:hover { color: #fff; }
.utility-links .utility-login {
  color: var(--brand-light);
  font-weight: 700;
}
@media (max-width: 720px) {
  .utility-inner { padding: 8px 16px; }
  .utility-affiliation { display: none; }
  .utility-links { gap: 14px; width: 100%; justify-content: flex-end; }
}

/* ── Top nav ─────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 250, 247, 0.95);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  max-width: 1280px; margin: 0 auto;
  gap: 24px;
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 15px;
  color: var(--ink); text-decoration: none;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.nav-brand:hover { text-decoration: none; }
.nav-avatar {
  width: 32px; height: 32px;
  border-radius: var(--r-xs);
  background: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  color: #ffffff; font-weight: 700; font-size: 12px;
  letter-spacing: 0.02em;
}

/* ── MEGA-MENU ────────────────────────────────────────────────────────
   CREA-inspired dropdown navigation. Each top-level item is a button
   that reveals a full-width panel below the nav containing categorised
   sub-links and an optional featured promotional card on the right.

   Interaction: opens on hover for mouse, on click for touch (via JS).
   Closes when pointer leaves the menu OR when focus moves elsewhere. */
.mega-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.mega-item {
  position: relative;
}
.mega-trigger,
.mega-direct {
  background: none;
  border: 0;
  font-family: inherit;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 120ms, background 120ms;
}
.mega-trigger::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms;
  margin-left: 4px;
  opacity: 0.7;
}
.mega-trigger:hover,
.mega-direct:hover,
.mega-item:focus-within .mega-trigger,
.mega-item.is-open .mega-trigger {
  color: var(--ink);
  background: var(--bg-2);
}
.mega-item.is-open .mega-trigger::after {
  transform: rotate(-135deg) translate(-2px, 2px);
}
.mega-item.is-open .mega-trigger {
  color: var(--brand-dark);
}

.mega-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: max-content;
  min-width: 560px;
  max-width: 760px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.mega-item:hover .mega-panel,
.mega-item:focus-within .mega-panel,
.mega-item.is-open .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}
/* Invisible bridge so the panel doesn't close when moving from trigger to panel */
.mega-item:hover .mega-trigger::before,
.mega-item:focus-within .mega-trigger::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 16px;
}

.mega-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 220px;
  gap: 28px;
}
.mega-col-title {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 12px;
}
.mega-col a {
  display: block;
  padding: 7px 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 120ms;
  line-height: 1.4;
}
.mega-col a:hover {
  color: var(--brand-dark);
}

.mega-feature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #ffffff !important;
  border-radius: var(--r-md);
  padding: 20px;
  text-decoration: none;
  min-height: 160px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.mega-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
  text-decoration: none;
}
.mega-feature-eyebrow {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}
.mega-feature-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-top: 8px;
}
.mega-feature-cta {
  font-size: 13px;
  font-weight: 700;
  margin-top: 14px;
  letter-spacing: 0.02em;
}

.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #ffffff !important;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  font-weight: 700; font-size: 13.5px;
  text-decoration: none;
  transition: background 120ms, transform 80ms;
  letter-spacing: -0.005em;
  border: 1px solid var(--brand);
}
.nav-cta:hover { background: var(--brand-dark); border-color: var(--brand-dark); text-decoration: none; }

@media (max-width: 900px) {
  .mega-menu { display: none; }
  .nav-inner { padding: 14px 18px; gap: 12px; }
}

/* ── Hero — cinematic dark variant (PR #48) ──────────────────────────
   Inspired by CREA.ca: full-bleed dark hero, large white headline,
   CTAs styled for dark background. Currently uses a deep-navy gradient;
   TODO: Maxwell uploads a Newfoundland photo to /site/img/hero.jpg and
   I swap the `background` line to `url(...) center/cover`. */
.hero {
  position: relative;
  background-color: #0A1220; /* fallback colour beneath the carousel */
  color: #ffffff;
  padding: 120px 0 96px;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ── HERO CAROUSEL — JS-driven, random order, Ken Burns zoom ──────────
   Images are stacked with absolute positioning. The JS at the bottom of
   the page injects them, shuffles their order randomly on each load,
   then crossfades through them every 8 seconds. The .active class is
   added to whichever image should currently be visible.
   The Ken Burns slow zoom is a CSS animation triggered on .active. */
/* ── HERO VIDEO BACKGROUND ────────────────────────────────────────────
   Full-bleed video taking up the entire hero. The poster image renders
   immediately (cached / preloaded) and the video begins playing as
   soon as enough data has buffered. Mobile devices that refuse autoplay
   gracefully degrade to the poster image, which still looks great. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-video-fallback {
  /* Only visible if <video> can't be rendered (very old browsers).
     Layered behind <video> via DOM order so the video always wins
     when both render successfully. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Legacy carousel CSS — kept so any other page that still references
   the carousel class doesn't break. The homepage now uses .hero-media
   above instead. Safe to remove if no other page uses .hero-carousel. */
.hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1500ms ease;
  will-change: opacity, transform;
}
.hero-carousel img.active {
  opacity: 1;
  animation: kenBurns 10s ease-out forwards;
}
@keyframes kenBurns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.08); }
}

/* Respect reduced-motion preference — pause the hero video for users
   who've requested reduced motion. The browser still shows the first
   frame so the hero doesn't go black. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-carousel img.active { animation: none; transform: none; }
}

/* ── HERO TEXT — staggered fade-up animation ──────────────────────────
   Each element with .anim-fade-up animates in from 16px below with a
   delay set via inline --anim-delay style. The H1 spans display as
   block so they animate as separate lines. */
.anim-fade-up {
  opacity: 0;
  transform: translateY(16px);
  animation: animFadeUp 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--anim-delay, 0s);
}
.hero h1 .anim-fade-up { display: block; }

@keyframes animFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Dark gradient overlay on top of the carousel — keeps the white H1 and
   CTAs readable no matter which photo is showing. Warm radial tint at the
   bottom-left ties it to the brand palette. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(10,18,32,0.70) 0%, rgba(15,26,42,0.58) 50%, rgba(10,18,32,0.78) 100%);
  pointer-events: none;
}

.hero .wrap { position: relative; z-index: 2; }
.hero .eyebrow {
  color: var(--brand-light);
  margin-bottom: 22px;
}
.hero .eyebrow-divider {
  background: var(--brand-light);
  opacity: 0.7;
}
.hero h1 {
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin-bottom: 28px;
  max-width: 16ch;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--brand-light); }
.hero p.lead {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  max-width: 58ch;
  margin-bottom: 44px;
  text-wrap: pretty;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero buttons restyled for dark background — primary = white (navy-on-navy
   would be invisible over the dusk video; inverted per board brand session) */
.hero .btn-primary {
  background: #ffffff;
  color: var(--ink);
  border-color: #ffffff;
}
.hero .btn-primary:hover {
  background: var(--bg-2);
  border-color: var(--bg-2);
  color: var(--ink);
}
.hero .btn-outline {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,0.45);
}
.hero .btn-outline:hover {
  background: #ffffff;
  color: var(--ink);
  border-color: #ffffff;
}

@media (max-width: 720px) {
  .hero { padding: 80px 0 72px; min-height: 460px; }
  .hero h1 { max-width: none; }
}
/* PR #45 + #48: very small phones — keep the hero headline confident but stop it
   exploding into 5+ lines on 360px-wide screens (older iPhones in portrait). */
@media (max-width: 420px) {
  .hero { padding: 64px 0 56px; min-height: 420px; }
  .hero h1 { font-size: clamp(32px, 9.5vw, 42px); letter-spacing: -0.025em; line-height: 1.08; }
  .hero p.lead { font-size: 16px; line-height: 1.55; }
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms, transform 80ms;
  text-decoration: none;
  letter-spacing: -0.005em;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline {
  background: transparent; color: var(--ink);
  border-color: var(--border-strong);
}
.btn-outline:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* PR #45: full-width buttons on phones. Tappier, more confident, prevents
   thumb-stretching to a small button island on the right edge of the screen.
   Hero + CTA-band buttons collapse to stacked block-level buttons under
   520px. Desktop layout untouched. */
@media (max-width: 520px) {
  .hero-ctas { gap: 10px; }
  .hero-ctas .btn { display: flex; justify-content: center; width: 100%; }
  .btn { padding: 14px 20px; font-size: 15px; }
}

/* ── Section base ────────────────────────────────────────────────── */
section { padding: 96px 0; }
section.alt { background: var(--bg-2); }
section.tight { padding: 72px 0; }

.section-title {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1.15;
  max-width: 22ch;
  text-wrap: balance;
}
.section-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
  margin-bottom: 56px;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  section { padding: 56px 0; }
  section.tight { padding: 48px 0; }
  .section-sub { margin-bottom: 36px; }
}
/* PR #45: small phones — section title shrinks a little more so the
   page doesn't feel "shouty" on a 360-400px viewport. */
@media (max-width: 420px) {
  section { padding: 44px 0; }
  .section-title { font-size: clamp(24px, 6.5vw, 30px); }
  .section-sub { font-size: 15.5px; margin-bottom: 28px; }
}

/* PR #45: defensive — long unbroken strings (URLs, hyphenated last
   names, foreign email addresses without natural break points) should
   wrap on mobile rather than overflow horizontally. */
h1, h2, h3, h4, p, li, a, td { overflow-wrap: break-word; word-wrap: break-word; }

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 32px;
  box-shadow: var(--shadow-1);
  transition: border-color 160ms, transform 160ms;
}
.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.card-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
  color: var(--brand-dark);
}
.card h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin-bottom: 10px;
  color: var(--ink);
  line-height: 1.2;
}
.card p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}
.card ul {
  list-style: none;
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.card li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  padding: 6px 0 6px 22px;
  position: relative;
}
.card li::before {
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 12px; height: 1px;
  background: var(--brand);
}

@media (max-width: 520px) {
  .card { padding: 24px; }
}

/* ── Numbered process steps ──────────────────────────────────────── */
.steps { counter-reset: step; }
.step {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.step:first-child { border-top: none; padding-top: 8px; }
.step:last-child { padding-bottom: 8px; }
.step-num {
  counter-increment: step;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  padding-top: 4px;
  width: 48px;
}
.step-num::before { content: "0" counter(step); }
.step-body h4 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin-bottom: 6px;
  color: var(--ink);
  line-height: 1.25;
}
.step-body p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ── CTA band ────────────────────────────────────────────────────── */
.cta-band {
  background: var(--ink);
  color: var(--bg);
  padding: 96px 24px;
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
  line-height: 1.1;
  text-wrap: balance;
}
.cta-band p {
  font-size: 18px;
  line-height: 1.5;
  opacity: 0.78;
  margin-bottom: 36px;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}
.cta-band .btn-primary {
  background: var(--bg); color: var(--ink);
  border-color: var(--bg);
}
.cta-band .btn-primary:hover { background: var(--bg-2); border-color: var(--bg-2); color: var(--ink); }
.cta-band .btn-outline {
  color: var(--bg);
  border-color: rgba(250, 250, 247, 0.32);
}
.cta-band .btn-outline:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }

@media (max-width: 720px) {
  .cta-band { padding: 64px 18px; }
}

/* ── Footer ──────────────────────────────────────────────────────── */
footer {
  background: var(--bg);
  color: var(--ink-2);
  padding: 56px 0 28px;
  font-size: 14px;
  border-top: 1px solid var(--border);
}
footer .wrap {
  display: grid; gap: 32px;
}
@media (min-width: 720px) {
  footer .wrap { grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
}
footer h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--ink);
}
footer p { line-height: 1.5; }
footer a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 120ms, color 120ms;
}
footer a:hover {
  color: var(--ink);
  border-bottom-color: var(--brand);
}
footer ul { list-style: none; }
footer li { margin-bottom: 8px; line-height: 1.5; }
.footer-bot {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding-top: 20px;
  font-size: 12px;
  color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
}

/* ── About page specifics ────────────────────────────────────────── */
.about-hero { padding: 96px 0 80px; }
.about-hero-grid {
  display: grid;
  gap: 56px;
  align-items: center;
}
@media (min-width: 720px) {
  .about-hero-grid { grid-template-columns: 4fr 6fr; gap: 72px; }
}
.about-photo {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--ink) 0%, #1E293B 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--bg);
  font-size: 96px;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin: 0 auto;
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.about-photo img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-md);
}
.about-body h1 {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  color: var(--ink);
  line-height: 1.05;
  max-width: 18ch;
  text-wrap: balance;
}
.about-body .role {
  font-size: 14px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.about-body p {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 20px;
  max-width: 58ch;
  text-wrap: pretty;
}
.about-body p strong { color: var(--ink); font-weight: 600; }

@media (max-width: 720px) {
  .about-hero { padding: 48px 0 32px; }
  .about-body h1 { max-width: none; }
}

/* Specialty service list (about-page §P1.5 — PR #46) — editorial row
   pattern instead of duplicate boxed cards. Each service is icon + content
   separated by a hairline rule. Visually distinct from the landing-page
   card grid so the About page reads as its own surface. */
.svc-list {
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.svc-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.svc-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--brand-dark);
  flex-shrink: 0;
}
.svc-body h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  color: var(--ink);
  line-height: 1.25;
}
.svc-body p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 12px;
  max-width: 60ch;
}
.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13px;
  color: var(--ink-3);
}
.svc-tags span { white-space: nowrap; }
.svc-tags .sep {
  color: var(--ink-4);
  margin: 0 2px;
}

@media (max-width: 520px) {
  .svc-row { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; }
  .svc-icon { width: 40px; height: 40px; font-size: 19px; }
  .svc-body p { font-size: 15.5px; }
}

/* ── Areas served (landing page §P49) — community directory ────────
   Tight 3-column grid on desktop, 2-column on tablet, single column on
   mobile. Each cell is a neighbourhood name + a one-line descriptor.
   Visually distinct from the cards/svc-rows above — no shadows, no
   boxes, just clean directory-style typography on hairlines. */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 720px) {
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .areas-grid { grid-template-columns: 1fr; }
}
.area-cell {
  background: var(--bg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 120ms;
}
.area-cell:hover { background: var(--bg-2); }
.area-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.2;
}
.area-desc {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* ── FAQ accordion (landing page §P50) ────────────────────────────────
   Native <details>/<summary> for accessibility — keyboard works
   out of the box, screen readers announce the expanded state.
   No JS. Hairline divider between Q&A pairs; chevron rotates
   on open. Matches the editorial directory feel of .svc-list. */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;             /* hide default ▶ marker (Firefox) */
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.35;
  transition: color 120ms;
}
.faq-item summary::-webkit-details-marker { display: none; } /* hide default ▶ (WebKit) */
.faq-item summary:hover { color: var(--brand-dark); }
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-3);
  width: 24px;
  text-align: center;
  transition: transform 200ms, color 120ms;
}
.faq-item[open] summary::after {
  content: '−';
  color: var(--brand-dark);
}
.faq-item .faq-body {
  padding: 0 0 24px;
  max-width: 70ch;
}
.faq-item .faq-body p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.faq-item .faq-body p:last-child { margin-bottom: 0; }
.faq-item .faq-body strong { color: var(--ink); font-weight: 600; }

@media (max-width: 520px) {
  .faq-item summary { font-size: 16px; padding: 18px 0; }
  .faq-item .faq-body p { font-size: 15px; }
}

/* Credentials list */
.creds {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
}
.cred-pill {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ── Motion respect ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .btn, .nav-cta, footer a { transition: none; }
}

/* ── FLAT NAV — the one shared navigation (all pages) ─────────────────
   Moved here from index.html's inline styles so every page shares the
   same nav + working mobile hamburger. The legacy mega-menu styles above
   are kept for the upcoming Communities dropdown panel. */
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
  color: var(--ink-2); font-size: 14px; font-weight: 600;
  padding: 10px 14px; border-radius: var(--r-sm); text-decoration: none;
  transition: color 120ms, background 120ms;
}
.nav-links a:hover { color: var(--ink); background: var(--bg-2); text-decoration: none; }
.nav-right { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); width: 42px; height: 42px; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform 180ms, opacity 180ms;
}
.nav-panel { display: none; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-right .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-panel {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-2);
    max-height: 0; overflow: hidden; transition: max-height 240ms ease;
  }
  .nav.is-open .nav-panel { max-height: 480px; }
  .nav-panel-inner { padding: 8px 18px 20px; display: flex; flex-direction: column; gap: 2px; }
  .nav-panel a {
    padding: 14px 8px; font-size: 16px; font-weight: 600;
    color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border);
  }
  .nav-panel a.nav-panel-cta {
    margin-top: 12px; background: var(--brand); color: #fff;
    text-align: center; border-radius: var(--r-sm); border: none;
  }
  .nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ── Utility-bar contact identity (Hollett pattern: phone + email always
   visible, tap-to-call on mobile). Uppercased email reads badly, so the
   contact links opt out of the bar's uppercase treatment. */
.utility-links a.u-contact { text-transform: none; letter-spacing: 0.02em; font-size: 12px; }
.utility-links a.u-mail-short { display: none; }
@media (max-width: 720px) {
  .utility-links a.u-contact { padding: 8px 2px; }
  .utility-links a.u-mail-full { display: none; }
  .utility-links a.u-mail-short { display: inline; }
}

/* ── Community guide pages ────────────────────────────────────────────
   A shorter gradient hero strip (reuses .hero.hero-lean's gradient/overlay
   without the 600px min-height), plus the price-band table. */
.hero.hero--page { min-height: 0; padding: 84px 0 60px; }
.hero.hero--page h1 {
  font-size: clamp(32px, 5vw, 52px);
  max-width: 20ch; margin-bottom: 16px;
}
@media (max-width: 720px) { .hero.hero--page { padding: 60px 0 46px; } }

.price-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
}
.price-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.price-table th, .price-table td {
  text-align: left; padding: 14px 18px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.price-table thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); font-weight: 600; white-space: nowrap;
}
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table td.pt-type { font-weight: 700; color: var(--ink); }
.price-table td.pt-range { font-weight: 700; color: var(--brand-dark); white-space: nowrap; }
.price-table td.pt-buys { color: var(--ink-2); font-size: 14.5px; }
.price-note {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-3);
  margin-top: 14px; font-style: italic; max-width: 70ch;
}
@media (max-width: 520px) {
  .price-table th, .price-table td { padding: 12px 14px; }
}

/* ── Compliance footer block (shared) ─────────────────────────────────
   Trademark attribution + brokerage identification + not-advice
   disclaimer. Present on every page so the marks are never used without
   the CREA attribution and the financial content always carries the
   general-information disclaimer. */
.compliance {
  border-top: 1px solid var(--border);
  margin-top: 4px; padding-top: 20px;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-3); max-width: none;
}
.compliance p { margin-bottom: 8px; }

/* ── Featured listings — "coming soon" panel with the agent's name
   (Hollett "Featured Listings" structure, honest version: no fake stock). */
.listings-soon {
  max-width: 520px; margin: 0 auto; text-align: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 40px 28px; box-shadow: var(--shadow-1);
}
.listings-soon-mark {
  width: 56px; height: 56px; border-radius: 50%; background: var(--brand);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.listings-soon-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
}
.listings-soon-role {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin: 6px 0 22px;
}

/* ── Contact section (Hollett "Contact Me" pattern) ───────────────────
   Navy info panel + a form that posts to the same submit_intake RPC the
   intake pages use, so messages land in DealFlow (not a dead inbox). */
.contact-grid { display: grid; gap: 0; border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); }
@media (min-width: 820px) { .contact-grid { grid-template-columns: 5fr 7fr; } }
.contact-info { background: var(--ink); color: #fff; padding: 40px 36px; }
.contact-lines { list-style: none; display: grid; gap: 16px; margin: 0 0 26px; }
.contact-lines li { display: flex; align-items: center; gap: 13px; font-size: 16px; color: #fff; }
.contact-lines li .ci { opacity: 0.7; width: 20px; text-align: center; }
.contact-info a { color: #fff; text-decoration: none; }
.contact-info a:hover { text-decoration: underline; text-decoration-color: var(--brand-light); }
.contact-office { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 22px;
  font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.82); }
.contact-office-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-light); margin-bottom: 8px; }
.contact-form { background: var(--bg); padding: 40px 36px; display: flex; flex-direction: column; gap: 15px; }
.contact-form input, .contact-form textarea { width: 100%; font: inherit; font-size: 15px;
  padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: #fff; color: var(--ink); }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.contact-form textarea { min-height: 120px; resize: vertical; }
.cf-row { display: grid; gap: 15px; }
@media (min-width: 560px) { .cf-row { grid-template-columns: 1fr 1fr; } }
.cf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px;
  color: var(--ink-2); line-height: 1.5; }
.cf-consent input { width: auto; margin-top: 3px; flex-shrink: 0; accent-color: var(--brand); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-status { font-size: 14px; min-height: 1.2em; color: var(--ink-2); }
.contact-form .btn-primary { align-self: flex-start; }

/* ── Cookie notice (honest: essential-only, no tracking) ─────────────── */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:9000;max-width:720px;margin:0 auto;background:var(--ink);color:#fff;border-radius:10px;padding:14px 18px;display:flex;align-items:center;gap:16px;box-shadow:0 10px 34px rgba(15,23,42,.30);font-size:13.5px;line-height:1.5;}
.cookie-bar p{margin:0;flex:1;color:rgba(255,255,255,.9);}
.cookie-bar a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.cookie-bar .cookie-ok{flex:none;background:#fff;color:var(--ink);border:0;border-radius:6px;padding:9px 20px;font-weight:700;font-size:13px;cursor:pointer;}
.cookie-bar .cookie-ok:hover{background:var(--bg-2);}
@media(max-width:520px){.cookie-bar{flex-direction:column;align-items:stretch;text-align:center;}.cookie-bar .cookie-ok{width:100%;}}