/* Marshmate Investments B.V. — Quiet Navy site styles (shared, production)
   Fonts self-hosted (woff2) — zero third-party requests. Tokens + AA carry forward
   from the approved live Home build. */

/* ---- Self-hosted fonts (no runtime third-party calls) ---- */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/source-serif-4-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/source-serif-4-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/source-serif-4-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/inter-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/inter-latin-600.woff2') format('woff2');
}
/* Metric-adjusted local fallbacks — minimise layout shift before swap */
@font-face {
  font-family: 'Source Serif 4 Fallback';
  src: local('Georgia');
  size-adjust: 101.5%; ascent-override: 92%; descent-override: 26%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%; ascent-override: 90%; descent-override: 22%;
}

:root {
  --navy-900: #0B1629; --navy-800: #0E1B33; --navy-line: #22304D;
  --gold: #B89B5E; --ivory: #F5F2EA; --mist: #A9B6CC; --slate: #8FA1C0; --slate-dim: #5E6F8D;
  --slate-dim-aa: #75839D; /* slate-dim lightened: 4.73:1 on navy-900 — spec's #5E6F8D is 3.56:1, below AA at the 11-11.5px sizes used here */
  --paper: #FFFFFF; --parchment: #F7F5EF; --sand-line: #E2DECF;
  --ink: #16233C; --ink-soft: #5F6D83; --label-olive: #736F58; --muted: #8A94A6;
  --serif: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Inter Fallback', -apple-system, 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
.label { font: 600 11.5px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--label-olive); }

/* Header */
.site-header { background: var(--navy-800); height: 84px; padding: 0 64px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { font: 500 16px var(--serif); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ivory); }
.site-nav { display: flex; gap: 36px; }
.site-nav a { font: 400 12.5px var(--sans); letter-spacing: 0.06em; color: var(--mist); transition: color 0.15s; padding: 32px 0; }
.site-nav a:hover { color: var(--ivory); }
.site-nav a.current { color: var(--ivory); font-weight: 500; border-bottom: 2px solid var(--gold); padding-bottom: 30px; }
.site-nav .login { position: relative; margin-left: 18px; padding-left: 30px; }
.site-nav .login::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 14px; width: 1px; background: var(--navy-line); }

/* Home hero */
.hero-home { background: var(--navy-800); padding: 130px 64px 120px; position: relative; overflow: hidden; }
.hero-motif { position: absolute; top: -230px; right: -190px; pointer-events: none; }
.hero-rule { width: 32px; height: 2px; background: var(--gold); position: relative; }
.hero-home h1 { font: 500 64px/1.18 var(--serif); color: var(--ivory); max-width: 760px; margin: 30px 0 0; text-wrap: balance; position: relative; }
.hero-home p { font: 400 16px/1.7 var(--sans); color: var(--mist); max-width: 560px; margin: 26px 0 0; position: relative; }

/* Inner hero (navy title band) */
.hero { background: var(--navy-800); padding: 84px 64px 72px; }
.hero h1 { font: 500 48px/1.2 var(--serif); color: var(--ivory); margin: 26px 0 0; }
.hero p { font: 400 16px/1.7 var(--sans); color: var(--mist); max-width: 560px; margin: 18px 0 0; }

/* 300 / 1fr content grid */
.section { padding: 92px 64px; }
.section.paper { background: var(--paper); }
.section.parchment { background: var(--parchment); border-top: 1px solid var(--sand-line); }
.grid { display: grid; grid-template-columns: 300px 1fr; gap: 64px; max-width: 1100px; }
.grid + .grid { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--sand-line); }
.grid .label { padding-top: 8px; }
.col { max-width: 620px; }
.paras { display: flex; flex-direction: column; gap: 30px; max-width: 620px; }
.paras p, p.body { font: 400 17px/1.8 var(--sans); color: var(--ink); margin: 0; text-wrap: pretty; }

