/* Inter Tight (SIL Open Font License), self-hosted. Macs and iPhones use their built-in Helvetica Neue first. */
@font-face { font-family: "Inter Tight"; font-weight: 400; font-display: swap; src: url(/fonts/intertight-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Inter Tight"; font-weight: 500; font-display: swap; src: url(/fonts/intertight-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Inter Tight"; font-weight: 600; font-display: swap; src: url(/fonts/intertight-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Inter Tight"; font-weight: 400; font-display: swap; src: url(/fonts/intertight-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Inter Tight"; font-weight: 500; font-display: swap; src: url(/fonts/intertight-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Inter Tight"; font-weight: 600; font-display: swap; src: url(/fonts/intertight-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  --cream: #fdf9f4;
  --sand: #f1ebe2;
  --stone: #e6dfd4;
  --red: #e0261b;
  --black: #0b0b0b;
  --text: #3f3e3c;
  --muted: #8a8780;
  --line: #e2dbcf;
  --font: "Helvetica Neue", Helvetica, "Inter Tight", Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.smooth { scroll-behavior: auto; }
section[id] { scroll-margin-top: 20px; }
body { margin: 0; font-family: var(--font); font-weight: 400; font-size: 16px; letter-spacing: -0.012em; line-height: 1.55; color: var(--black); background: var(--cream); -webkit-font-smoothing: antialiased; }
/* A page shorter than the screen still ends with the footer at the bottom (no cream strip under it) */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body > main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.045em; line-height: 0.95; margin: 0; color: var(--black); }
h1 { font-size: clamp(3.1rem, 9vw, 8.6rem); }
h2 { font-size: clamp(2.5rem, 6.2vw, 5.6rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.05; }
p { margin: 0 0 14px; color: var(--text); }
b, strong { font-weight: 600; color: var(--black); }
::selection { background: var(--red); color: #fff; }

.wrap { width: min(1360px, 100% - 56px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); margin: 0 auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: #fff; padding: 8px 12px; z-index: 30; }
.kicker { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-bottom: 22px; }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Header */
/* The page runs up behind the phone's status bar (viewport-fit=cover): at the top the paint shows there, and the
   header keeps its own content below the bar (and its cream box covers the bar once the page scrolls). */
.site-header { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); background: var(--cream); transition: background-color .5s var(--ease), box-shadow .5s var(--ease), transform .7s var(--ease); }
.site-header.scrolled { box-shadow: 0 1px 0 var(--line); }
.site-header.hide { transform: translateY(-100%); }
.header-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; height: 72px; }
.logo { font-weight: 600; font-size: 1.3rem; letter-spacing: -0.05em; text-decoration: none; color: var(--black); }
/* The logo comes in after its corner's paint (blobs.js adds .logo-in); with less motion it is simply there. If the
   paint never runs, it still fades in on its own after 4 s. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.calm) body[data-paint] .site-header .logo { opacity: 0; animation: logo-in 0.7s ease 4s forwards; }
  .js:not(.calm) body[data-paint] .site-header .logo.logo-in { animation: logo-in-now 0.7s ease forwards; }
  .js:not(.calm) body[data-paint] .site-header .logo.logo-shown { opacity: 1; animation: none; }
}
@keyframes logo-in { to { opacity: 1; } }
@keyframes logo-in-now { to { opacity: 1; } }
.logo-mark { display: none; }
.nav { display: flex; gap: 26px; justify-content: center; }
.nav a { font-size: 0.92rem; text-decoration: none; color: var(--text); position: relative; isolation: isolate; transition: color .3s; }
/* On hover a wobbly paint shape pops in behind each link, each link its own colour */
/* Paint splash: pops in behind a link with a little bounce and keeps wobbling while hovered.
   Used by the menu, the language switch (the current language keeps its splash) and the service arrows. */
.nav a::before, .lang a::before, .svc-row .go::before { content: ""; position: absolute; inset: -7px -12px; z-index: -1; background: var(--c, #f6d327); border-radius: 46% 54% 60% 40% / 55% 45% 55% 45%; transform: scale(0) rotate(-25deg); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.nav a:nth-child(1) { --c: #f6d327; } .nav a:nth-child(2) { --c: #f59ac4; } .nav a:nth-child(3) { --c: #92dd30; } .nav a:nth-child(4) { --c: #f0782a; } .nav a:nth-child(5) { --c: #0fa48c; }
.nav a:hover, .nav a[aria-current] { color: var(--black); }
.nav a:hover::before, .nav a[aria-current]::before, .lang a:hover::before, .lang a[aria-current]::before, .svc-row .go:hover::before { transform: scale(1) rotate(0deg); }
.nav a:hover::before, .lang a:hover::before, .svc-row .go:hover::before { animation: wobble 2.2s ease-in-out infinite alternate; }
@keyframes wobble {
  0% { border-radius: 46% 54% 60% 40% / 55% 45% 55% 45%; }
  50% { border-radius: 58% 42% 45% 55% / 42% 58% 46% 54%; }
  100% { border-radius: 40% 60% 52% 48% / 60% 40% 58% 42%; }
}
/* The logo: on hover, flowing paint spreads through the letters from where the pointer comes in, and drains
   back out where it leaves. blobs.js draws it as a small SVG over the logo's own text, which turns see-through. */
.logo.painted { position: relative; color: transparent; -webkit-text-fill-color: transparent; }
.logo-art { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }

/* Menu for phones and tablets (built by main.js). It opens as a black circle growing out of the button. */
.btn.menu-btn { display: none; gap: 10px; }
.menu-bars { display: inline-grid; gap: 4px; }
.menu-bars i { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform .45s var(--ease); }
.menu-btn:hover .menu-bars i:first-child { transform: translateX(3px); }
.menu-btn:hover .menu-bars i:last-child { transform: translateX(-3px); }
.menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); background: var(--black); color: var(--cream); overflow: hidden auto; overscroll-behavior: contain;
  clip-path: circle(0px at var(--mx, 90%) var(--my, 36px)); transition: clip-path .75s cubic-bezier(.7, 0, .2, 1); }
.menu.open { clip-path: circle(150vmax at var(--mx, 90%) var(--my, 36px)); }
.menu[hidden] { display: none; }
.menu-open { overflow: hidden; }
.menu-paint { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.menu-paint svg { position: absolute; display: block; transform: scale(0) rotate(-30deg); transition: transform .9s cubic-bezier(.34, 1.56, .64, 1) calc(.25s + var(--i) * .07s); }
.menu.open .menu-paint svg { transform: scale(1) rotate(0deg); animation: menu-drift 7s ease-in-out calc(var(--i) * -1.3s) infinite alternate; }
@keyframes menu-drift { from { translate: 0 0; } to { translate: 10px -14px; } }
.menu-top, .menu-links, .menu-foot { position: relative; width: min(1360px, 100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); margin: 0 auto; }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: 72px; flex: 0 0 auto; }
.menu-logo { font-weight: 600; font-size: 1.3rem; letter-spacing: -0.05em; color: var(--cream); text-decoration: none; }
.btn.menu-close { background: var(--cream); color: var(--black); border-color: var(--cream); gap: 10px; }
.btn.menu-close:hover { color: #fff; }
.menu-x { position: relative; width: 12px; height: 12px; }
.menu-x::before, .menu-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.menu-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.menu-links { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 28px 0; }
.menu-links a { position: relative; isolation: isolate; display: block; width: fit-content; padding: 2px 0; color: var(--cream); text-decoration: none; transition: color .3s; }
.menu-links .mask { display: block; overflow: hidden; padding: 0 .06em .06em 0; }
.menu-links .word { display: block; font-size: clamp(2.6rem, 11vw, 5.2rem); font-weight: 500; letter-spacing: -0.055em; line-height: 1.04; transform: translateY(105%); transition: transform .8s var(--ease) calc(.22s + var(--i) * .07s); }
.menu.open .menu-links .word { transform: none; }
/* a splash pops in behind the word you point at or tap */
/* (the corners are rounded in px, so the long splash keeps its full height under the first and last letter) */
.menu-links a::before { content: ""; position: absolute; left: -18px; right: -18px; top: 4%; bottom: 0; z-index: -1; background: var(--c); border-radius: 28px 40px 34px 44px / 50% 46% 54% 50%; transform: scale(0) rotate(-6deg); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.menu-links a:hover, .menu-links a:active, .menu-links a:focus-visible, .menu-links a[aria-current] { color: var(--black); }
.menu-links a:hover::before, .menu-links a:active::before, .menu-links a:focus-visible::before, .menu.open .menu-links a[aria-current]::before { transform: scale(1) rotate(0deg); animation: menu-wobble 2.2s ease-in-out infinite alternate; }
@keyframes menu-wobble {
  0% { border-radius: 28px 40px 34px 44px / 50% 46% 54% 50%; }
  50% { border-radius: 42px 30px 46px 32px / 44% 56% 46% 54%; }
  100% { border-radius: 34px 46px 30px 40px / 56% 44% 52% 48%; }
}
.menu-foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; padding: 22px 0 28px; border-top: 1px solid #2a2a2a; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease) .6s, transform .6s var(--ease) .6s; }
.menu.open .menu-foot { opacity: 1; transform: none; }
.menu-foot .lang a { color: #bdb8ae; }
.menu-foot .lang a[aria-current], .menu-foot .lang a:hover { color: var(--black); }
.menu-foot .lang a:nth-child(2)[aria-current], .menu-foot .lang a:nth-child(2):hover { color: #fff; }
.menu-contact { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: .92rem; }
.menu-contact a { color: #bdb8ae; text-decoration: none; border-bottom: 1px solid rgba(253, 249, 244, .25); }
.menu-contact a:hover { color: var(--cream); }
.menu:not(.open) .menu-links .word, .menu:not(.open) .menu-paint svg, .menu:not(.open) .menu-foot { transition-delay: 0s; transition-duration: .3s; }
/* A tapped link's splash flies off as a paint shape (blobs.js). On the way to another page the menu empties first,
   and the next page opens on the same black, which closes into its menu button while the shape flies on. */
.menu-links a.flown { color: var(--cream); }
.menu-links a.flown::before { opacity: 0; transition: none; }
/* a clicked header link keeps its splash (even if the pointer moves off) until the drip takes it (blobs.js) */
.nav a.splashed { color: var(--black); }
.nav a.splashed::before { transform: scale(1) rotate(0deg); animation: wobble 2.2s ease-in-out infinite alternate; }
.nav a.flown::before { opacity: 0; transition: none; }
.menu.leaving .menu-top, .menu.leaving .menu-links, .menu.leaving .menu-foot, .menu.leaving .menu-paint { opacity: 0; transition: opacity .22s var(--ease); }
.paint-flier { position: fixed; left: 0; top: 0; z-index: 65; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.paint-curtain { position: fixed; inset: 0; z-index: 60; background: var(--black); pointer-events: none;
  clip-path: circle(150vmax at var(--mx) var(--my)); transition: clip-path .65s cubic-bezier(.45, 0, .2, 1); }
.paint-curtain.away { clip-path: circle(0px at var(--mx) var(--my)); }
/* the next page's very first frame, before any script runs: the black with the shape on it (set in <head>);
   it clears itself if the script never takes over */
/* from a header link on another page (computers): only the hanging drip, over the page */
html.arriving-drop body::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; background: var(--arrive, none); animation: arrive-safety .3s 2.5s forwards; }
html.arriving body::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; background: var(--arrive, none), var(--black); animation: arrive-safety .3s 2.5s forwards; }
@keyframes arrive-safety { to { opacity: 0; visibility: hidden; } }
@media (max-width: 960px) { .btn.menu-btn { display: inline-flex; } }
@media (max-width: 620px) { .header-right .lang, .header-right .header-cta { display: none; } }

/* Language switch */
.header-right { justify-self: end; display: flex; align-items: center; gap: 18px; }
.lang { display: flex; gap: 6px; font-size: .85rem; font-weight: 500; }
.lang a { position: relative; isolation: isolate; padding: 4px 7px; text-decoration: none; color: var(--muted); transition: color .3s; --c: #92dd30; }
.lang a::before { inset: 0 -1px; }
.lang a:hover, .lang a[aria-current] { color: var(--black); }
/* ET is lime, EN its opposite on the colour wheel, violet (light text on it) */
.lang a:nth-child(2) { --c: #8735bd; }
.lang a:nth-child(2):hover, .lang a:nth-child(2)[aria-current] { color: #fff; }

/* "Reduce motion": a label and a small on/off switch (main.js adds it). In the header on computers; on phones and
   tablets in the menu. Not offered when the system already asks for less motion. */
.calm-toggle { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 9px; padding: 4px 7px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer; transition: color .3s; }
.calm-toggle:hover, .calm-toggle:focus-visible, .calm-toggle[aria-checked="true"] { color: var(--black); }
.calm-switch { position: relative; flex: 0 0 auto; width: 30px; height: 18px; border: 1.5px solid currentColor; border-radius: 999px; transition: background-color .3s, border-color .3s; }
.calm-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: currentColor; transition: transform .3s var(--ease), background-color .3s; }
.calm-toggle[aria-checked="true"] .calm-switch { background: var(--black); border-color: var(--black); }
.calm-toggle[aria-checked="true"] .calm-switch::after { transform: translateX(12px); background: var(--cream); }
.menu .calm-toggle { padding: 0; font-size: .92rem; color: #bdb8ae; }
.menu .calm-toggle:hover, .menu .calm-toggle:focus-visible, .menu .calm-toggle[aria-checked="true"] { color: var(--cream); }
.menu .calm-toggle[aria-checked="true"] .calm-switch { background: var(--lime, #92dd30); border-color: var(--lime, #92dd30); }
.menu .calm-toggle[aria-checked="true"] .calm-switch::after { background: var(--black); }
@media (max-width: 960px) { .header-right .calm-toggle { display: none; } }

/* Phones and tablets: while the header is tucked away, the menu button waits at the bottom right, in thumb reach */
.btn.menu-float { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); z-index: 25; padding: 15px 24px; font-size: 1rem; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(18px) scale(.9); transition: opacity .35s var(--ease), transform .45s cubic-bezier(.34, 1.56, .64, 1), visibility 0s .45s; }
.btn.menu-float.show { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .45s cubic-bezier(.34, 1.56, .64, 1), visibility 0s; }
@media (min-width: 961px) { .btn.menu-float { display: none; } }
.menu-open .btn.menu-float { opacity: 0; visibility: hidden; }

/* Buttons */
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; background: var(--black); color: var(--cream); text-decoration: none; font-weight: 500; font-size: 0.95rem; letter-spacing: -0.02em; padding: 13px 22px; border-radius: 999px; border: 1px solid var(--black); transition: color .3s .08s; }
/* On hover colour floods in from wherever the pointer enters and drains out where it leaves, a new colour
   each time (main.js sets --x, --y, --d and --fill) */
.btn::before { content: ""; position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 0; height: 0; border-radius: 50%; background: var(--fill, var(--red)); transform: translate(-50%, -50%); z-index: -1; transition: width .6s var(--ease), height .6s var(--ease); }
.btn:hover::before { width: var(--d, 440px); height: var(--d, 440px); }
.btn:hover { color: #fff; }
.btn-ghost { background: transparent; color: var(--black); border-color: var(--black); }
.btn-light { background: var(--cream); color: var(--black); border-color: var(--cream); }
.btn-ghost-light { background: transparent; color: var(--cream); border-color: rgba(253, 249, 244, .45); }
.btn-small { padding: 9px 16px; font-size: 0.88rem; }
.btn .arrow { transition: transform .45s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.link { font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--black); padding-bottom: 2px; transition: opacity .3s; }
.link:hover { color: var(--red); border-color: var(--red); }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Hero */
.hero { padding: 64px 0 0; }
.hero h1 { max-width: 12ch; }
.hero-row { display: grid; grid-template-columns: minmax(0, 46ch) auto; justify-content: space-between; align-items: end; gap: 32px; margin-top: 44px; }
.hero-row .message { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.2; letter-spacing: -0.03em; font-weight: 500; color: var(--black); margin: 0; }
.stage { margin: 72px 0 0; position: relative; background: var(--sand); border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 7.5; transform-origin: 50% 0; }
.stage-inner { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 6%; }
.browser { width: 70%; background: #fff; border-radius: 10px 10px 0 0; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.35); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #f6f3ee; border-bottom: 1px solid var(--line); }
.browser-bar span { width: 8px; height: 8px; border-radius: 50%; background: #d8d1c5; }
.browser-bar em { margin-left: 8px; font-style: normal; font-size: .72rem; color: var(--muted); }
.stage .phone { position: absolute; right: 9%; bottom: -18%; width: 17%; border-radius: 24px; overflow: hidden; border: 5px solid #111; box-shadow: 0 30px 60px -25px rgba(0,0,0,.45); background: #fff; }

/* Sections */
.section { padding: 150px 0; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.section-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; margin-bottom: 72px; }
.section-head p { margin: 0; font-size: 1.08rem; max-width: 42ch; }
.section > .wrap > h2 { margin-bottom: 72px; max-width: 14ch; }
/* Small, bold, confident statements */
.note { font-weight: 600; font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.15; letter-spacing: -0.03em; color: var(--black); margin: 0; }
.head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-bottom: 72px; }
.head h2 { max-width: 14ch; }
.head .note { text-align: right; }
.contact .head { margin-bottom: 48px; }
.contact .head h2 { margin-bottom: 0; }
.contact .note { color: var(--cream); }
.facts { list-style: none; padding: 16px 0 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid var(--black); }
.about-foot { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }

/* Work */
.work { display: grid; grid-template-columns: 1.25fr 1fr; gap: 72px; align-items: center; }
.work + .work { margin-top: 150px; }
.work.flip .work-media { order: 2; }
.work-media { position: relative; background: var(--sand); border-radius: 6px; overflow: hidden; aspect-ratio: 5 / 4; display: grid; place-items: center; }
.work-media.stone { background: var(--stone); }
.work-media .desk { width: 84%; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 50px -30px rgba(0,0,0,.45); transition: transform 1.2s var(--ease); }
.work:hover .work-media .desk, .work:hover .work-media .phones { transform: scale(1.03); }
.phones { display: flex; justify-content: center; align-items: center; gap: 4%; width: 88%; transition: transform 1.2s var(--ease); }
.phone-frame { margin: 0; width: 30%; border-radius: 22px; overflow: hidden; border: 4px solid #111; box-shadow: 0 30px 50px -30px rgba(0,0,0,.5); background: #fff; }
.phone-frame:nth-child(2) { transform: translateY(8%); }
.work-text h3 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 600; letter-spacing: -0.05em; margin-bottom: 16px; }
.work-links { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.work-text .lede { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--black); max-width: 26ch; margin-bottom: 26px; }
.tags { font-size: 0.85rem; color: var(--muted); margin-bottom: 18px; }
.list { list-style: none; padding: 0; margin: 22px 0 28px; }
.list li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--text); }
.list li:last-child { border-bottom: 1px solid var(--line); }

/* FAQ */

.faq { border-top: 1px solid var(--black); }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 20px; justify-content: flex-start; padding: 22px 0; font-size: 1.12rem; font-weight: 500; letter-spacing: -0.02em; transition: color .35s; }
/* a paint dot grows in front of the question on hover and while it is open */
summary::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; margin-right: -32px; border-radius: 50%; background: var(--dot, var(--red)); transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), margin .5s var(--ease); }
summary:hover::before, details.is-open summary::before { transform: scale(1); margin-right: 0; }
details.is-open summary { color: var(--black); }
.faq details:nth-child(1) { --dot: #df4bd3; } .faq details:nth-child(2) { --dot: #f0782a; } .faq details:nth-child(3) { --dot: #2843bb; } .faq details:nth-child(4) { --dot: #92dd30; } .faq details:nth-child(5) { --dot: #f6d327; }
summary::after { content: ""; margin-left: auto; flex: 0 0 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat; transition: transform .45s var(--ease); }
details.is-open summary::after { transform: rotate(45deg); }
summary::-webkit-details-marker { display: none; }
details p { margin: 0 0 22px; max-width: 62ch; }

/* Contact */
.contact { background: var(--black); color: var(--cream); padding: 150px 0 90px; }
.contact .kicker { color: #8f8a80; }

.contact-row { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.contact-line { display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: 72px; padding-top: 22px; border-top: 1px solid #2a2a2a; font-size: 0.95rem; color: #bdb8ae; }
.contact-line a { text-decoration: none; color: var(--cream); border-bottom: 1px solid rgba(253, 249, 244, .4); transition: color .3s, border-color .3s; }
.contact-line a:hover { color: var(--red); border-color: var(--red); }

/* Contact form (on black) */
.contact-form { position: relative; max-width: 640px; margin: 64px auto 0; text-align: left; }
.form-intro { margin: 0; color: var(--cream); font-weight: 600; font-size: clamp(1rem, 1.25vw, 1.18rem); letter-spacing: -0.03em; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; margin-top: 22px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid label span { display: block; font-size: .85rem; color: #bdb8ae; margin-bottom: 4px; }
.form-grid input, .form-grid textarea { width: 100%; font: inherit; font-size: 1.02rem; color: var(--cream); background: transparent; border: 0; border-bottom: 1px solid rgba(253, 249, 244, .32); border-radius: 0; padding: 8px 0 10px; outline: none; resize: vertical; transition: border-color .3s; }
.form-grid input:focus, .form-grid textarea:focus { border-color: var(--cream); }
.form-grid input:-webkit-autofill { -webkit-text-fill-color: var(--cream); box-shadow: 0 0 0 1000px var(--black) inset; caret-color: var(--cream); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 28px; }
.form-note { margin: 0; font-size: .85rem; color: #bdb8ae; }
.form-note a { color: inherit; }
.form-note a:hover { color: var(--cream); }
.form-status { margin: 18px 0 0; min-height: 1.4em; color: var(--cream); font-weight: 500; }
.form-status a { color: inherit; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form.sent .form-grid, .contact-form.sent .form-foot { display: none; }
.contact-form.sent { display: flex; flex-direction: column; justify-content: center; }
.contact-form.sent .form-status { font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -0.02em; }
.contact-form button[disabled] { opacity: .6; pointer-events: none; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } .contact-form { margin-top: 48px; } }

/* Footer */
.site-footer { background: var(--black); color: #bdb8ae; padding: 20px 0 calc(26px + env(safe-area-inset-bottom, 0px)); font-size: 0.85rem; }
/* The page height rounds up past the footer's last fraction of a pixel, which iPhones showed as a thin cream line under
   it: a black band under the footer (a shadow: it adds nothing to the page's height) covers that, and some bounce. */
.site-footer { box-shadow: 0 100px 0 var(--black); }
.site-footer a:hover { color: var(--red); }
.site-footer .big { color: var(--cream); font-weight: 600; font-size: clamp(4rem, 22.5vw, 21.5rem); line-height: .85; letter-spacing: -0.07em; margin: 0 0 30px -0.04em; }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid #2a2a2a; padding-top: 20px; }
.footer-inner p { margin: 0; color: #bdb8ae; }
.site-footer a { color: #bdb8ae; }


/* ---------- Section layouts: each one different ---------- */
.head-right { grid-template-columns: 1fr; }
.head-right > div { text-align: right; }
.head-right .kicker { justify-content: flex-end; }
.head-right h2 { margin-left: auto; }
.head-right .note { text-align: left; }

/* Services: a big index list; on hover a picture follows the mouse */
.svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--black); }
.svc-row { position: relative; display: grid; grid-template-columns: 1.3fr 1fr 40px; gap: 24px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--line); cursor: default; }
.svc-row h3 { font-size: clamp(2rem, 5vw, 4.6rem); letter-spacing: -0.05em; line-height: 1; transition: transform .6s var(--ease), color .4s; }
.svc-row p { margin: 0; font-size: 1.1rem; color: var(--text); }
.svc-row .go { justify-self: end; position: relative; isolation: isolate; display: grid; place-items: center; width: 64px; height: 64px; margin: -12px -14px -12px 0; font-size: 1.4rem; transition: transform .5s var(--ease), color .4s; }
.svc-row .go::before { inset: 8px; }
.svc-row:nth-child(1) .go { --c: #f6d327; } .svc-row:nth-child(2) .go { --c: #f59ac4; } .svc-row:nth-child(3) .go { --c: #92dd30; }
.svc-row .go:hover { color: var(--black) !important; }
.svc-media { display: none; }
.svc-media, .svc-preview { border-radius: 8px; overflow: hidden; }
.svc-media.sand, .svc-preview.sand { background: var(--sand); }
.svc-media.stone, .svc-preview.stone { background: var(--stone); }
.svc-media .desk, .svc-preview .desk { width: 86%; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 36px -22px rgba(0,0,0,.5); }
.svc-media .ph, .svc-preview .ph { width: 46%; margin-top: 16%; border-radius: 18px; overflow: hidden; border: 4px solid #111; box-shadow: 0 20px 36px -22px rgba(0,0,0,.5); background: #fff; }
.svc-preview { position: fixed; left: 0; top: 0; margin: -150px 0 0 -120px; z-index: 15; width: 240px; height: 300px; display: grid; place-items: center; align-content: center; pointer-events: none; opacity: 0; transform: scale(.85); transform-origin: 100% 50%; transition: opacity .35s var(--ease), transform .5s var(--ease); }
.svc-preview.on { opacity: 1; transform: scale(1); }
@media (hover: hover) and (pointer: fine) {
  .svc-row:hover h3 { transform: translateX(18px); color: var(--red); }
  .svc-row:hover .go { transform: translateX(6px); color: var(--red); }
}
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .svc-preview { display: none; }
  .svc-row { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .svc-row .go { display: none; }
  .svc-media { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-top: 16px; }
  .svc-media .ph { width: 38%; margin-top: 24%; }
}

/* Work: centred heading */
.head-center { text-align: center; max-width: 900px; margin: 0 auto 96px; }
.head-center .kicker { justify-content: center; }
.head-center h2 { margin: 0 auto 26px; max-width: 14ch; }

/* Process: heading pinned while the steps scroll past */
.process-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: start; }
.process-head { position: sticky; top: 110px; }
.process-head h2 { margin-bottom: 28px; max-width: 10ch; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: end; padding: 40px 0; border-top: 1px solid var(--black); }
.timeline li:last-child { border-bottom: 1px solid var(--black); }
.timeline h3 { font-size: clamp(2.2rem, 4.2vw, 3.8rem); letter-spacing: -0.055em; }
.timeline p { margin: 0; font-size: 1.05rem; }

/* About: me, centred on sand */
.about { background: var(--sand); text-align: center; }
.about .wrap { display: flex; flex-direction: column; align-items: center; }
.about .avatar { width: clamp(150px, 16vw, 220px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; margin-bottom: 36px; }
.about h2 { margin-bottom: 14px; }
.about .role { color: var(--muted); font-size: 1.05rem; margin: 0 0 30px; }
.about .bio { max-width: 52ch; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; letter-spacing: -0.02em; color: var(--black); margin: 0 0 30px; }

/* FAQ: mirrored, questions left and heading right, a giant grey KKK in the background */
.faq-section { position: relative; overflow: hidden; }
.bg-word { position: absolute; right: -0.04em; bottom: -0.2em; z-index: 0; font-size: clamp(12rem, 34vw, 34rem); font-weight: 600; letter-spacing: -0.08em; line-height: 1; color: rgba(11, 11, 11, .05); pointer-events: none; user-select: none; }
.faq-section .wrap { position: relative; z-index: 1; }
.faq-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 72px; align-items: start; }
.faq-head { text-align: right; position: sticky; top: 110px; }
.faq-head .kicker { justify-content: flex-end; }

/* Contact: centred and huge */
.contact { text-align: center; }
.contact .kicker { justify-content: center; }
.contact h2 { color: var(--cream); font-size: clamp(3rem, 10vw, 9.6rem); max-width: 11ch; margin: 0 auto 30px; }
.contact .note { color: var(--cream); margin-bottom: 36px; }
.contact .cta-row { justify-content: center; }
.contact-line { justify-content: center; }

/* ---------- Project pages ---------- */
.case-hero { padding: 48px 0 0; }
.case-hero .back { display: inline-block; margin-bottom: 30px; font-size: .95rem; }
.case-hero .back::before { content: "\2190\00a0"; }
.case-hero h1 { max-width: 14ch; font-size: clamp(2.9rem, 7.2vw, 7rem); }
.case-intro { display: grid; grid-template-columns: minmax(0, 46ch) minmax(0, 400px); justify-content: space-between; align-items: end; gap: 40px; margin-top: 44px; }
.case-intro .message { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.22; letter-spacing: -0.03em; font-weight: 500; color: var(--black); margin: 0; }
.case-facts { margin: 0; border-top: 1px solid var(--black); }
.case-facts div { display: grid; grid-template-columns: 100px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.case-facts dt { color: var(--muted); font-size: .9rem; padding-top: 2px; }
.case-facts dd { margin: 0; font-weight: 500; color: var(--black); }
.case-hero .stage { margin-top: 64px; }
.stage-phones .phones { width: 84%; align-self: flex-end; margin-bottom: -10%; }
.case-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 72px; align-items: start; }
.case-grid h2 { max-width: 10ch; }
.case-text p { font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.5; color: var(--black); max-width: 54ch; margin: 0 0 20px; }
.case-text .cta-row { margin-top: 30px; }
.case-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 1px solid var(--black); }
.case-list li { padding: 24px 0 26px; border-bottom: 1px solid var(--line); }
.case-list h3 { font-size: 1.3rem; margin-bottom: 8px; }
.case-list p { margin: 0; }
.band { background: var(--sand); padding: 130px 0; }
.case-shots h2 { text-align: center; max-width: 16ch; margin: 0 auto 72px; }
.shots { display: flex; gap: 32px; justify-content: center; align-items: flex-start; }
.shot { margin: 0; width: min(250px, 21vw); }
.shot:nth-child(even) { margin-top: 56px; }
.ph-frame { border-radius: 28px; overflow: hidden; border: 5px solid #111; background: #fff; box-shadow: 0 30px 50px -30px rgba(0,0,0,.45); }
.shot figcaption { margin-top: 16px; text-align: center; font-weight: 500; letter-spacing: -0.02em; color: var(--black); }
.wide-shot { width: 100%; margin: 72px 0 0; border-radius: 10px; box-shadow: 0 40px 70px -40px rgba(0,0,0,.4); }
.case-next { padding-top: 0; }
.case-next .note { color: var(--muted); margin-bottom: 18px; }
.case-next h2 { max-width: 16ch; }
.case-next h2 a { text-decoration: none; transition: color .4s; }
.case-next h2 a:hover { color: var(--red); }
.case-next h2 .arrow { display: inline-block; transition: transform .5s var(--ease); }
.case-next h2 a:hover .arrow { transform: translateX(14px); }
@media (max-width: 960px) {
  .case-intro, .case-grid { grid-template-columns: 1fr; }
  .case-grid { gap: 32px; }
  .case-list { grid-template-columns: 1fr; }
  .shots { flex-wrap: wrap; gap: 24px; }
  .shot { width: min(240px, 40vw); }
  /* a lower box and bigger phones, so the phones fill the frame instead of sitting at the bottom of it */
  .stage.stage-phones { aspect-ratio: 3 / 2; }
  .stage-phones .stage-inner { padding: 0 3%; }
  .stage-phones .phones { width: 100%; }
}
@media (max-width: 620px) {
  .band { padding: 90px 0; }
  .case-shots h2 { margin-bottom: 48px; }
  .shot:nth-child(even) { margin-top: 36px; }
}

/* ---------- Work page: every project with its picture, facts and what is in it ---------- */
.works-hero { padding: 48px 0 0; }
.works-hero h1 { max-width: 12ch; font-size: clamp(2.9rem, 7.2vw, 7rem); }
.works-hero .message { max-width: 46ch; margin: 36px 0 0; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.22; letter-spacing: -0.03em; font-weight: 500; color: var(--black); }
.projects { padding: 88px 0 150px; }
.project + .project { margin-top: 150px; }
.project-media { display: block; text-decoration: none; }
.project .stage { margin: 0; }
.stage.stone { background: var(--stone); }
.project-media .stage-inner > * { transition: transform 1.2s var(--ease); }
.project-media:hover .browser, .project-media:hover .phones { transform: scale(1.025); }
.project-info { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; margin-top: 44px; }
.project h2 { font-size: clamp(2.1rem, 4vw, 3.6rem); letter-spacing: -0.05em; max-width: 13ch; margin-bottom: 22px; }
.project h2 a { text-decoration: none; transition: color .4s; }
.project h2 a:hover { color: var(--red); }
.project .lede { font-size: clamp(1.08rem, 1.35vw, 1.22rem); line-height: 1.45; color: var(--black); max-width: 40ch; margin-bottom: 28px; }
.project .work-links { align-items: center; }
.features { margin-top: 26px; }
.features .label { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.features ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.features li { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .92rem; font-weight: 500; letter-spacing: -0.015em; color: var(--black); }
.features li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
.features li:nth-child(6n+1) { --dot: #df4bd3; } .features li:nth-child(6n+2) { --dot: #f0782a; } .features li:nth-child(6n+3) { --dot: #2843bb; }
.features li:nth-child(6n+4) { --dot: #92dd30; } .features li:nth-child(6n+5) { --dot: #f6d327; } .features li:nth-child(6n) { --dot: #0fa48c; }
.work-all { margin-top: 110px; text-align: center; }
@media (max-width: 960px) {
  .project-info { grid-template-columns: 1fr; gap: 36px; margin-top: 36px; }
  .project + .project { margin-top: 110px; }
}
@media (max-width: 620px) {
  .projects { padding: 64px 0 100px; }
  .work-all { margin-top: 72px; }
}

/* Legal and 404 pages */
.legal { padding: 72px 0 112px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: 3rem; margin-bottom: 20px; }
.legal h2 { font-size: 1.5rem; letter-spacing: -0.03em; margin-top: 40px; margin-bottom: 12px; }

/* 404: a big painted 404 */
.missing { padding: 30px 0 140px; text-align: center; }
.missing-word { font-weight: 600; font-size: clamp(9rem, 34vw, 26rem); line-height: .85; letter-spacing: -0.07em; color: var(--black); margin: 0 auto 18px; }
.missing h1 { font-size: clamp(2.2rem, 5vw, 4.2rem); max-width: 16ch; margin: 0 auto 22px; }
.missing .lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 40ch; margin: 0 auto 8px; color: var(--black); }
.missing .en-line { color: var(--muted); margin: 0 auto 36px; }
.missing .cta-row { justify-content: center; }

/* ---------------- Motion ---------------- */
/* Liquid text (see main.js). Hidden until the script has set it up, so it never flashes sharp first. */
/* Headings painted in (blobs.js): each word waits, comes up in its paint's colour, then dries to the text colour.
   If the paint never runs, the heading still shows after 3 s. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.calm) body[data-paint] [data-goo]:not([data-paint-word]):not(.ready) { opacity: 0; animation: logo-in 0.6s ease 3s forwards; }
}
.pw { opacity: 0; color: var(--pc); transition: opacity 0.35s ease, color 0.8s var(--ease); }
.pw.in { opacity: 1; }
.pw.dry { color: inherit; }
.ink-paint { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
/* Soft fade for supporting text */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }


@media (max-width: 960px) {
  .header-inner { grid-template-columns: auto 1fr; }
  .nav { display: none; }
  .header-cta { justify-self: end; }
  .header-right { gap: 10px; }
  .hero-row, .section-head, .faq-grid, .contact-row, .head, .process-grid { grid-template-columns: 1fr; }
  .head-right > div, .faq-head { text-align: left; }
  .head-right h2 { margin-left: 0; }
  .head-right .kicker, .faq-head .kicker { justify-content: flex-start; }
  .head-right .note { order: 2; }
  .process-head, .faq-head { position: static; }
  .faq-head { order: -1; }
  .faq-grid { gap: 36px; }
  .process-grid { gap: 40px; }
  .head { gap: 22px; }
  .head .note { text-align: left; }
  .facts { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .work, .work.flip { grid-template-columns: 1fr; gap: 36px; }
  .work.flip .work-media { order: 0; }
  .stage { aspect-ratio: 4 / 3; }
  .browser { width: 86%; }
  .stage .phone { width: 24%; right: 5%; }
}
@media (max-width: 620px) {
  .wrap { width: min(1360px, 100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); }
  .section { padding: 100px 0; }
  .hero { padding-top: 40px; }
  h1 { font-size: 11.4vw; }
  .stage { aspect-ratio: 1 / 1; margin-top: 48px; }
  .stage .phone { width: 30%; border-width: 3px; border-radius: 16px; bottom: -8%; }
  .phone-frame { border-width: 3px; border-radius: 14px; }
  .timeline li { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .contact { padding: 100px 0 80px; }
}

/* Less motion (the system asks for it, or the header's "Reduce motion" switch, remembered in localStorage): the small
   touches stay; what moves on its own or glides with the scroll goes (see main.js and blobs.js for the rest). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu.open .menu-paint svg { animation: none; }
  .process-head, .faq-head { position: static; }
}
html.calm { scroll-behavior: auto; }
.calm .menu.open .menu-paint svg { animation: none; }
.calm .process-head, .calm .faq-head { position: static; }

/* ---------------- Fun bits (blobs.js) ---------------- */
/* phones: the hint that shaking the phone pops the paint */
.shake-hint { position: fixed; left: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); z-index: 30; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px; border: 0; border-radius: 999px; background: var(--black); color: var(--cream); font: 500 .92rem/1 var(--font); letter-spacing: -0.01em; box-shadow: 0 10px 30px -10px rgba(0,0,0,.45); animation: hint-in .6s cubic-bezier(.34, 1.56, .64, 1) both; transition: opacity .4s, transform .4s; }
.shake-hint.away { opacity: 0; transform: translateY(12px) scale(.9); }
.shake-icon { width: 16px; height: 22px; border: 2px solid currentColor; border-radius: 4px; animation: shake-it 1.1s ease-in-out infinite; }
@keyframes hint-in { from { opacity: 0; transform: translateY(16px) scale(.6); } }
@keyframes shake-it { 0%, 55%, 100% { transform: rotate(0); } 62% { transform: rotate(-16deg); } 70% { transform: rotate(14deg); } 78% { transform: rotate(-10deg); } 86% { transform: rotate(6deg); } }
/* the 404 game */
.game-line { margin: 34px 0 0; color: var(--muted); font-size: .95rem; }
.game-start { padding: 0 0 2px; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--black); font: 500 1rem var(--font); cursor: pointer; }
.game-start:hover { color: var(--red); }
.game-start:disabled { opacity: .4; cursor: default; }
.drop-game { position: fixed; inset: 0; z-index: 40; pointer-events: none; touch-action: none; }
.game-drop { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; touch-action: none; }
.game-dot { position: absolute; pointer-events: none; overflow: visible; }
.drop-score { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 84px); transform: translateX(-50%); margin: 0; display: flex; align-items: baseline; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--black); color: var(--cream); font-weight: 500; }
.drop-score b { font-size: 1.4rem; font-weight: 600; color: var(--cream); }
.drop-score i { font-style: normal; margin-left: 10px; padding-left: 10px; border-left: 1px solid #444; color: #bdb8ae; font-variant-numeric: tabular-nums; }
.drop-done { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100% - 32px)); padding: 34px 28px 30px; border-radius: 18px; background: var(--black); color: var(--cream); text-align: center; pointer-events: auto; animation: hint-in .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.drop-done p { color: var(--cream); margin: 0 0 6px; }
.drop-done .en-line { color: #8f8a80; margin-bottom: 22px; }
.drop-big { font-size: 5rem; font-weight: 600; letter-spacing: -0.06em; line-height: 1; margin-bottom: 10px !important; }
.drop-done .cta-row { justify-content: center; }

/* the game is on: the 404, its text and the paint clear away, and the pointer is the bucket */
.game-on .missing .wrap > *, .game-on .blobs, .game-on .site-footer { transition: opacity .6s ease, transform .7s cubic-bezier(.5, 0, .75, 0); opacity: 0; transform: translateY(40px) scale(.96); pointer-events: none; }
.missing .wrap > *, .blobs, .site-footer { transition: opacity .6s ease .2s, transform .7s cubic-bezier(.2, .8, .3, 1) .2s; }
.game-on .missing .wrap > :nth-child(2) { transition-delay: .05s; } .game-on .missing .wrap > :nth-child(3) { transition-delay: .1s; } .game-on .missing .wrap > :nth-child(4) { transition-delay: .15s; } .game-on .missing .wrap > :nth-child(5) { transition-delay: .2s; } .game-on .missing .wrap > :nth-child(6) { transition-delay: .25s; }
.game-on, .game-on * { cursor: none !important; }
.game-on .drop-done, .game-on .drop-done * { cursor: auto !important; }
.game-on .drop-done :is(button, a) { cursor: pointer !important; }
.game-on .drop-done input { cursor: text !important; }
.drop-game { touch-action: none; }
.game-drop { pointer-events: none; }
.bucket { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; pointer-events: none; animation: hint-in .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.bucket svg { display: block; width: 100%; overflow: visible; }
.bucket-done { opacity: .25; transition: opacity .5s; }
.drop-done { max-height: calc(100% - 32px); overflow-y: auto; width: min(460px, calc(100% - 32px)); }
.board-add { display: flex; gap: 8px; margin: 18px 0 6px; }
.board-add input, .board-filter { flex: 1; min-width: 0; padding: 9px 14px; border: 1px solid #3a3a3a; border-radius: 999px; background: #1a1a1a; color: var(--cream); font: inherit; font-size: .92rem; }
.board-add input:focus, .board-filter:focus { outline: none; border-color: var(--cream); }
.board-saved { margin: 4px 0 0; color: #92dd30 !important; font-weight: 600; }
.board { margin: 18px 0 22px; text-align: left; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.board-head h2 { color: var(--cream); font-size: 1.05rem; letter-spacing: -0.02em; margin: 0; }
.board-filter { flex: 0 1 170px; padding: 6px 12px; font-size: .85rem; }
.board-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.board-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; padding: 8px 4px; border-top: 1px solid #2a2a2a; color: #bdb8ae; font-size: .95rem; }
.board-list li.me { color: var(--cream); background: #1d1d1d; border-radius: 6px; }
.board-list li.none { display: block; text-align: center; color: #8f8a80; }
.board-list .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list b { color: var(--cream); font-variant-numeric: tabular-nums; }
.board-list .rank { color: #8f8a80; font-variant-numeric: tabular-nums; }

/* Masses of colour behind the content (drawn by blobs.js). While they are on, the solid sections are
   painted in the colour layer instead, so shapes can cross from one section into the next. */
.blobs { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.blobs-ink { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 0; pointer-events: none; overflow: visible; }
.blob { position: absolute; display: block; overflow: visible; }
.blob-panel { position: absolute; left: 0; right: 0; }
[data-paint] main, [data-paint] .site-footer { position: relative; z-index: 1; }
.blobs-on .about, .blobs-on .contact, .blobs-on .site-footer, .blobs-on .rule { background: transparent; }
/* At the very top the header sits in the page instead of sticking: Safari on iPhones paints a plain bar of colour
   behind the status bar whenever a stuck element touches the top, and without one it shows the paint there. */
.blobs-on .site-header:not(.scrolled) { position: relative; background: transparent; }
/* the big background word lives in the paint layer, under the shapes (blobs.js) */
.blobs-on main .bg-word { visibility: hidden; }
.blob-word { position: absolute; overflow: hidden; }
/* Words filled with paint (blobs.js draws the paint as background layers). The paint box hugs the word exactly,
   with a little room so no letter edge falls outside it, centred. */
[data-paint-word].painted { display: block; width: fit-content; white-space: nowrap; padding: 0 .06em; margin-left: auto; margin-right: auto; color: transparent; -webkit-text-fill-color: transparent; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; }

/* Product pages (/koristus/): the hero has buttons and a short note under the message */
.product-cta { margin-top: 28px; }
.product-note { margin: 14px 0 0; font-size: .9rem; color: var(--muted); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------- Call booking (/broneeri/, /en/book/; book.js) ----------------
   Hardly any words: a huge "Räägime.", three small pills, and the days as blobs of paint. */
.book-hero { padding: 18px 0 110px; }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 26px; text-align: center; }
.book-hero h1 { font-size: 4.4rem; line-height: .9; letter-spacing: -0.06em; } /* the same size on every screen */
.book-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.book-meta li { padding: 9px 16px; border-radius: 999px; background: var(--black); color: var(--cream); font-size: .92rem; font-weight: 500; }
.book-meta li:nth-child(2) { background: var(--sand); color: var(--black); }
.book-meta li:nth-child(3) { background: none; color: var(--black); box-shadow: inset 0 0 0 1.5px var(--black); }
.book-card { position: relative; z-index: 2; width: min(640px, 100%); }
.book-pane { display: none; }
.book-pane.on { display: block; animation: book-in .5s var(--ease); }
@keyframes book-in { from { opacity: 0; transform: translateY(14px); } }
.book-label { display: flex; justify-content: center; align-items: baseline; gap: 12px; margin: 0 0 8px; font-size: 1.05rem; font-weight: 500; color: var(--black); }
.book-tz { font-size: .8rem; font-weight: 400; color: var(--muted); }
/* the days */
.book-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: min(100%, 460px, calc((100vh - 485px) * 1.3)); width: min(100%, 460px, calc((100svh - 485px) * 1.3)); min-width: 220px; margin: 0 auto; aspect-ratio: 5 / 4.45; align-content: start; }
.book-dn { font-size: .78rem; color: var(--muted); text-align: center; }
.book-day { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; background: none; font: inherit; color: #c9c3b8; }
.book-day b { position: relative; z-index: 1; color: inherit; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; }
.book-day small { position: absolute; bottom: 6%; z-index: 1; font-size: .62rem; letter-spacing: .02em; text-transform: lowercase; opacity: .8; }
.book-day svg { position: absolute; inset: 2%; width: 96%; height: 96%; overflow: visible; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.book-day.free { color: #fff; cursor: pointer; animation: day-in .6s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i) * 25ms); }
.book-day.free.light { color: var(--black); }
.book-day.free:hover svg { transform: scale(1.1) rotate(-8deg); }
.book-day.free[aria-pressed="true"] svg { transform: scale(1.24) rotate(10deg); }
.book-day.free[aria-pressed="true"] path { stroke: var(--black); stroke-width: 7; paint-order: stroke; }
.book-day.free[aria-pressed="true"] b { font-weight: 700; }
.book-day.free:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; border-radius: 50%; }
@keyframes day-in { from { transform: scale(0) rotate(-40deg); } }
/* the times */

.book-times { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 6px; max-width: 640px; min-height: 98px; margin: 14px auto 0; }
.book-time { padding: 11px 16px; border: 0; border-radius: 999px; background: var(--sand); font: inherit; font-size: 1rem; font-weight: 500; color: var(--black); cursor: pointer; animation: time-in .45s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i) * 40ms); transition: background-color .2s, color .2s, transform .2s; }
.book-time:hover { background: var(--stone); transform: translateY(-2px); }
.book-time[aria-pressed="true"] { background: var(--red); color: #fff; }
@keyframes time-in { from { opacity: 0; transform: translateY(10px) scale(.7); } }
.book-none { width: 100%; margin: 0 0 6px; color: var(--muted); }
.book-go { display: flex; justify-content: center; margin-top: 14px; }
.book-next:disabled, .book-submit:disabled { opacity: .25; cursor: default; }
/* the details */
.book-pane[data-pane="2"] { max-width: 620px; margin: 0 auto; padding: 22px; text-align: left; border-radius: 28px; background: #fff; box-shadow: 0 30px 70px -40px rgba(60, 40, 20, .35); }
.book-chosen { display: flex; width: fit-content; align-items: baseline; gap: 10px; margin-bottom: 16px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--black); color: var(--cream); font: inherit; font-size: .95rem; cursor: pointer; }
.book-chosen b { font-weight: 500; color: inherit; }
.book-chosen span { font-size: .8rem; color: #bdb8ae; text-decoration: underline; }
.book-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.book-form input, .book-form select, .book-form textarea { width: 100%; padding: 15px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); font: inherit; font-size: 16px; color: var(--black); transition: border-color .2s, background-color .2s; }
.book-form ::placeholder { color: var(--muted); }
.book-form input:focus, .book-form select:focus, .book-form textarea:focus { outline: 0; border-color: var(--black); background: #fff; }
.book-form select { appearance: none; padding-right: 40px; color: var(--black); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.book-form select:invalid, .book-form select:has(option[value=""]:checked) { color: var(--muted); }
.book-form textarea { min-height: 96px; resize: vertical; }
.book-form .bad { border-color: var(--red); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.book-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.book-send { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.book-fine { font-size: .82rem; color: var(--muted); }
.book-note { margin: -2px 4px 2px; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.book-status { margin: 0; font-size: .9rem; color: var(--red); }
.book-status:empty { display: none; }
/* done */
.book-done { padding: 10px 0; }
.book-done h2 { font-size: clamp(3.4rem, 10vw, 8rem); line-height: .9; letter-spacing: -0.06em; }
.book-when { margin: 18px 0 0; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -0.02em; }
.book-meet { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 18px; border-radius: 999px; background: var(--black); color: var(--cream); font-size: .95rem; text-decoration: none; }
.book-meet svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.book-meet[hidden] { display: none; }
.book-invite { margin: 16px 0 0; color: var(--muted); }
.book-again { margin-top: 18px; padding: 0; border: 0; background: none; font: inherit; color: var(--text); text-decoration: underline; cursor: pointer; }
@media (min-width: 900px) {
  .book-hero { padding: 34px 0 150px; }
  .book-times { min-height: 46px; }
  .book-grid { gap: 30px; }
  .book-pane[data-pane="2"] { padding: 30px; }
  .book-form { grid-template-columns: 1fr 1fr; gap: 12px; }
  .book-form .wide { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .book-pane.on, .book-day.free, .book-time { animation: none; } }
/* "Või soovid jätta meile sõnumi?": a plain message under the booking (the same look as the booking details) */
.book-hero:has(+ .book-msg) { padding-bottom: 40px; }
.book-msg { padding: 0 0 120px; }
.msg-form.contact-form { max-width: 620px; margin: 0 auto; padding: 22px; border-radius: 28px; background: #fff; box-shadow: 0 30px 70px -40px rgba(60, 40, 20, .35); }
.msg-form h2 { margin: 0 0 18px; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; letter-spacing: -0.04em; color: var(--black); }
.msg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.msg-grid > input, .msg-grid textarea, .msg-date { width: 100%; padding: 15px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); font: inherit; font-size: 16px; color: var(--black); transition: border-color .2s, background-color .2s; }
.msg-grid ::placeholder { color: var(--muted); }
.msg-grid input:focus, .msg-grid textarea:focus { outline: 0; border-color: var(--black); background: #fff; }
.msg-grid textarea { min-height: 110px; resize: vertical; }
.msg-grid fieldset { margin: 6px 0 0; padding: 0; border: 0; min-width: 0; }
.msg-grid legend { padding: 0; margin-bottom: 10px; font-size: .95rem; font-weight: 500; color: var(--black); }
.msg-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-pills label { position: relative; cursor: pointer; }
.msg-pills input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.msg-pills span { display: inline-block; padding: 10px 15px; border-radius: 999px; background: var(--sand); font-size: .92rem; font-weight: 500; color: var(--black); transition: background-color .2s, color .2s; }
.msg-pills label:hover span { background: var(--stone); }
.msg-pills input:checked + span { background: var(--black); color: var(--cream); }
.msg-pills input:focus-visible + span, .msg-when input:focus-visible + span { outline: 2px solid var(--black); outline-offset: 2px; }
.msg-when label { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: .95rem; line-height: 1.4; color: var(--text); cursor: pointer; }
.msg-when input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--black); }
.msg-date { display: block; max-width: 220px; margin: 4px 0 0 28px; padding: 11px 14px; }
.msg-when:not(:has(input[value="date"]:checked)) .msg-date { opacity: .45; }
.msg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.msg-form .form-status { margin: 12px 0 0; min-height: 0; color: var(--black); }
.msg-form .form-status:empty { display: none; }
.msg-form.sent .msg-grid, .msg-form.sent .msg-foot { display: none; }
.msg-form.sent .form-status { font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -0.02em; }
@media (min-width: 900px) {
  .msg-form.contact-form { padding: 30px; }
  .msg-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .msg-grid .wide { grid-column: 1 / -1; }
}
.calm .book-pane.on, .calm .book-day.free, .calm .book-time { animation: none; }

/* The motivation video (/en/impactvideo/, impact.js): the video is born from the paint, then a painted play button. */
.impact { padding: 36px 0 110px; }
.impact-kicker { margin: 0 0 14px; font-size: .95rem; color: var(--muted); text-align: center; }
.impact h1 { font-size: clamp(3.4rem, 9vw, 8rem); margin: 0 auto 44px; text-align: center; max-width: none; }
.impact-stage { position: relative; width: min(100%, 1040px, calc(78vh * var(--ar, 1.7778))); aspect-ratio: var(--ar, 16 / 9); margin: 0 auto; }
.impact-frame { position: absolute; inset: 0; z-index: 1; border-radius: 28px; overflow: hidden; }
.impact-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--black); }
.impact-paint { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.calm) .impact-stage:not(.born):not(.birthing) .impact-frame { opacity: 0; animation: logo-in .6s ease 5s forwards; }
}
.impact-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 116px; height: 116px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translate(-50%, -50%); animation: impact-pop .7s cubic-bezier(.3, 1.6, .5, 1) both; transition: transform .35s var(--ease), opacity .3s ease; }
.impact-play svg { width: 100%; height: 100%; overflow: visible; }
.impact-play:hover { transform: translate(-50%, -50%) scale(1.07) rotate(-4deg); }
.impact-play:focus-visible { outline: 3px solid var(--black); outline-offset: 6px; border-radius: 50%; }
.impact-play.gone { opacity: 0; transform: translate(-50%, -50%) scale(1.5); pointer-events: none; }
@keyframes impact-pop { from { transform: translate(-50%, -50%) scale(0); } }
.impact-stage.empty .impact-frame { background: var(--sand); }
.impact-stage.empty video { visibility: hidden; }
.impact-soon[hidden] { display: none; }
.impact-soon { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; margin: 0; font-size: 1.2rem; color: var(--muted); }
.impact-note { margin: 30px auto 0; max-width: 1040px; text-align: center; font-size: .95rem; color: var(--muted); }
@media (max-width: 720px) {
  .impact { padding: 52px 0 80px; }
  .impact h1 { margin-bottom: 30px; }
  .impact-frame { border-radius: 20px; }
  .impact-play { width: 90px; height: 90px; }
}
.calm .impact-play, .calm .impact-play.gone { animation: none; transition: none; }

/* ---------- Galerii: the black band above "Näited meie tööst." (home page), and its spread ---------- */
.gallery-band { position: relative; overflow: hidden; isolation: isolate; background: var(--black); color: var(--cream); padding: 150px 0 160px; text-align: center; }
.gallery-paint { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.gallery-paint svg { position: absolute; display: block; transform: scale(0) rotate(-30deg); transition: transform .9s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * .08s); }
.gallery-band.in .gallery-paint svg { transform: scale(1) rotate(0deg); animation: menu-drift 7s ease-in-out calc(var(--i) * -1.3s) infinite alternate; }
.gallery-kicker { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border: 1px solid #3a3a3a; border-radius: 999px; font-size: .85rem; font-weight: 500; letter-spacing: .02em; color: #bdb8ae; }
.gallery-title { margin: 0; font-size: clamp(4.6rem, 17vw, 13rem); font-weight: 500; line-height: .95; letter-spacing: -0.065em; color: var(--cream); }
.gallery-title .mask, .gallery-spread .gs-title .mask { display: block; overflow: hidden; padding: 0 .04em .08em; }
.gallery-title .word, .gallery-spread .gs-title .word { display: block; transform: translateY(105%); transition: transform 1s var(--ease); }
.gallery-band.in .gallery-title .word { transform: none; }
.gallery-note { max-width: 34ch; margin: 22px auto 44px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.45; color: #cfcac0; }

/* "Vaata galeriid": a cream pill whose paint drop changes colour and swells over the whole button on hover */
.gallery-open { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 14px; padding: 9px 30px 9px 9px; border: 0; border-radius: 999px; background: var(--cream); color: var(--black); font: inherit; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; cursor: pointer; overflow: hidden; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), color .4s; }
.gallery-open-blob { position: relative; display: grid; place-items: center; width: 54px; height: 54px; flex: none; }
.gallery-open-blob::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%; background: var(--gc, #df4bd3);
  animation: gallery-hue 10s steps(1) infinite, gallery-morph 3.2s ease-in-out infinite alternate; transition: transform .7s cubic-bezier(.7, 0, .2, 1); }
.gallery-open-arrow { font-size: 1.35rem; color: var(--black); transition: transform .45s var(--ease), color .4s; }
.gallery-open-text { position: relative; transition: color .4s; }
.gallery-open:hover, .gallery-open:focus-visible { transform: scale(1.04) rotate(-1.5deg); }
.gallery-open:hover .gallery-open-blob::before, .gallery-open:focus-visible .gallery-open-blob::before { transform: scale(9); animation-play-state: paused, running; }
.gallery-open:hover .gallery-open-arrow, .gallery-open:focus-visible .gallery-open-arrow { transform: translateX(5px) rotate(-12deg); }
.gallery-open:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.gallery-open:active { transform: scale(.97); }
@keyframes gallery-morph { from { border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%; rotate: 0deg; } to { border-radius: 42% 58% 46% 54% / 60% 44% 56% 40%; rotate: 25deg; } }
/* only the colours black text reads well on, since the drop fills the button on hover */
@keyframes gallery-hue { 0% { background: #df4bd3; } 14% { background: #f0782a; } 28% { background: #92dd30; } 42% { background: #f6d327; } 57% { background: #0fa48c; }
  71% { background: #f59ac4; } 85% { background: #26b04f; } }

/* the spread: the band's black grows out of the button over the whole screen, like the menu */
.gallery-spread .gs-body { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: min(1360px, 100% - 32px); margin: 0 auto; padding: 28px 0 60px; }
.gallery-spread .gs-title { margin: 0; font-size: clamp(4.6rem, 17vw, 13rem); font-weight: 500; line-height: .95; letter-spacing: -0.065em; color: var(--cream); }
.gallery-spread .gs-title .word { transition-delay: .25s; }
.gallery-spread.open .gs-title .word { transform: none; }
.gallery-spread .gs-note { margin: 22px 0 0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: #cfcac0; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease) .55s, transform .6s var(--ease) .55s; }
.gallery-spread.open .gs-note { opacity: 1; transform: none; }

@media (max-width: 899px) { .gallery-band { padding: 100px 0 110px; } .gallery-open { font-size: 1.05rem; } .gallery-open-blob { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) {
  .gallery-title .word, .gallery-spread .gs-title .word { transform: none; transition: none; }
  .gallery-paint svg { transform: none; transition: none; animation: none !important; }
  .gallery-open-blob::before { animation: gallery-hue 10s steps(1) infinite; }
}
.calm .gallery-title .word, .calm .gallery-spread .gs-title .word { transform: none; transition: none; }
.calm .gallery-paint svg { transform: none; transition: none; animation: none !important; }
.calm .gallery-open-blob::before { animation: gallery-hue 10s steps(1) infinite; }