/* Wobbl Studio. One file, no build step.
   Cozy dusk: a mid tone lilac page, cream cards, ink outlines, soft sticker shadows and
   bubblegum pastel bands. Tokens live in :root; nothing else hard codes a colour except the
   illustration fills (.f-*). See CLAUDE.md before changing the look. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2"); }

:root {
    --bg: #ddd6ef;
    --bg-alt: #eec8da;
    --band-pink: #eec8da;
    --band-sky: #bfd8f0;
    --band-lav: #cfc6ec;
    --band-mint: #c4e6d6;
    --hero-top: #b4d1ee;
    --surface: #fff7ee;
    --ink: #2a2238;
    --muted: #443a5c;
    --line: #2a2238;
    --soft-line: rgba(42, 34, 56, 0.22);
    --accent: #2a2238;
    --accent-ink: #fff7ee;
    --accent-deep: #9d2a5c;
    --pink: #ff9fc4;
    --sky: #9bd0ff;
    --sun: #ffe29a;
    --mint: #b5ead0;
    --band-butter: #f0dfa6;
    --lav: #d6c8ff;
    --shadow: #2a2238;
    --rule: #2a2238;
    --ill-ink: #2a2238;
    --logo-filter: none;
    --font-head: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wrap: 1080px;
    --r: 14px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body {
    margin: 0;
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--sun); color: #2a2238; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 6px var(--sun); }

.skip {
    position: absolute; left: 16px; top: -60px; z-index: 200;
    background: var(--sun); color: #2a2238; padding: 10px 16px; border-radius: 12px; font-weight: 700;
    border: 2px solid #2a2238; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--muted); max-width: 32em; }

/* ---------- header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--rule);
}
.bar { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.brand img { height: 46px; width: auto; transform-origin: 50% 80%; }
.brand:hover img { animation: wobble 0.6s var(--ease); }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a { text-decoration: none; font-weight: 700; padding: 8px 15px; border-radius: 999px; font-size: 1rem; }
.nav a:hover { background: var(--bg-alt); }
.nav a[aria-current="page"] { background: var(--sun); color: #2a2238; }

/* ---------- buttons ---------- */
.btn {
    display: inline-block; text-decoration: none; font-family: var(--font-head); font-weight: 600; font-size: 1.15rem;
    padding: 14px 28px; border-radius: 16px; border: 2px solid var(--line);
    background: var(--surface); color: var(--ink);
    box-shadow: 2px 2px 0 var(--shadow);
    transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--shadow); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shadow); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }

/* label stickers */
.label {
    display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
    background: var(--sun); color: #2a2238; padding: 4px 16px; border-radius: 999px;
    border: 2px solid #2a2238; margin-bottom: 18px;
}

/* ---------- hero ---------- */
.hero { position: relative; text-align: center; padding: 88px 0 112px; overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; }
.hero-logo { display: inline-block; margin-bottom: 18px; }
.hero-logo { transform-origin: 50% 85%; }
.hero-logo img { width: min(720px, 90vw); height: auto; margin-inline: auto; }
.hero-logo.wobble-idle { animation: wobble-soft 1.1s var(--ease); }
.hero-logo.wobble-hover { animation: wobble 0.6s var(--ease); }
.hero-tagline { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 1.15; margin: 0 0 14px; }
.hero-sub { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--muted); max-width: 28em; margin: 0 auto 32px; }

/* ---------- sections ---------- */
.section { padding: 100px 0; }
.section-alt { background: var(--bg-alt); border-block: 2px solid var(--rule); }
.about-text p { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.3; max-width: 22em; margin: 0; }

.build-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
.build-item {
    background: var(--surface); border: 3px solid var(--line); border-radius: var(--r); padding: 28px;
    box-shadow: 4px 4px 0 var(--shadow); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.build-item:hover { transform: translate(-2px, -3px) rotate(0); box-shadow: 6px 6px 0 var(--shadow); }
.build-num {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--sun); color: #2a2238; border: 2px solid #2a2238; font-family: var(--font-head); font-weight: 700; margin-bottom: 16px;
}
.build-name { font-family: var(--font-head); font-weight: 600; font-size: 1.7rem; margin-bottom: 8px; }
.build-desc { color: var(--muted); margin-bottom: 18px; }
.build-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.build-tag { font-size: 0.9rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: var(--bg-alt); border: 2px solid var(--soft-line); }

.build-featured {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 36px;
    padding: 26px 32px; border: 3px dashed var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--sun) 35%, var(--surface));
}
.build-featured-label { font-family: var(--font-head); font-weight: 600; color: var(--accent-deep); }
.build-featured-name { font-family: var(--font-head); font-weight: 600; font-size: 1.6rem; line-height: 1.2; }
.build-featured-desc { margin: 4px 0 0; color: var(--muted); }

