.feature-card:before,
.feature-card:nth-child(2):before {
    box-shadow: none;
    clip-path: none;
    transform: perspective(450px) rotateX(-7deg);
    border: 2px solid #222;
    border-bottom-width: 5px;
    border-radius: 3px 3px 18px 18px;
    background: #fff
}

.feature-card:after,
.feature-card:nth-child(2):after {
    right: 0;
    top: 0;
    background: #222;
    border-radius: 0 0 0 100%;
    width: 30px;
    height: 30px
}

.feature-card:is(:hover, :focus-visible):before,
.feature-card:nth-child(2):is(:hover, :focus-visible):before {
    border-color: #222;
    box-shadow: inset 0 0 0 500px #111a
}

.feature-grid {
    gap: 30px
}

.feature-card {
    filter: drop-shadow(0 8px 5px #16280c13)
}

.feature-plus {
    box-shadow: 0 4px 0 #2224
}

.feature-card h3:hover {
    color: inherit
}

#about .about-layout {
    gap: 70px;
    align-items: center
}

#about .about-copy {
    position: relative;
    padding: 25px 30px 40px;
    border-bottom: 4px solid #d5e2ce;
    border-radius: 4px 28px 4px 4px;
    background: #f5f8f2;
    box-shadow: 0 12px 24px #1d39100d;
    isolation: isolate
}

#about .about-copy>*:not(.woodwork-vignette) {
    position: relative;
    z-index: 2
}

#about .about-copy>p {
    max-width: 570px
}

#about .about-visual {
    border: 7px solid #fff;
    box-shadow: 13px 15px 0 #d9e5d2, 0 24px 45px #152c181a
}

#about .section-decor {
    display: none
}

.woodwork-vignette {
    position: absolute;
    right: -28px;
    bottom: 6px;
    width: 210px;
    height: 170px;
    z-index: 0;
    pointer-events: none;
    opacity: .2
}

.vignette-log {
    position: absolute;
    bottom: 0;
    left: 5px;
    width: 195px;
    height: 105px;
    object-fit: contain;
    animation: log-rock 8s ease-in-out infinite paused
}

.vignette-axe {
    position: absolute;
    top: 0;
    right: 27px;
    width: 100px;
    height: 125px;
    object-fit: contain;
    transform-origin: 75% 80%;
    animation: axe-poise 5s ease-in-out infinite paused
}

.in-view .vignette-log,
.in-view .vignette-axe {
    animation-play-state: running
}

.before-section {
    background: #f3f6ef
}

.before-section>.section-decor {
    display: none
}

.before-section .section-head {
    display: grid;
    grid-template-columns: 1.3fr 1fr 155px;
    align-items: center;
    gap: 30px;
    margin-bottom: 25px
}

.before-section .section-head h2 {
    margin: 0
}

.before-section .section-head p {
    margin: 0;
    max-width: 400px
}

.before-tools {
    width: 155px;
    height: 155px;
    display: flex;
    align-items: center;
    justify-content: center
}

.before-tools img {
    width: 115px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(8px 8px 4px #19371b20);
    animation: axe-poise 7s ease-in-out infinite paused
}

.before-section.in-view .before-tools img {
    animation-play-state: running
}

.before-after {
    border: 7px solid white;
    border-radius: 16px;
    box-shadow: 0 8px 0 #cedcc3, 0 20px 35px #19371b20
}

.ba-label {
    border: 1px solid #ffffff50;
    box-shadow: 0 3px 12px #0002
}

.before-section .image-caption {
    font-size: 13px;
    margin-top: 22px
}

.before-after:focus-within {
    outline: 3px solid var(--green);
    outline-offset: 5px
}

.flip-service {
    position: relative;
    min-height: 318px;
    perspective: 1200px;
    outline-offset: 7px
}

.flip-service-inner {
    height: 100%;
    min-height: 318px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.2, .72, .2, 1)
}

.flip-service.is-flipped .flip-service-inner {
    transform: rotateY(180deg)
}

.flip-service-front,
.flip-service-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 1px solid #dce5d6;
    border-bottom: 5px solid #222;
    border-radius: 4px 32px 4px 4px;
    overflow: hidden;
    box-shadow: 0 13px 24px #172b1513
}

