/* ==========================================================================
   Benjamin Tyler Kolaczkowski — Business Broker with Bridge Point
   Hand-written stylesheet. No framework, no build step.
   --------------------------------------------------------------------------
   COMPLIANCE NOTE (Rule 61J2-10.025(2), F.A.C.):
   The sales associate's personal name must be NO LARGER than the name of the
   registered brokerage. The paired-name lockup below (.lockup) enforces this
   in type: the brokerage line is always set at a font-size equal to or
   greater than the associate's name line. Do not change .lockup__name to a
   larger size than .lockup__brokerage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Color — restrained: one deep navy, one warm paper, one muted brass */
  --navy-900: #0d1b2f;
  --navy-800: #12243d;
  --navy-700: #1a3454;
  --navy-600: #24466b;

  --paper: #faf8f4;
  --paper-alt: #f4f1ea;
  --white: #ffffff;

  --ink: #19212e;
  --ink-soft: #414d5e;
  --ink-muted: #667284;

  /* Darkened from #8f6a35 so that 11px uppercase brass text clears WCAG AA
     (4.78:1) against --paper-alt. Do not lighten. */
  --brass: #87642f;
  --brass-light: #b38c52;
  --brass-pale: #cbae7c;
  /* Brass for links and accents sitting ON navy. --brass itself is deliberately
     dark so it passes AA on paper, which makes it almost invisible on navy —
     never use --brass for text or borders on a dark background, use this. */
  --brass-on-dark: #d9c4a0;

  --rule: #e3ddd2;
  --rule-strong: #cfc7b8;
  --rule-dark: rgba(255, 255, 255, 0.16);

  /* Typography */
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale */
  --fs-eyebrow: 0.6875rem;
  --fs-small: 0.8125rem;
  --fs-meta: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-body-lg: 1.1875rem;
  --fs-lead: clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);
  --fs-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h2: clamp(1.625rem, 1.3rem + 1.5vw, 2.375rem);
  --fs-h1: clamp(2.125rem, 1.5rem + 3vw, 3.5rem);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;

  --container: 1180px;
  --measure: 68ch;
  --radius: 3px;

  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
}

.service-area {
  margin: 1rem 0 1.25rem;
  color: var(--ink);
}

.btn--call {
  background: #fff;
  color: var(--ink);
  border: 1px solid currentColor;
}

.btn--call:hover,
.btn--call:focus-visible {
  background: var(--ink);
  color: #fff;
}

.call-number {
  display: block;
  font-size: .78em;
  letter-spacing: .04em;
}

.direct-phone {
  display: inline-block;
  font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--navy-900);
  margin: 0 0 var(--sp-4);
  line-height: 1.18;
  letter-spacing: -0.011em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: -0.016em;
}
h3 {
  font-size: var(--fs-h3);
}
h4 {
  font-size: var(--fs-h4);
}

p {
  margin: 0 0 var(--sp-4);
  max-width: var(--measure);
}

a {
  color: var(--navy-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--brass);
}

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

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--sp-8) 0;
}

strong {
  font-weight: 600;
  color: var(--navy-900);
}

ul,
ol {
  margin: 0 0 var(--sp-4);
  padding-left: 1.15rem;
  max-width: var(--measure);
}

li {
  margin-bottom: var(--sp-2);
}

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

::selection {
  background: rgba(143, 106, 53, 0.18);
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.container--narrow {
  max-width: 820px;
}

/* The credential strip's cells carry their own padding and are separated by
   1px hairlines, so the container's side padding would leave the outer rules
   floating away from the section edge. Flush is correct here. */
.container--flush {
  padding-inline: 0;
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.section--paper-alt {
  background: var(--paper-alt);
}

.section--navy {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.82);
}

/* One step lighter than --navy-900, used to separate two navy sections that
   would otherwise merge into a single slab. The buttons and link colors from
   the .section--navy rules still apply, because this is a modifier on it. */
.section--navy-alt {
  background: var(--navy-800);
}

.section--navy h2,
.section--navy h3,
.section--navy h4 {
  color: var(--white);
}

/* Fine print on navy — scope notes, disclaimers, "no obligation" reassurance.
   Deliberately quieter than body copy but still AA at --fs-small. Do not drop
   the alpha below 0.55 or it fails contrast. */
/* `strong` is globally set to --navy-900, which makes it INVISIBLE on a navy
   background — 1:1 contrast, not merely low. This bit the "employed by Bridge
   Point" emphasis in the hero and the firm section, where the single most
   important sentence on the page silently disappeared. Any new dark section
   containing <strong> relies on this rule. Do not remove it. */
.section--navy strong,
.hero strong,
.page-head strong {
  color: var(--white);
}

/* The affiliation badge sets its own brass emphasis and must win over the
   white rule above, so it is restated here at equal specificity but later. */
.hero .affil strong,
.section--navy .affil strong,
.page-head .affil strong {
  color: var(--brass-on-dark);
}

.section--navy .note-faint {
  color: rgba(255, 255, 255, 0.55);
  max-width: 70ch;
}

.section--navy a {
  color: var(--brass-on-dark);
}

.section--navy a:hover {
  color: var(--white);
}

.section + .section:not([class*="--"]) {
  border-top: 1px solid var(--rule);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy-900);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-small);
  text-decoration: none;
}

.skip-link:focus {
  left: var(--sp-4);
  top: var(--sp-4);
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. Type utilities
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-strong);
  max-width: 4rem;
}

.eyebrow--plain::after {
  display: none;
}

.section--navy .eyebrow {
  color: var(--brass-pale);
}

.section--navy .eyebrow::after {
  background: var(--rule-dark);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-soft);
  font-family: var(--font-serif);
  max-width: 34em;
}

.section--navy .lead {
  color: rgba(255, 255, 255, 0.8);
}

.prose > * + h2 {
  margin-top: var(--sp-8);
}

.prose > * + h3 {
  margin-top: var(--sp-6);
}

.prose p,
.prose li {
  color: var(--ink-soft);
}

/* No .prose block currently sits on navy, but this rule is more specific than
   .section--navy's inherited color, so if one ever does it would render dark
   slate on dark navy. Guard it now. Same trap as `.section-head p` below. */
.section--navy .prose p,
.section--navy .prose li {
  color: rgba(255, 255, 255, 0.82);
}

.muted {
  color: var(--ink-muted);
}

.small {
  font-size: var(--fs-small);
  line-height: 1.6;
}

.section-head {
  max-width: 40em;
  margin-bottom: var(--sp-8);
}

.section-head p {
  color: var(--ink-soft);
  font-size: var(--fs-body-lg);
}

/* --ink-soft is a dark slate, so the rule above would otherwise render this
   paragraph nearly invisibly against navy (2:1). Inheriting from
   .section--navy is not enough — that rule is less specific than
   `.section-head p`, so the color has to be restated here. */
.section--navy .section-head p,
.hero .section-head p {
  color: rgba(255, 255, 255, 0.82);
}

/* --------------------------------------------------------------------------
   5. Compliance name lockup
   --------------------------------------------------------------------------
   Rule 61J2-10.025(2): associate's personal name no larger than the
   registered brokerage name. Brokerage line is set at 1em; the associate
   name line is set at 1em also, never above.
   -------------------------------------------------------------------------- */

.lockup {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  color: inherit;
  line-height: 1.25;
}

.lockup__name {
  font-family: var(--font-serif);
  font-size: 1rem; /* never larger than .lockup__brokerage */
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--navy-900);
}

.lockup__brokerage {
  font-family: var(--font-sans);
  font-size: 1rem; /* equal to .lockup__name — satisfies "no larger than" */
  font-weight: 500;
  color: var(--navy-700);
  letter-spacing: -0.003em;
}

.lockup__role {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

.lockup:hover .lockup__name,
.lockup:hover .lockup__brokerage {
  color: var(--brass);
}

.site-footer .lockup__name {
  color: var(--white);
}

.site-footer .lockup__brokerage {
  color: rgba(255, 255, 255, 0.88);
}

.site-footer .lockup__role {
  color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   6. License bar (top strip)
   -------------------------------------------------------------------------- */

.license-bar {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
}

.license-bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  padding-block: 0.6rem;
}

.license-bar__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
}

.license-bar strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

.license-bar a {
  color: #cbae7c;
  text-decoration: none;
  border-bottom: 1px solid rgba(203, 174, 124, 0.4);
}

.license-bar a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* --------------------------------------------------------------------------
   7. Header / navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, 0.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.site-nav a {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: 0.005em;
  padding-block: var(--sp-1);
  border-bottom: 1px solid transparent;
}

.site-nav a:hover {
  color: var(--navy-900);
  border-bottom-color: var(--brass);
}

.site-nav a[aria-current="page"] {
  color: var(--navy-900);
  border-bottom-color: var(--brass);
}

/* The nav CTA is a button, not a nav link. The .site-nav a rules above are more
   specific than .btn--primary, so restate the button colors here or the label
   renders slate-on-navy (2:1 contrast). */
.site-nav a.btn--primary,
.site-nav a.btn--primary:hover,
.site-nav a.btn--primary[aria-current="page"] {
  color: var(--white);
  border-bottom-color: transparent;
}

.site-nav a.btn--primary[aria-current="page"] {
  background: var(--navy-700);
  border-color: var(--navy-700);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--navy-900);
  cursor: pointer;
  align-items: center;
  gap: var(--sp-2);
}

.nav-toggle:hover {
  border-color: var(--brass);
}

.nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 14px;
}

.nav-toggle__bars span {
  display: block;
  height: 1.5px;
  background: var(--navy-900);
  border-radius: 1px;
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 40px -22px rgba(13, 27, 47, 0.35);
    padding: var(--sp-2) clamp(1.25rem, 4vw, 3rem) var(--sp-5);
    display: none;
  }

  .site-nav[data-open="true"] {
    display: flex;
  }

  .site-nav a {
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--rule);
    font-size: var(--fs-body);
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    border-bottom-color: var(--rule);
    color: var(--brass);
  }

  .site-nav .btn {
    margin-top: var(--sp-4);
    border-bottom: 0;
    justify-content: center;
  }

  .site-nav .btn:hover {
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.012em;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease,
    border-color 0.16s ease, transform 0.16s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--navy-900);
  color: var(--white);
  border-color: var(--navy-900);
}

.btn--primary:hover {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--white);
}

.btn--outline {
  background: transparent;
  color: var(--navy-900);
  border-color: var(--rule-strong);
}

.btn--outline:hover {
  border-color: var(--navy-900);
  color: var(--navy-900);
  background: rgba(13, 27, 47, 0.03);
}

/* Dark-background contexts: invert the buttons. Any new dark section MUST be
   added to these selectors, or its buttons will render navy-on-navy. */
.section--navy .btn--primary,
.hero .btn--primary {
  background: var(--white);
  color: var(--navy-900);
  border-color: var(--white);
}

