/* Cormorant Garamond (Google Fonts, loaded in base.njk) is the SINGLE type family
   for the entire site, per team direction 7.27.2026: everything matches the
   "Northwind Group" logo. There is no secondary sans face.

   Consequence to respect when editing: Cormorant Garamond has a small x-height
   and very light strokes, so it needs MORE weight and MORE size than a grotesque
   at the same optical scale. Body copy sits at 400 (not 300) and 1.15rem (not
   1.05rem); uppercase UI labels sit at 600-700. Do not "normalise" these back
   down to typical sans values or the site goes spindly and unreadable. */

:root {
  --brand-navy: #1c325e;
  --brand-navy-deep: #0f1f3d;
  --brand-navy-dark: #0a152e;
  --brand-navy-mid: #162849;
  --brand-navy-light: #243d6a;
  --brand-silver: #9a9b9d;
  --brand-silver-light: #b8b9bb;
  --brand-silver-pale: #d4d5d7;
  --white: #ffffff;
  /* Brightened 10.15.2026 ("make the font brighter... hard to read where there is
     a lot of text"). Previous values: slate #7a8599, text-light #bfc4cf,
     text-body #cfd3dc. */
  --slate: #a3acbc;
  --text-light: #e3e6ec;
  --text-body: #eceef2;
  --divider: rgba(154, 155, 157, 0.15);
  --divider-strong: rgba(154, 155, 157, 0.25);
  /* Only accent colour on the site: the "Fully Repaid" status tile. Muted enough to
     sit beside the navy without reading as a UI success toast. */
  --accent-green: #1f6b4a;
  --accent-green-border: #2c8a60;
  /* ONE family. --serif and --sans are deliberately identical: the two tokens are
     kept only so the ~200 existing declarations don't all have to change, and so
     intent (display vs body) stays readable in the rules below. */
  --serif: 'Cormorant Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --sans: 'Cormorant Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --fs-h1: clamp(2.8rem, 6vw, 5.2rem);
  --fs-section-title: clamp(2rem, 4vw, 3.2rem);
  --fs-card-title: 1.6rem;
  --fs-body: 1.15rem;
  --fs-body-sm: 1.05rem;
  --fs-eyebrow: 0.76rem;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* 9.28.2026 (Tal): "all text needs to be much larger" -- every rem-based size scales with
   this root value, so type grows proportionally site-wide. Mobile (<=768px) keeps 16px
   so phones don't overflow; px-sized chrome (nav height, borders) is intentionally fixed. */
html { scroll-behavior: smooth; font-size: 18px; }
@media (max-width: 768px) { html { font-size: 16px; } }
/* No -webkit-font-smoothing: antialiased here. On macOS it thins light serif
   strokes further, which is the opposite of what Cormorant Garamond needs.

   lining-nums is REQUIRED, not cosmetic. Cormorant Garamond ships old-style
   (text) figures by default, which renders "$11B+" as "$IIB+" and drops the
   4/5/7/9 below the baseline. Every headline fact on this site is a number
   ($401.0mm, 36,491 beds, 418 properties), so figures must sit on the baseline
   at a uniform cap height. Do not remove this. */
body { font-family: var(--sans); background: var(--brand-navy-dark); color: var(--white); overflow-x: hidden; font-optical-sizing: auto; font-variant-numeric: lining-nums; }
/* Cormorant Garamond is wider per-character than the grotesque it replaced, so
   large display text takes slightly tighter tracking to keep line lengths honest. */
.hero h1, .section-title, .track-record-stat-value, .stat-number, .contact-office-city { letter-spacing: -0.012em; }

.nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 0 60px; height: 80px; display: flex; align-items: center; justify-content: space-between; transition: all 0.4s cubic-bezier(0.22,1,0.36,1); background: transparent; }
.nav.scrolled { background: rgba(10,21,46,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--divider); height: 70px; }
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 64px; width: auto; transition: height 0.3s; }
.nav.scrolled .nav-logo img { height: 50px; }
/* Nav is Title Case, NOT uppercase (team direction 7.27.2026). It was already
   Cormorant Garamond, but at 11.5px in all-caps at weight 600 you only ever see the
   capitals, so it read as a different typeface from the wordmark and the headings.
   Mixed case exposes Cormorant's lowercase, which is where its character lives.
   Side benefit: Title Case is ~15% narrower than caps, easing the nav crowding.
   Re-measure with scripts/audit-overflow.js if items are added. */
.nav-links { display: flex; align-items: center; gap: 22px; list-style: none; }
.nav-links a { color: var(--white); text-decoration: none; font-size: 1.05rem; font-weight: 500; letter-spacing: 0.015em; transition: color 0.3s; position: relative; white-space: nowrap; }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--white); transition: width 0.3s ease; }
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { background: transparent !important; border: 1px solid var(--brand-silver) !important; color: var(--white) !important; padding: 9px 20px !important; font-size: 1.05rem !important; letter-spacing: 0.015em !important; font-weight: 500; text-transform: none !important; cursor: pointer; transition: all 0.3s ease !important; }
.nav-cta:hover { background: var(--white) !important; color: var(--brand-navy) !important; border-color: var(--white) !important; }
.nav-cta::after { display: none !important; }
.nav-cta-portal { border-color: rgba(255,255,255,0.35) !important; color: var(--white) !important; }
.nav-dropdown { position: relative; }
.nav-dropdown > a { cursor: pointer; }
.nav-dropdown > a::after { display: none !important; }
.nav-dropdown-label { display: inline-flex; align-items: center; gap: 4px; }
.nav-chevron { width: 10px; height: 10px; opacity: 0.7; }
.nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 210px; background: rgba(10,21,46,0.97); backdrop-filter: blur(20px); border: 1px solid var(--divider-strong); padding: 12px 0; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; }
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dropdown-menu a { display: block; padding: 9px 24px; font-size: 0.88rem !important; white-space: nowrap; }
.nav-dropdown-menu a::after { display: none !important; }
.nav-dropdown-menu a:hover { background: rgba(255,255,255,0.04); }
.nav-subdropdown { position: relative; }
.nav-subdropdown > a { display: flex !important; align-items: center; justify-content: space-between; }
.nav-subdropdown-label { display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: space-between; }
.nav-chevron-right { width: 6px; height: 10px; opacity: 0.55; flex-shrink: 0; }
.nav-subdropdown-menu { position: absolute; top: -12px; left: 100%; min-width: 210px; background: rgba(10,21,46,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--divider-strong); padding: 12px 0; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; }
.nav-subdropdown:hover .nav-subdropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; }
.nav-subdropdown-menu a { display: block !important; padding: 9px 24px; font-size: 0.88rem !important; white-space: nowrap; }
.nav-mega-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 480px; background: rgba(10,21,46,0.97); backdrop-filter: blur(20px); border: 1px solid var(--divider-strong); padding: 28px 36px; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.nav-dropdown-mega:hover .nav-mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-mega-col { display: flex; flex-direction: column; }
.nav-mega-heading { font-size: 0.62rem; letter-spacing: 0.18em; font-weight: 600; text-transform: uppercase; color: var(--brand-silver); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--divider); }
.nav-mega-col a { display: block; padding: 8px 0; font-size: 0.9rem !important; white-space: nowrap; }
.nav-mega-col a::after { display: none !important; }
.nav-mega-col a:hover { color: var(--white); padding-left: 6px; transition: padding 0.2s ease; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 8px; position: relative; z-index: 1001; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--white); transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.hero { position: relative; height: 100vh; min-height: 700px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Homepage (comments 10.15.2026): the stats ribbon must be visible on arrival
   without scrolling, so hero + ribbon share one viewport-tall flex column and
   the hero takes whatever height the ribbon leaves. min-height keeps the logo
   from being crushed on very short windows (the page simply scrolls there). */
.home-landing { display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 640px; }
.home-landing .hero { flex: 1 1 auto; height: auto; min-height: 340px; }
.home-landing .stats-ribbon, .home-landing .stats-ribbon.stuck { flex: 0 0 auto; padding: 40px 0; }
.home-landing .hero-scroll { display: none; }
.hero-interior { height: auto; min-height: 460px; padding-top: max(160px, 16vh); padding-bottom: 96px; }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 20% 80%, rgba(28,50,94,0.15) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 80% 20%, rgba(36,61,106,0.4) 0%, transparent 60%), linear-gradient(160deg, var(--brand-navy-dark) 0%, var(--brand-navy-deep) 40%, #0d1a34 100%); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: var(--brand-navy-deep); }
/* Brightens the underlying footage itself (not just the overlay tint) on pages
   where the source video reads too dim even under the lighter overlay below
   (comments doc 9.1.2026 follow-up, Equity page: "were you able to lighten this
   video?"). Paired 1:1 with heroOverlayLight in page.njk -- only pages that opt
   into the lighter overlay get the brighter video; the default darker hero video
   (homepage, /cre-debt/, /hc-debt/) is untouched. */
.hero-video-bright { filter: brightness(1.22) contrast(1.03); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(11,22,46,0.78) 0%, rgba(11,22,46,0.62) 50%, rgba(11,22,46,0.82) 100%); z-index: 1; }
/* Lighter overlay for pages where the source video reads too dark (comments doc
   9.1.2026, Equity page). Front-matter flag: heroOverlayLight: true. */
