/* IRON Marketing Site — shared chrome + page conventions */

body { margin: 0; background: var(--bg-canvas); color: var(--fg-2); }
a { color: inherit; }

/* ===== top nav (shared across all pages) ===== */
.nv {
  position: sticky; top: 0; z-index: 50;
  background: var(--iron-ore);
  color: var(--fg-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
}
.nv .inner {
  max-width: var(--container-marketing); margin: 0 auto;
  padding: 14px 40px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
}
.nv .lg { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.5px; color: #fff; text-decoration: none; }
.nv .lg .d { color: var(--gold); }
.nv .lk { display: flex; gap: 28px; align-items: center; }
.nv .lk a {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-on-dark-2);
  text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent;
}
.nv .lk a:hover { color: #fff; }
.nv .lk a.active { color: var(--gold); border-bottom-color: var(--gold); }
.nv .ct { display: flex; gap: 10px; align-items: center; }
.nv .ct .ph { font-family: var(--font-mono); font-size: 11px; color: var(--fg-on-dark-3); letter-spacing: 0.06em; }
.nv .ct .btn { background: var(--gold); color: var(--iron-ore); font-family: var(--font-display); font-weight: 700; font-size: 11px; padding: 9px 14px; border-radius: 4px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }

/* ===== buttons ===== */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 20px; border-radius: 4px; border: none; text-decoration: none; cursor: pointer; transition: transform 140ms; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--gold); color: var(--iron-ore); }
.btn-on-dark-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.3); }
.btn-light-ghost { background: transparent; color: var(--fg-1); border: 1.5px solid var(--border-default); }
.btn-dark { background: var(--iron-ore); color: #fff; }

/* ===== eyebrows ===== */
.eb { font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }
.eb.on-dark { color: var(--gold); }
.eb-mono { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.08em; }
.eb-mono.on-dark { color: var(--fg-on-dark-3); }

/* ===== display heads ===== */
.h-display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.015em; line-height: 0.92; color: var(--fg-1); margin: 0; }
.h-display.on-dark { color: #fff; }
.h-display .it { color: var(--gold-deep); font-style: italic; font-weight: 500; }
.h-display.on-dark .it { color: var(--gold); font-weight: 500; }

/* ===== footer ===== */
.ft { background: var(--iron-black); color: var(--fg-on-dark-2); padding: 80px 40px 40px; }
.ft .inner { max-width: var(--container-marketing); margin: 0 auto; }
.ft .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--border-on-dark); }
.ft .lg { font-family: var(--font-display); font-weight: 700; font-size: 38px; letter-spacing: 0.5px; color: #fff; }
.ft .lg .d { color: var(--gold); }
.ft .blurb { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--fg-on-dark-2); margin: 12px 0 18px; max-width: 320px; }
.ft .col h4 { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.ft .col a { display: block; font-family: var(--font-body); font-size: 13px; color: var(--fg-on-dark-2); text-decoration: none; padding: 5px 0; }
.ft .col a:hover { color: var(--gold); }
.ft .row { display: flex; justify-content: space-between; padding-top: 24px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-on-dark-3); letter-spacing: 0.06em; }
.ft .row a { color: var(--fg-on-dark-3); text-decoration: none; }

/* ===== shared section conventions ===== */
.sec { padding: 96px 40px; }
.sec .wrap { max-width: var(--container-marketing); margin: 0 auto; }
.sec.dark { background: var(--iron-ore); color: var(--fg-on-dark); }
.sec.black { background: var(--iron-black); color: var(--fg-on-dark); }
.sec.muted { background: var(--iron-mist); }

/* photo placeholder (uses interior-1.jpg w/ optional grayscale) */
.photo-bg { background: url('assets/interior-1.jpg') center/cover no-repeat; filter: grayscale(100%) contrast(1.04); }

/* page-toolbar at top — context for design system viewer */
.page-toolbar {
  background: var(--iron-mist);
  border-bottom: 1px solid var(--border-hairline);
  padding: 10px 40px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--fg-3);
  display: flex; justify-content: space-between;
}
.page-toolbar a { color: var(--gold-deep); text-decoration: none; }

/* ===== mobile ===== */
@media (max-width: 860px) {
  .nv .inner { padding: 10px 20px; }
  .ft { padding: 56px 20px 32px; }
  .ft .top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .ft .row { flex-direction: column; gap: 12px; align-items: flex-start; }
}
@media (max-width: 480px) {
  .ft .top { grid-template-columns: 1fr; }
}