/* ==========================================================================
   SCC Digital Report - Fully Isolated Styles
   All classes prefixed with .scc- to prevent theme interference
   ========================================================================== */

/* -------------------------------------------------------------------------
   @font-face — Forma DJR Display (self-hosted)
   ------------------------------------------------------------------------- */
@font-face {
    font-family: 'Forma DJR Display';
    src: url('../fonts/forma-djr-display.woff2') format('woff2'),
        url('../fonts/forma-djr-display.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   ------------------------------------------------------------------------- */
.scc-report {
    --scc-font-display: var(--e-global-typography-61e392c-font-family, 'Forma DJR Display'), 'Georgia', serif;
    --scc-font-body: 'Montserrat', 'Helvetica Neue', sans-serif;
    --scc-color-black: #000000;
    --scc-color-white: #ffffff;
    --scc-color-purple: #9042db;
    --scc-color-blue-light: #e4f2f9;
    --scc-color-yellow-cream: #fdf7e5;
    --scc-color-mint: #edf9f8;
    --scc-color-pink-bg: #fde7e4;
    --scc-color-yellow-bg: #f8e4a8;
    --scc-color-blue-cta: #4eaad8;
    --scc-color-link: #377899;
    --scc-max-width: 1440px;
    --scc-content-padding: 100px;
    --scc-transition-base: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    --scc-transition-fast: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------------
   Reset / Isolation Layer
   ------------------------------------------------------------------------- */
/* Prevent horizontal scroll from bleeded elements without breaking sticky.
   Applied to html/body so it doesn't create a containing block on .scc-report. */
html:has(.scc-report),
html:has(.scc-report) body {
    overflow-x: clip !important;
}

html {
    scroll-behavior: smooth !important;
}

.scc-report {
    all: unset !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--scc-color-black) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    box-sizing: border-box !important;
}

.scc-report *,
.scc-report *::before,
.scc-report *::after {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
}

/* Prevent theme from forcing text-transform on report headings and body text */
.scc-report h1,
.scc-report h2,
.scc-report h3,
.scc-report h4,
.scc-report p,
.scc-report a {
    text-transform: none !important;
}

.scc-report img {
    max-width: 100%;
    height: auto;
    display: block;
    border: none !important;
    outline: none !important;
}

.scc-report h1,
.scc-report h2,
.scc-report h3,
.scc-report h4,
.scc-report p {
    margin: 0;
    padding: 0;
    border: none !important;
    background: none !important;
    font-size: inherit;
    line-height: inherit;
}

.scc-report a {
    text-decoration: none;
    color: inherit;
}

.scc-report a.scc-btn--primary,
.scc-report a.scc-btn--download {
    color: var(--scc-color-white) !important;
}

.scc-report a.scc-btn--primary:hover {
    color: var(--scc-color-purple) !important;
}

.scc-report a.scc-btn--case {
    color: var(--scc-color-black) !important;
}

.scc-report a.scc-btn--case:hover {
    color: var(--scc-color-white) !important;
}

.scc-report a.scc-btn--scroll {
    color: var(--scc-color-purple) !important;
}

.scc-report a.scc-link {
    color: var(--scc-color-link) !important;
    text-decoration: underline !important;
}

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */
.scc-report h1,
.scc-report h2 {
    font-family: var(--scc-font-display) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.scc-report h3 {
    font-family: var(--scc-font-display) !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    text-transform: none !important;
}

/* -------------------------------------------------------------------------
   Animation States (pre-reveal)
   ------------------------------------------------------------------------- */
[data-scc-anim] {
    opacity: 0;
    will-change: opacity, transform;
}

[data-scc-anim="fade-up"] {
    transform: translateY(60px);
}

[data-scc-anim="slide-right"] {
    transform: translateX(-120px);
}

[data-scc-anim="slide-left"] {
    transform: translateX(120px);
}

[data-scc-anim="stagger-up"]>* {
    opacity: 0;
    transform: translateY(40px);
}

/* Revealed states */
[data-scc-anim].scc-visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
    transition: opacity var(--scc-transition-base), transform var(--scc-transition-base) !important;
}

[data-scc-anim="stagger-up"].scc-visible>* {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity var(--scc-transition-base), transform var(--scc-transition-base) !important;
}

/* ==========================================================================
   SECTION 1: HERO
   ========================================================================== */
.scc-hero {
    position: relative !important;
    width: 100% !important;
    min-height: 860px !important;
    overflow: hidden !important;
    background: var(--scc-color-blue-light) !important;
    padding-bottom: 6px !important;
}

.scc-hero__bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--scc-color-blue-light) !important;
    z-index: 0 !important;
}

.scc-hero__inner {
    position: relative !important;
    z-index: 1 !important;
    max-width: var(--scc-max-width) !important;
    margin: 0 auto !important;
    padding: 200px var(--scc-content-padding) 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    min-height: 860px !important;
}

.scc-hero__image {
    flex-shrink: 0 !important;
    width: 440px !important;
    margin-top: 70px !important;
}

.scc-hero__image img {
    width: 100% !important;
    height: auto !important;
}

.scc-hero__text {
    flex: 1 !important;
    padding-top: 124px !important;
    padding-left: 80px !important;
    max-width: 620px !important;
}

.scc-hero__title {
    font-size: 45px !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 25px !important;
    text-transform: none !important;
}

.scc-hero__subtitle,
.scc-report h2.scc-hero__subtitle {
    font-family: var(--scc-font-display) !important;
    font-weight: 400 !important;
    font-size: 35px !important;
    line-height: 1.2 !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 25px !important;
    text-transform: none !important;
}

.scc-hero__desc {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--scc-color-black) !important;
    letter-spacing: -0.16px !important;
    max-width: 570px !important;
    margin-bottom: 40px !important;
}

.scc-hero__buttons {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.scc-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: -0.16px !important;
    cursor: pointer !important;
    transition: all var(--scc-transition-fast) !important;
    white-space: nowrap !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
}

.scc-btn--primary {
    background: var(--scc-color-purple) !important;
    color: var(--scc-color-white) !important;
    padding: 10px 20px !important;
    border-radius: 100px !important;
    position: relative !important;
    overflow: hidden !important;
}

.scc-btn--primary:hover {
    background: var(--scc-color-white) !important;
    color: var(--scc-color-purple) !important;
    transform: none !important;
    box-shadow: none !important;
}

.scc-btn--primary:hover .scc-btn__icon svg path:first-child {
    stroke: var(--scc-color-purple) !important;
    fill: none !important;
}

.scc-btn--primary:hover .scc-btn__icon svg path:last-child {
    fill: var(--scc-color-purple) !important;
}

.scc-btn__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.scc-btn__icon svg {
    width: 20px !important;
    height: 19px !important;
}

.scc-btn--scroll {
    color: var(--scc-color-purple) !important;
    background: transparent !important;
    padding: 0 !important;
}

.scc-btn--scroll:hover {
    opacity: 1 !important;
}

.scc-btn--scroll:hover .scc-btn__arrow-down svg circle {
    fill: var(--scc-color-purple) !important;
    transition: fill 0.3s ease !important;
}

.scc-btn--scroll:hover .scc-btn__arrow-down svg path {
    stroke: var(--scc-color-white) !important;
    transition: stroke 0.3s ease !important;
}

.scc-btn__arrow-down {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    animation: scc-bounce 2.5s ease-in-out infinite !important;
}

.scc-btn__arrow-down svg {
    width: 35px !important;
    height: 35px !important;
}

