/* ---------- Design tokens ---------- */
:root {
  --indigo: #34347d;
  --pink: #e43f77;
  --black: #141414;
  --light-gray: #f3f3f7;
  --white: #ffffff;

  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Barlow', sans-serif;

  --header-height: 88px;
  --container-width: 1024px;
  --container-padding: 24px;
}

/* ---------- Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p {
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
}

section {
  scroll-margin-top: var(--header-height);
}

.section-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 96px var(--container-padding);
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 48px);
  color: var(--indigo);
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  margin-top: 8px;
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.site-header.scrolled {
  background: rgba(52, 52, 125, 0.85);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(20, 20, 20, 0.12);
}

.header-inner {
  max-width: 1512px;
  margin: 0 auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 6vw, 104px);
}

.logo img {
  height: 26px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
  white-space: nowrap;
  position: relative;
  padding: 4px 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--pink);
  transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 101;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Buttons ---------- */
.btn {
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-highlight: rgba(255, 255, 255, 0.5);
  --glass-shadow: rgba(20, 20, 20, 0.18);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 32px;
  border: 1px solid var(--glass-border);
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 rgba(20, 20, 20, 0.06),
    0 8px 24px -8px var(--glass-shadow);
  transition: transform 0.2s ease, filter 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Soft gloss cap: a light gradient across the top third, like light catching glass. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

/* Shine sweep: a diagonal highlight that glides across on hover. */
.btn::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 35%;
  height: 140%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.btn:hover::after {
  left: 130%;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 rgba(20, 20, 20, 0.06),
    0 12px 28px -8px var(--glass-shadow);
}

.btn-primary {
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-highlight: rgba(255, 255, 255, 0.55);
  --glass-shadow: rgba(228, 63, 119, 0.35);
  color: var(--white);
  background-color: rgba(228, 63, 119, 0.55);
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-secondary {
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-highlight: rgba(255, 255, 255, 0.45);
  --glass-shadow: rgba(20, 20, 20, 0.3);
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  padding: 12px 32px;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-view {
  --glass-border: rgba(20, 20, 20, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.7);
  --glass-shadow: rgba(20, 20, 20, 0.14);
  color: var(--black);
  background: rgba(255, 255, 255, 0.35);
  padding: 12px 32px;
}

.btn-view:hover {
  background: rgba(255, 255, 255, 0.55);
}

.btn-view-arrow {
  transition: transform 0.2s ease;
}

.btn-view:hover .btn-view-arrow {
  transform: translateX(3px);
}

/* Fallback for browsers without backdrop-filter support: lean on opacity instead of blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-primary {
    background-color: rgba(184, 50, 96, 0.92);
  }

  .btn-secondary {
    background-color: rgba(255, 255, 255, 0.22);
  }

  .btn-view {
    background-color: rgba(255, 255, 255, 0.8);
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--indigo);
  padding-top: var(--header-height);
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-shader-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 96px var(--container-padding) 120px;
  display: flex;
  align-items: center;
  gap: clamp(24px, 8.75vw - 32px, 80px);
}

.hero-content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.hero-heading {
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 600;
}

.hero-heading h1 {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
}

.hero-subheading {
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.25;
  margin-top: 8px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-photo {
  position: relative;
  flex-shrink: 0;
  width: clamp(220px, 24vw + 66px, 374px);
  height: clamp(220px, 24vw + 66px, 374px);
}

.hero-photo-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.hero-photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Glass info card: anchored to the photo by percentage so it tracks
   the circle's position/size at every breakpoint, offset toward its
   bottom-right per the design. */
.hero-info-card {
  position: absolute;
  left: 75.7%;
  top: 69%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 56px 24px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--white);
  font-family: var(--font-body);
  font-size: clamp(14px, 0.625vw + 10px, 18px);
  white-space: nowrap;
}

/* The gradient stroke is drawn as an SVG rect (sized in JS to match the
   card's live pixel dimensions) rather than a CSS border, since a CSS
   gradient border on a rounded rect renders unevenly at the corners. */
.hero-info-card-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.hero-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-info-row img {
  flex-shrink: 0;
}

/* ---------- About ---------- */
.about {
  background: var(--white);
}

.about-inner {
  display: flex;
  flex-direction: column;
  gap: 51px;
}

.about-header {
  display: flex;
  flex-direction: column;
  gap: 51px;
}

.about-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 18px;
  line-height: 1.5;
}

.about-skills-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.skill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.skill-icon {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
}

.skill-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.skill-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
}

