/* ==========================================================================
   05 — Blocks
   --------------------------------------------------------------------------
   Gutenberg core block overrides, custom ACF block styles, and
   WordPress template section styles (hero, title bar, landing pages).
   ========================================================================== */


/* --- Header / Title Bar --- */

@media (min-width: 1025px) {
    .title-bar .title {
        white-space: nowrap;
    }

    .title {
        white-space: initial;
    }
}

@media screen and (max-width: 991px) {
    .title-bar-background {
        padding: 9rem 2rem 4rem;
    }
}


/* --- Home Page --- */

.post-links article .icon span svg {
    height: 1.1em;
}


/* --- Content Image Left (custom block with scroll animation) --- */

@media (max-width: 991px) {
    .content-image-left figure.image {
        margin-bottom: 2em;
    }
}

.content-image-left .image {
    border-radius: 0 3rem 3rem 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    transition: 2s all;
}

.content-image-left .image img {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    transition: 2s all;
}

.content-image-left .image.is-inview {
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
}


/* --- Full Width Background Block --- */

.fwb {
    background-image: url(/wp-content/uploads/2024/04/4M4h-page-section-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100% !important;
    padding: 4rem 0;
}

.fwb p {
    color: white;
    text-align: center;
    font-size: 16px;
    padding: 0 0 0.3rem;
    max-width: 1200px;
}


/* --- Landing Page Title Bar Block --- */

.lp-title-bar .title {
    z-index: 1;
}

.lp-title-bar h1 {
    font-size: 8rem;
    font-weight: 800;
}

.title .lp-subtitle {
    z-index: 1;
    font-family: rift, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1;
    font-size: 4rem;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgb(255, 255, 255);
}


/* --- Tagline Title Block --- */

.tagline-title h3 {
    line-height: 1em;
    font-size: clamp(40px, 4vw, 64px);
    text-align: center;
    color: #000000;
}


/* --- Expertise Subhead (4M4H page) --- */

.expertise-subhead {
    max-width: 50%;
    font-size: clamp(16px, 2vw, 20px);
}

@media (max-width: 1000px) {
    .expertise-subhead {
        max-width: 90%;
    }
}


/* --- Border Radius Utility (block images) --- */

.rounding-4m {
    border-radius: 3rem 0 0 3rem;
}


/* --- Accordion --- */

.accordion li .content {
    color: #242424;
}

/* Link-variant accordion items (whole row is a clickable link, no expand) */
.accordion .accordion__item--link .title-wrap {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.accordion .accordion__item--link:hover .title-wrap {
    color: var(--color-primary);
}

.accordion .accordion__item--link .title-wrap .toggle svg {
    fill: currentColor;
}

.accordion .accordion__item--link:hover .title-wrap .toggle {
    transform: translateX(4px);
    transition: transform 0.3s ease;
}


/* --- Instagram Embed Block (blog post) --- */

.instagram-wrapper {
    display: flex;
    justify-content: center;
    padding: 2em 0;
}

.instagram-wrapper blockquote.instagram-media {
    display: inline-block !important;
    margin: 0 auto !important;
    max-width: 540px !important;
    width: 100% !important;
}


/* --- Flexible Two-Column Layout Block --- */

.flex-container {
    display: flex;
}

.flex-column {
    width: 50%;
    padding: 2em;
}

@media (max-width: 1350px) {
    .flex-container {
        flex-direction: column;
    }

    .flex-column {
        width: 100%;
        padding: 1em;
    }
}


/* ==========================================================================
   DEV BLOCKS — SMT PPC Page
   --------------------------------------------------------------------------
   Styles for blocks in templates/blocks/dev/
   ========================================================================== */


/* --- Shared PPC Button --- */

.btn-ppc {
    display: inline-flex;
    align-items: center;
    background: var(--color-teal);
    color: #000;
    padding: 2rem 5rem;
    margin-top: 2rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 2rem;
    text-decoration: none;
    transition: var(--transition-fast);
    cursor: pointer;
}

.btn-ppc:hover {
    background: var(--color-primary);
    color: #fff;
}


/* --- Hero CTAB static background variant ---
   When 'static_background' is on, the hero behaves like split-hero:
   full-width dark section with contained background, no viewport-height
   forcing, no fade/parallax on scroll. Uses the same padding pattern
   as split-hero so it visually feels like the same family.

   NOTE: uses `.hero-static` (no `.hero`) so the theme's built-in
   cursor.over('.hero') in scripts.js doesn't trigger the giant teal
   cursor across the entire section. */

.hero-static {
    position: relative;
    overflow: hidden;
    height: auto;
    min-height: 0;
    background-color: #0B1D2E;
    color: #fff;
    padding-top: calc(max(30px, 6vw) + 9rem);
    padding-bottom: calc(max(30px, 6vw) + 3rem);
}

/* Background media wrapper — contained, not fixed */
.hero-static .hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-static .hero__bg video,
.hero-static .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark overlay for text legibility (matches split-hero treatment) */
.hero-static .hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(11,29,46,0.82) 0%, rgba(11,29,46,0.55) 45%, rgba(11,29,46,0.85) 70%, rgba(11,29,46,0.95) 100%),
        linear-gradient(180deg, rgba(11,29,46,0.2) 0%, rgba(11,29,46,0.5) 100%);
}

/* Content sits above the overlay + matches split-hero side padding */
.hero-static .container {
    position: relative;
    z-index: 1;
    padding-left: max(2rem, 5vw);
    padding-right: max(2rem, 5vw);
}

/* Match split-hero headline sizing (mobile → desktop clamp) */
.hero-static h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 7rem);
    line-height: 1.05;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    max-width: 680px;
    margin: 0;
}

@media (min-width: 1025px) {
    .hero-static {
        padding-top: calc(max(30px, 6vw) + 6rem);
    }
}

/* Extra breathing room between subtitle and CTA buttons — applies to
   the whole hero-ctab block (both static and fade variants) */
.hero .hero-ctas,
.hero-static .hero-ctas {
    margin-top: 2em;
}

/* 1em space between CTA button and its caption */
.hero .cta-caption,
.hero-static .cta-caption {
    margin-top: 1em;
    font-size: 2rem;
}


