/* Dependable Studios. Tokens and rules in DESIGN.md. Rewritten 2026-11-11 from the Impeccable audit:
   only what the five pages use, one rule per thing, no leftovers from earlier designs. */

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #050607;
  --bg-2: #0c0e11;
  --ink: #f4f4f5;
  --soft: #c8c8ce;
  --muted: #8d8d96;
  --teal: #8fd0ce;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.2);
  --paper: #f4f4f5;
  --paper-ink: #050607;
  --paper-soft: #4a4a52;
  --paper-line: rgba(5, 6, 7, 0.16);
  --sans: "Instrument Sans", "Avenir Next", "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pad: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  color-scheme: dark;
  accent-color: var(--teal);
  caret-color: var(--teal);
  scrollbar-color: #2a2d33 var(--bg);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--teal); color: var(--paper-ink); }

.defs { position: absolute; }
.wing { fill: var(--teal); }
.body { fill: currentColor; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: var(--pad); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--ink); color: var(--bg); padding: 10px 14px; }
.skip:focus { left: 8px; }

/* Small dated line on the legal pages */
.label { font: 500 0.76rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* Header: solid, no glass */
.top {
  position: sticky; top: 0; z-index: 10;
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.02rem/1 var(--sans); letter-spacing: -0.02em; white-space: nowrap; }
.brand-mark { width: 30px; height: 30px; flex: none; color: var(--ink); }
nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
nav a { text-decoration: none; font-size: 0.92rem; color: var(--soft); min-height: 44px; display: inline-flex; align-items: center; transition: color 0.2s; }
nav a:hover { color: var(--ink); }
nav .nav-cta { color: var(--bg); background: var(--ink); padding: 0 16px; min-height: 38px; border-radius: 999px; font-weight: 600; transition: background 0.2s; }
nav .nav-cta:hover { background: var(--teal); color: var(--paper-ink); }
@media (max-width: 720px) {
  nav a:not(.nav-cta):not(.nav-keep) { display: none; }
  nav { gap: 14px; }
  nav .nav-keep { font-size: 0.86rem; }
  nav .nav-cta { font-size: 0.86rem; white-space: nowrap; padding: 0 14px; }
}
@media (max-width: 520px) { header .brand span { display: none; } }

/* Type */
h1 {
  font: 700 clamp(2.7rem, 6.6vw, 5.8rem)/0.94 var(--sans);
  letter-spacing: -0.045em;
  max-width: 15ch;
  text-wrap: balance;
}
h2 {
  font: 700 clamp(2.2rem, 5.4vw, 4.4rem)/0.98 var(--sans);
  letter-spacing: -0.04em;
  max-width: 16ch;
  text-wrap: balance;
}
h3 { font: 600 1.18rem/1.2 var(--sans); letter-spacing: -0.015em; text-wrap: balance; }
.lead { font-size: clamp(1.12rem, 1.7vw, 1.38rem); line-height: 1.45; color: var(--soft); max-width: 34rem; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px;
  font: 600 1rem/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn span { transition: transform 0.2s var(--ease); }
.btn:hover span { transform: translateX(4px); }
.btn-solid { background: var(--teal); color: var(--paper-ink); }
.btn-solid:hover { background: var(--ink); }
.btn-line { border: 1px solid var(--line-2); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
@media (max-width: 720px) { .actions .btn { flex: 1 1 auto; } }

/* Hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-inner { position: relative; padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(36px, 5vw, 64px); }
.hero h1 { margin-top: clamp(20px, 3vw, 36px); }
.hero-foot { display: grid; gap: 28px; margin-top: clamp(32px, 5vw, 60px); max-width: 34rem; }

/* Bands */
.band { padding: clamp(72px, 10vw, 140px) 0; border-bottom: 1px solid var(--line); }

/* Pricing */
.plan { display: grid; gap: 14px; margin-top: clamp(36px, 5vw, 64px); }
@media (min-width: 900px) { .plan { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.plan-main, .plan-add { background: var(--bg-2); border: 1px solid var(--line); border-radius: 22px; padding: clamp(26px, 4vw, 44px); }
.plan-main { border-color: var(--line-2); }
.price { font: 500 1.2rem/1 var(--sans); color: var(--soft); margin-top: 18px; }
.price .amount { display: block; font: 700 clamp(4rem, 10vw, 8rem)/0.9 var(--sans); letter-spacing: -0.05em; color: var(--ink); margin-bottom: 14px; }
.ticks { display: grid; gap: 14px; margin-top: 34px; }
@media (min-width: 560px) { .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ticks li { display: flex; gap: 12px; align-items: center; font-size: 1.08rem; }
.ticks li::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--teal) url("/check-dark.svg") center / 12px no-repeat; }
.plan-note { margin-top: 30px; color: var(--teal); font-weight: 600; font-size: 1.08rem; }
.plan-main .btn { margin-top: 26px; }
.plan-add dl { margin-top: 26px; }
.plan-add div { padding: 20px 0; border-top: 1px solid var(--line); }
.plan-add div:last-child { padding-bottom: 0; }
.plan-add dt { font: 700 1.45rem/1.1 var(--sans); letter-spacing: -0.03em; }
.plan-add dt span { display: block; margin-top: 6px; font: 500 0.95rem/1.3 var(--sans); letter-spacing: 0; color: var(--teal); }
.plan-add dd { color: var(--soft); margin-top: 8px; }

/* Steps (real steps, so they keep their numbers) */
.steps { display: grid; margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line-2); }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { padding: 26px 24px 30px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .steps li { padding-left: 24px; border-left: 1px solid var(--line); } .steps li:nth-child(odd) { padding-left: 0; border-left: 0; } }
@media (min-width: 1040px) { .steps li { border-bottom: 0; } .steps li:nth-child(odd) { padding-left: 24px; border-left: 1px solid var(--line); } .steps li:first-child { padding-left: 0; border-left: 0; } }
.step-n { display: block; font: 500 0.76rem/1 var(--mono); color: var(--teal); letter-spacing: 0.14em; margin-bottom: 20px; }
.step-n::before { content: "0"; }
.steps p { color: var(--soft); margin-top: 10px; font-size: 0.98rem; max-width: 22rem; }

/* Questions */
.faq { margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--line-2); max-width: 60rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font: 600 clamp(1.2rem, 2vw, 1.55rem)/1.2 var(--sans); letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 1.8rem/1 var(--sans); color: var(--teal); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--soft); font-size: 1.08rem; max-width: 42rem; padding-bottom: 26px; }

/* You own it: the one light band, plain rows */
.paper { background: var(--paper); color: var(--paper-ink); padding: clamp(80px, 11vw, 150px) 0; }
.paper h2 { font-size: clamp(3rem, 9vw, 7.5rem); line-height: 0.9; max-width: none; }
.paper ::selection { background: var(--paper-ink); color: var(--paper); }
.keep { margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--paper-ink); max-width: 60rem; }
.keep li { display: grid; gap: 4px; padding: 22px 0; border-bottom: 1px solid var(--paper-line); font-size: 1.15rem; color: var(--paper-soft); }
@media (min-width: 700px) { .keep li { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 32px; align-items: baseline; padding: 28px 0; } }
.keep strong { font: 700 clamp(1.4rem, 2.4vw, 1.9rem)/1.1 var(--sans); letter-spacing: -0.03em; color: var(--paper-ink); }

