/* Player Fund Inc - design tokens.
   Alpenglow: cold glacial neutrals carrying one warm accent, the way low sun
   lands on a snowfield. The previous palette was five steps of a single
   blue-teal, which is why it read flat - warm/cold contrast is what gives the
   page somewhere to look. Ember is the only accent; nothing else competes.
   Contrast, measured not eyeballed: every text token clears 4.5:1 on all three
   light surfaces (paper, canvas, glacier), and --ember-bright clears it on
   --summit. The two tightest pairs are --ember on --glacier at 4.53:1 and
   --ink-faint on --glacier at 4.51:1 - re-run the math before lightening
   either, or before adding a fourth surface. */
:root{
  --paper:#ffffff;
  --canvas:#eff3f6;    /* cool ice, the alternating band */
  --glacier:#dbe6ec;   /* pale ice fill: highlights, chart tracks, quiet blocks */
  --ink:#131a21;
  --ink-soft:#41505c;
  --ink-faint:#5a6875;
  --navy:#16344a;      /* glacial navy: primary buttons, solid blocks */
  --navy-deep:#0f2231; /* summit navy: full-bleed dark blocks */
  --ember:#7a6428;         /* accent on light surfaces */
  --ember-bright:#b8aa7d;  /* the logo gold, dark surfaces only - fails AA on white */
  --border:rgba(15,34,49,.14);
  --border-strong:rgba(15,34,49,.26);
  --max:1180px;

  /* Two voices, deliberately far apart. Instrument Serif is the voice: high
     stroke contrast, narrow set, used only where the page actually speaks.
     Schibsted Grotesk is the structure: labels, data, controls, body. A
     heading is serif when it carries an argument and grotesk when it names a
     part, which is why h3 is not simply a smaller h2. */
  --font-display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --font-body:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* 4-base spacing scale. Every gap, pad and margin below comes from this;
     one-off pixel values are the thing that made the old page feel arbitrary. */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px;  --s9:96px;  --s10:128px;
  --radius:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,video{max-width:100%;display:block}
a{color:inherit}

/* Serif = voice. Only h1 and h2, only where the page makes a claim. */
h1,h2{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-0.018em;
  margin:0 0 .34em;
  text-wrap:balance;
}
h1{font-size:clamp(3rem,5.4vw,5rem)}
h2{font-size:clamp(2.15rem,3.5vw,3.15rem)}

/* Grotesk = structure. h3/h4 name a part rather than argue, so they drop to
   the body face and gain weight instead of size. That is the whole hierarchy
   trick on this site: the jump is a change of voice, not another font-size. */
h3,h4{
  font-family:var(--font-body);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-0.006em;
  margin:0 0 .5em;
  text-wrap:balance;
  color:var(--ink);
}
h3{font-size:1.075rem}
h4{font-size:.95rem}

p{margin:0 0 1em;max-width:72ch}
.lede{font-size:1.235rem;line-height:1.55;color:var(--ink-soft);letter-spacing:-0.004em;max-width:64ch}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}

/* ---- legal pages ---- */
.legal-content{max-width:760px;margin:0 auto;padding:72px 0 112px}
.legal-content h1{font-size:clamp(2.2rem,3.6vw,2.9rem);margin-bottom:12px}
.legal-content .legal-dates{color:var(--ink-faint);font-size:.9rem;margin-bottom:40px}
.legal-content h2{font-size:1.4rem;margin:44px 0 14px}
.legal-content h3{font-size:1.1rem;margin:28px 0 10px}
.legal-content p,.legal-content li{color:var(--ink-soft)}
.legal-content ul,.legal-content ol{padding-left:22px;margin:0 0 1em}
.legal-content li{margin-bottom:8px}
.legal-content .summary{
  background:var(--canvas);border:1px solid var(--border);border-radius:4px;
  padding:20px 24px;margin-bottom:40px;
}
.legal-content .summary p{margin:0;color:var(--ink)}
.legal-content .placeholder{color:var(--ember);font-weight:600}
@media (max-width:640px){.wrap{padding:0 20px}}

section{padding:112px 0;scroll-margin-top:88px}
@media (max-width:900px){section{padding:76px 0}}
.band-paper{background:var(--paper)}
.band-canvas{background:var(--canvas)}

.fund-title-lockup{display:flex;align-items:center;gap:56px}
@media (max-width:560px){.fund-title-lockup{gap:20px}}
.fund-header-logo{
  height:280px;width:auto;flex-shrink:0;margin-left:16px;
  mix-blend-mode:multiply;filter:drop-shadow(0 10px 22px rgba(15,34,49,.14));
}
@media (max-width:900px){.fund-header-logo{height:200px}}
@media (max-width:560px){.fund-header-logo{height:130px;margin-left:0}}

.brokercheck-badge{display:inline-block;opacity:.85;transition:opacity .15s ease}
.brokercheck-badge:hover{opacity:1}
.brokercheck-badge img{height:56px;width:auto}

/* Strategies page only: this fund has its own lockup (Player International
   Fund), swapped in over the firm's Player Fund Inc. mark in nav + footer,
   per the "Player Website adjustments" brief. */
body.page-strategies .brand-logo{content:url("../assets/player-international-fund-logo.png");height:64px}
@media (max-width:900px){body.page-strategies .brand-logo{height:56px}}
@media (max-width:760px){body.page-strategies .brand-logo{height:48px}}
body.page-strategies footer .brand-logo{
  content:url("../assets/player-international-fund-logo.png");height:100px;
  background:#fff;border-radius:8px;padding:12px 20px;
}

/* ---- nav ---- */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:none;
  border-bottom:1px solid var(--border);
}
.site-nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:78px;
}
@media (max-width:760px){.site-nav .wrap{height:64px}}

.brand{display:flex;align-items:center;text-decoration:none}
/* The lockup runs 4.25:1. Height is what is tunable here; width follows, and
   width is what the nav bar actually has to spend. */
.brand-logo{height:56px;width:auto;flex:none}
@media (max-width:900px){.brand-logo{height:48px}}
@media (max-width:760px){
  /* At any height that fits the bar, the full lockup is wider than a 320px
     screen has left once the CTA and the toggle are placed. The mark carries
     the identity on its own at this size. content: swaps the rendered image
     and leaves the img element, and its alt text, exactly where they were. */
  .brand-logo{content:url("../assets/logo-mark.png");height:40px}
}

