/* ============================================================
   FIREFLY CAPITAL REAL ESTATE — "Lumen" design system, v2
   ------------------------------------------------------------
   Paper canvas, light Archivo, gold drawn from the mark.
   No uppercase tracked labels. No hairline-with-stats rows.
   The firefly is the recurring motif: a gold point of light.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  --paper:   #F7F6F3;
  --paper-2: #EFEDE7;
  --paper-3: #E6E3DB;
  --ink:     #14130F;
  --ink-80:  #3A3833;
  --ink-60:  #5F5C53;
  --ink-40:  #8C8880;
  --gold:    #8A7F14;
  --gold-b:  #C8BE1E;

  --rule:       rgba(20, 19, 15, 0.11);
  --rule-soft:  rgba(20, 19, 15, 0.06);
  --rule-faint: rgba(20, 19, 15, 0.026);

  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --maxw: 1560px;
  --gut:  clamp(20px, 4vw, 64px);
  --nav-h: 74px;
  --cols: 12;

  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--gold-b); color: var(--ink); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--ink-40); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-80); }

/* ---------- 2. STRUCTURE ---------- */
.grid-overlay {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: repeat(var(--cols), 1fr);
}
.grid-overlay i { border-left: 1px solid var(--rule-faint); }
.grid-overlay i:last-child { border-right: 1px solid var(--rule-faint); }

.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); position: relative; z-index: 3; }
.grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: clamp(16px, 2vw, 32px); }

/* ---------- 3. TYPOGRAPHY ---------- */
.display {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
.display strong, .gold { color: var(--gold); font-weight: inherit; }
.d-1 { font-size: clamp(2.7rem, 6.4vw, 7.2rem); }
.d-2 { font-size: clamp(2.2rem, 4.6vw, 4.8rem); }
.d-3 { font-size: clamp(1.8rem, 3.2vw, 3.2rem); }
.d-4 { font-size: clamp(1.3rem, 1.9vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.14; font-weight: 400; }

/* Quiet mixed-case label — replaces the old tracked caps */
.lbl { font-size: 14px; font-weight: 400; letter-spacing: 0.015em; color: var(--ink-60); margin: 0; line-height: 1.55; }
.lbl--ink  { color: var(--ink); }
.lbl--gold { color: var(--gold); }
.lbl--dot  { display: inline-flex; align-items: center; gap: 10px; }
.lbl--dot::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--gold-b); flex: 0 0 auto; box-shadow: 0 0 10px 2px rgba(200,190,30,0.5); }

.lede { font-size: clamp(1.08rem, 1.4vw, 1.42rem); line-height: 1.5; letter-spacing: -0.012em; color: var(--ink-80); margin: 0; font-weight: 300; }
.body-txt { font-size: 15.5px; line-height: 1.7; color: var(--ink-60); margin: 0; }
.body-txt + .body-txt { margin-top: 1em; }
.note { font-size: 13.5px; line-height: 1.6; color: var(--ink-40); margin: 0; }

.quote {
  width: 100%;
  font-weight: 300;
  font-size: clamp(1.7rem, 3.6vw, 3.7rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.quote .w { opacity: 0.14; transition: opacity 0.4s linear; }
.quote .w.lit { opacity: 1; }
.quote .w-gold.lit { color: var(--gold); }

.lnk { color: var(--ink); border-bottom: 1px solid var(--rule); transition: border-color 0.35s var(--ease); }
.lnk:hover { border-bottom-color: var(--gold); }

/* Animated hairline: draws in when .is-in */
.drawrule { height: 1px; background: none; border: 0; margin: 0; position: relative; overflow: hidden; }
.drawrule::after { content: ''; position: absolute; inset: 0; background: var(--rule); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
.drawrule.is-in::after { transform: scaleX(1); }

/* ---------- 4. CURSOR ---------- */
@media (pointer: fine) {
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none;
    border-radius: 50%; transform: translate(-50%, -50%);
    will-change: transform;
  }
  .cursor-dot { width: 6px; height: 6px; background: var(--ink); }
  .cursor-ring {
    width: 34px; height: 34px; border: 1px solid var(--gold-b);
    transition: width 0.35s var(--ease), height 0.35s var(--ease), border-color 0.35s var(--ease);
  }
  body.cur-link .cursor-ring { width: 52px; height: 52px; border-color: var(--gold); }
  body.cur-hide .cursor-dot, body.cur-hide .cursor-ring { opacity: 0; }
}
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- 5. NAVIGATION ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--nav-h);
  background: rgba(247, 246, 243, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule-soft);
  transition: transform 0.55s var(--ease);
}
.nav.is-hidden { transform: translateY(-101%); }
.nav__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand__mark { height: 30px; width: auto; }
.brand__word { height: 15px; width: auto; }
.brand__sub {
  font-size: 13px; font-weight: 400; letter-spacing: 0.01em; color: var(--ink-40);
  margin-left: 2px; align-self: center; white-space: nowrap;
}

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 44px); }
.nav__link {
  position: relative; font-size: 14px; font-weight: 400; letter-spacing: 0;
  color: var(--ink-60); padding: 6px 0; display: inline-block;
  transition: color 0.35s var(--ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--ink); padding-left: 14px; }
.nav__link.is-active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-b);
  box-shadow: 0 0 8px 1px rgba(200,190,30,0.55);
}
.nav__link.is-active::after { display: none; }

