/* Component styles — header/nav, footer, hero, and content blocks.
   Missing entirely until now; base.css only had resets/tokens/buttons. */

/* ===== Header / Nav =====
   Navy chrome (re-theme, Jul 2026): the header bar itself is a dark
   navy-900 surface now, so its direct children (logo, top-level nav
   links, menu toggle, mobile panel) get explicit light colors instead of
   the generic --text-primary/--border tokens (which still mean "dark
   text on light bg" everywhere else on the site). The mega-menu is
   restyled as its own navy-800 panel rather than inheriting --bg, so it
   doesn't silently go back to a white card. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy-900);
  border-bottom: 1px solid var(--navy-800);
  transition: box-shadow var(--duration-default) var(--ease-out);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-4);
  padding-block: var(--space-2);
}
.site-header__logo {
  font-weight: 700; font-size: 1.25rem; color: var(--neutral-0);
  margin-right: auto;
  display: flex; align-items: center; gap: var(--space-2);
}
.site-header__logo img { border-radius: var(--radius-sm); }
.site-nav { display: none; }
.site-nav__list {
  display: flex; align-items: center; gap: var(--space-4);
  list-style: none; margin: 0; padding: 0;
}
.site-nav__item { position: relative; }
.site-nav__item > a { color: var(--neutral-0); font-weight: 500; }
.site-nav__item > a:hover, .site-nav__item > a:focus-visible { color: var(--gold-500); }
.site-nav__item.has-mega .mega-menu {
  display: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--navy-800); border: 1px solid var(--navy-700);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-3); min-width: 260px;
  flex-direction: column; gap: var(--space-2);
  z-index: 110;
}
.site-nav__item.has-mega .mega-menu a { display: block; color: var(--neutral-100); font-weight: 400; padding: 4px 0; }
.site-nav__item.has-mega .mega-menu a:hover { color: var(--gold-500); }
.mega-menu__tagline { display: block; font-size: var(--fs-caption); font-weight: 400; color: var(--neutral-400); }
.site-nav__item.has-mega:hover .mega-menu,
.site-nav__item.has-mega:focus-within .mega-menu { display: flex; }

/* Solutions mega-menu: one column per pillar (real hierarchy from
   pillar_slug, capped at 6 services + "View all" per column — see
   nav.php), not a flat list of 80+ links. */
.site-nav__item.has-mega .mega-menu--solutions {
  flex-direction: row; flex-wrap: wrap;
  width: max-content; max-width: min(90vw, 920px);
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
}
.mega-menu__col { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; }
.mega-menu__col-heading {
  display: flex !important; align-items: center; gap: var(--space-2);
  font-weight: 600 !important; color: var(--neutral-0) !important;
  padding-bottom: var(--space-2) !important;
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--navy-700);
}
.mega-menu__col-item { font-size: var(--fs-small); }
.mega-menu__col-viewall {
  color: var(--gold-500) !important; font-weight: 500 !important;
  font-size: var(--fs-small); margin-top: var(--space-2);
}

/* Industries mega-menu: icon-badge grid instead of a plain link list —
   6 real industries (post-D4 consolidation), 3 columns on desktop. */
.site-nav__item.has-mega .mega-menu--icon-grid {
  flex-direction: row; flex-wrap: wrap;
  width: max-content; max-width: min(90vw, 640px);
  gap: var(--space-2);
  padding: var(--space-3);
}
.mega-menu__icon-item {
  flex: 1 1 180px;
  display: flex !important; align-items: center; gap: var(--space-3);
  padding: var(--space-2) !important;
  border-radius: var(--radius-md);
}
.mega-menu__icon-item:hover { background: var(--navy-700); }
/* The icon SVGs already carry their own rounded gold-tint badge
   background (see assets/images/icon-industry-*.svg) — this just sizes
   and aligns them, no second wrapper badge on top. */
.mega-menu__icon-badge { flex-shrink: 0; display: flex; }
.mega-menu__icon-badge img { width: 36px; height: 36px; }
.site-header__cta { display: none; }
.site-header__menu-toggle {
  background: none; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-sm);
  width: 44px; height: 44px; cursor: pointer; position: relative;
}
.site-header__menu-toggle::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 50%;
  border-top: 2px solid var(--neutral-0);
  box-shadow: 0 -6px var(--neutral-0), 0 6px var(--neutral-0);
}
.mobile-menu {
  display: none;
  flex-direction: column; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-4);
  background: var(--navy-900);
  border-top: 1px solid rgba(255,255,255,.15);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a { color: var(--neutral-0); }
