/* ==========================================================================
   Cybersecurity, GRC & Assurance page (cybersecurity.php)
   All rules are scoped under .cs-page so they never leak into other pages.
   main.css sets global p / li / a / h2 sizes, so sizes are re-declared here.
   ========================================================================== */

.cs-page {
    --cs-dark: #0c1017;
    --cs-dark-2: #11151d;
    --cs-black: #000;
    --cs-light: #f6f6f6;
    --cs-ink: #2b2b2b;
    --cs-muted: #6b6f76;
    --cs-muted-dark: #b9bdc6;
    --cs-line-dark: rgba(255, 255, 255, .14);
    --cs-line-light: #e3e3e3;
    --cs-defend: #8fb3f2;
    --cs-govern: #f08aa5;
    --cs-prove: #b8a9f5;
    --cs-defend-strong: #5b8fe0;
    --cs-govern-strong: #e2668a;
    --cs-prove-strong: #8f84d8;
    --cs-salmon: #f39c9c;
    --cs-red: #ee5a5a;
    --cs-blue-btn: #0b5ccf;
    --cs-amber: #f0a52f;
    --cs-radius: 16px;
    color: var(--cs-ink);
    overflow-x: hidden;
}

.cs-page *,
.cs-page *::before,
.cs-page *::after {
    box-sizing: border-box;
}

/* Reset the global sizes from main.css inside the page */
/* :where() keeps this reset at class-level specificity, so the component classes below win */
.cs-page :where(p, li, a, span, label, td, th) {
    font-size: inherit;
    line-height: inherit;
}

.cs-page :where(p) {
    margin-bottom: 0;
}

/* :where() keeps this reset at low specificity so each heading class can set its own spacing */
.cs-page :where(h1, h2, h3, h4) {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.cs-page ul {
    margin: 0;
    padding: 0;
}

.cs-page img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Layout width: the page uses Bootstrap's .container, the same as the header and every other page */

.cs-section {
    padding: 96px 0;
    font-size: 16px;
    line-height: 1.6;
    scroll-margin-top: 90px;
}

.cs-dark {
    background: var(--cs-dark);
    color: #fff;
}

.cs-light {
    background: var(--cs-light);
    color: var(--cs-ink);
}

.cs-h2 {
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem) !important;
    line-height: 1.25 !important;
}

.cs-h2 span {
    font-size: inherit !important;
    line-height: inherit !important;
}

.cs-lead {
    font-size: 15px;
    line-height: 1.65;
}

.cs-dark .cs-lead {
    color: #e6e8ec;
}

.cs-light .cs-lead {
    color: #4a4d52;
}

/* ---------- Section label row (red pill + line + label) ---------- */
.cs-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.cs-eyebrow-row .cs-pill {
    flex: 0 0 48px;
    height: 8px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f26b6b, #f7a7a7);
}

.cs-eyebrow-row .cs-rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--cs-line-dark);
}

.cs-light .cs-eyebrow-row .cs-rule {
    background: #cfcfcf;
}

.cs-eyebrow-row .cs-label {
    flex: 0 0 auto;
    font-size: 14px;
    letter-spacing: .02em;
}

.cs-dark .cs-eyebrow-row .cs-label {
    color: #fff;
}

.cs-light .cs-eyebrow-row .cs-label {
    color: #3a3a3a;
}

.cs-head-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 64px;
    align-items: start;
    margin-bottom: 48px;
}

/* ---------- Buttons ---------- */
.cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 10px;
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1.2 !important;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    border: 1.5px solid transparent;
    cursor: pointer;
}

.cs-btn:hover {
    transform: translateY(-1px);
}

.cs-btn-primary {
    background: var(--cs-blue-btn);
    color: #fff;
}

.cs-btn-primary:hover,
.cs-btn-primary:focus {
    background: #094cab;
    color: #fff;
}

.cs-btn-outline-light {
    border-color: #fff;
    color: #fff;
    background: transparent;
}

.cs-btn-outline-light:hover,
.cs-btn-outline-light:focus {
    background: #fff;
    color: #0c1017;
}

.cs-btn-dark {
    background: #1b1b1b;
    color: #fff;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 14px !important;
}

.cs-btn-dark:hover,
.cs-btn-dark:focus {
    background: #000;
    color: #fff;
}

.cs-page a:focus-visible,
.cs-page button:focus-visible,
.cs-page input:focus-visible,
.cs-page select:focus-visible,
.cs-page textarea:focus-visible {
    outline: 2px solid #5b8fe0;
    outline-offset: 2px;
}

