/* ============================================================
   SPARK EVENT - static website
   Type scale: exactly four sizes reused everywhere (h1, h2, h3, p).
   Nothing on the page uses text smaller than the p size; small
   labels differentiate with weight/letter-spacing/colour instead.
   Radius: pills on buttons/badges, --radius-medium on large media
   panels, sharp corners on structural containers and form fields.
   ============================================================ */

/* Smooth cross-fade when navigating between the LV (/) and EN (/en/)
   pages. Native browser feature (Chromium); browsers without support
   just navigate normally, no fallback needed. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: 380ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

:root {
  --paper: #fafafa;
  --paper-strong: #efefef;
  --white: #ffffff;
  --ink: #161616;
  --ink-soft: #3a3a3a;
  --accent: #ff2d46;
  --accent-dark: #e01b32;
  --tint: #ffeef0;
  --tint-strong: #ffcbd2;
  --line: rgba(22, 22, 22, 0.16);
  --line-light: rgba(250, 250, 250, 0.22);
  --line-dark: rgba(255, 255, 255, 0.16);
  --shadow: 0 1.5rem 5rem rgba(22, 22, 22, 0.16);
  --radius-small: 0.75rem;
  --radius-medium: 1.375rem;
  --radius-large: 2.125rem;
  --radius-pill: 999px;
  --page-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section-space: clamp(5.5rem, 10vw, 10rem);
  --max-width: 92.5rem;
  --sans: "DM Sans", Arial, Helvetica, sans-serif;
  --font-sans: var(--sans);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* The four type tiers. h2 stays smaller than h1 at every viewport
     width on purpose (lower vw coefficient and lower bounds). */
  --text-h1: clamp(3.42rem, 6.27vw, 7.6rem);
  --text-h2: clamp(2.3rem, 4.6vw, 5rem);
  --text-h3: clamp(1.4rem, 2vw, 1.9rem);
  --text-p: 1rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

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

/* Large screens: scale the whole page instead of stretching it.
   The layout is drawn for a 1480px canvas (--max-width), so past that width
   the root font grows with the viewport and every rem-based size - type,
   spacing, radii, max-widths - grows with it in one step. Ceiling at 28px
   (1.75x) so a 4K display does not turn absurd.
   16 / 1480 * 100 = 1.081vw */
@media (min-width: 1480px) {
  html { font-size: clamp(16px, 1.081vw, 28px); }
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-p);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

::selection { background: var(--accent); color: var(--paper); }

img { display: block; width: 100%; }

button, input, select, textarea { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

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

p, h1, h2, h3, blockquote, figure { margin: 0; }

p { font-size: var(--text-p); }

button { color: inherit; font-size: var(--text-p); }

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

fieldset { margin: 0; padding: 0; border: 0; }

[hidden] { display: none !important; }

/* Prevent orphaned single words on their own line wherever the
   browser supports it (all evergreen browsers as of 2024+). */
h1, h2, h3 { text-wrap: balance; }
p, .service-content small, .timeline-step p, .reel-subtext,
.contact-copy > p, .footer-column, .form-success p, .hero-lead {
  text-wrap: pretty;
}

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

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 999;
  transform: translateY(-160%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-small);
}

.skip-link:focus { transform: translateY(0); }

.page-shell {
  width: min(100%, var(--max-width));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.section { padding-block: var(--section-space); }

/* ========================= Type ========================= */

h1, h2, h3 { font-weight: 500; }

h1 { font-size: var(--text-h1); }

h2 {
  max-width: 13ch;
  font-size: var(--text-h2);
  letter-spacing: -0.03em;
  line-height: 1;
}

h3 {
  font-size: var(--text-h3);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1 em, h2 em, h3 em {
  position: relative;
  display: inline-block;
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: var(--accent);
}

h1 em::after, h2 em::after, h3 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.05em;
  height: 0.08em;
  background: var(--accent);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 720ms var(--ease);
}

h1 em.is-underlined::after, h2 em.is-underlined::after, h3 em.is-underlined::after {
  transform: scaleX(1);
}

/* ========================= Buttons and links ========================= */

.button {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  font-size: var(--text-p);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button:active { transform: translateY(2px) scale(0.96); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12); }
.button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

.button--dark { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.button--dark:hover, .button--dark:focus-visible { background: var(--accent); color: var(--paper); border-color: var(--accent); }

.button--accent { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.button--accent:hover, .button--accent:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.button--ghost { border-color: var(--line); background: transparent; color: var(--ink); }
.button--ghost:hover, .button--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }

.button--arrow {
  position: relative;
  overflow: visible;
}

.button--arrow::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: -0.5rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease;
}

.button--arrow:hover::after, .button--arrow:focus-visible::after { transform: scaleX(1); }

.button-arrow-icon { transition: transform 220ms ease; }
.button--arrow:hover .button-arrow-icon, .button--arrow:focus-visible .button-arrow-icon,
.button--ghost:hover .button-arrow-icon, .button--ghost:focus-visible .button-arrow-icon { transform: rotate(90deg); }

.icon-button {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.icon-button:hover, .icon-button:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.icon-button:active { transform: translateY(2px) scale(0.92); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  font-size: var(--text-p);
  font-weight: 600;
}

.text-link span { transition: transform 180ms ease; }
.text-link:hover span, .text-link:focus-visible span { transform: translateX(0.3rem); }
.text-link--large { align-self: end; }

.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }

.scroll-progress { position: fixed; inset: 0 0 auto; z-index: 200; height: 3px; pointer-events: none; }
.scroll-progress span { display: block; width: 0; height: 100%; background: var(--accent); }

/* ========================= Header ========================= */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: 0;
  background: rgba(250, 250, 250, 0.88);
  -webkit-backdrop-filter: blur(0.875rem);
  backdrop-filter: blur(0.875rem);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background 200ms ease;
}