@keyframes scc-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* Case study button icon: 23×23, uses currentColor so it flips to white on hover */
.scc-btn__icon--case {
    width: 23px !important;
    height: 23px !important;
    flex-shrink: 0 !important;
}

.scc-btn__icon--case svg {
    width: 23px !important;
    height: 23px !important;
    display: block !important;
}

.scc-btn--case {
    background: var(--scc-color-white) !important;
    color: var(--scc-color-black) !important;
    padding: 10px 20px !important;
    border-radius: 100px !important;
    font-size: 16px !important;
    gap: 7px !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.scc-btn--case:hover {
    background: var(--scc-color-black) !important;
    color: var(--scc-color-white) !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--scc-color-black) !important;
}

.scc-btn--case:hover .scc-btn__icon--case svg circle,
.scc-btn--case:hover .scc-btn__icon--case svg path {
    stroke: var(--scc-color-white) !important;
}

.scc-btn--download {
    background: linear-gradient(135deg, var(--scc-color-blue-cta) 0%, var(--scc-color-purple) 100%) !important;
    color: var(--scc-color-white) !important;
    padding: 10px 20px !important;
    border-radius: 100px !important;
    transition: all var(--scc-transition-fast) !important;
}

.scc-btn--download:hover {
    background: linear-gradient(135deg, var(--scc-color-purple) 0%, var(--scc-color-blue-cta) 100%) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   SECTION 2: VIDEO
   ========================================================================== */
.scc-video {
    background: var(--scc-color-blue-light) !important;
    padding: 0 !important;
    padding-top: 60px !important;
    padding-bottom: 100px !important;
}

.scc-video__inner {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 var(--scc-content-padding) !important;
}

.scc-video__embed {
    width: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.scc-video__placeholder {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #d9d9d9 !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.scc-video__placeholder p {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--scc-color-black) !important;
}

/* ==========================================================================
   Logos Section
   ========================================================================== */
.scc-who-are-we .scc-next__header-right {
    padding-top: 0 !important;
}

@media screen and (min-width: 1024px) {
    .scc-who-are-we .scc-next__header-right {
        padding-top: 71px !important;
    }
}

.scc-logos {
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 100px;
}

.scc-logos img {
    max-width: 245px;
    width: 100%;
    object-fit: contain;
}

/* ==========================================================================
   SECTION 3: MAP
   ========================================================================== */
.scc-map {
    position: relative !important;
    width: 100% !important;
    min-height: 1000px !important;
    overflow: visible !important;
    padding: 0 var(--scc-content-padding) !important;
}

.scc-map__bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
}

.scc-map__bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.scc-map__inner {
    position: relative !important;
    z-index: 1 !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-top: 40px !important;
}

.scc-map__title {
    font-size: 45px !important;
    text-align: center !important;
    margin-bottom: 15px !important;
    color: var(--scc-color-black) !important;
}

.scc-map__subtitle {
    font-family: var(--scc-font-display) !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    text-align: center !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 30px !important;
}

.scc-map__tags {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important;
    margin-bottom: 40px !important;
}

.scc-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 20px !important;
    border-radius: 100px !important;
    border: 0.5px solid var(--scc-color-black) !important;
    font-family: var(--scc-font-body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--scc-color-black) !important;
    letter-spacing: -0.12px !important;
    white-space: nowrap !important;
    transition: transform var(--scc-transition-fast), box-shadow var(--scc-transition-fast) !important;
}

.scc-tag:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.scc-map__visual {
    text-align: center !important;
    margin-bottom: 40px !important;
}

