/* =============================================================
   Five Stones Trading · fivestonestrading.com
   Web adaptation of design-system/tokens/tokens.css.
   Colors and fonts are canonical tokens; type sizes are scaled
   for screen reading.
   ============================================================= */

:root{
  /* -------- Surfaces & Lines (canonical) -------- */
  --bg:           #ffffff;
  --bg-2:         #fafaf6;
  --surface:      #fbf8ee;
  --surface-2:    #f6f3e8;
  --surface-3:    #f0ecdc;
  --line:         #d4cfc1;
  --line-soft:    #e7e2d3;

  /* -------- Ink (canonical) -------- */
  --text:         #141414;
  --ink:          #0e0e0e;
  --ink-soft:     #2a2824;
  --muted:        #6c6862;

  /* -------- Accent (canonical, use sparingly) -------- */
  --accent:       #9a7a2a;
  --accent-soft:  #b89c5a;
  --accent-deep:  #7a5e1a;

  /* -------- Typography stacks (canonical) -------- */
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* -------- Letter-spacing presets (canonical) -------- */
  --ls-tight:   -.005em;
  --ls-normal:   .005em;
  --ls-wide:     .18em;
  --ls-eyebrow:  .22em;
  --ls-loud:     .32em;
  --ls-loudest:  .42em;

  --maxw: 1140px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg-2); color:var(--text);
  font-family:var(--sans); font-weight:400;
  font-size:16px; line-height:1.65; letter-spacing:var(--ls-normal);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; }
