/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0.7rem 1.5rem;
  border-radius: var(--radius-pill); border: 0;
  font: 600 0.8125rem/1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase;
  background: var(--gradient-brand); color: #FFFFFF;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 14px 28px -16px rgba(0, 64, 160, 0.75);
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.btn::before {
  /* reversed gradient fades in on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(90deg, var(--azure-500), var(--blue-700));
  opacity: 0; transition: opacity var(--duration) var(--ease-out);
}
.btn:hover { color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 18px 30px -16px rgba(0, 64, 160, 0.85); }
.btn:hover::before { opacity: 1; }
.btn .icon { transition: transform var(--duration) var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }

.btn--light, .btn--secondary, .btn--white { box-shadow: none; }
.btn--light::before, .btn--secondary::before, .btn--white::before { display: none; }
.btn--light { background: var(--sky-100); color: var(--blue-700); }
.btn--light:hover { background: var(--sky-200); color: var(--blue-700); }
.btn--secondary { background: transparent; color: var(--heading); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--secondary:hover { background: var(--blue-700); color: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--blue-700); }
.btn--white { background: #FFFFFF; color: var(--blue-700); }
.btn--white:hover { background: var(--sky-100); color: var(--navy-800); }
.btn--sm { min-height: 38px; padding: 0.55rem 1.1rem; font-size: 0.75rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }

.text-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: 600 0.875rem/1.2 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--link); text-decoration: none;
  min-height: 44px;
}
.text-link span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--duration) var(--ease-out); }
.text-link:hover span, .text-link:focus-visible span { background-size: 100% 1.5px; }
.text-link .icon { transition: transform var(--duration) var(--ease-out); }
.text-link:hover .icon { transform: translateX(4px); }

.icon-btn {
  display: inline-grid; place-items: center; width: 46px; height: 46px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--rule); color: var(--heading); background: transparent;
  transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.icon-btn:hover { background: var(--blue-700); border-color: var(--blue-700); color: #FFFFFF; }

/* Round white play button with a soft pulse */
.play-btn {
  display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: #FFFFFF; color: var(--blue-700); text-decoration: none; position: relative;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.18);
  transition: transform var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.play-btn .icon { margin-left: 4px; fill: currentColor; }
.play-btn::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45);
  animation: pulse 2.4s var(--ease-out) infinite;
}
.play-btn:hover { transform: scale(1.06); color: var(--azure-500); }

/* ==========================================================================
   Announcement, top bar + floating header
   ========================================================================== */
.announcement { background: var(--navy-950); color: #FFFFFF; font-size: var(--text-sm); text-align: center; padding: var(--space-2) var(--gutter); }
.announcement a { color: var(--sky-200); font-weight: 600; }

/* On inner pages the header sits on a deep navy band that runs into the page hero.
   On the home page it floats over the hero photo. */
.site-top { position: relative; z-index: 100; background: var(--navy-950); padding-bottom: var(--space-4); }
.page-home .site-top, .header-overlay .site-top { position: absolute; inset: 0 0 auto 0; background: transparent; }
.preview-banner ~ .site-top, .announcement ~ .site-top { position: relative; }
.page-home .announcement ~ .site-top, .page-home .preview-banner ~ .site-top,
.header-overlay .announcement ~ .site-top, .header-overlay .preview-banner ~ .site-top { position: absolute; top: auto; }

.topbar { color: #FFFFFF; font: 600 0.75rem/1.2 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 44px; }
.topbar ul { display: flex; align-items: center; gap: var(--space-8); list-style: none; padding: 0; }
.topbar a { display: inline-flex; align-items: center; gap: var(--space-3); color: #FFFFFF; text-decoration: none; min-height: 44px; }
.topbar a:hover { color: var(--sky-200); }
.topbar__socials { gap: var(--space-2) !important; }
.topbar__socials a { width: 36px; justify-content: center; }
@media (max-width: 759px) { .topbar { display: none; } }

.site-header { height: 72px; }
.site-header__bar {
  display: flex; align-items: center; gap: var(--space-4);
  height: 72px; padding: 0 var(--space-3) 0 var(--space-6);
  background: #FFFFFF; border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px -18px rgba(6, 20, 43, 0.45);
}
@media (max-width: 759px) {
  .site-top { padding-top: var(--space-3); }
  .site-header, .site-header__bar { height: 64px; }
  .site-header__bar { padding-inline: var(--space-6) var(--space-3); border-radius: var(--radius-md); }
}
/* Pinned to the top once the page scrolls (wrapper keeps its height, so nothing jumps) */
.site-header.is-fixed .site-header__bar {
  position: fixed; top: 12px; left: 50%; translate: -50% 0; z-index: 150;
  width: min(calc(100% - 2 * var(--gutter)), var(--container));
  box-shadow: 0 18px 40px -20px rgba(6, 20, 43, 0.5);
  animation: header-in 380ms var(--ease-out);
}

.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--blue-700); text-decoration: none; flex: none; }
.brand:hover { color: var(--blue-700); }
.brand__mark { width: 42px; height: 42px; }
.brand__name { font: 800 1.5rem/1 var(--font-display); letter-spacing: -0.02em; text-transform: uppercase;
               background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand img { height: 48px; width: auto; }
@media (max-width: 759px) { .brand img { height: 40px; } }
/* Logo with a light background, shown on a dark panel (footer, mobile menu) when no light logo is set */
.brand img.brand__plate { height: 44px; padding: 6px 12px; background: #FFFFFF; border-radius: var(--radius-md); box-sizing: content-box; }

.primary-nav { margin-inline: auto; align-self: stretch; }
.primary-nav > ul { display: flex; align-items: stretch; height: 100%; gap: 0; list-style: none; padding: 0; }
.primary-nav > ul > li { display: flex; align-items: stretch; }
.primary-nav > ul > li > a, .primary-nav .nav-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 0.85rem; white-space: nowrap;
  color: #4A5466; text-decoration: none; font: 600 0.8125rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
  transition: color var(--duration) var(--ease-out);
}
.primary-nav > ul > li > a::after, .primary-nav .nav-toggle::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--blue-700);
  transform: scaleX(0); transition: transform var(--duration) var(--ease-out);
}
.primary-nav > ul > li > a:hover, .primary-nav .nav-toggle:hover, .primary-nav a.is-active, .primary-nav .nav-toggle.is-active { color: var(--blue-700); }
.primary-nav a.is-active::after, .primary-nav .nav-toggle.is-active::after,
.primary-nav > ul > li > a:hover::after, .primary-nav .nav-toggle:hover::after { transform: scaleX(1); }
.nav-toggle .icon { color: #8A93A3; transition: transform var(--duration) var(--ease-out); }
/* The dropdown is anchored to the whole header bar (not the Services item) so a wide panel stays on screen */
.site-header__bar { position: relative; }
.nav-item--dropdown { position: static; }
.nav-item--dropdown[data-open] .nav-toggle .icon { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  width: min(1000px, calc(100% - 2 * var(--space-4))); padding: var(--space-3);
  max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain;
  background: #FFFFFF; border-radius: var(--radius-md); box-shadow: var(--shadow-float);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), visibility var(--duration);
}
@media (max-width: 1399px) { .dropdown { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(760px, calc(100% - 2 * var(--space-4))); } }
.dropdown::before { content: ""; position: absolute; inset: -14px 0 auto 0; height: 14px; }
.nav-item--dropdown[data-open] .dropdown { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 1100px) {
  .nav-item--dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: none; }
  .nav-item--dropdown:hover .nav-toggle .icon { transform: rotate(180deg); }
}
.primary-nav .dropdown a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none;
  transition: background-color var(--duration) var(--ease-out);
}
.primary-nav .dropdown a:hover { background: var(--sky-50); }
.dropdown__icon { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--sky-100); color: var(--blue-700); }
.dropdown__icon .icon { width: 17px; height: 17px; }
.dropdown__title { font: 600 0.875rem/1.3 var(--font-display); color: var(--ink); }
.dropdown__desc { font-size: 0.8125rem; color: var(--ink-muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "All services" stays visible at the bottom even when the panel scrolls on short screens */
.dropdown__all { grid-column: 1 / -1; position: sticky; bottom: calc(-1 * var(--space-3)); background: #FFFFFF; border-top: 1px solid var(--rule); margin: var(--space-1) calc(-1 * var(--space-3)) calc(-1 * var(--space-3)); padding: var(--space-2) var(--space-6) var(--space-3); }

.site-header .header-cta { flex: none; }
.menu-button { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; color: #4A5466; border-radius: var(--radius-pill); }
.menu-button:hover { color: var(--blue-700); background: var(--sky-50); }

@media (min-width: 1200px) { .menu-button { display: none; } }
@media (max-width: 1199px) { .primary-nav { display: none; } .site-header .header-cta { margin-left: auto; } }
@media (min-width: 1200px) and (max-width: 1379px) { .site-header .header-cta { padding-inline: 1.4rem; font-size: 0.8125rem; } }
@media (max-width: 600px) { .site-header .header-cta { display: none; } .menu-button { margin-left: auto; } }

/* Off-canvas menu (all screen sizes) */
.mobile-menu { position: fixed; inset: 0; z-index: 200; visibility: hidden; transition: visibility 320ms; }
.mobile-menu.is-open { visibility: visible; }
.mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(6, 20, 43, 0.55); opacity: 0; transition: opacity 320ms var(--ease-out); }
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }
.mobile-menu__panel {
  position: absolute; inset: 0 0 0 auto; width: min(440px, 100%);
  display: flex; flex-direction: column; overflow-y: auto;
  padding: var(--space-6) var(--space-8) var(--space-8);
  background: var(--navy-950); color: #FFFFFF;
  background-image: radial-gradient(80% 50% at 100% 100%, rgba(10, 111, 224, 0.45), transparent 70%);
  transform: translateX(100%); transition: transform 320ms var(--ease-out);
  --focus-ring: #FFFFFF; --heading: #FFFFFF;
}
.mobile-menu.is-open .mobile-menu__panel { transform: none; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.mobile-menu .brand__name { background: none; color: #FFFFFF; }
.mobile-menu .icon-btn { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.3); }
.mobile-menu .icon-btn:hover { background: #FFFFFF; color: var(--blue-700); }
.mobile-menu__tagline { margin-top: var(--space-6); color: rgba(255, 255, 255, 0.72); }
.mobile-menu nav { margin-top: var(--space-8); }
.mobile-menu nav ul { list-style: none; padding: 0; }
.mobile-menu nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.mobile-menu nav a { display: block; padding: var(--space-4) 0; color: #FFFFFF; text-decoration: none; font: 600 1.125rem/1.2 var(--font-display); }
.mobile-menu nav a:hover { color: #8EC2FF; }
.mobile-menu nav .sub a { font: 400 1rem/1.4 var(--font-body); padding: var(--space-2) 0 var(--space-2) var(--space-4); color: rgba(255, 255, 255, 0.72); }
.mobile-menu nav .sub { padding-bottom: var(--space-3); }
.mobile-menu nav .sub a { padding-block: 0.4rem; font-size: 0.9375rem; }
/* Services list in the mobile menu is collapsed until opened */
.mobile-menu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mobile-sub-toggle {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.3); transition: transform var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}
.mobile-sub-toggle:hover { background: rgba(255, 255, 255, 0.1); }
.mobile-sub-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.mobile-menu__foot { margin-top: auto; padding-top: var(--space-8); display: grid; gap: var(--space-4); }
.mobile-menu__foot a:not(.btn) { display: inline-flex; align-items: center; gap: var(--space-3); color: #FFFFFF; text-decoration: none; }
body.menu-open { overflow: hidden; }

/* ==========================================================================
   Inner page hero (deep navy banner) + breadcrumb
   ========================================================================== */
.page-hero, .case-hero, .article-header {
  position: relative; isolation: isolate;
  background-color: var(--navy-950); color: rgba(255, 255, 255, 0.86);
  background-image:
    radial-gradient(45% 90% at 100% 100%, rgba(10, 111, 224, 0.55) 0%, transparent 70%),
    radial-gradient(40% 80% at 0% 100%, rgba(0, 64, 160, 0.55) 0%, transparent 70%);
  --heading: #FFFFFF; --text: rgba(255, 255, 255, 0.86); --text-muted: rgba(255, 255, 255, 0.74);
  --link: #FFFFFF; --link-hover: var(--sky-200); --rule: rgba(255, 255, 255, 0.18); --accent: #8EC2FF;
  --focus-ring: #FFFFFF;
  padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(3rem, 5vw, 4.5rem);
}
.page-hero h1 { max-width: 20ch; }
/* Service banner with a background photo or video, darkened so the text stays readable */
.page-hero--media { overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img, .page-hero__media .img-fallback { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; }
.page-hero--media::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 20, 43, 0.6) 0%, transparent 35%),
    linear-gradient(90deg, rgba(6, 20, 43, 0.92) 0%, rgba(6, 20, 43, 0.78) 50%, rgba(6, 20, 43, 0.55) 100%);
}
/* Header floating over the banner: push the banner content below the menu bar
   (contact strip 44px + bar 72px + 16px gap on desktop; no strip and a 64px bar on phones) */
.header-overlay .page-hero { padding-top: calc(132px + clamp(2rem, 3.5vw, 3rem)); }
@media (max-width: 759px) { .header-overlay .page-hero { padding-top: calc(92px + 2rem); } }
.page-hero .lead, .case-hero .lead, .article-header .lead { margin-top: var(--space-6); }
.page-hero .prose { --heading: #FFFFFF; }
.page-hero .tag { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.page-hero .btn--secondary { color: #FFFFFF; }
.page-hero .btn--secondary:hover { background: #FFFFFF; color: var(--blue-700); box-shadow: inset 0 0 0 1.5px #FFFFFF; }
.page-hero--center { text-align: center; }
.page-hero--center h1, .page-hero--center .lead { margin-inline: auto; }
.page-hero--center .breadcrumb { margin: var(--space-8) 0 0; }
.page-hero--center .breadcrumb ol { justify-content: center; }
.page-hero__grid { display: grid; gap: var(--space-8); align-items: end; }
@media (min-width: 768px) { .page-hero__grid { grid-template-columns: 7fr 5fr; gap: var(--gutter); } }
.page-hero__aside { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
@media (min-width: 768px) { .page-hero__aside { align-items: flex-end; } }

/* Photos inside a banner hang over its bottom edge */
.page-hero:has(.about-hero-media), .case-hero, .article-header:has(.article-cover) {
  padding-bottom: 0;
  background-color: transparent;
  background-image:
    linear-gradient(var(--navy-950), var(--navy-950)),
    radial-gradient(45% 70% at 100% 70%, rgba(10, 111, 224, 0.55) 0%, transparent 70%);
  background-size: 100% calc(100% - clamp(120px, 14vw, 220px));
  background-repeat: no-repeat;
}

.breadcrumb { margin-bottom: var(--space-8); }
.breadcrumb ol {
  display: inline-flex; flex-wrap: wrap; gap: var(--space-2); list-style: none;
  padding: 0.55rem 1.25rem; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16);
  font: 600 0.8125rem/1.4 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78);
}
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); opacity: .6; }
.breadcrumb a { color: #FFFFFF; text-decoration: none; }
.breadcrumb a:hover { color: #8EC2FF; }
.breadcrumb [aria-current="page"] { color: #8EC2FF; }

/* ==========================================================================
   Tags / chips
   ========================================================================== */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.tag {
  display: inline-flex; align-items: center; padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 600; line-height: 1.2;
  background: var(--sky-100); color: var(--blue-700); text-decoration: none;
}
a.tag:hover { background: var(--blue-700); color: #FFFFFF; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.meta > * + *::before { content: "·"; margin-right: var(--space-4); }

/* ==========================================================================
   Home hero
   ========================================================================== */
/* Full-screen background video (or photo) with the heading centred; the header floats on top */
.home-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding-block: clamp(8.5rem, 11vw, 9.5rem) clamp(5rem, 8vw, 6.5rem);
  background: var(--navy-900); color: #FFFFFF;
  --heading: #FFFFFF; --text-muted: rgba(255, 255, 255, 0.88); --accent: rgba(255, 255, 255, 0.85); --focus-ring: #FFFFFF;
}
@media (max-width: 759px) { .home-hero { padding-block: 7rem 5rem; } }
.home-hero__media, .section-bg { position: absolute; inset: 0; z-index: -2; }
.home-hero__media img, .home-hero__media .img-fallback, .section-bg img, .section-bg .img-fallback { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; }
/* Even navy tint so the video shows through but centred white text stays readable */
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 20, 43, 0.35), rgba(6, 20, 43, 0.55)); }
/* Optional background video: fades in over the photo once it is playing */
.home-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 800ms var(--ease-out); }
.home-hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .home-hero__video { display: none; } }
.home-hero__inner { display: grid; justify-items: center; gap: var(--space-8); }
.home-hero__copy { max-width: 900px; margin-inline: auto; }
.home-hero__copy .display { font-size: clamp(2.25rem, 3.4vw + 1rem, 3.75rem); font-weight: 800; line-height: 1.1; text-wrap: balance; }
.home-hero__copy .lead { margin: var(--space-6) auto 0; color: rgba(255, 255, 255, 0.92); max-width: 46ch; text-wrap: balance; }
.js .home-hero__copy > * { animation: fade-up 800ms var(--ease-out) both; }
.js .home-hero__copy > :nth-child(2) { animation-delay: 80ms; }
.js .home-hero__copy > :nth-child(3) { animation-delay: 160ms; }
/* Highlighted words: write *words* in the admin. Blue-to-cyan gradient, readable on the dark video. */
.hl { background: linear-gradient(90deg, #3B93F2 0%, #5FD4FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Rotating last word of the hero headline. All words share one grid cell, so the slot is always as wide as the
   longest word and the rest of the line never moves; only the current word is visible. */
.hero-word { display: inline-grid; text-align: left; }
.hero-word > * { grid-area: 1 / 1; }
.hero-word .is-off { visibility: hidden; }
.hero-word .is-entering { animation: hero-word-in 450ms var(--ease-out); }
@keyframes hero-word-in { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
/* Scroll cue at the bottom of the hero */
.home-hero__scroll {
  position: absolute; left: 50%; bottom: clamp(1.5rem, 4vh, 2.75rem); translate: -50% 0;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  color: rgba(255, 255, 255, 0.85); text-decoration: none;
  animation: hero-scroll-bob 2s var(--ease-out) infinite;
}
.home-hero__scroll:hover { color: #FFFFFF; }
@keyframes hero-scroll-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ==========================================================================
   Home "About": photo collage, satisfaction ring and copy. Same reveal scheme as "How we work":
   main.js adds .is-ready, then .in once 25% is visible, and counts the ring number up.
   ========================================================================== */
.ha {
  --ha-bg: #F6F9FF; --ha-tint: #E7EFFE; --ha-ink: #0B1B3F; --ha-muted: #4B5878; --ha-blue: #1268E0;
  --ha-deep: #0A47A8; --ha-dot: rgba(18, 104, 224, 0.22);
  position: relative; overflow: hidden; padding-block: clamp(4rem, 9vw, 7.5rem);
  background:
    radial-gradient(800px 420px at 100% 0%, var(--ha-tint), transparent 65%),
    radial-gradient(700px 400px at 0% 100%, var(--ha-tint), transparent 60%),
    var(--ha-bg);
  color: var(--ha-ink); --heading: var(--ha-ink);
}
.ha-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 6rem); align-items: center; }
.ha-inner > * { min-width: 0; }

/* Collage */
.ha-collage { position: relative; padding-bottom: 90px; }
.ha-collage::before {
  content: ""; position: absolute; left: -28px; top: -28px; width: 180px; height: 150px;
  background-image: radial-gradient(var(--ha-dot) 2px, transparent 2.5px); background-size: 16px 16px;
}
.ha-main {
  position: relative; margin: 0; width: 88%; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden;
  background: var(--ha-tint); box-shadow: 0 30px 60px -30px rgba(10, 40, 110, 0.45);
}
.ha-side {
  position: absolute; right: 0; bottom: 0; margin: 0; width: 52%; aspect-ratio: 16 / 10;
  border-radius: 18px; overflow: hidden; border: 6px solid #FFFFFF; background: #FFFFFF;
  box-shadow: 0 30px 50px -24px rgba(10, 40, 110, 0.5);
}
/* These two frames are part of the collage design, so their photos fill the frame */
.ha-main img, .ha-side img, .ha-main .img-fallback, .ha-side .img-fallback { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; }

.ha-stat {
  position: absolute; left: 6%; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 14px;
  padding: 14px 20px 14px 14px; border-radius: 18px; background: #FFFFFF;
  box-shadow: 0 20px 40px -18px rgba(10, 40, 110, 0.45);
}
.ha-ring { position: relative; flex: none; width: 68px; height: 68px; }
.ha-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ha-ring circle { fill: none; stroke-width: 7; }
.ha-ring__track { stroke: var(--ha-tint); }
/* Circumference of r=30 is 188.5; the offset leaves (100 - pct)% of the ring empty */
.ha-ring__bar { stroke: var(--ha-blue); stroke-linecap: round; stroke-dasharray: 188.5px; stroke-dashoffset: calc(188.5px * (1 - var(--pct, 0) / 100)); }
.ha-ring__num { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.05rem/1 var(--font-display); color: var(--ha-ink); }
.ha-stat__label { max-width: 11ch; font: 600 0.95rem/1.3 var(--font-display); color: var(--ha-ink); text-align: left; }

/* Copy */
.ha-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); font: 700 0.75rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ha-blue); }
.ha-eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--ha-blue); }
.ha h2 { font-weight: 800; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; margin-bottom: var(--space-6); max-width: 18ch; }
.ha-text { font-size: var(--text-lg); line-height: 1.75; color: var(--ha-muted); margin-bottom: var(--space-8); max-width: 52ch; }
.ha-cta {
  display: inline-flex; align-items: center; gap: 12px; padding: 0.95rem 1.6rem; border-radius: var(--radius-pill);
  font: 700 0.875rem/1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none;
  color: #FFFFFF; background: linear-gradient(135deg, var(--ha-deep), #1873E8);
  box-shadow: 0 16px 30px -14px rgba(10, 71, 168, 0.7); transition: transform .25s ease, box-shadow .25s ease;
}
.ha-cta .icon { transition: transform .25s ease; }
.ha-cta:hover { color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 22px 36px -14px rgba(10, 71, 168, 0.8); }
.ha-cta:hover .icon { transform: translateX(4px); }
.ha-cta:focus-visible { outline: 3px solid var(--ha-blue); outline-offset: 4px; }

