/* Incredible Us — layout uses logical properties only, so EN (ltr) and HE (rtl) share one stylesheet. */
/* Self-hosted fonts (SIL Open Font License; licenses in /fonts). Only the subsets the site uses. */
@font-face { font-family: "Questrial"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/questrial-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/syne-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-condensed-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/heebo-hebrew-400-normal.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/heebo-hebrew-700-normal.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/heebo-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/heebo-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { color-scheme: light; --flip: 1; }
:root {
  --ink: #000;
  --paper: #fff;
  --accent: #170df2;
  --soft: #f4f4fb;
  --line: #e3e3ee;
  --font-body: "Questrial", "Heebo", system-ui, sans-serif;
  --font-display: "Syne", "Heebo", system-ui, sans-serif;
  --font-slogan: "Barlow Condensed", "Heebo", system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 48px);
  --max: 1100px;
}
html[dir="rtl"] { --flip: -1; }
html[lang="he"] { --font-body: "Heebo", system-ui, sans-serif; --font-display: "Heebo", system-ui, sans-serif; }
html { scroll-behavior: smooth; scroll-padding-block-start: 72px; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.7 var(--font-body); -webkit-text-size-adjust: 100%; overflow-x: hidden; }
img { max-inline-size: 100%; block-size: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; inset-block-start: -60px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 100; }
.skip:focus { inset-block-start: 8px; }

/* header / nav */
.site-header { position: sticky; inset-block-start: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); }
.nav { max-inline-size: var(--max); margin-inline: auto; padding: 14px var(--gutter); display: flex; justify-content: center; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px clamp(16px, 3vw, 40px); align-items: center; justify-content: center; }
.nav-list a { text-decoration: none; font-size: 15px; letter-spacing: .05em; padding: 4px 2px; }
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--accent); }
.nav-lang a { border: 1px solid var(--ink); border-radius: 999px; padding: 2px 12px; font-size: 14px; }
.nav-toggle { display: none; }
.nav-contact { display: none; }   /* phones only: Contact sits beside the menu button */
@media (max-width: 760px) {
  .js .nav { justify-content: space-between; }   /* Contact at the start side, the menu button at the end */
  .js .nav-toggle { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; background: none; border: 0; cursor: pointer; }
  .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; display: block; inline-size: 24px; block-size: 2px; background: var(--ink); position: relative; transition: transform .25s; }
  .nav-toggle .bars::before { position: absolute; inset-block-start: -7px; }
  .nav-toggle .bars::after { position: absolute; inset-block-start: 7px; }
  .js .nav-list { display: none; position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--paper); flex-direction: column; padding: 8px var(--gutter) 20px; gap: 4px; align-items: flex-start; border-block-end: 1px solid var(--line); }
  .js .nav-list.open { display: flex; }
  .nav-list a { font-size: 18px; padding: 10px 0; display: block; }
}

/* sections */
.section { max-inline-size: var(--max); margin-inline: auto; padding: clamp(40px, 8vw, 90px) var(--gutter); }
.display { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 6vw, 56px); line-height: 1.1; margin: 0 0 .5em; }
h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.3; margin: 1.4em 0 .4em; }
.lead { font-size: clamp(17px, 2vw, 20px); max-inline-size: 62ch; }
p { margin: 0 0 1em; max-inline-size: 70ch; }
.btn { display: inline-block; font: inherit; letter-spacing: .1em; cursor: pointer; text-decoration: none; }
.btn-text { margin-block-start: 1em; border-block-end: 1px solid var(--ink); padding-block-end: 2px; }
.btn-text:hover { color: var(--accent); border-color: var(--accent); }
button.btn { background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 12px 34px; letter-spacing: .08em; }
button.btn:hover { background: var(--accent); }

/* hero: a stage of fixed proportions (the live site's 980px canvas). Everything sits in % of the stage, measured from
   the inline-start edge, so the whole picture mirrors itself in Hebrew. Each star is one link: art + visible label. */
