/* ─── RND Capital — home (index.html) styles ─── */
/* Loaded after base.css (tokens, resets, ::selection, reduced-motion, #cookie-banner). */

/* overflow-x:clip (not hidden) so position:sticky descendants still pin. */
body{overflow-x:clip}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-x)}

h1,h2,h3,h4{font-family:'Manrope',sans-serif;font-weight:400;color:var(--ink);letter-spacing:-.02em;line-height:1.06}
h1 em,h2 em,h3 em,h4 em{font-style:italic;color:var(--gold);font-weight:500}
p{color:var(--text-dim)}

/* ─── NAV — only the sticky bar + logo live here ─── */
nav{
  position:sticky;top:0;z-index:100;
  backdrop-filter:saturate(180%) blur(14px);
  background:rgba(246,250,255,.88);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-height)}
.logo{display:flex;align-items:center;height:64px}
.logo img{height:100%;width:auto;display:block}
/* Links, drawer, toggle and buttons are shared in base.css
   (incl. the @media(max-width:1140px) drawer breakpoint). */

/* ─── HERO ─── */
.hero{
  padding:143px 0 117px;position:relative;overflow:hidden;
  isolation:isolate;
}
.hero .container{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  column-gap:32px;
  align-items:start;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  /* JPG fallback first, then image-set lets modern browsers pick AVIF/WebP.
     Older browsers ignore the second line and stay on the JPG. */
  background:url('../rnd-capital-hero.jpg') center right / cover no-repeat;
  background-image:image-set(
    url('../rnd-capital-hero.avif') type('image/avif'),
    url('../rnd-capital-hero.webp') type('image/webp'),
    url('../rnd-capital-hero.jpg') type('image/jpeg')
  );
  filter:saturate(.78) contrast(1.04);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(95deg,
      rgba(246,250,255,.97) 0%,
      rgba(246,250,255,.94) 32%,
      rgba(246,250,255,.7) 56%,
      rgba(246,250,255,.4) 82%,
      rgba(246,250,255,.55) 100%),
    linear-gradient(180deg,
      rgba(246,250,255,.5) 0%,
      transparent 30%,
      rgba(246,250,255,.55) 100%);
}
@media (max-width:900px){
  .hero::before{background-position:center}
  .hero::after{
    background:linear-gradient(180deg,
      rgba(246,250,255,.92) 0%,
      rgba(246,250,255,.85) 50%,
      rgba(246,250,255,.9) 100%);
  }
}
.hero h1{
  grid-column:1 / span 6;
  grid-row:1;
  font-size:var(--type-display);font-weight:300;
  letter-spacing:-.035em;line-height:.93;
  color:var(--ink);max-width:1100px;
  /* No entrance animation — the H1 is the LCP element and any opacity
     fade pushes LCP by ~1.1s on Lighthouse mobile. */
}
.hero h1 em{font-style:italic;color:var(--gold);font-weight:400}
.hero-panel{
  grid-column:7 / -1;
  grid-row:1;
  align-self:end;
  margin-top:0;max-width:640px;
  margin-left:0;
  border-left:2px solid var(--gold);
  padding:6px 0 6px 28px;
  position:relative;
  animation:fade-up 1s cubic-bezier(.2,.7,.2,1) .22s both;
}
.hero-panel p{
  font-family:'Manrope',sans-serif;font-weight:300;
  font-size:var(--type-lead);line-height:1.5;letter-spacing:-.005em;
  color:var(--text);
}
.hero-panel p em{font-style:italic;color:var(--gold);font-weight:400}
@media (max-width:900px){
  .hero-panel{padding:4px 0 4px 20px;margin-top:36px;margin-left:0}
}
.hero-cta{
  grid-column:1 / span 6;
  grid-row:2;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:36px;
  animation:fade-up 1s cubic-bezier(.2,.7,.2,1) .34s both;
}
.text-link{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);font-weight:500;
  border-bottom:1px solid var(--ink);padding-bottom:6px;transition:all .25s;
}
.text-link:hover{color:var(--gold);border-color:var(--gold)}