.skill-label-pink {
  color: var(--pink);
}

.skill-label-indigo {
  color: var(--indigo);
}

/* ---------- Portfolio ---------- */
.portfolio {
  background: var(--light-gray);
}

.portfolio-header {
  margin-bottom: 64px;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.portfolio-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.portfolio-card:hover .btn-view {
  background: rgba(255, 255, 255, 0.55);
}

.portfolio-card:hover .btn-view-arrow {
  transform: translateX(3px);
}

.portfolio-thumb {
  width: 160px;
  height: 160px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 40px -16px rgba(20, 20, 20, 0.2);
  background: #d9d9d9;
}

.portfolio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.portfolio-card:hover .portfolio-thumb img {
  transform: scale(1.08);
}

.portfolio-info h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
}

.portfolio-info p {
  font-family: var(--font-body);
  font-size: 16px;
  margin-top: 8px;
}

/* ---------- Contact & Footer ---------- */
.contact {
  background: var(--black);
  color: var(--white);
}

.contact .section-title {
  color: var(--white);
}

.contact-grid {
  display: flex;
  gap: 40px;
  align-items: center;
  margin-top: 40px;
}

.contact-lede {
  flex: 1 1 0;
  min-width: 0;
  font-size: 18px;
  line-height: 1.5;
}

.contact-details {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(243, 243, 247, 0.3);
  font-size: 18px;
  transition: opacity 0.2s ease;
}

.contact-row:hover {
  opacity: 0.75;
}

.footer-divider {
  height: 1px;
  background: rgba(243, 243, 247, 0.2);
  margin-top: 95px;
}

.footer-copyright {
  font-size: 18px;
  padding-top: 40px;
}

/* ---------- Responsive ---------- */

/* The hero info card's percentage-based offset (left/top) needs a lot of
   room to avoid overhanging past the edge of the hero on medium screens,
   well before the hero itself switches to its stacked mobile layout.
   Below this width the card anchors to the photo's own corner instead,
   which stays contained regardless of available space. */
@media (max-width: 1320px) {
  .hero-info-card {
    left: 50%;
    top: auto;
    right: auto;
    bottom: -44px;
    transform: translateX(-50%);
    width: 240px;
    white-space: normal;
    padding: 16px 22px 16px 14px;
    gap: 8px;
    border-radius: 12px;
  }

  .hero-info-row {
    gap: 6px;
  }

  .hero-info-row img {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 900px) {
  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(52, 52, 125, 0.97);
    backdrop-filter: blur(12px);
    padding: 8px clamp(24px, 6vw, 104px) 24px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .main-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-link {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .nav-toggle {
    display: flex;
  }

  .hero-inner {
    flex-direction: column-reverse;
    text-align: center;
    padding-top: 56px;
    padding-bottom: 72px;
    gap: 88px;
  }

  .hero-content {
    align-items: center;
    max-width: 100%;
  }

  .hero-actions {
    justify-content: center;
  }

  .about-inner {
    gap: 56px;
  }

  .about-header {
    gap: 40px;
  }

  .about-skills-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  .skill-label {
    white-space: normal;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .contact-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .footer-divider {
    margin-top: 56px;
  }
}

@media (max-width: 520px) {
  .section-inner {
    padding: 72px var(--container-padding);
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Case study modal
   ========================================================================== */

html.modal-open,
body.modal-open {
  overflow: hidden;
  height: 100%;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(20, 20, 20, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 1432px;
  height: 100%;
  max-height: 100%;
  background: var(--light-gray);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px -16px rgba(20, 20, 20, 0.4);
  transform: scale(0.97) translateY(8px);
  transition: transform 0.3s ease;
}

.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
}

.modal-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px;
}

.modal-nav-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.modal-nav-btn,
.modal-close {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(20, 20, 20, 0.06),
    0 8px 20px -8px rgba(20, 20, 20, 0.25);
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.modal-nav-btn::before,
.modal-close::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

.modal-nav-btn::after,
.modal-close::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 35%;
  height: 140%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.modal-nav-btn:hover::after,
.modal-close:hover::after {
  left: 130%;
}

.modal-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--black);
}

.modal-nav-btn:hover {
  background: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}

.modal-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.modal-nav-divider {
  position: relative;
  width: 1px;
  height: 24px;
  background: rgba(20, 20, 20, 0.15);
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal-nav-btn,
  .modal-close {
    background-color: rgba(255, 255, 255, 0.85);
  }
}

.modal-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ---------- Case study content ---------- */

.cs {
  --cs-pad: clamp(24px, 10vw, 204px);
  position: relative;
  padding: 112px var(--cs-pad) 0;
  overflow: hidden;
}

.cs-bg-ellipse {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  width: 806px;
  height: 806px;
  border-radius: 50%;
  opacity: 0.75;
  background: radial-gradient(circle 403px at center, rgba(88, 29, 116, 0.3) 0%, rgba(88, 29, 116, 0) 100%);
}

.cs[data-case-study="comparative-agility"] .cs-bg-ellipse {
  background: radial-gradient(circle 403px at center, rgba(6, 160, 248, 0.3) 0%, rgba(6, 160, 248, 0) 100%);
}

.cs[data-case-study="quantum-360"] .cs-bg-ellipse {
  opacity: 0.8;
  background: radial-gradient(circle 403px at center, rgba(39, 101, 204, 0.3) 0%, rgba(39, 101, 204, 0) 100%);
}

.cs-bg-ellipse-top {
  top: -403px;
  right: -403px;
}

.cs-bg-ellipse-bottom {
  bottom: -403px;
  left: -403px;
}

.cs-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 64px;
  padding-bottom: 96px;
}

.cs-hero-text {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cs-heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--black);
  font-family: var(--font-heading);
  font-weight: 600;
}

.cs-heading h1 {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
}

.cs-subtitle {
  font-size: 24px;
}

.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--black);
}

