/* =============================================================
   First Choice Title Associates — design system v2

   v1 was a grid of bordered boxes. Isabel's note, correctly:
   "plain and AI slop." This version is built on movement and
   composition instead of containers.

   Rules this file follows:
     - no 1px-bordered equal-width cards anywhere
     - asymmetric grids, overlap, and negative space carry layout
     - real scale contrast (hero type runs to ~7rem)
     - the keyhole mark from the logo is a graphic device, not
       just a logo sitting in the corner
     - motion on scroll, a marquee, counters, a carousel
     - photo zones are sized and composed for REAL images; they
       are marked placeholders, not decoration

   Colors pixel-sampled from the real logo (Fifi/BRAND.md).
   Type system is the logo lockup scaled up: grotesque caps in
   gray, italic serif in red.
   ============================================================= */

:root {
  --red: #ED1C24;              /* brand red, pixel-sampled from the logo. Marks, accents, text on light. */
  --red-surface: #E31C24;      /* ONLY for surfaces carrying white text. White on #ED1C24 measures 4.38:1,
                                  just under the 4.5:1 accessibility minimum; this passes at 4.71:1 and is
                                  visually indistinguishable. Do not use it as the brand color. */
  --red-deep: #B60F16;
  --gray: #6C6E70;
  --ink: #131517;
  --charcoal: #1D1F21;
  --charcoal-2: #292C2E;
  --body: #4A4D50;
  --paper: #FBFAF8;
  --paper-warm: #F2EEE9;
  --line: #E0DCD6;
  --white: #FFFFFF;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Lora", Georgia, serif;
  --text: "Inter", system-ui, sans-serif;

  --wrap: 1240px;
  --gutter: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 960px; }

.skip { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 12px 18px; z-index: 200; }
.skip:focus { left: 12px; top: 12px; }

/* ---------- Motion primitives ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .09s; }
.reveal[data-d="2"] { transition-delay: .18s; }
.reveal[data-d="3"] { transition-delay: .27s; }
.reveal[data-d="4"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none !important; }
  .hero__mark { animation: none !important; }
}

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.032em;
  margin: 0 0 0.44em;
}
h1 { font-size: clamp(2.9rem, 8.2vw, 7rem); }
h2 { font-size: clamp(2.1rem, 5.2vw, 4.1rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.85rem); letter-spacing: -0.02em; }
h4 { font-size: 1.05rem; letter-spacing: 0; font-weight: 600; }

/* The red italic serif from the logo — the emphasis voice of the whole site. */
.em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--red);
  letter-spacing: -0.005em;
}
.em--light { color: #FF6B70; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--red);
  margin: 0 0 22px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--red); flex: 0 0 auto; }

.lede { font-size: clamp(1.08rem, 1.5vw, 1.28rem); color: var(--body); max-width: 56ch; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--sans); font-weight: 600; font-size: 0.94rem;
  padding: 17px 34px; background: var(--red-surface); color: #fff;
  text-decoration: none; border: 1.5px solid var(--red-surface); overflow: hidden;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.btn span { position: relative; z-index: 1; }
