:root { --paper:#eee8da; --ink:#161919; --pink:#f52e7e; --coral:#ff6473; --line:#181b1b30; font-family:'Schibsted Grotesk',sans-serif; color:var(--ink); background:var(--paper); }
* {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:24px}
body {margin:0;background:var(--paper) url('/assets/skate/grain.svg');font-size:14px;line-height:1.5}
a {color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
:focus-visible {outline:3px solid var(--pink);outline-offset:6px}
p,h1,h2 {margin:0}
.skip-link {position:fixed;top:12px;left:12px;z-index:20;background:var(--ink);color:white;padding:12px 18px;transform:translateY(-150%)}
.skip-link:focus {transform:none}
.site-wrap {width:min(1500px,100%);margin:auto;padding:0 48px}
.site-header {height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.wordmark {font:400 55px/1 'Kaushan Script',cursive;letter-spacing:-.06em;transform:rotate(-7deg);color:var(--pink);position:relative}
.wordmark-dot {font:600 11px 'Schibsted Grotesk',sans-serif;position:absolute;right:-14px;top:5px}
.intro {display:flex;align-items:center;justify-content:space-between;gap:32px;padding:32px 0 36px}
.eyebrow {font:700 14px 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;margin:0 0 20px;display:flex;align-items:center;gap:8px}
.eyebrow>span {width:7px;height:7px;border-radius:50%;background:var(--pink)}
h1 {font:400 clamp(70px,6.5vw,100px)/.99 Anton,Impact,sans-serif;letter-spacing:-.035em;position:relative}
h1 em {font-style:normal;color:var(--pink)}
.headline-spark {position:absolute;width:66px;height:66px;right:-86px;top:15px;fill:none;stroke:var(--pink);stroke-width:2.5;transform:rotate(9deg)}
.intro-aside {position:relative;width:330px;padding:8px 38px 20px 0;flex-shrink:0}
.hand-note {font:700 35px/1.02 Caveat,cursive;transform:rotate(-4deg);margin:0 0 23px}
.intro-aside>p:not(.hand-note) {font-size:13px;line-height:1.7;max-width:280px}
.tape-note {display:inline-block;background:#f8e95e;padding:6px 14px;margin-top:20px;font:700 15px 'Barlow Condensed',sans-serif;transform:rotate(-4deg);clip-path:polygon(2% 6%,99% 0,98% 91%,1% 100%,0 36%)}
.intro-arrow {position:absolute;right:-10px;bottom:-36px;width:108px;height:80px;stroke:var(--ink);stroke-width:2;fill:none;transform:rotate(9deg);pointer-events:none}
.apps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;scroll-margin-top:20px}
.app-card {position:relative;height:clamp(470px,36vw,540px);min-height:0;aspect-ratio:auto;overflow:hidden;background:#102129;color:white;isolation:isolate;border-radius:3px;box-shadow:0 5px 0 #161919,0 12px 20px #16191915;transition:transform .25s,box-shadow .25s}
.app-card:hover {transform:translateY(-8px) rotate(-.5deg);box-shadow:0 9px 0 #161919,0 18px 28px #16191924}
.card-photo {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.app-card:hover .card-photo {transform:scale(1.045)}
.rangle-card .card-photo {object-position:50% 58%}
.skate-card .card-photo {object-position:50% 30%}
.kite-card .card-photo {object-position:50% 53%}
.card-shade {position:absolute;inset:0;background:linear-gradient(180deg,#0b191929 0%,transparent 23%,#09171b2b 33%,#071319ed 68%,#09191c 100%)}
.rangle-card .card-shade {background:linear-gradient(180deg,#18101933 0%,transparent 27%,#16081666 38%,#180a1bee 69%,#1b0c1b 100%)}
.skate-card .card-shade {background:linear-gradient(180deg,#00182a30 0%,transparent 30%,#070c1144 40%,#0c1216ee 69%,#0c1216 100%)}
.card-top {position:absolute;top:22px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.paper-label {background:var(--paper) url('/assets/skate/grain.svg');color:var(--ink);padding:5px 9px;font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:.025em;transform:rotate(-3deg);clip-path:polygon(0 3%,99% 0,100% 97%,1% 100%)}
.card-top svg {width:38px;height:38px;stroke:var(--paper);stroke-width:2;fill:none;flex-shrink:0;transform:rotate(8deg);filter:drop-shadow(0 1px 1px #0008)}
.card-content {position:absolute;left:24px;right:24px;bottom:0;padding-bottom:21px}
.card-brand {font:400 47px/.95 'Kaushan Script',cursive;letter-spacing:-.05em;color:#ff478c;transform:rotate(-6deg);transform-origin:0 100%;margin:0 0 21px}
.card-brand>span {display:block;font:700 23px/.9 Caveat,cursive;color:var(--paper);padding:5px 0 0 8px;letter-spacing:0}
.rangle-card .card-brand>span {font:700 11px/.9 'Barlow Condensed',sans-serif;letter-spacing:.16em;padding-top:9px}
.kite-card .card-brand {color:var(--coral)}
.card-content h2 {font:700 clamp(29px,2.7vw,40px)/1.02 'Barlow Condensed',sans-serif;letter-spacing:-.02em;margin-bottom:13px}
.card-description {font-size:12px;line-height:1.7;color:#e4e4df;min-height:42px;max-width:300px}
.card-tags {font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:.13em;color:#c5c9c7;margin:17px 0 16px}
.card-tags span {color:#ff478c;margin:0 5px}
.kite-card .card-tags span {color:#57d1d4}
.card-cta {display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff42;padding-top:12px;font:700 22px 'Barlow Condensed',sans-serif}
.cta-arrow {display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pink);color:white;font:400 26px/1 sans-serif;transition:transform .2s}
.kite-card .cta-arrow {background:var(--coral);color:#142229}
.app-card:hover .cta-arrow {transform:rotate(45deg)}
.together {display:flex;align-items:center;gap:30px;padding:48px 0 38px;position:relative}
.together-mark {width:56px;flex-shrink:0;transform:rotate(-8deg)}
.together-mark svg {width:56px;height:56px;fill:none;stroke:var(--pink);stroke-width:2.7}
.together h2 {font:700 27px/1.06 'Barlow Condensed',sans-serif;flex-shrink:0}
.together h2 em {font-style:normal}
.together>p {max-width:340px;font-size:12px;line-height:1.8;border-left:1px solid var(--line);padding-left:30px}
.together-note {font:700 31px Caveat,cursive;transform:rotate(-7deg);margin-left:auto;white-space:nowrap;color:var(--pink)}
footer {display:flex;gap:28px;align-items:center;border-top:1px solid var(--line);padding:20px 0 28px;font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:.04em}
footer>span {margin-right:auto}
footer a:hover {text-decoration:underline}
@media (min-width:1500px) {.site-wrap{padding:0 60px}.app-card{height:540px}}
@media (max-width:1050px) {.site-wrap{padding:0 30px}.intro{padding:36px 0 40px}.headline-spark{width:44px;height:44px;right:-50px}.intro-aside{width:275px;padding-right:15px}.hand-note{font-size:31px}.apps{gap:16px}.app-card{height:500px;min-height:0;aspect-ratio:auto}.card-content{left:18px;right:18px}.card-top{left:14px;right:14px}.card-top svg{width:29px}.paper-label{font-size:10px}.card-brand{font-size:41px}.card-content h2{font-size:29px}.card-description{font-size:11px;min-height:57px}.together{gap:22px}.together>p{padding-left:22px}.together-note{font-size:27px}}
@media (max-width:720px) {.site-wrap{padding:0 20px}.site-header{height:87px}.wordmark{font-size:43px}.intro{align-items:flex-start;flex-direction:column;gap:22px;padding:32px 0}.eyebrow{font-size:11px;margin-bottom:17px}h1{font-size:clamp(64px,16vw,90px)}.headline-spark{width:45px;height:45px;right:-53px;top:8px}.intro-aside{width:100%;display:flex;gap:14px;align-items:center;padding:0}.hand-note{font-size:26px;flex:1;white-space:nowrap;margin:0}.intro-aside>p:not(.hand-note){font-size:11px;flex:1;max-width:170px}.intro-arrow,.tape-note{display:none}.apps{grid-template-columns:1fr;gap:24px}.app-card{height:430px;min-height:0;aspect-ratio:auto}.card-top{top:20px;left:22px;right:22px}.paper-label{font-size:12px}.card-top svg{width:38px;height:38px}.card-content{left:24px;right:24px;padding-bottom:20px}.card-brand{font-size:45px;margin-bottom:16px}.card-content h2{font-size:36px}.card-description{font-size:12px;min-height:0;max-width:270px}.card-tags{margin-top:14px}.card-photo{object-position:center 36%}.skate-card .card-photo{object-position:center 33%}.kite-card .card-photo{object-position:center 56%}.card-shade{background:linear-gradient(180deg,#09191b29 0%,transparent 21%,#09171b66 30%,#09191bed 65%,#09191c 100%)}.together{flex-wrap:wrap;gap:18px;padding:39px 0 28px}.together>p{border:0;padding:0;width:100%;max-width:340px;font-size:12px}.together h2{font-size:28px}.together-note{font-size:27px;margin:0 0 0 auto}.together-mark{width:44px}.together-mark svg{width:44px;height:44px}footer{gap:18px;font-size:10px;flex-wrap:wrap}footer>span{width:100%;margin:0}}
@media (prefers-reduced-motion:reduce) {html{scroll-behavior:auto}.app-card,.card-photo,.cta-arrow{transition:none}}
@media (max-width:370px) {.headline-spark{width:32px;height:32px;right:-36px}.hand-note{font-size:23px}.intro-aside{gap:12px}}

.card-top .card-app-icon { width: 48px; height: 48px; object-fit: cover; border-radius: 12px; box-shadow: 0 2px 12px #0005; }

.apps-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:10px 0 24px}.apps-heading .eyebrow{margin-bottom:8px}.apps-heading h2{font-size:36px}.apps-heading>p{max-width:320px;font-size:14px;line-height:1.7}.paper-label b{font-size:10px;letter-spacing:.08em}.site-wrap>main>.section:first-of-type{border-top:1px solid var(--line);padding-top:32px}@media(max-width:600px){.apps-heading{display:block;margin-top:20px}.apps-heading h2{font-size:30px}.apps-heading>p{margin-top:10px;max-width:100%}}
