.contact-form .form-group select {
  width: 100%;
  min-height: 58px;
  padding: 15px 48px 15px 16px;
  border: 1px solid var(--input-border);
  border-radius: 0;
  background-color: transparent;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  color: var(--input-text);
  font: inherit;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

/* Move the large left square and its corner down by 10% of the canvas. */
#capabilities .capability-panel:nth-child(2) .capability-collage {
  --right-y: calc((100% - var(--right-size)) / 2 + 10%);
}

/* Technology implementation: keep option 1's mirrored corner coordinates for every image
   variant so the switcher changes only the image, never the framework. */
#capabilities .capability-panel:nth-child(2) .capability-collage--variants .boutique-framework-corner-top-left {
  right: 9.5%;
  left: auto;
  transform: scaleX(-1);
}

#capabilities .capability-panel:nth-child(2) .capability-collage--variants .boutique-framework-corner-top-right {
  right: auto;
  left: calc(100% - var(--right-x) - var(--right-size) - var(--corner-gap) - var(--corner-right-stroke));
  transform: scaleX(-1);
}

#capabilities .capability-panel:nth-child(2) .capability-collage--variants .boutique-framework-corner-bottom-left {
  right: calc(var(--left-x) - var(--corner-gap) - var(--corner-bottom-stroke));
  left: auto;
  transform: scaleX(-1);
}

/* Strategic Planning: five independently sized, staggered squares.
   Every image variant uses this same open composition and three attached corners. */
#capabilities .capability-panel:nth-child(3) .capability-collage {
  --strategic-upper-size-ratio: 0.27;
  --strategic-upper-size: calc(100% * var(--strategic-upper-size-ratio));
  --strategic-upper-x: 11%;
  --strategic-upper-y: 1%;
  --strategic-lower-size-ratio: 0.33;
  --strategic-lower-size: calc(100% * var(--strategic-lower-size-ratio));
  --strategic-lower-x: 5%;
  --strategic-lower-y: 50%;
  --strategic-large-size-ratio: 0.49;
  --strategic-large-size: calc(100% * var(--strategic-large-size-ratio));
  --strategic-large-x: 48%;
  --strategic-large-y: 14%;
  --strategic-small-a-size-ratio: 0.2;
  --strategic-small-a-size: calc(100% * var(--strategic-small-a-size-ratio));
  --strategic-small-a-x: 44%;
  --strategic-small-a-y: 78%;
  --strategic-small-b-size-ratio: 0.16;
  --strategic-small-b-size: calc(100% * var(--strategic-small-b-size-ratio));
  --strategic-small-b-x: 79%;
  --strategic-small-b-y: 72%;
  --corner-right-size: calc(var(--strategic-large-size) * .54);
  --corner-bottom-size: calc(var(--strategic-lower-size) * .65);
}

#capabilities .capability-panel:nth-child(3) .capability-collage-visual[data-collage-option] .capability-collage-image {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  filter: none;
  -webkit-mask:
    linear-gradient(#000 0 0) left calc(var(--strategic-upper-x) / (1 - var(--strategic-upper-size-ratio))) top calc(var(--strategic-upper-y) / (1 - var(--strategic-upper-size-ratio))) / var(--strategic-upper-size) var(--strategic-upper-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-lower-x) / (1 - var(--strategic-lower-size-ratio))) top calc(var(--strategic-lower-y) / (1 - var(--strategic-lower-size-ratio))) / var(--strategic-lower-size) var(--strategic-lower-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-large-x) / (1 - var(--strategic-large-size-ratio))) top calc(var(--strategic-large-y) / (1 - var(--strategic-large-size-ratio))) / var(--strategic-large-size) var(--strategic-large-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-small-a-x) / (1 - var(--strategic-small-a-size-ratio))) top calc(var(--strategic-small-a-y) / (1 - var(--strategic-small-a-size-ratio))) / var(--strategic-small-a-size) var(--strategic-small-a-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-small-b-x) / (1 - var(--strategic-small-b-size-ratio))) top calc(var(--strategic-small-b-y) / (1 - var(--strategic-small-b-size-ratio))) / var(--strategic-small-b-size) var(--strategic-small-b-size) no-repeat;
  mask:
    linear-gradient(#000 0 0) left calc(var(--strategic-upper-x) / (1 - var(--strategic-upper-size-ratio))) top calc(var(--strategic-upper-y) / (1 - var(--strategic-upper-size-ratio))) / var(--strategic-upper-size) var(--strategic-upper-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-lower-x) / (1 - var(--strategic-lower-size-ratio))) top calc(var(--strategic-lower-y) / (1 - var(--strategic-lower-size-ratio))) / var(--strategic-lower-size) var(--strategic-lower-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-large-x) / (1 - var(--strategic-large-size-ratio))) top calc(var(--strategic-large-y) / (1 - var(--strategic-large-size-ratio))) / var(--strategic-large-size) var(--strategic-large-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-small-a-x) / (1 - var(--strategic-small-a-size-ratio))) top calc(var(--strategic-small-a-y) / (1 - var(--strategic-small-a-size-ratio))) / var(--strategic-small-a-size) var(--strategic-small-a-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-small-b-x) / (1 - var(--strategic-small-b-size-ratio))) top calc(var(--strategic-small-b-y) / (1 - var(--strategic-small-b-size-ratio))) / var(--strategic-small-b-size) var(--strategic-small-b-size) no-repeat;
}

#capabilities .capability-panel:nth-child(3) .capability-collage-visual[data-collage-option]::before,
#capabilities .capability-panel:nth-child(3) .capability-collage-visual[data-collage-option]::after {
  content: none;
  display: none;
}

#capabilities .capability-panel:nth-child(3) .capability-collage--variants .capability-collage-corners {
  display: block;
  opacity: 1;
  visibility: visible;
}

#capabilities .capability-panel:nth-child(3) .capability-collage--variants .boutique-framework-corner-top-left {
  width: calc(var(--strategic-upper-size) * .53);
  height: calc(var(--strategic-upper-size) * .53);
  top: calc(var(--strategic-upper-y) + 2.5%);
  right: auto;
  bottom: auto;
  left: calc(var(--strategic-upper-x) + 2.5%);
  transform: none;
}

#capabilities .capability-panel:nth-child(3) .capability-collage--variants .boutique-framework-corner-top-right {
  top: calc(var(--strategic-large-y) + 2.5%);
  right: calc(100% - var(--strategic-large-x) - var(--strategic-large-size) + 2.5%);
  left: auto;
  transform: none;
}

#capabilities .capability-panel:nth-child(3) .capability-collage--variants .boutique-framework-corner-bottom-left {
  top: auto;
  bottom: calc(100% - var(--strategic-lower-y) - var(--strategic-lower-size) - var(--corner-gap) - var(--corner-bottom-stroke));
  right: auto;
  left: calc(var(--strategic-lower-x) - var(--corner-gap) - var(--corner-bottom-stroke));
  transform: none;
}

#capabilities .capability-panel:nth-child(3):hover .capability-collage--variants[data-collage-variant="4"] {
  transform: scale(1.035);
}

/* Consultancy services: all image variants inherit option 1's exact mirrored
   square geometry. Masking is applied directly to the image so content cannot
   escape the three square boundaries or the corner framework. */
#capabilities .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option] .capability-collage-image {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  filter: none;
  -webkit-mask:
    linear-gradient(#000 0 0) left 12.1667% center / var(--right-size) var(--right-size) no-repeat,
    linear-gradient(#000 0 0) right 7% top calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) right 7% bottom calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat;
  mask:
    linear-gradient(#000 0 0) left 12.1667% center / var(--right-size) var(--right-size) no-repeat,
    linear-gradient(#000 0 0) right 7% top calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) right 7% bottom calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat;
}

#capabilities .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option="4"] {
  isolation: auto;
  filter: drop-shadow(0 14px 18px rgba(41, 0, 89, .24));
  animation: capability-square-rim 7.5s ease-in-out infinite;
}

#capabilities .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option="4"]::before,
#capabilities .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option="4"]::after {
  content: none;
  display: none;
}

#capabilities .capability-panel:nth-child(4) .capability-collage--variants .boutique-framework-corner-top-left {
  right: 9.5%;
  left: auto;
  transform: scaleX(-1);
}

#capabilities .capability-panel:nth-child(4) .capability-collage--variants .boutique-framework-corner-top-right {
  right: auto;
  left: calc(100% - var(--right-x) - var(--right-size) - var(--corner-gap) - var(--corner-right-stroke));
  transform: scaleX(-1);
}

#capabilities .capability-panel:nth-child(4) .capability-collage--variants .boutique-framework-corner-bottom-left {
  right: calc(var(--left-x) - var(--corner-gap) - var(--corner-bottom-stroke));
  left: auto;
  transform: scaleX(-1);
}

#capabilities .capability-panel:nth-child(4) .capability-collage--variants[data-collage-variant="4"] .capability-collage-corners {
  opacity: 1;
  visibility: visible;
}

#capabilities .capability-panel:nth-child(4):hover .capability-collage--variants[data-collage-variant="4"] {
  transform: scale(1.035);
}

/* All three Customised Solutions variants share the supplied collage: two image
   squares on the left, one larger image square on the right, three floating
   glass tiles and a two-corner framework. Images stay intact. */
#capabilities .capability-panel:nth-child(5) .capability-collage {
  --left-size-ratio: .34;
  --right-size-ratio: .52;
  --left-size: calc(100% * var(--left-size-ratio));
  --right-size: calc(100% * var(--right-size-ratio));
  --left-x: 2.8%;
  --left-y: 9%;
  --right-x: 46%;
  --right-y: calc((100% - var(--right-size)) / 2);
}

#capabilities .capability-panel:nth-child(5) .capability-collage::before,
#capabilities .capability-panel:nth-child(5) .capability-collage::after,
#capabilities .capability-panel:nth-child(5) .capability-collage-corners::before {
  content: "";
  position: absolute;
  display: block;
  width: 17%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .7);
  background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(230,207,255,.4) 52%, rgba(164,90,249,.35));
  box-shadow:
    0 14px 26px rgba(84, 0, 180, .16),
    inset 0 0 18px rgba(255, 255, 255, .52);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
  backdrop-filter: blur(8px) saturate(1.08);
  pointer-events: none;
}

#capabilities .capability-panel:nth-child(5) .capability-collage::before {
  z-index: 0;
  top: 1%;
  left: 42%;
}

#capabilities .capability-panel:nth-child(5) .capability-collage::after {
  z-index: 0;
  right: 7%;
  bottom: 1%;
}

#capabilities .capability-panel:nth-child(5) .capability-collage-corners::before {
  z-index: 6;
  left: 8%;
  bottom: 15%;
  width: 14%;
  background: linear-gradient(135deg, rgba(69,7,125,.86), rgba(202,155,255,.78));
}

#capabilities .capability-panel:nth-child(5) .capability-collage-visual[data-collage-option] .capability-collage-image {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  filter: none;
  -webkit-mask:
    linear-gradient(#000 0 0) left calc(var(--left-x) / (1 - var(--left-size-ratio))) top calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--left-x) / (1 - var(--left-size-ratio))) bottom calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--right-x) / (1 - var(--right-size-ratio))) center / var(--right-size) var(--right-size) no-repeat;
  mask:
    linear-gradient(#000 0 0) left calc(var(--left-x) / (1 - var(--left-size-ratio))) top calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--left-x) / (1 - var(--left-size-ratio))) bottom calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--right-x) / (1 - var(--right-size-ratio))) center / var(--right-size) var(--right-size) no-repeat;
}

#capabilities .capability-panel:nth-child(5) .capability-collage-visual[data-collage-option="4"] {
  isolation: auto;
  filter: drop-shadow(0 14px 18px rgba(41, 0, 89, .24));
  animation: capability-square-rim 7.5s ease-in-out infinite;
}

#capabilities .capability-panel:nth-child(5) .capability-collage-visual[data-collage-option="4"]::before,
#capabilities .capability-panel:nth-child(5) .capability-collage-visual[data-collage-option="4"]::after {
  content: none;
  display: none;
}

#capabilities .capability-panel:nth-child(5) .capability-collage--variants .boutique-framework-corner-top-left {
  display: none;
}

#capabilities .capability-panel:nth-child(5) .capability-collage--variants .boutique-framework-corner-top-right {
  right: calc(100% - var(--right-x) - var(--right-size) - var(--corner-gap) - var(--corner-right-stroke));
  left: auto;
  transform: none;
}

#capabilities .capability-panel:nth-child(5) .capability-collage--variants .boutique-framework-corner-bottom-left {
  right: auto;
  left: calc(var(--left-x) - var(--corner-gap) - var(--corner-bottom-stroke));
  transform: none;
}

#capabilities .capability-panel:nth-child(5) .capability-collage--variants[data-collage-variant="4"] .capability-collage-corners {
  opacity: 1;
  visibility: visible;
}

#capabilities .capability-panel:nth-child(5):hover .capability-collage--variants[data-collage-variant="4"] {
  transform: scale(1.035);
}


.contact-form .form-group select:invalid {
  color: var(--input-placeholder);
}

.contact-form .form-group select:hover {
  border-color: var(--input-border-hover);
}

.contact-form .form-group select:focus {
  border-color: var(--input-border-focus);
  box-shadow: var(--input-focus-ring);
}

