/* ============================================================
   style-kat.css — indie games agency landing page
   ------------------------------------------------------------
   Responsive system (mobile-safe, tablet-aware):
     ≥1181px   full desktop
     ≤1180px   small laptop / large tablet landscape
     ≤1024px   tablet — nav collapses to hamburger
     ≤900px    tablet portrait — split sections stack
     ≤640px    phone
     ≤430px    small phone
   Layout gutters and section padding are driven by --gutter and
   --sec-pad so every section shrinks together.
   ============================================================ */

/* Self-hosted fonts (was Google Fonts CDN — moved local to avoid third-party
   requests/cookies to fonts.googleapis.com / fonts.gstatic.com for visitors).
   Variable font files, so one file per family covers the whole weight range. */
@font-face{
  font-family:"Outfit";
  src:url("fonts/outfit-variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("fonts/plus-jakarta-sans-variable.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("fonts/plus-jakarta-sans-italic-variable.woff2") format("woff2");
  font-weight:200 800;
  font-style:italic;
  font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --purple:#7c5cbf;
  --purple-light:#9b7dd4;
  --purple-soft:#c4aff0;
  --coral:#e8735a;
  --dark:#14101e;
  --dark2:#1e1830;
  --dark3:#261e38;
  --light:#ffffff;
  --off-white:#f8f7fc;
  --text-dark:#14101e;
  --text-light:#f0ecff;
  --text-muted-dark:#6b6480;
  --text-muted-light:#a090c8;
  --border-dark:rgba(255,255,255,0.08);
  --border-light:rgba(20,16,30,0.1);

  /* layout levers */
  --nav-h:72px;
  --gutter:80px;
  --sec-pad:100px;
  --maxw:1280px;
}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  font-family:"Plus Jakarta Sans",sans-serif;
  color:var(--text-dark);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(124,92,191,0.18);
}
/* screen-reader-only label */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
/* long words / URLs must never blow out a phone-width column */
h1,h2,h3,p,li,a,span,div{overflow-wrap:break-word;}
/* fixed nav must not cover anchor targets */
section[id]{scroll-margin-top:calc(var(--nav-h) + 12px);}
/* visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--purple-soft);
  outline-offset:3px;
  border-radius:4px;
}

/* ── NAV ── */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
  background:rgba(20,16,30,0.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-dark);
}
.nav-logo{
  font-family:"Fraunces",serif;font-size:20px;font-weight:600;
  color:#fff;letter-spacing:-0.01em;text-decoration:none;
  white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;
}
.nav-links{display:flex;gap:36px;list-style:none;align-items:center;}
/* padding gives each link a ≥24px pointer target without moving the text */
.nav-links a{display:inline-flex;align-items:center;min-height:40px;font-size:13px;font-weight:500;color:var(--text-muted-light);text-decoration:none;letter-spacing:0.03em;text-transform:uppercase;transition:color .2s;white-space:nowrap;}
.nav-links a:hover{color:var(--purple-soft);}
.nav-cta{
  background:var(--purple);color:#fff;font-size:13px;font-weight:600;
  padding:10px 26px;border-radius:100px;text-decoration:none;
  letter-spacing:0.02em;transition:all .2s;white-space:nowrap;
  box-shadow:0 2px 16px rgba(124,92,191,0.35);
}
.nav-cta:hover{background:var(--purple-light);transform:translateY(-1px);}
/* mobile-drawer CTA — only shown once the nav collapses */
.nav-cta-mobile{display:none;}
.lang-switch{display:flex;align-items:center;gap:2px;background:var(--dark3);border-radius:100px;padding:3px;margin-left:8px;flex-shrink:0;}
.lang-btn{
  background:none;border:none;color:var(--text-muted-light);font-size:12px;font-weight:600;
  letter-spacing:0.03em;padding:8px 14px;border-radius:100px;cursor:pointer;transition:all .2s;
  font-family:"Plus Jakarta Sans",sans-serif;min-height:36px;
}
.lang-btn:hover{color:var(--text-light);}
.lang-btn.active{background:var(--purple);color:#fff;}
.nav-hamburger{display:none;}


/* ── SECTION THEMES ──────────────────────────────────────────
   Sections do not hard-code their colours any more. Each one
   reads these tokens, and editor.html stamps .theme-light /
   .theme-dark on them by position, so reordering the page keeps
   the light/dark rhythm correct. Light is the default, so a
   section with no class still looks right.
   ------------------------------------------------------------ */
[data-section]{
  --sec-bg:var(--off-white);
  --sec-fg:var(--text-dark);
  --sec-muted:var(--text-muted-dark);
  --sec-accent:var(--purple);
  --sec-panel:#fff;
  --sec-panel-hover:#fff;
  --sec-panel-border:var(--border-light);
  --sec-panel-shadow:0 12px 40px rgba(20,16,30,0.06);
  --sec-tint:rgba(124,92,191,0.08);
  --sec-label:var(--text-muted-dark);
  --sec-field-bg:#ffffff;
  --sec-field-border:rgba(20,16,30,0.18);
  --sec-field-border-hover:rgba(20,16,30,0.32);
  --sec-placeholder:rgba(107,100,128,0.75);
  --sec-list:rgba(20,16,30,0.62);
}
[data-section].theme-dark{
  --sec-bg:var(--dark);
  --sec-fg:#ffffff;
  --sec-muted:var(--text-muted-light);
  --sec-accent:var(--purple-soft);
  --sec-panel:var(--dark2);
  --sec-panel-hover:var(--dark3);
  --sec-panel-border:var(--border-dark);
  --sec-panel-shadow:none;
  --sec-tint:rgba(255,255,255,0.06);
  --sec-label:#cbbdea;
  --sec-field-bg:rgba(255,255,255,0.10);
  --sec-field-border:rgba(255,255,255,0.24);
  --sec-field-border-hover:rgba(255,255,255,0.42);
  --sec-placeholder:rgba(255,255,255,0.52);
  --sec-list:rgba(240,236,255,0.65);
}

/* ── SECTION SHELL ── */
.sec{width:100%;}
.sec-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}

/* ── LOADING SCREEN ──────────────────────────────────────────
   Sits over everything until assets/preloader.js fades it out.
   The background matches the hero exactly, so the handover is a
   dissolve rather than a flash of a different colour. */
