@import url("./global.css") all;
@import url("./header.css") all;
@import url("./footer.css") all;

#hero {
    padding: 0;
    height: 100svh;
    min-height: 560px;
    --p: 50%;
    touch-action: pan-y;
    cursor: ew-resize;
    display:flex;
}

#spaces {
    background: var(--deep)
}

.spaces-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
    align-items: center;
    gap: 2rem
}
.wrap.hg{
    margin-top: 60px;
}
.spaces-image {
    display: block;
    width: 100%;
    height: 190px;
    border-radius: 16px;
    object-fit: cover
}

.strips {
    display: flex;
    height: 480px;
    margin-top: 2rem;
    gap: 6px
}

.strip {
    flex: 1;
    position: relative;
    overflow: hidden;
    border: 0;
    padding: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: flex .6s cubic-bezier(.7, 0, .2, 1);
    background: linear-gradient(170deg, var(--mid), var(--navy));
    clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%)
}

.strip:nth-child(even) {
    background: linear-gradient(170deg, #9C7048, #67482F);
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%)
}

.strip.on {
    flex: 5;
}

.strips .strip .strip-image {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.58);
    transition: transform .6s ease
}

.strips .strip h3,
.strips .strip span,
.strips .strip .vt {
    position: relative;
    z-index: 1
}

.strips .strip:hover .strip-image,
.strips .strip:focus-visible .strip-image {
    transform: scale(1.04)
}

.strip h3 {
    position: absolute;
    left: 1rem;
    bottom: 2.5rem;
    font-size: 2rem;
    writing-mode: vertical-rl;
    rotate: 180deg;
    transition: .4s;
    white-space: nowrap;
}

.strip.on h3 {
    writing-mode: horizontal-tb;
    rotate: 0deg;
    font-size: 3rem;
    left: 1.6rem;
}

.strip span {
    position: absolute;
    left: 1.6rem;
    right: 1.6rem;
    bottom: 1rem;
    opacity: 0;
    transition: .4s .25s;
    color: var(--silver);
    font-size: .95rem;
}

.strip.on span {
    opacity: 1
}

.strip svg {
    position: absolute;
    right: -20px;
    top: 20px;
    width: 200px;
    opacity: .12
}

@media(max-width:700px) {
    .spaces-intro {
        grid-template-columns: 1fr;
        gap: 1rem
    }

    .spaces-image {
        height: 180px
    }

    .strips {
        flex-direction: column;
        height: auto
    }

    .strip {
        flex: none;
        height: 76px;
        clip-path: none;
        transition: height .5s
    }

    .strip.on {
        height: 230px
    }

    .strip h3,
    .strip.on h3 {
        writing-mode: horizontal-tb;
        rotate: 0deg;
        font-size: 2rem;
        left: 1.2rem;
        top: 1rem;
        bottom: auto
    }
}

#range {
    background: linear-gradient(var(--deep), var(--navy) 30%)
}

.thermo {
    position: relative;
    margin-top: 3rem
}

.thermo::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 10px;
    margin-left: -5px;
    border-radius: 9px;
    background: linear-gradient(var(--ice), #D8C4A4 35%, var(--copper) 80%, var(--ember))
}

.row {
    display: grid;
    grid-template-columns: 1fr 100px 1fr;
    align-items: center;
    margin-bottom: 1.6rem
}

.row .t {
    grid-column: 2;
    text-align: center;
    font: 800 1.6rem var(--d);
    background: var(--navy);
    border: 3px solid var(--gold);
    border-radius: 50px;
    padding: .2rem 0;
    z-index: 1;
    justify-self: center;
    width: 92px;
    color: var(--gold)
}

.row button {
    grid-column: 1;
    justify-self: end;
    text-align: right;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    max-width: 380px;
    padding: .5rem 1.2rem
}

.row:nth-child(even) button {
    grid-column: 3;
    justify-self: start;
    text-align: left
}

.row button h3 {
    font-size: 2rem
}

.row button p {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s;
    color: var(--mute)
}

.row button[aria-expanded=true] p {
    max-height: 150px
}

.row button[aria-expanded=true] h3 {
    color: var(--copper)
}

@media(max-width:640px) {
    .thermo::before {
        left: 44px
    }

    .row {
        grid-template-columns: 90px 1fr
    }

    .row .t {
        grid-column: 1;
        width: 80px
    }

    .row button,
    .row:nth-child(even) button {
        grid-column: 2;
        text-align: left;
        justify-self: start
    }
}

#process {
    background: var(--navy)
}

.path {
    position: relative;
    margin-top: 3rem;
    padding-left: 2.6rem;
    border-left: 4px dashed var(--ice)
}

.step {
    position: relative;
    margin-bottom: 2.4rem;
    max-width: 520px;
    text-align: center;
}

.step::before {
    content: attr(data-n);
    position: absolute;
    left: -4.1rem;
    top: 0;
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    background: var(--gold);
    color: var(--deep);
    font: 800 1.5rem var(--d);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)
}

.step h3 {
    font-size: 2rem;
    margin-bottom: .3rem
}

.step p {
    color: var(--mute)
}

@media(min-width:900px) {
    .path {
        border: 0;
        padding: 0;
        height: 560px
    }

    .step {
        position: absolute;
        max-width: 300px;
        margin: 0
    }

    .step:nth-child(1) {
        left: 0;
        top: 0
    }

    .step:nth-child(2) {
        left: 26%;
        top: 150px
    }

    .step:nth-child(3) {
        left: 52%;
        top: 300px
    }

    .step:nth-child(4) {
        left: 76%;
        top: 430px
    }

    .step::before {
        left: 0;
        top: -3.6rem
    }

    .path::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom right, transparent 49.7%, var(--ice) 50%, transparent 50.3%);
        opacity: .35;
        z-index: -1
    }
}

#stats {
    padding: 0;
    background: var(--copper);
    color: var(--deep);
    transform: rotate(-2deg);
    margin: 2rem -2rem;
    overflow: hidden
}

.tick {
    display: flex;
    width: max-content;
    animation: mv 28s linear infinite
}

.tick span {
    font: 800 clamp(1.25rem, 3vw, 2rem) var(--d);
    padding: .8rem 1.5rem;
    white-space: nowrap;
    color:#fff;
}

.tick span::after {
    content: "❄";
    margin-left: 4rem;
    color: #fff;
}

@keyframes mv {
    to {
        transform: translateX(-50%)
    }
}

@media(prefers-reduced-motion:reduce) {
    .tick {
        animation: none
    }
}

#voices {
    background: var(--deep)
}

.vo {
    margin-top: 3rem;
    display: grid;
    gap: 2.4rem
}

.q {
    position: relative;
    padding: 1.6rem 2rem;
    max-width: 560px;
    background: var(--mid);
    border-radius: 40px 40px 40px 4px
}

