/* =====================================================================
   Raymond Conners | The Agency Bainbridge Island
   Base Stylesheet — editorial luxury real estate
   ===================================================================== */

:root {
  /* Brand color tokens */
  --agency-red: #EE2128;
  --agency-red-hover: #C61820;
  --ink: #111111;
  --ink-soft: #1A1A1A;
  --cream: #FAF8F4;
  --stone: #F5F2EC;
  --stone-2: #EEEAE2;
  --muted: #6B6864;
  --muted-soft: #8A8682;
  --border: rgba(17, 17, 17, 0.12);
  --border-soft: rgba(17, 17, 17, 0.06);
  --white: #FFFFFF;

  /* Type scale (fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 0.5rem + 6vw, 6.5rem);

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;
  --radius-full: 9999px;

  --transition: 280ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 720px;
  --content-default: 1100px;
  --content-wide: 1320px;

  /* Fonts */
  --font-display: 'Cormorant Garamond', 'Noto Serif', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, Arial, sans-serif;

  --shadow-soft: 0 1px 2px rgba(17,17,17,0.04), 0 8px 24px rgba(17,17,17,0.06);
  --shadow-card: 0 1px 3px rgba(17,17,17,0.06), 0 16px 40px rgba(17,17,17,0.08);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-20);
}
body {
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  font-weight: 400;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.12; font-weight: 400; font-family: var(--font-display); }
p, li, figcaption { text-wrap: pretty; }
::selection { background: rgba(238, 33, 40, 0.18); color: var(--ink); }
:focus-visible {
  outline: 2px solid var(--agency-red);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.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; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--content-default); margin-inline: auto; padding-inline: var(--space-6); }
.container--wide { max-width: var(--content-wide); }
.container--narrow { max-width: var(--content-narrow); }
@media (min-width: 768px) {
  .container { padding-inline: var(--space-10); }
}

section { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); }
section.section--tight { padding-block: clamp(var(--space-10), 5vw, var(--space-20)); }

.hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin-block: var(--space-12);
}
.hr--accent {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--agency-red);
  border: 0;
  margin: var(--space-4) 0 var(--space-8);
}

/* ---------- Typography utilities ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--agency-red);
}
.eyebrow--muted { color: var(--muted); }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.serif { font-family: var(--font-display); }
.muted { color: var(--muted); }
.lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  max-width: var(--content-wide);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .site-header__inner { padding: var(--space-5) var(--space-8); }
}
@media (min-width: 1280px) {
  .site-header__inner { padding: var(--space-5) var(--space-10); }
}
.brand-lockup {
  display: flex; align-items: center; gap: var(--space-3);
}
.brand-lockup__logo {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--agency-red);
  object-fit: cover;
}
@media (min-width: 768px) {
  .brand-lockup__logo { width: 56px; height: 56px; }
}
/* Brand text is redundant — the logo image already contains the wordmark. Hide at all sizes. */
.brand-lockup__text {
  display: none !important;
}
.brand-lockup__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.brand-lockup__sub {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
}

.primary-nav { display: none; }
@media (min-width: 1024px) { .primary-nav { display: flex; gap: var(--space-5); align-items: center; flex-wrap: nowrap; } }
.primary-nav a {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding: var(--space-2) 0;
  position: relative;
  font-weight: 500;
  white-space: nowrap;
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .primary-nav { gap: var(--space-3); }
  .primary-nav a { font-size: 0.7rem; letter-spacing: 0.08em; }
}
@media (min-width: 1280px) and (max-width: 1499px) {
  .primary-nav { gap: var(--space-4); }
  .primary-nav a { font-size: 0.74rem; letter-spacing: 0.09em; }
}
@media (min-width: 1500px) and (max-width: 1719px) {
  .primary-nav { gap: var(--space-5); }
  .primary-nav a { font-size: 0.78rem; letter-spacing: 0.10em; }
}
@media (min-width: 1720px) {
  .primary-nav { gap: var(--space-6); }
  .primary-nav a { font-size: 0.82rem; letter-spacing: 0.12em; }
}
.primary-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--agency-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.primary-nav a:hover::after,
.primary-nav a[aria-current='page']::after { transform: scaleX(1); }
.primary-nav a[aria-current='page'] { color: var(--agency-red); }

.nav-cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--agency-red); color: var(--white);
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (min-width: 1440px) {
  .nav-cta { padding: var(--space-2) var(--space-5); font-size: 0.78rem; letter-spacing: 0.14em; }
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--agency-red-hover); color: var(--white); }

.menu-toggle {
  display: inline-flex; flex-direction: column; gap: 5px;
  width: 28px; height: 22px; justify-content: center;
}
@media (min-width: 1024px) { .menu-toggle { display: none; } }
.menu-toggle span {
  display: block; width: 100%; height: 1.5px; background: var(--ink);
  transition: transform var(--transition);
}
[data-menu-open] .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-menu-open] .menu-toggle span:nth-child(2) { opacity: 0; }
[data-menu-open] .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--cream);
}
[data-menu-open] .mobile-nav { display: block; }
.mobile-nav__inner { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.mobile-nav a {
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border-soft);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
}
.btn--primary { background: var(--agency-red); color: var(--white); }
.btn--primary:hover { background: var(--agency-red-hover); color: var(--white); }
.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--light {
  background: transparent; color: var(--cream);
  border-color: var(--cream);
}
.btn--light:hover { background: var(--cream); color: var(--ink); }

