/* ============================================================
   Cipherverse — components.css  ·  section-level components
   Every hex traces to a DNA token in style.css.
   ============================================================ */

/* ── Home hero (Stacked Wordmark + pixel canvas) ───────── */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; padding-block: clamp(4rem, 10vw, 7rem); }
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.85rem; border: 1px solid var(--line-2);
  border-radius: var(--radius-full); background: rgba(14,15,18,0.65);
  backdrop-filter: blur(8px); margin-bottom: 1.75rem;
}
.hero-pill .mono { font-size: var(--t-xs); color: var(--muted); }
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 10px var(--lime); position: relative; flex: none;
}
.pulse-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid var(--lime); animation: pulseRing 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulseRing {
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

.hero-wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--t-hero); line-height: 0.82; letter-spacing: -0.04em; margin-bottom: 1.75rem; }
.hero-wordmark .line { display: block; }
.hero-wordmark .line-2 { color: var(--lime); }
.hero-sub { color: var(--muted); font-size: var(--t-lg); max-width: 46ch; }

/* ── Step-row — shared component for the intro splash + hero console.
   Same markup/tokens in both places so the 3-step process reads as one
   consistent, dominant motif rather than a one-off. Numeral carries the
   weight (display font, lime) instead of leaning on color alone. ──── */
.step-row { display: flex; align-items: flex-start; gap: 1rem; }
.step-n { font-family: var(--font-display); font-weight: 700; color: var(--lime); line-height: 1; min-width: 2ch; }
.step-copy { display: flex; flex-direction: column; gap: 0.3rem; }
.step-title { font-family: var(--font-body); font-weight: 600; color: var(--soft); }
.step-note { font-family: var(--font-mono); color: var(--muted); max-width: 36ch; }
.step-ok { margin-left: auto; align-self: center; color: var(--lime); font-family: var(--font-mono); font-size: var(--t-xs); }

/* Build console (hero right column) — now hosts the real 3-step process,
   not filler terminal text, so it carries genuine weight on every screen. */
.hero-console { margin-top: 2.5rem; border: 1px solid var(--line-2); background: rgba(14,15,18,0.72); border-radius: var(--radius-lg); overflow: hidden; }
.console-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.console-dots { display: flex; gap: 5px; }
.console-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.console-dots i:nth-child(3) { background: var(--lime); }
.console-title { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted); }
.console-badge {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--lime); background: rgba(198, 255, 53, 0.1); border: 1px solid var(--lime);
  padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); letter-spacing: 0.05em;
}
.console-body-wrap { padding: 1.25rem 1.15rem; }
.console-cmd-line {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.85rem; background: var(--ground); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); margin-bottom: 1.1rem;
}
.cmd-prompt { color: var(--lime); font-family: var(--font-mono); font-weight: 700; }
.console-cmd-line .mono { font-size: var(--t-xs); color: var(--soft); }
.console-steps { display: grid; gap: 1.1rem; list-style: none; }
.console-steps .step-n { font-size: var(--t-xl); }
.console-steps .step-title { font-size: var(--t-base); }
.console-steps .step-note { font-size: var(--t-xs); }
.console-steps .step-row:not(:last-child) { padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.console-telemetry {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line);
  text-align: center;
}
.telemetry-item { background: var(--ground); border: 1px solid var(--line); padding: 0.5rem 0.35rem; border-radius: var(--radius-sm); }
.telemetry-item .t-label { display: block; font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted); letter-spacing: 0.05em; }
.telemetry-item .t-val { display: block; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--lime); margin-top: 0.15rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.btn-glow { position: relative; box-shadow: 0 0 25px rgba(198, 255, 53, 0.25); }
.btn-glow:hover { box-shadow: 0 0 35px rgba(198, 255, 53, 0.45); }
.btn-arrow { display: inline-block; transition: transform var(--tr); }
.btn-glow:hover .btn-arrow { transform: translateX(4px); }

.hero-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2.75rem; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted); }
.hero-meta strong { color: var(--lime); }
.hero-meta .dot { color: var(--line-2); }

/* ── KPI band ──────────────────────────────────────────── */
.kpi { border-block: 1px solid var(--line); background: var(--surface); }
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.kpi-cell { padding: clamp(1.75rem, 4vw, 2.75rem) var(--gutter); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kpi-num { font-family: var(--font-display); font-weight: 600; font-size: var(--t-2xl); line-height: 1; }
.kpi-num.lime { color: var(--lime); }
.kpi-label { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted); margin-top: 0.6rem; }
.v-tick { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--lime); }
.v-text { font-family: var(--font-display); font-size: var(--t-lg); letter-spacing: -0.01em; margin-top: 0.5rem; max-width: 20ch; }
/* The claim in the owner's language, under the claim in ours. */
.v-note { color: var(--muted); font-size: var(--t-sm); margin-top: 0.6rem; max-width: 30ch; }

/* ── Packages ──────────────────────────────────────────────
   Deliberately price-free: the card answers "what do I get and is this me?",
   and the quote comes in the reply. `.pack-note` holds the slot a price
   would occupy so the three cards still line up. */
.pack-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; }
.pack { background: var(--ground); padding: clamp(1.75rem, 4vw, 2.5rem); display: flex; flex-direction: column; position: relative; }
.pack--featured { background: var(--surface); }
.pack-flag {
  position: absolute; top: 0; right: 0;
  font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ground); background: var(--lime); padding: 0.3rem 0.7rem;
}
.pack-name { font-size: var(--t-xl); }
.pack--featured .pack-name { color: var(--lime); }
.pack-who { color: var(--muted); margin-top: 0.6rem; max-width: 32ch; }
.pack-note {
  color: var(--muted); margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line-2);
}
.pack-list { display: grid; gap: 0.7rem; margin: 1.25rem 0 2rem; }
.pack-list li { display: flex; gap: 0.65rem; align-items: baseline; font-size: var(--t-sm); color: var(--soft); }
.pack-list .tick { color: var(--lime); font-family: var(--font-mono); font-size: var(--t-xs); flex: none; }
/* The rung: "Everything in Starter/Business". Carries the tier comparison,
   so it reads before the individual lines do. */
.pack-list li.is-step { color: var(--lime); font-weight: 600; }
.pack-cta { margin-top: auto; }
.pack-foot { color: var(--muted); margin-top: 1.75rem; max-width: 62ch; }

/* ── "What we build" — 6-Card Feature Matrix ────────────── */
.mono-badge {
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--lime);
  background: rgba(198, 255, 53, 0.08); border: 1px solid var(--lime);
  padding: 0.15rem 0.4rem; border-radius: var(--radius-sm); margin-right: 0.35rem;
  letter-spacing: 0.06em; vertical-align: middle;
}
.build-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; }
.build-cell {
  background: var(--ground); padding: clamp(1.75rem, 4vw, 2.5rem);
  display: flex; flex-direction: column; position: relative;
}
.cell-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.cell-head .num { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--lime); }
.cell-tag {
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--lime);
  background: rgba(198, 255, 53, 0.08); border: 1px solid var(--line-2);
  padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); letter-spacing: 0.05em;
}
.build-cell h3 { font-size: var(--t-lg); line-height: 1.15; margin-bottom: 0.75rem; color: var(--soft); }
.build-cell p { color: var(--muted); font-size: var(--t-sm); line-height: 1.5; margin-bottom: 1.5rem; }
.cell-spec {
  margin-top: auto; padding-top: 0.85rem; border-top: 1px dashed var(--line-2);
  font-size: var(--t-xs); color: var(--lime); letter-spacing: 0.04em;
}

/* ── Work grid (home teaser — every preview visible at once) ──── */
.work-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.work-tile { background: var(--ground); }
.work-tile .work-thumb { aspect-ratio: 16 / 10; border: 0; }
.work-tile .tile-body { padding: 1rem 1.1rem 1.25rem; }
.work-tile .tile-title { display: block; font-family: var(--font-display); font-size: var(--t-lg); }
.work-tile .tile-meta { display: block; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted); margin-top: 0.35rem; }

/* The 9th cell — closes the 3×3 and hands off to the full wall. Built as a
   cell of the same grid, not a button below it, so the block stays square. */
.tile-more {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 220px; padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--surface); transition: background var(--tr);
}
.tile-more:hover { background: var(--surface-2); }
.tile-more .more-k { color: var(--lime); }
.tile-more .more-v { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.05; letter-spacing: -0.02em; margin: auto 0 0.75rem; max-width: 14ch; }
.tile-more .more-n { color: var(--muted); }
.tile-more .more-arrow { display: inline-block; transition: transform var(--tr); }
.tile-more:hover .more-arrow { transform: translateX(4px); }

