@import url("https://fonts.googleapis.com/css2?family=Anton&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap");
:root{--orange:#ff751f;--black:#111;--off:#f4ecdc;--cream:#f1e4cc;--rust:#b8460c;--white:#fff;--blue:#3b5bff;--grey:#6b6b6b;--line:#1111;--r:14px;--mono:"Space Mono",ui-monospace,monospace;--sans:"Space Grotesk",system-ui,sans-serif;--display:"Anton",Impact,"Arial Narrow",sans-serif;--serif:"Instrument Serif",Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--black);background:var(--off);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.mono,.label{font-family:var(--mono)}
.label{font-size:13px;letter-spacing:.04em;text-transform:lowercase;color:var(--orange)}
.label::before{content:"//"}
h1,h2,h3{line-height:1.08;letter-spacing:-.02em;margin:0 0 .4em}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:0;line-height:.92}
h1{font-size:clamp(48px,8.4vw,112px)}
h2{font-size:clamp(38px,5.4vw,72px)}
.serif{font-family:var(--serif);font-style:italic;text-transform:none;font-weight:400;letter-spacing:-.01em}
h3{font-size:22px}
p{margin:0 0 1em}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:700;font-size:15px;padding:14px 22px;border-radius:999px;border:2px solid var(--black);background:var(--black);color:var(--white);text-decoration:none;cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--black)}
.btn.light{background:var(--white);color:var(--black);border-color:var(--white)}
.btn.orange{background:var(--orange);border-color:var(--orange);color:var(--black)}
.btn[disabled]{opacity:.5;cursor:wait}
/* header */
.top{background:var(--black);color:var(--white);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.top .logo img{height:34px;width:auto}
.nav{display:flex;gap:22px;align-items:center;font-family:var(--mono);font-size:14px}
.nav a{text-decoration:none;opacity:.85}.nav a:hover,.nav a.on{opacity:1;color:var(--orange)}
.nav .btn{padding:9px 16px;font-size:13px}
.burger{display:none;background:none;border:0;color:#fff;font:700 15px var(--mono);cursor:pointer}
@media(max-width:860px){.burger{display:block}.nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--black);flex-direction:column;align-items:flex-start;padding:16px 20px 24px}.nav.open{display:flex}}
/* strip */
.strip{background:var(--black);color:var(--orange);font-family:var(--mono);font-size:15px;white-space:nowrap;overflow:hidden;padding:12px 0;border-top:1px solid #222}
.strip span{display:inline-block;padding-left:100%;animation:tick 32s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.strip span{animation:none;padding-left:20px}}
/* hero */
.hero{background:var(--orange);overflow:hidden;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:20px;padding-top:64px;padding-bottom:64px}
.hero h1 span{display:block;font-family:var(--mono);font-size:.42em;font-weight:400;letter-spacing:0;margin-bottom:12px}
.hero p.lead{font-size:20px;max-width:540px}
.hero-call{margin-top:16px;font-size:17px;font-weight:600}.hero-call a{color:inherit;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:4px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero .art{position:relative}
.hero .art img{mix-blend-mode:multiply;filter:grayscale(1) contrast(1.15);width:100%;max-width:470px;margin-left:auto}
.hero .tag,.familiar .tag{position:absolute;bottom:10%;left:0;background:var(--black);color:var(--white);font-family:var(--mono);font-size:13px;padding:8px 12px;border-radius:8px;transform:rotate(-4deg)}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;padding-top:40px}.hero .art img{max-width:320px;margin:0 auto}}
.pagehead{background:var(--orange);padding:56px 0 44px}
.pagehead p{font-size:19px;max-width:640px}
/* sections */
section{padding:84px 0}
.dark{background:var(--black);color:var(--white)}
.white{background:var(--cream)}
.intro{max-width:720px;margin-bottom:40px}
.intro p{font-size:18px;color:var(--grey)}.dark .intro p{color:#bbb}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}section{padding:60px 0}}
.card{background:var(--white);border:2px solid var(--black);border-radius:var(--r);padding:26px;display:flex;flex-direction:column}
.dark .card{background:#1b1b1b;border-color:#333;color:var(--white)}
.card .num{font-family:var(--mono);color:var(--orange);font-size:14px;margin-bottom:14px}
.card p{color:var(--grey)}.dark .card p{color:#bbb}
.card .foot{margin-top:auto;padding-top:14px}
.pain{font-size:clamp(22px,3vw,34px);font-weight:500;line-height:1.3;max-width:900px}
.pain em{font-style:normal;color:var(--orange)}
/* offers */
.offer{padding:0;overflow:hidden}
.offer .pic{aspect-ratio:4/3;background:#eee}
.offer .pic img{width:100%;height:100%;object-fit:cover}
.offer .pic.beam{display:grid;padding:22px 24px 10px;background:linear-gradient(118deg,transparent 0 30%,rgba(255,240,220,.16) 30% 52%,transparent 52%),linear-gradient(118deg,rgba(120,30,0,.18) 0 18%,transparent 18%),var(--orange)}
.offer .pic canvas.offer-crew{width:100%;height:100%;min-height:0;filter:drop-shadow(4px 0 0 #fbf5ea) drop-shadow(-4px 0 0 #fbf5ea) drop-shadow(0 4px 0 #fbf5ea) drop-shadow(0 -4px 0 #fbf5ea) drop-shadow(3px 4px 0 rgba(0,0,0,.18))} /* cream sticker edge, like a cut-out */
.offer .body{padding:24px;display:flex;flex-direction:column;flex:1}
.price{font-family:var(--mono);font-size:26px;font-weight:700;margin:4px 0 10px}
.price small{font-size:14px;font-weight:400;color:var(--grey)}
.meta{font-family:var(--mono);font-size:13px;color:var(--grey);margin-bottom:10px}
.plan.feature{background:var(--orange)}
.plan.feature p,.plan.feature .price small{color:var(--black)}
.perks{list-style:none;padding:0;margin:0 0 18px;font-size:15px}
.perks li{padding:6px 0;border-top:1px solid var(--line)}
.perks li::before{content:"// ";font-family:var(--mono);color:var(--orange)}
.plan.feature .perks li::before{color:var(--black)}
.honest{border-left:4px solid var(--orange);padding-left:18px;font-size:18px}
/* faq */
details{border-top:2px solid var(--black);padding:18px 0}
details:last-child{border-bottom:2px solid var(--black)}
summary{font-weight:700;font-size:19px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:"+";font-family:var(--mono)}details[open] summary::after{content:"–"}
details p{margin:12px 0 0;color:var(--grey);max-width:760px}
/* blog */
.post-card{text-decoration:none;padding:0;overflow:hidden}
.post-card .pic{aspect-ratio:16/10;background:#ddd}.post-card .pic img{width:100%;height:100%;object-fit:cover}
.post-card .body{padding:20px}
.article{max-width:740px;margin:0 auto;font-size:18px}
.article h2{font-size:30px;margin-top:1.4em}.article h3{margin-top:1.2em}
.article blockquote{border-left:4px solid var(--orange);margin:1.2em 0;padding:4px 0 4px 18px;font-size:20px}
.article .cover{border-radius:var(--r);margin:0 0 30px;border:2px solid var(--black)}
/* forms */
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-family:var(--mono);font-size:13px}
.form input,.form select,.form textarea{font:16px var(--sans);padding:13px 14px;border:2px solid var(--black);border-radius:10px;background:var(--white);color:var(--black);width:100%}
.form textarea{min-height:120px;resize:vertical}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.form .row{grid-template-columns:1fr}}
.msg{font-family:var(--mono);font-size:14px;padding:12px 14px;border-radius:10px;background:var(--black);color:var(--white)}
.msg.err{background:#b00020}
.news{display:flex;gap:10px;flex-wrap:wrap}
.news input{flex:1 1 180px}
/* booking */
.steps{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:13px;margin-bottom:22px}
.steps b{padding:6px 12px;border-radius:999px;border:2px solid var(--black);font-weight:400}
.steps b.on{background:var(--black);color:var(--white)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:14px var(--mono);padding:10px 14px;border:2px solid var(--black);border-radius:10px;background:var(--white);cursor:pointer}
.chip.on,.chip:hover{background:var(--black);color:var(--white)}
.svc{cursor:pointer;text-align:left;font:inherit}
.svc.on{outline:4px solid var(--orange)}
.skeleton{color:var(--grey);font-family:var(--mono);font-size:14px}
/* footer */
footer{background:var(--black);color:#ccc;padding:60px 0 30px;font-size:15px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
footer h4{font-family:var(--mono);color:var(--orange);font-weight:400;margin:0 0 10px}
footer a{text-decoration:none}footer a:hover{color:var(--orange)}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
footer .legal{margin-top:40px;font-family:var(--mono);font-size:12px;color:#777}
@media(max-width:760px){footer .cols{grid-template-columns:1fr}}
.grid>*{min-width:0}body{overflow-x:clip}
.nav a.btn{opacity:1;color:var(--black)}
/* poster layer: orange light beams, giant type, cream duotone */
.beam{background:linear-gradient(118deg,transparent 0 30%,rgba(255,240,220,.16) 30% 52%,transparent 52%),linear-gradient(118deg,rgba(120,30,0,.18) 0 18%,transparent 18%),var(--orange)}
.hero{min-height:calc(100vh - 68px)}
.hero .wrap{position:relative;min-height:calc(100vh - 68px)}
.hero .giant{position:absolute;right:-2vw;bottom:-5vw;font-family:var(--display);font-size:clamp(260px,46vw,720px);line-height:.78;color:var(--cream);z-index:0;pointer-events:none;user-select:none}
.hero .art img{filter:grayscale(1) contrast(1.25)}
.posterbar{position:absolute;left:20px;right:20px;top:22px;display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;z-index:2}
.posterbar span{border-top:1.5px solid var(--black);padding-top:6px;min-width:120px}
.hero h1 span{font-family:var(--mono);text-transform:lowercase}
.pain{font-family:var(--serif);font-size:clamp(30px,4.4vw,56px);font-weight:400;line-height:1.08;letter-spacing:-.01em}
.pain em{font-style:italic;color:var(--orange)}
.big{font-family:var(--display);font-size:110px;line-height:.8;color:var(--orange);margin:-4px 0 18px}
.band{padding:110px 0;text-align:left;position:relative;overflow:hidden}
.band p{font-family:var(--serif);font-size:clamp(56px,11vw,160px);line-height:.88;margin:0;color:var(--black);letter-spacing:-.02em}
.band small{display:block;font-family:var(--mono);font-size:14px;margin-top:22px}
.plan.feature{box-shadow:14px 14px 0 var(--rust);border-color:var(--rust)}
.card{transition:transform .2s,box-shadow .2s}
a.card:hover,.svc:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--black)}
.pagehead h1{font-size:clamp(56px,10vw,140px)}
.split img{filter:grayscale(1) contrast(1.2)}
@media(max-width:860px){.hero,.hero .wrap{min-height:0}.posterbar span:nth-child(2){display:none}.hero .wrap{padding-top:120px}.hero .giant{font-size:70vw;bottom:auto;top:46%}}
/* hero animation: cow slides in and bobs, tag pops in, types, wiggles */
.hero .art img{animation:cowIn 1s cubic-bezier(.2,.9,.3,1.2) .15s both,cowBob 5s ease-in-out 1.3s infinite;transform-origin:60% 90%}
@keyframes cowIn{from{opacity:0;transform:translate(60px,40px) rotate(6deg)}to{opacity:1;transform:none}}
@keyframes cowBob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(-1.5deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-6px) rotate(1.2deg)}}
:is(.hero,.familiar) .tag{animation:tagIn .55s cubic-bezier(.3,1.6,.5,1) 1s both,tagWiggle 6s ease-in-out 3.2s infinite;transform-origin:20% 50%;z-index:3}
@keyframes tagIn{from{opacity:0;transform:scale(.2) rotate(-18deg)}to{opacity:1;transform:rotate(-4deg)}}
@keyframes tagWiggle{0%,86%,100%{transform:rotate(-4deg)}89%{transform:rotate(3deg) scale(1.06)}92%{transform:rotate(-7deg)}95%{transform:rotate(-2deg)}}
:is(.hero,.familiar) .tag .type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;animation:typing 1.8s steps(37) 1.5s forwards}
:is(.hero,.familiar) .tag .type+i{display:inline-block;width:.6em;font-style:normal;animation:blink .8s steps(1) infinite}
:is(.hero,.familiar) .tag .type+i::before{content:"_"}
@keyframes typing{to{width:37ch}}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero .art img,:is(.hero,.familiar) .tag,:is(.hero,.familiar) .tag .type+i{animation:none}:is(.hero,.familiar) .tag .type{animation:none;width:auto}}
.familiar .wrap{display:grid;grid-template-columns:1.35fr .65fr;align-items:center;gap:30px}
.familiar .art{position:relative}
.familiar .art canvas.hero-smudge{width:100%;max-width:360px;aspect-ratio:1/1.08;margin-left:auto}
@media(max-width:860px){.familiar .wrap{grid-template-columns:1fr}.familiar .art canvas.hero-smudge{max-width:260px;margin:0 auto}}
.hero .giant .a{position:relative;display:inline-block;z-index:0}
.hero .giant .dave-box{position:absolute;z-index:1;left:-.29em;top:-.34em;width:.78em;line-height:0}
.hero .giant .dave{display:block;width:100%;height:auto;max-width:none}
/* whole-body frames of the same drawing (look up, wink) stacked on the base; js/app.js shows one at a time as you scroll */
.hero .giant .dave-pose{display:block;position:relative}
.hero .giant .dave.alt{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none}
@media(min-width:861px){.hero .giant{font-size:max(min(52vw,840px),66vh);bottom:-3vw}}
@media(max-width:860px){.hero{display:flex;flex-direction:column}.hero .giant{order:2;position:relative;right:auto;bottom:auto;top:auto;font-size:min(78vw,58vh);margin:.3em 0 -.02em;align-self:center;transform:translateX(.14em)}}
@media(prefers-reduced-motion:no-preference){.hero .giant .dave-box{animation:daveIn .9s cubic-bezier(.2,.9,.3,1.1) .3s both}}
canvas.crew.giggle{animation:crewgiggle .7s ease-in-out}
@keyframes crewgiggle{15%{rotate:-7deg;translate:0 -8px}35%{rotate:6deg;translate:0 -3px}55%{rotate:-5deg;translate:0 -7px}75%{rotate:4deg;translate:0 -2px}}
@keyframes daveIn{from{opacity:0;transform:translateY(.06em)}to{opacity:1;transform:none}}
/* smudge and the crew (drawn by js/crew.js) */
canvas.crew{display:block;animation:crewbob 3.2s ease-in-out infinite}
canvas.crew.hop{animation:crewhop .4s ease-out}
@keyframes crewbob{50%{translate:0 -5px}}
@keyframes crewhop{40%{translate:0 -12px;scale:1.05 .95}}
.hero .art canvas.hero-smudge{width:100%;max-width:440px;aspect-ratio:1/1.08;margin-left:auto}
.card{position:relative}
.card-ico{float:right;width:92px;height:92px;margin:-4px -4px 10px 14px}
.band .wrap{position:relative}
.band-ico{position:absolute;right:20px;bottom:-40px;width:clamp(200px,30vw,400px);height:clamp(230px,34vw,460px)}
@media(max-width:700px){.band-ico{position:static;display:block;width:180px;height:200px;margin:18px 0 -40px auto}}
.crewgrid .mate{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:inherit;background:var(--white);border:2px solid var(--black);border-radius:var(--r);padding:18px 24px 24px;transition:transform .15s}
.crewgrid .mate:hover{transform:translateY(-3px)}
.crewgrid canvas{width:100%;height:190px}
.crewgrid h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:34px;line-height:1;margin:12px 0 4px}
.crewgrid .num{font-family:var(--mono);color:var(--orange);font-size:14px}
.crewgrid p{color:var(--grey);margin:8px 0 0}
.intro.withcrew{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;max-width:none}
.side-ico{width:130px;height:130px;flex:none}
.side-walk{flex:1;max-width:460px;height:140px;min-width:200px}
@media(max-width:700px){.side-walk{height:110px;min-width:0}}
.news-ico{width:118px;height:128px;margin-bottom:12px}
.pagehead .wrap{position:relative}
.head-ico{position:absolute;right:20px;bottom:-44px;width:clamp(150px,20vw,240px);height:clamp(150px,20vw,240px)}
.svc-ico{width:120px;height:104px;margin-bottom:8px}
@media(max-width:760px){.head-ico{position:static;display:block;width:120px;height:120px;margin:0 0 8px auto}.pagehead p{max-width:none}}
@media(prefers-reduced-motion:reduce){canvas.crew,canvas.crew.hop{animation:none}}

/* Spike's cyber security card spans the full row on the home page "what we do" grid */
.card.cyber{grid-column:1/-1;display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center}
.card.cyber .card-ico{width:100%;height:200px;margin:0}
.card .new{display:inline-block;margin-left:8px;background:var(--orange);color:var(--black);border-radius:99px;padding:1px 9px;font-size:12px;font-weight:700;text-transform:uppercase;vertical-align:1px}
@media(max-width:700px){.card.cyber{grid-template-columns:1fr}.card.cyber .card-ico{height:160px;width:160px}}
.crewgrid .mate:last-child:nth-child(3n+1){grid-column:2}
@media(max-width:960px){.crewgrid .mate:last-child:nth-child(3n+1){grid-column:auto}}