/* ============================================================================
   PIT-Lab — "The Living Ledger" design system
   Buildless, static. Palette preserved: gold #d4af37 · saddle-brown #8b4513 ·
   cream #f5f5dc · ink #0d0d0d. Light + dark. Premium motion. a11y-first.
   Cascade layers keep specificity sane: tokens → reset → base → layout →
   components → utilities. (Author: experience overhaul, feat/experience-2026)
   ========================================================================== */

@layer tokens, reset, base, layout, components, utilities;

/* ----------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* — Brand anchors (preserved verbatim) — */
    --gold: #d4af37;
    --brown: #8b4513;
    --cream: #f5f5dc;
    --ink: #0d0d0d;

    /* — Gold ramp (jewel accent; large text / accents only, never body) — */
    --gold-100: #f7eecb;
    --gold-200: #ecd99a;
    --gold-300: #e0c668;
    --gold-400: var(--gold);
    --gold-500: #b8932a;
    --gold-600: #97781f;
    --gold-glow: rgba(212, 175, 55, 0.45);

    /* — Brown / espresso ramp (primary, trust) — */
    --brown-300: #b07a45;
    --brown-400: #a0612e;
    --brown-500: var(--brown);
    --brown-600: #6f370f;
    --brown-700: #4e2708;

    /* — Warm neutral "paper" ramp (light) — */
    --paper-0: #fbf9f1;   /* lightest page wash */
    --paper-1: #f7f3e8;
    --paper-2: var(--cream);
    --paper-3: #e9e2cd;
    --paper-4: #d8cfb4;
    --taupe: #8c8267;
    --espresso: #2c2417;  /* warm near-black text */

    /* — Semantic (light is default) — */
    --bg: var(--paper-0);
    --bg-2: var(--paper-1);
    --surface: #ffffff;
    --surface-2: var(--paper-1);
    --text: var(--espresso);
    --text-soft: #5c5340;
    --text-faint: #8a7f64;
    --heading: var(--brown-600);
    --accent: var(--gold-500);          /* gold that passes ~3:1 on cream for large */
    --accent-bright: var(--gold);
    --accent-text: #856515;             /* deep bronze-gold for SMALL accent text — measured ≥4.9:1 on every light surface (WCAG AA). gold-600 (#97781f) only reached 3.97:1 on --bg, so it's darkened here. */
    /* Flowing metallic fill for masked icons. Light: bronze→gold, readable on cream. */
    --metal-grad: linear-gradient(115deg, var(--brown-600) 0%, var(--gold-600) 30%, var(--gold-300) 50%, var(--gold-600) 70%, var(--brown-600) 100%);
    --primary: var(--brown-500);
    --on-primary: #fff7e6;
    --border: rgba(140, 110, 45, 0.18);
    --border-strong: rgba(140, 110, 45, 0.32);
    --hairline: rgba(44, 36, 23, 0.10);

    /* — Warm, soft shadows (shadows over borders) — */
    --shadow-1: 0 1px 2px rgba(60, 45, 20, 0.05), 0 2px 8px rgba(60, 45, 20, 0.05);
    --shadow-2: 0 6px 18px rgba(60, 45, 20, 0.08), 0 2px 6px rgba(60, 45, 20, 0.06);
    --shadow-3: 0 18px 50px rgba(60, 45, 20, 0.13), 0 6px 16px rgba(60, 45, 20, 0.08);
    --shadow-gold: 0 10px 40px rgba(212, 175, 55, 0.22);

    /* — Hero / WebGL fallback gradient (the static "poster") — */
    --hero-grad:
      radial-gradient(120% 90% at 18% 12%, #fbf3d6 0%, rgba(251,243,214,0) 55%),
      radial-gradient(120% 120% at 82% 18%, rgba(212,175,55,0.55) 0%, rgba(212,175,55,0) 50%),
      radial-gradient(140% 130% at 75% 95%, rgba(139,69,19,0.55) 0%, rgba(139,69,19,0) 55%),
      linear-gradient(150deg, #f7edcf 0%, #e9cf86 32%, #c79b3f 60%, #8b4513 100%);

    /* — Typography — */
    --font-display: "Playfair Display", "Georgia", "Times New Roman", serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

    /* Fluid type scale (Major-third-ish, clamps 360→1440px) */
    --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem);
    --step-0:  clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
    --step-1:  clamp(1.2rem, 1.10rem + 0.45vw, 1.5rem);
    --step-2:  clamp(1.45rem, 1.27rem + 0.8vw, 2rem);
    --step-3:  clamp(1.75rem, 1.45rem + 1.3vw, 2.7rem);
    --step-4:  clamp(2.1rem, 1.6rem + 2.2vw, 3.6rem);
    --step-5:  clamp(2.5rem, 1.7rem + 3.6vw, 4.9rem);
    --step-6:  clamp(3rem, 1.7rem + 5.6vw, 6.6rem);
    --step-7:  clamp(3.4rem, 1.4rem + 8.6vw, 8.5rem);

    --leading-tight: 1.04;
    --leading-snug: 1.22;
    --leading-body: 1.66;
    --tracking-tight: -0.02em;
    --tracking-wide: 0.18em;

    /* — Spacing scale (8pt rhythm, fluid section gaps) — */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.25rem;
    --space-xl: 3.5rem;
    --space-2xl: clamp(4rem, 3rem + 5vw, 7rem);
    --space-3xl: clamp(6rem, 4rem + 9vw, 11rem);
    --container: 1240px;
    --container-narrow: 760px;
    --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);

    /* — Radii — */
    --r-s: 8px;
    --r-m: 14px;
    --r-l: 22px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* — Motion (Premium personality; from motion-design skill) — */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-1: 180ms;   /* quick UI feedback */
    --dur-2: 420ms;   /* standard */
    --dur-3: 640ms;   /* slow / entrances */

    /* — Layering — */
    --z-hero-canvas: 0;
    --z-content: 1;
    --z-nav: 50;
    --z-progress: 60;
    --z-overlay: 90;
    --z-preloader: 100;

    color-scheme: light dark;
    accent-color: var(--accent);
  }

  /* — Dark theme — */
  [data-theme="dark"] {
    --paper-0: #0d0d0d;
    --paper-1: #151310;
    --paper-2: #1a1712;
    --paper-3: #221d16;
    --espresso: #ece3d2;

    --bg: #0c0b0a;
    --bg-2: #131110;
    --surface: #16130f;
    --surface-2: #1c1813;
    --text: #ece3d2;
    --text-soft: #c3b8a1;
    --text-faint: #8f846d;
    --heading: #f0e4cb;
    --accent: #e9c45f;
    --accent-bright: #f0d060;
    --accent-text: #e9c45f;             /* bright gold already passes on dark — keep it */
    /* Flowing metallic fill, bright register so the icons read on the dark cards. */
    --metal-grad: linear-gradient(115deg, var(--gold-600) 0%, var(--gold-300) 30%, var(--gold-100) 50%, var(--gold-300) 70%, var(--gold-600) 100%);
    --primary: #d8b46e;
    --on-primary: #1a1206;
    --border: rgba(233, 196, 95, 0.16);
    --border-strong: rgba(233, 196, 95, 0.30);
    --hairline: rgba(236, 227, 210, 0.10);

    --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-2: 0 8px 24px rgba(0,0,0,0.5);
    --shadow-3: 0 22px 60px rgba(0,0,0,0.6);
    --shadow-gold: 0 10px 44px rgba(233, 196, 95, 0.14);

    --hero-grad:
      radial-gradient(120% 90% at 20% 10%, rgba(240,208,96,0.30) 0%, rgba(240,208,96,0) 52%),
      radial-gradient(130% 120% at 82% 25%, rgba(212,175,55,0.34) 0%, rgba(212,175,55,0) 55%),
      radial-gradient(150% 140% at 70% 100%, rgba(139,69,19,0.55) 0%, rgba(139,69,19,0) 60%),
      linear-gradient(155deg, #1a140a 0%, #0d0d0d 45%, #07060a 100%);
  }
}

