/* GENERATED FILE — do not hand-edit.
   Source: tooling/css-src/*.css, concatenated by tooling/concat-css.mjs in cascade order.
   To change a rule, edit the matching file in tooling/css-src/ and re-run:
     node tooling/concat-css.mjs
*/

/* ==== tokens.css ==== */
/* Design tokens — Basketbola skola Ķeizars. Exact hex/gradient/shadow values from the handoff.
   Ranged values (radius, line-height, letter-spacing) are pinned to single values per Step 6;
   see CLAUDE.md decision log, 2026-08-06. */
:root {
  /* Fire ramp */
  --sun: #FFD100;
  --flame: #FF7A00;
  --ember: #FF3B00;
  --ljbl: #FF5F00;
  --blood: #F5000F;
  --crimson: #B00003;
  --maroon: #6E0000;

  /* Neutrals */
  --ink: #0B0908;
  --coal: #16120E;
  --coal-2: #141210;
  --line: rgba(246, 241, 234, .08);
  --muted-0: #5A544C; /* fails WCAG AA on ink at 2.66:1 — do not use for text until replaced, see decision log */
  --muted-1: #7A7268;
  --muted-2: #8C8378;
  --muted-3: #A79C8E;
  --text-1: #C9BEB0;
  --text-2: #D8CFC3;
  --text-3: #E8E0D5;
  --bone: #F6F1EA;
  --cta-text: #150A02;
  --white: #FFFFFF;
  --star-off: #4A4038;
  --cta-bg-stop: #341608;
  --overlay: rgba(9, 6, 4, .94);

  /* Gradients */
  --grad-cta: linear-gradient(100deg, #FF9A3C, #FF7A00 40%, #FF3B00);
  --grad-hero-tint: linear-gradient(150deg, rgba(255, 209, 0, .16), rgba(255, 122, 0, .10) 45%, rgba(110, 0, 0, .32));
  --grad-hero-scrim: linear-gradient(180deg, rgba(11, 9, 8, .4) 0%, rgba(11, 9, 8, 0) 30%, rgba(60, 10, 0, .35) 100%);
  --grad-divider: linear-gradient(90deg, transparent, rgba(255, 122, 0, .22), transparent);
  --grad-cta-section: radial-gradient(120% 90% at 50% 0%, #341608 0%, #0B0908 60%);
  --grad-sheen: linear-gradient(90deg, transparent, rgba(255, 235, 200, .45), transparent);

  /* Shadows */
  --sh-card-hover: 0 24px 50px -24px rgba(0, 0, 0, .8);
  --sh-cta: 0 8px 24px -10px rgba(255, 122, 0, .6);
  --sh-hero: 0 40px 100px -40px rgba(0, 0, 0, .9);

  /* Radius */
  --r-card: 20px;
  --r-media: 14px;
  --r-cta: 14px;
  --r-chip: 12px;
  --r-pill: 100px;

  /* Spacing (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Responsive rhythm and layout — mobile base */
  --section-y: 64px;
  --pad-x: 22px;
  --content-max: 100%;
  /* Fixed nav height, mobile/tablet share the 46px logo; matches .site-header's own padding.
     Used both to push page content clear of the fixed header and as scroll-margin-top so
     anchor-jumps (#komandas etc.) don't land underneath it. */
  --header-h: 78px;

  /* Type */
  --ff-display: 'Archivo Variable', 'Archivo', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
  --lh-body: 1.6;
  --lh-display: 0.93;
  --ls-display: -0.03em;
  --ls-eyebrow: 0.18em;
  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-body: 15px;

  /* Motion */
  --ease-emperor: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ember: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --section-y: 90px;
    --pad-x: 40px;
    --content-max: 720px;
    --fs-h1: 78px;
    --fs-h2: 52px;
    --fs-body: 16px;
  }
}

@media (min-width: 1280px) {
  :root {
    --section-y: 120px;
    --pad-x: 80px;
    --content-max: 1280px;
    --fs-h1: 92px;
    --fs-h2: 64px;
    --fs-body: 17px;
    --header-h: 84px;
  }
}

/* ==== base.css ==== */
/* Font faces (variable, latin-ext then latin — browser picks by codepoint) and element reset. */

@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body, h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }

img, picture, svg, video { display: block; max-width: 100%; }

body {
  background: var(--ink);
  color: var(--text-1);
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--ff-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--bone);
  /* Defensive: at this weight/size a single long word (e.g. "Privātuma") can be wider than a
     narrow mobile container with nowhere to break. The homepage hero controls its own line breaks
     explicitly and is unaffected; this is the safety net for every other heading. */
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 {
  font-family: var(--ff-display);
  font-weight: 900;
  color: var(--bone);
  font-size: 20px;
  line-height: 1.15;
}
@media (min-width: 768px) { h3 { font-size: 22px; } }
@media (min-width: 1280px) { h3 { font-size: 24px; } }

a { color: inherit; text-decoration: none; }

button, input { font: inherit; }

ul, ol { list-style: none; padding: 0; }

:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; }

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

/* ==== layout.css ==== */
/* Layout primitives: container, section rhythm, eyebrow. Shared across every section. */

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Every <section> gets the vertical rhythm and a top hairline flame divider, except the hero
   (no divider above the first section). */
main > section {
  padding-block: var(--section-y);
  position: relative;
}

main > section + section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grad-divider);
}

/* Eyebrow: 2px flame rule + JetBrains Mono uppercase gold label. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--sun);
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--flame);
}

/* Tablet hero variant: centered with a rule on both sides (Option B, see README).
   Scoped to the tablet range only — mobile and desktop keep the left-aligned default. */
@media (min-width: 768px) and (max-width: 1279px) {
  .eyebrow--centered {
    justify-content: center;
  }
  .eyebrow--centered::after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--flame);
  }
}

@media (min-width: 768px) {
  .eyebrow { font-size: 12px; }
}

/* ==== components.css ==== */
/* Global static components: primary CTA button, card shell, nav chrome, footer chrome.
   Static only — glow/hover motion is added in Step 19. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 56px;
  padding-inline: var(--sp-8);
  border: none;
  border-radius: var(--r-cta);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  cursor: pointer;
}

.btn-cta {
  background: var(--grad-cta);
  color: var(--cta-text);
  box-shadow: var(--sh-cta);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  min-height: 44px;
  padding-inline: var(--sp-6);
}
.btn-outline:hover { border-color: rgba(255, 122, 0, .4); color: var(--bone); }

/* Consent gate (Step 24) — [hidden] driven, same pattern as the nav overlay: broken JS just leaves
   it never shown rather than stuck. No analytics script loads before explicit consent; this banner
   only ever gates an in-memory dataLayer push (see app.js), never a network request itself. */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: rgba(11, 9, 8, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.consent-banner[hidden] { display: none; }
.consent-banner__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--sp-6) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.consent-banner__inner p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.consent-banner__inner a { color: var(--flame); text-decoration: underline; }
.consent-banner__actions {
  display: flex;
  gap: var(--sp-3);
}
.consent-banner__actions .btn { min-height: 44px; padding-inline: var(--sp-6); font-size: 14px; }

@media (min-width: 768px) {
  .consent-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .consent-banner__actions { flex: 0 0 auto; }
}

.card {
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-6);
}

/* Nav chrome — fixed bar, always visible while scrolling, logo left / actions right.
   Content (logo image, links, hamburger) is wired in Steps 9 and 18.
   Was a transparent overlay on the hero only; operator asked for a sticky nav (2026-08-06), so it's
   fixed everywhere with a frosted-glass background so it reads against any section behind it. Page
   content gets `padding-top: var(--header-h)` (on .hero) to sit clear of it, and every jump target
   gets `scroll-margin-top: var(--header-h)` so anchor links don't land underneath it. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: var(--header-h);
  background: rgba(11, 9, 8, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* The frosted bar itself stays full-bleed (spans the whole top edge); the actual brand/nav/actions
   row is capped to the same centered content column as every section (operator request
   2026-08-06: on very wide screens the old edge-to-edge layout pushed the logo into the far left
   corner and the CTA into the far right corner). */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