.q:nth-child(2) {
    justify-self: end;
    background: #F1E7D7;
    border-radius: 40px 40px 4px 40px
}

.q:nth-child(3) {
    margin-left: 12%
}

.q p {
    font-size: 1.2rem;
    color: var(--silver)
}

.q small {
    display: block;
    margin-top: .8rem;
    color: var(--gold);
    font-weight: 600
}

#quote {
    background: linear-gradient(115deg, var(--ember), var(--navy) 55%, #E1CEB2)
}

.qg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0
}

.chip {
    padding: .5rem 1rem;
    border: 2px solid var(--ice);
    background: none;
    color: var(--ink);
    border-radius: 30px;
    font: inherit;
    cursor: pointer
}

.chip[aria-pressed=true] {
    background: var(--gold);
    color: var(--deep);
    border-color: var(--gold)
}

.f input,
.f textarea {
    width: 100%;
    margin-bottom: .8rem;
    padding: .8rem 1rem;
    border: 0;
    border-bottom: 3px solid var(--ice);
    background: #3B2B1E99;
    color: var(--ink);
    font: inherit;
    border-radius: 10px 10px 0 0
}

#ok {
    margin-top: 1rem;
    font-weight: 600;
    color: var(--gold)
}

@media(max-width:800px) {
    .qg {
        grid-template-columns: 1fr
    }
}

#spaces,
#voices {
    background: #F5EEE2;
    color: var(--navy)
}

#spaces h2,
#voices h2 {
    color: var(--navy)
}

.strip {
    color: var(--ink)
}

.q {
    background: #F8F0E3;
    box-shadow: 0 10px 30px #49362622
}

.q:nth-child(2) {
    background: #F1E7D7
}

.q p {
    color: var(--navy)
}

.q small {
    color: var(--ember)
}

.pi {
    display: block;
    width: 96px;
    margin: 0 0 .5rem auto
}

.row:nth-child(even) .pi {
    margin-left: 0
}

.pi svg {
    width: 100%;
    height: 88px
}

@media(max-width:700px) {
    .row .pi {
        margin-left: 0
    }
}

.strip h3 {
    font-size: 1.6rem
}

.strip.on h3 {
    font-size: 2.2rem
}

.row button h3,
.step h3 {
    font-size: 1.5rem
}

#spaces,
#voices {
    background: #F5EEE2
}

.strip:nth-child(even) {
    background: linear-gradient(170deg, #9C7048, #67482F)
}

#hero {
    height: 100vh;
    padding: var(--section-padding-block) var(--section-padding-inline);
    cursor: auto;
    touch-action: auto;
    background: linear-gradient(135deg, #493626, #E2CFB4);
    display: flex;
}

.hg {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 3rem;
    align-items: center
}

.hc h1 {
    font-size: clamp(2.3rem, 5vw, 3rem);
    font-weight: 800;
    color: #F8F0E3;
    text-transform: none;
    text-shadow: none
}

.hc p {
    margin: 1.2rem 0 1.8rem;
    color: var(--ice);
    font-size: 1.12rem
}

.ha {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap
}

.tr {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap;
    color: var(--ice);
    font-size: .95rem
}

.tr li::before {
    content: "✓";
    color: var(--gold);
    margin-right: .4rem;
    font-weight: 700
}

@media(prefers-reduced-motion:reduce) {
    #hero::after,
    .hc > * {
        animation: none
    }
}

.hi {
    position: relative;
    aspect-ratio: 1/1;
    width: 85%;
    justify-self: center
}

.hi .blob {
    position: absolute;
    inset: 4%;
    background: radial-gradient(circle at 30% 25%, #F8F0E3, #F0E6D8 55%, #E1CEB2);
    border-radius: 42% 58% 55% 45%/50% 45% 55% 50%
}

.hi i {
    position: absolute;
    display: block;
    filter: drop-shadow(0 14px 16px #49362666)
}

.hi i svg {
    width: 100%;
    height: auto;
    display: block
}

.h1i {
    left: 14%;
    top: 16%;
    width: 72%
}

.h2i {
    left: 8%;
    bottom: 10%;
    width: 25%
}

.h3i {
    left: 38%;
    bottom: 10%;
    width: 23%
}

.h4i {
    right: 7%;
    bottom: 12%;
    width: 28%
}

.hi span {
    position: absolute;
    background: #F8F0E3;
    color: var(--navy);
    font-weight: 700;
    padding: .5rem 1rem;
    border-radius: 99px;
    box-shadow: 0 8px 20px #49362655;
    font-size: .9rem
}

.b1 {
    right: 2%;
    top: 8%
}

.b2 {
    left: 0;
    top: 52%
}

@media(max-width:860px) {
    .hg {
        grid-template-columns: 1fr
    }

}

.chip[aria-pressed=true] {
    color: #F8F0E3
}

.step::before {
    color: #F8F0E3
}

#hero {
    background: linear-gradient(135deg, #F5EEE2 30%, #F0E6D8)
}

.hc h1 {
    color: var(--ink)
}

.hc p {
    color: #6A513C
}

.hi span {
    color: var(--ink)
}

#spaces,
#process {
    background: #F8F0E3
}

#range,
#voices {
    background: #F5EEE2
}

#spaces,
#voices,
#process,
#range {
    color: var(--ink)
}

#spaces h2,
#voices h2 {
    color: var(--ink)
}

.q p {
    color: var(--ink)
}

.row button[aria-expanded=true] h3 {
    color: var(--ember)
}

.row .t {
    background: #F8F0E3
}

#stats {
    background: #E1CEB2;
    color: var(--ink)
}

.tick span::after {
    color: var(--ember)
}

#quote {
    background: linear-gradient(135deg, #F0E5D4, #E1CEB2)
}

.f input,
.f textarea {
    background: #F8F0E3CC;
    color: var(--ink);
    border-bottom-color: var(--ice)
}

.strip:nth-child(even) {
    background: linear-gradient(170deg, #FBF8F0, #E9DDC8)
}

#industries {
    background: #F8F0E3;
    color: var(--ink)
}

.ind {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start
}

.industry-content {
    min-width: 0
}

.industry-visual {
    position: sticky;
    top: 110px;
    min-height: 600px;
    height: min(600px, calc(100vh - 120px));
    overflow: hidden;
    border-radius: 24px;
    background: var(--deep);
    box-shadow: 0 18px 45px #4A342524
}

.industry-visual::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #3B2B1E00 45%, #3B2B1EE0 100%);
    content: ""
}

.industry-visual img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover
}

.industry-visual > span {
    position: absolute;
    z-index: 1;
    right: 1.5rem;
    bottom: 1.5rem;
    left: 1.5rem;
    color: #F8F0E3;
    font: 600 clamp(1.35rem, 2.4vw, 2rem)/1.2 var(--d)
}

.ih {
    max-width: 640px;
    margin-bottom: 1.5rem
}

.ih p {
    margin: 1rem 0 1.4rem;
    color: var(--mute);
    font-size: 1.05rem
}

.industry-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem
}

.industry-points article {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: start;
    gap: .85rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid #EEE4D6
}

.industry-points article > span {
    color: var(--ember);
    font: 800 .8rem/1.5 var(--b);
    letter-spacing: .08em
}

.industry-points h3 {
    color: var(--ink);
    font-size: 1.2rem !important;
    line-height: 1.3
}

.industry-points p {
    margin-top: .2rem;
    color: var(--mute);
    font-size: 1.05rem
}

@media(max-width:860px) {
    .ind {
        grid-template-columns: 1fr
    }

    .industry-visual {
        position: relative;
        top: auto;
        height: 380px;
        min-height: 0
    }
}

@media(max-width:520px) {
    .industry-visual {
        height: 300px
    }
}

@media(max-width:768px) {
    .hc h1 {
        font-size: clamp(1.8rem, 7.5vw, 2.4rem)
    }

    .hc p {
        font-size: 1rem
    }

}

/* logo palette: navy, copper, silver, gold */
#hero,
#range,
#process,
#quote,
nav {
    --ink: #F8F1E6;
    --mute: #D8C8B2;
    --ice: #E9DECD;
    --silver: #F1E8DC;
    --ember: #C6A276
}

#hero,
#range,
#process,
#quote {
    color: var(--ink)
}

body {
    background: #F0E8DD
}

#hero {
    position: relative;
    min-height: 700px;
    height: auto;
    display: grid;
    align-items: center;
    padding: 7.5rem clamp(1.5rem, 6vw, 6rem) 4rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 78% 48%, #C6A2762B, transparent 32%),
        radial-gradient(ellipse at 8% 88%, #1476B233, transparent 30%),
        linear-gradient(120deg, #211810 0%, #33251D 54%, #191E25 100%)
}

#hero::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        radial-gradient(circle at 76% 46%, transparent 0 24%, #F8F0E30A 24.1% 24.2%, transparent 24.3%),
        radial-gradient(circle at 76% 46%, transparent 0 32%, #F8F0E308 32.1% 32.2%, transparent 32.3%);
    content: "";
    animation: hero-rings-drift 18s ease-in-out infinite alternate;
    pointer-events: none
}

#hero::before {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 44%;
    height: 100%;
    background: linear-gradient(135deg, #F8F0E308, #C6A2760A);
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
    content: "";
    pointer-events: none
}

.hg {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(100%, 1360px);
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem)
}

.hc {
    position: relative;
    z-index: 3;
    max-width: 620px;
    padding-block: 1rem
}

.hc > * {
    animation: hero-copy-enter .8s both cubic-bezier(.2, .7, .2, 1)
}

.hc > :nth-child(2) {
    animation-delay: .12s
}

.hc > :nth-child(3) {
    animation-delay: .24s
}

.hc > :nth-child(4) {
    animation-delay: .36s
}

.hc > :nth-child(5) {
    animation-delay: .48s
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--gold);
    font-size: .78rem !important;
    letter-spacing: .18em
}

.hero-kicker::before {
    width: 2.5rem;
    height: 1px;
    background: var(--gold);
    content: ""
}

.hc h1 {
    max-width: 13ch;
    margin-top: .6rem;
    font-size: clamp(2.2rem, 3.65vw, 3.75rem);
    line-height: .98;
    letter-spacing: -.035em;
    text-wrap: balance
}

.hc p {
    max-width: 45ch;
    margin: 1.2rem 0 1.6rem;
    color: #E9DECD;
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 1.75
}

.ha {
    gap: 1rem
}

.ha .btn {
    padding: .9rem 1.35rem;
    box-shadow: 0 12px 30px #C6A27630;
    transition: transform .2s ease, box-shadow .2s ease
}

.ha .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px #C6A27645
}

.ha .btn.ghost {
    border-color: #F8F0E388;
    background: #F8F0E30A;
    color: #F8F0E3
}

.tr {
    gap: .75rem 1.4rem;
    margin-top: 1.8rem;
    color: #E9DECD;
    font-size: .82rem
}

.tr li::before {
    color: var(--gold)
}

.hero-showcase {
    position: relative;
    min-width: 0;
    min-height: clamp(390px, 42vw, 550px);
    isolation: isolate;
    animation: hero-showcase-arrive 1s .15s both cubic-bezier(.2, .7, .2, 1)
}

.hero-room {
    position: absolute;
    inset: 4% 2% 5% 12%;
    width: 86%;
    height: 88%;
    border: 1px solid #F8F0E355;
    border-radius: 48% 20% 36% 18%;
    object-fit: cover;
    box-shadow: 0 30px 80px #080B1070;
    animation: hero-room-drift 18s ease-in-out infinite alternate
}

.hero-showcase-glow {
    position: absolute;
    z-index: -1;
    inset: 4% 0;
    border-radius: 50%;
    background: radial-gradient(ellipse, #279BEA55 0%, #E3953F30 42%, transparent 70%);
    filter: blur(18px);
    animation: hero-glow-pulse 5s ease-in-out infinite alternate
}

.hero-products {
    position: absolute;
    z-index: 1;
    right: -4%;
    bottom: 1%;
    width: 108%;
    max-height: 96%;
    object-fit: contain;
    filter: drop-shadow(0 24px 32px #05080B70);
    animation: hero-products-float 6s ease-in-out infinite
}

.hero-orbit {
    position: absolute;
    z-index: 2;
    display: grid;
    width: clamp(4rem, 6vw, 5.5rem);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid #F8F0E380;
    border-radius: 50%;
    background: #211810B8;
    box-shadow: 0 10px 35px #080B1055;
    color: #F8F0E3;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .1em;
    backdrop-filter: blur(8px);
    animation: hero-orbit-float 4.5s ease-in-out infinite
}

.hero-orbit-cold {
    top: 8%;
    right: 1%;
    border-color: #6DC8FFAA;
    color: #C5E9FF
}

.hero-orbit-warm {
    bottom: 12%;
    left: 0;
    border-color: #F2AF61AA;
    color: #FFD6A1;
    animation-delay: -2.2s
}

.hero-showcase-caption {
    position: absolute;
    z-index: 2;
    right: 2%;
    bottom: 2%;
    padding: .65rem 1rem;
    border: 1px solid #F8F0E34A;
    border-radius: 999px;
    background: #211810C9;
    color: #F8F0E3;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    backdrop-filter: blur(10px)
}

@keyframes hero-rings-drift {
    from { transform: translate3d(0, -1%, 0) scale(1) }
    to { transform: translate3d(-1%, 1%, 0) scale(1.04) }
}

@keyframes hero-copy-enter {
    from { opacity: 1; transform: translate3d(0, 18px, 0) }
    to { opacity: 1; transform: translate3d(0, 0, 0) }
}

@keyframes hero-showcase-arrive {
    from { opacity: 0; transform: translate3d(24px, 0, 0) }
    to { opacity: 1; transform: translate3d(0, 0, 0) }
}

@keyframes hero-room-drift {
    from { transform: scale(1) translate3d(0, 0, 0) }
    to { transform: scale(1.04) translate3d(-.5%, .5%, 0) }
}

@keyframes hero-products-float {
    0%, 100% { transform: translate3d(0, 0, 0) }
    50% { transform: translate3d(0, -12px, 0) }
}

@keyframes hero-orbit-float {
    0%, 100% { transform: translate3d(0, 0, 0) }
    50% { transform: translate3d(0, -9px, 0) }
}

@keyframes hero-glow-pulse {
    from { opacity: .55; transform: scale(.94) }
    to { opacity: 1; transform: scale(1.06) }
}

@media(prefers-reduced-motion:reduce) {
    #hero::after,
    .hc > *,
    .hero-showcase,
    .hero-room,
    .hero-showcase-glow,
    .hero-products,
    .hero-orbit {
        animation: none
    }
}

@media(max-width:860px) {
    #hero {
        min-height: 0;
        padding: 8rem 1.5rem 4rem
    }

    .hg {
        grid-template-columns: 1fr;
        gap: 1rem
    }

    .hc {
        max-width: 680px;
        padding-block: 1rem 0
    }

    .hc h1 {
        max-width: 15ch;
        font-size: clamp(2.4rem, 5.5vw, 3.5rem)
    }

    .hero-showcase {
        width: min(100%, 650px);
        min-height: clamp(310px, 58vw, 420px);
        justify-self: center
    }

    #hero::before {
        width: 100%;
        height: 54%;
        top: auto;
        bottom: 0;
        clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%)
    }
}

