/* ══════════════════════════════════════════════════════════════════
   brands-in-action.css — the Brands In Action world (Figma frame 46:4).

   A quieter, warmer register than the rest of the site: Cormorant Garamond
   at display size over near-black, bronze rules, and a single gold accent.
   It is the front door to the branding archive, so it shows six systems and
   sends every card into branding.html for the full set.

   Tokens are the design's own, lifted from the frame rather than eyeballed:

     #0a0a0a  ground          #f5eedb  cream text
     #121212  alternate band  #8e8e8a  muted text
     #1a1a1a  card            #b89b6c  bronze (rules, buttons, links)
                              #d4af37  gold (numerals, the one accent)

   Scoped to `.bia`.
   ══════════════════════════════════════════════════════════════════ */

.bia{
  --bia-ground:#0a0a0a;
  --bia-band:#121212;
  --bia-card:#1a1a1a;
  --bia-cream:#f5eedb;
  --bia-mute:#8e8e8a;
  --bia-bronze:#b89b6c;
  --bia-gold:#d4af37;
  --bia-line:rgba(255,255,255,.07);
  --bia-card-line:rgba(197,168,128,.13);

  /* 80px against the 1440 frame, collapsing to something usable on a phone */
  --bia-gutter:clamp(20px,5.5vw,80px);
  --bia-max:1280px;

  /* the design's serif and its UI companion — see the <link> in the head */
  --bia-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --bia-sans:'Manrope',system-ui,-apple-system,sans-serif;

  /* the handover's easing, used for everything that moves */
  --bia-ease:cubic-bezier(.16,1,.3,1);

  background:var(--bia-ground);
  color:var(--bia-cream);
  font-family:var(--bia-sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

.bia ::selection{background:var(--bia-bronze);color:#0a0a0a;}

.bia-wrap{max-width:var(--bia-max);margin-inline:auto;width:100%;}

/* ── the handover's global scroll utility ──
   Straight from the annotation, with one addition: `will-change` is dropped
   the moment the element lands. The tip says to set it on animated elements,
   but leaving it on means every card, stat and row holds a compositor layer
   for the life of the page — on this page that is thirty-odd layers that
   will never animate again. */
.animate-on-scroll{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s cubic-bezier(.25,1,.5,1),
             transform .7s cubic-bezier(.25,1,.5,1);
  will-change:transform,opacity;
}
.animate-on-scroll.visible{
  opacity:1;
  transform:translateY(0);
  will-change:auto;
}
/* Stagger inside a group — the row lands, then its children follow. */
.animate-on-scroll[data-delay="1"]{transition-delay:.08s;}
.animate-on-scroll[data-delay="2"]{transition-delay:.16s;}

/* The annotation asks for the blanket reduced-motion reset. Scoped to this
   page so it cannot reach the rest of the site, and paired with the reset of
   the opening state — a 0.01ms transition on `opacity:0` still leaves the
   page blank. */
@media (prefers-reduced-motion: reduce){
  .bia *, .bia *::before, .bia *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .bia .animate-on-scroll{opacity:1;transform:none;}
}

/* ══ 1 · NAV ══
   "position: sticky; top: 0" with backdrop-filter on scroll, per annotation 2.
   The blur is applied only once the page has moved, so the flat top of the
   page is not sitting behind a blur of itself. */
.bia-nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:clamp(68px,7vw,100px);
  padding-inline:var(--bia-gutter);
  border-bottom:1px solid var(--bia-line);
  background:var(--bia-ground);
  transition:background-color .3s var(--bia-ease), backdrop-filter .3s var(--bia-ease);
  animation:bia-fade .6s var(--bia-ease) both;
}
.bia-nav.is-stuck{
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
}
.bia-brand{display:flex;align-items:center;gap:12px;color:var(--bia-cream);}
.bia-brand:hover{color:var(--bia-cream);}
.bia-mark{font-family:var(--bia-serif);font-size:22px;font-weight:500;line-height:1;}
.bia-rule{width:16px;height:1px;background:var(--bia-bronze);flex:0 0 auto;}
.bia-brand-sub{
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bia-mute);
}
.bia-links{display:flex;align-items:center;gap:clamp(18px,2.8vw,40px);}
.bia-links a{font-size:14px;color:var(--bia-cream);opacity:.82;}
.bia-links a:hover{opacity:1;color:var(--bia-bronze);}

/* ── the nav at narrow widths ──
   Three flex children at full size — brand, section links, button — measure
   627px on a 390px screen and push the whole document sideways. The button
   goes first, since the same call to action is repeated in the CTA band and
   again in the footer; then the two links marked optional, whose targets stay
   reachable by scrolling and through the brand mark respectively. */
@media (max-width: 900px){
  .bia-nav{gap:16px;}
  .bia-nav > .bia-btn{display:none;}
  .bia-links{gap:20px;}
  .bia-links a{font-size:13px;}
}
@media (max-width: 560px){
  .bia-rule, .bia-brand-sub{display:none;}
  .bia-links{gap:16px;}
  .bia-links a{font-size:12px;}
  .bia-links a[data-nav-optional]{display:none;}
}

/* ── buttons ── */
.bia-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--bia-bronze);
  transition:background-color .3s var(--bia-ease), color .3s var(--bia-ease);
}
.bia-btn svg{width:14px;height:14px;flex:0 0 auto;}
.bia-btn-solid{background:var(--bia-bronze);color:#0a0a0a;}
.bia-btn-solid:hover{background:var(--bia-gold);border-color:var(--bia-gold);color:#0a0a0a;}
.bia-btn-ghost{background:transparent;color:var(--bia-cream);}
.bia-btn-ghost:hover{background:var(--bia-bronze);color:#0a0a0a;}
.bia :is(a,button):focus-visible{outline:2px solid var(--bia-gold);outline-offset:3px;}

/* ── shared section furniture ── */
.bia-kicker{
  display:flex;align-items:center;gap:12px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bia-bronze);margin:0;
}
.bia-kicker::before{content:"";width:16px;height:1px;background:var(--bia-bronze);flex:0 0 auto;}
.bia-h2{
  font-family:var(--bia-serif);font-weight:400;
  font-size:clamp(34px,5vw,72px);line-height:1.05;letter-spacing:-.01em;
  color:var(--bia-cream);margin:0;
}
.bia-lede{
  font-size:clamp(14px,1.1vw,16px);line-height:1.65;color:var(--bia-mute);
  margin:0;max-width:42ch;
}

/* ══ 2 · HERO ══ */
.bia-hero{
  padding:clamp(56px,8.3vw,120px) var(--bia-gutter) clamp(72px,11vw,160px);
  overflow:clip;
}
.bia-hero-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(28px,4vw,64px);flex-wrap:wrap;
  margin-bottom:clamp(44px,5.5vw,80px);
}
.bia-hero-copy{display:flex;flex-direction:column;gap:24px;max-width:760px;flex:1 1 460px;}
.bia-hero-t{
  font-family:var(--bia-serif);font-weight:400;
  font-size:clamp(48px,7.2vw,104px);line-height:1;letter-spacing:-.015em;
  color:var(--bia-cream);margin:0;text-wrap:balance;
}
.bia-hero-t em{font-style:normal;color:var(--bia-gold);}
/* 400px in the frame, 440 here: the two buttons come to 417px side by side
   and were wrapping onto separate rows at the design's own width. */
.bia-hero-aside{display:flex;flex-direction:column;gap:32px;flex:0 1 440px;}
.bia-hero-btns{display:flex;gap:16px;flex-wrap:wrap;}
.bia-hero-media{
  height:clamp(260px,39vw,560px);
  overflow:hidden;
  border:1px solid var(--bia-card-line);
}
.bia-hero-media img{width:100%;height:100%;object-fit:cover;display:block;}

/* ══ 3 · SHOWCASE ══
   The handover asks for `repeat(3, 1fr)`. It also asks for a 24px gap while
   the frame is drawn at 32px; the frame wins, since that is the spacing the
   design was signed off at.

   `align-items: stretch` plus the card's own column layout is what keeps the
   "EXPLORE" row on one baseline across a row — brand names run to one or two
   lines and a card that sized to its content would leave the links ragged. */
.bia-showcase{
  background:var(--bia-band);
  padding:clamp(64px,8.3vw,120px) var(--bia-gutter);
}
.bia-sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(28px,4vw,64px);flex-wrap:wrap;
  margin-bottom:clamp(40px,5.5vw,80px);
}
.bia-sec-head .bia-kicker{margin-bottom:16px;}
.bia-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.bia-card{
  display:flex;flex-direction:column;
  background:var(--bia-card);
  border:1px solid var(--bia-card-line);
  overflow:hidden;
  transition:border-color .4s var(--bia-ease), transform .4s var(--bia-ease);
}
.bia-card:hover{border-color:rgba(197,168,128,.4);transform:translateY(-4px);}
.bia-card-media{height:clamp(200px,18vw,260px);overflow:hidden;background:var(--bia-ground);}
.bia-card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--bia-ease);
}
.bia-card:hover .bia-card-media img{transform:scale(1.04);}
.bia-card-body{
  display:flex;flex-direction:column;gap:20px;
  padding:32px;flex:1;
}
.bia-card-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.bia-card-mono{
  font-family:var(--bia-serif);font-style:italic;font-weight:500;
  font-size:24px;line-height:1;color:var(--bia-bronze);
}
.bia-card-sector{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bia-mute);text-align:right;
}
.bia-card-text{display:flex;flex-direction:column;gap:8px;}
.bia-card-t{
  font-family:var(--bia-serif);font-weight:400;
  font-size:clamp(22px,1.95vw,28px);line-height:1.15;
  color:var(--bia-cream);margin:0;
}
.bia-card-d{font-size:14px;line-height:1.6;color:var(--bia-mute);margin:0;}
.bia-card-foot{
  display:flex;align-items:center;gap:8px;
  padding:0 32px 32px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bia-bronze);
}
.bia-card-foot svg{width:10px;height:10px;transition:transform .3s var(--bia-ease);}
.bia-card:hover .bia-card-foot svg{transform:translateX(4px);}
/* the whole card is the target; the visible link keeps the accessible name.
   Gallery cards use a <button> here (they open the viewer, not a page), so
   the control resets to text either way. */
