/* ============================================================================
   ig-theme-oxford.css — "Foundry" theme (ink + crimson + icy wash)
   (filename kept as-is to avoid touching every <link>/asset() reference to it;
   contents below are Foundry, not Oxford Blue.)
   ----------------------------------------------------------------------------
   Scope: the homepage, plus the "Request an AI Audit" page. Every override
   rule below is prefixed with `body.home-page` (the class the homepage
   layout sets via @section('body_class','home-page') in
   resources/views/index.blade.php) — no other page carries that class, so
   those rules can't leak elsewhere. The `--hf-*` custom-property block just
   below is the one exception: it's also declared under
   `body.audit-request-page` (set by resources/views/audit/request.blade.php)
   so that page can read the same tokens via var(--hf-*) in its own inline
   <style>, without duplicating hex values. audit/request.blade.php also
   links this file directly for that reason.

   EXCEPTION — the footer partial (resources/views/layout/partials/footer.blade.php)
   is a shared, site-wide component, and the Foundry theme is intended to become
   site-wide eventually. Rather than duplicate colors here behind another
   scoped override, the footer's own inline <style> block (and the pre-footer
   CTA band's inline styles in resources/views/index.blade.php, .idh-final)
   were recolored directly to Foundry at the source — those styles are
   unscoped already (no body.home-page gate ever existed on the footer), so
   editing them in place makes the footer Foundry-themed on every page
   without adding any rules to this file. The one change made here for that
   reason: `.idh-final__in` was removed from the shared ink-forcing selector
   group below (rule 8/9), since the pre-footer band now sets its own
   card-dark background directly.

   This file only overrides colors/borders (and, per the pill-radius
   discipline below, two button radii) on top of the existing homepage
   styles (defined inline in resources/views/index.blade.php and, for the
   shared site header, in resources/views/layout/partials/header-new.blade.php).
   It does not touch layout, spacing, or markup — see index.blade.php and
   header-new.blade.php for structure, both of which are left untouched by
   this file. vendor/main.css is never edited or overridden here.
   ============================================================================ */

/* Tokens are global (unscoped) on purpose — every public page links this file and
   consumes the same --hf-* variables, so there is exactly one source of truth instead
   of a per-page-body-class allowlist that has to be remembered and extended every time
   a new page joins the theme. The rest of this file still scopes its *rule* selectors
   (e.g. body.home-page .idh-hero) where those class names are genuinely homepage-only
   markup, but the tokens themselves apply everywhere. */
:root {
  --hf-ink:          #101820; /* headings, footer bg, decorative fills — NOT button fills anymore */
  --hf-ink-hover:    #232B33;
  --hf-action:        #176B8A; /* deep petrol teal-blue — the ONE primary-button fill, site-wide (hbsfoundry.org reference) */
  --hf-action-hover:  #125A75;
  --hf-action-active: #0E4A61;
  --hf-btn-radius:    8px;   /* moderate rounding — buttons are NOT pills anymore */
  --hf-btn-h:          46px; /* primary/secondary button height */
  --hf-btn-h-sm:       40px; /* compact contexts, e.g. navbar */
  /* kept as aliases so any surviving var(--hf-teal) usage resolves to the
     current action color instead of the old, retired teal-green */
  --hf-teal:         var(--hf-action);
  --hf-teal-hover:   var(--hf-action-hover);
  --hf-crimson:      #A51C30; /* accent word, links, small icons, badges */
  --hf-crimson-hover:#8A1727;
  --hf-crimson-tint: #FBEBED; /* badge/pill backgrounds */
  --hf-body:         #3D444C; /* body text */
  --hf-muted:        #6A7178; /* secondary text */
  --hf-bg:           #FFFFFF;
  --hf-bg-wash:      #EDF2F5; /* hero + alternating section backgrounds */
  --hf-card-dark:        #122430; /* dark feature/testimonial cards */
  --hf-card-dark-border: #1E3442;
  --hf-card-dark-muted:  #93A3AE;
  --hf-border:       #E1E7EB;
  --hf-focus-ring:   rgba(16,24,32,.30);

  --hf-risk-low:      #2F6B4F; --hf-risk-low-bg:  #EBF2ED;
  --hf-risk-med:      #B45309; --hf-risk-med-bg:  #FFFBEB;
  --hf-risk-high:     #A51C30; --hf-risk-high-bg: #FBEBED;

  /* section rhythm — one consistent vertical gap for every section site-wide,
     replacing the ad-hoc per-section padding values that had drifted apart */
  --hf-section-gap: 112px;
}
@media (max-width: 1024px) {
  :root { --hf-section-gap: 72px; }
}
@media (max-width: 640px) {
  :root { --hf-section-gap: 56px; }
}

