/* ==========================================================================
   LEXINGTON SOLUTIONS, Global Stylesheet
   Brand: editorial / financial-services / superyacht
   Deep navy, ivory, champagne accent. Cormorant + Inter.
   ========================================================================== */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter: stable reserves scrollbar space on every page so the
   horizontal layout stays symmetric, the navigation, hero, and footer all
   sit at the same gutter from the viewport edge regardless of whether the
   page scrolls. Without this, classic-scrollbar browsers drift content
   ~15px to the left of where it visually wants to sit. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; scrollbar-gutter: stable; }
[id] { scroll-margin-top: 96px; }
body {
  margin: 0;
  background: var(--ivory);
  color: #000;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast), opacity var(--t-fast); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

:focus-visible {
  outline: 2px solid var(--champagne-light);
  outline-offset: 3px;
}

/* Skip to content */
.skip-link {
  position: absolute;
  left: 8px;
  top: -40px;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: top .2s ease;
}
.skip-link:focus { top: 8px; outline: 2px solid var(--champagne-light); outline-offset: 2px; }

/* ---------- Tokens ---------- */
/* 2026-05-17, Luxury register shift (held-Phase-5 spec authorized):
   warmer ivory family, taupe tertiary, champagne-rule for signature
   hairlines, softer motion tokens, partial restore of pre-May-13 spacing.
   See plan: ~/.claude/plans/you-are-the-lead-swift-harp.md */
:root {
  /* Color, Navy (unchanged) */
  --navy:        #0a1a2f;
  --navy-deep:   #061324;
  --navy-soft:   #14304f;

  /* Color, Warm neutrals
     2026-05-17, --ivory unified to the warmer #efe7d5 tone (formerly used
     only by --ivory-warm sections). Eliminates the near-white feel that
     light cards gave off when placed in or near ivory-warm sections
     every card surface and the page bg now share one consistent creme. */
  --ivory:       #efe7d5;   /* was #f9f6f1, now matches --ivory-warm */
  --ivory-warm:  #efe7d5;   /* unchanged */
  --bone:        #f5ecd9;   /* was #fcfaf5, bumped to a darker creme so
                               form-card surfaces stay slightly warmer
                               than --ivory inputs (preserves the form
                               card / input contrast that bone provided
                               before, just shifted into the creme family) */

  /* Color, Tertiary tone (new, for borders, captions, surface depth) */
  --taupe:       #a8988f;
  --taupe-deep:  #6f6259;

  /* Color, Accent
     2026-05-17, gold dropped per stakeholder direction; brand is now strictly
     white-on-dark / navy-on-light. Token names retained so existing rules and
     class selectors continue to resolve without a site-wide rename.
     - --champagne       → navy   (used on LIGHT backgrounds as accents/rules)
     - --champagne-light → white  (used on DARK  backgrounds as accents/rules)
     - --champagne-ink   → navy   (used as small-text emphasis on light bg)
     - --champagne-rule  → white  (used as hairline on dark bg) */
  --champagne:       #0a1a2f;
  --champagne-light: #ffffff;
  --champagne-ink:   #0a1a2f;
  --champagne-rule:  rgba(255, 255, 255, 0.30);

  /* Color, Rules, mute, base */
  --rule:        rgba(10, 26, 47, 0.14);   /* was 0.12, slightly stronger */
  --rule-ivory:  rgba(245, 241, 232, 0.30); /* was 0.28 */
  --mute:        #595959; /* ~6.2:1 on new ivory, passes WCAG AA small-text */
  --white:       #ffffff;

  /* Color, Opacity tiers on dark */
  --on-dark-1:   rgba(255, 255, 255, 1);
  --on-dark-75:  rgba(255, 255, 255, 0.75);
  --on-dark-50:  rgba(255, 255, 255, 0.5);

  /* Typography */
  --display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --max:    1400px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 0;

  /* Space scale, section rhythm.
     2026-05-13: compressed ~30% from prior values.
     2026-05-17: restored ~half of that compression for boutique-luxury
     breath (was 56/7vw/112 → now 72/8.5vw/140). */
  --space-section:    clamp(72px, 8.5vw, 140px);
  --space-section-sm: clamp(48px, 5.5vw, 88px);
  --space-block:      clamp(40px, 5vw, 80px);
  --section-y: var(--space-section); /* legacy alias */

  /* Motion tokens, softer, more luxurious tempo (2026-05-17) */
  --t-fast:      .25s ease;                          /* was .2s */
  --t-med:       .45s ease;                          /* was .35s */
  --t-slow:      .8s cubic-bezier(.2,.7,.2,1);       /* was .6s */
  --t-reveal:    1.2s cubic-bezier(.2,.7,.2,1);      /* was 1.0s */
  --t-cinematic: 1.6s cubic-bezier(.16,.84,.24,1);   /* new, hero reveal */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
}

/* ---------- Typography ---------- */
/* 2026-05-18, bumped eyebrow + label from 11px to 14px (+3) site-wide
   per user feedback ("too small and difficult to read"). Legal pages
   keep the prior 11px via the .legal-page override below. */
.eyebrow {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #000;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  /* 2026-05-19, hairline hidden per user "remove all em-dashes" directive.
     The 28px x 1px champagne hairline before eyebrow text was the visible
     "dash" preceding every eyebrow on the site ("ACQUISITION", "Begin
     a Conversation", etc.). Setting display: none hides it without
     deleting the rule, so it can be re-enabled if the design reverses. */
  display: none;
}
.eyebrow.no-rule::before { display: none; }

/* Eyebrow used as a block label above a heading: consistent baseline gap. */
.eyebrow--stack { display: inline-flex; margin-bottom: 20px; }
/* Tighter stack used in callouts where the heading sits closer. */
.eyebrow--stack-tight { display: inline-flex; margin-bottom: 24px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
  color: #000;
}
/* 2026-05-17, desktop ceilings raised (mobile sizes preserved for LCP). */
.display-xl { font-size: clamp(48px, 7vw, 120px); line-height: .98; letter-spacing: -0.025em; text-wrap: balance; }
.display-lg { font-size: clamp(44px, 6vw, 96px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.display-md { font-size: clamp(32px, 4.2vw, 68px); line-height: 1.08; text-wrap: balance; }
.display-sm { font-size: clamp(24px, 2.8vw, 40px); line-height: 1.15; }

.lede {
  font-family: var(--display);
  /* 2026-05-18, weight 300 italic Cormorant rendered with strokes so thin
     that anti-aliasing on the creme bg made the text read as tan/grey
     instead of solid black. Bumped to 500 (the heaviest italic in the
     loaded font URL) so the actual #000 color reads as #000. */
  font-weight: 500;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.6;
  color: #000;
  font-style: italic;
  letter-spacing: -0.005em;
}
/* 2026-05-17, serif-upright intro variant for narrative section openings. */
.lede--prose {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.5;
  color: #000;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.body-lg { font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.6; color: #000; }
.body    { font-size: 1rem; line-height: 1.65; color: #000; }
.body-sm { font-size: 0.875rem; line-height: 1.6; color: #000; }

.italic { font-style: italic; }
.serif  { font-family: var(--display); }

/* small-caps label */
.label {
  font-family: var(--sans);
  /* 2026-05-18, matched the eyebrow bump 11 -> 14 for the same readability
     reason. .legal-page override below restores the prior 11px for legal. */
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #000;
}
/* Legal pages keep the prior compact size for these labels so the dense
   policy structure remains legible at its existing rhythm. */
.legal-page .eyebrow,
.legal-page .label {
  font-size: 11px;
}

/* ---------- Layout utilities ---------- */
.container { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container-narrow { max-width: 960px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { position: relative; padding-top: var(--space-section); padding-bottom: var(--space-section); }
.section-sm { position: relative; padding-top: var(--space-section-sm); padding-bottom: var(--space-section-sm); }

/* 2026-05-17, section-divider hairline removed. The prior signature
   champagne (now navy) ::before hairline floating between sibling
   light sections read as an unmoored short line rather than a
   deliberate divider, especially on pages where consecutive sections
   sit close. Background contrast (.dark, .ivory-warm) and the section
   eyebrow already provide enough visual separation; this rule is
   intentionally not replaced. */
.dark { background: var(--navy); color: var(--white); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--white); }
.dark .body, .dark .body-lg, .dark .lede { color: var(--white); }
.dark .label { color: var(--white); }
.dark .eyebrow { color: var(--champagne-light); }
.dark .eyebrow::before { background: rgba(255, 255, 255, 0.55); }
.ivory-warm { background: var(--ivory-warm); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.dark .rule { background: var(--rule-ivory); }

/* ========================================================================
   2026-05-18, Universal section alternation.
   Every content section in <main> alternates creme (default page bg) and
   navy regardless of any existing .dark / .ivory-warm classes on the
   markup. Hero, page-hero, contact-hero, and callout are not counted
   they sit outside the alternating rhythm.

   Uses CSS :nth-child(N of <selector>) which is in Chrome 111+,
   Safari 9+, Firefox 113+. The of-clause counts only siblings that
   match `.section` or `.section-sm`, so non-matching siblings (hero,
   callout) don't shift the index.

   Pattern: 1st content section = creme, 2nd = navy, 3rd = creme, 4th = navy…
   ======================================================================== */
main :nth-child(odd of .section, .section-sm) {
  background: var(--ivory);
}
main :nth-child(even of .section, .section-sm) {
  background: var(--navy);
  color: var(--white);
}
/* Text inversion on navy sections, overrides .body/.body-lg/.lede hardcoded
   #000 (from the pure-black/white sweep) so prose reads white on navy. */
main :nth-child(even of .section, .section-sm) h1,
main :nth-child(even of .section, .section-sm) h2,
main :nth-child(even of .section, .section-sm) h3,
main :nth-child(even of .section, .section-sm) h4,
main :nth-child(even of .section, .section-sm) p,
main :nth-child(even of .section, .section-sm) .body,
main :nth-child(even of .section, .section-sm) .body-lg,
main :nth-child(even of .section, .section-sm) .lede,
main :nth-child(even of .section, .section-sm) .lede--prose,
main :nth-child(even of .section, .section-sm) .label,
main :nth-child(even of .section, .section-sm) li,
main :nth-child(even of .section, .section-sm) dt,
main :nth-child(even of .section, .section-sm) dd,
main :nth-child(even of .section, .section-sm) .eyebrow,
main :nth-child(even of .section, .section-sm) .num,
main :nth-child(even of .section, .section-sm) .stat__num,
main :nth-child(even of .section, .section-sm) .stat__num sup,
main :nth-child(even of .section, .section-sm) .stat__label {
  color: var(--white);
}
main :nth-child(even of .section, .section-sm) .eyebrow::before {
  background: rgba(255, 255, 255, 0.55);
}
/* Stats borders also invert on navy alternating sections */
main :nth-child(even of .section, .section-sm) .stats {
  border-top-color: var(--rule-ivory);
  border-bottom-color: var(--rule-ivory);
}
main :nth-child(even of .section, .section-sm) .stat {
  border-right-color: var(--rule-ivory);
}
/* Mobile (<= 960px) layout collapses stats to a 2x2 grid and introduces a
   horizontal hairline between the top and bottom rows. Mirror the inversion
   so the hairline stays visible on navy at narrow widths. */
main :nth-child(even of .section, .section-sm) .stat:nth-child(-n+2) {
  border-bottom-color: var(--rule-ivory);
}
/* .section-head bottom border was --rule (navy) by default and got
   inverted to --rule-ivory inside the old .dark scope. With .dark
   stripped, the alternation must explicitly invert it now. */
main :nth-child(even of .section, .section-sm) .section-head {
  border-bottom-color: var(--rule-ivory);
}
main :nth-child(even of .section, .section-sm) .section-head .num {
  color: var(--white);
}

/* 2026-05-19, .section--navy explicit override. Forces a section to
   render with navy bg + white text regardless of its alternation
   position. Used on the /purchases Acquisition Process section: it
   was previously at the even (navy) position, but the removal of the
   "Marketplace clarification" section flipped the alternation and put
   it at odd (creme). This modifier restores the navy treatment without
   touching the broader alternation. !important is needed because the
   alternation rules (e.g. odd-section text-color cascade) match
   higher specificity than `.section--navy` alone. */
.section.section--navy {
  background: var(--navy) !important;
}
.section.section--navy,
.section.section--navy h1,
.section.section--navy h2,
.section.section--navy h3,
.section.section--navy h4,
.section.section--navy p,
.section.section--navy .body,
.section.section--navy .body-lg,
.section.section--navy .lede,
.section.section--navy .lede--prose,
.section.section--navy .label,
.section.section--navy li,
.section.section--navy dt,
.section.section--navy dd,
.section.section--navy .eyebrow,
.section.section--navy .num {
  color: var(--white) !important;
}
/* Eyebrow rule line tint flips to ivory-alpha when on .section--navy. */
.section.section--navy .eyebrow::before {
  background: rgba(255, 255, 255, 0.55) !important;
}
/* .timeline--compact inside .section--navy: ensure white text wins
   over the alternation's odd-section creme override I added at the
   same time as the section removal. */
.section.section--navy .timeline.timeline--compact .timeline__step,
.section.section--navy .timeline.timeline--compact .timeline__step * {
  color: var(--white) !important;
}
.section.section--navy .timeline.timeline--compact .timeline__step .num {
  color: rgba(255, 255, 255, 0.55) !important;
}
.section.section--navy .timeline.timeline--compact .timeline__step {
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}
/* 2026-05-18 / 2026-05-19, Universal section-title scale across the
   main content area. Every <h2> inside <main> renders at .display-md
   metrics (clamp 32/4.2vw/68) regardless of which display-* class is
   on the element. Unifies section titles across every header-linked
   page (Home / Acquisition / Manufacturer / Insights / About / Contact)
   for site-wide rhythm.

   Specificity note: `main h2` alone (0,0,2) loses to `.display-lg` /
   `.display-md` / etc. (0,1,0) because class beats two element
   selectors. To win site-wide, the selector list explicitly includes
   `main h2.display-*` variants for (0,1,2) specificity.

   Context-specific overrides still win on (0,2,1):
     .media-split__content h2 , clamp(28, 3.5vw, 52) for the half-
                                  width column on the homepage Clients
                                  section (display-md would overflow). */
main h2,
main h2.display-xl,
main h2.display-lg,
main h2.display-md,
main h2.display-sm {
  font-size: clamp(32px, 4.2vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* Inline link hover would otherwise drop to #000 on a navy section
   (`.link-inline:hover { color: #000 }`), keep it white instead. */
main :nth-child(even of .section, .section-sm) .link-inline:hover,
main :nth-child(even of .section, .section-sm) .link-inline {
  color: var(--white);
}
/* 2026-05-18, hairline-grid containers paint their 1px gaps from
   `background: var(--rule)` (navy tint, ~0.14 alpha). On odd (creme)
   sections that reads as a subtle navy hairline. On even (navy) sections
   it disappears into the bg. Invert to --rule-ivory so the hairline
   carries through. Mirrors the stats-border inversion above. */
main :nth-child(even of .section, .section-sm) .tenets,
main :nth-child(even of .section, .section-sm) .timeline,
main :nth-child(even of .section, .section-sm) .process,
main :nth-child(even of .section, .section-sm) .mandate-grid,
main :nth-child(even of .section, .section-sm) .scenarios-grid,
main :nth-child(even of .section, .section-sm) .contact-process ol {
  background: var(--rule-ivory);
}
/* .contact-process ol also carries its own top/bottom border hairlines
   that need the same inversion to remain visible on navy. */
main :nth-child(even of .section, .section-sm) .contact-process ol {
  border-top-color: var(--rule-ivory);
  border-bottom-color: var(--rule-ivory);
}
/* .insights-grid cards carry their own right/bottom border hairlines
   (see the .insights-grid block); invert them to stay visible on navy. */
main :nth-child(even of .section, .section-sm) .insights-grid .service {
  border-color: var(--rule-ivory);
}
/* Force text BLACK on creme sections, overrides .dark text rules that
   may still be in the original markup (e.g., the prior `.section.dark`
   class on the manufacturer Capabilities and form sections). */
main :nth-child(odd of .section, .section-sm),
main :nth-child(odd of .section, .section-sm) h1,
main :nth-child(odd of .section, .section-sm) h2,
main :nth-child(odd of .section, .section-sm) h3,
main :nth-child(odd of .section, .section-sm) h4,
main :nth-child(odd of .section, .section-sm) p,
main :nth-child(odd of .section, .section-sm) .body,
main :nth-child(odd of .section, .section-sm) .body-lg,
main :nth-child(odd of .section, .section-sm) .lede,
main :nth-child(odd of .section, .section-sm) .lede--prose,
main :nth-child(odd of .section, .section-sm) .label,
main :nth-child(odd of .section, .section-sm) li,
main :nth-child(odd of .section, .section-sm) dt,
main :nth-child(odd of .section, .section-sm) dd,
main :nth-child(odd of .section, .section-sm) .eyebrow,
main :nth-child(odd of .section, .section-sm) .num {
  color: #000;
}
main :nth-child(odd of .section, .section-sm) .eyebrow::before {
  background: var(--champagne);
}

/* ========================================================================
   2026-05-18, Card-text override.
   Cards listed below always paint their own light (creme/ivory/bone) bg,
   so their text must always read black regardless of the parent section's
   alternation state. !important is used because the section-alternation
   selectors above resolve to (0,2,2) while any class-based card selector
   here is naturally (0,1,N), this rule expresses a hard visibility
   contract: "this card has a light bg, so its text is pure black."
   ======================================================================== */
.service, .service *,
.process__step, .process__step *,
.scenario-card, .scenario-card *,
.mandate-card, .mandate-card *,
.tenet, .tenet *,
.timeline__step, .timeline__step *,
.form.form-card, .form.form-card * {
  color: #000 !important;
}
/* 2026-05-18, Re-assert white text on submit buttons inside form-cards.
   The cascade above forces every descendant of .form.form-card to #000;
   the submit `<button class="btn btn--champagne">` keeps its navy fill
   but loses its native `color: var(--white)`, producing black-on-navy
   text that's effectively unreadable on the /purchases and /contact
   submit CTAs. Re-assert white here. */
.form.form-card .btn--champagne,
.form.form-card .btn--champagne * {
  color: var(--white) !important;
}

/* ---------- Top bar / nav ---------- */
.topline {
  background: var(--navy-deep);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 0;
  font-weight: 500;
}
.topline .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.topline .inner span { white-space: nowrap; }
.topline .inner span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  background: var(--on-dark-50);
  margin-right: 28px;
  vertical-align: middle;
}

/* Header unified with footer chrome (navy-deep), all three states resolve to the same shade.
   Backdrop-filter removed (background is solid). White nav text becomes the universal default. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy-deep);
  border-bottom: 1px solid var(--rule-ivory);
  color: var(--white);
  transition: background var(--t-med), border-color var(--t-med);
}
.site-header.on-dark { background: var(--navy-deep); border-bottom-color: var(--rule-ivory); color: var(--white); }
.site-header.on-dark.is-scrolled { background: var(--navy-deep); }
/* 2026-05-17, glass-frosted floating header past 1.2 viewports of scroll.
   Falls back to solid navy-deep on browsers without backdrop-filter. */
.site-header.is-floating {
  background: rgba(6, 19, 36, 0.86);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom-color: var(--champagne-rule);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header.is-floating { background: var(--navy-deep); }
}
.site-header .nav__logo img { filter: brightness(0) invert(1); }
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  padding: 14px 0;
}
.nav__left, .nav__right {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav__right { justify-content: flex-end; }
.nav a { position: relative; padding: 6px 0; }
/* Nav text stays white via the .site-header.on-dark color cascade.
   The ::after underline below is the hover/current-page indicator
   no color change on the text itself (a black hover color would be
   invisible on the dark navy header anyway). */

/* Current-page underline (and universal hover underline). Full-width
   thin white line under the link text. The :not([href="/"]) guard
   excludes the Home link from the aria-current treatment so landing
   on the homepage does NOT auto-underline HOME by default. Hover
   still works on every link including Home so pointing at it gives
   feedback. */
.nav a[aria-current="page"]:not([href="/"])::after,
.nav a.active:not([href="/"])::after,
.nav a:hover::after,
.nav a:focus-visible::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--white);
}
/* 2026-05-17, stacked logo: emblem + small serif "LEXINGTON" wordmark
   directly beneath, reading as a single composite logo. Header stays slim. */
.nav__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  /* 2026-05-18, gap raised from 10px so the wordmark's geometric centre
     lands on the midpoint between the emblem-bottom and the header
     bottom edge. With .nav padding 14px + emblem 36px + 14px wordmark,
     midpoint Y = emblem-bottom + 14, so gap = 14 puts wordmark-centre
     at midpoint. */
  gap: 14px;
  text-decoration: none;
  color: var(--white);
}
.nav__logo img {
  height: 36px;
  width: auto;
  transition: opacity var(--t-med);
  display: block;
}
.nav__logo-mark {
  font-family: var(--display);
  font-weight: 600;
  /* 2026-05-18, +1px (13 -> 14) for slightly more presence; letter-
     spacing tightened 25% (0.42em -> 0.315em) so the mark sits more
     compact under the emblem. text-indent matches the new tracking. */
  font-size: 14px;
  letter-spacing: 0.315em;
  text-indent: 0.315em;
  line-height: 1;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
  display: block;
}
.site-header.on-dark .nav__logo img,
.footer-logo img {
  filter: brightness(0) invert(1);
}
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  position: relative;
}
/* .nav__cta hover indication is handled by the shared .nav a:hover::after
   underline rule above, no color change needed (and a #000 hover on the
   dark navy header would render the text invisible anyway). */

.nav__burger { display: none; }

/* ---------- Buttons ---------- */
/* 2026-05-17, adds box-shadow hover deepening (champagne glow on CTA,
   subtle ink shadow on others) for refined luxury hover transitions. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 18px 28px;
  /* 2026-05-18, universal tasteful black frame on every .btn. Variants
     may still override (e.g. .btn--primary, .btn--champagne navy fills
     keep their navy border for same-tone refinement); the white-fill
     CTA on hero/callout gets the black frame via the dark-context
     override below. */
  border: 1px solid #000;
  transition: background var(--t-med), color var(--t-med),
              border-color var(--t-med), box-shadow var(--t-med),
              transform var(--t-med);
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(10, 26, 47, 0);
}
.btn .arrow {
  display: inline-block;
  transition: transform var(--t-med);
  line-height: 1;
}
.btn:hover .arrow { transform: translateX(6px); }
/* 2026-05-18, universal subtle hover feedback: a 1px lift plus a soft
   ink shadow. Variant-specific :hover rules (champagne, primary, etc.)
   compose on top, their own box-shadow / background changes win where
   declared. Pressed state cancels the lift. Honored skip under
   prefers-reduced-motion: reduce so users who request reduced motion
   see the colour/border feedback only. */
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .btn:active { transform: none; }
}
/* 2026-05-18, variants inherit the .btn base `border: 1px solid #000`
   so the universal black frame is truly universal. Previously these
   redeclared border-color to var(--navy) or var(--champagne) which
   visually collapsed against navy fills but technically broke the
   "pure black border on every button" rule. */
.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover {
  background: var(--navy-soft);
  box-shadow: 0 14px 32px rgba(10, 26, 47, 0.18);
}
.btn--ghost { background: transparent; color: #000; }
.btn--ghost:hover { background: var(--navy); color: var(--white); }
.dark .btn--ghost { color: var(--white); }
.dark .btn--ghost:hover { background: var(--white); color: #000; }
/* 2026-05-18, .btn--ghost is transparent + black text by default,
   which works on creme alternation sections but renders invisibly on
   navy alternation sections (the navy bg shows through; black text
   disappears). The `.dark .btn--ghost` rules above are dead code
   (`.dark` was stripped from <section> elements during the luxury
   revision). Restore the on-dark contract via the section alternation:
   text inverts to white on navy, hover swaps to white-fill + black text.
   Affects /purchases (Discuss a Vessel Search §4 navy, Discuss a Fleet
   §8 navy) and any future .btn--ghost on an even alternation section. */
main :nth-child(even of .section, .section-sm) .btn--ghost {
  color: var(--white);
}
main :nth-child(even of .section, .section-sm) .btn--ghost:hover {
  background: var(--white);
  color: #000;
}
/* Hero / page-hero / callout host dark surfaces but sit outside the
   section alternation. If a .btn--ghost is placed inside any of them,
   apply the same on-dark inversion. */
.hero .btn--ghost,
.page-hero .btn--ghost,
.contact-hero .btn--ghost,
.callout .btn--ghost,
.hero-stats .btn--ghost {
  color: var(--white);
}
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.contact-hero .btn--ghost:hover,
.callout .btn--ghost:hover,
.hero-stats .btn--ghost:hover {
  background: var(--white);
  color: #000;
}
/* Primary CTA. Class name preserved for HTML-stability; visual is now
   solid navy on light contexts, inverted to white-fill on dark contexts. */
.btn--champagne { background: var(--champagne); color: var(--white); }
.btn--champagne:hover {
  background: var(--white);
  color: #000;
  box-shadow: 0 14px 32px rgba(10, 26, 47, 0.22);
}
/* Dark-context invert: white-fill CTA with navy text on .hero / .page-hero /
   .section.dark / .callout backgrounds so the button reads against the dark. */
.hero .btn--champagne,
.page-hero .btn--champagne,
.section.dark .btn--champagne,
.callout .btn--champagne {
  background: var(--white);
  color: #000;
  /* 2026-05-18, tasteful black frame on the white-fill CTA over dark
     backgrounds. Was var(--white) (invisible-on-white). */
  border-color: #000;
}
.hero .btn--champagne:hover,
.page-hero .btn--champagne:hover,
.section.dark .btn--champagne:hover,
.callout .btn--champagne:hover {
  background: var(--ivory);
  color: #000;
  border-color: #000;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}

/* 2026-05-21, full-width CTA modifier. The button fills its container so
   the action spans the column it sits in , the Buyer Representation grid
   on the homepage Clients section and the Builders text column. Label and
   arrow stay centered as a unit. */
.btn--block {
  display: flex;
  width: 100%;
  justify-content: center;
}

.link-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  transition: color var(--t-med), border-color var(--t-med);
}
.link-inline:hover { color: #000; border-color: var(--champagne); }
.link-inline--on-dark { color: var(--white); }
.link-inline--on-dark:hover { color: var(--champagne-light); border-color: var(--champagne-light); }

/* Hero: eyebrow sits on dark imagery, use the light champagne variant */
.hero .eyebrow { color: var(--champagne-light); }
.hero .eyebrow::before { background: rgba(255, 255, 255, 0.55); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* 2026-05-18, fill the visible viewport below the sticky header so
     the hero image carries the fold rather than cutting off mid-screen.
     Header height = .nav (14px pad + 64px logo composite + 14px pad) +
     1px border = 93px. Using dvh so the value tracks mobile browser
     chrome (URL bar) collapse instead of locking to lvh. */
  min-height: calc(100dvh - 93px);
  display: flex;
  align-items: stretch;
  color: var(--white);
  overflow: hidden;
  background: var(--navy-deep);
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 2026-05-17, layered scrim: vertical gradient for legibility,
   radial vignette for cinematic depth around the central text block. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 110% 70% at 50% 70%,
      rgba(6,19,36,.0) 0%,
      rgba(6,19,36,.18) 70%,
      rgba(6,19,36,.32) 100%),
    linear-gradient(180deg,
      rgba(6,19,36,.62) 0%,
      rgba(6,19,36,.18) 35%,
      rgba(6,19,36,.10) 55%,
      rgba(6,19,36,.82) 100%);
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(28px, 3vw, 48px);
  padding-top: clamp(56px, 6vw, 96px);
  width: 100%;
  display: flex;
  flex-direction: column;
}
.hero__content .container {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  /* 2026-05-18, bottom-anchored cluster. justify-content: flex-end
     packs h1 + .hero__meta to the bottom of the hero so the image
     carries the upper viewport. Gap of 27px matches
     `.hero__meta { padding-top: 27px }` so the h1-to-divider distance
     equals the divider-to-lede distance, the headline and the body
     copy sit symmetrically around the hairline rule. */
  justify-content: flex-end;
  gap: 27px;
}
.hero h1 {
  color: var(--white);
  /* 2026-05-21, no width cap so "Exceptional yachts, select buyers"
     sits on a single line; the bottom-anchored hero cluster then drops
     the one-line headline below the yacht in the image. */
  max-width: none;
  margin-top: 0;
}
/* Hero-scoped reduction of display-xl so the homepage hero compresses proportionally without affecting page-hero h1 elsewhere.
   2026-05-18, cumulative anchor-shift this session:
   34/72 -> 30/68 -> 28/66 -> 26/64 -> 24/62 -> 22/60 (-2 more, round 4). */
.hero h1.display-xl { font-size: clamp(22px, 4.5vw, 60px); }
.hero h1 em { font-style: italic; color: var(--champagne-light); font-weight: 500; }
.hero__meta {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(34px, 5.1vw, 102px);
  align-items: start;
  max-width: 960px;
  padding-top: 27px;
  border-top: 1px solid var(--on-dark-50);
}
.hero__meta .lede { grid-column: 2; grid-row: 1; margin: 0; color: var(--on-dark-1); font-family: var(--display); font-style: italic; }
/* 2026-05-18, drop the .actions cluster by ~0.3em of the lede font-size so
   the "Begin a Conversation" button's top edge aligns with the lede's
   first-line cap-top. Italic Cormorant at line-height 1.6 carries real
   line-box leading; the button has none, without this shim the button
   reads as sitting above the body copy. Mobile resets (single-column stack). */
.hero__meta .actions { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: clamp(6px, 0.6vw, 9px); }

/* 2026-05-17, slow cinematic reveal on hero children. Behind
   prefers-reduced-motion: no-preference so users who request reduced motion
   see immediate render (no FOUC, no partial states). */
@media (prefers-reduced-motion: no-preference) {
  .hero__content .container > *,
  .page-hero__content .container > * {
    opacity: 0;
    transform: translateY(16px);
    animation: hero-reveal var(--t-cinematic) forwards;
  }
  .hero__content .container > *:nth-child(1),
  .page-hero__content .container > *:nth-child(1) { animation-delay: 0ms; }
  .hero__content .container > *:nth-child(2),
  .page-hero__content .container > *:nth-child(2) { animation-delay: 180ms; }
  .hero__content .container > *:nth-child(3),
  .page-hero__content .container > *:nth-child(3) { animation-delay: 360ms; }
  .hero__content .container > *:nth-child(4),
  .page-hero__content .container > *:nth-child(4) { animation-delay: 540ms; }
  .hero__content .container > *:nth-child(5),
  .page-hero__content .container > *:nth-child(5) { animation-delay: 720ms; }
}
@keyframes hero-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Marquee of builder names ---------- */
.marquee {
  background: var(--navy);
  color: var(--white);
  padding: 28px 0;
  overflow: hidden;
  border-top: 1px solid var(--rule-ivory);
  border-bottom: 1px solid var(--rule-ivory);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 64px;
  white-space: nowrap;
  animation: slide 48s linear infinite;
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: 0.04em;
}
.marquee__track span {
  display: inline-flex;
  align-items: center;
  opacity: 0.72;
}
.marquee__sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--on-dark-50);
  opacity: 0.7;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Section headers ---------- */
.section-head {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr);
  gap: clamp(24px, 4vw, 80px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 64px);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.dark .section-head { border-bottom-color: var(--rule-ivory); }
.section-head .num {
  font-family: var(--display);
  font-style: italic;
  /* 2026-05-18, italic Cormorant at 16-18px renders thin enough that the
     #000 fill reads as tan-grey via anti-aliasing. Bump to 500 (heaviest
     italic loaded) so the strokes carry proper visual weight. */
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 18px);
  color: #000;
  letter-spacing: .02em;
}
.dark .section-head .num { color: var(--champagne-light); }
.section-head h2 { max-width: 22ch; }

/* ---------- Services (home) + Insights (article grid) ---------- */
.services,
.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  contain: layout paint;
}
/* .insights-grid is a uniform 3-up of equal-height cards. Dividers are
   real 1px borders on each card, not a 1px gap over a tinted parent: a
   gap hairline antialiases away at fractional sub-pixel column edges
   (which left the middle/right divider missing), whereas a border always
   snaps to a device pixel. Only interior lines show; each layout drops
   the right border of its last column and the bottom border of its last
   row, scoped to disjoint width ranges so the rules never conflict. */
.insights-grid {
  gap: 0;
}
.insights-grid .service {
  border-right: 1px solid rgba(10, 26, 47, 0.3);
  border-bottom: 1px solid rgba(10, 26, 47, 0.3);
}
/* 3-up (min-width 1025px): last column is 3, 6, 9; last row is 7, 8, 9. */
@media (min-width: 1025px) {
  .insights-grid .service:nth-child(3n) { border-right: 0; }
  .insights-grid .service:nth-last-child(-n + 3) { border-bottom: 0; }
}
/* 2-up (961-1024px): right column is every even card; the lone last card
   keeps its right border so the column line runs the full height. */
@media (min-width: 961px) and (max-width: 1024px) {
  .insights-grid .service:nth-child(2n) { border-right: 0; }
  .insights-grid .service:last-child { border-bottom: 0; }
}
/* 1-up (max-width 960px): no column lines; last card drops its bottom. */
@media (max-width: 960px) {
  .insights-grid .service { border-right: 0; }
  .insights-grid .service:last-child { border-bottom: 0; }
}
/* 2026-05-20, insights cards run tighter than the shared .service base
   (less padding, smaller gap, no Read-insight link); the body flex-grows
   so each card's image bottom-aligns across the hairline grid. */
.insights-grid .service {
  padding: clamp(20px, 1.8vw, 30px);
  gap: 16px;
}
.insights-grid .service > * { margin: 0; }
.insights-grid .service .body { flex-grow: 1; }
/* 2026-05-17, .services is a clean 3-up of uniform cards. Decoupled from
   .insights-grid so it can have its own visible column gap and no parent
   bg-tint (each .service paints its own ivory fill).
   2026-05-20, the homepage Services cards run tighter than the shared
   .service base (less padding, smaller gap) and carry no Explore link.
   Grid align-items: stretch makes all three cards equal height; the body
   flex-grows to absorb that slack, so every card's image bottom-aligns on
   a uniform row regardless of how long each description runs. */
.services {
  gap: clamp(16px, 1.5vw, 28px);
}
.services .service {
  padding: clamp(20px, 1.7vw, 28px);
  gap: 12px;
}
/* Reset child margins so the 12px flex gap is the sole vertical spacer. */
.services .service > * { margin: 0; }
.services .service .body { flex-grow: 1; }
/* 2026-05-21, drop the two-line h3 reservation. The descriptions are now
   uniform length, so titles sit tight above the body; only "Manufacturer
   Representation" wraps to two lines and simply runs one line taller. */
.services .service h3 { min-height: 0; }
.service {
  background: var(--ivory);
  padding: clamp(32px, 3vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  transition: background .4s ease;
}
.service:hover { background: var(--bone); }
/* 2026-05-17, signature champagne hairline grows in from top on hover/focus.
   Replaces the previous scale-only hover with an editorial flourish. */
.service::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--champagne);
  transition: width var(--t-med);
  pointer-events: none;
}
.service:hover::before,
.service:focus-visible::before { width: 100%; }
.service__num {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: #000;
  font-weight: 500;
}
.service h3 {
  font-size: clamp(28px, 2.2vw, 36px);
  /* 2026-05-19, Cormorant Garamond 600 (the heaviest weight loaded in
     the Google Fonts import) so service card titles read as bolded
     against the body copy, matching the .tenets--compact card pattern. */
  font-weight: 600;
  line-height: 1.1;
  display: flex;
  align-items: flex-start;
  /* Reserve space for up to the actual longest title (2 lines:
     "Manufacturer Representation") so bodies still align across cards
     without padding single-line titles with 2 extra lines of empty space. */
  min-height: calc(1.1em * 2);
}
/* 2026-05-20, reserve 3 lines of h3 height in the insights grid so body
   paragraphs broadly align across each row without over-reserving for
   the lone one-liner ("Due Diligence"). The two longest titles wrap to
   4 lines and simply run one line taller; the flex-grow body keeps every
   card's image bottom-aligned regardless. */
.insights-grid .service h3 { min-height: calc(1.1em * 3); }
.service .body { min-height: calc(3em * 1.55); }
.service__img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  background: var(--navy-deep);
}
.service__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transition: transform var(--t-slow);
}
.service:hover .service__img img { transform: scale(1.04); }

