/* ============================================================
   RAW & HUNGRY — Design System
   Deep warm-black editorial dark mode
   Grotesk + italic-serif emphasis · single ember accent
   ------------------------------------------------------------
   Ported 1:1 from the vanilla site (assets/css/styles.css).
   Fonts: the intended Epoch (display) and Geist Mono (--font-mono) faces
   are self-hosted from /assets/fonts/ (sourced from
   raw-hungry-design-specifications/). In the vanilla site these were
   referenced at ../../font/… which did not resolve, so the original 404'd
   and fell back to system grotesk/mono; here the real faces load. The
   archivo-latin face is kept as an accented-Latin override because Epoch
   has no umlaut/accent glyphs. Only edit vs. source: @font-face src paths
   point at the public asset location.
   ============================================================ */

/* ---------- Fonts ----------
   All faces are self-hosted (DSGVO: no visitor contact with Google/font CDNs).
   Inter + Instrument Serif are loaded via next/font/google in the layouts —
   downloaded once AT BUILD TIME and served from our origin; they expose the
   --font-inter / --font-instrument-serif variables consumed by the tokens
   below. Epoch/Archivo/Geist Mono stay as classic @font-face, now pointing at
   the smaller woff2 files. */

@font-face {
  font-family: 'Epoch';
  src: url('../fonts/Epoch.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Epoch ships no umlaut/accent dots (ä ö ü render as a o u, ß missing).
   Route accented Latin codepoints to a matching grotesk so German renders correctly.
   Declared AFTER the Epoch face so it wins for the codepoints in its unicode-range. */
@font-face {
  font-family: 'Epoch';
  src: url('../fonts/archivo-latin-700.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00C0-00FF, U+0152-0153, U+1E9E;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* theme gradient palette — white · oranges · greys · black */
  --white:      #FFFFFF;
  --wo-soft:    #FFF3EA;  /* soft white-orange */
  --wo-light:   #FFE2CE;  /* light white-orange */
  --o-light:    #FFB07A;  /* light orange */
  --o:          #FF6A2B;  /* orange */
  --ember:      #FF4A1C;  /* core ember */
  --o-dark:     #C2390F;  /* dark orange */
  --grey-light: #C9C2B8;
  --grey:       #8A837A;
  --grey-dark:  #36302A;
  --black:      #0B0A09;

  --bg:        #0B0A09;
  --bg-2:      #100E0C;
  --surface:   #15120F;
  --surface-2: #1C1813;
  --text:      #EDE7DC;
  --text-dim:  #9A9087;
  --text-mute: #6A625A;
  --ember-2:   #FF7A3D;
  --ember-soft:rgba(255,74,28,0.20);
  --line:      rgba(237,231,220,0.10);
  --line-2:    rgba(237,231,220,0.18);

  --font-display: 'Epoch', 'Archivo', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;
  --font-serif:   var(--font-instrument-serif, 'Instrument Serif'), Georgia, serif;
  --font-body:    var(--font-inter, 'Inter'), sans-serif;

  --max:   1760px;
  --gut:   clamp(24px, 5.5vw, 96px);
  --sp:    clamp(80px, 11vw, 170px);  /* section vertical rhythm */

  /* The page's largest type — a hero title. */
  --fs-mega: clamp(2.7rem, 9vw, 8.5rem);

  /* The running-statement scale: the marquee, and the scrub statement that
     reads in the same voice. Shared as a token rather than written twice, so the
     two cannot drift apart the next time either one is tuned. */
  --fs-runner: clamp(2rem, 5vw, 4.5rem);

  /* Stable hero height. Mobile JS locks this to the initial visual viewport
     so Safari's collapsing address bar cannot resize the layout mid-scroll. */
  --rh-stable-viewport-height: 100vh;

  --r:     14px;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
}

@supports (height: 100svh) {
  :root { --rh-stable-viewport-height: 100svh; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Hide the native scrollbar cross-browser — a custom overlay scrollbar replaces it.
   Because the native scrollbar never occupies layout space, locking scroll (menu open)
   causes no layout shift. */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Custom overlay scrollbar (built in JS, styled here) */
.custom-scrollbar {
  position: fixed; top: 0; right: 4px;
  width: 8px; height: var(--rh-stable-viewport-height);
  z-index: 95;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.custom-scrollbar.is-visible { opacity: 1; }
.custom-scrollbar__thumb {
  position: absolute; top: 0; left: 0;
  width: 100%; min-height: 40px;
  border-radius: 100px;
  background: var(--line-2);
  pointer-events: auto;
  cursor: grab;
  transition: background .3s var(--ease), width .2s var(--ease);
}
.custom-scrollbar:hover .custom-scrollbar__thumb { background: rgba(237,231,220,0.35); }
.custom-scrollbar__thumb:hover,
.custom-scrollbar__thumb.is-dragging { background: var(--ember); cursor: grabbing; }
/* Hide the scrollbar while the fullscreen menu is open */
[data-navigation-status="active"] .custom-scrollbar { opacity: 0; pointer-events: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv01";
}

main {
  background: var(--bg);
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* film grain + ember ambient */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--ember); color: #0B0A09; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); position: relative; z-index: 2; }
.section { padding-block: var(--sp); position: relative; z-index: 20; }
.divider { height: 1px; background: var(--line); width: 100%; }

/* Editorial section index/label row */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-dim);
}
.eyebrow .idx { color: var(--ember); font-variant-numeric: tabular-nums; }
.eyebrow .ln { flex: 1; height: 1px; background: var(--line); max-width: 80px; }

/* The indexed eyebrow is section numbering — "(01) Was wir bauen" — and it runs
   down a page's parts. A hero is the page's opening statement, not one of its
   numbered parts, so it never carries one.

   Enforced here as well as at the sources (the rh-hero Elementor widget and
   reference-import.json) because pages imported before this rule existed still
   hold the markup in the database: the source fixes only take effect on a fresh
   import, this takes effect on the next page view. */
.hero .eyebrow { display: none; }

/* ---------- Typography ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.02em;
}
.word { display: inline-block; white-space: nowrap; }
.serif-it { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--ember); }
em, .em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ember); letter-spacing: 0; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; }

.h-mega   { font-size: var(--fs-mega); }
.h-xl     { font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.98; }
.h-lg     { font-size: clamp(2rem, 4.5vw, 4rem); }
.h-md     { font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.lead     { font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--text-dim); line-height: 1.6; max-width: 56ch; }
.small    { font-size: 0.82rem; color: var(--text-dim); }

/* ---------- Buttons ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-weight: 500;
    font-style: normal;
    text-transform: none;
    line-height: 1.5;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    padding: 0.4em 1.25em;
    border-radius: 100px;
    transition: transform 0.5s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
    will-change: transform;
    white-space: nowrap;
}
.btn .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; transition: transform .4s var(--ease); }
.btn-primary { background: var(--ember); color: #140b07; }
.btn-primary:hover { background: var(--ember-2); }
.btn-primary:hover .dot { transform: scale(2.2); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--text); }
.btn-ghost:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-lg { padding: 18px 36px; font-size: 1rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 500; font-style: normal; text-transform: none; line-height: 1.5; font-size: 0.95rem;
  color: var(--text);
}
.link-arrow .arr { transition: transform .4s var(--ease); color: var(--ember); }
.link-arrow:hover .arr { transform: translateX(6px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 100;
  padding: 22px var(--gut);
  display: flex; align-items: center; justify-content: flex-start;
  gap: clamp(20px, 3vw, 44px);
  transition: padding .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Brand sits left; nav + CTA + hamburger cluster on the right */
.brand { margin-right: auto; }
.site-header.scrolled {
  background: rgba(11,10,9,0.72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; }
.brand .wordmark { display: inline-flex; align-items: baseline; }
.brand .amp { font-family: var(--font-display); font-style: normal; font-weight: 700; color: var(--ember); padding-inline: 0.02em; }
.brand .net { font-family: var(--font-mono); font-weight: 400; font-size: 0.62rem; color: var(--text-mute); letter-spacing: 0.06em; text-transform: uppercase; align-self: center; }
.nav { display: flex; align-items: center; gap: 30px; }

/* availability status + live local time (NAKULA-style header meta) */
.header-meta { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-dim); }
.header-meta .avail { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.12em; }
.avail-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--o); box-shadow: 0 0 0 0 rgba(255,106,43,0.6); animation: availPulse 2.4s ease-out infinite; }
@keyframes availPulse { 0% { box-shadow: 0 0 0 0 rgba(255,106,43,0.55); } 70% { box-shadow: 0 0 0 8px rgba(255,106,43,0); } 100% { box-shadow: 0 0 0 0 rgba(255,106,43,0); } }
.header-meta .clock { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1280px) { .header-meta, .brand .net { display: none; } }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; font-style: normal; text-transform: none; line-height: 1.5; color: var(--text-dim); position: relative; padding: 4px 0; transition: color .3s var(--ease); }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--ember); transition: width .4s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; }

/* ============================================================
   BOLD FULL SCREEN NAVIGATION (Osmo Supply — adapted to RAW & HUNGRY)
   ============================================================ */

/* Hamburger trigger — lives in the header, visible on all breakpoints */
.bold-nav-full__hamburger {
  pointer-events: auto;
  color: var(--text);
  cursor: pointer;
  background-color: transparent;
  border: none;
  flex: none;
  width: 2.6em; height: 2.6em;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  z-index: 110;
}
.bold-nav-full__hamburger-bar {
  background-color: currentColor;
  width: 1.6em; height: 2px;
  position: absolute;
  transform: translate(0, 0) rotate(0.001deg);
  transition: transform 0.5s cubic-bezier(.7, 0, .3, 1);
}
.bold-nav-full__hamburger-bar:nth-child(1) { transform: translate(0, -.42em) scale(1, 1) rotate(0.001deg); }
.bold-nav-full__hamburger-bar:nth-child(3) { transform: translate(0, .42em) scale(1, 1) rotate(0.001deg); }
.bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(1) { transform: translate(0, -.42em) scale(.55, 1) rotate(0.001deg); }
.bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(3) { transform: translate(0, .42em) scale(.55, 1) rotate(0.001deg); }

/* Hamburger — open (morph to X) */
[data-navigation-status="active"] .bold-nav-full__hamburger-bar:nth-child(1) { transform: translate(0, 0) rotate(45deg) scale(1, 1); }
[data-navigation-status="active"] .bold-nav-full__hamburger-bar:nth-child(2) { transform: translate(-150%, 0) rotate(0.001deg) scale(1, 1); }
[data-navigation-status="active"] .bold-nav-full__hamburger-bar:nth-child(3) { transform: translate(0, 0) rotate(-45deg) scale(1, 1); }
[data-navigation-status="active"] .bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(1) { transform: translate(0, 0) rotate(45deg) scale(.7, 1); }
[data-navigation-status="active"] .bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(3) { transform: translate(0, 0) rotate(-45deg) scale(.7, 1); }

/* Fullscreen tile */
.bold-nav-full__tile {
  pointer-events: none;
  background-color: var(--bg-2);
  flex-flow: column; justify-content: center; align-items: center;
  width: 100%; height: 100%;
  display: flex;
  position: fixed; inset: 0;
  z-index: 90;
  transition: clip-path 1s cubic-bezier(.9, 0, .1, 1);
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}
[data-navigation-status="active"] .bold-nav-full__tile {
  pointer-events: auto;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.bold-nav-full__ul { flex-flow: column; align-items: center; margin: 0; padding: 0; list-style: none; display: flex; }
.bold-nav-full__li {
  justify-content: center; align-items: center;
  margin: 0; padding: 0;
  display: flex; position: relative; overflow: hidden;
  transition: opacity 0.5s cubic-bezier(.7, 0, .3, 1);
}

.bold-nav-full__link {
  color: var(--text);
  letter-spacing: -.04em;
  padding-left: .075em; padding-right: .075em;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 2.8vw + 2.8vh, 6rem);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  transform: translateY(100%) rotate(5deg);
  transition: transform 0.75s cubic-bezier(.7, 0, .3, 1);
}
.bold-nav-full__li:nth-child(1) .bold-nav-full__link { transition-delay: 0.25s; }
.bold-nav-full__li:nth-child(2) .bold-nav-full__link { transition-delay: 0.2s; }
.bold-nav-full__li:nth-child(3) .bold-nav-full__link { transition-delay: 0.15s; }
.bold-nav-full__li:nth-child(4) .bold-nav-full__link { transition-delay: 0.1s; }
.bold-nav-full__li:nth-child(5) .bold-nav-full__link { transition-delay: 0.05s; }
.bold-nav-full__li:nth-child(6) .bold-nav-full__link { transition-delay: 0s; }

[data-navigation-status="active"] .bold-nav-full__link { transform: translateY(0%) rotate(0.001deg); }
[data-navigation-status="active"] .bold-nav-full__li:nth-child(1) .bold-nav-full__link { transition-delay: 0.3s; }
[data-navigation-status="active"] .bold-nav-full__li:nth-child(2) .bold-nav-full__link { transition-delay: 0.35s; }
[data-navigation-status="active"] .bold-nav-full__li:nth-child(3) .bold-nav-full__link { transition-delay: 0.4s; }
[data-navigation-status="active"] .bold-nav-full__li:nth-child(4) .bold-nav-full__link { transition-delay: 0.45s; }
[data-navigation-status="active"] .bold-nav-full__li:nth-child(5) .bold-nav-full__link { transition-delay: 0.5s; }
[data-navigation-status="active"] .bold-nav-full__li:nth-child(6) .bold-nav-full__link { transition-delay: 0.55s; }

.bold-nav-full__link-text {
  text-shadow: 0 1.1em 0 var(--ember);
  display: block; position: relative;
  transition: transform 0.5s cubic-bezier(.7, 0, .3, 1);
  transform: translateY(0%) rotate(0.001deg);
}
.bold-nav-full__link:hover .bold-nav-full__link-text { transform: translateY(-100%) rotate(0.001deg); }

/* Dim the other items on hover */
.bold-nav-full__ul:has(.bold-nav-full__li:hover) .bold-nav-full__li { opacity: 0.2; }
.bold-nav-full__ul:has(.bold-nav-full__li:hover) .bold-nav-full__li:hover { opacity: 1; }

/* Bottom row */
.bold-nav__bottom {
  justify-content: space-between; align-items: center;
  width: 100%;
  padding: 2.25em var(--gut);
  display: flex;
  position: absolute; bottom: 0; left: 0;
}
.bold-nav__word { opacity: .5; margin: 0; font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.04em; color: var(--text); }
a.bold-nav__word { transition: opacity .3s var(--ease), color .3s var(--ease); }
a.bold-nav__word:hover { opacity: 1; color: var(--ember); }

/* Fade out first-level nav + CTA while the fullscreen menu is open */
.nav-links, .nav > .btn { transition: opacity .3s var(--ease); }
[data-navigation-status="active"] .nav-links,
[data-navigation-status="active"] .nav > .btn,
[data-navigation-status="active"] .nav > .locale-switch { opacity: 0; pointer-events: none; }

/* ============================================================
   LANGUAGE SWITCHER (header · fullscreen menu · footer)
   ============================================================ */
.locale-switch { display: inline-flex; align-items: center; gap: 8px; }
.locale-switch__item {
  font-family: var(--font-display);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--text-dim); text-transform: uppercase;
  background: none; border: 0; padding: 2px 2px; cursor: pointer;
  transition: color .3s var(--ease), opacity .3s var(--ease);
}
a.locale-switch__item:hover { color: var(--text); }
.locale-switch__item.is-active { color: var(--ember); cursor: default; }
/* Slash divider between the two locales */
.locale-switch__item + .locale-switch__item { position: relative; }
.locale-switch__item + .locale-switch__item::before {
  content: "/"; position: absolute; left: -7px; color: var(--text-mute);
  font-weight: 400; pointer-events: none;
}

/* Header: sits after the CTA, transitions with the rest of the nav */
.locale-switch--header { margin-left: 4px; transition: opacity .3s var(--ease); }

/* Fullscreen menu: monospace to match the bottom meta line */
.locale-switch--menu { gap: 10px; }
.locale-switch--menu .locale-switch__item { font-family: var(--font-mono); font-size: 0.9rem; color: var(--text); opacity: .5; letter-spacing: 0.04em; }
.locale-switch--menu a.locale-switch__item:hover { opacity: 1; color: var(--ember); }
.locale-switch--menu .locale-switch__item.is-active { opacity: 1; color: var(--ember); }

/* Footer: aligns with the legal/network line */
.footer-end { display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.locale-switch--footer .locale-switch__item { font-size: 0.85rem; color: var(--text-mute); }
.locale-switch--footer a.locale-switch__item:hover { color: var(--ember); }
.locale-switch--footer .locale-switch__item.is-active { color: var(--text); }

/* ============================================================
   HERO
   ============================================================ */
.hero { min-height: var(--rh-stable-viewport-height); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(40px, 6vw, 80px); position: relative; overflow: visible; }
.hero-glow {
  position: absolute; z-index: 0;
  width: 80vw; height: 80vw; max-width: 1100px; max-height: 1100px;
  left: 50%; top: 35%; transform: translate(-50%, -50%);
  /* Softness baked into the gradient stops — the previous filter: blur(20px)
     forced a huge permanently-blurred compositing layer for zero visual gain
     on an already-soft radial gradient. */
  background: radial-gradient(circle, var(--ember-soft) 0%, rgba(255, 74, 28, 0.08) 38%, transparent 68%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(28px, 5vw, 60px); }
.hero-sub { max-width: 42ch; }
.hero-home { position: relative; z-index: 20; background: var(--bg); }
.hero-home h1 { font-size: clamp(4rem, 18vw, 18rem); line-height: 0.84; letter-spacing: -0.04em; }
.hero h1 { overflow-wrap: normal; hyphens: none; }
.hero h1 .l2 { display: block; }
.hero-meta { display: flex; gap: 40px; flex-wrap: wrap; margin-top: clamp(30px, 4vw, 50px); align-items: flex-end; justify-content: space-between; }
.hero-tag { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); }

/* word reveal — soft opacity, NO clip mask.
   Keeps every glyph intact (incl. first letter) and never cuts off the last word.
   No permanent will-change: words animate only briefly during reveals — a
   blanket hint promoted dozens of layers for the whole page lifetime. */
.word { display: inline-block; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { border-block: 1px solid var(--line); padding-block: clamp(18px, 2.4vw, 30px); overflow: hidden; position: relative; z-index: 2; }
.marquee-track { display: flex; gap: 0; white-space: nowrap; width: max-content; will-change: transform; }
.marquee-track span { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-runner); letter-spacing: -0.02em; padding-inline: 0.6em; color: var(--text); display: inline-flex; align-items: center; }
.marquee-track .sep { color: var(--ember); font-family: var(--font-serif); font-style: italic; }
.marquee-track .out { color: transparent; -webkit-text-stroke: 1px var(--line-2); }

/* ============================================================
   INTRO / STATEMENT
   ============================================================ */
.statement { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 3.6vw, 3.2rem); line-height: 1.18; letter-spacing: -0.02em; max-width: 22ch; }
.statement .dim { color: var(--text-mute); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 120px); align-items: start; }
.split-meta { align-self: end; }

/* ============================================================
   WORK / CASES (staggered)
   ============================================================ */
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(40px, 6vw, 80px); flex-wrap: wrap; }
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 28px) clamp(20px, 3vw, 40px); }
.work-item { grid-column: span 6; position: relative; }
.work-item.tall { margin-top: clamp(0px, 6vw, 90px); }
.work-media {
  position: relative; aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.work-item.wide .work-media { aspect-ratio: 16/10; }
.work-media .grade { position: absolute; inset: 0; opacity: 1; transition: transform 1s var(--ease), opacity .6s; transform: scale(1.04); }
/* visible, theme-matched gradient grades (white · oranges · greys · black) — override inline */
.work-grid .work-item:nth-child(6n+1) .grade, .cases-grid .case-card:nth-child(6n+1) .grade { background: radial-gradient(130% 125% at 16% 6%, var(--o-light) 0%, var(--o) 24%, var(--o-dark) 52%, #1c0e07 80%, var(--black) 100%) !important; }
.work-grid .work-item:nth-child(6n+2) .grade, .cases-grid .case-card:nth-child(6n+2) .grade { background: linear-gradient(135deg, var(--wo-soft) -12%, var(--o-light) 26%, var(--o-dark) 64%, var(--grey-dark) 88%, var(--black) 100%) !important; }
.work-grid .work-item:nth-child(6n+3) .grade, .cases-grid .case-card:nth-child(6n+3) .grade { background: radial-gradient(120% 130% at 78% 88%, var(--ember) 0%, var(--o-dark) 36%, var(--grey-dark) 72%, var(--black) 100%) !important; }
.work-grid .work-item:nth-child(6n+4) .grade, .cases-grid .case-card:nth-child(6n+4) .grade { background: linear-gradient(120deg, var(--grey-light) -18%, var(--grey) 22%, var(--grey-dark) 58%, var(--black) 100%) !important; }
.work-grid .work-item:nth-child(6n+5) .grade, .cases-grid .case-card:nth-child(6n+5) .grade { background: radial-gradient(130% 120% at 32% 14%, var(--wo-light) 0%, var(--o) 30%, var(--o-dark) 60%, #18100a 86%, var(--black) 100%) !important; }
.work-grid .work-item:nth-child(6n+6) .grade, .cases-grid .case-card:nth-child(6n+6) .grade { background: linear-gradient(150deg, var(--o) -8%, var(--o-dark) 34%, var(--grey-dark) 70%, var(--black) 100%) !important; }
/* warm screen sheen on every media frame */
.work-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 100% at 80% 112%, var(--ember-soft), transparent 56%); mix-blend-mode: screen; pointer-events: none; z-index: 1; }
.work-item:hover .work-media .grade { transform: scale(1.12); }
.work-media .num { position: relative; z-index: 2; font-family: var(--font-serif); font-style: italic; font-size: clamp(3rem, 6vw, 5.5rem); color: rgba(255,255,255,0.85); mix-blend-mode: overlay; }
.work-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-top: 22px; }
.work-info h3 { font-size: clamp(1.3rem, 2.2vw, 2rem); }
.work-info h3 .em { font-size: 0.95em; }
.work-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 50%; }
.tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--text-dim); border: 1px solid var(--line); border-radius: 100px; padding: 5px 12px; white-space: nowrap; }
.work-item .plus { position: absolute; top: 16px; right: 16px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: rgba(11,10,9,0.5); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.7); transition: .4s var(--ease); color: var(--text); }
.work-item:hover .plus { opacity: 1; transform: scale(1); }

/* ============================================================
   PROCESS (vertical rhythm lines)
   ============================================================ */
.process-q { display: grid; gap: 6px; margin-bottom: clamp(50px, 8vw, 100px); }
.process-q p { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 3vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.2; }
.process-q p:first-child { color: var(--text-dim); font-size: clamp(1rem, 1.5vw, 1.2rem); margin-bottom: 16px; font-weight: 400; }
.steps { border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 30px;
  padding-block: clamp(20px, 2.6vw, 34px); border-bottom: 1px solid var(--line);
  transition: padding-left .5s var(--ease), background .5s var(--ease);
}
.step:hover { padding-left: 24px; background: linear-gradient(90deg, var(--ember-soft), transparent 60%); }
.step .st-num { font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; color: var(--ember); }
.step .st-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 4vw, 3.4rem); letter-spacing: -0.03em; transition: transform .5s var(--ease); }
.step:hover .st-name { transform: translateX(6px); }
.step .st-desc { font-size: 0.92rem; color: var(--text-dim); max-width: 28ch; text-align: right; }
.process-out { margin-top: clamp(40px, 6vw, 70px); display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.process-out .big { font-family: var(--font-serif); font-style: italic; font-size: clamp(3rem, 9vw, 7rem); color: var(--ember); line-height: 1; }

/* ============================================================
   QUOTE / REASON-WHY WALL
   ============================================================ */
.quote-wall { background: var(--bg-2); border-block: 1px solid var(--line); }
.quote-wall .big-q { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 6vw, 5.5rem); line-height: 1.04; letter-spacing: -0.03em; max-width: 18ch; }

/* ============================================================
   NEWSROOM
   ============================================================ */
.news-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.news-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px, 4vw, 60px); align-items: center;
  padding-block: clamp(26px, 3vw, 40px); border-bottom: 1px solid var(--line);
  transition: background .6s var(--ease), padding-left .6s var(--ease), border-color .6s var(--ease);
  position: relative;
}
.news-row:hover {
  background: linear-gradient(90deg, var(--ember-soft), transparent 65%);
  padding-left: 20px;
  border-color: var(--ember);
}
.news-date { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-mute); font-variant-numeric: tabular-nums; transition: color .5s var(--ease); }
.news-row:hover .news-date { color: var(--text-dim); }
.news-cat { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember); margin-bottom: 8px; }
.news-row h3 { font-size: clamp(1.15rem, 2vw, 1.7rem); line-height: 1.25; max-width: 32ch; font-weight: 600; letter-spacing: -0.02em; transition: transform .6s var(--ease); }
.news-row:hover h3 { transform: translateX(8px); }
.news-go { color: var(--text-dim); display: inline-block; transition: transform .55s var(--ease), color .5s var(--ease); }
.news-row:hover .news-go { transform: translate(8px,-8px) rotate(8deg) scale(1.12); color: var(--ember); }

/* ============================================================
   CREATE / CONVERT / SCALE  (triptych)
   ============================================================ */
.ccs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 36px); }
.ccs-col { padding-top: 28px; border-top: 2px solid var(--ember); }
.ccs-col h3 { font-size: clamp(1.6rem, 3vw, 2.6rem); margin-bottom: 22px; }
.ccs-col ul { list-style: none; display: grid; gap: 2px; }
.ccs-col li { font-family: var(--font-display); font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--text-dim); padding-block: 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; transition: color .3s, padding-left .4s var(--ease); }
.ccs-col li::before { content: "→"; color: var(--ember); opacity: 0; transform: translateX(-8px); transition: .35s var(--ease); }
.ccs-col li:hover { color: var(--text); padding-left: 4px; }
.ccs-col li:hover::before { opacity: 1; transform: translateX(0); }

/* ============================================================
   CONTACT / CTA
   ============================================================ */
.cta { text-align: center; position: relative; overflow: visible; }
.cta-glow { position: absolute; left: 50%; top: 60%; transform: translate(-50%,-50%); width: 70vw; height: 60vw; max-width: 900px; max-height: 700px; background: radial-gradient(circle, var(--ember-soft), transparent 60%); pointer-events: none; }
.cta h2 { font-size: clamp(3rem, 12vw, 11rem); line-height: 0.9; margin-bottom: 30px; }
.cta .lead { margin-inline: auto; text-align: center; margin-bottom: 44px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Contact form block */
.contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.form-grid { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.field input, .field textarea {
  background: transparent; border: none; border-bottom: 1px solid var(--line-2);
  color: var(--text); font-family: var(--font-body); font-size: 1.05rem; padding: 12px 0;
  transition: border-color .4s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ember); }
.field textarea { resize: vertical; min-height: 90px; }
.contact-side .lead { margin-bottom: 30px; }
.loc-grid { display: grid; gap: 24px; margin-top: 36px; }
.loc { border-top: 1px solid var(--line); padding-top: 16px; }
.loc h4 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 6px; }
.loc p, .loc a { color: var(--text-dim); font-size: 0.95rem; }
.loc a:hover { color: var(--ember); }

/* ============================================================
   AGENTUR — team grid
   ============================================================ */
.prose { max-width: 62ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.75; color: var(--text-dim); }
.prose + .prose { margin-top: 1.4em; }
.prose strong, .prose b { color: var(--text); font-weight: 500; }

.network-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); }
.net-card { border: 1px solid var(--line); border-radius: var(--r); padding: clamp(28px, 4vw, 48px); background: transparent; transition: border-color .4s, transform .5s var(--ease); }
.net-card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.net-card h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin-bottom: 18px; }