.nav__burger { display: none; width: 34px; height: 34px; position: relative; }
.nav__burger span { position: absolute; left: 6px; right: 6px; height: 1.5px; background: var(--ink); transition: transform 0.45s var(--ease); }
.nav__burger span:nth-child(1) { top: 13px; }
.nav__burger span:nth-child(2) { top: 20px; }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 55;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  padding: 8px var(--gut) 34px; display: none;
  clip-path: inset(0 0 100% 0); transition: clip-path 0.65s var(--ease);
}
body.menu-open .menu { clip-path: inset(0 0 0 0); }
.menu a { display: block; padding: 19px 0; border-bottom: 1px solid var(--rule-soft); font-size: 1.7rem; font-weight: 300; letter-spacing: -0.02em; }

/* ---------- 6. PAGE TRANSITION WIPE ---------- */
.wipe {
  position: fixed; inset: 0; z-index: 250; background: var(--paper-2);
  transform: translateY(101%); pointer-events: none;
}
.wipe i {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold-b); box-shadow: 0 0 18px 4px rgba(200,190,30,0.6);
  top: 50%; left: -30px;
}

/* ---------- 7. REVEALS ---------- */
.rv { opacity: 0; transform: translateY(20px); }
.lines .ln { display: block; overflow: hidden; }
.lines .ln > span { display: block; transform: translateY(108%); }
.img-rv { overflow: hidden; position: relative; background: var(--paper-3); }
.img-rv > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; }
.no-js .rv, .no-js .lines .ln > span, .no-js .img-rv > img { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv, .lines .ln > span { opacity: 1 !important; transform: none !important; }
  .img-rv > img { transform: none !important; }
}

/* ---------- 8. HERO (home) ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav-h); overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; z-index: 1; }
.hero__canvas canvas { display: block; width: 100%; height: 100%; }
.hero__in { position: relative; z-index: 3; pointer-events: none; }
.hero__in a, .hero__in .const { pointer-events: auto; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px 30px; align-items: center; margin-bottom: clamp(28px, 4.5vh, 52px); }
.hero__scroll {
  position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: 12px; color: var(--ink-40);
}
.hero__scroll i { width: 1px; height: 42px; background: var(--rule); position: relative; overflow: hidden; display: block; }
.hero__scroll i::after { content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--gold-b); animation: scrollhint 2.1s var(--ease-io) infinite; }
@keyframes scrollhint { 0% { top: -40%; } 100% { top: 110%; } }

/* Sub-page hero (no particles) */
.phero { padding-top: calc(var(--nav-h) + clamp(26px, 4.5vh, 54px)); padding-bottom: clamp(16px, 2.6vh, 30px); position: relative; }
.phero__meta { display: flex; flex-wrap: wrap; gap: 8px 30px; align-items: center; margin-bottom: clamp(28px, 4.5vh, 52px); }
.phero__foot { margin-top: clamp(16px, 2.6vh, 30px); display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: clamp(16px, 2vw, 32px); row-gap: 30px; }
.pf-half { grid-column: span 6; }
.pf-third { grid-column: span 4; }

/* ---------- 9. FIREFLY CONSTELLATION STATS ---------- */
.const { position: relative; margin-top: clamp(36px, 6vh, 70px); max-width: 760px; }
.const svg { width: 100%; height: auto; display: block; overflow: visible; }
.const__path { fill: none; stroke: var(--gold-b); stroke-width: 1.3; opacity: 0.8; }
.const__node circle.core { fill: var(--gold-b); }
.const__node circle.halo { fill: var(--gold-b); opacity: 0.22; animation: fpulse 2.6s var(--ease-io) infinite; }
.const__node:nth-child(odd) circle.halo { animation-delay: 1.1s; }
@keyframes fpulse { 0%,100% { opacity: 0.14; r: 8; } 50% { opacity: 0.32; r: 12; } }
.const__n { font-family: var(--sans); font-weight: 500; font-size: 27px; letter-spacing: -0.5px; fill: var(--ink); }
.const__l { font-family: var(--sans); font-weight: 400; font-size: 12px; fill: var(--ink-40); }
.const--sm { max-width: 620px; }
.const--sm .const__n { font-size: 24px; }

/* ---------- 10. SECTIONS ---------- */
.sec { padding-block: clamp(44px, 6.5vh, 84px); position: relative; }
.sec--tint { background: var(--paper-2); }
.sec__kick { margin-bottom: clamp(10px, 1.4vh, 16px); }
.sec__title { margin: 0 0 clamp(14px, 2vh, 24px); }

/* Full-bleed parallax band */
.band { position: relative; overflow: hidden; background: var(--paper-3); }
.band > img { width: 100%; height: 118%; object-fit: cover; position: relative; top: -9%; will-change: transform; }
.band__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px var(--gut); display: flex; justify-content: space-between; gap: 20px; color: #fff; }
.band__cap::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,19,15,0.55), transparent); z-index: -1; }
.band__cap .lbl { color: rgba(255,255,255,0.85); }

/* Who we are: sector index */
.verticals { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.vertical {
  padding: 24px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: clamp(1.15rem, 1.6vw, 1.6rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.12;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  transition: padding-left 0.5s var(--ease), color 0.4s var(--ease);
  position: relative;
}
.vertical em { font-style: normal; font-size: 12.5px; color: var(--ink-40); opacity: 0; transform: translateX(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.vertical::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scale(0);
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-b);
  transition: transform 0.4s var(--ease);
}
.vertical:hover { padding-left: 20px; color: var(--gold); }
.vertical:hover::before { transform: translateY(-50%) scale(1); }
.vertical:hover em { opacity: 1; transform: none; }

/* ---------- 11. DOSSIER (pinned About) ---------- */
.dossier { position: relative; }
.dossier__stage { min-height: 100svh; display: flex; align-items: center; }
.dossier__grid { width: 100%; display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: clamp(16px, 2vw, 32px); align-items: center; }
.dossier__ix { grid-column: 1 / 5; position: relative; height: clamp(160px, 30vh, 320px); }
.dossier__num {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-weight: 300; font-size: clamp(7rem, 16vw, 17rem); line-height: 1; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px var(--rule); opacity: 0;
}
.dossier__num.on { opacity: 1; color: transparent; -webkit-text-stroke: 1px var(--gold); }
.dossier__body { grid-column: 6 / 12; position: relative; min-height: clamp(200px, 32vh, 340px); }
.dossier__item { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; opacity: 0; visibility: hidden; }
.dossier__item h3 { margin: 0; }
.dossier__nav { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 3; }
.dossier__nav i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-40); opacity: 0.45; transition: all 0.4s var(--ease); display: block; }
.dossier__nav i.on { background: var(--gold-b); opacity: 1; box-shadow: 0 0 8px 1px rgba(200,190,30,0.5); }