.btn::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform: translateY(101%); transition: transform .42s var(--ease); z-index: 0;
}
.btn:hover::after { transform: translateY(0); }
.btn:hover { border-color: var(--ink); }
.btn__arrow { position: relative; z-index: 1; transition: transform .42s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { color: #fff; }
.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn--light::after { background: #fff; }
.btn--light:hover { color: var(--ink); border-color: #fff; }
.btn--sm { padding: 11px 22px; font-size: 0.85rem; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(251,250,248,0);
  transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.nav.is-stuck {
  background: rgba(251,250,248,.94);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 30px; min-height: 86px; }
.nav__logo { flex: 0 0 auto; position: relative; display: block; }
.nav__logo-img { width: 176px; transition: width .4s var(--ease), opacity .3s var(--ease); }
.nav.is-stuck .nav__logo-img { width: 152px; }
/* Logo swap: white wordmark over the dark masthead, gray wordmark once stuck. */
.nav__logo-img--dark { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.nav.is-stuck .nav__logo-img--light { opacity: 0; }
.nav.is-stuck .nav__logo-img--dark { opacity: 1; }

.nav__links {
  display: flex; gap: 30px; margin-left: auto;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 500;
}
/* Every page opens on a dark masthead, so the transparent nav is always over
   dark. Links start white and flip to ink when the nav gains its light plate. */
.nav__links a { position: relative; color: #fff; text-decoration: none; padding: 5px 0; transition: color .3s var(--ease); }
.nav.is-stuck .nav__links a { color: var(--ink); }
/* Burger: hidden on desktop, shown by the mobile block below. */
.nav__burger {
  display: none; align-items: center; justify-content: center; flex-direction: column;
  gap: 5px; width: 44px; height: 44px; margin-left: auto; padding: 0;
  background: transparent; border: 0; cursor: pointer;
}
.nav__burger-bar {
  display: block; width: 24px; height: 2px; background: #fff;
  transition: transform .3s var(--ease), opacity .2s var(--ease), background .3s var(--ease);
}
.nav.is-stuck .nav__burger-bar { background: var(--ink); }
.nav__burger[aria-expanded="true"] .nav__burger-bar { background: var(--ink); }
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__cta { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.nav__cta::after { background: #fff; }
.nav__cta:hover { color: var(--ink); border-color: #fff; }
.nav.is-stuck .nav__cta { background: var(--red-surface); border-color: var(--red-surface); color: #fff; }
.nav.is-stuck .nav__cta::after { background: var(--ink); }
.nav.is-stuck .nav__cta:hover { color: #fff; border-color: var(--ink); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--red); transform: scaleX(0); transform-origin: right;
  transition: transform .38s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- HERO — full-bleed dark, oversized type, keyhole device ---------- */
.hero {
  position: relative; background: var(--charcoal); color: #B9BCBE;
  padding: clamp(150px, 19vh, 220px) 0 clamp(70px, 9vw, 120px);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 90% at 78% 12%, rgba(237,28,36,.20), transparent 62%),
    radial-gradient(60% 70% at 4% 96%, rgba(237,28,36,.08), transparent 60%);
  pointer-events: none;
}
/* Oversized keyhole from the logo, used as a compositional device. */
.hero__mark {
  position: absolute; right: -7vw; top: 50%; transform: translateY(-50%);
  width: min(58vw, 720px); opacity: .085; color: var(--red);
  pointer-events: none; animation: drift 22s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translateY(-50%) rotate(0deg); }
  50% { transform: translateY(-54%) rotate(-3.5deg); }
}
.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.32fr 0.68fr;
  gap: clamp(30px, 5vw, 76px); align-items: end;
}
.hero h1 { color: #fff; margin-bottom: 30px; }
.hero h1 .line { display: block; overflow: hidden; }
.hero .lede { color: #AFB2B4; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* Photo zone — composed for a real image, marked until one exists. */
.photo {
  position: relative; background: var(--charcoal-2);
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
/* Images fill the composed frame. Swapping a placeholder for a real photo of
   the same name needs no layout change, whatever its native dimensions. */
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* Stock-photo corner marker, so nobody mistakes stock for real photography.
   Scoped to .photo--stock (was .photo, which branded real photos too).
   A real supplied photo simply omits the modifier and the badge disappears. */
.photo--stock::after {
  content: "PLACEHOLDER";
  position: absolute; left: 0; bottom: 0; z-index: 2;
  font-family: var(--sans); font-size: .58rem; font-weight: 700;
  letter-spacing: .18em; color: #fff; background: var(--red-surface);
  padding: 6px 11px;
}
.photo--tall { aspect-ratio: 3 / 4; }
/* For a genuinely portrait photo (9:16 off a phone). Using --tall here would
   crop 25% out of the middle and cut the wall logo off the top. */
.photo--portrait { aspect-ratio: 9 / 16; }
/* Supplied artwork cards are 5:4 with the logo at the top edge and a title plus
   red rule at the bottom. Forcing them into --wide (4:3) centre-crops both, and
   the first attempt clipped the red rule. Match the frame to the art instead. */
.photo--card { aspect-ratio: 5 / 4; }
.photo--wide { aspect-ratio: 4 / 3; }
.photo--light { background: var(--paper-warm); border-color: var(--line); }
.photo__label {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--red);
  line-height: 1.7;
}
.photo--light .photo__label { color: var(--red); }

/* ---------- Marquee ---------- */
.marquee {
  background: var(--red-surface); color: #fff; padding: 21px 0;
  overflow: hidden; white-space: nowrap;
}
.marquee__track { display: inline-flex; gap: 0; animation: slide 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__item {
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.04em; padding: 0 30px; display: inline-flex; align-items: center; gap: 30px;
}
.marquee__item::after { content: ""; width: 7px; height: 7px; background: rgba(255,255,255,.55); }

/* ---------- Stat strip ---------- */
.stats { background: var(--paper); padding: clamp(60px, 8vw, 104px) 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(22px, 3vw, 46px); }
.stat { border-top: 2px solid var(--ink); padding-top: 22px; }
.stat__num {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.045em;
  font-size: clamp(2.6rem, 5.2vw, 4.2rem); color: var(--ink); line-height: .92; display: block;
}
.stat__label { display: block; margin-top: 14px; font-size: 0.92rem; color: var(--gray); max-width: 22ch; }

/* ---------- Section shell ---------- */
.section { padding: clamp(78px, 10vw, 148px) 0; position: relative; }
.section--warm { background: var(--paper-warm); }
.section--white { background: var(--white); }
.section--dark { background: var(--charcoal); color: #AFB2B4; }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

.section__head { max-width: 720px; margin-bottom: clamp(44px, 6vw, 78px); }
.section__head--wide { max-width: 900px; }
/* Centred variant. The wider measure is deliberate: at 22ch these headings broke
   mid-phrase ("handled properly" landing on its own line), which is what Isabel
   flagged. The eyebrow rule has to be re-centred too since it is a flex row. */
.section__head--center {
  max-width: 880px; margin-left: auto; margin-right: auto; text-align: center;
}
.section__head--center .eyebrow { justify-content: center; }

/* ---------- Audience — asymmetric, overlapping, no equal boxes ---------- */
.aud { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 64px); align-items: start; }
.aud__panel { position: relative; }
/* Panels sit level. The old stagger read as one audience ranking above the
   other, which is not the message. */
.aud__list { margin: 26px 0 32px; padding: 0; list-style: none; }
.aud__list li {
  padding: 15px 0 15px 34px; position: relative;
  border-top: 1px solid var(--line); font-size: 1rem; color: var(--body);
}
.aud__list li:last-child { border-bottom: 1px solid var(--line); }
.aud__list li::before {
  content: ""; position: absolute; left: 0; top: 25px;
  width: 18px; height: 2px; background: var(--red);
}
.section--dark .aud__list li { border-color: rgba(255,255,255,.14); color: #AFB2B4; }
.aud__photo { margin-bottom: 30px; }

/* ---------- Services — alternating offset rows, big numerals ---------- */
.svc {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 4vw, 58px); align-items: start;
}
/* Three equal columns, evenly spaced and centred (Isabel, 2026-09-30).
   `.svc__row` is kept below because the Services PAGE still uses the row form. */
.svc__col { text-align: center; }
.svc__col h3 { margin: 0 0 14px; }
.svc__col p { margin: 0; font-size: 1rem; }
.svc__num {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--red);
  line-height: 1; display: block; margin-bottom: 12px;
}

.svc__row {
  display: grid; grid-template-columns: auto 1fr minmax(0, 46ch);
  gap: clamp(22px, 4vw, 62px); align-items: start;
  padding: clamp(34px, 4.5vw, 58px) 0;
  border-top: 1px solid var(--line);
  transition: background .4s var(--ease);
}
.svc__row:last-child { border-bottom: 1px solid var(--line); }
.svc__row:hover { background: var(--white); }
.svc__row .svc__num { margin-bottom: 0; min-width: 2.4ch; }
.svc__row h3 { margin: 0; }
.svc__row p { margin: 0; font-size: 1.02rem; }

/* ---------- Story — full-bleed dark, overlapping quote ---------- */
.story { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(30px, 6vw, 86px); align-items: center; }
.story__quote {
  margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.55rem); line-height: 1.32; color: #fff;
  letter-spacing: -0.012em;
}
/* Opens AND closes. Previously only an opening mark rendered, so the quote
   never visually closed after "not a relationship." */
.story__quote::before,
.story__quote::after {
  color: var(--red); font-size: 1.2em; line-height: 0; vertical-align: -.18em;
}
.story__quote::before { content: "\201C"; margin-right: .03em; }
.story__quote::after  { content: "\201D"; margin-left: .03em; }
.story__body p { margin: 0 0 20px; }

/* ---------- Carousel ---------- */
/* CLIENT REVIEWS — replaced the carousel 2026-09-30 (Isabel: all reviews should
   be seen right away, not hidden behind arrows). CSS columns rather than grid,
   because the reviews run from 30 to 620 characters and columns absorb that
   unevenness instead of producing ragged rows. */
.reviews { columns: 3; column-gap: 30px; }
.review {
  break-inside: avoid; margin: 0 0 30px; padding: 30px 26px 26px;
  background: #fff; border: 1px solid var(--line); text-align: center;
}
.review__quote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(.98rem, 1.15vw, 1.06rem); line-height: 1.6; color: var(--ink);
  margin: 0 0 16px;
}
/* Red opening and closing quote marks, sized up so they read as punctuation
   rather than stray characters at this small type size. */
.review__quote::before,
.review__quote::after {
  color: var(--red); font-size: 1.45em; line-height: 0; vertical-align: -.18em;
}
.review__quote::before { content: "\201C"; margin-right: .04em; }
.review__quote::after  { content: "\201D"; margin-left: .04em; }
.review__stars { margin: 0 0 8px; color: var(--red); font-size: .95rem; letter-spacing: .18em; line-height: 1; }
.review__by { margin: 0; font-family: var(--sans); font-weight: 600; font-size: .88rem; color: var(--gray); }

/* ---------- Empty slots (nothing invented) ---------- */
.slot { position: relative; padding: clamp(40px, 6vw, 76px) 0; }
.slot__tag {
  display: inline-block; font-family: var(--sans); font-size: 0.66rem;
  font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red); border: 1.5px solid var(--red); padding: 6px 14px; margin-bottom: 22px;
}
.slot p { max-width: 54ch; font-size: 1rem; }
.slot--center { text-align: center; }
.slot--center p { margin-left: auto; margin-right: auto; }

/* ---------- Guides preview ---------- */
.guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
/* All three level on one line. The stagger implied a hierarchy between
   realtors, lenders and buyers that is not intended. */
.guides__item { border-top: 2px solid var(--ink); padding-top: 22px; text-align: center; }
.guides__kicker + h4 { margin-top: 0; }
.guides__soon {
  display: inline-block; margin-top: 16px;
  font-family: var(--sans); font-size: .64rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gray); border: 1px solid var(--line); padding: 5px 11px;
}
.guides__kicker {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: 12px;
}
.guides__item h4 { margin-bottom: 8px; }
.guides__item p { font-size: .94rem; margin: 0; }

/* ---------- CTA ---------- */
.cta { background: var(--red-surface); color: #fff; position: relative; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 100% at 80% 0%, rgba(0,0,0,.24), transparent 65%);
}
.cta > .wrap { position: relative; z-index: 2; }
.cta h2 { color: #fff; max-width: 16ch; }
.cta__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 5vw, 70px); align-items: end; }
.cta p { color: #fff; max-width: 46ch; font-size: 1.1rem; }
/* The shared inner-page CTA line runs 62 characters and was orphaning "it." at
   the 46ch measure. Widened so it sits on one line on desktop; text-wrap: pretty
   keeps an orphan from coming back on narrow screens, where 62 characters
   genuinely cannot fit on one line. */
.cta__lead { max-width: 64ch; text-wrap: pretty; }
.cta__phone {
  font-family: var(--sans); font-weight: 700; letter-spacing: -.035em;
  font-size: clamp(2rem, 4.4vw, 3.3rem); color: #fff; text-decoration: none;
  display: block; line-height: 1;
}
.cta__phone:hover { text-decoration: underline; text-underline-offset: 8px; }
.cta__hours { margin-top: 16px; font-size: .95rem; color: rgba(255,255,255,.92); }

/* ---------- Footer ---------- */
.footer { background: var(--charcoal); color: #93969A; padding: clamp(66px, 8vw, 104px) 0 0; font-size: .94rem; }
.footer h3 { color: #fff; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: clamp(30px, 4vw, 56px); }
/* No white plate. The supplied logo is transparent and the light-wordmark
   variant is designed to sit directly on the charcoal footer. */
.footer__logo { width: 210px; }
.footer__note { margin-top: 24px; max-width: 40ch; }
.footer__nap, .footer__hours { margin: 0 0 14px; }
.footer__social a { margin-right: 20px; }
.footer__legal {
  margin-top: clamp(50px, 7vw, 82px); padding-top: 28px; padding-bottom: 38px;
  border-top: 1px solid #34383A; font-size: .82rem; color: #75797C;
}
.footer__legal p { margin: 0 0 10px; max-width: 80ch; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .story, .aud, .cta__grid { grid-template-columns: 1fr; }

  .reviews { columns: 2; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .guides { grid-template-columns: 1fr; }
  .guides__item:nth-child(2), .guides__item:nth-child(3) { margin-top: 0; }
  .svc__row { grid-template-columns: auto 1fr; }
  .svc__row p { grid-column: 2; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  /* MOBILE NAV. The links used to be display:none below 1000px with nothing to
     replace them, so a phone visitor got a logo, a phone number, and no way to
     reach any page. Now they collapse into a panel behind the burger. */
  .nav__burger { display: flex; }
  .nav__links {
    position: fixed; inset: 86px 0 auto; flex-direction: column; gap: 0;
    background: var(--paper-warm); border-bottom: 1px solid var(--line);
    padding: 8px 0 18px; margin: 0; font-size: 1rem;
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    max-height: calc(100vh - 86px); overflow-y: auto;
  }
  .nav__links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  /* Inside the panel the background is always light, so links are always ink. */
  .nav__links a,
  .nav.is-stuck .nav__links a {
    color: var(--ink); padding: 15px 24px; border-bottom: 1px solid var(--line);
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a::after { display: none; }
  .hero__mark { right: -26vw; width: 96vw; opacity: .06; }
}

@media (max-width: 580px) {
  body { font-size: 16px; }
  .stats__grid { grid-template-columns: 1fr; gap: 30px; }
  .footer__grid { grid-template-columns: 1fr; }
  .nav__logo img, .nav.is-stuck .nav__logo img { width: 146px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .svc__row { grid-template-columns: 1fr; gap: 14px; }
  .svc__row p { grid-column: 1; }
  .reviews { columns: 1; }
}

/* =============================================================
   Interior pages
   ============================================================= */

.masthead {
  position: relative; background: var(--charcoal); color: #B9BCBE;
  padding: clamp(140px, 17vh, 200px) 0 clamp(54px, 7vw, 92px); overflow: hidden;
}
.masthead::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 82% 6%, rgba(237,28,36,.20), transparent 62%);
  pointer-events: none;
}
.masthead__inner { position: relative; z-index: 2; max-width: 900px; }
.masthead h1 { color: #fff; font-size: clamp(2.5rem, 6.4vw, 5rem); }
.masthead .lede { color: #AFB2B4; max-width: 52ch; margin-top: 6px; }
.masthead .eyebrow { color: #FF6B70; }
.masthead .eyebrow::before { background: #FF6B70; }

/* ---------- Prose ---------- */
.prose h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1em; }
.prose > .aud__list { margin: 0 0 1.6em; }

/* ---------- Wire-fraud alert ---------- */
.alert { border-left: 4px solid var(--red); background: var(--white); padding: clamp(28px, 4vw, 46px); }
.alert__tag {
  display: inline-block; font-family: var(--sans); font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--red-surface);
  padding: 6px 13px; margin-bottom: 20px;
}
.alert__lead {
  font-family: var(--sans); font-weight: 700; color: var(--ink);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.3; letter-spacing: -.02em; margin: 0 0 16px;
}

/* ---------- FAQ accordion ---------- */
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 26px 46px 26px 0; position: relative;
  font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: clamp(1.02rem, 1.7vw, 1.22rem); letter-spacing: -.018em; line-height: 1.34;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 15px; height: 2px;
  background: var(--red); transition: transform .34s var(--ease);
}
.faq__item summary::before {
  content: ""; position: absolute; right: 12.5px; top: 50%; width: 2px; height: 15px;
  margin-top: -6.5px; background: var(--red); transition: transform .34s var(--ease); transform-origin: center;
}
.faq__item[open] summary::before { transform: scaleY(0); }
.faq__body { padding: 0 0 28px; max-width: 62ch; }
.faq__body p { margin: 0 0 .9em; }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 6vw, 82px); align-items: start; }
.contact__aside { background: var(--paper-warm); padding: clamp(28px, 4vw, 42px); }
.contact__aside h3 {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gray); margin: 34px 0 12px;
}
.contact__aside h3:first-child { margin-top: 0; }
.contact__phone {
  font-family: var(--sans); font-weight: 700; font-size: 1.75rem;
  letter-spacing: -.035em; color: var(--ink); text-decoration: none;
}
.contact__phone:hover { color: var(--red); }
.contact__hours, .contact__nap { margin: 0; font-size: .96rem; }
.contact__warn { margin: 0; font-size: .92rem; border-left: 3px solid var(--red); padding-left: 15px; }

/* ---------- Form ---------- */
.form__row { margin-bottom: 22px; }
.form__row label {
  display: block; font-family: var(--sans); font-weight: 600;
  font-size: .82rem; letter-spacing: .04em; color: var(--ink); margin-bottom: 8px;
}
.form__opt { font-weight: 400; color: var(--gray); letter-spacing: 0; }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form select, .form textarea {
  width: 100%; font-family: var(--text); font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line); padding: 14px 16px;
  transition: border-color .25s var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--red);
}
.form textarea { resize: vertical; }
.form__status { margin: 16px 0 0; font-size: .95rem; color: var(--ink); font-weight: 500; }
.form__note { margin: 20px 0 0; font-size: .86rem; color: var(--gray); max-width: 52ch; }

/* Review-form consent row. The checkbox is required: no permission, no publishing. */
.form__row--check { margin-bottom: 26px; }
.form__check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.form__check input[type="checkbox"] {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--red); cursor: pointer;
}
.form__check span {
  font-family: var(--sans); font-size: .95rem; line-height: 1.5; color: var(--ink);
  font-weight: 400; letter-spacing: 0; text-transform: none; max-width: 48ch;
}

/* "Closed with us? Leave a review." under the reviews. */
.reviews__cta { margin: 38px 0 0; text-align: center; font-size: .95rem; color: var(--gray); }
.reviews__cta a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.reviews__cta a:hover { color: var(--red); }

@media (max-width: 1000px) {
  .contact__grid { grid-template-columns: 1fr; }
  .masthead__inner { max-width: none; }
}

/* Smallest phones (iPhone SE and similar). At 320px the logo plus the phone
   button overflowed the viewport by 26px. The phone number stays — it is the
   primary action for a title company — but both shrink to fit. */
@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .nav__inner { gap: 12px; }
  .nav__logo-img, .nav.is-stuck .nav__logo-img { width: 118px; }
  .nav__cta { padding: 8px 12px; font-size: .74rem; letter-spacing: -.01em; }
}

/* The oversized keyhole is a desktop device. On small phones it was 96vw and
   sat 83px past the right edge, dominating the hero. Scaled back to sit inside. */
@media (max-width: 560px) {
  .hero__mark { right: -14vw; width: 78vw; opacity: .05; }
}


/* ── SELLER NET SHEET ──────────────────────────────────────────────────────
   Two columns on desktop: inputs left, live result right. The result is the
   product, so it gets the visual weight. */
.ns { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.ns__form { margin: 0; }
.ns__result { background: var(--paper-warm); border: 1px solid var(--line); padding: clamp(22px, 3vw, 34px); }
.ns__cap {
  font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red); text-align: left; padding-bottom: 14px;
}
.ns__table { width: 100%; border-collapse: collapse; }
.ns__table td { padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .95rem; }
.ns__note { display: block; font-size: .8rem; color: var(--gray); margin-top: 3px; }
.ns__amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.ns__amt--unknown { color: var(--red); font-style: italic; font-weight: 600; }
.ns__totals { margin: 22px 0 0; }
.ns__totals > div { display: flex; justify-content: space-between; gap: 18px; padding: 7px 0; }
.ns__totals dt { font-family: var(--sans); font-size: .95rem; color: var(--gray); margin: 0; }
.ns__totals dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.ns__net { border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 14px !important; }
.ns__net dt { color: var(--ink) !important; font-weight: 700; }
.ns__net dd { font-size: 1.35rem; font-weight: 700; color: var(--red); }
.ns__warn {
  margin: 18px 0 0; padding: 14px 16px; background: #fff; border-left: 3px solid var(--red);
  font-size: .88rem; line-height: 1.55; color: var(--ink);
}
@media (max-width: 900px) { .ns { grid-template-columns: 1fr; } }


/* ── LEGAL PAGES (privacy policy, and anything else long-form and statutory) ──
   Readable measure, clear heading rhythm. [CONFIRM] notes render as visible
   amber callouts ON PURPOSE, so an unreviewed draft can never be mistaken for
   an approved policy. Delete .legal__note blocks when the answers land. */
.legal { max-width: 72ch; }
.legal h2 {
  font-family: var(--sans); font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 700;
  margin: 46px 0 14px; letter-spacing: -0.01em;
}
.legal h2:first-of-type { margin-top: 8px; }
.legal p, .legal li { font-size: 1rem; line-height: 1.68; color: var(--ink); }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin-bottom: 9px; }
.legal a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.legal__meta {
  font-size: .88rem !important; color: var(--gray) !important; padding-bottom: 18px;
  border-bottom: 1px solid var(--line); margin-bottom: 8px !important;
}
.legal__note {
  background: #FFF8E1; border-left: 3px solid #C9901A; padding: 13px 16px;
  font-size: .88rem !important; line-height: 1.55 !important; color: #5C4507 !important;
}

/* The emphatic GLBA disclosure line. The industry form sets it in all caps;
   small-caps styling keeps the emphasis without shouting, and keeps it
   readable for screen readers, which announce long all-caps runs poorly. */
.legal__statement {
  margin: 30px 0 !important; padding: 18px 20px; background: var(--paper-warm);
  border-left: 3px solid var(--red); font-weight: 600; font-size: 1rem !important;
  line-height: 1.6 !important; color: var(--ink) !important;
}

.legal__cta { margin: 26px 0 8px !important; }


/* ── GUIDE LIBRARY ───────────────────────────────────────────────────────── */
.glib { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 30px; }
.glib__item { border-top: 2px solid var(--ink); padding-top: 18px; }
.glib__kicker {
  display: block; font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: 10px;
}
.glib__item h3 { font-size: 1.22rem; line-height: 1.3; margin: 0 0 10px; }
.glib__item h3 a { color: var(--ink); text-decoration: none; }
.glib__item h3 a:hover { color: var(--red); }
.glib__item p { margin: 0 0 14px; font-size: .95rem; color: var(--gray); line-height: 1.6; }
.glib__meta {
  margin: 0 0 12px !important; font-family: var(--sans); font-size: .78rem !important;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gray) !important;
}
.glib__more, .guides__more {
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--red);
}
.glib__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 38px; }
.glib__filter {
  font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  padding: 9px 17px; border: 1.5px solid var(--line); background: transparent;
  color: var(--ink); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.glib__filter:hover { border-color: var(--ink); }
.glib__filter.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.section__more { margin: 16px 0 0; }
.section__more a { font-family: var(--sans); font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); text-decoration: none; }

/* ── SINGLE GUIDE ────────────────────────────────────────────────────────── */
/* Guide header sits on the shared dark .masthead, so type goes light. */
.guide__head h1 { margin: 10px 0 0; color: #fff; }
.guide__standfirst { margin: 18px 0 0; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: #B9BCBE; line-height: 1.6; max-width: 60ch; }
.guide__meta { margin: 22px 0 0; font-family: var(--sans); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.guide__body { max-width: 68ch; }
.guide__body h2 { font-family: var(--sans); font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; margin: 46px 0 14px; letter-spacing: -0.012em; }
.guide__body p { font-size: 1.05rem; line-height: 1.72; margin: 0 0 20px; }
.guide__body ul { margin: 0 0 22px; padding-left: 22px; }
.guide__body li { font-size: 1.05rem; line-height: 1.7; margin-bottom: 11px; }
.guide__body strong { font-weight: 700; }
.guide__disclaimer {
  margin-top: 46px; padding: 20px 22px; background: var(--paper-warm);
  border-left: 3px solid var(--line);
}
.guide__disclaimer p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--gray); }
.guide__disclaimer a { color: var(--red); }

/* Guide Q&A block. Carries the FAQPage schema, so it has to read as real page
   content rather than an SEO appendage — same type scale as the body. */
.guide__faq { margin-top: 52px; padding-top: 12px; border-top: 1px solid var(--line); }
.guide__faq > h2 {
  font-family: var(--sans); font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700;
  margin: 34px 0 6px; letter-spacing: -0.012em;
}
.guide__qa { padding: 22px 0; border-bottom: 1px solid var(--line); }
.guide__qa:last-child { border-bottom: 0; }
.guide__qa h3 {
  font-family: var(--sans); font-size: 1.04rem; font-weight: 700;
  line-height: 1.4; margin: 0 0 10px; letter-spacing: -0.008em;
}
.guide__qa p { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--gray); }

/* Inline source refs + the Sources block. These carry Isabel's cite-everything
   rule, so they have to look deliberate rather than bolted on. Refs stay small
   enough not to break the reading line. */
.ref { font-size: .62em; line-height: 0; vertical-align: super; margin-left: 1px; }
.ref a {
  color: var(--red); text-decoration: none; font-family: var(--sans); font-weight: 700;
  padding: 0 1px;
}
.ref a:hover { text-decoration: underline; }

.guide__sources { margin-top: 52px; padding-top: 12px; border-top: 1px solid var(--line); }
.guide__sources > h2 {
  font-family: var(--sans); font-size: clamp(1.15rem, 1.7vw, 1.35rem); font-weight: 700;
  margin: 30px 0 10px; letter-spacing: -0.01em;
}
.guide__sources-note { font-size: .92rem !important; line-height: 1.6; color: var(--gray); margin: 0 0 18px !important; }
.guide__sources-list { margin: 0; padding-left: 22px; }
.guide__sources-list li {
  font-size: .95rem !important; line-height: 1.55; margin-bottom: 14px;
  /* Long statute URLs must not push the page sideways on a phone. */
  overflow-wrap: anywhere;
}
.guide__sources-list a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); }
.guide__sources-list a:hover { color: var(--red); }
/* Target highlight so clicking a ref visibly lands on the right source. */
.guide__sources-list li:target { background: var(--paper-warm); outline: 2px solid var(--red); outline-offset: 4px; }
.guide__src-pub, .guide__src-date {
  display: block; font-family: var(--sans); font-size: .76rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gray); margin-top: 3px;
}
/* Pull-quote for verbatim statutory or constitutional text. Quoting the real
   words is the cheapest guard against paraphrasing a law into something it does
   not say, so this needs to look like a deliberate part of the page. */
