/* ==========================================================================
   Tokens (see DESIGN-SPEC.md)
   ========================================================================== */
:root {
  --navy-dark: #070f1d;
  --navy-surface: #0f1d33;
  --navy-raised: #13233d;
  --navy: #1e3865;
  --accent: #0a7f71;
  --accent-dark: #096f63;
  --accent-bright: #0d9f8d;
  --accent-light: #0fb9a4;   /* exact logo turquoise */
  --surface-1: #ffffff;
  --surface-2: #f8f9fa;
  --surface-3: #f3f4f5;
  --border: #e5e7eb;
  --muted: #6b7280;

  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Roboto Condensed", "Arial Narrow", sans-serif;

  --container: 1152px;
  --gutter: 32px;
  --section-y: 120px;
  --radius: 8px;
  --radius-sm: 6px;
  --nav-h: 68px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 1024px) { :root { --section-y: 88px; } }
@media (max-width: 640px)  { :root { --section-y: 64px; --gutter: 20px; } }

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--navy);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--accent); color: #fff; padding: 8px 16px; border-radius: var(--radius-sm);
}
.skip:focus { left: 8px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Section bands */
.section { padding: var(--section-y) 0; }
.light { background: var(--surface-1); color: var(--navy); }
.light--tint { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dark { background: var(--navy-dark); color: #fff; }
.dark p { color: rgba(255,255,255,.85); }
.dark h2, .dark h3 { color: #fff; }

/* ==========================================================================
   Type
   ========================================================================== */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }
.dark .eyebrow { color: var(--accent-light); }

h1 { font-size: clamp(42px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -0.035em; color: #fff; }
h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.08; }
h3 { font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; }
h1 em, h2 em { font-style: normal; color: var(--accent-bright); }
.dark h1 em, .dark h2 em { color: var(--accent-light); }

.lede { font-size: 18px; line-height: 1.6; max-width: 640px; }
.intro { font-size: 17px; line-height: 1.6; max-width: 640px; color: var(--muted); margin-top: 20px; }
.dark .intro { color: rgba(255,255,255,.85); }

/* Icon badge on cards and tiles */
.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 20px;
  border-radius: var(--radius-sm);
  background: rgba(15,185,164,.08);
  color: var(--accent);
}
.icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dark .icon { background: rgba(15,185,164,.12); color: var(--accent-light); }

.section__head { max-width: 760px; margin-bottom: 56px; }
.section__head--split {
  max-width: none;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
@media (max-width: 760px) { .section__head--split { flex-direction: column; align-items: flex-start; } }

/* ==========================================================================
   Buttons and links
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 24px;
  font-size: 15px; font-weight: 700; line-height: 1;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(15,185,164,.28); }
.btn--primary:hover { background: var(--accent-dark); }
.btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); }
.btn--lg { height: 56px; padding: 0 30px; font-size: 16px; }
.btn--sm { height: 38px; padding: 0 18px; font-size: 13px; font-weight: 600; box-shadow: none; }

.link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--accent);
  margin-top: auto;
}
.link .arrow { transition: transform .25s var(--ease); }
.link:hover .arrow { transform: translateX(3px); }
.link--light { color: var(--accent-light); }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  color: #fff;
  background: rgba(7,15,29,.55);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .3s var(--ease);
}
.nav.is-scrolled { background: rgba(7,15,29,.94); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__brand { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.nav__brand span { color: var(--accent-light); }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a:not(.btn) { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.84); padding: 8px 14px; transition: color .2s; }
.nav__links a:not(.btn):hover { color: #fff; }
.nav__mobile-cta { display: none; }
.nav__right { display: flex; align-items: center; gap: 20px; }
.nav__phone { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.86); }
.nav__toggle {
  display: none; width: 40px; height: 40px; padding: 8px;
  background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px;
}
.nav__toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }

@media (max-width: 1080px) {
  .nav__links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-dark); border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 12px var(--gutter) 24px;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .25s var(--ease), opacity .2s;
  }
  .nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links a:not(.btn) { padding: 14px 0; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav__mobile-cta { display: inline-flex; margin-top: 16px; justify-content: center; }
  .nav__phone, .nav__right .btn { display: none; }
  .nav__toggle { display: flex; }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ==========================================================================
   Hero (photo with navy overlay)
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + 112px) 0 80px;
  min-height: 720px;
  display: flex; align-items: center;
}
@media (max-width: 640px) { .hero { padding: calc(var(--nav-h) + 56px) 0 48px; min-height: 0; } }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 55%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,15,29,.55) 0%, rgba(7,15,29,0) 30%, rgba(7,15,29,0) 55%, rgba(7,15,29,.92) 100%),
    linear-gradient(90deg, rgba(7,15,29,.96) 0%, rgba(7,15,29,.86) 38%, rgba(7,15,29,.45) 70%, rgba(7,15,29,.25) 100%);
}
@media (max-width: 760px) {
  .hero__media::after { background: linear-gradient(180deg, rgba(7,15,29,.9) 0%, rgba(7,15,29,.78) 60%, rgba(7,15,29,.96) 100%); }
}
.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero h1 { max-width: 760px; margin-bottom: 24px; }
.hero .lede { color: rgba(255,255,255,.88); margin-bottom: 36px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 80px; padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.16);
  gap: 24px;
}
.stats li { display: flex; flex-direction: column; gap: 6px; }
.stats strong { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.stats li > span:last-child { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.78); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); margin-top: 48px; } }

/* ==========================================================================
   Grids, cards, tiles
   ========================================================================== */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { border-color: rgba(15,185,164,.35); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(7,15,29,.08); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--muted); margin-bottom: 20px; }
.ticks { margin-bottom: 28px; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 24px; font-size: 14px; font-weight: 500; color: var(--navy); }
.ticks li::before {
  content: ""; position: absolute; left: 1px; top: 7px;
  width: 10px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
@media (max-width: 640px) { .card { padding: 28px; } }

/* Tiles: light by default, dark variant inside .dark */
.tile {
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.tile:hover { border-color: rgba(15,185,164,.35); box-shadow: 0 16px 40px rgba(7,15,29,.08); transform: translateY(-3px); }
.tile h3 { font-size: 19px; margin-bottom: 10px; }
.tile p { font-size: 15px; color: var(--muted); }
.tile--link p:not(.eyebrow) { margin-bottom: 20px; }
.tile .eyebrow { margin-bottom: 14px; }
.dark .tile { background: var(--navy-raised); border-color: rgba(255,255,255,.12); }
.dark .tile:hover { background: #172b4a; border-color: rgba(15,185,164,.35); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.dark .tile p { color: rgba(255,255,255,.85); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  position: relative;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px;
}
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-bottom: 20px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 800;
}
.step h3 { font-size: 19px; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 15px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* Partner promises strip */
.promises {
  display: grid; grid-template-columns: repeat(6, 1fr);
  margin-top: 20px;
  border: 1px solid rgba(255,255,255,.1);
  background: var(--navy-surface);
  border-radius: var(--radius); overflow: hidden;
}
.promises li {
  padding: 20px 18px; text-align: center;
  border-right: 1px solid rgba(255,255,255,.1);
  font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.88);
}
.promises li:last-child { border-right: 0; }
.promises strong { font-weight: 600; }
@media (max-width: 900px) {
  .promises { grid-template-columns: repeat(3, 1fr); }
  .promises li:nth-child(3) { border-right: 0; }
  .promises li:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.1); }
}
@media (max-width: 520px) {
  .promises { grid-template-columns: repeat(2, 1fr); }
  .promises li { border-right: 1px solid rgba(255,255,255,.1) !important; border-bottom: 1px solid rgba(255,255,255,.1); }
  .promises li:nth-child(even) { border-right: 0 !important; }
  .promises li:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Deals */
.deal {
  display: flex; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.deal:hover { border-color: rgba(15,185,164,.35); box-shadow: 0 16px 40px rgba(7,15,29,.1); transform: translateY(-3px); }
.deal__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); }
.deal__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.deal:hover .deal__media img { transform: scale(1.04); }
.deal__body { display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 22px; }
.deal__type {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-dark); background: rgba(15,185,164,.08);
  padding: 5px 10px; border-radius: 999px; margin-bottom: 12px;
}
.deal__amt { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.deal__loc { font-size: 15px; font-weight: 600; }
.deal__meta { font-size: 13px; color: var(--muted); margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }

/* Quotes */
.quote {
  margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px;
}
.quote p { font-size: 18px; line-height: 1.5; color: var(--navy); letter-spacing: -0.01em; }
.quote p::before { content: "\201C"; display: block; font-size: 48px; line-height: .6; color: var(--accent); margin-bottom: 14px; font-weight: 800; }
.quote footer { display: flex; flex-direction: column; gap: 2px; }
.quote footer strong { font-size: 14px; font-weight: 700; }
.quote footer span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: 40px; } }
.contact__details { margin-top: 32px; display: grid; gap: 12px; font-size: 15px; line-height: 1.5; }
.contact__details a { font-weight: 700; color: var(--accent); }