/* ---------- 12. PHILOSOPHY ---------- */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(30px, 5vw, 84px); margin-top: clamp(48px, 8vh, 100px); }
.pillar__head { padding-bottom: 16px; border-bottom: 1px solid var(--ink); margin-bottom: 24px; display: flex; align-items: baseline; justify-content: space-between; }
.pillar__head .lbl--gold { font-weight: 500; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 15px 0 15px 28px; border-bottom: 1px solid var(--rule-soft); font-size: 15.5px; line-height: 1.5; color: var(--ink-80); }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-b); opacity: 0.85; }

/* ---------- 13. FEATURED ASSETS (home) ---------- */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); }
.feat__card { position: relative; display: block; }
.feat__ph { aspect-ratio: 4 / 3; overflow: hidden; position: relative; background: var(--paper-3); }
.feat__ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.1s var(--ease); }
.feat__card:hover .feat__ph img { transform: scale(1.09); }
.feat__tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(247,246,243,0.9); backdrop-filter: blur(6px);
  padding: 7px 13px; font-size: 12px; color: var(--ink);
}
.feat__tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-b); }
.feat__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 18px; }
.feat__meta h3 { margin: 0; font-weight: 400; font-size: clamp(1.2rem, 1.7vw, 1.7rem); letter-spacing: -0.02em; }
.feat__meta .note { transition: color 0.4s var(--ease); }
.feat__card:hover .feat__meta .note { color: var(--gold); }

/* ---------- 14. PARTNERS ---------- */
.partners { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(34px, 5vw, 80px); }
.partner-set__head { padding-bottom: 15px; border-bottom: 1px solid var(--ink); margin-bottom: clamp(24px, 3vh, 40px); display: flex; justify-content: space-between; align-items: baseline; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: clamp(26px, 3.4vw, 52px) clamp(20px, 2.6vw, 40px); align-items: center; }
.logo-cell { display: grid; place-items: center; min-height: 52px; }
.logo-cell img {
  max-height: 30px; width: auto; max-width: 88%; object-fit: contain;
  filter: grayscale(1) brightness(0.55); opacity: 0.65;
  transition: opacity 0.5s var(--ease), filter 0.5s var(--ease), transform 0.5s var(--ease);
}
.logo-cell:hover img { opacity: 1; filter: grayscale(1) brightness(0.2); transform: translateY(-2px); }

/* ---------- 15. TEAM ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(30px, 3.4vw, 56px) clamp(20px, 2.4vw, 40px); align-items: start; }
.member { display: flex; flex-direction: column; gap: 20px; }
.member__ph { aspect-ratio: 4 / 5; perspective: 700px; }
.member__ph > img { filter: grayscale(1) contrast(1.04); transition: filter 0.7s var(--ease); }
.member:hover .member__ph > img { filter: grayscale(0); }
.member__name { font-size: clamp(1.15rem, 1.45vw, 1.45rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.12; margin: 0; min-height: 1.15em; }
.member__role { font-size: 13.5px; color: var(--ink-60); margin: 7px 0 0; line-height: 1.4; min-height: 2.8em; }
.member__bio { font-size: 14px; line-height: 1.64; color: var(--ink-60); margin: 0; }
.member__more { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 500; color: var(--ink); padding: 0; margin-top: 2px; text-align: left; }
.member__more i { flex: 0 0 auto; width: 18px; height: 1px; background: var(--gold); transition: width 0.45s var(--ease); }
.member__more:hover i { width: 34px; }
.member__full { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease); }
.member__full > div { overflow: hidden; }
.member.is-open .member__full { grid-template-rows: 1fr; }
.member__full p { font-size: 13.8px; line-height: 1.68; color: var(--ink-60); margin: 0; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.member__full p.member__fn { margin-top: 12px; padding-top: 0; border-top: 0; font-size: 12px; line-height: 1.6; color: var(--ink-40); }

.adv { border-top: 1px solid var(--ink); }
.adv-row {
  display: grid; grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: clamp(16px, 2vw, 32px); row-gap: 20px; align-items: start;
  padding: clamp(32px, 5vh, 58px) 0; border-bottom: 1px solid var(--rule);
}
.adv-row__ph { grid-column: 1 / 3; aspect-ratio: 1 / 1; }
.adv-row__ph > img { filter: grayscale(1) contrast(1.04); transition: filter 0.7s var(--ease); }
.adv-row:hover .adv-row__ph > img { filter: grayscale(0); }
.adv-row__k { grid-column: 4 / 8; }
.adv-row__v { grid-column: 8 / 13; }

/* ---------- 16. DEAL GRID (property cards) ---------- */
.deal-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); row-gap: clamp(40px, 5.4vh, 64px); }
.deal-card { display: flex; flex-direction: column; gap: 18px; }
.deal-card__ph { aspect-ratio: 3 / 2; position: relative; }
.deal-card__ph > img { filter: grayscale(0.15) contrast(1.02); transition: filter 0.7s var(--ease), transform 1.4s var(--ease); }
.deal-card:hover .deal-card__ph > img { filter: grayscale(0); transform: scale(1.035); }
.deal-card__ph.noimg > img { display: none; }
.deal-card__fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--paper-3); text-align: center; padding: 20px;
}
.deal-card__fallback span { font-size: 13px; color: var(--ink-40); letter-spacing: 0.02em; }
.deal-card__fallback i { width: 26px; height: 1px; background: var(--gold-b); }
.deal-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.deal-card__body { display: flex; flex-direction: column; gap: 14px; }
.deal-card__name { margin: 0; }
.deal-card__loc { margin: 4px 0 0; }
.deal-card__desc { font-size: 15px; }
.deal-card__meta { display: flex; align-items: baseline; gap: 10px; padding-top: 4px; border-top: 1px solid var(--rule-soft); }
.deal-card__meta-n { font-size: 1.5rem; font-weight: 300; letter-spacing: -0.02em; color: var(--ink); }
.deal-card__meta-l { font-size: 12.5px; color: var(--ink-60); }
.deal-card__ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.deal-card__ticks li { font-size: 13.5px; line-height: 1.55; color: var(--ink-60); padding-left: 16px; position: relative; }
.deal-card__ticks li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-b); }

