/* ==========================================================================
   annalena rank — static rebuild
   ========================================================================== */

/* ---------- self-hosted fonts ----------
   Place the matching font files in /assets/fonts/ (see README-fonts.txt in
   that folder for exactly what to download). Until the files are added,
   browsers just fall back to the next font in the --sans/--mono stacks —
   nothing breaks, it just won't be Manrope/JetBrains Mono yet. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0a0a0a;
  --bg-soft: #121212;
  --fg: #f6f5f1;
  --muted: #9c9b96;
  --accent: #ff5a1f;
  --accent-dim: #c9430f;
  --border: rgba(246, 245, 241, 0.14);
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --container: 1360px;
  --gap: clamp(1.25rem, 7vw, 8.5rem);

  /* 8pt spacing scale */
  --space-1: 0.5rem;   /* 8px  */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 6rem;     /* 96px */
  --space-8: 8rem;     /* 128px */

  /* single source of truth for the header's real rendered height, so the
     hero-viewport "fits one screen" math always matches reality exactly
     instead of relying on separately-guessed, drifting pixel constants */
  --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* custom text selection: inverted instead of the default browser blue —
   white text turns orange-on-white, orange text turns white-on-orange */
::selection { background: #ffffff; color: var(--accent); }
::-moz-selection { background: #ffffff; color: var(--accent); }

.swap::selection,
.section-label::selection,
.call-link::selection,
.widget-btn::selection,
.section-intro a::selection,
.contact-links a::selection,
.legal a::selection,
.mq-dot::selection {
  background: var(--accent);
  color: #ffffff;
}
.swap::-moz-selection,
.section-label::-moz-selection,
.call-link::-moz-selection,
.widget-btn::-moz-selection,
.section-intro a::-moz-selection,
.contact-links a::-moz-selection,
.legal a::-moz-selection,
.mq-dot::-moz-selection {
  background: var(--accent);
  color: #ffffff;
}

/* orange-on-dark service cards: selection needs its own contrast pair */
.service-card::selection { background: #140700; color: #ffffff; }
.service-card::-moz-selection { background: #140700; color: #ffffff; }

/* design rule: never orphan a single word on its own line */
h1, h2, h3, .cta h2, .contact h2 { text-wrap: balance; }
p, .section-intro, .legal p, .service-card p, .cta p, .widget-row .process-note {
  text-wrap: pretty;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gap);
}

.mono { font-family: var(--mono); letter-spacing: 0.02em; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gap);
  height: var(--header-h);
  background: rgba(10, 10, 10, 0.85);
  border-bottom: 1px solid var(--border);
}
/* backdrop-filter only on desktop: on an element that also creates the
   containing block for its fixed-position children, it would otherwise
   confine the mobile fullscreen nav overlay to the header's own small box
   instead of letting it cover the whole viewport */
@media (min-width: 861px) {
  .site-header { backdrop-filter: blur(10px); }
}

/* thin bar on the header's bottom edge that fills as you scroll down the
   page — replaces the plain divider line with a scroll-progress indicator */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0%;
  background: var(--accent);
  z-index: 1;
}

.logo {
  font-size: 1.15rem;
  font-weight: 500;
}
.logo strong { font-weight: 700; }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--mono);
  font-size: 0.85rem;
}

.lang-toggle { display: flex; gap: var(--space-1); }
.lang-toggle a { color: var(--muted); }
.lang-toggle a.active { color: var(--fg); }
.lang-toggle a.lang-soon { opacity: 0.5; cursor: default; }

/* keep the section heading visible below the sticky header when a nav
   link (desktop or mobile menu) scrolls to it */
#stuff-we-do, #studio, #work, #contact, #was-wir-tun, #kontakt {
  scroll-margin-top: 100px;
}

.main-nav a.nav-link { color: var(--fg); opacity: 0.85; transition: opacity .2s; }
.main-nav a.nav-link:hover { opacity: 1; }
.main-nav a.call-link { color: var(--accent); }
.nav-socials { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  z-index: 101;
}
.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--fg);
  transition: transform .28s ease, opacity .2s ease;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  padding: var(--space-3) var(--gap) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.hero-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
