/* ============================================================
   site.css - Graphline Systems
   Static port of the React/JSX design prototype. Every value is
   translated 1:1 from the handoff components; hover/active/
   responsive (React state in the prototype) are CSS here.
   ============================================================ */

/* ---- Base / reset (from prototype index.html <style>) ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: rgba(0, 194, 209, .24); }
img { max-width: 100%; }

.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Primitives
   ============================================================ */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.container--narrow { max-width: 940px; }

/* Eyebrow */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}
.eyebrow--ondark { color: var(--steel-300); }

/* Kickers now live only on page heroes and project cards; interior section
   headings lead their own sections, so the heading sits flush at the top of
   its head block (the top margin previously spaced it under a kicker). */
.section-head > :first-child,
.proof-head > :first-child,
.contact-head > :first-child,
.about-h2:first-child { margin-top: 0; }

/* Tags */
.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
  display: inline-block;
}
.tag--solid   { background: var(--accent); color: var(--accent-ink); }
.tag--soft    { background: var(--accent-soft); color: var(--accent-hover); }
.tag--outline { background: transparent; color: var(--fg-muted); border-color: var(--border-strong); }
.tag--slate   { background: var(--slate-500); color: #fff; }

/* Buttons */
.btn {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--r-sm);
  padding: 12px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: all var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--lg { font-size: 16px; padding: 15px 26px; }
.btn--sm { font-size: 13px; padding: 8px 14px; }
.btn .icon { width: 1em; height: 1em; }

.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--sh-xs); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { box-shadow: none; }

.btn--secondary { background: transparent; color: var(--fg); border-color: var(--border-ink); }
.btn--secondary:hover { background: rgba(255, 255, 255, .06); border-color: var(--accent); }

.btn--ghost { background: transparent; color: var(--accent); padding: 8px 6px; border-color: transparent; }

.btn--dark { background: var(--bg-raised); color: var(--fg); border-color: var(--border-strong); }
.btn--dark:hover { background: var(--navy-700); }

/* Lucide-style inline icons inherit color; stroke via --sw (CSS overrides the
   presentation attr on the sprite symbol, so per-use stroke works) */
.icon { display: inline-flex; flex: none; }
.icon svg { display: block; width: 100%; height: 100%; stroke-width: var(--sw, 1.75); }

/* ============================================================
   Nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all var(--dur) var(--ease);
}
.site-header.scrolled {
  background: rgba(8, 22, 36, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-bar {
  display: flex;
  align-items: center;
  height: 72px;
  gap: 28px;
}
.nav-links { display: flex; gap: 26px; margin-left: 14px; }
.nav-links a {
  font-size: 14.5px;
  color: var(--fg-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur-fast);
}
.nav-links a:hover { color: var(--accent); }
.nav-spacer { flex: 1; }
.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg);
  padding: 4px;
}
.nav-mobile { padding-bottom: 18px; }
.nav-mobile-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.nav-mobile-inner a {
  font-size: 16px;
  padding: 10px 0;
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
}
.nav-mobile[hidden] { display: none; }
.nav-burger-close { display: none; }
.site-header.menu-open .nav-burger-open { display: none; }
.site-header.menu-open .nav-burger-close { display: inline-flex; }

/* Logo */
.logo { --ls: 32px; display: flex; align-items: center; gap: 11px; text-decoration: none; }
.logo--36 { --ls: 36px; }
.logo-mark { position: relative; flex: none; display: flex; }
.logo-img {
  width: calc(var(--ls) * 1.25);
  height: calc(var(--ls) * 1.25);
  display: block;
  object-fit: contain;
}
.logo-text { line-height: 1.05; }
.logo-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.logo-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-top: 1px;
}
/* dark variant (footer) */
.logo--dark .logo-name { color: #fff; }
.logo--dark .logo-sub { color: var(--steel-300); }

/* ============================================================
   Hero (transformation card)
   ============================================================ */
.hero { position: relative; padding-top: 56px; padding-bottom: 56px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.04fr;
  gap: 48px;
  align-items: center;
}
.hero-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin: 20px 0 0;
}
.hero-sub {
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 22px 0 0;
  max-width: 46ch;
}
.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-subtle);
}

