:root{
    --black:#0D0D0D; --surface:#191B1D; --mid:#313030; --border:#26282A; --border-2:#34373A;
    --text:#FAFAF9; --muted:#8E8A84; --faint:#5A5651;
    --red:#DD2C2C; --red-bright:#E8473F; --red-deep:#B11A1A;
    --teal:#C1D7DC; --teal-dim:rgba(193,215,220,.5);
    --maxw:1140px;
    --ease:cubic-bezier(.2,.7,.2,1);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--black); color:var(--text);
    font-family:'Space Grotesk',sans-serif; font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  body::before{
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:1}
  h1,h2,h3,.display{font-family:'Unbounded',sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1.05}
  a{color:inherit; text-decoration:none}
  .red{color:var(--red)}
  .teal{color:var(--teal)}

  .eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--red); font-weight:600; margin-bottom:22px}
  .eyebrow svg{width:15px;height:15px;flex-shrink:0}
  .eyebrow.tealbrow{color:var(--teal)}

  /* BUTTONS */
  .btn{display:inline-flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; padding:15px 26px; border-radius:10px; cursor:pointer; transition:.2s var(--ease); border:1px solid transparent; white-space:nowrap}
  .btn svg{width:17px;height:17px}
  .btn-primary{background:var(--red); color:#fff; box-shadow:0 0 0 0 var(--red)}
  .btn-primary:hover{background:var(--red-bright); transform:translateY(-1px); box-shadow:0 8px 28px -10px var(--red)}
  .btn-ghost{background:transparent; color:var(--text); border-color:var(--border-2)}
  .btn-ghost:hover{border-color:var(--teal); color:var(--teal)}
  .btn:focus-visible{outline:2px solid var(--teal); outline-offset:3px}

  /* NAV */
  header.nav{position:sticky; top:0; z-index:50; background:rgba(13,13,13,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--border)}
  .nav-inner{max-width:var(--maxw); margin:0 auto; padding:16px 28px; display:flex; align-items:center; gap:28px}
  .nav-logo img{height:30px; width:auto; display:block}
  .nav-links{display:flex; gap:28px; margin-left:auto; align-items:center}
  .nav-links a{font-size:15px; color:var(--muted); font-weight:500; transition:color .18s; position:relative}
  .nav-links a:hover{color:var(--text)}
  .nav-links a::after{content:''; position:absolute; left:0; right:100%; bottom:-5px; height:1.5px; background:var(--red); transition:right .25s var(--ease)}
  .nav-links a:hover::after{right:0}
  .nav-cta{margin-left:4px}
  .nav-cta .btn{padding:11px 20px; font-size:15px}
  .burger{display:none; margin-left:auto; background:none; border:1px solid var(--border-2); border-radius:8px; padding:9px 11px; cursor:pointer; color:var(--text)}
  .burger svg{width:20px;height:20px;display:block}
  .mobile-menu{display:none; flex-direction:column; gap:4px; padding:8px 28px 22px; border-bottom:1px solid var(--border); background:rgba(13,13,13,.96)}
  .mobile-menu a{padding:12px 0; color:var(--muted); font-weight:500; border-bottom:1px solid var(--border)}
  .mobile-menu a:last-of-type{border-bottom:none}
  .mobile-menu .btn{margin-top:12px; justify-content:center}

  /* HERO */
  .hero{position:relative; padding:96px 0 88px; overflow:hidden}
  .hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.35fr .9fr; gap:56px; align-items:center}
  .hero h1{font-size:clamp(34px,5vw,58px); font-weight:900}
  .hero h1 .acc{color:var(--red)}
  .hero p.lead{color:var(--muted); font-size:clamp(17px,2vw,20px); margin-top:26px; max-width:54ch}
  .hero p.lead b{color:var(--text); font-weight:500}
  .hero-cta{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap}
  .hero-foot{margin-top:34px; font-size:13.5px; color:var(--faint); letter-spacing:.04em; display:flex; align-items:center; gap:10px}
  .hero-foot .dot{width:6px;height:6px;border-radius:50%;background:var(--teal)}

  /* hero scope visual */
  .scope{position:relative; width:100%; max-width:360px; aspect-ratio:1; margin:0 auto}
  .scope svg{width:100%; height:100%; display:block}
  .scope .lockring{transform-origin:center; animation:spin 36s linear infinite}
  .scope .bracket{stroke-dasharray:60; stroke-dashoffset:60; animation:draw 1.1s var(--ease) forwards .2s}
  .scope .b2{animation-delay:.32s}.scope .b3{animation-delay:.44s}.scope .b4{animation-delay:.56s}
  .scope .ping{transform-origin:center; animation:ping 2.6s ease-out infinite 1.3s}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes ping{0%{r:8; opacity:.9}70%{r:46; opacity:0}100%{opacity:0}}

  /* ENGINES STRIP (under hero) */
  .estrip{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:linear-gradient(180deg,rgba(25,27,29,.5),rgba(13,13,13,0))}
  .estrip-inner{max-width:var(--maxw); margin:0 auto; padding:20px 28px; display:flex; align-items:center; gap:24px; flex-wrap:wrap}
  .estrip-line{font-size:16px; color:var(--text); font-weight:500; max-width:34ch}
  .estrip-line b{color:var(--teal); font-weight:600}
  .estrip-engines{display:flex; gap:10px; margin-left:auto; flex-wrap:wrap}
  .estrip-engines .e{display:flex; align-items:center; gap:9px; padding:8px 15px; border:1px solid var(--border-2); border-radius:99px; transition:.2s var(--ease)}
  .estrip-engines .e:hover{border-color:var(--teal)}
  .estrip-engines .e svg{width:24px; height:24px; flex-shrink:0}
  .estrip-engines .e span{font-size:14.5px; font-weight:500}
  @media (max-width:680px){ .estrip-engines{margin-left:0} .estrip-line{max-width:none} }

  /* SECTION SHELL */
  section{position:relative; padding:84px 0}
  .section-line{border-top:1px solid var(--border)}
  .lead-h2{font-size:clamp(28px,3.6vw,42px); font-weight:700; max-width:20ch}
  .lead-h2 .acc{color:var(--red)}
  .sect-intro{color:var(--muted); font-size:18px; margin-top:20px; max-width:60ch}

  /* THESIS */
  .thesis{background:var(--surface)}
  .thesis .lead-h2{max-width:24ch}
  .thesis-body{color:var(--muted); font-size:18.5px; margin-top:24px; max-width:62ch}
  .thesis-body b{color:var(--text); font-weight:500}

  /* 95/5 BAND */
  .band{padding:64px 0}
  .ratio{margin-top:30px}
  .ratio-bar{display:flex; height:64px; border-radius:12px; overflow:hidden; border:1px solid var(--border-2)}
  .ratio-bar .five{width:5%; background:var(--red); min-width:34px}
  .ratio-bar .ninetyfive{flex:1; background:linear-gradient(90deg,#22262a,#191B1D)}
  .ratio-labels{display:flex; justify-content:space-between; margin-top:14px; gap:20px; flex-wrap:wrap}
  .ratio-labels .rl{font-size:14.5px; color:var(--muted)}
  .ratio-labels .rl b{display:block; font-family:'Unbounded',sans-serif; font-size:22px; color:var(--text); font-weight:700; margin-bottom:2px}
  .ratio-labels .rl.r b{color:var(--red)} .ratio-labels .rl.t b{color:var(--teal)}
  .src{font-size:12.5px; color:var(--faint); margin-top:18px; letter-spacing:.03em}

  /* ENGINES */
  .engines-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:46px}
  .engine-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .ecard{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:30px 26px 32px; transition:.25s var(--ease)}
  .ecard:hover{border-color:var(--border-2); transform:translateY(-4px); box-shadow:0 20px 46px -24px rgba(0,0,0,.85)}
  .ecard::before,.ecard::after{content:''; position:absolute; width:20px; height:20px; opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease)}
  .ecard::before{top:11px; left:11px; border-top:2px solid var(--teal); border-left:2px solid var(--teal); border-radius:3px 0 0 0; transform:translate(6px,6px)}
  .ecard::after{bottom:11px; right:11px; border-bottom:2px solid var(--teal); border-right:2px solid var(--teal); border-radius:0 0 3px 0; transform:translate(-6px,-6px)}
  .ecard:hover::before,.ecard:hover::after{opacity:.8; transform:translate(0,0)}
  .ecard .ico{transition:transform .3s var(--ease)}
  .ecard:hover .ico{transform:scale(1.05)}
  .ecard .ico{width:64px; height:64px; margin-bottom:22px}
  .ecard .ico svg{width:100%;height:100%;display:block}
  .ecard h3{font-size:21px; font-weight:600; margin-bottom:4px}
  .ecard .tag{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); font-weight:600; margin-bottom:14px; display:block}
  .ecard p{color:var(--muted); font-size:15.5px; line-height:1.6}

  /* PROOF */
  .proof{background:var(--surface)}
  .proof-strip{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
  .chan{border:1px solid var(--border-2); border-radius:99px; padding:11px 20px; font-size:15px; color:var(--text); font-weight:500; display:flex; align-items:center; gap:9px}
  .chan .d{width:7px;height:7px;border-radius:50%;background:var(--teal)}
  .metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px}
  .metric{border:1px solid var(--border); border-radius:14px; padding:26px 24px; background:var(--black)}
  .metric .big{font-family:'Unbounded',sans-serif; font-size:34px; font-weight:700; color:var(--text)}
  .metric .big .ph{color:var(--red)}
  .metric .lbl{color:var(--muted); font-size:14.5px; margin-top:6px}
  .ph-note{font-size:12.5px; color:var(--faint); margin-top:16px}

  /* FOUNDER */
  .founder-grid{display:grid; grid-template-columns:1fr 1.25fr; gap:50px; align-items:center}
  .founder-mark{position:relative; aspect-ratio:1; max-width:300px; margin:0 auto; border:1px solid var(--border-2); border-radius:18px; background:var(--surface); display:flex; align-items:center; justify-content:center}
  .founder-mark img{width:62%; opacity:.9}
  .founder h2{font-size:clamp(26px,3.2vw,38px)}
  .founder h2 .acc{color:var(--red)}
  .founder p{color:var(--muted); font-size:18px; margin-top:22px; max-width:58ch}
  .founder p b{color:var(--text); font-weight:500}
  .creds{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
  .cred{font-size:13px; color:var(--muted); border:1px solid var(--border); border-radius:8px; padding:7px 13px; letter-spacing:.02em}

  /* BEYOND */
  .beyond{background:var(--surface)}
  .beyond-inner{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; border:1px solid var(--border-2); border-radius:18px; padding:42px 44px; background:linear-gradient(120deg,#191B1D,#13161800)}
  .beyond-inner h2{font-size:clamp(24px,3vw,32px)}
  .beyond-inner p{color:var(--muted); margin-top:14px; max-width:52ch}

  /* FAQ */
  .faq-list{margin-top:40px; border-top:1px solid var(--border)}
  .faq-item{border-bottom:1px solid var(--border)}
  .faq-q{width:100%; text-align:left; background:none; border:none; color:var(--text); font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:500; padding:24px 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px}
  .faq-q:hover{color:var(--teal)}
  .faq-q .pm{flex-shrink:0; width:22px;height:22px; position:relative; transition:transform .25s}
  .faq-q .pm::before,.faq-q .pm::after{content:''; position:absolute; background:var(--red); border-radius:2px}
  .faq-q .pm::before{left:0; top:10px; width:22px; height:2px}
  .faq-q .pm::after{left:10px; top:0; width:2px; height:22px; transition:transform .25s}
  .faq-item.open .pm::after{transform:rotate(90deg); opacity:0}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .3s var(--ease)}
  .faq-a p{color:var(--muted); font-size:16.5px; padding:0 0 24px; max-width:64ch}

  /* FINAL CTA */
  .final{text-align:center; padding:100px 0}
  .final .scope{max-width:120px; margin-bottom:32px}
  .final h2{font-size:clamp(30px,4vw,48px); font-weight:900}
  .final h2 .acc{color:var(--red)}
  .final p{color:var(--muted); font-size:19px; margin:22px auto 38px; max-width:48ch}

  /* FOOTER */
  footer{background:var(--surface); border-top:1px solid var(--border); padding:60px 0 40px}
  .foot-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start}
  .foot-logo img{height:34px; margin-bottom:18px}
  .foot-tag{color:var(--muted); font-size:15px; max-width:34ch}
  .foot-cols{display:flex; gap:64px; flex-wrap:wrap}
  .foot-col h4{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; font-weight:600; font-family:'Space Grotesk',sans-serif}
  .foot-col a,.foot-col span{display:block; color:var(--muted); font-size:15px; margin-bottom:11px; transition:color .18s}
  .foot-col a:hover{color:var(--text)}
  .foot-bottom{margin-top:48px; padding-top:26px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
  .foot-bottom .riff{color:var(--text); font-size:14.5px; font-weight:500}
  .foot-bottom .copy{color:var(--faint); font-size:13.5px}

  /* LOGO WALL + CAREER + FOUNDER PHOTO */
  .logo-wall{display:flex; flex-wrap:wrap; align-items:center; gap:32px 44px; margin-top:38px}
  .logo-wall img{height:30px; width:auto; opacity:.6; transition:opacity .2s var(--ease)}
  .logo-wall img:hover{opacity:1}
  .career-logos{display:flex; flex-wrap:wrap; align-items:center; gap:22px 32px; margin-top:26px}
  .career-logos img{height:23px; width:auto; opacity:.5; transition:opacity .2s var(--ease)}
  .career-logos img:hover{opacity:.85}
  .founder-photo{position:relative; width:300px; max-width:100%; aspect-ratio:1; margin:0 auto}
  .founder-photo > img{width:100%; height:100%; object-fit:cover; border-radius:50%; border:1px solid var(--border-2); position:relative; z-index:1; display:block}
  .founder-photo .ring{position:absolute; inset:-16px; z-index:2; pointer-events:none; width:calc(100% + 32px); height:calc(100% + 32px)}

  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr; gap:32px} .scope{max-width:180px}
    .hero{padding:64px 0 60px}
    .hero .scope{order:-1; margin:0}
    .engine-cards{grid-template-columns:1fr} .metrics{grid-template-columns:1fr}
    .founder-grid{grid-template-columns:1fr; gap:36px}
    .nav-links{display:none} .nav-cta{display:none} .burger{display:block}
  }
  @media (max-width:560px){
    .hero .scope{max-width:132px}
    .logo-wall{gap:24px 30px} .logo-wall img{height:26px}
    .founder-photo{width:230px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
    .scope .bracket{stroke-dashoffset:0}
  }

/* ============ HOW IT WORKS PAGE ============ */
.page-hero{padding:82px 0 60px; border-bottom:1px solid var(--border)}
.page-hero h1{font-size:clamp(32px,4.6vw,52px); font-weight:900; max-width:17ch}
.page-hero h1 .acc{color:var(--red)}
.page-hero .lead{color:var(--muted); font-size:clamp(17px,2vw,20px); margin-top:22px; max-width:62ch}
.page-hero .lead b{color:var(--text); font-weight:500}
.page-hero .hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap}

