/* =============================================================================
   lightByte v5 - olive primary, modular build
   ============================================================================= */

:root{
  --olive:#ccd376;
  --olive-2:#b8c05a;
  --olive-3:#dcdf90;
  --olive-soft:#e8ec9f;
  --black:#000;
  --ink:#0a0a0a;
  --ink-2:#141414;
  --ink-3:#1c1c1c;
  --white:#fff;
  --paper:#f6f6f2;
  --paper-2:#ecece6;
  --paper-line:rgba(0,0,0,.11);
  --line:rgba(0,0,0,.12);
  --line-2:rgba(0,0,0,.22);
  --muted:rgba(0,0,0,.55);
  --ease:cubic-bezier(.77,0,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,3vw,44px);
  --pad-y:clamp(72px,10vw,120px);
  --pad-y-tight:clamp(48px,6vw,80px);
  --r-xs:6px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  /* Three elevations instead of eleven one-off shadows. */
  --lift-1:0 2px 8px -2px rgba(0,0,0,.18);
  --lift-2:0 14px 34px -12px rgba(0,0,0,.42);
  --lift-3:0 40px 90px -28px rgba(0,0,0,.62);
  /* Three tracking steps for mono labels instead of seven. */
  --tr-1:.08em;
  --tr-2:.14em;
  --tr-3:.2em;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Accessible focus ring - keyboard navigation only (mouse clicks stay clean). */
:focus{outline:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}

/* Content protection: disable selection + image drag except inside form fields.
   Pairs with the contextmenu/copy/selectstart blockers in app.js. */
html{-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;-ms-user-select:text;user-select:text;-webkit-touch-callout:default}
img,svg,video{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
/* Anchor targets clear the fixed header on scroll-to */
section[id],header[id],footer[id]{scroll-margin-top:110px}
html{overscroll-behavior-y:none;-webkit-overflow-scrolling:touch}
html,body{background:var(--olive);color:var(--black);font-family:'Inter Tight','Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11";font-synthesis:none}
body{overflow-x:hidden;min-height:100dvh;font-weight:400;line-height:1.5;cursor:none;letter-spacing:-.012em}

/* Custom page scrollbar matching brand */
html{scrollbar-width:thin;scrollbar-color:var(--black) var(--olive)}
html::-webkit-scrollbar{width:10px;height:10px}
html::-webkit-scrollbar-track{background:var(--olive-2)}
html::-webkit-scrollbar-thumb{background:var(--black);border:2px solid var(--olive-2)}
html::-webkit-scrollbar-thumb:hover{background:var(--ink)}
body.no-scroll{overflow:hidden}
@media (hover:none){body{cursor:auto}}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;text-align:left}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--black);color:var(--olive)}

.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-feature-settings:"calt";letter-spacing:0}

/* =========== Logo component (SVG <use>) =========== */
.logo{display:inline-block;line-height:0}
.logo svg{width:100%;height:100%;display:block}
.logo--nav{width:150px;height:34px;color:var(--black)}
.logo--nav-dark{width:120px;height:28px;color:var(--olive)}
.logo--menu{width:200px;height:46px;color:var(--olive)}
.logo--loader{width:clamp(220px,32vw,480px);height:auto;aspect-ratio:540/120;color:var(--olive)}
.logo--loc{width:200px;height:46px;color:var(--black)}
.logo--footer{width:100%;height:auto;aspect-ratio:540/120;color:rgba(204,211,118,.22);display:block}

/* =========== Cursor (more visible - bigger, bordered, mix-blend) =========== */
.cursor{position:fixed;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--ink);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .22s var(--ease),height .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease);border:3px solid var(--olive);box-shadow:0 0 0 1.5px rgba(0,0,0,.55);will-change:transform}
.cursor.is-hover{width:30px;height:30px;background:var(--olive);border-color:var(--ink)}
@media (hover:none){.cursor{display:none}}

/* =========== Preloader =========== */
.preloader{position:fixed;inset:0;background:var(--ink);color:var(--olive);z-index:10000;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;padding:28px clamp(20px,3vw,44px);gap:20px}
.preloader__bg{position:absolute;inset:0;opacity:.15;background-image:
  linear-gradient(rgba(204,211,118,.12) 1px,transparent 1px),
  linear-gradient(90deg,rgba(204,211,118,.12) 1px,transparent 1px);
background-size:24px 24px;mask-image:radial-gradient(ellipse at center,black 40%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at center,black 40%,transparent 80%)}
.preloader__scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(255,255,255,.04) 2px 3px);mix-blend-mode:overlay}
.preloader__top{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:var(--tr-2);color:var(--olive);position:relative;z-index:2}
.preloader__top .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--olive);margin-right:8px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.preloader__counter{font-family:'JetBrains Mono',monospace;font-size:clamp(14px,2vw,18px);font-weight:500;letter-spacing:0}
.preloader__counter .n{color:var(--olive)}
.preloader__counter .sep{opacity:.4;margin:0 4px}
.preloader__counter .pct{opacity:.6}

.preloader__stage{display:grid;place-items:center;position:relative;z-index:2;padding:20px}
.preloader__phrase{font-family:'Inter Tight',sans-serif;font-style:italic;font-weight:500;font-size:clamp(24px,4.8vw,64px);letter-spacing:-.035em;line-height:1.05;text-align:center;min-height:1em;max-width:90%;overflow:hidden;text-overflow:clip}
.preloader__phrase .scramble{color:var(--olive-soft);opacity:.75;filter:blur(.4px)}
.preloader__phrase.is-final{font-weight:500}
.preloader__phrase.is-final .thin{font-weight:300}
.preloader__phrase.is-final .fat{font-weight:900}

.preloader__logo{opacity:0;transform:scale(.92);transition:opacity .7s var(--ease),transform .9s var(--ease-out);position:absolute;inset:0;display:grid;place-items:center;z-index:3;pointer-events:none}
.preloader__logo.is-visible{opacity:1;transform:scale(1)}

.preloader__bar{position:relative;height:1px;background:rgba(204,211,118,.18);margin-bottom:14px}
.preloader__bar::after{content:"";position:absolute;top:0;left:0;height:100%;background:var(--olive);width:var(--p,0%);transition:width .12s linear}
.preloader__bot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;position:relative;z-index:2;flex-wrap:wrap}
.preloader__log{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:var(--tr-1);color:var(--olive);opacity:.8;max-width:60%;line-height:1.5}
.preloader__log span{display:block;opacity:.45}
.preloader__log span.is-active{opacity:1;color:var(--olive)}
.preloader__tag{font-family:'Inter Tight',sans-serif;font-style:italic;font-size:13px;color:var(--olive);opacity:.85;font-weight:500}

.preloader.is-done{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease)}

@media (max-width:760px){
  .preloader{padding:20px clamp(16px,4vw,28px);gap:16px}
  .preloader__top{font-size:10px;letter-spacing:var(--tr-2);gap:10px;flex-wrap:wrap}
  .preloader__counter{font-size:13px}
}
@media (max-width:600px){
  .preloader__phrase{font-size:clamp(22px,8vw,44px);letter-spacing:-.02em;max-width:100%}
  .preloader__log{max-width:100%;font-size:10px}
  .preloader__tag{font-size:11px}
  .preloader__bot{flex-direction:column;align-items:flex-start;gap:8px}
  .preloader__time{font-size:10px}
  .logo--loader{width:clamp(160px,55vw,260px)}
}
@media (max-width:400px){
  .preloader__phrase{font-size:clamp(18px,7vw,32px)}
  .preloader__top{font-size:9px;letter-spacing:var(--tr-1)}
  .preloader__top > div:first-child span:not(.dot){max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* =========== Header (sticky, frosted glass) ===========
   Translucent olive bar with backdrop blur - content scrolling underneath
   shows through faintly (current "glass nav" pattern). Solid olive fallback
   where backdrop-filter is unsupported. */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(204,211,118,.8);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-bottom:1px solid var(--black);contain:layout style;isolation:isolate}
@supports not (backdrop-filter: blur(1px)){.nav{background:var(--olive)}}
/* nav ticker removed - top bar deleted per request */
/* Desktop nav grid: [logo]  [nav links centered]  [lang + CTA + burger] */
.nav__row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:22px var(--pad);position:relative;gap:24px}
.nav__progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--black);transform-origin:left;transform:scaleX(0);will-change:transform;pointer-events:none}
.nav__l{display:contents}
.nav__r{display:flex;align-items:center;gap:16px;grid-column:3;justify-self:end}
.nav__logo{display:inline-flex;align-items:center;gap:10px;grid-column:1;justify-self:start}
.nav__logo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--black);animation:pulseDot 2.2s var(--ease) infinite}
@keyframes pulseDot{0%,100%{opacity:.35}50%{opacity:1}}
.nav__index{display:flex;align-items:center;gap:4px;grid-column:2;justify-self:center;flex-wrap:nowrap;white-space:nowrap;min-width:0;pointer-events:auto;z-index:1}
.nav__index a{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:var(--tr-2);text-transform:uppercase;color:var(--black);padding:8px 14px;border-radius:999px;transition:background .3s var(--ease),color .3s var(--ease);position:relative}
.nav__index a::before{content:"·";position:absolute;left:4px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .3s var(--ease)}
.nav__index a:hover{background:var(--black);color:var(--olive)}
/* Five items need to stay on one line down to the burger breakpoint. */
@media (max-width:1320px){
  .nav__index{gap:0}
  .nav__index a{padding:8px 10px;letter-spacing:var(--tr-1)}
}
@media (max-width:1140px){
  .nav__index a{padding:7px 7px;font-size:10px;letter-spacing:var(--tr-1)}
}
.nav__cta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:var(--tr-2);text-transform:uppercase;padding:10px 20px;border-radius:999px;background:var(--black);color:var(--olive);transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease);white-space:nowrap}
.nav__cta:hover{background:var(--white);color:var(--black);transform:translateY(-2px)}
.nav__time{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:var(--tr-1);color:var(--black);opacity:.72}
.nav__burger{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--black);align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0;transition:background .3s var(--ease)}
.nav__burger span{display:block;width:18px;height:1.5px;background:var(--black);transition:transform .35s var(--ease),opacity .3s var(--ease),background .3s var(--ease)}
.nav__burger:hover{background:var(--black)}
.nav__burger:hover span{background:var(--olive)}
.nav__burger.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
/* Tablet + phone: grid with [burger | centered-logo | lang], nav links move
   to the full-screen mobile menu. CTA hidden on mobile - menu has its own. */