/* ---------- Editorial split block ---------- */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
}
.split--flip { grid-template-columns: 1fr 1.1fr; }
.split__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split--editorial .split__media + .split__media { margin-top: 4%; }
/* Modifier: stretch the media to match a tall right-hand text column.
   Drops the default 4:3 aspect-ratio cap and lets the .split__media
   cell fill the grid row height. Used when the text side carries
   enough body copy that the default crop would leave the image
   visually short. */
.split--tall { align-items: stretch; }
.split--tall .split__media {
  aspect-ratio: auto;
  /* 2026-05-18, image absolutely fills the cell so its intrinsic
     dimensions don't drive grid-row height. The row now sizes to the
     text column's natural height and the image height matches. */
  min-height: 0;
}
.split--tall .split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split h2 { margin-bottom: 24px; }
.split .kicker { margin-bottom: 24px; }
.split .body-lg { margin-bottom: 24px; }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  /* 2026-05-18, was --rule-ivory (white tint) baked for the old
     .section.dark container. With .dark stripped, stats now render on
     the alternating creme bg by default, so borders use the navy-tinted
     --rule. Inverted to --rule-ivory by the alternation override below
     when the section is at an even (navy) position. */
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stat {
  padding: clamp(32px, 3vw, 56px) clamp(20px, 2vw, 32px);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--display);
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  /* 2026-05-18, defaults to #000 for the creme alternation bg.
     Inverted to white inside even (navy) sections via the rule below. */
  color: #000;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.stat__num sup {
  color: #000;
  font-size: .5em;
  vertical-align: top;
  line-height: 1;
  position: relative;
  top: 0.06em;
  font-weight: 400;
}
.stat__label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* 2026-05-18, defaults to #000 for the creme alternation bg.
     Inverted to white inside even (navy) sections via the rule below. */
  color: #000;
}