.process{margin-top:44px}
.pstep{display:grid; grid-template-columns:auto 1fr; gap:28px; padding:28px 0; border-top:1px solid var(--border); align-items:start}
.pstep:first-child{border-top:none}
.pnum{position:relative; width:58px; height:58px; flex-shrink:0}
.pnum svg{position:absolute; inset:0; width:100%; height:100%}
.pnum span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Unbounded',sans-serif; font-weight:700; font-size:20px; color:var(--text)}
.pstep h3{font-family:'Unbounded',sans-serif; font-weight:600; font-size:21px; margin-bottom:9px; letter-spacing:-.01em}
.pstep p{color:var(--muted); font-size:16.5px; max-width:66ch}
.pstep p b{color:var(--text); font-weight:500}

.compare{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:42px}
.ccol{border:1px solid var(--border); border-radius:16px; padding:30px 28px; background:var(--surface)}
.ccol h3{font-family:'Unbounded',sans-serif; font-weight:600; font-size:19px; margin-bottom:18px}
.ccol.rented h3{color:var(--muted)}
.ccol.owned h3{color:var(--teal)}
.ccol ul{list-style:none}
.ccol li{padding:12px 0 12px 30px; position:relative; font-size:16px; border-top:1px solid var(--border); color:var(--muted)}
.ccol li:first-child{border-top:none}
.ccol.owned li{color:var(--text)}
.ccol li::before{position:absolute; left:2px; top:11px; font-size:15px; font-weight:700}
.ccol.rented li::before{content:'\2715'; color:var(--red)}
.ccol.owned li::before{content:'\2713'; color:var(--teal)}