/* ---------- Hero ---------- */
/* The header is sticky/absolute with measured height ~77-85px depending on viewport.
   Hero is sized to consume the remaining vertical space below the header without
   overflow on any device. We use 100svh (small viewport height) so iOS Safari's
   collapsing toolbar doesn't push CTAs out of reach. */
.hero {
  --header-h: 85px;
  position: relative;
  height: calc(100svh - var(--header-h));
  min-height: 520px;          /* floor for very short windows (e.g. landscape phone) */
  max-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: stretch;        /* let inner govern its own vertical layout */
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
@media (max-width: 767px) {
  .hero { --header-h: 77px; }
}
.hero__media {
  position: absolute; inset: 0; z-index: -1;
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 1;
  filter: brightness(0.88) saturate(1.05);
}
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  /* Bottom-anchored scrim. Credentials now sit at the bottom of the hero over
     the dark water reflection, so the scrim darkens the bottom band only,
     leaving the ferry, Mt. Rainier, and the sky fully visible. */
  background:
    linear-gradient(180deg,
      rgba(17,17,17,0) 0%,
      rgba(17,17,17,0) 55%,
      rgba(17,17,17,0.30) 75%,
      rgba(17,17,17,0.62) 90%,
      rgba(17,17,17,0.78) 100%);
}
@media (max-width: 767px) {
  .hero__media::after {
    /* On phones the credentials are left-aligned without the 96px offset, and
       the image scales tighter. Use a softer left/bottom wash for legibility. */
    background:
      radial-gradient(ellipse 90% 50% at 30% 80%, rgba(17,17,17,0.72) 0%, rgba(17,17,17,0.42) 50%, rgba(17,17,17,0) 95%),
      linear-gradient(180deg, rgba(17,17,17,0.30) 0%, rgba(17,17,17,0.08) 25%, rgba(17,17,17,0) 50%, rgba(17,17,17,0.35) 80%, rgba(17,17,17,0.55) 100%);
  }
}
.hero__brand-mark {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.75rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hero__brand-mark img {
  width: clamp(160px, 18vw, 240px);
  height: auto;
  display: block;
}
.hero__brand-mark:hover,
.hero__brand-mark:focus-visible { opacity: 0.85; transform: translateX(-50%) translateY(-1px); }

/* Credentials cluster — in-flow, sits above .hero__title and above the mountain horizon */
.hero__credentials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  color: var(--cream);
  margin-bottom: var(--space-5);
  margin-left: 96px; /* shift right ~1 inch on desktop */
}
@media (max-width: 768px) {
  .hero__credentials { margin-left: 0; } /* keep flush left on phones */
}
.hero__credentials .hero__rating {
  margin-bottom: var(--space-2);
  margin-left: 64px; /* aligns oval's left edge under the R in Raymond */
}
@media (max-width: 767px) {
  .hero__credentials .hero__rating { margin-left: 0; }
}
.hero__credentials .hero__eyebrow {
  margin-bottom: var(--space-2);
  justify-content: flex-start;
}
.hero__credentials .hero__eyebrow::after { display: none; }
.hero__credentials .hero__eyebrow::before {
  display: inline-block;
  content: '';
  width: 32px;
  height: 1px;
  background: var(--agency-red);
  margin-right: var(--space-4);
}
.hero__credentials .hero__title-rank {
  margin: 0;
  padding-left: 64px; /* aligns 'M' in Managing under 'R' in Raymond */
  padding-right: 0;
}

/* Centered variant: credentials sit directly below the centered Agency logo */
.hero__credentials--centered {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Top = top offset of logo + logo height + extra breathing room below logo.
     Logo aspect ratio is roughly 2.4:1, so logo height ≈ logo width / 2.4.
     Bumped from 1.5rem to 2.75rem so there is a clear gap below the wordmark. */
  top: calc(clamp(1.5rem, 3vw, 2.75rem) + clamp(160px, 18vw, 240px) / 2.4 + 2.75rem);
  z-index: 3;
  align-items: center;
  text-align: center;
  margin-left: 0;
  margin-bottom: 0;
  width: max-content;
  max-width: 92vw;
}
.hero__credentials--centered .hero__rating {
  margin-left: 0;
  /* Extra space below the 5-star rating ribbon */
  margin-bottom: var(--space-5);
}
/* Centered eyebrow: stack the red line BELOW the name (full-width centered)
   instead of placing it inline to the left, so "RAYMOND CONNERS" is truly centered. */
