/* Tactical.ly site base. Hand-written; site.css is this file plus the shared
   design system rules that tools/import_design.py collects from the boards. */

:root {
  --slate: #5828FF;
  --pink: #FF4AFF;
  --gold: #FAC748;
  --teal: #38A3A5;
  --coral: #EB8F70;
  --ink: #11092a;
  --cream: #FFF4DE;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif; overflow-x: clip; }
img { max-width: none; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--slate); outline-offset: 3px; }

/* One layout per screen size: desktop 1440, tablet 768, mobile 375.
   site.js scales the visible layout to the window with CSS zoom. */
.dcv { display: none; }
.dcv-d { display: block; }
@media (max-width: 1199px) { .dcv-d { display: none; } .dcv-t { display: block; } }
@media (max-width: 699px) { .dcv-t { display: none; } .dcv-m { display: block; } }
.dc-board { position: relative; }
template { display: none; }

/* Pop-ups */
.dc-modal { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; overscroll-behavior: contain; background: rgba(17, 9, 42, 0.84); display: flex; justify-content: center; }
.dc-modal[data-modal="case"] { align-items: flex-start; }
.dc-modal[data-v="d"] > .dc-dialog { zoom: var(--dcz-d, 1); }
.dc-modal[data-v="t"] > .dc-dialog { zoom: var(--dcz-t, 1); }
.dc-modal[data-v="m"] > .dc-dialog { zoom: var(--dcz-m, 1); }
.dc-dialog { margin: auto 0; padding: 40px 16px; }
.dc-modal[data-v="m"] > .dc-dialog { width: 100%; box-sizing: border-box; padding: 24px 12px; }
html.dc-modal-open { overflow: hidden; }

/* Animations wait until their block is on screen (site.js adds .dc-seen). */
.dcv [data-dc-root] > :not(.dc-seen),
.dcv [data-dc-root] > :not(.dc-seen) * { animation-play-state: paused !important; }
.dcv [data-arrive]:not(.dc-seen),
.dcv [data-arrive]:not(.dc-seen) * { animation-play-state: paused !important; }

/* Heroes fill the screen below the nav (site.js sets the height). */
.dc-hero { box-sizing: border-box; }

/* Home framework rows fade up to full strength as they scroll into view. */
.fw-row { opacity: 0.25; transition: opacity 0.9s ease; }
.fw-row.dc-in { opacity: 1; }
.fw-row .fw-c, .fw-row .fw-t { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .fw-row { opacity: 1; transition: none; } }

