*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f0ece4;
  --ink:#0e0d0b;
  --dim:#7a7369;
  --dimmer:#c8c2b8;
  --orange:#d95f1e;
  --orange-bg:#fdf1ea;
  --rule:#ddd8d0;
  --card:#e8e3da;
  --white:#faf8f4;
  --surface:#e2ddd5;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Bricolage Grotesque',sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden}
body::after{content:'';position:fixed;inset:0;background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:80px 80px;opacity:.35;pointer-events:none;z-index:0}

/* NAV */
.cs-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:17px 28px;background:rgba(240,236,228,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
@media(min-width:768px){.cs-nav{padding:17px 48px}}
.cs-nav-logo{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.cs-nav-logo span{color:var(--orange)}
.cs-nav-back{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-decoration:none;display:flex;align-items:center;gap:8px;transition:color .2s}
.cs-nav-back::before{content:'←'}
.cs-nav-back:hover{color:var(--orange)}

/* HERO */
.cs-hero{min-height:92svh;display:flex;flex-direction:column;justify-content:flex-end;padding:110px 28px 44px;position:relative;z-index:1;border-bottom:1px solid var(--rule);overflow:hidden}
@media(min-width:768px){.cs-hero{padding:120px 48px 56px}}
.cs-hero-num{position:absolute;top:108px;right:24px;font-size:clamp(100px,22vw,260px);font-weight:800;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(14,13,11,.06);line-height:1;pointer-events:none;user-select:none}
@media(min-width:768px){.cs-hero-num{right:48px}}
.cs-eyebrow{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.cs-eyebrow::after{content:'';display:block;width:32px;height:1px;background:var(--orange);opacity:.4}
.cs-hero h1{font-size:clamp(48px,11vw,120px);font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--ink);margin-bottom:24px;position:relative;z-index:1}
.cs-hero-sub{font-size:clamp(15px,2.5vw,19px);color:var(--dim);line-height:1.65;max-width:580px;margin-bottom:36px;position:relative;z-index:1;font-weight:400}
.cs-meta-strip{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1}
.cs-pill{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border:1px solid var(--rule);color:var(--dim);border-radius:50px}
.cs-pill.hi{border-color:rgba(217,95,30,.3);color:var(--orange);background:var(--orange-bg)}

/* METRICS BAR */
.mb{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--rule);position:relative;z-index:1}
@media(min-width:540px){.mb{grid-template-columns:repeat(4,1fr)}}
.mb-c{padding:28px 28px;border-right:1px solid var(--rule);background:var(--white)}
@media(min-width:768px){.mb-c{padding:36px 48px}}
.mb-c:last-child{border-right:none}
.mb-v{font-size:clamp(34px,6vw,56px);font-weight:800;letter-spacing:-.04em;color:var(--orange);line-height:1;margin-bottom:6px}
.mb-l{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* SECTIONS */
.s{padding:60px 28px;max-width:1200px;margin:0 auto;position:relative;z-index:1}
@media(min-width:768px){.s{padding:80px 48px}}
.s-lbl{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.s-lbl span{color:var(--dimmer)}
.s-lbl::after{content:'';flex:0 0 28px;height:1px;background:var(--rule)}
.s h2{font-size:clamp(32px,6vw,64px);font-weight:800;letter-spacing:-.04em;line-height:.95;margin-bottom:22px;color:var(--ink)}
.s p{font-size:15px;color:var(--dim);line-height:1.8;max-width:640px;margin-bottom:16px;font-weight:400}
.s p strong{color:var(--ink);font-weight:600}

.rule{border:none;border-top:1px solid var(--rule);margin:0 28px;position:relative;z-index:1}
@media(min-width:768px){.rule{margin:0 48px}}

/* TWO COL */
.two{display:grid;gap:40px}
@media(min-width:768px){.two{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}
.two p{max-width:100%}

/* CHALLENGE LIST */
.chl{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.chl-item{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:var(--white);border:1px solid var(--rule);border-radius:2px}
.chl-n{font-size:20px;font-weight:800;color:var(--dimmer);line-height:1.2;flex-shrink:0;width:26px;letter-spacing:-.03em}
.chl-t strong{display:block;font-size:14px;color:var(--ink);font-weight:600;margin-bottom:2px}
.chl-t span{font-size:13px;color:var(--dim);line-height:1.6}

/* PROCESS */
.ps-grid{display:grid;grid-template-columns:1fr;gap:2px;margin-top:8px}
@media(min-width:540px){.ps-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.ps-grid{grid-template-columns:repeat(4,1fr)}}
.ps{background:var(--white);border:1px solid var(--rule);padding:28px 24px;border-radius:2px;transition:border-color .25s}
.ps:hover{border-color:rgba(217,95,30,.3)}
.ps-n{font-size:48px;font-weight:800;letter-spacing:-.05em;color:var(--dimmer);opacity:.4;line-height:1;margin-bottom:16px}
.ps h3{font-size:17px;font-weight:700;letter-spacing:-.03em;color:var(--ink);margin-bottom:8px}
.ps p{font-size:12px;color:var(--dim);line-height:1.65;max-width:100%;margin:0}

/* DECISIONS */
.decs{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.dec{display:grid;grid-template-columns:1fr;background:var(--white);border:1px solid var(--rule);overflow:hidden;border-radius:2px;transition:border-color .25s}
@media(min-width:768px){.dec{grid-template-columns:220px 1fr}}
.dec:hover{border-color:rgba(217,95,30,.3)}
.dec-lbl{padding:26px 24px;border-bottom:1px solid var(--rule);background:var(--card)}
@media(min-width:768px){.dec-lbl{border-bottom:none;border-right:1px solid var(--rule);display:flex;flex-direction:column;justify-content:space-between}}
.dec-tag{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;opacity:.8}
.dec-title{font-size:18px;font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--ink)}
.dec-body{padding:26px 28px}
.dec-body p{font-size:14px;color:var(--dim);line-height:1.75;max-width:100%;font-weight:400;margin-bottom:12px}
.dec-body p:last-of-type{margin-bottom:0}
.insight{background:var(--orange-bg);border-left:3px solid var(--orange);padding:12px 16px;margin:14px 0;font-size:14px;color:var(--orange);font-style:italic;line-height:1.55}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tag{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.08em;padding:4px 10px;border:1px solid var(--rule);border-radius:50px;text-transform:uppercase;color:var(--dim)}

/* DARK RESULTS */
.dark{background:var(--ink);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);position:relative;z-index:1}
.dark-in{max-width:1200px;margin:0 auto;padding:60px 28px}
@media(min-width:768px){.dark-in{padding:80px 48px}}
.dark-in .s-lbl{color:var(--orange)}
.dark-in .s-lbl::after{background:rgba(255,255,255,.1)}
.dark-in h2{font-size:clamp(32px,6vw,60px);font-weight:800;letter-spacing:-.04em;line-height:.95;margin-bottom:36px;color:var(--bg)}
.dm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
@media(min-width:768px){.dm-grid{grid-template-columns:repeat(4,1fr)}}
.dm-c{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);padding:28px 24px;border-radius:2px}
@media(min-width:768px){.dm-c{padding:36px 32px}}
.dm-v{font-size:clamp(36px,6vw,58px);font-weight:800;letter-spacing:-.04em;color:var(--orange);line-height:1;margin-bottom:8px}
.dm-l{font-size:12px;color:rgba(240,236,228,.4);line-height:1.5}
.dm-qual{display:grid;grid-template-columns:1fr;gap:2px;margin-top:2px}
@media(min-width:540px){.dm-qual{grid-template-columns:1fr 1fr}}
.dq{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:18px 20px;display:flex;gap:12px;align-items:flex-start;border-radius:2px}
.dq::before{content:'→';color:var(--orange);flex-shrink:0;margin-top:1px}
.dq p{font-size:13px;color:rgba(240,236,228,.4);line-height:1.6;margin:0;max-width:100%}

/* LEARNINGS */
.lg-grid{display:grid;grid-template-columns:1fr;gap:2px;margin-top:8px}
@media(min-width:540px){.lg-grid{grid-template-columns:1fr 1fr}}
.lg{background:var(--white);border:1px solid var(--rule);padding:28px 24px;border-radius:2px;transition:border-color .25s}
.lg:hover{border-color:rgba(217,95,30,.3)}
.lg-n{font-size:52px;font-weight:800;letter-spacing:-.05em;color:var(--dimmer);opacity:.3;line-height:1;margin-bottom:12px}
.lg h3{font-size:17px;font-weight:700;letter-spacing:-.03em;color:var(--ink);margin-bottom:8px}
.lg p{font-size:13px;color:var(--dim);line-height:1.65;max-width:100%;margin:0}

/* IMAGE PH */
.iph{background:var(--card);border:1px dashed var(--dimmer);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;border-radius:2px}
.iph-ico{font-size:28px;opacity:.18}
.iph-lbl{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);text-align:center;line-height:1.5}
.iph-hint{position:absolute;bottom:8px;right:8px;font-family:'DM Mono',monospace;font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);border:1px dashed var(--dimmer);padding:2px 7px;border-radius:1px}

/* PAGINATION */
.pg{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);position:relative;z-index:1}
.pg-a{display:flex;flex-direction:column;gap:6px;padding:28px 28px;text-decoration:none;border-right:1px solid var(--rule);transition:background .2s;background:var(--white)}
@media(min-width:768px){.pg-a{padding:36px 48px}}
.pg-a:last-child{border-right:none;align-items:flex-end;text-align:right}
.pg-a:hover{background:var(--orange-bg)}
.pg-dir{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:7px}
.pg-a:first-child .pg-dir::before{content:'←'}
.pg-a:last-child .pg-dir::after{content:'→'}
.pg-domain{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);opacity:.7}
.pg-title{font-size:clamp(16px,3vw,26px);font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1.05;transition:color .2s}
.pg-a:hover .pg-title{color:var(--orange)}
.pg-back{display:flex;align-items:center;justify-content:center;padding:18px;border-top:1px solid var(--rule);background:var(--bg);text-decoration:none;position:relative;z-index:1;transition:background .2s}
.pg-back:hover{background:var(--white)}
.pg-back span{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);transition:color .2s}
.pg-back:hover span{color:var(--orange)}

/* WA */
.wa{position:fixed;bottom:24px;right:24px;z-index:300;width:52px;height:52px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 4px 20px rgba(37,211,102,.3);transition:transform .2s}
.wa:hover{transform:scale(1.07)}
.wa svg{width:26px;height:26px;fill:#fff}
.wa-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid #25d366;animation:ring 2.2s ease infinite;pointer-events:none}
@keyframes ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.7);opacity:0}}

/* FOOTER */
.cs-ft{border-top:1px solid var(--rule);padding:22px 28px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;background:var(--bg)}
@media(min-width:640px){.cs-ft{flex-direction:row;align-items:center;justify-content:space-between;padding:22px 48px}}
.cs-ft p,.cs-ft a{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--dimmer);text-decoration:none;transition:color .2s}
.cs-ft a:hover{color:var(--orange)}

/* SCROLL REVEAL */
.sr{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.sr.in{opacity:1;transform:translateY(0)}