/* ==========================================================================
   1. Hero
   ========================================================================== */
.cs-hero {
    position: relative;
    background: #05070c url("../images/Cybersecurity/hero-bg.png") right center / cover no-repeat;
    color: #fff;
    padding: 96px 0 56px;
    font-size: 16px;
    line-height: 1.6;
}

.cs-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 7, 12, .96) 0%, rgba(5, 7, 12, .88) 38%, rgba(5, 7, 12, .55) 70%, rgba(5, 7, 12, .7) 100%);
}

.cs-hero>.container {
    position: relative;
}

.cs-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
    align-items: center;
}

.cs-hero-eyebrow {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 28px;
}

.cs-hero h1 {
    font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem) !important;
    line-height: 1.1 !important;
    color: #a9c6f2;
    margin-bottom: 28px;
}

.cs-hero-text {
    font-size: 15px;
    line-height: 1.65;
    max-width: 560px;
    margin-bottom: 32px;
}

.cs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.cs-hero-visual img {
    margin: 0 auto;
    width: min(100%, 400px);
}

.cs-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px dashed rgba(255, 255, 255, .18);
}

.cs-stat-title {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 8px;
}

.cs-stat-sub {
    font-size: 13px;
    color: #c4c8cf;
}

/* ==========================================================================
   2. Three lines intro (Defend / Govern / Prove)
   ========================================================================== */
.cs-intro {
    background: #0e121a;
}

.cs-intro .cs-h2 {
    max-width: 1120px;
    margin-bottom: 24px;
}

.cs-intro .cs-lead {
    max-width: 1020px;
    margin-bottom: 48px;
}

.cs-lines-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #000;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 20px;
    box-shadow: 0 0 24px rgba(255, 255, 255, .06);
    overflow: hidden;
}

.cs-line-col {
    padding: 28px 26px 26px;
    display: flex;
    flex-direction: column;
}

.cs-line-col+.cs-line-col {
    border-left: 1px solid rgba(255, 255, 255, .2);
}

.cs-line-title {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
}

.cs-line-sub {
    font-size: 14px;
    color: #d5d8de;
    margin-top: 4px;
}

.cs-line-q {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    margin: 18px 0 16px;
    min-height: 3em;
}

.cs-line-meta {
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding: 14px 0;
}

.cs-meta-label {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9aa0a8;
    margin-bottom: 4px;
}

.cs-meta-value {
    font-size: 13.5px;
    line-height: 1.6;
    color: #f0f1f4;
}

.cs-line-btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 22px;
    border-radius: 12px;
    border: 1px solid currentColor;
    font-size: 14px !important;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease;
}

.cs-line-btn:hover {
    background: rgba(255, 255, 255, .06);
}

.cs-c-defend {
    color: var(--cs-defend) !important;
}

.cs-c-govern {
    color: var(--cs-govern) !important;
}

.cs-c-prove {
    color: var(--cs-prove) !important;
}

.cs-quote {
    text-align: center;
    font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
    font-weight: 600;
    line-height: 1.45;
    margin: 72px auto 64px;
    max-width: 760px;
}

.cs-quote em {
    font-style: normal;
    color: var(--cs-salmon);
}

.cs-banner {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.cs-banner img {
    width: 100%;
    min-height: 220px;
    object-fit: cover;
    object-position: left center;
}

.cs-banner-text {
    position: absolute;
    right: 28px;
    bottom: 32px;
    text-align: right;
    color: #fff;
    font-size: clamp(1.25rem, .9rem + 1.3vw, 2rem);
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

/* ==========================================================================
   3. The rules changed
   ========================================================================== */
.cs-rules .cs-h2 .cs-red {
    color: var(--cs-red);
}

.cs-rules .cs-head-grid .cs-lead {
    font-size: 14px;
}

.cs-rule-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.cs-rule-card {
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 14px;
    padding: 22px 22px 26px;
}

.cs-rule-tag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #2c6fd1;
    margin-bottom: 14px;
}

.cs-rule-tag::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1f5fbf;
}

.cs-rule-stat {
    font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.4rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--cs-ink);
    margin-bottom: 16px;
}

.cs-rule-text {
    font-size: 13px;
    line-height: 1.6;
    color: #5d6066;
}

.cs-rules-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 64px;
    align-items: center;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #dedede;
}