/* --- Hero CTAB: animated "beats" headline ---------------------------------
   Only present when the block's `animate_headline` field is on, which adds
   `.hero-ctab--beats` to the section. Deliberately contains NO typography:
   the headline keeps the block's normal h1 treatment (rift / uppercase /
   700 / max-width 680px) in both static and fade modes, so turning the
   animation on doesn't change how the headline looks — only how it arrives.
   Driven by templates/blocks/hero/hero-ctab-beats.js. */

/* Background treatment for the animated variant — ported from
   Mocks/4media-homepage-v2.html, with its palette swapped for theme tokens.
   Overrides .hero-static's flat #0B1D2E. The opaque linear-gradient sits last
   in the stack (= bottom layer), so the three radial washes read on top of it. */
.hero-static.hero-ctab--beats {
    background-color: #0a0a0c;
    background-image:
        radial-gradient(900px 520px at 74% 22%, rgba(69, 60, 211, .42), transparent 62%),
        radial-gradient(700px 460px at 90% 78%, rgba(0, 180, 224, .22), transparent 60%),
        radial-gradient(560px 380px at 18% 88%, rgba(212, 81, 128, .16), transparent 62%),
        linear-gradient(160deg, #0a0a0c 0%, #111018 55%, #0a0a0c 100%);
}

/* The slanted overlay — fine 115° pinstripes over the gradients. Sits below
   .hero-static .container (z-index 1), so all content stays above it. */
.hero-static.hero-ctab--beats::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(115deg,
                rgba(255, 255, 255, .028) 0 2px,
                transparent 2px 7px);
}

/* Rotating scroll badge. The markup is the same one the non-static hero uses;
   these mirror the `.hero .scroll svg` rules in style.css so it also works in
   the static section, where that selector doesn't reach. */
/* Hangs below the container, down into the section's bottom padding.
   rem rather than em: `em` here resolves against the badge's own font-size,
   which comes from its `text-lg` utility (1.2rem) — swapping that class would
   silently move the badge. -8.4rem is the equivalent of the -7em it replaces.
   Beats the `bottom-0` utility in the markup on specificity, so the video hero
   keeps its original position. */
.hero-static .scroll {
    bottom: -8.4rem;
}

/* Hidden below lg — the section's bottom padding is shorter than the badge's
   offset at those widths, so `overflow: hidden` on .hero-static would clip it. */
@media (max-width: 1024px) {
    .hero-static .scroll {
        display: none;
    }
}

.hero-static .scroll svg {
    width: 9rem;
}

.hero-static .scroll svg .rotate {
    transform-origin: center center;
    animation: scrollSpin 20s forwards infinite linear;
}

.hero-ctab--beats .hero-ctab__stage {
    position: relative;
}

/* Reserves the row the dots animate into so the headline doesn't shift
   when they appear. Height matches the dot diameter. */
.hero-ctab--beats .hero-ctab__dotslot {
    height: 1rem;
    margin-bottom: 2.5rem;
}

/* Segments start dimmed and light as the underline reaches them. Set on the
   span directly so it wins over the colour the h1 passes down. */
.hero-ctab--beats .hero-ctab__beat {
    position: relative;
    display: inline-block;
    color: rgba(255, 255, 255, .55);
    transition: color .42s ease;
}

.hero-ctab--beats .hero-ctab__beat.is-lit {
    color: #fff;
}

/* Travelling underline. All positioning is applied inline by the JS, which
   measures each segment against the stage. */
.hero-ctab--beats .hero-ctab__bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0.5rem;
    border-radius: 0.25rem;
    background: var(--color-teal);
    opacity: 0;
    pointer-events: none;
    transition: left .58s cubic-bezier(.5, 0, .2, 1),
                width .58s cubic-bezier(.5, 0, .2, 1),
                top .58s cubic-bezier(.5, 0, .2, 1),
                background .40s ease,
                opacity .38s ease;
}

/* Four brand dots — stacked on top of each other, then spread right. */
.hero-ctab--beats .hero-ctab__dots {
    position: absolute;
    left: 0;
    top: 0;
    height: 1rem;
    opacity: 0;
    transform: scale(.55);
    transform-origin: 0.5rem 0.5rem;
    pointer-events: none;
    transition: opacity .34s ease,
                transform .42s cubic-bezier(.34, 1.45, .64, 1);
}

.hero-ctab--beats .hero-ctab__dots.is-visible {
    opacity: 1;
    transform: scale(1);
}

.hero-ctab--beats .hero-ctab__dots i {
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: block;
    transition: left .60s cubic-bezier(.34, 1.3, .64, 1);
}

.hero-ctab--beats .hero-ctab__dots i:nth-child(1) { background: var(--color-teal);       z-index: 4; }
.hero-ctab--beats .hero-ctab__dots i:nth-child(2) { background: var(--color-light-blue); z-index: 3; }
.hero-ctab--beats .hero-ctab__dots i:nth-child(3) { background: var(--color-navy);       z-index: 2; transition-delay: .05s; }
.hero-ctab--beats .hero-ctab__dots i:nth-child(4) { background: var(--color-pink);       z-index: 1; transition-delay: .10s; }

/* The JS also short-circuits to the resolved state; this covers the CSS side. */
@media (prefers-reduced-motion: reduce) {
    .hero-ctab--beats .hero-ctab__beat,
    .hero-ctab--beats .hero-ctab__bar,
    .hero-ctab--beats .hero-ctab__dots,
    .hero-ctab--beats .hero-ctab__dots i {
        transition: none !important;
    }
    .hero-ctab--beats .hero-ctab__beat { color: #fff; }
    .hero-ctab--beats .hero-ctab__bar  { opacity: 0 !important; }
    .hero-ctab--beats .hero-ctab__dots { opacity: 1; transform: none; }

    /* The badge spins indefinitely — stop it rather than let it loop forever. */
    .hero-static .scroll svg .rotate { animation: none; }
}

.hero-subtitle {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

/* Reset the global p+p top margin inside the hero (flex gap handles spacing) */
.hero p + p,
.hero-static p + p {
    margin-top: 0;
}


/* --- Split Hero --- */

.split-hero {
    background-color: #0B1D2E;
    color: #fff;
    position: relative;
    overflow: hidden;
    /* s-padding handles bottom; top extended to clear fixed nav */
    padding-top: calc(max(30px, 6vw) + 9rem);
}

/* Diagonal gradient overlay — colour-only mode (no bg image) */
.split-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 29, 46, 0.97) 50%, rgba(11, 29, 46, 0.65));
    z-index: 0;
}