/* contact rows */
.contact-heading { margin: 4px 0 36px; max-width: 18em; }
.contact-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.contact-row {
    display: flex; flex-direction: column; gap: 10px; text-decoration: none;
    background: var(--surface); border: 3px solid var(--line); border-radius: var(--r); padding: 22px 26px;
    box-shadow: 3px 3px 0 var(--shadow); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-row:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--shadow); }
.contact-row-left { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; }
.contact-icon { color: var(--accent-deep); flex: none; }
.contact-row-right { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-weight: 700; word-break: break-all; }
.contact-arrow { color: var(--ink); transition: transform 0.2s var(--ease); }
.contact-row:hover .contact-arrow { transform: translateX(4px); }

/* ---------- inner pages ---------- */
.page-head { padding: 72px 0 8px; }
.page-head h1 { margin: 6px 0 16px; max-width: 16em; }
.page-section { padding: 40px 0 112px; }

.services-detail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-entry {
    background: var(--surface); border: 3px solid var(--line); border-radius: var(--r); padding: 28px;
    box-shadow: 4px 4px 0 var(--shadow);
}
.service-num { font-family: var(--font-head); font-weight: 700; color: var(--accent-deep); }
.service-entry h2 { font-size: 1.9rem; margin: 2px 0 10px; }
.service-entry > p { color: var(--muted); padding-bottom: 18px; border-bottom: 2px dashed var(--soft-line); }
.service-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-weight: 700; }
.service-list li::before { content: "\2192"; color: var(--accent-deep); margin-right: 10px; }

.services-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 36px; text-decoration: none;
    padding: 26px 32px; border: 3px solid var(--line); border-radius: var(--r); background: var(--sun); color: #2a2238;
    font-family: var(--font-head); font-weight: 600; font-size: 1.6rem; box-shadow: 4px 4px 0 var(--shadow);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.services-cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); }
.services-cta span:last-child { transition: transform 0.2s var(--ease); }
.services-cta:hover span:last-child { transform: translateX(6px); }

.about-page-body { max-width: 40em; }
.about-page-body p { color: var(--muted); font-size: 1.15rem; }
.about-page-body p:first-child { color: var(--ink); font-size: 1.35rem; }

