* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;

  font-family: var(--ao-font);

  background: var(--ao-white);
  color: var(--ao-blue);

  overflow-x: hidden;
}
a {
color: inherit;
  text-decoration: none;
}
button {
font: inherit;
}
.why-ao-content {
display: contents;
}
.why-ao-preview {
display: none;
}
.hero-slide > picture {
position: absolute; inset: 0; pointer-events: none;
}
.hero {
width: 100%;
  height: 760px;

  position: relative;

  overflow: hidden;

  background: var(--ao-blue);
}
.hero-track {
width: 100%;
  height: 100%;

  position: relative;
}
.hero-slide {
width: 100%;
  height: 100%;

  position: absolute;
  inset: 0;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 600ms ease,
    visibility 600ms ease;
}
.hero-slide.active {
opacity: 1;
  visibility: visible;

  z-index: 1;
}
.hero-image {
width: 100%;
  height: 100%;

  position: absolute;
  inset: 0;

  display: block;

  object-fit: cover;
  object-position: center;
}
.hero-overlay {
position: absolute;
  inset: 0;

  background: rgba(16, 42, 67, 0.46);
}
.hero-content {
width: 920px;

  position: absolute;
  left: 50%;

  z-index: 2;

  transform: translateX(-50%);

  text-align: center;
}
.hero-content-high {
top: 386px;
}
.hero-content-low {
top: 448px;
}
.hero-content h1 {
margin: 0;

  color: var(--ao-white);

  font-size: 58px;
  font-weight: 900;
  line-height: 62px;

  letter-spacing: -0.02em;

  text-align: center;
}
.hero-pagination {
width: 98px;
  height: 20px;

  position: absolute;

  left: 50%;
  bottom: 46px;

  z-index: 10;

  display: flex;
  align-items: center;

  gap: 12px;

  transform: translateX(-50%);
}
.trust-bridge {
width: 100%;
  height: 352px;

  position: relative;

  background: var(--ao-white);

  color: var(--ao-blue);
}
.trust-copy {
width: 1040px;
  max-width: calc(100% - 48px);
  height: 108px;

  margin: 0;

  position: absolute;

  top: 46px;
  left: 50%;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--ao-blue);

  font-size: 20px;
  font-weight: 600;
  line-height: 35px;

  text-align: center;
}
.trust-title {
width: 1000px;
  max-width: calc(100% - 48px);
  height: 52px;

  margin: 0;

  position: absolute;

  top: 192px;
  left: 50%;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--ao-blue);

  font-size: 40px;
  font-weight: 900;
  line-height: 48px;

  letter-spacing: -0.015em;

  text-align: center;
}
.partner-marquee {
width: 100%;
  height: 176px;

  position: relative;

  overflow: hidden;

  background: var(--ao-white);
}
.partner-marquee-window {
width: 100%;
  height: 112px;

  position: absolute;

  top: 32px;
  left: 0;

  overflow: hidden;
}
.partner-marquee-track {
width: 7666px;
  height: 112px;

  position: absolute;

  top: 0;
  left: 0;

  display: flex;

  will-change: transform;

  animation:
    partner-marquee-scroll
    42s
    linear
    1s
    infinite;
}
.partner-logo-set {
width: 3833px;
  height: 112px;

  position: relative;

  flex: 0 0 3833px;
}
.partner-logo-slot {
width: 210px;
  height: 76px;

  position: absolute;

  top: 18px;

  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-logo-slot img {
width: 190px;
  height: 68px;

  display: block;

  object-fit: contain;

  opacity: 0.92;
}
.partner-logo-slot:nth-child(1) {
left: 0;
}
.partner-logo-slot:nth-child(2) {
left: 243px;
}
.partner-logo-slot:nth-child(3) {
left: 430px;
}
.partner-logo-slot:nth-child(4) {
left: 653px;
}
.partner-logo-slot:nth-child(5) {
left: 933px;
}
.partner-logo-slot:nth-child(6) {
left: 1213px;
}
.partner-logo-slot:nth-child(7) {
left: 1493px;
}
.partner-logo-slot:nth-child(8) {
left: 1728.5px;
}
.partner-logo-slot:nth-child(9) {
left: 1964px;
}
.partner-logo-slot:nth-child(10) {
left: 2183px;
}
.partner-logo-slot:nth-child(11) {
left: 2402px;
}
.partner-logo-slot:nth-child(12) {
left: 2630px;
}
.partner-logo-slot:nth-child(13) {
left: 2797px;
}
.partner-logo-slot:nth-child(14) {
left: 3006px;
}
.partner-logo-slot:nth-child(15) {
left: 3261px;
}
.partner-logo-slot:nth-child(16) {
left: 3470px;
}
.partner-logo-slot:nth-child(17) {
left: 3624px;
}
@keyframes partner-marquee-scroll {
from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-1 * var(--partner-repeat-distance, 3833px)), 0, 0);
  }
}
@media (min-width: 1201px) {
.partner-marquee {
height: 148px; --partner-repeat-distance: 4624px;
}
.partner-marquee-window {
top: 18px;
}
.partner-marquee-track {
width: 9248px;
}
.partner-logo-set {
width: 4624px; flex-basis: 4624px; display: flex; gap: 32px; padding-right: 32px;
}
.partner-marquee .partner-logo-slot:nth-child(n) {
position: relative; inset: auto; flex: 0 0 240px; width: 240px; height: 112px;
}
.partner-logo-slot img {
flex-shrink: 0; width: 228px; height: 84px;
}

}
.services-section {
width: 100%;
  height: 750px;

  position: relative;

  overflow: hidden;

  background: var(--ao-orange);
}
.services-motif {
position: absolute;

  display: block;

  object-fit: contain;

  pointer-events: none;
  user-select: none;
}
.services-motif-top {
width: 520px;
  height: 379px;

  top: -60px;
  right: -118px;

  opacity: 0.105;
}
.services-motif-bottom {
width: 305px;
  height: 222px;

  left: -110px;
  bottom: -27px;

  opacity: 0.055;
}
.services-title {
width: 1000px;
  height: 72px;

  margin: 0;

  position: absolute;

  top: 64px;
  left: 50%;

  z-index: 2;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--ao-white);

  font-size: 58px;
  font-weight: 900;
  line-height: 68px;

  text-align: center;
}
.services-grid {
width: 1288px;
  height: 496px;

  position: absolute;

  top: 196px;
  left: 50%;

  z-index: 2;

  transform: translateX(-50%);

  display: grid;

  grid-template-columns:
    repeat(3, 414px);

  grid-template-rows:
    repeat(2, 236px);

  column-gap: 23px;
  row-gap: 24px;
}
.service-card {
width: 414px;
  height: 236px;

  position: relative;

  display: block;

  overflow: hidden;

  border-radius: 33px;

  cursor: pointer;
}
.service-card-visual {
position: absolute;

  inset: 8px;

  overflow: hidden;

  border-radius: 28px;

  transition:
    inset var(--ao-hover-normal) ease-out,
    border-radius var(--ao-hover-normal) ease-out;
}
.service-card:hover .service-card-visual,
.service-card:focus-visible .service-card-visual {
inset: 2px;

  border-radius: 31px;
}
.service-card-image {
width: 100%;
  height: 100%;

  position: absolute;
  inset: 0;

  display: block;

  object-fit: cover;

  transition:
    transform var(--ao-hover-normal) ease-out;
}
.service-card:hover .service-card-image,
.service-card:focus-visible .service-card-image {
transform: scale(1.01);
}
.service-card-tint {
position: absolute;
  inset: 0;

  background: rgba(252, 247, 240, 0.17);

  pointer-events: none;
}
.service-card-gradient {
position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(16, 42, 67, 0.14) 0%,
      rgba(16, 42, 67, 0.10) 45%,
      rgba(16, 42, 67, 0.44) 100%
    );

  pointer-events: none;
}
.service-number {
width: 48px;
  height: 20px;

  position: absolute;

  top: 18px;
  left: 24px;

  display: flex;
  align-items: center;

  color: var(--ao-white);

  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
}
.service-title {
width: calc(100% - 48px);

  margin: 0;

  position: absolute;

  left: 24px;
  bottom: 18px;

  color: var(--ao-white);

  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;

  text-align: left;
}
.service-card:focus-visible {
outline: 3px solid var(--ao-white);
  outline-offset: 2px;
}
.testimonials {
width: 100%;
  height: 574px;

  position: relative;

  overflow: hidden;

  background: var(--ao-white);
  color: var(--ao-blue);
}
.testimonial-track {
width: 100%;
  height: 100%;

  position: relative;
}
.testimonial-slide {
width: 100%;
  height: 100%;

  position: absolute;
  inset: 0;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 240ms ease-out,
    visibility 240ms ease-out;
}
.testimonial-slide.active {
opacity: 1;
  visibility: visible;

  z-index: 1;
  pointer-events: auto;
}
.testimonial-quote {
width: 1120px;
  max-width: calc(100% - 140px);
  height: 220px;

  margin: 0;

  position: absolute;

  top: 28px;
  left: 50%;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--ao-blue);

  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;

  text-align: center;
}
.testimonial-highlight {
color: var(--ao-orange);
}
.testimonial-quote > p {
margin: 0;
  width: 100%;
}
.testimonial-portrait {
width: 92px;
  height: 92px;

  position: absolute;

  top: 300px;
  left: 50%;

  transform: translateX(-50%);

  display: block;

  object-fit: cover;

  outline: 2px solid #dee5eb;
  outline-offset: -2px;
  border-radius: 50%;
}
.testimonial-name {
width: 720px;
  max-width: calc(100% - 100px);
  height: 28px;

  margin: 0;

  position: absolute;

  top: 408px;
  left: 50%;

  transform: translateX(-50%);

  color: var(--ao-blue);

  font-size: 17px;
  font-weight: 700;
  line-height: 26px;

  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonial-company {
width: 900px;
  max-width: calc(100% - 100px);
  height: 26px;

  margin: 0;

  position: absolute;

  top: 438px;
  left: 50%;

  transform: translateX(-50%);

  color: var(--ao-text-muted);

  font-size: 14px;
  font-weight: 400;
  line-height: 22px;

  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonial-pagination {
width: 98px;
  height: 20px;

  position: absolute;

  top: 508px;
  left: 50%;

  z-index: 10;

  transform: translateX(-50%);

  display: flex;
  align-items: center;

  gap: 12px;
}
@media (prefers-reduced-motion: reduce) {
.partner-marquee-track {
animation-play-state: paused;
}
.service-card-visual,
.service-card-image,
.testimonial-slide {
transition: none;
}

}
@media (max-width: 1200px) {
.services-section {
height: auto;

    padding:
      64px
      36px
      58px;
}
.services-title {
width: calc(100% - 72px);
    height: auto;

    position: relative;

    top: auto;
    left: auto;

    margin: 0 auto 52px;

    transform: none;

    font-size: 50px;
    line-height: 1.1;
}
.services-grid {
width: min(852px, 100%);
    height: auto;

    position: relative;

    top: auto;
    left: auto;

    margin: 0 auto;

    transform: none;

    grid-template-columns:
      repeat(2, minmax(0, 414px));

    grid-template-rows: auto;

    justify-content: center;
}
.testimonial-quote {
width: calc(100% - 220px);
}

}
@media (max-width: 950px) {
.hero {
height: calc(100vh - var(--header-height));

    min-height: 620px;
    max-height: 760px;
}
.hero-content,
.hero-content-high,
.hero-content-low {
width: calc(100% - 120px);

    top: 50%;

    transform:
      translate(-50%, -55%);
}
.hero-content h1 {
font-size: clamp(38px, 7vw, 58px);
    line-height: 1.06;
}
.trust-bridge {
height: auto;

    padding:
      52px
      48px
      46px;
}
.trust-copy,
.trust-title {
width: auto;
    height: auto;

    position: static;

    transform: none;
}
.trust-copy {
max-width: 900px;

    margin: 0 auto;

    display: block;

    font-size: 18px;
    line-height: 31px;

    text-align: center;
}
.trust-title {
margin: 34px auto 0;

    display: block;

    font-size: 34px;
    line-height: 42px;

    text-align: center;
}
.services-section {
padding:
      56px
      28px
      52px;
}
.services-title {
width: 100%;

    margin-bottom: 42px;

    font-size: 42px;
}
.services-grid {
width: min(620px, 100%);

    grid-template-columns: 1fr;
}
.service-card {
width: 100%;
    max-width: 414px;

    margin: 0 auto;
}
.testimonials {
height: 610px;
}
.testimonial-quote {
width: calc(100% - 140px);
    height: 270px;

    top: 30px;

    font-size: 24px;
    line-height: 36px;
}
.testimonial-portrait {
top: 330px;
}
.testimonial-name {
width: calc(100% - 100px);

    top: 438px;
}
.testimonial-company {
width: calc(100% - 100px);

    top: 468px;
}
.testimonial-pagination {
top: 548px;
}

}
@media (max-width: 600px) {
:root {
--header-height: 66px;
}
.hero {
min-height: 600px;
}
.hero-content,
.hero-content-high,
.hero-content-low {
width: calc(100% - 64px);
}
.hero-content h1 {
font-size: 36px;
    line-height: 1.08;
}
.hero-content h1 br {
display: none;
}
.trust-bridge {
padding:
      42px
      24px
      40px;
}
.trust-copy {
font-size: 16px;
    line-height: 28px;
}
.trust-title {
margin-top: 30px;

    font-size: 30px;
    line-height: 37px;
}
.services-section {
padding:
      48px
      18px
      46px;
}
.services-title {
margin-bottom: 34px;

    font-size: 34px;
    line-height: 1.08;
}
.services-grid {
row-gap: 16px;
}
.service-card {
width: 100%;
    height: 220px;
}
.service-title {
font-size: 22px;
}
.services-motif-top {
right: -250px;
}
.testimonials {
height: 650px;
}
.testimonial-quote {
width: calc(100% - 72px);
    height: 330px;

    top: 20px;

    font-size: 20px;
    line-height: 30px;
}
.testimonial-portrait {
width: 82px;
    height: 82px;

    top: 370px;
}
.testimonial-name {
width: calc(100% - 50px);

    top: 468px;

    font-size: 16px;
}
.testimonial-company {
width: calc(100% - 50px);

    top: 500px;

    font-size: 13px;
}
.testimonial-pagination {
top: 590px;
}

}
@media (max-width: 950px) {
.testimonials {
height: auto;
    min-height: 610px;
    padding: 30px 0 42px;
}
.testimonial-track {
display: grid;
    height: auto;
}
.testimonial-slide {
grid-area: 1 / 1;
    position: relative;
    inset: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.testimonial-quote,
.testimonial-portrait,
.testimonial-name,
.testimonial-company {
position: static;
    transform: none;
}
.testimonial-quote {
height: auto;
    min-height: 270px;
}
.testimonial-portrait {
flex-shrink: 0;
    margin-top: 30px;
}
.testimonial-name {
height: auto;
    min-height: 28px;
    margin-top: 16px;
}
.testimonial-company {
height: auto;
    min-height: 26px;
    margin-top: 2px;
}
.testimonial-pagination {
position: relative;
    top: auto;
    margin-top: 54px;
}

}
@media (max-width: 600px) {
.testimonials {
min-height: 650px;
    padding-top: 20px;
    padding-bottom: 40px;
}
.testimonial-quote {
max-width: calc(100% - 72px);
    min-height: 330px;
}
.testimonial-portrait {
margin-top: 20px;
}
.testimonial-name,
.testimonial-company {
max-width: calc(100% - 50px);
}
.testimonial-pagination {
margin-top: 64px;
}

}
.selected-projects {
width: 100%;
  height: 670px;
  padding: 44px 76px 23px;
  background: var(--ao-light-blue);
  color: var(--ao-blue);
}
.selected-projects-inner {
max-width: 1288px;
  margin: 0 auto;
}
.selected-projects-header {
height: 105px;
  position: relative;
  border-bottom: 1px solid #e0e8ed;
}
.selected-projects-eyebrow {
position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 240px;
  height: 20px;
  color: var(--ao-orange);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}
.selected-projects-header h2 {
position: absolute;
  top: 28px;
  left: 0;
  width: 760px;
  height: 64px;
  margin: 0;
  font-size: 48px;
  font-weight: 900;
  line-height: 58px;
}
.selected-project-row {
display: block;
  position: relative;
  height: 166px;
  border-bottom: 1px solid #e0e8ed;
}
.selected-project-row:last-child {
border-bottom: 0;
}
.selected-project-row p,
.selected-project-row h3 {
margin: 0;
}
.selected-project-number {
position: absolute;
  top: 57px;
  left: 0;
  width: 70px;
  height: 38px;
  color: var(--ao-orange);
  font-size: 28px;
  font-weight: 900;
  line-height: 34px;
}
.selected-project-identity {
position: absolute;
  top: 40px;
  left: 155px;
  width: 390px;
}
.selected-project-identity h3 {
min-height: 38px;
  font-size: 27px;
  font-weight: 700;
  line-height: 34px;
}
.selected-project-identity p {
margin-top: 12px;
  color: var(--ao-text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.selected-project-details {
position: absolute;
  top: 46px;
  left: 575px;
  width: 480px;
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
}
.selected-project-details .selected-project-category {
margin-top: 19px;
  color: var(--ao-orange);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}
.selected-project-arrow {
position: absolute;
  top: 53px;
  right: 16px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ao-blue);
  opacity: 1;
}
.selected-project-arrow img {
position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  transition: opacity var(--ao-hover-fast) ease-out;
}
.selected-project-arrow::before {
content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--ao-blue);
  opacity: 0;
  transition: inset var(--ao-hover-fast) ease-out, opacity var(--ao-hover-fast) ease-out;
}
.selected-project-arrow span {
position: absolute;
  top: 12px;
  left: 0;
  width: 56px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  transition: transform var(--ao-hover-fast) ease-out, color var(--ao-hover-fast) ease-out;
}
.selected-project-arrow:hover img {
opacity: 0;
}
.selected-project-arrow:hover::before {
inset: 0;
  opacity: 1;
}
.selected-project-arrow:hover span {
color: var(--ao-white);
  transform: translateX(1.5px);
}
@media (max-width: 1399px) {
.selected-projects {
height: auto;
    min-height: 670px;
    padding-left: 48px;
    padding-right: 48px;
}
.selected-projects-header h2 {
width: calc(100% - 194px);
    height: auto;
    font-size: clamp(32px, 3.4vw, 48px);
    line-height: 1.2;
}
.selected-project-row {
height: auto;
    min-height: 166px;
    padding: 40px 16px 36px 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.2fr) 56px;
    gap: 24px;
    align-items: start;
}
.selected-project-number,
.selected-project-identity,
.selected-project-details,
.selected-project-arrow {
position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
}
.selected-project-number {
margin-top: 17px;
}
.selected-project-identity h3 {
font-size: 24px;
    line-height: 32px;
}
.selected-project-details {
margin-top: 6px;
}
.selected-project-arrow {
width: 56px;
    margin-top: 13px;
}

}
@media (max-width: 950px) {
.selected-projects {
padding: 40px 28px 28px;
}
.selected-projects-header {
height: auto;
    padding-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}
.selected-projects-eyebrow,
.selected-projects-header h2 {
position: static;
}
.selected-projects-eyebrow {
width: 100%;
}
.selected-projects-header h2 {
flex: 1 1 340px;
    width: auto;
    font-size: 36px;
    line-height: 44px;
}
.selected-project-row {
grid-template-columns: 40px minmax(0, 1fr) 56px;
    gap: 16px 20px;
    padding: 28px 0;
}
.selected-project-number {
margin-top: 0;
}
.selected-project-identity {
grid-column: 2;
}
.selected-project-details {
grid-column: 2;
    margin-top: 0;
}
.selected-project-arrow {
grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    margin-top: 0;
}

}
@media (max-width: 600px) {
.selected-projects {
padding: 36px 24px 24px;
}
.selected-projects-header h2 {
flex-basis: 100%;
    font-size: 32px;
    line-height: 40px;
}
.selected-project-row {
grid-template-columns: 32px minmax(0, 1fr) 56px;
    column-gap: 12px;
}
.selected-project-number {
width: auto;
    font-size: 24px;
    line-height: 32px;
}
.selected-project-identity h3 {
font-size: 22px;
    line-height: 30px;
    overflow-wrap: anywhere;
}
.selected-project-details {
grid-column: 2 / 4;
    overflow-wrap: anywhere;
}
.selected-project-arrow {
grid-row: 1;
    align-self: start;
}

}
@media (prefers-reduced-motion: reduce) {
.selected-project-arrow img,
.selected-project-arrow::before,
.selected-project-arrow span {
transition: none;
}

}
.why-ao {
height: 600px;
  padding: 0 76px;
  background: #fff3e8;
  color: var(--ao-blue);
}
.why-ao-inner {
position: relative; max-width: 1288px; height: 100%; margin: 0 auto;
}
.why-ao p,
.why-ao h2,
.why-ao h3 {
margin: 0;
}
.why-ao-eyebrow {
position: absolute; left: 0; top: 120px; width: 220px; font-size: 14px; font-weight: 600; line-height: 16px; color: var(--ao-orange);
}
.why-ao h2 {
position: absolute; left: 0; top: 156px; width: 612px; font-size: 42px; font-weight: 900; line-height: 50px; letter-spacing: -0.004em;
}
.why-ao h2 span {
color: var(--ao-orange);
}
.why-ao-copy {
position: absolute; left: 0; top: 274px; width: 612px; font-size: 17px; line-height: 28px;
}
.why-ao-process {
position: absolute; left: 676px; top: 120px; width: 612px; height: 344px; border-radius: var(--ao-radius-container); overflow: hidden; background: var(--ao-blue); color: white;
}
.why-ao-toggle {
position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; z-index: 1;
}
.why-ao-toggle:focus-visible {
outline: 2px solid var(--ao-orange); outline-offset: -4px; border-radius: var(--ao-radius-container);
}
.why-ao-motif {
position: absolute; left: 418px; top: -54px; opacity: 1; pointer-events: none;
}
.why-ao-process-eyebrow {
position: absolute; left: 44px; top: 40px; width: 280px; font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: -.004em; pointer-events: none;
}
.why-ao-process h3 {
position: absolute; left: 44px; top: 76px; width: 500px; font-size: 28px; font-weight: 800; line-height: 36px; letter-spacing: -.004em; pointer-events: none;
}
.why-ao-process-intro {
position: absolute; left: 32px; top: 94px; width: 720px; font-size: 13.5px; line-height: 20px; color: rgba(255,255,255,.72); opacity: 0; visibility: hidden; pointer-events: none;
}
.why-ao-process-footer {
position: absolute; left: 44px; top: 272px; width: 524px; font-size: 14px; line-height: 22px; color: #cbd9e1; pointer-events: none;
}
.why-ao-flows {
position: absolute; inset: 0; pointer-events: none;
}
.why-ao-flow {
position: absolute; display: block;
}
.why-ao-flow-1 {
left: 96px; top: 154px;
}
.why-ao-flow-2 {
left: 198px; top: 154px;
}
.why-ao-flow-3 {
left: 300px; top: 178px;
}
.why-ao-flow-4 {
left: 402px; top: 160px;
}
.why-ao:not(.is-expanded) .why-ao-process:hover .why-ao-flows {
transform: translate(1.47px, .7px);
}
.why-ao-steps {
position: absolute; inset: 0; pointer-events: none;
}
.why-ao-step {
position: absolute; width: 84px; height: 78px; padding: 0; border: 0; border-radius: var(--ao-radius-card); background: transparent; color: white; text-align: left;
}
.why-ao-step-1 {
left: 54px; top: 184px;
}
.why-ao-step-2 {
left: 156px; top: 136px;
}
.why-ao-step-3 {
left: 258px; top: 160px;
}
.why-ao-step-4 {
left: 360px; top: 190px;
}
.why-ao-step-5 {
left: 462px; top: 142px;
}
.why-ao-step-surface {
position: absolute; left: 22px; top: 0; width: 40px; height: 40px; border-radius: 20px; background: #2f5f9f;
}
.why-ao-step-number {
position: absolute; left: 22px; top: 14px; width: 40px; font-size: 10px; font-weight: 500; line-height: 18px; letter-spacing: -.004em; text-align: center;
}
.why-ao-step-title {
position: absolute; left: 0; top: 54px; width: 84px; font-size: 11.5px; font-weight: 400; line-height: 22px; text-align: center;
}
.why-ao-step-detail {
position: absolute; left: 0; top: 74px; width: 84px; opacity: 0; visibility: hidden;
}
.why-ao-step-hover-detail {
display: none;
}
.why-ao.is-expanded .why-ao-eyebrow {
top: 96px; width: 260px;
}
.why-ao.is-expanded h2 {
top: 130px; width: 300px; font-size: 30px; font-weight: 800; line-height: 36px;
}
.why-ao.is-expanded h2 span {
color: var(--ao-blue);
}
.why-ao.is-expanded .why-ao-copy {
top: 218px; width: 285px; font-size: 14.5px; line-height: 22.5px;
}
.why-ao.is-expanded .why-ao-process {
left: 328px; top: 84px; width: 960px; height: 416px; box-shadow: 0 10px 24px rgba(28,51,66,.1);
}
.why-ao.is-expanded .why-ao-motif {
opacity: 0;
}
.why-ao.is-expanded .why-ao-process-eyebrow {
left: 32px; top: 26px; font-size: 16px;
}
.why-ao.is-expanded .why-ao-process h3 {
left: 32px; top: 55px; width: 620px; font-size: 26px; line-height: 32px;
}
.why-ao.is-expanded .why-ao-process-intro {
opacity: 1; visibility: visible;
}
.why-ao.is-expanded .why-ao-process-footer {
left: 32px; top: 366px; width: 700px; font-size: 13px; color: rgba(255,255,255,.66);
}
.why-ao.is-expanded .why-ao-flow {
top: 220px;
}
.why-ao.is-expanded .why-ao-flow-1 {
left: 188px;
}
.why-ao.is-expanded .why-ao-flow-2 {
left: 374px;
}
.why-ao.is-expanded .why-ao-flow-3 {
left: 560px;
}
.why-ao.is-expanded .why-ao-flow-4 {
left: 746px;
}
.why-ao.is-expanded .why-ao-steps {
inset: auto; left: 15px; top: 119px; width: 930px; height: 206px; z-index: 2; pointer-events: auto;
}
.why-ao.is-expanded .why-ao-step {
top: 0; width: 186px; height: 206px; cursor: pointer;
}
.why-ao.is-expanded .why-ao-step-1 {
left: 0;
}
.why-ao.is-expanded .why-ao-step-2 {
left: 186px;
}
.why-ao.is-expanded .why-ao-step-3 {
left: 372px;
}
.why-ao.is-expanded .why-ao-step-4 {
left: 558px;
}
.why-ao.is-expanded .why-ao-step-5 {
left: 744px;
}
.why-ao.is-expanded .why-ao-step-surface {
left: 13px; top: 23px; width: 160px; height: 160px; border-radius: var(--ao-radius-card);
}
.why-ao.is-expanded .why-ao-step-number {
left: 29px; top: 39px; width: 128px; color: var(--ao-orange); font-size: 12.5px; font-weight: 600; text-align: left;
}
.why-ao.is-expanded .why-ao-step-title {
left: 29px; top: 70px; width: 128px; font-size: 16.5px; font-weight: 600; text-align: left;
}
.why-ao.is-expanded .why-ao-step-detail {
left: 29px; top: 103px; width: 128px; opacity: 1; visibility: visible; color: #c5d1d8; font-size: 12.2px; line-height: 17px;
}
.why-ao.is-expanded.is-row-hover .why-ao-step-surface {
left: 25px; width: 136px;
}
.why-ao.is-expanded.is-row-hover .why-ao-step-number,
.why-ao.is-expanded.is-row-hover .why-ao-step-title,
.why-ao.is-expanded.is-row-hover .why-ao-step-detail {
left: 39px; width: 108px;
}
.why-ao.is-expanded.is-row-hover .why-ao-step-number {
font-size: 12px; font-weight: 500;
}
.why-ao.is-expanded.is-row-hover .why-ao-step-title {
font-size: 15.5px;
}
.why-ao.is-expanded.is-row-hover .why-ao-step-detail {
font-size: 11.3px; line-height: 16px;
}
.why-ao.is-expanded.is-row-hover .why-ao-flow-1 {
left: 176px;
}
.why-ao.is-expanded.is-row-hover .why-ao-flow-2 {
left: 362px;
}
.why-ao.is-expanded.is-row-hover .why-ao-flow-3 {
left: 548px;
}
.why-ao.is-expanded.is-row-hover .why-ao-flow-4 {
left: 734px;
}
.why-ao.is-expanded .why-ao-step.is-focused .why-ao-step-surface {
left: 0; top: 1px; width: 186px; height: 204px; border-radius: 20px; background: var(--ao-orange);
}
.why-ao.is-expanded .why-ao-step.is-focused .why-ao-step-number {
left: 18px; top: 18px; width: 150px; font-size: 13px; font-weight: 600; color: white;
}
.why-ao.is-expanded .why-ao-step.is-focused .why-ao-step-title {
left: 18px; top: 51px; width: 150px; font-size: 18px; line-height: 23px;
}
.why-ao.is-expanded .why-ao-step.is-focused .why-ao-step-detail {
left: 18px; top: 88px; width: 150px; font-size: 12.5px; line-height: 17px; color: white;
}
.why-ao.is-expanded .why-ao-step.is-focused .why-ao-step-summary {
display: none;
}
.why-ao.is-expanded .why-ao-step.is-focused .why-ao-step-hover-detail {
display: inline;
}
.why-ao-step:focus-visible {
outline: 2px solid white; outline-offset: -2px;
}
.why-ao-eyebrow,
.why-ao h2,
.why-ao h2 span,
.why-ao-copy,
.why-ao-process,
.why-ao-process-eyebrow,
.why-ao-process h3,
.why-ao-process-footer,
.why-ao-process-intro,
.why-ao-motif,
.why-ao-steps,
.why-ao-step {
transition: top var(--why-duration, 480ms) ease-in-out, left var(--why-duration, 480ms) ease-in-out, width var(--why-duration, 480ms) ease-in-out, height var(--why-duration, 480ms) ease-in-out, font-size var(--why-duration, 480ms) ease-in-out, line-height var(--why-duration, 480ms) ease-in-out, color var(--why-duration, 480ms) ease-in-out, opacity var(--why-duration, 480ms) ease-in-out;
}
.why-ao-flows {
transition: transform 200ms ease-out;
}
.why-ao-step-surface,
.why-ao-step-number,
.why-ao-step-title,
.why-ao-step-detail {
transition: all 340ms ease-in-out;
}
.why-ao-flow {
transition: left 280ms ease-in-out, top 480ms ease-in-out;
}
@media (max-width: 1399px) {
.why-ao,
.why-ao.is-expanded {
height: auto; padding: 64px 48px;
}
.why-ao-inner {
display: grid; gap: 20px;
}
.why-ao .why-ao-eyebrow,
.why-ao h2,
.why-ao .why-ao-copy,
.why-ao .why-ao-process {
position: relative; top: auto; left: auto;
}
.why-ao.is-expanded .why-ao-eyebrow,
.why-ao.is-expanded h2,
.why-ao.is-expanded .why-ao-copy,
.why-ao.is-expanded .why-ao-process {
position: relative; top: auto; left: auto;
}
.why-ao .why-ao-eyebrow,
.why-ao h2,
.why-ao .why-ao-copy {
width: 100%; max-width: 612px;
}
.why-ao.is-expanded .why-ao-eyebrow,
.why-ao.is-expanded h2,
.why-ao.is-expanded .why-ao-copy {
width: 100%; max-width: 612px;
}
.why-ao h2,
.why-ao.is-expanded h2 {
font-size: 42px; line-height: 50px;
}
.why-ao .why-ao-copy {
font-size: 17px; line-height: 28px;
}
.why-ao .why-ao-process {
width: 100%; max-width: 612px; margin-top: 16px;
}
.why-ao.is-expanded .why-ao-process {
width: 100%; max-width: 960px; height: auto; padding: 26px 24px;
}
.why-ao.is-expanded .why-ao-process-eyebrow,
.why-ao.is-expanded .why-ao-process h3,
.why-ao.is-expanded .why-ao-process-intro,
.why-ao.is-expanded .why-ao-process-footer,
.why-ao.is-expanded .why-ao-steps {
position: relative; top: auto; left: auto; width: 100%;
}
.why-ao.is-expanded .why-ao-process h3 {
margin-top: 8px;
}
.why-ao.is-expanded .why-ao-process-intro {
margin-top: 10px;
}
.why-ao.is-expanded .why-ao-process-footer {
margin-top: 24px;
}
.why-ao.is-expanded .why-ao-steps {
height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); justify-items: center; margin-top: 20px;
}
.why-ao.is-expanded .why-ao-step {
position: relative; top: auto; left: auto;
}
.why-ao.is-expanded .why-ao-flows {
display: none;
}

}
@media (max-width: 700px) {
.why-ao,
.why-ao.is-expanded {
padding: 48px 24px;
}
.why-ao h2,
.why-ao.is-expanded h2 {
font-size: 36px; line-height: 44px;
}
.why-ao .why-ao-copy {
font-size: 16px; line-height: 26px;
}
.why-ao:not(.is-expanded) .why-ao-process {
height: 344px;
}
.why-ao:not(.is-expanded) .why-ao-process-eyebrow {
left: 24px; top: 30px; width: calc(100% - 48px);
}
.why-ao:not(.is-expanded) .why-ao-process h3 {
left: 24px; top: 64px; width: calc(100% - 48px); font-size: 24px; line-height: 32px;
}
.why-ao:not(.is-expanded) .why-ao-steps,
.why-ao:not(.is-expanded) .why-ao-flows {
width: 612px; height: 344px; inset: auto; left: 0; top: 86px; transform: scale(var(--why-scale, 1)); transform-origin: top left;
}
.why-ao:not(.is-expanded) .why-ao-process:hover .why-ao-flows {
transform: scale(var(--why-scale, 1)) translate(1.47px, .7px);
}
.why-ao:not(.is-expanded) .why-ao-process-footer {
left: 24px; top: auto; bottom: 24px; width: calc(100% - 48px); font-size: 13px; line-height: 20px;
}
.why-ao-motif {
left: calc(100% - 194px);
}
.why-ao.is-expanded .why-ao-process h3 {
font-size: 24px; line-height: 32px;
}

}
@media (prefers-reduced-motion: reduce) {
.why-ao *,
.why-ao *::before {
transition: none !important;
}

}
.hero [aria-disabled="true"],
.services-section [aria-disabled="true"] {
cursor: default;
}
.hero-slide,
.testimonial-slide {
transition: opacity var(--carousel-duration) var(--carousel-ease);
  visibility: hidden; pointer-events: none; z-index: 0;
}
.hero-slide.active,
.testimonial-slide.active {
visibility: visible; opacity: 1; pointer-events: auto; z-index: 2;
}
.hero-slide.is-leaving,
.testimonial-slide.is-leaving {
visibility: visible; opacity: 0; pointer-events: none; z-index: 1;
}
.service-card:is(:hover, :focus-visible) .service-card-image {
transform: none;
}
.service-number,
.service-title {
transition: text-shadow var(--ao-hover-normal) ease-out;
}
.service-card > .service-number {
left: 32px; top: 26px; pointer-events: none;
}
.service-card > .service-title {
left: 32px; bottom: 26px; width: calc(100% - 64px); pointer-events: none;
}
.service-card:is(:hover, :focus-visible) .service-number {
text-shadow: 0 1px 4px rgba(0,0,0,.28);
}
.service-card:is(:hover, :focus-visible) .service-title {
text-shadow: 0 2px 6px rgba(0,0,0,.32);
}
.selected-project-arrow::before {
transition: inset var(--ao-hover-fast) ease-out, opacity var(--ao-hover-fast) ease-out, box-shadow var(--ao-hover-fast) ease-out;
}
.selected-project-arrow:is(:hover, :focus-visible) img {
opacity: 0;
}
.selected-project-arrow:is(:hover, :focus-visible)::before {
inset: 0; opacity: 1; box-shadow: 0 5px 12px rgba(16,42,67,.16);
}
.selected-project-arrow:is(:hover, :focus-visible) span {
color: white; transform: translateX(1.5px);
}
.why-ao:not(.is-expanded) .why-ao-process:focus-within .why-ao-flows {
transform: translate(1.47px, .7px);
}
@media (min-width: 1201px) {
.why-ao {
height: 560px;
}
.why-ao:not(.is-expanded) .why-ao-eyebrow {
top: 88px;
}
.why-ao:not(.is-expanded) h2 {
top: 124px; width: 560px;
}
.why-ao:not(.is-expanded) .why-ao-copy {
top: 242px; width: 560px;
}
.why-ao:not(.is-expanded) .why-ao-process {
left: 608px; top: 84px; width: 680px; height: 392px;
}
.why-ao:not(.is-expanded) .why-ao-process h3 {
width: 592px;
}
.why-ao:not(.is-expanded) .why-ao-process-footer {
top: 316px; width: 592px;
}
.why-ao:not(.is-expanded) .why-ao-steps,
.why-ao:not(.is-expanded) .why-ao-flows {
inset: auto; left: 34px; top: 24px; width: 612px; height: 344px;
}
.why-ao:not(.is-expanded) .why-ao-motif {
left: 486px;
}

}
.why-ao-step-surface,
.why-ao-step-number,
.why-ao-step-title,
.why-ao-step-detail {
transition-duration: var(--why-step-duration, 340ms);
}
.why-ao.is-expanded .why-ao-flow {
transition: left var(--why-step-duration, 280ms) ease-in-out, top var(--why-duration, 480ms) ease-in-out;
}
.hero :is(a, button):focus-visible,
.testimonials button:focus-visible,
.selected-projects button:focus-visible,
.selected-project-row:focus-visible {
outline: 2px solid var(--ao-orange); outline-offset: 3px;
}
@media (max-width: 700px) {
.why-ao:not(.is-expanded) .why-ao-process:focus-within .why-ao-flows {
transform: scale(var(--why-scale, 1)) translate(1.47px, .7px);
}

}
@media (max-width: 600px) {
.service-card:is(:hover, :focus-visible) .service-title {
top: auto; bottom: 26px; height: auto; font-size: 22px; line-height: 1.2;
}

}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.partner-marquee-track {
animation: none;
}
.hero *,
.hero *::before,
.hero *::after,
.services-section *,
.testimonials *,
.testimonials *::before,
.selected-projects *,
.selected-projects *::before,
.why-ao *,
.why-ao *::before {
transition: none !important;
}
.why-ao:not(.is-expanded) .why-ao-process:is(:hover, :focus-within) .why-ao-flows {
transform: none;
}

}
@media (min-width: 701px) and (max-width: 1399px) {
:root {
--ao-responsive-gutter: clamp(28px, calc(3.90625vw - 2px), 48px);
}
body :is(.selected-projects, .why-ao, .services-section, .about-section, .about-faq, .leistungen-faq, .work-faq, .kontakt-location, .kontakt-faq, .ao-footer, .projekte-gallery):where(.selected-projects, .why-ao, .services-section, .about-section, .about-faq, .leistungen-faq, .work-faq, .kontakt-location, .kontakt-faq, .projekte-gallery) {
padding-inline: var(--ao-responsive-gutter);
}
body :is(.leistungen-hero-inner, .projekte-hero-inner) {
margin-inline: var(--ao-responsive-gutter);
}
body .leistungen-overview-inner {
padding-inline: var(--ao-responsive-gutter);
}
body .projekte-hero {
padding-inline: 0;
}
body :is(.hero-content, .hero-content-high, .hero-content-low) {
width: calc(100% - 180px); max-width: 1100px;
}
body .hero-content h1 {
font-size: clamp(42px, 4.3vw, 60px); line-height: 1.08;
}
body .trust-bridge {
height: auto; padding: 48px var(--ao-responsive-gutter);
}
body :is(.trust-copy, .trust-title, .trust-button):where(.trust-copy, .trust-title) {
position: static; height: auto; transform: none;
}
body .trust-copy {
display: block; width: min(1040px, 100%); max-width: 100%; margin: auto; font-size: clamp(18px, 1.55vw, 20px); line-height: 1.7;
}
body .trust-title {
width: 100%; max-width: 100%; margin: 28px auto 0; font-size: clamp(30px, 3vw, 40px); line-height: 1.25;
}
body .services-section {
height: auto; padding-block: 56px 64px;
}
body .services-title {
position: static; width: 100%; height: auto; margin: 0 auto 40px; transform: none; font-size: clamp(38px, 4vw, 54px); line-height: 1.16;
}
body .services-grid {
position: static; width: 100%; height: auto; margin: auto; transform: none; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 24px;
}
body .service-card {
width: 100%; max-width: none; height: auto; aspect-ratio: 414 / 236; margin: 0;
}
body .service-title {
font-size: clamp(18px, 1.7vw, 24px); line-height: 1.2;
}
body .service-card > .service-title {
left: 24px; bottom: 24px; width: calc(100% - 48px);
}
body .service-card > .service-number {
left: 24px; top: 22px;
}
body .why-ao,
body .why-ao.is-expanded {
height: auto; padding-block: 56px;
}
body .why-ao-inner {
display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 40px; row-gap: 20px; align-items: start;
}
body .why-ao:not(.is-expanded) :is(.why-ao-eyebrow, h2, .why-ao-copy, .why-ao-about):where(.why-ao-eyebrow, h2, .why-ao-copy),
body .why-ao.is-expanded :is(.why-ao-eyebrow, h2, .why-ao-copy, .why-ao-about):where(.why-ao-eyebrow, h2, .why-ao-copy) {
position: relative; inset: auto; grid-column: 1; width: auto; max-width: 100%;
}
body .why-ao h2 {
font-size: clamp(32px, 3.1vw, 42px); line-height: 1.2;
}
body .why-ao:not(.is-expanded) .why-ao-process {
position: relative; inset: auto; grid-column: 2; grid-row: 1 / 5; width: 100%; max-width: none; height: 344px; margin: 0;
}
body .why-ao:not(.is-expanded) .why-ao-process h3 {
left: 24px; top: 70px; width: calc(100% - 48px); font-size: 24px; line-height: 30px;
}
body .why-ao:not(.is-expanded) .why-ao-process-eyebrow {
left: 24px; top: 32px; width: calc(100% - 48px);
}
body .why-ao:not(.is-expanded) :is(.why-ao-steps, .why-ao-flows) {
inset: auto; left: 0; top: 0; width: 612px; height: 344px; transform: scale(var(--why-scale, 1)); transform-origin: top left;
}
body .why-ao:not(.is-expanded) .why-ao-process:is(:hover, :focus-within) .why-ao-flows {
transform: scale(var(--why-scale, 1)) translate(1.47px, .7px);
}
body .why-ao:not(.is-expanded) .why-ao-process-footer {
left: 24px; top: auto; bottom: 24px; width: calc(100% - 48px); font-size: 13px; line-height: 20px;
}
body .why-ao.is-expanded .why-ao-process {
grid-column: 1 / -1; max-width: none;
}
body .why-ao.is-expanded .why-ao-steps {
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
body .detail-intro-title {
font-size: clamp(36px, 3.65vw, 50px); line-height: 1.12;
}
body .detail-intro-body {
position: static; margin-top: 28px !important;
}
body .detail-why-title {
position: static; width: auto; margin-top: 22px !important; font-size: clamp(27px, 2.6vw, 34px); line-height: 1.2;
}
body .detail-why-body {
margin-top: 24px !important;
}
body .detail-feature-side {
min-height: 0; padding-block: 36px;
}
body :is(.detail-feature-title, .detail-feature-body) {
position: static; width: auto; margin-top: 24px !important;
}
body .detail-feature-title {
font-size: clamp(28px, 2.8vw, 38px); line-height: 1.15;
}
body :is(.detail-comparison-card, .detail-monitor-card, .detail-workshop-card) {
min-height: 0; padding: 30px;
}
body :is(.detail-comparison-card, .detail-monitor-card, .detail-workshop-card) :is(h3, .detail-eyebrow, .detail-card-copy) {
position: relative; inset: auto; width: auto;
}
body :is(.detail-comparison-card, .detail-workshop-card) .detail-card-copy {
margin-top: 24px !important;
}
body .detail-monitor-card h3 {
margin-top: 16px !important;
}
body .detail-monitor-card .detail-card-copy {
margin-top: 24px !important;
}
body .detail-values-credit {
position: static; margin-top: 28px !important;
}
body .detail-workshop-cards {
grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
body .detail-offer-cards {
grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px;
}
body .detail-funding-card {
min-height: 0;
}
body .detail-hero {
height: auto; min-height: 640px;
}
body .detail-hero-inner {
height: auto; padding-block: 88px;
}
body .detail-hero :is(.detail-hero-eyebrow, h1, .detail-hero-copy) {
position: static;
}
body .detail-hero h1 {
margin-top: 24px !important; font-size: clamp(44px, 4.5vw, 60px); line-height: 1.12;
}
body .detail-hero-copy {
margin-top: 32px !important;
}
body :is(.detail-hero-photo, .detail-hero-shade) {
height: 100%;
}
body .detail-geo .detail-hero-photo {
inset: 0; width: 100%; height: 100%; object-fit: cover;
}
body .about-principles {
height: auto; padding-block: 56px;
}
body .about-principle-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
body .about-principle {
height: auto; min-height: 460px; padding: 240px 24px 32px;
}
body .about-principle :is(h3, .about-principle-subtitle, .about-principle-copy) {
position: relative; inset: auto; width: auto;
}
body .about-principle h3 {
font-size: clamp(22px, 2vw, 28px); line-height: 1.2;
}
body .about-principle-subtitle {
margin-top: 24px !important;
}
body .about-principle-copy {
margin-top: 18px !important;
}
body .about-purpose {
height: auto;
}
body .about-purpose article {
height: auto; min-height: 0;
}
body .about-purpose article > p:last-child {
position: static; margin-top: 28px !important;
}
body :is(.about-clients, .about-thinking, .about-history, .about-facts) {
min-height: 0;
}
body .about-thinking-row:nth-child(n) h3 {
height: auto;
}
body .about-client-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
body .career-job {
height: auto; min-height: 104px;
}
body .career-job-meta {
flex-wrap: wrap; gap: 10px 28px;
}
body .career-jobs {
height: auto; padding-bottom: 56px;
}
body .career-process-steps {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
body .career-hero h1 {
font-size: clamp(38px, 3.6vw, 46px); line-height: 1.15; max-width: 100%;
}
body .career-hero-copy {
max-width: 100%;
}
body .career-hero-image {
inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
body .career-hero-wash {
width: 100%; max-width: 920px;
}
body .job-title {
font-size: clamp(36px, 3.4vw, 46px); line-height: 1.2;
}
body .job-page-heading {
height: auto;
}
body .job-application-copy {
min-width: 0;
}
body .insight-hero {
height: auto; min-height: 540px;
}
body .insight-hero-inner {
height: auto; min-height: 540px; padding-block: 56px;
}
body .insight-hero :is(.insight-category, h1, .insight-deck, .insight-meta) {
position: static;
}
body .insight-hero h1 {
margin-top: 16px; font-size: clamp(36px, 3.35vw, 46px); line-height: 1.2;
}
body .insight-deck {
margin-top: 24px;
}
body .insight-meta {
margin-top: 20px;
}
body .insight-related {
height: auto; padding-block: 48px 56px;
}
body .insight-related :is(.insight-related-eyebrow, h2, .insight-related-grid) {
position: static;
}
body .insight-related h2 {
margin-top: 8px;
}
body .insight-related-grid {
margin-top: 28px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
body .insight-related-card {
height: auto; min-height: 190px; padding: 24px 28px 56px;
}
body .insight-related-category,
body .insight-related-card h3 {
position: relative; inset: auto; width: 100%; max-width: none;
}
body .insight-related-card h3 {
margin-top: 10px;
}
body .insight-related-arrow {
top: auto; bottom: 24px;
}
body .insights-featured {
height: auto; min-height: 540px;
}
body .insights-featured-content {
padding-block: 64px;
}
body .insights-featured h1 {
font-size: clamp(40px, 3.8vw, 52px); line-height: 1.15;
}
body :is(.leistungen-faq, .about-faq, .work-faq, .kontakt-faq) .leistungen-faq-list {
grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
body .leistungen-faq-toggle {
display: flex; align-items: center; padding-block: 18px;
}
body .leistungen-faq-toggle > span {
align-self: center; max-width: none;
}
body .leistungen-faq-toggle > img {
top: 38px;
}
body .leistungen-faq-answer {
max-width: none;
}
body .kontakt-privacy-dialog {
padding: 28px 32px;
}
body .kontakt-location-info {
padding: 40px 32px;
}

}
@media (min-width: 701px) and (max-width: 1100px) {
body :is(.leistungen-faq, .about-faq, .work-faq, .kontakt-faq) .leistungen-faq-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .services-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .why-ao:not(.is-expanded) :is(.why-ao-steps, .why-ao-flows) {
top: 32px;
}
body .detail-intro-grid {
grid-template-columns: minmax(0, 1fr); gap: 32px;
}
body .detail-intro-copy {
max-width: 780px;
}
body .detail-why-card {
min-height: 0;
}
body .detail-service-columns {
grid-template-columns: minmax(0, 1fr);
}
body :is(.detail-comparison, .detail-monitoring) .detail-geo-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .detail-workshop-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .about-principle-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .about-client-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body .case-process-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .case-contact {
height: auto; padding-block: 56px;
}
body .case-contact-inner {
display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px;
}
body :is(.case-contact-eyebrow, .case-contact-title, .case-contact-body, .case-project-cta):where(.case-contact-eyebrow, .case-contact-title, .case-contact-body) {
position: relative; top: auto;
}
body .case-contact-title {
margin-top: 14px !important;
}
body .case-contact-body {
margin-top: 22px !important;
}
body .case-contact-card {
position: relative; top: auto; right: auto;
}
body .case-contact-copy {
width: 100%;
}
body .case-contact-card {
width: 100%;
}

}
@media (min-width: 701px) and (max-width: 950px) {
body .why-ao-inner {
grid-template-columns: minmax(0, 1fr);
}
body .why-ao:not(.is-expanded) .why-ao-process {
grid-column: 1; grid-row: auto; width: min(612px, 100%); margin-top: 12px;
}
body .why-ao:not(.is-expanded) :is(.why-ao-steps, .why-ao-flows) {
top: 0;
}
body .projekte-card {
min-height: 0;
}
body .detail-offer-cards {
grid-template-columns: minmax(0, 1fr);
}
body .insight-related-grid,
body .career-process-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .case-contact-inner {
grid-template-columns: minmax(0, 1fr);
}
body .case-contact-card {
max-width: 420px;
}
body .work-difference-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .work-accompaniment-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .work-accompaniment-card {
max-width: none;
}
body .about-purpose-grid {
grid-template-columns: minmax(0, 1fr);
}
body .about-history-row {
grid-template-columns: minmax(0, 1fr); gap: 28px;
}
body .about-history-image {
min-height: 330px;
}
body .about-facts-grid {
grid-template-columns: minmax(0, 1fr); gap: 24px;
}
body .about-facts-grid article + article::after {
display: none;
}
body .about-facts-grid article + article {
padding-top: 24px; border-top: 1px solid rgba(16,42,67,.14);
}
body .detail-feature {
grid-template-columns: minmax(0, 1fr);
}
body .insights-article {
grid-template-columns: 160px minmax(0, 1fr);
}
body .insights-article-read {
grid-column: 2; grid-row: 3;
}

}
@media (max-width: 700px) {
:root {
--ao-phone-gutter: clamp(16px, 5.128vw, 24px); --header-height: 66px;
}
body :is(.site-header, .trust-bridge, .services-section, .selected-projects, .why-ao, .why-ao.is-expanded, .about-section, .about-faq, .leistungen-faq, .work-faq, .kontakt-location, .kontakt-faq, .ao-footer, .projekte-gallery, .kontakt-hero, .kontakt-form-section, .direct-contacts):where(.trust-bridge, .services-section, .selected-projects, .why-ao, .why-ao.is-expanded, .about-section, .about-faq, .leistungen-faq, .work-faq, .kontakt-location, .kontakt-faq, .projekte-gallery, .kontakt-hero, .kontakt-form-section) {
padding-inline: var(--ao-phone-gutter);
}
body.kontakt-page .kontakt-faq {
padding-inline: var(--ao-phone-gutter);
}
body :is(.leistungen-hero-inner, .projekte-hero-inner) {
margin-inline: var(--ao-phone-gutter);
}
body .leistungen-overview-inner {
padding-inline: var(--ao-phone-gutter);
}
body .projekte-hero {
padding-inline: 0;
}
body main :is(h1, h2, h3, h4) {
overflow-wrap: anywhere; hyphens: manual;
}
body :is(.detail-hero h1, .case-hero h1, .insight-hero h1, .legal-hero h1) {
hyphens: auto;
}
body :is(.detail-intro-title, .detail-offer-intro-title, .detail-section-title, .about-main h2, .work-main h2, .case-process-title, .case-contact-title, .case-related-title) {
font-size: clamp(28px, 7.7vw, 36px); line-height: 1.2;
}
body .hero {
height: clamp(540px, calc(100svh - 66px), 700px); min-height: 540px; max-height: 700px; touch-action: pan-y pinch-zoom;
}
body .hero-slide {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 56px var(--ao-phone-gutter) 124px;
}
body :is(.hero-content, .hero-content-high, .hero-content-low) {
position: relative; inset: auto; width: 100%; transform: none;
}
body .hero-content h1 {
font-size: clamp(30px, 8.6vw, 40px); line-height: 1.12;
}
body .hero-content h1 br {
display: none;
}
body .hero-pagination {
top: auto; bottom: 24px; height: 48px; width: 176px; gap: 0;
}
body .hero-slide[data-hero-slide="ki"] .hero-image {
object-position: 57% center;
}
body .hero-slide[data-hero-slide="career"] .hero-image {
object-position: 60% center;
}
body .trust-copy {
max-width: 100%; font-size: 16px; line-height: 27px;
}
body .trust-title {
max-width: 100%; font-size: clamp(28px, 7.7vw, 34px); line-height: 1.2;
}
body .services-title {
font-size: clamp(30px, 8.2vw, 38px); line-height: 1.15;
}
body .service-card {
max-width: none; height: auto; aspect-ratio: 1.65;
}
body .service-card > .service-title,
body .service-card:is(:hover, :focus-visible) .service-title {
left: 24px; bottom: 24px; width: calc(100% - 48px); top: auto; height: auto; font-size: 22px; line-height: 1.2;
}
body .service-card > .service-number {
left: 24px; top: 24px;
}
body .partner-marquee {
height: 140px;
}
body .partner-marquee-window {
top: 14px;
}
body .testimonials {
min-height: 0; padding: 44px 0 106px; touch-action: pan-y pinch-zoom;
}
body .testimonial-quote {
width: calc(100% - 2 * var(--ao-phone-gutter)); max-width: none; min-height: 0; font-size: clamp(18px, 5.1vw, 22px); line-height: 1.5;
}
body .testimonial-portrait {
margin-top: 28px; width: 92px; height: 92px;
}
body .testimonial-name,
body .testimonial-company {
width: calc(100% - 2 * var(--ao-phone-gutter)); max-width: none;
}
body .testimonial-pagination {
position: absolute; margin: 0; top: auto; bottom: 26px; height: 48px; width: 176px; gap: 0;
}
body .selected-project-row {
grid-template-columns: 28px minmax(0, 1fr) 48px; gap: 16px 12px;
}
body .selected-project-identity {
grid-column: 2 / -1;
}
body .selected-project-identity h3 {
font-size: 20px; line-height: 1.3;
}
body .selected-project-arrow {
grid-row: 3; width: 48px; height: 48px;
}
body .selected-project-arrow img {
width: 48px; height: 48px;
}
body .why-ao h2,
body .why-ao.is-expanded h2 {
font-size: clamp(30px, 8.2vw, 36px); line-height: 1.2;
}
body .why-ao:not(.is-expanded) .why-ao-process {
height: 344px;
}
body .why-ao:not(.is-expanded) .why-ao-process h3 {
font-size: 23px; line-height: 30px;
}
body .why-ao.is-expanded .why-ao-process {
padding-inline: 20px;
}
body .why-ao.is-expanded .why-ao-steps {
grid-template-columns: minmax(0, 1fr); gap: 16px;
}
body .why-ao.is-expanded .why-ao-step {
width: 100%; height: 220px;
}
body .why-ao.is-expanded .why-ao-steps .why-ao-step .why-ao-step-surface {
left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--ao-radius-card);
}
body .why-ao.is-expanded .why-ao-steps .why-ao-step .why-ao-step-number {
left: 18px; top: 18px; width: calc(100% - 36px); font-size: 13px;
}
body .why-ao.is-expanded .why-ao-steps .why-ao-step .why-ao-step-title {
left: 18px; top: 50px; width: calc(100% - 36px); font-size: 18px; line-height: 24px;
}
body .why-ao.is-expanded .why-ao-steps .why-ao-step .why-ao-step-detail {
left: 18px; top: 88px; width: calc(100% - 36px); font-size: 14px; line-height: 21px;
}
body :is(.leistungen-faq-list, .kontakt-faq .leistungen-faq-list, .about-faq .leistungen-faq-list, .work-faq .leistungen-faq-list) {
grid-template-columns: minmax(0, 1fr); gap: 12px;
}
body .leistungen-faq-item {
height: var(--phone-toggle-height, 96px);
}
body .leistungen-faq-toggle {
height: auto; min-height: 88px; align-items: center; padding: 22px 20px 22px 54px; font-size: 16px; line-height: 24px;
}
body .leistungen-faq-toggle > span {
width: 100%; max-width: none; align-self: center;
}
body .leistungen-faq-toggle > img {
top: calc(50% - 12px); left: 18px;
}
body .leistungen-faq-item.is-open {
height: var(--faq-open-height, 240px);
}
body .leistungen-faq-answer,
body .leistungen-faq-item.is-open .leistungen-faq-answer {
top: calc(var(--phone-toggle-height, 96px) + 4px); left: 54px; width: calc(100% - 74px); max-width: none; font-size: 15px; line-height: 24px;
}
body .detail-hero {
min-height: 0;
}
body .detail-hero-inner {
padding-block: 56px 64px;
}
body .detail-hero h1 {
font-size: clamp(32px, 8.2vw, 40px); line-height: 1.15;
}
body .detail-hero-copy {
max-width: 100%;
}
body .detail-geo .detail-hero-photo {
width: 100%; height: 100%;
}
body .detail-why-card {
min-height: 0; padding: 28px 24px;
}
body .detail-why-title {
font-size: 28px; line-height: 1.2;
}
body .detail-services-header {
gap: 20px;
}
body .detail-service-item {
height: calc(var(--phone-toggle-height, 160px) + 2px);
}
body .detail-service-toggle {
display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 10px 16px; height: auto; min-height: 140px; padding: 20px;
}
body .detail-service-toggle > :is(.detail-service-number, .detail-service-title, .detail-service-summary) {
position: relative; inset: auto; width: auto; transform: none; grid-column: 1;
}
body .detail-service-number {
font-size: 12px; line-height: 18px;
}
body .detail-service-title {
font-size: 18px; line-height: 25px;
}
body .detail-service-toggle > .detail-service-summary {
grid-column: 1 / -1; font-size: 14px; line-height: 22px;
}
body .detail-service-arrow {
position: relative; inset: auto; grid-column: 2; grid-row: 1 / 3; align-self: center; width: 48px; height: 48px;
}
body .detail-service-arrow img {
width: 44px; height: 44px;
}
body .detail-service-item.is-open {
height: var(--detail-open-height, 300px);
}
body .detail-service-divider {
top: var(--phone-toggle-height, 160px); left: 20px; right: 20px;
}
body .detail-service-answer {
top: calc(var(--phone-toggle-height, 160px) + 16px); left: 20px; width: calc(100% - 40px); font-size: 15px; line-height: 24px;
}
body .detail-faq-item {
height: calc(var(--phone-toggle-height, 96px) + 2px);
}
body .detail-faq-toggle {
height: auto; min-height: 90px; padding: 20px; gap: 18px; font-size: 16px; line-height: 24px;
}
body .detail-faq-toggle > span {
min-width: 0;
}
body .detail-faq-item.is-open {
height: var(--detail-open-height, 240px);
}
body .detail-faq-answer {
top: calc(var(--phone-toggle-height, 96px) + 4px); left: 20px; right: 20px; font-size: 15px; line-height: 24px;
}
body :is(.detail-comparison-card, .detail-monitor-card, .detail-workshop-card) {
min-height: 0; padding: 28px 24px;
}
body :is(.detail-comparison-card, .detail-monitor-card, .detail-workshop-card) :is(h3, .detail-eyebrow, .detail-card-copy) {
position: relative; inset: auto; width: auto;
}
body :is(.detail-comparison-card, .detail-workshop-card) .detail-card-copy {
margin-top: 24px !important;
}
body .detail-monitor-card h3 {
margin-top: 16px !important;
}
body .detail-monitor-card .detail-card-copy {
margin-top: 24px !important;
}
body :is(.detail-feature-side, .detail-values-left, .detail-values-right, .detail-offer-intro-card) {
padding: 28px 24px;
}
body .detail-values-right blockquote {
font-size: 24px; line-height: 1.35;
}
body .detail-offer-cards {
grid-template-columns: minmax(0, 1fr);
}
body .detail-offer-card {
min-height: 0;
}
body .detail-offer-pill {
width: auto; max-width: 100%; height: auto; min-height: 32px; padding: 6px 14px; white-space: normal;
}
body .detail-services-header :is(h2, p) {
min-width: 0;
}
body .detail-feature-side + .detail-feature-side .detail-feature-title {
font-size: 30px; line-height: 1.2;
}
body .about-hero {
min-height: 0;
}
body .about-hero h1 {
font-size: clamp(32px, 8.8vw, 40px); line-height: 1.15; transform: none;
}
body .about-hero-quote {
max-width: calc(100% - 2 * var(--ao-phone-gutter));
}
body .about-motif-left {
left: -240px; top: -120px; width: 510px; height: 385px;
}
body .about-motif-right {
left: auto; right: -210px; top: auto; bottom: -80px; width: 420px; height: 317px;
}
body .about-motif-top {
left: 55%; width: 240px; height: 181px;
}
body .about-principle-grid {
grid-template-columns: minmax(0, 1fr);
}
body .about-principle {
height: auto; min-height: 0; padding: 220px 24px 30px;
}
body .about-principle :is(h3, .about-principle-subtitle, .about-principle-copy) {
position: relative; inset: auto; width: auto;
}
body .about-principle h3 {
font-size: 26px; line-height: 1.2;
}
body .about-principle-subtitle {
margin-top: 24px !important;
}
body .about-principle-copy {
margin-top: 18px !important; font-size: 15px; line-height: 24px;
}
body .about-purpose article {
height: auto; min-height: 0;
}
body .about-purpose article > p:last-child {
position: static; margin-top: 24px !important;
}
body .about-purpose-grid {
gap: 40px;
}
body .about-mission {
text-align: left;
}
body .about-clients h2 {
height: auto;
}
body .about-client-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px;
}
body .about-audience-toggle {
font-size: 17px;
}
body .about-audience-detail {
font-size: 14px; line-height: 22px;
}
body .about-audience-card.is-open {
height: max(174px, var(--phone-audience-height, var(--audience-height, 174px)));
}
body .about-audience-card.is-open .about-audience-detail {
top: var(--phone-audience-top, 68px);
}
body .about-history-image {
height: auto; min-height: 0; aspect-ratio: 1.4;
}
body .about-founder-image img {
height: 100%; top: 0; width: 100%; left: 0; object-fit: cover; object-position: center 22%;
}
body .work-hero {
min-height: 0;
}
body .work-hero-inner {
padding-block: 48px 64px;
}
body .work-hero h1 {
font-size: clamp(32px, 8.5vw, 40px);
}
body .work-accompaniment-card {
height: auto; padding: 30px 24px;
}
body .work-accompaniment-card :is(.work-card-shadow, .work-card-surface) {
inset: 6px; width: auto; height: auto;
}
body .work-accompaniment-card :is(p, h3) {
position: relative; inset: auto; width: auto;
}
body .work-accompaniment-card h3 {
margin-top: 24px;
}
body .work-card-copy {
margin-top: 24px; font-size: 15px; line-height: 24px;
}
body .work-process-step {
height: max(230px, var(--phone-step-height, 230px));
}
body .work-process-step.is-expanded {
height: max(390px, var(--phone-step-height, 390px));
}
body .work-process-surface,
body .work-process-step.is-expanded .work-process-surface {
left: 28px; width: calc(100% - 28px); height: calc(100% - 50px); transform: none;
}
body .work-process-content,
body .work-process-step.is-expanded .work-process-content {
left: 48px; width: calc(100% - 68px); display: flex; flex-direction: column; gap: 12px; transform: none;
}
body .work-process-content > span {
position: relative; inset: auto; width: 100%;
}
body .work-process-step:not(.is-expanded) .work-process-details {
position: absolute; top: 100%;
}
body .work-process-title {
font-size: 22px; line-height: 28px;
}
body .work-process-details {
font-size: 15px; line-height: 24px;
}
body .work-process-branch,
body .work-process-step.is-expanded .work-process-branch {
width: 17px;
}
body .career-hero {
min-height: 0;
}
body .career-hero-content {
padding-block: 56px 64px;
}
body .career-hero-image {
inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% top;
}
body .career-hero-wash {
width: 100%;
}
body .career-job {
min-height: 0; padding: 24px 20px;
}
body .career-job h4 {
padding-right: 52px;
}
body .career-job-meta {
flex-direction: column; align-items: flex-start; gap: 10px;
}
body .career-process-steps li {
height: auto;
}
body .job-detail-card {
padding: 28px 20px;
}
body .job-title {
font-size: clamp(28px, 7.7vw, 34px); line-height: 1.2;
}
body .job-contact-email {
min-height: 44px; display: flex; align-items: center;
}
body .case-hero {
min-height: 0;
}
body .case-hero-inner {
padding-block: 56px 48px;
}
body .case-hero-title {
font-size: clamp(30px, 8.2vw, 38px); line-height: 1.2;
}
body .case-tag {
max-width: 100%; height: auto; min-height: 38px; padding: 8px 14px; white-space: normal; text-align: center;
}
body .case-tags {
align-items: stretch;
}
body .case-strip-image {
height: auto; aspect-ratio: 1.25;
}
body .case-feature-image {
height: auto; aspect-ratio: 1.25;
}
body.case-aqualon .case-strip-image:nth-child(3) img,
body.case-aqualon .case-feature-image:first-child img {
inset: 0; width: 100%; height: 100%; object-fit: cover;
}
body .case-process-card {
min-height: 0;
}
body .case-contact-card {
height: auto; padding: 28px 24px;
}
body .case-contact-portrait {
position: relative; inset: auto; display: block; width: min(200px, 100%); height: auto; margin: auto; aspect-ratio: 1;
}
body :is(.case-contact-name, .case-contact-role, .case-contact-links) {
position: relative; inset: auto;
}
body .case-contact-name {
margin-top: 28px !important;
}
body .case-contact-role {
margin-top: 8px !important;
}
body .case-contact-links {
margin-top: 20px; gap: 4px;
}
body .case-contact-link {
height: auto; min-height: 44px; font-size: 14px; overflow-wrap: anywhere;
}
body .case-contact-icon {
top: calc(50% - 10px);
}
body :is(.projekte-card, .case-related .projekte-card) {
min-height: 0;
}
body .insights-featured h1,
body .insight-hero h1 {
font-size: clamp(30px, 8.2vw, 38px); line-height: 1.2;
}
body .insight-meta {
white-space: normal;
}
body .insight-rail {
gap: 4px; padding: 24px 20px;
}
body .insight-rail a {
min-height: 44px; padding-block: 12px; font-size: 14px; line-height: 22px;
}
body .insight-intro-block {
padding: 24px 20px;
}
body .insight-related-card {
height: auto; min-height: 190px; padding: 24px 24px 64px;
}
body .insight-related-category,
body .insight-related-card h3 {
position: relative; inset: auto; width: 100%; max-width: none;
}
body .insight-related-card h3 {
margin-top: 12px; font-size: 18px; line-height: 26px;
}
body .insight-related-arrow {
top: auto; bottom: 24px;
}
body .insights-article-read {
min-height: 44px; display: flex; align-items: center;
}
body .legal-hero-title {
font-size: clamp(30px, 8.2vw, 38px); line-height: 1.2;
}
body .legal-main :is(p, dd, a, h2, h3) {
overflow-wrap: anywhere;
}
body .legal-toc a {
min-height: 44px; padding-block: 10px;
}
body .kontakt-field :is(input, select, textarea),
body .kontakt-subject-toggle {
font-size: 16px; line-height: 24px; min-height: 48px; height: auto;
}
body .kontakt-subject-icon {
top: 17px;
}
body .kontakt-subject-options {
top: 54px; max-height: min(360px, 50dvh); overflow-y: auto; overscroll-behavior: contain;
}
body .kontakt-subject-option {
min-height: 48px; font-size: 14px; line-height: 22px;
}
body .kontakt-field textarea {
min-height: 150px;
}
body .kontakt-consent {
grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 13px; line-height: 21px;
}
body .kontakt-consent input {
width: 22px; height: 22px; margin-top: 0;
}
body .kontakt-consent label {
min-height: 44px;
}
body .kontakt-submit {
min-width: 160px; min-height: 52px;
}
body .kontakt-location-visual {
height: auto; aspect-ratio: 1;
}
body .kontakt-location-row {
min-height: 48px;
}
body .kontakt-privacy-dialog {
display: none; width: calc(100% - 24px); height: min(760px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); padding: 24px 20px;
}
body .kontakt-privacy-dialog[open] {
display: flex; flex-direction: column;
}
body .kontakt-privacy-header {
height: auto; min-height: 96px; flex-shrink: 0; padding-right: 48px; padding-bottom: 18px;
}
body .kontakt-privacy-close {
width: 44px; height: 44px;
}
body .kontakt-privacy-content {
height: auto; min-height: 0; flex: 1; margin-top: 20px; padding-right: 6px; font-size: 14px; line-height: 23px;
}

}
@media (max-width: 700px) and (hover: none) {
body .leistungen-faq-item:not(.is-open):has(.leistungen-faq-toggle:hover) {
background: transparent;
}
body .leistungen-faq-item:not(.is-open) .leistungen-faq-toggle:hover {
color: #566570;
}
body .detail-faq-item:not(.is-open):hover {
background: transparent;
}
body .detail-service-item:not(.is-open):has(.detail-service-toggle:hover) .detail-service-arrow::before {
opacity: 0; inset: 2px; background: var(--ao-light-blue); border-color: var(--ao-blue);
}
body .detail-service-item:not(.is-open):has(.detail-service-toggle:hover) .detail-service-arrow > span {
color: var(--ao-blue);
}
body .service-card:hover .service-card-visual {
transform: none; inset: 8px; border-radius: 28px;
}
body .about-principle:hover .about-principle-visual {
inset: 0; border-radius: 20px; box-shadow: none;
}
body .work-accompaniment-card:hover .work-card-surface {
transform: none; inset: 6px; width: auto; height: auto; border-radius: 22px; background: white;
}
body .work-accompaniment-card:hover .work-card-shadow {
opacity: 0;
}
body .work-accompaniment-card:hover :where(p, h3) {
color: var(--work-navy);
}
body .work-accompaniment-card:hover .work-card-copy {
color: var(--work-copy);
}

}
@media (min-width: 1201px), (orientation: landscape) and (min-width: 951px) and (max-width: 1199px) and (min-height: 501px), (orientation: landscape) and (min-width: 1024px) and (max-width: 1400px) and (min-height: 501px) and (any-pointer: coarse) {
body.home-page {
--home-editorial-width: min(540px, calc(45vw - 74.4px));
}
body.home-page .hero-slide[data-hero-slide="ki"] .hero-image {
object-position: 50% 0%;
}
body.home-page .hero-slide[data-hero-slide="schenck"] .hero-image {
object-position: 50% 40%;
}
body.home-page .hero-slide[data-hero-slide="career"] .hero-image {
object-position: 50% 0%;
}
body.home-page .hero-slide[data-hero-slide="history"] .hero-image {
object-position: 50% 0%;
}
body.home-page .hero-slide:first-child .hero-content {
width: min(1040px, calc(100% - 160px));
}
body.home-page .hero-slide[data-hero-slide="ki"] .hero-overlay {
background: linear-gradient(180deg, rgba(16,42,67,.38), rgba(16,42,67,.46) 55%, rgba(16,42,67,.58));
}
body.home-page .hero-slide[data-hero-slide="schenck"] .hero-overlay {
background: linear-gradient(180deg, rgba(16,42,67,.42), rgba(16,42,67,.48) 60%, rgba(16,42,67,.52));
}
body.home-page .hero-slide[data-hero-slide="career"] .hero-overlay {
background: linear-gradient(180deg, rgba(16,42,67,.36), rgba(16,42,67,.44) 50%, rgba(16,42,67,.54));
}
body.home-page .hero-slide[data-hero-slide="history"] .hero-overlay {
background: linear-gradient(180deg, rgba(16,42,67,.36), rgba(16,42,67,.46) 50%, rgba(16,42,67,.58));
}
body.home-page .services-grid {
width: var(--ao-content-width);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
}
body.home-page .services-grid .service-card {
width: 100%;
}
body.home-page .service-card-visual {
inset: 8px;
    transform: scale(1);
    transition: transform var(--ao-component-hover), border-radius var(--ao-component-hover);
}
body.home-page .service-card:is(:hover, :focus-visible) .service-card-visual {
inset: 8px;
    transform: scale(1.035);
    border-radius: 31px;
}
body.home-page .service-card > :is(.service-title, .service-number) {
transform-origin: left center;
    transition: transform var(--ao-component-hover);
}
body.home-page .service-card:is(:hover, :focus-visible) > :is(.service-title, .service-number) {
transform: scale(1.03);
}
body.home-page .service-card-image {
transition: transform var(--ao-component-hover);
}
body.home-page #service-public-relations .service-card-image {
object-position: 50% 0%;
}
body.home-page #service-marketing .service-card-image {
object-position: 50% 25%;
}
body.home-page .selected-projects {
padding-inline: var(--ao-page-gutter);
}
body.home-page .selected-projects-inner {
max-width: 1328px;
}
body.home-page .why-ao,
body.home-page .why-ao.is-expanded {
height: 528px; padding: 64px var(--ao-page-gutter);
}
body.home-page .why-ao-inner {
max-width: 1328px;
    height: 400px;
    display: grid;
    grid-template-columns: minmax(0, .45fr) minmax(0, .55fr);
    column-gap: 0;
    align-items: center;
    transition: grid-template-columns 400ms cubic-bezier(.22, .61, .36, 1) 120ms;
}
body.home-page .why-ao.is-expanded .why-ao-inner {
grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
}
body.home-page .why-ao-content {
display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 200ms ease-out 520ms, transform 200ms ease-out 520ms;
}
body.home-page .why-ao.is-expanded .why-ao-content {
opacity: 0;
    visibility: hidden;
    transform: translateX(-12px);
    pointer-events: none;
    transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s 120ms;
}
body.home-page .why-ao .why-ao-content > :is(.why-ao-eyebrow, h2, .why-ao-copy, .why-ao-about):where(.why-ao-eyebrow, h2, .why-ao-copy) {
position: static;
    inset: auto;
    flex-shrink: 0;
    max-width: none;
    transition: none;
}
body.home-page .why-ao .why-ao-content > .why-ao-eyebrow {
width: var(--home-editorial-width);
}
body.home-page .why-ao .why-ao-content > h2 {
width: var(--home-editorial-width); font-size: 42px; font-weight: 900; line-height: 50px;
}
body.home-page .why-ao .why-ao-content > h2 span {
color: var(--ao-orange);
}
body.home-page .why-ao .why-ao-content > .why-ao-copy {
width: var(--home-editorial-width); font-size: 17px; line-height: 28px;
}
body.home-page .why-ao .why-ao-process {
position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    height: 400px;
    padding: 0;
    margin: 0;
    transform: translateY(0);
    box-shadow: 0 8px 24px rgba(16,42,67,.08);
    transition: background var(--ao-component-hover), box-shadow var(--ao-component-hover), transform var(--ao-component-hover);
}
body.home-page .why-ao:not(.is-expanded) .why-ao-process:is(:hover, :focus-within) {
background: #173a57;
    box-shadow: 0 12px 28px rgba(16,42,67,.15);
    transform: translateY(-2px);
}
body.home-page .why-ao .why-ao-process > :is(.why-ao-process-eyebrow, h3, .why-ao-process-intro, .why-ao-process-footer) {
position: absolute;
    left: 32px;
    margin: 0;
    transition: opacity 200ms ease-out;
}
body.home-page .why-ao .why-ao-process-eyebrow {
top: 32px; width: 280px; font-size: 18px;
}
body.home-page .why-ao .why-ao-process h3 {
top: 68px; width: 560px; font-size: 28px; line-height: 36px;
}
body.home-page .why-ao .why-ao-process-intro {
top: 112px; width: 720px; font-size: 13.5px; line-height: 20px; transition: opacity 120ms ease-out, visibility 0s 120ms;
}
body.home-page .why-ao.is-expanded .why-ao-process-intro {
transition: opacity 200ms ease-out 520ms, visibility 0s 520ms;
}
body.home-page .why-ao .why-ao-process-footer {
top: auto; bottom: 30px; width: 600px; font-size: 14px; line-height: 22px;
}
body.home-page .why-ao .why-ao-motif {
left: auto; right: -76px; top: -54px; transition: opacity 200ms ease-out;
}
body.home-page .why-ao-process > .why-ao-flows {
display: none;
}
body.home-page .why-ao .why-ao-toggle {
transition: none;
}
body.home-page .why-ao .why-ao-toggle::before {
content: '';
    position: absolute;
    top: 37px;
    right: 32px;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    color: var(--ao-orange);
    transform: rotate(45deg);
    transition: transform var(--ao-component-hover);
}
body.home-page .why-ao:not(.is-expanded) .why-ao-process:is(:hover, :focus-within) .why-ao-toggle::before {
transform: translateX(3px) rotate(45deg);
}
body.home-page .why-ao.is-expanded .why-ao-toggle {
inset: 24px 24px auto auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); z-index: 3; transition: background var(--ao-component-hover);
}
body.home-page .why-ao.is-expanded .why-ao-toggle::before,
body.home-page .why-ao.is-expanded .why-ao-toggle::after {
content: '';
    position: absolute;
    left: 12px;
    top: 19px;
    width: 16px;
    height: 2px;
    border: 0;
    background: currentColor;
    color: white;
    transform: rotate(45deg);
}
body.home-page .why-ao.is-expanded .why-ao-toggle::after {
transform: rotate(-45deg);
}
body.home-page .why-ao.is-expanded .why-ao-toggle:is(:hover, :focus-visible) {
background: var(--ao-orange);
}
body.home-page .why-ao-preview {
display: block;
    position: absolute;
    left: 50%;
    top: 38px;
    width: 612px;
    height: 344px;
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: none;
    transition: opacity 200ms ease-out 520ms;
}
body.home-page .why-ao.is-expanded .why-ao-preview {
opacity: 0; visibility: hidden; transition: opacity 120ms ease-out, visibility 0s 120ms;
}
body.home-page .why-ao .why-ao-preview :is(.why-ao-steps, .why-ao-flows) {
display: block; position: absolute; inset: 0; width: 612px; height: 344px; margin: 0; transform: none; transition: none;
}
body.home-page .why-ao .why-ao-preview .why-ao-step {
width: 84px; height: 78px; transition: none;
}
body.home-page .why-ao .why-ao-preview .why-ao-step-1 {
left: 54px; top: 184px;
}
body.home-page .why-ao .why-ao-preview .why-ao-step-2 {
left: 156px; top: 136px;
}
body.home-page .why-ao .why-ao-preview .why-ao-step-3 {
left: 258px; top: 160px;
}
body.home-page .why-ao .why-ao-preview .why-ao-step-4 {
left: 360px; top: 190px;
}
body.home-page .why-ao .why-ao-preview .why-ao-step-5 {
left: 462px; top: 142px;
}
body.home-page .why-ao .why-ao-preview .why-ao-step-surface {
left: 22px; top: 0; width: 40px; height: 40px; border-radius: 20px;
}
body.home-page .why-ao .why-ao-preview .why-ao-step-number {
left: 22px; top: 14px; width: 40px; font-size: 10px; font-weight: 500; text-align: center; color: white;
}
body.home-page .why-ao .why-ao-preview .why-ao-step-title {
left: 0; top: 54px; width: 84px; font-size: 11.5px; font-weight: 400; text-align: center;
}
body.home-page .why-ao .why-ao-process > .why-ao-steps {
display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    position: absolute;
    inset: 156px auto auto 32px;
    width: calc(var(--ao-content-width) - 64px);
    height: 184px;
    margin: 0;
    transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
    transition: opacity 120ms ease-out, visibility 0s 120ms;
}
body.home-page .why-ao.is-expanded .why-ao-process > .why-ao-steps {
opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 200ms ease-out 520ms, visibility 0s 520ms;
}
body.home-page .why-ao .why-ao-process > .why-ao-steps .why-ao-step {
position: relative;
    inset: auto;
    width: 100%;
    height: 184px;
    padding: 0;
    border-radius: var(--ao-radius-card);
    transition: none;
}
body.home-page .why-ao .why-ao-process > .why-ao-steps .why-ao-step-surface {
inset: 0; width: 100%; height: 100%; border-radius: var(--ao-radius-card); background: #234b70; transition: background var(--ao-component-hover);
}
body.home-page .why-ao .why-ao-process > .why-ao-steps .why-ao-step-number {
left: 18px; top: 18px; width: calc(100% - 36px); font-size: 13px; font-weight: 600; color: var(--ao-orange); text-align: left; transition: color var(--ao-component-hover);
}
body.home-page .why-ao .why-ao-process > .why-ao-steps .why-ao-step-title {
left: 18px; top: 48px; width: calc(100% - 36px); font-size: 18px; font-weight: 600; line-height: 24px; text-align: left; transition: transform var(--ao-component-hover);
}
body.home-page .why-ao .why-ao-process > .why-ao-steps .why-ao-step-detail {
left: 18px; top: 80px; width: calc(100% - 36px); height: 88px; opacity: 1; visibility: visible; color: #cbd9e1; font-size: clamp(12px, .92vw, 13px); line-height: clamp(18px, 1.32vw, 19px); transition: color var(--ao-component-hover);
}
body.home-page .why-ao .why-ao-process > .why-ao-steps :is(.why-ao-step-summary, .why-ao-step-hover-detail) {
display: block; position: absolute; inset: 0; transition: opacity var(--ao-component-hover);
}
body.home-page .why-ao .why-ao-process > .why-ao-steps .why-ao-step-hover-detail {
opacity: 0;
}
body.home-page .why-ao.is-expanded .why-ao-process > .why-ao-steps .why-ao-step:is(:hover, .is-focused) .why-ao-step-surface {
background: var(--ao-orange);
}
body.home-page .why-ao.is-expanded .why-ao-process > .why-ao-steps .why-ao-step:is(:hover, .is-focused) :is(.why-ao-step-number, .why-ao-step-detail) {
color: white;
}
body.home-page .why-ao.is-expanded .why-ao-process > .why-ao-steps .why-ao-step:is(:hover, .is-focused) .why-ao-step-title {
transform: translateX(1px);
}
body.home-page .why-ao.is-expanded .why-ao-process > .why-ao-steps .why-ao-step:is(:hover, .is-focused) .why-ao-step-summary {
opacity: 0;
}
body.home-page .why-ao.is-expanded .why-ao-process > .why-ao-steps .why-ao-step:is(:hover, .is-focused) .why-ao-step-hover-detail {
opacity: 1;
}

}
@media (min-width: 1201px), (orientation: landscape) and (min-width: 951px) and (max-width: 1199px) and (min-height: 501px), (orientation: landscape) and (min-width: 1024px) and (max-width: 1400px) and (min-height: 501px) and (any-pointer: coarse) {
body.home-page {
/* Richer soft tint from the existing light blue and AO process blue. */
    --home-light-blue: #d7e2ef;
    --home-logo-scale: .75;
    --home-logo-gap: 78px;
}
body.home-page .trust-bridge {
height: auto; padding: var(--home-space-lg) var(--ao-page-gutter) var(--home-space-sm);
}
body.home-page :is(.trust-copy, .trust-title, .trust-button):where(.trust-copy, .trust-title) {
position: static; inset: auto; height: auto; transform: none;
}
body.home-page .trust-copy {
display: block; width: min(1040px, 100%); max-width: 100%; margin: 0 auto;
}
body.home-page .trust-title {
display: block; width: min(1000px, 100%); max-width: 100%; margin: var(--home-space-md) auto 0; line-height: 48px;
}
body.home-page .partner-marquee-track {
width: max-content; animation-name: home-partner-marquee; animation-duration: 35.606128s;
}
body.home-page .partner-logo-set {
width: max-content; flex: 0 0 auto; gap: var(--home-logo-gap); padding-right: var(--home-logo-gap);
}
body.home-page .partner-marquee .partner-logo-slot:nth-child(n) {
position: relative; inset: auto; width: calc((var(--logo-footprint) - 4px) * var(--home-logo-scale) + 4px); flex: 0 0 calc((var(--logo-footprint) - 4px) * var(--home-logo-scale) + 4px); height: 112px; overflow: hidden;
}
body.home-page .partner-logo-slot img {
position: absolute; left: 50%; top: 50%; width: calc(var(--logo-image-width) * var(--home-logo-scale)); height: auto; max-width: none; transform: translate(calc(-50% + var(--logo-offset-x) * var(--home-logo-scale)), calc(-50% + var(--logo-offset-y) * var(--home-logo-scale)));
}
body.home-page .partner-logo-slot:nth-child(1) {
--logo-footprint: 264.0000px; --logo-image-width: 268.9655px; --logo-offset-x: 0.0000px; --logo-offset-y: 0.0000px;
}
body.home-page .partner-logo-slot:nth-child(2) {
--logo-footprint: 180.0000px; --logo-image-width: 180.0000px; --logo-offset-x: 0.0000px; --logo-offset-y: 0.0000px;
}
body.home-page .partner-logo-slot:nth-child(3) {
--logo-footprint: 114.1176px; --logo-image-width: 121.8976px; --logo-offset-x: 0.0000px; --logo-offset-y: 0.0000px;
}
body.home-page .partner-logo-slot:nth-child(4) {
--logo-footprint: 264.0000px; --logo-image-width: 270.1299px; --logo-offset-x: 0.0000px; --logo-offset-y: -0.1688px;
}
body.home-page .partner-logo-slot:nth-child(5) {
--logo-footprint: 264.0000px; --logo-image-width: 260.0000px; --logo-offset-x: 0.0000px; --logo-offset-y: 0.0000px;
}
body.home-page .partner-logo-slot:nth-child(6) {
--logo-footprint: 264.0000px; --logo-image-width: 260.1449px; --logo-offset-x: -0.0725px; --logo-offset-y: -0.1449px;
}
body.home-page .partner-logo-slot:nth-child(7) {
--logo-footprint: 264.0000px; --logo-image-width: 267.3684px; --logo-offset-x: 1.5789px; --logo-offset-y: 1.0526px;
}
body.home-page .partner-logo-slot:nth-child(8) {
--logo-footprint: 147.2836px; --logo-image-width: 154.2277px; --logo-offset-x: 0.0842px; --logo-offset-y: 0.0000px;
}
body.home-page .partner-logo-slot:nth-child(9) {
--logo-footprint: 264.0000px; --logo-image-width: 260.0000px; --logo-offset-x: 0.0000px; --logo-offset-y: 0.0677px;
}
body.home-page .partner-logo-slot:nth-child(10) {
--logo-footprint: 101.4328px; --logo-image-width: 96.0000px; --logo-offset-x: 0.0000px; --logo-offset-y: 0.0000px;
}
body.home-page .partner-logo-slot:nth-child(11) {
--logo-footprint: 264.0000px; --logo-image-width: 260.0000px; --logo-offset-x: 0.0000px; --logo-offset-y: 0.0000px;
}
body.home-page .partner-logo-slot:nth-child(12) {
--logo-footprint: 131.1351px; --logo-image-width: 126.6722px; --logo-offset-x: 0.0000px; --logo-offset-y: 0.0000px;
}
body.home-page .partner-logo-slot:nth-child(13) {
--logo-footprint: 101.4118px; --logo-image-width: 97.4118px; --logo-offset-x: 0.0000px; --logo-offset-y: 0.0000px;
}
body.home-page .partner-logo-slot:nth-child(14) {
--logo-footprint: 264.0000px; --logo-image-width: 260.0000px; --logo-offset-x: 0.0000px; --logo-offset-y: 0.0000px;
}
body.home-page .partner-logo-slot:nth-child(15) {
--logo-footprint: 264.0000px; --logo-image-width: 260.6108px; --logo-offset-x: 0.0339px; --logo-offset-y: 0.0000px;
}
body.home-page .partner-logo-slot:nth-child(16) {
--logo-footprint: 177.6471px; --logo-image-width: 207.3498px; --logo-offset-x: -0.3348px; --logo-offset-y: 0.0000px;
}
body.home-page .partner-logo-slot:nth-child(17) {
--logo-footprint: 107.0588px; --logo-image-width: 109.8419px; --logo-offset-x: -0.6698px; --logo-offset-y: -0.6698px;
}
@keyframes home-partner-marquee {
from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
body.home-page .partner-marquee-track {
animation: none;
}

}
body.home-page .selected-projects {
height: auto; min-height: 0; padding-block: var(--home-space-lg); background: var(--ao-orange); color: var(--ao-white);
}
body.home-page .selected-projects-header {
height: 108px; border-bottom-color: rgba(255,255,255,.32);
}
body.home-page .selected-projects-header h2 {
top: 32px; color: var(--ao-white);
}
body.home-page :is(.selected-projects-eyebrow, .selected-project-number, .selected-project-identity p, .selected-project-details .selected-project-category) {
color: var(--ao-blue);
}
body.home-page .selected-project-details {
color: rgba(255,255,255,.92);
}
body.home-page .selected-project-row {
border-bottom-color: rgba(255,255,255,.32); transition: border-color var(--ao-component-hover);
}
body.home-page .selected-project-row:is(:hover, :focus-visible) {
border-bottom-color: rgba(255,255,255,.65);
}
body.home-page .selected-project-identity h3 {
transition: transform var(--ao-component-hover);
}
body.home-page .selected-project-row:is(:hover, :focus-visible) .selected-project-identity h3 {
transform: translateX(2px);
}
body.home-page .selected-project-row:focus-visible {
outline-color: var(--ao-white);
}
body.home-page .selected-project-arrow {
color: var(--ao-white);
}
body.home-page .selected-project-arrow img {
opacity: 0;
}
body.home-page .selected-project-arrow::before {
inset: 2px; border: 1.4px solid rgba(255,255,255,.7); background: transparent; opacity: 1; transition: background var(--ao-component-hover), border-color var(--ao-component-hover), box-shadow var(--ao-component-hover);
}
body.home-page .selected-project-arrow span {
transition: color var(--ao-component-hover), transform var(--ao-component-hover);
}
body.home-page .selected-project-row:is(:hover, :focus-visible) .selected-project-arrow::before {
inset: 2px; background: var(--ao-white); border-color: var(--ao-white); box-shadow: 0 5px 12px rgba(16,42,67,.16);
}
body.home-page .selected-project-row:is(:hover, :focus-visible) .selected-project-arrow span {
color: var(--ao-blue); transform: translateX(2px);
}
body.home-page .testimonials {
--home-quote-height: 220px;
    --home-portrait-top: calc(var(--home-space-lg) + var(--home-quote-height) + var(--home-space-md));
    --home-name-top: calc(var(--home-portrait-top) + 92px + var(--home-space-detail));
    --home-role-top: calc(var(--home-name-top) + 28px + 2px);
    --home-dots-top: calc(var(--home-role-top) + 26px + var(--home-space-sm));
    height: calc(var(--home-dots-top) + 20px + var(--home-space-lg));
    background: var(--ao-blue);
    color: var(--ao-white);
}
body.home-page .testimonial-quote {
top: var(--home-space-lg); height: var(--home-quote-height); color: var(--ao-white);
}
body.home-page .testimonial-portrait {
top: var(--home-portrait-top);
}
body.home-page .testimonial-slide:nth-child(1) .testimonial-portrait {
object-position: 50% 25%;
}
body.home-page .testimonial-slide:nth-child(2) .testimonial-portrait {
object-position: 50% 15%;
}
body.home-page .testimonial-slide:nth-child(3) .testimonial-portrait {
object-position: 50% 0%;
}
body.home-page .testimonial-name {
top: var(--home-name-top); color: var(--ao-white);
}
body.home-page .testimonial-company {
top: var(--home-role-top); color: #cbd9e1;
}
body.home-page .testimonial-pagination {
top: var(--home-dots-top);
}
body.home-page .services-section {
height: auto; padding: var(--home-space-lg) var(--ao-page-gutter); background: var(--ao-white);
}
body.home-page .services-title {
position: relative; inset: auto; display: block; width: min(900px, 100%); height: auto; margin: 0 auto var(--home-space-md); transform: none; color: var(--ao-blue); font-size: clamp(54px, 4.03vw, 58px); line-height: 1.172414;
}
body.home-page .services-grid {
position: relative; inset: auto; height: auto; margin: 0 auto; transform: none; grid-template-rows: auto;
}
body.home-page .service-card:focus-visible {
outline-color: var(--ao-blue);
}
body.home-page .why-ao,
body.home-page .why-ao.is-expanded {
height: calc(400px + 2 * var(--home-space-lg)); padding-block: var(--home-space-lg); background: var(--home-light-blue);
}
body.home-page :is(.trust-title, .services-title, .testimonial-quote p) {
text-wrap: balance;
}
body.home-page .why-ao-copy {
text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
body.home-page .selected-project-row:is(:hover, :focus-visible) .selected-project-identity h3,
body.home-page .selected-project-row:is(:hover, :focus-visible) .selected-project-arrow span,
body.home-page .service-card:is(:hover, :focus-visible) :is(.service-card-visual, .service-card-image, .service-title, .service-number) {
transform: none;
}
body.home-page .why-ao:not(.is-expanded) .why-ao-process:is(:hover, :focus-within) {
transform: none;
}

}

}
html[data-ao-tablet-header] body {
--header-height: 88px;
}

/* Full-width history photograph: prioritise the historic laptop branding. */
body.home-page .hero-slide[data-hero-slide="history"] .hero-image[src$="AOPR-Computer.jpg"] {
  object-fit: cover;
  object-position: 56% 100%;
}

/* Keep the career photograph focused on the table within the existing frame. */
body.home-page .hero-slide[data-hero-slide="career"] img.hero-image {
  object-position: 50% 60%;
  transform: scale(1.08);
  transform-origin: 50% 60%;
}

/* Match the client-logo footprint while preserving the tall Giants crest. */
body.home-page .partner-logo-slot.partner-logo-giants {
  --logo-footprint: 110px;
  --logo-image-width: 69.63px;
  --logo-offset-x: 0px;
  --logo-offset-y: 0px;
}

/* Slightly tighten this card around the seated interview subject. */
body.home-page #service-marketing .service-card-image {
  object-position:100% 100%; transform:scale(1.12); transform-origin:100% 100%;
}
body.home-page #service-marketing:is(:hover,:focus-visible) .service-card-image { transform:scale(1.1312); }
@media (prefers-reduced-motion:reduce) {
  body.home-page #service-marketing:is(:hover,:focus-visible) .service-card-image { transform:scale(1.12); }
}