/* Why us: the numbered square wiggles when its row is hovered. */
@keyframes dc-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 55% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } }
.why-row > div:first-child { transition: box-shadow 0.2s ease; }
.why-row:hover > div:first-child { animation: dc-wiggle 0.55s ease both; box-shadow: 6px 6px 0 #11092a !important; }

/* Mobile home headline: "Strategy into" over "performance.", which tilts and just catches the line above. */
.dcv h1:has(.hl-tuck) { margin-bottom: 12px !important; }
.dcv .nb-hlink.hl-tuck { transform-origin: left bottom; transform: rotate(-3deg) translate(8px, 10px); box-shadow: 6px 6px 0 #11092a; }
.dcv .nb-hlink.hl-tuck:hover, .dcv .nb-hlink.hl-tuck:focus-visible { transform: rotate(-4.5deg) translate(6px, 7px); box-shadow: 8px 8px 0 #11092a !important; }

/* The ImpactLab photo is cropped to fill each frame; keep it anchored on Hayden, who stands right of centre. */
img[src*="impactlab-hayden"] { object-position: 74% 16% !important; }

/* About timeline: hovering anywhere on a row (the full width, including the empty side)
   lifts the card, and wiggles its numbered square with a deeper shadow, as in Why us. */
.ab-item:hover .ab-card { transform: translate(-4px, -4px) rotate(var(--hr, 0deg)); box-shadow: 14px 14px 0 #11092a !important; }
.ab-node { transition: box-shadow 0.2s ease; }
.ab-item:hover .ab-node { animation: dc-wiggle 0.55s ease both !important; animation-timeline: auto !important; box-shadow: 8px 8px 0 #11092a !important; }

/* Operating model diagram: the centre links to how we help and inverts on hover. */
.op-core { cursor: pointer; }
.op-core circle, .op-core text { transition: fill 0.2s ease; }
.op-core:hover circle:nth-of-type(1), .op-core:focus-visible circle:nth-of-type(1) { fill: #11092a; }
.op-core:hover circle:nth-of-type(2), .op-core:focus-visible circle:nth-of-type(2) { fill: #FAC748; }
.op-core:hover text, .op-core:focus-visible text { fill: #11092a; }

/* Our approach steps: once a numbered square has popped in (site.js marks it ap-done), hovering
   anywhere on its step tilts it with a deeper shadow. `rotate` adds to its own resting tilt. */
@keyframes dc-tilt { 0%, 100% { rotate: 0deg; } 25% { rotate: -9deg; } 55% { rotate: 6deg; } 80% { rotate: -3deg; } }
.ap-num { transition: box-shadow 0.2s ease; }
.ap-num.ap-done { animation: none !important; }
.ap-step:hover .ap-num.ap-done { animation: dc-tilt 0.55s ease both !important; box-shadow: 7px 7px 0 #11092a !important; }
.ap-step:hover .ap-num.ap-done[style*="5px 5px 0"] { box-shadow: 8px 8px 0 #11092a !important; }
@media (prefers-reduced-motion: reduce) { .why-row:hover > div:first-child, .ab-item:hover .ab-node, .ap-step:hover .ap-num.ap-done { animation: none !important; } }

/* Home, how we work: hovering anywhere on a panel presses its button, and the whole panel books a call (site.js). */
.hw-card { cursor: pointer; }
.hw-card:hover .nb-press { transform: translate(4px, 4px); box-shadow: 2px 2px 0 #11092a !important; }

/* Headline highlights sit behind the line above, so its descenders (the p in
   "people", the g in "strategy") draw over the highlight box, not under it. */
.dcv :is(h1, h2, h3) { isolation: isolate; pointer-events: none; }
.dcv :is(h1, h2, h3) * { pointer-events: auto; }
.dcv :is(h1, h2, h3) :is(span, a)[style*="background"] { position: relative; z-index: -1; }
/* Behind the text layer the highlight would sit under the heading's own box for the
   mouse too, so the heading ignores the pointer and its contents take it instead. */

/* Floating menu: once the nav scrolls away, a menu button drops in top right
   (the chat icon in reverse) and opens a drawer. Built by site.js. */
/* Back to top: a yellow square bottom right, once the reader is well down the page (site.js adds tt-show). */
.tt-btn { position: fixed; right: 16px; bottom: 16px; z-index: 880; width: 56px; height: 56px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden; pointer-events: none; }
html.tt-show .tt-btn { opacity: 1; visibility: visible; pointer-events: auto; animation: fm-rise 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) backwards; }
html.tt-was:not(.tt-show) .tt-btn { visibility: visible; animation: fm-sink 0.28s ease-in forwards; }
.tt-sq { display: grid; place-items: center; width: 40px; height: 40px; background: #FAC748; box-shadow: 4px 4px 0 #5828FF; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.tt-sq svg { width: 18px; height: 18px; display: block; transition: transform 0.2s cubic-bezier(0.3, 1.5, 0.5, 1); }
.tt-btn:hover .tt-sq, .tt-btn:focus-visible .tt-sq { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #5828FF; }
.tt-btn:hover svg, .tt-btn:focus-visible svg { transform: translateY(-3px); }
.tt-btn:active .tt-sq { transform: translate(4px, 4px); box-shadow: 0 0 0 #5828FF; }
@keyframes fm-rise { 0% { opacity: 0; transform: translateY(80px) rotate(14deg) scale(0.6); } 55% { opacity: 1; transform: translateY(-6px) rotate(-3deg) scale(1.06, 0.94); } 78% { transform: translateY(2px) scale(0.98, 1.03); } 100% { transform: none; } }
@keyframes fm-sink { to { opacity: 0; visibility: hidden; transform: translateY(70px) rotate(12deg) scale(0.6); } }
/* The menu square and the logo sticker share one line: both boxes are 40px tall from 24px down. */
.fm-btn { position: fixed; top: 24px; right: 24px; z-index: 900; width: 40px; height: 40px; padding: 0; margin: 0; border: 0; background: transparent; display: block; cursor: pointer; -webkit-appearance: none; appearance: none;
  opacity: 0; visibility: hidden; pointer-events: none; }
/* Floating logo and menu (site.js glides them out of the nav and back). While they are out,
   the nav's own logo and menu button are hidden so they seem to have lifted off the bar. */
html.fm-show :is(.fm-btn, .fm-logo), html.fm-open :is(.fm-btn, .fm-logo) { opacity: 1; visibility: visible; pointer-events: auto; }
html.fm-show .dcv .fm-src { visibility: hidden; }
/* Phones: tucked away while scrolling down (translate, so it never fights the glide). */
.fm-btn { transition: translate 0.3s cubic-bezier(0.3, 1.2, 0.5, 1); }
html.fm-tuck :is(.fm-btn, .fm-logo) { translate: 0 -110px; transition: translate 0.25s ease-in; }
.fm-btn::before { content: ''; position: absolute; inset: -8px; }
.fm-sq { position: relative; display: block; width: 40px; height: 40px; background: #FAC748; box-shadow: 4px 4px 0 #5828FF; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.fm-sq i { position: absolute; left: 11px; width: 18px; height: 3px; background: #11092a; transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.2s ease; }
.fm-sq i:nth-child(1) { top: 12px; }
.fm-sq i:nth-child(2) { top: 18.5px; }
.fm-sq i:nth-child(3) { top: 25px; }
.fm-btn:hover .fm-sq, .fm-btn:focus-visible .fm-sq { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #5828FF; }
.fm-btn:active .fm-sq, .fm-btn.fm-press .fm-sq { transform: translate(4px, 4px); box-shadow: 0 0 0 #5828FF; }
html.fm-open .fm-sq i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
html.fm-open .fm-sq i:nth-child(2) { opacity: 0; transform: scaleX(0); }
html.fm-open .fm-sq i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Floating logo: a white sticker top left, in and out with the menu button. */
.fm-logo { position: fixed; top: 24px; left: 24px; z-index: 900; display: flex; align-items: center; box-sizing: border-box; height: 40px; padding: 0 12px; background: #FFFFFF; border: 3px solid #11092a; box-shadow: 4px 4px 0 #5828FF;
  rotate: -2deg; opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.15s ease, box-shadow 0.15s ease, translate 0.3s cubic-bezier(0.3, 1.2, 0.5, 1); }
.fm-logo svg { display: block; height: 16px !important; width: auto !important; overflow: visible; }
.fm-logo .lg-t path, .fm-logo .lg-d path { fill: #5828FF; }
.fm-logo .lg-x path { fill: #11092a; }
html.fm-show .fm-logo:hover, html.fm-show .fm-logo:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #5828FF; }
html.fm-show .fm-logo:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #5828FF; }
.fm-backdrop { position: fixed; inset: 0; z-index: 890; background: rgba(17, 9, 42, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; }
html.fm-open .fm-backdrop { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
html.fm-open { overflow: hidden; }
.fm-drawer { position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 895; width: min(400px, calc(100vw - 24px)); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; padding: 30px 32px 32px; background: #FFF4DE; color: #11092a; border: 3px solid #11092a; box-shadow: 10px 10px 0 #5828FF;
  visibility: hidden; transform: translateX(calc(100% + 60px)) rotate(4deg); transition: transform 0.5s cubic-bezier(0.25, 1.2, 0.4, 1), visibility 0s 0.5s; }
html.fm-open .fm-drawer { visibility: visible; transform: none; transition: transform 0.5s cubic-bezier(0.25, 1.2, 0.4, 1); }
.fm-tag { align-self: flex-start; padding: 6px 12px; background: #FF4AFF; border: 3px solid #11092a; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-2deg); }
/* Where the drawer runs under the floating logo (narrow screens), the logo heads the drawer
   and the Menu tag gives way; its space keeps the links clear of the logo. */
@media (max-width: 620px) { .fm-tag { visibility: hidden; } }
.fm-links { display: flex; flex-direction: column; gap: 6px; margin: 44px 0 32px; }
.fm-link { align-self: flex-start; margin-left: -12px; padding: 4px 12px; border: 3px solid transparent; color: #11092a; font-size: 36px; line-height: 1.15; font-weight: 800; letter-spacing: -0.04em; text-decoration: none;
  opacity: 0; transform: translateX(40px); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1), background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
html.fm-open .fm-link { opacity: 1; transform: none; transition-delay: calc(0.12s + var(--i) * 0.06s), calc(0.12s + var(--i) * 0.06s), 0s, 0s, 0s; }
html.fm-open .fm-link:hover, html.fm-open .fm-link:focus-visible { background: var(--c); border-color: #11092a; box-shadow: 5px 5px 0 #11092a; transform: rotate(-2deg); transition-delay: 0s; outline: none; }
.fm-link[aria-current="page"] { background: #FAC748; border-color: #11092a; }
.fm-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 54px; box-sizing: border-box; padding: 0 24px; background: #5828FF; color: #FFFFFF; border: 3px solid #11092a; box-shadow: 6px 6px 0 #11092a; font-size: 16px; font-weight: 800; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.fm-cta:hover { transform: translate(4px, 4px); box-shadow: 2px 2px 0 #11092a; }
.fm-contact { margin-top: auto; padding-top: 28px; font-size: 15px; font-weight: 700; line-height: 1.7; }
.fm-contact a { text-decoration: none; }
.fm-contact a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .fm-btn, .fm-logo, .fm-drawer, .fm-link, .fm-sq, .fm-sq i, .fm-backdrop, .tt-btn, .tt-sq, .tt-sq svg { transition: none !important; animation: none !important; }
}

/* Booking: the Cal.com area has a set height (site.js) and scrolls inside. */
.dc-modal [data-cal-inline] { overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.dc-modal [data-cal-inline]:empty { display: grid; place-items: center; }
.dc-modal [data-cal-inline]:empty::before { content: 'Loading the calendar…'; font-size: 15px; font-weight: 700; color: #6B6580; }

/* ---- shared design system rules (generated by tools/import_design.py) ---- */
body{margin:0;font-family:'Plus Jakarta Sans',-apple-system,sans-serif;color:#11092a;background:#FFF4DE}
a{color:#11092a}
a:hover{color:#5828FF}
.nb-spin{transform-box:fill-box;transform-origin:center;animation:nb-spin 18s linear infinite}
.nb-marquee{animation:nb-marquee 22s linear infinite}
.nb-draw{stroke-dasharray:200;animation:nb-draw 5s ease-out infinite}
.nb-press{transition:transform .15s ease,box-shadow .15s ease}
.nb-press:hover{transform:translate(4px,4px);box-shadow:2px 2px 0 #11092a !important}
.lg{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background:#FFFFFF;border:3px solid #11092a;box-shadow:6px 6px 0 #11092a;transform:rotate(-3deg);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s cubic-bezier(.2,.8,.2,1),background-color .22s ease;text-decoration:none;cursor:pointer}
.lg .lg-t path{fill:#5828FF;transition:fill .22s ease}
.lg .lg-x path{fill:#11092a;transition:fill .22s ease}
.lg .lg-d path{fill:#5828FF;transition:fill .22s ease}
.lg .lg-t{transform-box:fill-box;transform-origin:30% 90%}
.v-slate .lg:hover,.v-slate .lg:focus-visible,.lg.is-slate{background:#5828FF;transform:rotate(0deg) translate(3px,3px);box-shadow:3px 3px 0 #11092a}
.v-slate .lg:hover .lg-t path,.v-slate .lg:focus-visible .lg-t path,.lg.is-slate .lg-t path{fill:#FAC748}
.v-slate .lg:hover .lg-x path,.v-slate .lg:focus-visible .lg-x path,.lg.is-slate .lg-x path{fill:#FFFFFF}
.v-slate .lg:hover .lg-d path,.v-slate .lg:focus-visible .lg-d path,.lg.is-slate .lg-d path{fill:#FAC748}
.lg:hover .lg-t,.lg:focus-visible .lg-t{animation:lg-tick .6s cubic-bezier(.2,.8,.2,1) .12s both}
@keyframes lg-tick{0%{transform:none}35%{transform:translateY(3px) rotate(6deg) scale(.94)}70%{transform:translateY(-2px) rotate(-4deg) scale(1.06)}100%{transform:none}}
.lg-h{background:#FFFFFF;box-shadow:6px 6px 0 #11092a;transform:rotate(-4deg);cursor:default;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s cubic-bezier(.2,.8,.2,1),background-color .22s ease}
.lg-h .lg-t{transform-box:fill-box;transform-origin:30% 90%}
.lg-h:hover{background:#5828FF;transform:rotate(0deg) translate(3px,3px);box-shadow:3px 3px 0 #11092a}
.lg-h:hover .lg-t path{fill:#FAC748}
.lg-h:hover .lg-t{animation:lg-tick .6s cubic-bezier(.2,.8,.2,1) .12s both}
@media (prefers-reduced-motion: reduce){.lg-h,.lg-h .lg-t{transition:none;animation:none}}
.lg:focus-visible{outline:3px solid #FF4AFF;outline-offset:4px}
@media (prefers-reduced-motion: reduce){.lg,.lg .lg-t{transition:none;animation:none}}
.nb-cta{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s cubic-bezier(.2,.8,.2,1),background-color .22s ease,color .22s ease}
.nb-cta:hover,.nb-cta:focus-visible{background:#5828FF !important;color:#FAC748 !important;transform:translate(2px,2px);box-shadow:2px 2px 0 #11092a !important}
.nb-cta:focus-visible{outline:3px solid #FF4AFF;outline-offset:4px}
.nb-hlink{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s cubic-bezier(.2,.8,.2,1)}
.nb-hlink:hover,.nb-hlink:focus-visible{color:#11092a !important;transform:rotate(-3deg) translate(-3px,-3px);box-shadow:6px 6px 0 #11092a !important}
.nb-hlink:focus-visible{outline:3px solid #FF4AFF;outline-offset:4px}
.nb-lift{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s cubic-bezier(.2,.8,.2,1)}
.nb-lift:hover{transform:rotate(0deg) translate(-3px,-3px);box-shadow:10px 10px 0 #11092a !important}
.nb-card{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.nb-card:hover{transform:translate(-4px,-4px) rotate(-1deg);color:#11092a !important}
.nb-outline{color:transparent;-webkit-text-stroke:2.5px #11092a}
.nb-card:hover .nb-outline{color:#11092a}
.nb-outline-light{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,0.14)}
.nb-march{animation:nb-march 3s linear infinite}
@keyframes nb-march{to{stroke-dashoffset:-72}}
.nb-corepress{animation:nb-corepress 3s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes nb-corepress{0%,55%,100%{transform:translate(0,0)}62%,78%{transform:translate(6px,6px)}}
.nb-pop{transform-box:fill-box;transform-origin:center;animation:nb-pop 4s cubic-bezier(.3,1.6,.5,1) infinite}
.nb-d1{animation-delay:.4s}
.nb-d2{animation-delay:.8s}
.nb-d3{animation-delay:1.2s}
@keyframes nb-pop{0%,30%,100%{transform:scale(1)}8%{transform:scale(1.3)}16%{transform:scale(.92)}}
.nb-marquee-logos{animation:nb-marquee 40s linear infinite}
.nb-marquee-logos:hover{animation-play-state:paused}
.nb-logo{filter:brightness(0) invert(1);opacity:.9}
.nb-foot:hover{color:#FAC748 !important}
.lg-h .lg-t path,.lg-h .lg-d path{fill:#5828FF}
.lg-h .lg-x path{fill:#11092a}
.lg-foot .lg-t path,.lg-foot .lg-d path{fill:#FAC748}
.lg-foot .lg-x path{fill:#FFFFFF}
@media (prefers-reduced-motion: reduce){.nb-march,.nb-corepress,.nb-pop,.nb-marquee-logos,.nb-lift,.nb-card{animation:none;transition:none}}
.nb-strike{background-image:linear-gradient(#11092a,#11092a);background-repeat:no-repeat;background-position:0 58%;background-size:0% 3px;animation:nb-strike 7s ease-out infinite}
.nb-s2{animation-delay:.6s}
.nb-s3{animation-delay:1.2s}
.nb-s4{animation-delay:1.8s}
@keyframes nb-strike{0%,6%{background-size:0% 3px;opacity:1}16%,88%{background-size:100% 3px;opacity:.5}100%{background-size:100% 3px;opacity:.5}}
.nb-land{animation:nb-land 7s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes nb-land{0%,38%{opacity:0;transform:translateY(16px) rotate(2deg)}46%,92%{opacity:1;transform:none}100%{opacity:0}}
.nb-marquee-pains{animation:nb-marquee 30s linear infinite}
@media (prefers-reduced-motion: reduce){.nb-strike{animation:none;background-size:100% 3px}.nb-land{animation:none}.nb-marquee-pains{animation:none}}
.nb-card-body > *:not(.nb-bleed){position:relative;z-index:1}
.nb-bleed{position:absolute;inset:0;z-index:0;clip-path:circle(0% at 0 0);transition:clip-path .45s cubic-bezier(.2,.8,.2,1)}
.nb-card:hover .nb-bleed,.nb-card:focus-visible .nb-bleed{clip-path:circle(150% at 0 0)}
.nb-card:focus-visible{outline:3px solid #FFFFFF;outline-offset:6px}
@media (prefers-reduced-motion: reduce){.nb-bleed{transition:none}}
.nb-arrow-line{stroke-dasharray:80;animation:nb-arrow-line 5s ease-out infinite}
.nb-arrow-head{stroke-dasharray:40;animation:nb-arrow-head 5s ease-out infinite}
@keyframes nb-arrow-line{0%,8%{stroke-dashoffset:80}30%,100%{stroke-dashoffset:0}}
@keyframes nb-arrow-head{0%,30%{stroke-dashoffset:40}40%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.nb-arrow-line,.nb-arrow-head{animation:none;stroke-dashoffset:0}}
.nb-italic{display:inline-block;transform-origin:50% 85%;animation:nb-italic 4s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes nb-italic{0%,25%{transform:skewX(0deg)}40%,85%{transform:skewX(-14deg)}100%{transform:skewX(0deg)}}
@media (prefers-reduced-motion: reduce){.nb-italic{animation:none;transform:skewX(-14deg)}}
.nb-grow-down{transform-box:fill-box;transform-origin:top;animation:nb-gy 5s cubic-bezier(.3,1.4,.5,1) infinite}
.nb-grow-up{transform-box:fill-box;transform-origin:bottom;animation:nb-gy 5s cubic-bezier(.3,1.4,.5,1) infinite;animation-delay:.5s}
@keyframes nb-gy{0%,6%{transform:scaleY(0)}24%{transform:scaleY(1.06)}30%,100%{transform:scaleY(1)}}
.nb-grow-x{transform-origin:left;animation:nb-gx 5s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes nb-gx{0%,8%{transform:scaleX(.178)}30%{transform:scaleX(1.03)}36%,100%{transform:scaleX(1)}}
.nb-gauge{stroke-dasharray:100;animation:nb-gauge 5s ease-out infinite}
@keyframes nb-gauge{0%,8%{stroke-dashoffset:100}36%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.nb-grow-down,.nb-grow-up,.nb-grow-x,.nb-gauge{animation:none}}
.fw-c{background:var(--c);animation:fw-pop .7s cubic-bezier(.3,1.6,.5,1) backwards;transition:background-color .35s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}
.fw-row:hover .fw-c{background:#FFFFFF;transform:scale(.85)}
.fw-t{animation:fw-rise .6s ease both}
.fw-c1,.fw-t1{animation-delay:.3s}
.fw-c2,.fw-t2{animation-delay:1.1s}
.fw-c3,.fw-t3{animation-delay:1.9s}
@keyframes fw-pop{0%{background:#FFFFFF;transform:scale(.85)}60%{background:var(--c);transform:scale(1.08)}100%{background:var(--c);transform:scale(1)}}
@keyframes fw-rise{from{opacity:.2;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.fw-c,.fw-t{animation:none;transition:none}}
.sb-strip,.sb-flap{will-change:transform}
@keyframes sb-roll{from{transform:translateY(0)}}
@keyframes sb-roll-b{from{transform:translateY(0)}}
@keyframes sb-flap-b{0%{opacity:1;transform:scaleY(1)}100%{opacity:1;transform:scaleY(0)}}
@keyframes sb-flap{0%{opacity:1;transform:scaleY(1)}100%{opacity:1;transform:scaleY(0)}}
.sb-label{animation:sb-label .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes sb-label{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.sb-strip,.sb-flap,.sb-label{animation:none!important}}
.nb-sq{transform-origin:center}
.nb-svc:has(> .nb-card:nth-child(1):hover) .nb-sq1,.nb-svc:has(> .nb-card:nth-child(1):focus-visible) .nb-sq1,
.nb-svc:has(> .nb-card:nth-child(2):hover) .nb-sq2,.nb-svc:has(> .nb-card:nth-child(2):focus-visible) .nb-sq2,
.nb-svc:has(> .nb-card:nth-child(3):hover) .nb-sq,.nb-svc:has(> .nb-card:nth-child(3):focus-visible) .nb-sq{animation:nb-sq-wiggle .7s cubic-bezier(.3,1.6,.5,1) infinite}
.nb-svc:has(> .nb-card:nth-child(3):hover) .nb-sq2{animation-delay:.08s}
.nb-svc:has(> .nb-card:nth-child(3):hover) .nb-sq3{animation-delay:.16s}
@keyframes nb-sq-wiggle{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-18deg) scale(1.35)}45%{transform:rotate(14deg) scale(1.35)}70%{transform:rotate(-6deg) scale(1.15)}}
@media (prefers-reduced-motion: reduce){.nb-sq{animation:none!important}}
.sb-strike{transform-origin:left;transform:rotate(-6deg);animation:sb-strike .45s cubic-bezier(.6,0,.3,1) 1.7s both}
@keyframes sb-strike{from{transform:rotate(-6deg) scaleX(0)}to{transform:rotate(-6deg) scaleX(1)}}
@media (prefers-reduced-motion: reduce){.sb-strike{animation:none}}
@keyframes nb-orbit{to{transform:rotate(360deg)}}
.nb-o1{transform-box:view-box;transform-origin:220px 220px;animation:nb-orbit 40s linear infinite}
.nb-o2{transform-box:view-box;transform-origin:220px 220px;animation:nb-orbit 30s linear infinite reverse}
.nb-o3{transform-box:view-box;transform-origin:220px 220px;animation:nb-orbit 23s linear infinite}
.nb-o4{transform-box:view-box;transform-origin:220px 220px;animation:nb-orbit 17s linear infinite reverse}
.nb-o5{transform-box:view-box;transform-origin:220px 220px;animation:nb-orbit 12s linear infinite}
.nb-orb:hover{animation-play-state:paused}
.nb-fill{transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.3,1.25,.5,1)}
@media (prefers-reduced-motion: reduce){.nb-fill{transition:none}}
@keyframes nb-spin{to{transform:rotate(360deg)}}
@keyframes nb-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes nb-draw{0%,15%{stroke-dashoffset:200}40%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.nb-spin,.nb-marquee,.nb-draw,.nb-orb{animation:none}}
.nb-card:hover .nb-outline{color:#5828FF}
.nb-marquee-logos{animation:nb-marquee 90s linear infinite}
.nb-tilt{transform:rotate(var(--r));box-shadow:6px 6px 0 #11092a;cursor:default;animation:nb-tilt-in .8s cubic-bezier(.3,1.6,.5,1) backwards;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s ease}
@keyframes nb-tilt-in{0%{opacity:0;transform:translateY(24px) rotate(0deg)}55%{opacity:1;transform:translateY(-4px) rotate(calc(var(--r) * -1.6))}100%{opacity:1;transform:rotate(var(--r))}}
.nb-tilt:hover{transform:rotate(calc(var(--r) * -1)) translate(3px,3px);box-shadow:3px 3px 0 #11092a}
@media (prefers-reduced-motion: reduce){.nb-tilt{animation:none;transition:none}}
.nb-logo{opacity:.5!important;transition:opacity .3s ease}
.nb-logo:hover{opacity:.85!important}
.nb-marquee-rev{animation:nb-marquee 105s linear infinite reverse}
.nb-marquee-rev:hover{animation-play-state:paused}
.lg-onink{box-shadow:6px 6px 0 #FAC748}
.v-slate .lg-onink:hover,.v-slate .lg-onink:focus-visible{box-shadow:3px 3px 0 #FAC748}
.nb-foot-p:hover{color:#5828FF !important}
.m-ring{animation:m-ring 10s linear infinite}
@keyframes m-ring{0%,18%{stroke:var(--c);stroke-width:8px}20%,100%{stroke:#11092a;stroke-width:3px}}
.m-pill{animation:m-pill 10s linear infinite}
@keyframes m-pill{0%,18%{background:var(--c);color:var(--fg);transform:translate(-3px,3px);box-shadow:1px 1px 0 #11092a}20%,100%{background:#FFFFFF;color:#11092a;transform:none;box-shadow:4px 4px 0 #11092a}}
.m-bleed{animation:m-bleed 2.6s cubic-bezier(.2,.8,.2,1) both}
.m-bleed1{animation-delay:.4s}
.m-bleed2{animation-delay:1.2s}
.m-bleed3{animation-delay:2s}
@keyframes m-bleed{0%{clip-path:circle(0% at 0 0)}30%,65%{clip-path:circle(150% at 0 0)}100%{clip-path:circle(0% at 0 0)}}
.m-card:active .nb-bleed{clip-path:circle(150% at 0 0);animation:none}
.m-sq1{animation:nb-sq-wiggle .7s cubic-bezier(.3,1.6,.5,1) 3 1.1s}
.m-sq2{animation:nb-sq-wiggle .7s cubic-bezier(.3,1.6,.5,1) 3 1.9s}
.m-sq3{animation:nb-sq-wiggle .7s cubic-bezier(.3,1.6,.5,1) 3 2.7s}
.m-tilt:active{transform:rotate(calc(var(--r) * -1)) translate(3px,3px);box-shadow:3px 3px 0 #11092a}
.nb-press:active{transform:translate(4px,4px);box-shadow:2px 2px 0 #11092a !important}
@media (prefers-reduced-motion: reduce){.m-ring,.m-pill,.m-bleed,.m-sq1,.m-sq2,.m-sq3{animation:none}}
.bk-method{transition:transform .15s ease,box-shadow .15s ease}
.bk-method:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 #11092a !important}
.bk-close{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.bk-close:hover{transform:translate(3px,3px) rotate(90deg);box-shadow:1px 1px 0 #11092a !important;background:#FF4AFF !important}
.bk-day{transition:background-color .15s ease,color .15s ease}
.bk-day.av:hover{background:#5828FF !important;color:#FFFFFF !important}
.bk-slot{transition:background-color .15s ease,color .15s ease}
.bk-slot:hover{background:#5828FF !important;color:#FFFFFF !important}
.bk-in{animation:bk-in .45s cubic-bezier(.3,1.5,.5,1) both}
@keyframes bk-in{from{opacity:0;transform:translateY(24px) rotate(-1deg) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.bk-in{animation:none}}
.in-link{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;text-decoration:none;font-weight:700}
.in-link::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:4px;background:#FF4AFF;transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.in-link:hover::after{transform:scaleX(1)}
.in-logo .lg-t{transform-box:fill-box;transform-origin:30% 90%}
.in-logo .lg-t path,.in-logo .lg-d path{fill:#5828FF}
.in-logo .lg-x path{fill:#11092a}
.in-logo:hover .lg-t{animation:lg-tick .6s cubic-bezier(.2,.8,.2,1) both}
.in-logo.boxed{background:#FFFFFF;border:3px solid #11092a;box-shadow:4px 4px 0 #11092a;transform:rotate(-2deg);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,background-color .22s ease}
.in-logo.boxed:hover{background:#5828FF;transform:rotate(0) translate(2px,2px);box-shadow:2px 2px 0 #11092a}
.in-logo.boxed:hover .lg-t path,.in-logo.boxed:hover .lg-d path{fill:#FAC748}
.in-logo.boxed:hover .lg-x path{fill:#FFFFFF}
.ab-wob{animation:ab-wob 3.2s ease-in-out infinite alternate}
.ab-wob2{animation:ab-wob2 2.6s ease-in-out infinite alternate}
@keyframes ab-wob{from{transform:rotate(-5deg)}to{transform:rotate(1deg)}}
@keyframes ab-wob2{from{transform:rotate(4deg)}to{transform:rotate(-2deg)}}
.ab-chip{transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s ease}
.ab-chip:hover{transform:rotate(0) translate(-2px,-2px) !important;box-shadow:6px 6px 0 #11092a !important}
.ab-spine{transform-origin:top;animation:ab-spine 2.4s cubic-bezier(.5,0,.3,1) .2s both}
@keyframes ab-spine{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.ab-node{animation:ab-node .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes ab-node{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
.ab-item{animation:fw-rise .6s ease both}
.ab-card{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease}
.ab-card:hover{transform:translate(-4px,-4px) rotate(var(--hr,0deg));box-shadow:14px 14px 0 #11092a !important}
.ab-val{transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s ease}
.ab-val:hover{transform:rotate(calc(var(--r) * -1)) translate(3px,3px);box-shadow:3px 3px 0 #11092a !important}
.ab-bike{animation:ab-bike 2.4s linear infinite}
@keyframes ab-bike{0%{transform:translateX(-6px)}50%{transform:translateX(6px)}100%{transform:translateX(-6px)}}
@media (prefers-reduced-motion: reduce){.ab-wob,.ab-wob2,.ab-spine,.ab-node,.ab-item,.ab-bike{animation:none}}
.ab-item.ab-l{animation:ab-in-l .7s cubic-bezier(.2,.9,.3,1.2) both}
.ab-item.ab-r{animation:ab-in-r .7s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes ab-in-l{from{opacity:0;transform:translateX(-90px) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes ab-in-r{from{opacity:0;transform:translateX(90px) rotate(3deg)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
.ab-item.ab-l,.ab-item.ab-r{animation-duration:auto;animation-delay:0s;animation-timing-function:linear;animation-timeline:view();animation-range:entry 5% cover 35%}
.ab-node{animation-delay:0s !important;animation-timeline:view();animation-range:entry 10% cover 30%}
.ab-spine{animation-timeline:view();animation-range:cover 0% cover 60%;animation-delay:0s}
}
@media (prefers-reduced-motion: reduce){.ab-item.ab-l,.ab-item.ab-r{animation:none}}
.ab-stat{transform:rotate(var(--r));box-shadow:5px 5px 0 #11092a;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s ease}
.ab-stat:hover{transform:rotate(calc(var(--r) * -1.5)) translate(3px,3px);box-shadow:2px 2px 0 #11092a}
@media (prefers-reduced-motion: reduce){.ab-stat{transition:none}}
.wk-card{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease}
.wk-card:hover{transform:translate(-4px,-4px);box-shadow:14px 14px 0 #11092a !important}
.wk-card .wk-img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wk-card:hover .wk-img{transform:scale(1.05)}
.wk-card .wk-go svg{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.wk-card:hover .wk-go svg{transform:translateX(5px)}
.wk-card .wk-go span{background-image:linear-gradient(#FF4AFF,#FF4AFF);background-size:0 4px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .22s ease}
.wk-card:hover .wk-go span{background-size:100% 4px}
.wk-card:active{transform:translate(4px,4px);box-shadow:3px 3px 0 #11092a !important}
@media (hover: none){.wk-card .wk-go span{background-size:100% 4px}.wk-card:hover{transform:none;box-shadow:8px 8px 0 #11092a !important}.wk-card:hover .wk-img{transform:none}}
.wk-pill:active{transform:translate(2px,2px) !important;box-shadow:1px 1px 0 #11092a !important}
.wk-pill{transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s ease,background-color .2s ease}
.wk-pill:hover{transform:translate(-2px,-2px) !important;box-shadow:6px 6px 0 #11092a !important}
.wk-snap{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.wk-snap:hover{transform:rotate(0deg) translate(-3px,-3px) !important}
@supports (animation-timeline: view()){
.wk-rise{animation:wk-rise linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
}
@keyframes wk-rise{from{opacity:0;transform:translateY(48px) rotate(-1deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.wk-rise{animation:none}.wk-card,.wk-card .wk-img,.wk-pill,.wk-snap{transition:none}}
.op-spin{transform-box:view-box;animation:nb-orbit 90s linear infinite}
.op-ring{transform-box:view-box;animation:nb-orbit 40s linear infinite reverse}
.op-lens,.op-price,.op-pain{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease}
.op-lens:hover,.op-price:hover{transform:translate(-4px,-4px) rotate(0deg) !important;box-shadow:14px 14px 0 #11092a !important}
.op-pain:hover{transform:rotate(0deg) translate(-3px,-3px) !important}
.op-bar{transform-origin:bottom}
@keyframes op-grow{0%{scale:1 0}70%{scale:1 1.08}100%{scale:1 1}}
@keyframes op-grow-b{0%{scale:1 0}70%{scale:1 1.08}100%{scale:1 1}}
@keyframes op-pop{0%{opacity:0;scale:.2}70%{opacity:1;scale:1.12}100%{opacity:1;scale:1}}
@keyframes op-pop-b{0%{opacity:0;scale:.2}70%{opacity:1;scale:1.12}100%{opacity:1;scale:1}}
@keyframes op-drawx{from{scale:0 1}to{scale:1 1}}
@keyframes op-drawx-b{from{scale:0 1}to{scale:1 1}}
@keyframes op-drawy{from{scale:1 0}to{scale:1 1}}
@keyframes op-drawy-b{from{scale:1 0}to{scale:1 1}}
@keyframes op-rise{from{opacity:0;translate:0 36px}to{opacity:1;translate:0 0}}
@keyframes op-rise-b{from{opacity:0;translate:0 36px}to{opacity:1;translate:0 0}}
@keyframes op-tint{from{background-color:#FFFFFF}to{background-color:var(--c)}}
@keyframes op-tint-b{from{background-color:#FFFFFF}to{background-color:var(--c)}}
@keyframes op-glow{0%,100%{background-color:#FAC748}50%{background-color:#FFFFFF}}
.op-step{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease}
.op-step:hover{transform:translate(-4px,-4px) !important;box-shadow:12px 12px 0 #11092a !important}
.op-field{transition:box-shadow .18s ease,transform .18s ease}
.op-field:focus{outline:none;box-shadow:5px 5px 0 #5828FF !important;transform:translate(-2px,-2px)}
@supports (animation-timeline: view()){
}
@media (hover: none){.op-lens:hover,.op-price:hover,.op-step:hover{transform:none !important}}
@media (prefers-reduced-motion: reduce){.op-spin,.op-ring,.op-bar,.op-anim{animation:none !important}.op-lens,.op-price,.op-pain,.op-step{transition:none}}