/* ==========================================================================
   Bussinesstan page enhancements.

   Motion follows the design system's own rules: transform and opacity only,
   300ms cubic-bezier(0.4,0,0.2,1), subtle scale, no bounce, nothing continuous.
   Everything degrades to a plain static page under prefers-reduced-motion.
   ========================================================================== */

/* ---------- Star ratings on testimonials ---------- */
.bs-stars{display:flex;gap:3px;margin:0 0 14px;color:var(--gold)}
.bs-stars svg{display:block}

/* ---------- CTA icons ---------- */
a.bs-has-icon{display:inline-flex;align-items:center;gap:8px}
.bs-cta-icon{display:inline-flex;flex-shrink:0;transition:transform var(--dur-interactive) var(--ease-standard)}
a.bs-has-icon:hover .bs-cta-icon,
a.bs-has-icon:focus-visible .bs-cta-icon{transform:translateX(4px)}

/* Header and footer CTAs get the same affordance. */
.bs-header a.bs-cta .bs-cta-icon,
.bs-footer a.bs-footer__cta-btn .bs-cta-icon{margin-left:2px}

/* ---------- Section entrance ---------- */
.bs-reveal{opacity:0;transform:translateY(18px)}
.bs-reveal.bs-in{opacity:1;transform:none;
	transition:opacity 620ms var(--ease-standard),transform 620ms var(--ease-standard)}

/* ---------- Card polish: border, lift, sheen ---------- */
section [style*="border-radius: 16px"],
section [style*="border-radius: 20px"],
section [style*="border-radius: 24px"],
section figure{
	transition:transform var(--dur-hover) var(--ease-standard),
	           box-shadow var(--dur-hover) var(--ease-standard),
	           border-color var(--dur-hover) var(--ease-standard);
}
section [style*="border-radius: 16px"]:hover,
section [style*="border-radius: 20px"]:hover,
section [style*="border-radius: 24px"]:hover,
section figure:hover{
	transform:translateY(-4px);
	box-shadow:var(--shadow-lifted);
	border-color:var(--border-strong);
}

/* Cards on navy bands lift against a lighter hairline. */
section[style*="var(--navy)"] [style*="border-radius"]:hover{
	border-color:rgba(235,245,255,.32);
	box-shadow:0 18px 44px rgba(0,0,0,.28);
}

/* ---------- "Liquid" sheen on primary actions ---------- */
.bs-header a.bs-cta,
.bs-footer a.bs-footer__cta-btn,
section a[style*="background: var(--blue)"],
section a[style*="background:var(--blue)"]{
	position:relative;
	overflow:hidden;
	isolation:isolate;
}
.bs-header a.bs-cta::after,
.bs-footer a.bs-footer__cta-btn::after,
section a[style*="background: var(--blue)"]::after,
section a[style*="background:var(--blue)"]::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.22) 45%,transparent 70%);
	transform:translateX(-120%);
	transition:transform 620ms var(--ease-standard);
}
.bs-header a.bs-cta:hover::after,
.bs-footer a.bs-footer__cta-btn:hover::after,
section a[style*="background: var(--blue)"]:hover::after,
section a[style*="background:var(--blue)"]:hover::after{
	transform:translateX(120%);
}

/* ---------- Band separation ---------- */
section + section{border-top:1px solid transparent}
section[style*="var(--white)"] + section[style*="var(--white)"]{border-top-color:var(--border)}

/* ---------- Icon tiles get a soft brand ground ---------- */
section [style*="border-radius: 8px"] > svg,
section [style*="border-radius:8px"] > svg{transition:transform var(--dur-interactive) var(--ease-standard)}
section a:hover [style*="border-radius: 8px"] > svg{transform:scale(1.08) rotate(-4deg)}

