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

:root{/* Настраивает CSS-свойство --green для текущего элемента. */
--green:#075a2d;
--wine:#9d173f;
--purple:#8b6ba0;
--paper:#f6f0e3;
--ink:#252923;
--line:#cbc2af;
--shell:87vw
}

/* About page: independent watercolor background, artwork, and copy layers. */
.about-page .about-layered-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #faf6eb;
}

.about-page .about-hero {
    display: grid;
    align-items: center;
    min-height: clamp(390px, 37vw, 560px);
    background-image: none;
}

.about-page .about-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
    pointer-events: none;
}

.about-page .about-hero__content > * {
    max-width: min(42%, 470px);
}

.about-page .about-pillars {
    align-items: stretch;
}

.about-page .about-pillars article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(126px, .9fr);
    min-height: 420px;
    padding: 0;
    background-image: none;
}

.about-page .about-pillars .story-pillar,
.about-page .about-pillars .mission-pillar,
.about-page .about-pillars .values-pillar {
    background-image: none;
}

.about-page .about-pillars article::before,
.about-page .about-pillars article::after {
    display: none;
}

.about-page .about-pillars .pillar-copy {
    position: relative;
    z-index: 2;
    align-self: start;
    padding: 28px 8px 28px 28px;
}

.about-page .about-pillars .pillar-copy header,
.about-page .about-pillars .pillar-copy p {
    width: auto;
    margin-inline: 0;
}

.about-page .about-pillars .pillar-copy p {
    margin-bottom: 0;
}

.about-page .about-pillars .pillar-art {
    position: relative;
    z-index: 1;
    display: block;
    align-self: end;
    justify-self: end;
    width: 118%;
    height: auto;
    max-height: 78%;
    margin: 0;
    float: none;
    object-fit: contain;
    object-position: right bottom;
    transform: none;
    mix-blend-mode: normal;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
}

.about-page .about-pillars .story-pillar {
    grid-template-columns: minmax(126px, .9fr) minmax(0, 1fr);
}

.about-page .about-pillars .story-pillar .pillar-art {
    grid-column: 1;
    justify-self: start;
    width: 122%;
    object-position: left bottom;
}

.about-page .about-pillars .story-pillar .pillar-copy {
    grid-column: 2;
    grid-row: 1;
    padding: 28px 24px 28px 8px;
}

.about-page .about-pillars .mission-pillar .pillar-art,
.about-page .about-pillars .values-pillar .pillar-art {
    grid-column: 2;
    grid-row: 1;
}

.about-page .about-pillars .values-pillar .pillar-art {
    width: 132%;
}

@media (max-width: 1050px) {
    .about-page .about-pillars {
        grid-template-columns: 1fr;
    }

    .about-page .about-pillars article,
    .about-page .about-pillars .story-pillar {
        grid-template-columns: minmax(0, 1.15fr) minmax(230px, .85fr);
        min-height: 300px;
    }

    .about-page .about-pillars .story-pillar {
        grid-template-columns: minmax(230px, .85fr) minmax(0, 1.15fr);
    }

    .about-page .about-pillars .pillar-art,
    .about-page .about-pillars .story-pillar .pillar-art,
    .about-page .about-pillars .values-pillar .pillar-art {
        width: min(118%, 430px);
        max-height: 94%;
    }
}

@media (max-width: 700px) {
    .about-page .about-hero {
        display: grid;
        grid-template-rows: auto minmax(270px, 58vw);
        min-height: 0;
        padding-top: 0;
    }

    .about-page .about-hero__content {
        grid-row: 1;
        padding: 34px 24px 18px;
        background: transparent;
    }

    .about-page .about-hero__content > * {
        max-width: none;
    }

    .about-page .about-pillars article,
    .about-page .about-pillars .story-pillar {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(180px, 56vw);
        min-height: 0;
    }

    .about-page .about-pillars .pillar-copy,
    .about-page .about-pillars .story-pillar .pillar-copy {
        grid-column: 1;
        grid-row: 1;
        padding: 24px 24px 8px;
    }

    .about-page .about-pillars .pillar-art,
    .about-page .about-pillars .story-pillar .pillar-art,
    .about-page .about-pillars .mission-pillar .pillar-art,
    .about-page .about-pillars .values-pillar .pillar-art {
        grid-column: 1;
        grid-row: 2;
        align-self: end;
        justify-self: center;
        width: min(92%, 430px);
        max-height: 100%;
        object-position: center bottom;
    }
}