/* a plain text bullet, not a sized box — a glyph can't be stretched into
   an oval the way a width/height div can, so this is immune to any
   flex/box-sizing issue */
.status-dot {
  display: inline;
  font-size: 1.4em;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 5px var(--accent);
  animation: rec-blink 1.4s ease-in-out infinite;
}
@keyframes rec-blink {
  0%, 100% { opacity: 1; text-shadow: 0 0 5px var(--accent); }
  50% { opacity: 0.25; text-shadow: 0 0 1px var(--accent); }
}

.hero h1 {
  font-size: clamp(2.2rem, 6.5vw, 5.2rem);
  line-height: 1.02;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
/* a manual line break that only applies on desktop — mobile ignores it
   and wraps naturally. Reused anywhere a fixed break is wanted. */
.desktop-break { display: none; }
@media (min-width: 861px) {
  .desktop-break { display: block; }
}
/* the opposite: a manual break that only applies on mobile */
.mobile-break { display: none; }
@media (max-width: 860px) {
  .mobile-break { display: block; }
}
.hero h1 .swap {
  color: var(--accent);
  display: inline-block;
  will-change: opacity, transform;
  transition: opacity .6s cubic-bezier(0.65, 0, 0.35, 1),
              transform .6s cubic-bezier(0.65, 0, 0.35, 1);
}
.hero h1 .swap.swap-out { opacity: 0; transform: translateY(-0.22em); }
.hero h1 .swap.swap-in { opacity: 0; transform: translateY(0.22em); }

/* desktop: top row, headline AND the marquee banner are all guaranteed to
   fit within one screen — the marquee is the last thing pinned to the
   bottom of the fold. The hero's own border-bottom line (and everything
   after it) sits outside this box and only appears once you scroll. */
@media (min-width: 861px) {
  .hero {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    min-height: calc(100vh - var(--header-h));
    display: flex;
    flex-direction: column;
  }
  .hero-viewport {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .hero-viewport h1 { margin: auto 0; }
}

/* ---------- marquee ---------- */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) 0;
  margin-top: var(--space-5);
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  animation: marquee 42s linear infinite;
}
.marquee-track span {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--muted);
}
.marquee-track .mq-dot { display: inline-block; color: var(--accent); padding: 0 var(--space-5); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- section heading pattern ---------- */
.section { padding: var(--space-8) var(--gap); border-bottom: 1px solid var(--border); }
.section-label {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: var(--space-3);
  display: block;
}
.section-intro {
  font-size: clamp(1.075rem, 2.45vw, 1.675rem);
  font-weight: 400;
  max-width: 60rem;
  color: var(--fg);
  line-height: 1.45;
}
.section-intro a { color: var(--accent); border-bottom: 1px solid var(--accent); }

/* the CTA banner right below already has its own top border line, so this
   section doesn't need its own trailing divider */
#stuff-we-do, #was-wir-tun { border-bottom: none; }
@media (min-width: 861px) {
  /* on desktop, a slightly shorter gap before the CTA banner — not a hard
     cut. Left at the default on mobile so section spacing stays consistent */
  #stuff-we-do, #was-wir-tun { padding-bottom: var(--space-7); }
}

/* ---------- services: cards collapse into a header-strip stack ----------
   Each card is position:sticky. The gap between one card's "top" and the
   next card's "top" equals the header height, so once the next (higher
   z-index) card catches up, only the previous card's header stays peeking
   out — by the end of the section you see all five headlines stacked. */
.services {
  max-width: var(--container);
  margin: var(--space-7) auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  --card-header-h: 88px;
  --card-stack-base: 88px;
}
.service-card {
  background: var(--accent);
  color: #140700;
  border-radius: 18px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  position: sticky;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.service-card.in-view { opacity: 1; transform: translateY(0); }
.service-card + .service-card { margin-top: var(--space-3); }

.card-header {
  padding: var(--space-3) clamp(1.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid rgba(20, 7, 0, 0.15);
}
.card-header-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: var(--space-1);
}
.card-header-top .tag { opacity: 0.75; }
.card-header-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.card-header-main h3 { margin: 0; }
.card-arrow {
  display: inline-block;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: -8px;
  font-size: 1.7rem;
  line-height: 1;
  color: #140700;
  transition: color .2s ease, transform .2s ease;
}
.card-arrow:hover {
  color: var(--fg);
  transform: translate(3px, -3px);
}

/* stack order: each card sticks a little lower than the previous one's
   header height, and steps up a subtle brightness level — starts at the
   brand color, ends where the old "card 03" shade was */
.service-card:nth-child(1) { top: var(--card-stack-base); z-index: 1; background: #ff5a1f; }
.service-card:nth-child(2) { top: calc(var(--card-stack-base) + var(--card-header-h));     z-index: 2; background: #ff5f25; }
.service-card:nth-child(3) { top: calc(var(--card-stack-base) + var(--card-header-h) * 2); z-index: 3; background: #ff632c; }
.service-card:nth-child(4) { top: calc(var(--card-stack-base) + var(--card-header-h) * 3); z-index: 4; background: #ff6833; }
.service-card:nth-child(5) { top: calc(var(--card-stack-base) + var(--card-header-h) * 4); z-index: 5; background: #ff6d39; }

.service-card h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 0; font-weight: 700; line-height: 1.15; }
.card-body { position: relative; padding: var(--space-5) clamp(1.5rem, 4vw, 3.5rem) var(--space-6); }
.card-body p { position: relative; z-index: 1; margin: 0 0 var(--space-2); font-size: 0.98rem; line-height: 1.55; max-width: 58ch; }
.card-body p:last-child { margin-bottom: 0; }
.card-body strong { font-weight: 800; }

/* large ghost number as a background design element, filling the empty
   space to the right of the text on wide desktop cards — cropped to just
   its top half, like it's sinking below the bottom edge of the card */
@media (min-width: 861px) {
  .card-header { position: relative; z-index: 1; }

  .service-card::after {
    content: attr(data-num);
    position: absolute;
    right: clamp(1rem, 3vw, 2.5rem);
    bottom: -0.3em;
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(7rem, 13vw, 13rem);
    line-height: 1;
    color: rgba(20, 7, 0, 0.1);
    pointer-events: none;
    z-index: 0;
    /* no clip-path: the card's own overflow:hidden crops it flush at the
       bottom edge, so it looks like it's emerging from underneath */
  }
}

@media (min-width: 861px) {
  .card-body { padding-right: var(--space-6); min-height: 26vh; }
}

/* spacer so the last card can fully release from its sticky position,
   leaving the full stack of headers visible as an overview */
.services::after { content: ""; display: block; height: var(--space-8); }

@media (max-width: 640px) {
  .services { --card-header-h: 72px; --card-stack-base: 148px; }
  .card-header { padding: var(--space-2) clamp(1.25rem, 6vw, 2rem); }
  .card-header-main h3 { font-size: 1.15rem; }
  .card-arrow { font-size: 1.3rem; }
  .card-body { padding: var(--space-4) clamp(1.25rem, 6vw, 2rem) var(--space-5); }
}

/* ---------- studio-info widget ---------- */
.widget-row {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: var(--space-6);
  align-items: start;
}
.widget-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.widget-label {
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.widget-clock {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1;
}
.widget-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--space-2) var(--space-4);
  font-size: 0.85rem;
  color: var(--fg);
  transition: border-color .2s ease, color .2s ease;
}
.widget-btn:hover { border-color: var(--accent); color: var(--accent); }
.widget-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.7rem;
}
.widget-row .process-note {
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 46rem;
  color: var(--muted);
  margin: var(--space-1) 0 0;
}

@media (max-width: 860px) {
  .widget-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .widget-clock { font-size: clamp(1.8rem, 8vw, 2.6rem); }
}

/* ---------- gallery: endless auto-scrolling carousel ---------- */
.gallery-wrap {
  position: relative;
  margin-top: var(--space-7);
  overflow: hidden;
}
.gallery-speed-zone {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 18%;
  z-index: 2;
  cursor: pointer;
}
.gallery-track {
  display: flex;
  width: max-content;
  gap: var(--space-1);
  animation: gallery-scroll 46s linear infinite;
}
/* speed is now hand-driven in JS (main.js) so it can ease smoothly between
   normal / fast / stopped instead of snapping; this animation remains only
   as the baseline/fallback before JS takes over */
.gallery-track figure {
  flex: 0 0 auto;
  width: min(34vw, 180px);
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 4/5;
  background: var(--bg-soft);
}
.gallery-track figure img,
.gallery-track figure video {
  width: 100%; height: 100%; object-fit: cover;
}
@keyframes gallery-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-track { animation: none; }
}

/* ---------- studio section ---------- */
.studio-meta {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}
.studio-meta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-size: 0.8rem;
  line-height: 1;
  border: 1px solid var(--border);
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  /* the "available" pill's status-dot renders at 1.4em, taller than the
     plain-text pills next to it — fix every pill to the same height so
     the icon doesn't make one badge visibly bigger than the rest */
  min-height: 2.2rem;
  box-sizing: border-box;
}

/* ---------- CTA ---------- */
.cta {
  text-align: left;
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.cta > .section-label,
.cta > p,
.cta > .btn { margin-left: var(--gap); margin-right: var(--gap); }
.cta h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 500; margin: 0 0 var(--space-3); }
.cta .section-label a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.cta .section-label a:hover { color: var(--fg); }

/* large, ever-running headline banner */
.cta-marquee-wrap {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) 0;
  margin: var(--space-4) 0 var(--space-6);
}
.cta-speed-zone {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 18%;
  z-index: 2;
  cursor: pointer;
}
.cta-marquee-track {
  display: inline-flex;
  /* speed is hand-driven in JS so it can ease smoothly; this animation is
     only the baseline before JS takes over (or if JS/reduced-motion skip it) */
  animation: marquee 62s linear infinite;
}
.cta-marquee-track span {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 1;
  color: var(--fg);
}
.cta-marquee-track .mq-dot {
  display: inline-block;
  color: var(--fg);
  padding: 0 var(--space-5);
}

.cta p { max-width: 40rem; color: var(--muted); font-size: 1.05rem; margin-top: 0; margin-bottom: var(--space-5); }
.cta p strong { color: var(--fg); }
.btn {
  display: inline-block;
  background: var(--accent);
  color: #140700;
  font-family: var(--mono);
  font-size: 0.9rem;
  padding: var(--space-3) var(--space-4);
  border-radius: 999px;
  transition: transform .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); background: #ff7238; }

/* ---------- contact ---------- */
.contact h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 500; margin: 0 0 var(--space-6); }
/* English copy is longer per line than the German rewrite, so it keeps
   the narrower measure it originally had; German runs full-width. */