.cs-meta strong {
  font-weight: 700;
}

.cs-link {
  color: #581d74;
}

.cs-link-ca {
  color: #06a0f8;
}

.cs-link-quantum {
  color: #2765cc;
}

.cs-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black);
  max-width: 540px;
}

.cs-hero-image {
  flex: 1 1 420px;
  min-width: 0;
}

.cs-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.cs-section {
  position: relative;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Removes the trailing gap for a section whose last image is meant to run
   right up against the "More Case Studies" block that follows it. */
.cs-section-flush {
  padding-bottom: 0;
}

.cs-section-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 32px;
  color: var(--black);
}

.cs-section-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black);
  max-width: 620px;
}

/* Editorial two-column row: text beside a supporting image, alternating sides
   to match the zig-zag composition of the source design. */
.cs-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.cs-split-reverse {
  flex-direction: row-reverse;
}

.cs-split-text {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black);
  max-width: 540px;
}

.cs-split-text .cs-section-title {
  margin-bottom: 8px;
}

.cs-split-media {
  flex: 1 1 340px;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.cs-split-media-narrow {
  flex: 0 1 300px;
}

.cs-split-media-wide {
  flex: 1 1 460px;
}

.cs-split-text-wide {
  flex: 1 1 460px;
}

.cs-images {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}

.cs-split-media .cs-images {
  width: 100%;
}

.cs-images > .cs-image {
  flex: 1 1 260px;
  min-width: 0;
}

/* Row of same-size phone screenshots that shrink together to always stay on
   one line (unlike .cs-images, which wraps) — only stacks at the narrow
   mobile breakpoint below. */
.cs-image-row {
  display: flex;
  width: 100%;
  gap: 16px;
  align-items: flex-start;
}

.cs-image-row .cs-image {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.cs-image-wide {
  flex-basis: 100%;
  width: 100%;
}

/* Freely-arranged illustration composition: each piece keeps the exact
   position/size proportions from the source design (as percentages of this
   box), instead of the row/grid layout used elsewhere. Falls back to a
   simple stack on narrow screens where absolute placement stops working. */
.cs-illustrations {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 901;
}

.cs-illustrations-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 48%;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black);
}

.cs-illustration {
  position: absolute;
  display: block;
  height: auto;
  mix-blend-mode: multiply;
}

.cs-illustration-1 {
  left: 57%;
  top: 0;
  width: 43%;
}

.cs-illustration-2 {
  left: 0;
  top: 20%;
  width: 48%;
}

.cs-illustration-3 {
  left: 54%;
  top: 59%;
  width: 46%;
}

