/* Rešenje — Business Intelligence — template-resenje-business-intelligence.php.
   Only enqueued on that page template (functions.php) — depends on
   tokens/base/utilities for shared primitives, so never load this alone.
   Build markup with utilities.css classes first; only add rules here for
   what utilities can't cover. */

/* The shared solution hero leaves .hero-main .text-hero unmeasured. This
   longer BI promise needs its own measure so balanced wrapping produces
   deliberate lines without changing the shared solution hero. */
.solution-hero .hero-main .text-hero{max-width:18ch}

/* BI "izazovi" — the shared .solution-intro header + .illus-rows cells
   (styles.css). Only the two-up layout and its single divider are BI's. */
.bi-challenges{background:var(--white)}
.bi-challenges-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.bi-challenge + .bi-challenge{border-left:1px solid var(--line)}
@media (max-width:820px){
  .bi-challenges{padding:var(--space-10) 0}
  .bi-challenges-list{grid-template-columns:1fr}
  .bi-challenge + .bi-challenge{border-top:1px solid var(--line);border-left:0}
}

.bi-benefits{background:#fff}

/* The final copy needs editorial width rather than a forced square. Two
   columns keep every outcome scannable while equal grid rows preserve the
   visual rhythm across each pair. */
.bi-benefits-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.bi-benefit{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,34%);
  border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--white);
  overflow:hidden;
}
.bi-benefit-index-1{--benefit-index:0}
.bi-benefit-index-2{--benefit-index:1}
.bi-benefit-index-3{--benefit-index:2}
.bi-benefit-index-4{--benefit-index:3}
.bi-benefit-index-5{--benefit-index:4}
.bi-benefit-index-6{--benefit-index:5}
.bi-benefit-index-7{--benefit-index:6}
.bi-benefit-index-8{--benefit-index:7}

.bi-benefit-content{display:flex;flex-direction:column;padding:var(--space-6)}
.bi-benefit-header{display:flex;align-items:center;gap:var(--space-3)}
.bi-benefit-title{color:var(--text)}
.bi-benefit-text{max-width:48ch;margin-top:var(--space-5);color:var(--text-secondary)}
.bi-benefit-visual{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-width:0;padding:var(--space-5);overflow:hidden;border-left:1px solid var(--line);background:var(--soft);
}
.bi-benefit-icon{width:100%;height:100%;display:block;object-fit:contain}

/* Starting/ending state for the scroll reveal — .is-animatable is only
   added by JS, so content stays visible with no JS/IntersectionObserver. */
.bi-benefits-grid.is-animatable .bi-benefit{opacity:0;transform:translateY(24px)}
.bi-benefits-grid.is-animatable.is-visible .bi-benefit{
  opacity:1;transform:translateY(0);
  /* opacity/transform only — both are GPU-composited with no repaint.
     Animating 8 cards' shadows simultaneously on scroll was a real jank
     source, not just a style nicety. */
  transition:opacity .5s ease,transform .5s ease;
  transition-delay:calc(var(--benefit-index,0) * 80ms);
}

@media (max-width:1024px){
  .bi-benefits{padding:var(--space-10) 0}
  .bi-benefit{grid-template-columns:minmax(0,1fr) 150px}
}

@media (max-width:700px){
  .bi-benefits-grid{grid-template-columns:1fr;gap:var(--space-3)}
  .bi-benefit{grid-template-columns:minmax(0,1fr) 120px}
  .bi-benefit-content{padding:var(--space-5)}
  .bi-benefit-visual{padding:var(--space-3)}
}