.hero-overlay-light { background: linear-gradient(160deg, rgba(11,22,46,0.52) 0%, rgba(11,22,46,0.38) 50%, rgba(11,22,46,0.56) 100%); }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(154,155,157,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(154,155,157,0.03) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 70%); }
.hero-lines { position: absolute; inset: 0; overflow: hidden; opacity: 0.035; }
.hero-lines::before, .hero-lines::after { content: ''; position: absolute; width: 200%; height: 1px; background: var(--brand-silver); transform-origin: left center; }
.hero-lines::before { top: 30%; left: -20%; transform: rotate(-8deg); animation: linePulse 8s ease-in-out infinite; }
.hero-lines::after { top: 70%; left: -20%; transform: rotate(-5deg); animation: linePulse 8s ease-in-out infinite 4s; }
@keyframes linePulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.hero-content { position: relative; z-index: 2; text-align: center; max-width: 960px; padding: 0 40px; }
.hero-logo { display: block; width: clamp(96px, 12vw, 150px); height: auto; margin: 0 auto 34px; opacity: 0; animation: fadeUp 1s ease 0.3s forwards; }
/* Homepage hero (follow-up 9.1.2026): logo-white-square.png used as-is (mark +
   square frame + "Value. Creation." all baked into one image) -- no separate
   CSS-drawn box around it. Sized wider than the plain icon crop since this
   version's baked-in tagline text needs to stay legible. */
.hero-logo-square { width: clamp(130px, 14vw, 200px); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 36px; opacity: 0; animation: fadeUp 1s ease 0.3s forwards; }
.hero-eyebrow-line { width: 40px; height: 1px; background: var(--brand-silver); }
.hero-eyebrow-text { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brand-silver-pale); }
.hero h1 { font-family: var(--serif); font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 400; line-height: 1.16; letter-spacing: -0.005em; color: var(--white); margin-bottom: 28px; opacity: 0; animation: fadeUp 1s ease 0.5s forwards; }
/* Emphasis is kept plain: white, non-italic, same weight as the heading.
   Ran's direction — no mixed fonts or mixed colors in headings. */
.hero h1 em { font-style: normal; color: inherit; font-weight: inherit; }
.hero-sub { font-size: 1.1rem; line-height: 1.7; color: var(--text-light); max-width: 620px; margin: 0 auto 48px; font-weight: 400; opacity: 0; animation: fadeUp 1s ease 0.7s forwards; }
/* Equity-only override: base .hero-sub wraps this page's longer copy to 4 lines
   at 620px. Widened just enough to land at exactly 3 lines (comments doc
   9.1.2026 follow-up), verified via rendered line-box count at both 1440px and
   1920px viewports. Other pages keep the narrower base .hero-sub untouched. */
.hero-sub-wide { max-width: 840px; }
/* Opt-in via heroSubLeft front matter (/equity/, /cre-debt/ per Ran, 10.14.2026):
   the paragraph block stays centered under the title, but its lines read flush-left. */
.hero-sub-left { text-align: left; }
.hero-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp 1s ease 0.9s forwards; }
/* justify-content: center matters when a .btn-primary stretches to fill a grid
   column wider than its content (e.g. .contact-cta-actions) -- comments doc
   8.26.2026: "center the text in the white boxes... throughout the website." */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 40px; background: var(--white); color: var(--brand-navy); font-family: var(--sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: all 0.35s cubic-bezier(0.22,1,0.36,1); position: relative; overflow: hidden; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255,255,255,0.15); }
.btn-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; background: transparent; color: var(--white); font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; transition: all 0.35s ease; }
.btn-secondary:hover { border-color: var(--white); color: var(--white); }
/* Arrows are SVG, not the "→" character. Cormorant Garamond has no U+2192 glyph, so
   a text arrow silently fell back to whatever local serif the OS had (Windows picked
   "Garamond"), putting a real second typeface on screen in every button. Never
   reintroduce a character arrow. */
.btn-arrow { display: inline-flex; align-items: center; transition: transform 0.3s; }
.btn-arrow-svg { width: 1.35em; height: 0.7em; display: block; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.btn-primary:hover .btn-arrow, .btn-secondary:hover .btn-arrow { transform: translateX(4px); }
.hero-scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; animation: fadeUp 1s ease 1.2s forwards; }
.hero-scroll-text { font-size: 0.65rem; letter-spacing: 0.2em; font-weight: 600; text-transform: uppercase; color: var(--slate); }
.hero-scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--brand-silver), transparent); animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%, 100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* Banner scrolls away with the page (no longer pinned/"frozen" under the nav). */
.stats-ribbon { position: relative; background: var(--brand-navy-deep); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); padding: 60px 0; z-index: 50; }
.stats-ribbon.stuck { padding: 60px 0; background: var(--brand-navy-deep); box-shadow: none; }
.hero:not(.hero-interior) + .stats-ribbon { margin-top: 0; }
.hero-interior + .stats-ribbon { margin-top: 0; }
.stats-grid { max-width: 1200px; margin: 0 auto; padding: 0 60px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px; }
.stats-ribbon.stuck .stats-grid { gap: 40px; }
.stat-item { text-align: center; position: relative; }
.stat-item:not(:last-child)::after { content: ''; position: absolute; right: -20px; top: 10%; height: 80%; width: 1px; background: var(--divider-strong); }
.stat-number { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 400; color: var(--white); line-height: 1; margin-bottom: 8px; }
.stats-ribbon.stuck .stat-number { font-size: clamp(2.4rem, 4vw, 3.4rem); margin-bottom: 8px; }
/* Sentence case, NOT uppercase (team request 8.7.2026: "change the sub headers to
   lower case"). The labels carry their own capitalisation in stats.json now, so
   text-transform is gone from the ribbon entirely — see .stat-sublabel and
   .stat-link-cta below, which were changed with it so the row stays consistent.
   Letter-spacing is kept: it is what stops the ribbon reading as body copy. */
/* Sized to match .btn-primary/.btn-secondary (the CTA buttons at the top of the
   homepage) per comments doc 9.8.2026 follow-up, so the stats-ribbon caption
   reads at the same scale as that recurring page element. */
.stat-label { font-size: 0.82rem; letter-spacing: 0.25em; color: var(--brand-silver); font-weight: 700; }
.stats-ribbon.stuck .stat-label { font-size: 0.82rem; }
.stat-link { display: block; text-decoration: none; color: inherit; transition: opacity 0.3s; }
.stat-link:hover { opacity: 1; }
/* Explicit clickability cue for linked stats (the PERE Credit ranking). Underline
   is always present so the affordance survives without hover, e.g. on touch. */
.stat-link-cta { margin-top: 10px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; color: var(--brand-silver-pale); }
.stat-link-cta::after { content: ''; display: block; height: 1px; width: 100%; margin-top: 5px; background: var(--divider-strong); transition: background 0.3s ease; }
.stat-link:hover .stat-link-cta { color: var(--white); }
.stat-link:hover .stat-link-cta::after { background: var(--white); }
.stat-link-arrow { display: inline-block; transition: transform 0.3s ease; }
.stat-link:hover .stat-link-arrow { transform: translateX(4px); }
.stat-sublabel { font-size: 0.62rem; letter-spacing: 0.16em; color: var(--brand-silver-light); font-weight: 700; margin-top: 8px; }
.stats-ribbon.stuck .stat-sublabel { font-size: 0.62rem; margin-top: 8px; }
.stat-suffix { font-size: 1em; letter-spacing: 0; vertical-align: baseline; }
.stat-plus { font-size: 0.5em; vertical-align: super; margin-left: 0.04em; color: var(--brand-silver-pale); }

.section { padding: 96px 0; position: relative; }
/* First section on a hero-less page (e.g. /about/) must clear the fixed nav. */
.section-top-nav-offset { padding-top: max(160px, 15vh); }
/* Opposite of the above: a section whose own content already provides the breathing
   room, so the standard 96px top padding just adds dead space. Used on /team/, where
   the grid sits directly under the hero (team comment 8.7.2026: "space between the
   intro and our team was large"). */
.section-flush-top { padding-top: 40px; }
.section-container { max-width: 1200px; margin: 0 auto; padding: 0 60px; }
.section-label { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.section-label-line { width: 30px; height: 1px; background: var(--brand-silver); }
.section-label-text { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brand-silver-pale); }
.section-title { font-family: var(--serif); font-size: clamp(2.3rem, 4.4vw, 3.6rem); font-weight: 400; line-height: 1.2; color: var(--white); margin-bottom: 20px; }
.section-title em { font-style: normal; color: inherit; }
.section-desc { font-size: var(--fs-body); line-height: 1.75; color: var(--text-light); max-width: 580px; font-weight: 400; }