.site-header.is-scrolled, .site-header.menu-open {
  border-bottom-color: var(--line);
}

.header-inner {
  position: relative;
  display: flex;
  width: min(100%, var(--max-width));
  height: 4.75rem;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

@media (min-width: 1101px) {
  .primary-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.brand { display: inline-flex; width: fit-content; align-items: center; }
.brand-logo { width: auto; height: 1.625rem; }
.brand-logo--light { height: 2.125rem; }

.primary-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2.25rem); }
.nav-links-slot { display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2.25rem); }

.primary-nav a:not(.button) { font-weight: 600; }

/* The underline lives on an inner span sized to the text itself, so it
   never stretches to the full tap-target width of the link (matters on
   mobile, where each nav row is a full-width block for easy tapping). */
.nav-link-text { position: relative; display: inline-block; }

.nav-link-text::after {
  position: absolute;
  right: 0;
  bottom: -0.4rem;
  left: 0;
  height: 2px;
  background: var(--accent);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.primary-nav a:not(.button):hover .nav-link-text::after,
.primary-nav a:not(.button):focus-visible .nav-link-text::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions { display: flex; align-items: center; gap: 1rem; }

.language-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  transition: border-color 180ms ease;
}

.language-switcher:hover { border-color: var(--accent); }

.language-switcher-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 0.375rem);
  border-radius: var(--radius-pill);
  background: var(--ink);
  transform: translateX(0);
  transition: transform 200ms var(--ease);
  pointer-events: none;
}

.language-switcher-thumb.is-active { transform: translateX(100%); }

.language-switcher a {
  position: relative;
  z-index: 1;
  padding: 0.4rem 0.85rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  font-size: var(--text-p);
  font-weight: 700;
  color: var(--ink-soft);
  transition: color 180ms ease, transform 180ms ease;
}

.language-switcher a:active { transform: scale(0.94); }

.language-switcher a.is-active { color: var(--paper); }

.nav-mobile-only, .menu-toggle { display: none; }

/* ========================= Hero ========================= */

.hero {
  /* Hugs its content instead of tracking viewport height: a vh-based
     min-height stretched or squeezed the gap around the collage on every
     screen taller or shorter than the design reference, for no layout
     benefit - nothing below the hero needs it pinned to a fixed height. */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 5vh, 3.5rem);
  padding-block: clamp(6rem, 9vh, 8.5rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background: var(--paper);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-bg::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40rem;
  height: 40rem;
  margin-top: -20rem;
  margin-left: -20rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 45, 70, 0.24), transparent 70%);
  filter: blur(6.25rem);
  animation: heroGradientSpinLeft 15s linear infinite;
}

.hero-bg::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40rem;
  height: 40rem;
  margin-top: -20rem;
  margin-left: -20rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 45, 70, 0.24), transparent 70%);
  filter: blur(6.25rem);
  animation: heroGradientSpinRight 18s linear infinite;
}

.hero-gradient-spin { display: none; }

@keyframes heroGradientSpinLeft {
  0% { transform: rotate(0deg) translate(-55vw, -40%) rotate(0deg); }
  100% { transform: rotate(360deg) translate(-55vw, -40%) rotate(-360deg); }
}

@keyframes heroGradientSpinRight {
  0% { transform: rotate(0deg) translate(55vw, 40%) rotate(0deg); }
  100% { transform: rotate(360deg) translate(55vw, 40%) rotate(-360deg); }
}

.hero-orbit {
  position: absolute;
  border: 1.5px solid rgba(22, 22, 22, 0.14);
  border-radius: var(--radius-pill);
}

.hero-orbit--one { top: -22%; right: -8%; width: 44rem; height: 44rem; }
.hero-orbit--two { bottom: -30%; left: -14%; width: 34rem; height: 34rem; }
.hero-orbit--three { top: 12%; left: 38%; width: 20rem; height: 20rem; border-color: rgba(217, 166, 160, 0.22); }

@media (prefers-reduced-motion: reduce) {
  .hero-gradient-spin { animation: none; }
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  /* No width override here: .page-shell already caps this at --max-width, and
     re-declaring width:100% made the hero the only full-bleed section, so it
     visibly out-ran every section below it on wide screens. */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 6rem);
}

.hero-copy { position: relative; }

.hero h1 { max-width: 10ch; margin-bottom: 1.6rem; letter-spacing: -0.03em; line-height: 0.98; }
.hero h1 em { color: var(--accent); }

.hero-lead {
  max-width: 34rem;
  margin-bottom: 3rem;
  font-size: 1.15rem;
  line-height: 1.6;
}

/* Centered variant: reuses the hero's own sizes and spacing, just aligned
   to the middle for single-column pages (thank-you, etc.) instead of the
   two-column hero grid. */
.hero--centered .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero--centered .hero-lead { margin-inline: auto; }
.hero--centered .button-row { justify-content: center; }

.hero-stats {
  position: relative;
  z-index: 2;
  margin-top: 1rem;
  padding-top: 2.2rem;
  padding-bottom: 2.2rem;
  max-width: 56rem;
  border-top: 1px solid var(--line);
}