@media (max-width:1024px){
  .nav{background:var(--olive);backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav__row{
    display:grid;
    grid-template-columns:44px 1fr 44px;
    grid-template-rows:auto auto;
    align-items:center;
    gap:10px 14px;
    padding:12px var(--pad)
  }
  .nav__l{display:contents}
  .nav__r{display:contents}
  .nav__index,.nav__time,.nav__cta,.nav__music{display:none}
  .nav__logo{grid-column:2;grid-row:1;justify-self:center;margin:0;padding:0;border:none}
  .nav__logo::before{display:none}
  .nav__burger{display:flex;grid-column:1;grid-row:1;justify-self:start;order:-1}
  /* Language switcher centered on its own row below the logo */
  .lang{grid-column:1 / -1;grid-row:2;justify-self:center;order:2}
  .lang button{padding:8px 12px;font-size:10.5px}
  .logo--nav{width:124px;height:28px}
}
@media (max-width:540px){
  .nav__row{gap:8px 10px;padding:10px var(--pad)}
  .logo--nav{width:110px;height:24px}
  .lang{padding:2px;gap:0}
  .lang button{padding:7px 11px;font-size:10.5px;letter-spacing:var(--tr-1)}
}

/* =========== Lang switcher =========== */
.lang{display:inline-flex;gap:1px;padding:3px;border-radius:999px;border:1px solid var(--line-2)}
.lang button{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:var(--tr-1);text-transform:uppercase;padding:6px 10px;border-radius:999px;color:var(--muted);transition:background .3s var(--ease),color .3s var(--ease)}
.lang button:hover{color:var(--black)}
.lang button.is-on{background:var(--black);color:var(--olive)}
.lang--dark{border-color:rgba(204,211,118,.3)}
.lang--dark button{color:rgba(204,211,118,.55)}
.lang--dark button:hover{color:var(--olive)}
.lang--dark button.is-on{background:var(--olive);color:var(--ink)}

/* =========== Mobile menu =========== */
.menu{position:fixed;inset:0;z-index:1100;background:var(--ink);color:var(--olive);opacity:0;pointer-events:none;transition:opacity .45s var(--ease);display:flex;flex-direction:column;padding:28px var(--pad) 32px}
.menu.is-open{opacity:1;pointer-events:auto}
.menu__top{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid rgba(204,211,118,.15)}
.menu__close{width:44px;height:44px;border-radius:999px;border:1px solid rgba(204,211,118,.3);display:grid;place-items:center;color:var(--olive);transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.menu__close:hover{background:var(--olive);color:var(--ink);transform:rotate(90deg)}
.menu__close svg{width:16px;height:16px}
.menu__links{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:32px 0}
.menu__links a{font-family:'Inter Tight',sans-serif;font-style:italic;font-weight:500;font-size:clamp(44px,10vw,80px);line-height:1;letter-spacing:-.04em;padding:10px 0;display:flex;align-items:baseline;gap:16px;transition:color .3s var(--ease),transform .55s var(--ease-out),opacity .55s var(--ease-out);transform:translateY(30px);opacity:0}
.menu.is-open .menu__links a:nth-child(1){transition-delay:.05s}
.menu.is-open .menu__links a:nth-child(2){transition-delay:.11s}
.menu.is-open .menu__links a:nth-child(3){transition-delay:.17s}
.menu.is-open .menu__links a:nth-child(4){transition-delay:.23s}
.menu.is-open .menu__links a:nth-child(5){transition-delay:.29s}
.menu:not(.is-open) .menu__links a{transition-delay:0s}
.menu.is-open .menu__links a{transform:none;opacity:1}
.menu__links a:nth-child(1){transition:color .3s,transform .5s var(--ease-out) .1s,opacity .5s .1s}
.menu__links a:nth-child(2){transition:color .3s,transform .5s var(--ease-out) .18s,opacity .5s .18s}
.menu__links a:nth-child(3){transition:color .3s,transform .5s var(--ease-out) .26s,opacity .5s .26s}
.menu__links a:nth-child(4){transition:color .3s,transform .5s var(--ease-out) .34s,opacity .5s .34s}
.menu__links a:hover{color:var(--white)}
.menu__links a .num{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:var(--tr-2);opacity:.5;font-style:normal;font-weight:500;text-transform:uppercase;align-self:flex-start;margin-top:10px}
.menu__links a .fat{font-weight:900}
.menu__links a .thin{font-weight:300}
.menu__bot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;border-top:1px solid rgba(204,211,118,.15);flex-wrap:wrap}
.menu__bot .btn{background:var(--olive);color:var(--ink)}
.menu__bot .btn:hover{background:var(--white);color:var(--ink)}

/* =========== Utility =========== */
.label{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;letter-spacing:var(--tr-3);text-transform:uppercase;color:var(--muted)}
.idx{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--black);letter-spacing:var(--tr-1);font-weight:500}

.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;background:var(--black);color:var(--olive);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:var(--tr-2);text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:transform .45s var(--ease),background .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 30px -14px rgba(0,0,0,.5)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.btn:hover{background:var(--white);color:var(--black);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--black);border:1px solid var(--black)}
.btn--ghost:hover{background:var(--black);color:var(--olive)}
.btn--olive{background:var(--olive);color:var(--black)}
.btn--olive:hover{background:var(--white);color:var(--black)}
.btn svg{width:14px;height:14px}

/* =========== Hero (creative layered composition) ===========
   Padding: top clears the 2-row fixed header (~90px) + breathing room;
   bottom matches --pad-y-tight so the transition into the marquee feels balanced. */
.hero{position:relative;min-height:100dvh;display:grid;grid-template-rows:1fr auto;padding:calc(var(--pad-y-tight) + 40px) var(--pad) var(--pad-y-tight);overflow:hidden;isolation:isolate}
/* Outlined watermark floating behind the slogan */
.hero__watermark{position:absolute;top:20%;right:-6vw;font-family:'Inter Tight',sans-serif;font-style:italic;font-weight:900;font-size:clamp(220px,28vw,480px);line-height:.85;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.085);pointer-events:none;z-index:0;user-select:none;white-space:nowrap}
/* Rotating star decoration (gwiazda.svg) */
/* Star is the game trigger on desktop - clickable button, rotates slowly.
   Hover pauses rotation + scales slightly to read as interactive. */
.hero__star{position:absolute;top:130px;right:calc(var(--pad) + 10px);width:clamp(200px,24vw,360px);height:clamp(200px,24vw,360px);z-index:10;opacity:1;background:none;border:0;padding:0;cursor:pointer;transform-origin:center;display:block}
.hero__star img{width:100%;height:100%;display:block;object-fit:contain;filter:brightness(0);animation:starSpin 42s linear infinite;transform-origin:center;transition:filter .4s var(--ease),transform .5s var(--ease)}
.hero__star:hover img{animation-play-state:paused;transform:scale(1.06);filter:brightness(0) drop-shadow(0 0 20px rgba(0,0,0,.35))}
.hero__star:active img{transform:scale(.96)}
@keyframes starSpin{to{transform:rotate(360deg)}}

/* Flashing "click here" hint - fades in every ~11s and slides toward the star */
/* Hint itself tracks toward the rotating star during flashes */
@keyframes hintFlash{
  0%,82%,100%{opacity:0;transform:translate(6px,-2px) scale(.94)}
  85%{opacity:.4;transform:translate(2px,-2px) scale(.98)}
  88%{opacity:.9;transform:translate(-4px,-6px) scale(1)}
  91%{opacity:.5;transform:translate(-2px,-4px) scale(1)}
  94%{opacity:1;transform:translate(-8px,-10px) scale(1.02)}
  97%{opacity:.3;transform:translate(-4px,-6px) scale(.98)}
}
/* Arrow tilts slightly toward the star while tracking */
@keyframes hintArrow{
  0%,82%,100%{transform:rotate(0)}
  88%{transform:rotate(-6deg)}
  94%{transform:rotate(-12deg)}
  97%{transform:rotate(-4deg)}
}
@media (max-width:760px){.hero__star,.hero__hint{display:none}}

/* =========== Game modal (Reflex) =========== */
/* Olive panel + black text; precise, editorial, no blur.
   Top padding is generous so the HUD + content never slip under the close-X. */



/* Rules briefing: 4 cards that reveal one-by-one on modal open. */

@media (max-width:560px){.game__rules{grid-template-columns:1fr}}

/* Actions dock: disabled + scaled while rules are still revealing */



@media (max-width:560px){
}

/* Reflex play zone: crisp olive field, sharp black target. No blur. */


/* Play field stays clean - no in-zone phase overlay. The status bar above
   the zone carries the phase label + hint. Shape: pill with dot + label + hint. */
/* Phase-reflecting state on the status pill */
@media (max-width:520px){
}

/* Target appears instantly. Solid black, no blurred shadows - reads crisp. */
  0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,.45)}
  70%{box-shadow:0 0 0 14px rgba(0,0,0,0)}



/* Between-round big score block */
#gameBetweenKicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:var(--tr-3);text-transform:uppercase;color:rgba(0,0,0,.65)}

/* Final result + form */
@media (max-width:520px){.game__formGrid{grid-template-columns:1fr}}

/* Thanks + leaderboard */

@media (max-width:640px){
}
@media (max-width:760px){
  .hero{padding:calc(var(--pad-y-tight) + 30px) var(--pad) var(--pad-y-tight);min-height:90vh}
  .hero__star{display:none}
  .hero__watermark{top:34%;font-size:clamp(96px,30vw,180px);opacity:.35}
  /* Center the hero on phones; bump the slogan a touch (within --pad). */
  .hero__body{text-align:center;align-items:center}
  .hero__slogan{font-size:clamp(58px,15vw,104px);line-height:.94}
  .hero__slogan .dash{width:.38em}
  .hero__bot{grid-template-columns:1fr;gap:18px;padding-top:22px;justify-items:center;text-align:center}
  .hero__scope{justify-self:center;text-align:center}
}
@media (max-width:480px){
  .hero__slogan{font-size:clamp(52px,15.5vw,88px);line-height:.95}
  .hero__scope{font-size:13px}
}
.hero__body{display:flex;flex-direction:column;justify-content:center;padding:clamp(12px,2.4vw,30px) 0;position:relative;z-index:2}
.hero__bot{position:relative;z-index:2;padding-top:20px;border-top:1px solid var(--line);display:flex;align-items:flex-end}
.hero__slogan{font-size:clamp(48px,13.2vw,218px);line-height:.9;letter-spacing:-.05em;font-weight:500;font-style:italic;position:relative}
/* overflow:hidden masks the GSAP translateY(100%) entrance. After the
   reveal finishes, JS adds .is-revealed which lifts the mask so italic
   ascenders/descenders (y in "you", flourishes on "shine.") render freely. */