.rh-network-story {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.rh-network-story::before {
  content: "";
  position: absolute;
  width: min(70vw, 980px);
  aspect-ratio: 1;
  top: 14%;
  right: -38%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 74, 28, 0.09), transparent 68%);
  pointer-events: none;
}
.rh-network-story__header {
  max-width: 1120px;
}
.rh-network-story__title {
  max-width: 12ch;
  margin-top: clamp(24px, 3vw, 40px);
  letter-spacing: -0.045em;
}
.rh-network-story__title-line {
  display: block;
}
.rh-network-story__title > .serif-it {
  display: block;
  margin-left: clamp(0px, 8vw, 130px);
  padding-bottom: 0.08em;
  line-height: 1.08;
}
.rh-network-story__title-line + .rh-network-story__title-line {
  margin-left: clamp(0px, 8vw, 130px);
  padding-bottom: 0.08em;
  line-height: 1.08;
}
.rh-network-story__intro {
  max-width: 62ch;
  margin-top: clamp(28px, 4vw, 52px);
  color: var(--text-dim);
  font-size: clamp(1.12rem, 1.7vw, 1.42rem);
  line-height: 1.55;
}
.rh-network-story__visual {
  position: relative;
  aspect-ratio: 16 / 8.4;
  margin-top: clamp(54px, 8vw, 110px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #080706;
}
.rh-network-story__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(8, 7, 6, 0.42));
  pointer-events: none;
}
.rh-network-story__visual-media {
  position: absolute;
  inset: -9% 0;
  background-image: url("../images/rh-network-ecosystem-2026.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;
}
.rh-network-story__chapters {
  margin-top: clamp(64px, 10vw, 150px);
}
.rh-network-story__chapter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 72px);
  padding: clamp(50px, 7vw, 96px) 0;
  border-top: 1px solid var(--line-2);
}
.rh-network-story__identity {
  grid-column: 1 / span 5;
}
.rh-network-story__body {
  grid-column: 7 / -1;
  align-self: end;
}
.rh-network-story__chapter--group .rh-network-story__identity {
  grid-column: 7 / -1;
  grid-row: 1;
}
.rh-network-story__chapter--group .rh-network-story__body {
  grid-column: 1 / span 5;
  grid-row: 1;
}
.rh-network-story__chapter-title {
  display: grid;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.6vw, 6.6rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.055em;
}
.rh-network-story__chapter-title .serif-it {
  padding-bottom: 0.08em;
  color: var(--ember);
  line-height: 1.08;
}
.rh-network-story__copy {
  max-width: 58ch;
}
.rh-network-story__capabilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(18px, 3vw, 40px);
  margin-top: clamp(30px, 4vw, 54px);
  list-style: none;
}
.rh-network-story__capabilities li {
  border-top: 1px solid var(--line);
  padding: 12px 0 16px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 0.85vw, 0.84rem);
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.rh-network-story__metric {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: clamp(34px, 5vw, 68px);
}
.rh-network-story__metric strong {
  color: var(--ember);
  font-family: var(--font-serif);
  font-size: clamp(4.5rem, 9vw, 9rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.7;
  letter-spacing: -0.06em;
}
.rh-network-story__metric span {
  max-width: 17ch;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 0.9vw, 0.88rem);
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

@media (max-width: 899px) {
  .rh-network-story::before { right: -70%; top: 22%; }
  .rh-network-story__title { max-width: 10ch; }
  .rh-network-story__title > .serif-it,
  .rh-network-story__title-line + .rh-network-story__title-line { margin-left: 0; }
  .rh-network-story__visual {
    aspect-ratio: 4 / 3;
    margin-top: 48px;
  }
  .rh-network-story__visual-media {
    inset: -4% -18%;
    background-size: cover;
  }
  .rh-network-story__chapters { margin-top: 54px; }
  .rh-network-story__chapter {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 48px 0 58px;
  }
  .rh-network-story__identity,
  .rh-network-story__body,
  .rh-network-story__chapter--group .rh-network-story__identity,
  .rh-network-story__chapter--group .rh-network-story__body {
    grid-column: 1;
    grid-row: auto;
  }
  .rh-network-story__chapter-title { font-size: clamp(2.7rem, 14vw, 4.7rem); }
  .rh-network-story__capabilities { grid-template-columns: 1fr 1fr; }
  .rh-network-story__metric { margin-top: 38px; }
}

@media (max-width: 520px) {
  .rh-network-story__visual { aspect-ratio: 1 / 1; }
  .rh-network-story__visual-media { inset: -2% -38%; }
  .rh-network-story__capabilities { grid-template-columns: 1fr; }
}

.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.member { }
.member-photo { aspect-ratio: 2/3; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); position: relative; display: flex; align-items: flex-end; justify-content: center; }
.member-photo .grade { position: absolute; inset: 0; transition: transform 1s var(--ease); }
.team-grid .member:nth-child(5n+1) .member-photo .grade { background: radial-gradient(130% 120% at 30% 8%, var(--o) 0%, var(--o-dark) 40%, #170d07 80%, var(--black) 100%) !important; }
.team-grid .member:nth-child(5n+2) .member-photo .grade { background: linear-gradient(160deg, var(--wo-light) -20%, var(--o-dark) 50%, var(--black) 100%) !important; }
.team-grid .member:nth-child(5n+3) .member-photo .grade { background: linear-gradient(160deg, var(--grey-light) -20%, var(--grey) 30%, var(--grey-dark) 70%, var(--black) 100%) !important; }
.team-grid .member:nth-child(5n+4) .member-photo .grade { background: radial-gradient(120% 120% at 60% 10%, var(--o-light) 0%, var(--o-dark) 46%, var(--grey-dark) 82%, var(--black) 100%) !important; }
.team-grid .member:nth-child(5n+5) .member-photo .grade { background: linear-gradient(150deg, var(--ember) -10%, var(--o-dark) 44%, var(--grey-dark) 80%, var(--black) 100%) !important; }
.member:hover .member-photo .grade { transform: scale(1.07); }
.member-photo .initials { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; color: rgba(255,255,255,0.9); mix-blend-mode: overlay; padding-bottom: 24px; }
.member h4 { font-family: var(--font-display); font-size: 1.05rem; margin-top: 16px; letter-spacing: -0.01em; }
.member .role { font-size: 0.85rem; color: var(--text-dim); margin-top: 3px; }
.member .mail { display: inline-flex; margin-top: 10px; color: var(--text-mute); transition: color .3s; }
.member .mail:hover { color: var(--ember); }

/* ============================================================
   LEISTUNGEN — service blocks + FAQ
   ============================================================ */
.service-block { display: grid; grid-template-columns: auto 1fr; gap: clamp(30px, 6vw, 90px); padding-block: clamp(40px, 5vw, 70px); border-top: 1px solid var(--line); align-items: start; }
.service-block .s-num { font-family: var(--font-serif); font-style: italic; font-size: clamp(2.5rem, 5vw, 4.5rem); color: var(--ember); line-height: 1; }
.service-block h3 { font-size: clamp(1.8rem, 4vw, 3.2rem); margin-bottom: 22px; max-width: 16ch; }
.service-block .lead { max-width: 60ch; }

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; padding-block: clamp(22px, 3vw, 34px); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.8rem); letter-spacing: -0.02em; transition: color .3s; }
.faq-q:hover { color: var(--ember); }
.faq-icon { flex-shrink: 0; width: 30px; height: 30px; position: relative; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--ember); transition: transform .4s var(--ease); }
.faq-icon::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); }
.faq-icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.faq-item.open .faq-icon::after { transform: translateX(-50%) scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
.faq-a-inner { padding-bottom: clamp(24px, 3vw, 36px); color: var(--text-dim); max-width: 70ch; font-size: 1.05rem; line-height: 1.7; }

/* ============================================================
   STUDIO PAGE — stats + capabilities list
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 5vw, 70px); }
.stat { border-top: 1px solid var(--line-2); padding-top: 24px; }
.stat .num { font-family: var(--font-serif); font-style: italic; color: var(--ember); font-size: clamp(3.2rem, 7vw, 6rem); line-height: 0.9; display: block; }
.stat .lbl { color: var(--text-dim); margin-top: 16px; font-size: 1rem; line-height: 1.5; max-width: 26ch; }

/* ---------- Studio backstory: restrained pinned number journey ---------- */
.rh-backstory[data-rh-backstory-ready="true"] {
  --rh-backstory-ink: #050505;
  --rh-backstory-paper: var(--text);
  min-height: var(--rh-stable-viewport-height, 100dvh);
  padding-block: 0;
  isolation: isolate;
  overflow: clip;
  background: var(--rh-backstory-ink);
}
.rh-backstory__stage {
  min-height: var(--rh-stable-viewport-height, 100dvh);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: clamp(18px, 2vw, 34px);
  row-gap: clamp(24px, 3.5vh, 44px);
  padding-block: clamp(112px, 14vh, 152px) clamp(96px, 10vh, 128px);
}
.rh-backstory__header {
  grid-column: 1 / span 5;
  grid-row: 1;
  align-self: center;
  min-width: 0;
}
.rh-backstory__kicker {
  width: max-content;
  margin-bottom: clamp(30px, 4vh, 48px);
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(237,231,220,0.04);
  box-shadow: inset 0 0 0 1px rgba(237,231,220,0.07);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.rh-backstory__title {
  max-width: 9ch;
  color: var(--rh-backstory-paper);
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.rh-backstory__title-line {
  display: block;
  width: max-content;
  overflow: hidden;
  padding: 0.08em 0.05em 0.08em 0;
  transform-origin: left bottom;
}
.rh-backstory__title-line + .rh-backstory__title-line { color: var(--ember); }
.rh-backstory__intro {
  max-width: 34ch;
  margin-top: clamp(28px, 4vh, 42px);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: inherit;
  line-height: 1.6;
}
.rh-backstory__metric-shell {
  grid-column: 7 / -1;
  grid-row: 1;
  width: 100%;
  max-width: 680px;
  justify-self: end;
  padding: 6px;
  border-radius: 34px;
  background: rgba(237,231,220,0.035);
  box-shadow: inset 0 0 0 1px rgba(237,231,220,0.055);
  transform-origin: center center;
}
.rh-backstory__metric-core {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4vw, 54px);
  border-radius: 28px;
  background: #090807;
  box-shadow: inset 0 1px rgba(255,255,255,0.075);
}
.rh-backstory__metric-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.rh-backstory__active-index {
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}
.rh-backstory__counter {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  color: var(--ember);
  font-family: var(--font-serif);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  line-height: 0.68;
  letter-spacing: -0.07em;
  transform-origin: left center;
}
.rh-backstory__counter-value { font-size: var(--fs-mega); }
.rh-backstory__counter-suffix {
  margin: 0.04em 0 0 0.05em;
  font-size: var(--fs-runner);
}
.rh-backstory__active-copy {
  max-width: 34ch;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: inherit;
  line-height: 1.55;
}
.rh-backstory__guide {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
}
.rh-backstory__route {
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
}
.rh-backstory__route::before,
.rh-backstory__route::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rh-backstory-ink);
  box-shadow: 0 0 0 1px rgba(255,74,28,0.72);
  transform: translateY(-50%);
}
.rh-backstory__route::before { left: 0; }
.rh-backstory__route::after { right: 0; }
.rh-backstory__route-progress {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left center;
}
.rh-backstory__steps {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 88px);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh-backstory__step {
  position: relative;
  min-width: 0;
  padding-top: 4px;
  opacity: 0.42;
  transition: opacity 700ms cubic-bezier(0.32,0.72,0,1), transform 700ms cubic-bezier(0.32,0.72,0,1);
}
.rh-backstory__step.is-active {
  opacity: 1 !important;
  transform: translateY(-3px);
}
.rh-backstory__step-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.rh-backstory__step-title {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 580;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rh-backstory__step-value {
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--fs-runner);
  font-style: italic;
  line-height: 0.8;
}
.rh-backstory__step-copy { display: none; }

@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .rh-backstory[data-rh-backstory-ready="true"] { min-height: auto; overflow: hidden; }
  .rh-backstory__stage {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 56px;
    padding-block: 96px;
  }
  .rh-backstory__header,
  .rh-backstory__steps { width: 100%; }
  .rh-backstory__title { max-width: 9ch; font-size: var(--fs-mega); }
  .rh-backstory__title-line { width: auto; }
  .rh-backstory__metric-shell,
  .rh-backstory__guide { display: none; }
  .rh-backstory__steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .rh-backstory__step {
    padding-block: 28px;
    opacity: 1 !important;
    box-shadow: inset 0 1px rgba(237,231,220,0.1);
    transform: none !important;
  }
  .rh-backstory__step-value { color: var(--ember); font-size: var(--fs-runner); }
  .rh-backstory__step-copy {
    display: block;
    max-width: 34ch;
    margin-top: 14px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: inherit;
    line-height: 1.55;
  }
}

.cap-list { border-top: 1px solid var(--line); }
.cap-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-block: clamp(18px, 2.4vw, 30px); border-bottom: 1px solid var(--line); transition: padding-left .5s var(--ease), background .5s var(--ease); }
.cap-row:hover { padding-left: 20px; background: linear-gradient(90deg, var(--ember-soft), transparent 55%); }
.cap-row .t { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 3rem); letter-spacing: -0.025em; line-height: 1; }
.cap-row .t .em { font-size: 0.9em; }
.cap-row .n { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--ember); white-space: nowrap; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; gap: 30px; } }

/* ============================================================
   SINGLE CASE — cinematic editorial split
   ============================================================ */
