/* ==========================================================================
   AXELERANT PROPOSAL DECK — design-system v1.2.0
   -------------------------------------------------------------------------
   Built from the live axelerant.com design system, NOT adapted from the
   Spark/Promet template. Sharp corners, Fraunces serif, JetBrains Mono
   eyebrows, paper surface, dossier aesthetic.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;1,9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand colors (from axelerant.com/design-system v1.2.0) */
  --ax-orange: #F25A02;       /* Tangerine — brand fill */
  --ax-orange-deep: #C24700;  /* deep orange — gradient stop */
  --ax-orange-mid: #FFA342;   /* mid orange — gradient stop */
  --ax-orange-light: #FFDCB6;
  --ax-orange-tint: #FFF1E5;  /* light tint */
  --ax-yellow: #F9C902;       /* Tuscan Sun — Design lens */
  --ax-yellow-mid: #FFE066;
  --ax-yellow-light: #FFF4B8;
  --ax-onyx: #161616;         /* dark anchor */
  --ink: #1B1A17;             /* warm charcoal — body ink */
  --ink-soft: #57534B;        /* secondary text */
  --ax-slate: #49535E;        /* meta/caption */
  --ax-grey: #9CA3AF;         /* disabled/hint — fills only, not text */
  --ax-grey-text: #6B6B6B;    /* slide-num on light surfaces (AA on #FAFAF9) */
  --ax-grey-light: #E5E5E5;   /* borders */
  --paper: #FAFAF9;           /* default surface */
  --paper-dim: #F1F1EF;       /* alternating band */
  --surface-elevated: #FFFFFF;/* elevated cards */
  --rule: rgba(27, 26, 23, 0.14); /* section rules */
  --border: rgba(27, 26, 23, 0.15); /* stronger borders */

  /* System accent (interactive) */
  --sys-accent: #EA580C;      /* buttons, links */
  --sys-accent-hover: #C2410C;
  --sys-accent-active: #9A3412;
  --ax-orange-text: #C24700;  /* --ax-orange-deep — orange as TEXT on light/white (AA 5:1) */

  /* Lens accents */
  --lens-strategy: #4E0B5B;   /* Deep Plum */
  --lens-engineering: #F25A02;/* Tangerine */
  --lens-design: #F9C902;     /* Tuscan Sun */
  --lens-grow: #1E40AF;       /* Cobalt */

  /* Brand gradient */
  --brand-gradient: linear-gradient(90deg, #F25A02 0%, #FFA342 22%, #F9C902 50%, #C24700 78%, #161616 100%);
  --brand-gradient-vertical: linear-gradient(180deg, #F25A02 0%, #FFA342 22%, #F9C902 50%, #C24700 78%, #161616 100%);

  /* Typography */
  --font-display: "Fraunces", "Source Serif Pro", Georgia, serif;
  --font-sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (desktop) */
  --t-display: 64px;
  --t-h1: 48px;
  --t-h2: 36px;
  --t-h3: 26px;
  --t-h4: 20px;
  --t-h5: 17px;
  --t-subtitle: 18px;
  --t-body: 16px;
  --t-small: 14px;
  --t-caption: 13px;
  --t-eyebrow: 12px;
  --t-chip: 11px;

  /* Radius — sharp dossier aesthetic */
  --radius: 0.25rem;
  --btn-radius: 0px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05);
  --shadow-deep: 0 1px 2px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.1);
  --shadow-press: 4px 4px 0 0 rgba(7,17,17,0.06);
  --shadow-glow: 0 1px 2px rgba(242,90,2,0.3), 0 12px 28px rgba(242,90,2,0.22);
  --sharp-shadow: 8px 8px 0 0 var(--sys-accent);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
}

