/* ==========================================================================
   JOHN INTERIORS — Animated hero + Modular Kitchen sections
   ========================================================================== */
:root{
  --kx-brass:#b98543; --kx-brass-lt:#e6bd7c; --kx-cream:#f6f1e9; --kx-line:#e6dfd2;
  --kx-ink:#10131c; --kx-ink2:#1a1f2d; --kx-text:#2a2d36; --kx-muted:#6b6f7a;
}
html{scroll-behavior:smooth}
.kx,.hk{--ease:cubic-bezier(.22,1,.36,1)}

/* ===================== HERO ===================== */
.hk{position:relative;min-height:92vh;min-height:92svh;isolation:isolate;background:#0a0e18;color:#fff}
.hk>*{position:absolute}
.hk-base{inset:0;background:
  radial-gradient(60% 60% at 82% 38%,rgba(185,133,67,.22),transparent 70%),
  radial-gradient(50% 50% at 10% 100%,rgba(185,133,67,.28),transparent 70%),
  linear-gradient(160deg,#0a0e18,#111827 60%,#0b1020)}
.hk-photos{inset:0;clip-path:inset(0 100% 0 0);animation:hkWipe 2.4s 2.1s cubic-bezier(.7,0,.2,1) forwards}
.hk-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  animation:hkFade 28s infinite linear,hkZoom 28s infinite linear}
.hk-photo--1{animation-delay:-1.2s,-1.2s}.hk-photo--2{animation-delay:5.8s,5.8s}
.hk-photo--3{animation-delay:12.8s,12.8s}.hk-photo--4{animation-delay:19.8s,19.8s}
.hk-shade{inset:0;background:
  linear-gradient(90deg,rgba(8,11,20,.92) 0%,rgba(8,11,20,.72) 42%,rgba(8,11,20,.28) 100%),
  linear-gradient(0deg,rgba(8,11,20,.85) 0%,transparent 45%)}
.hk-grid{inset:0;opacity:0;animation:hkIn 1.4s .1s forwards;
  background-image:linear-gradient(rgba(230,189,124,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(230,189,124,.09) 1px,transparent 1px),
  linear-gradient(rgba(230,189,124,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(230,189,124,.05) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px;
  -webkit-mask-image:radial-gradient(90% 90% at 70% 45%,#000 30%,transparent 90%);mask-image:radial-gradient(90% 90% at 70% 45%,#000 30%,transparent 90%);
  animation:hkIn 1.4s .1s forwards,hkGridMove 40s linear infinite}

.hk-bp{right:-1%;top:9%;width:52%;height:72%;overflow:visible;transition:transform .5s var(--ease)}
.hk-lines path{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:hkDraw 1.7s var(--d) cubic-bezier(.65,0,.35,1) forwards}
.hk-lines .dim{stroke:var(--kx-brass-lt);stroke-width:1.2}
.hk-lines .pend{stroke:var(--kx-brass-lt)}
.hk-lines{animation:hkSoft 1.2s 5.4s forwards}
.hk-fills .fl{opacity:0;animation:hkFillIn 1.1s var(--d) forwards}
.hk-fills .f1{fill:url(#hkw)}.hk-fills .f2{fill:url(#hkn)}.hk-fills .f3{fill:url(#hkn)}
.hk-labels text{fill:var(--kx-brass-lt);font-size:15px;letter-spacing:.12em;font-weight:600;opacity:0;animation:hkIn .8s 3.2s forwards}
.hk-glow circle{fill:#ffcf84;opacity:0;filter:blur(16px);animation:hkGlow 4.5s 3.2s infinite ease-in-out}
.hk-glow circle+circle{animation-delay:3.9s}
.hk-steam circle{fill:rgba(255,255,255,.55);opacity:0;animation:hkSteam 3.4s 3.4s infinite ease-out}
.hk-steam circle:nth-child(2){animation-delay:4.1s}.hk-steam circle:nth-child(3){animation-delay:4.8s}

.hk-scan{top:0;bottom:0;left:0;width:3px;z-index:2;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--kx-brass-lt),transparent);box-shadow:0 0 28px 8px rgba(230,189,124,.55);
  animation:hkScan 2.4s 2.1s cubic-bezier(.7,0,.2,1) forwards}
.hk-spark{width:6px;height:6px;border-radius:50%;background:var(--kx-brass-lt);box-shadow:0 0 14px 4px rgba(230,189,124,.7);opacity:0;z-index:1}
.hk-spark--a{right:18%;top:24%;animation:hkSpark 6s 3.5s infinite}
.hk-spark--b{right:42%;top:62%;animation:hkSpark 7s 4.5s infinite}
.hk-spark--c{right:8%;top:56%;animation:hkSpark 8s 5s infinite}
.hk-tags{inset:0;z-index:2;pointer-events:none}
.hk-tag{position:absolute;padding:.5rem .9rem;border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.02em;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;animation:hkIn .8s forwards,hkFloat 6s infinite ease-in-out}
.hk-tag::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--kx-brass-lt);margin-right:.5rem}
.hk-tag--1{right:9%;top:24%;animation-delay:4.2s,4.2s}.hk-tag--2{right:36%;top:17%;animation-delay:4.6s,5s}.hk-tag--3{right:6%;top:66%;animation-delay:5s,6s}

.hk-inner{position:relative;z-index:3;inset:auto;min-height:92vh;min-height:92svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:10rem 1.25rem 6.5rem}
@media(min-width:640px){.hk-inner{padding:10rem 2.5rem 7rem}}
@media(min-width:1024px){.hk-inner{padding:10rem 3.5rem 7.5rem}}
.hk-badge{display:inline-flex;align-items:center;gap:.6rem;width:fit-content;max-width:100%;padding:.45rem 1rem;border-radius:999px;font-size:.78rem;color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(12px);animation:hkUp .8s .1s var(--ease) forwards}
.hk-badge b{color:#fff;font-weight:800}
.hk-badge__dot{width:8px;height:8px;border-radius:50%;background:#7ee0a0;box-shadow:0 0 0 0 rgba(126,224,160,.7);animation:hkPulse 2s infinite}
.hk-title{margin:1.25rem 0 0;max-width:60rem;font-size:clamp(2.15rem,5.3vw,4.4rem);line-height:1.06;font-weight:800;letter-spacing:-.025em}
.hk-line{display:block;overflow:hidden;padding-bottom:.08em}
.hk-line>span{display:block;transform:translateY(112%);animation:hkUp 1s var(--ease) forwards}
.hk-line:nth-child(1)>span{animation-delay:.25s}.hk-line:nth-child(2)>span{animation-delay:.42s}.hk-line:nth-child(3)>span{animation-delay:.6s}
.hk-rot{position:relative;display:inline-block;vertical-align:bottom;width:5.3em;height:1.14em;overflow:hidden;font-style:normal}
.hk-rot b{position:absolute;left:0;top:0;font-weight:800;white-space:nowrap;opacity:0;transform:translateY(100%);
  background:linear-gradient(100deg,#f3d29a,#c58f47 55%,#f3d29a);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hkWord 8s infinite}
.hk-rot b:nth-child(1){animation-delay:.9s}.hk-rot b:nth-child(2){animation-delay:2.9s}.hk-rot b:nth-child(3){animation-delay:4.9s}.hk-rot b:nth-child(4){animation-delay:6.9s}
.hk-sub{margin:1.25rem 0 0;max-width:31rem;font-size:.95rem;line-height:1.7;color:rgba(255,255,255,.75);opacity:0;animation:hkUp .9s .85s var(--ease) forwards}
@media(min-width:640px){.hk-sub{font-size:1.02rem}}
.hk-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem;opacity:0;animation:hkUp .9s 1s var(--ease) forwards}
.hk-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.5rem;border-radius:999px;font-weight:700;font-size:.9rem;transition:transform .3s var(--ease),background .3s,box-shadow .3s}
.hk-btn span{transition:transform .3s var(--ease)}
.hk-btn:hover span{transform:translateX(4px)}
.hk-btn--solid{background:linear-gradient(100deg,#f3d29a,#d19a52);color:#1a1206;box-shadow:0 10px 30px -8px rgba(209,154,82,.7)}
.hk-btn--solid:hover{transform:translateY(-2px);box-shadow:0 16px 34px -8px rgba(209,154,82,.9)}
.hk-btn--ghost{color:#fff;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.hk-btn--ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.hk-btn--ghost:hover span{transform:translateY(3px)}
.hk-stats{display:flex;gap:1.75rem;margin:2rem 0 0;padding:0;list-style:none;opacity:0;animation:hkUp .9s 1.15s var(--ease) forwards}
.hk-stats li{display:flex;flex-direction:column}
.hk-stats b{font-size:1.45rem;font-weight:800;line-height:1.1}
.hk-stats span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:.2rem}
.hk-stats li+li{padding-left:1.75rem;border-left:1px solid rgba(255,255,255,.2)}

@media(max-width:900px){
  .hk-bp{width:130%;right:-30%;top:4%;height:60%;opacity:.35}
  .hk-tags{display:none}
  .hk-shade{background:linear-gradient(0deg,rgba(8,11,20,.94) 0%,rgba(8,11,20,.8) 55%,rgba(8,11,20,.68) 100%)}
}
@media(max-width:480px){.hk-stats{gap:1rem}.hk-stats li+li{padding-left:1rem}.hk-stats b{font-size:1.2rem}}

@keyframes hkDraw{to{stroke-dashoffset:0}}
@keyframes hkFillIn{from{opacity:0}to{opacity:1}}
@keyframes hkIn{to{opacity:1}}
@keyframes hkSoft{to{opacity:.6}}
@keyframes hkUp{to{transform:translateY(0);opacity:1}}
@keyframes hkWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes hkScan{0%{left:0;opacity:1}92%{opacity:1}100%{left:calc(100% - 3px);opacity:0}}
@keyframes hkFade{0%{opacity:0}4%{opacity:1}25%{opacity:1}29%,100%{opacity:0}}
@keyframes hkZoom{0%{transform:scale(1.02) translate3d(0,0,0)}100%{transform:scale(1.16) translate3d(-1.5%,-1%,0)}}
@keyframes hkGridMove{to{background-position:96px 96px,96px 96px,24px 24px,24px 24px}}
@keyframes hkGlow{0%,100%{opacity:.15}50%{opacity:.8}}
@keyframes hkSteam{0%{opacity:0;transform:translateY(0)}20%{opacity:.7}100%{opacity:0;transform:translateY(-70px)}}
@keyframes hkSpark{0%,100%{opacity:0;transform:translateY(0) scale(.6)}50%{opacity:1;transform:translateY(-26px) scale(1)}}
@keyframes hkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes hkPulse{70%{box-shadow:0 0 0 9px rgba(126,224,160,0)}100%{box-shadow:0 0 0 0 rgba(126,224,160,0)}}
@keyframes hkWord{0%{opacity:0;transform:translateY(100%)}4%,22%{opacity:1;transform:translateY(0)}27%,100%{opacity:0;transform:translateY(-100%)}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hk *,.hk{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
  .hk-photos{clip-path:none}.hk-photo--1{opacity:1}.hk-lines path{stroke-dashoffset:0}.hk-fills .fl{opacity:1}
  .hk-line>span,.hk-badge,.hk-sub,.hk-cta,.hk-stats{transform:none;opacity:1}
  .hk-rot b:nth-child(1){opacity:1;transform:none}.hk-scan{display:none}.hk-tag,.hk-grid,.hk-labels text{opacity:1}
}

/* ===================== SECTIONS ===================== */
.kx{position:relative;padding:4.5rem 1.25rem;scroll-margin-top:90px;color:var(--kx-text)}
@media(min-width:640px){.kx{padding:6rem 2.5rem}}
@media(min-width:1024px){.kx{padding:7rem 3.5rem}}
.kx--cream{background:var(--kx-cream)}
.kx--ink{background:radial-gradient(70% 60% at 85% 0,rgba(185,133,67,.18),transparent 70%),var(--kx-ink);color:#fff}
.kx-wrap{max-width:80rem;margin:0 auto}
.kx-head{max-width:46rem;margin-bottom:2.5rem}
.kx-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--kx-brass)}
.kx-eyebrow::before{content:"";width:2rem;height:2px;background:currentColor}
.kx-head h2,.kx-cost__lead h2{margin:.9rem 0 0;font-size:clamp(1.9rem,4.2vw,3.25rem);line-height:1.1;font-weight:800;letter-spacing:-.025em;color:var(--kx-ink)}
.kx-head h2 em{font-style:normal;color:var(--kx-brass)}
.kx-head p,.kx-cost__lead>p{margin:1rem 0 0;font-size:1rem;line-height:1.75;color:var(--kx-muted)}
.kx--ink .kx-head h2,.kx-head--light h2{color:#fff}
.kx--ink .kx-head p{color:rgba(255,255,255,.7)}

.kx-rv{opacity:1;transform:none}
.kx-js .kx-rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.kx-js .kx-rv.is-in{opacity:1;transform:none}

.kx-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.5rem;border-radius:999px;background:var(--kx-ink);color:#fff;font-weight:700;font-size:.88rem;transition:transform .3s var(--ease),background .3s}
.kx-btn span{transition:transform .3s var(--ease)}
.kx-btn:hover{background:var(--kx-brass);transform:translateY(-2px)}
.kx-btn:hover span{transform:translateX(4px)}
.kx-btn--ghost{background:transparent;color:var(--kx-ink);border:1.5px solid var(--kx-ink)}
.kx-btn--ghost:hover{background:var(--kx-ink);color:#fff}

/* trust strip */
.kx-trust{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--kx-line);border:1px solid var(--kx-line);border-radius:1.25rem;overflow:hidden;grid-template-columns:1fr}
@media(min-width:640px){.kx-trust{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.kx-trust{grid-template-columns:repeat(3,1fr)}}
.kx-trust li{display:flex;gap:1rem;padding:1.5rem;background:#fff;transition:background .3s}
.kx-trust li:hover{background:#fffaf2}
.kx-trust h3{margin:0;font-size:1rem;font-weight:800;color:var(--kx-ink)}
.kx-trust p{margin:.35rem 0 0;font-size:.88rem;line-height:1.6;color:var(--kx-muted)}
.kx-ico{flex:none;display:grid;place-items:center;width:2.85rem;height:2.85rem;border-radius:.9rem;background:#f4e8d6;color:var(--kx-brass);transition:background .3s,color .3s,transform .4s var(--ease)}
.kx-ico svg{width:1.4rem;height:1.4rem}
li:hover>.kx-ico,article:hover>.kx-ico{background:var(--kx-brass);color:#fff;transform:rotate(-6deg) scale(1.05)}

/* tabs */
.kx-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.kx-tabs--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:.25rem;margin-inline:-.25rem;padding-inline:.25rem}
.kx-tabs--scroll::-webkit-scrollbar{display:none}
.kx-tab{flex:none;padding:.7rem 1.25rem;border-radius:999px;border:1.5px solid var(--kx-line);background:#fff;font-weight:700;font-size:.88rem;color:var(--kx-ink);cursor:pointer;transition:all .3s var(--ease)}
.kx-tab:hover{border-color:var(--kx-brass)}
.kx-tab.is-active{background:var(--kx-ink);border-color:var(--kx-ink);color:#fff;transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(16,19,28,.6)}
.kx-tab--sm{padding:.6rem 1.05rem;font-size:.82rem}

/* layouts */
.kx-panel{display:none;grid-template-columns:1fr;gap:1.5rem;background:#fff;border:1px solid var(--kx-line);border-radius:1.5rem;padding:1rem}
.kx-panel.is-active{display:grid;animation:kxPanel .6s var(--ease)}
@media(min-width:900px){.kx-panel{grid-template-columns:1.05fr 1fr;gap:2.5rem;padding:1.5rem}}
.kx-panel__plan{background:linear-gradient(160deg,#f6f1e9,#efe5d3);border-radius:1.1rem;padding:1.25rem;display:flex;flex-direction:column;justify-content:center}
.kx-plan{width:100%;height:auto;display:block}
.kx-room{fill:#fffdf9;stroke:#1b1d24;stroke-width:5}
.kx-ctr{fill:#cfa878;stroke:#6b4a2b;stroke-width:2}
.kx-sink{fill:#d3e9f1;stroke:#5d8a9b;stroke-width:2}.kx-tap{fill:#5d8a9b}
.kx-burner{fill:#2b2c30;stroke:#000;stroke-width:1}
.kx-fridge{fill:#cdd2d8;stroke:#7b838c;stroke-width:2}.kx-fl{stroke:#7b838c;stroke-width:2}
.kx-tri{fill:rgba(185,133,67,.14);stroke:var(--kx-brass);stroke-width:2.5;stroke-dasharray:7 6;animation:kxDash 1.2s linear infinite}
.kx-door{fill:none;stroke:#a5a5a5;stroke-dasharray:3 3;stroke-width:1.5}
.kx-island{fill:#8d6240;stroke:#5e3f26;stroke-width:2}
.kx-stool{fill:#e6bd7c;stroke:#8a5a2b;stroke-width:2}
.kx-table{fill:#eadfca;stroke:#b79c70;stroke-width:2}
.kx-walk{stroke:#b9b2a4;stroke-dasharray:4 6;stroke-width:2}
.kx-lbl{font-size:12px;fill:#9a9384;letter-spacing:.1em;text-transform:uppercase}
.kx-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:1rem 0 0;font-size:.74rem;font-weight:600;color:var(--kx-muted)}
.kx-legend span{display:inline-flex;align-items:center;gap:.4rem}
.kx-legend i{width:.8rem;height:.8rem;border-radius:3px;display:inline-block}
.k-s{background:#d3e9f1;border:1px solid #5d8a9b}.k-h{background:#2b2c30}.k-f{background:#cdd2d8;border:1px solid #7b838c}.k-t{background:transparent;border:2px dashed var(--kx-brass)}
.kx-panel__body{padding:.5rem .5rem 1rem;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.kx-chip{padding:.3rem .8rem;border-radius:999px;background:#f4e8d6;color:#8a5a22;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.kx-panel__body h3{margin:.9rem 0 0;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;color:var(--kx-ink);letter-spacing:-.02em}
.kx-panel__body>p{margin:.6rem 0 0;line-height:1.7;color:var(--kx-muted)}
.kx-dl{margin:1.25rem 0 1.5rem;display:grid;gap:1rem;width:100%}
.kx-dl>div{padding-top:1rem;border-top:1px solid var(--kx-line)}
.kx-dl dt{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--kx-brass)}
.kx-dl dd{margin:.35rem 0 0;font-size:.93rem;line-height:1.65;color:var(--kx-text)}
.kx-ticks{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.kx-ticks li{position:relative;padding-left:1.5rem}
.kx-ticks li::before{content:"";position:absolute;left:0;top:.45em;width:.9rem;height:.5rem;border-left:2px solid var(--kx-brass);border-bottom:2px solid var(--kx-brass);transform:rotate(-45deg) scale(.9)}
.kx-tips{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.kx-tips{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.kx-tips{grid-template-columns:repeat(4,1fr)}}
.kx-tips li{display:flex;gap:.9rem;padding:1.25rem;border-radius:1.1rem;background:var(--kx-cream)}
.kx-tips li>span{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--kx-ink);color:#fff;font-size:.8rem;font-weight:800}
.kx-tips h4{margin:0;font-size:.95rem;font-weight:800;color:var(--kx-ink)}
.kx-tips p{margin:.3rem 0 0;font-size:.84rem;line-height:1.6;color:var(--kx-muted)}

/* palette */
.kx-pal{display:grid;gap:1.25rem}
@media(min-width:960px){.kx-pal{grid-template-columns:1.8fr 1fr;align-items:stretch}}
.kx-pal__stage{position:relative;min-height:22rem;border-radius:1.5rem;overflow:hidden;background:#000;aspect-ratio:16/11}
@media(min-width:960px){.kx-pal__stage{aspect-ratio:auto;min-height:32rem}}
.kx-pal__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.6s var(--ease)}
.kx-pal__stage img.is-active{opacity:1;transform:scale(1)}
.kx-pal__cap{position:absolute;left:0;right:0;bottom:0;padding:5rem 1.5rem 1.5rem;background:linear-gradient(0deg,rgba(8,11,20,.9),transparent);z-index:2}
.kx-pal__cap h3{margin:0;font-size:1.5rem;font-weight:800;color:#fff}
.kx-pal__cap p{margin:.4rem 0 0;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.8);max-width:34rem}
.kx-pal__cap .kx-pal__pair{font-size:.8rem;color:var(--kx-brass-lt)}
.kx-pal__cap b{color:#fff}
.kx-pal__btns{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;align-content:stretch}
.kx-sw-btn{display:flex;align-items:center;gap:.8rem;padding:.8rem;border-radius:1rem;border:1.5px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;text-align:left;transition:all .3s var(--ease)}
.kx-sw-btn span{flex:none;width:2.4rem;height:2.4rem;border-radius:.7rem;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);transition:transform .4s var(--ease)}
.kx-sw-btn em{font-style:normal;font-size:.84rem;font-weight:700;line-height:1.25}
.kx-sw-btn:hover{background:rgba(255,255,255,.1)}
.kx-sw-btn:hover span{transform:scale(1.1) rotate(-6deg)}
.kx-sw-btn.is-active{border-color:var(--kx-brass-lt);background:rgba(230,189,124,.14)}

/* materials */
.kx-mpanel{display:none}
.kx-mpanel.is-active{display:block;animation:kxPanel .6s var(--ease)}
.kx-mpanel__sub{margin:.5rem 0 1.25rem;font-weight:600;color:var(--kx-ink)}
.kx-mgrid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.kx-mgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.kx-mgrid{grid-template-columns:repeat(3,1fr)}}
.kx-mat{background:#fff;border:1px solid var(--kx-line);border-radius:1.25rem;padding:1rem 1rem 1.4rem;transition:transform .4s var(--ease),box-shadow .4s}
.kx-mat:hover{transform:translateY(-5px);box-shadow:0 20px 40px -22px rgba(16,19,28,.35)}
.kx-mat h4{margin:1rem .35rem 0;font-size:1.02rem;font-weight:800;color:var(--kx-ink)}
.kx-mat p{margin:.4rem .35rem 0;font-size:.88rem;line-height:1.65;color:var(--kx-muted)}
.kx-sw{display:block;height:6.5rem;border-radius:.9rem;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.kx-sw--carcass1{background:repeating-linear-gradient(90deg,#d8b98a 0 6px,#c8a672 6px 9px,#e0c597 9px 16px)}
.kx-sw--carcass2{background:linear-gradient(135deg,#e7d3b4,#d7bd96)}
.kx-sw--carcass3{background:radial-gradient(circle at 30% 30%,#cdbca2 0 2px,transparent 3px) 0 0/9px 9px,#d9cbb2}
.kx-sw--shutter1{background:repeating-linear-gradient(95deg,#7a4a2c 0 5px,#6a3f24 5px 8px,#85532f 8px 15px)}
.kx-sw--shutter2{background:linear-gradient(135deg,#27396b,#10182f 60%,#3a4d86)}
.kx-sw--shutter3{background:linear-gradient(135deg,#9db89a,#7f9e7c)}
.kx-sw--shutter4{background:repeating-linear-gradient(0deg,#efe7d8 0 28px,#d9cfbb 28px 30px),#efe7d8}
.kx-sw--shutter5{background:linear-gradient(135deg,rgba(200,226,236,.9),rgba(150,190,206,.9));border:6px solid #3a3d44}
.kx-sw--counter1{background:radial-gradient(circle at 20% 30%,#fff 0 1.2px,transparent 2px) 0 0/14px 14px,radial-gradient(circle at 70% 60%,#b9b9b9 0 1.4px,transparent 2px) 0 0/11px 11px,#2b2b2e}
.kx-sw--counter2{background:linear-gradient(115deg,transparent 40%,rgba(120,120,130,.25) 41% 42%,transparent 43%),linear-gradient(60deg,transparent 60%,rgba(120,120,130,.2) 61% 62%,transparent 63%),#f3f1ec}
.kx-sw--counter3{background:linear-gradient(135deg,#f1eee8,#e2ded5)}
.kx-sw--splash1{background:radial-gradient(circle at 50% 50%,transparent 0 9px,#d9d3c6 9px 10px,transparent 10px) 0 0/22px 19px,#f7f4ee}
.kx-sw--splash2{background:linear-gradient(135deg,#a8d4d0,#5fa5a3)}
.kx-sw--splash3{background:linear-gradient(120deg,transparent 30%,rgba(90,90,100,.25) 31% 32%,transparent 33%),linear-gradient(40deg,transparent 55%,rgba(90,90,100,.18) 56% 57%,transparent 58%),#efeeea}
.kx-sw--hardware1{background:linear-gradient(135deg,#e5e7ea,#9aa0a8 50%,#d8dbe0)}
.kx-sw--hardware2{background:repeating-linear-gradient(0deg,#d2c6b2 0 38px,#7c6f5c 38px 41px)}
.kx-sw--hardware3{background:linear-gradient(135deg,#f0d395,#b9863f 55%,#e8c47f)}
.kx-sw--appl1{background:linear-gradient(135deg,#d8dbe0,#8e949c 55%,#cfd3d8)}
.kx-sw--appl2{background:linear-gradient(135deg,#2a2d33,#0f1115 60%,#3b3f48)}
.kx-sw--appl3{background:linear-gradient(135deg,#eceef1,#b4b9c0)}

/* storage */
.kx-storage{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.kx-storage{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.kx-storage{grid-template-columns:repeat(3,1fr)}}
.kx-stor{padding:1.5rem;border-radius:1.25rem;background:var(--kx-cream);transition:transform .4s var(--ease),background .3s,box-shadow .4s}
.kx-stor:hover{background:#fff;transform:translateY(-5px);box-shadow:0 22px 40px -24px rgba(16,19,28,.4)}
.kx-stor .kx-ico{background:#fff}
.kx-stor:hover .kx-ico{background:var(--kx-brass)}
.kx-stor h3{margin:1.1rem 0 0;font-size:1.05rem;font-weight:800;color:var(--kx-ink)}
.kx-stor p{margin:.4rem 0 0;font-size:.9rem;line-height:1.65;color:var(--kx-muted)}

/* process */
.kx-steps{position:relative;list-style:none;margin:0 auto;padding:0;max-width:56rem;display:grid;gap:1.1rem}
.kx-steps__line{position:absolute;left:1.7rem;top:1.5rem;bottom:1.5rem;width:2px;background:rgba(16,19,28,.12);border-radius:2px}
.kx-steps__line i{display:block;width:100%;height:calc(var(--p,0)*100%);background:linear-gradient(180deg,var(--kx-brass-lt),var(--kx-brass));border-radius:2px}
.kx-step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;padding:1.25rem 1.25rem 1.25rem 0;margin-left:0}
.kx-step__n{position:relative;z-index:1;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:#fff;border:2px solid var(--kx-line);font-weight:800;font-size:.95rem;color:var(--kx-ink);transition:all .5s var(--ease)}
.kx-step.is-lit .kx-step__n{background:var(--kx-brass);border-color:var(--kx-brass);color:#fff;transform:scale(1.06)}
.kx-step>div{padding:1.1rem 1.25rem;border-radius:1.1rem;background:#fff;border:1px solid var(--kx-line);transition:transform .4s var(--ease),box-shadow .4s}
.kx-step:hover>div{transform:translateX(5px);box-shadow:0 18px 36px -22px rgba(16,19,28,.35)}
.kx-step h3{margin:0;font-size:1.08rem;font-weight:800;color:var(--kx-ink)}
.kx-step p{margin:.4rem 0 0;font-size:.92rem;line-height:1.65;color:var(--kx-muted)}
.kx-step__ico{display:none}
@media(min-width:768px){.kx-step__ico{display:grid;place-items:center;position:absolute;right:1.5rem;top:1.9rem;width:2.6rem;height:2.6rem;color:var(--kx-brass);opacity:.8}.kx-step__ico svg{width:1.7rem;height:1.7rem}.kx-step>div{padding-right:4.5rem}}

/* cost */
.kx-cost{display:grid;gap:2.5rem}
@media(min-width:960px){.kx-cost{grid-template-columns:1fr 1.15fr;gap:4rem;align-items:start}.kx-cost__lead{position:sticky;top:7rem}}
.kx-cost__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.kx-cost__list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.kx-cost__list li{display:flex;gap:1rem;padding:1.25rem;border-radius:1.1rem;background:var(--kx-cream);transition:transform .4s var(--ease)}
.kx-cost__list li:hover{transform:translateX(6px)}
.kx-cost__list .kx-ico{background:#fff}
.kx-cost__list h3{margin:0;font-size:1rem;font-weight:800;color:var(--kx-ink)}
.kx-cost__list p{margin:.3rem 0 0;font-size:.9rem;line-height:1.6;color:var(--kx-muted)}

/* faq */
.kx-faq{display:grid;gap:2rem}
@media(min-width:960px){.kx-faq{grid-template-columns:.85fr 1.15fr;gap:4rem}.kx-faq .kx-head{position:sticky;top:7rem;align-self:start}}
.kx-faq__list{display:grid;gap:.75rem}
.kx-faq__item{background:#fff;border:1px solid var(--kx-line);border-radius:1.1rem;transition:box-shadow .3s}
.kx-faq__item[open]{box-shadow:0 18px 36px -24px rgba(16,19,28,.4)}
.kx-faq__item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.35rem;cursor:pointer;font-weight:700;font-size:.98rem;color:var(--kx-ink)}
.kx-faq__item summary::-webkit-details-marker{display:none}
.kx-faq__plus{position:relative;flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--kx-cream);transition:background .3s,transform .4s var(--ease)}
.kx-faq__plus::before,.kx-faq__plus::after{content:"";position:absolute;left:50%;top:50%;width:.8rem;height:2px;background:var(--kx-ink);transform:translate(-50%,-50%);transition:transform .4s var(--ease)}
.kx-faq__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.kx-faq__item[open] .kx-faq__plus{background:var(--kx-brass);transform:rotate(180deg)}
.kx-faq__item[open] .kx-faq__plus::before,.kx-faq__item[open] .kx-faq__plus::after{background:#fff}
.kx-faq__item[open] .kx-faq__plus::after{transform:translate(-50%,-50%) rotate(0)}
.kx-faq__item p{margin:0;padding:0 1.35rem 1.3rem;font-size:.93rem;line-height:1.75;color:var(--kx-muted);animation:kxPanel .5s var(--ease)}

@keyframes kxPanel{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes kxDash{to{stroke-dashoffset:-26}}
@media(prefers-reduced-motion:reduce){.kx *{animation:none!important;transition:none!important}.kx-js .kx-rv{opacity:1;transform:none}}

/* ---- home searcher: modular kitchen finder ---- */
.ks-title{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .55rem;margin:0 0 .65rem .25rem;font-size:.82rem;font-weight:800;letter-spacing:.02em;color:var(--kx-ink)}
.ks-title__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--kx-brass);box-shadow:0 0 0 4px rgba(185,133,67,.18)}
.ks-title__sub{font-weight:500;color:var(--kx-muted);font-size:.78rem}
#property-search-form button[type="submit"]{background:linear-gradient(100deg,#c99655,#a8742f);color:#fff}
#property-search-form button[type="submit"]:hover{background:linear-gradient(100deg,#b98543,#8a5a22)}
#property-search-form .search-select__trigger:focus-visible{outline:2px solid var(--kx-brass);outline-offset:2px}
@media(max-width:640px){.ks-title__sub{display:none}.ks-title{margin-bottom:.55rem}}

/* ---- mobile polish (phones) ---- */
@media(max-width:480px){
  .hk-title{font-size:clamp(1.7rem,8.4vw,2.15rem)}
  .sv-hero .hk-title{font-size:clamp(1.65rem,8vw,2rem)}
  .hk-cta{gap:.6rem}
  .hk-cta .hk-btn{flex:1 1 100%;justify-content:center;min-height:3rem}
  .hk-badge{font-size:.72rem;padding:.4rem .8rem}
  .hk-sub{font-size:.92rem}
  .hk-stats{flex-wrap:wrap;row-gap:.9rem}
  .sv-quick__chip{min-height:2.5rem}
}
@media(max-width:639px){
  #property-search-form{padding:.85rem}
  #property-search-form .search-select__trigger{min-height:3.25rem}
  #property-search-form .search-select__panel{max-height:14rem;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  #property-search-form .search-select__option{min-height:2.75rem;display:flex;align-items:center}
  #property-search-form button[type="submit"]{min-height:3.25rem;border-radius:.85rem}
}