:root {
    --cream: #F3EBDA;
    --paper: #FFF8EA;
    --ink: #1E1612;
    --walnut: #2E1F18;
    --amber: #F2A33A;
    --orange: #EC7A2C;
    --red: #D2472A;
    --muted: #5E4F45;
    --line: rgba(30,22,18,.16);
    --grotesk: 'Inter Tight','Helvetica Neue',Arial,sans-serif;
    --mono: 'IBM Plex Mono',ui-monospace,Menlo,monospace;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top,0px);
    padding-bottom: env(safe-area-inset-bottom,0px)
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --cream: #F3EBDA
    }
}

:root[data-theme="dark"] {
    --cream: #F3EBDA
}

:root[data-theme="light"] {
    --cream: #F3EBDA
}

*, *::before, *::after {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--grotesk);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

button {
    font: inherit
}

:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px
}
/* header (same as the approved header: logo, Menu, Start) */
.hdr {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px clamp(14px,3vw,36px);
    background: color-mix(in srgb,var(--cream) 88%,transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none
}

.mono {
    width: 62px;
    height: auto;
    display: block
}

.logo span {
    font-weight: 800;
    font-style: italic;
    font-size: 1.02rem;
    letter-spacing: -.03em
}

.hdr .right {
    display: flex;
    gap: 10px
}

.mk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 18px;
    border-radius: 99px;
    background: var(--walnut);
    color: var(--cream);
    font-weight: 700;
    text-decoration: none
}

.st {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border-radius: 99px;
    background: var(--amber);
    color: var(--ink);
    font-weight: 800;
    text-decoration: none
}

@media (max-width:640px) {
    .logo span {
        display: none
    }

    .st .full {
        display: none
    }
}

@media (min-width:641px) {
    .st .short {
        display: none
    }
}


.hdr {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

.note {
    position: fixed;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom,0px));
    transform: translateX(-50%);
    z-index: 90;
    margin: 0;
    padding: 6px 12px;
    border-radius: 99px;
    background: var(--walnut);
    color: var(--cream);
    font-size: .74rem;
    white-space: nowrap
}

    .note b {
        color: var(--amber)
    }

.kick {
    margin: 0 0 .6em;
    font-family: var(--mono);
    font-weight: 600;
    font-size: .85rem;
    color: var(--red)
}

.wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(18px,4vw,56px)
}

.sec-h {
    margin: 0;
    font-weight: 800;
    font-size: clamp(2.2rem,5vw,4.4rem);
    line-height: .94;
    letter-spacing: -.05em
}

/* 1. still hero with filling words */
.hero {
    position: sticky;
    top: 0;
    z-index: 0;
    min-height: 100svh;
    display: block;
    padding: calc(150px + env(safe-area-inset-top,0px)) clamp(18px,5vw,72px) 100px;
    background-color: var(--cream);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='none' stroke-width='6' stroke-opacity='.06'><path d='M0 22A22 22 0 0 0 22 0' stroke='%23D2472A'/><path d='M0 38A38 38 0 0 0 38 0' stroke='%23EC7A2C'/><path d='M0 54A54 54 0 0 0 54 0' stroke='%23F2A33A'/><path d='M120 98A22 22 0 0 0 98 120' stroke='%23D2472A'/><path d='M120 82A38 38 0 0 0 82 120' stroke='%23EC7A2C'/><path d='M120 66A54 54 0 0 0 66 120' stroke='%23F2A33A'/></g></svg>");
    background-size: 120px 120px
}

.hero-in {
    max-width: 1320px;
    margin: 0 auto;
    width: 100%
}

.h-tags {
    display: flex;
    gap: 6px;
    margin: 0 0 clamp(20px,3vw,34px);
    font-family: var(--mono);
    font-weight: 600;
    font-size: .8rem
}

    .h-tags span:first-child {
        padding: 2px 7px;
        border: 1.5px solid var(--ink);
        border-radius: 5px
    }

    .h-tags span:last-child {
        padding: 3px 8px;
        border-radius: 5px;
        background: var(--ink);
        color: var(--cream)
    }