/* Inline SVG constellation — replaces the PNG image */
.scc-map__constellations {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Category star groups — used by JS tag filter to fade non-matching categories */
.scc-map__constellations [data-scc-category] {
    transition: opacity 0.4s ease !important;
}

.scc-map__illustration {
    position: absolute !important;
    top: 712px !important;
    left: -46px !important;
    width: 351px !important;
    height: 430px !important;
    z-index: 1 !important;
}

/* Active variant (with exclamation mark) — shown when popup is open.
   Sits ABOVE the dark backdrop (z-index 200) so the woman stays visible. */
.scc-map__illustration--active {
    top: 665px !important;
    left: calc(50% - 620px - 46px) !important;
    width: 352px !important;
    height: 476px !important;
    z-index: 201 !important;
    overflow: hidden !important;
}

.scc-map__illus-exclamation {
    position: absolute !important;
    top: 0.05% !important;
    left: 9.8% !important;
    right: 76.04% !important;
    bottom: 83.39% !important;
}

.scc-map__illus-body {
    position: absolute !important;
    top: 9.63% !important;
    left: 0.07% !important;
    right: 0.1% !important;
    bottom: 0.06% !important;
}

.scc-map__illus-exclamation img,
.scc-map__illus-body img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.scc-map__touchpoints {
    position: absolute !important;
    top: 348px !important;
    left: 5px !important;
    width: 250px !important;
    height: 262px !important;
    overflow: hidden !important;
    display: none !important;
}

.scc-map__touchpoints img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ==========================================================================
   MAP — CONSTELLATION HOTSPOT SYSTEM
   The constellation PNG is wrapped in .scc-map__constellation-wrap.
   Star hotspot buttons are absolutely positioned over the PNG using
   percentage-based left/top values so they scale with the image.
   Popup card (.scc-map__popup) is absolutely positioned within .scc-map
   and swapped with content by JS on each star click.
   ========================================================================== */

/* Wrapper holds the constellation image and all star hotspot buttons.
   position:relative is the anchor for the absolute-positioned stars. */
.scc-map__constellation-wrap {
    position: relative !important;
    display: inline-block !important;
    width: 100% !important;
    line-height: 0 !important;
    /* collapse whitespace gap below inline-block img */
}

/* -------------------------------------------------------------------------
   Star hotspot button
   - 40×40px invisible circle, centered via negative margin-offset trick
   - Stars are already drawn in the constellation image — these are just
     transparent clickable areas positioned over the image stars
   - .scc-map__star--hidden: used by the tag filter to hide non-matching stars
   - .scc-map__star--visible: added by IntersectionObserver stagger fade-in
   ------------------------------------------------------------------------- */
/* Star elements — 4-pointed SVG star shapes positioned over the constellation.
   JS sets left/top/width/height and background-image inline.
   z-index 202 so they appear ABOVE the dark backdrop (200) when popup is open. */
.scc-map__star {
    position: absolute !important;
    border: none !important;
    background-color: transparent !important;
    cursor: pointer !important;
    opacity: 0 !important;
    transform: scale(0.6) !important;
    transition:
        opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.3s ease !important;
    z-index: 202 !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Revealed state — stagger fade-in via IntersectionObserver */
.scc-map__star--visible {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Hover: scale up with a subtle glow */
.scc-map__star:hover {
    transform: scale(1.25) !important;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3)) brightness(1.1) !important;
}

/* Tag filter: hide non-matching stars */
.scc-map__star--hidden {
    opacity: 0.15 !important;
    pointer-events: none !important;
    filter: grayscale(1) !important;
}

/* Tag filter: matching stars stay fully visible */
.scc-map__star--active {
    opacity: 1 !important;
    filter: none !important;
}

/* -------------------------------------------------------------------------
   Tag filter button states
   - .scc-tag--filter: makes the <span> tags into interactive buttons
   - .scc-tag--active: visual indicator while a filter is selected
   ------------------------------------------------------------------------- */
.scc-tag--filter {
    cursor: pointer !important;
    border: 0.5px solid var(--scc-color-black) !important;
    font-family: var(--scc-font-body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    transition:
        transform var(--scc-transition-fast),
        box-shadow var(--scc-transition-fast),
        opacity var(--scc-transition-fast) !important;
}

.scc-tag--filter:focus-visible {
    box-shadow: 0 0 0 3px rgba(144, 66, 219, 0.5) !important;
}

/* When a filter is active, slightly lift the selected tag */
.scc-tag--active {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
    outline: 2px solid var(--scc-color-black) !important;
    outline-offset: 2px !important;
}

/* Dim the non-active tags when a filter is engaged */
.scc-tag--dimmed {
    opacity: 0.5 !important;
}

/* When a tag filter is active, fade the constellation image to 30% opacity.
   JS adds this class to the constellation wrapper when a category is selected. */
.scc-map__constellations--filtered {
    opacity: 0.3 !important;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* -------------------------------------------------------------------------
   Popup card
   .scc-map__popup is positioned absolutely within .scc-map (which is
   position:relative). JS calculates left/top based on the clicked star's
   position, then clamps to keep it inside the viewport.
   The card is 430px wide per Figma spec, white, 50px border-radius.
   -------------------------------------------------------------------------  */
.scc-map__popup-backdrop {
    display: none !important;
    position: absolute !important;
    top: 0 !important;
    left: -100px !important;
    right: -100px !important;
    bottom: -200px !important;
    z-index: 200 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    cursor: default !important;
}

/* Backdrop visible state — JS toggles this class */
.scc-map__popup-backdrop--visible {
    display: block !important;
}

.scc-map__popup {
    display: none !important;
    position: absolute !important;
    z-index: 201 !important;
    right: 60px !important;
    top: 180px !important;
    width: 560px !important;
    max-width: calc(100vw - 80px) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border-radius: 50px !important;
    padding: 43px 49px 40px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    animation: scc-popup-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* Visible state — JS removes [hidden] and adds this class */
.scc-map__popup:not([hidden]) {
    display: block !important;
}

/* Entrance: pop from slightly smaller scale with a fade */
@keyframes scc-popup-enter {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Close button — top-right corner, simple X */
.scc-map__popup-close {
    position: absolute !important;
    top: 33px !important;
    right: 41px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #000 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    font-family: var(--scc-font-body) !important;
    line-height: 1 !important;
    padding: 4px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    transition: opacity var(--scc-transition-fast) !important;
    z-index: 1 !important;
}

.scc-map__popup-close:hover {
    opacity: 0.6 !important;
    transform: none !important;
    background: transparent !important;
}

/* Category pill — coloured badge matching the star colour */
.scc-map__popup-category {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 16px !important;
    border-radius: 100px !important;
    border: 0.5px solid var(--scc-color-black) !important;
    font-family: var(--scc-font-body) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 16px !important;
    text-transform: lowercase !important;
}

/* Business logo — shown when available, hidden when empty */
.scc-map__popup-logo {
    margin-bottom: 12px !important;
}

.scc-map__popup-logo:empty {
    display: none !important;
}

.scc-map__popup-logo img {
    max-height: 50px !important;
    width: auto !important;
    display: block !important;
}

/* Business name — 25px Forma DJR Display Regular */
.scc-map__popup-name {
    font-family: var(--scc-font-display) !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 4px !important;
}

/* Optional sub-name below business name */
.scc-map__popup-subname {
    font-family: var(--scc-font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #555 !important;
    margin-bottom: 12px !important;
}

/* Hide the sub-name element when it is empty */
.scc-map__popup-subname:empty {
    display: none !important;
}

/* Location row: pin icon + location text, 18px Medium */
.scc-map__popup-location {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--scc-font-body) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 14px !important;
}

.scc-map__popup-pin {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    color: var(--scc-color-link);
}

/* Description text — 16px Montserrat Regular, uses full popup width */
.scc-map__popup-description {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 20px !important;
}

/* Section label rows — "Support provided through…" / "Type of support:" */
.scc-map__popup-label {
    font-family: var(--scc-font-display) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 6px !important;
}

/* Support description text */
.scc-map__popup-support {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 20px !important;
}

/* Type of support value */
.scc-map__popup-type {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--scc-color-black) !important;
}

/* Quote section in popup */
.scc-map__popup-quote {
    margin-top: 12px !important;
}

.scc-map__popup-quote-text {
    font-family: var(--scc-font-body) !important;
    font-size: 15px !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: var(--scc-color-black) !important;
    line-height: 1.5 !important;
    margin: 6px 0 8px !important;
    padding: 0 !important;
    border: none !important;
}

.scc-map__popup-quote-attr {
    font-family: var(--scc-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #555 !important;
    margin: 0 !important;
}

/* -------------------------------------------------------------------------
   Responsive: on small screens the constellation wraps normally and
   the popup becomes a bottom-sheet-style fixed panel
   ------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .scc-map__popup {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
        top: auto !important;
        width: auto !important;
        max-width: 100% !important;
        border-radius: 30px !important;
    }
}

/* ==========================================================================
   SECTION 4: RESULTS / QUOTES
   ========================================================================== */
.scc-results {
    position: relative !important;
    background: var(--scc-color-white) !important;
    overflow: hidden !important;
    padding: 130px 0 80px !important;
}

.scc-results__title {
    font-size: 45px !important;
    text-align: center !important;
    margin-bottom: 60px !important;
    color: var(--scc-color-black) !important;
}

.scc-results__sme-yellow {
    position: absolute !important;
    top: 206px !important;
    right: 292px !important;
    width: 150px !important;
    z-index: 2 !important;
}

.scc-results__sme-pink {
    position: absolute !important;
    top: 1412px !important;
    left: 258px !important;
    width: 150px !important;
    z-index: 2 !important;
}

/* Quote Cards */
.scc-quote {
    width: 100% !important;
    margin-bottom: 30px !important;
    overflow: visible !important;
    position: relative;
    z-index: 5;
}

.scc-quote--left {
    display: flex !important;
    justify-content: flex-start !important;
}

.scc-quote--right {
    display: flex !important;
    justify-content: flex-end !important;
}

.scc-quote__card {
    width: 730px !important;
    max-width: 100% !important;
    padding: 40px 102px 40px !important;
    position: relative !important;
    transition: transform var(--scc-transition-fast) !important;
}

.scc-quote--left .scc-quote__card {
    border-radius: 0 60px 60px 0 !important;
}

.scc-quote--right .scc-quote__card {
    border-radius: 60px 0 0 60px !important;
}

.scc-quote__card:hover {
    transform: scale(1.01) !important;
}

.scc-quote__mark {
    display: block !important;
    width: 43px !important;
    height: 54px !important;
    margin-bottom: 37px !important;
}

.scc-quote__text {
    font-family: var(--scc-font-display) !important;
    font-weight: 400 !important;
    font-size: 25px !important;
    line-height: 1.3 !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 24px !important;
    max-width: 522px !important;
}

.scc-quote__footer {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.scc-quote__author {
    display: flex !important;
    flex-direction: column !important;
}

.scc-quote__name {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--scc-color-black) !important;
}

.scc-quote__org {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--scc-color-black) !important;
}

.scc-quote__card--has-image {
    overflow: visible !important;
}

.scc-quote__circle-image {
    position: absolute !important;
    width: 247px !important;
    height: 247px !important;
    right: -170px !important;
    top: 139px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.scc-quote__circle-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* -------------------------------------------------------------------------
   Balloon Quotes — absolutely positioned within a fixed-size canvas.
   Canvas: 1240px wide × 900px tall, centred inside the section.
   Figma coordinates (relative to Figma section top at y:1836):
     Balloon 1: left:841, top:0    (399×603)
     Balloon 2: left:116, top:294  (319×283)  → 2130-1836
     Balloon 3: left:445, top:515  (349×309)  → 2351-1836
   All x coords are relative to 1240px content width inside section padding.
   ------------------------------------------------------------------------- */
.scc-balloons {
    position: relative !important;
    /* Canvas height: Balloon 3 bottom = 515+309 = 824px */
    width: 100% !important;
    max-width: 1240px !important;
    height: 830px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Individual balloon wrappers — absolutely placed on the canvas */
.scc-balloon {
    position: absolute !important;
    text-align: center !important;
    animation: scc-balloon-float 4s ease-in-out infinite !important;
}

.scc-balloon--2 {
    animation-delay: 1.2s !important;
}

.scc-balloon--3 {
    animation-delay: 2.4s !important;
}

@keyframes scc-balloon-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.scc-balloon:hover {
    transform: translateY(-8px) !important;
}

/* Balloon 1: hot-air balloon illustration 399×603 at left:841, top:0 */
.scc-balloon--1 {
    right: 0%;
    top: 0 !important;
    width: 399px !important;
    height: 603px !important;
}

/* Balloon 2: pink/coral speech-bubble SVG 319×283 at left:116, top:294 */
.scc-balloon--2 {
    left: 5%;
    top: 294px !important;
    width: 319px !important;
    height: 283px !important;
}

/* Balloon 3: yellow speech-bubble SVG 349×309 at left:445, top:515 */
.scc-balloon--3 {
    right: 30%;
    top: 515px !important;
    width: 349px !important;
    height: 309px !important;
}

.scc-balloon__bg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* Content overlay — sits on top of the balloon image using absolute positioning. */
.scc-balloon__content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 11% !important;
    pointer-events: none !important;
}

/* Quote mark: 128px Forma DJR Display Bold */
.scc-balloon__mark {
    display: block !important;
    width: 43px !important;
    height: 54px !important;
    flex-shrink: 0 !important;
    margin-bottom: 10px !important;
}

/* Quote text: 16px Montserrat Medium */
.scc-balloon__text {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: var(--scc-color-black) !important;
    letter-spacing: -0.16px !important;
    max-width: 249px !important;
}

/* Per-balloon content positioning using padding-top */

/* Balloon 1 (hot air balloon) — push content into the round top portion, above the basket */
.scc-balloon--1 .scc-balloon__content {
    justify-content: flex-start !important;
    padding-top: 18% !important;
    padding-bottom: 0 !important;
}

/* Balloon 2 (pink speech bubble) — account for tail at bottom */
.scc-balloon--2 .scc-balloon__content {
    padding-bottom: 12% !important;
}

/* Balloon 3 (yellow speech bubble) — account for tail at bottom */
.scc-balloon--3 .scc-balloon__content {
    padding-bottom: 12% !important;
}

/* Balloon 3 has slightly wider text (271px per Figma) */
.scc-balloon--3 .scc-balloon__text {
    max-width: 271px !important;
}

/* ==========================================================================
   SECTION 5: INFOGRAPHICS
   Layout: absolute positioning throughout to match Figma node 114:1810.
   The section is 1440px wide × 1951px tall, background #FDF7E5.
   .scc-infographics__canvas is the single positioning context.
   All child elements use position:absolute with pixel-exact Figma coords.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Outer section wrapper
   Full-width, cream background. Overflow hidden clips the bird illustration
   that bleeds off the left edge (left:-62px in Figma).
   ------------------------------------------------------------------------- */
.scc-infographics {
    background: var(--scc-color-yellow-cream) !important;
    overflow: hidden !important;
    /* Height is driven by the canvas inside, so no fixed height here */
}

/* -------------------------------------------------------------------------
   Canvas — the single positioning context for everything in S5.
   Figma section: 1440px wide × 1951px tall.
   Centred inside the full-width section with margin auto.
   position:relative so all absolute children are relative to this.
   ------------------------------------------------------------------------- */
.scc-infographics__canvas {
    position: relative !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    aspect-ratio: 1440 / 1951 !important;
}

.scc-infographics__canvas>* {
    position: absolute !important;
}

/* -------------------------------------------------------------------------
   Section title
   Figma: horizontally centred, top:84px, 45px Forma DJR Bold
   We use left:0/right:0 + text-align:center to centre within canvas width.
   ------------------------------------------------------------------------- */
.scc-infographics__title {
    position: absolute !important;
    left: 12.65% !important;
    top: 4.3% !important;
    width: 74.5% !important;
    text-align: center !important;
    font-size: 45px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--scc-color-black) !important;
    padding: 0 !important;
}

/* -------------------------------------------------------------------------
   ILLUSTRATION: infographic-image.png
   Figma: left:938, top:433, 499×533px
   z-index:1 — sits BEHIND Card 5 (z-index:3) but OVER Card 3's bottom edge.
   Card 3 ends at top:455 so the illustration pokes out below it.
   ------------------------------------------------------------------------- */
.scc-infographics__illustration {
    position: absolute !important;
    left: 65.23% !important;
    top: 22.19% !important;
    width: 34.7% !important;
    height: 27.32% !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.scc-infographics__illustration img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: top right !important;
}

/* -------------------------------------------------------------------------
   BASE CARD STYLES
   Shared by all five info cards. Each card gets its own position class
   (.scc-card--1 through .scc-card--5) for its unique Figma coordinates.
   All expandable cards share z-index:3 so they paint over the illustration.
   ------------------------------------------------------------------------- */
.scc-card {
    position: absolute !important;
    background: var(--scc-color-white) !important;
    border-radius: 30px !important;
    padding: 29px 37px !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: box-shadow var(--scc-transition-fast) !important;
}

.scc-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10) !important;
}

/* Shared card header layout: title on left, toggle button on right */
.scc-card__header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

/* -------------------------------------------------------------------------
   CARD TITLE
   35px Forma DJR Display Regular for the header title inside each card.
   .scc-card__title--large is used for Card 4's bigger statement text.
   ------------------------------------------------------------------------- */
.scc-card__title {
    font-family: var(--scc-font-display) !important;
    font-size: 35px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: var(--scc-color-black) !important;
}

/* Card 4 uses a larger, bolder title — it's a statement, not a header */
.scc-card__title--large {
    font-size: clamp(26px, 2.92vw, 42px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

/* -------------------------------------------------------------------------
   CARD DESCRIPTION TEXT
   Body text at the bottom of expandable cards. Positioned at the card's
   bottom edge via flex column on the card itself.
   Figma: 16px Montserrat Regular, max-width ~332px, bottom-aligned.
   ------------------------------------------------------------------------- */
.scc-card__desc {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--scc-color-black) !important;
    letter-spacing: -0.16px !important;
    max-width: 100% !important;
    margin-top: auto !important;
}

/* -------------------------------------------------------------------------
   TOGGLE BUTTON (+ circle on expandable cards)
   Base styles shared by all toggles. Colour variants defined below.
   Toggles are now <button> elements for accessibility.
   On click, JS opens the associated modal (data-scc-modal-open attr).
   When modal is open, JS adds .scc-card__toggle--active which shows an X.
   ------------------------------------------------------------------------- */
.scc-card__toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--scc-color-purple) !important;
    /* fallback; overridden per-card */
    color: var(--scc-color-white) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 35px !important;
    text-align: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: transform var(--scc-transition-fast), background var(--scc-transition-fast) !important;
    /* Reset button browser defaults */
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    padding: 0 !important;
}

.scc-card__toggle:hover {
    transform: scale(1.1) !important;
    filter: brightness(0.9) !important;
}

/* When the modal linked to this card is open, rotate to show X */
.scc-card__toggle--active span {
    display: inline-block !important;
    transform: rotate(45deg) !important;
    transition: transform var(--scc-transition-fast) !important;
}

/* Per-card toggle colours (Figma spec) */
.scc-card__toggle--red {
    background: #EF5C4D !important;
}

/* Card 1 */
.scc-card__toggle--purple {
    background: #9042DB !important;
}

/* Card 2 */
.scc-card__toggle--teal {
    background: #4FC1BB !important;
}

/* Card 3 */
.scc-card__toggle--blue {
    background: #4EAAD8 !important;
}

/* Card 5 */

/* -------------------------------------------------------------------------
   INDIVIDUAL CARD POSITIONS (Figma pixel coords)
   Each class sets left/top/width/height for that specific card.
   -------------------------------------------------------------------------
   Card 1: left:98,  top:252, 399×431px  — white bg
   Card 2: left:518, top:252, 399×431px  — white bg
   Card 3: left:938, top:252, 399×203px  — white bg  ← shorter
   Card 4: left:98,  top:701, 642×276px  — bg #A6D5EB, no toggle
   Card 5: left:760, top:546, 399×431px  — white bg, over illustration
   ------------------------------------------------------------------------- */

/* Card 1 */
.scc-card--1 {
    left: 6.81% !important;
    top: 12.92% !important;
    width: 27.75% !important;
    height: 22.09% !important;
}

/* Card 2 */
.scc-card--2 {
    left: 36.02% !important;
    top: 12.92% !important;
    width: 27.75% !important;
    height: 22.09% !important;
}

/* Card 3 — shorter than cards 1 & 2, illustration overlaps below */
.scc-card--3 {
    left: 65.23% !important;
    top: 12.92% !important;
    width: 27.75% !important;
    height: 10.4% !important;
}

/* Card 4 — WIDE statement card, no toggle, blue background */
.scc-card--4 {
    left: 6.81% !important;
    top: 35.93% !important;
    width: 44.65% !important;
    height: 14.15% !important;
    background: #A6D5EB !important;
    justify-content: space-between !important;
}

/* Card 5 — over the illustration (z-index:3 > illustration z-index:1) */
.scc-card--5 {
    left: 52.85% !important;
    top: 35.93% !important;
    width: 27.75% !important;
    height: 14.15% !important;
    z-index: 3 !important;
}

/* -------------------------------------------------------------------------
   QUOTE BUBBLES — scattered absolute layout matching Figma
   Each bubble is a positioned wrapper containing:
     - a PNG bubble image (the "shape")
     - an absolutely centred .scc-infographic-quote__content overlay
       that contains the quote mark + quote text
   -------------------------------------------------------------------------
   Bubble 4 (smallest): left:98,  top:1170, 278×245px  — quote-bubble-5.png
   Bubble 3:            left:370, top:1360, 348×307px  — quote-bubble-4.png
   Bubble 2:            left:675, top:1096, 320×283px  — quote-bubble-2.png
   Bubble 1 (largest):  left:968, top:1360, 370×327px  — quote-bubble-3.png
   ------------------------------------------------------------------------- */

/* Base wrapper: positioned absolutely, relative so the overlay can abs-pos */
.scc-infographic-quote {
    position: absolute !important;
    z-index: 2 !important;
}

/* The PNG image fills the wrapper exactly */
.scc-infographic-quote__bg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* Overlay sits centred inside the bubble wrapper.
   Uses position:absolute + inset 0 + flex to perfectly centre content. */
.scc-infographic-quote__content {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px 15% !important;
    text-align: center !important;
}

/* Quote mark: responsive Forma DJR Display Bold (reduced from 128px for scaled layout) */
.scc-infographic-quote__mark {
    display: block !important;
    width: 43px !important;
    height: 54px !important;
    margin-bottom: 10px !important;
    flex-shrink: 0 !important;
}

/* Quote text: responsive Montserrat Medium, centred */
.scc-infographic-quote__text {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: var(--scc-color-black) !important;
    letter-spacing: -0.16px !important;
    max-width: 90% !important;
}

/* Per-bubble positions and sizes from Figma */

/* Bubble 4 (smallest) — quote-bubble-5.png */
.scc-infographic-quote--4 {
    left: 6.81% !important;
    top: 59.97% !important;
    width: 19.33% !important;
    height: 12.56% !important;
}

/* Bubble 3 — quote-bubble-4.png */
.scc-infographic-quote--3 {
    left: 25.73% !important;
    top: 69.71% !important;
    width: 24.2% !important;
    height: 15.74% !important;
}

/* Bubble 2 — quote-bubble-2.png */
.scc-infographic-quote--2 {
    left: 46.94% !important;
    top: 56.18% !important;
    width: 22.25% !important;
    height: 14.5% !important;
}

/* Bubble 1 (largest) — quote-bubble-3.png */
.scc-infographic-quote--1 {
    left: 67.32% !important;
    top: 69.71% !important;
    width: 25.73% !important;
    height: 16.76% !important;
}

/* -------------------------------------------------------------------------
   BIRD ILLUSTRATION (infographic-2.png)
   Figma: left:-62, top:1547, 508×404px
   Negative left deliberately bleeds off the canvas left edge.
   overflow:hidden on .scc-infographics clips the bleed.
   ------------------------------------------------------------------------- */
.scc-infographics__bird {
    position: absolute !important;
    left: -4.31% !important;
    top: 79.29% !important;
    width: 35.33% !important;
    height: 20.71% !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.scc-infographics__bird img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* =========================================================================
   MODAL OVERLAY SYSTEM
   Modals appear as fixed overlays centered over the full viewport.
   Each modal is 720px wide (Figma spec), with a semi-transparent backdrop.
   JS adds/removes the [hidden] attribute to show/hide modals.
   ========================================================================= */

/* Full-viewport modal wrapper (uses fixed, not absolute, so it covers all) */
.scc-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

/* Hide when [hidden] attribute is present (the default state).
   Use display:none so it's fully removed from the accessibility tree. */
.scc-modal[hidden] {
    display: none !important;
}

/* Semi-transparent backdrop — clicking it closes the modal */
.scc-modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    cursor: pointer !important;
}

/* Modal panel — 720px wide, white, rounded, scrollable tall content */
.scc-modal__panel {
    position: relative !important;
    z-index: 1 !important;
    /* above backdrop */
    width: 720px !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    background: var(--scc-color-white) !important;
    border-radius: 24px !important;
    overflow-y: auto !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25) !important;
    /* Smooth entrance — JS adds .scc-modal--open for the animation trigger */
    animation: scc-modal-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes scc-modal-enter {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal header: title on left, close X on right */
.scc-modal__header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 36px 40px 20px !important;
    border-bottom: 1px solid #DBE0EC !important;
    position: sticky !important;
    top: 0 !important;
    background: var(--scc-color-white) !important;
    z-index: 1 !important;
}

/* Modal title: matches card title typography */
.scc-modal__title {
    font-family: var(--scc-font-display) !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    color: var(--scc-color-black) !important;
    flex: 1 !important;
}

/* Close button: #EF5C4D red per Figma spec, top-right of modal */
.scc-modal__close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #EF5C4D !important;
    color: var(--scc-color-white) !important;
    font-size: 28px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    padding: 0 0 2px !important;
    /* optical vertical centering of × */
    transition: transform var(--scc-transition-fast), background var(--scc-transition-fast) !important;
}