.mobile-menu a:hover { color: var(--gold-500); }
.mobile-menu .btn { align-self: flex-start; }

@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .site-header__menu-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* ===== Hero =====
   Navy chrome (re-theme, Jul 2026): every hero section — home page and the
   shared content-page template alike — is a navy-900 surface now. Rather
   than re-color every child selector, --text-primary/--text-secondary/
   --border are overridden locally on .hero; h1/p/.btn-secondary already
   read those tokens, so they flip to light-on-navy automatically. This is
   safe to do here (unlike on .site-header) because nothing inside a hero
   section — no mega-menu, no nested light "card" — depends on those
   tokens staying at their light-mode values. */
.hero {
  padding-block: var(--space-7) var(--space-6);
  background: var(--navy-900);
  /* .hero also carries .container (max-width: var(--content-max); see
     base.css), so a plain `background` here would paint only a centered
     1280px navy block with white gutters on wider viewports — visibly
     inconsistent with the full-bleed .site-header/.site-footer. Fake
     full-bleed on the same element without touching the container/flex
     layout: box-shadow paints a huge navy square clipped back to the
     element's own box by clip-path. */
  box-shadow: 0 0 0 100vmax var(--navy-900);
  clip-path: inset(0 -100vmax);
  --text-primary: var(--neutral-0);
  --text-secondary: rgba(255,255,255,.75);
  --border: rgba(255,255,255,.35);
}
.hero__icon { margin-bottom: var(--space-4); }
.hero h1 { margin-bottom: var(--space-3); max-width: 20ch; }
.hero p { max-width: 60ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.hero--split {
  display: flex; flex-direction: column; gap: var(--space-6); align-items: center;
}
.hero__illustration { display: block; width: 100%; height: auto; max-width: 420px; margin-inline: auto; }
.hero__illustration--photo {
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.12);
  object-fit: cover;
  aspect-ratio: 3 / 2;
}
@media (min-width: 1024px) {
  .hero--split { flex-direction: row; align-items: center; gap: var(--space-7); }
  .hero--split > div { flex: 1.1; }
  .hero__illustration { flex: 0.9; max-width: 480px; margin-inline: 0; }
}

/* Card images (solution pillar icons) */
.card img { margin-bottom: var(--space-3); }

/* ===== Stats bar ===== */
/* Sits directly under the navy hero, slightly overlapping it, like a
   raised card — the pattern from the reference mockups. */
.stats-bar { margin-top: calc(-1 * var(--space-6)); position: relative; z-index: 5; }
.stats-bar__inner {
  background: var(--bg); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  padding: var(--space-5) var(--space-4);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
  text-align: center;
}
.stat__number { font-family: var(--font-mono); font-size: var(--fs-h2); font-weight: 700; color: var(--navy-900); }
.stat__suffix { font-family: var(--font-mono); font-size: var(--fs-h2); font-weight: 700; color: var(--gold-600); }
.stat p { margin: 0; font-size: var(--fs-small); color: var(--text-secondary); }
@media (min-width: 768px) { .stats-bar__inner { grid-template-columns: repeat(5, 1fr); } }

/* ===== Technologies row ===== */
.tech-row__label { text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-700); margin-bottom: var(--space-2); font-size: var(--fs-small); font-weight: 600; }
.tech-row__heading { margin-bottom: var(--space-2); }
.tech-row__intro { color: var(--text-secondary); max-width: 62ch; margin-bottom: var(--space-5); }

/* Each logo sits in its own fixed-white chip regardless of site theme —
   the SVGs are hand-drawn on the assumption of a light background (dark
   wordmark text), so a dark chip would make them unreadable in dark mode
   rather than just less pretty. */
