/* ============================================================
   Digital Engineers Guild — Main Stylesheet
   Palette: dark green-black bg, sage green + steel blue accents
   ============================================================ */

:root {
  --bg:           #0d1510;
  --bg-2:         #121c14;
  --bg-3:         #172019;
  --surface:      #1e2e21;
  --surface-2:    #263828;
  --border:       #3a5640;
  --border-light: #4a6e50;

  --green:        #5ec490;
  --green-light:  #80e0b0;
  --green-dim:    #2a5c45;
  --blue:         #5aaed8;
  --blue-light:   #7acef0;
  --blue-dim:     #1e5270;

  --text:         #f0f8f0;
  --text-muted:   #a8ccac;
  --text-dim:     #6e9474;
  --white:        #f0f5f1;

  --radius:       8px;
  --radius-lg:    14px;
  --radius-xl:    20px;

  --font-body:    'Inter', system-ui, sans-serif;
  --font-head:    'Sora', system-ui, sans-serif;

  --nav-h:        84px;
  --max-w:        1140px;
  --section-pad:  96px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* The header is fixed, so an anchor jump would otherwise land with the section's
   top tucked underneath it. Applies to every in-page target — this also fixes
   the footer's existing services.php#... links, which had the same problem. */
:target, section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--green-light); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--green); }

/* ── Utilities ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* Visible to screen readers and to the document outline, not to the eye. Used
   where a heading's visible form lives inside an SVG (see viz_complexity). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.section { padding: var(--section-pad) 0; }
.section--alt { background: var(--bg-2); }
.section--dark { background: var(--bg-3); }

.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(74, 158, 120, 0.12);
  border: 1px solid rgba(74, 158, 120, 0.25);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 16px;
}

.section-sub {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 580px;
  line-height: 1.7;
}

.section-header { margin-bottom: 56px; }
.section-header--center { text-align: center; }
.section-header--center .section-sub { margin: 0 auto; }

.text-green  { color: var(--green-light); }
.text-blue   { color: var(--blue-light); }
.text-muted  { color: var(--text-muted); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background: linear-gradient(135deg, var(--green) 0%, #3a9e85 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(74, 158, 120, 0.3);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green) 100%);
  color: #fff;
  box-shadow: 0 6px 28px rgba(74, 158, 120, 0.45);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-light);
}
.btn--outline:hover {
  border-color: var(--green);
  color: var(--green-light);
  background: rgba(74, 158, 120, 0.06);
}

.btn--blue {
  background: linear-gradient(135deg, var(--blue) 0%, #2a7fa8 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(58, 140, 181, 0.3);
}
.btn--blue:hover {
  color: #fff;
  box-shadow: 0 6px 28px rgba(58, 140, 181, 0.45);
  transform: translateY(-1px);
}

.btn--sm { padding: 9px 20px; font-size: 14px; }
.btn--lg { padding: 16px 36px; font-size: 16px; }

/* ── Navigation ─────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(8, 12, 10, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s, box-shadow 0.3s;
}

.site-header.scrolled {
  background: rgba(8, 12, 10, 0.97);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}

.logo-img {
  height: 54px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(74, 158, 120, 0.25));
}

.logo-text {
  font-size: 15px;
  line-height: 1.25;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.logo-text strong {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--white);
  letter-spacing: -0.01em;
}

.logo--footer .logo-text strong { font-size: 14px; }
.logo--footer .logo-text { font-size: 13px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius);
  transition: color 0.2s, background 0.2s;
  text-decoration: none;
}

.nav-link:hover, .nav-link.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.nav-link.nav-cta {
  margin-left: 8px;
  padding: 9px 20px;
  background: linear-gradient(135deg, var(--green) 0%, #3a9e85 100%);
  color: #fff !important;
  font-weight: 600;
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(74, 158, 120, 0.3);
}

.nav-link.nav-cta:hover {
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(74, 158, 120, 0.4);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  padding-bottom: 96px;
  position: relative;
  overflow: hidden;
  /* Blends the hero's own backdrop into the next section's --bg-2 so the two
     don't meet as a visible colour step. */
  background: linear-gradient(to bottom, transparent 62%, var(--bg-2) 100%);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(94, 196, 144, 0.28) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 70%, rgba(90, 174, 216, 0.20) 0%, transparent 70%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* The grid used to run to the hero's edge and stop dead, which read as a hard
   seam against the section below. Masking it out over the last ~45% dissolves
   it into the page instead. Both layers are masked, not just the grid — fading
   the lines while the glow stayed sharp would just move the seam. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(94, 196, 144, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 196, 144, 0.12) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, rgba(0,0,0,0.45) 74%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 42%, rgba(0,0,0,0.45) 74%, transparent 96%);
}

/* Two-column hero so a real graphic is above the fold, not a scroll away.
   Collapses to a single column at 980px (text first, then the visual). */
/* Grid AREAS, not just columns: the headline and the supporting copy are two
   separate cells stacked in the left column, with the visual spanning both on
   the right. That's what lets the single-column mobile order be
   headline → visual → copy — the value prop still leads, but a graphic lands
   above the fold instead of ~700px down. */
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  /* Copy sits in the LEFT column under the headline, not spanning full width:
     the hub graphic is tall enough to balance head+copy stacked beside it.
     (It spanned both columns while the shorter parallel diagram was here — if
     the hero graphic is ever swapped for a wide/short one, revisit this.) */
  grid-template-areas:
    "eyebrow ."
    "left    visual"
    "actions actions";
  column-gap: 48px;
  row-gap: 24px;
  align-content: center;
}

/* Its own row so the visual's span starts at the h1. justify-self keeps the
   pill hugging its text; its 24px bottom margin would double the row-gap. */
.hero-grid .hero-eyebrow { grid-area: eyebrow; justify-self: start; margin-bottom: 0; }

/* Spacing between the head/copy cells is the grid's row-gap now, so the h1's
   own bottom margin would double it. */
.hero-grid .hero-title { margin-bottom: 0; }