section[id], footer[id] {
  scroll-margin-top: var(--header-h);
}

.site-header__brand {
  /* Defensive: without this, a tight-but-not-quite-tight-enough header (nav links + CTA fighting
     for space) can shrink this flex item to 0 width instead of wrapping/overflowing visibly - the
     logo just silently vanishes. Never let it shrink; the breakpoint math is sized so the header
     only ever gets this content in the first place once there's room for it (2026-08-06). */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.site-header__logo img {
  height: 46px;
  width: auto;
  border-radius: var(--r-chip);
}
/* Plain <img>, not a link (operator request 2026-08-06): shown purely as an affiliation mark. */
.site-header__rbs-logo {
  height: 28px;
  width: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.site-header__navlinks {
  display: none;
  align-items: center;
  gap: var(--sp-6);
}

.navlink {
  position: relative;
  white-space: nowrap;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}
.navlink:hover { color: var(--bone); }

.site-header__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--bone);
}

.site-header__nav-cta {
  display: none;
  /* min-height stays the base .btn 56px (Step 28 a11y audit: every tel: link needs a >=56px
     touch target) - only the horizontal padding/font-size shrink to fit the header. */
  padding-inline: var(--sp-6);
  padding-block: var(--sp-3);
  border-radius: var(--r-pill);
  font-size: 14px;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: rgba(246, 241, 234, .10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--bone);
  border-radius: 2px;
}

@media (min-width: 768px) {
  .site-header__nav-cta { display: inline-flex; }
}

/* Nav overlay (Step 18) — full-screen menu opened by .hamburger, wired for mobile and tablet
   (tablet's hamburger was only a visual placeholder in the prototype; it uses the same overlay
   here, not a separate one). Hidden by default with no JS required: [hidden] wins over any other
   display rule, so a JS failure just leaves the hamburger visually inert rather than broken. */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--overlay);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav-overlay[hidden] { display: none; }

.nav-overlay__close {
  position: absolute;
  top: var(--sp-6);
  right: var(--pad-x);
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: rgba(246, 241, 234, .06);
  color: var(--bone);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.nav-overlay__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.nav-overlay__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--bone);
}
.nav-overlay__link:hover { color: var(--flame); }
.nav-overlay__link span {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--flame);
}

@media (min-width: 1280px) {
  .site-header__logo img { height: 52px; }
  .site-header__rbs-logo { height: 36px; }
  .site-header__navlinks { display: flex; }
  .hamburger { display: none; }
}

/* Back-to-top chevron — all breakpoints, including mobile (operator request, 2026-08-06). Anchor
   link, so it still works with no JS; visibility (hidden until the visitor has scrolled down about
   one screen) is JS-driven (app.js `backToTop()`), fails safe hidden if JS is broken/blocked - same
   pattern as the nav overlay and consent banner. */
.back-to-top {
  display: flex;
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 40;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(22, 18, 14, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  color: var(--flame);
  box-shadow: var(--sh-card-hover);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--ease-emperor), visibility .3s var(--ease-emperor);
}
.back-to-top--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.back-to-top:hover {
  color: var(--bone);
  border-color: rgba(255, 122, 0, .4);
  background: var(--coal);
}

/* Footer chrome — coal-2 panel. Content (logo, contact, social, bottom bar) is wired in Step 17.
   No padding-inline here: the closing-cta band above needs to reach full width edge to edge
   (it was getting boxed in by this padding). Horizontal inset comes from the .container divs inside
   instead, same as every other section. */
.site-footer {
  background: var(--coal-2);
}
.site-footer > .container {
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-8);
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

