/* v57 · 2026-11-07 · font faces live in bbb-fonts-v57.css (Zodiak, Indian Type Foundry, ITF Free Font License via fontshare.com). */

/* ---------- Hero: the storyline dot IS the full stop after "your ideas" ---------- */
.hs-per{display:inline-block;position:relative;width:.2em;height:0;vertical-align:baseline;pointer-events:none}
.hs-per::after{content:"";position:absolute;left:.035em;bottom:.005em;width:.13em;height:.13em;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fffbe2 0,#f7dc7e 32%,#d4a238 70%,#8f5f12 100%);
  box-shadow:0 0 .08em rgba(255,233,168,.95),0 0 .3em rgba(227,174,70,.6)}
/* phones / reduced motion: no storyline, so a still gold dot fades in with the word */
.anim .hs-b .hs-per::after{opacity:clamp(0,calc(var(--q2,1)*9 - var(--i,7)),1)}
/* desktop: the moving storyline dot sits here instead */
html.sl-on .hs-per::after{opacity:0!important}

/* ---------- What we do: three living marks ---------- */
.wwd-grid article{position:relative;transition:box-shadow .9s ease,background .9s ease}
.wwd-grid .bespoke-site-identity{min-height:56px;gap:12px}
.wwd-grid .bespoke-site-identity>small{line-height:1.2}
.wwd-grid .bespoke-site-mark{--bespoke-mark-size:clamp(60px,5.2vw,70px);flex:none;margin:-10px 0 -8px -10px;
  filter:drop-shadow(0 9px 12px rgba(0,0,0,.55));
  transition:scale .7s cubic-bezier(.3,1.5,.45,1),rotate .7s cubic-bezier(.3,1.5,.45,1),opacity .6s ease}
.wwd-grid .bespoke-site-mark>*{translate:calc(var(--mx,0)*var(--d,1.5px)) calc(var(--my,0)*var(--d,1.5px));transition:translate .45s cubic-bezier(.2,.8,.2,1)}
.wwd-grid .bespoke-site-mark>:first-child{--d:-2px}
.wwd-grid .bespoke-site-mark>:last-child{--d:5px}
.wwd-grid [data-wwd-mark="kits"] [data-layer="tiles"]{transform-origin:50% 70%}
.wwd-grid [data-wwd-mark="os"] [data-layer="ring"]{transform-origin:50% 50%}

/* the card whose mark is moving gets a slightly brighter rim */
.wwd-grid article.on{box-shadow:inset 0 0 0 1px rgba(255,226,154,.5),0 22px 44px -30px rgba(0,0,0,.95);
  background:linear-gradient(150deg,rgba(255,236,190,.095),rgba(255,255,255,.025))}
.wwd-grid article:hover .bespoke-site-mark{scale:1.06;rotate:-3deg}

/* reveal: only hidden when JS has armed it (never hides content without JS) */
.wwd-js .wwd-grid article{opacity:0;translate:0 22px;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.8,.2,1),box-shadow .9s ease,background .9s ease;transition-delay:calc(var(--k,0)*150ms),calc(var(--k,0)*150ms),0s,0s}
.wwd-js .wwd-grid article .bespoke-site-mark{opacity:0;scale:.7;rotate:-8deg}
.wwd-js .wwd-grid article.in{opacity:1;translate:0 0}
.wwd-js .wwd-grid article.in .bespoke-site-mark{opacity:1;scale:1;rotate:0deg;transition-delay:calc(var(--k,0)*150ms + 180ms)}
.wwd-js .wwd-grid article.in:hover .bespoke-site-mark{scale:1.06;rotate:-3deg;transition-delay:0s}

/* idle: a very slow float, each card out of phase, only while the section is on screen */
@keyframes wwdFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-1deg)}}
.wwd-live .wwd-grid .bespoke-site-mark{animation:wwdFloat 7s ease-in-out infinite;animation-delay:calc(var(--k,0)*-2.3s)}

@media(max-width:600px){
  .wwd-grid .bespoke-site-mark{--bespoke-mark-size:58px}
  .wwd-grid .bespoke-site-identity{min-height:48px}
}
@media(prefers-reduced-motion:reduce){
  .wwd-js .wwd-grid article,.wwd-js .wwd-grid article .bespoke-site-mark{opacity:1;translate:none;scale:none;rotate:none;transition:none}
  .wwd-live .wwd-grid .bespoke-site-mark{animation:none}
  .wwd-grid .bespoke-site-mark>*{translate:none}
}

/* weather chips: icons from the clean (no C2PA) folder; bbb-polish.css still points at the old one */
.pk-wx button[data-w=clear]{--ic:url(assets/icons-v57/ic-clear.png)}
.pk-wx button[data-w=rain]{--ic:url(assets/icons-v57/ic-rain.png)}
.pk-wx button[data-w=storm]{--ic:url(assets/icons-v57/ic-storm.png)}
.pk-wx button[data-w=fog]{--ic:url(assets/icons-v57/ic-fog.png)}
.pk-wx button[data-w=snow]{--ic:url(assets/icons-v57/ic-snow.png)}
.pk-wx button[data-w=sun]{--ic:url(assets/icons-v57/ic-sun.png)}

/* ---------- Glass layer labels: keep them on screen at laptop/tablet widths ---------- */
.lbl-x{display:none} /* the long tail of label 05 ran off the right edge even at 1440px */
@media(min-width:761px) and (max-width:1099px){#homeStack .lbl{letter-spacing:.12em}}

/* ---------- Zodiak is wider than Playfair: keep the What-we-do line to two lines on phones ---------- */
@media(max-width:600px){.wwd h2 em{font-size:.88em;letter-spacing:-.025em}}