.nav-links{display:flex;gap:36px;list-style:none;margin:0;padding:0;font-size:.95rem}
.nav-links a{text-decoration:none;color:var(--ink-soft);position:relative;padding:4px 0}
.nav-links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ember);
  transition:right .28s ease;
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-links a[aria-current="page"]{color:var(--ink)}

/* No font-size here on purpose: .btn declares .86rem at equal specificity and
   later in this file, so the .72rem and .7rem these two rules used to carry
   never applied to a single pixel. Removed rather than made to win - the size
   that actually renders, 13.76px, fits at 320px, and the intended one would
   have sat on the 11px legibility floor. */
.nav-cta{margin-left:28px;padding:10px 22px;white-space:nowrap}
@media (max-width:480px){.nav-cta{padding:8px 14px;margin-left:12px}}

/* No padding-block: the desktop bar is a 78px flex row with align-items:center,
   so the 4px this used to carry changed nothing there, and on mobile it made
   this one menu row 69px against its siblings' 60px with the label 4px out of
   line. The summary owns the inset on both. */
.nav-social{position:relative;list-style:none}
.nav-social summary{list-style:none;cursor:pointer;color:var(--ink-soft)}
.nav-social summary::-webkit-details-marker{display:none}
.nav-social summary::after{
  content:'';display:inline-block;margin-left:6px;border:4px solid transparent;
  border-top-color:var(--ink-faint);vertical-align:middle;transform:translateY(2px);
}
.nav-social-panel{
  position:absolute;top:calc(100% + 16px);right:0;display:flex;flex-direction:column;gap:2px;
  min-width:160px;padding:8px;margin:0;list-style:none;
  background:var(--paper);border:1px solid var(--border);box-shadow:0 16px 32px -20px rgba(22,48,58,.35);
}
.nav-social-panel a{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);text-decoration:none;color:var(--ink);font-size:.85rem;font-weight:600}
.nav-social-panel a:hover{background:var(--canvas)}
.nav-social-panel svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}
@media (max-width:760px){
  .nav-social-panel{position:static;border:none;box-shadow:none;padding:var(--s2) 0 var(--s4) var(--s5);background:none}
  .nav-social summary{padding:18px 20px}
}

.nav-toggle{display:none}
@media (max-width:760px){
  .nav-links{
    position:fixed;inset:64px 0 auto 0;background:var(--paper);
    flex-direction:column;gap:0;border-bottom:1px solid var(--border);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:.22s ease;
  }
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-links li{border-top:1px solid var(--border);padding-top:6px}
  .nav-links a{display:block;padding:18px 20px}
  .nav-toggle{
    display:block;background:none;border:0;width:44px;height:44px;position:relative;cursor:pointer;
  }
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
    content:'';position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:.2s ease;
  }
  .nav-toggle span{top:21px}
  .nav-toggle span::before{top:-8px}
  .nav-toggle span::after{top:8px}
  .nav-toggle[aria-expanded="true"] span{background:transparent}
  .nav-toggle[aria-expanded="true"] span::before{transform:translateY(8px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span::after{transform:translateY(-8px) rotate(-45deg)}
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 30px;border-radius:2px;text-decoration:none;cursor:pointer;border:1px solid transparent;
  position:relative;overflow:hidden;isolation:isolate;
}
.btn span{position:relative;z-index:1}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary::before{
  content:'';position:absolute;inset:0;background:var(--navy-deep);
  transform:translateX(-101%);transition:transform .32s cubic-bezier(.65,0,.35,1);z-index:0;
}
.btn-primary:hover::before{transform:translateX(0)}
.btn-ghost{border-color:var(--border-strong);color:var(--ink)}
.btn-ghost::before{
  content:'';position:absolute;inset:0;background:var(--ink);
  transform:translateX(-101%);transition:transform .32s cubic-bezier(.65,0,.35,1);z-index:0;
}
.btn-ghost:hover{color:#fff;border-color:var(--ink)}
.btn-ghost:hover::before{transform:translateX(0)}
.btn-on-dark{border-color:rgba(255,255,255,.5);color:#fff}
.btn-on-dark::before{
  content:'';position:absolute;inset:0;background:#fff;
  transform:translateX(-101%);transition:transform .32s cubic-bezier(.65,0,.35,1);z-index:0;
}
.btn-on-dark:hover{color:var(--ink)}
.btn-on-dark:hover::before{transform:translateX(0)}

.text-link{
  text-decoration:none;border-bottom:1px solid var(--border-strong);padding-bottom:2px;font-size:.95rem;
  transition:border-color .2s ease;
}
.text-link:hover{border-color:var(--ink)}

/* ---- hero ---- */
.hero{
  position:relative;min-height:92vh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--navy-deep);
}
.hero video,.hero .hero-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,28,34,.35) 0%,rgba(12,28,34,.35) 40%,rgba(10,24,29,.86) 100%);
}
.hero-content{position:relative;z-index:2;color:#fff;padding-bottom:96px;width:100%}
@media (max-width:760px){.hero-content{padding-bottom:56px}}
.hero h1{color:#fff;max-width:17ch;font-size:clamp(3.2rem,7vw,6.5rem)}
.hero .lede{color:rgba(255,255,255,.82);max-width:46ch;margin-bottom:2em;font-size:1.4rem}
.hero-ctas{display:flex;align-items:center;gap:28px;flex-wrap:wrap}

/* ---- signature diagonal motif ---- */
.motif{
  position:relative;height:4px;overflow:hidden;
}
.motif::before,.motif::after{
  content:'';position:absolute;top:0;bottom:0;
}
.motif::before{left:0;right:38%;background:var(--navy);clip-path:polygon(0 0,100% 0,calc(100% - 24px) 100%,0 100%);}
.motif::after{left:62%;right:0;background:var(--ember);clip-path:polygon(24px 0,100% 0,100% 100%,0 100%);}

/* ---- pull quote / text break ----
   The dark base is on the section, not only on the photograph. The quote is
   white and every bit of the darkness under it used to come from the photo
   plus the scrim, so a slow or failed image left white text on a white page
   at 1:1. A `.no-bg` modifier existed for exactly that case and was never put
   on any element; this makes the guarantee unconditional instead. */
.text-break{position:relative;padding:150px 0;background:var(--navy-deep)}
.text-break .bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
.text-break .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,34,49,.62),rgba(15,34,49,.86))}
.text-break .wrap{position:relative;z-index:1;color:#fff;text-align:center}
.text-break blockquote{
  margin:0 auto;max-width:18ch;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:1.3;
}
@media (min-width:760px){.text-break blockquote{max-width:22ch}}

/* ---- generic two-col split ---- */
.split{display:grid;gap:64px;align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split.reverse > .split-media{order:2}
}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.split-media.wide img{aspect-ratio:16/10}
.split h2{margin-bottom:.4em}

/* ---- principle list ---- */
.principles{display:grid;gap:var(--s7)}
@media (min-width:760px){.principles{grid-template-columns:repeat(2,1fr)}}
/* The 01/02/03 counters are gone: the order carried no information, it was
   just decoration pretending to be a system. The rule alone groups them. */
.principle{border-top:1px solid var(--border-strong);padding-top:var(--s5)}
.principle h3{margin-top:0}

/* ---- lede band (asymmetric) ---- */
.lede-grid{display:grid;gap:56px}
@media (min-width:900px){.lede-grid{grid-template-columns:1.1fr 1fr}}
.lede-grid h2{max-width:12ch}

/* ---- data visualization (canvas charts, generated from js/charts.js) ---- */
.chart-card{border:1px solid var(--border);border-radius:4px;padding:28px 26px;background:var(--paper)}
.chart-card h3{margin:0 0 4px;font-size:1.05rem}
.chart-card .chart-caption{color:var(--ink-faint);font-size:.85rem;margin-bottom:18px}
.chart-canvas-wrap{width:100%}
.chart-canvas-wrap canvas{display:block;width:100%}
.chart-grid{display:grid;gap:28px}
@media (min-width:860px){.chart-grid.two{grid-template-columns:1fr 1fr}}
.chart-grid.split-donut{align-items:center}
@media (min-width:760px){.chart-grid.split-donut{grid-template-columns:.9fr 1.1fr}}
.chart-legend{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;font-size:.88rem;color:var(--ink-soft)}
.chart-swatch{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:10px;vertical-align:middle}

/* ---- data tables (allocation / income / correlation tables) ---- */
.table-scroll{overflow-x:auto;margin:24px 0}
.data-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:480px}
.data-table caption{text-align:left;font-family:var(--font-display);font-size:1.1rem;margin-bottom:12px;color:var(--ink)}
.data-table th,.data-table td{padding:10px 14px;border-bottom:1px solid var(--border);text-align:left}
.data-table thead th{background:var(--canvas);font-family:var(--font-body);font-weight:600;color:var(--ink);text-transform:none;letter-spacing:-0.003em;font-size:.84rem;line-height:1.35;border-bottom:1px solid var(--border-strong)}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table td:not(:first-child),.data-table th:not(:first-child){text-align:right}
.legal-content .data-table td,.legal-content .data-table th{text-align:left}
.data-table.text-table td:not(:first-child),.data-table.text-table th:not(:first-child){text-align:left}
.data-table tbody th{font-family:var(--font-body);font-weight:600;color:var(--ink);vertical-align:top}
.data-table.text-table td{vertical-align:top;color:var(--ink-soft);line-height:1.55;max-width:52ch}
.data-table.text-table tbody th{min-width:14ch}
.data-table.text-table td > p{margin:0 0 .7em;max-width:none}
.data-table.text-table td > p:last-child,.data-table.text-table td > details:last-child{margin-bottom:0}
.data-table.text-table td .disclosure{border:0;border-top:1px solid var(--border);margin-top:var(--s4);padding:0}
.data-table.text-table td .disclosure > summary{padding:var(--s4) 0;font-size:.95rem}
.data-table.text-table td .disclosure-body{padding:0 0 var(--s3)}
.section-note{color:var(--ink-faint);font-size:.85rem;margin-top:10px}

