/*
 * CyberMark Agency 2.0 — service pages (body.cm-service)
 * Restyles the shared service vocabulary used by BOTH the page builder output
 * (inc/page-builder.php) and each template's hardcoded fallback, so every service
 * page gets the dark HUD look without rewriting its content.
 *
 * Inline styles: content in templates and in saved page-builder HTML carries a small,
 * fixed set of light-theme colours. The "Inline colour remap" section below matches
 * those exact values and maps them onto the dark palette.
 */

/* Tokens, buttons, tables and the inline-colour remap live in content.css (body.cm-content). */

.cm-service main,
.cm-service .service-container { display: block; }

/* Unstyled links would otherwise fall back to the browser's dark blue on black */
.cm-service .service-hero a:not([class*="btn"]),
.cm-service .service-detail-hero a:not([class*="btn"]),
.cm-service .service-container a:not([class*="btn"]),
.cm-service .final-cta a:not([class*="btn"]),
.cm-service .service-cta-banner a:not([class*="btn"]) { color: var(--white); }

/* ---------- Hero ---------- */
.cm-service .service-hero,
.cm-service .service-detail-hero {
    position: relative;
    overflow: hidden;
    text-align: left;
    color: var(--white);
    background: radial-gradient(ellipse at 80% 30%, #0E1622 0%, var(--black) 60%);
    padding: calc(var(--header-h) + clamp(4rem, 9vw, 7rem)) var(--cm-inline) 0;
    border-bottom: 1px solid var(--line-d);
    display: flex;
    flex-direction: column;
}

/* Grid backdrop, faded toward the copy */
.cm-service .service-hero::before,
.cm-service .service-detail-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--line-d) 1px, transparent 1px), linear-gradient(90deg, var(--line-d) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 85% 40%, #000 0%, transparent 60%);
    mask-image: radial-gradient(ellipse at 85% 40%, #000 0%, transparent 60%);
    opacity: 0.6;
    pointer-events: none;
}

/* HUD corner brackets */
.cm-service .service-hero::after,
.cm-service .service-detail-hero::after {
    content: '';
    position: absolute;
    top: calc(var(--header-h) + 24px);
    left: var(--gutter);
    right: var(--gutter);
    height: 14px;
    border-top: 1px solid var(--line-d-strong);
    -webkit-mask-image: linear-gradient(90deg, #000 14px, transparent 14px, transparent calc(100% - 14px), #000 calc(100% - 14px));
    mask-image: linear-gradient(90deg, #000 14px, transparent 14px, transparent calc(100% - 14px), #000 calc(100% - 14px));
    pointer-events: none;
}

.cm-service .service-hero-content {
    position: relative;
    z-index: 1;
    max-width: none;
    margin: 0;
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Keep the copy column narrow; the tick strip below it can use the full width */
.cm-service .service-hero-content > h1 { max-width: 20ch; }

.cm-service .service-hero h1,
.cm-service .service-detail-hero h1 {
    margin: 0 0 1.75rem;
    color: var(--white) !important;
    font-size: clamp(2.4rem, 5.4vw, 5.2rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.045em;
}

.cm-service .service-hero-subtitle,
.cm-service .service-detail-hero p {
    margin: 0;
    max-width: 60ch;
    color: var(--mute-d) !important;
    opacity: 1;
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.6;
}

.cm-service .service-hero-image { display: block; max-width: 100%; height: auto; margin-top: 2rem; }

/* Emoji hero icons don't suit the monochrome look */
.cm-service .service-icon { display: none; }

.cm-service .framework-hero-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    color: var(--mute-d) !important;
    font-family: var(--font-mono);
    font-size: 0.72rem !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cm-service .framework-hero-badge::before { content: ''; width: 28px; height: 1px; background: var(--accent); }

/* Hero buttons row (HIPAA) */
.cm-service .service-hero-content > div[style*="display: flex"],
.cm-service .service-hero-content > div[style*="display:flex"] { justify-content: flex-start !important; }

/* Tick list: bordered mono strip along the bottom of the hero */
.cm-service .hero-tick-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 0;
    margin: 0 0 0 !important;
    padding: 0;
    border-top: 1px solid var(--line-d);
}

/* Builder output nests the list inside the copy column; the fallbacks place it after it */
.cm-service .service-hero-content .hero-tick-list { margin-top: 2.5rem !important; }
.cm-service .service-hero > .hero-tick-list { margin-bottom: clamp(3rem, 6vw, 5rem) !important; }

.cm-service .hero-tick-item {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 1.2rem 1.5rem;
    border-right: 1px solid var(--line-d);
    color: var(--mute-d);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cm-service .hero-tick-item:first-child { border-left: 1px solid var(--line-d); }
.cm-service .hero-tick-item .tick { color: var(--accent); font-weight: 400; }

/* ---------- Sections ---------- */
.cm-service .service-container {
    max-width: none;
    margin: 0;
    padding: 0;
    counter-reset: cm-svc;
}

.cm-service .service-container > section,
.cm-service .service-container > .custom-content,
.cm-service section.framework-choose-section {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: start;
    margin: 0 !important;
    padding: clamp(4.5rem, 9vw, 7.5rem) var(--cm-inline) !important;
    max-width: none !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--line-d) !important;
    box-shadow: none !important;
    background: var(--black) !important;
    color: var(--white) !important;
    text-align: left !important;
}

.cm-service .service-container > section:nth-of-type(even) { background: var(--ink) !important; }

.cm-service .service-container > section > *,
.cm-service .service-container > .custom-content > *,
.cm-service section.framework-choose-section > * { grid-column: 1 / -1; min-width: 0; }

/* Section head: title left, first intro paragraph right (mirrors the home page) */
.cm-service .service-container > section > .section-title,
.cm-service .service-container > section > h2:first-child { grid-column: 1; }

.cm-service .service-container > section > .section-title + .section-subtitle,
.cm-service .service-container > section > .section-title + p,
.cm-service .service-container > section > .section-title + div:not([class]) {
    grid-column: 2;
    align-self: end;
}

.cm-service .section-title,
.cm-service .service-container > section > h2:first-child {
    counter-increment: cm-svc;
    display: block;
    position: static;
    margin: 0 0 clamp(2.5rem, 5vw, 4rem) !important;
    padding: 0;
    color: var(--white) !important;
    text-align: left !important;
    font-size: clamp(2rem, 4.2vw, 3.8rem) !important;
    font-weight: 300 !important;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.cm-service .section-title::before,
.cm-service .service-container > section > h2:first-child::before {
    content: counter(cm-svc, decimal-leading-zero);
    display: block;
    margin-bottom: 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--dim-d);
}

.cm-service .section-title::after { content: none !important; }

.cm-service .section-subtitle,
.cm-service .service-container > section > .section-title + p,
.cm-service .service-container > section > .section-title + div:not([class]) {
    margin: 0 0 clamp(2.5rem, 5vw, 4rem) !important;
    max-width: 58ch !important;
    color: var(--mute-d) !important;
    text-align: left !important;
    font-size: 1.05rem !important;
    line-height: 1.65;
}

.cm-service .service-container > section p,
.cm-service .service-container > section li { line-height: 1.65; }

/* A heading row wrapped in a plain div (HIPAA callout) */
.cm-service .service-container > section > div:first-child h2 { color: var(--white) !important; font-weight: 300; letter-spacing: -0.03em; }

/* ---------- Rich text (overview / editor content / custom HTML) ---------- */
.cm-service .service-editor-content,
.cm-service .entry-content,
.cm-service .custom-content,
.cm-service .service-deep-dive .content {
    max-width: 72ch;
    margin: 0;
    padding: 0;
    color: var(--mute-d);
    font-size: 1.05rem;
    line-height: 1.75;
}

.cm-service .service-content .service-editor-content,
.cm-service .pen-test-pain > .service-editor-content { grid-column: 2; }
.cm-service .service-content > .service-editor-content:only-child { grid-column: 1 / -1; font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--white); font-weight: 300; line-height: 1.5; max-width: 48ch; }

.cm-service .service-editor-content h2,
.cm-service .service-editor-content h3,
.cm-service .custom-content h2,
.cm-service .custom-content h3,
.cm-service .entry-content h2,
.cm-service .entry-content h3 {
    color: var(--white) !important;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 2rem 0 1rem;
}

.cm-service .service-editor-content h2, .cm-service .custom-content h2 { font-size: 1.7rem; }
.cm-service .service-editor-content h3, .cm-service .custom-content h3 { font-size: 1.3rem; }
.cm-service .service-editor-content > :first-child { margin-top: 0; }

.cm-service .service-editor-content p,
.cm-service .custom-content p { margin: 0 0 1.1rem; }

.cm-service .service-editor-content ul,
.cm-service .service-editor-content ol,
.cm-service .custom-content ul,
.cm-service .custom-content ol { margin: 1rem 0 1.25rem; padding-left: 1.25rem; }

.cm-service .service-editor-content li,
.cm-service .custom-content li { margin-bottom: 0.45rem; }
.cm-service .service-editor-content li::marker,
.cm-service .custom-content li::marker { color: var(--accent); }

.cm-service .service-editor-content a,
.cm-service .custom-content a,
.cm-service .section p a:not([class*="btn"]),
.cm-service .faq-answer a {
    color: var(--white);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 0.2s ease;
}

.cm-service .service-editor-content a:hover,
.cm-service .custom-content a:hover,
.cm-service .section p a:not([class*="btn"]):hover,
.cm-service .faq-answer a:hover { color: var(--accent); }

.cm-service .service-editor-content img,
.cm-service .custom-content img { max-width: 100%; height: auto; margin: 1.5rem 0; border-radius: 0; }

.cm-service .service-editor-content blockquote,
.cm-service .custom-content blockquote {
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 1px solid var(--accent);
    color: var(--white);
    font-style: normal;
}


/* ---------- Card matrices ---------- */
.cm-service .benefits-grid,
.cm-service .pen-test-services-grid,
.cm-service .ra-covers-grid,
.cm-service .ra-audit-grid,
.cm-service .ra-frequency-grid,
.cm-service .service-feature-grid,
.cm-service .framework-choice-grid,
.cm-service .pen-test-pain-quotes:has(> div) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    border-top: 1px solid var(--line-d-strong);
    border-left: 1px solid var(--line-d);
    counter-reset: cm-card;
}

.cm-service .benefits-grid > *,
.cm-service .pen-test-services-grid > *,
.cm-service .ra-covers-grid > *,
.cm-service .ra-audit-grid > *,
.cm-service .ra-frequency-grid > *,
.cm-service .service-feature-grid > *,
.cm-service .framework-choice-grid > *,
.cm-service .pen-test-pain-quotes:has(> div) > div {
    counter-increment: cm-card;
    position: relative;
    margin: 0 !important;
    padding: 1.75rem 1.5rem 2rem !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid var(--line-d) !important;
    border-bottom: 1px solid var(--line-d) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    text-align: left !important;
    color: var(--mute-d);
    transition: background 0.25s ease;
}

.cm-service .benefits-grid > *::before,
.cm-service .pen-test-services-grid > *::before,
.cm-service .ra-covers-grid > *::before,
.cm-service .ra-audit-grid > *::before,
.cm-service .service-feature-grid > *::before {
    content: counter(cm-card, decimal-leading-zero);
    display: block;
    margin-bottom: 2.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--dim-d);
    transition: color 0.25s ease;
}

/* Accent line that draws across the top edge on hover */
.cm-service .benefits-grid > *::after,
.cm-service .pen-test-services-grid > *::after,
.cm-service .ra-covers-grid > *::after,
.cm-service .ra-audit-grid > *::after,
.cm-service .ra-frequency-grid > *::after,
.cm-service .service-feature-grid > *::after,
.cm-service .framework-choice-grid > *::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    height: 1px;
    width: 0;
    background: var(--accent);
    transition: width 0.45s ease;
}

