/* ════════════════════════════════════════════════════════════════════════
   BENCHMARK — FIRM-GRADE POLISH LAYER
   Loaded LAST, after styles.css + styles-revision.css.
   Purpose: remove the "assembled in layers" inconsistencies — unify every
   CTA to the brand teal, give the whole site one spacing/width rhythm, fix
   mobile gutters, add consistent focus rings + hover micro-interactions.
   Brand is unchanged: teal #19C19E, navy #15183b, gold #E0C18D.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --pol-teal: #19C19E;
  --pol-teal-hover: #14a587;
  --pol-on-teal: #06241d;          /* text/icon color that sits on teal */
  --pol-radius-btn: 8px;
  --pol-focus-ring: 0 0 0 3px rgba(25,193,158,.40);
  --pol-ease: cubic-bezier(.22,1,.36,1);
  --pol-shadow-card: 0 18px 40px -24px rgba(13,22,64,.30);
  /* Deep teal for TEXT on light backgrounds — WCAG AA (≈4.8:1 on white).
     The brand teal #19C19E (≈2.2:1) and old #0f8e74 (≈3.9:1) both failed AA
     as small text. Vibrant teal is kept untouched on dark sections. */
  --teal-ink: #0c7d63;
  --accent-dark: #0c7d63;
  --teal-dark: #0c7d63;
}

/* ────────────────────────────────────────────────────────────────────────
   1 · UNIFIED CTA SYSTEM
   Every primary call-to-action across every page renders in brand teal with
   one shape, one weight, one hover. Previously: .btn-primary and the product
   form submit were dark navy; stitch + accent buttons were teal; radii ranged
   4–11px. Now they are one button.
   ──────────────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-accent,
.btn-quote,
.stitch-btn-mint,
.leadership-card-cta,
.dark-form-submit,
.leadership-form-submit{
  background: var(--pol-teal) !important;
  color: var(--pol-on-teal) !important;
  border: 1px solid transparent !important;
  border-radius: var(--pol-radius-btn) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(13,22,64,.05);
  transition: background .18s var(--pol-ease),
              transform .18s var(--pol-ease),
              box-shadow .18s var(--pol-ease),
              color .18s var(--pol-ease) !important;
}
.btn-primary:hover,
.btn-accent:hover,
.btn-quote:hover,
.stitch-btn-mint:hover,
.leadership-card-cta:hover,
.dark-form-submit:hover,
.leadership-form-submit:hover{
  background: var(--pol-teal-hover) !important;
  color: var(--pol-on-teal) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(25,193,158,.60) !important;
}
.btn-primary:active,
.btn-accent:active,
.btn-quote:active,
.stitch-btn-mint:active,
.leadership-card-cta:active,
.leadership-form-submit:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px -2px rgba(25,193,158,.5) !important;
}

/* Secondary / outline buttons: same radius + interaction language */
.btn-ghost,
.btn-outline-light,
.stitch-btn-outline{
  border-radius: var(--pol-radius-btn) !important;
  transition: background .18s var(--pol-ease),
              border-color .18s var(--pol-ease),
              color .18s var(--pol-ease),
              transform .18s var(--pol-ease) !important;
}
.btn-ghost:hover,
.btn-outline-light:hover,
.stitch-btn-outline:hover{ transform: translateY(-2px); }

/* Inline text links keep teal but get a consistent deeper teal on light bg */
.btn-link{ color: var(--accent-dark) !important; }

/* ────────────────────────────────────────────────────────────────────────
   2 · UNIVERSAL FOCUS RINGS (accessibility)
   The bespoke stitch/leadership buttons, explore arrows and clickable cards
   had no visible keyboard focus state. Give the whole site one ring.
   ──────────────────────────────────────────────────────────────────────── */
.btn:focus-visible,
.btn-link:focus-visible,
.stitch-btn-mint:focus-visible,
.stitch-btn-outline:focus-visible,
.leadership-card-cta:focus-visible,
.leadership-form-submit:focus-visible,
.dark-form-submit:focus-visible,
.explore-arrow:focus-visible,
.bento-tile:focus-visible,
.product-card:focus-visible,
.svc-card:focus-visible,
.industry-cell:focus-visible,
.triple-item:focus-visible,
.team-card:focus-visible,
.faq-item summary:focus-visible{
  outline: none !important;
  box-shadow: var(--pol-focus-ring) !important;
  border-radius: var(--pol-radius-btn);
}

