.home-hero {
    --hero-height:clamp(300px,45vw,570px);
    position:relative;
    overflow:hidden;
    background:#e9dfcd;
    touch-action:pan-y;
}
.hero-track {
    display:flex;
    transition:transform .7s cubic-bezier(.25,.7,.25,1);
}
.hero-slide {
    display:flex;
    flex:0 0 100%;
    min-width:0;
    position:relative;
    min-height:var(--hero-height);
    overflow:hidden;
    background:#ece2d1;
}
.hero-slide-2 {
    background:#e5e2db;
}
.hero-slide-3 {
    background:#e7dfd0;
}
.hero-image {
    position:absolute;
    width:100%;
    height:100%;
    right:0;
    top:0;
    object-fit:cover;
    object-position:right center;
}
.hero-slide::after {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,#e9dfcd 0%,#e9dfcde0 24%,#e9dfcd00 57%);
}
.hero-slide-2::after {
    background:linear-gradient(90deg,#e5e2db 0%,#e5e2dbe0 24%,#e5e2db00 57%);
}
.hero-slide-3::after {
    background:linear-gradient(90deg,#e7dfd0 0%,#e7dfd0e0 24%,#e7dfd000 57%);
}
.hero-content {
    position:relative;
    z-index:2;
    min-height:var(--hero-height);
    display:flex;
    align-items:center;
    padding-block:clamp(24px,4vw,55px);
}
.hero-content > div {
    max-width:min(590px,53%);
}
.hero-content h1 {
    font-size:clamp(28px,4.1vw,57px);
    font-weight:600;
    line-height:1.13;
    letter-spacing:-1.6px;
    color:#233d49;
}
.hero-content p {
    max-width:420px;
    font-size:clamp(14px,1.3vw,17px);
    line-height:1.75;
    margin:clamp(12px,2vw,27px) 0 clamp(16px,2.4vw,32px);
    color:#4a5c65;
}
.hero-content .secondary {
    border-color:#9eaaa9;
    background:#faf7f13b;
}
.hero-prev, .hero-next {
    position:absolute;
    z-index:3;
    top:calc(50% - 23px);
    background:#fbfaf650;
    border-radius:50%;
    color:#455c68;
    transition:background .2s, color .2s, box-shadow .2s;
}
.hero-prev:hover,
.hero-prev:focus-visible,
.hero-next:hover,
.hero-next:focus-visible {
    color:white;
    background:var(--accent);
    box-shadow:0 4px 18px #263c4833;
}
.hero-prev {
    left:18px;
    transform:rotate(180deg);
}
.hero-next {
    right:18px;
}
.hero-dots {
    position:absolute;
    z-index:3;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
}
.hero-dots button {
    border:0;
    width:26px;
    height:3px;
    background:#75858b80;
    padding:0;
    border-radius:0;
}
.hero-dots [aria-pressed="true"] {
    background:#a85308;
}
.benefits {
    display: flex;
    gap: 20px;
    padding-top: 0;
    padding-bottom: 65px;
}
.benefit {
    flex: 1;
    min-width: 0;
    padding: 28px 24px;
    background: #fffdf8;
    border: 1px solid #dfd5c6;
    border-radius: 8px;
    box-shadow: 0 6px 20px #263c4808;
}
.benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: var(--accent);
    background: #f5e8d4;
}
.benefit-icon .icon {
    width: 28px;
    height: 28px;
}
.benefit h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin: 20px 0 12px;
}
.benefit p {
    color: #62757b;
    line-height: 1.8;
}
.expertise {
    background:#edf1f1;
    padding-block:78px;
}
.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    margin-bottom:35px;
}
.section-heading h2 {
    font-size:36px;
    line-height:1.25;
    font-weight:500;
    max-width:650px;
}
.section-heading .text-link {
    white-space:nowrap;
    color:var(--accent);
}
.expertise-cards {
    display:flex;
    gap:30px;
}
.expertise-card {
    flex:1;
    min-width:0;
    background:#fafaf7;
}
.marketing-photo {
    display:block;
    overflow:hidden;
}
.expertise-card img {
    display:block;
    width:100%;
    aspect-ratio:1.5;
    object-fit:cover;
}
.marketing-photo img {
    transition:transform .4s;
}
.marketing-photo:hover img, .marketing-photo:focus-visible img {
    transform:scale(1.035);
}
.expertise-card > div {
    padding:30px;
}
.expertise-card h3 {
    font-size:22px;
    font-weight:500;
}
.expertise-card h3::after {
    content:'';
    display:block;
    width:32px;
    height:2px;
    background:#cb8a3d;
    margin:17px 0;
}
.expertise-card p {
    color:#69777e;
    line-height:1.85;
}
.home-story {
    padding-block:95px;
    background:#f4f0e7;
}
.story-layout {
    display:flex;
    align-items:center;
}
.story-image {
    flex:0 0 58%;
}
.story-image img {
    width:100%;
    height:460px;
    object-fit:cover;
    display:block;
}
.story-copy {
    position:relative;
    z-index:2;
    margin-left:-70px;
    padding:52px;
    background:#fbfaf6;
    box-shadow:0 15px 45px #344b5010;
}
.story-copy h2 {
    font-size:34px;
    line-height:1.3;
    font-weight:500;
}
.story-copy p {
    color:#6a787d;
    margin:25px 0;
    font-size:15px;
    line-height:1.9;
}
@media (min-width:901px) {
    .hero-image {
        width:auto;
        object-fit:contain;
    }
}
@media (max-width:1350px) {
    .hero-prev, .hero-next {
        width:32px;
        height:32px;
        top:auto;
        bottom:20px;
    }
    .hero-content {
        padding-bottom:60px;
    }
    .hero-content h1 {
        max-width:500px;
    }
}
@media (max-width:900px) {
    .benefits {
        flex-wrap: wrap;
    }
    .benefit {
        flex: 0 0 calc(50% - 10px);
    }
    .hero-content .button {
        padding:10px 16px;
        font-size:13px;
    }
    .expertise-cards {
        gap:18px;
    }
    .expertise-card > div {
        padding:23px;
    }
    .story-copy {
        padding:30px;
        margin-left:-40px;
    }
    .story-copy h2 {
        font-size:28px;
    }
}
@media (max-width:640px) {
    .hero-content {
        align-items:center;
        padding-top:24px;
        padding-bottom:60px;
        text-align:center;
    }
    .hero-content > div {
        max-width:100%;
        width:100%;
    }
    .hero-content h1 {
        font-size:28px;
        letter-spacing:-.8px;
    }
    .hero-content p {
        max-width:330px;
        margin:12px auto 16px;
        font-size:14px;
        line-height:1.6;
    }
    .hero-content .button-row {
        justify-content:center;
    }
    .hero-image {
        object-position:80% 60%;
    }
    .hero-slide::after {
        background:linear-gradient(180deg,#e9dfcdbf 0%,#e9dfcd8c 50%,#e9dfcd00 78%);
    }
    .hero-slide-2::after {
        background:linear-gradient(180deg,#e5e2dbbf 0%,#e5e2db8c 50%,#e5e2db00 78%);
    }
    .hero-slide-3::after {
        background:linear-gradient(180deg,#e7dfd0bf 0%,#e7dfd08c 50%,#e7dfd000 78%);
    }
    .benefits {
        gap: 16px;
        padding-top: 0;
        padding-bottom: 35px;
    }
    .benefit {
        flex-basis: 100%;
        padding: 24px;
    }
    .section-heading {
        display:block;
    }
    .section-heading h2 {
        font-size:29px;
        margin-bottom:20px;
    }
    .expertise, .home-story {
        padding-block:50px;
    }
    .expertise-cards, .story-layout {
        flex-direction:column;
    }
    .expertise-card {
        width:100%;
    }
    .story-copy {
        margin:-35px 15px 0;
        padding:28px;
    }
    .story-image img {
        height:320px;
    }
}
@media (prefers-reduced-motion:reduce) {
    .hero-track, .marketing-photo img {
        transition:none;
    }
}

.range-layout {
    display: flex;
    align-items: center;
    gap: 65px;
}
.range-layout > div, .range-layout > a {
    flex: 1;
    min-width: 0;
}
.range-layout h2 {
    font-size: 34px;
    font-weight: 500;
    line-height: 1.3;
}
.range-layout p {
    margin: 24px 0 30px;
    color: #62757b;
    font-size: 16px;
}
.range-layout img {
    width: 100%;
    height: auto;
}
@media (max-width: 900px) {
    .range-layout {
        gap: 35px;
    }
}
@media (max-width: 640px) {
    .range-layout {
        flex-direction: column;
        align-items: stretch;
    }
    .range-layout h2 {
        font-size: 29px;
    }
}