.scc-modal__close:hover {
    transform: scale(1.1) !important;
    background: #d44a3b !important;
}

/* Modal body: scrollable content area */
.scc-modal__body {
    padding: 28px 40px 40px !important;
}

/* Optional intro line above stat grid (used in Card 5 modal) */
.scc-modal__intro {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 16px !important;
}

/* =========================================================================
   STAT BLOCKS (inside modals)
   Coloured rectangular tiles with a large % number and a descriptor label.
   Used across all four card modals.
   ========================================================================= */

/* Stat grid: flex wrap, 12px gap, fills modal body width */
.scc-stat-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* Each individual stat tile */
.scc-stat {
    border-radius: 20px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 140px !important;
    flex: 1 1 180px !important;
    /* grow to fill, shrink down to 180px min */
}

/* Large % number: Forma DJR Display Bold, 52px */
.scc-stat__number {
    font-family: var(--scc-font-display) !important;
    font-size: 52px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--scc-color-black) !important;
}

/* Descriptor label below the number */
.scc-stat__label {
    font-family: var(--scc-font-display) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: var(--scc-color-black) !important;
    margin-top: 10px !important;
}

/* =========================================================================
   CONFIDENCE COMPARISON (Card 3 modal — before/after layout)
   Side-by-side two columns with a centred arrow between them.
   ========================================================================= */