.hero { padding-block-end: 0; overflow-x: clip; }   /* nothing of the opening sequence can widen the page sideways (seen on an iPhone in Hebrew) */
.stage { position: relative; inline-size: min(100%, 980px); margin-inline: auto; aspect-ratio: 980 / 535; container-type: inline-size; }
.stage .deco, .stage .hero-logo, .stage .beam, .stage .star-label { position: absolute; }
.hero-logo { inset-inline-start: 32.55%; inset-block-start: 15.7%; inline-size: 44.9%; }
.star { position: absolute; inset: 0; pointer-events: none; color: inherit; text-decoration: none; }
.star > * { pointer-events: auto; }
.star-label { display: grid; place-items: center; text-align: center; z-index: 3; font-size: clamp(11px, 1.63cqw, 18px); letter-spacing: .1em; line-height: 1.2; }
.star:hover .star-label, .star:focus-visible .star-label { text-decoration: underline; text-underline-offset: 4px; }
.star:focus-visible { outline: none; }
.star:focus-visible .star-label { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.d-e { inset-inline-start: 16.1%; inset-block-start: 12.9%; inline-size: 16.5%; }                  /* blue ringed planet */
.star-games .star-label { inset-inline-start: 13.6%; inset-block-start: 6.7%; inline-size: 21.5%; block-size: 7.5%; }
.d-b { inset-inline-start: 1.4%; inset-block-start: 40.6%; inline-size: 18.3%; z-index: 2; }       /* flying saucer */
.beam { inset-inline-start: -.4%; inset-block-start: 54.6%; inline-size: 22.4%; block-size: 42.5%; z-index: 1; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); background: linear-gradient(to bottom, rgba(255, 226, 90, .55), rgba(255, 226, 90, .08)); }
.d-a { inset-inline-start: -4.6%; inset-block-start: 58.9%; inline-size: 30.3%; z-index: 2; }      /* the three characters */
.star-about .star-label { inset-inline-start: 3.6%; inset-block-start: 37.6%; inline-size: 14.5%; block-size: 6.4%; }
.d-d { inset-inline-start: 76.7%; inset-block-start: 5.6%; inline-size: 20.7%; }                   /* green planet + creature */
.star-experiences .star-label { inset-inline-start: 76.9%; inset-block-start: 32.4%; inline-size: 20.7%; block-size: 6.4%; }
.d-c { inset-inline-start: 74.1%; inset-block-start: 48.8%; inline-size: 16.5%; }                  /* spiky orange planet */
.star-what .star-label { inset-inline-start: 75.6%; inset-block-start: 74.8%; inline-size: 14.5%; block-size: 6.4%; }
.d-f { inset-inline-start: 91.7%; inset-block-start: 85.3%; inline-size: 5.9%; }                   /* moon */
.star-contact .star-label { inset-inline-start: 79.9%; inset-block-start: 91%; inline-size: 14.5%; block-size: 7.5%; }
.slogan { position: absolute; inset-inline-start: 22.6%; inset-block-start: 91%; inline-size: 40.8%; block-size: 7.5%; margin: 0; display: grid; place-items: center; text-align: center; font-family: var(--font-slogan); font-weight: 400; font-size: clamp(16px, 3.4cqw, 40px); line-height: 1.3; letter-spacing: .01em; }
/* phones: a compact 375 x 560 composition: a big logo, the stars close around it, every label at least 44px tall.
   If the phone's visible height is small the whole picture scales down together, so it always fits the first screen. */