.hero__slogan .line{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.hero__slogan .line.is-revealed{overflow:visible;padding-bottom:0;margin-bottom:0}
/* Slight gap between "we design" (line 1) and "- you shine." (line 2). */
.hero__slogan .line:nth-of-type(2){margin-top:.12em}
.hero__slogan .word{display:inline-block;transform:translateY(100%);opacity:0;will-change:transform,opacity}
.hero__slogan .thin{font-weight:300}
.hero__slogan .fat{font-weight:900}
.hero__slogan .mark{background:var(--black);color:var(--olive);padding:.02em .12em .04em;border-radius:.08em}
.hero__slogan .dash{display:inline-block;width:.5em;height:.09em;background:var(--black);vertical-align:middle;margin:0 .12em;transform:scaleX(0);transform-origin:left;border-radius:2px}

.hero__scope{font-size:16px;font-style:italic;max-width:340px;line-height:1.5;font-weight:500}
.hero__scope b{font-weight:800}
.hero__scope a{color:var(--black);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .3s var(--ease),text-underline-offset .3s var(--ease)}
.hero__scope a:hover{color:var(--olive-2);text-underline-offset:6px}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* Animated mouse below the scroll label */
@keyframes mouseWheel{
  0%{transform:translateY(0);opacity:1}
  55%{transform:translateY(12px);opacity:0}
  56%{transform:translateY(0);opacity:0}
  70%{opacity:1}
  100%{transform:translateY(0);opacity:1}
}
@media (max-width:760px){.hero__bot{justify-content:center;text-align:center}}

/* =========== Marquee =========== */
/* Top of the dark band (marquee + services) - rounded entry so the page reads
   as stacked rounded surfaces, same language as the CTA's rounded top. */
.marquee{overflow:hidden;padding:22px 0;background:var(--ink);color:var(--olive)}
.marquee{contain:layout paint}
.marquee__track{display:flex;gap:46px;white-space:nowrap;animation:marquee 48s linear infinite;font-size:clamp(16px,2.4vw,28px);font-weight:500;letter-spacing:-.02em;font-style:italic;will-change:transform}
.marquee__track span{display:inline-flex;align-items:center;gap:46px}
.marquee__track span::after{content:"◆";font-style:normal;font-size:.55em;opacity:.75}
.marquee__track b{font-weight:900}
.marquee__track i{font-weight:300;font-style:italic}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =========== Section head =========== */
.sec{padding:var(--pad-y) var(--pad);position:relative}
.sec--tight{padding:var(--pad-y-tight) var(--pad)}
/* Back-to-back tight sections: halve the shared gap so rhythm stays even */
.sec--tight + .sec--tight{padding-top:calc(var(--pad-y-tight) * .55)}
.sec__head{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:baseline;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:36px}
.sec__title{font-size:clamp(32px,5vw,60px);line-height:.95;letter-spacing:-.035em;font-weight:500}
.sec__title b{font-weight:900;font-style:italic}
.sec__title .thin{font-weight:300;font-style:italic}
@media (max-width:700px){.sec__head{grid-template-columns:1fr;gap:10px}}

/* =========== Services - horizontal scroll =========== */
.horiz{position:relative;background:var(--ink);color:var(--olive);padding:var(--pad-y-tight) 0 0;overflow:hidden}
/* Ambient aurora - soft olive glow pools in the dark section corners,
   matching the CTA treatment so all dark surfaces share one language. */
.horiz::before{
  content:"";position:absolute;inset:0;
  pointer-events:none;z-index:0;opacity:.5;
  background:
    radial-gradient(800px 360px at 85% 0%, rgba(204,211,118,.14), transparent 60%),
    radial-gradient(640px 300px at 5% 90%, rgba(204,211,118,.08), transparent 60%);
}
.horiz > *{position:relative;z-index:1}
.horiz__head{padding:0 var(--pad) 26px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.horiz__title{font-size:clamp(44px,8vw,140px);line-height:.88;letter-spacing:-.055em;font-weight:500;font-style:italic}
.horiz__title b{font-weight:900}
.horiz__title .thin{font-weight:300}
.horiz__meta{max-width:340px;font-size:13.5px;line-height:1.6;opacity:.75}

.slide__top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-bottom:10px;border-bottom:1px solid rgba(204,211,118,.18)}
/* Strong index - big mono number is the slide's anchor. Olive on dark slides,
   black on olive slides (override below). */
.slide__idx{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(26px,2.8vw,40px);
  font-weight:500;
  letter-spacing:.02em;
  color:var(--olive);
  line-height:1;
  display:inline-block;
}
/* English category labels removed by request - kept in HTML for i18n but
   hidden. Comment this out to restore them. */
.slide__name{font-size:clamp(30px,3.2vw,48px);line-height:.95;letter-spacing:-.04em;font-weight:500;font-style:italic;margin-top:18px}
.slide__name b{font-weight:900}
.slide__name .thin{font-weight:300}
.slide__desc{font-size:13px;line-height:1.55;opacity:.78;margin-top:12px;max-width:42ch}
.slide__copy{font-size:12.5px;line-height:1.6;opacity:.62;margin-top:10px;max-width:44ch}
/* Numbered list items: mono numeral in a pill badge. Hover fills the badge
   and slides the row slightly right. Creative but still editorial. */
.slide__list{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.slide__list li{list-style:none;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.1);font-size:12.5px;line-height:1.35;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:center;transition:transform .35s var(--ease),color .25s var(--ease)}
.slide__list li:hover{transform:translateX(4px)}
.slide__list li::before{
  content:attr(data-n);
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:22px;padding:0 7px;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:var(--tr-2);color:var(--olive);
  border:1px solid rgba(204,211,118,.4);border-radius:999px;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.slide__list li:hover::before{background:var(--olive);color:var(--ink);border-color:var(--olive)}
.slide__bottom{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:12px;flex-wrap:wrap}
.slide__arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease);flex-shrink:0;color:var(--olive)}
.slide__arrow svg{width:18px;height:18px}
.slide__badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(204,211,118,.12);border:1px solid rgba(204,211,118,.32);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:var(--tr-2);text-transform:uppercase;margin-top:14px;width:fit-content}
.slide__badge svg{width:13px;height:13px}


/* AI slide accent */

@media (max-width:720px){
  .horiz{padding-top:var(--pad-y-tight)}
  .horiz__head{padding:0 var(--pad) 18px;gap:16px}
  .horiz__title{font-size:clamp(38px,10vw,72px)}
  .slide__name{font-size:clamp(28px,8vw,44px)}
}

/* =========== Process - journey timeline ===========
   Vertical path with an animated fill rail. Each step is a node + title +
   one-line description. Nodes scale-in on scroll; the rail behind them fills
   as the user's scroll position advances through the section. */
.journey{position:relative;max-width:820px;margin:0 auto;padding:16px 0 40px}
.journey__rail{position:absolute;left:35px;top:60px;bottom:60px;width:2px;background:rgba(0,0,0,.14);border-radius:2px;z-index:0;overflow:hidden}
.journey__rail-fill{position:absolute;top:0;left:0;width:100%;height:var(--journey-p,0%);background:linear-gradient(to bottom,var(--black),var(--black));transition:height .12s linear}
.journey__rail-fill::after{content:"";position:absolute;bottom:-4px;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--black);box-shadow:0 0 0 3px var(--olive),0 0 14px rgba(0,0,0,.3)}

.journey__step{display:grid;grid-template-columns:72px 1fr;gap:30px;padding:42px 0;min-height:180px;position:relative;z-index:1;align-items:start;opacity:0;transform:translateY(26px);transition:opacity .65s var(--ease-out),transform .75s var(--ease-out)}
.journey__step.is-in{opacity:1;transform:none}

.journey__node{width:72px;height:72px;border-radius:50%;border:2px solid var(--black);background:var(--olive);display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:500;letter-spacing:var(--tr-2);color:var(--black);transition:transform .45s var(--ease),background .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease);position:relative;flex-shrink:0;z-index:2}
.journey__node::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px dashed rgba(0,0,0,.22);opacity:0;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.journey__step.is-in .journey__node{animation:nodeIn .75s var(--ease-out) both}
@keyframes nodeIn{0%{transform:scale(.3);opacity:0}55%{transform:scale(1.14);opacity:1}100%{transform:scale(1)}}
.journey__step:hover .journey__node{background:var(--black);color:var(--olive);box-shadow:0 0 0 6px rgba(0,0,0,.12)}
.journey__step:hover .journey__node::before{opacity:1;transform:scale(1.1) rotate(12deg)}

.journey__body{padding-top:6px;transition:transform .5s var(--ease)}
.journey__step:hover .journey__body{transform:translateX(4px)}
.journey__kicker{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:var(--tr-3);text-transform:uppercase;color:rgba(0,0,0,.55);display:inline-flex;align-items:center;gap:8px;margin-bottom:10px}
.journey__kicker::before{content:"//";opacity:.4;font-weight:500}
.journey__title{font-family:'Inter Tight',sans-serif;font-style:italic;font-size:clamp(44px,6vw,84px);line-height:.95;letter-spacing:-.045em}
.journey__title i{font-weight:300}
.journey__title b{font-weight:900}
.journey__desc{font-size:14.5px;line-height:1.6;color:rgba(0,0,0,.7);margin-top:12px;max-width:56ch}

@media (max-width:600px){
  .journey{padding:8px 0 20px}
  .journey__rail{left:27px}
  .journey__step{grid-template-columns:56px 1fr;gap:20px;padding:22px 0}
  .journey__node{width:56px;height:56px;font-size:12px}
  .journey__title{font-size:clamp(38px,10vw,54px)}
  .journey__desc{font-size:13.5px}
}

/* =========== Clients - infinite carousel =========== */
/* The marquee transform is driven by JS (see app.js initClientsCarousel) so
   the arrow buttons + touch swipe can control it. The CSS @keyframes below
   is kept as a no-JS fallback. */
.clients__rail{position:relative;overflow:hidden;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--olive);isolation:isolate}
/* Edge fades so logos enter/exit cleanly into the rail */
.clients__rail::before,.clients__rail::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.clients__rail::before{left:0;background:linear-gradient(to right,var(--olive),rgba(204,211,118,0))}
.clients__rail::after{right:0;background:linear-gradient(to left,var(--olive),rgba(204,211,118,0))}
.clients__track{display:flex;align-items:center;gap:clamp(40px,5vw,72px);width:max-content;animation:clientsMarquee 48s linear infinite;will-change:transform}
.clients__rail:hover .clients__track{animation-play-state:paused}
.clients__rail.is-jsdriven .clients__track{animation:none}
@keyframes clientsMarquee{to{transform:translateX(-50%)}}
.clients__item{flex-shrink:0;height:70px;display:flex;align-items:center;justify-content:center;padding:0 6px;position:relative;overflow:visible}
.clients__item img{width:auto;height:100%;max-width:180px;object-fit:contain;display:block;filter:brightness(0) saturate(100%);opacity:.55;transition:filter .5s var(--ease),opacity .5s var(--ease)}
/* Hover: logo restores its colours with a subtle lift + soft olive glow.
   Clean, no glitch - reads as "spotlight on" for the highlighted brand. */
.clients__item::before{
  content:"";position:absolute;inset:-10px -14px;border-radius:var(--r-md);
  background:radial-gradient(ellipse at center,rgba(204,211,118,.25) 0%,rgba(204,211,118,0) 70%);
  opacity:0;transition:opacity .4s var(--ease);pointer-events:none;z-index:-1;
}
.clients__item:hover{z-index:3}
.clients__item:hover::before{opacity:1}
.clients__item:hover img{filter:none;opacity:1;transform:translateY(-3px) scale(1.04);transition:filter .4s var(--ease),opacity .4s var(--ease),transform .45s var(--ease)}

/* Manual nav arrows - subtle by default, brighten on hover/focus.
   Sit on top of the edge fades so they don't disappear behind them. */
.clients__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(0,0,0,.2);
  background:rgba(204,211,118,.92);color:var(--black);
  display:grid;place-items:center;
  cursor:pointer;padding:0;z-index:4;
  opacity:0;
  transition:opacity .3s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.clients__nav svg{width:14px;height:14px;display:block}
.clients__nav--prev{left:10px}
.clients__nav--next{right:10px}
.clients__rail:hover .clients__nav,.clients__nav:focus-visible{opacity:.9}
.clients__nav:hover{background:var(--black);color:var(--olive);border-color:var(--black);opacity:1;transform:translateY(-50%) scale(1.06)}
.clients__nav:active{transform:translateY(-50%) scale(.94)}
/* Touch devices have no hover state - keep arrows visible there. */
@media (hover:none){
  .clients__nav{opacity:.7}
}

/* Responsive sizing - single source of truth so the cascade isn't fighting
   itself at intermediate widths. */
@media (max-width:760px){
  .clients__rail{padding:24px 0;min-height:96px}
  .clients__rail::before,.clients__rail::after{width:48px}
  .clients__item{height:60px}
  .clients__item img{max-width:150px}
  .clients__track{gap:40px;animation-duration:40s}
}
@media (max-width:520px){
  .clients__rail{padding:20px 0;min-height:84px}
  .clients__rail::before,.clients__rail::after{width:24px}
  .clients__item{height:54px}
  .clients__item img{max-width:130px}
  .clients__track{gap:32px;animation-duration:34s}
  .clients__nav{width:32px;height:32px}
  .clients__nav svg{width:12px;height:12px}
  .clients__nav--prev{left:6px}
  .clients__nav--next{right:6px}
}
@media (max-width:380px){
  .clients__rail::before,.clients__rail::after{width:16px}
  .clients__item{height:48px}
  .clients__item img{max-width:110px}
  .clients__track{gap:26px}
}

