/* ============================================================
   Blue Oak Interactive — index-v2 Design System
   Adapted from reference design with responsive improvements
   ============================================================ */

:root {
  /* Colors */
  --ink: #1a1f1c;
  --ink-light: #3a403b;
  --surface: #f7f5f0;
  --surface-warm: #ede9e1;
  --border: #d4d0c8;
  --accent: #3090bc;        /* brand blue — decorative use (icons, dots, italic accents in display headings) */
  --accent-light: #3aa8d8;  /* hover-state light variant — decorative only, not for text */
  --accent-muted: #5bb0c8;  /* gradient stops, etc. — decorative only */
  --accent-dark: #267499;   /* CTA section bg, gradient stops */
  --accent-text: #236d8f;   /* WCAG-AA-safe accent for SMALL TEXT on cream/warm cream (≥4.5:1 both surfaces) */
  --oak: #4a6741;
  --bark: #6b5b3e;
  --sky: #c8d8d4;

  /* Radius */
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Fluid spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Fluid section padding (responsive without media queries) */
  --section-pad-y: clamp(3.5rem, 7vw + 1rem, 6rem);
  --section-pad-x: clamp(1rem, 4vw, 2rem);
  --container-max: 1400px;

  /* Motion */
  --transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-fast: 0.15s ease;
}

/* ── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }

/* Anchor-scroll offset: keep target headings/sections clear of the fixed nav.
   Without this, clicking an in-page link (e.g. #nextjs) scrolls the target
   into view behind the nav and the heading itself looks missing. */
:where(h1, h2, h3, h4, h5, h6)[id],
section[id],
[id]:target {
  scroll-margin-top: 6rem;
}

/* ── ACCESSIBILITY UTILITIES ─────────────────────────── */

/* Skip link (WCAG 2.4.1 Bypass Blocks) — off-screen until focused. */
.skip-link {
  position: absolute;
  top: 0; left: 0;
  background: var(--ink);
  color: var(--surface);
  padding: 0.6rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.18s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--accent-text);
  outline-offset: -4px;
}

/* Hide visually but expose to screen readers (WCAG 1.3.1, 2.4.6 — used to give
   the proof section a programmatic h2 without disrupting the visual design). */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible keyboard focus (WCAG 2.4.7 Focus Visible, 1.4.11 Non-text Contrast).
   --accent-text on --surface meets 5.27:1; offset keeps the ring outside the
   element so it doesn't crop. :focus-visible (vs :focus) avoids showing the
   ring on mouse interaction. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-mobile-toggle:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Pill-shaped buttons get a matching focus ring shape */
.btn:focus-visible,
.nav-links a.nav-cta:focus-visible {
  outline-offset: 3px;
  border-radius: 100px;
}

/* ── NAV ─────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--section-pad-x);
  background: rgba(247,245,240,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: padding var(--transition), background var(--transition);
}
.nav.scrolled {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  background: rgba(247,245,240,0.95);
}
.nav-logo {
  display: flex; align-items: center; gap: var(--space-md);
  text-decoration: none; color: var(--ink);
  min-width: 0;
}
.nav-logo-icon { width: 36px; height: 36px; flex-shrink: 0; }
.nav-logo-icon svg { width: 100%; height: 100%; }
.nav-logo-text {
  font-size: 1.05rem; font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-logo-text span { color: var(--accent-text); }

.nav-links {
  display: flex; align-items: center; gap: var(--space-xl);
  list-style: none;
}
.nav-links a {
  text-decoration: none; color: var(--ink-light);
  font-size: 0.9rem; font-weight: 500;
  transition: color var(--transition);
  position: relative;
  /* WCAG 2.5.8 Target Size (Min): 0.5rem block padding gives ≥24px tap target */
  padding: 0.5rem 0;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 2px; background: var(--accent);
  transition: width var(--transition);
}
@media (hover: hover) {
  .nav-links a:hover { color: var(--ink); }
  .nav-links a:hover::after { width: 100%; }
}
.nav-links a.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--accent-text);    /* WCAG AA: white text needs ≥4.5:1 contrast against bg */
  color: #fff;
  padding: 0.55rem 1.3rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.2;
  transition: background var(--transition), transform var(--transition);
}
.nav-links a.nav-cta::after { display: none; }
@media (hover: hover) {
  .nav-links a.nav-cta:hover {
    /* Hold the AA-safe bg; lift carries the hover signal. */
    background: var(--accent-text);
    color: #fff;
    transform: translateY(-1px);
  }
}