.deal-card__loc a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease); }
.deal-card__loc a:hover { color: var(--gold); text-decoration-color: var(--gold); }
.tag { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-60); }
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-40); }
.tag--current { color: var(--gold); }
.tag--current::before { background: var(--gold-b); box-shadow: 0 0 8px 1px rgba(200,190,30,0.5); }

/* Headline metric: gold node, no rule line */
.metric { display: flex; align-items: flex-start; gap: 18px; }
.metric__dot { flex: 0 0 auto; margin-top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-b); box-shadow: 0 0 14px 3px rgba(200,190,30,0.45); position: relative; }
.metric__dot::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(200,190,30,0.5); animation: fpulse2 2.8s var(--ease-io) infinite; }
@keyframes fpulse2 { 0%,100% { transform: scale(0.8); opacity: 0.7; } 50% { transform: scale(1.25); opacity: 0.2; } }
.metric__n { font-size: clamp(3.2rem, 7vw, 7rem); font-weight: 300; letter-spacing: -0.045em; line-height: 0.9; display: block; }
.metric__n small { font-size: 0.4em; letter-spacing: -0.02em; }
.metric__l { font-size: 13px; color: var(--ink-60); margin-top: 13px; display: block; }
.metric__note { display: block; margin-top: 8px; }

/* ---------- 17b. NEWS PAGE ---------- */
.story-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.story { padding: clamp(28px, 4.4vh, 46px) 0; border-bottom: 1px solid var(--rule-soft); display: flex; flex-direction: column; gap: 14px; }
.story__top { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.story__title { margin: 0; }
.story__head { display: flex; gap: clamp(18px, 2.4vw, 28px); align-items: flex-start; }
.story__ph { flex: 0 0 auto; width: clamp(76px, 9vw, 108px); aspect-ratio: 1 / 1; }
.story__ph > img { filter: grayscale(0.15) contrast(1.02); transition: filter 0.7s var(--ease); }
.story:hover .story__ph > img { filter: grayscale(0); }
.story__head > .story__headtxt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; }
.story__more { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 500; color: var(--ink); padding: 0; margin-top: 2px; text-align: left; }
.story__more i { flex: 0 0 auto; width: 18px; height: 1px; background: var(--gold); transition: width 0.45s var(--ease); }
.story__more:hover i { width: 34px; }
.story__full { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease); }
.story__full > div { overflow: hidden; }
.story.is-open .story__full { grid-template-rows: 1fr; }
.story__full p { font-size: 13.8px; line-height: 1.68; color: var(--ink-60); margin: 0 0 14px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.story__full p + p { padding-top: 0; border-top: 0; margin-top: -6px; }
.story__full blockquote { margin: 0 0 14px; padding-left: 18px; border-left: 2px solid var(--gold-b); font-style: italic; color: var(--ink); font-size: 14px; line-height: 1.6; }

.press-list { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.press-row {
  display: grid; grid-template-columns: 1fr 2.4fr auto; gap: clamp(16px, 2.4vw, 32px); align-items: center;
  text-align: left; padding: clamp(20px, 2.6vh, 26px) 0; border-bottom: 1px solid var(--rule-soft);
  transition: padding-left 0.45s var(--ease);
}
.press-row:hover { padding-left: 16px; }
.press-row__k { display: flex; flex-direction: column; gap: 6px; }
.press-row__src { font-size: 13px; font-weight: 500; color: var(--ink); }
.press-row__date { font-size: 12.5px; color: var(--ink-40); }
.press-row__title { font-size: clamp(1.02rem, 1.3vw, 1.22rem); font-weight: 300; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 6px; }
.press-row__blurb { font-size: 13.5px; line-height: 1.55; color: var(--ink-60); margin: 0; }
.press-row__go { font-size: 13px; font-weight: 500; color: var(--ink-60); white-space: nowrap; transition: color 0.35s var(--ease); }
.press-row__go i { font-style: normal; margin-left: 2px; }
.press-row:hover .press-row__go { color: var(--gold); }
@media (max-width: 700px) {
  .press-row { grid-template-columns: 1fr; row-gap: 10px; }
  .press-row__go { justify-self: start; }
}

/* ---------- 17. UK MAP ---------- */
.mapwrap { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.ukmap { position: relative; }
.ukmap svg { width: 100%; max-width: 470px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.ukmap .dot { fill: var(--ink); opacity: 0.55; }
.ukmap .city { cursor: pointer; outline: none; }
.ukmap .city .core { fill: var(--gold-b); }
.ukmap .city .halo { fill: var(--gold-b); opacity: 0.2; transition: opacity 0.3s; }
.ukmap .city.on .halo, .ukmap .city:hover .halo { opacity: 0.45; }
.ukmap .city text { font-family: var(--sans); font-size: 13px; fill: var(--ink); opacity: 0; transition: opacity 0.35s; }
.ukmap .city:hover text, .ukmap .city.on text { opacity: 1; }
/* Current vs exited: gold marks a live holding, muted ink marks a realised exit */
.ukmap .city.exited .core { fill: var(--ink-40); }
.ukmap .city.exited .halo { fill: var(--ink-40); opacity: 0.18; }
.ukmap .city.exited.on .halo, .ukmap .city.exited:hover .halo { opacity: 0.4; }
.ukmap .city.current .core { fill: var(--gold-b); }
.ukmap .city.current .halo { fill: var(--gold-b); }

.maplegend { display: flex; gap: 22px; margin-top: 18px; }
.maplegend__item { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-60); }
.maplegend__item i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.maplegend__item i.is-current { background: var(--gold-b); box-shadow: 0 0 8px 1px rgba(200,190,30,0.5); }
.maplegend__item i.is-exited { background: var(--ink-40); }
.maplist { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.maplist button {
  display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: baseline;
  text-align: left; padding: 20px 0; border-bottom: 1px solid var(--rule-soft);
  transition: padding-left 0.45s var(--ease);
}
.maplist button:hover, .maplist button.on { padding-left: 16px; }
.maplist button .nm { font-size: clamp(1.05rem, 1.4vw, 1.35rem); font-weight: 300; letter-spacing: -0.015em; }
.maplist button.on .nm { color: var(--gold); }
.maplist button .loc { font-size: 13px; color: var(--ink-40); }
.maplist button .val { font-size: 13.5px; font-weight: 500; color: var(--ink-80); font-variant-numeric: tabular-nums; }

/* ---------- 18. CLOSING BAND / FOOTER ---------- */
.closing { padding: clamp(60px, 11vh, 130px) 0 clamp(34px, 5vh, 60px); background: var(--paper-2); border-top: 1px solid var(--rule); }
.next {
  display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 500; color: var(--ink);
}
.next i { flex: 0 0 auto; width: 34px; height: 1px; background: var(--gold); transition: width 0.5s var(--ease); display: block; }
.next:hover i { width: 58px; }

.foot { border-top: 1px solid var(--rule); padding: clamp(50px, 8vh, 96px) 0 36px; background: var(--paper-2); }
.foot__grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: clamp(16px, 2vw, 32px); row-gap: 36px; }
.foot__brand { grid-column: 1 / 6; }
.foot__nav   { grid-column: 7 / 10; }
.foot__meta  { grid-column: 10 / 13; }
.foot__social { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: 12px; border-radius: 50%; color: var(--ink-60); border: 1px solid var(--rule); transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); }
.foot__social:hover { color: var(--paper); background: var(--gold-b); border-color: var(--gold-b); }
.foot__nav a { display: block; padding: 8px 0; font-size: 14px; color: var(--ink-60); transition: color 0.35s var(--ease), padding-left 0.4s var(--ease); }
.foot__nav a:hover { color: var(--ink); padding-left: 10px; }
.foot__bar { margin-top: clamp(42px, 6vh, 74px); padding-top: 22px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; }
.disclaimer { font-size: 12.5px; line-height: 1.6; color: var(--ink-40); margin: 0; }

/* ---------- 19. PROGRESS FIREFLY ---------- */
.progress { position: fixed; right: clamp(12px, 1.6vw, 26px); top: 50%; transform: translateY(-50%); height: 34vh; width: 14px; z-index: 50; pointer-events: none; }
.progress::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.progress i {
  position: absolute; left: 50%; top: 0; width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--gold-b); box-shadow: 0 0 10px 2px rgba(200,190,30,0.55);
}

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width: 1080px) {
  :root { --cols: 8; }
  .dossier__ix { grid-column: 1 / 4; }
  .dossier__body { grid-column: 4 / 9; }
  .adv-row__ph { grid-column: 1 / 3; }
  .adv-row__k { grid-column: 3 / 9; }
  .adv-row__v { grid-column: 3 / 9; }
  .foot__brand { grid-column: 1 / 5; }
  .foot__nav { grid-column: 5 / 7; }
  .foot__meta { grid-column: 7 / 9; }
  .partners { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --cols: 6; --nav-h: 64px; }
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .menu { display: block; }
  .brand__sub { display: none; }
  .pillars { grid-template-columns: 1fr; }
  .feat { grid-template-columns: 1fr; }
  .mapwrap { grid-template-columns: 1fr; }
  .dossier__stage { min-height: auto; padding: clamp(48px, 7vh, 72px) 0; }
  .dossier__grid { display: block; }
  .dossier__ix { display: none; }
  .dossier__body { min-height: 0; }
  .dossier__item { position: relative; inset: auto; opacity: 1; visibility: visible; padding: 26px 0; border-bottom: 1px solid var(--rule-soft); }
  .dossier__nav { display: none; }
  .pf-half { grid-column: 1 / -1; }
  .pf-third { grid-column: span 3; }
  .progress { display: none; }
  .foot__brand, .foot__nav, .foot__meta { grid-column: 1 / -1; }
  .metric__n { font-size: clamp(3rem, 15vw, 4.8rem); }
  .hero { min-height: 92svh; }
}

