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

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

.strips {
    display: flex;
    height: 480px;
    margin-top: 2.5rem;
    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, #c9a46a, #8a6a3a);
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%)
}

.strip.on {
    flex: 5;
}

.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) {
    .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), #9cc7e6 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
}

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

.tick span::after {
    content: "❄";
    margin-left: 4rem;
    color: var(--navy)
}

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

.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: #0a183099;
    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: #fbf8f1;
    color: var(--navy)
}

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

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

.q {
    background: #fff;
    box-shadow: 0 10px 30px #2c4a6622
}

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

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

.strip:nth-child(even) {
    background: linear-gradient(170deg, #c9a46a, #8a6a3a)
}

#hero {
    height: 100vh;
    padding: 3em 2em;
    cursor: auto;
    touch-action: auto;
    background: linear-gradient(135deg, #1f3345, #c9def0);
    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: #fff;
    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
}

.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%, #fff, #dcebf7 55%, #bcd9ee);
    border-radius: 42% 58% 55% 45%/50% 45% 55% 50%
}

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

.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: #fff;
    color: var(--navy);
    font-weight: 700;
    padding: .5rem 1rem;
    border-radius: 99px;
    box-shadow: 0 8px 20px #1f334555;
    font-size: .9rem
}

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

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

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

@media(max-width:1024px) {
    #hero {
        padding: 2em 1em
    }
}

@media(max-width:600px) {
    #hero {
        padding: 1em 1em
    }
}

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

.step::before {
    color: #fff
}

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

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

.hc p {
    color: #3b556b
}

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

#spaces,
#process {
    background: #fff
}

#range,
#voices {
    background: #fbf8f1
}

#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: #fff
}

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

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

#quote {
    background: linear-gradient(135deg, #e3eef8, #bcd9ee)
}

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

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

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

.ind {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 1rem 4rem;
    align-items: start
}

.ih {
    grid-column: 1/-1;
    max-width: 640px;
    margin-bottom: 1.5rem
}

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

.il {
    display: flex;
    flex-direction: column;
    border-left: 3px solid #bcd9ee
}

.il button {
    text-align: left;
    background: none;
    border: 0;
    border-left: 6px solid transparent;
    margin-left: -3px;
    padding: .9rem 1.2rem;
    font: 700 clamp(1.1rem, 2.1vw, 1.5rem) var(--d);
    color: #7b93a8;
    cursor: pointer;
    letter-spacing: -.01em
}

.il button:hover {
    color: var(--ink)
}

