/* ===== Home ===== */

body{transition:background-color .5s ease,color .5s ease}
.home-hero{padding-top:calc(env(safe-area-inset-top,0px) + clamp(120px,13vw,170px))}
.home-hero .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.home-hero .eyebrow i{width:32px;height:1px;background:var(--muted)}
.home-hero h1{font-size:clamp(58px,9vw,148px);line-height:.9;font-weight:400;letter-spacing:-.06em}
.home-hero h1 em{font-style:normal;color:var(--accent-2)}
.hmeta{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:24px 48px;margin-top:clamp(28px,4vw,44px)}
.hmeta p{font-size:clamp(18px,1.6vw,22px);line-height:1.5;max-width:38ch}
.hmeta p span{color:var(--muted)}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.home-hero .chips{margin-top:22px;gap:8px}
.home-hero .chips li{font:500 13px/1 var(--f-sans);height:32px;display:inline-flex;align-items:center;padding:0 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2)}

.rails{margin-top:clamp(48px,6vw,80px);display:grid;gap:clamp(12px,2vw,24px);padding-bottom:clamp(24px,3vw,40px)}
.rail{padding-block:18px 44px}
.rail .item{flex:none}
.rail .lap{width:clamp(300px,34vw,520px)}
.rail .ph{width:clamp(130px,12vw,190px)}
.rail .tile{width:clamp(240px,22vw,320px);align-self:center;border-radius:26px;padding:24px;background:var(--surface);box-shadow:0 30px 60px -34px var(--shadow-tint),inset 0 0 0 1px var(--line)}
.rail .tile b{display:block;font-size:clamp(40px,4vw,60px);font-weight:300;letter-spacing:-.05em;line-height:1;color:var(--accent-2)}
.rail .tile span{display:block;color:var(--muted);margin-top:10px;font-size:15px;line-height:1.35}
.rail .track{align-items:flex-end}
.rail.small .track{align-items:center}
.words .track{gap:48px;align-items:center}
.words span{font-size:clamp(34px,4.6vw,72px);font-weight:300;letter-spacing:-.05em;white-space:nowrap}
.words i{width:14px;height:14px;border-radius:50%;background:var(--accent);flex:none}

section.s{padding-block:clamp(80px,11vw,150px)}
.stage{background:linear-gradient(180deg,var(--bg-2),var(--bg));border-radius:clamp(24px,3vw,40px);padding:clamp(32px,6vw,96px) clamp(16px,6vw,110px) clamp(48px,7vw,110px);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.stage::before{content:"";position:absolute;left:50%;top:6%;width:70%;height:70%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
.stage .laptop{max-width:980px;margin-inline:auto}
.chead{position:relative;text-align:center;max-width:900px;margin:0 auto clamp(40px,5vw,64px)}
.chead h2{margin-top:14px;font-size:clamp(40px,5.6vw,88px);line-height:.98;font-weight:400;letter-spacing:-.055em}
.chead p{margin:18px auto 0;color:var(--muted);font-size:clamp(18px,1.6vw,22px);max-width:42ch}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(40px,5vw,64px) 0 0;border-top:1px solid var(--line-2)}
.meta div{padding:18px 16px 0 0}
.meta div+div{padding-left:16px;border-left:1px solid var(--line)}
.meta dt{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.meta dd{margin:8px 0 0;font-size:17px;font-weight:500}
@media (max-width:760px){.meta{grid-template-columns:1fr 1fr}.meta div:nth-child(3){padding-left:0;border-left:0}.meta div:nth-child(n+3){margin-top:16px}}
.explain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(56px,7vw,96px)}
@media (max-width:860px){.explain{grid-template-columns:1fr}}
.explain h3{font-size:24px;font-weight:500;letter-spacing:-.03em;line-height:1.2}
.explain h3 small{display:block;font:500 12px/1 var(--f-mono);letter-spacing:.08em;color:var(--accent-2);margin-bottom:12px}
.explain p{margin-top:10px;color:var(--muted)}
.phones{display:flex;justify-content:center;gap:clamp(12px,3vw,40px);margin-top:clamp(56px,7vw,96px);padding:clamp(32px,5vw,72px) 0;background:var(--band);border-radius:clamp(24px,3vw,40px);transition:background-color .5s}
.phones .phone{width:min(230px,28%)}
.phones .phone:nth-child(2){transform:translateY(-8%)}
.results{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:end;margin-top:clamp(56px,7vw,96px)}
@media (max-width:860px){.results{grid-template-columns:1fr}}
.results small{font:500 12px/1 var(--f-mono);letter-spacing:.08em;color:var(--accent-2)}
.results h3{margin-top:12px;font-size:clamp(30px,3.4vw,48px);font-weight:400;letter-spacing:-.05em;line-height:1.02}
.results p.lede{margin-top:14px;color:var(--muted);max-width:44ch}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2)}
.nums div{padding:20px 14px 0 0}
.nums div+div{padding-left:14px;border-left:1px solid var(--line)}
.nums b{display:block;white-space:nowrap;font-size:clamp(32px,3.8vw,58px);font-weight:300;letter-spacing:-.06em;line-height:1;color:var(--accent-2)}
.nums span{display:block;color:var(--muted);font-size:14px;margin-top:8px}
.src{margin-top:14px;font:500 11.5px/1.4 var(--f-mono);color:var(--muted)}
.cmp{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:860px){.cmp{grid-template-columns:1fr}}
.cmp h3{font-size:clamp(28px,3vw,42px);font-weight:400;letter-spacing:-.045em;line-height:1.05}
.cmp p{margin-top:12px;color:var(--muted)}
.seg{display:inline-flex;margin-top:22px;padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2)}
.seg button{height:40px;padding:0 18px;border-radius:999px;border:0;background:transparent;cursor:pointer;font:500 14px/1 var(--f-sans);color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.cmp .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .5s}
.cmp .screen img.hide{opacity:0}