.bia-card-link{
  background:none;border:0;padding:0;margin:0;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;
  cursor:pointer;
}
.bia-card-link::after{content:"";position:absolute;inset:0;cursor:pointer;}
.bia-card{position:relative;}

@media (max-width: 1000px){
  .bia-cards{grid-template-columns:repeat(2,1fr);gap:24px;}
}
@media (max-width: 620px){
  .bia-cards{grid-template-columns:1fr;}
}

/* ══ 4 · REELS ══
   Vertical films in a snap rail, full-bleed so the row scrolls edge to edge
   while the header above keeps the page grid. Each card is a poster with an
   empty <video> over it; the JS streams the preview in on hover and fades it
   up, so an untouched rail costs six JPEGs and nothing more. */
.bia-reels{padding:clamp(64px,8.3vw,120px) 0;}
.bia-reels .bia-wrap{padding-inline:var(--bia-gutter);}
.bia-rail-track{
  display:flex;gap:clamp(16px,1.8vw,24px);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  /* the rail is full-bleed but the first card lands on the page grid */
  padding-inline:max(var(--bia-gutter), calc((100vw - var(--bia-max)) / 2));
  scroll-padding-inline:max(var(--bia-gutter), calc((100vw - var(--bia-max)) / 2));
  padding-block:8px;    /* room for the hover lift and the focus ring — an
                           overflow-hidden wrapper here clipped both */
  scrollbar-width:none;
}
.bia-rail-track::-webkit-scrollbar{display:none;}
.bia-reel{
  flex:0 0 auto;margin:0;
  width:clamp(220px,22vw,300px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:14px;
  cursor:pointer;
}
.bia-reel-media{
  display:block;                /* the card is an <a> now, so this is a span */
  position:relative;aspect-ratio:9/16;overflow:hidden;
  background:var(--bia-card);
  border:1px solid var(--bia-card-line);
  transition:border-color .4s var(--bia-ease), transform .4s var(--bia-ease);
}
.bia-reel:hover .bia-reel-media{border-color:rgba(197,168,128,.4);transform:translateY(-4px);}
.bia-reel-media img,
.bia-reel-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.bia-reel-media video{opacity:0;transition:opacity .45s var(--bia-ease);}
.bia-reel-media video.is-playing{opacity:1;}
.bia-reel-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(48px,4.5vw,64px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--bia-bronze);
  background:rgba(10,10,10,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--bia-cream);
  transition:transform .35s var(--bia-ease), background-color .35s var(--bia-ease), opacity .35s var(--bia-ease);
}
.bia-reel-play svg{width:34%;height:34%;}
.bia-reel:hover .bia-reel-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(184,155,108,.35);}
/* the preview IS the film playing — the badge stands down while it runs */
.bia-reel-media video.is-playing ~ .bia-reel-play{opacity:0;}
.bia-reel:focus-visible{outline:2px solid var(--bia-gold);outline-offset:3px;}
.bia-reel, .bia-reel:hover{color:var(--bia-cream);}
.bia-reel-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
/* same serif step as .bia-site-n — one sub-card-title size, not two */
.bia-reel-t{
  font-family:var(--bia-serif);font-weight:400;
  font-size:clamp(18px,1.6vw,22px);color:var(--bia-cream);
}
.bia-reel-d{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--bia-mute);}

