/* Billion Ads Agency — site stylesheet (one shared file for all pages).
   Typography: Playfair Display (display), Outfit (UI/body), General Sans (giant wordmark only).
   Palette derived from the hero clip (night indigo, violet petals, coral glow); layout rules from the Billion Ads Brand Book, edition 01 / November 2026.
   Structure (2026-11-06 rebuild): every section = one headline (.hd, with one <em class="hl"> highlight) + at most one line (.ln)
   + one dominant visual. Lists are motion sequences (.seq, .swap, .lines, .timeline, .rows). No boxed cards, no grids of text. */
/* Fonts are loaded with <link rel="stylesheet"> in each page head (before this file). */

/* ---------- 2. Tokens ---------- */
:root {
  --ink: #0A0C20;
  --panel: #171A3C;
  --violet: #A99CF5;
  --violet-deep: #8F80EE;
  --lavender: #C9C2F2;
  --coral: #FF9466;
  --paper: #F3F1FA;
  --paper-2: #E9E6F5;
  --paper-muted: #5B5876;
  --paper-body: #0A0C20;
  --link-paper: #5B4BC4;
  --offwhite: #F6F5FB;
  --muted: #AFACC9;
  --hair-dark: rgba(246, 245, 251, 0.14);
  --hair-light: rgba(10, 12, 32, 0.14);
  --card-hover: #171A3C;
  --violet-rgb: 169, 156, 245;
  --coral-rgb: 255, 148, 102;
  /* the one highlight colour, on ink and on paper alike */
  --hl: #8373EA; /* 3.35:1 on paper, 5.16:1 on ink */

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-ui: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mark: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* R7 polish: one curve for every UI transition (180-300ms) and reveal (600-900ms) */
  --ease-ui: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nav-h: 104px;
  --gutter: 64px;
  --sec-pad: clamp(128px, 11vw, 176px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  background: var(--ink);
  color: var(--offwhite);
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
.band :focus-visible { outline-color: var(--ink); }

.skip {
  position: absolute; left: 24px; top: 8px; z-index: 100;
  background: var(--violet); color: var(--ink);
  font-weight: 500; padding: 12px 20px; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 2.2 Type ---------- */
.display-xl, .display-l, .hd { font-family: var(--font-display); font-weight: 400; }
.display-xl { font-size: clamp(44px, 6.2vw, 92px); line-height: 1.06; letter-spacing: -0.015em; max-width: 14ch; }
.display-l { font-size: clamp(40px, 5vw, 68px); line-height: 1.08; letter-spacing: -0.015em; max-width: 22ch; }
/* Section headline: one per section, 40-72px, max 8 words, one highlight */
.hd { font-size: clamp(40px, 4.6vw, 72px); line-height: 1.04; letter-spacing: -0.015em; max-width: 15ch; text-wrap: balance; }
.hl { font-style: italic; color: var(--hl); }
/* Supporting line: at most one per section, max 14 words. Also the size of every list item. */
.ln { font-weight: 300; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; max-width: 34ch; color: rgba(246, 245, 251, 0.82); }
.h3 { font-family: var(--font-ui); font-weight: 500; font-size: clamp(21px, 1.7vw, 23px); line-height: 1.25; }
.lead { font-weight: 300; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; max-width: 40ch; }
.small { font-size: 14px; line-height: 1.5; letter-spacing: 0.01em; }
.eyebrow {
  font-size: clamp(12px, 1vw, 13px); line-height: 1.2; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 500; color: var(--lavender);
  display: flex; align-items: center; gap: 12px;
}
.eyebrow--accent { color: var(--lavender); }
.eyebrow + .hd, .eyebrow + .display-l { margin-top: 20px; }
.hd + .ln, .display-l + .lead { margin-top: 24px; }
.hd + .link, .ln + .link, .hd + .btn, .ln + .btn { margin-top: 32px; }

/* ---------- 2.3 Layout ---------- */
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.g-1-4 { grid-column: 1 / 5; }
.g-1-6 { grid-column: 1 / 7; }
.g-1-7 { grid-column: 1 / 8; }
.g-6-8 { grid-column: 6 / 8; }
.g-5-13 { grid-column: 5 / 13; }
.g-6-13 { grid-column: 6 / 13; }
.g-7-13 { grid-column: 7 / 13; }
.g-8-11 { grid-column: 8 / 11; }
.g-8-13 { grid-column: 8 / 13; }

.section { padding: var(--sec-pad) 0; }
.band { background: var(--paper); color: var(--ink); }
.band .eyebrow { color: var(--paper-muted); }
.band .ln { color: rgba(10, 12, 32, 0.76); }
.band .lead, .band .small { color: var(--paper-body); }
.band .hd { color: var(--ink); }
.sticky { position: sticky; top: 136px; align-self: start; }

/* 2.4 Devices */
.bar { display: block; width: 48px; height: 4px; background: var(--coral); margin-bottom: 24px; }
.circle { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--violet); flex: none; }
.tag {
  display: inline-block; background: var(--violet); color: var(--ink);
  font-size: 12px; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  padding: 4px 8px;
}

/* ---------- 3.3 Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  height: 60px; padding: 0 40px; border-radius: 9999px;
  font-family: var(--font-ui); font-weight: 500; font-size: 17px; line-height: 1; letter-spacing: 0.02em;
  color: var(--ink); background: var(--violet); border: 1px solid var(--violet);
  text-decoration: none; white-space: nowrap;
  transition: background-color 200ms var(--ease-ui), color 200ms var(--ease-ui), border-color 200ms var(--ease-ui);
}
.btn:hover, .btn:focus-visible { background: var(--violet-deep); color: var(--ink); border-color: var(--violet-deep); }
.btn:active { background: var(--lavender); border-color: var(--lavender); }
.btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 5px; }
.btn.sm { height: 44px; padding: 0 24px; font-size: 15px; }

.blinking-dot {
  width: 10px; height: 10px; background: var(--coral); border-radius: 50%;
  position: relative; display: inline-block; flex: none;
  animation: pulse-glow 3s infinite ease-in-out;
  transition: background-color 240ms var(--ease);
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

.link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  position: relative;
  font-family: var(--font-ui); font-weight: 500; font-size: 17px; color: inherit;
  text-decoration: none;
}
/* the underline is drawn: scaleX 0 -> 1 from the left on hover / focus, and un-draws toward the right */
.link::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(50% - 0.9em); height: 1px;
  background: var(--violet); transform: scaleX(0); transform-origin: right;
  transition: transform 260ms var(--ease-ui);
}
.link:not(.no-arrow)::before { right: calc(1em + 8px); }
.link:hover::before, .link:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.link::after { content: '\2192'; display: inline-block; transition: transform 200ms var(--ease-ui); }
.link.no-arrow::after { content: none; }
.link:hover::after, .link:focus-visible::after { transform: translateX(2px); }
.band .link::before { background: var(--link-paper); }

/* ---------- 3.1 Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h); overflow: visible;
  background: transparent;
  transition: background-color 240ms var(--ease), transform 240ms var(--ease-ui);
  view-transition-name: nav;
}
/* hidden on scroll down, shown on scroll up (JS block 14); never while a block is pinned */
.nav.is-hidden { transform: translateY(-100%); }
.nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--hair-dark); opacity: 0; transition: opacity 240ms var(--ease);
}
.nav.is-scrolled { background: var(--ink); }
.nav.is-scrolled::after { opacity: 1; }
.nav-inner { display: flex; align-items: center; height: 100%; }
.nav-logo { display: block; flex: none; line-height: 0; }
.nav-logo img { width: 228px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 40px; margin-left: auto; margin-right: 40px; }
.nav-links a {
  position: relative; display: inline-flex; align-items: center; height: 44px;
  font-size: 15px; font-weight: 500; letter-spacing: 0.03em; line-height: 1;
  color: var(--offwhite); opacity: 0.78; text-decoration: none;
  transition: opacity 200ms var(--ease-ui);
}
.nav-links a:hover, .nav-links a.is-active, .nav-links a:focus-visible { opacity: 1; }
.nav-links a::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: var(--violet); transform: scaleX(0); transform-origin: right; transition: transform 260ms var(--ease-ui);
}
.nav-links a:hover::before, .nav-links a:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.nav-links a.is-active::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--violet); transform: translateX(-50%);
}
.nav-cta { flex: none; }
.nav-burger {
  display: none; width: 44px; height: 44px; margin-left: auto;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--offwhite); }

