/* ============================================================
   Agile Development Consulting, LLC — agiledevelopmentconsulting.com

   Plain HTML and CSS. No build step, no packages, no server.
   Deployed straight from the repository root by GitHub Pages.

   ── Where the colour comes from ──
   --brand (#005687) is not a guess. It was sampled out of the
   company logo (`assets/adc-logo.png`, the 2022 mark) — it is the
   exact fill of the ADC monogram. Everything else in the palette is
   built up or down from that one hue, which is why the page never
   fights the logo sitting in the header.

   The brief was "clean and vibrant". Clean is the light ground and
   the generous whitespace; vibrant is --sweep, the one gradient,
   used sparingly and always in the same direction (135deg, deep to
   bright). Even the ink is blue-tinted (#08243A, not a neutral grey)
   so the page stays in one family from headline to footnote.

   ── The one dark band ──
   #approach is the only dark section on the page, and the contact
   band below it is the only full-bleed gradient. That is deliberate:
   it gives a long single-page scroll a spine instead of one
   undifferentiated wash of white. If you add sections, keep that
   ratio — one dark, one gradient, everything else light.

   ── Type ──
   Space Grotesk for display, IBM Plex Sans for body, IBM Plex Mono
   for eyebrows, status chips and metadata. Space Grotesk was chosen
   because its geometric, slightly squared letterforms rhyme with the
   logo's wordmark; the Plex pair keeps long copy readable without
   drifting into the Inter/Roboto default that every other developer
   site uses. All three are self-hosted from /fonts/ rather than
   loaded from Google's CDN, which avoids handing visitor IPs to a
   third party and guarantees the same rendering everywhere.
   ============================================================ */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/space-grotesk-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/space-grotesk-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Tokens
   ============================================================ */