.flip-service-front {
    padding: 33px;
    min-height: 318px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.flip-service-front .card-top {
    width: 100%;
    margin-bottom: 18px
}

.flip-service-front .line-icon {
    width: 48px;
    height: 48px
}

.flip-service-front h3 {
    font: 700 37px/1 var(--heading);
    margin: 0 0 15px
}

.flip-service-front p {
    font-size: 15px;
    line-height: 1.6;
    flex: 1;
    margin: 0 0 20px
}

.flip-service-front .text-link {
    margin-top: auto
}

.flip-service-front .corner-shape {
    display: none
}

.flip-service-back {
    position: absolute;
    inset: 0;
    background: #222;
    transform: rotateY(180deg)
}

.flip-service-back>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.flip-caption {
    position: absolute;
    inset: auto 18px 18px;
    background: #111b;
    color: #fff;
    padding: 20px 22px;
    border-left: 3px solid var(--green);
    border-radius: 2px
}

.flip-caption h3 {
    font: 700 35px/1 var(--heading);
    margin: 0 0 16px
}

.flip-caption .btn {
    font-size: 12px;
    gap: 12px;
    padding: 11px 17px
}

.flip-toggle {
    position: absolute;
    z-index: 4;
    top: 19px;
    right: 19px;
    width: 38px;
    height: 38px;
    border: 1px solid #c5d6bd;
    border-radius: 50%;
    background: #eef5e8;
    color: #22582a;
    display: grid;
    place-items: center;
    box-shadow: 0 3px 0 #b9ceb1;
    transition: background .3s, transform .3s
}

.flip-toggle:hover {
    background: #222;
    color: #fff;
    transform: rotate(15deg)
}

.project-section {
    overflow: hidden
}

.project-section>.section-decor {
    display: none
}

.project-section>.container {
    z-index: 2
}

.project-log {
    position: absolute;
    right: -25px;
    top: 15px;
    width: 230px;
    pointer-events: none;
    opacity: .18;
    z-index: 0;
    animation: log-rock 10s ease-in-out infinite paused
}

.project-log img {
    width: 100%;
    height: 160px;
    object-fit: contain
}

.project-section.in-view .project-log {
    animation-play-state: running
}

.project-card {
    border: 1px solid #ffffff38;
    border-bottom: 5px solid #111;
    border-radius: 6px 28px 6px 6px
}

.project-card .project-info,
.project-card.active .project-info {
    background: #101a14bb;
    color: #fff;
    border: 1px solid #ffffff32;
    border-left: 4px solid #5dc150;
    border-bottom: 1px solid #ffffff32;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transform: translateY(calc(100% + 24px));
    padding: 21px 23px;
    border-radius: 3px;
    box-shadow: 0 7px 20px #0003
}

.project-card:is(:hover, :focus-within) .project-info {
    transform: translateY(0)
}

.project-info h3 {
    color: white;
    font-size: 33px
}

.project-info p,
.project-info p:hover {
    color: #e6eee2;
    font-size: 14px;
    line-height: 1.5
}

.project-info .line-icon {
    display: none
}

.carousel-nav {
    justify-content: center;
    gap: 17px;
    margin-top: 30px
}

.carousel-nav button {
    border: 1px solid #9bd682;
    border-bottom: 4px solid #0c5917;
    background: var(--green);
    color: white;
    width: 51px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 6px 13px #0003
}

.carousel-nav button:hover {
    background: white;
    color: #153c1c;
    border-color: #fff;
    border-bottom-color: #bdd8b0;
    transform: translateY(-3px)
}

.carousel-nav button:active {
    transform: translateY(1px);
    box-shadow: none
}

.carousel-nav .ui-icon {
    width: 23px;
    height: 23px
}

.carousel-dots {
    display: none
}

.planning-layout {
    align-items: stretch
}

.project-tabs {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 15px
}

.project-tabs button {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px 28px
}

.plan-panel {
    min-height: 390px
}

.journey-section {
    overflow: hidden
}

.journey-section>.section-decor {
    display: none
}

.journey-grid {
    gap: 32px;
    padding: 5px 0 10px
}

.journey-grid article {
    padding: 25px 15px !important;
    background: #fff;
    border: 1px solid #dce6d5;
    border-bottom: 5px solid #c8dcbf;
    border-radius: 75px 75px 12px 12px;
    box-shadow: 0 10px 20px #1633150d;
    transition: transform .45s, box-shadow .45s
}

.journey-grid article:nth-child(even) {
    margin-top: 22px;
    margin-bottom: -22px
}

.journey-grid:before {
    display: none
}

.journey-disc {
    border: 8px solid #edf4e8;
    outline: 1px solid #b5d4a7;
    box-shadow: 0 7px 0 #d3e4c9, 0 14px 18px #183a1217
}

.journey-grid article:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 25px #16331519
}