.about { background: radial-gradient(ellipse 60% 40% at 80% 50%, rgba(28,50,94,0.08) 0%, transparent 60%), var(--brand-navy-dark); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: 60px; }
/* Ragged right, no hyphenation. `text-align: justify` + `hyphens: auto` was
   splitting words across lines ("real es-", "first-posi-"), which the team read
   as text being cut off. Do not reintroduce either property. */
/* Justified per team request 8.7.2026 (§2.1). hyphens:auto is REQUIRED alongside it,
   not optional: justifying a narrow column of Cormorant without hyphenation opens
   rivers of white space between words. The 768px block below reverts both to
   left/manual — justification does not survive a phone-width column. */
.about-text p { font-size: var(--fs-body); line-height: 1.7; color: var(--text-body); font-weight: 400; margin-bottom: 24px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.about-text p:last-child { margin-bottom: 0; }
.about-card { background: linear-gradient(135deg, var(--brand-navy-deep) 0%, var(--brand-navy-mid) 100%); border: 1px solid var(--divider-strong); padding: 50px; position: relative; }
.about-card::before { content: ''; position: absolute; top: -1px; left: 40px; right: 40px; height: 2px; background: linear-gradient(90deg, transparent, var(--brand-silver), transparent); }
.about-card-quote { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; font-style: italic; line-height: 1.5; color: var(--brand-silver-pale); margin-bottom: 30px; }
.about-card-attr { display: flex; align-items: center; gap: 16px; }
.about-card-attr-line { width: 24px; height: 1px; background: var(--brand-silver); }
.about-card-attr-text { font-size: 0.82rem; font-weight: 500; color: var(--slate); letter-spacing: 0.05em; }
.about-card-award { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--divider-strong); }
.about-card-award a { font-size: 0.82rem; font-style: italic; line-height: 1.55; color: var(--brand-silver-pale); text-decoration: none; transition: color 0.3s; }
.about-card-award a:hover { color: var(--white); }

/* Pull-quote BELOW the About body copy (comments doc 8.19.2026, item A6), used
   by partials/about-intro.njk. Tracks .about-text-single -- full container width,
   flush left -- so the two stacked blocks share both edges. If that class's
   measure changes, change this with it. */
.about-card-below { max-width: none; margin: 40px 0 0; }

.strategies { background: var(--brand-navy-deep); }
.strategies-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 60px; background: var(--divider); }
.strategy-card { background: var(--brand-navy-deep); padding: 50px 40px; position: relative; transition: all 0.5s cubic-bezier(0.22,1,0.36,1); cursor: pointer; overflow: hidden; }
.strategy-card::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.strategy-card:hover::before { transform: scaleX(1); }
.strategy-card:hover { background: var(--brand-navy-mid); }
.strategy-icon { width: 48px; height: 48px; margin-bottom: 28px; color: var(--brand-silver); opacity: 0.7; transition: all 0.3s; }
.strategy-card:hover .strategy-icon { opacity: 1; color: var(--white); }
.strategy-card h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: var(--white); margin-bottom: 16px; }
/* Core-values columns: centered headers, enlarged to echo the stacked title (P22). */
.strategies-grid .strategy-card h3 { text-align: center; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }

/* --- Core values: quote revealed on hover / keyboard focus (8.7.2026, §3) ---
   The card must NOT change height when the quote appears, or the whole 3-up row
   reflows under the cursor. So the space is reserved up front with min-height and
   the card centres its content; only opacity/transform animate. Do not swap this
   for a max-height/display toggle. */
.strategy-card-value { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 250px; padding: 40px 32px; }
.strategy-card-value h3 { margin-bottom: 0; }
/* The three quotes are different lengths (2-3 lines once wrapped), so a plain
   block .value-quote reserves a different height per card -- the card as a
   whole still centers via .strategy-card-value's min-height, but the h3+quote
   GROUP's own height varies, which shifts the centered h3 to a different y per
   card. Fixing .value-quote's height to the longest quote's natural height
   (126px, Honesty's 3-line quote) and centering its own content within that
   makes the group height identical across all three cards, so the titles land
   on the same row regardless of quote length. */
.value-quote { display: flex; flex-direction: column; justify-content: center; margin-top: 16px; min-height: 126px; opacity: 0; transform: translateY(10px); transition: opacity 0.45s cubic-bezier(0.22,1,0.36,1), transform 0.45s cubic-bezier(0.22,1,0.36,1); }
.value-quote-text { font-family: var(--serif); font-size: 1.05rem; font-style: italic; line-height: 1.6; color: var(--text-body); font-weight: 400; margin: 0 auto 10px; max-width: 30ch; }
.value-quote-attr { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; color: var(--brand-silver); font-style: normal; }
.strategy-card-value:hover .value-quote,
.strategy-card-value:focus-visible .value-quote,
.strategy-card-value:focus-within .value-quote { opacity: 1; transform: translateY(0); }
/* Keyboard focus needs a visible ring — the cards are tabbable but are not links.
   :focus-visible only, so a mouse hover does not draw a box around the card. */
.strategy-card-value:focus-visible { outline: 2px solid var(--brand-silver-light); outline-offset: -4px; }

/* Touch devices have no hover: show the quotes permanently rather than making them
   unreachable. Also drops the reserved min-height, since nothing is hidden. */
@media (hover: none) {
  .strategy-card-value .value-quote { opacity: 1; transform: none; min-height: 0; }
  .strategy-card-value { min-height: 0; }
}

/* Underline under "Our Core Values" (§3). A centred rule rather than
   text-decoration: underline — it matches the .section-label-line idiom used
   elsewhere and does not collide with the descenders in "y". */
.section-title-underline { position: relative; padding-bottom: 22px; }
.section-title-underline::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 2px; background: var(--brand-silver); }
.strategy-card p { font-size: 1rem; line-height: 1.75; color: var(--text-body); font-weight: 400; margin-bottom: 28px; }
.strategy-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-silver-light); text-decoration: none; transition: gap 0.3s, color 0.3s; }
.strategy-card:hover .strategy-link { gap: 14px; color: var(--white); }

/* --- Firm history timeline (comments doc 8.19.2026, item C6) ---------------
   Horizontal scroll-snap row: each milestone is a fixed-width card with a top
   rule and a marker dot, native touch/scrollbar/drag scrolling, no JS. Replaces
   the old vertical two-column stack.

   The IntersectionObserver still fires once on the row as a whole (per-card
   observation doesn't work -- most cards start off-screen to the right and
   would never individually intersect the viewport on a wide desktop screen).
   But instead of the whole row translating as one block, `.timeline.reveal`
   cancels the generic .reveal fade/shift on itself and re-triggers it per
   card via `.timeline.visible .timeline-item`, staggered by the `--i` custom
   property each card sets inline -- a left-to-right cascade instead of a
   single shift. Top padding is 30px (not 4px) so the enlarged "current"
   marker's glow (box-shadow blur reaches ~16px above the dot) has room to
   render without being clipped -- `.timeline`'s overflow-x: auto forces
   overflow-y to auto too, so anything above the padding box gets cut off. */
/* Wider than the standard 1200px .section-container (follow-up 9.1.2026: "expand
   it across the screen more") so more milestone cards are visible before the
   row needs scrolling, on top of the arrow buttons flanking it. */
.timeline-wrap { display: flex; align-items: center; gap: 16px; max-width: 1680px; margin: 16px auto 0; padding: 0 60px; }
.timeline-wrap .timeline { flex: 1 1 auto; min-width: 0; margin: 0; }
/* Prev/next affordance for the horizontal scroll (follow-up 9.1.2026: "so it is
   clear... that you can scroll left and right"). Click handling and the
   disabled-at-either-end state live in main.js under "History timeline arrows". */
.timeline-arrow { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--divider-strong); background: transparent; color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease; }
.timeline-arrow svg { width: 8px; height: 14px; }
.timeline-arrow:hover:not(:disabled) { background: var(--white); border-color: var(--white); color: var(--brand-navy); }
.timeline-arrow:disabled { opacity: 0.25; cursor: default; }
/* 9.22.2026: plain LTR again. DOM order is chronological (oldest-first, no
   `| reverse` in history-timeline.njk), so the row rests scrolled to 2008 at
   the left edge and scrolling right reveals newer cards toward the present
   (2026) -- reverses the 9.15.2026 RTL/newest-first layout. */
/* 10.14.2026: grid + subgrid instead of flex. Every card spans the same four rows
   (year / title / note / text), so the rows are sized by the TALLEST entry across
   all cards -- a title that wraps to two lines pushes every card's paragraph down
   with it and the paragraphs all start on one line. Fixed-width columns keep the
   scroll-snap row behaving exactly as the old flex row did. */