:lang(en) .contact h2 { max-width: 40rem; }
.contact-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.contact-links a {
  font-family: var(--mono);
  font-size: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-1);
  transition: border-color .2s ease, color .2s ease;
}
.contact-links a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- footer: clean single row (desktop), centered stack (mobile) ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--bg);
  padding: var(--space-6) var(--gap) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}
.footer-links { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.footer-copyright { display: inline-flex; align-items: center; gap: var(--space-1); }

/* the footer inherits font-family: mono, but the logo should stay in the
   same Manrope typeface used everywhere else, like in the header */
.site-footer .logo { font-family: var(--sans); }

@media (max-width: 640px) {
  .site-footer {
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-7) var(--gap) var(--space-5);
  }
  .site-footer .logo { font-size: 1.4rem; }
  .footer-links { flex-direction: column; align-items: center; gap: var(--space-3); }
}

.featured-label-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.featured-label-row .section-label { margin-bottom: 0; }
.featured-sep { color: var(--muted); opacity: 0.5; font-size: 0.8rem; }
.widget-social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.widget-social a {
  display: inline-flex;
  color: var(--muted);
  transition: color .2s ease;
}
.widget-social a:hover { color: var(--accent); }
.widget-social a.placeholder { opacity: 0.4; }
.footer-links a:hover { color: var(--fg); }