.ecard .ico img{width:100%; height:100%; display:block}

.statement{padding:72px 0; text-align:center; border-top:1px solid var(--border)}
.statement h2{font-size:clamp(24px,3.2vw,36px); font-weight:700; max-width:22ch; margin:0 auto; line-height:1.15}
.statement h2 .acc{color:var(--teal)}

@media (max-width:760px){
  .compare{grid-template-columns:1fr}
  .pstep{gap:20px}
}

/* ============ SAMPLE MONTH PAGE ============ */
.cal-scroll{overflow-x:auto; margin-top:28px; -webkit-overflow-scrolling:touch; padding-bottom:6px}
.cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px}
.cal .dow{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding:0 2px 4px}
.cal .day{min-height:98px; border:1px solid var(--border); border-radius:10px; padding:8px; background:var(--surface)}
.cal .day.empty{background:transparent; border-color:#1a1c1e}
.cal .dn{font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums}
.chip{display:block; font-size:11px; padding:4px 7px; border-radius:6px; margin-top:6px; font-weight:500; line-height:1.3}
.chip.ep{background:rgba(221,44,44,.16); color:#ff7a5c; border:1px solid rgba(221,44,44,.35)}
.chip.clip{background:rgba(193,215,220,.12); color:var(--teal); border:1px solid rgba(193,215,220,.26)}
.chip.post{background:#202325; color:var(--text); border:1px solid var(--border-2)}
.chip.gfx{background:transparent; color:var(--muted); border:1px dashed var(--border-2)}
.cal-legend{display:flex; flex-wrap:wrap; gap:14px 22px; margin-top:22px}
.cal-legend .lg{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted)}
.cal-legend .sw{width:14px; height:14px; border-radius:4px; flex-shrink:0}
.sw.ep{background:rgba(221,44,44,.5); border:1px solid rgba(221,44,44,.6)}
.sw.clip{background:rgba(193,215,220,.35); border:1px solid rgba(193,215,220,.5)}
.sw.post{background:#2a2d30; border:1px solid var(--border-2)}
.sw.gfx{background:transparent; border:1px dashed var(--border-2)}
@media (max-width:760px){ .cal{min-width:700px} }

/* ============ PROOF PAGE ============ */
.logo-wall.big{gap:38px 52px; margin-top:34px}
.logo-wall.big img{height:40px; opacity:.66}
.deliver{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px}
.dcard{border:1px solid var(--border); border-radius:14px; padding:24px 22px; background:var(--surface)}
.dcard h3{font-family:'Unbounded',sans-serif; font-size:16px; font-weight:600; margin-bottom:9px}
.dcard p{color:var(--muted); font-size:14.5px; line-height:1.55}
.cases{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
.case{border:1px solid var(--border); border-radius:16px; padding:28px 26px; background:var(--surface); display:flex; flex-direction:column}
.case .client{font-family:'Unbounded',sans-serif; font-size:18px; font-weight:600; margin-bottom:6px}
.case .etype{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); font-weight:600; margin-bottom:16px}
.case .result{color:var(--muted); font-size:15px; line-height:1.55; margin-bottom:20px; flex:1}
.case .stat{font-family:'Unbounded',sans-serif; font-size:26px; font-weight:700; color:var(--text)}
.case .stat .ph{color:var(--red)}
.case .statlbl{font-size:13px; color:var(--muted); margin-top:3px}
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
.quote{border:1px solid var(--border); border-radius:16px; padding:26px 26px 28px; background:var(--surface)}
.quote .qmark{color:var(--red); font-family:'Unbounded',sans-serif; font-size:44px; line-height:.4; height:26px}
.quote p{font-size:16px; margin:14px 0 20px; line-height:1.5}
.quote .who{color:var(--muted); font-size:13.5px}
.quote.ph p{color:var(--faint); font-style:italic}
.quote.ph .who{color:var(--faint)}
@media (max-width:900px){ .deliver{grid-template-columns:1fr 1fr} .cases{grid-template-columns:1fr} .quotes{grid-template-columns:1fr} }
@media (max-width:560px){ .deliver{grid-template-columns:1fr} }

/* ============ ABOUT PAGE ============ */
.about-hero-grid{display:grid; grid-template-columns:290px 1fr; gap:52px; align-items:center; margin-top:6px}
.about-hero-grid .founder-photo{margin:0}
.about-hero-grid h1{font-size:clamp(30px,4.2vw,50px); font-weight:900; line-height:1.05}
.about-hero-grid h1 .acc{color:var(--red)}
.about-hero-grid .lead{color:var(--muted); font-size:clamp(17px,2vw,20px); margin-top:20px; max-width:52ch}
.about-hero-grid .lead b{color:var(--text); font-weight:500}
.about-story p{color:var(--muted); font-size:18px; line-height:1.7; margin-top:20px; max-width:66ch}
.about-story p:first-of-type{margin-top:24px}
.about-story p b{color:var(--text); font-weight:500}
.pullquote{margin:34px 0 6px; padding:8px 0 8px 28px; border-left:3px solid var(--red); font-family:'Unbounded',sans-serif; font-weight:600; font-size:clamp(21px,2.8vw,30px); line-height:1.2; letter-spacing:-.01em; color:var(--text); max-width:26ch}
.pullquote .by{display:block; margin-top:14px; font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:15px; color:var(--muted); letter-spacing:0}
.signoff{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.signoff span{border:1px solid var(--border-2); border-radius:99px; padding:10px 18px; font-size:15px; color:var(--text); font-weight:500}
.signoff span b{color:var(--red); font-weight:600}
@media (max-width:820px){
  .about-hero-grid{grid-template-columns:1fr; gap:32px; justify-items:start}
  .about-hero-grid .founder-photo{width:210px}
}

/* ============ POLISH LAYER v2 — atmosphere, motion, discipline ============ */
html{color-scheme:dark}
::selection{background:var(--red); color:#fff}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:4px}
section[id]{scroll-margin-top:88px}

/* --- atmosphere: quiet light sources on dark ground --- */
.hero::before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(560px 440px at 78% 44%, rgba(221,44,44,.10), transparent 66%),
    radial-gradient(760px 520px at 8% 0%, rgba(193,215,220,.05), transparent 60%)}
.page-hero{position:relative; overflow:hidden}
.page-hero::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(640px 420px at 88% -10%, rgba(221,44,44,.08), transparent 62%)}
.final{overflow:hidden}
.final::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 400px at 50% 28%, rgba(221,44,44,.09), transparent 66%)}
.scope::before{content:''; position:absolute; inset:-12%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(221,44,44,.12), transparent 62%)}