/* ══ 5 · LIVE SITES ══
   Browser windows over the band colour: traffic dots, the address, and the
   screenshot cropped from the top the way a viewport would. The whole card
   is one external link. Two wide across the first row, three across the
   second — spans of a six-column grid, so every row is exactly full. */
.bia-sites-wrap{
  background:var(--bia-band);
  padding:clamp(64px,8.3vw,120px) var(--bia-gutter);
}
.bia-sites{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(20px,2.2vw,32px);}
.bia-site{
  grid-column:span 2;
  display:flex;flex-direction:column;
  background:var(--bia-card);
  border:1px solid var(--bia-card-line);
  color:var(--bia-cream);
  transition:border-color .4s var(--bia-ease), transform .4s var(--bia-ease);
}
.bia-site-wide{grid-column:span 3;}
.bia-site:hover{border-color:rgba(197,168,128,.4);transform:translateY(-4px);color:var(--bia-cream);}
.bia-site-chrome{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;
  border-bottom:1px solid var(--bia-card-line);
}
.bia-site-dots{display:flex;gap:6px;flex:0 0 auto;}
.bia-site-dots i{width:9px;height:9px;border-radius:50%;background:rgba(245,238,219,.18);}
.bia-site-dots i:first-child{background:rgba(184,155,108,.55);}
.bia-site-url{
  flex:1;min-width:0;
  font-size:11px;letter-spacing:.04em;color:var(--bia-mute);
  background:rgba(10,10,10,.55);
  border:1px solid var(--bia-line);
  border-radius:99px;
  padding:5px 14px;
  text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bia-site-ext{width:14px;height:14px;flex:0 0 auto;color:var(--bia-bronze);
  transition:transform .3s var(--bia-ease);}
.bia-site:hover .bia-site-ext{transform:translate(2px,-2px);}
.bia-site-shot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bia-ground);}
.bia-site-shot img{
  width:100%;height:100%;object-fit:cover;object-position:top;display:block;
  transition:transform .6s var(--bia-ease);
}
.bia-site-shot.is-center img{object-position:center;}
.bia-site:hover .bia-site-shot img{transform:scale(1.04);}  /* same zoom as the cards */
.bia-site-meta{
  display:grid;grid-template-columns:1fr auto;
  gap:4px 16px;align-items:baseline;
  padding:18px 20px 20px;
}
.bia-site-n{
  font-family:var(--bia-serif);font-weight:400;
  font-size:clamp(18px,1.6vw,22px);
}
.bia-site-l{font-size:12px;color:var(--bia-mute);grid-column:1 / -1;}
.bia-site-go{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bia-bronze);
}
.bia-site-go svg{width:11px;height:11px;}