a{ color:var(--accent-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }
strong{ font-weight:600; color:var(--ink); }

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

/* ---------------- Page-wide warm gradient ----------------
   Fixed behind all content so the warmth drifts through every
   section instead of stopping at the hero. */
.page-bg{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none; overflow:hidden;
}
.page-bg .blob{
  position:absolute; border-radius:50%;
  filter:blur(90px); will-change:transform;
}
.blob-1{
  width:56vw; height:56vw; right:-14vw; top:-14vw;
  background:var(--surface-3); opacity:.9;
  animation:drift-a 26s ease-in-out infinite alternate;
}
.blob-2{
  width:38vw; height:38vw; left:-12vw; top:36vh;
  background:var(--accent-soft); opacity:.14;
  animation:drift-b 32s ease-in-out infinite alternate;
}
.blob-3{
  width:30vw; height:30vw; right:8vw; bottom:-14vw;
  background:var(--surface-2); opacity:.85;
  animation:drift-c 22s ease-in-out infinite alternate;
}
@keyframes drift-a{
  from{ transform:translate(0,0) scale(1); }
  to{   transform:translate(-7vw,8vh) scale(1.12); }
}
@keyframes drift-b{
  from{ transform:translate(0,0) scale(1); }
  to{   transform:translate(6vw,-10vh) scale(1.18); }
}
@keyframes drift-c{
  from{ transform:translate(0,0) scale(1); }
  to{   transform:translate(-5vw,-6vh) scale(.9); }
}
@media (prefers-reduced-motion: reduce){
  .page-bg .blob{ animation:none; }
}

/* ---------------- Header / brand lockup ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,246,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-top:18px; padding-bottom:18px;
}
.brand{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.brand .icon{ height:34px; width:auto; display:block; }
.brand .sep{
  width:1px; align-self:stretch; background:#bcb6a5;
  margin:3px 0; flex-shrink:0; opacity:.85;
}
.brand .wordmark{
  display:inline-flex; flex-direction:column; justify-content:center;
  line-height:1; color:#1a1a1a;
}
.brand .wordmark .top{
  /* Same serif treatment as the hero firmline, scaled for the header */
  font-family:var(--serif); font-weight:600; font-size:16px;
  letter-spacing:.18em; color:#1a1a1a;
  white-space:nowrap;
}
.brand .wordmark .bot{
  display:flex; justify-content:space-between; align-items:center;
  font-weight:400; font-size:7px; letter-spacing:0; margin-top:6px;
  color:var(--muted); width:100%;
}
.site-nav{ display:flex; align-items:center; gap:34px; }
.site-nav a{
  font-size:10.5px; font-weight:500; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--muted);
  transition:color .15s ease;
  white-space:nowrap;
}
.site-nav a:hover{ color:var(--ink); text-decoration:none; }
.site-nav a.btn{ color:#ffffff; letter-spacing:var(--ls-eyebrow); }
.site-nav a.btn:hover{ color:#ffffff; }

.btn{
  display:inline-block; padding:13.5px 31.5px;
  background-color:var(--ink); color:#ffffff;
  font-size:10.5px; font-weight:600; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; border:1.5px solid var(--accent);
  border-radius:999px; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease;
}
.btn:hover{
  background-color:#2a2824; border-color:var(--accent-soft);
  text-decoration:none; color:#ffffff;
}
.btn--ghost{
  background:transparent; color:var(--ink);
  border:1px solid var(--line);
  padding:14px 32px; /* offsets the thinner border so footprint matches .btn */
}
.btn--ghost:hover{ background:var(--surface); border-color:var(--accent-soft); color:var(--ink); }
.site-nav .btn{ padding:10.5px 21.5px; }

/* ---------------- Hero ---------------- */
.hero{
  min-height:calc(100vh - 71px);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; pointer-events:none; }
.tess-bg{
  position:absolute; right:-6%; top:-4%;
  width:68%; height:108%;
}
.hero .wrap{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding-top:80px; padding-bottom:60px; width:100%;
}
.hero-inner{ position:relative; will-change:transform,opacity; }
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-areas:
    "mark visual"
    "copy visual";
  column-gap:72px; row-gap:0; align-items:center;
}
.hero-mark{ grid-area:mark; align-self:end; }
.hero-copy{ grid-area:copy; align-self:start; }
.hero-visual{ grid-area:visual; align-self:center; }
/* nowrap content in a column must clip to the column, not widen it */
.hero-grid > *{ min-width:0; }

/* Logo lockup: mark plus the firm line, sized to hold the space */
.hero-mark{
  display:flex; align-items:center; gap:26px; margin-bottom:42px;
}
.hero-logo{ height:80px; width:auto; display:block; }
.hero-firmline{
  display:flex; flex-direction:column; gap:9px;
  padding-left:26px; border-left:1px solid var(--line);
}
.hero-firmline .t1{
  /* Firmline display: uppercase + markup "Five Stones" → FIVE STONES.
     Alternate: markup "5 Stones" + uppercase → "5 STONES" (swap the HTML string only). */
  font-family:var(--serif); font-weight:500;
  font-size:41px; color:var(--ink);
  letter-spacing:.18em; text-transform:uppercase; line-height:1.1;
  white-space:nowrap;
}
.hero-firmline .t2{
  font-size:10px; font-weight:500; color:var(--accent);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  white-space:nowrap;
}

/* Polygonal image collage: five floating pentagon shards, each
   cropped onto the subject of its image, with negative space
   between them and tessellated linework continuing behind */
.hero-visual{
  position:relative; aspect-ratio:1/1; min-height:340px; max-height:560px;
  /* Perspective tilt sells the stone as a 3D object */
  transform:perspective(1400px) rotateX(7deg) rotateY(-10deg) rotateZ(-1deg);
  filter:drop-shadow(22px 34px 34px rgba(58,50,38,.24));
}
.hero-visual .shard{
  position:absolute; overflow:hidden;
}
.hero-visual .shard img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Faceted stone: a dodecahedron seen face-on. Center pentagon at
   radius 21 from (50,52), silhouette decagon at radius 44. Each
   facet is a positioned box with a local clip so its image crop
   centers on the subject. Lighting comes from the upper left. */
.hero-visual .shard::after{
  content:''; position:absolute; inset:0; pointer-events:none;
}
/* Center: option price C(S,t) */
.facet-center{
  left:30.03%; top:31%; width:39.94%; height:37.99%; z-index:2;
  clip-path:polygon(50% 0%, 99.9% 38.2%, 80.8% 100%, 19.2% 100%, 0.1% 38.2%);
}
.facet-center{ background:#0a0908; }
.facet-center canvas{ width:100%; height:100%; display:block; }
.facet-center::after{ background:linear-gradient(165deg, rgba(255,248,235,.1), transparent 40%, rgba(24,20,14,.22)); }
/* Top-left: stochastic vol surface (light, catches the light) */
.facet-tl{
  left:8.15%; top:8%; width:41.85%; height:37.51%;
  clip-path:polygon(52.3% 100%, 100% 61.3%, 100% 0%, 38.2% 22.4%, 0% 81%);
}
.facet-tl img{ object-position:50% 45%; }
.facet-tl::after{ background:linear-gradient(160deg, rgba(255,248,235,.5), transparent 65%); }
/* Top-right: ESM4 trading screen */
.facet-tr{
  left:50%; top:8%; width:41.85%; height:37.51%;
  clip-path:polygon(0% 61.3%, 47.7% 100%, 100% 81%, 61.8% 22.4%, 0% 0%);
}
.facet-tr img{ object-position:38% 42%; }
.facet-tr::after{ background:linear-gradient(205deg, rgba(255,248,235,.2), transparent 45%, rgba(24,20,14,.18)); }
/* Right: footprint delta table */
.facet-r{
  left:62.34%; top:38.4%; width:29.51%; height:49.2%;
  clip-path:polygon(25.9% 14.5%, 0% 62.2%, 45.8% 100%, 100% 55.3%, 100% 0%);
}
.facet-r img{ object-position:60% 45%; }
.facet-r::after{ background:linear-gradient(90deg, transparent 25%, rgba(24,20,14,.45)); }
/* Bottom: factor scatter */
.facet-b{
  left:24.14%; top:68.99%; width:51.72%; height:27.01%;
  clip-path:polygon(26.1% 0%, 73.9% 0%, 100% 68.9%, 50% 100%, 0% 68.9%);
}
.facet-b img{ object-position:50% 45%; }
.facet-b::after{ background:linear-gradient(180deg, transparent 15%, rgba(24,20,14,.5)); }
/* Left: correlation heatmap (light) */
.facet-l{
  left:8.15%; top:38.4%; width:29.51%; height:49.2%;
  clip-path:polygon(74.1% 14.5%, 100% 62.2%, 54.2% 100%, 0% 55.3%, 0% 0%);
}
.facet-l img{ object-position:45% 50%; }
.facet-l::after{ background:linear-gradient(100deg, rgba(255,248,235,.32), transparent 50%, rgba(24,20,14,.2)); }
/* Soft grounding shadow beneath the stone */
.hero-visual::before{
  content:''; position:absolute; left:16%; right:4%; bottom:-5%;
  height:12%;
  background:radial-gradient(ellipse at center, rgba(58,50,38,.14), transparent 68%);
  filter:blur(8px);
}
.hero-visual .tess{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.hero h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(40px, 4.8vw, 68px); line-height:1.06;
  letter-spacing:var(--ls-tight); color:var(--ink);
  margin:0 0 26px; max-width:15ch;
  min-height:2.2em; /* reserve two lines so the typewriter never shifts layout */
}
.cursor{
  display:inline-block; width:.05em; min-width:3px; height:.78em;
  background:var(--accent); margin-left:.09em;
  vertical-align:-.06em;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .cursor{ animation:none; }
}
.hero .lead{
  font-size:20px; line-height:1.6; color:var(--ink-soft);
  max-width:540px; margin:0 0 40px; font-weight:400;
}
.hero .cta-row{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.hero-facts{
  border-top:1px solid var(--line-soft);
  position:relative; background:rgba(251,248,238,.55);
}
.hero-facts .wrap{
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
  padding-top:28px; padding-bottom:30px;
}
.hero-facts .fact .k{
  font-family:var(--mono); font-size:9.5px; color:var(--accent);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  margin-bottom:8px;
}
.hero-facts .fact .v{
  font-family:var(--serif); font-size:19px; font-weight:500;
  color:var(--ink); line-height:1.3;
}

/* ---------------- Scroll reveal ---------------- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; }
.reveal.d2{ transition-delay:.24s; }
.reveal.d3{ transition-delay:.36s; }
.reveal.d4{ transition-delay:.48s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------------- Sections ---------------- */
.section{ padding:130px 0; }
.eyebrow{
  display:flex; align-items:baseline; gap:14px;
  font-size:10.5px; color:var(--accent); font-weight:600;
  letter-spacing:var(--ls-loud); text-transform:uppercase; margin:0 0 18px;
}
.eyebrow .n{ font-family:var(--mono); font-weight:400; color:var(--muted); letter-spacing:.06em; }
.section h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(34px, 4.4vw, 52px); line-height:1.1;
  letter-spacing:var(--ls-tight); color:var(--ink); margin:0 0 10px;
  max-width:20ch;
}
.section .rule{ height:1px; background:var(--accent); width:64px; margin:26px 0 34px; }
.section .lead{
  font-size:18px; line-height:1.65; color:var(--ink-soft);
  max-width:620px; margin:0 0 20px;
}
.section p{ max-width:620px; color:var(--ink-soft); }

/* ---------------- Firm ---------------- */
.firm-grid{
  display:grid; grid-template-columns:1.45fr 1fr; gap:80px; align-items:start;
}
.mission{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(24px, 2.8vw, 32px); line-height:1.3;
  letter-spacing:var(--ls-tight); color:var(--ink);
  margin:0 0 24px; max-width:22ch;
}
.principals{
  border-top:1px solid var(--ink);
  padding-top:26px;
}
.principals .label{
  font-family:var(--mono); font-size:9.5px; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--accent); margin-bottom:22px;
}
.principals .name{
  font-family:var(--serif); font-weight:500; font-size:26px;
  color:var(--ink); line-height:1.2;
}
.principals .role{
  font-size:9.5px; letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--muted); margin:5px 0 20px;
}
.entity-rows{ margin-top:10px; }
.entity-rows .row{
  display:flex; justify-content:space-between; gap:16px;
  padding:13px 0; border-top:1px solid var(--line-soft);
  font-size:13px;
}
.entity-rows .k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); padding-top:3px;
}
.entity-rows .v{ color:var(--ink); text-align:right; font-weight:500; }