.scc-confidence {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
}

.scc-confidence__col {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* "before" / "after" heading above each column */
.scc-confidence__label {
    font-family: var(--scc-font-display) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 8px !important;
}

/* The → arrow between before/after columns */
.scc-confidence__arrow {
    font-size: 40px !important;
    line-height: 1 !important;
    color: var(--scc-color-black) !important;
    align-self: center !important;
    flex-shrink: 0 !important;
    margin-top: 40px !important;
    /* accounts for the label above columns */
}

/* Confidence stat tiles are a bit shorter than the general stat tiles */
.scc-stat--confidence {
    min-height: 100px !important;
    flex: unset !important;
    width: 100% !important;
}

/* ==========================================================================
   SECTION 6: WHAT WE'VE LEARNT
   ========================================================================== */
.scc-learnt {
    overflow: hidden !important;
}

/* Hero sub */
.scc-learnt__hero {
    position: relative !important;
    min-height: 842px !important;
    padding: 0 var(--scc-content-padding) !important;
}

.scc-learnt__hero-bg--blue {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 812px !important;
    background: var(--scc-color-blue-light) !important;
    z-index: 0 !important;
}

.scc-learnt__hero-inner {
    position: relative !important;
    z-index: 1 !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: flex-start !important;
    padding-top: 88px !important;
}

.scc-learnt__hero-text {
    flex-shrink: 0 !important;
    width: 620px !important;
}

.scc-learnt__hero-title {
    font-size: 72px !important;
    line-height: 1 !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 30px !important;
}

.scc-learnt__hero-image {
    flex: 1 !important;
    margin-left: -100px !important;
    margin-top: 112px !important;
}

/* Six Points */
.scc-six-points {
    background: var(--scc-color-white) !important;
    padding: 80px var(--scc-content-padding) !important;
}

.scc-six-points__grid {
    max-width: 1100px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 60px 80px !important;
}

.scc-six-point {
    text-align: center !important;
    transition: transform var(--scc-transition-fast) !important;
}

.scc-six-point:hover {
    transform: translateY(-6px) !important;
}

.scc-six-point img {
    width: 210px !important;
    height: auto !important;
    margin: 0 auto 20px !important;
}

.scc-six-point p {
    font-family: var(--scc-font-display) !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: var(--scc-color-black) !important;
    text-align: center !important;
    max-width: 265px !important;
    margin: 0 auto !important;
}

/* Challenges */
.scc-challenges {
    position: relative !important;
    padding: 80px var(--scc-content-padding) !important;
}

.scc-challenges__bg--yellow {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--scc-color-yellow-cream) !important;
    z-index: 0 !important;
}