:root {
  /* ── Brand blues ──
     --brand is the logo's own fill. --bright is the link and
     mid-gradient stop; --accent is the vibrant note and is used
     only where the page needs to catch the eye (the availability
     dot, the in-progress row, the numerals on the dark band). */
  --brand: #005687;
  --brand-hover: #0a6aa2;

  /* Two bright blues, and the difference matters. --bright is a FILL
     only: at 4.07:1 on white it is not safe to set text in. Anything
     that is a bright-blue *word* on a light ground uses --bright-ink
     (5.84:1). --accent is the cyan, and it is legible only on the
     dark band (7.94:1 there, 2.0:1 on white) — on light grounds it
     may be a rule, a dot or a bar, never type. */
  --bright: #0b84c9;
  --bright-ink: #0a6aa2;
  --accent: #2dc7ee;

  /* --sweep carries white text (buttons, the contact band), so it
     stops at #0a78b8 rather than running up into the cyan: white on
     the brightest stop is 4.78:1, which clears AA for body text.
     The cyan-tipped gradients below are decorative or sit on dark,
     where the cyan is the most legible thing on the page. */
  --sweep: linear-gradient(135deg, #004a76 0%, #00699f 52%, #0a78b8 100%);
  --sweep-headline: linear-gradient(120deg, #005687 0%, #0a78b8 100%);
  --sweep-rule: linear-gradient(90deg, #005687, #2dc7ee);
  --sweep-soft: linear-gradient(120deg, #2dc7ee 0%, #0b84c9 100%);

  /* ── Ink — blue-tinted, never neutral grey ── */
  --ink: #08243a;
  --ink-body: #3f6079;
  --ink-muted: #52708a;
  --ink-faint: #56748d;
  --ink-inverse: #ffffff;
  --ink-on-dark: #a9c6d9;
  --ink-on-sweep: #f2f9fd;

  /* ── Surfaces ── */
  --surface: #ffffff;
  --surface-tinted: #f7fbfd;
  --bg: #f1f7fb;
  --sunken: #e3eef6;
  --dark: #08243a;
  --dark-2: #062b47;
  --dark-glow: #0c4e77;

  /* ── Lines ── */
  --border: #d2e3ef;
  --border-subtle: #e8f1f7;
  --border-dashed: #c6dceb;

  /* ── Type ── */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Spacing — 4px scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radius ── */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* ── Shadows — all blue-black, so nothing muddies the palette ── */
  --shadow-sm: 0 1px 2px rgba(8, 36, 58, 0.05), 0 1px 3px rgba(8, 36, 58, 0.07);
  --shadow-md: 0 2px 6px rgba(8, 36, 58, 0.04), 0 8px 20px rgba(8, 36, 58, 0.05);
  --shadow-lg: 0 10px 24px rgba(8, 36, 58, 0.07), 0 28px 64px rgba(8, 36, 58, 0.12);
  --shadow-brand: 0 2px 6px rgba(8, 36, 58, 0.08), 0 10px 26px rgba(11, 132, 201, 0.26);

  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;

  --shell: 1200px;
}

/* ============================================================
   Base
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 5.4vw, 4rem); line-height: 1.04; letter-spacing: -2.2px; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.625rem); line-height: 1.12; letter-spacing: -1.3px; }
h3 { font-size: 1.3125rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.4px; }
h4 { font-size: 0.8125rem; line-height: 1.4; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }

p { margin: 0; text-wrap: pretty; }

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--bright); }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--brand);
  color: var(--ink-inverse);
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus {
  left: 0;
  color: var(--ink-inverse);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Layout primitives
   ============================================================ */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section { padding: 100px 0; }
.section-bg { background: var(--bg); }
.section-surface { background: var(--surface); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 680px;
  margin-bottom: var(--space-12);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--sweep-rule);
  flex: none;
}
.eyebrow-invert { color: var(--accent); }
.eyebrow-invert::before { background: linear-gradient(90deg, var(--accent), var(--bright)); }

.section-lead {
  font-size: 1.09375rem;
  line-height: 1.65;
  color: var(--ink-body);
}

/* ============================================================
   Buttons & small components
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-base), background var(--transition-base);
}

.btn-primary {
  background: var(--sweep);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
  color: var(--ink-inverse);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(8, 36, 58, 0.1), 0 14px 32px rgba(11, 132, 201, 0.32);
}

.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  color: var(--ink);
  border-color: var(--bright);
  transform: translateY(-1px);
}

.btn-invert {
  background: var(--surface);
  color: var(--brand);
  box-shadow: 0 10px 30px rgba(6, 30, 48, 0.2);
}
.btn-invert:hover { color: var(--brand-hover); transform: translateY(-1px); }

.btn-sm { min-height: 42px; padding: 0 var(--space-6); font-size: 0.90625rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  align-self: flex-start;
  min-height: 34px;
  padding: 0 var(--space-4) 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--brand);
}
.pill-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(45, 199, 238, 0.22);
  flex: none;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  font-weight: 500;
  letter-spacing: 1px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--sunken);
  color: var(--brand);
}
.tag-quiet { background: var(--bg); color: var(--ink-muted); }

.chip {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.chip:hover { border-color: var(--bright); transform: translateY(-1px); }

.meta-tag {
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  padding: 6px 11px;
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink-body);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  background: var(--sweep);
  box-shadow: 0 6px 16px rgba(11, 132, 201, 0.24);
  flex: none;
}
.card-icon svg { width: 23px; height: 23px; }
.card-icon-alt { background: linear-gradient(135deg, #0a6aa2 0%, #1594d4 100%); box-shadow: 0 6px 16px rgba(11, 132, 201, 0.26); }

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 76px;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--ink);
}
.logo:hover { color: var(--ink); }
.logo img { height: 28px; width: auto; }
.logo-divider {
  width: 1px;
  height: 26px;
  background: var(--border);
  flex: none;
}
.logo-word {
  font-family: var(--font-display);
  font-size: 0.84375rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  line-height: 1.25;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.nav-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-body);
}
.nav-link:hover { color: var(--brand); }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 88px;
  background:
    radial-gradient(1100px 560px at 80% -12%, #dceffa 0%, rgba(220, 239, 250, 0) 64%),
    linear-gradient(180deg, #ffffff 0%, #f1f7fb 100%);
}
.hero-rays {
  position: absolute;
  top: -60px;
  right: -40px;
  width: 460px;
  height: 380px;
  opacity: 0.5;
  pointer-events: none;
}
.hero-rays path { stroke: var(--accent); stroke-width: 2; fill: none; opacity: 0.45; }

/* The columns are deliberately uneven. "Then make it better." is
   ~571px at the clamp's top end, and an even split of the shell
   leaves 540px — which breaks the headline onto a third line and
   costs the hero its shape. The copy column gets the difference;
   the release panel reads fine at 479px. */
.hero .shell {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 64px;
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.hero-copy h1 { margin-top: var(--space-1); }
.hero-accent {
  background: var(--sweep-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--ink-body);
  max-width: 520px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-1);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}
.hero-stats div { display: flex; flex-direction: column; gap: var(--space-1); }
.hero-stats dt {
  order: 2;
  font-size: 0.90625rem;
  line-height: 1.45;
  color: var(--ink-muted);
}
.hero-stats dd {
  order: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--brand);
}

/* ── The release panel ──
   An illustration of the method, not a claim about a real client:
   small releases, shipped continuously, with the next one already
   in flight. The caption underneath says so out loud. */
.hero-visual { position: relative; }

.release-panel {
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.release-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-5);
  background: var(--surface-tinted);
  border-bottom: 1px solid var(--border-subtle);
}
.release-chrome i {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--border);
  flex: none;
}
.release-chrome span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-left: var(--space-2);
}