/* ---------- footer ---------- */
.site-footer { border-top: 2px solid var(--rule); background: var(--bg); padding: 36px 0 44px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.footer-logo img { height: 40px; width: auto; }
.footer-links { display: flex; gap: 24px; font-weight: 700; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.footer-socials { display: flex; gap: 10px; }
.footer-social { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); transition: transform 0.2s var(--ease), background 0.2s; }
.footer-social:hover { background: var(--sun); color: #2a2238; transform: translateY(-3px); }
.footer-copy { width: 100%; color: var(--muted); font-size: 0.95rem; }

/* ---------- motion ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.revealed { opacity: 1; transform: none; }
@keyframes wobble {
    0% { transform: rotate(0); } 25% { transform: rotate(-5deg) scale(1.03); }
    55% { transform: rotate(4deg) scale(1.03); } 80% { transform: rotate(-2deg); } 100% { transform: rotate(0); }
}
@keyframes wobble-soft {
    0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2.5deg); } 65% { transform: rotate(2deg); }
}
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .brand:hover img, .hero-logo { animation: none !important; }
    .btn, .btn:hover, .btn:active, .build-item, .contact-row, .services-cta { transition: none; }
}

/* ---------- small screens ---------- */
@media (max-width: 900px) {
    body { font-size: 17px; }
    .hero { padding: 56px 0 80px; }
    .section { padding: 72px 0; }
    .build-grid, .services-detail, .contact-list { grid-template-columns: 1fr; }
    .build-item, .service-entry { transform: none !important; }
    .build-featured { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
    .wrap { width: min(var(--wrap), 100% - 36px); }
    .bar { height: 64px; }
    .brand img { height: 36px; }
    .nav a { padding: 7px 10px; font-size: 0.95rem; }
    .services-cta { font-size: 1.3rem; padding: 22px; }
}

/* five contact rows: email on its own line */
.contact-list .contact-row:first-child { grid-column: 1 / -1; }

/* ---------- illustrations (flat colour, ink outline: same hand drawn look as the logo) ---------- */
.ink { stroke: var(--ill-ink); stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; }
.f-pink { fill: #ff9fc4; } .f-sun { fill: #ffe29a; } .f-mint { fill: #b5ead0; } .f-sky { fill: #9bd0ff; } .f-lav { fill: #d6c8ff; }
.f-paper { fill: #fffaf2; } .f-dark { fill: #3b2f55; } .f-none { fill: none; }
.art svg { display: block; width: 100%; height: auto; overflow: visible; }

.hero-art-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-art { position: absolute; }
.hero-art svg { animation: floaty 7s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(42, 34, 56, 0.22)); }

.card-art { position: absolute; top: 18px; right: 20px; width: 92px; }
.build-item, .service-entry { position: relative; }
.card-art svg { transform: rotate(0); }

.band { background: transparent; }
.where { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 8px; }
.where-item { text-align: center; }
.where-item .art { width: min(150px, 70%); margin: 0 auto 12px; transition: transform 0.25s var(--ease); }
.where-item:hover .art { transform: translateY(-6px) rotate(-3deg); }
.where-item h3 { font-size: 1.25rem; }
.where-item p { color: var(--muted); margin: 4px 0 0; font-size: 1rem; }

.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.how-item { display: flex; gap: 16px; align-items: center; background: var(--surface); border: 3px solid var(--line); border-radius: var(--r); padding: 18px 22px; box-shadow: 3px 3px 0 var(--shadow); }
.how-item .art { width: 64px; flex: none; }
.how-item h3 { font-size: 1.2rem; }

.head-art { position: absolute; right: 0; top: 40px; width: clamp(150px, 20vw, 240px); }
.page-head .wrap { position: relative; }
.head-art svg { filter: drop-shadow(0 6px 12px rgba(42, 34, 56, 0.22)); animation: floaty 7s ease-in-out infinite; }

@media (max-width: 900px) {
    .where { grid-template-columns: repeat(2, 1fr); }
    .how { grid-template-columns: 1fr; }
    .head-art { position: static; width: 160px; margin-top: 24px; }
    .card-art { width: 72px; }
}
@media (max-width: 560px) { .where { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .hero-art svg, .head-art svg { animation: none; } .where-item .art { transition: none; } }

@media (max-width: 900px) {
    .hero { display: flex; flex-direction: column; }
    .hero > .wrap { order: 1; }
    .hero-art-wrap { order: 2; }
}

.where-item .art { height: 124px; display: flex; align-items: flex-end; justify-content: center; }
.where-item .art svg { width: auto; max-width: 100%; max-height: 124px; }

/* ============ colour: bubblegum pink, blue, butter, mint and lavender, soft and cosy ============ */
.nav a[aria-current="page"] { background: var(--sky); color: #2a2238; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.label { background: var(--lab, var(--sun)); }
.section-alt { --lab: var(--pink); }
.band { background: var(--band-sky); border-block: 2px solid var(--rule); --lab: var(--sky); }
.section-lav { background: var(--band-butter); border-block: 2px solid var(--rule); --lab: var(--pink); }
.page-head .label { --lab: var(--lav); }

.hero { background: linear-gradient(180deg, var(--hero-top) 0%, var(--bg) 88%); }

/* cards: no random tilt, each gets its own pastel */
.build-item, .service-entry { transform: none !important; border-width: 2.5px; }
.build-item:hover { transform: translate(-2px, -3px) !important; }
.c-pink { --card-c: var(--pink); } .c-blue { --card-c: var(--sky); } .c-mint { --card-c: var(--mint); }
.build-num { background: var(--card-c, var(--sun)); }
.build-tag { background: color-mix(in srgb, var(--card-c, var(--sun)) 38%, var(--surface)); border-color: color-mix(in srgb, var(--card-c, var(--sun)) 70%, var(--line)); }
.service-num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--card-c, var(--sun)); color: #2a2238; border: 2px solid #2a2238; margin-bottom: 14px; }
.service-list li::before { color: color-mix(in srgb, var(--card-c, var(--pink)) 70%, var(--ink)); }
.service-entry > p { border-bottom-color: color-mix(in srgb, var(--card-c, var(--pink)) 60%, transparent); }
.services-cta { background: var(--sky); }
.build-featured { background: color-mix(in srgb, var(--sun) 40%, var(--surface)); }
.footer-social:hover { background: var(--pink); }

/* contact rows: each platform its own colour bubble */
.contact-row:nth-child(1) { --card-c: var(--pink); } .contact-row:nth-child(2) { --card-c: var(--sky); }
.contact-row:nth-child(3) { --card-c: var(--lav); } .contact-row:nth-child(4) { --card-c: var(--mint); }
.contact-row:nth-child(5) { --card-c: var(--sun); }
.contact-icon { box-sizing: border-box; width: 42px; height: 42px; padding: 9px; border-radius: 50%; background: var(--card-c); border: 2px solid #2a2238; color: #2a2238; }
.contact-row-left { gap: 14px; }

/* where it runs tiles sit on soft coloured plates */
.where-item .art { background: color-mix(in srgb, var(--sun) 0%, transparent); }
.how-item:nth-child(1) { --card-c: var(--pink); } .how-item:nth-child(2) { --card-c: var(--sky); } .how-item:nth-child(3) { --card-c: var(--mint); }
.how-item { background: color-mix(in srgb, var(--card-c) 30%, var(--surface)); }

.hero { padding-top: 56px; padding-bottom: 72px; }
.hero-logo { margin-bottom: 8px; }


/* about: the little jelly family (the studio mascot), sitting together */
.blobs { display: flex; align-items: flex-end; gap: 0; margin-top: 56px; }
.blobs svg { display: block; height: auto; overflow: visible; filter: drop-shadow(3px 4px 0 rgba(42, 34, 56, 0.2)); }
.blobs svg:nth-child(1) { width: 170px; animation: bob 4.6s ease-in-out infinite; transform-origin: 50% 90%; }
.blobs svg:nth-child(2) { width: 140px; margin-left: -14px; animation: bob 5.2s ease-in-out -1.6s infinite; transform-origin: 50% 90%; }
.blobs svg:nth-child(3) { width: 156px; margin-left: -10px; animation: bob 4.9s ease-in-out -3.1s infinite; transform-origin: 50% 90%; }
@keyframes bob { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, 0.965); } }
@media (prefers-reduced-motion: reduce) { .blobs svg { animation: none !important; } }
@media (max-width: 560px) { .blobs svg:nth-child(1) { width: 120px; } .blobs svg:nth-child(2) { width: 100px; } .blobs svg:nth-child(3) { width: 110px; } }

/* the mascot, once on the home page: cheering from the "our own titles" strip */
.featured-mascot { flex: none; width: 112px; margin: -22px 8px -26px 0; }
.featured-mascot svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(3px 4px 0 rgba(42, 34, 56, 0.2)); animation: bob 4.6s ease-in-out infinite; transform-origin: 50% 90%; }
@media (prefers-reduced-motion: reduce) { .featured-mascot svg { animation: none; } }
@media (max-width: 900px) { .featured-mascot { display: none; } }

.not-found-jelly { width: 170px; margin: 28px 0 8px; }
.not-found-jelly svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(3px 4px 0 rgba(42, 34, 56, 0.2)); animation: bob 4.6s ease-in-out infinite; transform-origin: 50% 90%; }
@media (prefers-reduced-motion: reduce) { .not-found-jelly svg { animation: none; } }

/* 404: everything centred, both ways, between the header and the footer */
.not-found { min-height: calc(100vh - 72px - 140px); min-height: calc(100svh - 72px - 140px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 56px 0; }
.not-found .wrap { display: flex; flex-direction: column; align-items: center; }
.not-found h1 { margin: 6px 0 14px; }
.not-found .lede { margin-inline: auto; }
.not-found .not-found-jelly { margin: 24px auto 8px; }
.not-found .btn-row { justify-content: center; }
@media (max-width: 560px) { .not-found { min-height: calc(100vh - 64px - 160px); min-height: calc(100svh - 64px - 160px); } }

/* hero: the handheld and the tablet float in the empty left-bottom and right-middle areas */

/* ============ phones: tighter rhythm, smaller cards and shadows, nothing breaks mid word ============ */
@media (max-width: 560px) {
    body { font-size: 16.5px; line-height: 1.6; }
    .wrap { width: calc(100% - 40px); }
    h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
    h2 { font-size: 1.65rem; }
    .section { padding: 52px 0; }
    .hero { padding: 28px 0 24px; }
    .hero-logo { margin-bottom: 4px; }
    .hero-tagline { font-size: 1.55rem; }
    .hero-sub { font-size: 1.02rem; margin-bottom: 22px; }
    .hero-art-wrap { margin-top: 30px; gap: 16px; }
    .btn { font-size: 1.02rem; padding: 12px 24px; box-shadow: 2px 2px 0 var(--shadow); }
    .label { margin-bottom: 12px; font-size: 0.98rem; }
    .about-text p { font-size: 1.35rem; line-height: 1.3; }
    .build-grid, .services-detail { gap: 18px; }
    .build-item, .service-entry { padding: 20px; box-shadow: 2px 2px 0 var(--shadow); }
    .build-name { font-size: 1.45rem; margin-bottom: 6px; }
    .build-desc { margin-bottom: 14px; font-size: 0.98rem; }
    .build-num, .service-num { width: 36px; height: 36px; margin-bottom: 10px; }
    .card-art { width: 64px; top: 14px; right: 14px; }
    .build-featured { padding: 18px 20px; margin-top: 22px; }
    .build-featured-name { font-size: 1.3rem; }
    .where { gap: 18px 10px; }
    .where-item .art { height: 92px; }
    .where-item .art svg { max-height: 92px; }
    .how { gap: 14px; margin-top: 30px; }
    .how-item { padding: 14px 16px; box-shadow: 2px 2px 0 var(--shadow); }
    .how-item .art { width: 52px; }
    .contact-heading { margin: 2px 0 22px; }
    .contact-list { gap: 14px; }
    .contact-row { padding: 16px 18px; gap: 6px; box-shadow: 2px 2px 0 var(--shadow); }
    .contact-row-left { font-size: 1.12rem; gap: 12px; }
    .contact-row-right { font-size: 0.86rem; }
    .contact-handle { overflow-wrap: anywhere; }
    .page-head { padding: 36px 0 0; position: relative; }
    .page-head h1 { margin: 4px 0 12px; }
    .page-section { padding: 28px 0 64px; }
    .head-art { width: 96px; margin-top: 14px; }
    .services-cta { padding: 18px 20px; box-shadow: 2px 2px 0 var(--shadow); font-size: 1.25rem; margin-top: 22px; }
    .about-page-body p { font-size: 1.02rem; }
    .about-page-body p:first-child { font-size: 1.2rem; }
    .blobs { margin-top: 32px; }
    .site-footer { padding: 26px 0 32px; }
    .footer-inner { gap: 14px 20px; }
    .not-found { min-height: calc(100vh - 64px - 150px); min-height: calc(100svh - 64px - 150px); padding: 36px 0; }
}

/* ============ hero icons: ONE place that decides where they go, by screen size ============
   wide (1200+): five icons around the logo, spread so none touches another or the text
   narrow desktop / tablet landscape (901-1199): three small icons in the corners
   tablet portrait and phones (900-): three icons in a row under the button
   short landscape screens: no icons, a compact hero */
.hero-art svg { animation: floaty 7s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(42, 34, 56, 0.22)); }
.hero-art.a-headset svg { animation-delay: -2.5s; } .hero-art.a-gear svg { animation-delay: -4.5s; }
.hero-art.a-handheld svg { animation-delay: -1.5s; } .hero-art.a-tablet svg { animation-delay: -3.5s; }
.hero .hero-art.a-controller { left: 5%; top: 30%; width: clamp(150px, 14vw, 215px); transform: rotate(-9deg); }
.hero .hero-art.a-gear { right: 14%; bottom: 8%; width: clamp(130px, 13vw, 185px); transform: rotate(-5deg); }
.hero .hero-art.a-handheld { left: 9%; bottom: 7%; width: clamp(104px, 10vw, 148px); transform: rotate(-8deg); }
.hero .hero-art.a-headset { right: 5%; top: 16%; width: clamp(150px, 14vw, 215px); transform: rotate(8deg); }
.hero .hero-art.a-tablet { left: 54%; bottom: 3%; width: clamp(150px, 12.5vw, 220px); transform: rotate(5deg); }
@media (min-width: 1200px) {
    /* extra room under the button for the tablet; the other low icons keep their old height above the hero's bottom edge */
    .hero { padding-bottom: 150px; }
    .hero .hero-art.a-gear { bottom: calc(8% + 78px); }
    .hero .hero-art.a-handheld { bottom: calc(7% + 78px); }
    .hero .hero-art.a-tablet { left: 55%; bottom: 3%; }
}
@media (min-width: 901px) and (max-width: 1199px) {
    .hero .hero-art.a-gear, .hero .hero-art.a-tablet { display: none; }
    .hero .hero-art.a-controller { left: 1.5%; top: 6%; width: 118px; }
    .hero .hero-art.a-headset { right: 1.5%; top: 6%; width: 118px; }
    .hero .hero-art.a-handheld { left: 2.5%; bottom: 6%; width: 86px; }
    .hero-logo img { width: min(640px, 62vw); }
}
@media (max-width: 900px) {
    .hero-art-wrap { position: static; display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 44px; order: 2; }
    .hero .hero-art { position: static; width: 120px; }
    .hero .hero-art.a-gear, .hero .hero-art.a-tablet { display: none; }
}
@media (max-width: 560px) {
    .hero-art-wrap { gap: 16px; }
    .hero .hero-art.a-controller, .hero .hero-art.a-headset { width: 104px; }
    .hero .hero-art.a-handheld { width: 78px; }
    .hero-art svg { filter: drop-shadow(0 4px 8px rgba(42, 34, 56, 0.22)); }
}
/* phones and small tablets on their side: short screens must not be filled by the logo alone */
@media (max-height: 520px) and (orientation: landscape) {
    .hero { padding: 14px 0 18px; }
    .hero-art-wrap { display: none; }
    .hero-logo img { width: auto; height: min(42vh, 170px); }
    .hero-tagline { font-size: 1.35rem; margin-bottom: 6px; }
    .hero-sub { font-size: 0.98rem; margin-bottom: 14px; }
    .site-header .bar, .bar { height: 56px; }
    .section { padding: 40px 0; }
    .not-found { min-height: auto; padding: 30px 0; }
}

/* very small phones (360px and below) */
@media (max-width: 360px) {
    .wrap { width: calc(100% - 32px); }
    .bar { gap: 8px; }
    .brand img { height: 34px; flex: none; }
    .nav { gap: 2px; }
    .nav a { padding: 6px 8px; font-size: 0.88rem; }
    .hero-art-wrap { gap: 10px; }
    .hero .hero-art.a-controller, .hero .hero-art.a-headset { width: 88px; }
    .hero .hero-art.a-handheld { width: 66px; }
    .contact-row-right { font-size: 0.78rem; }
    .contact-row-left { font-size: 1.05rem; }
    .service-list { font-size: 0.95rem; }
    .about-text p { font-size: 1.25rem; }
}



/* ============ refinement (2026-10-17): same colourful, outlined look, minus the childish tells ============
   Flat tags instead of tilted sticker pills, squared number badges, finer and smaller illustrations,
   an ink primary button, tighter type. Sits before the phone blocks so they keep the last word. */
h1, h2, h3 { letter-spacing: -0.025em; }
.nav a { border-radius: 8px; font-weight: 600; }
.btn { border-radius: 10px; }
.label { border-radius: 6px; border-width: 2px; padding: 3px 11px; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; }
.build-num, .service-num { border-radius: 10px; font-size: 0.95rem; }
.contact-icon { border-radius: 10px; }
.footer-social { border-radius: 10px; }
.build-tag { border-radius: 6px; font-weight: 600; }
.build-item, .service-entry, .contact-row, .how-item, .facts, .services-cta, .build-featured { border-width: 2px; }
.build-item, .service-entry { padding: 28px; }
.build-featured { border-style: solid; }
.ink { stroke-width: 3.6; }
.hero-art svg, .head-art svg { animation-duration: 9s; }
.where-item .art { height: 104px; }
.where-item .art svg { max-height: 104px; }
.where-item h3 { font-size: 1.12rem; font-weight: 600; }
@media (min-width: 901px) {
    .hero .hero-art.a-controller { width: clamp(112px, 11vw, 168px); transform: rotate(-6deg); }
    .hero .hero-art.a-headset { width: clamp(112px, 11vw, 168px); transform: rotate(5deg); }
    .hero .hero-art.a-handheld { width: clamp(76px, 7.4vw, 110px); transform: rotate(-5deg); }
    .hero .hero-art.a-gear { width: clamp(100px, 10vw, 145px); transform: rotate(-3deg); }
    .hero .hero-art.a-tablet { width: clamp(112px, 10vw, 168px); transform: rotate(3deg); }
}
.hero-tagline { font-size: clamp(1.55rem, 3.4vw, 2.4rem); letter-spacing: -0.02em; }
.about-text p { letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.5rem); }

/* ================================================================================================
   MOBILE POLISH (touch screens and phones). Everything here is for touch / small screens only;
   desktop is untouched. Added last on purpose so it wins over the earlier rules.
   ================================================================================================ */

/* touch basics: no grey tap flash, no 300ms double-tap delay, text never resized by iOS on rotate */
a, button, .btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* notches and rounded corners (landscape phones): keep content inside the safe area */
@supports (padding: max(0px)) {
    .wrap { width: auto; margin-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); max-width: var(--wrap); }
    @media (min-width: 1128px) { .wrap { margin-inline: auto; } }
    .site-footer { padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px)); }
}