/* Mobile menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--offwhite);
  overflow-y: auto; display: none;
}
.menu.is-open { display: block; animation: menu-in 240ms var(--ease) both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.menu-inner { display: flex; flex-direction: column; min-height: 100%; padding-top: 0; padding-bottom: 32px; }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: 96px; }
.menu-close { width: 44px; height: 44px; position: relative; }
.menu-close span { position: absolute; left: 11px; top: 21px; width: 22px; height: 2px; background: var(--offwhite); transition: transform 200ms var(--ease); }
.menu-close span:first-child { transform: rotate(45deg); }
.menu-close span:last-child { transform: rotate(-45deg); }
.menu-links { display: flex; flex-direction: column; margin-top: 24px; border-top: 1px solid var(--hair-dark); }
.menu-links a {
  display: flex; align-items: center; gap: 16px; height: 64px;
  font-family: var(--font-display); font-size: 40px; line-height: 1; text-decoration: none;
  border-bottom: 1px solid var(--hair-dark);
}
.menu-foot { margin-top: auto; padding-top: 48px; display: flex; flex-direction: column; gap: 16px; }
.menu-foot .mail { position: relative; font-size: 15px; color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.menu-foot .mail::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(50% - 0.9em); height: 1px;
  background: var(--violet); transform: scaleX(0); transform-origin: right; transition: transform 260ms var(--ease-ui);
}
.menu-foot .mail:hover::before, .menu-foot .mail:focus-visible::before { transform: scaleX(1); transform-origin: left; }
body.menu-open { overflow: hidden; }

/* ---------- 3.1b Language switcher (R6) ----------
   Globe + code in the bar (hidden at phone width, where the same component sits in the menu overlay above the mail link).
   Panel: ink, one hairline, 8px radius, 220ms fade with a 6px rise. Violet only on hover / the active language. */
.lang { position: relative; flex: none; margin-right: 24px; }
/* Language gate (see the inline <head> script): hides translated text, never media, until the dictionary lands */
html.i18n-pending [data-i18n], html.i18n-pending .lang-code, html.i18n-pending select { visibility: hidden; }