/* ---------- Approach / process ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
}
.process__step {
  background: var(--ivory);
  padding: 40px 32px 56px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 320px;
}
.process__step .num {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #000;
  line-height: 1;
}
.process__step h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.15;
}

/* ---------- Page hero (smaller, for inner pages) ---------- */
.page-hero {
  position: relative;
  /* 2026-05-19, fill the visible viewport below the sticky header,
     matching the homepage .hero treatment from 629fe62. Was 64vh,
     which left the image cut off mid-screen on interior pages. Header
     resolves to 93px ( .nav 14+64+14 + 1px border-bottom); using dvh
     so the value tracks mobile browser-chrome collapse. */
  min-height: calc(100dvh - 93px);
  /* 2026-05-19, content centered vertically. Was `flex-end` (bottom-
     anchored) but with the hero now filling a full viewport, the
     h1 + lede cluster sat against the bottom edge with a vast empty
     band above. Centering yields a balanced composition across every
     interior page (/about, /purchases, /manufacturer, /insights,
     /insights/<articles>, /404, legal pages). */
  display: flex; align-items: center;
  color: var(--white);
  overflow: hidden;
  background: var(--navy-deep);
}
.page-hero .hero__bg img { transform: none; }
/* 2026-05-17, interior page-hero scrim: layered with subtle radial vignette
   anchored bottom-center where the H1 + lede live. */
.page-hero .hero__scrim {
  background:
    radial-gradient(ellipse 120% 60% at 50% 85%,
      rgba(6,19,36,.0) 0%,
      rgba(6,19,36,.20) 80%,
      rgba(6,19,36,.36) 100%),
    linear-gradient(180deg,
      rgba(6,19,36,.50) 0%,
      rgba(6,19,36,.22) 40%,
      rgba(6,19,36,.92) 100%);
}

/* 2026-05-17, Page-hero modifiers for interior differentiation.
   Each modifier shifts the radial vignette anchor so different pages
   read distinctly without rebuilding the page structure. */
.page-hero--left-anchor .hero__scrim {
  /* 2026-05-17, lightened so the underlying hero image reads more
     vibrant. Top + middle nearly transparent (sky/water shows at
     near-natural brightness); bottom-left radial vignette retained,
     just reduced, so the H1 + lede on that anchor stay legible. */
  background:
    radial-gradient(ellipse 80% 65% at 18% 90%,
      rgba(6,19,36,.0) 0%,
      rgba(6,19,36,.18) 65%,
      rgba(6,19,36,.42) 100%),
    linear-gradient(180deg,
      rgba(6,19,36,.18) 0%,
      rgba(6,19,36,.04) 40%,
      rgba(6,19,36,.55) 100%);
}
/* Small filter boost on the underlying image so colors feel more
   vibrant without touching the source file. */
.page-hero--left-anchor .hero__bg img {
  filter: saturate(1.12) brightness(1.06);
}
.page-hero--right-anchor .hero__scrim {
  background:
    radial-gradient(ellipse 90% 70% at 78% 88%,
      rgba(6,19,36,.0) 0%,
      rgba(6,19,36,.28) 70%,
      rgba(6,19,36,.44) 100%),
    linear-gradient(180deg,
      rgba(6,19,36,.48) 0%,
      rgba(6,19,36,.18) 38%,
      rgba(6,19,36,.94) 100%);
}
.page-hero--compact { min-height: 52vh; }

/* Optional editorial number prefix above an interior H1.
   Use as: <div class="page-hero__num"> 01 / Acquisition</div> */
.page-hero__num {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--champagne-light);
  letter-spacing: .02em;
  margin-top: 16px;
  margin-bottom: 8px;
}
.page-hero__content {
  position: relative; z-index: 2;
  /* 2026-05-19, padding-bottom inflated from clamp(32, 4vw, 56) to
     clamp(160, 18vw, 280). With `.page-hero { align-items: center }`,
     a centered flex item with asymmetric padding has its visible
     content shifted opposite to the heavier side. Heavier bottom
     padding therefore pushes the visible h1 + lede + crumbs ABOVE the
     vertical centre, landing in the upper third for a more balanced
     composition with the hero image. */
  padding: clamp(40px, 5vw, 72px) 0 clamp(160px, 18vw, 280px);
  width: 100%;
}
.page-hero h1 { color: var(--white); margin-top: 24px; line-height: 1.08; padding-bottom: 0.12em; }
.page-hero h1 em { font-style: italic; color: var(--champagne-light); font-weight: 500; }
.page-hero .lede { margin-top: 40px !important; color: var(--on-dark-1); max-width: 64ch; }

/* Eyebrow placed above an inner-page hero h1, sits on dark scrim, use champagne */
.page-hero .eyebrow {
  color: var(--champagne-light);
  margin-top: 24px;
  display: inline-flex;
}
.page-hero .eyebrow::before { background: rgba(255, 255, 255, 0.55); }

/* Editorial body rhythm, paragraphs inside a .split column */
.split .lede { margin-bottom: 32px; }
.split .body-lg + .body-lg { margin-top: -8px; }
.split .body-lg { margin-bottom: 24px; }
.split .body-lg:last-of-type { margin-bottom: 40px; }

/* Stats following narrative content inside a section */
.stats--standalone { margin-top: 48px; margin-bottom: 0; }

/* Form action row */
.form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* breadcrumbs */
.crumbs {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
}
/* Reset the default <ol> styling so breadcrumb items render inline with no numeric markers. */
.crumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.crumbs li { list-style: none; }
.crumbs a:hover { color: var(--champagne-light); }
.crumbs span { color: var(--white); }

/* ---------- Pillar list (purchases page) ---------- */
.pillar {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: clamp(32px, 4vw, 80px);
  padding: clamp(40px, 5vw, 72px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.pillar:last-child { border-bottom: 0; }
.pillar__num {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  letter-spacing: 0.22em;
  color: #000;
  font-weight: 500;
  line-height: 1;
}
.pillar__title h3 {
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1.08;
  margin-bottom: 16px;
}
.pillar__title .eyebrow { margin-bottom: 12px; }
.pillar__body p { margin: 0 0 18px; }
.pillar__body p:last-child { margin-bottom: 0; }

/* ---------- Image card grid (manufacturer brands) ---------- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
.brand-card {
  aspect-ratio: 3 / 4;
  background: var(--navy);
  position: relative;
  overflow: hidden;
  color: var(--white);
  display: flex; align-items: flex-end;
  padding: 24px;
}
.brand-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55;
  transition: transform var(--t-slow), opacity var(--t-med);
}
.brand-card:hover img { transform: scale(1.06); opacity: .8; }
.brand-card__label {
  position: relative; z-index: 2;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.04em;
}
.brand-card__label small {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne-light);
  margin-bottom: 8px;
  font-weight: 500;
}

/* ---------- Form ---------- */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
}
.form .full { grid-column: 1 / -1; }
.field { position: relative; }
.field label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 10px;
}
.dark .field label { color: var(--white); }
.field input:required + .field-marker,
.field label .req {
  color: #000;
  margin-left: 4px;
  font-weight: 400;
}
.dark .field label .req { color: var(--champagne-light); }
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid {
  border-bottom-color: #b84a3a;
}
.dark .field input:user-invalid,
.dark .field select:user-invalid,
.dark .field textarea:user-invalid {
  border-bottom-color: #e07d6e;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
  font-family: var(--sans);
  /* 2026-05-17, typed input text matches site body copy in size and color,
     and runs at Inter 600 (the heaviest weight loaded) for bold emphasis
     so what the user types reads as the most prominent text in the form. */
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.dark .field input, .dark .field select, .dark .field textarea {
  color: var(--white);
  border-bottom-color: var(--rule-ivory);
}
/* Custom caret for select, shown because appearance:none suppressed the native arrow */
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%230a1a2f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
}
.dark .field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23c9a876' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--champagne);
  background-color: rgba(10, 26, 47, 0.04);
  box-shadow: inset 0 -2px 0 0 var(--champagne);
}
.dark .field input:focus,
.dark .field select:focus,
.dark .field textarea:focus {
  border-bottom-color: var(--champagne-light);
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 -2px 0 0 var(--champagne-light);
}
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 12px; color: #000; margin-top: 16px; }
.dark .form-note { color: var(--white); }
.form-confirm.is-visible { display: block; }
.form-confirm {
  color: #000;
  font-family: var(--display);
  font-style: italic;
  font-size: 20px;
  margin-top: 16px;
}
.dark .form-confirm { color: var(--champagne-light); }

/* 2026-05-17, Form card modifier. Boutique luxury treatment:
   ivory-warm container, champagne top hairline, serif labels.
   Use as `<form class="form form-card">` on inquiry / contact forms. */
.form.form-card {
  background: var(--bone);
  padding: clamp(32px, 4.5vw, 72px);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--champagne);
  margin-top: clamp(24px, 3vw, 48px);
}
.form.form-card .field label {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #000;
  margin-bottom: 8px;
}
.form.form-card .field input,
.form.form-card .field select,
.form.form-card .field textarea {
  background: var(--ivory);
  /* 2026-05-17, the form-card sits on a light bone fill regardless of the
     parent section's theme. Force black text + black caret so the .dark
     scope's white-text rule on .field inputs (used elsewhere) doesn't
     bleed through and render typed text white-on-white inside the card. */
  color: #000;
  -webkit-text-fill-color: #000;
  caret-color: #000;
  padding: 14px 14px;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--rule);
}
.form.form-card .field input:focus,
.form.form-card .field select:focus,
.form.form-card .field textarea:focus {
  background: var(--white);
  color: #000;
  -webkit-text-fill-color: #000;
  caret-color: #000;
  border-bottom-color: var(--champagne);
  box-shadow: inset 0 -2px 0 0 var(--champagne);
}
/* Force black labels inside the form-card too, same reason: prevents the
   .dark scope's white-label rule from inheriting onto a light card. */
.form.form-card .field label,
.dark .form.form-card .field label {
  color: #000;
}
/* Form-card placeholder text inside any context, light grey is still
   visible against the ivory input fill (placeholders are decorative
   hints, not user content; the user content itself is hard #000). */
.form.form-card .field input::placeholder,
.form.form-card .field textarea::placeholder {
  color: #000;
  opacity: 0.45;
}
.form.form-card .field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%230a1a2f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.form.form-card .form-confirm {
  background: var(--ivory-warm);
  border-left: 2px solid var(--champagne);
  padding: 14px 18px;
  margin-top: 20px;
}
.form.form-card .form__actions { margin-top: 24px; }