.cs-rules-statement {
    font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
    line-height: 1.45;
    color: #3a3a3a;
}

.cs-note-box {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    padding: 18px 24px;
    font-size: 13px;
    line-height: 1.6;
    color: #4a4d52;
}

.cs-note-box a {
    color: #0b5ccf;
    text-decoration: underline;
}

/* ==========================================================================
   4. Defend — capability cards
   ========================================================================== */
.cs-defend {
    background: #0d1117;
}

.cs-media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 48px;
}

.cs-photo {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    min-height: 260px;
}

.cs-media-grid.is-stretch {
    align-items: stretch;
}

.cs-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-photo-caption {
    position: absolute;
    left: 22px;
    bottom: 18px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.cs-cap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* Card = two stacked faces in one grid cell, so the card is as tall as its longest face.
   Front: number, title, tagline, "What we deliver". Back (Figma "Property 1=Variant…"): navy detail.
   Shown on hover (mouse/trackpad) and toggled by click, tap or keyboard (.is-open). */
.cs-cap-card {
    position: relative;
    display: grid;
    min-height: 440px;
    border-radius: 24px;
    cursor: pointer;
    isolation: isolate;
}

.cs-cap-face {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.cs-cap-front {
    background: #1a1b1f;
    border: 1px solid rgba(255, 255, 255, .16);
    padding: 22px 20px 20px;
    box-shadow: 0 0 18px rgba(143, 179, 242, .06);
}

.cs-cap-back {
    background: #002b56;
    border: 1px solid #808080;
    padding: 24px 20px;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
}

.cs-cap-card.is-open .cs-cap-front {
    opacity: 0;
    visibility: hidden;
}

.cs-cap-card.is-open .cs-cap-back {
    opacity: 1;
    visibility: visible;
    transform: none;
}

@media (hover: hover) and (pointer: fine) {
    .cs-cap-card:hover .cs-cap-front {
        opacity: 0;
        visibility: hidden;
    }

    .cs-cap-card:hover .cs-cap-back {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

.cs-cap-num {
    font-size: 12px;
    color: var(--cs-defend);
    margin-bottom: 14px;
}

.cs-cap-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.cs-cap-text {
    font-size: 14px;
    line-height: 1.6;
    color: #e3e5ea;
}

.cs-cap-link {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: 0;
    padding: 0 6px;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 600;
    color: var(--cs-defend) !important;
    text-align: left;
    cursor: pointer;
}

.cs-cap-back-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
}

.cs-cap-back-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.cs-cap-back-num {
    font-size: 18px;
    font-weight: 600;
    color: #a9c6f2;
}

.cs-cap-list {
    width: 100%;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.cs-cap-list li {
    position: relative;
    list-style: none;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #eef2f7;
    padding: 0 0 5px 16px !important;
}

.cs-cap-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .65em;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #eef2f7;
}

.cs-cap-outcome {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
}

/* ==========================================================================
   5. Govern — GRC
   ========================================================================== */
.cs-grc-visuals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.cs-grc-visuals img {
    width: 100%;
    border-radius: 14px;
}

.cs-grc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 22px;
    overflow: hidden;
}

.cs-grc-cell {
    padding: 26px 20px 30px;
    border-right: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
}

.cs-grc-cell:nth-child(4n) {
    border-right: 0;
}

.cs-grc-cell:nth-last-child(-n+4) {
    border-bottom: 0;
}

/* Number followed by a divider line, vertically centred on the number */
.cs-grc-num {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    line-height: 1;
    color: #8a80d9;
    margin-bottom: 14px;
}

.cs-grc-num::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e6e6e6;
}

.cs-grc-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--cs-ink);
    margin-bottom: 10px;
}

.cs-grc-tag {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #6047cf;
    margin-bottom: 10px;
}

.cs-grc-list li {
    position: relative;
    list-style: none;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    color: #62656b;
    padding: 0 0 6px 18px !important;
}

.cs-grc-list li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: .7em;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #8a8d93;
}

.cs-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.cs-chip-black {
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    padding: 9px 18px;
}

/* ==========================================================================
   6. Prove — audit & assurance
   ========================================================================== */
.cs-prove {
    background: #0d1117;
}

.cs-prove-note {
    font-size: 15px;
    line-height: 1.65;
    color: #e6e8ec;
    margin: 0 0 24px;
}