#fit .fit-icon-symbol {
  fill: currentColor;
  stroke: none;
}

body,
body *,
body *::before,
body *::after {
  text-transform: none !important;
}

.brand-name,
.brand-name *,
.brand-wordmark strong,
.alva-preloader-wordmark strong,
svg text.brand-name {
  text-transform: uppercase !important;
}

html body footer#footer .footer-slogan {
  text-transform: uppercase !important;
}

#hero .hero-approved-layout {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center;
}

#hero .hero-approved-copy {
  width: min(100%, 1040px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#hero .hero-approved-copy h1,
#hero .hero-approved-copy .lead,
#hero .hero-approved-copy .brand-statement-hero {
  margin-inline: auto !important;
  text-align: center !important;
}

#hero .hero-approved-copy h1,
#hero .hero-approved-copy h1 * {
  text-transform: uppercase !important;
}

@media (min-width: 901px) {
  html body main #hero[id] .hero-approved-copy[class][class] h1.two-tone-heading {
    width: auto;
    max-width: none !important;
    font-size: clamp(81.6px, 6.8vw, 108.8px) !important;
    font-weight: 550 !important;
    line-height: .92 !important;
    white-space: nowrap;
  }

  html body main #hero[id] .hero-approved-copy .lead {
    max-width: 780px !important;
    font-size: clamp(17px, 1.3175vw, 20.4px) !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 900px) {
  html body main #hero[id] .hero-approved-copy[class][class] h1.two-tone-heading {
    font-size: calc(var(--alva-h1-size) * 1.0625) !important;
  }

  html body main #hero[id] .hero-approved-copy .lead {
    font-size: 13.6px !important;
  }
}

#hero .hero-approved-copy .actions {
  display: flex;
  justify-content: center;
}

#hero .hero-globe-stack[hidden] {
  display: none !important;
}

#hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#hero .hero-section-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #eee7f4;
}

#hero .hero-section-video .section-video-poster,
#hero .hero-section-video video,
#hero .hero-section-video .section-video-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

#hero .hero-section-video .section-video-poster {
  opacity: .504;
  visibility: visible;
  transition: opacity .16s linear, visibility 0s linear 0s;
}

#hero .hero-section-video video {
  opacity: 0;
}

#hero .hero-section-video.is-video-frame-ready video {
  opacity: .504;
}

#hero .hero-section-video.is-video-frame-ready .section-video-poster {
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s linear, visibility 0s linear .16s;
}

#hero .hero-section-video::before,
#hero .hero-section-video::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

#hero .hero-section-video::before {
  background: rgba(239, 222, 255, .34);
}

#hero .hero-section-video::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .44), rgba(233, 216, 250, .25) 48%, rgba(245, 237, 252, .42)),
    radial-gradient(circle at 68% 36%, rgba(202, 155, 255, .16), transparent 48%);
}

#hero > .section-inner {
  position: relative;
  z-index: 2;
}

@media (max-width: 620px) {
  #hero .hero-section-video .section-video-poster,
  #hero .hero-section-video.is-video-frame-ready video {
    opacity: .396;
  }

  #hero .hero-section-video::before {
    background: rgba(239, 222, 255, .42);
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero .hero-section-video video {
    display: none;
  }
  #hero .hero-section-video.is-video-frame-ready .section-video-poster {
    opacity: .504;
    visibility: visible;
    transition: none;
  }
}

#confidence {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #eee7f4 !important;
}

#confidence .confidence-section-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #eee7f4;
}

#confidence .confidence-section-video .section-video-poster,
#confidence .confidence-section-video video,
#confidence .confidence-section-video .section-video-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

#confidence .confidence-section-video .section-video-poster {
  opacity: .432;
  visibility: visible;
  transition: opacity .16s linear, visibility 0s linear 0s;
}

#confidence .confidence-section-video video {
  opacity: 0;
}

#confidence .confidence-section-video.is-video-frame-ready video {
  opacity: .432;
}

#confidence .confidence-section-video.is-video-frame-ready .section-video-poster {
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s linear, visibility 0s linear .16s;
}

#confidence .confidence-section-video::before,
#confidence .confidence-section-video::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

#confidence .confidence-section-video::before {
  background: rgba(239, 222, 255, .34);
}

#confidence .confidence-section-video::after {
  background:
    linear-gradient(180deg, rgba(248, 239, 255, .32), rgba(226, 201, 251, .2) 46%, rgba(244, 231, 255, .34)),
    radial-gradient(circle at 72% 38%, rgba(202, 155, 255, .17), transparent 48%);
}

#confidence > .section-inner {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: grid;
  align-items: center;
  padding-top: clamp(120px, 12vw, 190px) !important;
  padding-bottom: clamp(120px, 12vw, 190px) !important;
}

#confidence .content-head {
  display: block;
  width: 100%;
  max-width: none;
  margin-bottom: 0 !important;
}

#confidence .content-head h2 {
  width: 100%;
  max-width: none;
  font-size: clamp(23px, 2vw, 31px) !important;
  line-height: 1.36 !important;
}

@media (max-width: 620px) {
  #confidence > .section-inner {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  #confidence .confidence-section-video .section-video-poster,
  #confidence .confidence-section-video.is-video-frame-ready video {
    opacity: .342;
  }

  #confidence .confidence-section-video::before {
    background: rgba(239, 222, 255, .44);
  }
}

@media (prefers-reduced-motion: reduce) {
  #confidence .confidence-section-video video {
    display: none;
  }
  #confidence .confidence-section-video.is-video-frame-ready .section-video-poster {
    opacity: .432;
    visibility: visible;
    transition: none;
  }
}

/* Third section: three alternating image-and-copy stories. */
:is(#capabilities,#audiences) .capabilities-content {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(16.32px, 2.176vw, 29.376px) !important;
}

#audiences {
  position: relative;
}

:is(#capabilities,#audiences) .capability-panel {
  min-height: 420px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr) !important;
  grid-template-rows: minmax(420px, auto) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Keep all three stories on the section's single continuous background. */