/* Philosophy / WWLF */
.philosophy { background: var(--paper); padding: 104px 64px; }
.wwlf { background: var(--parchment); border-top: 1px solid var(--sand-line); padding: 96px 64px 104px; }
.wwlf .lead { font: 400 28px/1.5 var(--serif); color: var(--ink); max-width: 680px; margin: 22px 0 0; text-wrap: balance; }
.threecol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 64px; max-width: 1100px; }
.threecol .item { border-top: 1px solid var(--sand-line); padding-top: 22px; }
.threecol .num { font: 500 12px var(--sans); letter-spacing: 0.14em; color: var(--label-olive); }
.threecol h3 { font: 500 21px var(--serif); color: var(--ink); margin: 12px 0 0; }
.threecol p { font: 400 14px/1.7 var(--sans); color: var(--ink-soft); margin: 10px 0 0; text-wrap: pretty; }
.wwlf .closing { font: 400 22px/1.6 var(--serif); color: var(--ink); margin-top: 72px; max-width: 620px; text-wrap: balance; }
.wwlf .closing a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }

/* Fact strip */
.facts { background: var(--navy-900); padding: 64px 64px 56px; }
.facts .row { display: flex; gap: 80px; flex-wrap: wrap; }
.fact .k { font: 500 11px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-dim-aa); }
.fact .v { font: 400 14px var(--sans); color: var(--ivory); margin-top: 9px; }
.fact .v.num { font-variant-numeric: tabular-nums; }

/* Portfolio holdings */
.holdings { background: var(--paper); padding: 80px 64px 96px; }
.group { margin-bottom: 56px; }
.group:last-child { margin-bottom: 0; }
.group-label { font: 500 12px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label-olive); padding-bottom: 20px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--sand-line); border-radius: 8px; overflow: hidden; transition: border-color 0.15s; }
.card:hover { border-color: #C9C3AE; }
.logo-band { height: 132px; background: var(--parchment); border-bottom: 1px solid var(--sand-line); display: flex; align-items: center; justify-content: center; padding: 22px 28px; }
.logo { max-height: 56px; max-width: 100%; object-fit: contain; }
.lockup { display: flex; align-items: center; gap: 12px; }
.mono { width: 38px; height: 38px; border: 1px solid #CFC9B4; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 500 13px var(--serif); color: var(--ink); }
.lockup .nm { font: 500 19px var(--serif); color: var(--ink); letter-spacing: 0.01em; }
.card-body { padding: 22px 22px 20px; display: flex; flex-direction: column; flex: 1; }
.card-name { font: 500 17px var(--serif); color: var(--ink); }
.card-desc { font: 400 14px/1.65 var(--sans); color: var(--ink-soft); margin-top: 8px; flex: 1; }
.card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font: 500 12px var(--sans); color: var(--ink); transition: color 0.15s; }
.card-link:hover { color: var(--gold); }
.card-link .arrow { color: var(--gold); }

/* Statutory table (Company — future) */
.stat-row { display: flex; padding: 16px 0; border-top: 1px solid var(--sand-line); }
.stat-row:last-child { border-bottom: 1px solid var(--sand-line); }
.stat-row .k { width: 220px; flex-shrink: 0; font: 500 11px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--label-olive); }
.stat-row .v { font: 400 14px var(--sans); color: var(--ink); }
.stat-row .v.num { font-variant-numeric: tabular-nums; }

/* Contact (future) */
.email { font: 500 30px var(--serif); color: var(--ink); text-decoration: underline; text-decoration-color: var(--sand-line); text-underline-offset: 8px; transition: text-decoration-color 0.15s; }
.email:hover { text-decoration-color: var(--gold); }

