/* ==========================================================================
   KingfishX — Plan B "The Kingfisher", official brand kit
   Palette: KingfishX_Kleuren.pdf (cream ground, deep blue, brick, gold).
   Type: Geist (headings/UI) + Kantumruy Pro (body), per brand font proposal.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Kantumruy Pro";
  src: url("/assets/fonts/KantumruyPro-Variable.ttf") format("truetype");
  font-weight: 100 700;
  font-display: swap;
}

:root {
  --paper: #E8E6D8;          /* brand cream */
  --paper-raised: #F3F1E8;
  --wash: #DDDAC8;
  --ink: #271C1F;            /* brand near-black */
  --muted: #6B655F;
  --azure: #1D4865;          /* brand deep blue — primary/interactive */
  --azure-deep: #0E1D4D;     /* brand navy */
  --azure-soft: #D6D9D2;
  --rust: #AB4030;           /* brand brick — threat/alert */
  --rust-soft: #E5D2C5;
  --good: #17594A;           /* brand deep green — legit/success */
  --good-soft: #D6DECF;
  --gold: #D2A541;           /* brand gold — accent detail */
  --line: #D0CCBA;

  --serif: "Geist", system-ui, "Helvetica Neue", Arial, sans-serif;
  --sans: "Geist", system-ui, "Helvetica Neue", Arial, sans-serif;
  --body: "Kantumruy Pro", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 16px;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 16px; max-width: 64ch; }
a  { color: var(--azure); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azure);
  margin: 0 0 12px;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  padding: 13px 28px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--azure); color: #fff; }
.btn-primary:hover { background: var(--azure-deep); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--paper-raised); }
.btn-ghost:hover { border-color: var(--azure); color: var(--azure); }
.btn:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
}

/* ---------- header ---------- */

html { scroll-behavior: smooth; }
/* 66px shrunk-header + ~46px layout shift while the header shrinks mid-scroll */
section[id], .game-card[id] { scroll-margin-top: 124px; }

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 34px;
  padding-bottom: 34px;
  transition: padding 0.25s ease;
}
.site-header.shrunk .wrap {
  padding-top: 12px;
  padding-bottom: 12px;
}
.site-header.shrunk { box-shadow: 0 2px 14px rgba(23, 36, 43, 0.07); }
.logo {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: center;
}
.logo .x { color: var(--azure); }
.logo svg { display: block; margin-right: 10px; }
.logo img { display: block; height: 42px; width: auto; transition: height 0.25s ease; }
.site-header.shrunk .logo img { height: 20px; }
.site-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.site-nav a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--azure); }
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.78rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  text-decoration: none;
  color: var(--muted);
}
.lang-switch:hover { border-color: var(--azure); color: var(--azure); }
svg.flag { display: inline-block; width: 17px; height: auto; border-radius: 2px; flex: none; }
.site-footer svg.flag { width: 14px; margin-right: 5px; vertical-align: -1px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 9px;
  color: var(--ink);
  cursor: pointer;
  line-height: 0;
}
.nav-toggle:hover { border-color: var(--azure); color: var(--azure); }

/* ---------- hero ---------- */

.hero { padding: 72px 0 56px; }
/* keep the brand tagline on a single line: tighter tracking + a font size
   that scales with the column so it never wraps (two-column layout only) */
@media (min-width: 821px) {
  .hero .eyebrow {
    white-space: nowrap;
    letter-spacing: 0.1em;
    font-size: min(0.72rem, 1.08vw - 1px);
    max-width: none;
  }
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero .lede { font-size: 1.15rem; color: var(--muted); }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.hero-login { margin-top: 16px; font-size: 0.88rem; color: var(--muted); }
.hero-login a { color: var(--azure); }

/* refraction panel — the domain "underwater", snapping into focus */
.refract-panel {
  background: linear-gradient(175deg, var(--azure-soft), var(--wash));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 46px 26px;
  text-align: center;
  overflow: hidden;
}
.refract-domain {
  font-family: var(--mono);
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  color: var(--azure-deep);
  filter: url(#water);
  will-change: filter;
  white-space: nowrap;
}
.refract-caption {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 22px 0 0;
}
.refract-caption strong { color: var(--rust); }

/* ---------- ticker ---------- */

.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-raised);
  overflow: hidden;
  padding: 10px 0;
}
.ticker-inner {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: ticker 48s linear infinite;
}
.ticker span {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}
.ticker span.flag { color: var(--rust); }
.ticker span.flag::before { content: "⚑ "; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-inner { animation: none; }
}