:is(#capabilities,#audiences) .capability-panel,
:is(#capabilities,#audiences) .capability-panel:hover {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:is(#capabilities,#audiences) .capability-panel::before,
:is(#capabilities,#audiences) .capability-panel::after,
:is(#capabilities,#audiences) .capability-glass-shadow {
  content: none !important;
  display: none !important;
}

:is(#capabilities,#audiences) .capability-panel-media {
  position: relative;
  z-index: 4;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 420px;
  margin: 0;
  overflow: visible;
  display: grid;
  place-items: center;
  padding: clamp(22px, 3vw, 42px);
  background: transparent !important;
}

:is(#capabilities,#audiences) .capability-panel-media::after {
  content: none !important;
  display: none !important;
}

:is(#capabilities,#audiences) .capability-collage {
  /* Coordinates share one square canvas. Mask positions are normalized below
     because CSS mask percentages refer to the space left AFTER mask sizing. */
  --left-size-ratio: .36;
  --right-size-ratio: .415;
  --left-size: calc(100% * var(--left-size-ratio));
  --right-size: calc(100% * var(--right-size-ratio));
  --left-x: 4.48%;
  --left-y: 7.893312%;
  --right-x: 51.3824805%;
  --right-y: calc((100% - var(--right-size)) / 2);
  --corner-gap: 1.5%;
  --corner-bottom-size: 22%;
  --corner-right-size: 27%;
  --corner-bottom-stroke: calc(var(--corner-bottom-size) * .12);
  --corner-right-stroke: calc(var(--corner-right-size) * .12);
  position: relative;
  z-index: 2;
  width: min(100%, 384px);
  aspect-ratio: 1;
  overflow: visible;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

#audiences .capability-collage {
  width: min(100%, 384px);
}

:is(#capabilities,#audiences) .capability-collage::before {
  content: none;
  display: none;
}

@keyframes capability-square-rim {
  0%, 100% {
    filter:
      drop-shadow(0 22px 30px rgba(41, 0, 89, .3))
      drop-shadow(-5px -3px 6px rgba(255, 255, 255, .72))
      drop-shadow(5px 3px 10px rgba(164, 90, 249, .3));
  }
  25% {
    filter:
      drop-shadow(0 22px 30px rgba(41, 0, 89, .3))
      drop-shadow(5px -3px 6px rgba(255, 255, 255, .72))
      drop-shadow(-5px 3px 10px rgba(164, 90, 249, .3));
  }
  50% {
    filter:
      drop-shadow(0 22px 30px rgba(41, 0, 89, .3))
      drop-shadow(5px 4px 6px rgba(255, 255, 255, .72))
      drop-shadow(-5px -4px 10px rgba(164, 90, 249, .3));
  }
  75% {
    filter:
      drop-shadow(0 22px 30px rgba(41, 0, 89, .3))
      drop-shadow(-5px 4px 6px rgba(255, 255, 255, .72))
      drop-shadow(5px -4px 10px rgba(164, 90, 249, .3));
  }
}

:is(#capabilities,#audiences) .capability-collage-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  /* Filter the masked child's output, not the image before its mask clips it. */
  filter: drop-shadow(0 14px 18px rgba(41, 0, 89, .24));
  animation: capability-square-rim 7.5s ease-in-out infinite;
}

/* End-to-end image comparison: one continuous image per option, clipped by
   the established three-square mask. */
:is(#capabilities,#audiences) .capability-collage--variants .capability-collage-visual[data-collage-option] {
  opacity: 0;
  visibility: hidden;
  animation-play-state: paused;
  transition: opacity .32s ease, visibility 0s linear .32s;
}

:is(#capabilities,#audiences) .capability-collage--variants .capability-collage-visual[data-collage-option].is-selected {
  opacity: 1;
  visibility: visible;
  animation-play-state: running;
  transition-delay: 0s;
}

:is(#capabilities,#audiences) .capability-collage-visual--mirrored .capability-collage-image {
  -webkit-mask:
    linear-gradient(#000 0 0) left 12.1667% center / var(--right-size) var(--right-size) no-repeat,
    linear-gradient(#000 0 0) right 7% top calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) right 7% bottom calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat;
  mask:
    linear-gradient(#000 0 0) left 12.1667% center / var(--right-size) var(--right-size) no-repeat,
    linear-gradient(#000 0 0) right 7% top calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) right 7% bottom calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat;
}

/* Technology implementation variants share one fixed collage composition. The selector
   changes only the source image while preserving the mirrored square mask,
   corner positions, shadows and interaction of option 1. */
#capabilities .capability-panel:nth-child(2) .capability-collage-visual[data-collage-option="2"] .capability-collage-image,
#capabilities .capability-panel:nth-child(2) .capability-collage-visual[data-collage-option="3"] .capability-collage-image,
#capabilities .capability-panel:nth-child(2) .capability-collage-visual[data-collage-option="4"] .capability-collage-image {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  filter: none;
  -webkit-mask:
    linear-gradient(#000 0 0) left 12.1667% top calc(var(--right-y) / (1 - var(--right-size-ratio))) / var(--right-size) var(--right-size) no-repeat,
    linear-gradient(#000 0 0) right 7% top calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) right 7% bottom calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat;
  mask:
    linear-gradient(#000 0 0) left 12.1667% top calc(var(--right-y) / (1 - var(--right-size-ratio))) / var(--right-size) var(--right-size) no-repeat,
    linear-gradient(#000 0 0) right 7% top calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) right 7% bottom calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat;
}

#capabilities .capability-panel:nth-child(2) .capability-collage-visual[data-collage-option="4"] {
  isolation: auto;
  filter: drop-shadow(0 14px 18px rgba(41, 0, 89, .24));
  animation: capability-square-rim 7.5s ease-in-out infinite;
}

#capabilities .capability-panel:nth-child(2) .capability-collage-visual[data-collage-option="4"]::before,
#capabilities .capability-panel:nth-child(2) .capability-collage-visual[data-collage-option="4"]::after {
  content: none;
  display: none;
}

#capabilities .capability-panel:nth-child(2) .capability-collage--variants[data-collage-variant="4"] .capability-collage-corners {
  opacity: 1;
  visibility: visible;
}

#capabilities .capability-panel:nth-child(2):hover .capability-collage--variants[data-collage-variant="4"] {
  transform: scale(1.035);
}

:is(#capabilities,#audiences) .capability-collage-visual--standalone {
  isolation: isolate;
  filter: none;
  animation: none;
  mix-blend-mode: normal;
  --standalone-inset: 9%;
}

:is(#capabilities,#audiences) .capability-collage-visual--standalone::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7.5%;
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(235,217,255,.48) 48%, rgba(139,63,220,.2));
  box-shadow:
    0 22px 38px rgba(84,0,180,.14),
    -16px -12px 34px rgba(255,255,255,.88),
    16px 14px 34px rgba(164,90,249,.14);
  filter: blur(15px);
  opacity: .88;
}

:is(#capabilities,#audiences) .capability-collage-visual--standalone .capability-collage-image {
  position: absolute;
  z-index: 1;
  inset: var(--standalone-inset);
  /* Replaced elements keep their intrinsic HTML dimensions when all four
     insets are paired with auto sizing. Size this option from the collage
     canvas so the 1254px source can never escape the 384px visual. */
  width: calc(100% - (2 * var(--standalone-inset)));
  height: calc(100% - (2 * var(--standalone-inset)));
  max-width: none;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  filter: saturate(.94) contrast(1.025) drop-shadow(0 18px 28px rgba(84,0,180,.16));
  -webkit-mask:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.72) 5%, #000 11% 89%, rgba(0,0,0,.72) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.72) 5%, #000 11% 89%, rgba(0,0,0,.72) 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.72) 5%, #000 11% 89%, rgba(0,0,0,.72) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.72) 5%, #000 11% 89%, rgba(0,0,0,.72) 95%, transparent 100%);
  mask-composite: intersect;
}

:is(#capabilities,#audiences) .capability-collage-visual--standalone::after {
  content: none;
  display: none;
}

@keyframes capability-glass-edge {
  0%, 100% {
    opacity: .72;
    transform: scale(.99);
    filter: drop-shadow(-7px -3px 13px rgba(255,255,255,.52)) drop-shadow(8px 5px 17px rgba(139,63,220,.13));
  }
  50% {
    opacity: .96;
    transform: scale(1.012);
    filter: drop-shadow(7px 4px 14px rgba(255,255,255,.62)) drop-shadow(-8px -5px 18px rgba(139,63,220,.17));
  }
}

:is(#capabilities,#audiences) .capability-collage--variants .capability-collage-corners {
  transition: opacity .24s ease, visibility 0s linear 0s;
}

:is(#capabilities,#audiences) .capability-collage--variants[data-collage-variant="4"] .capability-collage-corners {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, .24s;
}

:is(#capabilities,#audiences) .capability-collage-picture {
  display: block;
  width: 100%;
  height: 100%;
}

:is(#capabilities,#audiences) .capability-collage-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-mask:
    linear-gradient(#000 0 0) left calc(var(--left-x) / (1 - var(--left-size-ratio))) top calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--left-x) / (1 - var(--left-size-ratio))) bottom calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--right-x) / (1 - var(--right-size-ratio))) center / var(--right-size) var(--right-size) no-repeat;
  mask:
    linear-gradient(#000 0 0) left calc(var(--left-x) / (1 - var(--left-size-ratio))) top calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--left-x) / (1 - var(--left-size-ratio))) bottom calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--right-x) / (1 - var(--right-size-ratio))) center / var(--right-size) var(--right-size) no-repeat;
  filter: none;
  animation: none;
}

:is(#capabilities,#audiences) .capability-panel:nth-child(2) .capability-collage-visual {
  animation-delay: -1.5s;
}

:is(#capabilities,#audiences) .capability-panel:nth-child(3) .capability-collage-visual {
  animation-delay: -3s;
}

:is(#capabilities,#audiences) .capability-panel:nth-child(4) .capability-collage-visual {
  animation-delay: -4.5s;
}

:is(#capabilities,#audiences) .capability-panel:nth-child(5) .capability-collage-visual {
  animation-delay: -6s;
}

:is(#capabilities,#audiences) .capability-panel:hover .capability-collage {
  transform: scale(1.035);
}

/* Keep the single feathered composition fixed on hover. */
:is(#capabilities,#audiences) .capability-panel:hover .capability-collage--variants[data-collage-variant="4"] {
  transform: none;
}

:is(#capabilities,#audiences) .capability-collage-corners {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(#capabilities,#audiences) .capability-collage-visual {
    animation: none;
  }
  :is(#capabilities,#audiences) .capability-collage-visual--standalone::after {
    animation: none;
  }
  :is(#capabilities,#audiences) .capability-panel:hover .capability-collage {
    transform: none;
  }
}

:is(#capabilities,#audiences) .boutique-framework-corner {
  position: absolute !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 11px rgba(84, 0, 180, .26)) !important;
  -webkit-mask: none !important;
  mask: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:is(#capabilities,#audiences) .boutique-framework-corner-top-left {
  width: 18%;
  height: 18%;
  top: 14%;
  right: auto;
  bottom: auto;
  left: 9.5%;
  background:
    linear-gradient(90deg,#ca9bff 0%,#ead7ff 58%,#ffffff 100%) top left/100% 12% no-repeat,
    linear-gradient(180deg,#ca9bff 0%,#d7b4ff 48%,#ffffff 100%) top left/12% 100% no-repeat !important;
}

:is(#capabilities,#audiences) .boutique-framework-corner-bottom-left {
  width: var(--corner-bottom-size);
  height: var(--corner-bottom-size);
  top: auto;
  right: auto;
  bottom: calc(var(--left-y) - var(--corner-gap) - var(--corner-bottom-stroke));
  left: calc(var(--left-x) - var(--corner-gap) - var(--corner-bottom-stroke));
  background: none !important;
}

:is(#capabilities,#audiences) .boutique-framework-corner-bottom-left::before {
  content: "";
  position: absolute;
  inset: 0;
  /* One gradient across the entire L; the parent casts the unclipped shadow. */
  background: linear-gradient(135deg, #290059 0%, #7133ad 38%, #ca9bff 57%, #9b68cf 100%);
  clip-path: polygon(0 0, 12% 0, 12% 88%, 100% 88%, 100% 100%, 0 100%);
}

:is(#capabilities,#audiences) .boutique-framework-corner-top-right {
  width: var(--corner-right-size);
  height: var(--corner-right-size);
  top: calc(var(--right-y) - var(--corner-gap) - var(--corner-right-stroke));
  right: calc(100% - var(--right-x) - var(--right-size) - var(--corner-gap) - var(--corner-right-stroke));
  bottom: auto;
  left: auto;
  background:
    linear-gradient(90deg,#a45af9 0%,#6823b5 52%,#290059 100%) top right/100% 12% no-repeat,
    linear-gradient(180deg,#290059 0%,#5f1baa 52%,#a45af9 100%) top right/12% 100% no-repeat !important;
}

:is(#capabilities,#audiences) .capability-collage--variants[data-collage-variant="2"] .boutique-framework-corner-top-left {
  right: 9.5%;
  left: auto;
  transform: scaleX(-1);
}

:is(#capabilities,#audiences) .capability-collage--variants[data-collage-variant="2"] .boutique-framework-corner-top-right {
  right: auto;
  left: calc(100% - var(--right-x) - var(--right-size) - var(--corner-gap) - var(--corner-right-stroke));
  transform: scaleX(-1);
}

:is(#capabilities,#audiences) .capability-collage--variants[data-collage-variant="2"] .boutique-framework-corner-bottom-left {
  right: calc(var(--left-x) - var(--corner-gap) - var(--corner-bottom-stroke));
  left: auto;
  transform: scaleX(-1);
}

:is(#capabilities,#audiences) .capability-variant-switcher {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: 14px;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(111, 50, 174, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 22px rgba(41, 0, 89, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
}

:is(#capabilities,#audiences) .capability-variant-switcher button {
  width: 28px;
  height: 28px;
  min-width: 28px !important;
  min-height: 28px !important;
  flex: 0 0 28px;
  padding: 0;
  border: 0;
  border-radius: 50% !important;
  background: transparent;
  color: #4f4659;
  font: 600 13px/28px Arial, sans-serif;
  text-align: center;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

:is(#capabilities,#audiences) .capability-variant-switcher button::before,
:is(#capabilities,#audiences) .capability-variant-switcher button::after {
  content: none !important;
  display: none !important;
}

:is(#capabilities,#audiences) .capability-variant-switcher button:hover {
  transform: translateY(-1px);
}

:is(#capabilities,#audiences) .capability-variant-switcher button:focus-visible {
  outline: 2px solid #7b2ee8;
  outline-offset: 2px;
}

:is(#capabilities,#audiences) .capability-variant-switcher button.is-selected {
  background: linear-gradient(135deg, #a45af9, #4b0089);
  color: #fff;
}

:is(#capabilities,#audiences) .capability-panel-copy {
  position: relative;
  z-index: 4;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: clamp(42px, 5vw, 76px);
}

:is(#capabilities,#audiences) .capability-panel:nth-child(even) .capability-panel-media {
  grid-column: 2;
}

:is(#capabilities,#audiences) .capability-panel:nth-child(even) .capability-panel-copy {
  grid-column: 1;
}

:is(#capabilities,#audiences) .capability-panel h3,
:is(#capabilities,#audiences) .capability-panel p {
  max-width: none !important;
}

:is(#capabilities,#audiences) .capability-panel h3 {
  align-self: auto !important;
  font-size: clamp(23px, 2vw, 31px) !important;
  line-height: 1.36 !important;
  letter-spacing: -.035em;
}

:is(#capabilities,#audiences) .capability-panel p {
  font-size: 15px !important;
  line-height: 1.67 !important;
}

:is(#capabilities,#audiences) .capability-card-index {
  position: absolute !important;
  z-index: 6 !important;
  top: 30px;
  right: 34px;
}

:is(#capabilities,#audiences) .capability-panel:nth-child(even) .capability-card-index {
  right: auto;
  left: 34px;
}

@media (max-width: 900px) {
  :is(#capabilities,#audiences) .capability-collage {
    width: min(85%, 326.4px);
  }

  :is(#capabilities,#audiences) .capability-panel {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }

  :is(#capabilities,#audiences) .capability-panel-media,
  :is(#capabilities,#audiences) .capability-panel:nth-child(even) .capability-panel-media {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    aspect-ratio: 1;
    padding: 20px;
  }

  :is(#capabilities,#audiences) .capability-variant-switcher {
    bottom: 6px;
  }

  :is(#capabilities,#audiences) .capability-panel-copy,
  :is(#capabilities,#audiences) .capability-panel:nth-child(even) .capability-panel-copy {
    grid-column: 1;
    grid-row: 2;
    padding: 30px 24px 34px;
  }

  :is(#capabilities,#audiences) .capability-card-index,
  :is(#capabilities,#audiences) .capability-panel:nth-child(even) .capability-card-index {
    top: 20px;
    right: 20px;
    left: auto;
    color: #fff;
    text-shadow: 0 1px 12px rgba(22, 0, 47, .58);
  }
}
/* Full-width global-markets artwork with accessible live heading text. */
#global-map.global-map-section {
  position: relative;
  display: block;
  border: 0;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  line-height: normal;
}

#global-map.global-map-section::before,
#global-map.global-map-section::after {
  content: none;
}

#global-map .global-map-heading {
  position: absolute;
  z-index: 2;
  top: clamp(24px, 3.4vw, 58px);
  left: 50%;
  width: min(calc(100% - 48px), 1240px);
  transform: translateX(-50%);
  color: #290059;
  text-align: center;
  pointer-events: none;
}

#global-map .global-map-heading,
#global-map .global-map-heading * {
  text-transform: none !important;
}

#global-map .global-map-heading h2 {
  margin: 0;
  font-size: clamp(28px, 3.1vw, 52px);
  font-weight: 540;
  line-height: 1.06;
  letter-spacing: -.035em;
}

#global-map .global-map-heading span,
#global-map .global-map-heading strong {
  display: block;
}

#global-map .global-map-heading strong {
  margin-top: .55em;
  font-size: .42em;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .01em;
}

#global-map.global-map-section > .global-map-media,
#global-map.global-map-section > .global-map-media > img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

@media (max-width: 620px) {
  #global-map .global-map-heading {
    top: 12px;
    width: calc(100% - 24px);
  }

  #global-map .global-map-heading h2 {
    font-size: clamp(19px, 6vw, 24px);
  }

  #global-map .global-map-heading strong {
    margin-top: .4em;
    font-size: clamp(11px, 3vw, 13px);
    white-space: nowrap;
  }
}

/* Typography parity with alva-logistics.com, measured 2026-09-05. */
html body {
  font-family: Alexandria, sans-serif !important;
  letter-spacing: normal;
}

#primary-nav a {
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  letter-spacing: 0 !important;
}

html body main #hero[id] .hero-approved-copy[class][class] h1.two-tone-heading {
  font-family: Alexandria, sans-serif !important;
  font-size: 76px !important;
  font-weight: 800 !important;
  line-height: 92px !important;
  letter-spacing: 0 !important;
}

html body main #hero[id] .hero-approved-copy .lead {
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 38px !important;
  letter-spacing: normal !important;
}

html body main #hero[id] .hero-approved-copy .brand-statement-hero,
html body footer#footer[id] .footer-slogan {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  letter-spacing: 6.72px !important;
}

#hero .actions .button,
#contact .form-footer .button {
  font-family: Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 38px !important;
  letter-spacing: normal !important;
}

html body main section#capabilities[id] .content-head[class] h2.two-tone-heading,
html body main section#contact[id] .contact[class] > h2.two-tone-heading {
  font-size: 44px !important;
  font-weight: 600 !important;
  line-height: 50px !important;
  letter-spacing: normal !important;
}

#capabilities .content-head .lead {
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  letter-spacing: normal !important;
}

:is(#capabilities,#audiences) .capability-panel-copy h3 {
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 38px !important;
  letter-spacing: normal !important;
}

:is(#capabilities,#audiences) .capability-panel-copy p {
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 30px !important;
  letter-spacing: normal !important;
}

html body main section#fit[id] .content-head[class] h2.two-tone-heading {
  font-size: 44px !important;
  font-weight: 700 !important;
  line-height: 44px !important;
  letter-spacing: normal !important;
}

#fit .content-head .lead,
#contact .contact > .lead {
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 30px !important;
  letter-spacing: normal !important;
}

html body main section#fit[id] .cards.four .card[class] h3 {
  font-size: 27px !important;
  font-weight: 700 !important;
  line-height: 34px !important;
  letter-spacing: normal !important;
}

