/* Search For Hire proposal system. Brand: Char, Synergy, Strategy, Data, White. */

@font-face{font-family:'FFF Acid Grotesk';src:url('fonts/FFFAcidGrotesk-Variable.woff2') format('woff2');font-weight:30 300;font-style:normal;font-display:swap}
@font-face{font-family:'Saans';src:url('fonts/Saans-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Saans';src:url('fonts/Saans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Saans';src:url('fonts/Saans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --char:#161616;--synergy:#9F88FF;--strategy:#3A3049;--data:#2A144C;--white:#FFFFFF;
  --ink:#FFFFFF;--muted:rgba(255,255,255,.64);--faint:rgba(255,255,255,.38);--line:rgba(255,255,255,.1);
  --card:#1C1C1C;--card2:#202020;
  --head:'FFF Acid Grotesk',Helvetica Neue,Helvetica,Arial,sans-serif;
  --body:'Saans',Helvetica,Arial,sans-serif;
  --max:1180px;--gutter:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--char);color:var(--ink);font-family:var(--body);font-weight:400;font-size:17px;line-height:1.55;overflow-x:hidden}
::selection{background:var(--synergy);color:var(--char)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
h1,h2,h3,.display{font-family:var(--head);font-weight:30;letter-spacing:0;line-height:1.02;margin:0}
h1{font-size:clamp(40px,7vw,92px)}
h2{font-size:clamp(32px,4.6vw,60px)}
h3{font-size:clamp(22px,2.4vw,30px);line-height:1.15}
p{max-width:62ch}
strong{font-weight:500}
.muted{color:var(--muted)}
.accent{color:var(--synergy)}
.small{font-size:14px}
.eyebrow{font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:none;color:var(--synergy);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--synergy)}
.wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
section{padding:clamp(72px,10vw,140px) 0;position:relative}
section + section{border-top:1px solid var(--line)}
.sec-head{display:grid;gap:22px;margin-bottom:clamp(40px,5vw,72px)}
.sec-head p{font-size:clamp(17px,1.5vw,21px);color:var(--muted)}
@media(min-width:900px){.sec-head{grid-template-columns:1.1fr .9fr;align-items:end}.sec-head p{justify-self:end;max-width:46ch}}

/* progress + header */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:transparent;z-index:60}
.progress span{display:block;height:100%;width:0;background:var(--synergy);transition:width .1s linear}
header.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(22,22,22,.72);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.wordmark{font-family:var(--head);font-weight:80;font-size:20px;letter-spacing:0;display:flex;align-items:baseline;gap:2px;white-space:nowrap}
.wordmark sup{font-size:9px;font-family:var(--body);color:var(--faint);margin-left:2px}
nav.sections{display:none;gap:26px}
nav.sections a{font-size:14px;color:var(--muted);position:relative;padding:4px 0;transition:color .25s}
nav.sections a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--synergy);transition:right .35s var(--ease)}
nav.sections a.active,nav.sections a:hover{color:var(--white)}
nav.sections a.active::after{right:0}
@media(min-width:1000px){nav.sections{display:flex}}
.plus{width:28px;height:28px;position:relative;flex:none}
.plus::before,.plus::after{content:"";position:absolute;background:var(--synergy);border-radius:2px;left:50%;top:50%;transform:translate(-50%,-50%)}
.plus::before{width:100%;height:5px}
.plus::after{width:5px;height:100%}
.plus.spin{transition:transform .8s var(--ease)}
header.top:hover .plus.spin{transform:rotate(90deg)}
@keyframes plusspin{to{transform:rotate(360deg)}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:500;font-size:15px;padding:14px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .35s var(--ease),background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--synergy);color:var(--char)}
.btn-primary:hover{background:#B4A3FF}
.btn-ghost{border-color:rgba(255,255,255,.22);color:var(--white)}
.btn-ghost:hover{border-color:var(--synergy);color:var(--synergy)}
.btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

/* hero */
.hero{min-height:calc(100vh - 64px);display:flex;align-items:center;padding:clamp(56px,8vw,120px) 0;overflow:hidden;border:0}
.hero .wrap{position:relative;z-index:2;display:grid;gap:34px}
.hero h1{max-width:14ch}
.hero .lede{font-size:clamp(18px,1.8vw,24px);color:var(--muted);max-width:52ch}
.hero .meta{display:flex;flex-wrap:wrap;gap:12px 28px;color:var(--faint);font-size:14px;padding-top:12px;border-top:1px solid var(--line);max-width:720px}
.hero .meta b{color:var(--muted);font-weight:500}
.hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-bg .glow{position:absolute;width:70vmax;height:70vmax;left:55%;top:-20%;border-radius:50%;background:radial-gradient(closest-side,rgba(159,136,255,.22),rgba(42,20,76,.12) 55%,transparent 72%);filter:blur(30px);animation:drift 18s ease-in-out infinite alternate}
.hero-bg .glow.two{left:-25%;top:50%;width:55vmax;height:55vmax;background:radial-gradient(closest-side,rgba(58,48,73,.7),transparent 70%);animation-duration:24s;animation-delay:-8s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-6%,8%,0) scale(1.08)}}
.hero-bg .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 70%)}
.hero-bg .bigplus{position:absolute;right:-6vw;top:8%;width:min(46vw,520px);aspect-ratio:1;opacity:.9}
.hero-bg .bigplus::before,.hero-bg .bigplus::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(159,136,255,.35);border-radius:6px}
.hero-bg .bigplus::before{width:100%;height:22%}
.hero-bg .bigplus::after{width:22%;height:100%}
.lines .line{display:block;overflow:hidden}
.lines .line > span{display:block;transform:translateY(110%);opacity:0;animation:rise 1.1s var(--ease) forwards}
.lines .line:nth-child(1)>span{animation-delay:.15s}.lines .line:nth-child(2)>span{animation-delay:.28s}.lines .line:nth-child(3)>span{animation-delay:.41s}.lines .line:nth-child(4)>span{animation-delay:.54s}
@keyframes rise{to{transform:none;opacity:1}}
.fade-in{opacity:0;animation:fade 1s var(--ease) forwards}
.fade-in.d1{animation-delay:.6s}.fade-in.d2{animation-delay:.8s}.fade-in.d3{animation-delay:1s}
@keyframes fade{to{opacity:1}}
.scroll-cue{display:none;position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;color:var(--faint);font-size:12px;letter-spacing:.14em;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue i{display:block;width:1px;height:46px;background:linear-gradient(var(--synergy),transparent);animation:cue 1.8s ease-in-out infinite}
@media(min-width:900px){.scroll-cue{display:flex}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.stagger > *{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.05s}.stagger.in > *:nth-child(2){transition-delay:.15s}.stagger.in > *:nth-child(3){transition-delay:.25s}.stagger.in > *:nth-child(4){transition-delay:.35s}.stagger.in > *:nth-child(5){transition-delay:.45s}.stagger.in > *:nth-child(6){transition-delay:.55s}.stagger.in > *:nth-child(7){transition-delay:.65s}.stagger.in > *:nth-child(8){transition-delay:.75s}

/* cards + grids */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;position:relative;overflow:hidden;transition:border-color .3s,transform .5s var(--ease)}
.card:hover{border-color:rgba(159,136,255,.45);transform:translateY(-3px)}
.card h3{margin-bottom:12px}
.card p{color:var(--muted);font-size:16px}
.card .num{font-family:var(--head);font-weight:30;font-size:14px;color:var(--synergy);letter-spacing:.1em;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.card .num::after{content:"";height:1px;flex:1;background:var(--line)}
.card.synergy{background:var(--synergy);color:var(--char);border-color:transparent}
.card.synergy p,.card.synergy .muted{color:rgba(22,22,22,.72)}
.card.synergy .num{color:var(--char)}
.card.synergy .num::after{background:rgba(22,22,22,.2)}
.card.strategy{background:var(--strategy)}
.card.data{background:var(--data)}

/* stats */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.stat{background:var(--char);padding:30px 26px}
.stat .v{font-family:var(--head);font-weight:30;font-size:clamp(40px,5vw,66px);line-height:1;color:var(--synergy);display:flex;align-items:baseline;gap:2px}
.stat .v small{font-size:.45em;color:var(--synergy)}
.stat .l{margin-top:12px;color:var(--muted);font-size:15px}

/* quotes */
.quote{border-left:2px solid var(--synergy);padding:6px 0 6px 24px}
.quote p{font-family:var(--head);font-weight:30;font-size:clamp(20px,2vw,26px);line-height:1.25;max-width:none}
.quote cite{display:block;margin-top:14px;font-style:normal;color:var(--faint);font-size:14px}
.heard{display:grid;gap:40px}
@media(min-width:900px){.heard{grid-template-columns:1fr 1fr;gap:64px}}
.heard .copy p{color:var(--muted);font-size:18px;margin-bottom:18px}
.heard .copy p:last-child{margin-bottom:0}
.heard .quotes{display:grid;gap:30px}

/* timeline / roadmap */
.timeline{position:relative;display:grid;gap:26px}
.timeline::before{content:"";position:absolute;left:19px;top:16px;bottom:16px;width:1px;background:var(--line)}
.timeline .draw{position:absolute;left:19px;top:16px;width:1px;height:0;background:var(--synergy);transition:height 1.6s var(--ease)}
.timeline.in .draw{height:calc(100% - 32px)}
.tl{display:grid;grid-template-columns:40px 1fr;gap:22px;align-items:start}
.tl .dot{width:40px;height:40px;border-radius:50%;background:var(--char);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--head);font-size:14px;color:var(--synergy);position:relative;z-index:1;transition:border-color .4s,background .4s}
.timeline.in .tl .dot{border-color:var(--synergy)}
.tl .body{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.tl .body h3{font-size:22px;margin-bottom:8px}
.tl .body .when{color:var(--synergy);font-size:13px;letter-spacing:.1em;font-weight:500;margin-bottom:10px}
.tl .body p{color:var(--muted);font-size:16px}
@media(min-width:900px){.timeline{grid-template-columns:repeat(var(--cols,4),1fr);gap:18px}.timeline::before{left:20px;right:20px;top:19px;bottom:auto;height:1px;width:auto}.timeline .draw{left:20px;top:19px;height:1px;width:0;transition:width 1.8s var(--ease)}.timeline.in .draw{width:calc(100% - 40px);height:1px}.tl{grid-template-columns:1fr;gap:18px}}

/* process steps */
.steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--head);font-weight:30;font-size:30px;color:var(--synergy);line-height:1}
.step h3{font-size:24px;margin-bottom:8px}
.step p{color:var(--muted);font-size:16px;grid-column:2}
@media(min-width:900px){.step{grid-template-columns:90px 1fr 1.4fr;gap:28px}.step h3{margin:0}.step p{grid-column:3}}