.lang-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; line-height: 1;
  color: var(--offwhite); opacity: 0.78; transition: opacity 200ms var(--ease-ui), color 200ms var(--ease-ui);
}
.lang-btn svg { width: 16px; height: 16px; flex: none; }
.lang-btn:hover, .lang-btn:focus-visible, .lang.is-open .lang-btn { opacity: 1; color: var(--violet); }
.lang-menu {
  position: absolute; top: 100%; right: 0; z-index: 70; min-width: 196px; margin-top: 8px; padding: 8px 0;
  background: var(--ink); border: 1px solid var(--hair-dark); border-radius: 8px;
  visibility: hidden; opacity: 0; transform: translateY(6px);
  transition: opacity 220ms var(--ease-ui), transform 220ms var(--ease-ui), visibility 0s linear 220ms;
}
.lang.is-open .lang-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s, 0s, 0s; }
.lang-menu [role="menuitemradio"] {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 40px; padding: 0 16px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.2; text-align: left; white-space: nowrap;
  color: var(--offwhite); transition: color 180ms var(--ease-ui);
}
.lang-menu [role="menuitemradio"]:hover, .lang-menu [role="menuitemradio"]:focus-visible, .lang-menu [aria-checked="true"] { color: var(--violet); }
.lang-menu [role="menuitemradio"]:focus-visible { outline-offset: -2px; }
.lang-menu [role="menuitemradio"]::after {
  content: ''; width: 14px; height: 14px; flex: none; opacity: 0; background: currentColor; transition: opacity 180ms var(--ease-ui);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lang-menu [aria-checked="true"]::after { opacity: 1; }
/* inside the menu overlay: left-aligned, the panel opens upward above the button */
.menu .lang { margin: 0; align-self: flex-start; }
.menu .lang-btn { padding-left: 0; }
.menu .lang-menu { top: auto; bottom: 100%; left: 0; right: auto; margin: 0 0 8px; }

/* ---------- 4. Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate; background: var(--ink);
  min-height: 100svh; min-height: max(100svh, 680px);
  display: flex; flex-direction: column;
}
.hero-canvas {
  position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px);
  filter: blur(22px); z-index: 0;
}
.hero--short .hero-canvas { opacity: 0.75; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 400ms ease; z-index: 1;
}
.hero-video.is-ready, html.reduced .hero-video { opacity: 1; }
.hero-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  mix-blend-mode: soft-light; opacity: 0.09; background-size: 160px 160px; background-repeat: repeat;
  animation: grain-shift 400ms steps(1, end) infinite;
}
@keyframes grain-shift {
  0% { background-position: 0 0; }
  25% { background-position: -53px -31px; }
  50% { background-position: -17px -89px; }
  75% { background-position: -71px -67px; }
  100% { background-position: 0 0; }
}
.hero-shade { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
.hero-shade--top { top: 0; height: 60%; background: linear-gradient(180deg, rgba(10, 12, 32, 0.92) 0%, rgba(10, 12, 32, 0.65) 40%, rgba(10, 12, 32, 0) 100%); }
/* Soft ink vignette behind the headline so letters crossing the brightest petals keep contrast */
.hero::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 66% 74% at 50% 52%, rgba(10, 12, 32, 0.72) 0%, rgba(10, 12, 32, 0.46) 48%, rgba(10, 12, 32, 0) 76%); }
.hero--short::before { background: radial-gradient(ellipse 72% 86% at 32% 58%, rgba(10, 12, 32, 0.72) 0%, rgba(10, 12, 32, 0.46) 48%, rgba(10, 12, 32, 0) 76%); }
.hero-shade--bottom { bottom: 0; height: 34%; background: linear-gradient(0deg, #0A0C20 0%, rgba(10, 12, 32, 0) 100%); }
.hero-content { position: relative; z-index: 4; }

.hero--home .hero-content {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: 22vh; padding-bottom: 160px; max-width: 1100px;
}
.hero--home .display-xl { color: var(--offwhite); margin-top: 24px; max-width: 14ch; }
.hero--home .lead { margin-top: 32px; color: rgba(246, 245, 251, 0.85); }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 32px; margin-top: 40px; flex-wrap: wrap; }
.hero-fade { animation: fade-up 600ms var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.hero-rail {
  position: absolute; left: 0; right: 0; bottom: 32px; z-index: 4;
}
.hero-rail-inner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding-top: 16px; border-top: 1px solid var(--hair-dark);
  font-size: 14px; color: var(--muted); letter-spacing: 0.01em;
}
.hero-rail-inner a { position: relative; text-decoration: none; color: inherit; min-height: 44px; display: inline-flex; align-items: flex-start; transition: color 200ms var(--ease-ui); }
.hero-rail-inner a:hover, .hero-rail-inner a:focus-visible { color: var(--offwhite); }
.hero-rail-inner a::before {
  content: ''; position: absolute; left: 0; right: 0; top: 1.4em; height: 1px;
  background: var(--violet); transform: scaleX(0); transform-origin: right; transition: transform 260ms var(--ease-ui);
}
.hero-rail-inner a:hover::before, .hero-rail-inner a:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.hero-rail-mid { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-rail-bar { width: 1px; height: 40px; background: var(--offwhite); transform-origin: top; animation: rail-draw 1.8s var(--ease) infinite; }
@keyframes rail-draw { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.hero--short { min-height: 64svh; min-height: max(64svh, 520px); }
.hero--contact { min-height: 56svh; min-height: max(56svh, 480px); }
.hero--short .hero-content { padding-top: 20vh; padding-bottom: 96px; }
.hero--short .hero-content > div { max-width: 78%; }
.hero--short .display-l { color: var(--offwhite); }
.hero--short .lead { color: rgba(246, 245, 251, 0.85); }

/* Word reveal (hero h1) */
.word-wrapper { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.15em; margin-bottom: -0.15em; }
.word-inner {
  display: inline-block; opacity: 0; transform: translateY(105%); filter: blur(20px);
  animation: word-reveal-mask 1.3s cubic-bezier(0.05, 0.9, 0.1, 1) forwards;
}
@keyframes word-reveal-mask {
  0% { opacity: 0; transform: translateY(105%); filter: blur(20px); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ---------- 3.8 Reveal on scroll ---------- */
.reveal, .reveal-group > * {
  transition: opacity 760ms var(--ease-ui), transform 760ms var(--ease-ui);
  transition-delay: calc(var(--i, 0) * var(--stagger, 90ms));
}
html.js:not(.reduced) .reveal:not(.is-in),
html.js:not(.reduced) .reveal-group:not(.is-in) > * { opacity: 0; transform: translateY(24px); }
/* Wipe reveal for media: the picture uncovers and settles from a slight zoom.
   The clip sits on the picture, not on the observed frame (Chrome's IntersectionObserver honours clip-path). */
.wipe img, .wipe video { clip-path: inset(0 0 0 0); transition: clip-path 800ms var(--ease-ui), transform 900ms var(--ease-ui); }
html.js:not(.reduced) .wipe:not(.is-in) { background: transparent; }
html.js:not(.reduced) .wipe:not(.is-in) img, html.js:not(.reduced) .wipe:not(.is-in) video { clip-path: inset(0 0 100% 0); transform: scale(1.06); }
/* 21:9 full-bleed moments wipe from the left unless the row asks for the right */
html.js:not(.reduced) .bleed > .wipe:not(.wipe--r):not(.is-in) img, html.js:not(.reduced) .bleed > .wipe:not(.wipe--r):not(.is-in) video { clip-path: inset(0 100% 0 0); }
html.js:not(.reduced) .wipe--l:not(.is-in) img, html.js:not(.reduced) .wipe--l:not(.is-in) video { clip-path: inset(0 100% 0 0); }
html.js:not(.reduced) .wipe--r:not(.is-in) img, html.js:not(.reduced) .wipe--r:not(.is-in) video { clip-path: inset(0 0 0 100%); }
/* large full-bleed stills (JS marks them .drift) ease from 1 to 1.05 over 10 s, once, after the wipe */
@keyframes fig-drift { from { transform: scale(1); } to { transform: scale(1.05); } }
html.js:not(.reduced) .fig.drift.is-in { animation: fig-drift 10s linear 600ms forwards; }

/* ---------- 3.4b Horizontal service scroller (home) ---------- */
.head-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: 64px; }
.head-row > :first-child { grid-column: 1 / 8; }
.head-row > :last-child { grid-column: 9 / 13; justify-self: end; }
.hscroll-nav { display: flex; align-items: center; gap: 12px; }
.hscroll-nav .link { margin-right: 12px; }
.hs-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--hair-dark); background: transparent;
  color: var(--offwhite); cursor: pointer; display: inline-grid; place-items: center; font-size: 20px; line-height: 1;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), opacity 200ms var(--ease);
}
.hs-btn[data-hs="prev"]::before { content: '\2190'; }
.hs-btn[data-hs="next"]::before { content: '\2192'; }
.hs-btn:hover { background: var(--violet); border-color: var(--violet); color: var(--ink); }
.hs-btn:disabled { opacity: 0.3; cursor: default; background: transparent; border-color: var(--hair-dark); color: var(--offwhite); }
.hscroll {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; cursor: grab; padding-bottom: 8px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)));
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.hscroll.is-dragging .vcard { pointer-events: none; }
.hscroll-track {
  display: flex; gap: 24px; width: max-content;
  padding-left: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)));
}
/* Cards are open: picture, title, three words. No frame. */
.vcard {
  flex: 0 0 auto; width: min(400px, 78vw); scroll-snap-align: start;
  display: flex; flex-direction: column; text-decoration: none; color: var(--offwhite);
  transition: transform 400ms var(--ease);
}
.vcard:hover { transform: translateY(-6px); }
.vcard-visual {
  display: block; aspect-ratio: 4 / 3; background-image: var(--bg); background-size: cover; background-repeat: no-repeat; background-color: var(--panel);
  filter: saturate(0.85); transition: filter 400ms var(--ease);
}
.vcard:hover .vcard-visual { filter: saturate(1); }
.vcard-text { display: flex; flex-direction: column; padding: 22px 0 0; }
.vcard-text .h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2vw, 28px); }
@media (max-width: 767px) {
  .hscroll-nav { flex-wrap: wrap; }
  .hscroll-track { gap: 16px; }
}