@media(max-width:520px) {
    #hero {
        padding: 7rem 1.25rem 2.5rem
    }

    .hg {
        gap: .5rem
    }

    .hc {
        padding-top: .4rem
    }

    .hc h1 {
        max-width: 13ch;
        font-size: clamp(2rem, 8vw, 2.7rem)
    }

    .hc p {
        margin: .9rem 0 1.2rem;
        font-size: .94rem;
        line-height: 1.6
    }

    .ha {
        gap: .6rem
    }

    .ha .btn {
        padding: .75rem .9rem;
        font-size: .85rem
    }

    .tr {
        gap: .65rem;
        margin-top: 1rem;
        font-size: .78rem
    }

    .hero-showcase {
        min-height: 280px;
        margin-top: .35rem
    }

    .hero-room {
        inset: 5% 3% 7% 8%;
        width: 89%;
        height: 85%;
        border-radius: 42% 18% 32% 16%
    }

    .hero-products {
        right: -5%;
        bottom: 0;
        width: 112%;
        max-height: 100%
    }

    .hero-orbit {
        width: 3.8rem;
        font-size: .5rem
    }

    .hero-showcase-caption {
        right: 0;
        bottom: 0;
        padding: .5rem .75rem;
        font-size: .65rem
    }
}

.hc h1 {
    color: #F8F0E3
}

.hc p {
    color: var(--ice)
}

.hi .blob {
    background: radial-gradient(circle at 30% 25%, #F8F0E3, #F1E8DC 55%, #D7C4A8)
}

.hi span {
    color: #4A3425
}

#spaces,
#industries {
    background: #F8F0E3
}

#range {
    background: linear-gradient(#3B2B1E, #4A3425)
}

.thermo::before {
    background: linear-gradient(#E1D1BA, #C5AE8E 35%, #9A6B42 80%, #704A2C)
}

#range .row .t {
    background: #3B2B1E;
    border-color: #9A6B42;
    color: #9A6B42
}

#process {
    background: #4A3425
}

.step::before {
    color: #3B2B1E
}

#stats {
    background: #9A6B42;
    color: #3B2B1E
}

.tick span::after {
    color: #fff;
}

#voices {
    background: #F0E8DD
}

.q:nth-child(2) {
    background: #F1E2CA
}

#quote {
    background: linear-gradient(120deg, #3B2B1E 35%, #704A2C)
}

.f input,
.f textarea {
    background: #F8F0E31A;
    color: #F8F0E3
}

.f ::placeholder {
    color: #E9DECD
}

nav {
    background: linear-gradient(#3B2B1E, #3B2B1E00)
}

#process {
    background: radial-gradient(ellipse at 50% 0, #6B5039 0%, #4A3425 54%)
}

.process-head {
    max-width: 690px
}

.process-kicker {
    margin-bottom: .8rem;
    color: var(--gold);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase
}

#process h2 {
    color: #F8F0E3
}

.process-intro {
    margin-top: 1rem;
    color: #E9DECD;
    font-size: 1.08rem
}

.path {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    height: auto;
    margin-top: 5rem;
    padding: 1.5rem 0 0;
    border: 0
}

.path::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, #9A6B42, #E9DECD 48%, #9A6B42);
    opacity: .75
}

.path::after {
    content: none
}

.step,
.step:nth-child(n) {
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
    max-width: none;
    min-height: 205px;
    margin: 0;
    padding: 3.6rem 1.25rem 1.4rem;
    border: 1px solid #F8F0E324;
    border-radius: 16px;
    background: linear-gradient(145deg, #F8F0E312, #F8F0E308);
    box-shadow: 0 14px 30px #3B2B1E2B;
    transition: transform .2s ease, border-color .2s ease, background .2s ease
}

.step:hover {
    transform: translateY(-5px);
    border-color: #9A6B4277;
    background: linear-gradient(145deg, #F8F0E31B, #F8F0E30A)
}

.step::before {
    left: 50%;
    top: 0;
    width: 3rem;
    height: 3rem;
    transform: translate(-50%, -50%);
    clip-path: none;
    border: 4px solid #4A3425;
    border-radius: 50%;
    background: var(--gold);
    color: #3B2B1E;
    font: 800 1rem var(--d);
    box-shadow: 0 0 0 1px #9A6B42
}

.step h3 {
    margin-bottom: .65rem;
    color: #F8F0E3;
    font-size: 1.45rem
}

.step p {
    color: #E9DECD;
    font-size: .96rem;
    line-height: 1.65
}

@media(max-width:900px) {
    .path {
        grid-template-columns: 1fr;
        gap: .9rem;
        margin-top: 3.5rem;
        padding: 1rem 0 0 2.5rem
    }

    .path::before {
        top: 2.5rem;
        bottom: 2.5rem;
        left: .75rem;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(#9A6B42, #E9DECD 50%, #9A6B42)
    }

    .step,
    .step:nth-child(n) {
        min-height: 0;
        padding: 1.4rem 1.25rem 1.35rem 2rem
    }

    .step::before {
        left: -1.75rem;
        top: 1.5rem;
        width: 2.7rem;
        height: 2.7rem;
        transform: translate(-50%, -50%)
    }
}

@media(prefers-reduced-motion:reduce) {
    .step {
        transition: none
    }

    .step:hover {
        transform: none
    }
}

#process {
    height: auto
}

.process-stage {
    width: 100%;
}

.process-stage > .wrap {
    /* width: min(100%, 1180px); */
    margin: 0 auto
}

.process-viewport {
    margin-top: 2rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--gold) #F8F0E320;
    scrollbar-width: thin
}

.path {
    display: flex;
    width: max-content;
    gap: 1rem;
    margin: 0;
    padding: 1.5rem .25rem 1rem;
    border: 0;
    will-change: transform
}

.path::before,
.path::after {
    content: none
}

#process .path .step,
#process .path .step:nth-child(n) {
    position: relative;
    inset: auto;
    flex: 0 0 clamp(280px, 34vw, 380px);
    width: auto;
    max-width: none;
    min-height: 205px;
    margin: 0;
    padding: 3.6rem 1.5rem 1.5rem;
}

