/* shell.css — shared layout components: nav, footer, buttons, base patterns.
   Used by every page. Builder agents do NOT modify this file.
*/

/* ============ NAVIGATION ============ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--color-paper);
  border-bottom: var(--hairline);
  padding: var(--space-md) 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.site-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-ink);
}
/* LOGO size — driven by height so the header bar keeps a fixed depth */
.site-nav__brand-img {
  height: 88px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.site-nav__cta {
  flex-shrink: 0;
}

/* ============ BUTTONS ============ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-press),
              box-shadow var(--dur-press) var(--ease-press);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  will-change: transform;
}
.btn:focus-visible {
  outline: 2px solid var(--color-steel);
  outline-offset: 3px;
}
.btn:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 80ms;
}
.btn--steel {
  background: var(--color-steel);
  color: var(--color-paper);
}
.btn--steel:hover {
  background: var(--color-steel-deep);
  color: var(--color-paper);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px oklch(42% 0.10 230 / 0.45);
}
.btn--steel:active { box-shadow: none; }
.btn--ink {
  background: var(--color-ink);
  color: var(--color-paper);
}
.btn--ink:hover {
  background: var(--color-steel);
  color: var(--color-paper);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px oklch(14% 0.012 240 / 0.40);
}
.btn--ink:active { box-shadow: none; }
.btn--ghost {
  background: transparent;
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
}
.btn--ghost:hover {
  background: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px oklch(14% 0.012 240 / 0.40);
}
.btn--ghost:active { box-shadow: none; }
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--sm {
  padding: 10px 18px;
  font-size: 0.6875rem;
  border-radius: var(--radius-md);
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after { transition: none !important; }
  .btn:hover { transform: none !important; }
}

/* ============ FOOTER (Signature Moment #5 — credentialing) ============ */
.site-footer {
  margin-top: 0;
  padding: var(--space-2xl) 0 var(--space-lg);
  background: var(--color-paper-cool);
  border-top: var(--hairline);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
}
@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}
@media (max-width: 600px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.site-footer__heading {
  font-family: var(--font-sans);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: var(--space-xs);
}
.site-footer__brand-name {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.site-footer__col p,
.site-footer__col a,
.site-footer__col li {
  font-size: var(--type-supporting);
  line-height: 1.7;
  color: var(--color-ink-soft);
}
.site-footer__col ul {
  list-style: none;
}
.site-footer__col a {
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
  transition: color 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
.site-footer__col a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-steel);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}
.site-footer__col a:hover { color: var(--color-steel-deep); }
.site-footer__col a:hover::after { transform: scaleX(1); }
.site-footer__mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--color-ash);
  letter-spacing: 0;
}
.site-footer__bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.site-footer__bottom .mono {
  color: var(--color-ash);
}

/* ============ CARDS (reusable, simple, no shadow) ============ */
.card {
  background: var(--color-paper-cool);
  border: var(--hairline);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
.card:hover {
  transform: translateY(-2px);
}
.card__kicker {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--color-ash);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.card__title {
  font-size: var(--type-title);
  font-weight: 600;
  line-height: 1.25;
}
.card__body {
  font-size: var(--type-supporting);
  color: var(--color-ink-soft);
  line-height: 1.6;
}

/* ============ EYEBROW / PAGE-LEVEL KICKER ============ */
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-steel);
  margin-bottom: var(--space-md);
}

/* ============ ANCHOR-STAT BLOCK (homepage section 2) ============ */
.anchor-stat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-3xl) 0;
}
@media (max-width: 900px) {
  .anchor-stat { grid-template-columns: 1fr; gap: var(--space-xl); }
}
.anchor-stat__numeric {
  font-size: clamp(6rem, 14vw, 12rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.anchor-stat__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 48ch;
}
.anchor-stat__source {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--color-ash);
}