.cs-audit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 48px;
    padding: 32px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.cs-audit-head {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.cs-audit-num {
    font-size: 52px;
    font-weight: 600;
    line-height: 1;
    color: #c9bff7;
    flex: 0 0 auto;
}

.cs-audit-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 8px;
}

.cs-audit-sub {
    font-size: 13px;
    color: #d6d8de;
}

.cs-check-list li {
    list-style: none;
    position: relative;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #e3e5ea;
    padding: 0 0 8px 24px !important;
}

.cs-check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    border: 1.5px solid #b8a9f5;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23b8a9f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.cs-outcome-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 32px 0 0;
    padding: 0 8px;
}

.cs-outcome {
    background: #1e1b33;
    border: 1px solid #3c3770;
    border-radius: 10px;
    padding: 20px 16px;
    text-align: center;
    font-size: 13.5px;
    color: #e8e6f7;
}

/* Three lines. One nervous system. */
.cs-loop {
    margin-top: 72px;
}

.cs-loop .cs-lead {
    margin: 20px 0 40px;
    font-size: 13.5px;
}

.cs-loop-grid {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 40px;
    align-items: center;
}

.cs-loop-visual img {
    width: min(100%, 360px);
    margin: 0 auto;
}

.cs-loop-steps li {
    list-style: none;
    display: grid;
    grid-template-columns: 40px 1fr;
    padding: 0 0 18px !important;
    font-size: inherit !important;
}

.cs-loop-n {
    font-size: 18px;
    color: #e0607e;
    line-height: 1.6;
}

.cs-loop-t {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.cs-loop-d {
    font-size: 13px;
    line-height: 1.6;
    color: #d6d8de;
    margin-top: 4px;
}

.cs-loop-close {
    text-align: center;
    font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
    font-weight: 600;
    line-height: 1.45;
    margin-top: 40px;
}

.cs-loop-close span {
    display: block;
    color: var(--cs-salmon);
}

/* ==========================================================================
   7. Programmes
   ========================================================================== */
.cs-prog-list {
    display: grid;
    gap: 18px;
}

.cs-prog {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 24px 40px;
    align-items: center;
    background: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 24px;
    padding: 28px 26px;
}

.cs-prog-num {
    font-size: 11px;
    color: #9a9a9a;
    margin-bottom: 4px;
}

.cs-prog-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cs-ink);
}

.cs-prog-sub {
    font-size: 14px;
    line-height: 1.6;
    color: #6b6f76;
    margin: 6px 0 16px;
}

.cs-prog-rows li {
    list-style: none;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    align-items: start;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #3d4046;
    padding: 12px 6px !important;
    border-bottom: 1px solid #e6e6e6;
}

.cs-prog-rows li:last-child {
    border-bottom: 0;
}

.cs-prog-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding-top: 2px;
}

.cs-prog-line::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: .75;
}

.cs-l-defend {
    color: var(--cs-defend-strong);
}

.cs-l-govern {
    color: var(--cs-govern-strong);
}

.cs-l-prove {
    color: var(--cs-prove-strong);
}

/* ==========================================================================
   8. Engagement models + five-step method
   ========================================================================== */
.cs-models .cs-h2 {
    margin-bottom: 40px;
}

.cs-model-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.cs-model {
    background: #000;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 18px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
}

/* Align title / kind / text / best-for rows across the three cards */
@supports (grid-template-rows: subgrid) {
    .cs-model-grid {
        grid-template-rows: repeat(4, auto);
    }

    .cs-model {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 4;
        row-gap: 0;
    }
}

.cs-model-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--cs-amber);
}

.cs-model-kind {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    margin: 12px 0 0;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.cs-model-text {
    font-size: 14px;
    line-height: 1.65;
    color: #eceef2;
    padding: 14px 0 18px;
    flex: 1 1 auto;
}

.cs-model-best {
    font-size: 13.5px;
    line-height: 1.6;
    color: #fff;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.cs-model-best b {
    font-weight: 400;
    color: #9aa0a8;
}

.cs-models-note {
    text-align: center;
    font-size: 13.5px;
    color: #e6e8ec;
    margin: 28px 0 48px;
}

.cs-method-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 32px;
}

.cs-method {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.cs-step {
    position: relative;
}

.cs-step-dot {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    background: var(--cs-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 18px;
}

.cs-step::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 44px;
    right: -16px;
    border-top: 1.5px dotted rgba(255, 255, 255, .35);
}

/* last step's line stops at the container edge */
.cs-step:last-child::before {
    right: 0;
}

.cs-step-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 10px;
}