.cm-service .benefits-grid > *:hover,
.cm-service .pen-test-services-grid > *:hover,
.cm-service .ra-covers-grid > *:hover,
.cm-service .ra-audit-grid > *:hover,
.cm-service .ra-frequency-grid > *:hover,
.cm-service .service-feature-grid > *:hover,
.cm-service .framework-choice-grid > *:hover { background: rgba(76, 144, 240, 0.05) !important; }

.cm-service .benefits-grid > *:hover::before,
.cm-service .pen-test-services-grid > *:hover::before,
.cm-service .ra-covers-grid > *:hover::before,
.cm-service .ra-audit-grid > *:hover::before,
.cm-service .service-feature-grid > *:hover::before { color: var(--accent); }

.cm-service .benefits-grid > *:hover::after,
.cm-service .pen-test-services-grid > *:hover::after,
.cm-service .ra-covers-grid > *:hover::after,
.cm-service .ra-audit-grid > *:hover::after,
.cm-service .ra-frequency-grid > *:hover::after,
.cm-service .service-feature-grid > *:hover::after,
.cm-service .framework-choice-grid > *:hover::after { width: 100%; }

.cm-service .benefits-grid h3, .cm-service .benefits-grid h4,
.cm-service .pen-test-services-grid h3, .cm-service .pen-test-services-grid h4,
.cm-service .ra-covers-grid h3, .cm-service .ra-audit-grid h4,
.cm-service .ra-frequency-grid h3, .cm-service .ra-frequency-grid h4,
.cm-service .service-feature-grid h3,
.cm-service .framework-choice-grid h2, .cm-service .framework-choice-grid h3,
.cm-service .pen-test-pain-quotes > div h3 {
    margin: 0 0 0.85rem !important;
    color: var(--white) !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.015em;
    line-height: 1.25;
    display: block;
}