/* pinned, scroll-driven mode (desktop, fine pointer, no reduced motion) — set by JS */
.hs-section.is-pinned { padding: 0; }
.hs-section.is-pinned .hs-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 8px) 0 24px; box-sizing: border-box; overflow: hidden;
}
.hs-section.is-pinned .head-row { margin-bottom: 32px; }
/* the headline and the 4:3 card shrink with the viewport height so the pin fits from 700px up */
.hs-section.is-pinned .head-row .hd { font-size: clamp(36px, 6.4vh, 72px); }
.hs-section.is-pinned .vcard { width: min(400px, 78vw, 50vh); }
.hs-section.is-pinned .hscroll { overflow: visible; cursor: default; }
.hs-section.is-pinned .hscroll-track { will-change: transform; }

/* ---------- 3.6 FAQ (open list: no rules, whitespace separates) ---------- */
.faq details + details { margin-top: 8px; }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; cursor: pointer;
  list-style: none; padding: 22px 0; font-weight: 500; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ''; }
.faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.faq .plus { position: relative; width: 24px; height: 24px; flex: none; transition: transform 240ms var(--ease); }
.faq .plus::before, .faq .plus::after { content: ''; position: absolute; background: var(--ink); top: 11px; left: 0; width: 24px; height: 2px; }
.faq .plus::after { transform: rotate(90deg); }
.faq details[open] .plus { transform: rotate(45deg); }
.faq .faq-body { padding: 0 0 28px; max-width: 34ch; }
.faq-intro .fig { margin-top: 48px; }