/* ----------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  /* scrollbar-gutter: stable reserves the classic-scrollbar gutter permanently so
     the centered layout doesn't shift ~8px when body overflow toggles (preloader
     .is-loading on every homepage load, .nav-open drawer) on Windows/Linux classic
     scrollbars. No-op under macOS overlay scrollbars. overscroll-behavior-y: none
     stops the native rubber-band bounce from fighting Lenis at the scroll extremes
     on trackpads. */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; overscroll-behavior-y: none; }
  /* Native smooth scroll only when JS is off; with JS, Lenis owns smoothing
     (a global scroll-behavior:smooth fights Lenis and causes double-easing). */
  html.no-js { scroll-behavior: smooth; }
  body { min-height: 100vh; min-height: 100svh; line-height: var(--leading-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  :where(a, button, input, textarea, select, [role="button"]) { touch-action: manipulation; }
  :target { scroll-margin-top: 6rem; }

  /* The reduced-motion contract ships FIRST and dominates. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ----------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 400;
    color: var(--text);
    background-color: var(--bg);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    overflow-x: hidden;
    /* Defensive: long unbreakable strings (Polish compounds, emails, embedded
       blog content) wrap instead of overflowing their container on narrow
       screens. Inherited, so it covers all text. */
    overflow-wrap: break-word;
  }
  /* JS adds .is-loading during the preloader to lock scroll without jump. */
  body.is-loading { overflow: hidden; }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--heading);
    text-wrap: balance;
  }
  h1 { font-size: var(--step-6); }
  h2 { font-size: var(--step-4); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }
  p { text-wrap: pretty; }
  p, li { max-width: 68ch; }

  a:not([class]) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color var(--dur-1) var(--ease); }
  a:not([class]):hover { color: var(--primary); }

  ::selection { background: var(--gold); color: var(--ink); }

  /* :focus-visible drives the keyboard-only ring on modern engines. The :focus pair
     below is a fallback for engines without :focus-visible (Safari < 15.4 etc.): they
     keep a visible focus ring; modern engines suppress it for mouse/touch focus. */
  :where(a, button, input, textarea, select, [tabindex]):focus,
  :where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2.5px solid var(--accent-bright);
    outline-offset: 3px;
    border-radius: 4px;
  }
  :where(a, button, input, textarea, select, [tabindex]):focus:not(:focus-visible) { outline: none; }

  /* Eyebrow / mono label — the "ledger" voice */
  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
  }
  .eyebrow::before {
    content: "";
    width: 1.6em; height: 1px;
    background: currentColor;
    opacity: 0.7;
  }

  .lede { font-size: var(--step-1); line-height: var(--leading-snug); color: var(--text-soft); max-width: 40ch; }
}

/* ----------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
@layer layout {
  .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
  .container--narrow { max-width: var(--container-narrow); }
  .section { padding-block: var(--space-3xl); position: relative; }
  .section--tight { padding-block: var(--space-2xl); }
  /* Editorial ghost numerals — huge faint index per ledger spread, auto-numbered */
  main { counter-reset: spread; }
  .section[data-spread] { overflow: hidden; overflow: clip; counter-increment: spread; }
  .section[data-spread] > .container { position: relative; z-index: 1; }
  .section[data-spread]::before {
    content: counter(spread, decimal-leading-zero);
    position: absolute; top: clamp(0rem, 2vw, 2.5rem); right: clamp(0.5rem, 2vw, 3.5rem);
    font-family: var(--font-display); font-weight: 700; line-height: 0.72; letter-spacing: -0.04em;
    font-size: clamp(8rem, 26vw, 26rem);
    color: rgba(180, 128, 40, 0.09); /* fallback for engines without color-mix (Safari < 16.2): a faint gold, not body-coloured text */
    color: color-mix(in oklab, var(--gold) 9%, transparent);
    z-index: 0; pointer-events: none; user-select: none;
  }
  /* On phones the single-column layout puts content (esp. the founder portrait) right
     where the huge numeral sits, so it collided with the photo. Shrink it + tuck it
     into the corner so it stays a subtle background accent. */
  @media (max-width: 859px) {
    .section[data-spread]::before { font-size: clamp(3.5rem, 15vw, 6.5rem); top: 0.1rem; right: 0.5rem; color: color-mix(in oklab, var(--gold) 7%, transparent); }
  }
  .stack > * + * { margin-top: var(--flow, var(--space-m)); }
  .grid { display: grid; gap: var(--space-l); }
  @media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 940px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
  main { display: block; }
}

/* ----------------------------------------------------------------------------
   COMPONENTS
   -------------------------------------------------------------------------- */