/* ---------- Focus stays visible everywhere ---------- */
section a:focus-visible,
section button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
	.bs-reveal,.bs-reveal.bs-in{opacity:1;transform:none;transition:none}
	section [style*="border-radius"]:hover,
	section figure:hover{transform:none;box-shadow:none}
	.bs-header a.bs-cta::after,
	.bs-footer a.bs-footer__cta-btn::after{display:none}
	.bs-cta-icon{transition:none}
}

/* ==========================================================================
   Header fit after adding the CTA icon.

   The arrow adds ~24px to the header CTA, which pushed the bar past the
   viewport at desktop widths and brought back a horizontal scrollbar. The
   header is already tight by design, so the icon is dropped there below the
   widest breakpoint and the button padding tightens — the label always wins
   over the decoration.
   ========================================================================== */

.bs-header a.bs-cta{gap:6px;padding:0 16px}
.bs-header a.bs-cta .bs-cta-icon svg{width:14px;height:14px}

@media (max-width:1500px){
	.bs-header a.bs-cta .bs-cta-icon{display:none}
}

/* Never let the chrome create a horizontal scrollbar again. */
.bs-bar__inner{max-width:var(--container-max);overflow:visible}
html,body{max-width:100%}
body{overflow-x:hidden}

/* ==========================================================================
   Service page: capability tiles and section media.
   ========================================================================== */

/* Capability tiles — icon tile, hover lift, keyboard focus. */
.bs-cap{transition:transform var(--dur-hover) var(--ease-standard),
        box-shadow var(--dur-hover) var(--ease-standard),
        border-color var(--dur-hover) var(--ease-standard)}
.bs-cap:hover{transform:translateY(-4px);box-shadow:var(--shadow-lifted);border-color:var(--blue)}
.bs-cap__ico{transition:background var(--dur-interactive) var(--ease-standard),
             color var(--dur-interactive) var(--ease-standard),
             transform var(--dur-interactive) var(--ease-standard)}
.bs-cap:hover .bs-cap__ico{background:var(--blue);color:#fff;transform:rotate(-6deg) scale(1.06)}

/* Section media should sit inside the reading column, never as a full-width slab. */
section figure{max-width:760px;margin-left:auto;margin-right:auto}
section figure img{border-radius:16px}

/* Hero media keeps its own scale in the right-hand column. */
section#hero figure,
section#hero img{max-width:100%;margin:0}

@media (max-width:900px){
  section#hero > div > div{grid-template-columns:1fr !important}
  section figure{max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  .bs-cap:hover{transform:none;box-shadow:none}
  .bs-cap:hover .bs-cap__ico{transform:none}
}

/* ==========================================================================
   Service page grids.

   A 4-item row laid out with auto-fit breaks to 3 + 1, leaving an orphan card
   on its own line. Item counts here are known, so the columns are declared and
   step down evenly: 4 -> 2 -> 1, never 3 + 1.
   ========================================================================== */

@media (max-width:1100px){
  section#process    > div > div[style*="grid-template-columns:repeat(4"],
  section#how-it-works > div > div[style*="grid-template-columns:repeat(4"],
  section#problem    > div > div[style*="grid-template-columns:repeat(4"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width:640px){
  section > div > div[style*="grid-template-columns:repeat(4"],
  section > div > div[style*="grid-template-columns:repeat(2"]{
    grid-template-columns:1fr !important;
  }
}

/* Cards in a declared grid should match height so the row reads as one band. */
section div[style*="grid-template-columns:repeat("] > div{display:flex;flex-direction:column}
section div[style*="grid-template-columns:repeat("] > div > p:last-child{margin-top:auto}

/* Numbered process steps get a visible rail. */
section#process div[style*="grid-template-columns:repeat(4"] > div{position:relative;overflow:hidden}
section#process div[style*="grid-template-columns:repeat(4"] > div::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);
  transform:scaleY(0);transform-origin:top;transition:transform var(--dur-hover) var(--ease-standard)}
section#process div[style*="grid-template-columns:repeat(4"] > div:hover::before{transform:scaleY(1)}