/* no sticky hover on touch screens: a tap must not leave a card lifted or a button shifted */
@media (hover: none) {
    .btn:hover { transform: none; box-shadow: 2px 2px 0 var(--shadow); }
    .build-item:hover { transform: none !important; box-shadow: 4px 4px 0 var(--shadow); }
    .contact-row:hover { transform: none; box-shadow: 3px 3px 0 var(--shadow); }
    .contact-row:hover .contact-arrow, .services-cta:hover span:last-child { transform: none; }
    .services-cta:hover { transform: none; box-shadow: 4px 4px 0 var(--shadow); }
    .footer-social:hover { background: var(--surface); transform: none; }
    .where-item:hover .art { transform: none; }
    .nav a:hover { background: transparent; }
    .nav a[aria-current="page"]:hover { background: var(--sky); }
    .brand:hover img { animation: none; }
    /* instead: a clear pressed state */
    .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shadow); }
    .contact-row:active, .services-cta:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
    .footer-social:active { background: var(--sun); }
    .nav a:active { background: var(--bg-alt); }
}

/* every tap target at least 44 x 44 px (Apple / WCAG guidance) */
@media (max-width: 900px) {
    .nav a { display: inline-flex; align-items: center; min-height: 44px; }
    .footer-links { gap: 6px 4px; flex-wrap: wrap; }
    .footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
    .footer-social { width: 44px; height: 44px; }
    .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
    .contact-row, .services-cta { min-height: 64px; }
}

