/* ── TOKENS ─────────────────────────────────────────────── */ :root{ color-scheme:light; --paper:#f4f2ed; --paper-2:#eae7e0; --card:#fcfcfb; --ink:#0b0b0b; --ink-2:#4a4945; --ink-3:#87857f; --rule:rgba(11,11,11,.20); --hair:rgba(11,11,11,.10); --display:'Anton',Impact,'Haettenschweiler','Arial Narrow',sans-serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --gut:clamp(20px,5vw,32px); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink); font-family:var(--sans);font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;height:auto} .wrap{max-width:1180px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)} /* NOTE: .wrap uses padding LONGHANDS so section padding never collides. */ h1,h2,h3,.disp{font-family:var(--display);font-weight:400;text-transform:uppercase; letter-spacing:.005em;line-height:.9;margin:0;text-wrap:balance} /* .9 suits a single line; anything that wraps needs air between the lines */ h2,h3{line-height:1.02} p,li{text-wrap:pretty} .lvl-name,.case-q,.tier-nm,.dg-nm,.sk-n,.ind-c,.ex-lead,.who-h{text-wrap:balance} h2{font-size:clamp(28px,5.2vw,44px)} h3{font-size:clamp(19px,3vw,26px)} p{margin:0 0 1.05em;max-width:66ch} a{color:inherit} .lede{font-size:clamp(18px,2.4vw,21px);line-height:1.5} .body-2{color:var(--ink-2)} .eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-3);margin:0 0 16px} section{padding-top:clamp(48px,8vw,84px);padding-bottom:clamp(48px,8vw,84px)} /* clear the sticky nav when jumping to an anchor */ section[id],div[id],header[id]{scroll-margin-top:74px} .sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;flex-wrap:wrap} .sec-num{font-family:var(--display);font-size:12px;color:var(--ink-3);letter-spacing:.1em} .rule{border-top:1.5px solid var(--ink)} /* ── NAV ────────────────────────────────────────────────── */ body > nav{position:sticky;top:0;z-index:80;background:var(--paper); border-bottom:1.5px solid var(--ink)} .nav-in{display:flex;align-items:center;gap:20px;min-height:58px; padding-top:8px;padding-bottom:8px} .mark{text-decoration:none;display:block;line-height:1.05} .mark-1{display:block;font-family:var(--display);font-size:clamp(16px,2.4vw,20px); text-transform:uppercase;white-space:nowrap} .mark-2{display:block;font-size:10.5px;font-weight:600;letter-spacing:.11em; text-transform:uppercase;color:var(--ink-3);margin-top:3px;white-space:nowrap} .nav-links{display:flex;gap:18px;margin-left:auto;align-items:center} .nav-links a:not(.btn){white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;text-decoration:none;color:var(--ink-2)} .nav-links a:not(.btn):hover{color:var(--ink)} @media(max-width:1210px){.nav-links a:not(.btn){display:none}} @media(max-width:1210px){.nav-links .btn{display:none}.nav-in{gap:12px}} .nav-sm{display:none} @media(max-width:560px){.nav-lg{display:none}.nav-sm{display:inline} .nav-in{gap:12px}.btn{padding:12px 16px}} .btn{display:inline-flex;align-items:center;justify-content:center; min-height:46px;background:var(--ink);color:var(--paper); font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:12px 20px;text-decoration:none;border:1.5px solid var(--ink);cursor:pointer} .btn:hover{background:transparent;color:var(--ink)} .btn-ghost{background:transparent;color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:var(--paper)} .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .hatch{margin:30px 0 0;padding-top:18px;border-top:1px solid var(--rule); font-size:15px;color:var(--ink-3);max-width:56ch;line-height:1.5} .hatch a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px; white-space:nowrap} .hatch a:hover{color:var(--ink)} @media(max-width:560px){.hatch a{white-space:normal}} /* ── HERO ───────────────────────────────────────────────── */ .hero{padding-top:clamp(44px,7vw,76px);padding-bottom:clamp(30px,5vw,44px)} .kicker{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-3);margin:0 0 20px} .hero h1{font-size:clamp(29px,4.7vw,60px);letter-spacing:-.005em;line-height:.96} .hero .sub{font-size:clamp(17px,2.3vw,21px);color:var(--ink-2); max-width:60ch;margin-top:26px;line-height:1.5} /* ── PROOF BAR ──────────────────────────────────────────── */ .proof{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink); padding-top:clamp(38px,5vw,54px);padding-bottom:clamp(38px,5vw,54px)} .proof .who-h{margin:0} .who-h{font-size:clamp(24px,3.6vw,34px);margin:0 0 18px} .who-deck{font-size:clamp(17px,2.3vw,22px);color:var(--ink);margin:0 0 26px; max-width:60ch;line-height:1.4;text-wrap:balance} .who{display:grid;grid-template-columns:290px 1fr;gap:46px;align-items:center} .who p{margin:0 0 1em;font-size:15.5px;color:var(--ink-2);line-height:1.6;max-width:none} .who-body p:last-child{margin-bottom:0} .who-lede{font-size:17.5px!important;color:var(--ink)!important;line-height:1.5!important; margin:0!important} @media(max-width:820px){.who{grid-template-columns:1fr;gap:24px;align-items:start} .portrait{max-width:230px}} .ind{display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1px solid var(--rule)} .ind>div{padding:16px 22px 18px 0;border-right:1px solid var(--hair)} .ind>div:nth-child(3n){border-right:0} .ind>div:nth-child(n+4){border-top:1px solid var(--hair)} .ind>div:nth-child(3n+1){padding-left:0} .ind>div+div{padding-left:22px} .ind-h{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-3);margin:0 0 10px} .ind-c{font-family:var(--display);font-size:clamp(17px,2.1vw,23px); text-transform:uppercase;line-height:1.05;margin:0} .ind-r{font-size:13.5px;color:var(--ink-2);line-height:1.45;margin:7px 0 0;font-weight:500} .ind-y{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--ink-3);margin:5px 0 0} .clients{border-top:1px solid var(--rule);padding-top:20px;margin-top:4px} .client-list{font-family:var(--display);font-size:clamp(15px,2vw,22px); text-transform:uppercase;margin:0;max-width:none} .portrait{margin:0} .portrait img{display:block;width:100%;height:auto;border:1.5px solid var(--ink); filter:grayscale(1) contrast(1.06)} .portrait figcaption{font-size:10.5px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-3);margin-top:10px;text-align:center} .edu{border-top:1px solid var(--rule);padding-top:22px;margin-top:26px} .edu-grid{display:grid;grid-template-columns:1fr 1fr;gap:0} .edu-grid>div{padding-right:26px;border-right:1px solid var(--hair)} .edu-grid>div:last-child{border-right:0;padding-right:0;padding-left:26px} .edu-d{font-family:var(--display);font-size:clamp(15px,1.9vw,20px); text-transform:uppercase;margin:0 0 4px;line-height:1.05} .edu-s{font-size:14.5px;color:var(--ink-2);margin:0 0 6px;font-weight:600} .edu-n{font-size:13.5px;color:var(--ink-3);margin:0;line-height:1.5} @media(max-width:640px){.edu-grid{grid-template-columns:1fr} .edu-grid>div{border-right:0;padding:0 0 16px} .edu-grid>div:last-child{padding:16px 0 0;border-top:1px solid var(--hair)}} @media(max-width:900px){.ind{grid-template-columns:1fr 1fr} .ind>div{border-top:1px solid var(--hair)} .ind>div:nth-child(3n){border-right:1px solid var(--hair)} .ind>div:nth-child(2n){border-right:0} .ind>div:nth-child(odd){padding-left:0} .ind>div:nth-child(even){padding-left:22px}} @media(max-width:560px){.ind{grid-template-columns:1fr} .ind>div{border-right:0;padding-left:0!important}} /* ── SPLIT PANELS ───────────────────────────────────────── */ .split{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink); margin-top:24px} .split>div{padding:clamp(24px,3.4vw,36px)} .split>div:first-child{border-right:1.5px solid var(--ink)} @media(max-width:820px){ .split{grid-template-columns:1fr} .split>div:first-child{border-right:0;border-bottom:1.5px solid var(--ink)} } .jr{margin:0;padding:0;list-style:none} .jr li{font-size:15.5px;color:var(--ink-2);padding:10px 0 10px 18px;position:relative; border-top:1px solid var(--hair);line-height:1.45} .jr li:before{content:"›";position:absolute;left:0;color:var(--ink-3)} .jr-close{margin:26px 0 0;font-size:16.5px;max-width:76ch; border-top:1.5px solid var(--ink);padding-top:20px} /* ── LEVELS (vertical ascent — the argument climbs) ────── */ .levels{list-style:none;margin:26px 0 0;padding:0; border-top:1.5px solid var(--ink)} .lvl{display:grid;grid-template-columns:64px 1fr 168px;gap:20px; align-items:center;border-bottom:1.5px solid var(--ink)} .lvl-1{padding:20px 0} .lvl-2{padding:30px 0} .lvl-3{padding:30px 0} .lvl-4{padding:40px 22px;background:var(--ink);color:var(--paper); grid-template-columns:64px 1fr 168px} .lvl-n{font-family:var(--display);line-height:1;color:var(--ink-3)} .lvl-n{font-size:20px;letter-spacing:.04em} .lvl-4 .lvl-n{color:var(--paper);opacity:.55} .lvl-name{font-family:var(--display);text-transform:uppercase;line-height:1; margin:0 0 8px} .lvl-name{font-size:clamp(19px,2.4vw,24px)} .lvl-items{font-size:14.5px;color:var(--ink-2);margin:0;max-width:60ch} .lvl-4 .lvl-items{color:rgba(255,255,255,.72)} .lvl-status{font-size:10.5px;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:var(--ink-3);text-align:right;line-height:1.5} .lvl-4 .lvl-status{color:var(--paper)} @media(max-width:820px){ .lvl{grid-template-columns:44px 1fr;gap:14px} .lvl-4{grid-template-columns:44px 1fr} .lvl-status{grid-column:2;text-align:left;margin-top:10px} } /* ── FRAMEWORK ──────────────────────────────────────────── */ .flow{font-family:var(--display);font-size:clamp(15px,2.6vw,27px); line-height:1.35;margin:0 0 28px;color:var(--ink)} .steps{display:grid;grid-template-columns:repeat(3,1fr); border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink)} .steps>div{padding:24px 20px;border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink)} .steps .n{font-family:var(--display);font-size:13px;color:var(--ink-3); display:block;margin-bottom:10px;letter-spacing:.1em} .steps h3{margin-bottom:8px} .steps p{font-size:14.5px;color:var(--ink-2);margin:0} @media(max-width:820px){.steps{grid-template-columns:1fr 1fr}} @media(max-width:520px){.steps{grid-template-columns:1fr}} /* ── CASE STUDIES ───────────────────────────────────────── */ .cases{border-top:1.5px solid var(--ink);margin-top:26px} details.case{border-bottom:1.5px solid var(--ink)} details.case>summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0; position:relative;display:block} details.case>summary::-webkit-details-marker{display:none} .case-q{font-family:var(--display);font-size:clamp(17px,2.6vw,25px); line-height:1.15;display:block;margin:0;text-transform:none;letter-spacing:0} .ctx-box{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.4fr;gap:22px; border:1px solid var(--rule);padding:16px 18px;margin:0 0 14px} .ctx-k{display:block;font-size:10px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-3);margin-bottom:5px} .ctx-v{display:block;font-family:var(--display);font-size:clamp(15px,1.8vw,19px); text-transform:uppercase;line-height:1.1} .ctx-s{display:block;font-size:12.5px;color:var(--ink-3);margin-top:4px} @media(max-width:640px){.ctx-box{grid-template-columns:1fr;gap:14px}} details.case>summary:after{content:"+";position:absolute;right:6px;top:50%; transform:translateY(-50%);font-family:var(--display);font-size:26px; color:var(--ink-3);line-height:1} details.case[open]>summary:after{content:"–"} details.case:hover>summary:after{color:var(--ink)} .case-body{padding:0 0 30px;display:grid;grid-template-columns:1fr 1fr; gap:0 34px} .case-body dl{margin:0} .cb{border-top:1px solid var(--hair);padding:14px 0} .cb dt{font-size:10.5px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-3);margin-bottom:5px} .cb dd{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.55} .cb dd b{color:var(--ink);font-weight:600} @media(max-width:820px){.case-body{grid-template-columns:1fr}} .todo{background:var(--paper-2);color:var(--ink-3);font-size:11px; font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:2px 6px;border:1px dashed var(--rule);white-space:nowrap} /* ── LIBRARY ────────────────────────────────────────────── */ .lib{border:1.5px solid var(--ink);padding:clamp(24px,3.6vw,40px);margin-top:24px} .menu{display:grid;grid-template-columns:repeat(5,1fr);gap:0; border-top:1px solid var(--rule);margin-top:24px} .menu>div{padding:20px 15px 18px 0;border-right:1px solid var(--hair);min-width:0} .menu>div:nth-child(5n){border-right:0;padding-right:0} .menu>div+div{padding-left:15px} .menu li b{overflow-wrap:break-word} .menu-h{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3);margin:0 0 12px;min-height:2.6em;line-height:1.3} .menu ul{margin:0;padding:0;list-style:none} .menu li{padding:9px 0;border-top:1px solid var(--hair);line-height:1.35} .menu li b{display:block;font-size:14px;font-weight:600;color:var(--ink)} .menu li em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3); margin-top:3px;line-height:1.4} .lib-note{font-size:14.5px;color:var(--ink-2);margin:24px 0 0; border-top:1px solid var(--rule);padding-top:18px;max-width:70ch} @media(max-width:1080px){.menu{grid-template-columns:repeat(3,1fr)} .menu>div{border-right:1px solid var(--hair);padding-left:18px} .menu>div:nth-child(3n){border-right:0;padding-right:0} .menu>div:nth-child(3n+1){padding-left:0} .menu>div:nth-child(n+4){border-top:1px solid var(--hair)}} @media(max-width:760px){.menu{grid-template-columns:1fr 1fr} .menu>div{border-right:1px solid var(--hair);padding-left:18px} .menu>div:nth-child(3n){border-right:1px solid var(--hair);padding-right:15px} .menu>div:nth-child(3n+1){padding-left:18px} .menu>div:nth-child(2n){border-right:0;padding-right:0} .menu>div:nth-child(odd){padding-left:0} .menu>div:nth-child(n+3){border-top:1px solid var(--hair)}} @media(max-width:560px){.menu{grid-template-columns:1fr} .menu>div{border-right:0!important;padding-left:0!important;padding-right:0!important} .menu>div+div{border-top:1px solid var(--hair)}} .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1.5px solid var(--ink);border-bottom:1px solid var(--rule)} .steps3>div{padding:20px 24px 22px 0;border-right:1px solid var(--hair)} .steps3>div:last-child{border-right:0} .steps3>div+div{padding-left:24px} .s3n{font-family:var(--display);font-size:12px;color:var(--ink-3);letter-spacing:.1em; display:block;margin-bottom:9px} .s3h{font-family:var(--display);font-size:clamp(16px,2vw,21px);text-transform:uppercase; margin:0 0 7px;line-height:1.1;max-width:none} .s3d{font-size:14px;color:var(--ink-2);margin:0;line-height:1.5;max-width:none} @media(max-width:760px){.steps3{grid-template-columns:1fr} .steps3>div{border-right:0;border-bottom:1px solid var(--hair);padding-left:0!important} .steps3>div:last-child{border-bottom:0}} .plug{padding:20px 0 4px} .plug-h{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3);margin:0 0 12px} .chips{display:flex;flex-wrap:wrap;gap:7px} .chips span{border:1.5px solid var(--rule);padding:7px 12px;font-size:13.5px; color:var(--ink-2);line-height:1.2} .plug-n{font-size:13.5px;color:var(--ink-3);margin:14px 0 0;max-width:70ch} .lib-note{max-width:none} /* ── FOLDER EXAMPLE ─────────────────────────────────────── */ .example{border-top:1px solid var(--rule);margin-top:26px;padding-top:22px} .ex-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end; margin-bottom:18px} .ex-lead{font-size:16.5px;color:var(--ink);margin:0;line-height:1.45} @media(max-width:820px){.ex-head{grid-template-columns:1fr;gap:14px;align-items:start}} .tree{border:1.5px solid var(--ink);padding:18px 20px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px; overflow-x:auto} .tree details{margin:0} .tree summary{list-style:none;cursor:pointer;padding:5px 0;display:flex; align-items:baseline;gap:7px;flex-wrap:wrap} .tree summary::-webkit-details-marker{display:none} .tree summary:hover b{text-decoration:underline} .fx{display:inline-block;transition:transform .12s;color:var(--ink-3); font-family:var(--sans);flex:none} .tree details[open]>summary .fx{transform:rotate(90deg)} .tree b{font-weight:700;color:var(--ink)} .tree em,.tree summary em{font-style:normal;font-family:var(--sans);font-size:12px; color:var(--ink-3)} .tl{border-left:1px solid var(--rule);margin-left:6px;padding-left:16px} .f{margin:0;padding:5px 0;display:flex;align-items:baseline;gap:10px; flex-wrap:wrap;max-width:none} .f span{color:var(--ink-2)} .f.dim span{color:var(--ink-3);font-style:italic} .ex-note{font-size:13.5px;color:var(--ink-3);margin:0;line-height:1.55;max-width:none} /* ── ANALYST SKILLS ─────────────────────────────────────── */ .sk-grid{margin-top:26px;border-top:1.5px solid var(--ink)} .sk{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:24px; padding:16px 0;border-bottom:1px solid var(--rule)} .sk-h{border-bottom:1.5px solid var(--ink);padding:10px 0} .sk-h p{font-size:10px!important;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-3)!important;font-family:var(--sans)!important} .sk-n{font-family:var(--display);font-size:clamp(15px,1.9vw,19px);text-transform:uppercase; margin:0;line-height:1.15} .sk-d{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.5} .sk-w{font-size:12.5px;color:var(--ink-3);margin:0;line-height:1.5} @media(max-width:820px){ .sk{grid-template-columns:1fr;gap:7px;padding:18px 0} .sk-h{display:none} } /* ── DOMAINS ────────────────────────────────────────────── */ .dom{display:grid;grid-template-columns:repeat(4,1fr); border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink); margin-top:24px} .dom>div{padding:24px 20px;border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink)} .dom h3{font-size:clamp(16px,2vw,20px);margin-bottom:12px} .dom ul{margin:0;padding:0;list-style:none;font-size:14.5px; color:var(--ink-2);line-height:1.85} @media(max-width:900px){.dom{grid-template-columns:1fr 1fr}} @media(max-width:560px){.dom{grid-template-columns:1fr}} /* ── ROI LOOP ───────────────────────────────────────────── */ .loop{border:1.5px solid var(--ink);padding:clamp(22px,3vw,32px);margin-top:24px} .loop-chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px} .loop-chain span{font-family:var(--display);text-transform:uppercase; font-size:clamp(15px,2.1vw,24px);line-height:1} .loop-chain i{font-style:normal;color:var(--ink-3);font-size:15px} .loop-chain span:last-of-type{background:var(--ink);color:var(--paper);padding:5px 10px} .loop-back{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--rule); font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:var(--ink-3);max-width:none} /* ── DIAGNOSTIC ─────────────────────────────────────────── */ .dg{border:1.5px solid var(--ink);padding:clamp(22px,3vw,34px);margin-top:24px} .dg-q{border:0;padding:0;margin:0 0 30px} .dg-q legend{padding:0;margin-bottom:14px;font-size:16.5px;font-weight:600; display:flex;align-items:baseline;gap:10px} .dg-n{font-family:var(--display);font-size:12px;color:var(--ink-3);letter-spacing:.1em} .dg-opts{display:flex;flex-wrap:wrap;gap:9px} .dg-opts input{position:absolute;opacity:0;width:0;height:0} .dg-opts label{display:inline-block;cursor:pointer} .dg-opts span{display:inline-block;border:1.5px solid var(--rule);padding:10px 15px; font-size:14.5px;color:var(--ink-2);line-height:1.3;min-height:44px; display:flex;align-items:center} .dg-opts label:hover span{border-color:var(--ink);color:var(--ink)} .dg-opts input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)} .dg-opts input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px} .dg-hint{font-size:13px;color:var(--ink-3);margin:12px 0 0} .dg-out{margin-top:26px;border:1.5px solid var(--ink);padding:clamp(22px,3vw,34px)} .dg-arch{border:1.5px solid var(--ink);background:var(--ink);color:var(--paper); padding:24px 26px;margin:0 0 28px} .dg-arch-k{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; opacity:.7;margin:0 0 10px} .dg-arch-t{font-size:16.5px;line-height:1.5;margin:0 0 18px;max-width:62ch; color:rgba(255,255,255,.88)} .dg-arch .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)} .dg-arch .btn:hover{background:transparent;color:var(--paper)} .dg-lead{font-size:clamp(17px,2.2vw,20px);line-height:1.45;margin:0 0 6px;max-width:64ch} .dg-sub{font-size:14px;color:var(--ink-3);margin:0 0 22px} .dg-list{margin:0;padding:0;list-style:none;border-top:1.5px solid var(--ink)} .dg-list li{padding:16px 0;border-bottom:1px solid var(--rule); display:grid;grid-template-columns:30px 1fr;gap:14px} .dg-rank{font-family:var(--display);font-size:17px;color:var(--ink-3);line-height:1.3} .dg-nm{font-family:var(--display);font-size:clamp(16px,2vw,21px);text-transform:uppercase; margin:0 0 5px;line-height:1.1} .dg-why{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.45} .dg-gap{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;border:1px dashed var(--rule);color:var(--ink-3); padding:3px 8px;margin-top:8px} .dg-foot{margin:24px 0 0;font-size:15px;color:var(--ink-2);max-width:66ch} /* ── FREE TIER ──────────────────────────────────────────── */ .free{border:1.5px solid var(--ink);padding:26px 24px;margin-top:26px; display:grid;grid-template-columns:1fr 1.1fr auto;gap:26px;align-items:center} .free-p{margin:6px 0 0;color:var(--ink-2);font-size:15px} .free-list{margin:0;padding:0;list-style:none;font-size:15px;color:var(--ink-2)} .free-list li{padding:5px 0 5px 17px;position:relative} .free-list li:before{content:"\2192";position:absolute;left:0;color:var(--ink-3)} .free-cta{display:flex;flex-direction:column;gap:10px} @media(max-width:900px){.free{grid-template-columns:1fr;gap:18px} .free-cta{flex-direction:row;flex-wrap:wrap}} /* ── PRICING LADDER ─────────────────────────────────────── */ .ladder{display:grid;grid-template-columns:repeat(4,1fr); border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink); margin-top:26px} .tier{padding:26px 22px 28px;border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);display:flex;flex-direction:column} .tier.feat{background:var(--ink);color:var(--paper)} .tier.feat .price-was,.tier.feat li{color:rgba(255,255,255,.75)} .tier-nm{font-family:var(--display);font-size:clamp(18px,2.3vw,25px); margin-bottom:6px} .badge{display:inline-block;align-self:flex-start;font-size:9.5px;font-weight:700;letter-spacing:.15em; text-transform:uppercase;border:1px solid currentColor;padding:3px 7px; margin-bottom:12px;opacity:.85} .price{font-family:var(--display);font-size:clamp(26px,3.6vw,38px); line-height:1;margin:10px 0 4px} .price-was{font-size:13px;color:var(--ink-3);margin-bottom:14px} .until{display:block;margin-top:5px;color:var(--ink);font-weight:700} .tier.feat .until{color:var(--paper)} .price-was s{opacity:.75} .tier ul{margin:14px 0 0;padding:0;list-style:none;font-size:14.5px; color:var(--ink-2);line-height:1.5;flex:1} .tier li{padding:8px 0 8px 17px;position:relative;border-top:1px solid var(--hair)} .tier li:before{content:"›";position:absolute;left:0;opacity:.6} .tier .btn{margin-top:20px;width:100%} .hl{background:var(--paper);color:var(--ink);padding:0 5px;font-weight:700} .tier.feat .hl{background:var(--paper);color:var(--ink)} .connect{display:grid;grid-template-columns:repeat(4,1fr);margin-top:-1px} .conn{grid-column:1;display:flex;flex-direction:column;align-items:center; text-decoration:none;padding:0 12px 4px} .conn-line{width:1.5px;height:34px;background:var(--ink)} .conn-lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-2);margin:10px 0 6px;text-align:center;line-height:1.4} .conn-arrow{font-size:17px;color:var(--ink);line-height:1} .conn:hover .conn-lbl,.conn:hover .conn-arrow{color:var(--ink)} .conn:hover .conn-line{background:var(--ink)} @media(max-width:1000px){.connect{grid-template-columns:1fr 1fr}} @media(max-width:620px){.connect{grid-template-columns:1fr} .conn-line{height:22px}} .connect{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px} .conn{grid-column:1;display:flex;flex-direction:column;align-items:center; text-decoration:none;padding:0 12px 4px} .conn-line{width:1.5px;height:34px;background:var(--ink)} .conn-lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-2);margin:10px 0 6px;text-align:center;line-height:1.4} .conn-arrow{font-size:17px;color:var(--ink);line-height:1} .conn:hover .conn-lbl{color:var(--ink)} @media(max-width:1000px){.connect{grid-template-columns:1fr 1fr}} @media(max-width:620px){.connect{grid-template-columns:1fr}.conn-line{height:22px}} .ladder-note{font-size:13px;color:var(--ink-3);margin:16px 0 0;max-width:70ch} .ladder-note a{text-decoration:underline;text-underline-offset:2px;color:var(--ink-2)} .ladder-note a:hover{color:var(--ink)} .tier-ctas{display:flex;flex-direction:column;gap:8px;margin-top:20px} .tier-ctas .btn{margin-top:0} .soon-tag{font-size:9px;font-weight:700;letter-spacing:.12em;border:1px solid currentColor; padding:2px 5px;margin-left:8px;opacity:.7} .is-soon{opacity:.72} .tier.feat .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)} .tier.feat .btn:hover{background:transparent;color:var(--paper)} @media(max-width:1000px){.ladder{grid-template-columns:1fr 1fr}} @media(max-width:620px){.ladder{grid-template-columns:1fr}} /* ── STATEMENT BAND ─────────────────────────────────────── */ .band{background:var(--ink);color:var(--paper); padding-top:clamp(52px,8vw,86px);padding-bottom:clamp(52px,8vw,86px)} .band h2{font-size:clamp(28px,5.6vw,58px)} .band p{color:rgba(255,255,255,.75)} .band .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)} .band .btn:hover{background:transparent;color:var(--paper)} /* ── FAQ ────────────────────────────────────────────────── */ .faq{border-top:1.5px solid var(--ink);margin-top:24px} details.q{border-bottom:1px solid var(--rule)} details.q>summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0; position:relative;font-weight:600;font-size:16.5px} details.q>summary::-webkit-details-marker{display:none} details.q>summary:after{content:"+";position:absolute;right:6px;top:16px; font-family:var(--display);font-size:22px;color:var(--ink-3)} details.q[open]>summary:after{content:"–"} details.q p{padding-bottom:18px;margin:0;color:var(--ink-2);font-size:15.5px} footer{border-top:1.5px solid var(--ink); padding-top:36px;padding-bottom:52px;font-size:14px;color:var(--ink-2)} .f-in{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap} .f-in nav{position:static;border:0;background:none} .f-links{display:flex;gap:20px;flex-wrap:wrap} .f-links a{text-decoration:none;color:var(--ink-2)} .f-links a:hover{color:var(--ink)} .skip{position:absolute;left:-9999px} .skip:focus{left:var(--gut);top:8px;z-index:200;background:var(--ink); color:var(--paper);padding:10px 16px} /* ══ GROWTH ARCHITECTURE ══ */ /* ── GROWTH ARCHITECTURE PAGE ───────────────────────────── */ .ga-hero{padding-top:clamp(44px,7vw,76px);padding-bottom:clamp(24px,4vw,36px)} .ga-hero h1{font-size:clamp(31px,5.2vw,66px);letter-spacing:-.006em;line-height:.96} .ga-note{font-size:13px;color:var(--ink-3);margin:22px 0 0;letter-spacing:.04em} .pain{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--ink); margin-top:26px} .pain div{padding:24px 20px;border-right:1px solid var(--rule)} .pain div:last-child{border-right:0} .pain p{margin:0;font-size:15.5px;font-weight:500;line-height:1.4;max-width:none} .pain .n{font-family:var(--display);font-size:12px;color:var(--ink-3);display:block; margin-bottom:12px;letter-spacing:.1em} @media(max-width:900px){.pain{grid-template-columns:1fr 1fr} .pain div{border-bottom:1px solid var(--rule)} .pain div:nth-child(2n){border-right:0}} @media(max-width:520px){.pain{grid-template-columns:1fr}.pain div{border-right:0}} .thesis{border:1.5px solid var(--ink);background:var(--ink);color:var(--paper); padding:clamp(28px,4vw,44px);margin-top:26px} .thesis p{font-family:var(--display);text-transform:uppercase; font-size:clamp(21px,3.4vw,40px);line-height:1.06;margin:0;max-width:22ch; text-wrap:balance} .thesis .sub{font-family:var(--sans);text-transform:none;font-size:16.5px; color:rgba(255,255,255,.75);margin:20px 0 0;max-width:64ch;line-height:1.55} .stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);margin-top:26px} .stats div{padding:26px 22px;border-right:1px solid var(--rule)} .stats div:last-child{border-right:0} .stat-v{font-family:var(--display);font-size:clamp(32px,5.4vw,58px);line-height:1; margin:0 0 8px} .stat-l{font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; margin:0 0 5px} .stat-d{font-size:13.5px;color:var(--ink-3);margin:0;max-width:none} @media(max-width:760px){.stats{grid-template-columns:1fr} .stats div{border-right:0;border-bottom:1px solid var(--rule)} .stats div:last-child{border-bottom:0}} .two{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--ink); margin-top:26px} .two>div{padding:clamp(24px,3.2vw,34px)} .two>div:first-child{border-right:1.5px solid var(--ink)} .two ul{margin:16px 0 0;padding:0;list-style:none} .two li{font-size:15.5px;color:var(--ink-2);padding:10px 0 10px 18px;position:relative; border-top:1px solid var(--hair);line-height:1.45} .two li:before{content:"\203A";position:absolute;left:0;color:var(--ink-3)} @media(max-width:820px){.two{grid-template-columns:1fr} .two>div:first-child{border-right:0;border-bottom:1.5px solid var(--ink)}} .sig-note{font-size:14.5px;color:var(--ink-2);margin:18px 0 0; border-left:2px solid var(--ink);padding:2px 0 2px 16px;max-width:70ch;line-height:1.55} .sig{margin-top:26px;border-top:1.5px solid var(--ink)} .sig-r{display:grid;grid-template-columns:1fr .6fr 1.5fr;gap:22px;padding:15px 0; border-bottom:1px solid var(--rule)} .sig-h{border-bottom:1.5px solid var(--ink);padding:10px 0} .sig-h p{font-size:10px!important;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-3)!important;font-family:var(--sans)!important; margin:0} .sig-n{font-family:var(--display);font-size:clamp(14px,1.7vw,18px);text-transform:uppercase; margin:0;line-height:1.15} .sig-t{font-family:var(--display);font-size:clamp(14px,1.7vw,18px);margin:0} .sig-d{font-size:14px;color:var(--ink-2);margin:0;line-height:1.45} @media(max-width:760px){.sig-r{grid-template-columns:1fr;gap:5px;padding:16px 0} .sig-h{display:none}} .price-box{border:1.5px solid var(--ink);padding:clamp(26px,3.6vw,40px);margin-top:26px; display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center} .price-box .p{font-family:var(--display);font-size:clamp(30px,4.6vw,50px);line-height:1; margin:0 0 8px} .price-box .d{font-size:15px;color:var(--ink-2);margin:0;max-width:52ch} @media(max-width:760px){.price-box{grid-template-columns:1fr;gap:20px}} .back{font-size:13px;color:var(--ink-3);text-decoration:none} .back:hover{color:var(--ink)} /* ══ ARTICLE ══ */ /* ── ARTICLE ────────────────────────────────────────────── */ .art-head{padding-top:clamp(30px,4vw,46px);padding-bottom:clamp(22px,3vw,30px)} .crumb{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);text-decoration:none;display:inline-block;margin-bottom:26px} .crumb:hover{color:var(--ink)} .art-head h1{font-size:clamp(30px,4.6vw,58px);letter-spacing:-.004em;line-height:.98; max-width:20ch} .art-desc{font-size:clamp(17px,2vw,20px);color:var(--ink-2);line-height:1.5; margin:22px 0 0;max-width:62ch} .meta-row{display:flex;flex-wrap:wrap;gap:0;margin:26px 0 0; border-top:1.5px solid var(--ink);border-bottom:1px solid var(--rule)} .meta-row span{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-3);padding:13px 20px 13px 0;margin-right:20px; border-right:1px solid var(--hair)} .meta-row span:last-child{border-right:0} .art-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px; padding-top:clamp(30px,4vw,44px);padding-bottom:clamp(40px,6vw,70px)} @media(max-width:1040px){.art-grid{grid-template-columns:1fr;gap:0}.rail{display:none}} .tldr{border:1.5px solid var(--ink);background:var(--ink);color:var(--paper); padding:clamp(22px,3vw,30px);margin:0 0 40px} .tldr-k{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; opacity:.65;margin:0 0 12px} .tldr p{margin:0;font-size:clamp(16.5px,1.9vw,19px);line-height:1.55; color:rgba(255,255,255,.92);max-width:none} .tldr em{color:#fff;font-style:italic} .prose{font-size:18px;line-height:1.72;color:var(--ink-2);max-width:70ch} .prose h2{font-size:clamp(23px,3vw,33px);margin:52px 0 18px;padding-top:20px; border-top:1.5px solid var(--ink);color:var(--ink)} .prose h3{font-family:var(--sans);font-size:19px;font-weight:700;text-transform:none; letter-spacing:0;line-height:1.35;margin:36px 0 12px;color:var(--ink)} .prose p{margin:0 0 1.15em;max-width:none} .prose strong{color:var(--ink);font-weight:600} .prose a:not(.btn){color:var(--ink);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px} .prose a:not(.btn):hover{background:var(--paper-2)} .prose .btn{color:var(--paper);text-decoration:none} .prose .btn:hover{color:var(--ink);background:transparent} .prose .up-dark .btn{color:var(--ink)} .prose .up-dark .btn:hover{color:var(--paper)} .prose .btn-ghost{color:var(--ink)} .prose .btn-ghost:hover{color:var(--paper)} .prose ul,.prose ol{margin:0 0 1.3em;padding:0 0 0 2px;list-style:none} .prose ol{counter-reset:n} .prose li{position:relative;padding:7px 0 7px 26px;border-top:1px solid var(--hair)} .prose ul li:before{content:"\2014";position:absolute;left:0;color:var(--ink-3)} .prose ol li:before{counter-increment:n;content:counter(n,decimal-leading-zero); position:absolute;left:0;font-family:var(--display);font-size:12px;color:var(--ink-3); top:11px} .prose blockquote{margin:34px 0;padding:26px 28px;border:1.5px solid var(--ink); background:var(--paper-2)} .prose blockquote p{margin:0;font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--ink)} .prose table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px} .prose th,.prose td{text-align:left;padding:11px 10px 11px 0; border-bottom:1px solid var(--rule)} .prose th{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3);border-bottom:1.5px solid var(--ink)} .prose hr{border:0;border-top:1px solid var(--rule);margin:34px 0} .rail-in{position:sticky;top:86px} .rail-k{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3);margin:0 0 12px;padding-bottom:10px; border-bottom:1.5px solid var(--ink)} .rail ol{list-style:none;margin:0;padding:0;counter-reset:t} .rail li{border-bottom:1px solid var(--hair)} .rail ol a{display:block;padding:9px 0 9px 24px;font-size:13.5px;line-height:1.35; color:var(--ink-2);text-decoration:none;position:relative} .rail ol a:before{counter-increment:t;content:counter(t,decimal-leading-zero); position:absolute;left:0;top:10px;font-family:var(--display);font-size:11px; color:var(--ink-3)} .rail ol a:hover{color:var(--ink)} .rail-cta{margin-top:26px;border:1.5px solid var(--ink);padding:18px} .rail-cta p{font-size:13.5px;color:var(--ink-2);margin:0 0 14px;line-height:1.45; max-width:none} .rail-cta .btn{width:100%;font-size:11px;padding:10px 12px;min-height:40px} .art-cta{border:1.5px solid var(--ink);background:var(--ink);color:var(--paper); padding:clamp(26px,3.6vw,38px);margin-top:26px; display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center} .art-cta h3{font-size:clamp(20px,2.8vw,30px);margin:0 0 10px} .art-cta p{margin:0;color:rgba(255,255,255,.75);font-size:15.5px;max-width:52ch} .art-cta .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)} .art-cta .btn:hover{background:transparent;color:var(--paper)} @media(max-width:760px){.art-cta{grid-template-columns:1fr}} .wf-box{border:1.5px solid var(--ink);padding:clamp(22px,3vw,28px);margin:38px 0} .wf-k{font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase; color:var(--ink-3);margin:0 0 12px} .wf-lead{font-size:15.5px;color:var(--ink-2);margin:0 0 18px!important;line-height:1.5} .wf-list{margin:0 0 20px!important;padding:0!important;list-style:none; border-top:1px solid var(--rule)} .wf-list li{padding:12px 0!important;border-top:0!important; border-bottom:1px solid var(--hair);position:static!important} .wf-list li:before{content:none!important} .wf-list b{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.3} .wf-list em{display:block;font-style:normal;font-size:13.5px;color:var(--ink-3); margin-top:4px;line-height:1.4} .rc-k{font-size:10px!important;font-weight:700;letter-spacing:.15em;text-transform:uppercase; color:var(--ink-3);margin:0 0 7px!important} .rail-cta+.rail-cta{margin-top:12px} .li-box{border:1.5px solid var(--ink);padding:clamp(24px,3.2vw,32px);margin-top:50px; display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center} .li-k{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3);margin:0 0 9px!important} .li-box h3{font-size:clamp(19px,2.4vw,26px);margin:0 0 10px} .li-box p{font-size:15px;color:var(--ink-2);margin:0!important;max-width:54ch;line-height:1.5} .li-box .btn{white-space:nowrap} @media(max-width:700px){.li-box{grid-template-columns:1fr;gap:20px}} .two-up{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--ink); margin-top:26px} .up{padding:clamp(24px,3.2vw,32px)} .up:first-child{border-right:1.5px solid var(--ink)} .up-dark{background:var(--ink);color:var(--paper)} .up-dark h3{color:var(--paper)} .up-dark .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)} .up-dark .btn:hover{background:transparent;color:var(--paper)} .up-k{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3);margin:0 0 10px} .up h3{font-size:clamp(19px,2.4vw,26px);margin:0 0 12px} .up p{font-size:15px;color:var(--ink-2);margin:0 0 20px;line-height:1.5;max-width:none} .up-dark .up-k{color:rgba(255,255,255,.72)} .up-dark p{color:rgba(255,255,255,.88)} @media(max-width:820px){.two-up{grid-template-columns:1fr} .up:first-child{border-right:0;border-bottom:1.5px solid var(--ink)}} /* ══ KNOWLEDGE HUB ══ */ /* ── KNOWLEDGE HUB ──────────────────────────────────────── */ .kb-hero{padding-top:clamp(34px,4.6vw,52px);padding-bottom:clamp(24px,3vw,34px)} .kb-hero h1{font-size:clamp(32px,5.4vw,66px);letter-spacing:-.008em;line-height:.96} .kb-lede{font-size:clamp(17px,2.2vw,21px);color:var(--ink-2);margin:22px 0 0; max-width:62ch;line-height:1.5} .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink);margin-top:30px} .cat{display:block;text-decoration:none;padding:26px 24px 28px; border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)} .cat:hover{background:var(--ink)} .cat:hover .cat-n,.cat:hover .cat-b{color:var(--paper)} .cat:hover .cat-c{color:rgba(255,255,255,.6)} .cat-c{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3);margin:0 0 12px} .cat-n{font-family:var(--display);font-size:clamp(19px,2.3vw,25px);text-transform:uppercase; line-height:1.05;margin:0 0 10px;color:var(--ink)} .cat-b{font-size:14px;color:var(--ink-2);margin:0;line-height:1.5;max-width:none} @media(max-width:900px){.cats{grid-template-columns:1fr 1fr}} @media(max-width:560px){.cats{grid-template-columns:1fr}} .kb-sec{display:flex;align-items:baseline;gap:14px;margin:46px 0 0} .kb-sec h2{font-size:clamp(21px,2.6vw,30px)} .kb-sec span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3)} .arts{margin-top:18px;border-top:1.5px solid var(--ink)} .art-row{display:grid;grid-template-columns:190px 1fr 96px;gap:26px; padding:20px 0;border-bottom:1px solid var(--rule);text-decoration:none;align-items:start} .art-row:hover{background:var(--paper-2);padding-left:12px;padding-right:12px} .ar-cat{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3);margin:4px 0 0} .ar-t{font-family:var(--display);font-size:clamp(17px,2vw,22px);text-transform:uppercase; line-height:1.08;margin:0 0 8px;color:var(--ink)} .ar-d{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.5;max-width:72ch} .ar-m{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);text-align:right;margin:5px 0 0} @media(max-width:900px){.art-row{grid-template-columns:1fr;gap:6px} .ar-cat{order:-1;margin:0 0 4px}.ar-m{text-align:left;margin:6px 0 0}} .empty{border:1.5px dashed var(--rule);padding:34px;text-align:center;color:var(--ink-3); margin-top:24px;font-size:15px} /* ══ MOBILE MENU ══ */ /* ── MOBILE MENU ────────────────────────────────────────── */ .burger{display:none;flex-direction:column;justify-content:center;gap:5px; width:46px;height:46px;padding:0 11px;background:none;border:1.5px solid var(--ink); cursor:pointer;flex:none;margin-left:auto} .burger span{display:block;height:2px;width:100%;background:var(--ink); transition:transform .22s ease,opacity .18s ease} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:1210px){.burger{display:flex}} .mobmenu{position:fixed;inset:0;z-index:120;background:var(--ink);color:var(--paper); display:flex;flex-direction:column;padding:26px var(--gut) 40px; opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .2s ease,transform .2s ease,visibility .2s;overflow-y:auto} .mobmenu[data-open="true"]{opacity:1;visibility:visible;transform:none} .mm-top{display:flex;align-items:center;justify-content:space-between; padding-bottom:22px;border-bottom:1.5px solid rgba(255,255,255,.3)} .mm-mark{font-family:var(--display);font-size:19px;text-transform:uppercase; color:var(--paper);text-decoration:none;line-height:1.05} .mm-mark small{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600; letter-spacing:.11em;color:rgba(255,255,255,.55);margin-top:3px} .mm-close{background:none;border:1.5px solid rgba(255,255,255,.45);color:var(--paper); width:46px;height:46px;font-size:22px;line-height:1;cursor:pointer;flex:none} .mm-close:hover{border-color:var(--paper)} .mm-links{display:flex;flex-direction:column;margin:8px 0 0;flex:1} .mm-links a{font-family:var(--display);text-transform:uppercase; font-size:clamp(24px,7.4vw,38px);line-height:1.05;color:var(--paper); text-decoration:none;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.18)} .mm-links a:active,.mm-links a:hover{color:rgba(255,255,255,.62)} .mm-cta{margin-top:26px} .mm-cta .btn{background:var(--paper);color:var(--ink);border-color:var(--paper); width:100%;min-height:54px;font-size:13px} body.menu-open{overflow:hidden} /* the global nav bar rule must not leak into nested