.journey-grid h3 {
    font-size: 31px;
    margin-bottom: 14px
}

.journey-grid p {
    font-size: 14px
}

.falling-branches {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0
}

.fall-branch {
    position: absolute;
    width: 90px;
    height: 90px;
    object-fit: contain;
    top: -120px;
    left: 3%;
    opacity: .13;
    animation: branch-fall 15s linear infinite paused
}

.fall-branch:nth-child(2) {
    left: 24%;
    animation-delay: -6s;
    width: 65px
}

.fall-branch:nth-child(3) {
    left: 50%;
    animation-delay: -11s;
    animation-duration: 19s
}

.fall-branch:nth-child(4) {
    left: 73%;
    animation-delay: -3s;
    width: 72px
}

.fall-branch:nth-child(5) {
    left: 92%;
    animation-delay: -9s;
    animation-duration: 17s
}

.in-view .fall-branch {
    animation-play-state: running
}

.approach-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: 70px
}

.approach-photo {
    position: relative;
    height: 440px;
    padding: 0 35px 30px 0;
    isolation: isolate
}

.approach-photo>img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 14px 15px 0 #e0ebd8;
    transition: transform .6s
}

.approach-photo:hover>img {
    transform: translateY(-5px)
}

.approach-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    background: white;
    border-bottom: 4px solid var(--green);
    padding: 25px;
    text-align: center;
    box-shadow: 0 10px 25px #182b181f;
    font-size: 12px;
    letter-spacing: 1px
}

.approach-badge b {
    font: 700 37px/1.3 var(--heading);
    letter-spacing: 0;
    color: var(--green)
}

.approach-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px
}

.approach-notes h3 {
    font-size: 34px;
    margin-bottom: 12px
}

.approach-notes p {
    font-size: 15px;
    line-height: 1.6
}

.service-approach .ticks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 22px;
    margin: 20px 0 28px
}

.service-approach .ticks li {
    font-size: 14px
}

.service-gallery {
    background: #f4f6f0
}

.service-gallery .detail-gallery figure {
    height: 380px
}

.service-gallery .detail-gallery figure:focus .figcaption {
    transform: none
}

.service-gallery .detail-gallery figcaption {
    background: #fff
}

.service-gallery .detail-gallery figure:hover figcaption,
.service-gallery .detail-gallery figure:focus figcaption {
    background: #222;
    color: white
}

.service-gallery .detail-gallery figure:focus p {
    color: #e0e9da
}

.photo-process {
    background: #f1f4ed
}

.photo-process .process-circle {
    width: 165px;
    height: 165px;
    border: 7px solid #fff;
    outline: 1px solid #b6cea9;
    background: white;
    overflow: hidden;
    box-shadow: 0 9px 0 #d2e1c8, 0 16px 25px #18321b16
}

.photo-process .process-circle img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: none;
    transition: transform .7s
}

.photo-process article:hover .process-circle {
    transform: translateY(-5px)
}

.photo-process article:hover img {
    transform: scale(1.08)
}

.photo-process .process-circles {
    position: relative;
    gap: 35px
}

.photo-process .process-circles:before {
    content: '';
    position: absolute;
    top: 90px;
    left: 16%;
    right: 16%;
    border-top: 2px dashed #9fbb91;
    z-index: 0
}

.photo-process .process-circles article {
    position: relative;
    z-index: 1
}