/* =========== CTA =========== */
.cta{padding:var(--pad-y) var(--pad) calc(var(--pad-y) + 20px);background:var(--ink);color:var(--olive);position:relative;text-align:center;margin-top:0;overflow:hidden}
.cta__kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:var(--tr-3);text-transform:uppercase;opacity:.6;margin-bottom:28px}
.cta__headline{font-size:clamp(54px,12vw,200px);line-height:.88;letter-spacing:-.055em;font-weight:500;font-style:italic;max-width:1400px;margin:0 auto}
.cta__headline .thin{font-weight:300}
.cta__headline .fat{font-weight:900}
.cta__headline .outline{-webkit-text-stroke:1.5px var(--olive);color:transparent;font-weight:300}
.cta__headline button.as-link{display:inline-block;transition:color .4s var(--ease),transform .4s var(--ease);cursor:pointer}
.cta__headline button.as-link:hover{color:var(--white);transform:translateX(6px)}
.cta__headline button.as-link .arrow{display:inline-block;transition:transform .5s var(--ease)}
.cta__headline button.as-link:hover .arrow{transform:translateX(10px) rotate(-10deg)}
.cta__actions{display:flex;gap:14px;justify-content:center;margin-top:48px;flex-wrap:wrap}
.cta .btn{background:var(--olive);color:var(--black)}
.cta .btn:hover{background:var(--white);color:var(--black)}
.cta .btn--ghost{background:transparent;color:var(--olive);border-color:var(--olive)}
.cta .btn--ghost:hover{background:var(--olive);color:var(--black)}

/* =========== Footer =========== */
.footer{background:var(--ink);color:var(--olive);padding:var(--pad-y-tight) var(--pad) 30px;position:relative;overflow:hidden}
.footer::before{
  content:"";position:absolute;inset:0;
  pointer-events:none;z-index:0;opacity:.45;
  background:radial-gradient(900px 420px at 50% 115%, rgba(204,211,118,.13), transparent 65%);
}
.footer > *{position:relative;z-index:1}
.footer__grid{display:grid;grid-template-columns:2fr 1.2fr 1.2fr 1fr;gap:18px;padding-bottom:40px;border-bottom:1px solid rgba(204,211,118,.15)}
.fcell h4{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:400;letter-spacing:var(--tr-3);text-transform:uppercase;opacity:.5;margin-bottom:14px}
.fcell p,.fcell a,.fcell button.as-link{font-size:clamp(15px,1.6vw,19px);line-height:1.4;letter-spacing:-.018em;font-style:italic;font-weight:500;display:block;cursor:pointer;transition:color .3s var(--ease)}
.fcell a:hover,.fcell button.as-link:hover{color:var(--white)}
.fcell small{font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.5;font-style:normal;font-weight:400;letter-spacing:var(--tr-1);margin-top:8px;display:block}
.fcell .stack{display:flex;flex-direction:column;gap:8px}
.fcell .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.fcell .row a,.fcell .row button{font-family:'JetBrains Mono',monospace;font-style:normal;font-size:10.5px;letter-spacing:var(--tr-2);text-transform:uppercase;padding:8px 14px;border-radius:999px;border:1px solid rgba(204,211,118,.2);color:inherit;opacity:.85;font-weight:500;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease)}
.fcell .row a:hover,.fcell .row button:hover{background:var(--olive);color:var(--black);border-color:var(--olive);opacity:1}
@media (max-width:1000px){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr;gap:24px}
  .fcell p,.fcell a,.fcell button.as-link{font-size:16px}
  .footer__wmwrap{margin:36px auto}
  .footer__bot{flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
  .footer__bot .s{font-size:12px}
}

.footer__wmwrap{margin:48px auto;padding:0;display:flex;justify-content:center;align-items:center;pointer-events:none;user-select:none;position:relative;width:100%;overflow:hidden}
/* Footer watermark: olive logo at full opacity. */
.footer__wm{display:block;margin:0 auto;max-width:min(88%,1100px);width:100%;height:auto;opacity:1;filter:none;transform:none}
.footer__bot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid rgba(204,211,118,.1);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:var(--tr-2);text-transform:uppercase;opacity:.6}
.footer__bot .s{opacity:.9;font-style:italic;font-family:'Inter Tight',sans-serif;font-size:13px;text-transform:none;letter-spacing:-.01em;font-weight:500}

/* =========== Modals =========== */
.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.modal.is-open{opacity:1;pointer-events:auto}
.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.92);backdrop-filter:none;-webkit-backdrop-filter:none}
.modal__panel{position:relative;max-width:min(94vw,920px);width:100%;max-height:92vh;overflow:auto;background:var(--olive);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:32px clamp(24px,3vw,40px);transform:translateY(40px) scale(.97);transition:transform .7s var(--ease-out);box-shadow:var(--lift-3)}
/* All modal panels share the same scrollbar treatment as the page so the
   visual language is consistent. Dark panels (music) use overflow:hidden
   and scroll only their inner content, so they don't need their own variant. */
.modal__panel{scrollbar-width:thin;scrollbar-color:var(--black) var(--olive-2)}
.modal__panel::-webkit-scrollbar{width:10px;height:10px}
.modal__panel::-webkit-scrollbar-track{background:var(--olive-2)}
.modal__panel::-webkit-scrollbar-thumb{background:var(--black);border:2px solid var(--olive-2)}
.modal__panel::-webkit-scrollbar-thumb:hover{background:var(--ink)}
.modal.is-open .modal__panel{transform:none}
.modal__close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:transparent;display:grid;place-items:center;z-index:2;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);color:var(--black)}
.modal__close:hover{background:var(--black);color:var(--olive);border-color:var(--black);transform:rotate(90deg)}
.modal__close svg{width:16px;height:16px}
.modal__head{padding-right:44px;margin-bottom:28px}
/* =========== Floating music FAB =========== */
/* Appears when background music is playing. Click = pause + hide.
   To resume playback the user re-opens the headphones icon in nav. */
.music-fab{position:fixed;bottom:24px;left:24px;z-index:95;display:inline-flex;align-items:center;gap:12px;padding:10px 16px 10px 14px;background:var(--ink);color:var(--olive);border:1px solid var(--olive);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:var(--tr-3);text-transform:uppercase;cursor:pointer;opacity:0;transform:translateY(12px) scale(.94);transition:opacity .4s var(--ease),transform .4s var(--ease),background .25s var(--ease),color .25s var(--ease);box-shadow:var(--lift-2);pointer-events:none;max-width:min(360px,calc(100vw - 48px))}
.music-fab[hidden]{display:none!important}
.music-fab.is-visible{opacity:1;transform:none;pointer-events:auto}
.music-fab:hover{background:var(--olive);color:var(--ink);border-color:var(--olive)}
.music-fab__bars{display:flex;align-items:flex-end;gap:2px;height:14px;flex-shrink:0}
.music-fab__bars span{width:2px;background:currentColor;border-radius:1px;height:100%;animation:vizBar 1s ease-in-out infinite}
.music-fab__bars span:nth-child(2){animation-delay:.15s}
.music-fab__bars span:nth-child(3){animation-delay:.3s}
.music-fab__meta{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.2;text-align:left}
.music-fab__state{font-size:9px;letter-spacing:var(--tr-3);opacity:.7}
.music-fab__track{font-size:10.5px;letter-spacing:var(--tr-1);text-transform:none;font-family:'Inter Tight',sans-serif;font-style:italic;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.music-fab__icon{width:20px;height:20px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;flex-shrink:0;transition:transform .25s var(--ease)}
.music-fab__icon svg{width:10px;height:10px}
.music-fab:hover .music-fab__icon{transform:rotate(-8deg) scale(1.08)}
@media (max-width:640px){
  .music-fab{bottom:16px;left:16px;padding:8px 12px 8px 12px;gap:10px}
  .music-fab__track{max-width:140px;font-size:10px}
  .music-fab__state{font-size:8.5px;letter-spacing:var(--tr-3)}
}

/* =========== Floating go-to-top =========== */
.gotop{position:fixed;bottom:24px;right:24px;z-index:90;display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;background:var(--black);color:var(--olive);border:1px solid var(--black);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:var(--tr-2);text-transform:uppercase;cursor:pointer;opacity:0;transform:translateY(12px) scale(.96);transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s var(--ease),color .3s var(--ease);box-shadow:var(--lift-2)}
.gotop.is-visible{opacity:1;transform:translateY(0) scale(1)}
.gotop:hover{background:var(--olive);color:var(--black)}
.gotop__arrow{width:16px;height:16px;transition:transform .3s var(--ease)}
.gotop:hover .gotop__arrow{transform:translateY(-2px)}
@media (max-width:640px){.gotop{bottom:16px;right:16px;padding:12px;font-size:0}.gotop__label{display:none}.gotop__arrow{width:18px;height:18px}}

/* =========== Nav music button (headphones) =========== */
.nav__music{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--black);background:transparent;color:var(--black);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);flex-shrink:0}
.nav__music svg{width:18px;height:18px;display:block}
.nav__music:hover{background:var(--black);color:var(--olive);transform:translateY(-2px)}
.nav__music-indicator{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--olive);border:1px solid var(--black);opacity:0;transform:scale(.5);transition:opacity .3s,transform .3s}
.nav__music.is-playing .nav__music-indicator{opacity:1;transform:scale(1);animation:playingDot 1.2s ease-in-out infinite}

/* =========== Music modal (Focus Area) =========== */
#modal-music .modal__overlay{background:rgba(0,0,0,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
/* Music panel: fixed-height dark shell so the playlist can scroll internally
   instead of making the whole modal scroll. */