/* phones: all five hero icons come back, as a tidy two row cluster under the button */
@media (max-width: 900px) {
    .hero { padding-bottom: 36px; }
    .hero-art-wrap { flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin-top: 26px; max-width: 400px; margin-inline: auto; }
    .hero .hero-art.a-gear, .hero .hero-art.a-tablet { display: block; }
    .hero .hero-art { transform: none; }
    .hero .hero-art.a-controller { order: 1; width: 112px; transform: rotate(-6deg); }
    .hero .hero-art.a-headset    { order: 2; width: 112px; transform: rotate(5deg); }
    .hero .hero-art.a-handheld   { order: 3; width: 76px;  transform: rotate(-5deg); }
    .hero .hero-art.a-tablet     { order: 4; width: 128px; transform: rotate(4deg); }
    .hero .hero-art.a-gear       { order: 5; width: 112px; transform: rotate(-4deg); }
    .hero-art svg { filter: drop-shadow(0 4px 8px rgba(42, 34, 56, 0.22)); }
}
@media (max-width: 420px) {
    .hero-art-wrap { gap: 4px 10px; max-width: 330px; }
    .hero .hero-art.a-controller, .hero .hero-art.a-headset { width: 96px; }
    .hero .hero-art.a-handheld { width: 64px; }
    .hero .hero-art.a-tablet { width: 108px; }
    .hero .hero-art.a-gear { width: 96px; }
}
@media (max-width: 360px) {
    .hero .hero-art.a-controller, .hero .hero-art.a-headset { width: 84px; }
    .hero .hero-art.a-handheld { width: 56px; }
    .hero .hero-art.a-tablet { width: 94px; }
    .hero .hero-art.a-gear { width: 84px; }
}

