@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: #0A2C4E;
    color: #FFFFFF
}

.spaces-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
    align-items: center;
    gap: 2rem
}

.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, #103B64, #0A2C4E);
    clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%)
}

.strip:nth-child(even) {
    background: linear-gradient(170deg, #164673, #07213B);
    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(#7CB0D6, #A0CBE8 35%, #BF6319 80%, #94490C)
}

.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
    }
}

/* 3D Dimensional Ribbon Strip - Signature Gold & Deep Espresso */
#stats {
    position: relative;
    z-index: 5;
    padding: 0.85rem 0;
    background: linear-gradient(180deg, #D47427 0%, #BF6319 35%, #A85412 70%, #8A4108 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(10, 44, 78, 0.5);
    box-shadow:
        0 10px 24px -4px rgba(7, 33, 59, 0.35),
        inset 0 2px 3px rgba(255, 255, 255, 0.45),
        inset 0 -2px 4px rgba(10, 44, 78, 0.3);
    color: #FFFFFF;
    overflow: hidden;
    perspective: 1000px;
}

.tick {
    display: flex;
    align-items: center;
    width: max-content;
    animation: mv 32s linear infinite;
    user-select: none;
    will-change: transform;
    transform-style: preserve-3d;
}

.tick:hover {
    animation-play-state: paused;
}

.tick-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.98rem;
    font-weight: 550;
    letter-spacing: .02em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    transition:
        transform .3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        color .3s ease,
        text-shadow .3s ease,
        opacity .3s ease;
}

/* Zero layout-shift spacer reserving width for bold state */
.tick-item::after {
    display: block;
    content: attr(data-text);
    font-weight: 800;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    user-select: none;
    pointer-events: none;
}

.tick-sep {
    display: inline-block;
    margin: 0 2.8rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: .85rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    user-select: none;
}

/* Fallback support for plain span usage */
.tick span {
    white-space: nowrap;
}

/* 3D Raised Floating Center State */
.tick-item.is-center,
.tick span.is-center {
    color: #FFFFFF;
    font-weight: 800;
    transform: scale(1.12) translateY(-2px);
    background: linear-gradient(180deg, #0A2C4E 0%, #07213B 100%);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 8px 22px rgba(7, 33, 59, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.35),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.6);
    opacity: 1;
}

@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: #E2EEF7;
    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%, #7CB0D6)
}

.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: #BF6319;
    color: #FFFFFF;
    border-color: #BF6319
}

.f input,
.f textarea {
    width: 100%;
    margin-bottom: .8rem;
    padding: .8rem 1rem;
    border: 0;
    border-bottom: 3px solid var(--ice);
    background: rgba(10, 44, 78, 0.85);
    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 h2{
    color:#fff;
}
#voices h2 {
    color: var(--navy)
}

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

.q {
    background: #FFFFFF;
    box-shadow: 0 10px 30px rgba(7, 33, 59, 0.15)
}

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

.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: #F0F6FB
}

.strip:nth-child(even) {
    background: linear-gradient(170deg, #164673, #07213B)
}

#hero {
    height: 100vh;
    /* padding: var(--section-padding-block) var(--section-padding-inline); */
    cursor: auto;
    touch-action: auto;
    background: linear-gradient(135deg, #0A2C4E, #103B64);
    display: flex;
}

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

.hc h1 {
    font-weight: 800;
    color: #FFFFFF;
    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%, #FFFFFF, #E2EEF7 55%, #7CB0D6);
    border-radius: 42% 58% 55% 45%/50% 45% 55% 50%
}

.hi i {
    position: absolute;
    display: block;
    filter: drop-shadow(0 14px 16px rgba(7, 33, 59, 0.45))
}

.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: #FFFFFF;
    color: var(--navy);
    font-weight: 700;
    padding: .5rem 1rem;
    border-radius: 99px;
    box-shadow: 0 8px 20px rgba(7, 33, 59, 0.35);
    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: #FFFFFF
}

.step::before {
    color: #FFFFFF
}

#hero {
    background: linear-gradient(135deg, #0A2C4E, #07213B)
}

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