.hero-stats-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

/* Divider sits between stat blocks but does not touch the top border,
   so the vertical and horizontal lines never visually connect. */
.stat::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--line);
}

.stat:first-child::before { display: none; }

.stat strong {
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: 1.15;
  color: var(--ink);
}

.stat span {
  max-width: 22ch;
  font-size: var(--text-p);
  font-weight: 400;
  color: var(--ink-soft);
  text-wrap: balance;
}

.hero-visual {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 37.5rem;
  margin: 0 auto;
  height: min(70vh, 38.75rem);
  min-height: 28.75rem;
}

.event-frame {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 4px solid var(--paper);
  border-radius: var(--radius-medium);
  background: var(--ink);
  box-shadow: var(--shadow);
}

.event-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Largest frame sits centred and in front (highest z-index); the other
   two peek out equally on the bottom-left and right. Each frame floats
   on its own calm, independent animation so they never read as a
   single glued-together group. */
.event-frame--main {
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 64%;
  aspect-ratio: 1 / 1;
  animation: heroFloatMain 8s ease-in-out infinite;
}

.event-frame--portrait {
  top: 16%;
  right: -3%;
  z-index: 2;
  width: 36%;
  aspect-ratio: 2 / 3;
  animation: heroFloatPortrait 9s ease-in-out infinite;
  animation-delay: -2.5s;
}

.event-frame--detail {
  bottom: -3%;
  left: -3%;
  z-index: 1;
  width: 36%;
  aspect-ratio: 4 / 5;
  animation: heroFloatDetail 8.5s ease-in-out infinite;
  animation-delay: -1.2s;
}

@keyframes heroFloatMain {
  0%, 100% { transform: translate(-50%, -50%) rotate(-1.6deg); }
  50% { transform: translate(-50%, -50%) translateY(-9px) rotate(-2.1deg); }
}

@keyframes heroFloatPortrait {
  0%, 100% { transform: rotate(1.6deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-8px); }
}

@keyframes heroFloatDetail {
  0%, 100% { transform: rotate(1deg) translateY(0); }
  50% { transform: rotate(0.6deg) translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
  .event-frame { animation: none !important; }
}

/* ========================= Section headings ========================= */

.section-heading {
  display: grid;
  margin-bottom: clamp(3rem, 6vw, 6rem);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
}

.section-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

/* ========================= Video services reel ========================= */

.reel {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--section-space);
  overflow: hidden;
}

.reel-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.reel-copy h2 { color: var(--paper); max-width: 11ch; margin-bottom: 1.5rem; }

.reel-lead {
  max-width: 30rem;
  margin-bottom: 1.5rem;
  color: rgba(250, 250, 250, 0.72);
  font-size: 1.05rem;
  line-height: 1.6;
}

.reel-note {
  max-width: 30rem;
  margin-bottom: 1.5rem;
  color: rgba(250, 250, 250, 0.72);
  font-size: 1.05rem;
  line-height: 1.6;
}

.reel-cta { margin-top: 2rem; }
.reel-cta .button--ghost { border-color: var(--line-dark); color: var(--paper); }
.reel-cta .button--ghost:hover, .reel-cta .button--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }

.reel-subtext {
  max-width: 30rem;
  margin-bottom: 2.25rem;
  color: rgba(250, 250, 250, 0.72);
  font-size: 1.05rem;
  line-height: 1.6;
  transition: opacity 220ms ease;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reel-subtext.is-changing { opacity: 0; }

.reel-controls { display: flex; align-items: center; gap: 1.5rem; }
.reel-controls .icon-button { border-color: var(--line-dark); color: var(--paper); }
.reel-controls .icon-button:hover, .reel-controls .icon-button:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--paper); }

.reel-count { font-size: var(--text-h3); font-weight: 600; color: var(--accent); }

.reel-stack {
  position: relative;
  height: min(62vh, 35rem);
  min-height: 26.25rem;
}

/* Soft glow beneath the cards for a sense of depth, like stage light. */
.reel-stack::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44rem;
  height: 28rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 45, 70, 0.45) 0%, rgba(255, 45, 70, 0.15) 50%, transparent 70%);
  filter: blur(1.5rem);
  pointer-events: none;
}

/* Position/rotation/scale per slot live on the individual `translate`,
   `rotate` and `scale` properties (transitioned on slot change), while
   the ambient float wobble runs on the `transform` shorthand via a
   separate `animation`. Modern browsers compose both onto the same
   element, so the card - frame and content together - floats as one
   whole piece, and switching slots never resets or restarts the float. */
.reel-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(45%, 18.75rem);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 4px solid var(--paper);
  border-radius: var(--radius-medium);
  background: var(--ink-soft);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  cursor: pointer;
  translate: -50% -50%;
  scale: 0.7;
  transition: translate 700ms var(--ease), rotate 700ms var(--ease), scale 700ms var(--ease), opacity 550ms ease;
  animation: floatAmbient 7s ease-in-out infinite;
}

.reel-card:nth-child(2) { animation-duration: 7.6s; animation-delay: -2.4s; }
.reel-card:nth-child(3) { animation-duration: 6.6s; animation-delay: -4.1s; }
.reel-card:nth-child(4) { animation-duration: 8.2s; animation-delay: -1.2s; }

.reel-card img { width: 100%; height: 100%; object-fit: cover; }
.reel-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent 55%);
}