.timeline { list-style: none; padding: 30px 4px 24px; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 260px; grid-template-rows: repeat(4, auto); column-gap: 32px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--brand-silver) transparent; }
.timeline::-webkit-scrollbar { height: 6px; }
.timeline::-webkit-scrollbar-track { background: transparent; }
.timeline::-webkit-scrollbar-thumb { background: var(--divider-strong); border-radius: 3px; }
.timeline.reveal { opacity: 1; transform: none; }
.timeline-item { position: relative; grid-row: span 4; display: grid; grid-template-rows: subgrid; scroll-snap-align: start; padding: 28px 8px 0 0; border-top: 1px solid var(--divider-strong); opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); transition-delay: calc(var(--i, 0) * 90ms); }
.timeline.visible .timeline-item { opacity: 1; transform: translateY(0); }
/* Marker dot, centred on the top rule. The navy ring punches it out of the line
   so the rule appears to pass behind rather than through it. Pops in with a
   slight overshoot, delayed a touch behind its card's fade/slide. */
.timeline-marker { position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand-silver); box-shadow: 0 0 0 4px var(--brand-navy-dark); transform: scale(0.3); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); transition-delay: calc(var(--i, 0) * 90ms + 200ms); }
.timeline.visible .timeline-marker { transform: scale(1); }
.timeline-year { margin: 22px 0 18px; }
.timeline-year-num { display: block; font-family: var(--serif); font-size: clamp(1.8rem, 2.2vw, 2.4rem); font-weight: 400; line-height: 1; color: var(--brand-silver-pale); letter-spacing: -0.012em; }
/* Reserved unconditionally (see history-timeline.njk) so every card -- with or
   without a note -- gives the note the same vertical slot between the title
   and body text. min-height matches the note's own single-line content height,
   so cards that DO have a note (only NDF III today) render exactly as before;
   cards that don't get an equally-sized empty gap, keeping .timeline-text
   aligned across every card that shares the same title length. */
.timeline-note { display: block; margin: -4px 0 10px; min-height: 14px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.4; color: var(--brand-silver); }
.timeline-body { display: contents; }
.timeline-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--white); margin: 0 0 10px; line-height: 1.25; }
.timeline-text { font-size: var(--fs-body-sm); line-height: 1.7; color: var(--text-body); font-weight: 400; margin: 0; }
/* "You are here": the live fund. Larger white dot with a soft halo, plus a
   white top rule so the current card stands out even before scrolling to it. */
.timeline-item-current { border-top-color: var(--white); }
.timeline-item-current .timeline-marker { width: 13px; height: 13px; top: -7px; margin-left: -2px; background: var(--white); box-shadow: 0 0 0 4px var(--brand-navy-dark), 0 0 14px 2px rgba(255,255,255,0.35); }
.timeline-item-current .timeline-year-num { color: var(--white); }
.timeline-item-current .timeline-title { color: var(--white); }

@media (max-width: 900px) {
  .timeline { grid-auto-columns: 220px; column-gap: 24px; }
  .timeline-year-num { font-size: 1.5rem; }
  .timeline-title { font-size: 1.15rem; }
  /* Touch already makes horizontal scrolling obvious; the buttons just eat
     space from the cards at this width. */
  .timeline-arrow { display: none; }
}

/* --- Featured Transactions tombstones (comments doc 8.19.2026 item D) --------
   Two buttons side by side per the brief, wrapping to stacked on narrow screens.
   align-items:stretch so the two labels — which are different lengths and wrap to
   two lines at different points — still produce equal-height buttons. */
.featured-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 18px; margin-top: 40px; }
.featured-actions .btn-secondary { flex: 0 1 auto; text-align: center; }

.track-record { background: radial-gradient(ellipse 50% 40% at 20% 60%, rgba(28,50,94,0.1) 0%, transparent 60%), var(--brand-navy-dark); }
.track-record-header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 80px; }
.deals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--divider); }
.deals-grid-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--divider); }

.case-study-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 40px; }
/* Grey outline wrap around the whole tile -- image and facts box alike --
   per Ran's "tombstone" direction (comments doc 8.26.2026). */
.case-study-tile { background: var(--brand-navy-dark); border: 1px solid var(--divider-strong); transition: transform 0.4s ease, box-shadow 0.4s ease; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.case-study-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.case-study-image { width: 100%; aspect-ratio: 3 / 4; background: var(--brand-navy-deep); overflow: hidden; }
.case-study-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.case-study-image-contain { padding: 16px; }
.case-study-image-contain img { object-fit: contain; object-position: center center; }
/* 4 columns / 22px gap matches .case-study-grid-compact (CRE) exactly -- comments
   doc 8.26.2026 asked for HC tombstones to be "the same size and width" as CRE's.
   Source photos are pre-cropped to 16:9 so narrowing the column just scales them
   down rather than cropping. */
.case-study-grid-wide { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.case-study-grid-wide .case-study-image { aspect-ratio: 16 / 9; }
.case-study-grid-square .case-study-image { aspect-ratio: 1 / 1; }
/* Equity tiles: 3 across in a 3:4 portrait frame matching the re-cropped 1200x1600
   source images exactly, so the full building elevation is visible. object-position
   is centred (not "center top") because these crops are already framed. */
/* Gap bumped 28 -> 56px (comments doc 9.1.2026 follow-up: "please make these
   more spread out") -- only 3 items in this grid vs. 4+ elsewhere, so the extra
   breathing room reads as intentional spacing rather than sparse. */
.case-study-grid-equity { grid-template-columns: repeat(3, 1fr); gap: 56px; }
.case-study-grid-equity .case-study-image { aspect-ratio: 3 / 4; }
.case-study-grid-equity .case-study-image img { object-position: center center; }
.case-study-grid-compact { grid-template-columns: repeat(4, 1fr); gap: 22px; }
/* -wide shares -compact's narrow column width (comments doc 8.26.2026), so it
   needs the same tightened content/fact-row treatment below -- otherwise a
   value like "39 Properties" has no room and overflows the card. -equity
   (9.1.2026 follow-up: equity tombstones gained the same acquisition/hold-period
   fact fields) shares the same stacked label/value treatment for the same
   reason -- e.g. "Mixed-Use (Residential + Retail)" needs the full-width value
   row, not the inline baseline layout. */
.case-study-grid-compact .case-study-content, .case-study-grid-wide .case-study-content, .case-study-grid-equity .case-study-content { padding: 20px 20px 18px; gap: 10px; }
/* Was min-height 2.6em to reserve 2 lines, back when cityStateBreak forced every
   title onto two lines. 8.7.2026: city + state now stay on ONE line, so this
   reserves a single line instead. Do not restore the 2-line floor. */
/* Bumped 1.1 -> 1.35rem on 8.7.2026: with Origination Date and Stories/Units removed
   the tile has room, and at 1.1rem the amount+location read at the same weight as the
   fact values below it, so the tile lost its headline. min-height is 1 line now that
   city+state no longer wrap. */
.case-study-grid-compact .case-study-name, .case-study-grid-wide .case-study-name, .case-study-grid-equity .case-study-name { font-size: 1.35rem; min-height: 1.5em; }
/* Stack label above value in the narrow columns — long loan types no longer wrap
   into a cramped side column. */
/* Tightened 7.27.2026: the team flagged too much air between a subheader and its
   value, and a large gap trailing the last row. */
.case-study-grid-compact .case-study-facts li, .case-study-grid-wide .case-study-facts li, .case-study-grid-equity .case-study-facts li { min-height: 0; flex-direction: column; align-items: flex-start; gap: 2px; padding: 5px 0; }
.case-study-grid-compact .case-study-fact-label, .case-study-grid-wide .case-study-fact-label, .case-study-grid-equity .case-study-fact-label { min-width: 0; }
/* Reserve 2 lines for the value so rows stay aligned across the grid. Was 4.5em
   (3 lines) to fit "Completion-to-Inventory Loan (First Mortgage, B-Note)"; the
   parenthetical note types were dropped 7.27.2026 and the longest remaining value
   ("Construction-to-Condo Inventory") wraps to 2. Re-measure if longer copy lands. */
.case-study-grid-compact .case-study-fact-value, .case-study-grid-wide .case-study-fact-value, .case-study-grid-equity .case-study-fact-value { display: block; min-height: 3em; }
.case-study-content { padding: 28px 28px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.case-study-amount { font-family: var(--serif); font-size: 2.1rem; font-weight: 400; color: var(--white); line-height: 1.1; margin: 0; }
.case-study-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: var(--white); margin: 0; line-height: 1.3; text-wrap: balance; }
/* The "Fully Repaid" status chip (.case-study-status) was removed 8.7.2026 —
   the team asked for the tag to come off every tombstone. The `status` key is
   still present in the deal JSON; nothing renders it. --accent-green is now unused. */
/* 8.7.2026: was 0.5em / --brand-silver-pale, which read as too small and too faint
   next to the dollar figure. Now inherits the figure's colour so the suffix stays
   attached to the number. NOTE: mmText emits this class on the CRE Investment
   Focus panel too — check that panel after touching this. */
.amt-suffix { font-size: 0.82em; font-weight: 500; letter-spacing: 0.02em; vertical-align: baseline; margin-left: 0.05em; color: inherit; }
.case-study-subtitle { font-size: 0.95rem; color: var(--brand-silver-pale); line-height: 1.5; margin: -6px 0 0; }
.case-study-body { font-size: 0.92rem; line-height: 1.7; color: var(--brand-silver-pale); margin: 0; }
.case-study-body-pending { font-style: italic; opacity: 0.55; }
.case-study-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: var(--white); line-height: 1.3; margin: 0; }
.case-study-location { font-size: 0.95rem; font-weight: 400; color: var(--white); opacity: 0.85; letter-spacing: 0.04em; line-height: 1.4; margin: 0; }
/* margin-top:auto pins the facts to the card bottom so the last row (Property Type)
   aligns across every tombstone in a row, regardless of title length or row count. */
.case-study-facts { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-direction: column; font-size: 0.88rem; line-height: 1.5; color: var(--brand-silver-pale); border-top: 1px solid rgba(255,255,255,0.08); }
.case-study-facts li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; gap: 14px; align-items: baseline; }
.case-study-facts li:last-child { border-bottom: none; }
.case-study-fact-label { flex: 0 0 auto; min-width: 110px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); font-weight: 600; }
/* Values are Title Case, NOT uppercase. Cormorant Garamond set in all-caps at a
   heavy weight with wide tracking reads as a different typeface next to the
   mixed-case 400 deal name directly above it, which is what prompted the "why are
   there different fonts" feedback on 7.27.2026. Hierarchy comes from size, colour
   and the muted uppercase label instead. Source data is already Title Case. */