/* Document pages (Legal / Privacy — future) */
.doc { background: var(--paper); padding: 96px 64px 110px; }
.doc .measure { max-width: 640px; }
.doc h1 { font: 500 40px/1.2 var(--serif); color: var(--ink); margin: 26px 0 0; }
.doc .statement { font: 400 22px/1.6 var(--serif); color: var(--ink); margin-top: 36px; text-wrap: balance; }
.doc p { font: 400 15px/1.85 var(--sans); color: var(--ink); margin-top: 22px; text-wrap: pretty; }
.doc .fine { font: 400 13px/1.7 var(--sans); color: var(--ink-soft); margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--sand-line); }

/* 404 (future) */
.notfound { background: var(--navy-900); position: relative; overflow: hidden; padding: 170px 64px 190px; }
.notfound .inner { max-width: 760px; margin: 0 auto; text-align: center; position: relative; }
.notfound .code { font: 400 13px var(--sans); letter-spacing: 0.2em; color: var(--slate-dim-aa); font-variant-numeric: tabular-nums; }
.notfound h1 { font: 500 56px/1.2 var(--serif); color: var(--ivory); margin: 22px 0 0; text-wrap: balance; }
.notfound p { font: 400 15.5px/1.7 var(--sans); color: var(--slate); margin: 20px 0 0; }
.notfound .back { display: inline-block; font: 500 13px var(--sans); color: var(--ivory); border-bottom: 1px solid var(--gold); padding-bottom: 4px; margin-top: 40px; transition: color 0.15s; }
.notfound .back:hover { color: var(--gold); }
.notfound + .site-footer { border-top: 1px solid var(--navy-line); }

/* Footer — site-wide system */
.site-footer { background: var(--navy-900); border-top: 1px solid var(--navy-line); padding: 30px 64px; display: flex; align-items: center; justify-content: space-between; }
.footer-left { display: flex; flex-direction: column; gap: 5px; }
.no-solicit { font: 500 13px var(--sans); color: var(--mist); }
.no-cookies { font: 400 11.5px var(--sans); color: var(--slate-dim-aa); }
.footer-links { display: flex; gap: 28px; align-items: center; }
.footer-links a { font: 400 12px var(--sans); color: var(--slate); transition: color 0.15s; }
.footer-links a:hover { color: var(--ivory); }
.footer-links a.private { font-weight: 500; letter-spacing: 0.04em; color: var(--gold); }
.footer-links a.private:hover { color: var(--ivory); }

/* Entry motion: CSS-only, off under prefers-reduced-motion; pages are complete without it */
@media (prefers-reduced-motion: no-preference) {
  .fade { animation: fadeUp 0.5s ease-out both; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Responsive */
@media (max-width: 960px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .threecol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .site-header { height: 64px; padding: 0 20px; }
  .wordmark { font-size: 13px; letter-spacing: 0.18em; }
  .site-nav { gap: 15px; }
  .site-nav a { font-size: 11px; padding: 22px 0; }
  .site-nav a.current { padding-bottom: 20px; }
  .site-nav .login { margin-left: 9px; padding-left: 15px; }
  .hero-home { padding: 72px 20px 64px; }
  .hero-motif { width: 560px; height: 560px; top: -160px; right: -210px; }
  .hero-home h1 { font-size: 38px; line-height: 1.22; }
  .hero-home p { font-size: 14.5px; }
  .hero { padding: 56px 20px 48px; }
  .hero h1 { font-size: 34px; }
  .philosophy, .wwlf, .section, .holdings, .doc { padding-left: 20px; padding-right: 20px; }
  .philosophy { padding-top: 64px; padding-bottom: 64px; }
  .grid { grid-template-columns: 1fr; gap: 28px; }
  .grid + .grid { margin-top: 40px; padding-top: 40px; }
  .threecol { grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
  .wwlf .closing { font-size: 20px; margin-top: 48px; }
  .cards { grid-template-columns: 1fr; }
  .facts { padding: 48px 20px; }
  .facts .row { flex-direction: column; gap: 28px; }
  .stat-row { flex-direction: column; gap: 4px; }
  .stat-row .k { width: auto; }
  .notfound { padding: 110px 20px 130px; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 20px; }
}