@page {
  size: 13.333in 7.5in;
  margin: 0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   SLIDE BASE
   ========================================================================== */

.deck { width: 100%; }

.slide {
  position: relative;
  width: 13.333in;
  height: 7.5in;
  padding: 0.6in 0.75in;
  overflow: hidden;
  break-after: page;
  page-break-after: always;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

/* Dark slides (Onyx background) */
.slide.dark {
  background: var(--ax-onyx);
  color: #F2F2F2;
}
.slide.dark .eyebrow { color: rgba(244,241,234,0.66); }
.slide.dark h1, .slide.dark h2, .slide.dark h3 { color: #F4F1EA; }
.slide.dark .slide-num { color: rgba(255,255,255,0.5); }
.slide.dark .rule { background: rgba(255,255,255,0.12); }
.slide.dark .ink-soft { color: rgba(244,241,234,0.66); }

/* Cards on a dark slide. .card-title / .card-body hardcode --ink / --ink-soft
 * for WHITE cards; used inside .card-dark they render ~1.1:1 and ~2.1:1 —
 * invisible. The template's own dark slides only put .stat blocks in
 * .card-dark, so this stayed latent until a derived deck used the pair
 * (fairmont-2026, caught by audit-deck-contrast). */
.slide.dark .card-title { color: #F4F1EA; }
.slide.dark .card-body { color: rgba(244,241,234,0.74); }

/* Paper-dim slides (muted band) */
.slide.dim {
  background: var(--paper-dim);
}

/* Brand gradient slides (cover, closing) */
.slide.gradient {
  background: var(--brand-gradient);
  color: #fff;
}
.slide.gradient .eyebrow { color: rgba(255,255,255,0.8); }
.slide.gradient h1 { color: #fff; }

/* Cover slide — dark photo + overlay; default ink-soft eyebrow is invisible */
.slide.cover .eyebrow { color: rgba(255,255,255,0.85); }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 80, "SOFT" 50;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
  color: var(--ink);
}

h1 { font-size: var(--t-h1); line-height: 1.08; }
h2 { font-size: var(--t-h2); line-height: 1.12; }
h3 { font-size: var(--t-h3); line-height: 1.2; }
h4 { font-size: var(--t-h4); line-height: 1.25; }
h5 { font-size: var(--t-h5); line-height: 1.3; }

p { margin: 0; line-height: 1.6; color: var(--ink-soft); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  color: var(--ink-soft);
  margin: 0;
}

.lede {
  font-size: var(--t-subtitle);
  line-height: 1.55;
  color: var(--ink);
  max-width: 52ch;
}

.mono { font-family: var(--font-mono); }
.ink-soft { color: var(--ink-soft); }
.ink-slate { color: var(--ax-slate); }

/* Signature accent — Fraunces Italic in sys-accent */
.accent-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--ax-orange-text);
}

/* On the COVER this italic sits on the photo overlay, where --ax-orange-text
 * (#C24700, picked for AA on white) is exactly 3.0:1 against #252728 — the
 * large-text minimum, failing on the rounding boundary. The brand tangerine is
 * the right value on a dark surface: 4.46:1. */
.cover .accent-italic { color: var(--ax-orange); }

.t-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--sys-accent);
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.slide-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
}

.slide-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.slide-num {
  position: absolute;
  bottom: 0.35in;
  right: 0.55in;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ax-grey-text);
  letter-spacing: 0.5px;
}

.rule {
  height: 1px;
  background: var(--rule);
  border: none;
  margin: 0;
}

.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 0;
}

/* ==========================================================================
   GRID
   ========================================================================== */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--space-5); }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }

.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
  flex: 1;
}

.split-2-narrow {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-7);
  align-items: center;
  flex: 1;
}

.split-2-wide {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-7);
  align-items: center;
  flex: 1;
}

/* ==========================================================================
   CARDS — sharp dossier style (no rounded corners, thin borders)
   ========================================================================== */

/* Cards are WHITE CARDS, and must read as such.
   --surface-elevated is already #FFFFFF, but the page sits on a warm
   near-white, so a white fill with only a hairline border reads as a flat
   outlined box, not a card — the integrations grid looked like a wireframe.
   State the white explicitly and give it the lift that makes it a card. */
.card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card-dark {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: var(--space-5);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--ink);
}

.card-body {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-soft);
}

/*
 * Spec list — a card that is really a list of labelled facts.
 *
 * Slides 12 and 15 each carry two cards of 6-9 "Label: value" pairs. Run
 * together as one paragraph they are a wall: the labels are bold but the eye
 * has no row to land on, so a reader scanning for "Rollback" or "Backups" has
 * to read the whole block to find it. One row per fact, label first, and the
 * rule between rows does the separating that punctuation was failing to do.
 */
.spec-list {
  display: flex;
  flex-direction: column;
}

.spec {
  font-size: var(--t-caption);
  line-height: 1.45;
  color: var(--ink-soft);
  padding: 5px 0;
  border-top: 1px solid var(--border);
}

/*
 * Slide 12 carries the densest pair of these (9 facts against 6), and one row
 * per fact pushed it 78px past the canvas. On a .compact slide the rows tighten
 * rather than the copy getting cut — the migration and launch methodology is
 * answering RFP 3.3 and 3.10 point by point, so losing a point to save a line
 * would cost more than it saves.
 */
.slide.compact .spec {
  font-size: 12px;
  line-height: 1.38;
  padding: 3px 0;
}

.spec:first-child {
  border-top: 0;
  padding-top: 0;
}

.spec strong {
  color: var(--ink);
}