.single-rh_case { --font-body: var(--font-mono); }
.single-rh_case main { width: 100%; max-width: none; }
.case-study {
  --case-max: 1640px;
  --case-gutter: clamp(18px, 4vw, 68px);
  width: 100%;
  max-width: none;
  margin-inline: auto;
  overflow: clip;
  position: relative;
  font-family: var(--font-mono);
}
.case-study__wrap {
  width: min(calc(100% - (var(--case-gutter) * 2)), var(--case-max));
  margin-inline: auto;
}
.case-study__media-wrap {
  width: min(calc(100% - clamp(24px, 3vw, 52px)), 1760px);
  margin-inline: auto;
}

.case-hero {
  position: relative;
  padding-block: clamp(132px, 14vw, 218px) clamp(76px, 9vw, 132px);
}
.case-hero::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -20%;
  width: min(68vw, 980px);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, var(--ember-soft), transparent 68%);
  opacity: 0.36;
}
.case-hero__top,
.case-hero__heading,
.case-hero__details { position: relative; z-index: 1; }
.case-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(58px, 8vw, 118px);
}
.case-back-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 650ms cubic-bezier(0.32, 0.72, 0, 1), transform 650ms cubic-bezier(0.32, 0.72, 0, 1);
}
.case-back-link__icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  color: var(--text);
  background: rgba(237,231,220,0.06);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 650ms cubic-bezier(0.32, 0.72, 0, 1), background-color 650ms cubic-bezier(0.32, 0.72, 0, 1);
}
.case-back-link:hover { color: var(--text); transform: translateX(-2px); }
.case-back-link:hover .case-back-link__icon { transform: translateX(-4px); background: rgba(237,231,220,0.1); }
.case-pill,
.case-kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.case-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding-inline: 16px;
  border-radius: 999px;
  color: var(--text-dim);
  background: rgba(237,231,220,0.035);
  box-shadow: inset 0 0 0 1px var(--line);
}
.case-kicker { margin-bottom: clamp(20px, 2.2vw, 34px); color: var(--ember); }
.case-hero__heading h1 {
  max-width: 10ch;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(4.6rem, 10.5vw, 11rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.84;
  text-wrap: balance;
}
.case-hero__details {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 8vw, 138px);
  align-items: start;
  margin-top: clamp(66px, 9vw, 140px);
  padding-top: clamp(28px, 3.4vw, 48px);
  box-shadow: inset 0 1px 0 var(--line);
}
.case-hero__summary p {
  max-width: 33ch;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.65rem);
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}
.case-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 58px);
}
.case-meta__item { min-width: 0; }
.case-meta__item--services { grid-column: 1 / -1; }
.case-meta dt {
  margin-bottom: 11px;
  color: var(--text-mute);
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.case-meta dd {
  color: var(--text);
  font-size: clamp(0.88rem, 1vw, 1rem);
  line-height: 1.55;
}
.case-service-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.case-service-list li {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding-inline: 14px;
  border-radius: 999px;
  color: var(--text-dim);
  background: rgba(237,231,220,0.035);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.67rem;
  letter-spacing: 0.06em;
}

.case-hero-visual { padding-bottom: clamp(96px, 12vw, 190px); }
.rh-double-bezel.case-media {
  width: 100%;
  padding: clamp(5px, 0.55vw, 9px);
  border-radius: clamp(25px, 3.3vw, 50px);
  background: rgba(237,231,220,0.038);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.075),
    inset 0 0 0 1px rgba(237,231,220,0.055),
    0 48px 130px -90px rgba(255,74,28,0.72);
}
.case-media__inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: clamp(20px, 2.8vw, 42px);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), inset 0 1px 1px rgba(255,255,255,0.1);
  isolation: isolate;
}
.case-media--hero .case-media__inner { min-height: clamp(420px, 63vw, 920px); }
.case-media--landscape .case-media__inner { min-height: clamp(440px, 43vw, 690px); }
.case-media--portrait .case-media__inner { min-height: clamp(580px, 56vw, 830px); }
.case-media--landscape-tall .case-media__inner { min-height: clamp(500px, 48vw, 760px); }
.case-media__asset {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1100ms cubic-bezier(0.32, 0.72, 0, 1);
}
.case-media__asset[data-parallax] { top: -9%; height: 118%; }
.case-media:hover .case-media__asset:not([data-parallax]) { transform: scale(1.028); }
.case-media__fallback { background: var(--case-media-art); }
.case-media__fallback::before {
  content: "";
  position: absolute;
  inset: -24%;
  background: repeating-linear-gradient(96deg, transparent 0 8%, rgba(255,255,255,0.08) 8.2%, transparent 8.5% 17%);
  opacity: 0.28;
  transform: rotate(-8deg) scale(1.08);
}
.case-media__fallback::after {
  content: "";
  position: absolute;
  right: 9%;
  bottom: 12%;
  width: clamp(130px, 22vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.26), 0 0 0 clamp(22px, 4vw, 58px) rgba(255,255,255,0.035);
}
.case-media__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(11,10,9,0.1) 72%, rgba(11,10,9,0.58) 100%);
}
.case-media__caption {
  position: absolute;
  right: clamp(20px, 3vw, 44px);
  bottom: clamp(20px, 3vw, 40px);
  left: clamp(20px, 3vw, 44px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.case-chapter {
  position: relative;
  padding-block: clamp(106px, 13vw, 206px);
}
.case-chapter--reverse {
  background: var(--bg-2);
  box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}
.case-chapter__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 70px);
  align-items: center;
}
.case-chapter__copy { grid-column: 1 / span 4; }
.case-chapter__visual { grid-column: 6 / -1; min-width: 0; }
.case-chapter--reverse .case-chapter__copy { grid-column: 9 / -1; grid-row: 1; }
.case-chapter--reverse .case-chapter__visual { grid-column: 1 / span 7; grid-row: 1; }
.case-chapter__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  margin-bottom: clamp(30px, 4vw, 58px);
  padding: 4px 14px 4px 5px;
  border-radius: 999px;
  color: var(--text-dim);
  background: rgba(237,231,220,0.035);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.case-chapter__eyebrow span {
  display: inline-grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  color: #140b07;
  background: var(--ember);
  font-size: 0.58rem;
  letter-spacing: 0;
}
.case-chapter__copy h2 {
  max-width: 10ch;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.6vw, 6rem);
  font-weight: 650;
  letter-spacing: -0.048em;
  line-height: 0.94;
  text-wrap: balance;
}
.case-chapter__prose {
  max-width: 47ch;
  margin-top: clamp(34px, 4vw, 58px);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: clamp(0.92rem, 1.14vw, 1.08rem);
  line-height: 1.78;
}
.case-chapter__prose > * + * { margin-top: 1.35em; }
.case-project-cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  margin-top: clamp(36px, 4vw, 56px);
  padding: 7px 8px 7px 25px;
  border-radius: 999px;
  color: #140b07;
  background: var(--ember);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  transition: transform 700ms cubic-bezier(0.32, 0.72, 0, 1), background-color 700ms cubic-bezier(0.32, 0.72, 0, 1);
}
.case-project-cta__icon {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: rgba(20,11,7,0.13);
  transition: transform 700ms cubic-bezier(0.32, 0.72, 0, 1), background-color 700ms cubic-bezier(0.32, 0.72, 0, 1);
}
.case-project-cta:hover { transform: translateY(-3px); background: var(--ember-2); }
.case-project-cta:hover .case-project-cta__icon { transform: translate(3px, -2px) scale(1.04); background: rgba(20,11,7,0.2); }
.case-project-cta:active { transform: scale(0.98); }
.case-back-link:focus-visible,
.case-project-cta:focus-visible { outline: 2px solid var(--ember); outline-offset: 5px; }

/* The archive remains deliberately boxed; case stories open up to cinematic width. */
.cases-section,
.post-type-archive-rh_case main {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
}
.cases-section { box-sizing: border-box; }
.cases-section .wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ============================================================
   CASES PAGE — filter
   ============================================================ */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(40px, 5vw, 70px); }
.filter-btn { font-family: var(--font-display); font-size: 0.88rem; font-weight: 500; padding: 10px 20px; border-radius: 100px; border: 1px solid var(--line); color: var(--text-dim); transition: .35s var(--ease); }
.filter-btn:hover { border-color: var(--line-2); color: var(--text); }
.filter-btn.active { background: var(--ember); color: #140b07; border-color: var(--ember); }
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 36px) clamp(20px, 2vw, 30px); }
.case-card { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.case-card.hide { display: none; }
.case-card .work-media { aspect-ratio: 3/2.4; }
.case-card .work-info { margin-top: 18px; }
.case-card h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); padding-top: clamp(60px, 8vw, 110px); padding-bottom: 40px; position: relative; z-index: 2; }
.footer-top { display: grid; grid-template-columns: 1fr 1fr auto; gap: clamp(30px, 5vw, 90px); align-items: start; padding-bottom: clamp(50px, 7vw, 90px); }

.footer-loc h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -0.01em; color: var(--text); margin-bottom: 14px; }
.footer-loc p { color: var(--text-dim); font-size: 0.98rem; line-height: 1.5; }
.footer-loc a { color: var(--text-dim); font-size: 0.98rem; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: color .3s, text-decoration-color .3s; }
.footer-loc a:hover { color: var(--ember); text-decoration-color: var(--ember); }
.footer-weather { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--text-mute); min-height: 20px; }
.footer-weather .w-icon { display: inline-flex; color: var(--text-dim); }
.footer-weather .w-icon svg { display: block; }
.footer-weather .w-temp { font-family: var(--font-mono); font-size: 0.92rem; font-variant-numeric: tabular-nums; }

.footer-badge { display: flex; align-items: center; gap: 14px; color: var(--text-dim); text-decoration: none; transition: color .3s; align-self: start; }
.footer-badge:hover { color: var(--ember); }
.footer-badge .badge-mark { color: var(--ember); flex-shrink: 0; }
.footer-badge span { font-size: 0.92rem; line-height: 1.35; }
.footer-badge strong { color: var(--text); font-weight: 600; }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 30px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.footer-legal { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.footer-legal p, .footer-legal a { font-size: 0.85rem; color: var(--text-mute); transition: color .3s; }
.footer-legal a:hover { color: var(--ember); }
.footer-network { font-size: 0.85rem; color: var(--text-mute); transition: color .3s; }
.footer-network:hover { color: var(--ember); }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; }
.cursor-dot { width: 7px; height: 7px; background: #fff; transform: translate(-50%,-50%); }
.cursor-ring { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.6); transform: translate(-50%,-50%); transition: width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s; }
.cursor-ring.hover { width: 64px; height: 64px; border-color: var(--ember); background: var(--ember-soft); }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* ============================================================
   SCROLL REVEAL (JS-driven, graceful default)
   ============================================================ */