.fill {
    margin: 0;
    max-width: 23ch;
    font-weight: 800;
    font-size: clamp(2.2rem,5.2vw,5.2rem);
    line-height: 1.02;
    letter-spacing: -.045em
}

    .fill .dim {
        color: rgba(30,22,18,.18)
    }

.h-stripes {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: clamp(22px,3vw,34px)
}

    .h-stripes i {
        display: block;
        height: 6px;
        width: min(340px,60%)
    }

        .h-stripes i:nth-child(1) {
            background: var(--amber)
        }

        .h-stripes i:nth-child(2) {
            background: var(--orange)
        }

        .h-stripes i:nth-child(3) {
            background: var(--red)
        }

.h-cue {
    margin: 22px 0 0;
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--muted)
}

/* 2. the rising sheet */
.sheet {
    position: relative;
    z-index: 2;
    background: var(--paper);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -24px 50px rgba(46,31,24,.14)
}

.tab {
    position: absolute;
    left: clamp(18px,5vw,72px);
    top: -44px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    border-radius: 14px 14px 0 0;
    background: var(--paper);
    font-family: var(--mono);
    font-weight: 600;
    font-size: .82rem
}

    .tab b {
        color: var(--red)
    }

.intro {
    padding: clamp(70px,9vw,120px) 0 clamp(20px,3vw,40px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    gap: 18px
}

    .intro p.lead {
        margin: 0;
        max-width: 42ch;
        color: var(--muted);
        line-height: 1.55
    }

/* 3. the hi-fi rack (sticky) + drawers (scroll) */
.sys {
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
    gap: clamp(24px,4vw,64px);
    align-items: start;
    padding-bottom: 10vh
}

.rack-col {
    position: sticky;
    top: calc(84px + env(safe-area-inset-top,0px));
    height: calc(100svh - 104px);
    display: flex;
    align-items: center
}

.rack {
    position: relative;
    width: 100%;
    padding: 18px 22px 44px;
    border-radius: 26px 26px 10px 10px;
    background: linear-gradient(90deg,#efe4cc,#fbf5e8 40%,#e6dac2);
    border: 4px solid #5a3a26;
    box-shadow: 0 30px 60px rgba(46,31,24,.3)
}

    .rack::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 12px;
        height: 20px;
        background: linear-gradient(#F2A33A 0 30%,transparent 30% 36%,#EC7A2C 36% 64%,transparent 64% 70%,#D2472A 70%)
    }

    .rack::after {
        content: "";
        position: absolute;
        left: -4px;
        right: -4px;
        bottom: -16px;
        height: 14px;
        border-radius: 0 0 6px 6px;
        background: #5a3a26
    }

.unit {
    position: relative;
    margin: 7px 0;
    border-radius: 10px;
    transition: transform .45s cubic-bezier(.2,.8,.2,1),filter .4s;
    filter: saturate(.4) brightness(.9)
}

    .unit.on {
        filter: none;
        transform: translateX(10px);
        z-index: 2
    }

        .unit.on::after {
            content: "";
            position: absolute;
            inset: -3px;
            border-radius: 10px;
            box-shadow: 0 0 0 2px var(--amber),0 10px 30px rgba(242,163,58,.35);
            pointer-events: none
        }

.usvg {
    display: block;
    width: 100%;
    height: auto
}

    .usvg .glow {
        opacity: .35;
        transition: opacity .4s
    }

.unit.on .usvg .glow {
    opacity: 1
}

.usvg .led {
    fill: #5a2a1e
}

.unit.on .usvg .led {
    fill: #ff5a36;
    filter: drop-shadow(0 0 4px #ff5a36)
}

.aled {
    fill: #4a2d16
}

.bar {
    opacity: .14;
    transition: opacity .08s
}

    .bar.lit {
        opacity: 1
    }

.aled.lit {
    fill: #ffcf7a
}

.drawers {
    display: flex;
    flex-direction: column;
    gap: 0
}

.drawer {
    position: relative;
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 0;
    border-bottom: 1px solid var(--line)
}

.d-handle {
    width: 64px;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(#e9e6df,#b8b2a6);
    box-shadow: 0 2px 0 #8f887b;
    margin-bottom: 22px
}

.d-no {
    margin: 0 0 .5em;
    font-family: var(--mono);
    font-weight: 600;
    font-size: .78rem;
    color: var(--red)
}

.drawer h3 {
    margin: 0;
    font-weight: 800;
    font-size: clamp(2.4rem,5vw,4.6rem);
    letter-spacing: -.05em;
    line-height: .95
}

.d-pitch {
    margin: .5em 0 1.4em;
    font-size: clamp(1.1rem,1.6vw,1.4rem);
    color: var(--muted)
}

.d-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

    .d-cols h4 {
        margin: 0 0 10px;
        font-family: var(--mono);
        font-weight: 600;
        font-size: .78rem;
        letter-spacing: .04em
    }

    .d-cols ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 8px
    }

    .d-cols li {
        position: relative;
        padding-left: 18px;
        line-height: 1.4
    }

        .d-cols li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .5em;
            width: 8px;
            height: 8px;
            border-radius: 2px;
            background: var(--amber)
        }

.d-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 34px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px dashed var(--line)
}

    .d-foot b {
        display: block;
        margin-bottom: 6px;
        font-family: var(--mono);
        font-weight: 600;
        font-size: .72rem;
        color: var(--muted)
    }

.d-time {
    font-weight: 800
}

    .d-time em {
        font-style: normal;
        margin-left: 6px;
        font-family: var(--mono);
        font-size: .68rem;
        color: var(--red);
        border: 1px dashed var(--red);
        border-radius: 5px;
        padding: 1px 6px;
        font-weight: 500
    }

.d-tapes a {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 6px 10px;
    border-radius: 99px;
    background: var(--cream);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: .85rem
}

    .d-tapes a::before {
        content: "▶︎ ";
        color: var(--red);
        font-size: .7em
    }

.m-unit {
    display: none
}

/* 4. care & support */
.care {
    margin: 0;
    padding: clamp(70px,9vw,120px) 0;
    background: var(--walnut);
    color: var(--cream)
}

    .care .sec-h {
        color: var(--cream)
    }

    .care .kick {
        color: var(--amber)
    }

.care-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
    margin-bottom: 34px
}

    .care-top p {
        margin: 0;
        max-width: 44ch;
        color: rgba(243,235,218,.7);
        line-height: 1.55
    }