/* head + copy in ONE cell so the paragraph tucks under the headline instead of
   being pushed down by the taller graphic spanning two rows. */
.hero-left { grid-area: left; display: flex; flex-direction: column; gap: 26px; }
.hero-head { grid-area: auto; }
.hero-copy { grid-area: auto; }

/* The single-column hero sized its type against the full 1140px container. In
   the split layout that same clamp overflows a ~540px column: the h1 breaks to
   four lines and the two CTAs stack. Retune both against the column, not the
   page. */
/* Back to the larger size now that the tech clause is a chip rather than a
   demoted line inside the h1 — the headline is one short sentence again. */
.hero-grid .hero-title { font-size: clamp(34px, 4.2vw, 54px); }
.hero-grid .hero-sub { max-width: none; margin-bottom: 32px; }

/* Measured: the two CTAs need 595px side by side (370 + 209 + 16 gap) and the
   copy column is only ~507px at 1440. Rather than widen that column — which
   would cost the diagram ~17% of its width — the actions row spans BOTH grid
   columns, so there's room to sit side by side without touching the visual. */
/* Credential chip + both CTAs share this row. Measured intrinsic widths:
   chip 404 + primary 370 + outline 209 + 2x16 gap = 1014px for all three on one
   line; the buttons alone need 595px. Those two numbers drive the breakpoints
   below — don't nudge them by eye, re-measure if the labels change.
   align-items:flex-start keeps the shorter chip top-aligned with the taller
   buttons instead of floating in the middle of the row. */
.hero-grid .hero-actions { grid-area: actions; flex-direction: row; flex-wrap: wrap;
  align-items: flex-start; justify-content: center; max-width: none; gap: 16px; }
/* The chip's own 28px bottom margin dates from when it sat in the copy flow;
   here it would stack on top of the row gap. Let the flex gap own the spacing. */
/* Chips live in .hero-left now (they used to sit in the actions row).
   GRID with a single `max-content` track, not flex: the track sizes itself to
   the WIDER badge and both stretch to fill it, so they share one width without
   hardcoding a number that would break if either label is retyped.
   align-self keeps the group hugging that width instead of filling the column. */
.hero-chips {
  display: grid;
  grid-template-columns: max-content;
  gap: 10px;
  align-self: flex-start;
}
/* Base rule is `width: fit-content`, which would defeat the stretch.
   nowrap is a DELIBERATE exception to CLAUDE.md's "never nowrap in flex/grid"
   rule (owner-directed: these badges must stay on one line). The rule exists
   because nowrap normally overflows on narrow screens — so it is paired with
   font-size steps below that guarantee the longer badge fits at every width.
   If either label is retyped, re-measure: nowrap turns a too-long label into an
   overflow instead of a wrap. */
.hero-chips .cred-chip { width: auto; white-space: nowrap; }
.hero-grid .cred-chip { margin-bottom: 0; }

/* 761–1099: the three don't fit on one line (needs 1014px), but the buttons
   still do (595px) — so give the chip its own line above them.
   NOT `flex-basis:100%` on the chip: that stretches it into a full-width pill
   instead of leaving it hugging its text. This inserts a zero-height flex item
   as a line break instead, ordered to sit between the chip and the buttons —
   pseudo-elements are flex items and honour `order`, so it breaks the line
   regardless of its DOM position. */


.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.hero-visual {
  grid-area: visual;
  /* Top-aligned with the headline rather than centred against the whole
     head+copy span, so the diagram reads as a peer of the header text. */
  align-self: start;
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* The hero column is narrower than the wide diagram's natural cap, so let it
   fill the column. Scoped to --wide deliberately: as `.hero-visual .svg-wrap svg`
   it out-specified `.svg-wrap--tall svg`'s 420px cap, so the portrait diagram
   stretched to the full 620px container on tablets and rendered its 15px type
   at ~25px. */
.hero-visual .svg-wrap--wide svg { max-width: none; }

@media (max-width: 980px) {
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 72px; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "head" "chip" "visual" "copy" "actions";
    row-gap: 36px;
  }
  /* Single column now, so the headline's hard <br>s — which were tuned for the
     ~507px two-column slot — leave it wrapping early against a much wider
     container (at ~765px it used only the left third while the graphic below
     was centred). Drop them and let the text run the full width. */
  .hero-grid .hero-title br { display: none; }
  /* Badges centre in this band so they sit with the centred graphic rather than
     floating left of it. */
  .hero-chips { justify-self: center; }

  /* Dissolve the wrapper so head and copy become grid items again and the
     headline → visual → copy order still applies on one column. */
  .hero-left { display: contents; }
  .hero-head { grid-area: head; }
  .hero-copy { grid-area: copy; }
  /* display:contents makes the chip GROUP a grid item again, so it needs the area. */
  .hero-chips { grid-area: chip; }
  /* Single column: the eyebrow sits directly on the h1, so it keeps its own
     tight spacing rather than inheriting the 36px row-gap. */
  .hero-grid .hero-eyebrow { margin-bottom: -18px; }
  .hero-visual { max-width: 620px; margin: 0 auto; width: 100%; }
  .hero-grid .hero-actions { margin-top: 0; }
}

/* Below this even the two buttons no longer fit side by side (they need 595px),
   so chip and both CTAs stack full-width. */
@media (max-width: 760px) {
  .hero-grid { row-gap: 30px; }
  .hero-grid .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-grid .hero-actions .btn { justify-content: center; }
  /* .btn carries `white-space: nowrap`, so "Start with a free operations
     review →" (~400px incl. padding) blew past a 297px column at 360 and
     clipped at the viewport edge. CLAUDE.md's own mobile rule warns against
     nowrap inside flex/grid for exactly this. Let the CTAs wrap and tighten
     their padding instead of letting the label run off-screen. */
  .hero-grid .hero-actions .btn { white-space: normal; text-align: center;
    padding-left: 18px; padding-right: 18px; }
  /* Full width on a phone rather than max-content. */
  .hero-chips { grid-template-columns: minmax(0, 1fr); align-self: stretch; }
  .hero-grid .cred-chip { max-width: 100%; justify-content: center; text-align: center; }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--green);
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 24px;
}