@media (max-width: 560px) {
  :root { --cols: 4; }
  .grid-overlay i:nth-child(n+5) { display: none; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .member { gap: 14px; }
  .member__bio { display: none; }
  .pf-third { grid-column: span 2; }
  .adv-row__ph { grid-column: 1 / 3; }
  .adv-row__k { grid-column: 1 / -1; }
  .adv-row__v { grid-column: 1 / -1; }
  .deal-grid { column-gap: 16px; row-gap: clamp(30px, 5vh, 44px); }
}
@media (max-width: 480px) { .deal-grid { grid-template-columns: 1fr; row-gap: clamp(36px, 6vh, 52px); } }
@media (max-width: 359px) { .team-grid { grid-template-columns: 1fr; } }

/* ============================================================
   v2.1 — single-page app, particle stats, stepper, tab strip
   ============================================================ */

/* SPA pages */
.page { display: none; }
.page.on { display: block; }

/* Particle stat blocks (home hero) */
.pstats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 56px);
  margin-top: clamp(30px, 5vh, 60px);
}
.pstat { position: relative; }
.pstat__n {
  display: block;
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 6.4rem);
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.pstat__n small { font-size: 0.55em; letter-spacing: -0.02em; }
.pstat.ff-hide .pstat__n { color: transparent; }   /* particles render the number */
.pstat__l {
  display: block; margin-top: 14px;
  font-size: 13px; color: var(--ink-60);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.pstat.lit .pstat__l { opacity: 1; transform: none; }
.pstat.lit .pstat__l { display: inline-flex; align-items: center; gap: 9px; }
.pstat.lit .pstat__l::before {
  content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-b);
  box-shadow: 0 0 8px 1px rgba(200,190,30,0.5);
}
.no-js .pstat.ff-hide .pstat__n, html.ff-static .pstat.ff-hide .pstat__n { color: var(--ink); }
.no-js .pstat__l, html.ff-static .pstat__l { opacity: 1; transform: none; }
.pstats__note {
  margin: clamp(18px, 3vh, 30px) 0 0; max-width: 96ch;
  font-size: 12px; line-height: 1.6; color: var(--ink-60);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.pstats__note.lit, .no-js .pstats__note, html.ff-static .pstats__note { opacity: 1; transform: none; }
@media (max-width: 700px) {
  .pstats { grid-template-columns: 1fr; gap: 26px; }
  .pstat__n { font-size: clamp(2.8rem, 13vw, 4rem); }
}

/* Dossier stepper (replaces scroll pin) */
.dstep { display: flex; align-items: center; gap: 8px; margin-top: clamp(24px, 4vh, 44px); flex-wrap: wrap; }
.dstep__n {
  min-width: 52px; padding: 11px 14px;
  font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--ink-60); border: 1px solid var(--rule);
  transition: all 0.35s var(--ease);
  text-align: center;
}
.dstep__n:hover { border-color: var(--ink); color: var(--ink); }
.dstep__n.on { border-color: var(--gold); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.dstep__arrow {
  width: 44px; height: 40px; border: 1px solid var(--rule);
  display: grid; place-items: center; font-size: 16px; color: var(--ink-60);
  transition: all 0.35s var(--ease); margin-left: 4px;
}
.dstep__arrow:hover { border-color: var(--ink); color: var(--ink); }
.dossier2 { position: relative; }
.dossier2__grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: clamp(16px, 2vw, 32px); align-items: center; margin-top: clamp(20px, 3.4vh, 40px); }
.dossier2__ix { grid-column: 1 / 5; position: relative; min-height: clamp(120px, 22vh, 240px); }
.dossier2__num {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-weight: 300; font-size: clamp(6rem, 13vw, 13rem); line-height: 1; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px var(--gold);
}
.dossier2__body { grid-column: 6 / 13; position: relative; min-height: clamp(170px, 26vh, 280px); }
.dossier2__item { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; opacity: 0; visibility: hidden; }
.dossier2__item.on { position: relative; opacity: 1; visibility: visible; }
@media (max-width: 860px) {
  .dossier2__grid { display: block; }
  .dossier2__ix { display: none; }
  .dossier2__body { min-height: 0; }
}