.tech-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--neutral-0); border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  text-decoration: none;
  transition: transform var(--duration-default) var(--ease-out),
              box-shadow var(--duration-default) var(--ease-out),
              border-color var(--duration-default) var(--ease-out);
}
.tech-chip:hover, .tech-chip:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--neutral-300); }
.tech-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding-block: var(--space-3);
}
.tech-row img { height: 32px; width: auto; display: block; }
.tech-row-groups {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.tech-row-group {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.tech-row-group__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.tech-row-group__label { font-size: var(--fs-caption); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.tech-row-group__count {
  font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 600;
  color: var(--accent-700); background: var(--gold-100); border-radius: var(--radius-full);
  min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  padding-inline: var(--space-2);
}
@media (min-width: 1024px) {
  /* Marketing & Ads and Cloud carry more logos than Security or Social
     Listening — let them claim two columns instead of forcing every card
     to the same width and leaving thin categories with acres of empty
     white space. */
  .tech-row-groups { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; }
  .tech-row-group { grid-column: span 2; }
  .tech-row-group--wide { grid-column: span 4; }
}

/* ===== Trust bar ===== */
.trust-bar { grid-template-columns: 1fr !important; gap: var(--space-3); }
.trust-bar p {
  margin: 0; padding: var(--space-4) var(--space-3);
  background: var(--bg); border-top: 3px solid var(--accent-600);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  font-size: var(--fs-small); font-weight: 500; color: var(--text-primary); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.trust-bar p img { margin: 0; }
@media (min-width: 768px) { .trust-bar { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .trust-bar { grid-template-columns: repeat(4, 1fr) !important; } }

/* ===== FAQ (details/summary) ===== */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-3);
}
.faq-item summary {
  cursor: pointer; font-weight: 600; color: var(--text-primary);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* gold-700, not accent-600/gold-500: this glyph sits directly on a white
   background, where gold-500 measures only ~2:1 contrast. gold-700 clears
   the 3:1 minimum for meaningful UI graphics while still reading gold. */
.faq-item summary::after { content: "+"; font-size: 1.5rem; color: var(--gold-700); }
.faq-item[open] summary::after { content: "\2212"; }
/* Height is driven by JS (main.js) via inline style + transition, since
   details/summary's native open/close is an instant display toggle with
   nothing to animate. .faq-item__panel is the JS animation target; without
   JS (or with prefers-reduced-motion) native open/close still works fine —
   this is a progressive enhancement, not a requirement. */
.faq-item__panel { overflow: hidden; transition: height var(--duration-default) var(--ease-out); }
.faq-item__panel p { margin-top: var(--space-2); }

/* ===== Process cards ===== */
/* Replaces the old vertical .process-timeline list with a horizontal row
   of numbered cards — same information, denser and more scannable at a
   glance. Alternating tints and a staggered vertical offset (desktop only)
   give it visual rhythm without inventing an off-brand color palette: the
   4 tints below all come from the existing navy/gold/neutral tokens, not
   new colors. */
.process-cards { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-4); }
.process-card {
  flex: 1 1 200px;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
}
.process-card__number {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--navy-900); color: var(--neutral-0);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-h4);
  margin-bottom: var(--space-4);
}
.process-card__title { color: var(--navy-900); margin-bottom: var(--space-2); }
.process-card p { color: var(--text-secondary); font-size: var(--fs-small); margin: 0; }
.process-card:nth-child(4n+1) { background: var(--gold-100); }
.process-card:nth-child(4n+2) { background: var(--navy-100); }
.process-card:nth-child(4n+3) { background: var(--neutral-100); }
.process-card:nth-child(4n+4) { background: var(--surface); border: 1px solid var(--border); }
@media (min-width: 1024px) {
  .process-cards { align-items: flex-start; }
  .process-card:nth-child(even) { margin-top: var(--space-6); }
}

/* ===== Section rhythm ===== */
/* Flat, all-white pages read unfinished — alternate a subtle tint so
   sections have visual rhythm without needing a dividing line. */
main > .section:nth-of-type(even) { background: var(--surface); }
main > .section { position: relative; }

/* ===== Card depth ===== */
/* --shadow-sm alone (1px, 6% opacity) reads as barely-there. Give cards
   real presence and a lift on hover/focus so the grid feels alive. */
.card {
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-default) var(--ease-out),
              box-shadow var(--duration-default) var(--ease-out);
}
.card:hover, .card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
a.card { text-decoration: none; }

/* ===== Bento grid (Six Systems) ===== */
/* Descriptions stay visible at all times, not hover-revealed — a
   hover-only reveal has no equivalent on touch devices and hides content
   from keyboard users, which fails the accessibility bar this build holds
   everywhere else. The "bento" feel comes from asymmetric sizing only. */