/* Lens dot — the Axelerant wayfinding marker */
.lens-dot {
  display: inline-block;
  width: 3px;
  height: 12px;
  margin-right: 8px;
  vertical-align: middle;
}
.lens-dot.strategy { background: var(--lens-strategy); }
.lens-dot.engineering { background: var(--lens-engineering); }
.lens-dot.design { background: var(--lens-design); }
.lens-dot.grow { background: var(--lens-grow); }

/* ==========================================================================
   STATS — big numerals, mono labels
   ========================================================================== */

.stat-row {
  display: flex;
  gap: var(--space-7);
  align-items: flex-start;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--ink);
}

.slide.dark .stat-num { color: #fff; }

.stat-label {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.7px;
  color: var(--ink-soft);
}

.slide.dark .stat-label { color: rgba(244,241,234,0.66); }

/* ==========================================================================
   BUTTONS (visual only in deck) — 0px radius, mono uppercase
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 0;
  text-decoration: none;
  border: none;
}

.btn-primary {
  background: var(--sys-accent);
  color: #fff;
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-dark .btn-secondary {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}

/* ==========================================================================
   CHIPS — pill, mono uppercase
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: var(--t-chip);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  border-radius: var(--radius-pill);
  background: var(--sys-accent-hover);
  color: #fff;
}

.chip-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}

.chip-index {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--border);
}

/* ==========================================================================
   COVER SLIDE
   ========================================================================== */

.slide.cover {
  padding: 0;
  background: var(--ax-onyx);
  color: #fff;
  display: flex;
  flex-direction: column;
}

.cover__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.25;
}

.cover__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,22,22,0.85) 0%, rgba(22,22,22,0.6) 50%, rgba(22,22,22,0.9) 100%);
}

.cover__content {
  position: relative;
  z-index: 2;
  padding: 0.8in 0.9in;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.cover__logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.cover__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 70%;
}

.cover__title {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}

.cover__lede {
  font-size: var(--t-subtitle);
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
  max-width: 60ch;
}

.cover__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.7px;
  color: rgba(255,255,255,0.6);
}

.cover__meta span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cover__meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ax-orange);
}

/* ==========================================================================
   LETTER SLIDE
   ========================================================================== */

.letter-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-7);
  flex: 1;
}

.letter-sidebar {
  border-right: 1px solid var(--rule);
  padding-right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.letter-sidebar .label {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.7px;
  color: var(--ink-soft);
}

.letter-sidebar .value {
  font-size: var(--t-small);
  color: var(--ink);
  line-height: 1.5;
}

.letter-body {
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--ink);
}

.letter-body p { margin-bottom: var(--space-4); color: var(--ink); }

.letter-sign {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.letter-sign .name {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--ink);
}

.letter-sign .role {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.7px;
  color: var(--ink-soft);
}

/* ==========================================================================
   PILOT SCREENSHOT
   ========================================================================== */

.pilot-shot {
  width: 100%;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  object-fit: cover;
  border-radius: var(--radius);
}

.pilot-shot-large {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.browser-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.browser-frame__bar {
  height: 32px;
  background: var(--paper-dim);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}

.browser-frame__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ax-grey-light);
}

.browser-frame__url {
  flex: 1;
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ax-slate);
  background: var(--paper);
  padding: 4px 10px;
  border-radius: var(--radius);
}

.browser-frame__img {
  width: 100%;
  display: block;
}

/* Mobile phone frame */
.phone-frame {
  /* 200px left the device tiny in a half-width column and the slide reading as
     two things far apart. The capture is the evidence on these slides, so it
     gets the room. 280px keeps real clearance top and bottom; at 300 the frame
     came within 18px of the canvas edge. (Matches fairmont-2026.) */
  width: 280px;
  border: 2px solid var(--ink);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.phone-frame__img { width: 100%; display: block; }

/* ==========================================================================
   TEAM BIOS
   ========================================================================== */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  flex: 1;
  align-content: center;
}

.bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-4);
}

.bio__photo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(20%);
}

.bio__name {
  font-family: var(--font-display);
  font-size: var(--t-h5);
  font-weight: 600;
  color: var(--ink);
}

.bio__role {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ink-soft);
}

.bio__body {
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ==========================================================================
   CASE STUDY
   ========================================================================== */

.case-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-left: 2px solid var(--ax-orange);
  /* It is a white panel with a shadow, so it needs the panel padding the rest
     of the deck uses (.card is padding: var(--space-5) on all four sides).
     With padding-left alone the fill and the shadow ended exactly at the cap
     height of the first stat and the baseline of the last, so the box read as
     clipped rather than as a panel. */
  padding: var(--space-5);
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.case-stat-num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.case-stat-label {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ink-soft);
}