/* Bottom tab strip: all sections visible, hover = slight enlarge */
.tabrow { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.tabrow a {
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(22px, 3.4vh, 38px) clamp(12px, 1.6vw, 26px);
  border-right: 1px solid var(--rule-soft);
  transform-origin: 50% 50%;
  transition: transform 0.4s var(--ease), background-color 0.4s var(--ease);
}
.tabrow a:last-child { border-right: 0; }
.tabrow a:hover { transform: scale(1.045); background: var(--paper); position: relative; z-index: 2; }
.tabrow a .t { font-size: clamp(1rem, 1.4vw, 1.35rem); font-weight: 300; letter-spacing: -0.015em; }
.tabrow a .s { font-size: 12.5px; color: var(--ink-40); }
.tabrow a.now { pointer-events: none; }
.tabrow a.now .t { color: var(--gold); }
.tabrow a.now .s::before { content: '● '; color: var(--gold-b); font-size: 8px; vertical-align: 2px; }
@media (max-width: 700px) { .tabrow { grid-template-columns: 1fr 1fr; } .tabrow a:nth-child(2) { border-right: 0; } }

/* Team photo fallback monogram */
.member__ph.noimg > img, .adv-row__ph.noimg > img { display: none; }
.ph-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--paper-3);
  font-weight: 300; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -0.02em; color: var(--ink-40);
}
.member__ph, .adv-row__ph { position: relative; }

/* Hero canvas must cover the hero, stats included */
.hero { min-height: 96svh; }
.hero__meta { margin-bottom: clamp(20px, 3.4vh, 38px); }