.case-study-fact-value { font-size: 0.95rem; letter-spacing: 0.01em; color: var(--white); font-weight: 500; }

.ndf-focus-panel { background: var(--brand-navy-deep); padding: 40px 38px; border-left: 2px solid var(--brand-silver); display: flex; flex-direction: column; gap: 18px; }
/* Letter-spacing matched to .hero-eyebrow-text (comments doc 9.8.2026) -- font-size
   was already 0.75rem to match, but the tighter tracking made it read smaller. */
.ndf-focus-eyebrow { font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brand-silver); font-weight: 700; }
.ndf-focus-title { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; color: var(--white); margin: 0; line-height: 1.25; }
.ndf-focus-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ndf-focus-list li { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.88rem; line-height: 1.55; color: var(--brand-silver-pale); }
.ndf-focus-list li:last-child { border-bottom: none; padding-bottom: 0; }
.ndf-focus-list li .ndf-focus-label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-silver); font-weight: 700; padding-top: 2px; }
.ndf-focus-footnote { font-size: 0.75rem; color: var(--slate); font-style: italic; margin-top: 4px; }
.ndf-focus-panel-wide { background: transparent; border-left: none; border-top: 2px solid var(--brand-silver); padding: 32px 0 0; margin-top: 48px; gap: 24px; }
.ndf-focus-panel-wide .ndf-focus-list { display: flex; flex-direction: column; gap: 0; }
/* 8.7.2026: the team found this box "hard to see" — the label read as heavier than
   the value it labelled (uppercase 700 --brand-silver against a 400 --brand-silver-pale
   value). Fixed by raising the value and softening the label, NOT by shrinking the
   label. These are overrides scoped to -wide on purpose: font-weight and colour live
   on the shared base rules above, which the narrow .ndf-focus-panel also uses. */
.ndf-focus-panel-wide .ndf-focus-list li { font-size: 1.25rem; grid-template-columns: 280px 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: var(--white); }
.ndf-focus-panel-wide .ndf-focus-list li:last-child { border-bottom: none; padding-bottom: 0; }
.ndf-focus-panel-wide .ndf-focus-list li .ndf-focus-label { font-size: 1rem; align-self: center; font-weight: 700; color: var(--white); }

.ndf-fees-section { background: var(--brand-navy-deep); }
/* Tabular figures so the fee column's digits align vertically row to row. */
.ndf-fees-table { width: 100%; border-collapse: collapse; margin-top: 24px; font-variant-numeric: lining-nums tabular-nums; }
.ndf-fees-table tr { border-bottom: 1px solid var(--divider); }
.ndf-fees-table tr:last-child { border-bottom: none; }
.ndf-fees-table td { padding: 18px 0; font-size: 0.95rem; color: var(--brand-silver-pale); line-height: 1.5; }
.ndf-fees-table td:first-child { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-silver); font-weight: 700; width: 32%; }
.ndf-fees-footnote { font-size: 0.78rem; color: var(--slate); font-style: italic; margin-top: 22px; }

.debt-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--divider); margin-top: 40px; }
.debt-product-tile { background: var(--brand-navy-dark); padding: 38px 32px 34px; display: flex; flex-direction: column; gap: 14px; min-height: 220px; transition: background 0.3s ease, transform 0.3s ease; text-decoration: none; color: inherit; }
.debt-product-tile:hover { background: var(--brand-navy-deep); transform: translateY(-2px); }
.debt-product-tile h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; color: var(--white); margin: 0; line-height: 1.3; }
.debt-product-tile p { font-size: var(--fs-body-sm); line-height: 1.65; color: var(--brand-silver-pale); margin: 0; flex-grow: 1; }
.debt-product-tile .debt-product-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-silver-light); transition: gap 0.3s ease, color 0.3s ease; }
.debt-product-tile:hover .debt-product-arrow { gap: 14px; color: var(--white); }

.nowrap { white-space: nowrap; }
/* Awaiting a real name, title and headshot. The muted treatment keeps a "TBD" card
   from reading as a rendering bug. Remove the `placeholder` flag in team.json once filled in. */
.team-card-placeholder { opacity: 0.6; }
.team-card-placeholder .deal-type { font-style: italic; }

/* ---- Loan roll-down (accordion) by product type ---- */
.section-desc-wide { max-width: 760px; margin-top: 18px; }
.section-desc-justify { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
/* Comments doc 9.15.2026: three subtext paragraphs ("CRE Lending Program",
   "CRE Featured Transactions" on /cre-debt/, and both Featured Transactions
   intros on /equity/) should span the full .section-container content width
   (1080px) to line up with the rule/grid beneath them, instead of the 760px
   .section-desc-wide or 580px base .section-desc cap. Declared after both of
   those (and after section-desc-justify) so its max-width:none wins at equal
   specificity when combined on the same element. Kept separate from
   .section-desc-wide itself because that class is also used unmodified
   elsewhere (e.g. the credit-page loan intros) where the 760px cap is correct. */
.section-desc-full { max-width: none; }
.loan-rolldowns { margin-top: 48px; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--divider-strong); }
.loan-rolldown { border-bottom: 1px solid var(--divider-strong); }
.loan-rolldown-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 4px; transition: color 0.3s ease; }
.loan-rolldown-summary::-webkit-details-marker { display: none; }
.loan-rolldown-summary:hover { color: var(--white); }
.loan-rolldown-heading { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.loan-rolldown-title { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 400; color: var(--white); margin: 0; line-height: 1.15; }
/* Matches .section-title so "Featured Healthcare Transactions" reads the same size as "Featured CRE Transactions" on /cre-debt/ (9.28.2026). */
.loan-rolldown-title.loan-rolldown-title-lg { font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.2; letter-spacing: -0.012em; }
.loan-rolldown-count { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-silver); font-weight: 700; }
.loan-rolldown-chevron { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--brand-silver-light); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), color 0.3s ease; }
.loan-rolldown-chevron svg { width: 14px; height: 8px; }
.loan-rolldown[open] .loan-rolldown-chevron { transform: rotate(180deg); color: var(--white); }
.loan-rolldown-summary:hover .loan-rolldown-chevron { color: var(--white); }
.loan-rolldown-body { padding: 0 4px 40px; animation: rolldownIn 0.45s cubic-bezier(0.22,1,0.36,1); }
@keyframes rolldownIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.loan-rolldown-desc { font-size: var(--fs-body); line-height: 1.8; color: var(--text-light); font-weight: 400; max-width: 820px; margin: 0 0 36px; }
/* Deals inside a roll-down use the standard vertical case-study cards
   (.case-study-grid-compact), so no bespoke row styles are needed here. */

.healthcare-map { padding: 60px 0; background: var(--brand-navy-deep); }
.healthcare-map-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.healthcare-map img { width: 100%; height: auto; display: block; }
.healthcare-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: end; margin-bottom: 36px; padding: 0 12px; }
.healthcare-stat { text-align: center; }
.healthcare-stat-value { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; color: var(--white); line-height: 1.2; margin-bottom: 6px; }
.healthcare-stat-label { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--brand-silver-pale); line-height: 1.4; }
@media (max-width: 768px) {
  .healthcare-stats { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .healthcare-stat-value { font-size: 1.4rem; }
}

.contact-offices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 48px; }
.contact-office-block { display: flex; flex-direction: column; gap: 14px; }
.contact-office-city { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 400; color: var(--white); line-height: 1.05; letter-spacing: -0.005em; margin-bottom: 2px; }
.contact-office-label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-silver); font-weight: 700; }
/* Two sizes only: the large city name, and one shared size for everything else
   (address + phone + email), per the 7.8 comments. */