.hero__credentials--centered .hero__eyebrow {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.hero__credentials--centered .hero__eyebrow::before {
  /* Reuse the existing red line but render it centered under the name */
  width: 48px;
  margin: 0;
  order: 2;            /* push the line after the name text */
}
.hero__credentials--centered .hero__title-rank { padding-left: 0; text-align: center; }
@media (max-width: 767px) {
  /* On phones, take credentials out of absolute positioning and let them flow above the title.
     This prevents the headline from overlapping the rating/rank rows on short viewports. */
  .hero__credentials--centered {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    margin: 0 auto var(--space-6);
    padding: 0 var(--space-6);
    box-sizing: border-box;
  }
  /* Phones: tighter credentials sizing to keep "Managing Director & Managing Broker"
     and the brokerage line clearly separated on one line each where possible. */
  .hero__credentials--centered .hero__rating {
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-3);
  }
  .hero__credentials--centered .hero__title-rank {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    margin-top: var(--space-1);
    margin-bottom: var(--space-2);
  }
  .hero__credentials--centered .hero__brokerage {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    margin-top: var(--space-2);
  }
}
/* Very narrow phones (iPhone SE width 375 and below): shrink further so
   the rating ribbon and "Managing Director & Managing Broker" never wrap. */
@media (max-width: 380px) {
  .hero__credentials--centered .hero__rating {
    font-size: 0.6rem;
    letter-spacing: 0.04em;
  }
  .hero__credentials--centered .hero__title-rank {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
  }
  .hero__credentials--centered .hero__brokerage {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }
}
@media (max-width: 767px) {
  .hero {
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
  }
  /* On phones the centered credentials are static and sit in normal flow,
     so the hero is laid out as: logo → credentials → inner content (title/sub/CTAs).
     We use flex on .hero itself, with credentials and inner stacked. */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  /* Top padding on the hero clears the absolutely-positioned logo at the top */
  .hero {
    padding-top: calc(clamp(1.5rem, 3vw, 2.75rem) + clamp(130px, 36vw, 180px) + 1.25rem);
  }
  .hero__inner {
    width: 100%;
    box-sizing: border-box;
    padding-top: var(--space-6);
    padding-bottom: var(--space-10);
    flex: 1 1 auto;
    justify-content: flex-end;
  }
  .hero__title { max-width: none; }
  .hero__sub { max-width: none; }
  .hero__brand-mark img { width: clamp(130px, 36vw, 180px); }
}
.hero__inner {
  width: 100%; max-width: var(--content-wide);
  margin-inline: auto;
  padding: var(--space-8) var(--space-6) var(--space-10);
  color: var(--cream);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* anchor content near the bottom of the hero */
  align-items: flex-start;     /* children size to their content, no stretch */
  gap: 0;
}
.hero__inner > .hero__rating { align-self: flex-start; }
@media (min-width: 768px) {
  .hero__inner { padding: var(--space-10) var(--space-10) var(--space-10); }
  /* Anchor credentials to the BOTTOM of the hero so the text sits over the
     dark water reflection below the ferry, not on top of the ferry itself. */
  .hero__inner { justify-content: flex-end; }
  .hero__inner { padding-top: 0; }
  /* Pull the credentials block fully below the ferry hull. The ferry sits
     roughly in the middle band of the image; bottom padding of ~12-16% of
     viewport height keeps the block clear of the bow and reflection. */
  .hero__inner { padding-bottom: clamp(0.75rem, 2vh, 1.5rem); }
}
@media (min-width: 1280px) {
  .hero__inner { padding: 0 var(--space-12) clamp(0.75rem, 2vh, 1.75rem); }
}
/* Short-height landscape devices (e.g. phone landscape, very short laptops):
   the absolutely-positioned credentials would eat the whole hero. Fall back
   to the mobile pattern — credentials in normal flow above the headline. */