/* ---------- 3.7 Form ---------- */
.form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; }
.field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.field--half { grid-column: span 6; }
.field label { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--muted); transition: color 200ms var(--ease-ui), transform 200ms var(--ease-ui); }
.field:focus-within label { color: var(--offwhite); transform: translateY(-4px); }
/* the focus line (<span class="field-line">) sits over the control's hairline and draws from the left */
.field-line {
  display: block; height: 2px; margin-top: -10px; background: var(--violet); pointer-events: none;
  transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-ui);
}
.select-wrap .field-line { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.field:focus-within .field-line { transform: scaleX(1); }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(246, 245, 251, 0.32); color: var(--offwhite);
  font-family: var(--font-ui); font-size: 17px; line-height: 1.4; height: 56px; padding: 16px 0;
  transition: border-color 200ms var(--ease);
}
.field textarea { height: auto; min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(246, 245, 251, 0.45); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer; }
.field select option { color: var(--ink); background: var(--offwhite); }
.select-wrap { position: relative; }
.select-wrap::before, .select-wrap::after {
  content: ''; position: absolute; right: 2px; top: 50%; width: 10px; height: 2px; background: var(--offwhite); pointer-events: none;
}
.select-wrap::before { transform: translate(-6px, -1px) rotate(45deg); }
.select-wrap::after { transform: translate(0, -1px) rotate(-45deg); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; }
.field .err { display: none; font-size: 14px; color: var(--offwhite); }
.field input:user-invalid, .field textarea:user-invalid { border-bottom: 2px solid var(--coral); }
.field input:user-invalid ~ .err, .field textarea:user-invalid ~ .err { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.form-notice { grid-column: 1 / -1; color: var(--offwhite); font-size: 17px; }
.form-notice[hidden] { display: none; }
.form-notice:focus { outline: none; } /* role=status announces it; no box around the line */
.contact-fig { align-self: start; }

/* ---------- 3.2 Footer ---------- */
.footer { background: var(--ink); color: var(--offwhite); padding-top: 48px; }
.footer-rows { padding-top: 64px; border-top: 1px solid var(--hair-dark); }
.footer .nav-logo img { width: 228px; }
.footer-brand .eyebrow { margin-top: 16px; }
.footer-list { margin-top: 16px; display: flex; flex-direction: column; }
.footer-list a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--offwhite); font-size: 17px; }
.footer-list a::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(50% - 0.9em); height: 1px;
  background: var(--violet); transform: scaleX(0); transform-origin: right; transition: transform 260ms var(--ease-ui);
}
.footer-list a:hover::before, .footer-list a:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.footer-list .small { color: var(--muted); margin-top: 8px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 24px 0 0; margin-top: 48px; border-top: 1px solid var(--hair-dark); color: var(--muted); font-size: 14px; }
.wordmark-wrap { overflow: hidden; padding-bottom: 20px; margin-top: 32px; }
.wordmark {
  font-family: var(--font-mark); font-weight: 600; font-size: 25vw; line-height: 0.8; letter-spacing: -0.04em;
  color: var(--offwhite); opacity: 0.95; text-align: center; white-space: nowrap; pointer-events: none;
  margin-right: -0.04em;
}
.wordmark .letter-wrapper { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 0.8; }
html.js:not(.reduced) .wordmark .letter-inner { display: inline-block; opacity: 0; transform: translateX(-105%); filter: blur(20px); }
html.js:not(.reduced) .wordmark.is-in .letter-inner { animation: letter-reveal-mask 1.2s cubic-bezier(0.05, 0.9, 0.1, 1) forwards; }
.wordmark .letter-inner { display: inline-block; }
@keyframes letter-reveal-mask {
  0% { opacity: 0; transform: translateX(-105%); filter: blur(20px); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* ---------- 5. Imagery ---------- */
.fig { position: relative; display: block; overflow: hidden; background: var(--panel); isolation: isolate; }
.fig img, .fig video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fig > picture { display: contents; } /* <picture> swaps to the -sm file under 900px; the img keeps the .fig rules */
.fig--4x3 { aspect-ratio: 4 / 3; }
.fig--4x5 { aspect-ratio: 4 / 5; }

/* ---------- 5.1 Text + media block (one headline, one line, one picture) ---------- */
.blk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.blk-text { grid-column: 1 / 6; grid-row: 1; }
.blk-media { grid-column: 7 / 13; grid-row: 1; }
.blk--flip .blk-text { grid-column: 8 / 13; grid-row: 1; }
.blk--flip .blk-media { grid-column: 1 / 7; grid-row: 1; }

/* ---------- 5.2 Full-bleed media moment: one picture, one line over it ---------- */
.bleed { position: relative; overflow: hidden; isolation: isolate; background: var(--panel); }
.bleed > .fig { aspect-ratio: 21 / 9; min-height: 480px; max-height: 92vh; }
.bleed::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 12, 32, 0) 38%, rgba(10, 12, 32, 0.82) 100%);
}
.bleed-copy { position: absolute; left: 0; right: 0; bottom: clamp(40px, 7vw, 104px); z-index: 2; }
.bleed-copy .hd { max-width: 16ch; }
.bleed--r .bleed-copy .wrap { display: flex; justify-content: flex-end; }
.bleed--c .bleed-copy { bottom: auto; top: 50%; transform: translateY(-50%); }
.bleed--c::after { background: linear-gradient(90deg, rgba(10, 12, 32, 0.82) 0%, rgba(10, 12, 32, 0.55) 38%, rgba(10, 12, 32, 0) 68%); }
.bleed + .bleed { margin-top: 24px; }
/* taller variant: the box is cropped from the wide frame, so object-position can keep the subject clear of the copy */
.bleed--tall > .fig { aspect-ratio: auto; height: min(92vh, 860px); min-height: 560px; }
.bleed--tall > .fig img, .bleed--tall > .fig video { object-position: var(--pos, 50% 50%); }
.rows { padding: 0 0 var(--sec-pad); }
.rows-head { padding-bottom: 64px; }
.rows .bleed > .fig { min-height: 420px; max-height: 78vh; }
.rows a.bleed { display: block; text-decoration: none; color: inherit; }
.rows a.bleed .ln { transition: color 300ms var(--ease); }
.rows a.bleed:hover .hd { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; text-decoration-color: var(--violet); }
.bleed .eyebrow { margin-bottom: 20px; }