/* Background image + overlay */
.split-hero--has-image::before {
    display: none;
}

.split-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.split-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.split-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(11,29,46,0.82) 0%, rgba(11,29,46,0.55) 45%, rgba(11,29,46,0.85) 70%, rgba(11,29,46,0.95) 100%),
        linear-gradient(180deg, rgba(11,29,46,0.2) 0%, rgba(11,29,46,0.5) 100%);
}

/* Stats row */
.split-hero__stats {
    padding-top: 2.4rem;
    margin-top: 0.4rem;
    margin-bottom: 2.4rem;
    border-top: 1px solid rgba(92, 217, 214, 0.2);
}

.split-hero__stats-inner {
    width: 100%;
}

.split-hero__stats-label {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-teal);
    margin-bottom: 1.4rem;
}

.split-hero__stats-row {
    display: flex;
    gap: 3.2rem;
}

.split-hero__stat {
    display: flex;
    flex-direction: column;
}

.split-hero__stat-value {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 3vw, 3.8rem);
    font-weight: 700;
    color: var(--color-teal);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.split-hero__stat-label {
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 767px) {
    /* More breathing room from the viewport edges on small screens */
    .split-hero .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Tighter card padding so form fields don't spill toward the edge */
    .split-hero__card {
        padding: 2rem 1.6rem;
    }

    .split-hero__stats-row {
        flex-direction: column;
        gap: 2rem;
    }

    .split-hero__stat-value {
        font-size: 4rem;
    }

    .split-hero__stat-label {
        font-size: 1.6rem;
    }
}

@media (min-width: 1025px) {
    .split-hero {
        padding-top: calc(max(30px, 6vw) + 6rem);
    }
}

.split-hero .container {
    padding-left: max(2rem, 5vw);
    padding-right: max(2rem, 5vw);
}

.split-hero .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    position: relative;
    z-index: 1;
    align-items: center;
}

/* Eyebrow — color/weight override for dark hero bg */
.split-hero .eyebrow {
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Headline */
.split-hero__headline {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 7rem);
    line-height: 1.05;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    margin-bottom: 1.5rem;
    max-width: 680px;
}

/* Subheadline */
.split-hero__subheadline {
    font-size: 1.8rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    max-width: 560px;
}

/* Checklist — teal checkmark bullets via CSS */
.split-hero__checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.split-hero__checklist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.split-hero__checklist-item::before {
    content: '';
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    background-color: var(--color-teal);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 8l4 4 8-8'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 8l4 4 8-8'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
}

/* Card — glass style (colour bg) */
.split-hero__card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    padding: 2.5rem;
    color: #fff;
}

/* Card — darker when hero has a background image */
.split-hero--has-image .split-hero__card {
    background: rgba(11, 29, 46, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.split-hero__card-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.split-hero__card-sub {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 2rem;
}

.split-hero__no-form {
    color: rgba(255, 255, 255, 0.45);
    font-size: 1.2rem;
}

/* Gravity Form inputs inside the glass card */
.split-hero__card .gform_wrapper input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.split-hero__card .gform_wrapper textarea,
.split-hero__card .gform_wrapper select {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: var(--radius-sm) !important;
    color: #fff !important;
    font-family: var(--font-body) !important;
}

.split-hero__card .gform_wrapper input::placeholder,
.split-hero__card .gform_wrapper textarea::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.split-hero__card .gform_wrapper .gfield_label {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.split-hero__card .gform_wrapper .gform_submit_button,
.split-hero__card .gform_wrapper input[type="submit"] {
    background: var(--color-teal) !important;
    color: #0B1D2E !important;
    border: none !important;
    font-weight: 700 !important;
    width: 100% !important;
    border-radius: var(--radius-sm) !important;
}

.split-hero__card .gform_wrapper .gform_submit_button:hover,
.split-hero__card .gform_wrapper input[type="submit"]:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}

@media (max-width: 767px) {
    .split-hero .row {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}


/* --- Trust Bar --- */

.trust-bar {
    background: #f9f9f9;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 3rem 0;
}

.trust-bar__eyebrow {
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2rem;
}

.trust-bar__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem 3rem;
}

.trust-bar__logo-item img {
    max-height: 40px;
    width: auto;
    filter: grayscale(1) opacity(0.55);
    transition: var(--transition-fast);
}

.trust-bar__logo-item img:hover {
    filter: grayscale(0) opacity(1);
}


/* --- Features Grid --- */

.features-grid {
    background: #0d1b35;
    padding: 8rem 0;
}

.features-grid .eyebrow {
    color: var(--color-teal);
}

.features-grid__title {
    color: var(--color-white);
    font-family: var(--font-display);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.features-grid__subtitle {
    font-size: 2.2rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.features-grid__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin: 4rem 0 2rem;
}

.features-grid__item {
    position: relative;
    overflow: hidden;
    flex: 0 0 calc(33.333% - 1.4rem);
    padding: 3rem;
    background: #162140;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md);
    transition: border-color 0.6s ease, box-shadow 0.6s ease, opacity 0.5s ease, transform 0.5s ease;
    opacity: 0;
    transform: translateY(24px);
}

.features-grid__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.features-grid__item.is-active {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 1px var(--color-teal), 0 8px 32px rgba(92, 217, 214, 0.15);
}

.features-grid__item.is-active .features-grid__ghost-num {
    color: rgba(92, 217, 214, 0.12);
}


.features-grid__ghost-num {
    position: absolute;
    top: -1rem;
    right: 1.5rem;
    font-family: var(--font-display);
    font-size: 13rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.04);
    transition: color 0.6s ease;
    pointer-events: none;
    user-select: none;
}

.features-grid__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.6rem;
    height: 5.6rem;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.features-grid__icon svg,
.features-grid__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    fill: var(--color-teal);
}

.features-grid__item-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.features-grid__item-desc {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin: 0;
}

.features-grid__cta {
    margin-top: 3rem;
}

@media (max-width: 991px) {
    .features-grid__item {
        flex: 0 0 calc(50% - 1rem);
    }
}

@media (max-width: 640px) {
    .features-grid__item {
        flex: 0 0 100%;
    }
}


/* --- Numbered Steps --- */

.numbered-steps {
    background: var(--color-gray-light);
}

.numbered-steps__header {
    text-align: center;
    margin-bottom: 4rem;
}

.numbered-steps__title {
    margin: 0 0 1rem;
}

.numbered-steps__sub {
    font-size: 1.8rem;
    color: #555;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 66.67%;
}

.numbered-steps__list {
    max-width: 96rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.numbered-steps__card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-md);
    padding: 3.6rem 4rem 3.6rem 6rem;
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.numbered-steps__card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.numbered-steps__circle {
    position: absolute;
    left: -2.8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    background: var(--color-gray-light);
    border: 2px solid #1f2e45;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.numbered-steps__circle span {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: #1f2e45;
    line-height: 1;
}

.numbered-steps__body {
    flex: 1;
}

.numbered-steps__step-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-black);
    margin: 0 0 0.6rem;
    line-height: 1.2;
}