.scc-challenges__inner {
    position: relative !important;
    z-index: 1 !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
}

.scc-challenges__title {
    font-size: 45px !important;
    text-align: center !important;
    margin-bottom: 40px !important;
    color: var(--scc-color-black) !important;
}

.scc-challenges__cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    position: relative !important;
}

.scc-challenges__illus {
    position: absolute !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

/* Challenges-1: geometric shapes between focus & resources */
.scc-challenges__illus--1 {
    width: 169px !important;
    height: 124px !important;
    left: 69% !important;
    top: -30px !important;
}

/* Challenges-2: blue diamond between data & communication */
.scc-challenges__illus--2 {
    width: 92px !important;
    height: 126px !important;
    left: 19% !important;
    top: 40% !important;
}

.scc-challenge-card {
    background: var(--scc-color-white) !important;
    border-radius: 30px !important;
    padding: 30px 27px !important;
    transition: transform var(--scc-transition-fast), box-shadow var(--scc-transition-fast) !important;
}

.scc-challenge-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}

.scc-challenge-card h3 {
    font-family: var(--scc-font-display) !important;
    font-size: 35px !important;
    font-weight: 400 !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 20px !important;
}

.scc-challenge-card p {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--scc-color-black) !important;
    letter-spacing: -0.16px !important;
}

/* Blueprint */
.scc-blueprint {
    position: relative !important;
    padding: 80px var(--scc-content-padding) 40px !important;
    overflow: visible !important;
}

.scc-blueprint__bg--mint {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--scc-color-mint) !important;
    z-index: 0 !important;
}

.scc-blueprint__inner {
    position: relative !important;
    z-index: 1 !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 60px !important;
}

.scc-blueprint__image {
    flex-shrink: 0 !important;
    width: 500px !important;
}

.scc-blueprint__text h2 {
    font-size: 45px !important;
    line-height: 1.1 !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 20px !important;
}

.scc-blueprint__text p {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--scc-color-black) !important;
    letter-spacing: -0.16px !important;
}

/* Blueprint Quote — centered below the blueprint columns.
   Uses the same approach as the reference implementation:
   relative content with flex centering + padding, not absolute. */
.scc-blueprint-quote {
    display: flex !important;
    justify-content: center !important;
    margin-top: 60px !important;
    padding: 0 !important;
    background: none !important;
    position: relative !important;
    z-index: 2 !important;
}

.scc-blueprint-quote__bubble {
    position: relative !important;
    width: 348px !important;
    min-height: 307px !important;
    flex-shrink: 0 !important;
}

/* Bubble image fills the container — tail points down naturally */
.scc-blueprint-quote__bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    pointer-events: none !important;
    display: block !important;
}

/* Content overlay — relative (not absolute), flexbox centered with padding.
   The padding-bottom is larger to account for the tail area at the bottom. */
.scc-blueprint-quote__mark,
.scc-blueprint-quote__text {
    position: relative !important;
    z-index: 1 !important;
}

.scc-blueprint-quote__bubble {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 36px 60px !important;
    text-align: center !important;
}

.scc-blueprint-quote__mark {
    display: block !important;
    width: 43px !important;
    height: 54px !important;
    margin: 0 auto 10px !important;
}

.scc-blueprint-quote__text {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: var(--scc-color-black) !important;
    letter-spacing: -0.16px !important;
    max-width: 267px !important;
    text-align: center !important;
    margin: 0 !important;
}

/* ==========================================================================
   SECTION 7: WHAT'S NEXT
   ========================================================================== */
.scc-next {
    background: var(--scc-color-white) !important;
    overflow: visible !important;
}

.scc-next__header {
    padding: 60px var(--scc-content-padding) 40px !important;
}

.scc-next__header-inner {
    max-width: 1240px !important;
    margin: 0 auto !important;
    display: flex !important;
    gap: 60px !important;
}

