/* Status Quo Holdings - shared styles (navy throughout) */
:root {
  --navy: #0E1E40;
  --navy-deep: #0A1730;
  --black: #0A1526;
  --panel: #0A1526;
  --panel-hover: #0F1D34;
  --ink: #ffffff;
  --dim: #98A1B5;
  --faint: rgba(255, 255, 255, 0.34);
  --line: rgba(255, 255, 255, 0.14);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Newsreader", Georgia, "Times New Roman", serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-y: scroll; }
html:has(body.home), html:has(body.merch) { overflow: hidden; }
body {
  background: var(--navy);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #fff; color: var(--navy); }
img { max-width: 100%; }
a { color: inherit; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---------- Diagonal SQH logo (consistent serif, upright) ---------- */
.brand-logo { display: inline-flex; align-items: center; text-decoration: none; color: #fff; }
.brand-logo .logo-img,
.brand-logo .logo-svg { height: 42px; width: auto; display: block; }
.brand-logo .logo-svg { display: none; }
.brand-logo.no-img .logo-img { display: none; }
.brand-logo.no-img .logo-svg { display: block; }

/* ---------- Nav (all pages) ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(14, 30, 64, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a {
  font-family: var(--serif); color: var(--dim); text-decoration: none;
  font-size: 17px; letter-spacing: 0.005em; transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.here { color: #fff; }

/* ---------- Buttons (serif, on navy) ---------- */
.btn {
  display: inline-block; padding: 11px 26px; border-radius: 3px;
  font-family: var(--serif); font-size: 17px; text-decoration: none;
  transition: all 0.22s ease;
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.55);
}
.btn:hover { background: rgba(255, 255, 255, 0.10); border-color: #fff; }
.btn.solid, .btn.white { background: #fff; color: var(--navy); border-color: #fff; }
.btn.solid:hover, .btn.white:hover { background: rgba(255, 255, 255, 0.86); }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: #fff; }
@media (max-width: 560px) {
  .nav-inner { height: 62px; }
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 15.5px; }
}

/* ============================================================
   HOME - single navy screen, no scroll
   ============================================================ */
body.home { height: 100svh; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.nav-home { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; flex: 0 0 auto; }
.nav-home .nav-inner { height: 68px; }
.nav-home .brand-logo .logo-img, .nav-home .brand-logo .logo-svg { height: 48px; }
.splash { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px 4svh; }
.splash h1 { font-family: var(--serif); font-weight: 400; color: #fff; font-size: clamp(40px, 7vw, 96px); line-height: 1.05; letter-spacing: -0.02em; max-width: 15ch; }
.splash h1 .strike { position: relative; white-space: nowrap; color: var(--faint); }
.splash h1 .strike::after { content: ""; position: absolute; left: -1%; right: -1%; top: 55%; height: 0.05em; background: #fff; transform: rotate(-1.2deg); transform-origin: left center; animation: strikeIn 0.7s cubic-bezier(0.77, 0, 0.18, 1) 0.7s both; }
.splash h1 em { font-style: italic; }
.splash .hero-ctas { margin-top: 46px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 560px) {
  .nav-home .nav-inner { height: 62px; }
  .nav-home .brand-logo .logo-img, .nav-home .brand-logo .logo-svg { height: 40px; }
  .splash .hero-ctas { margin-top: 34px; width: 100%; }
  .splash .hero-ctas .btn { flex: 1 1 auto; text-align: center; }
}
@keyframes strikeIn { from { transform: scaleX(0) rotate(-1.2deg); } to { transform: scaleX(1) rotate(-1.2deg); } }
@media (prefers-reduced-motion: reduce) { .splash h1 .strike::after, h1 .strike::after { animation: none; } }

/* ============================================================
   STRATEGY
   ============================================================ */
.strat-section { padding: 120px 0 90px; border-bottom: none; }
.strat-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 66px 40px; display: flex; flex-direction: column; align-items: center; gap: 56px; text-align: center; }
.strat-block { max-width: 100%; }
.strat-intro { font-family: var(--serif); color: var(--dim); font-size: clamp(18px, 2vw, 23px); line-height: 1.4; margin-bottom: 22px; }
.strat-sectors { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; row-gap: 6px; font-family: var(--serif); font-weight: 400; color: #fff; font-size: clamp(21px, 2.5vw, 33px); line-height: 1.3; }
.strat-sectors .sec { white-space: nowrap; }
.strat-sectors .sec:not(:first-child)::before { content: "|"; color: rgba(255, 255, 255, 0.30); margin: 0 0.5em; }
.strat-criteria { list-style: none; padding: 0; }
.strat-criteria li { font-family: var(--serif); font-weight: 400; color: #fff; font-size: clamp(21px, 2.5vw, 33px); line-height: 1.5; }
.strat-criteria li.on { font-weight: 600; }
@media (max-width: 560px) {
  .strat-sectors, .strat-criteria li { font-size: 22px; }
  .strat-card { padding: 48px 24px; gap: 42px; }
}

/* ============================================================
   INTERIOR PAGES
   ============================================================ */
h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 8vw, 110px); line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.8vw, 60px); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 22px; }
.kicker { font-family: var(--serif); font-size: 16px; letter-spacing: 0.01em; color: var(--dim); margin-bottom: 24px; }
.sec-label { font-family: var(--serif); font-size: 16px; letter-spacing: 0.01em; color: var(--dim); margin-bottom: 48px; display: flex; align-items: center; gap: 14px; }
.sec-label::before { content: ""; width: 30px; height: 1px; background: rgba(255, 255, 255, 0.5); }

section { padding: 120px 0; border-bottom: 1px solid var(--line); }

.page-head { padding: 150px 0 90px; border-bottom: 1px solid var(--line); }
.page-head p.lede { margin-top: 22px; max-width: 52ch; color: var(--dim); font-size: 19px; line-height: 1.7; }

/* Investments grid */
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.co-card { background: var(--panel); padding: 56px 44px; min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; transition: background 0.3s; text-decoration: none; color: inherit; }
.co-card:hover { background: var(--panel-hover); }
.co-top { display: flex; align-items: center; justify-content: space-between; }
.co-card .num { font-size: 15px; color: var(--dim); }
.co-slot { width: 52px; height: 52px; border: 1px dashed rgba(255, 255, 255, 0.28); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 20px; color: var(--faint); }
.co-body .name { font-family: var(--serif); font-size: 38px; letter-spacing: -0.01em; margin: 0 0 10px; color: #fff; }
.co-body .desc { color: var(--dim); font-size: 16px; max-width: 40ch; }
@media (max-width: 760px) { .co-grid { grid-template-columns: 1fr; } .co-card { padding: 44px 28px; min-height: 240px; } }

/* Team */
.team-grid { display: grid; grid-template-columns: 420px 1fr; gap: 72px; align-items: start; }
.team-photo { position: relative; }
.team-photo .frame { border: 1px solid var(--line); background: var(--panel); padding: 14px; }
.team-photo .frame img { display: block; width: 100%; height: auto; }
.frame-fallback { display: none; aspect-ratio: 4 / 5; width: 100%; background: rgba(255, 255, 255, 0.06); color: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.frame.no-img img { display: none; }
.frame.no-img .frame-fallback { display: flex; }
.frame-fallback .initials { font-family: var(--serif); font-size: 84px; line-height: 1; }
.frame-fallback .note { font-size: 13px; letter-spacing: 0.06em; color: var(--dim); }
.team-photo .caption { margin-top: 14px; font-size: 14px; color: var(--dim); }
.team-bio h2 { margin-bottom: 6px; }
.team-bio .role { color: var(--dim); font-size: 17px; margin-bottom: 30px; }
.team-bio p { font-family: var(--sans); color: rgba(255, 255, 255, 0.72); font-size: 17px; line-height: 1.75; max-width: 58ch; }
.team-bio p + p { margin-top: 16px; }
.team-links { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; gap: 40px; } .team-photo { max-width: 380px; } }

/* Prior firms wall */
.prior { margin-top: 104px; }
.firm-wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.firm { background: var(--panel); min-height: 128px; padding: 30px 22px; display: flex; align-items: center; justify-content: center; text-align: center; transition: background 0.25s; }
.firm:hover { background: var(--panel-hover); }
.firm img { max-height: 42px; max-width: 150px; width: auto; opacity: 0.9; transition: opacity 0.2s; }
.firm:hover img { opacity: 1; }
.firm-name { display: none; font-family: var(--serif); font-size: 17px; line-height: 1.28; color: #fff; opacity: 0.92; }
.firm.no-img img { display: none; }
.firm.no-img .firm-name { display: block; }
@media (max-width: 860px) { .firm-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .firm-wall { grid-template-columns: repeat(2, 1fr); } }

/* Footer */
footer { padding: 44px 0 38px; }
.foot-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--dim); }
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-brand .brand-logo .logo-img, .foot-brand .brand-logo .logo-svg { height: 30px; }
.foot-inner a { color: var(--dim); text-decoration: none; transition: color 0.2s; }
.foot-inner a:hover { color: #fff; }
.foot-links { display: flex; gap: 24px; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Merch (secret) */
body.merch { height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
.merch-inner .brand-logo { justify-content: center; margin-bottom: 30px; }
.merch-inner .brand-logo .logo-img, .merch-inner .brand-logo .logo-svg { height: 76px; }
.merch-inner h1 { font-family: var(--serif); font-size: clamp(34px, 6vw, 60px); color: #fff; }
.merch-inner p { margin-top: 16px; color: var(--dim); font-size: 16px; }
.merch-inner .back { margin-top: 34px; display: inline-block; }

/* Privacy */
.legal { max-width: 720px; }
.legal h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 38px 0 10px; color: #fff; }
.legal p { font-family: var(--sans); color: var(--dim); margin-bottom: 14px; }
.legal a { color: #fff; }

/* ---------- Team person card ---------- */
.team-people { margin-top: 0; display: flex; flex-direction: column; gap: 36px; }
.person-card {
  display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: stretch;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 40px;
}
.person-photo { position: relative; border-radius: 12px; overflow: hidden; height: 100%; background: rgba(255,255,255,0.05); }
.person-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.person-photo-fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-family: var(--serif); font-size: 72px; color: #fff; background: rgba(255,255,255,0.06); }
.person-photo.no-img img { display: none; }
.person-photo.no-img .person-photo-fallback { display: flex; }
.person-info { padding: 0; }
.person-name { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.2vw, 40px); color: #fff; line-height: 1.0; letter-spacing: -0.015em; margin: 0; }
.person-title { font-family: var(--sans); color: var(--dim); font-size: 17px; margin-top: 3px; }
.person-block { margin-top: 26px; }
.person-block .lbl { font-family: var(--sans); font-weight: 600; font-size: 15.5px; color: #fff; margin-bottom: 7px; }
.person-block .val { font-family: var(--sans); font-size: 15px; color: var(--dim); line-height: 1.55; }

/* Experience logo row - white logos, one line, uniform size, no background */
.exp-logos { display: flex; flex-wrap: nowrap; align-items: center; gap: 22px; margin-top: 2px; overflow-x: auto; scrollbar-width: none; }
.exp-logos::-webkit-scrollbar { display: none; }
.exp-logo { display: inline-flex; align-items: center; opacity: 0.9; transition: opacity 0.2s; flex: 0 0 auto; }
.exp-logo:hover { opacity: 1; }
.exp-logo img { height: 30px; width: auto; display: block; }

/* Education logo */
.edu-logo { display: inline-flex; opacity: 0.92; margin-top: 2px; }
.edu-logo img { height: 38px; width: auto; display: block; }

.person-linkedin { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-top: 28px; border-radius: 8px; background: rgba(255,255,255,0.10); color: #fff; transition: background 0.2s; }
.person-linkedin:hover { background: rgba(255,255,255,0.18); }
.person-linkedin svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 700px) {
  .person-card { grid-template-columns: 1fr; gap: 30px; padding: 28px; align-items: start; }
  .person-photo { max-width: 300px; height: auto; min-height: 0; aspect-ratio: 3 / 4; }
  .exp-logos { overflow-x: auto; gap: 18px; -webkit-overflow-scrolling: touch; }
  .exp-logo img { height: 26px; }
  .edu-logo img { height: 34px; }
}

/* ============================================================
   INVESTMENTS - portfolio cards with animated visuals
   ============================================================ */
.inv-wrap { padding: 120px 0 70px; }
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.inv-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: block; text-decoration: none; color: inherit; transition: border-color 0.25s ease, transform 0.25s ease; }
.inv-card.is-link { cursor: pointer; }
.inv-card.is-link:hover { border-color: rgba(255,255,255,0.34); transform: translateY(-3px); }
.inv-visual { position: relative; height: 190px; overflow: hidden; background: #0a1526; }
.inv-body { padding: 26px 30px 30px; }
.inv-name { font-family: var(--serif); font-weight: 600; font-size: 27px; color: #fff; letter-spacing: -0.01em; margin-bottom: 10px; }
.inv-desc { font-family: var(--sans); font-size: 15.5px; color: rgba(255,255,255,0.88); margin-bottom: 6px; }
.inv-meta { font-family: var(--sans); font-size: 15px; color: var(--dim); line-height: 1.5; }
.inv-disclaimer { margin-top: 34px; font-family: var(--sans); font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.42); text-align: center; max-width: 108ch; margin-left: auto; margin-right: auto; }
@media (max-width: 820px) { .inv-grid { grid-template-columns: 1fr; } }

/* shared viz base */
.inv-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.inv-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,21,38,0.65)); }
@media (prefers-reduced-motion: reduce) { .inv-visual *[class] { animation: none !important; } }

/* 1. Data flow (Collate) */
.viz-data { background: radial-gradient(120% 140% at 20% 0%, #12294d 0%, #0a1526 60%); }
.viz-data .fl { stroke: #4f93cf; stroke-width: 1.4; fill: none; stroke-dasharray: 5 11; animation: flowDash 2.6s linear infinite; }
.viz-data .fl:nth-child(2){ animation-delay: .5s; opacity:.85 } .viz-data .fl:nth-child(3){ animation-delay: 1s; opacity:.7 } .viz-data .fl:nth-child(4){ animation-delay:1.5s; opacity:.85 }
.viz-data .nd { fill: #93d1f6; animation: pulse 2.2s ease-in-out infinite; }
.viz-data .nd:nth-child(6){animation-delay:.4s} .viz-data .nd:nth-child(7){animation-delay:.9s} .viz-data .nd:nth-child(8){animation-delay:1.3s} .viz-data .nd:nth-child(9){animation-delay:1.7s}
@keyframes flowDash { to { stroke-dashoffset: -160; } }
@keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} }

/* 2. Medical scan (Sirona) */
.viz-scan { background: linear-gradient(180deg,#0c1c33,#0a1526), repeating-linear-gradient(0deg, rgba(120,190,235,.05) 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, rgba(120,190,235,.05) 0 1px, transparent 1px 26px); }
.viz-scan .ecg { stroke: #63d3c2; stroke-width: 2; fill: none; stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 3.2s linear infinite; filter: drop-shadow(0 0 4px rgba(99,211,194,.5)); }
.viz-scan .beat { fill: #63d3c2; animation: pulse 1.6s ease-in-out infinite; }
@keyframes draw { 0%{stroke-dashoffset:900} 70%{stroke-dashoffset:0} 100%{stroke-dashoffset:0} }

/* 3. City / factories */
.viz-city { background: linear-gradient(180deg,#0b1c39 0%, #0a1526 100%); }
.viz-city .win { fill: #ffce85; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{opacity:.15} 50%{opacity:.95} }

/* 4. Radar (aerospace / defense) */
.viz-aero { background: radial-gradient(80% 120% at 50% 20%, #0f2547 0%, #0a1526 70%); }
.viz-aero .ring { fill: none; stroke: rgba(120,200,255,.22); stroke-width: 1; }
.viz-aero .sweep { transform-origin: 200px 95px; transform-box: view-box; animation: radar 4s linear infinite; }
.viz-aero .blip { fill: #8fd0f5; animation: pulse 2s ease-in-out infinite; }
@keyframes radar { to { transform: rotate(360deg); } }