.hc p {
    color: #2D4C6B
}

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

#spaces {
    background: #0A2C4E;
    color: #FFFFFF
}
#process {
    background: #0A2C4E;
    color: #FFFFFF
}

#range,
#voices {
    background: #F0F6FB
}

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


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

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

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

.row .t {
    background: #FFFFFF
}

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

#quote {
    background: linear-gradient(145deg, #E2EEF7, #7CB0D6);
    color: #0A2C4E
}

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

.strip:nth-child(even) {
    background: linear-gradient(170deg, #164673, #07213B)
}

#industries {
    background: #E2EEF7;
    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-visual {
    position: sticky;
    top: 110px;
    height: 500px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--deep);
    box-shadow: 0 18px 45px rgba(7, 33, 59, 0.2)
}

.industry-visual::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 44, 78, 0) 45%, rgba(10, 44, 78, 0.9) 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: #FFFFFF;
    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 rgba(10, 44, 78, 0.15)
}

.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;
        display: flex;
        flex-direction: column-reverse;
    }

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

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

@media(max-width:768px) {
    .hc p {
        font-size: 1rem
    }

}

/* logo palette: navy, copper, silver, gold */
#hero,
#range,
#process,
#quote {
    --ink: #FFFFFF;
    --mute: #B8D9F0;
    --ice: #B8D9F0;
    --silver: #D8EBF7;
    --ember: #BF6319
}

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

body {
    background: #F0F6FB
}

#hero {
    position: relative;
    height: 100vh;
    display: grid;
    align-items: center;
    padding: clamp(4.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 5rem) clamp(3rem, 7vh, 5rem) clamp(1.25rem, 5vw, 5rem);
    overflow: hidden;
    background-color: #0A2C4E;
    background-image:
        linear-gradient(90deg, #0A2C4EF5 0%, #0A2C4EE8 34%, #0A2C4EA8 56%, #0A2C4E20 100%),
        url("../images/home-banner.png");
    background-position: center, right center;
    background-size: cover, auto 100%;
    background-repeat: no-repeat
}

#hero::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        radial-gradient(circle at 76% 46%, transparent 0 24%, rgba(124, 176, 214, 0.08) 24.1% 24.2%, transparent 24.3%),
        radial-gradient(circle at 76% 46%, transparent 0 32%, rgba(124, 176, 214, 0.05) 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, rgba(124, 176, 214, 0.08), rgba(191, 99, 25, 0.08));
    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, 1fr);
    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 {
    margin-top: .6rem;
    line-height: .98;
    letter-spacing: -.035em;
}

.hc p {
    margin: 1.2rem 0 1.6rem;
    color: #B8D9F0;
    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 rgba(191, 99, 25, 0.35);
    transition: transform .2s ease, box-shadow .2s ease
}

.ha .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(191, 99, 25, 0.45)
}

.ha .btn.ghost {
    border-color: #FFFFFF88;
    background: rgba(124, 176, 214, 0.08);
    color: #FFFFFF
}

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

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

.hero-feature {
    position: absolute;
    z-index: 3;
    right: clamp(1.5rem, 5vw, 5rem);
    bottom: clamp(2rem, 8vh, 5rem);
    display: flex;
    align-items: center;
    gap: .85rem;
    max-width: calc(100% - 3rem);
    padding: .9rem 1.1rem .9rem .9rem;
    border: 1px solid rgba(124, 176, 214, 0.35);
    border-radius: 14px;
    background: rgba(10, 44, 78, 0.88);
    box-shadow: 0 18px 48px rgba(7, 33, 59, 0.5);
    color: #FFFFFF;
    backdrop-filter: blur(12px);
    animation: hero-feature-float 5s ease-in-out infinite
}

.hero-feature-icon {
    display: grid;
    width: 2.8rem;
    aspect-ratio: 1;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(191, 99, 25, 0.6);
    border-radius: 10px;
    background: rgba(191, 99, 25, 0.2);
    color: #BF6319;
    font-size: 1.15rem
}

.hero-feature-copy {
    display: grid;
    gap: .15rem
}