.scc-next__header-left {
    flex-shrink: 0 !important;
    width: 528px !important;
}

.scc-next__title {
    font-size: 45px !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 20px !important;
}

.scc-next__subtitle {
    font-family: var(--scc-font-display) !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--scc-color-black) !important;
}

.scc-next__header-right {
    flex: 1 !important;
    padding-top: 91px !important;
}

.scc-next__header-right p {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--scc-color-black) !important;
    letter-spacing: -0.16px !important;
}

/* Sticky Scroll Cards */
.scc-sticky-scroll {
    padding: 0 !important;
}

.scc-sticky-scroll__cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
}

.scc-sticky-card {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    overflow: clip !important;
}

.scc-sticky-card--mint {
    z-index: 1 !important;
}

.scc-sticky-card--pink {
    z-index: 2 !important;
}

.scc-sticky-card--yellow {
    z-index: 3 !important;
}

.scc-sticky-card__inner {
    max-width: var(--scc-max-width) !important;
    margin: 0 auto !important;
    padding: 0 var(--scc-content-padding) !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    position: relative !important;
}

.scc-sticky-card::before {
    content: '' !important;
    position: absolute !important;
    top: 111px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: var(--scc-max-width) !important;
    height: 485px !important;
    border-radius: 80px 80px 0 0 !important;
    z-index: 0 !important;
}

.scc-sticky-card--mint::before {
    background: var(--scc-color-mint) !important;
}

.scc-sticky-card--pink::before {
    background: var(--scc-color-pink-bg) !important;
}

.scc-sticky-card--yellow::before {
    background: var(--scc-color-yellow-bg) !important;
}

.scc-sticky-card__text {
    position: relative !important;
    z-index: 1 !important;
    max-width: 620px !important;
    padding-top: 40px !important;
}

.scc-sticky-card__text p {
    font-family: var(--scc-font-display) !important;
    font-size: 35px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--scc-color-black) !important;
}

.scc-sticky-card__image {
    position: absolute !important;
    right: var(--scc-content-padding) !important;
    top: 180px !important;
    width: 460px !important;
    z-index: 1 !important;
}

/* Per-card image positions from Figma — each illustration sits at a different height */
.scc-sticky-card--mint .scc-sticky-card__image {
    top: 180px !important;
}

.scc-sticky-card--pink .scc-sticky-card__image {
    top: 239px !important;
}

.scc-sticky-card--yellow .scc-sticky-card__image {
    top: 271px !important;
}

/* Next Quotes */
.scc-next-quotes {
    padding: 60px 0 !important;
}

/* ==========================================================================
   SECTION 8: CTA
   ========================================================================== */
.scc-cta {
    position: relative !important;
    background: var(--scc-color-white) !important;
    /* min-height: 842px !important; */
}

.scc-cta__top {
    text-align: center !important;
    padding: 93px var(--scc-content-padding) 40px !important;
    margin-bottom: 200px !important;
}

.scc-cta__content {
    max-width: 766px !important;
    margin: 0 auto !important;
}

.scc-cta__title {
    font-size: 45px !important;
    color: var(--scc-color-black) !important;
    margin-bottom: 31px !important;
}

.scc-cta__desc {
    font-family: var(--scc-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--scc-color-black) !important;
    letter-spacing: -0.16px !important;
    margin-bottom: 36px !important;
}

.scc-link {
    color: var(--scc-color-link) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    transition: color var(--scc-transition-fast) !important;
}

.scc-link:hover {
    color: var(--scc-color-purple) !important;
}

.scc-cta__bottom {
    position: relative !important;
    background: var(--scc-color-yellow-cream) !important;
    min-height: 356px !important;
}

/*
 * CTA Illustration container — "freight-tile-hero-10 1" (Figma node 138:1054)
 * Dimensions: 720x559px, absolute bottom-left of .scc-cta__bottom
 * overflow:clip so layers extending outside the frame are hidden
 */
.scc-cta__illustration {
    width: 720px !important;
    height: 559px !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    overflow: clip !important;
    z-index: 1 !important;
    transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.scc-cta__illustration.scc-truck-moved {
    transform: translateX(720px) !important;
}

/*
 * Shared base for all positioned layers inside the illustration.
 * Each modifier class overrides the inset values to match Figma.
 */
.scc-cta__illus-layer {
    position: absolute !important;
    inset: 0 !important;
}

.scc-cta__illus-layer img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
}

/* ------------------------------------------------------------------
 * Layer 1 — Path_1084: Red/orange filled triangle
 * Figma inset: [21.97% 65.89% 60.45% 22.32%] of 720x559
 * → top≈122.8px  right≈474.4px  bottom≈338.1px  left≈160.7px
 * ------------------------------------------------------------------ */
.scc-cta__illus-layer--path1084 {
    top: 21.97% !important;
    right: 65.89% !important;
    bottom: 60.45% !important;
    left: 22.32% !important;
}

/* ------------------------------------------------------------------
 * Layer 2 — Path_1085: Triangle outline (black stroke)
 * Figma inset: [21.74% 65.76% 60.16% 22.11%] of 720x559
 * → top≈121.5px  right≈473.5px  bottom≈336.3px  left≈159.2px
 * ------------------------------------------------------------------ */
.scc-cta__illus-layer--path1085 {
    top: 21.74% !important;
    right: 65.76% !important;
    bottom: 60.16% !important;
    left: 22.11% !important;
}

/* ------------------------------------------------------------------
 * Layer 3 — Group_68: Architecture illustration, clipped by Group_67
 * Figma inset: [14.39% 0.07% 0.45% 0.22%] of 720x559
 * → top≈80.4px  right≈0.5px  bottom≈2.5px  left≈1.6px
 * ------------------------------------------------------------------ */
.scc-cta__illus-layer--group68 {
    top: 14.39% !important;
    right: 0.07% !important;
    bottom: 0.45% !important;
    left: 0.22% !important;
}

/*
 * Masked wrapper — Group_67 SVG (c40fa10c…) is a filled black rectangle
 * applied as a luminance mask-image, clipping the illustration to that shape.
 */
.scc-cta__illus-masked {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    -webkit-mask-image: url('../svg/c40fa10cb76f7d9975348830f792f15e843e16f6.svg') !important;
    mask-image: url('../svg/c40fa10cb76f7d9975348830f792f15e843e16f6.svg') !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-mode: alpha !important;
    mask-mode: alpha !important;
}

/*
 * Illustration image (Group_68: 11e9061b…) inside the masked wrapper —
 * fills the full masked area using object-fit:fill to match SVG viewBox.
 */
.scc-cta__illus-content {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .scc-report {
        --scc-content-padding: 60px;
    }

    .scc-hero__inner {
        flex-direction: column !important;
        align-items: center !important;
    }

    .scc-hero__image {
        width: 300px !important;
        order: -1 !important;
        margin-top: 40px !important;
    }

    .scc-hero__text {
        padding-top: 40px !important;
        padding-left: 0 !important;
        text-align: center !important;
        max-width: 100% !important;
    }

    .scc-hero__buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
        margin-bottom: 40px !important;
    }

    .scc-hero__desc {
        font-size: 15px !important;
    }

    .scc-video {
        padding-top: 40px !important;
    }

    .scc-hero__title {
        font-size: 36px !important;
    }

    .scc-hero__subtitle {
        font-size: 28px !important;
    }

    .scc-challenges__cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .scc-six-points__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px !important;
    }

    .scc-learnt__hero-inner {
        flex-direction: column !important;
    }

    .scc-learnt__hero-text {
        width: 100% !important;
    }

    .scc-learnt__hero-image {
        margin-left: 0 !important;
        max-width: 600px !important;
    }

    .scc-learnt__hero-title {
        font-size: 52px !important;
    }

    .scc-blueprint__inner {
        flex-direction: column !important;
    }

    .scc-blueprint__image {
        width: 100% !important;
        max-width: 400px !important;
    }

    .scc-next__header-inner {
        flex-direction: column !important;
    }

    .scc-next__header-left {
        width: 100% !important;
    }

    .scc-next__header-right {
        padding-top: 0 !important;
    }

    .scc-sticky-card__text {
        max-width: 50% !important;
    }

    .scc-sticky-card__image {
        width: 350px !important;
    }
}