@media (max-width:1000px){
  .hero{padding:104px 0 91px}
  .hero .container{display:block}
  .hero h1{font-size:clamp(34px, 9vw, 48px)}
}

/* ─── Scroll reveal: fade + slide from natural side as element enters viewport ─── */
[data-reveal]{
  opacity:0;
  transform:translate3d(0, 24px, 0);
  transition:
    transform 900ms cubic-bezier(.2,.7,.2,1),
    opacity 700ms ease-out;
  transition-delay:var(--reveal-delay, 0ms);
}
[data-reveal="left"]  { transform:translate3d(-32px, 0, 0); }
[data-reveal="right"] { transform:translate3d( 32px, 0, 0); }
[data-reveal].is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ─── INLINE FOUNDER QUOTE (inside #thesis) ─── */
.thesis-quote{
  display:grid;grid-template-columns:88px 1fr;gap:24px;
  align-items:center;
  max-width:900px;margin:0 0 clamp(64px, 7vw, 104px);
}
.founder-portrait{
  width:88px;height:88px;border-radius:50%;overflow:hidden;
  border:2px solid var(--gold);
  box-shadow:0 16px 32px -20px rgba(8,42,99,.25);
}
.founder-portrait img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.95) contrast(1.02);
}
.thesis-quote-body{min-width:0}
.thesis-quote blockquote{
  font-family:'Manrope',sans-serif;font-weight:300;font-style:italic;
  font-size:var(--type-lead);line-height:1.5;letter-spacing:-.005em;
  color:var(--ink);margin:0;
  border-left:2px solid var(--gold);
  padding:4px 0 4px 22px;
  max-width:760px;
}
.thesis-quote blockquote em{font-style:normal;color:var(--gold);font-weight:400}
.thesis-quote .attribution{
  margin:8px 0 0;padding-left:20px;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.thesis-quote .attribution-name{
  font-family:'Manrope',sans-serif;font-style:italic;font-weight:500;
  font-size:14px;color:var(--ink);letter-spacing:-.005em;
}
.thesis-quote .attribution-role{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-dim);font-weight:500;
}
@media (max-width:720px){
  .thesis-quote{grid-template-columns:1fr;gap:18px;margin-bottom:24px}
  .founder-portrait{width:72px;height:72px}
}

/* ─── GLOBAL — map on the left, stats stacked on the right, all on a navy band ─── */
#global{
  position:relative;
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--navy);color:var(--bg);
  /* Bottom padding gives the same inter-section gap as section{} (clamp matches
     the responsive section rhythm), kept navy so it reads as a deliberate band
     of space before Approach rather than the two sections butting together. */
  padding:clamp(40px,5vw,72px) 0 clamp(64px,10vw,140px);
}
/* Approach uses its own breathing room before the heading and after the cards. */
#approach{padding:240px 0 160px}
.global-grid{
  display:grid;
  /* Map takes the larger share; stats column has a comfortable minimum. */
  grid-template-columns:minmax(0, 1.6fr) minmax(280px, 1fr);
  gap:clamp(32px,5vw,80px);
  align-items:center;
  padding-right:clamp(24px,4vw,64px);
  min-height:clamp(360px,52dvh,540px);
}

.world-map{
  height:100%;width:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.world-map img{
  display:block;width:100%;height:100%;
  /* Fill the column edge to edge on the left side. */
  object-fit:cover;object-position:center;
}

/* Stats stacked vertically in the right column */
.global-stats{
  display:flex;flex-direction:column;
  gap:clamp(24px,2.6vw,36px);
  margin:0;padding:0;
}
.global-stat{
  padding:0 0 clamp(20px,2.4vw,28px);
  border-bottom:1px solid rgba(190,153,54,.22);
  text-align:left;
}
.global-stat:last-child{border-bottom:none;padding-bottom:0}
.global-stat-num{
  font-family:'Manrope',sans-serif;font-weight:300;
  font-size:clamp(32px,3.4vw,46px);letter-spacing:-.02em;line-height:1.05;
  color:var(--bg);margin:0 0 8px;
}
.global-stat-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--footer-text-2);font-weight:500;line-height:1.5;
  margin:0;
}
.global-stat-flags{display:flex;gap:8px;margin:2px 0 10px}
.global-stat-flags img{
  width:20px;height:20px;display:block;border-radius:50%;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.5);
}