/* ============================================================
   v2.2 — no-dust firefly hero, skyline dossier, tighter chrome
   ============================================================ */

/* Hero: firefly only, then headline + evenly spread stats */
.hero { min-height: 92svh; }
.hero__title {
  font-weight: 500;
  letter-spacing: -0.03em;
  max-width: 22ch;
  opacity: 0;
}
html.ff-static .hero__title, .no-js .hero__title { opacity: 1; }
.pstats {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: clamp(16px, 3vw, 48px);
  width: 100%;
  margin-top: clamp(34px, 6vh, 72px);
}
.pstat:nth-child(2) { text-align: center; }
.pstat:nth-child(3) { text-align: right; }
@media (max-width: 700px) {
  .pstats { flex-direction: column; gap: 22px; }
  .pstat:nth-child(2), .pstat:nth-child(3) { text-align: left; }
}

/* Dossier skyline: line-art landmarks accumulate behind the stepper */
.skyline { position: relative; margin-top: clamp(18px, 3vh, 34px); }
.skyline svg { width: 100%; height: auto; display: block; overflow: visible; }
.skyline .bld path, .skyline .bld line, .skyline .bld circle, .skyline .bld polyline {
  fill: none; stroke: var(--ink-40); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.35;
}
.skyline .bld.on path, .skyline .bld.on line, .skyline .bld.on circle, .skyline .bld.on polyline { opacity: 1; stroke: var(--ink-80); }
.skyline .base { stroke: var(--rule); stroke-width: 1; }
.skyline .bld { visibility: hidden; }
.skyline .bld.on { visibility: visible; }
.no-js .skyline .bld, html.st-off .skyline .bld { visibility: visible; }

/* stack card reveal timing (CSS-driven; JS only flips .is-in) */

/* headline stays up once revealed, whatever happens to inline styles */
.hero__title.is-shown { opacity: 1; }
.hero__title.is-shown .ln > span { transform: none; }

/* brand lockup (emblem + wordmark in one asset, straight from the deck) */
:root { --brand-h: 40px; }
.brand__lockup { height: var(--brand-h); width: auto; display: block; }
@media (max-width: 860px) { :root { --brand-h: 34px; } }

/* per-logo optical balance: wordmark-only marks read smaller than lockups */
.logo-cell img[alt="Augur"], .logo-cell img[alt="Compton"] { max-height: 46px; }
.logo-cell img[alt="Brotherton"], .logo-cell img[alt="Handelsbanken"] { max-height: 17px; }
.logo-cell img[alt="Mizrahi Tefahot"] { max-height: 38px; }
.logo-cell img[alt="OakNorth"], .logo-cell img[alt="Lloyds Bank"] { max-height: 34px; }

/* Motion opt-in notice (only shown when the device forces reduced motion) */
.motionbar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 400; display: flex; align-items: center; gap: 16px;
  max-width: min(92vw, 660px);
  padding: 13px 16px 13px 20px;
  background: var(--ink); color: #fff;
  box-shadow: 0 12px 40px -12px rgba(20,19,15,0.55);
}
.motionbar__t { font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,0.82); }
.motionbar__b {
  flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--ink);
  background: var(--gold-b); padding: 9px 15px; white-space: nowrap;
}
.motionbar__b:hover { background: #fff; }
.motionbar__x { flex: 0 0 auto; font-size: 19px; line-height: 1; color: rgba(255,255,255,0.5); padding: 4px 2px; }
.motionbar__x:hover { color: #fff; }
@media (max-width: 620px) {
  .motionbar { flex-wrap: wrap; gap: 10px; bottom: 12px; padding: 14px; }
  .motionbar__t { flex: 1 1 100%; }
}

/* ============================================================
   v3.5 — mobile home-page corrections
   ============================================================ */

/* Inline grid positions in the markup are written for the 12-column desktop
   grid (e.g. grid-column: 8/13). Below 860px the grid drops to 6 (then 4)
   columns, so those positions fall outside it and the browser invents narrow
   implicit columns — which squashed "Who we are" into a sliver. On small
   screens every grid child simply spans the full width instead. */
@media (max-width: 860px) {
  .shell > .grid > *,
  .sec .grid > * { grid-column: 1 / -1 !important; }
  .shell > .grid,
  .sec .grid { row-gap: clamp(22px, 4vh, 38px); }
}

/* Stats on phones: compact rows — figure left, label right on a shared
   baseline, separated by hairlines. Replaces the tall stacked block. */
@media (max-width: 760px) {
  .pstats {
    display: block;
    margin-top: clamp(24px, 4vh, 40px);
    border-top: 1px solid var(--rule);
  }
  .pstat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50%;   /* fixed label column: dots align */
    align-items: center; gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid var(--rule-soft);
    text-align: left !important;
  }
  .pstat__n {
    font-size: clamp(2rem, 9vw, 2.9rem);
    line-height: 1.05;
    white-space: nowrap;
  }
  .pstat__l {
    margin-top: 0;
    font-size: 12.5px; line-height: 1.45;
    text-align: left;
  }
  html.ff-static .pstat__l, .no-js .pstat__l { opacity: 1; transform: none; }
}

/* Hero on phones: the headline is the hero; give it room and keep the
   particle stage from pushing content off-screen. */
@media (max-width: 760px) {
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 13vh); padding-bottom: clamp(24px, 4vh, 44px); }
  .hero__title { max-width: 100%; }
}

/* "Who we are" verticals list needs breathing room once stacked */
@media (max-width: 860px) {
  .verticals { margin-top: 4px; }
  .vertical { padding: 18px 0; font-size: clamp(1.05rem, 4.6vw, 1.35rem); }
}