/* packages */
.packages{display:grid;gap:18px}
@media(min-width:900px){.packages{grid-template-columns:1fr 1fr}}
.pkg{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:34px;position:relative;overflow:hidden;transition:border-color .3s}
.pkg.rec{border-color:rgba(159,136,255,.6);background:linear-gradient(180deg,rgba(159,136,255,.08),rgba(22,22,22,0) 60%),var(--card)}
.pkg .tag{position:absolute;top:22px;right:22px;background:var(--synergy);color:var(--char);font-size:12px;font-weight:500;letter-spacing:.08em;padding:6px 12px;border-radius:999px}
.pkg .name{font-family:var(--head);font-weight:30;font-size:30px;margin-bottom:6px}
.pkg .pct{font-family:var(--head);font-weight:30;font-size:clamp(56px,7vw,84px);line-height:1;color:var(--synergy);margin:14px 0 4px}
.pkg .pct small{font-size:.28em;color:var(--muted);font-family:var(--body);margin-left:8px}
.pkg .sub{color:var(--muted);font-size:15px;margin-bottom:22px}
.pkg ul{list-style:none;display:grid;gap:12px;margin-bottom:22px}
.pkg li{display:grid;grid-template-columns:18px 1fr;gap:12px;color:var(--muted);font-size:16px}
.pkg li::before{content:"+";color:var(--synergy);font-weight:500;line-height:1.5}
.pkg li.off{opacity:.42}
.pkg li.off::before{content:"–"}
details.more{border-top:1px solid var(--line);padding-top:16px}
details.more summary{cursor:pointer;list-style:none;color:var(--synergy);font-weight:500;font-size:15px;display:flex;justify-content:space-between;align-items:center}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"+";font-size:22px;line-height:1;transition:transform .35s var(--ease)}
details.more[open] summary::after{transform:rotate(45deg)}
details.more p{margin-top:12px;color:var(--muted);font-size:15px}