/* Crimson discipline: crimson (--hf-crimson / --hf-crimson-hover / --hf-crimson-tint)
   never fills large areas or standard buttons — it's reserved for accents, links, small
   icons, badges, and risk-HIGH. Primary action buttons are solid --hf-ink site-wide,
   including the footer newsletter arrow and every page's primary CTA.
   --hf-ink is also used for headings, decorative icon-tile fills, and the footer
   background. Everywhere that used to be gold (badges, tags, micro-accents) maps to
   --hf-crimson / --hf-crimson-hover / --hf-crimson-tint instead; everywhere that used
   to be blue (icon fills, borders, decorative gradients, non-CTA fills) maps to
   --hf-ink / --hf-ink-hover, except text links, which map to --hf-crimson. */


/* ============================================================================
   1. NAVBAR (shared header partial, overridden here for home only)
   ============================================================================ */
body.home-page .header.header-three.header-solid,
body.home-page .header.header-three.header-solid.sticky,
body.home-page .header.header-three.header-solid.sticky2 {
  background: var(--hf-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--hf-border) !important;
  box-shadow: none !important;
}
body.home-page .idh-brand__word { color: var(--hf-ink) !important; }
body.home-page .header.header-three.header-solid .main-nav li a,
body.home-page .header.header-three.header-solid.sticky .main-nav li a,
body.home-page .header.header-three.header-solid .header-navbar-rht li a,
body.home-page .header.header-three.header-solid .header-navbar-rht li span,
body.home-page .header.header-three.header-solid.sticky .header-navbar-rht li a,
body.home-page .header.header-three.header-solid.sticky .header-navbar-rht li span,
body.home-page .header.header-three.header-solid .header-navbar-rht li.login a.log-btn,
body.home-page .header.header-three.header-solid .idh-mtoggle span,
body.home-page .header.header-three.header-solid .explore-menu-container .menuhead-button,
body.home-page .header.header-three.header-solid .explore-menu-container .menuhead-button span,
body.home-page .header.header-three.header-solid .explore-menu-container .menuhead-button i {
  color: var(--hf-muted) !important;
}
body.home-page .header.header-three.header-solid .idh-mtoggle span { background: var(--hf-muted) !important; }
body.home-page .header.header-three.header-solid .main-nav > li.active > a,
body.home-page .header.header-three.header-solid .main-nav li a:hover,
body.home-page .header.header-three.header-solid.sticky .main-nav li a:hover,
body.home-page .header.header-three.header-solid .header-navbar-rht li a.log-btn:hover,
body.home-page .header.header-three.header-solid .explore-menu-container .menuhead-button:hover span,
body.home-page .header.header-three.header-solid .explore-menu-container .menuhead-button:hover i {
  color: var(--hf-ink) !important;
}
body.home-page .header.header-three.header-solid .main-nav > li > a::after {
  background: var(--hf-ink) !important;
}
/* "Request an Audit" — the one solid button in the header. Solid teal-action fill,
   white text, moderate radius (NOT a pill). Text color set
   explicitly here: the broad muted-text rule above (line ~90) also matches this link
   (it's still `li a` inside .header-navbar-rht) and was winning the cascade, leaving
   --hf-muted (grey) text on the button — unreadable. Scoped to both the plain and
   .sticky/.idh-stuck header states so it holds regardless of scroll position. */
body.home-page .header.header-three.header-solid .header-navbar-rht li.idh-navcta-item a.idh-navcta,
body.home-page .header.header-three.header-solid.sticky .header-navbar-rht li.idh-navcta-item a.idh-navcta,
body.home-page .header.header-three.header-solid.idh-stuck .header-navbar-rht li.idh-navcta-item a.idh-navcta {
  background: var(--hf-action) !important;
  color: #fff !important;
  border-radius: var(--hf-btn-radius) !important;
  height: var(--hf-btn-h-sm) !important;
  box-shadow: none !important;
}
body.home-page .header.header-three.header-solid .header-navbar-rht li.idh-navcta-item a.idh-navcta:hover,
body.home-page .header.header-three.header-solid.sticky .header-navbar-rht li.idh-navcta-item a.idh-navcta:hover,
body.home-page .header.header-three.header-solid.idh-stuck .header-navbar-rht li.idh-navcta-item a.idh-navcta:hover {
  background: var(--hf-action-hover) !important;
  color: #fff !important;
  filter: none !important;
  box-shadow: none !important;
}
/* mobile dropdown CTA (same button, mobile menu) */
body.home-page .idh-mmenu a.idh-mmenu__cta { background: var(--hf-action) !important; border-radius: var(--hf-btn-radius) !important; }