/* Contact */
.contact { padding: 56px 0 clamp(72px, 9vw, 120px); }
.contact h2 { font-size: clamp(2.6rem, 7.4vw, 6rem); max-width: none; }
.contact .lead { margin-top: 24px; }
.contact .lead a { color: var(--teal); }
.contact-bull { width: 56px; aspect-ratio: 329 / 328; color: var(--ink); display: block; margin-bottom: 16px; }
@media (min-width: 960px) {
  .contact { padding-top: clamp(72px, 8vw, 110px); }
  .contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 clamp(40px, 6vw, 96px); align-items: end; }
  .contact-grid h2 { font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
  .contact-bull { width: 72px; margin-bottom: 20px; }
}
.ask { display: grid; gap: 8px; max-width: 520px; margin: 28px 0 8px; }
@media (min-width: 960px) { .contact-grid .ask { margin-top: 0; } }
.ask label { font-size: 0.875rem; color: var(--soft); margin-top: 10px; }
.ask input { font: inherit; font-size: 1.0625rem; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 14px 16px; width: 100%; }
.ask input::placeholder { color: var(--muted); }
.ask input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-color: transparent; }
.ask .btn { margin-top: 18px; justify-self: start; cursor: pointer; border: 0; font: inherit; font-weight: 600; }
.ask-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ask-call { margin-top: 24px; color: var(--soft); font-size: 1.05rem; }
.ask-call a { color: var(--teal); }
.ask-call .mail { overflow-wrap: anywhere; }
.ask-mail { margin-top: 8px; }
.who { margin-top: 18px; color: var(--muted); max-width: 34rem; font-size: 0.98rem; }
.hero-note { color: var(--soft); font-size: 0.98rem; margin-top: -12px; }
.plan-own { margin-top: 10px; color: var(--soft); font-size: 1.02rem; }