.contact-office-address { font-family: var(--sans); font-size: 1.05rem; font-weight: 400; color: var(--white); line-height: 1.5; margin: 0; }
.contact-office-meta { display: flex; flex-direction: column; gap: 6px; }
.contact-office-line { font-size: 1.05rem; color: var(--brand-silver-pale); }
.contact-office-line a { color: inherit; }
.contact-office-map { width: 100%; aspect-ratio: 4 / 3; background: var(--brand-navy-dark); margin-top: 12px; }
.contact-office-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(100%); }
.contact-cta-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 80px; }

.pdf-viewer-wrap { width: 100%; max-width: 1100px; margin: 0 auto; background: var(--brand-navy-dark); border: 1px solid var(--divider); box-shadow: 0 20px 60px rgba(0,0,0,0.4); overflow: hidden; }
.pdf-viewer { width: 100%; height: 90vh; min-height: 600px; border: 0; display: block; background: var(--brand-navy-dark); }
.pdf-viewer-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 40px; }
.deal-card { background: var(--brand-navy-dark); padding: 44px 36px; transition: all 0.4s ease; border-left: 2px solid transparent; }
.deal-card:hover { background: var(--brand-navy-deep); border-left-color: var(--white); }
.deal-amount { font-family: var(--serif); font-size: 2rem; font-weight: 400; color: var(--white); margin-bottom: 6px; }
.deal-name { font-size: 1rem; font-weight: 500; color: var(--brand-silver-pale); margin-bottom: 8px; }
.deal-type { font-size: 0.78rem; color: var(--slate); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }

.news { background: var(--brand-navy-deep); border-top: 1px solid var(--divider); }
.news-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 60px; }
.news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.news-card { background: var(--brand-navy-dark); border: 1px solid var(--divider); transition: all 0.4s ease; overflow: hidden; text-decoration: none; display: block; }
.news-card:hover { border-color: var(--divider-strong); transform: translateY(-4px); }
.news-card-img { aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--brand-navy-mid), var(--brand-navy-deep)); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.news-card-img svg { width: 48px; height: 48px; color: var(--brand-silver); opacity: 0.15; }
.news-card-img--photo { background: var(--brand-navy-deep); }
.news-card-img--photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 0.6s ease; display: block; }
.news-card-img--photo img.np-center { object-position: center center; }
.news-card-img--photo img.np-top { object-position: center top; }
.news-card-img--photo img.np-left { object-position: left center; }
.news-card-img--photo img.np-logo { object-fit: contain; object-position: center; box-sizing: border-box; padding: 30px; background: var(--brand-navy-deep); }
.news-card:hover .news-card-img--photo img { transform: scale(1.04); }
.news-card:hover .news-card-img--photo img.np-logo { transform: none; }
.news-card-logo {
  position: absolute; top: 14px; right: 14px;
  display: flex; justify-content: flex-end;
  pointer-events: none;
}
.news-card-logo img {
  /* Size from each logo's intrinsic ratio, capped by max-width/height. No fixed
     width/height and no object-fit, so the box always matches the logo's aspect
     ratio (object-fit letterboxing mis-rendered/duplicated some logos). */
  width: auto; height: auto;
  max-width: 112px; max-height: 22px;
  object-fit: fill;                     /* box already matches ratio: a no-op safeguard */
  display: block;
  /* no chip background: a white glow lifts dark logos off dark photos,
     a dark shadow lifts light logos off light photos */
  filter: drop-shadow(0 0 2.5px rgba(255,255,255,0.7)) drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.news-card-body { padding: 30px; }
.news-card-date { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-silver); font-weight: 700; margin-bottom: 14px; }
.news-card h3 { font-family: var(--serif); font-size: var(--fs-card-title); font-weight: 400; color: var(--white); line-height: 1.35; margin-bottom: 12px; }
.news-card p { font-size: var(--fs-body-sm); line-height: 1.65; color: var(--text-light); font-weight: 400; }

.contact-cta { background: var(--brand-navy-dark); position: relative; overflow: hidden; padding: 110px 0; }
.contact-cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(28,50,94,0.12) 0%, transparent 60%); }
.contact-cta-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(154,155,157,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(154,155,157,0.02) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 40% 50% at 50% 50%, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 40% 50% at 50% 50%, black 0%, transparent 70%); }
.contact-cta .section-container { position: relative; z-index: 2; text-align: center; }
/* Same grid as .contact-cta-actions above so Headquarters / Email / Phone sit on the
   same three column axes as the buttons. */
.contact-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 60px auto 0; max-width: 1080px; }
.contact-item { text-align: center; min-width: 0; }
.contact-item-label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-silver); font-weight: 700; margin-bottom: 10px; }
.contact-item-value { font-size: 1rem; color: var(--text-light); font-weight: 400; }
.contact-item-value a { color: var(--text-light); text-decoration: none; transition: color 0.3s; }
.contact-item-value a:hover { color: var(--white); }
.contact-portal { margin-top: 32px; display: flex; justify-content: center; }

.footer { background: var(--brand-navy-deep); border-top: 1px solid var(--divider); padding: 60px 0; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 60px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 30px; }
.footer-brand { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-logo img { height: 26px; width: auto; opacity: 0.7; }
.footer-copy { font-size: 0.78rem; color: var(--slate); font-weight: 400; }
.footer-links { display: flex; gap: 36px; list-style: none; }
.footer-links a { color: var(--slate); text-decoration: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.3s; }
.footer-links a:hover { color: var(--white); }
.footer-disclaimer { max-width: 1200px; margin: 40px auto 0; padding: 30px 60px 0; border-top: 1px solid var(--divider); font-size: 0.72rem; line-height: 1.7; color: rgba(163,172,188,0.85); font-weight: 400; }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

.team-card { text-align: center; border-left: none; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.team-card .deal-name, .team-card .deal-type { display: block; }
/* Team titles only. The base .deal-type uses --slate (~4.3:1 on navy — under AA, and
   worse in a light serif), which the team flagged as hard to read. Scoped rather than
   fixed at the base rule because .deal-type is also the deal-tombstone subtitle in
   deal-card.njk, where the muted treatment is intentional. */
.team-card .deal-type { color: var(--brand-silver-light); font-size: 0.84rem; }
.team-card .deal-name { margin-top: 0; }
/* width is capped to the card's own width, not a hard 140px: a fixed 140px plus the
   card's 32px horizontal padding gives a 172px min-content floor, which two 1fr grid
   tracks could not fit on a 360px phone and pushed the page into horizontal scroll.
   aspect-ratio keeps it square as it shrinks. */
.team-avatar { flex: 0 0 auto; width: min(140px, 100%); aspect-ratio: 1 / 1; height: auto; border-radius: 0; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-navy-light), var(--brand-navy-mid)); color: var(--white); font-family: var(--serif); font-size: 1.8rem; font-weight: 400; letter-spacing: 0.04em; }
.team-avatar-photo { display: block; padding: 0; border-radius: 0; object-fit: cover; object-position: center top; background: var(--brand-navy-mid); filter: brightness(0.94) contrast(1.04) saturate(0.92); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18); }
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px 24px; background: transparent; margin-top: 60px; }
/* /team/ only: the grid is the first thing in its section, so the 60px above is dead
   space under the hero. The base margin stays for the homepage leadership grid, which
   sits under a section-desc and needs it. */
.team-grid-flush { margin-top: 0; }
/* min-width:0 lets the 1fr tracks actually shrink below their content's intrinsic
   width instead of overflowing the grid on narrow viewports. */
.team-grid .deal-card { background: transparent; padding: 24px 16px; border-left: none; min-width: 0; }
.team-grid .deal-card:hover { background: transparent; border-left-color: transparent; }
button.team-card { width: 100%; font: inherit; color: inherit; border: 0; cursor: pointer; background: transparent; }
.team-card-clickable { transition: transform 0.3s ease; }
.team-card-clickable:hover { background: transparent; transform: translateY(-3px); }
.team-card-clickable:hover .team-avatar-photo { filter: brightness(1.05); }
.team-card-clickable:focus-visible { outline: 2px solid var(--brand-silver); outline-offset: -2px; }