@media (max-width: 900px) and (max-height: 500px) {
  /* Phone landscape (e.g. iPhone in landscape, ~390-844px wide, ~390px tall):
     drop the min-height floor so the hero fits the actual viewport, shrink the
     logo and credentials aggressively, and lay everything out in compact flow. */
  .hero {
    --header-h: 60px;
    min-height: 0;
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: calc(clamp(0.5rem, 1.5vw, 1rem) + clamp(70px, 12vh, 100px) + 0.4rem);
    padding-bottom: var(--space-4);
  }
  .hero__brand-mark {
    top: clamp(0.5rem, 1.5vw, 1rem);
  }
  .hero__brand-mark img { width: clamp(70px, 12vh, 100px); }
  .hero__credentials--centered {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    margin: 0 auto var(--space-2);
    padding: 0 var(--space-6);
    box-sizing: border-box;
  }
  .hero__credentials--centered .hero__rating {
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    padding: 2px var(--space-3);
    margin-bottom: 4px;
  }
  .hero__credentials--centered .hero__title-rank {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    margin-top: 2px;
    margin-bottom: 4px;
    line-height: 1.3;
  }
  .hero__credentials--centered .hero__brokerage {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    margin-top: 2px;
    margin-bottom: 0;
    line-height: 1.3;
  }
  .hero__inner {
    padding: var(--space-2) var(--space-6) var(--space-3);
    justify-content: flex-start;
    flex: 0 0 auto;
  }
  .hero__rating { margin-bottom: var(--space-1); }
  .hero__eyebrow { margin-bottom: var(--space-1); font-size: 0.65rem; }
  .hero__title {
    font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
    line-height: 1.05;
    margin-bottom: var(--space-2);
  }
  .hero__sub {
    margin-bottom: var(--space-3);
    font-size: 0.82rem;
    line-height: 1.4;
  }
  .hero__media::after {
    /* In landscape phones, content sits over the image — use a softer top-to-bottom scrim. */
    background: linear-gradient(180deg, rgba(17,17,17,0.55) 0%, rgba(17,17,17,0.35) 50%, rgba(17,17,17,0.70) 100%);
  }
}
.hero__eyebrow {
  color: rgba(250, 248, 244, 0.95);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: var(--space-6);
  display: flex; align-items: center; gap: var(--space-4);
  text-shadow: 0 2px 14px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.6);
}
.hero__eyebrow::before {
  content: ''; width: 32px; height: 1px; background: var(--agency-red);
}
.hero__title-rank {
  color: var(--cream);
  font-family: var(--font-body);
  font-size: clamp(0.68rem, 0.6rem + 0.35vw, 0.78rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.5;
  margin: calc(var(--space-4) * -0.5) 0 var(--space-3);
  padding-left: 44px;
  opacity: 0.98;
  text-shadow: 0 2px 14px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.6);
}
.hero__brokerage {
  color: var(--cream);
  font-family: var(--font-body);
  font-size: clamp(0.68rem, 0.6rem + 0.35vw, 0.78rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.5;
  margin: var(--space-2) 0 var(--space-6);
  padding-left: 44px;
  opacity: 0.95;
  text-shadow: 0 2px 14px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.6);
}
.hero__credentials--centered .hero__brokerage { padding-left: 0; text-align: center; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  /* Tighter responsive scale so the hero fits short laptops without overflowing.
     Floor 2.25rem (iPhone SE), peak 5.5rem (1920px desktop). */
  font-size: clamp(2.25rem, 0.75rem + 4.2vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.hero__title em { font-style: italic; color: var(--agency-red); }

/* One-line headline variant — disables the 22ch max-width clamp so the
   headline never wraps. Used when the headline must sit in the sky band. */
.hero__title--oneline {
  max-width: none;
  white-space: nowrap;
  /* Scale by viewport width so it fits the available hero width on every device. */
  font-size: clamp(1.2rem, 0.4rem + 2.6vw, 3.6rem);
}

/* Sky-band headline: absolutely positioned in the open sky just under the
   credentials cluster and well above the ferry/mountain/water. Centered. */
@media (min-width: 768px) {
  .hero__title--sky {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Sit roughly 60% down the hero on desktop — just above the ferry's
       deck line, in the open sky band. Adjust to taste with one number. */
    top: 58%;
    margin: 0;
    text-align: center;
    width: max-content;
    max-width: 92vw;
    z-index: 3;
  }
}
@media (max-width: 767px) {
  .hero__title--sky {
    text-align: center;
    margin: var(--space-4) auto var(--space-2);
    /* On phones the hero content sits in normal flow above the photo, so this
       is just a centered headline above whatever follows. */
    white-space: normal;
  }
}

.hero__sub {
  max-width: 56ch;
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.05rem);
  color: rgba(250, 248, 244, 0.92);
  margin-bottom: var(--space-6);
  font-weight: 300;
  line-height: 1.55;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Hero rating ribbon */
.hero__rating {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-1) var(--space-4);
  background: rgba(17,17,17,0.45);
  border: 1px solid rgba(250,248,244,0.25);
  border-radius: var(--radius-full);
  font-size: clamp(0.62rem, 0.55rem + 0.25vw, 0.72rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: var(--space-5);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.hero__rating .stars { color: #F4C03E; letter-spacing: 0.15em; }

/* ---------- Section header ---------- */
.section-header {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
  max-width: 80ch;
}
.section-header h2 {
  font-size: var(--text-2xl);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.section-header h2 em { font-style: italic; color: var(--agency-red); }
.section-header p { color: var(--muted); font-size: var(--text-base); max-width: 64ch; }

/* Editorial 2-column section header */
.section-header--split {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  align-items: end;
  max-width: none;
}
@media (min-width: 900px) {
  .section-header--split { grid-template-columns: 1.2fr 1fr; gap: var(--space-16); }
}

/* ---------- Cards & Grids ---------- */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.card h3 { font-size: var(--text-lg); font-weight: 500; }
.card p { color: var(--muted); font-size: 0.95rem; }

/* Community tile */
.community-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
  border-radius: 2px;
}
.community-tile__img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.16,1,0.3,1), opacity var(--transition);
  opacity: 0.92;
}
.community-tile:hover .community-tile__img { transform: scale(1.05); opacity: 1; }
.community-tile__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(17,17,17,0.85) 100%);
}
.community-tile__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-6);
  color: var(--cream);
}
.community-tile__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-1);
  letter-spacing: -0.005em;
}
.community-tile__tag {
  font-size: 0.78rem;
  color: rgba(250,248,244,0.78);
  letter-spacing: 0.04em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Testimonial card */
.testimonial {
  background: var(--white);
  border: 1px solid var(--border-soft);
  padding: var(--space-10);
  display: flex; flex-direction: column; gap: var(--space-5);
  position: relative;
}
.testimonial__stars { color: var(--agency-red); letter-spacing: 0.2em; font-size: 0.9rem; }
.testimonial__body {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-soft);
  font-style: italic;
}
.testimonial__meta {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}
.testimonial__author { font-size: 0.95rem; font-weight: 500; color: var(--ink); font-family: var(--font-body); }
.testimonial__source { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Agency co-brand strip ---------- */
.agency-strip {
  background: var(--ink);
  color: var(--cream);
}
.agency-strip__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
  grid-template-columns: 1fr;
  padding-block: clamp(var(--space-16), 6vw, var(--space-24));
}
@media (min-width: 900px) {
  .agency-strip__inner { grid-template-columns: 1.1fr 1fr; }
}
.agency-strip h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.agency-strip h2 em { color: var(--agency-red); font-style: italic; }
.agency-strip p { color: rgba(250, 248, 244, 0.78); max-width: 56ch; }
.agency-strip a { color: var(--cream); border-bottom: 1px solid var(--agency-red); }
.agency-strip a:hover { color: var(--agency-red); }
.agency-mark {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.28em;
  font-size: var(--text-sm);
  color: var(--agency-red);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.agency-mark::before {
  content: ''; width: 24px; height: 1px; background: var(--agency-red);
}

/* ---------- Form ---------- */
.lead-form { display: grid; gap: var(--space-5); max-width: 640px; }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  color: var(--ink);
  font-family: var(--font-body);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--agency-red);
}
.field textarea { resize: vertical; min-height: 120px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 640px) { .field--row { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(250, 248, 244, 0.78);
  padding: var(--space-20) 0 var(--space-10);
  font-size: 0.9rem;
}
.site-footer__grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-10); }
}
.site-footer h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: var(--space-5);
  font-weight: 500;
}
.site-footer a { color: rgba(250, 248, 244, 0.78); }
.site-footer a:hover { color: var(--agency-red); }
.site-footer ul { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__brand p { max-width: 38ch; color: rgba(250, 248, 244, 0.62); margin-top: var(--space-4); font-size: 0.9rem; }
.site-footer__logo {
  width: 56px; height: 56px; border-radius: 50%; background: var(--agency-red);
  object-fit: cover;
}
.site-footer__social { display: flex; gap: var(--space-4); margin-top: var(--space-5); }
.site-footer__social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(250,248,244,0.25);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.site-footer__social a:hover { border-color: var(--agency-red); background: var(--agency-red); color: var(--cream); }
.site-footer__legal {
  border-top: 1px solid rgba(250, 248, 244, 0.12);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  font-size: 0.76rem; color: rgba(250,248,244,0.55);
}
.eho-row {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: 0.76rem; letter-spacing: 0.06em;
}
.eho-mark {
  display: inline-block;
  width: 28px; height: 28px;
  vertical-align: middle;
  color: rgba(250,248,244,0.78);
  flex: 0 0 28px;
}
img.eho-mark { object-fit: contain; }

/* Fair Housing block layout (logo + disclosure text) */
.fair-housing-logo {
  display: block;
  flex: 0 0 44px;
  width: 44px; height: 44px;
  color: rgba(250,248,244,0.78);
  margin-top: 0.15rem;
}
.fair-housing-text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
  .fair-housing-logo { width: 36px; height: 36px; flex: 0 0 36px; }
}