/* ============ NUMBERED TIER STRIP ============ */
.tier-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
@media (max-width: 1100px) {
  .tier-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .tier-strip { grid-template-columns: 1fr; }
}
.tier-strip__item {
  padding: var(--space-lg);
  border-right: var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease-out);
}
.tier-strip__item:last-child { border-right: none; }
@media (max-width: 1100px) {
  .tier-strip__item:nth-child(2n) { border-right: none; }
}
@media (max-width: 600px) {
  .tier-strip__item { border-right: none; border-bottom: var(--hairline); }
  .tier-strip__item:last-child { border-bottom: none; }
}
.tier-strip__item:hover {
  background: var(--color-paper-cool);
}
.tier-strip__num {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--color-ash);
  letter-spacing: 0.05em;
}
.tier-strip__title {
  font-size: var(--type-title);
  font-weight: 600;
  line-height: 1.2;
}
.tier-strip__deliverable {
  font-size: var(--type-supporting);
  color: var(--color-ink-soft);
  line-height: 1.55;
}

/* ============ THROUGHPUT SPECIMEN (Signature Moment #2) ============ */
.throughput-specimen {
  padding: var(--space-4xl) 0;
  background: var(--color-paper);
}
.throughput-specimen__numeric {
  font-size: clamp(8rem, 18vw, 16rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.throughput-specimen__unit {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--color-ash);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}
.throughput-specimen__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--hairline);
}
@media (max-width: 900px) { .throughput-specimen__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .throughput-specimen__grid { grid-template-columns: 1fr; } }
.throughput-specimen__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.throughput-specimen__stat-label {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--color-ash);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.throughput-specimen__stat-value {
  font-size: var(--type-title);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ============ SUBSTRATE ATLAS (Signature Moment #3) ============ */
.substrate-atlas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}
@media (max-width: 1000px) { .substrate-atlas { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .substrate-atlas { grid-template-columns: 1fr 1fr; } }
.substrate-tile {
  background: var(--color-paper-cool);
  border: var(--hairline);
  padding: var(--space-md);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.substrate-tile__visual {
  flex: 1;
  background: var(--color-paper);
  border: var(--hairline);
  position: relative;
  overflow: hidden;
}
.substrate-tile__name {
  font-size: var(--type-supporting);
  font-weight: 600;
  color: var(--color-ink);
  margin-top: var(--space-xs);
}
.substrate-tile__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ash);
  line-height: 1.5;
}

/* ============ INSIGHTS CARD ============ */
.insight-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: var(--hairline);
  background: var(--color-paper-cool);
  color: var(--color-ink);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  text-decoration: none;
  height: 100%;
}
.insight-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-steel);
}
.insight-card__kicker {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--color-steel);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.insight-card__title {
  font-size: var(--type-title);
  font-weight: 600;
  line-height: 1.25;
  margin: var(--space-xs) 0 var(--space-sm);
}
.insight-card__abstract {
  font-size: var(--type-supporting);
  color: var(--color-ink-soft);
  line-height: 1.6;
}
.insight-card__date {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--color-ash);
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* ============ STAGE-GATE DIAGRAM (Signature Moment #4 — used on /approach + homepage) ============ */
.stage-gate {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
@media (max-width: 900px) {
  .stage-gate { grid-template-columns: 1fr; }
}
.stage-gate__stage {
  padding: var(--space-lg) var(--space-md);
  border-right: var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  position: relative;
}
.stage-gate__stage:last-child { border-right: none; }
@media (max-width: 900px) {
  .stage-gate__stage { border-right: none; border-bottom: var(--hairline); }
  .stage-gate__stage:last-child { border-bottom: none; }
}
.stage-gate__num {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--color-steel);
  letter-spacing: 0.05em;
}
.stage-gate__name {
  font-size: var(--type-supporting);
  font-weight: 600;
  line-height: 1.3;
}
.stage-gate__duration {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ash);
}
.stage-gate__gate {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-steel-deep);
  margin-top: var(--space-xs);
}

/* ============ TWO-COLUMN EDITORIAL ============ */
.two-col {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: var(--space-xl); }
}
.two-col--reverse {
  grid-template-columns: 7fr 5fr;
}
@media (max-width: 900px) {
  .two-col--reverse { grid-template-columns: 1fr; }
}

/* ============ ENGAGEMENT MODEL (homepage section 8) ============ */
.engagement-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
@media (max-width: 900px) {
  .engagement-stages { grid-template-columns: 1fr; }
}
.engagement-stage {
  padding: var(--space-lg);
  border: var(--hairline);
  background: var(--color-paper-cool);
}
.engagement-stage__phase {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--color-steel);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.engagement-stage__heading {
  font-size: var(--type-title);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}