@media (min-width: 768px) {
  .site-footer .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
  .site-footer .footer-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==== hero.css ==== */
/* Hero section: mobile sequential stack (image, then copy), tablet Option B centered stack,
   desktop 44/56 split. One markup, three layouts via media queries — no separate DOM per breakpoint.
   Ground truth: _reference/keizars-design-handoff/standalone/*.html (screenshotted for this build).
   Revised 2026-08-06 per operator feedback: mobile no longer overlaps text on the image (image reads
   fully, then copy follows); tablet/desktop get real side margins; extra breathing room added
   throughout. See CLAUDE.md decision log. */

.hero {
  /* Overrides the generic `main > section` rhythm from layout.css — the hero manages its own
     spacing internally via hero-copy/hero-media/marquee, and needs to sit flush at the top. */
  padding-block: 0;
  /* Clears the fixed .site-header (2026-08-06: nav went from a hero-only overlay to sticky
     everywhere), so nothing starts hidden underneath it. */
  padding-top: var(--header-h);
  position: relative;
  background: var(--ink);
  overflow: hidden;
}

/* ---- Mobile (base): sequential flex column, image first (order:-1), copy follows below. ---- */
.hero-inner {
  display: flex;
  flex-direction: column;
}

.hero-media {
  order: -1;
  position: relative;
  aspect-ratio: 1131 / 944;
  width: 100%;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-media__scrim {
  position: absolute;
  inset: 0;
  background: var(--grad-hero-scrim);
  pointer-events: none;
}
.hero-media__tint {
  position: absolute;
  inset: 0;
  background: var(--grad-hero-tint);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.hero-copy {
  position: relative;
  padding: var(--sp-8) var(--pad-x) var(--sp-12);
}

.hero-copy .eyebrow { margin-bottom: var(--sp-4); }

.hero-h1 { margin-top: 0; }
.text-flame { color: var(--flame); }

.hero-sub {
  margin-top: var(--sp-4);
  /* No max-width on mobile — the line-length cap is only useful once the column is wide enough
     that unconstrained text would look too long; on mobile it just left dead space on the right. */
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}
.hero-sub b { color: var(--bone); font-weight: 700; }

.hero-cta-row {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}
.hero-cta-row .btn-cta { width: 100%; }
.hero-secondary {
  display: none; /* hidden on mobile, per the locked prototype (single primary action) */
  align-items: center;
  gap: var(--sp-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}

/* H1 is 2 lines (Mēs esam / Ķeizars) on mobile and tablet, 3 lines (Mēs / esam / Ķeizars) on
   desktop only, per operator request 2026-08-06. */
.hero-h1__br-tablet-off { display: none; }
@media (min-width: 1280px) {
  .hero-h1__br-tablet-off { display: inline; }
}

.marquee-bar {
  position: relative;
  margin-top: var(--sp-12);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11, 9, 8, .4), var(--ink));
}
/* The band (border/gradient) stays full-bleed; the scrolling text is clipped to the same centered
   content column as everything else (operator request 2026-08-06: on very wide screens the old
   edge-to-edge marquee scrolled across the whole viewport instead of the hero's content width). */
.marquee-viewport {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  overflow: hidden;
}
.marquee-track {
  display: flex;
  white-space: nowrap;
  /* transform/animation added in Step 19 (motion layer) */
}
.marquee-run {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-4) var(--sp-8) var(--sp-4) 0;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(246, 241, 234, .42);
}

/* ---- Tablet and up: hero-inner gets real side margins, matching every other section. ---- */
@media (min-width: 768px) {
  .hero-inner {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--pad-x);
  }
  .marquee-bar { margin-top: var(--sp-16); }
}

