/* ─────────────────────────────────────────────────────────────
   Klish Group — Brand Tokens + Overrides
   Source of truth: klish-group-design-system (claude.ai/design export)
   Loaded AFTER style.css so these win against the Snowlake theme.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Brand core (official 2009) ─────────────────────── */
  --kg-navy:          #162448;
  --kg-navy-rgb:      22, 36, 72;
  --kg-blue:          #216b9f;
  --kg-blue-rgb:      33, 107, 159;
  --kg-gray:          #dedfe0;
  --kg-gray-rgb:      222, 223, 224;

  /* Legacy alias kept so any --kg-cobalt refs resolve. Prefer --kg-blue. */
  --kg-cobalt:        var(--kg-blue);
  --kg-cobalt-rgb:    33, 107, 159;

  /* ── Semantic UI states ─────────────────────────────── */
  --color-success:    #2a7a4b;
  --color-warning:    #c4821a;
  --color-danger:     #b23a48;
  --color-info:       var(--kg-blue);

  /* ── Neutrals ───────────────────────────────────────── */
  --kg-black:         #1e1e1e;
  --kg-ink:           #404040;
  --kg-body:          #606060;
  --kg-muted:         #646b78;
  --kg-border:        #e5e7eb;
  --kg-border-soft:   rgba(0, 0, 0, 0.06);
  --kg-bg:            #f9fafb;
  --kg-bg-alt:        #f1f4f8;
  --kg-surface:       #ffffff;
  --kg-white:         #ffffff;

  /* Foreground semantic tokens */
  --fg-1: var(--kg-navy);
  --fg-2: var(--kg-ink);
  --fg-3: var(--kg-body);
  --fg-4: var(--kg-muted);
  --fg-invert: var(--kg-white);
  --fg-link: var(--kg-blue);

  /* Background semantic tokens */
  --bg-canvas:  var(--kg-bg);
  --bg-surface: var(--kg-surface);
  --bg-alt:     var(--kg-bg-alt);
  --bg-inverse: var(--kg-navy);

  /* ── Shape + elevation ──────────────────────────────── */
  --border-hair: 1px solid var(--kg-border);
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(24, 48, 88, 0.06);
  --shadow-sm: 0 2px 6px rgba(24, 48, 88, 0.08);
  --shadow-md: 0 6px 18px rgba(24, 48, 88, 0.10);
  --shadow-lg: 0 14px 40px rgba(24, 48, 88, 0.14);
  --ring-focus: 0 0 0 3px rgba(33, 107, 159, 0.28);

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

  /* ── Type ───────────────────────────────────────────── */
  --font-heading: 'Jost', 'Futura', 'Trebuchet MS', Arial, sans-serif;
  --font-body:    'Jost', 'Futura', Arial, sans-serif;
  --font-office:  Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Monaco', 'Menlo', monospace;

  --fs-display-1: clamp(2.75rem, 4.6vw, 4.25rem);
  --fs-display-2: clamp(2.25rem, 3.8vw, 3.25rem);
  --fs-h1:        2.25rem;
  --fs-h2:        1.75rem;
  --fs-h3:        1.375rem;
  --fs-h4:        1.125rem;
  --fs-h5:        1rem;
  --fs-lead:      1.0625rem;
  --fs-body:      0.9375rem;
  --fs-small:     0.8125rem;
  --fs-micro:     0.6875rem;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-body:   1.6;
  --lh-loose:  1.75;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-caps:   0.14em;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Font Awesome 7 makes every icon a fixed 1.25em box (FA6's opt-in fa-fw,
     now the default). That changes inline icon spacing throughout the site,
     so hold FA6 metrics. Delete this line to adopt uniform icon widths. */
  --fa-width: auto;

  /* Override theme defaults so buttons/badges pick up brand hover halos.
     The theme references --rgb-default for hover shadows; klish.css sets
     that to the brand blue. Keep these in sync if you change that file. */
}

/* ─────────────────────────────────────────────────────────────
   Base element overrides (brand alignment)
   ───────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  color: var(--fg-3);
  background: var(--bg-canvas);
}

/* Headings use navy, Jost, tight tracking. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
}

/* Page title (hero banner copy) in inverted contexts stays white. */
.inverse-text h1, .inverse-text h2, .inverse-text h3,
.inverse-text h4, .inverse-text h5, .inverse-text h6,
.inverse-text .page-title,
.inverse-text .lead {
  color: var(--fg-invert);
}

/* Body links use brand blue and shift to navy on hover. */
a { color: var(--fg-link); transition: color 160ms ease, opacity 160ms ease; }
a:hover { color: var(--kg-navy); }