/* Transformation card (hero) */
.transform {
  --xf-orange: var(--warn);
  --xf-blue:   var(--accent);
  --xf-green:  var(--ok);
  background: var(--bg-raised);
  border-radius: var(--r-lg);
  padding: 28px 30px;
  box-shadow: var(--sh-lg);
  border: 1px solid rgba(139, 165, 184, .16);
  color: var(--fg-on-dark);
}
.transform-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(23px, 2.1vw, 28px); line-height: 1.08;
  letter-spacing: -0.02em; color: #fff; margin: 0 0 22px;
}
.transform-body {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 30px;
  align-items: start;
}

/* Process flow */
.tflow { list-style: none; margin: 0; padding: 0; }
.tstep { display: flex; gap: 16px; }
.tstep-rail {
  position: relative; display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0;
}
/* connector line between icon circles */
.tstep:not(:last-child) .tstep-rail::after {
  content: ""; flex: 1; width: 1px; min-height: 14px;
  background: rgba(139, 165, 184, .25); margin: 6px 0;
}
.tstep-ico {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(139, 165, 184, .12); color: var(--steel-200);
}
.tstep--before    .tstep-ico { background: rgba(251, 191, 36, .14);  color: var(--xf-orange); }
.tstep-ico--img { overflow: hidden; }
.tstep-ico--img img { width: 100%; height: 100%; object-fit: cover; }
.tstep--discovery .tstep-ico,
.tstep--transform .tstep-ico { background: rgba(63, 131, 248, .14); color: var(--xf-blue); }
.tstep--after     .tstep-ico { background: rgba(63, 184, 115, .16); color: var(--xf-green); }
.tstep-txt { display: flex; flex-direction: column; padding-bottom: 14px; }
.tstep:not(:last-child) .tstep-txt { border-bottom: 1px solid rgba(139, 165, 184, .12); }
.tstep:last-child .tstep-txt { padding-bottom: 0; }
.tstep-tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-300);
}
.tstep--before    .tstep-tag { color: var(--xf-orange); }
.tstep--discovery .tstep-tag,
.tstep--transform .tstep-tag { color: var(--xf-blue); }
.tstep--after     .tstep-tag { color: var(--xf-green); }
.tstep-h { font-size: 13px; font-weight: 600; color: #fff; margin: 2px 0 5px; }
.tstep-p { font-size: 11.5px; line-height: 1.45; color: var(--steel-200); }

/* Results column */
.tresults {
  border-left: 1px solid rgba(139, 165, 184, .16);
  padding-left: 28px;
}
.tresults-label {
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-300);
  margin-bottom: 4px;
}
.tresults-list { list-style: none; margin: 0; padding: 0; }
.tresults-list li {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center;
  gap: 12px; padding: 9px 0;
}
.tresults-list li + li { border-top: 1px solid rgba(139, 165, 184, .12); }
.tr-ico {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: rgba(139, 165, 184, .10);
  border: 1px solid rgba(139, 165, 184, .14);
  color: var(--steel-200);
}
.tr-num {
  font-family: var(--font-mono); font-weight: 600; font-size: 20px;
  color: #fff; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.tr-num--orange { color: var(--accent); }
.tr-num--blue   { color: var(--xf-blue); }
.tr-num--green  { color: var(--xf-green); }
.tr-cap {
  font-size: 11.5px; line-height: 1.3; color: var(--steel-200);
}
@media (max-width: 1080px) and (min-width: 901px) {
  .transform-body { grid-template-columns: 1fr; gap: 22px; }
  .tresults { border-left: 0; padding-left: 0; padding-top: 18px;
    border-top: 1px solid rgba(139, 165, 184, .16); }
}
@media (max-width: 560px) {
  .transform-body { grid-template-columns: 1fr; gap: 22px; }
  .tresults { border-left: 0; padding-left: 0; padding-top: 18px;
    border-top: 1px solid rgba(139, 165, 184, .16); }
}

/* ============================================================
   Proof strip
   ============================================================ */
.proof { background: var(--navy-900); color: var(--fg-on-dark); padding: 54px 0; }
.proof-head { max-width: 640px; margin-bottom: 40px; }
.proof-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 36px); line-height: 1.12;
  letter-spacing: -0.02em; color: #fff; margin: 16px 0 0;
}
/* When the strip carries a heading it reads as a full section, not a band. */
.proof:has(.proof-head) { padding: 84px 0; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.proof-item { border-left: 1px solid rgba(139, 165, 184, .25); padding-left: 20px; }
.proof-num {
  font-family: var(--font-mono); font-weight: 600; font-size: 38px;
  color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.proof-num .unit { font-size: 16px; color: var(--steel-300); margin-left: 5px; }
.proof-label { font-size: 13.5px; color: var(--steel-200); margin-top: 8px; line-height: 1.45; }

/* ============================================================
   Services
   ============================================================ */
.services { padding: 88px 0; border-top: 1px solid var(--border); }
.section-head { max-width: 620px; margin-bottom: 44px; }
.section-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12;
  letter-spacing: -0.02em; color: var(--fg); margin: 16px 0 0;
}
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.svc-list { display: flex; flex-direction: column; gap: 4px; }
.svc-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px 18px; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-md); box-shadow: none;
  transition: all var(--dur-fast) var(--ease); font: inherit;
}
.svc-row:hover { background: rgba(255, 255, 255, .04); }
.svc-row.active {
  background: var(--bg-raised); border-color: var(--border-strong); box-shadow: var(--sh-sm);
}
.svc-ico {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
  background: var(--bg-sunken); display: flex; align-items: center; justify-content: center;
  color: var(--slate-500);
}
.svc-row.active .svc-ico { background: var(--accent-soft); color: var(--accent); }
.svc-text { flex: 1; }
.svc-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--fg); }
.svc-tag { display: block; font-size: 13px; color: var(--fg-subtle); margin-top: 2px; }
.svc-chev { color: var(--steel-300); }
.svc-row.active .svc-chev { color: var(--accent); }

/* Stack every panel in one grid cell so the container is always sized to the
   tallest panel. Switching services no longer changes the section height, so
   the "View all services" button below stays put. */
.svc-detail-wrap { position: sticky; top: 96px; display: grid; }
.svc-panel {
  grid-area: 1 / 1;
  background: var(--bg-raised); border-radius: var(--r-lg); padding: 36px;
  color: var(--fg-on-dark); box-shadow: var(--sh-md);
}
/* Keep hidden panels in layout (so they still reserve height) but invisible
   and non-interactive. */
.svc-panel[hidden] { display: block; visibility: hidden; }
.svc-panel-ico {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: rgba(0, 194, 209, .15); display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px; color: var(--accent);
}
.svc-panel h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
  letter-spacing: -0.01em; margin: 0; color: #fff;
}
.svc-panel p { font-size: 15.5px; line-height: 1.65; color: var(--steel-200); margin: 14px 0 24px; }
.svc-deliv-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--steel-300); margin-bottom: 12px;
}
.svc-deliv { display: flex; flex-direction: column; gap: 10px; }
.svc-deliv div { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--fg-on-dark); }
.svc-deliv .icon { color: var(--accent); }

/* ============================================================
   Work
   ============================================================ */
.work { padding: 88px 0; background: linear-gradient(180deg, var(--navy-900), var(--bg)); }
.work-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 40px; flex-wrap: wrap;
}
.work-head > div { max-width: 580px; }
.work-list { display: flex; flex-direction: column; gap: 24px; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Featured (bioAF) */
.feat-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-sm); transition: all var(--dur) var(--ease);
}
.feat-grid:hover { border-color: var(--border-strong); box-shadow: var(--sh-md); }
.feat-media { position: relative; min-height: 340px; background: var(--navy-900); overflow: hidden; }
.feat-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: left top;
  position: absolute; inset: 0; transform: scale(1);
  transition: transform var(--dur-slow) var(--ease);
}
.feat-grid:hover .feat-media img { transform: scale(1.03); }
.feat-media-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,32,46,.38) 0%, rgba(18,32,46,0) 24%, rgba(18,32,46,0) 48%, rgba(18,32,46,.86) 100%);
}
.feat-tags { position: absolute; left: 22px; top: 22px; display: flex; gap: 8px; }
.feat-stat { position: absolute; left: 22px; bottom: 20px; color: #fff; }
.feat-stat-num { font-family: var(--font-mono); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; }
.feat-stat-cap {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--steel-200); margin-top: 4px;
}
.feat-body { padding: 36px; display: flex; flex-direction: column; }
.feat-body h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 28px;
  letter-spacing: -0.015em; color: var(--fg); margin: 14px 0 0;
}
.feat-body p { font-size: 15.5px; line-height: 1.65; color: var(--fg-muted); margin: 14px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--fg-muted); background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 4px 11px; white-space: nowrap;
}
.feat-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 24px;
  white-space: nowrap; font-family: var(--font-mono); font-size: 13px;
  font-weight: 500; color: var(--accent); text-decoration: none;
  transition: color var(--dur-fast);
}
.feat-grid:hover .feat-link { color: var(--accent-hover); }