.il button[aria-selected=true] {
    color: var(--ink);
    border-left-color: var(--gold);
    background: linear-gradient(90deg, #e3eef8, transparent)
}

.ip {
    position: sticky;
    top: 90px;
    background: linear-gradient(160deg, #e3eef8, #fbf8f1);
    border-radius: 60px 14px 60px 14px;
    padding: 2rem;
    min-height: 380px;
    display: grid;
    gap: 1rem;
    align-content: center;
    justify-items: start
}

.ip svg {
    width: min(220px, 60%);
    height: auto;
    filter: drop-shadow(0 12px 14px #1f334533)
}

.ip h3 {
    font-size: 1.8rem
}

.ip p {
    color: #3b556b
}

.ip ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.ip li {
    padding: .3rem .8rem;
    border-radius: 99px;
    background: #fff;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ember)
}

@keyframes sw {
    from {
        opacity: 0;
        transform: translateY(10px)
    }
}

.ip>* {
    animation: sw .4s both
}

@media(prefers-reduced-motion:reduce) {
    .ip>* {
        animation: none
    }
}

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

    .il {
        flex-direction: row;
        overflow-x: auto;
        border-left: 0;
        border-bottom: 3px solid #bcd9ee;
        scroll-snap-type: x mandatory
    }

    .il button {
        white-space: nowrap;
        border-left: 0;
        border-bottom: 6px solid transparent;
        margin: 0 0 -3px;
        scroll-snap-align: start;
        padding: .8rem 1rem;
        font-size: 1.05rem
    }

    .il button[aria-selected=true] {
        border-bottom-color: var(--gold);
        background: none
    }

    .ip {
        position: static;
        min-height: 0;
        border-radius: 40px 12px 40px 12px
    }
}

.ip h4 {
    margin: .4rem 0 0;
    font: 700 1rem var(--d);
    color: var(--ember)
}

.ip ul {
    display: grid;
    gap: .45rem
}

.ip li {
    padding: 0 0 0 1.6rem;
    position: relative;
    background: none;
    border-radius: 0;
    font-weight: 500;
    color: var(--ink);
    font-size: .95rem
}

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

.ip .btn {
    margin-top: .6rem
}

@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,
footer,
nav {
    --ink: #eaf0f8;
    --mute: #a9b9d0;
    --ice: #c5d3e6;
    --silver: #e4ebf3;
    --ember: #f7b04f
}

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

body {
    background: #eef2f7
}

#hero {
    background: radial-gradient(circle at 85% 15%, #2f5290, transparent 55%), linear-gradient(135deg, #0e1d3a, #1d3664)
}

.hc h1 {
    color: #fff
}

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

.hi .blob {
    background: radial-gradient(circle at 30% 25%, #fff, #e4ebf3 55%, #b9c9de)
}

.hi span {
    color: #16294f
}

#spaces,
#industries {
    background: #fff
}

#range {
    background: linear-gradient(#0e1d3a, #16294f)
}

.thermo::before {
    background: linear-gradient(#bcd6f0, #7fa7d6 35%, #f29a24 80%, #b86a0c)
}

#range .row .t {
    background: #0e1d3a;
    border-color: #f29a24;
    color: #f29a24
}

#process {
    background: #16294f
}

.step::before {
    color: #0e1d3a
}

#stats {
    background: #f29a24;
    color: #0e1d3a
}

.tick span::after {
    color: #0e1d3a
}

#voices {
    background: #eef2f7
}

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

#quote {
    background: linear-gradient(120deg, #0e1d3a 35%, #9c5a0e)
}

.f input,
.f textarea {
    background: #ffffff1a;
    color: #fff
}

.f ::placeholder {
    color: #c5d3e6
}

footer {
    background: #0b1730;
    border-top: 4px solid #f29a24
}

.fl {
    border-top-color: #ffffff22
}

nav {
    background: linear-gradient(#0e1d3a, #0e1d3a00)
}

#process {
    background: radial-gradient(ellipse at 50% 0, #243f73 0%, #16294f 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: #fff
}

.process-intro {
    margin-top: 1rem;
    color: #c5d3e6;
    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, #f29a24, #c5d3e6 48%, #f29a24);
    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 #ffffff24;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff12, #ffffff08);
    box-shadow: 0 14px 30px #08152b2b;
    transition: transform .2s ease, border-color .2s ease, background .2s ease
}

.step:hover {
    transform: translateY(-5px);
    border-color: #f29a2477;
    background: linear-gradient(145deg, #ffffff1b, #ffffff0a)
}

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

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

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

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

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

.strip {
    color: #eaf0f8
}

.strip span {
    color: #d5deec
}

.strip:nth-child(even) {
    background: linear-gradient(170deg, #f29a24, #b86a0c);
    color: #0e1d3a
}

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

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

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

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

nav,
nav.sc {
    --ink: #16294f;
    --silver: #44597b;
    --ice: #8da4c4;
    --ember: #b86a0c;
    background: #fff;
    box-shadow: 0 2px 14px #16294f22
}

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

@media(max-width:900px) {
    .mn {
        background: #fff;
        box-shadow: 0 12px 20px #16294f22
    }

    .mn a {
        border-bottom-color: #16294f1a
    }

    nav.open {
        background: #fff
    }
}

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: #0e1d3a;
    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%, #fff, #e4ebf3 60%, #b9c9de);
    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 #0e1d3a55)
}

.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: #fff;
    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: #fff;
        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 #16294f1a
    }

    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, #f4f7fb, #e7edf5);
    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: #58698a;
    font-size: 1.05rem
}