.section--navy .btn--primary:hover,
.hero .btn--primary:hover {
  background: #ede4d3;
  border-color: #ede4d3;
  color: var(--navy-900);
}

.section--navy .btn--outline,
.hero .btn--outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.section--navy .btn--outline:hover,
.hero .btn--outline:hover {
  border-color: var(--white);
  color: var(--white);
  background: rgba(255, 255, 255, 0.07);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  margin-top: var(--sp-6);
}

.arrow {
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.16s ease;
}

.btn:hover .arrow {
  transform: translateX(3px);
}

/* Quiet inline link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--navy-800);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
}

.link-arrow:hover {
  color: var(--brass);
}

/* On navy, both the label and its underline need the light brass. Without the
   border-bottom override the underline stays --brass and all but disappears. */
.section--navy .link-arrow,
.hero .link-arrow {
  color: var(--brass-on-dark);
  border-bottom-color: var(--brass-on-dark);
}

.section--navy .link-arrow:hover,
.hero .link-arrow:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}

.link-arrow:hover .arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse 70% 60% at 78% 12%,
      rgba(36, 70, 107, 0.55),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(13, 27, 47, 0) 55%, rgba(8, 17, 30, 0.85) 100%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 2rem + 7vw, 6.5rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

.hero h1 {
  color: var(--white);
  margin-bottom: var(--sp-5);
}

.hero h1 em {
  font-style: italic;
  color: var(--brass-on-dark);
}

.hero__lead {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-serif);
  line-height: 1.5;
  max-width: 32em;
}

.hero .eyebrow {
  color: #cbae7c;
}

.hero .eyebrow::after {
  background: rgba(255, 255, 255, 0.22);
}

.hero__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.58);
  max-width: 34em;
}

/* Portrait card */
.portrait {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.portrait__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  background: var(--navy-700);
  display: block;
}

.portrait__meta {
  padding: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: var(--sp-4);
}

.portrait__row {
  display: grid;
  gap: 0.1rem;
}

.portrait__label {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 600;
  color: #cbae7c;
}

.portrait__value {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--white);
  line-height: 1.4;
}

.portrait__value span {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.62);
  margin-top: 0.15rem;
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .portrait {
    max-width: 380px;
  }
}

/* --------------------------------------------------------------------------
   10. Credential strip
   -------------------------------------------------------------------------- */

.creds {
  background: var(--navy-800);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.creds__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.creds__item {
  background: var(--navy-800);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  text-decoration: none;
}

.creds__num {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #cbae7c;
}

.creds__label {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
}

.creds__value {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  color: var(--white);
  line-height: 1.3;
}

a.creds__item:hover .creds__value {
  color: var(--brass-on-dark);
}

.creds__verify {
  font-size: var(--fs-small);
  color: #cbae7c;
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
}

@media (max-width: 760px) {
  .creds__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   11. Generic content grids
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.split--lead {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

/* The About page headshot. Named .headshot, NOT .portrait — .portrait is
   already taken by the hero's portrait card (see "Portrait card" above) and
   reusing it silently overrode that card's background.
   The 4:5 ratio plus object-fit means Ben can drop in an image of any size
   without the layout shifting; see the asset spec sheet for the crop.
   object-position sits above center so the subject's eyes land on the upper
   third rather than the middle of the frame. */
.headshot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-alt);
}

@media (max-width: 880px) {
  .split,
  .split--lead {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
}

/* Fact list — label/value pairs separated by hairlines */
.facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.5fr) minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.facts dt {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--ink-muted);
}

.facts dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--navy-900);
}

.section--navy .facts,
.section--navy .facts > div {
  border-color: var(--rule-dark);
}

.section--navy .facts dt {
  color: rgba(255, 255, 255, 0.55);
}

.section--navy .facts dd {
  color: var(--white);
}

@media (max-width: 520px) {
  .facts > div {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }
}

/* --------------------------------------------------------------------------
   29. Founder-led editorial homepage
   -------------------------------------------------------------------------- */

.home-page {
  --paper: #f5f0e7;
  --paper-alt: #ebe3d6;
  --navy-900: #172536;
  --navy-800: #203248;
  --brass: #8b593a;
  --brass-on-dark: #e2b995;
  --rule: #d7cdbf;
}

.home-page .home-redundant {
  display: none;
}

.home-page .hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 14%, rgba(167, 100, 61, .11), transparent 28rem),
    var(--paper);
}

.home-page .hero .container {
  padding-block: clamp(3.25rem, 7vw, 7.5rem) clamp(3.75rem, 7vw, 6.5rem);
}

.home-page .hero__grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .92fr);
  gap: clamp(3rem, 7vw, 7.5rem);
  align-items: center;
}

.home-page .hero h1 {
  max-width: 13ch;
  font-size: clamp(3rem, 5.4vw, 5.7rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.home-page .hero h1 em {
  color: #a26342;
  font-weight: 400;
}

.home-page .eyebrow {
  color: #8b593a;
  letter-spacing: .16em;
}

.home-page .service-area {
  max-width: 36rem;
  margin-block: 1.5rem 1rem;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem);
  font-weight: 400;
}

.home-page .affil {
  max-width: 39rem;
  margin-bottom: 1.75rem;
  border-left: 2px solid #b36f49;
  padding-left: 1rem;
}

.home-page .hero .btn-row {
  gap: .75rem;
}

.home-page .hero .btn {
  border-radius: 0;
}

.home-page .hero__lead {
  max-width: 41rem;
  margin-top: 2.25rem;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1rem + .55vw, 1.45rem);
  line-height: 1.52;
}

.home-page .hero__note {
  margin-top: 1rem;
}

.home-page .portrait {
  position: relative;
  margin: 0;
  transform: rotate(1.2deg);
}

.home-page .portrait::before {
  content: "";
  position: absolute;
  inset: -1.15rem 1.5rem 1.5rem -1.15rem;
  border: 1px solid #c3ae99;
  pointer-events: none;
}

.home-page .portrait__img {
  position: relative;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(.78) contrast(.96) sepia(.08);
}

.home-page .portrait__meta {
  position: relative;
  margin: -3.25rem 1.25rem 0 -1.25rem;
  padding: 1.15rem 1.25rem;
  background: #fffaf2;
  box-shadow: 0 18px 40px rgba(38, 28, 20, .15);
}

.home-page .portrait__row {
  grid-template-columns: 7rem 1fr;
}

.home-page .creds {
  background: #fffaf2;
  border-block: 1px solid var(--rule);
}

.home-page .creds__grid {
  gap: 0;
}

.home-page .creds__item {
  padding: 2rem clamp(1.25rem, 3vw, 2.5rem);
}

.home-page .creds__item + .creds__item {
  border-left: 1px solid var(--rule);
}

.home-page .split--lead {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 9vw, 8rem);
}

.home-page .facts {
  margin-top: 2.25rem;
}

.home-page .facts > div {
  grid-template-columns: 6rem 1fr;
  padding-block: 1.15rem;
}

.home-page .section--navy .firm__grid {
  gap: 0;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
}

.home-page .firm__cell {
  border: 0;
  border-bottom: 1px solid var(--rule-dark);
  border-radius: 0;
  padding: 1.5rem 0;
  background: transparent;
}

.home-page .firm__cell:last-child {
  border-bottom: 0;
}

.home-page .firm__cell .card__tag {
  display: none;
}

.home-page .section--navy-alt {
  background: #253c51;
}

.home-page .pullquote blockquote p {
  color: #fff9ef;
}

@media (max-width: 880px) {
  .home-page .hero__grid {
    grid-template-columns: 1fr;
    gap: 3.25rem;
  }

  .home-page .hero h1 {
    max-width: 11ch;
    font-size: clamp(3rem, 12vw, 5.2rem);
  }

  .home-page .portrait {
    width: min(100%, 42rem);
    transform: rotate(.5deg);
  }

  .home-page .portrait__img {
    aspect-ratio: 16 / 10;
  }

  .home-page .creds__grid {
    grid-template-columns: 1fr;
  }

  .home-page .creds__item + .creds__item {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

@media (max-width: 520px) {
  .home-page .hero .container {
    padding-block: 2.75rem 3.75rem;
  }

  .home-page .hero h1 {
    font-size: clamp(2.8rem, 14vw, 4.15rem);
  }

  .home-page .hero .btn-row {
    display: grid;
  }

  .home-page .hero .btn {
    width: 100%;
    justify-content: center;
  }

  .home-page .portrait::before {
    inset: -.65rem .75rem .75rem -.65rem;
  }

  .home-page .portrait__meta {
    margin: -1.75rem .75rem 0 -.5rem;
  }

  .home-page .portrait__row {
    grid-template-columns: 1fr;
    gap: .2rem;
  }
}

/* Three-up / four-up card grid */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.card {
  background: var(--paper);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.section--paper-alt .card {
  background: var(--paper-alt);
}

.card__tag {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

.card h3 {
  margin: 0;
  font-size: var(--fs-h4);
}

/* Card questions run to one or two lines depending on the width. Reserve two
   lines so the body copy starts on the same baseline in every card of a row. */
.cards--questions .card h3 {
  min-height: calc(2 * 1.25em);
}

@media (max-width: 560px) {
  .cards--questions .card h3 {
    min-height: 0;
  }
}

.card p {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: none;
}

/* Plain (borderless) three-up */
.cards--plain {
  background: transparent;
  border: 0;
  gap: clamp(1.75rem, 3.5vw, 3rem);
}

.cards--plain .card {
  padding: 0;
  border-top: 2px solid var(--navy-900);
  padding-top: var(--sp-4);
  background: transparent;
}

/* --------------------------------------------------------------------------
   12. Numbered steps
   -------------------------------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  /* The base `ul, ol` rule caps lists at the 68ch prose measure. This is a
     layout grid, not prose, so it must span the full container. */
  max-width: none;
}

.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 0.55fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
  margin: 0;
  align-items: start;
}

.steps > li::before {
  content: "0" counter(step);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brass);
  padding-top: 0.35rem;
}

.steps h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
}

.steps p {
  margin: 0;
  color: var(--ink-soft);
  max-width: none;
}

.steps__aside {
  font-size: var(--fs-small);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 500;
  padding-top: 0.35rem;
  line-height: 1.7;
}

.section--navy .steps,
.section--navy .steps > li {
  border-color: var(--rule-dark);
}

.section--navy .steps p {
  color: rgba(255, 255, 255, 0.75);
}

.section--navy .steps__aside {
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 880px) {
  .steps > li {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }

  .steps__aside {
    grid-column: 2;
    padding-top: var(--sp-2);
  }
}

/* --------------------------------------------------------------------------
   13. Checklist (buyer readiness)
   -------------------------------------------------------------------------- */

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  max-width: none;
}

.checklist li {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--rule);
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  align-items: start;
}

.checklist li::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--brass);
  border-radius: 50%;
  margin-top: 0.55em;
}