/* Floating scroll-to-top button — site-wide default is orange (#E65425, style.css);
   recolored to the site's one action/button color instead, matching every other
   primary CTA. */
body.home-page .scroll-top {
  background: var(--hf-action) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(23,107,138,.34) !important;
}
body.home-page .scroll-top:hover { background: var(--hf-action-hover) !important; }
/* the up-arrow is a hardcoded-white .svg <img> (not an inline SVG/icon font) — it's
   already white, which reads correctly against the teal fill, so no filter needed. */
body.home-page .scroll-top img { filter: none; }


/* ============================================================================
   2 & 6. HERO + FREE SELF-CHECK — eyebrow badge, headline, subtext, CTAs
   ============================================================================ */
/* the hero's own background wash — flat --hf-bg-wash, same token every alternating
   section on every page uses (see .idh-alt-blue in index.blade.php); no dot-grid
   texture, no separate gradient/shade for the hero. */
body.home-page .idh-hero {
  background-color: var(--hf-bg-wash) !important;
  background-image: none !important;
}

/* eyebrow — reused for the hero AND the "Free self-check" heading. Reference site uses
   bare letter-spaced crimson text for eyebrows, not a tinted pill badge — dropped the
   background/padding/radius that made this read as a badge. */
body.home-page .idh-hero__eyebrow {
  color: var(--hf-crimson) !important;
  background: none !important;
  border-radius: 0;
  padding: 0;
  letter-spacing: .4px !important;
}

body.home-page .idh-hero h1 { color: var(--hf-ink) !important; }
body.home-page .idh-hero h1 .hl { color: var(--hf-crimson) !important; } /* the one accent word, e.g. "stands" */
body.home-page .idh-hero__sub { color: var(--hf-muted) !important; }

/* primary / secondary CTA — scoped .idh-hero__cta .idh-btn already overrides
   the shared .idh-btn in this file's source component; recolor those here.
   Primary action buttons are solid teal-action fill, moderate radius, no pill,
   no shadow at rest (hbsfoundry.org reference). .idh-hcard__seal is a
   decorative badge, not a clickable CTA, so it stays ink. */