/* Fair Housing block (for community pages) */
.fair-housing {
  background: var(--stone);
  border-left: 3px solid var(--agency-red);
  padding: var(--space-8);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
  margin-block: var(--space-12);
}
.fair-housing strong { color: var(--ink); font-weight: 600; }
.fair-housing a { color: var(--agency-red); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: var(--space-6);
}
.breadcrumb a:hover { color: var(--agency-red); }
.breadcrumb__sep { margin-inline: var(--space-3); color: var(--border); }

/* ---------- Page intro ---------- */
.page-intro {
  padding-block: var(--space-16) var(--space-10);
}
.page-intro h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1.0;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
  max-width: 18ch;
}
.page-intro h1 em { font-style: italic; color: var(--agency-red); }
.page-intro__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.4;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 800ms ease, transform 800ms cubic-bezier(0.16,1,0.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Misc ---------- */
.divider {
  display: block;
  width: 56px; height: 1px;
  background: var(--agency-red);
  margin: var(--space-6) 0;
}
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-sm);
}

/* ---------- Listing cards ---------- */
.listing {
  background: var(--white);
  border: 1px solid var(--border-soft);
  display: flex; flex-direction: column;
}
.listing__img {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--stone-2), var(--stone));
  position: relative;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.listing__img::after {
  content: 'RECENT SOLD — EXAMPLE';
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  font-weight: 500;
}
.listing__body {
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.listing__price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ink);
}
.listing__address { color: var(--muted); font-size: 0.9rem; }
.listing__beds { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* Photo-first listing variant for active for-sale listings */
.listing--photo { text-decoration: none; color: inherit; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.listing--photo:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(0,0,0,0.25); }
.listing__photo {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--stone);
}
.listing__mls {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.5rem;
  opacity: 0.7;
}
.listing__photo { position: relative; }
.listing__status {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.32rem 0.6rem;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.06);
}
.listing__status--pending {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.listing__status--active {
  background: var(--agency-red);
  color: #fff;
  border-color: var(--agency-red);
}

/* ---------- Neighborhood list (community pages) ---------- */
.neighborhood-list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .neighborhood-list { grid-template-columns: 1fr 1fr; } }
.neighborhood {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-soft);
  display: grid; gap: var(--space-1);
}
.neighborhood__name { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); color: var(--ink); }
.neighborhood__ferry { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--agency-red); }
.neighborhood__desc { font-size: 0.92rem; color: var(--muted); line-height: 1.55; margin-top: var(--space-2); }