.cs-step-text {
    font-size: 13.5px;
    line-height: 1.65;
    color: #c9ccd3;
}

/* ==========================================================================
   9. Regulation map
   ========================================================================== */
.cs-table-wrap {
    border-radius: 16px;
    border: 1px solid #dcdcdc;
    background: #fff;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cs-reg-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.6;
    color: #4a4d52;
}

.cs-reg-table thead th {
    background: #1b1b1b;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-align: left;
    padding: 18px 18px;
}

.cs-reg-table td {
    padding: 18px;
    vertical-align: top;
    border-top: 1px solid #ececec;
    width: 20%;
}

.cs-reg-table td:first-child {
    font-weight: 700;
    color: #1f2125;
}

.cs-frameworks {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px 32px;
    align-items: start;
    margin-top: 48px;
}

.cs-frameworks-label {
    font-size: 17px;
    color: #4a4d52;
    padding-top: 6px;
}

.cs-fw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cs-fw-chips span {
    background: #fff;
    border: 1px solid #d3d3d3;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px !important;
    color: #4a4d52;
}

.cs-center {
    text-align: center;
    margin-top: 48px;
}

/* ==========================================================================
   10. Industries + regions
   ========================================================================== */
.cs-ind-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.cs-ind {
    background: #26282d;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    min-height: 310px;
}

.cs-ind-tag {
    font-size: 11px;
    color: #e3a33b;
    margin-bottom: 6px;
}

.cs-ind-tag.is-emerging {
    color: #ea8a5c;
}

.cs-ind-title {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.cs-ind-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #b8bcc4;
    margin-top: 8px;
}

.cs-ind-lead {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.cs-ind-lead-label {
    font-size: 11.5px;
    color: #8fb3f2;
    margin-bottom: 8px;
}

.cs-ind-lead-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: #fff;
}

.cs-regions {
    margin-top: 96px;
}

.cs-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 36px;
    border: 0;
}

.cs-tab {
    background: none;
    border: 0;
    border-bottom: 1.5px solid rgba(255, 255, 255, .25);
    color: #fff;
    text-align: left;
    padding: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s ease;
}

.cs-tab small {
    font-size: 11px;
    font-weight: 400;
    color: #c9ccd3;
    margin-left: 6px;
}

.cs-tab.active {
    border-bottom: 2px solid #2f6fd6;
}

.cs-tab:hover {
    border-bottom-color: #5b8fe0;
}

.cs-region-pane {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 24px 56px;
}

.cs-region-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.55;
    margin-bottom: 14px;
}

.cs-region-sub {
    font-size: 12px;
    color: #c9ccd3;
}

.cs-reg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cs-reg-chips span {
    background: #0f1a2e;
    border: 1px solid #2b5ea8;
    color: #dfe7f5;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px !important;
    height: fit-content;
}

/* ==========================================================================
   11. One partner
   ========================================================================== */
.cs-partner .cs-h2 .cs-red {
    color: #d0161c;
}

.cs-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.cs-why {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    padding: 22px 22px 30px;
}

/* Number followed by a divider line, vertically centred on the number */
.cs-why-num {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    line-height: 1;
    color: #7b6fd6;
    margin-bottom: 16px;
}

.cs-why-num::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e6e6e6;
}

.cs-why-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cs-ink);
    margin-bottom: 12px;
}

.cs-why-text {
    font-size: 13px;
    line-height: 1.65;
    color: #6b6f76;
}

/* ==========================================================================
   12. How this works in practice
   ========================================================================== */
.cs-practice .cs-lead {
    margin: 24px 0 40px;
}

.cs-case-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.cs-case {
    background: #0b0f17;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 16px;
    padding: 20px 14px 14px;
    display: flex;
    flex-direction: column;
}

.cs-case-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.cs-c-data {
    color: #f2c46b !important;
}

.cs-case-sub {
    font-size: 14px;
    color: #e6e8ec;
    margin: 4px 0 14px;
}

.cs-case p {
    font-size: 13px;
    line-height: 1.6;
    color: #e6e8ec;
    margin-bottom: 14px;
}

.cs-case p b {
    font-weight: 700;
}

.cs-case-result {
    margin-top: auto;
    background: #0f1f16;
    border-radius: 12px;
    padding: 14px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #e6e8ec;
}

.cs-case-result b {
    color: #6fd38a;
    font-weight: 700;
}