@media (max-width:900px){
  .global-grid{
    grid-template-columns:1fr;gap:32px;
    padding:0 var(--container-x);
    min-height:0;
  }
  .world-map{height:clamp(220px,36vh,360px)}
  .global-stats{padding-top:0}
}

/* ─── SECTION COMMON ─── */
section{padding:140px 0;position:relative;scroll-margin-top:var(--nav-height)}
.section-head{max-width:840px;margin-bottom:80px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{
  font-size:var(--type-section);margin:28px 0 24px;font-weight:300;letter-spacing:-.028em;
}
.section-head p{font-size:var(--type-body);max-width:640px;line-height:1.55}
.section-head.center p{margin-left:auto;margin-right:auto}

/* ─── THESIS ─── */
#thesis{
  position:relative;overflow:hidden;isolation:isolate;
  /* More breathing room above the "We are…" h2, less below it before the
     founder quote / thesis grid. */
  padding:clamp(60px, 7vw, 100px) 0 24px;
}
#thesis .section-head{margin-bottom:clamp(24px, 3vw, 40px);max-width:none}
#thesis .section-head h2{
  margin-top:0;
  font-size:var(--type-section);
}
#thesis::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url('../rnd-capital-thesis-bg.jpg') center / cover no-repeat;
  background-image:image-set(
    url('../rnd-capital-thesis-bg.avif') type('image/avif'),
    url('../rnd-capital-thesis-bg.webp') type('image/webp'),
    url('../rnd-capital-thesis-bg.jpg') type('image/jpeg')
  );
  opacity:.18;
  filter:grayscale(.6) contrast(.85) blur(1.4px);
}
#thesis::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    var(--bg) 0%,
    rgba(246,250,255,.7) 20%,
    rgba(246,250,255,.7) 80%,
    var(--bg) 100%);
}
.thesis-grid{display:flex;flex-direction:column;gap:20px;margin-bottom:72px}
.thesis-grid > p{
  font-family:'Manrope',sans-serif;font-weight:300;
  font-size:var(--type-lead);line-height:1.55;
  letter-spacing:-.005em;color:var(--text);
  margin:0;
}
.thesis-hi{
  background:var(--gold);
  color:var(--gold-on-ink);
  padding:6px 14px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.typed-word{
  /* Keep the line from collapsing while chars==0 between cycles. */
  display:inline-block;min-width:.4em;
}
.typed-cursor{
  display:inline-block;
  width:.045em;height:.78em;
  background:var(--gold);
  margin-left:.06em;
  vertical-align:-.04em;
  animation:typed-blink 0.95s steps(1) infinite;
}
@keyframes typed-blink{
  0%,50%{opacity:1}
  51%,100%{opacity:0}
}
@media (max-width:1000px){
  .thesis-grid{gap:20px}
}

/* ─── GLOBAL HOURS ─── */
/* Tighten the gap that the surrounding sections' top/bottom padding contributes. */
#firm{padding-bottom:70px}
/* Top padding restored so the clock row doesn't collide with the bottom of
   the Approach section (whose padding is 0 by design). */
.hours{padding:clamp(32px, 4vw, 56px) 0 30px}
#philosophy{padding-top:70px;padding-bottom:60px}
.hours-grid{display:grid;grid-template-columns:.95fr 1.45fr;gap:80px;align-items:center}
.hours-text p{
  font-family:'Manrope',sans-serif;font-weight:300;
  font-size:var(--type-lead);
  letter-spacing:-.005em;line-height:1.55;
  color:var(--text);max-width:440px;margin:0;
}
.hours-text p em{font-style:italic;color:var(--gold);font-weight:400}
.clock-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:40px 24px;
}
.clock{text-align:center}
.clock-svg{width:92px;height:92px;display:block;margin:0 auto}
.clock-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-dim);margin-top:18px;font-weight:500;
}
.clock-svg .tick{fill:var(--text-mute);opacity:.6}
.clock-svg .tick-major{fill:var(--ink);opacity:.85}
.clock-svg .hand{stroke:var(--ink);stroke-linecap:round}
.clock-svg .hour-hand{stroke-width:2.4}
.clock-svg .minute-hand{stroke-width:1.6}
.clock-svg .second-hand{stroke:var(--red);stroke-width:.9}
.clock-svg .pivot{fill:var(--ink)}
@media (max-width:1000px){
  .hours-grid{grid-template-columns:1fr;gap:56px}
}
@media (max-width:760px){
  .clock-row{justify-content:flex-start;gap:40px 32px}
}
@media (max-width:480px){
  .clock-row{gap:32px 24px}
  .clock-svg{width:76px;height:76px}
}

/* ─── TECHNOLOGY (sticky-scroll, full-bleed image slides) ─── */
/* The live section is #approach (padding zeroed there); class names kept .tech-*.
   Outer track defines total scroll length. With sticky pin at 100vh, the
   extra scroll (track height − 100vh) is what advances the cards. We allow
   ~100vh per card → 500vh total for 5 cards. Earlier we used 300vh to keep
   the section short, but at that length a fast scroll would flash past each
   slide in 5–6 frames; readers couldn't tell Models from Engineering. With
   100vh per card, even a brisk scroll leaves each one on screen long enough
   to register the heading. */
.tech-track{height:500vh;position:relative}

/* Sticky pin container holds the viewport-sized stage + the progress rail. */
.tech-sticky{
  position:sticky;top:0;height:100vh;
  overflow:hidden;
}

.tech-stage{position:relative;width:100%;height:100%}

/* Each slide fills the stage; only the active one is visible. Slower fade so
   the visual change is still happening when a fast-scrolling reader's eye
   gets there — feels like a deliberate cross-dissolve, not a pop. */
.tech-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.1s ease;
  pointer-events:none;
}
.tech-slide.is-active{opacity:1;pointer-events:auto}

/* Full-bleed background image. */
.tech-slide-media{
  position:absolute;inset:0;overflow:hidden;
  background:var(--ink);
}
.tech-slide-media img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
  transform:scale(1.02);
  transition:transform 10s ease-out;
  /* Image only gently darkened — the rest of the legibility work happens
     in the scrim, which is now spotlit on the text area instead of blanketing
     the whole frame. */
  filter:saturate(.95) brightness(.85) contrast(1.04);
}
.tech-slide.is-active .tech-slide-media img{
  transform:scale(1.08);
}
/* Spotlight scrim: a strong dark ellipse sits over the bottom-left quadrant
   where the copy lives; the top + right of the photo stay mostly visible.
   A light overall vignette keeps the whole frame cohesive without crushing it. */
.tech-slide-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 75% 65% at 0% 100%,
      rgba(8,10,14,.92) 0%,
      rgba(8,10,14,.7) 35%,
      rgba(8,10,14,.3) 65%,
      transparent 85%),
    linear-gradient(180deg,
      rgba(8,10,14,.05) 0%,
      rgba(8,10,14,.18) 100%);
}

/* Copy block sits ON TOP of the image, anchored bottom-left. */
.tech-slide-body{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:flex-end;
  padding:clamp(40px, 6vw, 96px) clamp(24px, 6vw, 96px) clamp(60px, 7vw, 110px);
}
.tech-slide-inner{
  max-width:680px;
  transform:translateY(20px);
  opacity:0;
  transition:opacity 1.1s .2s ease, transform 1.1s .2s cubic-bezier(.2,.7,.2,1);
}
.tech-slide.is-active .tech-slide-inner{
  opacity:1;transform:translateY(0);
}