.release-list { display: flex; flex-direction: column; padding: var(--space-2) 0; }
.release-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 15px var(--space-5);
}
.release-what { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.release-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--sunken);
  flex: none;
}
.release-check svg { width: 16px; height: 16px; }
.release-name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.release-name strong {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.release-name span {
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  color: var(--ink-muted);
}

.release-next {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-5);
  background: linear-gradient(135deg, #f7fbfd 0%, #eaf6fd 100%);
  border-top: 1px dashed #b9dcef;
}
.release-next .release-check { background: var(--surface); border: 1px solid #b9dcef; }
.release-next .release-name span { color: var(--bright-ink); }
.release-pct { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; color: var(--bright-ink); }
.release-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: #d6ebf8;
  overflow: hidden;
}
.release-bar i {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #005687 0%, #0b84c9 60%, #2dc7ee 100%);
}

.release-badge {
  position: absolute;
  right: -22px;
  top: -20px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--dark);
  box-shadow: 0 10px 30px rgba(8, 36, 58, 0.28);
}
.release-badge svg { width: 16px; height: 16px; flex: none; }
.release-badge span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--ink-inverse);
}

.release-caption {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  line-height: 1.6;
  color: var(--ink-faint);
  text-align: center;
}

/* ============================================================
   Cards — services, work
   ============================================================ */

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

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) 34px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--border);
  box-shadow: 0 6px 14px rgba(8, 36, 58, 0.06), 0 18px 40px rgba(8, 36, 58, 0.09);
}
.card p { font-size: 1rem; line-height: 1.68; color: var(--ink-body); }
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.work-card { gap: var(--space-3); padding: 30px; }
.work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.work-card p { font-size: 0.96875rem; }
.work-host {
  font-family: var(--font-mono);
  font-size: 0.78125rem;
  color: var(--ink-muted);
  margin-top: 2px;
}
.work-card-unshipped {
  background: var(--surface);
  border: 1px dashed var(--border-dashed);
  box-shadow: none;
}
.work-card-unshipped h3 { color: var(--ink-body); }
.work-card-unshipped p { color: var(--ink-muted); }
.work-card-unshipped .work-host { color: var(--ink-faint); }
.work-card-unshipped:hover { transform: none; box-shadow: none; border-color: var(--border-dashed); }

/* ============================================================
   Stack
   ============================================================ */

.stack-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: 44px;
}
.stack-head .section-head { margin-bottom: 0; }
.stack-note {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 340px;
}

.stack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.stack-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 30px;
  border-radius: var(--radius-xl);
  background: var(--surface-tinted);
  border: 1px solid var(--border-subtle);
}
.stack-group-head {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 0.96875rem;
  font-weight: 600;
  color: var(--ink);
}
.stack-group-head svg { width: 19px; height: 19px; flex: none; }
.stack-chips { display: flex; flex-wrap: wrap; gap: 9px; }

/* ============================================================
   Approach — the page's one dark band
   ============================================================ */

.approach {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 88% 8%, #0c4e77 0%, rgba(12, 78, 119, 0) 66%),
    linear-gradient(165deg, #08243a 0%, #062b47 100%);
}
.approach h2 { color: var(--ink-inverse); }
.approach .section-lead { color: var(--ink-on-dark); }
.approach .section-head { margin-bottom: 56px; }

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.principle {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) 30px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(169, 198, 217, 0.18);
}
.principle-num {
  font-family: var(--font-display);
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: -1px;
  background: var(--sweep-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.principle h3 { color: var(--ink-inverse); font-size: 1.25rem; }
.principle p { font-size: 0.96875rem; line-height: 1.7; color: var(--ink-on-dark); }

/* ============================================================
   About
   ============================================================ */

.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: center;
}
.about-portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-2xl);
  background: linear-gradient(150deg, #e3eef6 0%, #f1f7fb 60%, #dceffa 100%);
  border: 1px solid var(--border);
  overflow: hidden;
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-copy { display: flex; flex-direction: column; gap: var(--space-5); }
.about-copy p { font-size: 1.0625rem; line-height: 1.72; color: var(--ink-body); }
.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.96875rem;
  font-weight: 600;
}

/* ============================================================
   Contact
   ============================================================ */