/* ==========================================================================
   13. FAQ
   ========================================================================== */
.cs-faq .cs-h2 {
    margin-bottom: 32px;
}

.cs-faq-list {
    background: #fff;
}

.cs-faq-item {
    border-bottom: 1px solid #ececec;
}

.cs-faq-item:last-child {
    border-bottom: 0;
}

.cs-faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 0;
    text-align: left;
    padding: 20px 26px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cs-ink);
    cursor: pointer;
}

.cs-faq-icon {
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}

.cs-faq-icon::before,
.cs-faq-icon::after {
    content: "";
    position: absolute;
    background: #333;
    transition: transform .25s ease;
}

.cs-faq-icon::before {
    left: 0;
    top: 6px;
    width: 14px;
    height: 1.6px;
}

.cs-faq-icon::after {
    left: 6px;
    top: 0;
    width: 1.6px;
    height: 14px;
}

.cs-faq-q[aria-expanded="true"] .cs-faq-icon::after {
    transform: rotate(90deg);
}

.cs-faq-a {
    padding: 0 26px 22px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #55585e;
    max-width: 980px;
}

/* ==========================================================================
   14. Health-check CTA + form
   ========================================================================== */
.cs-cta {
    background: #11151d;
}

.cs-cta-eyebrow {
    font-size: 14px;
    font-weight: 600;
    color: var(--cs-salmon);
    margin-bottom: 18px;
}

.cs-cta .cs-lead {
    font-size: 14px;
}

.cs-bars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 16px;
}

.cs-bars div {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    padding-top: 10px;
    border-top: 3px solid;
    border-radius: 2px;
}

.cs-bars .b1 {
    border-color: #d8b25a;
}

.cs-bars .b2 {
    border-color: #c85a86;
}

.cs-bars .b3 {
    border-color: #7d74d6;
}

.cs-form-card {
    background: #f6f6f6;
    border-radius: 28px;
    padding: 44px 38px 38px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    color: var(--cs-ink);
}

.cs-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 16px;
}

.cs-field label,
.cs-field-label {
    display: block;
    font-size: 14px !important;
    color: #3a3a3a;
    margin-bottom: 8px;
}

.cs-field input,
.cs-field select,
.cs-field textarea {
    width: 100%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 13px 14px;
    font-size: 15px;
    color: #2b2b2b;
    font-family: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.cs-field select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23333'/%3E%3C/svg%3E") right 16px center / 8px no-repeat;
    padding-right: 36px;
    color: #6b6f76;
}

.cs-field textarea {
    min-height: 72px;
    resize: vertical;
}

.cs-field input:focus,
.cs-field select:focus,
.cs-field textarea:focus {
    outline: none;
    border-color: #5b8fe0;
    box-shadow: 0 0 0 3px rgba(91, 143, 224, .2);
}

.cs-field-full {
    grid-column: 1 / -1;
}

.cs-interest-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cs-interest-chips {
    position: relative;
}