.nav-mobile-toggle {
  display: none; background: none; border: none;
  cursor: pointer; padding: var(--space-sm);
  color: var(--ink);
  flex-shrink: 0;
}
.nav-mobile-toggle span {
  display: block; width: 24px; height: 2px;
  background: currentColor;
  margin: 5px 0;
  transition: transform var(--transition), opacity var(--transition);
  transform-origin: center;
}
.nav.is-open .nav-mobile-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav.is-open .nav-mobile-toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-mobile-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── MEGA MENU ──────────────────────────────────────── */
/* Pattern:
     <li class="nav-item nav-item--has-mega">
       <a href="…">Top-level link (still navigates / scrolls to anchor)</a>
       <button class="nav-disclosure" aria-expanded="false" aria-controls="mega-x">…chevron…</button>
       <div class="mega" id="mega-x">…panel content…</div>
     </li>
   Desktop: hover OR aria-expanded shows the floating panel.
   Mobile (≤720px): aria-expanded shows the panel inline as a nested accordion.
*/

.nav-item { position: relative; }

.nav-disclosure {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  margin: 0 0 0 0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-light);
  vertical-align: middle;
  /* WCAG 2.5.8 Target Size — keep ≥24×24 */
  min-width: 28px;
  min-height: 28px;
  border-radius: 4px;
  transition: color var(--transition);
}
.nav-disclosure:hover { color: var(--ink); }
.nav-disclosure svg {
  width: 10px;
  height: 7px;
  transition: transform var(--transition);
}
.nav-disclosure[aria-expanded="true"] svg { transform: rotate(180deg); }

.mega-col-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.55rem;
  font-weight: 600;
}
.mega-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0;
  margin: 0;
}
.mega-list a {
  display: block;
  padding: 0.55rem 0.85rem;
  margin: 0 -0.85rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}
.mega-list a:hover,
.mega-list a:focus-visible { background: var(--surface-warm); color: var(--ink); }
.mega-all {
  display: block;
  padding-top: var(--space-md);
  margin-top: var(--space-sm);
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
}
.mega-all:hover { color: var(--ink); }

/* Desktop ≥721: floating panel anchored to the parent nav-item */
@media (min-width: 721px) {
  .mega {
    position: absolute;
    top: 100%;
    left: -1.5rem;
    min-width: 280px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 14px 40px rgba(26, 31, 28, 0.10);
    padding: var(--space-lg) var(--space-xl);
    margin-top: 0.5rem;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
  }
  /* Hover-gap bridge: invisible hit-area extending the mega up into the
     visual margin between it and the nav. Without this, moving the cursor
     from the parent link down to the mega items briefly leaves both
     :hover zones and the menu collapses. */
  .mega::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -0.75rem;     /* slightly taller than .mega's margin-top */
    height: 0.75rem;
    background: transparent;
  }
  .nav-item--has-mega:hover .mega,
  .nav-item--has-mega:focus-within .mega,
  .nav-disclosure[aria-expanded="true"] ~ .mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--transition), transform var(--transition), visibility 0s;
  }
  .mega-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    min-width: 240px;
  }
  /* Wider mega for items that want multi-column (add .mega--wide) */
  .mega--wide { min-width: 540px; }
  .mega--wide .mega-inner { grid-template-columns: 1fr 1fr; }
}