.reel-card-title {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.9rem;
  color: var(--paper);
  font-size: var(--text-p);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* Three simultaneous slots: previous (left, mild tilt), current
   (centre, upright), next (right, pronounced tilt). Each slot has its
   own calm, elegant float animation/duration so the group never moves
   as one glued unit (same motion character as the hero photo frames). */
.reel-card[data-slot="current"] {
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
  box-shadow: 0 20px 50px rgba(255, 45, 70, 0.3), var(--shadow);
  translate: -50% -50%;
  rotate: 0deg;
  scale: 1;
}

.reel-card[data-slot="prev"] {
  opacity: 0.75;
  z-index: 2;
  pointer-events: auto;
  translate: calc(-50% - 58%) -49%;
  rotate: -8deg;
  scale: 0.84;
}

.reel-card[data-slot="next"] {
  opacity: 0.85;
  z-index: 2;
  pointer-events: auto;
  translate: calc(-50% + 64%) -47%;
  rotate: 21deg;
  scale: 0.88;
}

.reel-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: inherit;
  overflow: hidden;
}

@keyframes floatAmbient {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(0.5deg); }
}

.reel-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(250, 250, 250, 0.92);
  color: var(--ink);
  cursor: pointer;
  opacity: 1;
  transition: transform 220ms ease, background 220ms ease, opacity 300ms ease;
}

.reel-play svg { position: absolute; transition: opacity 220ms ease, transform 220ms ease; }
.reel-play .icon-pause { opacity: 0; transform: scale(0.6); }
.reel-card.is-playing .reel-play .icon-play { opacity: 0; transform: scale(0.6); }
.reel-card.is-playing .reel-play .icon-pause { opacity: 1; transform: scale(1); }

/* Once "playing", controls fade away after a short delay; hovering
   (desktop) or the click-anywhere-to-pause target (all devices)
   brings them back. */
.reel-card.is-playing.is-controls-hidden .reel-play { opacity: 0; transform: scale(0.7); }
.reel-card.is-playing.is-controls-hidden:hover .reel-play { opacity: 1; transform: scale(1); }

.reel-card[data-slot="current"] .reel-play:hover { transform: scale(1.08); background: var(--accent); color: var(--paper); }
.reel-card:not([data-slot="current"]) .reel-play { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .reel-card { animation: none !important; transition: opacity 300ms ease; }
}

/* ========================= Services (V1 switcher) ========================= */

.services-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(2rem, 6vw, 6rem);
}

.service-list {
  border-top: none;
  background: var(--white);
  border-radius: var(--radius-medium);
  overflow: hidden;
}

.service-item {
  display: grid;
  width: 100%;
  min-height: 9rem;
  padding: 1.5rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  grid-template-columns: 3rem 1fr auto;
  align-items: start;
  gap: 1rem;
  text-align: left;
  transition: padding 180ms ease, background 180ms ease;
}

.service-item:last-child { border-bottom: 0; }

.service-item:hover { background: rgba(22, 22, 22, 0.03); }

.service-item.is-active {
  background: var(--tint);
}

.service-number { color: var(--accent); font-size: var(--text-h3); font-weight: 600; }
.service-content { display: grid; gap: 0.65rem; }

.service-content strong {
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.service-content small { max-width: 31rem; color: var(--ink-soft); font-size: var(--text-p); }

.service-arrow { font-size: 1.3rem; color: var(--ink); transition: opacity 320ms ease; }
.service-item.is-active .service-arrow { opacity: 0; }

.service-mobile-media { display: none; }

.service-preview {
  position: sticky;
  top: 7rem;
  overflow: hidden;
  border-radius: var(--radius-medium);
  background: var(--ink);
  box-shadow: var(--shadow);
}

.service-preview img {
  width: 100%;
  height: min(70vh, 47.5rem);
  min-height: 36.25rem;
  object-fit: cover;
  transition: opacity 200ms ease, transform 500ms ease;
}

.service-preview.is-changing img { opacity: 0.25; transform: scale(1.025); }

/* ========================= Process (S-curve timeline) ========================= */

.bg-dark { background: var(--ink); color: var(--paper); }
.bg-dark h2 { color: var(--paper); }

.process-section {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}

.process-section .hero-bg::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90vw;
  height: 90vw;
  margin-top: -45vw;
  margin-left: -45vw;
  background: radial-gradient(circle, rgba(255, 45, 70, 0.28), transparent 70%);
  filter: blur(7.5rem);
  animation: timelineGradientSpinLeft 24s linear infinite;
}

.process-section .hero-bg::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vw;
  height: 80vw;
  margin-top: -40vw;
  margin-left: -40vw;
  background: radial-gradient(circle, rgba(255, 45, 70, 0.22), transparent 70%);
  filter: blur(6.25rem);
  animation: timelineGradientSpinRight 28s linear infinite;
}

@keyframes timelineGradientSpinLeft {
  0% { transform: rotate(0deg) translate(-30vw, -25%) rotate(0deg); }
  100% { transform: rotate(360deg) translate(-30vw, -25%) rotate(-360deg); }
}

@keyframes timelineGradientSpinRight {
  0% { transform: rotate(0deg) translate(30vw, 25%) rotate(0deg); }
  100% { transform: rotate(360deg) translate(30vw, 25%) rotate(-360deg); }
}

.process-section .section-header,
.process-section .timeline-wrapper {
  position: relative;
  z-index: 2;
}

.process-section .section-header { grid-template-columns: 1fr; }
.process-section h2 { max-width: 16ch; }

