/* Final mobile composition for the About page. Desktop layout is unchanged. */
@media (max-width: 720px) {
    html body #about-content .about-hero {
        min-height: 0 !important;
        background-position: 54% center !important;
    }

    html body #about-content .about-hero__grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
        min-height: 0 !important;
        padding-top: 30px !important;
        padding-bottom: 26px !important;
    }

    html body #about-content .about-hero__copy {
        width: 100% !important;
        text-align: center !important;
    }

    html body #about-content .about-hero__copy .about-eyebrow {
        font-size: 10px !important;
        line-height: 1.45 !important;
    }

    html body #about-content .about-hero__copy h1 {
        max-width: 340px !important;
        margin: 12px auto 16px !important;
        font-size: clamp(32px, 10vw, 42px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.04em !important;
    }

    html body #about-content .about-hero__copy p {
        max-width: 350px !important;
        margin: 0 auto !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    html body #about-content .mayor-collage {
        display: grid !important;
        justify-self: center !important;
        align-self: center !important;
        width: min(260px, 78vw) !important;
        margin: 0 auto !important;
    }

    html body #about-content .mayor-collage__frame {
        width: 100% !important;
        height: 205px !important;
        padding: 0 !important;
        border: 0 !important;
        background: rgba(241, 245, 249, .94) !important;
        backdrop-filter: none !important;
    }

    html body #about-content .mayor-collage__frame .mayor-photo-placeholder {
        padding: 20px 14px !important;
    }

    html body #about-content .mayor-collage__frame .mayor-photo-placeholder > span {
        font-size: 38px !important;
    }

    html body #about-content .mayor-collage__label {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 11px 14px 12px !important;
        transform: none !important;
        border: 0 !important;
        border-top: 2px solid #ffc936 !important;
        background: rgba(0, 46, 93, .92) !important;
        text-align: center !important;
    }

    html body #about-content .about-tabs {
        display: flex !important;
        width: 100% !important;
        gap: 0 !important;
        padding: 0 max(16px, calc((100vw - 100%) / 2)) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .35) transparent;
    }

    html body #about-content .about-tabs a {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
        padding: 12px 14px !important;
        font-size: 11px !important;
        text-align: center !important;
    }

    html body #about-content .about-section {
        padding-top: 38px !important;
        padding-bottom: 38px !important;
    }

    html body #about-content #organization .office-directory {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
    }

    html body #about-content #organization .office-directory article {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 14px !important;
        min-height: 0 !important;
        padding: 20px 4px !important;
        text-align: left !important;
    }

    html body #about-content #organization .office-directory article > span {
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        font-size: 13px !important;
    }

    html body #about-content #organization .office-directory article > div,
    html body #about-content #organization .office-directory h3,
    html body #about-content #organization .office-directory p {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        text-align: left !important;
    }

    html body #about-content #organization .office-directory h3 {
        margin-top: 0 !important;
        margin-bottom: 6px !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    html body #about-content #organization .office-directory p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    html body #about-content #barangays .barangay-summary {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    html body #about-content #barangays .barangay-summary article,
    html body #about-content #barangays .barangay-summary article:last-child {
        min-height: 0 !important;
        padding: 24px 22px 24px 26px !important;
        border: 0 !important;
        border-radius: 4px !important;
        background: #fff !important;
        color: #002e5d !important;
        text-align: left !important;
        box-shadow: 0 8px 22px rgba(0, 46, 93, .06) !important;
    }

    html body #about-content #barangays .barangay-summary article:last-child {
        background: #f1f5f9 !important;
    }

    html body #about-content #barangays .barangay-summary b,
    html body #about-content #barangays .barangay-summary h3 {
        color: #002e5d !important;
    }

    html body #about-content #barangays .barangay-summary b {
        font-size: 11px !important;
        letter-spacing: .13em !important;
        text-transform: uppercase !important;
    }

    html body #about-content #barangays .barangay-summary p {
        max-width: 330px !important;
        margin: 8px 0 0 !important;
        color: #536879 !important;
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    html body #about-content .municipal-values-strip > .shell {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body #about-content .municipal-values-strip article {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 13px !important;
        min-height: 0 !important;
        padding: 16px 14px !important;
        border-left: 0 !important;
        text-align: left !important;
    }

    html body #about-content .municipal-values-strip article > span {
        width: 34px !important;
        height: 34px !important;
        font-size: 0 !important;
    }

    html body #about-content .municipal-values-strip article > span::before {
        content: "✓";
        color: #087ac7;
        font: 800 15px/1 Arial, sans-serif;
    }

    html body #about-content .municipal-values-strip article > div,
    html body #about-content .municipal-values-strip :is(strong, small) {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        text-align: left !important;
    }

    html body #about-content .municipal-values-strip strong {
        font-size: 12px !important;
    }

    html body #about-content .municipal-values-strip small {
        font-size: 10px !important;
        line-height: 1.45 !important;
    }
}

/* Match the About hero eyebrow to the homepage sun-yellow. */
html body #about-content .about-hero .about-hero__copy .about-eyebrow{
    color:#ffcf3f!important;
}

/* Final hero-eyebrow color: match the sun in the municipal wordmark. */
html body #about-content .about-hero .about-eyebrow {
    color: #ffcf3f !important;
}

/* Final municipal About-page refinement: compact, unobstructed navy-and-gold UI. */
html body #about-content{--about-green:#9a6800!important;--about-pale:#fff!important;background:#fff!important}
html body #about-content .section-label,
html body #about-content .about-eyebrow,
html body #about-content .priority-list>.section-label{color:#9a6800!important}
html body #about-content .about-section,
html body #about-content .about-tint,
html body #about-content .municipal-values-strip{background:#fff!important;border:0!important;box-shadow:none!important}
html body #about-content .about-section{padding-block:46px!important;scroll-margin-top:150px}
html body #about-content .section-heading{margin-top:0!important;margin-bottom:24px!important}
html body #about-content .section-heading--center{text-align:center!important}
html body #about-content #mayors-corner{padding-top:44px!important;padding-bottom:44px!important}
html body #about-content #mayors-corner .mayor-corner{min-height:340px!important;grid-template-columns:1.08fr 1.28fr .92fr!important;overflow:hidden;border:0!important;background:#fff!important;box-shadow:0 12px 34px rgba(0,46,93,.08)!important}
html body #about-content #mayors-corner .mayor-corner>article,
html body #about-content #mayors-corner .mayor-corner>blockquote{min-height:340px!important;padding:28px 36px!important;background:#fff!important}
html body #about-content #mayors-corner .mayor-corner>*+*{border-left:1px solid rgba(0,46,93,.12)!important}
html body #about-content #mayors-corner .mayor-corner__photo .mayor-photo-placeholder,
html body #about-content #mayors-corner .mayor-corner__photo img{width:min(100%,340px)!important;height:196px!important;margin:0 auto 14px!important;border:0!important;background:#f7f9fb!important}
html body #about-content #mayors-corner .mayor-corner__photo .mayor-photo-placeholder{border-bottom:3px solid #e5b82c!important}
html body #about-content #mayors-corner blockquote{align-items:flex-start!important;justify-content:center!important}
html body #about-content #mayors-corner blockquote p{margin:8px 0 14px!important;color:#173a5c!important;font-size:1rem!important;line-height:1.65!important}
html body #about-content #mayors-corner .priority-list ul{display:grid!important;gap:0!important;width:100%;margin-top:10px!important}
html body #about-content #mayors-corner .priority-list li{min-height:54px!important;padding:15px 0 15px 30px!important;border-bottom:1px solid rgba(0,46,93,.14)!important;line-height:1.45!important}
html body #about-content #mayors-corner .priority-list li::before{color:#087ac7!important}
html body #about-content #officials,
html body #about-content #organization,
html body #about-content #barangays{padding-block:48px!important}
html body #about-content #officials .data-placeholder,
html body #about-content #organization .office-directory article,
html body #about-content #barangays .barangay-summary article,
html body #about-content #barangays .barangay-directory{background:#fff!important;border:0!important;box-shadow:0 10px 28px rgba(0,46,93,.07)!important}
html body #about-content #organization .office-directory{gap:20px!important}
html body #about-content #organization .office-directory article{min-height:150px!important;padding:26px!important}
html body #about-content #barangays .barangay-layout{align-items:stretch}
html body #about-content #barangays .barangay-summary article::before{background:#087ac7!important}
html body #about-content #barangays .barangay-summary article:last-child::before{background:#e5b82c!important}
html body #about-content #barangays .barangay-summary b,
html body #about-content #barangays .barangay-summary article:last-child b{color:#9a6800!important}
html body #about-content .municipal-values-strip article{background:#fff!important;box-shadow:none!important}
html body #about-content .municipal-values-strip article>span{background:#f4f7fa!important;color:#087ac7!important}
html body #about-content .lgu-scroll-top{width:44px!important;height:44px!important;right:18px!important;bottom:18px!important;z-index:120!important}
@media(max-width:1050px){
html body #about-content #mayors-corner .mayor-corner{grid-template-columns:1fr 1.25fr!important}
html body #about-content #mayors-corner .priority-list{grid-column:1/-1!important;min-height:0!important;border-top:1px solid rgba(0,46,93,.12)!important;border-left:0!important}
}
@media(max-width:720px){
html body #about-content .about-section{padding-block:34px!important;scroll-margin-top:112px}
html body #about-content #mayors-corner .mayor-corner{grid-template-columns:1fr!important;min-height:0!important}
html body #about-content #mayors-corner .mayor-corner>article,
html body #about-content #mayors-corner .mayor-corner>blockquote{min-height:0!important;padding:24px 20px!important;border-left:0!important;border-top:1px solid rgba(0,46,93,.12)!important}
html body #about-content #mayors-corner .mayor-corner>:first-child{border-top:0!important}
html body #about-content #organization .office-directory article{min-height:0!important;padding:22px 18px!important}
}

/* Match the About hero eyebrow to the wordmark sun and homepage welcome gold. */
html body #about-content .about-hero .about-eyebrow{
    color:#ffcf3f!important;
}

/* Mobile Mayor preview: clean translucent panel without the desktop diagonal. */
@media (max-width: 720px) {
    html body #about-content .mayor-collage {
        width: min(320px, 88vw) !important;
        height: 220px !important;
        clip-path: none !important;
        overflow: hidden !important;
        border: 0 !important;
        background: rgba(234, 244, 251, .76) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        backdrop-filter: blur(5px) !important;
    }

    html body #about-content .mayor-collage::before {
        content: none !important;
        display: none !important;
    }

    html body #about-content .mayor-collage__frame,
    html body #about-content .mayor-collage__frame .mayor-photo-placeholder {
        clip-path: none !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body #about-content .mayor-collage__frame .mayor-photo-placeholder {
        padding: 18px 18px 56px !important;
    }

    html body #about-content .mayor-collage__frame img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    html body #about-content .mayor-collage__label {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        border: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .28) !important;
        background: rgba(0, 46, 93, .86) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        backdrop-filter: blur(4px) !important;
    }
}

/* Final cascade: use the homepage sun-yellow for the About hero eyebrow. */
html body #about-content .about-hero .about-hero__copy .about-eyebrow{
    color:#ffcf3f!important;
}

/* Final cascade lock: use the homepage/wordmark sun gold in the About hero. */
html body #about-content .about-hero .about-eyebrow {
    color: #ffcf3f !important;
}

/* Cascade lock: premium white About sections with navy, blue and gold only. */
html body #about-content{--about-green:#9a6800!important;--about-pale:#fff!important;background:#fff!important}
html body #about-content :is(.section-label,.priority-list>.section-label){color:#9a6800!important}
html body #about-content :is(.about-section,.about-tint,.municipal-values-strip){background:#fff!important;border:0!important;box-shadow:none!important}
html body #about-content .about-section{padding-block:46px!important;scroll-margin-top:150px}
html body #about-content .section-heading{margin-top:0!important;margin-bottom:24px!important}
html body #about-content .section-heading--center{text-align:center!important}
html body #about-content #mayors-corner{padding-block:44px!important}
html body #about-content #mayors-corner .mayor-corner{min-height:340px!important;grid-template-columns:1.08fr 1.28fr .92fr!important;overflow:hidden;border:0!important;background:#fff!important;box-shadow:0 12px 34px rgba(0,46,93,.08)!important}
html body #about-content #mayors-corner .mayor-corner>article,
html body #about-content #mayors-corner .mayor-corner>blockquote{min-height:340px!important;padding:28px 36px!important;background:#fff!important}
html body #about-content #mayors-corner .mayor-corner>*+*{border-left:1px solid rgba(0,46,93,.12)!important}
html body #about-content #mayors-corner :is(.mayor-corner__photo .mayor-photo-placeholder,.mayor-corner__photo img){width:min(100%,340px)!important;height:196px!important;margin:0 auto 14px!important;border:0!important;background:#f7f9fb!important}
html body #about-content #mayors-corner .mayor-corner__photo .mayor-photo-placeholder{border-bottom:3px solid #e5b82c!important}
html body #about-content #mayors-corner blockquote{align-items:flex-start!important;justify-content:center!important}
html body #about-content #mayors-corner blockquote p{margin:8px 0 14px!important;color:#173a5c!important;font-size:1rem!important;line-height:1.65!important}
html body #about-content #mayors-corner .priority-list ul{display:grid!important;gap:0!important;width:100%;margin-top:10px!important}
html body #about-content #mayors-corner .priority-list li{min-height:54px!important;padding:15px 0 15px 30px!important;border-bottom:1px solid rgba(0,46,93,.14)!important;line-height:1.45!important}
html body #about-content #mayors-corner .priority-list li::before{color:#087ac7!important}
html body #about-content :is(#officials,#organization,#barangays){padding-block:48px!important}
html body #about-content #officials .data-placeholder,
html body #about-content #organization .office-directory article,
html body #about-content #barangays .barangay-summary article,
html body #about-content #barangays .barangay-directory{background:#fff!important;border:0!important;box-shadow:0 10px 28px rgba(0,46,93,.07)!important}
html body #about-content #organization .office-directory{gap:20px!important}
html body #about-content #organization .office-directory article{min-height:150px!important;padding:26px!important}
html body #about-content #barangays .barangay-summary article::before{background:#087ac7!important}
html body #about-content #barangays .barangay-summary article:last-child::before{background:#e5b82c!important}
html body #about-content #barangays .barangay-summary b,
html body #about-content #barangays .barangay-summary article:last-child b{color:#9a6800!important}
html body #about-content .municipal-values-strip article{background:#fff!important;box-shadow:none!important}
html body #about-content .municipal-values-strip article>span{background:#f4f7fa!important;color:#087ac7!important}
html body #about-content .lgu-scroll-top{width:44px!important;height:44px!important;right:18px!important;bottom:18px!important;z-index:120!important}
@media(max-width:1050px){
html body #about-content #mayors-corner .mayor-corner{grid-template-columns:1fr 1.25fr!important}
html body #about-content #mayors-corner .priority-list{grid-column:1/-1!important;min-height:0!important;border-top:1px solid rgba(0,46,93,.12)!important;border-left:0!important}
}
@media(max-width:720px){
html body #about-content .about-section{padding-block:34px!important;scroll-margin-top:112px}
html body #about-content #mayors-corner .mayor-corner{grid-template-columns:1fr!important;min-height:0!important}
html body #about-content #mayors-corner .mayor-corner>article,
html body #about-content #mayors-corner .mayor-corner>blockquote{min-height:0!important;padding:24px 20px!important;border-left:0!important;border-top:1px solid rgba(0,46,93,.12)!important}
html body #about-content #mayors-corner .mayor-corner>:first-child{border-top:0!important}
html body #about-content #organization .office-directory article{min-height:0!important;padding:22px 18px!important}
}

/*
 * About hero mayor panel.
 * Keep this page-scoped block last: shared card refinements are intentionally
 * not allowed to turn this structural hero region back into a floating card.
 */
@media (min-width: 721px) {
    html body #about-content .about-hero__grid {
        position: relative !important;
    }

    html body #about-content .mayor-collage {
        position: absolute !important;
        inset: 0 0 0 auto !important;
        width: 410px !important;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%) !important;
        background: rgba(207, 226, 241, .72) !important;
        box-shadow: none !important;
        transform: none !important;
    }

    html body #about-content .mayor-collage::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        z-index: 6 !important;
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        background: #ffc936 !important;
        clip-path: polygon(16% 0, calc(16% + 2px) 0, 2px 100%, 0 100%) !important;
        transform: none !important;
        pointer-events: none !important;
    }

    html body #about-content .mayor-collage__frame {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
    }

    html body #about-content .mayor-collage__frame .mayor-photo-placeholder {
        width: 100% !important;
        height: 100% !important;
        padding: 0 24px 56px 66px !important;
        background: rgba(221, 235, 246, .76) !important;
    }

    html body #about-content .mayor-collage__label {
        position: absolute !important;
        z-index: 7 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 78% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 14px 18px !important;
        border: 0 !important;
        background: rgba(0, 46, 93, .9) !important;
        box-shadow: none !important;
        text-align: center !important;
        transform: none !important;
    }
}

@media (min-width: 721px) and (max-width: 1050px) {
    html body #about-content .mayor-collage {
        width: 330px !important;
        clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%) !important;
    }

    html body #about-content .mayor-collage::before {
        clip-path: polygon(14% 0, calc(14% + 2px) 0, 2px 100%, 0 100%) !important;
    }

    html body #about-content .mayor-collage__frame .mayor-photo-placeholder {
        padding-left: 48px !important;
    }
}

@media (max-width: 380px) {
    html body #about-content .about-tabs a {
        padding-inline: 12px !important;
    }

    html body #about-content #organization .office-directory article {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 11px !important;
    }

    html body #about-content #organization .office-directory article > span {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Maintain the diagonal photo treatment without crowding narrow hero layouts. */
@media (max-width: 720px) {
    html body #about-content .about-hero__grid::after {
        display: none !important;
    }
    html body #about-content .mayor-collage::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        z-index: 3 !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 7% !important;
        width: 2px !important;
        height: auto !important;
        background: rgba(255, 201, 54, .94) !important;
        transform: rotate(7deg) !important;
        pointer-events: none !important;
    }
    html body #about-content .about-hero::before {
        background: linear-gradient(180deg, rgba(0, 30, 65, .76) 0%, rgba(0, 46, 93, .48) 46%, rgba(8, 122, 199, .12) 74%, rgba(0, 30, 65, .34) 100%) !important;
    }
    html body #about-content .about-hero__grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    html body #about-content .mayor-collage {
        position: relative !important;
        inset: auto !important;
        justify-self: center !important;
        width: min(340px, 92vw) !important;
        height: 238px !important;
        margin-block: 0 !important;
        clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%) !important;
    }
    html body #about-content .mayor-collage__frame {
        height: auto !important;
        padding: 0 !important;
    }
    html body #about-content .mayor-collage .mayor-photo-placeholder {
        padding-left: 26px !important;
    }
    html body #about-content .mayor-collage__label {
        width: 82% !important;
        padding: 12px 16px !important;
    }
}

/* Final mobile polish: quieter surfaces, tighter rhythm, and unobstructed content. */
@media (max-width: 720px) {
    html body #about-content .narrative-grid { gap: 14px !important; }
    html body #about-content .narrative-grid > article {
        padding: 24px 20px !important;
        border-top: 1px solid #d9e5f0 !important;
        border-radius: 4px !important;
        background: #fff !important;
        box-shadow: 0 8px 22px rgba(0, 46, 93, .045) !important;
    }
    html body #about-content .narrative-grid h2 { margin-bottom: 12px !important; font-size: 1.45rem !important; line-height: 1.18 !important; }
    html body #about-content .narrative-grid p { margin-block: 8px 0 !important; font-size: 13px !important; line-height: 1.7 !important; }
    html body #about-content .narrative-grid li { padding-block: 12px !important; }
    html body #about-content .municipal-values-strip article > span::before { content: "\2713" !important; }
    html body #about-content #mayors-corner .section-heading { margin-bottom: 20px !important; }
    html body #about-content .mayor-corner { min-height: 0 !important; border-top: 1px solid #d9e5f0 !important; }
    html body #about-content .mayor-corner > article,
    html body #about-content .mayor-corner > blockquote { min-height: 0 !important; padding: 22px 18px !important; }
    html body #about-content .mayor-corner__photo img,
    html body #about-content .mayor-corner__photo .mayor-photo-placeholder { width: min(230px, 76vw) !important; height: 190px !important; margin-bottom: 12px !important; }
    html body #about-content .mayor-corner blockquote p { margin: 5px 0 12px !important; font-size: .94rem !important; line-height: 1.6 !important; text-align: center !important; }
    html body #about-content .mayor-corner blockquote,
    html body #about-content .mayor-corner blockquote > span,
    html body #about-content .mayor-corner blockquote cite { align-items: center !important; text-align: center !important; }
    html body #about-content .mayor-corner .priority-list ul { grid-template-rows: none !important; margin-top: 6px !important; }
    html body #about-content .mayor-corner .priority-list li { min-height: 0 !important; padding: 13px 0 13px 27px !important; line-height: 1.45 !important; }
    html body .lgu-scroll-top { right: 8px !important; bottom: 8px !important; width: 40px !important; height: 40px !important; opacity: .94; }

    /* Keep the mobile mayor preview layered instead of stretching the label. */
    html body #about-content .mayor-collage {
        display: block !important;
        position: relative !important;
        width: min(320px, 88vw) !important;
        height: 220px !important;
        overflow: hidden !important;
        background: rgba(221, 235, 246, .9) !important;
    }
    html body #about-content .mayor-collage__frame {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
    }
    html body #about-content .mayor-collage__frame .mayor-photo-placeholder {
        width: 100% !important;
        height: 100% !important;
        padding: 18px 18px 54px 34px !important;
        background: rgba(234, 244, 251, .92) !important;
        color: #002e5d !important;
    }
    html body #about-content .mayor-collage__label {
        display: block !important;
        position: absolute !important;
        z-index: 8 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: 84% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px 15px !important;
        border: 0 !important;
        border-top: 2px solid #ffc936 !important;
        background: rgba(0, 46, 93, .94) !important;
        color: #fff !important;
    }
    html body #about-content .mayor-collage__label strong {
        color: #fff !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
}

/* Final mobile Mayor treatment: rectangular, translucent and upload-ready. */
@media (max-width: 720px) {
    html body #about-content .mayor-collage {
        width: min(320px, 88vw) !important;
        height: 220px !important;
        clip-path: none !important;
        border: 0 !important;
        background: rgba(234, 244, 251, .76) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        backdrop-filter: blur(5px) !important;
    }
    html body #about-content .mayor-collage::before {
        content: none !important;
        display: none !important;
    }
    html body #about-content .mayor-collage__frame,
    html body #about-content .mayor-collage__frame .mayor-photo-placeholder {
        clip-path: none !important;
        border: 0 !important;
        background: transparent !important;
    }
    html body #about-content .mayor-collage__frame .mayor-photo-placeholder {
        padding: 18px 18px 56px !important;
    }
    html body #about-content .mayor-collage__frame img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
    }
    html body #about-content .mayor-collage__label {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        padding: 12px 16px !important;
        border: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .28) !important;
        background: rgba(0, 46, 93, .86) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        backdrop-filter: blur(4px) !important;
    }
}