/* TBE motion & hover polish v1 (Dan feedback 15 Oct) - staging 16 Oct 2026 */
:root{--tbe-ease:cubic-bezier(.2,.7,.2,1)}

/* 1a. Mobile + desktop menu: fade/slide instead of a hard jump */
@media (prefers-reduced-motion:no-preference){
 .tbemenu{transition:opacity .28s var(--tbe-ease),transform .34s var(--tbe-ease),visibility 0s linear 0s}
 .tbemenu[hidden]{display:block!important;opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;transition:opacity .2s ease,transform .22s ease,visibility 0s linear .22s}
 .tbemenu .tbm>div{transition:opacity .4s var(--tbe-ease),transform .45s var(--tbe-ease)}
 .tbemenu .tbm>div:nth-child(2){transition-delay:.04s}.tbemenu .tbm>div:nth-child(3){transition-delay:.08s}.tbemenu .tbm>div:nth-child(4){transition-delay:.12s}
 .tbemenu[hidden] .tbm>div{opacity:0;transform:translateY(8px);transition-delay:0s}
 .burger{transition:background-color .25s ease}
}
/* 1b. FAQ accordions (JS animates height; this smooths the + icon) */
summary:after{transition:transform .32s var(--tbe-ease)!important}
details.tbe-anim{overflow:hidden}
summary{transition:color .2s ease}
summary:hover{color:var(--o,#f26441)}

/* 2. Eyebrow labels: B (numbered sections) is the default; ?eyebrow=a|c|off previews others */
html.eb-a body .k{text-transform:none;letter-spacing:-.005em;font-size:16px;font-weight:600;color:#a3a3a3;gap:0}
html.eb-a body .k:before{display:none}
html:not(.eb-a):not(.eb-c):not(.eb-off) body{counter-reset:tbek}
html:not(.eb-a):not(.eb-c):not(.eb-off) body .k{text-transform:none;letter-spacing:-.005em;font-size:15px;font-weight:600;color:#c9c9c9}
html:not(.eb-a):not(.eb-c):not(.eb-off) body .sh .k{counter-increment:tbek}
html:not(.eb-a):not(.eb-c):not(.eb-off) body .k:before{display:none}
html:not(.eb-a):not(.eb-c):not(.eb-off) body .sh .k:before{display:inline-block;content:counter(tbek,decimal-leading-zero);width:auto;height:auto;background:none!important;color:var(--o,#f26441);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;letter-spacing:.06em;padding-right:12px;margin-right:2px;border-right:1px solid rgba(255,255,255,.22);line-height:1}
html.eb-c body .k{text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;color:#bdbdbd;gap:16px}
html.eb-c body .k:before{display:none}
html.eb-c body .sh .k{display:flex;width:100%;min-width:240px}
html.eb-c body .sh .k:after{content:"";flex:1;height:1px;background:currentColor;opacity:.28}
.tbe-ebsw{position:fixed;left:16px;bottom:16px;z-index:99999;display:flex;gap:4px;align-items:center;padding:6px;border-radius:999px;background:rgba(20,20,20,.92);box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.12);font:600 13px/1 system-ui,sans-serif;color:#bbb;backdrop-filter:blur(10px)}
.tbe-ebsw span{padding:0 8px}
.tbe-ebsw button{all:unset;cursor:pointer;padding:7px 11px;border-radius:999px;color:#eee}
.tbe-ebsw button[aria-pressed="true"]{background:#f26441;color:#fff}
@media (max-width:700px){.tbe-ebsw{bottom:92px}}

/* 3. Scroll reveal + parallax (JS adds classes only below the fold; nothing hidden without JS) */
@media (prefers-reduced-motion:no-preference){
 .tbe-rv{opacity:0;translate:0 18px;transition:opacity .7s var(--tbe-ease),translate .8s var(--tbe-ease)}
 .tbe-rv.tbe-in{opacity:1;translate:0 0}
 .vslot{overflow:hidden}
 .vslot .vimg.tbe-px{top:-9%;bottom:-9%;will-change:transform}
}

/* 4a. Buttons */
.btn:not(.ghost){transition:transform .28s var(--tbe-ease),box-shadow .28s var(--tbe-ease),background-color .25s ease,color .25s ease!important}
.btn:not(.ghost) .ico{transition:transform .28s var(--tbe-ease)}
@media (hover:hover){
 .btn:not(.ghost):hover{transform:translateY(-2px)}
 .btn:not(.ghost):hover .ico{transform:translateX(3px)}
 .btn:not(.ghost):not(.white):not(.ink):hover{background:#f4764f;box-shadow:0 14px 30px -14px rgba(242,100,65,.85),inset 0 0 0 1px rgba(255,255,255,.12)}


 .btn.white:hover{background:#fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
 .tA .btn.ink:hover{background:#fff;color:#1a1a1a;box-shadow:0 14px 30px -16px rgba(0,0,0,.6)}
}
.btn:not(.ghost):active{transform:translateY(0) scale(.985);transition-duration:.08s!important}
.tl .ico,.go{transition:transform .28s var(--tbe-ease),background-color .25s ease,color .25s ease}
@media (hover:hover){.tl:hover .ico{transform:translateX(4px)}}

/* 4b. Cards: richer, still quiet */
.rung,.adc,.card,.oc,.rc,.mc,.tile,.bc,.tbp-card,.vpf a .fr{transition:transform .38s var(--tbe-ease),box-shadow .38s var(--tbe-ease),background-color .3s ease}
.rc .ph,.tbp-card img{transition:transform .7s var(--tbe-ease)}
@media (hover:hover){
 .rung:not(.lock):hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(242,100,65,.55),0 24px 44px -26px rgba(0,0,0,.85)}
 .rungs.sys .rung.lock:hover{transform:translateY(-14px);box-shadow:0 26px 50px -20px rgba(242,100,65,.8)}
 .rungs:not(.sys) .rung.lock:hover{transform:translateY(-4px)}
 .adc:hover,.card:hover,.tile:hover,.mc:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(242,100,65,.5),0 22px 40px -26px rgba(0,0,0,.85)}
 .oc:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 30px 60px -34px rgba(0,0,0,.9)}
 .oc.b:hover{box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
 .rc:hover,.bc:hover,.tbp-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(0,0,0,.9)}
 .rc:hover .ph,.tbp-card:hover img{transform:scale(1.04)}
}
.rc{overflow:hidden}

/* 6. Shop: category tiles (no flash) + product cards */
.dg .dt{transition:transform .32s var(--tbe-ease),box-shadow .32s var(--tbe-ease),background-color .3s ease!important;-webkit-backface-visibility:hidden;backface-visibility:hidden;isolation:isolate}
.dg .dt .il img,.dg .dt .il svg{transition:transform .5s var(--tbe-ease)}
.dg .dt .n .ico{transition:transform .3s var(--tbe-ease)}
@media (hover:hover){
 .dg .dt:not(.tile-panels):hover{background:#242b31!important;transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(242,100,65,.55),0 22px 44px -24px rgba(0,0,0,.9)!important}
 .dg .dt.tile-panels:hover{background:#f4764f!important;transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(242,100,65,.75)!important}
 .dg .dt:hover .il img,.dg .dt:hover .il svg{transform:translateY(-3px) scale(1.04)}
 .dg .dt:hover .n .ico{transform:translateX(4px)}
}
.pc{transition:transform .35s var(--tbe-ease),box-shadow .35s var(--tbe-ease)!important}
.pc .im img{transition:transform .6s var(--tbe-ease)}
@media (hover:hover){
 .pc:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 24px 46px -26px rgba(0,0,0,.9)!important}
 .pc:hover .im img{transform:scale(1.045)}
}

/* 5. Service-page pills: one height, centred, no pill-inside-a-pill */
.chips2{align-items:center}
.chips2>span,.chips2>a>span{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 15px!important;line-height:1.2;box-sizing:border-box}
.chips2>a{display:inline-flex;border-radius:999px}
.chips2 .stars{padding:0!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important;margin:0 2px 0 0!important;min-height:0!important;display:inline-flex;vertical-align:middle}
.chips2 .stars svg{width:15px;height:15px}
.chips2>a>span .ico,.chips2>a>span svg{width:16px;height:16px;transition:transform .28s var(--tbe-ease)}
@media (hover:hover){.chips2>a:hover>span{filter:brightness(1.08)}.chips2>a:hover>span svg{transform:translateX(3px)}}
@media (max-width:700px){.chips2{gap:8px}.chips2>span,.chips2>a>span{min-height:36px;padding:0 13px!important}}

@media (prefers-reduced-motion:reduce){
 .btn,.rung,.adc,.card,.oc,.rc,.mc,.tile,.bc,.pc,.dt,.tbp-card{transition:none!important}
 .btn:hover,.rung:hover,.adc:hover,.card:hover,.oc:hover,.rc:hover,.mc:hover,.tile:hover,.bc:hover,.pc:hover,.dt:hover,.tbp-card:hover{transform:none!important}
}