/* v120 fonts: Hanken Grotesk (sans) + Playfair Display (serif accents), self-hosted */
@font-face{font-family:"BBB Sans";src:url(assets/fonts/bbb-sans.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"BBB Serif";src:url(assets/fonts/bbb-serif-italic.woff2) format("woff2");font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"BBB Serif";src:url(assets/fonts/bbb-serif.woff2) format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
:root{--serif:"BBB Serif",Georgia,"Times New Roman",serif;--st-serif:"BBB Serif",Georgia,serif;--ct-serif:"BBB Serif",Georgia,serif;font-family:"BBB Sans",Arial,Helvetica,sans-serif}
body,button,input,textarea,select{font-family:inherit}
/* v119 polish: page glide, spotlight on cards, portfolio viewer + filters, soft reveals. Additive only. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:bbbVtOut .16s ease both}
::view-transition-new(root){animation:bbbVtIn .26s ease both}
@keyframes bbbVtOut{to{opacity:0}}@keyframes bbbVtIn{from{opacity:0}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
/* spotlight: a soft gold light that follows your finger or cursor across cards */
.pfg figure,.pfv-c,.pf-3 article{position:relative;--sx:50%;--sy:50%;--sa:0}
.pfg figure::after,.pfv-c::after,.pf-3 article::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--sa);transition:opacity .35s;background:radial-gradient(240px circle at var(--sx) var(--sy),rgba(255,226,154,.22),transparent 62%);mix-blend-mode:screen}
/* filter chips */
.pfg-f{display:flex;gap:8px;overflow-x:auto;padding:22px 0 4px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.pfg-f::-webkit-scrollbar{display:none}
.pfg-f button{flex:0 0 auto;font:600 13px/1 inherit;font-family:inherit;color:#d8d4c4;background:rgba(255,255,255,.05);border:1px solid rgba(227,194,122,.28);border-radius:999px;padding:11px 16px;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .2s}
.pfg-f button:hover{border-color:rgba(227,194,122,.7)}
.pfg-f button[aria-pressed=true]{background:linear-gradient(180deg,#f3d98c,#d9b25f);color:#1a1408;border-color:transparent}
.pfg-g[hidden]{display:none!important}
/* soft reveals + blur-up (only when JS adds .pfg-rv) */
.pfg-rv .pfg figure{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*60ms)}
.pfg-rv .pfg figure.in{opacity:1;transform:none}
.pfg-rv .pfg img{filter:blur(10px);transform:scale(1.04);transition:filter .7s ease,transform .7s ease}
.pfg-rv .pfg img.ld{filter:none;transform:none}
.pfg-rv .pfg figure:hover img.ld{transform:scale(1.05)}
.pfg figure{cursor:zoom-in}
/* viewer */
.pfl{position:fixed;inset:0;z-index:9999;display:grid;grid-template-rows:1fr auto;background:rgba(6,4,2,.97);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;touch-action:pan-y}
.pfl.on{opacity:1;visibility:visible}
.pfl-s{position:relative;display:grid;place-items:center;padding:56px 12px 8px;overflow:hidden;min-height:0}
.pfl-s img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;transition:transform .25s ease,opacity .2s;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pfl-cap{padding:6px 20px calc(18px + env(safe-area-inset-bottom));text-align:center;color:#e8e2d0;font-size:14px;display:flex;flex-direction:column;gap:4px}.pfl-cap small{color:#a9a595;font-size:12px}
.pfl button{position:absolute;border:1px solid rgba(227,194,122,.4);background:rgba(20,15,8,.7);color:#f3d98c;border-radius:50%;width:46px;height:46px;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;font-family:inherit}
.pfl .x{top:max(12px,env(safe-area-inset-top));right:12px}.pfl .p{left:12px;top:50%;margin-top:-23px}.pfl .n{right:12px;top:50%;margin-top:-23px}
@media(max-width:700px){.pfl .p,.pfl .n{top:auto;bottom:92px;margin:0;width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.pfg-rv .pfg figure,.pfg-rv .pfg img{transition:none;opacity:1;filter:none;transform:none}}

/* Reserve separate rows for the layers and the caption in the stacked layout. */
@media(max-width:999px){
  .anim #bespoke-glass .stage{grid-template-rows:auto minmax(0,1fr) auto}
  .anim #homeStack{align-self:stretch;height:auto;max-height:none;overflow:visible}
  .anim #homeStack .stack{
    transform:rotateX(calc(var(--sep)*var(--stack-tilt,48deg))) rotateZ(calc(var(--sep)*-26deg))
      translateZ(calc(var(--sep)*var(--stack-camera,-63px))) scale(calc(1 - var(--sep)*var(--stack-inset,.10)));
  }
  .anim #homeStack .lyr{transform:translateZ(calc(var(--sep)*var(--z)*var(--stack-depth,.42px)))}
  .anim #bespoke-glass .gl-cap{margin-bottom:clamp(12px,3svh,28px)}
  #bespoke-glass .gl-cap .gl-pick{display:none!important}
}
@media(min-width:500px) and (max-width:999px) and (min-height:820px){
  .anim #homeStack {
    --stack-depth:.73px;
    --stack-camera:-110px;
    --stack-tilt:53deg;
    --stack-inset:.04;
  }
  .anim #bespoke-glass .gl-cap{margin-bottom:5svh}
}
@media(min-width:701px) and (max-width:999px) and (max-height:819px){
  .anim #homeStack .stack{--stack-inset:.21}
  .anim #bespoke-glass .gl-head{padding-top:6svh}
}
@media(max-width:700px) and (max-height:650px){
  .anim #homeStack .stack{--stack-inset:.26}
  .anim #bespoke-glass .gl-head{padding-top:4svh}
}

/* Keep the demo content inset from the rim at every point in the stack animation. */
#homeStack .lyr.l7 .pane {
  justify-content:flex-start!important;
  gap:clamp(5px,1vw,12px)!important;
  padding:clamp(12px,2vw,27px) 6%!important;
}
#homeStack .lyr.l7 .pane > * { flex-shrink:0; }
#homeStack .lyr.l7 .l7-row { margin-bottom:0; }
@media(max-width:700px) {
  #homeStack .stack { min-height:188px; }
  #homeStack .lyr.l7 .glass-pill { padding:.6em 1.45em!important; }
}
@media(prefers-reduced-motion:reduce) {
  #homeStack .lyr.l7 .glass-pill { animation:none; }
}

/* Pressable Gel in the Glass stack's example content layer. */
#homeStack .lyr.l7 .glass-gel-example {
  min-height:44px;
  font-family:inherit;
  line-height:1.15;
  color:#241505!important;
  background:
    radial-gradient(ellipse at 30% -30%,#fff7df 8%,transparent 64%),
    linear-gradient(145deg,rgba(var(--rim,255,214,130),.30),transparent 62%),
    linear-gradient(180deg,#ffecc1ed 0%,#e9b853dc 55%,#cb9146ed 100%)!important;
  border:1px solid #f8d99a!important;
  box-shadow:inset 0 1px 2px #fff6df,inset 0 -5px 9px -4px #8d4a20,
    inset 0 0 0 2px #fff0bb57,0 5px 11px -5px #291304!important;
  -webkit-backdrop-filter:blur(5px) saturate(1.2);
  backdrop-filter:blur(5px) saturate(1.2);
  animation:none;
}
#homeStack .lyr.l7 .glass-gel-example::before {
  background:linear-gradient(#fff9e7bd,transparent);
  pointer-events:none;
}
#homeStack .glass-gel-example:focus-visible{outline:2px solid #fff6dd;outline-offset:3px}
#homeStack.hl .l7:not(.on) .pane>*{visibility:hidden}
@media(prefers-reduced-motion:reduce) {
  #homeStack .glass-gel-example.is-down{transform:none;filter:brightness(.9)}
}
@media(prefers-reduced-transparency:reduce) {
  #homeStack .lyr.l7 .glass-gel-example{
    background:#f3ca78!important;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
}

/* v121 custom glass icons */
#bespoke-glass .gl-now{display:block}
#bespoke-glass .gl-step-title{display:flex;align-items:center;gap:10px}
#bespoke-glass .gl-step-title b{min-width:0;line-height:1.15}
#bespoke-glass .gl-step-title .gl-ic{
  --layer-icon-size:44px;
  flex:0 0 var(--layer-icon-size);width:var(--layer-icon-size);height:var(--layer-icon-size);
  min-width:0;background:none;box-shadow:none;
}
#bespoke-glass .gl-ic img{
  display:block;width:var(--layer-icon-size);height:var(--layer-icon-size);
  object-fit:contain;filter:drop-shadow(0 2px 5px rgba(255,200,90,.18));
}
#bespoke-glass #lyDesc{margin-top:5px;line-height:1.45}
#bespoke-glass .gl-dots{gap:6px;margin-top:10px}
#bespoke-glass .gl-dots i{width:14px;height:3px}
#bespoke-glass .gl-dots i.on{width:23px}
#bespoke-glass .gl-now:not(:has(.gl-ic.on)) .gl-dots{visibility:hidden}
@media(max-width:700px){
  #bespoke-glass .gl-step-title .gl-ic{--layer-icon-size:36px}
}
@media(prefers-reduced-motion:reduce){
  #bespoke-glass .gl-ic,#bespoke-glass .gl-dots i{transition:none}
}
.pk-wx button[data-w]{display:inline-flex;align-items:center;gap:6px;padding-left:12px;padding-right:14px}
.pk-wx button[data-w]::before{content:"";width:20px;height:20px;flex:none;background:var(--ic) center/contain no-repeat;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.pk-wx button[data-w=clear]{--ic:url(assets/icons/ic-clear.webp)}
.pk-wx button[data-w=rain]{--ic:url(assets/icons/ic-rain.webp)}
.pk-wx button[data-w=storm]{--ic:url(assets/icons/ic-storm.webp)}
.pk-wx button[data-w=fog]{--ic:url(assets/icons/ic-fog.webp)}
.pk-wx button[data-w=snow]{--ic:url(assets/icons/ic-snow.webp)}
.pk-wx button[data-w=sun]{--ic:url(assets/icons/ic-sun.webp)}
.pk-wx{gap:6px!important}
.pk-wx button[data-w]{padding-left:10px;padding-right:12px}
@media(min-width:761px){.gl-tx .pk-wx,.gl-tx{max-width:none}}

/* v123 icons: cards, legend, features */
.gu-ic{width:58px!important;height:58px!important;border-radius:0!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;margin:-36px 0 2px 6px!important}
.gu-ic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.icx{width:56px;height:56px;object-fit:contain;display:block;filter:drop-shadow(0 6px 12px rgba(255,200,90,.3))}
.tb-legend li{position:relative;padding-left:50px!important;min-height:44px}
.tb-legend li::before{display:none!important}
.tb-legend li .tbi{position:absolute;left:0;top:-2px;width:38px;height:38px;object-fit:contain;filter:grayscale(.85) brightness(.5);opacity:.55;transform:scale(.9);transition:filter .6s,opacity .6s,transform .6s;transition-delay:0s}
.tb-legend li.lit .tbi{filter:drop-shadow(0 0 10px rgba(246,200,90,.7));opacity:1;transform:scale(1.08);transition-delay:var(--ld,0s)}
@media(prefers-reduced-motion:reduce){.tb-legend li .tbi{transition:none}}
.gu-ic{border:0!important;box-shadow:none!important;outline:0!important}
.gu-ic::before,.gu-ic::after{display:none!important}

/* v124 hero calm: shadow behind the gold wordmark, film fades back after it plays, one calmer gold */
.has-film.film-go .hero-film video{opacity:.34;filter:blur(3px) saturate(1)}
.has-film .hs-a .hero-copy{position:relative}
.has-film .hs-a .hero-copy::before{content:"";position:absolute;z-index:-1;inset:-8% -16% -10% -12%;pointer-events:none;background:radial-gradient(closest-side,rgba(5,4,3,.66),rgba(5,4,3,.36) 62%,transparent)}
.hs-a h1 .bwm img{animation:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.7)) drop-shadow(0 14px 30px rgba(0,0,0,.8)) drop-shadow(0 0 18px rgba(227,174,70,.2))}
.hero-copy .button,.hero-copy .button:hover{background:linear-gradient(180deg,#d4b97f,#b09050);background-size:auto;animation:none;color:#17110a;box-shadow:inset 0 1px 0 rgba(255,244,214,.32),0 10px 24px -12px rgba(0,0,0,.8)}
.hero-copy .button:hover{background:linear-gradient(180deg,#dcc48e,#b99857);transform:translateY(-2px)}
.hero-copy .button::after{display:none}
.hero-copy>p.hero-for{color:#d6bd86}

/* v125 glass section: the glass icon sits bottom-left beside the layer caption */
.gl-cap .gl-left{display:flex;align-items:center;gap:clamp(12px,2vw,22px);min-width:0}
.gl-cap .bespoke-site-mark{--bespoke-mark-size:clamp(54px,6vw,78px);flex:none}
@media(max-width:700px){.gl-cap .bespoke-site-mark{--bespoke-mark-size:46px}}

/* v126 full glass guide: calm "open" state, tighter gap, soft bloom-in */
#gcolH[aria-expanded="true"]{background:linear-gradient(135deg,rgba(150,146,136,.14),rgba(22,20,17,.95) 65%);box-shadow:inset 0 0 0 1.5px rgba(150,144,128,.32),0 14px 30px -22px #000}
#gcolH[aria-expanded="true"]:hover{transform:none;box-shadow:inset 0 0 0 1.5px rgba(190,182,160,.5),0 14px 30px -22px #000}
#gcolH[aria-expanded="true"] .gcol-t small{color:#9a937c}
#gcolH[aria-expanded="true"] .gcol-t em{color:#968f79}
#gcolH[aria-expanded="true"] .gcol-t b{color:#bdb7a6}
#gcolH[aria-expanded="true"] .gcol-ch{background:linear-gradient(180deg,#8f8a7c,#5f5b50);box-shadow:none}
#gcolH[aria-expanded="true"] .gcol-ch::before{border-color:#1b1915}
.gcol-b{margin-top:0}
.gcol-b .gx-use{padding-top:clamp(22px,3vw,40px)}
@keyframes gcolBloom{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes gcolBloomH{from{opacity:0;transform:translateY(14px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.gcol-b:not([hidden]){animation:gcolFade .9s ease both}
@keyframes gcolFade{from{opacity:0}to{opacity:1}}
.gcol-b:not([hidden]) :is(.gu-head,.gx-head,.try-head,.tiers-head)>*{animation:gcolBloomH 1s cubic-bezier(.2,.7,.2,1) both}
.gcol-b:not([hidden]) :is(.gu-head,.gx-head,.try-head,.tiers-head)>*:nth-child(2){animation-delay:.12s}
.gcol-b:not([hidden]) :is(.gu-grid,.gx-ex,.feat,.tier-row)>*{animation:gcolBloom .9s cubic-bezier(.2,.7,.2,1) both}
.gcol-b:not([hidden]) :is(.gu-grid,.gx-ex,.feat,.tier-row)>*:nth-child(1){animation-delay:.25s}
.gcol-b:not([hidden]) :is(.gu-grid,.gx-ex,.feat,.tier-row)>*:nth-child(2){animation-delay:.38s}
.gcol-b:not([hidden]) :is(.gu-grid,.gx-ex,.feat,.tier-row)>*:nth-child(3){animation-delay:.51s}
.gcol-b:not([hidden]) :is(.gu-grid,.gx-ex,.feat,.tier-row)>*:nth-child(n+4){animation-delay:.64s}
@media(prefers-reduced-motion:reduce){.gcol-b:not([hidden]),.gcol-b:not([hidden]) *{animation:none!important}}