/* --- nav: show people where they are --- */
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a[aria-current="page"]::after{right:0}
.mobile-menu a[aria-current="page"]{color:var(--text); border-left:2px solid var(--red); padding-left:12px}

/* --- buttons: the arrow answers the hover --- */
.btn svg{transition:transform .25s var(--ease)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-primary:active{transform:translateY(0); box-shadow:0 3px 14px -8px var(--red)}

/* --- scroll reveal (JS adds .reveal, then .inview) --- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .65s var(--ease), transform .65s var(--ease)}
.reveal.inview{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none}}

/* --- 95/5 bar: the point, animated once, on arrival --- */
.ratio-bar .five{transform-origin:left; box-shadow:0 0 30px -8px rgba(221,44,44,.55)}
.ratio.inview .five{animation:barGrow .9s var(--ease) both .15s}
.ratio.inview .ninetyfive{animation:barFade .9s var(--ease) both .3s}
@keyframes barGrow{from{transform:scaleX(0)}}
@keyframes barFade{from{opacity:0}}

/* --- owned vs rented: let the design pick the winner --- */
.ccol.owned{border-color:rgba(193,215,220,.32);
  background:linear-gradient(160deg, rgba(193,215,220,.05), var(--surface) 55%);
  box-shadow:0 0 46px -22px rgba(193,215,220,.3)}
.ccol.rented{opacity:.88}

/* --- sample month: the episode is the anchor; say so --- */
.cal .day{transition:border-color .2s var(--ease)}
.cal .day:hover{border-color:var(--border-2)}
.cal .day:has(.chip.ep){border-color:rgba(221,44,44,.42); box-shadow:0 0 26px -12px rgba(221,44,44,.45)}

/* --- founder scope ring: barely-alive rotation --- */
.founder-photo .ring{animation:ringSpin 80s linear infinite}
@keyframes ringSpin{to{transform:rotate(360deg)}}

/* --- metric cards: hairline sight-line --- */
.metric{position:relative; overflow:hidden}
.metric::before{content:''; position:absolute; top:0; left:24px; right:24px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(193,215,220,.35), transparent)}