/* ────────────────────────────────────────────────────────────────────────
   3 · ONE READING WIDTH + ONE GUTTER
   Product/“stitch” sections hard-coded max-width:1440px and 64px side padding,
   so content width jumped between page types and was cramped on phones. Pull
   every content shell onto the site's 1280px reading width and responsive
   --pad gutter (clamp 20→64px).
   ──────────────────────────────────────────────────────────────────────── */
.approach-section .container,
.specialty-section .container,
.dark-feature .container,
.dark-form .container,
.trust-section .container,
.protocol-section .container,
.leadership-section .container,
.explore-section .container,
footer .container{
  max-width: var(--maxw) !important;
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
}
.stitch-hero-inner{
  max-width: var(--maxw) !important;
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
  padding-top: clamp(104px, 12vw, 132px) !important;
  padding-bottom: clamp(56px, 8vw, 96px) !important;
}

/* ────────────────────────────────────────────────────────────────────────
   4 · ONE VERTICAL RHYTHM
   Sections ranged across 96px / 110px / clamp(...). Normalise the major
   section types to the site's clamp scale so the page breathes evenly and
   compresses correctly on mobile.
   ──────────────────────────────────────────────────────────────────────── */
.approach-section,
.specialty-section,
.trust-section,
.protocol-section,
.leadership-section,
.dark-feature,
.dark-form,
.feature-row,
.pull-quote,
.scenarios-section,
.highlights-section,
.bf-diff-section,
.industries-grid-section,
.industries-grid-section + .stat-band,
.stat-band{
  padding-top: clamp(72px, 9vw, 116px) !important;
  padding-bottom: clamp(72px, 9vw, 116px) !important;
}

/* ────────────────────────────────────────────────────────────────────────
   5 · PRODUCT “OUR APPROACH” ICONS
   The hand-drawn rotated-rectangle / diamond / blob SVGs read as placeholder
   art. The HTML now carries clean stroke icons; give their tile the same
   teal-soft rounded-square treatment used by the rest of the site's icons.
   ──────────────────────────────────────────────────────────────────────── */
.approach-icon{
  width: 52px !important; height: 52px !important;
  border-radius: 13px !important;
  background: var(--accent-soft) !important;
  color: var(--accent-dark) !important;
  display: flex !important; align-items: center; justify-content: center;
}
.approach-icon svg{ width: 26px !important; height: 26px !important; }

/* ────────────────────────────────────────────────────────────────────────
   6 · CONSISTENT CARD HOVER
   Cards lifted by 2/3/4px or not at all. One consistent lift + shadow.
   ──────────────────────────────────────────────────────────────────────── */
.approach-card,
.triple-card,
.product-card,
.svc-card,
.whybm-card,
.team-card,
.trust-card,
.value{
  transition: transform .22s var(--pol-ease),
              box-shadow .22s var(--pol-ease),
              border-color .22s var(--pol-ease) !important;
}
.approach-card:hover,
.triple-card:hover,
.product-card:hover,
.svc-card:hover,
.whybm-card:hover,
.team-card:hover,
.trust-card:hover,
.value:hover{
  transform: translateY(-3px) !important;
  box-shadow: var(--pol-shadow-card) !important;
}

/* ────────────────────────────────────────────────────────────────────────
   7 · MOBILE REFINEMENTS
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px){
  /* CTAs go full-width so they're easy thumb targets and stop wrapping oddly */
  .stitch-hero-ctas{ flex-direction: column; align-items: stretch; }
  .stitch-hero-ctas .stitch-btn-mint,
  .stitch-hero-ctas .stitch-btn-outline{ width: 100%; text-align: center; }
  .hero-j-actions{ width: 100%; }
  .hero-j-actions .btn{ flex: 1 1 100%; }
  .herox-cta{ width: 100%; }
  .herox-cta .btn{ flex: 1 1 100%; }
  .final-cta-j .btn-accent,
  .warm-cta-inner .btn,
  .process3-cta .btn{ width: 100%; }
  .process3-cta .btn + .btn{ margin-left: 0 !important; margin-top: 10px; }

  /* stitch hero stats: 2-up reads better than cramped 4-up */
  .stitch-hero-stats{ grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .stitch-hero h1{ font-size: clamp(34px, 9vw, 46px) !important; }

  /* product page leadership form: comfortable single column */
  .leadership-form{ padding: 28px 22px !important; }
  .leadership-form-double{ grid-template-columns: 1fr !important; }
}

