:root {
    --txt-main: #121212;
    --txt-secondary: #9A948A;
    --bg-main: #F7F5F1;
    --bg-secondary: #D8CDBF;
    --action: #2E4A43;
        /* Menu width variables (use viewport units for consistent centering) */
        --menu-width: 72vw;
        --menu-width-tablet: 90vw;
        --menu-width-mobile: 95vw;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    background-color: var(--bg-main);
    color: var(--txt-main);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    max-width: 100%;
}

/* MENU FIXE */

.menu {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
        width: var(--menu-width);
    background-color: rgba(216,205,191,0.85);
    padding: 18px 35px;
    border-radius: 40px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2000;
}

.logo {
    height: 60px;
    object-fit: contain;
}

.menu-links ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

.menu-links a {
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: var(--txt-main);
    font-size: 15px;
    transition: 0.3s;
}

.menu-links a:hover {
    color: var(--action);
}

/* BOUTON */

.btn-action {
    background-color: var(--action);
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: 0.3s;
    white-space: nowrap;
}

.btn-action:hover {
    background-color: #1f332e;
}

/* HERO */

.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    background-image: url("../images/background/PHOTO 1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    padding-top: 320px;
    padding-bottom: 40px;

    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(247, 245, 241, 0.55);
}

.hero-container {
    position: relative;
    width: min(94%, 1440px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (min-width: 1300px) {
    .hero-container { width: min(94%, 1440px); }
}

.hero-content {
    color: var(--bg-main);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
}

/* Homepage: smaller gap and muted headings color */
.home .hero-content {
    gap: 8px;
    padding-top: 80px; /* réduit l'espacement pour la page d'accueil */
}

/* Apply similar vertical offset to other page headers so titles sit lower */
.services-header,
.projects-header,
.contact-header {
    padding-top: 260px;
}

.home .hero-content h1 {
    color: #121212;
    line-height: 1.05;
}

.home .hero-content p {
    color: #121212;
}

.hero-content h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 64px;
}

.hero-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 42px;
}

.hero-content p {
    font-size: 15px;
    line-height: 1.6;
    max-width: 640px;
}

@media (min-width: 1000px) {
    .hero-content p { white-space: nowrap; max-width: none; }
}

/* IMAGES DANS LE HERO */
.hero-images {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(16px, 3vw, 60px);
    margin-top: 20px;
    /* Match the menu width via shared CSS variable */
    width: var(--menu-width);
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    background-color: var(--bg-main);
    padding: 28px;
    border-radius: 12px;
    box-sizing: border-box;
    min-height: 440px; /* increase vertical presence */
}

.hero-images img {
    width: 100%;
    max-width: 480px;
    height: 420px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Compatibility: same sizing for any remaining original-size usages */
.hero-images img.original-size {
    width: 100%;
    max-width: 400px;
    height: 380px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-image-item:hover img {
    transform: translateY(-8px);
    box-shadow: 0 18px 36px rgba(0,0,0,0.25);
}

.img-placeholder {
    display: inline-block;
}

/* Conteneur pour chaque image + légendes */
.hero-image-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 280px;
    max-width: 400px;
    min-width: 0;
}

.hero-image-item img {
    display: block;
}

.hero-image-item .label-group {
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.25s ease;
}

.hero-image-item:hover .label-group {
    transform: translateY(-8px);
}

.hero-image-item .labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 6px;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.hero-image-item .labels-second {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hero-image-item .label {
    border: 1px solid rgba(0,0,0,0.15);
    padding: 6px 8px;
    border-radius: 6px;
    background: #D8CDBF;
    color: var(--txt-main);
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
}

.hero-image-item .label.single {
    flex: 0 0 auto;
}

.hero-image-item .label.duo {
    flex: 1 1 auto;
    white-space: normal;
}

.hero-image-item .label.equal {
    flex: 1 1 0;
    min-width: 80px;
    white-space: normal;
}

/* Section statistiques (ligne de chiffres) */
.key-stats {
    width: 100%;
    padding: 36px 0 48px;
    box-sizing: border-box;
    /* styling only - no special stacking so it sits after the hero */
}

.key-stats-container {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.key-stats .stat {
    flex: 1 1 0;
    text-align: center;
}

.key-stats .stat-number {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 34px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--txt-main);
    margin-bottom: 6px;
}

/* Affiche l'unité (ex: "sem") sur la même ligne que le nombre, même police que le nombre */
.key-stats .stat-number .stat-unit {
    font-family: 'Cormorant Garamond', serif; /* même police que le nombre */
    font-weight: 300;
    font-size: 24px; /* agrandi pour mieux correspondre au nombre */
    letter-spacing: 0;
    text-transform: none;
    color: var(--txt-main);
    margin-left: 2px; /* espace encore réduit entre le nombre et l'unité */
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
}

.key-stats .stat-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt-secondary);
}