#process .path .step::before {
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%)
}

@media(min-width:901px) and (prefers-reduced-motion:no-preference) {
    .process-stage {
        position: sticky;
        top: 90px;
        overflow: hidden
    }

    .process-viewport {
        overflow: hidden
    }
}

@media(max-width:900px) {
    .process-viewport {
        margin-top: 2rem
    }
}

nav.sc {
    background: rgba(14, 29, 58, .96);
    box-shadow: 0 6px 24px #3B2B1E88
}

.strip {
    color: #F8F1E6
}

.strip span {
    color: #E6D9C7
}

.strip:nth-child(even) {
    background: linear-gradient(170deg, #9A6B42, #704A2C);
    color: #3B2B1E
}

.strip:nth-child(even) span {
    color: #3B2B1E
}

.btn,
.chip[aria-pressed=true] {
    color: #3B2B1E
}

:focus-visible {
    outline-color: #9A6B42
}

.logo {
    width: 58px;
    height: 54px;
    border-radius: 0;
    background: var(--logo) center/contain no-repeat
}

nav,
nav.sc {
    --ink: #4A3425;
    --silver: #695744;
    --ice: #C8B394;
    --ember: #704A2C;
    background: #F8F0E3;
    box-shadow: 0 2px 14px #4A342522
}

.fb .logo {
    width: 80px;
    height:80px;
    border-radius: 0;
}

@media(max-width:900px) {
    .mn {
        background: #F8F0E3;
        box-shadow: 0 12px 20px #4A342522
    }

    .mn a {
        border-bottom-color: #4A34251A
    }

    nav.open {
        background: #F8F0E3
    }
}

nav .logo {
    width: 70px;
    height: 65px
}

@media(max-width:900px) {
    .mn {
        justify-self: stretch
    }

    nav .logo {
        width: 60px;
        height: 56px
    }
}

/* room strips: no rotating text, open on hover */
.strip h3,
.strip.on h3 {
    writing-mode: vertical-rl;
    rotate: 180deg;
    font-size: 1.7rem;
    left: 1rem;
    top: auto;
    bottom: 1.4rem;
    transition: none
}

.strip span {
    width: 300px;
    left: 4rem;
    right: auto;
    bottom: 1.6rem;
    transition: opacity .35s .2s
}

@media(max-width:700px) {

    .strip h3,
    .strip.on h3 {
        writing-mode: horizontal-tb;
        rotate: 0deg;
        font-size: 1.5rem;
        left: 1.2rem;
        top: 1rem;
        bottom: auto
    }

    .strip span {
        width: auto;
        left: 1.2rem;
        right: 1.2rem;
        bottom: 1rem
    }
}

.strip span {
    font-size: 1.05rem
}

@media(max-width:700px) {
    .strip.on {
        flex: none;
        height: 230px
    }

    .strip {
        transition: height .5s
    }
}

/* opened room box: heading in normal horizontal position, no rotation */
@keyframes hin {
    from {
        opacity: 0
    }
}

@media(min-width:701px) {
    .strip.on h3 {
        writing-mode: horizontal-tb;
        rotate: 0deg;
        font-size: 2.4rem;
        left: 1.8rem;
        top: 1.6rem;
        bottom: auto;
        animation: hin .45s .2s both
    }

    .strip.on span {
        left: 1.8rem;
        width: min(320px, 70%);
        bottom: 1.8rem
    }
}

@media(prefers-reduced-motion:reduce) {
    .strip.on h3 {
        animation: none
    }
}

/* smooth text: crossfade labels, staggered reveal */
.strips .strip .vt {
    position: absolute;
    left: 1rem;
    bottom: 1.9rem;
    font: 700 1.7rem var(--d);
    font-style: normal;
    letter-spacing: -.02em;
    writing-mode: vertical-rl;
    rotate: 180deg;
    white-space: nowrap;
    opacity: 1;
    transition: opacity .3s ease
}

.strips .strip.on .vt {
    opacity: 0;
    transition-duration: .15s
}

.strips .strip h3,
.strips .strip.on h3 {
    writing-mode: horizontal-tb;
    rotate: 0deg;
    left: 1.8rem;
    top: 1.6rem;
    bottom: auto;
    font-size: 2.4rem;
    animation: none;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1)
}

.strips .strip.on h3 {
    opacity: 1;
    transform: none;
    transition-delay: .25s
}

.strips .strip span {
    transform: translateY(14px);
    transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1)
}

.strips .strip.on span {
    opacity: 1;
    transform: none;
    transition-delay: .38s
}

@media(max-width:700px) {
    .strips .strip .vt {
        display: none
    }

    .strips .strip h3,
    .strips .strip.on h3 {
        opacity: 1;
        transform: none;
        font-size: 1.5rem;
        left: 1.2rem;
        top: 1rem;
        transition: none
    }
}

@media(prefers-reduced-motion:reduce) {
    .strips .strip * {
        transition: none !important
    }
}

/* Keep room labels and descriptions grouped at the bottom of each photo. */
@media(min-width:701px) {
    .strips .strip {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: .7rem;
        padding: 1.8rem 1.8rem 2.3rem
    }

    .strips .strip h3,
    .strips .strip.on h3 {
        position: static;
        order: 1;
        margin: 0
    }

    .strips .strip span,
    .strips .strip.on span {
        position: static;
        order: 2;
        width: min(340px, 100%)
    }
}

/* steady text while boxes resize */
@media(min-width:701px) {

    .strips .strip span,
    .strips .strip.on span {
        width: 340px;
        max-width: none;
        flex: none
    }

    .strips .strip {
        backface-visibility: hidden;
        transform: translateZ(0)
    }
}

