@font-face{
  font-family:"Bodoni Moda";
  src:url(/fonts/bodoni-moda.woff2) format("woff2");
  font-weight:400;
  font-display:swap;
}

@font-face{
  font-family:"IBM Plex Sans";
  src:url(/fonts/ibm-plex-sans.woff2) format("woff2");
  font-weight:300 400;
  font-display:swap;
}

:root{
  --void:#080A0F;
  --basalt:#14181F;
  --slate:#242B35;
  --ash:#8A929E;
  --bone:#E6E4DF;
  --brass:#B99A5B;

  --display:"Bodoni Moda", Georgia, serif;
  --body:"IBM Plex Sans", system-ui, sans-serif;

  --gut:clamp(24px, 6vw, 96px);
  --max:1240px;
  /* left/right padding that lines full-width bars up with .shell content */
  --edge:max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;overflow-x:clip;}

body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--body);
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;}

:focus-visible{
  outline:1px solid var(--brass);
  outline-offset:4px;
}

/* ---------- nav ---------- */

.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:26px var(--edge);
  background:linear-gradient(180deg, rgba(8,10,15,.96) 40%, rgba(8,10,15,0));
}

.wordmark{
  font-family:var(--display);
  font-size:21px;
  letter-spacing:.05em;
  text-decoration:none;
  color:var(--bone);
}

.nav-links{
  display:flex;
  gap:32px;
}

.nav-links a{
  color:var(--ash);
  text-decoration:none;
  font-size:14px;
  font-weight:400;
  letter-spacing:.04em;
  transition:color .25s;
}

.nav-links a:hover,
.nav-links a[aria-current="page"]{color:var(--bone);}

/* the sign-in link to the strategy dashboard (its own site, behind a login) */
.nav-links .nav-dashboard{color:var(--brass);}
.nav-links .nav-dashboard:hover{color:var(--bone);}

.shell{
  padding:0 var(--gut);
  max-width:var(--max);
  margin:0 auto;
}

/* ---------- hero ---------- */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:120px;
  padding-bottom:80px;
}

.hero-copy{
  position:relative;
  z-index:2;
}

.hero h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(38px, 6.2vw, 76px);
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0 0 32px;
  max-width:14ch;
}

.lede{
  color:var(--ash);
  max-width:46ch;
  margin:0 0 40px;
  font-size:clamp(16px, 1.4vw, 19px);
}

/* ---------- the monolith ---------- */

.slab-field{
  position:absolute;
  z-index:1;
  top:0;
  right:calc(var(--gut) * -1 - 18px);
  pointer-events:none;
}

.slab-field::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:min(70vw, 640px);
  height:min(70vw, 640px);
  border-radius:50%;
  background:radial-gradient(circle, rgba(120,140,175,.10), transparent 68%);
  pointer-events:none;
}