.also{margin-top:clamp(48px,6vw,80px);padding-block:36px 8px;border-top:1px solid var(--line-2);max-width:760px}
.also h3{font-size:clamp(24px,2.6vw,34px);font-weight:400;letter-spacing:-.045em;line-height:1.08;margin:12px 0}
.also p{color:var(--muted)}
.also .link-arrow{margin-top:18px}



/* more case studies */
.more-h{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:20px 48px;margin-bottom:clamp(28px,4vw,48px)}
.more-h h2{font-size:clamp(36px,4.6vw,68px);line-height:1;font-weight:400;letter-spacing:-.055em;max-width:14ch}
.more-h p{color:var(--muted);max-width:40ch}
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media (max-width:900px){.cases{grid-template-columns:1fr}}
.cs{display:flex;flex-direction:column;border-radius:clamp(22px,2.6vw,34px);overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:inherit;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.cs:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line-2),0 40px 80px -40px var(--shadow-tint)}
.cs .vis{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--band);transition:background-color .5s}
.cs .vis::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 30%,var(--glow),transparent);pointer-events:none}
.cs .txt{padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:10px;flex:1}
.cs .num{font:500 12px/1 var(--f-mono);letter-spacing:.08em;color:var(--accent-2);text-transform:uppercase}
.cs h3{font-size:clamp(24px,2.4vw,34px);font-weight:400;letter-spacing:-.045em;line-height:1.08}
.cs p{color:var(--muted)}
.cs .note{font:500 11.5px/1.45 var(--f-mono);color:var(--muted);margin-top:auto;padding-top:10px}
.cs .go{display:inline-flex;align-items:center;gap:10px;font-weight:500;margin-top:8px}
.cs .go i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cs:hover .go i{transform:rotate(-45deg)}
.cs .go svg{width:14px;height:14px}
.vis .phone{position:absolute;width:30%;left:50%;top:9%;transform:translateX(-10%) translateY(calc(var(--lift,0)*-1px));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.cs:hover .vis .phone{--lift:14}
.win{position:absolute;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -28px var(--shadow-tint),0 0 0 1px rgba(0,0,0,.06)}
.win .bar{height:22px;display:flex;align-items:center;gap:5px;padding:0 10px;background:#F1EFEC;border-bottom:1px solid rgba(0,0,0,.06)}
.win .bar i{width:7px;height:7px;border-radius:50%;background:#CFCAC4}
.win img{display:block;width:100%;height:auto}
.vis .old{left:8%;top:18%;width:44%;transform:rotate(-3deg)}
.vis .old .tag{position:absolute;left:10px;bottom:10px;font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:999px;background:var(--ink);color:var(--bg)}
.vis .flow{left:7%;right:7%;top:12%;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.cs:hover .vis .flow{transform:translateY(-8px) scale(1.01)}

/* ---- site additions ---- */
.home-hero .ctas{align-self:end}
.rails-cap{margin-top:4px;text-align:right}
#case{padding-top:clamp(40px,6vw,80px)}
.results .ctas{margin-top:24px}
.cmp .cmpWrap{min-width:0}
.more{padding-top:clamp(48px,6vw,88px)}
.more-h h2{margin-top:14px}
.cases{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.cases{grid-template-columns:1fr}}
.cs .tags{margin-top:2px}
.cs .stat{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:14.5px}
.cs .stat b{color:var(--accent-2);font-weight:500;font-size:20px;letter-spacing:-.03em;margin-right:4px}
.vis .vlap{position:absolute;left:9%;right:9%;top:12%;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.cs:hover .vis .vlap{transform:translateY(-8px)}
.vis .vdemo{position:absolute;inset:14% 6% auto}
.vis .vdemo .heroDemo{max-width:none}
.allwork{margin-top:28px}
.also h3{font-size:clamp(24px,2.6vw,34px);font-weight:400;letter-spacing:-.045em;line-height:1.08;margin:12px 0}
.also p{color:var(--muted)}
#case{padding-bottom:clamp(40px,5vw,64px)}

/* Fit: who I'm a good fit for, and recruiter FAQ */
.fit{padding-top:clamp(56px,7vw,104px)}
.hmeta a[href="#fit"]{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1.5px}
.fitcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fitcol{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3vw,34px)}
.fitcol.yes{background:var(--band)}
.fitcol h3{display:flex;align-items:center;gap:12px;font-size:clamp(20px,2vw,26px);font-weight:400;letter-spacing:-.03em;margin:0 0 18px}
.fitcol .mk{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;flex:none;border:1px solid var(--line-2)}
.fitcol.yes .mk{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.fitcol ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fitcol li{padding:12px 0;border-top:1px solid var(--line);line-height:1.45}
.fitcol.no li{color:var(--muted)}
.faq{margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,5vw,72px);background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(24px,4vw,52px)}
.faq-intro{align-self:start;position:sticky;top:110px}
.faq-h{font-size:clamp(26px,2.6vw,36px);font-weight:400;letter-spacing:-.04em;margin:0 0 10px}
.faq-intro p{margin:0;color:var(--muted);max-width:30ch}
.faq-list{min-width:0}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 2px;font-size:clamp(16px,1.4vw,18px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i,.faq-ask button i{position:relative;width:12px;height:12px;flex:none}
.faq summary i::before{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .25s ease,border-color .2s}
.faq details[open] > summary i::before{transform:translateY(2px) rotate(225deg);border-color:var(--accent-2)}
.faq summary:hover i::before{border-color:var(--accent-2)}
.faq details > p,.faq .abody{margin:0;padding:0 34px 20px 2px;color:var(--muted);max-width:68ch}
.faq .abody p{margin:0}
.faq .asked{animation:faqIn .35s ease both}
.faq .asked summary{color:var(--ink)}
.faq .src{display:inline-block;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);margin:0 0 10px}
.faq-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px!important;transition:opacity .3s}
.faq-link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.faq-ask{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line-2)}
.faq-ask input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:inherit;font-size:clamp(16px,1.4vw,18px);padding:18px 2px}
.faq-ask input::placeholder{color:var(--muted);opacity:1}
.faq-ask input:focus{outline:none}
.faq-ask:focus-within{border-bottom-color:var(--accent)}
.faq-ask button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.faq-ask button:hover,.faq-ask:focus-within button{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.faq-ask button i::before,.faq-ask button i::after{content:"";position:absolute;left:0;top:5px;width:12px;height:1.6px;background:currentColor}
.faq-ask button i::after{transform:rotate(90deg)}
@keyframes faqIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:860px){.faq{grid-template-columns:1fr}.faq-intro{position:static}}
@media (max-width:760px){.fitcols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.faq summary i::before{transition:none}.faq .asked{animation:none}}