.numbered-steps__step-desc {
    font-size: 1.8rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.numbered-steps__cta {
    margin-top: 4rem;
}

@media (max-width: 640px) {
    .numbered-steps__card {
        padding-left: 4rem;
    }

    .numbered-steps__circle {
        left: -2rem;
        width: 4rem;
        height: 4rem;
    }

    .numbered-steps__circle span {
        font-size: 1.8rem;
    }
}


/* --- Process Steps --- */

.process-steps__track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 4rem;
    position: relative;
}

.process-steps__track::before {
    content: '';
    position: absolute;
    top: 2.4rem;
    left: calc(16.5% + 2.4rem);
    right: calc(16.5% + 2.4rem);
    height: 2px;
    background: linear-gradient(to right, var(--color-teal), var(--color-primary));
}

.process-steps__step {
    flex: 1;
    text-align: center;
    padding: 0 1.5rem;
    position: relative;
}

.process-steps__number {
    width: 4.8rem;
    height: 4.8rem;
    background: #0a1c3a;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 1;
}

.process-steps__step-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.process-steps__step-desc {
    font-size: 1.3rem;
    color: #666;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .process-steps__track {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .process-steps__track::before {
        display: none;
    }

    .process-steps__step {
        width: 100%;
    }
}


/* --- Use Cases --- */

.use-cases {
    background: var(--color-gray-light);
    overflow: hidden;
}

.use-cases__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: stretch;
}

/* Image column — slides in from left, extends off page like content-image-left */
.use-cases__image-col {
    min-height: 40rem;
    overflow: hidden;
    border-radius: 0 3rem 3rem 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    transition: 2s all;
}

.use-cases__image-col.is-inview,
.use-cases__image-col.has-been-in-view {
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
}

.use-cases__image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    transition: 2s all;
}

.use-cases__image-col.is-inview img,
.use-cases__image-col.has-been-in-view img {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.use-cases__content-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.use-cases__content-col--full {
    grid-column: 1 / -1;
}

.use-cases__intro {
    margin-bottom: 3rem;
}

.use-cases__heading {
    line-height: 1.1;
    margin: 0;
}

.use-cases__sub {
    font-size: 1.8rem;
    color: #555;
    line-height: 1.6;
    margin: 1rem 0 0;
}

/* List */
.use-cases__list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
}

.use-cases__list--cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
}

.use-cases__list--cols-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3rem;
}

.use-cases__list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2.2rem;
    color: #333;
    line-height: 1.4;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-gray-border);
}

.use-cases__list-item:first-child {
    border-top: 1px solid var(--color-gray-border);
}

.use-cases__list--cols-2 .use-cases__list-item:nth-child(2) {
    border-top: 1px solid var(--color-gray-border);
}

.use-cases__list--cols-3 .use-cases__list-item:nth-child(2),
.use-cases__list--cols-3 .use-cases__list-item:nth-child(3) {
    border-top: 1px solid var(--color-gray-border);
}

.use-cases__list-item::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--color-teal);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Items with descriptions: title + description stacked, no dot */
.use-cases__list-item--has-desc {
    align-items: flex-start;
    padding: 2rem 0;
    list-style: none;
}

.use-cases__list-item--has-desc::before,
.use-cases__list-item--has-desc::marker {
    content: none !important;
    display: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

.use-cases__item-content {
    flex: 1;
}

.use-cases__item-title {
    font-size: 2.2rem;
    color: #333;
    line-height: 1.4;
    margin: 0 0 0.8rem;
}

.use-cases__item-desc {
    font-size: 1.6rem;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

.use-cases__item-desc p + p {
    margin-top: 0;
}

.use-cases__industries {
    font-size: 1.6rem;
    color: #555;
    font-style: normal;
    margin: 0;
}

.use-cases__cta {
    margin-top: 3rem;
}

@media (max-width: 767px) {
    .use-cases__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .use-cases__image-col {
        min-height: 28rem;
    }

    .use-cases__list--cols-2,
    .use-cases__list--cols-3 {
        grid-template-columns: 1fr;
    }
}


/* --- Case Studies --- */

.case-studies__title-wrap {
    margin-bottom: 3rem;
}

.case-studies__title {
    margin: 0;
    font-family: var(--font-display);
    text-transform: uppercase;
}

.case-studies__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.case-studies__card {
    background: #0d1b35;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.case-studies__card-image {
    height: 220px;
    background-color: #162140;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.case-studies__card-content {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.case-studies__tag {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-teal);
    margin-bottom: 1rem;
}

.case-studies__company {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-white);
    line-height: 1.15;
    margin-bottom: 1.2rem;
}

.case-studies__desc {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.case-studies__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 2.5rem 0;
}

.case-studies__stats {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.case-studies__stat {
    display: flex;
    flex-direction: column;
}

.case-studies__stat-value {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-teal);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.case-studies__stat-label {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
}

.case-studies__cta {
    margin-top: 2rem;
}

@media (max-width: 991px) {
    .case-studies__grid {
        grid-template-columns: 1fr;
    }
}


/* --- Content Image List --- */

.content-image-list {
    background: var(--color-gray-light);
}

.content-image-list__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: stretch;
}

.content-image-list__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-image-list__heading {
    line-height: 1.1;
    margin: 0 0 1.5rem;
}

.content-image-list__sub {
    font-size: 2.2rem;
    font-weight: 600;
    color: #555;
    line-height: 1.6;
    margin: 0 0 2.5rem;
}

/* Checklist */
.content-image-list__list {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.content-image-list__item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 2.2rem;
    color: #333;
    line-height: 1.4;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--color-gray-border);
}

