/* ============================================================
   STRATUM FORGE — BRAND DESIGN TOKENS
   Copied from the brand kit handoff package (docs/Stratum Forge Designs/).
   ============================================================ */

:root {
  /* ---- Core palette ---- */
  --sf-ink:        #17191C; /* primary dark — headers, footers, body text, rules */
  --sf-ink-deep:   #0F1112; /* deepest dark — footer base */
  --sf-orange:     #EC6620; /* accent — eyebrows, CTAs, key numbers, rules, ticks */
  --sf-bone:       #FAFAF9; /* paper — default light background */
  --sf-white:      #FFFFFF; /* cards on bone */
  --sf-ash:        #69717A; /* secondary / neutral text */
  --sf-text:       #3A3D42; /* body copy on light */
  --sf-muted:      #8A8F96; /* mono captions / fine print on light */

  /* ---- Hairlines & borders ---- */
  --sf-border:        rgba(23, 25, 28, 0.12); /* card borders on light */
  --sf-border-strong: #17191C;                /* 1.5px section-header rules */

  /* ---- On-dark text opacities ---- */
  --sf-on-dark:       rgba(255, 255, 255, 0.68); /* body on ink */
  --sf-on-dark-mute:  rgba(255, 255, 255, 0.55); /* labels on ink */
  --sf-on-dark-faint: rgba(255, 255, 255, 0.40); /* captions on ink */
  --sf-on-dark-line:  rgba(255, 255, 255, 0.16); /* borders on ink */

  /* ---- Type families ---- */
  --sf-font-display: 'Archivo Expanded', 'Archivo', sans-serif; /* big headers */
  --sf-font-text:    'Archivo', system-ui, sans-serif;          /* body + UI */
  --sf-font-mono:    'JetBrains Mono', ui-monospace, monospace; /* labels, eyebrows, data */

  /* ---- Radii (brand is sharp — keep rounding minimal) ---- */
  --sf-radius-sm: 2px;
  --sf-radius:    6px;  /* cards, swatch tiles, image frames */
  --sf-radius-pill: 999px; /* only for true pills */

  /* ---- Layout ---- */
  --sf-maxw: 1280px;   /* content max width */
  --sf-gutter: 40px;   /* horizontal page padding */
  --sf-section-y: 96px;/* vertical rhythm between sections */

  /* ---- Accent rules ---- */
  --sf-accent-edge: 6px solid var(--sf-orange); /* top/bottom edge on dark sections */
  --sf-accent-underline: 4px;                   /* orange underline under headlines */
}

/* ============================================================
   TYPE SCALE
   ============================================================ */

.sf-h1 { font-family: var(--sf-font-display); font-weight: 900;
         font-size: clamp(44px, 5vw, 74px); line-height: 0.9; letter-spacing: -0.025em; }

.sf-h2 { font-family: var(--sf-font-display); font-weight: 900;
         font-size: clamp(32px, 3.4vw, 46px); line-height: 0.95; letter-spacing: -0.018em; }

.sf-h3 { font-family: var(--sf-font-display); font-weight: 800;
         font-size: 22px; line-height: 1.05; letter-spacing: -0.01em; }

.sf-eyebrow { font-family: var(--sf-font-mono); font-weight: 500;
              font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
              color: var(--sf-orange); }

.sf-body { font-family: var(--sf-font-text); font-weight: 400;
           font-size: 17px; line-height: 1.6; color: var(--sf-text); }

.sf-caption { font-family: var(--sf-font-mono); font-weight: 400;
              font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
              color: var(--sf-muted); }

.sf-stat { font-family: var(--sf-font-display); font-weight: 900;
           font-size: 44px; line-height: 1; color: var(--sf-ink); }

/* ============================================================
   COMPONENT RECIPES
   ============================================================ */

/* Primary button — orange block, ink text, square, mono label.
   Convention: trailing " →" on primary CTAs. */
.sf-btn {
  display: inline-block; font-family: var(--sf-font-mono); font-weight: 700;
  font-size: 13px; letter-spacing: 0.1em; text-transform: none;
  color: var(--sf-ink); background: var(--sf-orange);
  padding: 16px 28px; border: 0; border-radius: 0; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: filter 0.15s ease;
}
.sf-btn:hover { filter: brightness(1.06); }