/* ---------- sections ---------- */

section { padding: 72px 0; }
section.alt { background: var(--paper-raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* stats as editorial pull-quotes */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 36px;
  margin-top: 40px;
}
.stat .num {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--azure-deep);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat:nth-child(2) .num { color: var(--rust); }
.stat p { font-size: 0.92rem; color: var(--muted); margin: 10px 0 0; }

/* features as field notes */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 36px;
}
.feature {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 26px;
}
section.alt .feature { background: var(--paper); }
.feature h3 { margin-bottom: 8px; }
.feature h3::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
  margin-bottom: 14px;
}
.feature p { font-size: 0.94rem; color: var(--muted); margin: 0; }

/* mission / vision */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 32px;
}
blockquote {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.5;
  margin: 0;
  padding-left: 20px;
  border-left: 3px solid var(--azure);
}
blockquote.rust { border-left-color: var(--rust); }

/* value props */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 36px; }

/* team */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 36px;
}
.member {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 28px;
}
section.alt .member { background: var(--paper); }
.member .role {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
  margin: -6px 0 12px;
}
.member p { font-size: 0.94rem; color: var(--muted); margin-bottom: 0; }
.member .face {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 18px;
  display: block;
  filter: grayscale(1) sepia(0.5) contrast(1.02) brightness(1.03);
}

/* mood images */
section.mood { padding: 8px 0 72px; }
/* takedown illustration: flagged domain -> takedown -> offline */
.takedown-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.takedown-vis { margin: 0; }
.takedown-vis svg { display: block; width: 100%; max-width: 420px; height: auto; }

/* the 7s detonation loop: plunger down -> spark along the wire ->
   flagged domain explodes -> "offline" card takes its place -> reset */
.tdx-plunger, .tdx-bad, .tdx-boom {
  transform-box: fill-box;
  transform-origin: center;
}
.tdx-plunger { animation: tdx-plunger 5s ease-in-out infinite; }
.tdx-spark { opacity: 0; animation: tdx-spark 5s linear infinite; }
.tdx-bad { animation: tdx-bad 5s ease-in-out infinite; }
.tdx-boom { opacity: 0; animation: tdx-boom 5s ease-out infinite; }
.tdx-off { opacity: 0; animation: tdx-off 5s ease-in-out infinite; }

@keyframes tdx-plunger {
  0%, 14% { transform: translateY(0); }
  17%, 76% { transform: translateY(23px); } /* shaft sinks in; the T-handle rests on the box top */
  84%, 100% { transform: translateY(0); }
}
@keyframes tdx-spark {
  0%, 16% { stroke-dashoffset: 10; opacity: 0; }
  18% { stroke-dashoffset: 10; opacity: 1; }
  34% { stroke-dashoffset: -100; opacity: 1; }
  35%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes tdx-bad {
  0%, 34% { opacity: 1; transform: none; }
  36% { transform: translate(2px, -1px); }
  38% { transform: translate(-2px, 1px); }
  40% { transform: translate(1px, 0); opacity: 1; }
  46% { opacity: 0; transform: scale(0.9); }
  92% { opacity: 0; transform: scale(0.9); }
  98%, 100% { opacity: 1; transform: none; }
}
@keyframes tdx-boom {
  0%, 38% { opacity: 0; transform: scale(0.5); }
  44% { opacity: 1; transform: scale(1); }
  52%, 100% { opacity: 0; transform: scale(1.25); }
}
@keyframes tdx-off {
  0%, 44% { opacity: 0; }
  52%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tdx-plunger, .tdx-spark, .tdx-bad, .tdx-boom, .tdx-off { animation: none; }
  .tdx-spark, .tdx-boom, .tdx-off { opacity: 0; }
  .tdx-bad { opacity: 1; }
}

/* screenshot carousel — the next slide peeks in from the right */
.carousel-stage {
  position: relative;
  overflow: hidden;
  transition: height 0.35s ease;
  touch-action: pan-y; /* horizontal gestures drive the carousel, vertical still scrolls the page */
  cursor: grab;
}
.carousel-stage.is-dragging { cursor: grabbing; }
.carousel-track {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  transition: transform 0.45s ease;
  user-select: none;
  -webkit-user-select: none;
}
.carousel-slide {
  flex: 0 0 86%;
  margin: 0;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.35s ease;
}
.carousel-slide.is-active { opacity: 1; cursor: grab; }
.carousel-slide img { -webkit-user-drag: none; }
/* all slides share the ratio of the tallest screenshot (set by hero.js);
   shorter images are letterboxed inside a thin framed box */
.carousel-slide img {
  display: block;
  width: 100%;
  aspect-ratio: var(--carousel-ratio, 3.013);
  height: auto;
  object-fit: contain;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
}
.carousel-slide figcaption {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 8px;
  text-align: right;
}
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}
.carousel-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 0;
}
.carousel-btn:hover { border-color: var(--azure); color: var(--azure); }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.carousel-dot.is-active { background: var(--azure); border-color: var(--azure); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel-stage, .carousel-track, .carousel-slide { transition: none; }
}
.about-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.about-hero figure { margin: 0; }
.about-hero img {
  display: block;
  width: 100%;
  border-radius: 14px;
  object-fit: cover;
  aspect-ratio: 8 / 5;
}

