/* ship.css — launch layer: contact footer, job-fit band and page, mobile fallbacks. Loaded after styles.css. */

/* ───────── contact: an invitation, one obvious action ───────── */
.ft{padding:24px 0 40px!important;border-top:0!important}
.ft .h2-ck{grid-column:1/-1;margin-bottom:48px}
.ft-l{grid-column:1/span 8}
.ft .h2-ch{margin:0 0 24px;font:200 clamp(32px,3.6vw,54px)/1.08 'Hanken Grotesk',sans-serif;letter-spacing:-.035em}
.ft .h2-ch span{color:#8A8A90}
.ft-p{margin:0 0 32px;max-width:34em;font:300 18px/1.55 'Hanken Grotesk',sans-serif;color:#5B5B63}
.ft-wa{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 24px;background:#D4FF3F;color:#17171C;border:1px solid #17171C;text-decoration:none;font:400 15px 'Hanken Grotesk',sans-serif;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.ft-wa svg{width:20px;height:20px;fill:#17171C;flex:none}
.ft-wa:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #17171C}
.ft-wa:active{transform:none;box-shadow:none}
.ft .clist{grid-column:auto!important;margin-top:40px;border-top:0;max-width:560px}
.ft .crow{grid-template-columns:6em 1fr auto;padding:14px 0;border-bottom:0;border-top:1px solid #E6E3DB}
.ft .crow .cv{font-size:18px;font-weight:300;color:#17171C}
.ft .crow:hover{padding-inline-start:8px}.ft .crow:hover .cv,.ft .crow:hover .ca{color:#17171C}
.ft-r{grid-column:9/-1;display:flex;align-items:flex-end;justify-content:center}
.ft-cups{width:100%;max-width:340px;overflow:visible;margin-bottom:8px}
.ft-cups path{fill:none;stroke:#17171C;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.ft-cups .lid,.ft-cups .body{fill:#fff}.ft-cups .sleeve{fill:#e7cfb0}
.ft-cup{transform-box:fill-box;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ft-a{transform-origin:100% 100%;transform:rotate(-4deg)}.ft-b{transform-origin:0 100%;transform:rotate(4deg)}
.ft:hover .ft-a{transform:rotate(3deg) translateX(4px)}.ft:hover .ft-b{transform:rotate(-3deg) translateX(-4px)}
.ft-steam path{stroke:#8A8A90;stroke-width:1;stroke-dasharray:22 60;animation:ftSteam 3.2s linear infinite}
.ft-steam path:nth-child(2){animation-delay:-.8s}.ft-steam path:nth-child(3){animation-delay:-1.6s}.ft-steam path:nth-child(4){animation-delay:-2.4s}
@keyframes ftSteam{from{stroke-dashoffset:64}to{stroke-dashoffset:0}}
.ft-end{grid-column:1/-1;display:flex;justify-content:space-between;margin:96px 0 0;padding-top:16px;border-top:1px solid #E6E3DB;font-size:12px;color:#8A8A90}
.ft-end a{color:#5B5B63;text-decoration:none}.ft-end a:hover{color:#17171C}
@media (prefers-reduced-motion:reduce){.ft-steam path{animation:none;stroke-dasharray:none}.ft-cup{transition:none}}
@media(max-width:900px){.ft{padding:56px 0 28px!important}.ft-l,.ft-r{grid-column:1/-1}.ft-r{justify-content:flex-start;margin-top:40px}.ft-cups{max-width:150px}
  .ft .crow{grid-template-columns:4.6em minmax(0,1fr) auto}.ft .crow .cv{font-size:16px;overflow-wrap:anywhere}
  .ft-wa{width:100%;justify-content:center;box-sizing:border-box}.ft-end{margin-top:56px}}

/* ───────── home: the way into job fit ───────── */
.fb{padding:24px 0 72px}
.fb .h2-k{grid-column:1/-1;margin-bottom:40px}
.fb-h{grid-column:1/span 8;margin:0;font:200 clamp(30px,3.4vw,48px)/1.08 'Hanken Grotesk',sans-serif;letter-spacing:-.03em;color:#17171C}
.fb-p{grid-column:1/span 6;margin:20px 0 0;font:300 18px/1.55 'Hanken Grotesk',sans-serif;color:#5B5B63}
.fb-go{grid-column:1/-1;justify-self:start;margin-top:32px}
@media(max-width:900px){.fb{padding:16px 0 48px}.fb-h,.fb-p{grid-column:1/-1}}

/* ───────── job fit page ───────── */
.jf main{display:block}
.jf-hero{padding:96px 0 48px}
.jf-hero .h2-role{justify-content:flex-start;margin:0 0 28px}
.jf-h{grid-column:1/span 10;margin:0;font:200 clamp(40px,5.4vw,84px)/1.03 'Hanken Grotesk',sans-serif;letter-spacing:-.045em;color:#17171C}
.jf-h span{color:#8A8A90}
.jf-sub{grid-column:1/span 6;margin:28px 0 0;font:300 19px/1.55 'Hanken Grotesk',sans-serif;color:#5B5B63}
.jf-steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gut);margin:64px 0 0;padding:0;list-style:none}
.jf-steps li{padding-top:16px;border-top:1px solid #17171C}
.jf-steps .mono{display:block;font-size:12px;color:#8A8A90;margin-bottom:10px}
.jf-steps b{display:block;font:400 18px/1.3 'Hanken Grotesk',sans-serif;color:#17171C}
.jf-steps p{margin:6px 0 0;font:300 15px/1.5 'Hanken Grotesk',sans-serif;color:#5B5B63;max-width:24em}
.jf-in{padding:24px 0 72px}
.jf-form{grid-column:1/span 8}
.jf-lab{display:flex;justify-content:space-between;font-size:12px;color:#5B5B63;margin-bottom:10px}
.jf-form textarea{display:block;width:100%;box-sizing:border-box;min-height:260px;padding:20px;border:1px solid #17171C;border-radius:0;background:#fff;font:300 17px/1.6 'Hanken Grotesk',sans-serif;color:#17171C;resize:vertical;outline:none;transition:box-shadow .2s}
.jf-form textarea:focus{box-shadow:4px 4px 0 #D4FF3F}
.jf-form textarea::placeholder,.jf-form input::placeholder{color:#8A8A90}
.jf-row{display:flex;gap:12px;margin-top:12px}
.jf-row input{flex:1;min-width:0;height:56px;padding:0 18px;border:1px solid #DCD9D0;border-radius:0;background:#fff;font:300 16px 'Hanken Grotesk',sans-serif;color:#17171C;outline:none}
.jf-row input:focus{border-color:#17171C}
.jf-go{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 26px;border:1px solid #17171C;background:#17171C;color:#fff;font:400 15px 'Hanken Grotesk',sans-serif;cursor:pointer;transition:background .2s,color .2s,transform .25s,box-shadow .25s;white-space:nowrap}
.jf-form.ready .jf-go{background:#D4FF3F;color:#17171C}
.jf-go:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #17171C}
.jf-go:disabled{cursor:progress;background:#fff;color:#5B5B63;transform:none;box-shadow:none}
.jf-note{margin:16px 0 0;font-size:12px;line-height:1.7;color:#8A8A90}
.jf-note a{color:#17171C;text-decoration:none;border-bottom:1px solid #17171C}
.jf-log{grid-column:9/-1;align-self:start;position:sticky;top:76px;padding-top:30px}
.jf-log-h{display:flex;justify-content:space-between;font-size:12px;color:#5B5B63;padding-bottom:10px;border-bottom:1px solid #17171C}
.jf-phases{margin:0;padding:8px 0 0;list-style:none}
.jf-phases li{position:relative;padding:9px 0 9px 22px;font:300 15px 'Hanken Grotesk',sans-serif;color:#B9B7B0;transition:color .3s}
.jf-phases li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%!important;border:1px solid #B9B7B0}
.jf-phases li.done{color:#5B5B63}.jf-phases li.done::before{background:#17171C;border-color:#17171C}
.jf-phases li.now{color:#17171C}.jf-phases li.now::before{background:#D4FF3F;border-color:#17171C;animation:wkPulse 1.6s ease-in-out infinite}
.jf-feed{max-height:260px;overflow:auto;margin:12px 0 0;padding:12px 0 0;list-style:none;border-top:1px solid #E6E3DB}
.jf-feed li{display:grid;grid-template-columns:3.6em 1fr;gap:8px;padding:5px 0;font:300 14px/1.5 'Hanken Grotesk',sans-serif;color:#5B5B63;animation:h2fade .4s ease both}
.jf-feed li b{font-size:11px;color:#8A8A90;font-weight:400;padding-top:2px}
.jf-feed q{color:#17171C}.jf-feed a{color:#17171C}
.jf-feed li.err span{color:#B42318}.jf-feed li.ok span{color:#17171C}

/* report */
.jf-out{padding:24px 0 96px;animation:h2fade .6s ease both}
.jr-k{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid #17171C;font-size:12px;color:#5B5B63}
.jr-head{grid-column:1/span 7;margin-top:40px}
.jr-a{margin:0;font:200 clamp(38px,4.6vw,68px)/1.04 'Hanken Grotesk',sans-serif;letter-spacing:-.04em;color:#17171C}
.jr-a::after{content:"";display:block;width:56px;height:6px;margin-top:18px;background:#D4FF3F;border:1px solid #17171C}
.jr-a[data-a="partial"]::after{background:#fff}.jr-a[data-a="weak"]::after{background:#DCD9D0}
.jr-a2{margin:14px 0 0;font:300 18px/1.5 'Hanken Grotesk',sans-serif;color:#5B5B63}
.jr-sum{grid-column:8/-1;margin-top:40px;font:300 18px/1.6 'Hanken Grotesk',sans-serif;color:#17171C}
.jr-sum p{margin:0 0 16px}
.jr-me{padding:14px 16px;background:#F4F3EF}.jr-me .mono{display:block;font-size:11px;color:#5B5B63;margin-bottom:6px}
.jr-tally{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;color:#5B5B63}
.jr-tally span{display:inline-flex;align-items:center;gap:7px}
.mk{display:inline-block;width:9px;height:9px;border-radius:50%!important;border:1px solid #17171C;flex:none}
.mk.shown{background:#17171C}.mk.partial{background:linear-gradient(90deg,#17171C 50%,#fff 50%)}.mk.gap{background:#fff}
.jr-sec{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);margin-top:80px;padding-top:16px;border-top:1px solid #17171C}
.jr-h{grid-column:1/span 4;margin:0 0 24px;font:300 22px/1.25 'Hanken Grotesk',sans-serif;letter-spacing:-.01em;color:#17171C}
.jr-filt{grid-column:5/-1;display:flex;flex-wrap:wrap;gap:6px;align-self:start;margin-bottom:16px}
.jr-f{all:unset;cursor:pointer;padding:7px 12px;border:1px solid #DCD9D0;font:300 14px 'Hanken Grotesk',sans-serif;color:#5B5B63;transition:border-color .2s,background .2s,color .2s}
.jr-f b{font-weight:400;font-size:11px;margin-left:4px;color:#8A8A90}
.jr-f:hover{border-color:#17171C;color:#17171C}.jr-f.on{background:#17171C;border-color:#17171C;color:#fff}.jr-f.on b{color:#D4FF3F}
.jr-reqs,.jr-fit{grid-column:5/-1;margin:0;padding:0;list-style:none}
.jr-reqs li,.jr-cf{padding:18px 0}
.jr-reqs li+li,.jr-cf+.jr-cf{border-top:1px solid #E6E3DB}
.jr-rq{display:grid;grid-template-columns:20px 1fr auto;align-items:baseline;gap:8px}
.jr-rq .mk{transform:translateY(-1px)}
.jr-rq b{font:400 18px/1.35 'Hanken Grotesk',sans-serif;color:#17171C}
.jr-rq em{font-style:normal;font-size:12px;color:#5B5B63;white-space:nowrap}
.jr-reqs p,.jr-cf p{margin:6px 0 0 28px;max-width:40em;font:300 16px/1.6 'Hanken Grotesk',sans-serif;color:#5B5B63}
.jr-sig{grid-column:1/span 4;grid-row:2}
.jr-env .jr-fit{grid-row:1/span 2}
.jr-lab{font-size:12px;color:#5B5B63;margin:0 0 8px}
.jr-dash{margin:0;padding:0;list-style:none}
.jr-dash li{position:relative;padding:6px 0 6px 18px;font:300 16px/1.55 'Hanken Grotesk',sans-serif;color:#17171C}
.jr-dash li::before{content:"–";position:absolute;left:0;color:#8A8A90}
.jr-gaps .jr-dash,.jr-gaps .jr-none{grid-column:5/-1;margin:0}
.jr-none{font:300 16px/1.6 'Hanken Grotesk',sans-serif;color:#5B5B63}
.jr-qs>div{grid-column:span 6}
.jr-qs .jr-h{margin-bottom:12px}
.jr-q{margin:0;padding:0;list-style:none;counter-reset:q}
.jr-q li{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid #E6E3DB;font:300 17px/1.5 'Hanken Grotesk',sans-serif;color:#17171C}
.jr-cp{all:unset;cursor:pointer;font-size:12px;color:#8A8A90}.jr-cp:hover{color:#17171C}
.jr-src ol{grid-column:5/-1;margin:0;padding:0;list-style:none}
.jr-src li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid #E6E3DB;font:300 15px 'Hanken Grotesk',sans-serif}
.jr-src li:first-child{border-top:0}
.jr-src a{color:#17171C;text-decoration:none}.jr-src a:hover{text-decoration:underline}.jr-src .mono{font-size:12px;color:#8A8A90}
.jr-end{grid-column:1/-1;margin-top:96px;padding:48px 0 0;border-top:1px solid #17171C}
.jr-end-h{margin:0 0 28px;font:300 clamp(28px,3vw,40px)/1.1 'Hanken Grotesk',sans-serif;letter-spacing:-.03em;color:#17171C}
.jr-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.jr-acts .h2-btn{height:56px;font-size:13px;cursor:pointer;background:#fff}
.jr-disc{margin:28px 0 0;max-width:60em;font-size:12px;line-height:1.7;color:#8A8A90}
@media(max-width:900px){
  .jf-hero{padding:48px 0 24px}.jf-h,.jf-sub,.jf-form,.jf-log{grid-column:1/-1}
  .jf-steps{grid-template-columns:1fr;row-gap:20px;margin-top:40px}
  .jf-row{flex-direction:column}.jf-go{justify-content:center}
  .jf-log{position:static;padding-top:28px}
  .jr-head,.jr-sum{grid-column:1/-1}.jr-sum{margin-top:24px}
  .jr-sec{margin-top:56px}.jr-h,.jr-filt,.jr-reqs,.jr-fit,.jr-sig,.jr-gaps .jr-dash,.jr-gaps .jr-none,.jr-src ol,.jr-qs>div{grid-column:1/-1;grid-row:auto}
  .jr-qs>div+div{margin-top:40px}
  .jr-acts>*{width:100%;justify-content:center;box-sizing:border-box}
}
@media print{.h2-top,.jf-hero,.jf-in,.ft,.jr-acts,.jr-filt,.jr-cp,.guides{display:none!important}.jr-reqs li[hidden]{display:block!important}.jf-out{padding:0}}

/* ALTA: section rules sit inside the page margins like everywhere else (no full-bleed lines) */
.cs-next,section.im{border-top:0!important}
.cs-next>.grid::before,section.im>.grid::before{content:"";grid-column:1/-1;border-top:1px solid #DCD9D0;margin-bottom:24px}

/* ONE CASING RULE, everywhere: every label that used to be set in capitals is sentence case, with normal tracking */
#stage-svg .ph,
#stage-svg .pt,
.ai-facts dt,
.ai-site,
.ai-skipi,
.ai-stack dt,
.ai-top,
.ap-ba b,
.ap-fit i,
.ap-r b,
.chat b,
.cookie .ck-k,
.cq-ctx,
.cq-f button,
.cq-from,
.cq-k,
.cq-mt,
.cq-q,
.cq-x,
.cv-f,
.cv-k,
.cv-title,
.cv-when,
.cvp-ans-h,
.cvp-cs,
.cvp-k,
.cvp-la,
.cvp-meta,
.cvp-ra,
.cvp-when,
.h2-back,
.h2-box .anote,
.h2-btn,
.h2-k,
.h2-me,
.h2-more,
.h2-nav,
.h2-note .mono,
.h2-role,
.hm-k,
.hm-ly>b,
.hm-sk,
.hm.pin .hm-cue,
.hm.pin .hm-sfs::before,
.im-foot,
.ix-c,
.ix-f .mono,
.ix-w,
.ix2 .ix-y,
.mono,
.mx-card figcaption,
.mx-note,
.opt-fact .mono,
.pk-bar,
.st-cue,
.st-gate,
.st-k,
.st-mods em,
.st-quote span,
.st-stamp,
.st-top,
.tbl .r.hd,
.tm-dots,
.tm-fin,
.tm-hear,
.tm-hint,
.tm-k,
.tm-next,
.tm-pages::after,
.tm-play,
.tm-skip,
.tm-snd,
.tm-tag,
.tm-watch,
.tp-h,
.tp-k,
.w-pk,
.wk-go,
.wk-n,
.wk-top,
body.al section .mono{text-transform:none!important;letter-spacing:.01em!important}
.cq-priv{margin:8px 0 0;font-size:11px;line-height:1.5;color:#8A8A90}

/* never leave one word alone on a line */
h1,h2,h3,.h2-h,.jf-h,.jr-a,.fb-h,.h2-ch,.jr-h,.jr-end-h{text-wrap:balance}
p,li,dd,blockquote,.cv,.h2-sub,.ft-p{text-wrap:pretty}
.ft-p{max-width:36em}
.ft-l{grid-column:1/span 9}

/* ONE SECTION RHYTHM on the home page: 112px between sections, 16px from rule to label, 40px from label to content */
:root{--sec:112px;--lab:40px}
@media(max-width:900px){:root{--sec:72px;--lab:28px}}
.h2 .h2-drink,.h2 nav.cvp-ix,.h2 section.cvp-sec,.h2 section.h2-work,.h2 section.fb,.h2 footer.ft{padding-top:var(--sec)!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important}
.h2 .cvp-main{padding-bottom:0!important}
.h2 footer.ft{padding-bottom:40px!important}
.h2 footer.ft>.grid{padding-top:0!important;padding-bottom:0!important}
.h2 .h2-k,.h2 .cvp-k{padding-top:16px!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:var(--lab)!important}
.h2 .cvp-last .cvp-k{padding-top:0!important}
.h2 section.h2-work{padding-bottom:0!important}
.h2 section.cvp-head{padding-bottom:0!important}
.h2 .ix2 li:last-child .ix-a{padding-bottom:0!important}
.h2 section.cvp-sec article.cvp-role:last-of-type{padding-bottom:0!important}
.h2 .cvp-rows li:last-child{padding-bottom:0!important}

/* the mark next to the name: the favicon's m, in black */
.h2-me{display:inline-flex!important;align-items:center;gap:10px}
.h2-logo{width:22px;height:22px;flex:none;display:block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.h2-me:hover .h2-logo{transform:rotate(-6deg)}
@media(max-width:900px){.h2-left:has(.h2-back) .h2-me{display:inline-flex!important}.h2-left:has(.h2-back) .h2-nm{display:none}}
.h2-left .h2-me{align-self:center}
.h2-top .h2-left{align-items:center!important}
.h2-me,.h2-me .h2-nm{color:#17171C!important}
@media(max-width:900px){.h2-me{flex-direction:row!important;gap:8px!important;font-size:12px!important}.h2-me .h2-nm{font-size:12px!important}.h2-logo{width:20px;height:20px}}

/* ───────── end of a case study: its questions, then the next case study ───────── */
.cq2{padding:112px 0 0}
.cq2 .h2-k{grid-column:1/-1;padding-top:16px;border-top:1px solid #17171C;margin:0 0 40px;font-size:12px;color:#5B5B63}
.cq2-h{grid-column:1/span 8;margin:0 0 40px;font:200 clamp(32px,3.6vw,54px)/1.08 'Hanken Grotesk',sans-serif;letter-spacing:-.035em;color:#17171C;text-wrap:balance}
.cq2-h span{color:#6B6B73}
.cq2-l{grid-column:1/-1;list-style:none;margin:0;padding:0}
.cq2-t{display:grid;grid-template-columns:3em minmax(0,1fr) minmax(0,1.2fr) auto;gap:16px;align-items:baseline;padding:18px 0;border-top:1px solid #E6E3DB;color:#17171C;text-decoration:none;transition:padding .25s cubic-bezier(.2,.8,.2,1)}
.cq2-l li:last-child .cq2-t{border-bottom:1px solid #E6E3DB}
.cq2-t .mono{font-size:12px;color:#6B6B73}
.cq2-t b{font:300 22px 'Hanken Grotesk',sans-serif;letter-spacing:-.01em}
.cq2-t em{font:300 16px 'Hanken Grotesk',sans-serif;font-style:normal;color:#5B5B63}
.cq2-go{font-size:14px;color:#6B6B73}
.cq2-t:hover{padding-left:10px}.cq2-t:hover b{background:linear-gradient(transparent 62%,#D4FF3F 62%)}
.cq2-own{grid-column:1/-1;justify-self:start;margin-top:24px;padding-bottom:3px;border-bottom:1px solid #17171C;font-size:13px;color:#17171C;text-decoration:none}
@media(max-width:900px){.cq2{padding-top:72px}.cq2-h{grid-column:1/-1}.cq2-t{grid-template-columns:2.4em minmax(0,1fr) auto;row-gap:4px}.cq2-t em{grid-column:2}.cq2-go{grid-column:3;grid-row:1}}

.nx{padding:112px 0 0}
.nx-k{grid-column:1/-1;display:flex;justify-content:space-between;padding-top:16px;border-top:1px solid #17171C;margin:0 0 40px;font-size:12px;color:#5B5B63}
.nx-a{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:end;color:#17171C;text-decoration:none}
.nx-t{grid-column:1/span 4;display:flex;flex-direction:column;gap:14px;padding-bottom:8px}
.nx-name{font:200 clamp(56px,7vw,112px)/.95 'Hanken Grotesk',sans-serif;letter-spacing:-.05em}
.nx-h{font:300 22px/1.3 'Hanken Grotesk',sans-serif;letter-spacing:-.01em}
.nx-d{font:300 16px/1.55 'Hanken Grotesk',sans-serif;color:#5B5B63;text-wrap:pretty}
.nx-go{margin-top:12px;font-size:13px;display:inline-flex;gap:10px;align-items:center;align-self:flex-start;padding-bottom:3px;border-bottom:1px solid #17171C}
.nx-go i{font-style:normal;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nx-f{grid-column:6/-1;display:block;overflow:hidden;border:1px solid #DCD9D0;background:#F4F3EF;aspect-ratio:16/10}
.nx-f img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .6s}
.nx-a:hover .nx-f img,.nx-a:focus-visible .nx-f img{transform:scale(1.035)}
.nx-a:hover .nx-go i,.nx-a:focus-visible .nx-go i{transform:translateX(6px)}
.nx-a:hover .nx-name{background:linear-gradient(transparent 78%,#D4FF3F 78%)}
@media(max-width:900px){.nx{padding-top:72px}.nx-t,.nx-f{grid-column:1/-1}.nx-f{order:-1;margin-bottom:24px}}
@media (prefers-reduced-motion:reduce){.nx-f img,.nx-go i,.cq2-t{transition:none}}

/* ───────── between pages: a soft crossfade instead of a hard cut (browsers that support it) ───────── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* in-progress cards: how far along each one is */
.wk-prog{display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:baseline;padding:0 22px 22px;font-size:12px;color:#5B5B63}
.wk-prog b{font-weight:400;color:#17171C}
.wk-prog i{grid-column:1/-1;display:block;height:2px;background:#E6E3DB;position:relative;overflow:hidden}
.wk-prog i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:#17171C;transform-origin:left;animation:wkGrow 1.6s cubic-bezier(.2,.8,.2,1) both}
.wk-prog i::before{content:"";position:absolute;top:-2px;left:var(--p);width:6px;height:6px;margin-left:-3px;border-radius:50%!important;background:#D4FF3F;outline:1px solid #17171C;z-index:1;animation:wkPulse 2.2s ease-in-out infinite}
@keyframes wkGrow{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.wk-prog i::after,.wk-prog i::before{animation:none}}

/* the note under the Ask field can be dismissed */
.cq-priv{display:flex;gap:10px;align-items:flex-start}
.cq-priv-x{all:unset;cursor:pointer;flex:none;width:22px;height:22px;display:grid;place-items:center;font:400 14px 'JetBrains Mono',monospace;color:#6B6B73}
.cq-priv-x:hover,.cq-priv-x:focus-visible{color:#17171C;background:#F4F3EF}
.cq-priv[hidden]{display:none}

/* ───────── header: one centre line. Ask and contact are two equal neon blocks ───────── */
.h2-top .h2-nav{align-items:center!important}
.h2-top .h2-nav>a{display:inline-flex;align-items:center;line-height:1}
.h2-top .h2-nav>a[href$="#ask"],.h2 .h2-top .h2-nav>a[href$="#ask"]{height:30px;padding:0 12px!important;margin:0!important;box-sizing:border-box;background:#D4FF3F!important;background-size:auto!important;box-shadow:none!important;color:#17171C;font-weight:500;transition:background .2s,color .2s}
.h2-top .h2-nav>a[href$="#ask"]:hover,.h2-top .h2-nav>a[href$="#ask"]:focus-visible{background:#17171C!important;color:#fff}
.h2-top .h2-icons{display:inline-flex!important;align-items:center}
.h2-top .h2-ic.h2-contact:hover,.h2-top .h2-ic.h2-contact:focus-visible{background:#17171C;border-color:#17171C;color:#fff}
.h2-top .h2-nav>a[href$="#ask"]+.h2-sep+.h2-icons,.h2-top .h2-nav>a[href$="#ask"]~.h2-icons{margin-left:0}
@media(max-width:900px){.h2-top .h2-nav{gap:8px!important}.h2-top .h2-nav>a[href$="#ask"],.h2 .h2-top .h2-nav>a[href$="#ask"]{height:34px;padding:0 14px!important}}

/* ───────── between sections: the rule draws in, the label follows, the content rises in (motion.js) ───────── */
html.srv .srv-r{position:relative;border-top-color:transparent!important}
html.srv .srv-r::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#17171C;transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.65,0,.35,1)}
html.srv .jf-steps li.srv-r::before,html.srv .jr-sec.srv-r::before{top:-1px}
html.srv .srv-r.srv-in::before{transform:scaleX(1)}
html.srv .srv-r>*,html.srv .h2-k.srv-r,html.srv .cvp-k.srv-r{transition:opacity .6s ease .35s,transform .6s cubic-bezier(.2,.8,.2,1) .35s}
html.srv .h2-k.srv-r:not(.srv-in),html.srv .cvp-k.srv-r:not(.srv-in),html.srv .nx-k.srv-r:not(.srv-in){color:transparent}
html.srv .h2-k.srv-r,html.srv .cvp-k.srv-r,html.srv .nx-k.srv-r{transition:color .5s ease .45s}
html.srv .srv-i{opacity:0;transform:translateY(18px);transition:opacity .7s ease var(--srv-d,0ms),transform .8s cubic-bezier(.2,.8,.2,1) var(--srv-d,0ms)}
html.srv .srv-i.srv-in{opacity:1;transform:none}
html.srv .srv-now,html.srv .srv-now::before{transition:none!important}
html.a11y-calm .srv-i{opacity:1!important;transform:none!important}
html.a11y-calm .srv-r::before{transform:scaleX(1)!important}
@media(max-width:900px){.h2-top .h2-nav>a[href$="#ask"],.h2 .h2-top .h2-nav>a[href$="#ask"]{display:inline-flex!important;align-items:center;justify-content:center;line-height:1}}