.cards {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px
}

@media (max-width:900px) {
    .cards {
        grid-template-columns: minmax(0,1fr)
    }
}

.card {
    position: relative;
    padding: 28px;
    border-radius: 14px;
    background: var(--cream);
    color: var(--ink);
    box-shadow: inset 0 0 0 6px var(--cream),inset 0 0 0 7.5px rgba(30,22,18,.3)
}

    .card.feat {
        background: #F7D9A8;
        box-shadow: inset 0 0 0 6px #F7D9A8,inset 0 0 0 7.5px rgba(30,22,18,.35)
    }

.c-no {
    margin: 0;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--red)
}

.card h3 {
    margin: .2em 0 .1em;
    font-weight: 800;
    font-size: 2.2rem;
    letter-spacing: -.04em
}

.price {
    margin: 0 0 16px;
    font-family: var(--mono);
    font-size: .9rem
}

    .price b {
        font-family: var(--grotesk);
        font-size: 1.6rem;
        font-weight: 800
    }

.card ul {
    list-style: none;
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px dashed rgba(30,22,18,.3);
    display: grid;
    gap: 8px
}

.card li::before {
    content: "✓ ";
    color: var(--red);
    font-weight: 800
}

.stamp {
    position: absolute;
    right: 18px;
    top: 18px;
    padding: 4px 8px;
    border: 2px solid var(--red);
    border-radius: 6px;
    color: var(--red);
    font-family: var(--mono);
    font-weight: 600;
    font-size: .66rem;
    transform: rotate(6deg)
}