.photo-process .process-circles article:nth-child(2) {
    padding-top: 30px
}

.timber-cta {
    background: #222;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 70px
}

.timber-cta .cta-photo {
    position: absolute;
    inset: 0 50% 0 0;
    z-index: -1
}

.timber-cta .cta-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.timber-cta>.container {
    width: min(1480px, calc(100% - 64px));
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    padding-left: calc(50% + 35px)
}

.timber-cta h2 {
    color: white;
    font-size: 67px;
    line-height: .96;
    margin: 0
}

.timber-cta p {
    color: #d4dfcd;
    font-size: 15px
}

.timber-cta .section-decor {
    display: none
}

.timber-cta .btn {
    background: var(--green);
    color: white
}

.team-intro {
    max-width: 390px;
    margin: 0
}

.team-intro small,
[data-reviews-note] {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    color: #65765d;
    margin-top: 8px
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px
}

.team-card {
    position: relative;
    isolation: isolate;
    transition: transform .5s
}

.team-card figure {
    height: 360px;
    overflow: hidden;
    margin: 0 0 -25px;
    border-radius: 70px 6px 6px 6px;
    border: 1px solid #d4e0ca;
    background: #d9e7d0
}

.team-card:nth-child(2) figure {
    border-radius: 6px 6px 70px 6px
}

.team-card:nth-child(3) figure {
    border-radius: 6px 70px 6px 6px
}

.team-card figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transition: transform .7s
}

.team-card>div {
    position: relative;
    margin: 0 17px;
    padding: 24px;
    background: #fff;
    border: 1px solid #dce5d6;
    border-bottom: 4px solid var(--green);
    box-shadow: 0 10px 22px #11281114;
    border-radius: 3px 22px 3px 3px
}

.team-role {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--green)
}

.team-card h3 {
    font-size: 37px;
    line-height: 1.05;
    margin: 11px 0
}

.team-card p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0
}

.team-card:is(:hover, :focus) {
    transform: translateY(-7px)
}

.team-card:is(:hover, :focus) img {
    transform: scale(1.055)
}

.team-card:nth-child(2)>div {
    background: #222;
    color: #fff
}

.team-card:nth-child(2) p {
    color: #d7e2d0
}

.team-card:nth-child(2) .team-role {
    color: #a4d687
}

.reviews-section {
    background: #f3f6ef
}

.reviews-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 45px;
    align-items: center
}

.reviews-intro {
    position: relative
}

.reviews-intro h2 {
    font-size: 61px;
    line-height: .95
}

.reviews-intro .large-quote {
    font: 700 180px/.8 var(--heading);
    display: block;
    color: #cbdcbe;
    height: 85px;
    margin-top: 25px
}

.review-card {
    flex: 0 0 calc((100% - 25px)/2);
    min-width: 0;
    background: white;
    border: 1px solid #dce5d6;
    border-bottom: 4px solid #cfdfc6;
    border-radius: 3px 27px 3px 3px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    transition: background .4s, box-shadow .4s
}

.review-mark {
    font: 700 80px/.6 var(--heading);
    color: var(--green);
    height: 39px
}

.review-card blockquote {
    font-size: 16px;
    line-height: 1.7;
    margin: 13px 0 25px;
    flex: 1
}

.review-by {
    border-top: 1px solid #e5ebdf;
    padding-top: 17px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 14px
}

.review-by span {
    font-size: 12px;
    color: #687a60
}

.review-card:hover {
    background: #222;
    color: #fff;
    border-color: #222
}

.review-card:hover .review-by span {
    color: #cfe3c3
}

.reviews-carousel .carousel-nav {
    justify-content: flex-end
}

.reviews-carousel .carousel-window {
    padding-bottom: 4px
}

.loader {
    background: #20231f;
    flex-direction: column;
    gap: 17px;
    transition: opacity .3s, visibility .3s;
    color: #f5f6f0
}

.loader-scene {
    position: relative;
    width: 155px;
    height: 125px
}

.loader .loader-log {
    position: absolute;
    width: 140px;
    height: 80px;
    bottom: 0;
    left: 0;
    animation: none;
    object-fit: contain
}

