@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/montserrat-400.woff2') format('woff2'); }
  @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/montserrat-500.woff2') format('woff2'); }
  @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/montserrat-600.woff2') format('woff2'); }
  @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/montserrat-700.woff2') format('woff2'); }
  @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/montserrat-800.woff2') format('woff2'); }
  @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/montserrat-900.woff2') format('woff2'); }
  /* Size-adjusted Arial fallback. Page paints with Arial immediately; when
     Montserrat finishes loading the swap is visually invisible because
     these overrides make Arial's metrics match Montserrat's. Calculated
     for Montserrat against Arial — see github.com/seek-oss/capsize. */
  @font-face {
    font-family: 'Montserrat Fallback';
    src: local('Arial');
    ascent-override: 93%;
    descent-override: 19%;
    line-gap-override: 0%;
    size-adjust: 105%;
  }
  :root {
    --orange: #EA652C;
    --orange-dim: #C8551F;
    --orange-soft: rgba(234, 101, 44, 0.12);
    --ink: #000000;
    --ink-soft: #1A1A1A;
    --paper: #FFFFFF;
    --paper-soft: #FAFAF7;
    --grey-50: #F4F4F0;
    --grey-100: #E8E8E2;
    --grey-300: #B8B8B0;
    --grey-600: #6A6A64;
    --grey-900: #2E2E2E;

    --content-max: 1280px;
    --margin: 80px;

    --motion-fast: 220ms;
    --motion-default: 360ms;
    --motion-slow: 600ms;
    --easing-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
    --easing-power: cubic-bezier(0.65, 0, 0.35, 1);
  }

  *, *::before, *::after {
    box-sizing: border-box; margin: 0; padding: 0;
    font-family: 'Montserrat', 'Montserrat Fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  html, body {
    color: var(--ink); background: var(--paper); line-height: 1.55;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  body, p, h1, h2, h3, h4 { word-wrap: break-word; overflow-wrap: break-word; }

  /* ──────────── ACCESSIBILITY ──────────── */
  /* Keyboard-only focus ring (a11y / WCAG 2.1 AA). Uses :focus-visible so mouse
     clicks don't show the outline, only keyboard nav does. Form inputs keep
     their custom orange-border focus treatment (defined further down). */
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
    border-radius: 2px;
  }
  /* Skip-to-content link removed (2026-05-11). Tab order is also restricted
     to buttons + form inputs only — see restrictTabOrder IIFE in site.js. */
  .skip-link { display: none !important; }
  ::selection { background: var(--orange); color: var(--paper); }
  svg { display: inline-block; vertical-align: middle; }
  a { color: inherit; text-decoration: none; transition: color var(--motion-fast) var(--easing-enter); }
  a:hover { color: var(--orange); }
  img { max-width: 100%; display: block; }
  button, input, textarea, select { font-size: inherit; color: inherit; border: none; background: none; }
  button { cursor: pointer; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  .display { font-weight: 900; font-size: clamp(40px, 6.5vw, 84px); letter-spacing: -0.04em; line-height: 0.96; }
  .h1 { font-weight: 700; font-size: clamp(32px, 4.2vw, 52px); letter-spacing: -0.03em; line-height: 1.0; }
  .h2 { font-weight: 700; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.025em; line-height: 1.05; }
  .h3 { font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.02em; line-height: 1.2; }
  .lead { font-weight: 400; font-size: clamp(16px, 1.4vw, 19px); letter-spacing: -0.005em; line-height: 1.5; }
  .body { font-weight: 400; font-size: 15px; line-height: 1.6; }
  .body-sm { font-weight: 400; font-size: 13px; line-height: 1.55; }
  .eyebrow { font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.2; }

  .container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--margin); }
  @media (max-width: 1024px) { :root { --margin: 56px; } }
  @media (max-width: 768px) { :root { --margin: 40px; } }
  @media (max-width: 480px) { :root { --margin: 32px; } }

  /* ──────────── NAV ──────────── */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    /* Always include the iOS safe-area inset in the top padding so the nav
       extends UP to the very top of the viewport (under the status bar /
       notch on iPhones with viewport-fit=cover). Without this, page
       content scrolls into the gap above the nav element. */
    padding: 18px 0;
    padding-top: calc(18px + env(safe-area-inset-top, 0));
    transition: background 360ms, padding 360ms, border-bottom 360ms;
    pointer-events: none;
    /* Force GPU compositing on iOS Safari. Without this, momentum scroll
       (rubber band) briefly detaches the fixed nav and page content shows
       above it. translateZ promotes the nav to its own layer. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
  }
  /* iOS top-shield: a separate fixed element pinned at viewport top whose
     only job is to cover the area above where the nav appears, with a
     matching background when the page is scrolled. This sidesteps any iOS
     Safari quirk where the nav's own background fails to extend up. */
  .top-shield {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(80px + env(safe-area-inset-top, 0));
    background: transparent;
    z-index: 99;
    pointer-events: none;
    transition: background 360ms;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  body.is-scrolled .top-shield { background: var(--paper); }
  body.is-scrolled { background: var(--paper); }
  .nav > * { pointer-events: auto; }
  .nav.scrolled {
    background: var(--paper);
    padding: 12px 0;
    padding-top: calc(12px + env(safe-area-inset-top, 0));
    border-bottom: 1px solid var(--grey-100);
  }
  /* Inner wrapper uses .container styling so the nav logo + links align
     horizontally with the rest of the site's content (same left/right
     edges as section content). */
  .nav-inner {
    display: flex; align-items: center;
    justify-content: flex-end;
    transition: justify-content 360ms;
  }
  .nav.scrolled .nav-inner { justify-content: space-between; }
  .nav-logo { display: none; margin-left: -4px; }
  .nav.scrolled .nav-logo { display: block; }
  .nav-logo img {
    height: 56px; width: auto; display: block;
  }

  .nav-links { display: flex; gap: 32px; align-items: center; }

  /* Nav hover — simple orange highlight */
  .nav-link {
    font-size: 13px; font-weight: 600; color: var(--paper);
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: color 220ms ease;
  }
  .nav.scrolled .nav-link { color: var(--ink); }
  .nav-link:hover { color: var(--ink); }
  .nav.scrolled .nav-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }

  .nav-cta {
    padding: 11px 22px;
    background: var(--ink) !important;
    color: var(--paper) !important;
    font-size: 13px !important; font-weight: 600 !important;
    letter-spacing: 0.04em; text-transform: uppercase;
    transition: background var(--motion-fast), transform var(--motion-fast);
  }
  .nav-cta:hover { background: var(--orange) !important; transform: translateY(-1px); }

  /* ───── Mobile nav (hamburger) ───── */
  .nav-toggle {
    display: none;
    position: relative; z-index: 110;
    background: transparent; border: 0; padding: 8px;
    cursor: pointer; color: var(--paper);
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    transition: color 220ms ease;
  }
  .nav.scrolled .nav-toggle, .nav-toggle.open { color: var(--ink); }
  .nav-toggle .bar {
    display: block; width: 22px; height: 2px;
    background: currentColor;
    position: relative; transition: transform 220ms ease, opacity 220ms ease;
  }
  .nav-toggle .bar::before, .nav-toggle .bar::after {
    content: ""; position: absolute; left: 0; width: 22px; height: 2px;
    background: currentColor;
    transition: transform 220ms ease, top 220ms ease;
  }
  .nav-toggle .bar::before { top: -7px; }
  .nav-toggle .bar::after { top: 7px; }
  .nav-toggle.open .bar { background: transparent; }
  .nav-toggle.open .bar::before { top: 0; transform: rotate(45deg); }
  .nav-toggle.open .bar::after { top: 0; transform: rotate(-45deg); }

  /* "Home" link is mobile-only — desktop uses the logo for the same purpose. */
  .nav-link-home { display: none; }

  /* MOBILE: NAV HIDDEN COMPLETELY (2026-05-11)
     The hamburger + floating chip approach was scrapped in favor of no
     mobile nav at all. The hero contains the Creodi mark; case-page hero
     has a small clickable logo above the H1. Footer "Back to top" + scroll
     covers the rest. Zero nav surface = zero iOS gap issues. */
  @media (max-width: 800px) {
    .nav,
    .nav-toggle,
    .nav-links,
    .nav-logo,
    .top-shield { display: none !important; }
    body.menu-open { overflow: auto; }
  }

  /* ──────────── HERO ──────────── */
  /* Paper Shaders MeshGradient background — mounts into #shader-hero from
     the inline module at the bottom of index.html. Sits behind everything;
     pointer-events disabled so it doesn't intercept the existing hero canvas
     drag interaction. */
  .shader-hero { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .shader-hero > div { position: absolute; inset: 0; }
  .shader-hero canvas { width: 100% !important; height: 100% !important; display: block; }

  /* Three.js morphing-curve hero is now a FALLBACK only. Hidden by default;
     restored if the shader fails to load (body.shader-failed class set in
     the catch block of the shader IIFE). This avoids the previous flash
     where users briefly saw the Three.js icons before the shader mounted. */
  #hero-canvas { display: none; }
  body.shader-failed #hero-canvas { display: block; }

  .hero {
    position: relative; min-height: 100vh;
    /* Static gradient that approximates the warm-orange Paper Shaders mesh
       below. Visible during the ~150ms before the shader mounts, and as a
       graceful fallback if esm.sh ever fails. Same five colours as the
       shader palette so there's no jarring transition when it kicks in. */
    background:
      radial-gradient(ellipse at 70% 20%, #FF8A4C 0%, transparent 55%),
      radial-gradient(ellipse at 20% 80%, #8B3A12 0%, transparent 60%),
      radial-gradient(ellipse at 90% 90%, #EA652C 0%, transparent 50%),
      linear-gradient(135deg, #3D1A0A 0%, #8B3A12 100%);
    color: var(--paper);
    display: flex; align-items: center; overflow: hidden;
    isolation: isolate; cursor: grab;
    user-select: none; -webkit-user-select: none; -moz-user-select: none;
  }
  /* Mobile (< 600px): Three.js morph canvas stays hidden (no horsepower for
     it on phones), but the Paper Shaders MeshGradient runs on mobile too —
     it's GPU-cheap and adds real motion to the hero, which is the entire
     point of having a shader instead of a static gradient. */
  @media (max-width: 599px) {
    #hero-canvas { display: none; }
    .hero { cursor: default; }
  }
  /* On mobile, hero can shrink to its content to avoid dead space below CTA */
  @media (max-width: 768px) { .hero { min-height: auto; padding-bottom: 24px; } }
  .hero, .hero * { user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -webkit-tap-highlight-color: transparent; }
  .hero ::selection, .hero *::selection { background: transparent; color: inherit; }
  .hero ::-moz-selection, .hero *::-moz-selection { background: transparent; color: inherit; }
  .hero.dragging { cursor: grabbing; }
  /* Canvas is intentionally offset to the right ~12% so the morph mark sits in the
     right third of the viewport — keeps it clear of the headline text on the left. */
  .hero canvas { position: absolute; left: 62%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: 0; opacity: 0.95; pointer-events: auto; touch-action: pan-y; }
  /* On mobile, no drag-to-rotate (would fight scroll). Tap still morphs shape. */
  @media (max-width: 768px) {
    .hero { cursor: default; }
    /* On mobile, the morph mark drops below the headline so it never overlaps text */
    .hero canvas { left: 50%; top: 70%; touch-action: pan-y; cursor: pointer; }
  }
  .hero-content { position: relative; z-index: 2; width: 100%; padding-top: 80px; padding-bottom: 120px; pointer-events: none; }
  .hero-content > * { pointer-events: auto; max-width: 100%; min-width: 0; box-sizing: border-box; }
  .hero-logo { margin-bottom: 64px; margin-left: -10px; pointer-events: auto; display: block; }
  .hero-logo img { height: 100px; width: auto; display: block; }
  @media (max-width: 1024px) { .hero-logo img { height: 84px; } }
  @media (max-width: 768px) {
    .hero-logo { margin-bottom: 40px; margin-left: -6px; }
    .hero-logo img { height: 64px; }
  }
  .hero-eyebrow {
    margin-bottom: 28px; color: var(--paper);
    /* Subtle text-shadow keeps the eyebrow legible when the morphing mark passes behind it */
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
    position: relative; z-index: 3;
  }
  .hero-display, .hero-lead { position: relative; z-index: 3; }
  .hero-display { margin-bottom: 28px; color: var(--paper); max-width: 13ch; }
  .hero-lead { margin-bottom: 48px; color: var(--paper); max-width: 56ch; }
  .hero.in .hero-eyebrow { opacity: 0.85 !important; }
  .hero.in .hero-lead { opacity: 0.95 !important; }
  @media (max-width: 768px) {
    .hero-display { font-size: clamp(36px, 11vw, 64px) !important; max-width: 11ch; margin-bottom: 20px; }
    .hero-lead {
      font-size: 14px !important; line-height: 1.55;
      max-width: 100%;
      box-sizing: border-box;
      overflow-wrap: anywhere;
      word-break: break-word;
      margin-bottom: 36px;
    }
    .hero-eyebrow { font-size: 10px !important; margin-bottom: 20px; }
  }
  @media (max-width: 480px) {
    .hero-display { font-size: clamp(32px, 11vw, 52px) !important; max-width: 100%; }
    .hero-cta { padding: 14px 24px !important; font-size: 12px !important; }
    .hero-lead { max-width: 100%; }
  }
  .hero-cta {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 18px 32px;
    background: rgba(0,0,0,0.85);
    color: var(--paper) !important;
    font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background var(--motion-default), transform var(--motion-default), padding var(--motion-default);
    border: 1px solid rgba(255,255,255,0.15);
  }
  .hero-cta:hover { background: var(--paper); color: var(--orange) !important; transform: translateY(-2px); padding-right: 40px; }
  .hero-cta svg { width: 14px; height: 14px; transition: transform var(--motion-default); }
  .hero-cta:hover svg { transform: translateX(6px); }
  .hero-3d-hint {
    position: absolute; bottom: 32px; right: var(--margin); z-index: 2;
    color: var(--paper); opacity: 0.6;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    pointer-events: none;
  }
  @media (max-width: 768px) {
    .hero-content { padding-top: 110px; padding-bottom: 64px; }
    .hero-3d-hint { display: none; }
  }
  @media (max-width: 480px) {
    .hero-content { padding-top: 100px; padding-bottom: 56px; }
  }

  section.section { padding: 128px 0; position: relative; }
  @media (max-width: 768px) { section.section { padding: 64px 0; } }
  @media (max-width: 480px) { section.section { padding: 48px 0; } }

  /* ──────────── PROMISE ──────────── */
  .promise { background: var(--paper); }
  .promise-eyebrow { color: var(--orange); margin-bottom: 28px; }
  .promise-display {
    font-weight: 900;
    font-size: clamp(36px, 5.5vw, 80px);
    letter-spacing: -0.04em; line-height: 0.98;
    color: var(--ink); max-width: 18ch;
  }
  .promise-display .accent { color: var(--orange); display: inline-block; }
  .promise-display span.word {
    display: inline-block; opacity: 0; transform: translateY(40px);
    transition: opacity 700ms var(--easing-enter), transform 700ms var(--easing-enter);
  }
  .promise.in-view .promise-display span.word { opacity: 1; transform: translateY(0); }
  .promise.in-view .promise-display span.word:nth-child(1) { transition-delay: 0ms; }
  .promise.in-view .promise-display span.word:nth-child(2) { transition-delay: 100ms; }
  .promise.in-view .promise-display span.word:nth-child(3) { transition-delay: 250ms; }
  .promise.in-view .promise-display span.word:nth-child(4) { transition-delay: 350ms; }
  .promise.in-view .promise-display span.word:nth-child(5) { transition-delay: 450ms; }
  .promise.in-view .promise-display span.word:nth-child(6) { transition-delay: 550ms; }
  .promise.in-view .promise-display span.word:nth-child(7) { transition-delay: 650ms; }
  .promise-divider {
    width: 0; height: 4px; background: var(--orange);
    margin: 56px 0 28px;
    transition: width 1000ms 700ms var(--easing-enter);
  }
  .promise.in-view .promise-divider { width: 88px; }
  .promise-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 900px; }
  @media (max-width: 768px) {
    .promise-meta { grid-template-columns: 1fr 1fr; gap: 24px; }
    .promise-display { font-size: clamp(32px, 9vw, 60px) !important; }
  }
  @media (max-width: 480px) { .promise-meta { grid-template-columns: 1fr; gap: 20px; } }
  .promise-meta-item .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
  .promise-meta-item .val { font-size: 15px; font-weight: 500; color: var(--ink-soft); line-height: 1.5; }

  /* ──────────── CLIENTS ──────────── */
  .clients { background: var(--paper-soft); padding: 56px 0; border-top: 1px solid var(--grey-100); border-bottom: 1px solid var(--grey-100); }
  .clients-label { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-600); margin-bottom: 28px; }
  .clients-strip { display: flex; justify-content: center; align-items: center; gap: 64px; flex-wrap: wrap; }
  .clients-strip a { transition: transform var(--motion-default), filter var(--motion-default); filter: grayscale(0.5); opacity: 0.85; }
  .clients-strip a:hover { transform: scale(1.05); filter: grayscale(0); opacity: 1; }
  .clients-strip img { height: 56px; width: auto; display: block; }

  /* ──────────── LAYERS ──────────── */
  .layers { background: var(--ink); color: var(--paper); padding: 128px 0; position: relative; overflow: hidden; }
  /* Three.js scene canvas — 4 floating wireframe shapes (cube/torus/cone/icosahedron)
     + 150 orange particles, gated by IntersectionObserver so it only renders 60fps when
     the section is actually in the viewport. Lazy-init: scene constructed on first
     intersection so initial page load isn't blocked. */
  .layers-canvas-wrap { position: absolute; inset: 0; z-index: 0; }
  .layers-canvas-wrap canvas { width: 100% !important; height: 100% !important; opacity: 0.5; }
  .layers-content { position: relative; z-index: 2; }
  .layers-eyebrow { color: var(--orange); margin-bottom: 24px; }
  .layers-h2 { color: var(--paper); margin-bottom: 16px; max-width: 28ch; }
  .layers-lead { color: var(--grey-300); max-width: 50ch; margin-bottom: 56px; }
  .layers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
  @media (max-width: 1024px) { .layers-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .layers-grid { grid-template-columns: 1fr; gap: 12px; } .layer-card { min-height: 200px; padding: 20px; } .layer-card .name { font-size: 28px; } }

  .layer-card {
    padding: 28px 24px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 480ms ease-out, border-color 320ms ease-out, transform 320ms ease-out, padding 480ms ease-out;
    cursor: pointer; position: relative; overflow: hidden;
    min-height: 240px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .layer-card.active { padding-bottom: 32px; }
  .layer-card::before {
    content: ''; position: absolute; inset: 0; background: var(--orange);
    transform: translateY(101%); transition: transform 480ms ease-out;
    z-index: 0;
  }
  .layer-card.active::before { transform: translateY(0); }
  .layer-card:hover { border-color: var(--orange); transform: translateY(-4px); }
  .layer-card.active:hover { transform: none; }
  .layer-card > * { position: relative; z-index: 2; }
  /* Card header: number + verb sit inline on one row, both orange. Replaces
     the previous vertical stack (num on top, verb below the layer name). */
  .layer-card .card-header {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 18px;
    transition: opacity 320ms ease-out;
  }
  .layer-card .num { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--orange); }
  .layer-card .verb { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); }
  .layer-card .verb::before { content: '·'; margin-right: 6px; opacity: 0.5; }
  .layer-card.active .num,
  .layer-card.active .verb { color: var(--paper); }
  .layer-card.active .verb::before { color: var(--paper); }
  .layer-card .name { font-size: 32px; font-weight: 900; letter-spacing: -0.025em; line-height: 1.0; color: var(--paper); margin: 6px 0 18px; }
  .layer-card .preview { font-size: 12px; font-weight: 500; line-height: 1.6; color: var(--grey-300); }
  .layer-card.active .preview { color: var(--paper); opacity: 0.85; }

  /* + sign drawn from two pseudo-elements — perfect optical centering */
  .layer-card .expand-hint {
    position: absolute; right: 20px; bottom: 20px;
    width: 28px; height: 28px;
    border: 1px solid currentColor; color: var(--grey-300);
    z-index: 3;
    transition: color 280ms ease-out, border-color 280ms ease-out, transform 380ms ease-out;
    font-size: 0;
  }
  .layer-card .expand-hint::before,
  .layer-card .expand-hint::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    background: currentColor;
    transition: background 280ms ease-out;
  }
  .layer-card .expand-hint::before {
    width: 12px; height: 1.5px;
    transform: translate(-50%, -50%);
  }
  .layer-card .expand-hint::after {
    width: 1.5px; height: 12px;
    transform: translate(-50%, -50%);
  }
  .layer-card.active .expand-hint { color: var(--paper); border-color: var(--paper); transform: rotate(45deg); }
  .layer-card:hover .expand-hint { color: var(--orange); border-color: var(--orange); }
  .layer-card.active:hover .expand-hint { color: var(--paper); border-color: var(--paper); }

  /* Hybrid expansion: container grows fast (grid-rows trick) but each .svc
     item also fades + slides up in a stagger. The combination breaks the
     "fill from top to bottom" perception — the eye tracks the items
     appearing one after another, not a wave of text filling a box. */
  .layer-services {
    display: grid;
    grid-template-rows: 0fr;
    transition:
      grid-template-rows 320ms cubic-bezier(0.16, 1, 0.3, 1),
      margin-top 320ms cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 0;
  }
  .layer-services > .layer-services-inner {
    overflow: hidden;
    min-height: 0;
  }
  .layer-services .svc {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 240ms ease-out, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .layer-card.active .layer-services {
    grid-template-rows: 1fr;
    margin-top: 18px;
  }
  .layer-card.active .layer-services .svc {
    opacity: 1;
    transform: translateY(0);
  }
  .layer-card.active .layer-services .svc:nth-child(1) { transition-delay: 80ms; }
  .layer-card.active .layer-services .svc:nth-child(2) { transition-delay: 140ms; }
  .layer-card.active .layer-services .svc:nth-child(3) { transition-delay: 200ms; }
  .layer-services .svc { padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.18); }
  .layer-services .svc:last-child { border-bottom: 1px solid rgba(255,255,255,0.18); }
  .layer-services .svc .s-name { font-size: 14px; font-weight: 700; color: var(--paper); margin-bottom: 4px; }
  .layer-services .svc .s-desc { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.75); }

  /* Expand inline (no grid-column shift) for buttery-smooth opening */
  /* Keep name size constant when expanded — was font-size: 36px (jarring resize) */

  /* (Dead .about-* CSS removed 2026-05-11 — the matching <section> was pulled
     from index.html when /about was abandoned. Re-add styles if the section
     is ever restored to the homepage.) */

  /* ──────────── WORK ──────────── */
  .work { background: var(--paper-soft); padding: 56px 0 96px; border-top: 1px solid var(--grey-100); }
  @media (max-width: 800px) { .work { padding: 40px 0 64px; } }
  .work-eyebrow { color: var(--orange); margin-bottom: 24px; }
  .work-h2 { color: var(--ink); margin-bottom: 56px; max-width: 28ch; }
  /* Work grid auto-fits cards. Currently 1 card (Creodi launch); when more case
     studies are added, cards will lay out 2- or 3-up automatically up to 360px each. */
  .work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 420px)); gap: 28px; }
  @media (max-width: 600px) { .work-grid { grid-template-columns: 1fr; gap: 20px; } .work-card .img-wrap { aspect-ratio: 16 / 10; } }
  .work-card { cursor: pointer; transition: transform var(--motion-default) var(--easing-enter); display: block; }
  .work-card:hover { transform: translateY(-6px); }
  .work-card .img-wrap {
    aspect-ratio: 4 / 3;
    background: var(--grey-50);
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
  }
  .work-card .img-wrap img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--easing-power);
  }
  .work-card:hover .img-wrap img { transform: scale(1.04); }
  /* Default: image (or placeholder gradient) — no overlay text */
  .work-card .img-wrap .placeholder {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #2E2E2E 0%, #6A6A64 100%);
    transition: opacity var(--motion-default);
  }
  /* Hover overlay: dark gradient + brand name + single external-link icon */
  .work-card .img-wrap .hover-overlay {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.85) 100%);
    opacity: 0;
    transition: opacity 360ms var(--easing-power);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
  }
  .work-card:hover .img-wrap .hover-overlay { opacity: 1; }
  .work-card .img-wrap .hover-overlay .brand-name {
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--paper);
    transform: translateY(12px);
    transition: transform 400ms var(--easing-power) 80ms;
  }
  .work-card:hover .img-wrap .hover-overlay .brand-name { transform: translateY(0); }
  .work-card .img-wrap .ext-icon {
    position: absolute; top: 16px; right: 16px;
    z-index: 3;
    width: 36px; height: 36px;
    background: var(--orange);
    color: var(--paper);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: scale(0.7) rotate(-30deg);
    transition: opacity 360ms, transform 400ms var(--easing-power);
  }
  .work-card:hover .img-wrap .ext-icon {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  .work-card .img-wrap .ext-icon svg { width: 14px; height: 14px; }
  .work-card .meta { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-600); margin-bottom: 6px; }
  .work-card .title { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 6px; line-height: 1.25; }
  .work-card .summary { font-size: 13px; color: var(--grey-600); line-height: 1.55; }

  /* ──────────── PROCESS ──────────── */
  .process { background: var(--paper-soft); padding: 128px 0; position: relative; overflow: hidden; }
  .process-eyebrow { color: var(--orange); margin-bottom: 24px; }
  .process-h2 { color: var(--ink); margin-bottom: 16px; max-width: 28ch; }
  .process-lead { color: var(--grey-600); max-width: 56ch; margin-bottom: 64px; }

  .process-stack { display: flex; flex-direction: column; gap: 0; max-width: 1080px; }
  .process-row {
    border-top: 1px solid var(--grey-100);
    cursor: pointer;
    overflow: hidden;
    transition: background var(--motion-default);
  }
  .process-row:last-child { border-bottom: 1px solid var(--grey-100); }
  .process-row:hover { background: rgba(234, 101, 44, 0.03); }
  .process-row.active { background: var(--paper); border-top-color: var(--orange); border-top-width: 2px; }
  .process-row-head {
    display: grid;
    /* Always 4 columns: number, icon, title, toggle. Icon column stays
       reserved even when the row is collapsed so the title alignment never
       shifts when a row opens or closes. */
    grid-template-columns: 48px 32px 1fr 20px;
    align-items: center;
    gap: 14px;
    padding: 8px 20px;
    transition: padding-left var(--motion-default);
  }
  .process-row.active .process-row-head {
    padding-left: 32px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  @media (max-width: 600px) {
    .process-row-head { padding: 8px 16px; gap: 10px; grid-template-columns: 32px 24px 1fr 18px; }
    .process-row.active .process-row-head { padding-top: 12px; padding-bottom: 12px; }
    .process-row-head .step-num { font-size: 17px !important; }
    .process-row-head .step-name { font-size: 16px !important; }
    .step-icon { width: 20px !important; height: 20px !important; }
  }
  .process-row:hover .process-row-head { padding-left: 32px; }
  /* Inline step icon — always visible next to the title. Grey when the row
     is collapsed, orange when the row is hovered or active. Replaces the
     old big-icon column that lived in the body. */
  .step-icon {
    display: block;
    width: 26px; height: 26px;
    color: var(--grey-300);
    transition: color 320ms ease;
  }
  .process-row:hover .step-icon { color: var(--orange); }
  .process-row.active .step-icon { color: var(--orange); }
  .process-row-head .step-num {
    font-size: clamp(20px, 2vw, 26px); font-weight: 900;
    color: var(--grey-300); letter-spacing: -0.04em; line-height: 1.0;
    transition: color var(--motion-default), transform var(--motion-default);
  }
  .process-row-head .step-name {
    font-size: clamp(16px, 1.5vw, 18px); font-weight: 700;
    letter-spacing: -0.02em; color: var(--ink-soft);
    transition: color var(--motion-default);
  }
  .process-row-head .step-toggle { width: 18px; height: 18px; color: var(--grey-300); transition: color var(--motion-default), transform 360ms var(--easing-power); }
  .process-row:hover .step-num { color: var(--orange); transform: translateX(2px); }
  .process-row:hover .step-name { color: var(--ink); }
  .process-row:hover .step-toggle { color: var(--orange); }
  .process-row.active .step-num { color: var(--orange); }
  .process-row.active .step-name { color: var(--ink); }
  .process-row.active .step-toggle { color: var(--orange); transform: rotate(45deg); }
  /* Same staggered-reveal pattern as the layer services — container expands
     via grid-rows, each child slides + fades in with a small stagger so it
     reads as content "settling into place" rather than filling top-down. */
  .process-row-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 360ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .process-row.active .process-row-body {
    grid-template-rows: 1fr;
  }
  /* Icon moved out of the body and into the head (.step-icon) above, so the
     body content grid is now two columns: description (with meta box on
     right side) on top, principles full-width below. */
  .process-row-content {
    display: grid;
    grid-template-columns: 1fr 240px;
    grid-template-areas:
      "desc meta"
      "principles principles";
    gap: 20px 32px;
    padding: 4px 24px 28px 24px;
    align-items: start;
    overflow: hidden;
    min-height: 0;
  }
  .process-row-content > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 260ms ease-out, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .process-row.active .process-row-content > * {
    opacity: 1;
    transform: translateY(0);
  }
  .process-row.active .process-row-content > *:nth-child(1) { transition-delay: 100ms; }
  .process-row.active .process-row-content > *:nth-child(2) { transition-delay: 150ms; }
  .process-row.active .process-row-content > *:nth-child(3) { transition-delay: 200ms; }
  .process-row-content > .step-desc { grid-area: desc; }
  .process-row-content > .process-row-meta { grid-area: meta; }
  .process-row-content > .process-row-principles { grid-area: principles; }
  .process-row-principles {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--grey-100);
  }
  .prl-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--orange);
    margin-bottom: 14px;
  }
  .prl-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
  .prl-item {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 14px; line-height: 1.55; color: var(--ink-soft);
  }
  .prl-item strong { color: var(--ink); font-weight: 700; }
  .prl-dot {
    flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--orange); margin-top: 7px;
  }
  @media (max-width: 800px) {
    .process-row-content {
      grid-template-columns: 1fr;
      grid-template-areas: "desc" "meta" "principles";
      padding: 4px 24px 28px 24px;
    }
    .prl-list { grid-template-columns: 1fr; }
  }
  .process-row-body .step-desc {
    font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 56ch;
  }
  .process-row-meta {
    padding: 16px 18px;
    background: var(--paper-soft);
    border-left: 3px solid var(--orange);
    font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--grey-600);
    line-height: 1.6;
  }
  .process-row-meta .v { font-weight: 700; color: var(--ink); display: block; margin-bottom: 6px; }
  .process-detail::before { content: ''; position: absolute; top: 0; left: 0; height: 4px; width: 0; background: var(--orange); animation: detailBar 700ms var(--easing-power) forwards; }
  @keyframes detailBar { to { width: 100%; } }
  .process-detail .d-icon { width: 56px; height: 56px; color: var(--orange); margin-bottom: 24px; }
  .process-detail .d-icon svg { width: 100%; height: 100%; }
  .process-detail .d-meta { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }
  .process-detail .d-title { font-size: clamp(26px, 2.8vw, 36px); font-weight: 900; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 16px; line-height: 1.05; }
  .process-detail .d-desc { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 24px; max-width: 56ch; }
  .process-detail .d-deliverable { padding-top: 20px; border-top: 1px solid var(--grey-100); display: flex; gap: 32px; flex-wrap: wrap; }
  .process-detail .d-deliverable > div { font-size: 12px; }
  .process-detail .d-deliverable .lbl { font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-600); margin-bottom: 4px; }
  .process-detail .d-deliverable .val { font-weight: 600; color: var(--ink); }

  /* ──────────── NOSCRIPT FALLBACK (shown only when JS is disabled or blocked) ──────────── */
  .noscript-fallback {
    grid-column: 1 / -1;
    padding: 18px 22px; margin-bottom: 16px;
    background: var(--paper-soft);
    border-left: 3px solid var(--orange);
    font-size: 14px; line-height: 1.55; color: var(--ink);
  }
  .noscript-fallback strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 700; }
  .noscript-fallback a { color: var(--orange); font-weight: 700; }
  .noscript-mailing { background: rgba(255,255,255,0.10); color: var(--paper); }
  .noscript-mailing strong { color: var(--paper); }
  .noscript-mailing a { color: var(--orange); }

  /* ──────────── ANTI-SPAM HONEYPOT (visually hidden, accessible name only) ──────────── */
  .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .cf-turnstile { margin: 8px 0 16px; min-height: 65px; }
  /* On forms with grid layout, the Turnstile widget should span the full width */
  .contact-form .cf-turnstile { grid-column: 1 / -1; }
  /* Mailing form Turnstile (dark theme to match the dark mailing-section background) */
  .mailing-turnstile { margin-top: 14px; max-width: 100%; }
  /* Inline form status — no more alert() popups */
  .form-status {
    grid-column: 1 / -1;
    margin-top: 12px; padding: 14px 18px;
    font-size: 14px; line-height: 1.5; font-weight: 600;
    border-left: 3px solid var(--orange);
    background: var(--paper-soft);
    transition: opacity 360ms;
  }
  .form-status.success { border-left-color: var(--orange); color: var(--ink); }
  .form-status.error { border-left-color: #b94a3a; color: #b94a3a; background: #fdf2f0; }
  .mailing-form .form-status { background: rgba(255,255,255,0.10); color: var(--paper); border-left-color: var(--paper); }
  .mailing-form .form-status.error { color: #ffd6cf; }

  /* ──────────── CONTACT ──────────── */
  .contact { background: var(--paper); color: var(--ink); padding: 128px 0; position: relative; overflow: hidden; border-top: 4px solid var(--orange); }

  .contact > .container { position: relative; z-index: 2; }
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "intro form"
      "direct form";
    gap: 24px 56px;
    align-items: start;
  }
  .contact-intro { grid-area: intro; }
  .contact-form { grid-area: form; }
  .contact-direct { grid-area: direct; }
  @media (max-width: 900px) {
    .contact-grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        "intro"
        "form"
        "direct";
      gap: 24px;
    }
  }
  @media (max-width: 700px) {
    .contact-form { grid-template-columns: 1fr !important; }
    .field, .field.full { grid-column: 1 / -1 !important; }
    .contact-submit { grid-column: 1 / -1 !important; padding: 16px 24px !important; }
    .contact-display { font-size: clamp(32px, 9vw, 48px) !important; }
    .field textarea { min-height: 130px !important; height: 130px !important; }
    .contact-form { gap: 8px !important; }
  }
  .contact-eyebrow { color: var(--orange); margin-bottom: 24px; }
  .contact-display { font-weight: 900; font-size: clamp(36px, 5.5vw, 68px); letter-spacing: -0.04em; line-height: 0.98; color: var(--ink); max-width: 14ch; margin-bottom: 28px; }
  .contact-display .accent { color: var(--orange); }
  .contact-lead { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: var(--ink-soft); max-width: 50ch; margin-bottom: 32px; }
  .contact-direct { padding-top: 24px; border-top: 1px solid var(--grey-100); }
  .contact-direct .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-600); margin-bottom: 6px; }
  .contact-direct a { font-size: 17px; font-weight: 600; color: var(--ink); }
  .contact-direct a:hover { color: var(--orange); }

  .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .field { position: relative; grid-column: span 1; }
  .field.full { grid-column: span 2; }
  .field input, .field textarea {
    width: 100%;
    padding: 26px 18px 10px 18px;
    background: var(--paper-soft);
    border: 1px solid var(--grey-100);
    color: var(--ink);
    font-size: 14px; font-weight: 500;
    transition: background var(--motion-fast), border-color var(--motion-fast);
  }
  .field textarea { min-height: 140px; height: 140px; resize: none; padding: 30px 18px 38px 18px; }
  .field input::placeholder, .field textarea::placeholder { color: transparent; }
  .field input:focus, .field textarea:focus { outline: none; background: var(--paper); border-color: var(--orange); }
  .field label { position: absolute; left: 18px; top: 18px; pointer-events: none; font-size: 14px; font-weight: 500; color: var(--grey-600); transition: all 240ms var(--easing-power); }
  .field input:focus ~ label,
  .field input:not(:placeholder-shown) ~ label,
  .field textarea:focus ~ label,
  .field textarea:not(:placeholder-shown) ~ label {
    top: 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange);
  }
  .field .req { color: var(--orange); margin-left: 2px; }
  .field .opt { font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-300); margin-left: 6px; }
  .field .counter {
    position: absolute; right: 14px; bottom: 10px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--grey-600);
    background: var(--paper);
    padding: 3px 8px;
    pointer-events: none;
  }
  .field .counter.warn { color: var(--paper); background: var(--orange); }
  /* min-width locks the button width so swapping 'Send message' → '✓ Message sent'
     doesn't shift the layout. Same pattern on the mailing submit below. */
  .contact-submit { grid-column: span 2; padding: 18px 32px; min-width: 220px; background: var(--orange); color: var(--paper); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background var(--motion-fast), transform var(--motion-fast); border: none; cursor: pointer; }
  .contact-submit:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); }

  /* ──────────── MAILING LIST ──────────── */
  /* Higher specificity (section.section wins over .mailing) — explicit element + class */
  section.mailing { background: var(--ink); color: var(--paper); padding: 64px 0 32px; position: relative; overflow: hidden; }
  @media (max-width: 800px) { section.mailing { padding: 40px 0 20px; } }
  /* Contact section: tighten bottom padding so Send Message doesn't sit alone in dead space */
  section.contact { padding-bottom: 64px; }
  @media (max-width: 700px) { section.contact { padding-bottom: 32px; padding-top: 64px; } }
  /* Tighten gap between message field and submit button — was driven by
     turnstile widget reservation + form gap. Reduced gap and used a tight
     min-height on cf-turnstile container so the button sits closer. */
  .contact-form .cf-turnstile { min-height: 0; margin: 4px 0 4px; }
  .contact-form { gap: 8px; }
  @media (min-width: 701px) { .contact-form { gap: 10px; } }
  /* Top-align so the input row sits next to the H2, not the eyebrow above
     it. padding-top below pushes the row down past the eyebrow space. End
     result: top of email box visually lines up with top of "From the studio
     floor" — and the row stays put when subscribed (since the form expands
     below the row, never above). */
  .mailing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  @media (max-width: 800px) { .mailing-grid { grid-template-columns: 1fr; gap: 32px; } }
  /* Newsletter form is borderless on all viewports now (was box). */
  .mailing-eyebrow { color: var(--orange); margin-bottom: 20px; }
  .mailing-h2 { color: var(--paper); margin-bottom: 14px; }
  .mailing-lead { color: var(--grey-300); line-height: 1.55; }
  .mailing-form {
    display: flex; flex-direction: column; gap: 12px; padding: 0;
    background: transparent; border: 0;
    /* eyebrow (11px × line-height 1.2) + 20px margin-bottom ≈ 33px */
    padding-top: 33px;
  }
  @media (max-width: 800px) { .mailing-form { padding-top: 0; } }
  /* When subscribed, hide turnstile via visibility:hidden (not display:none)
     so the form's vertical structure doesn't collapse — the row above stays
     anchored to its position. The hp-field + hidden inputs are zero-height
     and can be display:none safely. */
  .mailing-form[data-subscribed] .cf-turnstile,
  .mailing-form[data-subscribed] .form-status { visibility: hidden; }
  .mailing-form[data-subscribed] .hp-field,
  .mailing-form[data-subscribed] input[type="hidden"] { display: none; }
  /* Hide turnstile + status + hidden fields in sent state. We use visibility
     instead of display so the container keeps reserving vertical space —
     prevents the SEND MESSAGE button from jumping up when the form transitions
     to 'sent', and back down when the user starts typing again. */
  .contact-form[data-sent] .cf-turnstile,
  .contact-form[data-sent] .form-status { visibility: hidden; }
  .contact-form[data-sent] .hp-field,
  .contact-form[data-sent] input[type="hidden"] { display: none; }
  /* Success-state styling on submit buttons (in-place text swap, button keeps its size) */
  .mailing-submit[data-success="true"],
  .contact-submit[data-success="true"] {
    background: var(--orange) !important;
    color: var(--paper) !important;
    cursor: default;
    opacity: 1;
  }
  .mailing-submit[data-success="true"]:hover,
  .contact-submit[data-success="true"]:hover { transform: none; }
  .submit-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    background: var(--paper); color: var(--orange);
    border-radius: 999px;
    font-size: 12px; font-weight: 800;
    margin-right: 8px;
    vertical-align: middle;
    line-height: 1;
  }
  .subscribed-pill {
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: var(--orange);
    color: var(--paper);
    font-weight: 700; font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: 100%;
  }
  .subscribed-pill .check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    background: var(--paper); color: var(--orange);
    border-radius: 999px;
    font-size: 14px; font-weight: 800;
  }

  /* Touch devices: kill sticky :hover state that lingers after a tap */
  @media (hover: none) {
    .layer-card:hover { transform: none; border-color: var(--grey-100); }
    .layer-card:hover .expand-hint { color: inherit; border-color: inherit; }
    .layer-card.active:hover .expand-hint { color: var(--paper); border-color: var(--paper); }
    .process-row:hover { background: transparent; }
    .process-row:hover .process-row-head { padding-left: 24px; }
    .process-row:hover .step-num { color: inherit; transform: none; }
    .process-row:hover .step-name { color: inherit; }
    .process-row:hover .step-toggle { color: inherit; }
    .nav-link:hover { color: inherit; text-decoration: none; }
    .nav-cta:hover { background: var(--ink) !important; transform: none; }
    .hero-cta:hover { background: var(--ink); color: var(--paper) !important; transform: none; padding-right: 24px; }
    .hero-cta:hover svg { transform: none; }
    .contact-submit:hover { background: var(--orange); transform: none; }
  }

  /* CTA buttons: don't keep their hover/focus state visible after tap.
     Pairs with the JS that calls .blur() right after click. */
  .hero-cta:focus:not(:focus-visible),
  .contact-submit:focus:not(:focus-visible),
  .mailing-submit:focus:not(:focus-visible),
  .nav-cta:focus:not(:focus-visible) { outline: none; }
  .mailing-form .row { display: flex; gap: 10px; }
  .mailing-input { flex: 1; padding: 16px 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: var(--paper); font-size: 14px; font-weight: 500; transition: background var(--motion-fast), border-color var(--motion-fast); }
  .mailing-input::placeholder { color: rgba(255,255,255,0.5); }
  .mailing-input:focus { outline: none; background: rgba(255,255,255,0.12); border-color: var(--orange); }
  /* Width must accommodate the longest possible label across all states:
     'Subscribe' (~9ch), 'Subscribing…' (~13ch), '✓ Subscribed' (~12ch + icon).
     Setting an explicit width (not just min-width) prevents reflow on text swap. */
  .mailing-submit { padding: 16px 28px; width: 200px; flex: 0 0 200px; background: var(--orange); color: var(--paper); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background var(--motion-fast), transform var(--motion-fast); white-space: nowrap; }
  .mailing-submit:hover { background: var(--paper); color: var(--orange); transform: translateY(-1px); }
  /* Mobile: stack the row vertically, button goes full width with auto
     height. MUST sit after the desktop rule above or the 200px width wins
     on source order. The previous override at this point had !important on
     width/flex but appeared BEFORE the default rule, so the cascade still
     resolved to 200px in the wrong direction. */
  @media (max-width: 600px) {
    .mailing-form .row { flex-direction: column; align-items: stretch; }
    .mailing-submit {
      width: 100% !important;
      flex: 0 0 auto !important;
      height: auto !important;
      max-height: 56px;
    }
  }

  /* ──────────── FOOTER ──────────── */
  footer.footer { background: var(--ink); color: var(--paper); padding: 32px 0 24px; }
  .footer-grid {
    display: grid; grid-template-columns: 1fr auto;
    gap: 32px; align-items: center;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--grey-900);
  }
  @media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; } }
  .footer-brand img { width: 110px; }
  @media (max-width: 700px) { .footer-brand { display: flex; justify-content: center; } }
  .footer-totop {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: none; padding: 0;
    color: var(--grey-300);
    font-size: 11px; font-weight: 500; letter-spacing: 0.05em;
    cursor: pointer; transition: color var(--motion-fast);
    font-family: inherit;
  }
  .footer-totop:hover { color: var(--orange); }
  .footer-totop svg { width: 10px; height: 10px; transition: transform var(--motion-default); }
  .footer-totop:hover svg { transform: translateY(-2px); }
  .footer-socials { display: flex; justify-content: flex-end; gap: 14px; flex-wrap: wrap; }
  @media (max-width: 700px) { .footer-socials { justify-content: center; } }
  .footer-socials a {
    width: 40px; height: 40px;
    border: 1px solid var(--grey-900);
    display: flex; align-items: center; justify-content: center;
    color: var(--grey-300);
    transition: all var(--motion-fast);
  }
  .footer-socials a:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }
  .footer-socials a svg { width: 16px; height: 16px; }
  .footer-bottom {
    padding-top: 24px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; font-weight: 500; letter-spacing: 0.05em; color: var(--grey-300);
  }
  .footer-bottom .legal { display: flex; gap: 20px; }
  .footer-bottom .legal a { color: var(--grey-300); }
  .footer-bottom .legal a:hover { color: var(--orange); }
  .footer-tagline { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); opacity: 0.9; }
  @media (max-width: 600px) { .footer-bottom { flex-direction: column; gap: 12px; text-align: center; align-items: center; } }

  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--easing-enter), transform 800ms var(--easing-enter); }
  .reveal.in { opacity: 1; transform: translateY(0); }

  .noise-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 1000;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
  }

  .scroll-progress {
    position: fixed; top: 0; left: 0;
    height: 2px; background: var(--orange);
    z-index: 200; transform-origin: left;
    transform: scaleX(0); transition: transform 100ms linear;
  }