.hero-title .accent { color: var(--green-light); }
.hero-title .accent-blue { color: var(--blue-light); }

.hero-sub {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 40px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-scroll {
  margin-top: 80px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-dim);
}

.hero-scroll::before {
  content: '';
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--border-light));
}

/* ── Stats / Proof strip ────────────────────────────────────── */
.proof-strip {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 40px 0;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  text-align: center;
}

.proof-item strong {
  display: block;
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 800;
  color: var(--green-light);
  line-height: 1;
  margin-bottom: 6px;
}

.proof-item span { font-size: 13px; color: var(--text-muted); }

/* ── Compare table ──────────────────────────────────────────── */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.compare-card {
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--border);
}

.compare-card--old {
  background: var(--surface);
  opacity: 0.75;
}

.compare-card--new {
  background: linear-gradient(145deg, rgba(74, 158, 120, 0.08) 0%, rgba(58, 140, 181, 0.06) 100%);
  border-color: rgba(74, 158, 120, 0.3);
  box-shadow: 0 0 40px rgba(74, 158, 120, 0.08);
}

.compare-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.compare-card--new .compare-label { color: var(--green); }

.compare-title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 24px;
}

.compare-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
}

.compare-list li::before {
  content: '✕';
  font-size: 12px;
  color: #c94a4a;
  flex-shrink: 0;
  margin-top: 2px;
}

.compare-card--new .compare-list li::before {
  content: '✓';
  color: var(--green-light);
}

/* ── Service cards ──────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--blue));
  opacity: 0;
  transition: opacity 0.3s;
}

.service-card:hover {
  border-color: rgba(74, 158, 120, 0.4);
  box-shadow: 0 8px 40px rgba(74, 158, 120, 0.1);
  transform: translateY(-3px);
}

.service-card:hover::before { opacity: 1; }

.service-icon {
  font-size: 28px;
  margin-bottom: 16px;
  display: block;
}

.service-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--green-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.service-card h3 {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.25;
}

.service-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 20px;
}

.service-declaration {
  font-size: 13px;
  color: var(--green);
  background: rgba(74, 158, 120, 0.08);
  border-left: 3px solid var(--green);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(58, 140, 181, 0.1);
  color: var(--blue-light);
  border: 1px solid rgba(58, 140, 181, 0.2);
}

.tag--blue {
  background: rgba(58, 140, 181, 0.1);
  color: var(--blue-light);
  border-color: rgba(58, 140, 181, 0.2);
}

/* ── Full service detail (services.php) ─────────────────────── */
.service-detail {
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}

.service-detail:last-of-type { border-bottom: none; }

.service-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.service-detail-inner.reverse { direction: rtl; }
.service-detail-inner.reverse > * { direction: ltr; }

.service-detail-content h2 {
  font-family: var(--font-head);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 16px;
}

.service-detail-content p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
}

.feature-list li::before {
  content: '→';
  color: var(--green);
  flex-shrink: 0;
  margin-top: 1px;
  font-weight: 700;
}

.service-visual {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sv-icon-row {
  display: flex;
  gap: 12px;
  font-size: 24px;
}

.sv-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sv-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.sv-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.sv-dot--blue { background: var(--blue); }

/* ── Pricing ────────────────────────────────────────────────── */
/* ── New single-price layout ── */
.price-hero {
  display: flex;
  justify-content: center;
}

.price-hero-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 56px 64px;
  text-align: center;
  max-width: 540px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.price-hero-inner .starting-at {
  font-size: 13px;
  padding: 5px 14px;
  letter-spacing: 0.14em;
}

.price-hero-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.price-hero-amount .currency {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-muted);
  align-self: flex-start;
  margin-top: 10px;
}

.price-hero-amount .amount {
  font-family: var(--font-head);
  font-size: 80px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1;
}

.price-hero-amount .period {
  font-size: 18px;
  color: var(--text-dim);
  margin-left: 4px;
}

.price-hero-note {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 380px;
}

/* ── Quote factors ── */
.quote-factors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.quote-factor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
}

.qf-num {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.quote-factor h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}

.quote-factor p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Legacy (kept for any other pages) ── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  transition: box-shadow 0.3s;
}

.pricing-card--featured {
  background: linear-gradient(160deg, rgba(74, 158, 120, 0.1) 0%, rgba(58, 140, 181, 0.08) 100%);
  border-color: rgba(74, 158, 120, 0.4);
  box-shadow: 0 0 60px rgba(74, 158, 120, 0.12);
}

.pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--green), var(--blue));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 20px;
  white-space: nowrap;
}

.pricing-tier {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pricing-tier--green  { color: var(--green); }
.pricing-tier--blue   { color: var(--blue-light); }
.pricing-tier--purple { color: #8b7dca; }

.pricing-name {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
  line-height: 1.2;
}

.pricing-target {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 24px;
}

.pricing-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.pricing-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.starting-at {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(74, 158, 120, 0.12);
  border: 1px solid rgba(74, 158, 120, 0.3);
  border-radius: 4px;
  padding: 3px 8px;
  display: inline-block;
}

.pricing-price .amount {
  font-family: var(--font-head);
  font-size: 44px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}

.pricing-price .currency {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-muted);
  align-self: flex-start;
  margin-top: 8px;
}

.pricing-price .period {
  font-size: 14px;
  color: var(--text-dim);
  margin-left: 2px;
}

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 32px;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
}

.pricing-features li::before {
  content: '✓';
  color: var(--green-light);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 13px;
  margin-top: 1px;
}

.pricing-cta { display: block; width: 100%; text-align: center; }

.pricing-card--featured .pricing-cta {
  background: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
  box-shadow: 0 4px 24px rgba(74, 158, 120, 0.35);
}