/* ---------- 5.3 Pinned media swap (home: the five steps) ----------
   Default = stacked (mobile, reduced motion, no JS): every step shows its own picture.
   .is-pinned (set by JS on desktop): the list sits still while the pictures crossfade. */
.swap { position: relative; }
.swap-pin { padding: var(--sec-pad) var(--gutter); max-width: 1280px; margin: 0 auto; width: 100%; }
.swap-head { max-width: 560px; }
.swap-steps { margin-top: 48px; }
.swap-step { position: relative; }
.swap-step + .swap-step { margin-top: 56px; }
.swap-step .fig { aspect-ratio: 4 / 3; margin-bottom: 20px; }
.swap-step .n { display: block; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--lavender); margin-bottom: 10px; }
.swap-step .t { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; max-width: 20ch; }
.swap-step .t .w { font-family: var(--font-ui); font-weight: 300; color: var(--muted); }
.swap.is-pinned { min-height: calc(100vh + var(--n, 5) * 62vh); }
.swap.is-pinned .swap-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: safe center; padding-top: calc(var(--nav-h) - 16px); padding-bottom: 24px;
}
/* pinned type scales with the viewport height (JS only pins when the whole list fits) */
.swap.is-pinned .swap-head .hd { font-size: clamp(36px, 6.4vh, 72px); }
.swap.is-pinned .swap-head .link { margin-top: 20px; }
.swap.is-pinned .swap-step .t { font-size: clamp(19px, 2.6vh, 27px); max-width: none; }
.swap.is-pinned .swap-head, .swap.is-pinned .swap-steps { width: calc(50% - 12px); }
.swap.is-pinned .swap-steps { margin-top: 36px; }
.swap.is-pinned .swap-step { position: static; opacity: 0.32; transition: opacity 400ms var(--ease); }
.swap.is-pinned .swap-step + .swap-step { margin-top: 14px; }
.swap.is-pinned .swap-step.is-active { opacity: 1; }
.swap.is-pinned .swap-step .n { margin-bottom: 4px; }
.swap.is-pinned .swap-step .fig {
  position: absolute; right: var(--gutter); top: 50%; margin: 0;
  width: calc((100% - 2 * var(--gutter)) * 0.5 - 12px); aspect-ratio: 4 / 5; max-height: 80vh;
  transform: translateY(-50%); opacity: 0; transition: opacity 500ms ease; z-index: 0;
}
.swap.is-pinned .swap-step.is-active .fig { opacity: 1; z-index: 1; }
/* Stacked fallback on desktop (reduced motion / short viewport): picture and line side by side. */
@media (min-width: 901px) {
  .swap:not(.is-pinned) .swap-step { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: 24px; align-items: center; }
  .swap:not(.is-pinned) .swap-step .fig { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .swap:not(.is-pinned) .swap-step .n { grid-column: 2; align-self: end; }
  .swap:not(.is-pinned) .swap-step .t { grid-column: 2; align-self: start; }
}

/* ---------- 5.4 Sequence list (sherbimet items, dossier lines, contact steps) ---------- */
.seq { margin-top: 32px; --stagger: 40ms; }
.seq li { padding: 10px 0; font-weight: 300; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.4; color: rgba(246, 245, 251, 0.9); max-width: 30ch; }
.seq li .n { display: inline-block; min-width: 40px; font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.16em; font-weight: 500; color: var(--lavender); vertical-align: 0.2em; }
.band .seq li { color: rgba(10, 12, 32, 0.82); }
.band .seq li .n { color: var(--paper-muted); }

/* ---------- 5.5 Jump strip (sherbimet): inline links, one rule ---------- */
.jump { background: var(--ink); border-bottom: 1px solid var(--hair-dark); }
.jump-inner { display: flex; gap: 28px; height: 64px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.jump-inner::-webkit-scrollbar { display: none; }
.jump a { position: relative; display: inline-flex; align-items: center; height: 64px; white-space: nowrap; text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; transition: color 200ms var(--ease); }
.jump a:hover, .jump a.is-active { color: var(--offwhite); }
.jump a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--violet); }
html.js .jump a.is-active::after { display: none; }
.jump-inner { position: relative; }
.jump-marker {
  position: absolute; left: 0; bottom: 0; width: 1px; height: 2px; background: var(--violet); pointer-events: none;
  transform-origin: left; transform: translateX(0) scaleX(0); opacity: 0;
  transition: transform 300ms var(--ease-ui), opacity 200ms var(--ease-ui);
}
@media (min-width: 1024px) {
  .jump { position: sticky; top: var(--nav-h); z-index: 40; transition: transform 240ms var(--ease-ui); }
  html.nav-hidden .jump { transform: translateY(calc(-1 * var(--nav-h))); }
}
.svc { padding: var(--sec-pad) 0; scroll-margin-top: 180px; }
.svc + .svc { padding-top: 0; }
/* The first service after the jump strip and the one after the interlude keep their padding-top,
   so their anchor lands that much higher: every jump then puts the eyebrow at the same height. */