.voices-kicker {
    margin-bottom: .8rem;
    color: #b86a0c;
    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 #16294f12;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px #16294f0d
}

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

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

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

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

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

#voices .q footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #16294f1a;
    background: none;
    color: #44597b
}

#voices .q.q-featured footer {
    border-top-color: #ffffff2b;
    color: #e4ebf3
}

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

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

.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: #eef2f7;
    color: #243f73;
    font-size: .78rem
}

#voices .q.q-featured .q-attribution b {
    background: #ffffff18;
    color: #fff
}

@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-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    grid-template-rows: 1fr;
    align-items: stretch
}

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

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

.q-list {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: .8rem
}

.q-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 112px;
    overflow: hidden;
    padding: 1.2rem 1.4rem;
    border: 1px solid #16294f16;
    border-radius: 16px;
    background: #fff;
    color: var(--deep);
    text-align: left;
    cursor: pointer
}

.q-choice:hover {
    border-color: #f29a2480
}

.q-choice:focus-visible {
    outline: 3px solid #f29a24;
    outline-offset: 3px
}

.q-choice.is-active {
    border-color: #f29a24;
    background: #fffaf1;
    box-shadow: 0 8px 24px #16294f12
}

.q-choice-number {
    flex: 0 0 2.8rem;
    color: #b86a0c;
    font: 800 1rem var(--d)
}

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

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

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

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

.q-choice.is-active .q-choice-arrow {
    opacity: 1
}

.q-choice.is-active::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #f29a24;
    content: "";
    transform: none
}

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

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

    .q-list {
        grid-template-rows: none
    }

    .q-choice {
        min-height: 88px
    }
}

@media(max-width:480px) {
    #voices .q-featured {
        min-height: 280px
    }
}

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

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

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

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

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

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

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

.strips .strip:nth-child(5) {
    background-image: linear-gradient(180deg, #0e1d3a22 0%, #0e1d3a35 40%, #0e1d3ae8 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: #fff;
    font-size: 1.35rem;
    opacity: .9
}

#voices .vo > .q-featured {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    min-height: 390px;
    padding: clamp(2rem, 4vw, 3.5rem);
    border: 0;
    border-radius: 24px;
    background: #16294f;
    color: #fff;
    box-shadow: 0 12px 30px #16294f22
}

#voices .vo > .q-featured .featured-quote {
    color: #fff;
    font: 600 clamp(1.5rem, 2.5vw, 2rem)/1.45 var(--d)
}

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

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

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

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

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

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

#care {
    background: linear-gradient(145deg, #e3eef8, #f8fafc);
    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 #16294f12;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px #16294f0b
}

.care-number {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: #f29a241c;
    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, #fbf8f1, #e3eef8)
}

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

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

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

.quote-kicker {
    color: #b86a0c;
    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 {
    display: block;
    font-size: 12px !important
}

.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: #16294f;
    font-size: .92rem
}

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

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

.quote-contact a {
    color: #16294f;
    text-decoration-color: #b86a0c;
    text-underline-offset: .2em
}

.f {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid #ffffff26;
    border-radius: 20px;
    background: linear-gradient(145deg, #243f73, #16294f);
    box-shadow: 0 18px 45px #0e1d3a30;
    color: #fff
}

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

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

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

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

.f textarea {
    resize: vertical
}

.f input::placeholder,
.f textarea::placeholder {
    color: #58698a;
    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: #f7b04f
}

@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, #f8fafc, #e3eef8);
    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, #243f73, #0e1d3a);
    box-shadow: 0 18px 45px #16294f24
}

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

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

.about-visual::after {
    inset: 0;
    border: 1px solid #ffffff20;
    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: #f7b04f;
    font-size: .78rem !important;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

.about-visual-title {
    max-width: 12ch;
    color: #fff;
    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 #ffffff35;
    border-radius: 99px;
    color: #e4ebf3;
    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: #fff;
    box-shadow: 0 8px 24px #16294f0b
}

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