.about-page {
    background: #fbf7f1;
    color: #211916
}

.about-page .about-serif {
    font-family: 'HS Museo Bg', Arial, sans-serif;
    font-weight: 400;
    letter-spacing: -.025em
}

.about-hero {
    position: relative;
    min-height: 620px;
    padding-top: 96px;
    overflow: hidden;
    background: #f8f3ec
}/*
.about-hero-photo {
    position: absolute;
    inset: 0 0 0 41%;
    background: url('../img/about-ref/hero.webp') center/cover no-repeat
}

.about-hero-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fbf7f1 0%, #fbf7f1 33%, rgba(251, 247, 241, .96) 39%, rgba(251, 247, 241, .74) 48%, rgba(251, 247, 241, .26) 60%, rgba(251, 247, 241, 0) 73%)
}*/
.about-hero-photo {
    position: absolute;
    inset: 0;
    background: url('../img/about-ref/hero.webp') center right / cover no-repeat;
}

.about-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        #fbf7f1 0%,
        #fbf7f1 30%,
        rgba(251, 247, 241, .98) 35%,
        rgba(251, 247, 241, .90) 40%,
        rgba(251, 247, 241, .72) 45%,
        rgba(251, 247, 241, .45) 50%,
        rgba(251, 247, 241, .20) 56%,
        rgba(251, 247, 241, .05) 62%,
        rgba(251, 247, 241, 0) 68%
    );
}

.about-hero-inner {
    position: relative;
    z-index: 2;
    min-height: 524px;
    display: flex;
    align-items: center
}

.about-hero-copy {
    width: 62%;
    max-width: 800px;
    padding: 48px 0 34px
}

.about-hero-copy .eyebrow {
    margin-bottom: 20px
}

.about-hero h1 {
    font-size: clamp(50px, 4.5vw, 74px);
    line-height: .98;
    margin: 0 0 22px;
    max-width: 800px
}

.about-hero h1 .wine {
    color: var(--wine)
}

.about-hero .lead {
    max-width: 800px;
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 24px
}

.about-hero-script {
    position: absolute;
    right: 8%;
    top: 95px;
    z-index: 3;
    color: #6e5749;
    font-family: 'HS Museo Bg', Arial, sans-serif;
    font-style: italic;
    font-size: 28px;
    line-height: 1.15;
    transform: rotate(-7deg);
    opacity: .75;
    text-align: center
}

.about-values {
    background: #f3eadf;
    border-top: 1px solid #e3d6c8;
    border-bottom: 1px solid #e3d6c8
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.about-value {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 18px;
    padding: 30px 26px;
    border-right: 1px solid #dfd2c5;
    align-items: start
}

.about-value:last-child {
    border-right: 0
}

.about-value h3 {
    margin: 4px 0 6px;
    font-size: 18px;
    line-height: 1.2
}

.about-value p {
    margin: 0;
    color: #5d5047;
    font-size: 14px;
    line-height: 1.45
}

.about-story {
    padding: 52px 0 18px;
    background: #fffaf5
}

.about-story-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.2fr .64fr;
    gap: 22px;
    align-items: stretch
}

.about-story-copy {
    padding: 6px 6px 0 0
}

.about-story h2 {
    font-size: 44px;
    line-height: 1;
    margin: 0 0 18px;
    color: #7b1d1d
}

.about-story p {
    font-size: 15px;
    line-height: 1.6;
    color: #4e443d;
    margin: 0 0 20px
}

.about-story-image {
    min-height: 285px;
    border-radius: 3px;
    overflow: hidden
}

.about-story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.about-quote {
    background: #f7efe7;
    padding: 34px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.about-quote .quote-mark {
    font-family: 'HS Museo Bg', Arial, sans-serif;
    color: #8c1e1e;
    font-size: 54px;
    line-height: .7
}

.about-quote blockquote {
    font-family: 'HS Museo Bg', Arial, sans-serif;
    font-style: italic;
    font-size: 30px;
    line-height: 1.12;
    margin: 18px 0
}

.about-quote small {
    font-size: 12px;
    color: #5d5047
}

.about-process {
    padding: 44px 0 56px;
    background: #fffaf5
}

.about-process-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px
}

.about-process h2 {
    font-size: 38px;
    margin: 0
}

.about-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px
}

.about-process-card {
    position: relative
}

.about-process-card:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -21px;
    top: 58px;
    color: #8c1e1e;
    font-size: 30px
}

.about-process-media {
    height: 122px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 11px
}

.about-process-media img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.about-process-card h3 {
    font-size: 14px;
    margin: 0 0 3px
}

.about-process-card p {
    font-size: 13px;
    color: #695d55;
    margin: 0;
    line-height: 1.4
}

.about-values-dark {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: linear-gradient(135deg, #5f1415, #8b2422);
    color: white;
    min-height: 310px
}

.about-values-dark-image {
    background: url('../img/about-ref/values-meat.jpg') center/cover no-repeat
}

.about-values-dark-copy {
    padding: 48px 52px
}

.about-values-dark-copy .eyebrow {
    color: #eac5b8
}

.about-values-dark h2 {
    font-size: 46px;
    line-height: 1.02;
    margin: 0 0 16px
}

.about-values-dark p {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    max-width: 540px
}

.about-values-dark-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .18)
}