/* ---------------- Faded imagery behind sections ---------------- */
.band, .contact-band{ position:relative; overflow:hidden; }
.band > .ghost, .contact-band > .ghost{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.12;
  filter:sepia(.35) saturate(.7) brightness(.9);
  pointer-events:none;
}
.band > .wrap, .contact-band > .wrap{ position:relative; }
.section--ghost{ position:relative; overflow:hidden; }
.section--ghost .ghost-side{
  position:absolute; top:50%; right:-4%; transform:translateY(-50%);
  width:min(52%, 640px); opacity:.14;
  filter:sepia(.5) saturate(.75);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(270deg, #000 55%, transparent 100%);
  mask-image:linear-gradient(270deg, #000 55%, transparent 100%);
}
.section--ghost .ghost-side--left{
  right:auto; left:-4%;
  -webkit-mask-image:linear-gradient(90deg, #000 55%, transparent 100%);
  mask-image:linear-gradient(90deg, #000 55%, transparent 100%);
}
/* Dark-background screens on light sections: invert to warm linework */
.section--ghost .ghost-side--invert{
  filter:invert(.92) sepia(.55) saturate(.6);
  mix-blend-mode:multiply; opacity:.3;
}
/* Cream-background artwork on cream sections (e.g. gem render behind Join):
   multiply melts the image's own cream field into the section background so
   only the gem's darker facets read, as faded linework */
.section--ghost .ghost-side--blend{
  mix-blend-mode:multiply; opacity:.2;
  filter:sepia(.25) saturate(.85);
}
.section--ghost > .wrap{ position:relative; }

/* ---------------- Dark statement band ---------------- */
.band{
  background:var(--ink); padding:110px 0; text-align:center;
}
.band .kicker{
  font-family:var(--mono); font-size:10px; color:var(--accent-soft);
  letter-spacing:var(--ls-loud); text-transform:uppercase; margin-bottom:30px;
}
.band p{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(26px, 3.4vw, 40px); line-height:1.35;
  color:var(--surface); margin:0 auto; max-width:26ch;
  letter-spacing:var(--ls-tight);
}
.band p em{ font-style:italic; color:var(--accent-soft); }
.band .rule{ height:1px; background:var(--accent); width:64px; margin:34px auto 0; }

/* ---------------- System flow ---------------- */
.flow{
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
  gap:24px; align-items:stretch; margin-top:34px;
}
.flow .stage{
  border-top:1px solid var(--line); padding-top:22px;
}
.flow .stage--accent{ border-top:2px solid var(--accent); }
.flow .stage .k{
  font-family:var(--mono); font-size:10px; color:var(--accent);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  margin-bottom:12px;
}
.flow .stage--accent .k{ color:var(--accent-deep); }
.flow .stage p{
  font-family:var(--serif); font-size:20px; font-weight:500;
  line-height:1.35; color:var(--ink); margin:0; max-width:none;
  letter-spacing:var(--ls-tight);
}
.flow-arrow{
  align-self:center; font-family:var(--sans); font-weight:300;
  font-size:26px; color:var(--accent); padding-top:18px;
}

/* ---------------- Five pillars ---------------- */
.pillars{
  display:grid; grid-template-columns:repeat(5,1fr); gap:36px;
  margin-top:26px;
}
.pillars .col{
  border-top:1px solid var(--line);
  padding-top:22px;
}
.pillars .col--accent{ border-top:2px solid var(--accent); }
.pillars .col .num{
  font-family:var(--serif); font-size:30px;
  color:var(--accent); font-weight:500; line-height:1;
  margin-bottom:14px;
}
.pillars .col--accent .num{ color:var(--accent-deep); }
.pillars .col .title{
  font-weight:600; font-size:10.5px;
  letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--ink);
  margin-bottom:12px;
}
.pillars .col--accent .title{ color:var(--accent-deep); }
.pillars .col .body{ font-size:13.5px; line-height:1.65; color:var(--ink-soft); }
.pillars .col .body strong{ color:var(--ink); font-weight:600; }
.pillars .col--accent .lead-line{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:16.5px; line-height:1.35; color:var(--ink);
  margin:0 0 10px; letter-spacing:-.002em;
}
.closer-line{
  margin-top:70px; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:22px;
  color:var(--ink-soft);
}
.closer-line strong{ font-style:normal; color:var(--accent-deep); font-weight:600; }

/* ---------------- Discipline ---------------- */
.discipline-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:26px;
}
.discipline-grid .item{
  border-top:1px solid var(--line);
  padding-top:24px;
}
.discipline-grid .item .idx{
  font-family:var(--mono); font-size:10px;
  color:var(--accent); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; margin-bottom:16px;
}
.discipline-grid .item h3{
  font-family:var(--serif); font-weight:500;
  font-size:24px; line-height:1.25; color:var(--ink); margin:0 0 14px;
  letter-spacing:var(--ls-tight);
}
.discipline-grid .item p{
  font-size:14px; line-height:1.65; color:var(--ink-soft); margin:0; max-width:none;
}

/* ---------------- Principals (people) ---------------- */
.people{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:26px;
}
.person{ display:flex; gap:28px; align-items:flex-start; }
/* Matted frame: warm surface mat, outer hairline, inner gold keyline.
   The soft warm shadow lifts the portrait off the drifting page-bg. */
.portrait{
  flex-shrink:0; width:168px; height:168px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface-2);
  border-radius:4px; padding:10px; position:relative;
  box-shadow:0 18px 40px -18px rgba(58,50,38,.35);
}
.portrait::after{
  content:''; position:absolute; inset:5px;
  border:1px solid var(--accent-soft); border-radius:3px;
  opacity:.55; pointer-events:none;
}
.portrait img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:2px;
  filter:sepia(.14) saturate(1.14) brightness(1.05) contrast(1.02);
}
.people--page{ grid-template-columns:1fr 1fr; gap:64px; margin-top:48px; }
.people--page .person{ flex-direction:column; gap:24px; }
.people--page .portrait{ width:200px; height:200px; }
.people--page .person-body p{ margin-bottom:12px; }
.people--page .person-body p:last-child{ margin-bottom:0; }
.portrait--placeholder{
  display:flex; align-items:center; justify-content:center;
}
.portrait--placeholder span{
  font-family:var(--serif); font-weight:500; font-size:52px;
  color:var(--accent-soft); letter-spacing:.06em;
}
.person-body h3{
  font-family:var(--serif); font-weight:500; font-size:27px;
  line-height:1.15; color:var(--ink); margin:0 0 6px;
  letter-spacing:var(--ls-tight);
}
.person-body .role{
  font-size:9.5px; font-weight:600; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
.person-body p{
  font-size:14px; line-height:1.7; color:var(--ink-soft); margin:0; max-width:none;
}

/* ---------------- Access ---------------- */
/* Cream sections melt into the page instead of sitting as solid slabs */
.section--cream{
  background:linear-gradient(180deg,
    rgba(246,243,232,0) 0%,
    rgba(246,243,232,.7) 16%,
    rgba(246,243,232,.7) 84%,
    rgba(246,243,232,0) 100%);
}
.access-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.access-steps{ counter-reset:step; margin:0; padding:0; list-style:none; }
.access-steps li{
  counter-increment:step; position:relative;
  padding:22px 0 22px 66px; border-top:1px solid var(--line-soft);
}
.access-steps li:last-child{ border-bottom:1px solid var(--line-soft); }
.access-steps li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute; left:0; top:22px;
  font-family:var(--serif); font-size:28px; font-weight:500;
  color:var(--accent); line-height:1;
}
.access-steps .step-title{
  font-weight:600; font-size:11px; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--ink); margin-bottom:5px;
}
.access-steps .step-body{ font-size:14px; color:var(--ink-soft); line-height:1.65; }