/* ---------- Pull quote ---------- */
.pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  line-height: 1.25;
  font-style: italic;
  color: var(--ink);
  max-width: 28ch;
  padding-left: var(--space-6);
  border-left: 2px solid var(--agency-red);
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--border-soft); }
.faq details {
  border-bottom: 1px solid var(--border-soft);
  padding: var(--space-5) 0;
}
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--agency-red);
  transition: transform var(--transition);
  line-height: 1;
}
.faq details[open] summary::after { content: '–'; }
.faq details > p,
.faq details > div {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ---------- Article layout (community deep page) ---------- */
.community-hero {
  position: relative;
  min-height: 64vh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.community-hero__media { position: absolute; inset: 0; z-index: -1; }
.community-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.community-hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 30%, rgba(17,17,17,0.78) 100%);
}
.community-hero__inner {
  width: 100%; max-width: var(--content-wide); margin-inline: auto;
  padding: var(--space-16) var(--space-6) var(--space-16); color: var(--cream);
}
@media (min-width: 768px) {
  .community-hero__inner { padding: var(--space-24) var(--space-10) var(--space-20); }
}
.community-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  letter-spacing: -0.015em;
  line-height: 1.0;
  max-width: 18ch;
  margin-bottom: var(--space-4);
}
.community-hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: rgba(250, 248, 244, 0.85);
  max-width: 50ch;
}

.community-meta {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
  padding-block: var(--space-10);
  border-bottom: 1px solid var(--border-soft);
}
@media (min-width: 768px) { .community-meta { grid-template-columns: repeat(4, 1fr); } }
.meta-block { display: flex; flex-direction: column; gap: var(--space-2); }
.meta-block__label { display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.meta-block__value { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); font-weight: 500; }

/* ---------- Two-column editorial ---------- */
.two-col {
  display: grid; gap: var(--space-12);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .two-col { grid-template-columns: 1.2fr 1fr; gap: var(--space-20); align-items: start; } }

/* ---------- List of links (restaurants/parks etc) ---------- */
.simple-list { display: flex; flex-direction: column; }
.simple-list li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-soft);
  display: grid;
  gap: var(--space-1);
}
.simple-list .item-name { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); font-weight: 500; }
.simple-list .item-meta { font-size: 0.82rem; color: var(--muted); }
.simple-list a { color: inherit; }
.simple-list a:hover { color: var(--agency-red); }

/* Two-column simple-list */
.cols-2 {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .cols-2 { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }

/* ---------- Pride / ferry note ---------- */
.callout {
  padding: var(--space-6) var(--space-8);
  background: var(--stone);
  border-top: 2px solid var(--agency-red);
  margin-block: var(--space-8);
}
.callout__label {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--agency-red); margin-bottom: var(--space-2);
  font-weight: 500;
}
.callout p { color: var(--ink-soft); font-size: 0.95rem; }

/* =====================================================================
   LUXURY QUESTIONNAIRE — multi-step form (buyer & seller)
   Editorial styling: big serif step headers, glass progress, generous
   whitespace, subtle reveal transitions between steps.
   ===================================================================== */

.questionnaire {
  background: linear-gradient(180deg, var(--cream) 0%, var(--stone) 100%);
  min-height: 100vh;
  padding-block: 0;
}
.q-hero {
  position: relative;
  padding: clamp(var(--space-16), 10vw, var(--space-32)) 0 var(--space-12);
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(238,33,40,0.06), transparent 60%),
    var(--cream);
  border-bottom: 1px solid var(--border-soft);
}
.q-hero .eyebrow { margin-bottom: var(--space-4); }
.q-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 1rem + 5vw, 4.75rem);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin-bottom: var(--space-6);
}
.q-hero h1 em {
  font-style: italic;
  color: var(--agency-red);
}
.q-hero__lede {
  max-width: 58ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--muted);
  font-style: italic;
}

/* Progress bar */
.q-progress {
  position: sticky;
  top: 70px;
  z-index: 30;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
  padding: var(--space-4) var(--space-6);
}
.q-progress__inner {
  max-width: var(--content-default);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.q-progress__bar {
  flex: 1;
  height: 2px;
  background: rgba(17,17,17,0.08);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  min-width: 200px;
}
.q-progress__bar-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--agency-red);
  width: 0%;
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.q-progress__label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.q-progress__label strong { color: var(--ink); font-weight: 600; }

/* Step container */
.q-form {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-6);
}
.q-step {
  display: none;
  animation: q-step-in 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.q-step.is-active { display: block; }
@keyframes q-step-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.q-step__num {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--agency-red);
  font-weight: 500;
  margin-bottom: var(--space-4);
}
.q-step__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 1.2rem + 2vw, 2.8rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: var(--space-3);
}
.q-step__title em { font-style: italic; color: var(--agency-red); }
.q-step__sub {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: var(--space-10);
  max-width: 56ch;
}

