/* ==========================================================
   MINIMALIST VARIANT (test_F_html): presentation-only pass.
   No selector, ID, class or attribute used by js/*.js is
   touched here; this file only overrides paint and spacing
   on top of the rules in style.css and green.css. Loaded last
   in the documented CSS load order (see CLAUDE.md), so it wins
   without needing !important anywhere it doesn't already
   appear upstream.

   Previously an inline <style> block at the end of index.html's
   <head>; moved here because a second :root re-declaration
   buried at the bottom of a long inline block is easy to miss
   when tracing a token back to its source. Same rules, same
   cascade position, just a named file instead of an anonymous
   tail block.
   ========================================================== */

/* Tighter type scale: narrower jumps between display, section
   and card sizes than the base site (which itself favors a
   wide 1.7-1.3 range). Ink/gray tokens are untouched, only
   the numbers a reading eye steps through. */
:root {
  --text-section: clamp(22px, 0.8vw + 16px, 28px);
  --text-feature: 19px;
  --text-card:    15px;
}
#federal-hero h1 {
  font-size: clamp(30px, 2.4vw + 15px, 44px);
}
.why-point-card h3.why-point-title,
.why-point-title,
.eng-card h3,
#capabilities .cap-card h3 {
  font-size: 15px;
}
.cap-card-featured h3 { font-size: 20px; }

/* Expansive whitespace: section rhythm and card interiors both
   open up. Numbers below are deliberately generous, this is
   the single biggest lever for a minimalist read. */
/* This block is the one place section-to-section padding is set; the
   inline <style> in index.html used to carry its own values for these same
   IDs too, which this file's later cascade position silently overrode, so
   two of the four sections were drifting toward a much tighter gap (as low
   as 130px) than the rest (up to 220px) without anyone intending it. Kept
   the whole rhythm here, in one place, tuned to a consistent ~170-200px gap
   between adjacent sections (summing each pair's bottom + top). */
#why-clever-bricks { padding-bottom: 120px; }
#engagements { padding: 100px 0 90px; }
#capabilities { padding-top: 100px; padding-bottom: 100px; }
#clients { padding: 100px 0 90px; }
.why-point-card { padding: 24px 24px; margin-bottom: 16px; }
#capabilities .cap-card { padding: 34px 32px; }
.eng-card { padding: 40px 34px; }
.cap-card-featured { padding: 44px 48px; }
.eng-section-header { margin-bottom: 56px; }

/* Razor-thin lines: every card corner and border drops to a
   near-square hairline instead of a soft, decorative radius. */
.why-point-card,
#capabilities .cap-card,
.client-logo-grid,
.eng-card {
  border-radius: 1px;
  border-width: 1px;
}
.cap-card-featured { border-radius: 2px; }
.why-point-card:hover { border-color: rgba(31,41,55, 0.22); }

/* Muted monochromatic tones: decorative accent fills (dots,
   rule lines, meta labels) shift to the neutral ink/gray
   scale. The orange accent is preserved at full strength only
   where it already carries brand-critical weight: the primary
   hero CTA and the featured-capability certification chip,
   both audited for AA in CLAUDE.md, so their fills and label
   colors are intentionally left alone below. */
.why-point-dot { background: var(--color-text-faint); }
#federal-hero .hero-tag-line,
.cap-feat-kicker-line { background: rgba(255,255,255,0.35); }
.eng-card-area { color: var(--color-text-muted); }
.eng-outcome-item::before { background: var(--color-text-faint); }
.cap-feat-kicker-text { color: rgba(255,255,255,0.55); }

/* Near-invisible, whisper-quiet micro-interactions: hover lift
   (translateY) is removed from cards, replaced by a faint
   border shift only; arrow nudges shrink and slow; the dot's
   pulse ring becomes a plain opacity fade with no shadow. */
#capabilities .cap-card:hover,
.eng-card:hover {
  transform: none;
  border-color: rgba(31,41,55, 0.2);
}
#capabilities .cap-card:hover { border-color: rgba(31,41,55, 0.2); }
.why-see-work-link:hover .why-see-work-arrow,
.why-see-work-link:focus-visible .why-see-work-arrow,
.eng-note a:hover .eng-arrow {
  transform: translateX(2px);
}
.why-see-work-link .why-see-work-arrow,
.eng-note a .eng-arrow {
  transition: transform 0.32s ease-out;
}
@keyframes cb-dot-bloom-quiet {
  0%   { opacity: 0.55; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .why-point-card.cb-revealed .why-point-dot {
    animation: none;
  }
}