@layer components {

  /* — Skip link — */
  .skip-link {
    position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
    z-index: var(--z-preloader);
    background: var(--primary); color: var(--on-primary);
    padding: 0.7em 1.4em; border-radius: 0 0 var(--r-s) var(--r-s);
    font-weight: 600; transition: transform var(--dur-2) var(--ease);
  }
  .skip-link:focus-visible { transform: translate(-50%, 0); }

  /* — Scroll progress (GPU transform only) — */
  .scroll-progress {
    position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--z-progress);
    background: linear-gradient(90deg, var(--gold), var(--brown-400), var(--gold));
    transform: scaleX(0); transform-origin: left; will-change: transform;
  }

  /* — Buttons — */
  .btn {
    --_bg: var(--primary); --_fg: var(--on-primary);
    display: inline-flex; align-items: center; gap: 0.6em;
    padding: 0.95em 1.7em; min-height: 48px;
    font-weight: 500; font-size: var(--step-0); line-height: 1;
    color: var(--_fg); background: var(--_bg);
    border-radius: var(--r-pill); position: relative; overflow: hidden;
    isolation: isolate; will-change: transform;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
  }
  .btn::after { /* sheen */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
    transform: translateX(-130%); transition: transform var(--dur-3) var(--ease);
  }
  .btn:hover { box-shadow: var(--shadow-gold); }
  .btn:hover::after { transform: translateX(130%); }
  .btn:active { transform: scale(0.97); }
  .btn--gold { --_bg: var(--gold); --_fg: var(--ink); }
  .btn--ghost {
    --_bg: transparent; --_fg: var(--heading);
    border: 1px solid var(--border-strong);
  }
  .btn--ghost:hover { background: color-mix(in oklab, var(--gold) 12%, transparent); border-color: var(--accent); }
  .btn .btn__arrow { transition: transform var(--dur-2) var(--ease-out); }
  .btn:hover .btn__arrow { transform: translateX(3px); }

  /* — Header / nav — */
  .site-header {
    position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-m); padding: calc(clamp(0.7rem, 0.4rem + 1vw, 1.1rem) + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) clamp(0.7rem, 0.4rem + 1vw, 1.1rem) max(var(--gutter), env(safe-area-inset-left, 0px));
    background: var(--bg); /* opaque fallback: browsers without color-mix() keep a readable header */
    background: color-mix(in oklab, var(--bg) 72%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid transparent;
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
  }
  .site-header[data-scrolled="true"] { border-bottom-color: var(--hairline); background: var(--bg); background: color-mix(in oklab, var(--bg) 88%, transparent); }
  .site-header[data-hidden="true"] { transform: translateY(-100%); }
  /* Don't trap keyboard focus off-screen: if anything inside the auto-hidden
     header gains focus, slide it back into view. Equal specificity to the rule
     above + later source order, so it wins. */
  .site-header:focus-within { transform: none; }
  /* iOS notch / Dynamic Island: a solid --bg cap over the top safe-area so page content
     never shows behind the status bar while scrolling — including when the auto-hiding
     header is tucked away. Zero height (invisible) on devices without a top inset. */
  body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: calc(var(--z-nav) - 1); pointer-events: none; }
  .brand { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--heading); letter-spacing: -0.01em; }
  .brand__mark { height: 1.9em; width: auto; }
  [data-theme="dark"] .brand__mark,
  [data-theme="dark"] .preloader__mark,
  [data-theme="dark"] .footer-logo img { filter: brightness(1.5) saturate(1.06); }

  .nav { display: flex; align-items: center; gap: clamp(0.8rem, 0.3rem + 1.4vw, 1.9rem); }
  .nav__list { display: flex; align-items: center; gap: clamp(0.8rem, 0.3rem + 1.4vw, 1.9rem); list-style: none; padding: 0; }
  .nav__link { position: relative; font-size: var(--step--1); font-weight: 500; letter-spacing: 0.01em; color: var(--text-soft); padding: 0.4em 0; transition: color var(--dur-1) var(--ease); }
  .nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-2) var(--ease-out); }
  .nav__link:hover, .nav__link[aria-current="page"] { color: var(--heading); }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

  .icon-btn {
    width: 44px; height: 44px; display: inline-grid; place-items: center;
    border-radius: var(--r-pill); border: 1px solid var(--border);
    color: var(--heading); transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  }
  .icon-btn:hover { border-color: var(--accent); background: color-mix(in oklab, var(--gold) 10%, transparent); }
  .icon-btn svg { width: 20px; height: 20px; }
  .theme-toggle svg { grid-area: 1 / 1; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out); }
  .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
  .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
  [data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); }
  [data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
  .lang-switch { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; color: var(--text-soft); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.4em 0.8em; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
  .lang-switch:hover { color: var(--heading); border-color: var(--accent); }

  .nav-toggle { display: none; }

  @media (max-width: 859px) {
    /* The off-canvas drawer + hamburger engage only once the nav controller has
       initialized (navToggle() adds html.nav-ready). Until then — including if
       experience.mjs is blocked, ignored, or errors before navToggle() runs — the
       links stay visible in-flow (wrapped) and reachable, with no dead toggle
       button. Mirrors the .anim-ready gating used for reveals. */
    html.nav-ready .nav-toggle { display: inline-grid; position: relative; z-index: 2; }
    /* Drawer must be full-height — but .site-header's backdrop-filter makes the HEADER
       the containing block for its position:fixed descendants, so `bottom:0` resolves to
       the header's own bottom (~its height), collapsing the drawer to a thin strip (the
       "broken mobile menu / half the categories missing" bug). Anchor top-right + an
       explicit 100dvh height so it fills the viewport regardless of the containing block. */
    html.nav-ready .nav { position: fixed; inset: 0 0 auto auto; height: 100vh; height: 100dvh; z-index: 1; width: min(86vw, 360px); flex-direction: column; align-items: stretch; justify-content: center; gap: var(--space-l); padding: var(--space-2xl) var(--gutter); background: var(--surface); box-shadow: var(--shadow-3); transform: translateX(102%); visibility: hidden; transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
    html.nav-ready .nav[data-open="true"] { transform: translateX(0); visibility: visible; transition: transform var(--dur-3) var(--ease-out), visibility 0s; }
    html.nav-ready .nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-m); font-size: var(--step-2); }
    html.nav-ready .nav__link { font-size: var(--step-2); }
    /* Fallback (no JS, or JS enabled but the controller hasn't initialized yet /
       failed to load): links wrap in-flow and stay reachable; no dead toggle. */
    html:not(.nav-ready) .nav-toggle { display: none; }
    html:not(.nav-ready) .nav { flex-wrap: wrap; justify-content: flex-end; }
    html:not(.nav-ready) .nav__list { flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 1rem; }
  }

  /* — Hero shell (WebGL canvas behind a real poster; content in HTML) — */
  /* ~90svh (not a full 100) so the ticker/first section peeks at the bottom of the
     first screen — a scroll cue that gets visitors to real content sooner. Slightly
     tighter top padding to keep the (bottom-aligned) content comfortable at the new height. */
  .hero { position: relative; min-height: 90vh; min-height: 90svh; display: grid; align-items: end; padding-block: clamp(6rem, 5rem + 6vw, 9rem) clamp(var(--space-l), 6vh, var(--space-2xl)); overflow: hidden; overflow: clip; }
  .hero__bg { position: absolute; inset: 0; z-index: var(--z-hero-canvas); }
  .hero__poster, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero__poster { background: var(--hero-grad); }
  .hero__canvas { opacity: 0; transition: opacity 1.2s var(--ease); }
  .hero__canvas[data-ready="true"] { opacity: 1; }
  .hero__scrim { position: absolute; inset: 0; z-index: 1;
    /* Solid-stop fallback FIRST for engines without color-mix (Safari < 16.2 /
       iOS 15.0–16.1): keeps a readable scrim over the live gold so the heading
       never sits on bare moving gold. The color-mix version overrides it below
       on modern engines (mirrors the .site-header fallback pattern). */
    background:
      radial-gradient(120% 90% at 16% 100%, var(--bg) 0%, transparent 55%),
      linear-gradient(to top, var(--bg) 0%, var(--bg) 32%, transparent 84%);
    background:
      radial-gradient(120% 90% at 16% 100%, color-mix(in oklab, var(--bg) 88%, transparent) 0%, transparent 60%),
      linear-gradient(to top, var(--bg) 0%, color-mix(in oklab, var(--bg) 92%, transparent) 40%, color-mix(in oklab, var(--bg) 52%, transparent) 62%, transparent 84%); }
  .hero__inner { position: relative; z-index: var(--z-content); }
  .hero__kicker { display: flex; align-items: center; gap: 0.9em; margin-bottom: clamp(var(--space-m), 3vh, var(--space-l)); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-text); }
  .hero__kicker::before { content: ""; width: clamp(28px, 4vw, 72px); height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
  .hero__title { font-size: clamp(2.9rem, 9.5vw, 8.6rem); font-weight: 600; line-height: 0.92; letter-spacing: -0.025em; color: var(--heading); text-wrap: balance; text-shadow: 0 0 3px var(--bg), 0 1px 12px var(--bg), 0 2px 50px var(--bg); text-shadow: 0 0 3px color-mix(in oklab, var(--bg) 72%, transparent), 0 1px 12px color-mix(in oklab, var(--bg) 82%, transparent), 0 2px 50px color-mix(in oklab, var(--bg) 60%, transparent); }
  .hero__desc { margin-top: clamp(var(--space-m), 3vh, var(--space-l)); max-width: 46ch; }
  .hero__cta { margin-top: clamp(var(--space-l), 4vh, var(--space-xl)); display: flex; flex-wrap: wrap; gap: var(--space-s); }
  .hero__side { position: absolute; left: clamp(0.5rem, 1.5vw, 1.4rem); top: 50%; transform: translateY(-50%) rotate(180deg); z-index: var(--z-content); writing-mode: vertical-rl; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.2em; color: var(--text-faint); }
  .hero__scroll-hint { position: absolute; right: var(--gutter); bottom: var(--space-l); z-index: var(--z-content); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.12em; color: var(--text-faint); writing-mode: vertical-rl; display: flex; align-items: center; gap: 1em; }
  @media (max-width: 1100px) { .hero__side { display: none; } }

  /* — Cards (shadows over borders) — */
  .card {
    background: var(--surface); border-radius: var(--r-l);
    padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
    box-shadow: var(--shadow-2); border: 1px solid var(--hairline);
    position: relative; overflow: hidden; height: 100%;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease);
  }
  .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); border-color: color-mix(in oklab, var(--gold) 32%, transparent); }
  .card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 38%, color-mix(in oklab, var(--gold) 10%, transparent) 50%, transparent 62%); transform: translateX(-120%); transition: transform 0.85s var(--ease); }
  .card:hover::after { transform: translateX(120%); }
  .card__num { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent-text); letter-spacing: 0.1em; }
  .card__title { font-size: var(--step-2); margin-top: var(--space-2xs); }
  .card__body { margin-top: var(--space-s); color: var(--text-soft); }
  /* Icon = the glyph shape masked out of a slowly-flowing metallic gradient
     (--icon is set per element inline). Premium gold in BOTH themes — fixes the
     dark-mode "black icon on dark card" problem. Reduced-motion freezes the flow. */
  .card__icon, .contact-card__icon { background-image: var(--metal-grad); background-size: 220% 100%; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; animation: icon-flow 6.5s linear infinite; }
  .card__icon { width: 52px; height: 52px; margin-bottom: var(--space-s); }
  @keyframes icon-flow { to { background-position: 220% 50%; } }
  @media (prefers-reduced-motion: reduce) { .card__icon, .contact-card__icon { animation: none; } }

  /* — Services "desk": flat-lay accounting objects that assemble on scroll.
     The surface stays a warm, lit parchment in BOTH themes (a worktable the page
     spotlights), so the transparent-keyed objects + their baked shadows read and
     the copy on it is always dark ink. — */
  .desk__surface {
    position: relative; border-radius: var(--r-l); overflow: hidden;
    padding: clamp(var(--space-l), 2vw + 1rem, var(--space-2xl)) clamp(var(--space-m), 3vw, var(--space-2xl));
    background:
      radial-gradient(130% 120% at 50% -10%, color-mix(in oklab, #fffaf0 70%, transparent) 0%, transparent 60%),
      linear-gradient(170deg, #f4ecd6 0%, #ece0c2 100%);
    border: 1px solid color-mix(in oklab, var(--brown) 16%, transparent);
    box-shadow: var(--shadow-3), inset 0 1px 0 color-mix(in oklab, #fff 60%, transparent);
  }
  [data-theme="dark"] .desk__surface { background:
      radial-gradient(130% 120% at 50% -10%, color-mix(in oklab, #fffaf0 55%, transparent) 0%, transparent 60%),
      linear-gradient(170deg, #ece0c2 0%, #dccaa4 100%); }
  .desk__bridge { position: absolute; top: clamp(0.6rem, 2vw, 1.5rem); right: clamp(0.6rem, 2vw, 1.5rem); width: clamp(46px, 7vw, 82px); pointer-events: none; }
  .desk__bridge img { width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(60,40,15,0.22)); }
  .desk__item { display: grid; gap: clamp(var(--space-m), 4vw, var(--space-2xl)); align-items: center; padding-block: clamp(var(--space-l), 5vh, var(--space-2xl)); }
  .desk__item + .desk__item { border-top: 1px solid color-mix(in oklab, var(--brown) 12%, transparent); }
  @media (min-width: 760px) {
    .desk__item { grid-template-columns: 1fr 1fr; }
    .desk__item:nth-child(even) .desk__obj { order: 2; }
  }
  .desk__obj { display: flex; justify-content: center; }
  .desk__obj img { width: 100%; max-width: 320px; height: auto; display: block; filter: drop-shadow(0 16px 26px rgba(60,40,15,0.20)); }
  .desk__copy .card__num { color: var(--brown-500); }
  .desk__copy .card__title { color: var(--brown-700); }
  .desk__copy .card__body { color: #5c5340; }
  /* Objects start hidden ONLY when JS will animate them in (mirrors .reveal). */
  html.anim-ready .desk__obj img, html.anim-ready .desk__bridge img { opacity: 0; }
  @media (prefers-reduced-motion: reduce) { html.anim-ready .desk__obj img, html.anim-ready .desk__bridge img { opacity: 1 !important; transform: none !important; } }

  /* — Footer — */
  .site-footer { border-top: 1px solid var(--hairline); padding-block: var(--space-2xl) var(--space-xl); background: var(--bg-2); }
  .site-footer .container { display: grid; gap: var(--space-l); }
  .site-footer p { color: var(--text-soft); max-width: none; }
  .site-footer a { color: var(--primary); transition: color var(--dur-1) var(--ease); }
  .site-footer a:hover { color: var(--accent); }
  /* Contact line: inline with a separator on wide screens; stacks cleanly (no dangling
     separator) once it wraps on narrow phones. */
  .footer-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 0.7em; }
  .footer-contact__sep { color: var(--text-faint); }
  @media (max-width: 560px) {
    .footer-contact { gap: 0.1em 0; }
    .footer-contact__item { flex: 1 0 100%; }
    .footer-contact__sep { display: none; }
  }

  /* — Forms — */
  .field { display: flex; flex-direction: column; gap: 0.5em; margin-bottom: var(--space-m); }
  .field label { font-weight: 500; font-size: var(--step--1); color: var(--heading); }
  .field input, .field textarea {
    width: 100%; padding: 0.85em 1em; border-radius: var(--r-m);
    background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 22%, transparent); }
  .field textarea { min-height: 9rem; resize: vertical; }
  .form-status { padding: 0.9em 1.1em; border-radius: var(--r-m); font-weight: 500; }
  .form-status[data-state="error"] { background: color-mix(in oklab, #c0392b 14%, transparent); color: #c0392b; }
  .form-status[data-state="success"] { background: color-mix(in oklab, #2e7d32 14%, transparent); color: #2e7d32; }
  /* Dark mode: the mid-tone green/red only reach ~3:1 on the dark form card —
     use lighter, dark-safe variants so the success/error message clears WCAG AA. */
  [data-theme="dark"] .form-status[data-state="success"] { background: color-mix(in oklab, #2e7d32 24%, transparent); color: #8fd19e; }
  [data-theme="dark"] .form-status[data-state="error"] { background: color-mix(in oklab, #c0392b 24%, transparent); color: #f08a7e; }

  /* — Ink line (DrawSVG narrative thread) — */
  .ink-line { position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; z-index: 0; overflow: visible; }
  .ink-line path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: 0.7; }

  /* — Preloader — */
  .preloader { position: fixed; inset: 0; z-index: var(--z-preloader); display: grid; place-items: center; background: var(--bg); transition: opacity var(--dur-3) var(--ease); }
  .preloader[data-done="true"] { opacity: 0; pointer-events: none; }
  .preloader__mark { width: clamp(64px, 10vw, 96px); height: auto; color: var(--accent); }
  .preloader__count { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.2em; color: var(--text-faint); margin-top: var(--space-s); }
}

/* ----------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */
@layer utilities {
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .text-gold { color: var(--accent); }
  .text-display { font-family: var(--font-display); }
  .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .measure { max-width: var(--container-narrow); }
  .center { margin-inline: auto; }
  [hidden] { display: none !important; }

  /* Reveal primitive — VISIBLE by default; GSAP choreographs the entrance
     (staggered batches) once `.anim-ready` is set, so no-JS / failed-JS /
     reduced-motion never hides content. */
  html.anim-ready .reveal { opacity: 0; }
  @media (prefers-reduced-motion: reduce) { html.anim-ready .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } }
}

/* ----------------------------------------------------------------------------
   PAGE SECTIONS — "Living Ledger"
   -------------------------------------------------------------------------- */
@layer base {
  body { transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
  body.nav-open { overflow: hidden; }
  /* When the drawer is open the toggle becomes the close control — give it the
     active (accent) treatment so it reads as such. */
  body.nav-open .nav-toggle { border-color: var(--accent); background: color-mix(in oklab, var(--gold) 14%, transparent); }
}

@layer components {
  .section-head { margin-bottom: var(--space-2xl); max-width: 30ch; }
  .section-head .eyebrow { margin-bottom: var(--space-m); font-size: var(--step-0); }
  .section-head h2 { font-size: clamp(2.4rem, 1.5rem + 4.2vw, 5.25rem); line-height: 1.0; letter-spacing: -0.02em; overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }

  /* Services ledger index */
  .ledger-index { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); }
  .ledger-row { border-bottom: 1px solid var(--border); }
  .ledger-row a {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
    padding: clamp(1.05rem, 0.7rem + 1vw, 1.7rem) 0.4rem;
    color: var(--heading);
    transition: padding-left var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease);
  }
  .ledger-row__no { color: var(--accent-text); font-size: var(--step-0); }
  .ledger-row__name { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.8vw, 2.6rem); font-weight: 500; line-height: 1.05; }
  .ledger-row__go { color: var(--accent); transform: translateX(-8px); opacity: 0; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease); }
  .ledger-row a:hover, .ledger-row a:focus-visible { padding-left: 1.3rem; color: var(--accent); background: color-mix(in oklab, var(--gold) 7%, transparent); }
  .ledger-row a:hover .ledger-row__go, .ledger-row a:focus-visible .ledger-row__go { transform: translateX(0); opacity: 1; }
  @media (hover: none) { .ledger-row__go { opacity: 1; transform: none; } }

  /* Founder */
  .founder-grid { display: grid; gap: var(--space-xl); align-items: center; }
  @media (min-width: 860px) { .founder-grid { grid-template-columns: 0.85fr 1fr; gap: var(--space-2xl); } }
  .founder-portrait { position: relative; }
  .founder-portrait img { width: 100%; border-radius: var(--r-l); box-shadow: var(--shadow-3); }
  .founder-portrait::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--border); pointer-events: none; }
  .founder-stat { display: flex; align-items: baseline; gap: 0.7em; margin-top: var(--space-l); max-width: none; }
  .founder-stat__num { font-family: var(--font-display); font-size: var(--step-5); font-weight: 600; color: var(--accent-text); line-height: 1; }
  .founder-stat__label { color: var(--text-soft); max-width: 22ch; }

  /* CTA */
  .cta-section {
    background:
      radial-gradient(130% 160% at 50% 138%, color-mix(in oklab, var(--gold) 26%, transparent) 0%, transparent 58%),
      var(--bg-2);
    border-block: 1px solid color-mix(in oklab, var(--gold) 24%, transparent);
  }
  .cta-section h2 { font-size: clamp(2.6rem, 1.7rem + 4.8vw, 5.5rem); line-height: 1.0; letter-spacing: -0.02em; }

  /* Inner-page hero (subtle gold glow — legible, fast; the living WebGL stays on home) */
  .page-hero { position: relative; padding-block: clamp(6.5rem, 5.5rem + 5vw, 9.5rem) var(--space-l); overflow: hidden; overflow: clip; isolation: isolate; }
  .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(125% 115% at 84% -12%, color-mix(in oklab, var(--gold) 34%, var(--bg)) 0%, var(--bg) 58%); }
  .page-hero h1 { font-size: clamp(2.8rem, 1.8rem + 6vw, 7.5rem); line-height: 0.95; letter-spacing: -0.025em; max-width: 16ch; }
  .page-hero .lede { margin-top: var(--space-l); }
  .page-hero__rule { width: 64px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); margin-bottom: var(--space-l); transform-origin: left; }

  /* Profile (about) */
  .profile-grid { display: grid; gap: var(--space-xl); align-items: center; }
  @media (min-width: 860px) { .profile-grid { grid-template-columns: 300px 1fr; gap: var(--space-2xl); } }
  .profile-grid img { width: 100%; border-radius: var(--r-l); box-shadow: var(--shadow-3); }
  .profile-grid h2 { font-size: var(--step-3); }
  .profile-grid p { margin-top: var(--space-m); color: var(--text-soft); }

  /* — Founder signature: a gold flourish that draws itself on scroll (DrawSVG),
     signing the personal commitment. Fully drawn (static) without JS / reduced-motion. — */
  .signature { margin-top: var(--space-l); }
  .signature__mark { display: block; width: clamp(190px, 46%, 280px); height: auto; color: var(--accent); overflow: visible; }
  .signature--rule { margin-top: var(--space-m); }                              /* blog hero: a penned underline-swash */
  .signature--rule .signature__mark { width: clamp(220px, 56%, 340px); }
  /* Founder signature — "Klaudia Krawczyk" in a signature script, penned on with a
     left->right write-on wipe. Gated on .anim-ready so it stays fully visible with no
     or failed JS; reduced-motion shows it static. */
  .signature__name { font-family: "Mr Dafoe", "Segoe Script", "Brush Script MT", cursive; font-size: clamp(2.6rem, 1.7rem + 3.4vw, 4.4rem); line-height: 0.92; color: var(--accent); display: inline-block; padding: 0.1em 0.18em 0.26em; }
  html.anim-ready .signature__name { clip-path: inset(0 100% 0 -0.14em); transition: clip-path 1.5s var(--ease-out); }
  html.anim-ready .signature.signed .signature__name { clip-path: inset(0 0% 0 -0.14em); }
  @media (prefers-reduced-motion: reduce) { html.anim-ready .signature__name { clip-path: none; transition: none; } }
  /* About founder signature: the script name pens on (clip-wipe), then an underline flourish
     draws itself beneath it (signatureWrite + DrawSVG) — the "hallmark" stroke that sells it as penned. */
  .signature--about { display: inline-flex; flex-direction: column; align-items: flex-start; }
  .signature--about .signature__mark { width: clamp(240px, 64%, 380px); margin: -0.22em 0 0 0.16em; }

  /* Contact */
  .contact-grid { display: grid; gap: var(--space-xl); align-items: start; }
  @media (min-width: 860px) { .contact-grid { grid-template-columns: 0.8fr 1fr; } }
  .contact-reach { display: grid; gap: var(--space-l); align-content: start; }
  .contact-cards { display: grid; gap: var(--space-s); }
  .contact-card { display: flex; align-items: center; gap: var(--space-m); padding: var(--space-m) var(--space-l); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-m); box-shadow: var(--shadow-1); }
  .contact-card__icon { width: 44px; height: 44px; flex: 0 0 auto; }
  .contact-card h2 { font-size: var(--step-0); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 0.2em; }
  .contact-card p, .contact-card a { font-size: var(--step-1); color: var(--heading); }
  .contact-card a:hover { color: var(--accent); }
  .form-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-l); padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); box-shadow: var(--shadow-2); }

  /* ---- Kontakt: the correspondence story (skyline → desk → journey → seal) ---- */
  /* 1. The Warsaw skyline draws itself across the horizon beneath the title. */
  .cityline { margin: var(--space-xl) 0 0; max-width: 820px; }
  .cityline__img { display: block; width: 100%; height: auto; opacity: 0.9; }
  html.anim-ready .cityline__img { clip-path: inset(0 100% 0 0); }
  html.anim-ready .cityline.is-drawn .cityline__img { clip-path: inset(0 0 0 0); transition: clip-path 1.9s var(--ease-out); }
  .cityline__cap { margin-top: var(--space-s); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; color: var(--text-soft); }

  /* 2. A letter + fountain pen settle onto the desk beside the form. */
  .desk-note { display: flex; justify-content: center; align-items: center; margin: 0 auto; max-width: 360px; }
  .desk-note__obj { height: auto; filter: drop-shadow(0 18px 30px rgba(60, 40, 15, 0.20)); }
  .desk-note__obj--letter { width: clamp(140px, 19vw, 215px); transform: rotate(-5deg); }
  .desk-note__obj--pen { width: clamp(150px, 21vw, 245px); margin-left: -7%; transform: rotate(7deg) translateY(6%); }
  html.anim-ready .desk-note__obj { opacity: 0; }

  /* 3. "What happens next" — three numbered beats strung on a dashed gold path. */
  .journey { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: var(--space-xl); }
  @media (min-width: 760px) {
    .journey { grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); }
    .journey::before { content: ""; position: absolute; left: 6%; right: 6%; top: 28px;
      border-top: 2px dashed var(--gold); opacity: 0.4; z-index: 0; }
  }
  .journey__step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-xs); }
  /* Object marker per step (write -> read -> sealed) sitting ON the dashed journey
     path. align-self:start + a --bg backing breaks the dashed line cleanly around each. */
  .journey__icon { width: 56px; height: 56px; object-fit: contain; align-self: start; background: var(--bg); padding-right: 0.4em; margin-bottom: var(--space-2xs); }
  .journey__no { font-family: var(--font-display); font-weight: 600; font-size: var(--step-4); line-height: 0.85;
    color: var(--accent-text); align-self: start; padding-right: 0.35em; background: var(--bg); }
  .journey__body h3 { font-size: var(--step-2); margin-bottom: 0.15em; }
  .journey__body p { color: var(--text-soft); max-width: 32ch; }

  /* 4. The reply is sealed: a wax seal presses onto the cream envelope. */
  .sealed { position: relative; width: clamp(250px, 42vw, 430px); margin: var(--space-2xl) auto 0; text-align: center; }
  .sealed__envelope { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 38px rgba(60, 40, 15, 0.22)); }
  .sealed__seal { position: absolute; left: 50%; top: 54%; width: 30%; height: auto; transform: translate(-50%, -50%); }
  html.anim-ready .sealed__seal { opacity: 0; }
  .sealed__cap { margin-top: var(--space-l); font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--text-soft); }

  /* ---- FAQ accordion (native <details>; zero-JS, accessible, on-brand) ---- */
  .faq { max-width: 760px; border-top: 1px solid var(--hairline); }
  .faq__item { border-bottom: 1px solid var(--hairline); }
  .faq__q { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-l);
    padding: var(--space-l) 0; cursor: pointer; list-style: none; font-family: var(--font-display);
    font-size: var(--step-1); line-height: var(--leading-snug); color: var(--heading); transition: color 0.2s var(--ease); }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q:hover { color: var(--accent); }
  .faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
  .faq__q::after { content: "+"; flex: 0 0 auto; font-family: var(--font-mono); font-weight: 400;
    font-size: 1.5em; line-height: 0.7; color: var(--accent-text); transition: transform 0.25s var(--ease-out); }
  .faq__item[open] .faq__q::after { transform: rotate(45deg); }
  .faq__a { padding: 0 0 var(--space-l); }
  .faq__a p { color: var(--text-soft); max-width: 64ch; }
  @media (prefers-reduced-motion: reduce) { .faq__q, .faq__q::after { transition: none; } }

  /* Blog (Soro embed) */
  .blog-frame { position: relative; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-l); box-shadow: var(--shadow-2); padding: clamp(1.1rem, 0.8rem + 1.4vw, 2rem); overflow: hidden; }
  .blog-frame::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--brown-400), var(--gold)); }
  .blog-embed { min-height: 360px; }
  /* Blog ARTICLE pages (edge-rendered): constrain to a centered reading column so the
     title, image, and body all share one width instead of the prose hugging the left. */
  .blog-post > .container { max-width: 48rem; }
  /* The Soro post thumbnails are cold AI stock; warm them toward the gold/cream palette so they read on-brand. */
  #soro-blog .soro-blog-card-image { filter: sepia(0.9) saturate(1.45) hue-rotate(-8deg) brightness(1.06) contrast(0.92); transition: filter 0.4s ease; }
  .blog-loading { display: grid; place-items: center; min-height: 260px; color: var(--text-soft); font-family: var(--font-mono); }
  .blog-disclaimer { margin-top: var(--space-l); padding: var(--space-m) var(--space-l); border-left: 3px solid var(--gold); background: var(--surface-2); border-radius: var(--r-s); color: var(--text-soft); }
  .blog-disclaimer p { max-width: none; font-size: var(--step--1); }
}

