/* Grand Street Works — shared design system.
   Linked by index.html and what-we-build/index.html. The generated pages under
   work/ carry their own inline subset and are not affected by this file. */

:root {
  --bg-color: #E5E5E6;
  --text-color: #050505;
  --border-color: #050505;
  --border-light: rgba(5, 5, 5, 0.15);
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --nav-height: 60px;
}

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

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.4;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 2rem;
  max-width: 1400px;
}

h2 {
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color);
}

p {
  font-size: 1.125rem;
  color: rgba(5, 5, 5, 0.8);
  line-height: 1.5;
}

.text-large {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

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

a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--text-color);
  outline-offset: 3px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
}

.col-span-6 { grid-column: span 6; }
.col-span-12 { grid-column: 1 / -1; }

.pad-box-large {
  padding: 4rem 2rem;
}

.border-right { border-right: 1px solid var(--border-color); }
.border-bottom { border-bottom: 1px solid var(--border-color); }
.border-top { border-top: 1px solid var(--border-color); }

.structural-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.structural-grid > div {
  background-color: var(--bg-color);
}

/* ---------- Header ---------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  z-index: 100;
}

.logo-mark {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.site-nav a { color: rgba(5, 5, 5, 0.6); }
.site-nav a:hover { color: var(--text-color); }

.status-dot {
  width: 8px;
  height: 8px;
  background-color: #C2D57D;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px rgba(194, 213, 125, 0.5);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: var(--nav-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
}

#canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.9;
}

.hero-content {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

/* The hero blocks pointer events so the shader canvas underneath stays
   interactive; anything the visitor is meant to touch has to opt back in.
   Before the capture form existed this was links only. */
.hero-content a,
.hero-content .hero-capture { pointer-events: auto; }

/* Principal portrait. The source is 400px square, so it is never asked to
   render wider than half that: anything larger and the softness shows. */
.principal {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 3rem;
}

.principal-photo {
  flex: none;
  width: 200px;
  margin: 0;
  border: 1px solid var(--border-color);
}

.principal-photo img { display: block; width: 100%; height: auto; filter: contrast(120%); }

/* Keeps a second person's text on the same column as the first's when there
   is no portrait to hold the space. */
.principal-spacer { flex: none; width: 200px; }

@media (max-width: 700px) {
  .principal { flex-direction: column; gap: 1.5rem; }
  .principal-photo { width: 160px; }
  .principal-spacer { display: none; }
}

.hero-main {
  padding: 4rem 2rem;
  flex: 1;
  display: flex;
  align-items: center;
  background: linear-gradient(to right, rgba(229, 229, 230, 0.9) 0%, rgba(229, 229, 230, 0.4) 100%);
}

.hero-cta {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-top: 2.5rem;
  padding: 0.875rem 1.5rem;
  background: var(--text-color);
  color: var(--bg-color);
  transition: opacity 0.2s ease;
}

.hero-cta:hover { opacity: 0.85; }

.stats-ticker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-color);
  background: var(--bg-color);
  position: relative;
  z-index: 10;
}

.stat-item {
  padding: 1.5rem 2rem;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-item:last-child {
  border-right: none;
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ---------- Section headers ---------- */
.section-header {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--text-color);
  color: var(--bg-color);
}

.section-header .label {
  color: var(--bg-color);
}

/* ---------- Services ---------- */
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: background-color 0.3s ease;
}

.service-card:hover {
  /* solid color — the grid parent behind the card is black, so a
     transparent hover tint would show through as a black card */
  background-color: #DEDEDF;
}

.service-header {
  padding: 2rem;
  border-bottom: 1px solid var(--border-color);
}

.service-note {
  display: block;
  margin-top: 0.75rem;
  color: rgba(5, 5, 5, 0.55);
  text-transform: none;
  letter-spacing: 0.02em;
}

.service-body {
  padding: 2rem;
  flex: 1;
}

