:root {
  --surface-hero: #eef7ff;
  --surface-hero-end: #e4f1ff;
  --surface-about: #f6efff;
  --surface-about-end: #efe4ff;
  --surface-services: #f0fae8;
  --surface-services-end: #e5f5da;
  --surface-product: #fff8d8;
  --surface-product-end: #fff0b8;
  --surface-portfolio: #fff1df;
  --surface-portfolio-end: #ffe7ca;
  --surface-testimonials: #fff0f4;
  --surface-testimonials-end: #ffe4ec;
  --surface-contact: #edf8ff;
  --surface-contact-end: #dff1ff;
  --testimonial-1: #e4f1ff;
  --testimonial-2: #e9f6d9;
  --testimonial-3: #fff0b8;
  --testimonial-4: #efe4ff;
  --testimonial-5: #ffe4ec;
  --testimonial-6: #ffe7ca;
}

body {
  background: #fbfcff;
}

.section {
  position: relative;
}

.band {
  position: relative;
  isolation: isolate;
  box-shadow: none;
  clip-path: none;
}

.band::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--band-bg);
}

.band > * {
  position: relative;
  z-index: 1;
}

.section.band-white,
.section.band-blue {
  border-top-color: transparent;
}

.hero.band-blue {
  background: var(--surface-hero);
  --band-bg: var(--surface-hero);
}

#about.band-white {
  background: var(--surface-about);
  --band-bg: var(--surface-about);
}

#services.band-blue {
  background: var(--surface-services);
  --band-bg: var(--surface-services);
}

section.product-band.band-white {
  background: var(--surface-product);
  --band-bg: var(--surface-product);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

section.product-band.band-white > div,
section.product-band.band-white > p {
  background: transparent;
}

section.product-band.band-white .button.secondary {
  background: rgba(255, 255, 255, 0.64);
  border-color: rgba(189, 169, 72, 0.46);
}

#portfolio.band-blue {
  background: var(--surface-portfolio);
  --band-bg: var(--surface-portfolio);
}

#testimonials.band-white {
  background: var(--surface-testimonials);
  --band-bg: var(--surface-testimonials);
}

#contact.band-blue {
  background: var(--surface-contact);
  --band-bg: var(--surface-contact);
}

#services .service-grid article,
#portfolio .portfolio-grid a,
#testimonials .testimonial-card,
.contact-form {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
}

#services .service-grid article {
  border-color: #d9edce;
}

#services .service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

#services .service-grid article img {
  width: 100%;
  height: auto;
  margin: 0 0 18px;
  padding: 8px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 14px;
  background: #f6fafd;
}

@media (max-width: 720px) {
  #services .service-grid {
    grid-template-columns: 1fr;
  }
}

#portfolio .portfolio-grid a {
  border-color: #eadfb8;
}

#testimonials .testimonial-card {
  border-color: #efd6d6;
}

.contact-form {
  border-color: #d5e8f8;
  box-shadow: 0 16px 42px rgba(15, 78, 128, 0.055);
}

.contact-list p {
  border-bottom-color: rgba(145, 158, 171, 0.26);
}

.site-footer {
  background: linear-gradient(180deg, #141922 0%, #10151e 100%);
}

.site-footer > div {
  display: grid;
  gap: 8px;
}

.site-footer .footer-legal {
  margin-top: 4px;
  color: #9fa8b8;
  font-size: 13px;
}

.site-footer nav {
  justify-content: flex-end;
}

.site-footer nav a {
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.site-footer nav a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.55);
}

.site-header {
  background: var(--surface-hero);
  border-bottom-color: transparent;
  transition: background 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, padding 0.28s ease;
}

.site-header[data-surface="hero"] {
  background: var(--surface-hero);
  border-color: transparent;
}

.site-header[data-surface="about"] {
  background: var(--surface-about);
  border-color: transparent;
}

.site-header[data-surface="services"] {
  background: var(--surface-services);
  border-color: transparent;
}

.site-header[data-surface="product"] {
  background: var(--surface-product);
  border-color: transparent;
}

.site-header[data-surface="portfolio"] {
  background: var(--surface-portfolio);
  border-color: transparent;
}

.site-header[data-surface="testimonials"] {
  background: var(--surface-testimonials);
  border-color: transparent;
}

.site-header[data-surface="contact"] {
  background: var(--surface-contact);
  border-color: transparent;
}

.site-header.is-scrolled[data-surface] {
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.site-header[data-surface] .site-nav a,
.site-header[data-surface] .brand {
  color: #17324a;
}

.brand {
  color: #0b3a75;
  font-size: 19px;
  font-weight: 800;
}

.site-header[data-surface] .nav-action,
.site-header[data-surface] .language-switch {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.9);
}

#testimonials .testimonial-card {
  background: var(--testimonial-1);
  border-color: rgba(0, 103, 184, 0.16);
}

#testimonials .testimonial-card:nth-child(2) {
  background: var(--testimonial-2);
  border-color: rgba(67, 160, 71, 0.18);
}

#testimonials .testimonial-card:nth-child(3) {
  background: var(--testimonial-3);
  border-color: rgba(249, 194, 10, 0.2);
}

#testimonials .testimonial-card:nth-child(4) {
  background: var(--testimonial-4);
  border-color: rgba(119, 76, 190, 0.17);
}

#testimonials .testimonial-card:nth-child(5) {
  background: var(--testimonial-5);
  border-color: rgba(214, 82, 122, 0.18);
}

#testimonials .testimonial-card:nth-child(6) {
  background: var(--testimonial-6);
  border-color: rgba(247, 99, 27, 0.16);
}