.team-bio-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(820px, 92vw); max-height: 88vh; margin: 0; padding: 0; border: 0; background: var(--brand-navy-deep); color: var(--white); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.team-bio-modal::backdrop { background: rgba(8, 14, 30, 0.78); backdrop-filter: blur(2px); }
.team-bio-modal[open] { animation: bioModalIn 0.22s ease-out; }
@keyframes bioModalIn { from { opacity: 0; } to { opacity: 1; } }
.team-bio-modal-content { position: relative; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; }
.team-bio-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border: 0; background: transparent; color: var(--white); font-size: 1.6rem; line-height: 1; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; }
.team-bio-close:hover { opacity: 1; }
.team-bio-modal-body { display: grid; grid-template-columns: 220px 1fr; gap: 36px; padding: 48px 48px 44px; overflow-y: auto; }
.team-bio-photo { width: 220px; height: 220px; object-fit: cover; object-position: center top; background: var(--brand-navy-mid); display: block; }
.team-bio-text { min-width: 0; }
.team-bio-name { font-family: var(--serif); font-size: 1.9rem; font-weight: 400; margin: 0 0 4px; color: var(--white); }
.team-bio-title { font-size: 0.78rem; letter-spacing: 0.18em; font-weight: 600; text-transform: uppercase; color: var(--brand-silver); margin-bottom: 22px; }
.team-bio-paragraphs p { font-size: 0.95rem; line-height: 1.65; color: var(--brand-silver-light, #cdd2dd); margin: 0 0 14px; }
.team-bio-paragraphs p:last-child { margin-bottom: 0; }
body.modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .team-bio-modal-body { grid-template-columns: 1fr; gap: 22px; padding: 56px 24px 28px; }
  .team-bio-photo { width: 160px; height: 160px; margin: 0 auto; }
  .team-bio-text { text-align: center; }
  .team-bio-paragraphs p { text-align: left; }
}

.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
/* /newsletters/: a single panel -- text + controls left, square cover right --
   sharing one border and background (comments 10.15.2026: "combine this into one
   box instead of two next to each other"). Not a .strategy-card: no hover bar,
   since the panel itself isn't a link. */
.newsletter-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 60px; background: var(--brand-navy-mid); border: 1px solid var(--divider-strong); overflow: hidden; }
.newsletter-feature-body { display: flex; flex-direction: column; justify-content: center; padding: 60px 48px; }
.newsletter-feature-title { font-family: var(--serif); font-size: 2.2rem; font-weight: 400; line-height: 1.15; color: var(--white); margin: 0 0 18px; }
.newsletter-feature-desc { font-size: var(--fs-body); line-height: 1.75; color: var(--text-body); font-weight: 400; margin: 0 0 36px; max-width: 46ch; }
.newsletter-feature-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; }
.newsletter-feature-actions .btn-secondary { padding: 14px 30px; }
.newsletter-year-select { -webkit-appearance: none; appearance: none; min-width: 124px; padding: 10px 44px 10px 18px; font-family: var(--sans); font-size: 1.15rem; font-weight: 600; font-variant-numeric: lining-nums; color: var(--white); background: var(--brand-navy-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px; border: 1px solid var(--divider-strong); border-radius: 0; cursor: pointer; transition: border-color 0.3s ease; }
.newsletter-year-select:hover, .newsletter-year-select:focus-visible { border-color: var(--white); outline: none; }
.newsletter-year-select option { background: var(--brand-navy-deep); color: var(--white); }
.newsletter-preview { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-left: 1px solid var(--divider-strong); background: var(--brand-navy-deep); }
.newsletter-preview[hidden] { display: none; }
.newsletter-preview img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.newsletter-preview:hover img { transform: scale(1.02); }

.fund-current-vehicle-label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-silver); font-weight: 700; margin-bottom: 14px; }
.fund-vehicle-card-inner { margin-top: 16px; }

.cta-row { margin-top: 32px; }
.section-cta-row { margin-top: 60px; text-align: center; }

/* Single-column variant of .about-text, used where the paired visual card was
   removed (e.g. /hc-debt/ strategy overview, /about/ intro, /community/).
   Runs the full .section-container content width (1080px at desktop), flush
   left, so these prose blocks line up with every grid, rule and heading in the
   same section. History: it was capped at 860px and centered per comments doc
   8.26.2026 ("center the text so it sits in the middle of the page"), which was
   a fix for an 860px block sitting flush left with dead space to its right.
   9.15.2026 supersedes that -- running the full width removes the lopsidedness
   the centering was working around, and resolves "many sections are still
   different widths". Do not re-cap this without also re-checking every page in
   the audit: /, /about/, /community/, /hc-debt/. */
.about-text-single { max-width: none; margin-left: 0; margin-right: 0; }


/* National healthcare map (now an inline SVG, comments doc 8.24.2026 follow-up)
   -- no card background, sits directly on the page's own navy ground so it
   reads as part of the section rather than a boxed-in figure. */
/* Reduced from the standard .section 96px so the map still reads as belonging to the
   stats above it, but NOT 0: at zero the heading's box butts flush against the
   ribbon's bottom border with no breathing room at all. */
.hc-map-section { padding-top: 72px; }
.hc-map { max-width: 1000px; margin: 0 auto; }

/* Interactive US map (full redo, comments doc 8.24.2026 follow-up to item F).
   .hc-map-frame is an aspect-ratio box matching the SVG's own 959x593 viewBox,
   so the tooltip's percentage-based positioning (computed from each path's
   getBBox() in main.js) lines up with the state shapes regardless of the
   card's rendered width. */
.hc-map-frame { position: relative; aspect-ratio: 959 / 593; }
.hc-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.us-state { fill: var(--brand-silver-light); opacity: 0.3; stroke: var(--white); stroke-width: 1; }
/* Hover-only (10.15.2026): no click/focus state, so no pointer cursor or focus outline. */
.us-state-active { fill: var(--brand-navy-mid); opacity: 1; transition: fill 0.2s; outline: none; }
.us-state-active:hover,
.us-state-active.is-active { fill: var(--brand-navy); }
/* Plain facility dots, no hover/tooltip behavior (comments doc 8.26.2026: "these
   are just dots - no new interaction"). pointer-events: none keeps them from
   intercepting hover/focus meant for the state shapes underneath. */
.hc-map-dot { fill: var(--white); opacity: 0.75; pointer-events: none; }
.hc-map-tooltip { position: absolute; transform: translate(-50%, -100%); background: var(--brand-navy-dark); color: var(--white); font-size: 0.78rem; line-height: 1.5; padding: 10px 14px; border-radius: 4px; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,0.3); z-index: 2; }
.hc-map-tooltip strong { display: block; font-family: var(--serif); font-size: 1rem; font-weight: 400; color: var(--brand-silver-pale); margin-bottom: 2px; }
.hc-map-tooltip[hidden] { display: none; }

.section-label-centered { display: flex; justify-content: center; }
.section-title-centered { text-align: center; max-width: 700px; margin: 0 auto 20px; }
/* margin-bottom tightened 48 -> 24px (client 9.15.2026: team-intro copy read as
   "distanced with empty space" from the leadership grid below it). Combines with
   .team-grid's own 60px margin-top, which is shared with /team/ (zeroed there via
   .team-grid-flush) -- left untouched here on purpose. */
.section-desc-centered { text-align: center; max-width: 520px; margin: 0 auto 24px; }
/* Shared 3-column grid with .contact-info below, so every column sits on the same
   axis and the centred "Contact Us" eyebrow lines up with the middle column.
   Previously this was a flex row of intrinsically-sized buttons: because the three
   email addresses differ in length the columns were unequal, which pushed the middle
   column off page-centre and read as misalignment (team comment 7.27.2026).
   Keep this and .contact-info on the SAME max-width and column count. */
.contact-cta-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: end; max-width: 1080px; margin: 0 auto; }
/* Single-email variants (CRE = loans@, Healthcare = info@, per 8.7.2026 §10.1). A
   capped track rather than `auto` so the lone button is the same width on both pages
   regardless of how long the address is, and centred instead of stranded in column 1. */
.contact-cta-actions-single { grid-template-columns: minmax(0, 340px); justify-content: center; }
.contact-cta-action { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0; }
.contact-cta-action-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-silver-pale); text-align: center; }
/* Horizontal padding is deliberately tight: these three buttons sit in equal 1fr
   grid columns (see .contact-cta-actions) and carry a nowrap email address, so the
   widest one, loans@northwind-group.com, has to fit inside ~347px at 1201px viewport.
   Verify with `node scripts/audit-overflow.js` after changing padding or font-size. */
.btn-large { font-size: 0.88rem; padding: 16px 16px; white-space: nowrap; }
.btn-large-secondary { font-size: 0.88rem; padding: 16px 24px; white-space: nowrap; }
.email-address-inline { font-size: 0.8rem; letter-spacing: 0.03em; }
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; }
.mb-60 { margin-bottom: 60px; }
.mt-60 { margin-top: 60px; }
.mt-32 { margin-top: 32px; }
.section-title-margin-60 { margin-bottom: 60px; }
/* Matches the size of the value-card titles below it (.strategies-grid .strategy-card h3),
   per the "Our Core Values" header sizing request. Two classes = higher specificity than
   .section-title alone, so this wins regardless of stylesheet order. */