/* ---- Reveal choreography: hidden start states only once the script is running (.is-ready) ---- */
.ha.is-ready .ha-collage::before { opacity: 0; }
.ha.is-ready .ha-main { clip-path: inset(0 100% 0 0 round 22px); }
.ha.is-ready .ha-main img { transform: scale(1.15); }
.ha.is-ready .ha-side { opacity: 0; transform: translateY(40px); }
.ha.is-ready .ha-stat { opacity: 0; transform: translateY(20px) scale(.95); }
.ha.is-ready .ha-ring__bar { stroke-dashoffset: 188.5px; }
.ha.is-ready .ha-rv { opacity: 0; transform: translateY(18px); }

.ha.in .ha-collage::before { animation: ha-fade .8s ease forwards; }
.ha.in .ha-main { animation: ha-wipe 1.1s cubic-bezier(.7, 0, .2, 1) .1s forwards; }
.ha.in .ha-main img { animation: ha-settle 1.8s cubic-bezier(.2, .7, .2, 1) .1s forwards; }
.ha.in .ha-side { animation: ha-up .9s cubic-bezier(.2, .7, .2, 1) .8s forwards; }
.ha.in .ha-stat { animation: ha-up .7s cubic-bezier(.2, .7, .2, 1) 1.3s forwards, ha-bob 6s ease-in-out 2.5s infinite; }
.ha.in .ha-ring__bar { animation: ha-ring 1.6s cubic-bezier(.3, 0, .2, 1) 1.6s forwards; }
.ha.in .ha-rv { animation: ha-up .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) forwards; }
@keyframes ha-wipe { to { clip-path: inset(0 0 0 0 round 22px); } }
@keyframes ha-settle { to { transform: scale(1); } }
@keyframes ha-up { to { opacity: 1; transform: none; } }
@keyframes ha-fade { to { opacity: 1; } }
@keyframes ha-ring { to { stroke-dashoffset: calc(188.5px * (1 - var(--pct, 0) / 100)); } }
@keyframes ha-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 899px) {
  .ha-inner { grid-template-columns: minmax(0, 1fr); }
  .ha-collage { max-width: 560px; }
}
@media (max-width: 479px) {
  .ha-collage { padding-bottom: 70px; }
  .ha-main { width: 100%; }
  .ha-side { width: 56%; border-width: 4px; }
  .ha-stat { left: 0; bottom: 0; padding: 10px 14px 10px 10px; }
  .ha-ring { width: 54px; height: 54px; }
  .ha-ring__num { font-size: .9rem; }
}

