/* ============================================================
   Third Party Risk Management -- page-specific layer.

   Loads AFTER css/it-managed-services-zazz.css. Cloned from
   css/devsecops-services.css (the shipped Family A cyber-security build).
   Divergences driven by the live page
   https://www.zazz.io/third-party-risk-management (WP ID 24027):
     - Hero banner swaps for this page's artwork (TPRM main banner).
     - Framework/approach section carries a SINGLE lead paragraph (no second
       "What This Process Covers:" heading), so the .zmit-approach-sub rule is
       unused here -- left in place, harmless, for parity with the family sheet.
     - Services use the text-only 4-col .zmit-services-grid (8 cards).
     - Stats: 3 stats (all % suffix) -> shared 3-col default, no override.
     - Final CTA HAS a figure on this page (consultant cut-out, right side).

   Split rule: a given CSS property for a given selector lives in exactly one of
   the two sheets, never both, so their load order cannot change any outcome.
   Section geometry started from the devsecops page's measured values (same
   template + section set) and is tuned to this page's content heights.
   ============================================================ */

/* ---- In-page anchor sub-nav (below hero/trust band) ---- */
.zmit-subnav { background: #fff; border-bottom: 1px solid #eef0f7; }
.zmit-subnav .z-container {
    display: flex; justify-content: space-evenly; align-items: stretch;
    gap: 10px; padding-top: 0; padding-bottom: 0; flex-wrap: wrap;
}
.zmit-subnav a {
    color: #14142b; font-size: 16px; font-weight: 500; text-decoration: none;
    line-height: 1.2; white-space: nowrap; padding: 20px 18px;
    border-bottom: 2px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.zmit-subnav a:hover,
.zmit-subnav a.is-active { color: #046bd2; background: #eef1fb; border-bottom-color: #046bd2; }

/* ---- Contact band: copy sits in a centred, narrow column (matches live) ---- */
.zmit-contact .zmit-contact-head { max-width: 1100px; margin-left: auto; margin-right: auto; text-align: center; }
.zmit-contact .zmit-contact-head p { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* ---- Success-story loop-grid cards: light-grey card + brand logo row ---- */
.zmit-story { background: #f5f6fb; border-radius: 8px; overflow: hidden; }
.zmit-story .body .zmit-story-logos { min-height: 50px; margin: 0 0 14px; display: flex; align-items: center; }
.zmit-story .body .zmit-story-logo {
    display: block; height: 50px; width: auto; max-width: 150px;
    object-fit: contain; object-position: left center;
}

/* ---- Testimonial card: blue banner gradient, dark copy, arrows outside ---- */
.zmit-testi-card {
    background-color: transparent;
    background-image: linear-gradient(100deg, #eef6f1 0%, #dce9fb 34%, #93b8fb 68%, #2f7bff 100%);
}

/* ---- Hero banner: this page's TPRM artwork + its gradient wash ---- */
.zmit-hero::before {
    background:
        linear-gradient(100deg, rgba(8,11,18,.88) 0%, rgba(8,11,18,.55) 55%, rgba(8,11,18,.25) 100%),
        url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/07/22092309/Third-Party-Risk-Management-Main-Banner-scaled.webp') center/cover no-repeat;
}
@media (min-width: 768px) {
    .zmit-hero::before {
        background:
            linear-gradient(100deg, rgba(8,11,18,.88) 0%, rgba(8,11,18,.55) 55%, rgba(8,11,18,.25) 100%),
            url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/07/22092309/Third-Party-Risk-Management-Main-Banner-scaled.webp') center/cover no-repeat;
    }
}
.zmit-hero-left { padding-bottom: 56px; }

@media (min-width: 1081px) {
    .zmit-hero-left { padding-bottom: 8px; align-self: center; }
    /* Widen the subcopy so it wraps to 3 lines like live (the shared sheet caps
       it at 560px -> 4 lines, making the left column taller than the form and
       swallowing the overhang). At 720px the left column drops ~26px, the form
       drives the banner height, and the card overhangs onto the trust strip
       (~105px, matching live's ~96px). */
    .zmit-hero .zmit-hero-sub { max-width: 720px; }
    .zmit-form-card { margin-top: 0; margin-bottom: -132px; padding: 16px; }
    .zmit-form-card h3 { margin-bottom: 12px; }
    .zmit-hsform { min-height: 0; }
    .zmit-hsform .hsfc-Row { margin-bottom: 8px !important; }
    .zmit-hsform input, .zmit-hsform textarea, .zmit-hsform select,
    .zmit-hsform .hsfc-TextInput, .zmit-hsform .hsfc-TextareaInput { padding: 8px 12px !important; }
    .zmit-hsform .hsfc-TextareaInput, .zmit-hsform textarea { min-height: 56px !important; }
    .zmit-hsform .hsfc-Button, .zmit-hsform button[type="submit"] { padding: 10px !important; }
}

/* ============================================================
   MEASURED SECTION GEOMETRY (family template values, 1440)
   ============================================================ */
.zmit .zmit-intro.z-section      { padding: 10px 0 30px; }
.zmit .zmit-services.z-section   { padding: 30px 0; }
.zmit .zmit-approach.z-section   { padding: 40px 0 75px; }
.zmit .zmit-recognized.z-section { padding: 20px 0; }
.zmit .zmit-why.z-section        { padding: 30px 0; }
.zmit .zmit-stories.z-section    { padding: 40px 0; }
.zmit .zmit-bookcal.z-section    { padding: 30px 0 0; }
.zmit .zmit-stats.z-section      { margin: 30px 0; padding: 40px 0; }
.zmit .zmit-testi.z-section      { padding: 30px 0; }
.zmit .zmit-faq.z-section        { padding: 36px 0; }
.zmit .zmit-final.z-section      { margin: 150px 0 80px; padding: 0; }
.zmit .zmit-contact.z-section    { padding: 50px 0; }
.zmit .zmit-insights.z-section   { padding: 106px 0; }

/* ---- Intro ---- */
.zmit-intro-grid { grid-template-columns: 1fr 1fr; gap: 50px; }
.zmit-intro-copy p { font-size: 16px; line-height: 26.4px; margin-bottom: 26px; }
.zmit-intro-copy p:last-of-type { margin-bottom: 0; }
.zmit-intro-media img { width: 100%; height: auto; }

/* ---- Services grid cards: static 4-col text grid, 8 cards, lavender boxes ---- */
.zmit-services-grid { gap: 30px; }
.zmit-services-grid .zmit-svc-card {
    background: #eef0f7;
    border: 1px solid #e4e7f1;
    border-radius: 10px;
    padding: 22px 22px;
}
.zmit-services-grid .zmit-svc-card h4 { font-size: 16.31px; line-height: 25.2px; margin-bottom: 12px; }
.zmit-services-grid .zmit-svc-card li { font-size: 13.5px; line-height: 20px; margin-bottom: 8px; }
.zmit-svc-card.no-image .zmit-svc-media { display: none; }

/* ---- Content-height tuning ---- */
.zmit-approach-copy h2 { font-size: 34.7px; line-height: 43px; }
.zmit-approach-sub {
    font-size: 34.7px; font-weight: 400; line-height: 43px; color: #141414;
    margin: 26px 0 18px;
}
.zmit-stats-copy h2 { color: #fcfcfc; font-size: 34px; font-weight: 400; line-height: 44.2px; margin: 0 0 20px; max-width: 420px; }
/* Stat order matches live: big NUMBER on top, label below (shared defaults). */
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container,
.zmit-bookcal-embed iframe { height: 760px; min-height: 0; }
.zmit-story-img img { height: 250px; }
.zmit-testi-card { min-height: 415px; }
.zmit-why-head p { margin-bottom: 27px; }
.zmit-why-head p:last-child { margin-bottom: 0; }
.zmit-why-grid { grid-template-columns: repeat(2, 279px); gap: 50px; justify-content: start; }
.zmit-why-card { padding-bottom: 0; }
.zmit-recognized-band { padding: 40px; }
.zmit-faq-q { padding: 25px 22px; font-size: 18px; line-height: 27px; }
.zmit-faq-item { margin-bottom: 7px; }
.zmit-faq-item.open .zmit-faq-a-inner { padding: 0 22px 40px; }
@media (min-width: 681px) {
    .zmit-faq-item:nth-child(6) { break-after: column; }
}

/* ---- Final CTA banner: this page HAS a figure on live ---- */
.zmit-final-banner {
    min-height: 441px;
    padding: 40px 60px;
    display: flex;
    align-items: center;
}
.zmit-final-copy { max-width: 52%; }
.zmit-final-copy h2 { margin-bottom: 14px; }
.zmit-final-copy p { margin-bottom: 22px; max-width: 470px; }
.zmit-final-media img { height: 577px; right: 90px; bottom: 0; }

/* ---- Tablet cascade ---- */
@media (max-width: 1080px) {
    .zmit-intro-grid { grid-template-columns: 1fr; gap: 32px; }
    .zmit-insights-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-services-grid { grid-template-columns: repeat(2, 1fr); }
    .zmit-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1080px) {
    .zmit .zmit-why.z-section      { padding: 60px 0; }
    .zmit .zmit-approach.z-section { padding: 50px 0 60px; }
    .zmit .zmit-services.z-section { padding: 60px 0; }
    .zmit-why-grid { gap: 24px; }
    .zmit-hero-left { padding-bottom: 0; }
    .zmit-stats-copy h2 { font-size: 22px; line-height: 1.4; }
    .zmit-approach-copy h2, .zmit-approach-sub { font-size: 27px; line-height: 1.25; }
    .zmit-why-head p { font-size: 16px; line-height: 25px; margin-bottom: 18px; }
    .zmit-intro-copy p { font-size: 15px; line-height: 24px; margin-bottom: 20px; }
    .zmit-testi-card { min-height: 0; }
}
@media (max-width: 1080px) {
    .zmit-stats-layout { grid-template-columns: 1fr; gap: 32px; }
    .zmit-stats-copy { max-width: none; }
}
@media (max-width: 1080px) {
    .zmit-why .z-container { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-why-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
}
@media (max-width: 1080px) {
    .zmit .zmit-approach.z-section { padding: 50px 0 60px; }
    .zmit .zmit-recognized.z-section { margin: 0; padding: 32px 0; }
    .zmit .zmit-why.z-section { margin-top: 0; padding: 60px 0; }
    .zmit .zmit-final.z-section { margin: 40px 0; padding: 0; }
}
@media (max-width: 1080px) {
    .zmit-final-banner { min-height: 0; padding: 36px 32px 0; display: block; }
    .zmit-final-copy { max-width: 100%; }
    .zmit-final-media img { position: static; height: 280px; margin: 16px auto 0; }
}

/* ============================================================
   PHONE GEOMETRY (<=680)
   ============================================================ */
@media (max-width: 680px) {
    .zmit .zmit-intro.z-section      { padding: 55px 0; }
    .zmit .zmit-services.z-section   { padding: 88px 0; }
    .zmit .zmit-approach.z-section   { padding: 0; }
    .zmit .zmit-recognized.z-section { padding: 58px 0; }
    .zmit .zmit-why.z-section        { padding: 0; }
    .zmit .zmit-bookcal.z-section    { padding: 0; }
    .zmit .zmit-stories.z-section    { padding: 24px 0; }
    .zmit .zmit-stats.z-section      { padding: 10px 0; }
    .zmit .zmit-testi.z-section      { padding: 0; }
    .zmit .zmit-faq.z-section        { padding: 90px 0; }
    .zmit .zmit-final.z-section      { margin: 32px 0; }
    .zmit .zmit-contact.z-section    { padding: 40px 0; }
    .zmit .zmit-insights.z-section   { padding: 100px 0; }

    .zmit-recognized-band { padding: 26px 22px; }
    .zmit-final-banner    { padding: 30px 22px 0; }
    .zmit-final-media img { height: 420px; }
    .zmit-story-img img   { height: 330px; }
    .zmit-why-grid      { grid-template-columns: 1fr; gap: 24px; }
    .zmit-services-grid { grid-template-columns: 1fr; gap: 30px; }
    .zmit-faq-q         { padding: 16px 0; font-size: 15px; line-height: 22px; }
    .zmit-why-head p    { font-size: 15px; line-height: 23px; margin-bottom: 10px; }
    .zmit-why-card p    { font-size: 14px; line-height: 22px; }
    .zmit-testi-lead    { font-size: 20px; line-height: 28px; }
    .zmit-testi-quote   { font-size: 15px; line-height: 24px; }
    .zmit-approach-copy h2, .zmit-approach-sub { font-size: 24px; line-height: 1.25; }
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 600px; }
}

@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 660px; }
}

/* --- Stat band sizes matched to live at 1440 (number 57/600 #76aaff, eyebrow 16/600, label 14 #fcfcfc) --- */
@media (min-width: 1081px) {
  .zmit-stats-eyebrow { font-size: 16px; line-height: 19.2px; font-weight: 600; }
  .zmit-stat .big { font-size: 57px; line-height: 57px; font-weight: 600; color: #76aaff; }
  .zmit-stat p { font-size: 14px; line-height: 21px; color: #fcfcfc; }
}