/* Thank-you and error pages */
.done { padding: clamp(72px, 12vw, 160px) 0; }
.done h1 { max-width: 16ch; }
.done .lead { margin-top: 24px; }
.done .lead a { color: var(--teal); }
.done-back { margin-top: 32px; }

/* Legal pages */
.legal { padding: clamp(56px, 8vw, 110px) 0 clamp(72px, 10vw, 130px); }
.legal h1 { margin-top: 20px; }
.legal h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.1; max-width: none; margin-top: 44px; }
.legal p:not(.label) { color: var(--soft); font-size: 1.08rem; max-width: 40rem; margin-top: 12px; }
.legal ul { list-style: disc; color: var(--soft); font-size: 1.08rem; max-width: 40rem; margin-top: 12px; padding-left: 1.2em; }
.legal li { margin-top: 8px; }
.legal li strong, .legal p strong { color: var(--ink); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 0.86rem; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.foot .brand { color: var(--ink); }

/* Motion: one entrance on the opening, quiet reveals after. Off when the visitor asks for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.9s var(--ease) both; }
  .r2 { animation-delay: 0.08s; }
  .r3 { animation-delay: 0.2s; }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @supports (animation-timeline: view()) {
    .band h2, .work-grid li, .steps li, .contact h2 {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Design pass (draft 2026-11-11, Impeccable critique + layout + typeset). Same colors and fonts as DESIGN.md. */
/* 1. The opening shows the product: two real sites we built, overlapped, where the grey bull used to be. */
.hero-inner { display: grid; gap: clamp(36px, 5vw, 56px); }
@media (min-width: 1040px) {
  .hero-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; align-content: center; column-gap: clamp(32px, 4vw, 64px); }
  .hero-inner h1 { font-size: clamp(3.6rem, 5.4vw, 5.4rem); }
  .hero-foot { margin-top: 0; }
  .hero-inner h1, .hero-foot { grid-column: 1; }
  .hero-work { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.hero-work { position: relative; aspect-ratio: 5 / 4; max-width: 560px; width: 100%; }
.hero-work .hw { position: absolute; width: 82%; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.hero-work .hw img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.hw-back { top: 0; right: 0; }
.hw-front { bottom: 0; left: 0; }
@media (max-width: 1039px) { .hero-work { aspect-ratio: 16 / 12; max-width: 520px; } }
/* 2. The teal wing's color closes each headline: one quiet brand mark, no new color. */
.stop { color: var(--teal); }
.paper .stop { color: var(--paper-ink); }
/* 3. Rhythm: the reference sections (steps, questions) sit tighter and smaller than the selling sections. */
.band-tight { padding: clamp(56px, 7vw, 96px) 0; }
.band-tight h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -0.035em; }

/* Motion pass, 2026-11-12 (Welf picked "Both together"). site/motion.js drives all of it; without the script,
   or with reduced motion, the page is the still page above. */
/* 1. Work: one grid, every picture opens its site. */
.work-grid { display: grid; gap: 34px 22px; margin-top: clamp(36px, 5vw, 64px); list-style: none; }
@media (min-width: 760px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.work-card { display: grid; gap: 6px; align-content: start; text-decoration: none; min-width: 0; }
.work-frame { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 8px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-2); transition: border-color 0.3s, transform 0.25s var(--ease); }
.work-frame img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.work-frame img.tall { height: auto; display: block; }
/* A tall picture scrolls inside its frame when the visitor scrolls it (wheel, trackpad or finger). It never moves on its own. At either end the page takes over, so it cannot trap the scroll. */
.work-frame:has(img.tall) { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.work-card:hover .work-frame, .work-card:focus-visible .work-frame { border-color: var(--teal); }
.work-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.work-cap strong { font-size: 1.05rem; font-weight: 600; }
/* 2. Opening: live windows. */
.hero-work { transform-style: preserve-3d; }
.hero { perspective: 1400px; }
/* 3. Opening: old to rebuilt. The old layer is a copy of the opening dressed as a dated website; these are the
   only colors outside the palette and they appear nowhere else (DESIGN.md, Motion). */
.hero { --p: 100; }
.oldlayer { display: none; }
.js-rebuild .oldlayer {
  --old-bg: #ffffff; --old-ink: #111111; --old-head: #000080; --old-link: #0000ee; --old-edge: #9a9a9a; --old-panel: #d4d0c8;
  display: block; position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none;
  background: var(--old-bg); color: var(--old-ink); font-family: "Times New Roman", Times, serif;
  clip-path: inset(0 0 0 calc(var(--p) * 1%));
}
.js-rebuild .hero .rise { animation: none; }
.oldlayer h1 { font: 700 clamp(2rem, 4.2vw, 3.4rem)/1.15 "Times New Roman", Times, serif; letter-spacing: 0; color: var(--old-head); text-align: center; max-width: none; padding-bottom: 14px; border-bottom: 3px ridge var(--old-edge); }
.oldlayer .stop { color: inherit; }
.oldlayer .lead, .oldlayer .hero-note { font: 400 1.05rem/1.4 "Times New Roman", Times, serif; color: var(--old-ink); text-align: center; max-width: none; margin-top: 0; }
.oldlayer .hero-foot { max-width: none; justify-items: center; gap: 14px; }
.oldlayer .actions { justify-content: center; }
.oldlayer .btn { min-height: 0; flex: none; padding: 4px 12px; border-radius: 0; background: var(--old-panel); color: var(--old-ink); border: 2px outset var(--old-bg); font: 400 1rem/1.3 "Times New Roman", Times, serif; }
.oldlayer .btn-line { background: none; border: 0; padding: 4px 0; color: var(--old-link); text-decoration: underline; }
.oldlayer .hero-work { aspect-ratio: auto; max-width: 300px; margin-inline: auto; transform: none !important; }
.oldlayer .hero-work .hw { position: static; width: 100%; margin-bottom: 10px; border: 4px ridge var(--old-edge); border-radius: 0; box-shadow: none; filter: saturate(0.5) contrast(0.9); transform: none !important; }
.oldlayer .hero-work img { transform: none !important; }
.js-rebuild .hero { touch-action: pan-y; }
.rebuild-handle { position: absolute; top: 0; bottom: 0; z-index: 4; left: min(calc(var(--p) * 1%), calc(100% - 2px)); width: 44px; margin-left: -22px; display: grid; place-items: start center; padding: 13.25rem 0 0; cursor: ew-resize; touch-action: none; background: none; border: 0; }
@media (min-width: 1040px) { .rebuild-handle { place-items: center; padding: 0; } }
.rebuild-handle[hidden] { display: none; }
.rebuild-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 2px; background: var(--teal); }
/* The grip slides to the inner side of the line near either edge, so it never rests on the screen edge. */
.rebuild-handle span { position: relative; width: 36px; height: 56px; border-radius: 10px; background: var(--teal); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); transform: translateX(calc((50 - var(--p)) * 0.44px)); }
.rebuild-handle span::before { content: ""; width: 12px; height: 22px; border-inline: 2px solid var(--paper-ink); }
/* Before the script has built the old layer, a plain cover stops the rebuilt page from flashing first. */
.rb-pending .hero::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #ffffff; }
.dragging-rebuild, .dragging-rebuild * { user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: reduce) { .work-frame { transition: none; } }