/* ── Method strip (Decode → Design → Build → Ship) ─────── */
.method { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; }
.method-step { background: var(--ground); padding: clamp(1.5rem, 3.5vw, 2.5rem); position: relative; }
.method-step .step-key { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--lime); }
.method-step h3 { margin: 0.6rem 0 0.5rem; }
.method-step p { color: var(--muted); font-size: var(--t-sm); }

/* ── Why Cipherverse — the comparison spec sheet ────────
   Mobile stacks each criterion into one block with its own inline column
   tags; from 768 the tags drop away and a real header row takes over. */
.versus { border: 1px solid var(--line); }
.versus-head {
  display: none;
  background: var(--surface); border-bottom: 1px solid var(--line-2);
  padding: 0.85rem clamp(1.25rem, 3vw, 1.75rem);
  font-family: var(--font-mono); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.versus-head .vs-them { color: var(--muted); }
.versus-head .vs-us { color: var(--lime); }
.versus-row {
  display: grid; grid-template-columns: 1fr; gap: 0.85rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--line);
}
.versus-row:last-child { border-bottom: 0; }
.vs-k { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--lime); }
.vs-tag {
  display: block; margin-bottom: 0.3rem;
  font-family: var(--font-mono); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.vs-them { color: var(--muted); }
.vs-us { color: var(--soft); }

/* ── The claim ("never the same site twice") ───────────── */
.claim { text-align: left; }
.claim-big { font-family: var(--font-display); font-weight: 700; font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -0.03em; max-width: 20ch; }
.claim-big em { color: var(--lime); }
.claim-sub { color: var(--muted); margin-top: 1.5rem; font-size: var(--t-lg); max-width: 52ch; }
.claim-proof { display: inline-flex; align-items: baseline; gap: 0.75rem; margin-top: 2rem; font-family: var(--font-mono); }
.claim-proof .n { font-family: var(--font-display); font-size: var(--t-2xl); color: var(--lime); }
.claim-proof .l { color: var(--muted); font-size: var(--t-sm); }

/* ── Testimonial (One Big Quote) ───────────────────────── */
.quote-block { max-width: 30ch; }
.quote { font-family: var(--font-display); font-weight: 500; font-size: var(--t-2xl); line-height: 1.15; letter-spacing: -0.02em; }
.quote .mark { color: var(--lime); }
.quote-by { margin-top: 1.75rem; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted); }
.quote-by b { color: var(--soft); }
.quote-flag { display: inline-block; margin-top: 1rem; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); border: 1px dashed var(--line-2); padding: 0.35rem 0.6rem; }

/* ── Three Doors (reused CTA band) ─────────────────────── */
.doors-band { border-top: 1px solid var(--line); background: var(--surface); }
.doors-head { margin-bottom: 2rem; }
.doors-head h2 { font-size: var(--t-2xl); max-width: 18ch; }
.doors-lead { color: var(--muted); margin-top: 1.25rem; font-size: var(--t-lg); max-width: 54ch; }
.doors-next { color: var(--muted); margin-top: 1.5rem; max-width: 70ch; }
.doors { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; }
.door { background: var(--ground); padding: clamp(1.5rem, 3.5vw, 2.25rem); display: block; transition: background var(--tr); }
.door:hover { background: var(--surface-2); }
.door .k { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--lime); }
.door .v { font-family: var(--font-display); font-size: var(--t-lg); margin: 0.5rem 0 0.35rem; }
.door .n { color: var(--muted); font-size: var(--t-sm); font-family: var(--font-mono); }
.door .k, .door .v, .door .n { display: block; }
.door a.v:hover, .door a.n:hover { color: var(--lime); transition: color var(--tr); }

/* ── Page hero (inner pages) ───────────────────────────── */
.page-hero { padding-block: clamp(4rem, 9vw, 7rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: var(--t-3xl); margin-top: 1rem; }
.page-hero .lead { color: var(--muted); font-size: var(--t-lg); margin-top: 1.25rem; max-width: 52ch; }
.crumb { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted); }
.crumb b { color: var(--lime); }

/* ── Work — the Shot Wall (filterable masonry) ──────────
   Every project as a screenshot of the real site in a browser frame.
   True masonry via CSS columns, so each tile keeps its screenshot's natural
   height — a tall full-page shot stays tall. No JS, no measuring, no reflow. */

/* Filter chips. Enhancement only: with JS off there is nothing to filter
   with, so they never render and the full wall shows. */