.contact {
  position: relative;
  overflow: hidden;
  padding: 88px 0;
  background: var(--sweep);
}
.contact-rays {
  position: absolute;
  top: 0;
  right: 60px;
  width: 380px;
  height: 100%;
  opacity: 0.22;
  pointer-events: none;
}
.contact-rays path { stroke: #ffffff; stroke-width: 2; fill: none; }
.contact .shell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}
.contact h2 { color: var(--ink-inverse); }
.contact p {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink-on-sweep);
  max-width: 560px;
}
.contact .btn { margin-top: var(--space-1); max-width: 100%; }
.contact .btn svg { width: 18px; height: 18px; flex: none; }
.contact-email { overflow-wrap: anywhere; }

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  padding-top: var(--space-16);
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 52px;
}
.footer-brand { display: flex; flex-direction: column; gap: var(--space-5); }
.footer-brand img { width: 232px; }
.footer-blurb {
  font-size: 0.9375rem;
  line-height: 1.68;
  color: var(--ink-muted);
  max-width: 330px;
}
.footer-col { display: flex; flex-direction: column; gap: 13px; }
.footer-col a {
  font-size: 0.9375rem;
  color: var(--ink-body);
  overflow-wrap: anywhere;
}
.footer-col a:hover { color: var(--brand); }

.footer-bar { border-top: 1px solid var(--border-subtle); }
.footer-bar .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-6);
  padding-bottom: 30px;
}
.footer-bar span { font-size: 0.875rem; color: var(--ink-muted); }
.footer-tagline { font-family: var(--font-mono); font-size: 0.8125rem !important; color: var(--ink-faint) !important; }

/* ============================================================
   Responsive

   The layout collapses in four steps rather than one, because the
   hero and the three-up grids run out of room at different widths.
   There is no JavaScript menu: below 860px the in-page section
   links drop away and the header keeps the logo and the one call
   to action, which is all a single-scroll page actually needs.
   ============================================================ */

/* Anchored sections clear the sticky header. */
section[id] { scroll-margin-top: 92px; }

@media (max-width: 1080px) {
  .hero { padding: 72px 0; }
  .hero .shell { grid-template-columns: 1fr; gap: 56px; }
  .hero-sub { max-width: 640px; }
  .release-badge { right: 8px; }
  .about-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .about-portrait { max-width: 380px; }
  .stack-head { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .stack-note { max-width: 640px; }
}

@media (max-width: 900px) {
  .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principle-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-desktop { display: none; }
  .site-nav { gap: var(--space-4); }
}

/* The email address is the button label on wide screens, where it
   doubles as the address itself; on narrow screens it would wrap
   into an unreadable block, so a short label takes over. Declared
   before the breakpoint that flips it — the other order silently
   wins and leaves the button with no label at all. */
.btn-label-short { display: none; }

@media (max-width: 720px) {
  body { font-size: 16px; }
  h1 { letter-spacing: -1.5px; }
  h2 { letter-spacing: -0.9px; }

  .section { padding: 64px 0; }
  .section-head { margin-bottom: var(--space-8); }
  .approach .section-head { margin-bottom: var(--space-8); }
  .hero { padding: 48px 0 56px; }
  .contact { padding: 64px 0; }

  .card-grid,
  .stack-grid { grid-template-columns: 1fr; }
  .card { padding: 26px 22px; }
  .work-card { padding: 24px 22px; }
  .stack-group { padding: 24px 22px; }
  .principle { padding: 24px 22px; }

  .hero-stats { grid-template-columns: 1fr; gap: var(--space-4); }
  .hero-stats div { flex-direction: row; align-items: baseline; gap: var(--space-3); }
  .hero-stats dt { order: 2; font-size: 0.875rem; }
  .hero-stats dd { order: 1; font-size: 1.25rem; min-width: 96px; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  .hero-visual { display: flex; flex-direction: column; align-items: flex-start; }
  .release-panel,
  .release-caption { width: 100%; }
  .release-badge {
    position: static;
    order: -1;
    margin-bottom: var(--space-3);
  }

  .about-portrait { max-width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-brand { grid-column: auto; }
  .footer-brand img { width: 190px; }
  .footer-bar .shell {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .contact .btn { width: 100%; }
  .btn-label-long { display: none; }
  .btn-label-short { display: inline; }
}

@media (max-width: 420px) {
  .logo-divider,
  .logo-word { display: none; }
  .release-badge { padding: 10px var(--space-4); }
  .release-row { padding: 13px var(--space-4); }
  .release-next { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .card:hover,
  .chip:hover { transform: none; }
}

/* ============================================================
   Touch targets

   Inline text links are fine under a mouse but are ~19px tall,
   well under the 44px a thumb needs. On coarse pointers the
   standalone link lists (footer, about, project hosts) get real
   height instead of relying on the text box.
   ============================================================ */

@media (pointer: coarse) {
  .footer-col a,
  .about-links a,
  .work-link,
  .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-col { gap: 0; }
  .about-links { gap: var(--space-4) var(--space-6); }
}