/* Ghost button — on dark backgrounds */
.sf-btn-ghost {
  display: inline-block; font-family: var(--sf-font-mono); font-weight: 500;
  font-size: 13px; letter-spacing: 0.1em; color: #fff;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 15px 26px; border-radius: 0; text-decoration: none; white-space: nowrap;
}
.sf-btn-ghost:hover { border-color: var(--sf-orange); }

/* Card — white on bone, hairline border, square */
.sf-card {
  background: var(--sf-white); border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-sm); padding: 34px 30px;
}

/* Section header rule — eyebrow + H2 above a 1.5px ink underline */
.sf-section-rule { border-bottom: 1.5px solid var(--sf-border-strong); padding-bottom: 20px; }

/* Headline accent underline */
.sf-underline { width: 60px; height: var(--sf-accent-underline); background: var(--sf-orange); }

/* Small square tick — replaces bullets/icons */
.sf-tick { display: inline-block; width: 6px; height: 6px; background: var(--sf-orange); }

/* Dark section band */
.sf-band-dark { background: var(--sf-ink); color: #fff; border-top: var(--sf-accent-edge); }

/* ============================================================
   BASE
   ============================================================ */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sf-bone);
  color: var(--sf-ink);
  font-family: var(--sf-font-text);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

.sf-container {
  max-width: var(--sf-maxw);
  margin: 0 auto;
  padding-left: var(--sf-gutter);
  padding-right: var(--sf-gutter);
}