*{/* Настраивает CSS-свойство box-sizing для текущего элемента. */
box-sizing:border-box
}

body{/* Настраивает CSS-свойство margin для текущего элемента. */
margin:0;
background:var(--paper) url('../images/main/beige_bg.JPEG') repeat;
background-size:520px;
color:var(--ink);
font-family:'DM Sans',sans-serif
}

.shell{/* Настраивает CSS-свойство width для текущего элемента. */
width:var(--shell);
margin:auto
}

.header{/* Настраивает CSS-свойство border-bottom для текущего элемента. */
border-bottom:1px solid var(--line);
background:#fffaf1cc
}

.header>div{/* Настраивает CSS-свойство height для текущего элемента. */
height:98px;
display:flex;
align-items:center;
justify-content:space-between
}

.logo{/* Настраивает CSS-свойство width для текущего элемента. */
width:clamp(180px,18vw,280px)
}

nav{/* Настраивает CSS-свойство display для текущего элемента. */
display:flex;
gap:clamp(18px,2vw,35px);
align-items:center
}

nav a{/* Настраивает CSS-свойство color для текущего элемента. */
color:inherit;
text-decoration:none;
font-weight:600
}

nav a.active{/* Настраивает CSS-свойство color для текущего элемента. */
color:var(--green);
border-bottom:2px solid;
padding-bottom:7px
}

.menu{/* Настраивает CSS-свойство display для текущего элемента. */
display:none;
border:0;
background:none;
font-size:28px
}

.section{/* Настраивает CSS-свойство padding для текущего элемента. */
padding:70px 0
}

.section-title{/* Настраивает CSS-свойство text-align для текущего элемента. */
text-align:center;
font:700 clamp(34px,3vw,52px) Lora,serif;
color:var(--green);
margin:0 0 13px
}

.section-lead{/* Настраивает CSS-свойство text-align для текущего элемента. */
text-align:center;
max-width:730px;
margin:0 auto 40px;
line-height:1.65
}

.card-grid{/* Настраивает CSS-свойство display для текущего элемента. */
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px
}

.info-card{/* Настраивает CSS-свойство padding для текущего элемента. */
padding:35px;
border:1px solid #bdb29d;
border-radius:13px;
background:#fffaf0aa;
box-shadow:0 8px 25px #4c3a2110
}

.info-card img{/* Настраивает CSS-свойство width для текущего элемента. */
width:54px;
height:54px
}

.info-card h2,.info-card h3{/* Настраивает CSS-свойство font для текущего элемента. */
font:700 25px Lora,serif;
color:var(--green)
}

.info-card p{/* Настраивает CSS-свойство line-height для текущего элемента. */
line-height:1.65
}

.story{/* Настраивает CSS-свойство display для текущего элемента. */
display:grid;
grid-template-columns:1fr 1fr;
gap:45px;
align-items:center
}

.story img{/* Настраивает CSS-свойство width для текущего элемента. */
width:100%;
border-radius:14px
}

.story h2{/* Настраивает CSS-свойство font для текущего элемента. */
font:700 clamp(35px,3.4vw,56px) Lora,serif;
color:var(--green);
margin-top:0
}

.story p{/* Настраивает CSS-свойство font-size для текущего элемента. */
font-size:17px;
line-height:1.75
}

.values{/* Настраивает CSS-свойство background для текущего элемента. */
background:#fffaf177
}

.blog-tools{/* Настраивает CSS-свойство display для текущего элемента. */
display:flex;
justify-content:center;
gap:10px;
margin-bottom:32px;
flex-wrap:wrap
}