/* Project card */
.card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm);
  transition: all var(--dur) var(--ease); display: flex; flex-direction: column;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--sh-md); }
.card-media { position: relative; height: 168px; overflow: hidden; background: var(--navy-800); }
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.45) contrast(1.02); transform: scale(1);
  transition: transform var(--dur-slow) var(--ease);
}
.card:hover .card-media img { transform: scale(1.04); }
.card-media-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,43,60,.15), rgba(26,43,60,.62));
  mix-blend-mode: multiply;
}
.card-tags { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 8px; }
.card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.card-title-row { display: flex; align-items: center; gap: 9px; }
.card-title-row .icon { color: var(--steel-400); }
.card-body h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  letter-spacing: -0.01em; color: var(--fg); margin: 0;
}
.card-body p { font-size: 14.5px; line-height: 1.6; color: var(--fg-muted); margin: 12px 0 0; }
.card-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: auto; padding-top: 22px;
}
.card-metric {
  font-family: var(--font-mono); font-weight: 600; font-size: 22px;
  color: var(--accent); letter-spacing: -0.01em; white-space: nowrap;
}
.card-metric--slate { color: var(--steel-200); }
.card-metric-cap {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-subtle); margin-top: 3px;
}
.card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-subtle);
  text-decoration: none; transition: color var(--dur-fast);
}
.card:hover .card-cta { color: var(--accent); }

/* ============================================================
   About / expertise
   ============================================================ */
.about { padding: 88px 0; background: var(--navy-900); border-top: 1px solid var(--border); }
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; }
.about-photo {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-md); border: 1px solid var(--border);
}
.about-photo img {
  width: 100%; height: 360px; object-fit: cover; object-position: 50% 28%;
  display: block; filter: grayscale(0.12) contrast(1.02);
}
.about-badge {
  position: absolute; left: 14px; top: 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255, 255, 255, .62);
  background: rgba(18, 32, 46, .5); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); padding: 4px 8px; border-radius: var(--r-xs);
}
.about-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.14;
  letter-spacing: -0.02em; color: var(--fg); margin: 16px 0 0;
}
.about-copy {
  font-size: 16.5px; line-height: 1.7; color: var(--fg-muted);
  margin-top: 20px; display: flex; flex-direction: column; gap: 14px;
}
.about-copy p { margin: 0; }
.about-track { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.about-track-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 14px;
}
.about-orgs { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }
.about-orgs span {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--slate-500); letter-spacing: -0.01em;
}

/* ============================================================
   Contact
   ============================================================ */
.contact { background: var(--navy-900); color: var(--fg-on-dark); padding: 88px 0; }
.contact-head { max-width: 620px; margin-bottom: 40px; }
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.bookcall-cta { margin-top: auto; }
.contact-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08;
  letter-spacing: -0.025em; color: #fff; margin: 18px 0 0;
}
.contact-sub { font-size: 17px; line-height: 1.6; color: var(--steel-200); margin: 18px 0 28px; max-width: 46ch; }

.bookcall {
  background: rgba(139, 165, 184, .08); border: 1px solid rgba(139, 165, 184, .22);
  border-radius: var(--r-md); padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.bookcall-head { display: flex; align-items: center; gap: 12px; }
.bookcall-ico {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: rgba(0, 194, 209, .15); display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.bookcall-title { font-weight: 600; font-size: 16px; color: #fff; }
.bookcall-free { font-family: var(--font-mono); font-size: 11px; color: var(--steel-300); margin-top: 2px; }
.bookcall p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--steel-300); }

/* Prominent email address inside the email card */
.email-addr {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  word-break: break-word;
  transition: color var(--dur-fast);
}
.email-addr:hover { color: var(--accent); }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--navy-900); border-top: 1px solid rgba(139, 165, 184, .18);
  padding: 48px 0 36px; color: var(--fg-on-dark);
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.foot-about p { font-size: 14px; line-height: 1.6; color: var(--steel-300); margin: 18px 0 0; max-width: 34ch; }
.foot-status {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  font-family: var(--font-mono); font-size: 12px; color: var(--steel-200);
}
.foot-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.foot-col-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--steel-400); margin-bottom: 16px;
}
.foot-links { display: flex; flex-direction: column; gap: 11px; }
.foot-links a {
  font-size: 14.5px; color: var(--steel-200); text-decoration: none;
  transition: color var(--dur-fast);
}
.foot-links a:hover { color: var(--accent); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(139, 165, 184, .18);
  flex-wrap: wrap; gap: 14px;
}
.foot-bottom span { font-family: var(--font-mono); font-size: 12px; color: var(--steel-400); }