.modal__panel--music{
  background:linear-gradient(180deg,#0d0d0d 0%,#050505 100%);
  color:var(--olive);
  border-color:rgba(204,211,118,.18);
  max-width:min(96vw,1080px);
  width:100%;
  height:min(92vh,780px);
  padding:28px clamp(20px,2.6vw,36px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modal__panel--music .modal__close{border-color:rgba(204,211,118,.3);color:var(--olive);background:rgba(10,10,10,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:5}
.modal__panel--music .modal__close:hover{background:var(--olive);color:var(--ink);border-color:var(--olive)}
.modal__panel--music .modal__kicker{color:rgba(204,211,118,.6)}
.modal__panel--music .modal__title,.modal__panel--music .modal__title b{color:var(--olive)}
.modal__panel--music .modal__sub{color:rgba(242,238,228,.68);max-width:none;font-size:13.5px;line-height:1.55}
.modal__panel--music .modal__head{padding-right:56px;flex-shrink:0;margin-bottom:18px}

/* Spotify/Tidal-style deck: cover + metadata on the left, scrollable
   playlist on the right. Whole region fills remaining modal height. */
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:18px;
  flex:1 1 auto;
  min-height:0;

  display:flex;
  flex-direction:column;
  gap:18px;
  padding:22px;
  border:1px solid rgba(204,211,118,.14);
  border-radius:var(--r-lg);
  background:linear-gradient(155deg,#141414 0%,#070707 55%,#0a0a0a 100%);
  position:relative;
  overflow:hidden;
  min-height:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 20px 50px -30px rgba(0,0,0,.8);
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(640px 320px at 85% -10%,rgba(204,211,118,.1),transparent 60%);
  pointer-events:none;

/* Top: big square cover on top, now-playing below */
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-height:320px;
  border-radius:var(--r-md);
  background:radial-gradient(circle at 35% 30%,#1a1a1a 0%,#000 85%);
  border:1px solid rgba(204,211,118,.18);
  display:grid;place-items:center;overflow:hidden;
  box-shadow:inset 0 0 42px rgba(0,0,0,.9),0 24px 60px -20px rgba(0,0,0,.8);


/* Progress - expands on hover like Spotify */

/* Transport: prev / play (filled) / next on the left, volume on the right */


/* Playlist column - fixed-height scroll region */
  display:flex;
  flex-direction:column;
  min-height:0;
  border:1px solid rgba(204,211,118,.12);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#0a0a0a 0%,#070707 100%);
  padding:16px 14px 12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:6px 6px 6px 2px;
  flex:1 1 0;
  min-height:0;
  scrollbar-width:thin;
  scrollbar-color:rgba(204,211,118,.3) transparent;

/* Tablet & below: stack - cover + now-playing sit as a compact header row,
   playlist takes the remaining height so it keeps scrolling internally. */
@media (max-width:900px){
  .modal__panel--music{max-width:min(96vw,720px);height:min(94vh,780px)}
}

/* Mobile */
@media (max-width:520px){
  .modal__panel--music{padding:22px 14px 18px;height:min(96vh,780px)}
  .modal__panel--music .modal__head{margin-bottom:14px}
}

/* Tiny phones */
@media (max-width:380px){
}
/* =========== Mobile inspection pass =========== */
@media (max-width:760px){
  /* Hero bot row stacks cleanly on small screens */
  /* Process: keep the giant numeral but scale it with viewport */
  .process__step::before{font-size:54px;right:14px;top:8px}
  .process__step{padding:28px 20px 26px}
  .process__step h4{font-size:24px}
  /* Top-board on mobile: tighter rows */
}
@media (max-width:520px){
  /* Slogan on very small phones */
  .hero__slogan{font-size:clamp(50px,15vw,82px);line-height:.95}
  /* Giant process numeral shrinks so it never runs into copy */
  .process__step::before{font-size:44px;opacity:.7}
  .process__step{padding:24px 18px}
  .process__step h4{font-size:22px}
  .process__step p{font-size:12.5px}
  /* Brief modal: tight padding */
  /* Hero bot row: keep corner line aligned */
  .hero__scope{font-size:14px}
  /* Go-to-top: full-circle on tiny screens already; ensure it sits above keyboard safely */
  .gotop{bottom:14px;right:14px}
  /* Top-board leaderboard row text smaller */
}
@media (max-width:400px){
  .hero__slogan{font-size:clamp(46px,16vw,70px);line-height:.96}
  .process__step::before{display:none}
  .slide__name{font-size:clamp(26px,8vw,40px)}
  .modal__title{font-size:clamp(24px,8vw,36px)}
  .fcell p,.fcell a,.fcell button.as-link{font-size:15px}
}
@media (max-width:640px){
  .modal{padding:12px}
  .modal__panel{padding:24px 18px;border-radius:var(--r-md);max-height:94vh}
  .modal__close{top:12px;right:12px;width:36px;height:36px}
  .modal__head{margin-bottom:20px}
  .modal__title{font-size:clamp(26px,8vw,40px)}
  .modal__sub{font-size:13px}
  .form{gap:22px}
  .form__section{gap:10px}
  .form__grid,.form__grid--2{grid-template-columns:1fr!important;gap:8px}
  .checks{grid-template-columns:1fr;gap:6px}
  .field input,.field select,.field textarea{padding:12px 14px;font-size:13px}
  .check{padding:10px 12px;font-size:10px}
  .form__submit{flex-direction:column;align-items:stretch}
  .form__submit .btn{justify-content:center}
  .loc{grid-template-columns:1fr;gap:18px}
  .loc__map{min-height:240px}
}
.modal__kicker{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;letter-spacing:var(--tr-3);text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.modal__title{font-size:clamp(28px,5vw,48px);line-height:.95;letter-spacing:-.04em;font-style:italic;font-weight:500}
.modal__title b{font-weight:900}
.modal__sub{margin-top:12px;font-size:15.5px;color:rgba(0,0,0,.72);max-width:56ch;line-height:1.6}

.form{display:flex;flex-direction:column;gap:28px}
.form__section{display:flex;flex-direction:column;gap:16px}
.form__section-title{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:var(--tr-2);text-transform:uppercase;color:rgba(0,0,0,.72);display:flex;align-items:center;gap:12px}
.form__section-title::before{content:"";width:20px;height:1px;background:var(--line-2)}
.form__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.form__grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:600px){.form__grid,.form__grid--2{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:var(--tr-2);text-transform:uppercase;color:rgba(0,0,0,.7)}
/* Dark fields + olive placeholder. Email / phone / textarea get a faint
   lightbyte.agency watermark layered via background-image. */
.field input,.field select,.field textarea{padding:14px 16px;border-radius:var(--r-sm);background:var(--ink);border:1px solid rgba(204,211,118,.2);color:var(--olive);outline:none;transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);font-size:15px;font-family:inherit}
.field input::placeholder,.field textarea::placeholder{color:var(--olive);opacity:.55;font-style:italic}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--olive);background:var(--ink-2);box-shadow:0 0 0 3px rgba(204,211,118,.12)}
/* Clean text/textarea fields - no decorative backgrounds. */
.field input,.field textarea{background-image:none}
/* "www.lightbyte.agency" mini-caption aligned under the Kontakt grid */
.form__urlhint{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:var(--tr-3);text-transform:uppercase;color:var(--olive);opacity:.45;margin-top:-6px;display:flex;align-items:center;gap:8px}
.form__urlhint::before{content:"";width:14px;height:14px;border-radius:50%;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 540 120'><path fill='%23ccd376' d='M43.48,92.54h5.71c.32,0,.45-1.25.55-1.79l12.25-61.59h-5.93c-.24,0-.2.12-.25.34l-12.49,62.68c-.05.24-.1.35.15.35h0Z'/></svg>") center/contain no-repeat}
.field textarea{min-height:110px;resize:vertical;line-height:1.55}
.field select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1L6 6L11 1' stroke='%23ccd376' stroke-width='1.5' fill='none'/></svg>")!important;background-repeat:no-repeat;background-position:right 18px center;padding-right:38px;letter-spacing:-.005em;font-size:15px;font-family:inherit}
.field select option{background:var(--ink);color:var(--olive);font-size:15px}

.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px}
.check{position:relative;cursor:pointer;padding:14px 16px;border-radius:var(--r-sm);background:var(--ink);border:1px solid rgba(204,211,118,.2);font-size:14.5px;font-weight:500;line-height:1.3;display:flex;align-items:center;gap:12px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform 160ms var(--ease-out);color:var(--olive);letter-spacing:-.01em}
.check input{position:absolute;opacity:0;pointer-events:none}
.check__dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(204,211,118,.4);flex-shrink:0;transition:background .3s var(--ease),border-color .3s var(--ease);position:relative}
.check:hover{background:var(--ink-2);border-color:rgba(204,211,118,.4)}
.check.is-on{background:var(--olive);color:var(--ink);border-color:var(--olive)}
.check.is-on .check__dot{background:var(--ink);border-color:var(--ink)}
.check.is-on .check__dot::after{content:"";position:absolute;inset:3px;background:var(--olive);border-radius:50%}

.form__submit{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:20px;border-top:1px solid var(--line)}
.form__note{font-size:12px;color:var(--muted);max-width:420px;line-height:1.55}
.form__status{display:none;padding:28px;background:var(--black);color:var(--olive);border-radius:var(--r-md);font-style:italic;font-size:18px;line-height:1.5}
.form__status.is-visible{display:block}
.form__status b{font-weight:900;display:block;font-size:22px;margin-bottom:8px}
.form__submit .btn.is-loading{opacity:.6;pointer-events:none}

.loc{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
@media (max-width:760px){.loc{grid-template-columns:1fr}}
.loc__info{display:flex;flex-direction:column;gap:16px}
.loc__logo{margin-bottom:6px}
.loc__addr{font-size:clamp(17px,1.8vw,22px);line-height:1.4;letter-spacing:-.015em;font-style:italic}
.loc__meta{display:flex;flex-direction:column;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);padding-top:14px;border-top:1px solid var(--line)}
.loc__meta strong{font-weight:500;letter-spacing:var(--tr-3);text-transform:uppercase;font-size:10px}
.loc__map{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:300px;border:1px solid var(--line-2);background:var(--olive-soft)}
.loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.2) contrast(1.05)}

/* =========== Language switch animation =========== */
/* A soft opacity + slight lift during swaps. Driven by JS adding .lang-switching
   to body for ~180ms while it mutates text content. */
[data-i18n],[data-lang-content] > *,[data-i18n-placeholder]{
  transition:opacity .32s var(--ease-out),transform .32s var(--ease-out),filter .32s var(--ease-out);
}
body.lang-switching [data-i18n],
body.lang-switching [data-lang-content] > *:not([hidden]){
  opacity:.18;transform:translateY(3px);filter:blur(.6px);
  transition:opacity .14s var(--ease),transform .14s var(--ease),filter .14s var(--ease);
}

/* =========== Legal modals (Privacy / Cookies) =========== */
.modal__panel--legal{max-width:min(94vw,760px)}
.legal{font-size:14px;line-height:1.65;color:var(--black);max-width:100%}
.legal p{margin-bottom:12px}
.legal h3{font-family:'Inter Tight',sans-serif;font-style:italic;font-size:18px;font-weight:700;margin:22px 0 10px;letter-spacing:-.02em;color:var(--black)}
.legal ul,.legal ol{margin:8px 0 16px;padding-left:22px}
.legal li{margin-bottom:6px}
.legal strong{font-weight:700}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--white)}
.legal .co-info{padding:14px 16px;background:var(--olive-soft);border:1px solid var(--line);border-radius:var(--r-sm);margin:12px 0 18px;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.7;letter-spacing:0}
.legal .co-info strong{font-weight:500}
.legal table{width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:13px;border:1px solid var(--line-2);background:var(--olive-soft)}
.legal thead th{background:var(--black);color:var(--olive);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:var(--tr-2);text-transform:uppercase;font-weight:500}
.legal th,.legal td{border:1px solid var(--line-2);padding:10px 12px;text-align:left;vertical-align:top}
.legal td:first-child{font-weight:600;width:32%;white-space:nowrap}
.legal .updated{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:var(--tr-1);text-transform:uppercase}
@media (max-width:560px){
  .legal table,.legal thead,.legal tbody,.legal tr,.legal th,.legal td{display:block;width:100%}
  .legal thead{display:none}
  .legal td{border:none;border-bottom:1px solid var(--line-2);padding:8px 0}
  .legal td:first-child{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:var(--tr-2);text-transform:uppercase;padding-bottom:2px;border:none}
}

/* ============================================================================
   WOW LAYER - light, grain, beams, cinema mode, kinetic typography
   Pure visual polish; all pointer-events:none / additive so removing any block
   below is a no-op for the rest of the site.
   ============================================================================ */

/* --- 1. (removed: cursor light/blur) ------------------------------------ */

/* --- 2. Hero wordmark light-sweep ---------------------------------------- */
/* Periodic olive streak across only "you shine." - the second line of the
   slogan, which carries the brand promise. The first line stays solid black. */