/* ---------------- Join / careers ---------------- */
#join h2{ max-width:16ch; }
.join-grid{
  display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:start;
}
.join-copy .join-lead{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(22px, 2.6vw, 28px); line-height:1.35;
  letter-spacing:var(--ls-tight); color:var(--ink);
  max-width:34ch; margin:0 0 22px;
}
.join-copy .join-pull{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(20px, 2.2vw, 24px); line-height:1.35;
  color:var(--accent-deep); letter-spacing:var(--ls-tight);
  margin:0 0 20px; max-width:28ch;
}
.join-copy > p:not(.join-lead):not(.join-pull){
  font-size:16px; line-height:1.7; color:var(--ink-soft);
  max-width:52ch; margin:0 0 8px;
}
.join-roles .role-item{
  border-top:1px solid var(--line);
  padding:22px 0 24px;
}
.join-roles .role-item:last-child{ border-bottom:1px solid var(--line); }
.join-roles .k{
  font-family:var(--mono); font-size:10px; color:var(--accent);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  margin-bottom:10px;
}
.join-roles p{
  font-family:var(--serif); font-weight:500;
  font-size:18px; line-height:1.4; color:var(--ink);
  margin:0; max-width:none; letter-spacing:var(--ls-tight);
}
/* FormSubmit honeypot: off-screen for bots; never shown to people */
.hp{
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Careers form: light variant of .contact-form for the cream Join section */
.join-form{
  margin-top:36px; max-width:440px;
  display:flex; flex-direction:column; gap:12px; text-align:left;
}
.join-form input[type="text"],
.join-form input[type="email"],
.join-form textarea{
  width:100%; padding:13px 18px;
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  border:1px solid var(--line); border-radius:10px;
  transition:border-color .15s ease;
}
.join-form textarea{ resize:vertical; min-height:96px; }
.join-form input::placeholder,
.join-form textarea::placeholder{ color:var(--muted); }
.join-form input:focus,
.join-form textarea:focus{
  outline:none; border-color:var(--accent-soft);
}
.join-form .btn{
  font-family:var(--sans); cursor:pointer;
  align-self:flex-start; margin-top:8px;
}

/* ---------------- FAQ ---------------- */
.faq{ max-width:780px; margin-top:10px; }
.faq details{ border-top:1px solid var(--line-soft); }
.faq details:last-child{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  cursor:pointer; list-style:none; position:relative;
  padding:26px 48px 26px 0;
  font-family:var(--serif); font-weight:500; font-size:23px;
  color:var(--ink); line-height:1.3; letter-spacing:var(--ls-tight);
  transition:color .15s ease;
}
.faq summary:hover{ color:var(--accent-deep); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:6px; top:50%;
  transform:translateY(-50%);
  font-family:var(--sans); font-weight:300; font-size:26px; color:var(--accent);
}
.faq details[open] summary::after{ content:'\2212'; }
.faq .answer{ padding:0 0 28px; font-size:15px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.faq .answer p{ margin:0 0 10px; max-width:none; }
.faq .answer p:last-child{ margin-bottom:0; }

/* ---------------- Contact (dark) ---------------- */
.contact-band{
  background:var(--ink); padding:130px 0; text-align:center;
}
.contact-band .eyebrow{
  justify-content:center; color:var(--accent-soft);
}
.contact-band .eyebrow .n{ color:#6c6862; }
.contact-band h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(36px, 4.6vw, 56px); line-height:1.1;
  letter-spacing:var(--ls-tight); color:var(--surface);
  margin:0 auto 22px; max-width:18ch;
}
.contact-band .lead{
  font-size:16.5px; line-height:1.65; color:#b9b4aa;
  max-width:520px; margin:0 auto 44px;
}
.btn--light{
  background:var(--surface); color:var(--ink); border-color:var(--surface);
}
.btn--light:hover{ background:#ffffff; color:var(--ink); }
.contact-form{
  max-width:440px; margin:0 auto;
  display:flex; flex-direction:column; gap:12px; text-align:left;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%; padding:13px 18px;
  background:transparent; color:var(--surface);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  letter-spacing:var(--ls-normal);
  border:1px solid var(--ink-soft); border-radius:10px;
  transition:border-color .15s ease;
}
.contact-form textarea{ resize:vertical; min-height:112px; }
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:var(--muted); }
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none; border-color:var(--accent-soft);
}
.contact-form .btn{
  font-family:var(--sans); cursor:pointer;
  align-self:center; margin-top:8px;
}

/* Accredited investor Yes/No pills on the dark contact form */
.choice-field{
  margin:6px 0 0; padding:0; border:0; min-width:0;
}
.choice-field legend{
  padding:0; margin:0 0 12px;
  font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:#b9b4aa;
}
.choice-pills{
  display:flex; gap:10px;
}
.choice-pill{
  flex:1; position:relative; cursor:pointer;
  margin:0;
}
.choice-pill input{
  position:absolute; opacity:0; width:1px; height:1px;
  margin:0; pointer-events:none;
}
.choice-pill span{
  display:block; text-align:center;
  padding:12px 18px;
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:#b9b4aa;
  border:1px solid var(--ink-soft); border-radius:999px;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.choice-pill:hover span{
  border-color:var(--accent-soft); color:var(--surface);
}
.choice-pill input:focus-visible + span{
  outline:2px solid var(--accent-soft);
  outline-offset:2px;
}
.choice-pill input:checked + span{
  background:var(--surface); color:var(--ink);
  border-color:var(--surface);
}
.choice-help{
  display:inline-block; margin-top:12px;
  font-size:12.5px; color:var(--accent-soft);
  text-decoration:none; border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
.choice-help:hover{
  text-decoration:none;
  border-bottom-color:var(--accent-soft);
}

.form-confirm{
  max-width:440px; margin:0 auto 24px;
  font-size:14px; color:var(--accent-soft);
}
.contact-band .email{
  margin-top:30px; font-family:var(--mono); font-size:14px;
  color:#8a857c; /* matches .response-promise small print on the dark band */
}
.contact-band .email a{ color:var(--accent-soft); }
.response-promise{
  margin-top:20px; font-size:10px; font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:#8a857c;
}

/* ---------------- Footer ---------------- */
.site-footer{ padding:64px 0 44px; background:var(--surface-2); }
.site-footer .cols{
  display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap;
  padding-bottom:30px; border-bottom:1px solid var(--line-soft);
}
.site-footer .cols--grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px;
  padding-bottom:40px;
}
.foot-brand p{
  margin:14px 0 0; font-size:12.5px; line-height:1.7;
  color:var(--muted); max-width:300px;
}
.foot-col{ display:flex; flex-direction:column; gap:12px; }
.foot-col .h{
  font-size:10px; font-weight:600; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--ink); margin-bottom:4px;
}
.foot-col a{
  font-size:12.5px; font-weight:400; letter-spacing:.02em;
  text-transform:none; color:var(--muted);
}
.foot-col a:hover{ color:var(--accent-deep); text-decoration:none; }
.site-footer .mark{
  font-size:10px; letter-spacing:var(--ls-loud); text-transform:uppercase;
  color:var(--accent); font-weight:600;
}
.site-footer nav{ display:flex; gap:26px; flex-wrap:wrap; }
.site-footer nav a{
  font-size:10px; font-weight:500; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--muted);
}
.site-footer nav a:hover{ color:var(--ink); text-decoration:none; }
.legal{
  margin-top:26px; font-size:11.5px; line-height:1.75;
  color:var(--muted); max-width:860px;
}
.legal p{ margin:0 0 8px; }
.copyright{
  margin-top:20px; font-size:9.5px; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--muted);
}