/* ============================================================
   v4.0 — deal principles, contact page, 5-tab strip, boot flash
   ============================================================ */

/* Larger tick rows for the philosophy principles */
.ticks--lg li {
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  color: var(--ink);
  padding: clamp(16px, 2.2vh, 24px) 0 clamp(16px, 2.2vh, 24px) 34px;
  line-height: 1.45;
}
.ticks--lg li::before {
  width: 9px; height: 9px; left: 0;
  top: calc(clamp(16px, 2.2vh, 24px) + 0.62em);
  box-shadow: 0 0 9px 1px rgba(200,190,30,0.45);
}

/* Contact */
.contact-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 54px);
  margin-top: clamp(26px, 4.4vh, 52px);
  border-top: 1px solid var(--ink);
  padding-top: clamp(22px, 3.4vh, 38px);
}
.contact-col + .contact-col { border-left: 1px solid var(--rule); padding-left: clamp(20px, 3vw, 54px); }
.contact-col .lbl { margin-bottom: 14px; }
.contact-val {
  font-size: clamp(1rem, 1.35vw, 1.2rem); font-weight: 300; line-height: 1.62;
  color: var(--ink); margin: 0; letter-spacing: -0.01em;
}
.contact-val a { font-size: inherit; }
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; gap: 0; }
  .contact-col + .contact-col {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--rule); margin-top: 22px; padding-top: 22px;
  }
}

/* Tab strip now carries five destinations */
.tabrow { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .tabrow { grid-template-columns: repeat(2, 1fr); } .tabrow a { border-right: 1px solid var(--rule-soft); } }

/* Boot: home markup ships visible, so hide the others until the router runs */
.page:not(.on) { display: none; }

/* mobile: stats are particle-drawn too, so keep them transparent pre-paint
   unless motion is off entirely */
@media (max-width: 760px) {
  html.ff-static .pstat.ff-hide .pstat__n, .no-js .pstat.ff-hide .pstat__n { color: var(--ink); }
}

/* ============================================================
   v4.1 — brand sits closer to the edge; full company name
   ============================================================ */
.nav__in { padding-left: clamp(14px, 1.6vw, 26px); }
.brand { gap: 11px; }
.brand__sub { font-size: 13px; color: var(--ink-60); }
@media (max-width: 700px) {
  .nav__in { padding-left: 12px; }
  .brand__sub { font-size: 11.5px; }
}

/* Contact statement spans the full measure: sized so each line fills the
   column rather than wrapping early and leaving a gap on the right */
.contact-hero { max-width: none; font-size: clamp(2.1rem, 4.35vw, 4rem); line-height: 1.08; }
.contact-hero .ln > span { white-space: nowrap; }
@media (max-width: 1100px) {
  .contact-hero { font-size: clamp(1.9rem, 6.4vw, 3rem); }
  .contact-hero .ln > span { white-space: normal; }
}

/* ============================================================
   v4.3 — brand spacing, principles alignment, contact scale
   ============================================================ */

/* Brand: more air between the mark and the name, both optically centred */
.brand { gap: clamp(16px, 1.5vw, 26px); align-items: center; }
.brand__sub {
  align-self: center; margin-left: 0;
  line-height: 1; padding-top: 1px;
}
@media (max-width: 700px) { .brand { gap: 13px; } }

/* Deal principles: heading vertically centred against the three principles */
.principles { align-items: center; }
.principles-head { display: flex; align-items: center; min-height: 100%; }

/* Contact statement: larger, bolder, filling the measure on three lines */
.contact-hero {
  max-width: none;
  font-size: clamp(2.15rem, 6.15vw, 5.4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.contact-hero .ln > span { white-space: nowrap; }
@media (max-width: 900px) {
  .contact-hero { font-size: clamp(2rem, 8.4vw, 3.2rem); line-height: 1.1; }
  .contact-hero .ln > span { white-space: normal; }
}
/* and room to breathe around it */
.page[data-page="contact"] .phero { padding-top: calc(var(--nav-h) + clamp(40px, 8vh, 96px)); padding-bottom: clamp(34px, 6vh, 74px); }
#contact-details { padding-top: clamp(38px, 6vh, 72px); padding-bottom: clamp(44px, 7vh, 88px); }
#contact-details .contact-grid { margin-top: clamp(30px, 5vh, 60px); }

/* ============================================================
   v4.5 — brand name snapped to the grid
   ============================================================ */
/* The overlay is `max-width: var(--maxw); padding: 0 var(--gut)` split into
   var(--cols) columns, so its second rule sits one column in from the gutter.
   The nav shares that container box, so the same expression lands the company
   name exactly on that line at any viewport width. */
.nav__in { position: relative; }
@media (min-width: 901px) {
  .brand { position: static; }
  .brand__sub {
    position: absolute;
    left: calc(var(--gut) + (100% - 2 * var(--gut)) / var(--cols));
    /* aligned to the FIREFLY wordmark, not the whole lockup: the wordmark's
       optical centre sits at 81.4% of the logo's height (measured from the
       artwork), so offset from the logo's top edge by that fraction */
    top: calc(50% - (var(--brand-h) / 2) + (var(--brand-h) * 0.814));
    transform: translateY(-50%);
    margin-left: 0;
  }
}

/* ============================================================
   v4.8 — dossier stepper on phones
   ============================================================ */
/* As a wrapping flex row the seven controls split wherever they run out of
   width, which left "prev" ending one line and "next" alone on the next.
   A five-column grid puts the numbers on one row and both arrows together
   on the row beneath, side by side. */
@media (max-width: 760px) {
  .dstep {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    justify-items: stretch;
  }
  .dstep__n, .dstep__arrow { width: 100%; min-width: 0; }
}