/* ---- Ledger thread: a gold margin rule that draws on scroll (home, wide screens) ---- */
@layer base { main { position: relative; } }
@layer components {
  .ledger-thread {
    position: absolute; top: 100vh; top: 100svh; bottom: var(--space-3xl);
    left: clamp(1.5rem, calc((100vw - 1240px) / 2 + 0.4rem), 5rem);
    width: 2px; overflow: visible; z-index: 0; pointer-events: none;
  }
  .ledger-thread path { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.4; filter: drop-shadow(0 0 6px var(--gold-glow)); }
  @media (max-width: 1279px) { .ledger-thread { display: none; } }
}

/* ---- Atmospheric media band (inner pages) ---- */
@layer components {
  .media-band { margin: 0; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow-2); border: 1px solid var(--hairline); position: relative; aspect-ratio: 1200 / 630; }
  .media-band img { position: absolute; inset: 0; width: 100%; height: 120%; top: -10%; object-fit: cover; display: block; }
}

/* ---- Cross-document View Transitions (smooth page + EN/PL morphs) ---- */
@view-transition { navigation: auto; }
@layer base {
  .site-header { view-transition-name: site-header; }
  .site-footer { view-transition-name: site-footer; }
}
::view-transition-old(root) { animation: vt-out 0.34s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.46s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---- Custom cursor (fine pointers only; native cursor everywhere else) ---- */
@media (hover: hover) and (pointer: fine) {
  /* cursor:none is scoped to .cursor-active (added only while a real mouse drives
     the custom cursor, removed on any touch/pen) — NOT the static .has-cursor — so
     a hybrid device (iPad+trackpad, Android DeX, stylus) never hides the native
     pointer with no synthetic dot to replace it. */
  html.cursor-active, html.cursor-active * { cursor: none; }
  .cursor__dot, .cursor__ring { position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none; border-radius: 50%; will-change: transform; }
  .cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold); }
  .cursor__ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid color-mix(in oklab, var(--gold) 66%, transparent); transition: width .26s var(--ease), height .26s var(--ease), margin .26s var(--ease), background-color .26s var(--ease), border-color .26s var(--ease); }
  html.cursor-hover .cursor__ring { width: 66px; height: 66px; margin: -33px 0 0 -33px; background: color-mix(in oklab, var(--gold) 16%, transparent); border-color: transparent; }
  html.cursor-down .cursor__ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
}
@media (prefers-reduced-motion: reduce) { .cursor__dot, .cursor__ring { display: none !important; } }