/* ---------- Footer ----------
   Sleek horizontal footer band: logo pinned to the left, with two horizontal
   info rows on the right (Contact, then Legal). Each row carries a small
   uppercase label followed by a dot-separated list of items. Inspired by the
   low-profile mastheads used by luxury houses (Hermès, Patek Philippe) and
   contemporary platforms (Stripe, Vercel), keeps the final band sleek
   without sacrificing legibility or hierarchy. */
/* 2026-05-17, slim footer with hairline rule above content + serif row
   labels. Outer padding kept to the minimum that lets the text breathe
   against the rule without looking cramped. */
.site-footer {
  background: var(--navy-deep);
  color: var(--on-dark-1);
  padding: clamp(14px, 1.5vw, 20px) 0 clamp(12px, 1.2vw, 16px);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: var(--champagne-rule);
}
/* Override the global container's max-width inside the footer so the logo
   sits flush at the gutter on the left and the rightmost row items sit
   equally flush at the gutter on the right, matches the visual rhythm of
   high-end full-width footers (Stripe, Hermès) where chrome lives at the
   absolute edges of the band rather than inset by a centered container.
   The calc on padding-right compensates for the browser scrollbar so the
   right-edge gap visually matches the left-edge gap regardless of whether
   the page has a scrollbar (the (100vw - 100%) expression resolves to the
   scrollbar width when present and to 0 when not). */
.site-footer .container {
  max-width: none;
  padding-right: calc(var(--gutter, 56px) - (100vw - 100%));
}
.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(28px, 3.5vw, 56px);
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  color: var(--on-dark-1);
  flex-shrink: 0;
}
.footer-logo img { height: 36px; width: auto; display: block; }
.footer-rows {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: end;
  align-items: baseline;
  row-gap: 8px;
  column-gap: 32px;
  min-width: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
}
/* .footer-row is a structural wrapper only; display:contents lets its
   label + items participate directly in the parent .footer-rows grid so
   labels and items column-align vertically across rows. */
.footer-row { display: contents; }
/* 2026-05-17, labels render identical to the rest of the footer text:
   same Inter sans, same 13px size, same white, same weight. Only kept
   nowrap so the single-word labels never break onto two lines. */
.footer-row__label {
  white-space: nowrap;
}
/* Distribute items across the row's column width so the shorter row
   (LEGAL) visually balances with the longer one (CONTACT). The wider
   row naturally fills the column and gets near-zero extra spacing; the
   narrower row spreads its tokens with even gaps. Both rows align at
   both ends of the column. */
.footer-row__items {
  color: var(--on-dark-1);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: baseline;
}
.footer-row__items a {
  color: var(--on-dark-1);
  transition: color var(--t-fast);
}
.footer-row__items a:hover { color: var(--champagne-light); }
.footer-row__items a[aria-current="page"] {
  color: var(--champagne-light);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.footer-row__items .sep {
  color: var(--white);
  margin: 0 10px;
}
.footer-copyright { color: var(--on-dark-1); }
/* Legacy footer-col* and footer-col__copyright rules from the prior 3-col
   layout are intentionally retained but unused; the new markup uses
   .footer-row* hooks instead. Safe to delete in a later cleanup pass. */
.footer-col__copyright { color: var(--on-dark-1); }

/* Section + callout flow:
   when a callout immediately follows a dark section, drop the dark section's
   bottom padding so the two stack as one continuous dark band. */
.section.dark:has(+ .callout) { padding-bottom: 0; }
.section.dark.has-callout-next { padding-bottom: 0; } /* fallback for no :has support */

/* Universal section-stacking rhythm:
   when any two banded blocks meet, tighten BOTH the previous block's
   padding-bottom AND the next block's padding-top to half the natural
   value. The total stacked gap stays modest (clamp(40, 4vw, 64)px), but
   each side keeps breathing room, so text doesn't kiss the bg-color
   transition when sections have different backgrounds (.ivory-warm,
   .dark). The previous '0 + clamp(28,3vw,56)' formulation produced
   the same total but pinched the first section's last line right
   against its lower bg edge. */
.section:has(+ .section),
.section:has(+ .section-sm),
.section:has(+ .callout),
.section-sm:has(+ .section),
.section-sm:has(+ .section-sm),
.section-sm:has(+ .callout) {
  padding-bottom: clamp(20px, 2vw, 32px);
}
/* 2026-05-18, Section-to-footer collapse. Pages that don't end with a
   .callout closer (/contact, /manufacturer, /purchases, /insights index,
   /disclaimers, /privacy-policy, /terms-of-use) keep their last
   .section's full var(--space-section) padding-bottom by default,
   producing 86-160px of dead creme before the footer band. Slightly
   larger than the inter-section collapse value because the bottom
   abuts the footer's small padding-top rather than another section's
   collapsed top. */
/* 2026-05-20, the last section in <main> is always the block directly
   above the footer (the footer sits outside <main>, so a + sibling
   selector cannot reach it). Target it by :last-child instead. */
main > .section:last-child,
main > .section-sm:last-child {
  padding-bottom: clamp(24px, 2.5vw, 40px);
}
.section + .section,
.section + .section-sm,
.section + .callout,
.section-sm + .section,
.section-sm + .section-sm,
.section-sm + .callout {
  padding-top: clamp(20px, 2vw, 32px);
}
/* 2026-05-18, same collapse for hero-to-section transitions. Every
   hero variant (homepage .hero, interior .page-hero, .contact-hero on
   contact) carries its own internal bottom padding via the hero-content
   wrapper. Without this rule, the first section after the hero adds the
   full `--space-section` clamp(72, 8.5vw, 140) on top, producing
   100-188px of dead space (the gap above "WHAT WE DO" the user flagged).
   Reducing the section's padding-top to the same clamp(20, 2vw, 32) as
   the section-to-section collapse keeps the rhythm uniform from hero
   through every section transition for the rest of the page. */
.hero + .section,
.hero + .section-sm,
.hero + .callout,
.page-hero + .section,
.page-hero + .section-sm,
.page-hero + .callout,
.contact-hero + .section,
.contact-hero + .section-sm,
.contact-hero + .callout {
  padding-top: clamp(20px, 2vw, 32px);
}
/* 2026-05-18, Hero stats band. Sits directly below the hero on the
   homepage, OUTSIDE the section alternation count (it's a <div>, not
   .section / .section-sm), so the navy treatment extends the hero
   band visually and the first content section still resolves to creme
   as section 1. Padding is modest, this is a single stats row, not a
   full content section.
   2026-05-19, tightened from clamp(32, 3vw, 56) to clamp(16, 1.5vw, 28)
   (~half) so the stats row reads as a tight ribbon under the hero
   rather than its own breathing section. */
.hero-stats {
  background: var(--navy);
  color: var(--white);
  padding: clamp(16px, 1.5vw, 28px) 0;
}
/* Stats inside hero-stats are on navy; mirror the dark-context
   inversion from the .section alternation (border ivory, text white). */
.hero-stats .stats {
  border-top-color: var(--rule-ivory);
  border-bottom-color: var(--rule-ivory);
}
.hero-stats .stat {
  border-right-color: var(--rule-ivory);
}
.hero-stats .stat__num,
.hero-stats .stat__num sup,
.hero-stats .stat__label {
  color: var(--white);
}
/* Collapse the transition into the first content section, matching
   the hero -> section collapse pattern. */
.hero-stats + .section,
.hero-stats + .section-sm {
  padding-top: clamp(20px, 2vw, 32px);
}

.callout {
  background: var(--navy);
  color: var(--white);
  padding: var(--space-section) 0;
  position: relative;
  overflow: hidden;
}
.callout::before {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 60%; height: 180%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.10), transparent 60%);
  pointer-events: none;
}
.callout__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}
.callout h2 { color: var(--white); max-width: 16ch; }
.callout .eyebrow { color: var(--champagne-light); }
.callout .eyebrow::before { background: rgba(255, 255, 255, 0.55); }
.callout .actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.callout .link-inline { color: var(--white); }
.callout .link-inline:hover { color: var(--champagne-light); }

/* 2026-05-18, Light variant of .callout. Used on the homepage to
   match the §02 Clients creme treatment instead of the default navy
   CTA band. Other pages (about, 404, insights articles) keep the
   default navy callout, opt in per-element via the .callout--light
   modifier on the <section>.

   padding-bottom override: the base .callout uses var(--space-section)
   (clamp 72-140) on both top and bottom. The .section + .callout
   collapse rule already trims the top to clamp(20, 2vw, 32), but the
   bottom retains the full 72-140, producing asymmetric dead space
   before the footer band. Mirror the top collapse value plus a hair
   more (the bottom abuts the footer's own padding, so a slightly
   generous spacing closes the page cleanly without the prior excess). */
.callout.callout--light {
  background: var(--ivory);
  color: #000;
  padding-bottom: clamp(24px, 2.5vw, 40px);
}
/* The decorative radial-glow ::before paints a white-tint highlight
   for the navy ground; remove on the light variant, it would muddy
   the creme. */
.callout.callout--light::before { display: none; }
.callout.callout--light h2 {
  /* 2026-05-19, font-size override removed so this h2 inherits the
     universal `main h2` display-md scale (clamp 32/4.2vw/68) along
     with every other section title on header-linked pages. Was
     clamp(33, 4.5vw, 72), a 4px ceiling difference; aligned now. */
  color: #000;
}
.callout.callout--light .eyebrow { color: #000; }
.callout.callout--light .eyebrow::before { background: var(--rule); }
.callout.callout--light .link-inline { color: #000; }
.callout.callout--light .link-inline:hover { color: var(--champagne); }
/* The .btn--champagne dark-context invert at the top of the buttons
   block (.hero/.page-hero/.section.dark/.callout .btn--champagne)
   forces white-fill + black border. On creme that's invisible, so
   reset to the standard navy-fill pill (the default .btn--champagne
   styling) plus the universal black border from the .btn base. */
.callout.callout--light .btn--champagne {
  background: var(--champagne);
  color: var(--white);
}
.callout.callout--light .btn--champagne:hover {
  background: var(--white);
  color: #000;
  box-shadow: 0 14px 32px rgba(10, 26, 47, 0.22);
}

/* 2026-05-21, insight-article callout. The callout sits directly after
   .article-body, which is not a .section, so it misses the universal
   section-stacking collapse rules and keeps the full var(--space-section)
   (clamp 80-160px) top/bottom padding. Compress the navy CTA band on
   article pages so it closes the page without the tall dead band. */
.article-body + .callout {
  padding-top: clamp(40px, 4.5vw, 64px);
  padding-bottom: clamp(40px, 4.5vw, 64px);
}

/* Centered narrative intro (about page philosophy block) */
.intro-center {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 64px);
}
.intro-center h2 {
  margin-top: 24px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* Stack of body paragraphs in editorial narrative.
   2026-05-17, reset child <p> margins so `gap` is the sole spacer; without
   this, default browser p-margins (~1em) add to the 28px gap and produce
   ~60px between paragraphs (visually wrong + inconsistent against the lede). */
.prose-stack { display: flex; flex-direction: column; gap: 28px; }
.prose-stack > p { margin: 0; }

/* 2026-05-20, portrait media variant of .split (base + sibling
   modifiers .split--flip / --tall / --editorial live near the top of
   this file). Drops the default 4:3 crop on .split__media so a tall
   portrait image renders at its natural aspect ratio. Used by the
   homepage "The Lexington Difference" section, paired with .pillars. */
.split--portrait .split__media {
  aspect-ratio: auto;
}
.split--portrait .split__media img {
  height: auto;
}

/* 2026-05-21, pillars pattern. Labeled prose blocks in a horizontal
   3-up, divided by vertical hairline rules. Named .pillar-item to
   avoid collision with .pillar (the purchases-page numbered list). */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.pillar-item {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vw, 12px);
  padding: 0 clamp(24px, 3vw, 44px);
  border-left: 1px solid var(--rule);
}
.pillar-item:first-child {
  padding-left: 0;
  border-left: 0;
}
.pillar-item:last-child {
  padding-right: 0;
}
/* On navy (even) sections the navy-tint --rule hairline vanishes;
   invert to --rule-ivory, mirroring the .tenets/.contact-process swap. */
main :nth-child(even of .section, .section-sm) .pillar-item {
  border-left-color: var(--rule-ivory);
}
.pillar-item h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.12;
  margin: 0;
}
/* .pillar-item lives inside .split here, where `.split .body-lg` would
   otherwise add a 24px bottom margin; this more specific rule keeps the
   pillar paragraphs flush so .pillars controls the spacing. */
.pillars .pillar-item p { margin: 0; }

/* ---------- Tenets ---------- */
/* 2026-05-19, when a tenets grid follows a .split in the same section
   (homepage Manufacturer Partners), add separation between the split
   block and the value cards. */