.filter{/* Настраивает CSS-свойство border для текущего элемента. */
border:1px solid var(--green);
color:var(--green);
background:transparent;
border-radius:999px;
padding:10px 19px;
font-weight:700;
cursor:pointer
}

.filter.active{/* Настраивает CSS-свойство color для текущего элемента. */
color:white;
background:var(--green)
}

.post{/* Настраивает CSS-свойство overflow для текущего элемента. */
overflow:hidden;
padding:0
}

.post>img{/* Настраивает CSS-свойство width для текущего элемента. */
width:100%;
height:210px;
object-fit:cover
}

.post div{/* Настраивает CSS-свойство padding для текущего элемента. */
padding:26px
}

.tag{/* Настраивает CSS-свойство font-size для текущего элемента. */
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
color:var(--wine);
font-weight:700
}

.post button{/* Настраивает CSS-свойство border для текущего элемента. */
border:0;
background:none;
color:var(--green);
font-weight:700;
padding:0;
cursor:pointer
}

.post-detail{/* Настраивает CSS-свойство display для текущего элемента. */
display:none
}

.post.open .post-detail{/* Настраивает CSS-свойство display для текущего элемента. */
display:block
}

.success{/* Настраивает CSS-свойство margin для текущего элемента. */
margin:22px auto 0;
padding:14px 20px;
background:#dcebdc;
color:#075a2d;
border-radius:7px
}

.footer{/* Настраивает CSS-свойство margin-top для текущего элемента. */
margin-top:50px;
background:var(--green);
color:white
}

.footer>div{/* Настраивает CSS-свойство min-height для текущего элемента. */
min-height:80px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px
}

.footer a{/* Настраивает CSS-свойство color для текущего элемента. */
color:white;
text-decoration:none
}

@media(max-width:900px){:root{/* Настраивает CSS-свойство --shell для текущего элемента. */
--shell:92vw
}

.menu{/* Настраивает CSS-свойство display для текущего элемента. */
display:block
}

nav{/* Настраивает CSS-свойство display для текущего элемента. */
display:none;
position:absolute;
z-index:5;
right:4vw;
top:78px;
flex-direction:column;
align-items:flex-start;
background:#fffaf0;
padding:25px;
box-shadow:0 12px 30px #0002
}

nav.open{/* Настраивает CSS-свойство display для текущего элемента. */
display:flex
}

.header>div{/* Настраивает CSS-свойство height для текущего элемента. */
height:78px
}

.card-grid{/* Настраивает CSS-свойство grid-template-columns для текущего элемента. */
grid-template-columns:1fr 1fr
}

.story{/* Настраивает CSS-свойство grid-template-columns для текущего элемента. */
grid-template-columns:1fr
}


}

@media(max-width:600px){:root{/* Настраивает CSS-свойство --shell для текущего элемента. */
--shell:94vw
}

.card-grid{/* Настраивает CSS-свойство grid-template-columns для текущего элемента. */
grid-template-columns:1fr
}

.section{/* Настраивает CSS-свойство padding для текущего элемента. */
padding:45px 0
}

.footer>div{/* Настраивает CSS-свойство padding для текущего элемента. */
padding:25px 0;
flex-direction:column;
text-align:center
}


}




/* Aligns public blog paging controls. */
.blog-paging {    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 34px;
}



/* Creates the modal overlay for a full blog post. */
.blog-modal {    width: min(760px, 92vw);
    max-height: 88vh;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #fffaf0;
    color: inherit;
    box-shadow: 0 24px 70px rgba(25, 31, 27, 0.28);
}


/* Dims the page behind the blog modal. */
.blog-modal::backdrop {    background: rgba(20, 27, 23, 0.58);
}


/* Adds comfortable spacing inside the blog modal. */
.blog-modal__panel {    position: relative;
    padding: clamp(22px, 4vw, 42px);
}


/* Displays the modal cover without image effects. */
.blog-modal__panel > img {    width: 100%;
    max-height: 320px;
    margin-bottom: 22px;
    border-radius: 10px;
    object-fit: cover;
}