.bento {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.bento__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-default) var(--ease-out),
              box-shadow var(--duration-default) var(--ease-out);
}
.bento__card:hover, .bento__card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.bento__card img { margin-bottom: var(--space-3); }
.bento__card h3 { margin-bottom: var(--space-2); }
.bento__card p { color: var(--text-secondary); font-size: var(--fs-body-sm); }
.bento__card-services { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.bento__card-services li { font-size: var(--fs-body-sm); color: var(--text-secondary); padding-left: var(--space-4); position: relative; }
.bento__card-services li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500);
}
.bento__card-illustration { display: block; width: 100%; height: auto; max-width: 280px; margin: var(--space-4) auto 0 0; }
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; grid-auto-flow: dense; }
  .bento__card { grid-column: span 2; }
  /* Content-driven now (icon, heading, description, service list,
     illustration), so top-aligned rather than centered — the earlier
     `justify-content: center` on a short 2-row-span card was the direct
     cause of the large empty gap flagged during visual QA. */
  .bento__card--lg { grid-column: span 3; grid-row: span 2; justify-content: flex-start; }
  .bento__card--lg img:not(.bento__card-illustration) { width: 64px; height: 64px; }
  .bento__card--lg h3 { font-size: var(--fs-h3); }
  .bento__card--lg .bento__card-illustration { margin-top: auto; }
}

/* ===== Industries preview (home) ===== */
.industry-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  text-decoration: none; color: inherit;
}
.industry-card__photo { display: block; width: 100%; height: 200px; object-fit: cover; }
.industry-card h3 { padding-inline: var(--space-4); margin-top: var(--space-4); margin-bottom: var(--space-2); }
.industry-card p { padding-inline: var(--space-4); margin-bottom: var(--space-4); color: var(--text-secondary); font-size: var(--fs-body-sm); }

/* ===== Contact page ===== */
/* Contact info sits above the form on mobile (source order) and beside it
   on desktop — a visitor who wants to call shouldn't have to scroll past
   the form to find a phone number. */
.contact-layout { display: grid; gap: var(--space-6); }
.contact-info__details { margin-top: var(--space-4); }
.contact-info__details p { margin-bottom: var(--space-2); font-weight: 600; }
.contact-info__details a { color: var(--link); }
@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-8); }
}

/* ===== CTA banner ===== */
.cta-banner {
  text-align: center; background: var(--surface);
  border-radius: var(--radius-xl); padding-block: var(--space-6);
}
.cta-banner .btn { margin-top: var(--space-3); }

/* ===== Problem/solution blocks =====
   Two-column split (text + a small supporting illustration), reusing the
   same responsive pattern as .hero--split rather than a new system.
   Below 1024px the visual stacks under the text, same as the hero does. */
.problem-block { display: flex; flex-direction: column; gap: var(--space-5); }
.problem-block__text { min-width: 0; }
.problem-block__text img { margin-bottom: var(--space-4); }
.problem-block__visual { display: block; width: 100%; height: auto; max-width: 400px; margin-inline: auto; }
@media (min-width: 1024px) {
  .problem-block--split { flex-direction: row; align-items: center; gap: var(--space-7); }
  .problem-block--split .problem-block__text { flex: 1.1; }
  .problem-block--split .problem-block__visual { flex: 0.9; margin-inline: 0; }
  /* Text stays first in source order (screen readers/SEO read it first
     regardless of layout); only the visual's on-screen position flips. */
  .problem-block--reverse .problem-block__visual { order: -1; }
}

/* ===== Feature grid (features/benefits) =====
   The generic .grid's minmax(240px,1fr) reads as a wall of narrow, cramped
   boxes once there are 4+ short one-line items — real feedback, compared
   directly against a reference site's wider, more generous card grid.
   feature-grid caps at 3 columns and widens the minimum so each card has
   real breathing room instead of shrinking to fit as many as possible
   per row. */
.feature-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Tech split (icon grid + heading/copy/stats) =====
   Technology & Engineering pillar only. Stats reuse the same real,
   founder-confirmed figures as the home stats bar — no page-specific
   numbers invented. */
.tech-split {
  display: grid; gap: var(--space-6);
  align-items: center;
  background: var(--surface); border-radius: var(--radius-xl);
  padding: var(--space-6);
}
@media (min-width: 900px) { .tech-split { grid-template-columns: 1fr 1fr; } }
.tech-split__icons { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.tech-split__icon-box {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-4); display: flex; align-items: center; gap: var(--space-3);
  font-weight: 600; font-size: var(--fs-small);
}
.tech-split__icon-box img { flex-shrink: 0; }
.tech-split__stats { display: flex; gap: var(--space-5); margin-top: var(--space-5); flex-wrap: wrap; }
.tech-split__stats strong { display: block; font-size: var(--fs-h3); color: var(--navy-900); }
.tech-split__stats span { font-size: var(--fs-caption); color: var(--text-secondary); }