.hero__slogan .line:nth-of-type(2) .thin,
.hero__slogan .line:nth-of-type(2) .fat{
  background-image:linear-gradient(115deg,
    #000 0%, #000 42%,
    rgba(220,223,144,.95) 49%,
    #ffffff 50%,
    rgba(220,223,144,.95) 51%,
    #000 58%, #000 100%);
  background-size:240% 100%;
  background-position:0% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:lightSweep 7s cubic-bezier(.55,0,.45,1) 2.8s infinite;
}
@keyframes lightSweep{
  0%, 18%   { background-position:0% 0; }
  46%, 100% { background-position:110% 0; }
}
@media (prefers-reduced-motion: reduce){
  .hero__slogan .line:nth-of-type(2) .thin,
  .hero__slogan .line:nth-of-type(2) .fat{
    animation:none;-webkit-text-fill-color:#000;background:none;
  }
}

/* --- 3. Grain + vignette ------------------------------------------------- */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:9995;
  opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
}
.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:9994;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.2) 100%);
}

/* --- 4. Slide tilt prep (JS sets the rotateX/rotateY via gsap) ----------- */

/* --- 5. Preloader → hero flash ------------------------------------------- */
.hero__flash{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(0);
  width:220vmax;height:220vmax;border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(255,255,255,.7) 0%,
    rgba(220,223,144,.42) 12%,
    rgba(204,211,118,.12) 32%,
    rgba(204,211,118,0)   55%);
  pointer-events:none;z-index:1;opacity:0;
  mix-blend-mode:screen;will-change:transform,opacity;
}
.hero__flash.is-firing{animation:heroFlash 1.6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes heroFlash{
  0%   { transform:translate(-50%,-50%) scale(0);    opacity:0; }
  18%  { opacity:1; }
  100% { transform:translate(-50%,-50%) scale(1);    opacity:0; }
}

/* --- 6. Volumetric beams (hero) ------------------------------------------ */
.hero__beams{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  z-index:0;mix-blend-mode:soft-light;opacity:.85;
}
.hero__beams::before,
.hero__beams::after{
  content:"";position:absolute;
  background:linear-gradient(180deg,
    rgba(255,255,255,.25) 0%,
    rgba(255,255,255,.06) 35%,
    rgba(255,255,255,0)   72%);
  width:160px;height:140vh;left:32%;top:-20vh;
  transform-origin:top center;transform:rotate(-14deg);
  filter:blur(34px);
  animation:beamDrift 22s ease-in-out infinite alternate;
}
.hero__beams::after{
  left:64%;width:220px;
  transform:rotate(9deg);
  animation-duration:28s;animation-delay:-9s;
  opacity:.75;
}
@keyframes beamDrift{
  0%   { transform:rotate(-14deg) translateX(-40px); }
  100% { transform:rotate(-6deg)  translateX(60px);  }
}

/* CTA section beams - olive-on-dark variant. Re-uses the .hero__beams trick
   via a sibling element. */
.cta{position:relative}
.cta::before{
  content:"";position:absolute;inset:-20% -10% -10%;
  pointer-events:none;z-index:0;mix-blend-mode:screen;opacity:.55;
  background:
    radial-gradient(900px 380px at 18% 0%,  rgba(204,211,118,.16), transparent 60%),
    radial-gradient(720px 320px at 82% 100%, rgba(204,211,118,.12), transparent 60%);
}
.cta > *{position:relative;z-index:1}

/* --- 7. (removed: cinema mode) ------------------------------------------ */

/* --- 8. Hero canvas field ------------------------------------------------ */
.hero__field{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.7;
}
@media (prefers-reduced-motion: reduce){
  .hero__field,.hero__beams,.hero__flash{display:none}
}

/* --- 10. (removed: scroll-driven blur) ---------------------------------- */

/* --- 9. Section title decode-on-reveal ----------------------------------- */
/* Scrambled chars get dimmed + slightly italicized regardless of parent so
   the eye perceives them as "loading" - same DNA as the preloader phrase. */
.t-scramble{
  color:inherit;opacity:.42;font-weight:inherit;font-style:inherit;
  font-family:'JetBrains Mono',monospace;letter-spacing:-.02em;
  display:inline-block;min-width:.55em;text-align:center;
}

/* ==========================================================================
   WORK - "realizacje". Paper band that breaks the olive wall, sticky CRT
   preview on the left, monospace index on the right. Switching a row fires a
   short chromatic-split glitch: it is state-transition feedback, not decor.
   ========================================================================== */
.work{
  background:var(--paper);
  color:var(--ink);
  border-top:1px solid var(--black);
  border-bottom:1px solid var(--black);
  position:relative;
  isolation:isolate;
}
/* Faint engineering grid, keeps the paper from reading as an empty gap. */
.work::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--paper-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--paper-line) 1px,transparent 1px);
  background-size:64px 64px;
  opacity:.5;
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 78%);
}
.work > *{position:relative;z-index:1}
.work .sec__head{border-bottom-color:var(--paper-line)}
.work .idx{color:var(--ink)}

.work__grid{
  display:grid;
  align-items:stretch;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4vw,64px);
}

/* ---- Stage: sticky monitor ------------------------------------------- */
.work__stage{display:flex;flex-direction:column;justify-content:center;min-height:0}
.work__screen{
  flex:none;
  /* Double bezel: outer tray in the paper tone, inner core in ink, with
     concentric radii, so the monitor reads as hardware sitting in a mount
     rather than a rectangle on the page. */
  padding:6px;
  border:1px solid var(--black);
  border-radius:calc(var(--r-md) + 6px);
  background:var(--paper-2);
  box-shadow:var(--lift-2),inset 0 1px 0 rgba(255,255,255,.55);
}
.work__bar{border-radius:var(--r-md) var(--r-md) 0 0}
.work__view{border-radius:0 0 var(--r-md) var(--r-md)}
/* Address bar shows the real domain. Real information, not fake telemetry. */
.work__bar{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  background:var(--ink-2);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.work__dots{display:flex;gap:5px;flex:none}
.work__dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}
.work__url{
  flex:1;min-width:0;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:var(--tr-1);
  color:var(--olive);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.work__url::before{content:"https://";opacity:.42}
.work__caret{
  flex:none;width:7px;height:13px;background:var(--olive);
  animation:workCaret 1.05s steps(2) infinite;
}
@keyframes workCaret{to{opacity:0}}

.work__view{
  position:relative;
  aspect-ratio:16/9;
  background:var(--ink);
  overflow:hidden;
}
.work__view img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;
  transition:opacity .34s var(--ease-out);
  will-change:opacity;
}
.work__view img.is-on{opacity:1}

/* Pixel transition. Each cell carries its own slice of the OUTGOING shot and
   cuts away at its own moment, so the previous frame breaks into blocks and
   the new one shows through the gaps. An earlier version filled the cells
   with flat ink, which made the whole panel go black before dissolving: a
   blackout, not a pixel transition.

   Slice offsets and delays are assigned once at startup, so switching costs
   only opacity on cells that already exist. The grid is display:none between
   transitions and therefore out of the compositing tree while idle. */
.work__px{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  display:none;
  grid-template-columns:repeat(var(--px-cols,14),1fr);
  grid-template-rows:repeat(var(--px-rows,8),1fr);
}
.work__view.is-glitch .work__px,
.work__thumb.is-tear .work__px{display:grid}
.work__px i{
  display:block;
  background-image:var(--prev,none);
  background-size:calc(var(--px-cols,14) * 100%) calc(var(--px-rows,8) * 100%);
  background-position:var(--bx,0%) var(--by,0%);
  animation:pxCut .05s steps(1,end) both;
  animation-delay:var(--d,0ms);
}
/* A few cells blink the brand olive on their way out, so the break-up reads
   as a signal rather than a plain wipe. */
.work__px i:nth-child(11n+5){animation-name:pxCutHot;animation-duration:.2s}
@keyframes pxCut{
  0%  {opacity:1}
  99% {opacity:1}
  100%{opacity:0}
}
@keyframes pxCutHot{
  0%  {opacity:1;background-color:transparent}
  60% {opacity:1;background-color:var(--olive);background-image:none}
  100%{opacity:0;background-color:var(--olive);background-image:none}
}

/* CRT scanlines + a slow sweep. Overlay only, never on a scrolling container. */
.work__scan{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,rgba(0,0,0,.26) 0 1px,transparent 1px 3px);
  opacity:.34;mix-blend-mode:multiply;
}
.work__scan::after{
  content:"";position:absolute;left:0;right:0;height:22%;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.13),transparent);
  animation:workSweep 5.5s linear infinite;
}
@keyframes workSweep{from{top:-25%}to{top:105%}}

/* ---- Index list ------------------------------------------------------- */
.work__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--paper-line)}
.work__row{border-bottom:1px solid var(--paper-line)}
.work__link{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(12px,1.6vw,22px);
  padding:clamp(15px,1.9vw,22px) 4px;
  color:var(--ink);
  position:relative;
  transition:padding-left .42s var(--ease-out),color .3s var(--ease);
}
/* Olive wash slides in from the left on the active row. */
.work__link::before{
  content:"";position:absolute;left:-14px;right:-14px;top:0;bottom:0;z-index:-1;
  background:var(--olive);
  transform:scaleX(0);transform-origin:left;
  transition:transform .46s var(--ease-out);
}
.work__row.is-on .work__link::before{transform:scaleX(1)}
.work__row.is-on .work__link{padding-left:16px}

.work__n{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:var(--tr-2);
  color:var(--muted);
  transition:color .3s var(--ease);
}
.work__row.is-on .work__n{color:var(--ink)}
.work__name{
  font-size:clamp(19px,2.5vw,31px);
  line-height:1.12;letter-spacing:-.028em;font-weight:500;
  min-width:0;
}
.work__name b{font-weight:900;font-style:italic}
.work__cat{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:var(--tr-2);text-transform:uppercase;
  color:var(--muted);margin-top:5px;
  transition:color .3s var(--ease);
}
.work__row.is-on .work__cat{color:rgba(0,0,0,.66)}
.work__go{
  flex:none;
  font-family:'JetBrains Mono',monospace;font-size:15px;
  opacity:0;transform:translate3d(-8px,0,0);
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out);
}
.work__row.is-on .work__go{opacity:1;transform:translate3d(0,0,0)}

/* Thumbnail lives in the row on touch layouts only. */
.work__thumb{display:none}

/* Scroll reveal. Scoped to a class JS adds, so rows stay visible without JS. */
.work--reveal .work__row{opacity:0;transform:translate3d(0,18px,0);filter:blur(5px)}
.work--reveal .work__row.is-in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .6s var(--ease-out) var(--d,0ms),transform .6s var(--ease-out) var(--d,0ms),
             filter .6s var(--ease-out) var(--d,0ms);
}

/* ---- Touch / narrow: drop the sticky monitor, give every row its shot --- */
@media (max-width:900px){
  .work__grid{grid-template-columns:1fr;gap:26px}
  .work__stage{display:none}
  .work__list{border-top:none}
  .work__row{border-bottom:none;margin-bottom:22px}
  .work__link{
    grid-template-columns:auto 1fr auto;
    padding:14px 0 0;
    grid-template-areas:"n name go" "thumb thumb thumb";
  }
  .work__n{grid-area:n}
  .work__name{grid-area:name}
  .work__go{grid-area:go;opacity:1;transform:none}
  .work__link::before{display:none}
  .work__row.is-on .work__link{padding-left:0}
  .work__thumb{
    display:block;grid-area:thumb;
    margin-top:14px;
    border:1px solid var(--black);border-radius:var(--r-sm);
    overflow:hidden;background:var(--ink);
    aspect-ratio:16/10;
  }
  .work__thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
}
@media (max-width:520px){
  .work__name{font-size:20px}
  .work__cat{font-size:10.5px;letter-spacing:var(--tr-2)}
}