.deliverables-list {
  list-style: none;
  margin-top: 2rem;
  border-top: 1px solid var(--border-color);
}

.deliverables-list li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.deliverables-list li::before {
  content: '+';
  font-family: var(--font-mono);
  color: var(--text-color);
}

/* ---------- Process ---------- */
.process-step {
  padding: 3rem 2rem;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2rem;
}

.step-number {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 500;
  color: var(--border-light);
  line-height: 1;
}

/* ---------- Principal ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
}

.data-table tr {
  border-bottom: 1px solid var(--border-light);
}

.data-table td {
  padding: 1rem 0;
  font-size: 0.875rem;
}

.data-table td:first-child {
  font-family: var(--font-mono);
  color: rgba(5, 5, 5, 0.6);
  width: 40%;
}

/* ---------- FAQ ---------- */
details {
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-color);
}

summary {
  padding: 2rem;
  font-size: 1.25rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '↓';
  font-family: var(--font-mono);
  transition: transform 0.3s ease;
}

details[open] summary::after {
  transform: rotate(180deg);
}

.faq-content {
  padding: 0 2rem 2rem 2rem;
}

.faq-content p { max-width: 70ch; }

/* ---------- Contact ---------- */
.footer-cta {
  background-color: var(--text-color);
  color: var(--bg-color);
  text-align: center;
}

.footer-cta h2 {
  margin-bottom: 1.5rem;
}

.footer-cta p {
  color: rgba(229, 229, 230, 0.7);
  max-width: 52ch;
  margin: 0 auto 2.5rem;
}

.email-link {
  display: inline-block;
  font-size: clamp(1.25rem, 4vw, 3rem);
  font-family: var(--font-mono);
  color: var(--bg-color);
  border: 1px solid var(--bg-color);
  padding: 1rem 2rem;
  transition: all 0.3s ease;
}