.guide__quote {
  margin: 26px 0 28px; padding: 20px 24px; background: var(--paper-warm);
  border-left: 3px solid var(--red);
}
.guide__quote p { margin: 0 0 10px !important; font-size: 1.04rem !important; line-height: 1.68; }
.guide__quote cite {
  display: block; font-family: var(--sans); font-size: .76rem; font-style: normal;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gray);
}
.guide__disclaimer--index { margin-top: 44px; }
.guide__disclaimer strong { color: var(--ink); }


/* ── WHOLE-CARD CLICK TARGETS ────────────────────────────────────────────────
   "Read →" looked like a button but was a bare <span>, so only the title was
   clickable (Isabel, 2026-09-30). Rather than add a second link to the same
   URL — which makes screen readers announce every card twice — the title's
   anchor is stretched over the whole card. One link, whole card clickable,
   the arrow stays decorative. */
.glib__item, .guides__item { position: relative; }
.glib__item h3 a::after,
.guides__item h4 a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.glib__item:hover h3 a, .guides__item:hover h4 a { color: var(--red); }
.glib__item:hover .glib__more,
.guides__item:hover .guides__more { text-decoration: underline; text-underline-offset: 4px; }
/* Keyboard users get the same visible affordance as mouse users. */
.glib__item h3 a:focus-visible::after,
.guides__item h4 a:focus-visible::after {
  outline: 2px solid var(--red); outline-offset: 6px;
}