.jump + .svc, .bleed + .svc { scroll-margin-top: calc(180px - var(--sec-pad)); }

/* ---------- 5.6 Timeline (qasja): the one rule draws itself as you scroll ---------- */
.timeline { position: relative; padding-left: 48px; --draw: 0; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--hair-dark); }
.timeline::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--violet); transform-origin: top; transform: scaleY(var(--draw)); }
html.reduced .timeline, html:not(.js) .timeline { --draw: 1; }
.tl-step { position: relative; padding: 40px 0; }
.tl-step:first-child { padding-top: 0; }
.tl-step:last-child { padding-bottom: 0; }
/* the one picture beside the steps: five frames, the active step's frame crossfades in */
.tl-media { position: relative; aspect-ratio: 4 / 5; max-height: 78vh; }
.tl-media .fig { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms ease; }
.tl-media .fig.is-active { opacity: 1; }
.tl-head { padding-bottom: 64px; }
.tl-dot { position: absolute; left: -53px; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--panel); transform: translateY(-50%); transition: background-color 300ms var(--ease), transform 300ms var(--ease); }
.tl-step.is-passed .tl-dot, .tl-step.is-active .tl-dot { background: var(--violet); }
.tl-step.is-active .tl-dot { transform: translateY(-50%) scale(1.25); }
html.reduced .tl-dot, html:not(.js) .tl-dot { background: var(--violet); }
.tl-step .n { display: block; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--lavender); margin-bottom: 10px; }
.tl-step .t { font-family: var(--font-display); font-size: clamp(24px, 2.1vw, 30px); line-height: 1.2; max-width: 22ch; opacity: 0.55; transition: opacity 300ms var(--ease); }
.tl-step.is-active .t { opacity: 1; }
.tl-step .t .w { font-family: var(--font-ui); font-weight: 300; color: var(--muted); }

/* ---------- 5.7 Sticky picture + lines that light up (qasja: how we speak) ---------- */
.lines-media { position: relative; aspect-ratio: 4 / 5; max-height: 78vh; }
.lines-media .fig { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms ease; }
.lines-media .fig:first-child { opacity: 1; }
.lines.is-live .lines-media .fig:first-child { opacity: 0; }
.lines.is-live .lines-media .fig.is-active { opacity: 1; }
.lines-list { margin-top: 48px; }
.line { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.25; max-width: 20ch; padding: 20px 0; }
.line .w { font-family: var(--font-ui); font-weight: 300; color: var(--muted); }
.line-mask { display: block; overflow: hidden; }
.line-in { display: block; transition: transform 800ms var(--ease-ui); }
html.js:not(.reduced) .line:not(.is-in) .line-in { transform: translateY(110%); }
.lines.is-live .lines-media { position: sticky; top: calc(50vh - min(39vh, 36vw)); }
.lines.is-live .line { padding: 16vh 0; opacity: 0.45; transition: opacity 400ms var(--ease); }
.lines.is-live .line.is-active { opacity: 1; }
.lines.is-live .line:first-child { padding-top: 0; }
.lines.is-live .line:last-child { padding-bottom: 0; }

.blk .seq { --stagger: 60ms; }
.svc .seq { --stagger: 40ms; }

/* ---------- 5.9 Dossier (puna): one picture, three lines ---------- */
.dossier { padding-top: 64px; padding-bottom: var(--sec-pad); }
.dossier .tag, #raporti .tag { margin-top: 32px; }
.dossier .seq { margin-top: 16px; --stagger: 60ms; }

/* ---------- 5.10 CTA band: loop or still behind the copy, under an ink gradient ---------- */
.cta-band { position: relative; padding: var(--sec-pad) 0; background: var(--ink); overflow: hidden; isolation: isolate; }
.cta-band .lead { margin-top: 24px; color: rgba(246, 245, 251, 0.85); }
.cta-band .hero-actions { justify-content: flex-start; }
.cta-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cta-bg > video, .cta-bg > img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.cta-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 12, 32, 0.96) 0%, rgba(10, 12, 32, 0.84) 44%, rgba(10, 12, 32, 0.3) 100%),
    linear-gradient(180deg, #0A0C20 0%, rgba(10, 12, 32, 0) 20%, rgba(10, 12, 32, 0) 80%, #0A0C20 100%);
}
.cta-band > .wrap { position: relative; z-index: 1; }

/* ---------- 13. R7 polish: cross-document view transition + arrow nudge ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
::view-transition-group(nav) { animation-duration: 260ms; }
/* scroller arrows nudge 2px like every other arrow (visual only; block 2b and its layout CSS are unchanged) */
.hs-btn::before { display: inline-block; transition: transform 200ms var(--ease-ui); }
.hs-btn:hover:not(:disabled)[data-hs="next"]::before { transform: translateX(2px); }
.hs-btn:hover:not(:disabled)[data-hs="prev"]::before { transform: translateX(-2px); }