/* Mobile ≤720: panel renders inline below the nav link as a nested accordion */
@media (max-width: 720px) {
  /* Use flex on the row so <a> and chevron stay on a single line and the
     mega panel wraps to its own row below them. Replaces the older
     float-right pattern, which was fragile and dropped the chevron onto a
     new line whenever the link's inline-block width pushed the float past
     the available space. */
  .nav-item--has-mega {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
  }
  .nav-item--has-mega > a {
    flex: 1 1 0;
    min-width: 0;
  }
  .nav-item--has-mega > .nav-disclosure {
    flex: 0 0 auto;
    align-self: stretch;
    margin: 0;
    /* WCAG 2.5.8 ≥44×44 tap target */
    min-width: 56px;
    padding: 0 1.25rem;
    /* Match the <a>'s underline so the row reads as a single divider */
    border-bottom: 1px solid var(--border);
  }
  .mega {
    flex: 0 0 100%;
    display: none;
    padding: 0.25rem 0 0.5rem 1rem;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
  }
  .nav-disclosure[aria-expanded="true"] ~ .mega { display: block; }
  .mega-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .mega-list a {
    margin: 0;
    padding: 0.7rem 0.5rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .mega-list li:last-child a { border-bottom: none; }
  .mega-col--cta { margin-top: 0; }
}

/* ── HERO ───────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  min-height: clamp(560px, 90vh, 900px);
  display: flex; align-items: center;
  padding: clamp(7rem, 10vw + 5rem, 9rem) 0 var(--section-pad-y);
  overflow: hidden;
}
.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
  z-index: 2;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  min-width: 0;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: var(--space-lg);
}
.hero-eyebrow::before {
  content: ''; display: block; width: 32px; height: 2px;
  background: var(--accent);
}
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4.5vw + 0.5rem, 4rem);
  font-weight: 400; line-height: 1.12;
  letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: var(--space-lg);
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic; color: var(--accent);
  font-family: var(--font-serif);
}
.hero-desc {
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem);
  color: var(--ink-light);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  max-width: 52ch;
}
.hero-actions {
  display: flex; gap: var(--space-md); flex-wrap: wrap;
}

/* ── HERO BACKDROP ──────────────────────────────────── */
/* Giant blue-oak mark — backdrop watermark, sized against the full hero */
.hero-logo-orb {
  position: absolute;
  width: clamp(800px, 80vw, 1500px);
  aspect-ratio: 1;
  height: auto;
  max-width: none;     /* override the global svg { max-width: 100% } reset */
  top: 50%;
  left: 65%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.1;
  filter: blur(0.5px);
  animation: orbFloat 18s ease-in-out infinite;
  z-index: 0;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  33%      { transform: translate(calc(-50% + 12px), calc(-50% - 14px)) scale(1.02); }
  66%      { transform: translate(calc(-50% - 10px), calc(-50% + 8px)) scale(0.99); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo-orb { animation: none; }
}

/* Constellation network — larger than the hero so it clips top / bottom / sides */
.hero-visual-net {
  position: absolute;
  width: clamp(900px, 110vw, 2000px);
  aspect-ratio: 1;
  height: auto;
  max-width: none;     /* override the global svg { max-width: 100% } reset */
  top: 50%;
  left: 65%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  opacity: 0.55;
}
.hv-rotor {
  transform-origin: 600px 600px;
  animation: hvSpin 130s linear infinite;
}
@keyframes hvSpin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
.hv-link {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-linecap: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.hv-node {
  fill: var(--accent);
  stroke: rgba(247, 245, 240, 0.9);
  stroke-width: 0.6;
  transform-box: fill-box;
  transform-origin: center;
}
.hv-node--core {
  fill: url(#hvCoreGrad);
  stroke: rgba(247, 245, 240, 0.7);
  stroke-width: 1;
  filter: drop-shadow(0 0 6px rgba(48, 144, 188, 0.45));
  animation: hvPulse 3.6s ease-in-out infinite;
}
.hv-node--oak  { fill: var(--oak);  }
.hv-node--bark { fill: var(--bark); }
.hv-pulse {
  fill: var(--accent-light);
  filter: drop-shadow(0 0 5px rgba(58, 168, 216, 0.7));
}

@keyframes hvPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-node--core { animation: none; }
  .hv-rotor { animation: none; }
  .hero-visual-net { display: none; }
}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: 0.85rem 1.75rem; border-radius: 100px;
  font-size: 0.95rem; font-weight: 600;
  text-decoration: none; transition: all var(--transition);
  cursor: pointer; border: none;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.btn-primary { background: var(--accent-text); color: #fff; }
.btn-secondary {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--border);
}
@media (hover: hover) {
  .btn-primary:hover {
    /* Keep the AA-safe darker bg; lift + shadow carry the hover signal. */
    background: var(--accent-text);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(35,109,143,0.30);
  }
  .btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent-text);
  }
}
.btn svg { width: 16px; height: 16px; }

/* ── PROOF SECTION ───────────────────────────────────── */
.proof {
  /* bg/borders moved to .section--warm so the alternating row striping is
     controlled by a generic modifier rather than a section-specific rule. */
  padding: var(--section-pad-y) var(--section-pad-x);
}

/* Generic warm-cream section modifier — apply to any .section that should
   take the alternate (surface-warm) row stripe. */
.section--warm {
  background: var(--surface-warm);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.proof-header {
  max-width: var(--container-max);
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
}
.proof-grid {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-lg);
  align-items: stretch;
}

.proof-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.proof-card::before {
  content: '';
  position: absolute;
  top: var(--space-xl); bottom: var(--space-xl);
  left: -1px;
  width: 3px;
  background: var(--accent);
  border-radius: 100px;
  transform: scaleY(0.25);
  transform-origin: center;
  transition: transform var(--transition);
}
@media (hover: hover) {
  .proof-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(26, 31, 28, 0.07);
    border-color: var(--accent-muted);
  }
  .proof-card:hover::before { transform: scaleY(1); }
}