.content-image-list__item:first-child {
    border-top: 1px solid var(--color-gray-border);
}

.content-image-list__cta {
    margin-top: 3rem;
}

/* Body paragraph below bullets */
.content-image-list__body {
    font-size: 1.8rem;
    color: #444;
    line-height: 1.6;
    margin-top: 2.4rem;
}

.content-image-list__body p {
    margin: 0 0 1.2rem;
}

.content-image-list__body p:last-child {
    margin-bottom: 0;
}

/* --- Variant: image on left --- */
.content-image-list--image-left .content-image-list__image-col {
    order: -1;
    transform: translate3d(-110%, 0, 0);
}

.content-image-list--image-left .content-image-list__image-col.is-inview {
    transform: translate3d(-5%, 0, 0);
}

.content-image-list--image-left .content-image-list__image-inner {
    border-radius: 0 3rem 3rem 0;
}

.content-image-list--image-left .content-image-list__image-inner img {
    transform: translate3d(110%, 0, 0);
}

.content-image-list--image-left .content-image-list__image-col.is-inview .content-image-list__image-inner img {
    transform: translate3d(0, 0, 0);
}

/* --- Variant: centered (more breathing room, like content-image.php) --- */
.content-image-list--centered .content-image-list__content {
    max-width: 48rem;
    margin: 0 auto;
}

.content-image-list__check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--color-teal);
    color: #0B1D2E;
}

.content-image-list__check svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* Image column — outer col animates, inner wrapper clips + rounds */
.content-image-list__image-col {
    min-height: 40rem;
    -webkit-transform: translate3d(110%, 0, 0);
    transform: translate3d(110%, 0, 0);
    transition: 2s all;
}

.content-image-list__image-col.is-inview {
    -webkit-transform: translate3d(5%, 0, 0);
    transform: translate3d(5%, 0, 0);
}

.content-image-list__image-inner {
    overflow: hidden;
    border-radius: 3rem 0 0 3rem;
    width: 100%;
    height: 100%;
    min-height: 40rem;
}

.content-image-list__image-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    -webkit-transform: translate3d(-110%, 0, 0);
    transform: translate3d(-110%, 0, 0);
    transition: 2s all;
}

.content-image-list__image-col.is-inview .content-image-list__image-inner img {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@media (max-width: 767px) {
    .content-image-list__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .content-image-list__image-col {
        min-height: 28rem;
        order: -1;
    }
}


/* --- FAQ Accordion --- */

.faq-accordion__layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 5rem;
    align-items: start;
}


.faq-accordion__rule {
    width: 36px;
    height: 2px;
    background: var(--color-teal);
    margin-bottom: 1.5rem;
}

.faq-accordion__heading {
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

.faq-accordion__body {
    font-size: 1.8rem;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

.faq-accordion__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* FAQ question rows.
   The question is a real <button> inside <h3 class="title-wrap"> so it can be
   reached by keyboard, and the +/- icon sits inside that button so the icon is
   part of the control rather than a sibling of it. Tailwind's preflight already
   clears button background, border, padding and font — these cover the rest.
   Doubled-up `.accordion.faq-accordion__list` so these beat the shared
   `.accordion li .title-wrap .title` rules in style.css, and stay scoped to the
   FAQ list so the other blocks using `.accordion` markup are untouched. */

/* Promoting the question to an <h3> pulls in the global `.h3, h3` rule from
   style.css, which is rift + uppercase. The <p class="title"> it replaced was
   neither, so put the body font and normal casing back. Size and weight don't
   need resetting — `.accordion li .title-wrap` already outranks `h3` on those. */
.accordion.faq-accordion__list .title-wrap,
.accordion.faq-accordion__list .title-wrap .title {
    font-family: 'sofia-pro', sans-serif;
    text-transform: none;
}

.accordion.faq-accordion__list .title-wrap .title {
    /* The button now spans the full row and lays out its own contents, so the
       whole row is the click target instead of just the question text. */
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 1.5rem;
    /* Replaced by the gap above — with the icon inside the button this padding
       would push it in from the right edge instead of separating it from text. */
    padding-right: 0;
    text-align: left;
    cursor: pointer;
}

.accordion.faq-accordion__list .title-wrap .toggle {
    flex: 0 0 auto;
    margin-left: auto;
}

.accordion.faq-accordion__list .title-wrap .title:focus-visible {
    outline: 2px solid #453cd3;
    outline-offset: 4px;
}

@media (max-width: 768px) {
    .faq-accordion__layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}


/* ==========================================================================
   Dev Blocks — Mobile minimum font size (16px / 1.6rem)
   Body copy and titles in dev blocks should never go below 16px.
   Decorative labels (stat-label, tag, eyebrow) intentionally excluded.
   ========================================================================== */

@media (max-width: 767px) {
    .split-hero__subheadline,
    .split-hero__checklist-item,
    .split-hero__card-sub,
    .split-hero__no-form,
    .split-hero__stat-value,
    .use-cases__list-item,
    .use-cases__industries,
    .case-studies__desc,
    .content-image-list__sub,
    .content-image-list__item,
    .numbered-steps__step-desc,
    .numbered-steps__step-title,
    .process-steps__step-title,
    .process-steps__step-desc,
    .faq-accordion__body {
        font-size: 1.6rem;
    }
}


/* ==========================================================================
   TABBED CONTENT BLOCK
   ========================================================================== */

.tabbed-content__title {
    margin: 0 0 1.5rem;
}

.tabbed-content__subtitle {
    font-size: 2rem;
    color: #555;
    line-height: 1.6;
    margin: 0 auto 4rem;
    max-width: 66.67%;
}

.tabbed-content__wrap {
    margin-top: 4rem;
}

.tabbed-content__tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    /* Thin scrollbar — Firefox */
    scrollbar-width: thin;
    scrollbar-color: #555 #e5e5e5;
    padding-bottom: 0.4rem;
}

/* Thin scrollbar — Chromium / WebKit */
.tabbed-content__tabs::-webkit-scrollbar {
    height: 4px;
}

.tabbed-content__tabs::-webkit-scrollbar-track {
    background: #e5e5e5;
    border-radius: 2px;
}

.tabbed-content__tabs::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 2px;
}