.care-note {
    margin-top: 16px;
    font-size: .8rem;
    color: rgba(243,235,218,.55)
}

/* 5. how we work placeholder */
.how {
    padding: clamp(60px,8vw,100px) 0;
    text-align: center;
    color: var(--muted)
}

    .how b {
        display: block;
        font-size: 1.3rem;
        color: var(--ink);
        margin-bottom: 6px
    }

/* 6. build your system */
.build {
    padding: clamp(60px,8vw,110px) 0;
    background: var(--cream)
}

.sws {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
    gap: 12px;
    margin-top: 28px
}

.sw {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    align-items: center;
    text-align: left;
    padding: 14px 16px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    background: linear-gradient(#e9e6df,#cfcac0);
    box-shadow: inset 0 0 0 1px #8f887b,0 3px 0 #8f887b;
    transition: transform .1s,box-shadow .1s,background .2s
}

    .sw:active {
        transform: translateY(2px);
        box-shadow: inset 0 0 0 1px #8f887b,0 1px 0 #8f887b
    }

.pw {
    grid-row: 1/3;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,#6b5446,#2a1f19);
    box-shadow: inset 0 0 0 2px #1a110c
}

.swn {
    font-weight: 800;
    font-size: 1.02rem
}

.swm {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--muted)
}

.sw[aria-pressed="true"] {
    background: linear-gradient(#ffd89a,#F2A33A);
    box-shadow: inset 0 0 0 1px #b86f14,0 3px 0 #b86f14
}

    .sw[aria-pressed="true"] .pw {
        background: radial-gradient(circle at 35% 30%,#ff9a70,#D2472A);
        box-shadow: 0 0 10px #ff5a36
    }

.plans {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
    align-items: center
}

    .plans span {
        font-family: var(--mono);
        font-size: .78rem;
        color: var(--muted);
        margin-right: 6px
    }

.plan {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 99px;
    cursor: pointer;
    background: var(--paper);
    box-shadow: inset 0 0 0 1px var(--line);
    font-weight: 700
}

    .plan[aria-pressed="true"] {
        background: var(--walnut);
        color: var(--cream)
    }

.readout {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 14px;
    background: #1a110c
}

    .readout code {
        font-family: var(--mono);
        font-weight: 600;
        font-size: .9rem;
        color: #ffb347;
        text-shadow: 0 0 8px rgba(255,160,60,.6);
        line-height: 1.6
    }

.send {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 99px;
    background: var(--amber);
    color: var(--ink);
    font-weight: 800;
    text-decoration: none
}

    .send[aria-disabled="true"] {
        opacity: .45;
        pointer-events: none
    }

/* 7. mini FAQ */
.faq {
    padding: clamp(60px,8vw,100px) 0
}

    .faq details {
        border-bottom: 1px solid var(--line);
        padding: 18px 0
    }

    .faq summary {
        cursor: pointer;
        font-weight: 800;
        font-size: 1.2rem;
        list-style: none
    }

        .faq summary::before {
            content: "+ ";
            color: var(--red)
        }

    .faq details[open] summary::before {
        content: "– "
    }

    .faq details p {
        margin: 10px 0 0;
        color: var(--muted);
        max-width: 60ch;
        line-height: 1.55
    }

.foot {
    padding: 60px 20px;
    text-align: center;
    background: var(--walnut);
    color: rgba(243,235,218,.7)
}

@media (max-width:900px) {
    .sys {
        grid-template-columns: minmax(0,1fr)
    }

    .rack-col {
        display: none
    }

    .m-unit {
        display: block;
        margin-bottom: 20px;
        padding: 8px;
        border-radius: 16px;
        background: #fbf5e8;
        border: 3px solid #5a3a26
    }

    .drawer {
        min-height: 0;
        padding: 50px 0
    }

    .d-cols {
        grid-template-columns: minmax(0,1fr)
    }
}
/* v3: vector screens dim when off, glow when on */
.usvg .vec {
    opacity: .22;
    transition: opacity .4s
}

.unit.on .usvg .vec {
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(255,179,71,.8))
}

.usvg .mg, .usvg .shp, .usvg .wf, .usvg .gline {
    stroke-dasharray: 1
}

.usvg .mg {
    stroke-dashoffset: 0
}

.usvg .shp {
    stroke-dashoffset: 1
}

.usvg .wf {
    stroke-dashoffset: 0
}

.usvg .gline {
    stroke-dashoffset: 0
}

.usvg .edge {
    stroke-opacity: .3
}

.usvg .onair {
    transition: fill .3s
}

.unit.on .usvg .onair {
    fill: #e0402a;
    filter: drop-shadow(0 0 5px #ff5a36)
}

.jrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: -.4em 0 1.4em
}

    .jrow span {
        font-size: .8rem;
        color: var(--muted)
    }

.jingle {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 99px;
    cursor: pointer;
    background: var(--walnut);
    color: var(--cream);
    font-weight: 800
}

    .jingle[aria-pressed="true"] {
        background: var(--amber);
        color: var(--ink)
    }

.story {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: clamp(24px,6vw,110px);
    align-items: start;
    margin-top: clamp(56px,8vw,110px)
}

.st-frame {
    position: relative;
    height: min(80vh,740px);
    border-radius: 18px;
    overflow: hidden;
    background: #e9dcc2;
    box-shadow: 0 24px 50px rgba(46,31,24,.18)
}

.st-img {
    position: absolute;
    left: -2%;
    top: -14%;
    width: 112%;
    height: 128%;
    object-fit: cover;
    will-change: transform
}

.st-text {
    position: sticky;
    top: 34vh
}

.st-p {
    margin: 0;
    max-width: 26ch;
    font-weight: 700;
    font-size: clamp(1.4rem,2.3vw,2.1rem);
    line-height: 1.18;
    letter-spacing: -.03em
}

@media (max-width:900px) {
    .story {
        grid-template-columns: minmax(0,1fr)
    }

    .st-frame {
        height: 60vh
    }

    .st-text {
        position: static
    }
}

/* service drawers: "Start a … project" button (opens the contact form with that service picked) */
.d-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-end;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 99px;
    background: var(--walnut);
    color: var(--cream);
    font-weight: 800;
    font-size: .95rem;
    text-decoration: none;
    transition: background .2s, color .2s
}

    .d-add:hover {
        background: var(--amber);
        color: var(--ink)
    }