.split + .tenets {
  margin-top: clamp(28px, 3.5vw, 52px);
}
.tenets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
}
.tenet {
  background: var(--ivory);
  padding: clamp(32px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 320px;
}
/* Tenets inside a .dark section automatically take the navy-soft surface */
.dark .tenet { background: var(--navy-soft); color: var(--white); }
.dark .tenet .body { color: var(--white); }
/* Tenets rendered on the navy-soft surface inside .dark sections invert the
   eyebrow to champagne-light so it remains legible against the dark card. */
.tenet[style*="navy-soft"] .eyebrow,
.dark .tenet .eyebrow { color: var(--champagne-light); }
.tenet[style*="navy-soft"] .eyebrow::before,
.dark .tenet .eyebrow::before { background: rgba(255, 255, 255, 0.55); }
.tenet h3 {
  font-family: var(--display);
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.15;
  /* Reserve space for the tallest title in the row (up to 3 lines) so every card's body paragraph starts at the same Y across the row. */
  min-height: calc(1.15em * 3);
  color: #000;
}
/* Tenets in dark sections invert headings to white */
.dark .tenet h3 { color: var(--white); }

/* ---------- 2026-05-18, Media-split layout ----------
   Section wrapper that splits a section into two columns:
     left , `.media-split__media` (image slot, can be empty initially)
     right, `.media-split__content` (section-head + grid/copy)
   Used on the homepage Clients section where the .tenets grid is
   compacted into the right half and an image will fill the left half. */
.media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
.media-split__media {
  /* 2026-05-18, absolute-image pattern. The child img is positioned
     `position: absolute; inset: 0` (rule below) so it's removed from
     normal flow and doesn't contribute its intrinsic height to this
     slot. That keeps the slot's min-content height at 0, which lets
     the grid row size to the content side (.media-split__content)
     instead of the image's intrinsic aspect. With `align-self:
     stretch` this slot then expands to fill the row height, so the
     image's bottom edge aligns perfectly with the bottom of the
     tenets grid on the right. `overflow: hidden` is the safety
     guard against the absolute child painting outside the slot. */
  align-self: stretch;
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.media-split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-split__content {
  display: flex;
  flex-direction: column;
  /* 2026-05-18, tightened from clamp(28, 3vw, 48) so the .tenets grid
     sits naturally close to the section-head rule line. */
  gap: clamp(16px, 1.5vw, 24px);
}
/* In the narrow half-width context, stack the section-head num + heading
   vertically so the heading column gets full width of its column.
   margin-bottom: 0, the default .section-head margin-bottom (clamp
   32-64px) doubles up with this container's flex gap and produces too
   much rule-to-tenets whitespace; the flex gap is the sole spacer
   in this layout. */
.media-split__content .section-head {
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 0;
}
/* Reduce the h2 in this context, display-lg at full vw scale is too
   large for a half-width column. text-wrap: balance evens out the
   line breaks so the heading reads as composed rather than ragged. */
.media-split__content .section-head h2 {
  font-size: clamp(28px, 3.5vw, 52px);
  text-wrap: balance;
  line-height: 1.05;
}

/* ---------- Compact tenets variant ----------
   2 columns instead of 3, tighter card padding, tighter typography,
   no h3 min-height reservation. Used inside .media-split where the
   tenets grid lives in a half-width column. */
.tenets.tenets--compact {
  grid-template-columns: 1fr 1fr;
}
.tenets.tenets--compact .tenet {
  padding: clamp(18px, 1.8vw, 26px);
  gap: 10px;
  min-height: 0;
}
.tenets.tenets--compact .tenet h3 {
  font-size: clamp(17px, 1.4vw, 21px);
  /* 2026-05-18, Cormorant Garamond 600 (the heaviest weight loaded
     in the Google Fonts import) so the card titles read as bolded
     against the body copy. */
  font-weight: 600;
  margin: 4px 0 6px;
  line-height: 1.2;
  min-height: 0;
}
.tenets.tenets--compact .tenet .body,
.tenets.tenets--compact .tenet p {
  /* 2026-05-19, 13px -> 14px (+1pt) for readability. Stays tighter than
     full-grid card body (16px) because the compact tenets live in the
     half-width .media-split column. */
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.tenets.tenets--compact .tenet .eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
}

/* 2026-05-19, Compact timeline variant for .media-split / half-width
   layouts. Acquisition Process section on /purchases is the only
   current consumer.

   Editorial integration: card backgrounds DROPPED so the timeline
   reads as a typographic list directly on the parent section's
   ground (navy on /purchases §2). Removes the hard ivory rectangle
   that previously floated on navy; the section bg now breathes
   through, dividers are white-alpha hairlines, numbers are muted
   white, titles are crisp white. Matches the masthead-style register
   of the section heading above. */
.timeline.timeline--compact,
main :nth-child(even of .section, .section-sm) .timeline.timeline--compact,
main :nth-child(odd of .section, .section-sm) .timeline.timeline--compact {
  /* 2026-05-19, Selector list explicitly out-specifies the
     `main :nth-child(even...) .timeline { background: var(--rule-ivory) }`
     alternation rule (0,2,1) so the compact variant stays truly
     transparent on every section context. Otherwise the alternation
     rule paints a faint ivory tint over the navy and the timeline
     reads as a "lighter box on navy" again. */
  grid-template-columns: 1fr;
  gap: 0;
  background: transparent;
}
.timeline.timeline--compact .timeline__step {
  background: transparent;
  /* Padding now governs vertical rhythm only, no horizontal padding
     since the parent .media-split__content already provides gutters. */
  padding: clamp(14px, 1.5vw, 20px) 0;
  grid-template-columns: 56px 1fr;
  column-gap: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.timeline.timeline--compact .timeline__step:last-child {
  border-bottom: 0;
}
.timeline.timeline--compact .timeline__step .num {
  font-size: clamp(22px, 1.8vw, 28px);
}
.timeline.timeline--compact .timeline__step h3 {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

/* Override the card-text safety rule (.timeline__step * { color: #000
   !important }), that rule presumes a card's own ivory fill, but in
   the compact variant the bg is the section ground (no card surface).
   Default: white text for the navy alternation. */
.timeline.timeline--compact .timeline__step,
.timeline.timeline--compact .timeline__step * {
  color: var(--white) !important;
}
.timeline.timeline--compact .timeline__step .num {
  color: rgba(255, 255, 255, 0.55) !important;
}
/* On odd (creme) alternation sections, invert to black text + black-
   alpha divider so the timeline stays readable when the section
   alternation flips. Higher selector specificity (0,3,2) wins over
   the default rule (0,2,1). */
main :nth-child(odd of .section, .section-sm) .timeline.timeline--compact .timeline__step,
main :nth-child(odd of .section, .section-sm) .timeline.timeline--compact .timeline__step * {
  color: #000 !important;
}
main :nth-child(odd of .section, .section-sm) .timeline.timeline--compact .timeline__step .num {
  color: rgba(0, 0, 0, 0.5) !important;
}
main :nth-child(odd of .section, .section-sm) .timeline.timeline--compact .timeline__step {
  border-bottom-color: rgba(0, 0, 0, 0.14);
}

/* Responsive collapse of .media-split */
@media (max-width: 960px) {
  .media-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .media-split__media {
    min-height: 0;
  }
  /* Restore the image to natural-flow / intrinsic-aspect sizing on
     mobile. The desktop absolute-positioning pattern would collapse
     to 0 in a stacked single-column layout. */
  .media-split__media img {
    position: static;
    width: 100%;
    height: auto;
  }
  .media-split__content .section-head h2 {
    font-size: clamp(28px, 5.5vw, 44px);
  }
}
@media (max-width: 600px) {
  .tenets.tenets--compact { grid-template-columns: 1fr; }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-reveal), transform var(--t-reveal);
  transition-delay: calc(var(--i, 0) * 0.05s);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__bg img { transform: none; }
  .marquee__track { animation: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__bg img {
    transform: scale(1.08);
    animation: kenburns 16s ease-out forwards;
  }
  @keyframes kenburns { to { transform: scale(1); } }
}

/* ---------- Responsive, tablet portrait (<= 1024px) ---------- */
@media (max-width: 1024px) {
  .services, .insights-grid { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .tenets { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Responsive, tablet portrait (<= 768px) ---------- */
@media (max-width: 768px) {
  .services, .insights-grid,
  .process, .brand-grid,
  .tenets { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero__meta { grid-template-columns: 1fr; gap: 32px; }
  .hero__meta .lede,
  .hero__meta .actions { grid-column: 1; grid-row: auto; }
  /* Stacked layout, no cap-top alignment shim needed. */
  .hero__meta .actions { padding-top: 0; }
  .split, .split--flip { grid-template-columns: 1fr; gap: 40px; }
  /* On mobile the .split stacks vertically, so there is no tall text
     column to match. Restore the default 4:3 crop so the image renders
     at a sensible natural height instead of collapsing. */
  .split--tall .split__media { aspect-ratio: 4 / 3; }
  .callout__inner { grid-template-columns: 1fr; gap: 32px; }
  .section-head { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Responsive, mobile (<= 960px) nav + singleton grids ---------- */
@media (max-width: 960px) {
  .nav__left, .nav__right { display: none; }
  .nav { grid-template-columns: 1fr auto 1fr; }
  .nav__burger {
    display: inline-flex; align-items: center;
    justify-self: start;
    width: 44px; height: 44px;
    flex-direction: column; justify-content: center; gap: 6px;
  }
  .nav__burger span {
    display: block; width: 24px; height: 1px; background: currentColor;
  }
  .nav__cta { justify-self: end; padding: 10px 14px; font-size: 10px; }

  .services, .process, .tenets, .brand-grid, .insights-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: 0; }
  /* 2026-05-18, was --rule-ivory (white tint) baked for the old .dark
     scope. With .dark stripped, stats now render on alternating creme by
     default, so the mobile fallback hairlines must use --rule (navy tint)
     to read on creme. The alternation block above inverts both borders
     back to --rule-ivory when the section is even (navy). */
  .stat:nth-child(odd) { border-right: 1px solid var(--rule); }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .split, .split--flip { grid-template-columns: 1fr; }
  .pillar { grid-template-columns: 1fr; gap: 16px; }
  .pillar__num { font-size: 14px; }
  .callout__inner { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > :last-child { justify-self: start; text-align: left; }
  .topline .inner { gap: 16px; }
  .topline .inner span + span::before { margin-right: 16px; }
  .hero__meta { grid-template-columns: 1fr; gap: 32px; }
  .hero__meta .lede,
  .hero__meta .actions { grid-column: 1; grid-row: auto; }
  /* Stacked layout, no cap-top alignment shim needed. */
  .hero__meta .actions { padding-top: 0; }
}

/* mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--navy-deep);
  color: var(--white);
  z-index: 100;
  padding: 40px var(--gutter);
  transform: translateY(-100%);
  transition: transform .5s cubic-bezier(.7,0,.3,1);
  display: flex; flex-direction: column;
}
.mobile-menu.open { transform: none; }
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; }
.mobile-menu__mark {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.2em;
  font-weight: 500;
}
.mobile-menu__close { font-size: 24px; width: 40px; height: 40px; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 24px; }
.mobile-menu nav a,
.mobile-menu__link {
  font-family: var(--display);
  font-size: clamp(28px, 7vw, 36px);
  font-weight: 400;
  color: var(--white);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-ivory);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.mobile-menu nav a:hover,
.mobile-menu nav a[aria-current="page"] {
  color: var(--champagne-light);
  border-bottom-color: var(--champagne-light);
}
.mobile-menu .contact {
  margin-top: auto;
  font-size: 14px;
  color: var(--white);
}
.mobile-menu .contact a:hover { color: var(--champagne-light); }

/* ---------- Topline strip: hide decorative credentials on narrow mobile ---------- */
@media (max-width: 480px) {
  .topline { display: none; }
}

/* ---------- Footer: stack labels above items on tablet & phone ---------- */
@media (max-width: 768px) {
  .footer-rows {
    grid-template-columns: 1fr;
    justify-content: stretch;
    row-gap: 4px;
  }
  .footer-row__label { margin-top: 8px; }
  .footer-row__label:first-child { margin-top: 0; }
  .footer-row__items {
    display: block;            /* override desktop flex so items wrap inline */
    text-align: left;
  }
}
@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
    justify-items: start;
    text-align: left;
    gap: 14px;
  }
  .footer-grid > :first-child { justify-self: start; }
  .footer-grid > :last-child { justify-self: start; text-align: left; }
  .footer-rows { font-size: 12px; }
  .footer-row__items .sep { margin: 0 8px; }
}

/* ---------- Legal pages, articles & 404 ---------- */
.legal-body,
.article-body {
  padding: clamp(56px, 6vw, 88px) 0;
}
.legal-body h2,
.article-body h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  margin: 48px 0 16px;
}
.legal-body h2:first-child,
.article-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li,
.article-body p, .article-body li {
  font-size: 16px;
  line-height: 1.75;
  color: #000;
}
.legal-body ul,
.article-body ul { padding-left: 20px; }
.legal-body a,
.article-body a { color: #000; border-bottom: 1px solid var(--champagne-ink); }
/* Inline article links get a champagne underline; .btn must keep its full box border instead. */
.article-body .btn { border-bottom: 1px solid currentColor; }
.article-body .btn:hover { border-bottom: 1px solid var(--white); }

/* Intro block: opening narrative above TOC */
.legal-intro {
  margin-bottom: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--rule);
}
.legal-intro p {
  font-size: 17px;
  line-height: 1.75;
  color: #000;
}
.legal-intro p + p { margin-top: 16px; }

/* Effective-date label */
.legal-meta {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
  margin: 0 0 20px;
}
.legal-meta strong {
  font-weight: 600;
  color: #000;
  margin-right: 6px;
}

/* Table of contents: inset card */
.legal-toc {
  background: var(--ivory-warm);
  border-left: 2px solid var(--champagne);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  margin: 0 0 clamp(32px, 4vw, 56px);
}
.legal-toc .label {
  display: block;
  color: #000;
  margin-bottom: 16px;
}
.legal-toc ol {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 32px;
}
.legal-toc li {
  counter-increment: toc;
  position: relative;
  padding-left: 34px;
  font-size: 15px;
  line-height: 1.5;
}
.legal-toc li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #000;
  line-height: 1.9;
}
.legal-toc a {
  color: #000;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.legal-toc a:hover,
.legal-toc a:focus-visible {
  color: #000;
  border-bottom-color: var(--champagne-ink);
}

/* Each numbered policy section */
.legal-section {
  scroll-margin-top: 112px;
  padding-top: clamp(32px, 4vw, 56px);
}
.legal-section + .legal-section {
  border-top: 1px solid var(--rule);
}

/* Back-to-top micro-link at end of each section */
.legal-backtop {
  margin-top: 24px;
  text-align: right;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.legal-backtop a {
  color: #000;
  border-bottom: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.legal-backtop a::before {
  content: "↑";
  font-size: 13px;
  line-height: 1;
  color: #000;
}
.legal-backtop a:hover,
.legal-backtop a:focus-visible {
  color: #000;
}

/* Contact callout card inside final section */
.legal-callout {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--champagne);
  padding: clamp(24px, 3vw, 40px);
  margin: 24px 0 8px;
}
.legal-callout p {
  margin: 0;
}
.legal-callout p + p {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  color: #000;
  font-size: 15px;
}
.legal-callout strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: #000;
  display: inline-block;
  margin-bottom: 4px;
}

.notfound {
  min-height: 72vh;
  background: var(--navy-deep);
  color: var(--white);
  display: flex; align-items: center;
  padding: var(--section-y) 0;
}
.notfound h1 {
  color: var(--white);
  font-size: clamp(64px, 10vw, 160px);
  line-height: .95;
  margin-bottom: 24px;
}
.notfound h1 em { color: var(--champagne-light); font-style: italic; font-weight: 500; }
.notfound p { color: var(--white); max-width: 48ch; margin-bottom: 32px; }

/* ==========================================================================
   Legal pages (Privacy Policy, Terms of Use), compact, clean, Montserrat
   Scoped via <body class="legal-page">, no !important needed here, the
   scope keeps these rules away from the rest of the site.
   ========================================================================== */
.legal-page {
  /* Override reveal animation, legal content must be immediately visible */
  --t-reveal: 0s;
}
.legal-page .reveal,
.legal-page .page-hero .reveal { opacity: 1; transform: none; transition: none; }

.legal-page,
.legal-page body { background: #ffffff; }

.legal-page main,
.legal-page .page-hero,
.legal-page .page-hero__content,
.legal-page .legal-body,
.legal-page .legal-section,
.legal-page .legal-intro,
.legal-page .legal-callout { background: #ffffff; }

.legal-page .page-hero,
.legal-page .page-hero *,
.legal-page .legal-body,
.legal-page .legal-body * {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  color: #000;
  font-style: normal;
}

/* Header hero, compact, left-aligned, no image */
.legal-page .page-hero {
  min-height: 0;
  height: auto;
  padding: 0;
  display: block;
}
.legal-page .page-hero .hero__bg,
.legal-page .page-hero .hero__scrim { display: none; }
.legal-page .page-hero__content {
  position: static;
  padding: 48px 0 32px;
  border-bottom: 1px solid #e5e5e5;
}
.legal-page .page-hero__content > .container {
  max-width: 960px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 32px);
  padding-right: clamp(20px, 4vw, 32px);
  text-align: left;
}
.legal-page .page-hero .crumbs {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 24px;
  display: flex; gap: 8px; align-items: center;
}
.legal-page .page-hero .crumbs a { text-decoration: none; opacity: 0.5; }
.legal-page .page-hero .crumbs a:hover { opacity: 1; }
.legal-page .page-hero .crumbs span:not(:last-child) { opacity: 0.3; }
.legal-page .page-hero .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-left: 0;
}
.legal-page .page-hero .eyebrow::before {
  background: #000;
  width: 28px; height: 1px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  position: static;
}
.legal-page .page-hero h1 {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 16px 0 20px;
  padding: 0;
}
.legal-page .page-hero h1 em { font-style: normal; font-weight: 700; }
.legal-page .page-hero .lede {
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  margin: 0;
  max-width: 62ch;
  opacity: 0.72;
}

/* Legal body, rhythm */
.legal-page .legal-body { padding: 56px 0 80px; }
.legal-page .legal-body .container-narrow {
  max-width: 960px;
  padding-left: clamp(20px, 4vw, 32px);
  padding-right: clamp(20px, 4vw, 32px);
}

/* Effective date + intro */
.legal-page .legal-intro {
  margin: 0 0 40px;
  padding: 0 0 32px;
  border-bottom: 1px solid #e5e5e5;
}
.legal-page .legal-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.legal-page .legal-meta strong { font-weight: 700; margin-right: 8px; }
.legal-page .legal-intro p {
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 14px;
}
.legal-page .legal-intro p:last-child { margin-bottom: 0; }

/* TOC, the sole accent */
.legal-page .legal-toc {
  background: #ece5d3;
  border: 1px solid #000;
  border-left: 2px solid var(--champagne);
  padding: 32px 36px;
  margin: 0 0 56px;
}
.legal-page .legal-toc .label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 22px;
  display: block;
}
.legal-page .legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 32px;
  counter-reset: toc;
}
.legal-page .legal-toc li {
  counter-increment: toc;
  position: relative;
  padding-left: 32px;
  font-size: 13px;
  line-height: 1.55;
}
.legal-page .legal-toc li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0; top: 1px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #000;
  opacity: 1;
}
.legal-page .legal-toc a {
  text-decoration: none;
  font-weight: 400;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}
.legal-page .legal-toc a:hover,
.legal-page .legal-toc a:focus-visible { border-bottom-color: #000; }

/* Sections */
.legal-page .legal-section {
  padding: 40px 0 0;
  scroll-margin-top: 80px;
}
.legal-page .legal-section + .legal-section {
  border-top: 1px solid #e5e5e5;
  margin-top: 40px;
}
.legal-page .legal-body h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0 0 18px;
  padding: 0;
}
.legal-page .legal-body h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 24px 0 10px;
}
.legal-page .legal-body p,
.legal-page .legal-body li {
  font-size: 14px;
  line-height: 1.75;
  font-weight: 400;
  margin: 0 0 12px;
}
.legal-page .legal-body p:last-child,
.legal-page .legal-body li:last-child { margin-bottom: 0; }
.legal-page .legal-body ul {
  padding-left: 18px;
  margin: 0 0 14px;
}
.legal-page .legal-body a {
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.3);
  transition: border-color var(--t-fast);
}
.legal-page .legal-body a:hover { border-bottom-color: #000; }
.legal-page .legal-body strong { font-weight: 600; }

/* Back-to-top */
.legal-page .legal-backtop {
  margin: 28px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #e5e5e5;
  text-align: right;
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 600;
  text-transform: uppercase;
}
.legal-page .legal-backtop a {
  color: #000;
  border-bottom: none;
  display: inline-flex; gap: 6px; align-items: center;
  transition: color var(--t-fast);
}
.legal-page .legal-backtop a:hover { color: #000; }
.legal-page .legal-backtop a::before {
  content: "↑";
  color: #000;
  font-size: 11px;
}

/* Contact callout */
.legal-page .legal-callout {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-left: 2px solid #000;
  padding: 28px 32px;
  margin: 24px 0 0;
}
.legal-page .legal-callout p {
  font-size: 14px;
  line-height: 1.75;
  margin: 0;
}
.legal-page .legal-callout p + p {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
  color: #000;
}
.legal-page .legal-callout strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-block;
  margin: 0 0 6px;
}

/* ---------- Home page wordmark ---------- */
.page-wordmark {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  /* 2026-05-19, padding-top reduced from clamp(240, 30dvh, 360) to
     clamp(120, 15dvh, 200) then to clamp(80, 11dvh, 160) so the
     LEXINGTON wordmark sits higher on the hero (~11% of viewport
     height from top, well into the sky band). Uses dvh so the
     position scales with the hero's own dvh-based height
     (calc(100dvh - 93)). */
  padding-top: clamp(80px, 11dvh, 160px);
}
.page-wordmark span {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  /* 2026-05-18, Cormorant Garamond 600 shared with .nav__logo-mark.
     Cumulative typography reductions across this session:
       letter-spacing 0.42em (matched header) -> 0.21em (-50%)
                                              -> 0.105em (-50% again)
       font-size desktop clamp(40, 7vw, 84)  -> clamp(36, 6.3vw, 76) (-10%)
                                              -> clamp(32, 5.7vw, 68) (-10% again)
       font-size mobile  clamp(28, 9vw, 48)  -> clamp(25, 8.1vw, 43) (-10%)
                                              -> clamp(23, 7.3vw, 39) (-10% again)
     text-indent always matches letter-spacing to optically centre the
     tracked text within its centered container. */
  font-size: clamp(32px, 5.7vw, 68px);
  letter-spacing: 0.105em;
  text-indent: 0.105em;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
/* 2026-05-18, sub-tagline beneath the masthead. Inter sans (contrasts
   the serif Cormorant masthead above it), uppercase with wide-but-not-
   extreme tracking, 72% opacity so it reads as a side-line under the
   wordmark without competing with it. Sits on its own line via
   display:block; parent text-align:center centres the text. */
.page-wordmark small {
  display: block;
  /* 2026-05-19, returned to brand sans (Inter) at weight 500 for a
     more refined, premium caption beneath the Cormorant masthead.
     Color shifted from #000 (illegible against the dark hero) to
     warm ivory for clean contrast that harmonises with the white
     serif above without competing with the champagne CTAs. */
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(11px, 0.9vw, 14px);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-top: clamp(10px, 1vw, 16px);
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 960px) {
  .page-wordmark span {
    font-size: clamp(23px, 7.3vw, 39px);
  }
  .page-wordmark small {
    font-size: clamp(10px, 2.1vw, 12px);
    letter-spacing: 0.26em;
    text-indent: 0.26em;
    margin-top: clamp(7px, 1.6vw, 11px);
  }
}

/* ---------- Utility variants ---------- */
.lede--wide { max-width: 88ch; text-wrap: balance; }
.form-note a { text-decoration: underline; text-underline-offset: 2px; }
.article-back { margin-top: 40px; }

/* Honeypot (hidden from users; visible to naive bots) */
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Form submission error state */
.form-error {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding: 14px 16px;
  border-left: 3px solid #b04a4a;
  background: rgba(176, 74, 74, 0.08);
  color: #000;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.45;
}
.form-error a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Phase 3: Acquisition process timeline ---------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 9-step process at desktop sits cleanly as 3 × 3 (no orphan row).
     Falls back to 2-col on tablet, 1-col on small screens via media queries below. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
}
.timeline__step {
  background: var(--ivory);
  padding: clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 24px;
  align-items: start;
}
.timeline__step .num {
  font-family: var(--display);
  font-style: italic;
  /* 2026-05-18, heavier weight so italic Cormorant numerals read as
     solid black, not tan-grey, against the creme bg. */
  font-weight: 500;
  font-size: clamp(28px, 2.4vw, 36px);
  color: #000;
  line-height: 1;
  letter-spacing: -0.01em;
}
.timeline__step h3 {
  font-family: var(--display);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.2;
  color: #000;
  margin: 0 0 8px;
}
.timeline__step p {
  margin: 0;
  /* 2026-05-19, 14.5px -> 16px (1rem). Standardised with .mandate-card
     and other full-grid card body p for readability. */
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}
.timeline__link-row { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 14px; }
.timeline__link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #000;
  border-bottom: 1px solid var(--champagne-light);
  padding-bottom: 2px;
  text-decoration: none;
}
.timeline__link:hover { color: #000; border-bottom-color: var(--champagne); }
@media (max-width: 1024px) {
  .timeline { grid-template-columns: repeat(2, 1fr); }
  /* If the step count is odd at this breakpoint, the trailing step otherwise
     orphans into a half-empty row. Span it across both columns so the row
     reads as a deliberate finale rather than a layout accident. */
  .timeline__step:nth-child(odd):last-of-type { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .timeline { grid-template-columns: 1fr; }
  .timeline__step:nth-child(odd):last-of-type { grid-column: auto; }
}
@media (max-width: 480px) {
  .timeline__step {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
}

/* ---------- Phase 3: Representative mandate cards ---------- */
.mandate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
}
.mandate-card {
  background: var(--ivory-warm);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
  text-decoration: none;
  color: inherit;
}
.mandate-card .mandate__quote {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.3;
  color: #000;
}
.mandate-card p {
  margin: 0;
  /* 2026-05-19, 14.5px -> 16px (1rem). Matches the project's .body
     class baseline for readable card body text site-wide. Pairs with
     the same bump on .timeline__step p (default) and on
     .tenets--compact paragraphs. */
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}
.mandate-card .mandate__link {
  margin-top: auto;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #000;
  border-bottom: 1px solid var(--champagne-light);
  padding-bottom: 2px;
  align-self: flex-start;
  text-decoration: none;
}
.mandate-card .mandate__link:hover { color: #000; border-bottom-color: var(--champagne); }
.mandate-card--feature { grid-column: 1 / -1; }
.mandate-card--feature .mandate__quote { font-size: clamp(22px, 2vw, 28px); }
@media (max-width: 1024px) {
  .mandate-grid { grid-template-columns: repeat(2, 1fr); }
  .mandate-card--feature { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .mandate-grid { grid-template-columns: 1fr; }
}

/* ---------- Phase 3: Confidentiality note ---------- */
.confidentiality-note {
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--champagne-light);
  text-align: center;
}
.confidentiality-note p {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: #000;
}

/* ---------- Phase 3: Inquiry form, optional disclosure ---------- */
.form-extra {
  grid-column: 1 / -1;
  margin-top: 8px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}
.form-extra > summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #000;
  padding: 4px 0;
  list-style: none;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.form-extra > summary::-webkit-details-marker { display: none; }
.form-extra > summary::before {
  content: '+';
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: #000;
  line-height: 1;
  width: 14px;
  display: inline-block;
}
.form-extra[open] > summary::before { content: '–'; }
.form-extra__hint { color: #000; font-weight: 400; }
.form-extra__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(16px, 2vw, 24px);
  row-gap: clamp(20px, 2vw, 28px);
  padding-top: 24px;
}
@media (max-width: 768px) {
  .form-extra__grid { grid-template-columns: 1fr; }
}

/* ---------- Phase 4: Alignment principles list ---------- */
/* Single-block "Acting for the buyer" mandate statement on /purchases
   constrained width so the prose reads as an editorial passage rather
   than spanning the full container. Sits above .alignment-principles. */
.alignment-mandate {
  max-width: 720px;
}
.alignment-mandate p { margin: 0; }

/* About-page narrative sections (Our Philosophy + From the Principal)
   constrained to roughly the text-column width of the .split layout used
   in the "A bespoke advisory service" section below, so all three about-
   page narratives read at the same line length instead of having the
   centered ones stretch out to the full 960px container-narrow. */
.about-narrative {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.alignment-principles {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--rule);
  max-width: 960px;
}
.alignment-principles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.alignment-principles li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}
.alignment-principles li::before {
  content: '·';
  position: absolute;
  left: 0;
  top: -4px;
  font-size: 28px;
  font-family: var(--display);
  color: #000;
  line-height: 1;
}
.alignment-xref {
  font-size: 16px;
  line-height: 1.65;
  color: #000;
}
.alignment-xref__cta { margin-top: 18px; }

/* ---------- Phase 5: Common Acquisition Situations ---------- */
.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
}
.scenario-card {
  background: var(--ivory);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.scenario-card h3 {
  font-family: var(--display);
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.25;
  color: #000;
  margin: 0;
}
.scenario-card__details {
  margin: 8px 0 0;
  display: grid;
  gap: 18px;
}
.scenario-card__details > div { display: grid; gap: 6px; }
.scenario-card__details dt {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #000;
}
.scenario-card__details dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #000;
}
@media (max-width: 1024px) {
  .scenarios-grid { grid-template-columns: 1fr; }
}

/* ---------- Phase 7: Insights index, guide categories ---------- */
.guide-stream__head {
  margin-bottom: clamp(40px, 5vw, 72px);
}
.guide-categories {
  display: grid;
  gap: clamp(48px, 6vw, 80px);
}
.guide-category {
  display: grid;
  gap: clamp(20px, 2.5vw, 32px);
}
.guide-category__head {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr);
  gap: clamp(16px, 2vw, 32px);
  align-items: baseline;
  padding-bottom: clamp(14px, 1.5vw, 22px);
  border-bottom: 1px solid var(--rule);
}
.dark .guide-category__head { border-bottom-color: var(--rule-ivory); }
.guide-category__num {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 17px);
  color: #000;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.dark .guide-category__num { color: var(--champagne-light); }
.guide-category__title {
  font-family: var(--display);
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.25;
  color: #000;
  margin: 0;
}
.dark .guide-category__title { color: var(--white); }
.guide-category__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
@media (max-width: 768px) {
  .guide-category__cards { grid-template-columns: 1fr; }
  .guide-category__head { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Phase 7: Related insights block (article footers) ---------- */
.related-insights {
  margin-top: clamp(40px, 4vw, 56px);
  padding-top: clamp(24px, 2.5vw, 32px);
  border-top: 1px solid var(--champagne-light);
}
/* The label is a real h2 for accessibility; styling overrides the default h2 size. Specificity is bumped so .article-body h2 doesn't win. */
.related-insights .related-insights__label,
.article-body .related-insights__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #000;
  margin: 0 0 22px;
  line-height: 1;
}
.related-insights__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.related-insights__card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.article-body .related-insights__card { border-bottom: none; color: inherit; }
.related-insights__card h3 {
  font-family: var(--display);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.25;
  color: #000;
  margin: 0 0 10px;
}
.related-insights__card p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #000;
}
.related-insights__card .related-insights__link {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #000;
  border-bottom: 1px solid var(--champagne-light);
  padding-bottom: 2px;
}
.related-insights__card:hover h3 { color: #000; }
.related-insights__card:hover .related-insights__link { color: #000; border-bottom-color: var(--champagne); }
@media (max-width: 768px) {
  .related-insights__grid { grid-template-columns: 1fr; }
}

/* ---------- Contact page: direct email block ---------- */
.contact-direct__email-line {
  margin: clamp(20px, 2vw, 28px) 0 0;
}
.contact-direct__email {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  color: #000;
  border-bottom: 1px solid var(--champagne-light);
  padding-bottom: 4px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.contact-direct__email:hover { color: #000; border-bottom-color: var(--champagne); }
.contact-direct__address {
  margin-top: clamp(28px, 3vw, 40px);
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}

/* ---------- Contact page: "what to expect" three-step process ---------- */
.contact-process ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.contact-process li {
  background: var(--ivory);
  padding: clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 18px;
  align-items: start;
}
.contact-process__num {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 1.6vw, 24px);
  color: #000;
  line-height: 1;
  letter-spacing: 0;
}
.contact-process h3 {
  font-family: var(--display);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.2;
  color: #000;
  margin: 0 0 8px;
}
.contact-process p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #000;
}
@media (max-width: 768px) {
  .contact-process ol { grid-template-columns: 1fr; }
}

/* ---------- Contact page: expandable inquiry cards ---------- */
.contact-card {
  background: var(--ivory);
  margin-top: 18px;
  border-top: 1px solid var(--rule);
}
.contact-card:first-of-type { margin-top: clamp(32px, 4vw, 48px); }
.contact-card[open] { background: var(--bone); }
.contact-card__summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: clamp(24px, 2.5vw, 32px) clamp(20px, 2vw, 28px);
  transition: background var(--t-fast);
}
.contact-card__summary::-webkit-details-marker { display: none; }
.contact-card__summary:hover { background: var(--bone); }
.contact-card__label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-card__title {
  font-family: var(--display);
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.2;
  color: #000;
}
.contact-card__hint {
  font-family: var(--sans);
  font-size: 13px;
  color: #000;
  letter-spacing: 0.01em;
}
.contact-card__chevron {
  width: 28px;
  height: 28px;
  position: relative;
  flex-shrink: 0;
  transition: transform var(--t-med);
}
/* Two thin lines forming a downward-pointing caret. Rotates 180° to point up when card is open. */
.contact-card__chevron::before,
.contact-card__chevron::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 1.5px;
  background: var(--champagne-ink);
  top: 50%;
  border-radius: 0.5px;
  transition: background var(--t-fast);
}
.contact-card__chevron::before { left: 4px; transform: translateY(-50%) rotate(35deg); transform-origin: right center; }
.contact-card__chevron::after  { right: 4px; transform: translateY(-50%) rotate(-35deg); transform-origin: left center; }
.contact-card[open] .contact-card__chevron { transform: rotate(180deg); }
.contact-card__summary:hover .contact-card__chevron::before,
.contact-card__summary:hover .contact-card__chevron::after { background: var(--champagne); }
.contact-card__body {
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2vw, 28px) clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--rule);
}