.timeline-wrapper { padding-top: 8.125rem; padding-bottom: 8.125rem; }

.timeline-edge-title {
  max-width: 24ch;
  margin: 0 auto;
  padding-block: 1.5rem;
  color: var(--paper);
  text-align: center;
}

.timeline-intro { margin-bottom: 1.5rem; }
.timeline-outro { margin-top: 1.5rem; }

.zigzag-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.path-bg { fill: none; stroke: var(--line-dark); stroke-width: 2px; }
.path-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5px;
  filter: drop-shadow(0 0 0.75rem rgba(255, 45, 70, 0.8));
}

.timeline-rows { position: relative; z-index: 2; }

.timeline-row {
  display: grid;
  grid-template-columns: 1fr 9.375rem 1fr;
  align-items: center;
  margin-bottom: 5rem;
}

.timeline-row:last-child { margin-bottom: 0; }

.timeline-step { padding: 0; }
.step-left { text-align: right; padding-right: 2rem; }
.step-right { text-align: left; padding-left: 2rem; }

.timeline-dot-container { display: flex; align-items: center; width: 100%; height: 100%; }
.timeline-row:nth-child(odd) .timeline-dot-container { justify-content: flex-start; }
.timeline-row:nth-child(even) .timeline-dot-container { justify-content: flex-end; }

.timeline-dot {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  border: 2px solid var(--line-dark);
  transition: all 500ms ease;
}

.timeline-row.active-step .timeline-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(255, 45, 70, 0.85);
  transform: scale(1.2);
}

/* Step label ("1 / Iepazīšanās"). Was an <h4> purely for styling, which put a
   heading below the <h3> it labels; it is a <p> now. The max-width/line-height/
   text-wrap declarations restate what the h4 computed to, so the generic
   ".timeline-step p" rule below cannot shift it. */
.timeline-step .timeline-step-meta {
  font-size: var(--text-p);
  color: var(--accent);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  max-width: none;
  line-height: 1.6;
  text-wrap: wrap;
  /* The old <h4> also carried the browser's default heading margin-top
     (1.33em). Nothing in this file asked for it, but it is part of how the
     timeline currently looks, so it is restated here rather than silently
     tightening every step by ~21px. */
  margin-top: 1.33em;
}

.timeline-step h3 { color: var(--paper); margin-bottom: 0.75rem; }
.timeline-step p { max-width: 26rem; color: rgba(250, 250, 250, 0.68); line-height: 1.6; }
.step-left p { margin-left: auto; }

@media (max-width: 1024px) {
  .timeline-row { grid-template-columns: 1fr 6.25rem 1fr; }
}

@media (max-width: 768px) {
  .timeline-row { grid-template-columns: 2.5rem 1fr; gap: 0.9375rem; margin-bottom: 3rem; }
  .timeline-dot-container { grid-column: 1; grid-row: 1; justify-content: center !important; }
  .timeline-step { grid-column: 2; grid-row: 1; text-align: left; padding: 0; }
  .step-left p { margin-left: 0; }
  .empty-col { display: none; }

  .timeline-edge-title {
    text-align: left;
    margin: 0;
    padding-left: 3.4375rem; /* 2.5rem (column 1) + 0.9375rem (gap) = 3.4375rem */
    max-width: none;
  }
}

/* ========================= Team ========================= */

.team-section { position: relative; overflow: hidden; background: var(--paper); }

.team-members {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 9vw, 7rem);
}

.team-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.team-layout--reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.team-layout--reverse .team-image { order: 2; }
.team-layout--reverse .team-copy { order: 1; }

.team-image {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow);
}

.team-image img { width: 100%; height: 100%; object-fit: cover; }

.team-copy h2 { max-width: 13ch; margin-bottom: 1.5rem; }
.team-copy p { max-width: 36rem; margin-bottom: 1.25rem; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; }

.team-credit {
  /* Line moved below the name/role instead of above it. margin-top stays the
     same value as before so the gap from the description to this block is
     unchanged - only the line's own position (top -> bottom) moved. */
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.team-credit strong { display: block; font-size: var(--text-p); font-weight: 700; }
.team-credit span { display: block; color: var(--ink-soft); }

@media (max-width: 900px) {
  /* .team-layout's "gap" is the desktop two-column gutter. With .team-copy's
     children promoted to direct grid items below, that gap would apply
     between every single one of them (heading-image, image-paragraph,
     paragraph-paragraph, paragraph-credit) instead of once as before -
     zeroed here so spacing is only ever controlled by each item's own
     margin, same as it was in normal block flow. */
  .team-layout, .team-layout--reverse { grid-template-columns: 1fr; gap: 0; }

  /* .team-copy's own children (heading, paragraphs, credit) need to interleave
     with the image in the sequence heading -> image -> description -> credit,
     but the image is a sibling of .team-copy, not a child of it - "display:
     contents" promotes those children to be direct grid items of .team-layout
     so the order values below can place them relative to the image. */
  .team-copy { display: contents; }
  .team-copy h2 { order: 0; }
  .team-image, .team-layout--reverse .team-image {
    order: 1;
    /* Replaces the old image-to-text gap now that .team-layout's own gap is
       zeroed - same clamp value the grid used to provide it with. */
    margin-bottom: clamp(2.5rem, 6vw, 6rem);
  }
  .team-copy p { order: 2; }
  .team-credit { order: 3; }
  .team-layout--reverse .team-copy { order: initial; }

  /* Grid items don't collapse adjacent margins the way normal block-flow
     siblings do, so the last paragraph's margin-bottom (1.25rem) and
     .team-credit's margin-top (1.5rem) would now stack to 2.75rem instead of
     collapsing to 1.5rem like they used to. Dropping the paragraph's side
     keeps that gap the same size as before. */
  .team-copy p:last-of-type { margin-bottom: 0; }

  /* Both member photos shorter still at the same width: aspect-ratio 4/5
     divided by 0.6 (height reduced to 60% of the original) = 4/3. */
  .team-image { aspect-ratio: 4 / 3; }
}

/* ========================= Contact ========================= */

.contact-section { background: var(--white); }

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(30rem, 0.75fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 7.5rem);
}