/* ---------- 12. Responsive ---------- */
@media (max-width: 1439px) { :root { --gutter: 64px; } }
@media (min-width: 1440px) { :root { --gutter: 96px; } }
@media (max-width: 1023px) {
  :root { --gutter: 48px; }
  .sticky { position: static; }
}
@media (max-width: 900px) {
  :root { --nav-h: 96px; --sec-pad: 96px; }
  .nav-links, .nav-cta, .nav .lang { display: none; }
  .nav-burger { display: flex; }
  .grid > [class*="g-"] { grid-column: 1 / -1; }
  .head-row > :first-child, .head-row > :last-child { grid-column: 1 / -1; justify-self: start; }
  .head-row { margin-bottom: 40px; }
  .blk { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .blk-text, .blk-media, .blk--flip .blk-text, .blk--flip .blk-media { grid-column: 1 / -1; grid-row: auto; }
  .blk--flip .blk-media { grid-row: 1; }
  .bleed > .fig, .rows .bleed > .fig { aspect-ratio: 3 / 4; min-height: 0; max-height: 82vh; }
  .bleed::after { background: linear-gradient(180deg, rgba(10, 12, 32, 0) 30%, rgba(10, 12, 32, 0.86) 100%); }
  .bleed--r .bleed-copy .wrap { justify-content: flex-start; }
  .bleed--c .bleed-copy { top: auto; bottom: clamp(40px, 7vw, 104px); transform: none; }
  .bleed--c::after { background: linear-gradient(180deg, rgba(10, 12, 32, 0) 30%, rgba(10, 12, 32, 0.86) 100%); }
  .bleed + .bleed { margin-top: 16px; }
  .bleed--tall > .fig { height: auto; }
  .bleed--tall > .fig img, .bleed--tall > .fig video { object-position: 50% 50% !important; }
  .vcard-visual { background-image: var(--bg-sm, var(--bg)); }
  .rows-head { padding-bottom: 48px; }
  .swap-step .fig { aspect-ratio: 16 / 10; }
  .tl-step { padding: 32px 0; }
  .tl-media { aspect-ratio: 4 / 3; max-height: 60vh; margin-bottom: 48px; }
  .tl-dot { top: 12px; transform: none; }
  .tl-step.is-active .tl-dot { transform: scale(1.25); }
  .timeline { padding-left: 32px; }
  .tl-dot { left: -37px; }
  .lines-media { max-height: 60vh; aspect-ratio: 4 / 3; }
  .lines-list { margin-top: 40px; }
  .field--half { grid-column: 1 / -1; }
  .form-submit .btn { width: 100%; }
  .contact-fig { margin-top: 48px; }
  .footer .grid > * { grid-column: 1 / -1; }
  .footer .grid { gap: 32px; }
  .hero--short .hero-content > div { max-width: 100%; }
  .hero--short .hero-content { padding-top: 160px; padding-bottom: 80px; }
  /* Phones: the cover crop shows a narrow slice of the clip, so move the bud toward the right edge
     (object-position 30% = image centre lands at ~85% of the viewport) and widen the scrim under the copy. */
  .hero--short .hero-video { object-position: 30% 50%; }
  .hero--short::before { background: radial-gradient(ellipse 100% 90% at 40% 58%, rgba(10, 12, 32, 0.8) 0%, rgba(10, 12, 32, 0.55) 50%, rgba(10, 12, 32, 0) 82%); }
  .hero--home::before { background: radial-gradient(ellipse 100% 80% at 50% 52%, rgba(10, 12, 32, 0.8) 0%, rgba(10, 12, 32, 0.55) 50%, rgba(10, 12, 32, 0) 82%); }
  .cta-bg::after { background: linear-gradient(180deg, #0A0C20 0%, rgba(10, 12, 32, 0.88) 30%, rgba(10, 12, 32, 0.88) 70%, #0A0C20 100%); }
}
@media (max-width: 767px) {
  :root { --gutter: 24px; }
  .jump-inner { gap: 24px; mask-image: linear-gradient(90deg, #000 82%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); }
}
@media (max-width: 700px) {
  .hero--home .hero-content { padding-top: 18vh; padding-bottom: 140px; }
  .hero-actions { flex-direction: column; gap: 24px; }
  .hero-actions .btn { width: 100%; max-width: 320px; }
  .hero-rail-inner > :not(.hero-rail-mid) { display: none; }
  .hero-rail-inner { justify-content: center; }
  .wordmark { font-size: 23vw; }
  .footer { padding-top: 40px; }
  .cta-band .hero-actions { align-items: flex-start; }
  .hero-grain { mix-blend-mode: normal; opacity: 0.05; }
  .menu-links a { font-size: 36px; }
}
@media (hover: none) {
}

/* ---------- Reduced motion: everything at its final state ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wipe img, .wipe video { clip-path: none !important; transform: none !important; }
  .word-inner, .letter-inner { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero-fade { animation: none !important; opacity: 1 !important; transform: none !important; }
  .blinking-dot { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero-rail-bar { animation: none !important; transform: none !important; }
  .lang-menu { transition: none !important; }
  .timeline { --draw: 1; }
  .tl-step .t, .line { opacity: 1 !important; }
  .tl-dot { background: var(--violet) !important; }
  .line-in { transform: none !important; }
  .fig.drift.is-in { animation: none !important; }
  .nav, .jump { transform: none !important; }
  .jump-marker { transition: none !important; }
  @view-transition { navigation: none; }
  .hero-grain { animation: none !important; }
  .menu.is-open { animation: none !important; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-delay: 0s !important; }
}