.hero-feature-copy strong {
    font-size: .88rem;
    line-height: 1.35
}

.hero-feature-copy > span {
    color: #B8D9F0;
    font-size: .7rem;
    line-height: 1.4
}

.hero-feature-arrow {
    margin-left: .5rem;
    color: #BF6319;
    font-size: .8rem
}

@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: 0; transform: translate3d(0, 18px, 0) }
    to { opacity: 1; transform: translate3d(0, 0, 0) }
}

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

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

@media(max-width:860px) {
    #hero {
        height: auto;
        min-height: 100svh;
        padding: 8rem clamp(1.5rem, 5vw, 3rem) 4rem clamp(1.5rem, 5vw, 3rem)
    }

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

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

    .hero-feature {
        position: relative;
        right: auto;
        bottom: auto;
        justify-self: end;
        margin: 1rem 1.5rem 0;
        max-width: calc(100% - 3rem)
    }

    #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 3rem 1.25rem;
        background-position: center, 65% 38%;
        background-image:
            linear-gradient(90deg, #0A2C4EEB 0%, #0A2C4EC9 58%, #0A2C4E75 100%),
            url("../images/home-banner.png");
        background-size: cover, auto 68%
    }

    .hg {
        gap: .5rem
    }

    .hc {
        padding-top: .4rem
    }

    .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-feature {
        right: 1.25rem;
        bottom: 1.25rem;
        gap: .65rem;
        padding: .7rem .8rem .7rem .7rem
    }

    .hero-feature-icon {
        width: 2.4rem
    }

    .hero-feature-copy strong {
        font-size: .78rem
    }

    .hero-feature-copy > span {
        font-size: .62rem
    }

    .hero-feature-arrow {
        display: none
    }

}

.hc h1 {
    color: #FFFFFF
}

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

.hi .blob {
    background: radial-gradient(circle at 30% 25%, #FFFFFF, #D8EBF7 55%, #7CB0D6)
}

.hi span {
    color: #0A2C4E
}

#spaces {
    background: #0A2C4E;
    color: #FFFFFF
}

#range {
    background: linear-gradient(#0A2C4E, #07213B);
    color: #FFFFFF
}

.thermo::before {
    background: linear-gradient(#7CB0D6, #A0CBE8 35%, #BF6319 80%, #94490C)
}

#range .row .t {
    background: #0A2C4E;
    border-color: #BF6319;
    color: #FFFFFF
}

#process {
    background: radial-gradient(ellipse at 50% 0, #103B64 0%, #0A2C4E 54%);
    color: #FFFFFF
}

.step::before {
    color: #FFFFFF;
    background: #BF6319
}

.tick span::after,
.tick-sep {
    color: rgba(255, 255, 255, 0.45);
}

#voices {
    background: linear-gradient(145deg, #F0F6FB, #E1EEF7);
    color: #0A2C4E
}

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

#quote {
    background: linear-gradient(145deg, #E2EEF7, #7CB0D6);
    color: #0A2C4E
}

.f input,
.f textarea {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF
}

.f ::placeholder {
    color: #B8D9F0
}

#process {
    background: radial-gradient(ellipse at 50% 0, #103B64 0%, #0A2C4E 54%);
    color: #FFFFFF
}

.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: #FFFFFF
}

.process-intro {
    margin-top: 1rem;
    color: #B8D9F0;
    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, #BF6319, #7CB0D6 48%, #BF6319);
    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 rgba(124, 176, 214, 0.25);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(124, 176, 214, 0.05));
    box-shadow: 0 14px 30px rgba(7, 33, 59, 0.3);
    transition: transform .2s ease, border-color .2s ease, background .2s ease
}

.step:hover {
    transform: translateY(-5px);
    border-color: #BF6319;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(124, 176, 214, 0.08))
}

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

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

.step p {
    color: #B8D9F0;
    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(#BF6319, #B8D9F0 50%, #BF6319)
    }

    .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) rgba(124, 176, 214, 0.25);
    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;
        overflow: visible
    }

    .path {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: .9rem;
        padding: 1.5rem 0 1rem
    }

    #process .path .step,
    #process .path .step:nth-child(n) {
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 2rem 1.25rem 1.25rem
    }
}