/* Field groups */
.q-field {
  margin-bottom: var(--space-8);
}
.q-field--row {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .q-field--row { grid-template-columns: 1fr 1fr; }
}
.q-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.q-label__hint {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-weight: 400;
}
.q-input,
.q-textarea,
.q-select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
  transition: border-color var(--transition), background var(--transition);
  border-radius: 0;
}
.q-input::placeholder,
.q-textarea::placeholder { color: var(--muted-soft); font-style: italic; }
.q-input:focus,
.q-textarea:focus,
.q-select:focus {
  outline: none;
  border-bottom-color: var(--agency-red);
}
.q-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
  font-size: 1.05rem;
  font-family: var(--font-body);
}
.q-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23111' stroke-width='1.5' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: var(--space-8);
}

/* Choice chips (radio/checkbox as cards) */
.q-choices {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .q-choices--2 { grid-template-columns: 1fr 1fr; }
  .q-choices--3 { grid-template-columns: repeat(3, 1fr); }
}
.q-choice {
  position: relative;
  cursor: pointer;
}
.q-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.q-choice__box {
  display: block;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
  transition: all var(--transition);
  text-align: center;
}
.q-choice__box small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: var(--space-1);
}
.q-choice:hover .q-choice__box {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.q-choice input:checked + .q-choice__box {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.q-choice input:checked + .q-choice__box small { color: rgba(250,248,244,0.7); }
.q-choice input:focus-visible + .q-choice__box {
  outline: 2px solid var(--agency-red);
  outline-offset: 3px;
}

/* Navigation */
.q-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-soft);
}
.q-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
  border-radius: 2px;
}
.q-btn--primary {
  background: var(--ink);
  color: var(--cream);
}
.q-btn--primary:hover {
  background: var(--agency-red);
}
.q-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.q-btn--ghost:hover {
  border-color: var(--ink);
}
.q-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Final step */
.q-final {
  text-align: center;
  padding-block: var(--space-12);
}
.q-final h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  margin-bottom: var(--space-4);
}
.q-final h2 em { font-style: italic; color: var(--agency-red); }
.q-final p { max-width: 56ch; margin: 0 auto var(--space-8); color: var(--muted); }

/* Privacy footnote */
.q-footnote {
  margin-top: var(--space-4);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Range slider for budget */
.q-range {
  margin-top: var(--space-2);
}
.q-range__bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: rgba(17,17,17,0.12);
  outline: none;
}
.q-range__bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  background: var(--agency-red);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--cream);
  box-shadow: 0 2px 8px rgba(238,33,40,0.3);
}
.q-range__bar::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--agency-red);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--cream);
}
.q-range__value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--ink);
  margin-top: var(--space-3);
  font-style: italic;
}

/* =====================================================================
   AWWWARDS-INSPIRED POLISH — glass cards, scroll reveals, motion
   ===================================================================== */

/* Fade-up on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }

/* Glass card variant */
.glass-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: var(--space-8);
  box-shadow:
    0 1px 2px rgba(17, 17, 17, 0.04),
    0 24px 60px rgba(17, 17, 17, 0.08);
}
.glass-card--dark {
  background: rgba(17, 17, 17, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--cream);
}

/* Magnetic / lift on hover for cards */
.card { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }

/* =====================================================================
   QUESTIONNAIRE — error states, submit banner, scrolled header
   ===================================================================== */
.q-input.q-error,
.q-textarea.q-error,
.q-select.q-error {
  border-color: var(--agency-red);
  box-shadow: 0 0 0 3px rgba(238, 33, 40, 0.08);
}
.q-choices.q-error .q-choice__box {
  border-color: var(--agency-red);
}
.q-field-error {
  color: var(--agency-red);
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  margin-top: 0.5rem;
}
.q-submit-error {
  background: rgba(238, 33, 40, 0.06);
  border: 1px solid rgba(238, 33, 40, 0.3);
  color: var(--agency-red);
  padding: 1rem 1.25rem;
  font-size: 0.92rem;
  line-height: 1.5;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  font-family: var(--font-body);
}

/* Header micro-shrink on scroll */
.site-header { transition: padding 320ms cubic-bezier(0.16, 1, 0.3, 1),
                            background 320ms ease,
                            box-shadow 320ms ease,
                            backdrop-filter 320ms ease; }
.site-header.is-scrolled {
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.05);
}
.site-header.is-scrolled .site-header__inner { padding-top: 0.85rem; padding-bottom: 0.85rem; }

/* =====================================================================
   CINEMATIC HERO — full-bleed editorial treatment for landing pages
   Inspired by Calcagno & Hamilton, Jade Mills, Keri White
   ===================================================================== */