/* ---------------- Sticky mobile CTA ---------------- */
.mobile-cta{ display:none; }

/* ---------------- Interior pages (404, privacy) ---------------- */
.page-simple{ padding:110px 0 140px; min-height:56vh; }
.page-simple h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(38px, 5.4vw, 56px); line-height:1.08;
  letter-spacing:var(--ls-tight); color:var(--ink); margin:0 0 12px;
}
.page-simple .rule{ height:1px; background:var(--accent); width:64px; margin:24px 0 30px; }
.page-simple p{ max-width:640px; color:var(--ink-soft); }
.page-simple h2{
  font-family:var(--sans); font-weight:600; font-size:11.5px;
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--ink); margin:38px 0 10px;
}
.page-simple ul{ max-width:640px; color:var(--ink-soft); padding-left:20px; }
.page-simple li{ margin-bottom:7px; }
.updated{
  font-family:var(--mono); font-size:10px; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--muted); margin-bottom:30px;
}

/* ---------------- Responsive ---------------- */
/* Header: between the full desktop layout and the mobile breakpoint the
   nav pill and wide tracking do not fit next to the brand. The sticky
   mobile CTA (below 720) and the hero CTA carry the same action. */
@media (max-width: 1000px){
  .site-header .wrap{ gap:16px; }
  .site-nav{ gap:22px; }
  .site-nav .btn{ display:none; }
}
@media (max-width: 860px){
  .site-nav{ gap:16px; }
  .site-nav a{ font-size:10px; letter-spacing:.12em; }
}
/* Hero lockup: the nowrap firm line overflows its grid column once the
   two-column hero narrows; scale it down and let the tagline wrap. */