/* save battery and keep scrolling smooth on phones: the hero icons stand still, only the mascots keep bobbing */
@media (max-width: 900px) {
    .hero-art svg { animation: none; }
}

/* short landscape screens keep the compact hero (this must come after the phone rules above) */
@media (max-height: 520px) and (orientation: landscape) {
    .hero .hero-art-wrap { display: none; }
}


/* ================================================================================================
   MOBILE LAYOUT (portrait phones, up to 700px wide and taller than 520px). Real layout changes:
   a thumb-reach bottom tab bar, a slim header, and folding lists on the Services page.
   Everything is inside the media query below, so tablets, desktops and landscape phones never see it.
   ================================================================================================ */
.tabbar, .mail-btn { display: none; }
/* desktop and tablets: the Services lists are always open and the fold button is not shown */
.more > summary { display: none; }
@media (max-width: 700px) and (min-height: 521px) {
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

    /* header: just the logo and a one tap email button */
    .nav { display: none; }
    .bar { height: 58px; }
    .brand img { height: 38px; }
    .mail-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--line); box-shadow: 2px 2px 0 var(--shadow); }
    .mail-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--shadow); }

    /* bottom tab bar, inside the thumb zone */
    .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; background: var(--surface); border-top: 2px solid var(--line); padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)); gap: 4px; }
    .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; text-decoration: none; color: var(--muted); font-family: var(--font-head); font-weight: 600; font-size: 0.74rem; border-radius: 14px; }
    .tabbar a svg { display: block; }
    .tabbar a[aria-current="page"] { color: var(--ink); background: var(--sky); box-shadow: inset 0 0 0 2px var(--line); }
    .tabbar a:active { background: var(--bg-alt); }

    /* the footer no longer repeats the links the tab bar already shows */
    .footer-links { display: none; }
    .site-footer { padding-bottom: 24px; }

    /* hero: fits the first screen, icons right under the button */
    .hero { padding: 18px 0 28px; }
    .hero-logo img { width: min(340px, 82vw); }
    .hero-tagline { font-size: 1.45rem; }
    .hero-sub { margin-bottom: 18px; }
    .hero-art-wrap { margin-top: 20px; }

    /* cards stay in plain vertical flow (swipe rows hide content; auto scrolling moves while you read) */
    .build-grid, .services-detail { gap: 14px; }

    /* services: the long lists fold away behind a tap, the first one starts open (script.js) */
    .more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; margin-top: 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--bg-alt); font-family: var(--font-head); font-weight: 600; font-size: 1rem; cursor: pointer; list-style: none; }
    .more > summary::-webkit-details-marker { display: none; }
    .more > summary::after { content: "+"; font-size: 1.6rem; line-height: 1; transition: transform 0.2s var(--ease); }
    .more[open] > summary::after { content: "\2212"; }
    .more > summary:active { background: var(--sun); }
    .more[open] > .service-list { margin-top: 14px; }

    /* contact page: the email row is the hero action */
    .contact-list .contact-row:first-child { background: var(--sky); }
    .contact-list .contact-row:first-child .contact-handle, .contact-list .contact-row:first-child .contact-arrow { color: var(--ink); }
    .not-found { min-height: calc(100svh - 58px - 68px - 130px); }
}