.proof-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.proof-title {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 0.7vw + 1.15rem, 1.6rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.proof-title em {
  font-style: italic;
  color: var(--accent-text);
}

.proof-artifact {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: rgba(26, 31, 28, 0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  color: var(--ink-light);
  line-height: 1.55;
}

/* Mute the inset artifact at rest, reveal on card hover.
   Skipped on touch (hover: none) so artifacts remain fully visible. */
@media (hover: hover) {
  .proof-artifact {
    opacity: 0.45;
    filter: saturate(0.55);
    transition: opacity var(--transition), filter var(--transition);
  }
  .proof-card:hover .proof-artifact,
  .proof-card:focus-within .proof-artifact {
    opacity: 1;
    filter: saturate(1);
  }
}

/* Thread artifact */
.proof-artifact--thread {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.thread-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--border);
}
.thread-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bark);
}
.thread-people {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
}
.thread-msgs {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.msg-row {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0.6rem;
  align-items: baseline;
}
.msg-name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--bark);
  text-align: left;
}
.msg-name--us {
  color: var(--accent-text);
  font-weight: 600;
}
.msg-row p {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--ink-light);
  line-height: 1.5;
  margin: 0;
}

/* Checks artifact */
.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.checklist li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--ink);
}
.checklist .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--oak);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  flex-shrink: 0;
}
.checklist small {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--bark);
  letter-spacing: 0.02em;
}

/* Status board artifact */
.proof-artifact--status .status-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.proof-artifact--status .status-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--ink);
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--oak);
  box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.2);
  flex-shrink: 0;
}
.proof-artifact--status .status-list small {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--bark);
  text-align: right;
}

/* Shared footline (timeline + checks) */
.proof-footline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}
.proof-footline .branch { color: var(--ink); }
.proof-footline .duration { color: var(--bark); }

.proof-desc {
  margin-top: auto;
  font-size: 0.92rem;
  color: var(--ink-light);
  line-height: 1.6;
}

/* ── SECTIONS ────────────────────────────────────────── */
.section { padding: var(--section-pad-y) var(--section-pad-x); }
.section-inner { max-width: var(--container-max); margin: 0 auto; }

.section-label {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: var(--space-md);
}
.section-label::before {
  content: ''; display: block; width: 24px; height: 2px;
  background: var(--accent);
}
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.5vw + 0.75rem, 3rem);
  font-weight: 400; line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
  text-wrap: balance;
}
.section-desc {
  font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.1rem);
  color: var(--ink-light);
  line-height: 1.7; max-width: 60ch;
}
.services-header { margin-bottom: var(--space-2xl); }

/* ── SERVICE CARDS ───────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-lg);
}
.service-card {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--surface-warm);
  border: 1px solid var(--border);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  position: relative; overflow: hidden;
}
.service-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0;
  height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
@media (hover: hover) {
  .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.06);
    border-color: var(--accent-muted);
  }
  .service-card:hover::before { transform: scaleX(1); }
}
.service-icon {
  width: 48px; height: 48px; border-radius: var(--radius);
  background: rgba(48,144,188,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-lg);
}
.service-icon svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.service-card h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem; font-weight: 500;
  margin-bottom: var(--space-sm); line-height: 1.3;
}
.service-card p {
  font-size: 0.92rem; color: var(--ink-light); line-height: 1.65;
}
.service-tags {
  display: flex; gap: var(--space-xs); flex-wrap: wrap;
  margin-top: var(--space-md);
}
.service-tag {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent-text);    /* WCAG AA: was --accent-muted (2.27:1), too light */
  background: rgba(48,144,188,0.06);
  /* WCAG 2.5.8 Target Size (Min): vertical padding + line-height ≥ 24 CSS px.
     0.45rem (7.2px) × 2 + 12px line-height ≈ 26px. Linked variants share the
     same dimensions so they meet the same minimum. */
  padding: 0.45rem 0.85rem; border-radius: 100px;
  display: inline-block;
  line-height: 1;
}

/* Linked service tags use the primary-button color treatment so they read as
   real, navigable links. White text on --accent-text bg = 5.74:1 (AA). */
a.service-tag {
  background: var(--accent-text);
  color: #fff;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
@media (hover: hover) {
  a.service-tag:hover {
    /* Keep the AA-safe bg (white on --accent is only 3.60:1; --accent-text is 5.74:1).
       Lift carries the hover signal, matching the .btn-primary pattern. */
    background: var(--accent-text);
    color: #fff;
    transform: translateY(-1px);
  }
}

/* ── APPROACH ────────────────────────────────────────── */
.approach { background: var(--ink); color: var(--surface); }
.approach .section-label { color: var(--accent-light); }
.approach .section-label::before { background: var(--accent-light); }
.approach .section-title { color: var(--surface); }
.approach .section-desc { color: rgba(255,255,255,0.65); }

.approach-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.approach-step::before {
  content: attr(data-num);
  font-family: var(--font-serif);
  font-size: 2.5rem; font-weight: 400;
  color: var(--accent-light); opacity: 0.25;
  display: block; margin-bottom: var(--space-md); line-height: 1;
}
.approach-step h3 {
  font-size: 1.1rem; font-weight: 600;
  margin-bottom: var(--space-sm); color: var(--surface);
}
.approach-step p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
}