#fit .card p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  letter-spacing: normal !important;
}

html body main section#confidence[id] .content-head[class] h2.two-tone-heading {
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 46px !important;
  letter-spacing: normal !important;
}

#global-map .global-map-heading h2,
#global-map .global-map-heading span,
#global-map .global-map-heading strong {
  font-size: 38px !important;
  font-weight: 600 !important;
  line-height: 38px !important;
  letter-spacing: normal !important;
}

#contact :is(input,select,textarea) {
  font-family: Alexandria, sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 30px !important;
  letter-spacing: normal !important;
}

#footer .footer-links a,
#footer .footer-bottom {
  font-family: Alexandria, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 30px !important;
  letter-spacing: normal !important;
}

@media (max-width: 900px) {
  html body main #hero[id] .hero-approved-copy[class][class] h1.two-tone-heading {
    font-size: 40px !important;
    line-height: 48px !important;
  }

  html body main #hero[id] .hero-approved-copy .lead {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  html body main #hero[id] .hero-approved-copy .brand-statement-hero,
  html body footer#footer[id] .footer-slogan {
    font-size: 16px !important;
    line-height: 16px !important;
    letter-spacing: 4.48px !important;
  }

  #hero .actions .button,
  #contact .form-footer .button {
    font-size: 16px !important;
    line-height: 38px !important;
  }

  html body main section#capabilities[id] .content-head[class] h2.two-tone-heading,
  html body main section#contact[id] .contact[class] > h2.two-tone-heading {
    font-size: 26px !important;
    line-height: 30px !important;
  }

  #capabilities .content-head .lead {
    font-size: 16px !important;
    line-height: 16px !important;
  }

  :is(#capabilities,#audiences) .capability-panel-copy h3 {
    font-size: 22px !important;
    line-height: 30px !important;
  }

  :is(#capabilities,#audiences) .capability-panel-copy p {
    font-size: 14px !important;
    line-height: 21px !important;
  }

  html body main section#fit[id] .content-head[class] h2.two-tone-heading {
    font-size: 28px !important;
    line-height: 38px !important;
  }

  #fit .content-head .lead {
    font-size: 16px !important;
    line-height: 30px !important;
  }

  #contact .contact > .lead {
    font-size: 14px !important;
    line-height: 21px !important;
  }

  html body main section#fit[id] .cards.four .card[class] h3 {
    font-size: 20px !important;
    line-height: 24px !important;
  }

  #fit .card p {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  html body main section#confidence[id] .content-head[class] h2.two-tone-heading {
    font-size: 22px !important;
    line-height: 32px !important;
  }

  #global-map .global-map-heading h2,
  #global-map .global-map-heading span,
  #global-map .global-map-heading strong {
    font-size: 24px !important;
    line-height: 30px !important;
  }

  #contact :is(input,select,textarea) {
    font-size: 14px !important;
    line-height: 21px !important;
  }

  #footer .footer-links a,
  #footer .footer-bottom {
    font-size: 14px !important;
    line-height: 30px !important;
  }
}

/* Consultancy services: all three options use one continuous, softly
   feathered image with the three branded corners. */
#capabilities .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option] {
  isolation: isolate;
  filter: none;
  animation: none;
  mix-blend-mode: normal;
  --consultancy-inset: 9%;
}

#capabilities .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option]::before {
  content: "";
  position: absolute;
  z-index: 0;
  display: block;
  inset: 7.5%;
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(235,217,255,.48) 48%, rgba(139,63,220,.2));
  box-shadow:
    0 22px 38px rgba(84,0,180,.14),
    -16px -12px 34px rgba(255,255,255,.88),
    16px 14px 34px rgba(164,90,249,.14);
  filter: blur(15px);
  opacity: .88;
}

#capabilities .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option] .capability-collage-image {
  position: absolute;
  z-index: 1;
  inset: var(--consultancy-inset);
  width: calc(100% - (2 * var(--consultancy-inset)));
  height: calc(100% - (2 * var(--consultancy-inset)));
  max-width: none;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  filter: saturate(.94) contrast(1.025) drop-shadow(0 18px 28px rgba(84,0,180,.16));
  -webkit-mask:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.72) 5%, #000 11% 89%, rgba(0,0,0,.72) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.72) 5%, #000 11% 89%, rgba(0,0,0,.72) 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.72) 5%, #000 11% 89%, rgba(0,0,0,.72) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.72) 5%, #000 11% 89%, rgba(0,0,0,.72) 95%, transparent 100%);
  mask-composite: intersect;
}

#capabilities .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option]::after {
  content: none;
  display: none;
}

#capabilities .capability-panel:nth-child(4) .capability-collage--variants .capability-collage-corners {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#capabilities .capability-panel:nth-child(4) .capability-collage--variants .boutique-framework-corner-top-left {
  top: 5.5% !important;
  right: auto !important;
  left: 5.5% !important;
  transform: none !important;
}

#capabilities .capability-panel:nth-child(4) .capability-collage--variants .boutique-framework-corner-top-right {
  width: calc(var(--corner-right-size) * .5) !important;
  height: calc(var(--corner-right-size) * .5) !important;
  top: 9% !important;
  right: 9% !important;
  left: auto !important;
  transform: none !important;
}

#capabilities .capability-panel:nth-child(4) .capability-collage--variants .boutique-framework-corner-bottom-left {
  width: calc(var(--corner-bottom-size) * .5) !important;
  height: calc(var(--corner-bottom-size) * .5) !important;
  right: auto !important;
  bottom: 9% !important;
  left: 9% !important;
  transform: none !important;
}

/* Consultancy services, option 3: a restrained violet foundation beneath
   the transparent artwork, contained by the existing glass frame. */
#capabilities .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option="4"]::before {
  background:
    radial-gradient(circle at 50% 44%, rgba(202, 155, 255, .48), rgba(225, 202, 255, .28) 48%, transparent 76%),
    linear-gradient(145deg, rgba(250, 246, 255, .78), rgba(213, 177, 255, .34) 56%, rgba(139, 63, 220, .18));
  box-shadow:
    inset 0 0 30px rgba(255, 255, 255, .62),
    0 20px 36px rgba(84, 0, 180, .14);
  filter: blur(10px);
  opacity: .78;
}

/* Carrier and vendor management: all three images share three squares and
   two corners. The large left square and its corner sit 15% lower. */
#audiences .capability-panel:first-child .capability-collage {
  --right-y: calc((100% - var(--right-size)) / 2 + 15%);
}

#audiences .capability-panel:first-child .capability-collage-visual[data-collage-option] .capability-collage-image {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  filter: none;
  -webkit-mask:
    linear-gradient(#000 0 0) left 12.1667% top calc(var(--right-y) / (1 - var(--right-size-ratio))) / var(--right-size) var(--right-size) no-repeat,
    linear-gradient(#000 0 0) right 7% top calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) right 7% bottom calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat;
  mask:
    linear-gradient(#000 0 0) left 12.1667% top calc(var(--right-y) / (1 - var(--right-size-ratio))) / var(--right-size) var(--right-size) no-repeat,
    linear-gradient(#000 0 0) right 7% top calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) right 7% bottom calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat;
}

#audiences .capability-panel:first-child .capability-collage-visual[data-collage-option="4"] {
  isolation: auto;
  filter: drop-shadow(0 14px 18px rgba(41, 0, 89, .24));
  animation: capability-square-rim 7.5s ease-in-out infinite;
  mix-blend-mode: normal;
}

#audiences .capability-panel:first-child .capability-collage-visual[data-collage-option="4"]::before,
#audiences .capability-panel:first-child .capability-collage-visual[data-collage-option="4"]::after {
  content: none;
  display: none;
}

#audiences .capability-panel:first-child .capability-collage--variants .boutique-framework-corner-top-left {
  display: none;
}

#audiences .capability-panel:first-child .capability-collage--variants .boutique-framework-corner-top-right {
  right: auto;
  left: calc(100% - var(--right-x) - var(--right-size) - var(--corner-gap) - var(--corner-right-stroke));
  transform: scaleX(-1);
}

#audiences .capability-panel:first-child .capability-collage--variants .boutique-framework-corner-bottom-left {
  right: calc(var(--left-x) - var(--corner-gap) - var(--corner-bottom-stroke));
  left: auto;
  transform: scaleX(-1);
}

#audiences .capability-panel:first-child .capability-collage--variants .capability-collage-corners {
  opacity: 1;
  visibility: visible;
}

#audiences .capability-panel:first-child:hover .capability-collage--variants[data-collage-variant="4"] {
  transform: scale(1.035);
}

/* Cost Optimisation mirrors Customised Solutions exactly: two image squares on
   the left, one larger image square on the right, three glass tiles and the
   same two-corner framework. */
#audiences .capability-panel:nth-child(3) .capability-collage {
  --left-size-ratio: .34;
  --right-size-ratio: .52;
  --left-size: calc(100% * var(--left-size-ratio));
  --right-size: calc(100% * var(--right-size-ratio));
  --left-x: 2.8%;
  --left-y: 9%;
  --right-x: 46%;
  --right-y: calc((100% - var(--right-size)) / 2);
}

#audiences .capability-panel:nth-child(3) .capability-collage::before,
#audiences .capability-panel:nth-child(3) .capability-collage::after,
#audiences .capability-panel:nth-child(3) .capability-collage-corners::before {
  content: "";
  position: absolute;
  display: block;
  width: 17%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .7);
  background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(230,207,255,.4) 52%, rgba(164,90,249,.35));
  box-shadow:
    0 14px 26px rgba(84, 0, 180, .16),
    inset 0 0 18px rgba(255, 255, 255, .52);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
  backdrop-filter: blur(8px) saturate(1.08);
  pointer-events: none;
}

#audiences .capability-panel:nth-child(3) .capability-collage::before {
  z-index: 0;
  top: 1%;
  left: 42%;
}

#audiences .capability-panel:nth-child(3) .capability-collage::after {
  z-index: 0;
  right: 7%;
  bottom: 1%;
}

#audiences .capability-panel:nth-child(3) .capability-collage-corners::before {
  z-index: 6;
  left: 8%;
  bottom: 15%;
  width: 14%;
  background: linear-gradient(135deg, rgba(69,7,125,.86), rgba(202,155,255,.78));
}

#audiences .capability-panel:nth-child(3) .capability-collage-visual[data-collage-option] .capability-collage-image {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98) 0%, rgba(248, 243, 255, .97) 54%, rgba(232, 218, 250, .94) 100%);
  mix-blend-mode: normal;
  filter: none;
  -webkit-mask:
    linear-gradient(#000 0 0) left calc(var(--left-x) / (1 - var(--left-size-ratio))) top calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--left-x) / (1 - var(--left-size-ratio))) bottom calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--right-x) / (1 - var(--right-size-ratio))) center / var(--right-size) var(--right-size) no-repeat;
  mask:
    linear-gradient(#000 0 0) left calc(var(--left-x) / (1 - var(--left-size-ratio))) top calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--left-x) / (1 - var(--left-size-ratio))) bottom calc(var(--left-y) / (1 - var(--left-size-ratio))) / var(--left-size) var(--left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--right-x) / (1 - var(--right-size-ratio))) center / var(--right-size) var(--right-size) no-repeat;
}





#audiences .capability-panel:nth-child(3) .capability-collage--variants .boutique-framework-corner-top-left {
  display: none;
}

#audiences .capability-panel:nth-child(3) .capability-collage--variants .boutique-framework-corner-top-right {
  right: calc(100% - var(--right-x) - var(--right-size) - var(--corner-gap) - var(--corner-right-stroke));
  left: auto;
  transform: none;
}

#audiences .capability-panel:nth-child(3) .capability-collage--variants .boutique-framework-corner-bottom-left {
  right: auto;
  left: calc(var(--left-x) - var(--corner-gap) - var(--corner-bottom-stroke));
  transform: none;
}

#audiences .capability-panel:nth-child(3) .capability-collage--variants[data-collage-variant="3"] .capability-collage-corners {
  opacity: 1;
  visibility: visible;
}

#audiences .capability-panel:nth-child(3):hover .capability-collage--variants[data-collage-variant="3"] {
  transform: scale(1.035);
}

/* Risk management: all three options reuse Strategic Planning's complete
   five-square crop and three-corner framework. */
#audiences .capability-panel:nth-child(4) .capability-collage {
  --strategic-left-size-ratio: .34;
  --strategic-large-size-ratio: .50;
  --strategic-small-size-ratio: .21;
  --strategic-left-size: calc(100% * var(--strategic-left-size-ratio));
  --strategic-large-size: calc(100% * var(--strategic-large-size-ratio));
  --strategic-small-size: calc(100% * var(--strategic-small-size-ratio));
  --strategic-left-x: 4%;
  --strategic-left-y: 11%;
  --strategic-large-x: 47%;
  --strategic-large-y: 11%;
  --strategic-small-a-x: 47%;
  --strategic-small-b-x: 75%;
  --strategic-small-y: 11%;
}

#audiences .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option] {
  isolation: auto;
  inset: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 14px 18px rgba(41, 0, 89, .24));
  animation: capability-square-rim 7.5s ease-in-out infinite;
  transform: none;
  mix-blend-mode: normal;
}

