/* Site-wide polish. Transform and opacity only; brand blue #428bca. */

/* Scroll reveal. .rv is only added by polish.js, and only below the fold. */
.js .rv { opacity: 0; transform: translateY(16px); }
.js .rv.rv-in { opacity: 1; transform: none; transition: opacity .5s ease-out var(--rv-d, 0s), transform .5s ease-out var(--rv-d, 0s); }

/* Card hover lift. The stronger shadow is a pseudo-element, so only its opacity animates. */
.fx-lift { position: relative; transition: translate .2s ease-out, border-color .3s, background-color .3s; }
.engagement-models .fx-lift:hover { transform: none; box-shadow: none; }
.fx-lift::after, .fx-btn::after, #hero .btn-get-started::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 10px 24px rgba(16, 52, 83, .12); opacity: 0; transition: opacity .2s ease-out;
}
/* The services row clipped its overflow to hide the grid's outer bottom borders, which also
   clipped the lift and shadow. Let it overflow and hide those edge borders directly instead. */
.about-lists .row { overflow: visible; }
.about-lists .content-item:last-child { border-bottom-color: transparent; }
@media (min-width: 992px) { .about-lists .content-item { border-bottom-color: transparent; } }
@media (hover: hover) {
  .fx-lift:hover { translate: 0 -4px; }
  .fx-lift:hover::after, .fx-btn:hover::after { opacity: 1; }
}

/* Buttons: glow on hover (pseudo-element opacity), focus ring, press. */
.fx-btn, #hero .btn-get-started { position: relative; isolation: isolate; }
.fx-btn::after { z-index: -1; box-shadow: 0 6px 18px rgba(66, 139, 202, .45); }
:is(.fx-btn, #hero .btn-get-started):focus-visible { outline: 3px solid #428bca; outline-offset: 3px; }
:is(.fx-btn, #hero .btn-get-started):active { scale: .98; }
/* Hero button: a light sheen sweeps across on hover. */
#hero .btn-get-started { overflow: hidden; }
#hero .btn-get-started::after {
  inset: 0 auto 0 0; width: 40%; opacity: 1; box-shadow: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: translateX(-150%) skewX(-20deg); transition: transform .6s ease-out;
}
#hero .btn-get-started:hover::after { transform: translateX(300%) skewX(-20deg); }

/* Nav: soft shadow once the hero has scrolled away (class set by polish.js). */
#header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none;
  background: linear-gradient(rgba(16, 52, 83, .12), transparent); opacity: 0; transition: opacity .3s;
}
#header.nav-past-hero::after { opacity: 1; }

/* In-body text links: underline grows from the left. */
#main :is(p a:not([class]), .case-study h3 a) { position: relative; text-decoration: none; }
#main :is(p a:not([class]), .case-study h3 a)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease-out;
}
#main :is(p a:not([class]), .case-study h3 a):is(:hover, :focus-visible)::after { transform: scaleX(1); }

/* Review Mode pen button and footer hint (the rest of Review Mode's CSS loads on first open). */
.rm-hint { margin: 12px 0 0; font-size: 12px; color: #f0f4f8; }
.rm-toggle {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 36px; height: 36px; margin-left: 6px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(217, 48, 37, .45); background: #fff; color: #d93025; opacity: .7; transition: opacity .2s;
}
.rm-toggle:is(:hover, :focus-visible, [aria-pressed="true"]) { opacity: 1; }
.rm-toggle:focus-visible { outline: 3px solid #428bca; outline-offset: 2px; }
/* Fixed bottom-left only where the gutter is wide enough that it can't cover content. */
@media (min-width: 1200px) { .rm-toggle { position: fixed; left: 8px; bottom: 16px; z-index: 998; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); } }

/* Reduced motion: final states, nothing moves. Hover colour and shadow may still change. */
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
  .fx-lift, .fx-btn, #hero .btn-get-started { translate: none !important; scale: none !important; }
  #hero .btn-get-started::after { display: none; }
  .rm-toggle { transition: none; }
  :is(#header, .fx-lift, .fx-btn, #main a)::after { transition: none; }
}