/* ── VALUES ──────────────────────────────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: start;
  margin-top: var(--space-xl);
}
.values-list { display: flex; flex-direction: column; gap: var(--space-lg); }
.value-item {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border);
}
.value-item:last-child { border-bottom: none; }
.value-item h3 {
  font-size: 1.1rem; font-weight: 600;
  margin-bottom: var(--space-sm);
  display: flex; align-items: center; gap: var(--space-md);
}
.value-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}
.value-item p {
  font-size: 0.92rem; color: var(--ink-light);
  line-height: 1.65;
  padding-left: calc(28px + var(--space-md));
}
.values-aside {
  padding: var(--space-2xl); border-radius: var(--radius-lg);
  background: var(--surface-warm);
  border: 1px solid var(--border);
  text-align: center;
  position: sticky; top: 6rem;
}
.aside-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-md);
}
.aside-message {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 0.5vw + 0.95rem, 1.2rem);
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: var(--space-md);
  text-wrap: balance;
}
.aside-sig {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--bark);
}

/* ── STEWARDSHIP TIMELINE (values aside) ────────────── */
/* Long-arcs Gantt with tree-ring bar fills and live pulse markers.
   Data lives in inline CSS vars so adding rows requires no new rules. */

.stew { text-align: left; }
.stew-head { margin-bottom: var(--space-lg); }
.stew-head .aside-eyebrow { margin-bottom: 0; }
.stew-title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 0.7vw + 1.05rem, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 0.4rem;
  color: var(--ink);
  text-wrap: balance;
}
.stew-title em { font-style: italic; color: var(--accent-text); }

.stew-chart { position: relative; }

.stew-axis {
  position: relative;
  height: 0.95rem;
  margin-bottom: 0.5rem;
}
.stew-axis span {
  position: absolute;
  top: 0;
  left: calc((var(--at) - var(--start)) / var(--span) * 100%);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--bark);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

.stew-rows {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}
.stew-row {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.42rem;
}
.stew-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.stew-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.stew-tenure {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Track: full-width chart base with subtle year-grid hairlines */
.stew-track {
  position: relative;
  height: 7px;
  border-radius: 100px;
  background-color: rgba(26, 31, 28, 0.045);
  background-image: repeating-linear-gradient(
    to right,
    rgba(26, 31, 28, 0.07) 0 1px,
    transparent 1px calc(100% / var(--span))
  );
  background-clip: padding-box;
}

/* Bar: positioned by year coords, internal hairlines = annual rings */
.stew-bar {
  position: absolute;
  top: 0; bottom: 0;
  left: calc((var(--from) - var(--start)) / var(--span) * 100%);
  width: calc((var(--to) - var(--from)) / var(--span) * 100%);
  background:
    repeating-linear-gradient(
      to right,
      rgba(255, 255, 255, 0.18) 0 1px,
      transparent 1px calc(100% / var(--years, 1))
    ),
    linear-gradient(90deg, var(--accent-muted), var(--accent));
  border-radius: 100px;
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: inset 0 0 0 0.5px rgba(38, 116, 153, 0.25);
}
.fade-up.visible .stew-bar {
  animation: stew-grow 1.55s cubic-bezier(0.65, 0, 0.25, 1) var(--delay, 0s) both;
}
@keyframes stew-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Pulse: leading edge "now" marker, appears after bar finishes */
.stew-pulse {
  position: absolute;
  top: 50%;
  left: calc((var(--to) - var(--start)) / var(--span) * 100%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 2;
}
.fade-up.visible .stew-pulse {
  animation:
    stew-pulse-in 0.45s cubic-bezier(0.5, 1.6, 0.5, 1) calc(var(--delay, 0s) + 1.45s) forwards,
    stew-pulse-ring 2.6s ease-out calc(var(--delay, 0s) + 1.95s) infinite;
}
@keyframes stew-pulse-in {
  to { transform: translate(-50%, -50%) scale(1); }
}
@keyframes stew-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(48, 144, 188, 0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(48, 144, 188, 0); }
  100% { box-shadow: 0 0 0 0 rgba(48, 144, 188, 0); }
}

.stew-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--bark);
  line-height: 1.45;
}

