/* Project-library overrides kept separate from the compiled bundle for safe deployment. */
:root {
  --babel-section-space: clamp(4.25rem, 6vw, 5.5rem);
}

/* Consistent page rhythm. The masthead, trust strip, site header and footer keep their own sizing. */
.home-page > .section,
.home-page > .process,
.home-page > .partners,
.home-page > .quality-promise,
.page-content-section {
  padding-block: var(--babel-section-space);
}

.home-page > .about-band,
.home-page > .featured-case {
  height: auto;
  min-height: clamp(30rem, 42vw, 36rem);
}

/* Keep the text side of page mastheads dark in both writing directions. */
[dir="rtl"] .page-hero::after {
  background: linear-gradient(to left, #05221be6, #05221b47);
}

[dir="ltr"] .page-hero::after {
  background: linear-gradient(to right, #05221be6, #05221b47);
}

/* Project titles remain readable without forcing every word onto a separate line. */
.project-case .case-hero__copy-inner {
  width: min(44rem, 100%);
}

.project-case .case-hero__title {
  width: 100%;
  max-width: 18ch;
  font-size: clamp(2.2rem, 3.8vw, 4rem);
  line-height: 1.22;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.project-case .case-hero__title--long {
  max-width: 20ch;
  font-size: clamp(2rem, 3.2vw, 3.35rem);
}

.project-case .case-hero__title--very-long {
  max-width: 22ch;
  font-size: clamp(1.75rem, 2.75vw, 2.9rem);
}

/* Project-card image overlay for mouse, keyboard and touch interactions. */
.project-card__image::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 28% 0 0;
  background: linear-gradient(180deg, transparent 0%, rgba(3, 46, 39, .68) 40%, rgba(3, 46, 39, .96) 100%);
  opacity: 0;
  transform: translateY(22%);
  transition: opacity .38s ease, transform .42s cubic-bezier(.22, .75, .25, 1);
}

.project-card__image .status {
  z-index: 3;
}

.project-card__overlay {
  position: absolute;
  z-index: 2;
  inset-inline: 1.15rem;
  inset-block-end: 1.05rem;
  display: grid;
  gap: .25rem;
  color: #fff;
  opacity: 0;
  transform: translateY(1.15rem);
  transition: opacity .3s ease .06s, transform .38s cubic-bezier(.22, .75, .25, 1) .04s;
}

.project-card__overlay small {
  color: var(--bronze-light);
  font-size: .72rem;
  font-weight: 800;
}

.project-card__overlay strong {
  max-width: 22ch;
  font-size: clamp(1rem, 1.5vw, 1.28rem);
  line-height: 1.45;
  text-wrap: balance;
}

.project-card__overlay > span {
  width: max-content;
  margin-top: .2rem;
  padding-top: .35rem;
  border-top: 1px solid rgba(224, 184, 112, .72);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
}

.project-card:hover .project-card__image::after,
.project-card:focus-within .project-card__image::after {
  opacity: 1;
  transform: none;
}

.project-card:hover .project-card__overlay,
.project-card:focus-within .project-card__overlay {
  opacity: 1;
  transform: none;
}

.project-card__image:focus-visible {
  outline: 3px solid var(--bronze);
  outline-offset: 3px;
}

/* Downloads */
.downloads-section {
  background: var(--surface-soft);
}

.downloads-intro {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(18rem, .65fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 7rem);
  margin-bottom: 2.5rem;
}

.downloads-intro h2 {
  max-width: 18ch;
  margin: .25rem 0 0;
  color: var(--primary);
  font-size: clamp(1.8rem, 3.2vw, 2.9rem);
  line-height: 1.35;
}

.downloads-intro > p {
  margin: 0;
  color: var(--text-muted);
  line-height: 2;
}

.download-grid {
  display: grid;
  gap: 1.25rem;
}

.download-card {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  min-height: 17rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-top: 3px solid var(--bronze);
  background: #fff;
  box-shadow: 0 1.2rem 3.5rem rgba(3, 46, 39, .08);
}

.download-card__icon {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  color: #fff;
  background: linear-gradient(145deg, var(--primary), var(--primary-deep));
}

.download-card__icon span {
  display: grid;
  place-items: center;
  width: 5.2rem;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(255, 255, 255, .58);
  color: var(--bronze-light);
  font-size: 1rem;
  font-weight: 900;
}

.download-card__icon b {
  font-size: 1.8rem;
  line-height: 1;
}

.download-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.download-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.download-card__meta span {
  padding: .2rem .55rem;
  color: #79531f;
  background: #f5ecdc;
  font-size: .68rem;
  font-weight: 800;
}

.download-card h2 {
  margin: .85rem 0 .45rem;
  color: var(--primary);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}

.download-card p {
  max-width: 48rem;
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  line-height: 1.9;
}

.download-note {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding: 1.35rem 1.5rem;
  border-inline-start: 3px solid var(--bronze);
  background: #fff;
}

.download-note > span {
  flex: 0 0 auto;
  color: var(--bronze);
  font-size: 2rem;
}

.download-note h2,
.download-note p {
  margin: 0;
}

.download-note h2 {
  color: var(--primary);
  font-size: 1rem;
}

.download-note p {
  color: var(--text-muted);
  font-size: .78rem;
}

@media (hover: none) {
  .project-card__image::after {
    opacity: .88;
    transform: none;
  }

  .project-card__overlay {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card__image::after,
  .project-card__overlay {
    transition: none;
  }
}

@media (max-width: 768px) {
  :root {
    --babel-section-space: clamp(3.25rem, 12vw, 4.25rem);
  }

  .home-page > .about-band,
  .home-page > .featured-case {
    min-height: 0;
  }

  .project-case .case-hero__title,
  .project-case .case-hero__title--long,
  .project-case .case-hero__title--very-long {
    max-width: 19ch;
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .downloads-intro,
  .download-card {
    grid-template-columns: 1fr;
  }

  .downloads-intro {
    align-items: start;
    gap: 1rem;
  }

  .download-card__icon {
    grid-template-columns: auto auto;
    justify-content: center;
    min-height: 8.5rem;
  }

  .download-card__icon span {
    width: 3.7rem;
  }

  .download-note {
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .project-case .case-facts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .project-case .case-facts__grid > div {
    grid-column: auto !important;
  }
}

/* Direction-aware controls and balanced project story cards. */
.hero-arrows > button,
.case-lightbox > button {
  padding: 0;
  line-height: 1;
}

.hero-arrows,
.related-projects__controls {
  direction: ltr;
}

.hero-arrows > button > span,
.case-lightbox > button > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  line-height: 1;
  transform: translateY(-.06em);
}

.case-lightbox__close > span {
  transform: translateY(-.04em);
}

[dir="rtl"] .case-lightbox__prev {
  right: auto;
  left: 1rem;
}

[dir="rtl"] .case-lightbox__next {
  right: 1rem;
  left: auto;
}

.case-story__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 58rem;
  margin-inline: auto;
}

.case-story__grid--1 {
  grid-template-columns: minmax(0, 38rem);
  justify-content: center;
}

@media (max-width: 768px) {
  .case-story__grid--1,
  .case-story__grid--2,
  .case-story__grid--3 {
    grid-template-columns: 1fr;
  }
}