/* Blockquotes: navy-rule + italic lead-size (matches kit preview card). */
.post-content blockquote,
.blog blockquote {
  border-left: 3px solid var(--kg-blue);
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-lead);
  color: var(--fg-2);
  font-style: italic;
  background: transparent;
}

/* Focus ring — brand blue, visible, accessible. */
:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-sm);
}

::selection { background: rgba(var(--kg-blue-rgb), 0.22); color: var(--kg-navy); }

/* ─────────────────────────────────────────────────────────────
   Buttons — brand treatment
   Brand spec: solid navy or blue fill, white text, ~6px radius,
   hover uses a soft halo (already in theme via --btn-hover-default).
   The base theme uses pill (1.5rem) radius; we tighten to 6px to match
   design. Padding and uppercase treatment stay so layouts don't shift.
   ───────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
}

/* Brand-named variants — opt in on new content. */
.btn-navy {
  background: var(--kg-navy);
  color: #fff;
}
.btn-navy:hover,
.btn-navy:active,
.btn-navy.active {
  background: var(--kg-navy);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(var(--kg-navy-rgb), 0.22);
}
.btn-blue {
  background: var(--kg-blue);
  color: #fff;
}
.btn-blue:hover,
.btn-blue:active,
.btn-blue.active {
  background: var(--kg-blue);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(var(--kg-blue-rgb), 0.22);
}
.btn-outline-navy {
  background: transparent;
  color: var(--kg-navy);
  box-shadow: inset 0 0 0 1.5px var(--kg-navy);
}
.btn-outline-navy:hover {
  background: var(--kg-navy);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────
   Signature brand devices — drop-in utility classes
   ───────────────────────────────────────────────────────────── */

/* Eyebrow label — the all-caps, letter-spaced micro-header. */
.eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--kg-blue);
  display: inline-block;
}

/* Large faint step number (1, 2, 3) sitting behind card copy. */
.step-num {
  font-family: var(--font-heading);
  font-size: 3.25rem;
  font-weight: var(--fw-light);
  color: rgba(var(--kg-blue-rgb), 0.35);
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Three-bar logo motif — inline accent. */
.kg-bars {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}
.kg-bars span {
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--kg-blue);
  border-radius: 1px;
}
.kg-bars.lg span { width: 4px; height: 22px; }

/* 25+ style stat block — large blue numeral + small caps label. */
.kg-stat .n {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  color: var(--kg-blue);
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.kg-stat .l {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.66rem;
  color: var(--fg-3);
  margin-top: 6px;
}

/* Capability card — numbered feature tile. */
.kg-cap {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  padding: 28px 26px 30px;
  box-shadow: var(--shadow-sm);
  transition: transform 200ms ease, box-shadow 200ms ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
}
.kg-cap:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.kg-cap .num {
  font-family: var(--font-heading);
  font-weight: var(--fw-light);
  font-size: 52px;
  color: rgba(var(--kg-blue-rgb), 0.35);
  line-height: 1;
  letter-spacing: -0.04em;
}
.kg-cap h5 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--kg-navy);
  font-size: 17px;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.kg-cap p {
  font-size: 14px;
  color: var(--fg-3);
  margin: 0;
  line-height: 1.55;
}

/* Partner panel — 2-col split, logo + copy. */
.kg-partner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  align-items: center;
  background: var(--bg-surface);
  padding: 32px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.kg-partner.reverse { grid-template-columns: 1.4fr 1fr; }
.kg-partner + .kg-partner { margin-top: 20px; }
.kg-partner img { max-width: 100%; max-height: 160px; object-fit: contain; }
.kg-partner h4 {
  font-family: var(--font-heading);
  color: var(--kg-navy);
  font-weight: var(--fw-semibold);
  font-size: 22px;
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.kg-partner p {
  font-size: 14px;
  color: var(--fg-3);
  margin: 0 0 14px;
  line-height: 1.55;
}

/* Client / tech logo grid — desaturated at rest, colorful on hover. */
.kg-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px 24px;
  align-items: center;
}
.kg-logo-grid img {
  max-width: 100%;
  max-height: 40px;
  opacity: 0.72;
  filter: grayscale(0.15);
  object-fit: contain;
  justify-self: center;
  transition: opacity 180ms, filter 180ms;
}
.kg-logo-grid img:hover { opacity: 1; filter: grayscale(0); }
@media (max-width: 900px) {
  .kg-logo-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Testimonial — single, centered quote. */
.kg-testimonial {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.kg-testimonial blockquote {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: 26px;
  color: var(--kg-navy);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  font-style: italic;
  position: relative;
  padding: 0 30px;
  border-left: 0;
  background: transparent;
}
.kg-testimonial blockquote::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -6px;
  font-size: 56px;
  color: var(--kg-blue);
  line-height: 1;
  font-family: Georgia, serif;
}
.kg-testimonial .who {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--kg-navy);
  font-size: 14px;
}
.kg-testimonial .role { font-size: 13px; color: var(--fg-4); margin-top: 2px; }