@media (max-width: 700px) {
  .stage { aspect-ratio: 375 / 560; inline-size: min(100%, max(300px, calc((100svh - 110px) * 375 / 560))); }
  .js .nav-contact { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding-inline: 0 6px; text-decoration: none; font-size: 14px; letter-spacing: .04em; }
  .nav-contact img { inline-size: 30px; }
  .nav-contact:hover { color: var(--accent); }
  .star-contact { display: none; }   /* the header has it on phones */
  .star-label { font-size: max(11px, 3.2cqw); letter-spacing: .03em; min-block-size: 44px; }
  .hero-logo { inset-inline-start: 5.9%; inset-block-start: 17%; inline-size: 88%; }
  .d-e { inset-inline-start: 4.8%; inset-block-start: 0; inline-size: 26.7%; }
  .star-games .star-label { inset-inline-start: 0; inset-block-start: 11.6%; inline-size: 36.2%; block-size: 6.4%; }
  .d-d { inset-inline-start: 60.5%; inset-block-start: 0; inline-size: 37%; }
  .star-experiences .star-label { inset-inline-start: 59%; inset-block-start: 11.6%; inline-size: 40%; block-size: 7.1%; }
  .d-c { inset-inline-start: 69.9%; inset-block-start: 67.5%; inline-size: 22.4%; }
  .star-what .star-label { inset-inline-start: 64%; inset-block-start: 78%; inline-size: 34.1%; block-size: 5.4%; }
  .star-about .star-label { inset-inline-start: 4.3%; inset-block-start: 55.6%; inline-size: 32%; block-size: 5.4%; }
  .d-b { inset-inline-start: 8.5%; inset-block-start: 60.8%; inline-size: 30%; }
  html[dir="rtl"] .d-b { inset-inline-start: 10.5%; }   /* the characters' picture is not mirrored, so the saucer and the beam sit differently per direction */
  html[dir="rtl"] .beam { inset-inline-start: 7%; }
  .beam { inset-inline-start: 5.1%; inset-block-start: 68.5%; inline-size: 38%; block-size: 24%; }
  .d-a { inset-inline-start: 1%; inset-block-start: 70.8%; inline-size: 48%; }
  .d-f { inset-inline-start: 85.9%; inset-block-start: 80.5%; inline-size: 11%; }
  .star-contact .star-label { inset-inline-start: 56%; inset-block-start: 79.8%; inline-size: 29%; block-size: 7.9%; }
  /* the slogan lines up with the characters, on the start side of the page (the element itself is always LTR text) */
  .slogan { inset-inline-start: 0; inset-block-start: 94.3%; inline-size: 100%; block-size: 5.4%; font-size: 7cqw; padding-inline: 3%; justify-items: start; text-align: left; }
  html[dir="rtl"] .slogan { justify-items: end; text-align: right; }
}

/* about / team / what / contact */
.about-grid, .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.about-grid > :first-child, .contact-grid > :first-child { align-self: start; }
.about { padding-block-end: 0; }
.about-grid { align-items: stretch; }
.about-art { align-self: end; }
/* contact: the alien stands on the bottom edge of the section, on the text side; the form sits beside it */
.contact-grid > .contact-text { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; }
.contact-art { margin-block-start: auto; padding-block-start: 28px; inline-size: min(100%, 230px); }
.contact-art img { inline-size: 100%; }
.page-home .contact, .contact:has(.contact-art) { padding-block-end: 0; }
.page-head-art img { inline-size: min(100%, 230px); margin-inline-start: auto; }
.contact-art img, .page-head-art img { scale: var(--flip) 1; }   /* faces the other way in Hebrew */
.page-head.has-art { padding-block-end: 0; align-items: end; }   /* the characters stand on the bottom edge of the section */
.social { list-style: none; padding: 0; margin: 1.2em 0 0; display: flex; gap: 14px; }
.social a { display: inline-flex; padding: 6px; border-radius: 50%; }
.social a:hover { color: var(--accent); }
.members { display: grid; gap: 28px; margin-block-start: 28px; }
.member { display: flex; gap: clamp(16px, 3vw, 32px); align-items: flex-start; }
.member h3 { margin-block-start: 0; font-family: var(--font-body); font-weight: 700; font-size: 20px; }
.member .role { font-weight: 700; }
.avatar { inline-size: clamp(100px, 16vw, 150px); aspect-ratio: 1; object-fit: cover; border-radius: 6px; flex: none; }
.planets { display: flex; gap: clamp(24px, 6vw, 80px); justify-content: center; flex-wrap: wrap; margin-block-start: 28px; }
.planet { display: grid; justify-items: center; gap: 12px; text-decoration: none; inline-size: clamp(200px, 30vw, 320px); text-align: center; font-family: var(--font-display); font-size: 22px; }
.planet img { inline-size: calc(var(--s, 1) * 100%); max-inline-size: 100%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.planet:hover img, .planet:focus-visible img { transform: scale(1.06) rotate(calc(var(--flip) * -4deg)); }
.planet:hover span { color: var(--accent); }
.contact-form { display: grid; gap: 14px; position: relative; }
.contact-form h3 { margin: 0; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form label { display: grid; gap: 4px; font-size: 14px; letter-spacing: .04em; }
.contact-form .req { opacity: .6; }
.contact-form input, .contact-form textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--ink); border-radius: 4px; background: var(--paper); inline-size: 100%; }
.contact-form .hp { position: absolute; inset-inline-start: -9999px; }
.contact-form button { justify-self: start; }
.form-status { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 10px); margin: 0; }   /* sits below the form without taking layout space, so the Send button is the bottom edge */
/* desktop: the antenna is a little bigger and its base lines up with the bottom of the Send button */
@media (min-width: 701px) {
  .contact-art { inline-size: min(100%, 270px); padding-block-start: 16px; }
  .contact-details .contact-art { padding-block-start: 0; }   /* the Contact page's details column is a little taller, so the antenna keeps its base level with Send */
  .page-head-art img { inline-size: min(100%, 270px); }
  .page-head.has-art { grid-template-columns: minmax(0, 1fr) minmax(0, 270px); }
}
.contact-details h3 { margin-block-start: 0; }

