/* Shared layout for every page: header, footer, buttons, sections.
   Colors, fonts and type classes come from /brand/tokens.css. */

:root {
  color-scheme: light;
  --gutter: var(--space-4);
  --bar-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Spring-mesh grid behind everything (field.js), fading out toward the edges.
   Body stays transparent so the fixed canvas shows through; html carries --ground. */
body { background: transparent; }

#field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 40% 58%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 40% 58%, #000 0%, transparent 100%);
}

.wrap {
  width: 100%;
  max-width: calc(1200px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Header: small mark at 44px, 20px gap, wordmark, nav right */
.bar { flex: none; border-bottom: 1px solid var(--line); background: var(--ground); color: var(--ink); color-scheme: dark; }

.bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: var(--bar-h);
}

.brand { display: inline-flex; align-items: center; gap: 20px; }
.brand img { display: block; width: 44px; height: 44px; }
.brand span { margin-right: -0.36em; }  /* trim trailing letter-spacing */

.nav { display: flex; gap: var(--space-4); }

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-muted);
  transition: color 0.15s ease;
}

.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

main { flex: 1; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 15px 24px;
  border-radius: var(--radius-sm);
  background: var(--signal);
  color: var(--on-signal);
  transition: opacity 0.15s ease;
}

.btn:hover { opacity: 0.88; }
.btn svg { width: 14px; height: 14px; }

.btn-secondary {
  padding: 14px 23px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
}

.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* Sections */
.section { padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.section-head { max-width: 40rem; margin-bottom: var(--space-4); }
.section-head .t-eyebrow { display: block; margin-bottom: var(--space-2); }
.muted { color: var(--ink-muted); }
.index { color: var(--ink-muted); }

/* Page hero */
.hero { padding: var(--space-5) 0; }
.hero .t-eyebrow { display: block; margin-bottom: var(--space-3); }
.hero h1 { max-width: 11em; margin-bottom: var(--space-3); }
.hero .t-lead { max-width: 44rem; color: var(--ink-muted); }
.hero .t-lead strong { color: var(--ink); font-weight: 500; }

/* Spec-sheet rows: index, heading, description */
.rows { list-style: none; border-top: 1px solid var(--line); }

.rows li {
  display: grid;
  grid-template-columns: 64px minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

/* Feature grid: cells split by 1px lines */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid li { padding: 32px; background: var(--ground); }
.grid .t-data { display: block; margin-bottom: var(--space-3); }
.grid h3 { margin-bottom: var(--space-1); }
.grid-1 { grid-template-columns: 1fr; }

/* Stacked cells beside an image */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-3);
}

.split-media {
  display: grid;
  place-items: center;
  min-height: 320px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}

.split-media img { width: 100%; height: 100%; object-fit: cover; }

/* Data table */
.table { overflow-x: auto; border: 1px solid var(--line); }
.table table { width: 100%; min-width: 560px; border-collapse: collapse; }
.table th, .table td { padding: 14px var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table th { background: var(--surface-raised); color: var(--ink-muted); font-weight: 400; }
.table tr:last-child td { border-bottom: 0; }
.table td:first-child { white-space: nowrap; }

/* Closing call to action */
.cta .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.cta h2 { margin-bottom: var(--space-1); }

/* Footer */
footer { flex: none; border-top: 1px solid var(--line); background: var(--ground); color: var(--ink-muted); }

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.links { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }

.links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.15s ease;
}

.links a:hover { color: var(--ink); }

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --gutter: var(--space-2); --bar-h: 72px; }
  .nav { gap: var(--space-3); }
  .section { padding: var(--space-4) 0; }
  .hero { padding: var(--space-4) 0; }
  .rows li { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-1) var(--space-2); }
  .rows li p { grid-column: 2; }
  .grid { grid-template-columns: 1fr; }
  .grid li { padding: var(--space-3); }
}

/* Too narrow for wordmark and nav side by side: keep the mark */
@media (max-width: 640px) {
  .brand span { display: none; }
}

/* Narrow phones: fit Process / Contact us beside the mark */
@media (max-width: 420px) {
  .nav { gap: var(--space-1); }
  .nav a { font-size: 11.5px; letter-spacing: 0.04em; }
  .t-display { font-size: 44px; }
}

/* Forms: labels above inputs, line-strong borders, signal only for errors */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { color: var(--ink-muted); }
.field label span { text-transform: none; letter-spacing: 0; }

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
}

.field textarea { min-height: 160px; resize: vertical; }
.field select { appearance: none; padding-right: 40px; }
.select { position: relative; }
.select::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid var(--ink-muted);
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--signal); }
.form button { justify-self: start; border: 0; cursor: pointer; }
.form button[disabled] { opacity: 0.6; cursor: wait; }

/* Range slider: ink fill over a line-strong track, square ink thumb */
.range-head { display: flex; justify-content: space-between; align-items: baseline; }
.range-head output { color: var(--ink); }
.range-scale { display: flex; justify-content: space-between; font-size: 12px; }

.field .range {
  --fill: 0%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.range::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(var(--ink), var(--ink)) 0 / var(--fill) 100% no-repeat, var(--line-strong);
}

.range::-moz-range-track { height: 2px; background: var(--line-strong); }
.range::-moz-range-progress { height: 2px; background: var(--ink); }

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -7px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
}

.range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 0; background: var(--ink); }

@media (max-width: 760px) {
  .form { grid-template-columns: 1fr; }
}

/* First-visit loader. /loader/boot.js adds .cm-boot to <html> once per session;
   otherwise the overlay never paints. Sequence: spin, lock, glide into the header
   mark while the page fades in (.cm-boot-reveal), then hand off to the real mark
   (.cm-boot-landed). Glide and reveal last 700ms; keep in step with GLIDE in boot.js. */
#cm-boot { display: none; }

.cm-boot #cm-boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--ground);
  transition: opacity 0.15s linear, background-color 0.7s ease;
  /* Failsafe: if load never fires, get out of the way after 10 s */
  animation: cm-boot-failsafe 0.15s linear 10s forwards;
}

#cm-boot concentric-loader { width: clamp(140px, 22vmin, 240px); aspect-ratio: 1 / 1; color: var(--ink); }

/* Page waits underneath; the header mark waits for the loader to land on it */
.cm-boot body > :not(#cm-boot) { opacity: 0; animation: cm-boot-show 0s linear 10s forwards; }
.cm-boot .brand img { opacity: 0; }

.cm-boot-reveal #cm-boot { background-color: transparent; pointer-events: none; }
.cm-boot-reveal body > :not(#cm-boot) { opacity: 1; transition: opacity 0.7s ease; }
.cm-boot-reveal #cm-boot concentric-loader { transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.15s linear; }

.cm-boot-landed .brand img { opacity: 1; transition: opacity 0.15s linear; }
.cm-boot-landed #cm-boot concentric-loader { opacity: 0; }

/* Reduced motion: no glide, the overlay just fades */
.cm-boot #cm-boot.is-done { opacity: 0; pointer-events: none; }
.cm-boot:has(#cm-boot.is-done) body > :not(#cm-boot),
.cm-boot:has(#cm-boot.is-done) .brand img { opacity: 1; transition: opacity 0.15s linear; }

@keyframes cm-boot-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes cm-boot-show { to { opacity: 1; } }