@media (max-width: 1150px){
  .hero-firmline .t1{ font-size:34px; }
  .hero-firmline .t2{ white-space:normal; }
}
@media (max-width: 1020px){
  .pillars{ grid-template-columns:repeat(3,1fr); gap:30px; }
  .discipline-grid{ grid-template-columns:1fr; gap:36px; }
  .firm-grid, .access-grid{ grid-template-columns:1fr; gap:56px; }
  .people{ grid-template-columns:1fr; gap:48px; }
  .join-grid{ grid-template-columns:1fr; gap:48px; }
  .site-footer .cols--grid{ grid-template-columns:1fr 1fr; }
}
/* Tablet: single column, stone still after copy (desktop reading order).
   Phone breakpoint below moves the stone under the firmline. */
@media (max-width: 960px){
  .hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "mark"
      "copy"
      "visual";
    row-gap:40px; column-gap:0;
  }
  .hero-mark{ margin-bottom:0; align-self:start; }
  .hero-visual{
    max-width:480px; margin:0 auto; width:100%;
    min-height:320px;
  }
}
@media (max-width: 720px){
  .site-nav{ display:none; }
  .wrap{ padding:0 22px; }
  .hero{ min-height:auto; overflow:visible; }
  .hero-inner{ will-change:auto; }
  .hero .wrap{ padding-top:36px; padding-bottom:48px; justify-content:flex-start; }
  /* Mobile order: firm lockup → stone → typewriter / lead / CTAs */
  .hero-grid{
    grid-template-areas:
      "mark"
      "visual"
      "copy";
    row-gap:28px;
  }
  .hero-logo{ height:56px; }
  .hero-mark{ gap:14px; margin-bottom:0; }
  .hero-firmline{ padding-left:14px; gap:7px; }
  .hero-firmline .t1{
    font-size:clamp(26px, 8vw, 32px);
    letter-spacing:.14em; white-space:nowrap;
  }
  .hero-firmline .t2{
    /* Full available width + balanced wrap so the tagline breaks cleanly
       at the separators instead of clipping mid-phrase */
    font-size:9px; letter-spacing:.16em; white-space:normal;
    max-width:none; text-wrap:balance; line-height:1.7;
  }
  .hero-visual{
    width:100%; max-width:none; min-height:320px;
    aspect-ratio:1/1; margin:4px auto 8px;
    /* Slightly less tilt on narrow screens so facets stay readable */
    transform:perspective(1200px) rotateX(5deg) rotateY(-7deg) rotateZ(-.5deg);
  }
  .hero h1{
    font-size:clamp(34px, 9vw, 48px);
    min-height:2.2em; margin-bottom:18px;
  }
  .hero .lead{ font-size:17px; margin-bottom:28px; }
  /* Sticky bar is the intro CTA on phone; keep the secondary ghost only */
  .hero-cta-intro{ display:none; }
  .tess-bg{ display:none; }
  .section--ghost .ghost-side{ display:none; }
  .hero-facts .wrap{ grid-template-columns:1fr; gap:20px; padding-top:22px; padding-bottom:24px; }
  .section{ padding:80px 0; }
  .band, .contact-band{ padding:88px 0; }
  .pillars{ grid-template-columns:1fr; gap:28px; }
  .flow{ grid-template-columns:1fr; gap:22px; }
  .flow-arrow{ display:none; }
  .person{ flex-direction:column; }
  .site-footer .cols--grid{ grid-template-columns:1fr; gap:32px; }
  #join h2{ font-size:clamp(32px, 8vw, 44px); max-width:18ch; }
  .join-copy .join-lead{ font-size:24px; }
  .join-copy .join-pull{ font-size:21px; }
  .join-roles p{ font-size:17px; }
  body{ padding-bottom:64px; }
  .mobile-cta{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--ink); color:#ffffff;
    align-items:center; justify-content:center;
    padding:17px; font-size:10.5px; font-weight:600;
    letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
    border-top:1px solid var(--accent);
  }
  .mobile-cta:hover{ text-decoration:none; color:#ffffff; }
}