/* ---- Cinematic film grain — subtle fixed texture over the whole experience ----
   No mix-blend-mode: a blended fixed layer forces the compositor to re-blend with
   the scrolling page every frame (scroll jank, esp. mobile). A plain fixed overlay
   composites once and stays put, so we keep it as a subtle straight alpha wash. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  background-image: url("/assets/images/noise.png");
  background-size: 180px 180px;
  background-repeat: repeat;
  opacity: 0.05;
}
@media (prefers-reduced-motion: reduce) { body::after { opacity: 0.028; } }

/* ---- Kinetic micro-interactions & craft polish ---- */
::selection { background: color-mix(in oklab, var(--gold) 85%, transparent); color: #1a1206; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.btn__arrow { display: inline-block; transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(5px); }
.ledger-row a { position: relative; }
.ledger-row a::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--gold); transform: translateY(-50%); transition: height var(--dur-2) var(--ease-out); }
.ledger-row a:hover::before, .ledger-row a:focus-visible::before { height: 64%; }
.ledger-row__no { transition: transform var(--dur-2) var(--ease-out); }
.ledger-row a:hover .ledger-row__no { transform: scale(1.18); transform-origin: left center; }

/* ---- Signature: living ledger ticker (velocity-reactive marquee) ---- */
.ticker { overflow: hidden; overflow: clip; border-block: 1px solid color-mix(in oklab, var(--gold) 24%, transparent); padding-block: clamp(0.9rem, 1.6vw, 1.7rem); background: color-mix(in oklab, var(--gold) 6%, transparent); }
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__item { display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem); color: var(--heading); letter-spacing: -0.01em; }
.ticker__item i { color: var(--gold); font-style: normal; font-size: 0.55em; margin: 0 clamp(1rem, 2.4vw, 2.4rem); transform: translateY(-0.12em); }
@media (prefers-reduced-motion: reduce) { .ticker__track { transform: none !important; } }