#audiences .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option] .capability-collage-image {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  filter: none;
  -webkit-mask:
    linear-gradient(#000 0 0) left calc(var(--strategic-left-x) / (1 - var(--strategic-left-size-ratio))) top calc(var(--strategic-left-y) / (1 - var(--strategic-left-size-ratio))) / var(--strategic-left-size) var(--strategic-left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-left-x) / (1 - var(--strategic-left-size-ratio))) bottom calc(var(--strategic-left-y) / (1 - var(--strategic-left-size-ratio))) / var(--strategic-left-size) var(--strategic-left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-large-x) / (1 - var(--strategic-large-size-ratio))) top calc(var(--strategic-large-y) / (1 - var(--strategic-large-size-ratio))) / var(--strategic-large-size) var(--strategic-large-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-small-a-x) / (1 - var(--strategic-small-size-ratio))) bottom calc(var(--strategic-small-y) / (1 - var(--strategic-small-size-ratio))) / var(--strategic-small-size) var(--strategic-small-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-small-b-x) / (1 - var(--strategic-small-size-ratio))) bottom calc(var(--strategic-small-y) / (1 - var(--strategic-small-size-ratio))) / var(--strategic-small-size) var(--strategic-small-size) no-repeat;
  mask:
    linear-gradient(#000 0 0) left calc(var(--strategic-left-x) / (1 - var(--strategic-left-size-ratio))) top calc(var(--strategic-left-y) / (1 - var(--strategic-left-size-ratio))) / var(--strategic-left-size) var(--strategic-left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-left-x) / (1 - var(--strategic-left-size-ratio))) bottom calc(var(--strategic-left-y) / (1 - var(--strategic-left-size-ratio))) / var(--strategic-left-size) var(--strategic-left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-large-x) / (1 - var(--strategic-large-size-ratio))) top calc(var(--strategic-large-y) / (1 - var(--strategic-large-size-ratio))) / var(--strategic-large-size) var(--strategic-large-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-small-a-x) / (1 - var(--strategic-small-size-ratio))) bottom calc(var(--strategic-small-y) / (1 - var(--strategic-small-size-ratio))) / var(--strategic-small-size) var(--strategic-small-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-small-b-x) / (1 - var(--strategic-small-size-ratio))) bottom calc(var(--strategic-small-y) / (1 - var(--strategic-small-size-ratio))) / var(--strategic-small-size) var(--strategic-small-size) no-repeat;
}

#audiences .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option]::before,
#audiences .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option]::after {
  content: none;
  display: none;
}

#audiences .capability-panel:nth-child(4) .capability-collage--variants .capability-collage-corners {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#audiences .capability-panel:nth-child(4) .capability-collage--variants .boutique-framework-corner-top-left {
  top: calc(var(--strategic-left-y) + 2.5%);
  right: auto;
  left: calc(var(--strategic-left-x) + 2.5%);
  transform: none;
}

#audiences .capability-panel:nth-child(4) .capability-collage--variants .boutique-framework-corner-top-right {
  top: calc(var(--strategic-large-y) + 2.5%);
  right: calc(100% - var(--strategic-large-x) - var(--strategic-large-size) + 2.5%);
  left: auto;
  transform: none;
}

#audiences .capability-panel:nth-child(4) .capability-collage--variants .boutique-framework-corner-bottom-left {
  bottom: calc(var(--strategic-left-y) - var(--corner-gap) - var(--corner-bottom-stroke));
  right: auto;
  left: calc(var(--strategic-left-x) - var(--corner-gap) - var(--corner-bottom-stroke));
  transform: none;
}

#audiences .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option="4"] {
  isolation: isolate;
}

#audiences .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option="4"]::before {
  content: "";
  position: absolute;
  z-index: 0;
  display: block;
  inset: 0;
  background:
    radial-gradient(circle at 63% 38%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .68) 46%, transparent 76%),
    linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .66) 58%, rgba(247, 241, 255, .48));
  box-shadow:
    inset 0 0 38px rgba(255, 255, 255, .7),
    0 12px 28px rgba(84, 0, 180, .08);
  -webkit-mask:
    linear-gradient(#000 0 0) left calc(var(--strategic-left-x) / (1 - var(--strategic-left-size-ratio))) top calc(var(--strategic-left-y) / (1 - var(--strategic-left-size-ratio))) / var(--strategic-left-size) var(--strategic-left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-left-x) / (1 - var(--strategic-left-size-ratio))) bottom calc(var(--strategic-left-y) / (1 - var(--strategic-left-size-ratio))) / var(--strategic-left-size) var(--strategic-left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-large-x) / (1 - var(--strategic-large-size-ratio))) top calc(var(--strategic-large-y) / (1 - var(--strategic-large-size-ratio))) / var(--strategic-large-size) var(--strategic-large-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-small-a-x) / (1 - var(--strategic-small-size-ratio))) bottom calc(var(--strategic-small-y) / (1 - var(--strategic-small-size-ratio))) / var(--strategic-small-size) var(--strategic-small-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-small-b-x) / (1 - var(--strategic-small-size-ratio))) bottom calc(var(--strategic-small-y) / (1 - var(--strategic-small-size-ratio))) / var(--strategic-small-size) var(--strategic-small-size) no-repeat;
  mask:
    linear-gradient(#000 0 0) left calc(var(--strategic-left-x) / (1 - var(--strategic-left-size-ratio))) top calc(var(--strategic-left-y) / (1 - var(--strategic-left-size-ratio))) / var(--strategic-left-size) var(--strategic-left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-left-x) / (1 - var(--strategic-left-size-ratio))) bottom calc(var(--strategic-left-y) / (1 - var(--strategic-left-size-ratio))) / var(--strategic-left-size) var(--strategic-left-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-large-x) / (1 - var(--strategic-large-size-ratio))) top calc(var(--strategic-large-y) / (1 - var(--strategic-large-size-ratio))) / var(--strategic-large-size) var(--strategic-large-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-small-a-x) / (1 - var(--strategic-small-size-ratio))) bottom calc(var(--strategic-small-y) / (1 - var(--strategic-small-size-ratio))) / var(--strategic-small-size) var(--strategic-small-size) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--strategic-small-b-x) / (1 - var(--strategic-small-size-ratio))) bottom calc(var(--strategic-small-y) / (1 - var(--strategic-small-size-ratio))) / var(--strategic-small-size) var(--strategic-small-size) no-repeat;
  opacity: .88;
}

#audiences .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option="4"] .capability-collage-image {
  z-index: 1;
}

#audiences .capability-panel:nth-child(4):hover .capability-collage--variants[data-collage-variant="4"] {
  transform: scale(1.035);
}

/* Strategic planning and Risk management: the top-right corner uses the
   same light treatment as the top-left corner. */
#capabilities .capability-panel:nth-child(3) .capability-collage--variants .boutique-framework-corner-top-right,
#audiences .capability-panel:nth-child(4) .capability-collage--variants .boutique-framework-corner-top-right {
  background:
    linear-gradient(90deg, #ffffff 0%, #ead7ff 42%, #ca9bff 100%) top right / 100% 12% no-repeat,
    linear-gradient(180deg, #ca9bff 0%, #d7b4ff 48%, #ffffff 100%) top right / 12% 100% no-repeat !important;
}

/* Global markets: regional network only — Europe through China, with the
   earlier light dimensional map language and no western hemisphere. */
#global-map.global-map-section {
  background: #f8f6ff;
}

#global-map .global-map-heading {
  top: clamp(20px, 2.4vw, 42px);
  width: min(calc(100% - 48px), 1120px);
  filter: drop-shadow(0 2px 12px rgba(255, 255, 255, .96));
}

html body main #global-map .global-map-heading h2,
html body main #global-map .global-map-heading .global-map-kicker {
  color: #18131f;
  font-size: 38px !important;
  font-weight: 700 !important;
  line-height: 44px !important;
  letter-spacing: normal !important;
}

#global-map .global-map-heading .global-map-kicker em {
  color: #a45af9;
  font: inherit;
  font-style: normal;
}

html body main #global-map .global-map-heading strong {
  margin-top: 16px;
  color: #50485b;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  letter-spacing: normal !important;
}

#global-map.global-map-section > .global-map-media > img {
  background: #f8f6ff;
}

@media (max-width: 620px) {
  #global-map .global-map-heading {
    top: 10px;
    width: calc(100% - 24px);
  }

  html body main #global-map .global-map-heading h2,
  html body main #global-map .global-map-heading .global-map-kicker {
    font-size: 24px !important;
    line-height: 30px !important;
  }

  html body main #global-map .global-map-heading strong {
    margin-top: 6px;
    font-size: 13px !important;
    line-height: 18px !important;
    white-space: normal;
  }
}

/* Integrate the heading into the map's own light canvas. */
#global-map.global-map-section {
  position: relative;
  background: #f8f6ff;
}

#global-map .global-map-heading {
  position: absolute;
  z-index: 2;
  top: clamp(42px, 4vw, 72px);
  left: 50%;
  width: min(calc(100% - 48px), 1200px);
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
}

html body main #global-map .global-map-heading h2,
html body main #global-map .global-map-heading .global-map-kicker,
html body main #global-map .global-map-heading strong {
  color: #32006f;
}

#global-map.global-map-section > .global-map-media {
  display: block;
  box-sizing: border-box;
  padding-top: clamp(150px, 14vw, 220px);
  background: linear-gradient(180deg, #fbfaff 0%, #f8f6ff 72%, #f8f6ff 100%);
}

#global-map.global-map-section > .global-map-media > img {
  display: block;
  width: 100%;
}

@media (max-width: 620px) {
  #global-map .global-map-heading {
    top: 30px;
    width: calc(100% - 28px);
  }

  #global-map.global-map-section > .global-map-media {
    padding-top: 126px;
  }
}

/* Mobile hero occupies a complete phone viewport, matching the reference. */
@media (max-width: 900px) {
  html body main #hero[id] {
    display: flex;
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: auto;
    align-items: stretch;
  }

  html body main #hero[id] > .section-inner {
    display: flex;
    width: min(calc(100% - 32px), 1440px);
    min-height: 100vh;
    min-height: 100svh;
    flex: 1 1 auto;
    align-items: center;
    padding-top: max(112px, calc(env(safe-area-inset-top) + 96px)) !important;
    padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 32px)) !important;
    box-sizing: border-box;
  }

  #hero .hero-approved-layout {
    width: 100%;
    min-height: 100%;
    align-content: center;
  }

  #hero .hero-section-video,
  #hero .hero-section-video .section-video-poster,
  #hero .hero-section-video video,
  #hero .hero-section-video .section-video-poster img {
    min-height: 100%;
  }
}

/* Final mobile hero alignment: center the complete copy group in the viewport. */
@media (max-width: 900px) {
  html body main #hero[id] {
    display: grid !important;
    height: 100vh !important;
    height: 100svh !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch !important;
  }

  html body main #hero[id] > .section-inner {
    display: grid !important;
    width: min(calc(100% - 32px), 1440px) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin-inline: auto !important;
    padding-top: max(92px, calc(env(safe-area-inset-top) + 80px)) !important;
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px)) !important;
    box-sizing: border-box;
    place-items: center !important;
  }

  html body main #hero[id] .hero-approved-layout {
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    align-self: center !important;
    place-items: center !important;
  }

  html body main #hero[id] .hero-approved-copy {
    margin-block: 0 !important;
    transform: none !important;
  }
}

/* Keep the editable HTML title inside one seamless map canvas. */
#global-map.global-map-section,
#global-map .global-map-canvas {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fefefe !important;
}

#global-map .global-map-canvas > .global-map-media,
#global-map .global-map-canvas > .global-map-media > img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  background: #fefefe !important;
}

#global-map .global-map-canvas > .global-map-heading {
  position: absolute;
  z-index: 2;
  top: clamp(38px, 3.2vw, 62px);
  right: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding-inline: 24px;
  box-sizing: border-box;
  transform: none;
  filter: none !important;
  text-align: center;
  pointer-events: none;
}

#global-map .global-map-canvas > .global-map-heading h2 {
  width: min(100%, 1320px);
  margin: 0 auto;
}

html body main #global-map .global-map-canvas > .global-map-heading .global-map-kicker,
html body main #global-map .global-map-canvas > .global-map-heading strong {
  display: block;
  color: #32006f;
  font-size: clamp(28px, 2vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: normal !important;
}

html body main #global-map .global-map-canvas > .global-map-heading strong {
  margin-top: 8px;
}

@media (max-width: 620px) {
  #global-map .global-map-canvas > .global-map-heading {
    top: 14px;
    padding-inline: 14px;
  }

  html body main #global-map .global-map-canvas > .global-map-heading .global-map-kicker {
    font-size: 22px !important;
    line-height: 28px !important;
  }

  html body main #global-map .global-map-canvas > .global-map-heading strong {
    margin-top: 4px;
    font-size: 17px !important;
    line-height: 23px !important;
  }
}

/* Match the tighter ALVA mobile rhythm between each service title and copy. */
@media (max-width: 900px) {
  :is(#capabilities, #audiences) .capability-panel-copy,
  :is(#capabilities, #audiences) .capability-panel:nth-child(even) .capability-panel-copy {
    gap: 11px !important;
  }
}

/* Final regional map: editable heading over one seamless Europe–Asia canvas. */
#global-map .global-map-canvas {
  position: relative;
  overflow: hidden;
  background: #fdfdff !important;
}