.cinematic-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.cinematic-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.cinematic-hero__media img,
.cinematic-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cinematic-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(17,17,17,0.35) 0%, rgba(17,17,17,0.15) 35%, rgba(17,17,17,0.55) 100%);
}
.cinematic-hero__inner {
  position: relative;
  z-index: 1;
  padding: 8rem 1.5rem 6rem;
  max-width: 1100px;
  width: 100%;
}
.cinematic-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.92);
  margin-bottom: 1.75rem;
}
.cinematic-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(0,0,0,0.18);
}
.cinematic-hero__title em {
  font-style: italic;
  color: var(--agency-red);
  font-weight: 400;
}
.cinematic-hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: rgba(250, 248, 244, 0.96);
  max-width: 720px;
  margin: 0 auto 2.25rem;
}
.cinematic-hero__byline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(250, 248, 244, 0.85);
  margin-bottom: 2.5rem;
}
.cinematic-hero__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 0.5rem;
}
.btn-ghost-light {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(250, 248, 244, 0.55);
  padding: 1.05rem 2.4rem;
  text-decoration: none;
  transition: background 280ms ease, border-color 280ms ease, color 280ms ease, transform 280ms ease;
}
.btn-ghost-light:hover {
  background: rgba(250, 248, 244, 0.95);
  border-color: rgba(250, 248, 244, 0.95);
  color: var(--ink);
}
.btn-solid-red {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--agency-red);
  border: 1px solid var(--agency-red);
  padding: 1.05rem 2.4rem;
  text-decoration: none;
  transition: background 280ms ease, color 280ms ease, transform 280ms ease;
}
.btn-solid-red:hover { background: #c81b22; border-color: #c81b22; }

.cinematic-hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.7);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 2;
}
.cinematic-hero__scroll::after {
  content: "";
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, rgba(250,248,244,0.8), rgba(250,248,244,0));
  animation: scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* Editorial eyebrow utility — pairs with italic-red display */
.editorial-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

/* =====================================================================
   FEATURE CTA — used on /buyers and any page that drops Google Forms
   ===================================================================== */
.section-cta-feature {
  padding: var(--space-section) 1.5rem;
  background:
    radial-gradient(circle at 70% 30%, rgba(238, 33, 40, 0.04), transparent 60%),
    var(--cream);
}
.feature-cta {
  margin-top: 3.5rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.6), rgba(245, 242, 236, 0.4));
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 4px;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.75rem, 4vw, 4.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.feature-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 70%, rgba(238, 33, 40, 0.025));
}
.feature-cta__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.feature-cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 1rem;
}
.feature-cta__title em { font-style: italic; color: var(--agency-red); }
.feature-cta__sub {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.feature-cta__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}
.feature-cta__note {
  margin-top: 1.75rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.feature-cta__note a { color: var(--ink); text-decoration: underline; }

/* =====================================================================
   DUAL CTA — sellers.html "Two ways to begin"
   ===================================================================== */
.section-cta-dark { padding: var(--space-section) 1.5rem; }
.dual-cta {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.25rem;
  margin-top: 3rem;
}
@media (max-width: 820px) {
  .dual-cta { grid-template-columns: 1fr; }
}
.dual-cta__card {
  display: block;
  padding: clamp(2rem, 3.5vw, 3rem);
  border: 1px solid rgba(250, 248, 244, 0.14);
  background: rgba(250, 248, 244, 0.03);
  text-decoration: none;
  color: var(--cream);
  transition: background 320ms ease, border-color 320ms ease, transform 320ms ease;
  border-radius: 4px;
}
.dual-cta__card:hover {
  background: rgba(250, 248, 244, 0.07);
  border-color: rgba(250, 248, 244, 0.28);
  transform: translateY(-2px);
}
.dual-cta__card--feature {
  background: rgba(238, 33, 40, 0.07);
  border-color: rgba(238, 33, 40, 0.4);
}
.dual-cta__card--feature:hover {
  background: rgba(238, 33, 40, 0.13);
  border-color: rgba(238, 33, 40, 0.7);
}
.dual-cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.65rem, 2.6vw, 2.25rem);
  line-height: 1.1;
  color: var(--cream);
  margin: 0.75rem 0 1rem;
}
.dual-cta__title em { font-style: italic; color: var(--agency-red); }
.dual-cta__sub {
  color: rgba(250, 248, 244, 0.78);
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.dual-cta__action {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--agency-red);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.35rem;
}

/* Make scroll cue work inside .hero (not only .cinematic-hero) */
.hero .cinematic-hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); }

/* ============ HERO INTRO STRIP ============
   Lifts the headline, lede paragraph, and primary CTAs out of the hero photo
   and into a clean section directly below. Cream background, generous
   breathing room. The hero photo stays free of any words. */
.hero-intro {
  background: var(--cream);
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}
.hero-intro .container {
  max-width: 68ch;
  margin-inline: auto;
}
.hero-intro__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 0.9rem + 3.2vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
}
.hero-intro__title em {
  font-style: italic;
  color: var(--agency-red);
}
.hero-intro__lede {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink);
  font-weight: 300;
  margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
  max-width: 64ch;
}
.hero-intro__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
}

/* ============ CARD BULLET LIST ============
   Tight bulleted list inside .card. Small agency-red square marker, generous
   line-height for legibility, no default browser indent. */
.card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.card__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
}
.card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  background: var(--agency-red);
  border-radius: 1px;
}