.checklist strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy-900);
  margin-bottom: 0.15rem;
}

/* --------------------------------------------------------------------------
   14. Pull quote
   -------------------------------------------------------------------------- */

.pullquote {
  border: 0;
  margin: 0;
  padding: 0;
}

.pullquote blockquote {
  margin: 0 0 var(--sp-5);
  padding: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 1.1rem + 1.3vw, 2rem);
  line-height: 1.32;
  letter-spacing: -0.014em;
  color: var(--white);
  text-wrap: balance;
}

.pullquote blockquote p {
  margin: 0;
  max-width: 26em;
}

.pullquote figcaption {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

.stack-word {
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 2;
}

/* --------------------------------------------------------------------------
   15. Sector tags
   -------------------------------------------------------------------------- */

.tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  max-width: none;
}

.tags li {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  padding: 0.4rem 0.95rem;
  background: var(--white);
}

.section--paper-alt .tags li {
  background: var(--white);
}

/* --------------------------------------------------------------------------
   16. FAQ (details/summary — no JS required)
   -------------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--rule);
  max-width: 52em;
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  cursor: pointer;
  padding-block: var(--sp-5);
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  color: var(--navy-900);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--brass);
  flex: none;
  line-height: 1;
  transition: transform 0.18s ease;
}

.faq details[open] summary::after {
  content: "–";
}

.faq summary:hover {
  color: var(--brass);
}

.faq details > div {
  padding-bottom: var(--sp-5);
}

.faq details p {
  margin: 0;
  color: var(--ink-soft);
  max-width: 46em;
}

.faq details p + p {
  margin-top: var(--sp-3);
}

/* --------------------------------------------------------------------------
   17. Notice / callout boxes
   -------------------------------------------------------------------------- */

.notice {
  border-left: 2px solid var(--brass);
  background: var(--paper-alt);
  padding: var(--sp-5);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.notice strong {
  display: block;
  color: var(--navy-900);
  margin-bottom: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
}

.notice p {
  margin: 0;
  max-width: none;
}

.notice--white {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--brass);
}

/* Numbered "what happens next" */
.next-steps {
  counter-reset: ns;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-4);
}

.next-steps li {
  counter-increment: ns;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--sp-3);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  margin: 0;
}

.next-steps li::before {
  content: counter(ns);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--brass);
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */

.form-shell {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 24px 48px -34px rgba(13, 27, 47, 0.22);
}

/* The form's heading is an h2 for document outline purposes, but visually it
   is a panel label sitting beside the page's real h1 — so it takes h3 size and
   sits tight to the "fields marked * are required" line beneath it. */
.form-shell > h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-2);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  /* Without this, a field whose neighbour carries a hint line stretches its
     own input to match the taller row, so paired inputs end up different
     heights. Keep every field packed to the top of its row. */
  align-items: start;
}

.field {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

.field--full {
  grid-column: 1 / -1;
}

label {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy-900);
  letter-spacing: 0.02em;
}

.req {
  color: var(--brass);
  font-weight: 600;
}

.optional {
  color: var(--ink-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  width: 100%;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23667284' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(36, 70, 107, 0.13);
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--white) inset;
}

.hint {
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

/* Consent checkbox */
.consent {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: var(--sp-3);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-5);
}

.consent input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--navy-800);
  flex: none;
}

.consent label {
  font-weight: 400;
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  line-height: 1.55;
  letter-spacing: 0;
}

/* Honeypot — visually hidden but reachable by bots */
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.form-actions {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-1);
}

.form-actions .btn {
  width: 100%;
  padding-block: 0.95rem;
}

@media (min-width: 600px) {
  .form-actions .btn {
    width: auto;
    justify-self: start;
    padding-inline: 2.25rem;
  }
}

@media (max-width: 620px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* --------------------------------------------------------------------------
   19. Page header (interior pages)
   -------------------------------------------------------------------------- */

.page-head {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.82);
}

.page-head .container {
  padding-block: clamp(2.75rem, 2rem + 5vw, 5rem);
}

.page-head h1 {
  color: var(--white);
  max-width: 24em;
}

.page-head .eyebrow {
  color: #cbae7c;
}

.page-head .eyebrow::after {
  background: rgba(255, 255, 255, 0.22);
}

.page-head p {
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 34em;
}

/* --------------------------------------------------------------------------
   20. CTA band
   -------------------------------------------------------------------------- */

.cta-band .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.cta-band h2 {
  margin-bottom: var(--sp-3);
}

.cta-band p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 780px) {
  .cta-band .container {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-meta);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer .container {
  padding-block: var(--sp-9) var(--sp-6);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--rule-dark);
}

.site-footer h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--sp-4);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
}

.site-footer li {
  margin: 0;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--brass-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-footer p {
  color: rgba(255, 255, 255, 0.68);
}

/* Point-of-contact block — brokerage name sits directly below contact info
   per Rule 61J2-10.025(3)(a) */
.contact-block {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-meta);
  line-height: 1.6;
}

.contact-block a {
  color: var(--brass-on-dark);
}

.contact-block .brokerage-name {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

.contact-block .brokerage-addr {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--fs-small);
}

.contact-block .contact-phone {
  font-weight: 700;
}

.contact-block .service-area-footer {
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-small);
}

.brokerage-mark {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  background: rgba(255, 255, 255, 0.03);
}

.brokerage-mark img {
  max-width: 190px;
}

.brokerage-mark .small {
  color: rgba(255, 255, 255, 0.66);
}

.legal {
  padding-top: var(--sp-6);
  display: grid;
  gap: var(--sp-5);
}

.legal p {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.58);
  max-width: 90ch;
  margin: 0;
}

.legal__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--sp-5);
  font-size: var(--fs-small);
}

.legal__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

@media (max-width: 880px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   22. Legal document pages
   -------------------------------------------------------------------------- */

.doc {
  max-width: 72ch;
}

.doc h2 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}

.doc h2:first-of-type {
  margin-top: var(--sp-6);
}

.doc h3 {
  font-size: var(--fs-h4);
  margin-top: var(--sp-6);
}

.doc p,
.doc li {
  color: var(--ink-soft);
}

.doc__updated {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   23. Thank-you page
   -------------------------------------------------------------------------- */

.confirm {
  display: grid;
  gap: var(--sp-5);
  max-width: 44em;
}

.confirm__mark {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brass);
  font-size: 1.35rem;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   24. Scroll reveal
   -------------------------------------------------------------------------- */

/* The hidden starting state is scoped to .js-reveal, which main.js adds to
   <html> only once it has confirmed it can observe and un-hide these elements.
   Without that gate, a JS error or a blocked script would leave every
   .reveal section permanently at opacity 0 — i.e. a blank page. Content must
   be visible by default; the animation is the enhancement. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   25. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .nav-toggle,
  .cta-band,
  .hero::before {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .hero,
  .page-head,
  .section--navy,
  .site-footer,
  .creds {
    background: #fff !important;
    color: #000 !important;
  }

  .hero h1,
  .page-head h1,
  .section--navy h2 {
    color: #000 !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   18. Journey — the rebuilt step-by-step process
   --------------------------------------------------------------------------
   Replaces the old `.steps` table-ish layout, which reviewers found "blended".
   The fix is three things working together:
     1. A real timeline rail with numbered badges, so the eye has a track to
        follow instead of six equal-weight rows.
     2. A bolded serif takeaway per step (`.journey__take`), sized between h3
        and body. A skimmer reads only the number, the heading, and this line.
     3. Much more vertical breathing room than a hairline-separated list.
   The --rail and --dot custom properties keep the badge and the connector line
   agreeing with each other at every breakpoint. Change them together or the
   rail will run off-centre through the badges.
   -------------------------------------------------------------------------- */

.journey {
  --dot: clamp(2.5rem, 5vw, 3.25rem);
  --rail-pad: clamp(2rem, 4vw, 3.25rem);
  counter-reset: jstep;
  list-style: none;
  margin: 0;
  padding: 0;
  /* The base `ul, ol` rule caps lists at the 68ch prose measure. This is a
     layout grid, not prose, so it has to span the full container. */
  max-width: none;
}

.journey > li {
  counter-increment: jstep;
  position: relative;
  margin: 0;
  padding-left: calc(var(--dot) + clamp(1rem, 2.5vw, 2rem));
  padding-block: var(--rail-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.4fr);
  gap: clamp(0.75rem, 3vw, 3rem);
  align-items: start;
}

.journey > li:first-child { padding-top: 0; }
.journey > li:last-child { padding-bottom: 0; }

/* The numbered badge. Absolutely positioned so it sits in the rail gutter
   rather than participating in the content grid. */
.journey > li::before {
  content: counter(jstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--rail-pad);
  width: var(--dot);
  height: var(--dot);
  display: grid;
  place-items: center;
  border: 1px solid var(--brass-pale);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brass);
  z-index: 1;
}

.journey > li:first-child::before { top: 0; }

/* The connector rail. Drawn per-item rather than once on the <ol> so the first
   and last segments can be trimmed to start and stop at the badge centre. */
.journey > li::after {
  content: "";
  position: absolute;
  left: calc(var(--dot) / 2);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule-strong);
}

.journey > li:first-child::after { top: calc(var(--dot) / 2); }
.journey > li:last-child::after { bottom: auto; height: calc(var(--rail-pad) + var(--dot) / 2); }
.journey > li:only-child::after { display: none; }

.section--paper-alt .journey > li::before { background: var(--paper-alt); }

.journey__step {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--sp-2);
}

.journey h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h3);
}

/* The scannable line. Deliberately larger and darker than the body copy that
   follows it — this is the sentence a phone skimmer is meant to read. */
.journey__take {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy-900);
  margin: 0 0 var(--sp-3);
  max-width: 46ch;
}

.journey__body {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-meta);
  line-height: 1.7;
  max-width: 62ch;
}

.section--navy .journey > li::before {
  background: var(--navy-900);
  border-color: rgba(217, 196, 160, 0.45);
  color: var(--brass-on-dark);
}
.section--navy .journey > li::after { background: var(--rule-dark); }
.section--navy .journey__take { color: var(--white); }
.section--navy .journey__body { color: rgba(255, 255, 255, 0.75); }
.section--navy .journey__step { color: rgba(255, 255, 255, 0.55); }

@media (max-width: 900px) {
  /* Below this width the aside chips have nowhere useful to sit beside the
     copy, so the whole item becomes a single column and they fall underneath. */
  .journey > li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }
}

/* Chips — the short keyword tags beside each step */
.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  max-width: none;
}

.chips li {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  padding: 0.4rem 0.7rem;
  line-height: 1;
}

.section--navy .chips li {
  color: rgba(255, 255, 255, 0.62);
  border-color: var(--rule-dark);
}