.hero-backlight{
  position:absolute;
  inset:-12% -24%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(236deg,
    rgba(146,170,208,.17) 0%,
    rgba(146,170,208,.07) 26%,
    rgba(146,170,208,.02) 44%,
    transparent 62%);
  /* the box overhangs the hero; fade its lower edge so it never ends in a line */
  mask-image:linear-gradient(to bottom, #000 55%, transparent 88%);
}

.slab-cast{
  position:absolute;
  top:100%;
  right:-4px;
  width:clamp(190px, 58vw, 380px);
  height:clamp(90px, 17vh, 175px);
  background:linear-gradient(to bottom left, rgba(0,0,0,.97), rgba(0,0,0,.55) 34%, rgba(0,0,0,0) 72%);
  transform:skewX(-56deg);
  transform-origin:top right;
  filter:blur(12px);
  pointer-events:none;
}

.slab{
  background:linear-gradient(178deg, #1A202A 0%, #12161D 58%, #0B0E13 100%);
  box-shadow:
    inset -1px 0 0 rgba(230,228,223,.16),
    inset 1px 0 0 rgba(0,0,0,.6),
    0 70px 130px -50px rgba(0,0,0,.95);
}

.slab{
  position:relative;
  width:clamp(86px, 13vw, 158px);
  height:clamp(400px, 72vh, 660px);
  overflow:hidden;
}

.slab__light{
  position:absolute;
  inset:0;
  background:linear-gradient(270deg,
    rgba(230,228,223,.20),
    rgba(230,228,223,.02) 32%,
    transparent 62%);
  transition:background .45s ease-out;
  pointer-events:none;
}

.slab__seam{
  position:absolute;
  left:37%;
  top:0; bottom:0;
  width:1px;
  background:rgba(230,228,223,.10);
  pointer-events:none;
}

.slab__seam::after{
  content:"";
  position:absolute;
  left:-1px;
  width:3px;
  height:14%;
  background:linear-gradient(180deg, transparent, rgba(230,228,223,.75), transparent);
  filter:blur(.6px);
  animation:fall 9s cubic-bezier(.4,0,.5,1) 1.2s infinite;
}

@keyframes fall{
  0%{top:-14%; opacity:0;}
  9%{opacity:1;}
  64%{opacity:1;}
  100%{top:110%; opacity:0;}
}

/* ---------- the 3D scene (scene.js / app.js) ----------
   will-3d is set in <head> when the scene is expected to run, so the CSS slab
   never flashes first; has-3d once it has started. Without either, Home keeps
   the CSS slab above as its fallback. */

#scene{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:none;
  opacity:0;
  transition:opacity .8s ease-out;
}

.will-3d #scene{display:block;}
.has-3d #scene{opacity:1;}
.will-3d .slab-field,
.will-3d .hero-backlight{display:none;}

main,
footer{position:relative; z-index:1;}

/* text fades out as the camera leaves and back in as it arrives */
main{transition:opacity .35s ease;}
main.is-leaving,
main.is-entering{opacity:0;}
main.is-leaving{transition-duration:.2s;}

/* past the first screen the scene recedes so long pages stay readable
   (brightness, not opacity, so it doesn't override the fade-in above) */
@supports (animation-timeline:scroll()){
  .has-3d #scene{
    animation:recede linear both;
    animation-timeline:scroll(root);
    animation-range:0 100vh;
  }
  @keyframes recede{ from{filter:brightness(1);} to{filter:brightness(.35);} }
}

/* ---------- interior pages ---------- */

.page-head{
  padding-top:clamp(150px, 22vh, 260px);
  padding-bottom:clamp(60px, 10vh, 120px);
}

.page-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(34px, 5vw, 62px);
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 28px;
  max-width:16ch;
}

.page-head p{
  color:var(--ash);
  max-width:58ch;
  margin:0;
}

.rule{
  height:1px;
  background:var(--slate);
  border:0;
  margin:0;
}

.stack{
  padding:clamp(70px, 12vh, 130px) 0 clamp(90px, 16vh, 180px);
  display:flex;
  flex-direction:column;
  gap:clamp(64px, 11vh, 128px);
}

.belief h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(24px, 2.8vw, 34px);
  line-height:1.2;
  margin:0 0 18px;
  max-width:20ch;
}

.belief p{
  margin:0;
  color:var(--ash);
  max-width:62ch;
}

/* Alpha: the firm's thesis, set as statements rather than body copy */
.thesis{
  gap:clamp(32px, 5vh, 56px);
}

.thesis p{
  margin:0;
  font-family:var(--display);
  font-size:clamp(22px, 2.3vw, 29px);
  line-height:1.4;
  max-width:34ch;
}

/* ---------- home statements ---------- */

.tenets{
  padding:clamp(80px, 14vh, 160px) 0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(32px, 5vw, 72px);
  border-top:1px solid var(--slate);
}

.tenets p{
  margin:0;
  font-family:var(--display);
  font-size:clamp(20px, 2vw, 26px);
  line-height:1.3;
  max-width:18ch;
}

/* ---------- roles ---------- */

.roles{
  padding-bottom:clamp(80px, 14vh, 160px);
}

.role{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:start;
  padding:36px 0;
  border-top:1px solid var(--slate);
}

.role h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(21px, 2.2vw, 27px);
  margin:0 0 10px;
}

.role p{
  margin:0;
  color:var(--ash);
  max-width:52ch;
  font-size:16px;
}

.role span{
  color:var(--ash);
  font-size:13px;
  letter-spacing:.05em;
  white-space:nowrap;
  padding-top:6px;
}

.apply{
  padding:48px 0 0;
  border-top:1px solid var(--slate);
}

.apply p{
  color:var(--ash);
  max-width:56ch;
  margin:0 0 20px;
}

