/* About Us shares the homepage palette and type, with its own editorial layout. */
.about-brand-page { background: #FAF7EF; color: #302820; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.8; }
.about-brand-page *, .about-brand-page *::before, .about-brand-page *::after { box-sizing: border-box; }
.about-brand-page p, .about-brand-page h1, .about-brand-page h2, .about-brand-page h3 { margin: 0; }
.about-brand-page a { text-decoration: none; }
.about-brand-container { width: min(1280px,calc(100% - 72px)); margin-inline: auto; }
.about-brand-page .about-eyebrow { margin: 0 0 18px; color: #464B20; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 2.7px; text-transform: uppercase; }
.about-brand-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 35px 55px; background: #FAF7EF; }
.about-brand-hero::before { position: absolute; z-index: -1; top: -110px; left: -145px; width: 440px; height: 650px; background: url('../img/about-contours.svg') no-repeat center / contain; opacity: .13; transform: rotate(-12deg); content: ''; pointer-events: none; }
.about-hero-layout { display: grid; grid-template-columns: minmax(0,.96fr) minmax(0,1.04fr); align-items: center; gap: 65px; }
.about-hero-copy { padding-block: 30px; }
.about-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 52px; color: #6B4B3B; font-size: 10px; line-height: 1.5; }
.about-breadcrumb a { color: #542006; }
.about-breadcrumb a:hover { color: #464B20; }
.site-content--page .about-brand-page .about-hero-copy h1 { margin: 0; color: #542006 !important; font-size: clamp(34px,3.9vw,53px) !important; font-weight: 800 !important; line-height: 1.16 !important; letter-spacing: .7px; text-transform: uppercase; text-wrap: balance; }
.site-content--page .about-brand-page .about-hero-copy > p:not(.about-eyebrow):not(.about-hero-location) { max-width: 490px; margin-top: 25px; color: #302820; font-size: 15px; line-height: 1.9; }
.about-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 23px; margin-top: 28px; }
.about-button { display: inline-flex; align-items: center; justify-content: center; gap: 17px; min-height: 45px; padding: 14px 23px; border: 1px solid #542006; border-radius: 3px; background: #542006; color: #FFFFFF; font-family: inherit; font-size: 10px; font-weight: 800; line-height: 1.5; letter-spacing: .8px; text-transform: uppercase; cursor: pointer; transition: background .2s,border-color .2s,color .2s; }
.about-button:hover { border-color: #464B20; background: #464B20; color: #FFFFFF; }
.about-text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 42px; padding: 10px 0; border-bottom: 2px solid #CC9138; color: #542006; font-size: 10px; font-weight: 800; line-height: 1.5; letter-spacing: .6px; text-transform: uppercase; }
.about-text-link:hover { color: #464B20; }
.site-content--page .about-brand-page .about-hero-location { display: flex; align-items: center; gap: 9px; margin-top: 35px; color: #6B4B3B; font-size: 10px; line-height: 1.6; }
.about-hero-location svg { flex: 0 0 15px; width: 15px; height: 15px; color: #464B20; }
.about-hero-photo { position: relative; min-width: 0; padding: 0 0 23px 23px; }
.about-hero-photo::before { position: absolute; z-index: -1; right: -28px; top: -28px; width: 150px; height: 150px; border: 1px solid rgba(204,145,56,.45); border-radius: 50%; content: ''; }
.about-hero-photo::after { position: absolute; z-index: -1; inset: 23px 23px 0 0; border: 1px solid rgba(204,145,56,.65); content: ''; }
.about-hero-photo > img { display: block; width: 100%; height: 540px; object-fit: cover; object-position: center 42%; border-radius: 4px; }
.about-hero-photo-note { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 18px; width: min(315px,85%); padding: 22px 25px; border: 1px solid rgba(84,32,6,.13); border-radius: 3px; background: #FFFFFF; box-shadow: 0 8px 23px rgba(84,32,6,.09); color: #542006; }
.about-hero-photo-note > svg { flex: 0 0 36px; width: 36px; height: 36px; color: #CC9138; }
.about-hero-photo-note span { display: block; margin-bottom: 8px; color: #464B20; font-size: 8px; font-weight: 600; line-height: 1.5; letter-spacing: 1.2px; text-transform: uppercase; }
.about-hero-photo-note strong { display: block; color: #542006; font-size: 15px; font-weight: 700; line-height: 1.55; }
.about-hero-photo-tag { position: absolute; top: 21px; left: 44px; max-width: calc(100% - 70px); padding: 8px 11px; border: 1px solid rgba(250,247,239,.5); border-radius: 2px; background: rgba(84,32,6,.78); color: #FFFFFF; font-size: 9px; font-weight: 700; line-height: 1.5; letter-spacing: .5px; text-transform: uppercase; }
.about-brand-ribbon { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding-inline: max(36px,calc((100% - 1280px)/2)); border-top: 1px solid rgba(84,32,6,.12); border-bottom: 1px solid rgba(84,32,6,.12); background: #FFFFFF; }
.about-brand-ribbon > span { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 82px; padding: 16px; border-right: 1px solid rgba(84,32,6,.12); color: #542006; font-size: 10px; font-weight: 700; letter-spacing: .2px; }
.about-brand-ribbon > span:last-child { border-right: 0; }
.about-brand-ribbon svg { flex: 0 0 24px; width: 24px; height: 24px; color: #CC9138; }
.about-story-section { position: relative; padding-block: 85px; background: #FFFFFF; }
.about-story-layout { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: center; gap: 75px; }
.site-content--page .about-brand-page .about-story-copy h2 { color: #542006; font-size: 30px !important; line-height: 1.4 !important; letter-spacing: .5px; }
.site-content--page .about-brand-page .about-story-copy > p:not(.about-eyebrow) { margin-top: 23px; color: #302820; font-size: 14px; line-height: 1.9; }
.about-story-opening::first-letter { float: left; margin: 5px 11px 0 0; padding: 5px 10px; background: #464B20; color: #FFFFFF; font-size: 43px; font-weight: 800; line-height: 1; }
.about-story-copy .about-text-link { margin-top: 23px; }
.about-story-photo { position: relative; padding: 0 0 28px 0; margin: 0; }
.about-story-photo > img { display: block; width: 100%; height: 430px; object-fit: cover; object-position: center 45%; border-radius: 4px; }
.about-story-photo figcaption { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 18px 24px; background: #FAF7EF; color: #542006; font-size: 11px; font-weight: 600; }
.about-story-photo figcaption > span { color: #CC9138; font-size: 20px; line-height: 1; }
.about-brand-page .about-values-section { padding-block: 70px 85px; background: #FAF7EF; }
.about-values-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; margin-top: 35px; }
.about-value-card { padding: 29px 25px; border: 1px solid rgba(84,32,6,.12); border-top: 2px solid #CC9138; border-radius: 4px; background: #FFFFFF; box-shadow: 0 5px 17px rgba(84,32,6,.05); }
.about-value-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 24px; }
.about-value-top svg { width: 34px; height: 34px; color: #464B20; }
.about-value-top > span { color: #6B4B3B; font-size: 10px; letter-spacing: 1px; }
.site-content--page .about-brand-page .about-value-card h3 { color: #542006; font-size: 17px !important; font-weight: 800 !important; line-height: 1.5 !important; }
.site-content--page .about-brand-page .about-value-card p { margin-top: 15px; color: #302820; font-size: 12px; line-height: 1.9; }
.about-people-section { overflow: hidden; padding-block: 90px; background: #542006; }
.about-people-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 75px; }
.about-people-photos { position: relative; min-width: 0; padding-bottom: 36px; }
.about-people-photos figure { overflow: hidden; margin: 0; border-radius: 4px; }
.about-people-photos figure:first-child { width: 90%; height: 380px; }
.about-people-photos figure:nth-child(2) { position: relative; width: 47%; height: 250px; margin: -70px 0 0 auto; border: 8px solid #542006; }
.about-people-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-people-photos figure:first-child img { object-position: center 50%; }
.about-people-photos figure:nth-child(2) img { object-position: center 10%; }
.about-people-photos > span { position: absolute; bottom: 7px; left: 0; color: #CC9138; font-size: 9px; line-height: 1.6; letter-spacing: 1px; text-transform: uppercase; }
.about-brand-page .about-people-copy .about-eyebrow { color: #CC9138; }
.site-content--page .about-brand-page .about-people-copy h2 { color: #FFFFFF; font-size: 31px !important; line-height: 1.4 !important; letter-spacing: .5px; }
.site-content--page .about-brand-page .about-people-copy > p:not(.about-eyebrow) { margin-top: 23px; color: #FAF7EF; font-size: 14px; line-height: 1.9; }
.about-promise-list { display: grid; gap: 19px; margin-block: 28px; }
.about-promise-list > div { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(250,247,239,.2); }
.about-promise-list > div > span { padding-top: 3px; color: #CC9138; font-size: 15px; }
.site-content--page .about-brand-page .about-promise-list p { color: #FAF7EF; font-size: 12px; line-height: 1.85; }
.about-promise-list strong { display: block; margin-bottom: 5px; color: #FFFFFF; font-size: 13px; font-weight: 700; }
.about-people-copy .about-button { border-color: #CC9138; background: #CC9138; color: #542006; }
.about-people-copy .about-button:hover { border-color: #464B20; background: #464B20; color: #FFFFFF; }
.about-brand-page .about-landscapes-section { padding-block: 75px 85px; background: #FAF7EF; }
.about-landscape-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 34px; }
.about-landscape-card { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-width: 0; min-height: 410px; overflow: hidden; border-radius: 4px; background: #6B4B3B; color: #FFFFFF; }
.about-landscape-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.about-landscape-card::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.07),rgba(0,0,0,.1) 35%,rgba(0,0,0,.81)); content: ''; }
.about-landscape-card > div { width: 100%; padding: 28px; }
.site-content--page .about-brand-page .about-landscape-card p:first-child { color: #FAF7EF; font-size: 11px; line-height: 1.6; letter-spacing: 1.5px; text-transform: uppercase; }
.site-content--page .about-brand-page .about-landscape-card h3 { margin-top: 10px; color: #FFFFFF !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.4 !important; }
.site-content--page .about-brand-page .about-landscape-card p:last-of-type { margin-top: 14px; color: #FAF7EF; font-size: 12px; line-height: 1.85; }
.about-landscape-card > div > span { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding-top: 18px; margin-top: 23px; border-top: 1px solid rgba(250,247,239,.4); color: #FFFFFF; font-size: 9px; font-weight: 700; line-height: 1.6; letter-spacing: .4px; text-transform: uppercase; }
.about-landscape-card > div > span > span { color: #CC9138; font-size: 20px; }
.about-landscape-card:hover > img { transform: scale(1.04); }
.about-brand-page .about-planning-section { padding-block: 70px 80px; background: #FFFFFF; }
.about-planning-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 35px; margin: 38px 0 0; padding: 0; list-style: none; }
.about-planning-steps li { display: flex; align-items: flex-start; gap: 20px; padding: 25px 0 0; border-top: 1px solid rgba(204,145,56,.55); }
.about-planning-steps li > span { color: #464B20; font-size: 28px; font-weight: 400; line-height: 1.1; }
.site-content--page .about-brand-page .about-planning-steps h3 { color: #542006; font-size: 16px !important; font-weight: 800 !important; line-height: 1.5 !important; }
.site-content--page .about-brand-page .about-planning-steps p { margin-top: 11px; color: #302820; font-size: 12px; line-height: 1.9; }
.about-planning-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 23px; margin-top: 35px; }
.about-brand-page a:focus-visible { outline: 3px solid #CC9138; outline-offset: 4px; }
@media (max-width: 1100px) {
    .about-hero-layout, .about-story-layout, .about-people-layout { gap: 35px; }
    .about-hero-photo > img { height: 510px; }
    .about-values-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .about-landscape-grid { gap: 18px; }
    .about-landscape-card > div { padding: 24px; }
    .about-planning-steps { gap: 24px; }
}
@media (max-width: 899px) {
    .about-hero-layout, .about-story-layout, .about-people-layout { grid-template-columns: minmax(0,1fr); gap: 35px; }
    .about-hero-copy { padding-block: 0; }
    .about-breadcrumb { margin-bottom: 32px; }
    .about-hero-photo { max-width: 620px; width: 100%; margin-inline: auto; }
    .about-hero-photo > img { height: 450px; }
    .about-story-photo > img { height: 420px; }
    .about-people-photos { max-width: 660px; width: 100%; margin-inline: auto; }
    .about-people-photos figure:first-child { height: 400px; }
    .about-landscape-grid { grid-template-columns: minmax(0,1fr); }
    .about-landscape-card { min-height: 340px; }
    .about-planning-steps { grid-template-columns: minmax(0,1fr); gap: 24px; }
}
@media (max-width: 639px) {
    .about-brand-container { width: calc(100% - 36px); }
    .about-brand-hero { padding-block: 28px 45px; }
    .about-brand-hero::before { left: -195px; opacity: .09; }
    .about-breadcrumb { margin-bottom: 29px; font-size: 9px; }
    .about-brand-page .about-eyebrow { font-size: 10px; letter-spacing: 2px; }
    .site-content--page .about-brand-page .about-hero-copy > p:not(.about-eyebrow):not(.about-hero-location) { margin-top: 20px; font-size: 14px; }
    .about-hero-actions { gap: 13px 22px; margin-top: 24px; }
    .about-hero-actions .about-button { padding-inline: 18px; font-size: 9px; }
    .site-content--page .about-brand-page .about-hero-location { margin-top: 25px; }
    .about-hero-photo { padding-left: 16px; }
    .about-hero-photo > img { height: 360px; }
    .about-hero-photo-note { width: 265px; max-width: 90%; gap: 13px; padding: 18px; }
    .about-hero-photo-note strong { font-size: 14px; }
    .about-hero-photo-tag { left: 31px; top: 15px; font-size: 8px; }
    .about-brand-ribbon { grid-template-columns: repeat(2,minmax(0,1fr)); padding-inline: 18px; }
    .about-brand-ribbon > span { justify-content: flex-start; gap: 9px; min-height: 68px; padding: 14px 9px; font-size: 9px; }
    .about-brand-ribbon > span:nth-child(2) { border-right: 0; }
    .about-brand-ribbon > span:nth-child(-n+2) { border-bottom: 1px solid rgba(84,32,6,.12); }
    .about-brand-ribbon svg { flex-basis: 20px; width: 20px; height: 20px; }
    .about-story-section, .about-people-section { padding-block: 55px; }
    .site-content--page .about-brand-page .about-story-copy h2 { font-size: 26px !important; }
    .about-story-photo > img { height: 310px; }
    .about-story-photo figcaption { gap: 11px; padding: 15px 18px; font-size: 10px; }
    .about-brand-page .about-values-section, .about-brand-page .about-landscapes-section, .about-brand-page .about-planning-section { padding: 55px 18px; }
    .about-values-grid { grid-template-columns: minmax(0,1fr); gap: 18px; margin-top: 28px; }
    .about-value-card { padding: 25px; }
    .about-people-photos figure:first-child { height: 320px; }
    .about-people-photos figure:nth-child(2) { width: 49%; height: 210px; margin-top: -55px; border-width: 6px; }
    .about-people-photos > span { font-size: 8px; letter-spacing: .7px; }
    .site-content--page .about-brand-page .about-people-copy h2 { font-size: 27px !important; }
    .about-landscape-grid { gap: 18px; margin-top: 28px; }
    .about-landscape-card { min-height: 360px; }
    .about-planning-steps { margin-top: 28px; }
    .about-planning-actions { align-items: stretch; flex-direction: column; gap: 15px; margin-top: 28px; }
    .about-planning-actions .about-text-link { align-self: center; }
}
@media (prefers-reduced-motion: reduce) { .about-landscape-card > img, .about-button { transition: none; } }