.form {
  display: grid; gap: 16px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 40px;
  box-shadow: 0 24px 60px rgba(7,15,29,.08);
}
@media (max-width: 640px) { .form { padding: 24px; } }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.form label { display: grid; gap: 8px; font-size: 13px; font-weight: 700; }
.form label small { font-weight: 500; color: var(--muted); }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--navy);
  padding: 12px 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(15,185,164,.15); }
.form textarea { resize: vertical; }
.form .btn { justify-self: start; margin-top: 8px; }
.form__note { font-size: 14px; color: var(--accent-dark); min-height: 1em; }
.form__note.is-error { color: #dc2626; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding: 80px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { display: grid; gap: 14px; align-content: start; justify-items: start; }
.footer__brand p { font-size: 14px; max-width: 320px; }
.footer__brand a:not(.nav__brand) { font-size: 13px; font-weight: 700; color: var(--accent-light); }
.footer h4 { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 18px; }
.footer__grid div > a { display: block; font-size: 14px; color: rgba(255,255,255,.88); padding: 6px 0; transition: color .2s; }
.footer__grid div > a:hover { color: #fff; }
.footer__legal { margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 14px; }
.footer__legal p { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.6); }
.footer__bottom {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-size: 13px; color: rgba(255,255,255,.7);
}
.footer__bottom nav { display: flex; gap: 20px; }
.footer__bottom nav a:hover { color: #fff; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.grid .reveal:nth-child(2), .steps .reveal:nth-child(2) { transition-delay: .08s; }
.grid .reveal:nth-child(3), .steps .reveal:nth-child(3) { transition-delay: .16s; }
.grid .reveal:nth-child(4) { transition-delay: .24s; }
.grid .reveal:nth-child(5) { transition-delay: .32s; }
.grid .reveal:nth-child(6) { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Team
   ========================================================================== */
.person {
  display: flex; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 20px 28px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.person:hover { border-color: rgba(15,185,164,.35); box-shadow: 0 16px 40px rgba(7,15,29,.08); transform: translateY(-3px); }
.person__photo {
  position: relative; aspect-ratio: 4 / 5; width: 100%; margin-bottom: 22px;
  border-radius: var(--radius-sm); overflow: hidden; object-fit: cover;
  background: linear-gradient(160deg, var(--surface-3) 0%, #dfe5ec 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: rgba(30,56,101,.45);
}
.person__photo svg { width: 72px; height: 72px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.person__photo span { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.person__name { font-size: 20px; margin-bottom: 4px; }
.person__role { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.person__bio { font-size: 15px; line-height: 1.6; color: var(--muted); margin-bottom: 20px; }

/* ==========================================================================
   Photo band
   ========================================================================== */
.interlude {
  position: relative; overflow: hidden;
  min-height: 520px;
  display: flex; align-items: center;
  padding: 120px 0;
}
@media (max-width: 640px) { .interlude { min-height: 420px; padding: 80px 0; } }
.interlude__media { position: absolute; inset: 0; z-index: 0; }
.interlude__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.interlude__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,15,29,.7) 0%, rgba(7,15,29,.35) 50%, rgba(7,15,29,.8) 100%),
    linear-gradient(90deg, rgba(7,15,29,.55) 0%, rgba(7,15,29,.15) 100%);
}
.interlude__inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.interlude__inner .eyebrow { justify-content: center; }
.interlude__line {
  max-width: 880px;
  font-size: clamp(28px, 4vw, 46px); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em;
  color: #fff !important;
}
.interlude__line em { font-style: normal; color: var(--accent-light); }

/* ==========================================================================
   Hero zoom
   ========================================================================== */
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero__media img { transform-origin: 60% 50%; animation: heroZoom 22s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; } }


/* ==========================================================================
   Messaging revision: pillars, fine print, broker CTA
   ========================================================================== */
.pillar { padding: 36px 32px; }
.pillar h3 { font-size: 22px; margin-bottom: 12px; }
.pillar p { font-size: 16px; line-height: 1.65; }
.fineprint { margin-top: 28px; font-size: 13px; color: var(--muted); max-width: 720px; }
.partners__cta { margin-top: 40px; display: flex; justify-content: center; }
.stats strong { white-space: nowrap; }
@media (max-width: 1024px) { .stats strong { font-size: 34px; } }
@media (max-width: 760px) { .stats strong { font-size: 30px; white-space: normal; } }

/* Five loan programs: three across, then two wider cards */
.programs--five { grid-template-columns: repeat(6, 1fr); }
.programs--five > .card { grid-column: span 2; }
.programs--five > .card:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 1024px) {
  .programs--five { grid-template-columns: repeat(2, 1fr); }
  .programs--five > .card, .programs--five > .card:nth-child(n+4) { grid-column: span 1; }
  .programs--five > .card:last-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  .programs--five { grid-template-columns: 1fr; }
  .programs--five > .card:last-child { grid-column: span 1; }
}

/* Team bios run two paragraphs */
.person__bio + .person__bio { margin-top: -8px; }
.person__bio:last-child { margin-bottom: 0; }

/* Real team portraits */
img.person__photo { display: block; height: auto; object-fit: cover; object-position: 50% 20%; background: var(--surface-3); }

/* Logo */
.nav__brand { display: inline-flex; align-items: center; }
.nav__brand img { display: block; height: 38px; width: auto; }
.footer__brand .nav__brand img { height: 52px; }
@media (max-width: 640px) { .nav__brand img { height: 32px; } }
.person__email { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--accent); word-break: break-all; }
.person__email:hover { color: var(--accent-dark); }
.footer__address { font-size: 13px; line-height: 1.6; margin: 0; }

/* Recently funded: eight cards, four across */
.deals--four { grid-template-columns: repeat(4, 1fr); }
.deals--four .deal__body { padding: 20px 20px 22px; }
.deals--four .deal__amt { font-size: 26px; }
@media (max-width: 1024px) { .deals--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .deals--four { grid-template-columns: 1fr; } }

/* Funded loans without a property photo: branded tile */
.deal__media--brand {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(15,185,164,.18) 0%, rgba(15,185,164,0) 55%),
    linear-gradient(160deg, var(--navy-raised) 0%, var(--navy-dark) 100%);
}
.deal__media--brand img { width: 22%; height: auto; opacity: .9; }
.deal:hover .deal__media--brand img { transform: none; }

/* Team: pin each partner email to the bottom of its card so all three line up */
.person__email { margin-top: auto; padding-top: 18px; align-self: flex-start; }

/* ==========================================================================
   Phone hero: photo fills the top almost clear, then fades into solid navy
   where the text begins, so the house shows and the text stays on dark.
   ========================================================================== */
@media (max-width: 760px) {
  .hero { display: block; min-height: 0; padding: calc(var(--nav-h) + min(262px, 27vh)) 0 48px; }
  .hero__media { bottom: auto; height: min(470px, 52vh); }
  .hero__media img { object-position: 72% 50%; }
  .hero__media::after {
    background: linear-gradient(180deg,
      rgba(7,15,29,.55) 0%,
      rgba(7,15,29,.06) 15%,
      rgba(7,15,29,.06) 50%,
      rgba(7,15,29,.84) 68%,
      #070f1d 86%);
  }
  .hero h1 { margin-bottom: 18px; font-size: clamp(34px, 10.4vw, 44px); }
  .hero .lede { font-size: 16px; margin-bottom: 26px; }
}

/* ==========================================================================
   Team: smaller portraits
   Desktop: square head-and-shoulders crop. Tablet: photo left, text right.
   Phone: small headshot beside name and title, bio full width below.
   ========================================================================== */
@media (min-width: 901px) {
  img.person__photo { aspect-ratio: 1 / 1; object-position: 50% 50%; }
}
.person picture { display: contents; }
@media (max-width: 900px) {
  #team .team { grid-template-columns: 1fr; }
  .person { display: grid; grid-template-columns: 180px 1fr; column-gap: 28px; align-items: start; padding: 24px; }
  img.person__photo { grid-column: 1; grid-row: 1 / span 5; width: 180px; margin: 0; }
  .person__name, .person__role, .person__bio, .person__email { grid-column: 2; }
  .person__email { margin-top: 0; padding-top: 10px; }
}
@media (max-width: 600px) {
  .person { grid-template-columns: 96px 1fr; column-gap: 18px; padding: 20px; }
  img.person__photo { grid-row: 1 / span 2; width: 96px; }
  .person__name { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 4px; }
  .person__role { grid-column: 2; grid-row: 2; align-self: start; margin-bottom: 0; }
  .person__bio { grid-column: 1 / -1; margin-top: 18px; }
  .person__bio + .person__bio { margin-top: 10px; }
  .person__email { grid-column: 1 / -1; }
}

/* ==========================================================================
   Team bios: every screen shows photo, name, title, a one-line summary, and a
   "Read full bio" toggle. script.js closes the bios on load, so with
   JavaScript off the full bios still show.
   ========================================================================== */
.person__summary { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 500; color: var(--navy); }
.person__more { margin: 10px 0 0; }
.person__more > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 700; color: var(--accent); padding: 8px 0;
}
.person__more > summary::-webkit-details-marker { display: none; }
.person__more > summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.person__more[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.person__more .more-open, .person__more[open] .more-closed { display: none; }
.person__more[open] .more-open { display: inline; }
.person__more > summary:hover { color: var(--accent-dark); }
.person__more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.person__more .person__bio:first-of-type { margin-top: 6px; }
@media (min-width: 601px) and (max-width: 900px) {
  .person__summary, .person__more { grid-column: 2; }
}
@media (max-width: 600px) {
  .person__summary { grid-column: 1 / -1; margin-top: 16px; }
  .person__more { grid-column: 1 / -1; }
  .person__email { padding-top: 6px; }
}

/* ==========================================================================
   Recently funded: one sliding row
   Desktop shows 4 with arrows and a "1–4 of 8" counter. Tablet shows about
   2.4 so the cut-off card signals more. Phones show one card with the next
   peeking in, swipe only, and a "1 / 8" counter below. No auto-scrolling.
   ========================================================================== */
.carousel__controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.carousel__count {
  font-size: 13px; font-weight: 600; color: var(--muted);
  min-width: 64px; text-align: right; margin-right: 6px; font-variant-numeric: tabular-nums;
}
.carousel__btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-1); color: var(--navy); border: 1px solid var(--border);
  cursor: pointer; transition: border-color .2s, color .2s, opacity .2s;
}
.carousel__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carousel__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.carousel__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.carousel__btn:disabled { opacity: .35; cursor: default; }

