/* Phase Final, Inc. — multi-page site
   Brand: Volt #90C73E over cool slate neutrals, per Phase Final tokens.
   Zero external requests; no JavaScript.

   FONTS: the brand faces are Space Grotesk (display), IBM Plex Sans (body),
   IBM Plex Mono (labels). To keep this zip free of external requests they are
   referenced by local name only, with system fallbacks. To ship the exact
   faces, place woff2 files in fonts/ and uncomment the @font-face blocks. */

@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-Var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-Var.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light dark;
  --ink:            #0f1318;
  --ink-2:          #181d22;
  --text:           #0f1318;
  --text-secondary: #4d5763;
  --text-tertiary:  #626d78; /* 4.96:1 on paper (was #6b7682, 4.3:1) */
  --paper:          #f6f8f9;
  --border:         #c2cad2;
  --border-subtle:  #dde2e7;
  --accent:         #90c73e;
  --accent-text:    #527a1e; /* 4.74:1 on paper (was #588021, 4.36:1) */
  --volt-200:       #d0e8a0;
  --volt-300:       #b8db72;
  --volt-400:       #a3d052;
  --volt-500:       #90c73e;
  --slate-300:      #c2cad2;
  --slate-400:      #97a2ad;
  --slate-700:      #394149;
  --slate-800:      #262c33;
  --display: "Space Grotesk", "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, sans-serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text:           #f6f8f9;
    --text-secondary: #c2cad2;
    --text-tertiary:  #97a2ad;
    --paper:          #0f1318;
    --border:         #394149;
    --border-subtle:  #262c33;
    --accent-text:    #b8db72;
    --ink:            #0a0d11;
    --ink-2:          #181d22;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--volt-200); color: #0f1318; }

a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--volt-500); outline-offset: 3px; }

/* ---- Skip link: first stop for the keyboard, off-screen until focused ---- */
.skip {
  position: absolute; left: 16px; top: 12px; z-index: 10;
  transform: translateY(-200%);
  padding: 8px 12px; border-radius: 6px;
  background: var(--paper); color: var(--text);
  font-family: var(--mono); font-size: 12.5px;
}
.skip:focus-visible { transform: none; }

/* ---- Site header: the brand and the whole site's nav, one row, every page ---- */
.site-header { background: var(--ink); color: #f6f8f9; }
.site-header-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  flex-wrap: wrap;
}
.brand { display: block; line-height: 0; }
.brand img { height: 28px; width: auto; display: block; }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}
.site-nav a {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--slate-300);
}
.site-nav a:hover { color: var(--volt-300); }
.site-nav a[aria-current="page"] { color: #ffffff; box-shadow: inset 0 -2px 0 var(--volt-500); }
p { margin: 0; text-wrap: pretty; }

/* ---- Hero: ink console surface with engineering grid ---- */
#hero {
  background: var(--ink);
  color: #f6f8f9;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 3px solid var(--volt-500);
}
/* The engineering grid is its own layer, so the text's background is the ink it
   actually sits on (a detector reading the gradient as the background saw 1.1:1). */
#hero::before, .contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(246,248,249,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,248,249,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

.hero-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) 28px clamp(52px, 8vw, 88px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 64px);
}

.hero-copy { max-width: 800px; }

.lede {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(32px, 5.6vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: #ffffff;
  text-wrap: balance;
}
.sublede {
  margin-top: 24px;
  font-size: clamp(16.5px, 2vw, 19px);
  color: var(--slate-300);
  max-width: 62ch;
}
.intro-note {
  margin-top: 20px;
  font-size: 16px;
  color: var(--slate-400);
  max-width: 62ch;
}

.spec-bar {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate-400);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}
.spec-bar span { padding: 0 18px; border-left: 1px solid var(--slate-700); }
.spec-bar span:first-child { padding-left: 0; border-left: none; }
.spec-bar .spec-accent { color: var(--volt-300); }
@media (max-width: 600px) {
  /* stacked, a divider would only ever start a line: drop it */
  .spec-bar { flex-direction: column; gap: 6px; }
  .spec-bar span { padding: 0; border-left: none; }
}