/* contact */
.contact-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 56px;
  margin-top: 32px;
}
/* title stays at the top; the info lines bottom-align with the form,
   so the LinkedIn link (last line) ends level with the Tally embed */
.contact-details { display: flex; flex-direction: column; }
.contact-details :not(.contact-line) + .contact-line { margin-top: auto; padding-top: 24px; }
.contact-details p { margin-bottom: 10px; }
.contact-details p:last-child { margin-bottom: 0; }
.contact-details .m { font-family: var(--mono); font-size: 0.92em; }
.contact-line { display: flex; align-items: flex-start; gap: 10px; }
.contact-line svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--azure);
}
form label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 6px;
}
form input, form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
form input:focus, form textarea:focus {
  outline: 2px solid var(--azure);
  outline-offset: 0;
  border-color: var(--azure);
}
form button { margin-top: 22px; }

/* contact form (Tally embed): the grid starts at the lede, so the iframe
   top lines up with the intro text */
.form-embed iframe {
  width: 100%;
  height: 580px;
  border: 0;
  /* the Tally embed is transparent (transparentBackground=1); let the
     section background show through instead of painting our own block */
  background: transparent;
}

/* ---------- game modal ---------- */

.game-modal {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  width: min(940px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(23, 36, 43, 0.35);
}
.game-modal::backdrop { background: rgba(39, 28, 31, 0.55); }
body:has(.game-modal[open]) { overflow: hidden; }
.game-modal-inner { padding: 24px 28px 30px; }
.game-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.game-modal-head .eyebrow { margin-bottom: 6px; }
.game-modal-head h3 { font-size: 1.35rem; margin-bottom: 0; }
.game-modal-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  line-height: 0;
}
.game-modal-close:hover { border-color: var(--azure); color: var(--azure); }
.game-modal .game-card {
  margin-top: 22px;
  border: 0;
  padding: 0;
  background: transparent;
}
@media (max-width: 820px) {
  /* a fixed height keeps the dialog (and its buttons) in place while
     the reveal below the fold grows and shrinks between rounds */
  .game-modal { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: none; }
  .game-modal-inner { padding: 18px 18px 24px; }
}

