/* STEEL design DNA: flat #CBCBCB field, white steel wordmark, Helvetica Neue, one orange. */
:root{
  --white:#ffffff; --gray:#cbcbcb; --charcoal:#343434; --mid:#9d9d9d; --orange:#ff7426;
  --font:"Helvetica Neue",Helvetica,"Inter Tight",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,3.2vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--gray)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--font);color:var(--charcoal);background:var(--gray);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
sup{font-size:.42em;vertical-align:top;position:relative;top:.12em;margin-left:.04em;font-weight:500}

/* labels: tiny, with the orange dot */
.lab{font-size:11px;line-height:1.5;letter-spacing:.01em;color:var(--charcoal)}
.lab i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-right:8px;transform:translateY(-1px)}
.lab em{font-style:normal;color:var(--mid)}

/* header: orange mark + stacked menu, STEEL° centre, cart right */
.top{position:fixed;z-index:80;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:var(--pad);pointer-events:none}
.top>*{pointer-events:auto}
.top-l{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.mark{display:block;width:16px;height:16px;border-radius:0 16px 16px 0;background:var(--orange);position:relative}
.mark i{position:absolute;inset:0}
.menu{display:flex;flex-direction:column;gap:3px;font-size:11px;line-height:1.35;color:var(--mid)}
.menu a{transition:color .3s}
.menu a:hover,.menu a.on{color:var(--charcoal)}
.brand{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--charcoal)}
.brand sup{font-size:.6em;top:0}
.top-r{display:flex;justify-content:flex-end;align-items:center;gap:22px;font-size:12px}
.cart{font-weight:500}
.cart b{font-weight:500}
.sound-btn{display:inline-flex;align-items:center;gap:2px;height:20px;padding:0 2px}
.sound-btn i{display:block;width:2px;height:12px;background:var(--charcoal);border-radius:2px;animation:eq 1s ease-in-out infinite}
.sound-btn i:nth-child(2){animation-delay:.15s}.sound-btn i:nth-child(3){animation-delay:.3s}.sound-btn i:nth-child(4){animation-delay:.45s}
.sound-btn[aria-pressed="false"] i{animation:none;transform:scaleY(.25)}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* giant wordmark, hero only */
.wordmark{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1}
.wordmark span{font-weight:700;font-size:min(52vw,86vh);letter-spacing:-.085em;line-height:.8;color:var(--white);transform:translateY(5vh);will-change:transform;padding-right:.06em}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:2;display:block;pointer-events:none}

