:root{
    --red:#ED1C24;
    --black:#0B0B0C;
    --panel:#141315;
    --panel-2:#1C191B;
    --line:rgba(255,255,255,.10);
    --line-soft:rgba(255,255,255,.055);
    --text:rgba(255,255,255,.88);
    --muted:rgba(255,255,255,.58);
    --faint:rgba(255,255,255,.34);
    --gut:clamp(22px,5.5vw,72px);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;background:var(--black)}
  body{background:var(--black);color:var(--text);
    font-family:'Archivo',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
    font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  ::selection{background:var(--red);color:#fff}
  a{color:inherit;text-decoration:none}
  img,svg{max-width:100%;display:block}
  :focus-visible{outline:2px solid var(--red);outline-offset:3px}
  h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif;font-stretch:115%;text-wrap:balance;letter-spacing:-.018em;font-weight:700}

  .wrap{max-width:1240px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
  .eyebrow{color:var(--red);font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;font-weight:600;font-stretch:100%}
  .rule{width:48px;height:2px;background:var(--red);margin:18px 0 26px}
  section{padding-block:clamp(60px,7vw,112px);position:relative}
  .sec-head{display:grid;grid-template-columns:1fr 1.45fr;gap:clamp(26px,5vw,88px);align-items:start;margin-bottom:clamp(34px,4vw,56px)}
  .sec-head h2{font-size:clamp(29px,3.9vw,54px);line-height:1.06;color:#fff}
  .lede{color:var(--muted);font-size:clamp(16px,1.35vw,18px);line-height:1.82;max-width:58ch}
  .lede + .lede{margin-top:18px}
  @media(max-width:900px){.sec-head{grid-template-columns:1fr}}

  /* NAV */
  nav{position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(11,11,12,.72);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-soft);
    transition:background .35s ease;padding-top:env(safe-area-inset-top,0px)}
  nav.scrolled,nav.open{background:rgba(11,11,12,.96)}
  .nav-in{max-width:1240px;margin:0 auto;padding:16px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:20px}
  .nav-logo img{height:24px;width:auto}
  .nav-links{display:flex;gap:clamp(11px,1.9vw,30px);align-items:center;flex:1 1 auto;justify-content:flex-end;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0;min-width:0}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{flex:0 0 auto}
  .nav-cta{flex:0 0 auto}
  .nav-links a{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);transition:color .25s;white-space:nowrap}
  .nav-links a:hover{color:#fff}
  .nav-cta{border:1px solid var(--red);color:#fff !important;padding:9px 20px;transition:background .25s;
    font-size:10.5px;letter-spacing:.17em;text-transform:uppercase}
  .nav-cta:hover{background:var(--red)}
  @media(max-width:1000px){
    /* only the right edge fades, so the first label is never clipped */
    .nav-links{justify-content:flex-start;
      -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
              mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
    .nav-links a{font-size:10px;letter-spacing:.14em}
    .nav-cta{padding:8px 14px;font-size:10px;letter-spacing:.14em}
  }
  @media(max-width:560px){
    .nav-logo img{height:19px}
    .nav-in{padding:13px var(--gut);gap:14px}
  }

  /* HERO */
  .hero{position:relative;min-height:clamp(600px,88vh,900px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding-block:0}
  .hero-media{position:absolute;inset:0;z-index:0}
  .hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.8) contrast(1.06)}
  .hero-media video{z-index:1}
  .hero::after{content:"";position:absolute;inset:0;z-index:2;
    background:linear-gradient(180deg,rgba(11,11,12,.62) 0%,rgba(11,11,12,.16) 40%,rgba(11,11,12,.88) 84%,var(--black) 100%)}
  .hero-in{position:relative;z-index:3;padding:126px var(--gut) 86px;max-width:1020px;margin:0 auto}
  .hero-logo{height:clamp(46px,6.4vw,84px);width:auto;margin:0 auto 40px;filter:drop-shadow(0 6px 34px rgba(0,0,0,.85))}
  .hero h1{font-size:clamp(32px,5.1vw,68px);line-height:1.04;color:#fff;text-shadow:0 2px 46px rgba(0,0,0,.85)}
  .hero h1 em{font-style:normal;color:var(--red)}
  .hero p{margin:28px auto 0;max-width:60ch;color:rgba(255,255,255,.8);font-size:clamp(15px,1.5vw,18px);line-height:1.78;text-shadow:0 1px 22px rgba(0,0,0,.9)}
  .hero-tag{margin-top:40px;color:rgba(255,255,255,.74);font-size:clamp(9.5px,1.1vw,11.5px);letter-spacing:.36em;text-transform:uppercase;font-weight:500}

  /* OUR WHY */
  .why{text-align:center;border-bottom:1px solid var(--line-soft)}
  .why .eyebrow{display:block;margin-bottom:28px}
  .why blockquote{font-stretch:115%;font-size:clamp(26px,4.4vw,62px);font-weight:700;line-height:1.14;
    color:#fff;max-width:19ch;margin:0 auto;letter-spacing:-.025em}
  .why blockquote em{font-style:normal;color:var(--red)}

  /* COLUMN SYSTEM */
  .cols{display:grid;grid-template-columns:repeat(3,1fr);
    column-gap:clamp(28px,3.6vw,60px);row-gap:clamp(32px,3.4vw,48px)}
  .col{border-top:1px solid var(--line);padding-top:24px}
  .col h3{font-size:18.5px;color:#fff;font-weight:600;letter-spacing:-.01em}
  .col.lg h3{font-size:clamp(21px,2.2vw,28px);font-weight:700;letter-spacing:-.018em}
  .col p{color:var(--muted);font-size:14.5px;line-height:1.78;margin-top:12px}
  .col .flag{display:inline-block;color:var(--red);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
    font-weight:700;font-stretch:100%;border:1px solid rgba(237,28,36,.42);padding:4px 9px;margin-bottom:14px}
  .cols.two{grid-template-columns:repeat(2,1fr)}
  /* two up, the third centred beneath: the triad reads as a shape, not a leftover */
  .cols.pyramid{grid-template-columns:repeat(4,1fr)}
  .cols.pyramid>.col{grid-column:span 2}
  .cols.pyramid>.col:last-child{grid-column:2 / span 2}
  @media(max-width:920px){.cols{grid-template-columns:repeat(2,1fr)}
    .cols.pyramid{grid-template-columns:repeat(2,1fr)}
    .cols.pyramid>.col,.cols.pyramid>.col:last-child{grid-column:auto}}
  @media(max-width:600px){.cols,.cols.two{grid-template-columns:1fr}}

  .proof{margin-top:clamp(30px,3.4vw,44px);border-left:2px solid var(--red);padding:4px 0 4px 26px;
    color:var(--muted);font-size:15.5px;line-height:1.82;max-width:66ch}
  .proof b{color:#fff;font-weight:600}
  .disclosure{margin-top:28px;color:var(--faint);font-size:12px;line-height:1.85;max-width:80ch}

  /* COMPANIES */
  .support{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
  .co{background:var(--black);padding:clamp(26px,2.6vw,38px);min-height:276px;display:flex;flex-direction:column;
    position:relative;overflow:hidden;transition:background .35s}
  .co::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);
    transform:scaleY(0);transform-origin:top;transition:transform .4s ease}
  .co:hover{background:var(--panel)}
  .co:hover::before{transform:scaleY(1)}
  /* LOGO SLOT: swap .lockup for <img class="colg" src="logos/name.svg" alt="Name"> */
  .co .logobox{height:96px;display:flex;align-items:center;margin-bottom:18px}
  /* One wall, one weight: every single colour mark sits white at rest and resolves
     to its own brand colour on hover. Gold Drop is two tone, so it keeps its colour. */
  .co .colg{max-height:58px;max-width:100%;width:auto;filter:brightness(0) invert(1);
    opacity:.88;transition:filter .35s ease,opacity .35s ease}
  .co:hover .colg{filter:none;opacity:1}
  .co .colg.tall{max-height:80px}
  .co .colg.stacked{max-height:94px}
  .co .colg.color{filter:none;opacity:.94}
  .co:hover .colg.color{opacity:1}
  .co .lockup{font-stretch:108%;font-weight:400;color:#fff;font-size:17px;line-height:1.5;
    letter-spacing:.17em;text-transform:uppercase;opacity:.9}
  .co .lockup i{font-style:normal;color:var(--red)}
  .co .cat{color:var(--faint);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase}
  .co p{color:var(--muted);font-size:14px;line-height:1.7;flex:1;margin-top:12px}
  .co .go{margin-top:20px;color:var(--red);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600}
  .co .go span{display:inline-block;transition:transform .3s}
  .co:hover .go span{transform:translateX(5px)}
  @media(max-width:1000px){.support{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.support{grid-template-columns:1fr}}

  /* INVESTMENTS */
  .inv-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
  .inv{background:var(--black);min-height:136px;display:flex;align-items:center;justify-content:center;
    padding:26px 20px;text-align:center;transition:background .35s}
  .inv:hover{background:var(--panel)}
  .inv img{max-height:44px;width:auto;margin:0 auto;filter:grayscale(1) brightness(1.9);opacity:.6;transition:opacity .3s,filter .3s}
  .inv:hover img{opacity:1;filter:grayscale(0) brightness(1)}
  .inv .wordmark{font-stretch:115%;font-weight:600;font-size:clamp(14px,1.3vw,17px);color:var(--muted);line-height:1.35;transition:color .3s}
  .inv:hover .wordmark{color:#fff}
  .inv.slot .wordmark{color:var(--faint);font-weight:400;font-stretch:100%;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
  @media(max-width:900px){.inv-wall{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:560px){.inv-wall{grid-template-columns:repeat(2,1fr)}}

  /* LEADERSHIP */
  .lead-note{color:var(--muted);font-size:clamp(16px,1.35vw,18px);line-height:1.86;max-width:58ch}
  .lead-note strong{color:#fff;font-weight:600}
  .lead-note p+p{margin-top:18px}
  .bench{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
    border:1px solid var(--line-soft);margin-top:clamp(34px,3.8vw,52px)}
  .pc{background:var(--black);transition:background .35s}
  .pc:hover{background:var(--panel)}
  .pc .frame{position:relative;aspect-ratio:4/5;background:var(--panel-2);overflow:hidden;border-bottom:1px solid var(--line-soft)}
  /* Headshots are converted and value matched at source; grayscale() guards future uploads. */
  .pc .frame img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(1)}
  .pc .frame::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(11,11,12,.32) 0%,rgba(11,11,12,0) 26%,rgba(11,11,12,0) 58%,rgba(11,11,12,.7) 100%)}
  .pc .frame .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(160deg,var(--panel-2) 0%,#131113 100%);
    font-stretch:115%;font-weight:700;font-size:clamp(30px,3.6vw,48px);color:rgba(255,255,255,.13);letter-spacing:.04em}
  .pc.open .frame .ph{background:repeating-linear-gradient(135deg,#151315 0 9px,#111011 9px 18px)}
  .pc.open .frame .ph i{font-style:normal;width:34px;height:34px;border:1px solid rgba(237,28,36,.45);border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:var(--red);font-size:20px;font-weight:400}
  .pc .in{padding:20px clamp(18px,1.8vw,26px) 28px}
  .pc .bar{width:22px;height:2px;background:var(--red);margin-bottom:14px;transition:width .35s}
  .pc:hover .bar{width:46px}
  .pc h4{color:#fff;font-size:17px;font-weight:600;font-stretch:112%;letter-spacing:-.01em}
  .pc .ttl{color:var(--faint);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:8px;line-height:1.7}
  .pc .chip{display:inline-block;margin-top:14px;color:var(--red);font-size:9px;letter-spacing:.22em;
    text-transform:uppercase;font-weight:700;font-stretch:100%;border:1px solid rgba(237,28,36,.42);padding:3px 8px}
  .bench-note{margin-top:26px;color:var(--faint);font-size:13px;line-height:1.85;max-width:74ch}
  @media(max-width:900px){.bench{grid-template-columns:repeat(2,1fr)}}

  /* HOME BASE */
  .nash{position:relative;min-height:380px;display:flex;align-items:center;padding-block:0;
    background-size:cover;background-position:center;background-repeat:no-repeat}
  .nash::before{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(11,11,12,.96) 0%,rgba(11,11,12,.78) 52%,rgba(11,11,12,.46) 100%)}
  .nash .wrap{position:relative;z-index:2;padding-block:clamp(64px,7vw,96px)}
  .nash h2{font-size:clamp(28px,3.9vw,52px);color:#fff;line-height:1.06;max-width:15ch}
  .nash p{margin-top:24px;max-width:54ch;color:rgba(255,255,255,.78);font-size:16.5px;line-height:1.82}

  /* CONTACT */
  .contact{border-top:1px solid var(--line-soft)}
  .contact h2{font-size:clamp(24px,2.9vw,40px);color:#fff;line-height:1.08;max-width:17ch;margin-bottom:16px}
  .contact .intro{margin-top:0;max-width:52ch;color:var(--muted);font-size:16.5px;line-height:1.8}
  .routes{display:grid;grid-template-columns:repeat(3,1fr);
    column-gap:clamp(28px,3.6vw,60px);row-gap:32px;margin-top:clamp(36px,4vw,56px)}
  .route{border-top:1px solid var(--line);padding-top:22px}
  .route .who{color:var(--faint);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase}
  .route a{display:inline-block;margin-top:12px;color:#fff;font-size:clamp(15px,1.5vw,18px);
    font-weight:600;font-stretch:108%;border-bottom:1px solid rgba(237,28,36,.55);padding-bottom:3px;transition:border-color .25s}
  .route a:hover{border-color:var(--red)}
  .route span{display:block;margin-top:12px;color:#fff;font-size:clamp(15px,1.5vw,18px);font-weight:600;font-stretch:108%}
  @media(max-width:760px){.routes{grid-template-columns:1fr}}

  footer{border-top:1px solid var(--line-soft);padding-block:34px 44px}
  .foot{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
  .foot img{height:20px;width:auto;opacity:.88}
  .foot .tag{color:var(--faint);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase}
  .foot .fine{color:var(--faint);font-size:11.5px;line-height:1.85}
  .eos{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:7px 15px;
    color:var(--muted);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;transition:border-color .25s,color .25s}
  .eos b{color:var(--red);font-weight:700;letter-spacing:.08em}
  .eos:hover{border-color:var(--red);color:#fff}

  .rv{transform:translateY(14px);transition:transform .75s cubic-bezier(.2,.7,.3,1)}
  .rv.on{transform:none}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .rv{transform:none;transition:none}
    *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  }

/* Below 1100px the tab strip can't show all seven pages, so it becomes a menu
   button that drops a full list. Contact stays as the red button in the bar. */
.nav-toggle{display:none}
@media(max-width:1100px){
  .nav-in{position:relative}
  .nav-cta{margin-left:auto}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:36px;
    padding:0 9px;background:none;border:1px solid rgba(255,255,255,.22);cursor:pointer;flex:0 0 auto}
  .nav-toggle span{display:block;height:1.5px;background:#fff;transition:transform .25s,opacity .25s}
  nav.open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  nav.open .nav-toggle span:nth-child(2){opacity:0}
  nav.open{backdrop-filter:none}
  nav.open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .nav-links{display:none !important}
  nav.open .nav-links{display:flex !important;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;overflow:visible;background:#0b0b0c;z-index:5;
    border-top:1px solid rgba(255,255,255,.08);padding:6px var(--gut) 14px}
  nav.open .nav-links a{font-size:12px !important;letter-spacing:.18em !important;padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,.07);color:#fff}
  nav.open .nav-links a.on{color:var(--red)}
  nav.open .nav-links a.on::after{display:none}
}
/* Text lockups share the logo wall with real logo files, so they are built the
   way those marks are: a name line at wordmark scale over a smaller descriptor,
   sized so the block lands near the 58px height of the logo images beside it.
   (These live here, not in base.css, because base.css is the extracted original.) */
/* The Encore file renders a 34px wordmark over a 14px descriptor inside its 58px
   box, so the text lockup is set to those same two sizes and the name breaks to
   two lines to hold that scale inside the tile. Kept just under the 96px logobox
   so the category line below still sits level with the tiles either side. */
.co .lockup .mk{display:block;font-size:clamp(18px,1.6vw,21px);letter-spacing:.12em;
  line-height:1.3;font-weight:300;text-transform:uppercase;white-space:nowrap;color:#fff}
.co .lockup .mk i{font-weight:700;letter-spacing:0}
.co .lockup .sb{display:block;font-size:14px;letter-spacing:.22em;margin-top:10px;
  color:rgba(255,255,255,.76)}


/* Six positions now, so the wall runs three across in two clean rows rather than
   four and a stranded pair. */
.inv-wall{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.inv-wall{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.inv-wall{grid-template-columns:1fr}}

/* Seven tabs now that Our Filters has its own page. The bar still never collapses
   to a menu; it just tightens before it starts scrolling, so the full set stays
   visible on a laptop and on a narrow side panel. */
@media(max-width:1180px){
  .nav-links{gap:clamp(9px,1.35vw,18px)}
  .nav-links a{font-size:10px;letter-spacing:.12em}
  .nav-cta{padding:8px 15px;font-size:10px;letter-spacing:.12em}
}

/* Passive positions: every mark is rendered white so the wall stays quiet and
   uniform. These are investments, not companies we run, so they sit a step back
   from the operating wall above. Heights are set by optical weight, not equal
   pixels: the solid flag mark reads heavier than two lighter wordmarks. */
.inv img{filter:brightness(0) invert(1);opacity:.62;width:auto;max-width:78%;margin:0 auto}
.inv:hover img{filter:brightness(0) invert(1);opacity:1}
.inv img.lg-protour{height:58px;max-height:none}
.inv img.lg-spintel{height:42px;max-height:none}
.inv img.lg-inch{height:32px;max-height:none}

/* A tenth operating company leaves one tile alone on the last row. Centre it,
   the same way the triad on Our Niche is centred, so it reads as placed. The
   wall's hairlines are the grid background showing through 1px gaps, so the two
   empty cells either side are filled with plain black or they show as grey slabs. */
@media(min-width:1001px){
  .support > .co:last-child:nth-child(3n+1){grid-column:2}
  .support:has(> .co:nth-child(10):last-child)::before{content:"";background:var(--black);grid-column:1;grid-row:4}
  .support:has(> .co:nth-child(10):last-child)::after{content:"";background:var(--black);grid-column:3}
}

/* Gold Drop is a stacked mark (drop centred over the wordmark), so it reads as
   off centre when pinned left like the flat wordmarks. Centre it in its tile,
   and bring it down to the 80px the other stacked marks (TWO) use so it no
   longer stands taller than the rest of the row. */
.co .logobox:has(img.stacked){justify-content:center}
.co .colg.stacked{max-height:80px}

/* Same hairline problem as the company wall: with eight cards the last cell in
   the row is empty and shows the grid background as a grey slab. Fill it. */
@media(min-width:901px){
  .bench:has(> .pc:last-child:nth-child(3n+2))::after{content:"";background:var(--black)}
}

/* ============ MULTI PAGE CHROME ============ */
.nav-links a.on,.nav-cta.on{color:#fff}
.nav-links a.on{position:relative}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;background:var(--red)}
.nav-cta.on{background:var(--red)}

/* Inner page banner: the skyline carries over from home, held right back. */
.page-head{position:relative;padding:calc(126px + env(safe-area-inset-top,0px)) 0 clamp(44px,5vw,76px);
  background:linear-gradient(180deg,#131214 0%,var(--black) 100%);border-bottom:1px solid var(--line-soft);overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;
  background-image:url('skyline-poster.jpg');background-size:cover;background-position:center 40%;
  opacity:.10;filter:grayscale(1) contrast(1.1)}
.page-head::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,.2) 50%,var(--black) 100%)}
.page-head .wrap{position:relative;z-index:2}
.page-head h1{font-size:clamp(32px,4.6vw,62px);line-height:1.04;color:#fff;max-width:17ch}
.page-lede{margin-top:22px;color:var(--muted);font-size:clamp(16px,1.35vw,18.5px);line-height:1.8;max-width:56ch}
.page-head + section{padding-top:clamp(52px,6vw,92px)}

/* Onward link: a deep site has to keep people moving. */
.onward{padding-block:0 clamp(56px,6.5vw,96px)}
.next{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:clamp(18px,2.4vw,34px);
  border-top:1px solid var(--line);padding-top:26px;transition:border-color .3s}
.next:hover{border-color:var(--red)}
.next .lbl{grid-column:1;grid-row:1;color:var(--red);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;font-stretch:100%}
.next .ttl{grid-column:2;grid-row:1;color:#fff;font-stretch:112%;font-weight:700;font-size:clamp(20px,2.4vw,32px);letter-spacing:-.018em}
.next .arrow{grid-column:3;grid-row:1;color:var(--red);font-size:30px;line-height:1;transition:transform .3s}
.next:hover .arrow{transform:translateX(7px)}

/* Stacked section head: heading on its own line, commentary beneath it.
   Reads more balanced than the two column split when the copy runs long. */
.sec-head.stack{grid-template-columns:1fr;gap:clamp(18px,2.2vw,28px)}
.sec-head.stack h2{max-width:22ch}
.sec-head.stack .lede{max-width:66ch}

/* The hero was centred inside 88vh, which left a slab of dead black under the
   tagline before Home Base started. Shorter box, tighter bottom padding. */
.hero{min-height:clamp(540px,74vh,780px)}
.hero-in{padding:114px var(--gut) 52px}
.hero::after{background:linear-gradient(180deg,rgba(11,11,12,.62) 0%,rgba(11,11,12,.16) 38%,rgba(11,11,12,.8) 88%,var(--black) 100%)}
.nash{min-height:330px}
.nash .wrap{padding-block:clamp(54px,5.6vw,80px)}

/* Home index: names and nothing else. The visitor chooses, we do not steer. */
.index-list{border-top:1px solid var(--line)}
.ix{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:clamp(18px,3vw,44px);
  border-bottom:1px solid var(--line);padding:clamp(20px,2.4vw,30px) 0;transition:border-color .3s,padding-left .35s}
.ix:hover{border-color:var(--red);padding-left:10px}
.ix .name{color:#fff;font-stretch:112%;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(24px,3.4vw,46px);line-height:1.1}
.ix .arrow{color:var(--red);font-size:clamp(22px,2.6vw,32px);line-height:1;opacity:0;transform:translateX(-8px);
  transition:opacity .3s,transform .3s}
.ix:hover .arrow{opacity:1;transform:none}

/* Our Why: one sentence, a whole page, nothing to scroll past. */
.why-page.compact{min-height:56vh;padding-bottom:clamp(34px,4vw,56px)}
.why-page.compact blockquote{font-size:clamp(30px,5.2vw,74px);max-width:20ch}
.why-page.compact + section{padding-top:clamp(34px,4vw,60px)}
.why-page{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:calc(130px + env(safe-area-inset-top,0px)) var(--gut) clamp(70px,9vw,120px);overflow:hidden}
.why-page::before{content:"";position:absolute;inset:0;
  background-image:url('skyline-poster.jpg');background-size:cover;background-position:center 45%;
  opacity:.09;filter:grayscale(1) contrast(1.1)}
.why-page::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(11,11,12,.3) 0%,rgba(11,11,12,.92) 72%)}
.why-page .wrap{position:relative;z-index:2;padding:0}
.why-page .eyebrow{display:block;margin-bottom:clamp(30px,4vw,48px)}
.why-page blockquote{font-stretch:115%;font-weight:700;line-height:1.1;color:#fff;letter-spacing:-.03em;
  font-size:clamp(34px,6.4vw,92px);max-width:17ch;margin:0 auto}
.why-page blockquote em{font-style:normal;color:var(--red)}
.why-page .tagline{margin-top:clamp(36px,4.6vw,60px);color:rgba(255,255,255,.5);
  font-size:clamp(9.5px,1.1vw,11.5px);letter-spacing:.36em;text-transform:uppercase;font-weight:500}