:root{
    --black:#0E0E10;
    --panel:#17171A;
    --white:#FFFFFF;
    --ivory:#FAFAF9;
    --red:#FF3B4A;
    --red-d:#C8102E;
    --body-c:#3C3C41;
    --mute:#88888D;
    --mute-d:#9A9AA0;
    --hair-l:#E6E6E8;
    --hair-d:#2A2A2E;
    --ghost:#F5DEE1;
    --serif: Cambria, Georgia, "Times New Roman", serif;
    --sans: Arial, Helvetica, sans-serif;
    --maxw: 1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }
  body{font-family:var(--sans); color:var(--body-c); background:var(--white); line-height:1.5; -webkit-font-smoothing:antialiased;}
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  h1,h2,h3{font-family:var(--serif); color:var(--black); font-weight:700; line-height:1.12;}
  .eyebrow{font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:0.22em; color:var(--red-d); text-transform:uppercase;}
  .eyebrow.on-dark{color:var(--red);}
  .italic-accent{font-style:italic; color:var(--red-d);}
  .on-dark .italic-accent{color:var(--red);}
  section{position:relative;}
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}
  .reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;}
  .reveal.d4{transition-delay:.32s;} .reveal.d5{transition-delay:.4s;} .reveal.d6{transition-delay:.48s;}

  /* ---------- NAV ---------- */
  #nav{position:fixed; top:0; left:0; right:0; z-index:100; padding:22px 0; transition:background .35s ease, padding .35s ease, border-color .35s ease; border-bottom:1px solid transparent;}
  #nav.scrolled{background:rgba(14,14,16,0.92); backdrop-filter:blur(10px); padding:14px 0; border-color:var(--hair-d);}
  #nav .wrap{display:flex; align-items:center; justify-content:space-between;}
  .nav-mark{font-family:var(--serif); font-weight:700; font-size:19px; color:var(--white); letter-spacing:0.03em;}
  .nav-links{display:flex; gap:30px; list-style:none;}
  .nav-links a{font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#C8C8CC; position:relative; padding-bottom:4px;}
  .nav-links a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--red); transition:width .25s ease;}
  .nav-links a:hover{color:var(--white);}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{border:1px solid var(--red); color:var(--white) !important; padding:8px 18px; font-size:11px !important; border-radius:2px; transition:background .25s ease;}
  .nav-cta:hover{background:var(--red); }
  .nav-cta::after{display:none;}
  #hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
  #hamburger span{width:22px; height:2px; background:var(--white);}

  /* ---------- SIGNATURE SIDE RAIL (section index) ---------- */
  #rail{position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:90; display:flex; flex-direction:column; gap:14px;}
  #rail a{display:flex; align-items:center; gap:10px; justify-content:flex-end;}
  #rail .dot{width:6px; height:6px; border-radius:50%; background:var(--hair-d); transition:background .25s ease, transform .25s ease;}
  #rail .num{font-family:var(--serif); font-size:11px; color:transparent; transition:color .25s ease; width:0; overflow:hidden; white-space:nowrap;}
  #rail a:hover .num, #rail a.active .num{color:var(--white); width:16px;}
  #rail a.active .dot{background:var(--red); transform:scale(1.6);}
  @media (max-width:980px){ #rail{display:none;} }

  /* ---------- HERO ---------- */
  #hero{min-height:92vh; background:var(--black); color:var(--white); display:flex; align-items:center; position:relative; overflow:hidden; padding-top:90px;}
  #hero .ring{position:absolute; border-radius:50%; border:1px solid rgba(255,59,74,0.35);}
  #hero .ring.r1{width:640px; height:640px; top:-220px; right:-180px;}
  #hero .ring.r2{width:460px; height:460px; top:-120px; right:-60px; opacity:.6;}
  #hero .skyline{position:absolute; left:0; right:0; bottom:0; height:110px; opacity:.9;}
  #hero .content{position:relative; z-index:2;}
  #hero .eyebrow{margin-bottom:30px; font-size:18px; line-height:1.6;}
  #hero h1{font-size:clamp(96px,17vw,220px); letter-spacing:0.01em;}
  .hero-logo{height:clamp(120px,19vw,230px); width:auto; display:block;}
  #hero .adv{font-size:19px; letter-spacing:0.34em; margin:22px 0 12px;}
  #hero .talk{font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:0.3em; color:var(--red);}
  #hero .lede{max-width:520px; color:#D9D7D1; font-size:15px; margin-top:34px; line-height:1.6;}
  #hero .cta-row{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
  .btn{display:inline-block; padding:17px 36px; font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; border-radius:2px; transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;}
  .btn-primary{background:var(--red); color:var(--white);}
  .btn-primary:hover{transform:translateY(-2px); background:#ff5460;}
  .btn-ghost{border:1px solid rgba(255,255,255,0.35); color:var(--white);}
  .btn-ghost:hover{border-color:var(--white); transform:translateY(-2px);}
  #hero .services-line{position:absolute; bottom:26px; left:0; right:0; font-size:10.5px; color:var(--mute-d); letter-spacing:0.04em; z-index:3;}
  #hero .scroll-cue{position:absolute; bottom:26px; right:32px; z-index:3; font-size:10px; letter-spacing:0.2em; color:var(--mute-d); writing-mode:vertical-rl; display:flex; align-items:center; gap:10px;}
  #hero .scroll-cue::after{content:""; width:1px; height:38px; background:var(--mute-d); display:block;}

  /* ---------- SECTION SCAFFOLDING ---------- */
  .sec{padding:110px 0;}
  .sec.tight{padding:100px 0;}
  .sec.on-dark{background:var(--black); color:#D9D7D1;}
  .sec.on-dark h2, .sec.on-dark h3{color:var(--white);}
  .sec-head{max-width:680px; margin-bottom:64px;}
  .sec-head h2{font-size:clamp(32px,3.8vw,46px); margin-top:16px;}
  .sec-head .lede{margin-top:18px; font-size:16px; font-style:italic; color:var(--mute); max-width:520px;}
  .on-dark .sec-head .lede{color:var(--mute-d);}

  .tick-num{display:flex; gap:18px; align-items:flex-start;}
  .tick-num .bar{width:3px; min-width:3px; height:26px; background:var(--red-d); margin-top:4px;}
  .on-dark .tick-num .bar{background:var(--red);}
  .tick-num .n{font-family:var(--serif); font-size:30px; font-weight:700; color:var(--ghost); line-height:1;}
  .on-dark .tick-num .n{color:#2A2A2E;}

  /* ---------- MARKET CONTEXT (3-up) ---------- */
  #context .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
  #context .item h4{font-family:var(--sans); font-size:17px; font-weight:700; color:var(--black); margin-bottom:12px;}
  #context .tick-num .n{color:var(--red-d);}
  #context .item p{font-size:14.5px; line-height:1.65;}

  /* ---------- CHALLENGE (2x2) ---------- */
  #challenge{background:var(--ivory);}
  #challenge .grid2{display:grid; grid-template-columns:1fr 1fr; gap:44px 60px;}
  #challenge .item h4{font-family:var(--sans); font-size:17px; font-weight:700; color:var(--black); margin-bottom:10px;}
  #challenge .item p{font-size:14.5px; line-height:1.65;}
  #challenge .solution{margin-top:56px; font-family:var(--serif); font-size:22px; color:var(--black); border-top:1px solid var(--hair-l); padding-top:32px;}

  /* ---------- ABOUT (split, dark) ---------- */
  #about .split{display:grid; grid-template-columns:1.3fr 1fr; gap:70px; align-items:start;}
  #about p{font-size:16px; line-height:1.75; margin-bottom:20px; max-width:540px;}
  #about .tagline{font-family:var(--serif); font-size:30px; font-weight:700; font-style:italic; margin-top:28px; line-height:1.25;}
  #about .tagline .plain{font-style:normal; color:var(--white);}
  #about .stats{display:flex; flex-direction:column; gap:34px;}
  #about .stat .num{font-family:var(--serif); font-size:56px; font-weight:700; color:var(--red);}
  #about .stat .lbl{font-size:12.5px; color:var(--mute-d); margin-top:6px; line-height:1.4;}
  #about .stat + .stat{border-top:1px solid var(--hair-d); padding-top:28px;}

  /* ---------- TEAM ---------- */
  .card-team{text-align:center;}
  .monogram{width:90px; height:90px; border-radius:50%; border:1.5px solid var(--red-d); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-family:var(--serif); font-size:27px; font-weight:700; color:var(--red-d); transition:transform .3s ease, background .3s ease, color .3s ease;}
  .card-team:hover .monogram{background:var(--red-d); color:var(--white); transform:scale(1.06);}
  .card-team h4{font-family:var(--serif); font-size:21px; color:var(--black);}
  .card-team .role{font-size:10.5px; font-weight:700; color:var(--red-d); letter-spacing:0.12em; text-transform:uppercase; margin:10px 0 18px;}
  .card-team p{font-size:13.5px; line-height:1.65; text-align:left;}
  .card-team .tags{margin-top:20px; padding-top:16px; border-top:1px solid var(--hair-l); font-size:10.5px; font-style:italic; color:var(--mute);}

  /* ---------- SUPPORT TEAM ---------- */
  #support{background:var(--ivory);}
  #support .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:44px;}
  #support .item h4{font-family:var(--sans); font-size:18px; font-weight:700; color:var(--black); margin:18px 0 12px;}
  #support .item p{font-size:14px; line-height:1.65;}
  #support .item ul{list-style:none; margin-top:16px; padding-top:16px; border-top:1px solid var(--hair-l); font-size:11px; color:var(--body-c);}
  #support .item ul li{margin-bottom:6px; padding-left:14px; position:relative;}
  #support .item ul li::before{content:"•"; position:absolute; left:0; color:var(--red-d);}

  /* ---------- SERVICES (2x3, hover cards) ---------- */
  #services .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
  .svc-card{padding:34px 28px; border:1px solid var(--hair-l); border-radius:4px; transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;}
  .svc-card:hover{border-color:var(--red-d); transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,0.07);}
  .svc-card h4{font-family:var(--sans); font-size:16.5px; font-weight:700; color:var(--black); margin:16px 0 10px;}
  .svc-card p{font-size:13.5px; line-height:1.65;}

  /* ---------- PROCESS ---------- */
  #process .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative;}
  #process .steps::before{content:""; position:absolute; top:31px; left:8%; right:8%; height:1px; background:var(--hair-l);}
  .step{text-align:center; position:relative;}
  .step .circle{width:78px; height:78px; border-radius:50%; border:2px solid var(--red-d); background:var(--white); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; font-family:var(--serif); font-size:28px; font-weight:700; color:var(--red-d); position:relative; z-index:2; transition:background .25s ease, color .25s ease;}
  .step:hover .circle{background:var(--red-d); color:var(--white);}
  .step h4{font-size:14.5px; font-weight:700; letter-spacing:0.08em; color:var(--black); white-space:pre-line;}
  .step p{font-size:13px; margin-top:12px; line-height:1.6;}

  /* ---------- SECTORS ---------- */
  #sectors{background:var(--ivory);}
  #sectors .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:44px;}
  #sectors .item h4{font-family:var(--sans); font-size:17px; font-weight:700; color:var(--black); margin:18px 0 12px;}
  #sectors .item p{font-size:13.5px; line-height:1.65;}
  #sectors .item ul{list-style:none; margin-top:16px; padding-top:16px; border-top:1px solid var(--hair-l); font-size:11px;}
  #sectors .item ul li{margin-bottom:6px; padding-left:14px; position:relative;}
  #sectors .item ul li::before{content:"•"; position:absolute; left:0; color:var(--red-d);}

  /* ---------- WHY HYPE ---------- */
  #why .split{display:grid; grid-template-columns:1fr 1.15fr; gap:70px;}
  #why .statement{font-family:var(--serif); font-size:clamp(32px,4.2vw,50px); font-weight:700; line-height:1.15;}
  #why .statement .accent{font-style:italic; color:var(--red);}
  #why .sub{margin-top:26px; font-size:12px; letter-spacing:0.06em; color:var(--mute-d);}
  #why .points .pt{padding:20px 0; border-bottom:1px solid var(--hair-d);}
  #why .points .pt:last-child{border-bottom:none;}
  #why .points h4{font-size:15px; font-weight:700; color:var(--red);}
  #why .points p{font-size:13px; margin-top:8px; color:#D9D7D1; line-height:1.55;}

  /* ---------- CONTACT ---------- */
  #contact{background:var(--black); color:#D9D7D1;}
  #contact .split{display:grid; grid-template-columns:1.2fr 1fr; gap:70px; align-items:start;}
  #contact h2{font-size:clamp(40px,5.6vw,62px); line-height:1.08;}
  #contact h2 .accent{font-style:italic; color:var(--red);}
  #contact .sub{margin-top:24px; font-family:var(--serif); font-style:italic; font-size:17px; color:#D9D7D1;}
  #contact .cta-row{margin-top:36px;}
  #contact .foot-line{margin-top:64px; font-size:11px; color:var(--mute-d); letter-spacing:0.04em;}
  #contact .foot-line strong{color:var(--red); letter-spacing:0.2em; display:block; margin-top:8px; font-size:11px;}
  .contact-card{background:var(--panel); border:1px solid var(--hair-d); border-radius:6px; padding:34px 30px;}
  .contact-card h3{color:var(--white); font-size:22px;}
  .contact-card .role{font-size:10px; font-weight:700; color:var(--white); letter-spacing:0.14em; margin:8px 0 20px;}
  .contact-card .row{padding:14px 0; border-top:1px solid var(--hair-d);}
  .contact-card .row .lbl{font-size:9.5px; font-weight:700; color:var(--mute-d); letter-spacing:0.14em;}
  .contact-card .row a, .contact-card .row span{display:block; margin-top:6px; font-size:14.5px; color:#E9E9EB; transition:color .2s ease;}
  .contact-card .row a:hover{color:var(--red);}

  /* ---------- FOOTER ---------- */
  #site-footer{background:var(--black); border-top:1px solid var(--hair-d); padding:34px 0;}
  #site-footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
  #site-footer .mark{font-family:var(--serif); font-weight:700; color:var(--white); font-size:15px;}
  #site-footer .copy{font-size:10.5px; color:var(--mute-d);}

  @media (max-width:980px){
    .nav-links{position:fixed; top:0; right:-100%; width:78%; max-width:320px; height:100vh; background:var(--black); flex-direction:column; padding:100px 34px; gap:26px; transition:right .35s ease;}
    .nav-links.open{right:0;}
    #hamburger{display:flex;}
    #about .split, #why .split, #contact .split{grid-template-columns:1fr; gap:40px;}
    #context .grid3, #challenge .grid2, #support .grid3, #services .grid3, #sectors .grid3{grid-template-columns:1fr; gap:36px;}
    #process .steps{grid-template-columns:1fr 1fr; row-gap:44px;}
    #process .steps::before{display:none;}
    .hero-logo{height:74px;}
    .sec{padding:80px 0;}
  }