/* Spacing between centered prose-stack and the 3-column tenets row in the
   manufacturer-page "Technology-supported representation" section. */
.tenets--tech { margin-top: clamp(40px, 5vw, 64px); }

/* ---------- Contact page (.contact-page body class) ----------
   Migrated from the inline <style> block on contact.html. All selectors are
   scoped under .contact-page so the rules only apply to that page. */

.contact-page .contact-hero {
  position: relative;
  background: var(--navy-deep);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 80px);
}
.contact-page .contact-hero::before,
.contact-page .contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.contact-page .contact-hero::before {
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(20, 48, 79, 0.65), transparent 65%);
}
.contact-page .contact-hero::after {
  background: linear-gradient(180deg, transparent 0%, transparent calc(100% - 1px), rgba(255,255,255,0.10) 100%);
}
.contact-page .contact-hero > .container { position: relative; z-index: 1; }
.contact-page .contact-hero .crumbs { color: var(--white); margin-bottom: 32px; }
.contact-page .contact-hero .crumbs a { color: var(--white); }
.contact-page .contact-hero .crumbs a:hover { color: var(--champagne-light); }
.contact-page .contact-hero .crumbs span { color: var(--white); }
.contact-page .contact-hero .eyebrow { color: var(--champagne-light); }
.contact-page .contact-hero .eyebrow::before { background: var(--champagne-light); }
.contact-page .contact-hero h1 {
  color: var(--white);
  margin: 24px 0 0;
  line-height: 1.04;
  padding-bottom: 0.08em;
}
.contact-page .contact-hero h1 em {
  font-style: italic;
  color: var(--champagne-light);
  font-weight: 500;
}