.about-values-dark-icon {
    padding: 20px 14px 0 0;
    border-right: 1px solid rgba(255, 255, 255, .18);
    font-size: 12px
}

.about-values-dark-icon:last-child {
    border-right: 0
}

.about-values-dark-icon span {
    display: block;
    font-size: 24px;
    margin-bottom: 5px
}

.about-footer-light {
    background: #f8f2eb;
    color: #2a211d;
    padding: 38px 0 18px;
    border-top: 1px solid #e3d6c8
}

.about-footer-light .footer-grid {
    grid-template-columns: 1.1fr repeat(4, 1fr);
    gap: 34px
}

.about-footer-light .footer-logo {
    filter: none;
    width: 135px
}

.about-footer-light h4 {
    color: #7b1d1d
}

.about-footer-light a,
.about-footer-light p {
    color: #655950
}

.about-footer-light .footer-bottom {
    border-top-color: #ded0c2;
    color: #8a7c73
}

@media(max-width:1100px) {
    .about-hero-photo {
        left: 36%
    }

    .about-hero-copy {
        width: 58%
    }

    .about-story-grid {
        grid-template-columns: 1fr 1fr
    }

    .about-quote {
        grid-column: 1/-1
    }

    .about-process-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .about-process-card:nth-child(3)::after {
        display: none
    }

    .about-values-dark {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:900px) {
    .about-hero {
        padding-top: 76px;
        min-height: 680px
    }

    .about-hero-photo {
        inset: 76px 0 0 18%;
        background-position: center
    }

    .about-hero-veil {
        background: linear-gradient(90deg, #fbf7f1 0%, rgba(251, 247, 241, .98) 38%, rgba(251, 247, 241, .82) 58%, rgba(251, 247, 241, .22) 82%, rgba(251, 247, 241, 0) 100%)
    }

    .about-hero-inner {
        min-height: 604px
    }

    .about-hero-copy {
        width: 70%;
        padding-top: 74px
    }

    .about-hero h1 {
        font-size: 52px
    }

    .about-hero-script {
        display: none
    }

    .about-values-grid {
        grid-template-columns: 1fr 1fr
    }

    .about-value:nth-child(2) {
        border-right: 0
    }

    .about-value:nth-child(-n+2) {
        border-bottom: 1px solid #dfd2c5
    }

    .about-story-grid {
        grid-template-columns: 1fr
    }

    .about-story-image {
        min-height: 360px
    }

    .about-process-grid {
        grid-template-columns: 1fr 1fr
    }

    .about-process-card:nth-child(2n)::after {
        display: none
    }

    .about-process-media {
        height: 180px
    }

    .about-values-dark {
        grid-template-columns: 1fr
    }

    .about-values-dark-image {
        min-height: 300px
    }

    .about-footer-light .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .about-footer-light .footer-grid>div:first-child {
        grid-column: 1/-1
    }
}

@media(max-width:600px) {
    .about-hero {
        min-height: 630px
    }

    .about-hero-photo {
        left: 0;
        top: 76px;
        background-position: 58% center
    }

    .about-hero-veil {
        background: linear-gradient(180deg, rgba(251, 247, 241, .96) 0%, rgba(251, 247, 241, .86) 44%, rgba(251, 247, 241, .52) 72%, rgba(251, 247, 241, .2) 100%)
    }

    .about-hero-inner {
        min-height: 554px;
        align-items: flex-start
    }

    .about-hero-copy {
        width: 100%;
        padding-top: 52px
    }

    .about-hero h1 {
        font-size: 42px;
        max-width: 360px
    }

    .about-hero .lead {
        font-size: 14px;
        max-width: 360px
    }

    .about-values-grid {
        grid-template-columns: 1fr
    }

    .about-value {
        border-right: 0;
        border-bottom: 1px solid #dfd2c5
    }

    .about-value:last-child {
        border-bottom: 0
    }

    .about-story {
        padding-top: 42px
    }

    .about-story h2 {
        font-size: 36px
    }

    .about-story-image {
        min-height: 250px
    }

    .about-quote blockquote {
        font-size: 26px
    }

    .about-process-head {
        align-items: flex-start;
        gap: 8px;
        flex-direction: column
    }

    .about-process-grid {
        grid-template-columns: 1fr
    }

    .about-process-card::after {
        display: none !important
    }

    .about-process-media {
        height: 210px
    }

    .about-values-dark-copy {
        padding: 38px 24px
    }

    .about-values-dark h2 {
        font-size: 38px
    }

    .about-values-dark-icons {
        grid-template-columns: 1fr 1fr
    }

    .about-values-dark-icon {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
        padding-bottom: 16px
    }

    .about-footer-light .footer-grid {
        grid-template-columns: 1fr
    }

    .about-footer-light .footer-grid>div:first-child {
        grid-column: auto
    }
}