/* faster opening */
@media(min-width:701px) {
    .strips .strip {
        transition: flex .35s cubic-bezier(.2, .7, .2, 1)
    }

    .strips .strip h3,
    .strips .strip.on h3 {
        transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1)
    }

    .strips .strip.on h3 {
        transition-delay: .08s
    }

    .strips .strip span {
        transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1)
    }

    .strips .strip.on span {
        transition-delay: .14s
    }

}

@media(max-width:700px) {
    .strips .strip {
        transition: height .3s ease
    }
}

/* product range: image and content, alternating sides */
.thermo::before {
    left: 50%
}

.rg {
    display: grid;
    grid-template-columns: 1fr 110px 1fr;
    grid-template-areas: "img t txt";
    align-items: center;
    gap: 0 1.5rem;
    margin-bottom: 3.5rem
}

.rg:nth-child(even) {
    grid-template-areas: "txt t img"
}

.rg .t {
    grid-area: t;
    justify-self: center;
    width: 96px;
    text-align: center;
    font: 800 1.5rem var(--d);
    background: #3B2B1E;
    border: 3px solid var(--gold);
    border-radius: 50px;
    padding: .2rem 0;
    color: var(--gold);
    z-index: 1
}

.ri {
    grid-area: img;
    justify-self: end;
    width: min(260px, 100%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 30% 25%, #F8F0E3, #F1E8DC 60%, #D7C4A8);
    border-radius: 42% 58% 55% 45%/50% 45% 55% 50%;
    padding: 1.6rem
}

.rg:nth-child(even) .ri {
    justify-self: start;
    border-radius: 58% 42% 45% 55%/45% 50% 50% 55%
}

.ri svg {
    width: 78%;
    height: auto;
    filter: drop-shadow(0 10px 12px #3B2B1E55)
}

.ri .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius:20px;
}

.rg .ri.product-photo,
.rg:nth-child(even) .ri.product-photo {
    width:100%;
    aspect-ratio: 3 / 2;
    padding: 0;
    background: none;
}

.rc {
    grid-area: txt;
}

.rg:nth-child(even) .rc {
    justify-self: end
}

.rc .tp {
    display: block;
    margin-bottom: .4rem;
    font: 700 .85rem var(--d);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--copper)
}

.rc h3 {
    font-size: 1.9rem;
    color: #F8F0E3;
    margin-bottom: .6rem
}

.rc p {
    color: var(--mute)
}

.rc ul {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: .4rem
}

.rc li {
    position: relative;
    padding-left: 1.6rem;
    font-weight: 500
}

.rc li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: 700
}

.thermo.rv .rg .ri,
.thermo.rv .rg .rc {
    opacity: 0;
    transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1)
}

.thermo.rv .rg .ri {
    transform: translateX(-40px)
}

.thermo.rv .rg .rc {
    transform: translateX(40px)
}

.thermo.rv .rg:nth-child(even) .ri {
    transform: translateX(40px)
}

.thermo.rv .rg:nth-child(even) .rc {
    transform: translateX(-40px)
}

.thermo.rv .rg.in .ri,
.thermo.rv .rg.in .rc {
    opacity: 1;
    transform: none
}

@media(prefers-reduced-motion:reduce) {

    .thermo.rv .rg .ri,
    .thermo.rv .rg .rc {
        opacity: 1;
        transform: none;
        transition: none
    }
}

@media(max-width:768px) {
    .thermo::before {
        left: 42px
    }

    .rg,
    .rg:nth-child(even) {
        grid-template-columns: 84px 1fr;
        grid-template-areas: "t img" "t txt";
        gap: 1rem 1rem;
        margin-bottom: 2.8rem;
        align-items: start
    }

    .rg .t {
        width: 76px;
        align-self: start
    }

    .ri,
    .rg:nth-child(even) .ri {
        justify-self: start;
        width: 170px
    }

    .rc,
    .rg:nth-child(even) .rc {
        justify-self: start
    }

    .rc h3 {
        font-size: 1.5rem
    }

    .thermo.rv .rg .ri,
    .thermo.rv .rg:nth-child(even) .ri {
        transform: translateY(24px)
    }

    .thermo.rv .rg .rc,
    .thermo.rv .rg:nth-child(even) .rc {
        transform: translateY(24px)
    }
}

/* full-screen mobile menu with page scroll lock */
nav,
nav.sc {
    backdrop-filter: none
}

.mn .mq {
    display: none
}

html.menu-open,
html.menu-open body {
    overflow: hidden
}

@keyframes mfade {
    from {
        opacity: 0
    }
}

@media(max-width:900px) {
    nav .mn {
        position: fixed;
        inset: 0;
        z-index: -1;
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
        padding: 100px 1.6rem 2rem;
        background: #F8F0E3;
        box-shadow: none;
        overflow-y: auto;
        overscroll-behavior: contain
    }

    nav.open .mn {
        display: flex;
        animation: mfade .25s ease
    }

    nav .mn a {
        font: 700 1.6rem var(--d);
        padding: 1.1rem 0;
        border-bottom: 1px solid #4A34251A
    }

    nav .mn a.mq {
        display: block;
        margin-top: 1.8rem;
        border: 0;
        text-align: center;
        font: 700 1.1rem var(--b);
        padding: .95rem 1.4rem
    }
}

@media(prefers-reduced-motion:reduce) {
    nav.open .mn {
        animation: none
    }
}

#voices {
    overflow: hidden;
    background: linear-gradient(145deg, #F5EFE5, #F0E6D8);
    color: var(--deep)
}

.voices-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem
}

.voices-head h2 {
    color: var(--deep)
}

.voices-head>p {
    max-width: 390px;
    margin-bottom: .3rem;
    color: #766452;
    font-size: 1.05rem
}

.voices-kicker {
    margin-bottom: .8rem;
    color: #704A2C;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase
}

.vo {
    grid-template-columns: 1.05fr .95fr;
    grid-template-rows: repeat(2, minmax(180px, auto));
    gap: 1rem;
    margin-top: 3rem
}

#voices .q {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    max-width: none;
    min-height: 180px;
    margin: 0;
    padding: 1.8rem 2rem;
    border: 1px solid #4A342512;
    border-radius: 18px;
    background: #F8F0E3;
    box-shadow: 0 12px 30px #4A34250D
}

#voices .q:nth-child(n) {
    justify-self: stretch;
    background: #F8F0E3;
    border-radius: 18px
}

#voices .q.q-featured {
    grid-row: span 2;
    min-height: 380px;
    padding: 2.5rem;
    background: linear-gradient(150deg, #4A3425, #3B2B1E);
    border: 0;
    color: #F8F0E3
}

.quote-mark {
    display: block;
    height: 3.6rem;
    color: #9A6B42;
    font: 800 6rem/.9 var(--d)
}