html.is-loading{overflow:hidden;}
.preloader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:var(--dark);
  opacity:1;transition:opacity 420ms ease;
}
/* the same glow as the hero, so the two read as one screen */
.preloader::before{
  content:'';position:absolute;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,191,0.18) 0%,transparent 65%);
  top:-100px;left:-150px;pointer-events:none;
}
.preloader.is-done{opacity:0;pointer-events:none;}
.pre-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:0 var(--gutter);max-width:100%;
}
.pre-logo{
  font-family:"Fraunces",serif;font-size:30px;font-weight:600;
  color:#fff;letter-spacing:-0.02em;text-align:center;
}
.pre-bar{
  width:200px;max-width:60vw;height:3px;border-radius:100px;
  background:rgba(255,255,255,0.14);overflow:hidden;
}
.pre-fill{
  display:block;width:100%;height:100%;border-radius:100px;
  background:linear-gradient(90deg,var(--purple),var(--purple-light));
  transform:scaleX(0);transform-origin:left center;
  transition:transform 180ms ease-out;
}
.pre-text{
  font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-muted-light);text-align:center;
}
@media(prefers-reduced-motion:reduce){
  .preloader{transition:none;}
  .pre-fill{transition:none;}
}
@media(max-width:640px){
  .pre-logo{font-size:24px;}
  .pre-text{font-size:11px;}
}

/* ── §1 HERO — full dark, split layout ── */
.hero-sec{
  /* height of the stat strip; overwritten from the real measurement so an
     edited stat label that wraps still lines up. Fallbacks per breakpoint
     below keep the first paint honest. */
  --hero-stats-h:114px;
  background:var(--dark);
  min-height:calc(100vh - var(--hero-stats-h));
  min-height:calc(100svh - var(--hero-stats-h));
  display:flex;flex-direction:column;
  padding-top:var(--nav-h);
  position:relative;overflow:hidden;
}
/* subtle radial glow */
.hero-sec::before{
  content:'';position:absolute;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,191,0.18) 0%,transparent 65%);
  top:-100px;left:-150px;pointer-events:none;
}
.hero-sec::after{
  content:'';position:absolute;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,115,90,0.1) 0%,transparent 65%);
  bottom:0;right:-100px;pointer-events:none;
}
/* Headline spans both columns; copy and portrait share the row beneath it.
   Keeping the h1 full-width is what lets each line stay on a single line. */
.hero-inner{
  max-width:var(--maxw);margin:0 auto;padding:64px var(--gutter) 0;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:"head head" "body art";
  column-gap:40px;row-gap:0;
  align-items:end;flex:1;position:relative;z-index:2;width:100%;
}
.hero-head{grid-area:head;min-width:0;align-self:start;}
.hero-left{grid-area:body;align-self:start;padding-bottom:80px;display:flex;flex-direction:column;justify-content:flex-start;min-width:0;}
/* Sizes below are tuned so each headline line fits on ONE line down to ~640px.
   Budget: roughly 16.0 × font-size in px for the longer line — which is now
   line two, measured with the LONGEST rolling word in it. Add characters, or
   add a longer word to hero.rotatingWords, and it will wrap; shrink the size
   a step at each breakpoint if that happens. Below 640px it wraps by design. */
.hero-h1{
  font-family:"Fraunces",serif;
  font-size:68px;line-height:1.08;letter-spacing:-0.03em;
  color:#fff;font-weight:600;margin-bottom:0;
}
.hero-h1 em{font-style:italic;color:var(--purple-soft);font-weight:400;}

/* ── rolling word ────────────────────────────────────────────
   A clipped one-line window. word-roll.js sets the height and
   width in px from the live line box, stacks the current and
   next word inside the track, and slides the track up by one
   line. Everything here is generic: drop {{word}} into any
   text row and it looks the same. */
.word-roll{
  display:inline-block;vertical-align:top;
  /* overflow alone is NOT enough: while the track runs a composited
     transform, Chromium paints it without the ancestor's overflow clip and
     the outgoing word ghosts over the line above. clip-path and the mask
     below are applied to the layer itself, so they hold for the animation. */
  overflow:hidden;
  clip-path:inset(0);
  contain:paint;
  /* Fog. word-roll.js sets --fog to the empty band above and below the
     glyphs, so a word dissolves on the way out and resolves on the way in,
     while one sitting still stays fully crisp. The fade is a property of
     the window, not of the words — the roll is the only transition. */
  /* The ramp is deliberately slow to start: the top of the window sits over
     the line above, so anything still visible up there has to be a whisper,
     not a smudge. Most of the opacity arrives in the last third. */
  --fog:0px;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0, rgba(0,0,0,.16) calc(var(--fog) * .5), rgba(0,0,0,.62) calc(var(--fog) * .8), #000 var(--fog),
    #000 calc(100% - var(--fog)), rgba(0,0,0,.62) calc(100% - var(--fog) * .8), rgba(0,0,0,.16) calc(100% - var(--fog) * .5), transparent 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0, rgba(0,0,0,.16) calc(var(--fog) * .5), rgba(0,0,0,.62) calc(var(--fog) * .8), #000 var(--fog),
    #000 calc(100% - var(--fog)), rgba(0,0,0,.62) calc(100% - var(--fog) * .8), rgba(0,0,0,.16) calc(100% - var(--fog) * .5), transparent 100%);
  /* the italic serif leans past its advance width — give it room */
  padding-right:0.06em;
  transition:width 620ms cubic-bezier(.72,0,.24,1);
}
/* deliberately no will-change: a permanent compositing layer softens the
   serif at rest, and the browser promotes it for the 620ms roll anyway */
.word-roll-track{display:block;}
.word-roll-item{
  display:block;width:max-content;max-width:none;
  white-space:nowrap;line-height:inherit;
  box-sizing:content-box;   /* word-roll.js sets height + padding separately */
}
/* measures ascender-to-descender for the current font, so the window can be
   opened just wide enough to clear a descender. The .fit variant lives in
   the headline and measures line widths for the auto-sizer. */
.word-roll-probe{
  position:absolute;visibility:hidden;pointer-events:none;
  white-space:nowrap;line-height:normal;
  top:0;left:0;
}
.word-roll-probe.fit{line-height:inherit;}
@media(prefers-reduced-motion:reduce){
  .word-roll{transition:none;}
  .word-roll-track{transition:none !important;}
  .word-roll-item{transition:none !important;opacity:1 !important;}
}
.hero-sub{
  font-size:17px;color:var(--text-muted-light);font-weight:300;
  line-height:1.8;max-width:460px;margin:36px 0 44px;
}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
.hero-lang{
  margin-top:28px;font-size:13px;font-weight:500;
  color:var(--text-muted-light);letter-spacing:0.02em;
}
.btn-primary{
  background:var(--purple);color:#fff;padding:14px 34px;border-radius:100px;
  font-size:14px;font-weight:600;text-decoration:none;letter-spacing:0.02em;
  box-shadow:0 4px 24px rgba(124,92,191,0.4);transition:all .2s;
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
}
.btn-primary:hover{background:var(--purple-light);transform:translateY(-2px);box-shadow:0 8px 32px rgba(124,92,191,0.45);}
.btn-ghost{
  color:#fff;font-size:14px;font-weight:600;text-decoration:none;
  padding:14px 28px;border-radius:100px;
  border:1.5px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.05);transition:all .2s;
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
}
.btn-ghost:hover{border-color:var(--purple-soft);background:rgba(124,92,191,0.1);}

