/* Busy Plumbing — shared site styles. Tokens: see brand-spec.md. No raw colour outside :root. */
/* ─── self-hosted fonts (latin subset, SIL OFL 1.1 — see assets/fonts/OFL-*.txt) ─── */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/space-grotesk-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url(fonts/ibm-plex-sans-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg:      oklch(0.155 0.016 264);  /* #0B0F17 architectural slate */
  --surface: oklch(0.255 0.022 262);  /* #1E2430 muted charcoal */
  --fg:      oklch(0.985 0.002 248);  /* #F9FAFB frosted zinc */
  --muted:   oklch(0.76 0.018 260);
  --border:  oklch(0.33 0.026 262);
  --accent:  oklch(0.82 0.10 296);    /* light purple — functional accent */
  --accent-hover: oklch(0.89 0.07 296);
  --danger:  oklch(0.72 0.17 25);
  --ok:      oklch(0.75 0.14 155);

  /* brand-mark tokens — logo + WebGL field only */
  --brand-navy:  oklch(0.19 0.06 262);
  --brand-steel: oklch(0.42 0.09 250);
  --brand-mark:  oklch(0.68 0.16 272);

  --accent-soft: color-mix(in oklch, var(--accent) 18%, transparent);
  --fg-soft:     color-mix(in oklch, var(--fg) 5%, transparent);

  --font-display: 'Space Grotesk', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-h1: clamp(40px, 5.6vw, 76px);
  --fs-h2: clamp(30px, 3.6vw, 46px);
  --fs-h3: 21px;
  --fs-lead: 19px;
  --fs-meta: 13px;
  --gap-md: 20px; --gap-lg: 32px; --gap-xl: 56px;
  --container: 1200px;
  --gutter: 32px;
  --radius: 6px;
  --radius-lg: 8px;
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; font-family: var(--font-display); font-weight: 600; margin: 0; }
h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.025em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--fg); color: var(--bg); padding: 8px 14px; z-index: 50; border-radius: var(--radius); }
.skip:focus { left: 8px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section + .section { border-top: 1px solid color-mix(in oklch, var(--fg) 12%, transparent); }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); max-width: 58ch; margin: 0; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--gap-md); }
.meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); letter-spacing: 0.02em; }
.idx  { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.link { text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--fg) 35%, transparent); text-underline-offset: 4px; transition: text-decoration-color .15s; }
.link:hover { text-decoration-color: var(--fg); }
.section-head { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap-xl); align-items: end; margin-bottom: var(--gap-xl); }
.section-head .lead { justify-self: end; }
@media (max-width: 920px) { .section-head { grid-template-columns: 1fr; gap: var(--gap-md); } .section-head .lead { justify-self: start; } }

/* ─── nav ─── */
.topnav { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--bg) 72%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid color-mix(in oklch, var(--border) 80%, transparent); }
.field-page .topnav { position: relative; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
.topnav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-lg); height: var(--nav-h); }
.brand img { height: 30px; width: auto; }
.topnav nav { display: flex; gap: 4px; }
.topnav nav a { font-size: 14px; color: var(--muted); padding: 10px 14px; border-radius: var(--radius); transition: background .15s, color .15s; }
.topnav nav a:hover { color: var(--fg); background: var(--fg-soft); }
.topnav nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -1px 0 var(--fg); border-radius: 0; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: var(--radius); place-items: center; }
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: color-mix(in oklch, var(--fg) 10%, transparent); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .topnav nav.open { animation: none; } }
.nav-toggle svg { width: 20px; height: 20px; }
@media (max-width: 1000px) {
  .topnav nav {
    display: none; position: absolute; top: calc(var(--nav-h) - 6px); right: var(--gutter); left: auto;
    width: min(260px, calc(100% - 2 * var(--gutter))); flex-direction: column; gap: 2px; padding: 8px;
    background: color-mix(in oklch, var(--bg) 62%, transparent);
    backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px -12px color-mix(in oklch, black 60%, transparent);
    transform-origin: top right;
  }
  .topnav nav.open { display: flex; animation: menu-in .16s ease-out; }
  .topnav nav a { font-size: 15px; color: var(--fg); padding: 12px 14px; min-height: 44px; border-radius: var(--radius); }
  .topnav nav a:hover { background: color-mix(in oklch, var(--fg) 10%, transparent); }
  .topnav nav a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--accent); background: color-mix(in oklch, var(--fg) 6%, transparent); border-radius: var(--radius); }
  .nav-toggle { display: grid; }
}