@media (max-width: 900px) {
    .key-stats-container { width: 92%; gap: 12px; }
    .key-stats .stat-number { font-size: 26px; }
}

@media (max-width: 600px) {
    .key-stats-container { flex-wrap: wrap; gap: 16px; }
    .key-stats .stat { flex: 0 0 50%; }
    .key-stats .stat-number { font-size: 20px; letter-spacing: 4px; }
}

/* Responsive: tablet */
@media (max-width: 1024px) {
    .hero { padding-top: 300px; }
    .hero-container { width: 88%; }
    .hero-content h1 { font-size: 48px; }
    .hero-content h2 { font-size: 32px; }
    .home .hero-content { padding-top: 120px; }
    .services-header,
    .projects-header,
    .contact-header { padding-top: 300px; }
    /* Stack hero images vertically on tablet and smaller */
    .hero-images { gap: 24px; width: var(--menu-width); padding: 24px; min-height: 420px; flex-direction: column; }
    .hero-images img { height: 380px; max-width: 440px; }
    .hero-image-item { flex: 1 1 240px; max-width: 280px; }
    /* Ensure all hero image items can expand equally on tablet */
    .hero-image-item { max-width: none; }
    /* Use equal flex distribution so all three items share available width */
    /* Each hero image occupies full width when stacked */
    .hero-image-item { flex: 0 0 100%; width: 100%; max-width: none; }
    /* Force images to use an explicit aspect ratio and fill their container uniformly */
    .hero-images img { max-width: none; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
    .hero-image-item .labels, .hero-image-item .labels-second { justify-content: center; }
    .key-stats-container { width: 90%; }
    .expert-card { width: 420px; }
}

/* Landscape on tablets / phones: stack the three hero images vertically and equalize their size */
@media (max-width: 1024px) and (orientation: landscape) {
    /* Use a shared parent width and stretch children so all items match exactly */
    .hero-images {
        flex-direction: column;
        gap: 16px;
        padding: 18px;
        min-height: 0;
        align-items: stretch; /* ensure children stretch to same width */
        justify-content: center;
        width: min(480px, 92vw); /* limit the overall column width */
        margin-left: auto;
        margin-right: auto;
    }

    /* Each item fills the parent's width so all images are identical */
    .hero-image-item {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        margin: 0;
    }

    /* Force a consistent aspect and sizing like Photo C */
    .hero-images img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 6px;
        display: block;
    }

    .hero-image-item .labels, .hero-image-item .labels-second {
        justify-content: center;
    }
}

/* Catch landscape on phones/tablets by viewport height to ensure equal widths */
@media (orientation: landscape) and (max-height: 820px) {
    .hero-images {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        align-items: stretch;
        justify-content: center;
        width: min(480px, 92vw);
        margin-left: auto;
        margin-right: auto;
    }

    .hero-image-item {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        margin: 0;
    }

    .hero-images img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        display: block;
    }
}

