#seo-case-study-gallery {
--case-ink: #0b0c10;
--case-paper: #f4f1e8;
--case-white: #fffefa;
--case-acid: #c8ff2e;
--case-purple: #6747f5;
--case-line: rgba(11, 12, 16, .17);
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(56px, 5vw, 72px) 0;
color: var(--case-ink);
background:
linear-gradient(rgba(11, 12, 16, .032) 1px, transparent 1px),
linear-gradient(90deg, rgba(11, 12, 16, .032) 1px, transparent 1px),
var(--case-paper);
background-size: 44px 44px;
font-family: "Manrope", Arial, sans-serif;
}
#seo-case-study-gallery::after {
content: "";
position: absolute;
z-index: -1;
left: -8%;
right: -8%;
bottom: 13%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--case-acid), transparent);
opacity: .85;
transform: rotate(-8deg);
}
#seo-case-study-gallery *,
#seo-case-study-gallery *::before,
#seo-case-study-gallery *::after { box-sizing: border-box; }
#seo-case-study-gallery h2,
#seo-case-study-gallery h3,
#seo-case-study-gallery h4,
#seo-case-study-gallery p { margin: 0; }
#seo-case-study-gallery button,
#seo-case-study-gallery a { font: inherit; }
#seo-case-study-gallery .case-shell {
width: min(1280px, calc(100vw - 48px));
margin-inline: auto;
}
#seo-case-study-gallery .case-header {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
align-items: end;
gap: clamp(32px, 6vw, 82px);
margin-bottom: clamp(28px, 3vw, 40px);
}
#seo-case-study-gallery .case-heading {
max-width: 820px;
font-family: "Poppins", Arial, sans-serif;
font-size: clamp(38px, 3.55vw, 52px);
font-weight: 700;
letter-spacing: -.047em;
line-height: 1.02;
text-wrap: balance;
}
#seo-case-study-gallery .case-intro {
display: grid;
gap: 12px;
max-width: 570px;
color: #57555b;
font-size: clamp(13px, .95vw, 14px);
line-height: 1.58;
}
#seo-case-study-gallery .case-index {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr);
align-items: center;
gap: 12px;
margin-bottom: 19px;
padding: 12px 14px;
border: 1px solid var(--case-line);
border-radius: 14px;
background: rgba(255, 255, 255, .45);
}
#seo-case-study-gallery .case-index-label {
display: inline-flex;
align-items: center;
gap: 8px;
color: #5f5d63;
font-size: 8px;
font-weight: 700;
letter-spacing: .12em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
#seo-case-study-gallery .case-index-label::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--case-acid);
box-shadow: 0 0 0 5px rgba(200, 255, 46, .2);
animation: casePulse 1.9s ease-in-out infinite;
}
#seo-case-study-gallery .case-index-track {
display: flex;
gap: 7px;
min-width: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
#seo-case-study-gallery .case-index-track::-webkit-scrollbar { display: none; }
#seo-case-study-gallery .case-index-slider {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) 32px;
align-items: center;
gap: 7px;
min-width: 0;
}
#seo-case-study-gallery .case-index-arrow {
display: grid;
width: 32px;
height: 32px;
padding: 0;
place-items: center;
border: 1px solid rgba(11, 12, 16, .18);
border-radius: 50%;
color: var(--case-ink);
background: rgba(255, 255, 255, .72);
cursor: pointer;
font: inherit;
font-size: 15px;
line-height: 1;
transition: border-color .2s ease, background .2s ease, opacity .2s ease, transform .2s ease;
}
#seo-case-study-gallery .case-index-arrow:hover,
#seo-case-study-gallery .case-index-arrow:focus-visible {
border-color: var(--case-ink);
background: var(--case-acid);
outline: 0;
transform: scale(1.06);
}
#seo-case-study-gallery .case-index-arrow:disabled {
opacity: .28;
cursor: default;
transform: none;
}
#seo-case-study-gallery .case-index-button {
flex: 0 0 auto;
min-height: 31px;
padding: 0 11px;
border: 1px solid rgba(11, 12, 16, .16);
border-radius: 999px;
color: #5c5a61;
background: transparent;
cursor: pointer;
font-size: 8px;
font-weight: 700;
scroll-snap-align: start;
white-space: nowrap;
transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
#seo-case-study-gallery .case-index-button:hover,
#seo-case-study-gallery .case-index-button:focus-visible,
#seo-case-study-gallery .case-index-button.is-active {
color: var(--case-ink);
border-color: var(--case-ink);
background: var(--case-acid);
outline: 0;
transform: translateY(-2px);
}
#seo-case-study-gallery .case-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
#seo-case-study-gallery .case-card {
--card-accent: var(--case-acid);
position: relative;
min-width: 0;
overflow: hidden;
border: 1px solid var(--case-ink);
border-radius: 22px;
color: var(--case-white);
background: #111116;
box-shadow: 0 22px 55px rgba(32, 27, 21, .12);
transition: transform .35s cubic-bezier(.2, .78, .2, 1), box-shadow .35s ease;
}
#seo-case-study-gallery .case-card:nth-child(2) { --card-accent: #a891ff; }
#seo-case-study-gallery .case-card:nth-child(3) { --card-accent: #67d9ff; }
#seo-case-study-gallery .case-card:hover { transform: translateY(-7px); box-shadow: 0 31px 72px rgba(32, 27, 21, .2); }
#seo-case-study-gallery .case-card-media {
position: relative;
height: 245px;
overflow: hidden;
background: #1a1a20;
}
#seo-case-study-gallery .case-card-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 38%, rgba(10, 10, 14, .76));
pointer-events: none;
}
#seo-case-study-gallery .case-card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s cubic-bezier(.2, .75, .2, 1), filter .4s ease;
}
#seo-case-study-gallery .case-card:hover .case-card-media img { transform: scale(1.045); filter: saturate(1.06); }
#seo-case-study-gallery .case-card-number,
#seo-case-study-gallery .case-card-metric {
position: absolute;
z-index: 2;
top: 15px;
display: inline-flex;
align-items: center;
min-height: 29px;
padding: 0 10px;
border: 1px solid rgba(255, 255, 255, .24);
border-radius: 999px;
color: var(--case-white);
background: rgba(8, 8, 13, .7);
backdrop-filter: blur(9px);
font-size: 8px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
#seo-case-study-gallery .case-card-number { left: 15px; }
#seo-case-study-gallery .case-card-metric { right: 15px; color: var(--card-accent); }
#seo-case-study-gallery .case-card-body {
min-height: 255px;
padding: 20px;
border-top: 1px solid rgba(255, 255, 255, .1);
background:
radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--card-accent) 15%, transparent), transparent 35%),
#111116;
}
#seo-case-study-gallery .case-card-sector {
color: var(--card-accent);
font-size: 8px;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
}
#seo-case-study-gallery .case-card-title {
margin-top: 10px;
color: var(--case-white);
font-family: "Poppins", Arial, sans-serif;
font-size: clamp(21px, 1.8vw, 27px);
font-weight: 600;
letter-spacing: -.04em;
line-height: 1.06;
text-wrap: balance;
}
#seo-case-study-gallery .case-card-copy {
display: -webkit-box;
margin-top: 12px;
overflow: hidden;
color: rgba(255, 255, 255, .6);
font-size: 11.5px;
line-height: 1.52;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
#seo-case-study-gallery .case-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 19px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, .13);
}
#seo-case-study-gallery .case-card-brand {
color: rgba(255, 255, 255, .82);
font-size: 9px;
font-weight: 700;
}
#seo-case-study-gallery .case-open {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
border: 0;
color: var(--case-white);
background: transparent;
cursor: pointer;
font-size: 9px;
font-weight: 700;
}
#seo-case-study-gallery .case-open::after {
content: "↗";
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
color: var(--case-ink);
background: var(--card-accent);
font-size: 13px;
transition: transform .25s ease;
}
#seo-case-study-gallery .case-open:hover::after { transform: rotate(45deg); }
#seo-case-study-gallery .case-open:focus-visible { outline: 3px solid var(--card-accent); outline-offset: 5px; border-radius: 4px; }
#seo-case-study-gallery .case-cta {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 20px;
margin-top: 24px;
padding: 19px 0 0;
border-top: 1px solid var(--case-line);
}
#seo-case-study-gallery .case-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 45px;
padding: 0 19px;
border-radius: 999px;
color: var(--case-ink);
background: var(--case-acid);
text-decoration: none;
font-size: 10px;
font-weight: 700;
white-space: nowrap;
transition: transform .25s ease, box-shadow .25s ease;
}
#seo-case-study-gallery .case-cta-button::after { content: "→"; font-size: 16px; }
#seo-case-study-gallery .case-cta-button:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(118, 161, 0, .23); }
#seo-case-study-gallery .case-cta p { max-width: 790px; color: #5b5960; font-size: 11px; line-height: 1.5; }
#seo-case-study-gallery .case-dialog {
width: min(1240px, calc(100vw - 34px));
max-height: min(92vh, 920px);
padding: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 26px;
color: var(--case-ink);
background: var(--case-paper);
box-shadow: 0 38px 110px rgba(0, 0, 0, .38);
}
#seo-case-study-gallery .case-dialog::backdrop {
background: rgba(4, 4, 7, .76);
backdrop-filter: blur(8px);
animation: caseBackdrop .3s ease both;
}
#seo-case-study-gallery .case-dialog[open] { animation: caseDialogIn .42s cubic-bezier(.2, .78, .2, 1) both; }
#seo-case-study-gallery .case-dialog-close {
position: absolute;
z-index: 12;
right: 16px;
top: 16px;
display: grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 50%;
color: var(--case-white);
background: rgba(9, 9, 13, .62);
cursor: pointer;
font-size: 21px;
line-height: 1;
backdrop-filter: blur(10px);
transition: transform .25s ease, background .25s ease;
}
#seo-case-study-gallery .case-dialog-close:hover { background: var(--case-acid); color: var(--case-ink); transform: rotate(90deg); }
#seo-case-study-gallery .case-dialog-scroll {
max-height: min(92vh, 920px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-color: var(--case-acid) #17171c;
scrollbar-width: thin;
}
#seo-case-study-gallery .case-detail[hidden] { display: none !important; }
#seo-case-study-gallery .case-detail-hero {
position: relative;
min-height: 325px;
overflow: hidden;
color: var(--case-white);
background: #0c0c11;
}
#seo-case-study-gallery .case-detail-hero img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#seo-case-study-gallery .case-detail-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(7, 7, 11, .92) 0%, rgba(7, 7, 11, .67) 46%, rgba(7, 7, 11, .2) 100%);
}
#seo-case-study-gallery .case-detail-heading {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
width: min(600px, 76%);
min-height: 325px;
padding: 38px;
}
#seo-case-study-gallery .case-detail-sector {
color: var(--case-acid);
font-size: 8px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
#seo-case-study-gallery .case-detail-title {
margin-top: 12px;
color: var(--case-white);
font-family: "Poppins", Arial, sans-serif;
font-size: clamp(31px, 4.2vw, 52px);
font-weight: 600;
letter-spacing: -.05em;
line-height: .98;
text-wrap: balance;
}
#seo-case-study-gallery .case-detail-summary {
margin-top: 15px;
color: rgba(255, 255, 255, .68);
font-size: 12px;
line-height: 1.52;
}
#seo-case-study-gallery .case-detail-body { padding: clamp(25px, 3.5vw, 46px); }
#seo-case-study-gallery .case-detail-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#seo-case-study-gallery .case-detail-path article {
padding: 16px;
border-top: 2px solid var(--case-acid);
background: rgba(255, 255, 255, .52);
}
#seo-case-study-gallery .case-detail-path h4 {
font-size: 8px;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
}
#seo-case-study-gallery .case-detail-path p { margin-top: 8px; color: #5e5c62; font-size: 11px; line-height: 1.48; }
#seo-case-study-gallery .case-results-heading {
display: flex;
align-items: center;
gap: 11px;
margin-top: 28px;
color: #626067;
font-size: 8px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
#seo-case-study-gallery .case-results-heading::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--case-acid); box-shadow: 0 0 0 5px rgba(200, 255, 46, .2); }
#seo-case-study-gallery .case-outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
#seo-case-study-gallery .case-outcome {
position: relative;
min-width: 0;
padding: 15px 15px 15px 82px;
border: 1px solid var(--case-line);
border-radius: 15px;
background: rgba(255, 255, 255, .42);
}
#seo-case-study-gallery .case-outcome strong {
position: absolute;
left: 14px;
top: 15px;
color: #628a00;
font-family: "Poppins", Arial, sans-serif;
font-size: 17px;
letter-spacing: -.04em;
}
#seo-case-study-gallery .case-outcome h3 {
font-family: "Poppins", Arial, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: -.025em;
line-height: 1.18;
}
#seo-case-study-gallery .case-outcome p { margin-top: 6px; color: #66646a; font-size: 10px; line-height: 1.42; }
#seo-case-study-gallery .case-story-index {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: clamp(28px, 4vw, 46px);
overflow: hidden;
border: 1px solid var(--case-line);
border-radius: 16px;
background: rgba(255, 255, 255, .46);
}
#seo-case-study-gallery .case-story-index span {
display: flex;
align-items: center;
min-height: 56px;
padding: 0 18px;
border-right: 1px solid var(--case-line);
color: #55535a;
font-size: 9px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
#seo-case-study-gallery .case-story-index span:last-child { border-right: 0; }
#seo-case-study-gallery .case-story-index b { margin-right: 9px; color: #628a00; }
#seo-case-study-gallery .case-story-section {
display: grid;
grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
align-items: center;
gap: clamp(24px, 4vw, 54px);
padding-block: clamp(28px, 4vw, 48px);
border-top: 1px solid var(--case-line);
}
#seo-case-study-gallery .case-story-section:first-of-type {
padding-top: 0;
border-top: 0;
}
#seo-case-study-gallery .case-story-section.is-reversed {
grid-template-columns: minmax(0, 1.22fr) minmax(260px, .78fr);
}
#seo-case-study-gallery .case-story-section.is-reversed .case-story-copy { order: 2; }
#seo-case-study-gallery .case-story-section.is-reversed .case-story-visual { order: 1; }
#seo-case-study-gallery .case-story-kicker {
display: inline-flex;
align-items: center;
gap: 9px;
color: #628a00;
font-size: 8px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
#seo-case-study-gallery .case-story-kicker::before {
content: "";
width: 24px;
height: 2px;
background: var(--case-acid);
}
#seo-case-study-gallery .case-story-title {
margin-top: 10px;
font-family: "Poppins", Arial, sans-serif;
font-size: clamp(24px, 2.7vw, 36px);
font-weight: 600;
letter-spacing: -.04em;
line-height: 1.05;
text-wrap: balance;
}
#seo-case-study-gallery .case-story-copy > p {
margin-top: 14px;
color: #5d5b62;
font-size: 12px;
line-height: 1.62;
}
#seo-case-study-gallery .case-story-points {
display: grid;
gap: 9px;
margin: 17px 0 0;
padding: 0;
list-style: none;
}
#seo-case-study-gallery .case-story-points li {
position: relative;
padding-left: 19px;
color: #444249;
font-size: 11px;
line-height: 1.46;
}
#seo-case-study-gallery .case-story-points li::before {
content: "✓";
position: absolute;
left: 0;
top: .22em;
display: grid;
place-items: center;
width: 12px;
height: 12px;
color: var(--case-acid);
border: 2px solid var(--case-acid);
border-radius: 40% 60% 38% 62% / 62% 40% 60% 38%;
font-size: 7px;
font-weight: 900;
line-height: 1;
}
#seo-case-study-gallery .case-story-visual {
position: relative;
overflow: hidden;
border: 1px solid rgba(11, 12, 16, .2);
border-radius: 22px;
background: #0b0c10;
box-shadow: 0 20px 48px rgba(20, 18, 15, .14);
}
#seo-case-study-gallery .case-story-visual img {
display: block;
width: 100%;
aspect-ratio: 1200 / 760;
object-fit: cover;
}
#seo-case-study-gallery .case-story-visual figcaption {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
display: flex;
align-items: center;
min-height: 36px;
padding: 0 13px;
border: 1px solid rgba(255, 255, 255, .17);
border-radius: 10px;
color: rgba(255, 255, 255, .84);
background: rgba(8, 8, 12, .76);
backdrop-filter: blur(9px);
font-size: 8px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
#seo-case-study-gallery .case-process {
padding-block: clamp(30px, 4vw, 48px);
border-top: 1px solid var(--case-line);
}
#seo-case-study-gallery .case-process-head {
display: grid;
grid-template-columns: minmax(0, .7fr) minmax(300px, 1.3fr);
align-items: end;
gap: 30px;
}
#seo-case-study-gallery .case-process-head p {
color: #5d5b62;
font-size: 12px;
line-height: 1.62;
}
#seo-case-study-gallery .case-process-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 22px;
}
#seo-case-study-gallery .case-process-step {
min-width: 0;
padding: 16px;
border: 1px solid var(--case-line);
border-radius: 15px;
background: rgba(255, 255, 255, .46);
}
#seo-case-study-gallery .case-process-step strong {
display: grid;
place-items: center;
width: 31px;
height: 31px;
border-radius: 50%;
color: var(--case-ink);
background: var(--case-acid);
font-family: "Poppins", Arial, sans-serif;
font-size: 10px;
}
#seo-case-study-gallery .case-process-step h4 {
margin-top: 15px;
font-family: "Poppins", Arial, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: -.025em;
line-height: 1.2;
text-transform: none;
}
#seo-case-study-gallery .case-process-step p {
margin-top: 7px;
color: #66646a;
font-size: 10px;
line-height: 1.48;
}
#seo-case-study-gallery .case-process-visual { margin-top: 18px; }
#seo-case-study-gallery .case-results-panel {
padding: clamp(28px, 4vw, 48px);
border-radius: 23px;
color: var(--case-white);
background:
radial-gradient(circle at 92% 0%, rgba(200, 255, 46, .16), transparent 30%),
#0b0c10;
}
#seo-case-study-gallery .case-results-panel .case-story-kicker,
#seo-case-study-gallery .case-results-panel .case-results-heading { color: var(--case-acid); }
#seo-case-study-gallery .case-results-panel .case-story-title { color: var(--case-white); }
#seo-case-study-gallery .case-results-panel > p {
max-width: 760px;
margin-top: 13px;
color: rgba(255, 255, 255, .64);
font-size: 12px;
line-height: 1.58;
}
#seo-case-study-gallery .case-results-panel .case-story-visual {
margin-top: 22px;
border-color: rgba(255, 255, 255, .16);
box-shadow: none;
}
#seo-case-study-gallery .case-results-panel .case-outcome {
border-color: rgba(255, 255, 255, .15);
background: rgba(255, 255, 255, .06);
}
#seo-case-study-gallery .case-results-panel .case-outcome strong { color: var(--case-acid); }
#seo-case-study-gallery .case-results-panel .case-outcome h3 { color: var(--case-white); }
#seo-case-study-gallery .case-results-panel .case-outcome p { color: rgba(255, 255, 255, .6); }
#seo-case-study-gallery .case-detail-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 22px;
padding: 18px 20px;
border: 1px solid var(--case-line);
border-radius: 16px;
background: rgba(255, 255, 255, .48);
}
#seo-case-study-gallery .case-detail-footer p {
max-width: 730px;
color: #5b5960;
font-size: 11px;
line-height: 1.5;
}
#seo-case-study-gallery .case-detail-footer a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 17px;
border-radius: 999px;
color: var(--case-ink);
background: var(--case-acid);
text-decoration: none;
font-size: 9px;
font-weight: 700;
}
@keyframes casePulse { 0%, 100% { opacity: .55; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes caseDialogIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes caseBackdrop { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1080px) {
#seo-case-study-gallery .case-header { grid-template-columns: 1fr; gap: 20px; }
#seo-case-study-gallery .case-intro { max-width: 850px; }
#seo-case-study-gallery .case-card-media { height: 215px; }
#seo-case-study-gallery .case-card-body { min-height: 280px; }
}
@media (max-width: 780px) {
#seo-case-study-gallery { padding: 50px 0; }
#seo-case-study-gallery .case-shell { width: min(100% - 32px, 1280px); }
#seo-case-study-gallery .case-heading { font-size: clamp(34px, 10.4vw, 44px); line-height: 1.01; }
#seo-case-study-gallery .case-intro { font-size: 14px; }
#seo-case-study-gallery .case-index { grid-template-columns: auto 1fr; gap: 11px; }
#seo-case-study-gallery .case-index-slider { grid-column: 1 / -1; }
#seo-case-study-gallery .case-grid { grid-template-columns: 1fr; }
#seo-case-study-gallery .case-card-media { height: 235px; }
#seo-case-study-gallery .case-card-body { min-height: 0; }
#seo-case-study-gallery .case-cta { grid-template-columns: 1fr; }
#seo-case-study-gallery .case-cta-button { width: 100%; white-space: normal; text-align: center; }
#seo-case-study-gallery .case-detail-hero { min-height: 390px; }
#seo-case-study-gallery .case-detail-heading { width: 100%; min-height: 390px; padding: 28px 24px; }
#seo-case-study-gallery .case-detail-hero::after { background: linear-gradient(180deg, rgba(7, 7, 11, .2), rgba(7, 7, 11, .93) 82%); }
#seo-case-study-gallery .case-detail-path,
#seo-case-study-gallery .case-outcomes { grid-template-columns: 1fr; }
#seo-case-study-gallery .case-dialog { border-radius: 20px; }
#seo-case-study-gallery .case-story-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#seo-case-study-gallery .case-story-index span:nth-child(2) { border-right: 0; }
#seo-case-study-gallery .case-story-index span:nth-child(-n+2) { border-bottom: 1px solid var(--case-line); }
#seo-case-study-gallery .case-story-section,
#seo-case-study-gallery .case-story-section.is-reversed,
#seo-case-study-gallery .case-process-head { grid-template-columns: 1fr; }
#seo-case-study-gallery .case-story-section.is-reversed .case-story-copy,
#seo-case-study-gallery .case-story-section.is-reversed .case-story-visual { order: initial; }
#seo-case-study-gallery .case-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#seo-case-study-gallery .case-detail-footer { align-items: flex-start; flex-direction: column; }
#seo-case-study-gallery .case-detail-footer a { width: 100%; }
}
@media (max-width: 520px) {
#seo-case-study-gallery .case-story-index,
#seo-case-study-gallery .case-process-grid { grid-template-columns: 1fr; }
#seo-case-study-gallery .case-story-index span {
border-right: 0;
border-bottom: 1px solid var(--case-line);
}
#seo-case-study-gallery .case-story-index span:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
#seo-case-study-gallery *,
#seo-case-study-gallery *::before,
#seo-case-study-gallery *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Requested gallery-only refinements. Detailed case-study design is untouched. */
#seo-case-study-gallery .case-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}
#seo-case-study-gallery .case-card {
height: 100%;
display: flex;
flex-direction: column;
}
#seo-case-study-gallery .case-card-media {
height: 220px;
flex: 0 0 220px;
}
#seo-case-study-gallery .case-card-media--dark {
display: grid;
place-items: center;
background:
radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--card-accent) 18%, transparent), transparent 31%),
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(145deg, #181a21, #0c0d12 72%);
background-size: auto, 36px 36px, 36px 36px, auto;
}
#seo-case-study-gallery .case-card-media--dark::after {
background:
radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(8,8,12,.08) 54%, rgba(8,8,12,.55) 100%),
linear-gradient(180deg, transparent 55%, rgba(10,10,14,.34));
}
#seo-case-study-gallery .case-card-media--dark img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
filter: brightness(.40) saturate(.72) contrast(1.12);
transform: scale(1.025);
}
#seo-case-study-gallery .case-card:hover .case-card-media--dark img {
transform: scale(1.06);
filter: brightness(.47) saturate(.78) contrast(1.12);
}
#seo-case-study-gallery .case-card-body {
min-height: 320px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
#seo-case-study-gallery .case-card-sector {
min-height: 22px;
display: block;
}
#seo-case-study-gallery .case-card-title {
min-height: 150px;
}
#seo-case-study-gallery .case-card-copy {
height: 54px;
min-height: 54px;
max-height: 54px;
}
#seo-case-study-gallery .case-card-footer {
margin-top: 19px;
min-height: 44px;
flex: 0 0 auto;
}
#seo-case-study-gallery .case-card-brand {
min-width: 0;
}
#seo-case-study-gallery .case-open {
flex: 0 0 auto;
white-space: nowrap;
}
#seo-case-study-gallery .case-open::after {
flex: 0 0 28px;
width: 28px;
min-width: 28px;
height: 28px;
min-height: 28px;
aspect-ratio: 1 / 1;
line-height: 1;
}
#seo-case-study-gallery .case-cta {
display: flex;
justify-content: flex-start;
grid-template-columns: none;
}
@media (max-width: 1200px) {
#seo-case-study-gallery .case-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#seo-case-study-gallery .case-card-media {
height: 235px;
flex-basis: 235px;
}
#seo-case-study-gallery .case-card-body {
min-height: 262px;
}
#seo-case-study-gallery .case-card-title {
min-height: 86px;
}
}
@media (max-width: 780px) {
#seo-case-study-gallery .case-grid {
grid-template-columns: 1fr;
}
#seo-case-study-gallery .case-card-media {
height: 225px;
flex-basis: 225px;
}
#seo-case-study-gallery .case-card-body {
min-height: 0;
}
#seo-case-study-gallery .case-card-sector,
#seo-case-study-gallery .case-card-title {
min-height: 0;
}
#seo-case-study-gallery .case-card-copy {
height: auto;
min-height: 0;
max-height: none;
}
#seo-case-study-gallery .case-card-footer {
min-height: 40px;
}
}
@media (max-width: 430px) {
#seo-case-study-gallery .case-card-media {
height: 205px;
flex-basis: 205px;
}
#seo-case-study-gallery .case-card-body {
padding: 18px;
}
#seo-case-study-gallery .case-card-footer {
gap: 8px;
}
#seo-case-study-gallery .case-card-brand,
#seo-case-study-gallery .case-open {
font-size: 8.5px;
}
#seo-case-study-gallery .case-open {
gap: 7px;
}
#seo-case-study-gallery .case-open::after {
flex-basis: 26px;
width: 26px;
min-width: 26px;
height: 26px;
min-height: 26px;
font-size: 12px;
}
}