.loader .loader-axe {
    position: absolute;
    width: 83px;
    height: 104px;
    right: 8px;
    top: -5px;
    object-fit: contain;
    transform-origin: 75% 80%;
    animation: axe-poise 1.4s ease-in-out infinite paused
}

.loader.active .loader-axe {
    animation-play-state: running
}

.loader>span {
    font: 700 48px/1 var(--heading)
}

.loader>small {
    font-size: 10px;
    letter-spacing: 3px;
    color: #c8d6bd
}

.loader-line {
    width: 150px;
    height: 2px;
    background: #8cb77b;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .42s ease
}

.loader.active .loader-line {
    transform: scaleX(1)
}

.hero .hero-figure {
    position: absolute;
    left: 45%;
    bottom: 0;
    width: 49%;
    height: 90%;
    z-index: 2;
    transform: translate3d(var(--hero-dx, 0px), var(--hero-dy, 0px), 0) scale(var(--hero-scale, 1));
    transform-origin: center bottom;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), filter .4s;
    outline-offset: -12px
}

.hero .hero-figure .hero-person,
.hero.service-masthead .hero-figure .hero-person {
    position: static;
    left: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: auto
}

.hero .hero-figure:is(:hover, :focus-visible) {
    --hero-scale: 1.018;
    filter: drop-shadow(7px 0 0 #c4ff8d28)
}

.hero-word {
    animation-name: timber-type-in !important;
    animation-duration: 1.15s !important;
    animation-timing-function: cubic-bezier(.15, .75, .18, 1) !important
}

.hero-line .hero-word {
    transition: color .35s, text-shadow .35s, translate .35s
}

.hero-line .hero-word:hover {
    translate: 0 -4px;
    text-shadow: 0 5px 16px #183b2e3a;
    color: #edffd8
}

.hero .hero-front h1.aligned-hero-title em>.hero-word:hover {
    color: #ffffff24;
    -webkit-text-stroke-color: #d2ffb0
}

.hero .hero-front>p {
    transition: translate .35s, text-shadow .35s
}

.hero .hero-front>p:hover {
    translate: 3px 0;
    text-shadow: 0 4px 15px #103f2066
}

@keyframes timber-type-in {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateY(18px) skewX(-4deg)
    }

    65% {
        opacity: 1
    }

    100% {
        opacity: 1;
        clip-path: inset(0);
        transform: none
    }
}

@keyframes axe-poise {

    0%,
    100% {
        transform: rotate(-17deg) translateY(0)
    }

    50% {
        transform: rotate(6deg) translateY(-5px)
    }
}

@keyframes log-rock {

    0%,
    100% {
        transform: rotate(-4deg) translateY(0)
    }

    50% {
        transform: rotate(3deg) translateY(-9px)
    }
}

@keyframes branch-fall {
    from {
        transform: translate3d(0, -40px, 0) rotate(-25deg)
    }

    to {
        transform: translate3d(70px, 820px, 0) rotate(120deg)
    }
}

@media(min-width:1500px) {
    .hero .hero-figure {
        left: 40%;
        width: 51%
    }
}

@media(max-width:1100px) {

    #about .about-layout,
    .approach-layout {
        gap: 35px
    }

    .hero .hero-figure {
        left: 42%;
        width: 57%;
        height: 82%
    }

    .reviews-layout {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 25px
    }

    .reviews-intro h2 {
        font-size: 53px
    }

    .review-card {
        flex-basis: 100%
    }

    .team-card figure {
        height: 310px
    }

    .before-section .section-head {
        grid-template-columns: 1fr 1fr 100px;
        gap: 20px
    }

    .before-tools {
        width: 100px;
        height: 130px
    }

    .before-tools img {
        width: 95px;
        height: 125px
    }

    .journey-grid {
        gap: 20px
    }

    .journey-grid article {
        padding: 20px 12px !important
    }

    .journey-grid h3 {
        font-size: 27px
    }

    .timber-cta>.container {
        padding-left: calc(50% + 15px)
    }

    .timber-cta h2 {
        font-size: 54px
    }

    .flip-service-front {
        padding: 26px
    }

    .flip-service-front h3 {
        font-size: 33px
    }

    .approach-notes {
        gap: 16px
    }
}