/* hero */
section{position:relative;z-index:3}
.hero{height:100vh;min-height:640px}
.hero-copy{position:absolute;left:var(--pad);bottom:calc(var(--pad) + 44px);display:flex;flex-direction:column;gap:16px;max-width:min(46vw,620px)}
.h-xl{font-weight:700;font-size:clamp(44px,6.4vw,104px);letter-spacing:-.065em;line-height:.9;color:var(--charcoal)}
.h-xl .line{display:block;overflow:hidden;padding:.06em 0 .12em;margin-bottom:-.12em}
.h-xl .line>span{display:block}
.tag{font-size:clamp(13px,1.05vw,16px);line-height:1.45;color:var(--charcoal)}
.buy{display:flex;align-items:center;gap:18px;margin-top:6px}
.price{font-size:15px;font-weight:500}
.btn-line{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 18px;border-radius:99px;border:1px solid var(--orange);color:var(--orange);font-size:13px;font-weight:500;transition:background .35s var(--ease),color .35s var(--ease)}
.btn-line span{font-size:16px;line-height:1}
.btn-line:hover{background:var(--orange);color:#fff}

/* orange circular details button */
.details{position:absolute;right:var(--pad);top:34%;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500;color:var(--charcoal)}
.details b{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--orange);color:#fff;font-weight:400;font-size:18px;transition:transform .5s var(--ease)}
.details:hover b{transform:rotate(45deg) scale(1.08)}
.corner{position:absolute}
.corner.bl{left:var(--pad);bottom:var(--pad)}
.corner.br{right:var(--pad);bottom:var(--pad);text-align:right}

.after{min-height:70vh;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 var(--pad)}
.h-md{font-weight:700;font-size:clamp(32px,4vw,64px);letter-spacing:-.05em;line-height:1;color:var(--charcoal)}

.toast{position:fixed;left:50%;bottom:28px;z-index:120;transform:translate(-50%,16px);opacity:0;pointer-events:none;padding:12px 20px;border-radius:99px;font-size:13px;font-weight:500;background:var(--charcoal);color:#fff;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:760px){
  .menu{display:none}
  .hero-copy{max-width:88vw;bottom:calc(var(--pad) + 40px)}
  .details{top:22%}
  .corner.br{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== mirrored backgrounds live in a fixed layer BEHIND the 3D canvas, so the device can sit inside a tile ===== */
#bgs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#bgs .bg{position:absolute;left:0;top:0;will-change:transform}
#bgs .paper{background:var(--white)}
#bgs .tile{background:#e6e6e6}
.bgph{position:absolute;inset:0;pointer-events:none}

/* ===== 02 product ===== */
.product{padding:calc(var(--pad) * 3.2) var(--pad) calc(var(--pad) * 2.4);color:var(--charcoal)}
.prod-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(20px,3vw,44px)}
.prod-grid{display:grid;grid-template-columns:1.1fr .5fr 1.05fr;grid-template-rows:auto auto;gap:12px;align-items:start}
.tile{position:relative;display:block;overflow:hidden;background:#e6e6e6}
.tile.big{grid-column:1;grid-row:1 / span 2;aspect-ratio:1/1.12;background:transparent}
.tile.sm{aspect-ratio:1/1}
.tile.sm.a{grid-column:2;grid-row:1}
.tile.sm.b{grid-column:2;grid-row:2}
.tile img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.14));transition:transform .8s var(--ease)}
.tile:hover img{transform:scale(1.06) rotate(-1deg)}
.cap{position:absolute;left:12px;bottom:10px;font-size:10px;color:var(--mid)}
.cap.tl{left:14px;top:12px;bottom:auto}
.spec-t{grid-column:3;grid-row:1 / span 2;display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;padding-left:clamp(0px,1.4vw,24px)}
.spec-t dl>div{display:grid;grid-template-columns:.7fr 1.3fr;gap:16px;padding:13px 0;border-top:1px solid #d9d9d9;font-size:11.5px;line-height:1.4}
.spec-t dl>div:last-child{border-bottom:1px solid #d9d9d9}
.spec-t dt{color:var(--charcoal);font-weight:500}
.spec-t dd{color:var(--mid);text-align:right}
.next{display:flex;align-items:center;gap:14px;margin-top:18px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.next i{flex:1;height:1px;background:var(--orange);transform-origin:left}
.circ{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;font-style:normal;font-size:14px;line-height:1;font-weight:400;transition:transform .5s var(--ease)}
a:hover .circ,a.circ:hover{transform:scale(1.14) rotate(45deg)}

.family{margin-top:clamp(60px,9vw,150px)}
.h-sub{display:flex;flex-direction:column;font-weight:700;font-size:clamp(26px,3.2vw,52px);letter-spacing:-.055em;line-height:1;margin:12px 0 clamp(20px,2.6vw,36px)}
.h-sub em{font-style:normal;color:#bdbdbd}
.fam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ftile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;aspect-ratio:1/.92;padding:22px 20px 16px;background:#e6e6e6;overflow:hidden;transition:background .5s var(--ease)}
.ftile:hover{background:#dedede}
.fhead{text-align:center;display:flex;flex-direction:column;gap:3px}
.fhead b{font-size:14px;font-weight:700;letter-spacing:-.02em}
.fhead small{font-size:10.5px;color:var(--mid)}
.ftile img{width:78%;margin:auto;filter:drop-shadow(0 16px 20px rgba(0,0,0,.16));transition:transform .9s var(--ease)}
.ftile:hover img{transform:translateY(-6px) scale(1.04)}
.ffoot{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:12px;font-weight:500}
.appicon{width:42%;aspect-ratio:1;margin:auto;border-radius:22%;background:var(--orange);display:flex;align-items:center;justify-content:center;gap:5%;box-shadow:0 16px 22px rgba(255,116,38,.28);transition:transform .9s var(--ease)}
.ftile:hover .appicon{transform:translateY(-6px) scale(1.05)}
.appicon span{width:7%;border-radius:99px;background:#fff;animation:bar 1.4s ease-in-out infinite}
.appicon span:nth-child(1){height:22%}.appicon span:nth-child(2){height:48%;animation-delay:.12s}.appicon span:nth-child(3){height:64%;animation-delay:.24s}.appicon span:nth-child(4){height:40%;animation-delay:.36s}.appicon span:nth-child(5){height:18%;animation-delay:.48s}
@keyframes bar{50%{transform:scaleY(.55)}}

.after{position:relative;z-index:3;background:var(--charcoal);color:#fff;margin:0 calc(var(--pad) * -1)}
.after .lab,.after .h-md{color:#fff}

@media (max-width:900px){
  .prod-grid{grid-template-columns:1fr 1fr}
  .tile.big{grid-column:1 / span 2;grid-row:auto;aspect-ratio:1/.9}
  .tile.sm.a{grid-column:1;grid-row:auto}.tile.sm.b{grid-column:2;grid-row:auto}
  .spec-t{grid-column:1 / span 2;grid-row:auto;padding-left:0;margin-top:14px}
  .fam-grid{grid-template-columns:1fr}
  .ftile{aspect-ratio:1/.8}
}

/* header stays legible over scrolling content: a soft paper fade once we leave the hero */
.top::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 28px);background:linear-gradient(#fff 55%,rgba(255,255,255,0));opacity:0;transition:opacity .5s var(--ease);pointer-events:none;z-index:-1}
body.on-paper .top::before{opacity:1}