/* ============================================================
   Interior pages + problem/outcome framing
   (new sections; built from the same tokens as the prototype)
   ============================================================ */

/* Page hero (interior page header) */
.page-hero { padding: 64px 0 24px; }
.page-hero .hero-sub { max-width: 60ch; }
.page-hero .eyebrow { margin-bottom: 18px; }

/* Restrained hero: smaller, calmer heading for a professional/legal audience */
.page-hero--restrained .hero-h1 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.02em; line-height: 1.12; }

/* Generic interior section rhythm */
.page-section { padding: 64px 0; }
.page-section--sunken { background: linear-gradient(180deg, var(--navy-900), var(--bg)); }
.page-section .section-head { margin-bottom: 32px; }

/* Prose blocks */
.prose { font-size: 16.5px; line-height: 1.7; color: var(--fg-muted); max-width: 68ch; display: flex; flex-direction: column; gap: 16px; }
.prose p { margin: 0; }
.prose strong { color: var(--fg); font-weight: 600; }

/* Signals ("signs you may need help") */
.signals { padding: 88px 0; }
.signals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.signal {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-sm);
}
.signal-ico {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.signal p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg); }

/* Problem / outcome two-column block */
.io-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.io-card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-sm);
}
.io-card--dark { background: var(--navy-900); border-color: rgba(139, 165, 184, .16); }
.io-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 16px;
}
.io-card--dark .io-label { color: var(--steel-300); }
.io-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.io-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--fg); }
.io-card--dark .io-list li { color: var(--fg-on-dark); }
.io-list .icon { flex: none; margin-top: 1px; }
.io-list--problem .icon { color: var(--steel-400); }
.io-list--outcome .icon { color: var(--accent); }

/* Focus areas */
.focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.focus-item {
  font-family: var(--font-mono); font-size: 13px; color: var(--fg-muted);
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px;
}

/* Services overview cards */
.svc-foot { margin-top: 36px; }
.svc-panel-link { margin-top: 24px; }
.svc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.svc-card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 30px; box-shadow: var(--sh-sm);
  display: flex; flex-direction: column; transition: all var(--dur) var(--ease);
  text-decoration: none;
}
.svc-card:hover { border-color: var(--border-strong); box-shadow: var(--sh-md); }
.svc-card { scroll-margin-top: 96px; }
.svc-card-ico {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.svc-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; color: var(--fg); margin: 0; }
.svc-card-tag { font-family: var(--font-mono); font-size: 13px; color: var(--fg-subtle); margin-top: 6px; }
.svc-card > p { font-size: 14.5px; line-height: 1.6; color: var(--fg-muted); margin: 14px 0 0; }
.svc-card-link { margin-top: auto; padding-top: 20px; }

/* "Not sure which fits?" prompt card: navy, to stand apart from the service cards */
.svc-card--cta { background: var(--navy-900); border-color: rgba(139, 165, 184, .16); }
.svc-card--cta:hover { border-color: rgba(139, 165, 184, .3); box-shadow: var(--sh-md); }
.svc-card--cta .svc-card-ico { background: rgba(0, 194, 209, .15); }
.svc-card--cta h3 { color: #fff; }
.svc-card--cta p { font-size: 14.5px; line-height: 1.6; color: var(--steel-200); margin: 14px 0 0; }

/* Card as a full link (case study / work cards) */
a.card { text-decoration: none; }
a.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Target-clients chips (due diligence) */
.client-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Service detail page sections ---- */
/* Results / outcomes checklist grid */
.checks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 28px; margin: 0; padding: 0; list-style: none; }
.checks-grid li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--fg); }
.checks-grid .icon { flex: none; margin-top: 1px; color: var(--accent); }