/* ---- fund summary (fact-sheet) layout ---- */
.fund-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--border-strong);margin-bottom:26px}
@media (max-width:560px){.fund-header{flex-direction:column;align-items:flex-start}}
.fund-header .fund-tag{display:block;font-size:.92rem;letter-spacing:-0.004em;text-transform:none;color:var(--ink-faint);margin-top:var(--s2)}
.fund-header h1,.fund-header h2{margin-bottom:4px}
.fund-name{font-size:clamp(3rem,5.4vw,5rem)}
.fund-header .fund-compartments{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;max-width:520px}
.fund-pill{border:1px solid var(--border-strong);border-radius:2px}
.fund-pill summary{
  padding:8px 14px;font-family:var(--font-body);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);cursor:pointer;list-style:none;transition:background .2s,color .2s;
}
.fund-pill summary::-webkit-details-marker{display:none}
.fund-pill summary::after{
  content:'';display:inline-block;margin-left:8px;border:4px solid transparent;
  border-top-color:var(--ink-faint);vertical-align:middle;transform:translateY(-1px);
}
.fund-pill:hover summary{background:var(--canvas)}
.fund-pill[open]{flex-basis:100%}
.fund-pill[open] summary{background:var(--ink);color:#fff}
.fund-pill[open] summary::after{border-top-color:transparent;border-bottom-color:#fff;transform:translateY(3px)}
.fund-pill p{margin:0;padding:14px;border-top:1px solid var(--border-strong);font-size:.85rem;color:var(--ink-soft)}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:20px 0 30px}
.stat-tile{border:1px solid var(--border);border-radius:4px;padding:16px 18px}
.stat-tile .stat-label{display:block;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.stat-tile .stat-value{font-family:var(--font-display);font-size:1.5rem;color:var(--ink);display:block}
.stat-tile .stat-sub{font-size:.8rem;color:var(--ink-soft);margin-top:2px}

.fund-summary-grid{display:grid;gap:36px;margin-top:8px}
@media (min-width:860px){.fund-summary-grid{grid-template-columns:2fr 1fr}}
.fund-summary-grid h3{margin:26px 0 8px;font-size:1.05rem}
.fund-summary-grid h3:first-child{margin-top:0}

.fact-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.fact-list li{padding:13px 0;border-bottom:1px solid var(--border)}
.fact-list .fact-label{display:block;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:3px}
.fact-list .fact-value{font-weight:600;color:var(--ink);font-size:.95rem}

/* ---- full-bleed band ---- */
.banner{position:relative;height:56vh;min-height:380px;overflow:hidden;padding:0}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner .caption{
  position:absolute;left:0;right:0;bottom:0;padding:36px 0;
  background:linear-gradient(0deg,rgba(10,24,29,.72),transparent);color:#fff;
}
.banner .caption p{margin:0;max-width:46ch;color:rgba(255,255,255,.88)}

/* ---- market access band ---- */
.market{background:var(--navy-deep);color:#fff;overflow:hidden}
.market-grid{display:grid;gap:48px;align-items:center}
@media (min-width:960px){
  .market-grid{grid-template-columns:1fr 1fr;gap:72px}
}
/* Only bleed past the container once the viewport is actually wider than it. */
@media (min-width:1181px){

}
.market-copy h2{color:#fff;max-width:14ch}
.market-copy .lede{color:rgba(255,255,255,.76);margin-top:.8em}

.market-list{list-style:none;margin:44px 0 0;padding:0}
.market-list li{padding:22px 0;border-top:1px solid rgba(255,255,255,.16)}
.market-list li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.market-list h3{
  margin:0;font-family:var(--font-display);font-weight:500;font-size:1.15rem;
  letter-spacing:-.01em;color:var(--ember-bright);
}
.market-list p{margin:.7em 0 0;color:rgba(255,255,255,.7);font-size:.95rem}

.market-aside{display:flex;align-items:center}
.market-aside .block-accent{max-width:38ch}

/* ---- archival framed photo ---- */
.framed{
  position:relative;padding:14px;background:var(--paper);
  border:1px solid var(--border);box-shadow:0 24px 48px -32px rgba(15,34,49,.32);
  max-width:280px;
}
.framed img{filter:sepia(.18) contrast(1.04)}
/* the mark is line art on transparency, so the archival grade would only
   dirty it - it gets padding and a clean plate instead */
.framed-mark{padding:26px 30px}
.framed-mark img{filter:none;display:block;width:100%;height:auto}
.framed figcaption{
  margin-top:10px;font-size:.78rem;letter-spacing:.02em;color:var(--ink-faint);text-align:center;
}

/* ---- reveal (IntersectionObserver-driven) ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---- page hero (about/contact, no video) ---- */
.page-hero{
  padding:160px 0 90px;background:var(--navy-deep);color:#fff;position:relative;overflow:hidden;
}
@media (max-width:640px){.page-hero{padding:112px 0 56px}}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{color:#fff;max-width:16ch}
.page-hero .lede{color:rgba(255,255,255,.8);max-width:52ch}
.page-hero-img{position:absolute;inset:0;opacity:.28}
.page-hero-img img{width:100%;height:100%;object-fit:cover}
.page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,52,74,.35),var(--navy-deep) 92%)}

/* ---- form ---- */
.contact-grid{display:grid;gap:72px}
@media (min-width:900px){.contact-grid{grid-template-columns:.85fr 1.15fr}}
.info-list{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:22px}
.info-list dt{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px}
.info-list dd{margin:0;font-size:1.05rem}
.info-list a{text-decoration:none;border-bottom:1px solid var(--border-strong)}
.info-list a:hover{border-color:var(--ink)}

form{
  display:grid;gap:28px;background:var(--canvas);border:1px solid var(--border);
  border-radius:3px;padding:44px 38px;
}
@media (max-width:560px){form{padding:32px 22px}}
.form-row{display:grid;gap:28px}
@media (min-width:560px){.form-row.two{grid-template-columns:1fr 1fr}}

.field{position:relative}
.field input,.field textarea{
  width:100%;font-family:var(--font-body);font-size:1.02rem;color:var(--ink);
  padding:24px 2px 10px;border:0;border-bottom:1.5px solid var(--border-strong);
  border-radius:0;background:transparent;transition:border-color .25s ease;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field label{
  position:absolute;left:2px;top:24px;font-size:1.02rem;color:var(--ink-faint);
  pointer-events:none;transition:top .18s ease,font-size .18s ease,color .18s ease,letter-spacing .18s ease;
}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{
  top:2px;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);
}
.field::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--navy);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.field:focus-within::after{transform:scaleX(1)}

.form-note{font-size:.85rem;color:var(--ink-faint)}
form .btn{width:100%;justify-content:center}
@media (min-width:560px){form .btn{width:auto}}

/* ---- footer ---- */
footer{background:var(--navy-deep);color:rgba(255,255,255,.75);padding:72px 0 40px}
/* Was a white plate painted behind a navy logo so it could be seen on a navy
   footer. There is a light lockup now, so the plate goes. */
footer .brand-logo{content:url("../assets/logo-light.png");height:60px}
.footer-grid{display:grid;gap:48px;margin-top:48px}
@media (min-width:760px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
/* Sentence case, not tracked-out caps: an all-caps micro-label is an eyebrow
   wearing a different hat, and it reads worse at every size. */
footer h3{color:#fff;font-family:var(--font-body);font-size:.95rem;font-weight:600;letter-spacing:-0.004em;text-transform:none;margin-bottom:var(--s4)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer a{text-decoration:none;color:rgba(255,255,255,.72)}
footer a:hover{color:#fff}

.footer-social{display:flex;gap:18px;margin-top:24px}
.footer-social a{display:flex;color:rgba(255,255,255,.6);transition:color .3s ease;padding:10px;margin:-10px}
.footer-social a:hover{color:var(--ember-bright)}
.footer-social svg{width:20px;height:20px;fill:currentColor}

.footer-base{
  margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:rgba(255,255,255,.5);
}

.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;
}
.skip-link{
  position:absolute;left:12px;top:-48px;background:var(--navy);color:#fff;padding:12px 18px;z-index:100;
  transition:top .2s ease;text-decoration:none;
}

/* ---- footer disclosure + terms modal ---- */
.footer-disclosure{
  margin:18px 0 0;font-size:.8rem;line-height:1.6;color:rgba(255,255,255,.5);max-width:72ch;
}
.footer-disclosure button{
  background:none;border:0;padding:0;margin-left:6px;font:inherit;color:rgba(255,255,255,.7);
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);cursor:pointer;
}
.footer-disclosure button:hover{color:#fff;border-color:#fff}

dialog#terms-modal{
  border:0;border-radius:2px;padding:0;max-width:560px;width:calc(100% - 40px);
  box-shadow:0 24px 60px rgba(22,48,58,.28);
}
dialog#terms-modal::backdrop{background:rgba(22,48,58,.55)}
.modal-body{padding:36px 32px}
.modal-body h2{font-size:1.5rem;line-height:1.3;margin-bottom:var(--s4)}
.modal-body p{color:var(--ink-soft);margin-bottom:0}
.modal-close{margin-top:26px}
.skip-link:focus{top:12px}

/* ---- browser surfaces ----
   The parts we did not draw still ship with somebody else's design. Theming
   them from the palette is what stops the page reading as assembled. */
::selection{background:var(--ember);color:#fff}
html{scrollbar-color:var(--ink-faint) var(--canvas)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--canvas)}
::-webkit-scrollbar-thumb{background:var(--ink-faint);border:3px solid var(--canvas);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-soft)}
:root{accent-color:var(--navy);caret-color:var(--ember)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}
.hero :focus-visible,.text-break :focus-visible,.market :focus-visible,
.page-hero :focus-visible,.banner :focus-visible{outline-color:var(--ember-bright)}
/* figures in a column of currency should line up; browser default is proportional */
.data-table td,.stat-tile .stat-value,.fact-list .fact-value{font-variant-numeric:normal}

/* ---- colour blocks ---- */
.band-glacier{background:var(--glacier)}
.band-summit{background:var(--navy-deep);color:#fff}
.band-summit h2,.band-summit h3{color:#fff}
.band-summit .lede,.band-summit p{color:rgba(255,255,255,.78)}
/* solid ember slab: used once per page at most, for the line that must land */
.block-accent{
  background:var(--ember);color:#fff;padding:44px 40px;
  border-radius:4px;max-width:34ch;
}
.block-accent p{margin:0;font-family:var(--font-display);font-size:1.45rem;line-height:1.3}
@media (max-width:640px){.block-accent{padding:32px 26px}.block-accent p{font-size:1.2rem}}

/* the mountain bands run taller than the architecture ones and sit the quote
   lower, so the peak line stays visible above the text */
.text-break.peak{padding:210px 0 130px}
.text-break.peak .scrim{background:linear-gradient(180deg,rgba(15,34,49,.30) 0%,rgba(15,34,49,.55) 45%,rgba(15,34,49,.88) 100%)}
@media (max-width:760px){.text-break.peak{padding:150px 0 96px}}
.photo-credit{
  position:absolute;right:var(--s4);bottom:var(--s3);z-index:2;
  font-size:.75rem;line-height:1.45;color:rgba(255,255,255,.72);letter-spacing:.01em;
}
.photo-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.photo-credit a:hover{color:rgba(255,255,255,.85)}

/* ============================================================================
   Structure pass.

   The previous version put colour *behind* the content as faint diagonal
   slabs and put emphasis *under* the text as highlight fills. Both were
   decoration sitting next to the layout rather than doing any of its work,
   which is why they read as noise. Colour now lives in the content: a bento
   grid whose tiles carry the surface, so structure and colour are the same
   decision. Ember is the loudest thing on the page, so it gets exactly one
   tile per grid and nothing else.
   ========================================================================= */

/* ---- bento ----
   Six columns so tiles can run 1/3, 1/2, 2/3 and full without fractions.
   Everything is full width below 760px: one column, source order preserved,
   no reflow surprises on a phone. */
.bento{display:grid;gap:var(--s3);grid-template-columns:repeat(6,1fr)}
.bento > *{grid-column:span 6}
@media (min-width:760px){
  .bento{gap:var(--s4)}
  .b2{grid-column:span 2}
  .b3{grid-column:span 3}
  .b4{grid-column:span 4}
  .b6{grid-column:span 6}
}

.tile{
  padding:var(--s6);border-radius:var(--radius);
  background:var(--paper);border:1px solid var(--border);
  display:flex;flex-direction:column;gap:var(--s4);
}
.tile > *{margin-bottom:0;max-width:none}
.tile h3{margin-bottom:0}
.tile p{color:var(--ink-soft)}
.tile ul{margin:0;padding-left:var(--s5);display:grid;gap:var(--s2)}
.tile li{color:var(--ink-soft)}
.tile li strong,.tile p strong{color:var(--ink);font-weight:600}
.tile .tile-lede{font-size:1.08rem;line-height:1.5;color:var(--ink)}
@media (max-width:640px){.tile{padding:var(--s5)}}

/* Surfaces. Borders drop out on filled tiles: the fill already draws the edge,
   and a border on top of it reads as a box inside a box. */
.tile-ice{background:var(--glacier);border-color:transparent}
.tile-ice p,.tile-ice li{color:#3b4c58}
.tile-navy{background:var(--navy-deep);border-color:transparent;color:#fff}
.tile-navy h3,.tile-navy h4{color:#fff}
.tile-navy p,.tile-navy li{color:rgba(255,255,255,.78)}
.tile-navy li strong,.tile-navy p strong,.tile-navy .tile-lede{color:#fff}
/* one per grid, never two */
.tile-ember{background:var(--ember);border-color:transparent;color:#fff}
.tile-ember h3,.tile-ember h4{color:#fff}
.tile-ember p,.tile-ember li{color:rgba(255,255,255,.88)}
.tile-ember li strong,.tile-ember p strong,.tile-ember .tile-lede{color:#fff}

/* A tile that is only a number and its meaning. */
.tile-figure{gap:var(--s2);justify-content:flex-end;min-height:170px}
.tile-figure .figure{
  font-family:var(--font-display);font-size:clamp(2.6rem,4.6vw,3.9rem);
  line-height:.92;letter-spacing:-0.02em;font-variant-numeric:normal;
}
.tile-figure .figure-label{font-size:.92rem;line-height:1.45;color:var(--ink-soft)}
.tile-navy .figure-label{color:rgba(255,255,255,.74)}
.tile-ember .figure-label{color:rgba(255,255,255,.88)}

/* ---- disclosures ----
   The 3px ember stripe down the summary was the single most generic thing on
   the page. The open state now shows in the border and the marker instead. */
.disclosure-set{display:grid;gap:var(--s2)}
.disclosure{
  border:1px solid var(--border);border-radius:var(--radius);background:var(--paper);
  transition:background-color .3s ease,border-color .3s ease;
}
.disclosure:hover{border-color:var(--border-strong)}
.disclosure[open]{border-color:var(--border-strong)}
.disclosure > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s5) var(--s6);
  font-family:var(--font-body);font-size:1.02rem;font-weight:600;
  letter-spacing:-0.006em;color:var(--ink);
}
.disclosure > summary::-webkit-details-marker{display:none}
.disclosure > summary::after{
  content:'';flex:none;margin-left:auto;width:9px;height:9px;
  border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .25s ease;
}
.disclosure[open] > summary::after{transform:translateY(2px) rotate(225deg);border-color:var(--ember)}
.disclosure-body{padding:0 var(--s6) var(--s6)}
.disclosure-body > *:first-child{margin-top:0}
.disclosure-body ul{margin:0;padding-left:var(--s5);display:grid;gap:var(--s3)}
.disclosure-body li{color:var(--ink-soft);font-size:.97rem;line-height:1.6;max-width:74ch}
.disclosure-body li strong{color:var(--ink);font-weight:600}
@media (max-width:640px){
  .disclosure > summary{padding:var(--s4) var(--s5);font-size:.97rem}
  .disclosure-body{padding:0 var(--s5) var(--s5)}
}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .disclosure::details-content{
    block-size:0;overflow:hidden;opacity:0;
    transition:block-size .4s cubic-bezier(.22,1,.36,1),
               content-visibility .4s allow-discrete,
               opacity .3s ease;
  }
  .disclosure[open]::details-content{block-size:auto;opacity:1}
}
/* A disclosure inside a tile is not a second card: strip the box and let a
   single hairline do the separating, or you get a container in a container. */
.principle .disclosure{margin-top:var(--s4)}
.tile .disclosure{
  border:0;border-top:1px solid var(--border-strong);border-radius:0;
  background:transparent;margin-top:var(--s1);
}
.tile .disclosure:hover,.tile .disclosure[open]{border-color:var(--ink-faint)}
.tile .disclosure > summary{padding:var(--s4) 0;font-size:.97rem}
.tile .disclosure-body{padding:0 0 var(--s3)}
.tile .disclosure-body li{font-size:.92rem}
.tile-ice .disclosure{border-top-color:rgba(15,34,49,.22)}

/* ---- section rhythm ----
   Separation and grouping run on a 2:1 ratio, and there is always more space
   above a heading than below it, so a heading reads as belonging to what
   follows rather than floating between two blocks. */
section{padding:var(--s10) 0}
@media (max-width:900px){section{padding:var(--s9) 0}}
@media (max-width:640px){section{padding:var(--s8) 0}}
.section-lead{margin-bottom:var(--s8)}
.section-lead > :last-child{margin-bottom:0}
@media (max-width:640px){.section-lead{margin-bottom:var(--s7)}}
.stack-s > * + *{margin-top:var(--s5)}
.stack-m > * + *{margin-top:var(--s7)}

/* ---- browser surfaces ----
   Selection, caret, scrollbar, focus ring and underline offset all ship with
   defaults that belong to no design system. They are part of the page. */
::selection{background:var(--navy);color:#fff}
.tile-ember ::selection,.tile-navy ::selection{background:#fff;color:var(--navy-deep)}
:root{caret-color:var(--ember);accent-color:var(--ember);scrollbar-color:var(--border-strong) transparent}
:where(a){text-underline-offset:.18em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:1px}
.hero :focus-visible,.text-break :focus-visible,.market :focus-visible,
.page-hero :focus-visible,.banner :focus-visible,
.tile-navy :focus-visible,.tile-ember :focus-visible{outline-color:#fff}
.data-table td,.data-table th,.stat-tile .stat-value,.fact-list .fact-value,
.figure{font-variant-numeric:normal}

/* ---- hero ----
   Stacking is explicit so the scrim always wins the contrast argument:
   video 0, glow 1, scrim 2, copy 3. isolation is load-bearing, not styling:
   without a stacking context the plus-lighter wash composites against the
   whole document and saturates every page below it to white. */
.hero{isolation:isolate}
.hero video,.hero .hero-poster{z-index:0}
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(66% 56% at 82% 76%,rgba(217,104,58,.34),transparent 66%);
  mix-blend-mode:plus-lighter;
}
.hero::after{
  z-index:2;
  background:
    linear-gradient(100deg,rgba(9,22,30,.82) 0%,rgba(9,22,30,.54) 44%,rgba(9,22,30,.16) 74%),
    linear-gradient(180deg,rgba(9,22,30,.44) 0%,rgba(9,22,30,.28) 38%,rgba(9,22,30,.88) 100%);
}
.hero-content{z-index:3}
.hero .photo-credit{z-index:4}
.market,.band-summit{position:relative;isolation:isolate}
.market::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  top:-14%;right:-10%;width:min(52vw,700px);aspect-ratio:1;
  background:radial-gradient(circle at 60% 40%,rgba(217,104,58,.30),transparent 68%);
  mix-blend-mode:plus-lighter;
}
.market > *,.band-summit > *{position:relative;z-index:1}

/* ---- motion ----
   One authored moment: content rises once as its section arrives. Everything
   else is a state change, not an entrance. The old build animated every card
   in every section identically, which reads as a template playing itself. */
.reveal{transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.chart-card{transition:border-color .3s ease,box-shadow .3s ease}
.chart-card:hover{border-color:var(--border-strong);box-shadow:0 12px 32px -22px rgba(15,34,49,.5)}
.tile{transition:border-color .3s ease}
.split-media{overflow:hidden}
.split-media img{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.split-media:hover img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){
  .reveal,.chart-card,.tile,.split-media img,.disclosure,.disclosure > summary::after{transition:none}
  .split-media:hover img{transform:none}
  .disclosure::details-content{transition:none}
}

/* ---- parallax photographs ----
   The move itself lives in js/parallax.js, driven by scroll position rather
   than a timer - see the note there for why. All this leaves is the resting
   state, which has to be right on its own: with JavaScript blocked, or before
   the module resolves, the photograph is simply a still at 1.12. That is the
   same crop the motion starts from, so nothing jumps when GSAP takes over. */
.drift{transform:scale(1.12)}
/* The peak bands never needed to clip anything before; a scaled child changes
   that. */
.text-break{overflow:hidden}

/* ---- content blocks ----
   A section is made of blocks; a block is a label, an optional intro and one
   piece of structure. The old page ran h3 / p / h3 / p at one flat interval,
   so nothing grouped and everything looked equally important. The interval
   between blocks is roughly 2.5x the interval inside one, which is the whole
   fix. */
.block + .block{margin-top:var(--s9)}
@media (max-width:640px){.block + .block{margin-top:var(--s8)}}
/* A block label needs to out-rank the tile headings inside the block, or the
   reader sees one flat field of bold grotesk. Size plus a rule does it without
   reaching for caps or an accent colour. */
.block > h3{
  font-size:1.22rem;letter-spacing:-0.008em;
  padding-top:var(--s5);border-top:1px solid var(--border-strong);
  margin-bottom:var(--s3);
}
.block-intro{color:var(--ink-soft);max-width:68ch;margin:0 0 var(--s6)}
.block > .bento,.block > .def-list,.block > .table-scroll{margin-top:var(--s5)}
.block > h3 + .bento,.block > h3 + .def-list,.block > h3 + .table-scroll{margin-top:var(--s6)}
.tile h4{font-size:1.02rem;line-height:1.32}

/* ---- definition list ----
   Three peer items with a term and a gloss are a list, not three cards. Term
   column left, gloss right, hairlines doing the separating. */
.def-list{margin:0}
.def-list > div{
  padding:var(--s5) 0;border-top:1px solid var(--border);
  display:grid;gap:var(--s2);
}
.def-list > div:last-child{border-bottom:1px solid var(--border)}
@media (min-width:760px){
  .def-list > div{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--s7);align-items:start}
}
.def-list dt{font-weight:600;color:var(--ink);letter-spacing:-0.004em}
.def-list dd{margin:0;color:var(--ink-soft);max-width:70ch}

/* Instrument Serif sets narrow, so 12ch clipped the two-word headings that
   used to fit. Measured against the real headings, not a guess. */
.lede-grid{gap:var(--s7)}
.lede-grid h2{max-width:16ch}
@media (min-width:900px){.lede-grid{gap:var(--s8)}}

/* ============================================================================
   Photography pass.

   Every photograph here arrived from a different camera, on a different day,
   at a different colour temperature. That is the whole reason a reader sees
   them as pasted onto the page rather than as part of it, and it is what the
   client was describing as "bland": nothing is wrong with any single picture,
   they just do not belong to each other. Two rules fix it, applied to every
   photo without exception.

   1. One grade. Luminance stays the photograph's, hue comes from the palette,
      so a ballpark, an archival trading floor and a glacier all end up on the
      same warm/cold axis the rest of the page already runs on. The grade is a
      `color` blend and not a tint layer on purpose: a tint flattens a picture,
      `color` keeps all of its structure and only rewrites what colour that
      structure is.
   2. No hard edge. A content photo dissolves into the band behind it instead
      of stopping dead at a rectangle.

   Both live in custom properties so a single photo cannot quietly drift out of
   the set by being adjusted on its own.
   ========================================================================= */
:root{
  --photo-grade:linear-gradient(198deg,rgba(217,104,58,.42) 0%,rgba(19,58,84,.74) 42%,rgba(13,32,46,.86) 100%);
  --photo-fade:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%);
}

.split-media,.banner,.text-break{position:relative;isolation:isolate}
/* page-hero-img is absolutely positioned by the rule above and must stay that
   way - giving it position:relative drops the photo back into normal flow and
   pushes the headline a thousand pixels down the page. */
.page-hero-img{isolation:isolate}
.split-media::after,.page-hero-img::after,.banner::after,
.text-break::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:var(--photo-grade);mix-blend-mode:color;
}
.split-media img,.page-hero-img img,.banner img,.text-break .bg{
  filter:saturate(.42) contrast(1.17) brightness(.93);
}

/* Explicit stacking inside every band that layers something over a photo:
   photo 0, grade 1, scrim 2, copy 3, credit 4. Without it the grade paints
   over the words, and the ember slab in the market band picks up a wash it
   was never meant to have. */
.text-break .bg,.banner img{z-index:0}
.text-break .scrim{z-index:2}
.text-break .wrap{z-index:3}
.text-break .photo-credit{z-index:4}
.banner .caption{position:relative;z-index:2}

/* Content photos dissolve rather than stop. The mask sits on the wrapper so
   the grade fades out with the picture; anything that has to stay crisp - a
   caption, a credit - belongs outside the wrapper, not inside it. */
.split-media{-webkit-mask-image:var(--photo-fade);mask-image:var(--photo-fade)}

/* The page heroes were the loudest version of the complaint. A photograph at
   28% opacity under a gradient that reaches solid navy by 92% is not a dark
   photograph, it is a navy rectangle with a smudge in it. The photo now runs
   at full strength and the wash is directional instead: heavy under the
   column the headline sits in, light enough on the far side that the picture
   is actually a picture. Contrast was re-run, not eyeballed - the compound
   transmittance under the copy is 0.09, which puts white at 7.5:1 and the
   0.8-alpha lede at 6.2:1. */
.page-hero-img{opacity:1;z-index:0}
.page-hero-img img{filter:saturate(.6) contrast(1.12) brightness(.96)}
.page-hero::after{
  z-index:1;
  background:
    linear-gradient(101deg,rgba(9,22,30,.95) 0%,rgba(9,22,30,.9) 44%,rgba(9,22,30,.68) 70%,rgba(15,34,49,.38) 100%),
    linear-gradient(180deg,rgba(15,34,49,.62) 0%,rgba(15,34,49,.12) 38%,rgba(15,34,49,.82) 100%);
}
.page-hero .wrap{z-index:2}
.page-hero .photo-credit{z-index:3}

/* ============================================================================
   Mobile pass.

   Everything below was sized against the desktop grid and then inherited
   straight down a phone without being re-asked. None of it is a new feature,
   all of it is a desktop decision that stopped being true once the columns
   stacked.
   ========================================================================= */
@media (max-width:900px){
  .split{gap:var(--s7)}
  /* A 4:5 portrait is 490px tall on a 390px phone: one photograph, one whole
     screen, before a word of the section it illustrates. Landscape once the
     picture no longer sits beside anything. */
  .split-media img{aspect-ratio:4/3}
  .split-media.wide img{aspect-ratio:16/9}
}
@media (max-width:960px){
  /* A 420px floor made sense while this was a column-height image. Stacked, it
     is just a tall crop of a skyline. */

}
@media (max-width:760px){
  /* svh, not vh: the mobile URL bar makes vh jump mid-scroll. The vh rule
     above stays as the fallback. */
  .hero{min-height:88svh}
  /* The panel is fixed to the top of the viewport, so on a short screen the
     last menu item had no way to be reached. */
  .nav-links{max-height:calc(100dvh - 64px);overflow-y:auto}
  .text-break{padding:var(--s9) 0}
  /* Pinned to the bottom-right corner, a two-line credit ran off the side of
     a narrow screen instead of wrapping. */
  .photo-credit{left:var(--s5);right:var(--s5);text-align:right}
}
@media (max-width:480px){
  /* The clamp floored at 3rem and stayed there, so "outperformance" - fourteen
     characters of a narrow serif - overflowed a 320px screen no matter how
     small the viewport got. */
  h1{font-size:clamp(2.35rem,10vw,5rem)}
  .fund-name{font-size:clamp(2.35rem,10vw,5rem)}
}
@media (max-width:380px){
  /* "Investor relations" is a long label for a 320px bar. At the smallest
     sizes it was crowding the logo and the menu toggle either side of it. */
  .nav-cta{padding:7px 9px;letter-spacing:.02em;margin-left:6px;gap:0}
}

/* ============================================================================
   Identity pass.

   Borrowed from the Hamilton Private Equity build, which the client reads as
   having the clearer identity. What travels is the *mechanics*, never the
   palette: Hamilton is near-black with a lime accent, and two sibling sites in
   the same sector sharing a colour family would read as one brand. Player Fund
   keeps its light Alpenglow surfaces and the navy/ember axis. What it takes
   from Hamilton is structure drawn by hairlines instead of implied by
   whitespace, a page surface with actual grain in it, and one accent used
   where the page speaks rather than only where it labels.
   ========================================================================= */

/* ---- grain ----
   A flat #ffffff band is the single most generic surface a screen can show.
   One fixed noise layer at 3% gives every light surface something to catch,
   costs one element and no requests, and is the cheapest available distance
   from a default page. Multiply, not Hamilton's overlay: overlay leaves pure
   white untouched, and white is exactly the surface that needed help here. */
body::after{
  content:'';position:fixed;inset:0;z-index:999;pointer-events:none;
  opacity:.032;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- hairline grid ----
   The principle lists were a gap plus a top rule per item, which reads as four
   things that happen to be near each other rather than one object. Drawing the
   gutters as rules turns the same content into a built grid.

   Rules come from borders on the cells, not from a 1px gap over a coloured
   background. The gap trick is the shorter way to write it and it bleeds: two
   1fr columns in a 1116px container are 557.5px each, so the background shows
   through at the fractional edge as a stray line down the right-hand side.
   Borders land on whole pixels and stay where they are put. */
.principles{display:grid;gap:0;border-top:1px solid var(--border-strong)}
.principle{border-top:0;padding:var(--s6) var(--s6) var(--s7)}
/* One ember rule per grid, on the first cell only. The accent earns more of the
   page this way than it did living in the focus ring. */
.principle:first-child{box-shadow:inset 0 2px 0 0 var(--ember)}

/* A heading and its body text were both 17px, so the cell had no internal
   hierarchy at all - the single biggest reason this section read as flat. */
.principle h3{font-size:1.18rem;margin-bottom:var(--s2)}
.principle p{font-size:.95rem;color:var(--ink-soft)}

@media (min-width:760px){
  .principles > :nth-child(2n){border-left:1px solid var(--border-strong)}
  .principles > :nth-child(n+3){border-top:1px solid var(--border-strong)}
  /* Outer columns drop their outer padding so text aligns to the container
     edge instead of sitting inset from it. Small detail, and most of why a
     drawn grid reads as built rather than as a row of boxes. */
  .principles > :nth-child(2n+1){padding-left:0}
  .principles > :nth-child(2n){padding-right:0}
}
@media (max-width:759px){
  .principles > :nth-child(n+2){border-top:1px solid var(--border-strong)}
  .principles > *{padding-left:0;padding-right:0}
}
/* Partner cards: bottom-anchor the CTA cluster so both cards' buttons land on
   one baseline regardless of body length, and give the CTA deliberate room to
   breathe above it instead of hugging the paragraph. */
.partners .principle{display:flex;flex-direction:column;height:100%}
.partners .partner-cta{margin-top:auto;padding-top:var(--s5);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}

/* ---- accent italic ----
   Hamilton lets one clause of a headline turn italic and take the accent.
   Instrument Serif has a real italic with far more slope than its roman, so
   the shift lands as a change of voice rather than a colour swap. Used where
   the sentence actually leans on a word; never as decoration on every heading. */
h1 em,h2 em,blockquote em{font-style:italic;color:var(--ember)}
.hero h1 em,.page-hero h1 em,.text-break em,.market-copy h2 em,
.band-summit h2 em{color:var(--ember-bright)}

/* ---- photo credits ----
   These were white at 72% with a live underline, which put a bright, busy
   little block in the corner of every photograph and pulled the eye straight
   to it. Down to 55% with the underline dropped to a hairline: still plainly a
   link, no longer competing with the picture. The shadow is not decoration -
   it guarantees separation where a credit lands on a bright patch of sky,
   which is what makes the lower alpha safe to use at all. */
.photo-credit{
  font-size:.75rem;color:rgba(255,255,255,.62);
  text-shadow:0 1px 10px rgba(9,22,30,.75);
}
.photo-credit a{
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28);
  padding-bottom:1px;transition:border-color .2s ease,color .2s ease;
}
.photo-credit a:hover,.photo-credit a:focus-visible{
  color:rgba(255,255,255,.92);border-bottom-color:rgba(255,255,255,.7);
}

/* The same job on a light band, under a framed photo. Deliberately quieter
   than .section-note, which carries information the reader may actually need. */
.credit{
  font-size:.76rem;line-height:1.5;color:var(--ink-faint);
  margin-top:var(--s3);max-width:60ch;
}
.credit a{color:inherit;text-decoration:none;border-bottom:1px solid var(--border-strong)}
.credit a:hover,.credit a:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}