.tech-slide h3{
  font-family:'Manrope',sans-serif;font-weight:300;
  font-size:clamp(44px, 6vw, 88px);letter-spacing:-.028em;line-height:1;
  color:var(--bg);margin:0 0 24px;
  text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.tech-slide-body p{
  font-family:'Manrope',sans-serif;font-weight:300;
  font-size:clamp(17px, 1.5vw, 21px);line-height:1.5;letter-spacing:-.005em;
  color:rgba(244,236,208,.92);
  margin:0;max-width:54ch;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.tech-slide-more{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:28px;
  padding:12px 22px;
  font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--bg);background:var(--navy);
  transition:background .25s,color .25s,transform .25s;
}
/* hover guarded so the translateX doesn't stick on touch devices after a tap. */
@media (hover:hover){
  .tech-slide-more:hover{background:var(--gold);color:var(--gold-on-ink);transform:translateX(4px)}
}

/* Right-edge progress rail: each step is a fixed-width navy pill so the
   container shape stays identical no matter which label is showing. */
.tech-progress{
  position:absolute;
  right:clamp(20px, 3vw, 48px);top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:6px;
  z-index:3;
}
.tech-dot{
  display:flex;align-items:center;gap:14px;
  padding:11px 18px;
  width:200px;                /* fixed → shape doesn't shift per label */
  /* Inactive pill bg/text tuned so the 10.5px "01"/"02" label clears WCAG AA (4.5:1). */
  background:rgba(8,42,99,.72);
  color:rgba(246,250,255,.92);
  border:none;
  font-family:'JetBrains Mono',monospace;font-weight:500;
  text-align:left;cursor:pointer;
  position:relative;
  transition:background .3s ease, color .3s ease;
}
.tech-dot span{
  font-size:10.5px;letter-spacing:.22em;
  min-width:18px;color:inherit;
}
.tech-dot em{
  font-style:normal;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;
  color:inherit;
}
.tech-dot.is-active{
  background:var(--navy);
  color:var(--bg);
}
.tech-dot.is-active::before{
  content:"";position:absolute;
  left:0;top:0;bottom:0;
  width:2px;background:var(--gold-hi);
}
@media (hover:hover){
  .tech-dot:hover{
    background:rgba(8,42,99,.75);
    color:var(--bg);
  }
}

/* Mobile: track height intentionally left at the desktop 500vh on touch —
   flicks scroll even faster than desktop wheel, so the longer scroll-distance
   per slide helps more here, not less.
   Rail becomes a compact row at bottom-left: just numbered navy chips. */
@media (max-width:820px){
  .tech-slide-body{padding:32px 24px 80px}
  .tech-progress{
    right:auto;left:24px;top:auto;bottom:24px;
    transform:none;flex-direction:row;gap:6px;
  }
  .tech-dot{
    width:auto;min-width:44px;min-height:44px;
    padding:12px 14px;
    justify-content:center;
  }
  .tech-dot em{display:none}
}

/* Reduced motion: kill the slow zoom + transform animation. */
@media (prefers-reduced-motion: reduce){
  .tech-slide,
  .tech-slide-media img,
  .tech-slide-inner{
    transition:opacity .001ms !important;
    transform:none !important;
  }
}

/* ─── APPROACH — normal scrolling cards ─── */
.approach-section{
  background:var(--bg);
  padding:240px 0 160px;
}
.approach-head{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(280px, .7fr);
  gap:clamp(32px, 6vw, 96px);
  align-items:end;
  margin-bottom:112px;
}
.approach-head h2{
  font-family:'Manrope',sans-serif;
  font-size:var(--type-section);
  font-weight:300;
  letter-spacing:-.028em;
  line-height:1.05;
  color:var(--ink);
}
.approach-head h2 em{font-style:italic;color:var(--gold);font-weight:400}
.approach-head p{
  font-family:'Manrope',sans-serif;
  font-size:var(--type-lead);
  font-weight:300;
  line-height:1.55;
  color:var(--text);
  max-width:560px;
}
.approach-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
}
.approach-card{
  display:grid;
  grid-template-rows:auto 1fr;
  min-height:520px;
  background:var(--bg-2);
  border:1px solid var(--line);
  overflow:hidden;
}
.approach-media{
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--ink);
}
.approach-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter:saturate(.94) contrast(1.03);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.approach-copy{
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:22px;
}
.approach-copy span{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.22em;
  color:var(--gold);
}
.approach-copy h3{
  font-family:'Manrope',sans-serif;
  font-size:clamp(30px, 3.4vw, 48px);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--ink);
}
.approach-copy p{
  font-family:'Manrope',sans-serif;
  font-size:18px;
  font-weight:300;
  line-height:1.58;
  color:var(--text);
  max-width:48ch;
}
@media (hover:hover){
  .approach-card:hover .approach-media img{transform:scale(1.045)}
}
@media (max-width:900px){
  #approach{padding:168px 0 112px}
  .approach-section{padding:168px 0 112px}
  .approach-head{grid-template-columns:1fr;margin-bottom:72px}
  .approach-grid{grid-template-columns:1fr}
  .approach-card{min-height:0}
  .approach-copy{padding:26px}
}