/* Responsive: small tablets / large phones */
@media (max-width: 768px) {
    .menu { width: var(--menu-width-tablet); padding: 12px 20px; }
    .hero { padding-top: 400px; }
    .hero { background-attachment: scroll; }
    .hero-container { width: 92%; }
    .hero-content h1 { font-size: 40px; }
    .hero-content h2 { font-size: 28px; }
    .home .hero-content { padding-top: 160px; }
    .services-header,
    .projects-header,
    .contact-header { padding-top: 340px; }
    /* Mobile/phone stacking: ensure full-width stacked images */
    .hero-images { gap: 16px; width: var(--menu-width-tablet); padding: 20px; min-height: 360px; flex-direction: column; }
    .hero-images img { height: auto; max-width: none; }
    .hero-image-item { flex: 0 0 100%; width: 100%; max-width: none; }
    /* Force consistent widths for left/right images so they match the center image */
    .hero-image-item { max-width: none; }
    .hero-image-item { flex: 1 1 0; }
    .hero-images img { max-width: none; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
    .hero-image-item .labels { gap: 6px; }
    .key-stats-container { width: 92%; }
    .key-stats .stat-number { font-size: 24px; }
    .expert-card { width: 320px; }
}

/* Responsive: phones */
@media (max-width: 480px) {
    .hero { padding-top: 320px; }
    .menu { width: var(--menu-width-mobile); padding: 10px 14px; }
    .hero-container { width: 95%; }
    .hero-content h1 { font-size: 32px; }
    .hero-content h2 { font-size: 22px; }
    .home .hero-content { padding-top: 120px; }
    .services-header,
    .projects-header,
    .contact-header { padding-top: 300px; }
    .hero-images { gap: 12px; width: var(--menu-width-mobile); padding: 14px; min-height: 300px; }
    .hero-image-item { flex: 0 0 100%; max-width: 100%; width: 100%; }
    /* Ensure mobile images fill their container equally */
    .hero-image-item { max-width: none; }
    .hero-image-item { flex: 1 1 0; }
    /* On small phones, keep images filling the container and a reasonable max height */
    .hero-images img { width: 100%; height: auto; max-height: 280px; max-width: none; aspect-ratio: 4 / 3; object-fit: cover; }
    .hero-image-item .labels, .hero-image-item .labels-second { justify-content: center; flex-wrap: wrap; }
    .hero-image-item .label, .hero-image-item .label.duo, .hero-image-item .label.equal { font-size: 13px; }
    .key-stats-container { width: 95%; flex-direction: column; align-items: center; }
    .key-stats .stat { width: 100%; margin-bottom: 8px; }
    .key-stats .stat-number { font-size: 20px; }
    .expert-card { width: 90%; }
    .expert-photo { width: 160px; height: 160px; }
}

/* Deuxième ligne de labels sous l'image A */
.hero-image-item .labels-second {
    display: flex;
    gap: 12px;
    justify-content: center; /* centre les deux encadrés sous les éléments du dessus */
    align-items: center;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
}

.hero-image-item .label.small {
    border: 1px solid rgba(0,0,0,0.15);
    padding: 6px 10px;
    border-radius: 6px;
    background: #D8CDBF;
    color: var(--txt-main);
    font-size: 14px;
    line-height: 1;
    text-align: center;
    flex: 0 0 auto;
}

/* PAGE PROJETS */
.projects-body {
    background-color: #F7F5F1;
    background-image: linear-gradient(rgba(247, 245, 241, 0.55), rgba(247, 245, 241, 0.55)), url("../images/background/PHOTO 1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.projects-page {
    width: min(92%, 1440px);
    margin: 0 auto;
    padding: 170px 0 72px;
}

.projects-header {
    margin-bottom: 36px;
}

.projects-header h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 56px;
    font-weight: 300;
    color: var(--bg-main);
}

/* Force darker title color for Projects page */
.projects-body .projects-header h1 {
    color: #121212 !important;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 28px;
}

.project-card h2 {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--bg-main);
}

.project-image-wrap {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    transition: box-shadow 0.25s ease;
}

.project-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.project-card:hover .project-image-wrap img {
    transform: scale(1.03);
}

.project-card:hover .project-image-wrap {
    box-shadow: 0 18px 36px rgba(0,0,0,0.25);
}

@media (max-width: 768px) {
    .projects-body {
        background-attachment: scroll;
    }

    .projects-page {
    .hero-images { gap: 12px; width: var(--menu-width-mobile); padding: 14px; min-height: 300px; flex-direction: column; }
    .hero-image-item { flex: 0 0 100%; max-width: 100%; width: 100%; }
    /* Ensure mobile images fill their container equally */
    .hero-image-item { max-width: none; }
    .hero-images img { width: 100%; height: auto; max-height: 280px; max-width: none; aspect-ratio: 4 / 3; object-fit: cover; }
    }

    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 16px;
    }
}

@media (max-width: 480px) {
    .projects-page {
        padding-top: 190px;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }
}

/* Section experte */
.expert-section {
    width: 100%;
    padding: 36px 0 48px;
    box-sizing: border-box;
    background: transparent;
}

.expert-card {
    width: 520px;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
}

.expert-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 14px;
}

.expert-photo {
    width: 220px;
    height: 220px;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
    border: 6px solid #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    display: block;
    margin: 0 auto 12px;
}

.expert-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 22px;
    color: #ffffff;
}

.expert-section {
    background: #000000;
}

@media (max-width: 600px) {
    .expert-card { width: 220px; }
    .expert-photo { width: 160px; height: 160px; border-width: 4px; }
    .expert-name { font-size: 18px; }
    .expert-title { white-space: normal; font-size: 12px; }
}

/* removed lightbox rules (zoom behaviour replaced by hover lift) */

