/* Additive visual effects. All dimensions and brand tokens come from the base design. */
.hero-art {
  transition: translate 450ms cubic-bezier(.2, .75, .25, 1);
}
@media (min-width: 801px) and (hover: hover) and (pointer: fine) {
  .hero-art-left {
    translate: var(--depth-x, 0px) var(--depth-y, 0px);
  }
  .hero-art-right {
    translate: calc(var(--depth-x, 0px) * -.7) calc(var(--depth-y, 0px) * -.6);
  }
}

/* Satin relief belongs to the illustrations, never to the original logo. */
:is(.hero-art, .service-art, .company-art) .brand-piece {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 86% 66% at 28% 16%, #ffffff3d 0%, #ffffff0d 42%, transparent 72%),
    linear-gradient(145deg, #ffffff12 0%, transparent 48%, #0714212e 100%),
    var(--piece-color);
  box-shadow:
    inset 0 1px 1px #ffffff80,
    inset -7px -10px 18px #0714211c,
    0 20px 30px -22px #07142170;
  transition: transform 380ms var(--ease), box-shadow 380ms var(--ease);
}
:is(.hero-art, .service-art, .company-art) .brand-piece::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-art .brand-piece::before {
  inset: -18%;
  background: radial-gradient(ellipse 75% 55% at 34% 22%, #ffffff40 0%, transparent 68%);
  transform: translate(calc(var(--depth-x, 0px) * 1.8), calc(var(--depth-y, 0px) * 1.8));
  transition: transform 450ms cubic-bezier(.2, .75, .25, 1);
}
:is(.service-art, .company-art) .brand-piece::before {
  background: linear-gradient(112deg, transparent 28%, #ffffff20 45%, #ffffff50 51%, transparent 69%);
  transform: translateX(-120%);
  /* Reset outside the clipped contour so leaving never plays the sweep backwards. */
  transition: none;
}
.service-art .brand-piece::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 34%, #ffffff32 49%, transparent 63%);
  background-size: 260% 100%;
  background-position: 150% 0;
  transition: none;
}
/* Each newly selected panel gets one pass; hidden panels reset its light. */
.service-panel[aria-hidden="false"] .brand-piece::after {
  background-position: -100% 0;
  transition: background-position 800ms var(--ease);
}
.service-art .art-caption i {
  background-image: linear-gradient(90deg, transparent 30%, var(--logo-turquoise) 48%, transparent 66%);
  background-size: 260% 100%;
  background-position: 150% 0;
  transition: none;
}
.service-panel[aria-hidden="false"] .art-caption i {
  background-position: -100% 0;
  transition: background-position 700ms var(--ease);
}
.service-panel[aria-hidden="false"]:focus-within .brand-piece {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 1px #ffffff80,
    inset -7px -10px 18px #0714211c,
    0 26px 34px -22px #07142170;
}
.service-panel[aria-hidden="false"]:focus-within .brand-piece::before,
.company-section:focus-within .company-art .brand-piece::before {
  transform: translateX(120%);
  transition: transform 780ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .service-panel[aria-hidden="false"]:hover .brand-piece {
    /* The JS entrance uses `translate`, so this lift composes with it. */
    transform: translateY(-4px);
    box-shadow:
      inset 0 1px 1px #ffffff80,
      inset -7px -10px 18px #0714211c,
      0 26px 34px -22px #07142170;
  }
  .service-panel[aria-hidden="false"]:hover .brand-piece::before,
  .company-art:hover .brand-piece::before {
    transform: translateX(120%);
    transition: transform 780ms var(--ease);
  }
}

.button {
  position: relative;
  isolation: isolate;
}
.button::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, #ffffff40 48%, transparent 66%);
  background-size: 250% 100%;
  background-position: 150% 0;
  opacity: 0;
  transition: background-position 560ms var(--ease), opacity 160ms ease;
}
.button:focus-visible::after {
  background-position: -100% 0;
  opacity: .65;
}
.scroll-cue {
  transition: background 180ms ease, border-color 180ms ease, transform 220ms var(--ease);
}
.scroll-cue:focus-visible {
  border-color: var(--teal);
}
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.closing::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  right: -130px;
  top: -100px;
  border: 1px solid #07142125;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: .45;
  transform: scale(.86);
  transition: transform 650ms var(--ease), opacity 450ms ease;
}
.closing:focus-within::before {
  transform: scale(1);
  opacity: 1;
}
.closing-button {
  transition: transform 280ms var(--ease), color 180ms ease, background 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .button:hover::after {
    background-position: -100% 0;
    opacity: .65;
  }
  .scroll-cue:hover {
    transform: translateY(3px);
    border-color: var(--teal);
  }
  .closing:hover::before {
    transform: scale(1);
    opacity: 1;
  }
  .closing-button:hover {
    transform: rotate(-5deg) scale(1.04);
  }
}
@media (max-width: 560px) {
  .closing::before { width: 290px; height: 290px; right: -160px; top: -80px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art { translate: none !important; }
  .button::after { display: none; }
  .scroll-cue:hover, .closing-button:hover { transform: none; }
  .closing::before { transform: none; transition: none; }
}
@media print {
  .hero-art { translate: none !important; }
  .button::after { display: none; }
}

/* Background tabs and open dialogs keep the illustrations at rest. */
html[data-motion-paused] :is(.hero-art, .service-art, .company-art) .brand-piece,
body.dialog-open :is(.hero-art, .service-art, .company-art) .brand-piece {
  transform: none !important;
  transition: none !important;
  box-shadow:
    inset 0 1px 1px #ffffff80,
    inset -7px -10px 18px #0714211c,
    0 20px 30px -22px #07142170;
}
html[data-motion-paused] :is(.hero-art, .service-art, .company-art) .brand-piece::before,
html[data-motion-paused] .service-art .brand-piece::after,
body.dialog-open :is(.hero-art, .service-art, .company-art) .brand-piece::before,
body.dialog-open .service-art .brand-piece::after {
  display: none;
  transition: none;
}
html[data-motion-paused] .art-caption i,
body.dialog-open .art-caption i {
  background-image: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce), print {
  :is(.hero-art, .service-art, .company-art) .brand-piece {
    transform: none !important;
    transition: none !important;
    box-shadow:
      inset 0 1px 1px #ffffff80,
      inset -7px -10px 18px #0714211c,
      0 20px 30px -22px #07142170 !important;
  }
  :is(.hero-art, .service-art, .company-art) .brand-piece::before,
  .service-art .brand-piece::after {
    display: none !important;
    transition: none !important;
  }
  .service-art .art-caption i {
    background-image: none;
    transition: none;
  }
}
@media print {
  :is(.hero-art, .service-art, .company-art) .brand-piece {
    background: var(--piece-color);
    box-shadow: none !important;
  }
}

/* Carry the illustration lighting through the rest of the page. */
.service-panel,
.company-art {
  border-radius: 14px;
  box-shadow: 0 0 0 1px #07142108, 0 18px 48px -36px #07142140;
}
.service-art,
.company-art {
  background-image:
    radial-gradient(ellipse 100% 90% at 12% 4%, #ffffffb3, transparent 75%),
    radial-gradient(ellipse 85% 75% at 100% 100%, #2778b90d, transparent 76%);
}
.pay-art {
  background-image:
    radial-gradient(ellipse 100% 90% at 12% 4%, #ffffffb3, transparent 75%),
    radial-gradient(ellipse 85% 75% at 100% 100%, #00a7a00f, transparent 76%);
}
.service-tabs button {
  transition: color 180ms ease, background-color 180ms ease;
}
.service-tabs button[aria-selected="true"] {
  background-color: #07142103;
}
.service-tabs button[aria-selected="true"] .tab-number {
  font-weight: 650;
}
.institution-section {
  background-image:
    radial-gradient(ellipse 62% 95% at 92% 24%, #2778b922, transparent 76%),
    radial-gradient(ellipse 70% 100% at 65% 105%, #00a7a01a, transparent 76%);
}
.audience-list .mini-shape.brand-piece {
  background:
    linear-gradient(145deg, #ffffff29, transparent 55%, #0714211f),
    var(--piece-color);
  box-shadow: inset 0 1px 1px #ffffff40, 0 4px 10px #00000018;
}
.steps article {
  position: relative;
  --step-accent: var(--logo-coral);
}
.steps article:nth-child(2) { --step-accent: var(--logo-turquoise); }
.steps article:nth-child(3) { --step-accent: var(--logo-blue); }
.steps article::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 38px;
  height: 2px;
  background: var(--step-accent);
}
.step-number {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
}
.closing {
  background:
    radial-gradient(ellipse 80% 130% at 5% 0%, #ffffff26, transparent 74%),
    linear-gradient(120deg, transparent 50%, #b721480c),
    var(--logo-coral);
}
.site-footer { padding-inline: 7%; }
.desktop-nav a:focus-visible::after,
.footer-bottom a:focus-visible::after { right: 0; }
.text-link:focus-visible { border-bottom-color: currentColor; }
.button-primary:focus-visible {
  background: #1c3548;
  box-shadow: 0 8px 25px #07142115;
}
.button-outline:focus-visible {
  background: var(--surface);
  border-color: var(--ink);
}
.button-light:focus-visible { background: white; }
.closing-button:focus-visible {
  background: var(--ink);
  color: var(--logo-coral);
}
@media (prefers-reduced-motion: no-preference) {
  .button:focus-visible .icon-arrow,
  .text-link:focus-visible .icon-arrow { translate: 2px -2px; }
  .text-link:focus-visible .icon-down { translate: 0 2px; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .text-link:hover .icon-down { translate: 0 2px; }
}
@media (min-width: 1600px) {
  .site-footer { padding-inline: max(7%, calc((100vw - 1340px) / 2)); }
}
@media (max-width: 1150px) {
  .site-footer { padding-inline: 5%; }
}
@media (max-width: 800px) {
  .site-footer { padding-inline: 6%; }
}
@media (max-width: 960px) {
  .steps article::before { top: -1px; width: 28px; }
}
@media print {
  .service-art, .company-art, .institution-section { background-image: none; }
  .service-panel, .company-art { box-shadow: none; }
  .audience-list .mini-shape.brand-piece {
    background: var(--piece-color);
    box-shadow: none;
  }
  .closing { background: var(--logo-coral); }
}