.tabbed-content__tabs::-webkit-scrollbar-thumb:hover {
    background: #333;
}

.tabbed-content__tab {
    background: none;
    border: 0;
    padding: 1rem 2rem;
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #999;
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--radius-md);
    transition: color 0.2s, background-color 0.2s;
}

.tabbed-content__tab:hover {
    color: var(--color-primary);
}

.tabbed-content__tab.is-active {
    background: var(--color-primary);
    color: #fff;
}

.tabbed-content__panels {
    background: var(--color-gray-light);
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-md);
    padding: 3rem;
    box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.06);
}

.tabbed-content__panel {
    display: none;
}

.tabbed-content__panel.is-active {
    display: block;
}

.tabbed-content__panel-inner {
    display: flex;
    gap: 2.4rem;
    align-items: flex-start;
}

.tabbed-content__panel-icon {
    flex-shrink: 0;
    width: 5.6rem;
    height: 5.6rem;
    background: var(--color-primary);
    color: var(--color-teal);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tabbed-content__panel-icon svg,
.tabbed-content__panel-icon img {
    width: 3rem;
    height: 3rem;
}

.tabbed-content__panel-text {
    flex: 1;
}

.tabbed-content__panel-title {
    margin: 0 0 0.4rem;
    font-family: var(--font-body);
    font-size: 2.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tabbed-content__panel-subtitle {
    margin: 0 0 1.6rem;
    font-style: italic;
    font-size: 2rem;
    color: #333;
}

.tabbed-content__panel-body {
    margin: 0;
    font-size: 2rem;
    line-height: 1.6;
    color: #333;
}

.tabbed-content__panel-body p + p {
    margin-top: 0.5em;
}

.tabbed-content__panel-body a {
    color: #453bd3;
    text-decoration: underline;
}

.tabbed-content__panel-body a:hover,
.tabbed-content__panel-body a:focus {
    color: #2c2aa0;
}

@media (max-width: 767px) {
    .tabbed-content__tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 0.6rem;
    }

    .tabbed-content__panel-inner {
        flex-direction: column;
        gap: 2rem;
    }
}


/* ==========================================================================
   COMPARISON TABLE
   Used on raw <table class="comparison-table"> inside a Custom HTML block.
   The first cell in each <tbody> row should be a <th scope="row"> for the
   factor label (bolded).
   ========================================================================== */

/* Optional centered header above the table */
.comparison-table-header {
    text-align: center;
    margin-bottom: 4rem;
}

.comparison-table-title {
    margin: 0 0 1rem;
}

.comparison-table-subtitle {
    font-size: 1.8rem;
    color: #555;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 66.67%;
}

/* Wrap the table in a scroll container for mobile if needed.
   Right-edge gradient hints at horizontal scroll on mobile. */
.comparison-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    margin: 2rem auto;
    max-width: 100%;
    border-radius: var(--radius-md);
    position: relative;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: thin;
    scrollbar-color: #555 #e5e5e5;
}

.comparison-table-wrap::-webkit-scrollbar {
    height: 6px;
}

.comparison-table-wrap::-webkit-scrollbar-track {
    background: #e5e5e5;
    border-radius: 3px;
}

.comparison-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 3px;
}

.comparison-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    text-align: left;
    font-size: 1.6rem;
}

/* Mobile-only scroll hint on the right edge */
@media (max-width: 767px) {
    .comparison-table-wrap::after {
        content: '';
        position: sticky;
        top: 0;
        right: 0;
        display: block;
        width: 3rem;
        margin-left: -3rem;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(0,0,0,0.15));
    }
}

.comparison-table thead {
    background: #0d1b35;
    color: #fff;
}

.comparison-table thead th {
    padding: 1.6rem 2rem;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.comparison-table tbody tr {
    border-bottom: 1px solid var(--color-gray-border);
}

.comparison-table tbody tr:nth-child(even) {
    background: var(--color-gray-light);
}

.comparison-table tbody td,
.comparison-table tbody th {
    padding: 1.4rem 2rem;
    line-height: 1.5;
    vertical-align: middle;
}

.comparison-table tbody th {
    font-weight: 700;
    color: #0d1b35;
}

@media (max-width: 767px) {
    .comparison-table-subtitle {
        max-width: 100%;
    }
}


/* ==========================================================================
   RESOURCE LINKS BLOCK
   ========================================================================== */

.resource-links__header {
    text-align: center;
    margin-bottom: 4rem;
}

.resource-links__title {
    margin: 0 0 1rem;
}

.resource-links__subtitle {
    font-size: 2rem;
    color: #555;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 66.67%;
}

/* --- Featured card (dark) --- */
.resource-links__featured-card {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    background: #0d1b35;
    color: #fff;
    border-radius: 1.6rem;
    padding: 2.4rem 3rem;
    margin-bottom: 3rem;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.resource-links__featured-card:hover {
    background: #3F33C7;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.15);
}

.resource-links__featured-icon {
    flex-shrink: 0;
    width: 6.4rem;
    height: 6.4rem;
    background: var(--color-teal);
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.resource-links__featured-icon svg,
.resource-links__featured-icon img {
    width: 3.2rem;
    height: 3.2rem;
}

.resource-links__featured-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.resource-links__featured-eyebrow {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-teal);
}

.resource-links__featured-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.resource-links__featured-arrow {
    flex-shrink: 0;
    color: var(--color-teal);
    transition: transform 0.2s;
}

.resource-links__featured-arrow svg {
    width: 2.8rem;
    height: 2.8rem;
}

.resource-links__featured-card:hover .resource-links__featured-arrow {
    transform: translateX(4px);
}

/* --- Column cards --- */
.resource-links__columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
    margin-top: 2.4rem;
}

.resource-links__card {
    background: #fff;
    border-radius: 1.6rem;
    padding: 2.4rem 2.4rem 1rem;
}

.resource-links__column-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.2rem;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-teal);
}

