/* ============================================================================
   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.
   The homepage separates its sections by full-window colour bands instead — see
   the "SECTION SEPARATORS" block in resources/views/index.blade.php. Inset panels
   were tried there and rejected: the page background showing down both gutters
   read as a narrow section rather than as a separator.
     .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 */
}

/* ============================================================================
   GENERATED ARTICLE HEADER (.ins-gh) — Insights surface.
   Replaces stock/illustration imagery with a typographic panel: wash (or dark
   for teardowns) background, the article's standard/short label large in serif
   ink, and a small category chip. One accent per panel — never a rainbow.
   Sizes: --sm (cards), --md (featured), --lg (article page).
   ============================================================================ */
.ins-gh {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 14px;
  background: var(--hf-bg-wash, #EDF2F5);
  border-radius: 12px;
  overflow: hidden;
  padding: 24px 26px;
}
.ins-gh--dark { background: var(--hf-card-dark, #122430); }
.ins-gh__chip {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 11px;
  border-radius: 999px;
  background: var(--hf-crimson-tint, #FBEBED);
  color: var(--hf-crimson, #A51C30);
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  white-space: nowrap; line-height: 1;
}
.ins-gh--dark .ins-gh__chip { color: #fff; background: rgba(255,255,255,.14); }
.ins-gh__label {
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 600; line-height: 1.02; letter-spacing: -.5px;
  color: var(--hf-ink, #101820);
}
.ins-gh--dark .ins-gh__label { color: #fff; }
.ins-gh--sm { aspect-ratio: 16 / 9; padding: 20px 22px; }
.ins-gh--sm .ins-gh__label { font-size: clamp(30px, 4vw, 40px); }
.ins-gh--md { aspect-ratio: 16 / 11; }
.ins-gh--md .ins-gh__label { font-size: clamp(40px, 5vw, 56px); }
.ins-gh--lg { min-height: 220px; }
.ins-gh--lg .ins-gh__label { font-size: clamp(48px, 7vw, 76px); }

/* ============================================================================
   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;
}


/* ============================================================================
   == What is AI Auditing section ==
   Two bands on the homepage:
     1. a cream "paper" band - definition copy + a taped polaroid holding a
        rendered sample report page;
     2. a FULL-BLEED navy band - the five audit dimensions.

   Sampled colour: --idh-blue is taken from the live "Request an Audit" header
   CTA (.idh-navcta in header-new.blade.php), which fills #176B8A. The briefed
   estimate #1B5FAF is not a colour this site ships and is used nowhere.

   Colour discipline on this page:
   - the severity ramp (#EAF3DE/#3B6D11, #FAEEDA/#854F0B, #FCEBEB/#A32D2D)
     appears ONLY inside .idh-srep, where it encodes finding severity;
   - crimson appears in exactly two places: the italic word in the section
     heading and the seal stamp;
   - --idh-blue is the one accent on the navy band: the Compliance card border
     and the hover border. One featured card, never more.
   ============================================================================ */
:root{
  --idh-blue:        #176B8A;  /* SAMPLED from .idh-navcta - replaces #1B5FAF */
  --idh-blue-tint:   #5E93D1;  /* featured question line on navy */
  /* --hf-action only reaches 2.6:1 on --hf-card-dark, so link text on dark
     surfaces uses this lightened step instead: 6.0:1 */
  --idh-action-lt:   #5FA8C4;
  /* secondary text on the teal dimension cards (--hf-action-hover): 5.4:1 */
  --idh-text-sky:    #C3D8E0;
  --idh-navy:        #0F2947;  /* dimensions band background */
  --idh-navy-card:   #16324F;  /* card surface on navy */
  --idh-navy-ghost:  #1E3D5E;  /* ghost numerals */
  --idh-ice:         #EDF2F5;
  --idh-text-mist:   #A9BDD3;
  --idh-text-steel:  #7C93AB;
  --idh-crimson:     #A51C30;
  --idh-paper:       #F6F3EC;
  --idh-paper-card:  #FDFCF9;
  --idh-paper-line:  #D8D3C6;
  /* supporting tokens used by this section */
  --idh-ink:         #101820;
  --idh-text-dark:   #14171A;
  --idh-text-body:   #4A4A44;
  --idh-eyebrow:     #6F6A5A;  /* eyebrow on paper - 4.9:1 (briefed #8A8577 is 3.3:1) */
}

/* ---- band 1: paper ----
   Equal outer gutters left and right (48px), two-column gap 48px, and equal
   column widths so the polaroid and the copy are optically balanced. */
.idh-wia-sec{ background:#fff; padding:64px 10%; }
.idh-wia{ margin:0 auto; border-radius:16px; overflow:hidden; }
.idh-wia__band{ padding:48px; }
/* Cream slab removed — the band runs white, so the polaroid and its shadow are
   what define the composition. --idh-paper stays defined as a token but is no
   longer painted as a background here. */
.idh-wia__band--paper{ background:var(--hf-bg,#FFFFFF); }
/* Copy left, report page right. The report is portrait (520x620), so its column is
   the narrower of the two and the figure is capped — otherwise it runs to roughly
   twice the height of the copy beside it. */
.idh-wia__grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center; }

/* eyebrow labels are <p>, never headings */
.idh-wia__eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--idh-eyebrow); margin:0 0 14px;
}

/* the taped polaroid — dark mount, to sit with the dark report page inside it */
.idh-wia__photo{
  position:relative; max-width:400px; margin-inline:auto;
  background:var(--idh-ink,#101820); border-radius:10px;
  padding:14px 14px 6px; transform:rotate(-1deg);
  box-shadow:0 18px 44px rgba(16,24,32,.22);
}
.idh-wia__caption{
  font-family:'Fraunces','Georgia',serif; font-style:italic; font-size:16.5px;
  color:rgba(255,255,255,.72); text-align:center; margin:16px 0 10px;   /* 6.5:1 on ink */
}

/* right column */
.idh-wia__title{
  font-family:'Fraunces','Georgia',serif; font-size:clamp(2.1rem,4vw,3.1rem); font-weight:500;
  color:var(--idh-text-dark); letter-spacing:-.6px; margin:0 0 24px; line-height:1.12;
}
.idh-wia__title em{ font-style:italic; color:var(--idh-crimson); } /* crimson use 1 of 2 */
.idh-wia__body p{ font-size:16.5px; line-height:1.72; color:var(--idh-text-body); margin:0 0 18px; }
.idh-wia__body p:last-child{ margin-bottom:0; }
.idh-wia__cta{ display:inline-flex; align-items:center; gap:17px; margin-top:30px; text-decoration:none; }
.idh-wia__cta-ico{
  width:54px; height:54px; border-radius:50%; flex:none; background:var(--idh-blue);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, transform .15s ease;
}
.idh-wia__cta-ico svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2;
                       stroke-linecap:round; stroke-linejoin:round; }
.idh-wia__cta-txt{
  font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--idh-text-dark);
}
.idh-wia__cta:hover .idh-wia__cta-ico{ background:var(--hf-action-hover,#125A75); transform:translateX(3px); }

/* ---- band 2: FULL-BLEED navy dimensions band ----
   Sits outside the inset paper block, edge to edge, with an inner container at
   the page's max width. No tints, no tails: the five dimensions are peers, and
   colour-coding them would imply a severity ranking the content never claims. */
/* Band fill is the action teal #176B8A. The navy tokens stay declared but are no
   longer painted here - on teal, --idh-text-steel drops to 2.4:1 and
   --idh-blue/--idh-blue-tint vanish into the background, so the whole card
   palette steps up: cards go one shade darker (--hf-action-hover) and every
   text tone is a light tint. Ratios noted inline. */
.idh-dimband{ background:var(--hf-action,#176B8A); padding:64px 24px; }
.idh-dimband__inner{ max-width:1180px; margin:0 auto; }
.idh-dimband__eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.88); margin:0 0 12px; text-align:center;   /* 5.2:1 on the band */
}
.idh-dimband__title{
  font-family:'Fraunces','Georgia',serif; font-size:clamp(1.7rem,3vw,2.25rem); font-weight:500;
  color:#fff; letter-spacing:-.4px; margin:0 0 32px; line-height:1.15;   /* 6.1:1 */
  text-align:center; white-space:nowrap;
}
/* the headline is short enough to hold one line everywhere except the very
   narrowest screens, where it is allowed to wrap rather than overflow */
@media(max-width:420px){ .idh-dimband__title{ white-space:normal; } }
.idh-dimband__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:18px; }
.idh-dim{
  position:relative; overflow:hidden; background:var(--hf-action-hover,#125A75);
  border:1px solid transparent; border-radius:10px; padding:24px 22px 26px;
  transition:transform .15s ease, border-color .15s ease;
}
/* ghost numeral: top-right, cropped by the card's overflow */
.idh-dim__num{
  position:absolute; top:-8px; right:6px; font-family:'Fraunces','Georgia',serif;
  font-size:60px; line-height:1; font-weight:500; color:rgba(255,255,255,.10);
  pointer-events:none; -webkit-user-select:none; user-select:none;
}
.idh-dim > *{ position:relative; }   /* all content layers above the numeral */
.idh-dim__name{ font-size:19px; font-weight:600; color:#fff; margin:0 0 8px; letter-spacing:-.1px; }   /* 7.7:1 on card */
.idh-dim__q{
  font-family:'Fraunces','Georgia',serif; font-style:italic; font-size:16.5px; line-height:1.35;
  color:var(--idh-text-sky); margin:0 0 14px;
}
.idh-dim__body{ font-size:15px; line-height:1.62; color:var(--idh-text-sky); margin:0; }
/* the one accent on this band - Compliance only. On teal the accent has to be
   light, not blue: --idh-blue IS the band colour now. */
.idh-dim--featured{ border-color:rgba(255,255,255,.55); }
.idh-dim--featured .idh-dim__q{ color:#fff; }

@media(hover:hover){
  .idh-dim:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.4); }
}
@media(prefers-reduced-motion:reduce){
  .idh-dim{ transition:none; }
  .idh-dim:hover{ transform:none; }
  .idh-wia__cta-ico{ transition:none; }
  .idh-wia__cta:hover .idh-wia__cta-ico{ transform:none; }
}

@media(max-width:1024px){
  .idh-dim__num{ font-size:52px; }   /* avoids an awkward clip at tablet width */
}
@media(max-width:860px){
  .idh-wia-sec{ padding:44px 10%; }
  .idh-wia__band{ padding:32px 22px; }
  .idh-wia__grid{ grid-template-columns:1fr; gap:36px; }
  .idh-wia__photo{ transform:none; }
  .idh-dimband{ padding:48px 20px; }
}
/* ============================================================================
   == Sample report card ==
   The report page is now a single inline SVG (resources/views/partials/
   sample-report-card.blade.php), so all the .idh-srep__* element rules that
   styled the old HTML version are gone. Only the box itself is styled here.
   ============================================================================ */
.idh-srep{ display:block; width:100%; height:auto; border-radius:6px; }

/* ============================================================================
   == Founder credential strip ==
   Section 2 of the homepage, directly under the hero. A compact strip — roughly
   40% of a standard section's vertical height — so it reads as a credential
   line, not another full band. Two columns on desktop, stacked below 700px.

   Background is --hf-alt-blue (via .idh-alt-blue): the hero above it is dark ink
   and the "What is AI auditing?" band below is white, so the strip has to sit
   between the two without fusing into either.
   ============================================================================ */
.idh-fstrip{ padding-block:calc(var(--hf-section-gap, 72px) * .4); }
.idh-fstrip__inner{ display:grid; grid-template-columns:132px 1fr; gap:28px; align-items:center; }
.idh-fstrip__media{ width:132px; height:132px; border-radius:16px; overflow:hidden; flex:none;
  background:var(--hf-card-dark,#122430); display:flex; align-items:center; justify-content:center; }
.idh-fstrip__media img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.idh-fstrip__fallback svg{ width:44px; height:44px; stroke:rgba(255,255,255,.55);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.idh-fstrip__copy{ min-width:0; }
.idh-fstrip .idh-eyebrow{ margin-bottom:8px; }
.idh-fstrip__name{ font-family:'Fraunces','Georgia',serif; font-size:26px; font-weight:600;
  color:var(--hf-ink,#101820); letter-spacing:-.3px; margin:0 0 4px; line-height:1.2; }
.idh-fstrip__role{ font-family:'Fraunces','Georgia',serif; font-size:17px; font-weight:600;
  color:var(--hf-crimson,#A51C30); margin:0 0 10px; }
.idh-fstrip__cred{ color:var(--hf-muted,#6A7178); font-weight:500; }
.idh-fstrip__line{ font-size:16px; line-height:1.6; color:var(--hf-body,#3D444C); margin:0; max-width:70ch; }

@media(max-width:700px){
  .idh-fstrip__inner{ grid-template-columns:1fr; gap:18px; }
  .idh-fstrip__media{ width:104px; height:104px; }
  .idh-fstrip__name{ font-size:23px; }
}
/* ============================================================================
   == Mission + Vision closing band ==
   The two former mid-page sections merged onto one --idh-navy field, closing the
   page above the final CTA. The mission half moved off a light band, so its type
   is recoloured for the dark ground; layout and copy are otherwise unchanged.
   ============================================================================ */
.idh-mv-sec{ background:var(--idh-navy,#0F2947); padding-block:var(--hf-section-gap,72px); }
.idh-mv-wrap{ max-width:1320px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }

/* mission half */
.idh-mv{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.idh-mv__eyebrow{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#F3C3CB; margin:0 0 14px; }                                  /* 5.0:1 on navy */
.idh-mv__headline{ font-family:'Fraunces','Georgia',serif; font-size:clamp(1.9rem,3.2vw,2.6rem);
  font-weight:600; color:#fff; letter-spacing:-.4px; line-height:1.16; margin:0 0 18px; }
.idh-mv__headline em{ font-style:italic; color:#9ED4E8; }            /* 8.4:1 */
.idh-mv__body{ font-size:18.5px; line-height:1.7; color:rgba(255,255,255,.86); margin:0 0 28px; }
.idh-mv__ilk{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin:0 0 18px; }
.idh-mv__list{ list-style:none; margin:0; padding:0; }
.idh-mv__item{ display:grid; grid-template-columns:auto 1fr; gap:22px; padding:20px 0;
  border-top:1px solid rgba(255,255,255,.16); }
.idh-mv__item:first-child{ border-top:0; padding-top:0; }
.idh-mv__n{ font-family:'Fraunces','Georgia',serif; font-size:15px; font-weight:600;
  color:rgba(255,255,255,.45); line-height:1.6; }
.idh-mv__item:last-child .idh-mv__n{ color:#F3C3CB; }
.idh-mv__item h3{ font-family:'Lato',sans-serif; font-size:16px; font-weight:800; color:#fff;
  margin:0 0 6px; }
.idh-mv__item p{ font-size:15px; line-height:1.6; color:rgba(255,255,255,.80); margin:0; }

/* divider between the two halves of the band */
.idh-mv__rule{ border:0; border-top:1px solid rgba(255,255,255,.16);
  margin:clamp(40px,5vw,64px) 0; }

@media(max-width:900px){
  .idh-mv{ grid-template-columns:1fr; gap:40px; }
}