.stew-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.85rem;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bark);
}
.stew-stat b {
  color: var(--accent-text);
  font-weight: 700;
  margin-right: 0.15rem;
  font-variant-numeric: tabular-nums;
}
.stew-stat--live {
  position: relative;
  padding-left: 0.95rem;
  color: var(--oak);
}
.stew-stat--live::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--oak);
  box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.18);
  animation: stew-live 2.4s ease-in-out infinite;
}
@keyframes stew-live {
  0%, 100% { opacity: 1;   transform: translateY(-50%) scale(1); }
  50%      { opacity: 0.4; transform: translateY(-50%) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up.visible .stew-bar { animation: none; transform: scaleX(1); }
  .fade-up.visible .stew-pulse {
    animation: none;
    transform: translate(-50%, -50%) scale(1);
  }
  .stew-stat--live::before { animation: none; }
}

@media (max-width: 540px) {
  .stew-name { font-size: 0.92rem; }
  .stew-axis span { font-size: 0.55rem; }
  .stew-note { font-size: 0.66rem; }
  .stew-rows { gap: 0.95rem; }
}

/* ── CTA ─────────────────────────────────────────────── */
.cta {
  background: var(--accent-dark);
  color: #fff; text-align: center;
  padding: var(--section-pad-y) var(--section-pad-x);
}
.cta-inner { max-width: 720px; margin: 0 auto; }
.cta .section-label { color: rgba(255,255,255,0.7); }
.cta .section-label::before { background: rgba(255,255,255,0.5); }
.cta .section-title { color: #fff; margin-bottom: var(--space-md); }
.cta .section-desc {
  color: rgba(255,255,255,0.85);
  margin: 0 auto var(--space-xl); text-align: center;
}
.cta .btn-primary { background: #fff; color: var(--accent-dark); }
@media (hover: hover) {
  .cta .btn-primary:hover { background: var(--surface); }
}

/* ── FOOTER ──────────────────────────────────────────── */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--ink); color: var(--bark);
  padding: var(--space-2xl) var(--section-pad-x) var(--space-lg);
  isolation: isolate;
}
.footer-watermark {
  position: absolute;
  right: clamp(-3rem, -4vw, -1.5rem);
  bottom: clamp(-4rem, -6vw, -2rem);
  width: clamp(220px, 28vw, 380px);
  height: auto;
  fill: var(--surface);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.footer-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-lg);
}
.footer-brand { font-size: 0.9rem; font-weight: 600; color: var(--surface); }
.footer-links {
  display: flex; gap: var(--space-xl);
  flex-wrap: wrap; list-style: none;
}
.footer-links a {
  /* WCAG AA: --bark on --ink was 2.54:1; rgba(255,255,255,.75) on --ink ≈ 9.83:1 */
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.85rem;
  /* WCAG 2.5.8 Target Size (Min): 0.5rem block padding gives ≥24px tap target */
  padding: 0.5rem 0;
  display: inline-block;
  transition: color var(--transition);
}
@media (hover: hover) {
  .footer-links a:hover { color: var(--surface); }
}
.footer-copy {
  width: 100%; text-align: center;
  font-size: 0.75rem;
  /* WCAG AA: was rgba(255,255,255,0.3) ≈ 2.5:1 on --ink; .65 ≈ 7.7:1 */
  color: rgba(255, 255, 255, 0.65);
  margin-top: var(--space-lg); padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ── ANIMATION ───────────────────────────────────────── */
.fade-up {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── RESPONSIVE BREAKPOINTS ───────────────────────────── */

/* Tablet — text centers, backdrop dims */
@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-top: 7rem;
    text-align: center;
  }
  .hero-content { max-width: 100%; margin: 0 auto; }
  .hero-eyebrow { justify-content: center; }
  .hero-desc { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-logo-orb { left: 50%; opacity: 0.07; }
  .hero-visual-net { left: 50%; opacity: 0.55; }
  .values-aside { position: static; }
}

/* Phone — collapse nav, single columns, tighter spacing */
@media (max-width: 720px) {
  .nav { padding: var(--space-md); }
  .nav-links {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-md);
    background: rgba(247,245,240,0.98);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
  }
  .nav.is-open .nav-links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity var(--transition), transform var(--transition), visibility 0s;
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: var(--space-md);
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
  }
  .nav-links a::after { display: none; }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-cta {
    text-align: center;
    margin-top: var(--space-sm);
  }
  .nav-mobile-toggle { display: block; }
  .nav-logo-text { font-size: 0.95rem; }
  .nav-logo-icon { width: 30px; height: 30px; }

  .hero { padding-top: 6rem; }
  .hero-actions { width: 100%; flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-visual { max-width: 240px; }

  .value-item p { padding-left: 0; }
  .values-aside { padding: var(--space-xl); }

  .footer-inner {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .footer-links { justify-content: center; }
}

/* ── CONTACT PAGE ────────────────────────────────────── */

/* Page header — used on contact, can be reused on other sub-pages */
.page-header {
  position: relative;
  padding: clamp(7rem, 10vw + 5rem, 9rem) var(--section-pad-x) clamp(2rem, 4vw, 3rem);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.page-header__inner {
  max-width: 760px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
/* Floated brand mark — sits to the right of the page-header lede so the
   paragraph text wraps around it. shape-outside follows the round mark. */
.page-header__druplicon {
  float: right;
  width: clamp(120px, 18vw, 200px);
  height: auto;
  margin: 0 0 var(--space-md) var(--space-xl);
  shape-outside: circle();
}
.page-header__druplicon svg {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 720px) {
  .page-header__druplicon {
    width: clamp(80px, 22vw, 130px);
    margin-left: var(--space-md);
  }
}

.page-header__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw + 0.75rem, 3.5rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0.4rem 0 var(--space-md);
  text-wrap: balance;
}
.page-header__title em { font-style: italic; color: var(--accent); }
.page-header__lede {
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem);
  color: var(--ink-light);
  line-height: 1.65;
  max-width: 60ch;
}

/* ── JUMP MENU (in-page nav for sub-page sections) ──── */
.page-jump {
  background: var(--surface-warm);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.page-jump__inner {
  max-width: 760px;
  margin-inline: auto;
  padding: var(--space-md) var(--section-pad-x);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.page-jump__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bark);
  margin-right: 0.4rem;
}
.page-jump a {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  text-decoration: none;
  background: var(--surface);
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.page-jump a:hover {
  background: var(--accent-text);
  border-color: var(--accent-text);
  color: #fff;
}

/* ── PAGE CONTENT (sub-pages) ──────────────────────── */
/* Long-form prose component used by interior pages
   (services/drupal-development.html, future about/services/case-studies). */
.page-content {
  max-width: 760px;
  margin-inline: auto;
  color: var(--ink-light);
}
.page-content h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 1vw + 1.1rem, 1.85rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-md);
  margin-top: var(--space-2xl);
  text-wrap: balance;
}
.page-content > h2:first-child { margin-top: 0; }
.page-content p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: var(--space-md);
}
.page-content p:last-child { margin-bottom: 0; }
.page-content ul,
.page-content ol {
  list-style: disc;
  padding-left: 1.4rem;
  margin-bottom: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.page-content ol { list-style: decimal; }
.page-content li {
  font-size: 1rem;
  line-height: 1.65;
}
.page-content a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition);
}
.page-content a:hover { color: var(--ink); }
.page-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-warm);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  color: var(--ink);
}