/* Places the modal close control above its content. */
.blog-modal__close {    position: absolute;
    top: 12px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #26352d;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(20, 30, 24, 0.18);
}


/* Preserves paragraphs and line breaks in full blog text. */
.blog-modal__content {    white-space: pre-line;
    line-height: 1.75;
}


/* Stacks public paging controls on narrow screens. */
@media (max-width: 600px) {    .blog-paging {        flex-direction: column;
        align-items: stretch;
    }


}


/* About and social blog redesign */
.info-shell{width:min(1160px,87vw);margin-inline:auto}
.info-kicker{margin:0 0 10px;color:#8e1c2d;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.info-rule{display:block;width:52px;height:3px;margin:18px 0;background:#075a2d}
.about-hero,.blog-hero{min-height:390px;background-position:center;background-size:cover;display:flex;align-items:center}
.about-hero{background-image:url('../images/about-us/about_us_bg.png')}
.blog-hero{background-image:url('../images/blog/blog_bg.png')}
.about-hero__content,.blog-hero__content{padding-block:54px}
.about-hero h1,.blog-hero h1{margin:0;color:#123f2a;font:700 clamp(44px,5vw,72px)/.95 Lora,serif}
.about-hero__content>p:last-child{font:600 18px/1.5 Lora,serif}
.blog-hero__content>p:last-child{max-width:450px;font-size:16px;line-height:1.65}
.about-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-block:52px}
.about-pillars article{min-height:300px;padding:28px;border:1px solid #d7cdbb;border-radius:8px;background:#faf6eb center/cover no-repeat}
.about-pillars .story-pillar{background-image:url('../images/about-us/our_story.png')}
.about-pillars .mission-pillar{background-image:url('../images/about-us/our_mission.png')}
.about-pillars .values-pillar{background-image:url('../images/about-us/our_values.png')}
.about-pillars header{display:flex;align-items:center;gap:15px}
.about-pillars header img{width:42px;height:42px;object-fit:contain}
.about-pillars h2,.info-heading h2,.blog-feature h2{color:#123f2a;font:700 29px Lora,serif}
.about-pillars p{max-width:75%;font-size:14px;line-height:1.65}
.info-heading{display:flex;align-items:center;justify-content:center;gap:13px;margin-bottom:24px}
.info-heading h2{margin:0}
.info-heading i{color:#78923b;font-size:27px}
.serve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.serve-grid>a{display:grid;grid-template-columns:42% 1fr;min-height:210px;overflow:hidden;border:1px solid #d7cdbb;border-radius:8px;background:#faf6eb;color:inherit;text-decoration:none}
.serve-grid>a>img{width:100%;height:100%;object-fit:cover}
.serve-grid span{display:flex;flex-direction:column;gap:14px;padding:24px 18px}
.serve-grid b{display:flex;align-items:center;gap:8px;color:#075a2d;font:700 19px Lora,serif}
.serve-grid b img{width:28px;height:28px}
.serve-grid em{font-size:13px;line-height:1.5;font-style:normal}
.serve-grid strong{margin-top:auto;color:#8e1c2d;font-size:12px}
.about-partner{display:grid;grid-template-columns:1fr 1.3fr;gap:32px;align-items:center;margin-top:54px;padding:28px;border-block:1px solid #cfc2ab}
.about-partner>div{display:flex;align-items:center;gap:22px}
.about-partner img{width:42%;max-height:90px;object-fit:contain}
.about-partner div i{width:1px;height:65px;background:#b6aa95}
.about-partner p{line-height:1.65}
.about-partner a,.info-button{display:inline-block;margin-top:12px;padding:10px 16px;border:1px solid #075a2d;border-radius:5px;color:#075a2d;font-weight:700;text-decoration:none}
.blog-feature{display:grid;grid-template-columns:minmax(300px,340px) minmax(0,1fr);gap:26px;max-width:760px;margin:36px auto 0;padding:20px;border:1px solid #d7cdbb;border-radius:8px;background:#fbf7ee}
.blog-feature__media{position:relative;min-height:290px;border-radius:6px;background:#e9e0cf url('../images/blog/blog_bg.png') center/cover no-repeat;display:grid;place-items:center;text-decoration:none;overflow:hidden}
.blog-feature__media span{display:grid;width:66px;height:66px;place-items:center;border-radius:50%;background:white;color:#075a2d;font-size:26px;box-shadow:0 8px 24px #0003}
.blog-feature h2{font-size:34px;margin:6px 0 14px}
.blog-feature>div>p:not(.info-kicker){line-height:1.6}
.info-button{background:#8e1c2d;border-color:#8e1c2d;color:white}
.social-feed,.blog-follow{padding-top:50px}
.social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.social-filters{display:flex;justify-content:center;gap:10px;margin:-4px 0 28px;flex-wrap:wrap}
.social-filters a{padding:9px 16px;border:1px solid #b8ad98;border-radius:999px;color:#123f2a;font-size:13px;font-weight:800;text-decoration:none;transition:.18s ease}
.social-filters a:hover,.social-filters a:focus-visible,.social-filters a.active{border-color:#075a2d;background:#075a2d;color:#fff}
.social-card{display:flex;flex-direction:column;gap:10px;border:1px solid #d7cdbb;border-radius:8px;background:#fffaf0;color:inherit;text-decoration:none;overflow:hidden}
.social-card{min-width:0;transition:transform .18s ease,box-shadow .18s ease}
.social-card:hover,.social-card:focus-visible{transform:translateY(-3px);box-shadow:0 12px 28px #1c36231a}
.social-card__image{position:relative;display:grid;place-items:center;aspect-ratio:1;background:linear-gradient(145deg,#efe5d2,#dce7d9)}
.social-card__image img{width:100%;height:100%;object-fit:cover}
.social-card__image b{position:absolute;left:10px;top:10px;padding:5px 8px;border-radius:4px;background:#fff;color:#123f2a;font-size:11px;letter-spacing:.05em}
.social-card__image>i{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:#075a2d;font-style:normal;box-shadow:0 7px 20px #0003}
.social-card__image.is-empty::after{content:'Berry Homes';color:#075a2d;font:700 22px Lora,serif}
.social-card>strong,.social-card>small{padding-inline:14px}
.social-card>strong{display:-webkit-box;min-height:3.9em;overflow:hidden;font:700 16px/1.3 Lora,serif;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.social-card>small{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-bottom:14px;color:#667269}
.social-card>small span{color:#075a2d;font-weight:800}
.social-card--youtube .social-card__image b{color:#a51d2d}
.social-card--facebook .social-card__image b{color:#2566a5}
.social-feed__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:42px;text-align:center;background:#f9f3e7}
.social-feed__empty strong{color:#123f2a;font:700 24px Lora,serif}
.social-grid--pending{grid-template-columns:1fr 1fr}
.blog-follow{padding-bottom:35px}
.blog-follow>div:last-child{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.blog-follow a{display:flex;align-items:center;gap:14px;padding:22px;border:1px solid #d7cdbb;border-radius:8px;background:#fffaf0;color:#123f2a;text-decoration:none}
.blog-follow a>img{width:42px;height:42px;flex:0 0 42px;color:#123f2a}
.blog-follow a>span{display:flex;flex-direction:column;gap:3px}
.blog-follow a b{font:700 17px Lora,serif}
.blog-follow a small{color:#667269;font-size:13px}
.blog-follow a[class]{border-color:transparent;color:#fff;transition:transform .18s ease,box-shadow .18s ease}
.blog-follow a[class]:hover,.blog-follow a[class]:focus-visible{transform:translateY(-3px);box-shadow:0 12px 26px #102d1b35}
.blog-follow a[class]>img{filter:brightness(0) invert(1)}
.blog-follow a[class] small{color:#ffffffd9}
.blog-follow a.blog-follow__youtube{background:#e62117}
.blog-follow a.blog-follow__tiktok{background:linear-gradient(135deg,#101010 30%,#202124);box-shadow:inset 3px 0 #25f4ee,inset -3px 0 #fe2c55}
.blog-follow a.blog-follow__instagram{background:linear-gradient(135deg,#833ab4 0%,#c13584 35%,#e1306c 58%,#f77737 82%,#fcaf45 100%)}
.blog-follow a.blog-follow__facebook{background:#1877f2}
.global-footer{margin-top:0}

.social-video-modal{width:min(94vw,1100px);max-width:none;padding:0;border:0;background:transparent;overflow:visible}
.social-video-modal::backdrop{background:rgba(12,25,18,.82);backdrop-filter:blur(3px)}
.social-video-modal__panel{position:relative;padding:12px;border:1px solid #d7cdbb;border-radius:10px;background:#fffaf0;box-shadow:0 24px 70px #0008}
.social-video-modal__player{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#0b0b0b}
.social-video-modal__player iframe{display:block;width:100%;height:100%;border:0}
.social-video-modal__close{position:absolute;z-index:2;top:18px;right:18px;display:grid;width:42px;height:42px;place-items:center;padding:0;border:1px solid #ffffffaa;border-radius:50%;background:#123f2ae8;color:#fff;font:400 28px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 5px 18px #0005}
.social-video-modal--vertical{width:min(94vw,480px)}
.social-video-modal--vertical .social-video-modal__player{aspect-ratio:9/16;max-height:84vh}

@media(max-width:900px){.about-pillars,.serve-grid{grid-template-columns:1fr}
.about-pillars article{min-height:260px}
.serve-grid>a{min-height:230px}
.blog-feature{grid-template-columns:1fr;max-width:520px}
.social-grid{grid-template-columns:repeat(2,1fr)}
.about-partner{grid-template-columns:1fr}
.blog-follow>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr))}
.about-hero,.blog-hero{min-height:340px;background-position:62% center}
}

@media(max-width:600px){.info-shell{width:min(92vw,1160px)}
.about-hero,.blog-hero{min-height:500px;align-items:flex-start;background-position:68% bottom}
.about-hero__content,.blog-hero__content{padding-top:40px}
.about-hero h1,.blog-hero h1{font-size:45px}
.blog-hero__content>p:last-child{max-width:80%}
.about-pillars{padding-block:28px}
.about-pillars article{padding:22px}
.about-pillars p{max-width:82%}
.serve-grid>a{grid-template-columns:40% 1fr}
.about-partner{margin-top:32px;padding-inline:0}
.social-grid,.social-grid--pending,.blog-follow>div:last-child{grid-template-columns:1fr}
.blog-feature{margin-top:20px;padding:12px}
.blog-feature__media{min-height:220px}
.blog-feature h2{font-size:28px}
.blog-follow a{gap:12px}
}



/* Matches About and Blog to the full thematic-page shell at every breakpoint. */
.info-shell {
    width: var(--shell);
    max-width: none;
}

.about-hero,
.blog-hero {
    width: var(--shell);
    margin-inline: auto;
}

/* Keeps the About and Blog hero copy away from the left edge of its panel. */
.about-hero__content,
.blog-hero__content {
    padding-left: clamp(20px, 4vw, 64px);
}


/* Sizes the page-specific decorative and external-link assets. */
.info-heading__branch {
    width: clamp(48px, 7vw, 92px);
    height: 28px;
    object-fit: contain;
}

.info-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.info-button img {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

/* Stable text contrast without relying on a particular copy length. */
.about-pillars article {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: transparent;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.about-pillars .story-pillar { background-image: url('../images/about-us/our_story.png'); }
.about-pillars .mission-pillar { background-image: url('../images/about-us/our_mission.png'); }
.about-pillars .values-pillar { background-image: url('../images/about-us/our_values.png'); }

.about-pillars article::before {
    display: none;
}

.about-pillars .pillar-art {
    width: 38%;
    height: 128px;
    margin: 10px 0 8px 14px;
    float: right;
    display: none;
    overflow: hidden;
    mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(ellipse, #000 56%, transparent 92%);
    mask-image: radial-gradient(ellipse, #000 56%, transparent 92%);
}

.about-pillars .pillar-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(2.15);
}

.about-pillars .story-pillar .pillar-art {
    margin: 10px 14px 8px 0;
    float: left;
}

.about-pillars .story-pillar .pillar-art img {
    object-position: left bottom;
    transform-origin: left bottom;
}

.about-pillars .mission-pillar .pillar-art img {
    object-position: right bottom;
    transform-origin: right bottom;
}

.about-pillars .values-pillar .pillar-art img {
    object-position: right bottom;
    transform-origin: right bottom;
}

.about-pillars p { max-width: none; }

.about-pillars .story-pillar header,
.about-pillars .story-pillar p {
    width: 62%;
    margin-left: 38%;
}

.about-pillars .mission-pillar header,
.about-pillars .mission-pillar p,
.about-pillars .values-pillar header,
.about-pillars .values-pillar p {
    width: 62%;
    margin-right: 38%;
}

.about-pillars article::after {
    content: "";
    display: block;
    clear: both;
}

.info-heading__branch {
    width: clamp(74px, 8.7vw, 127px);
    height: auto;
}

.serve-grid b {
    justify-content: center;
    text-align: center;
    font-size: 29px;
    line-height: 1.2;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
}

.serve-grid b img {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
}

@media (max-width: 900px) {
    .about-pillars .pillar-art {
        width: min(38%, 270px);
        height: 170px;
    }
}

@media (max-width: 600px) {
    .about-hero,
    .blog-hero {
        display: block;
        min-height: 0;
        padding-top: 36.95%;
        background-color: #faf6eb;
        background-position: center top;
        background-size: 100% auto;
        background-repeat: no-repeat;
    }

    .about-hero__content,
    .blog-hero__content {
        width: 100%;
        padding: 26px 22px 32px;
        box-sizing: border-box;
        background: #faf6eb;
    }

    .about-hero h1,
    .blog-hero h1 {
        font-size: clamp(38px, 12vw, 48px);
    }

    .blog-hero__content > p:last-child,
    .about-hero__content > p:last-child {
        max-width: none;
    }

    .about-pillars article {
        min-height: 0;
        padding: 24px;
        background-image: none;
    }

    .about-pillars .story-pillar,
    .about-pillars .mission-pillar,
    .about-pillars .values-pillar {
        background-image: none;
    }

    .about-pillars p { max-width: none; }

    .about-pillars .story-pillar header,
    .about-pillars .story-pillar p,
    .about-pillars .mission-pillar header,
    .about-pillars .mission-pillar p,
    .about-pillars .values-pillar header,
    .about-pillars .values-pillar p {
        width: auto;
        margin-inline: 0;
    }

    .about-pillars .pillar-art,
    .about-pillars .story-pillar .pillar-art {
        width: min(100%, 390px);
        height: 170px;
        margin: 4px auto 16px;
        float: none;
        display: block;
    }

    .about-pillars .story-pillar .pillar-art img {
        object-position: left bottom;
    }

    .about-pillars .mission-pillar .pillar-art img,
    .about-pillars .values-pillar .pillar-art img {
        object-position: right bottom;
    }

    .about-pillars .pillar-art img {
        transform: scale(1.45);
    }

    .info-heading__branch {
        width: clamp(50px, 16vw, 74px);
    }

    .serve-grid > a {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .serve-grid > a > img {
        height: auto;
        aspect-ratio: 2 / 1;
        object-fit: cover;
        background: #eee5d4;
    }

    .serve-grid > a:nth-child(1) > img { object-position: 50% 68%; }
    .serve-grid > a:nth-child(2) > img { object-position: 50% 58%; }
    .serve-grid > a:nth-child(3) > img { object-position: 50% 55%; }

}

/* About-only hero: 20% taller without changing the Blog hero. */
.about-hero {
    min-height: 468px;
}

@media (max-width: 900px) and (min-width: 601px) {
    .about-hero {
        min-height: 408px;
    }
}

@media (max-width: 600px) {
    .about-hero {
        min-height: 0;
        padding-top: 60%;
    }
}