.cm-service .benefits-grid p,
.cm-service .pen-test-services-grid p,
.cm-service .pen-test-services-grid ul,
.cm-service .ra-covers-grid p,
.cm-service .ra-audit-grid p,
.cm-service .ra-frequency-grid p,
.cm-service .service-feature-grid p,
.cm-service .framework-choice-grid p,
.cm-service .pen-test-pain-quotes > div p {
    margin: 0;
    color: var(--mute-d) !important;
    font-size: 0.95rem !important;
    line-height: 1.65;
}

.cm-service .pen-test-services-grid ul { padding-left: 1.1rem; }
.cm-service .pen-test-services-grid li::marker { color: var(--accent); }

/* Large emoji icons inside cards: muted so they read as glyphs */
.cm-service .pen-test-services-grid > * > div[style*="font-size: 2.5rem"],
.cm-service .pen-test-services-grid > * > div[style*="font-size:2.5rem"],
.cm-service .framework-card-icon { filter: grayscale(1); opacity: 0.8; font-size: 1.6rem !important; margin-bottom: 1rem !important; }

/* ---------- Risk assessment: UIcons on the card grids ----------
 * Added in CSS (by card position) so the icons also appear on content saved through the
 * page builder, which can't be edited from the theme. Glyphs: Flaticon UIcons Regular
 * Straight, loaded only on this template (see cybermarkagency_scripts()). If the cards
 * are reordered in the editor, reorder the codes below to match.
 */
