/* The story beneath the homepage hero, with contour lines and a portrait panel. */
.kwa-home .home-about-story {
    position: relative;
    overflow: hidden;
    background: #FAF7EF;
    scroll-margin-top: var(--home-header-height, 88px);
}
.home-about-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    gap: 50px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px 35px 35px 20px;
}
.home-about-portrait { position: relative; display: flex; min-height: 640px; margin: 0; }
.home-about-vertical { position: relative; display: flex; flex: 0 0 48px; justify-content: center; align-items: flex-end; padding: 28px 0; background: #464B20; }
.kwa-home .home-about-story .home-about-vertical span { color: #FAF7EF; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 800 !important; letter-spacing: 2px; line-height: 1.5; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.home-about-photo { position: relative; flex: 1; min-width: 0; overflow: hidden; background: #6B4B3B; }
.home-about-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.home-about-photo-contours { position: absolute; top: -65px; left: -38px; width: 290px; height: 340px; background: url('../img/about-contours.svg') no-repeat center / contain; filter: brightness(0) invert(1); opacity: .65; pointer-events: none; transform: rotate(-24deg); }
.home-about-logo { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 144px; height: 96px; padding: 9px; border-radius: 3px; background: #FAF7EF; box-shadow: 0 5px 20px rgba(48, 40, 32, .12); }
.home-about-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-about-contours { position: absolute; z-index: 0; width: 280px; height: 400px; object-fit: contain; opacity: .13; pointer-events: none; }
.home-about-contours--top { top: -85px; right: -70px; transform: rotate(12deg); }
.home-about-contours--bottom { right: 105px; bottom: -255px; width: 330px; height: 440px; transform: rotate(70deg); }
.home-about-story::after { content: ''; position: absolute; right: 30px; bottom: 35px; width: 52px; height: 290px; background: #6B4B3B; pointer-events: none; }
.home-about-copy { position: relative; padding-top: 25px; padding-right: 76px; }
.home-about-heading { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px dashed rgba(70, 75, 32, .3); }
.kwa-home .home-about-story .home-about-kicker { margin: 0; color: #464B20; font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 400 !important; line-height: 1.3; letter-spacing: 4px; text-transform: uppercase; }
.kwa-home .home-about-story .home-about-title { margin: 15px 0 0; color: #542006; font-family: 'Montserrat', sans-serif !important; font-size: 21px !important; font-weight: 800 !important; line-height: 1.4 !important; letter-spacing: 1.6px; text-transform: uppercase; }
.kwa-home .home-about-story .home-about-description p { margin: 0 0 18px; color: #302820; font-family: 'Montserrat', sans-serif; font-size: 16.5px; font-weight: 400 !important; line-height: 1.55; }
.home-about-opening::after { content: ''; display: table; clear: both; }
.kwa-home .home-about-story .home-about-dropcap { float: left; display: grid; place-items: center; width: 59px; height: 59px; margin: 4px 11px 3px 0; background: #464B20; color: #FFFFFF; font-family: 'Montserrat', sans-serif; font-size: 47px; font-weight: 800 !important; line-height: 1; }
.home-about-benefits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 24px; max-width: 610px; margin: 37px 0 0; padding: 0; list-style: none; }
.home-about-benefits li { display: flex; align-items: center; gap: 12px; }
.home-about-benefits svg { flex: 0 0 21px; width: 21px; height: 21px; color: #464B20; }
.kwa-home .home-about-story .home-about-benefits span { color: #302820; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700 !important; line-height: 1.7; }
.kwa-home .home-about-story .home-about-story-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 31px; padding: 9px 0; border-bottom: 2px solid #CC9138; color: #542006; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 800 !important; line-height: 1.4; letter-spacing: .7px; text-transform: uppercase; text-decoration: none; }
.home-about-story-link svg { width: 18px; height: 18px; transition: transform .2s; }
.kwa-home .home-about-story .home-about-story-link:hover { color: #464B20; }
.home-about-story-link:hover svg { transform: translateX(4px); }
.home-about-story-link:focus-visible { outline: 2px solid #CC9138; outline-offset: 5px; }
body:has(.home-about-story) #back-to-top { left: 35px; bottom: 108px; }
@media (max-width: 1199px) {
    .home-about-grid { gap: 32px; padding-right: 25px; }
    .home-about-copy { padding-right: 50px; }
    .home-about-story::after { right: 22px; width: 30px; height: 240px; }
    .kwa-home .home-about-story .home-about-title { font-size: 18px !important; letter-spacing: 1.1px; }
    .kwa-home .home-about-story .home-about-description p { font-size: 15px; }
    .home-about-benefits { gap: 18px; }
    .kwa-home .home-about-story .home-about-benefits span { font-size: 12px; }
}
@media (max-width: 899px) {
    .home-about-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px; }
    .home-about-portrait { min-height: 0; height: 490px; }
    .home-about-photo > img { object-position: center 43%; }
    .home-about-copy { padding: 38px 24px 12px 24px; }
    .home-about-story::after { right: 0; bottom: 0; width: 15px; height: 240px; }
    .home-about-contours--top { top: 530px; right: -100px; }
    .kwa-home .home-about-story .home-about-title { font-size: 21px !important; }
    .kwa-home .home-about-story .home-about-description p { font-size: 16px; }
}
@media (min-width: 640px) and (max-width: 899px) {
    .home-about-portrait { height: auto; }
    .home-about-photo { aspect-ratio: 1122 / 1402; }
}
@media (max-width: 639px) {
    body:has(.home-about-story) #back-to-top { left: 18px; bottom: 88px; }
    .home-about-grid { padding: 18px 16px 32px; }
    .home-about-portrait { height: 430px; }
    .home-about-vertical { flex-basis: 36px; padding: 20px 0; }
    .kwa-home .home-about-story .home-about-vertical span { font-size: 10px; letter-spacing: 1.5px; }
    .home-about-photo > img { object-position: center 52%; }
    .home-about-photo-contours { top: -70px; left: -50px; width: 235px; height: 290px; opacity: .55; }
    .home-about-logo { right: 12px; bottom: 12px; width: 117px; height: 78px; padding: 8px; }
    .home-about-copy { padding: 32px 12px 5px 4px; }
    .home-about-heading { margin-bottom: 23px; padding-bottom: 18px; }
    .kwa-home .home-about-story .home-about-kicker { font-size: 23px; letter-spacing: 3px; }
    .kwa-home .home-about-story .home-about-title { margin-top: 12px; font-size: 19px !important; letter-spacing: .8px; }
    .kwa-home .home-about-story .home-about-description p { font-size: 15px; line-height: 1.7; }
    .kwa-home .home-about-story .home-about-dropcap { width: 53px; height: 53px; font-size: 42px; }
    .home-about-benefits { gap: 22px 12px; margin-top: 28px; }
    .home-about-benefits li { gap: 8px; align-items: flex-start; }
    .home-about-benefits svg { flex-basis: 18px; width: 18px; height: 18px; margin-top: 4px; }
    .kwa-home .home-about-story .home-about-benefits span { font-size: 11px; line-height: 1.65; }
    .home-about-contours--top { top: 420px; right: -150px; }
    .home-about-contours--bottom { right: 0; bottom: -285px; }
    .home-about-story::after { width: 8px; height: 175px; }
}
@media (prefers-reduced-motion: reduce) { .home-about-story-link svg { transition: none; } }