/* ===== Tech stack tabs =====
   Frontend/Backend/Mobile/Cloud & DevOps/Databases — every logo shown is
   a founder-confirmed real capability, not a generic agency tech list. */
.tech-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); }
.tech-tabs__tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-2); font-weight: 600; font-size: var(--fs-small);
  color: var(--text-secondary); cursor: pointer;
}
.tech-tabs__tab.is-active { color: var(--navy-900); border-bottom-color: var(--gold-500); }
.tech-tabs__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-5);
}
.tech-tabs__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.tech-tabs__item img { height: 32px; width: auto; }
.tech-tabs__item span { font-size: var(--fs-small); color: var(--text-secondary); }

/* ===== Expertise grid (pillar-page service categories) =====
   A richer card than .feature-grid — heading + description + bullet list
   per category, grouping a pillar's real services (e.g. "Paid
   Advertising" = Google/Meta/LinkedIn/YouTube Ads) rather than listing
   every service flat. One card gets the highlight treatment to match the
   reference layout's visual rhythm. */
.expertise-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
@media (min-width: 1024px) { .expertise-grid { grid-template-columns: repeat(3, 1fr); } }
.expertise-card h3 { margin-bottom: var(--space-2); }
.expertise-card p { color: var(--text-secondary); font-size: var(--fs-small); }
.expertise-card ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.expertise-card li {
  font-size: var(--fs-small); padding: 6px 0 6px 24px; position: relative;
}
.expertise-card li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--gold-500);
}
.expertise-card--highlight { background: var(--navy-100); border-color: transparent; }
.expertise-card--highlight h3 { color: var(--navy-900); }

/* ===== List cards (features/benefits: icon + text row, not plain text) ===== */
.list-card {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5);
}
.list-card img { flex-shrink: 0; margin-bottom: 0; width: 40px; height: 40px; }
.list-card span { font-weight: 500; font-size: var(--fs-body); }

/* ===== Rich content (sanitized admin HTML: privacy/terms/blog posts) ===== */
.rich-content h3 { margin-top: var(--space-5); }
.rich-content ul, .rich-content ol { padding-left: 1.25em; color: var(--text-secondary); }
.rich-content li { margin-bottom: var(--space-2); }

/* ===== Footer =====
   Navy chrome (re-theme, Jul 2026): deepest navy-950, same local-token
   trick as .hero for anything already reading --text-primary/--text-
   secondary/--border. The one gap that trick doesn't cover is the bare
   `<a>` tags in .site-footer__brand (phone/email links) — those fall back
   to base.css's generic `a` rule, which is navy-on-white and would be
   invisible here, so they get an explicit override below. */
.site-footer {
  background: var(--navy-950);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: var(--space-7) var(--space-4);
  --text-primary: var(--neutral-0);
  --text-secondary: rgba(255,255,255,.75);
  --border: rgba(255,255,255,.12);
}
.site-footer .grid { grid-template-columns: 1fr !important; }
.site-footer__logo { font-weight: 700; font-size: 1.125rem; color: var(--neutral-0); }
/* A <p>, not a heading — the parent <nav aria-label="..."> already gives
   this an equivalent accessible name via ARIA landmark labeling, so no
   heading level is needed. A heading here caused a real Lighthouse
   heading-order failure on /contact/, which (unlike most pages) has no h2
   before the footer — h1 straight to whatever level the footer used would
   always skip a level on that specific page regardless of which level was
   picked, since the "right" level depends on the page above it. */
.site-footer__col-heading { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: var(--space-2); font-weight: 600; }
.site-footer__col a { display: inline-block; color: var(--text-secondary); font-size: var(--fs-small); margin-bottom: var(--space-2); }
.site-footer__copyright { font-size: var(--fs-caption); color: var(--text-secondary); margin-top: var(--space-4); }
.site-footer a { color: rgba(255,255,255,.85); }
.site-footer a:hover, .site-footer__col a:hover { color: var(--gold-500); }
@media (min-width: 768px) { .site-footer .grid { grid-template-columns: 2fr 1fr 1fr 1fr !important; } }