.cm-service .ra-covers-grid > *::before,
.cm-service .ra-audit-grid > *::before,
.cm-service .ra-benefits .benefits-grid > *::before,
.cm-service .ra-frequency-grid > *::before {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 2rem;
    border: 1px solid var(--line-d-strong);
    color: var(--accent) !important;
    font-family: 'uicons-regular-straight' !important;
    font-size: 19px;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.cm-service :is(.ra-covers-grid, .ra-audit-grid, .ra-frequency-grid) > *:hover::before,
.cm-service .ra-benefits .benefits-grid > *:hover::before { border-color: var(--accent); background: rgba(76, 144, 240, 0.08); }

/* What a risk assessment covers */
.cm-service .ra-covers-grid > :nth-child(1)::before { content: '\e267'; } /* box-open: asset identification */
.cm-service .ra-covers-grid > :nth-child(2)::before { content: '\f053'; } /* shield-exclamation: threat analysis */
.cm-service .ra-covers-grid > :nth-child(3)::before { content: '\e2cb'; } /* bug: vulnerability assessment */
.cm-service .ra-covers-grid > :nth-child(4)::before { content: '\e171'; } /* balance-scale-left: risk evaluation */
.cm-service .ra-covers-grid > :nth-child(5)::before { content: '\f11a'; } /* sort-amount-down: risk prioritisation */
.cm-service .ra-covers-grid > :nth-child(n+6)::before { content: '\f04f'; } /* shield-check */

/* What the audit reviews */
.cm-service .ra-audit-grid > :nth-child(1)::before { content: '\e661'; } /* document-signed: policies */
.cm-service .ra-audit-grid > :nth-child(2)::before { content: '\f3d3'; } /* user-lock: access control */
.cm-service .ra-audit-grid > :nth-child(3)::before { content: '\ecc3'; } /* network */
.cm-service .ra-audit-grid > :nth-child(4)::before { content: '\eaec'; } /* laptop: endpoints */
.cm-service .ra-audit-grid > :nth-child(5)::before { content: '\e5c7'; } /* database: data protection */
.cm-service .ra-audit-grid > :nth-child(6)::before { content: '\f0a5'; } /* siren-on: incident response */
.cm-service .ra-audit-grid > :nth-child(7)::before { content: '\ec03'; } /* memo-circle-check: compliance */
.cm-service .ra-audit-grid > :nth-child(n+8)::before { content: '\f04f'; } /* shield-check */

/* Key benefits */
.cm-service .ra-benefits .benefits-grid > :nth-child(1)::before { content: '\ef0e'; } /* radar: comprehensive scope */
.cm-service .ra-benefits .benefits-grid > :nth-child(2)::before { content: '\e3b7'; } /* chart-line-up: risk quantification */
.cm-service .ra-benefits .benefits-grid > :nth-child(3)::before { content: '\efab'; } /* route: remediation roadmap */
.cm-service .ra-benefits .benefits-grid > :nth-child(4)::before { content: '\eeba'; } /* presentation: executive reporting */
.cm-service .ra-benefits .benefits-grid > :nth-child(5)::before { content: '\f04f'; } /* shield-check: regulatory alignment */
.cm-service .ra-benefits .benefits-grid > :nth-child(6)::before { content: '\e99f'; } /* headset: follow-up support */
.cm-service .ra-benefits .benefits-grid > :nth-child(n+7)::before { content: '\f04f'; }

/* How often to assess (replaces the emoji) */
.cm-service .ra-frequency-grid > :nth-child(1)::before { content: '\e30c'; } /* calendar: annual */
.cm-service .ra-frequency-grid > :nth-child(2)::before { content: '\e31a'; } /* calendar-lines: quarterly */
.cm-service .ra-frequency-grid > :nth-child(3)::before { content: '\e212'; } /* bolt: after incidents */
.cm-service .ra-frequency-grid > :nth-child(n+4)::before { content: '\e30c'; }
.cm-service .ra-frequency-grid > * > div:first-child[style*="font-size"] { display: none; }

/* ---------- Pain-point quotes ---------- */
.cm-service .pen-test-pain-quotes:not(:has(> div)) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    margin: 0;
    max-width: none;
    background: var(--line-d);
    border: 1px solid var(--line-d);
}