.work-filters { display: none; }
.js .work-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 0.5rem 0.85rem;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
}
.chip:hover { color: var(--soft); border-color: var(--soft); }
.chip .chip-n { font-size: var(--t-xs); opacity: 0.6; }
.chip.is-on { background: var(--lime); border-color: var(--lime); color: var(--ground); }
.chip.is-on:hover { color: var(--ground); }
.chip-sep { width: 1px; height: 1.6rem; background: var(--line-2); margin-inline: 0.4rem; }

.work-count { color: var(--muted); margin: 1.25rem 0 2rem; }
.wall-empty { color: var(--muted); text-align: center; padding-block: 4rem; }

.shot-wall { columns: 1; column-gap: clamp(1rem, 2.2vw, 1.6rem); }
.shot-card {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: inline-block; width: 100%;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.shot-card.is-out { display: none; }

/* Browser chrome above each screenshot — the same window language as the
   live-preview modal, so a tile reads as "a site" not "a photo". */
.shot-chrome {
  display: flex; align-items: center; gap: 5px;
  padding: 0.5rem 0.7rem;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.shot-chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex: none; }
.shot-chrome i:nth-child(3) { background: var(--lime); }
.shot-chrome b {
  margin-left: 0.55rem; min-width: 0;
  font-family: var(--font-mono); font-weight: 400; font-size: var(--t-xs); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Which capture this is — web or mobile. Says out loud that both get built. */
.shot-chrome em {
  margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--lime);
  text-transform: uppercase; letter-spacing: 0.1em;
}
/* Device variant — no browser dots, because it isn't a browser. */
.shot-chrome--device { padding-left: 0.85rem; }
.shot-chrome--device b { margin-left: 0; }

.shot-body { padding-top: 1.1rem; }
.shot-title { font-size: var(--t-lg); }
.shot-meta { color: var(--muted); margin-top: 0.5rem; }
/* A card carries the screenshot and three facts only — name, place, trade.
   The wall is meant to be looked at, not read: the site itself is one click
   away, and that is the real proof. */

/* Concept flag — marks a demonstration build, not client work. Quiet on
   purpose: it must be findable and honest without competing with the title. */
.work-flag {
  display: inline-block; vertical-align: middle;
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); border: 1px solid var(--line-2);
  padding: 0.2rem 0.5rem; margin-left: 0.5rem;
  translate: 0 -0.15em;
}
.work-flag--inline { margin-left: 0; translate: 0 -0.05em; }


/* ── Process Page Component Redesign ────────────────────── */
.page-hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.page-hero-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.page-hero-media { border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.page-hero-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: brightness(0.9) contrast(1.05); }

/* ── Process Grid (3-Column Visual Pipeline) ────────────── */
.process-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2.5rem; grid-template-columns: 1fr; }
.process-card { background: var(--ground); display: flex; flex-direction: column; position: relative; }
.process-card .step-media-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line-2); }
.process-card .step-media-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tr-slow); }
.process-card:hover .step-media-wrap img { transform: scale(1.04); }
.step-badge { position: absolute; bottom: 0.6rem; left: 0.6rem; background: rgba(0,0,0,0.85); color: var(--lime); border: 1px solid var(--lime); padding: 0.2rem 0.5rem; font-size: var(--t-xs); border-radius: var(--radius-sm); }
.process-card .step-content { padding: clamp(1.5rem, 3.5vw, 2.25rem); display: flex; flex-direction: column; flex-grow: 1; }
.process-card .step-key { color: var(--lime); font-size: var(--t-xs); margin-bottom: 0.5rem; display: block; }
.process-card h3 { font-size: var(--t-lg); margin-bottom: 0.6rem; color: var(--soft); }
.process-card p { color: var(--muted); font-size: var(--t-sm); line-height: 1.5; margin-bottom: 1.5rem; }