/* ---- Body ---- */
main {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 28px 72px;
}

section {
  border-top: 1px solid var(--border);
  padding: 52px 0 64px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
main > section:first-of-type { border-top: none; padding-top: 72px; }

h2 {
  margin: 0;
  flex: 0 0 208px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
h2 .num { color: var(--accent-text); margin-right: 12px; }

.section-body { flex: 1 1 380px; max-width: 620px; }

/* Services */
.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.service-list h3 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.service-list h3 a { color: inherit; text-decoration: none; }
.service-list h3 a:hover { color: var(--accent-text); text-decoration: underline; }
.service-list p { color: var(--text-secondary); }

/* Engagement */
#engagement .section-body p + p { margin-top: 18px; }
.referral-note { color: var(--text-secondary); }

/* Track record */
.record-list { margin: 0; }
.record { padding: 24px 0 26px; }
.record:first-child { padding-top: 0; }
.record + .record { border-top: 1px solid var(--border-subtle); }
.record dt {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.record .idx { color: var(--accent-text); margin-right: 6px; }
.record dd { margin: 0; font-size: 17.5px; }
.record strong { font-family: var(--display); font-weight: 600; }

/* Contact — ink console panel (the home page's closing card) */
.contact-card {
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: none;
  background: var(--ink-2);
  border-radius: 16px;
  padding: 64px;
  color: #f6f8f9;
}
.contact-card h2 { color: var(--slate-400); margin-bottom: 20px; }
.contact-card h2 .num { color: var(--volt-400); }
.contact-address {
  font-size: clamp(23px, 4vw, 38px);
  line-height: 1.25;
}
.contact-address a {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--volt-300);
  text-decoration: none;
  border-bottom: 2px solid var(--volt-500);
}
.contact-address a:hover { color: var(--volt-200); }
.contact-note {
  margin-top: 20px;
  color: var(--slate-300);
  max-width: 56ch;
  font-size: 16px;
}

/* Footer — the same on every page */
.site-footer {
  max-width: 864px;
  width: calc(100% - 56px);
  margin: 0 auto;
  padding: 28px 0 48px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 24px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-tertiary);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-footer nav a { color: var(--text-tertiary); text-decoration: none; }
.site-footer nav a:hover { color: var(--accent-text); text-decoration: underline; }
.site-footer nav a[aria-current="page"] { color: var(--text); }

@media (max-width: 480px) {
  main { padding: 0 20px 56px; }
  .hero-inner, .site-header-inner { padding-left: 20px; padding-right: 20px; }
  .site-footer { width: calc(100% - 40px); }
  section { padding: 40px 0 48px; }
  main > section:first-of-type { padding-top: 48px; }
  .contact-card { padding: 36px 28px; }
  .site-nav ul { gap: 2px 18px; }
}

/* ---- Multi-page additions (2026-09-28) ---- */

/* Sub-pages get a compact page header instead of the full hero */
.page-header {
  background: var(--ink);
  border-bottom: 3px solid var(--volt-500);
  color: #f6f8f9;
}
.page-header .hero-inner { gap: 20px; padding-bottom: clamp(36px, 5vw, 56px); padding-top: clamp(28px, 4vw, 44px); }
.page-header .lede { font-size: clamp(26px, 4.4vw, 40px); }
.page-header .sublede { margin-top: 14px; }
.page-header .lede { line-height: 1.18; }

/* Service detail pages */
.detail-lede { font-size: 18.5px; max-width: 62ch; }
.detail-lede + .detail-lede { margin-top: 18px; }
.detail-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.detail-list h3 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.detail-list p { color: var(--text-secondary); }

/* Cross-links between pages */
.related {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.related a { margin-right: 18px; display: inline-block; white-space: nowrap; }