/* contact page: heading and text beside the illustration */
.page-head.has-art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 230px); gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 700px) { .page-head.has-art { grid-template-columns: 1fr; } }

/* home: airy sections like the live site. The hero fills the first screen so the next heading only shows on scroll. */
.page-home .hero { min-block-size: calc(100svh - 76px); display: grid; align-content: center; }
.page-home .about, .page-home .team, .page-home .what, .page-home .contact { min-block-size: min(86svh, 860px); display: grid; align-content: center; }
.page-home .about, .page-home .contact { align-content: stretch; grid-template-rows: auto 1fr; }

/* services / gallery */
.services { display: grid; gap: clamp(28px, 5vw, 56px); }
.service { display: flex; gap: clamp(20px, 4vw, 56px); align-items: center; }
.service:nth-child(even) { flex-direction: row-reverse; }
.service-art { inline-size: clamp(160px, 28vw, 320px); flex: none; }
.service h3 { margin-block-start: 0; }
.service-lead { font-weight: 700; }
/* gallery: a justified wall, like the live site. Tiles keep their own proportions, no frames or captions. */
.gallery-grid { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gallery-grid::after { content: ""; flex-grow: 1000000; }
.game { flex: calc(var(--ar) * 100) 1 calc(var(--ar) * 280px); min-inline-size: 0; }
.gallery-art { display: block; inline-size: 100%; block-size: auto; aspect-ratio: var(--ar); object-fit: cover; }
.gallery-art.placeholder { background: var(--soft); }
.dlg-holder { display: contents; }
/* phones: one cover tile per product; the rest of its pictures open from the same dialog */
@media (max-width: 700px) { .gallery-grid > .game.extra { display: none; } }
/* projects wall: a tile per project (cover + name); the dialog shows description and all pictures */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px 14px; }
.proj-grid::after { content: none; }
.proj { flex: none; }
.proj .game-btn { display: block; }
.proj .gallery-art { aspect-ratio: 4 / 3; border-radius: 6px; }
.proj-contain .gallery-art { object-fit: contain; background: #fff; }
.proj-name { display: block; padding-block: 8px 12px; font-weight: 600; font-size: 15px; line-height: 1.3; }
.proj-text { margin: 0 0 16px; max-inline-size: 70ch; }
.legal { max-inline-size: 820px; }
.legal h2 { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin: 1.6em 0 .4em; }

/* gallery tiles + lightbox */
.game-btn { all: unset; display: block; position: relative; inline-size: 100%; cursor: pointer; box-sizing: border-box; }
.game-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.game-btn:hover .gallery-art { opacity: .92; }
.game-play { position: absolute; inset: 0; margin: auto; inline-size: 56px; block-size: 56px; border-radius: 50%; background: rgba(0, 0, 0, .65); pointer-events: none; }
.game-play::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 0; block-size: 0; border-block: 10px solid transparent; border-inline-start: 16px solid #fff; translate: calc(var(--flip) * 3px); }
.game-btn:hover .game-play { background: var(--accent); }
.lightbox { inline-size: min(960px, 94vw); max-block-size: 92vh; padding: clamp(16px, 3vw, 32px); border: 0; border-radius: 16px; background: var(--paper); color: var(--ink); }
.lightbox::backdrop { background: rgba(10, 10, 30, .72); }
.lightbox h3 { margin: 0 0 16px; padding-inline-end: 48px; }
.lightbox video { inline-size: 100%; border-radius: 10px; background: #000; margin-block-end: 16px; }
.lb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.lb-grid figure { margin: 0; background: var(--soft); border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.lb-grid img { inline-size: 100%; max-block-size: 60vh; object-fit: contain; }
.lb-close { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; inline-size: 40px; block-size: 40px; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 24px; line-height: 1; cursor: pointer; }
.lb-close:hover { background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: fadeIn .25s ease both; }
}

/* YouTube click-to-load facade */
.yt { margin-block-end: 16px; }
.yt iframe { display: block; inline-size: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; }
.yt-play { all: unset; position: relative; display: block; inline-size: 100%; aspect-ratio: 16 / 9; cursor: pointer; border-radius: 10px; overflow: hidden; background: #000; }
.yt-play img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.yt-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.yt-icon { position: absolute; inset: 0; margin: auto; inline-size: 68px; block-size: 68px; border-radius: 50%; background: rgba(0, 0, 0, .7); }
.yt-icon::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 0; block-size: 0; border-block: 12px solid transparent; border-inline-start: 20px solid #fff; translate: calc(var(--flip) * 3px) 0; }
.yt-play:hover .yt-icon { background: var(--accent); }
.yt-note { font-size: 12px; opacity: .6; margin: 6px 0 0; }

/* footer + floating buttons */
.site-footer { border-block-start: 1px solid var(--line); margin-block-start: 40px; }
.footer-inner { max-inline-size: var(--max); margin: 0 auto; padding: 28px var(--gutter) 110px; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; }
.footer-logo { inline-size: 120px; }
.footer-contact, .footer-links { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.footer-contact .label { opacity: .6; margin-inline-end: 6px; }
.footer-links { display: flex; gap: 18px; }
.footer-inner .social { margin: 0; }
/* touch targets: at least 44px on phones */
@media (max-width: 700px) {
  .social a { padding: 11px; }
  .social { gap: 4px; }
  .btn-text { display: inline-flex; align-items: center; min-block-size: 44px; padding-block-end: 0; }
  .footer-contact a, .footer-links a, .contact-details a { display: inline-block; padding-block: 14px; }
  .footer-links { gap: 8px 22px; flex-wrap: wrap; }
}
.float { min-inline-size: 48px; min-block-size: 48px; position: fixed; inset-inline-end: 14px; z-index: 40; display: grid; justify-items: center; text-decoration: none; font-size: 12px; letter-spacing: .08em; line-height: 1.2; background: rgba(255, 255, 255, .9); border-radius: 14px; padding: 4px 6px; }
.float img { inline-size: 54px; }
.float-up { inset-block-end: 14px; }
.js .float-up { opacity: 0; pointer-events: none; transition: opacity .3s ease; }   /* the rocket appears once the visitor has scrolled */
.js .float-up.show { opacity: 1; pointer-events: auto; }
.float:hover span { color: var(--accent); }

@media (max-width: 760px) {
  .about-grid, .contact-grid, .contact-form .row { grid-template-columns: 1fr; }
  .service, .service:nth-child(even) { flex-direction: column; align-items: flex-start; }
  .member { flex-direction: column; }
  .float-up { inset-block-end: 10px; padding: 2px 4px; }
  .float-up img { inline-size: 40px; }
  .nav-lang a { display: inline-block; margin-block: 6px; }
}

/* motion — only when the visitor has not asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes float { from { translate: 0 -6px; } to { translate: 0 6px; } }
  @keyframes wave { 0%, 100% { rotate: 0deg; } 50% { rotate: calc(var(--flip) * 6deg); } }

  /* Opening sequence, timed like the live site (measured 22.10.2026): saucer glides in, the beam appears, the characters and
     planets arrive one by one, then every label and the slogan fade in together at 5s. About 7s in all. */
  @keyframes glide { from { opacity: 0; translate: calc(var(--flip) * 70cqw) -12cqw; } 15% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
  @keyframes blurIn6 { from { filter: blur(6px); } to { filter: blur(0); } }
  @keyframes spin810 { from { rotate: -810deg; } to { rotate: 0deg; } }
  @keyframes spin360 { from { rotate: -360deg; } to { rotate: 0deg; } }
  @keyframes expandIn { from { scale: .8; } to { scale: 1; } }
  @keyframes bounceIn { 0%, 100% { translate: 0 0; } 25% { translate: 0 -5.1cqw; } 50% { translate: 0 0; } 70% { translate: 0 -1.7cqw; } 85% { translate: 0 0; } 93% { translate: 0 -.6cqw; } }
  @keyframes wink { 0% { clip-path: polygon(0 -60%, 100% -60%, 100% 160%, 0 160%); scale: 1 0; } 50% { clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%); } 100% { clip-path: polygon(0 -60%, 100% -60%, 100% 160%, 0 160%); scale: 1 1; } }
  @keyframes bob { from { translate: 0 0; } to { translate: 0 .8cqw; } }
  @keyframes drift { from { translate: 0 -7px; rotate: -1.5deg; } to { translate: 0 7px; rotate: 1.5deg; } }
  .service:nth-child(odd) .service-art { animation: drift 6.5s ease-in-out infinite alternate; }
  .service:nth-child(even) .service-art { animation: drift 7.5s -2s ease-in-out infinite alternate-reverse; }
  .planet:nth-child(odd) img { animation: drift 7s ease-in-out infinite alternate; }
  .planet:nth-child(even) img { animation: drift 8s -3s ease-in-out infinite alternate-reverse; }
  .about-art img { animation: drift 9s ease-in-out infinite alternate; }
  @keyframes tilt { from { rotate: -3deg; } to { rotate: 3deg; } }
  .d-b { animation: glide 2.1s 1.2s cubic-bezier(.22, .8, .3, 1) both, tilt 3.2s 3.6s ease-in-out infinite alternate; }
  .beam { animation: fadeIn 1.4s 3.3s both, blurIn6 2s 3.3s both; }
  .d-a { animation: fadeIn 2.2s 4.1s both, bob 5s 6.3s ease-in-out infinite alternate; }
  .d-c { animation: fadeIn 1.8s 4.3s both, spin810 1.8s 4.3s both, bob 6s 6.2s ease-in-out infinite alternate-reverse; }
  .d-f { animation: fadeIn .65s 4.5s both, bounceIn 1.2s 4.5s both; }
  .d-e { animation: fadeIn 1.6s 5s both, expandIn 1.6s 5s both; }
  .star-label { animation: fadeIn 1.2s 5s both; }
  .slogan { animation: fadeIn 1.2s 5s both, wink 1.2s 5s both; }
  .d-d { animation: fadeIn 1.08s 5.4s both, spin360 1.8s 5.4s both, bob 7s 7.2s ease-in-out infinite alternate; }
  /* later visits: no opening sequence, only the gentle idle motion */
  html.seen .d-b { animation: tilt 3.2s ease-in-out infinite alternate; }
  html.seen .beam, html.seen .d-e, html.seen .d-f, html.seen .star-label, html.seen .slogan { animation: none; }
  html.seen .d-a { animation: bob 5s ease-in-out infinite alternate; }
  html.seen .d-c { animation: bob 6s ease-in-out infinite alternate-reverse; }
  html.seen .d-d { animation: bob 7s ease-in-out infinite alternate; }
  .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
  .js .reveal.in { opacity: 1; transform: none; }
  .float-up img { animation: float 3s ease-in-out infinite alternate; }
  .service-art { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
  .service:hover .service-art { transform: rotate(calc(var(--flip) * -3deg)) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .beam { opacity: .6; }
}
.proj-scope { margin: 0 0 16px; }
.proj-contain .proj-name { text-align: center; }

.proj-sub { display: block; padding-block-end: 12px; font-size: 14px; line-height: 1.3; color: var(--muted, #5d5d70); text-align: center; }
/* 404 page */
.notfound { text-align: center; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; padding-block: clamp(24px, 6vw, 64px); }
.nf-code { font: 700 clamp(56px, 11vw, 104px)/.9 var(--font-display); color: var(--ink); margin: 0; letter-spacing: .04em; }
.nf-art { inline-size: min(56vw, 260px); block-size: auto; margin-block: .2em 1.2rem; }
.nf-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; inline-size: 100%; max-inline-size: 900px; }
.nf-col .display { font-size: clamp(20px, 3.2vw, 28px); margin: 0 0 .4em; }
.nf-col .lead { font-size: clamp(15px, 2vw, 17px); }
.nf-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 1.8em; }
@media (min-width: 800px) { .nf-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } .nf-text .nf-col:last-child { border-inline-start: 1px solid var(--line); padding-inline-start: 3rem; } }