/* ==========================================================================
   Photo-backed sections (services showcase, video band)
   ========================================================================== */
.theme-image { position: relative; isolation: isolate; overflow: hidden; background-color: var(--navy-950); color: rgba(255, 255, 255, 0.86); }
.theme-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--overlay-dark); }
.services-showcase::after {
  content: ""; position: absolute; inset: auto auto 0 0; z-index: -1; width: 40%; height: 60%;
  background: radial-gradient(70% 70% at 0% 100%, rgba(10, 111, 224, 0.6), transparent 70%);
}

.service-cards { display: grid; gap: clamp(1.5rem, 3vw, 2rem); list-style: none; padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
@media (min-width: 900px) { .service-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service-card { position: relative; display: flex; flex-direction: column; }
.service-card__media {
  border: 10px solid #FFFFFF; border-radius: var(--radius-lg); overflow: hidden; background: #FFFFFF;
  aspect-ratio: 16 / 10;
}
.service-card__media img, .service-card__media .img-fallback { width: 100%; height: 100%; object-fit: contain; background: var(--sky-100); border-radius: calc(var(--radius-lg) - 10px); aspect-ratio: auto !important; }
.service-card__body {
  position: relative; margin: -3.5rem clamp(0.75rem, 1.4vw, 1.5rem) 0; padding: clamp(1.125rem, 1.6vw, 1.5rem);
  background: #FFFFFF; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--space-3); flex: 1;
  --heading: var(--ink); --link: var(--blue-700); color: var(--ink-muted);
}
.service-card h3 a { color: var(--ink); text-decoration: none; }
.service-card h3 a::after { content: ""; position: absolute; inset: 0; }
.service-card:hover h3 a { color: var(--blue-700); }
.service-card .text-link { margin-top: auto; min-height: 32px; }

/* Home "What we do": cards drift right to left on their own and pause while hovered or focused.
   The track holds the services twice and moves exactly one set (half the track plus half a gap), so the loop is seamless. */
.service-marquee {
  --marquee-gap: clamp(1.25rem, 2.5vw, 2rem);
  overflow: hidden; padding-block: var(--space-2) var(--space-8); margin-bottom: calc(-1 * var(--space-8));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.service-marquee__track {
  display: flex; gap: var(--marquee-gap); width: max-content; list-style: none; padding: 0;
  animation: service-marquee calc(var(--count, 6) * 4.5s) linear infinite;
}
.service-marquee:hover .service-marquee__track,
.service-marquee:focus-within .service-marquee__track { animation-play-state: paused; }
.service-marquee .service-card { flex: 0 0 clamp(260px, 26vw, 320px); }
/* Only here: carousel photos stretch to fill their frame (everywhere else images keep their shape) */
.service-marquee .service-card__media img { object-fit: fill; }
@keyframes service-marquee { to { transform: translateX(calc(-50% - var(--marquee-gap) / 2)); } }
/* Without motion the row becomes a normal sideways scroller and the duplicate set is hidden */
@media (prefers-reduced-motion: reduce) {
  .service-marquee { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .service-marquee__track { animation: none; }
  .service-marquee .service-card { scroll-snap-align: start; }
  .service-marquee .service-card[aria-hidden="true"] { display: none; }
}

.video-band { padding-block: clamp(5rem, 10vw, 8rem); text-align: center; --heading: #FFFFFF; }
.video-band .container { display: grid; justify-items: center; gap: var(--space-12); }
.video-band .display { max-width: 18ch; font-size: var(--text-display); }

/* ==========================================================================
   Home "How we work": animated process. Cards rise in turn, badges pop, icons draw, a connector line runs
   across and arrows nudge. Plays once when the section scrolls into view (main.js adds .is-ready, then .in).
   ========================================================================== */
.hww {
  --hww-bg: #0A47A8; --hww-bg-deep: #063A93; --hww-card-ink: #0B1B3F; --hww-card-muted: #4B5878;
  --hww-badge: #1268E0; --hww-soft: #D3E0FF; --hww-line: rgba(255, 255, 255, 0.35);
  position: relative; overflow: hidden; isolation: isolate; text-align: center; color: #FFFFFF;
  padding-block: clamp(4rem, 8vw, 6rem) clamp(4.5rem, 9vw, 7rem);
  background:
    radial-gradient(900px 420px at 90% 105%, rgba(28, 120, 235, 0.6), transparent 60%),
    radial-gradient(700px 360px at 5% -10%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(180deg, var(--hww-bg), var(--hww-bg-deep));
  --heading: #FFFFFF; --focus-ring: #FFFFFF;
}
.hww-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); z-index: -1; }
.hww-orb--a { width: 220px; height: 220px; left: -60px; top: 40%; background: rgba(255, 255, 255, 0.05); animation: hww-float 14s ease-in-out infinite; }
.hww-orb--b { width: 140px; height: 140px; right: 6%; top: 8%; border: 1px solid rgba(255, 255, 255, 0.14); animation: hww-float 18s ease-in-out infinite reverse; }
@keyframes hww-float { 50% { transform: translateY(-24px); } }

.hww__eyebrow { font: 700 0.75rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hww-soft); margin-bottom: var(--space-4); }
.hww h2 { font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--space-4); }
.hww__lede { color: var(--hww-soft); font-size: var(--text-lg); line-height: 1.65; max-width: 44ch; margin: 0 auto; }

/* Cards row + connector line from the first badge to the last */
.hww-flow {
  position: relative; display: grid; grid-template-columns: repeat(var(--count, 4), minmax(0, 1fr)); gap: 4rem var(--space-6);
  list-style: none; padding: 0; margin: clamp(4.5rem, 7vw, 6rem) auto 0;
}
.hww-connector { position: absolute; top: 30px; height: 4px; left: calc(50% / var(--count, 4)); right: calc(50% / var(--count, 4)); pointer-events: none; }
.hww-connector svg { width: 100%; height: 4px; display: block; overflow: visible; }
.hww-connector path { stroke: var(--hww-line); stroke-width: 2; stroke-dasharray: 6 8; fill: none; }
.hww-connector .hww-run { stroke: #FFFFFF; stroke-dasharray: 1000; stroke-dashoffset: 0; }

.hww-card { position: relative; padding-top: 44px; outline: none; }
.hww-card__body {
  height: 100%; background: #FFFFFF; color: var(--hww-card-ink); border-radius: 18px;
  padding: 4rem 1.6rem 2.25rem; box-shadow: 0 24px 50px -28px rgba(0, 18, 60, 0.65);
  transition: transform .35s ease, box-shadow .35s ease; --heading: var(--hww-card-ink);
}
.hww-card:hover .hww-card__body { transform: translateY(-6px); box-shadow: 0 34px 60px -28px rgba(0, 18, 60, 0.8); }
.hww-card:focus-visible .hww-card__body { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.hww-badge {
  position: absolute; top: 0; left: 50%; z-index: 2; width: 64px; height: 60px; margin-left: -32px; border-radius: 16px;
  display: grid; place-items: center; background: var(--hww-badge); color: #FFFFFF;
  font: 800 1.35rem/1 var(--font-display); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08);
}
.hww-icon { width: 44px; height: 44px; margin: 0 auto var(--space-3); color: var(--hww-badge); }
.hww-icon svg { width: 100%; height: 100%; }
.hww-card h3 { font: 700 1.2rem/1.3 var(--font-display); margin-bottom: var(--space-3); }
.hww-card p { color: var(--hww-card-muted); line-height: 1.7; margin: 0; }

/* Highlighted last step */
.hww-card--final .hww-card__body {
  background: linear-gradient(150deg, #1873E8 0%, #0B4FC2 60%, #0A3FA3 100%); color: #FFFFFF; --heading: #FFFFFF;
  box-shadow: 0 24px 50px -24px rgba(0, 10, 40, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.hww-card--final p { color: #E4ECFF; }
.hww-card--final .hww-badge { background: #FFFFFF; color: var(--hww-badge); }
.hww-card--final .hww-icon { color: #FFFFFF; }

/* Arrow between one step and the next, sitting on the connector line */
.hww-arrow {
  position: absolute; top: 14px; right: calc(-1 * var(--space-6) / 2 - 16px); z-index: 3;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: #FFFFFF; color: var(--hww-badge); box-shadow: 0 6px 16px -6px rgba(0, 18, 60, 0.6);
}
.hww-arrow svg { width: 16px; height: 16px; }

/* ---- Reveal choreography: hidden start states apply only once the script is running (.is-ready) ---- */
.hww.is-ready .hww-rv { opacity: 0; transform: translateY(22px); }
.hww.is-ready .hww-card__body { opacity: 0; transform: translateY(34px) scale(.97); }
.hww.is-ready .hww-badge, .hww.is-ready .hww-arrow { opacity: 0; transform: scale(.4); }
.hww.is-ready .hww-card h3, .hww.is-ready .hww-card p { opacity: 0; transform: translateY(10px); }
.hww.is-ready .hww-icon :is(path, circle, rect, line, polyline) { stroke-dasharray: 120; stroke-dashoffset: 120; }
.hww.is-ready .hww-connector .hww-run { stroke-dashoffset: 1000; }

.hww.in .hww-rv { animation: hww-up .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) forwards; }
.hww.in .hww-connector .hww-run { animation: hww-draw 2.4s cubic-bezier(.6, 0, .3, 1) .9s forwards; }
.hww.in .hww-card__body { animation: hww-rise .8s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * .45s + .8s) forwards; }
.hww.in .hww-badge { animation: hww-pop .55s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * .45s + 1.05s) forwards; }
.hww.in .hww-icon :is(path, circle, rect, line, polyline) { animation: hww-draw 1s ease calc(var(--i) * .45s + 1.2s) forwards; }
.hww.in .hww-card h3 { animation: hww-up .6s ease calc(var(--i) * .45s + 1.3s) forwards; }
.hww.in .hww-card p { animation: hww-up .6s ease calc(var(--i) * .45s + 1.45s) forwards; }
.hww.in .hww-arrow { animation: hww-pop .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * .45s + 1.35s) forwards; }
.hww.in .hww-arrow svg { animation: hww-nudge 1.6s ease-in-out calc(var(--i) * .45s + 2s) infinite; }
/* Each animation carries its own delay: the shorthand would otherwise reset it and play the glow at once */
.hww.in .hww-card--final .hww-badge {
  animation: hww-pop .55s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * .45s + 1.05s) forwards,
             hww-glow 2.4s ease-in-out calc(var(--i) * .45s + 2.25s) 2;
}
@keyframes hww-up { to { opacity: 1; transform: none; } }
@keyframes hww-rise { to { opacity: 1; transform: none; } }
@keyframes hww-pop { to { opacity: 1; transform: scale(1); } }
@keyframes hww-draw { to { stroke-dashoffset: 0; } }
@keyframes hww-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes hww-glow { 50% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.18); } }

@media (max-width: 1099px) {
  .hww-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4rem; max-width: 760px; }
  .hww-connector, .hww-arrow { display: none; }
}
@media (max-width: 599px) {
  .hww-flow { grid-template-columns: 1fr; max-width: 420px; }
}
/* Reduced motion: the script never adds .is-ready, so everything shows in its final state; stop the loops too */
@media (prefers-reduced-motion: reduce) {
  .hww-orb, .hww-arrow svg { animation: none !important; }
}

/* ==========================================================================
   Service rows (industry pages)
   ========================================================================== */
.service-rows { display: grid; gap: var(--space-4); list-style: none; padding: 0; }
@media (min-width: 768px) { .service-rows { grid-template-columns: 1fr 1fr; } }
.service-row a {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2) var(--space-6); align-items: center;
  padding: var(--space-6) var(--space-8); border-radius: var(--radius-md);
  background: #FFFFFF; color: var(--ink-muted); text-decoration: none;
  transition: transform var(--duration) var(--ease-out);
}
.service-row a:hover { transform: translateY(-4px); }
.service-row__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--sky-100); color: var(--blue-700); }
.service-row h3 { color: var(--ink); font-size: 1.125rem; }
.service-row p { margin-top: var(--space-1); max-width: 46ch; }
.service-row__arrow {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-pill);
  background: var(--sky-100); color: var(--blue-700);
  transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.service-row a:hover .service-row__arrow, .service-row a:focus-visible .service-row__arrow { background: var(--gradient-brand); color: #FFFFFF; transform: rotate(-45deg); }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); list-style: none; padding: 0; }
.stat { padding: var(--space-8); border-radius: var(--radius-lg); background: #FFFFFF; box-shadow: var(--shadow-card); text-align: center; color: var(--ink-muted); }
.stat__value { display: block; font: 700 clamp(2rem, 2vw + 1.25rem, 2.75rem)/1 var(--font-display); letter-spacing: -0.02em;
               background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__label { display: block; margin: var(--space-3) auto 0; max-width: 24ch; }
.theme-bordeaux .stat, .theme-green .stat, .theme-dark .stat, .theme-gradient .stat, .theme-image .stat {
  background: rgba(255, 255, 255, 0.08); box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.8);
}
.theme-bordeaux .stat__value, .theme-green .stat__value, .theme-dark .stat__value, .theme-gradient .stat__value, .theme-image .stat__value { background: none; color: #FFFFFF; }

/* ==========================================================================
   Case study cards
   ========================================================================== */
.case-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: #FFFFFF; box-shadow: var(--shadow-card); overflow: hidden; transition: transform var(--duration) var(--ease-out); }
.case-card:hover { transform: translateY(-6px); }
.case-card__media { aspect-ratio: 16 / 10; background: var(--sky-100); overflow: hidden; }
.case-card__media img, .case-card__media .img-fallback { width: 100%; height: 100%; object-fit: contain; }
.case-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); flex: 1; }
.case-card__client { font: 600 var(--text-xs)/1.4 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--azure-500); }
.case-card h3 { color: var(--ink); }
.case-card h3 a { color: inherit; text-decoration: none; }
.case-card h3 a::after { content: ""; position: absolute; inset: 0; }
.case-card:hover h3 a { color: var(--blue-700); }
.case-card__result { color: var(--ink-muted); }
.case-card .tags { position: relative; z-index: 1; margin-top: auto; padding-top: var(--space-2); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials-wrap { text-align: center; }
.testimonials-wrap > .eyebrow { margin-bottom: var(--space-8); }
.testimonial { display: grid; justify-items: center; gap: var(--space-8); padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: var(--radius-xl); background: #FFFFFF; box-shadow: var(--shadow-card); position: relative; }
.testimonial::before {
  content: "\201C"; position: absolute; top: -1.75rem; left: 50%; translate: -50% 0;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: var(--gradient-brand); color: #FFFFFF; font: 700 2.4rem/1 var(--font-display); padding-top: 0.75rem;
}
.testimonial blockquote p {
  font: 500 clamp(1.125rem, 0.6vw + 1rem, 1.375rem)/1.5 var(--font-display);
  color: var(--ink); text-wrap: balance; max-width: 46ch; margin-top: var(--space-4);
}
.testimonial figcaption { display: flex; align-items: center; gap: var(--space-4); text-align: left; }
.testimonial figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.testimonial__name { font: 600 1.0625rem/1.3 var(--font-display); color: var(--ink); }
.testimonial__role { color: var(--text-muted); font-size: var(--text-sm); }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); }
.carousel-controls__count { font-size: var(--text-sm); color: var(--text-muted); min-width: 4ch; text-align: center; font-variant-numeric: tabular-nums; }
.testimonial-slide[hidden] { display: none; }
.testimonial-slide.is-entering { animation: fade-up 500ms var(--ease-out); }

