/* Kong Climb homepage. The right rail is the skyscraper; every section is a floor. */
.kkc-climb{--rail:clamp(280px,34vw,520px)}

/* sky extras */
#stars{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.moon{position:absolute;left:9%;top:9%;width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#fff8ec,#eed7bd 58%,#cdb397);
  box-shadow:0 0 0 14px rgba(255,241,228,.05),0 0 60px rgba(255,241,228,.35);transform:translateY(calc((1 - var(--p)) * 115vh))}
.cloud{position:absolute;width:38vw;max-width:520px;min-width:220px;opacity:.55;will-change:transform}
.cloud svg{width:100%;height:auto;display:block}
.c1{top:16%;left:-8%;animation:drift 70s linear infinite}
.c2{top:46%;left:52%;opacity:.35;animation:drift 95s linear infinite reverse}
.c3{top:72%;left:18%;opacity:.28;width:26vw;animation:drift 120s linear infinite}
@keyframes drift{from{translate:-6vw 0}to{translate:12vw 0}}
.beam{position:absolute;bottom:-25vh;width:70vw;height:150vh;transform-origin:50% 100%;mix-blend-mode:screen;opacity:calc(1 - var(--p) * 4);
  background:conic-gradient(from -5deg at 50% 100%,rgba(255,241,228,.26) 0deg,rgba(255,241,228,.14) 6deg,rgba(255,241,228,.26) 10deg,transparent 10.5deg,transparent 360deg)}