/* ---------------- Header dropdown menu ----------------
   "Menu" trigger in .site-nav exposing the footer link groups on
   every page. Hover-open on fine pointers, click/tap toggle via
   .open (tiny inline script per page). Placed at end of file so
   the mobile overrides win over the 720px .site-nav rules above. */
.nav-menu{ position:relative; }
.nav-menu-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--sans);
  font-size:10.5px; font-weight:500; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--muted);
  transition:color .15s ease;
}
.nav-menu-btn:hover{ color:var(--ink); }
.nav-menu-btn:focus-visible{
  outline:2px solid var(--accent-soft); outline-offset:4px;
  border-radius:3px; color:var(--ink);
}
.nav-menu-btn .chev{
  width:9px; height:6px; flex-shrink:0;
  transition:transform .18s ease;
}
.nav-menu.open .nav-menu-btn .chev{ transform:rotate(180deg); }
.nav-menu-panel{
  position:absolute; right:-6px; top:calc(100% + 14px);
  width:264px;
  background:rgba(250,250,246,.98);
  border:1px solid var(--line-soft); border-radius:10px;
  box-shadow:0 18px 44px -16px rgba(58,50,38,.35), 0 2px 10px rgba(58,50,38,.08);
  padding:20px 24px 22px;
  max-height:calc(100vh - 110px); overflow:auto;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-menu.open .nav-menu-panel{
  opacity:1; visibility:visible; transform:none;
}
/* Invisible strip bridging the gap between trigger and panel so the
   hover chain survives the traverse. Only present while relevant. */
.nav-menu:hover::after,
.nav-menu.open::after{
  content:""; position:absolute;
  left:-14px; right:-14px; top:100%; height:16px;
}
@media (hover:hover) and (pointer:fine){
  .nav-menu:hover .nav-menu-panel{
    opacity:1; visibility:visible; transform:none;
  }
}
.nav-menu-panel .group + .group{
  margin-top:15px; padding-top:15px;
  border-top:1px solid var(--line-soft);
}
.nav-menu-panel .h{
  font-size:9px; font-weight:600; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--accent);
  margin-bottom:7px;
}
.nav-menu-panel a{
  display:block; padding:5.5px 0;
  font-size:13.5px; font-weight:500;
  letter-spacing:var(--ls-normal); text-transform:none;
  color:var(--ink-soft); white-space:normal;
}
.nav-menu-panel a:hover{ color:var(--accent-deep); text-decoration:none; }
.nav-menu-panel a:focus-visible{
  outline:2px solid var(--accent-soft); outline-offset:2px;
  border-radius:3px;
}
@media (max-width: 720px){
  /* Re-enable the nav on phones: only the Menu trigger shows, so the
     wordmark keeps its room and the sticky bottom CTA carries the
     primary action. */
  .site-nav{ display:flex; }
  .site-nav > a{ display:none; }
  .nav-menu-btn{
    border:1px solid var(--line); border-radius:999px;
    padding:8px 15px; background:rgba(255,255,255,.6);
    color:var(--ink-soft);
  }
  .nav-menu-panel{
    right:0; width:min(320px, calc(100vw - 44px));
    max-height:calc(100vh - 170px);
  }
}