.cm-service .pen-test-pain-quotes blockquote {
    margin: 0;
    padding: 2rem 1.75rem;
    background: var(--black) !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--white) !important;
    font-style: normal !important;
    font-size: 1.05rem !important;
    font-weight: 300;
    line-height: 1.55;
}

.cm-service .service-container > section:nth-of-type(even) .pen-test-pain-quotes blockquote { background: var(--ink) !important; }

.cm-service .pen-test-pain-quotes blockquote::before {
    content: '“';
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-mono);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--accent);
}

.cm-service .pen-test-pain-footer,
.cm-service .pen-test-pain > p:last-child:not(:first-child) {
    margin: 2rem 0 0 !important;
    max-width: 72ch !important;
    color: var(--mute-d) !important;
    text-align: left !important;
    font-size: 1.05rem !important;
}

/* ---------- Process steps: timeline ---------- */
.cm-service .pen-test-process-steps,
.cm-service .ra-process-steps {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    border-top: 1px solid var(--line-d-strong);
}

.cm-service .pen-test-step,
.cm-service .ra-step {
    position: relative;
    margin: 0;
    padding: 2.25rem 2rem 0.5rem 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    text-align: left !important;
}

.cm-service .pen-test-step + .pen-test-step,
.cm-service .ra-step + .ra-step { padding-left: 2rem !important; border-left: 1px solid var(--line-d) !important; }