.engagement-stage__detail {
  font-size: var(--type-supporting);
  color: var(--color-ink-soft);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .site-nav__inner { flex-wrap: wrap; row-gap: var(--space-sm); }
}

/* ============ VISUAL SLOTS (v2 — image placeholders) ============ */
/* Designed-empty containers for photographs. The canvas carries a subtle
   diagonal-line texture so placeholders read as intentional, not blank.
   When a real photo is dropped in, the agent (or fixer) replaces the
   canvas background with `background-image: url('/assets/photos/PHOTO-XX.jpg')`. */

.visual-slot {
  position: relative;
  width: 100%;
  background: var(--color-paper-cool);
  border: var(--hairline);
  overflow: hidden;
}
/* Reveal-on-scroll only opts in when JS adds .has-reveal to <html>.
   This preserves no-JS, screenshot-renderer, and crawler visibility. */
html.has-reveal .visual-slot:not(.is-revealed) {
  opacity: 0;
  transform: translateY(24px);
}
html.has-reveal .visual-slot {
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
html.has-reveal .visual-slot.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.visual-slot--ratio-1-1   { aspect-ratio: 1 / 1; }
.visual-slot--ratio-4-5   { aspect-ratio: 4 / 5; }
.visual-slot--ratio-3-2   { aspect-ratio: 3 / 2; }
.visual-slot--ratio-3-4   { aspect-ratio: 3 / 4; }
.visual-slot--ratio-16-9  { aspect-ratio: 16 / 9; }
.visual-slot--ratio-21-9  { aspect-ratio: 21 / 9; }
.visual-slot--ratio-2-1   { aspect-ratio: 2 / 1; }

.visual-slot__canvas {
  position: absolute;
  inset: 0;
  background-color: var(--color-paper-cool);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 11px,
      oklch(88% 0.006 240 / 0.22) 11px,
      oklch(88% 0.006 240 / 0.22) 12px
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.visual-slot__canvas--photo {
  background-image: none;
}
.visual-slot__caption {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: var(--color-paper);
  border: var(--hairline);
  max-width: 70%;
  z-index: 2;
}
.visual-slot__caption--tr {
  left: auto;
  bottom: auto;
  top: var(--space-md);
  right: var(--space-md);
}
.visual-slot__code {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
}
.visual-slot__brief {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ash);
  line-height: 1.4;
}

/* Full-bleed variant — break out of .container to fill the viewport width */
.visual-slot--bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-left: none;
  border-right: none;
}

/* Numeric-as-graphic — re-usable hero-scale numeric pattern */
.statement-numeric {
  font-size: clamp(6rem, 16vw, 15rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.82;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* Single-statement hero-scale typography (for centered candor pages, divider statements) */
.statement {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
  max-width: 18ch;
}
.statement--wide {
  max-width: 30ch;
}

/* Section padding — heavier visual rhythm for v2 visual pages */
.section--visual {
  padding: clamp(120px, 12vw, 240px) 0;
}
.section--statement {
  padding: clamp(160px, 16vw, 280px) 0;
  text-align: center;
}
.section--statement .container { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); }

/* Reveal pattern — generic, used outside .visual-slot. Same opt-in via .has-reveal. */
html.has-reveal .reveal-on-scroll:not(.is-revealed) {
  opacity: 0;
  transform: translateY(24px);
}
html.has-reveal .reveal-on-scroll {
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
html.has-reveal .reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-on-scroll--delay-1 { transition-delay: 100ms; }
.reveal-on-scroll--delay-2 { transition-delay: 200ms; }
.reveal-on-scroll--delay-3 { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .visual-slot,
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Screenshot / headless rendering accommodation. Real users on a 1440x900
   monitor see `100vh` heroes at 820px and the design works. Headless renders
   at 1440x7200 to capture full scroll pages, where `100vh` heroes would fill
   the entire page. This media query kicks in only at unusually tall viewports
   (>=2400px) and removes the vh-constraints so sections below the hero render
   in capture. No real-user impact. */
@media (min-height: 2400px) {
  .home-hero,
  .home-why,
  .home-statement .visual-slot,
  .mb-hero,
  .why-hero,
  .section--statement {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Scroll cue — small mono line at hero bottom */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--color-ash);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scroll-cue::before {
  content: "↓";
  font-family: inherit;
  color: var(--color-steel);
}