/* calculator */
.calc{background:var(--card2);border:1px solid var(--line);border-radius:22px;padding:clamp(26px,3vw,40px);display:grid;gap:30px}
@media(min-width:900px){.calc{grid-template-columns:1fr 1fr;gap:48px}}
.calc label{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--muted);margin-bottom:14px}
.calc label output{font-family:var(--head);font-weight:30;font-size:34px;color:var(--white)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:linear-gradient(90deg,var(--synergy) var(--p,50%),rgba(255,255,255,.18) var(--p,50%));border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--char);border:2px solid var(--synergy);cursor:grab;box-shadow:0 0 0 6px rgba(159,136,255,.12);transition:box-shadow .25s}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 10px rgba(159,136,255,.18)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--char);border:2px solid var(--synergy);cursor:grab}
.calc .range-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--faint);margin-top:10px;letter-spacing:.06em}
.calc .out{display:grid;gap:14px}
.calc .row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.calc .row:last-child{border:0}
.calc .row .k{color:var(--muted);font-size:15px}
.calc .row .k small{display:block;color:var(--faint);font-size:13px;margin-top:2px}
.calc .row .v{font-family:var(--head);font-weight:30;font-size:30px;white-space:nowrap}
.calc .row.hl .v{color:var(--synergy);font-size:38px}
.calc .note{font-size:13px;color:var(--faint);max-width:none}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px;margin-bottom:24px}
.seg button{background:transparent;border:0;color:var(--muted);font-family:var(--body);font-weight:500;font-size:14px;padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.seg button.on{background:var(--synergy);color:var(--char)}

/* profile / vetting */
.split{display:grid;gap:40px}
@media(min-width:900px){.split{grid-template-columns:.9fr 1.1fr;gap:64px}}
.list{list-style:none;display:grid;gap:14px}
.list li{display:grid;grid-template-columns:22px 1fr;gap:14px;color:var(--muted);font-size:17px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.list li::before{content:"+";color:var(--synergy);font-weight:500}
.list li b{color:var(--white);font-weight:500}
.list.red li::before{content:"×";color:var(--faint)}
.bar{display:grid;gap:10px}
.bar .lab{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.bar .track{height:6px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden}
.bar .track i{display:block;height:100%;width:0;background:var(--synergy);transition:width 1.4s var(--ease)}
.in .bar .track i{width:var(--w)}
.bar.strat .track i{background:var(--white);opacity:.8}

/* proof */
.logos{display:flex;flex-wrap:wrap;gap:14px 36px;color:var(--muted);font-family:var(--head);font-weight:30;font-size:clamp(18px,2vw,26px);align-items:center}
.logos span{opacity:.75;transition:opacity .3s,color .3s}
.logos span:hover{opacity:1;color:var(--synergy)}
.testi{display:grid;gap:18px}
@media(min-width:900px){.testi{grid-template-columns:1fr 1fr 1fr}}
.testi .card p{font-family:var(--head);font-weight:30;font-size:20px;line-height:1.25;color:var(--white)}
.testi .card cite{display:block;margin-top:18px;font-style:normal;color:var(--faint);font-size:14px}
.testi .card .plus{width:18px;height:18px;margin-bottom:22px}

/* close / cta */
.close{background:var(--synergy);color:var(--char);border:0}
.close h2{color:var(--char);max-width:16ch}
.close p{color:rgba(22,22,22,.72);font-size:clamp(17px,1.6vw,21px)}
.close .btn-primary{background:var(--char);color:var(--white)}
.close .btn-primary:hover{background:#2a2a2a}
.close .btn-ghost{border-color:rgba(22,22,22,.35);color:var(--char)}
.close .btn-ghost:hover{border-color:var(--char);color:var(--char)}
.close .wrap{display:grid;gap:34px}
@media(min-width:900px){.close .wrap{grid-template-columns:1.1fr .9fr;align-items:center}}
.close .next{display:grid;gap:14px;counter-reset:n}
.close .next div{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;padding:16px 0;border-top:1px solid rgba(22,22,22,.18)}
.close .next div::before{counter-increment:n;content:counter(n);font-family:var(--head);font-size:22px;line-height:1.1}
.close .next b{display:block;font-weight:500;margin-bottom:2px}
.close .next span{grid-column:2;color:rgba(22,22,22,.7);font-size:15px}
.close .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
footer{padding:36px 0;border-top:1px solid var(--line);color:var(--faint);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer .wordmark{font-size:16px}

/* helpers */
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--muted)}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--synergy);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.callout{border:1px solid rgba(159,136,255,.4);background:rgba(159,136,255,.06);border-radius:16px;padding:22px 26px;display:grid;grid-template-columns:28px 1fr;gap:16px;align-items:start}
.callout .plus{width:20px;height:20px}
.callout p{color:var(--muted);font-size:16px;max-width:none}
.callout b{color:var(--white);font-weight:500}
.ticker{font-family:var(--head);font-weight:30}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}.reveal,.stagger>*{opacity:1;transform:none}}

/* print / PDF leave-behind */
@media print{
  :root{--char:#fff;--ink:#161616;--muted:#3a3a3a;--faint:#666;--line:#ddd;--card:#f6f5fa;--card2:#f6f5fa}
  body{background:#fff;color:#161616;font-size:12.5px}
  .progress,header.top,.scroll-cue,.hero-bg,.btn,.seg,footer .small{display:none!important}
  .hero{min-height:0;padding:40px 0}
  section{padding:34px 0;break-inside:avoid}
  .reveal,.stagger>*,.lines .line>span,.fade-in{opacity:1!important;transform:none!important;animation:none!important}
  .timeline.in .draw,.in .bar .track i{transition:none}
  .close{background:#9F88FF;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .card.synergy,.pkg .tag,.seg button.on{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:11px;color:#666}
}