body.home-page .idh-hcard__seal {
  background: var(--hf-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.home-page .idh-hero__cta .idh-btn--primary,
body.home-page .idh-audm__btn--primary,
body.home-page .idh-btn--primary {
  background: var(--hf-action) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.home-page .idh-hero__cta .idh-btn--primary:hover,
body.home-page .idh-btn--primary:hover {
  background: var(--hf-action-hover) !important;
}
body.home-page .idh-hero__cta .idh-btn--primary:active,
body.home-page .idh-btn--primary:active {
  background: var(--hf-action-active) !important;
}
/* secondary — white fill, teal text, hairline border (reference "Log In" style) */
body.home-page .idh-hero__cta .idh-btn--outline {
  background: #fff !important;
  color: var(--hf-action) !important;
  border-color: #D5DEE3 !important;
}
body.home-page .idh-hero__cta .idh-btn--outline:hover,
body.home-page .idh-btn--outline:hover {
  background: #F2F7F9 !important;
  color: var(--hf-action) !important;
  border-color: #B9C9D1 !important;
}
body.home-page .idh-btn--outline {
  background: #fff !important;
  color: var(--hf-action) !important;
  border-color: #D5DEE3 !important;
  box-shadow: none !important;
}
/* ghost-on-dark — white fill, ink text; use ONLY on --hf-card-dark backgrounds */
body.home-page .idh-btn--light { color: var(--hf-ink) !important; }
body.home-page .idh-btn--light:hover { background: #E9EEF2 !important; color: var(--hf-ink) !important; }
/* outlined-on-dark variant, for secondary CTAs sitting on --hf-card-dark bands
   (closing CTA band, proof-of-work strip) — the plain .idh-btn--outline rule above is
   always white-on-light and wins over inline overrides via !important, so this needs its
   own class rather than an inline color tweak. */
body.home-page .idh-btn--outline-light {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.4) !important;
  box-shadow: none !important;
}
body.home-page .idh-btn--outline-light:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border-color: #fff !important;
}
/* moderate radius + normalized height for the two hero CTAs (base .idh-hero__cta .idh-btn
   is 2px, near-square) — hbsfoundry.org reference calls for an 8px radius, NOT a pill. */
body.home-page .idh-hero__cta .idh-btn { border-radius: var(--hf-btn-radius) !important; height: var(--hf-btn-h) !important; }

/* hero icon-cluster graphic — was tuned around the blue CTA color; recolored to ink so
   it stays consistent with the new primary-action color (same rings/nodes, colors only) */
body.home-page .idh-hg-ring--1,
body.home-page .idh-hg-ring--3 { border-color: rgba(16,24,32,.14) !important; }
body.home-page .idh-hg-ring--2 { border-color: rgba(16,24,32,.10) !important; }
body.home-page .idh-hg-center {
  background: rgba(16,24,32,.08) !important;
  border-color: rgba(16,24,32,.30) !important;
}
body.home-page .idh-hg-center svg { stroke: var(--hf-ink) !important; }
body.home-page .idh-hg-center span { color: var(--hf-ink) !important; }
body.home-page .idh-hg-node__ico {
  background: #fff !important;
  border-color: var(--hf-border) !important;
  box-shadow: 0 6px 16px rgba(16,24,32,.10);
}
body.home-page .idh-hg-node__ico svg { stroke: var(--hf-ink) !important; }
body.home-page .idh-hg-node__label { color: var(--hf-ink) !important; }


/* ============================================================================
   3. QUICK LOOKUP card
   ============================================================================ */
body.home-page .idh-bsearch,
body.home-page .idh-bsearch__bar,
body.home-page .idh-bsearch__results {
  border-color: var(--hf-border) !important;
}
body.home-page .idh-bsearch__label { color: var(--hf-ink) !important; }
body.home-page .idh-bsearch__bar:focus-within {
  border-color: var(--hf-ink) !important;
  box-shadow: 0 0 0 3px var(--hf-focus-ring) !important;
}
body.home-page .idh-bsearch__go { background: var(--hf-action) !important; border-radius: var(--hf-btn-radius) !important; }
body.home-page .idh-bsearch__go:hover { background: var(--hf-action-hover) !important; }
body.home-page .idh-bsearch__results a:hover {
  background: var(--hf-bg-wash) !important;
  color: var(--hf-ink) !important;
}
/* Popular pill chips */
body.home-page .idh-bsearch__pills a {
  color: var(--hf-crimson) !important;
  background: #fff !important;
  border-color: var(--hf-border) !important;
}
body.home-page .idh-bsearch__pills a:hover { background: var(--hf-bg-wash) !important; }


/* ============================================================================
   4. STATS BAR
   ============================================================================ */
body.home-page .idh-hero-statsbar,
body.home-page .idh-hero__proof,
body.home-page .idh-hero-statsbar__divider,
body.home-page .idh-proof-sep {
  border-color: var(--hf-border) !important;
  background-color: var(--hf-border); /* for the 1px divider elements */
}
body.home-page .idh-hero-statsbar,
body.home-page .idh-hero__proof { background: #fff !important; }
body.home-page .idh-proof-ico { background: var(--hf-bg-wash) !important; box-shadow: none !important; }
body.home-page .idh-proof-ico svg { stroke: var(--hf-crimson) !important; }
body.home-page .idh-proof-item b,
body.home-page .idh-hero__socialtxt b { color: var(--hf-ink) !important; }
body.home-page .idh-proof-item small,
body.home-page .idh-hero__socialtxt span { color: var(--hf-muted) !important; }


/* ============================================================================
   5. AI RISK SNAPSHOT card
   ============================================================================ */
body.home-page .idha-rc__title { color: var(--hf-ink) !important; }
/* "SAMPLE" / "Live" tag */
body.home-page .idha-rc__tag {
  background: var(--hf-crimson-tint) !important;
  color: var(--hf-crimson-hover) !important;
  border-color: transparent !important;
}
/* risk chips — semantic colors; HIGH is now crimson */
body.home-page .idha-rc em.low,
body.home-page .idha-rc__list em.low {
  background: var(--hf-risk-low-bg) !important;
  color: var(--hf-risk-low) !important;
}
body.home-page .idha-rc em.med,
body.home-page .idha-rc__list em.med {
  background: var(--hf-risk-med-bg) !important;
  color: var(--hf-risk-med) !important;
}
body.home-page .idha-rc em.high,
body.home-page .idha-rc__list em.high {
  background: var(--hf-risk-high-bg) !important;
  color: var(--hf-risk-high) !important;
}
body.home-page .idha-rc__list em {
  border-radius: 10px !important;
  padding: 2px 10px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}
/* "Overall exposure" value — deliberately NOT overridden here. Its color is
   set per-result (low/med/high) by inline styles: the static sample markup
   and the live-quiz JS color map in index.blade.php. A blanket !important
   override on #rcOverall would freeze it at "high" red even when the quiz
   computes low/medium, so those two sources were edited directly instead
   (colors only) to use the matching --hf-risk-* hex values. */
body.home-page .idha-rc__btn--solid {
  background: var(--hf-action) !important;
  color: #fff !important;
  border-radius: var(--hf-btn-radius) !important;
}
body.home-page #rcStart {
  background: var(--hf-action) !important;
  color: #fff !important;
  border-radius: var(--hf-btn-radius) !important;
  box-shadow: none !important;
  animation: none !important;
}
body.home-page #rcStart:hover { background: var(--hf-action-hover) !important; }
body.home-page .idha-rc__opts button:hover {
  background: var(--hf-bg-wash) !important;
  border-color: var(--hf-border) !important;
}


/* ============================================================================
   6 (cont'd). FREE SELF-CHECK section — heading + pill links
   ============================================================================ */
body.home-page .idh-snapshot__copy h2 { color: var(--hf-ink) !important; }
body.home-page .idh-snapshot__links a {
  color: var(--hf-crimson) !important;
  border-color: var(--hf-border) !important;
  background: #fff !important;
}
body.home-page .idh-snapshot__links a:hover {
  background: var(--hf-bg-wash) !important;
  border-color: var(--hf-border) !important;
}


/* ============================================================================
   7. Links elsewhere on the homepage — --hf-crimson so they read as links,
      not as the solid --hf-ink buttons. Underline on hover per the Foundry
      link spec (was color-only in the Oxford theme).
   ============================================================================ */
body.home-page .idh-pillar a,
body.home-page .idh-cc__job,
body.home-page .idh-pc__days,
body.home-page .idh-prod__card--a .idh-prod__tag,
body.home-page .idh-audm__trust-line a,
body.home-page .idh-audm-ok__inbox-h i,
body.home-page .idh-audm-ok__done:hover,
body.home-page .px-arr:hover {
  color: var(--hf-crimson) !important;
}
body.home-page .idh-pillar a:hover,
body.home-page .idh-cc__job:hover,
body.home-page .idh-audm__trust-line a:hover {
  color: var(--hf-crimson-hover) !important;
  text-decoration: underline;
}


/* ============================================================================
   8/9. Everything else on the homepage that was blue/gold — background
   gradients, icon fills, borders, badges, the request-audit modal, and
   legacy/unused components (kept in sync even though not currently rendered,
   so a full-file grep for the old Oxford hex turns up nothing).
   ============================================================================ */

/* generic gradient icon tiles / badges that used the blue gradient now use flat
   --hf-ink (a two-stop gradient reads as near-solid at these sizes, so flat ink
   keeps it simple). .idh-btn--primary is already set to ink by the primary-CTA
   rule above, so it's left out of this group to avoid a redundant duplicate rule. */
body.home-page .idh-hcard__av,
body.home-page .idh-scene__pic,
body.home-page .idh-card3d__av,
body.home-page .idh-step__n,
body.home-page .idh-pillar__ico,
body.home-page .idh-cc__photo,
body.home-page .idh-half--a,
body.home-page .idh-check__ico,
body.home-page .idh-prod__card--a .idh-prod__ico,
body.home-page .idh-cmp__col--good,
body.home-page .px-tag,
body.home-page .idh-audm-ok__badge,
body.home-page .idh-audm-ok__n {
  background: var(--hf-ink) !important;
  box-shadow: none !important;
}

/* plain-text section eyebrows (e.g. "WHY IDHARMA") — reference site style: bare
   letter-spaced crimson text, no background pill. */
body.home-page .idh-eyebrow { color: var(--hf-crimson) !important; }
body.home-page .idh-h2.c::after { background: var(--hf-crimson) !important; }
body.home-page .idh-h2 .hl { color: var(--hf-crimson) !important; }

/* borders / hairlines that were blue-tinted */
body.home-page .idh-step:not(:last-child)::after { border-top-color: var(--hf-border) !important; }
body.home-page .idh-pillar:hover { border-color: var(--hf-border) !important; box-shadow: 0 26px 56px rgba(16,24,32,.10) !important; }
body.home-page .idh-pillar:hover .idh-pillar__num { color: rgba(16,24,32,.13) !important; }
body.home-page .idh-hcard,
body.home-page .idh-hcard::before,
body.home-page .idh-scene,
body.home-page .idh-chip-float,
body.home-page .idh-check,
body.home-page .idh-prod__card,
body.home-page .idh-tier,
body.home-page .idh-expert,
body.home-page .idha-rc,
body.home-page .idha-rc__opts button {
  border-color: var(--hf-border) !important;
}
body.home-page .idh-hcard::before { background: linear-gradient(150deg,#fff,var(--hf-bg-wash)) !important; }
/* pricing cards: no colored top-border strips (reference cards are clean, flat --hf-border
   all round); hierarchy on the recommended tier comes from .idh-tier--featured's shadow only. */

/* tinted icon/tag backgrounds + their text (skill tags, tier/expert tags,
   snapshot pills, popular pills) — neutral wash tint, ink text */
body.home-page .idh-hcard__skills span,
body.home-page .idh-cc__skills span {
  background: var(--hf-bg-wash) !important;
  color: var(--hf-ink) !important;
}
body.home-page .idh-proof-ico,
body.home-page .idh-check__ico,
body.home-page .idh-herofloat .ic--orange,
body.home-page .px-pill {
  background: var(--hf-bg-wash) !important;
}
/* small feature icons/bullets (checkmarks, list glyphs on light tiles) — crimson */
body.home-page .idh-herofloat .ic--orange svg,
body.home-page .idh-check__ico svg,
body.home-page .idh-expert__list li svg,
body.home-page .idh-prod__list li svg { stroke: var(--hf-crimson) !important; }
body.home-page .px-pill { color: var(--hf-ink) !important; }
/* Conservative crimson discipline: only the SAMPLE tag (explicitly named in the
   spec) gets crimson here. Pricing-tier labels, the expert-section tag, and
   the audit-modal eyebrow are kicker-style text too, but they aren't one of
   the named exceptions, so per "if in doubt, use ink" they stay ink. */
body.home-page .idh-tier__name,
body.home-page .idh-expert__tag,
body.home-page .idh-audm__eyebrow,
body.home-page .idh-audm__next i { color: var(--hf-ink) !important; }
body.home-page .idha-rc__tag { color: var(--hf-crimson-hover) !important; }

/* dot accents / small circular bullets */
body.home-page .idh-hv__net .pl,
body.home-page .px-dot.on { background: var(--hf-ink) !important; }
/* "Measured against" standards chips — uniform crimson dot marker, matching the reference. */
body.home-page .idh-trust__items span::before { background: var(--hf-crimson) !important; }
body.home-page .idh-trust__items span { color: var(--hf-ink) !important; border-color: var(--hf-border) !important; }
/* the one explicitly-named "N standards mapped" trust line stays crimson (micro-accent) */
body.home-page .idh-trust__facts span:nth-child(1) b,
body.home-page .idh-trust__facts span:nth-child(4) b { color: var(--hf-crimson) !important; }

/* comparison table "good" column + its check icons */
body.home-page .idh-cmp__col--bad li i { background: var(--hf-bg-wash) !important; color: var(--hf-ink) !important; }

/* consultant/project card price + tag accents already covered above via
   .idh-cc__job / .idh-pc__days (rule 7); glow/backdrop decorative blobs */
body.home-page .c-init-glow,
body.home-page .pj-zoom-glow { background: radial-gradient(circle, rgba(16,24,32,.16) 0%, rgba(16,24,32,0) 70%) !important; }

/* request-audit modal */
body.home-page .idh-audm::before { background: var(--hf-ink) !important; }
body.home-page .idh-audm__close:hover { background: var(--hf-bg-wash) !important; color: var(--hf-ink) !important; }
body.home-page .idh-audm__field label .req { color: var(--hf-ink) !important; }
body.home-page .idh-audm__field input:focus,
body.home-page .idh-audm__field select:focus,
body.home-page .idh-audm__field textarea:focus,
body.home-page .idh-audm__field input.autofilled {
  border-color: var(--hf-ink) !important;
  box-shadow: 0 0 0 3px var(--hf-focus-ring) !important;
}
body.home-page .idh-audm__field input.is-invalid,
body.home-page .idh-audm__field select.is-invalid,
body.home-page .idh-audm__field textarea.is-invalid {
  border-color: var(--hf-risk-high) !important;
  box-shadow: 0 0 0 3px rgba(165,28,48,.12) !important;
}
body.home-page .idh-audm__help a { color: var(--hf-crimson) !important; }

/* animated badge/dot keyframes that cycled through orange mid-sequence */
body.home-page .idh-hero__eyebrow i,
body.home-page .idh-eyebrow i { background: var(--hf-ink) !important; }


/* ============================================================================
   10. SHARED CARD + CHIP SYSTEM (homepage polish pass)
   One card component and one chip component, used everywhere instead of each
   section inventing its own card/pill treatment. Not scoped to body.home-page
   with !important like the rest of this file — these are new component
   classes applied directly in markup, not overrides of legacy selectors, so
   they behave like normal reusable CSS.
   ============================================================================ */
.hf-card {
  background: #FFF;
  border: 1px solid var(--hf-border);
  border-radius: 12px;
  padding: 26px;
}
.hf-card--interactive {
  cursor: pointer;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.hf-card--interactive:hover {
  box-shadow: 0 8px 24px rgba(16,24,32,.08);
  transform: translateY(-2px);
}
/* the one dark card on the page — no glow gradients, just a flat dark fill */
.hf-card--dark {
  background: var(--hf-card-dark);
  border-color: var(--hf-card-dark-border);
  color: #F2F5F7;
}
.hf-card--dark .hf-card__body,
.hf-card--dark p { color: var(--hf-card-dark-muted); }
.hf-card--dark .hf-chip-icon { background: rgba(165,28,48,.22); }

/* icon chip used at the top of every card */
.hf-chip-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--hf-crimson-tint);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.hf-chip-icon svg { width: 20px; height: 20px; stroke: var(--hf-crimson); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* numbered-step chip — 28px circle, crimson-tint bg, crimson number. One
   accent color for a sequence (steps 1/2/3/4), never a rainbow per step. */
.hf-chip-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--hf-crimson-tint);
  color: var(--hf-crimson);
  font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}

/* card typography — title/body pair used inside .hf-card */
.hf-card__title { font-size: 16px; font-weight: 600; color: var(--hf-ink); margin: 0 0 8px; }
.hf-card--dark .hf-card__title { color: #F2F5F7; }
.hf-card__body { font-size: 13.5px; color: var(--hf-body); line-height: 1.55; margin: 0; }

/* rows of cards equalize height via grid stretch, content stays top-aligned */
.hf-card-row {
  display: grid;
  align-items: stretch;
}
.hf-card-row > * { display: flex; flex-direction: column; align-items: flex-start; }

/* one chip component for every pill/badge on the homepage */
.hf-chip {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--hf-border);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  color: var(--hf-ink);
  background: #fff;
  line-height: 1;
  white-space: nowrap;
}
.hf-chip--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hf-crimson);
  margin-right: 7px;
  flex-shrink: 0;
}

/* section rhythm */
.hf-section { padding-block: var(--hf-section-gap, 62px); }
.hf-section-intro { max-width: 60ch; margin-inline: auto; }

/* shared "in brief" callout — crimson left rule, bg-wash fill. One definition
   consumed by every inner page instead of a per-page .idhx-brief fork. */
.hf-brief { margin: 8px 0 4px; }
.hf-brief__in { background: var(--hf-bg-wash); border: 0; border-left: 3px solid var(--hf-crimson); border-radius: 14px; padding: 22px 26px; box-shadow: none; }
.hf-brief__k { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hf-crimson); margin: 0 0 8px; }
.hf-brief__in p { font-size: 15.5px; line-height: 1.7; margin: 0; color: var(--hf-body); }