/* ─── FIRM ─── */
.firm-grid{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(32px, 6vw, 120px);align-items:stretch}
.firm-grid .firm-mark{display:flex;align-items:stretch;justify-content:flex-start}
.firm-grid .firm-mark img{
  height:100%;width:auto;max-width:100%;
  object-fit:contain;object-position:left top;display:block;
  mix-blend-mode:multiply;
}
.firm-body h2{
  font-family:'Manrope',sans-serif;font-weight:300;
  font-size:var(--type-section);letter-spacing:-.028em;
  line-height:1.05;margin-bottom:36px;color:var(--ink);
}
.firm-body h2 em{font-style:italic;color:var(--gold);font-weight:400}
.firm-body p{
  font-family:'Manrope',sans-serif;font-weight:300;
  font-size:var(--type-lead);line-height:1.55;
  letter-spacing:-.005em;color:var(--text);margin-bottom:32px;
}
.firm-body p:last-child{margin-bottom:0}
.firm-body em{font-style:italic;color:var(--gold);font-weight:400}
@media (max-width:900px){
  .firm-grid{grid-template-columns:1fr;gap:32px}
  .firm-grid .firm-mark img{max-width:110px}
}

/* ─── HERO BAND (photographic) ─── */
.hero-band{
  width:100%;height:68dvh;min-height:480px;max-height:720px;
  background:var(--ink);overflow:hidden;position:relative;
}
.hero-band img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  filter:saturate(.92) contrast(1.05);
}
.hero-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,10,14,.78) 0%, rgba(8,10,14,.5) 38%, rgba(8,10,14,.15) 72%, rgba(8,10,14,.4) 100%),
    linear-gradient(180deg, rgba(8,10,14,.25) 0%, transparent 35%, rgba(8,10,14,.45) 100%);
}
@media (max-width:900px){
  .hero-band{height:48vh;min-height:340px}
}

/* ─── PHILOSOPHY ─── */
.philosophy-grid{
  display:grid;grid-template-columns:1.05fr 1fr;gap:80px;
  align-items:center;
}
.philosophy-body h2{
  font-family:'Manrope',sans-serif;font-weight:300;
  font-size:var(--type-section);letter-spacing:-.028em;
  line-height:1.05;margin-bottom:32px;color:var(--ink);
}
.philosophy-body h2 em{font-style:italic;color:var(--gold);font-weight:400}
.philosophy-body p{
  font-family:'Manrope',sans-serif;font-weight:300;
  font-size:var(--type-lead);line-height:1.55;
  letter-spacing:-.005em;color:var(--text);max-width:540px;
}
.philosophy-image{overflow:hidden}
.philosophy-image img{
  width:100%;height:auto;display:block;
  filter:saturate(.9) contrast(1.02);
}
@media (max-width:900px){
  .philosophy-grid{grid-template-columns:1fr;gap:40px}
}

/* "Find more →" CTA below the home philosophy lede — opens philosophy.html */
.philosophy-more{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:32px;padding:12px 22px;
  font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--bg);background:var(--navy);
  transition:background .25s,color .25s,transform .25s;
}
@media (hover:hover){
  .philosophy-more:hover{background:var(--gold);color:var(--gold-on-ink);transform:translateX(4px)}
}