.cs-interest-chips input {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.cs-interest-chips label {
    margin: 0;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    padding: 6px 11px;
    font-size: 13px !important;
    color: #3a3a3a;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.cs-interest-chips input:checked+label {
    background: #0b5ccf;
    border-color: #0b5ccf;
    color: #fff;
}

.cs-interest-chips input:focus-visible+label {
    outline: 2px solid #5b8fe0;
    outline-offset: 2px;
}

.cs-form-note {
    font-size: 12px;
    color: #3a3a3a;
    margin: 22px 0 18px;
}

.cs-form-error {
    background: #fdecec;
    border: 1px solid #f3b7b7;
    color: #9f1c1c;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 22px;
}

.cs-recaptcha {
    margin-bottom: 18px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199.98px) {

    .cs-cap-grid,
    .cs-ind-grid,
    .cs-case-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-grc-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-grc-cell:nth-child(4n) {
        border-right: 1px solid #e2e2e2;
    }

    .cs-grc-cell:nth-child(2n) {
        border-right: 0;
    }

    .cs-grc-cell:nth-last-child(-n+4) {
        border-bottom: 1px solid #e2e2e2;
    }

    .cs-grc-cell:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .cs-method {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 40px;
    }

    /* 3 steps per row: no connector after the last step of each row */
    .cs-step:nth-child(3n)::before,
    .cs-step:last-child::before {
        display: none;
    }

    .cs-cap-card {
        min-height: 400px;
    }
}

@media (max-width: 991.98px) {
    .cs-section {
        padding: 72px 0;
    }

    .cs-hero {
        padding: 64px 0 48px;
    }

    .cs-hero-grid,
    .cs-head-grid,
    .cs-rules-foot,
    .cs-media-grid,
    .cs-grc-visuals,
    .cs-audit-row,
    .cs-loop-grid,
    .cs-prog,
    .cs-region-pane {
        grid-template-columns: 1fr;
    }

    .cs-hero-visual {
        order: -1;
    }

    .cs-hero-visual img {
        width: min(80%, 320px);
    }

    .cs-hero-stats,
    .cs-rule-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-lines-card {
        grid-template-columns: 1fr;
    }

    .cs-line-col+.cs-line-col {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .2);
    }

    .cs-line-q {
        min-height: 0;
    }

    .cs-line-btn {
        margin-top: 12px;
    }

    .cs-model-grid,
    .cs-why-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cs-tabs {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cs-head-grid {
        margin-bottom: 36px;
    }
}

@media (max-width: 767.98px) {
    .cs-section {
        padding: 56px 0;
    }

    .cs-eyebrow-row {
        gap: 12px;
        margin-bottom: 28px;
    }

    .cs-eyebrow-row .cs-pill {
        flex-basis: 32px;
    }

    .cs-eyebrow-row .cs-label {
        font-size: 12px;
    }

    .cs-hero-actions .cs-btn {
        width: 100%;
    }

    .cs-hero-stats {
        gap: 24px 16px;
    }

    .cs-stat-title {
        font-size: 20px;
    }

    .cs-rule-cards,
    .cs-cap-grid,
    .cs-grc-grid,
    .cs-ind-grid,
    .cs-case-grid,
    .cs-model-grid,
    .cs-why-grid,
    .cs-outcome-row,
    .cs-form-grid,
    .cs-frameworks {
        grid-template-columns: 1fr;
    }

    .cs-grc-cell,
    .cs-grc-cell:nth-child(2n),
    .cs-grc-cell:nth-child(4n) {
        border-right: 0;
        border-bottom: 1px solid #e2e2e2;
    }

    .cs-grc-cell:last-child {
        border-bottom: 0;
    }

    .cs-ind {
        min-height: 0;
    }

    .cs-cap-card {
        min-height: 0;
    }

    .cs-cap-text {
        margin-bottom: 24px;
    }

    .cs-banner img {
        min-height: 200px;
        object-position: 20% center;
    }

    .cs-banner::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .7) 100%);
    }

    .cs-banner-text {
        z-index: 1;
        right: 18px;
        bottom: 20px;
    }

    .cs-audit-num {
        font-size: 40px;
    }

    .cs-audit-title {
        font-size: 20px;
    }

    .cs-method {
        grid-template-columns: 1fr;
        row-gap: 28px;
    }

    .cs-step {
        display: grid;
        grid-template-columns: 36px 1fr;
        column-gap: 16px;
    }

    .cs-step-dot {
        grid-row: span 2;
        align-self: start;
        margin-bottom: 0;
    }

    .cs-step::before {
        display: block !important;
        top: 44px;
        bottom: -28px;
        left: 18px;
        right: auto;
        border-top: 0;
        border-left: 1.5px dotted rgba(255, 255, 255, .35);
    }

    .cs-step:last-child::before {
        display: none !important;
    }

    /* title centred on the 36px circle */
    .cs-step-title {
        display: flex;
        align-items: center;
        min-height: 36px;
        font-size: 20px;
        margin-bottom: 4px;
    }

    .cs-method-title {
        margin-bottom: 24px;
    }

    .cs-prog {
        padding: 22px 18px;
    }

    .cs-prog-rows li {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .cs-tabs {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .cs-tab {
        font-size: 15px;
    }

    .cs-tab small {
        display: block;
        margin: 2px 0 0;
    }

    .cs-bars {
        gap: 8px;
    }

    .cs-form-card {
        padding: 28px 18px;
        border-radius: 20px;
    }

    .cs-form-card .cs-btn {
        width: 100%;
    }

    .cs-faq-q {
        padding: 18px 16px;
        font-size: 15px;
    }

    .cs-faq-a {
        padding: 0 16px 20px;
    }

    .cs-loop-t {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-page * {
        transition: none !important;
    }

    html:has(.cs-page) {
        scroll-behavior: auto;
    }
}