.email-link:hover {
  background-color: var(--bg-color);
  color: var(--text-color);
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem 2rem;
  background-color: var(--bg-color);
  border-top: 1px solid var(--border-color);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .structural-grid, .stats-ticker {
    grid-template-columns: 1fr;
  }
  .border-right {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  .stat-item:last-child { border-bottom: none; }
  .grid-container {
    display: block;
  }
  .col-span-6, .col-span-12 {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  .process-step {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  header { padding: 0 1.25rem; }
  .site-nav { gap: 1rem; }
  .logo-mark .label { font-size: 0.6875rem; }
  .hero-main, .pad-box-large { padding-left: 1.25rem; padding-right: 1.25rem; }
  .stat-item, .section-header,
  .service-header, .service-body, .process-step { padding-left: 1.25rem; padding-right: 1.25rem; }
  summary { padding: 1.5rem 1.25rem; }
  .faq-content { padding: 0 1.25rem 1.5rem; }
  footer { padding: 1.5rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  summary::after, .service-card, .email-link, .hero-cta { transition: none; }
}

/* ---------- Page components ---------- */
.tile {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: background-color 0.3s ease;
}
.tile:hover { background-color: #DEDEDF; }
.tile p { font-size: 1.0625rem; }

.band { display: grid; grid-template-columns: 1fr 1fr; }
.band > div { padding: 4rem 2rem; }
.band > div:first-child { border-right: 1px solid var(--border-color); }

.refusal-grid { display: grid; grid-template-columns: 1fr 1fr; }
.refusal-grid > div {
  padding: 3rem 2rem;
  border-bottom: 1px solid var(--border-color);
}
.refusal-grid > div:nth-child(odd) { border-right: 1px solid var(--border-color); }
.refusal-grid > div:nth-last-child(-n+2) { border-bottom: none; }
.refusal-grid h3 { margin-bottom: 0.75rem; }

.callout {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-top: 2rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--border-color);
}
.callout:hover { background: var(--text-color); color: var(--bg-color); }


/* ---------- Work grid (added with the build-first rewrite) ---------- */
/* The intro above the grid centres on wide screens: left-aligned under a
   64ch cap it sat in the left third with the rest of the row empty. Tablet
   and phone keep the left alignment the rest of the page uses. */
@media (min-width: 1025px) {
  .work-intro { text-align: center; }
  .work-intro p { margin-left: auto; margin-right: auto; }
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.work-grid a {
  background-color: var(--bg-color);
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background-color 0.2s ease;
}
.work-grid a:hover { background-color: #DEDEDF; }
.work-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: rgba(5, 5, 5, 0.45);
}
.work-name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.work-firm {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: rgba(5, 5, 5, 0.6);
}

@media (max-width: 1024px) {
  .band, .refusal-grid { grid-template-columns: 1fr; }
  .band > div:first-child { border-right: none; border-bottom: 1px solid var(--border-color); }
  .refusal-grid > div:nth-child(odd) { border-right: none; }
  .refusal-grid > div:nth-last-child(2) { border-bottom: 1px solid var(--border-color); }
  /* Two across from tablet down: twenty single-width rows was a long scroll
     of mostly white space. Cells tighten with the viewport. */
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid a { padding: 1.125rem 1.5rem; gap: 0.35rem; }
}
@media (max-width: 640px) {
  .tile, .band > div, .refusal-grid > div { padding-left: 1.25rem; padding-right: 1.25rem; }
  .work-grid a { padding: 0.875rem 1rem; gap: 0.25rem; }
  .work-name { font-size: 0.9375rem; }
}


/* ===================================================================
   Intake / CTA components (added with the CTA rework).
   Used by the hero URL capture on index.html and by the stepped
   diagnostic at /start/. The visual rule is the same as everywhere
   else on the site: 1px black borders, no radius, mono for anything
   that behaves like a label or a control.
   =================================================================== */

/* ---------- Hero URL capture ---------- */
.hero-capture {
  margin-top: 2.5rem;
  max-width: 720px;
}

.hero-capture-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
}

.hero-capture input[type="text"] {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 1.125rem 1.25rem;
  border: none;
  background: transparent;
  color: var(--text-color);
}

.hero-capture input[type="text"]::placeholder {
  color: rgba(5, 5, 5, 0.4);
}

.hero-capture input[type="text"]:focus {
  outline: none;
  background: rgba(5, 5, 5, 0.04);
}

.hero-capture button {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1.125rem 1.75rem;
  border: none;
  border-left: 1px solid var(--border-color);
  background: var(--text-color);
  color: var(--bg-color);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.hero-capture button:hover { opacity: 0.85; }

.hero-capture-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  margin-top: 0.875rem;
  color: rgba(5, 5, 5, 0.62);
}

.hero-capture-note a {
  color: var(--text-color);
  text-decoration: underline;
}

/* ---------- Stepped diagnostic ---------- */
.intake-shell {
  padding-top: var(--nav-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.intake-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: var(--nav-height);
  background: var(--bg-color);
  z-index: 40;
}

.intake-progress-bar {
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-light);
  position: relative;
  max-width: 420px;
}

.intake-progress-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--text-color);
  height: 1px;
  transition: width 0.35s ease;
}

.intake-step {
  padding: clamp(2.5rem, 7vw, 6rem) 2rem;
  max-width: 1100px;
  width: 100%;
}

.intake-step[hidden] { display: none; }

.intake-step h2 {
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  max-width: 22ch;
}

.intake-help {
  margin-top: 1.25rem;
  max-width: 60ch;
  color: rgba(5, 5, 5, 0.7);
}

.intake-field {
  margin-top: 2.5rem;
  max-width: 640px;
}

.intake-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.625rem;
}

.intake-field input[type="text"],
.intake-field input[type="email"],
.intake-field input[type="tel"],
.intake-field textarea,
.intake-field select {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  color: var(--text-color);
  appearance: none;
  border-radius: 0;
}

.intake-field textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }

.intake-field input:focus,
.intake-field textarea:focus,
.intake-field select:focus {
  outline: none;
  background: rgba(5, 5, 5, 0.05);
}

.intake-field-error {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  margin-top: 0.625rem;
  color: #8A2314;
}

.intake-field-error[hidden] { display: none; }

/* Option lists — the routing questions */
.intake-options {
  display: grid;
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  margin-top: 2.5rem;
}

.intake-options.cols-2 { grid-template-columns: repeat(2, 1fr); }

.intake-option {
  background: var(--bg-color);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 1.5rem 1.5rem;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.125rem;
  align-items: start;
  transition: background 0.15s ease;
}

.intake-option:hover { background: rgba(5, 5, 5, 0.05); }

.intake-option input { position: absolute; opacity: 0; pointer-events: none; }

.intake-option .marker {
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--border-color);
  margin-top: 0.2rem;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1;
  flex: none;
}

.intake-option .opt-title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.intake-option .opt-note {
  display: block;
  font-size: 0.9375rem;
  margin-top: 0.375rem;
  color: rgba(5, 5, 5, 0.65);
  line-height: 1.45;
}

.intake-option.is-on {
  background: var(--text-color);
  color: var(--bg-color);
}

.intake-option.is-on .opt-note { color: rgba(229, 229, 230, 0.72); }

.intake-option.is-on .marker {
  border-color: var(--bg-color);
  background: var(--bg-color);
  color: var(--text-color);
}

/* Trade picker. Twenty-one trades never divide evenly into four or two
   columns, so the usual 1px-gap-over-a-dark-background trick painted the
   empty cells of the last row solid black. Rules live on the cells instead
   and empty grid slots simply draw nothing. */
.intake-trades {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  margin-top: 2.5rem;
}

.intake-trades button {
  background: var(--bg-color);
  border: none;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: left;
  padding: 1rem 1.125rem;
  cursor: pointer;
  color: var(--text-color);
  transition: background 0.15s ease;
}

.intake-trades button:hover { background: rgba(5, 5, 5, 0.06); }

.intake-trades button.is-on {
  background: var(--text-color);
  color: var(--bg-color);
}

/* Step navigation */
.intake-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}

.intake-btn {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 1.75rem;
  border: 1px solid var(--border-color);
  background: var(--text-color);
  color: var(--bg-color);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.intake-btn:hover { opacity: 0.85; }
.intake-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.intake-btn.ghost {
  background: transparent;
  color: var(--text-color);
}

.intake-btn.ghost:hover { background: var(--text-color); color: var(--bg-color); opacity: 1; }

.intake-skip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(5, 5, 5, 0.6);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* ---------- Result ---------- */
.intake-verdict {
  border: 1px solid var(--border-color);
  margin-top: 2.5rem;
}

.intake-verdict-head {
  padding: 2rem;
  background: var(--text-color);
  color: var(--bg-color);
}

.intake-verdict-head h3 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 0.75rem;
}

.intake-verdict-head .label { color: rgba(229, 229, 230, 0.7); }

.intake-verdict-body { padding: 2rem; }
.intake-verdict-body p { max-width: 64ch; }
.intake-verdict-body p + p { margin-top: 1rem; }

.intake-secondary {
  margin-top: 1px;
  border-top: 1px solid var(--border-color);
  padding: 1.75rem 2rem;
  background: rgba(5, 5, 5, 0.04);
}

.intake-secondary p { max-width: 64ch; margin-top: 0.5rem; }