@media (max-width:480px){
  .bi-benefit{grid-template-columns:1fr}
  .bi-benefit-visual{min-height:108px;padding:var(--space-3);border-top:1px solid var(--line);border-left:0}
  .bi-benefit-icon{width:auto;height:82px;max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  .bi-benefits-grid.is-animatable .bi-benefit{opacity:1;transform:none;transition:none}
}

/* Four-step BI implementation timeline: the shared timeline markup mirrors
   M.A.S.T.:GO, while this page owns its four-column geometry and rhythm. */
.page-template-template-resenje-business-intelligence .steps{background:var(--white)}
/* BI keeps a red eyebrow here (the shared -GO tier colours it --page-accent). */
.page-template-template-resenje-business-intelligence .steps-intro .solution-label{color:var(--red)}
.page-template-template-resenje-business-intelligence .steps-line{
  position:relative;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5);
  max-width:none;margin:0;padding-top:0;overflow:visible;
}
.page-template-template-resenje-business-intelligence .steps-line::before{
  content:"";position:absolute;z-index:0;top:170px;right:10%;left:10%;
  border-top:2px solid rgba(var(--red-rgb),.2);
}
.page-template-template-resenje-business-intelligence .step{
  position:relative;z-index:1;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;
  align-items:start;gap:14px;min-width:0;min-height:0;text-align:left;
}
.page-template-template-resenje-business-intelligence .step-visual{
  width:136px;max-width:78%;aspect-ratio:1;justify-self:center;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--white);
}
.page-template-template-resenje-business-intelligence .step-visual img{display:block;width:100%;height:100%;object-fit:cover}
.page-template-template-resenje-business-intelligence .step .n{
  position:relative;z-index:1;place-items:center;width:40px;height:40px;margin:0 auto;
  border:5px solid var(--white);border-radius:50%;background:var(--page-accent);color:var(--white);
  font-weight:900;box-shadow:none;
}
.page-template-template-resenje-business-intelligence .step-card{
  display:block;min-height:0;padding:10px 8px 0;border:0;border-radius:0;background:transparent;box-shadow:none;
}
.page-template-template-resenje-business-intelligence .step-card h3{margin:0 0 var(--space-3);font-size:17px;line-height:var(--lh-title)}
.page-template-template-resenje-business-intelligence .step-card p{color:var(--text-secondary);font-size:14px;line-height:1.55}

@media (max-width:820px){
  .page-template-template-resenje-business-intelligence .steps{padding:var(--space-10) 0}
  .page-template-template-resenje-business-intelligence .steps-line{grid-template-columns:1fr;gap:0}
  .page-template-template-resenje-business-intelligence .steps-line::before{
    top:37px;right:auto;bottom:37px;left:104px;width:0;border-top:0;border-left:2px solid rgba(var(--red-rgb),.2);
  }
  .page-template-template-resenje-business-intelligence .step{
    grid-template-columns:74px 36px 1fr;grid-template-rows:auto;align-items:center;gap:var(--space-3);text-align:left;
  }
  .page-template-template-resenje-business-intelligence .step-visual{width:74px;max-width:none;border-radius:var(--radius-md)}
  .page-template-template-resenje-business-intelligence .step .n{width:36px;height:36px;border-width:4px;font-size:13px}
  .page-template-template-resenje-business-intelligence .step-card{padding:var(--space-5) 0}
}

/* Practice examples: wide editorial rows give both the generated evidence
   visuals and the longer case-study copy enough room without adding cards. */
.bi-cases{background:var(--soft);color:var(--text)}
/* Left-aligned section header (not the centered .solution-intro) — it leads
   into a wide editorial row grid. */
.bi-cases-intro{max-width:900px}
.bi-cases-list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--line);
}
.bi-case{
  display:grid;grid-template-rows:auto 96px 1fr;align-items:start;gap:var(--space-5);
  min-width:0;padding:var(--space-7);
}
.bi-case + .bi-case{border-left:1px solid var(--line)}
.bi-case-visual{overflow:hidden;border-radius:var(--radius-md);background:var(--white)}
.bi-case-visual img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.bi-case-heading{display:grid;align-content:start;gap:var(--space-5)}
.bi-case-heading::before{content:"";width:36px;height:2px;background:var(--red)}
.bi-case-heading h3{max-width:22ch;color:var(--text)}
.bi-case-copy{display:grid;align-content:start;gap:var(--space-4);color:var(--text-secondary)}

@media (max-width:900px){
  .bi-cases{padding:var(--space-10) 0}
  .bi-cases-list{grid-template-columns:1fr}
  .bi-case{grid-template-rows:auto;padding:var(--space-7) 0}
  .bi-case + .bi-case{border-top:1px solid var(--line);border-left:0}
}