/* ─────────────────────────────────────────────────────────────
   Type-lockup — NOT the current header treatment, kept as the CSS-only
   alternative documented in docs/branding-and-logo.md (option A). Three
   CSS-drawn bars parked left of 'klish' (navy) + 'group' (gray), typed in Jost.
   The live header uses klishgroup-lockup.svg via <img class="kg-logo">, which
   puts the bars on the k/l/h stems instead — CSS can't hold that alignment
   across font-load states.
   ───────────────────────────────────────────────────────────── */
.kg-type-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--kg-navy);
  text-decoration: none;
  line-height: 1;
  text-transform: none;
}
.kg-type-lockup .bars {
  display: inline-flex;
  gap: 3px;
  align-items: flex-end;
}
.kg-type-lockup .bars span {
  display: inline-block;
  width: 3.5px;
  height: 22px;
  background: var(--kg-blue);
  border-radius: 1px;
}
.kg-type-lockup .wm { display: inline-flex; }
.kg-type-lockup .wm-a { color: var(--kg-navy); }
.kg-type-lockup .wm-b { color: var(--fg-4); margin-left: 2px; }
.kg-type-lockup:hover { color: var(--kg-navy); opacity: 0.85; }

/* Header logo sizing — see docs/branding-and-logo.md "Header row height".
   On desktop the nav links alone make the row ~65px tall (style.css pads
   .nav-link by 1.7rem top and bottom), so the logo gets that height for free
   and only costs row height above it. We spend a 92px row: 80px of logo plus
   6px of brand padding top and bottom. klishgroup-lockup.svg (aspect 0.842)
   then renders 37px bars over a ~19px cap-height wordmark at ~67px wide.

   The 6px is deliberate, not slack. At 92px of logo and zero padding the mark
   is 1px from the row edges — the bars touch the top and "group"'s descender
   collides with the navbar's border-bottom. 6px is the smallest inset that
   clears both; it costs ~6px of bar length.
   display:block matters — as an inline image the logo picks up descender
   leading below its baseline, which silently pushes the row past 92px. */
.navbar-brand img.kg-logo,
.kg-logo {
  max-width: none;
  max-height: 80px;
  width: auto;
  height: auto;
  padding-bottom: 0;
  display: block;
}
.navbar.kg-navbar .navbar-brand {
  padding-top: 6px;
  padding-bottom: 6px;
}
/* Below 992px the nav links move into the offcanvas panel, so they no longer
   hold the row open — and style.css re-adds 1.25rem of brand padding. A 92px
   logo there would give a 132px header, so cap it. Row lands at 80px. */