.strip {
    color: #FFFFFF
}

.strip span {
    color: #B8D9F0
}

.strip:nth-child(even) {
    background: linear-gradient(170deg, #164673, #07213B);
    color: #0A2C4E
}

.strip:nth-child(even) span {
    color: #0A2C4E
}

.btn,
.chip[aria-pressed=true] {
    color: #FFFFFF;
    background: #BF6319
}

:focus-visible {
    outline-color: #BF6319
}

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

/* 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: #0A2C4E;
    border: 3px solid #BF6319;
    border-radius: 50px;
    padding: .2rem 0;
    color: #FFFFFF;
    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%, #FFFFFF, #E8F3FA 60%, #7CB0D6);
    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 rgba(7, 33, 59, 0.45))
}

.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: #FFFFFF;
    margin-bottom: .6rem
}

.rc p {
    color: var(--mute);
    text-align: justify;
}

.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) {
    .ri,
    .rg:nth-child(even) .ri {
        width: min(170px, 100%)
    }

    .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)
    }
}

#voices {
    overflow: hidden;
    background: linear-gradient(145deg, #F0F6FB, #E1EEF7);
    color: #0A2C4E
}

.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: #4B6E8F;
    font-size: 1.05rem
}

.voices-kicker {
    margin-bottom: .8rem;
    color: #BF6319;
    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 rgba(10, 44, 78, 0.12);
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(7, 33, 59, 0.08)
}

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

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

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

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

#voices .q.q-featured p {
    max-width: 23ch;
    color: #FFFFFF;
    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 rgba(10, 44, 78, 0.12);
    background: none;
    color: #4B6E8F
}

#voices .q.q-featured .q-meta {
    border-top-color: rgba(124, 176, 214, 0.25);
    color: #D8EBF7
}

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

#voices .q.q-featured .q-context {
    color: #BF6319
}

.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: #E2EEF7;
    color: #103B64;
    font-size: .78rem
}

#voices .q.q-featured .q-attribution b {
    background: rgba(124, 176, 214, 0.2);
    color: #FFFFFF
}

@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 rgba(10, 44, 78, 0.12);
    border-radius: 16px;
    background: #FFFFFF;
    color: #0A2C4E;
    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: #4B6E8F;
    font-size: .9rem
}

.q-choice-arrow {
    display: none;
    margin-left: auto;
    color: #BF6319;
    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: #FFFFFF
}

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

.strips .strip:nth-child(1) {
    background-image: linear-gradient(180deg, rgba(10, 44, 78, 0.15) 0%, rgba(10, 44, 78, 0.25) 40%, rgba(10, 44, 78, 0.92) 100%), url("../images/room-kitchen.jpg")
}

.strips .strip:nth-child(2) {
    background-image: linear-gradient(180deg, rgba(10, 44, 78, 0.15) 0%, rgba(10, 44, 78, 0.25) 40%, rgba(10, 44, 78, 0.92) 100%), url("../images/room-shop.jpg")
}

.strips .strip:nth-child(3) {
    background-image: linear-gradient(180deg, rgba(10, 44, 78, 0.15) 0%, rgba(10, 44, 78, 0.25) 40%, rgba(10, 44, 78, 0.92) 100%), url("../images/room-home.jpg")
}

.strips .strip:nth-child(4) {
    background-image: linear-gradient(180deg, rgba(10, 44, 78, 0.15) 0%, rgba(10, 44, 78, 0.25) 40%, rgba(10, 44, 78, 0.92) 100%), url("../images/room-warehouse.jpg")
}

.strips .strip:nth-child(5) {
    background-image: linear-gradient(180deg, rgba(10, 44, 78, 0.15) 0%, rgba(10, 44, 78, 0.25) 40%, rgba(10, 44, 78, 0.92) 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: #FFFFFF;
    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: linear-gradient(150deg, #0A2C4E, #07213B);
    color: #FFFFFF;
    box-shadow: 0 14px 35px rgba(7, 33, 59, 0.3)
}

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

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

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

#voices .rating-value {
    color: #B8D9F0;
    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 rgba(124, 176, 214, 0.25);
    background: transparent;
    color: #D8EBF7
}

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

#voices .vo > .q-featured .q-attribution b {
    background: rgba(124, 176, 214, 0.2);
    color: #FFFFFF
}

#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: #FFFFFF;
    font-weight: 700
}

#voices .featured-role {
    color: #B8D9F0;
    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: #4B6E8F;
    font-size: .9rem;
    font-weight: 600
}

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

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

@media(max-width:500px){
    #voices .vo > .q-featured > .q-meta{
        flex-direction: column;
        align-items: flex-start;
    }
}

@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 {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #F0F6FB;
    color: var(--ink);
}

.care-wrap {
    position: relative;
    z-index: 1;
    width: min(100%, 1280px)
}

.care-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3rem;
    padding-bottom: 2.75rem
}

.care-intro {
    display: grid;
    justify-items: start;
    gap: .8rem;
    max-width: 680px
}

.care-intro h2 {
    color: var(--ink);
    /* font-size: clamp(2rem, 4vw, 3rem) !important; */
    text-wrap: balance
}