/* ============================================================================
   shared button system — the canonical primary/secondary CTA for every page.
   hbsfoundry.org reference spec: --hf-action teal-blue fill, moderate 8px
   radius (NOT a pill), no gradients, no rest-state shadow. Inner pages don't
   have access to index.blade.php's own .idh-btn (it's defined in that file's
   page-local inline <style>), so this is the one every page not named
   index.blade.php should use going forward. .idh-btn on the homepage is kept
   in sync with the same values directly in index.blade.php.
   ============================================================================ */
.hf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--hf-btn-h); padding: 0 22px;
  border-radius: var(--hf-btn-radius);
  font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: none; box-shadow: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}
/* primary — the ONE teal action fill, site-wide */
.hf-btn--primary { background: var(--hf-action); color: #fff; }
.hf-btn--primary:hover { background: var(--hf-action-hover); color: #fff; }
.hf-btn--primary:active { background: var(--hf-action-active); color: #fff; }
/* secondary — white, bordered, teal text (the reference "Log In" style) */
.hf-btn--outline { height: var(--hf-btn-h); background: #fff; color: var(--hf-action); border: 1px solid #D5DEE3; }
.hf-btn--outline:hover { background: #F2F7F9; color: var(--hf-action); border-color: #B9C9D1; }
/* ghost-on-dark — white fill, ink text; use ONLY on .hf-card--dark backgrounds */
.hf-btn--light { background: #fff; color: var(--hf-ink); }
.hf-btn--light:hover { background: #E9EEF2; color: var(--hf-ink); }
/* outlined-on-dark — light border, white text; secondary action on a dark band */
.hf-btn--outline-light { height: var(--hf-btn-h); background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.hf-btn--outline-light:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }

/* focus-visible — 2px outline using the action color for buttons, the shared
   focus-ring token for everything else, every page */
a:focus-visible,
button:focus-visible,
.idh-btn:focus-visible,
.hf-card--interactive:focus-visible {
  outline: 2px solid var(--hf-focus-ring) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}
.hf-btn:focus-visible,
.idh-btn:focus-visible {
  outline: 2px solid rgba(23,107,138,.4) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* ============================================================================
   GLOBAL ALTERNATING SECTION-WIDTH RHYTHM
   Promoted from the Trust & Safety page (.ts-section--*) to global .hf-section--*.
   Applied by POSITION on every inner page (NOT the homepage): 1st section --full,
   2nd --inset, 3rd --full, alternating to the end. Layout wrappers ONLY — no
   colour/content/component changes.
     .hf-section--full  : spans the viewport; the page's own inner wrap still caps
                          content width (kept per-page so content width is unchanged).
     .hf-section--inset : 80% centred rounded panel (10% gap each side); the section
                          background applies to the panel only, page bg shows in gaps.
   Background helpers: .hf-sec-white / .hf-sec-wash / .hf-sec-dark.
   Section gap (inset vertical margin): 80px desktop / 56px tablet / 40px mobile.
   ============================================================================ */
.hf-section--full{ width:100%; }
.hf-section--inset{
  width:80%;
  margin:40px auto;              /* 40+40 => 80px between two insets */
  border-radius:16px;
  padding:48px 40px;
}
/* inside a panel the panel's own padding governs — neutralise the page's inner wrap */
.hf-section--inset > :first-child{
  max-width:none;
  margin-left:0; margin-right:0;
  padding-left:0; padding-right:0;
}
/* background helpers (tokens already global via this file) */
.hf-sec-white{ background:#fff; }
.hf-sec-wash{ background:var(--hf-bg-wash,#EDF2F5); }
.hf-sec-dark{ background:var(--hf-action,#176B8A); color:#F2F5F7; }
.hf-sec-dark.hf-section--inset{ padding:44px 40px; }
/* grid gaps tighten inside the narrower panel (20px vs 24px in full sections) */
.hf-section--inset [class*="-grid"]{ gap:20px; }
@media(max-width:1024px){
  .hf-section--inset{ width:90%; margin:28px auto; }   /* 56px between two insets */
}
@media(max-width:640px){
  .hf-section--inset{ width:calc(100% - 32px); margin:20px auto; border-radius:12px; padding:32px 20px; } /* 40px */
}

/* ============================================================================
   CENTERED SECTION HEADERS — all inner pages.
   Centers every section's eyebrow + title + subtitle block. Page <style> blocks
   load after this file and re-declare these classes, so !important is required
   to win site-wide from one place. Layout/alignment only — no colour/content.
   ============================================================================ */
.idab-sechd, .idhsc-sechd, .idhsh-sechd, .idhts-sechd, .idhm-sechd, .idhw-sechd,
.idhfl-sechd, .idha-head, .idc-head, .hiw-head,
.dp-section__kicker, .dp-section__title, .dp-section__intro {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}