/* Contract terms */
.contract-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.contract-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}

.contract-card h4 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}

.contract-card p { font-size: 13px; color: var(--text-muted); }
.contract-card .contract-perk {
  margin-top: 10px;
  font-size: 12px;
  color: var(--green);
  font-weight: 500;
}

/* ── SaaS callout ── */
.saas-callout {
  margin-top: 48px;
  background: rgba(74, 158, 120, 0.06);
  border: 1px solid rgba(74, 158, 120, 0.22);
  border-radius: 14px;
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.saas-callout-content h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}

.saas-callout-content p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 600px;
}

@media (max-width: 768px) {
  .saas-callout {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
  }
}

/* ── Vibe code declaration ── */
.vibe-declaration {
  margin-top: 48px;
  border: 1px solid rgba(74, 158, 120, 0.35);
  border-left: 4px solid var(--green);
  border-radius: 0 14px 14px 0;
  padding: 36px 40px;
  background: rgba(74, 158, 120, 0.05);
}

.vibe-declaration-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}

.vibe-declaration h3 {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.vibe-declaration p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 760px;
  margin: 0;
}

/* ── Who it's for ───────────────────────────────────────────── */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.client-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color 0.2s, transform 0.2s;
}

.client-card:hover {
  border-color: rgba(58, 140, 181, 0.4);
  transform: translateY(-2px);
}

.client-icon { font-size: 26px; margin-bottom: 12px; display: block; }

.client-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}

.client-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* ── Introspective Questions ─────────────────────────────────── */
.questions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.question-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}

.question-card:hover {
  border-color: rgba(58, 140, 181, 0.4);
  transform: translateY(-2px);
}

.question-mark {
  font-size: 48px;
  line-height: 1;
  color: var(--accent);
  font-family: Georgia, serif;
  margin-bottom: 8px;
  opacity: 0.5;
}

.question-card p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  font-style: italic;
}

/* ── Process / How it works ─────────────────────────────────── */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  counter-reset: step;
}

.process-step {
  position: relative;
  padding-top: 24px;
}

.process-step::before {
  counter-increment: step;
  content: '0' counter(step);
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--green-dim);
  margin-bottom: 12px;
  display: block;
}

.process-step h3 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}

.process-step p { font-size: 14px; color: var(--text-muted); line-height: 1.65; }

.step-line {
  position: absolute;
  top: 38px;
  right: -16px;
  width: 32px;
  height: 1px;
  background: linear-gradient(to right, var(--border-light), transparent);
}

.process-step:last-child .step-line { display: none; }

/* ── CTA band ────────────────────────────────────────────────── */
.cta-band {
  background: linear-gradient(135deg,
    rgba(74, 158, 120, 0.12) 0%,
    rgba(58, 140, 181, 0.10) 100%);
  border-top: 1px solid rgba(74, 158, 120, 0.2);
  border-bottom: 1px solid rgba(74, 158, 120, 0.2);
  padding: 80px 0;
  text-align: center;
}

.cta-band h2 {
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.15;
}

.cta-band p {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 500px;
  margin: 0 auto 36px;
  line-height: 1.65;
}

.cta-band-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Contact form ───────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}

.contact-info h3 {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 14px;
}

.contact-info p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-detail-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--text-muted);
}

.contact-detail-icon {
  width: 38px; height: 38px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  gap: 12px;
}

.form-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(74, 158, 120, 0.15);
  border: 2px solid var(--green);
  color: var(--green);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.form-success h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
}

.form-success p {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 340px;
  line-height: 1.6;
}

.form-errors {
  background: rgba(200, 60, 60, 0.08);
  border: 1px solid rgba(200, 60, 60, 0.3);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 24px;
}

.form-errors p {
  font-size: 13px;
  color: #e07070;
  margin: 0;
  line-height: 1.6;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text);
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(74, 158, 120, 0.15);
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-dim); }
.form-group select option { background: var(--bg-2); }
.form-group textarea { resize: vertical; min-height: 120px; }

.form-submit { width: 100%; justify-content: center; margin-top: 8px; }

/* ── Page hero (inner pages) ────────────────────────────────── */
.page-hero {
  padding: calc(var(--nav-h) + 60px) 0 60px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

/* Optional split variant. The plain .page-hero left the right half of the
   viewport empty and pushed all real content below the fold; opting a page in
   puts a relevant graphic in that space. Pages without a visual keep the
   original single-column markup untouched. */
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 48px;
  align-items: center;
}
.page-hero--split .section-sub { max-width: none; }

@media (max-width: 860px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* Capability grid — services page header */
.capgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cap-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 10px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.cap-ic { display: inline-flex; color: var(--green); }
.cap-ic .icon { width: 26px; height: 26px; }
.cap-label { font-family: var(--font-head); font-size: 12.5px; font-weight: 600; color: var(--text-muted); line-height: 1.35; }

/* Tiles jump to their own section. They need to read as clickable without
   turning into six loud buttons competing with the page headline. */
.cap-tile--link { text-decoration: none; cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; }
.cap-tile--link:hover { border-color: rgba(94,196,144,0.45); background: var(--surface-2);
  transform: translateY(-2px); }
.cap-tile--link:hover .cap-label { color: var(--text); }
.cap-tile--link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cap-tile--link { transition: none; }
  .cap-tile--link:hover { transform: none; }
}

/* Quote path — pricing page header */
.qpath { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: qp; }
.qp-step {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.qp-step:last-child { border-color: rgba(94,196,144,0.35);
  background: linear-gradient(150deg, rgba(94,196,144,0.10), rgba(90,174,216,0.05)); }
.qp-ic { flex-shrink: 0; display: inline-flex; color: var(--green); margin-top: 2px; }
.qp-ic .icon { width: 22px; height: 22px; }
.qp-body { display: flex; flex-direction: column; gap: 3px; }
.qp-title { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--white); }
.qp-text { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }

@media (max-width: 420px) {
  .capgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 60px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand .footer-tagline {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-top: 16px;
  max-width: 300px;
}

.footer-nav h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.footer-nav ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.footer-nav a {
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a:hover { color: var(--green-light); }

.footer-contact h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.footer-contact p {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 16px;
  line-height: 1.5;
}

.footer-email {
  margin-top: 14px !important;
  font-size: 13px !important;
}

.footer-email a { color: var(--text-dim); }
.footer-email a:hover { color: var(--green-light); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-dim);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .service-detail-inner { grid-template-columns: 1fr; gap: 32px; }
  .service-detail-inner.reverse { direction: ltr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .quote-factors-grid { grid-template-columns: 1fr; }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
  .questions-grid { grid-template-columns: repeat(2, 1fr); }
  .price-hero-inner { padding: 40px 28px; }
  .price-hero-amount .amount { font-size: 60px; }
  .compare-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --section-pad: 64px; }

  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(8, 12, 10, 0.98);
    backdrop-filter: blur(16px);
    flex-direction: column;
    gap: 0;
    padding: 16px;
    border-bottom: 1px solid var(--border);
  }

  .nav-links.open { display: flex; }
  .nav-link { padding: 14px 16px; width: 100%; border-radius: var(--radius); }
  .nav-link.nav-cta { margin: 8px 0 0; }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero-actions { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 28px 20px; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band-actions { flex-direction: column; }
  .clients-grid { grid-template-columns: 1fr; }
  .questions-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   Visual system — SVG icon set + chart/diagram components (2026-07)
   Icons use currentColor; charts use the brand tokens. Good/cost pairs
   (green ✓ / amber ✕) are always icon+label, never color alone.
   ═══════════════════════════════════════════════════════════════════ */

:root { --amber: #cf9b52; }

/* Centered caption under a visual (migrated from why.php's old scoped style) */
.why-note { font-size: 13px; color: var(--text-dim); font-style: italic; max-width: 640px; margin: 24px auto 0; text-align: center; line-height: 1.7; }
.why-note strong { color: var(--text-muted); }

/* Closing note emitted by viz_parallel(), so it reads the same on why.php and
   the home hero. Matches .why-note's voice but is its own class — .why-note is
   general-purpose copy styling on why.php, not this component's. */
.pl-note { font-size: 13px; color: var(--text-dim); font-style: italic; max-width: 640px;
  margin: 22px auto 0; text-align: center; line-height: 1.7; }
.pl-note strong { color: var(--text-muted); }
/* In the hero the note sits in a ~530px column under an already-tall block, so
   it tightens up rather than running the full 640px measure. */
.hero-visual .pl-note { font-size: 12.5px; margin-top: 16px; max-width: none; }

/* ── Icon base ── */
.icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.2em; flex-shrink: 0; }
.icon--lg { width: 2em; height: 2em; }

/* SVG icons drop into the old emoji slots */
.service-icon { display: inline-flex; color: var(--green); margin-bottom: 16px; }
.service-icon .icon { width: 30px; height: 30px; }

/* Services detail page: icon + label on one centered row (was baseline-misaligned,
   making the icon appear to float above the pill). */
.service-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.service-eyebrow .service-icon { margin-bottom: 0; }
.service-eyebrow .section-label { margin-bottom: 0; }
.client-icon { display: inline-flex; color: var(--green); margin-bottom: 12px; }
.client-icon .icon { width: 28px; height: 28px; }

/* Contact page emoji → SVG slots */
.contact-detail-icon { display: inline-flex; color: var(--green); }
.contact-detail-icon .icon { width: 20px; height: 20px; }
.form-success-icon { color: var(--green); }
.form-success-icon .icon { width: 44px; height: 44px; }

/* Small credential chip (hero) — block-level on its own line so vertical margins
   behave; fit-content keeps the pill tight to its text. */
.cred-chip { display: flex; width: fit-content; align-items: center; gap: 8px;
  margin: 0 0 28px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); font-size: 13px; color: var(--text-muted); }
.cred-chip .icon { width: 16px; height: 16px; color: var(--green); }

/* Chip strip (replaces 6-card "who we work with") */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 820px; margin: 8px auto 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 14px; color: var(--text-muted); }
.chip .icon { width: 17px; height: 17px; color: var(--green); }

/* Responsive SVG wrapper */
.svg-wrap { width: 100%; overflow-x: auto; }
.svg-wrap svg { width: 100%; height: auto; max-width: 800px; margin: 0 auto; display: block; }

/* ── Dynamics: one hire vs one practice ── */
.dynamics { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 920px; margin: 0 auto; }
.dyn-col { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; background: var(--surface); }
.dyn-col--practice { background: linear-gradient(150deg, rgba(94,196,144,0.10), rgba(90,174,216,0.05));
  border-color: rgba(94,196,144,0.35); box-shadow: 0 0 44px rgba(94,196,144,0.08); }
.dyn-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.dyn-col--practice .dyn-head { border-color: rgba(94,196,144,0.25); }
.dyn-head-ic { display: inline-flex; color: var(--text-dim); }
.dyn-head-ic .icon { width: 34px; height: 34px; }
.dyn-col--practice .dyn-head-ic { color: var(--green); }
.dyn-head-label { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--white); }
.dyn-head-sub { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-top: 2px; }
.dyn-list { list-style: none; margin: 0; padding: 0; }
.dyn-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--border); font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.dyn-col--practice .dyn-row { border-color: rgba(94,196,144,0.18); }
.dyn-row:first-child { border-top: none; }
.dyn-mark { flex-shrink: 0; display: inline-flex; }
.dyn-mark .icon { width: 18px; height: 18px; }
.dyn-mark--bad { color: var(--amber); }
.dyn-mark--good { color: var(--green-light); }
.dyn-ic { display: inline-flex; color: var(--text-dim); }
.dyn-ic .icon { width: 18px; height: 18px; }
.dyn-text strong { color: var(--text); font-weight: 700; }