/* --------------------------------------------------------------------------
   19. Arc — the compact "whole process at a glance" strip
   --------------------------------------------------------------------------
   The home-page companion to `.journey`. Same six steps, stripped to a numeral,
   a title, and a five-word outcome, so the shape of a sale is legible in a few
   seconds of scrolling without reading a paragraph.
   -------------------------------------------------------------------------- */

.arc {
  counter-reset: arcstep;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  /* Exactly three columns, NOT auto-fit. There are six steps, so 3x2 always
     fills the grid completely. auto-fit resolved to four columns at 1440px and
     left the last two cells of row two empty — which reads as a broken slab of
     background colour, because the 1px gaps expose the container behind. If the
     number of steps ever changes, change this number to a divisor of it. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

@media (max-width: 900px) {
  .arc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .arc { grid-template-columns: minmax(0, 1fr); }
}

.arc > li {
  counter-increment: arcstep;
  margin: 0;
  background: var(--paper);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

.section--paper-alt .arc > li { background: var(--paper-alt); }

.arc > li::before {
  content: counter(arcstep, decimal-leading-zero);
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.375rem);
  line-height: 1;
  color: var(--brass);
  opacity: 0.6;
}

.arc__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--navy-900);
  line-height: 1.3;
  margin: 0;
}

.arc__out {
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
  max-width: none;
}

/* --------------------------------------------------------------------------
   20. Firm — the Bridge Point brokerage section
   -------------------------------------------------------------------------- */

.firm {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 940px) {
  .firm { grid-template-columns: minmax(0, 1fr); }
}

.firm__logo {
  display: block;
  width: 210px;
  max-width: 60%;
  height: auto;
  margin-bottom: var(--sp-5);
}

.firm__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
}

.firm__cell {
  background: var(--navy-900);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

.section--navy-alt .firm__cell { background: var(--navy-800); }

/* .card__tag is brass-on-paper by default. Reused inside the firm cells, which
   sit on navy, it dropped to 3.21:1 — this is the --brass trap documented at the
   top of the file. Small uppercase text needs 4.5:1, so it takes the dark token. */
.section--navy .card__tag {
  color: var(--brass-on-dark);
}

.firm__cell h3 {
  margin: 0;
  font-size: var(--fs-h4);
}

.firm__cell p {
  margin: 0;
  font-size: var(--fs-meta);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  max-width: none;
}

/* A row of real outbound links to the brokerage's own sites. */
.linkset {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  max-width: none;
}

.linkset li { margin: 0; }

.linkset a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
}

.linkset .linkset__host {
  font-size: var(--fs-small);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.section--navy .linkset .linkset__host { color: rgba(255, 255, 255, 0.5); }

/* --------------------------------------------------------------------------
   21. Affiliation framing — "with Bridge Point"
   --------------------------------------------------------------------------
   Rule 61J2-10.025(2) caps the associate's name at the brokerage name's size.
   The connective words ("Business Broker with") are set SMALLER than both, so
   adding them cannot breach the rule — but they make the employment
   relationship read as employment rather than as co-equal branding.
   -------------------------------------------------------------------------- */

.lockup__with {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.1rem;
}

.site-header .lockup__with { color: var(--ink-muted); }
.site-footer .lockup__with { color: rgba(255, 255, 255, 0.55); }

/* The hero affiliation badge. */
.affil {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  border: 1px solid var(--rule-dark);
  border-radius: 100px;
  padding: 0.5rem 1rem;
  margin-bottom: var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

.affil strong {
  font-weight: 600;
  color: var(--brass-on-dark);
  letter-spacing: 0.04em;
}

.affil__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass-on-dark);
  flex: none;
}

/* Light-background variant, used on the About page. */
.affil--paper {
  border-color: var(--rule-strong);
  color: var(--ink-soft);
}
.affil--paper strong { color: var(--brass); }
.affil--paper .affil__dot { background: var(--brass); }

/* --------------------------------------------------------------------------
   22. Polish — typography detail, anchor offsets, motion, touch targets
   -------------------------------------------------------------------------- */

/* The site header is sticky, so an in-page anchor would otherwise land with its
   heading hidden underneath it. Offset every jump target by the header height
   plus a little air. */