/* ─── buttons ─── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: var(--radius); border: 1px solid transparent; font-size: 15px; font-weight: 500; transition: transform .06s ease, background .15s ease, border-color .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--fg); border-color: color-mix(in oklch, var(--fg) 28%, transparent); }
.btn-secondary:hover { background: color-mix(in oklch, var(--fg) 10%, var(--bg)); border-color: var(--fg); }
.btn-text { color: var(--fg); padding-inline: 4px; min-height: 48px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: color-mix(in oklch, var(--fg) 35%, transparent); }
.btn-text:hover { text-decoration-color: var(--fg); }
.btn-sm { min-height: 44px; padding: 10px 16px; font-size: 14px; }
/* arrow is revealed only on hover/focus; its space is reserved so the button never resizes */
.btn-arrow::after { content: '→'; font-family: var(--font-mono); opacity: 0; transform: translateX(-6px); transition: opacity .15s ease, transform .15s ease; }
.btn-arrow:hover::after, .btn-arrow:focus-visible::after { opacity: 1; transform: none; }

/* ─── WebGL field ─── */
.field-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -2;
  background: radial-gradient(120% 90% at 85% 20%, var(--brand-steel), var(--brand-navy) 55%, var(--bg)); }

/* every page: full-viewport fixed field, type only, no filled panels */
.field-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; position: relative; isolation: isolate; overflow-x: hidden; }
/* Fixed to the large viewport (lvh) so the mobile address bar showing/hiding doesn't resize it mid-scroll */
.field-page .field-canvas { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100vh; height: 100lvh; transform: translateZ(0); }
.field-page::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; transform: translateZ(0); pointer-events: none;
  background: linear-gradient(90deg, color-mix(in oklch, var(--bg) 82%, transparent) 0%, color-mix(in oklch, var(--bg) 45%, transparent) 50%, transparent 80%); }
.home-main, .field-page main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(48px, 8vh, 112px); }
.field-page main > .container { width: 100%; }
.home-copy { max-width: 780px; }
.home-copy h1 { margin-bottom: var(--gap-lg); }
.home-copy .lead { color: color-mix(in oklch, var(--fg) 82%, var(--muted)); margin-bottom: var(--gap-lg); }
.cta-row { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; }
.hero-coord { position: absolute; right: var(--gutter); top: calc(var(--nav-h) + 24px); text-align: right; }
@media (max-width: 920px) { .hero-coord { display: none; } }
.field-page:not(.is-home)::before {
  background: linear-gradient(90deg, color-mix(in oklch, var(--bg) 86%, transparent) 0%, color-mix(in oklch, var(--bg) 70%, transparent) 55%, color-mix(in oklch, var(--bg) 55%, transparent) 100%); }
.field-page:not(.is-home) main { justify-content: flex-start; padding-block: 0; }

/* subpage intro (shares the homepage field; no band of its own) */
.page-head { padding-block: clamp(72px, 10vw, 128px) clamp(48px, 6vw, 72px); border-bottom: 1px solid color-mix(in oklch, var(--fg) 12%, transparent); }
.page-head h1 { font-size: clamp(38px, 4.8vw, 64px); max-width: 18ch; margin-bottom: var(--gap-lg); }
.page-head .lead { color: color-mix(in oklch, var(--fg) 80%, var(--muted)); }

/* ─── capabilities ─── */
.pillar-row { display: grid; grid-template-columns: 120px 5fr 6fr; gap: var(--gap-xl); padding-block: 48px; border-top: 1px solid var(--border); }
.pillar-row:first-child { border-top: 0; padding-top: 0; }
.pillar-row h2 { font-size: clamp(26px, 2.8vw, 36px); margin-bottom: 16px; }
.pillar-row p { color: var(--muted); margin: 0 0 20px; max-width: 46ch; }
.pillar-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius); margin-top: 14px; }
.pillar-mark svg { width: 22px; height: 22px; }
.scope-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.scope-list li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.scope-list .meta { font-size: 11px; white-space: nowrap; }
@media (max-width: 920px) { .pillar-row { grid-template-columns: 1fr; gap: 20px; } }