/* Node on the timeline */
.cm-service .pen-test-step::before,
.cm-service .ra-step::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    width: 11px;
    height: 11px;
    background: var(--black);
    border: 1px solid var(--white);
    transition: background 0.25s ease;
}

.cm-service .pen-test-step + .pen-test-step::before,
.cm-service .ra-step + .ra-step::before { left: -6px; }

.cm-service .pen-test-step:hover::before,
.cm-service .ra-step:hover::before { background: var(--accent); border-color: var(--accent); }

.cm-service .pen-test-step-num,
.cm-service .ra-step-num {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 1.5rem !important;
    background: none !important;
    border-radius: 0 !important;
    color: transparent !important;
    -webkit-text-stroke: 1px var(--white);
    font-size: clamp(3rem, 5vw, 4.5rem) !important;
    font-weight: 300 !important;
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.cm-service .pen-test-step h3,
.cm-service .ra-step h3 {
    margin: 0 0 0.75rem;
    color: var(--white) !important;
    font-size: 1.2rem !important;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.cm-service .pen-test-step p,
.cm-service .ra-step p { margin: 0; color: var(--mute-d) !important; font-size: 0.95rem !important; line-height: 1.65; }

/* ---------- Pricing ---------- */
.cm-service .services-pricing-grid,
.cm-service .ra-pricing-grid,
.cm-service .eds-pricing-grid,
.cm-service .pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    max-width: none !important;
}

.cm-service .services-pricing-card,
.cm-service .ra-pricing-card,
.cm-service .pricing-card {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 !important;
    padding: 2rem !important;
    background: rgba(255, 255, 255, 0.015) !important;
    border: 1px solid var(--line-d-strong) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    color: var(--mute-d);
    text-align: left !important;
    transition: border-color 0.25s ease;
}

.cm-service .services-pricing-card:hover,
.cm-service .ra-pricing-card:hover,
.cm-service .pricing-card:hover { border-color: var(--white) !important; }

.cm-service .services-pricing-card h3,
.cm-service .ra-pricing-card h3,
.cm-service .pricing-card h3 {
    margin: 0 0 2rem !important;
    color: var(--mute-d) !important;
    font-family: var(--font-mono);
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cm-service .services-price,
.cm-service .pricing-price,
.cm-service .pricing-amount,
.cm-service .ra-pricing-card > div[style*="font-size:2em"],
.cm-service .ra-pricing-card > div[style*="font-size: 2em"] {
    margin: 0 0 0.75rem !important;
    color: var(--white) !important;
    font-size: clamp(2.4rem, 4vw, 3.6rem) !important;
    font-weight: 300 !important;
    letter-spacing: -0.045em;
    line-height: 1;
}

.cm-service .services-price strong,
.cm-service .pricing-price strong { font-weight: 300; }

.cm-service .services-price span,
.cm-service .pricing-price span,
.cm-service .pricing-period {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.7rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dim-d) !important;
}

.cm-service .services-pricing-card ul,
.cm-service .ra-pricing-card ul,
.cm-service .pricing-card ul {
    list-style: none !important;
    margin: 1.5rem 0 1.5rem !important;
    padding: 0 !important;
    border-top: 1px solid var(--line-d);
    flex-grow: 1;
}

.cm-service .services-pricing-card li,
.cm-service .ra-pricing-card li,
.cm-service .pricing-card li {
    position: relative;
    margin: 0 !important;
    padding: 0.75rem 0 0.75rem 1.5rem !important;
    border-bottom: 1px solid var(--line-d) !important;
    color: var(--mute-d) !important;
    font-size: 0.93rem !important;
    list-style: none;
}

.cm-service .services-pricing-card li::before,
.cm-service .ra-pricing-card li::before,
.cm-service .pricing-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.2rem;
    width: 8px;
    height: 1px;
    background: var(--accent);
}