/* ---- Reduced motion: keep the swap, drop every moving part -------------- */
@media (prefers-reduced-motion: reduce){
  .work__view.is-glitch .work__px,
  .work__thumb.is-tear .work__px{display:none}
  .work__scan::after{animation:none;display:none}
  .work__caret{animation:none}
  .work__view img{transition:none}
  .work--reveal .work__row{opacity:1;transform:none;filter:none}
  .work__link,.work__link::before,.work__go{transition:none}
}

/* ==========================================================================
   FOCUS PLAYER - one column, one toggle, list underneath. Everything that was
   ornament (spinning disc, split play/pause, sidebar chrome) is gone; every
   control that did something is still here.
   ========================================================================== */
.music{display:flex;flex-direction:column;gap:16px;flex:1;min-height:0;margin-top:6px}
.music__now{min-height:56px}
.music__track{font-size:clamp(20px,2.6vw,30px);line-height:1.15;letter-spacing:-.03em;font-weight:500;color:var(--olive)}
.music__artist{font-size:11px;letter-spacing:var(--tr-2);text-transform:uppercase;color:rgba(204,211,118,.6);margin-top:6px}

.music__progress{position:relative;height:3px;background:rgba(204,211,118,.2);border-radius:2px;cursor:pointer;touch-action:none}
.music__progress:focus-visible{outline:2px solid var(--olive);outline-offset:6px}
.music__progress-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--olive);border-radius:2px}
.music__progress-handle{position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;background:var(--olive);transform:translate(-50%,-50%);opacity:0;transition:opacity .25s var(--ease)}
.music__progress:hover .music__progress-handle,
.music__progress:focus-visible .music__progress-handle{opacity:1}
.music__times{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:var(--tr-1);color:rgba(204,211,118,.55);margin-top:-8px}

.music__transport{display:flex;align-items:center;gap:10px}
.music__btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--olive);border:1px solid rgba(204,211,118,.26);background:none;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.music__btn svg{width:17px;height:17px}
.music__btn:hover{background:rgba(204,211,118,.14)}
.music__btn:active{transform:scale(.94)}
.music__btn--toggle{width:54px;height:54px;background:var(--olive);color:var(--ink);border-color:var(--olive)}
.music__btn--toggle svg{width:20px;height:20px}
.music__btn--toggle:hover{background:#dbe28a}
/* One button, two icons. The class decides which one is showing. */
.music__ico--pause{display:none}
.music__btn--toggle.is-playing .music__ico--play{display:none}
.music__btn--toggle.is-playing .music__ico--pause{display:block}

.music__volume{display:flex;align-items:center;gap:8px;margin-left:auto;color:rgba(204,211,118,.7)}
.music__volume svg{width:16px;height:16px;flex:none}
.music__volume input{width:88px;accent-color:#ccd376;background:none}

.music__list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid rgba(204,211,118,.16);padding-top:4px}
.music__list::-webkit-scrollbar{width:6px}
.music__list::-webkit-scrollbar-thumb{background:rgba(204,211,118,.3);border-radius:3px}
.music__item{display:grid;grid-template-columns:26px 14px 1fr auto;align-items:center;gap:12px;width:100%;padding:11px 6px;text-align:left;color:rgba(204,211,118,.78);border-bottom:1px solid rgba(204,211,118,.09);background:none;transition:color .25s var(--ease),background .25s var(--ease)}
.music__item:hover{background:rgba(204,211,118,.07);color:var(--olive)}
.music__item.is-active{color:var(--olive)}
.music__item-n{font-family:'JetBrains Mono',monospace;font-size:10.5px;opacity:.5}
.music__item.is-active .music__item-n{opacity:0}
.music__item-body{min-width:0}
.music__item-title{font-size:14px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music__item-artist{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:var(--tr-1);opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.music__item-meta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:var(--tr-1);opacity:.45;flex:none}

/* Equaliser marks the playing row. Only the active row animates. */
.music__item-playing{display:flex;align-items:flex-end;gap:2px;height:12px;opacity:0}
.music__item-playing span{width:2px;height:100%;background:var(--olive);transform-origin:bottom;transform:scaleY(.3)}
.music__item.is-active .music__item-playing{opacity:1}
.music__item.is-active .music__item-playing span{animation:musicBar .9s var(--ease) infinite alternate}
.music__item.is-active .music__item-playing span:nth-child(2){animation-delay:.3s}
.music__item.is-active .music__item-playing span:nth-child(3){animation-delay:.15s}
@keyframes musicBar{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

@media (max-width:640px){
  .music__volume{display:none}
  .music__item{grid-template-columns:22px 14px 1fr;gap:10px}
  .music__item-meta{display:none}
}
@media (prefers-reduced-motion: reduce){
  .music__item.is-active .music__item-playing span{animation:none;transform:scaleY(.7)}
}

/* ==========================================================================
   MOTION POLISH
   1. Press feedback. The page had hover states almost everywhere and press
      states almost nowhere, so nothing confirmed a click had landed.
   2. Hover transforms gated to real pointers, so taps do not leave a phone
      stuck in a hover state.
   3. UI timings pulled under 300ms. Anything slower reads as lag.
   ========================================================================== */
.btn,.nav__cta,.lang button,.modal__close,.menu__close,.nav__burger,
.work__link,.music__item,.footer a,.as-link{
  transition:transform 160ms var(--ease-out),background .26s var(--ease),
             color .26s var(--ease),border-color .26s var(--ease),opacity .26s var(--ease);
}
.btn:active,.nav__cta:active,.lang button:active,.modal__close:active,
.menu__close:active,.nav__burger:active,.music__item:active,.as-link:active{
  transform:scale(.97);
}
/* The row is wide, so it takes a smaller squeeze than a compact button. */
.work__link:active{transform:scale(.995)}

/* Hover-only effects need a real pointer. */
@media (hover:none){
  .btn:hover,.nav__cta:hover,.tuner__cta:hover,.work__link:hover{transform:none}
}

/* Modals were opening over .7s. Half a second is already the ceiling. */
.modal__panel{transition:transform .42s var(--ease-out),opacity .3s var(--ease)}
/* The cursor is on screen constantly; slow morphs on it read as lag. */
.cursor{transition:width .22s var(--ease),height .22s var(--ease),
        background .24s var(--ease),border-color .24s var(--ease)}

@media (prefers-reduced-motion: reduce){
  .btn:active,.nav__cta:active,.lang button:active,.modal__close:active,
  .menu__close:active,.nav__burger:active,.music__item:active,
  .as-link:active,.work__link:active{transform:none}
}

/* ==========================================================================
   TUNER - "co robimy" as a pinned broadcast tuner. Scrolling retunes the
   channel; each retune fires a TYPOGRAPHIC glitch (character scramble, shear,
   static). Deliberately a different mechanic from the Work section, which
   tears a photographic signal. Same family, different instrument.

   Default styling below is the plain stacked list. The pinned behaviour is
   opt-in via .is-pinned, added by JS only on a real pointer, wide viewport
   and no reduced-motion preference. No JS means a readable list, not a blank.
   ========================================================================== */
.tuner{position:relative;padding:0 0 var(--pad-y-tight)}
.tuner.is-pinned{padding:0}
.tuner__stage{position:relative}
.tuner__channels{position:relative}
.tuner__channel{padding:34px var(--pad);border-top:1px solid rgba(204,211,118,.16)}
.tuner__n{font-size:11px;letter-spacing:var(--tr-2);color:rgba(204,211,118,.55)}
.tuner__name{
  position:relative;
  font-size:clamp(38px,7.4vw,132px);line-height:.9;letter-spacing:-.05em;
  font-weight:500;font-style:italic;margin:10px 0 0;
  padding-bottom:.08em;
}
.tuner__name .thin{font-weight:300}
.tuner__name b{font-weight:900}
.tuner__desc{font-size:clamp(15px,1.15vw,18px);line-height:1.6;opacity:.82;max-width:54ch;margin-top:16px}
.tuner__list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0;max-width:64ch}
.tuner__list li{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;
  padding:13px 0;border-bottom:1px dashed rgba(204,211,118,.2);
  font-size:clamp(15px,1.3vw,20px);line-height:1.35;letter-spacing:-.01em;
}
.tuner__li-n{font-size:clamp(10px,.85vw,12px);letter-spacing:var(--tr-1);opacity:.62;min-width:2.2em}
.tuner__cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:24px;
  align-self:flex-start;width:fit-content;
  padding:11px 20px;border-radius:999px;
  border:1px solid rgba(204,211,118,.36);color:var(--olive);background:none;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:var(--tr-2);text-transform:uppercase;
  transition:transform 160ms var(--ease-out),background .26s var(--ease),color .26s var(--ease);
}
.tuner__cta:hover{background:var(--olive);color:var(--ink)}
.tuner__cta:active{transform:scale(.97)}
.tuner__cta-arrow{
  display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:rgba(204,211,118,.16);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.tuner__cta-arrow svg{width:12px;height:12px}
.tuner__cta:hover .tuner__cta-arrow{background:var(--ink);color:var(--olive);transform:translate(2px,-2px)}
.tuner__scale,.tuner__meter,.tuner__static,.tuner__bands{display:none}

/* ---- Pinned mode ------------------------------------------------------- */
.tuner.is-pinned .tuner__stage{
  height:100dvh;position:relative;overflow:hidden;
  display:grid;align-items:center;
  /* The pinned stage is a closed box: nothing inside affects layout or paint
     outside it, so let the browser stop checking. Safe here because none of
     its descendants are position:fixed. */
  contain:layout paint;
}
.tuner.is-pinned .tuner__channels{position:absolute;inset:0}
.tuner.is-pinned .tuner__channel{
  position:absolute;inset:0;border-top:none;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(72px,9vw,150px) 0 var(--pad);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease-out);
}
.tuner.is-pinned .tuner__channel.is-on{opacity:1;visibility:visible;pointer-events:auto}
.tuner.is-pinned .tuner__desc{margin-top:22px;font-size:clamp(16px,1.25vw,20px);opacity:.85}
.tuner.is-pinned .tuner__list{margin-top:30px;max-width:70ch}
.tuner.is-pinned .tuner__list li{font-size:clamp(16px,1.45vw,23px);padding:15px 0}
.tuner.is-pinned .tuner__li-n{font-size:clamp(11px,.95vw,13px);opacity:.7}

/* Scramble overlay. Text comes from --sc, set by JS, so the real text nodes
   under data-i18n are never rewritten and the language switcher stays boss. */
.tuner__name::after{
  content:var(--sc,"");
  position:absolute;left:0;top:0;right:0;
  font-style:italic;font-weight:900;
  color:var(--olive);
  opacity:0;pointer-events:none;
  white-space:pre-wrap;
}
.tuner__channel.is-glitch .tuner__name::after{opacity:.92}
.tuner__channel.is-glitch .tuner__name > *{opacity:0}
/* Bad tracking: the whole channel shears for the length of the retune. */
.tuner__channel.is-glitch{animation:tunerShear .19s steps(3) 1}
@keyframes tunerShear{
  0%  {transform:translate3d(-9px,0,0) skewX(-1.6deg)}
  40% {transform:translate3d(7px,0,0)  skewX(1.1deg)}
  75% {transform:translate3d(-3px,0,0) skewX(-.5deg)}
  100%{transform:none}
}

/* Static + displacement bands, visible only mid-retune. */
.tuner.is-pinned .tuner__static,
.tuner.is-pinned .tuner__bands{display:none;position:absolute;inset:0;pointer-events:none;opacity:0}
.tuner.is-pinned.is-retuning .tuner__static,
.tuner.is-pinned.is-retuning .tuner__bands{display:block}
.tuner__static{
  z-index:4;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.09) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen;
}
.tuner__bands{
  z-index:5;
  background:linear-gradient(to bottom,transparent 18%,rgba(204,211,118,.16) 18.6%,transparent 19.4%,
             transparent 54%,rgba(255,255,255,.14) 54.6%,transparent 55.6%,
             transparent 79%,rgba(204,211,118,.12) 79.5%,transparent 80.4%);
}
.tuner.is-retuning .tuner__static{animation:tunerStatic .19s steps(4) 1}
.tuner.is-retuning .tuner__bands{animation:tunerBands .19s steps(4) 1}
@keyframes tunerStatic{0%{opacity:.7}60%{opacity:.35}100%{opacity:0}}
@keyframes tunerBands{
  0%  {opacity:.9;transform:translate3d(0,-6%,0)}
  50% {opacity:.55;transform:translate3d(0,4%,0)}
  100%{opacity:0;transform:none}
}