/* --- footer riff line gets its dot --- */
.foot-bottom .riff::before{content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--red); margin-right:10px; vertical-align:2px}

/* --- optical sizing: DealerOn wordmark is wider than its rowmates; balance its mass --- */
.career-logos img[src*="dealeron"]{height:19px}
@media (max-width:560px){ .career-logos img[src*="dealeron"]{height:17px} }

/* --- weekday-only calendar variant --- */
.cal.weekdays{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:760px){ .cal.weekdays{min-width:560px} }

/* --- final reticle: slow scanning arc (she likes the moving reticle) --- */
.scope .scan{animation:scanSpin 8s linear infinite; transform-origin:50% 50%; transform-box:view-box}
@keyframes scanSpin{to{transform:rotate(360deg)}}

/* --- GoTo Connect is a stacked lockup among wide wordmarks; balance its height --- */
.logo-wall img[src*="goto-connect"]{height:44px}
.logo-wall.big img[src*="goto-connect"]{height:52px}
@media (max-width:560px){ .logo-wall img[src*="goto-connect"]{height:36px} }

/* --- four featured cases read best two-by-two; stat pairs side by side --- */
.cases{grid-template-columns:repeat(2,1fr)}
.case-stats{display:flex; gap:32px; padding-top:18px; border-top:1px solid var(--border)}