/* "What an engagement looks like" steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
.step {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-sm);
}
.step-num { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; color: var(--accent); }
.step-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--fg); margin: 10px 0 0; letter-spacing: -0.01em; }
.step-desc { font-size: 14px; line-height: 1.55; color: var(--fg-muted); margin: 8px 0 0; }

/* Case-study teaser band */
.teaser-band {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--navy-900); border-radius: var(--r-lg); padding: 26px 30px;
  text-decoration: none; box-shadow: var(--sh-sm); margin-top: 40px;
  border: 1px solid rgba(139, 165, 184, .16); transition: all var(--dur) var(--ease);
}
.teaser-band:hover { box-shadow: var(--sh-md); border-color: rgba(139, 165, 184, .3); }
.teaser-band .io-label { margin-bottom: 6px; color: var(--steel-300); }
.teaser-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: #fff; letter-spacing: -0.01em; line-height: 1.3; }
.teaser-band .feat-link { color: var(--accent); white-space: nowrap; margin: 0; }

@media (max-width: 760px) {
  .checks-grid { grid-template-columns: 1fr 1fr; }
  .teaser-band { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 520px) {
  .checks-grid { grid-template-columns: 1fr; }
}

/* ---- Case study detail page ---- */
/* Snapshot meta strip */
.cs-meta {
  display: flex; flex-wrap: wrap; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); overflow: hidden; margin-top: 32px;
}
.cs-meta > div { flex: 1; min-width: 200px; padding: 20px 24px; border-right: 1px solid var(--border); }
.cs-meta > div:last-child { border-right: none; }
.cs-meta-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 8px;
}
.cs-meta-val { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--fg); letter-spacing: -0.01em; }

/* Framed figure */
.cs-figure {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--sh-md); background: var(--navy-900); margin: 0;
}
.cs-figure img { display: block; width: 100%; height: auto; }

/* Pull quote */
.cs-quote {
  margin: 0; padding: 26px 32px;
  border-left: 3px solid var(--accent);
  background: var(--bg-panel); border-radius: 0 var(--r-lg) var(--r-lg) 0;
  box-shadow: var(--sh-sm);
}
.cs-quote p {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 21px; line-height: 1.5; letter-spacing: -0.01em; color: var(--fg);
}
.cs-quote p + p { margin-top: 12px; }

/* Deliverable cards */
.deliv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.deliv-card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-sm);
  display: flex; flex-direction: column;
}
.deliv-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.deliv-ico {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.deliv-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: var(--fg); margin: 0; }
.deliv-close { font-size: 14.5px; line-height: 1.55; color: var(--fg-muted); margin: 18px 0 0; }

/* Before / after metrics table */
.metrics-wrap { overflow-x: auto; }
.metrics-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.metrics-table thead th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-subtle); font-weight: 500;
  text-align: left; padding: 0 16px 14px;
}
.metrics-table td { padding: 14px 16px; border-top: 1px solid var(--border); vertical-align: middle; }
.metrics-table td.metric-name { color: var(--fg); font-weight: 500; }
.metrics-table td.before { font-family: var(--font-mono); color: var(--fg-subtle); }
.metrics-table td.after { font-family: var(--font-mono); color: var(--accent); font-weight: 600; }