@media (max-width: 720px) {
  .sf-container {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(23, 25, 28, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-inner {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.nav-mark {
  height: 34px;
  width: auto;
  display: block;
}
.nav-wordmark {
  font-family: var(--sf-font-display);
  font-weight: 900;
  color: #fff;
  line-height: 0.85;
  font-size: 16px;
  letter-spacing: 0.005em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-link {
  font-family: var(--sf-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.nav-link:hover {
  color: #fff;
}
.nav-cta {
  font-family: var(--sf-font-mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  color: var(--sf-ink);
  text-decoration: none;
  background: var(--sf-orange);
  padding: 11px 20px;
  font-weight: 700;
  white-space: nowrap;
}
.nav-cta:hover {
  filter: brightness(1.06);
}
@media (max-width: 860px) {
  .nav-link {
    display: none;
  }
}

/* ============================================================
   HERO + STATS BAR
   ============================================================ */

.hero {
  background: var(--sf-ink);
  color: #fff;
  border-bottom: 6px solid var(--sf-orange);
}
.hero-inner {
  padding-top: 108px;
  padding-bottom: 100px;
}
.hero-eyebrow {
  font-size: 13px;
  letter-spacing: 0.2em;
  margin-bottom: 26px;
}
.hero-headline {
  margin: 0;
  font-family: var(--sf-font-display);
  font-weight: 900;
  font-size: clamp(44px, 6.5vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.025em;
}
.hero-copy {
  margin: 30px 0 0;
  max-width: 560px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--sf-on-dark);
}
.hero-ctas {
  margin-top: 38px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.stats {
  background: var(--sf-orange);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 30px 0 30px 30px;
  border-right: 1px solid rgba(23, 25, 28, 0.16);
}
.stat:first-child {
  padding-left: 0;
}
.stat:last-child {
  border-right: 0;
}
.stat-num {
  font-family: var(--sf-font-display);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  color: var(--sf-ink);
}
.stat-unit {
  font-size: 24px;
}
.stat-label {
  margin-top: 8px;
  font-family: var(--sf-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(23, 25, 28, 0.62);
}
@media (max-width: 860px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat {
    padding-left: 0;
    border-right: 0;
  }
}

/* ============================================================
   CAPABILITIES
   ============================================================ */

.cap {
  padding-top: 96px;
  padding-bottom: 30px;
}
.cap-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 46px;
}
.cap-title {
  margin: 12px 0 0;
}
.cap-lede {
  margin: 0;
  max-width: 360px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sf-text);
}
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cap-index {
  font-family: var(--sf-font-mono);
  font-size: 12px;
  color: var(--sf-orange);
  letter-spacing: 0.1em;
}
.cap-card-title {
  margin: 18px 0 0;
}
.cap-card-copy {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sf-text);
}
@media (max-width: 860px) {
  .cap-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .cap-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PROCESS
   ============================================================ */

.proc {
  background: var(--sf-ink);
  color: #fff;
  margin-top: 96px;
}
.proc-inner {
  padding-top: 88px;
  padding-bottom: 88px;
}
.proc-title {
  margin: 12px 0 52px;
}
.proc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.proc-step {
  border-top: 2px solid var(--sf-orange);
  padding-top: 20px;
}
.proc-num {
  font-family: var(--sf-font-display);
  font-weight: 900;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.32);
}
.proc-step-title {
  margin: 14px 0 0;
  font-family: var(--sf-font-display);
  font-weight: 800;
  font-size: 20px;
}
.proc-step-copy {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 860px) {
  .proc-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .proc-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MATERIALS
   ============================================================ */

.mat {
  padding-top: 96px;
  padding-bottom: 30px;
}
.mat-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 44px;
}
.mat-title {
  margin: 12px 0 0;
}
.mat-lede {
  margin: 0;
  max-width: 380px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sf-text);
}
.mat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  row-gap: 26px;
  column-gap: 18px;
}
.mat-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.mat-swatch img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--sf-radius);
}
.mat-name {
  margin-top: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--sf-ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
}
@media (max-width: 860px) {
  .mat-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .mat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   SELECTED WORK (gallery — rendered only when SHOW_GALLERY=true)
   ============================================================ */

.work {
  background: var(--sf-bone);
  margin-top: 96px;
  border-top: 1px solid rgba(23, 25, 28, 0.1);
}
.work-inner {
  padding-top: 88px;
  padding-bottom: 88px;
}
.work-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 44px;
}
.work-title {
  margin: 12px 0 0;
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.work-grid img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
}
@media (max-width: 860px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   QUOTE
   ============================================================ */

.quote {
  background: var(--sf-ink);
  color: #fff;
  border-top: var(--sf-accent-edge);
  margin-top: 96px;
}
.quote-inner {
  padding-top: 96px;
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.quote-headline {
  margin: 18px 0 0;
  font-family: var(--sf-font-display);
  font-weight: 900;
  font-size: clamp(40px, 4.5vw, 58px);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.quote-copy {
  margin: 26px 0 0;
  max-width: 480px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}
.quote-email-block {
  margin-top: 44px;
  border: 1px solid var(--sf-on-dark-line);
  padding: 26px 28px;
}
.quote-email-label {
  font-family: var(--sf-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}
.quote-email {
  font-family: var(--sf-font-display);
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.quote-email:hover {
  color: var(--sf-orange);
}
.quote-form {
  border: 1px solid var(--sf-on-dark-line);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.quote-row {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.quote-row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.quote-row.three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.quote-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
/* The full-width fields are labels that are themselves a row, and keep the
   wider row gap. Stated explicitly because this rule has to outrank the
   label rule above it. */
.quote-form label.quote-row {
  gap: 22px;
}
.quote-label {
  font-family: var(--sf-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
}
.quote-form input,
.quote-form select,
.quote-form textarea {
  font-family: var(--sf-font-text);
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sf-on-dark-line);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
}
.quote-form select option {
  color: var(--sf-ink);
  background: #fff;
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: none;
  border-color: var(--sf-orange);
}
.quote-form textarea {
  resize: vertical;
}
.quote-form input[type='file'] {
  padding: 10px;
  font-family: var(--sf-font-mono);
  font-size: 12px;
}
.quote-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.quote-actions {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.quote-submit {
  border: 0;
}
.quote-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.quote-status {
  font-family: var(--sf-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.quote-status.success {
  color: #8fd48f;
}
.quote-status.error {
  color: #f0a184;
}
.quote-status a {
  color: var(--sf-orange);
}
@media (max-width: 960px) {
  .quote-inner {
    grid-template-columns: 1fr;
  }
  .quote-row.two,
  .quote-row.three {
    grid-template-columns: 1fr;
  }
  .quote-form {
    padding: 26px 22px;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--sf-ink-deep);
  color: rgba(255, 255, 255, 0.55);
}
.footer-inner {
  padding-top: 40px;
  padding-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.footer-mark {
  height: 30px;
  width: auto;
  display: block;
}
.footer-wordmark {
  font-family: var(--sf-font-display);
  font-weight: 900;
  color: #fff;
  line-height: 0.85;
  font-size: 14px;
}
.footer-tags {
  font-family: var(--sf-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.footer-tags a {
  color: inherit;
  text-decoration: none;
}
.footer-tags a:hover {
  color: var(--sf-orange);
}
.footer-copyright {
  font-family: var(--sf-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}