@media(max-width:760px) {
    .feature-grid {
        gap: 20px
    }

    .feature-card:before,
    .feature-card:nth-child(2):before {
        transform: none;
        border-radius: 4px 16px 4px 4px
    }

    #about .about-copy {
        padding: 24px 20px 35px
    }

    #about .about-layout {
        gap: 35px
    }

    .woodwork-vignette {
        right: -8px;
        width: 140px;
        height: 120px;
        opacity: .14
    }

    .vignette-log {
        width: 140px;
        height: 75px
    }

    .vignette-axe {
        height: 85px;
        width: 70px
    }

    .before-section .section-head {
        grid-template-columns: 1fr 84px;
        gap: 15px
    }

    .before-section .section-head h2 {
        grid-column: 1
    }

    .before-section .section-head>p {
        grid-column: 1/3;
        grid-row: 2;
        font-size: 14px
    }

    .before-tools {
        grid-column: 2;
        grid-row: 1;
        width: 84px;
        height: 110px
    }

    .before-tools img {
        width: 76px;
        height: 104px
    }

    .before-after {
        border-width: 4px;
        height: 310px
    }

    .flip-service,
    .flip-service-inner,
    .flip-service-front {
        min-height: 295px
    }

    .flip-service-front {
        padding: 28px
    }

    .flip-caption h3 {
        font-size: 33px
    }

    .project-log {
        width: 145px;
        right: -20px;
        opacity: .12
    }

    .project-card .project-info,
    .project-card.active .project-info {
        transform: none;
        padding: 16px;
        background: #101a14b3
    }

    .project-info h3 {
        font-size: 28px
    }

    .project-info p {
        font-size: 13px
    }

    .project-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        gap: 9px
    }

    .project-tabs button {
        padding: 18px 11px;
        min-height: 82px;
        align-items: center;
        text-align: center
    }

    .project-tabs button span {
        font-size: 25px
    }

    .plan-panel {
        min-height: 0
    }

    .journey-grid {
        gap: 25px 15px;
        padding-bottom: 10px
    }

    .journey-grid article:nth-child(even) {
        margin: 0
    }

    .journey-grid article {
        border-radius: 65px 65px 9px 9px;
        padding: 22px 13px !important
    }

    .journey-grid h3 {
        font-size: 27px
    }

    .journey-disc {
        width: 88px;
        height: 88px
    }

    .fall-branch {
        width: 65px;
        height: 65px;
        opacity: .1
    }

    .approach-layout {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .approach-photo {
        height: 330px;
        padding: 0 22px 25px 0
    }

    .approach-badge {
        padding: 20px
    }

    .approach-notes {
        gap: 20px
    }

    .approach-notes h3 {
        font-size: 30px
    }

    .service-approach .ticks {
        grid-template-columns: 1fr
    }

    .photo-process .process-circles:before {
        display: none
    }

    .photo-process .process-circles article:nth-child(2) {
        padding-top: 0
    }

    .photo-process .process-circle {
        width: 145px;
        height: 145px
    }

    .timber-cta {
        padding-top: 255px;
        padding-bottom: 35px
    }

    .timber-cta .cta-photo {
        inset: 0 0 auto;
        height: 225px
    }

    .timber-cta>.container {
        width: calc(100% - 36px);
        padding: 0;
        text-align: left;
        gap: 18px
    }

    .timber-cta h2 {
        font-size: 49px
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .team-card figure {
        height: 390px
    }

    .team-card>div {
        padding: 23px
    }

    .team-intro {
        font-size: 15px
    }

    .reviews-layout {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .reviews-intro h2 {
        font-size: 49px
    }

    .reviews-intro .large-quote {
        display: none
    }

    .review-card {
        flex-basis: 100%;
        min-height: 280px
    }

    .reviews-carousel .carousel-nav {
        justify-content: center
    }

    .hero .hero-figure {
        height: 48%;
        width: 100%;
        left: 0
    }

    .hero .hero-figure .hero-person,
    .hero.service-masthead .hero-figure .hero-person {
        height: 100%;
        width: 100%
    }

    .loader>span {
        font-size: 40px
    }
}

@media(hover:none) {

    .project-card .project-info,
    .project-card.active .project-info {
        transform: none
    }

    .flip-service-inner {
        transition-duration: .6s
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-word {
        animation: none !important;
        opacity: 1 !important;
        clip-path: none !important;
        transform: none !important
    }

    .hero .hero-figure,
    .hero-line .hero-word,
    .hero .hero-front>p {
        transform: none !important;
        translate: none !important;
        transition: none !important
    }

    .vignette-log,
    .vignette-axe,
    .project-log,
    .fall-branch,
    .before-tools img,
    .loader .loader-axe {
        animation: none !important
    }

    .fall-branch {
        display: none
    }

    .flip-service-inner {
        transition: none
    }
}

@media(max-width:760px) {
    .photo-process .process-circles {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .photo-process .process-circles article {
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 7px 20px;
        text-align: left;
        align-items: center
    }

    .photo-process .process-circle {
        grid-row: 1/3;
        width: 95px;
        height: 95px;
        margin: 0
    }

    .photo-process .process-circles h3 {
        margin: 0;
        font-size: 30px;
        line-height: 1
    }

    .photo-process .process-circles p {
        margin: 0;
        font-size: 14px;
        line-height: 1.5
    }

    .approach-photo>img {
        border-radius: 8px
    }

    .hero .hero-figure:is(:hover, :focus-visible) {
        --hero-scale: 1
    }
}

.service-perspective {
    padding-block: 25px 55px
}

.perspective-band {
    display: grid;
    grid-template-columns: 185px 1fr 50px;
    align-items: center;
    gap: 35px;
    padding: 30px 50px 30px 30px;
    background: #222;
    color: #fff;
    border-radius: 140px 8px 8px 140px;
    box-shadow: 0 8px 0 #d7e4cd
}

.perspective-emblem {
    width: 175px;
    height: 175px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #1e9d2c;
    box-shadow: 0 0 0 7px #ffffff12;
    overflow: hidden
}

.perspective-emblem img {
    width: 145px;
    height: 130px;
    object-fit: contain;
    transition: transform .6s
}

.perspective-band:hover .perspective-emblem img {
    transform: rotate(-8deg) scale(1.06)
}

.perspective-label {
    font-size: 11px;
    letter-spacing: 1.8px;
    color: #adcf9b
}

.perspective-band h2 {
    font-size: 53px;
    line-height: 1;
    margin: 10px 0 13px;
    color: #fff
}

.perspective-band p,
.perspective-band p:hover {
    max-width: 750px;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    color: #dfe8d8
}

.perspective-quote {
    font: 700 120px/.6 var(--heading);
    color: #67b848;
    align-self: end
}

.project-log {
    opacity: .26
}

@media(max-width:760px) {
    .perspective-band {
        grid-template-columns: 80px 1fr;
        gap: 18px;
        padding: 25px 20px;
        border-radius: 45px 6px 6px 6px
    }

    .perspective-emblem {
        width: 75px;
        height: 75px
    }

    .perspective-emblem img {
        width: 65px;
        height: 65px
    }

    .perspective-band h2 {
        font-size: 36px
    }

    .perspective-band p {
        font-size: 14px
    }

    .perspective-quote {
        display: none
    }

    .perspective-label {
        font-size: 10px;
        letter-spacing: 1px
    }

    .service-perspective {
        padding-bottom: 35px
    }
}

.journey-grid {
    align-items: stretch
}

.journey-grid article:nth-child(even) {
    margin: 0
}

.journey-grid article {
    display: flex;
    flex-direction: column;
    align-items: center
}

.journey-grid article>p {
    margin-top: auto
}

.journey-disc {
    flex: none
}

.flip-service-front {
    height: 100%
}

.team-intro [hidden],
[data-reviews-note][hidden] {
    display: none !important
}

.timber-cta .cta-photo img {
    transition: transform .8s
}

.timber-cta:hover .cta-photo img {
    transform: scale(1.035)
}

@media(prefers-reduced-motion:reduce) {
    .timber-cta .cta-photo img {
        transition: none;
        transform: none !important
    }
}