.resource-links__column-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.resource-links__column-icon svg,
.resource-links__column-icon img {
    width: 2rem;
    height: 2rem;
    color: var(--color-teal);
}

.resource-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.resource-links__item {
    border-bottom: 1px solid var(--color-gray-border);
}

.resource-links__item:last-child {
    border-bottom: 0;
}

.resource-links__item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.4rem 0;
    color: #000;
    text-decoration: none;
    font-size: 2rem;
    line-height: 1.35;
    transition: color 0.2s;
}

.resource-links__item a:hover {
    color: var(--color-teal);
}

.resource-links__item-chevron {
    flex-shrink: 0;
    color: #999;
    transition: transform 0.2s, color 0.2s;
}

.resource-links__item-chevron svg {
    width: 1.8rem;
    height: 1.8rem;
    display: block;
}

.resource-links__item a:hover .resource-links__item-chevron {
    color: var(--color-teal);
    transform: translateX(2px);
}

@media (max-width: 767px) {
    .resource-links__columns {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .resource-links__subtitle {
        max-width: 100%;
    }

    .resource-links__featured-card {
        flex-wrap: wrap;
        padding: 2rem;
    }

    .resource-links__featured-title {
        font-size: 1.7rem;
    }
}


/* --- Fancy Text: editor-controlled size + alternating indent ---------------
   Both knobs come in as custom properties on the section, written inline by
   fancy-text.php from its text_size / text_indent fields. Every rule falls back
   to the value style.css already used, so a block with the fields left empty
   renders exactly as it did before. These live here (not style.css) because
   that file is the agency's compiled build. */

/* The original size ladder, with --ft-size acting as a ceiling. min() means a
   12rem cap still lets small screens scale down to 7rem as they do now. */
.feature-text .text a > span                             { font-size: min(7rem,  var(--ft-size, 7rem)); }
@media (min-width: 768px)  { .feature-text .text a > span { font-size: min(14rem, var(--ft-size, 14rem)); } }
@media (min-width: 1025px) { .feature-text .text a > span { font-size: min(18rem, var(--ft-size, 18rem)); } }
@media (min-width: 1281px) { .feature-text .text a > span { font-size: min(22rem, var(--ft-size, 22rem)); } }
@media (min-width: 1536px) { .feature-text .text a > span { font-size: min(26rem, var(--ft-size, 26rem)); } }

/* Alternating flush-left / indented. Opt-in via the block's `layout` field,
   which adds .feature-text--alt — without it the original descending staircase
   in style.css (nth-child 2 = 25%, 3 = 41.6%, 4 = right-aligned) still applies.
   The staircase assumed single words; multi-word lines run out of room in it. */
.feature-text--alt .text:nth-child(odd) {
    padding-left: 0;
    text-align: left;
}

.feature-text--alt .text:nth-child(even) {
    padding-left: var(--ft-indent, 25%);
    text-align: left;
}


/* --- Paired List ---------------------------------------------------------
   Intro copy + dark plate holding term/description rows. The plate bleeds off
   one viewport edge; which edge is set by the block's plate_position field.

   The bleed is done with an over-extending pseudo-element clipped by the
   section's overflow, NOT the mock's calc(--half - 50vw). That original maths
   assumed one fixed 1240px column; .container here steps through six
   max-widths, so a hardcoded half-width would misalign at five of them.
   Running the background past the viewport and clipping it needs no width
   constant at all. */

.paired-list {
    position: relative;
    overflow: hidden;
}

.paired-list__grid {
    display: grid;
    grid-template-columns: 0.76fr 1.24fr;
    gap: 6.2rem;
    align-items: center;
    /* Holds the copy off the window edge by the same 1/12 of the container that
       .row.justify-center + .w-5/6 gives Recent Posts, and that w-1/3 + mx-auto
       gives the Content (Fancy Title) & Image text column. Percentage padding on
       a direct child of .container resolves against the container width, so this
       tracks every breakpoint the way those blocks do.
       Only ever applied on the copy's side — the plate keeps bleeding off the
       opposite edge. */
    padding-left: 8.3333%;
}

.paired-list--plate-left .paired-list__grid {
    padding-left: 0;
    padding-right: 8.3333%;
}

.paired-list__copy {
    max-width: 36ch;
}

.paired-list__heading {
    margin-bottom: 2rem;
}

.paired-list__sub {
    font-size: 1.9rem;
    line-height: 1.7;
    color: var(--color-gray-dark);
}

/* The plate. Its background is the ::before, so the box itself can stay inside
   the grid and keep the content aligned to the container. */
.paired-list__plate {
    position: relative;
    padding: 5.8rem 0 5.8rem 5.8rem;
}

.paired-list__plate::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -50vw;                 /* far past the edge; the section clips it */
    background: #0d1b35;
    border-radius: 3rem 0 0 3rem;
    z-index: 0;
}

.paired-list__inner {
    position: relative;
    z-index: 1;
}

/* Column labels. aria-hidden in the markup — they caption the dl visually, but
   a screen reader gets the term/definition pairing from <dl> itself. */