.apply a{
  color:var(--brass);
  text-decoration:none;
  border-bottom:1px solid rgba(185,154,91,.4);
  padding-bottom:2px;
  font-size:17px;
}

.apply a:hover{border-bottom-color:var(--brass);}

/* ---------- footer ---------- */

footer{
  border-top:1px solid var(--slate);
  padding:44px 0 56px;
  width:calc(min(var(--max), 100%) - 2 * var(--gut));
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  flex-wrap:wrap;
}

footer p{
  margin:0;
  color:var(--ash);
  font-size:13px;
}

footer .wordmark{font-size:16px;}

/* ---------- usage chart (Alpha) ---------- */

#usage{
  padding:clamp(60px, 10vh, 110px) 0 clamp(80px, 14vh, 160px);
}

.usage-lead{
  color:var(--ash);
  margin:0 0 40px;
  font-size:clamp(16px, 1.4vw, 19px);
}

.usage-chart{
  display:flex;
  align-items:flex-end;
  gap:clamp(8px, 2.4vw, 18px);
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:2px;
}

.bar{
  flex:0 0 clamp(46px, 9vw, 84px);
  min-width:0; /* else a long nowrap label widens its bar */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.bar:focus-visible{
  outline:1px solid var(--brass);
  outline-offset:4px;
}

.bar-val{
  color:var(--ash);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.bar-track{
  width:100%;
  height:180px;
  display:flex;
  align-items:flex-end;
}

/* Bars are small monoliths: the slab's material and lit right edge, a shade
   lighter so they read against the void. Values are printed above each bar,
   so the fill needn't carry the data alone. Brass marks only the bar under
   the pointer or focus, keeping it the rare accent. */
.bar-fill{
  width:100%;
  background:linear-gradient(178deg, #36404D, #232A34);
  box-shadow:inset -1px 0 0 rgba(230,228,223,.45);
  height:0;
  transition:height .5s cubic-bezier(.4,0,.2,1);
  transition-delay:calc(var(--i, 0) * 55ms);
}

.bar:hover .bar-fill,
.bar:focus-visible .bar-fill{background:var(--brass);}

.usage-chart.in .bar-fill{ height:var(--h, 0); }

.bar-name{
  color:var(--ash);
  font-size:12px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.usage-note{
  color:var(--ash);
  font-size:13px;
  margin:28px 0 0;
}

.usage-tip{
  position:fixed;
  z-index:60;
  pointer-events:none;
  background:var(--basalt);
  border:1px solid var(--slate);
  color:var(--bone);
  font-size:13px;
  line-height:1.5;
  padding:10px 12px;
  max-width:280px;
  white-space:pre-line;
  opacity:0;
  transition:opacity .12s;
}

.usage-tip.show{ opacity:1; }

/* ---------- responsive ---------- */

@media (min-width:861px){
  .slab-field{
    right:clamp(150px, 24%, 320px);
  }
  .hero-backlight{
    background:linear-gradient(236deg,
      rgba(146,170,208,.22) 0%,
      rgba(146,170,208,.09) 24%,
      rgba(146,170,208,.03) 42%,
      transparent 60%);
  }
  .hero-copy{padding-left:clamp(60px, 14%, 190px);}
  .hero h1{max-width:62%;}
}

@media (max-width:860px){
  .hero{padding-top:130px;}
  .slab-field{right:-22px;}
  .slab{
    width:clamp(100px, 30vw, 138px);
    height:clamp(420px, 78vh, 620px);
  }
  .hero h1{max-width:11ch;}
  .lede{max-width:22ch;}
  .tenets{grid-template-columns:1fr; gap:36px;}
  .role{grid-template-columns:1fr;}
  .role span{padding-top:0;}
  .nav{flex-wrap:wrap; row-gap:10px;}
  .wordmark{font-size:18px;}
  .nav-links{gap:14px;}

  /* full-width text on phones: a scrim keeps it clear of the scene
     (::after so it paints above the canvas and below main/footer) */
  .has-3d body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(8,10,15,.82), rgba(8,10,15,.2) 80%);
  }
}

@media (prefers-reduced-motion:reduce){
  .slab__seam::after{animation:none; opacity:0;}
  .slab__light{transition:none;}
  .bar-fill{transition:none;}
  *{transition-duration:.01ms !important;}
}