.d-foot {
    align-items: flex-end;
    justify-content: space-between
}

/* care plans: one line on who each plan is for (no prices) */
.card .fit {
    margin: 0 0 16px;
    min-height: 2.9em;
    font-weight: 700;
    line-height: 1.4;
    color: var(--muted)
}

.care-note a {
    color: var(--amber);
    font-weight: 700
}

/* hero story: supporting copy, the three-step signal path and buttons */
.st-sub {
    margin: 22px 0 0;
    max-width: 44ch;
    color: var(--muted);
    font-size: clamp(1rem,1.2vw,1.12rem);
    line-height: 1.6
}

.st-path {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    max-width: 46ch
}

    .st-path li {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 14px;
        padding: 14px 0;
        border-top: 1px solid var(--line)
    }

        .st-path li:last-child {
            border-bottom: 1px solid var(--line)
        }

    .st-path b {
        font-family: var(--mono);
        font-weight: 600;
        font-size: .82rem;
        color: var(--red);
        padding-top: 3px
    }

    .st-path strong {
        display: block;
        font-weight: 800;
        font-size: 1.1rem;
        letter-spacing: -.02em
    }

    .st-path span {
        display: block;
        margin-top: 2px;
        color: var(--muted);
        line-height: 1.5
    }

.st-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px
}

.st-b {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 99px;
    font-weight: 800;
    text-decoration: none
}

    .st-b.dk {
        background: var(--walnut);
        color: var(--cream)
    }

    .st-b.am {
        background: var(--amber);
        color: var(--ink)
    }

.st-text {
    top: 18vh
}

@media (max-width:900px) {
    .st-text {
        top: auto
    }

    .hero {
        padding-bottom: 150px
    }
}