/* PAGE CONCEPTION & PLANS (SERVICES) */
.services-body {
    background-color: var(--bg-main);
    background-image: linear-gradient(rgba(247, 245, 241, 0.55), rgba(247, 245, 241, 0.55)), url("../images/background/PHOTO A.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.services-body > .services-page {
    flex: 1 0 auto;
}

.services-body > .footer {
    margin-top: auto;
}

.services-body-agencement {
    background-image: linear-gradient(rgba(247, 245, 241, 0.55), rgba(247, 245, 241, 0.55)), url("../images/background/PHOTO B.png");
}

/* PAGE PROFESSIONNELS */
.services-body-professionnel {
    background-image: linear-gradient(rgba(247, 245, 241, 0.55), rgba(247, 245, 241, 0.55)), url("../images/background/PHOTO C.png");
}

/* PAGE HONORAIRES */
.services-body-honoraires {
    background-image: linear-gradient(rgba(247, 245, 241, 0.55), rgba(247, 245, 241, 0.55)), url("../images/background/PHOTO 1.png");
}

.services-page {
    width: min(92%, 1440px);
    margin: 0 auto;
    padding: 170px 0 72px;
}

.services-header {
    margin-bottom: 40px;
}

.services-header h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 56px;
    font-weight: 300;
    color: var(--txt-main);
    text-shadow: 0 1px 12px rgba(247, 245, 241, 0.8);
}

.services-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--txt-main);
    margin-top: 12px;
    text-shadow: 0 1px 12px rgba(247, 245, 241, 0.8);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 32px 24px;
}

.service-card {
    display: flex;
    flex-direction: column;
    background-color: rgba(247, 245, 241, 0.72);
    border-radius: 8px;
    padding: 24px 20px;
}

.service-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
}

.service-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.service-card h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--txt-main);
    margin-bottom: 10px;
}

.service-card p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--txt-secondary);
    margin-bottom: 16px;
}

.service-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.service-list li {
    position: relative;
    padding-left: 22px;
    font-size: 13px;
    color: var(--txt-main);
    line-height: 1.4;
}

.service-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--action);
    font-weight: 600;
}

@media (max-width: 768px) {
    .services-body {
        background-attachment: scroll;
    }
}

@media (max-width: 1100px) {
    .services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .services-page { padding-top: 160px; }
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .services-header h1 { font-size: 44px; }
}

@media (max-width: 480px) {
    .services-page { padding-top: 190px; }
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* SECTION NOTRE APPROCHE (TIMELINE) */
.approach-section {
    width: 100%;
    background-color: #2b2621;
    padding: 60px 0 60px;
    box-sizing: border-box;
}

.approach-container {
    width: min(92%, 1440px);
    margin: 0 auto;
    text-align: left;
}

.approach-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 6px;
    color: #ffffff;
    margin-bottom: 16px;
}

.approach-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 6px;
    color: #ffffff;
    margin-bottom: 60px;
    text-align: center;
}

.approach-timeline {
    display: flex;
    flex-direction: column;
}

.approach-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.approach-row-top {
    align-items: end;
    margin-bottom: 16px;
}

.approach-row-bottom {
    align-items: start;
    margin-top: 16px;
}

.approach-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.approach-box {
    background-color: #ffffff;
    color: var(--txt-main);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    padding: 14px 20px;
    border-radius: 4px;
    /* fix width so outer size (including padding) matches .approach-desc */
    box-sizing: border-box;
    width: 300px;
    text-align: center;
}

.approach-box .approach-box-title {
    font-family: 'Cormorant Garamond', serif;
    display: block;
}

.approach-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #ffffff;
    /* align size with .approach-box */
    box-sizing: border-box;
    min-width: 300px;
    width: 160px;
    text-align: left;
}

/* Mobile alternative: hidden by default, shown on small viewports */
.approach-mobile-list { display: none; }
.approach-mobile-item { display: none; }

.approach-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 2px;
    background-color: #ffffff;
}

.approach-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #2b2621;
    border: 2px solid #ffffff;
}

@media (max-width: 900px) {
    .approach-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 20px;
    }
    .approach-line { display: none; }
    .approach-row-top, .approach-row-bottom { margin: 0; }
    .approach-slot-empty { display: none; }
    /* On smaller screens replace the zig-zag timeline with a simple ordered list */
    .approach-timeline { display: none; }
    .approach-mobile-list { display: block; }
    .approach-mobile-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
    .approach-mobile-item .approach-box { min-width: 0; width: 100%; }
    .approach-mobile-item .approach-desc { max-width: none; width: 100%; min-width: 0; text-align: left; }
}

@media (max-width: 480px) {
    .approach-row {
        grid-template-columns: 1fr;
    }
}