.contact-copy { position: sticky; top: 7rem; }
.contact-copy h2 { max-width: 12ch; margin-bottom: 2.2rem; }
.contact-copy > p { max-width: 34rem; margin-bottom: 2.4rem; color: var(--ink-soft); font-size: 1.1rem; line-height: 1.7; }

.contact-details { display: grid; max-width: 34rem; border-top: 1px solid rgba(22, 22, 22, 0.2); }
.contact-details > * {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.8rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid rgba(22, 22, 22, 0.2);
  font-size: var(--text-h3);
  font-weight: 500;
}
.contact-details a:hover { color: var(--accent-dark); }
.contact-details a span {
  display: inline-block;
  transition: transform 180ms ease;
}
.contact-details a:hover span,
.contact-details a:focus-visible span {
  transform: rotate(45deg);
}

.brief-card {
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border-radius: var(--radius-large);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 22px 60px rgba(22, 22, 22, 0.08);
}

.form-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.8rem; margin-bottom: 1.75rem; }
.form-heading p { margin-bottom: 0.5rem; color: var(--ink-soft); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.form-heading > span { color: var(--accent-dark); font-weight: 700; }

.form-progress { height: 3px; margin-bottom: 2rem; overflow: hidden; background: rgba(22, 22, 22, 0.1); }
.form-progress span { display: block; width: 33.333%; height: 100%; background: var(--accent); transition: width 380ms var(--ease); }

/* Honeypot: kept in normal layout flow (not display:none) so basic spam
   bots that skip hidden fields still fill it in, but positioned off-screen
   and out of the tab order so real visitors never see or reach it. */
.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.1rem; min-height: 15rem; animation: panelIn 420ms var(--ease); }

.field { display: grid; gap: 0.6rem; }
.field--full, .privacy-check, .field-label, .choice-grid { grid-column: 1 / -1; }
.field > span, .field-label { color: var(--ink-soft); font-weight: 700; letter-spacing: 0.01em; }

.field input, .field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(22, 22, 22, 0.23);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  transition: border-color 180ms ease;
}

.field input { min-height: 3rem; padding: 0.5rem 0; }
.field textarea { min-height: 6rem; padding: 0.6rem 0; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--accent-dark); }
.field input::placeholder, .field textarea::placeholder { color: rgba(22, 22, 22, 0.4); }

.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.choice-card { position: relative; cursor: pointer; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }

.choice-card span {
  display: flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(22, 22, 22, 0.18);
  border-radius: var(--radius-small);
  font-weight: 700;
  text-align: center;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.choice-card input:checked + span { border-color: var(--ink); background: var(--accent); color: var(--paper); }
.choice-card input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }

.privacy-check { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--ink-soft); line-height: 1.6; cursor: pointer; }
.privacy-check input { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin-top: 2px; accent-color: var(--accent-dark); }
.privacy-check a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.privacy-check a:hover, .privacy-check a:focus-visible { color: var(--accent-dark); }

.form-error { min-height: 1.5rem; margin: 0.75rem 0 0; color: #a42d25; font-weight: 700; }

.form-actions { display: flex; justify-content: space-between; gap: 0.9rem; margin-top: 1.4rem; }
.form-actions button:last-child, .form-actions button:nth-last-child(2) { margin-left: auto; }

.form-success { min-height: 15rem; place-content: center; text-align: center; }
.form-success:not([hidden]) { display: grid; }

.form-success > span {
  display: grid;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.5rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--paper);
  font-size: 1.4rem;
}

.form-success h3 { margin-bottom: 1rem; }
.form-success p { max-width: 32rem; margin: 0 auto; color: var(--ink-soft); line-height: 1.8; }