.paired-list__heads {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 3.1rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.paired-list__heads span {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

.paired-list__rows {
    margin: 0;
}

.paired-list__row {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 3.1rem;
    padding: 2.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    align-items: baseline;
}

.paired-list__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.paired-list__term {
    display: flex;
    align-items: baseline;
    gap: 1.3rem;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2.1rem;
    line-height: 1.12;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
}

/* --pl-dot is set per row inline, cycling the four brand colours. */
.paired-list__dot {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--pl-dot, var(--color-teal));
    display: block;
    flex-shrink: 0;
    transform: translateY(-0.2rem);
}

.paired-list__desc {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.66;
    color: rgba(255, 255, 255, .68);
}

/* --- Mirrored: plate on the left ---
   DOM order stays copy-first; only the visual order swaps. Safe here because
   the block has no interactive elements for the tab order to disagree with. */
.paired-list--plate-left .paired-list__grid {
    grid-template-columns: 1.24fr 0.76fr;
}

.paired-list--plate-left .paired-list__copy  { order: 2; }
.paired-list--plate-left .paired-list__plate { order: 1; }

/* With the copy on the right, max-width would otherwise leave it left-aligned
   inside its track and its outer edge short of the gutter. Push it across so the
   gap to the window matches the copy-on-left case. */
.paired-list--plate-left .paired-list__copy {
    margin-left: auto;
}

.paired-list--plate-left .paired-list__plate {
    padding: 5.8rem 5.8rem 5.8rem 0;
}

.paired-list--plate-left .paired-list__plate::before {
    left: -50vw;
    right: 0;
    border-radius: 0 3rem 3rem 0;
}

/* --- Stacked ---
   991px matches content-image-left and the title bar. Not the 767px use-cases
   stacks at: this block has two columns inside the plate as well as the outer
   two, and below ~990 those inner columns get too narrow to read. */
@media (max-width: 991px) {
    .paired-list__grid,
    .paired-list--plate-left .paired-list__grid {
        grid-template-columns: 1fr;
        gap: 3.8rem;
        /* Stacked, the copy runs the full container like the other blocks do. */
        padding-left: 0;
        padding-right: 0;
    }

    /* Copy always reads first once stacked, whichever side the plate was on. */
    .paired-list--plate-left .paired-list__copy  { order: 1; }
    .paired-list--plate-left .paired-list__plate { order: 2; }

    .paired-list__copy {
        max-width: none;
    }

    /* Both variants bleed right when stacked — a rounded box with equal margins
       would lose the edge-bleed language the design is built on. */
    .paired-list__plate,
    .paired-list--plate-left .paired-list__plate {
        padding: 4rem 0 4rem 3.4rem;
    }

    .paired-list__plate::before,
    .paired-list--plate-left .paired-list__plate::before {
        left: 0;
        right: -50vw;
        border-radius: 3rem 0 0 3rem;
    }

    .paired-list__heads,
    .paired-list__row {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    /* Only the first label makes sense once the pairs stack. */
    .paired-list__heads span:last-child {
        display: none;
    }

    .paired-list__desc {
        max-width: 52ch;
    }
}


/* --- Capability Cards -----------------------------------------------------
   Heading + lede, then a grid of linked cards that flood dark on hover.
   Ported from Mocks/4media-known-for-final.html, but built on theme values
   throughout: rift/sofia-pro rather than Oswald/DM Sans, the brand tokens
   rather than the mock's near-matches, #0d1b35 for the flood rather than its
   #0B0B0B, .container rather than a fixed 1240px wrap, s-padding rather than
   96px, and the 991/767 breakpoints rather than 1040/640. */

.capability-cards__intro {
    max-width: 62ch;
}

.capability-cards__title {
    margin-bottom: 2rem;
}

.capability-cards__sub {
    font-size: 1.9rem;
    line-height: 1.75;
    color: var(--color-gray-dark);
}

.capability-cards__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.4rem;
    margin-top: 5.8rem;
}

/* The card. Same white/rounded treatment as .resource-links__card. */
.capability-cards__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 3.8rem;
    min-height: 34rem;
    background: #fff;
    border: 1px solid var(--color-gray-border);
    border-radius: 1.6rem;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transition-base);
}

.capability-cards__card:hover {
    border-color: #0d1b35;
}

/* Ink flood. A pseudo-element rather than a background transition so the card's
   own border colour can animate independently. */
.capability-cards__card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #0d1b35;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.capability-cards__card:hover::before {
    opacity: 1;
}

/* Everything above the flood. */
.capability-cards__icon,
.capability-cards__card-title,
.capability-cards__card-desc,
.capability-cards__go {
    position: relative;
    z-index: 2;
}

.capability-cards__icon {
    position: absolute;
    top: 3.8rem;
    right: 3.8rem;
    width: 4.2rem;
    height: 4.2rem;
}

.capability-cards__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--cc-accent, var(--color-teal));
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.capability-cards__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Bare h3 would inherit the global .h3 sizing (3rem+); card titles are smaller.
   The rift/uppercase it also inherits is wanted here, so only size is reset. */
.capability-cards__card-title {
    margin: 0 0 1.6rem;
    padding-right: 5.8rem;
    font-size: 2.1rem;
    line-height: 1.14;
    transition: color var(--transition-base);
}

.capability-cards__card-desc {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.66;
    color: var(--color-gray-dark);
    transition: color var(--transition-base);
}

.capability-cards__card:hover .capability-cards__card-title {
    color: #fff;
}

.capability-cards__card:hover .capability-cards__card-desc {
    color: rgba(255, 255, 255, .74);
}

/* margin-top:auto pins this to the foot of the card whatever the copy length.
   Block rather than flex so the arrow flows after the last word — with flex it
   gets pushed to the far right whenever a long label wraps to two lines. */
.capability-cards__go {
    display: block;
    margin-top: auto;
    padding-top: 3rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    transition: color var(--transition-base);
}

.capability-cards__card:hover .capability-cards__go {
    color: var(--cc-accent, var(--color-teal));
}

.capability-cards__go .btn-arrow {
    display: inline-block;
    margin-left: 0.8rem;
    transition: transform var(--transition-base);
}

.capability-cards__card:hover .btn-arrow {
    transform: translate(0.4rem, -0.4rem);
}

.capability-cards__cta {
    margin-top: 5.2rem;
    text-align: center;
}

@media (max-width: 991px) {
    .capability-cards__grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.8rem;
        margin-top: 4rem;
    }

    .capability-cards__card {
        min-height: 0;
        padding: 3rem;
    }

    .capability-cards__icon {
        top: 3rem;
        right: 3rem;
    }
}

@media (max-width: 767px) {
    .capability-cards__grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .capability-cards__card,
    .capability-cards__card::before,
    .capability-cards__card-title,
    .capability-cards__card-desc,
    .capability-cards__go,
    .capability-cards__go .btn-arrow {
        transition: none;
    }
}