#global-map .global-map-canvas > .global-map-media,
#global-map .global-map-canvas > .global-map-media > img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  background: #fdfdff !important;
}

#global-map .global-map-canvas > .global-map-heading {
  position: absolute;
  z-index: 2;
  top: clamp(34px, 4vw, 68px);
  right: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding-inline: 24px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}

#global-map .global-map-canvas > .global-map-heading h2 {
  width: min(100%, 1320px);
  margin: 0 auto;
}

html body main #global-map .global-map-canvas > .global-map-heading .global-map-kicker {
  display: block;
  color: #17131c;
  font-size: clamp(30px, 2.45vw, 47px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  text-transform: lowercase;
}

html body main #global-map .global-map-canvas > .global-map-heading .global-map-kicker em {
  color: #9b4df2;
  font-style: normal;
}

html body main #global-map .global-map-canvas > .global-map-heading strong {
  display: block;
  margin-top: clamp(24px, 2.25vw, 42px);
  color: #46404d;
  font-size: clamp(19px, 1.55vw, 29px) !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  letter-spacing: normal !important;
  text-transform: lowercase;
}

@media (max-width: 620px) {
  #global-map .global-map-canvas > .global-map-heading {
    top: 14px;
    padding-inline: 14px;
  }

  html body main #global-map .global-map-canvas > .global-map-heading .global-map-kicker {
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: 1.15 !important;
  }

  html body main #global-map .global-map-canvas > .global-map-heading strong {
    margin-top: 10px;
    font-size: clamp(13px, 4vw, 17px) !important;
    line-height: 1.45 !important;
  }
}

/* Phone-specific service copy rhythm: 11px is the complete visual gap.
   Reset the legacy heading margin so it is not added on top of flex gap. */
@media (max-width: 620px) {
  html body main :is(#capabilities, #audiences) .capability-panel-copy {
    row-gap: 11px !important;
    column-gap: 0 !important;
  }

  html body main :is(#capabilities, #audiences) .capability-panel-copy > h3,
  html body main :is(#capabilities, #audiences) .capability-panel-copy > p {
    margin-block: 0 !important;
  }
}

/* Small tablets keep the stacked flow, but the artwork fills the available
   canvas instead of retaining the phone-sized 326px cap. */
@media (min-width: 621px) and (max-width: 820px) {
  html body main :is(#capabilities, #audiences) .capability-collage {
    width: min(74vw, 560px) !important;
  }

  html body main :is(#capabilities, #audiences) .capability-panel-media,
  html body main :is(#capabilities, #audiences) .capability-panel:nth-child(even) .capability-panel-media {
    padding: 18px 24px !important;
  }
}

/* Large tablets use the desktop alternating image/copy composition. */
@media (min-width: 821px) and (max-width: 900px) {
  html body main :is(#capabilities, #audiences) .capability-panel {
    min-height: 420px !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr) !important;
    grid-template-rows: minmax(420px, auto) !important;
  }

  html body main :is(#capabilities, #audiences) .capability-panel-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 420px !important;
    aspect-ratio: auto !important;
    padding: clamp(22px, 3vw, 42px) !important;
  }

  html body main :is(#capabilities, #audiences) .capability-panel:nth-child(even) .capability-panel-media {
    grid-column: 2 !important;
  }

  html body main :is(#capabilities, #audiences) .capability-panel-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: clamp(42px, 5vw, 76px) !important;
  }

  html body main :is(#capabilities, #audiences) .capability-panel:nth-child(even) .capability-panel-copy {
    grid-column: 1 !important;
  }

  html body main :is(#capabilities, #audiences) .capability-collage {
    width: min(100%, 384px) !important;
  }
}

/* Give the mobile map heading its own breathing room without stretching or
   cropping the artwork. The 82vw canvas is about 45% taller than 16:9. */
@media (max-width: 620px) {
  #global-map .global-map-canvas {
    height: 92vw;
    min-height: 0;
  }

  #global-map .global-map-canvas > .global-map-media {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  #global-map .global-map-canvas > .global-map-media > img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
  }
}

/* Live alva-logistics.com text parity — 2026-09-08.
   Keep the approved page structure and artwork, while matching the reference
   hierarchy, casing, colour, weight, alignment and responsive type scale. */
#primary-nav a {
  text-transform: uppercase !important;
}

html body main #hero[id] .hero-approved-copy {
  width: 100% !important;
  max-width: none !important;
}

html body main #hero[id] .hero-approved-copy[class][class] h1.two-tone-heading,
html body main #hero[id] .hero-approved-copy[class][class] h1.two-tone-heading * {
  width: 100% !important;
  max-width: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 76px !important;
  font-weight: 800 !important;
  line-height: 92px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow: 0 10px 14px rgba(0, 0, 0, .25) !important;
  white-space: normal !important;
}

html body main #hero[id] .hero-approved-copy .lead {
  width: 100% !important;
  max-width: none !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 38px !important;
  text-align: center !important;
  text-transform: none !important;
}

html body main #hero[id] .hero-approved-copy .brand-statement-hero,
html body main #hero[id] .hero-approved-copy .brand-statement-hero * {
  color: #5400b4 !important;
  -webkit-text-fill-color: #5400b4 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  letter-spacing: 6.72px !important;
  text-transform: uppercase !important;
}

#hero .actions .button,
#hero .actions .button *,
#contact .form-footer .button,
#contact .form-footer .button * {
  text-transform: uppercase !important;
}

#capabilities .content-head,
#fit .content-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  width: 100% !important;
  text-align: center !important;
}

html body main section#capabilities[id] .content-head[class] h2.two-tone-heading,
html body main section#capabilities[id] .content-head[class] h2.two-tone-heading * {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  color: #5400b4 !important;
  -webkit-text-fill-color: #5400b4 !important;
  font-size: 44px !important;
  font-weight: 600 !important;
  line-height: 50px !important;
  text-align: center !important;
  text-transform: capitalize !important;
}

#capabilities .content-head .lead {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  color: #5400b4 !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  text-align: center !important;
  text-transform: capitalize !important;
}

html body main :is(#capabilities, #audiences) .capability-panel-copy h3 {
  color: #a45af9 !important;
  -webkit-text-fill-color: #a45af9 !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 38px !important;
  letter-spacing: normal !important;
  text-transform: capitalize !important;
}

html body main :is(#capabilities, #audiences) .capability-panel-copy p {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 30px !important;
  text-transform: none !important;
}

html body main section#fit[id] .content-head[class] h2.two-tone-heading,
html body main section#fit[id] .content-head[class] h2.two-tone-heading * {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  color: #9989ac !important;
  -webkit-text-fill-color: #9989ac !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  line-height: 44px !important;
  text-align: center !important;
  text-transform: none !important;
}

#fit .content-head .lead {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 30px !important;
  text-align: center !important;
  text-transform: none !important;
}

html body main section#fit[id] .cards.four .card[class] h3 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  font-size: 27px !important;
  font-weight: 700 !important;
  line-height: 34px !important;
  text-transform: none !important;
}

html body main section#fit[id] .card[class] p {
  color: #9989ac !important;
  -webkit-text-fill-color: #9989ac !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  text-transform: none !important;
}

html body main section#confidence[id] .content-head {
  width: min(100%, 1040px) !important;
  margin-inline: auto !important;
}

html body main section#confidence[id] .content-head[class] h2.two-tone-heading,
html body main section#confidence[id] .content-head[class] h2.two-tone-heading * {
  color: #9989ac !important;
  -webkit-text-fill-color: #9989ac !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 46px !important;
  text-align: left !important;
  text-transform: none !important;
}

html body main section#contact[id] .contact[class] > h2.two-tone-heading,
html body main section#contact[id] .contact[class] > h2.two-tone-heading * {
  text-transform: capitalize !important;
}

#contact .contact > .lead,
#contact :is(input, select, textarea) {
  text-transform: none !important;
}

html body footer#footer[id] .footer-slogan {
  color: #5400b4 !important;
  -webkit-text-fill-color: #5400b4 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  letter-spacing: 6.72px !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

#footer .footer-links a,
#footer .footer-bottom {
  color: #fff !important;
  text-transform: uppercase !important;
}

/* The approved regional-map wording intentionally stays lowercase. */
html body main #global-map .global-map-heading,
html body main #global-map .global-map-heading * {
  text-transform: lowercase !important;
}

@media (max-width: 900px) {
  html body main #hero[id] .hero-approved-copy[class][class] h1.two-tone-heading,
  html body main #hero[id] .hero-approved-copy[class][class] h1.two-tone-heading * {
    font-size: 40px !important;
    line-height: 48px !important;
  }

  html body main #hero[id] .hero-approved-copy .lead {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  html body main #hero[id] .hero-approved-copy .brand-statement-hero,
  html body footer#footer[id] .footer-slogan {
    font-size: 16px !important;
    line-height: 16px !important;
    letter-spacing: 4.48px !important;
  }

  html body main section#capabilities[id] .content-head[class] h2.two-tone-heading,
  html body main section#capabilities[id] .content-head[class] h2.two-tone-heading * {
    font-size: 26px !important;
    line-height: 30px !important;
  }

  #capabilities .content-head .lead {
    font-size: 16px !important;
    line-height: 16px !important;
  }

  html body main :is(#capabilities, #audiences) .capability-panel-copy h3 {
    font-size: 22px !important;
    line-height: 30px !important;
  }

  html body main :is(#capabilities, #audiences) .capability-panel-copy p {
    font-size: 14px !important;
    line-height: 21px !important;
  }

  html body main section#fit[id] .content-head[class] h2.two-tone-heading,
  html body main section#fit[id] .content-head[class] h2.two-tone-heading * {
    font-size: 28px !important;
    line-height: 38px !important;
  }

  #fit .content-head .lead {
    font-size: 16px !important;
    line-height: 30px !important;
  }

  html body main section#fit[id] .cards.four .card[class] h3 {
    font-size: 20px !important;
    line-height: 24px !important;
  }

  html body main section#fit[id] .card[class] p {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  html body main section#confidence[id] .content-head[class] h2.two-tone-heading,
  html body main section#confidence[id] .content-head[class] h2.two-tone-heading * {
    font-size: 22px !important;
    line-height: 32px !important;
  }

  #footer .footer-links a,
  #footer .footer-bottom {
    font-size: 14px !important;
    line-height: 30px !important;
  }
}

/* Small-tablet map: a taller unified canvas keeps both heading lines above
   the network artwork at widths where neither phone nor desktop rules apply. */
@media (min-width: 621px) and (max-width: 820px) {
  #global-map .global-map-canvas {
    height: min(86vw, 680px);
  }

  #global-map .global-map-canvas > .global-map-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  #global-map .global-map-canvas > .global-map-media > img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
  }

  #global-map .global-map-canvas > .global-map-heading {
    top: clamp(16px, 3vw, 24px);
  }

  html body main #global-map .global-map-canvas > .global-map-heading .global-map-kicker {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  html body main #global-map .global-map-canvas > .global-map-heading strong {
    margin-top: 8px;
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
}

/* Anchor the hero promise to the bottom edge while the primary copy and CTA
   remain centred. The 48px desktop offset is twice the navigation's top air. */
#hero > .section-inner {
  min-height: 100vh;
  min-height: 100svh;
}

#hero .hero-approved-layout,
#hero .hero-approved-copy {
  position: static !important;
}

html body main #hero[id] .hero-approved-copy .brand-statement-hero {
  position: absolute !important;
  z-index: 3;
  right: auto;
  bottom: 48px;
  left: 50%;
  width: min(calc(100% - 48px), 1100px);
  max-width: none !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  white-space: normal;
}

@media (max-width: 900px) {
  html body main #hero[id] .hero-approved-copy .brand-statement-hero {
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px));
    width: calc(100% - 32px);
  }
}

/* Mobile global markets keeps the desktop artwork as one complete composition:
   heading, network and geography all scale inside the same taller canvas. */
@media (max-width: 620px) {
  #global-map .global-map-canvas {
    height: 82vw;
  }

  #global-map .global-map-canvas > .global-map-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  #global-map .global-map-canvas > .global-map-media > img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
  }

  #global-map .global-map-canvas > .global-map-heading {
    top: clamp(16px, 5vw, 24px);
  }

  html body main #global-map .global-map-canvas > .global-map-heading .global-map-kicker {
    font-size: clamp(18px, 5.4vw, 23px) !important;
    line-height: 1.1 !important;
  }

  html body main #global-map .global-map-canvas > .global-map-heading strong {
    margin-top: 7px;
    font-size: clamp(12px, 3.7vw, 16px) !important;
    line-height: 1.4 !important;
  }
}


/* Video treatment using the violet/lavender palette of the reference hero. */
#hero,
#confidence {
  box-shadow: 0 25px 80px rgba(41, 0, 89, .6) !important;
}

#hero .hero-section-video,
#confidence .confidence-section-video {
  background: linear-gradient(352deg, #290059 14.32%, #ead8ff 93.6%) !important;
}

#hero .hero-section-video {
  background: linear-gradient(352deg, #290059 14.32%, #cba7eb 93.6%) !important;
}

#hero .hero-section-video .section-video-poster,
#hero .hero-section-video.is-video-frame-ready video {
  opacity: .72 !important;
}