/* ================================================================================================
   PHONE HERO ICONS v2: three big icons with room to breathe (five crammed under the button looked bad).
   The handheld and the code window move down the page into empty spots, so nothing is lost.
   ================================================================================================ */
.m-deco { display: none; }
@media (max-width: 900px) {
    .hero-art-wrap { flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 10px; max-width: 420px; margin-top: 28px; padding-inline: 6px; }
    .hero .hero-art.a-handheld, .hero .hero-art.a-gear { display: none; }
    .hero .hero-art.a-controller { order: 1; width: 28%; transform: rotate(-5deg); }
    .hero .hero-art.a-tablet { order: 2; width: 33%; margin-top: 30px; transform: rotate(2deg); }
    .hero .hero-art.a-headset { order: 3; width: 28%; transform: rotate(4deg); }
    .hero-art svg { filter: drop-shadow(0 4px 8px rgba(42, 34, 56, 0.22)); }
    #about .wrap { position: relative; }
    .m-deco { display: block; position: absolute; pointer-events: none; }
    .m-deco svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 4px 8px rgba(42, 34, 56, 0.22)); }
    .m-handheld { right: 5%; top: -26px; width: 58px; transform: rotate(8deg); }
    .m-gear { right: 14px; top: 50%; width: 92px; margin-top: -34px; transform: rotate(-5deg); }
    .build-featured { position: relative; padding-right: 120px; }
}
@media (max-width: 420px) {
    .hero-art-wrap { max-width: 340px; }
    .m-gear { width: 78px; margin-top: -28px; }
    .build-featured { padding-right: 104px; }
}

