:root { --ink:#101010; --paper:#f6f3ed; --orange:#ff4d00; --orange-soft:#ffe6db; --grey:#6f6a62; --grey-d:#9a958c; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:'Archivo',system-ui,sans-serif; overflow-x:hidden; }
::selection { background:var(--orange); color:#fff; }
.mono { font-family:'IBM Plex Mono',monospace; }
.wrap { max-width:1240px; margin:0 auto; padding:0 40px; }
.progress { position:fixed; top:0; left:0; height:3px; background:var(--orange); width:0; z-index:100; }

/* nav */
nav { position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:16px 40px; background:rgba(246,243,237,0.85); backdrop-filter:blur(12px); border-bottom:1px solid rgba(16,16,16,0.08); }
.logo { font-weight:900; font-size:18px; letter-spacing:-0.5px; color:var(--ink); text-decoration:none; }
.logo .slash { color:var(--orange); }
nav .links { display:flex; gap:30px; align-items:center; }
nav .links a { text-decoration:none; color:var(--ink); font-size:14px; font-weight:600; position:relative; }
nav .links a:not(.nav-cta)::after { content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--orange); transition:width .25s ease; }
nav .links a:not(.nav-cta):hover::after { width:100%; }
.nav-cta { background:var(--orange); color:#fff !important; padding:11px 20px; border-radius:99px; font-size:14px; transition:transform .2s ease, box-shadow .2s ease; }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,77,0,0.35); }

/* buttons */
.btn-main { background:var(--orange); color:#fff; font-weight:800; font-size:16px; padding:18px 32px; border-radius:99px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition:transform .2s ease, box-shadow .2s ease; border:none; cursor:pointer; }
.btn-main:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 14px 34px rgba(255,77,0,0.4); }
.btn-main .arrow { transition:transform .2s ease; }
.btn-main:hover .arrow { transform:translateX(4px); }
.btn-ghost { color:var(--ink); font-weight:700; font-size:16px; text-decoration:none; border-bottom:2px solid var(--ink); padding-bottom:2px; }
.btn-ghost:hover { color:var(--orange); border-color:var(--orange); }
.btn-dark { background:var(--ink); color:#fff; font-weight:800; font-size:16px; padding:18px 34px; border-radius:99px; text-decoration:none; display:inline-block; transition:transform .2s ease, box-shadow .2s ease; }
.btn-dark:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(16,16,16,0.3); }

/* type */
.kicker { display:inline-flex; align-items:center; gap:10px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:2px; margin-bottom:22px; }
.kicker::before { content:''; width:28px; height:2px; background:var(--orange); }
h1.page { font-weight:900; font-size:clamp(38px,5.6vw,68px); line-height:1.0; letter-spacing:-2.5px; text-transform:uppercase; max-width:980px; }
h1.page em, h2.sec em { font-style:italic; color:var(--orange); }
h2.sec { font-weight:900; font-size:clamp(30px,4.2vw,50px); letter-spacing:-1.8px; text-transform:uppercase; line-height:1.04; }
.lede { font-size:17px; line-height:1.65; color:var(--grey); font-weight:500; max-width:620px; }

/* sections */
.page-hero { padding:84px 0 64px; }
.page-hero .lede { margin-top:26px; }
.dark { background:var(--ink); color:var(--paper); }
.dark .kicker { color:var(--orange); }

/* cards */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cs-card { background:#fff; border:1px solid rgba(16,16,16,0.1); border-radius:18px; padding:34px 30px; transition:transform .3s ease, box-shadow .3s ease; position:relative; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:var(--ink); }
.cs-card:hover { transform:translateY(-8px); box-shadow:0 22px 44px rgba(16,16,16,0.12); }
.cs-card::after { content:''; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.cs-card:hover::after { transform:scaleX(1); }
.cs-card .cat { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1.5px; color:var(--grey); margin-bottom:18px; }
.cs-card b.headline { display:block; font-size:26px; font-weight:900; letter-spacing:-1.2px; line-height:1.12; margin-bottom:14px; }
.cs-card b.headline .o { color:var(--orange); }
.cs-card p { font-size:14.5px; color:var(--grey); line-height:1.6; font-weight:500; flex:1; }
.cs-card .go { margin-top:22px; font-weight:700; font-size:14.5px; border-bottom:2px solid var(--ink); align-self:flex-start; padding-bottom:1px; }
.cs-card:hover .go { color:var(--orange); border-color:var(--orange); }

/* stat band */
.stat-band { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(16,16,16,0.12); border-bottom:1px solid rgba(16,16,16,0.12); }
.stat-band .st { padding:32px 28px; border-left:1px solid rgba(16,16,16,0.12); }
.stat-band .st:first-child { border-left:none; padding-left:0; }
.stat-band b { display:block; font-size:42px; font-weight:900; letter-spacing:-2px; color:var(--orange); }
.stat-band span { font-size:13px; color:var(--grey); font-weight:500; }
.dark .stat-band { border-color:rgba(246,243,237,0.15); }
.dark .stat-band .st { border-color:rgba(246,243,237,0.15); }
.dark .stat-band span { color:var(--grey-d); }

/* case study article */
.cs-section { padding:80px 0; }
.cs-section.tint { background:#fff; }
.cs-grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start; }
.cs-grid .sticky-col { position:sticky; top:110px; }
.finding { display:flex; gap:18px; padding:22px 0; border-bottom:1px solid rgba(16,16,16,0.12); align-items:flex-start; }
.finding .x { flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--orange-soft); color:var(--orange); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; }
.finding p { font-size:16.5px; font-weight:600; line-height:1.5; letter-spacing:-0.2px; }
.insight { margin-top:34px; background:var(--ink); color:var(--paper); border-radius:16px; padding:30px 32px; position:relative; }
.insight::before { content:'KEY INSIGHT'; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:2px; color:var(--orange); display:block; margin-bottom:12px; }
.insight p { font-size:17px; line-height:1.6; font-weight:600; }
.phase { display:grid; grid-template-columns:56px 1fr; gap:30px; padding-bottom:54px; position:relative; }
.phase:last-child { padding-bottom:0; }
.phase .node { width:56px; height:56px; border-radius:50%; border:2px solid rgba(246,243,237,0.25); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; background:var(--ink); position:relative; z-index:2; }
.phase.active .node { border-color:var(--orange); background:var(--orange); }
.phase h3 { font-size:23px; font-weight:800; letter-spacing:-0.7px; margin-bottom:14px; padding-top:12px; }
.phase ul { list-style:none; }
.phase li { display:flex; gap:11px; font-size:15px; color:var(--grey-d); padding:5px 0; font-weight:500; line-height:1.55; }
.phase li::before { content:'✦'; color:var(--orange); flex-shrink:0; }
.timeline-wrap { position:relative; }
.timeline-wrap .rail { position:absolute; left:27px; top:0; bottom:0; width:2px; background:rgba(246,243,237,0.12); }
.timeline-wrap .rail .fill { position:absolute; top:0; left:0; width:100%; height:0; background:var(--orange); }
.result-line { display:flex; gap:16px; align-items:baseline; padding:18px 0; border-bottom:1px solid rgba(16,16,16,0.12); }
.result-line b { font-size:26px; font-weight:900; letter-spacing:-1px; color:var(--orange); white-space:nowrap; }
.result-line span { font-size:16px; font-weight:600; }
.cs-close { font-size:17px; line-height:1.65; color:var(--grey); font-weight:500; margin-top:30px; max-width:640px; }
.back-link { font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:1px; color:var(--grey); text-decoration:none; }
.back-link:hover { color:var(--orange); }

/* quotes */
.quote-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.quote { background:rgba(246,243,237,0.04); border:1px solid rgba(246,243,237,0.14); border-radius:18px; padding:34px 32px; transition:border-color .3s ease, transform .3s ease; }
.quote:hover { border-color:var(--orange); transform:translateY(-6px); }
.quote p { font-size:18px; font-weight:600; line-height:1.55; letter-spacing:-0.3px; margin-bottom:18px; }
.quote p::before { content:'“'; color:var(--orange); }
.quote p::after { content:'”'; color:var(--orange); }
.quote .who { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:1px; color:var(--grey-d); }

/* values / philosophy */
.value-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.value { border:1px solid rgba(16,16,16,0.12); border-radius:18px; padding:32px 30px; background:#fff; transition:transform .3s ease, box-shadow .3s ease; }
.value:hover { transform:translateY(-6px); box-shadow:0 18px 38px rgba(16,16,16,0.1); }
.value .vnum { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--orange); margin-bottom:16px; letter-spacing:1.5px; }
.value h3 { font-size:20px; font-weight:800; letter-spacing:-0.5px; }
.ladder { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.rung { background:rgba(246,243,237,0.04); border:1px solid rgba(246,243,237,0.14); border-radius:18px; padding:36px 30px; position:relative; transition:transform .3s ease, border-color .3s ease; }
.rung:hover { transform:translateY(-8px); border-color:var(--orange); }
.rung .step-tag { font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--orange); border:1px solid var(--orange); border-radius:99px; display:inline-block; padding:5px 14px; margin-bottom:20px; }
.rung h3 { font-size:21px; font-weight:800; letter-spacing:-0.5px; margin-bottom:12px; }
.rung p { font-size:15px; color:var(--grey-d); line-height:1.6; font-weight:500; }
.rung .free-tag { position:absolute; top:24px; right:24px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:1.5px; color:var(--ink); background:var(--orange); padding:4px 10px; border-radius:99px; font-weight:600; }

/* resources */
.res-card { background:#fff; border:1px solid rgba(16,16,16,0.1); border-radius:18px; padding:36px 32px; display:flex; flex-direction:column; text-decoration:none; color:var(--ink); transition:transform .3s ease, box-shadow .3s ease; position:relative; overflow:hidden; }
.res-card:hover { transform:translateY(-8px); box-shadow:0 22px 44px rgba(16,16,16,0.12); }
.res-card::after { content:''; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.res-card:hover::after { transform:scaleX(1); }
.res-card .tag { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1.5px; color:var(--orange); margin-bottom:18px; }
.res-card h3 { font-size:23px; font-weight:800; letter-spacing:-0.8px; line-height:1.2; margin-bottom:14px; }
.res-card p { font-size:14.5px; color:var(--grey); line-height:1.6; font-weight:500; flex:1; }

/* final cta */
.final { background:var(--orange); color:#fff; text-align:center; padding:110px 40px; position:relative; overflow:hidden; }
.final h2 { font-weight:900; font-size:clamp(34px,5vw,62px); letter-spacing:-2.5px; text-transform:uppercase; line-height:1; max-width:920px; margin:0 auto 22px; position:relative; }
.final p { font-size:17px; opacity:0.92; margin:0 auto 38px; max-width:600px; line-height:1.6; position:relative; font-weight:500; }
.final .btn-invert { background:var(--ink); color:#fff; font-weight:800; font-size:17px; padding:20px 40px; border-radius:99px; text-decoration:none; display:inline-block; transition:transform .2s ease, box-shadow .2s ease; position:relative; }
.final .btn-invert:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 16px 40px rgba(0,0,0,0.35); }
.final .ring { position:absolute; border:2px dashed rgba(255,255,255,0.25); border-radius:50%; pointer-events:none; }
.final .r1 { width:560px; height:560px; left:-180px; top:-220px; animation:spin 40s linear infinite; }
.final .r2 { width:420px; height:420px; right:-140px; bottom:-200px; animation:spin 30s linear infinite reverse; }
@keyframes spin { to{transform:rotate(360deg);} }

/* footer */
footer { background:var(--ink); color:var(--paper); padding:70px 40px 36px; }
footer .inner { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
footer .brand p { font-size:14px; color:var(--grey-d); line-height:1.6; margin-top:14px; max-width:260px; font-weight:500; }
footer h4 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:2px; color:var(--grey); margin-bottom:18px; font-weight:600; }
footer ul { list-style:none; }
footer li { margin-bottom:11px; }
footer a { color:var(--paper); text-decoration:none; font-size:14.5px; font-weight:500; }
footer a:hover { color:var(--orange); }
.copyright { max-width:1240px; margin:54px auto 0; padding-top:24px; border-top:1px solid rgba(246,243,237,0.12); font-size:13px; color:var(--grey); }

/* reveal */
.reveal { opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.9,.3,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}
@media (max-width:900px) {
  .card-grid, .value-strip, .ladder, .quote-grid { grid-template-columns:1fr; }
  .stat-band { grid-template-columns:1fr; }
  .stat-band .st { border-left:none; padding-left:0; }
  .cs-grid { grid-template-columns:1fr; }
  .cs-grid .sticky-col { position:static; }
  footer .inner { grid-template-columns:1fr 1fr; }
  nav .links a:not(.nav-cta) { display:none; }
}