#hero .hero-section-video::before {
  background: linear-gradient(352deg, rgba(41, 0, 89, .64) 14.32%, rgba(190, 145, 226, .44) 93.6%) !important;
}

#hero .hero-section-video::after {
  background:
    radial-gradient(circle at 68% 36%, rgba(164, 90, 249, .26), transparent 52%),
    linear-gradient(180deg, rgba(200, 162, 235, .22) 0%, rgba(164, 90, 249, .08) 46%, rgba(41, 0, 89, .28) 100%) !important;
}

#confidence .confidence-section-video .section-video-poster,
#confidence .confidence-section-video.is-video-frame-ready video {
  opacity: .66 !important;
}

#confidence .confidence-section-video::before {
  background: linear-gradient(180deg, rgba(41, 0, 89, .7) 0%, rgba(84, 0, 180, .56) 52%, rgba(41, 0, 89, .76) 100%) !important;
}

#confidence .confidence-section-video::after {
  background:
    radial-gradient(circle at 72% 38%, rgba(202, 155, 255, .3), transparent 52%),
    linear-gradient(180deg, rgba(234, 216, 255, .08) 0%, rgba(164, 90, 249, .1) 48%, rgba(41, 0, 89, .24) 100%) !important;
}

html body main #hero[id] .hero-approved-copy .brand-statement-hero,
html body main #hero[id] .hero-approved-copy .brand-statement-hero * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Keep the approved map copy, but use the same heading/body hierarchy as the
   surrounding content sections. */
html body main #global-map .global-map-canvas > .global-map-heading .global-map-kicker {
  color: #141118 !important;
  -webkit-text-fill-color: #141118 !important;
  font-size: 44px !important;
  font-weight: 600 !important;
  line-height: 50px !important;
  letter-spacing: normal !important;
}

html body main #global-map .global-map-canvas > .global-map-heading .global-map-kicker em {
  color: #a45af9 !important;
  -webkit-text-fill-color: #a45af9 !important;
  font: inherit !important;
}

html body main #global-map .global-map-canvas > .global-map-heading strong {
  margin-top: 18px !important;
  color: #4d4658 !important;
  -webkit-text-fill-color: #4d4658 !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 30px !important;
  letter-spacing: normal !important;
}

html body footer#footer[id] {
  min-height: 420px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(114, 52, 191, .42), transparent 36%),
    linear-gradient(112deg, #230044 0%, #3b096e 48%, #230044 100%) !important;
  color: #fff !important;
}

html body footer#footer[id] .footer-inner {
  width: min(100%, 1190px) !important;
  min-height: 420px !important;
  margin: 0 auto !important;
  padding: 78px 24px 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#footer .footer-reference-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

#footer .footer-brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff !important;
  text-decoration: none;
}


/* The menu and footer share the same vector geometry; only wordmark fill differs. */
html body footer#footer[id] .footer-brand-lockup .footer-logo-reference {
  display: block !important;
  width: 170px !important;
  height: 58px !important;
  max-width: none !important;
  object-fit: contain;
}
@media (max-width: 900px) {
  html body footer#footer[id] .footer-brand-lockup .footer-logo-reference {
    width: 146.5517px !important;
    height: 50px !important;
  }
}

#footer .footer-brand-lockup .brand-symbol {
  display: block !important;
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px;
  filter: drop-shadow(0 0 12px rgba(164, 90, 249, .28));
}

#footer .footer-wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  color: #fff !important;
  line-height: 1;
}

#footer .footer-wordmark strong {
  color: #fff !important;
  font-family: Alexandria, sans-serif !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 36px !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
}

#footer .footer-wordmark > span {
  color: #fff !important;
  font-family: Alexandria, sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 22px !important;
  letter-spacing: 1.8px !important;
  text-transform: lowercase !important;
}

html body footer#footer[id] .footer-reference-layout .footer-slogan {
  margin: 48px 0 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  letter-spacing: 6.72px !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

#footer .footer-reference-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 48px;
  color: #fff;
  font-family: Alexandria, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  text-transform: uppercase;
}

#footer .footer-reference-bottom a {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase !important;
}

@media (max-width: 900px) {
  #hero .hero-section-video .section-video-poster,
  #hero .hero-section-video.is-video-frame-ready video,
  #confidence .confidence-section-video .section-video-poster,
  #confidence .confidence-section-video.is-video-frame-ready video {
    opacity: .72 !important;
  }

  html body main #global-map .global-map-canvas > .global-map-heading .global-map-kicker {
    font-size: 26px !important;
    line-height: 30px !important;
  }

  html body main #global-map .global-map-canvas > .global-map-heading strong {
    margin-top: 10px !important;
    font-size: 14px !important;
    line-height: 21px !important;
  }

  html body footer#footer[id],
  html body footer#footer[id] .footer-inner {
    min-height: 360px !important;
  }

  html body footer#footer[id] .footer-inner {
    padding: 64px 20px 52px !important;
  }

  #footer .footer-brand-lockup .brand-symbol {
    width: 50px !important;
    height: 50px !important;
    flex-basis: 50px;
  }

  #footer .footer-wordmark strong {
    font-size: 28px !important;
    line-height: 30px !important;
  }

  #footer .footer-wordmark > span {
    font-size: 15px !important;
    line-height: 19px !important;
  }

  html body footer#footer[id] .footer-reference-layout .footer-slogan {
    margin-top: 40px !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: 4.48px !important;
  }

  #footer .footer-reference-bottom {
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 40px;
    font-size: 14px;
    line-height: 22px;
  }
}

/* Multi-modal transport — match the supplied ALVA reference. */
html body main section#fit[id] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #290059 !important;
  box-shadow: none !important;
}

html body main section#fit[id]::before,
html body main section#fit[id]::after {
  content: "" !important;
  position: absolute;
  z-index: -1;
  display: block !important;
  border-radius: 50%;
  background: radial-gradient(51.24% 51.24% at 50% 50%, rgba(164, 90, 249, .5) 0%, rgba(164, 90, 249, .5) 46.88%, rgba(164, 90, 249, 0) 100%) !important;
  pointer-events: none;
}

html body main section#fit[id]::before {
  width: min(68vw, 875px);
  aspect-ratio: 1;
  right: -35%;
  bottom: -50%;
}

html body main section#fit[id]::after {
  width: min(60vw, 771px);
  aspect-ratio: 1;
  left: -17%;
  bottom: -25%;
}

html body main section#fit[id] > .section-inner {
  width: min(calc(100% - 60px), 1220px) !important;
  margin-inline: auto !important;
  padding: 80px 0 !important;
}

html body main section#fit[id] .content-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin: 0 15px 70px !important;
}

html body main section#fit[id] .content-head h2,
html body main section#fit[id] .content-head .lead {
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
}

html body main section#fit[id] .content-head[class] h2.two-tone-heading,
html body main section#fit[id] .content-head[class] h2.two-tone-heading * {
  color: #ca9bff !important;
  font-style: normal !important;
  display: inline !important;
  width: auto !important;
  background: linear-gradient(180deg, #f4dcff 0%, #d5adff 42%, #a979d8 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html body main section#fit[id] .cards.four {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 48px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
}

html body main section#fit[id] .cards.four .card {
  position: relative;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr !important;
  align-items: stretch !important;
  column-gap: 28px !important;
  row-gap: 0 !important;
  min-height: 256px !important;
  margin: 0 !important;
  padding: 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(35, 15, 57, .32) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

html body main section#fit[id] .cards.four .card::before {
  content: none !important;
  display: none !important;
}

html body main section#fit[id] .cards.four .card::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
}

html body main section#fit[id] .cards.four .fit-icon-rail {
  position: relative !important;
  z-index: 3;
  inset: auto !important;
  margin: 0 !important;
  display: grid !important;
  grid-column: 1;
  grid-row: 1 / 3;
  place-items: center !important;
  width: 44px !important;
  min-height: 200px !important;
  background: linear-gradient(180deg, #a45af9 0%, #7c21df 54%, #5400b4 100%) !important;
  box-shadow: none !important;
}

html body main section#fit[id] .cards.four .fit-icon-rail::before,
html body main section#fit[id] .cards.four .fit-icon-rail::after {
  content: none !important;
  display: none !important;
}

html body main section#fit[id] .cards.four .fit-icon-symbol {
  width: 20px !important;
  height: 20px !important;
  color: #fff !important;
  filter: none !important;
}

html body main section#fit[id] .cards.four .card h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 20px !important;
  padding: 0 0 20px !important;
  border-bottom: 1px solid rgba(153, 137, 172, .55) !important;
  color: #fff !important;
  font-style: normal !important;
  background: linear-gradient(180deg, #fff 0%, #fff 45%, #d8c9e5 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html body main section#fit[id] .cards.four .card p {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #9989ac !important;
  -webkit-text-fill-color: #9989ac !important;
}

html body main section#fit[id] .cards.four .card:hover {
  border: 0 !important;
  background: rgba(35, 15, 57, .32) !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 900px) {
  html body main section#fit[id] > .section-inner {
    width: min(calc(100% - 40px), 860px) !important;
    padding: 60px 0 64px !important;
  }

  html body main section#fit[id] .content-head {
    margin: 0 0 44px !important;
  }

  html body main section#fit[id] .cards.four {
    gap: 24px !important;
  }

  html body main section#fit[id] .cards.four .card {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: 24px !important;
  }

  html body main section#fit[id] .cards.four .fit-icon-rail {
    width: 42px !important;
    min-height: 190px !important;
  }
}

@media (max-width: 620px) {
  html body main section#fit[id] .cards.four {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  html body main section#fit[id] .cards.four .card {
    min-height: 190px !important;
    padding: 22px !important;
  }

  html body main section#fit[id] .cards.four .fit-icon-symbol {
    width: 22px !important;
    height: 22px !important;
  }

  html body main section#fit[id] .cards.four .card h3 {
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
  }

  html body main section#fit[id] .cards.four .card p {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Header lockup from alva-logistics.com: exact 170 × 58 vector geometry. */
html body .site-header .brand-symbol-link {
  display: inline-flex !important;
  align-items: center !important;
  width: 170px !important;
  height: 58px !important;
  min-width: 170px !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body .site-header .brand-logo-reference {
  display: block !important;
  width: 170px !important;
  height: 58px !important;
  max-width: none !important;
  object-fit: contain;
  filter: drop-shadow(0 7px 14px rgba(70, 58, 85, .14));
}

/* Match the reference hero slogan's type proportions. */
html body main #hero[id] .hero-approved-copy .brand-statement-hero,
html body main #hero[id] .hero-approved-copy .brand-statement-hero * {
  font-family: Alexandria, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  letter-spacing: 6.72px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

html body main #hero[id] .hero-approved-copy .brand-statement-hero {
  width: auto !important;
  max-width: calc(100% - 48px) !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  html body main #hero[id] .hero-approved-copy .brand-statement-hero,
  html body main #hero[id] .hero-approved-copy .brand-statement-hero * {
    font-size: 16px !important;
    line-height: 16px !important;
    letter-spacing: 4.48px !important;
  }

  html body main #hero[id] .hero-approved-copy .brand-statement-hero {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    white-space: normal !important;
  }
}


/* Text styles verified against the visible alva-logistics.com page, 2026-09-09.
   Paint each gradient once across its complete heading. Elementor defers some
   of these backgrounds until scroll, so off-screen computed styles are misleading. */
:root {
  --alva-text-purple-heading: linear-gradient(90deg, #5400b4 -.05%, #290059 101.08%);
  --alva-text-purple-lead: linear-gradient(90deg, #5400b4 .35%, #290059 100%);
  --alva-text-purple-service: linear-gradient(90deg, #a45af9 .08%, #5400b4 99.92%);
  --alva-text-lavender-heading: linear-gradient(90deg, #efe1ff .08%, #a45af9 99.92%);
  --alva-text-white-transport: linear-gradient(91deg, #fff -.22%, #ca9bff 99.85%);
  --alva-text-white-slogan: linear-gradient(90deg, #fff .1%, #ca9bff 100.1%);
  --alva-text-purple-markets: linear-gradient(90deg, #290059 .08%, #5400b4 99.92%);
}

html body main section#capabilities[id] .content-head[class] h2.two-tone-heading {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  white-space: normal !important;
  color: #5400b4 !important;
  background: var(--alva-text-purple-heading) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html body main section#capabilities[id] .content-head[class] .lead {
  color: #5400b4 !important;
  background: var(--alva-text-purple-lead) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html body main section#capabilities[id] .capability-panel-copy[class] h3,
html body main section#audiences[id] .capability-panel-copy[class] h3 {
  color: #a45af9 !important;
  background: var(--alva-text-purple-service) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: normal !important;
}

/* Both dark sections use the reference's light, horizontal heading gradient. */
html body main section#fit[id] .content-head[class] h2.two-tone-heading,
html body main section#confidence[id] .content-head[class] h2.two-tone-heading {
  display: block !important;
  color: #efe1ff !important;
  background: var(--alva-text-lavender-heading) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-style: normal !important;
}
html body main section#fit[id] .content-head[class] h2.two-tone-heading {
  width: 100% !important;
}
html body main section#confidence[id] .content-head[class] h2.two-tone-heading {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background-image: linear-gradient(90deg, #f8efff 0%, #dfc2ff 48%, #c88aff 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
/* The reference paints the transport gradient over the text span, not its
   full-width divider. Keep the divider and card geometry independent. */
html body main section#fit[id] .cards.four .card[class] h3 .transport-title-text {
  color: #fff !important;
  background: var(--alva-text-white-transport) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Apply the original market-heading palette to the current regional wording. */
html body main #global-map .global-map-canvas > .global-map-heading .global-map-kicker,
html body main #global-map .global-map-canvas > .global-map-heading strong {
  color: #290059 !important;
  background: var(--alva-text-purple-markets) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 38px !important;
  font-weight: 600 !important;
  line-height: 38px !important;
  letter-spacing: normal !important;
}

/* Custom request: reduce the current slogan tracking and header logo by 20%. */
html body main #hero[id] .hero-approved-copy .brand-statement-hero,
html body main #hero[id] .hero-approved-copy .brand-statement-hero *,
html body footer#footer[id] .footer-reference-layout .footer-slogan {
  letter-spacing: 5.376px !important;
}
html body main #hero[id] .hero-approved-copy .brand-statement-hero > span,
html body footer#footer[id] .footer-reference-layout .footer-slogan {
  color: #fff !important;
  background: var(--alva-text-white-slogan) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html body .site-header .brand-symbol-link,
html body .site-header .brand-logo-reference {
  width: 136px !important;
  height: 46.4px !important;
}
html body .site-header .brand-symbol-link {
  min-width: 136px !important;
}

html body .site-header .brand-logo-picture {
  display: block;
  width: 136px;
  height: 46.4px;
}


/* Reference calls to action use Arial; content copy remains Alexandria. */
html body main #hero[id] .actions .button,
html body main #hero[id] .actions .button *,
html body main #contact[id] .form-footer .button,
html body main #contact[id] .form-footer .button * {
  font-family: Arial, sans-serif !important;
}
html body footer#footer[id] .footer-reference-layout .footer-reference-bottom,
html body footer#footer[id] .footer-reference-layout .footer-reference-bottom * {
  line-height: 30px !important;
  text-transform: uppercase !important;
}