.deals-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  padding: 6px 0 28px; margin: -6px 0 -28px;   /* room for the hover lift and shadow */
}
.deals-track::-webkit-scrollbar { display: none; }
.deals-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--radius); }
.deals-track > .deal { scroll-snap-align: start; }
.deals-track .deal__body { padding: 20px 20px 22px; }
.deals-track .deal__amt { font-size: 26px; }
.carousel__count--below { display: none; }

@media (max-width: 1024px) { .deals-track { grid-auto-columns: calc((100% - 40px) / 2.4); } }
@media (max-width: 760px)  { .carousel__controls { align-self: flex-start; } }
@media (max-width: 600px) {
  .deals-track { grid-auto-columns: 82%; gap: 14px; }
  .carousel__controls { display: none; }
  .carousel__count--below { display: block; text-align: center; margin: 32px 0 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .deals-track { scroll-behavior: auto; } }

/* Carousel arrows: large circles at the far left and right of the row,
   centered on the cards. Fully outside the cards on wide screens, straddling
   the row edges on narrower ones. The row loops, so the arrows always show. Hidden on phones (swipe). */
.carousel { position: relative; }
.carousel__btn {
  position: absolute; top: calc(50% - 11px); transform: translateY(-50%); z-index: 2;   /* -11px offsets the row's shadow padding (6px top, 28px bottom) */
  width: 56px; height: 56px;
  background: #fff; color: var(--navy); border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(7,15,29,.18);
  transition: opacity .2s, border-color .2s, color .2s, box-shadow .2s;
}
.carousel__btn svg { width: 26px; height: 26px; stroke-width: 2.4; }
.carousel__btn--prev { left: -28px; }
.carousel__btn--next { right: -28px; }
.carousel__btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); box-shadow: 0 10px 28px rgba(7,15,29,.24); }
.carousel__btn:disabled { opacity: 0; pointer-events: none; }
@media (min-width: 1320px) {
  .carousel__btn--prev { left: -76px; }
  .carousel__btn--next { right: -76px; }
}
@media (max-width: 600px) { .carousel__btn { display: none; } }

