/* /crew/ only. Loaded from layouts/crew.njk, not sitewide. Builds on the site tokens in styles.css. */
.crew-page{--ink:#0b0b1a;--deep:#1b0a4a;--stage:#6d28d9;--flash:#f5a623;--flash-l:#ffd166;--hot:#e84040;--paper:#fff8ee;background:var(--ink)}
.crew-page main{display:block}
.c-grain{position:absolute;inset:0;pointer-events:none;opacity:.16;background:url(/images/crew/grain.png) repeat;background-size:64px 64px}
.c-h2{font-family:var(--serif);font-weight:900;font-size:clamp(2.4rem,6vw,4.6rem);line-height:.98;letter-spacing:-.04em;color:var(--text);margin:0 0 14px}
.c-lead{font-size:18px;line-height:1.6;color:var(--gray);max-width:56ch;margin:0 0 40px}
.c-sec{position:relative;padding:clamp(64px,9vw,120px) 0;background:#fff}
.c-dark{background:var(--ink);color:#fff}
.c-dark .c-h2{color:#fff}
.c-dark .c-lead{color:rgba(255,255,255,.75)}

/* ---------- hero ---------- */
.c-hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;min-height:min(92svh,860px);display:flex;align-items:center;padding:96px 0 72px}
.c-hero-media{position:absolute;inset:0}
.c-kb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;opacity:0}
.c-kb:first-child{opacity:1}
.c-hero-shade{position:absolute;inset:0;background:
  radial-gradient(60% 70% at 85% 10%,rgba(236,72,153,.38),transparent 60%),
  radial-gradient(70% 80% at 5% 100%,rgba(109,40,217,.7),transparent 65%),
  linear-gradient(90deg,rgba(11,11,26,.88) 0%,rgba(11,11,26,.55) 55%,rgba(11,11,26,.3) 100%)}
.c-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:center}
.c-hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(3rem,7.2vw,6.9rem);line-height:.92;letter-spacing:-.055em;margin:0 0 28px;text-wrap:balance;text-shadow:0 4px 40px rgba(0,0,0,.45)}
.c-hero-sub{font-size:clamp(17px,2vw,21px);line-height:1.55;max-width:34em;color:rgba(255,255,255,.92);margin:0 0 14px;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.c-hero-hire{display:inline-block;margin:0 0 14px;padding:8px 16px;border-radius:999px;background:var(--flash);color:var(--ink);font-weight:800;font-size:15px;line-height:1.3}
.c-hero-proof{font-size:15px;font-weight:600;color:var(--flash-l);margin:0 0 32px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.c-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 34px;border-radius:999px;font-weight:800;font-size:17px;background:var(--flash);color:var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.c-btn:hover{background:var(--flash-l);transform:translateY(-2px);box-shadow:0 14px 34px rgba(245,166,35,.35)}
.c-btn:focus-visible,.c-bar a:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* flipbook that flips by itself */
.c-book{position:relative;width:260px;height:340px;margin:0 auto;perspective:1400px;transform:rotate(4deg)}
.c-book::before{content:'';position:absolute;inset:-14px -18px -18px -10px;border-radius:10px;background:linear-gradient(135deg,#f5a623,#e84040);transform:translateZ(0) rotate(-3deg);opacity:.9;filter:saturate(1.1)}
.c-leaf{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d}
.c-ready .c-leaf{animation:c-flip 12s cubic-bezier(.5,0,.3,1) infinite;animation-delay:calc(var(--i) * 1.3s)}
.c-leaf:nth-child(1){z-index:4}.c-leaf:nth-child(2){z-index:3}.c-leaf:nth-child(3){z-index:2}
.c-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px 8px 8px 4px;background-size:cover;background-position:center;background-color:#2a1566;box-shadow:inset 6px 0 12px rgba(0,0,0,.25)}
.c-face.back{transform:rotateY(180deg);background:repeating-linear-gradient(0deg,#fff8ee 0 26px,#f3e6cf 26px 27px)}
.c-base{position:absolute;inset:0;border-radius:4px 8px 8px 4px;background-size:cover;background-position:center;background-color:#2a1566;z-index:1}
/* the page peels up off the spine and fades, so it never swings over the headline */
@keyframes c-flip{0%,6%{transform:rotateY(0);opacity:1}20%{transform:rotateY(-100deg);opacity:1}24%,92%{transform:rotateY(-112deg);opacity:0}97%,100%{transform:rotateY(0);opacity:1}}

/* hero crossfade, one cycle = 18s. Slide 1 is visible at load (it is the LCP image). */
@keyframes c-kb-a{0%{opacity:1;transform:scale(1)}28%{opacity:1}34%{opacity:0;transform:scale(1.12)}94%{opacity:0;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes c-kb-b{0%{opacity:0;transform:scale(1)}6%{opacity:1}33%{opacity:1}39%{opacity:0;transform:scale(1.12)}100%{opacity:0;transform:scale(1.12)}}
.c-ready .c-kb.is-a{animation:c-kb-a 18s linear infinite}
.c-ready .c-kb.is-b{animation:c-kb-b 18s linear infinite both}

/* ---------- marquee ---------- */
.c-marquee{background:var(--flash);color:var(--ink);overflow:hidden;white-space:nowrap;padding:18px 0;border-block:2px solid var(--ink)}
.c-marquee-track{display:inline-flex;gap:0}
.c-ready .c-marquee-track{animation:c-scroll 28s linear infinite}
.c-marquee span{font-family:var(--serif);font-weight:900;font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:-.03em;padding:0 28px;display:inline-flex;align-items:center;gap:56px}
.c-marquee span::after{content:'';width:12px;height:12px;background:var(--ink);transform:rotate(45deg);flex:none}
@keyframes c-scroll{to{transform:translateX(-50%)}}

/* ---------- where you'll be: flip cards ---------- */
.c-where{background:#fff}
.c-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;list-style:none;margin:0;padding:0}
.c-card{position:relative;perspective:1200px;aspect-ratio:4/5}
.c-card-in{position:absolute;inset:0;border-radius:6px 14px 14px 6px;overflow:hidden;transform-origin:left center;transition:transform .55s var(--ease),box-shadow .55s var(--ease);box-shadow:0 18px 40px rgba(11,11,26,.22);background:var(--ink)}
.c-card img{width:100%;height:100%;object-fit:cover}
.c-card::before{content:'';position:absolute;inset:0;border-radius:6px 14px 14px 6px;background:linear-gradient(135deg,#f5a623,#e84040);transform:translate(8px,8px);z-index:0}
.c-card-in{z-index:1}
.c-card-cap{position:absolute;left:0;right:0;bottom:0;padding:70px 20px 20px;font-size:clamp(20px,2.2vw,26px);font-weight:800;line-height:1.2;color:#fff;background:linear-gradient(transparent,rgba(6,6,15,.94) 72%);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.c-card-in::after{content:'';position:absolute;right:0;top:0;width:0;height:0;border-style:solid;border-width:0 0 0 0;border-color:transparent #fff8ee transparent transparent;transition:border-width .35s var(--ease);filter:drop-shadow(-2px 2px 3px rgba(0,0,0,.3))}
@media (hover:hover){
  .c-card:hover .c-card-in,.c-card:focus-within .c-card-in{transform:rotateY(-14deg) translateX(2px);box-shadow:18px 22px 40px rgba(11,11,26,.3)}
  .c-card:hover .c-card-in::after{border-width:0 54px 54px 0}
}

/* ---------- bento ---------- */
.c-bento{margin-top:36px;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(150px,auto);gap:16px}
.c-tile{position:relative;overflow:hidden;border-radius:22px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;background:#16102f;color:#fff}
.c-tile h3{font-size:clamp(20px,2vw,24px);font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.c-tile p{font-size:16px;line-height:1.5;color:rgba(255,255,255,.82);margin:0;max-width:34ch}
.c-tile p.c-big{color:inherit;max-width:none;line-height:.9;margin:0 0 10px}
.c-tile.c-tile-photo{padding:0}
.c-tile-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-tile-photo .c-tile-t{position:relative;z-index:1;padding:28px;background:linear-gradient(transparent,rgba(6,6,15,.92) 65%);margin-top:auto}
.c-tile .c-big,.c-big{font-family:var(--serif);font-weight:900;letter-spacing:-.05em;line-height:.9;margin:0 0 10px;font-size:clamp(2.8rem,6.2vw,5.6rem)}
.c-t-a{grid-column:span 5;grid-row:span 2}
.c-t-b{grid-column:span 7;background:var(--flash);color:var(--ink)}
.c-t-b p{color:rgba(11,11,26,.82)}
.c-t-c{grid-column:span 3;background:var(--stage)}
.c-t-d{grid-column:span 4;background:linear-gradient(140deg,var(--hot),#a3123a)}
.c-t-e{grid-column:span 4;background:#fff;color:var(--ink);border:2px solid var(--ink)}
.c-t-e p{color:#334155}
.c-t-f{grid-column:span 4;min-height:240px}
.c-t-g{grid-column:span 4;background:var(--deep)}
.c-ico{width:44px;height:44px;margin-bottom:auto;fill:currentColor;opacity:.95}

/* ---------- is this you ---------- */
.c-you{background:var(--paper)}
.c-you-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(28px,5vw,72px);align-items:center}
.c-you-img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px 22px 22px 6px;box-shadow:16px 16px 0 var(--flash)}
.c-you-list{list-style:none;margin:28px 0 0;padding:0}
.c-you-list li{padding:20px 0;border-top:2px solid var(--ink);font-size:18px;line-height:1.5;color:#1e293b}
.c-you-list li:last-child{border-bottom:2px solid var(--ink)}
.c-you-list strong{display:block;font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);letter-spacing:-.025em;color:var(--ink);margin-bottom:2px}

/* ---------- pay ---------- */
.c-pay{color:#fff;background:radial-gradient(60% 80% at 90% 0%,rgba(109,40,217,.55),transparent 60%),radial-gradient(50% 60% at 0% 100%,rgba(232,64,64,.3),transparent 60%),var(--ink);overflow:hidden}
.c-pay .c-h2{color:#fff}
.c-pay-big{font-family:var(--serif);font-weight:900;font-size:clamp(2.2rem,6.4vw,5.4rem);letter-spacing:-.045em;line-height:.95;color:var(--flash-l);margin:6px 0 40px}
.c-pay-list{max-width:880px;margin:0}
.c-pay-row{display:grid;grid-template-columns:minmax(110px,190px) 1fr;gap:20px;align-items:baseline;padding:22px 0;border-top:1px solid rgba(255,255,255,.22)}
.c-pay-row:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.c-pay-list dt{font-size:18px;font-weight:700;color:rgba(255,255,255,.7)}
.c-pay-list dd{margin:0;color:var(--flash-l);font-size:clamp(24px,3.2vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.2}
.c-pay-list dd small{display:block;font-size:17px;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.75);margin:2px 0 10px}
.c-pay-list dd small:last-child{margin-bottom:0}

/* ---------- saturdays ---------- */
.c-sat{background:var(--hot);color:#fff;padding:clamp(56px,9vw,110px) 0;overflow:hidden;position:relative}
.c-sat p{font-family:var(--serif);font-weight:900;font-size:clamp(2.2rem,6.4vw,5.6rem);line-height:.98;letter-spacing:-.05em;max-width:15em;margin:0}

/* ---------- how it works ---------- */
.c-steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
.c-steps li{position:relative;padding-top:78px;counter-increment:s}
.c-steps li::before{content:counter(s);position:absolute;left:0;top:0;font-family:var(--serif);font-weight:900;font-size:80px;line-height:1;letter-spacing:-.06em;color:var(--stage)}
.c-steps h3{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.c-steps p{font-size:16px;line-height:1.55;color:var(--gray);margin:0}

/* ---------- apply ---------- */
.c-apply{background:radial-gradient(60% 70% at 15% 0%,rgba(109,40,217,.8),transparent 60%),radial-gradient(60% 60% at 100% 100%,rgba(236,72,153,.5),transparent 60%),radial-gradient(40% 40% at 60% 40%,rgba(245,166,35,.18),transparent 60%),var(--ink);color:#fff;overflow:hidden}
.c-apply-wrap{position:relative;z-index:1;max-width:760px}
.c-apply .c-h2{color:#fff}
.c-glass{background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(255,255,255,.9));-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border:1px solid rgba(255,255,255,.6);border-radius:28px;padding:clamp(22px,4vw,40px);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.c-prog{display:flex;gap:8px;margin:0 0 6px}
.c-prog i{flex:1;height:6px;border-radius:99px;background:rgba(11,11,26,.14);transition:background .3s}
.c-prog i.on{background:var(--stage)}
.c-prog-t{font-size:14px;font-weight:700;color:#475569;margin:0 0 22px}
.c-step{border:0;margin:0;padding:0;min-width:0}
.c-step h3{font-size:24px;font-weight:800;letter-spacing:-.03em;margin:0 0 18px}
.c-glass .form-input,.c-glass .form-textarea{min-height:56px;font-size:17px;padding:14px 16px;border-radius:14px}
.c-glass .form-textarea{min-height:110px}
.c-glass .form-label{font-size:15px;margin-bottom:8px}
.c-glass .form-grid{gap:18px}
.c-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.c-opt{position:relative}
.c-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.c-opt span{display:flex;align-items:center;justify-content:center;min-height:56px;padding:8px 14px;border:2px solid #8a97a8;border-radius:14px;background:#fff;font-weight:700;font-size:17px;transition:all .15s}
.c-opt input:checked+span{border-color:var(--stage);background:var(--stage);color:#fff}
.c-opt input:focus-visible+span{outline:3px solid var(--flash);outline-offset:2px}
.c-sats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.c-sat-opt{position:relative}
.c-sat-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.c-sat-opt span{display:flex;align-items:center;justify-content:center;min-height:56px;border:2px solid #8a97a8;border-radius:14px;background:#fff;font-weight:700;font-size:16px;transition:all .15s;text-align:center;padding:6px}
.c-sat-opt input:checked+span{border-color:var(--stage);background:var(--stage);color:#fff}
.c-sat-opt input:focus-visible+span{outline:3px solid var(--flash);outline-offset:2px}
.c-file{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.c-file input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.c-file label{display:inline-flex;align-items:center;min-height:56px;padding:0 26px;border-radius:999px;border:2px solid var(--stage);color:var(--stage);font-weight:800;font-size:17px;cursor:pointer;transition:all .15s}
.c-file label:hover,.c-file input:focus-visible+label{background:var(--stage);color:#fff}
.c-file-name{font-size:15px;color:#475569;word-break:break-all}
.c-hint{display:block;font-size:14px;color:#475569;margin:14px 0 8px}
.c-more{border:2px dashed #8a97a8;border-radius:14px;margin-top:18px}
.c-more summary{cursor:pointer;padding:16px 18px;font-weight:800;font-size:16px;color:var(--stage);list-style:none;min-height:56px;display:flex;align-items:center}
.c-more summary::-webkit-details-marker{display:none}
.c-more summary::before{content:'+';width:22px;font-weight:900}
.c-more[open] summary::before{content:'\2212'}
.c-more-body{display:grid;gap:18px;padding:0 18px 18px}
.c-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.c-nav{display:flex;gap:12px;margin-top:26px;align-items:center}
.c-nav .c-btn{flex:1}
.c-back{min-height:56px;padding:0 22px;border-radius:999px;font-weight:800;font-size:17px;color:var(--ink);background:transparent;border:2px solid var(--ink)}
.c-back:hover{background:var(--ink);color:#fff}
.c-status{margin-top:16px;padding:14px 16px;border-radius:12px;font-size:16px;display:none}
.c-status.error{display:block;background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.c-thanks{text-align:center;padding:12px 0}
.c-thanks h3{font-family:var(--serif);font-weight:900;font-size:40px;letter-spacing:-.04em;margin:0 0 10px}
.c-thanks a{color:var(--stage);font-weight:800;text-decoration:underline}
.c-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- faq, final ---------- */
.c-faq{background:#fff}
.c-faq .faq-q{font-size:19px;min-height:64px}
.c-final{background:linear-gradient(120deg,var(--stage),#a3123a 70%,var(--hot));color:#fff;text-align:left;padding:clamp(72px,10vw,130px) 0;position:relative;overflow:hidden}
.c-final h2{font-family:var(--serif);font-weight:900;font-size:clamp(2.8rem,8vw,7rem);line-height:.92;letter-spacing:-.055em;margin:0 0 30px}
.c-final p{margin:22px 0 0;font-size:18px}
.c-final p a{color:var(--flash-l);font-weight:800;text-decoration:underline}

/* ---------- sticky mobile bar ---------- */
.c-bar{display:none}
@media (max-width:960px){
  .c-bar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:900;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(11,11,26,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.14);transform:translateY(0);transition:transform .3s var(--ease)}
  .c-bar.is-hidden{transform:translateY(110%)}
  .c-bar a{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;font-weight:800;font-size:17px}
  .c-bar .c-bar-a{flex:1;background:var(--flash);color:var(--ink)}
  .c-bar .c-bar-t{padding:0 20px;border:2px solid rgba(255,255,255,.4);color:#fff}
  .crew-page .ftr{padding-bottom:84px}
}

/* ---------- scroll reveal (only when JS has opted in; honors reduced motion) ---------- */
.c-js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.c-js .rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .c-hero-grid{grid-template-columns:1fr}
  .c-book{display:none}
  .c-hero{padding:72px 0 56px;min-height:auto}
  .c-cards{grid-template-columns:1fr 1fr}
  .c-t-a{grid-column:span 12;grid-row:span 1;min-height:340px}
  .c-t-b,.c-t-c,.c-t-d,.c-t-e,.c-t-f,.c-t-g{grid-column:span 6}
  .c-t-b{grid-column:span 12}
  .c-you-grid{grid-template-columns:1fr}
  .c-you-img{aspect-ratio:3/2}
  .c-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .c-cards{grid-template-columns:1fr}
  .c-card{aspect-ratio:4/4.4}
  .c-t-c,.c-t-d,.c-t-e,.c-t-f,.c-t-g{grid-column:span 12}
  .c-tile{padding:22px}
  .c-steps{grid-template-columns:1fr}
  .c-pay-row{grid-template-columns:1fr;gap:2px}
  .c-sats{grid-template-columns:1fr 1fr}
  .c-opts,.c-chips{grid-template-columns:1fr 1fr}
  .c-glass .form-grid{grid-template-columns:1fr}
  .c-marquee span{padding:0 18px;gap:36px}
}
@media (prefers-reduced-motion:reduce){
  .c-ready .c-kb.is-a,.c-ready .c-kb.is-b,.c-leaf,.c-marquee-track{animation:none!important}
  .c-kb.is-b{display:none}
  .c-js .rv{opacity:1;transform:none;transition:none}
  .c-card-in,.c-btn{transition:none}
}

.c-btn[hidden],.c-back[hidden],.c-step[hidden],.c-thanks[hidden],.crew-form[hidden]{display:none!important}

/* Below-the-fold sections skip layout and paint until they are near the viewport (same trick the rest of the site uses) */
.c-where,.c-bento-sec,.c-you,.c-pay,.c-sat,.c-how,.c-faq,.c-final{content-visibility:auto;contain-intrinsic-size:auto 760px}