:target,
[id]:not(body) {
  scroll-margin-top: calc(4.5rem + var(--sp-6));
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Balanced headings avoid the single-orphan-word last line that fluid type
   produces constantly at tablet widths. text-wrap:balance is capped by browsers
   at a handful of lines, which is exactly the range headings live in. */
h1, h2, h3,
.journey__take,
.arc__title {
  text-wrap: balance;
}

/* Body copy gets `pretty` instead: it prevents orphans without the performance
   cost of balancing a long paragraph. Degrades silently where unsupported. */
p, li, dd {
  text-wrap: pretty;
}

/* Motion. The reveal is defined in the accessibility section; this adds a small
   downward travel so sections rise into place rather than just fading, and eases
   it with a curve that decelerates rather than the default ease. */
.js-reveal .reveal {
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.js-reveal .reveal.is-visible {
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal,
  .js-reveal .reveal.is-visible {
    transform: none;
    transition: none;
  }
}

/* Touch targets. Anything tappable gets to the 44px minimum on coarse pointers
   without changing how it looks on a mouse-driven screen. */
@media (pointer: coarse) {
  .site-nav a,
  .linkset a,
  .legal__links a,
  .faq summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .linkset a { display: inline-flex; }
}

/* Mobile refinements. Below 560px the fluid scale has bottomed out, so these are
   fixed adjustments rather than clamps. */
@media (max-width: 560px) {
  .affil {
    width: 100%;
    border-radius: var(--radius);
    align-items: flex-start;
  }

  /* The dot separator reads as a bullet artefact once the badge wraps to two
     lines on a narrow screen, so it is dropped rather than left floating. */
  .affil .affil__dot { display: none; }

  .btn-row .btn { width: 100%; justify-content: center; }

  .chips li { font-size: 0.625rem; padding: 0.35rem 0.6rem; }
}

/* ==========================================================================
   UTILITIES — MUST STAY LAST
   ==========================================================================
   These are single-class selectors, so they tie on specificity with component
   classes like .steps and .facts. Ties are broken by source order, which is
   why this block lives at the bottom of the file. Moving it higher silently
   breaks it: .steps{margin:0} beat .mb-7 and collapsed a 40px gap on the
   contact page before this was moved down here.
   ========================================================================== */

.flush {
  margin: 0;
}

.mt-4 {
  margin-top: var(--sp-4);
}

.mt-6 {
  margin-top: var(--sp-6);
}

.mt-8 {
  margin-top: var(--sp-8);
}

.mb-2 {
  margin-bottom: var(--sp-2);
}

.mb-6 {
  margin-bottom: var(--sp-6);
}

.mb-7 {
  margin-bottom: var(--sp-7);
}

/* ==========================================================================
   26. LAYERING & DEPTH  (added Aug 2026)
   --------------------------------------------------------------------------
   Brief: the page "feels soft, like one long page. Needs layers."

   The diagnosis was not that the design was wrong — it was that every section
   sat on the SAME PLANE. Cream background, 1px hairline boxes, identical
   vertical padding, one container width. Nothing was in front of anything.

   The fix here is a three-plane model, applied consistently:

     PLANE 0  recessed  — .section--sunken, an inset shelf the eye reads as
                          BEHIND the base page surface
     PLANE 1  base      — .section, plain paper
     PLANE 2  raised    — cards, panels, the form, the creds bar: white
                          surfaces with real layered shadow, sitting ON TOP

   Depth comes from the shadow scale below, which follows the umbra /
   penumbra / ambient model (a tight contact shadow to define the edge, a
   mid-range shadow for the body, and a wide faint one for ambient bounce).
   A single box-shadow cannot produce a convincing edge; three cheap ones can.

   COMPLIANCE: nothing in this section changes any type size in the .lockup,
   the license bar, or the footer attribution blocks. Depth is applied to
   containers, never to the name/brokerage type itself. See §5.
   ========================================================================== */

:root {
  /* Elevation scale. Opacities stay in the 0.04–0.14 band: above that the
     shadow reads as a drop-shadow effect rather than as depth, which is
     exactly the "template" look this site must avoid. */
  --e1:
    0 1px 1px rgba(13, 27, 47, 0.05),
    0 2px 4px -1px rgba(13, 27, 47, 0.05);
  --e2:
    0 1px 2px rgba(13, 27, 47, 0.06),
    0 4px 8px -2px rgba(13, 27, 47, 0.06),
    0 10px 20px -8px rgba(13, 27, 47, 0.08);
  --e3:
    0 1px 2px rgba(13, 27, 47, 0.07),
    0 8px 16px -4px rgba(13, 27, 47, 0.08),
    0 24px 44px -16px rgba(13, 27, 47, 0.13);

  /* Shadows for elements sitting on the navy slabs. Black-on-navy is muddy,
     so these lean on a darker navy instead. */
  --e2-dark:
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 6px 14px -4px rgba(0, 0, 0, 0.28);

  /* Hairline that reads as an edge rather than a border. Paired with a
     shadow it defines the top lip of a raised surface. */
  --edge: 1px solid rgba(19, 33, 54, 0.07);
  --edge-dark: 1px solid rgba(255, 255, 255, 0.09);

  --radius-panel: 5px;
}

/* --------------------------------------------------------------------------
   26.1 Section planes
   -------------------------------------------------------------------------- */

/* The recessed shelf. The inset shadows on the top and bottom edges are what
   sell it — the section reads as milled out of the page rather than painted
   onto it. Kept asymmetric (top darker than bottom) because light comes from
   above; a symmetric inset looks like a mistake. */
.section--paper-alt {
  box-shadow:
    inset 0 9px 14px -12px rgba(13, 27, 47, 0.30),
    inset 0 -7px 12px -12px rgba(13, 27, 47, 0.16);
}

/* Dark slabs get a top light-catch so the boundary with the section above is
   a crisp edge, not a mushy join. */
.section--navy {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* The hairline the base stylesheet draws between two consecutive plain
   sections is doing the job of a divider on its own. With the plane model in
   place it is redundant and reads as a seam, so it goes. */
.section + .section:not([class*="--"]) {
  border-top: 0;
}

/* --------------------------------------------------------------------------
   26.2 Raised surfaces
   --------------------------------------------------------------------------
   The old .cards grid used a 1px gap over a rule-coloured background to fake
   hairline dividers. That is the flattest possible treatment. Replaced with
   genuinely separated white panels.
   `:not(.cards--plain)` keeps the borderless three-up variant intact — it is
   a deliberately unboxed layout and must not gain a panel.
   -------------------------------------------------------------------------- */

.cards:not(.cards--plain) {
  background: transparent;
  border: 0;
  gap: clamp(0.875rem, 1.8vw, 1.375rem);
}

.cards:not(.cards--plain) > .card,
.section--paper-alt .cards:not(.cards--plain) > .card {
  background: var(--white);
  border: var(--edge);
  border-radius: var(--radius-panel);
  box-shadow: var(--e2);
}

/* Same treatment for the "arc" strip, which used the identical 1px-gap trick. */
.arc {
  background: transparent;
  border: 0;
  gap: clamp(0.875rem, 1.8vw, 1.375rem);
}

.arc > li,
.section--paper-alt .arc > li {
  background: var(--white);
  border: var(--edge);
  border-radius: var(--radius-panel);
  box-shadow: var(--e2);
}

/* Callouts lift off the page instead of being a tinted rectangle. */
.notice {
  background: var(--white);
  border: var(--edge);
  border-left: 2px solid var(--brass);
  border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
  box-shadow: var(--e1);
}

.notice--white {
  box-shadow: var(--e2);
}

/* The lead form is the most important panel on the site, so it sits highest. */
.form-shell {
  border: var(--edge);
  border-radius: var(--radius-panel);
  box-shadow: var(--e3);
}

/* The FAQ becomes a single raised panel rather than a stack of hairlines,
   which stops it reading as more undifferentiated page. */
.faq {
  background: var(--white);
  border: var(--edge);
  border-top: var(--edge);
  border-radius: var(--radius-panel);
  box-shadow: var(--e2);
  padding-inline: clamp(1.1rem, 2.5vw, 1.9rem);
}

.faq details:last-child {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   26.3 The credential bar as an overlapping panel
   --------------------------------------------------------------------------
   This is the one true "overlap" on the site: the credential strip is pulled
   up so it straddles the boundary between the navy hero and the content
   below it. Because it is the block carrying the licence numbers and the
   employing brokerage, giving it the most spatial prominence on the page is
   both a design decision and a compliance-friendly one.

   Deliberately NOT done on small screens — see 26.6. At 390px the strip is a
   tall single column and an overlap would just crush the hero.
   -------------------------------------------------------------------------- */

@media (min-width: 761px) {
  .creds {
    background: transparent;
    border-top: 0;
    position: relative;
    z-index: 3;
    margin-top: calc(-1 * clamp(2rem, 4vw, 3.5rem));
    margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
  }

  .creds .container--flush {
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }

  .creds__grid {
    border-radius: var(--radius-panel);
    overflow: hidden;
    border: var(--edge-dark);
    box-shadow:
      0 2px 4px rgba(13, 27, 47, 0.16),
      0 12px 24px -8px rgba(13, 27, 47, 0.24),
      0 32px 56px -24px rgba(13, 27, 47, 0.28);
  }
}

/* --------------------------------------------------------------------------
   26.4 Typographic scale contrast
   --------------------------------------------------------------------------
   Section headings were only ~1.5x body at the small end, which is not enough
   jump for the eye to lock onto structure while scrolling. Widened at the
   bottom of the range (mobile) more than the top, because that is where the
   monotony was worst.
   -------------------------------------------------------------------------- */

:root {
  --fs-h2: clamp(1.875rem, 1.35rem + 2.1vw, 2.625rem);
  --fs-h3: clamp(1.3125rem, 1.1rem + 0.75vw, 1.5625rem);
}

/* Eyebrows carry more of the structural load now that sections are planes,
   so they get a touch more presence. */
.eyebrow {
  letter-spacing: 0.155em;
}

/* --------------------------------------------------------------------------
   26.5 Condensing header
   --------------------------------------------------------------------------
   Shrinks its padding and gains a shadow once the page has scrolled, so the
   header reads as a layer floating over the content rather than part of it.
   The .lockup type sizes are untouched — only the padding around them moves,
   so 61J2-10.025(2) is unaffected at every scroll position.
   -------------------------------------------------------------------------- */

.site-header {
  transition: padding 0.22s ease, box-shadow 0.22s ease,
    background-color 0.22s ease;
}

.site-header .container {
  transition: padding-block 0.22s ease;
}

.site-header[data-condensed="true"] {
  background: rgba(250, 248, 244, 0.97);
  box-shadow:
    0 1px 0 rgba(19, 33, 54, 0.06),
    0 6px 16px -8px rgba(13, 27, 47, 0.20);
}

.site-header[data-condensed="true"] .container {
  padding-block: var(--sp-2);
}

/* The role line is the first thing to go when space is tight; the name and
   the brokerage name never condense away. */
.site-header[data-condensed="true"] .lockup {
  gap: 0;
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .container {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   26.6 Mobile — rhythm, reach, and the sticky CTA
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  :root {
    /* Tighter, more deliberate vertical rhythm than a scaled-down desktop.
       The home page was 11,780px tall at 390px; this is the single biggest
       lever on that number. */
    --section-y: clamp(2.5rem, 1.5rem + 4.5vw, 3.5rem);
  }

  .section--tight {
    padding-block: clamp(2rem, 1.25rem + 3vw, 2.75rem);
  }

  /* Panels tighten up too — desktop card padding is luxurious at 390px and
     costs several screens of scroll across the page. */
  .cards:not(.cards--plain) > .card,
  .arc > li {
    padding: 1.15rem 1.15rem 1.25rem;
  }

  .journey {
    --rail-pad: 1.5rem;
  }

  /* Section heads sat too far off their content once the sections tightened. */
  .section-head {
    margin-bottom: var(--sp-5);
  }

  /* The recessed shelf needs a shallower inset at this width or it looks like
     a gradient rather than an edge. */
  .section--paper-alt {
    box-shadow:
      inset 0 7px 10px -10px rgba(13, 27, 47, 0.28),
      inset 0 -6px 9px -10px rgba(13, 27, 47, 0.14);
  }
}

/* ---- Tap targets -------------------------------------------------------
   44px minimum on every interactive control. Applied via min-height plus
   centred flex rather than padding, so the visual weight of the type does
   not change — only the hit area. Inline links inside running prose are
   deliberately excluded: padding them out would wreck the line rhythm, and
   they are not primary targets. */

@media (pointer: coarse), (max-width: 860px) {
  .nav-toggle {
    min-height: 44px;
    padding-inline: 0.85rem;
  }

  .site-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .link-arrow {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .license-bar a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Footer link lists and the footer contact links. */
  .site-footer .linkset a,
  .site-footer .legal a,
  .contact-block a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .faq summary {
    min-height: 44px;
  }

  .btn {
    min-height: 48px;
  }
}

/* ---- iOS zoom guard ----------------------------------------------------
   Any form control under 16px makes mobile Safari zoom the viewport on
   focus, which then leaves the page horizontally scrolled. The text inputs
   were already 16px; the consent checkbox was inheriting 13.3px. */

@media (max-width: 860px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* The consent checkbox also needs a real hit area — it is the control that
   gates the whole form. */
.consent input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

/* --------------------------------------------------------------------------
   26.7 Sticky mobile CTA
   --------------------------------------------------------------------------
   Facebook traffic lands on a phone. The primary action needs to be reachable
   without hunting or a long scroll back to the hero.

   COMPLIANCE NOTE — 61J2-10.025(3)(a): the registered brokerage name is
   rendered inside the bar, immediately below the action. The rule defines
   "point of contact information" as mailing/street address, email, telephone
   or fax; a button that navigates to an inquiry page is arguably not itself
   point-of-contact information, but carrying the brokerage name here is the
   conservative reading and costs one line. Do not remove that line.

   The bar is hidden on the contact and thank-you pages (see [data-no-cta]),
   because on those pages the form or the confirmation IS the content and a
   floating duplicate would be noise.
   -------------------------------------------------------------------------- */

.mobile-cta {
  display: none;
}

@media (max-width: 860px) {
  .mobile-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: rgba(13, 27, 47, 0.97);
    backdrop-filter: saturate(140%) blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 -6px 20px -8px rgba(13, 27, 47, 0.45);
    padding: 0.55rem clamp(1rem, 4vw, 1.5rem)
      calc(0.55rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform 0.26s ease;
  }

  .mobile-cta[data-visible="true"] {
    transform: translateY(0);
  }

  .mobile-cta .btn {
    width: 100%;
    min-height: 46px;
    justify-content: center;
    margin: 0;
  }

  /* Brokerage attribution. Small, but never below the 13px floor at which the
     line stops being legible on a phone, and always high enough contrast to
     clear AA on the navy bar. */
  .mobile-cta__brokerage {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.35;
    text-align: center;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.005em;
  }

  /* Keep the footer clear of the bar. */
  body {
    padding-bottom: 5.5rem;
  }

  body[data-no-cta="true"] {
    padding-bottom: 0;
  }

  body[data-no-cta="true"] .mobile-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-cta {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   26.8 Reveal refinement
   --------------------------------------------------------------------------
   The existing reveal moved elements 14px. Reduced and slowed slightly so it
   reads as settling rather than sliding — the difference between "considered"
   and "animated". Reduced-motion handling is unchanged and still lives in §24.
   -------------------------------------------------------------------------- */

.js-reveal .reveal:not(.is-visible) {
  transform: translateY(10px);
}

.js-reveal .reveal {
  transition: opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   27. REFINEMENTS after first render pass
   ========================================================================== */

/* --------------------------------------------------------------------------
   27.1 Making the sunken shelf actually read
   --------------------------------------------------------------------------
   Measured contrast between --paper (#faf8f4) and --paper-alt (#f4f1ea) is
   1.063:1. That is not a perceptible boundary — it is the single biggest
   reason the page read as one undifferentiated column.

   The obvious fix is to darken --paper-alt. I did not do that. The brass
   eyebrow colour is pinned at #87642f specifically because it clears WCAG AA
   at 4.78:1 against --paper-alt at 11px uppercase (see the token comment in
   §1). Darkening the shelf to a genuinely visible tone drops that to ~4.3:1
   and fails. Trading a verified accessibility margin for a background tint is
   a bad trade.

   So the boundary is drawn with geometry instead of hue: a defined top edge
   plus an inset shadow. Edges read at any tonal difference; fills do not.
   -------------------------------------------------------------------------- */

.section--paper-alt {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  box-shadow:
    inset 0 11px 16px -13px rgba(13, 27, 47, 0.34),
    inset 0 -8px 13px -13px rgba(13, 27, 47, 0.18);
}

/* --------------------------------------------------------------------------
   27.2 Credential strip on small screens
   --------------------------------------------------------------------------
   Below 761px the overlap is off (it would crush the hero), but the strip was
   still rendering as a flat navy block with hairline dividers — the same
   flatness the rest of this work removes. Here the three items become
   discrete raised tiles on the navy, so the licence numbers and the employing
   brokerage read as three distinct facts rather than one paragraph.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .creds {
    background: var(--navy-900);
    padding-block: var(--sp-5);
  }

  .creds .container--flush {
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }

  .creds__grid {
    background: transparent;
    gap: 0.6rem;
  }

  .creds__item {
    background: var(--navy-700);
    border: var(--edge-dark);
    border-radius: var(--radius-panel);
    box-shadow: var(--e2-dark);
    padding: 1rem 1.1rem 1.1rem;
  }
}

/* --------------------------------------------------------------------------
   27.3 Sticky CTA sizing
   --------------------------------------------------------------------------
   First pass came out at 107px tall on a 844px screen — 12.7% of the viewport
   permanently occluded, which is too much rent for a secondary affordance.
   Trimmed to ~92px. The brokerage line still wraps to two lines at 390px and
   that is fine; it must stay legible rather than fit on one.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .mobile-cta {
    padding: 0.5rem clamp(1rem, 4vw, 1.5rem)
      calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }

  .mobile-cta .btn {
    min-height: 44px;
  }

  .mobile-cta__brokerage {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    line-height: 1.3;
  }

  body {
    padding-bottom: 6.25rem;
  }
}

/* --------------------------------------------------------------------------
   27.4 Consent checkbox hit area
   --------------------------------------------------------------------------
   The input itself stays at its natural 18px so it looks like a checkbox, but
   the label wrapping it becomes the 44px target. This is the control that
   gates the whole lead form; it must not be fiddly on a phone.
   -------------------------------------------------------------------------- */

.consent {
  min-height: 44px;
  padding-block: var(--sp-2);
}

.consent label,
label.consent {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   27.5 Footer density on mobile
   --------------------------------------------------------------------------
   The footer measured 1,375px at 390px — 1.6 full screens of scrolling after
   the content has ended. Tightened the gaps only.

   NOT touched: the brokerage mark, the address, the licence numbers, and both
   compliance disclaimer paragraphs. Those keep their sizes exactly. Only the
   space between blocks moves.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .footer-grid {
    gap: var(--sp-5);
    padding-bottom: var(--sp-6);
  }

  /* The padding lives on the container, not on .site-footer itself. */
  .site-footer .container {
    padding-block: var(--sp-7) var(--sp-5);
  }

  .legal {
    margin-top: var(--sp-5);
  }

  /* The 44px tap-target floor makes each footer link its own row, which is
     correct for reach but adds height. Pull the list gaps in to pay for it. */
  .site-footer .linkset {
    gap: 0;
  }
}

/* --------------------------------------------------------------------------
   27.6 Point-of-contact attribution sizing
   --------------------------------------------------------------------------
   61J2-10.025(3)(a) requires the registered brokerage name to sit adjacent to
   (or immediately above/below) the point-of-contact information. In the footer
   that point of contact is the email address, and the brokerage name directly
   beneath it was rendering at 14px — the smallest it appears anywhere that it
   is doing actual regulatory work.

   The rule itself sets no minimum size, but this is the load-bearing instance
   on all seven pages, so it goes to 16px. Raising the BROKERAGE name is always
   safe under 61J2-10.025(2), which only constrains the associate's name to be
   "no larger than" the brokerage's — increasing the brokerage side can only
   widen that margin, never narrow it.
   -------------------------------------------------------------------------- */

.contact-block .brokerage-name {
  font-size: 1rem;
  line-height: 1.45;
}

/* The sticky bar's attribution was the one sub-13px brokerage mention on the
   site and it was newly introduced by this pass, so it comes back up to the
   13px floor the rest of the site's fine print already uses. Nothing on the
   site is now smaller than it was before this work. */
@media (max-width: 860px) {
  .mobile-cta__brokerage {
    font-size: 0.8125rem;
    line-height: 1.28;
  }
}

/* ==========================================================================
   28. INTERACTION & CRAFT (added Aug 2026)
   --------------------------------------------------------------------------
   The layering pass gave the page depth. This pass gives it response: the
   difference between a page you read and a page you use.

   Three rules held throughout:
     1. Nothing here is required for the page to work. Every affordance is a
        refinement of markup that already functions with JavaScript disabled.
     2. Hover is gated behind `hover: hover`. A touch device that fakes hover
        leaves the state stuck on after the finger lifts, which reads as a bug.
     3. Motion is opt-out at the source, not decorated with an override. Every
        transform/transition in this section is either inside a
        `prefers-reduced-motion: no-preference` query or explicitly unset at
        the end of the section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   28.1 Interaction hygiene
   -------------------------------------------------------------------------- */

/* Removes the 300ms synthetic-click delay on touch without disabling
   pinch-zoom (which `touch-action: none` would, and which would be an
   accessibility regression). */
a,
button,
summary,
label,
.chooser__option,
input[type="checkbox"],
input[type="radio"],
select {
  touch-action: manipulation;
}

/* Safari/Chrome on iOS paint a grey block over the whole tap target. We draw
   our own press state below, which is more precise and matches the palette. */
a,
button,
summary,
.chooser__option {
  -webkit-tap-highlight-color: rgba(19, 33, 54, 0.06);
}

/* Anchor targets must clear the sticky header. Pure CSS, so it also governs
   the browser's own fragment navigation on load — no scroll-jacking script. */
html {
  scroll-padding-top: calc(var(--header-h, 5.5rem) + 1rem);
}

/* --------------------------------------------------------------------------
   28.2 Focus, made visible everywhere
   --------------------------------------------------------------------------
   The base ring is brass on paper. Brass is deliberately dark (see the token
   note in section 1) so that it passes AA on paper — which makes it nearly
   invisible on navy. Dark surfaces therefore get a pale ring instead.
   -------------------------------------------------------------------------- */

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

.hero :focus-visible,
.section--navy :focus-visible,
.site-footer :focus-visible,
.mobile-cta :focus-visible,
.firm :focus-visible {
  outline-color: #f0e4cd;
}

/* A focused control inside a scrolled region should never be clipped by the
   3px offset. */
:focus-visible {
  scroll-margin-block: 2rem;
}

/* --------------------------------------------------------------------------
   28.3 Press and hover states
   --------------------------------------------------------------------------
   Buttons already had colour transitions. What was missing was the physical
   half: a button that lifts under the cursor and returns under the finger.
   -------------------------------------------------------------------------- */

.btn {
  will-change: auto;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn {
    transition: background-color 0.16s ease, color 0.16s ease,
      border-color 0.16s ease, box-shadow 0.2s ease, transform 0.16s ease;
  }

  .btn--primary:hover {
    box-shadow: var(--e2);
    transform: translateY(-1px);
  }
}

/* Press is NOT gated on hover — a finger presses too, and the feedback is the
   whole point on touch. It is gated on reduced motion, since it moves. */
@media (prefers-reduced-motion: no-preference) {
  .btn:active {
    transform: translateY(1px);
    box-shadow: none;
    transition-duration: 0.04s;
  }
}

/* Reduced-motion users still get press feedback — just as a tone change. */
@media (prefers-reduced-motion: reduce) {
  .btn--primary:active {
    filter: brightness(0.92);
  }
}

/* Cards: raise on pointer, and mark the card the keyboard is inside. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card {
    transition: box-shadow 0.22s ease, transform 0.22s ease,
      border-color 0.22s ease;
  }

  .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--e2);
  }
}

.card:focus-within {
  box-shadow: var(--e2);
}

/* The six-step grid. Its cells are not links, so they do not get a pointer
   affordance — a raised, clickable-looking panel that does nothing is worse
   than a flat one. What they get instead is legibility on approach: the step
   numeral resolves from ghosted to full as the cursor passes. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .arc > li::before {
    transition: opacity 0.25s ease, color 0.25s ease;
  }

  .arc > li:hover::before {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   28.4 The intent chooser
   --------------------------------------------------------------------------
   Two presentations of one idea.

   Off the contact page it is a list of ordinary links carrying `?intent=`.
   That is the entire mechanism — it needs no script, it is crawlable, it is
   shareable, and middle-click opens it in a tab like any other link.

   On the contact page it is a radio group at the head of the form. Same four
   choices, same values, now a submitted field. With JavaScript disabled it is
   a plain required radio group; with JavaScript it also rewrites the timing
   question and reveals a short description of what happens next.

   COMPLIANCE: no option and no response text states, implies, or approximates
   an opinion of value. The third option is about the conversation, not an
   output — see the copy in contact.html. Nothing here contradicts the
   valuation disclaimer in the footer.
   -------------------------------------------------------------------------- */

.chooser {
  margin: 0 0 var(--sp-5);
  padding: 0;
  border: 0;
  min-width: 0; /* fieldset default min-content width breaks grid children */
}

.chooser__legend {
  display: block;
  padding: 0;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

.section--navy .chooser__legend,
.hero .chooser__legend {
  color: var(--brass-on-dark);
}

.chooser__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chooser__grid > li {
  margin: 0;
}

@media (max-width: 560px) {
  .chooser__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.chooser__option {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.2rem;
  /* 64px floor clears the 44px minimum with room for two lines of text. */
  min-height: 64px;
  height: 100%;
  padding: 0.8rem 2.25rem 0.85rem 0.95rem;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-panel);
  box-shadow: var(--e1);
  text-decoration: none;
  cursor: pointer;
}

.chooser__label {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--navy-900);
  line-height: 1.3;
}

.chooser__note {
  font-size: var(--fs-small);
  color: var(--ink-muted);
  line-height: 1.4;
}

/* The chevron. Sized and positioned by the same rhythm as .link-arrow so the
   two read as one family. */
.chooser__option::after {
  content: "→";
  position: absolute;
  right: 0.95rem;
  top: 0.85rem;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--brass);
  opacity: 0.55;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .chooser__option {
    transition: border-color 0.18s ease, box-shadow 0.2s ease,
      transform 0.18s ease, background-color 0.18s ease;
  }

  .chooser__option::after {
    transition: transform 0.18s ease, opacity 0.18s ease;
  }

  a.chooser__option:hover {
    border-color: var(--brass-light);
    box-shadow: var(--e2);
    transform: translateY(-1px);
  }

  a.chooser__option:hover::after {
    transform: translateX(3px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .chooser__option:active {
    transform: translateY(1px);
    box-shadow: var(--e1);
    transition-duration: 0.04s;
  }
}

.chooser__option:focus-within,
a.chooser__option:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* --- On the navy CTA band --------------------------------------------- */

.section--navy .chooser__option,
.hero .chooser__option {
  background: rgba(255, 255, 255, 0.055);
  border: var(--edge-dark);
  box-shadow: var(--e2-dark);
}

.section--navy .chooser__label,
.hero .chooser__label {
  color: #ffffff;
}

/* rgba(255,255,255,.72) on --navy-900 measures 8.9:1 — comfortably AA at this
   size. Do not drop below .66 here. */
.section--navy .chooser__note,
.hero .chooser__note {
  color: rgba(255, 255, 255, 0.72);
}

.section--navy .chooser__option::after,
.hero .chooser__option::after {
  color: var(--brass-on-dark);
  opacity: 0.75;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .section--navy a.chooser__option:hover,
  .hero a.chooser__option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(217, 196, 160, 0.5);
  }
}

.section--navy .chooser__option:focus-within,
.section--navy a.chooser__option:focus-visible,
.hero a.chooser__option:focus-visible {
  outline-color: #f0e4cd;
}

/* --- Radio presentation, contact page --------------------------------- */

/* The input stays in the layout and stays focusable; it is the *painted*
   control that is replaced, by the ring drawn on ::before below. Using
   `display: none` or `visibility: hidden` would drop it out of the tab order
   and out of the accessibility tree. */
.chooser__option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

label.chooser__option {
  padding-left: 2.6rem;
}

label.chooser__option::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 1.05rem;
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--white);
}

label.chooser__option::after {
  content: "";
  right: auto;
  left: calc(0.95rem + 0.3rem);
  top: calc(1.05rem + 0.3rem);
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--brass);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  label.chooser__option::before,
  label.chooser__option::after {
    transition: opacity 0.15s ease, border-color 0.15s ease,
      box-shadow 0.15s ease, transform 0.15s ease;
  }
  label.chooser__option::after {
    transform: scale(0.4);
  }
}

.chooser__option input[type="radio"]:checked ~ .chooser__label {
  color: var(--navy-900);
}

label.chooser__option:has(input:checked) {
  border-color: var(--brass);
  background: #fffdf9;
  box-shadow: var(--e2), inset 3px 0 0 -1px var(--brass);
}

label.chooser__option:has(input:checked)::before {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(135, 100, 47, 0.11);
}

label.chooser__option:has(input:checked)::after {
  opacity: 1;
  transform: scale(1);
}

/* Fallback for engines without :has(). The sibling form is exact but cannot
   reach the label itself, so the checked state shows on the ring only. */
.chooser__option input[type="radio"]:checked ~ .chooser__label::before {
  content: "";
}

/* --- The response panel ------------------------------------------------ */

/* Injected by main.js, so it is display:none until it has content — a panel
   that reserves empty height is the layout shift we are trying to avoid. */
.chooser__response {
  margin: var(--sp-4) 0 0;
  padding: 0.9rem 1rem;
  border-left: 2px solid var(--brass);
  background: var(--paper-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
}

.chooser__response:empty {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .chooser__response {
    animation: chooser-in 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
}

@keyframes chooser-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   28.5 Accordion motion
   --------------------------------------------------------------------------
   <details> does not animate natively in every engine we support, and the
   `::details-content` transition is too new to rely on. main.js drives the
   height with the Web Animations API and sets [data-animating] for the
   duration; everything here is presentation for that state, plus the marker
   rotation, which is pure CSS.
   -------------------------------------------------------------------------- */

.faq details {
  position: relative;
}

.faq details[data-animating] > div {
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  /* Suppresses the double-tap text selection that otherwise fires on iOS when
     a summary is tapped twice in quick succession. */
  -webkit-user-select: none;
  user-select: none;
}

/* Replaces the +/- glyph swap with a rotating cross: no content change means
   no reflow, and the rotation is interruptible mid-flight. */
.faq summary::after {
  content: "+" !important;
}

.faq details[open] summary::after {
  content: "+" !important;
}

@media (prefers-reduced-motion: no-preference) {
  .faq summary::after {
    transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
      color 0.18s ease;
  }

  .faq details[open] summary::after {
    transform: rotate(45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq details[open] summary::after {
    transform: rotate(45deg);
  }
}

/* A left rule that grows in on open, so an open row is identifiable at a
   glance when several are open at once. */
.faq details[open] {
  background: linear-gradient(var(--brass), var(--brass)) left top / 2px 100%
    no-repeat;
}

.faq details[open] > div,
.faq details[open] summary {
  padding-left: var(--sp-4);
}

@media (prefers-reduced-motion: no-preference) {
  .faq details > div,
  .faq summary {
    transition: padding-left 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

@media (hover: hover) {
  .faq summary:hover::after {
    color: var(--brass-light);
  }
}

/* --------------------------------------------------------------------------
   28.6 Live form validation
   --------------------------------------------------------------------------
   main.js sets form.noValidate at runtime and takes over. It is deliberately
   NOT set in the HTML: with scripting off the browser's own validation is the
   only thing standing between a bot and an empty submission.

   Fields are only styled invalid once they have been touched — reddening a
   form the moment it loads is hostile.
   -------------------------------------------------------------------------- */

.field {
  position: relative;
}

.field__error {
  display: block;
  margin: 0.35rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: #a4291f; /* 6.1:1 on --white, 5.8:1 on --paper */
  font-weight: 500;
}

.field__error:empty {
  display: none;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #a4291f;
  background-color: #fffafa;
}

input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  border-color: #a4291f;
  box-shadow: 0 0 0 3px rgba(164, 41, 31, 0.14);
}

/* Confirmation is quieter than correction: a check mark in the gutter, no
   colour flood. Only shown on fields that had an error and were fixed, so a
   correctly filled form is not covered in ticks. */
.field[data-state="fixed"]::after {
  content: "✓";
  position: absolute;
  right: 0.7rem;
  bottom: 0.62rem;
  font-size: 0.9rem;
  line-height: 1;
  color: #2f6b4f; /* 4.9:1 on --white */
  pointer-events: none;
}

.field[data-state="fixed"] textarea ~ .field__error,
.field[data-state="fixed"]:has(textarea)::after {
  bottom: auto;
  top: 2.1rem;
}

.consent[data-state="error"] {
  /* No red flood on a block of legal text — it would compete with the copy
     it is trying to draw attention to. A rule in the gutter is enough. */
  box-shadow: inset 3px 0 0 -1px #a4291f;
  padding-left: var(--sp-4);
  margin-left: calc(-1 * var(--sp-4));
}

.consent input[type="checkbox"][aria-invalid="true"] {
  outline: 2px solid #a4291f;
  outline-offset: 2px;
}

/* Submit-time summary. role="alert" in the markup; this is only its skin. */
.form-alert {
  margin: 0 0 var(--sp-4);
  padding: 0.8rem 1rem;
  border-left: 2px solid #a4291f;
  background: #fdf4f3;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: #7d2118;
}

.form-alert:empty {
  display: none;
}

.form-alert a {
  color: #7d2118;
  font-weight: 600;
}

/* Character counter for the free-text field. */
.field__count {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--fs-small);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.field__count[data-over="true"] {
  color: #a4291f;
}

/* Button busy state on submit, so a slow network does not read as a dead
   button and get double-tapped. */
.btn[data-busy="true"] {
  pointer-events: none;
  opacity: 0.72;
}

/* --------------------------------------------------------------------------
   28.7 Process progress
   --------------------------------------------------------------------------
   The vertical rail on .journey fills as the reader descends, and each step's
   badge lights when it is reached. This is a colour change, not movement, so
   it survives reduced motion intact — only its easing is removed.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .journey > li::before,
  .journey > li::after {
    transition: background-color 0.45s ease, border-color 0.45s ease,
      color 0.45s ease, box-shadow 0.45s ease;
  }
}

.journey > li[data-reached="true"]::after {
  background: var(--brass-pale);
}

.journey > li[data-reached="true"]::before {
  border-color: var(--brass);
  color: var(--brass);
  box-shadow: 0 0 0 4px rgba(179, 140, 82, 0.13);
}

.section--navy .journey > li[data-reached="true"]::before {
  border-color: var(--brass-on-dark);
  color: var(--brass-on-dark);
}

/* The six-cell grid gets a rule that draws across the top of each reached
   cell — a progress bar distributed over the grid rather than under it. */
.arc > li {
  position: relative;
}

.arc > li::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .arc > li::after {
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

.arc > li[data-reached="true"]::after {
  transform: scaleX(1);
}

.arc > li[data-reached="true"]::before {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   28.8 Staggered entrance
   --------------------------------------------------------------------------
   The delay is applied to children of a revealed container, capped at six
   steps so a long list never leaves the reader waiting on the last item.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal .stagger > * {
    opacity: 0;
    transform: translateY(10px);
  }

  .js-reveal .stagger.is-visible > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .js-reveal .stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
  .js-reveal .stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
  .js-reveal .stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
  .js-reveal .stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }
  .js-reveal .stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }
  .js-reveal .stagger.is-visible > *:nth-child(n + 6) { transition-delay: 300ms; }
}

/* --------------------------------------------------------------------------
   28.9 Navigation
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  /* The open panel is a layer over the page, so it gets a layer's shadow and
     a scrim behind it. Both are inert to pointer events except the scrim,
     which closes the menu — handled in main.js. */
  .site-nav[data-open="true"] {
    box-shadow: var(--e3);
  }

  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(13, 27, 47, 0.42);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
  }

  .nav-scrim[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: no-preference) {
    .nav-scrim {
      transition: opacity 0.22s ease;
    }
  }
}

/* The current page, marked in the nav. */
.site-nav a[aria-current="page"] {
  color: var(--brass);
  box-shadow: inset 0 -2px 0 -1px var(--brass);
}

@media (max-width: 860px) {
  .site-nav a[aria-current="page"] {
    box-shadow: inset 3px 0 0 -1px var(--brass);
  }
}

/* Burger to close. The three bars are real <span>s, 1.5px tall with a 3px
   gap, so each outer bar travels 4.5px to meet the middle before rotating. */
.nav-toggle__bars span {
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .nav-toggle__bars span {
    transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
      opacity 0.14s ease;
  }
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.3);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-4.5px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   28.10 Layout stability
   --------------------------------------------------------------------------
   Reserving space for the two elements that arrive after first paint. Without
   these, the header settling and the CTA bar appearing both shift content.
   -------------------------------------------------------------------------- */

img {
  height: auto;
}

.mobile-cta {
  contain: layout paint;
}

/* --------------------------------------------------------------------------
   28.11 Reduced motion — the blanket
   --------------------------------------------------------------------------
   Everything above is already gated, but a stray transition added later
   should not be able to slip past. Colour transitions are allowed through at
   a short duration; anything that moves is stopped.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js-reveal .stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   28.12 CTA band carrying a chooser
   --------------------------------------------------------------------------
   The base band puts a single button in an `auto` second column. Four
   two-line options need a real measure, so the column is given one — and the
   pair is top-aligned rather than centred, since the left column is now the
   shorter of the two.
   -------------------------------------------------------------------------- */

.cta-band--chooser .container {
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  align-items: start;
}

@media (max-width: 900px) {
  .cta-band--chooser .container {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Below the four options the button is the catch-all, not the headline —
   full width on small screens so it still reads as the floor of the group. */
.cta-band--chooser .btn--primary {
  width: 100%;
  justify-content: center;
}

@media (min-width: 901px) {
  .cta-band--chooser .btn--primary {
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   28.13 Pointer targets on desktop
   --------------------------------------------------------------------------
   The 44px floor in section 26.6 is scoped to coarse pointers, which left the
   mouse case unaddressed. WCAG 2.2 SC 2.5.8 (Target Size, Minimum, AA) asks
   for 24x24 CSS px unless the target sits in a sentence or has 24px of
   clearance. Measured at 1440px, the footer legal links (21.4px), the DBPR
   verification link (22.4px) and the contact email (22.4px) all fell short.
   They are link lists, not prose, so the sentence exception does not apply.
   -------------------------------------------------------------------------- */

/* min-width 861px is not decoration: section 26.6 gives everything at or below
   860px a 44px floor regardless of pointer type, and this rule is later in the
   file, so without the width bound it would quietly override that floor down
   to 24px on a 834px viewport. */
@media (pointer: fine) and (min-width: 861px) {
  .legal__links a,
  .license-bar a,
  .contact-block a,
  .site-footer .linkset a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
}

/* --------------------------------------------------------------------------
   28.14 Corrections found in render review
   -------------------------------------------------------------------------- */

/* The note inherited font-weight 600 from the form's `label` rule, which made
   the supporting line compete with the option it supports. The label is the
   emphasis; the note is not. */
.chooser__note {
  font-weight: 400;
}

/* The chooser sits inside .form-grid, whose `label` rule also sets a bottom
   margin intended for stacked fields. */
label.chooser__option {
  margin: 0;
}

/* Inquiry flow: the form is the destination on every screen size. */
#seller-inquiry {
  scroll-margin-top: 7rem;
}

.contact-page-head .container {
  padding-block: clamp(2rem, 4vw, 3.25rem);
}

.contact-page-head h1 {
  margin-bottom: .75rem;
}

.contact-page-head p:last-child {
  max-width: 48rem;
  margin-bottom: 0;
}

.contact-section {
  padding-top: clamp(1.25rem, 3vw, 2.5rem);
}

.contact-flow {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.contact-form-panel {
  order: 1;
}

.contact-info-panel {
  order: 2;
}

.form-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: 1.5rem;
  padding: .65rem;
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius-panel);
}

.form-progress span {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  font-weight: 600;
}

.form-progress b,
.form-step-heading > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-size: .75rem;
}

.form-step-heading {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .75rem;
  padding-top: .35rem;
  border-top: 1px solid var(--rule);
}

.form-step-heading div {
  display: grid;
  gap: .05rem;
}

.form-step-heading strong {
  color: var(--navy-900);
}

.form-step-heading small {
  color: var(--ink-muted);
}

@media (max-width: 880px) {
  .contact-flow {
    grid-template-columns: 1fr;
  }
}

/* Final small-screen conversion pass. Kept last so it wins over base rules. */
@media (max-width: 520px) {
  .license-bar .container { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; padding-block: .45rem; }
  .license-bar__group { display: grid; gap: 0; font-size: .72rem; line-height: 1.35; }
  .license-bar a { font-size: .72rem; white-space: nowrap; }
  .site-header .container { gap: .65rem; padding-block: .7rem; }
  .site-header .lockup { max-width: 13.5rem; }
  .site-header .lockup__name,
  .site-header .lockup__brokerage { font-size: .82rem; line-height: 1.18; }
  .site-header .lockup__with { display: none; }
  .nav-toggle { flex: 0 0 auto; padding: .65rem .75rem; }
  .hero .container { padding-block: 2.25rem 3rem; }
  .hero h1 { margin-bottom: 1.1rem; }
  .service-area { margin: .75rem 0; font-size: .95rem; line-height: 1.45; }
  .affil { margin-bottom: .75rem; }
  .hero .btn-row { gap: .65rem; }
  .hero__lead { margin-top: 1.35rem; font-size: 1.05rem; line-height: 1.48; }
  .hero__note { margin-top: 1rem; }
  .portrait { margin-top: -.5rem; }
  .journey__body { max-width: 38rem; }

  #seller-inquiry { scroll-margin-top: 7rem; }
  .contact-page-head .container { padding-block: 2.1rem; }
  .contact-page-head h1 { margin-bottom: .75rem; }
  .contact-page-head p:last-child { margin-bottom: 0; font-size: 1rem; line-height: 1.5; }
  .contact-section { padding-top: 1.25rem; }
  .contact-flow { gap: 2rem; }
  .contact-form-panel { order: 1; }
  .contact-info-panel { order: 2; }
  .contact-form-panel .form-shell { padding: 1.1rem; }
  .contact-form-panel .form-shell > h2 { margin-bottom: .2rem; }
  .contact-form-panel .form-grid { gap: 1rem; }
  .contact-form-panel .chooser { gap: .65rem; }
  .contact-form-panel .chooser__grid { grid-template-columns: 1fr; gap: .6rem; }
  .contact-form-panel .chooser__option { min-height: 74px; padding: .8rem .85rem .85rem 2.75rem; align-content: center; }
  .contact-form-panel .chooser__option::after { display: none; }
  .contact-form-panel .chooser__note { display: block; }
  .contact-form-panel label.chooser__option::before { left: .65rem; top: 50%; transform: translateY(-50%); }
  .contact-form-panel label.chooser__option::after { display: block; left: .9rem; top: 50%; transform: translate(-50%, -50%); }
  .form-progress { grid-template-columns: 1fr; gap: .35rem; }
}

/* Final homepage cascade: keep the editorial treatment after all legacy rules. */
.home-page .home-redundant { display: none; }
.home-page .hero {
  background: radial-gradient(circle at 8% 14%, rgba(167,100,61,.11), transparent 28rem), var(--paper);
  color: var(--ink);
}
.home-page .hero::before { display: none; }
.home-page .hero h1 { color: var(--ink); }
.home-page .hero h1 em { color: #a26342; }
.home-page .hero .eyebrow { color: #8b593a; }
.home-page .hero .eyebrow::after { background: #c5ab96; }
.home-page .hero__lead { color: var(--ink-soft); }
.home-page .hero__note { color: var(--ink-muted); }
.home-page .hero__note .link-arrow { color: var(--navy-900); }
.home-page .service-area { color: var(--ink); }
.home-page .hero .service-area strong { color: var(--ink); font-weight: 500; }
.home-page .affil { color: var(--ink-soft); }
.home-page .affil strong { color: var(--ink); }
.home-page .affil__dot { background: #a26342; }
.home-page .portrait {
  max-width: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home-page .portrait__meta { border-top: 0; }
.home-page .portrait__label { color: #8b593a; }
.home-page .portrait__value { color: var(--ink); }
.home-page .portrait__value span { color: var(--ink-muted); }
.home-page .creds { background: #fffaf2; border-color: var(--rule); }
.home-page .creds__label { color: #8b593a; }
.home-page .creds__value { color: var(--ink); }
.home-page .creds__verify { color: var(--ink-muted); }

@media (max-width: 880px) {
  .home-page .portrait { max-width: 42rem; }
}

@media (max-width: 520px) {
  .home-page .hero .container { padding-block: 2.75rem 3.75rem; }
  .home-page .portrait { margin-top: 0; }
}

/* Art-directed composition: image as place, copy as an offset editorial panel. */
@media (min-width: 901px) {
  .home-page .hero {
    min-height: 680px;
    background: #d9cabb;
  }

  .home-page .hero .container {
    width: 100%;
    max-width: none;
    min-height: inherit;
    padding: 0;
  }

  .home-page .hero__grid {
    position: relative;
    display: block;
    min-height: inherit;
  }

  .home-page .hero__grid > div:first-child {
    position: relative;
    z-index: 3;
    width: min(47rem, 58vw);
    min-height: inherit;
    padding: clamp(2.75rem, 4.25vw, 4.5rem) clamp(3rem, 6vw, 6.5rem);
    background: rgba(247, 242, 233, .96);
    box-shadow: 30px 0 70px rgba(24, 31, 38, .14);
    clip-path: polygon(0 0, 91% 0, 100% 100%, 0 100%);
  }

  .home-page .hero__grid > div:first-child > * {
    max-width: 36rem;
  }

  .home-page .hero h1 {
    max-width: 8.5ch;
    font-size: clamp(3.25rem, 4.6vw, 4.85rem);
  }

  .home-page .portrait {
    position: absolute;
    inset: 0 0 0 40%;
    width: auto;
    max-width: none;
    transform: none;
  }

  .home-page .portrait::before { display: none; }

  .home-page .portrait__img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-position: 63% center;
    filter: saturate(.72) contrast(.96) sepia(.08);
  }

  .home-page .portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(30,42,54,.16), transparent 42%);
    pointer-events: none;
  }

  .home-page .portrait__meta {
    position: absolute;
    z-index: 2;
    right: 2.5rem;
    top: 2rem;
    bottom: auto;
    width: min(25rem, 40vw);
    margin: 0;
    background: rgba(20, 35, 50, .9);
    color: #fff;
    box-shadow: none;
  }

  .home-page .portrait__row:first-child {
    display: flex;
    align-items: baseline;
    gap: .75rem;
  }

  .home-page .portrait__row + .portrait__row { display: none; }
  .home-page .portrait__row:first-child .portrait__value span { display: none; }
  .home-page .portrait__value { color: #fff; }
  .home-page .portrait__value span { color: rgba(255,255,255,.66); }
}

.home-page .creds .container { max-width: 1180px; }
.home-page .creds__item {
  position: relative;
  background: #fffaf2;
  color: var(--ink);
}
.home-page .creds__label { margin-bottom: .25rem; }
.home-page .creds__value { font-family: var(--font-serif); font-size: 1.05rem; }
.home-page .creds__verify { color: #5d6876; }

.home-page .section--navy .firm {
  grid-template-columns: minmax(0, 1fr);
  max-width: 58rem;
}
.home-page .section--navy .firm__intro h2 { max-width: 16ch; }
.home-page .section--navy .firm__grid { display: none; }
.home-page .firm__scope {
  margin-block: 2rem;
  padding-block: 1rem;
  border-block: 1px solid var(--rule-dark);
  color: rgba(255,255,255,.74);
  font-family: var(--font-serif);
  font-size: 1.1rem;
}

@media (max-width: 900px) {
  .home-page .hero__grid { display: flex; flex-direction: column; }
  .home-page .hero__grid > div:first-child { order: 2; }
  .home-page .portrait { order: 1; width: calc(100% + 2rem); margin-left: -1rem; }
  .home-page .portrait__meta { margin-top: -1.25rem; }
  .home-page .portrait__row + .portrait__row { display: none; }
  .home-page .hero h1 { max-width: 9ch; }
  .home-page .creds .container { padding-inline: 1rem; }
}

@media (max-width: 520px) {
  .home-page .portrait__meta {
    width: calc(100% - 1.5rem);
    padding: .9rem 1rem;
  }
  .home-page .portrait__row:first-child {
    display: flex;
    align-items: baseline;
    gap: .65rem;
  }
  .home-page .portrait__row:first-child .portrait__value span { display: none; }
  .home-page .portrait__value { font-size: .95rem; }
  .home-page .portrait__value span { font-size: .76rem; }
  .home-page .hero h1 { font-size: 2.75rem; line-height: 1.02; }
  .home-page .hero__lead { font-size: 1.08rem; }
  .home-page .creds__item { padding: 1.35rem 1rem; }
}