.section-title.section-title-sm { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.divider-top { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--divider); }
.strategy-link-secondary { font-size: 0.7rem; color: var(--slate); }
.strategy-card-static { cursor: default; }
.strategy-card-static p:last-child { margin-bottom: 0; }
.fund-vehicle-label { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-silver); font-weight: 700; margin-bottom: 20px; }
.team-grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Standard visually-hidden pattern: keeps content in the accessibility tree and
   readable by search engines without showing it or affecting layout. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.flex-center { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.section-title-margin-32 { margin-bottom: 32px; }
.section-bg-dark { background: var(--brand-navy-dark); }
.section-bg-deep { background: var(--brand-navy-deep); }
.fund-vehicle-name { font-size: 1.4rem; font-style: normal; }
.btn-medium { font-size: 0.8rem; padding: 16px 36px; }
.mt-40 { margin-top: 40px; }
.mb-40 { margin-bottom: 40px; }
.mt-24 { margin-top: 24px; }
.fund-vehicle-label-md { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-silver); font-weight: 700; margin-bottom: 16px; }
.news-press-inquiries { text-align: right; }
.news-press-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-silver); font-weight: 700; margin-bottom: 6px; }
.news-press-email { color: var(--text-light); font-size: 0.88rem; text-decoration: none; }
.news-press-email:hover { color: var(--white); }
.news-footer-links { display: flex; gap: 28px; margin-top: 40px; flex-wrap: wrap; }
.news-footer-link { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-silver-light); text-decoration: none; }
.news-footer-link:hover { color: var(--white); }
@media (max-width: 768px) {
  .news-press-inquiries { text-align: left; }
}

.proven-track-record { background: linear-gradient(180deg, var(--brand-navy-deep) 0%, var(--brand-navy-dark) 100%); }
.track-record-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; }
.track-record-stat { text-align: center; padding: 40px 24px; border: 1px solid var(--divider-strong); background: rgba(255,255,255,0.015); }
.track-record-stat-value { font-family: var(--serif); font-size: clamp(3rem, 6vw, 4.8rem); font-weight: 400; color: var(--white); line-height: 1; margin-bottom: 14px; letter-spacing: -0.005em; }
.track-record-stat-label { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-silver-light); font-weight: 600; }

.team-grid-leadership { grid-template-columns: repeat(4, 1fr); max-width: 1000px; margin-left: auto; margin-right: auto; }

.featured-transactions .case-study-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* Healthcare tiles here still use -wide (16:9) for the source photos (see
   partials/featured-transactions.njk), but now share the CRE row's 4-column
   width instead of -wide's normal 3-and-1 or an earlier 2-up override --
   comments doc 8.26.2026: HC tiles should be "the same size... make them
   narrow" to match CRE. The source photos are exactly 16:9 already, so
   narrowing the column doesn't crop them, just scales them down. */
.section-bg-deep.featured-transactions { background: var(--brand-navy-deep); }

@media (max-width: 1024px) {
  .nav, .section-container, .stats-grid, .footer-inner, .footer-disclaimer, .timeline-wrap { padding-left: 30px; padding-right: 30px; }
  .about-grid { gap: 50px; }
  .strategies-grid { grid-template-columns: 1fr; gap: 1px; }
  .deals-grid { grid-template-columns: repeat(3, 1fr); }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid-leadership { grid-template-columns: repeat(4, 1fr); }
  .track-record-header { grid-template-columns: 1fr; gap: 20px; }
  .newsletter-feature { grid-template-columns: 1fr; }
  .newsletter-feature-body { padding: 40px 28px; }
  .newsletter-preview { border-left: 0; border-top: 1px solid var(--divider-strong); }
  .featured-transactions .case-study-grid { grid-template-columns: repeat(2, 1fr); }
  .case-study-grid-compact { grid-template-columns: repeat(2, 1fr); }
  .case-study-grid-wide { grid-template-columns: repeat(2, 1fr); }
  .case-study-grid-equity { grid-template-columns: repeat(2, 1fr); }
}
/* The three contact buttons stack below 1200px, not 1024px: between those widths an
   equal 1fr column is only ~313px, which is narrower than the longest nowrap email
   address and was clipping it. Keep this above the 1024px block's specificity peers. */
@media (max-width: 1200px) {
  .contact-cta-actions { grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
  .contact-info { grid-template-columns: 1fr; gap: 30px; }
}
/* Shrink the wordmark before the nav gets tight, buying width for the links. */
@media (max-width: 1340px) {
  .nav-logo img { height: 52px; }
  .nav.scrolled .nav-logo img { height: 44px; }
}
/* 1140px, not 1200px. The breakpoint was raised to 1200 when the nav was set in
   all-caps and genuinely could not fit; Title Case is ~15% narrower, so the full nav
   now clears comfortably down to ~1120px (measured 26px logo-to-links gap there).
   1140 keeps ~47px of slack at the boundary. Re-measure before lowering further. */
@media (max-width: 1140px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.mobile-open { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(10,21,46,0.98); backdrop-filter: blur(20px); justify-content: center; align-items: center; gap: 28px; z-index: 999; overflow-y: auto; padding: 80px 20px 40px; }
  .nav-links.mobile-open a { font-size: 1.1rem; }
  .nav-links.mobile-open .nav-dropdown-menu { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; background: transparent; border: none; padding: 4px 0 0; min-width: auto; }
  .nav-links.mobile-open .nav-dropdown-menu a { padding: 6px 16px; font-size: 0.9rem !important; }
  .nav-links.mobile-open .nav-mega-menu { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; background: transparent; border: none; padding: 4px 0 0; min-width: auto; display: flex; flex-direction: column; gap: 14px; }
  .nav-links.mobile-open .nav-mega-heading { font-size: 0.7rem; padding-bottom: 4px; margin-bottom: 4px; }
  .nav-links.mobile-open .nav-mega-col a { padding: 6px 16px; font-size: 0.95rem !important; }
}
@media (max-width: 768px) {
  .section { padding: 80px 0; }
  .stats-ribbon { position: relative; top: auto; margin-top: 0; box-shadow: none; }
  .stats-ribbon.stuck { padding: 60px 0; background: var(--brand-navy-deep); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--divider); box-shadow: none; }
  .stats-ribbon.stuck .stat-number { font-size: clamp(2.4rem, 4vw, 3.4rem); margin-bottom: 8px; }
  .stats-ribbon.stuck .stat-label { font-size: 0.75rem; }
  .stats-ribbon.stuck .stats-grid { gap: 30px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .stat-item:not(:last-child)::after { display: none; }
  .track-record-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .team-grid-leadership { grid-template-columns: repeat(2, 1fr); }
  .featured-transactions .case-study-grid { grid-template-columns: 1fr; }
  .about-text p { text-align: left; hyphens: manual; }
  .featured-actions { flex-direction: column; gap: 14px; }
  .featured-actions .btn-secondary { width: 100%; justify-content: center; }
  .about-grid, .deals-grid, .deals-grid-2x2, .news-grid, .media-grid, .case-study-grid, .debt-products-grid, .contact-offices-grid { grid-template-columns: 1fr; gap: 24px; }
  .debt-products-grid { gap: 1px; }
  .ndf-focus-list li { grid-template-columns: 1fr; gap: 4px; }
  .contact-offices-grid { gap: 60px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .news-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .contact-info { grid-template-columns: 1fr; gap: 30px; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
  .hero-actions { flex-direction: column; align-items: center; }
  .contact-cta { padding: 100px 0; }
  .contact-cta-actions { grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
  .contact-cta-action { gap: 8px; }
  /* 9.28.2026: the address used to be hidden here, leaving blank white buttons that were just an arrow.
     Show it, small enough to fit a 320px phone, and let the button wrap rather than clip. */
  .email-address-inline { font-size: 0.78rem; letter-spacing: 0.01em; overflow-wrap: anywhere; }
  .btn-large { padding: 18px 16px; white-space: normal; justify-content: center; }
  /* Roll-down deal cards collapse to one column via the shared .case-study-grid
     mobile rule; just tighten the summary padding here. */
  .loan-rolldown-summary { padding: 24px 2px; gap: 14px; }
  .loan-rolldown-heading { gap: 6px 16px; }
  .loan-rolldown-body { padding-bottom: 32px; }
  /* Indicative-terms wide list: stack label over value on phones */
  .ndf-focus-panel-wide .ndf-focus-list li { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .ndf-focus-panel-wide .ndf-focus-list li .ndf-focus-label { align-self: start; }
  .contact-office-city { font-size: clamp(2rem, 9vw, 2.6rem); }
}


/* Mobile timeline (9.28.2026): wider cards so the next card only peeks, plus a right-edge
   fade so the peek reads as "swipe for more" instead of text chopped mid-word. */
@media (max-width: 640px) {
  .timeline { grid-auto-columns: min(78vw, 280px); }
  .timeline { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
}
/* Justified copy opens huge word gaps on a ~330px column (equity page) -- ragged right on phones. */
@media (max-width: 768px) { .section-desc-justify, .section-desc-justify p { text-align: left; hyphens: manual; } }