.care-intro > p {
    color: var(--mute);
    text-align: justify;
}

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

.care-link {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-top: .35rem;
    color: var(--ember);
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none
}

.care-link i {
    transition: transform .2s ease
}

.care-link:hover i {
    transform: translateX(4px)
}

.care-availability {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem auto;
    align-items: center;
    gap: .85rem 1rem;
    min-width: 245px;
    padding: 1.2rem 1.35rem;
    border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 10px 30px rgba(10, 44, 78, 0.08);
    backdrop-filter: blur(10px)
}

.care-availability-ring {
    display: grid;
    grid-row: span 2;
    width: 4.2rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    color: var(--ember);
    font-size: 1.3rem
}

.care-availability-copy {
    display: grid;
    gap: .1rem
}

.care-availability-copy strong {
    color: var(--ink);
    font: 800 2rem/1 var(--b);
    letter-spacing: -.05em
}

.care-availability-copy > span {
    color: var(--mute);
    font-size: .84rem
}

.care-live {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--mute);
    font-size: .7rem
}

.care-live > span {
    width: .45rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ember);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember) 12%, transparent)
}

.care-services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent)
}

.care-service {
    min-width: 0;
    padding: 1.6rem clamp(1rem, 2.5vw, 2rem);
    transition: background-color .25s ease
}

.care-service + .care-service {
    border-left: 1px solid color-mix(in srgb, var(--gold) 40%, transparent)
}

.care-service:hover {
    background: color-mix(in srgb, var(--gold) 10%, transparent)
}

.care-service-label {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.25rem;
    color: var(--ember);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em
}

.care-service-label i {
    font-size: .85rem
}

.care-service h3 {
    margin-bottom: .5rem;
    color: var(--ink)
}

.care-service p {
    color: var(--mute);
    text-align: justify;
}

@media(prefers-reduced-motion:reduce) {
    .care-link i,
    .care-service {
        transition: none
    }
}

@media(max-width:800px) {
    .care-top {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding-bottom: 2rem
    }

    .care-availability {
        justify-self: start
    }

    .care-services {
        grid-template-columns: 1fr
    }

    .care-service,
    .care-service:first-child {
        padding: 1.25rem 0
    }

    .care-service + .care-service {
        border-top: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
        border-left: 0
    }
}

#quote {
    background: linear-gradient(145deg, #E2EEF7, #7CB0D6);
    color: #0A2C4E
}

.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: #0A2C4E;
}

.quote-intro > p:not(.quote-kicker) {
    text-align: justify;
    color: #103B64
}

.quote-intro .quote-detail {
    color: #103B64
}

.quote-kicker {
    color: #BF6319;
    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: #BF6319;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase
}

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

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

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

.quote-contact a {
    color: #0A2C4E;
    text-decoration-color: #BF6319;
    text-underline-offset: .2em
}

