/* ============================================================
   Olympia Group — RESPONSIVE (all media queries live here)
   NOTE: font-size is NOT set here — homepage text uses clamp() in style.css
   (fluid desktop→mobile). Media queries handle LAYOUT only (stacking, spacing).
   Breakpoints: 1024 (tablet) · 767 (mobile) · 480 (small phone).
   ============================================================ */
/* ==========================================================================
   TABLET  (<= 1024px)
   ========================================================================== */
/* VALUES — the overlapping side-by-side cards only fit very wide screens.
   Below 1400 de-overlap: stack description over cards, cards share the row (no neg margin). */

@media (max-width: 1550px) {
    .od-hero-text {
        max-width: 700px;
    }
}
@media (max-width: 1400px) {
    #numbers .number-box {
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-width: 225px;
    }
    #values .description-box {
        justify-content: center;
        padding: 40px 60px;
        text-align: center;
    }
    #values .values_description p:first-child,
    #values .values_description p:last-child {
        text-align: center;
    }
    #values .check-dots {
        max-width: 125px !important;
        top: 30px;
        left: calc(50% - 55px) !important;
        width: 125px;
    }
    #values a.has-arrow {
        justify-content: center;
    }
    #values span.values_description {
        width: 100%;
        text-align: center;
        display: block;
        margin: auto;
    }
    #values .wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 80px 40px 100px;
    }

    #values .description-box {
        padding: 40px 60px;
    }

    #values .green-cards {
        margin-left: 0;
        gap: 16px;
    }

    #values .green-cards .card {
        min-width: 0;
        flex: 1 1 0;
    }

    .check-dots {
        left: 20px;
        max-width: 180px;
        overflow: hidden;
    }

    .check-dots svg {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 1200px) {
    .cg-imgtext-inner {
        gap: 30px;
    }
    .ostory-hero-dots {
        display: none;
    }
    .main-footer .bottom {
        padding: 0 30px;
    }
    .main-footer .top {
        padding: 60px 30px;
    }
}

@media (max-width: 1300px) {
    .pr-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .od-hero-text {
        max-width: 550px;
    }
}

@media (max-width: 1100px) {
    .cg-hero {
        padding-bottom: 0;
    }
}

@media (max-width: 1024px) {
    .ostory-hero::after {
        z-index: 1;
    }
    .rp-row {
        grid-template-columns: 500px 1fr;
    }
    .rp-row.is-banded {
        grid-template-columns: 1fr 500px;
    }
    .ostory-hero-text {
        max-width: 100%;
        margin-left: 0;
    }
    .ostory-hero-desc {
        max-width: 100%;
    }
    .ostory-hero-video {
        position: relative;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .ostory-hero-wrap {
        padding: 20px;
        flex-direction: column;
        padding-bottom: 150px;
    }
    .ostory-article-wrap {
        position: relative;
        padding-left: 60px;
        padding-right: 60px;
    }
    .ostory-article-wrap:before {
        left: 10px;
    }
    .ostory-article-wrap:after {
        left: 20px;
    }
    .ostory-dashline {
        left: 30px;
    }
    .main-footer .top {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px 0;
    }
    .main-footer .bottom {
        grid-template-columns: repeat(2, 1fr);
    }
    .ot-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .main-footer .bottom .col:last-child {
        border-left: unset;
    }
    .footprintSwiper {
        padding: 20px 0;
        overflow: hidden;
    }
    .hero-content {
        gap: 45px;
    }
    .home-hero h1 {
        font: normal normal normal 60px / 70px Alfabet;
    }
    button.submenu-back {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .header-content {
        padding: 24px 30px;
    }

    .home-hero .description {
        width: 80%;
    }

    #numbers .wrappper {
        padding: 0 30px 90px;
    }

    #values .description-box {
        padding: 34px 40px;
    }

    /* ===== HEADER MENU → mobile nav (tap; 2nd level slides OVER the 1st) ===== */
    .main-menu.active {
        min-width: calc(100% - 50px);
        width: auto;
        height: calc(100% - 25px);
        padding: 25px 25px 25px;
        gap: 0;
        /* overflow: hidden; */
        /* the fixed submenu still slides over the viewport */
    }

    .close-btn {
        margin-right: 0;
    }

    .main-menu ul.header-menu {
        gap: 26px;
        margin-top: 15px;
        flex: 1;
        justify-content: center;
    }

    .main-menu .header-menu a {
        font-size: 30px;
        line-height: 1.2;
    }

    /* submenu = full navy panel that slides in from the right, over level 1 */
    .main-menu li.menu-item-has-children:hover > .sub-menu,
    .main-menu .sub-menu {
        position: fixed;
        inset: 0 0 0 auto;
        width: calc(100% - 50px);
        height: 100%;
        left: auto;
        background: var(--secondary);
        opacity: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 115px 24px 40px;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        z-index: 12;
        pointer-events: none;
        justify-content: flex-start;
    }

    .main-menu li.menu-item-has-children.submenu-open > .sub-menu,
    .main-menu li.menu-item-has-children.submenu-open:hover > .sub-menu {
        transform: translateX(0);
        pointer-events: auto;
    }

    .submenu-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        align-self: start;
        margin-bottom: 50px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        color: #fff;
        font-family: "aktiv-grotesk-extended", sans-serif;
        font-size: 10px;
        letter-spacing: 2px;
        flex-direction: row-reverse;
    }
    button.submenu-back svg {
        width: 30px;
        height: 55px;
    }

    .main-menu .sub-menu li.parent-title {
        text-align: left;
    }

    .main-menu .sub-menu li.menu-item {
        width: 100%;
    }

    .main-menu .sub-menu li.menu-item a {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        margin-top: 10px;
        padding-left: 16px;
    }

    .main-menu .sub-menu li.menu-item:first-child a {
        margin-top: 0;
    }

    .main-menu .sub-menu li.parent-img {
        display: none;
    }

    /* Follow Us row at the very bottom */
    .main-menu .social {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 14px;
        margin-top: 20px;
    }

    .social-text {
        line-height: 1;
    }
}