/* Tablet: stitch hero min-height was 85vh — too tall once stats stack */
@media (max-width: 860px){
  .stitch-hero{ min-height: 0 !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   8 · FORM POLISH (consistency + a11y)
   Give every text field one focus treatment (some had only a border change).
   ──────────────────────────────────────────────────────────────────────── */
.field input:focus,
.field textarea:focus,
.field select:focus,
.leadership-form-row input:focus,
.leadership-form-row select:focus,
.leadership-form-row textarea:focus,
.dark-form-field input:focus,
.dark-form-field textarea:focus{
  outline: none;
  border-color: var(--pol-teal) !important;
  box-shadow: 0 0 0 3px rgba(25,193,158,.16) !important;
}

/* ────────────────────────────────────────────────────────────────────────
   9 · SMALL TYPOGRAPHIC TIDY
   The product “Coverage highlights” header had its label sitting under the
   title; center it tidily and add breathing room. Harmless elsewhere.
   ──────────────────────────────────────────────────────────────────────── */
.specialty-head .specialty-h2-sub{
  display: inline-block;
  margin-top: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}

/* ────────────────────────────────────────────────────────────────────────
   10 · ABOUT — “OUR FAMILY OF COMPANIES”
   Was: flex-wrap with fixed 230px cards (4 logos wrapped 3+1, orphaning the
   4th) and the “Banking & Capital Partners” block inherited the global
   .partners-row 2-column grid — which threw its label to the left with the
   three bank logos stacked vertically beside it. Rebuild as clean, centered,
   equal grids that balance at every width.
   ──────────────────────────────────────────────────────────────────────── */
.family-section .family-grid{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: none;
  align-items: stretch;
}
.family-section .family-card{
  width: auto !important;
  height: 132px;
}
.family-section .family-card img{
  filter: grayscale(100%);
  opacity: .72;
  transition: filter .25s var(--pol-ease), opacity .25s var(--pol-ease);
}
.family-section .family-card:hover img{ filter: none; opacity: 1; }

/* Banking & Capital Partners: stop inheriting the 2-col .partners-row grid */
.family-section .partners-row{
  display: block !important;
  grid-template-columns: none !important;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.family-section .partners-row .label-caps{
  display: block;
  text-align: center;
  margin: 0 auto 24px;
}
.family-section .partners-row .family-grid{
  grid-template-columns: repeat(3, 1fr);
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 760px){
  .family-section .family-grid,
  .family-section .partners-row .family-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px){
  .family-section .family-grid,
  .family-section .partners-row .family-grid{ grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────────────
   11 · TABLET OVERFLOW FIXES (801–1024px)
   In this zone two components forced horizontal page scroll:
   • .numbers-band — 4 oversized figures (clamp up to 80px) blew past the
     container before the existing 800px breakpoint kicked in.
   • .hero-j — the 2-column hub/listing hero stayed side-by-side too long.
   Stack/halve them earlier so no page ever scrolls sideways.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px){
  .numbers-grid{ grid-template-columns: repeat(2, 1fr) !important; }
  .numbers-cell{ border-right: none !important; }
}
@media (max-width: 960px){
  .hero-j-grid{ grid-template-columns: 1fr !important; }
}
@media (max-width: 520px){
  .numbers-grid{ grid-template-columns: 1fr !important; }
  .numbers-cell .value{ font-size: clamp(40px, 12vw, 56px) !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   12 · ONE HERO FAMILY SITE-WIDE
   Detail pages (products, industries, careers) used the premium navy
   "stitch" hero; hubs + about + contact + service-detail pages used the
   lighter 2-column ".hero-j". That light/dark split was the last "two
   different templates" tell. Bring .hero-j into the same navy family — same
   gradient, light type, teal eyebrow, teal CTAs, white floating media card —
   so every inner page leads with one consistent hero. (Structure unchanged;
   nav tucks the same way it does over the stitch heroes.)
   ──────────────────────────────────────────────────────────────────────── */
.hero-j{
  background: linear-gradient(115deg,#0c1430 0%, #12224a 52%, #103f4e 100%) !important;
  color: #fff;
  position: relative;
  overflow: hidden;
  border-bottom: none !important;
}
.hero-j::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(70% 90% at 88% 10%, rgba(25,193,158,.16), transparent 60%);
}
.hero-j .container{ position: relative; z-index: 1; }
.hero-j .breadcrumb a{ color: rgba(255,255,255,.62) !important; }
.hero-j .breadcrumb span{ color: rgba(255,255,255,.92) !important; }
.hero-j .hero-j-eyebrow{ color: var(--pol-teal) !important; }
.hero-j h1{ color: #fff !important; }
.hero-j h1 em{ color: var(--pol-teal) !important; }
.hero-j .lede{ color: rgba(255,255,255,.82) !important; }
/* secondary "Back to…" button must read on the dark hero */
.hero-j .btn-ghost{
  color: #fff !important;
  border-color: rgba(255,255,255,.40) !important;
  background: transparent !important;
}
.hero-j .btn-ghost:hover{
  border-color: #fff !important;
  background: rgba(255,255,255,.10) !important;
}
/* the right-column image + stat card now float as a premium panel on navy */
.hero-j-visual{ box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); }

/* ────────────────────────────────────────────────────────────────────────
   13 · TEXT CONTRAST (WCAG AA)
   Vibrant brand teal (#19C19E) is only ~2.2:1 on white and the previous
   "deep" teal (#0f8e74) only ~3.9:1 — both fail AA for the small teal text
   used in eyebrows, tags, stat labels and inline links across the site.
   Route every teal/green TEXT element that sits on a LIGHT background to the
   AA-compliant --teal-ink. (#accent-dark is redefined above, which already
   fixes the .eyebrow / .btn-link / breadcrumb / contact-link family. The
   rules below catch the components that used the vibrant teal directly.)
   Teal on DARK sections — hero, numbers-band, explore, dark-feature/form,
   footer, process navy — is left vibrant; it already exceeds AA there.
   ──────────────────────────────────────────────────────────────────────── */
.scenario-tag,
.diff-eyebrow,
.feature-row-cta,
.feature-row-body .eyebrow,
.scenarios-head .eyebrow,
.bf-col .eyebrow,
.diff-col .eyebrow,
.highlights-head .eyebrow,
.industries-grid-head .eyebrow,
.industry-cell-num,
.industry-cell:hover .industry-cell-cta,
.trust-card-stat,
.product-card-cta,
.svc-card .svc-cta,
.product-card:hover h3,
.triple-item:hover,
.triple-item:hover .triple-item-text strong,
.marquee-head .label-caps,
.contact-intro a:not(.btn),
.privacy a,
.hero-j-trend,
.hero-j-stat-card .value small{
  color: var(--teal-ink) !important;
}
.scenario-tag{ border-color: var(--teal-ink) !important; }
.feature-row-cta{ border-bottom-color: var(--teal-ink) !important; }
/* lighten the trend pill ground so the deep-teal label clears AA on it */
.hero-j-trend{ background: #eef9f5 !important; }
/* review stars: deepen the amber for legibility (rating is also stated as text) */
.reviews-rating-stars,
.review-card-stars{ color: #C77F0A !important; }

/* ────────────────────────────────────────────────────────────────────────
   14 · NUMBERS-BAND CLASS COLLISION
   styles.css defines a value-prop CARD as `.value { background: var(--surface);
   padding; border; radius }`. The dark .numbers-band reuses the same `.value`
   class for its big stat figures, so each number was inheriting a WHITE card —
   which made the teal figure low-contrast and hid the white stat labels on
   white. Strip the card treatment inside the band so it renders as designed:
   vibrant teal figures on the dark navy band (well above AA).
   ──────────────────────────────────────────────────────────────────────── */
.numbers-band .value,
.numbers-cell .value{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ────────────────────────────────────────────────────────────────────────
   15 · STAT-BAND (teal gradient) CONTRAST
   The band's eyebrow and the big-figure sublabels (advisory / claims /
   downward) were vibrant teal #19C19E sitting on a bright teal gradient —
   almost invisible. Deepen the gradient so light type reads everywhere, and
   recolor the teal text to a legible pale mint.
   ──────────────────────────────────────────────────────────────────────── */
.stat-band{
  background: linear-gradient(135deg, #063f33 0%, #0b7058 52%, #064a3c 100%) !important;
}
.stat-band-eyebrow{ color: #d6f9f0 !important; }
/* keep the faint inline sublabel beside each figure (advisory / claims / downward) */
.stat-band-value small{ color: #b6ece0 !important; }
/* remove the redundant bold white label below each figure (keep its description) */
.stat-band-label strong{ display: none !important; }
.stat-band-label{ color: rgba(255,255,255,.86) !important; }
/* give the divider line room: more space above it, and below it before the figures */
.stat-band-head{ margin-bottom: 72px !important; }
.stat-band-grid{ padding-top: 8px !important; }
/* column dividers: vertically centered (not full-height) with clear gaps from text */
.stat-band-cell{
  position: relative;
  border-right: none !important;
  padding: 52px 44px 8px 0 !important;
}
.stat-band-cell:not(:first-child){ padding-left: 44px !important; }
.stat-band-cell:not(:first-child)::before{
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 62%;
  background: rgba(255,255,255,.20);
}
@media (max-width: 820px){
  .stat-band-cell{ padding: 32px 0 !important; }
  .stat-band-cell:not(:first-child)::before{ display: none !important; }
}