#voices .q p {
    max-width: 34ch;
    color: #6B5039;
    font: 600 clamp(1.25rem, 2vw, 1.65rem)/1.45 var(--d)
}

#voices .q.q-featured p {
    max-width: 23ch;
    color: #F8F0E3;
    font-size: clamp(1.5rem, 2.5vw, 2rem)
}

#voices .q .q-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #4A34251A;
    background: none;
    color: #695744
}

#voices .q.q-featured .q-meta {
    border-top-color: #F8F0E32B;
    color: #F1E8DC
}

.q-context {
    color: #704A2C;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase
}

#voices .q.q-featured .q-context {
    color: #9A6B42
}

.q-attribution {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .9rem;
    font-weight: 600
}

.q-attribution b {
    padding: .4rem .75rem;
    border-radius: 99px;
    background: #F0E8DD;
    color: #6B5039;
    font-size: .78rem
}

#voices .q.q-featured .q-attribution b {
    background: #F8F0E318;
    color: #F8F0E3
}

@media(max-width:760px) {
    .voices-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem
    }

    .voices-head h2 br {
        display: none
    }

    .vo {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        margin-top: 2rem
    }

    #voices .q.q-featured {
        grid-row: auto;
        min-height: 300px
    }
}

@media(max-width:480px) {

    #voices .q,
    #voices .q.q-featured,
    #voices .q-featured {
        padding: 1.4rem
    }

    #voices .q.q-featured {
        min-height: 280px
    }
}

.vo {
    grid-template-rows: 1fr;
    align-items: stretch
}

#voices .q-featured {
    grid-row: auto;
    padding: clamp(2rem, 4vw, 3.5rem);
    border-radius: 24px
}

.featured-quote {
    transition: opacity .2s ease, transform .2s ease
}

.q-list-viewport {
    --testimonial-card-height: 112px;
    height: calc(3 * var(--testimonial-card-height) + 2 * .8rem + .5rem);
    overflow: hidden;
    padding: .25rem;
}

.q-list {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    width: 100%
}

.q-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 112px;
    overflow: hidden;
    padding: 1.2rem 1.4rem;
    flex: 0 0 var(--testimonial-card-height);
    min-height: var(--testimonial-card-height);
    border: 1px solid #4A342516;
    border-radius: 16px;
    background: #F8F0E3;
    color: var(--deep);
    text-align: left
}

.q-choice-copy {
    display: grid;
    gap: .35rem
}

.q-choice-copy b {
    font: 800 1.05rem var(--d)
}

.q-choice-copy>span {
    color: #766452;
    font-size: .9rem
}

.q-choice-arrow {
    display: none;
    margin-left: auto;
    color: #704A2C;
    font-size: 1.3rem;
    opacity: 0
}

@media(max-width:760px) {
    .vo {
        grid-template-columns: 1fr;
        grid-template-rows: auto
    }

    .q-list-viewport {
        --testimonial-card-height: 88px
    }

    .q-choice {
        flex-basis: var(--testimonial-card-height);
        min-height: var(--testimonial-card-height)
    }
}

.strips .strip {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.strips .strip,
.strips .strip:nth-child(even) {
    color: #F8F0E3
}

.strips .strip:nth-child(even) span {
    color: #F1E8DC
}

.strips .strip:nth-child(1) {
    background-image: linear-gradient(180deg, #3B2B1E22 0%, #3B2B1E35 40%, #3B2B1EE8 100%), url("../images/room-kitchen.jpg")
}

.strips .strip:nth-child(2) {
    background-image: linear-gradient(180deg, #3B2B1E22 0%, #3B2B1E35 40%, #3B2B1EE8 100%), url("../images/room-shop.jpg")
}

.strips .strip:nth-child(3) {
    background-image: linear-gradient(180deg, #3B2B1E22 0%, #3B2B1E35 40%, #3B2B1EE8 100%), url("../images/room-home.jpg")
}

.strips .strip:nth-child(4) {
    background-image: linear-gradient(180deg, #3B2B1E22 0%, #3B2B1E35 40%, #3B2B1EE8 100%), url("../images/room-warehouse.jpg")
}

.strips .strip:nth-child(5) {
    background-image: linear-gradient(180deg, #3B2B1E22 0%, #3B2B1E35 40%, #3B2B1EE8 100%), url("../images/room-office.jpg")
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem
}

.btn.ghost {
    color: var(--ice)
}

.btn::after {
    content: "\2197";
    display: inline-block;
    font-size: 1.05em;
    line-height: 1
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem
}

.chip::after {
    content: "\2713";
    width: 0;
    overflow: hidden;
    opacity: 0
}

.chip[aria-pressed=true]::after {
    width: .8em;
    opacity: 1
}

.strips .strip::after {
    position: absolute;
    top: 1rem;
    right: 1rem;
    content: "\2197";
    color: #F8F0E3;
    font-size: 1.35rem;
    opacity: .9
}

#voices .vo > .q-featured {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    padding: 30px;
    border: 0;
    border-radius: 24px;
    background: #4A3425;
    color: #F8F0E3;
    box-shadow: 0 12px 30px #4A342522
}

#voices .vo > .q-featured .featured-quote {
    color: #F8F0E3;
    font-size: 18px !important;
}

#voices .featured-rating {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #9A6B42;
    font-size: .9rem;
    font-weight: 700
}

#voices .rating-stars {
    letter-spacing: .12em;
    font-size: 1.15rem
}

#voices .rating-value {
    color: #F1E8DC;
    font-size: .8rem
}

#voices .vo > .q-featured > .q-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding-top: 1rem;
    border-top: 1px solid #F8F0E32B;
    background: transparent;
    color: #F1E8DC
}

#voices .vo > .q-featured .featured-context {
    color: #9A6B42;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase
}

#voices .vo > .q-featured .q-attribution b {
    background: #F8F0E318;
    color: #F8F0E3
}

#voices .q-attribution {
    gap: .65rem
}

#voices .featured-avatar,
#voices .q-choice-avatar {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover
}

#voices .featured-client-details {
    display: grid;
    gap: .1rem
}

#voices .featured-author {
    color: #F8F0E3;
    font-weight: 700
}

#voices .featured-role {
    color: #E6D9C7;
    font-size: .78rem
}

#voices .q-choice-avatar {
    width: 2.75rem;
    height: 2.75rem
}

#voices .q-choice-copy {
    gap: .2rem
}

#voices .q-choice-copy .q-choice-author {
    color: #766452;
    font-size: .9rem;
    font-weight: 600
}

#voices .testimonial-placeholder-note {
    grid-column: 1 / -1;
    color: #766452;
    font-size: .78rem
}

@media(max-width:760px) {
    #voices .vo > .q-featured {
        min-height: 300px
    }
}

@media(max-width:480px) {
    #voices .vo > .q-featured {
        min-height: 280px;
        padding: 1.4rem
    }
}