@media (max-width: 833px) {
    .os-values-pills {
        gap: 3px 30px;
    }
}

@media (max-width: 800px) {
    .cg-imgtext-inner.reverse {
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        gap: 80px;
        align-items: center;
        align-content: center;
    }
    .cg-imgtext-inner {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 80px;
        align-items: center;
        align-content: center;
    }
    .cg-imgtext.band .cg-imgtext-band {
        margin: 40px auto;
        padding: 40px 0;
    }
    .corporate-governance .cg-subcategory {
        padding: 40px 0 90px;
    }
    .cg-committees {
        padding: 0 0 40px 0;
    }
    .cg-composition {
        padding: 40px 0;
    }
}

/* ==========================================================================
   MOBILE  (<= 787px)
   ========================================================================== */
@media (max-width: 787px) {
    .number-box-title {
        text-align: left;
        font: normal normal bold 50px/70px Alfabet;
        letter-spacing: -1.5px;
        color: #267a5e;
    }
    #stories .story:nth-child(1) .thumbnail,
    #stories .story .thumbnail {
        max-width: 100%;
    }
    .number-box-subtitle {
        text-align: left;
        font:
            normal normal 600 12px/20px "aktiv-grotesk-extended",
            sans-serif;
        letter-spacing: 0px;
        color: #04253e;
    }

    section.cg-philosophy,
    section.cg-principles {
        padding: 40px 16px;
    }

    .cg-principles-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .pr-card-tag {
        position: absolute;
        left: 10px;
        top: 200px;
    }

    .single-post .ps-related-wrap {
        padding: 0 20px;
    }

    .single-post article.ps-article {
        padding-top: 10rem;
    }

    section.ps-hero.cg-hero {
        padding-bottom: 5rem;
    }

    .single-post .ps-hero::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 25px;
    }

    .pf-cats-grid {
        padding: 0;
        display: grid;
        grid-template-columns: 100%;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 12px;
        color: var(--secondary);
        width: 40px;
        height: 40px;
        background-color: rgba(4, 37, 62, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dialoguesSwiper .swiper-button-next,
    .dialoguesSwiper .swiper-button-prev,
    .swiper-navigation .swiper-button-next,
    .swiper-navigation .swiper-button-prev {
        width: 35px !important;
        height: 35px !important;
        background-color: rgba(4, 37, 62, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    .olympia-dialogues-page section.od-hero {
        flex-direction: column-reverse;
        display: flex;
    }

    .olympia-dialogues-page .od-hero-text {
        max-width: 100%;
        padding: 0 16px;
    }

    .olympia-dialogues-page video.od-hero-video-el {
        display: block;
        margin: 0;
        position: absolute;
        right: -86px;
    }

    .swiper-navigation .swiper-pagination {
        justify-content: center;
    }

    .od-ideas-head {
        flex-wrap: wrap;
    }

    .olympia-dialogues-page .swiper-navigation {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 25px;
        width: 100%;
        margin: 20px auto;
        justify-content: center;
    }

    section.od-speakers {
        flex-direction: column-reverse;
        display: flex;
    }

    .header-dialogues .od-logo img {
        max-width: 140px;
    }

    .od-speakers-carousel .swiper-slide {
        width: auto;
    }

    .olympia-dialogues-page .og-wrap.og-wrap--1494.od-intro-grid {
        padding: 0 16px;
    }

    .od-voices {
        padding: 60px 0;
    }
    .od-ideas-fade {
        width: 0 !important;
    }
    .od-ideas-band {
        max-width: 100%;
        margin: 0 auto;
        background: #e5efec;
        border-radius: 20px;
        padding: 60px 16px 55px 16px;
        position: relative;
        overflow: hidden;
    }

    .od-ideas {
        padding: 30px 0 61px;
        overflow: hidden;
        padding-left: 0;
    }

    .od-ideas-band {
        margin: 0 0px;
    }

    .olympia-dialogues-page section.od-body {
        padding: 30px 16px;
    }

    .olympia-dialogues-page .od-speaker {
        position: relative;
        width: 280px;
        height: 395px;
    }

    .od-hero-cut {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100px;
    }

    .od-intro-l-title {
        text-align: left;
        font: normal normal bold 24px/35px Alfabet;
        letter-spacing: -0.72px;
        color: #006547;
    }

    .od-hero-para {
        text-align: left;
        font:
            normal normal normal 13px/25px "aktiv-grotesk-extended",
            "Inter",
            system-ui,
            sans-serif;
        letter-spacing: 0px;
        color: #58595b;
    }

    .header-dialogues .header-content,
    .header-dialogues.scrolled .header-content {
        background: transparent;
        padding: 10px 10px;
        align-items: flex-start;
    }

    .pf-hero-figure {
        flex: 0 0 auto;
        width: 100%;
        height: 390px;
        margin-top: 3px;
        z-index: 0;
    }

    .pf-companies-grid {
        padding: 0 16px;
    }

    .pf-eco-title {
        text-align: center;
        font: normal normal normal 28px/35px Alfabet;
        letter-spacing: -0.84px;
        color: #04253e;
    }

    .pf-eco-desc {
        font-family: "aktiv-grotesk-extended", sans-serif;
        font-size: 14px;
        line-height: 25px;
        color: #58595b;
        margin: 34px 0 0;
        max-width: 100%;
        padding: 0 20px;
    }

    .pf-eco-intro {
        flex: 0 0 auto;
        max-width: 100%;
        padding-top: 30px;
        text-align: center;
    }

    .pf-company {
        position: relative;
        display: block;
        height: 460px;
    }

    .pf-companies-title {
        text-align: center;
        font: normal normal 500 28px/70px Alfabet;
        letter-spacing: -0.84px;
        color: #04253e;
    }

    .pf-hero-desc p {
        padding-bottom: 20px;
        text-align: left;
        font:
            normal normal normal 13px/25px "aktiv-grotesk-extended",
            sans-serif;
        letter-spacing: 0px;
        color: #ffffff;
    }

    .pf-hero-subtext {
        text-align: left;
        font:
            normal normal normal 16px/30px "aktiv-grotesk-extended",
            sans-serif;
        letter-spacing: 0px;
        color: #ffffff;
        margin: 16px 0 0;
    }

    .pf-hero-title {
        text-align: left;
        font: normal normal normal 38px/50px Alfabet;
        letter-spacing: -1.14px;
        color: #ffffff;
        color: #fff;
        margin: 0;
    }

    .pf-hero-text {
        margin-left: 10px;
        max-width: 100%;
        flex: 0 0 auto;
    }

    .pf-cat-hero .pf-hero-inner {
        flex-wrap: wrap;
        padding-top: 76px;
    }

    .pf-companies-grid {
        display: grid;
        grid-template-columns: 100%;
    }

    .pf-eco-inner {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 50px;
        flex-wrap: wrap;
    }

    .ot-band-card {
        position: relative;
        top: 0;
        transform: none;
        left: 0;
        width: auto;
        min-height: auto;
        box-sizing: border-box;
        background: #006547;
        border: 3px solid #fff;
        border-radius: 20px;
        box-shadow: 0 15px 30px rgba(4, 37, 62, 0.2);
        padding: 30px 20px;
        display: flex;
        align-items: flex-start;
    }

    .ot-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 101, 71, 0.1);
        border-radius: 20px;
        transition: background 0.2s;
    }

    .ot-section-title {
        text-align: left;
        font: normal normal 500 28px/45px Alfabet;
        letter-spacing: -0.84px;
        color: #04253e;
    }

    .page-id-387 .cg-hero::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 28%;
    }

    .cg-hero-label {
        display: block;
        text-align: left;
        font: normal normal 600 18px/80px Alfabet;
        letter-spacing: -0.54px;
        color: #267a5e;
    }

    .ot-section {
        padding: 40px 20px;
        position: relative;
    }

    .ot-band-card p {
        max-width: 286px;
        text-align: left;
        font: normal normal normal 24px/34px Alfabet;
        letter-spacing: -0.72px;
        color: #ffffff;
    }

    .ot-band-box {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        background: var(--secondary);
        border-radius: 0;
        padding: 30px;
    }

    .ornament {
        pointer-events: none;
    }

    .cg-hero {
        padding-bottom: 20px;
    }

    .cg-hero-figure img {
        width: 100%;
        height: 340px;
    }

    /* .ot-grid {
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(1, auto);
        column-gap: 20px;
    } */

    .ot-section.ot-board .ot-wrap {
        padding: 0;
    }

    .cg-hero-top h1 {
        text-align: left;
        font: normal normal normal 32px/50px Alfabet;
        letter-spacing: -0.96px;
        color: #ffffff;
        margin: 0;
        color: #fff;
        margin-bottom: 40px;
    }

    .ostory-hero-text {
        max-width: 100%;
        margin-left: 0;
    }

    /* .cg-hero .cg-wrap {
        padding: 20px;
    } */

    header.scrolled .header-content {
        padding: 20px 20px;
    }

    .os-istrategy-box {
        max-width: 100%;
        margin: 0 auto;
        background: #e5efec;
        border-radius: 20px;
        padding: 75px 50px;
        box-sizing: border-box;
    }

    .morelinks {
        flex-direction: column;
    }

    .cg-hero-top {
        gap: 30px;
        grid-template-columns: 1fr;
    }

    .oi-stats {
        grid-template-columns: 1fr;
    }

    .oi-track-head {
        gap: 20px;
        flex-direction: column;
    }

    .oi-track-band > svg {
        display: none;
    }

    .hero-video {
        z-index: 9;
    }

    section.home-hero.hero .context {
        z-index: 4;
    }

    #numbers .line:after {
        max-width: 100px !important;
    }

    footer {
        margin: 0 0px;
    }

    /* ---------- HEADER ---------- */
    .header-content {
        padding: 16px;
    }

    .logo img {
        max-width: 190px;
        height: auto;
    }

    header .widgets {
        align-items: center;
    }

    form.search-form .search-field {
        display: none;
    }

    form.search-form {
        margin-right: 14px;
    }

    .burger-menu {
        padding-left: 16px;
    }

    /* ---------- HERO ---------- */
    /* .home-hero.hero {
        display: block;
        min-height: auto;
        background: var(--secondary);
    } */

    /* .hero-bg {
        clip-path: none;
    } */

    section#numbers {
        padding-top: 3rem;
    }

    /*     .hero-lower {
        display: none;
    } */
    /* .hero-lower {
        left: 0;
        z-index: 4;
        background: #ffffff;
        clip-path: polygon(100% 25%, 0% 100%, 100% 100%);
        display: block !important;
        width: 100%;
        height: 200px;
        position: absolute;
        bottom: -1px !important;
        top: unset;
    } */

    .hero-content {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 40px 0px 0;
    }

    .wrapper-portfolio {
        overflow-x: hidden;
    }

    .home-hero .description {
        padding-left: 16px;
    }

    .ecosystem-header {
        align-items: CENTER;
        text-align: CENTER;
    }

    .ecosystem-header h3 {
        text-align: center !important;
    }

    .ecosystem-desc-col p {
        text-align: center !important;
    }

    .ecosystem-desc-col .has-arrow {
        justify-content: center;
    }

    .home-hero h1 {
        padding: 0 16px;
        text-align: left;
        font: normal normal normal 48px/60px Alfabet;
        letter-spacing: -1.44px;
        color: #ffffff;
        margin: 0 0 18px;
        max-width: 100%;
    }

    .home-hero .description {
        width: 100%;
        margin-bottom: 28px;
    }

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

    .hero-video video {
        max-width: 300px;
        width: 100%;
        height: 360px;
        float: none;
        margin: 0 0 0 auto;
        display: block;
    }

    .hero-dots {
        left: 16px;
        /* bottom: auto;
        top: 60%;
        width: 60px; */
    }

    /* ---------- NUMBERS ---------- */
    #numbers .wrappper {
        padding: 0 16px 60px;
    }

    #numbers .text-btn {
        flex-direction: column;
        gap: 24px;
        margin: 24px 0 40px;
    }

    #numbers .description {
        max-width: 100%;
    }

    #numbers .btn {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    #numbers .numbers-that-matter {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 10px;
    }

    #numbers .number-box {
        min-width: 0;
    }

    #numbers .line:after {
        max-width: 100px !important;
    }

    /* ---------- VALUES ---------- */
    #values .wrapper {
        padding: 60px 16px 0px;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /*     .check-dots {
        left: 16px;
        width: 150px;
        overflow: hidden;
    } */
    .check-dots {
        top: 30px;
        left: calc(50% - 55px);
        width: 110px;
        overflow: hidden;
    }

    .check-dots svg {
        max-width: 100%;
        height: auto;
    }

    #values .values_title {
        color: white;
        text-align: center;
        font: normal normal normal 48px/70px Alfabet;
        letter-spacing: -1.44px;
    }

    #values .values_subtitle {
        text-align: center;
    }

    #values .description-box {
        text-align: center;
        padding: 34px 24px;
        border-radius: 20px;
    }

    section#values {
        padding: 0rem 0rem;
    }

    #values .description-box {
        border-radius: 0;
        padding: 60px 16px 180px 16px;
    }

    #values .green-cards {
        max-width: Calc(100% - 30px);
        transform: translateY(-155px);
        margin: auto;
    }

    section#values .wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    #values a.has-arrow {
        margin: auto;
    }

    #values .values_description p {
        margin: 24px 0 30px;
    }

    #values .green-cards {
        flex-direction: column;
        gap: 16px;
        margin: 0 16px;
    }

    #values .green-cards .card {
        min-width: 0;
        min-height: 360px;
        border-width: 5px;
    }

    #values .green-cards .card .background-image {
        min-width: 0;
        min-height: 0;
        height: 100%;
    }

    #stories .top-shape {
        height: 75px;
        width: 100%;
        background-color: rgba(0, 101, 71, 0.1);
        clip-path: polygon(0 0, 50% 75%, 100% 0, 100% 100%, 0 100%);
    }

    #stories .waves {
        position: absolute;
        right: 0;
        top: -80px;
        z-index: 0;
        width: 104px;
        height: 48px;
    }

    #stories .inner > .title {
        display: block;
        text-align: center;
        font: normal normal normal 48px/70px Alfabet;
        letter-spacing: -1.44px;
        color: #04253e;
    }

    a.has-arrow.dialogues-btn {
        margin: auto;
    }

    .dialogues-body {
        text-align: center;
    }

    .dialogues-body .col-left p {
        text-align: center;
        font: normal normal 600 13px/25px "aktiv-grotesk-extended";
        letter-spacing: 0px;
        color: #006547;
    }

    #stories .description {
        text-align: CENTER;
        padding-bottom: 30px;
        display: block;
    }

    #stories .subtitle {
        text-align: center;
        display: block;
    }

    span.portfolio-title {
        text-align: left;
        font: normal normal 600 24px/70px Alfabet;
        letter-spacing: 0px;
        color: #04253e;
        display: block;
    }

    #stories .dection-bg {
        display: none;
    }

    .wrapper-portfolio {
        padding-bottom: 75px;
    }

    #stories .wrapper-last .simple-grid .grid-item {
        width: 100%;
        max-width: 437px;
        margin: auto;
    }

    #stories .wrapper-last .simple-grid {
        position: relative;
        max-width: calc(100% - 20px);
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 90px 10px 80px 10px;
        z-index: 2;
    }

    footer .ornament-top-right {
        display: none;
    }

    span.get-in-touch-desc p {
        width: 100%;
        display: block;
        margin: 20px auto;
        padding: 0;
    }

    .main-footer .bottom a.has-arrow {
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ---------- ECOSYSTEM / FOOTPRINT ---------- (swiper handled in main.js) */
    #ecosystem .wrapper {
        padding: 0 16px;
    }

    .ecosystem-header {
        flex-direction: column;
        gap: 20px;
    }

    /* ---------- DIALOGUES ---------- */
    #dialogues {
        padding: 50px 16px 0;
    }

    #dialogues > svg {
        display: none;
    }

    .dialogues-header {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 30px;
    }

    .dialogues-logo {
        max-width: 180px;
        margin: 0 auto;
    }

    .dialogue-center-info {
        max-width: 100%;
    }

    .dialogues-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .dialogue-video-block {
        border-radius: 20px;
        margin-bottom: 40px;
    }

    /* ---------- STORIES ---------- */
    #stories .wrapper-stories .inner,
    #stories .wrapper-portfolio .inner {
        padding: 0 16px;
        display: block;
        /* flex+min-content let the swiper push past the viewport */
    }

    #stories .stories {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .portfolioHighlightsSwiper {
        overflow: hidden;
        width: 100%;
    }

    #stories .story .thumbnail img {
        width: 100%;
        /* height: auto; */
    }

    /* ---------- CLOSING CARDS (simple-grid → stack) ---------- */
    .wrapper-last .simple-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 16px;
    }

    /* ---------- FOOTER ---------- */
    .main-footer {
        border-radius: 0px;
    }

    .main-footer .wrapper {
        padding: 0;
    }

    /* menu → one accordion per section (.footer-acc); JS toggles .is-open */
    .main-footer .top {
        display: block;
        padding: 8px 16px 16px;
        border-bottom: none;
    }

    .main-footer .top .col {
        display: block;
        max-width: none;
        gap: 0;
    }

    .main-footer .top .footer-acc {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .main-footer .top .footer-acc > .title,
    .main-footer .top .footer-acc:not(:first-child) > .title {
        position: relative;
        display: block;
        margin: 0;
        padding: 38px 34px 18px 0;
        cursor: pointer;
    }

    .main-footer .top .footer-acc > .title::after {
        content: "+";
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 22px;
        line-height: 1;
        color: #fff;
    }

    .main-footer .top .footer-acc.is-open > .title::after {
        content: "\2013";
    }

    .main-footer .top .footer-acc-body {
        display: none;
        padding: 0 0 18px;
    }

    .main-footer .top .footer-acc.is-open .footer-acc-body {
        display: block;
    }

    .main-footer .top .footer-acc .menu-items {
        margin-top: 6px;
    }

    /* Follow Us — always open, no toggle */
    .main-footer .top .footer-acc--static > .title {
        cursor: default;
        padding-right: 0;
    }

    .main-footer .top .footer-acc--static > .title::after {
        content: none;
    }

    .main-footer .top .footer-acc--static .footer-acc-body {
        display: block;
    }

    .main-footer .top .footer-acc--static .social-footer {
        margin-top: 12px;
    }

    /* central offices → dropdown pills (.footer-office) */
    .main-footer .bottom {
        display: block;
        padding: 24px 16px 8px;
    }

    .main-footer .bottom .col {
        display: block;
        padding: 0;
        width: 100%;
    }

    #ceof {
        display: block;
        margin-bottom: 14px;
    }

    .footer-office {
        display: block;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .footer-office > .ceof-title {
        margin-bottom: 6px;
        background: #04253e 0% 0% no-repeat padding-box;
        box-shadow: 0px 3px 10px #00000026;
        border: 1px solid #ffffff1a;
        border-radius: 10px;
        position: relative;
        display: block;
        padding: 18px 40px 18px 16px;
        cursor: pointer;
    }

    .footer-office > .ceof-title::after {
        content: "";
        position: absolute;
        right: 18px;
        top: 42%;
        width: 8px;
        height: 8px;
        border-right: 1.5px solid #fff;
        border-bottom: 1.5px solid #fff;
        transform: translateY(-50%) rotate(45deg);
        transition: transform 0.2s;
    }

    .footer-office.is-open > .ceof-title::after {
        transform: translateY(-50%) rotate(-135deg);
    }

    .footer-office-body {
        display: none !important;
        padding: 0 16px 16px;
    }

    .footer-office.is-open .footer-office-body {
        display: block !important;
    }

    .ceof-address {
        display: block;
    }

    /* get in touch → centered, full width, no left border */
    .main-footer .bottom .col:last-child {
        align-items: center;
        border-left: none;
        text-align: center;
        padding: 20px 0 40px;
    }

    /* credits */
    .copyrights {
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 20px 16px;
    }
    .copyrights ul {
        order: 1;
        padding-bottom: 30px;
    }
    .copyrights .rights {
        order: 2;
    }
    .copyrights .dev {
        order: 3;
    }

    .copyrights ul {
        justify-content: center;
    }

    .rights,
    footer .dev,
    footer .dev a {
        text-align: center;
    }
}