@media (max-width: 760px) {
  .deliv-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Responsive (breakpoints from prototype)
   ============================================================ */
@media (max-width: 900px) {
  .signals-grid { grid-template-columns: 1fr 1fr; }
  .io-cols { grid-template-columns: 1fr; }
  .focus-grid { grid-template-columns: 1fr 1fr; }
  .svc-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .signals-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-detail-wrap { position: static; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-cards { grid-template-columns: 1fr; gap: 20px; }
  .feat-grid { grid-template-columns: 1fr; }
  .feat-media { min-height: 240px; }
}
@media (max-width: 760px) {
  .proof-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .work-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
}

/* ============================================================
   Brand polish - dark-engineering depth + interaction
   Additive layer over the recolor: subtle, motivated, and
   reduced-motion safe (no animation, purely static depth).
   ============================================================ */

/* Ambient retro-tech field behind everything: a barely-there flat grid plus
   faint CRT scanlines (late-80s / early-90s terminal vibe, kept subtle).
   Fixed and z-index:-1 so it paints above the canvas but below all content;
   opaque cards and deep bands cover it, open navy sections let it through. */
.bg-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  rgba(0, 194, 209, 0.07) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(to bottom, rgba(0, 194, 209, 0.07) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(to bottom, rgba(216, 234, 240, 0.02) 0 2px, transparent 2px 4px);
  background-position: center top;
}
@media (prefers-reduced-motion: reduce) { .bg-field { /* static anyway */ } }

/* Hero "outrun" floor: a cyan perspective grid receding to a horizon, the
   signature 80s/Tron move. Sits below the hero content, fades up to a faint
   horizon glow. Kept restrained, present but not Knight-Rider loud. */
.hero::after {
  content: "";
  position: absolute;
  left: -35%;
  right: -35%;
  bottom: -8%;
  height: 70%;
  background-image:
    repeating-linear-gradient(to right,  rgba(0, 194, 209, 0.65) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(to bottom, rgba(0, 194, 209, 0.65) 0 1px, transparent 1px 74px);
  transform: perspective(280px) rotateX(70deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 2%, rgba(0,0,0,0.85) 22%, transparent 80%);
          mask-image: linear-gradient(to top, #000 2%, rgba(0,0,0,0.85) 22%, transparent 80%);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

/* Ambient cyan depth at the two conversion moments only (hero + contact).
   One brand accent, low opacity: gives the dark canvas dimension without
   the "AI glow" cliche of glows on every section. */
.hero { overflow: clip; }
.hero::before {
  content: "";
  position: absolute;
  inset: -12% -6% auto auto;
  width: 62%;
  height: 130%;
  background: radial-gradient(58% 58% at 80% 16%,
              rgba(0, 194, 209, 0.13), rgba(0, 194, 209, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }

.contact { position: relative; overflow: clip; }
.contact::before {
  content: "";
  position: absolute;
  inset: auto auto -35% -12%;
  width: 56%;
  height: 150%;
  background: radial-gradient(50% 55% at 18% 82%,
              rgba(0, 194, 209, 0.10), rgba(0, 194, 209, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.contact > .container { position: relative; z-index: 1; }

/* Fine grain over the large dark fields: kills gradient banding and adds
   tooth so the flat navy never reads as sterile. Fixed, non-interactive,
   imperceptible over text. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cards warm to the accent on hover (was a plain steel border). The base
   hover rules still supply the shadow lift; this only tints the edge. */
.card:hover,
.feat-grid:hover,
.svc-card:hover,
.step:hover,
.signal:hover,
.deliv-card:hover {
  border-color: var(--accent-line);
}
.step, .signal, .deliv-card { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.step:hover, .signal:hover, .deliv-card:hover { box-shadow: var(--sh-md); }

/* About: brand-mark plate in place of the founder headshot. The constellation
   sits in a deep navy well with a cyan glow behind it, so it reads as a brand
   visual rather than a cropped photo. */
.about-photo--mark {
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: 44px;
  background:
    radial-gradient(72% 72% at 50% 44%, rgba(0, 194, 209, 0.16), rgba(0, 194, 209, 0) 70%),
    var(--bg-sunken);
  border-color: var(--border-strong);
}
.about-photo--mark img {
  width: 74%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: none;
}

/* Consistent, visible cyan focus ring sitewide (a11y + polish). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.svc-row:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* HUD corner ticks on the dark "readout" panels. This is what ties the grid
   background to the foreground: the dark panels read as framed console
   readouts on the grid, so the retro treatment feels like a system rather
   than a one-off background trick. Light content cards stay clean. */
.transform, .svc-panel, .bookcall, .io-card--dark, .svc-card--cta { position: relative; }
.transform::after, .svc-panel::after, .bookcall::after,
.io-card--dark::after, .svc-card--cta::after {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  opacity: 0.4;
  background:
    linear-gradient(var(--accent), var(--accent)) top left     / 11px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left     / 1px 11px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right    / 11px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right    / 1px 11px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left  / 11px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left  / 1px 11px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 11px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 1px 11px no-repeat;
}

/* The hero console card is the "main screen": a faint CRT scanline carries the
   background's terminal texture onto the focal panel. */
.transform::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: repeating-linear-gradient(to bottom, rgba(216, 234, 240, 0.028) 0 1px, transparent 1px 4px);
}