/* Featured / "popular" markers */
.cm-service .pricing-badge,
.cm-service .popular-badge,
.cm-service .services-pricing-card [class*="badge"] {
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 0.4rem 0.7rem;
    background: var(--white) !important;
    color: var(--black) !important;
    border-radius: 0 !important;
    font-family: var(--font-mono);
    font-size: 0.65rem !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---------- FAQ ---------- */
.cm-service .faq-container,
.cm-service .hipaa-faq-container {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    border-top: 1px solid var(--line-d-strong);
    counter-reset: cm-faq;
}

/* Put the FAQ list in the right-hand column, under the section head */
.cm-service .service-faq > .faq-container,
.cm-service .pen-test-faq > .faq-container,
.cm-service .service-container > section > .hipaa-faq-container { grid-column: 2; }

.cm-service .faq-item,
.cm-service .hipaa-faq-container > details {
    counter-increment: cm-faq;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line-d) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.cm-service .faq-question,
.cm-service .hipaa-faq-container summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 52px 1fr 24px;
    align-items: baseline;
    gap: 0.75rem;
    padding: 1.35rem 0 !important;
    margin: 0 !important;
    color: var(--white) !important;
    font-size: 1.08rem !important;
    font-weight: 400 !important;
    transition: color 0.2s ease;
}

.cm-service .faq-question::-webkit-details-marker,
.cm-service .hipaa-faq-container summary::-webkit-details-marker { display: none; }

.cm-service .faq-question:hover,
.cm-service .hipaa-faq-container summary:hover { color: var(--accent) !important; }

.cm-service .faq-question::before,
.cm-service .hipaa-faq-container summary::before {
    content: 'Q.' counter(cm-faq, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--dim-d);
}

.cm-service .faq-question::after,
.cm-service .hipaa-faq-container summary::after {
    content: '+' !important;
    font-family: var(--font-mono);
    text-align: right;
    color: var(--mute-d);
    transition: transform 0.25s ease;
}

.cm-service .faq-item.active .faq-question::after,
.cm-service .faq-item[open] .faq-question::after,
.cm-service .hipaa-faq-container > details[open] summary::after { transform: rotate(45deg); color: var(--accent); }

.cm-service .faq-answer,
.cm-service .hipaa-faq-container > details > :not(summary) {
    margin: 0 !important;
    padding: 0 2rem 1.5rem calc(52px + 0.75rem) !important;
    border: 0 !important;
    color: var(--mute-d) !important;
    line-height: 1.7;
}

.cm-service .faq-item:not(details) .faq-answer { display: none; }
.cm-service .faq-item.active .faq-answer { display: block; }
.cm-service .faq-answer p { margin: 0 0 0.75rem; }

/* ---------- Service detail extras ---------- */
.cm-service .service-deep-dive {
    margin: 0 !important;
    padding: 2.5rem !important;
    background: var(--ink-2) !important;
    border: 1px solid var(--line-d) !important;
    border-radius: 0 !important;
}

.cm-service .service-deep-dive h2 { color: var(--white) !important; text-align: left !important; font-weight: 300; letter-spacing: -0.03em; }

/* ---------- Final CTA ---------- */
.cm-service .final-cta,
.cm-service .service-cta-banner {
    position: relative;
    overflow: hidden;
    display: block !important;
    margin: 0 !important;
    padding: clamp(5rem, 11vw, 9rem) var(--cm-inline) !important;
    background: var(--black) !important;
    color: var(--white) !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--line-d) !important;
    text-align: left !important;
}

.cm-service .final-cta::before,
.cm-service .service-cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--line-d) 1px, transparent 1px), linear-gradient(90deg, var(--line-d) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 70%);
    opacity: 0.7;
    pointer-events: none;
}

.cm-service .final-cta > *,
.cm-service .service-cta-banner > * { position: relative; }

