/* ============================================================
   Penetration Testing Services -- page-specific layer.

   Loads AFTER css/it-managed-services-zazz.css. Cloned from
   css/devsecops-services.css (approved Family A cyber build). Divergences driven
   by the live page https://www.zazz.io/penetration-testing-services (WP ID 21061;
   the /vulnerability-management-penetration-testing-services slug 301s here):
     - No intro/overview band on live (hero -> services directly), so the intro
       rules are dropped.
     - Approach ("Fortify Your Defenses") copy is a 5-item ORDERED list of
       bold-led benefits (live's text-editor <ol>), not paragraphs + a second
       heading. Accordion holds the 6 process steps.
     - "Why" band is live's "Robust Penetration Testing for Future-Ready Security"
       section: a 6-item bulleted lead + FOUR inline-SVG icon cards, so the why
       grid keeps the shared 4-up default (devsecops' 2x279 override is dropped).
     - Articles band reuses the shared .zmit-articles component (no page CSS).
     - Stats = 3 stats (shared 3-col default); FAQ = 20 items, balanced 2-col.
     - Final CTA has a consultant figure (right side), same overflow composition.
   ============================================================ */

/* ---- 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 ----
   Every brand logo normalised to a 50px-tall, left-aligned box; a reserved slot
   keeps titles aligned. */
.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: shared 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 Vulnerability-Management & Penetration-Testing
   banner 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/17090033/Vulnerability-Management-and-Penetration-Testing-Services-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/17090033/Vulnerability-Management-and-Penetration-Testing-Services-Banner-scaled.webp') center/cover no-repeat;
    }
}
.zmit-hero-left { padding-bottom: 56px; }

/* Desktop: the taller form card overhangs onto the white trust band (matches
   live). -132px = trust-band height (see CLAUDE.md Family A tuning). */
@media (min-width: 1081px) {
    .zmit-hero-left { padding-bottom: 8px; align-self: center; }
    .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: 16px !important; }
    .zmit-hsform input, .zmit-hsform textarea, .zmit-hsform select,
    .zmit-hsform .hsfc-TextInput, .zmit-hsform .hsfc-TextareaInput { padding: 11px 12px !important; }
    .zmit-hsform .hsfc-TextareaInput, .zmit-hsform textarea { min-height: 80px !important; }
    .zmit-hsform .hsfc-Button, .zmit-hsform button[type="submit"] { padding: 14px !important; }
}

/* ============================================================
   SECTION GEOMETRY (plain vertical stack, no negative-margin overlap)
   ============================================================ */
.zmit .zmit-services.z-section   { padding: 40px 0 30px; }
.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-bookcal.z-section    { padding: 30px 0 0; }
.zmit .zmit-stories.z-section    { padding: 40px 0; }
.zmit .zmit-stats.z-section      { margin: 30px 0; padding: 40px 0; }
.zmit .zmit-articles.z-section   { padding: 30px 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; }

/* ---- Services grid cards: static 4-col text grid (8 cards, no card photo),
   light lavender boxes with a subtle border. ---- */
.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; }

/* ---- Approach copy: live renders a numbered list of five bold-led benefits
   as the left-column body, next to the 6-step accordion. ---- */
.zmit-approach-copy h2 { font-size: 34.7px; line-height: 43px; }
.zmit-approach-list { margin: 18px 0 0; padding-left: 20px; }
.zmit-approach-list li { font-size: 16px; line-height: 26.4px; margin-bottom: 16px; }
.zmit-approach-list li:last-child { margin-bottom: 0; }
.zmit-approach-list strong { color: #141414; }

/* ---- "Why" (Future-Ready) band: heading + a 6-item bulleted lead, then the 4
   inline-SVG icon cards (shared 4-up grid default kept). ---- */
.zmit-why-list { margin: 16px 0 0; padding-left: 20px; max-width: 760px; }
.zmit-why-list li { font-size: 16px; line-height: 25px; margin-bottom: 12px; color: #4a4a63; }
.zmit-why-list li:last-child { margin-bottom: 0; }
.zmit-why-list strong { color: #141414; }
.zmit-why-head { margin-bottom: 34px; }

/* Stats left column: live's supporting line is a LARGE light heading (dark band,
   so the light colour is mandatory). */
.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). */
/* Meetings embed well */
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container,
.zmit-bookcal-embed iframe { height: 760px; min-height: 0; }
/* Story thumbnail */
.zmit-story-img img { height: 250px; }
/* Testimonial card floor */
.zmit-testi-card { min-height: 415px; }
/* Recognized inner band padding */
.zmit-recognized-band { padding: 40px; }
/* FAQ rows */
.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; }

/* ---- Final CTA banner: consultant cut-out on the right, copy vertically
   centred, figure bottom-anchored so it breaks above the top edge. ---- */
.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: 520px; right: 90px; bottom: 0; }

/* ---- Tablet cascade (<=1080) ---- */
@media (max-width: 1080px) {
    .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); }
    .zmit-why-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
}
@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 { font-size: 27px; line-height: 1.25; }
    .zmit-why-list li { font-size: 15px; line-height: 24px; margin-bottom: 10px; }
    .zmit-testi-card { min-height: 0; }
    .zmit-stats-layout { grid-template-columns: 1fr; gap: 32px; }
    .zmit-stats-copy { max-width: none; }
    .zmit-why .z-container { grid-template-columns: 1fr; gap: 32px; }
    .zmit .zmit-recognized.z-section { margin: 0; padding: 32px 0; }
    .zmit .zmit-final.z-section { margin: 40px 0; padding: 0; }
    .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: 300px; margin: 16px auto 0; }
}

/* ---- Phone geometry (<=680) ---- */
@media (max-width: 680px) {
    .zmit .zmit-services.z-section   { padding: 60px 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-articles.z-section   { padding: 40px 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: 360px; }
    .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-list li   { 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 { 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; }
}