/* Reveal states are gated behind html.js (class added by an inline script in
   the layout): without JS nothing is ever hidden — content stays visible for
   users with JS off and for crawler renderers. */
html.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
html.js [data-reveal].in { opacity: 1; transform: none; }
html.js [data-reveal-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.js [data-reveal-stagger].in > * { opacity: 1; transform: none; }

/* Elementor Editor Exception (Full visibility, no motion hiding when editing) */
body.elementor-editor-active [data-reveal],
body.elementor-editor-active [data-reveal-stagger] > *,
body.elementor-editor-active [data-parallax],
body.elementor-editor-active [data-scrub],
body.elementor-editor-active .rh-reveal,
body.elementor-editor-active .work-item,
body.elementor-editor-active .case-card,
body.elementor-editor-active .process-step,
body.elementor-editor-active .statement-word,
.elementor-editor-active [data-reveal],
.elementor-editor-active [data-reveal-stagger] > *,
.elementor-editor-preview [data-reveal],
.elementor-editor-preview [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
}

/* scroll progress bar */
/* Full-width bar scaled on the compositor (transform) instead of animating
   `width` (layout) on every scroll frame. */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; will-change: transform; background: linear-gradient(90deg, var(--o-dark), var(--ember), var(--o-light)); z-index: 200; }

/* ============================================================
   SPLATTER — tiny mesmerizing reactive circles
   ============================================================ */