.cm-service .final-cta h2,
.cm-service .service-cta-banner h2 {
    margin: 0 0 2rem !important;
    max-width: 14ch;
    color: var(--white) !important;
    font-size: clamp(2.4rem, 7vw, 6.5rem) !important;
    font-weight: 300 !important;
    line-height: 0.96;
    letter-spacing: -0.05em;
}

.cm-service .final-cta p,
.cm-service .service-cta-banner p {
    margin: 0 0 2rem;
    max-width: 56ch;
    padding-top: 2rem;
    border-top: 1px solid var(--line-d-strong);
    color: var(--mute-d) !important;
    opacity: 1 !important;
    font-size: 1.1rem !important;
}

.cm-service .final-cta .contact-info {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-d);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--dim-d);
}

.cm-service .final-cta .contact-info p { margin: 0; padding: 0; border: 0; font-size: 0.75rem !important; color: var(--mute-d) !important; }

/* Pricing-card buttons sit at the bottom of the card */
.cm-service .services-pricing-card .btn,
.cm-service .services-pricing-card .btn-primary,
.cm-service .ra-pricing-card a,
.cm-service .pricing-card .pricing-cta { margin-top: auto !important; justify-content: space-between; }

/* ---------- Section-specific inline-style fixes ---------- */
/* Centered inline intros read as left-aligned HUD copy */
.cm-service .service-container > section > p[style*="text-align"],
.cm-service .service-container > section > div[style*="text-align"] { text-align: left !important; margin-left: 0 !important; }

/* Headings with inline sizes inside sections */
.cm-service .service-container h2[style] { font-weight: 300 !important; letter-spacing: -0.03em; }
.cm-service .service-container h3[style], .cm-service .service-container h4[style] { font-weight: 500 !important; }


/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .cm-service .service-container > section,
    .cm-service .service-container > .custom-content,
    .cm-service section.framework-choose-section { grid-template-columns: minmax(0, 1fr); }

    .cm-service .service-container > section > *,
    .cm-service .service-container > section > .section-title + .section-subtitle,
    .cm-service .service-container > section > .section-title + p,
    .cm-service .service-container > section > .section-title + div:not([class]),
    .cm-service .service-content .service-editor-content,
    .cm-service .pen-test-pain > .service-editor-content,
    .cm-service .service-faq > .faq-container,
    .cm-service .pen-test-faq > .faq-container,
    .cm-service .service-container > section > .hipaa-faq-container { grid-column: 1 / -1; }

    .cm-service .section-title { margin-bottom: 1.25rem !important; }

    .cm-service .pen-test-process-steps,
    .cm-service .ra-process-steps { grid-template-columns: 1fr !important; border-top: 0; border-left: 1px solid var(--line-d-strong); }

    .cm-service .pen-test-step,
    .cm-service .pen-test-step + .pen-test-step,
    .cm-service .ra-step,
    .cm-service .ra-step + .ra-step { padding: 0 0 2.5rem 2rem !important; border-left: 0 !important; }

    .cm-service .pen-test-step::before,
    .cm-service .pen-test-step + .pen-test-step::before,
    .cm-service .ra-step::before,
    .cm-service .ra-step + .ra-step::before { top: 0.4rem; left: -6px; }

    .cm-service .hero-tick-item { flex: 1 1 50%; border-bottom: 1px solid var(--line-d); }
}

@media (max-width: 560px) {
    .cm-service .hero-tick-item { flex-basis: 100%; border-left: 0 !important; border-right: 0; padding-left: 0; }
    .cm-service .faq-question,
    .cm-service .hipaa-faq-container summary { grid-template-columns: 1fr 24px; }
    .cm-service .faq-question::before,
    .cm-service .hipaa-faq-container summary::before { display: none; }
    .cm-service .faq-answer,
    .cm-service .hipaa-faq-container > details > :not(summary) { padding: 0 0 1.25rem !important; }
    .cm-service .btn-primary,
    .cm-service .btn-secondary,
    .cm-service .btn,
    .cm-service .btn-outline { width: 100%; justify-content: space-between; }
}