@media (max-width: 900px) {
  .cs-illustrations {
    position: static;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .cs-illustrations-text,
  .cs-illustration {
    position: static;
    width: 100%;
  }
}

.cs-image {
  width: 100%;
}

.cs-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Opt-in soft shadow for individual case-study images, since some source
   images (opaque white backgrounds) look wrong with a shadow and others
   don't. Apply per-image rather than on the shared .cs-image rule. */
.cs-shadow {
  box-shadow: 0 12px 40px -16px rgba(20, 20, 20, 0.2);
}

/* Caps a case-study image at its exported (design-intent) display size so
   flexible columns never stretch it past its native resolution; centers it
   within its column once the cap is reached. */
.cs-w-151 { max-width: 151px; margin: 0 auto; }
.cs-w-210 { max-width: 210px; margin: 0 auto; }
.cs-w-320 { max-width: 320px; margin: 0 auto; }
.cs-w-408 { max-width: 408px; margin: 0 auto; }
.cs-w-423 { max-width: 423px; margin: 0 auto; }
.cs-w-431 { max-width: 431px; margin: 0 auto; }
.cs-w-453 { max-width: 453px; margin: 0 auto; }
.cs-w-489 { max-width: 489px; margin: 0 auto; }
.cs-w-496 { max-width: 496px; margin: 0 auto; }
.cs-w-800 { max-width: 800px; margin: 0 auto; }
.cs-w-1024 { max-width: 1024px; margin: 0 auto; }

/* Full-bleed: escapes the section's side padding to run edge to edge. */
.cs-bleed {
  width: calc(100% + 2 * var(--cs-pad));
  margin-left: calc(-1 * var(--cs-pad));
}

.cs-bleed img {
  display: block;
  width: 100%;
  height: auto;
}

.cs-caption {
  font-size: 18px;
  line-height: 1.5;
  color: var(--black);
  max-width: 480px;
}

.cs-caption-center {
  max-width: 560px;
  text-align: center;
  margin: 0 auto;
}

.cs-more {
  position: relative;
  margin: 0 0 32px;
  padding: 64px clamp(24px, 5vw, 96px);
  background: var(--black);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.cs-more-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 48px);
  color: var(--white);
}

.cs-more-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.more-card {
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.more-card-thumb {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 40px -16px rgba(20, 20, 20, 0.2);
}

.more-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.more-card:hover .more-card-thumb img {
  transform: scale(1.08);
}

.more-card-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  color: var(--white);
}

.more-card-info h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
}

.more-card-info p {
  font-family: var(--font-body);
  font-size: 16px;
}

.btn-view-dark {
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-highlight: rgba(255, 255, 255, 0.4);
  --glass-shadow: rgba(0, 0, 0, 0.45);
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  padding: 12px 32px;
}

.more-card:hover .btn-view-dark {
  background: rgba(255, 255, 255, 0.2);
}

.btn-view-dark .btn-view-arrow {
  filter: brightness(0) invert(1);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-view-dark {
    background-color: rgba(255, 255, 255, 0.18);
  }
}

@media (max-width: 900px) {
  .modal-overlay {
    padding: 0;
  }

  .modal {
    border-radius: 0;
  }

  .cs {
    --cs-pad: 24px;
    padding: 96px var(--cs-pad) 0;
  }

  .cs-hero {
    flex-direction: column-reverse;
    gap: 40px;
    padding-bottom: 72px;
  }

  .cs-hero-image {
    width: 100%;
  }

  .cs-section {
    padding-bottom: 72px;
    gap: 40px;
  }

  .cs-section-flush {
    padding-bottom: 0;
  }

  .cs-split,
  .cs-split-reverse {
    flex-direction: column;
    gap: 24px;
  }

  .cs-split-media,
  .cs-split-media-narrow,
  .cs-split-media-wide {
    flex: none;
    width: 100%;
  }

  .cs-split-text,
  .cs-split-text-wide {
    flex: none;
    max-width: 100%;
  }

  .cs-more {
    padding: 48px 24px;
  }

  .more-card {
    flex: 1 1 100%;
  }
}

@media (max-width: 520px) {
  .modal-nav-btn span {
    display: none;
  }

  .modal-nav-btn {
    padding: 12px;
  }

  .more-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .cs-image-row {
    flex-direction: column;
  }
}