/* ─── process ─── */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
.step { border-top: 1px solid var(--fg); padding-top: 24px; position: relative; }
.step::before { content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--fg); border-radius: 50%; }
.step-num { font-family: var(--font-mono); font-size: clamp(44px, 5vw, 64px); line-height: 1; letter-spacing: -0.04em; color: color-mix(in oklch, var(--fg) 22%, transparent); margin-bottom: 28px; }
.step h3 { margin-bottom: 12px; }
.step p { margin: 0 0 20px; color: var(--muted); font-size: 15px; max-width: 36ch; }
.tag { display: inline-flex; align-items: center; padding: 5px 10px; color: var(--fg); border: 1px solid var(--border); border-radius: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 920px) { .process { grid-template-columns: 1fr; gap: var(--gap-xl); } }

.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table th, .spec-table td { text-align: left; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.spec-table th { width: 32%; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.spec-table tr:first-child th, .spec-table tr:first-child td { border-top: 1px solid var(--border); }
@media (max-width: 640px) { .spec-table th, .spec-table td { display: block; width: 100%; } .spec-table th { border-bottom: 0; padding-bottom: 4px; } .spec-table tr:first-child td { border-top: 0; } }

.next-strip { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.next-strip h2 { font-size: clamp(26px, 3vw, 38px); max-width: 22ch; }

/* ─── contact / form ─── */
.form-wrap .form { max-width: 820px; }
.form { padding: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; font-weight: 500; }
.field label .opt, .field label .req { color: var(--muted); font-weight: 400; }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklch, var(--bg) 55%, transparent); color: var(--fg); font: inherit; font-size: 15px; transition: border-color .15s; }
.input::placeholder, .textarea::placeholder { color: color-mix(in oklch, var(--muted) 75%, var(--bg)); }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in oklch, var(--fg) 30%, var(--border)); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--accent-soft); outline-offset: 0; border-color: var(--accent); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.select option { background: var(--surface); color: var(--fg); }
.textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.err { font-size: 13px; color: color-mix(in oklch, var(--danger) 75%, var(--fg)); margin: 0; }
.err:empty { display: none; }
.hint { font-size: 12px; color: var(--muted); margin: 0; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid color-mix(in oklch, var(--fg) 12%, transparent); }
.field[hidden] { display: none; }
.status { margin-top: 20px; border: 1px solid color-mix(in oklch, var(--ok) 50%, var(--border)); background: color-mix(in oklch, var(--ok) 10%, var(--bg)); border-radius: var(--radius); padding: 16px 18px; font-size: 14px; }
.status[hidden] { display: none; }
.status strong { display: block; font-family: var(--font-display); font-size: 16px; margin-bottom: 4px; }

/* ─── footer ─── */
.pagefoot { border-top: 1px solid var(--border); padding-block: 56px 40px; color: var(--muted); font-size: 14px; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap-lg); flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid var(--border); }
.foot-top img { height: 28px; width: auto; }
.foot-links { display: flex; gap: 8px 32px; flex-wrap: wrap; }
.foot-links a { color: var(--fg); padding-block: 10px; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-legal { padding-top: 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.field-page .pagefoot { border-top-color: color-mix(in oklch, var(--fg) 12%, transparent); padding-block: 20px; }
.field-page .pagefoot .foot-legal { padding-top: 0; align-items: center; }
.foot-legal .foot-links { display: flex; gap: 4px 28px; flex-wrap: wrap; }
.field-page .pagefoot .foot-links a { padding-block: 0; min-height: 44px; display: inline-flex; align-items: center; }

.form-foot .meta { max-width: 44ch; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ─── long-form prose (privacy) ─── */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 48px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: color-mix(in oklch, var(--fg) 85%, var(--muted)); }
.prose ul { padding-left: 20px; }
.prose li + li { margin-top: 6px; }

/* ─── tablet (641–920px): use the extra width instead of the phone layout ─── */
@media (min-width: 641px) and (max-width: 920px) {
  .pillar-row { grid-template-columns: 1fr 1fr; column-gap: var(--gap-lg); row-gap: 20px; }
  .pillar-row > div:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
  .pillar-row > div:first-child .pillar-mark { margin-top: 0; }
  .step { display: grid; grid-template-columns: 88px 1fr; column-gap: 20px; align-items: start; }
  .step > * { grid-column: 2; }
  .step > .step-num { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; }
  .step > .tag { justify-self: start; }
}