/* Home: floating illustration on the left, testimonial carousel on the right */
.ht-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ht-art { position: relative; display: grid; justify-items: center; padding-bottom: 2.5rem; }
.ht-art::before {
  content: ""; position: absolute; inset: 6% 8% 14%; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, rgba(18, 104, 224, 0.16), transparent);
}
.ht-float { position: relative; z-index: 1; width: 100%; max-width: 460px; animation: ht-float 6s ease-in-out infinite; }
.ht-float img, .ht-float .img-fallback { display: block; width: 100%; height: auto; object-fit: contain; }
.ht-shadow {
  position: absolute; bottom: 0.5rem; left: 50%; width: 46%; height: 18px; margin-left: -23%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 40, 110, 0.22), transparent); filter: blur(2px);
  animation: ht-shadow 6s ease-in-out infinite;
}
/* One picture per quote: the matching one fades in when its quote comes round */
.ht-pic[hidden] { display: none; }
.ht-pic.is-entering { animation: ht-art-in .6s var(--ease-out); }
@keyframes ht-art-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ht-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-18px) rotate(1.5deg); } }
@keyframes ht-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.78); opacity: 0.6; } }
@media (max-width: 899px) {
  .ht-grid { grid-template-columns: minmax(0, 1fr); }
  .ht-float { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .ht-float, .ht-shadow, .ht-pic.is-entering { animation: none; }
}

/* ==========================================================================
   Team cards
   ========================================================================== */
.team-grid { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); list-style: none; padding: 0; }
.team-card { position: relative; text-align: center; }
.team-card__photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--sky-100); isolation: isolate; }
.team-card__photo img, .team-card__photo .img-fallback { width: 100%; height: 100%; object-fit: contain; }
/* Profile page: show the whole photo at its own shape */
.team-card__photo--natural { aspect-ratio: auto; }
.team-card__photo--natural img { height: auto; }
.team-card__overlay {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--space-8) var(--space-6) var(--space-6);
  background: linear-gradient(to top, rgba(10, 38, 82, 0.95), rgba(10, 38, 82, 0));
  color: #FFFFFF; font-size: var(--text-sm); line-height: 1.5; text-align: left;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.team-card:hover .team-card__overlay, .team-card:focus-within .team-card__overlay { opacity: 1; transform: none; }