/* 2026-05-20, two-column hero: heading block (eyebrow + h1 + lede) on the
   left, the address card top-aligned beside it on the right. */
.contact-page .contact-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.contact-page .contact-hero__lede {
  margin: clamp(32px, 4vw, 52px) 0 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.5;
  color: var(--on-dark-1);
  max-width: 38ch;
  letter-spacing: -0.005em;
}
.contact-page .contact-hero__lede em { font-style: italic; color: var(--champagne-light); }

.contact-page .address-card {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(2px);
  padding: clamp(36px, 3.7vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.contact-page .address-card__row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-page .address-card__label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne-light);
}
.contact-page .address-card__email {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 10px;
  transition: color var(--t-fast), border-color var(--t-fast);
  word-break: break-word;
}
.contact-page .address-card__email:hover { color: var(--champagne-light); border-bottom-color: var(--champagne-light); }
.contact-page .address-card__location {
  font-family: var(--display);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.55;
  color: var(--on-dark-1);
  margin: 0;
}
.contact-page .address-card__rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 0;
  margin: 4px 0 0;
}
.contact-page .address-card__note {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--white);
  margin: 0;
}

.contact-page .inquiry-intro {
  text-align: center;
  max-width: 960px;
  margin: 0 auto clamp(24px, 3vw, 40px);
}
.contact-page .inquiry-intro .eyebrow { justify-content: center; }
.contact-page .inquiry-intro h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(48px, 7vw, 120px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #000;
  margin: 14px auto 0;
  max-width: none;
}
.contact-page .inquiry-intro h2 em {
  font-style: italic;
  color: #000;
  font-weight: 500;
}
.contact-page .inquiry-intro__sub {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.55;
  color: #000;
  max-width: 56ch;
  margin: 16px auto 0;
}

.contact-page .inquiry-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* When a card is expanded, collapse to one column so the open card's
   form spans the full width; side-by-side only while both are closed. */
.contact-page .inquiry-cards:has(.inquiry-card[open]) {
  grid-template-columns: 1fr;
}

.contact-page .inquiry-confidential {
  margin: clamp(28px, 3.5vw, 44px) auto 0;
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: #000;
  text-align: center;
  max-width: none;
  letter-spacing: 0.005em;
}

/* 2026-05-20, the collapsed card reads as a solid navy "button" inside a
   thick black frame. On hover/focus the frame lights champagne and the
   fill lifts in tone. Opening it flips the card to a light panel. */
.contact-page .inquiry-card {
  background: var(--navy);
  border: 2px solid #000;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.contact-page .inquiry-card:not([open]):hover,
.contact-page .inquiry-card:not([open]):focus-within {
  background: var(--navy-soft);
  border-color: var(--champagne);
}
.contact-page .inquiry-card[open] {
  background: var(--white);
  border-color: rgba(10, 26, 47, 0.20);
}
.contact-page .inquiry-card__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 32px);
  transition: background var(--t-fast);
}
.contact-page .inquiry-card__summary::-webkit-details-marker { display: none; }
.contact-page .inquiry-card__summary:focus-visible {
  outline: 2px solid var(--champagne-light);
  outline-offset: 3px;
}
.contact-page .inquiry-card__label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-page .inquiry-card__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  color: var(--white);
  letter-spacing: -0.005em;
  transition: color var(--t-fast);
}
.contact-page .inquiry-card__hint {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.01em;
  transition: color var(--t-fast);
}
/* Open state — light panel, dark text for the form. */
.contact-page .inquiry-card[open] .inquiry-card__title { color: #000; }
.contact-page .inquiry-card[open] .inquiry-card__hint { color: #000; }
.contact-page .inquiry-card__chevron {
  width: 32px;
  height: 32px;
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: 50%;
  transition: border-color var(--t-med), background var(--t-med);
}
.contact-page .inquiry-card__chevron::before,
.contact-page .inquiry-card__chevron::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--white);
  transform: translate(-50%, -50%);
  transition: transform var(--t-med), opacity var(--t-med);
}
.contact-page .inquiry-card__chevron::before { width: 12px; height: 1px; }
.contact-page .inquiry-card__chevron::after  { width: 1px;  height: 12px; }
.contact-page .inquiry-card:not([open]):hover .inquiry-card__chevron,
.contact-page .inquiry-card:not([open]):focus-within .inquiry-card__chevron,
.contact-page .inquiry-card[open] .inquiry-card__chevron {
  border-color: var(--champagne);
  background: var(--champagne);
}
.contact-page .inquiry-card[open] .inquiry-card__chevron::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.contact-page .inquiry-card__body {
  padding: clamp(8px, 1.5vw, 16px) clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--rule);
}
.contact-page .inquiry-card__intro {
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: #000;
  /* 2026-05-21, max-width lifted so the longer manufacturer intro sits
     on a single line at desktop widths; margins tightened to remove the
     excess blank space above the form. */
  max-width: none;
  margin: clamp(10px, 1.4vw, 16px) 0 clamp(16px, 2vw, 24px);
}

/* 2026-05-20, contact inquiry forms: pure-white surface with larger,
   more legible serif labels and input text. Scoped to .contact-page so
   the shared .form-card on /purchases is unaffected. */
.contact-page .form.form-card {
  background: var(--white);
  /* 2026-05-21, tighter card padding and field row gap so both
     expandable forms read compact, without the prior excess whitespace. */
  padding: clamp(20px, 2.6vw, 36px);
  gap: 16px 32px;
}
.contact-page .form.form-card .field label {
  font-size: 19px;
  font-weight: 600;
}
/* 2026-05-21, contact inquiry inputs — light-gray fill (instead of the
   cream --ivory) and a larger 19px type size for both expandable forms.
   The :focus rule re-asserts the white fill so the focus cue survives. */
.contact-page .form.form-card .field input,
.contact-page .form.form-card .field select,
.contact-page .form.form-card .field textarea {
  font-size: 19px;
  padding: 16px 16px;
  background: #e8e8e8;
}
.contact-page .form.form-card .field input:focus,
.contact-page .form.form-card .field select:focus,
.contact-page .form.form-card .field textarea:focus {
  background: var(--white);
}
.contact-page .form.form-card .field input::placeholder,
.contact-page .form.form-card .field textarea::placeholder {
  opacity: 0.55;
}

.contact-page .contact-coda {
  text-align: center;
  padding: clamp(40px, 5vw, 64px) 0;
  background: var(--ivory);
}
.contact-page .contact-coda .eyebrow { justify-content: center; color: #000; }
.contact-page .contact-coda .eyebrow::before { background: var(--champagne-ink); }
.contact-page .contact-coda h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.15;
  color: #000;
  margin: 18px auto 0;
  max-width: 22ch;
}
.contact-page .contact-coda h3 em { font-style: italic; color: #000; font-weight: 500; }
.contact-page .contact-coda__email {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: #000;
  border-bottom: 1px solid var(--champagne);
  padding-bottom: 4px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.contact-page .contact-coda__email:hover { color: #000; border-bottom-color: var(--champagne-ink); }

@media (max-width: 880px) {
  .contact-page .contact-hero__grid { grid-template-columns: 1fr; align-items: stretch; }
  .contact-page .inquiry-intro { margin-bottom: clamp(22px, 4vw, 36px); }
  .contact-page .inquiry-cards { grid-template-columns: 1fr; }
  .contact-page .inquiry-card__summary { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .contact-page .address-card { padding: 24px; }
  .contact-page .inquiry-card__chevron { width: 28px; height: 28px; }
  .contact-page .inquiry-card__chevron::before { width: 10px; }
  .contact-page .inquiry-card__chevron::after  { height: 10px; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .topline, .site-footer, .callout, .skip-link, .mobile-menu { display: none; }
  body { background: #fff; color: #000; }
  .hero, .page-hero { min-height: 0; color: #000; }
  .hero__bg, .hero__scrim { display: none; }
  .section, .section-sm { padding: 24px 0; }
  a { color: #000; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10px; color: #000; }
  a[href^="#"]::after, a[href^="mailto:"]::after { content: ""; }
  h1, h2, h3 { page-break-after: avoid; }
  p, li { page-break-inside: avoid; }
}

/* ==========================================================================
   2026-05-20, Acquisition + Manufacturer page rebuild.
   Additive, page-scoped classes for the rebuilt /purchases and /manufacturer
   pages. No existing selector is modified, so every other page renders
   exactly as before.
   ========================================================================== */

/* Editorial split, image-left variant. The base .split keeps text first in
   the DOM so mobile always stacks the copy above the image; this modifier
   moves the media into the left column on desktop only (>=961px) and gives
   the text column the slightly wider track. Below 961px the base single-
   column stack applies and source order (text first) is preserved. */
@media (min-width: 961px) {
  .split--media-left { grid-template-columns: 1fr 1.1fr; }
  .split--media-left .split__media { order: -1; }
}

/* Mandate tile heading. The rebuilt Acquisition mandates use a plain title
   rather than the older italic pull-quote; .mandate-card * is already forced
   to #000 by the card-text contract, so only the type treatment is set here. */
.mandate-card h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.2;
  margin: 0;
}

/* Vertical rhythm when a full-width card grid follows a two-column split
   intro inside the same section (Acquisition mandates and situations,
   Manufacturer profile and market-entry grids). Mirrors the existing
   `.split + .tenets` spacing. */
.split + .mandate-grid,
.split + .scenarios-grid,
.split + .process {
  margin-top: clamp(48px, 6vw, 88px);
}

/* Checklist, a refined review list used in the Diligence Standard, the
   Direct-to-Buyer proof points, and the U.S. Market Intelligence list.
   Auto-fits to two columns inside a split text column and one column when
   narrow. The marker is a short hairline echoing the site's editorial rule
   motif; item colour is inherited from the section alternation. */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 32px;
}
.checklist li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 14px;
  height: 1px;
  background: var(--champagne);
}
/* On navy (even) alternation sections the navy hairline marker would vanish;
   invert it to the light tone, mirroring the site's other hairline inverts. */
main :nth-child(even of .section, .section-sm) .checklist li::before {
  background: var(--champagne-light);
}

/* Compact-timeline step body copy. The rebuilt five-step processes add a
   short description beneath each step title; the base compact variant
   carried titles only. */
.timeline--compact .timeline__step p {
  font-size: 14px;
  line-height: 1.55;
  margin: 4px 0 0;
}

/* Interior-hero call-to-action cluster. The rebuilt Acquisition and
   Manufacturer heroes carry a primary button plus a secondary text link;
   these are the only interior heroes that do, so the cluster is its own
   scoped class rather than a change to the shared .actions rule. */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(28px, 3.4vw, 44px);
}

/* Primary CTA placed directly on a navy section. The default .btn--champagne
   is a navy fill, which disappears against a navy alternation band; this
   opt-in modifier swaps to the white fill used on the hero and callout.
   Applied only where a champagne CTA lands on navy, so no other page or
   the light-card form submit buttons are affected. */
.btn--champagne.btn--on-navy {
  background: var(--white);
  color: #000;
  border-color: #000;
}
.btn--champagne.btn--on-navy:hover {
  background: var(--ivory);
  color: #000;
  border-color: #000;
}

/* CTA pair, a primary button beside a secondary text link, laid out in one
   row within a content section. Wraps to a stack on narrow widths. */
.cta-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
}

/* Lean tenets. The base .tenet h3 reserves three lines of title height,
   which left a visible gap above the body copy (card titles run one to two
   lines). Drop the reservation so the body sits directly beneath the title,
   and set the title to 600 weight, matching the service and compact-tenet
   card titles. Used on the rebuilt Acquisition / Manufacturer card grids and
   the homepage Manufacturer Partners grid. */
.tenets--lean .tenet h3 {
  /* 2026-05-21, reserve two title lines so body copy aligns across a
     row when some card titles wrap to two lines and others do not. */
  min-height: calc(1.15em * 2);
  font-weight: 600;
}

/* 2026-05-21, manufacturer Builder Fit section: tighter section padding
   and card padding. The intro copy + builder-type cards run in the left
   column of a media-split, with a New York yachting image filling the
   right column to the same height. */
#builder-fit {
  padding-top: clamp(36px, 3.5vw, 60px);
  padding-bottom: clamp(36px, 3.5vw, 60px);
}
#builder-fit .tenet {
  padding: clamp(16px, 1.6vw, 24px);
  gap: 10px;
}

/* 2026-05-20, purchases page, enlarged narrative body copy. The six
   acquisition sections carry the page's core argument; their body copy
   reads one step larger than the site default for presence and ease of
   reading. Scoped by section id so no other page is affected. */
#exclusive-access .body-lg,
#clients .body-lg,
#advantage .body-lg,
#mandate .body-lg,
#process .body-lg,
#privacy .body-lg {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
}

/* 2026-05-21, purchases Clients section. Intro copy pairs with the
   photo in a split--tall row; the four client cards run as a single
   full-width row beneath it. */
@media (min-width: 961px) {
  #clients .tenets { grid-template-columns: repeat(4, 1fr); }
}

/* 2026-05-20, purchases card grids, tightened. The base .tenet reserves
   a 320px min-height with generous padding; on the lean acquisition
   grids that left visible empty space below shorter cards. Size cards
   to their content with trimmer padding. */
.tenets--lean .tenet {
  min-height: 0;
  padding: clamp(24px, 2.4vw, 36px);
  gap: 12px;
}

/* 2026-05-20, purchases inquiry section, reduced height (~25%). Trims
   section padding, the form-card padding/offset, the field grid gap,
   and the message box so the closing section reads markedly shorter
   without crowding the form. Scoped to #form so contact.html is safe. */
#form {
  padding-top: clamp(20px, 2.5vw, 40px);
  padding-bottom: clamp(40px, 4vw, 68px);
}
#form .form { gap: 16px 32px; }
#form .form.form-card {
  padding: clamp(24px, 3vw, 44px);
  margin-top: clamp(16px, 2vw, 28px);
}
#form .field textarea { min-height: 96px; }

/* 2026-05-20, homepage Manufacturer Partners cards, bolder & tighter.
   Bold the card titles and drop the 3-line title reservation + 320px
   min-height so body copy sits directly under each title. */
#manufacturer-partners .tenet {
  min-height: 0;
  padding: clamp(24px, 2.4vw, 36px);
  gap: 12px;
}
#manufacturer-partners .tenet h3 {
  min-height: 0;
  font-weight: 600;
}

/* 2026-05-21, purchases inquiry form, larger & bolder fields. The
   default labels/inputs read small; bump size and weight inside #form
   only so the form is easy to read (contact.html keeps its own scale). */
#form .form.form-card .field label {
  font-size: 17px;
  font-weight: 600;
}
#form .form.form-card .field input,
#form .form.form-card .field select,
#form .form.form-card .field textarea {
  font-size: 17px;
  font-weight: 500;
}

/* 2026-05-21, purchases page section numbering. Standalone label at the
   top of each acquisition section, matching the homepage's
   .section-head .num style for cross-page consistency. */
.section > .container > .num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 18px);
  color: #000;
  letter-spacing: .02em;
  margin-bottom: clamp(20px, 2.4vw, 36px);
}
main :nth-child(even of .section, .section-sm) > .container > .num {
  color: var(--white);
}

/* 2026-05-21, split--tall sections. The image fills the text-column
   height; drop the trailing paragraph margin so the image ends flush
   with the last line of copy instead of overshooting it. */
.split.split--tall .body-lg:last-of-type {
  margin-bottom: 0;
}

/* 2026-05-21, reusable centered section intro (eyebrow + heading +
   lede), placed above a split layout. */
.section-intro {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(32px, 4vw, 56px);
  text-align: center;
}

/* 2026-05-21, purchases Process section: image to the right of the
   copy, black step numbers, and larger step text for readability. */
#process .media-split__media { order: 1; }
#process .timeline--compact .timeline__step .num { color: #000 !important; }
#process .timeline--compact .timeline__step h3 { font-size: clamp(19px, 1.5vw, 23px); }
#process .timeline--compact .timeline__step p { font-size: 16px; }