/* --- the hired guns: team grid, founder photo treatment scaled down --- */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:44px}
.tmember{text-align:center}
.tphoto{position:relative; width:148px; height:148px; margin:0 auto 20px}
.tphoto img{width:100%; height:100%; object-fit:cover; border-radius:50%; filter:grayscale(1) contrast(1.06)}
.tphoto .ring{position:absolute; inset:-11px; width:calc(100% + 22px); height:calc(100% + 22px); animation:ringSpin 80s linear infinite}
.tname{font-family:'Unbounded',sans-serif; font-size:15px; font-weight:600; margin-bottom:6px}
.ttitle{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); font-weight:600}
@media (max-width:900px){ .team-grid{grid-template-columns:repeat(2,1fr); gap:36px 20px} }

/* --- the 100% stat: out of the box, standing alone --- */
.metric-hero{position:relative; margin-top:30px; padding:42px 24px 38px; text-align:center}
.metric-hero::before, .metric-hero::after{content:''; position:absolute; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(193,215,220,.35), transparent)}
.metric-hero::before{top:0}
.metric-hero::after{bottom:0}
.metric-hero .big{font-family:'Unbounded',sans-serif; font-size:clamp(54px,7vw,80px); font-weight:900; color:var(--red); line-height:1; letter-spacing:-.01em}
.metric-hero .lbl{margin-top:12px; font-size:17px; color:var(--text); font-weight:500; letter-spacing:.02em}

/* --- mobile hero: reticle becomes a corner backdrop; the headline leads --- */
@media (max-width:900px){
  .hero{padding:44px 0 60px}
  .hero-grid{display:block}
  .hero-grid > div:first-child{position:relative; z-index:1}
  .hero .scope{position:absolute; top:-6px; right:-40px; width:210px; max-width:none; margin:0; opacity:.5; z-index:0}
}
@media (max-width:560px){
  .hero .scope{width:174px; right:-32px; top:-2px}
}

/* --- skip link: invisible until keyboard-focused --- */
.skip{position:absolute; left:-9999px; top:14px; z-index:100; background:var(--red); color:#fff; padding:10px 18px; border-radius:8px; font-weight:600; text-decoration:none}
.skip:focus{left:14px}