/* Data-flow diagram — rows + traveling-dot connectors. Client's chosen
   final version (2026-08-20); classes keep the "-github" suffix from
   when this was compared side-by-side against an alternate layout, which
   has since been removed. */
.bi-data-flow-github{background:var(--soft)}

.bi-flow-github{max-width:1120px;margin-inline:auto;padding:clamp(24px,3.5vw,44px)}
.bi-flow-github-stage-intro{max-width:760px;margin:0 auto var(--space-5)}
.bi-flow-stage-number{color:var(--red);font-size:var(--fs-meta);font-weight:850;letter-spacing:.1em}
.bi-flow-github-stage-copy{max-width:var(--content-measure);color:var(--text-secondary)}
.bi-flow-github-row{padding:var(--space-4) 0}

.bi-flow-github-row-sources{width:88%;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.bi-flow-github-source{
  position:relative;aspect-ratio:1;border-radius:16px;
  box-shadow:0 14px 28px color-mix(in srgb, var(--icon-color, var(--page-accent)) 35%, transparent);
  transition:transform .25s ease,box-shadow .25s ease;
}
.bi-flow-github-source:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 38px color-mix(in srgb, var(--icon-color, var(--page-accent)) 45%, transparent);
}
.bi-flow-github-row-sources .bi-flow-github-source:nth-child(1){--icon-color:#5B64BF}
.bi-flow-github-row-sources .bi-flow-github-source:nth-child(2){--icon-color:#734EC0}
.bi-flow-github-row-sources .bi-flow-github-source:nth-child(3){--icon-color:#0E8CFA}
.bi-flow-github-row-sources .bi-flow-github-source:nth-child(4){--icon-color:#56B1FE}
.bi-flow-github-row-sources .bi-flow-github-source:nth-child(5){--icon-color:#5FC37A}

.bi-flow-github-row-processes{width:38%;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.bi-flow-github-process{
  position:relative;aspect-ratio:1;border-radius:18px;
  box-shadow:0 18px 36px color-mix(in srgb, var(--icon-color, var(--page-accent)) 32%, transparent);
  transition:transform .25s ease,box-shadow .25s ease;
}
.bi-flow-github-process:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 46px color-mix(in srgb, var(--icon-color, var(--page-accent)) 42%, transparent);
}
.bi-flow-github-row-processes .bi-flow-github-process:nth-child(1){--icon-color:#11239F}
.bi-flow-github-row-processes .bi-flow-github-process:nth-child(2){--icon-color:#197379}

.bi-flow-github-item-visual{
  position:absolute;inset:0;overflow:hidden;border-radius:inherit;padding:5%;
  background:var(--icon-color, var(--page-accent));
}
.bi-flow-github-item-visual .bi-flow-github-item-icon{width:100%;height:100%;object-fit:contain;display:block}

.bi-flow-github-item-bubble{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,45%);z-index:1;
  display:inline-block;max-width:calc(100% - 12px);
  padding:6px 14px;border-radius:999px;background:#fff;
  color:var(--text);font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 8px 18px rgba(24,27,34,.18);
}

.bi-flow-github-row-result{
  position:relative;width:min(100%,860px);margin:0 auto;padding-top:18px;
}
.bi-flow-github-row-result::before{
  content:"";position:absolute;z-index:2;top:0;left:50%;width:14px;height:14px;
  border:3px solid var(--white);border-radius:50%;background:var(--red);
  box-shadow:0 8px 18px rgba(var(--red-rgb),.24);transform:translate(-50%,-50%);
}
.bi-flow-github-result-panel{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) 176px;align-items:center;gap:var(--space-8);
  min-height:260px;padding:var(--space-8);border-radius:var(--radius-md);background:var(--white);
  box-shadow:0 24px 64px rgba(35,37,60,.12);
}
.bi-flow-github-result-panel::before{
  content:"";position:absolute;z-index:-1;top:0;left:50%;width:1px;height:42px;
  background:linear-gradient(to bottom,var(--red),rgba(var(--red-rgb),0));
}
.bi-flow-github-result-copy{display:grid;justify-items:start;gap:var(--space-5);text-align:left}
.bi-flow-github-result-stage{display:flex;align-items:center;gap:var(--space-4)}
.bi-flow-github-result-stage .bi-flow-stage-number{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  flex:0 0 36px;border-radius:50%;background:rgba(var(--red-rgb),.1);
}
.bi-flow-github-result-badge{
  width:176px;height:176px;padding:0;overflow:hidden;border-radius:var(--radius-md);
  background:#E01B22;box-shadow:0 22px 44px rgba(224,27,34,.24);
  display:flex;align-items:center;justify-content:center;
}
.bi-flow-github-result-badge img{width:100%;height:100%;object-fit:contain;display:block}
.bi-flow-github-result-title{color:var(--text)}
.bi-flow-github-result-description{max-width:62ch;color:var(--text-secondary)}

.bi-flow-github-taper{position:relative;height:56px}
.bi-flow-github-taper-1{width:88%;margin:0 auto}
.bi-flow-github-taper-2{width:38%;height:104px;margin:0 auto}

.bi-flow-github-pulse{
  position:absolute;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--page-accent-2);box-shadow:0 0 10px var(--page-accent);
  animation-duration:2.6s;animation-timing-function:linear;animation-iteration-count:infinite;
}
.bi-flow-github-pulse-1{left:9%;width:10px;height:10px;margin:-5px 0 0 -5px;animation-name:bi-flow-github-dot-y,bi-flow-github-dot-1-x,bi-flow-github-dot-fade;animation-duration:2.5s;animation-delay:-.7s;animation-timing-function:linear,cubic-bezier(.34,.02,.24,1),linear;background:#5B64BF;box-shadow:0 0 8px #5B64BF}
.bi-flow-github-pulse-2{left:31%;width:14px;height:14px;margin:-7px 0 0 -7px;animation-name:bi-flow-github-dot-y,bi-flow-github-dot-2-x,bi-flow-github-dot-fade;animation-duration:3.15s;animation-delay:-1.9s;animation-timing-function:linear,cubic-bezier(.58,.02,.31,1),linear;background:#734EC0;box-shadow:0 0 12px #734EC0}
.bi-flow-github-pulse-3{left:49%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;animation-name:bi-flow-github-dot-y,bi-flow-github-dot-3-x,bi-flow-github-dot-fade;animation-duration:2.2s;animation-delay:-1.15s;animation-timing-function:linear,cubic-bezier(.3,.08,.62,1),linear;background:#0E8CFA;box-shadow:0 0 13px #0E8CFA}
.bi-flow-github-pulse-4{left:69%;width:8px;height:8px;margin:-4px 0 0 -4px;animation-name:bi-flow-github-dot-y,bi-flow-github-dot-4-x,bi-flow-github-dot-fade;animation-duration:2.85s;animation-delay:-2.45s;animation-timing-function:linear,cubic-bezier(.46,.01,.2,1),linear;background:#56B1FE;box-shadow:0 0 7px #56B1FE}
.bi-flow-github-pulse-5{left:92%;width:12px;height:12px;margin:-6px 0 0 -6px;animation-name:bi-flow-github-dot-y,bi-flow-github-dot-5-x,bi-flow-github-dot-fade;animation-duration:3.35s;animation-delay:-.35s;animation-timing-function:linear,cubic-bezier(.62,.03,.28,1),linear;background:#5FC37A;box-shadow:0 0 10px #5FC37A}
.bi-flow-github-pulse-6{left:23%;width:10px;height:10px;margin:-5px 0 0 -5px;animation-name:bi-flow-github-dot-6;animation-duration:2.35s;animation-delay:-.45s;background:#11239F;box-shadow:0 0 8px #11239F}
.bi-flow-github-pulse-7{left:78%;width:14px;height:14px;margin:-7px 0 0 -7px;animation-name:bi-flow-github-dot-7;animation-duration:3.05s;animation-delay:-1.65s;background:#197379;box-shadow:0 0 12px #197379}
.bi-flow-github-pulse-8{left:28%;width:8px;height:8px;margin:-4px 0 0 -4px;animation-name:bi-flow-github-dot-8;animation-duration:2.7s;animation-delay:-2.1s;background:#11239F;box-shadow:0 0 7px #11239F}
.bi-flow-github-pulse-9{left:71%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;animation-name:bi-flow-github-dot-9;animation-duration:2.15s;animation-delay:-.95s;background:#197379;box-shadow:0 0 9px #197379}
.bi-flow-github-pulse-10{left:32%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;animation-name:bi-flow-github-dot-10;animation-duration:3.4s;animation-delay:-2.75s;background:#11239F;box-shadow:0 0 13px #11239F}
.bi-flow-github-pulse-11{left:82%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;animation-name:bi-flow-github-dot-11;animation-duration:2.55s;animation-delay:-1.2s;background:#197379;box-shadow:0 0 6px #197379}

@keyframes bi-flow-github-dot-y{from{top:0}to{top:100%}}
@keyframes bi-flow-github-dot-fade{0%{opacity:0}14%{opacity:.92}84%{opacity:.92}100%{opacity:0}}
@keyframes bi-flow-github-dot-1-x{from{left:9%}to{left:25%}}
@keyframes bi-flow-github-dot-2-x{from{left:31%}to{left:37.5%}}
@keyframes bi-flow-github-dot-3-x{from{left:49%}to{left:50%}}
@keyframes bi-flow-github-dot-4-x{from{left:69%}to{left:62.5%}}
@keyframes bi-flow-github-dot-5-x{from{left:92%}to{left:75%}}
@keyframes bi-flow-github-dot-6{0%{top:0;left:23%;opacity:0;transform:scale(.72)}12%{opacity:.9}42%{top:31%;left:29%}74%{top:72%;left:43%}100%{top:100%;left:50%;opacity:0;transform:scale(1.08)}}
@keyframes bi-flow-github-dot-7{0%{top:0;left:78%;opacity:0;transform:scale(.82)}18%{opacity:.75}38%{top:39%;left:69%}68%{top:65%;left:58%}100%{top:100%;left:50%;opacity:0;transform:scale(.96)}}
@keyframes bi-flow-github-dot-8{0%{top:0;left:28%;opacity:0;transform:scale(.65)}9%{opacity:1}34%{top:27%;left:36%}81%{top:84%;left:45%}100%{top:100%;left:50%;opacity:0;transform:scale(1.12)}}
@keyframes bi-flow-github-dot-9{0%{top:0;left:71%;opacity:0;transform:scale(.9)}14%{opacity:.92}48%{top:44%;left:66%}76%{top:79%;left:54%}100%{top:100%;left:50%;opacity:0;transform:scale(.76)}}
@keyframes bi-flow-github-dot-10{0%{top:0;left:32%;opacity:0;transform:scale(.78)}21%{opacity:.7}51%{top:35%;left:34%}73%{top:61%;left:46%}100%{top:100%;left:50%;opacity:0;transform:scale(1)}}
@keyframes bi-flow-github-dot-11{0%{top:0;left:82%;opacity:0;transform:scale(.7)}11%{opacity:1}31%{top:36%;left:72%}66%{top:69%;left:62%}100%{top:100%;left:50%;opacity:0;transform:scale(1.18)}}

.bi-flow-github.is-animatable .bi-flow-github-row,.bi-flow-github.is-animatable .bi-flow-github-taper{opacity:0;transform:translateY(14px)}
.bi-flow-github.is-animatable.is-visible .bi-flow-github-row,.bi-flow-github.is-animatable.is-visible .bi-flow-github-taper{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}
.bi-flow-github.is-animatable.is-visible .bi-flow-github-taper-1{transition-delay:.12s}
.bi-flow-github.is-animatable.is-visible .bi-flow-github-row-processes{transition-delay:.22s}
.bi-flow-github.is-animatable.is-visible .bi-flow-github-taper-2{transition-delay:.34s}
.bi-flow-github.is-animatable.is-visible .bi-flow-github-row-result{transition-delay:.44s}
.bi-flow-github.is-animatable .bi-flow-github-result-badge{opacity:0;transform:scale(.9)}
.bi-flow-github.is-animatable.is-visible .bi-flow-github-result-badge{
  opacity:1;transform:none;transition:opacity .5s ease .62s,transform .65s cubic-bezier(.16,1,.3,1) .62s;
}

@media (max-width:820px){
  .bi-flow-github-row-processes,.bi-flow-github-taper-2{width:46%}
}

@media (max-width:680px){
  .bi-flow-github{padding:20px}
  .bi-flow-github-row-sources,.bi-flow-github-taper-1{width:100%}
  .bi-flow-github-row-sources{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bi-flow-github-row-processes,.bi-flow-github-taper-2,.bi-flow-github-row-result{width:100%}
  .bi-flow-github-result-panel{grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-7) var(--space-6)}
  .bi-flow-github-result-copy{justify-items:center;text-align:center}
  .bi-flow-github-result-stage{flex-direction:column;gap:var(--space-3)}
  .bi-flow-github-result-badge{grid-row:1;width:132px;height:132px;margin-inline:auto}
  .bi-flow-github-taper{height:36px}
  .bi-flow-github-taper-2{height:64px}
  .bi-flow-github-pulse{display:none}
}

@media (prefers-reduced-motion:reduce){
  .bi-flow-github.is-animatable .bi-flow-github-row,.bi-flow-github.is-animatable .bi-flow-github-taper{opacity:1;transform:none;transition:none}
  .bi-flow-github.is-animatable .bi-flow-github-result-badge{opacity:1;transform:none;transition:none}
  .bi-flow-github-pulse{display:none}
}

/* Specialist BI products form an editorial handoff before the CTA. Dark
   brand surfaces remain reserved for the conversion banner that follows. */
.bi-specialized{background:var(--white)}
.bi-specialized-shell{
  grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);align-items:stretch;
}
.bi-specialized-intro{color:var(--text)}
.bi-specialized-intro h2{max-width:19ch}
.bi-specialized-list{grid-template-rows:repeat(2,minmax(0,1fr));border-block:1px solid var(--line)}
.bi-specialized-link{
  position:relative;min-width:0;min-height:136px;background:var(--white);color:var(--text-nav);
  transition:background-color .2s ease,color .2s ease;
}
.bi-specialized-link + .bi-specialized-link{border-top:1px solid var(--line)}
.bi-specialized-logo-wrap{display:flex;align-items:center;min-width:0;height:70px}
.bi-specialized-logo{width:auto;height:auto;max-width:min(100%,300px);max-height:70px;object-fit:contain;object-position:left center}
.bi-specialized-action{flex:0 0 auto;color:var(--text-secondary);font-weight:780;white-space:nowrap}
.bi-specialized-dots{width:16px;height:16px;flex:0 0 16px;background:var(--brand-dots);color:var(--red);opacity:.42;transition:opacity .2s ease,transform .2s ease}
.bi-specialized-link:hover,.bi-specialized-link:focus-visible{background:#fff4f3;color:var(--red)}
.bi-specialized-link:hover .bi-specialized-action,.bi-specialized-link:focus-visible .bi-specialized-action{color:var(--red)}
.bi-specialized-link:hover .bi-specialized-dots,.bi-specialized-link:focus-visible .bi-specialized-dots{opacity:1;transform:translateX(2px)}
.bi-specialized-link:focus-visible{z-index:1;outline:3px solid rgba(var(--red-rgb),.2);outline-offset:-3px}
.bi-specialized-link:active{background:#fff4f3}

@media (max-width:900px){
  .bi-specialized-shell{grid-template-columns:1fr}
  .bi-specialized-intro{padding:0 0 var(--space-7)}
  .bi-specialized-intro h2{max-width:25ch}
}
@media (max-width:620px){
  .bi-specialized{padding:var(--space-10) 0}
  .bi-specialized-link{min-height:132px;padding:var(--space-5) var(--space-6);align-items:flex-start;flex-direction:column;gap:var(--space-4)}
  .bi-specialized-logo-wrap{height:58px}
  .bi-specialized-logo{max-width:260px;max-height:58px}
}
@media (prefers-reduced-motion:reduce){
  .bi-specialized-link,.bi-specialized-dots{transition:none}
}