/* Spanish service line. Red so it reads as a deliberate statement rather than
   boilerplate, and carries lang="es" so screen readers switch pronunciation. */
.footer__es { margin: 10px 0 0; font-family: var(--sans); font-size: .9rem; font-weight: 600; color: var(--red); }
.contact__es { margin: 12px 0 0; font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--red); }

/* ── LANGUAGE TOGGLE ─────────────────────────────────────────────────────────
   Isabel's instruction 2026-10-01: the Spanish option must be far more visible
   than the footer line it started as. A bordered control next to the phone CTA
   reads as a working switch rather than another nav link, which is the point —
   in a majority-Hispanic market this is a service signal, not navigation. */
.nav__lang {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  padding: 8px 14px; border: 1.5px solid rgba(255,255,255,.45); color: #fff;
  margin-left: 18px; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nav__lang:hover { background: #fff; color: var(--ink); border-color: #fff; }
.nav__lang-globe { font-size: .6em; color: var(--red); }
.nav.is-stuck .nav__lang { border-color: var(--ink); color: var(--ink); }
.nav.is-stuck .nav__lang:hover { background: var(--ink); color: #fff; }
.nav.is-stuck .nav__lang-globe { color: var(--red); }

@media (max-width: 1000px) {
  /* On mobile it sits beside the burger, before the phone button, so it is
     visible without opening the menu. */
  .nav__lang { margin-left: auto; margin-right: 10px; padding: 7px 11px; font-size: .74rem; }
  .nav__burger { margin-left: 0; order: 3; }
}
@media (max-width: 420px) {
  .nav__lang { padding: 6px 9px; font-size: .68rem; letter-spacing: .03em; }
}