@media (max-width: 768px) {
    .scc-report {
        --scc-content-padding: 20px;
    }

    .scc-hero {
        min-height: auto !important;
    }

    .scc-hero__bg {
        height: 100% !important;
    }

    .scc-hero__title {
        font-size: 28px !important;
    }

    .scc-hero__subtitle {
        font-size: 22px !important;
    }

    .scc-hero__image {
        width: 250px !important;
    }

    .scc-logos img {
        max-width: 215px;
    }

    .scc-quote__card {
        width: 100% !important;
        padding: 30px 30px !important;
    }

    .scc-quote--left .scc-quote__card,
    .scc-quote--right .scc-quote__card {
        border-radius: 0 30px 30px 0 !important;
    }

    .scc-quote--right .scc-quote__card {
        border-radius: 30px 0 0 30px !important;
    }

    .scc-quote__mark {
        width: 30px !important;
        height: 38px !important;
    }

    .scc-quote__text {
        font-size: 20px !important;
    }

    .scc-challenges__cards {
        grid-template-columns: 1fr !important;
    }

    .scc-challenges__illus {
        display: none !important;
    }

    /* On mobile, switch balloon canvas to a normal flow stack */
    .scc-balloons {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
        padding: 40px 20px !important;
    }

    .scc-balloon {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
    }

    .scc-balloon--1 {
        width: 280px !important;
        height: auto !important;
    }

    .scc-balloon--2 {
        width: 280px !important;
        height: 250px !important;
    }

    .scc-balloon--3 {
        width: 300px !important;
        height: 265px !important;
    }

    .scc-balloon__mark {
        width: 25px !important;
        height: 32px !important;
    }

    .scc-balloon__text {
        font-size: 14px !important;
        max-width: 220px !important;
    }

    .scc-balloon--3 .scc-balloon__text {
        max-width: 230px !important;
    }

    .scc-map__illustration,
    .scc-map__touchpoints,
    .scc-results__sme-yellow,
    .scc-results__sme-pink {
        display: none !important;
    }

    .scc-map__title,
    .scc-results__title,
    .scc-infographics__title,
    .scc-challenges__title,
    .scc-next__title,
    .scc-cta__title {
        font-size: 32px !important;
    }

    .scc-learnt__hero-title {
        font-size: 40px !important;
    }

    .scc-card__title,
    .scc-challenge-card h3 {
        font-size: 28px !important;
    }

    .scc-card__desc {
        font-size: 14px !important;
        max-width: 100% !important;
    }

    .scc-sticky-scroll__spacer {
        height: auto !important;
    }

    .scc-sticky-scroll__spacer {
        margin-bottom: 16px !important;
    }

    .scc-sticky-card {
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
        overflow: hidden !important;
        border-radius: 30px !important;
    }

    .scc-sticky-card::before {
        display: none !important;
    }

    .scc-sticky-card--mint {
        background: var(--scc-color-mint) !important;
    }

    .scc-sticky-card--pink {
        background: var(--scc-color-pink-bg) !important;
    }

    .scc-sticky-card--yellow {
        background: var(--scc-color-yellow-bg) !important;
    }

    .scc-sticky-card__inner {
        flex-direction: column !important;
        padding: 30px 20px !important;
        height: auto !important;
    }

    .scc-sticky-card__text {
        position: relative !important;
        z-index: 1 !important;
        max-width: 100% !important;
        padding-top: 0 !important;
    }

    .scc-sticky-card__text p {
        font-size: 20px !important;
    }

    .scc-sticky-card__image {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 200px !important;
        margin: 20px auto 0 !important;
        z-index: 0 !important;
    }

    /* S5: stack cards vertically on mobile instead of absolute positioning */
    .scc-infographics__canvas {
        aspect-ratio: auto !important;
        max-width: 100% !important;
        padding: 40px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .scc-infographics__canvas>* {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
    }

    .scc-infographics__illustration {
        max-width: 260px !important;
        margin: 10px auto !important;
    }

    .scc-infographic-quote {
        max-width: 260px !important;
        min-height: 220px !important;
        margin: 0 auto !important;
    }

    .scc-infographic-quote__mark {
        width: 25px !important;
        height: 32px !important;
        margin-bottom: 8px !important;
    }

    .scc-infographic-quote__text {
        font-size: 14px !important;
    }

    .scc-infographics__bird {
        max-width: 260px !important;
        margin: 0 auto !important;
    }

    .scc-blueprint__image {
        width: 100% !important;
    }

    /* ── CTA SECTION MOBILE ── */
    .scc-cta {
        min-height: auto !important;
    }

    .scc-cta__bottom {
        min-height: 200px !important;
    }

    .scc-cta__illustration {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }

    .scc-cta__illus-layer {
        position: relative !important;
        inset: auto !important;
    }

    .scc-cta__illus-layer--path1084,
    .scc-cta__illus-layer--path1085 {
        display: none !important;
    }

    .scc-cta__illus-layer--group68 {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        aspect-ratio: 720 / 477 !important;
    }

    /* ── MAP POPUP MOBILE (bottom sheet) ── */
    .scc-map__popup {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
        top: auto !important;
        width: auto !important;
        max-height: 70vh !important;
        border-radius: 30px !important;
    }

    .scc-map__popup-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    /* ── MAP CONSTELLATION MOBILE ── */
    .scc-map {
        min-height: auto !important;
        padding: 0 20px !important;
    }

    .scc-map__inner {
        padding-top: 20px !important;
    }

    .scc-map__title {
        font-size: 32px !important;
    }

    .scc-map__subtitle {
        font-size: 18px !important;
    }

    /* ── S7 STICKY CARDS MOBILE ── */
    .scc-next__title {
        font-size: 32px !important;
    }

    .scc-sticky-card__text p {
        font-size: 24px !important;
    }

    /* ── BLUEPRINT QUOTE MOBILE ── */
    .scc-blueprint-quote__bubble {
        width: 260px !important;
        min-height: 230px !important;
    }

    .scc-blueprint-quote__mark {
        width: 25px !important;
        height: 32px !important;
    }

    .scc-blueprint-quote__text {
        font-size: 13px !important;
        max-width: 200px !important;
    }

    /* ── S6 LEARNT MOBILE ── */
    .scc-learnt__hero-title {
        font-size: 36px !important;
    }

    .scc-six-point p {
        font-size: 18px !important;
    }

    .scc-challenge-card h3 {
        font-size: 24px !important;
    }

    .scc-blueprint__text h2 {
        font-size: 28px !important;
    }

    /* ── NEXT QUOTES MOBILE ── */
    .scc-next-quotes .scc-quote__card {
        padding: 30px 20px !important;
    }

    .scc-next-quotes .scc-quote__text {
        font-size: 18px !important;
    }
}

@media screen and (max-width: 540px) {
    .scc-six-points__grid {
        grid-template-columns: 1fr !important;
    }
}