@media (max-width: 991.98px) {
  .navbar-brand img.kg-logo,
  .kg-logo {
    max-height: 64px;
  }
  .navbar.kg-navbar .navbar-brand {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Light navbar — matches design-system header preview.
   White surface, navy wordmark (via the Klish SVG), navy nav links,
   blue hover + active underline. Replaces the Snowlake dark-wrapper
   default which used a non-brand #242930 gray.
   ───────────────────────────────────────────────────────────── */
.navbar.kg-navbar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--kg-border);
  box-shadow: 0 1px 2px rgba(24, 48, 88, 0.04);
}
.navbar.kg-navbar .nav-link,
.navbar.kg-navbar .navbar-nav .nav-link {
  color: var(--kg-navy);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  transition: color 160ms ease;
}
.navbar.kg-navbar .nav-link:hover,
.navbar.kg-navbar .navbar-nav .nav-link:hover,
.navbar.kg-navbar .navbar-nav .nav-link.active,
.navbar.kg-navbar .navbar-nav .nav-link.highlighted {
  color: var(--kg-blue);
}
.navbar.kg-navbar .navbar-other .nav-item a:not(.btn),
.navbar.kg-navbar .navbar-other .nav-item button {
  color: var(--kg-navy);
}
.navbar.kg-navbar .navbar-other .nav-item a:not(.btn):hover,
.navbar.kg-navbar .navbar-other .nav-item button:hover {
  color: var(--kg-blue);
}
/* Hamburger icon bars for mobile — navy on white */
.navbar.kg-navbar .hamburger span,
.navbar.kg-navbar .hamburger::before,
.navbar.kg-navbar .hamburger::after {
  background: var(--kg-navy);
}
/* Dropdown menus: white with navy text, blue hover */
.navbar.kg-navbar .dropdown-menu {
  background: var(--bg-surface);
  border: 1px solid var(--kg-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
}
.navbar.kg-navbar .dropdown-menu .dropdown-item {
  color: var(--kg-navy);
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
}
.navbar.kg-navbar .dropdown-menu .dropdown-item:hover {
  color: var(--kg-blue);
  background: rgba(var(--kg-blue-rgb), 0.06);
}

/* ─────────────────────────────────────────────────────────────
   Mobile nav drawer (offcanvas-nav) — below 992px the nav links move
   into a fixed dark panel (style.css). The light-navbar rules above
   would paint them navy-on-dark, so restate them for the drawer:
   navy surface with a blue accent edge, matching the info drawer and
   footer, and light text on top. Scoped to the same breakpoint that
   turns .offcanvas-nav into a panel.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .offcanvas-nav {
    background: var(--kg-navy);
    box-shadow: inset -3px 0 0 0 var(--kg-blue);
  }
  .navbar.kg-navbar .offcanvas-nav .navbar-nav .nav-link,
  .navbar.kg-navbar .offcanvas-nav .dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.82);
  }
  .navbar.kg-navbar .offcanvas-nav .navbar-nav .nav-link:hover,
  .navbar.kg-navbar .offcanvas-nav .navbar-nav .nav-link.active,
  .navbar.kg-navbar .offcanvas-nav .navbar-nav .nav-link.highlighted,
  .navbar.kg-navbar .offcanvas-nav .dropdown-menu .dropdown-item:hover {
    color: #fff;
  }
  /* Submenus render inline in the drawer, so the white dropdown-card
     treatment has to drop away here. */
  .navbar.kg-navbar .offcanvas-nav .dropdown-menu {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar.kg-navbar .offcanvas-nav .dropdown-menu .dropdown-item:hover {
    background: transparent;
  }
}

/* ─────────────────────────────────────────────────────────────
   Info drawer (offcanvas-info) — navy surface + blue accent rule
   on the viewport-facing edge. Matches the footer's navy+accent
   treatment for visual consistency across chrome elements.
   ───────────────────────────────────────────────────────────── */
.offcanvas-info {
  background: var(--kg-navy);
  box-shadow: inset 3px 0 0 0 var(--kg-blue);
  padding-left: 2rem;
}
.offcanvas-info p,
.offcanvas-info li,
.offcanvas-info span,
.offcanvas-info a,
.offcanvas-info address {
  color: rgba(255, 255, 255, 0.82);
}
.offcanvas-info a:hover { color: #fff; }
.offcanvas-info .widget {
  display: flex;
  align-items: center;
  gap: 12px;
}
.offcanvas-info .widget i {
  color: #fff;
  font-size: 15px;
  width: 18px;
  text-align: center;
}
/* Let the logo breathe in the drawer — ignore the header cap. Needs the media
   query to match the one above, or the mobile 64px cap wins on specificity. */
.offcanvas-info .kg-logo,
.offcanvas-info img.kg-logo {
  max-height: 200px;
  max-width: 100%;
}
@media (max-width: 991.98px) {
  .offcanvas-info .kg-logo,
  .offcanvas-info img.kg-logo {
    max-height: 200px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Footer contact bar — navy strip + three-bar accent rule.
   The ::before draws a 3px repeating-dash pattern in brand blue —
   reads as an extended three-bar motif sitting above the navy bar.
   Links brighten to full white on hover. Icons upsized and fully
   white (Font Awesome solid) for legibility on the dark surface.
   ───────────────────────────────────────────────────────────── */
.kg-footerbar {
  position: relative;
  background: var(--kg-navy);
  color: rgba(255, 255, 255, 0.82);
  padding: 14px 0;
}
.kg-footerbar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kg-blue);
}
.kg-footerbar .icon-list li { display: inline-flex; align-items: center; gap: 8px; margin-right: 24px; }
.kg-footerbar .icon-list li:last-child { margin-right: 0; }
.kg-footerbar .icon-list li i {
  color: #fff;
  font-size: 14px;
  width: 16px;
  text-align: center;
}
.kg-footerbar a {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
  text-decoration: none;
}
.kg-footerbar a:hover { color: #fff; }

/* Override the legacy `footer a.footer-email { color: #fff }` — the hover
   rule above depends on this specificity matching. (Kept for safety.) */
footer.navbar .kg-footerbar a.footer-email { color: rgba(255,255,255,0.88); }
footer.navbar .kg-footerbar a.footer-email:hover { color: #fff; }

/* CTA band — navy fill, white text, sits full-bleed. */
.kg-cta-band {
  background: var(--kg-navy);
  color: #fff;
  padding: var(--space-8) 0;
}
.kg-cta-band h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  color: #fff;
  font-size: 34px;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  line-height: 1.2;
}
.kg-cta-band .sub { color: rgba(255,255,255,0.75); margin-bottom: 22px; }

/* ─────────────────────────────────────────────────────────────
   Accessibility — muted gray contrast (WCAG 2.1 AA)
   The theme paints muted text from two places that both fall short
   of 4.5:1 on our white / --kg-bg / --kg-bg-alt surfaces:
   `--color-gray: #999` (plugins.css) feeding `.color-gray`, and a
   hardcoded `#999` on `.meta`/`.more` (style.css). Point both at
   --kg-muted, which clears AA on all three surfaces.
   ───────────────────────────────────────────────────────────── */
:root {
  --color-gray: var(--kg-muted);
}

.meta,
.meta a,
.more {
  color: var(--kg-muted);
}

/* ─────────────────────────────────────────────────────────────
   Accessibility — theme palette contrast (WCAG 2.1 AA)
   White text sits on these Snowlake accent colors (card headings,
   buttons, icon fills), where the shipped values give 1.6:1–3.8:1.
   Every one is darkened along its own hue and saturation until
   white clears 4.5:1, so the color coding is preserved. The unused
   ones are corrected too, so reaching for any of them stays safe.
   ───────────────────────────────────────────────────────────── */
:root {
  --color-blue:      #2779b2;  /* was #5ca7db — 2.62:1 -> 4.70:1 */
  --color-pink:      #b94e80;  /* was #d698b5 — 2.33:1 -> 4.70:1 */
  --color-green:     #4f8032;  /* was #9ccd7e — 1.83:1 -> 4.70:1 */
  --color-purple:    #676fae;  /* was #848abd — 3.31:1 -> 4.71:1 */
  --color-red:       #d03e3e;  /* was #d75959 — 3.84:1 -> 4.73:1 */
  --color-orange:    #d63a07;  /* was #fb9d7e — 2.05:1 -> 4.70:1 */
  --color-yellow:    #9b6a0a;  /* was #f5c463 — 1.62:1 -> 4.71:1 */
  --color-leaf:      #5a7c52;  /* was #a4bf9e — 2.00:1 -> 4.73:1 */
  --color-teal:      #3a7f6c;  /* was #58b39a — 2.52:1 -> 4.74:1 */
  --color-aqua:      #197ca2;  /* was #78cbea — 1.82:1 -> 4.72:1 */
  --color-meander:   #487b88;  /* was #98bec8 — 1.99:1 -> 4.70:1 */
  --color-sky:       #4974b3;  /* was #5f86be — 3.72:1 -> 4.74:1 */
  --color-violet:    #a152bc;  /* was #b97ecd — 3.03:1 -> 4.72:1 */
  --color-rose:      #c54668;  /* was #d16b86 — 3.41:1 -> 4.72:1 */
  --color-hibiscus:  #9e636c;  /* was #ad7c83 — 3.51:1 -> 4.71:1 */
  --color-brown:     #856f61;  /* was #9e887a — 3.36:1 -> 4.73:1 */
  /* --color-cobalt (#3c71d3, 4.67:1) already clears AA. */
}

/* Bootstrap's .text-muted is #808080 (3.94:1 on white). */
.text-muted {
  color: #737373 !important;
}

/* ─────────────────────────────────────────────────────────────
   Accessibility — touch targets, images, link affordance
   ───────────────────────────────────────────────────────────── */

/* Owl Carousel renders pagination dots as an 8px span inside a
   zero-padding button, well under the 24px minimum target size.
   Grow the button's hit area without changing the visible dot. */
.owl-carousel .owl-dots .owl-dot {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Client and technology logos are given a fixed height while
   `figure img { max-width: 100% }` caps their width, which
   stretches any logo wider than its column (FreeMarker is 12.7:1
   squeezed into 5.3:1). `contain` keeps the uniform row height
   without distorting the artwork. */
.client-logo figure img {
  object-fit: contain;
}

/* Links sitting inside running text were distinguished by color alone,
   at insufficient contrast against the surrounding copy. Underline them
   in paragraphs and table cells throughout the content area; buttons and
   icon links carry their own affordance and are left alone. */
main.content-wrapper p > a:not(.btn):not([class*="hover-icon"]),
main.content-wrapper td > a:not(.btn) {
  text-decoration: underline;
}