:root {
    --paper: #F5F6F7; --paper-2: #FAFBFC; --ink: #171918; --ink-2: #2b2d2c; --muted: #666A6D; --mineral: #5B6065; --accent: #2F57D2; --mist: #CCD1D6; --mist-2: #E5E8EC; --line: #D2D6DA; --line-2: #E0E3E7;
    --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
  h1, h2, h3 { font-family: var(--sans); font-weight: 600; color: var(--ink); margin: 0; line-height: 1; letter-spacing: -0.03em; }
  a { color: inherit; }
  p { margin: 0; }
  .mono { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mineral); }
  .mono b { color: var(--accent); font-weight: 500; }
  .mono.dim { color: var(--muted); }
  .wrap { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }
  .sec { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--ink); margin-bottom: 2.6rem; }
  .sec .mono:first-child { color: var(--ink); white-space: nowrap; }
  .grid-bg { position: relative; }
  .grid-bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(23, 25, 24, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 25, 24, 0.07) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse at 72% 45%, #000 15%, transparent 68%); mask-image: radial-gradient(ellipse at 72% 45%, #000 15%, transparent 68%); }
  .grid-bg > * { position: relative; }
  /* header */
  header { position: sticky; top: 0; z-index: 10; background: rgba(245, 246, 247, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 66px; }
  .wordmark { white-space: nowrap; flex: 0 0 auto; text-decoration: none; color: var(--ink); font-family: var(--sans); font-weight: 700; font-variation-settings: 'wdth' 112; font-size: 0.98rem; letter-spacing: 0.08em; }
  nav { display: flex; align-items: center; gap: 1.5rem; flex: 0 1 auto; min-width: 0; }
  nav a { text-decoration: none; color: var(--muted); font-size: 0.95rem; font-weight: 500; }
  nav a:hover { color: var(--ink); }
  nav .cta { color: var(--paper); background: var(--ink); padding: 0.55rem 1.05rem; border-radius: 2px; font-weight: 500; white-space: nowrap; flex: 0 0 auto; }
  nav .cta:hover { background: var(--accent); color: var(--paper); }
  @media (max-width: 760px) { nav a:not(.cta) { display: none; } }
  @media (max-width: 400px) { nav .cta { padding: 0.45rem 0.8rem; font-size: 0.88rem; } }
  /* hero */
  .hero { padding: 5rem 0 4.5rem; overflow: hidden; }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; align-items: center; }
  .hero h1 { font-size: clamp(2.7rem, 6vw, 4.9rem); max-width: 12ch; }
  .hero .lead { font-size: 1.18rem; max-width: 30rem; color: var(--muted); margin: 1.6rem 0 2.2rem; }
  .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
  .btn { display: inline-block; padding: 0.85rem 1.4rem; border-radius: 2px; text-decoration: none; font-weight: 500; font-size: 1rem; border: 1px solid var(--ink); color: var(--ink); background: transparent; }
  .btn.primary { background: var(--ink); color: var(--paper); }
  .btn.primary:hover { background: var(--accent); border-color: var(--accent); }
  .btn:not(.primary):hover { background: var(--ink); color: var(--paper); }
  .fig { width: 100%; height: auto; display: block; }
  .fig text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--paper); }
  .fig text.note { fill: var(--muted); font-size: 9px; }
  .fig .p { transform-box: fill-box; transform-origin: center; }
  .js .build .p { animation: settle 1.4s cubic-bezier(0.2, 0.7, 0.15, 1) both; animation-delay: var(--d); }
  @keyframes settle { from { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); opacity: 0.2; } to { transform: none; opacity: 1; } }
  .js .build .ann { animation: fade 0.7s ease both; animation-delay: 2s; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .js .build .p, .js .build .ann { animation: none; opacity: 1; transform: none; } }
  @media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero .figwrap { max-width: 520px; } }
  /* hero figure: start */
  .figwrap { margin: 0; }
  .figbox { position: relative; }
  .fig .piece { cursor: default; outline: none; }
  .fig .piece .pos { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.15, 1), opacity 0.7s ease; }
  .fig .piece rect { transition: width 0.9s cubic-bezier(0.2, 0.7, 0.15, 1), height 0.9s cubic-bezier(0.2, 0.7, 0.15, 1), fill 0.2s ease; }
  .fig .piece text { transition: opacity 0.3s ease, fill 0.2s ease; }
  .fig .piece:hover rect, .fig .piece.on rect, .fig .piece:focus-visible rect { fill: var(--accent); }
  .fig .piece.base:hover rect, .fig .piece.base.on rect, .fig .piece.base:focus-visible rect { fill: var(--ink); }
  .fig .piece.custom rect { stroke: var(--ink); stroke-width: 1.5; }
  .fig .piece.custom text { fill: var(--ink); }
  .fig .piece.open rect { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 3; stroke-opacity: 0.55; }
  .fig .piece.open text { fill: var(--muted); }
  .fig .piece.custom:hover text, .fig .piece.custom.on text, .fig .piece.custom:focus-visible text, .fig .piece.open:hover text, .fig .piece.open.on text, .fig .piece.open:focus-visible text { fill: var(--paper); }
  .fig .piece.open:hover rect, .fig .piece.open.on rect, .fig .piece.open:focus-visible rect { stroke-opacity: 0; }
  .fig .orgcap { transition: opacity 0.3s ease; }
  .fig .stem { opacity: 0; transition: opacity 0.5s ease 0.4s; }
  .fig .stem.up { opacity: 1; }
  .readout { display: block; margin-top: 0.8rem; min-height: 4.8em; line-height: 1.5; text-transform: none; letter-spacing: 0.04em; }
  .readout strong { color: var(--ink); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
  .readout a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); white-space: nowrap; }
  .readout a:hover { color: var(--accent); border-color: var(--accent); }
  @media (min-width: 861px) { .readout { height: 4.8em; overflow: hidden; } }
  /* the device the system rises as: a phone, a tablet or a desktop window, held up by the stem */
  .hdev { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; background: var(--ink); box-shadow: 0 34px 60px rgba(23, 25, 24, 0.3); opacity: 0; transform: translateY(8%); transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.15, 1), opacity 0.5s ease, left 0.6s ease, top 0.6s ease, width 0.6s ease, height 0.6s ease; pointer-events: none; }
  .hdev.up { opacity: 1; transform: none; pointer-events: auto; }
  .hdev.phone { left: 31.25%; top: 2.07%; width: 37.50%; height: 75.86%; }
  .hdev.tablet { left: 22.86%; top: 7.24%; width: 54.29%; height: 70.69%; }
  .hdev.desktop { left: 10.71%; top: 25.86%; width: 78.57%; height: 52.07%; }
  .hdev.phone { padding: 1.6%; border-radius: 14% / 6.7%; }
  .hdev.tablet { padding: 1.6%; border-radius: 6% / 4.4%; }
  .hdev.desktop { padding: 0.9%; border-radius: 1.6% / 2.4%; }
  .hdev::before, .hdev::after { content: ''; position: absolute; width: 1.5%; background: var(--ink); display: none; }
  .hdev.phone::before, .hdev.phone::after { display: block; }
  .hdev::before { left: -1.3%; top: 21%; height: 9%; border-radius: 3px 0 0 3px; }
  .hdev::after { right: -1.3%; top: 24%; height: 14%; border-radius: 0 3px 3px 0; }
  .hbar { display: none; align-items: center; gap: 0.35rem; height: 20px; padding: 0 0.6rem; background: var(--paper); border-radius: 3px 3px 0 0; }
  .hdev.desktop .hbar { display: flex; }
  .hbar span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
  .hbar em { margin-left: 0.4rem; font-style: normal; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.04em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hscreen { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
  .hdev.phone .hscreen { border-radius: 11% / 5.2%; }
  .hdev.tablet .hscreen { border-radius: 4% / 3%; }
  .hdev.desktop .hscreen { border-radius: 0 0 3px 3px; }
  .hisland { position: absolute; z-index: 2; left: 50%; top: 2%; width: 24%; height: 2.6%; transform: translateX(-50%); background: var(--ink); border-radius: 999px; display: none; }
  .hdev.phone .hisland { display: block; }
  .hscreen iframe { position: absolute; left: 0; top: 0; width: 390px; height: 845px; border: 0; transform-origin: 0 0; transform: scale(0.5); display: none; }
  .hscreen iframe.show { display: block; }
  .hscreen .wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--paper-2, #fafbfc); }
  .hscreen.live .wait { display: none; }
  .hswitch { position: absolute; left: 2.5%; top: 2.5%; display: flex; gap: 0.2rem; }
  .hswitch button { font: 500 0.66rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid transparent; padding: 0.25rem 0.3rem; cursor: pointer; }
  .hswitch button.on { color: var(--ink); border-bottom-color: var(--accent); }
  .hswitch button:hover { color: var(--ink); }
  @media (prefers-reduced-motion: reduce) { .fig .piece .pos, .fig .piece rect, .fig .orgcap, .hdev, .fig .stem { transition: none; } }
  /* hero figure: end */
  /* sections */
  section { padding: 5.5rem 0; }
  section.paper { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  section.mist { background: var(--mist-2); border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist); }
  .statement { font-family: var(--sans); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; color: var(--ink); letter-spacing: -0.025em; max-width: 26ch; }
  .statement em, .pov h2 em, .final h2 em, .stack h2 em { font-style: normal; color: var(--accent); }
  .after { margin-top: 2.4rem; color: var(--muted); font-size: 1.05rem; max-width: 40rem; }
  /* selected work */
  .project { padding: 4rem 0 4.5rem; border-top: 1px solid var(--line); }
  .project:first-of-type { border-top: 0; padding-top: 0; }
  .project .top { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 2rem 3rem; align-items: end; margin-bottom: 2rem; }
  .project .id { display: flex; flex-direction: column; gap: 0.5rem; }
  .project .id .mono { color: var(--ink); }
  .project h3 { font-size: clamp(2rem, 4.2vw, 3.2rem); max-width: 16ch; }
  .project .sum { font-size: 1.12rem; color: var(--muted); max-width: 40rem; margin-top: 0.9rem; }
  .views { position: relative; }
  .device { border: 1px solid var(--ink); background: #fff; overflow: hidden; box-shadow: 0 24px 60px rgba(23, 25, 24, 0.12); }
  .device .bar { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--line); background: var(--paper); }
  .device .bar .url { flex: 1; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .device .bar a { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; }
  .device .bar a:hover { color: var(--accent); }
  .device .screen { position: relative; height: 600px; background: #fff; }
  .device iframe { display: block; width: 100%; height: 100%; border: 0; }
  .device .wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--mist-2); }
  .device.live .wait { display: none; }
  .device.desk { margin-right: 200px; }
  .device.phone { position: absolute; right: 0; bottom: -2rem; width: 250px; border-radius: 22px; padding: 8px; background: var(--ink); border-color: var(--ink); box-shadow: 0 30px 60px rgba(23, 25, 24, 0.28); }
  .device.phone .screen { height: 500px; border-radius: 15px; overflow: hidden; }
  .device.phone iframe { width: 390px; height: 845px; transform: scale(0.6); transform-origin: 0 0; }
  .device.phone .wait { border-radius: 15px; }
  .views .note { position: absolute; left: 0; bottom: -1.6rem; }
  .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2.5rem; margin-top: 4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
  .facts .mono { display: block; margin-bottom: 0.4rem; color: var(--ink); }
  .facts p { color: var(--ink-2); font-size: 0.98rem; }
  .openlink { display: none; margin-top: 1rem; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
  @media (max-width: 1000px) { .device.desk { margin-right: 0; } .device.phone { display: none; } .views .note { position: static; margin-top: 0.8rem; display: block; } }
  @media (max-width: 860px) { .project .top { grid-template-columns: 1fr; } .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.4rem; } }
  @media (max-width: 760px) { .device { display: none; } .openlink { display: inline-block; } }
  /* point of view */
  .pov h2 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 14ch; margin-bottom: 1.4rem; }
  .pov .pov-lead { font-size: 1.2rem; color: var(--ink-2); max-width: 40rem; margin-bottom: 2.4rem; }
  .pov .cols { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem 4rem; align-items: start; }
  .pov .accum { list-style: none; padding: 0; margin: 0 0 1.6rem; font-size: 1.15rem; color: var(--ink); line-height: 1.55; }
  .pov .plain { color: var(--muted); font-size: 1.05rem; max-width: 34rem; margin: 0 0 1rem; }
  .pov .that { font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ink); }
  .diagram { border: 1px solid var(--line); background: var(--paper-2); width: 100%; height: auto; display: block; }
  .diagram text { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--mineral); }
  .diagram text.ink { fill: var(--ink); font-size: 9.5px; }
  .diagram text.pap { fill: var(--paper); font-size: 9.5px; }
  .diagram .box { fill: var(--mist-2); stroke: var(--mist); }
  .diagram .keep { stroke: var(--ink); fill: var(--paper); }
  .diagram .out { fill: none; stroke: var(--muted); stroke-dasharray: 4 3; }
  .diagram .new { fill: none; stroke: var(--accent); stroke-width: 1.5; }
  .diagram .ln { fill: none; stroke: var(--ink); stroke-opacity: 0.45; }
  .diagram .ln.acc { stroke: var(--accent); stroke-opacity: 1; }
  @media (max-width: 860px) { .pov .cols { grid-template-columns: 1fr; } }
  /* what we build */
  .comps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 3rem; }
  .comp { padding: 1.4rem 1.4rem 1.8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-rows: auto auto auto auto 1fr; gap: 0.8rem; }
  .comp .art { border: 1px solid var(--mist); background: var(--mist-2); aspect-ratio: 16 / 9; display: block; width: 100%; height: auto; }
  .comp .art .ink { fill: var(--ink); }
  .comp .art .acc { fill: var(--accent); }
  .comp .art .ln { stroke: var(--ink); stroke-width: 1; fill: none; }
  .comp .art .lt { stroke: var(--mist); stroke-width: 1; fill: none; }
  .comp .art .soft { fill: var(--mist); }
  .comp .art text { font-family: var(--mono); font-size: 7px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--mineral); }
  .comp h3 { font-size: 1.6rem; text-transform: uppercase; letter-spacing: -0.01em; }
  .comp p { color: var(--ink-2); font-size: 1rem; }
  .comp .under { color: var(--muted); font-size: 0.9rem; }
  @media (max-width: 720px) { .comps { grid-template-columns: 1fr; } }
  /* how we work: one line, five stages */
  .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; position: relative; padding-top: 2.4rem; margin-top: 1rem; }
  .steps::before { content: ''; position: absolute; left: 0; top: 17px; height: 1px; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.15, 1); }
  .in .steps::before, .no-js .steps::before { transform: scaleX(1); }
  .step { position: relative; }
  .step::before { content: ''; position: absolute; left: 0; top: -2.4rem; margin-top: 12px; width: 36px; height: 10px; background: var(--ink); }
  .step:last-child::before { background: var(--accent); }
  .step .mono { display: block; margin-bottom: 0.7rem; color: var(--ink); }
  .step h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
  .step p { color: var(--muted); font-size: 0.98rem; }
  @media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps::before { display: none; } .step::before { position: static; display: block; margin: 0 0 0.8rem; } }
  /* strategy, design and technology in one studio */
  .sys { margin-top: 4rem; }
  .sys .flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; position: relative; padding-top: 2.2rem; }
  .sys .flow::before { content: ''; position: absolute; left: 0; right: 0; top: 17px; height: 1px; background: var(--ink); }
  .sys .node { position: relative; }
  .sys .node::before { content: ''; position: absolute; top: -2.2rem; left: 0; width: 36px; height: 10px; background: var(--ink); margin-top: 12px; }
  .sys .node.out::before { background: var(--accent); }
  .sys .node .mono { color: var(--ink); display: block; margin-bottom: 0.5rem; }
  .sys .node ul { list-style: none; padding: 0; margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
  .sys .node.out .mono { color: var(--accent); }
  .sys .node.out p { color: var(--ink); font-weight: 600; font-size: 1.1rem; line-height: 1.3; letter-spacing: -0.015em; }
  @media (max-width: 760px) { .sys .flow { grid-template-columns: 1fr; padding-top: 0; padding-left: 2rem; } .sys .flow::before { top: 0; bottom: 0; left: 5px; width: 1px; height: auto; right: auto; } .sys .node::before { top: 6px; left: -2rem; margin-top: 0; width: 12px; height: 10px; } }
  /* who we work with */
  .who h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 16ch; margin-bottom: 1.6rem; }
  .who h2 em { font-style: normal; color: var(--accent); }
  .who .lead { font-size: 1.15rem; color: var(--ink-2); max-width: 40rem; margin-bottom: 1.2rem; }
  .who .list { color: var(--muted); font-size: 1.05rem; max-width: 40rem; margin-bottom: 1.2rem; }
  .who .thread { font-weight: 600; font-size: 1.15rem; letter-spacing: -0.015em; color: var(--ink); max-width: 36rem; }
  /* every project has a different stack: moments people recognize, and a configurator */
  .stacks .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 4rem; align-items: start; }
  .stacks h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); max-width: 16ch; margin-bottom: 1.2rem; }
  .stacks .lead { font-size: 1.12rem; color: var(--ink-2); max-width: 36rem; margin-bottom: 1.8rem; }
  .moments { list-style: none; padding: 0; margin: 0.8rem 0 1rem; border-top: 1px solid var(--line); }
  .moments li { padding: 0.55rem 0; border-bottom: 1px solid var(--line-2); font-size: 1rem; color: var(--ink); }
  .moments li::before { content: '—'; color: var(--mineral); margin-right: 0.6rem; }
  .stacks .small { color: var(--muted); font-size: 0.95rem; }
  .configurator { border: 1px solid var(--line); background: var(--paper-2); padding: 1.2rem; }
  .picks { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin-bottom: 1rem; }
  .picks button { font: 500 0.7rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid transparent; padding: 0.3rem 0.2rem; cursor: pointer; }
  .picks button.on { color: var(--ink); border-bottom-color: var(--accent); }
  .picks button:hover { color: var(--ink); }
  .modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .modules span { display: flex; align-items: center; min-height: 3.2rem; padding: 0.5rem 0.6rem; border: 1px solid var(--mist); background: var(--paper); color: var(--muted); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease; }
  .modules span.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .modules span.hub { background: var(--accent); border-color: var(--accent); }
  .cfg-cap { margin-top: 1rem; color: var(--ink); min-height: 2.4em; }
  @media (max-width: 860px) { .stacks .cols { grid-template-columns: 1fr; } }
  @media (max-width: 480px) { .modules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  /* outcomes first */
  .project .outcome { font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); margin-top: 0.9rem; max-width: 30ch; }
  .project .sum { margin-top: 0.6rem; }
  .facts .result { grid-column: 1 / -1; border-top: 1px solid var(--ink); padding-top: 1rem; margin-top: 0.4rem; }
  .facts .result p { font-weight: 600; font-size: 1.15rem; letter-spacing: -0.015em; color: var(--ink); max-width: 40rem; }
  /* two ways in, and what a stack review produces */
  .twoways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; margin-top: 2.4rem; }
  .twoways .mono { display: block; color: var(--ink); text-transform: none; letter-spacing: 0.03em; font-size: 0.86rem; margin-bottom: 0.3rem; }
  .twoways p { color: var(--muted); font-size: 0.98rem; }
  .artifact { margin-top: 1.2rem; border: 1px solid var(--line); background: #fff; padding: 0.9rem 1rem 1rem; box-shadow: 0 10px 30px rgba(23, 25, 24, 0.08); }
  .artifact .mono { display: block; margin-bottom: 0.6rem; }
  .artifact ol { list-style: none; padding: 0; margin: 0; counter-reset: a; }
  .artifact li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; padding: 0.3rem 0; border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
  .artifact li::before { counter-increment: a; content: counter(a, decimal-leading-zero); color: var(--mineral); }
  .artifact li i { display: block; height: 3px; background: var(--mist); margin-top: 0.3rem; border-radius: 2px; }
  .artifact .map { margin-top: 0.8rem; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mineral); }
  .artifact .map b { color: var(--accent); font-weight: 500; }
  @media (max-width: 760px) { .twoways { grid-template-columns: 1fr; } }
  /* the system map: how we draw a system */
  .sysmap { border: 1px solid var(--line); background: var(--paper-2); width: 100%; height: auto; display: block; }
  .sysmap text { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--mineral); }
  .sysmap text.ink { fill: var(--ink); font-size: 9.5px; }
  .sysmap text.pap { fill: var(--paper); font-size: 9px; }
  .sysmap .node { fill: var(--paper); stroke: var(--ink); }
  .sysmap .node.data { fill: var(--ink); }
  .sysmap .node.acc { fill: var(--accent); stroke: var(--accent); }
  .sysmap .ln { fill: none; stroke: var(--ink); stroke-opacity: 0.5; }
  /* studio: three ideas */
  .studio h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); max-width: 16ch; margin-bottom: 1.2rem; }
  .studio .lead { font-size: 1.12rem; color: var(--ink-2); max-width: 40rem; margin-bottom: 2.2rem; }
  .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-bottom: 3rem; }
  .three div { padding: 1.2rem 1.2rem 1.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .three .mono { display: block; color: var(--ink); margin-bottom: 0.6rem; }
  .three p { color: var(--ink-2); font-size: 0.98rem; margin: 0; }
  @media (max-width: 760px) { .three { grid-template-columns: 1fr; } }
  /* ways to work together */
  .ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 2.6rem; }
  .way { padding: 1.5rem 1.4rem 1.9rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .way .mono { display: block; margin-bottom: 0.9rem; color: var(--ink); }
  .way h3 { font-size: 1.7rem; margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: -0.01em; }
  .way p { color: var(--ink-2); font-size: 1rem; margin-bottom: 0.7rem; }
  .way .out { color: var(--muted); font-size: 0.92rem; border-top: 1px solid var(--line-2); padding-top: 0.7rem; margin-top: 0.9rem; }
  .way.entry { background: var(--paper-2); }
  @media (max-width: 760px) { .ways { grid-template-columns: 1fr; } }
  /* no two organizations need the same stack */
  .stack h2 { font-size: clamp(2.2rem, 5.6vw, 4.4rem); max-width: 14ch; margin-bottom: 2rem; }
  .stack .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 4rem; align-items: start; }
  .stack .rules { list-style: none; padding: 0; margin: 0; font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -0.02em; color: var(--ink); line-height: 1.5; }
  .stack .rules li::before { content: '—'; color: var(--accent); margin-right: 0.6rem; }
  .stack p { color: var(--muted); font-size: 1.05rem; max-width: 34rem; margin-top: 1.4rem; }
  .restack { position: relative; height: 296px; }
  .restack .beam { position: absolute; left: 0; top: 0; height: 36px; width: 236px; background: var(--ink); color: var(--paper); display: flex; align-items: center; padding: 0 1rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.15, 1); }
  .restack .beam span { transition: opacity 0.3s ease; }
  .restack .beam.acc { background: var(--accent); }
  .restack .beam i { position: absolute; right: 0.9rem; font-style: normal; opacity: 0.55; }
  .restack .cap { position: absolute; left: 0; bottom: 0; display: flex; gap: 1.2rem; align-items: baseline; }
  .restack .cap .mono { color: var(--ink); }
  @media (max-width: 860px) { .stack .cols { grid-template-columns: 1fr; } .restack { height: 320px; } .restack .cap { flex-direction: column; gap: 0.2rem; } }
  @media (prefers-reduced-motion: reduce) { .restack .beam { transition: none; } }
  /* studio */
  .studio .cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2rem 4rem; }
  .studio p { max-width: 40rem; margin: 0 0 1rem; font-size: 1.08rem; }
  .studio .small { color: var(--muted); font-size: 1rem; }
  .principles { list-style: none; padding: 0; margin: 0; counter-reset: p; border-top: 1px solid var(--ink); }
  .principles li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line-2); font-size: 1rem; color: var(--ink); }
  .principles li::before { counter-increment: p; content: counter(p, decimal-leading-zero); font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--mineral); padding-top: 0.25rem; }
  @media (max-width: 760px) { .studio .cols { grid-template-columns: 1fr; } }
  /* notes */
  .notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .note { padding: 1.4rem 1.4rem 1.8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .note .mono { display: block; margin-bottom: 0.8rem; }
  .note h3 { font-size: 1.35rem; margin-bottom: 0.8rem; line-height: 1.15; }
  .note p { color: var(--ink-2); font-size: 0.96rem; margin-bottom: 0.7rem; }
  .note.soon h3 { color: var(--muted); }
  @media (max-width: 860px) { .notes { grid-template-columns: 1fr; } }
  /* the close */
  .final { background: var(--ink); color: var(--paper); padding: 8rem 0; }
  .final h2 { color: var(--paper); font-size: clamp(2.6rem, 6.6vw, 5.2rem); max-width: 13ch; }
  .final p { color: rgba(242, 240, 233, 0.72); font-size: 1.18rem; max-width: 34rem; margin: 1.4rem 0 2.4rem; }
  .final .btn { border-color: var(--paper); color: var(--paper); }
  .final .btn.primary { background: var(--paper); color: var(--ink); }
  .final .btn.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
  footer { padding: 2.4rem 0 2.8rem; border-top: 1px solid var(--line); }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; justify-content: space-between; align-items: flex-end; }
  footer a { text-decoration: none; }
  .stacked { display: inline-flex; flex-direction: column; font-weight: 700; font-variation-settings: 'wdth' 112; font-size: 1rem; letter-spacing: 0.1em; color: var(--ink); line-height: 1.15; text-decoration: none; }
  .stacked span:last-child { padding-left: 0.9em; }
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .js .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .steps::before { transition: none; transform: none !important; } }

  /* page tops and homepage cards */
  .pagehead { padding: 4.5rem 0 3rem; border-bottom: 1px solid var(--line); }
  .pagehead h1 { font-size: clamp(2.4rem, 5vw, 4rem); max-width: 14ch; margin-top: 1rem; }
  .pagehead .lead { font-size: 1.15rem; color: var(--muted); max-width: 36rem; margin-top: 1.2rem; }
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; }
  .card { display: flex; flex-direction: column; gap: 0.8rem; }
  .card .device .screen { height: 420px; }
  .card h3 { font-size: 1.6rem; }
  .card .out { font-weight: 600; font-size: 1.1rem; letter-spacing: -0.015em; color: var(--ink); line-height: 1.3; }
  .card p { color: var(--muted); font-size: 0.98rem; }
  .card .more { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
  .card .more:hover { color: var(--accent); }
  @media (max-width: 860px) { .cards { grid-template-columns: 1fr; } .card .device { display: block; } }
  @media (max-width: 760px) { .card .device { display: none; } }
  .paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
  .paths a { display: block; padding: 1.2rem 1.3rem; border: 1px solid var(--ink); text-decoration: none; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
  .paths a span { display: block; font-weight: 400; color: var(--muted); font-size: 0.95rem; margin-top: 0.3rem; }
  .paths a:hover { background: var(--ink); color: var(--paper); }
  .paths a:hover span { color: rgba(242, 240, 233, 0.75); }
  @media (max-width: 600px) { .paths { grid-template-columns: 1fr; } }
  .link { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
  .link:hover { color: var(--accent); }
  .short { color: var(--muted); font-size: 1.05rem; max-width: 40rem; }
  .fnav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-bottom: 1.2rem; }
  .fnav a { font-size: 0.92rem; color: var(--muted); text-decoration: none; }
  .fnav a:hover { color: var(--ink); }
  .home .steps { margin-top: 0.4rem; }
  .comp.brief { grid-template-rows: auto auto auto; }
  .comp.brief .under { font-size: 0.85rem; }
  .why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; }
  .why .four { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
  .why .four li { padding: 0.55rem 0; border-bottom: 1px solid var(--line-2); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
  @media (max-width: 760px) { .why { grid-template-columns: 1fr; } }

  /* the calling card: hero with the contact invitation, a quiet range list, then the manifesto */
  .card-hero { padding: 6rem 0 5.5rem; }
  .card-hero .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
  .card-hero h1 { max-width: 13ch; }
  .invite { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--ink); max-width: 30rem; }
  .invite .ask { font-weight: 600; font-size: clamp(1.35rem, 2.4vw, 1.8rem); letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
  .invite .ask em { font-style: normal; color: var(--accent); }
  .invite .tell { color: var(--muted); margin: 0.5rem 0 1.4rem; }
  .range { padding-top: 0.6rem; border-top: 1px solid var(--ink); }
  .range .mono { display: block; color: var(--ink); margin-bottom: 1rem; }
  .range ul { list-style: none; padding: 0; margin: 0; }
  .range li { font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); padding: 0.45rem 0; border-bottom: 1px solid var(--line-2); }
  .manifesto { padding: 7rem 0; }
  .manifesto h2 { font-size: clamp(2.4rem, 6vw, 5rem); max-width: 12ch; margin-bottom: 2.4rem; }
  .manifesto .rules { font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.6; }
  @media (max-width: 860px) { .card-hero { padding: 4.5rem 0 4rem; } .card-hero .wrap { grid-template-columns: 1fr; } .range { margin-top: 1rem; } .manifesto { padding: 5rem 0; } }

  /* one system, different shapes: the hero diagram */
  .sysfig { margin: 0; }
  .fig.sys text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--paper); transition: opacity 0.25s ease; }
  .fig.sys .mod .pos { transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease; }
  .fig.sys .mod rect { fill: var(--ink); stroke: var(--ink); stroke-width: 1; transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1), height 0.9s cubic-bezier(0.4, 0, 0.2, 1), fill 0.6s ease, stroke 0.6s ease; }
  .fig.sys .mod.cobalt rect { fill: var(--accent); stroke: var(--accent); }
  .fig.sys .mod.outline rect { fill: var(--paper-2); }
  .fig.sys .mod.outline text { fill: var(--ink); }
  .fig.sys .mod.hidden .pos { opacity: 0; }
  .fig.sys .conn { fill: none; stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1; opacity: 0; transition: opacity 0.4s ease; }
  .fig.sys .statelabel { fill: var(--muted); font-size: 9px; letter-spacing: 0.1em; }
  @media (prefers-reduced-motion: reduce) { .fig.sys .mod .pos, .fig.sys .mod rect, .fig.sys text, .fig.sys .conn { transition: none; } }

  /* three steps, and the simplified thinking-and-building row */
  .steps.three-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps.three-steps .step h3 { font-size: 1.5rem; }
  .sys .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sys .node p { color: var(--ink-2); font-size: 1rem; margin: 0; }
  @media (max-width: 760px) { .steps.three-steps { grid-template-columns: 1fr; } }

  /* the one page */
  html { scroll-padding-top: 76px; }
  .comp.brief { padding: 1.3rem 1.3rem 1.5rem; }
  .comp.brief h3 { font-size: 1.35rem; }
  .comp.brief p { font-size: 0.98rem; }
  .studio .why { align-items: start; }

  /* the creed beside the headline */
  .rules { list-style: none; padding: 0; margin: 0; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); line-height: 1.55; }
  .rules li::before { content: '\2014'; color: var(--accent); margin-right: 0.6rem; }
  .creed { padding-top: 1rem; border-top: 1px solid var(--ink); }
  .creed h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); max-width: 12ch; margin-bottom: 1.4rem; }
  .creed .rules { font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
  .card-hero .wrap { align-items: center; }
  @media (max-width: 860px) { .creed { margin-top: 2.6rem; } }

  /* the coming-soon page: a poster in three moments, on one screen.
     Scale on desktop: hero 68-74 / CTA 30 / body 21 / action 17.6 / metadata 14. */
  a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .cobalt { color: var(--accent); }
  body.home { min-height: 100vh; display: flex; flex-direction: column; }
  body.home main { flex: 1; display: flex; flex-direction: column; }
  body.home .wrap { max-width: 1400px; padding: 0 clamp(1.5rem, 4.5vw, 4.5rem); }
  body.home .wordmark { font-size: 1.06rem; letter-spacing: 0.09em; }
  body.home .mono { font-size: 0.875rem; letter-spacing: 0.07em; }
  body.home .stacked { font-size: 1.05rem; }
  body.home footer { padding: 2rem 0 2.2rem; }
  .hmeta { text-align: right; line-height: 1.35; white-space: nowrap; }
  @media (max-width: 480px) { body.home .wrap { padding: 0 1.1rem; } body.home .wordmark { letter-spacing: 0.06em; } }
  .soon { flex: 1; display: flex; align-items: center; padding: 2rem 0 2.2rem; }
  .soon-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; width: 100%; }
  .soon-pos { grid-column: 1 / 8; align-self: end; padding: 0; }
  .soon-id { display: block; margin-bottom: 1.1rem; color: var(--ink); }
  .bar { display: block; width: 44px; height: 5px; background: var(--accent); margin-bottom: 1.4rem; }
  .soon-pos h1 { font-size: clamp(2.9rem, 4.3vw + 0.6rem, 4.3rem); font-weight: 560; max-width: 8.6em; line-height: 1; letter-spacing: -0.03em; }
  .soon-pos .lead { font-size: 1.3rem; line-height: 1.45; max-width: 32rem; margin: 2.4rem 0 0; color: #3f4346; }
  .soon-pos .lead + .lead { margin-top: 1.4rem; }
  .soon-pos .pitch { font-size: 1.36rem; font-weight: 600; color: var(--ink); }
  .soon-contact { grid-column: 8 / 13; align-self: end; justify-self: start; margin-bottom: 1.5rem; }
  .soon-contact .ask { font-weight: 600; font-size: clamp(1.4rem, 2vw + 0.1rem, 1.9rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
  .soon-contact .ask em { font-style: normal; color: var(--accent); }
  .soon-contact .tell { font-size: 1.2rem; line-height: 1.45; color: #3f4346; margin: 1rem 0 1.9rem; }
  .soon-contact .go { display: inline-block; font: 600 1.08rem/1.2 var(--sans); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; background: transparent; border: 1px solid var(--ink); border-radius: 2px; padding: 0.95rem 1.7rem; white-space: nowrap; cursor: pointer; }
  .soon-contact .go:hover, .soon-contact .go:focus-visible { color: var(--accent); border-color: var(--accent); }
  .soon-contact .alt { margin-top: 1.1rem; font-size: 0.95rem; color: var(--muted); }
  .soon-contact .mail { color: var(--muted); text-decoration: none; }
  .soon-contact .mail:hover, .soon-contact .mail:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
  @media (max-width: 860px) { .soon { padding: 2rem 0 3rem; } .soon-grid { display: flex; flex-direction: column; gap: 2.2rem; } .soon-pos, .soon-contact { align-self: stretch; } .soon-contact { margin-bottom: 0; border-top: 1px solid #C3C8CC; } .soon-pos { padding: 0.6rem 0 0; } .soon-pos h1 { font-size: clamp(2.4rem, 10.5vw, 3.4rem); line-height: 1.02; } .soon-pos .lead { font-size: 1.2rem; line-height: 1.5; margin-top: 1.8rem; } body.home .mono { font-size: 0.8rem; } .soon-contact { padding-top: 1.4rem; } .soon-contact .ask { font-size: clamp(1.45rem, 6vw, 1.7rem); } .soon-contact .tell { font-size: 1.15rem; margin: 0.6rem 0 1.1rem; } .soon-contact .go { padding: 0.9rem 1.5rem; } }
  @media (max-width: 420px) { body.home .hmeta { font-size: 0.72rem; letter-spacing: 0.05em; } }
  /* the unlisted /preview/: the poster's first screen in two halves. The headline keeps the left. The invitation keeps
     its place on the right, and that half is ink from the header down to the next section (Sarah, 2026-10-08: the
     poster's layout, "but maybe black background just in that part"). Column 7 of the grid starts at the middle of the
     page, so the ink starts there. --gut repeats the side padding of body.home .wrap, for the phone layout. */
  .soon.split { --on-ink: rgba(245, 246, 247, 0.74); --accent-on-ink: #8FA6F0; --gut: clamp(1.5rem, 4.5vw, 4.5rem); min-height: min(100vh - 67px, 44rem); }
  .soon.split::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; background: var(--ink); }
  .soon.split > .wrap { z-index: 1; }
  .soon.split .soon-pos { grid-column: 1 / 7; }
  .soon.split .soon-pos .lead { max-width: min(32rem, 100% - 1.5rem); }
  @media (min-width: 861px) and (max-width: 1010px) { .soon.split .soon-pos h1 { font-size: 2.6rem; } }
  .soon-contact.on-ink .ask { color: var(--paper); }
  .soon-contact.on-ink .ask em { color: var(--accent-on-ink); }
  .soon-contact.on-ink .tell { color: var(--on-ink); }
  .soon-contact.on-ink .go { color: var(--paper); border-color: var(--paper); }
  .soon-contact.on-ink .go:hover, .soon-contact.on-ink .go:focus-visible { color: var(--accent-on-ink); border-color: var(--accent-on-ink); }
  .soon-contact.on-ink .go:focus-visible, .soon-contact.on-ink a:focus-visible { outline: 2px solid var(--accent-on-ink); outline-offset: 3px; }
  .soon-contact.on-ink .mail { color: var(--on-ink); }
  .soon-contact.on-ink .mail:hover, .soon-contact.on-ink .mail:focus-visible { color: var(--paper); }
  /* the call link and the email share a line, two links with a rule between them. They need about 360px side by side:
     a little smaller on a phone so they still fit, and one under the other with no rule where the column is narrower */
  .soon-contact.on-ink .alt { color: var(--on-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0; }
  .soon-contact.on-ink .alt .mail + .mail { margin-left: 1rem; padding-left: 1rem; border-left: 1px solid rgba(245, 246, 247, 0.4); }
  @media (max-width: 430px) { .soon-contact.on-ink .alt { font-size: 0.9rem; } .soon-contact.on-ink .alt .mail + .mail { margin-left: 0.7rem; padding-left: 0.7rem; } }
  @media (max-width: 370px), (min-width: 861px) and (max-width: 1010px) { .soon-contact.on-ink .alt { display: block; } .soon-contact.on-ink .alt .mail { display: block; } .soon-contact.on-ink .alt .mail + .mail { margin: 0.8rem 0 0; padding-left: 0; border-left: 0; } }
  /* on a phone the halves stack, and the invitation is an ink band from edge to edge under the headline */
  @media (max-width: 860px) { .soon.split { min-height: 0; padding-bottom: 0; } .soon.split::after { display: none; } .soon.split .soon-contact.on-ink { margin: 0 calc(-1 * var(--gut)); padding: 2.2rem var(--gut) 2.4rem; background: var(--ink); border-top: 0; } }
  @media (max-width: 480px) { .soon.split { --gut: 1.1rem; } }
  /* the unlisted /preview/: services, under the first screen. One service, named once, then what is in it. The name
     keeps the poster's CTA step, so nothing here rivals the headline. Left and right sit in the poster's columns. */
  .svc { background: var(--paper-2); border-top: 1px solid var(--line); padding: clamp(2.6rem, 7vh, 4.2rem) 0 clamp(2.8rem, 7vh, 4.4rem); }
  .svc .sec { margin-bottom: 2.2rem; }
  .svc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .svc-lead { grid-column: 1 / 7; }
  .svc-lead h2 { font-size: clamp(1.4rem, 2vw + 0.1rem, 1.9rem); letter-spacing: -0.02em; line-height: 1.15; }
  .svc-lead p { font-size: 1.3rem; line-height: 1.45; color: #3f4346; max-width: 27rem; margin-top: 1rem; }
  .svc-lead p + p { color: var(--muted); margin-top: 0.5rem; }
  .svc-lists { grid-column: 8 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .svc-lists h3 { font-size: 1.2rem; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 0.55rem; }
  .svc-lists ul { margin: 0; padding-left: 1.1rem; color: #3f4346; font-size: 1.02rem; line-height: 1.4; }
  .svc-lists li { padding: 0.14rem 0; }
  .svc-lists li::marker { color: var(--muted); }
  @media (max-width: 860px) { .svc { padding: 2.6rem 0 2.8rem; } .svc-grid { display: block; } .svc-lead p { font-size: 1.2rem; } .svc-lists { margin-top: 2rem; } }
  @media (max-width: 480px) { .svc-lists { gap: 1.6rem 1.1rem; } }
  @media (max-width: 340px) { .svc-lists { grid-template-columns: 1fr; gap: 1.5rem; } }

  /* start a conversation: the slide-over form */
  [hidden] { display: none !important; }
  button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  body.panel-open { overflow: hidden; }
  .veil { position: fixed; inset: 0; z-index: 40; background: rgba(23, 25, 24, 0.14); opacity: 0; transition: opacity 0.2s ease; }
  .veil.open { opacity: 1; }
  .panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(560px, 100%); display: flex; flex-direction: column; background: var(--paper); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform 0.22s ease; }
  .panel.open { transform: none; }
  /* 66px of header plus its 1px rule, like the site header (header .wrap + border): the two rules meet at the panel's edge */
  .panel-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 clamp(1.5rem, 4vw, 2.6rem); height: 67px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
  .panel-top .mono { color: var(--ink); }
  .close { font: 500 0.82rem var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); background: transparent; border: 0; padding: 0.5rem 0; cursor: pointer; }
  .close:hover { color: var(--accent); }
  .panel-body { overflow-y: auto; padding: 1.9rem clamp(1.5rem, 4vw, 2.6rem) 2.6rem; }
  .panel h2 { font-size: clamp(1.5rem, 2.2vw, 1.85rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
  .panel form h2 { margin-bottom: 1.9rem; }
  .panel-lead { color: #3f4346; font-size: 1.05rem; line-height: 1.5; margin: 0.9rem 0 1.9rem; max-width: 30rem; }
  .field { margin: 0 0 1.5rem; padding: 0; border: 0; min-width: 0; }
  .field > label, .field legend { display: block; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mineral); margin-bottom: 0.5rem; padding: 0; }
  .field .opt { color: var(--muted); margin-left: 0.35rem; }
  .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea { display: block; width: 100%; font: 400 1.02rem/1.5 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #A9AEB3; border-radius: 0; padding: 0.5rem 0; margin: 0; }
  .field textarea { resize: vertical; min-height: 6.5rem; }
  .field input::placeholder, .field textarea::placeholder { color: #8A9095; opacity: 1; }
  .field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
  .field.bad input, .field.bad textarea { border-bottom-color: #B4342A; }
  .err { color: #B4342A; font-size: 0.92rem; line-height: 1.4; margin: 0.5rem 0 0; }
  .err a { color: inherit; }
  .form-err { margin: 0 0 1.2rem; }
  .field .radio { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.6rem; font: 400 1rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-2); cursor: pointer; }
  .radio input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 15px; height: 15px; margin: 0; border: 1px solid var(--ink); border-radius: 0; background: transparent; display: grid; place-content: center; cursor: pointer; }
  .radio input::before { content: ''; width: 7px; height: 7px; background: var(--accent); transform: scale(0); }
  .radio input:checked::before { transform: none; }
  .radio input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .panel-actions { margin-top: 0.4rem; }
  .send { display: inline-block; font: 600 1.05rem/1.2 var(--sans); letter-spacing: -0.01em; color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 2px; padding: 0.95rem 1.7rem; cursor: pointer; white-space: nowrap; }
  .send:hover, .send:focus-visible { color: var(--accent); border-color: var(--accent); }
  .send:disabled { color: var(--muted); border-color: var(--line); cursor: default; }
  .done .mono { display: block; margin-bottom: 1.1rem; }
  .linkbtn { font: 600 1.05rem/1.2 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); padding: 0.2rem 0; cursor: pointer; }
  .linkbtn:hover { color: var(--accent); border-color: var(--accent); }
  @media (max-width: 860px) { .panel { width: 100%; border-left: 0; } .panel-body { padding: 1.6rem 1.5rem 2.4rem; } .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea { font-size: 1.05rem; } }
  @media (prefers-reduced-motion: reduce) { .panel, .veil { transition: none; } }

  /* the form teaches: the follow-up field and the thank-you screen */
  .followup { margin-top: -0.3rem; }
  .field.followup textarea { min-height: 3.4rem; }
  .done .next-h { display: block; margin: 1.7rem 0 0.8rem; color: var(--ink); }
  .next { list-style: none; margin: 0 0 1.8rem; padding: 0; border-top: 1px solid var(--line); max-width: 32rem; }
  .next li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.4rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
  .done .next li .mono { display: inline; margin: 0; padding-top: 0.2rem; color: var(--mineral); }
  .next li p { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.45; }
  .built { color: #3f4346; font-size: 1rem; line-height: 1.5; margin: 0 0 1.9rem; max-width: 32rem; }
  .done .built .mono { display: block; margin-bottom: 0.45rem; color: var(--ink); }
  .done h2:focus { outline: none; }

  /* book a call: a form written into the page like the one above, fed by the portal's calendar. The calendar and the
     times keep the shape and the values they had on the portal's booking page. */
  #book-h:focus { outline: none; }
  .panel form.has-intro h2 { margin-bottom: 0; }
  .bk-wait { display: block; margin: 0; }
  .no-js .bk-wait { display: none; }
  .bk-choice .radio:last-child { margin-bottom: 0; }
  .bk-line { color: var(--ink-2); font-size: 1rem; line-height: 1.5; margin: 0 0 1.5rem; }
  .bk-quiet { color: var(--muted); font-size: 0.92rem; line-height: 1.4; margin: 0 0 1.5rem; }
  .bk-quiet.bk-under { margin-top: -0.7rem; }
  .bk-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin: 0 0 1.5rem; }
  .bk-calnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
  .bk-calnav strong, .bk-timeshead strong { font: 600 1.02rem/1.3 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
  .bk-nav { width: 32px; height: 32px; padding: 0; border: 1px solid #A9AEB3; border-radius: 2px; background: transparent; color: var(--ink-2); font-size: 1.1rem; line-height: 1; cursor: pointer; }
  .bk-nav:disabled { opacity: 0.3; cursor: default; }
  .bk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
  .bk-dow { text-align: center; font-size: 0.72rem; font-weight: 600; line-height: 1.5; color: var(--muted); padding: 0.2rem 0; }
  .bk-cell { height: 2.5rem; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font: 400 0.92rem/1.5 var(--sans); cursor: default; }
  .bk-cell:disabled { opacity: 0.55; }
  .bk-cell.free { background: #EEF0F2; color: var(--ink-2); font-weight: 600; cursor: pointer; }
  .bk-cell.on { background: var(--accent); color: #fff; }
  .bk-timeshead { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 0.5rem; }
  .bk-zone { font-size: 0.78rem; line-height: 1.5; color: var(--muted); }
  .bk-slots { min-width: 0; transition: opacity 0.15s; }
  .bk-pick.switching .bk-slots { opacity: 0.45; pointer-events: none; }
  .bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.35rem; max-height: 330px; overflow-y: auto; padding: 0 0.15rem 0 0; }
  .bk-times button { font: 600 0.95rem/1.2 var(--sans); color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: 2px; padding: 0.6rem 0.4rem; cursor: pointer; }
  .bk-times button.on { background: var(--accent); color: #fff; }
  @media (hover: hover) { .bk-cell.free:not(.on):hover, .bk-times button:not(.on):hover { background: color-mix(in srgb, var(--accent) 16%, white); } }
  .bk-nav:focus-visible, .bk-cell:focus-visible, .bk-times button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .panel-actions .err { margin-top: 0.8rem; }
  /* booked, or a booking to cancel */
  .bk-what { color: var(--ink-2); font-size: 1.05rem; line-height: 1.5; margin: 1.2rem 0 1rem; }
  .bk-what strong { display: block; font-weight: 600; color: var(--ink); }
  .bk-what span { display: block; }
  .bk-what .bk-local { color: var(--muted); font-size: 0.92rem; line-height: 1.4; margin-top: 0.3rem; }
  .done .bk-line { margin-bottom: 1rem; overflow-wrap: anywhere; }
  .done .bk-wait { margin-top: 1.2rem; }
  .bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.9rem; }
  a.send { text-decoration: none; }

  /* the way from the unlisted /preview/ to /educators: a link beside the header's line. Under 640px the link stays
     and the line makes room for it */
  .hnav { display: flex; align-items: center; gap: 1.8rem; min-width: 0; }
  .hlink { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; white-space: nowrap; }
  .hlink:hover, .hlink:focus-visible { color: var(--accent); border-color: var(--accent); }
  @media (max-width: 640px) { .hnav .hmeta { display: none; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* /educators (unlisted): Civic Stack for Educators. The first screen is the preview's: the headline on the left,
     the invitation on ink on the right. Under it the sections keep the poster's steps, so only the h1 is
     headline-sized: a section's heading takes the CTA step. Sarah cut the first build down on 2026-10-11 ("way too
     much going on"): what is left is how it works, community and support, the case studies and the way in. */
  .ed, .ed-close { --on-ink: rgba(245, 246, 247, 0.74); --accent-on-ink: #8FA6F0; }
  .ed-go { display: inline-block; font: 600 1.08rem/1.2 var(--sans); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; background: transparent; border: 1px solid var(--ink); border-radius: 2px; padding: 0.95rem 1.7rem; white-space: nowrap; cursor: pointer; }
  .ed-go:hover, .ed-go:focus-visible { color: var(--accent); border-color: var(--accent); }
  .ed-go.on-ink { color: var(--paper); border-color: var(--paper); }
  .ed-go.on-ink:hover, .ed-go.on-ink:focus-visible { color: var(--accent-on-ink); border-color: var(--accent-on-ink); }
  .ed-go.on-ink:focus-visible { outline: 2px solid var(--accent-on-ink); outline-offset: 3px; }
  .ed-link { position: relative; font: 600 1.05rem/1.2 var(--sans); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding: 0.2rem 0; white-space: nowrap; }
  .ed-link:hover, .ed-link:focus-visible { color: var(--accent); border-color: var(--accent); }
  .ed-link::after { content: ''; position: absolute; inset: -0.6rem -0.3rem; } /* a finger-sized target around a line of text */
  /* the sections */
  .ed { padding: clamp(2.8rem, 8vh, 4.6rem) 0 clamp(3rem, 8vh, 4.8rem); border-top: 1px solid var(--line); }
  .ed.alt { background: var(--paper-2); }
  .ed .sec { margin-bottom: 2.2rem; }
  .ed-head { max-width: 38rem; margin-bottom: 2.2rem; }
  .ed-head h2, .ed-close h2, .ed-road h3 { font-size: clamp(1.4rem, 2vw + 0.1rem, 1.9rem); letter-spacing: -0.02em; line-height: 1.15; }
  .ed-head p { font-size: 1.2rem; line-height: 1.45; color: #3f4346; margin-top: 0.9rem; }
  body.home .ed-tag { display: inline-block; border: 1px solid currentColor; padding: 0.14rem 0.5rem; font-size: 0.72rem; line-height: 1.4; white-space: nowrap; }
  .ed-tag.today { color: var(--ink); }
  .ed-tag.planned { color: var(--muted); border-style: dashed; }
  /* how it works */
  .ed-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; border-top: 1px solid var(--ink); }
  .ed-steps li { padding-top: 1.5rem; }
  .ed-steps li::before { content: ''; display: block; width: 36px; height: 10px; background: var(--ink); margin-bottom: 1.1rem; }
  .ed-steps li:last-child::before { background: var(--accent); }
  .ed-steps .mono { display: block; color: var(--ink); margin-bottom: 0.6rem; }
  .ed-steps h3 { font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.5rem; }
  .ed-steps p { font-size: 1.08rem; line-height: 1.5; color: #3f4346; max-width: 24rem; }
  /* community and support: the member roadmap on ink, sitting on the row of ways to take part */
  .ed-road { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem 1.5rem; align-items: end; padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--ink); color: var(--paper); }
  .ed-road-id { grid-column: 1 / 7; }
  .ed-road-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 1rem; }
  .ed-road-top .mono { color: var(--on-ink); }
  .ed-road h3 { color: var(--paper); }
  .ed-road > p { grid-column: 7 / 13; font-size: 1.2rem; line-height: 1.45; color: var(--paper); max-width: 32rem; }
  .ed-ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--line); }
  .ed-ways li { padding: 1.2rem 1.2rem 1.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .ed-ways h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.2; margin: 0.9rem 0 0.5rem; }
  .ed-ways p { font-size: 1.02rem; line-height: 1.45; color: #3f4346; }
  /* the case studies: three real clients, side by side */
  .ed-cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
  .ed-cases li { display: flex; flex-direction: column; align-items: flex-start; padding: 1.4rem 1.4rem 1.8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
  .ed-cases li > .mono:first-child { color: var(--ink); margin-bottom: 1rem; }
  .ed-cases h3 { font-size: 1.45rem; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.8rem; }
  .ed-cases p { font-size: 1.04rem; line-height: 1.5; color: #3f4346; margin-bottom: 1.6rem; }
  .ed-cases .ed-case-line { font-weight: 600; font-size: 1.12rem; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); margin-bottom: 0.5rem; }
  .ed-cases .ed-link, .ed-cases .ed-quiet { margin-top: auto; }
  .ed-cases .ed-quiet { color: var(--muted); }
  /* the close, on ink */
  .ed-close { padding: clamp(3.2rem, 10vh, 5.5rem) 0; background: var(--ink); color: var(--paper); }
  .ed-close h2 { color: var(--paper); max-width: 24ch; }
  .ed-close p { font-size: 1.2rem; line-height: 1.45; color: var(--on-ink); max-width: 32rem; margin: 1rem 0 1.9rem; }
  .ed-close .ed-note { margin: 1.4rem 0 0; color: var(--on-ink); }
  @media (max-width: 860px) {
    .ed-head p { font-size: 1.15rem; }
    .ed-steps { grid-template-columns: 1fr; gap: 0; } .ed-steps li { padding: 1.4rem 0 1.6rem; } .ed-steps li + li { border-top: 1px solid var(--line); }
    .ed-road { display: block; } .ed-road > p { margin-top: 1rem; font-size: 1.15rem; }
    .ed-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ed-cases { grid-template-columns: 1fr; }
  }
  @media (max-width: 480px) {
    .ed-ways { grid-template-columns: 1fr; }
    .ed-cases li { padding: 1.3rem 1.1rem 1.6rem; }
  }