/* hero portrait side — sits inside the content box so both characters
   are fully visible, and hugs the left of its column rather than the edge */
.hero-right{
  grid-area:art;position:relative;
  display:flex;align-items:flex-end;justify-content:flex-start;
  height:100%;min-width:0;
}
.hero-right img{
  width:auto;height:auto;
  max-width:100%;max-height:min(620px,62vh);
  object-fit:contain;object-position:center bottom;
  display:block;mix-blend-mode:screen;
  position:relative;z-index:2;
  filter:drop-shadow(0 0 60px rgba(124,92,191,0.3));
}
/* hero stat strip — lifted clear of the bottom edge by exactly its own
   height. The negative margin gives the vacated space back, so the strip
   ends flush against the next section instead of leaving a dark band.
   --hero-stats-h is measured at runtime (see the script at the foot of
   index-kat.html); the values below are the fallback until it lands. */
.hero-stats{
  position:relative;z-index:2;
  background:var(--dark2);border-top:1px solid var(--border-dark);
  transform:translateY(-100%);
  margin-bottom:calc(-1 * var(--hero-stats-h));
}
.hero-stats-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.hstat{
  padding:28px 8px;text-align:center;
  border-right:1px solid var(--border-dark);
}
.hstat:last-child{border-right:none;}
.hstat .num{
  font-family:"Fraunces",serif;font-size:36px;font-weight:600;
  color:var(--purple-soft);line-height:1;
}
.hstat .lbl{font-size:12px;font-weight:500;color:var(--text-muted-light);margin-top:6px;letter-spacing:0.04em;text-transform:uppercase;}

/* ── §2 EXPERIENCE — light ── */
.exp-sec{background:var(--sec-bg);}
.exp-inner{
  max-width:var(--maxw);margin:0 auto;padding:var(--sec-pad) var(--gutter);
  display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:start;
}
.exp-label{font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--sec-accent);margin-bottom:16px;display:block;}
.exp-h2{
  font-family:"Fraunces",serif;font-size:48px;font-weight:600;
  color:var(--sec-fg);letter-spacing:-0.025em;line-height:1.1;margin-bottom:28px;
}
.exp-h2 em{font-style:italic;color:var(--sec-accent);font-weight:400;}
.exp-p{font-size:16px;color:var(--sec-muted);line-height:1.85;font-weight:300;margin-bottom:18px;}
.exp-p strong{color:var(--sec-fg);font-weight:600;}
/* heading left, story right — the stats and studio names live elsewhere */
.exp-head{min-width:0;}
.exp-body{min-width:0;}
.exp-p:last-child{margin-bottom:0;}

/* ── §3 SERVICES — dark ── */
.svc-sec{background:var(--sec-bg);}
.svc-inner{max-width:var(--maxw);margin:0 auto;padding:var(--sec-pad) var(--gutter);}
.svc-header{text-align:center;margin-bottom:64px;}
.svc-h2{
  font-family:"Fraunces",serif;font-size:52px;font-weight:600;
  color:var(--sec-fg);letter-spacing:-0.025em;line-height:1.1;margin-bottom:16px;
}
.svc-h2 em{font-style:italic;color:var(--sec-accent);}
.svc-sub{font-size:16px;color:var(--sec-muted);font-weight:300;max-width:480px;margin:0 auto;line-height:1.75;}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.svc-grid.svc-grid-3{grid-template-columns:repeat(3,1fr);}
.svc-grid.svc-grid-4{grid-template-columns:repeat(4,1fr);}
.svc-card{
  background:var(--sec-panel);padding:52px 48px;
  border:1px solid var(--sec-panel-border);
  box-shadow:var(--sec-panel-shadow);
  min-width:0;
  /* the lift is slower than the tint on purpose — it should read as the
     card easing upward, not snapping */
  transition:background .25s ease, transform .55s cubic-bezier(.22,1,.36,1),
             border-color .35s ease, box-shadow .55s ease;
}
.svc-card:hover,
.svc-card:focus-within{
  background:var(--sec-panel-hover);
  transform:translateY(-8px);
  border-color:var(--sec-accent);
}
/* a touch of depth so the lift has somewhere to lift from */
[data-section].theme-light .svc-card:hover,
[data-section].theme-light .svc-card:focus-within{
  box-shadow:0 20px 44px rgba(20,16,30,0.10);
}
@media(prefers-reduced-motion:reduce){
  .svc-card{transition:background .25s ease;}
  .svc-card:hover,.svc-card:focus-within{transform:none;}
}
/* a finger is not a cursor — no hover lift where there is no hover */
@media(hover:none){
  .svc-card:hover,.svc-card:focus-within{transform:none;}
}
.svc-card h3{
  font-family:"Fraunces",serif;font-size:30px;font-weight:500;
  color:var(--sec-fg);margin-bottom:16px;letter-spacing:-0.015em;
}
.svc-card p{font-size:15px;color:var(--sec-muted);line-height:1.8;font-weight:300;margin-bottom:28px;}
/* flex, not grid: switching a service off in the editor should leave the
   remaining cards centred instead of a hole in a fixed 4-column track */
.svc-grid.svc-grid-4{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:20px;
}
.svc-grid-4 .svc-card{
  flex:1 1 250px;max-width:340px;
  padding:36px 28px;border-radius:10px;
}
.svc-grid-4 .svc-card h3{font-size:21px;line-height:1.2;margin-bottom:12px;}
.svc-card h3{text-align:center;}
.svc-grid-4 .svc-card p{font-size:13.5px;line-height:1.65;margin-bottom:20px;}
.svc-grid-4 .svc-list li{font-size:12.5px;}
.svc-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.svc-list li{
  font-size:14px;color:var(--sec-list);
  display:flex;align-items:flex-start;gap:10px;line-height:1.5;
}
.svc-list li::before{content:'→';color:var(--sec-accent);font-weight:600;flex-shrink:0;}

/* ── §3b WORKSHOP — accent band between the dark services and light work ── */
.ws-sec{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 460px at 18% -10%, rgba(124,92,191,0.42) 0%, transparent 62%),
    radial-gradient(700px 420px at 88% 110%, rgba(232,115,90,0.20) 0%, transparent 60%),
    linear-gradient(165deg, #241c3c 0%, #191330 55%, #14101e 100%);
}
.ws-inner{
  max-width:var(--maxw);margin:0 auto;padding:var(--sec-pad) var(--gutter);
  position:relative;z-index:2;
}
.ws-head{max-width:660px;margin:0 auto 44px;text-align:center;}
.ws-h2{
  font-family:"Fraunces",serif;font-size:48px;font-weight:600;
  color:#fff;letter-spacing:-0.025em;line-height:1.1;margin-bottom:18px;
}
.ws-h2 em{font-style:italic;color:var(--purple-soft);font-weight:400;}
.ws-sub{font-size:16.5px;color:var(--text-muted-light);font-weight:300;line-height:1.8;}

/* the countdown card */
.ws-card{
  max-width:760px;margin:0 auto;text-align:center;
  background:rgba(20,16,30,0.55);
  border:1px solid rgba(255,255,255,0.1);border-radius:22px;
  padding:38px 40px 34px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 24px 60px rgba(0,0,0,0.3);
}
.ws-when{
  font-size:12.5px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--purple-soft);margin-bottom:20px;
}
.ws-when[hidden],.ws-countdown[hidden],.ws-tba[hidden]{display:none;}

.ws-countdown{display:flex;justify-content:center;gap:14px;margin-bottom:26px;}
.ws-unit{
  flex:1 1 0;max-width:132px;min-width:0;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);
  border-radius:14px;padding:16px 6px 12px;
}
.ws-num{
  display:block;font-family:"Fraunces",serif;font-size:46px;font-weight:600;
  color:#fff;line-height:1;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}
.ws-lbl{
  display:block;margin-top:8px;
  font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--text-muted-light);
}

/* the no-date state */
.ws-tba{
  display:flex;align-items:center;justify-content:center;
  margin-bottom:26px;
}
.ws-tba span{
  display:inline-block;
  font-family:"Fraunces",serif;font-size:34px;font-weight:600;font-style:italic;
  color:var(--purple-soft);letter-spacing:-0.02em;line-height:1.2;
  border:1.5px dashed rgba(196,175,240,0.4);border-radius:100px;
  padding:16px 38px;
}

.ws-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:26px;}
.ws-pill{
  display:inline-flex;align-items:center;
  font-size:12.5px;font-weight:500;color:var(--text-muted-light);
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  border-radius:100px;padding:8px 16px;
}
.ws-pill strong{color:#fff;font-weight:700;}
.ws-spots strong{color:var(--purple-soft);}

.ws-cta{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  background:var(--purple);color:#fff;text-decoration:none;
  padding:15px 40px;border-radius:100px;
  font-size:15px;font-weight:600;letter-spacing:0.02em;
  box-shadow:0 8px 30px rgba(124,92,191,0.45);transition:all .2s;
}
.ws-cta:hover{background:var(--purple-light);transform:translateY(-2px);}
.ws-note{
  font-size:12.5px;color:var(--text-muted-light);font-weight:300;line-height:1.7;
  max-width:460px;margin:16px auto 0;opacity:.85;
}

/* topics */
.ws-config,.ws-config[hidden]{display:none!important;}
.ws-title[hidden],.ws-desc[hidden]{display:none;}
/* with no title, the card is just the date, the spots and the button */
.ws-no-details .ws-countdown,.ws-no-details .ws-tba{margin-bottom:28px;}

/* the specific edition: what this one is called and what it covers */
.ws-title{
  font-family:"Fraunces",serif;font-size:30px;font-weight:600;
  color:#fff;letter-spacing:-0.02em;line-height:1.2;
  margin:0 0 12px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,0.09);
}
.ws-desc{
  font-size:15px;color:var(--text-muted-light);font-weight:300;line-height:1.75;
  max-width:560px;margin:0 auto 26px;
}

/* ── §4 WORK — light, two full-bleed text marquees ── */
.work-sec{background:var(--sec-bg);overflow:hidden;padding:var(--sec-pad) 0;}

/* ── marquee ──────────────────────────────────────────────────
   Items travel right → left. The mask fades them in as they
   enter on the right and out again as they leave on the left.
   marquee.js builds the items from the content table, then
   clones the group and sets --shift / --dur for a seamless loop.
   ------------------------------------------------------------ */
.marquee-block + .marquee-block{margin-top:64px;}
.marquee-title-row{max-width:var(--maxw);margin:0 auto 26px;padding:0 var(--gutter);text-align:center;}
.marquee-title{
  font-family:"Fraunces",serif;font-size:38px;font-weight:600;
  color:var(--sec-fg);letter-spacing:-0.025em;line-height:1.15;
}
.marquee-title em{font-style:italic;color:var(--sec-accent);}
.marquee{
  position:relative;width:100%;overflow:hidden;
  /* the gentle fade at both ends */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
.marquee-track{
  display:flex;width:max-content;
  will-change:transform;backface-visibility:hidden;
  animation:marquee-x var(--dur,40s) linear infinite;
}
.marquee-group{display:flex;align-items:center;flex-shrink:0;}
/* both rows share the games treatment: Fraunces italic, muted */
.marquee-item{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-family:"Fraunces",serif;font-weight:500;font-style:italic;
  letter-spacing:-0.02em;
  color:var(--sec-muted);line-height:1.2;
}
/* the separator: a true circle, so it is vertically centred by construction */
.marquee-item::after{
  content:'';display:block;flex-shrink:0;
  width:6px;height:6px;border-radius:50%;
  background:var(--sec-accent);opacity:.45;
  margin:0 clamp(20px,3.2vw,44px);
}
/* Both rows share one treatment — only the size differs.
   Stepped, not fluid: the editor emits fixed px per breakpoint,
   so these have to line up with its resp factors for the marquee roles. */
.marquee-studios .marquee-item{font-size:31px;}
.marquee-games .marquee-item{font-size:34px;}
@keyframes marquee-x{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(calc(-1 * var(--shift,50%)),0,0);}
}
/* no motion: hold it still, still legible, no mask cutting names off */
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none;}
  .marquee{-webkit-mask-image:none;mask-image:none;}
  .marquee-group:not(:first-child){display:none;}
  .marquee-group{flex-wrap:wrap;justify-content:center;padding:0 var(--gutter);}
}

/* ── §5 CONTACT — dark ── */
.contact-sec{background:var(--sec-bg);}
.contact-inner{
  max-width:var(--maxw);margin:0 auto;padding:var(--sec-pad) var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;
}
.contact-left .contact-eyebrow{font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--sec-accent);margin-bottom:16px;display:block;}
.contact-h2{
  font-family:"Fraunces",serif;font-size:52px;font-weight:600;
  color:var(--sec-fg);letter-spacing:-0.025em;line-height:1.1;margin-bottom:20px;
}
.contact-h2 em{font-style:italic;color:var(--sec-accent);}
.contact-p{font-size:16px;color:var(--sec-muted);line-height:1.8;font-weight:300;margin-bottom:36px;}
/* the form sits on a panel — on a flat dark section a bare form reads as
   nothing at all, which is exactly what Nikko flagged */