@media (hover: none) { .team-card__overlay { opacity: 1; transform: none; } }
.team-card__overlay a { color: #FFFFFF; display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); min-height: 32px; font-weight: 600; text-decoration: none; }
.team-card h3 { font-size: 1.125rem; margin-top: var(--space-4); }
.team-card h3 a { color: inherit; text-decoration: none; }
.team-card h3 a:hover { color: var(--blue-700); }
.team-card__role { font: 600 var(--text-xs)/1.4 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--azure-500); margin-top: var(--space-1); }

/* ==========================================================================
   Article cards
   ========================================================================== */
.article-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: #FFFFFF; box-shadow: var(--shadow-card); overflow: hidden; transition: transform var(--duration) var(--ease-out); }
.article-card:hover { transform: translateY(-6px); }
.article-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--sky-100); overflow: hidden; }
.article-card__media img, .article-card__media .img-fallback { width: 100%; height: 100%; object-fit: contain; }
.article-card .article-card__category {
  position: absolute; left: var(--space-4); top: var(--space-4);
  padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); background: var(--gradient-brand); color: #FFFFFF;
  font: 600 0.75rem/1.2 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase;
}
.article-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); flex: 1; }
.article-card h3 a { color: var(--ink); text-decoration: none; }
.article-card h3 a::after { content: ""; position: absolute; inset: 0; }
.article-card:hover h3 a { color: var(--blue-700); }
.article-card p { color: var(--ink-muted); }
.article-card .text-link { margin-top: auto; min-height: 32px; }