/* ── Design Ledger Grid ────────────────────────────────── */
.ledger-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2.5rem; }
.ledger-card { background: var(--ground); padding: clamp(1.5rem, 3.5vw, 2.25rem); display: flex; flex-direction: column; position: relative; }
.ledger-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 1.35rem; border: 1px solid var(--line-2); }
.ledger-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85) contrast(1.1); transition: transform var(--tr-slow); }
.ledger-card:hover .ledger-media img { transform: scale(1.04); }
.ledger-tag { position: absolute; bottom: 0.6rem; left: 0.6rem; background: rgba(0,0,0,0.85); color: var(--lime); border: 1px solid var(--lime); padding: 0.2rem 0.5rem; font-size: var(--t-xs); border-radius: var(--radius-sm); }
.ledger-body { display: flex; flex-direction: column; flex-grow: 1; }
.ledger-key { font-size: var(--t-xs); color: var(--lime); margin-bottom: 0.4rem; }
.ledger-card h3 { font-size: var(--t-lg); margin-bottom: 0.6rem; color: var(--soft); }
.ledger-card p { color: var(--muted); font-size: var(--t-sm); line-height: 1.5; margin-bottom: 1.5rem; }

/* ── Studio ────────────────────────────────────────────── */
.owner { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.owner-portrait { border: 1px solid var(--line-2); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; filter: grayscale(1) contrast(1.05); }
.owner-note p { margin-bottom: 1.1rem; color: var(--muted); }
.owner-note p strong { color: var(--soft); }
.owner-sign { font-family: var(--font-display); font-size: var(--t-lg); color: var(--lime); margin-top: 1rem; }
.spec-card { border: 1px solid var(--line); background: var(--surface); }
.spec-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--t-sm); }
.spec-row:last-child { border-bottom: 0; }
.spec-row span { color: var(--muted); }
.spec-row b { color: var(--soft); text-align: right; }
.spec-row b.ok { color: var(--lime); }

/* ── Contact form ──────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); }
.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted); }
.field input, .field textarea {
  background: var(--surface); border: 1px solid var(--line-2); color: var(--soft);
  padding: 0.85rem 1rem; border-radius: var(--radius); transition: border-color var(--tr);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--lime); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Styleguide ────────────────────────────────────────── */
.sg-block { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sg-block > h2 { font-size: var(--t-xl); margin-bottom: 1.5rem; }
.sw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.sw { border: 1px solid var(--line); }
.sw-chip { height: 96px; }
.sw-meta { padding: 0.75rem 1rem; font-family: var(--font-mono); font-size: var(--t-sm); }
.sw-meta b { display: block; }
.sw-meta span { color: var(--muted); }
.type-row { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ── 404 ───────────────────────────────────────────────── */
.error-page { min-height: 62vh; display: grid; place-items: center; text-align: center; }
.error-code { font-family: var(--font-mono); color: var(--lime); font-size: var(--t-xl); }
.error-title { font-size: var(--t-3xl); margin: 1rem 0; }
.error-text { color: var(--muted); margin-bottom: 2rem; }
.error-links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Desktop grids ─────────────────────────────────────── */
@media (min-width: 768px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .kpi-cell:last-child { border-right: 0; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .method { grid-template-columns: repeat(3, 1fr); }
  .pack-grid { grid-template-columns: repeat(3, 1fr); }
  .versus-head { display: grid; }
  .versus-head, .versus-row { grid-template-columns: 9rem 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
  .vs-tag { display: none; }
  /* Hold three lines so the "quoted per project" rule and the tick lists
     line up across all three cards regardless of copy length. */
  .pack-who { min-height: 4.9em; }
  .doors { grid-template-columns: repeat(3, 1fr); }
  .doors.doors--2 { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .shot-wall { columns: 2; }
  /* Tablet: the lead runs full width, the other four sit 2×2 beneath it. */
  .build-grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero-grid { grid-template-columns: 1.1fr 0.9fr; }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .ledger-grid { grid-template-columns: repeat(2, 1fr); }
  .owner { grid-template-columns: 1fr 1.4fr; }
  .contact-grid { grid-template-columns: 1fr 1.2fr; }
  .sw-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .build-grid { grid-template-columns: repeat(3, 1fr); }
  .work-grid { grid-template-columns: repeat(3, 1fr); }
  /* Hero fills exactly the viewport minus the sticky header, so vertical
     centering below ignores the header. Text pins to top; card centers. */
  .hero { min-height: calc(100svh - var(--nav-h)); align-items: stretch; padding-block: clamp(2rem, 4vw, 3.5rem); }
  .hero-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 4vw, 4rem); align-items: stretch; height: 100%; }
  .hero-lead { align-self: start; }         /* text up */
  .hero-console { align-self: center; margin-top: 0; }
}
@media (min-width: 1440px) {
  /* Third wall column only once a column is still wide enough for a
     screenshot to be readable (~420px). Below this, two columns read better. */
  .shot-wall { columns: 3; }
}