.hero {
    height: calc(100svh - 96px);
    min-height: 640px;
    max-height: 1000px;
    position: relative;
    color: white;
}
.hero > img {
    position: absolute;
    height: 100%;
    object-position: center 56%;
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,#141b16a6, #141b1644 55%, transparent),linear-gradient(0deg,#101a1570,transparent 35%);
}
.hero-content {
    position: absolute;
    top: 48%;
    left: 8%;
    transform: translateY(-50%);
    z-index: 1;
}
.hero-content .eyebrow {
    color: #e6d8bf;
    font-size: 13px;
}
.hero h1 {
    font-size: clamp(42px,4.7vw,78px);
    line-height: 1.55;
    font-weight: 700;
    margin: 25px 0;
}
.hero-content p {
    font-size: 15px;
    letter-spacing: .08em;
    color: #e5e4dc;
    margin-bottom: 30px;
}
.hero-bottom {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 26px;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    border-top: 1px solid #ffffff40;
    padding-top: 20px;
    font-size: 13px;
    letter-spacing: .13em;
}
.story {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 5%;
    align-items: center;
    padding-top: 125px;
    padding-bottom: 125px;
}
.story-title h2 {
    font-size: clamp(27px,2.5vw,40px);
}
.serif-word {
    display: block;
    font: italic 38px Georgia,serif;
    color: #b8b39e;
    margin-top: 40px;
}
.story-image {
    position: relative;
    padding-bottom: 30px;
}
.story-image img {
    aspect-ratio: .9;
}
.story-image span {
    position: absolute;
    right: -18px;
    bottom: 0;
    background: var(--green);
    color: white;
    padding: 16px 25px;
    font-size: 13px;
    letter-spacing: .15em;
}
.story-copy p {
    font-size: 16px;
    color: var(--muted);
}
.story-copy .tiny-label {
    display: block;
    position: relative;
    margin-bottom: 28px;
    padding-bottom: 20px;
    color: #2c4534;
    font-family: var(--font-sans);
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 700;
    letter-spacing: .08em;
}
.story-copy .tiny-label::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 56px;
    height: 2px;
    background: #a38350;
}
.story-copy .button {
    margin-top: 20px;
}
.product-home {
    background: #eaece3;
}
.product-feature {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
}
.product-feature .product-card:nth-child(even) {
    margin-top: 50px;
}
.product-feature .product-image img {
    aspect-ratio: .85;
}
.service-home {
    background: var(--green);
    color: var(--paper);
}
.service-home .section-heading {
    margin: 0;
    padding-top: 80px;
    padding-bottom: 50px;
}
.service-home .section-heading p {
    font-size: 14px;
    color: #bcc5b9;
}
.service-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
.service-grid .service-card {
    min-height: 510px;
    border-right: 1px solid #ffffff40;
}
.values {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 40px;
    background: linear-gradient(#f5f3edf2,#f5f3edf2),url('../images/background.jpg') center/cover;
}
.values h2 {
    margin-bottom: 45px;
}
.news-home {
    border-top: 1px solid var(--line);
}
@media (max-width: 1000px) {
    .story {
        grid-template-columns: 1fr 1fr;
    }
    .story-copy {
        grid-column: 1/-1;
        max-width: 650px;
    }
    .service-grid {
        grid-template-columns: 1fr 1fr;
    }
    .values {
        grid-template-columns: 1fr;
    }
    
}
@media (max-width: 600px) {
    .hero {
        height: calc(92svh - 78px);
        min-height: 570px;
    }
    .hero-content {
        left: 7%;
        right: 7%;
        top: 45%;
    }
    .hero h1 {
        font-size: clamp(26px, 7.3vw, 34px);
    }
    .hero-content .eyebrow {
        font-size: 13px;
    }
    .hero-content p {
        font-size: 13px;
    }
    .hero-bottom span:last-child {
        display: none;
    }
    .hero-bottom {
        font-size: 13px;
        gap: 20px;
    }
    .story {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .serif-word {
        margin-top: 15px;
    }
    .story-image img {
        aspect-ratio: 1.2;
    }
    .product-feature {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    .product-feature .product-card:nth-child(even) {
        margin-top: 30px;
    }
    .card-caption h3 {
        font-size: 17px;
    }
    .service-grid {
        grid-template-columns: 1fr;
    }
    .service-grid .service-card {
        min-height: 390px;
    }
    
}

/* Layered timber surfaces and restrained, user-controllable motion. */
.hero {
    overflow: hidden;
}
.hero > img {
    height: 112%;
    top: -6%;
    transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.02);
    animation: hero-breathe 18s ease-in-out infinite alternate;
}
.hero h1 {
    font-weight: 700;
    text-shadow: 0 3px 25px #07130e50;
}
.hero-content > * {
    animation: hero-arrive 1s both;
}
.hero-content h1 {
    animation-delay: .15s;
}
.hero-content p {
    animation-delay: .3s;
}
.hero-content .button {
    animation-delay: .45s;
}


.story {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #f5f3eddf, #f5f3edab), url('../images/background.jpg') center / cover;
}
.story::before {
    content: '';
    position: absolute;
    width: 460px;
    height: 460px;
    border: 1px solid #ad906737;
    box-shadow: 0 0 0 32px #ad906711, 0 0 0 65px #ad90670b;
    border-radius: 50%;
    left: -240px;
    top: 130px;
    pointer-events: none;
}
.story > * {
    position: relative;
}
.story-image img {
    box-shadow: 18px 18px 0 #ab8b5730;
}
.product-home {
    background: linear-gradient(90deg, #e5ddcce8, #ece5d4d6), url('../images/background.jpg') center / cover;
    border-top: 1px solid #bfae904f;
}
.product-home .product-image {
    box-shadow: 0 18px 35px #51432b12;
}
.product-feature .product-card {
    transition: translate .5s;
}
.product-feature .product-card:hover {
    translate: 0 -10px;
}
.service-home .section-heading {
    background: linear-gradient(90deg, #1a3027ed, #1a3027b5), url('../images/timber-contact.jpg') center / cover;
}
.service-card:focus-visible::after,
.service-card:hover::after {
    background: linear-gradient(0deg, #101b15f5, #14201910);
}
.service-card:hover h3 {
    color: #e9c896;
}
.forest-story {
    position: relative;
    min-height: 590px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 90px 8%;
    color: #fffdf5;
    background: #193b2b;
}
.forest-story::before {
    content: '';
    position: absolute;
    inset: -85px 0;
    background: linear-gradient(90deg, #11271ecf, #142d2040), url('../images/factory-aisle.jpg') center / cover;
    transform: translate3d(0, var(--forest-shift, 0px), 0);
}
.forest-story-copy {
    position: relative;
    z-index: 1;
    max-width: 760px;
}
.forest-story h2 {
    font-size: clamp(32px, 3.6vw, 58px);
}
.forest-story .eyebrow {
    color: #e4cfa8;
}
.forest-story p {
    color: #e5e9da;
}
.forest-caption {
    position: absolute;
    right: 5%;
    bottom: 30px;
    font-size: 13px;
    letter-spacing: .18em;
}
.material-ribbon {
    overflow: hidden;
    padding: 22px 0;
    background: #b3915e;
    color: #172c23;
}
.ribbon-track {
    display: flex;
    width: max-content;
    animation: ribbon-travel 34s linear infinite;
}
.ribbon-track span {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 20px;
    letter-spacing: .2em;
    font-weight: 700;
    padding-right: 35px;
}
.ribbon-track b {
    margin: 0 35px;
    font-size: 15px;
}
.values {
    background: linear-gradient(90deg, #f7f4ecf2, #f7f4eccc), url('../images/service/02.jpg') center / cover;
}
.values .value-grid article {
    background: #fffcf1cc;
    padding: 28px;
    border-top: 3px solid #a28250;
    box-shadow: 0 12px 35px #51432b09;
}
.news-home {
    background: linear-gradient(#e8ece4ef, #e8ece4d9), url('../images/factory-banner.jpg') center / cover;
}
.news-home .news-card {
    background: #f9f8f0;
    box-shadow: 0 12px 35px #172b2110;
    transition: translate .4s, box-shadow .4s;
}
.news-home .news-card:hover {
    translate: 0 -8px;
    box-shadow: 0 20px 45px #172b2120;
}
.news-home .news-card > div {
    padding: 25px;
}
.reveal-ready {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .85s ease var(--reveal-delay, 0ms), transform .85s ease var(--reveal-delay, 0ms);
}
.reveal-ready.is-visible {
    opacity: 1;
    transform: none;
}
.motion-paused *,
.motion-paused *::before {
    animation-play-state: paused !important;
}
.motion-paused .reveal-ready {
    opacity: 1;
    transform: none;
    transition: none;
}
.motion-paused .hero-content > * {
    animation: none;
    opacity: 1;
    translate: none;
}
@keyframes hero-breathe {
    from { scale: 1; }
    to { scale: 1.07; }
}
@keyframes hero-arrive {
    from { opacity: 0; translate: 0 22px; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes ribbon-travel {
    to { transform: translateX(-50%); }
}
@media (max-width: 900px) {
    .hero-bottom {
        flex-wrap: wrap;
        row-gap: 8px;
        font-size: 13px;
        letter-spacing: .04em;
    }
    .hero-bottom span:last-child {
        display: none;
    }
    .forest-story {
        min-height: 540px;
        padding: 70px 6%;
    }
}
@media (max-width: 600px) {
    .hero {
        min-height: 650px;
    }
    .hero-content .eyebrow {
        max-width: 280px;
        letter-spacing: .1em;
    }
    .hero-bottom {
        flex-direction: column;
        gap: 7px;
    }

    .forest-story h2 {
        font-size: 30px;
    }
    .forest-story {
        min-height: 540px;
    }
    .forest-story::before {
        background-position: 62% center;
    }
    .values .value-grid article {
        padding: 24px;
    }
    .card-caption > span {
        letter-spacing: .02em;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero > img,
    .forest-story::before {
        transform: none;
        scale: 1;
    }
    .reveal-ready,
    .hero-content > * {
        opacity: 1;
        transform: none;
        translate: none;
    }
}



/* Homepage services: clear typography and numbered cards. */
.service-home {
    padding: 85px 6%;
    background: #ebe7dd;
    color: var(--ink);
}
.service-home .section-heading {
    padding: 0 0 38px;
    background: none;
    align-items: end;
    gap: 30px;
}
.service-home .section-heading h2 {
    margin-bottom: 0;
}
.service-home .eyebrow {
    color: #80643c;
}
.service-home .section-heading p {
    font-size: 16px;
    color: #62685f;
    margin-bottom: 0;
}
.service-home .service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.service-home .service-card {
    display: block;
    position: relative;
    min-height: 330px;
    padding: 30px 25px 65px;
    border: 1px solid #d2cbbc;
    border-top: 3px solid #a38350;
    background: #faf8f2;
    color: var(--ink);
    transition: transform .25s, background .25s, box-shadow .25s;
}
.service-home .service-card::after {
    display: none;
}
.service-home .service-card > div {
    position: static;
    padding: 0;
    inset: auto;
}
.service-home .service-card div > span:first-child {
    display: block;
    color: #89704b;
    font-size: 14px;
    letter-spacing: .12em;
    margin-bottom: 28px;
}
.service-home .service-card h3 {
    font-family: var(--font-sans);
    font-size: 23px;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 18px;
}
.service-home .service-card p {
    font-size: 16px;
    line-height: 1.85;
    color: #62685f;
    margin: 0;
}
.service-home .service-arrow {
    position: absolute;
    right: 25px;
    bottom: 20px;
    font-size: 24px;
    color: #80643c;
}
.service-home .service-card:hover,
.service-home .service-card:focus-visible {
    transform: translateY(-5px);
    background: #fffdf8;
    box-shadow: 0 12px 25px #28362e12;
}
.service-home .service-card:hover h3 {
    color: var(--green);
}
@media (max-width: 1100px) {
    .service-home .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .service-home .service-card {
        min-height: 290px;
    }
}
@media (max-width: 600px) {
    .service-home {
        padding: 55px 6%;
    }
    .service-home .section-heading {
        align-items: start;
    }
    .service-home .service-grid {
        grid-template-columns: 1fr;
    }
    .service-home .service-card {
        min-height: 0;
        padding: 25px 24px 65px;
    }
    .service-home .service-card div > span:first-child {
        margin-bottom: 18px;
    }
}

.product-supply-intro {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 25px;
    margin: 0 0 48px;
    padding: 26px 0;
    border-top: 1px solid #b5a586;
    border-bottom: 1px solid #cfc4af;
}
.product-supply-intro h3 {
    margin: 0;
    font-size: 20px;
    color: var(--green);
}
.product-supply-intro p {
    margin: 0;
    font-size: 16px;
    line-height: 2;
    color: #535b50;
}
@media (max-width: 600px) {
    .product-supply-intro {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 30px;
    }
}