.has-reveal .reveal {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.has-reveal .reveal.is-visible :is(.eyebrow, h1, h2, h3, p, .hero-actions, .button, .contact-list, label) {
  animation: textFadeLift 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.has-reveal .reveal.is-visible :is(img, .product-image, .content-image) {
  animation: imageRevealFloat 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both, imageBreath 6.8s ease-in-out 1s infinite;
  transform-origin: center;
}

.has-reveal .reveal:not(.is-visible) :is(.eyebrow, h1, h2, h3, p, .hero-actions, .button, .contact-list, label) {
  animation: textFadeAway 0.34s ease both;
}

.has-reveal .reveal:not(.is-visible) :is(img, .product-image, .content-image) {
  animation: imageFadeAway 0.34s ease both;
}

.has-reveal .reveal.is-visible :is(.eyebrow) {
  animation-delay: 0.03s;
}

.has-reveal .reveal.is-visible :is(h1, h2, h3) {
  animation-delay: 0.09s;
}

.has-reveal .reveal.is-visible :is(p, .contact-list, label) {
  animation-delay: 0.16s;
}

.has-reveal .reveal.is-visible :is(.hero-actions, .button) {
  animation-delay: 0.22s;
}

@keyframes textFadeLift {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes textFadeAway {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes imageRevealFloat {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96) rotate(-1.2deg);
    filter: saturate(0.88) blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
    filter: saturate(1.04) blur(0);
  }
}

@keyframes imageFadeAway {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

@keyframes imageBreath {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.012);
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-reveal .reveal,
  .has-reveal .reveal.is-visible :is(.eyebrow, h1, h2, h3, p, .hero-actions, .button, .contact-list, label),
  .has-reveal .reveal.is-visible :is(img, .product-image, .content-image),
  .has-reveal .reveal:not(.is-visible) :is(.eyebrow, h1, h2, h3, p, .hero-actions, .button, .contact-list, label),
  .has-reveal .reveal:not(.is-visible) :is(img, .product-image, .content-image) {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (max-width: 720px) {
  .brand span {
    font-size: 17px;
  }

  .site-header[data-surface="hero"] .site-nav {
    background: var(--surface-hero);
  }

  .site-header[data-surface="about"] .site-nav {
    background: var(--surface-about);
  }

  .site-header[data-surface="services"] .site-nav {
    background: var(--surface-services);
  }

  .site-header[data-surface="product"] .site-nav {
    background: var(--surface-product);
  }

  .site-header[data-surface="portfolio"] .site-nav {
    background: var(--surface-portfolio);
  }

  .site-header[data-surface="testimonials"] .site-nav {
    background: var(--surface-testimonials);
  }

  .site-header[data-surface="contact"] .site-nav {
    background: var(--surface-contact);
  }
}

.hero-gallery-frame {
  animation: heroPhotoStack 16s cubic-bezier(0.45, 0, 0.2, 1) infinite both;
  filter: saturate(1.02);
}

.has-reveal .office-card.reveal.is-visible .hero-gallery-frame,
.has-reveal .office-card.reveal:not(.is-visible) .hero-gallery-frame {
  animation: heroPhotoStack 16s cubic-bezier(0.45, 0, 0.2, 1) infinite both;
  filter: saturate(1.02);
}

.hero-panel.office-card {
  animation: none;
  overflow: visible;
  border-color: rgba(255, 255, 255, 0.72);
  background: transparent;
  box-shadow: none;
}

.office-card::before,
.office-card::after {
  display: none;
}

.hero-gallery {
  position: relative;
  aspect-ratio: 1672 / 941;
  overflow: visible;
  background: #fff;
  border-radius: 30px;
  perspective: 900px;
}

.hero-gallery .hero-gallery-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.7);
  border-radius: 30px;
  background: transparent;
  box-shadow: 0 24px 62px rgba(31, 23, 56, 0.2), 0 10px 26px rgba(0, 103, 184, 0.12);
  object-fit: cover;
  object-position: center;
  opacity: 1;
  visibility: visible;
  transform-origin: center;
  will-change: transform, z-index;
}

.hero-gallery-frame:nth-child(1) {
  animation-delay: 0s;
}

.hero-gallery-frame:nth-child(2) {
  animation-delay: -4s;
}

.hero-gallery-frame:nth-child(3) {
  animation-delay: -8s;
}

.hero-gallery-frame:nth-child(4) {
  animation-delay: -12s;
}

.has-reveal .office-card.reveal .hero-gallery-frame:nth-child(1) {
  animation-delay: 0s;
}

.has-reveal .office-card.reveal .hero-gallery-frame:nth-child(2) {
  animation-delay: -4s;
}

.has-reveal .office-card.reveal .hero-gallery-frame:nth-child(3) {
  animation-delay: -8s;
}

.has-reveal .office-card.reveal .hero-gallery-frame:nth-child(4) {
  animation-delay: -12s;
}

.office-card .office-tooltip {
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 10;
}

.office-card:hover .office-tooltip,
.office-card:focus-within .office-tooltip {
  animation: officeTooltipSlideOne 16s cubic-bezier(0.45, 0, 0.2, 1) infinite both;
}

.office-card:not(:hover):not(:focus-within) .office-tooltip {
  animation: none;
  opacity: 0;
  pointer-events: none;
}

@keyframes heroPhotoStack {
  0%,
  18% {
    z-index: 4;
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 30px 76px rgba(31, 23, 56, 0.24), 0 12px 30px rgba(0, 103, 184, 0.14);
  }
  24%,
  43% {
    z-index: 3;
    transform: translate3d(-34px, -16px, 0) scale(0.96);
    box-shadow: 0 22px 54px rgba(31, 23, 56, 0.18), 0 8px 22px rgba(0, 103, 184, 0.1);
  }
  49%,
  68% {
    z-index: 2;
    transform: translate3d(-68px, -32px, 0) scale(0.92);
    box-shadow: 0 18px 42px rgba(31, 23, 56, 0.14), 0 6px 18px rgba(0, 103, 184, 0.08);
  }
  74%,
  93% {
    z-index: 1;
    transform: translate3d(-102px, -48px, 0) scale(0.88);
    box-shadow: 0 12px 32px rgba(31, 23, 56, 0.1), 0 4px 14px rgba(0, 103, 184, 0.06);
  }
  100% {
    z-index: 4;
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 30px 76px rgba(31, 23, 56, 0.24), 0 12px 30px rgba(0, 103, 184, 0.14);
  }
}

@keyframes officeTooltipSlideOne {
  0%,
  18% {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  24%,
  100% {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
  }
}

.hero .eyebrow {
  white-space: nowrap;
}

@media (min-width: 961px) {
  .hero {
    grid-template-columns: minmax(0, 0.78fr) minmax(520px, 700px);
  }

  .hero-copy {
    z-index: 1;
    margin-left: 0;
    width: calc(100% + 80px);
  }

  .hero h1 {
    max-width: 720px;
    font-size: clamp(42px, 5.2vw, 62px);
    line-height: 1.02;
  }

  .hero-text {
    max-width: 650px;
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.45;
  }

  .hero-actions {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 24px;
    gap: 10px;
  }

  .hero-actions .button {
    white-space: nowrap;
  }

  .hero-panel.office-card {
    position: relative;
    z-index: 4;
    width: min(700px, 52vw);
    margin-left: 44px;
    margin-right: -128px;
  }
}

/* Cornflower theme */
:root {
  --cornflower: #6495ed;
  --cornflower-deep: #4f7fd7;
  --cornflower-content: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.06) 48%,
    rgba(255, 255, 255, 0.16) 100%
  ), var(--cornflower);
}

body {
  background: var(--cornflower);
}

.hero.band-blue,
#about.band-white,
#services.band-blue,
section.product-band.band-white,
#portfolio.band-blue,
#testimonials.band-white,
#contact.band-blue {
  background: var(--cornflower-content);
  --band-bg: var(--cornflower-content);
}

.hero h1,
.section > .section-heading h2,
.split > div:first-child h2,
.product-band > div h2,
.contact > div h2,
.hero-text,
.section > .section-heading .eyebrow,
.split > div:first-child .eyebrow,
.product-band > div .eyebrow,
.contact > div .eyebrow,
.product-band > p,
.contact-list p,
.contact-list strong {
  color: #fff;
}

.section-copy > p {
  color: rgba(255, 255, 255, 0.9);
}

#services .service-grid article,
#portfolio .portfolio-grid a,
#testimonials .testimonial-card,
.contact-form {
  background: rgba(255, 255, 255, 0.88);
  border: 0;
  box-shadow: 0 16px 40px rgba(36, 73, 143, 0.16);
}

#testimonials .testimonial-card:nth-child(n) {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.72);
}

.site-header,
.site-header[data-surface],
.site-header.is-scrolled[data-surface] {
  background: var(--cornflower);
  border-bottom-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 10px 28px rgba(36, 73, 143, 0.18);
}

.site-header[data-surface] .site-nav a,
.site-header[data-surface] .brand,
.site-header .site-nav a,
.site-header .brand {
  color: #fff;
}

.site-header[data-surface] .nav-action,
.site-header[data-surface] .language-switch,
.site-header .nav-action,
.site-header .language-switch {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.46);
}

.site-header .nav-action:hover {
  color: var(--cornflower-deep);
  background: #fff;
}

.site-header .language-switch button {
  color: #fff;
}

.site-header .language-switch button.is-active {
  color: var(--cornflower-deep);
  background: #fff;
}

.nav-toggle {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14);
}

.nav-toggle span {
  background: #fff;
}

.site-footer {
  background: var(--cornflower);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.site-footer,
.site-footer p,
.site-footer .footer-legal,
.site-footer a {
  color: #fff;
}

@media (max-width: 720px) {
  .site-header[data-surface] .site-nav,
  .site-header .site-nav {
    background: var(--cornflower);
    border-bottom-color: rgba(255, 255, 255, 0.24);
  }
}

/* Royal blue navigation with alternating ice-blue glass sections */
:root {
  --royal-blue: #4169e1;
  --royal-blue-deep: #3154c7;
  --ice-blue-a: linear-gradient(120deg, #d8f3ff 0%, #bfe8fb 50%, #a8d7ef 100%);
  --ice-blue-b: linear-gradient(120deg, #eef9ff 0%, #d8f1fc 48%, #c2e5f6 100%);
  --glass-surface: rgba(255, 255, 255, 0.5);
  --glass-border: rgba(255, 255, 255, 0.78);
}

body {
  background: #c8eafb;
}

.hero.band-blue,
#services.band-blue,
#portfolio.band-blue,
#contact.band-blue {
  background: var(--ice-blue-a);
  --band-bg: var(--ice-blue-a);
}

#about.band-white,
section.product-band.band-white,
#testimonials.band-white {
  background: var(--ice-blue-b);
  --band-bg: var(--ice-blue-b);
}

.hero h1,
.section > .section-heading h2,
.split > div:first-child h2,
.product-band > div h2,
.contact > div h2 {
  color: #173768;
}

.hero-text,
.section-copy > p,
.product-band > p,
.contact-list p {
  color: #385577;
}

.hero .eyebrow,
.section > .section-heading .eyebrow,
.split > div:first-child .eyebrow,
.product-band > div .eyebrow,
.contact > div .eyebrow,
.contact-list strong {
  color: var(--royal-blue-deep);
}

.site-header,
.site-header[data-surface],
.site-header.is-scrolled[data-surface] {
  background: var(--royal-blue);
  border-bottom-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 12px 30px rgba(32, 61, 156, 0.25);
}

.site-header[data-surface] .nav-action,
.site-header[data-surface] .language-switch,
.site-header .nav-action,
.site-header .language-switch {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
}

.site-footer {
  background: var(--royal-blue);
  border-top-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 -12px 30px rgba(32, 61, 156, 0.18);
}

.hero-panel,
.about-video-card,
#services .service-grid article,
#portfolio .portfolio-grid a,
#testimonials .testimonial-card:nth-child(n),
.contact-form,
section.product-band .product-image {
  border: 1px solid var(--glass-border);
  background: var(--glass-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 18px 44px rgba(42, 91, 142, 0.14);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

#services .service-grid article,
#portfolio .portfolio-grid a,
#testimonials .testimonial-card,
.contact-form {
  position: relative;
  overflow: hidden;
}

#services .service-grid article::before,
#portfolio .portfolio-grid a::before,
#testimonials .testimonial-card::before,
.contact-form::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -45%;
  left: -20%;
  width: 62%;
  height: 110%;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  pointer-events: none;
}

#services .service-grid article > *,
#portfolio .portfolio-grid a > *,
#testimonials .testimonial-card > *,
.contact-form > * {
  position: relative;
  z-index: 1;
}

#services .service-grid article img {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.66);
}

.contact-list p {
  border-bottom-color: rgba(49, 84, 199, 0.18);
}

@media (max-width: 720px) {
  .site-header[data-surface] .site-nav,
  .site-header .site-nav {
    background: var(--royal-blue);
  }
}

/* Windows 11 blue chrome and Bootstrap 5 purple actions */
:root {
  --windows-blue: #0078d4;
  --windows-blue-deep: #006cbe;
  --bootstrap-purple: #7952b3;
  --bootstrap-purple-hover: #614092;
}

.site-header,
.site-header[data-surface],
.site-header.is-scrolled[data-surface],
.site-footer {
  background: var(--windows-blue);
}

.site-header,
.site-header[data-surface],
.site-header.is-scrolled[data-surface] {
  box-shadow: 0 12px 30px rgba(0, 80, 158, 0.25);
}

.site-footer {
  box-shadow: 0 -12px 30px rgba(0, 80, 158, 0.18);
}

.button.primary,
.button.secondary,
.site-header .nav-action,
.site-header[data-surface] .nav-action,
.maps-link,
.about-video-toggle,
.about-process-alt .about-video-toggle,
.nav-toggle {
  color: #fff;
  background: var(--bootstrap-purple);
  border-color: var(--bootstrap-purple);
  box-shadow: 0 10px 24px rgba(121, 82, 179, 0.25);
}

.button.primary:hover,
.button.secondary:hover,
.site-header .nav-action:hover,
.site-header[data-surface] .nav-action:hover,
.maps-link:hover,
.about-video-toggle:hover,
.about-process-alt .about-video-toggle:hover,
.nav-toggle:hover {
  color: #fff;
  background: var(--bootstrap-purple-hover);
  border-color: var(--bootstrap-purple-hover);
  box-shadow: 0 14px 30px rgba(97, 64, 146, 0.32);
}

.site-header .language-switch button.is-active {
  color: #fff;
  background: var(--bootstrap-purple);
  box-shadow: 0 6px 16px rgba(121, 82, 179, 0.3);
}

.site-header .language-switch button:not(.is-active):hover {
  background: rgba(121, 82, 179, 0.48);
}

.button:focus-visible,
.nav-action:focus-visible,
.maps-link:focus-visible,
.about-video-toggle:focus-visible,
.nav-toggle:focus-visible,
.language-switch button:focus-visible {
  outline: 3px solid rgba(121, 82, 179, 0.34);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .site-header[data-surface] .site-nav,
  .site-header .site-nav {
    background: var(--windows-blue);
  }
}

/* Soft dimensional gradients inspired by the supplied reference */
.hero.band-blue {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.82), transparent 36%),
    radial-gradient(circle at 86% 76%, rgba(92, 155, 237, 0.12), transparent 40%),
    linear-gradient(135deg, #f2faff 0%, #dff1fc 52%, #cde7f8 100%);
  --band-bg: linear-gradient(135deg, #f2faff 0%, #dff1fc 52%, #cde7f8 100%);
}

#about.band-white {
  background:
    radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.82), transparent 34%),
    radial-gradient(circle at 16% 82%, rgba(128, 123, 225, 0.1), transparent 42%),
    linear-gradient(135deg, #f5f7ff 0%, #e7ecfb 50%, #d8e0f5 100%);
  --band-bg: linear-gradient(135deg, #f5f7ff 0%, #e7ecfb 50%, #d8e0f5 100%);
}

#services.band-blue {
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.84), transparent 36%),
    radial-gradient(circle at 88% 82%, rgba(64, 187, 175, 0.1), transparent 40%),
    linear-gradient(135deg, #f3fcfb 0%, #e1f4f2 48%, #d2ebe9 100%);
  --band-bg: linear-gradient(135deg, #f3fcfb 0%, #e1f4f2 48%, #d2ebe9 100%);
}

section.product-band.band-white {
  background:
    radial-gradient(circle at 84% 20%, rgba(255, 255, 255, 0.82), transparent 32%),
    radial-gradient(circle at 10% 86%, rgba(130, 108, 218, 0.1), transparent 40%),
    linear-gradient(135deg, #f7f5ff 0%, #ebe8fb 52%, #dddaf4 100%);
  --band-bg: linear-gradient(135deg, #f7f5ff 0%, #ebe8fb 52%, #dddaf4 100%);
}

#portfolio.band-blue {
  background:
    radial-gradient(circle at 12% 74%, rgba(255, 255, 255, 0.8), transparent 38%),
    radial-gradient(circle at 88% 18%, rgba(65, 105, 225, 0.11), transparent 40%),
    linear-gradient(135deg, #f2f8ff 0%, #dfedfb 50%, #cadff4 100%);
  --band-bg: linear-gradient(135deg, #f2f8ff 0%, #dfedfb 50%, #cadff4 100%);
}

#testimonials.band-white {
  background:
    radial-gradient(circle at 88% 76%, rgba(255, 255, 255, 0.82), transparent 36%),
    radial-gradient(circle at 14% 18%, rgba(222, 122, 178, 0.08), transparent 38%),
    linear-gradient(135deg, #fbf7fd 0%, #f0e8f8 48%, #e4dcef 100%);
  --band-bg: linear-gradient(135deg, #fbf7fd 0%, #f0e8f8 48%, #e4dcef 100%);
}

#contact.band-blue {
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.84), transparent 36%),
    radial-gradient(circle at 86% 78%, rgba(0, 120, 212, 0.1), transparent 40%),
    linear-gradient(135deg, #f2fbff 0%, #dff2fa 50%, #cde8f4 100%);
  --band-bg: linear-gradient(135deg, #f2fbff 0%, #dff2fa 50%, #cde8f4 100%);
}

/* Unified Bootstrap 5 primary buttons */
:root {
  --bs-primary: #0d6efd;
  --bs-primary-hover: #0b5ed7;
  --bs-primary-border: #0a58ca;
}

.button.primary,
.button.secondary,
.site-header .nav-action,
.site-header[data-surface] .nav-action,
.maps-link,
.about-video-toggle,
.about-process-alt .about-video-toggle,
.nav-toggle,
.site-header .language-switch button.is-active {
  color: #fff;
  background-color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  border-radius: 0.375rem;
  box-shadow: none;
}

.button.primary:hover,
.button.secondary:hover,
.site-header .nav-action:hover,
.site-header[data-surface] .nav-action:hover,
.maps-link:hover,
.about-video-toggle:hover,
.about-process-alt .about-video-toggle:hover,
.nav-toggle:hover,
.site-header .language-switch button.is-active:hover {
  color: #fff;
  background-color: var(--bs-primary-hover);
  border-color: var(--bs-primary-border);
  box-shadow: none;
}

.button:focus-visible,
.nav-action:focus-visible,
.maps-link:focus-visible,
.about-video-toggle:focus-visible,
.nav-toggle:focus-visible,
.language-switch button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

/* Unified pale-blue striped background and deeper blue buttons */
:root {
  --soft-blue-striped:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.22) 0,
      rgba(255, 255, 255, 0.22) 1px,
      rgba(162, 207, 239, 0.08) 1px,
      rgba(162, 207, 239, 0.08) 3px,
      transparent 3px,
      transparent 34px
    ),
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(135deg, #eef9ff 0%, #dceffc 52%, #c8e4f7 100%);
  --button-blue-dark: #0756a6;
  --button-blue-dark-hover: #064687;
  --button-blue-dark-border: #053b73;
}

.hero.band-blue,
#about.band-white,
#services.band-blue,
section.product-band.band-white,
#portfolio.band-blue,
#testimonials.band-white,
#contact.band-blue {
  background: var(--soft-blue-striped);
  --band-bg: var(--soft-blue-striped);
}

.button.primary,
.button.secondary,
.site-header .nav-action,
.site-header[data-surface] .nav-action,
.maps-link,
.about-video-toggle,
.about-process-alt .about-video-toggle,
.nav-toggle,
.site-header .language-switch button.is-active {
  color: #fff;
  background-color: var(--button-blue-dark);
  border-color: var(--button-blue-dark);
}

.button.primary:hover,
.button.secondary:hover,
.site-header .nav-action:hover,
.site-header[data-surface] .nav-action:hover,
.maps-link:hover,
.about-video-toggle:hover,
.about-process-alt .about-video-toggle:hover,
.nav-toggle:hover,
.site-header .language-switch button.is-active:hover {
  color: #fff;
  background-color: var(--button-blue-dark-hover);
  border-color: var(--button-blue-dark-border);
}

.button:focus-visible,
.nav-action:focus-visible,
.maps-link:focus-visible,
.about-video-toggle:focus-visible,
.nav-toggle:focus-visible,
.language-switch button:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(7, 86, 166, 0.3);
}

/* Five-layer Hero gallery */
.hero-gallery-frame,
.has-reveal .office-card.reveal.is-visible .hero-gallery-frame,
.has-reveal .office-card.reveal:not(.is-visible) .hero-gallery-frame {
  animation-name: heroPhotoStackFive;
  animation-duration: 20s;
}

.hero-gallery-frame:nth-child(1),
.has-reveal .office-card.reveal .hero-gallery-frame:nth-child(1) {
  animation-delay: 0s;
}

.hero-gallery-frame:nth-child(2),
.has-reveal .office-card.reveal .hero-gallery-frame:nth-child(2) {
  animation-delay: -4s;
}

.hero-gallery-frame:nth-child(3),
.has-reveal .office-card.reveal .hero-gallery-frame:nth-child(3) {
  animation-delay: -8s;
}

.hero-gallery-frame:nth-child(4),
.has-reveal .office-card.reveal .hero-gallery-frame:nth-child(4) {
  animation-delay: -12s;
}

.hero-gallery-frame:nth-child(5),
.has-reveal .office-card.reveal .hero-gallery-frame:nth-child(5) {
  animation-delay: -16s;
}

.hero-gallery .hero-gallery-frame.slide-5 {
  object-fit: cover;
  object-position: center;
  background: #d6ecfa;
}

.office-card:hover .office-tooltip,
.office-card:focus-within .office-tooltip {
  animation-duration: 20s;
}

@keyframes heroPhotoStackFive {
  0%, 15% {
    z-index: 5;
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 30px 76px rgba(31, 23, 56, 0.24), 0 12px 30px rgba(0, 103, 184, 0.14);
  }
  20%, 35% {
    z-index: 4;
    transform: translate3d(-26px, -12px, 0) scale(0.97);
    box-shadow: 0 24px 58px rgba(31, 23, 56, 0.19), 0 9px 24px rgba(0, 103, 184, 0.11);
  }
  40%, 55% {
    z-index: 3;
    transform: translate3d(-52px, -24px, 0) scale(0.94);
    box-shadow: 0 20px 48px rgba(31, 23, 56, 0.15), 0 7px 20px rgba(0, 103, 184, 0.09);
  }
  60%, 75% {
    z-index: 2;
    transform: translate3d(-78px, -36px, 0) scale(0.91);
    box-shadow: 0 16px 38px rgba(31, 23, 56, 0.12), 0 5px 16px rgba(0, 103, 184, 0.07);
  }
  80%, 95% {
    z-index: 1;
    transform: translate3d(-104px, -48px, 0) scale(0.88);
    box-shadow: 0 12px 30px rgba(31, 23, 56, 0.09), 0 4px 13px rgba(0, 103, 184, 0.05);
  }
  100% {
    z-index: 5;
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 30px 76px rgba(31, 23, 56, 0.24), 0 12px 30px rgba(0, 103, 184, 0.14);
  }
}

/* RealtingSQL product showcase */
section.product-band {
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 12px 34px;
  align-items: center;
  padding-top: 36px;
  padding-bottom: 36px;
}

section.product-band .product-image {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 16 / 10;
  padding: 16px 64px;
  object-fit: contain;
  object-position: center;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
}

section.product-band > div,
section.product-band > p,
section.product-band > .button {
  grid-column: 2;
}

section.product-band > p {
  margin: 0;
}

section.product-band > .button {
  justify-self: start;
}

@media (max-width: 960px) {
  section.product-band {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  section.product-band .product-image,
  section.product-band > div,
  section.product-band > p,
  section.product-band > .button {
    grid-column: 1;
    grid-row: auto;
  }

  section.product-band .product-image {
    justify-self: center;
    max-width: 360px;
    padding: 14px 58px;
  }
}

/* Product section as one landscape card */
section.product-band.band-white {
  width: calc(100% - 48px);
  max-width: var(--max);
  margin: 44px auto;
  padding: 30px;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 10px 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 20px 48px rgba(42, 91, 142, 0.14);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

section.product-band.band-white::before {
  display: none;
}

section.product-band.band-white .product-image {
  grid-column: 1;
  grid-row: 1 / 4;
  max-width: 340px;
  aspect-ratio: 16 / 9;
  padding: 12px 58px;
  border-radius: 20px;
}

section.product-band.band-white > div,
section.product-band.band-white > p,
section.product-band.band-white > .button {
  grid-column: 2;
}

section.product-band.band-white > .button {
  justify-self: start;
  color: #fff;
  background: var(--button-blue-dark);
  border-color: var(--button-blue-dark);
}

section.product-band.band-white > .button:hover,
section.product-band.band-white > .button:focus-visible {
  color: #fff;
  background: var(--button-blue-dark-hover);
  border-color: var(--button-blue-dark-border);
}

@media (max-width: 720px) {
  section.product-band.band-white {
    width: calc(100% - 36px);
    margin: 30px auto;
    padding: 22px;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  section.product-band.band-white .product-image,
  section.product-band.band-white > div,
  section.product-band.band-white > p,
  section.product-band.band-white > .button {
    grid-column: 1;
    grid-row: auto;
  }

  section.product-band.band-white .product-image {
    width: 100%;
    max-width: 340px;
    justify-self: center;
  }
}

/* Final RealtingSQL product proportions */
section.product-band {
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
}

section.product-band .product-image {
  width: 100%;
  max-width: 420px;
  height: 210px;
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
  padding: 14px 72px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.8);
}

section.product-band .button.secondary {
  color: #fff;
  background: var(--button-blue-dark);
  border-color: var(--button-blue-dark);
}

section.product-band .button.secondary:hover,
section.product-band .button.secondary:focus-visible {
  color: #fff;
  background: var(--button-blue-dark-hover);
  border-color: var(--button-blue-dark-border);
}

@media (max-width: 960px) {
  section.product-band {
    grid-template-columns: 1fr;
  }

  section.product-band .product-image {
    max-width: 380px;
    height: 190px;
    padding: 12px 64px;
  }
}

@media (max-width: 560px) {
  section.product-band .product-image {
    height: 170px;
    padding: 12px 52px;
  }
}

/* Optimized full-bleed hero background */
.hero.band-blue,
.hero.band-blue::before {
  background-image:
    linear-gradient(
      90deg,
      rgba(239, 249, 255, 0.92) 0%,
      rgba(231, 245, 255, 0.76) 38%,
      rgba(218, 239, 255, 0.3) 68%,
      rgba(205, 232, 253, 0.12) 100%
    ),
    url("../img/hero-windows-blue.webp");
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

@media (max-width: 960px) {
  .hero.band-blue,
  .hero.band-blue::before {
    background-image:
      linear-gradient(
        180deg,
        rgba(239, 249, 255, 0.92) 0%,
        rgba(226, 243, 255, 0.72) 48%,
        rgba(210, 235, 253, 0.28) 100%
      ),
      url("../img/hero-windows-blue.webp");
    background-position: center, 58% center;
  }
}

/* RealtingSQL workflow summary */
section.product-band.band-white {
  grid-template-columns: minmax(420px, 520px) minmax(0, 1fr);
  gap: 18px 38px;
}

section.product-band.band-white > .product-workflow {
  grid-column: 1;
  grid-row: 1 / 4;
}

.product-workflow {
  width: 100%;
  max-width: 520px;
  overflow: hidden;
  border: 1px solid rgba(7, 86, 166, 0.18);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 46px rgba(23, 55, 104, 0.16);
}

.product-workflow-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 10px;
  color: #173768;
  background: linear-gradient(180deg, #f8fcff 0%, #eaf5fc 100%);
  border-bottom: 1px solid rgba(7, 86, 166, 0.14);
}

.product-workflow-bar img {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  object-fit: contain;
}

.product-workflow-bar strong {
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-workflow-bar > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0f7146;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.product-workflow-bar > span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #20a568;
  box-shadow: 0 0 0 5px rgba(32, 165, 104, 0.12);
}

.product-workflow-stage {
  position: relative;
  aspect-ratio: 1.29 / 1;
  overflow: hidden;
  background: #f8fbfe;
}

.product-workflow-screen {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px) scale(0.992);
  animation: productWorkflowScreen 35s ease-in-out infinite;
}

.product-workflow-screen:nth-child(2) { animation-delay: 5s; }
.product-workflow-screen:nth-child(3) { animation-delay: 10s; }
.product-workflow-screen:nth-child(4) { animation-delay: 15s; }
.product-workflow-screen:nth-child(5) { animation-delay: 20s; }
.product-workflow-screen:nth-child(6) { animation-delay: 25s; }
.product-workflow-screen:nth-child(7) { animation-delay: 30s; }

.product-workflow-screen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
  filter: saturate(1.02) contrast(1.01);
  animation: none !important;
  transform: none !important;
}

.product-workflow-intro {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(219, 244, 255, 0.98), rgba(151, 207, 242, 0.88) 56%, rgba(77, 143, 205, 0.9) 100%);
}

.product-workflow-intro .product-workflow-logo {
  width: min(56%, 270px);
  height: 56%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(16, 54, 103, 0.28));
  transform-origin: center;
  animation: productLogoSplash 35s cubic-bezier(0.2, 0.8, 0.2, 1) infinite !important;
}

.product-workflow-screen figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 10px;
  color: #fff;
  border-radius: 9px;
  background: rgba(7, 66, 128, 0.9);
  box-shadow: 0 8px 20px rgba(23, 55, 104, 0.2);
  font-size: 12px;
  font-weight: 800;
}

.product-workflow-screen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #0b72c9;
  transform: scaleX(0);
  transform-origin: left;
  animation: productWorkflowProgress 35s linear infinite;
}

.product-workflow-screen:nth-child(2)::after { animation-delay: 5s; }
.product-workflow-screen:nth-child(3)::after { animation-delay: 10s; }
.product-workflow-screen:nth-child(4)::after { animation-delay: 15s; }
.product-workflow-screen:nth-child(5)::after { animation-delay: 20s; }
.product-workflow-screen:nth-child(6)::after { animation-delay: 25s; }
.product-workflow-screen:nth-child(7)::after { animation-delay: 30s; }

.product-workflow-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 8;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(7, 86, 166, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px rgba(23, 55, 104, 0.18);
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.product-workflow-toggle span,
.product-workflow-toggle span::after {
  display: block;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: #0756a6;
}

.product-workflow-toggle span {
  position: relative;
  margin-left: -6px;
}

.product-workflow-toggle span::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
}

.product-workflow.is-paused .product-workflow-screen,
.product-workflow.is-paused .product-workflow-screen::after,
.product-workflow.is-paused .product-workflow-logo {
  animation-play-state: paused !important;
}

.product-workflow.is-paused .product-workflow-toggle span {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #0756a6;
  border-radius: 0;
  background: transparent;
}

.product-workflow.is-paused .product-workflow-toggle span::after {
  display: none;
}

@keyframes productWorkflowScreen {
  0%, 12% {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    transform: translateX(0) scale(1);
  }
  14.285%, 100% {
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    transform: translateX(-22px) scale(0.995);
  }
}

@keyframes productWorkflowProgress {
  0% { transform: scaleX(0); }
  12% { transform: scaleX(1); }
  14.285%, 100% { transform: scaleX(0); }
}

@keyframes productLogoSplash {
  0% {
    opacity: 0;
    transform: scale(0.32) rotate(-12deg);
    filter: blur(9px) drop-shadow(0 10px 16px rgba(16, 54, 103, 0.12));
  }
  2.6% {
    opacity: 1;
    transform: scale(1.12) rotate(3deg);
    filter: blur(0) drop-shadow(0 30px 36px rgba(16, 54, 103, 0.32));
  }
  4.8% {
    transform: scale(0.94) rotate(-1.5deg);
  }
  7%, 12% {
    opacity: 1;
    transform: scale(1) rotate(0);
    filter: blur(0) drop-shadow(0 24px 30px rgba(16, 54, 103, 0.28));
  }
  14.285%, 100% {
    opacity: 0;
    transform: scale(1.04) rotate(0);
    filter: blur(0) drop-shadow(0 24px 30px rgba(16, 54, 103, 0.24));
  }
}