/* External nav link (CRE Advisory, opens almicapital.com in a new tab) */
.nav__ext { display: inline-flex; align-items: baseline; gap: 4px; }
.nav__ext-icon { font-size: .85em; opacity: .75; transition: transform .2s var(--ease), opacity .2s; }
.nav__ext:hover .nav__ext-icon { opacity: 1; transform: translate(1px, -1px); }
.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;
}

/* Nav: labels never break onto two lines; slightly tighter spacing on mid-size laptops */
.nav__links a { white-space: nowrap; }
@media (min-width: 1081px) and (max-width: 1240px) {
  .nav__links a:not(.btn) { padding: 8px 10px; }
}

/* ==========================================================================
   Cosmetic and structural fixes (text unchanged)
   ========================================================================== */
/* Teal accent only in the hero headline */
h2 em, .dark h2 em, .interlude__line em { color: inherit; }

/* Hover lift only on the loan program cards */
.deal:hover, .person:hover, .tile:hover { transform: none; box-shadow: none; border-color: var(--border); }
.dark .tile:hover { background: var(--navy-raised); border-color: rgba(255,255,255,.12); }
.deal:hover .deal__media img { transform: none; }

/* Process as a numbered timeline */
.timeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
.timeline::before {
  content: ""; position: absolute; top: 21px; left: 22px; right: calc(33.333% - 22px); height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(15,185,164,.35) 100%);
}
.timeline__step { position: relative; }
.timeline__n {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 800;
  box-shadow: 0 0 0 8px var(--surface-2);
}
.timeline__step h3 { font-size: 21px; margin: 22px 0 8px; }
.timeline__step p { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 340px; margin: 0; }
@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr; gap: 30px; }
  .timeline::before { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(15,185,164,.35) 100%); }
  .timeline__step { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; }
  .timeline__n { grid-row: 1 / span 2; }
  .timeline__step h3 { margin: 9px 0 6px; }
}