@media (max-width: 676px) {
    .play-label {
        width: 70px;
        height: 70px;
        font-size: 25px;
    }
    .pr-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .press-releases-page .pr-wrap {
        padding: 0 16px;
    }
    .press-releases-page .pr-wrap .pr-content {
        padding: 0;
    }
    .omap-map {
        position: relative;
        width: 100%;
        aspect-ratio: 1009.673 / 520;
        overflow: hidden;
        padding-bottom: 400px;
    }
}

@media (max-width: 414px) {
    .hero-bg {
        clip-path: polygon(0 0, 100% 0, 100% 89%, 0 80%);
    }
    .hero-lower {
        clip-path: polygon(450% 0, 0 0, 0 98%);
    }
    .hero-dots {
        bottom: 10%;
    }
    #numbers .btn {
        text-align: center;
    }
    .play-label {
        font-size: 23px;
        width: 60px;
        height: 60px;
    }
    .main-menu ul.header-menu {
        gap: 50px;
    }
    #stories .stories .story:first-child {
        height: 400px;
    }
    #stories .stories {
        gap: 10px;
    }
    .has-arrow svg {
        padding: 16px;
    }
    #stories .story:is(:nth-child(2), :nth-child(3)) .details {
        border-bottom: 1px solid rgba(4, 37, 62, 0.3);
        padding-bottom: 20px;
    }
    #stories .story a {
        margin: 0 10px;
    }
    #stories .story .title,
    #stories .story .labels {
        margin: unset;
    }
    span.portfolio-title {
        font: normal normal 600 24px / 35px Alfabet;
    }
    .portfolio-title {
        margin-bottom: 20px;
    }
    .wrapper-portfolio .porfolio {
        padding: 20px;
        min-height: 220px;
    }
    .wrapper-portfolio .porfolio ul {
        padding-bottom: 15px;
    }
    .main-footer .bottom .col:nth-child(1) {
        padding-top: 0;
    }
    .main-footer .bottom .col:last-child {
        padding: 60px 0 40px;
    }
    .cg-hero .cg-wrap {
        padding-top: 0;
    }
    .cg-hero-label {
        font: normal normal 600 18px / 25px Alfabet;
        margin-bottom: 20px;
    }
    .og-hero__ornament,
    .cg-hero-ornament {
        top: 400px;
    }
    .corporate-governance .cg-label,
    .os-is-lead,
    .ostory-hero-label {
        font-size: 18px;
    }
    .cg-philosophy .cg-lead,
    .cg-bod-lead,
    .cg-committees-intro {
        font-size: 20px;
    }
    section.cg-philosophy,
    section.cg-principles {
        padding: 40px 0px;
    }
    .cg-bod-box {
        padding: 40px 25px;
        color: #fff;
    }
    .cg-bod-title {
        font-size: 28px;
    }
    .cg-role-cols {
        gap: 30px;
    }
    .cg-composition {
        padding: 30px 0;
    }
    .corporate-governance .cg-label {
        margin: 0 0 18px;
    }
    .corporate-governance .cg-h2 {
        margin: 0 0 30px;
    }
    .cg-committee-member .cg-member-photo img {
        margin-bottom: 0;
    }
    .cg-wrap.cg-wrap-wide {
        padding: 0 16px;
    }
    .os-values-pills {
        gap: 3px;
    }
    .os-values {
        padding: 40px 16px;
    }
    .os-culture {
        padding: 0 16px;
    }
    .os-is-title {
        font: normal normal 600 24px / 24px "Alfabet";
    }
    .ostory-article-wrap:after {
        left: 19px;
        top: 27px;
        width: 4px;
        height: 4px;
    }
    .ostory-article-wrap:before {
        left: 12px;
        top: 20px;
        width: 16px;
        height: 16px;
    }
    .ostory-article-wrap {
        padding-left: 40px;
    }
    .ostory-dashline {
        left: 22px;
    }
    .ostory-tl-dot {
        left: 6px;
    }
    .ot-section-sub {
        line-height: 25px;
    }
    .ot-section {
        padding: 40px 16px;
    }
    .ot-band-section {
        padding: 0;
    }
    section.ot-band-section .ornament,
    .pf-eco-ornament {
        display: none;
    }
    .cg-subcategory .cg-wrap {
        padding-top: 0;
    }
    .pf-footprint {
        padding: 30px 0;
    }
    .omap-inner {
        padding-top: 0;
    }
    .omap-sidebar-label {
        text-align: center;
    }
    .dots-top-left,
    .dots-top-right,
    .dots-bottom-right,
    .dots-bottom-left {
        display: none;
    }
    .pf-company-excerpt {
        margin-top: unset;
    }
    .pf-company .has-arrow {
        margin-top: 30px;
    }
    .pf-ecosystem {
        position: relative;
        padding: 0 0 50px;
    }
    .company-back {
        max-width: 167px;
        text-align: right;
    }
    .company-brand {
        padding-left: 16px;
    }
    .company-brand > a {
        display: none;
    }
    .company-highlights {
        padding: 40px 0;
    }
    .oi-stat {
        min-height: 176px;
    }
    .oi-stat-icon {
        position: absolute;
        right: 25px;
        bottom: unset;
        top: 25px;
    }
    .oi-invest-band > svg {
        top: 36px;
        position: absolute;
        left: -14px;
        height: 60px;
    }
    .oi-invest-text {
        position: absolute;
        left: 60px;
        top: 30px;
    }
    .oi-invest-desc {
        font-size: 13px;
        line-height: 25px;
    }
    .op-lead {
        font-size: 17px;
        line-height: 30px;
    }
    section.op-intro {
        padding-left: 0;
        padding-right: 0;
    }
    .op-intro {
        padding: 70px 0 10px;
    }
    .op-growth .cg-wrap.cg-wrap-wide,
    .op-stats-cards,
    .op-numbers .cg-wrap.cg-wrap-wide,
    .op-join .cg-wrap.cg-wrap-wide {
        padding: 0;
    }
    .op-growth-band,
    .op-culture-band {
        border-radius: unset;
    }
    .od-speakers {
        padding: 30px 0 0;
    }
    .od-voice-name {
        font-size: 14px;
    }
    .od-voice-theme-text {
        font-size: 13px;
        margin: 0;
    }
    .od-voice-role {
        font-size: 10px;
        margin: 5px 0 0;
    }
    .od-voice-theme {
        margin: 10px 0 0;
    }
    .od-voices-grid {
        display: grid;
        column-gap: 10px;
        row-gap: 25px;
    }
    .dialogue-single .ds-hero-inner {
        gap: 10px;
    }
    .pr-results-title {
        margin: 0 0 20px;
    }
    .pr-layout {
        gap: 40px;
    }
    section.ps-hero.cg-hero {
        padding-bottom: 14rem;
    }
    .ps-media {
        margin-top: -22rem;
    }
    .ps-tag {
        margin-top: 20px;
    }
    .ps-title {
        margin: 25px 0 0;
        font-size: 22px;
        line-height: 35px;
    }
    .ps-content {
        margin-top: 30px;
    }
    .ps-content {
        font-size: 13px;
        line-height: 25px;
    }
    .ps-related .pr-results-title {
        margin-bottom: 25px;
    }
    .pr-results-title {
        font: normal normal 500 20px / 55px Alfabet;
    }
    .ps-article {
        padding: 0 20px 50px;
    }
    .mr-downloads {
        padding: 0 0 30px;
    }
    section.pr-hero.cg-hero {
        height: 370px;
    }
    section.pr-hero.cg-hero .cg-wrap.cg-wrap-wide {
        margin-top: 60px;
    }
    .ct-offices-title,
    .ct-offices-sub,
    .og-sec-title--small,
    .ct-form-desc {
        text-align: center;
    }
    .ct-office {
        align-items: center;
    }
    .ct-office-pill {
        align-self: center;
    }
    .ct-office {
        padding: 30px;
    }
    .ct-offices-grid {
        gap: 10px;
    }
    .ct-offices {
        padding: 60px 0 40px;
    }
    .ct-form {
        padding: 40px 0 110px;
    }
    .contact-page .accept-submit p {
        align-items: center;
    }
    .gp-content h2 {
        margin: 25px 0 14px;
    }
    .dialogue-center-info span.intro-text {
        font-size: 20px;
    }
    .cg-bod .cg-wrap {
        margin: 0;
        padding: 0;
        max-width: 100% !important;
    }
    .cg-board-band {
        padding: 200px 0 45px;
    }
    .cg-board-flower {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 186px;
        height: auto;
        opacity: 0.7;
        pointer-events: none;
        z-index: 0;
    }
    .cg-composition .cg-wrap {
        margin: 0;
        max-width: 100% !important;
    }
    .corporate-governance .cg-h2 {
        font-size: 20px;
    }
    .cg-imgtext.reverse.band .cg-imgtext-band .cg-wrap,
    .cg-imgtext .cg-imgtext-band .cg-wrap {
        padding: 0;
    }
    .os-values .cg-wrap {
        padding: 0;
    }
    .os-istrategy-box {
        border-radius: 0;
        margin-bottom: 60px;
    }
    .ot-section.ot-board .ot-wrap {
        padding: 0;
    }
    .ot-band-section .ot-wrap.ot-band {
        background: linear-gradient(
            180deg,
            rgba(4, 37, 62, 1) 88%,
            rgba(255, 255, 255, 0) 88%,
            rgba(255, 255, 255, 0) 100%
        );
        padding: 0 0 20px 0;
    }
    .ot-band-section .ot-wrap.ot-band .ot-band-card {
        margin: 0 16px;
    }
    .ot-band-card svg {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        max-width: 137px;
    }
    .ot-section.ot-gm .ot-wrap {
        padding: 0;
    }
    .pf-cats-title {
        font-size: 20px;
    }
    .pf-cats-intro-desc p {
        font-size: 13px;
    }
    .pf-cats-intro,
    .pf-companies-grid,
    .company-intro {
        padding: 0 !important;
    }
    h2.company-highlights-title {
        padding-left: 0;
    }
    .pf-companies {
        padding: 50px 0 60px;
    }
    .cg-hero-top {
        gap: 0;
        grid-template-columns: 1fr;
    }
    .hop-heading {
        font-size: 25px;
    }
    .hop-content {
        padding: 40px 20px;
    }
    .rp-approach {
        padding: 60px 0 0;
    }
    .rp-ce-band {
        padding: 40px 16px;
        border-radius: 0;
    }
    .rp-ce {
        padding: 40px 0 20px 0;
    }
    .rp-so {
        padding: 20px 0 40px;
    }
    .rp-so .cg-wrap,
    .rp-rows .cg-wrap,
    .op-numbers {
        padding: 0;
    }
    .rp-row.is-banded {
        border-radius: 0;
    }
    .op-stats-cards {
        padding: 0 16px;
    }
    .od-intro {
        padding: 40px 0;
    }
    .od-ideas {
        padding: 30px 0px 0;
        overflow: hidden;
    }
    .od-ideas-band {
        padding: 40px 16px;
    }
    .od-voices {
        padding: 30px 0 60px 0;
    }
    .ds-hero-photo {
        margin-top: -15px;
    }
    .ds-article {
        padding: 40px 0 60px;
    }
    .ds-hero-text {
        padding: 30px 16px 40px;
    }
    .ps-article .ps-article-wrap {
        padding: 0;
    }
    .mr-group .mr-cards {
        padding: 0;
    }
    .mr-group .mr-group-title {
        padding-left: 0;
    }
    .mr-card {
        padding: 15px;
    }
    .mr-boxes .og-wrap {
        padding: 0;
    }
    .ct-offices {
        padding: 40px 0;
    }
    .ct-offices .og-wrap,
    .ct-form .og-wrap {
        padding-left: 0;
        padding-right: 0;
    }
    .search-pages {
        display: grid;
        grid-template-columns: 1fr;
    }
    .search-page-card {
        width: 100%;
    }
    .ostory-hero::after {
        height: 50px !important;
    }
    .ostory-hero-wrap {
        padding-bottom: 50px;
    }
    .ostory-article {
        padding: 60px 0 0 0;
    }
}

/* ===== Our People — internship full-screen modal ===== */
@media (max-width: 800px) {
    .op-modal-dialog {
        inset: 12px;
        border-radius: 20px;
    }
    .op-modal-close {
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
    }
}

/* ===== Olympia Dialogues — IDEAS v2 video grid ===== */
@media (max-width: 800px) {
    .od-ideas-v2-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .od-ideas-v2-band {
        padding: 30px;
    }
}