/* ── Parallel-streams SVG diagram ──────────────────────────────────────────
   ONE styling, shared by the home hero and why.php. There is no hero variant:
   the two pages render the same markup at different widths, so the type scales
   with the diagram and stays proportional in both. */
.parallel .pl-stream { fill: none; stroke: var(--green); stroke-width: 2.4; opacity: 0.85;
  stroke-dasharray: 7 11; animation: pl-flow 2.6s linear infinite; }
.parallel .pl-node circle { fill: var(--surface); stroke: var(--border-light); stroke-width: 2; }
/* Opaque green-tinted fill (surface + ~10% green, pre-blended) so the converging
   stream lines are hidden behind the circle instead of showing through — matches
   how the opaque left node already hides them. */
.parallel .pl-node--out circle { stroke: var(--green); fill: #243d2c; }
.parallel .pl-node-t { fill: var(--text-muted); font-family: var(--font-head); font-size: 17px; font-weight: 600; text-anchor: middle; }
.parallel .pl-node-t--out { fill: var(--green-light); }
.parallel .pl-pill rect { fill: #22331f; stroke: var(--border-light); stroke-width: 1; }
.parallel .pl-pill text { fill: var(--text); font-family: var(--font-body); font-size: 17px; }
.parallel .pl-dot { fill: var(--green); }

/* A slow dash flowing along each stream, staggered so it reads as work moving
   through rather than a synchronized blink. Motion is the point of putting this
   above the fold — it's the one thing a static block of copy can't do.
   Paths are emitted in pairs (into the pill, out of it), so every two paths
   share one delay: the pair has to move as a single stream. */
.parallel .pl-stream:nth-child(1),
.parallel .pl-stream:nth-child(2) { animation-delay: 0s; }
.parallel .pl-stream:nth-child(3),
.parallel .pl-stream:nth-child(4) { animation-delay: -0.65s; }
.parallel .pl-stream:nth-child(5),
.parallel .pl-stream:nth-child(6) { animation-delay: -1.3s; }
.parallel .pl-stream:nth-child(7),
.parallel .pl-stream:nth-child(8) { animation-delay: -1.95s; }

@keyframes pl-flow { to { stroke-dashoffset: -18; } }

@media (prefers-reduced-motion: reduce) {
  .parallel .pl-stream { animation: none; stroke-dasharray: none; }
}

/* ── Practice hub: the HOME hero graphic (since 2026-07-20) ─────────────────
   "One retained partner" — your business ringed by the six capability areas.
   Shares the viz_parallel visual language (green = DEG, dashed = flow, same
   node fills) so the home and why pages read as one system. */
.pr-stage {
  fill: var(--text-dim); font-family: var(--font-head); font-size: 15px;
  font-weight: 700; letter-spacing: 0.12em; text-anchor: middle;
}
.pr-ring {
  fill: none; stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 4 7;
  opacity: 0.7;
}
.pr-spoke {
  stroke: var(--green); stroke-width: 2; opacity: 0.55; stroke-dasharray: 6 8;
  animation: pl-flow 3.2s linear infinite;
}
.pr-core { fill: #22412f; stroke: var(--green); stroke-width: 2.5; }
.pr-core-t {
  fill: var(--green-light); font-family: var(--font-head); font-size: 21px;
  font-weight: 800; text-anchor: middle;
}
.pr-core-s { fill: var(--text-muted); font-size: 15px; text-anchor: middle; }
/* `color` drives the nested icon(), whose stroke is currentColor. */
.pr-cap { color: var(--green); }
.pr-cap circle {
  fill: var(--surface-2); stroke: var(--border-light); stroke-width: 1.6;
}
.pr-cap-l {
  fill: var(--text-muted); font-family: var(--font-head); font-size: 14.5px;
  font-weight: 600; text-anchor: middle;
}
.pr-cap-note {
  fill: var(--text-dim); font-family: var(--font-body); font-size: 14px;
  font-style: italic; text-anchor: middle;
}
/* The cost clause carries the pitch, so it gets the emphasis. Consistent with
   why.php ("costs many times more") and pricing.php ("a fraction of the team"). */
.pr-cap-note--em { fill: var(--green-light); font-style: normal; font-weight: 600; }

/* Portrait counterpart — spine + taps, same idiom as .parallel--tall. */
.pr-spine {
  fill: none; stroke: var(--green); stroke-width: 2.2; opacity: 0.7;
  stroke-dasharray: 6 8; animation: pl-flow 2.8s linear infinite;
}
.pr-pill { color: var(--green); }
.pr-pill rect { fill: #22331f; stroke: var(--border-light); stroke-width: 1.2; }
.pr-pill text { fill: var(--text); font-family: var(--font-body); font-size: 15px; }

/* This graphic NEVER swaps to a stacked layout (owner-directed 2026-07-20) —
   it scales. Two things scale together, which is the part that matters: the
   TYPE goes up as the box goes down, AND the core circle's `r` grows with it
   (r is a settable CSS property). Scaling type alone burst "you own it all"
   out through the circle's edge.

   ⚠️ Render scale is NOT monotonic with viewport. At <=980px the hero collapses
   to one column and the graphic gets up to 620px again, so scale jumps back to
   ~1.03 and needs NO bump. Measured: 1440->0.90, 1024->0.78, 900->1.03,
   760->1.03, 560->0.85, 460->0.69, 390->0.57, 360->0.52. The two pinch points
   are therefore 981-1200 and below ~600 — bumping the middle would oversize it.
   Sizes come from a measuring harness (effective px + text-vs-chord fit), not
   from eye. Rebuild it if the viewBox, labels, or geometry change.
   "you own it all" (.pr-core-s) is a required selling point: it must stay
   present, inside the circle, and legible at every width. */
@media (min-width: 981px) and (max-width: 1200px) {
  .pr-stage    { font-size: 17px; }
  .pr-cap-l    { font-size: 17px; }
  .pr-cap-note { font-size: 16px; }
  .pr-core-t   { font-size: 24px; }
  .pr-core-s   { font-size: 17px; }
}
@media (max-width: 600px) {
  .pr-stage    { font-size: 17px; }
  .pr-cap-l    { font-size: 17px; }
  .pr-cap-note { font-size: 15.5px; }
  .pr-core-t   { font-size: 24px; }
  .pr-core-s   { font-size: 17px; }
}
@media (max-width: 500px) {
  .pr-stage    { font-size: 20px; }
  .pr-cap-l    { font-size: 20px; }
  .pr-cap-note { font-size: 18px; }
  .pr-core-t   { font-size: 28px; }
  .pr-core-s   { font-size: 20px; }
  .pr-core     { r: 90px; }
}
@media (max-width: 410px) {
  .pr-stage    { font-size: 23px; }
  .pr-cap-l    { font-size: 23px; }
  .pr-cap-note { font-size: 20.5px; }
  .pr-core-t   { font-size: 32px; }
  .pr-core-s   { font-size: 23px; }
  .pr-core     { r: 96px; }
}
/* iPhone SE class (~360). r=100 still clears the chips: their inner edge is
   ry-34 = 112. */
@media (max-width: 380px) {
  .pr-stage    { font-size: 25px; }
  .pr-cap-l    { font-size: 25px; }
  .pr-cap-note { font-size: 22px; }
  .pr-core-t   { font-size: 34px; }
  .pr-core-s   { font-size: 25px; }
  .pr-core     { r: 100px; }
}

/* nowrap badges cannot wrap out of trouble, so the type has to shrink to keep
   the longer one on one line. Measured overflow at 13px: none down to ~460px,
   2px at 430, 22px at 390. Each step below was verified by comparing the chip's
   scrollWidth (what nowrap text needs) against its clientWidth (the box it got).
   Padding and icon shrink too — they're ~52px of fixed cost on a ~310px box. */
@media (max-width: 460px) {
  .hero-chips .cred-chip { font-size: 12px; padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 400px) {
  .hero-chips .cred-chip { font-size: 10.5px; padding-left: 9px; padding-right: 9px; gap: 6px; }
  .hero-chips .cred-chip .icon { width: 14px; height: 14px; }
}
/* Floor for very old/narrow devices (~320px, iPhone SE 1st gen class). At 10px
   the 52-character label still overflowed — the icon was pushed outside the
   pill. This is the practical limit of "one line, no wrap" for a label this
   long: 9px is small. If it needs to go smaller, SHORTEN THE TEXT rather than
   shrink further. */
@media (max-width: 350px) {
  .hero-chips .cred-chip { font-size: 9px; padding-left: 7px; padding-right: 7px; gap: 5px; }
  .hero-chips .cred-chip .icon { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-spoke, .pr-spine { animation: none; stroke-dasharray: none; }
}

/* Landscape / portrait swap. viz_parallel() emits BOTH drawings, so every page
   that uses it (home hero, why.php) gets the wide one above 760px and the tall
   one below — same component, re-laid-out rather than shrunk. display:none
   keeps the hidden half out of the accessibility tree, so the shared aria-label
   is never announced twice.
   The portrait viewBox is 360 wide so it renders near 1:1 on a phone and its
   type stays legible; don't cap it far above that or the labels shrink again. */
.svg-wrap--tall { display: none; }
.svg-wrap--tall svg { max-width: 420px; }
.parallel--tall .pl-node-t,
.parallel--tall .pl-pill text { font-size: 15px; }

@media (max-width: 760px) {
  .svg-wrap--wide { display: none; }
  .svg-wrap--tall { display: block; }
}

/* ── Complexity → clarity: the home "where businesses get stuck" graphic ─────
   Shares the viz_parallel/viz_practice visual language — green = DEG, dashed =
   flow, same pill and surface fills — but this one carries its own HEADLINE as
   SVG <text>, because the whole section is now just this drawing (the prose
   header and the two before/after panels were merged into it, 2026-07-20).
   That is the reason for the cx-title / cx-eyebrow rules below: they are doing
   the job .section-title / .section-label do everywhere else on the site.

   The type scale is deliberately a STEP DOWN from those: 26px against a ~40px
   .section-title. A first pass matched them and the owner called the result too
   large — a diagram that also has to hold six pills, a funnel and two captions
   reads as bloated at heading size. The 900px cap works with it (the section's
   container is 1140): together they render the headline at ~29px. Raising
   either one undoes the other. */
.svg-wrap--cx svg { max-width: 900px; }

/* The eyebrow is a BADGE, matching .section-label on every other section of the
   page — same type spec and the same fill/border values, restated here because
   SVG can't inherit a CSS box. Keep these two in step. */
.cx-badge rect { fill: rgba(74,158,120,0.12); stroke: rgba(74,158,120,0.25); stroke-width: 1; }
.cx-badge text { fill: var(--green); font-family: var(--font-body); font-size: 11px;
  font-weight: 600; letter-spacing: 0.12em; text-anchor: middle; }
.cx-title { fill: var(--white); font-family: var(--font-head); font-size: 26px;
  font-weight: 800; letter-spacing: -0.01em; text-anchor: middle; }
.cx-title--em { fill: var(--green); }

/* The tangle. Amber (not green) because these are the frictions, and it's the
   same good/bad pairing viz_dynamics uses — always with a text label alongside,
   never colour alone (that pair sits in the CVD 6–8 band). */
/* Opacity 0.5, not the 0.34 this started at: at a third the wires were legible
   as individual strokes but the TANGLE didn't register — and the two corkscrews
   read as smudges. The tangle is the argument, so it has to be visible; amber at
   half opacity is still clearly subordinate to the green outcome band. */
.cx-wire { fill: none; stroke: var(--amber); stroke-width: 1.5; opacity: 0.5;
  stroke-dasharray: 5 7; }
.cx-pill rect { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.cx-pill text { fill: var(--text-muted); font-family: var(--font-body); font-size: 14px; }
.cx-pill-dot { fill: var(--amber); opacity: 0.75; }
/* Casing for the trefoil knot's over/under weave: a fat stroke in the PAGE
   BACKGROUND colour, painted under the top strand at each crossing so it erases
   the strand beneath. Must stay in step with whatever the section sits on — on a
   .section--alt this would draw three grey dashes across the knot. */
.cx-knot-casing { fill: none; stroke: var(--bg); stroke-width: 5.5; stroke-linecap: round; }

/* Band 2 — everything above is pulled through one practice.
   The funnel is line work, not a filled shape: a gradient-filled trapezoid read
   as a grey slab laid over the section however soft the gradient got. Seven (or
   five, on portrait) dashed strands say "convergence" with nothing but stroke,
   and they can animate, which a fill can't. Same vocabulary as .pl-stream. */
.cx-strand { fill: none; stroke: var(--green); stroke-width: 1.5; opacity: 0.38;
  stroke-dasharray: 5 8; animation: cx-flow 2.4s linear infinite; }
/* Staggered symmetrically about the centre strand, so the flow reads as material
   drawn inward rather than one synchronised blink. Falls through harmlessly if
   the strand count ever changes — extra strands just share the last delay. */
.cx-funnel .cx-strand:nth-child(1),
.cx-funnel .cx-strand:nth-child(7) { animation-delay: 0s; }
.cx-funnel .cx-strand:nth-child(2),
.cx-funnel .cx-strand:nth-child(6) { animation-delay: -0.4s; }
.cx-funnel .cx-strand:nth-child(3),
.cx-funnel .cx-strand:nth-child(5) { animation-delay: -0.8s; }
.cx-funnel .cx-strand:nth-child(4) { animation-delay: -1.2s; }
.cx-deg rect { fill: #22412f; stroke: var(--green); stroke-width: 1.8; }
.cx-deg-t { fill: var(--green-light); font-family: var(--font-head); font-size: 13px;
  font-weight: 800; letter-spacing: 0.05em; text-anchor: middle; }
.cx-deg-s { fill: var(--text-dim); font-family: var(--font-body); font-size: 11px; text-anchor: middle; }
.cx-flow { fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 5 5;
  animation: cx-flow 1.8s linear infinite; }
.cx-arrow { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cx-flow { to { stroke-dashoffset: -20; } }

/* Band 3 — what comes out. */
.cx-result rect { fill: rgba(94,196,144,0.10); stroke: rgba(94,196,144,0.45); stroke-width: 1.5; }
.cx-result-t { fill: var(--white); font-family: var(--font-head); font-size: 18px;
  font-weight: 800; text-anchor: middle; }
.cx-result-s { fill: var(--green-light); font-family: var(--font-body); font-size: 11px;
  text-anchor: middle; opacity: 0.85; }
/* Italic + a green tick, both straight from mockup A — the caption is an aside
   to the drawing, not a fourth band, and the italic is what says so. */
.cx-note { fill: var(--text-dim); font-family: var(--font-body); font-size: 12px;
  font-style: italic; text-anchor: middle; }
.cx-note-c { fill: var(--green); font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  .cx-flow, .cx-strand { animation: none; stroke-dasharray: none; }
}

/* Landscape / portrait swap — same rule and same 760px breakpoint as
   viz_parallel's (see the note above .svg-wrap--tall). The portrait viewBox is
   360 wide so it renders near 1:1 on a phone; the max-width cap keeps it there.
   Only the type that would OVERFLOW 360 units is re-specified — the pill labels
   are 14px in both drawings, because 1:1 authoring is the whole point. */
.svg-wrap--cx-tall { display: none; }
.svg-wrap--cx-tall svg { max-width: 380px; }
.cx--tall .cx-badge text { font-size: 10px; }
.cx--tall .cx-title    { font-size: 19px; }
/* One point down from the landscape 14px. That is not a legibility compromise —
   it is where the portrait tangle's margins and gutters come from; see the width
   table in viz_complexity_portrait(). */
.cx--tall .cx-pill text  { font-size: 13px; }
.cx--tall .cx-result-t { font-size: 16px; }
.cx--tall .cx-result-s { font-size: 10px; }
.cx--tall .cx-note     { font-size: 11px; }

@media (max-width: 760px) {
  .svg-wrap--cx      { display: none; }
  .svg-wrap--cx-tall { display: block; }
}

/* ── Before / After ── */
.beforeafter { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; max-width: 960px; margin: 0 auto; }
.ba-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; background: var(--surface); }
.ba-panel--after { background: linear-gradient(150deg, rgba(94,196,144,0.10), rgba(90,174,216,0.05)); border-color: rgba(94,196,144,0.35); }
.ba-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; }
.ba-panel--after .ba-label { color: var(--green); }
.ba-panel ul { list-style: none; margin: 0; padding: 0; }
.ba-panel li { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.ba-panel li strong { color: var(--text); font-weight: 700; }
.ba-mark { flex-shrink: 0; display: inline-flex; }
.ba-mark .icon { width: 17px; height: 17px; }
.ba-mark--bad { color: var(--amber); }
.ba-mark--good { color: var(--green-light); }
.ba-arrow { display: inline-flex; color: var(--green); }
.ba-arrow .icon { width: 30px; height: 30px; }

/* ── Process stepper ── */
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; counter-reset: step; }
.step { position: relative; text-align: center; padding: 0 6px; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 27px; left: calc(50% + 34px); right: calc(-50% + 34px); height: 2px;
  background: linear-gradient(90deg, var(--green-dim), var(--border)); }
.step-ic { position: relative; z-index: 1; width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border-light); color: var(--green); }
.step-ic .icon { width: 24px; height: 24px; }
.step-num { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--green); color: var(--bg); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); }
.step h3 { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.step p { font-size: 13px; color: var(--text-muted); line-height: 1.55; }

@media (max-width: 760px) {
  .dynamics { grid-template-columns: 1fr; }
  .beforeafter { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); margin: -6px auto; }
  .stepper { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .step:not(:last-child)::after { display: none; }
}