/* Brokers: heading and button on the left, the three points as a list on the right */
.partners__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.partners__copy .section__head, .partners__copy { margin-bottom: 0; }
.partners__copy .intro { margin-top: 20px; }
.partners__copy .partners__cta { margin-top: 32px; justify-content: flex-start; }
.partners__list { list-style: none; margin: 0; padding: 0; }
.partners__list li { position: relative; padding: 22px 0 22px 30px; border-top: 1px solid rgba(255,255,255,.12); }
.partners__list li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.partners__list li::before {
  content: ""; position: absolute; left: 2px; top: 30px; width: 10px; height: 6px;
  border-left: 2px solid var(--accent-light); border-bottom: 2px solid var(--accent-light); transform: rotate(-45deg);
}
.partners__list strong { display: block; font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.partners__list span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.78); }
@media (max-width: 900px) { .partners__grid { grid-template-columns: 1fr; gap: 36px; } }

/* ==========================================================================
   Legal pages: Privacy Policy, Terms & Conditions, Accessibility
   ========================================================================== */
.nav--legal .nav__inner { justify-content: space-between; }
.legal-back { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.84); white-space: nowrap; transition: color .2s; }
.legal-back:hover { color: #fff; }
.legal-back:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 4px; border-radius: 4px; }
.legal { background: var(--surface-2); padding: calc(var(--nav-h) + 72px) 0 96px; }
.legal__inner { max-width: 760px; }
.legal h1 { color: var(--navy); font-size: clamp(36px, 5vw, 52px); margin: 0; }
.legal__updated { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.legal__intro { margin: 28px 0 0; font-size: 18px; line-height: 1.65; color: var(--navy); }
.legal section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.legal h2 { font-size: 22px; color: var(--navy); margin: 0 0 12px; letter-spacing: -0.015em; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: #3b4a5c; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--navy); }
.legal a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.legal-footer { padding: 28px 0; }
.legal-footer .footer__bottom { margin-top: 0; padding-top: 0; border-top: 0; }
.footer__bottom nav a[aria-current="page"] { color: #fff; }
@media (max-width: 640px) { .legal { padding: calc(var(--nav-h) + 40px) 0 64px; } .legal__intro { font-size: 17px; } }
/* Legal pages sit on a light background, so the top bar is solid navy there */
.nav--legal, .nav--legal.is-scrolled { background: var(--navy-dark); }

/* Contact: hand-off panel to the online loan application (replaces the old mailto form) */
.apply { gap: 18px; }
.apply h3 { font-size: 22px; }
.apply p { color: var(--muted); line-height: 1.65; }
.apply .btn { margin-top: 4px; }
.apply__alt { font-size: 15px; }
.apply__alt a { font-weight: 700; color: var(--accent); }