/* ─── PEOPLE ─── */
/* padding tightened: was 140px top/bottom from the global section{} rule,
   which created a giant cream gap between #philosophy and #people. */
#people{background:var(--bg-2);padding:60px 0 90px}
#people .section-head{margin-bottom:40px}
.people-rows{
  display:flex;
  flex-direction:column;
  gap:32px;
  align-items:center;
  margin-top:24px;
}
.person-row{
  display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:center;
}
.person-row.reverse{grid-template-columns:1fr 1.4fr}
.person-row.text-only{
  grid-template-columns:minmax(0, 860px);
  justify-content:center;
  width:100%;
  max-width:860px;
  margin:0 auto;
}
.person-row.text-only .person-text p{max-width:760px}
.person-row.text-only .person-text{
  height:100%;
  padding:0;
  background:transparent;
  border:0;
  text-align:center;
  width:100%;
  max-width:760px;
  margin:0 auto;
}
.person-text h3{
  font-family:'Manrope',sans-serif;
  font-size:var(--type-mid);
  font-weight:400;letter-spacing:-.015em;line-height:1.1;
  margin-bottom:8px;color:var(--ink);
}
.person-text .role{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:28px;font-weight:500;
}
.person-text p{
  font-family:'Manrope',sans-serif;font-weight:300;
  font-size:clamp(17px, 1.45vw, 21px);line-height:1.65;
  letter-spacing:-.005em;color:var(--text);max-width:720px;
  margin-left:auto;
  margin-right:auto;
}
.person-text blockquote{
  font-family:'Manrope',sans-serif;font-weight:400;
  font-size:clamp(20px, 2vw, 28px);line-height:1.35;
  letter-spacing:-.01em;color:var(--ink);max-width:620px;
  margin:26px auto;padding:0;border-left:0;
}
/* Cap image height so the row fits in one viewport. Image fills the box via
   object-fit:cover; the aspect-ratio is constrained so portrait photos don't
   dominate vertically. */
.person-photo{
  overflow:hidden;
  height:clamp(360px, 55vh, 520px);
  align-self:center;
}
.person-photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  display:block;
  filter:saturate(.9) contrast(1.02);
}
@media (max-width:900px){
  .people-rows{gap:28px}
  .person-row,.person-row.reverse{grid-template-columns:1fr;gap:32px}
  .person-row .person-photo{order:-1}
  .person-row .person-text{order:0}
}

/* ─── FOOTER ─── */
footer{
  background:linear-gradient(180deg, var(--bg-2) 0%, #FFF 100%);
  color:var(--text);
  padding:100px 0 40px;
  border-top:1px solid var(--line);
}
footer .logo img{filter:none}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:64px;margin-bottom:72px}
.footer-brand p{font-size:13.5px;line-height:1.7;margin-top:24px;max-width:360px;color:var(--text-dim)}
.footer-brand p.footer-hq{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.7;
  letter-spacing:.02em;color:var(--text-dim);margin-top:20px;
}
.footer-hq-label{
  display:block;color:var(--gold);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;margin-bottom:8px;
}
.footer-col h4{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:24px;font-weight:600}
.footer-col ul{list-style:none;display:grid;gap:14px}
.footer-col a{font-size:13.5px;color:var(--ink);transition:color .2s}
.footer-col a:hover{color:var(--gold)}

/* Mid-zone fix: laptops + landscape tablets (901–1140) get a tighter footer + earlier hours/stats collapse, not the cramped 4-col desktop. */
@media (max-width:1140px){
  .footer-top{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px}
  section{padding:clamp(64px, 10vw, 140px) 0}
}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:32px}.footer-brand{grid-column:1/-1}}
@media (max-width:600px){.footer-top{grid-template-columns:1fr;gap:32px;margin-bottom:32px}footer{padding:64px 0 32px}}

/* ─── Hero entrance ─── */
@keyframes fade-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  .typed-cursor{animation:none;opacity:1}
}