/* ==========================================================================
   TIMELINE
   ========================================================================== */

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
  justify-content: center;
}

.timeline-row {
  display: grid;
  grid-template-columns: 80px 1fr 120px;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
}

.timeline-phase {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ax-orange-text);
}

.timeline-title {
  font-family: var(--font-display);
  font-size: var(--t-h5);
  font-weight: 600;
  color: var(--ink);
}

.timeline-desc {
  font-size: var(--t-caption);
  color: var(--ink-soft);
  margin-top: 2px;
}

.timeline-weeks {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ink-soft);
  text-align: right;
}

/* ==========================================================================
   COST / INVESTMENT
   ========================================================================== */

.cost-total {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.cost-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cost-line {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.cost-line__label {
  font-size: var(--t-small);
  color: var(--ink);
}

.cost-line__value {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}

/* ==========================================================================
   COMPLIANCE MATRIX
   ========================================================================== */

.compliance-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.compliance-row__req {
  font-size: var(--t-small);
  color: var(--ink);
}

.compliance-row__status {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #0f766e;
  text-align: center;
}

.compliance-row__how {
  font-size: var(--t-caption);
  color: var(--ink-soft);
}

/* ==========================================================================
   CERTIFICATIONS GRID
   ========================================================================== */

.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  flex: 1;
  align-content: center;
}

.cert {
  border: 1px solid var(--border);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface-elevated);
}

.cert__name {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
}

.cert__tier {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ax-orange-text);
}

/* ==========================================================================
   CLOSING SLIDE
   ========================================================================== */

.slide.closing {
  padding: 0;
  background: var(--ax-onyx);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.closing__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: 0 2in;
}

.closing__logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.closing__title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.1;
}

.closing__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-h3);
  color: var(--ax-orange-mid);
}

.closing__contact {
  display: flex;
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.7px;
  color: rgba(255,255,255,0.6);
}

/* ==========================================================================
   SECTION DIVIDER BAR (top of each slide)
   ========================================================================== */

.slide-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ink);
}

.slide.dark .slide-bar { background: var(--ax-orange); }

/* ==========================================================================
   TASK COLUMNS (Apply/Pay/Report)
   ========================================================================== */

.task-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  flex: 1;
  align-content: center;
}

.task-col {
  border-top: 2px solid var(--ax-orange);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  /* Was padding-top only, from when this was a borderless column under a rule.
     Once it gained a white fill and a shadow it became a CARD, and a card with
     no side or bottom padding runs its copy flush into three of its own edges —
     the arrow floats in a gap while the text touches the walls. Same fix the
     template already made for .stat-rail, for the same reason. */
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.task-col__icon {
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--ax-orange);
}

.task-col__title {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--ink);
}

.task-col__body {
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ==========================================================================
   INTEGRATIONS GRID
   ========================================================================== */

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  flex: 1;
  align-content: center;
}

/* White card boxes, always: a bordered box with no background inherits the
   page's warm grey and reads as a wireframe, not a card (the integrations
   grid on slide 14). Every boxed block on this deck is a WHITE card. */