@media (max-width: 1000px){
  /* two-up: the wides keep a full row each, the small ones pair off.
     The wide rule must WIN against .bia-site at equal specificity, so it is
     written compound — declared first-and-plain here, source order handed the
     row to `span 3` and the two hero screenshots shrank to card size. */
  .bia-site{grid-column:span 3;}
  .bia-site.bia-site-wide{grid-column:1 / -1;}
  .bia-site:last-child:nth-child(odd){grid-column:1 / -1;}
}
@media (max-width: 620px){
  .bia-site, .bia-site-wide{grid-column:1 / -1;}
}

/* ══ 6 · METRICS ══
   Four columns divided by hairlines. The values count up on entry (see the
   handover's counter pattern) but are written into the markup as their final
   text, so the numbers are correct with JavaScript off. */
.bia-metrics{padding:clamp(64px,8.3vw,120px) var(--bia-gutter);}
.bia-metrics .bia-kicker{margin-bottom:16px;}
.bia-metrics .bia-h2{margin-bottom:clamp(36px,4.5vw,64px);}
.bia-stats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.bia-stat{
  border-left:1px solid var(--bia-line);
  padding:8px 0 8px clamp(16px,1.7vw,24px);
}
.bia-stat dt{
  font-family:var(--bia-serif);font-weight:400;
  font-size:clamp(34px,3.4vw,48px);line-height:1;
  color:var(--bia-gold);
  font-variant-numeric:oldstyle-nums;
  /* the counter swaps digits every frame; a fixed advance stops the row
     twitching sideways while it runs */
  font-feature-settings:"tnum" 1;
}
.bia-stat dd{margin:0;}
.bia-stat-l{
  display:block;margin-top:14px;
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bia-cream);
}
.bia-stat-s{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--bia-mute);}