/* ===== Focus ring on navy chrome =====
   base.css sets a navy-900 focus ring, correct for the light body
   sections. Inside the navy header/hero/footer that same navy ring would
   be invisible against its own background, so swap it for gold there —
   gold-500 on navy-900 measures ~8.65:1, easily clearing the 3:1 minimum
   for UI-component focus indicators. */
.site-header :focus-visible, .hero :focus-visible, .site-footer :focus-visible {
  outline-color: var(--gold-500);
}

/* ===== Forms ===== */
/* Never written until now — components/form-contact.php existed with zero
   matching CSS, so labels/inputs/honeypot all rendered as bare unstyled
   browser defaults inline on one line (real bug, hit in production). */
.ezo-form { max-width: 480px; margin-top: var(--space-4); }
.ezo-form__hp {
  /* Visually hidden, not just aria-hidden (that only affects screen
     readers) — a sighted-user honeypot field is both unprofessional and
     a weaker trap, since unsophisticated bots may still see and fill it. */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.ezo-form__field {
  display: block; margin-bottom: var(--space-4);
  font-weight: 600; font-size: var(--fs-small); color: var(--text-primary);
}
.ezo-form__field input, .ezo-form__field textarea, .ezo-form__field select {
  display: block; width: 100%; margin-top: var(--space-2);
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg); color: var(--text-primary);
  min-height: 44px;
}
.ezo-form__field textarea { min-height: 120px; resize: vertical; }
.ezo-form__field input:focus, .ezo-form__field textarea:focus, .ezo-form__field select:focus {
  outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: transparent;
}
.ezo-form .btn { margin-top: var(--space-2); }
.ezo-form__status { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--success-500); }
.ezo-form__status.is-error { color: var(--error-500); }

/* ===== WhatsApp floating button ===== */
/* a.whatsapp-fab, not just .whatsapp-fab — this link lives inside
   .site-footer, and ".site-footer a { color: rgba(255,255,255,.85) }"
   (line 312) has higher specificity than a single class alone, so it was
   silently winning and rendering white-at-85%-opacity on the green fill:
   measured 4.2:1 by Lighthouse, just under the 4.5:1 AA minimum, even
   after darkening --success-500. The element selector brings this rule to
   equal specificity, and source order (this comes later) settles the tie. */
a.whatsapp-fab {
  position: fixed; bottom: var(--space-4); right: var(--space-4); z-index: 200;
  background: var(--success-500); color: var(--neutral-0);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg); font-weight: 600; font-size: var(--fs-small);
}
a.whatsapp-fab:hover { color: var(--neutral-0); transform: translateY(-2px); }
/* Room for .sticky-cta below 1024px so the two floating elements don't stack. */
@media (max-width: 1023px) { .whatsapp-fab { bottom: calc(64px + var(--space-4)); } }

/* ===== Mobile sticky CTA ===== */
.sticky-cta {
  display: none;
}
@media (max-width: 1023px) {
  .sticky-cta {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
    padding: var(--space-2) var(--space-3);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }
  .sticky-cta .btn { width: 100%; }
}

/* ===== Contact slide-out panel ===== */
.contact-panel {
  position: fixed; inset: 0; z-index: 300;
  display: flex; justify-content: flex-end;
  visibility: hidden;
}
.contact-panel[hidden] { display: none; }
.contact-panel.is-open { visibility: visible; }
.contact-panel__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 26, 51, 0.6);
  opacity: 0;
  transition: opacity var(--duration-default) var(--ease-out);
}
.contact-panel.is-open .contact-panel__backdrop { opacity: 1; }
.contact-panel__sheet {
  position: relative;
  width: min(440px, 100%);
  height: 100%;
  background: var(--surface);
  padding: var(--space-6) var(--space-5);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--duration-default) var(--ease-out);
}
.contact-panel.is-open .contact-panel__sheet { transform: translateX(0); }
.contact-panel__sheet h2 { margin-bottom: var(--space-2); padding-right: var(--space-6); }
.contact-panel__sheet > p { color: var(--text-secondary); margin-bottom: var(--space-4); }
.contact-panel__close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  min-width: 44px; min-height: 44px;
  background: none; border: none; cursor: pointer;
  font-size: 1.75rem; line-height: 1; color: var(--text-secondary);
}
.contact-panel__close:hover, .contact-panel__close:focus-visible { color: var(--text-primary); }
body.no-scroll { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .contact-panel__backdrop, .contact-panel__sheet { transition: none; }
}

/* ===== Cards grid tweaks ===== */
.card h3 { margin-bottom: var(--space-2); }