/* 2026-05-21, purchases Privacy cards: larger text for readability. */
#privacy .tenet h3 { font-size: clamp(19px, 1.5vw, 22px); }
#privacy .tenet .body,
#privacy .tenet p { font-size: 16px; }

/* 2026-05-21, purchases Privacy 2x2 cards — explicit gridlines. The
   inherited gap:1px/background trick collapses at sub-pixel, so the
   hairlines are drawn as borders: top rule between rows, left rule
   between columns. On mobile the grid stacks 1-up — drop the left
   rules and rule every card off the one above it. */
#privacy .tenets--compact {
  gap: 0;
  background: transparent;
}
#privacy .tenets--compact .tenet {
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
#privacy .tenets--compact .tenet:nth-child(-n + 2) { border-top: 0; }
#privacy .tenets--compact .tenet:nth-child(2n + 1) { border-left: 0; }
@media (max-width: 960px) {
  #privacy .tenets--compact .tenet { border-left: 0; border-top: 1px solid var(--rule); }
  #privacy .tenets--compact .tenet:first-child { border-top: 0; }
}

/* 2026-05-21, contact page, footer pinned to the viewport bottom. On
   tall viewports the page is shorter than the screen, which left an
   ivory band beneath the navy footer. Make the body a min-height flex
   column so the footer always closes the page, and let the "Get in
   Touch" section grow to absorb the leftover height with its content
   centered. Scoped to .contact-page; no other page is affected. */
body.contact-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.contact-page main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
body.contact-page main > .section {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 2026-05-21, about page, larger tenet body copy for readability.
   The base .body is 16px; bump the three principle cards to 17px. */
body.about-page .tenet .body {
  font-size: 17px;
}

/* 2026-05-21, about page closing callout on the navy ground. Equalize
   top/bottom padding (the .section + .callout collapse trims only the
   top) so the content sits centered in a tight closing band. */
body.about-page .callout {
  padding-top: clamp(32px, 3.6vw, 56px);
  padding-bottom: clamp(32px, 3.6vw, 56px);
}

/* 2026-05-21, purchases #mandate buyer-scenario cards, larger body
   copy for readability (16px -> 17px). Scoped to the purchases page
   so the manufacturer page's #mandate section is unaffected. */
body.purchases-page #mandate .tenet .body {
  font-size: 17px;
}

/* 2026-05-21, homepage Clients section. The Purchase CTA is a full-width
   button spanning the Buyer Representation grid; add breathing room above
   it so it does not crowd the grid. */
#clientele .media-split__content .btn {
  margin-top: clamp(10px, 1.4vw, 20px);
}

/* 2026-05-21, homepage Manufacturer Partnership section. The Partner CTA
   is a full-width button; keep it clear of the paragraph above. This navy
   alternation band needs the champagne variant inverted to the white-fill
   on-dark treatment (matching .hero / .callout) so the button reads. */
#manufacturer-partners .split .btn {
  margin-top: clamp(18px, 2.2vw, 32px);
}
#manufacturer-partners .btn--champagne {
  background: var(--white);
  color: #000;
  border-color: #000;
}
#manufacturer-partners .btn--champagne:hover {
  background: var(--ivory);
  color: #000;
}

/* 2026-05-21, homepage Practice cards, in-card CTA button. The card is
   itself the link; this .btn is a visual cue and the .service anchor
   carries the navigation. align-self keeps it content-width. */
.services .service .btn {
  align-self: flex-start;
}

/* 2026-05-21, footer wordmark. A small centered LEXINGTON mark, absolutely
   positioned so it sits within the original slim footer height without
   adding vertical space. Display face + tracking of .nav__logo-mark.
   Below 960px it returns to normal flow above the stacked footer rows. */
.footer-wordmark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: 0.315em;
  text-indent: 0.315em;
  line-height: 1;
  text-align: center;
  color: var(--on-dark-1);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 960px) {
  .footer-wordmark {
    position: static;
    transform: none;
    margin: 0 0 clamp(10px, 2vw, 16px);
  }
}

/* 2026-05-21, homepage Practice card CTA buttons, hover legibility. The
   ".service * { color:#000 !important }" visibility contract also pins
   the in-card .btn label to black, so on the navy hover fill it read
   black-on-navy. Re-assert white on hover for the label and its arrow. */
.services .service .btn--ghost:hover,
.services .service .btn--ghost:hover * {
  color: var(--white) !important;
}

/* 2026-05-21, about page Tenets section, compressed vertically. The
   single-word principle titles need neither the 3-line h3 reservation
   nor the 320px card min-height; trim both, the card padding, and the
   section padding to remove the dead vertical space. */
body.about-page .section:has(.tenets) {
  padding-top: clamp(40px, 4.5vw, 72px);
  padding-bottom: clamp(40px, 4.5vw, 72px);
}
body.about-page .tenet {
  min-height: 0;
  padding: clamp(18px, 1.8vw, 28px);
  gap: 12px;
}
body.about-page .tenet h3 {
  min-height: 0;
}

/* 2026-05-21, homepage Clients ("Who we work with") grid, reliable
   gridlines. The shared .tenets gap:1px + background hairline trick can
   drop a divider between rows when the reveal-animated cards composite.
   Draw the dividers as explicit 1px borders instead, scoped to
   #clientele so other tenet grids keep the gap mechanism. */
#clientele .tenets {
  gap: 0;
  background: transparent;
}
#clientele .tenet {
  border-top: 1px solid var(--rule);
}
#clientele .tenet:nth-child(-n + 2) {
  border-top: 0;
}
#clientele .tenet:nth-child(even) {
  border-left: 1px solid var(--rule);
}
@media (max-width: 600px) {
  #clientele .tenet { border-left: 0; }
  #clientele .tenet:nth-child(2) { border-top: 1px solid var(--rule); }
}

/* 2026-05-21, manufacturer Builder Fit grid, reliable gridlines + vertical
   compression. Same .media-split + .tenets--compact pattern as #clientele:
   the gap:1px hairline trick drops the row 2 / row 3 divider, so draw the
   dividers as explicit 1px --rule borders. Trim the card top / bottom
   padding to compress the section and pull out the excess blank space. */
#builder-fit .tenets {
  gap: 0;
  background: transparent;
}
#builder-fit .tenet {
  border-top: 1px solid var(--rule);
  padding-top: clamp(13px, 1.3vw, 18px);
  padding-bottom: clamp(13px, 1.3vw, 18px);
}
#builder-fit .tenet:nth-child(-n + 2) {
  border-top: 0;
}
#builder-fit .tenet:nth-child(even) {
  border-left: 1px solid var(--rule);
}
@media (max-width: 600px) {
  /* Match the :nth-child(even) specificity so the single-column layout
     actually clears the vertical divider. */
  #builder-fit .tenet:nth-child(even) { border-left: 0; }
  #builder-fit .tenet:nth-child(2) { border-top: 1px solid var(--rule); }
}

/* 2026-05-21, manufacturer Sales Execution timeline, black step numbers.
   Matches the #process timeline treatment on the purchases page. */
#execution .timeline--compact .timeline__step .num {
  color: #000 !important;
}

/* 2026-05-21, purchases #mandate buyer-scenario cards, compressed and
   reliable gridlines. Trim the card padding and drop the 2-line h3
   reservation; replace the fragile .tenets gap:1px hairline with
   explicit 1px borders so every divider renders. The dividers are set
   in --navy (not the faint --rule hairline) so they match the navy
   section field that frames the ivory card grid. 3-up above 960px,
   1-up below. Scoped to the purchases page. */
body.purchases-page #mandate .tenets {
  gap: 0;
  background: transparent;
}
body.purchases-page #mandate .tenet {
  padding: clamp(12px, 1.3vw, 18px) clamp(16px, 1.7vw, 24px);
  gap: 6px;
  border-top: 1px solid var(--navy);
  border-left: 1px solid var(--navy);
}
body.purchases-page #mandate .tenet h3 {
  min-height: 0;
}
body.purchases-page #mandate .tenet:nth-child(-n + 3) { border-top: 0; }
body.purchases-page #mandate .tenet:nth-child(3n + 1) { border-left: 0; }
@media (max-width: 960px) {
  body.purchases-page #mandate .tenet { border-left: 0; }
  body.purchases-page #mandate .tenet:nth-child(-n + 3) { border-top: 1px solid var(--navy); }
  body.purchases-page #mandate .tenet:first-child { border-top: 0; }
}

/* 2026-05-21, manufacturer #mandate value cards, reliable gridlines.
   The ivory card row sits on the navy section field; replace the faint
   --rule gap hairline with explicit --navy dividers so every gridline
   matches the navy frame. 3-up above 960px, 1-up below. */
body.manufacturer-page #mandate .tenets {
  gap: 0;
  background: transparent;
}
body.manufacturer-page #mandate .tenet {
  border-left: 1px solid var(--navy);
  /* 2026-05-21, drop the base .tenet 320px min-height so the value cards
     size to their content instead of carrying a tall blank lower half. */
  min-height: 0;
}
/* Drop the .tenets--lean two-line title reservation: all three titles run
   one line here, so the reservation only adds a blank line above the body. */
body.manufacturer-page #mandate .tenet h3 { min-height: 0; }
body.manufacturer-page #mandate .tenet:nth-child(3n + 1) { border-left: 0; }
@media (max-width: 960px) {
  body.manufacturer-page #mandate .tenet { border-left: 0; border-top: 1px solid var(--navy); }
  body.manufacturer-page #mandate .tenet:first-child { border-top: 0; }
}

/* 2026-05-21, manufacturer #demand cards, reliable gridlines. Replace
   the fragile .tenets gap:1px hairline with explicit 1px borders.
   3-up above 960px (two vertical dividers), 1-up below. */
#demand .tenets {
  gap: 0;
  background: transparent;
}
#demand .tenet {
  border-left: 1px solid var(--rule);
}
#demand .tenet:nth-child(3n + 1) { border-left: 0; }
@media (max-width: 960px) {
  #demand .tenet { border-left: 0; border-top: 1px solid var(--rule); }
  #demand .tenet:first-child { border-top: 0; }
}

/* 2026-05-21, homepage Practice card 03 (Manufacturer Representation),
   shift the image crop fully right so the advisor is in frame instead
   of the photo cropping to the moored yacht. */
.services .service:nth-child(3) .service__img img {
  object-position: 100% 55%;
}

/* 2026-05-21, homepage Clients ("Who we work with") cards, larger body
   copy for readability. Compact tenets default to 14px; bump to 16px. */
#clientele .tenet .body {
  font-size: 16px;
}

/* 2026-05-21, homepage Clients section, vertically compress the tenet
   cards so a Purchase link fits beneath the grid without lengthening
   the section. The link routes to the purchases-page contact form and
   is set in the navy brand colour. */
#clientele .tenet {
  padding-top: clamp(13px, 1.3vw, 18px);
  padding-bottom: clamp(13px, 1.3vw, 18px);
}
#clientele .link-inline {
  align-self: start;
  color: var(--navy);
}

/* 2026-05-21, purchases #exclusive-access cards, compressed with
   reliable gridlines. Drop the h3 reservation gap and trim padding to
   remove the blank space; replace the fragile .tenets gap:1px hairline
   with explicit 1px borders so the divider between every card renders.
   3-up above 960px, 1-up below. */
#exclusive-access .tenets {
  gap: 0;
  background: transparent;
}
#exclusive-access .tenet {
  padding: clamp(16px, 1.7vw, 24px);
  gap: 8px;
  border-left: 1px solid var(--rule);
}
#exclusive-access .tenet h3 {
  min-height: 0;
}
#exclusive-access .tenet:nth-child(3n + 1) {
  border-left: 0;
}
@media (max-width: 960px) {
  #exclusive-access .tenet { border-left: 0; border-top: 1px solid var(--rule); }
  #exclusive-access .tenet:first-child { border-top: 0; }
}

/* 2026-05-21, homepage section 02 ("The Lexington Difference") redesign.
   The three pillars run as a horizontal 3-up across the full width, with
   a full-width image below. Pillars stack to a single column under 960px. */
.difference-media {
  margin-top: clamp(32px, 4vw, 56px);
}
.difference-media img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 960px) {
  .pillars { grid-template-columns: 1fr; }
}

/* 2026-05-21, inquiry form, image height matches the form card. The
   split--tall row already sizes the image column to the form column;
   give the image the same top offset as the form-card so it lines up
   with the card exactly instead of overhanging it. */
#form .split__media {
  margin-top: clamp(16px, 2vw, 28px);
}

/* 2026-05-21, manufacturer Sales Execution media column — two stacked
   images of equal height (the existing image at half its former height,
   a marina image beneath it) filling the media-split column. */
#execution .media-split__media {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(10px, 1.2vw, 18px);
}
#execution .media-split__media img {
  position: static;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
@media (max-width: 960px) {
  #execution .media-split__media { grid-template-rows: auto auto; }
  #execution .media-split__media img { height: auto; }
}

/* 2026-05-21, about page Tenets, media-split layout. The moored-yacht
   image fills the left half; the three principles stack 1-up in the
   content half as a flush, hairline-ruled editorial list (no card fill,
   no horizontal padding) so they align under the section heading. The
   section falls on a navy alternation band, so the list inverts to white
   text, champagne numerals, and ivory hairline dividers. */
#tenets .tenets--compact {
  grid-template-columns: 1fr;
  gap: 0;
  background: transparent;
}
#tenets .tenet {
  background: transparent;
  border-top: 1px solid var(--rule-ivory);
  padding-left: 0;
  padding-right: 0;
}
#tenets .tenet:first-child {
  border-top: 0;
}
/* The card-text safety rule (.tenet * { color:#000 !important }) presumes
   each tenet paints its own ivory fill; this flush list has none, so the
   on-dark palette is re-asserted with !important to win the cascade. */
#tenets .tenet h3 {
  color: var(--white) !important;
}
#tenets .tenet .body {
  color: var(--white) !important;
  font-size: 16px;
}
#tenets .tenet .eyebrow {
  color: var(--champagne-light) !important;
}

/* 2026-05-21, about page "The Difference", the direct-to-buyer model set
   out as three hairline-ruled principles below the section lede. Each
   term is a Cormorant sub-head; the rows align flush under the heading.
   Heading, lede and row spacing are tightened to compress the section. */
#difference h2 { margin-bottom: clamp(12px, 1.3vw, 18px); }
#difference .lede { margin-bottom: clamp(16px, 1.9vw, 24px); }
#difference .model-points {
  margin: clamp(14px, 1.7vw, 24px) 0 0;
}
#difference .model-point {
  padding: clamp(11px, 1.2vw, 16px) 0;
  border-top: 1px solid var(--rule);
}
#difference .model-point:first-child {
  border-top: 0;
}
#difference .model-point dt {
  font-family: var(--display);
  font-size: clamp(19px, 1.5vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 5px;
}
#difference .model-point dd {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
}

/* 2026-05-21, homepage hero stats. The vessel-length stat now reads
   "50' to 200'+" (en-dash removed); step the number size down a touch so
   the longer range value sits on one line alongside the word stats. */
.hero-stats .stat__num {
  font-size: clamp(40px, 4vw, 60px);
}
.hero-stats .stat:last-child .stat__num {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .hero-stats .stat:last-child .stat__num {
    white-space: normal;
  }
}

/* 2026-05-21, purchases Advantage section, vertical compression. All three
   tenet titles fit on one line, so the reserved two-line title height is
   collapsed to one; card padding, the split-to-grid gap, and the section's
   lower padding are trimmed so the section reads markedly shorter. */
#advantage .tenets--lean .tenet h3 { min-height: 1.15em; }
#advantage .tenets--lean .tenet {
  padding-top: clamp(18px, 1.8vw, 26px);
  padding-bottom: clamp(18px, 1.8vw, 26px);
  gap: 10px;
}
#advantage .split + .tenets { margin-top: clamp(20px, 2.4vw, 34px); }
#advantage { padding-bottom: clamp(26px, 2.4vw, 40px); }

/* 2026-05-21, purchases Charter section — tighter intra-column spacing so
   the text block reads compact alongside the split--tall image fill. The
   last-paragraph rule restores a measured gap before the CTA button, which
   the .split--tall last-of-type reset would otherwise collapse to zero. */
#charter .split .lede { margin-bottom: 18px; }
#charter .split .body-lg { margin-bottom: 14px; }
#charter .split .body-lg:last-of-type { margin-bottom: 26px; }