.f {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(124, 176, 214, 0.3);
    border-radius: 20px;
    background: linear-gradient(145deg, #103B64, #0A2C4E);
    box-shadow: 0 18px 45px rgba(7, 33, 59, 0.35);
    color: #FFFFFF
}

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

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

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

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

.f textarea {
    resize: vertical
}

.f input::placeholder,
.f textarea::placeholder {
    color: #4B6E8F;
    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: #7CB0D6
}

@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, #F0F6FB, #E2EEF7);
    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;
    width: 100%;
    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, #103B64, #0A2C4E);
    box-shadow: 0 18px 45px rgba(7, 33, 59, 0.2)
}

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

.about-visual::before {
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 44, 78, 0.1) 15%, rgba(10, 44, 78, 0.92) 100%)
}

.about-visual::after {
    inset: 0;
    border: 1px solid rgba(124, 176, 214, 0.25);
    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: #BF6319;
    font-size: .78rem !important;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

.about-visual-title {
    max-width: 12ch;
    color: #FFFFFF;
    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 rgba(124, 176, 214, 0.35);
    border-radius: 99px;
    color: #D8EBF7;
    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: #000;
    text-align: justify;
}

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

.about-services article {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 1rem;
    border-top: 2px solid var(--gold);
    border-radius: 0 0 12px 12px;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(7, 33, 59, 0.08);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease
}

.about-services article::after {
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: var(--copper);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease
}

.about-services article:hover,
.about-services article:focus-within {
    transform: translateY(-6px);
    background: #FFFFFF;
    box-shadow: 0 16px 32px rgba(10, 44, 78, 0.12)
}

.about-services article:hover::after,
.about-services article:focus-within::after {
    transform: scaleX(1)
}

.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: #000;
    text-align: justify;
}

@media(prefers-reduced-motion:reduce) {
    .about-services article,
    .about-services article::after {
        transition: none
    }
}

@media(max-width:991.98px) {
    .about-grid {
        display: flex;
        flex-direction: column-reverse;
        gap: 2rem
    }
    .grid-visual {
        width: 100%;
    }
}

@media(min-width:992px) {
    .strips .strip {
        min-width: 0
    }

    .strips .strip span,
    .strips .strip.on span {
        width: min(340px, 100%);
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word
    }
}

@media(max-width:600px) {
    .about-description,
    .about-services p {
        text-align: left
    }

    .about-services {
        grid-template-columns: 1fr
    }

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

@media(max-width:992px) {
    main,
    main * {
        box-sizing: border-box;
        min-width: 0
    }

    main img,
    main video,
    main svg,
    main iframe {
        max-width: 100%
    }

    main section,
    main .wrap {
        max-width: 100%
    }

    main h1,
    main h2,
    main h3,
    main p,
    main a,
    main button {
        overflow-wrap: break-word
    }

    .strips {
        display: flex;
        height: auto;
        flex-direction: column;
        align-items: stretch
    }

    .strips .strip,
    .strips .strip.on {
        display: grid;
        flex: none;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
        justify-items: start;
        gap: .35rem;
        width: 100%;
        max-width: 100%;
        height: 120px;
        min-height: 78px;
        padding: 1rem 1.25rem;
        clip-path: none;
        text-align: left;
        transition: height .3s ease, min-height .3s ease
    }

    .strips .strip.on {
        height: 180px
    }

    .strips .strip .vt {
        display: none
    }

    .strips .strip h3,
    .strips .strip.on h3 {
        position: static;
        grid-row: 1;
        margin: 0;
        font-size: 1.35rem;
        line-height: 1.2;
        writing-mode: horizontal-tb;
        rotate: 0deg;
        white-space: normal;
        text-align: left;
        opacity: 1;
        transform: none;
        transition: none
    }

    .strips .strip span,
    .strips .strip.on span {
        position: static;
        grid-row: 2;
        width: auto !important;
        max-width: 100%;
        margin: 0;
        font-size: .9rem;
        line-height: 1.45;
        overflow-wrap: break-word;
        text-align: left;
        opacity: 0;
        transform: none;
        transition: opacity .2s ease
    }

    .strips .strip.on span {
        opacity: 1
    }
}