.case-page main :where(h1, h2, h3, p) {
margin: 0;
}
.case-grid {
width: calc(100% - 48px); max-width: 1288px; margin-inline: auto;
}
.case-hero {
position: relative; height: 580px; overflow: hidden; background: var(--ao-blue); color: white;
}
.case-hero-image,
.case-hero-overlay {
position: absolute; inset: 0; width: 100%; height: 100%;
}
.case-hero-image {
object-fit: cover; border-radius: 22px;
}
.case-hero-overlay {
background: rgba(10,22,41,.72);
}
.case-hero-inner {
position: relative; height: 100%;
}
.case-hero-title {
position: absolute; left: 0; top: var(--case-title-top, 214px); width: 680px; max-width: 100%; font-size: var(--case-title-size, 48px); font-weight: 900; line-height: var(--case-title-line, 54px);
}
.case-hero-copy {
position: absolute; right: 0; top: var(--case-copy-top, 244px); width: 484px; max-width: 100%; font-size: 18px; line-height: var(--case-copy-line, 28px); text-align: var(--case-copy-align, left);
}
.case-tags {
position: absolute; left: 0; top: var(--case-tags-top, 482px); display: flex; align-items: center;
}
.case-tag {
display: grid; place-items: center; flex-shrink: 0; height: 38px; border-radius: 19px; background: var(--ao-orange); font-size: 13px; font-weight: 600; line-height: 22px; white-space: nowrap;
}
.case-intro {
height: 500px;
}
.case-intro-inner {
position: relative; width: calc(100% - 48px); max-width: 1000px; height: 100%; margin-inline: auto;
}
.case-intro-title {
position: absolute; top: 64px; font-size: 25px; font-weight: 700; line-height: 34px;
}
.case-intro-copy {
position: absolute; top: 132px; width: 100%; font-size: 18px; line-height: 31px;
}
.case-intro-copy-second {
top: 272px;
}
.case-visual-strip {
display: grid; grid-template-columns: 350fr 350fr 350fr 360fr; gap: 10px; height: 320px; overflow: hidden; background: #f7fafc;
}
.case-strip-image {
position: relative; min-width: 0; height: 320px; overflow: hidden;
}
.case-strip-image img {
display: block; width: 100%; height: 100%; object-fit: cover;
}
.case-aqualon .case-strip-image:nth-child(3) img {
position: absolute; width: 162.57%; height: 100%; left: -31.31%; top: .03%; object-fit: fill;
}
.case-process {
height: 754px; background: white;
}
.case-process-inner {
position: relative; height: 100%;
}
.case-process-eyebrow {
position: absolute; top: 56px; font-size: 14px; font-weight: 500; line-height: 22px; color: #6e8192;
}
.case-process-title {
position: absolute; top: var(--case-process-title-top, 88px); width: var(--case-process-title-width, 1000px); max-width: 100%; font-size: 38px; font-weight: 700; line-height: var(--case-process-title-line, 46px);
}
.case-process-cards {
position: absolute; top: 238px; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 29px;
}
.case-process-card {
position: relative; height: 440px; min-width: 0;
}
.case-process-surface {
position: absolute; inset: 5px; border-radius: 22px; background: var(--ao-light-blue); transition: inset var(--ao-hover-normal) ease-out, border-radius var(--ao-hover-normal) ease-out, box-shadow var(--ao-hover-normal) ease-out;
}
.case-process-card:hover .case-process-surface {
inset: 0 1px 5px; border-radius: var(--ao-radius-container); box-shadow: 0 5px 0 rgba(16,42,67,.11);
}
.case-process-number,
.case-process-card-title,
.case-process-card-copy {
position: absolute; left: 30px; right: 30px;
}
.case-process-number {
top: 28px; color: #6e8192; font-size: 14px; font-weight: 500; line-height: 22px;
}
.case-process-card-title {
top: 66px; font-size: 28px; font-weight: 700; line-height: 36px;
}
.case-process-card-copy {
top: 132px; font-size: 16px; line-height: 28px;
}
.case-feature {
height: 530px;
}
.case-feature-inner {
position: relative; height: 100%;
}
.case-feature-eyebrow {
position: absolute; top: 36px; font-size: 12px; font-weight: 500; line-height: 18px;
}
.case-feature-title {
position: absolute; top: 72px; max-width: 1000px; font-size: 21px; font-weight: 600; line-height: 30px;
}
.case-aqualon .case-feature-title {
max-width: 1120px;
}
.case-feature-images {
position: absolute; top: 156px; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.case-feature-image {
position: relative; height: 330px; overflow: hidden; border-radius: var(--ao-radius-card);
}
.case-feature-image img {
display: block; width: 100%; height: 100%; object-fit: cover;
}
.case-aqualon .case-feature-image:first-child img {
position: absolute; width: 119.68%; height: 126.28%; left: -12.19%; top: -6.6%; object-fit: fill;
}
.case-contact {
height: 580px; background: #f2f7fb;
}
.case-contact-inner,
.case-contact-copy {
position: relative; height: 100%;
}
.case-contact-copy {
max-width: 660px;
}
.case-contact-eyebrow {
position: absolute; top: 108px; color: var(--ao-orange); font-size: 14px; font-weight: 600; line-height: 22px;
}
.case-contact-title {
position: absolute; top: 144px; width: 660px; max-width: 100%; font-size: 42px; font-weight: 900; line-height: 48px;
}
.case-contact-body {
position: absolute; top: 260px; width: 620px; max-width: 100%; font-size: 18px; line-height: 30px;
}
.case-contact-card {
position: absolute; top: 56px; right: 44px; width: 420px; height: 468px; overflow: hidden; border-radius: 26px; background: var(--ao-blue); color: white;
}
.case-contact-motif {
position: absolute; width: 560px; height: 560px; top: -18px; right: -220px; opacity: .11; object-fit: contain; pointer-events: none;
}
.case-contact-portrait {
position: absolute; left: 95px; top: 34px; width: 230px; height: 230px;
}
.case-contact-name {
position: absolute; top: 292px; left: 36px; right: 36px; font-size: 24px; font-weight: 700; line-height: 32px;
}
.case-contact-role {
position: absolute; top: 326px; left: 36px; right: 36px; font-size: 15px; line-height: 24px;
}
.case-contact-links {
position: absolute; left: 36px; right: 36px; top: 370px; display: grid; gap: 4px;
}
.case-contact-link {
position: relative; display: flex; align-items: center; height: 30px; padding-left: 36px; font-size: 15px; line-height: 24px; color: white; transition: color var(--ao-hover-normal) ease-out;
}
.case-contact-icon {
position: absolute; left: 0; top: 5px; width: 20px; height: 20px; opacity: 1; transition: opacity var(--ao-hover-normal) ease-out;
}
.case-contact-icon-hover {
opacity: 0;
}
.case-contact-link:is(:hover, :focus-visible) {
color: var(--ao-orange);
}
.case-contact-link:is(:hover, :focus-visible) .case-contact-icon {
opacity: 0;
}
.case-contact-link:is(:hover, :focus-visible) .case-contact-icon-hover {
opacity: 1;
}
.case-related {
height: 700px;
}
.case-related-inner {
position: relative; height: 100%;
}
.case-related-eyebrow {
position: absolute; top: 64px; color: var(--ao-orange); font-size: 14px; font-weight: 600; line-height: 22px;
}
.case-related-title {
position: absolute; top: 96px; max-width: 820px; font-size: 38px; font-weight: 900; line-height: 44px;
}
.case-related-grid {
position: absolute; top: 178px; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 400px)); gap: 44px;
}
.case-page :is(.case-project-cta, .case-contact-link, .case-all-projects):where(.case-contact-link):focus-visible {
outline: 2px solid var(--ao-orange); outline-offset: 4px;
}
@media (max-width: 1399px) {
.case-grid,
.case-intro-inner {
width: calc(100% - 96px);
}
.case-hero-title {
width: 56%; font-size: 44px; line-height: 50px;
}
.case-hero-copy {
width: 38%; font-size: 16px; line-height: 26px;
}
.case-tag {
font-size: 12px;
}
.case-process {
height: auto; padding-block: 56px 70px;
}
.case-process-eyebrow,
.case-process-title,
.case-process-cards {
position: relative; top: auto;
}
.case-process-title {
margin-top: 10px !important; font-size: 34px; line-height: 42px;
}
.case-process-cards {
margin-top: 48px; gap: 20px; align-items: stretch;
}
.case-process-card {
height: auto; min-height: 440px; padding: 28px 30px 36px;
}
.case-process-number,
.case-process-card-title,
.case-process-card-copy {
position: relative; top: auto; left: auto; right: auto;
}
.case-process-card-title {
margin-top: 16px !important;
}
.case-process-card-copy {
margin-top: 30px !important;
}
.case-contact-copy {
width: 55%;
}
.case-contact-title {
font-size: 38px; line-height: 44px;
}
.case-contact-body {
font-size: 16px; line-height: 28px;
}
.case-contact-card {
width: 36%; right: 0;
}
.case-contact-portrait {
left: calc(50% - 115px);
}
.case-related {
height: auto; padding-block: 56px 42px;
}
.case-related-eyebrow,
.case-related-title,
.case-related-grid {
position: relative; top: auto;
}
.case-related-title {
margin-top: 10px !important; width: calc(100% - 200px); font-size: 34px; line-height: 42px;
}
.case-related-grid {
margin-top: 38px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
}

}
@media (max-width: 1050px) {
.case-hero {
height: auto; min-height: 580px;
}
.case-hero-inner {
height: auto; padding-block: 110px 52px;
}
.case-hero-title,
.case-hero-copy,
.case-tags {
position: relative; top: auto; width: 100%;
}
.case-hero-title {
max-width: 700px;
}
.case-hero-copy {
max-width: 660px; margin-top: 32px !important; text-align: left;
}
.case-tags {
margin-top: 32px; flex-wrap: wrap; gap: 12px;
}
.case-tag {
margin-left: 0 !important;
}
.case-tag > span {
transform: none !important;
}
.case-intro {
height: auto; padding-block: 56px;
}
.case-intro-title,
.case-intro-copy {
position: static;
}
.case-intro-copy {
margin-top: 28px !important;
}
.case-visual-strip {
height: auto; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.case-process-cards {
grid-template-columns: minmax(0, 1fr);
}
.case-process-card {
min-height: 300px;
}
.case-feature {
height: auto; padding-block: 36px 44px;
}
.case-feature-eyebrow,
.case-feature-title,
.case-feature-images {
position: relative; top: auto;
}
.case-feature-title {
margin-top: 20px !important;
}
.case-feature-images {
margin-top: 32px;
}
.case-contact {
height: auto; padding-block: 56px;
}
.case-contact-inner {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px;
}
.case-contact-copy {
width: 100%;
}
.case-contact-eyebrow,
.case-contact-title,
.case-contact-body {
position: relative; top: auto;
}
.case-contact-title {
margin-top: 14px !important;
}
.case-contact-body {
margin-top: 22px !important;
}
.case-contact-card {
position: relative; top: auto; width: 420px; max-width: 100%;
}
.case-contact-links {
left: 28px; right: 28px;
}
.case-related-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

}
@media (max-width: 700px) {
.case-grid,
.case-intro-inner {
width: calc(100% - 48px);
}
.case-hero-inner {
padding-block: 70px 44px;
}
.case-hero-title {
font-size: 36px; line-height: 42px; overflow-wrap: break-word;
}
.case-hero-title br {
display: none;
}
.case-intro-copy {
font-size: 16px; line-height: 28px;
}
.case-visual-strip {
grid-template-columns: minmax(0, 1fr);
}
.case-strip-image {
height: 320px;
}
.case-process-title {
font-size: 30px; line-height: 38px;
}
.case-process-card {
padding-inline: 24px;
}
.case-feature-images {
grid-template-columns: minmax(0, 1fr);
}
.case-contact-title {
font-size: 32px; line-height: 39px;
}
.case-contact-title br {
display: none;
}
.case-contact-name,
.case-contact-role {
left: 28px; right: 28px;
}
.case-contact-link {
font-size: 13px;
}
.case-related-title {
width: 100%; font-size: 30px; line-height: 38px;
}
.case-related-grid {
grid-template-columns: minmax(0, 1fr); max-width: 400px; margin-inline: auto;
}

}
@media (prefers-reduced-motion: reduce) {
.case-page main *,
.case-page main *::before {
transition: none !important; animation: none !important;
}

}

/* Preserve faces and the action within the template's cover crops. */
.case-bayer-giants-leverkusen .case-strip-image:nth-child(2) img { object-position:50% 58%; }
.case-bayer-giants-leverkusen .case-strip-image:nth-child(3) img { object-position:50% 30%; }
.case-bayer-giants-leverkusen .case-strip-image:nth-child(4) img { object-position:50% 35%; }
.case-bayer-giants-leverkusen .case-feature-image:first-child img { object-position:50% 40%; }
.case-bayer-giants-leverkusen .case-feature-image:last-child img { object-position:50% 62%; }

/* Allow the Giants case copy to flow within the existing section containers. */
body.case-bayer-giants-leverkusen .case-hero-eyebrow {
  display:block; margin-bottom:20px; font-size:12px; font-weight:500; line-height:18px;
}
body.case-bayer-giants-leverkusen .case-intro { height:auto; padding-block:64px; }
body.case-bayer-giants-leverkusen .case-intro-inner { height:auto; }
body.case-bayer-giants-leverkusen :is(.case-intro-title,.case-intro-copy) { position:relative; inset:auto; }
body.case-bayer-giants-leverkusen .case-intro .case-process-eyebrow { margin-bottom:20px; }
body.case-bayer-giants-leverkusen .case-intro-copy { margin-top:28px!important; max-width:1000px; }
body.case-bayer-giants-leverkusen .case-feature { height:auto; padding-block:36px 44px; }
body.case-bayer-giants-leverkusen .case-feature-inner { height:auto; }
body.case-bayer-giants-leverkusen :is(.case-feature-eyebrow,.case-feature-title,.case-feature-images) { position:relative; inset:auto; }
body.case-bayer-giants-leverkusen .case-feature-title { margin-top:20px!important; }
body.case-bayer-giants-leverkusen .case-feature-images { margin-top:32px; }
@media (max-width:1100px) {
  body.case-bayer-giants-leverkusen .case-intro { padding-block:56px; }
}