/* ── PAGE-SECTION (numbered, striped sub-page sections) ──
   Adds a small mono kicker with a numeric counter above each h2 inside
   .page-content and lets adjacent .page-section blocks alternate between
   the cream and surface-warm bands (via .section--warm). */
.page-section { padding: var(--section-pad-y) var(--section-pad-x); }
.page-section .page-content { padding: 0; }
.page-section__kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}
.page-section__num {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--accent-text);
  letter-spacing: 0.06em;
}
.page-section__num::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 1px;
  background: var(--accent-text);
  vertical-align: middle;
  margin-right: 0.55rem;
  transform: translateY(-3px);
}
.page-section .page-content > h2 { margin-top: 0; }
.page-recent {
  border-left: 2px solid var(--accent-text);
  padding-left: 1rem;
  margin-top: var(--space-lg);
  font-size: 0.95rem;
  color: var(--ink);
}
.page-recent a { color: var(--accent-text); }

/* ── ABOUT — TWO-COLUMN PORTRAIT LAYOUT ────────────────
   Used on about.html in the founder bio section. The portrait sits in a
   fixed-width right column so the image can never balloon past its bounds
   regardless of viewport. Caption is editorial-style: serif italic, muted,
   with a short rule above it. */
.page-content--with-portrait {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: var(--space-2xl);
  align-items: start;
}
.page-content--with-portrait > .page-content__main { min-width: 0; }
.page-section .page-content--with-portrait > .page-content__main > h2 { margin-top: 0; }
.about-portrait {
  margin: 0;
  width: 100%;
  background: transparent;
}
.about-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 50%;
  border: 1px solid var(--border);
}
.about-portrait figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-light);
  text-align: center;
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
  /* Constrain the rule to the visual width of the image rather than the
     full figure box, so it reads as a caption rule, not a section rule. */
  margin-inline: 1.25rem;
}
@media (max-width: 720px) {
  .page-content--with-portrait {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .about-portrait {
    max-width: 160px;
    margin-inline: auto;
  }
}

/* ── DRIPYARD CTA (sister-practice promo block) ─────── */
/* Used at the bottom of services/drupal-development.html. The Dripyard
   logo SVG is rendered with fill="black" inline; the cream surface
   gives ≥18:1 contrast. */
.dripyard-cta {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.dripyard-cta__inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.dripyard-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-md);
  font-weight: 600;
}
.dripyard-cta__logo {
  display: inline-block;
  width: clamp(180px, 36vw, 260px);
  height: auto;
  margin-bottom: var(--space-md);
  border-radius: 4px;
}
.dripyard-cta__logo svg {
  width: 100%;
  height: auto;
  display: block;
}
.dripyard-cta__blurb {
  font-size: 1rem;
  color: var(--ink-light);
  line-height: 1.7;
  max-width: 56ch;
  margin: 0 auto;
}
.dripyard-cta__blurb a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.dripyard-cta__blurb a:hover { color: var(--ink); }
.dripyard-cta__link {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 0;
}
.dripyard-cta__link:hover { color: var(--ink); }