/* mobile wizard: step 1 is the brand picker, step 2 the quiz */
.game-card.dt-wizard { grid-template-columns: 1fr; }
.dt-wizard .try-own { border-right: 0; border-bottom: 0; padding: 0; }
.dt-wizard.dt-started #dt-tryown { display: none; }
.dt-wizard:not(.dt-started) #dt-quiz { display: none; }
.dt-back {
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 14px;
  color: var(--azure);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- game ---------- */

.game-cta { margin-top: 28px; }

.game-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 34px 34px 28px;
  margin-top: 36px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 36px;
  align-items: start;
}
section.alt .game-card { background: var(--paper); }
.game-card .prompt { font-size: 0.95rem; color: var(--muted); margin-bottom: 6px; }
.game-domain {
  font-family: var(--mono);
  font-size: clamp(1.15rem, 3.6vw, 1.7rem);
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 20px;
  text-align: center;
  margin: 14px 0 20px;
  overflow-x: auto;
  white-space: nowrap;
}
.game-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.game-btns button {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 12px 28px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.game-btns button:hover { border-color: var(--azure); }
.game-btns button.primary { background: var(--azure); border-color: var(--azure); color: #fff; }
.game-btns button:disabled { opacity: 0.45; cursor: default; }

.game-verdict {
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 20px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.game-verdict.ok  { background: var(--good-soft); color: var(--good); }
.game-verdict.bad { background: var(--rust-soft); color: var(--rust); }

/* the "engine view": per-character analysis */
.engine-view {
  margin-top: 18px;
  padding: 18px;
  background: var(--wash);
  border-radius: 10px;
}
.engine-view .ev-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.ev-chars { display: flex; flex-wrap: wrap; gap: 5px; }
.ev-char {
  font-family: var(--mono);
  font-size: 1.05rem;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  min-width: 30px;
  text-align: center;
}
.ev-char.bad {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
  font-weight: 700;
}
.ev-note { font-size: 0.82rem; color: var(--muted); margin: 12px 0 0; }
.ev-note strong { color: var(--rust); }

/* homoglyph compare card */
.glyph-compare {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.glyph {
  flex: 1;
  min-width: 140px;
  text-align: center;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 12px;
}
.glyph .g {
  font-family: var(--mono);
  font-size: 3rem;
  line-height: 1.1;
}
.glyph.fake .g { color: var(--rust); }
.glyph.real .g { color: var(--good); }
.glyph .cp {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  display: block;
  margin-top: 6px;
}

.game-meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 22px;
  font-variant-numeric: tabular-nums;
}

/* result + personalization */
.game-result h3 { font-size: 1.5rem; }
.try-own {
  border-right: 1px solid var(--line);
  padding-right: 36px;
  align-self: stretch;
}
.try-own h3 { margin-bottom: 6px; }
.try-own .row { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.try-own input {
  flex: 1;
  min-width: 200px;
  font-family: var(--mono);
  font-size: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 14px;
  background: var(--paper-raised);
  color: var(--ink);
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-raised);
  padding: 40px 0;
  font-size: 0.86rem;
  color: var(--muted);
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--azure); }
.site-footer .footer-abbr { display: none; }

/* legal pages (privacy & cookies) */
.legal .wrap { max-width: 780px; }
.legal h1 { margin-bottom: 10px; }
.legal .legal-updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 36px; }
.legal .lede { font-size: 1.1rem; color: var(--muted); }
.legal h2 { font-size: 1.3rem; margin: 44px 0 12px; }
.legal p { margin: 0 0 14px; }

/* ---------- responsive ---------- */

@media (max-width: 820px) {
  .hero .wrap, .about-hero, .game-card, .takedown-grid { grid-template-columns: 1fr; }
  .site-header .wrap { padding-top: 20px; padding-bottom: 20px; }
  .logo img { height: 30px; }
  .try-own {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 24px;
  }
  .hero { padding-top: 44px; }
  section { padding: 56px 0; }

  /* stats: a compact 2x2 grid */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }

  /* card rows become swipeable strips (scroll-snap, next card peeks in) */
  .features, .values, .team-grid, .two-col {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 6px;
  }
  .features::-webkit-scrollbar, .values::-webkit-scrollbar,
  .team-grid::-webkit-scrollbar, .two-col::-webkit-scrollbar { display: none; }
  .features > *, .values > *, .team-grid > *, .two-col > * {
    flex: 0 0 84%;
    min-width: 0;
    scroll-snap-align: center;
  }
  /* mission/vision get a card treatment so the swipe strip reads as one */
  .two-col > div {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 22px 24px;
  }
  .two-col blockquote { font-size: 0.95rem; line-height: 1.55; }

  /* contact: the form first, the details after */
  .contact-grid { display: flex; flex-direction: column; gap: 40px; }
  .contact-grid .form-embed { order: -1; }

  /* footer: just NL / EN on the left, © KFX on the right */
  .site-footer .wrap { flex-wrap: nowrap; align-items: center; }
  .site-footer .footer-page, .site-footer .footer-full { display: none; }
  .site-footer .footer-abbr { display: inline; }

  /* hamburger menu */
  .site-header .wrap { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 8px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 13px 2px; border-top: 1px solid var(--line); }
  .site-nav .lang-switch {
    align-self: flex-start;
    margin-top: 12px;
    padding: 6px 12px;
    border: 1px solid var(--line);
  }
}