.article-feature { display: grid; gap: var(--space-6); align-items: center; position: relative; padding: clamp(1.125rem, 2.4vw, 1.5rem); margin-bottom: var(--space-16); border-radius: var(--radius-xl); background: #FFFFFF; box-shadow: var(--shadow-card); }
@media (min-width: 768px) { .article-feature { grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4rem); } }
.article-feature__media { border-radius: var(--radius-lg); overflow: hidden; }
.article-feature__media img { display: block; width: 100%; height: auto; }
.article-feature h2 a { color: var(--ink); text-decoration: none; }
.article-feature h2 a::after { content: ""; position: absolute; inset: 0; }
.article-feature:hover h2 a { color: var(--blue-700); }

/* ==========================================================================
   Accordion (native details)
   ========================================================================== */
.accordion { display: grid; gap: var(--space-4); }
.accordion details { border-radius: var(--radius-md); background: #FFFFFF; border: 1px solid var(--sky-200); transition: box-shadow var(--duration) var(--ease-out); }
.accordion details[open] { box-shadow: var(--shadow-card); border-color: transparent; }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-4) var(--space-6); min-height: 44px; cursor: pointer; list-style: none;
  font: 600 clamp(1rem, 0.3vw + 0.95rem, 1.125rem)/1.4 var(--font-display); color: var(--ink);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon {
  flex: none; box-sizing: content-box; padding: 9px; border-radius: 50%;
  background: var(--sky-100); color: var(--blue-700);
  transition: transform var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.accordion details[open] summary { color: var(--blue-700); }
.accordion details[open] summary .icon { transform: rotate(45deg); background: var(--blue-700); color: #FFFFFF; }
.accordion__body { padding: 0 var(--space-8) var(--space-8); color: var(--ink-muted); }
.accordion details[open] .accordion__body { animation: fade-up 300ms var(--ease-out); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: var(--space-6); }
.form-row { display: grid; gap: var(--space-6); }
/* Two fields side by side whenever the form itself is wide enough (works in sidebars too) */
.form { container-type: inline-size; }
@container (min-width: 440px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field label, .field .label { font: 600 0.875rem/1.4 var(--font-display); color: var(--ink); }
.field .req { color: var(--error); margin-left: 2px; }
.field .optional { font-weight: 400; color: var(--text-muted); font-size: var(--text-sm); }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 1.2rem;
  background: var(--sky-50); color: var(--ink);
  border: 1.5px solid var(--sky-200); border-radius: var(--radius-pill);
  transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}
.field textarea { border-radius: 18px; min-height: 130px; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none; padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230040A0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.2rem center;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--silver-300); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; background-color: #FFFFFF; border-color: var(--blue-700); box-shadow: 0 0 0 4px rgba(0, 64, 160, 0.15);
}
.field input[type="file"] {
  width: 100%; padding: var(--space-4); background: var(--sky-50); border: 1.5px dashed var(--silver-300); border-radius: var(--radius-md);
}
.field input[type="file"]::file-selector-button {
  margin-right: var(--space-4); padding: 0.6rem 1.2rem; border-radius: var(--radius-pill);
  border: 0; background: var(--blue-700); color: #FFFFFF; font-weight: 600; cursor: pointer;
}
.field .help { font-size: var(--text-sm); color: var(--text-muted); }
.field .error { font-size: var(--text-sm); color: var(--error); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--error) !important; }
.field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--space-3); }
.field--check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--blue-700); }
.field--check label { font: 400 0.9375rem/1.5 var(--font-body); }
.field--check .error, .field--check .help { grid-column: 2; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-panel { background: #FFFFFF; border-radius: var(--radius-xl); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-card); border: 1px solid var(--sky-200); }
.form-panel h2 { font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem); margin-bottom: var(--space-2); }

.error-summary {
  border: 2px solid var(--error); border-radius: var(--radius-md); padding: var(--space-6);
  background: color-mix(in srgb, var(--error) 6%, #FFFFFF);
}
.error-summary h2 { font-size: 1.0625rem; font-weight: 600; color: var(--error); }
.error-summary ul { margin-top: var(--space-2); padding-left: 1.2em; }
.error-summary a { color: var(--error); font-weight: 500; }

/* Inline newsletter form */
.newsletter-form label { display: block; font: 600 1rem/1.4 var(--font-display); color: var(--heading); margin-bottom: var(--space-4); }
.inline-form { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: 6px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); }
.inline-form input {
  flex: 1 1 200px; min-height: 48px; padding: 0.75rem 1.25rem; border-radius: var(--radius-pill);
  border: 0; background: transparent; color: inherit;
}
.inline-form input::placeholder { color: inherit; opacity: 0.6; }
.inline-form input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
.form-note { font-size: var(--text-sm); margin-top: var(--space-2); }
.form-note--error { color: #FFB4B4; font-weight: 600; }
.theme-alt .inline-form, .newsletter-band .inline-form { background: #FFFFFF; border-color: var(--sky-200); }
.theme-alt .form-note--error, .newsletter-band .form-note--error { color: var(--error); }

/* ==========================================================================
   Alerts / messages
   ========================================================================== */
.messages { list-style: none; padding: 0; display: grid; gap: var(--space-2); margin: var(--space-4) auto 0; width: min(100% - 2 * var(--gutter), var(--container)); }
.alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); font-weight: 500; }
.alert--success, .alert--info { background: var(--success); color: #FFFFFF; }
.alert--error, .alert--warning { background: var(--error); color: #FFFFFF; }

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); margin-top: var(--space-16); }
.pagination a, .pagination span {
  display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); text-decoration: none; font: 600 0.9375rem/1 var(--font-display); color: var(--ink);
  background: var(--sky-50);
}
.pagination a:hover { background: var(--sky-200); color: var(--blue-700); }
.pagination [aria-current="page"] { background: var(--gradient-brand); color: #FFFFFF; }
.pagination .pagination__step { display: inline-flex; gap: var(--space-2); padding: 0 var(--space-6); }

/* ==========================================================================
   CTA band: rounded gradient panel
   ========================================================================== */
.cta-band { padding-block: clamp(2.5rem, 4.5vw, 3.75rem); }
.cta-band__box {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: var(--space-8); align-items: center;
  padding: clamp(2rem, 4vw, 3rem); border-radius: var(--radius-xl);
  background-color: var(--bg); color: var(--text);
}
.cta-band__box.theme-gradient { background-image: var(--gradient-brand); }
.cta-band__box.theme-alt { background-color: var(--sky-100); }
/* Decorative rings, centred on the button */
.cta-band__box .btn-row { position: relative; justify-content: center; }
.cta-band__box .btn-row::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 520px; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 34px, rgba(255, 255, 255, 0.08) 34px 35px);
}
@media (min-width: 768px) { .cta-band__box { grid-template-columns: 1fr auto; gap: var(--space-16); } }
.cta-band h2 { font-size: clamp(1.625rem, 1.6vw + 1rem, 2.25rem); line-height: 1.15; max-width: 22ch; }
.cta-band p { max-width: 56ch; margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-lg); }