/* Contact body grid */
.contact-body {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border);
}
.contact-grid {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  align-items: start;
}
@media (max-width: 880px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* Form */
.contact-form-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 540px) {
  .form-row { grid-template-columns: 1fr; }
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.form-label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.form-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--bark);
  font-size: 0.7rem;
}
.form-input {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  width: 100%;
  line-height: 1.4;
}
.form-input::placeholder {
  color: var(--bark);
  opacity: 0.65;
}
.form-input:hover {
  border-color: var(--accent-muted);
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(48, 144, 188, 0.12);
  background: #fff;
}
.form-textarea {
  resize: vertical;
  min-height: 8rem;
  font-family: var(--font-sans);
}
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-light) 50%),
    linear-gradient(135deg, var(--ink-light) 50%, transparent 50%);
  background-position:
    calc(100% - 1.1rem) 1.05rem,
    calc(100% - 0.75rem) 1.05rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
  cursor: pointer;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding-top: var(--space-md);
  border-top: 1px dashed var(--border);
}
.form-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--bark);
  margin: 0;
}

/* Required-field marker (red asterisk in label) */
.form-required {
  color: #b1442d;       /* WCAG AA on cream surface */
  margin-left: 0.15rem;
  font-weight: 700;
}
.form-required-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-light);
  margin: 0;
}
.form-required-note span { color: #b1442d; font-weight: 700; }

/* :user-invalid only paints once the user has interacted with the field, so
   the form doesn't look broken on first paint. The browser handles the
   actual validation popups via HTML5 constraints (required, minlength,
   maxlength, type=email, pattern). */
.form-input:user-invalid {
  border-color: #b1442d;
  box-shadow: 0 0 0 2px rgba(177, 68, 45, 0.15);
}
.form-input:user-invalid:focus {
  outline-color: #b1442d;
}

/* Form plugin states (set by the loader.js dynamic-content plugin) */
.contact-form[data-state="submitting"] .btn {
  opacity: 0.6;
  pointer-events: none;
}
.contact-form[data-state="success"] {
  /* The plugin replaces form contents with the data-success message;
     this keeps the wrapper consistent. */
  text-align: center;
}
.contact-form[data-state="success"] > * { display: none; }
.contact-form[data-state="success"]::before {
  content: attr(data-success);
  display: block;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--ink);
  padding: 1.5rem 0;
  line-height: 1.5;
}

/* Aside info cards */
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  position: relative;
  transition: border-color var(--transition);
}
.contact-card::before {
  content: '';
  position: absolute;
  top: var(--space-lg);
  bottom: var(--space-lg);
  left: -1px;
  width: 3px;
  background: var(--accent);
  border-radius: 100px;
  transform: scaleY(0.3);
  transform-origin: center;
  transition: transform var(--transition);
}
@media (hover: hover) {
  .contact-card:hover { border-color: var(--accent-muted); }
  .contact-card:hover::before { transform: scaleY(1); }
}
.contact-card--quiet {
  background: transparent;
  border-style: dashed;
}
.contact-card--quiet::before { background: var(--bark); }
.contact-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.4rem;
}
.contact-card--quiet .contact-card__eyebrow { color: var(--bark); }
.contact-card__title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 0.4rem;
  display: block;
}
a.contact-card__title--link {
  text-decoration: none;
  color: var(--ink);
  transition: color var(--transition);
}
a.contact-card__title--link:hover {
  color: var(--accent-text);
}
.contact-card__body {
  font-size: 0.95rem;
  color: var(--ink-light);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.contact-card__body a {
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.contact-card__body a:hover {
  border-bottom-color: var(--accent);
}
.contact-card__note {
  font-size: 0.85rem;
  color: var(--bark);
  line-height: 1.5;
  margin: 0;
}