/* ---- Tablet (768-1279): Option B — centered stack. ---- */
@media (min-width: 768px) and (max-width: 1279px) {
  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hero-copy {
    /* .hero's own padding-top already clears the fixed nav — this is just breathing room after it,
       not full nav-clearance (that was the old 160px, from when nav was an absolute overlay). */
    padding: var(--sp-8) 0 0;
  }
  .hero-sub { max-width: 56ch; margin-inline: auto; font-size: 16px; }
  .hero-cta-row {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .hero-cta-row .btn-cta { width: auto; }
  .hero-secondary { display: inline-flex; }
  .hero-media {
    order: 0;
    margin-top: var(--sp-12);
    border-radius: var(--r-media);
    box-shadow: var(--sh-hero);
  }
}

/* ---- Desktop (>=1280): 44/56 split. ---- */
@media (min-width: 1280px) {
  .hero {
    background: radial-gradient(1100px 700px at 78% 8%, #1a1310 0%, var(--ink) 60%);
  }
  .hero-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-16);
    /* .hero's own padding-top already clears the fixed nav — this is just breathing room after it,
       not full nav-clearance (that was the old 170px, from when nav was an absolute overlay). */
    padding-top: var(--sp-12);
  }
  .hero-copy {
    order: 0;
    flex: 0 0 44%;
    max-width: 44%;
    padding: 0;
    text-align: left;
  }
  .hero-sub { max-width: 56ch; margin-inline: 0; font-size: 18px; }
  .hero-cta-row {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .hero-cta-row .btn-cta { width: auto; }
  .hero-secondary { display: inline-flex; }
  .hero-media {
    order: 0;
    flex: 1 1 auto;
    margin-top: 0;
    border-radius: 24px;
    border: 1px solid var(--line);
    box-shadow: var(--sh-hero);
  }
}

/* ==== content.css ==== */
/* Steps 11-17: content sections. Card markup for these sections is generated at author time by
   tooling/render-sections.mjs from public/js/data.js (see CLAUDE.md decision log, 2026-08-06). */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
}
.section-head__aside {
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-3);
}
.section-intro {
  margin-top: var(--sp-4);
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted-3);
}
.container--narrow { max-width: 800px; }
@media (max-width: 767px) { .container--narrow { max-width: 100%; } }
@media (min-width: 768px) and (max-width: 1279px) { .container--narrow { max-width: 720px; } }

/* ---- Legal content (privacy policy) - Step 33 prep, 2026-08-07 ---- */
.legal-content { color: var(--text-2); font-size: 16px; line-height: 1.6; }
.legal-content h3 { margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.legal-content h3:first-child { margin-top: var(--sp-6); }
.legal-content p { margin-top: var(--sp-3); }
.legal-content ul { margin-top: var(--sp-3); padding-left: 1.2em; list-style: disc; }
.legal-content li { margin-top: var(--sp-2); }
.legal-content li::marker { color: var(--flame); }
.legal-content a { color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }
/* Same fix as the footer phone link (Step 28 a11y audit): a plain text-sized tel: link is only
   ~17px tall, well under the 56px touch-target minimum every tel: link needs. Expand the hit area
   with an absolutely positioned ::after instead of padding, so the paragraph's line spacing and
   text flow are untouched (2026-08-07). */
.legal-content a[href^="tel:"] {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.legal-content a[href^="tel:"]::after {
  content: '';
  position: absolute;
  inset: -18px 0;
}
.legal-content a:hover { color: var(--flame); }
/* table-layout:fixed forces columns to share the container's width instead of auto-sizing to each
   cell's unwrapped content - without it, a long unbroken phrase in one cell (e.g. "Derīguma
   termiņš") pushes the whole table wider than its column and overflows the page on mobile. The
   wrapping div is a second line of defense: if any single word still can't shrink enough, the
   table scrolls within itself instead of taking the page with it (2026-08-07). */
.legal-content__table-wrap { overflow-x: auto; }
.legal-content table { margin-top: var(--sp-4); width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.legal-content th, .legal-content td { text-align: left; padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
.legal-content th { color: var(--muted-3); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.legal-content__updated { margin-top: var(--sp-2); font-size: 13px; color: var(--muted-2); }

.card-grid {
  margin-top: var(--sp-12);
  display: grid;
  /* minmax(0, 1fr), not plain 1fr: a plain 1fr track won't shrink below its content's min-content
     width, so a wide nowrap phone-number button forces the whole grid to overflow its container. */
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
@media (min-width: 768px) and (max-width: 1279px) {
  .card-grid--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .card-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Teams (Step 11) ---- */
.team-card {
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.team-card__top {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.team-card__year-col { flex: 1 1 auto; min-width: 0; }
.team-card__year {
  margin-top: var(--sp-2);
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 56px;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--bone);
  /* Defensive: a narrow year-column (long 3-col grid rows, or a translated year label) can be
     tighter than a single unbreakable run of digits like "2017". Without this the text has no
     break opportunity and silently overflows underneath the logo instead of wrapping (2026-08-06). */
  overflow-wrap: anywhere;
}
.team-card--long-year .team-card__year { font-size: 40px; }
.team-card__logo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: var(--r-media);
  overflow: hidden;
  border: 1px solid var(--line);
}
@media (min-width: 768px) {
  .team-card__logo { width: 96px; height: 96px; }
}
.team-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
}
.team-card__field-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-1);
  margin-bottom: 4px;
}
.team-card__field-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-3);
}
.team-card__note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-2);
}
/* Compact variant: label + separator + phone number packed into one full-width button.
   The number must never wrap (a split phone number is unreadable) — nowrap + flex-shrink:0.
   The label is allowed to wrap onto two lines instead: on a narrow card that's what relieves the
   pressure, rather than a fixed small font-size guessed against approximate text-width math (that
   approach still overflowed on some tablet widths). `margin-top: auto` pins the button to the
   bottom of the card, so buttons line up across a row even when the content above them (venue
   name, bio length, chip count) differs in length — see CLAUDE.md decision log, 2026-08-06. */
