:root {
    --paper: #F5F6F9;
    --paper-raised: #FFFFFF;
    --paper-alt: color-mix(in srgb, var(--paper) 92%, var(--brick) 8%);
    --ink: #1A2130;
    --ink-soft: #4C5568;
    --slate: #78808F;
    --line: #E4E5EC;
    --line-strong: #CBCDDA;
    --brick: #4E4FCB;
    --brick-tint: #E6E4FB;
    --steel: #3F6ACB;
    --steel-tint: #E4EAF8;
    --focus: #4E4FCB;
    --card-shadow: 0 1px 2px rgba(26,33,48,.05), 0 14px 40px -20px rgba(26,33,48,.22);

    --f-display: 'Bricolage Grotesque', 'Archivo', -apple-system, system-ui, sans-serif;
    --f-body: 'Archivo', -apple-system, system-ui, sans-serif;

    --step--1: 0.8rem;
    --step-0: 1.0625rem;
    --step-1: 1.33rem;
    --step-2: 1.7rem;
    --step-3: clamp(1.5rem, 1.1rem + 2.6vw, 2.55rem);
    --step-4: clamp(2.5rem, 1.8rem + 3.2vw, 3.9rem);
    --step-5: clamp(2.1rem, 1.5rem + 4vw, 4.6rem);

    --maxw: 1140px;
    --pad: clamp(20px, 5vw, 72px);
    --measure: 64ch;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #12141C;
      --paper-raised: #1A1E29;
      --ink: #ECEEF4;
      --ink-soft: #AEB5C3;
      --slate: #7E8797;
      --line: #272C3A;
      --line-strong: #3B4254;
      --brick: #9E97F4;
      --brick-tint: #262348;
      --steel: #8FAEEA;
      --steel-tint: #1E2740;
      --focus: #9E97F4;
      --card-shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 44px -24px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"] {
    --paper: #12141C;
    --paper-raised: #1A1E29;
    --ink: #ECEEF4;
    --ink-soft: #AEB5C3;
    --slate: #7E8797;
    --line: #272C3A;
    --line-strong: #3B4254;
    --brick: #9E97F4;
    --brick-tint: #262348;
    --steel: #8FAEEA;
    --steel-tint: #1E2740;
    --focus: #9E97F4;
    --card-shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 44px -24px rgba(0,0,0,.6);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: var(--step-0);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    font-synthesis: none;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }

  h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
  p { margin: 0; }
  a { color: inherit; }
  img { display: block; max-width: 100%; }
  ::selection { background: var(--brick); color: #fff; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

  .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
  .band { padding-block: clamp(60px, 10vw, 130px); }
  .band:nth-of-type(even) { background: var(--paper-alt); }

  .kicker {
    font-family: var(--f-body);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.19em;
    font-weight: 600;
    color: var(--brick);
    display: flex; align-items: center; gap: 0.8em;
    margin: 0 0 1.5rem;
  }
  .kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; }

  .section-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); max-width: 42ch; }
  .section-head h2 { font-size: var(--step-3); }

  .lead { font-size: var(--step-1); color: var(--ink-soft); max-width: 46ch; line-height: 1.5; }
  .prose { max-width: var(--measure); color: var(--ink-soft); }
  .prose + .prose { margin-top: 1.05rem; }

  /* buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 0.55em;
    font-family: var(--f-body); font-weight: 600; font-size: var(--step--1);
    letter-spacing: 0.04em; text-transform: uppercase;
    padding: 1em 1.6em; border: 1px solid transparent; cursor: pointer;
    text-decoration: none; border-radius: 2px;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  }
  .btn-primary {
    background: color-mix(in srgb, var(--brick) 82%, transparent);
    border-color: color-mix(in srgb, var(--brick) 55%, white 25%);
    backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
    color: #fff;
  }
  .btn-primary:hover { background: color-mix(in srgb, var(--brick) 95%, transparent); transform: translateY(-2px); }
  .btn:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
  .btn-ghost {
    background: color-mix(in srgb, var(--paper-raised) 55%, transparent);
    border-color: color-mix(in srgb, var(--line-strong) 65%, transparent);
    backdrop-filter: blur(9px) saturate(140%); -webkit-backdrop-filter: blur(9px) saturate(140%);
    color: var(--ink);
  }
  .btn-ghost:hover {
    background: color-mix(in srgb, var(--paper-raised) 80%, transparent);
    border-color: color-mix(in srgb, var(--brick) 55%, var(--line-strong));
    transform: translateY(-2px);
  }
  .btn .arw { transition: transform .18s ease; }
  .btn:hover .arw { transform: translateX(3px); }

  /* header */
  header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
  }
  header.scrolled { border-color: var(--line); }
  .nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.8rem; }
  .brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
  .monogram { width: auto; height: 46px; flex: none; display: block; }
  .brand b { font-weight: 700; font-size: 1.03rem; letter-spacing: -0.02em; font-family: var(--f-display); display: block; line-height: 1.15; }
  .brand span { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); font-weight: 600; }
  .nav-links {
    position: relative;
    display: flex; gap: 0.15rem; align-items: center; flex-wrap: nowrap;
    background: color-mix(in srgb, var(--paper-raised) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--line-strong) 65%, transparent);
    backdrop-filter: blur(9px) saturate(140%); -webkit-backdrop-filter: blur(9px) saturate(140%);
    border-radius: 999px; padding: 0.3rem;
  }
  .nav-indicator {
    position: absolute; z-index: 0; top: 0.3rem; left: 0; height: calc(100% - 0.6rem);
    width: 0; border-radius: 999px; background: var(--brick);
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--brick) 65%, transparent);
    opacity: 0; pointer-events: none;
    transition: transform .4s cubic-bezier(.34,1.2,.64,1), width .4s cubic-bezier(.34,1.2,.64,1), opacity .25s ease;
  }
  .nav-indicator.is-visible { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .nav-indicator { transition: opacity .25s ease; } }
  .nav-right { display: flex; gap: 0.6rem; align-items: center; flex: none; }
  @media (max-width: 1180px) { .nav-links { display: none; } }

  /* mobile menu */
  .menu-toggle {
    display: none; width: 40px; height: 40px; border-radius: 8px; flex: none;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    background: color-mix(in srgb, var(--paper-raised) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--line-strong) 65%, transparent);
    backdrop-filter: blur(9px) saturate(140%); -webkit-backdrop-filter: blur(9px) saturate(140%);
    color: var(--ink); cursor: pointer;
  }
  .menu-toggle .bar { width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
  .menu-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 0.6rem var(--pad) 1.3rem;
    background: color-mix(in srgb, var(--paper) 97%, transparent);
    backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .mobile-menu .menu-link {
    padding: 0.85em 0.1em; font-size: 1.02rem; font-weight: 600; color: var(--ink);
    text-decoration: none; border-bottom: 1px solid var(--line);
  }
  .mobile-menu .btn { margin-top: 0.8rem; justify-content: center; }
  @media (max-width: 1180px) {
    .nav-right .btn-primary { display: none; }
    .menu-toggle { display: flex; }
  }
  @media (min-width: 1181px) { .mobile-menu { display: none; } }
  @media (prefers-reduced-motion: reduce) { .mobile-menu { transition: none; } }

  /* pill tab-bar nav */
  .nav-links a {
    position: relative; z-index: 1;
    background: transparent; border: 1px solid transparent;
    color: var(--ink-soft);
    transition: background .22s ease, color .22s ease;
    padding: 0.5em 1.05em; border-radius: 999px; white-space: nowrap; flex: none;
    text-decoration: none; font-size: var(--step--1); font-weight: 600;
  }
  .nav-links a:hover {
    background: color-mix(in srgb, var(--paper-raised) 80%, transparent);
    color: var(--ink);
  }
  /* the active pill itself is the sliding .nav-indicator behind the text (see JS) */
  .nav-links a.active { color: #fff; }
  .nav-links a.active:hover { background: transparent; color: #fff; }

  /* header entrance, on page load: nav links drop in from above one after another; theme toggle rises from below and the CTA slides in from the right, landing together */
  @keyframes navDropIn {
    0% { opacity: 0; transform: translateY(-22px); }
    60% { opacity: 1; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  @keyframes navRiseInTop {
    /* animates `top` rather than `transform` — .theme-toggle already juggles
       transform for hover/active/icon-swap, and animating transform here too
       left the entrance stuck mid-flight in testing; `top` (it already has
       position:relative) sidesteps that entirely. */
    0% { opacity: 0; top: 22px; }
    60% { opacity: 1; top: -4px; }
    100% { opacity: 1; top: 0; }
  }
  @keyframes navSlideInRight {
    0% { opacity: 0; transform: translateX(28px); }
    60% { opacity: 1; transform: translateX(-5px); }
    100% { opacity: 1; transform: translateX(0); }
  }
  .nav-links a { animation: navDropIn .6s cubic-bezier(.34,1.56,.64,1) backwards; }
  .nav-links a:nth-of-type(1) { animation-delay: .05s; }
  .nav-links a:nth-of-type(2) { animation-delay: .15s; }
  .nav-links a:nth-of-type(3) { animation-delay: .25s; }
  .nav-links a:nth-of-type(4) { animation-delay: .35s; }
  .nav-links a:nth-of-type(5) { animation-delay: .45s; }
  .theme-toggle { animation: navRiseInTop .6s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay: .55s; }
  .nav-right .btn-primary { animation: navSlideInRight .6s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay: .55s; }
  @media (prefers-reduced-motion: reduce) {
    .nav-links a, .theme-toggle, .nav-right .btn-primary { animation: none; }
  }

  /* theme toggle: icon_empty.png tile with sun/moon swapping inside */
  .theme-toggle {
    position: relative; overflow: hidden; isolation: isolate;
    width: 40px; height: 40px; border-radius: 10px;
    display: block; border: 0; padding: 0; cursor: pointer; flex: none;
    background: url('data:image/webp;base64,UklGRrgEAABXRUJQVlA4WAoAAAAQAAAAdwAAcgAAQUxQSL0CAAABCaVtG0H94O0/cssOR/R/AmzWmaROT7mk88QQEiT4f7w1IlJ31ESSFM2hgBQD+DeCnf/Z6IqIPGICktJt26atZ8x9zo1tm0WrlFL+ge2kaidVJzXbtu2kZNu2+e5ZM3gI3mwvxYiYAMJ3A7D6asvNT2uUoVBHCdsSPVWgNjE0GXUql1qnKkByWa4Oa9SGwZ5ofdfKlGiifvzgrQ+haWDGrWCrU6+8bjExS9eXrz10wxM0zcSYbY47YNPFVYUwAk8lwNMQ/jdoEgs8RWvgW05+pDQ9g3X22JxhYkD8N62pDOJvNODqGhctgaaFbDMm6JuY5cfqN1uVaScRFgk9wbKLTyXogqOJkI15v5tMUFT4SXzwWitwe+PFzg6CefA7jH67DBPV4jIkLvq4ryxU/8DDrfvmmGbSNh9CnXdPP44zbsc/Wbt+P6o4NXr8KLbHxHX3zQ4c1I/zILZnZRIXK7M0CmQWY0TmjtQO1kLBgEOZ1A1FMiKzAUcSuYViZVYs41BQsRxLoRTLpBYVChSqaKFyC8VKbRwrtWKBQ4ncDuVYUKFE7i6WQpnUuaDFSm0qVG6hUMkVy6HEXNsoVHLHUigx1zYOBUMokVv/kzUcChTKsURq41DEcqyihQLFMo7UMHNtBVOoIrVjzcUdqkj9Vagf+DSRGx/yCgrU//QRT/zaO4/etN58ypWHB+m4Xnka11Lj5Y+oPow5pXeJ/ZcYFKUbb7y1O+RFd6VFMXvw11YbrDpWEHnL5dyYdAtVEJZbv8SkYnFahZjQsCxTy3xNXzXbGcqj775ghs++wTwePJvZxYj7PkDTMjx2+Wf0vf2vMPq3GdQavHrcRRA8vz3t2Pu/ZTb/5JEr7/hZgmf1fHbWPruvueyCfXM13MkGjISthgGVwZImM7L/0jCiaIBsC7s6yZaA4bv3X3ruM+gGOABWUDgg1AEAAJAOAJ0BKngAcwA+MRiLRCIhoREKBDQgAwSzgGuCwoQDxANCd54DrAPQA/VX0rvYf/bj0oNW8uA9pYER3ES1HRSeo8GB+VNwPIphjXFmjrURXMko3aV5it1G2gBGZjKOmY7vsdClDj4g4Sk1Zpt4tKvx0tM85NXjTYz2QT7AAP7/37x7OTX+4JYTTsPuSiChctVpJEWE+nOlR/2ej+i3G89fNQYo/42CgB6WmPX/EGTN48DQBScidoyPD8IHw7Txjy81SeJMEXnb7Hp0pdxA7LjmgpXXbKLwQD+NYMYb968kEIenAXo3YUKIfl8udn/MB+qjsPyM3+SJi5Ug4zj7e/hBNeT41oACAq8m1khjanixHU8fBKN733vER9yb9cPKJ/NFe2ifxTyTr2KtOHJ8Z3f7/TC6CsbnjKmgADfdaVrpInS9MWioHZTa+cxwfPrz6+chkv3AL7iBibDzSwLnUMI1edvdWPX7hs4M126edb/Agn9f3cy7+Lr5XqceO8CXt392Kg1oxolvxeghY9+rN7NvZchvzs1XggpdgUzkVnRUd3aMEUev3RxtrNH6g7+IOCBLx9afDi/pPEy9cXQFH/mO2k8FAPngUoPpwB5Gs8h++AAAAA==') center / cover no-repeat;
    transition: transform .18s ease;
  }
  .theme-toggle:hover { transform: translateY(-1px); }
  .theme-toggle:active { transform: translateY(0); }
  .tt-icon {
    position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; object-fit: contain;
    transform: translate(-50%, -50%) translateY(0); opacity: 1; pointer-events: none;
    transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
  }
  .tt-icon:not(.is-active) { transform: translate(-50%, -50%) translateY(-160%); opacity: 0; }

  /* hero */
  .hero {
    position: relative; overflow: hidden;
    padding-block: clamp(52px, 8vw, 104px) clamp(40px, 6vw, 72px);
    border-bottom: 1px solid var(--line);
    background:
      radial-gradient(ellipse 980px 560px at 10% -16%, color-mix(in srgb, var(--brick) 28%, transparent), transparent 64%),
      radial-gradient(ellipse 760px 560px at 104% 0%, color-mix(in srgb, var(--steel) 24%, transparent), transparent 64%);
  }
  .hero-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: start; position: relative; z-index: 1; }
  @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } }
  .tagline { font-family: var(--f-body); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brick); margin-bottom: 1.6rem; }
  .hero h1 { font-size: var(--step-5); line-height: 1.0; margin: 0 0 0.5em; font-weight: 700; }
  .hero h1 em { font-style: normal; color: var(--brick); }
  .hero .cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
  .hero .chips { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 2.4rem; padding-top: 1.7rem; border-top: 1px solid var(--line); }
  .chip { display: flex; align-items: center; gap: 0.55em; font-size: var(--step--1); color: var(--ink-soft); font-weight: 500; }
  .chip svg { color: var(--brick); flex: none; }

  .factcard { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--card-shadow); overflow: hidden; }
  .factcard h2 { font-family: var(--f-body); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--slate); padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
  .factcard dl { margin: 0; padding: 0.4rem 1.2rem 1.1rem; }
  .factcard .row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
  .factcard .row:last-child { border-bottom: 0; padding-bottom: 0; }
  .factcard dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--slate); font-weight: 700; padding-top: 0.3em; flex: none; }
  .factcard dd { margin: 0; text-align: right; font-weight: 600; font-size: 0.97rem; }
  .factcard dd small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.78rem; }
  .factcard a { color: var(--brick); text-decoration: none; border-bottom: 1px solid currentColor; }

  .hero-side { display: flex; flex-direction: column; gap: 1.5rem; }
  .manifest {
    position: relative;
    font-family: var(--f-display);
    font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.45rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    padding: 1.3rem 1.5rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--paper-raised) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--line-strong) 65%, transparent);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    box-shadow: var(--card-shadow);
  }
  .manifest::before {
    content: "";
    position: absolute; top: -9px; left: 36px;
    width: 0; height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid color-mix(in srgb, var(--paper-raised) 62%, transparent);
    filter: drop-shadow(0 -1px 0 color-mix(in srgb, var(--line-strong) 65%, transparent));
  }
  .manifest strong { color: var(--brick); font-weight: 500; }

  /* lazy image frame — blur-up (LQIP) while the full image loads on scroll */
  .ph {
    position: relative; overflow: hidden; border-radius: 4px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ph .lqip { filter: blur(14px); transform: scale(1.08); }
  .ph .full { opacity: 0; transition: opacity .6s ease; }
  .ph .full.is-loaded { opacity: 1; }
  .ph.is-loaded .lqip { opacity: 0; transition: opacity .6s ease .1s; }
  .ph:not(:has(img)) { background: linear-gradient(135deg, color-mix(in srgb, var(--brick) 9%, var(--paper-raised)), var(--paper-raised)); }
  @media (prefers-reduced-motion: reduce) { .ph .full { transition: none; } .ph.is-loaded .lqip { transition: none; } }

  /* about */
  .about-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
  @media (max-width: 860px) { .about-intro { grid-template-columns: 1fr; } }
  .about-intro h2 { font-size: var(--step-4); margin-bottom: 1rem; }
  .about-portrait,
  .about-wide {
    box-sizing: border-box;
    padding: 10px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--paper-raised) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--line-strong) 65%, transparent);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    box-shadow: var(--card-shadow);
  }
  .about-portrait img,
  .about-wide img { border-radius: 10px; }
  .about-portrait { aspect-ratio: 4/5; }
  .about-body { max-width: 68ch; margin-top: clamp(2.4rem, 5vw, 4rem); }
  .about-body h3 { font-size: var(--step-2); margin: 2.6rem 0 0.9rem; }
  .about-body h3:first-child { margin-top: 0; }
  .about-body p { color: var(--ink-soft); margin-bottom: 1.05rem; }
  .about-body .stack { display: flex; flex-direction: column; gap: 0.2rem; font-family: var(--f-display); font-weight: 500; font-size: var(--step-1); color: var(--ink); letter-spacing: -0.01em; margin: 1.2rem 0 1.6rem; }
  .about-wide { aspect-ratio: 16/7; margin: clamp(2.4rem, 5vw, 3.6rem) 0; }
  .pullquote {
    font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em;
    font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem); line-height: 1.14;
    color: var(--ink); text-align: center; max-width: 20ch; margin: clamp(3rem, 6vw, 5rem) auto;
  }
  .pullquote span { color: var(--brick); display: block; }
  .ph-label { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper); padding: 0.4rem 0.7rem; border-radius: 3px; border: 1px solid var(--line); }

  /* services */
  .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  @media (max-width: 860px) { .svc-grid { grid-template-columns: 1fr; } }
  .svc {
    position: relative; z-index: 0; overflow: hidden; background: #241F49; border: 1px solid #3B4254; border-radius: 6px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 0.85rem; box-shadow: var(--card-shadow);
    transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .5s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
  }
  /* entrance: column 1 from the left, column 2 from below, column 3 from the right — synchronized via the shared .svc-grid.in trigger */
  .svc-grid .svc { opacity: 0; }
  .svc-grid .svc:nth-child(3n+1) { transform: translateX(-46px); }
  .svc-grid .svc:nth-child(3n+2) { transform: translateY(46px); }
  .svc-grid .svc:nth-child(3n) { transform: translateX(46px); }
  .svc-grid.in .svc { opacity: 1; transform: none; }
  .svc-grid .svc:hover { transform: scale(1.045); box-shadow: 0 18px 40px -14px rgba(9,8,26,.55), var(--card-shadow); z-index: 1; }
  @media (prefers-reduced-motion: reduce) { .svc { transition: box-shadow .35s ease; } }
  .svc .ic {
    position: absolute; z-index: -1; top: -14px; right: -14px;
    width: 128px; height: 128px; border-radius: 20px;
    opacity: 0.3;
    pointer-events: none;
    transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
  }
  .svc:hover .ic { transform: scale(1.07) rotate(3deg); opacity: 0.44; }
  .svc h3 { font-size: var(--step-2); color: #ECEEF4; }
  .svc p { color: #AEB5C3; font-size: 0.98rem; }
  .svc .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.7rem; }
  .tag { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; color: #8FAEEA; background: #1E2740; padding: 0.34em 0.72em; border-radius: 3px; }

  /* pricing */
  .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; padding-top: 2rem; }
  @media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; padding-top: 1rem; } }
  .price {
    background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px;
    padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 1.3rem;
    box-shadow: var(--card-shadow); height: 100%;
    transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .5s cubic-bezier(.34,1.56,.64,1);
  }
  .price.featured { border-color: var(--brick); box-shadow: 0 0 0 1px var(--brick), var(--card-shadow); position: relative; }
  @media (max-width: 900px) { .price.featured { margin-top: 1.4rem; } }
  /* entrance: column 1 from the left, column 2 from below, column 3 from the right — synchronized via the shared .price-grid.in trigger */
  .price-grid .price { opacity: 0; }
  .price-grid .price:nth-child(3n+1) { transform: translateX(-46px); }
  .price-grid .price:nth-child(3n+2) { transform: translateY(46px); }
  .price-grid .price:nth-child(3n) { transform: translateX(46px); }
  .price-grid.in .price { opacity: 1; transform: none; }
  @media (min-width: 901px) { .price-grid.in .price.featured { transform: translateY(-16px); } }
  @media (prefers-reduced-motion: reduce) { .price { transition: none; } }
  .price-badge {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    background: var(--brick); color: #fff; font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; padding: 0.45em 1.1em; border-radius: 999px; white-space: nowrap;
    animation: badgePulse 2.6s ease-in-out infinite;
  }
  @keyframes badgePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 2px 10px -3px color-mix(in srgb, var(--brick) 55%, transparent); }
    50% { transform: translate(-50%, -50%) scale(1.07); box-shadow: 0 2px 18px 1px color-mix(in srgb, var(--brick) 70%, transparent); }
  }
  .price-head { display: flex; flex-direction: column; gap: 0.5rem; }
  .price h3 { font-size: 1.45rem; }
  .price-amount { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); }
  .price-amount small { display: block; font-family: var(--f-body); font-weight: 600; font-size: 0.82rem; color: var(--slate); letter-spacing: 0; margin-top: 0.4rem; }
  .price-tagline { color: var(--ink-soft); font-size: 0.96rem; }
  @media (min-width: 901px) { .price-tagline { min-height: 4.3em; } }
  .price-feat { list-style: none; margin: 0; padding: 1.3rem 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.72rem; }
  .price-feat li { display: flex; gap: 0.6em; font-size: 0.93rem; color: var(--ink-soft); line-height: 1.45; }
  .price-feat li svg { color: var(--brick); flex: none; margin-top: 0.2em; }
  .price-note { font-size: 0.86rem; color: var(--slate); line-height: 1.5; }
  .price .btn { margin-top: auto; justify-content: center; }

  /* process */
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  @media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
  .step { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
  .step .n {
    display: inline-block; font-family: var(--f-display); font-variant-numeric: tabular-nums;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; color: var(--brick);
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), text-shadow .35s ease;
  }
  .step:hover .n {
    transform: scale(1.45);
    text-shadow: 0 0 14px color-mix(in srgb, var(--brick) 75%, transparent), 0 0 32px color-mix(in srgb, var(--brick) 45%, transparent);
  }
  .step h3 { font-size: var(--step-1); margin: 0.5rem 0 0.5rem; }
  .step p { font-size: 0.92rem; color: var(--ink-soft); }

  /* references */
  .featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
  @media (max-width: 760px) { .featured-grid { grid-template-columns: 1fr; } }
  .featured { margin: 0; }
  .featured figcaption { all: unset; display: block; }
  .browser { border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; box-shadow: var(--card-shadow); background: var(--paper-raised); }
  .browser-bar { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 5%, var(--paper-raised)); }
  .browser-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: none; }
  .browser-url { margin-left: 10px; font-size: 0.74rem; color: var(--slate); font-weight: 600; letter-spacing: 0.02em; }
  .browser-shot { aspect-ratio: 16/10; border: 0; border-radius: 0; }
  .live-badge { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--steel); }
  .live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--steel); box-shadow: 0 0 0 3px var(--steel-tint); }
  .featured-meta { display: block; margin-top: 1.1rem; }
  .featured-meta h3 { font-size: var(--step-2); margin: 0.5rem 0 0.6rem; }
  .visit { margin-top: 1.4rem; }

  /* trust ledger */
  .ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2.4rem; }
  @media (max-width: 860px) { .ledger { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .ledger { grid-template-columns: 1fr; } }
  .lg {
    position: relative; z-index: 0; overflow: hidden; display: flex;
    background: #241F49; border: 1px solid #3B4254; border-radius: 6px;
    padding: clamp(20px, 2.6vw, 28px); box-shadow: var(--card-shadow);
    transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .5s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
  }
  /* entrance: column 1 slides in from the left, column 2 from below, column 3 from the right — all triggered together when the ledger scrolls into view */
  .ledger .lg { opacity: 0; }
  .ledger .lg:nth-child(3n+1) { transform: translateX(-46px); }
  .ledger .lg:nth-child(3n+2) { transform: translateY(46px); }
  .ledger .lg:nth-child(3n) { transform: translateX(46px); }
  .ledger.in .lg { opacity: 1; transform: none; }
  .ledger .lg:hover { transform: scale(1.045); box-shadow: 0 18px 40px -14px rgba(9,8,26,.55), var(--card-shadow); z-index: 1; }
  @media (prefers-reduced-motion: reduce) { .lg { transition: box-shadow .35s ease; } }
  .lg-icon {
    position: absolute; z-index: -1; top: -12px; right: -12px;
    width: 108px; height: 108px; border-radius: 18px;
    opacity: 0.3;
    pointer-events: none;
    transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
  }
  .lg:hover .lg-icon { transform: scale(1.07) rotate(3deg); opacity: 0.44; }
  .lg h3 { font-size: var(--step-1); margin-bottom: 0.5rem; color: #ECEEF4; }
  .lg p { font-size: 0.92rem; color: #AEB5C3; }

  /* voices */
  .voices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  @media (max-width: 760px) { .voices { grid-template-columns: 1fr; } }
  .quote { border: 1px solid var(--line); background: var(--paper-raised); border-radius: 6px; padding: clamp(22px, 3vw, 34px); box-shadow: var(--card-shadow); }
  .quote blockquote { margin: 0; font-family: var(--f-display); font-size: var(--step-1); font-weight: 500; line-height: 1.38; color: var(--ink); letter-spacing: -0.01em; }
  .quote figcaption { margin-top: 1.1rem; font-size: 0.8rem; color: var(--slate); letter-spacing: 0.05em; }

  /* faq */
  .faq { border-top: 1px solid var(--line-strong); max-width: 860px; }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-q {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    cursor: pointer; padding: 1.2rem 2.6rem 1.2rem 0; position: relative;
    font-family: var(--f-display); font-size: var(--step-1); font-weight: 600;
    letter-spacing: -0.01em; color: var(--ink);
  }
  .faq-q::after {
    content: "+"; position: absolute; right: 0.2rem; top: 1.55rem;
    font-family: var(--f-body); font-size: 1.6rem; color: var(--brick); line-height: 1;
    transform: rotate(0deg);
    transition: transform .4s cubic-bezier(.34,1.8,.5,1);
  }
  .faq-item.open .faq-q::after { transform: rotate(135deg); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height .46s cubic-bezier(.4,0,.2,1); }
  .faq-item.open .faq-a { max-height: 480px; }
  .faq-a-in p { padding: 0.1rem 0 1.6rem; margin: 0; color: var(--ink-soft); max-width: var(--measure); }
  @keyframes faqPop {
    0%   { opacity: 0; transform: translateY(-16px); }
    55%  { opacity: 1; transform: translateY(7px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .faq-item.open .faq-a-in p { animation: faqPop .52s cubic-bezier(.34,1.56,.64,1) both; }
  @media (prefers-reduced-motion: reduce) {
    .faq-q::after, .faq-a { transition: none; }
    .faq-item.open .faq-a-in p { animation: none; }
  }

  /* datenschutz accordion */
  .dp-list { border-top: 1px solid var(--line-strong); margin-top: 0.2rem; }
  .dp-item { border-bottom: 1px solid var(--line); }
  .dp-q {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    cursor: pointer; padding: 0.95rem 2rem 0.95rem 0; position: relative;
    font-family: var(--f-body); font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.11em; color: var(--ink); font-weight: 700;
  }
  .dp-q:hover { color: var(--brick); }
  .dp-q::after {
    content: "+"; position: absolute; right: 0.15rem; top: 0.62rem;
    font-family: var(--f-body); font-size: 1.35rem; font-weight: 400; color: var(--brick); line-height: 1;
    transform: rotate(0deg);
    transition: transform .4s cubic-bezier(.34,1.8,.5,1);
  }
  .dp-item.open .dp-q::after { transform: rotate(135deg); }
  .dp-a { max-height: 0; overflow: hidden; transition: max-height .46s cubic-bezier(.4,0,.2,1); }
  .dp-item.open .dp-a { max-height: 620px; }
  .dp-a-in p { padding: 0.1rem 0 1.2rem; margin: 0; color: var(--ink-soft); max-width: none; font-size: 0.92rem; line-height: 1.6; }
  .dp-item.open .dp-a-in p { animation: faqPop .52s cubic-bezier(.34,1.56,.64,1) both; }
  @media (prefers-reduced-motion: reduce) {
    .dp-q::after, .dp-a { transition: none; }
    .dp-item.open .dp-a-in p { animation: none; }
  }

  /* contact */
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); }
  @media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
  form { display: flex; flex-direction: column; gap: 1rem; }
  label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.11em; font-weight: 700; color: var(--ink-soft); }
  input, textarea { font-family: var(--f-body); font-size: 1rem; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line-strong); padding: 0.85em 0.95em; width: 100%; border-radius: 3px; }
  input:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
  textarea { resize: vertical; min-height: 130px; }
  form button { align-self: flex-start; margin-top: 0.3rem; }
  .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .consent-check {
    flex-direction: row; align-items: flex-start; gap: 0.6em;
    text-transform: none; letter-spacing: normal; font-weight: 500; font-size: 0.86rem;
    color: var(--ink-soft);
  }
  .consent-check input { width: auto; flex: none; margin-top: 0.2em; }
  .consent-check .linklike { font-size: inherit; font-weight: 600; color: var(--ink); }

  .btn-icon { flex: none; }

  /* success animation: the form shrinks away, an envelope folds shut and
     gets a green check, then the thank-you text fades in — all triggered
     by JS toggling a handful of classes once ?sent=1 comes back */
  #anfrage { transition: transform .5s cubic-bezier(.55,0,.85,.35), opacity .5s ease; transform-origin: 50% 0%; }
  #anfrage.is-shrinking { transform: scale(0.04); opacity: 0; pointer-events: none; }

  .anfrage-success {
    text-align: center; padding: clamp(24px, 5vw, 48px) 1rem;
    opacity: 0; transform: scale(0.7);
    transition: opacity .45s cubic-bezier(.34,1.56,.64,1), transform .45s cubic-bezier(.34,1.56,.64,1);
  }
  .anfrage-success.is-visible { opacity: 1; transform: scale(1); }

  .envelope { position: relative; width: 108px; height: 78px; margin: 0 auto 1.4rem; }
  .env-body {
    position: relative; width: 100%; height: 100%; perspective: 300px;
    background: var(--brick); border-radius: 10px; overflow: hidden;
    box-shadow: var(--card-shadow);
  }
  .env-flap {
    position: absolute; top: 0; left: 0; width: 100%; height: 50%;
    background: color-mix(in srgb, var(--brick) 75%, black 20%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top center;
    transform: rotateX(180deg);
    transition: transform .5s cubic-bezier(.4,0,.2,1) .1s;
  }
  .envelope.is-closed .env-flap { transform: rotateX(0deg); }
  .env-badge {
    position: absolute; right: -6px; bottom: -6px; width: 32px; height: 32px; border-radius: 50%;
    background: #1E8E5A; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px -2px rgba(0,0,0,.4);
    transform: scale(0);
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  }
  .envelope.is-checked .env-badge { transform: scale(1); }
  .env-check { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s ease .12s; }
  .envelope.is-checked .env-check { stroke-dashoffset: 0; }

  .success-msg {
    color: var(--ink-soft); max-width: 340px; margin-inline: auto;
    opacity: 0; transform: translateY(8px);
    transition: opacity .4s ease, transform .4s ease;
  }
  .success-msg.is-visible { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    #anfrage, .anfrage-success, .env-flap, .env-badge, .env-check, .success-msg { transition: none !important; }
  }
  .form-status { font-size: 0.88rem; font-weight: 600; padding: 0.7em 0.9em; border-radius: 4px; margin: 0; }
  .form-status.is-ok { background: color-mix(in srgb, #1E8E5A 15%, transparent); color: #1E8E5A; }
  .form-status.is-error { background: color-mix(in srgb, #C23B3B 15%, transparent); color: #C23B3B; }
  .contact-direct .row { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
  .contact-direct dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--slate); font-weight: 700; margin-bottom: 0.2rem; }
  .contact-direct dd { margin: 0; font-size: 1.02rem; }
  .contact-direct dd a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
  .contact-direct dd a:hover { border-color: var(--brick); color: var(--brick); }
  .honest { font-family: var(--f-display); font-weight: 500; font-size: var(--step-1); color: var(--ink-soft); margin-top: 1.7rem; letter-spacing: -0.01em; }

  /* legal */
  /* legal overlay */
  .linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
  .linklike:hover { border-color: var(--paper); }
  dialog.overlay {
    margin: auto; border: 1px solid var(--line); padding: 0; border-radius: 14px;
    max-width: 620px; width: min(92vw, 620px);
    background: var(--paper-raised); color: var(--ink);
    box-shadow: 0 40px 90px -24px rgba(0,0,0,.55);
  }
  dialog.overlay::backdrop { background: rgba(10, 12, 20, .58); backdrop-filter: blur(3px); }
  dialog.overlay[open] { animation: dlgIn .32s cubic-bezier(.34,1.4,.64,1); }
  dialog.overlay[open]::backdrop { animation: dlgFade .3s ease; }
  @keyframes dlgIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes dlgFade { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { dialog.overlay[open], dialog.overlay[open]::backdrop { animation: none; } }
  .overlay-inner { padding: clamp(44px, 6vw, 52px) clamp(26px, 5vw, 46px) clamp(26px, 5vw, 46px); max-height: min(78vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
  .overlay-close {
    position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
    font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  }
  .overlay-close:hover { color: var(--ink); border-color: var(--ink); }
  .overlay-inner h2 { font-size: var(--step-3); margin-bottom: 1.2rem; }
  .overlay-inner .prose { color: var(--ink-soft); max-width: none; }
  .overlay-inner .prose + .prose { margin-top: 1rem; }
  .overlay-inner strong { font-family: var(--f-body); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--ink); font-weight: 700; }
  .consent-actions { display: flex; gap: 0.8rem; margin-top: 1.5rem; flex-wrap: wrap; }
  .consent-link { color: var(--brick); background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }

  /* footer */
  footer {
    background: #0A0B11; color: #E8EAF0; padding-block: clamp(48px, 6vw, 76px);
    margin-top: clamp(28px, 5vw, 56px);
    border-radius: 24px 24px 0 0;
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 -24px 48px -32px rgba(0,0,0,.4);
  }
  footer a, footer .linklike { color: #E8EAF0; }
  footer .foot-brand b { color: #F5F6F9; }
  .foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
  .foot-brand { display: flex; align-items: center; gap: 0.7rem; }
  .foot-brand .monogram { height: 52px; }
  .foot-legal { font-size: 0.86rem; line-height: 1.85; opacity: 0.82; }
  .foot-legal a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
  .foot-meta { font-size: 0.74rem; letter-spacing: 0.04em; opacity: 0.55; margin-top: 2.4rem; text-transform: uppercase; }

  /* reveal */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }