/*
 * Final portfolio-wide case hero standard.
 *
 * This file is linked after every case stylesheet. Case styles may keep their
 * own colour, imagery, texture and decorative details, but may not change the
 * shared hero composition, spacing or typography metrics.
 */

body.case-page .case-page-trail {
  left: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 0 clamp(18px, 4vw, 56px) !important;
  position: absolute !important;
  right: 0 !important;
  top: 104px !important;
  transform: none !important;
  width: auto !important;
  z-index: 8 !important;
}

body.case-page .case-page-trail ol {
  align-items: center !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  gap: 8px !important;
  line-height: 1.35 !important;
  margin: 0 auto !important;
  max-width: 1220px !important;
  min-height: 40px !important;
  padding: 9px 12px !important;
  text-transform: uppercase !important;
}

body.case-page .case-hero-content .case-breadcrumb {
  display: none !important;
}

body.case-page .case-hero {
  --case-hero-card-height: clamp(420px, 34vw, 520px) !important;
  align-items: center !important;
  display: grid !important;
  gap: clamp(22px, 3vw, 42px) !important;
  grid-template-columns: minmax(0, 0.98fr) minmax(420px, 0.86fr) !important;
  min-height: auto !important;
  overflow: hidden !important;
  padding: 198px clamp(18px, 4vw, 56px) 58px !important;
}

body.case-page .case-hero-image,
body.case-page .case-hero-content {
  align-self: center !important;
  box-sizing: border-box !important;
  height: var(--case-hero-card-height) !important;
  margin: 0 !important;
  min-height: var(--case-hero-card-height) !important;
  transform: none !important;
  width: 100% !important;
}

body.case-page .case-hero-image {
  overflow: hidden !important;
}

body.case-page .case-hero-image > img,
body.case-page .case-hero-image picture,
body.case-page .case-hero-image picture img,
body.case-page .case-hero-image .ittesai-hero-capture,
body.case-page .case-hero-image .ittesai-hero-capture img,
body.case-page .case-hero-image .job-system-preview,
body.case-page .case-hero-image .job-system-preview img {
  box-sizing: border-box !important;
  display: block !important;
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
}

body.case-page .case-hero-image > img,
body.case-page .case-hero-image picture img,
body.case-page .case-hero-image .ittesai-hero-capture img,
body.case-page .case-hero-image .job-system-preview img {
  object-fit: cover !important;
}

body.case-page .case-hero-image.contain > img,
body.case-page .case-hero-image.contain picture img {
  object-fit: contain !important;
}

body.case-page .case-hero-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  max-width: 760px !important;
  overflow: visible !important;
  padding: 44px !important;
}

body.case-page .case-hero-content .eyebrow {
  flex: 0 0 auto !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 0.78rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: 0.035em !important;
  line-height: 1.35 !important;
  margin: 0 0 14px !important;
  max-width: 48ch !important;
  text-transform: uppercase !important;
}

body.case-page .case-hero-content h1 {
  flex: 0 0 auto !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 3.75rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
  hyphens: none !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
  margin: 0 0 18px !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  text-wrap: balance !important;
  word-break: normal !important;
}

body.case-page .case-hero-content .hero-copy {
  flex: 0 0 auto !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 1.0625rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 46ch !important;
}

@media (max-width: 980px) {
  body.case-page .case-hero {
    --case-hero-card-height: clamp(360px, 50vw, 430px) !important;
    gap: 18px !important;
    grid-template-columns: 1fr !important;
    padding: 184px clamp(18px, 4vw, 56px) 52px !important;
  }

  body.case-page .case-hero-image {
    height: var(--case-hero-card-height) !important;
    min-height: var(--case-hero-card-height) !important;
  }

  body.case-page .case-hero-content {
    height: auto !important;
    max-width: 100% !important;
    min-height: 360px !important;
    padding: 40px !important;
  }

  body.case-page .case-hero-content h1 {
    font-size: 3.25rem !important;
  }

  body.case-page .case-hero-content .hero-copy {
    font-size: 1rem !important;
    max-width: 52ch !important;
  }
}

@media (max-width: 680px) {
  body.case-page .case-page-trail {
    padding: 0 18px !important;
    top: 126px !important;
  }

  body.case-page .case-page-trail ol {
    font-size: 0.68rem !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
  }

  body.case-page .case-hero {
    --case-hero-card-height: clamp(220px, 58vw, 340px) !important;
    gap: 18px !important;
    padding: 206px 18px 42px !important;
  }

  body.case-page .case-hero-content {
    min-height: 360px !important;
    padding: 30px 28px 32px !important;
  }

  body.case-page .case-hero-content .eyebrow {
    font-size: 0.74rem !important;
    margin-bottom: 14px !important;
  }

  body.case-page .case-hero-content h1 {
    font-size: 2.625rem !important;
    letter-spacing: -0.04em !important;
    line-height: 0.98 !important;
    margin-bottom: 18px !important;
  }

  body.case-page .case-hero-content .hero-copy {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    max-width: none !important;
  }
}

/*
 * Specificity shield.
 *
 * A few older flagship stylesheets use body + case-class selectors together
 * with !important. Reassert the shared contract at equal-or-higher
 * specificity so source order can reliably keep this final stylesheet in
 * charge without removing the case's colours and decorative treatment.
 */
:root body.case-page .case-page-trail {
  padding: 0 clamp(18px, 4vw, 56px) !important;
  position: absolute !important;
  top: 104px !important;
  transform: none !important;
}

:root body.case-page .case-page-trail ol {
  border-radius: 0 !important;
  font-size: 0.72rem !important;
  min-height: 40px !important;
  padding: 9px 12px !important;
}

:root body.case-page .case-hero {
  --case-hero-card-height: clamp(420px, 34vw, 520px) !important;
  align-items: center !important;
  gap: clamp(22px, 3vw, 42px) !important;
  grid-template-areas: "image content" !important;
  grid-template-columns: minmax(0, 0.98fr) minmax(420px, 0.86fr) !important;
  padding: 198px clamp(18px, 4vw, 56px) 58px !important;
}

:root body.case-page .case-hero-image {
  align-self: center !important;
  grid-area: image !important;
  height: var(--case-hero-card-height) !important;
  margin: 0 !important;
  min-height: var(--case-hero-card-height) !important;
  transform: none !important;
}

:root body.case-page.case-page .case-hero-image {
  transform: none !important;
}

:root body.case-page .case-hero-content {
  align-self: center !important;
  grid-area: content !important;
  height: var(--case-hero-card-height) !important;
  margin: 0 !important;
  min-height: var(--case-hero-card-height) !important;
  padding: 44px !important;
  transform: none !important;
}

:root body.case-page .case-hero-content .eyebrow {
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  margin: 0 0 14px !important;
}

:root body.case-page .case-hero-content h1 {
  font-size: 3.75rem !important;
  line-height: 0.98 !important;
  margin: 0 0 18px !important;
}

:root body.case-page .case-hero-content .hero-copy {
  font-size: 1.0625rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 46ch !important;
}

@media (max-width: 980px) {
  :root body.case-page .case-hero {
    --case-hero-card-height: clamp(360px, 50vw, 430px) !important;
    gap: 18px !important;
    grid-template-areas:
      "image"
      "content" !important;
    grid-template-columns: 1fr !important;
    padding: 184px clamp(18px, 4vw, 56px) 52px !important;
  }

  :root body.case-page .case-hero-image {
    height: var(--case-hero-card-height) !important;
    min-height: var(--case-hero-card-height) !important;
  }

  :root body.case-page .case-hero-content {
    height: auto !important;
    min-height: 360px !important;
    padding: 40px !important;
  }

  :root body.case-page .case-hero-content h1 {
    font-size: 3.25rem !important;
  }

  :root body.case-page .case-hero-content .hero-copy {
    font-size: 1rem !important;
    max-width: 52ch !important;
  }
}

@media (max-width: 680px) {
  :root body.case-page .case-page-trail {
    padding: 0 18px !important;
    top: 126px !important;
  }

  :root body.case-page .case-page-trail ol {
    font-size: 0.68rem !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
  }

  :root body.case-page .case-hero {
    --case-hero-card-height: clamp(220px, 58vw, 340px) !important;
    padding: 206px 18px 42px !important;
  }

  :root body.case-page .case-hero-content {
    min-height: 360px !important;
    padding: 38px 42px 52px !important;
  }

  :root body.case-page .case-hero-content .eyebrow {
    font-size: 0.74rem !important;
  }

  :root body.case-page .case-hero-content h1 {
    font-size: 2.625rem !important;
  }

  :root body.case-page .case-hero-content .hero-copy {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    max-width: none !important;
  }
}