h2 {
    font-size: var(--section-heading-size) !important
}

main h3,
main h4,
main h5,
main h6 {
    font-size: var(--subheading-size) !important
}

p {
    font-size: var(--body-copy-size) !important
}

#care {
    background: linear-gradient(145deg, #F0E5D4, #FBF8F0);
    color: var(--ink)
}

.care-wrap {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem)
}

.care-intro {
    display: grid;
    justify-items: start;
    gap: 1.1rem
}

.care-intro > p:not(.care-kicker) {
    max-width: 48ch;
    color: var(--mute)
}

.care-kicker {
    color: var(--ember);
    font-size: .78rem !important;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

.care-cards {
    display: grid;
    gap: .85rem
}

.care-card {
    display: grid;
    grid-template-columns: 3rem 1fr;
    align-items: start;
    column-gap: 1rem;
    row-gap: .35rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid #4A342512;
    border-radius: 16px;
    background: #F8F0E3;
    box-shadow: 0 8px 24px #4A34250B
}

.care-number {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: #9A6B421C;
    color: var(--ember);
    font: 700 .85rem var(--b)
}

.care-card h3 {
    color: var(--ink)
}

.care-card p {
    color: var(--mute)
}

@media(max-width:800px) {
    .care-wrap {
        grid-template-columns: 1fr
    }
}

#quote {
    background: linear-gradient(145deg, #F5EEE2, #F0E5D4)
}

.qg {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 20px;
}

.quote-intro {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
    padding-block: 1rem
}

.quote-intro h2 {
    color: #4A3425
}

.quote-intro > p:not(.quote-kicker) {
    max-width: 42ch;
    color: #695744
}

.quote-intro .quote-detail {
    max-width: 44ch;
    color: #695744
}

.quote-kicker {
    color: #704A2C;
    font-size: .78rem !important;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase
}

.about-kicker,
.care-kicker,
.process-kicker,
.voices-kicker,
.quote-kicker,
.spaces-kicker,
.hero-kicker,
.range-kicker,
.industries-kicker {
    display: block;
    font-size: 12px !important
}

.hero-kicker,
.range-kicker,
.industries-kicker {
    margin-bottom: .7rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase
}

.hero-kicker,
.range-kicker {
    color: var(--gold)
}

.industries-kicker {
    color: var(--ember)
}

.spaces-kicker {
    margin-bottom: .8rem;
    color: var(--gold);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase
}

.quote-points {
    display: grid;
    gap: .55rem;
    margin-top: .35rem;
    color: #4A3425;
    font-size: .92rem
}

.quote-points span::before {
    margin-right: .65rem;
    color: #704A2C;
    content: "\2713";
    font-weight: 700
}

.quote-contact {
    display: grid;
    gap: .6rem;
    margin-top: .35rem;
    font-size: .95rem;
    font-weight: 600
}

.quote-contact a {
    color: #4A3425;
    text-decoration-color: #704A2C;
    text-underline-offset: .2em
}

.f {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid #F8F0E326;
    border-radius: 20px;
    background: linear-gradient(145deg, #6B5039, #4A3425);
    box-shadow: 0 18px 45px #3B2B1E30;
    color: #F8F0E3
}

.quote-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem
}

.f label {
    display: grid;
    gap: .4rem;
    margin-bottom: 1rem;
    color: #F8F0E3;
    font-size: .88rem;
    font-weight: 600
}

.f .required-mark {
    color: #C6A276
}

.f input,
.f select,
.f textarea {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: .8rem .9rem;
    border: 1px solid #E9DECD;
    border-radius: 9px;
    background: #F8F0E3;
    color: #4A3425;
    font: 400 15px/1.5 var(--b)
}

.f textarea {
    resize: vertical
}

.f input::placeholder,
.f textarea::placeholder {
    color: #766452;
    opacity: 1
}

.f input:focus,
.f select:focus,
.f textarea:focus {
    outline: 2px solid var(--gold);
    outline-offset: 1px
}

.f .btn {
    margin-top: .25rem
}

#ok {
    color: #C6A276
}

@media(max-width:800px) {
    .qg {
        grid-template-columns: 1fr;
        gap: 2rem
    }
}

@media(max-width:520px) {
    .quote-fields {
        grid-template-columns: 1fr;
        gap: 0
    }
}

#about {
    overflow: hidden;
    background: linear-gradient(145deg, #FBF8F0, #F0E5D4);
    color: var(--ink)
}

.about-grid {
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem)
}

.about-visual {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 390px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 24px;
    background: linear-gradient(145deg, #6B5039, #3B2B1E);
    box-shadow: 0 18px 45px #4A342524
}

.about-visual::before,
.about-visual::after {
    position: absolute;
    z-index: 1;
    content: ""
}

.about-visual::before {
    inset: 0;
    background: linear-gradient(180deg, #3B2B1E10 15%, #3B2B1EEB 100%)
}

.about-visual::after {
    inset: 0;
    border: 1px solid #F8F0E320;
    border-radius: inherit;
    pointer-events: none
}

.about-image {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.about-visual > :not(.about-image) {
    position: relative;
    z-index: 2
}

.about-visual-kicker {
    margin-bottom: .45rem;
    color: #C6A276;
    font-size: .78rem !important;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

.about-visual-title {
    max-width: 12ch;
    color: #F8F0E3;
    font: 600 clamp(1.65rem, 3vw, 2.3rem)/1.15 var(--d)
}

.about-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem
}

.about-badges span {
    padding: .45rem .7rem;
    border: 1px solid #F8F0E335;
    border-radius: 99px;
    color: #F1E8DC;
    font-size: .75rem;
    line-height: 1.4
}

.about-copy {
    min-width: 0
}

.about-kicker {
    margin-bottom: .7rem;
    color: var(--ember);
    font-size: .78rem !important;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase
}

.about-copy h2 {
    color: var(--ink)
}

.about-description {
    margin-top: 1rem;
    color: var(--mute);
    text-align: justify;
}

.about-services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-top: 2rem
}

.about-services article {
    min-width: 0;
    padding: 1rem;
    border-top: 2px solid var(--gold);
    border-radius: 0 0 12px 12px;
    background: #F8F0E3;
    box-shadow: 0 8px 24px #4A34250B
}

.about-services article > span {
    color: var(--ember);
    font: 700 .8rem var(--b)
}

.about-services h3 {
    margin-top: .7rem;
    color: var(--ink)
}

.about-services p {
    margin-top: .5rem;
    color: var(--mute)
}

@media(max-width:900px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .about-visual {
        min-height: 300px
    }
}

@media(max-width:600px) {
    .about-services {
        grid-template-columns: 1fr
    }

    .about-services article {
        padding: .9rem 1rem
    }

    .about-visual {
        min-height: 270px
    }
}