/* Navigation and form text use the original brand palette as well. */
html body .site-header #primary-nav a {
  color: #5400b4 !important;
  background: linear-gradient(90deg, #5400b4 0%, #290059 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html body main section#contact[id] .contact[class] :is(input, textarea, select) {
  color: #9989ac !important;
  -webkit-text-fill-color: currentColor !important;
}
html body main section#contact[id] .contact[class] :is(input, textarea)::placeholder {
  color: #9989ac !important;
  -webkit-text-fill-color: currentColor !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
html body main section#contact[id] .contact[class] :is(input, textarea, select):is(:hover, :focus),
html body main section#contact[id] .contact[class] :is(input, textarea):is(:hover, :focus)::placeholder {
  color: #5400b4 !important;
  -webkit-text-fill-color: currentColor !important;
}

@media (max-width: 900px) {
  html body main #hero[id] .hero-approved-copy .brand-statement-hero,
  html body main #hero[id] .hero-approved-copy .brand-statement-hero *,
  html body footer#footer[id] .footer-reference-layout .footer-slogan {
    letter-spacing: 3.584px !important;
  }
  html body main #global-map .global-map-canvas > .global-map-heading .global-map-kicker,
  html body main #global-map .global-map-canvas > .global-map-heading strong {
    font-size: 24px !important;
    line-height: 30px !important;
  }
}

/* ALVA 3D evolution variants — start.
   New variants retain the complete rendered subject. Legacy square masks
   and image-specific overlays remain on the original first option. */
:is(#capabilities,#audiences) .capability-panel .capability-collage--variants .capability-collage-visual--3d[data-collage-option] {
  position: absolute;
  inset: 0;
  padding: 0;
  isolation: auto;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: none;
  animation: none;
  transform: none;
  mix-blend-mode: normal;
}
:is(#capabilities,#audiences) .capability-panel .capability-collage--variants .capability-collage-visual--3d[data-collage-option]::before,
:is(#capabilities,#audiences) .capability-panel .capability-collage--variants .capability-collage-visual--3d[data-collage-option]::after {
  content: none;
  display: none;
}
:is(#capabilities,#audiences) .capability-panel .capability-collage--variants .capability-collage-visual--3d[data-collage-option] .capability-collage-image {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  transform: none;
  filter: none;
  mix-blend-mode: normal;
  /* Feather only the outer edge; do not split the subject into tiles. */
  -webkit-mask:
    linear-gradient(to right, transparent, rgba(0,0,0,.65) 4%, #000 9%, #000 91%, rgba(0,0,0,.65) 96%, transparent),
    linear-gradient(to bottom, transparent, rgba(0,0,0,.65) 4%, #000 9%, #000 91%, rgba(0,0,0,.65) 96%, transparent);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right, transparent, rgba(0,0,0,.65) 4%, #000 9%, #000 91%, rgba(0,0,0,.65) 96%, transparent),
    linear-gradient(to bottom, transparent, rgba(0,0,0,.65) 4%, #000 9%, #000 91%, rgba(0,0,0,.65) 96%, transparent);
  mask-composite: intersect;
}
:is(#capabilities,#audiences) .capability-panel .capability-collage--variants:has(.capability-collage-visual--3d.is-selected) .capability-collage-corners {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
/* ALVA 3D evolution variants — end. */

/* Blend white image backdrops into the section without isolating them in
   transparent stacking groups. Framed collages keep their own isolation. */
:is(#capabilities, #audiences) .capabilities-scroll-scene,
:is(#capabilities, #audiences) .capabilities-stage,
:is(#capabilities, #audiences) .section-inner,
:is(#capabilities, #audiences) .capabilities-content {
  isolation: auto !important;
  z-index: auto !important;
}
:is(#capabilities, #audiences) .capabilities-layout {
  will-change: auto !important;
}
#capabilities .capability-panel:first-child,
#capabilities .capability-panel:first-child .capability-panel-media,
#audiences .capability-panel:is(:nth-child(2), :nth-child(4)),
#audiences .capability-panel:is(:nth-child(2), :nth-child(4)) .capability-panel-media {
  isolation: auto !important;
  z-index: auto !important;
}
#capabilities .capability-panel:first-child .capability-collage,
#audiences .capability-panel:is(:nth-child(2), :nth-child(4)) .capability-collage {
  mix-blend-mode: multiply;
}

/* The complete Risk Management truck has its own white breathing room. */
#audiences .capability-panel:nth-child(4) .capability-collage-visual[data-collage-option="2"] .capability-collage-image {
  -webkit-mask: none;
  mask: none;
}

/* Mobile hero header: white wordmark and a clear three-line menu. */
@media (max-width: 900px) {
  html body .site-header .header-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  html body .site-header .brand-logo-picture,
  html body .site-header .brand-logo-reference {
    display: block !important;
    width: 136px !important;
    height: 46.4px !important;
  }

  html body .site-header .menu-toggle {
    display: flex !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin-left: auto !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body .site-header .menu-toggle .menu-line {
    display: block !important;
    width: 30px !important;
    height: 3px !important;
    flex: 0 0 3px !important;
    opacity: 1;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 0 1px 7px rgba(41, 0, 89, .32);
  }

  html body .site-header.menu-open .menu-toggle .menu-line {
    background: #1f1c23 !important;
    box-shadow: none;
  }
}

/* Global Network Coordination: free-standing 3D scene without a card edge. */
#audiences .capability-panel:nth-child(2) .capability-collage,
#audiences .capability-panel:nth-child(2) .capability-collage-visual,
#audiences .capability-panel:nth-child(2) .capability-collage-image {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
}

#audiences .capability-panel:nth-child(2) .capability-collage {
  mix-blend-mode: normal !important;
  overflow: visible !important;
}

/* Risk Management: isolated 3D truck with no visible image backdrop. */
#audiences .capability-panel:nth-child(4) .capability-collage,
#audiences .capability-panel:nth-child(4) .capability-collage-visual,
#audiences .capability-panel:nth-child(4) .capability-collage-image {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
}

#audiences .capability-panel:nth-child(4) .capability-collage {
  mix-blend-mode: normal !important;
  overflow: visible !important;
}

/* Risk Management: use the real SVG wordmark so ALVA letter geometry stays
   identical to the approved logo at every responsive size. */
#audiences .risk-management-visual {
  position: absolute;
  isolation: isolate;
}

#audiences .risk-management-visual .risk-alva-wordmark {
  position: absolute;
  z-index: 3;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
  transform-origin: center;
  filter: none;
}

#audiences .risk-management-visual .risk-alva-wordmark--trailer {
  left: 13.2%;
  top: 37.6%;
  width: 26.2%;
  transform-origin: 100% 50%;
  transform: perspective(420px) rotateY(-27deg) rotateZ(3.1deg) skewY(.7deg) scaleX(.98);
}

#audiences .risk-management-visual .risk-alva-wordmark--front {
  left: 79.35%;
  top: 59.15%;
  width: 9.8%;
  transform-origin: 50% 50%;
  transform: perspective(500px) rotateY(-3deg) rotateZ(.15deg);
}

#audiences .risk-management-visual .capability-collage-image {
  filter: drop-shadow(0 14px 18px rgba(41, 0, 89, .2)) !important;
}

/* Confidence statement: the brand name is the only saturated accent, while
   the taller section gives the video and multiline copy more breathing room. */
html body main section#confidence[id] > .section-inner {
  padding-top: clamp(290px, 28vw, 440px) !important;
  padding-bottom: clamp(290px, 28vw, 440px) !important;
}

html body main section#confidence[id] .content-head h2 .confidence-brand {
  display: inline !important;
  color: #fff !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: #fff !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

@media (max-width: 620px) {
  html body main section#confidence[id] > .section-inner {
    min-height: 520px;
    padding-top: 164px !important;
    padding-bottom: 164px !important;
  }
}

/* Market heading: reproduce the reference's black/violet two-colour split. */
html body main #global-map .global-map-heading .global-map-kicker {
  background: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

html body main #global-map .global-map-heading .markets-one-group,
html body main #global-map .global-map-heading .markets-divider {
  color: #1f1c23 !important;
  background: none !important;
  -webkit-text-fill-color: #1f1c23 !important;
}

html body main #global-map .global-map-heading .markets-multiple {
  color: #a45af9 !important;
  background: var(--alva-text-purple-service) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Cost Optimisation: repeat the exact source render above the square mask and
   reveal only the foreground convoy region. Because both layers use identical
   pixels, perspective and scale meet without a visible seam. */
#audiences .capability-panel:nth-child(3) .capability-collage,
#audiences .capability-panel:nth-child(3) .capability-collage-visual {
  overflow: visible !important;
}

#audiences .capability-panel:nth-child(3) .cost-optimisation-foreground-truck {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  filter: none;
  -webkit-mask: none;
  mask: none;
  -webkit-clip-path: polygon(51% 50%, 69% 50%, 80% 57%, 90% 66%, 97% 76%, 100% 89%, 100% 100%, 47% 100%, 47% 76%);
  clip-path: polygon(51% 50%, 69% 50%, 80% 57%, 90% 66%, 97% 76%, 100% 89%, 100% 100%, 47% 100%, 47% 76%);
  transform: translateZ(0);
}

/* Hero header: keep the symbol violet while the ALVA logistics wordmark and
   Contact link use the light treatment over the violet video gradient. */
html body .site-header #primary-nav a {
  color: #fff !important;
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 12px rgba(41, 0, 89, .22);
}

/* Carrier And Vendor Management: the square composition keeps the complete
   studio render, while a genuinely transparent truck cutout sits above every
   mask. This lets the vehicle cross the square edges without a rectangular
   image fragment becoming visible. */
#audiences .capability-panel:first-child .capability-collage {
  left: 3%;
  overflow: visible !important;
}

#audiences .capability-panel:first-child .capability-collage-visual {
  overflow: visible !important;
}

#audiences .capability-panel:first-child .carrier-vendor-foreground-truck {
  position: absolute;
  z-index: 8;
  top: 8%;
  right: auto;
  bottom: auto;
  left: 32%;
  display: block;
  width: 72%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  filter: drop-shadow(0 20px 24px rgba(62, 28, 103, .24));
  -webkit-clip-path: none;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
  transform: translateZ(0);
}

@media (max-width: 620px) {
  #audiences .capability-panel:first-child .capability-collage {
    left: 1.5%;
  }

  #audiences .capability-panel:first-child .carrier-vendor-foreground-truck {
    top: 10%;
    left: 28%;
    width: 78%;
  }
}

/* Strategic Planning: retain the five-square city composition as the masked
   background, then let a transparent freight-train cutout emerge from the
   lower-left square into the foreground. */
#capabilities .capability-panel:nth-child(3) .capability-collage,
#capabilities .capability-panel:nth-child(3) .capability-collage-visual {
  overflow: visible !important;
}

#capabilities .capability-panel:nth-child(3) .strategic-planning-foreground-train {
  position: absolute;
  z-index: 20;
  top: 26.4%;
  left: 9.57%;
  display: block;
  width: 88.28%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  filter: drop-shadow(0 16px 20px rgba(41, 0, 89, .2));
  -webkit-clip-path: none;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
  transform: translateZ(0);
}

@media (max-width: 620px) {
  #capabilities .capability-panel:nth-child(3) .strategic-planning-foreground-train {
    top: 26.4%;
    left: 9.57%;
    width: 88.28%;
  }
}