@media (max-width: 960px) {
  section.product-band.band-white {
    grid-template-columns: 1fr;
  }

  section.product-band.band-white > .product-workflow {
    grid-column: 1;
    grid-row: auto;
    max-width: 620px;
    justify-self: center;
  }
}

@media (max-width: 560px) {
  .product-workflow-bar strong {
    font-size: 12px;
  }

  .product-workflow-screen figcaption {
    left: 8px;
    bottom: 8px;
    padding: 5px 8px;
    font-size: 10px;
  }

  .product-workflow-toggle {
    right: 8px;
    bottom: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-workflow-screen,
  .product-workflow-screen::after,
  .product-workflow-logo {
    animation: none !important;
  }

  .product-workflow-screen:first-child {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .product-workflow-logo {
    opacity: 1;
    transform: none !important;
  }

  .product-workflow-toggle {
    display: none;
  }
}

/* Keep the product CTA aligned with the primary button standard. */
section.product-band.band-white > .button.secondary {
  color: #fff;
  background: var(--button-blue-dark);
  border-color: var(--button-blue-dark);
}

section.product-band.band-white > .button.secondary:hover,
section.product-band.band-white > .button.secondary:focus-visible {
  color: #fff;
  background: var(--button-blue-dark-hover);
  border-color: var(--button-blue-dark-border);
}

/* Portfolio cards: one balanced frame for three very different source images. */
#portfolio .portfolio-grid {
  align-items: stretch;
}

#portfolio .portfolio-grid a.portfolio-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-color: rgba(29, 82, 132, 0.12);
  border-radius: 26px;
  box-shadow: 0 14px 34px rgba(38, 72, 111, 0.08);
}

