@import "./tokens.css";
@import "./layout.css";
@import "./motion.css";

/* Fonts — OFL substitutes staged in prep/ (PROVENANCE.md; contract Assets table) */
/* Links inherit like the reference (footer bone, menu panel blue); nav overrides to bone (R3-D7) */
a { color: inherit; }
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrumentsans/InstrumentSans[wdth,wght].ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrumentsans/InstrumentSans-Italic[wdth,wght].ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibmplexmono/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibmplexmono/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Type utilities ---------- */
.display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--font-size-display);
  line-height: var(--font-size-display-leading);
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: none;
}
.services-title, .process-title, .projects-title { font-size: var(--font-size-display-section); } /* ref 80px @768 / 75.7px @390 (r2 D-06) */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-small);
  letter-spacing: normal;
  line-height: 12px; /* ref kicker lh 12 (R3-D11) */
  text-transform: uppercase;
  margin: 0;
}

/* ---------- Nav ---------- */
.nav-col a {
  display: block;
  text-decoration: none;
  color: var(--color-bone);
  font-family: var(--font-mono);
  font-size: 0.875rem; /* ref GT America Mono 14px uppercase (r2 D-05) */
  line-height: 18.2px; /* ref lh 18.2px (R3-D13) */
  text-transform: uppercase;
  letter-spacing: -0.7px; /* ref (R3-D13) */
}
.menu-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: normal; /* ref menu label ls normal (R3-D12) */
  line-height: 15px; /* ref lh 15px (R3-D12) */
  text-transform: uppercase;
}
.roll .cta-arrow { width: 14px; height: 7px; margin: 0 0 1px 2px; }
.menu-btn .label-close { display: none; }
html.menu-open .menu-btn .label-open { display: none; }
html.menu-open .menu-btn .label-close { display: inline; }

/* ---------- Menu overlay ---------- */
.menu-panel {
  position: absolute;
  top: 65px; right: 15px; bottom: 15px; /* ref card inset y65-885, x728-1425 @1440 (r9-iter6 probe) */
  width: min(697px, calc(100vw - 30px));
  background: var(--color-white);
  color: var(--color-blue);
  z-index: 900;
  padding: 50px 24px 25px; /* big links start viewport y115 (ref 115.8) */
  visibility: hidden;
}
html.menu-open .menu-panel { visibility: visible; }
.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-link {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400; /* ref menu big links fw400 (R3-D8) */
  font-size: clamp(2rem, 3.2vw, 46px); /* ref 46px @1440 */
  line-height: 1.2; /* 55.2px measured line box */
  text-decoration: none;
  color: var(--color-blue);
}
/* Menu info (ref: small mono list + phone + email at panel midline x1076, then field) */
.menu-info { margin-top: 160px; } /* ref first divider rule y497 = big links end 336 + 160 (r3 R2-D23) */
/* ref menu panel: row border-tops ARE the divider rules (y497/y605); label left col, content right (r3 R2-D23) */
.menu-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0; /* ref right column starts at card midline x1076.3 (iter6 probe) */
  border-top: var(--rule-hairline);
  padding: 15px 0 38px;
  align-items: start;
}
.menu-info-row > .menu-info-label { margin: 0; }
.menu-address { margin: 30px 0 0; font-size: 14px; line-height: 14px; letter-spacing: normal; }
.menu-info-small {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: 18px;
}
.menu-touch {
  margin: 0; /* row padding-top 15 lands phone y621 (r3 R2-D23) */
  font-size: 0.875rem;
  line-height: 19px;
}
.menu-touch .link { border-bottom: 1px solid var(--color-blue); padding-bottom: 4px; } /* ref js-contact underline */
.menu-touch + .menu-touch { margin-top: 10px; }
.menu-info-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-small);
  letter-spacing: normal;
  line-height: 15.96px; /* ref menu labels (R3-D11) */
  text-transform: uppercase;
}
.menu-info-col {
  list-style: none;
  margin: 0; padding: 0;
  font-size: 13.5px; /* ref small text 13.5/18.2 line boxes */
  line-height: 1.35;
}
.menu-info-col p { margin: 0 0 10px; }
.menu-panel .link { text-decoration: none; } /* ref menu links carry no underline */
.menu-newsletter {
  max-width: none;
  margin-top: 16px; /* address ends ~y727 + row pad 38; ref rule y781, field top y800 (r3 R2-D23) */
  border-top: var(--rule-hairline); /* ref rule ~y781 above the field */
  padding-top: 18px;
}
.menu-newsletter .source-button { width: 100%; height: 60px; color: var(--color-blue); }