/* Channel scale, right edge. */
.tuner.is-pinned .tuner__scale{
  display:flex;flex-direction:column;gap:2px;
  position:absolute;right:clamp(16px,2.4vw,34px);top:50%;transform:translateY(-50%);
  z-index:6;
}
.tuner__tick{
  display:grid;grid-template-columns:22px 26px;align-items:center;gap:8px;
  padding:5px 0;background:none;border:none;color:rgba(204,211,118,.4);
  font-size:10px;letter-spacing:var(--tr-1);
  transition:color .28s var(--ease);
}
.tuner__tick::after{content:"";height:1px;background:currentColor;width:100%;transition:width .28s var(--ease)}
.tuner__tick:hover{color:rgba(204,211,118,.8)}
.tuner__tick.is-on{color:var(--olive)}
.tuner__tick.is-on::after{width:26px;height:2px}

.tuner.is-pinned .tuner__meter{
  display:block;position:absolute;left:var(--pad);right:var(--pad);bottom:26px;
  height:1px;background:rgba(204,211,118,.18);z-index:6;
}
.tuner__meter-fill{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--olive);will-change:transform}

@media (max-width:520px){
  .tuner__channel{padding:26px var(--pad)}
  .tuner__list li{grid-template-columns:26px 1fr;gap:10px;font-size:12.5px}
}
@media (prefers-reduced-motion: reduce){
  .tuner__channel.is-glitch{animation:none}
  .tuner.is-retuning .tuner__static,.tuner.is-retuning .tuner__bands{animation:none}
}

/* Touch layouts have no sticky preview to glitch, so the thumbnails carry the
   signal tear themselves as they scroll in. Same monochrome mechanic as the
   desktop preview, one shot per row. */
.work__thumb{position:relative;overflow:hidden}
.work__thumb img{transition:filter .5s var(--ease-out)}

@media (prefers-reduced-motion: reduce){
  .work__thumb.is-tear img,.work__thumb.is-tear::after{animation:none}
}

/* Breathing room between the brief's three blocks, and a press state on the
   scope chips so a tap reads as a tap. */
.form .form__section + .form__section{margin-top:26px}
.check:active{transform:scale(.985)}
@media (prefers-reduced-motion: reduce){ .check:active{transform:none} }

/* ==========================================================================
   NAV SCROLLSPY - the header marks the section you are in with an underline.
   Arriving at a section tears that underline sideways once before it settles.
   The label text is never touched, so it stays readable throughout and the
   language switcher remains the only thing writing it.
   ========================================================================== */
.nav__index a{position:relative;overflow:hidden}
/* The mark is the underline itself. It wipes in, then tears sideways once
   before settling, so the glitch lives in the rule rather than in the label
   text: the words stay readable the whole time. */
.nav__index a::after{
  content:"";
  position:absolute;left:14px;right:14px;bottom:5px;
  height:2px;background:var(--black);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.nav__index a.is-on::after{transform:scaleX(1)}
.nav__index a:hover::after{background:var(--olive)}
.nav__index a.is-glitch::after{animation:navTear .28s steps(3) 1}
@keyframes navTear{
  0%  {transform:scaleX(1)  translate3d(-16%,0,0);opacity:.3}
  30% {transform:scaleX(.5) translate3d(24%,0,0); opacity:1}
  55% {transform:scaleX(1)  translate3d(-9%,0,0); opacity:.45}
  80% {transform:scaleX(.82)translate3d(7%,0,0);  opacity:1}
  100%{transform:scaleX(1)  translate3d(0,0,0);   opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .nav__index a.is-glitch::after{animation:none}
}

/* ==========================================================================
   SCOPE DROPDOWN - thirteen chips collapsed into one control. The checkboxes
   underneath are untouched, so the offer-card prefill and the submitted form
   data keep working exactly as before.
   ========================================================================== */
.form__grid--3{grid-template-columns:repeat(3,1fr)}
.drop{position:relative}
.drop__trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid rgba(204,211,118,.2);color:var(--olive);
  font-family:inherit;font-size:15px;text-align:left;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.drop__trigger:hover{border-color:rgba(204,211,118,.4)}
.drop__trigger:focus-visible,
.drop.is-open .drop__trigger{border-color:var(--olive);box-shadow:0 0 0 3px rgba(204,211,118,.12);outline:none}
.drop__summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop__summary.is-empty{opacity:.55;font-style:italic}
.drop__chev{width:12px;height:8px;flex:none;transition:transform .3s var(--ease)}
.drop.is-open .drop__chev{transform:rotate(180deg)}

.drop__panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:var(--ink);border:1px solid rgba(204,211,118,.32);
  border-radius:var(--r-sm);padding:6px;
  max-height:min(46vh,330px);overflow-y:auto;overscroll-behavior:contain;
  box-shadow:var(--lift-3);
}
.drop__panel .checks{grid-template-columns:1fr;gap:2px}
.drop__panel .check{
  border:none;background:none;border-radius:var(--r-xs);
  padding:11px 12px;font-size:14px;
  font-family:'Inter Tight','Inter',system-ui,sans-serif;
  text-transform:none;letter-spacing:-.01em;
  color:var(--olive);
}
.drop__panel .check:hover{background:rgba(204,211,118,.1)}
.drop__panel .check.is-on{background:var(--olive);color:var(--ink);font-weight:600}
.drop__panel .check.is-on .check__dot{background:var(--ink);border-color:var(--ink)}
.drop__panel .check.is-on .check__dot::after{background:var(--olive)}
.drop__panel::-webkit-scrollbar{width:6px}
.drop__panel::-webkit-scrollbar-thumb{background:rgba(204,211,118,.3);border-radius:3px}

@media (max-width:760px){
  .form__grid--3{grid-template-columns:1fr}
}

/* ==========================================================================
   REVEAL - a light lift as things arrive. 14px and a fade, nothing that
   announces itself. The class is added by JS, so with scripting off the
   content is simply visible rather than stuck at opacity 0.
   ========================================================================== */
.reveal{opacity:0;transform:translate3d(0,14px,0);filter:blur(5px)}
.reveal.is-in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .55s var(--ease-out) var(--d,0ms),
             transform .55s var(--ease-out) var(--d,0ms),
             filter .55s var(--ease-out) var(--d,0ms);
}

/* Keyboard focus was invisible on most controls. */
a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.check:focus-within,[tabindex]:focus-visible{
  outline:2px solid var(--black);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
.horiz a:focus-visible,.horiz button:focus-visible,
.tuner a:focus-visible,.tuner button:focus-visible,
.cta a:focus-visible,.cta button:focus-visible,
.footer a:focus-visible,.footer button:focus-visible,
.modal a:focus-visible,.modal button:focus-visible{outline-color:var(--olive)}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.is-in{opacity:1;transform:none;filter:none;transition:none}
  .menu__links a{transform:none;opacity:1;transition:none}
}

/* Single-choice variant of the scope dropdown. Budget and timeline used to be
   native selects, which looked nothing like the control next to them. */
.drop--single .drop__panel{padding:6px;display:flex;flex-direction:column;gap:2px}
/* An author display declaration beats the UA's display:none for [hidden],
   so the panels rendered even while closed. Restore the attribute's meaning. */
.drop__panel[hidden]{display:none}
.drop__panel .opt{
  display:block;width:100%;text-align:left;
  padding:11px 12px;border:none;background:none;border-radius:var(--r-xs);
  font-family:'Inter Tight','Inter',system-ui,sans-serif;
  font-size:14px;line-height:1.3;letter-spacing:-.01em;text-transform:none;
  color:var(--olive);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.drop__panel .opt:hover,
.drop__panel .opt.is-cursor{background:rgba(204,211,118,.12)}
.drop__panel .opt[aria-selected="true"]{
  background:var(--olive);color:var(--ink);font-weight:600;
}
.drop__panel .opt:focus-visible{outline:2px solid var(--olive);outline-offset:-2px}

/* ==========================================================================
   POLISH - three places where the page was doing less than the rest of it.
   No layout moves, no character changes.
   ========================================================================== */

/* 1. The partner wall was the weakest band: logos arriving at different
      sizes, weights and brand colours, some built for dark grounds, some for
      light. Flattening them to one ink tone at equal optical height is the
      standard treatment, and it stops nine brands fighting the olive. */
.clients__item img{
  max-height:34px;width:auto;
  /* Flat black. These files are proper transparent wordmarks, so forcing the
     luminance to zero unifies them without touching their shapes. */
  filter:brightness(0);
  opacity:.8;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.clients__item:hover img{opacity:1;transform:translateY(-2px)}
/* galeria-bronowice.png is built as a solid black plate with the wordmark
   reversed out of it (84% of its pixels are opaque black, against ~18% for a
   normal wordmark). Multiply only darkens that further, so this one opts out
   and renders as designed. It really wants a transparent-background version. */
.clients__item img[src*="galeria-bronowice"]{
  filter:none;
  opacity:.62;
}
.clients__item:hover img[src*="galeria-bronowice"]{filter:none;opacity:1}

/* 2. The back-to-top pill sat at full strength in the corner of every single
      screen. It should be available, not insistent. */
.gotop{
  padding:10px 15px 10px 12px;
  font-size:10px;
  box-shadow:var(--lift-1);
  opacity:0;
}
.gotop.is-visible{opacity:.62}
.gotop.is-visible:hover{opacity:1;box-shadow:var(--lift-2)}

/* 3. The tuner's channel scale is a control, but at 40% it read as dirt on
      the screen rather than something you could aim at. */
.tuner__tick{color:rgba(204,211,118,.55)}
.tuner__tick::after{height:1.5px}
.tuner__tick:hover{color:rgba(204,211,118,.9)}

/* ==========================================================================
   TOUCH TARGETS - on devices without a cursor every interactive element needs
   a finger-sized hit area. The visuals stay as they are; the padding grows.
   ========================================================================== */
@media (hover:none){
  .fcell a,.fcell button.as-link{padding:9px 0;margin:-4px 0}
  .clients__nav{width:44px;height:44px}
  .music__btn{width:46px;height:46px}
  .music__btn--toggle{width:58px;height:58px}
  .tuner__tick{padding:9px 0}
  .gotop{padding:13px 17px 13px 14px}
}

/* ==========================================================================
   TOUCH PERFORMANCE TIER - Safari on iPhone pays real costs for effects that
   are cheap on desktop Blink. Everything here is decoration; none of it is
   information.
   ========================================================================== */
@media (hover:none){
  /* Fullscreen fixed layers: iOS repaints them while scrolling. At phone
     size the grain is invisible anyway. */
  .grain,.vignette{display:none}
  /* soft-light blend + continuous drift on the hero */
  .hero__beams{display:none}
  /* filter transitions are the slow path in Safari; keep the movement,
     drop the blur. */
  .reveal,.work--reveal .work__row{filter:none}
  .reveal.is-in,.work--reveal .work__row.is-in{filter:none}
}