/* ---- Cross-page view transitions (progressive enhancement) ----
   Cross-document (MPA) view transitions: supporting browsers dissolve between
   same-origin pages with the animation below. Unsupported browsers ignore the
   at-rule + pseudos entirely and navigate instantly — nothing to polyfill.
   Gated behind no-preference so reduced-motion visitors get immediate, motion-free
   page swaps. Pure opacity (no transform) so it layers cleanly over each page's
   own reveal/hero entrance choreography rather than fighting it. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-page-out 200ms var(--ease) both; }
  ::view-transition-new(root) { animation: vt-page-in 420ms var(--ease-out) both; }
  @keyframes vt-page-out { to { opacity: 0; } }
  @keyframes vt-page-in { from { opacity: 0; } }
}

/* ---- Print: a clean ink-on-paper document ----
   Strip the screen chrome, motion, and WebGL/atmosphere layers and force a light,
   legible page regardless of theme, so a printout never burns ink on dark
   backgrounds. Print-only — the screen experience is untouched. */
@media print {
  *, *::before, *::after {
    animation: none !important; transition: none !important;
    box-shadow: none !important; text-shadow: none !important;
    color: #1a1206 !important; background: transparent !important;
  }
  html, body { background: #fff !important; }
  /* Screen-only chrome, decoration, and the atmosphere / WebGL layers. */
  .site-header, .nav-toggle, .scroll-progress, .cursor__dot, .cursor__ring, .preloader,
  .hero__bg, .hero__poster, .hero__canvas, .hero__scrim, .hero__scroll-hint, .hero__side,
  .ledger-thread, .ticker, .desk__bridge, .signature, .media-band, .hero__cta,
  .consent-banner, body::after { display: none !important; }
  /* Reveal-gated content must print even if its scroll trigger never fired on screen. */
  .reveal, [data-split] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero, .page-hero, .section, .section--tight { min-height: 0 !important; padding: 0.5cm 0 !important; }
  .hero__title { font-size: 28pt !important; line-height: 1.1 !important; }
  main { padding: 0 !important; }
  a { text-decoration: underline; }
  /* Spell out external URLs so a printed page stays actionable; internal/mailto/tel keep their visible text. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555 !important; word-break: break-all; }
  h1, h2, h3 { break-after: avoid; }
  img { max-width: 100% !important; break-inside: avoid; }
  @page { margin: 1.6cm; }
}

/* ============================================================================
   GDPR CONSENT BANNER (deliberately UNLAYERED)
   ----------------------------------------------------------------------------
   Kept OUTSIDE @layer so it styles correctly even on Safari/iOS 15.0-15.3,
   where cascade layers are unsupported and every layered rule (incl. the token
   layer) is dropped. For the same reason every var() carries a solid fallback:
   a consent control must render and be operable on every supported browser,
   design tokens or not. Built + controlled by /assets/js/consent.js. */
.consent-banner {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(40rem, calc(100% - 2rem));
  transform: translate(-50%, calc(100% + 1.5rem));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 1rem 1.15rem;
  background: var(--surface, #ffffff);
  color: var(--text, #2c2417);
  border: 1px solid var(--border-strong, rgba(140, 110, 45, 0.32));
  border-radius: var(--r-m, 14px);
  box-shadow: 0 18px 50px rgba(60, 45, 20, 0.22), 0 6px 16px rgba(60, 45, 20, 0.12);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.consent-banner.is-in { opacity: 1; transform: translate(-50%, 0); }
.consent-banner.is-leaving { opacity: 0; transform: translate(-50%, calc(100% + 1.5rem)); }
.consent-banner__text {
  flex: 1 1 16rem;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-soft, #5c5340);
}
.consent-banner__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.consent-banner__link:hover, .consent-banner__link:focus-visible { text-decoration-thickness: 2px; }
.consent-banner__actions { display: flex; gap: 0.6rem; flex: 0 0 auto; margin-left: auto; }
.consent-banner__btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.62rem 1.15rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.consent-banner__btn--solid { background: var(--primary, #8b4513); color: var(--on-primary, #fff7e6); }
.consent-banner__btn--solid:hover { background: var(--brown-600, #6f370f); }
.consent-banner__btn--ghost { background: transparent; color: var(--text, #2c2417); border-color: var(--border-strong, rgba(140, 110, 45, 0.32)); }
.consent-banner__btn--ghost:hover { border-color: var(--text, #2c2417); }
.consent-banner__btn:focus-visible { outline: 2px solid var(--gold, #d4af37); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .consent-banner,
  .consent-banner.is-in,
  .consent-banner.is-leaving { transition: opacity 0.25s ease; transform: translate(-50%, 0); }
}
@media (max-width: 480px) {
  .consent-banner__actions { width: 100%; }
  .consent-banner__btn { flex: 1 1 auto; padding: 0.7rem 1rem; }
}

/* Footer legal link (privacy policy) — unlayered, mirrors the consent banner rationale above. */
.site-footer .footer-legal { margin-top: 0.5rem; font-size: var(--step--1, 0.85rem); }