/* ---------- Hero ---------- */
.hero-title-line {
  color: var(--color-white);
  display: block;
  letter-spacing: -0.045em; /* ref line2 ~1150px @1440; Instrument Sans wider -> tighten (r2 D-03) */
}
.hero-tag {
  font-size: 24px;
  line-height: 1; /* ref lh 24px @ fs24 (R3-D10) */
  color: var(--color-white);
}
.hero-tag .seed { display: block; }
/* ref tagline 1.667vw >=1024 (24@1440 / 17.1@1024); fixed 24 below (r3 R3 width sweep) */
@media (min-width: 1024px) {
  .hero-tag { font-size: 1.667vw; }
}
/* ref mobile mono scale ~0.9466 (brand 9.5@390, menu label 9.47@390) */
@media (max-width: 639px) {
  .brand-name, .menu-btn { font-size: 9.47px; }
}
/* ref 390 tagline 22.72px; boundary between 390 and 768 - recheck in-betweens in R3 round 6 */
@media (max-width: 480px) {
  .hero-tag { font-size: 22.72px; }
}

/* ---------- Services ---------- */
.services-title { color: var(--color-blue); }
.media-caption {
  font-family: var(--font-mono);
  font-size: var(--font-size-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue);
}
.acc-item { border-top: var(--rule-hairline); }
.acc-row {
  width: 100%;
  min-height: var(--row-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-blue);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--font-size-accordion);
  line-height: 1;
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-default);
}
.acc-icon { flex: none; width: 18px; height: 18px; margin-left: 15px; margin-right: 6px; /* rotated 135deg bbox must not pierce the gutter (r2 D-02) */ }
/* Ref panel body: mono uppercase, indented to the right half of the row (04-services-ref) */
.acc-body { padding: 0 60px 45px 51%; }
.acc-body p {
  margin: 0 0 25px;
  font-family: var(--font-mono);
  font-size: calc(var(--font-size-mono-small) * 1.25);
  letter-spacing: normal; /* ref panel body ls normal lh15.96 (r3 R2 residual) */
  text-transform: uppercase;
  line-height: 19.95px;
}
.learn-more {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-small); /* ref bracket links 12px (R3-D9) */
  letter-spacing: normal;
  line-height: 12px;
  text-transform: uppercase;
  color: var(--color-blue);
  text-decoration: none;
}

/* Roll CTA fill states: outgoing blue/bone, incoming white bg/blue text (gap-captures.json).
   Services CTA is a full-column-width bar (probe-services-cta). */
.cta {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 15px;
  padding: var(--cta-pad-block) var(--cta-pad-inline);
  background: var(--color-blue);
  color: var(--color-bone);
  border-radius: var(--radius-0);
  box-shadow: var(--shadow-none);
  font-family: var(--font-mono);
  font-size: var(--font-size-mono);
  line-height: 14px; /* ref roll CTA label lh (R3-D24) */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
}
.cta.compact { width: auto; display: inline-flex; padding: 14px 24px; }
/* Ref roll (r9-iter6 g6-roll-f1-ref): incoming label is a FULL-BUTTON white bar
   sliding up inside the blue fill — at settle it covers the whole CTA (white bg,
   blue text). Anchor it to the button box, not the text-sized stack. */
.cta .roll-stack { position: static; }
.cta .label.incoming {
  background: var(--color-white);
  color: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Process ---------- */
.process-title { color: var(--color-blue); }
.step-num { letter-spacing: normal; line-height: 30px; } /* ref big number 30/normal/30 (R3-D15) */

/* ---------- Projects ---------- */
.projects-title { color: var(--color-blue); }
.project-num { letter-spacing: normal; line-height: 12px; text-transform: uppercase; } /* ref small index 12/normal/12 (R3-D15) */
.arrow-svg { width: 18px; height: 18px; }

/* ---------- Footer ---------- */
.footer-col a {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-small);
  letter-spacing: normal; /* ref footer links ls normal (r3 R2 residual) */
  line-height: 15.96px;
  text-transform: uppercase;
  color: var(--color-bone);
  text-decoration: none;
}