@media (max-width: 900px) {
  .intake-trades { grid-template-columns: repeat(2, 1fr); }
  .intake-options.cols-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .intake-step { padding-left: 1.25rem; padding-right: 1.25rem; }
  .intake-progress { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hero-capture button { flex: 1 1 100%; border-left: none; border-top: 1px solid var(--border-color); }
  .intake-verdict-head, .intake-verdict-body, .intake-secondary { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Header CTA — the nav needed one thing that looks like an action rather
   than five links that look identical. */
.nav-cta {
  border: 1px solid var(--border-color);
  padding: 0.5rem 0.875rem;
  color: var(--text-color) !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-cta:hover { background: var(--text-color); color: var(--bg-color) !important; }

@media (max-width: 560px) {
  .site-nav .nav-hide-sm { display: none; }
}

/* Labels that exist for screen readers only — the hero capture's input is
   explained by its placeholder visually, which is not an accessible name. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The footer CTA keeps the raw address visible under the button — it is a
   trust signal on a page selling directness — but it is no longer the
   thing being asked for. */
.footer-cta-alt {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  margin: 2rem auto 0 !important;
}
.footer-cta-alt a { color: var(--bg-color); text-decoration: underline; }


/* Short viewports — a 13in laptop is roughly 700px of usable height, and at
   the default scale the headline pushed the URL capture off screen. The CTA
   being visible without scrolling is worth more than the headline being
   as large as it can possibly be. */
@media (max-height: 900px) and (min-width: 900px) {
  .hero h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); margin-bottom: 1.5rem; }
  .hero-main { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .hero-capture { margin-top: 1.75rem; }
  .stat-item { padding-top: 1.125rem; padding-bottom: 1.125rem; }
}

/* ---------- Hero montage prototypes (?hero=dissolve | wall | mix) ---------- */
/* Sits where the shader canvas sits, under .hero-content and its scrim. The
   left-heavy gradient on .hero-main already keeps the copy legible, so the
   images run at full strength and the composition lives in the right half. */
.hero-montage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg-color);
}
.hero-montage[hidden] { display: none; }
.hero-montage img,
.hero-montage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Firm and trade for whichever build is up. Under the nav, clear of the copy. */
.hero-montage-caption {
  position: absolute;
  top: calc(var(--nav-height) + 1.5rem);
  right: 2rem;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--text-color);
  padding: 0.6rem 0.8rem;
  background: rgba(229, 229, 230, 0.85);
  border: 1px solid var(--border-light);
}
.hero-montage-caption[hidden] { display: none; }
.hero-montage-trade { opacity: 0.55; }

/* A single build, full bleed. Two of these stack so one can fade over the
   other; in mix mode they sit over the wall. */
.hero-montage-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-montage-layer.is-on { opacity: 1; }
.hero-montage-layer.is-on img {
  animation: hero-montage-drift 6s linear both;
}
@keyframes hero-montage-drift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.08); }
}

/* The wall: every build at once, five across, tiles trading places. */
.hero-montage-wall {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
}
.hero-montage-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-color);
}
.hero-montage-tile img {
  position: absolute;
  inset: 0;
  transition: opacity 1s ease;
}
.hero-montage-tile img.is-out { opacity: 0; }
.hero-montage-tile-name {
  position: absolute;
  left: 0.6rem;
  bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color);
  background: rgba(229, 229, 230, 0.85);
  padding: 0.2rem 0.4rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hero-montage-tile:hover .hero-montage-tile-name { opacity: 1; }
/* Wall-only mode has a name on every tile, so the single caption is redundant. */
.hero-montage--wall ~ .hero-montage-caption { display: none; }
/* While a build covers the wall, the tiles under it must not take the click. */
.hero-montage--mix .hero-montage-layer.is-on ~ .hero-montage-wall,
.hero-montage--mix .hero-montage-layer.is-on + .hero-montage-layer { pointer-events: none; }

@media (max-width: 700px) {
  /* At phone width the caption lands on the headline; the plate has to speak for itself. */
  .hero-montage-caption { display: none; }
  /* Eight tiles, not twenty: at phone width twenty becomes texture. */
  .hero-montage-wall {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .hero-montage-wall .hero-montage-tile:nth-child(n+9) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-montage-layer,
  .hero-montage-tile img { transition: none; }
  .hero-montage-layer.is-on img { animation: none; }
}