#portfolio .portfolio-media {
  position: relative;
  display: grid;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  place-items: center;
  border-bottom: 1px solid rgba(29, 82, 132, 0.1);
}

#portfolio .portfolio-media::before,
#portfolio .portfolio-media::after {
  position: absolute;
  border-radius: 999px;
  content: "";
  pointer-events: none;
}

#portfolio .portfolio-media::before {
  top: -30%;
  right: -16%;
  width: 58%;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.45);
}

#portfolio .portfolio-media::after {
  bottom: -45%;
  left: -15%;
  width: 66%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

#portfolio .portfolio-media-logo {
  background: linear-gradient(145deg, #f2fbff 0%, #c7ebfb 100%);
}

#portfolio .portfolio-media-dashboard {
  background: linear-gradient(145deg, #e8f3ff 0%, #b9dcf5 100%);
}

#portfolio .portfolio-media-integration {
  background: linear-gradient(145deg, #f7fbff 0%, #dfedf8 100%);
}

#portfolio .portfolio-grid img.portfolio-image {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

#portfolio .portfolio-grid img.portfolio-logo {
  width: 43%;
  filter: drop-shadow(0 18px 22px rgba(23, 55, 104, 0.18));
}

#portfolio .portfolio-grid img.portfolio-dashboard {
  height: 88%;
  border: 5px solid rgba(255, 255, 255, 0.92);
  border-radius: 15px;
  box-shadow: 0 15px 26px rgba(23, 55, 104, 0.18);
}

#portfolio .portfolio-grid img.portfolio-integration {
  width: 76%;
  mix-blend-mode: multiply;
  filter: contrast(1.06) saturate(1.08);
}

#portfolio .portfolio-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 22px;
}

#portfolio .portfolio-copy h3 {
  margin: 0;
  color: #17263b;
  font-size: clamp(21px, 2vw, 25px);
  line-height: 1.2;
}

#portfolio .portfolio-copy p {
  margin: 10px 0 22px;
  color: #5f6874;
  font-size: 15px;
  line-height: 1.65;
}

#portfolio .portfolio-copy .portfolio-link {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-top: auto;
  padding: 0;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
}

#portfolio .portfolio-card:hover .portfolio-link,
#portfolio .portfolio-card:focus-visible .portfolio-link {
  color: var(--brand-2);
}

#portfolio .portfolio-card:focus-visible {
  outline: 3px solid rgba(0, 103, 184, 0.25);
  outline-offset: 4px;
}

/* Subtle blue artwork blended into the product card. */
section.product-band.band-white {
  background:
    linear-gradient(135deg, rgba(248, 253, 255, 0.68), rgba(231, 246, 255, 0.72)),
    url("../img/product-background.jpg") center / cover no-repeat;
}

/* A consistent subtle artwork treatment across all service cards. */
#services .service-grid article {
  background:
    linear-gradient(135deg, rgba(244, 250, 255, 0.76), rgba(226, 241, 255, 0.72)),
    url("../img/services-background.jpg") right center / cover no-repeat;
  border-color: rgba(124, 181, 232, 0.54);
}

/* White image frames blend cleanly into each service card. */
#services .service-grid article img {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 720px) {
  #portfolio .portfolio-copy {
    padding: 21px 20px 20px;
  }
}