.integration {
  border: 1px solid var(--border);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.integration__name {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
}

.integration__desc {
  font-size: var(--t-caption);
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ==========================================================================
   COMPACT SLIDES — two-row grids (13 Scope, 14 Tech Stack, 26 Team) run
   tall; tighten the vertical rhythm so cards clear the page number.
   ========================================================================== */

.slide.compact .slide-content { gap: var(--space-5); }
.slide.compact .slide-header { margin-bottom: var(--space-3); }
.slide.compact .card {
  padding: var(--space-4);
  gap: var(--space-2);
}
.slide.compact .team-grid { gap: var(--space-3) var(--space-5); }
.slide.compact .bio {
  padding-top: var(--space-3);
  gap: var(--space-2);
}

/* SLA table — keep response times on one line (wider value column) */
.cost-breakdown--sla .cost-line { grid-template-columns: 1fr auto; }
.cost-breakdown--sla .cost-line__value { white-space: nowrap; }


/* ── GRID BLOWOUT GUARD ───────────────────────────────────────────────────
   `repeat(N, 1fr)` means `repeat(N, minmax(auto, 1fr))`, and that `auto`
   minimum is the content's min-content width — so one wide unbreakable
   string (a long stat value, an unhyphenated URL, an unreplaced token)
   forces its track wider than the slide and shoves the last column off the
   right edge. Every `repeat()` above is now minmax(0, 1fr); these rules let
   the children shrink with them. */
.stats-grid > *, .card-grid > *, .ref-grid > *, .task-cols > *,
.stat, .card, .ref-card, .person, .task-col { min-width: 0; }
.stat > *, .card > *, .ref-card > *, .person > * { min-width: 0; overflow-wrap: anywhere; }

/* Four proof stats, one row.
   The mobile/accessibility slide set flex-wrap:wrap inline, so in the half-slide
   column the fourth stat ("AA — measured contrast") dropped to a second row and
   read as an afterthought instead of one set of four. Grid it four-up and take
   the numeral down a size so they fit as a row. */
.stat-row--fit {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.stat-row--fit .stat-num { font-size: 40px; }
.stat-row--fit .stat-label { letter-spacing: 1.2px; }

/* ==========================================================================
   PROJECT TEAM TABLE
   The RFP asks for a named team with roles, years, and the experience that
   makes each seat credible (Addendum 5, Relevant Experience). A bio grid
   cannot carry that — it has room for a sentence, not a role/years/proof
   triple — so the staffing table is its own row layout.
   ========================================================================== */

.role-table {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-content: center;
}

.role-row {
  display: grid;
  grid-template-columns: 210px 96px 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.role-row--head {
  border-bottom: 1px solid var(--ink);
  padding-bottom: var(--space-2);
}

.role-row--head p {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ink-soft);
}

.role-row__role {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
}

.role-row__person {
  display: block;
  font-weight: 400;
  font-size: var(--t-caption);
  color: var(--ax-orange-deep);
  margin-top: 2px;
}

.role-row__years {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
}

.role-row__exp {
  font-size: var(--t-caption);
  color: var(--ink-soft);
}

/* ==========================================================================
   PULL QUOTE — a client's own words, set apart from our description of the
   work. Left rule rather than quotation marks: the deck already carries an
   accent bar per slide, and a 90pt curly quote fights the serif headings.
   ========================================================================== */

.pullquote {
  border-left: 3px solid var(--ax-orange);
  padding-left: var(--space-4);
  margin-top: var(--space-4);
}

.pullquote p {
  font-size: var(--t-small);
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
}

.pullquote cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ink-soft);
  font-style: normal;
}

/* ==========================================================================
   ORG CHART — drawn, not pasted.

   The supplied chart is a 16:9 corporate slide export, complete with its own
   footer, page number, and logo. Dropped into this deck it read as a slide
   inside a slide, and at a size that fit the frame the box labels were 8px.
   The information that matters to the City is one reporting line (CEO down to
   the named PM) and the practices the project is staffed from, so both are
   drawn in the deck's own type.
   ========================================================================== */

.orgline {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.orgline__node {
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 1;
}

.orgline__node--self {
  border-color: var(--ax-orange);
  border-width: 2px;
  background: #fff;
}

.orgline__tier {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ink-soft);
}

.orgline__name {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
}

.orgline__node--self .orgline__name { color: var(--ax-orange-deep); }

.orgline__sep {
  align-self: center;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* ==========================================================================
   BROWSER FRAME — clamp to the cell, don't let the capture set the height.

   .browser-frame__img is width:100%/height:auto, so the frame's height is
   whatever aspect the screenshot happens to have. A capture even slightly
   taller than the measured cell aspect pushes the frame past the slide:
   audit-deck-clipping caught the pilot shots 41px into the padding gutter on
   four slides (08, 09, 12, 20) after a re-capture. Capping the frame and
   letting the image cover means a recapture can never overflow the canvas
   again — the crop absorbs the difference instead of the layout.
   ========================================================================== */

.browser-frame {
  display: flex;
  flex-direction: column;
  /* The canvas is a fixed 1334x750, and a split-layout column has 605px of
     safe area inside the slide padding. Cap the frame just under that: a
     percentage max-height resolves against an auto-sized grid row and is
     therefore ignored, so the bound has to be absolute. */
  max-height: 604px;
  min-height: 0;
}

.browser-frame__bar { flex: 0 0 auto; }

.browser-frame__img {
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  object-position: top center;
}

/* ==========================================================================
   INVESTMENT SLIDE, COMPACT

   The RFP asks for major AND optional elements line-itemed, so this slide
   carries two tables in the left column instead of one. At the full 72px
   total and space-3 rows that runs ~22px past the canvas and slices the last
   optional row's rule — a cut box edge reads as broken even when the text
   above it fits. Tighten the two things that scale: the headline numeral and
   the row rhythm. Nothing is dropped; the RFP asked for every line.
   ========================================================================== */

.slide.compact .cost-total { font-size: 56px; }
.slide.compact .cost-line { padding: 7px 0; }
.slide.compact .cost-breakdown { margin-top: var(--space-4) !important; }