.cform{
  display:flex;flex-direction:column;gap:16px;
  background:var(--sec-panel);border:1px solid var(--sec-panel-border);
  border-radius:20px;padding:30px;box-shadow:var(--sec-panel-shadow);
}
.ff{min-width:0;}
.ff label{display:block;font-size:11px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--sec-label);margin-bottom:8px;}
.ff input,.ff textarea,.ff select{
  width:100%;background:var(--sec-field-bg);
  border:1.5px solid var(--sec-field-border);border-radius:10px;
  padding:13px 16px;font-size:14px;color:var(--sec-fg);min-height:48px;
  font-family:"Plus Jakarta Sans",sans-serif;transition:border-color .2s;
  -webkit-appearance:none;appearance:none;
}
.ff select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b6480' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;
}
.theme-dark .ff select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a090c8' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}
.ff input:hover,.ff textarea:hover,.ff select:hover{border-color:var(--sec-field-border-hover);}
.ff input:focus,.ff textarea:focus,.ff select:focus{
  outline:none;border-color:var(--sec-accent);
  box-shadow:0 0 0 3px rgba(124,92,191,0.22);
}
.ff input::placeholder,.ff textarea::placeholder{color:var(--sec-placeholder);}
.ff select{color:var(--sec-muted);}
.ff select option{background:var(--sec-panel);color:var(--sec-fg);}
.ff textarea{height:120px;resize:vertical;}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.bsub{
  width:100%;background:var(--purple);color:#fff;border:none;
  padding:15px;border-radius:100px;min-height:52px;
  font-size:14px;font-weight:600;font-family:"Plus Jakarta Sans",sans-serif;
  cursor:pointer;letter-spacing:0.02em;
  box-shadow:0 4px 24px rgba(124,92,191,0.4);transition:all .2s;
}
.bsub:hover{background:var(--purple-light);transform:translateY(-1px);}

/* ── §6 NEWSLETTER — light ── */
.newsletter-sec{background:var(--sec-bg);}
.newsletter-inner{
  max-width:var(--maxw);margin:0 auto;padding:var(--sec-pad) var(--gutter);
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:80px;align-items:center;
}
.newsletter-eyebrow{font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--sec-accent);margin-bottom:16px;display:block;}
.newsletter-h2{
  font-family:"Fraunces",serif;font-size:44px;font-weight:600;
  color:var(--sec-fg);letter-spacing:-0.025em;line-height:1.15;margin-bottom:20px;
}
.newsletter-h2 em{font-style:italic;color:var(--sec-accent);font-weight:400;}
.newsletter-p{font-size:16px;color:var(--sec-muted);line-height:1.8;font-weight:300;margin-bottom:28px;max-width:460px;}
.newsletter-benefits{list-style:none;display:flex;flex-direction:column;gap:14px;}
.newsletter-benefits li{display:flex;align-items:center;gap:14px;font-size:14.5px;color:var(--sec-fg);font-weight:500;line-height:1.45;}
.newsletter-benefits .icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:var(--sec-tint);
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.newsletter-right{
  background:var(--sec-panel);border:1px solid var(--sec-panel-border);border-radius:20px;
  padding:40px;box-shadow:var(--sec-panel-shadow);
}
.nform{display:flex;flex-direction:column;gap:12px;}
.nform input{
  width:100%;background:var(--sec-field-bg);
  border:1.5px solid var(--sec-field-border);border-radius:10px;
  padding:15px 18px;font-size:14px;color:var(--sec-fg);min-height:52px;
  font-family:"Plus Jakarta Sans",sans-serif;transition:border-color .2s;
  -webkit-appearance:none;appearance:none;
}
.nform input:hover{border-color:var(--sec-field-border-hover);}
.nform input:focus{
  outline:none;border-color:var(--sec-accent);
  box-shadow:0 0 0 3px rgba(124,92,191,0.22);
}
.nform input::placeholder{color:var(--sec-placeholder);}
.nsub{
  width:100%;background:var(--purple);color:#fff;border:none;
  padding:15px;border-radius:100px;min-height:52px;
  font-size:14px;font-weight:600;font-family:"Plus Jakarta Sans",sans-serif;
  cursor:pointer;letter-spacing:0.02em;
  box-shadow:0 4px 24px rgba(124,92,191,0.3);transition:all .2s;
}
.nsub:hover{background:var(--purple-light);transform:translateY(-1px);}
.newsletter-disclaimer{font-size:12px;color:var(--sec-muted);text-align:center;margin-top:16px;line-height:1.6;}