@media (min-width: 600px) and (max-width: 900px) { .hero-art-wrap { max-width: 600px; gap: 24px; } .m-handheld { width: 80px; top: -34px; } .m-gear { width: 120px; } }

@media (max-width: 700px) and (min-height: 521px) { .hero-logo img { width: min(250px, 66vw); } .hero { padding-top: 14px; } }

/* Services: the facts strip (engine, XR, platforms, project types) and the home "more about us" line */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 36px 0 0; border: 3px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); overflow: hidden; }
.facts > div { padding: 20px 24px; border-left: 1px solid rgba(42, 34, 56, 0.25); }
.facts > div:first-child { border-left: 0; }
.facts dt { margin: 0 0 4px; font-family: var(--font-head); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-deep); }
.facts dd { margin: 0; font-weight: 700; line-height: 1.35; }
.about-more { margin: 14px 0 0; max-width: 34em; color: var(--muted); }
.about-more a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 900px) {
    .facts { grid-template-columns: 1fr 1fr; }
    .facts > div:nth-child(3) { border-left: 0; }
    .facts > div:nth-child(n+3) { border-top: 1px solid rgba(42, 34, 56, 0.25); }
}
@media (max-width: 560px) {
    .facts { box-shadow: 2px 2px 0 var(--shadow); margin-top: 24px; }
    .facts > div { padding: 14px 16px; }
    .about-more a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 560px) {
    .services-cta { font-size: 1.1rem; gap: 12px; padding: 16px 18px; }
    .services-cta span:last-child { white-space: nowrap; }
}

/* home: heading above the platform row (was an inline style) */
.where-heading { max-width: 20em; margin-bottom: 36px; }

/* footer: copyright, privacy and email on one wrapping line (also shown on phones, where the link row is hidden) */
.footer-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; }
.footer-copy a { color: inherit; text-underline-offset: 3px; }
.footer-copy a:hover { color: var(--ink); }
@media (max-width: 900px) { .footer-copy a { display: inline-flex; align-items: center; min-height: 44px; } }