@media (max-width: 860px){
  .bia-stats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 460px){
  .bia-stats{grid-template-columns:1fr;}
}

/* ══ 7 · STATEMENT ══
   The frame carries a client testimonial. There isn't one to quote, so this
   is the studio's own line, attributed as such — the same choice the podcasts
   page makes with its pull quote. Animation is the handover's: the quote fades
   and scales from .97, the attribution follows at 800ms. */
.bia-statement{
  background:var(--bia-band);
  padding:clamp(72px,11vw,160px) var(--bia-gutter);
  text-align:center;
}
.bia-statement-inner{max-width:920px;margin-inline:auto;display:flex;flex-direction:column;gap:48px;align-items:center;}
.bia-quote-icon{color:var(--bia-bronze);}
.bia-quote-icon svg{width:28px;height:28px;display:block;}
.bia-quote{
  font-family:var(--bia-serif);font-style:italic;font-weight:300;
  font-size:clamp(24px,3.4vw,48px);line-height:1.32;
  color:var(--bia-cream);margin:0;
  text-wrap:balance;
}
.bia-attr{display:flex;flex-direction:column;gap:6px;}
.bia-attr-n{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bia-bronze);margin:0;
}
.bia-attr-r{font-size:13px;color:var(--bia-mute);margin:0;}

.bia-statement.visible .bia-quote{animation:bia-fade-scale 1s var(--bia-ease) .3s both;}
.bia-statement.visible .bia-attr{animation:bia-fade-up .6s cubic-bezier(.25,1,.5,1) .8s both;}

/* ══ 8 · CTA ══ */
.bia-cta{
  padding:clamp(72px,11vw,160px) var(--bia-gutter);
  text-align:center;
}
.bia-cta-inner{max-width:720px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:24px;}
.bia-cta .bia-kicker::before{display:none;}
.bia-cta .bia-lede{max-width:52ch;}
.bia-cta-btns{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:16px;}

/* ══ 9 · FOOTER ══ */
.bia-foot{
  border-top:1px solid var(--bia-line);
  padding:clamp(56px,5.5vw,80px) var(--bia-gutter) 48px;
}
.bia-foot-top{
  display:flex;justify-content:space-between;gap:clamp(32px,5vw,80px);flex-wrap:wrap;
  margin-bottom:clamp(48px,5.5vw,80px);
}
.bia-foot-about{max-width:420px;display:flex;flex-direction:column;gap:20px;}
.bia-foot-mark{font-family:var(--bia-serif);font-size:28px;font-weight:500;line-height:1;color:var(--bia-cream);}
.bia-foot-about p{font-size:14px;line-height:1.65;color:var(--bia-mute);margin:0;}
.bia-foot-cols{display:flex;gap:clamp(32px,5vw,80px);flex-wrap:wrap;}
.bia-foot-col{display:flex;flex-direction:column;gap:16px;}
.bia-foot-col h2{
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bia-bronze);margin:0;font-family:var(--bia-sans);
}
.bia-foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.bia-foot-col a{font-size:14px;color:var(--bia-cream);opacity:.82;border-bottom:1px solid transparent;}
.bia-foot-col a:hover{opacity:1;border-bottom-color:var(--bia-bronze);color:var(--bia-cream);}
.bia-foot-legal{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:32px;border-top:1px solid var(--bia-line);
  font-size:12px;color:var(--bia-mute);
}
.bia-foot-legal p{margin:0;}
.bia-foot{animation:bia-fade .8s var(--bia-ease) .3s both;}

/* ── keyframes ── */
@keyframes bia-fade{from{opacity:0}to{opacity:1}}
@keyframes bia-fade-scale{
  from{opacity:0;transform:scale(.97)}
  to{opacity:1;transform:none}
}
@keyframes bia-fade-up{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}