.team-card .btn-cta,
.trainer-card .btn-cta {
  width: 100%;
  margin-top: auto;
  flex-wrap: wrap;
  row-gap: 2px;
  column-gap: var(--sp-2);
  padding-block: var(--sp-3);
  padding-inline: var(--sp-4);
}
.btn-cta__label {
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .03em;
}
/* Separator and number travel together as one wrappable unit — if there's no room, the whole
   "· 2 78 75 844" pair drops to its own line rather than a lone separator dangling after the label. */
.btn-cta__num-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-cta__sep { opacity: .4; }
.btn-cta__num { font-family: var(--ff-mono); font-weight: 700; font-size: 14px; }

/* ---- Trainers (Step 12) ---- */
.trainer-card {
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
@media (min-width: 1280px) {
  .trainer-card { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
  .trainer-card__head { flex: 0 0 100%; }
}
.trainer-card__head {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
}
.trainer-card__photo {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 122, 0, .25);
}
.trainer-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.trainer-card__role {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-1);
  margin-bottom: 5px;
}
.trainer-card__name { font-size: 24px; }
.trainer-card__years {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}
.trainer-card__years-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-1);
  margin-right: 2px;
}
.year-chip {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--sun);
  border: 1px solid rgba(255, 122, 0, .35);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}
.trainer-card__bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-3);
  flex: 1 1 auto;
}

/* ---- Locations (Step 13) ---- */
.location-card {
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.location-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-media);
  overflow: hidden;
  border: 1px solid var(--line);
}
.location-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.location-card__name { font-size: 19px; font-weight: 700; color: var(--bone); letter-spacing: -.01em; }
.location-card__address { font-size: 14px; color: var(--muted-2); margin-top: 4px; }
.location-note {
  grid-column: 1 / -1;
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: var(--sp-6);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-3);
}

/* ---- Tournaments (Step 14) ---- */
.tournament-tile {
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  text-align: center;
}
.tournament-tile__logo-box {
  width: 100%;
  height: 120px;
  border-radius: var(--r-media);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.tournament-tile__logo-box img { max-width: 100%; object-fit: contain; }
.tournament-tile__name { font-size: 16px; font-weight: 700; color: var(--bone); line-height: 1.3; letter-spacing: -.01em; }

/* ---- Reviews (Step 15) ---- */
.reviews-arrows { display: none; align-items: center; gap: var(--sp-3); }
@media (min-width: 768px) { .reviews-arrows { display: flex; } }
.reviews-arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(246, 241, 234, .04);
  color: var(--bone);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reviews-arrow--next {
  border-color: rgba(255, 122, 0, .4);
  background: rgba(255, 122, 0, .1);
  color: var(--flame);
}
.reviews-track {
  margin-top: var(--sp-12);
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--sp-2);
  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar { display: none; }
.review-card {
  flex: 0 0 88%;
  scroll-snap-align: start;
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
@media (min-width: 768px) and (max-width: 1279px) {
  .review-card { flex-basis: calc((100% - 22px) / 2); }
}
@media (min-width: 1280px) {
  .review-card { flex-basis: calc((100% - 44px) / 3); }
}
.review-card__stars { display: flex; font-size: 16px; letter-spacing: 2px; }
.review-card__stars .is-filled { color: var(--flame); }
.review-card__stars .is-empty { color: var(--star-off); }
.review-card__quote { font-size: 17px; line-height: 1.6; color: var(--text-3); font-weight: 500; }
.review-card__who { margin-top: auto; display: flex; align-items: center; gap: var(--sp-3); padding-top: 6px; }
.review-card__avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF9A3C, #B00003);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--cta-text);
  font-size: 16px;
}
.review-card__name { font-size: 15px; font-weight: 700; color: var(--bone); }
.review-card__role { font-size: 12px; color: var(--muted-2); }
.reviews-hint {
  margin-top: var(--sp-4);
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-1);
}
@media (min-width: 768px) { .reviews-hint { display: none; } }

