@font-face {
  font-family: 'Bumper Hand';
  src: url(assets/fonts/caveat-hand.ttf) format('truetype');
  font-weight: 600;
  font-display: swap;
}
:root {
  --blue: #034bff;
  --pink: #ff2999;
  --cream: #fff5e5;
  --ink: #101314;
  --lime: #d6ff45;
  --coral: #ff594b;
  --amber: #ffc035;
  --hero-field: var(--blue);
  --hero-ink: var(--cream);
  --accent: var(--pink);
  --gutter: 5vw;
}
[data-theme="neon"] { --hero-field: var(--lime); --hero-ink: var(--ink); }
[data-theme="coral"] { --hero-field: var(--coral); --hero-ink: var(--ink); }
[data-theme="amber"] { --hero-field: var(--amber); --hero-ink: var(--ink); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: 'Avenir Next', 'Century Gothic', ui-rounded, system-ui, sans-serif; font-size: 18px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; }
h1, h2 { font-weight: 800; letter-spacing: -.025em; line-height: 1.06; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .75; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 7px; }
.skip { position: fixed; top: 12px; left: 12px; padding: 12px; background: var(--cream); z-index: 20; transform: translateY(-200%); }
.skip:focus { transform: none; }
header { position: relative; display: flex; align-items: center; gap: 45px; padding: 12px var(--gutter); background: var(--cream); }
.signature { display: block; flex: 0 0 120px; }
.signature img { display: block; width: 100%; height: auto; }
.studio-location { font-size: 14px; line-height: 1.5; }
nav { margin-left: auto; display: flex; gap: 38px; font-size: 16px; }
nav a { display: flex; align-items: center; min-height: 44px; }
main { overflow: clip; }
section { position: relative; isolation: isolate; }
.artwork { position: absolute; display: block; height: auto; pointer-events: none; }
.hand { font-family: 'Bumper Hand', cursive; font-size: clamp(27px, 2.5vw, 42px); font-weight: 600; line-height: .98; }
.ink-mark { position: absolute; fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.trajectory { position: absolute; fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; pointer-events: none; overflow: visible; }
.trajectory .fine { stroke-width: 2; }
.scene-label { position: relative; z-index: 3; font-size: 14px; letter-spacing: .04em; }
h2 span, h1 span { color: var(--accent); }
.hero { height: 62vw; min-height: 780px; max-height: 1150px; background: var(--hero-field); color: var(--hero-ink); z-index: 2; }
.hero h1 { position: absolute; z-index: 3; left: var(--gutter); top: 4vw; font-size: clamp(86px, 8vw, 150px); }
.hero-services { position: absolute; z-index: 3; bottom: 9vw; left: var(--gutter); font-size: clamp(20px, 1.8vw, 30px); }
.hero-bumper { width: 91vw; max-width: none; left: 35vw; top: 5vw; z-index: 2; transform: rotate(-7deg); }
.hero-impact { width: 18vw; right: 21vw; top: 2vw; transform: rotate(-9deg); z-index: 2; }
.hero-note { position: absolute; top: 7vw; left: 44vw; z-index: 3; transform: rotate(-10deg); }
.hero-flight { position: absolute; width: 59vw; aspect-ratio: 800 / 250; left: -5vw; bottom: -2vw; z-index: 4; pointer-events: none; }
.hero-flight .trajectory { width: 100%; height: 100%; }
.hero-flight img { width: 24%; left: 70%; top: -10%; }
.colour-cut { position: absolute; width: 100%; height: 8vw; left: 0; bottom: -1px; fill: var(--cream); z-index: 1; }
.websites { min-height: 660px; height: 51vw; padding-top: 8vw; background: var(--cream); }
.websites .scene-label { margin-left: 54vw; }
.website-copy { position: absolute; z-index: 3; top: 13vw; left: 54vw; }
.website-copy h2 { font-size: clamp(60px, 6.5vw, 120px); }
.website-copy p { font-size: clamp(20px, 1.7vw, 27px); margin-top: 28px; }
.website-sling { width: 62vw; left: -18vw; top: 1vw; transform: rotate(-9deg); z-index: 2; }
.website-path { width: 100%; height: 100%; inset: 0; z-index: 1; }
.website-note { position: absolute; left: 39vw; bottom: 12vw; transform: rotate(-12deg); }
.website-spark { width: 7vw; right: 7vw; top: 3vw; color: var(--blue); stroke-width: 4; }
.software { height: 41vw; min-height: 530px; margin-block: 2vw; padding: 6vw var(--gutter); background: var(--ink); color: var(--cream); transform: skewY(-3deg); z-index: 3; }
.software > * { transform: skewY(3deg); }
.software h2 { position: relative; z-index: 3; font-size: clamp(68px, 8vw, 145px); margin-top: 2vw; }
.software-copy { position: relative; z-index: 3; font-size: clamp(18px, 1.65vw, 27px); margin-top: 2vw; }
.software-flipper { width: 75vw; right: -19vw; bottom: -17vw; transform: skewY(3deg) rotate(-9deg) scaleX(-1); z-index: 2; }
.software-ball { width: 16vw; right: 42vw; bottom: 4vw; z-index: 3; }
.software-impact { width: 18vw; right: 41vw; bottom: 7vw; color: var(--accent); }
.software-note { position: absolute; right: 8vw; top: 5vw; transform: skewY(3deg) rotate(10deg); }
.products { height: 62vw; min-height: 800px; background: var(--cream); padding: 10vw 0 0 9vw; }
.products h2 { position: relative; z-index: 3; margin-top: 2vw; font-size: clamp(76px, 8.5vw, 154px); }
.products-copy { position: relative; z-index: 3; margin-top: 2vw; font-size: clamp(18px, 1.7vw, 27px); }
.products-target { width: 60vw; right: -16vw; top: 4vw; z-index: 2; transform: rotate(-10deg); }
.products-path { inset: 0; width: 100%; height: 100%; z-index: 1; }
.products-impact { width: 18vw; right: 22vw; top: 1vw; color: var(--ink); transform: rotate(-35deg); }
.products-note { position: absolute; left: 43vw; bottom: 8vw; transform: rotate(-10deg); }
.contact { background: var(--accent); padding: 7vw var(--gutter) 9vw; min-height: 600px; }
.contact::before { content: ''; position: absolute; inset: -4vw 0 auto; height: 5vw; background: var(--accent); clip-path: polygon(0 50%, 22% 0, 67% 85%, 100% 33%, 100% 100%, 0 100%); }
.contact-intro { font-size: clamp(20px, 2vw, 30px); }
.contact h2 { position: relative; z-index: 3; font-size: clamp(76px, 9vw, 166px); margin-top: 2vw; }
.email { position: relative; z-index: 3; display: inline-flex; min-height: 44px; align-items: center; margin-top: 3vw; font-size: clamp(18px, 2vw, 32px); }
.contact-line { position: absolute; width: 49vw; right: -5vw; top: 5vw; fill: none; stroke: var(--cream); stroke-width: 3; stroke-linecap: round; }
.contact-ball { width: 18vw; right: 2vw; bottom: 14vw; }
.contact-note { position: absolute; right: 9vw; top: 2vw; transform: rotate(-9deg); }
footer { display: flex; align-items: center; gap: 38px; padding: 28px var(--gutter); font-size: 14px; }
footer img { width: 125px; height: auto; }
footer p { margin-right: auto; }
footer a { display: inline-flex; align-items: center; min-height: 44px; }
footer span { font-size: 12px; }
@media (min-width: 1850px) {
  .hero-bumper { width: 1650px; left: 39vw; top: 30px; }
  .hero h1 { top: 65px; }
}
@media (max-width: 1000px) and (min-width: 701px) {
  .hero { height: 80vw; }
  .hero-bumper { top: 18vw; left: 35vw; width: 97vw; }
  .hero h1 { font-size: 9vw; }
  .hero-impact { top: 12vw; }
  .hero-services { bottom: 12vw; }
  .hero-note { top: 6vw; left: 53vw; }
  .website-copy { top: 18vw; left: 50vw; }
  .websites .scene-label { margin-left: 50vw; }
  .website-copy h2 { font-size: 6.8vw; }
  .website-sling { top: 14vw; }
  .software-flipper { bottom: -11vw; }
  .products-target { top: 21vw; }
}
@media (max-width: 700px) {
  :root { --gutter: 6vw; }
  body { font-size: 17px; }
  header { padding-block: 10px; gap: 12px; }
  .signature { flex-basis: 93px; }
  .studio-location { display: none; }
  nav { gap: 24px; font-size: 14px; }
  .hero { height: 207vw; min-height: 730px; max-height: none; }
  .hero h1 { top: 8vw; font-size: 14.5vw; line-height: 1.04; }
  .hero-bumper { width: 156vw; left: 20vw; top: 49vw; transform: rotate(-13deg); }
  .hero-impact { width: 34vw; top: 31vw; right: 5vw; transform: rotate(7deg); }
  .hero-services { bottom: 31vw; font-size: 19px; }
  .hero-note { top: auto; left: auto; bottom: 29vw; right: 8vw; font-size: 27px; }
  .hero-flight { width: 102vw; left: -25vw; bottom: -4vw; }
  .hero-flight img { width: 32%; left: 70%; top: -25%; }
  .colour-cut { height: 17vw; }
  .websites { height: 176vw; min-height: 640px; padding-top: 20vw; }
  .websites .scene-label { margin-left: var(--gutter); }
  .scene-label { font-size: 13px; }
  .website-copy { left: 20vw; top: 32vw; }
  .website-copy h2 { font-size: 12.8vw; }
  .website-copy p { font-size: 18px; margin-top: 5vw; }
  .website-sling { width: 106vw; left: -39vw; top: 81vw; transform: rotate(-17deg); }
  .website-path { top: 69vw; height: 103vw; }
  .website-spark { width: 12vw; right: 10vw; top: 12vw; }
  .website-note { left: auto; right: 9vw; bottom: 5vw; font-size: 28px; }
  .software { height: 126vw; min-height: 480px; margin-block: 3vw; padding-top: 13vw; }
  .software h2 { font-size: 12.5vw; margin-top: 7vw; }
  .software-copy { font-size: 17px; margin-top: 6vw; }
  .software-flipper { width: 143vw; right: -61vw; bottom: -18vw; transform: skewY(3deg) rotate(4deg) scaleX(-1); }
  .software-ball { width: 32vw; right: 52vw; bottom: 31vw; }
  .software-impact { width: 35vw; right: 49vw; bottom: 40vw; }
  .software-note { right: auto; left: var(--gutter); top: auto; bottom: 10vw; font-size: 27px; }
  .products { height: 187vw; min-height: 710px; padding: 20vw 0 0 var(--gutter); }
  .products h2 { margin-top: 7vw; font-size: 15.7vw; }
  .products-copy { font-size: 17px; margin-top: 6vw; max-width: 82vw; }
  .products-target { width: 100vw; right: -37vw; top: 84vw; transform: rotate(-12deg); }
  .products-path { height: 112vw; top: 81vw; }
  .products-impact { width: 35vw; right: 25vw; top: 83vw; }
  .products-note { right: auto; left: var(--gutter); bottom: 31vw; font-size: 27px; }
  .contact { min-height: 530px; padding: 16vw var(--gutter) 53vw; }
  .contact-intro { font-size: 19px; }
  .contact h2 { font-size: 13.4vw; margin-top: 6vw; }
  .email { font-size: 4.45vw; margin-top: 7vw; }
  .contact-line { width: 100vw; top: 82vw; right: -15vw; }
  .contact-ball { width: 35vw; right: 12vw; bottom: 4vw; }
  .contact-note { right: 8vw; top: auto; bottom: 35vw; font-size: 25px; }
  footer { flex-wrap: wrap; gap: 20px; padding-block: 26px; font-size: 12px; }
  footer img { width: 100px; }
  footer p { margin-left: auto; margin-right: 0; }
  footer span { margin-left: auto; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }