/* Подключает шрифты публичного интерфейса. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Lora:wght@500;600;700&display=swap');

/* Хранит общие цвета и размеры публичного сайта. */
:root {
    /* Ограничивает ширину общего публичного контейнера. */
    --public-shell: 89.5vw;
    /* Задаёт основной зелёный цвет бренда. */
    --public-green: #075a2d;
    /* Задаёт тёплый цвет фона. */
    --public-paper: #f6f0e3;
    /* Задаёт цвет основного текста. */
    --public-ink: #252923;
    /* Задаёт цвет тонких разделителей. */
    --public-line: #cbc2af;
}

/* Делает расчёт размеров элементов предсказуемым. */
* {
    /* Включает рамки и отступы в итоговый размер элемента. */
    box-sizing: border-box;
}

.global-brand,
.global-nav,
.global-nav a,
.global-nav summary {
    white-space: nowrap;
}

.global-header--collapsed .global-menu-button {
    display: block;
}

.global-header--collapsed .global-nav {
    display: none;
    position: absolute;
    top: 98px;
    right: 5.25vw;
    flex-direction: column;
    align-items: flex-start;
    min-width: 270px;
    padding: 24px;
    background: #fffaf0;
    border: 1px solid var(--public-line);
    box-shadow: 0 16px 35px rgba(30, 38, 31, 0.18);
}

.global-header--collapsed .global-nav--open {
    display: flex;
}

.tenant-page .portal-card .outline-button,
.tenant-page .contact-card .outline-button {
    border-color: #2b78a6;
    background: #2b78a6;
    color: #fff;
}

.tenant-page .portal-card .primary-button img,
.tenant-page .contact-card .outline-button img {
    filter: brightness(0) invert(1);
}

.global-contact-modal__details > img {
    -webkit-mask-image: radial-gradient(ellipse, #000 68%, transparent 100%);
    mask-image: radial-gradient(ellipse, #000 68%, transparent 100%);
}

@media (min-width: 761px) {
    .tenant-page .portal-card .card-content,
    .tenant-page .contact-card .card-content {
        width: 100%;
        margin-left: 0;
        padding: clamp(28px, 3vw, 48px) clamp(24px, 2.6vw, 42px);
        justify-content: flex-start;
    }

    .tenant-page .portal-card .outline-button,
    .tenant-page .contact-card .outline-button {
        width: min(88%, 360px);
        margin-inline: auto;
        margin-top: auto;
    }
}

/* The Max artwork has substantially more transparent padding than the Berry
   artwork. These unequal source heights make their visible marks match. */
.tenant-page .global-brand > a:first-child img,
.owner-page .global-brand > a:first-child img,
.mbg-page .global-brand > a:first-child img {
    width: auto;
    height: 42px;
    flex-shrink: 0;
}

.tenant-page .global-brand__partner,
.owner-page .global-brand__partner,
.mbg-page .global-brand__partner {
    width: auto;
    height: 59px;
    flex-shrink: 0;
}

.tenant-page .global-brand > a,
.owner-page .global-brand > a,
.mbg-page .global-brand > a {
    flex-shrink: 0;
}

@media (max-width: 620px) {
    .tenant-page .global-brand > a:first-child img,
    .owner-page .global-brand > a:first-child img,
    .mbg-page .global-brand > a:first-child img {
        width: auto;
        height: 22px;
    }

    .tenant-page .global-brand__partner,
    .owner-page .global-brand__partner,
    .mbg-page .global-brand__partner {
        width: auto;
        height: 31px;
    }
}

@media (max-width: 1120px) {
    :root {
        --public-shell: 93.5vw;
    }
}

@media (max-width: 620px) {
    :root {
        --public-shell: 95vw;
    }

    .global-brand img,
    .tenant-page .global-brand img,
    .owner-page .global-brand img,
    .mbg-page .global-brand__partner {
        width: clamp(110px, 37vw, 154px);
    }
}

/* Настраивает базовый вид публичных страниц. */
body {
    /* Убирает стандартный внешний отступ браузера. */
    margin: 0;
    /* Подключает основной читаемый шрифт. */
    font-family: 'DM Sans', Arial, sans-serif;
    /* Задаёт цвет текста. */
    color: var(--public-ink);
    /* Создаёт фактурный бумажный фон. */
    background: var(--public-paper) url('../images/main/beige_bg.JPEG') repeat;
    /* Масштабирует фоновую текстуру. */
    background-size: 520px auto;
}

/* Формирует липкий футер на всех публичных страницах. */
.home-page,
.info-page,
.tenant-page,
.owner-page,
.investor-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.home-page > main,
.info-page > main,
.tenant-page > main,
.owner-page > main,
.investor-page > main {
    flex: 1 0 auto;
}

/* Ограничивает и центрирует основной контент. */
.global-shell {
    /* Применяет адаптивную максимальную ширину. */
    width: var(--public-shell);
    /* Центрирует блок по горизонтали. */
    margin-inline: auto;
}

/* Оформляет общую шапку сайта. */
.global-header {
    /* Создаёт светлый полупрозрачный фон. */
    background: rgba(232, 224, 207, 0.96);
    /* Отделяет шапку тонкой линией. */
    border-bottom: 1px solid var(--public-line);
    /* Поднимает шапку над выпадающими элементами. */
    position: relative;
    /* Устанавливает слой шапки. */
    z-index: 20;
}

/* Выстраивает содержимое шапки в строку. */
.global-header__row {
    /* Задаёт удобную минимальную высоту. */
    min-height: 98px;
    /* Включает гибкую раскладку. */
    display: flex;
    /* Центрирует элементы по вертикали. */
    align-items: center;
    /* Разносит логотип и меню по краям. */
    justify-content: space-between;
    /* Создаёт расстояние между блоками. */
    gap: 28px;
    /* Не переносит логотип и навигацию на вторую строку. */
    flex-wrap: nowrap;
}

/* Управляет размером логотипа. */
.global-brand img {
    /* Подбирает ширину пропорционально экрану. */
    width: clamp(180px, 18vw, 280px);
    /* Убирает строчный зазор под изображением. */
    display: block;
}

/* Выстраивает пункты навигации. */
.global-nav {
    /* Включает гибкую раскладку. */
    display: flex;
    /* Центрирует пункты по вертикали. */
    align-items: center;
    /* Масштабирует расстояние между ссылками. */
    gap: clamp(12px, 1.55vw, 28px);
    /* Подбирает размер навигационного текста. */
    font-size: clamp(12px, 0.94vw, 16px);
    /* Делает навигацию визуально устойчивой. */
    font-weight: 700;
}

/* Оформляет ссылки общей навигации. */
.global-nav a {
    /* Наследует цвет окружающего текста. */
    color: inherit;
    /* Убирает стандартное подчёркивание. */
    text-decoration: none;
}

.global-nav > a,
.global-nav > .language-menu > summary {
    position: relative;
}

.global-nav > a::after,
.global-nav > .language-menu > summary::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms ease;
}

.global-nav > a:hover::after,
.global-nav > a:focus-visible::after,
.global-nav > .language-menu > summary:hover::after,
.global-nav > .language-menu > summary:focus-visible::after {
    transform: scaleX(1);
}

/* Выравнивает ссылки с небольшими иконками. */
.global-nav__compact {
    /* Включает гибкую раскладку. */
    display: flex;
    /* Центрирует содержимое по вертикали. */
    align-items: center;
    /* Добавляет зазор между иконкой и текстом. */
    gap: 7px;
    /* Запрещает нежелательный перенос. */
    white-space: nowrap;
}

/* Ограничивает размер навигационных иконок. */
.global-nav__compact img,
.language-menu img {
    /* Задаёт ширину иконки. */
    width: 18px;
    /* Задаёт высоту иконки. */
    height: 18px;
}

/* Создаёт точку позиционирования меню языка. */
.language-menu {
    /* Позволяет привязать выпадающее меню. */
    position: relative;
}

/* Оформляет кнопку выбора языка. */
.language-menu summary {
    /* Включает гибкое выравнивание. */
    display: flex;
    /* Центрирует содержимое. */
    align-items: center;
    /* Добавляет расстояние между частями кнопки. */
    gap: 6px;
    /* Показывает интерактивный курсор. */
    cursor: pointer;
    /* Скрывает стандартный маркер details. */
    list-style: none;
}

/* Оформляет выпадающий список языков. */
.language-menu__options {
    /* Позиционирует меню относительно переключателя. */
    position: absolute;
    /* Размещает меню под кнопкой. */
    top: calc(100% + 12px);
    /* Выравнивает меню по правому краю. */
    right: 0;
    /* Задаёт минимальную удобную ширину. */
    min-width: 140px;
    /* Создаёт светлый фон. */
    background: #fffaf0;
    /* Добавляет тонкую рамку. */
    border: 1px solid var(--public-line);
    /* Скругляет углы. */
    border-radius: 8px;
    /* Добавляет внутренние отступы. */
    padding: 8px;
    /* Создаёт мягкую тень. */
    box-shadow: 0 12px 30px rgba(30, 38, 31, 0.16);
}

/* Увеличивает область клика языковых ссылок. */
.language-menu__options a {
    /* Показывает ссылку отдельной строкой. */
    display: block;
    /* Добавляет внутренние отступы. */
    padding: 9px 12px;
    /* Скругляет фон при наведении. */
    border-radius: 5px;
}

/* Подсвечивает язык под курсором. */
.language-menu__options a:hover {
    /* Добавляет деликатный зелёный фон. */
    background: rgba(7, 90, 45, 0.09);
}

/* Скрывает мобильную кнопку на широком экране. */
.global-menu-button {
    /* Не показывает кнопку по умолчанию. */
    display: none;
    /* Убирает рамку. */
    border: 0;
    /* Убирает фон. */
    background: transparent;
    /* Увеличивает символ меню. */
    font-size: 28px;
    /* Показывает интерактивный курсор. */
    cursor: pointer;
}

/* Оформляет единый подвал сайта. */
.global-footer {
    /* Добавляет верхний отступ. */
    margin-top: 24px;
    /* Использует тёмный фирменный фон. */
    background: var(--public-green);
    /* Делает текст контрастным. */
    color: #ffffff;
}

/* Выстраивает элементы подвала. */
.global-footer__row {
    /* Задаёт минимальную высоту. */
    min-height: 94px;
    /* Включает гибкую раскладку. */
    display: flex;
    /* Центрирует элементы по вертикали. */
    align-items: center;
    /* Равномерно распределяет элементы. */
    justify-content: space-between;
    /* Добавляет расстояние между элементами. */
    gap: 28px;
    /* Уменьшает служебный текст. */
    font-size: 13px;
}

/* Оформляет логотип в подвале. */
.global-footer__row img {
    /* Ограничивает ширину логотипа. */
    width: 190px;
    /* Создаёт светлую подложку логотипа. */
    background: #fffaf0;
    /* Добавляет внутренний отступ. */
    padding: 7px;
    /* Скругляет подложку. */
    border-radius: 6px;
}

/* Оформляет ссылки подвала. */
.global-footer a {
    /* Делает ссылки светлыми. */
    color: #ffffff;
    /* Добавляет аккуратное подчёркивание. */
    text-decoration: underline;
    /* Сдвигает подчёркивание от текста. */
    text-underline-offset: 3px;
}

/* Перестраивает общие элементы на планшетах. */
@media (max-width: 1120px) {
    /* Расширяет содержимое на средних экранах. */
    :root {
        /* Оставляет безопасные поля по краям. */
        --public-shell: 92vw;
    }

    /* Показывает мобильную кнопку меню. */
    .global-menu-button {
        /* Делает кнопку видимой. */
        display: block;
    }

    /* Превращает навигацию во всплывающую панель. */
    .global-nav {
        /* Скрывает панель до нажатия. */
        display: none;
        /* Позиционирует панель относительно окна. */
        position: absolute;
        /* Размещает панель под шапкой. */
        top: 98px;
        /* Выравнивает панель по правому полю. */
        right: 4vw;
        /* Выстраивает ссылки вертикально. */
        flex-direction: column;
        /* Выравнивает ссылки по левому краю. */
        align-items: flex-start;
        /* Задаёт удобную минимальную ширину. */
        min-width: 270px;
        /* Добавляет внутренние отступы. */
        padding: 24px;
        /* Создаёт светлый фон. */
        background: #fffaf0;
        /* Добавляет рамку. */
        border: 1px solid var(--public-line);
        /* Добавляет тень. */
        box-shadow: 0 16px 35px rgba(30, 38, 31, 0.18);
    }

    /* Показывает навигацию после нажатия. */
    .global-nav--open {
        /* Включает гибкую раскладку. */
        display: flex;
        z-index: 2;
    }

    /* Затемняет страницу за открытым меню и сохраняет закрытие кликом вне панели. */
    .global-header:has(.global-nav--open)::after {
        content: "";
        position: fixed;
        inset: 98px 0 0;
        z-index: 1;
        background: rgba(24, 30, 25, 0.42);
    }

    /* Keeps the language submenu in the menu flow so it moves later items down. */
    .language-menu {
        width: 100%;
    }

    .language-menu summary {
        width: 100%;
    }

    .global-nav > .language-menu > summary::after {
        display: none;
    }

    .language-menu__options {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 4px;
        padding: 4px 0 4px 25px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
}

/* Перестраивает общие элементы на телефонах. */
@media (max-width: 620px) {
    /* Расширяет контент почти до краёв телефона. */
    :root {
        /* Оставляет небольшие безопасные поля. */
        --public-shell: 94vw;
    }

    /* Уменьшает высоту шапки. */
    .global-header__row {
        /* Задаёт компактную высоту. */
        min-height: 76px;
    }

    /* Уменьшает логотип. */
    .global-brand img {
        /* Ограничивает ширину логотипа. */
        width: 168px;
    }

    /* Прижимает мобильное меню к шапке. */
    .global-nav {
        /* Учитывает компактную высоту шапки. */
        top: 76px;
    }

    .language-menu {
        width: 100%;
    }

    .language-menu summary {
        min-height: 44px;
        width: 100%;
    }

    .language-menu__options {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 4px;
        padding: 4px 0 4px 25px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .language-menu__options a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 8px 10px;
    }

    /* Складывает подвал в колонку. */
    .global-footer__row {
        /* Выстраивает элементы вертикально. */
        flex-direction: column;
        /* Добавляет вертикальные поля. */
        padding-block: 26px;
        /* Центрирует текст. */
        text-align: center;
    }
}

/* Prevents public pages from creating horizontal overflow. */
html,
body {
    /* Clips accidental horizontal overflow from decorative content. */
    overflow-x: clip;
    /* Keeps the page at least as wide as the viewport. */
    min-width: 320px;
}

/* Gives all public media a safe default size. */
body:not(.admin-page) img,
body:not(.admin-page) svg {
    /* Prevents media from exceeding its parent. */
    max-width: 100%;
}

/* Protects every direct layout child from grid overflow. */
main *,
.global-header *,
.global-footer * {
    /* Allows flex and grid children to shrink correctly. */
    min-width: 0;
}

/* Uses one shared content width on information pages. */
.info-page .shell,
.tenant-page .site-shell,
.owner-page .site-shell {
    /* Limits content to the shared desktop width. */
    width: var(--public-shell);
    /* Prevents an older rule from widening the block. */
    max-width: none;
    /* Centers the block. */
    margin-inline: auto;
}

/* Constrains the complete Investors layout like other pages. */
.investor-page main {
    /* Limits the entire page body to the shared width. */
    width: var(--public-shell);
    /* Centers all investor sections. */
    margin-inline: auto;
}

/* Ensures Investors sections never escape their parent. */
.investor-page main > section {
    /* Uses the full constrained parent width. */
    width: 100%;
    /* Prevents any wider legacy maximum. */
    max-width: 100%;
    /* Clips decorative backgrounds to rounded section edges. */
    overflow: hidden;
}

/* Makes nested Investors shells use their constrained section. */
.investor-page .shell {
    /* Uses the available section width instead of another viewport width. */
    width: 100%;
    /* Applies practical internal spacing. */
    padding-inline: clamp(16px, 3vw, 48px);
}

/* Separates constrained Investors sections visually. */
.investor-page .hero,
.investor-page .deliver,
.investor-page .projects,
.investor-page .how,
.investor-page .call {
    /* Adds a small gap between major blocks. */
    margin-top: 18px;
    /* Keeps watercolor backgrounds inside rounded boundaries. */
    border-radius: 14px;
}

/* Keeps information-page illustrations at a sensible scale. */
.info-page .story > img {
    /* Uses the complete column width. */
    width: 100%;
    /* Limits tall source images. */
    max-height: 520px;
    /* Crops the illustration without distortion. */
    object-fit: cover;
}

/* Normalizes icons inside information cards. */
.info-page .info-card > img,
.info-page .info-card div > img {
    /* Prevents source SVG dimensions from becoming enormous. */
    width: clamp(34px, 4vw, 56px);
    /* Matches the icon height to its width. */
    height: clamp(34px, 4vw, 56px);
    /* Preserves the icon artwork. */
    object-fit: contain;
}

/* Keeps blog cover images attached to their cards. */
.blog-page .post > img {
    /* Uses the card width. */
    width: 100%;
    /* Gives all covers a consistent height. */
    height: clamp(170px, 17vw, 240px);
    /* Crops covers without stretching. */
    object-fit: cover;
}

/* Prevents audience-page hero images from becoming viewport-sized. */
.tenant-page .hero,
.owner-page .hero {
    /* Uses a controlled responsive height. */
    height: clamp(260px, 31vw, 500px);
    /* Prevents minimum sizes from overriding the clamp. */
    min-height: 0;
}

/* Normalizes all audience-page functional icons. */
.tenant-page .round-icon img,
.owner-page .round-icon img,
.owner-page .steps article > img {
    /* Sets a controlled responsive icon width. */
    width: clamp(38px, 4vw, 62px);
    /* Sets a controlled responsive icon height. */
    height: clamp(38px, 4vw, 62px);
    /* Preserves icon proportions. */
    object-fit: contain;
}

/* Gives success messages a predictable dismiss animation. */
.toast,
.success-toast,
.success {
    /* Animates opacity and movement during removal. */
    transition: opacity 240ms ease, transform 240ms ease;
}

/* Hides a success message after its timeout. */
.flash-message--closing {
    /* Fades the message out. */
    opacity: 0 !important;
    /* Moves the message slightly upward. */
    transform: none;
    /* Prevents interaction while disappearing. */
    pointer-events: none;
}

/* Adapts all public grids to tablets. */
@media (max-width: 900px) {
    /* Makes Investors use the standard tablet width. */
    .investor-page main {
        /* Leaves safe tablet margins. */
        width: 92vw;
    }

    /* Uses two columns for investor services. */
    .investor-page .deliver-grid,
    .investor-page .steps {
        /* Prevents six compressed columns. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Hides legacy arrows that depend on a six-column layout. */
    .investor-page .steps article::after {
        /* Removes arrows on the wrapped grid. */
        display: none;
    }

    /* Uses two columns for general card groups. */
    .info-page .card-grid {
        /* Creates balanced tablet cards. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Prevents audience cards from forcing desktop widths. */
    .tenant-page .service-grid,
    .owner-page .service-grid {
        /* Uses one readable card per row. */
        grid-template-columns: 1fr;
    }
}

/* Adapts every public page to smartphones. */
@media (max-width: 620px) {
    /* Expands common content safely on phones. */
    .info-page .shell,
    .tenant-page .site-shell,
    .owner-page .site-shell,
    .investor-page main,
    .home-page .page-container {
        /* Leaves a three-percent margin on each side. */
        width: 94vw;
    }

    /* Prevents oversized mobile headings. */
    .info-page .hero-content h1,
    .tenant-page .hero-copy h1,
    .owner-page .hero-copy h1,
    .investor-page .hero h1 {
        /* Uses a phone-friendly fluid heading. */
        font-size: clamp(32px, 10vw, 46px);
        /* Keeps multi-line titles compact. */
        line-height: 1.05;
    }

    /* Uses one card per row everywhere on phones. */
    .info-page .card-grid,
    .info-page .story,
    .tenant-page .document-grid,
    .investor-page .deliver-grid,
    .investor-page .steps {
        /* Creates a single readable column. */
        grid-template-columns: 1fr;
    }

    /* Removes desktop minimum heights from audience cards. */
    .tenant-page .feature-card,
    .owner-page .feature-card {
        /* Lets content determine card height. */
        min-height: 480px;
    }

    /* Reduces padding inside audience cards. */
    .tenant-page .card-content,
    .owner-page .card-content {
        /* Uses compact phone spacing. */
        padding: 28px 20px;
    }

    /* Makes Investors project cards occupy one full row. */
    .investor-page .project-card {
        /* Prevents partial next cards from breaking width. */
        min-width: 100%;
    }

    /* Stacks the Investors call-to-action. */
    .investor-page .call .shell {
        /* Places text and button vertically. */
        flex-direction: column;
        /* Aligns content to the start. */
        align-items: flex-start;
        /* Adds space between text and button. */
        gap: 16px;
    }

    /* Makes modal windows fit phone screens. */
    .contact-modal,
    .investor-page .modal-box {
        /* Leaves safe margins around dialogs. */
        width: calc(100vw - 28px);
        /* Prevents dialogs from exceeding screen height. */
        max-height: calc(100vh - 28px);
        /* Allows internal scrolling. */
        overflow-y: auto;
    }
}


/* Keeps all hero copy above its background photograph. */
.tenant-page .hero-copy,
.owner-page .hero-copy {
    /* Creates a dependable foreground layer. */
    z-index: 2;
}

/* Keeps audience card controls and copy above decorative backgrounds. */
.tenant-page .card-content,
.owner-page .card-content {
    /* Creates a foreground stacking context. */
    position: relative;
    /* Places the complete content layer above its image. */
    z-index: 2;
}

/* Applies final media safeguards for narrow phones. */
@media (max-width: 620px) {
    /* Prevents the About illustration from filling a complete phone screen. */
    .about-page .story > img {
        /* Gives the illustration a compact landscape crop. */
        height: 220px;
        /* Overrides the larger desktop cap. */
        max-height: 220px;
    }
}



/* Preserves original colors of every public photograph. */
body:not(.admin-page) img:not([src$=".svg"]),
body:not(.admin-page) picture img {
    /* Removes color filters from photographs. */
    filter: none !important;
    /* Prevents photographs from blending with page backgrounds. */
    mix-blend-mode: normal !important;
    /* Displays photographs at original opacity. */
    opacity: 1 !important;
    /* Removes gradient masks that fade photographs. */
    mask-image: none !important;
    /* Removes WebKit gradient masks from photographs. */
    -webkit-mask-image: none !important;
}

/* Improves public layouts on compact tablets and phones. */
@media (max-width: 768px) {
    /* Uses safe edge spacing for every public content shell. */
    .global-shell,
    .info-page .shell,
    .tenant-page .site-shell,
    .owner-page .site-shell,
    .investor-page main,
    .home-page .page-container {
        /* Leaves sixteen pixels on each side. */
        width: calc(100vw - 32px);
        /* Prevents legacy widths from taking precedence. */
        max-width: calc(100vw - 32px);
    }

    /* Prevents translated headings from exceeding narrow screens. */
    h1,
    h2,
    h3 {
        /* Breaks unusually long translated words safely. */
        overflow-wrap: anywhere;
    }

    /* Lets translated button labels wrap safely. */
    a,
    button {
        /* Allows multi-word labels to use a second line. */
        white-space: normal;
    }

    /* Stacks information layouts into a mobile flow. */
    .info-page .story,
    .info-page .card-grid {
        /* Uses one full-width item per row. */
        grid-template-columns: minmax(0, 1fr);
    }

    /* Keeps audience navigation labels compact. */
    .tenant-page .audience-nav a,
    .owner-page .audience-nav a {
        /* Uses a small but readable label. */
        font-size: clamp(9px, 2.6vw, 12px);
        /* Centers wrapped labels below icons. */
        text-align: center;
    }

    /* Makes audience cards fit translated content. */
    .tenant-page .feature-card,
    .owner-page .feature-card {
        /* Removes fixed desktop card height. */
        min-height: 0;
        /* Lets content determine card height. */
        height: auto;
    }

    /* Gives card content predictable mobile space. */
    .tenant-page .card-content,
    .owner-page .card-content {
        /* Keeps text clear of card edges. */
        padding: 28px 20px;
        /* Preserves enough room for decorative backgrounds. */
        min-height: 480px;
    }

    /* Prevents contact rows from overflowing. */
    .feature-card address span {
        /* Aligns icons with wrapped text. */
        align-items: flex-start;
        /* Allows long values to wrap. */
        overflow-wrap: anywhere;
    }

    /* Turns investor groups into a vertical phone layout. */
    .investor-page .deliver-grid,
    .investor-page .steps {
        /* Places one item on each row. */
        grid-template-columns: minmax(0, 1fr);
    }

    /* Keeps investment cards inside the viewport. */
    .investor-page .project-card {
        /* Uses the available carousel width. */
        width: 100%;
        /* Cancels desktop minimum widths. */
        min-width: 100%;
        /* Prevents content from forcing extra width. */
        max-width: 100%;
    }
}

/* Handles the smallest supported phone screens. */
@media (max-width: 430px) {
    /* Uses twelve-pixel page margins. */
    .global-shell,
    .info-page .shell,
    .tenant-page .site-shell,
    .owner-page .site-shell,
    .investor-page main,
    .home-page .page-container {
        /* Maximizes useful width safely. */
        width: calc(100vw - 24px);
        /* Matches the mobile width constraint. */
        max-width: calc(100vw - 24px);
    }

    /* Keeps the brand and menu on one row. */
    .global-brand img {
        /* Scales the logo for 320-pixel screens. */
        width: clamp(138px, 44vw, 168px);
    }

    /* Keeps audience copy in the empty hero area. */
    .tenant-page .hero-copy,
    .owner-page .hero-copy {
        /* Uses a controlled portion of hero width. */
        max-width: 62%;
        /* Moves copy away from the edge. */
        left: 5%;
    }

    /* Reduces overly tall section spacing. */
    .info-page .section {
        /* Uses compact vertical rhythm. */
        padding-block: clamp(32px, 10vw, 52px);
    }

    /* Gives form controls a comfortable touch size. */
    input,
    textarea,
    select,
    button {
        /* Prevents mobile zoom and keeps text readable. */
        font-size: 16px;
    }
}


/* Rebuilds the home page as a readable single-column phone layout. */
@media (max-width: 620px) {
    /* Matches the three-column audience navigation used on inner pages. */
    .home-page .quick-nav-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0 !important;
    }

    .home-page .quick-button {
        justify-content: center !important;
        padding: 9px 4px !important;
    }

    .home-page .quick-content {
        flex-direction: column !important;
        justify-content: center !important;
        gap: 5px !important;
        text-align: center !important;
    }

    .home-page .quick-text h3 {
        display: block !important;
        text-align: center !important;
        word-break: normal !important;
        width: auto !important;
        font-size: clamp(10px, 3vw, 13px) !important;
    }

    .home-page .quick-text p,
    .home-page .quick-button > .arrow-svg {
        display: none !important;
    }

    /* Stacks the three primary home cards. */
    .home-page .main-cards-row {
        /* Uses one complete card per row. */
        grid-template-columns: minmax(0, 1fr) !important;
        /* Gives cards visible separation. */
        gap: 18px !important;
    }

    /* Keeps every home card in normal document flow. */
    .home-page .main-card {
        /* Cancels accidental absolute positioning from legacy rules. */
        position: relative !important;
        /* Uses the complete mobile width. */
        width: 100% !important;
        /* Prevents oversized cards. */
        max-width: 100% !important;
    }

    /* Stacks the home page benefit cards. */
    .home-page .features-row {
        /* Uses one benefit per row. */
        grid-template-columns: minmax(0, 1fr) !important;
        /* Separates benefits vertically. */
        gap: 12px !important;
    }

    /* Removes separators intended for horizontal layouts. */
    .home-page .feature-card::after {
        /* Hides obsolete vertical separator lines. */
        display: none !important;
    }
}

/* Separates audience hero copy from photographs on phones. */
@media (max-width: 620px) {
    /* Converts tenant and owner heroes into a vertical image-and-copy block. */
    .tenant-page .hero,
    .owner-page .hero {
        /* Uses ordinary vertical flow. */
        display: flex;
        /* Places the image before its copy. */
        flex-direction: column;
        /* Lets content determine total height. */
        height: auto;
        /* Shows all translated text. */
        overflow: visible;
        /* Uses the page background behind copy. */
        background: transparent;
    }

    /* Places audience hero copy below the photograph. */
    .tenant-page .hero-copy,
    .owner-page .hero-copy {
        /* Returns copy to ordinary flow. */
        position: relative;
        /* Cancels desktop offsets. */
        inset: auto;
        /* Uses the complete text width. */
        width: 100%;
        /* Cancels narrow overlay constraints. */
        max-width: none;
        /* Adds readable spacing around translated text. */
        padding: 22px 18px 10px;
    }

    /* Keeps audience hero headings readable. */
    .tenant-page .hero-copy h1,
    .owner-page .hero-copy h1 {
        /* Uses a balanced mobile title size. */
        font-size: clamp(34px, 10vw, 46px);
        /* Keeps multi-line titles compact. */
        line-height: 1.08;
        /* Adds space before the description. */
        margin-bottom: 14px;
    }

    /* Creates a separate photograph zone in the Investors hero. */
    .investor-page .hero {
        /* Scales the background photograph into a bounded top frame. */
        background-size: 100% 230px;
        /* Keeps the complete photograph at the top. */
        background-position: center top;
        /* Prevents the photograph from repeating behind text. */
        background-repeat: no-repeat;
        /* Lets translated content determine the final height. */
        height: auto;
        /* Reserves space for the photograph before text starts. */
        padding-top: 252px;
        /* Adds space beneath hero controls. */
        padding-bottom: 28px;
    }

    /* Gives Investors hero copy a plain readable background zone. */
    .investor-page .hero .shell {
        /* Uses the page paper color behind all copy. */
        background: var(--public-paper);
        /* Keeps text clear of the section edges. */
        padding: 22px 16px;
        /* Rounds the text panel. */
        border-radius: 12px;
    }

    /* Keeps Investors title proportional on phones. */
    .investor-page .hero h1 {
        /* Uses a readable translated title size. */
        font-size: clamp(34px, 10vw, 44px);
        /* Prevents loose multi-line spacing. */
        line-height: 1.08;
    }
}


/* Makes the Investors audience navigation identical to the audience pages. */
.investor-page .investor-audience-nav {
    width: 100%;
    margin-inline: auto;
    height: 91px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--public-line);
}

/* Aligns each Investors audience link like the Tenants navigation. */
.investor-page .investor-audience-nav a {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0;
    border-bottom: 0;
    text-transform: uppercase;
    text-decoration: none;
    font-family: Lora, serif;
    font-size: clamp(13px, 1.25vw, 20px);
    font-weight: 700;
}

/* Draws the separators used by the other audience pages. */
.investor-page .investor-audience-nav a:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    width: 1px;
    height: 38%;
    background: var(--public-line);
}

/* Uses the same controlled navigation icon size. */
.investor-page .investor-audience-nav img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* Colors the tenant navigation option. */
.investor-page .investor-audience-nav .tenant {
    color: #2b78a6;
}

/* Colors the homeowner navigation option. */
.investor-page .investor-audience-nav .owner {
    color: #357554;
}

/* Colors the investor navigation option. */
.investor-page .investor-audience-nav .investor {
    color: #8b6ba0;
}

/* Draws the same active marker used on the audience pages. */
.investor-page .investor-audience-nav .active::before {
    content: "";
    position: absolute;
    bottom: -1px;
    width: 74%;
    height: 3px;
    background: currentColor;
}

/* Adapts the Investors audience navigation on phones. */
@media (max-width: 620px) {
    .investor-page .investor-audience-nav a {
        flex-direction: column;
        gap: 5px;
        font-size: clamp(9px, 2.6vw, 12px);
        text-align: center;
    }

}


/* Applies the shared blue identity to Tenant headings and controls. */
.tenant-page h1,
.tenant-page h2,
.tenant-page h3 {
    color: #2b78a6;
}

/* Preserves the established emergency warning palette. */
.tenant-page .emergency-card h2 {
    color: #a51d29;
}

.tenant-page .tenant-hero .hero-copy i,
.tenant-page .feature-card:not(.emergency-card) .card-content > i {
    color: #2b78a6;
}

.tenant-page .outline-button,
.tenant-page .document-grid a {
    color: #2b78a6;
    border-color: currentColor;
    background: transparent;
}

/* Keeps the original layered artwork in the two Tenant service cards. */
.tenant-page .portal-card .round-icon-bg,
.tenant-page .contact-card .round-icon-bg,
.tenant-page .portal-card .round-icon-symbol,
.tenant-page .contact-card .round-icon-symbol {
    filter: none !important;
}

/* Recolors only the Tenant document artwork. */
.tenant-page .documents h2 img {
    filter: brightness(0) saturate(100%) invert(44%) sepia(61%) saturate(767%) hue-rotate(158deg) brightness(91%) contrast(90%) !important;
}

/* Reserves the same status-line height beneath the Contact action. */
@media (min-width: 761px) {
    .tenant-page .tenant-services .contact-card .card-content::after {
        content: "";
        display: block;
        flex: 0 0 16px;
        margin-top: 14px;
    }
}


/* Aligns Tenant document actions and unavailable states to one baseline. */
.tenant-page .document-grid a,
.tenant-page .document-grid .document-unavailable {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
}

/* Matches both Homeowners service actions and their bottom alignment. */
.owner-page .owner-services .outline-button {
    color: #8b6ba0;
    border-color: currentColor;
    background: transparent;
}

@media (min-width: 761px) {
    .owner-page .owner-services .owner-contact .card-content::after {
        content: "";
        display: block;
        flex: 0 0 16px;
        margin-top: 14px;
    }

    .owner-page .how-it-works .steps article {
        grid-template-rows: 76px 2.4em 22px auto;
    }

    .owner-page .how-it-works .steps > em {
        margin-top: 31px;
    }
}

/* Gives the partnership block a darker warm-paper surface. */
.owner-page .partnership {
    background: rgba(226, 215, 194, .78);
}


/* Applies the shared lighter green identity to Homeowners content. */
.owner-page h1,
.owner-page h2,
.owner-page h3 {
    color: #357554;
}

.owner-page .owner-hero .hero-copy i,
.owner-page .feature-card .card-content > i {
    color: #357554;
}

.owner-page .owner-services .outline-button {
    color: #357554;
}

.owner-page .contact-modal .primary-button {
    background: #357554;
}

/* Uses the requested warm cream behind the partnership logos. */
.owner-page .partnership {
    background: #f9f1e1;
}


/* Displays the shared contact page as a large overlay on every public page. */
.global-contact-modal {
    width: min(1120px, calc(100vw - 40px));
    max-width: none;
    max-height: calc(100dvh - 40px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #fffaf1;
    color: #26332d;
    box-shadow: 0 24px 80px rgba(22, 32, 27, .32);
    overflow: auto;
}

.global-contact-modal::backdrop {
    background: rgba(24, 31, 28, .62);
    backdrop-filter: blur(2px);
}

.global-contact-modal__layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
    min-height: min(760px, calc(100dvh - 40px));
}

.global-contact-modal__close {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 20px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(38, 51, 45, .2);
    border-radius: 50%;
    background: rgba(255, 250, 241, .9);
    color: #26332d;
    font: 400 30px/1 serif;
    cursor: pointer;
}

.global-contact-modal__form-panel,
.global-contact-modal__details {
    padding: clamp(30px, 4vw, 54px);
}

.global-contact-modal__form-panel h2 {
    margin: 0 0 10px;
    color: #357554;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1;
}

.global-contact-modal__form-panel > p {
    max-width: 590px;
    margin: 0 0 28px;
    font-size: 17px;
    line-height: 1.55;
}

.global-contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.global-contact-form > label {
    display: grid;
    gap: 7px;
    color: #26332d;
    font-size: 14px;
    font-weight: 700;
}

.global-contact-form > label:nth-of-type(5),
.global-contact-form__consent,
.global-contact-form__actions,
.global-contact-form__status {
    grid-column: 1 / -1;
}

.global-contact-form input,
.global-contact-form select,
.global-contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #c8c3b7;
    border-radius: 7px;
    background: rgba(255, 255, 255, .72);
    color: #26332d;
    font: inherit;
    font-weight: 400;
    padding: 12px 13px;
}

.global-contact-form textarea {
    min-height: 122px;
    resize: vertical;
}

.global-contact-form input:focus,
.global-contact-form select:focus,
.global-contact-form textarea:focus {
    outline: 2px solid rgba(53, 117, 84, .24);
    border-color: #357554;
}

.global-contact-form .global-contact-form__consent {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 9px;
    font-weight: 400;
}

.global-contact-form__consent input {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.global-contact-form__actions {
    display: flex;
    gap: 12px;
}

.global-contact-form__actions button {
    min-width: 150px;
    min-height: 46px;
    padding: 10px 22px;
    border: 1px solid #357554;
    border-radius: 999px;
    background: #357554;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.global-contact-form__actions button[data-contact-close] {
    background: transparent;
    color: #357554;
}

.global-contact-form__status {
    min-height: 22px;
    margin: 0;
    color: #357554;
    font-weight: 700;
}

.global-contact-form__status.is-error {
    color: #a51d29;
}

.global-contact-modal__details {
    background: #f9f1e1;
}

.global-contact-modal__details > img {
    width: 100%;
    height: clamp(190px, 27vh, 270px);
    margin-bottom: 24px;
    border-radius: 10px;
    object-fit: cover;
}

.global-contact-modal__details h3 {
    margin: 0 0 22px;
    color: #357554;
    font-size: clamp(24px, 2.2vw, 32px);
}

.global-contact-modal__contact-list {
    display: grid;
    gap: 19px;
}

.global-contact-modal__contact-list > span {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: start;
}

.global-contact-modal__contact-list > span > img {
    width: 30px;
    height: 30px;
}

.global-contact-modal__contact-list > span > span {
    display: grid;
    gap: 3px;
}

.global-contact-modal__contact-list a {
    color: inherit;
    text-decoration: none;
}

.global-contact-modal__contact-list a:hover {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .global-contact-modal {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 12px;
    }

    .global-contact-modal__layout {
        grid-template-columns: 1fr;
        min-height: calc(100dvh - 16px);
    }

    .global-contact-modal__form-panel,
    .global-contact-modal__details {
        padding: 30px 20px;
    }

    .global-contact-modal__close {
        top: 12px;
        right: 12px;
    }

    .global-contact-form {
        grid-template-columns: 1fr;
    }

    .global-contact-form > label,
    .global-contact-form__consent,
    .global-contact-form__actions,
    .global-contact-form__status {
        grid-column: 1;
    }

    .global-contact-form__actions {
        flex-wrap: wrap;
    }

    .global-contact-form__actions button {
        flex: 1 1 140px;
    }
}


/* Requested cross-page visual refinements. */
.global-brand {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.5vw, 24px);
}

.global-brand__partner {
    display: none !important;
}

.tenant-page .global-brand__partner,
.owner-page .global-brand__partner {
    display: block !important;
    width: clamp(145px, 14vw, 215px);
    max-height: 66px;
    object-fit: contain;
}

/* Softens watercolor circle edges without blurring the foreground symbols. */
.tenant-page .round-icon-bg,
.owner-page .round-icon-bg {
    filter: blur(.65px);
    opacity: .94;
}

.home-page .floating-badge-circle {
    border-color: transparent;
    box-shadow: 0 0 10px 4px rgba(246, 240, 227, .78);
    text-decoration: none;
    transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
}

.home-page .floating-badge-circle .badge-svg {
    transition: color .3s ease;
}

.home-page .item-tenants .floating-badge-circle {
    color: var(--color-tenants);
}

.home-page .item-homeowners .floating-badge-circle {
    color: var(--color-homeowners);
}

.home-page .item-investors .floating-badge-circle {
    color: var(--color-investors);
}

.home-page .item-tenants:hover .floating-badge-circle,
.home-page .item-tenants .floating-badge-circle:focus-visible {
    background-color: var(--color-tenants);
}

.home-page .item-homeowners:hover .floating-badge-circle,
.home-page .item-homeowners .floating-badge-circle:focus-visible {
    background-color: var(--color-homeowners);
}

.home-page .item-investors:hover .floating-badge-circle,
.home-page .item-investors .floating-badge-circle:focus-visible {
    background-color: var(--color-investors);
}

.home-page .main-card:hover .floating-badge-circle .badge-svg,
.home-page .floating-badge-circle:focus-visible .badge-svg {
    color: var(--bg-creamy-fallback);
}

.home-page .floating-badge-circle:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
    transform: scale(1.05) translateY(-5px);
}

.home-page .main-card .action-btn {
    transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}

.home-page .main-card .action-btn .btn-arrow-svg {
    transition: color .3s ease;
}

.home-page .item-tenants:hover .action-btn,
.home-page .item-tenants .action-btn:focus-visible {
    color: var(--bg-creamy-fallback);
    background-color: var(--color-tenants);
}

.home-page .item-homeowners:hover .action-btn,
.home-page .item-homeowners .action-btn:focus-visible {
    color: var(--bg-creamy-fallback);
    background-color: var(--color-homeowners);
}

.home-page .item-investors:hover .action-btn,
.home-page .item-investors .action-btn:focus-visible {
    color: var(--bg-creamy-fallback);
    background-color: var(--color-investors);
}

.home-page .main-card:hover .action-btn .btn-arrow-svg,
.home-page .action-btn:focus-visible .btn-arrow-svg {
    color: var(--bg-creamy-fallback);
}

.investor-page .deliver-grid article,
.investor-page .how .steps article {
    background-color: rgba(246, 240, 227, .18);
    background-blend-mode: soft-light;
}

/* Mirrors Contact Us: Tenant Portal copy occupies the illustration's right side. */
@media (min-width: 761px) {
    .tenant-page .portal-card .card-content {
        width: 64%;
        margin-left: 36%;
        padding-inline: clamp(18px, 3vw, 42px);
    }
}

/* Keeps all document cards visibly actionable; missing PDFs retain their safe status. */
.tenant-page .document-grid article {
    cursor: pointer;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.tenant-page .document-grid article:hover,
.tenant-page .document-grid article:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 15px 32px rgba(45, 61, 37, .14);
}

.tenant-page .tenant-partnership,
.owner-page .partnership {
    background: #f9f1e1;
}

.tenant-page .partnership img,
.owner-page .partnership img {
    width: auto;
    height: clamp(74px, 7vw, 104px);
    max-width: 45%;
    object-fit: contain;
}

.tenant-page .partnership img:last-child,
.owner-page .partnership img:last-child {
    width: clamp(205px, 25vw, 330px);
    height: auto;
}

/* Places independent berry decorations on the footer edge. */
.home-footer-berries {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 0;
    pointer-events: none;
}

.home-footer-berries img {
    position: absolute;
    bottom: -34px;
    width: clamp(105px, 10vw, 160px);
    height: auto;
}

.home-footer-berries img:first-child {
    left: clamp(10px, 1.8vw, 28px);
}

.home-footer-berries img:last-child {
    right: clamp(10px, 1.8vw, 28px);
}

/* Matches Investors hero typography to the Tenant/Homeowner hero scale. */
.investor-page .hero h1 {
    font-size: clamp(40px, 4.25vw, 67px);
    line-height: 1.02;
}

.investor-page .hero strong {
    max-width: 520px;
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.55;
}

.investor-page .hero i {
    width: 78px;
    height: 3px;
    margin-block: 18px;
}

/* Uses warm paper instead of green in the projects region and action strip. */
.investor-page .projects {
    background: #eee5d5;
    border-color: rgba(111, 91, 65, .16);
}

.investor-page .project-card,
.investor-page .project-body,
.investor-page .project-body footer,
.investor-page .project-body footer button,
.investor-page .project-body footer a {
    background: #fffdf8;
}

.investor-page .project-body footer {
    margin-inline: -18px;
    margin-bottom: -18px;
    padding: 16px 18px 18px;
    border-radius: 0 0 12px 12px;
}

/* Doubles the visual height of the final investment call-to-action. */
.investor-page .call {
    min-height: clamp(380px, 42vw, 620px);
    display: flex;
    align-items: center;
}

/* Lifts How It Works artwork back into alignment. */
.investor-page .how .steps article {
    transform: translateY(-25px);
    background-position: center 1px;
}

.investor-page .how .steps article:not(:last-child)::after {
    top: 30px;
}

@media (max-width: 1120px) {
    .tenant-page .global-brand__partner,
    .owner-page .global-brand__partner {
        width: clamp(112px, 20vw, 165px);
    }
}

@media (max-width: 620px) {
    .home-footer-berries {
        display: none;
    }

    .tenant-page .global-brand__partner,
    .owner-page .global-brand__partner {
        width: 105px;
    }

    .home-footer-berries img {
        bottom: -18px;
        width: clamp(74px, 24vw, 105px);
    }

    .investor-page .call {
        min-height: 390px;
    }
}


/* Follow-up refinements requested for decorative assets and Investors. */
.home-footer-berries img {
    bottom: -12px;
}

.home-footer-berries img:first-child {
    left: 3px;
}

.home-footer-berries img:last-child {
    right: 3px;
}

/* Enlarges only the two logos inside the lower partnership blocks. */
.tenant-page .partnership img,
.owner-page .partnership img,
.tenant-page .partnership img:last-child,
.owner-page .partnership img:last-child {
    width: auto;
    height: clamp(112px, 10.5vw, 156px);
    max-width: 47%;
    object-fit: contain;
}

/* Makes the Investors hero follow the same geometry and typography as audience heroes. */
.investor-page .hero {
    height: clamp(310px, 32vw, 570px);
    position: relative;
    overflow: hidden;
    background-position: center;
}

.investor-page .hero .hero-content {
    position: relative;
    height: 100%;
    padding-top: clamp(45px, 6.4vw, 104px);
}

.investor-page .hero h1 {
    margin: 0 0 28px;
    color: #8b6ba0;
    font: 700 clamp(47px, 5.4vw, 94px)/1 Lora, serif;
}

.investor-page .hero strong {
    display: block;
    max-width: 520px;
    margin: 0;
    font: 400 clamp(15px, 1.35vw, 23px)/1.65 'DM Sans', Arial, sans-serif;
}

.investor-page .hero i {
    display: block;
    width: 62px;
    height: 3px;
    margin-top: 24px;
    background: #8b6ba0;
}

.investor-page .hero .hero-content > div {
    position: absolute;
    left: 0;
    bottom: clamp(22px, 3vw, 46px);
    margin: 0;
}

/* Replaces the dark View Photos pill with a warm light-paper surface. */
.investor-page .project-image button {
    background: #f7efdf;
    color: #6f5480;
    border: 1px solid rgba(139, 107, 160, .35);
    box-shadow: 0 4px 12px rgba(44, 34, 28, .10);
}

/* Keeps the replacement Investors symbol aligned with its neighboring steps. */
.investor-page .how .steps article:nth-child(3) > img {
    filter: brightness(0) saturate(100%) invert(50%) sepia(12%) saturate(1257%) hue-rotate(235deg) brightness(90%) contrast(85%);
}

/* Gives the key artwork the requested extra visual weight. */
.investor-page .how .steps article:nth-child(6) > img {
    width: 86px;
    height: 86px;
    margin-top: -14px;
    margin-bottom: 3px;
}

/* Reduces the previously enlarged CTA to one third of its current height. */
.investor-page .call {
    min-height: clamp(127px, 14vw, 207px);
}

@media (max-width: 620px) {
    .home-footer-berries img {
        bottom: -5px;
    }

    .tenant-page .partnership img,
    .owner-page .partnership img,
    .tenant-page .partnership img:last-child,
    .owner-page .partnership img:last-child {
        height: clamp(76px, 22vw, 108px);
    }

    .investor-page .hero {
        height: auto;
        min-height: 500px;
        background-position: 62% center;
    }

    .investor-page .hero .hero-content {
        min-height: 500px;
        padding-top: 42px;
        padding-bottom: 112px;
    }

    .investor-page .hero h1 {
        font-size: 45px;
    }

    .investor-page .hero strong {
        max-width: 260px;
        font-size: 15px;
    }

    .investor-page .hero .hero-content > div {
        bottom: 30px;
        flex-wrap: wrap;
    }

    .investor-page .call {
        min-height: 0;
        padding: 18px 0 78px;
        background-size: auto 105px;
        background-position: left bottom;
    }

    .investor-page .call .shell {
        align-items: flex-start;
        gap: 14px;
        padding-inline: 16px;
    }

    .investor-page .call h2 {
        max-width: 310px;
        font-size: clamp(21px, 6.2vw, 25px);
        line-height: 1.08;
    }

    .investor-page .call p {
        max-width: 320px;
        font-size: 14px;
        line-height: 1.35;
    }

    .investor-page .call .button {
        min-height: 44px;
        width: auto;
        padding: 10px 16px;
        font-size: 13px;
    }
}


/* Aligns the partner header mark with the neighboring Berry Homes logo. */
.tenant-page .global-brand__partner,
.owner-page .global-brand__partner {
    width: clamp(180px, 18vw, 280px);
    max-height: none;
}

@media (max-width: 600px) {
    .tenant-page .global-brand img,
    .owner-page .global-brand img {
        width: clamp(100px, 34vw, 140px);
    }
}

/* Gives the Investors hero controls equal left and bottom insets. */
.investor-page .hero .hero-content > div {
    left: clamp(22px, 3vw, 46px);
    bottom: clamp(22px, 3vw, 46px);
}


/* Links every visible MBG mark to its partner page without changing logo sizing. */
.global-brand__partner-link {
    display: none;
}

.tenant-page .global-brand__partner-link,
.owner-page .global-brand__partner-link {
    display: block;
}

.tenant-page .partnership a,
.owner-page .partnership a,
.about-page .about-partner a {
    color: inherit;
}

.tenant-page .partnership > div > a,
.owner-page .partnership > div > a,
.about-page .about-partner > div > a {
    display: contents;
}

.tenant-page .partnership p b,
.owner-page .partnership p b {
    display: inline-block;
    margin-top: 8px;
    color: #075a2d;
}

.tenant-page .partnership .partnership-office,
.owner-page .partnership .partnership-office {
    display: inline-block;
    margin-top: 6px;
    color: inherit;
    font-size: .76em;
    font-weight: 400;
    line-height: 1.45;
}


/* Uses MBG branding only on the Max Business Group page. */
.global-footer__mbg-logo {
    display: none;
}

.mbg-page .global-brand > a:first-child,
.mbg-page .global-footer__berry-logo {
    display: none;
}

.mbg-page .global-brand__partner-link,
.mbg-page .global-footer__mbg-logo {
    display: block;
}

.mbg-page .global-brand__partner {
    display: block !important;
    width: clamp(180px, 18vw, 280px);
}

@media (max-width: 600px) {
    .mbg-page .global-brand__partner {
        width: clamp(138px, 44vw, 168px);
    }
}

.global-contact-modal__success {
    display: none;
}

.global-contact-modal.is-success .global-contact-modal__layout {
    min-height: min(620px, calc(100dvh - 48px));
    background: #557260;
}

.global-contact-modal.is-success .global-contact-modal__form-panel,
.global-contact-modal.is-success .global-contact-modal__details {
    display: none;
}

.global-contact-modal.is-success .global-contact-modal__success {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: clamp(40px, 8vw, 100px);
    color: #fffaf0;
    text-align: center;
}

.global-contact-modal__success p {
    max-width: 720px;
    margin: 0;
    font: 600 clamp(28px, 4vw, 52px)/1.25 Lora, Georgia, serif;
}

.global-contact-modal.is-success .global-contact-modal__close {
    color: #fffaf0;
    border-color: rgba(255, 250, 240, .55);
    background: transparent;
}

.privacy-consent {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 13px;
    line-height: 1.45;
}

.privacy-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px !important;
    height: 17px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
}

.privacy-consent a,
.global-footer a[href="/privacy-policy"],
.global-footer a[href="/terms-of-use"] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Blends audience-card watercolor icon backplates into their surrounding paint. */
.tenant-page .feature-card .round-icon-bg,
.owner-page .feature-card .round-icon-bg {
    filter: none !important;
    opacity: 1;
    -webkit-mask-image: radial-gradient(circle, #000 0 72%, rgba(0, 0, 0, .82) 80%, transparent 100%);
    mask-image: radial-gradient(circle, #000 0 72%, rgba(0, 0, 0, .82) 80%, transparent 100%);
}


/* Keeps the newly assigned Contact action icon compact. */
.global-contact-form__actions button:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.global-contact-form__actions button:first-child img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* Prevents page-level horizontal overflow while preserving carousel scrolling. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.global-contact-modal__layout,
.global-contact-modal__form-panel,
.global-contact-modal__details,
.global-contact-form,
.global-contact-form > * {
    min-width: 0;
}

@media (max-width: 760px) {
    .global-contact-modal {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .global-contact-modal__layout {
        min-height: 0;
    }

    .global-contact-modal__close {
        position: sticky;
        top: 8px;
        right: auto;
        left: auto;
        display: block;
        float: none;
        margin: 8px 8px -50px 0;
        margin-left: auto;
    }

    .global-contact-form input,
    .global-contact-form select,
    .global-contact-form textarea,
    .global-contact-form__actions button {
        min-height: 44px;
    }

    .global-contact-form__actions button {
        flex-basis: 100%;
    }

    .global-contact-modal__contact-list > span > span,
    .global-contact-modal__contact-list a {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .investor-page .hero {
        min-height: 0;
        aspect-ratio: auto;
        padding-top: calc(clamp(210px, 62vw, 270px) + 22px);
        padding-bottom: 28px;
        background-position: 72% top;
        background-size: auto clamp(210px, 62vw, 270px);
        background-repeat: no-repeat;
    }

    .investor-page .hero .hero-content {
        position: relative;
        height: auto;
        min-height: 0;
        padding: 22px 16px;
        background: var(--public-paper);
        border-radius: 12px;
    }

    .investor-page .hero::before {
        display: none;
    }

    .investor-page .hero strong {
        max-width: none;
    }

    .investor-page .hero .hero-content > div {
        position: static;
        margin-top: 24px;
        flex-wrap: wrap;
    }
}

/* Final phone navigation remains readable instead of squeezing three labels into 320px. */
@media (max-width: 620px) {
    .home-page .quick-nav-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .home-page .quick-button {
        min-height: 64px;
        justify-content: space-between !important;
        padding: 10px 14px !important;
    }

    .home-page .quick-content {
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        text-align: left !important;
    }

    .home-page .quick-text h3 {
        font-size: 17px !important;
        text-align: left !important;
    }

    .home-page .quick-text p {
        display: block !important;
        font-size: 14px !important;
    }

    .home-page .quick-button > .arrow-svg {
        display: block !important;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
    }
}

.home-page .page-container,
.investor-page main,
.investor-page .shell,
.mbg-page .mbg-shell {
    width: var(--public-shell);
}

/* Distributes spare height only on portrait tablets without resizing the content. */
@media (min-width: 621px) and (max-width: 1120px) and (orientation: portrait) {
    .home-page .page-container {
        display: grid;
        grid-template-rows: auto auto auto;
        align-content: space-between;
    }

}

/* Keeps all three home-page actions on the same baseline at every card width. */
.home-page .card-content-area {
    flex: 1 1 auto;
}

.home-page .main-card .action-btn {
    margin-top: auto;
}

/* Anchors the detached berry compositions to the footer edge on non-phone layouts. */
@media (min-width: 621px) {
    .home-footer-berries img {
        bottom: -24px;
        width: clamp(130px, 12vw, 185px);
    }

    .home-footer-berries img:first-child {
        left: 6px;
    }

    .home-footer-berries img:last-child {
        right: 6px;
    }
}

/* Reserves the outer desktop edges for the footer artwork. */
@media (min-width: 1121px) {
    .home-page .features-row .feature-card:first-child {
        padding-left: clamp(125px, 9vw, 175px);
    }

    .home-page .features-row .feature-card:last-child {
        padding-right: clamp(125px, 9vw, 175px);
    }
}

/* Lets mobile advantage copy use all space left by the removed decorations. */
@media (max-width: 620px) {
    .home-page .features-row .feature-info-text {
        flex: 1 1 0;
        width: 100%;
        max-width: none;
    }
}

/* Keeps audience navigation typography consistent with public hero headings. */
.audience-nav a,
.investor-page .investor-audience-nav a {
    font-family: Lora, Georgia, serif;
    font-size: clamp(20px, 1.35vw, 25px);
    font-weight: 700;
    text-transform: none;
}

.audience-label--short {
    display: none;
}

/* Matches the phone title size used by the home-page audience navigation. */
@media (max-width: 620px) {
    .audience-nav a,
    .investor-page .investor-audience-nav a {
        font-family: 'Lora', 'Georgia', serif;
        font-size: 19px;
        font-weight: 700;
    }

    .tenant-page .audience-nav img,
    .owner-page .audience-nav img,
    .investor-page .investor-audience-nav img {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

    .audience-label--full {
        display: none;
    }

    .audience-label--short {
        display: inline;
    }
}

/* Enlarges every header navigation item on tablets and phones. */
@media (max-width: 1120px) {
    .global-nav {
        font-size: 18px;
    }
}

/* Slightly enlarges the complete desktop header navigation. */
@media (min-width: 1121px) {
    .global-nav {
        font-size: clamp(14.04px, 1.1vw, 18.72px);
    }
}

/* Gives both header marks the same, slightly taller visual box. */
.global-brand > a:first-child img,
.tenant-page .global-brand__partner,
.owner-page .global-brand__partner,
.mbg-page .global-brand__partner {
    width: auto;
    height: 57px;
    object-fit: contain;
}

@media (max-width: 620px) {
    .global-brand > a:first-child img,
    .tenant-page .global-brand__partner,
    .owner-page .global-brand__partner,
    .mbg-page .global-brand__partner {
        width: auto;
        height: 46px;
    }
}

.global-brand img,
.tenant-page .global-brand__partner,
.owner-page .global-brand__partner,
.mbg-page .global-brand__partner {
    width: clamp(198px, 19.8vw, 308px);
}

.home-page .features-row .feature-card,
.home-page .features-row .feature-info-text h4,
.home-page .features-row .feature-svg {
    color: #111;
}

.tenant-page .portal-card .primary-button,
.tenant-page .contact-card .outline-button {
    border-color: #2b78a6;
    background: #2b78a6;
    color: #fff;
}

.global-contact-modal__details > img {
    height: clamp(220px, 31vh, 315px);
}

@media (min-width: 761px) {
    .tenant-page .portal-card .card-content,
    .tenant-page .contact-card .card-content {
        width: 100%;
        margin-left: 0;
        padding: clamp(28px, 3vw, 48px) clamp(24px, 2.6vw, 42px);
        justify-content: flex-start;
    }

    .tenant-page .portal-card .primary-button,
    .tenant-page .contact-card .outline-button {
        width: min(88%, 360px);
        margin-inline: auto;
        margin-top: auto;
    }
}

@media (max-width: 1120px) {
    :root { --public-shell: 93.5vw; }
}

@media (max-width: 620px) {
    :root { --public-shell: 95vw; }

    .global-brand img,
    .tenant-page .global-brand img,
    .owner-page .global-brand img,
    .mbg-page .global-brand__partner {
        width: clamp(110px, 37vw, 154px);
    }
}

.home-page .page-container,
.investor-page main,
.investor-page .shell,
.mbg-page .mbg-shell {
    width: var(--public-shell);
}