[aria-invalid="true"] { border-color: #a42d25 !important; }

/* ========================= Footer ========================= */

.site-footer { background: var(--ink); color: var(--paper); }

.footer-top {
  display: grid;
  align-items: start;
  padding-block: clamp(4rem, 8vw, 8rem);
  grid-template-columns: minmax(0, 1fr) 2fr;
  gap: 3.5rem;
}

.footer-columns {
  /* auto-fit rather than a fixed column count: the Social column is
     currently hidden (see data/content.js), so this must not leave a bare
     gap with 2 columns of data - and self-heals once Social comes back,
     still stretching each column to an equal share like before. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 2.5rem;
}

.footer-statement h3 { max-width: 14ch; margin-top: 2rem; margin-bottom: 3.5rem; opacity: 0.6; }
.footer-statement p { font-size: var(--text-p); opacity: 0.6; }
.footer-column { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.4rem; font-size: var(--text-p); }
.footer-column h3 { margin-bottom: 0.4rem; font-size: var(--text-p); color: var(--accent); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.footer-column a { width: fit-content; opacity: 0.78; }
.footer-column a:hover, .footer-column a:focus-visible { opacity: 1; }
.footer-column span { opacity: 0.78; }

.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line-light);
  opacity: 0.65;
}

/* ========================= Legal page ========================= */

.legal-page {
  padding-block: clamp(6rem, 12vw, 8rem) var(--section-space);
}

.legal-page h1 { max-width: 20ch; margin-bottom: 0.75rem; }

.legal-page .legal-updated { color: var(--ink-soft); font-weight: 700; }

.legal-content {
  max-width: 42rem;
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.legal-content h2 { max-width: none; font-size: var(--text-h3); letter-spacing: -0.02em; }

.legal-content p { color: var(--ink-soft); line-height: 1.7; }

.legal-content ul { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }

.legal-content li { position: relative; padding-left: 1.25rem; color: var(--ink-soft); line-height: 1.7; }

.legal-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
}

.legal-content a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover, .legal-content a:focus-visible { color: var(--accent-dark); }

/* ========================= Back to top ========================= */

.back-to-top {
  position: fixed;
  right: var(--page-gutter);
  bottom: clamp(1.25rem, 3vh, 2rem);
  z-index: 150;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 1;
  transition: height 250ms var(--ease), background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, opacity 220ms ease;
}

.back-to-top svg {
  transition: transform 250ms var(--ease);
}

.back-to-top:hover, .back-to-top:focus-visible, .back-to-top:active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
  height: 4.5rem;
}

.back-to-top:hover svg, .back-to-top:focus-visible svg, .back-to-top:active svg {
  transform: scaleY(1.3);
}

.back-to-top:active { transform: translateY(2px) scale(0.94); }

/* ========================= Reveal animation ========================= */

.js .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ========================= Keyframes ========================= */

@keyframes panelIn {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========================= Responsive ========================= */

@media (max-width: 1100px) {
  .menu-toggle {
    display: grid;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
    place-content: center;
    gap: 0.35rem;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
  }

  .menu-toggle:hover, .menu-toggle:focus-visible { background: var(--accent); border-color: var(--accent); }
  .menu-toggle:active { transform: scale(0.94); }

  .menu-toggle span:not(.sr-only) { display: block; width: 1.1rem; height: 1px; background: var(--ink); transition: transform 180ms ease, background 180ms ease; }
  .menu-toggle:hover span:not(.sr-only), .menu-toggle:focus-visible span:not(.sr-only) { background: var(--ink); }
  .site-header.menu-open .menu-toggle span:first-child { transform: translateY(3px) rotate(45deg); }
  .site-header.menu-open .menu-toggle span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

  .primary-nav {
    position: fixed;
    top: 4.85rem;
    right: var(--page-gutter);
    left: auto;
    width: fit-content;
    min-width: 15rem;
    max-width: min(70vw, 20rem);
    display: grid;
    max-height: calc(100svh - 6rem);
    padding: 1.5rem;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-medium);
    background: var(--paper);
    box-shadow: var(--shadow);
    gap: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.8rem);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .site-header.menu-open .primary-nav { opacity: 1; pointer-events: auto; transform: translateY(0); }

  .nav-links-slot, .primary-nav { flex-direction: column; align-items: flex-start; }
  .nav-links-slot a { padding: 1rem 0; border-bottom: 1px solid var(--line); width: 100%; font-size: 1.4rem; }
  .nav-mobile-only { display: inline-flex; margin-top: 1rem; }
  /* .primary-nav is a CSS grid; its default justify-items:stretch was
     forcing this pill to fill the whole column instead of hugging LV/EN,
     which also pushed the thumb (sized to 50% of that stretched box) past
     the actual text into blank space. */
  .nav-mobile-only.language-switcher { justify-self: start; }
  .nav-mobile-only.language-switcher a { font-size: 1.1rem; padding: 0.55rem 1.1rem; }
  .header-cta, .language-switcher--desktop { display: none; }
}

@media (max-width: 900px) {
  .hero { padding-top: 7.5rem; }
  .hero-grid { grid-template-columns: 1fr; }
  /* Hug the collage instead of tracking viewport height: the frames inside are
     fixed-ratio, so a vh height only added slack that grew on taller phones.
     30/31 is the container ratio the collage is composed against (600x620). */
  .hero-visual { height: auto; min-height: 0; aspect-ratio: 30 / 31; margin-bottom: 1rem; }
  .hero-stats-row { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .stat::before { top: 0; bottom: auto; left: 50%; right: 50%; width: auto; height: 1px; transform: translateX(-50%); }
  .stat:not(:first-child)::before { width: 3rem; left: 50%; transform: translateX(-50%); }
  .reel-inner { grid-template-columns: 1fr; }
  .services-layout { grid-template-columns: 1fr; }

  /* On a single column the desktop side-preview is replaced by an
     inline image that expands from the top of the selected card and
     collapses from the previously selected one, in lockstep (both
     driven by the same max-height transition, so opening and closing
     always happen together with no jank). */
  .service-preview { display: none; }

  .service-list {
    background: var(--white);
    margin-inline: calc(-1 * var(--page-gutter));
    border-radius: 0;
    overflow: hidden;
  }

  .service-item {
    padding: 1.5rem var(--page-gutter);
  }

  .service-item.is-active {
    background: var(--tint);
  }

  .service-mobile-media {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    max-height: 0;
    overflow: hidden;
    transition: max-height 420ms var(--ease);
    width: 100%;
  }

  .service-number, .service-content, .service-arrow {
    grid-row: 1;
  }

  .service-item.is-active .service-mobile-media { max-height: 22rem; }

  .service-mobile-media-inner { min-height: 0; overflow: hidden; border-radius: var(--radius-medium); }
  .service-mobile-media-inner img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-top: 1.25rem; border-radius: var(--radius-medium); }
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-copy { position: static; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-statement { grid-column: auto; }
  .footer-columns { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 640px) {
  .section { padding-block: clamp(4rem, 14vw, 6rem); }
  .contact-details > * { flex-wrap: wrap; gap: 0.5rem; font-size: var(--text-p); }
  .contact-details a { overflow-wrap: anywhere; }

  /* "Nosūtīt pieprasījumu" is wider than a 320px form once nowrap stops it
     shrinking, so the actions stack full width instead of sitting in a row. */
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .button { width: 100%; margin-left: 0; white-space: normal; }
  .form-actions button:last-child, .form-actions button:nth-last-child(2) { margin-left: 0; }
  .section-heading, .section-header { grid-template-columns: 1fr; }
  .text-link--large { justify-self: start; }
  .form-step { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-columns { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .reel-stack { height: 60vh; min-height: 22.5rem; }
  .reel-card { width: min(64%, 16.25rem); }
}

/* ========================= Storage preferences panel =========================
   Consent UI. Class names deliberately avoid "cookie"/"consent"/"gdpr":
   AdBlock filter lists hide elements matching those, which would leave
   visitors unable to make any choice at all.
   Reuses the site's own tokens so it reads as part of the design. */

.site-prefs {
  position: fixed;
  z-index: 9999;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  font-family: var(--sans);
}

.site-prefs[hidden] { display: none; }

.site-prefs__box {
  pointer-events: auto;
  width: 100%;
  /* min-width:0 so the flex child can shrink below its content width, and
     vw rather than % because the document can be wider than the screen. */
  min-width: 0;
  max-width: min(29rem, calc(100vw - 3rem));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 1.75rem;
  border-radius: var(--radius-medium);
  background: var(--white);
  color: var(--ink-soft);
  box-shadow: var(--shadow);
  font-size: var(--text-p);
  line-height: 1.45;
}

.site-prefs__title {
  margin: 0 0 0.6rem;
  /* the global h2 rule caps headings at 13ch, which would wrap this one */
  max-width: none;
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

.site-prefs__text { margin: 0 0 0.7rem; text-wrap: pretty; }
.site-prefs__links { margin: 0 0 1rem; }
.site-prefs__links a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-prefs__links a:hover { color: var(--accent); }

.site-prefs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

/* Accept and reject are the same size and weight on purpose: refusing must
   not take more effort than agreeing. */
.site-prefs__actions .button { flex: 1 1 auto; min-width: 8.5rem; }

.site-prefs__link-btn {
  flex: 0 0 100%;
  margin-top: 0.15rem;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--text-p);
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: center;
  cursor: pointer;
}
.site-prefs__link-btn:hover { color: var(--accent); }

.site-prefs__row { padding: 0.7rem 0; border-top: 1px solid var(--line); }
.site-prefs__row-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.2rem; cursor: pointer; }
.site-prefs__row--fixed .site-prefs__row-head { cursor: default; }
.site-prefs__row-name { flex: 1; font-weight: 700; color: var(--ink); }
.site-prefs__always { color: var(--ink-soft); opacity: 0.7; }
.site-prefs__row-desc { margin: 0; color: var(--ink-soft); text-wrap: pretty; }

/* The real checkbox stays in the accessibility tree and keeps its keyboard
   behaviour; only the pill next to it is painted. The selector includes the
   element so a global checkbox rule cannot win on specificity. */
input[type="checkbox"].site-prefs__switch {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  clip-path: inset(50%);
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}

.site-prefs__switch-ui {
  flex: 0 0 auto;
  position: relative;
  width: 2.6rem;
  height: 1.45rem;
  border-radius: var(--radius-pill);
  background: #d6d6d6;
  transition: background 250ms ease;
}

.site-prefs__switch-ui::after {
  content: "";
  position: absolute;
  top: 0.19rem;
  left: 0.19rem;
  width: 1.07rem;
  height: 1.07rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 250ms ease;
}

input[type="checkbox"].site-prefs__switch:checked + .site-prefs__switch-ui { background: var(--accent); }
input[type="checkbox"].site-prefs__switch:checked + .site-prefs__switch-ui::after { transform: translateX(1.15rem); }
input[type="checkbox"].site-prefs__switch:focus-visible + .site-prefs__switch-ui {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.site-prefs-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.site-prefs-link:hover { color: var(--accent); }

@media (max-width: 600px) {
  .site-prefs { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; }
  .site-prefs__box { max-width: calc(100vw - 1.5rem); padding: 1.15rem; }
  /* Stacked full-width buttons would make the panel a wall on a phone; side
     by side keeps "reject" exactly as reachable as "accept". */
  .site-prefs__actions .button { flex: 1 1 0; min-width: 0; padding-inline: 0.75rem; }
  .site-prefs__title { font-size: 1.15rem; }
  .site-prefs__row { padding: 0.6rem 0; }
  /* "Always on" no longer squeezes onto the same line as the category name */
  .site-prefs__row--fixed .site-prefs__row-head { flex-wrap: wrap; gap: 0 0.75rem; }
  .site-prefs__row--fixed .site-prefs__row-name { flex: 1 1 100%; }
}