/* ---------- legal pages ---------- */
.legal {
  padding: var(--space-8) var(--gap) var(--space-7);
  max-width: 52rem;
  margin: 0 auto;
}
.legal h1 {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-5);
}
.legal h2 { font-size: 1.2rem; margin: var(--space-5) 0 var(--space-2); font-weight: 700; }
.legal p { color: #d8d7d2; line-height: 1.7; margin: 0 0 var(--space-3); }
.legal ul { color: #d8d7d2; line-height: 1.7; padding-left: 1.2rem; }
.legal a { color: var(--accent); text-decoration: underline; }

body.no-scroll { overflow: hidden; }

/* faint vertical grid lines, fixed to the viewport. Uses the same --gap
   used everywhere else for horizontal padding, so the first and last
   line line up exactly with where the page's own content starts/ends,
   with the rest evenly spaced between via flexbox space-between */
.bg-grid {
  position: fixed;
  inset: 0;
  padding: 0 var(--gap);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 0;
  /* fade in from the top of the viewport instead of a hard edge */
  mask-image: linear-gradient(to bottom, transparent, #000 140px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 140px);
}
.bg-grid span {
  width: 1px;
  height: 100%;
  background: rgba(246, 245, 241, 0.06);
}

/* toast shown when a phone number is copied instead of opening tel: */
.copy-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-4);
  transform: translate(-50%, 12px);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 200;
}
.copy-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- fade-in generic ---------- */
.fade-up { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.in-view { opacity: 1; transform: translateY(0); }

/* ---------- responsive nav ---------- */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    inset: 0 0 0 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 99;
    background: var(--accent);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-4) var(--gap);
    gap: var(--space-4);
    font-size: 1.3rem;
    cursor: pointer;
    /* hidden by default: only appears once .open is toggled by the hamburger click */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  }
  .main-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
  }
  .main-nav a { color: #140700; cursor: pointer; }
  .main-nav .lang-toggle { font-size: 0.9rem; }
  .main-nav .lang-toggle a { color: rgba(20, 7, 0, 0.55); }
  .main-nav .lang-toggle a.active { color: #140700; }
  .main-nav .call-link { text-decoration: underline; }
  .nav-toggle.active { border-color: rgba(20, 7, 0, 0.4); }
  .nav-toggle.active span { background: #140700; }

  /* pinned to the bottom of the fullscreen mobile menu */
  .nav-socials {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: absolute;
    left: var(--gap);
    right: var(--gap);
    bottom: var(--space-4);
  }
  .nav-socials-label { font-size: 0.9rem; color: #140700; opacity: 0.8; }
  .nav-socials-tagline { font-size: 0.8rem; color: rgba(20, 7, 0, 0.55); }
  .nav-socials-icons { display: flex; gap: var(--space-3); }
  .nav-socials-icons a { display: inline-flex; color: #140700; opacity: 0.8; }
  .nav-legal-links { display: flex; gap: var(--space-3); font-size: 0.8rem; }
  .nav-legal-links a { color: rgba(20, 7, 0, 0.7); text-decoration: underline; }

  /* mobile hero fits one screen too: headline + marquee visible without
     scrolling, everything else appears once you scroll — same idea as
     the desktop treatment further up, but here the marquee stays included */
  .hero {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100dvh - var(--header-h));
    display: flex;
    flex-direction: column;
  }
  /* headline sits vertically centered in the space above the marquee,
     instead of being squeezed up against the top row */
  .hero-viewport {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .hero-viewport h1 { margin: auto 0; }
}

@media (max-width: 640px) {
  .hero { padding-top: var(--space-4); }
  /* generous, consistent rhythm between all sections on mobile */
  .section { padding: var(--space-7) var(--gap); }
  /* .cta keeps 0 horizontal padding on purpose (see base rule) — its
     content is inset via margin instead, so it lines up with everything
     else; adding padding here too would double the left inset */
  .cta { padding: var(--space-7) 0; }
}