/* ==========================================================================
   Logo strip
   ========================================================================== */
.logo-strip { padding-block: var(--space-12); }
.logo-strip__label { text-align: center; font: 600 var(--text-xs)/1.4 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-8); }
.logo-strip ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-8) clamp(2rem, 5vw, 4.5rem); list-style: none; padding: 0; }
.logo-strip img { height: 26px; width: auto; opacity: .55; filter: grayscale(1); transition: opacity var(--duration) var(--ease-out), filter var(--duration) var(--ease-out); }
.logo-strip li:hover img { opacity: 1; filter: none; }
.logo-strip__name { font: 700 1.125rem/1 var(--font-display); color: #98A2B3; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding-top: clamp(2.75rem, 4.5vw, 3.5rem); padding-bottom: var(--space-6);
  background-image: radial-gradient(40% 60% at 100% 0%, rgba(10, 111, 224, 0.35), transparent 70%),
                    radial-gradient(40% 60% at 0% 100%, rgba(0, 64, 160, 0.45), transparent 70%);
}
.site-footer .brand { color: #FFFFFF; }
.site-footer .brand__name { background: none; color: #FFFFFF; }
.footer-newsletter { padding-bottom: clamp(2rem, 3.5vw, 2.5rem); margin-bottom: clamp(2rem, 3.5vw, 2.5rem); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.footer-newsletter .newsletter-form { display: grid; gap: var(--space-4); }
@media (min-width: 768px) {
  .footer-newsletter form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-4) var(--space-12); }
  .footer-newsletter form > label { margin: 0; font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem); }
  .footer-newsletter .form-note { grid-column: 2; }
}
@media (min-width: 1100px) { .footer-newsletter form { grid-template-columns: 1fr minmax(0, 520px); } }
.footer-grid { display: grid; gap: var(--space-12) var(--gutter); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-brand, .footer-col:last-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 4fr 2.4fr 2fr 3fr; }
  .footer-brand, .footer-col:last-child { grid-column: auto; }
}
.footer-brand p { margin-top: var(--space-6); max-width: 36ch; color: rgba(255, 255, 255, 0.72); }
.footer-col h2 { font: 700 1rem/1.3 var(--font-display); color: #FFFFFF; margin-bottom: var(--space-4); }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
.footer-col a { color: rgba(255, 255, 255, 0.76); text-decoration: none; display: inline-block; padding-block: 6px; transition: color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); }
.footer-col a:hover { color: #FFFFFF; transform: translateX(4px); }
.footer-contact li { display: flex; gap: var(--space-3); align-items: flex-start; padding-block: 6px; color: rgba(255, 255, 255, 0.76); }
.footer-contact__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #8EC2FF; margin-top: -6px; }
.footer-contact a { padding: 0; }
.footer-contact a:hover { transform: none; }
.socials { display: flex; gap: var(--space-2); margin-top: var(--space-8); }
.socials a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #FFFFFF; transition: background var(--duration) var(--ease-out); }
.socials a:hover { background: var(--gradient-brand); color: #FFFFFF; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  margin-top: clamp(2.25rem, 4vw, 3rem); padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--text-sm); color: rgba(255, 255, 255, 0.6);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; padding: 0; }
.footer-bottom a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.footer-bottom a:hover { color: #FFFFFF; text-decoration: underline; }

/* ==========================================================================
   Sidebar facts (service + case study detail)
   ========================================================================== */
.facts { background: var(--sky-50); border: 1px solid var(--sky-200); border-radius: var(--radius-lg); padding: var(--space-8); display: grid; gap: var(--space-6); }
.facts dl { display: grid; gap: var(--space-6); }
.facts dt { font: 600 var(--text-xs)/1.4 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--azure-500); margin-bottom: var(--space-1); }
.facts dd { margin: 0; color: var(--ink); }
.facts dd + dt { padding-top: var(--space-6); border-top: 1px solid var(--sky-200); }
.sticky { position: sticky; top: 8.5rem; }
/* Service page sidebar: list of all services + "Need a hand?" card */

.check-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.check-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.check-list .icon { box-sizing: content-box; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--sky-100); color: var(--blue-700); }

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes header-in { from { transform: translateY(-120%); } to { transform: none; } }

.htmx-request.results-region, .htmx-request .results-region { opacity: .5; transition: opacity 200ms; }

/* Home "What we do": the header sits centred above the carousel */
.services-showcase__head { justify-items: center; text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem); }
.services-showcase__head .eyebrow { display: inline-flex; align-items: center; gap: 14px; color: #8EC2FF; }
.services-showcase__head .eyebrow::before, .services-showcase__head .eyebrow::after {
  content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, currentColor);
}
.services-showcase__head .eyebrow::after { transform: scaleX(-1); }
.services-showcase__head h2 { max-width: none; font-size: clamp(2.1rem, 4vw, 3.1rem); }
.services-showcase__head p { max-width: 60ch; margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 1.06rem; line-height: 1.7; }
.services-showcase__all {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-2); padding: 10px 20px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28); color: #FFFFFF; text-decoration: none; font: 700 0.9rem/1 var(--font-display);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.services-showcase__all .icon { transition: transform .25s ease; }
.services-showcase__all:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--blue-700); }
.services-showcase__all:hover .icon { transform: translateX(4px); }