.b1{left:-10vw;animation:sweep 11s ease-in-out infinite alternate}
.b2{left:34vw;animation:sweep 13s ease-in-out infinite alternate-reverse}
@keyframes sweep{from{transform:rotate(-34deg)}to{transform:rotate(30deg)}}
@supports (animation-timeline:scroll()){
  .kkc-climb .hdr-progress{animation:altbar linear both;animation-timeline:scroll(root)}
  @keyframes altbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* HUD altimeter */
.hud{position:fixed;z-index:31;right:clamp(12px,1.6vw,24px);top:calc(var(--hdr) + 14px);display:grid;grid-template-columns:auto auto;gap:4px 16px;align-items:center;
  padding:10px 14px;border-radius:12px;background:rgba(6,9,11,.72);border:1px solid rgba(255,241,228,.12);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums}
.hud .lbl{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700}
.odo{display:inline-flex;font-family:var(--display);font-size:1.6rem;line-height:1;height:1em;overflow:hidden;color:var(--lime)}
.odo .d{position:relative;width:.82em;height:1em;overflow:hidden}
.odo .reel{position:absolute;left:0;top:0;width:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.odo .reel i{display:block;height:1em;font-style:normal;text-align:center}
.odo.alt-odo{font-size:1.1rem;color:var(--cream)}
.hud .name{grid-column:1/-1;font-weight:700;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase}

/* Kong on the facade */
.kong{position:fixed;z-index:20;right:calc(var(--rail) / 2);top:50%;transform:translate(50%,-50%);width:clamp(180px,17vw,290px);pointer-events:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.kong img{width:100%;height:auto}
.kong .head{display:none}
.kong.in{animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(50%,-50%)}50%{transform:translate(50%,calc(-50% - 6px))}}
#planes{position:fixed;inset:0;z-index:25;pointer-events:none;width:100%;height:100%}

/* tower */
.kkc-climb .page{position:relative}
.tower{position:absolute;top:var(--hdr);right:0;bottom:0;width:var(--rail);pointer-events:none;z-index:1}
.facade{position:absolute;left:50%;top:0;width:min(58%,250px);transform:translateX(-50%)}
.floor{position:absolute;left:0;width:100%;background:linear-gradient(90deg,var(--brick) 0%,var(--brick-2) 30%,var(--brick) 70%,#152125 100%);box-shadow:inset 0 0 0 1px rgba(255,241,228,.04)}
.floor::before{content:"";position:absolute;left:-7%;right:-7%;top:0;height:14px;background:linear-gradient(180deg,var(--brick-3),#0d1719);box-shadow:0 8px 16px rgba(0,0,0,.5)}
.floor .tag{position:absolute;right:8px;top:24px;font-family:var(--display);font-size:2.2rem;color:rgba(255,241,228,.07);line-height:1}
.wins{position:absolute;inset:34px 14% 24px;display:grid;gap:12px 10px;align-content:start}
.win{display:block;height:34px;border-radius:3px;background:#0b1416;border:1px solid #223236;transition:background .3s var(--d,0s),box-shadow .3s var(--d,0s)}
.floor.past .win{background:#5b6b1f;border-color:#6e7f2a}
.floor.lit .win{background:var(--lime);border-color:#b8ef55;box-shadow:0 0 14px rgba(141,204,36,.6),inset 0 0 6px rgba(255,255,255,.5)}
/* 0.1.15: rooftop at the top of the page (mast + beacon), lobby at the bottom; the old spire becomes the street-level base */
.floor.rooftop .wins{top:190px}
.floor.rooftop .mast{position:absolute;left:50%;top:44px;width:4px;height:120px;background:#33474f;transform:translateX(-50%)}
.floor.rooftop .beacon{position:absolute;left:50%;top:30px;width:16px;height:16px;border-radius:50%;background:var(--lime);transform:translateX(-50%);
  box-shadow:0 0 0 6px rgba(141,204,36,.18),0 0 30px 8px rgba(141,204,36,.6);animation:blink 1.6s ease-in-out infinite}
.spire .mast,.spire .beacon,.spire .roof{display:none}
.spire .body{top:0!important;background:linear-gradient(180deg,#26373d 0%,#101a1d 70%)!important}
.lobby .awning{position:absolute;left:-10%;right:-10%;bottom:72px;height:56px;border-radius:6px 6px 0 0;
  background:repeating-linear-gradient(90deg,var(--lime) 0 22px,#101f23 22px 44px);box-shadow:0 12px 24px rgba(0,0,0,.5);display:grid;place-items:center}
.lobby .awning b{font-family:var(--display);font-weight:400;font-size:.9rem;letter-spacing:.14em;color:var(--ink);background:var(--cream);padding:4px 10px;border-radius:4px}
.lobby .door{position:absolute;left:32%;right:32%;bottom:0;height:72px;background:linear-gradient(180deg,#f7dc8e,#e2b15a);border:4px solid var(--ink);border-bottom:0;box-shadow:0 0 30px rgba(247,220,142,.55)}
.lobby .door::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;background:var(--ink);transform:translateX(-50%)}
.spire{position:absolute;left:50%;bottom:0;width:min(58%,250px);transform:translateX(-50%)}
.spire .roof{position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(90deg,var(--brick),var(--brick-2),var(--brick));clip-path:polygon(0 100%,20% 40%,20% 20%,80% 20%,80% 40%,100% 100%)}
.spire .body{position:absolute;left:0;right:0;top:118px;bottom:0;background:linear-gradient(90deg,var(--brick) 0%,var(--brick-2) 40%,var(--brick) 100%)}
.spire .mast{position:absolute;left:50%;top:-110px;width:4px;height:130px;background:#33474f;transform:translateX(-50%)}
.spire .beacon{position:absolute;left:50%;top:-122px;width:16px;height:16px;border-radius:50%;background:var(--lime);transform:translateX(-50%);
  box-shadow:0 0 0 6px rgba(141,204,36,.18),0 0 30px 8px rgba(141,204,36,.6);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.spire .sign{position:absolute;left:50%;top:30px;transform:translateX(-50%);font-family:var(--display);font-size:.8rem;letter-spacing:.12em;color:var(--pink);text-shadow:0 0 12px rgba(226,97,129,.8);white-space:nowrap}

/* content column */
.col{position:relative;z-index:2;padding-right:var(--rail);background:linear-gradient(90deg,rgba(16,31,35,.42),rgba(16,31,35,.28) 60%,transparent)}
.col section{padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,8vw,112px)}
.kkc-climb .foot{padding-right:var(--rail)}
.more{margin:26px 0 0}

/* hero */
.hero{padding-top:clamp(28px,4vw,56px)!important}
.hero h1{font-size:clamp(2.7rem,5.6vw,5.2rem);line-height:.98;margin-bottom:18px;text-shadow:0 6px 0 rgba(6,9,11,.35),0 24px 60px rgba(0,0,0,.35)}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero .kkc-search{margin-top:26px}
.facts{display:flex;gap:28px;flex-wrap:wrap;margin:26px 0 0;font-size:.86rem;color:var(--muted);font-weight:600}
.facts div{display:flex;flex-direction:column-reverse}
.facts dt{margin:0}
.facts dd{margin:0;font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--cream);line-height:1.1}
.marq{margin-top:clamp(36px,6vw,64px);border:2px solid #2b3d43;border-radius:10px;background:#06090b;padding:10px 0;overflow:hidden;position:relative;box-shadow:inset 0 0 0 2px #0f191c,0 0 0 4px #1a262a}
.marq::before,.marq::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:1;pointer-events:none}
.marq::before{left:0;background:linear-gradient(90deg,#06090b,transparent)}
.marq::after{right:0;background:linear-gradient(270deg,#06090b,transparent)}
.marq .track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marq span{padding:0 22px;font-family:var(--display);font-size:1.05rem;letter-spacing:.12em;color:var(--orange);white-space:nowrap;text-shadow:0 0 10px rgba(255,133,59,.7)}
.marq span:nth-child(even){color:var(--lime);text-shadow:0 0 10px rgba(141,204,36,.7)}
.marq span i{font-style:normal;color:#3a4a4f;margin-left:22px;text-shadow:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* category windows */
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cat{position:relative;display:flex;flex-direction:column;text-decoration:none;border-radius:16px;overflow:hidden;background:var(--slab);border:1px solid var(--line);min-height:250px;isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.cat .ph{position:absolute;inset:0;background:#fff;display:grid;place-items:center;padding:8% 10% 30%;z-index:0}
.cat .ph img{width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cat .frame{position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 0 10px var(--slab),inset 0 0 0 12px var(--line);pointer-events:none}
.cat .lbl{position:relative;z-index:2;margin-top:auto;padding:16px 18px 18px;background:linear-gradient(180deg,transparent,rgba(6,9,11,.92) 40%);display:flex;justify-content:space-between;align-items:end;gap:10px}
.cat .h3{font-size:1.5rem;color:var(--cream)}
.cat small{font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);white-space:nowrap}
.cat:hover,.cat:focus-visible{transform:translateY(-6px);border-color:var(--lime);box-shadow:0 24px 50px -20px rgba(0,0,0,.8),0 0 40px -8px rgba(141,204,36,.45)}
.cat:hover .ph img{transform:scale(1.07) rotate(-2deg)}

/* cards (home floors) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.card,.tile{position:relative;background:var(--slab);border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:10px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.card .ph,.tile .ph{display:grid;place-items:center;aspect-ratio:1;border-radius:9px;background:#fff;overflow:hidden;padding:8%}
.card .ph img,.tile .ph img{width:100%;height:100%;object-fit:contain}
.card h3,.tile h3{font-family:var(--body);font-weight:700;font-size:.95rem;line-height:1.28;text-wrap:pretty}
.card h3 a,.tile h3 a{text-decoration:none}
.card h3 a::after,.tile h3 a::after{content:"";position:absolute;inset:0;z-index:0}
.card .row,.tile .row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;position:relative;z-index:1}
.card .price,.tile .price,.list .price{font-weight:800;font-size:1rem;font-variant-numeric:tabular-nums}
.card .price del,.tile .price del{opacity:.6;font-weight:600;font-size:.85em}
.card .price ins,.tile .price ins{text-decoration:none}
.add{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:9px;border:1px solid rgba(141,204,36,.5);background:rgba(141,204,36,.12);color:var(--lime);font-weight:800;font-size:.82rem;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.add:hover{background:var(--lime);color:var(--ink)}
.add.loading{opacity:.6}
.add.added{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.row .added_to_cart{display:none}
.card:hover,.card:focus-within{border-color:rgba(141,204,36,.7);box-shadow:0 22px 44px -20px rgba(0,0,0,.85),0 0 34px -10px rgba(141,204,36,.5)}
.badge{position:absolute;top:16px;left:16px;z-index:2;font-weight:800;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--orange);color:var(--ink)}

/* imports strip */
.strip-wrap{position:relative;overflow:hidden;border-radius:14px}
.strip{display:flex;gap:14px;width:max-content;padding:4px 0 8px}
.strip .card{width:230px;flex:0 0 auto}
.strip-hint{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:600;font-size:.82rem;margin-top:14px}
.strip-hint i{width:10px;height:10px;border-radius:50%;background:var(--orange);animation:blink 1.4s infinite;flex:0 0 auto}
.strip-hint .on-phone{display:none}
@media (max-width:900px){.strip-hint .on-desk{display:none}.strip-hint .on-phone{display:inline}}
.flag{display:inline-grid;grid-template-columns:repeat(7,1fr);gap:1px;width:34px;height:22px;border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:8px}
.flag i{background:var(--pink)}.flag i:nth-child(2n){background:var(--cream)}

/* bulk */
.bulk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start}
.kilo{margin:0;font-family:var(--display);font-size:clamp(4.2rem,10vw,8rem);line-height:.9;color:var(--lime);text-shadow:0 8px 0 rgba(6,9,11,.45)}
.kilo small{display:block;font:800 .8rem/1.2 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:14px;text-shadow:none;max-width:12ch}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.row-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);transition:padding-left .3s}
.row-item:hover{padding-left:8px}
.row-item .ph{width:56px;height:56px;border-radius:8px;background:#fff;padding:4px;display:grid;place-items:center}
.row-item .ph img{width:100%;height:100%;object-fit:contain}
.row-item a{text-decoration:none;font-weight:700}
.row-item a:hover{color:var(--lime)}

/* legends wall */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{gap:8px}
.tile h3{font-size:.84rem}
.tile:hover{transform:translateY(-4px) rotate(-1deg);border-color:var(--orange)}

/* rooftop */
.roof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 30px}
.roof div{padding:18px;border-radius:14px;background:rgba(6,9,11,.5);border:1px solid var(--line)}
.roof .ico{width:28px;height:28px;stroke:var(--lime);margin-bottom:10px}
.roof b{display:block;font-size:1rem;margin-bottom:4px}
.roof p{margin:0;font-size:.88rem;color:var(--muted);font-weight:500}

@media (max-width:1100px){.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
/* 0.1.17 mobile perf: no blend-mode beams, no live blur over the moving sky, no glow repaint on the tower windows,
   no filter on the animated mascot; the moon uses the stable small-viewport height so the address bar can't move it */
@supports (height:1svh){.moon{transform:translateY(calc((1 - var(--p)) * 115svh))}}
@media (max-width:900px),(pointer:coarse){
  .beam{display:none}
  .hero .kkc-search{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,9,11,.86)}
  .floor.lit .win{box-shadow:none}
  .kong{filter:none}
}
@media (max-width:900px){
  .kkc-climb{--rail:62px}
  .hud{top:auto;bottom:14px;right:10px;padding:8px 10px;gap:2px 10px}
  .hud .name{display:none}
  .odo{font-size:1.2rem}
  .kong{width:58px;right:31px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
  .kong .full{display:none}.kong .head{display:block}
  .facade,.spire{width:46px}
  .floor .tag,.lobby .awning,.spire .sign{display:none}
  .wins{inset:22px 8px 12px;gap:8px 6px}
  .floor.rooftop .wins{top:92px}
  .floor.rooftop .mast{top:26px;height:60px}
  .floor.rooftop .beacon{top:16px;width:12px;height:12px}
  .win{height:22px}
  .lobby .door{left:20%;right:20%;height:40px}
  .col{background:linear-gradient(90deg,rgba(16,31,35,.6),rgba(16,31,35,.45))}
  /* Phones: compact two-up windows, photo on white with the label underneath (no overlay on the photo). */
  .cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cat{min-height:0;border-radius:14px}
  .cat .ph{position:relative;inset:auto;aspect-ratio:1;padding:10%;margin:6px 6px 0;border-radius:10px}
  .cat .frame{display:none}
  .cat .lbl{margin-top:0;padding:10px 10px 12px;background:none;flex-direction:column;align-items:flex-start;gap:2px}
  .cat .h3{font-size:1.05rem;line-height:1.1}
  .cat small{font-size:.68rem;letter-spacing:.1em}
  .cat:hover,.cat:focus-visible{transform:none}
  .bulk,.roof{grid-template-columns:1fr}
  .strip-wrap{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * clamp(16px,4vw,56px));padding:0 clamp(16px,4vw,56px)}
  .strip .card{scroll-snap-align:start;width:200px}
  .moon{width:52px;height:52px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){.facts{gap:18px}.hero h1{font-size:2.5rem}}
.price small{font-weight:600;color:var(--muted);font-size:.74rem;margin-right:2px}