.splatter { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.splat {
  position: absolute; border-radius: 50%;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.splat.ring { background: transparent; }
/* a few accented dots glow */
.splat.glow { box-shadow: 0 0 12px 1px var(--ember); }

/* ============================================================
   ORBIT — concentric fine lines
   ============================================================ */
.orbit {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 1;
}

.small-circles {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 1;
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  pointer-events: none;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Mobile Safari has a much smaller compositor-memory budget than desktop.
   Touch devices render orbit geometry at its final size in the motion engine,
   so the desktop-only 3D promotion is unnecessary here. */
@media (hover: none), (pointer: coarse) {
  .orbit-ring {
    backface-visibility: visible;
    transform-style: flat;
  }
}

/* ============================================================
   PINNED SCRUB SECTIONS (vertical word-scrub)
   ============================================================ */
.scrub-section {
  min-height: var(--rh-stable-viewport-height);
  display: flex; align-items: center;
  position: relative; overflow: visible;
  padding-block: clamp(60px, 8vh, 120px);
  z-index: 10;
}
.scrub-inner { position: relative; z-index: 2; width: 100%; will-change: opacity, transform; }
.scrub-inner.center { text-align: center; }
.scrub-inner.center .lead { margin-inline: auto; }
/* Set to the marquee's scale, not the hero's. It is a statement the page makes in
   passing rather than the page's title, and at hero size it competed with the
   real headline instead of reading underneath it. */
.scrub-title { font-size: var(--fs-runner); line-height: 0.96; letter-spacing: -0.03em; }
.scrub-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  line-height: 1.28; letter-spacing: -0.015em;
  max-width: 24ch; margin-top: clamp(34px, 5vw, 64px);
  color: var(--text);
}
.scrub-inner.center .scrub-text { margin-inline: auto; }

/* fullscreen statement (quote / end CTA) */
.scrub-full { min-height: var(--rh-stable-viewport-height); }
.scrub-full .scrub-mega {
  font-size: clamp(3.4rem, 13vw, 14rem);
  line-height: 0.92; letter-spacing: -0.04em;
  max-width: 16ch; margin-inline: auto;
}
.scrub-full .scrub-text { font-size: clamp(1.2rem, 2vw, 1.7rem); color: var(--text-dim); max-width: 40ch; }

/* End CTAs deliberately render as static content. Keep their full visual
   composition, but opt out of all motion-engine hooks and button transitions. */
.cta-static .scrub-inner { will-change: auto; }
.cta-static .btn,
.cta-static .btn .dot { transition: none; }
.cta-static .btn:hover { transform: none; }

/* gradient text fill used on big statements — full theme spread, no hard cut */
.grad-text {
  background: linear-gradient(105deg,
    var(--white) 0%, var(--wo-soft) 18%, var(--o-light) 40%,
    var(--o) 60%, var(--ember) 78%, var(--o-dark) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  background-size: 160% 100%;
}

/* ============================================================
   HORIZONTAL SCROLL
   ============================================================ */
.horizontal-section { position: relative; overflow: hidden; height: var(--rh-stable-viewport-height); }
.h-track { display: flex; align-items: center; height: var(--rh-stable-viewport-height); width: max-content; will-change: transform; position: relative; z-index: 2; padding-inline: var(--gut); gap: clamp(40px, 6vw, 110px); }
.h-panel { flex: 0 0 auto; max-width: 78vw; }
.h-panel.h-intro { width: min(46vw, 620px); }
.h-step { width: min(40vw, 460px); border-left: 1px solid var(--line-2); padding-left: clamp(24px, 3vw, 44px); }
.h-step .st-num { font-family: var(--font-serif); font-style: italic; font-size: clamp(2.4rem, 5vw, 4.2rem); color: var(--ember); display: block; margin-bottom: 18px; }
.h-step h3 { font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -0.03em; line-height: 0.98; }
.h-step p { color: var(--text-dim); font-size: clamp(1rem, 1.4vw, 1.25rem); margin-top: 20px; max-width: 28ch; }
.h-out { width: min(50vw, 640px); display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.h-out .big { font-family: var(--font-serif); font-style: italic; font-size: clamp(4rem, 12vw, 10rem); color: var(--ember); line-height: 0.9; }
.h-progress { position: absolute; left: var(--gut); right: var(--gut); bottom: 48px; height: 2px; background: var(--line); z-index: 3; }
.h-progress > i { position: absolute; left: 0; top: 0; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; will-change: transform; background: var(--ember); }
.h-hint { position: absolute; bottom: 64px; left: var(--gut); z-index: 3; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute); }

@media (max-width: 1180px) {
  .case-chapter__copy { grid-column: 1 / span 5; }
  .case-chapter__visual { grid-column: 6 / -1; }
  .case-chapter--reverse .case-chapter__copy { grid-column: 8 / -1; }
  .case-chapter--reverse .case-chapter__visual { grid-column: 1 / span 6; }
}

@media (max-width: 900px) {
  .case-hero__details { grid-template-columns: 1fr; gap: 48px; }
  .case-hero__summary p { max-width: 38ch; }
  .case-chapter__grid { grid-template-columns: 1fr; gap: clamp(48px, 8vw, 72px); }
  .case-chapter__copy,
  .case-chapter__visual,
  .case-chapter--reverse .case-chapter__copy,
  .case-chapter--reverse .case-chapter__visual {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
  .case-chapter__copy { max-width: 680px; }
  .case-chapter__copy h2 { max-width: 12ch; }
  .case-chapter__prose { max-width: 58ch; }
  .case-media--portrait .case-media__inner { min-height: clamp(520px, 90vw, 760px); }
}

@media (max-width: 700px) {
  .case-study { --case-gutter: 16px; }
  .case-hero { padding-block: clamp(108px, 28vw, 142px) 72px; }
  .case-hero::after { right: -45%; bottom: -2%; width: 130vw; opacity: 0.24; }
  .case-hero__top { gap: 12px; margin-bottom: 64px; }
  .case-back-link { font-size: 0.63rem; letter-spacing: 0.09em; }
  .case-back-link__icon { width: 30px; height: 30px; }
  .case-pill { min-height: 30px; padding-inline: 11px; font-size: 0.57rem; letter-spacing: 0.11em; }
  .case-kicker { margin-bottom: 18px; font-size: 0.62rem; }
  .case-hero__heading h1 { max-width: 11ch; font-size: clamp(3.15rem, 15.2vw, 5.2rem); line-height: 0.89; }
  .case-hero__details { gap: 38px; margin-top: 62px; padding-top: 24px; }
  .case-hero__summary p { font-size: clamp(1.35rem, 6.4vw, 1.85rem); }
  .case-meta { gap: 28px 20px; }
  .case-service-list { gap: 6px; }
  .case-service-list li { min-height: 31px; padding-inline: 11px; font-size: 0.61rem; }
  .case-hero-visual { padding-bottom: 88px; }
  .case-study__media-wrap { width: calc(100% - 16px); }
  .rh-double-bezel.case-media { padding: 5px; border-radius: 24px; }
  .case-media__inner { border-radius: 19px; }
  .case-media--hero .case-media__inner { min-height: clamp(330px, 112vw, 520px); }
  .case-media--landscape .case-media__inner,
  .case-media--landscape-tall .case-media__inner { min-height: clamp(350px, 108vw, 500px); }
  .case-media--portrait .case-media__inner { min-height: clamp(470px, 132vw, 650px); }
  .case-media__caption { right: 20px; bottom: 18px; left: 20px; gap: 12px; font-size: 0.57rem; letter-spacing: 0.11em; }
  .case-chapter { padding-block: 88px; }
  .case-chapter__grid { gap: 46px; }
  .case-chapter__eyebrow { margin-bottom: 30px; }
  .case-chapter__copy h2 { font-size: clamp(2.65rem, 12vw, 4.1rem); line-height: 0.96; }
  .case-chapter__prose { margin-top: 30px; font-size: 0.92rem; line-height: 1.72; }
  .case-project-cta { width: 100%; justify-content: space-between; margin-top: 34px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-badge { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .nav-links, .nav > .btn, .nav > .locale-switch { display: none; }
  .brand .net { display: none; }
  .split, .contact, .network-grid { grid-template-columns: 1fr; }
  .ccs { grid-template-columns: 1fr; gap: 0; }
  .ccs-col { border-top: none; padding-top: 0; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
  .ccs-col:first-child { border-top: 2px solid var(--ember); padding-top: 28px; }
  .cases-grid { grid-template-columns: repeat(2, 1fr); }
  .work-item { grid-column: span 12; }
  .work-item.tall { margin-top: 0; }
  .step { grid-template-columns: 50px 1fr; }
  .step .st-desc { display: none; }
  .service-block { grid-template-columns: 1fr; gap: 16px; }
  .news-row { grid-template-columns: 1fr auto; }
  .news-date { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 600px) {
  :root { --sp: clamp(64px, 16vw, 110px); }
  .bold-nav__bottom {
    gap: clamp(6px, 2vw, 10px);
    padding-inline: clamp(16px, 5vw, 24px);
  }
  .bold-nav__bottom > .bold-nav__word {
    flex: 0 0 auto;
    font-size: clamp(0.62rem, 2.75vw, 0.7rem);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .locale-switch--menu {
    flex: 0 0 auto;
    gap: 6px;
    white-space: nowrap;
  }
  .locale-switch--menu .locale-switch__item {
    font-size: clamp(0.62rem, 2.75vw, 0.7rem);
    letter-spacing: 0.02em;
  }
  .locale-switch--menu .locale-switch__item + .locale-switch__item::before { left: -5px; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .cases-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  /* .hero-top is redistributed in "HERO — TABLET & MOBILE COMPOSITION" below. */
  .footer-top { grid-template-columns: 1fr; }
  .footer-badge { grid-column: auto; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .work-info { flex-direction: column; }
  .work-tags { justify-content: flex-start; max-width: 100%; }
}

/* ============================================================
   HERO — TABLET & MOBILE COMPOSITION
   ------------------------------------------------------------
   The desktop hero is a bottom-anchored statement with the ring
   field centred behind it. Collapsed onto a phone that becomes a
   cramped bottom third under a dead void, with the rings landing
   straight on the lead paragraph at the same visual weight as the
   type.

   Below 1024px the hero is redistributed into three bands —
   ring field / lead copy / statement + action. The ring family is
   pushed up into the void, dimmed into the background, and a soft
   scrim lifts the copy off the geometry. Ring *size* is handled
   in assets/js/rh-orbit-scale.js (the engine writes each ring's
   box dimensions inline, so CSS cannot reach them).
   ============================================================ */
@media (max-width: 1024px) {

  /* --- Ring field: up and off-axis --------------------------
     Moves the dense centre out of the copy band so it reads as a
     horizon rather than a target behind the paragraph. The engine
     owns `transform` per frame but never touches left/top. */
  .hero .orbit-ring {
    top: 33% !important;
    left: 54% !important;

    /* Strokes are dimmed by re-scoping the palette tokens each
       ring border resolves. Inline `opacity` belongs to the engine,
       so the alpha has to travel with the colour instead. */
    --white:      rgba(255, 255, 255, 0.50);
    --wo-soft:    rgba(255, 243, 234, 0.44);
    --wo-light:   rgba(255, 226, 206, 0.44);
    --o-light:    rgba(255, 176, 122, 0.50);
    --o:          rgba(255, 106, 43, 0.58);
    --ember:      rgba(255, 74, 28, 0.62);
    --o-dark:     rgba(194, 57, 15, 0.80);
    --grey-light: rgba(201, 194, 184, 0.38);
  }

  /* The splatter particles share the same palette tokens; pulling them back
     with the rings keeps one coherent depth plane behind the type. */
  .hero > .splat {
    --white:      rgba(255, 255, 255, 0.72);
    --wo-soft:    rgba(255, 243, 234, 0.68);
    --wo-light:   rgba(255, 226, 206, 0.68);
    --o-light:    rgba(255, 176, 122, 0.72);
    --o:          rgba(255, 106, 43, 0.76);
    --ember:      rgba(255, 74, 28, 0.78);
    --o-dark:     rgba(194, 57, 15, 0.86);
    --grey-light: rgba(201, 194, 184, 0.62);
    --grey:       rgba(138, 131, 122, 0.62);
  }

  .hero-glow {
    top: 30%; left: 54%;
    width: 132vw; height: 132vw;
    max-width: none; max-height: none;
  }

  /* --- Legibility scrim ------------------------------------
     `.hero > .wrap` is the z-index:2 stacking context above the
     rings, so its ::before paints over the geometry and under the
     type. Gradient only — no blur filter on scrolling content. */
  .hero > .wrap::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -14% -18% -10%;
    background: radial-gradient(112% 74% at 26% 62%,
      rgba(11, 10, 9, 0.80) 0%,
      rgba(11, 10, 9, 0.55) 40%,
      rgba(11, 10, 9, 0) 76%);
    pointer-events: none;
  }

  .hero-sub { max-width: 44ch; color: rgba(237, 231, 220, 0.76); }
  .hero-home h1 { font-size: clamp(4.6rem, 17.5vw, 9rem); line-height: 0.86; }
  /* Hairline turns statement + action into one closing band, the same rule the
     mobile stack uses so the two breakpoints read as one system. */
  .hero-meta {
    align-items: center;
    margin-top: clamp(38px, 6vw, 56px);
    padding-top: 26px;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 900px) {
  .hero-home { padding-bottom: clamp(52px, 9vw, 88px); }

  /* Scroll cue becomes the eyebrow of the copy band instead of a
     right-hand column squeezing the lead down to a ~26ch measure. */
  .hero-top {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: clamp(15px, 3vw, 22px);
    margin-bottom: clamp(56px, 13vw, 104px);
  }
  .hero-top .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
  }
  .hero-top .hero-tag::after {
    content: "";
    width: clamp(36px, 9vw, 64px);
    height: 1px;
    background: var(--line-2);
  }

  .hero-sub { font-size: clamp(1.06rem, 3.1vw, 1.3rem); line-height: 1.52; }
}

@media (max-width: 600px) {
  /* Field sits higher and further off-axis on the narrowest
     viewports, where the enlarged rings bleed past both edges. */
  .hero .orbit-ring {
    top: 29% !important;
    left: 57% !important;

    --white:      rgba(255, 255, 255, 0.44);
    --wo-soft:    rgba(255, 243, 234, 0.38);
    --wo-light:   rgba(255, 226, 206, 0.38);
    --o-light:    rgba(255, 176, 122, 0.44);
    --o:          rgba(255, 106, 43, 0.52);
    --ember:      rgba(255, 74, 28, 0.56);
    --o-dark:     rgba(194, 57, 15, 0.74);
    --grey-light: rgba(201, 194, 184, 0.34);
  }
  .hero-glow { top: 26%; left: 57%; width: 158vw; height: 158vw; }

  .hero-top { margin-bottom: clamp(54px, 15vw, 100px); }
  .hero-sub { max-width: 25ch; }
  .hero-home h1 { font-size: clamp(3.9rem, 22.5vw, 6rem); letter-spacing: -0.045em; }

  /* Statement and action separate into their own band under a
     hairline, with the CTA carrying the full measure. */
  .hero-meta {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: clamp(34px, 8vw, 52px);
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .hero-meta .btn-lg {
    width: 100%;
    justify-content: space-between;
    padding: 20px 30px;
    font-size: 1rem;
  }
  /* Nested housing for the trailing dot without extra markup. */
  .hero-meta .btn-primary .dot {
    margin-right: 9px;
    box-shadow: 0 0 0 10px rgba(20, 11, 7, 0.13);
    transition: box-shadow .4s var(--ease), transform .4s var(--ease);
  }
  .hero-meta .btn-primary:active .dot {
    box-shadow: 0 0 0 13px rgba(20, 11, 7, 0.18);
  }
  .hero-meta .btn-primary:active { transform: scale(0.985); }
}

/* Short phones (SE-class, and any device in landscape): the three bands still
   have to clear the header and keep the CTA above the fold, so the band gap
   and the statement both step down instead of overflowing. */
@media (max-width: 900px) and (max-height: 720px) {
  .hero-top { margin-bottom: clamp(30px, 7vw, 56px); }
  .hero-home h1 { font-size: clamp(3.2rem, 18vw, 4.9rem); }
  .hero-meta { margin-top: clamp(26px, 5vw, 40px); }
}

/* Very short viewports — SE-class portrait and any phone in landscape. The
   three bands no longer clear the header, so the decorative scroll cue drops
   out (a 568px-tall hero is self-evidently scrollable) and the rhythm tightens
   one more step. Nothing load-bearing is hidden. */
@media (max-width: 900px) and (max-height: 620px) {
  .hero-top .hero-tag { display: none; }
  .hero-top { margin-bottom: clamp(24px, 6vw, 44px); }
  .hero-sub { line-height: 1.45; }
  .hero-home h1 { font-size: clamp(2.9rem, 17vw, 4.4rem); }
  .hero-meta { margin-top: clamp(20px, 4vw, 32px); gap: 16px; padding-top: 18px; }
}

/* Phone landscape: there is width to spare and almost no height, so the lead
   spends its measure horizontally (two lines instead of three) and the bands
   compress. Without this the copy rides up into the header. */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  .hero-home { padding-bottom: 28px; }
  .hero-sub { max-width: 62ch; font-size: 1rem; }
  .hero-top { margin-bottom: clamp(16px, 5vh, 28px); }
  .hero-home h1 { font-size: clamp(2.4rem, 8vw, 3.6rem); }
  .hero-meta { margin-top: 16px; padding-top: 14px; }
}

/* ---------- Fallback when GSAP/pinning is unavailable ---------- */
.no-gsap .horizontal-section { height: auto; overflow: visible; }
.no-gsap .h-track { flex-direction: column; width: 100%; height: auto; align-items: flex-start; gap: clamp(48px, 7vw, 90px); padding-block: clamp(60px, 9vw, 120px); }
.no-gsap .h-panel, .no-gsap .h-panel.h-intro, .no-gsap .h-step, .no-gsap .h-out { width: 100%; max-width: 100%; }
.no-gsap .h-progress, .no-gsap .h-hint { display: none; }
.no-gsap .scrub-section { min-height: 0; }
.no-gsap .word { opacity: 1 !important; filter: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .splatter { display: none; }
  .word { opacity: 1 !important; filter: none !important; transform: none !important; }
}

/* ============================================================
   PAGE TRANSITIONS (Barba + GSAP)
   ============================================================ */
.transition {
  z-index: 1000;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: clip;
}

.transition__panel {
  opacity: 0;
  flex-flow: row;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.transition__col {
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  display: flex;
}

.transition__pixel {
  aspect-ratio: 1;
  background-color: var(--ember);
  width: 100%;
}

/* ============================================================
   404 — NOT FOUND
   The zero of "404" is a live ember orb: pulsing core, hairline
   orbit ring with a satellite dot, drifting splatter particles.
   Pure CSS/SVG 2D animation; reduced-motion fallback below.
   ============================================================ */
.nf { min-height: calc(var(--rh-stable-viewport-height) - 120px); display: flex; align-items: center; }
.nf .wrap { display: flex; flex-direction: column; align-items: flex-start; }

.nf-figure {
  display: flex; align-items: center; gap: clamp(4px, 2vw, 28px);
  margin-block: clamp(28px, 5vw, 56px) clamp(20px, 3vw, 40px);
  user-select: none;
}
.nf-digit {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(6rem, 22vw, 17rem); line-height: 0.84;
  letter-spacing: -0.03em; color: var(--text);
}
.nf-orb { width: clamp(5.4rem, 19vw, 15rem); aspect-ratio: 1; display: block; }
.nf-orb svg { width: 100%; height: 100%; overflow: visible; display: block; }

.nf-core {
  fill: var(--ember);
  transform-origin: 100px 100px;
  animation: nfPulse 3.2s var(--ease) infinite;
  filter: drop-shadow(0 0 26px rgba(255, 74, 28, 0.45));
}
.nf-ring {
  fill: none; stroke: var(--line-2); stroke-width: 1;
  transform-origin: 100px 100px;
  animation: nfRingBreathe 6.4s var(--ease) infinite;
}
.nf-orbit {
  transform-origin: 100px 100px;
  animation: nfOrbit 9s linear infinite;
}
.nf-sat { fill: var(--ember); }
.nf-p { fill: var(--ember); opacity: 0.5; mix-blend-mode: screen; }
.nf-p1 { animation: nfDrift1 7s var(--ease) infinite alternate; }
.nf-p2 { animation: nfDrift2 9s var(--ease) infinite alternate; }
.nf-p3 { animation: nfDrift3 5.5s var(--ease) infinite alternate; }

@keyframes nfPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes nfRingBreathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.55; } }
@keyframes nfOrbit { to { transform: rotate(360deg); } }
@keyframes nfDrift1 { to { transform: translate(10px, -14px); opacity: 0.2; } }
@keyframes nfDrift2 { to { transform: translate(-14px, -8px); opacity: 0.25; } }
@keyframes nfDrift3 { to { transform: translate(8px, 12px); opacity: 0.15; } }

.nf-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -0.01em; }
.nf-lead { margin-top: clamp(14px, 2vw, 22px); }
.nf-actions { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); margin-top: clamp(28px, 4vw, 48px); flex-wrap: wrap; }

@media (max-width: 600px) {
  .nf-figure { gap: 2px; }
}

/* Reduced motion: the orb settles into its complete still state. */
@media (prefers-reduced-motion: reduce) {
  .nf-core, .nf-ring, .nf-orbit, .nf-p1, .nf-p2, .nf-p3 { animation: none !important; }
}

/* ---------- Legal pages (Impressum / Datenschutz) ---------- */
/* Deliberately static prose — no reveal states, readable without JS. */
.legal-prose { max-width: 72ch; }
.legal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: clamp(20px, 3vw, 34px);
}
.legal-intro { margin-bottom: clamp(28px, 4vw, 44px); }
.legal-block { margin-top: clamp(26px, 3.5vw, 40px); }
.legal-block h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  margin-bottom: 12px;
  color: var(--text);
}
.legal-block p {
  color: var(--text-dim);
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.legal-block p + p { margin-top: 12px; }

/* ---------- Contact form: consent, errors, status, honeypot ---------- */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
.field-error {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--ember-2);
}
.form-status { font-size: 1rem; line-height: 1.6; }
.form-status.is-success { color: var(--text); }
.form-status.is-error { color: var(--ember-2); }
.form-consent label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.55;
  text-transform: none;
  letter-spacing: 0;
}
.form-consent input[type='checkbox'] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--ember);
}
.form-consent a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.form-consent a:hover { color: var(--ember-2); }

/* ---------- Cookie consent banner ---------- */
/* Motion: one strong ease-out entrance (@starting-style), an interruptible
   grid-rows expand for the customize view (no max-height jank), press
   feedback on every actionable element. transform/opacity only. */
.cookie-consent {
  --cc-ease: cubic-bezier(0.23, 1, 0.32, 1);
  position: fixed;
  left: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 300;
  width: min(460px, calc(100vw - 2 * clamp(16px, 3vw, 28px)));
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: clamp(18px, 2.5vw, 26px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 240ms var(--cc-ease), transform 240ms var(--cc-ease);
}
@starting-style {
  .cookie-consent {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}
.cookie-consent h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.cookie-consent .cc-intro {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.55;
}
.cookie-consent .cc-intro a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; transition: color 200ms ease; }
.cookie-consent .cc-intro a:hover { color: var(--ember-2); }

/* Customize view — expands via grid-template-rows (interruptible, no
   max-height guessing). Content fades slightly after the rows open. */
.cc-settings {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms var(--cc-ease);
}
.cc-settings.is-open { grid-template-rows: 1fr; }
.cc-settings-inner { overflow: hidden; min-height: 0; }
.cc-scroll {
  max-height: min(46vh, 380px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  margin-top: 16px;
  padding-right: 6px;
  opacity: 0;
  transition: opacity 200ms ease 60ms;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.cc-settings.is-open .cc-scroll { opacity: 1; }
.cc-scroll::-webkit-scrollbar { width: 6px; height: 0; display: block; }
.cc-scroll::-webkit-scrollbar-track { background: transparent; }
.cc-scroll::-webkit-scrollbar-corner { background: transparent; }
.cc-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 100px; }

.cc-category { border: 0; padding: 0; margin: 0 0 4px; }
.cc-category legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 14px 0 4px;
}
.cc-cat-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
}
.cc-cat-desc { font-size: 0.78rem; color: var(--text-mute); }

.cc-service {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.cc-category:last-child .cc-service:last-child { border-bottom: 0; }
.cc-service-text { min-width: 0; }
.cc-service-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.cc-service-provider { font-size: 0.72rem; font-weight: 400; color: var(--text-mute); }
.cc-service-purpose { font-size: 0.78rem; color: var(--text-dim); line-height: 1.5; margin-top: 3px; }

/* Switch — native checkbox drives state/focus; track+thumb are visual.
   44px hit area via padding while the visible track stays compact. */
.cc-switch {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 6px 0 6px 8px;
  min-height: 44px;
  cursor: pointer;
}
.cc-switch.is-locked { cursor: default; }
.cc-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: inherit;
}
.cc-track {
  display: block;
  width: 40px;
  height: 22px;
  border-radius: 100px;
  background: var(--grey-dark);
  border: 1px solid var(--line-2);
  transition: background 180ms ease, border-color 180ms ease;
}
.cc-thumb {
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px;
  border-radius: 50%;
  background: var(--grey-light);
  transform: translateX(0);
  transition: transform 160ms var(--cc-ease), background 160ms ease;
}
.cc-switch input:checked + .cc-track { background: var(--ember); border-color: var(--ember); }
.cc-switch input:checked + .cc-track .cc-thumb { transform: translateX(18px); background: #140b07; }
.cc-switch input:disabled + .cc-track { opacity: 0.55; }
.cc-switch input:focus-visible + .cc-track { outline: 2px solid var(--ember-2); outline-offset: 2px; }
.cc-switch:active input:not(:disabled) + .cc-track .cc-thumb { transform: translateX(2px) scaleX(1.15); }
.cc-switch:active input:checked:not(:disabled) + .cc-track .cc-thumb { transform: translateX(15px) scaleX(1.15); }
.cc-locked-note { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }

.cc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.cc-actions .btn { font-size: 0.85rem; transition: transform 140ms var(--cc-ease), background 0.4s var(--ease), color 0.4s var(--ease); }
.cc-actions .btn:active { transform: scale(0.97); }
.cc-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 6px;
  font-size: 0.85rem;
  color: var(--text-dim);
  transition: color 200ms ease, transform 140ms var(--cc-ease);
}
.cc-link-btn:hover { color: var(--text); }
.cc-link-btn:active { transform: scale(0.97); }
.cc-link-btn svg { transition: transform 200ms var(--cc-ease); }
.cc-link-btn[aria-expanded='true'] svg { transform: rotate(180deg); }
.cookie-consent button:focus-visible,
.cookie-consent a:focus-visible { outline: 2px solid var(--ember-2); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cookie-consent { transition: opacity 200ms ease; }
  @starting-style {
    .cookie-consent { transform: none; }
  }
  .cc-settings { transition: none; }
  .cc-scroll { transition: opacity 150ms ease; }
  .cc-thumb, .cc-link-btn svg, .cc-actions .btn, .cc-link-btn { transition: none; }
}

/* Footer trigger — matches the .footer-legal link treatment */
.cookie-settings-link {
  font-size: 0.85rem;
  color: var(--text-mute);
  transition: color .3s;
  padding: 0;
}
.cookie-settings-link:hover { color: var(--ember); }

.cookie-consent[hidden],
.cc-actions[hidden] {
  display: none !important;
}

/* WordPress runtime adapters. The declarations above remain the exact
   reference design system; these rules only remove host wrappers Elementor
   inserts around the reference DOM and provide Next's two generated fonts. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/InstrumentSerif-Regular-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/InstrumentSerif-Italic-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-inter: 'Inter';
  --font-instrument-serif: 'Instrument Serif';
}

.site-main > .elementor,
.site-main > .elementor > .elementor-element,
.site-main .elementor-widget-rh_reference_block,
.site-main .elementor-widget-rh_reference_block > .elementor-widget-container {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ---------- One gutter, shared by the header and the content ----------
   The header insets its content by --gut. Elementor's wrappers add horizontal
   padding of their own on top of that — it comes from Site Settings > Layout and
   lives in the database, not in this file — so page content sat further in than
   the header and the two edges did not line up.

   Every rh_ widget renders its own `.wrap`, and `.wrap` is where --gut belongs,
   so the Elementor wrappers around it must contribute nothing. Both the classic
   section/column stack and the flexbox container (.e-con) are covered, since a
   site can hold pages built either way. */
.site-main .elementor-section,
.site-main .elementor-container,
.site-main .elementor-column,
.site-main .elementor-widget-wrap,
.site-main .e-con,
.site-main .e-con-inner,
.site-main [class*="elementor-widget-rh"] > .elementor-widget-container {
  padding-inline: 0;
}

/* …but a section that brings no `.wrap` of its own still needs the gutter, or its
   content would end up flush against the viewport edge. It gets --gut directly,
   so both routes land on exactly the same inset as the header. */
.site-main .elementor-section:not(:has(.wrap)) > .elementor-container,
.site-main .e-con:not(:has(.wrap)) > .e-con-inner {
  padding-inline: var(--gut);
}

.rh-chrome-template-note {
  padding: 24px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}