/* ---- FAQ (Step 16) ---- */
.faq-list {
  margin-top: var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.faq-item {
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: var(--r-cta);
  overflow: hidden;
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item__q { font-size: 17px; font-weight: 700; color: var(--bone); line-height: 1.3; }
.faq-item__icon { flex: 0 0 auto; font-size: 28px; font-weight: 300; color: var(--flame); line-height: .7; }
.faq-item[open] .faq-item__icon { transform: rotate(45deg); }
.faq-item__a { padding: 0 var(--sp-6) var(--sp-6); }
.faq-item__a p { font-size: 15px; line-height: 1.6; color: var(--muted-3); margin: 0; }
.faq-fallback {
  margin-top: var(--sp-8);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}
.faq-fallback a { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* ---- Closing CTA + footer (Step 17) ---- */
.closing-cta {
  padding-block: var(--section-y);
  background: var(--grad-cta-section);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.closing-cta__btn-row {
  margin-top: var(--sp-8);
  display: flex;
  justify-content: center;
}

.footer-brand__logos { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.footer-brand__logos img { border-radius: var(--r-chip); }
.footer-brand__rbs-chip {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  border-radius: var(--r-chip);
  padding: 6px 10px;
}
.footer-brand__caption { margin-top: var(--sp-4); font-size: 14px; line-height: 1.6; color: var(--muted-2); max-width: 42ch; }
.footer-col__label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-1);
  margin-bottom: var(--sp-2);
}
.footer-col__value { font-size: 18px; font-weight: 700; color: var(--bone); }
a.footer-col__value:hover { color: var(--flame); }
/* Step 28 a11y audit: this text-sized link's own box is ~20px tall, well under the 56px minimum
   touch target every tel: link needs. Expand the hit area with an absolutely-positioned
   pseudo-element instead of padding, so the footer's visual line spacing is untouched. */
a.footer-col__value {
  position: relative;
  display: inline-block;
}
a.footer-col__value::after {
  content: '';
  position: absolute;
  inset: -18px 0;
}
/* Small supporting line(s) under a footer-col__value — trainer name/role, address, reg. number.
   Added 2026-08-06 for the Zvani (Mārcis Strīgelis's title) and Biedrība (legal entity) columns. */
.footer-col__subtext { margin-top: var(--sp-2); font-size: 14px; line-height: 1.5; color: var(--muted-2); }
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}
.footer-bottom {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.footer-bottom__copy, .footer-bottom__link {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.footer-bottom__link:hover { color: var(--flame); }

/* ==== motion.css ==== */
/* Step 19: motion layer. All keyframes verbatim from _reference/keizars-design-handoff/ANIMATIONS.md.
   Ken Burns (`kb`) is intentionally omitted — see CLAUDE.md decision log, 2026-08-06 (the brief
   requires the whole team visible; scaling crops players). Every duration/easing/stagger here
   matches the spec's application table exactly. transform and opacity only, per rule 3 of that doc. */

@keyframes sheen {
  0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  12%  { opacity: .5; }
  40%  { opacity: 0; }
  100% { transform: translateX(160%) skewX(-18deg); opacity: 0; }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 10px 34px -8px rgba(255, 122, 0, .55), 0 0 0 0 rgba(255, 122, 0, 0); }
  50%      { box-shadow: 0 14px 44px -6px rgba(255, 122, 0, .85), 0 0 0 4px rgba(255, 122, 0, .10); }
}
@keyframes ember {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  12%  { opacity: .9; }
  80%  { opacity: .5; }
  100% { transform: translateY(-260px) translateX(var(--drift, 12px)) scale(.4); opacity: 0; }
}
@keyframes rise {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes revealUp {
  0%   { opacity: 0; transform: translateY(26px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes faqIn {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- 1. Sheen — diagonal light sweep across the hero photo ---- */
.hero-media__sheen-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sheen {
  position: absolute;
  top: -10%;
  left: 0;
  width: 38%;
  height: 120%;
  background: var(--grad-sheen);
  animation: sheen 8s var(--ease-emperor) infinite;
}

/* ---- 2. Glow — every primary CTA ---- */
.btn-cta { animation: glow 3.4s var(--ease-emperor) infinite; }

/* ---- 3. Embers — rising energy dots over the hero photo ---- */
.hero-media__embers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ember-dot {
  position: absolute;
  border-radius: 50%;
  animation: ember var(--dur, 8s) var(--ease-ember) infinite;
}

/* ---- 4. Rise — staggered hero entrance, fires on load ---- */
.rise-1, .rise-2, .rise-3, .rise-4, .rise-5 { animation: rise .9s var(--ease-emperor) both; }
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .18s; }
.rise-3 { animation-delay: .31s; }
.rise-4 { animation-delay: .44s; }
.rise-5 { animation-delay: .57s; }

/* ---- 5. Marquee — constant-speed loop ---- */
.marquee-track { animation: marquee 28s linear infinite; will-change: transform; }

/* ---- 6. Card lift — desktop hover only ---- */
@media (min-width: 1280px) {
  .team-card, .trainer-card, .location-card, .tournament-tile, .review-card {
    transition: transform .4s var(--ease-emperor), border-color .4s var(--ease-emperor), box-shadow .4s var(--ease-emperor);
  }
  .team-card:hover, .trainer-card:hover, .location-card:hover, .tournament-tile:hover, .review-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 122, 0, .4);
    box-shadow: var(--sh-card-hover);
  }
}

/* ---- 7. Nav underline — desktop hover ---- */
.navlink::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--flame);
  transition: right .3s var(--ease-emperor);
}
.navlink:hover::after { right: 0; }

/* ---- 8. FAQ answer fade + icon rotate ---- */
.faq-item__icon { transition: transform .35s var(--ease-emperor); }
.faq-item[open] .faq-item__a { animation: faqIn .4s var(--ease-emperor); }

/* ---- Scroll reveal (Step 20) ----
   .reveal defaults to fully visible — nothing here hides it. Only app.js, and only when motion is
   allowed, adds .reveal--armed (hidden, ready to animate in) right before observing each element.
   A JS failure or prefers-reduced-motion therefore never hides content — see CLAUDE.md. */
.reveal.reveal--armed { opacity: 0; transform: translateY(26px); }
.reveal.reveal--in { animation: revealUp .85s var(--ease-emperor) both; }

/* ---- Reduced motion — enumerated, not a blanket rule, so nothing is missed ---- */
@media (prefers-reduced-motion: reduce) {
  .sheen, .btn-cta, .ember-dot, .marquee-track,
  .rise-1, .rise-2, .rise-3, .rise-4, .rise-5 {
    animation: none !important;
  }
  .team-card, .trainer-card, .location-card, .tournament-tile, .review-card {
    transition: none !important;
  }
  .team-card:hover, .trainer-card:hover, .location-card:hover, .tournament-tile:hover, .review-card:hover {
    transform: none;
  }
  .navlink::after { transition: none !important; }
  .faq-item__icon { transition: none !important; }
  .back-to-top { transition: none !important; }
  .faq-item[open] .faq-item__a { animation: none !important; }
  .reveal.reveal--armed { opacity: 1; transform: none; }
  .reveal.reveal--in { animation: none !important; }
}