/* ── COOKIE CONSENT ── */
.cookiebar{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:rgba(20,16,30,0.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--border-dark);
  box-shadow:0 -12px 40px rgba(0,0,0,0.35);
  transform:translateY(110%);transition:transform .3s ease;
  padding-bottom:env(safe-area-inset-bottom);
}
.cookiebar.open{transform:translateY(0);}
.cookiebar[hidden]{display:none;}
.cookiebar-inner{
  max-width:var(--maxw);margin:0 auto;padding:20px var(--gutter);
  display:flex;align-items:center;gap:28px;
}
.cookiebar-text{min-width:0;}
.cookiebar-text strong{
  display:block;font-family:"Fraunces",serif;font-size:17px;font-weight:600;
  color:#fff;letter-spacing:-0.01em;margin-bottom:5px;
}
.cookiebar-text p{
  font-size:13.5px;line-height:1.6;color:var(--text-muted-light);font-weight:300;margin:0;
}
.cookiebar-text a{color:var(--purple-soft);text-decoration:underline;text-underline-offset:2px;}
.cookiebar-text a:hover{color:#fff;}
.cookiebar-btns{display:flex;gap:10px;flex-shrink:0;margin-left:auto;}
.cookiebtn{
  border-radius:100px;padding:12px 26px;min-height:46px;
  font-family:"Plus Jakarta Sans",sans-serif;font-size:13.5px;font-weight:600;
  letter-spacing:0.02em;cursor:pointer;transition:all .2s;white-space:nowrap;
}
.cookiebtn-primary{background:var(--purple);color:#fff;border:1.5px solid var(--purple);}
.cookiebtn-primary:hover{background:var(--purple-light);border-color:var(--purple-light);}
.cookiebtn-ghost{
  background:rgba(255,255,255,0.05);color:#fff;
  border:1.5px solid rgba(255,255,255,0.22);
}
.cookiebtn-ghost:hover{border-color:var(--purple-soft);background:rgba(124,92,191,0.12);}

/* ── FOOTER ── */
.site-footer{
  background:var(--dark2);border-top:1px solid var(--border-dark);
  padding:28px var(--gutter);
  padding-bottom:calc(28px + env(safe-area-inset-bottom));
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.footer-logo{font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px;font-weight:400;line-height:1.7;letter-spacing:0.03em;color:var(--text-muted-light);opacity:0.75;}
.footer-copy{font-size:12px;color:var(--text-muted-light);letter-spacing:0.03em;}
.footer-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;}
.footer-links a,.footer-linkbtn{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:12px;color:var(--text-muted-light);letter-spacing:0.03em;
  text-decoration:none;background:none;border:0;padding:6px 0;cursor:pointer;
  transition:color .2s;
}
.footer-links a:hover,.footer-linkbtn:hover{color:var(--purple-soft);}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* ── ≤1180px — small laptop / tablet landscape ── */
@media(max-width:1180px){
  .ws-h2{font-size:42px;}
  .ws-num{font-size:40px;}
  .ws-tba span{font-size:30px;}
  .marquee-title{font-size:33px;}
  .marquee-studios .marquee-item{font-size:27px;}
  .marquee-games .marquee-item{font-size:28.9px;}
  :root{--gutter:48px;--sec-pad:84px;}
  .hero-inner{padding:52px var(--gutter) 0;column-gap:32px;}
  .hero-left{padding-bottom:56px;}
  .hero-h1{font-size:62px;}
  .exp-h2{font-size:42px;}
  .svc-h2,.contact-h2{font-size:44px;}
  .newsletter-h2{font-size:38px;}
  .hero-right img{max-height:min(540px,58vh);}
  .hstat .num{font-size:30px;}
  /* four cramped service columns become a comfortable 2×2 */
  .svc-grid.svc-grid-3{grid-template-columns:repeat(2,1fr);}
  .svc-grid-4 .svc-card{flex:1 1 300px;max-width:420px;}
  .exp-inner,.contact-inner,.newsletter-inner{gap:48px;}
  .svc-card{padding:40px 34px;}
}

/* ── ≤1024px — tablet: nav collapses to hamburger ── */
@media(max-width:1024px){
  .ws-card{padding:34px 30px 30px;}
  .ws-num{font-size:36px;}
  .marquee-title{font-size:30px;}
  .marquee-studios .marquee-item{font-size:24.5px;}
  .marquee-games .marquee-item{font-size:25.8px;}
  :root{--gutter:40px;--sec-pad:76px;}
  .nav-links,.nav-cta{display:none;}
  .nav-hamburger{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    cursor:pointer;background:none;border:none;
    width:44px;height:44px;margin-right:-10px;flex-shrink:0;
  }
  .nav-hamburger span{
    display:block;width:24px;height:2px;background:var(--purple-soft);border-radius:2px;
    transition:transform .25s ease,opacity .2s ease;
  }
  .nav-mobile-open .nav-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-mobile-open .nav-hamburger span:nth-child(2){opacity:0;}
  .nav-mobile-open .nav-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .nav-mobile-open .nav-links{
    display:flex;flex-direction:column;position:absolute;
    top:100%;left:0;right:0;background:#14101e;
    box-shadow:0 18px 40px rgba(0,0,0,0.45);
    padding:4px var(--gutter) 20px;gap:0;list-style:none;align-items:stretch;
    border-bottom:1px solid var(--border-dark);z-index:199;
    max-height:calc(100svh - var(--nav-h));overflow-y:auto;
  }
  /* generous tap targets in the drawer */
  .nav-mobile-open .nav-links li{border-bottom:1px solid var(--border-dark);}
  .nav-mobile-open .nav-links a{
    display:flex;align-items:center;min-height:52px;font-size:14px;
  }
  .nav-mobile-open .nav-cta-mobile{display:block;margin-top:18px;border-bottom:none;}
  .nav-mobile-open .nav-cta-mobile a{
    justify-content:center;background:var(--purple);color:#fff;
    border-radius:100px;text-transform:none;letter-spacing:0.02em;
    font-weight:600;font-size:15px;min-height:52px;
  }
  .nav-mobile-open .nav-cta-mobile a:hover{color:#fff;background:var(--purple-light);}
  .lang-switch{margin-left:auto;margin-right:14px;}
  /* hero: message first, portrait underneath */
  .hero-sec{min-height:0;}
  .hero-inner{
    grid-template-columns:1fr;grid-template-rows:auto auto auto;
    grid-template-areas:"head" "body" "art";
    padding:44px var(--gutter) 0;column-gap:0;align-items:stretch;
  }
  .hero-left{padding-bottom:28px;}
  .hero-right{justify-content:center;height:auto;}
  /* constrain by whichever hits first so the cutout never gets clipped */
  .hero-right img{max-height:min(460px,50vh);max-width:100%;}
  .hero-h1{font-size:55px;}
  .hero-sub{max-width:640px;margin-top:28px;}
  /* 16px minimum stops iOS Safari zooming the page when a field is focused */
  .ff input,.ff textarea,.ff select,.nform input{font-size:16px;}
}

/* ── ≤900px — tablet portrait: split sections stack ── */
@media(max-width:900px){
  .ws-title{font-size:26px;}
  .ws-h2{font-size:36px;}
  .ws-num{font-size:32px;}
  .ws-tba span{font-size:26px;padding:14px 30px;}
  .cookiebar-inner{gap:20px;}
  .marquee-title{font-size:28px;}
  .marquee-studios .marquee-item{font-size:22.5px;}
  .marquee-games .marquee-item{font-size:23.1px;}
  :root{--gutter:32px;--sec-pad:64px;}
  .exp-inner,.contact-inner,.newsletter-inner{grid-template-columns:1fr;gap:44px;}
  .newsletter-right{padding:28px;}
  .newsletter-p{max-width:none;}
  .marquee-block + .marquee-block{margin-top:52px;}
  .svc-header{margin-bottom:44px;}
  .hero-h1{font-size:47px;}
  .exp-h2,.svc-h2,.contact-h2{font-size:36px;}
  .newsletter-h2{font-size:34px;}
  .hstat .num{font-size:28px;}
}

/* ── ≤768px — small tablet: keep the headline on one line ── */
@media(max-width:768px){
  .hero-h1{font-size:39px;}
  .hero-sub{max-width:none;}
}

/* ── ≤640px — phone ── */
@media(max-width:640px){
  .ws-h2{font-size:31px;}
  .ws-sub{font-size:15.5px;}
  .ws-card{padding:26px 18px 24px;border-radius:18px;}
  .ws-countdown{gap:8px;}
  .ws-unit{padding:12px 2px 10px;border-radius:11px;}
  .ws-num{font-size:26px;}
  .ws-lbl{font-size:8.5px;letter-spacing:0.06em;}
  .ws-tba span{font-size:22px;padding:12px 22px;}
  .ws-cta{width:100%;padding:15px 20px;}
  .ws-title{font-size:23px;padding-top:22px;}
  .ws-desc{font-size:14.5px;}
  .marquee-title{font-size:25px;}
  .marquee-studios .marquee-item{font-size:20.5px;}
  .marquee-games .marquee-item{font-size:21.1px;}
  :root{--gutter:20px;--sec-pad:56px;--nav-h:64px;}
  .nav-logo{font-size:18px;}
  .hero-inner{padding:32px var(--gutter) 0;}
  .hero-left{padding-bottom:24px;}
  .hero-h1{font-size:33px;}
  .hero-sub{font-size:15.5px;line-height:1.7;margin:22px 0 28px;}
  .hero-btns{gap:10px;}
  .hero-btns a{flex:1 1 100%;}
  /* Taller on phones so the crop lands near the characters' waists
     instead of their chests — the stat strip covers the bottom of the
     portrait, so the image has to be that much taller to compensate. */
  .hero-right img{max-height:min(440px,62vh);}
  /* stats 2×2 with clean dividers — two rows, so the fallback doubles */
  .hero-sec{--hero-stats-h:164px;}
  .hero-stats-inner{grid-template-columns:1fr 1fr;}
  .hstat{padding:20px 6px;border-bottom:1px solid var(--border-dark);}
  .hstat:nth-child(odd){border-right:1px solid var(--border-dark);}
  .hstat:nth-child(even){border-right:none;}
  .hstat:nth-last-child(-n+2){border-bottom:none;}
  .hstat .num{font-size:26px;}
  .hstat .lbl{font-size:10.5px;letter-spacing:0.03em;}
  .exp-h2,.svc-h2,.contact-h2,.newsletter-h2{font-size:31px;}
  .exp-p{font-size:15.5px;line-height:1.75;}
  /* services stack to a single readable column */
  .svc-grid,.svc-grid.svc-grid-3{grid-template-columns:1fr;gap:14px;}
  .svc-grid.svc-grid-4{gap:14px;}
  .svc-grid-4 .svc-card{flex:1 1 100%;max-width:none;}
  .svc-card,.svc-grid-4 .svc-card{padding:28px 22px;}
  .svc-sub{font-size:15px;}
  .marquee-block + .marquee-block{margin-top:40px;}
  .marquee-title-row{margin-bottom:16px;}
  .marquee-item::after{margin:0 clamp(14px,4vw,24px);}
  .marquee{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  }
  .contact-p{font-size:15.5px;margin-bottom:28px;}
  /* 16px minimum stops iOS Safari zooming the page on focus */
  .ff input,.ff textarea,.ff select,.nform input{font-size:16px;}
  .cform{padding:20px 18px;border-radius:16px;}
  .fr{grid-template-columns:1fr;}
  .newsletter-right{padding:24px 20px;border-radius:16px;}
  .newsletter-benefits li{font-size:14px;align-items:flex-start;}
  .newsletter-benefits .icon{width:32px;height:32px;font-size:15px;}
  .site-footer{padding:22px var(--gutter);flex-direction:column;gap:10px;text-align:center;}
  .cookiebar-inner{flex-direction:column;align-items:stretch;gap:16px;padding:18px var(--gutter);}
  .cookiebar-btns{margin-left:0;}
  .cookiebtn{flex:1;padding:12px 16px;}
  .cookiebar-text strong{font-size:16px;}
}

/* ── ≤430px — small phone ── */
@media(max-width:430px){
  .ws-title{font-size:21px;}
  .ws-h2{font-size:27px;}
  .ws-num{font-size:22px;}
  .ws-tba span{font-size:19px;}
  .marquee-title{font-size:23px;}
  .marquee-studios .marquee-item{font-size:19px;}
  .marquee-games .marquee-item{font-size:19.5px;}
  :root{--gutter:16px;--sec-pad:48px;}
  .hero-h1{font-size:29px;}
  .exp-h2,.svc-h2,.contact-h2,.newsletter-h2{font-size:27px;}
  .hstat .num{font-size:23px;}
  .hstat .lbl{font-size:9.5px;}
  .svc-card,.svc-grid-4 .svc-card{padding:24px 18px;}
}

/* ── phone landscape: don't let the hero swallow the viewport ── */
@media(max-height:520px) and (orientation:landscape){
  .hero-sec{min-height:0;}
  .hero-inner{padding-top:24px;}
  .hero-right img{max-height:min(300px,64vh);max-width:100%;}
  .hero-left{padding-bottom:16px;}
}

/* ── motion & input preferences ── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .btn-primary:hover,.nav-cta:hover,.bsub:hover,.nsub:hover{transform:none;}
}
/* touch devices: drop hover-lift effects that stick after a tap */
@media(hover:none){
  .btn-primary:hover,.nav-cta:hover,.bsub:hover,.nsub:hover{transform:none;}
}
@media print{
  .site-nav,.hero-right,.hero-sec::before,.hero-sec::after{display:none!important;}
  .marquee{-webkit-mask-image:none;mask-image:none;}
  .marquee-track{animation:none;}
  body{color:#000;}
}

/* ── ADMIN: edit-text panel (legacy — superseded by editor.html) ── */
.admin-toggle-btn{
  position:fixed;bottom:24px;right:24px;z-index:1000;
  background:var(--purple);color:#fff;border:none;
  padding:12px 20px;border-radius:100px;
  font-family:"Plus Jakarta Sans",sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,0.25);
  transition:all .2s;
}
.admin-toggle-btn:hover{background:var(--purple-light);transform:translateY(-2px);}
.admin-overlay{
  position:fixed;inset:0;background:rgba(20,16,30,0.5);
  z-index:1001;opacity:0;pointer-events:none;transition:opacity .2s;
}
.admin-overlay.open{opacity:1;pointer-events:auto;}
.admin-panel{
  position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;
  background:var(--dark2);border-left:1px solid var(--border-dark);
  z-index:1002;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .25s ease;
  font-family:"Plus Jakarta Sans",sans-serif;
}
.admin-panel.open{transform:translateX(0);}
.admin-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid var(--border-dark);
}
.admin-panel-header h3{color:#fff;font-size:16px;font-weight:600;}
.admin-close-btn{
  background:none;border:none;color:var(--text-muted-light);
  font-size:16px;cursor:pointer;padding:4px 8px;
}
.admin-close-btn:hover{color:#fff;}
.admin-panel-hint{
  padding:14px 24px;font-size:12px;line-height:1.6;
  color:var(--text-muted-light);border-bottom:1px solid var(--border-dark);
}
.admin-fields{flex:1;overflow-y:auto;padding:8px 24px 24px;}
.admin-group-title{
  color:var(--purple-soft);font-size:11px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  margin:20px 0 10px;
}
.admin-field{margin-bottom:12px;display:flex;flex-direction:column;gap:6px;}
.admin-field label{
  font-size:11px;color:var(--text-muted-light);letter-spacing:0.02em;
}
.admin-field input,.admin-field textarea{
  background:var(--dark3);border:1px solid var(--border-dark);
  border-radius:8px;padding:10px 12px;color:var(--text-light);
  font-family:"Plus Jakarta Sans",sans-serif;font-size:13px;
  resize:vertical;min-height:38px;
}
.admin-field textarea{min-height:72px;}
.admin-field input:focus,.admin-field textarea:focus{
  outline:none;border-color:var(--purple-soft);
}
.admin-panel-footer{
  display:flex;gap:10px;padding:16px 24px;
  border-top:1px solid var(--border-dark);
}
.admin-btn-primary,.admin-btn-secondary{
  flex:1;padding:12px 14px;border-radius:100px;
  font-size:13px;font-weight:600;cursor:pointer;border:none;
  font-family:"Plus Jakarta Sans",sans-serif;transition:all .2s;
}
.admin-btn-primary{background:var(--purple);color:#fff;}
.admin-btn-primary:hover{background:var(--purple-light);}
.admin-btn-secondary{background:transparent;color:var(--text-muted-light);border:1px solid var(--border-dark);}
.admin-btn-secondary:hover{color:#fff;border-color:var(--purple-soft);}

@media(max-width:480px){
  .admin-panel{width:100vw;}
}

/* ============================================================
   CONTACT FORM — spam check + result popup (added 2026-08-13)
   The question text is generated per page load by the inline
   script in index-kat.html; the popup opens after the AJAX
   submit to Netlify succeeds or fails.
   ============================================================ */
.cf-check label .cf-check-q{color:var(--purple-soft);letter-spacing:0.04em;}
.cf-check-err{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:#e8735a;}

.cform-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;}
.cform-modal[hidden]{display:none;}
.cform-modal-backdrop{position:absolute;inset:0;background:rgba(10,8,16,0.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.cform-modal-card{
  position:relative;max-width:440px;width:100%;
  background:var(--dark2);border:1px solid rgba(124,92,191,0.35);border-radius:20px;
  padding:40px 36px 32px;text-align:center;
  box-shadow:0 24px 80px rgba(0,0,0,0.5),0 0 60px rgba(124,92,191,0.15);
  animation:cformModalIn .28s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes cformModalIn{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:none;}}
.cform-modal-icon{
  width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;color:#fff;
  background:var(--purple);box-shadow:0 6px 24px rgba(124,92,191,0.45);
}
.cform-modal-icon.is-error{background:#e8735a;box-shadow:0 6px 24px rgba(232,115,90,0.4);}
.cform-modal-msg{margin:0 0 24px;color:var(--text-light);font-size:15.5px;line-height:1.7;font-weight:300;}
.cform-modal-close{min-width:140px;}

@media(max-width:480px){
  .cform-modal-card{padding:30px 22px 24px;}
}

.cform-privacy{margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--sec-muted,#a090c8);}
.cform-privacy a{color:var(--purple-soft);text-decoration:underline;text-underline-offset:2px;}

/* ============================================================
   COOKIE PREFERENCES PANEL + FOOTER LEGAL LINE (added 2026-08-14)
   The banner (.cookiebar) and this panel are built by
   assets/cookie-consent.js; strings come from cookies.* rows.
   Accept all and Reject all share .cookiebtn-primary on purpose —
   the CNIL wants refusing to look exactly as easy as accepting.
   ============================================================ */
.cprefs{position:fixed;inset:0;z-index:950;display:flex;align-items:center;justify-content:center;padding:24px;}
.cprefs[hidden]{display:none;}
.cprefs-backdrop{position:absolute;inset:0;background:rgba(10,8,16,0.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.cprefs-card{
  position:relative;max-width:560px;width:100%;max-height:min(84vh,720px);overflow:auto;
  background:var(--dark2);border:1px solid rgba(124,92,191,0.35);border-radius:20px;
  padding:34px 34px 28px;
  box-shadow:0 24px 80px rgba(0,0,0,0.5),0 0 60px rgba(124,92,191,0.15);
  animation:cformModalIn .28s cubic-bezier(.2,.9,.3,1.2) both;
}
.cprefs-title{
  font-family:"Outfit",Georgia,serif;font-size:24px;font-weight:600;letter-spacing:-0.02em;
  color:var(--text-light);margin:0 0 10px;
}
.cprefs-intro{margin:0 0 22px;font-size:13.5px;line-height:1.7;font-weight:300;color:var(--text-muted-light);}
.cprefs-row{padding:16px 0;border-top:1px solid rgba(255,255,255,0.08);}
.cprefs-row-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px;}
.cprefs-cat{font-size:14px;font-weight:600;color:var(--text-light);letter-spacing:0.01em;}
.cprefs-lock{
  font-size:10.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--purple-soft);background:rgba(124,92,191,0.16);
  border:1px solid rgba(124,92,191,0.4);border-radius:999px;padding:4px 10px;white-space:nowrap;
}
.cprefs-desc{margin:0;font-size:12.5px;line-height:1.65;font-weight:300;color:var(--text-muted-light);}
.cprefs-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.08);}
.cprefs-btns .cookiebtn{flex:1;min-width:130px;}

/* toggle switch — off by default, never pre-ticked */
.cswitch{position:relative;display:inline-block;width:46px;height:26px;flex:none;cursor:pointer;}
.cswitch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.cswitch-slider{
  position:absolute;inset:0;border-radius:999px;
  background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);
  transition:background .2s,border-color .2s;pointer-events:none;
}
.cswitch-slider::before{
  content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .2s;
}
.cswitch input:checked + .cswitch-slider{background:var(--purple);border-color:var(--purple);}
.cswitch input:checked + .cswitch-slider::before{transform:translateX(20px);}
.cswitch input:focus-visible + .cswitch-slider{outline:2px solid var(--purple-soft);outline-offset:2px;}

@media(max-width:480px){
  .cprefs{padding:0;align-items:flex-end;}
  .cprefs-card{border-radius:20px 20px 0 0;max-height:88vh;padding:26px 20px 22px;}
}

/* the legally required identification line in the footer */
.footer-legal{
  width:100%;text-align:center;
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px;font-weight:400;line-height:1.7;letter-spacing:0.03em;
  color:var(--text-muted-light);opacity:0.75;
}
.footer-legal span{white-space:nowrap;}