/* ==========================================================================
   Components
   ========================================================================== */

/* ==========================================================================
   Buttons — three variants only: primary, outline, text-arrow
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-block-size: 3.375rem;
  padding: 0.9rem 1.6rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}

.btn::before {
  /* fill that slides in from the inline-start edge */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: var(--origin-start, left);
  transition: transform 0.6s var(--ease-expo);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleX(1);
}

.btn .icon-arrow {
  transition: transform 0.5s var(--ease-expo);
}

.btn:hover .icon-arrow {
  transform: scaleX(var(--dir)) translateX(0.3rem);
}

.btn--primary {
  background: var(--green);
  color: var(--black);
}

.btn--primary::before {
  background: var(--white);
}

.btn--outline {
  border-color: currentColor;
  color: inherit;
}

.theme-charcoal .btn--outline,
.theme-black .btn--outline,
.hero .btn--outline,
.page-hero .btn--outline {
  border-color: var(--line-dark-strong);
  color: var(--white);
}

.btn--outline::before {
  background: var(--green);
}

.btn--outline:hover {
  color: var(--black);
  border-color: var(--green);
}

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.4rem;
  font-weight: 700;
  font-size: 0.9375rem;
  border-block-end: 1px solid currentColor;
  transition: gap 0.5s var(--ease-expo), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.link-arrow:hover {
  gap: 1.15rem;
  border-color: var(--green);
}

.theme-charcoal .link-arrow:hover,
.theme-black .link-arrow:hover {
  color: var(--green);
}

/* ==========================================================================
   Section head
   ========================================================================== */
.section-head {
  row-gap: 1.5rem;
  margin-block-end: var(--space-xl);
  align-items: end;
}

.section-head__title {
  grid-column: 1 / -1;
}

.section-head__aside {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .section-head__title {
    grid-column: 1 / span 7;
  }

  .section-head__aside {
    grid-column: 9 / -1;
  }
}

.section-head .label {
  margin-block-end: 1.5rem;
}

/* ==========================================================================
   Home — Who we are
   ========================================================================== */
.intro {
  overflow: hidden;
}

.intro__pattern {
  inline-size: clamp(18rem, 36vw, 38rem);
  inset-inline-end: -8%;
  inset-block-start: 6%;
  opacity: 0.06;
}

.intro__statement {
  grid-column: 1 / -1;
  margin-block: 1.75rem var(--space-xl);
}

.intro__media {
  grid-column: 1 / -1;
}

.intro__body {
  grid-column: 1 / -1;
  margin-block-start: 2.5rem;
}

.intro__body .t-lead {
  color: var(--ink);
}

.focus-list {
  margin-block: 2.5rem;
  border-block-start: 1px solid var(--line-light-strong);
}

.focus-list li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-block: 1.1rem;
  border-block-end: 1px solid var(--line-light);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.35;
}

.focus-list span {
  font-family: var(--font-latin);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

@media (min-width: 900px) {
  .intro__statement {
    grid-column: 1 / span 11;
  }

  .intro__media {
    grid-column: 1 / span 5;
  }

  .intro__body {
    grid-column: 7 / -1;
    margin-block-start: 0;
    align-self: center;
  }
}

/* ==========================================================================
   Service index (home) — vertical list + hover-reveal photography
   ========================================================================== */
.svc-index {
  row-gap: 3rem;
}

.svc-index__list {
  grid-column: 1 / -1;
  border-block-start: 1px solid var(--line-light-strong);
  counter-reset: svc;
}

.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(3rem, 2.4rem + 2vw, 5rem) 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-block: clamp(1.15rem, 0.9rem + 1vw, 1.9rem);
  border-block-end: 1px solid var(--line-light);
  isolation: isolate;
}

.svc-row::before {
  content: "";
  position: absolute;
  inset: -1px calc(var(--page-padding) * -0.35);
  z-index: -1;
  background: var(--white);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s var(--ease-expo);
}

.svc-row__num {
  font-family: var(--font-latin);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease);
}

.svc-row__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  transition: transform 0.6s var(--ease-expo);
}

:root[dir="rtl"] .svc-row__title {
  letter-spacing: 0;
  line-height: 1.45;
}

.svc-row__arrow {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--line-light-strong);
  border-radius: 50%;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.6s var(--ease-expo);
}

.svc-row:hover::before,
.svc-row:focus-visible::before,
.svc-row.is-active::before {
  transform: scaleY(1);
}

.svc-row:hover .svc-row__num,
.svc-row.is-active .svc-row__num {
  color: var(--charcoal);
}

.svc-row:hover .svc-row__title,
.svc-row.is-active .svc-row__title {
  transform: translateX(calc(0.75rem * var(--dir)));
}

.svc-row:hover .svc-row__arrow,
.svc-row.is-active .svc-row__arrow {
  background: var(--green);
  border-color: var(--green);
}

.svc-index__media {
  display: none;
}

.svc-index__stack {
  position: sticky;
  inset-block-start: calc(var(--header-height) + 2rem);
}

.svc-index__stack .photo {
  aspect-ratio: 4 / 5;
}

.svc-index__stack picture {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.7s var(--ease), transform 1.2s var(--ease-expo);
}

.svc-index__stack picture.is-active {
  opacity: 1;
  transform: none;
}

.svc-index__stack picture img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.svc-index__caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 1rem;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.svc-index__caption b {
  color: var(--charcoal);
  font-family: var(--font-latin);
}

.svc-index__foot {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .svc-index__list {
    grid-column: 1 / span 7;
  }

  .svc-index__media {
    display: block;
    grid-column: 9 / -1;
    grid-row: 1 / span 2;
  }
}

/* ==========================================================================
   Vision / Message statements
   ========================================================================== */
.statements {
  overflow: hidden;
  isolation: isolate;
}

.statements__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.16;
}

.statements__bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
}

.statements__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--black) 0%, rgba(17, 24, 29, 0.2) 50%, var(--black) 100%);
}

.statements__pattern {
  z-index: -1;
  inline-size: clamp(20rem, 44vw, 46rem);
  inset-inline-start: -16%;
  inset-block-end: -20%;
  opacity: 0.09;
}

.statement {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.75rem;
}

.statement + .statement {
  margin-block-start: var(--space-xl);
}

.statement__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--green);
  font-size: var(--fs-h4);
  font-weight: 600;
}

.statement__label::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--line-dark-strong);
  max-inline-size: 10rem;
}

.statement__text {
  color: var(--white);
}

@media (min-width: 900px) {
  .statement--a {
    grid-column: 1 / span 9;
  }

  .statement--b {
    grid-column: 4 / -1;
  }
}

/* ==========================================================================
   Goals grid (home preview)
   ========================================================================== */
.goals-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-block-start: 1px solid var(--line-light-strong);
}

.goal-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: 1.75rem;
  padding-inline-end: 1rem;
  border-block-end: 1px solid var(--line-light);
}

.goal-tile::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: var(--origin-start, left);
  transition: transform 0.8s var(--ease-expo);
}

.goal-tile:hover::after {
  transform: scaleX(1);
}

.goal-tile__num {
  font-family: var(--font-latin);
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 4.5rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--charcoal);
  min-inline-size: 2.2ch;
}

.goal-tile__title {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.35;
}

@media (min-width: 640px) {
  .goals-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gutter);
  }
}

@media (min-width: 1024px) {
  .goals-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .goal-tile {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-block: 2.25rem 2.75rem;
  }
}

/* ==========================================================================
   Partner preview (home) — large typographic rows
   ========================================================================== */
/* Partner list: aligned to the reading start of the content container —
   left in English, right in Arabic (logical margins resolve per direction).
   The container's --page-padding already provides the side gutter on mobile. */
.partner-rows {
  grid-column: 1 / -1;
  inline-size: 100%;
  max-inline-size: 900px;
  margin-inline-start: 0;
  margin-inline-end: auto;
  border-block-start: 1px solid var(--line-dark-strong);
}

/* Centred block, but text keeps its reading direction — never centred */
html[lang="en"] .partner-row {
  direction: ltr;
  text-align: left;
}

html[lang="ar"] .partner-row {
  direction: rtl;
  text-align: right;
}

.partner-row {
  position: relative;
  display: grid;
  inline-size: 100%; /* divider (border-block-end) spans the whole list */
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem 2rem;
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  border-block-end: 1px solid var(--line-dark);
}

.partner-row__name {
  font-size: clamp(1.5rem, 1rem + 2.2vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--white);
  transition: color var(--dur-fast) var(--ease), transform 0.6s var(--ease-expo);
}

.partner-row__meta {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* starts at the reading edge: left in EN, right in AR */
  gap: 0.4rem 1.25rem;
  font-size: var(--fs-small);
  color: var(--on-dark-muted);
}

.partner-row__meta span + span::before {
  content: "";
  display: inline-block;
  inline-size: 0.35rem;
  block-size: 0.35rem;
  margin-inline-end: 1.25rem;
  background: var(--green);
  vertical-align: middle;
}

.partner-row__thumb {
  display: none;
}

.partner-row:hover .partner-row__name {
  color: var(--green);
  transform: translateX(calc(0.6rem * var(--dir)));
}

/* Arrow stays at the far end of the row at every width
   (grid columns follow the page direction: right end in EN, left end in AR) */
.partner-row .svc-row__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  border-color: var(--line-dark-strong);
  color: var(--white);
}

.partner-row:hover .svc-row__arrow {
  background: var(--green);
  border-color: var(--green);
  color: var(--black);
}

@media (min-width: 1024px) {
  .partner-rows {
    grid-column: 1 / -1;
  }

  .partner-row {
    grid-template-columns: 1fr 9rem auto;
  }

  .partner-row__meta {
    grid-column: 1;
  }

  .partner-row__thumb {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 2;
    aspect-ratio: 3 / 2;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.7s var(--ease-expo);
  }

  .partner-row__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .partner-row:hover .partner-row__thumb {
    clip-path: inset(0 0 0 0);
  }

  .partner-row .svc-row__arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .partners-preview__intro {
    grid-column: 1 / span 4;
  }
}

.partners-preview__intro {
  grid-column: 1 / -1;
  margin-block-end: 3rem;
}

.partners-preview__intro p {
  margin-block: 1.5rem 2rem;
}

/* ==========================================================================
   Future band (home) — full-bleed photograph
   ========================================================================== */
.future-band {
  position: relative;
  display: grid;
  min-block-size: clamp(34rem, 90vh, 56rem);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.future-band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.future-band__media picture,
.future-band__media img {
  inline-size: 100%;
  block-size: 110%;
}

.future-band__media img {
  object-fit: cover;
  object-position: 50% 30%;
  filter: saturate(0.9);
}

.future-band__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(17, 24, 29, 0.96) 0%, rgba(17, 24, 29, 0.72) 55%, rgba(17, 24, 29, 0.3) 100%);
}

.future-band__inner {
  align-content: end;
  padding-block: var(--section-space) var(--section-space-sm);
}

.future-band__content {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 900px) {
  .future-band__content {
    grid-column: 1 / span 9;
  }
}

/* ==========================================================================
   About — editorial "who we are"
   ========================================================================== */
.editorial__aside {
  grid-column: 1 / -1;
  margin-block-end: 2rem;
}

.editorial__main {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .editorial__aside {
    grid-column: 1 / span 3;
  }

  .editorial__aside > * {
    position: sticky;
    inset-block-start: calc(var(--header-height) + 2rem);
  }

  .editorial__main {
    grid-column: 4 / -1;
  }
}

.editorial__lead {
  margin-block-end: var(--space-l);
}

.editorial__cols {
  display: grid;
  gap: 1.5rem var(--gutter);
  color: var(--ink-muted);
}

@media (min-width: 900px) {
  .editorial__cols {
    grid-template-columns: 1fr 1fr;
  }
}

.pullquote {
  position: relative;
  margin-block: var(--space-xl);
  padding-inline-start: clamp(1.25rem, 1rem + 2vw, 3rem);
  border-inline-start: 3px solid var(--green);
}

.pullquote p {
  font-size: var(--fs-statement);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

:root[dir="rtl"] .pullquote p {
  letter-spacing: 0;
  line-height: 1.6;
}

.figure-wide {
  margin-block: var(--space-xl);
}

.figure-wide figcaption {
  margin-block-start: 0.85rem;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

/* ==========================================================================
   About — Vision & Message split
   ========================================================================== */
.vm {
  row-gap: var(--space-xl);
}

.vm__item {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.5rem;
  align-content: start;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--line-light-strong);
}

.vm__word {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}

:root[dir="rtl"] .vm__word {
  letter-spacing: 0;
  line-height: 1.25;
}

.vm__word span {
  color: var(--green);
}

@media (min-width: 900px) {
  .vm__item:first-child {
    grid-column: 1 / span 6;
  }

  .vm__item:last-child {
    grid-column: 7 / -1;
    margin-block-start: var(--space-xl);
  }
}

/* ==========================================================================
   About — Values index (large stacked words + changing image)
   ========================================================================== */
.values {
  row-gap: 3rem;
  align-items: center;
}

.values__list {
  grid-column: 1 / -1;
}

.value {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  inline-size: 100%;
  padding-block: clamp(0.35rem, 0.2rem + 0.6vw, 0.9rem);
  text-align: start;
  color: var(--on-dark);
  border-block-end: 1px solid var(--line-dark);
  transition: color 0.45s var(--ease);
}

.value__num {
  font-family: var(--font-latin);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--on-dark-muted);
  transition: color 0.45s var(--ease);
  min-inline-size: 2rem;
}

.value__word {
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 6.25rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.045em;
  transition: transform 0.7s var(--ease-expo), opacity 0.45s var(--ease);
}

:root[dir="rtl"] .value__word {
  letter-spacing: 0;
  line-height: 1.4;
  font-weight: 700;
}

.values__list.is-interactive .value {
  color: rgba(238, 241, 244, 0.28);
}

.values__list.is-interactive .value.is-active {
  color: var(--white);
}

.values__list.is-interactive .value.is-active .value__num {
  color: var(--green);
}

.values__list.is-interactive .value.is-active .value__word {
  transform: translateX(calc(0.9rem * var(--dir)));
}

.values__media {
  grid-column: 1 / -1;
}

.values__stack {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--charcoal-2);
  max-block-size: 70vh;
  inline-size: 100%;
}

.values__stack picture {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.8s var(--ease), transform 1.4s var(--ease-expo);
}

.values__stack picture.is-active {
  opacity: 1;
  transform: none;
}

.values__stack img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: saturate(0.8);
}

.values__stack-label {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-end: 1rem;
  z-index: 2;
  padding: 0.35rem 0.75rem;
  background: var(--green);
  color: var(--black);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:root[dir="rtl"] .values__stack-label {
  letter-spacing: 0;
  font-size: 0.875rem;
}

@media (max-width: 1023px) {
  .values__media {
    order: -1;
  }

  .values__stack {
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 1024px) {
  .values__list {
    grid-column: 1 / span 7;
  }

  .values__media {
    grid-column: 9 / -1;
  }
}

/* ==========================================================================
   Services page — table of contents + detailed sections
   ========================================================================== */
.toc {
  display: grid;
  grid-template-columns: 1fr;
  border-block-start: 1px solid var(--line-light-strong);
  margin-block-start: 24px; /* space below the overview statement — mobile */
}

@media (min-width: 768px) {
  .toc {
    margin-block-start: 32px; /* tablet */
  }
}

@media (min-width: 1024px) {
  .toc {
    margin-block-start: 48px; /* desktop */
  }
}

.toc a {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding-block: 1rem;
  border-block-end: 1px solid var(--line-light);
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease), padding var(--dur) var(--ease-expo);
}

.toc a span {
  font-family: var(--font-latin);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--ink-muted);
}

.toc a:hover {
  padding-inline-start: 0.5rem;
}

.toc a:hover span {
  color: var(--charcoal);
}

@media (min-width: 720px) {
  .toc {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gutter);
  }
}

@media (min-width: 1200px) {
  .toc {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service {
  row-gap: 2.5rem;
  align-items: center;
}

.service__media {
  grid-column: 1 / -1;
  position: relative;
}

.service__body {
  grid-column: 1 / -1;
}

.service__num {
  display: block;
  margin-block-end: 1.5rem;
  color: transparent;
  -webkit-text-stroke: 1px var(--charcoal);
}

.theme-charcoal .service__num,
.theme-black .service__num {
  -webkit-text-stroke-color: var(--steel);
}

.service__title {
  margin-block-end: 1.5rem;
}

.service__text {
  max-inline-size: 46ch;
}

.service__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-block-start: 2rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line-light);
  font-size: var(--fs-small);
}

.theme-charcoal .service__links {
  border-color: var(--line-dark);
}

.service__links dt {
  inline-size: 100%;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.7;
}

:root[dir="rtl"] .service__links dt {
  letter-spacing: 0;
  font-size: 0.875rem;
}

.service__links a {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  opacity: 0.85;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.service__links a:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--black);
  opacity: 1;
}

@media (min-width: 900px) {
  .service__media {
    grid-column: 1 / span 6;
  }

  .service__body {
    grid-column: 8 / -1;
  }

  .service--flip .service__media {
    grid-column: 7 / -1;
    grid-row: 1;
  }

  .service--flip .service__body {
    grid-column: 1 / span 5;
    grid-row: 1;
  }
}

/* ==========================================================================
   Approach — goals list (editorial rows)
   ========================================================================== */
.goals-intro {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .goals-intro {
    grid-column: 1 / span 10;
  }
}

.goal-list {
  margin-block-start: var(--space-xl);
}

.goal {
  position: relative;
  row-gap: 1rem;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.goal::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 1px;
  background: var(--line-light-strong);
  transform-origin: var(--origin-start, left);
}

.goal__num {
  grid-column: 1 / -1;
  color: var(--charcoal);
}

.goal__title {
  grid-column: 1 / -1;
}

.goal__text {
  grid-column: 1 / -1;
  color: var(--ink-muted);
  max-inline-size: 52ch;
}

@media (min-width: 900px) {
  .goal__num {
    grid-column: 1 / span 3;
  }

  .goal__title {
    grid-column: 4 / span 4;
  }

  .goal__text {
    grid-column: 8 / -1;
    padding-block-start: 0.35rem;
  }
}

/* ==========================================================================
   Approach — mission steps (stepped architectural sequence)
   ========================================================================== */
.mission {
  overflow: hidden;
  isolation: isolate;
}

.mission__pattern {
  z-index: -1;
  inline-size: clamp(22rem, 42vw, 44rem);
  inset-inline-end: -10%;
  inset-block-start: -14%;
  opacity: 0.08;
}

.steps {
  position: relative;
  display: grid;
  gap: 0;
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  gap: 1rem;
  padding-block: 0 2.75rem;
  padding-inline-start: 2.5rem;
}

.step::before {
  /* vertical rail */
  content: "";
  position: absolute;
  inset-inline-start: 0.35rem;
  inset-block: 0.8rem 0;
  inline-size: 1px;
  background: var(--line-dark-strong);
}

.step:last-child::before {
  display: none;
}

.step__marker {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.45rem;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  background: var(--green);
}

.step__num {
  font-family: var(--font-latin);
  font-size: clamp(2.75rem, 2rem + 2.5vw, 4.75rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--white);
}

.step__text {
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.5;
  color: var(--on-dark);
  max-inline-size: 34ch;
}

@media (min-width: 1100px) {
  .steps {
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--gutter);
    padding-block-start: 1.5rem;
  }

  .steps::before {
    /* horizontal rail across the top */
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: 1px;
    background: var(--line-dark-strong);
  }

  .step {
    padding: 0;
    align-content: start;
    margin-block-start: calc(var(--i, 0) * 3.5rem);
    padding-block-start: 1.5rem;
    border-inline-start: 1px solid var(--line-dark);
    padding-inline-start: 1.25rem;
  }

  .step::before {
    display: none;
  }

  .step__marker {
    inset-inline-start: -0.4rem;
    inset-block-start: calc(var(--i, 0) * -3.5rem - 1.9rem);
  }

  .step:nth-child(2) { --i: 1; }
  .step:nth-child(3) { --i: 2; }
  .step:nth-child(4) { --i: 3; }
  .step:nth-child(5) { --i: 4; }

  .step__connector {
    position: absolute;
    inset-inline-start: -1px;
    inset-block-start: calc(var(--i, 0) * -3.5rem - 1.5rem);
    inline-size: 1px;
    block-size: calc(var(--i, 0) * 3.5rem + 1.5rem);
    background: var(--green);
    opacity: 0.6;
  }
}

/* ==========================================================================
   Partners page — detail sections
   ========================================================================== */
.partner-intro__text {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .partner-intro__text {
    grid-column: 1 / span 10;
  }
}

.partner-index {
  grid-column: 1 / -1;
  display: grid;
  margin-block-start: var(--space-xl);
  border-block-start: 1px solid var(--line-light-strong);
}

.partner-index a {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding-block: 1.25rem;
  border-block-end: 1px solid var(--line-light);
  font-size: var(--fs-h4);
  font-weight: 600;
  transition: padding var(--dur) var(--ease-expo);
}

.partner-index a:hover {
  padding-inline-start: 0.5rem;
}

.partner-index a > span:first-child {
  font-family: var(--font-latin);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--ink-muted);
}

.partner {
  row-gap: 3rem;
}

.partner__head {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.25rem;
  padding-block-end: var(--space-l);
  border-block-end: 1px solid var(--line-dark-strong);
}

.theme-steel .partner__head,
.theme-white .partner__head {
  border-color: var(--line-light-strong);
}

.partner__index {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-latin);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.partner__index b {
  color: var(--green);
}

.theme-steel .partner__index b,
.theme-white .partner__index b {
  color: var(--charcoal);
  border-block-end: 2px solid var(--green);
}

.partner__alt {
  font-size: var(--fs-h4);
  font-weight: 500;
  opacity: 0.8;
}

.partner__media {
  grid-column: 1 / -1;
}

.partner__facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  align-content: start;
}

.fact {
  padding-block: 1.1rem;
  padding-inline-end: 1rem;
  border-block-end: 1px solid var(--line-dark);
}

.theme-steel .fact,
.theme-white .fact {
  border-color: var(--line-light);
}

.fact dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-block-end: 0.35rem;
}

:root[dir="rtl"] .fact dt {
  letter-spacing: 0;
  font-size: 0.875rem;
}

.fact dd {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.35;
}

.fact dd .num {
  font-family: var(--font-latin);
  color: var(--green);
}

.theme-steel .fact dd .num,
.theme-white .fact dd .num {
  color: var(--charcoal);
}

.fact--wide {
  grid-column: 1 / -1;
}

.partner__body {
  grid-column: 1 / -1;
}

.partner__body .t-lead {
  margin-block-end: 1.5rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 1.75rem;
}

.tags li {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line-dark-strong);
  font-size: var(--fs-small);
  font-weight: 500;
}

.theme-steel .tags li,
.theme-white .tags li {
  border-color: var(--line-light-strong);
}

.certs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-block-start: 2rem;
  background: var(--line-dark-strong);
  border: 1px solid var(--line-dark-strong);
}

.certs li {
  display: grid;
  gap: 0.2rem;
  padding: 1.1rem 1.25rem;
  background: var(--charcoal);
}

.certs b {
  font-family: var(--font-latin);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
}

.certs span {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--green);
}

:root[dir="rtl"] .certs span {
  letter-spacing: 0;
  font-size: 0.9375rem;
}

.source-note {
  margin-block-start: 2rem;
  font-size: var(--fs-small);
  opacity: 0.7;
}

@media (min-width: 1024px) {
  .partner__media {
    grid-column: 1 / span 6;
  }

  .partner__facts {
    grid-column: 8 / -1;
  }

  .partner__body {
    grid-column: 1 / span 8;
  }

  .partner--flip .partner__media {
    grid-column: 7 / -1;
    grid-row: 2;
  }

  .partner--flip .partner__facts {
    grid-column: 1 / span 5;
    grid-row: 2;
  }

  .partner--flip .partner__body {
    grid-column: 5 / -1;
  }
}

/* ==========================================================================
   Future page — direction list
   ========================================================================== */
.future-statement {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .future-statement {
    grid-column: 1 / span 11;
  }
}

.direction {
  row-gap: 3rem;
}

.direction__media {
  grid-column: 1 / -1;
}

.direction__list {
  grid-column: 1 / -1;
  border-block-start: 1px solid var(--line-dark-strong);
}

.direction__item {
  display: grid;
  grid-template-columns: clamp(3rem, 2.5rem + 2vw, 5rem) 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-block: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-block-end: 1px solid var(--line-dark);
}

.direction__item span {
  font-family: var(--font-latin);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--green);
}

.direction__item p {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--white);
}

:root[dir="rtl"] .direction__item p {
  letter-spacing: 0;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .direction__media {
    grid-column: 1 / span 5;
    position: sticky;
    inset-block-start: calc(var(--header-height) + 2rem);
    align-self: start;
  }

  .direction__list {
    grid-column: 7 / -1;
  }
}

.links-grid {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--line-light-strong);
}

.links-grid a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1.5rem;
  align-items: center;
  padding-block: 1.75rem;
  border-block-end: 1px solid var(--line-light);
  transition: padding var(--dur) var(--ease-expo);
}

.links-grid a:hover {
  padding-inline-start: 0.6rem;
}

.links-grid small {
  grid-column: 1 / -1;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

:root[dir="rtl"] .links-grid small {
  letter-spacing: 0;
  font-size: 0.875rem;
}

.links-grid strong {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.4;
}

.links-grid a:hover .svc-row__arrow {
  background: var(--green);
  border-color: var(--green);
}

/* Numbers such as phone numbers stay LTR inside Arabic text (used site-wide) */
[dir="ltr"] .ltr-num,
.ltr-num {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ==========================================================================
   Contact page — contact hub: intro + two direct actions, details index
   ========================================================================== */
.contact-hub {
  overflow: hidden;
  isolation: isolate;
}

.contact-hub__pattern {
  z-index: -1;
  inline-size: clamp(18rem, 34vw, 34rem);
  inset-inline-end: -10%;
  inset-block-end: -18%;
  opacity: 0.05;
}

.contact-hub__grid {
  row-gap: var(--space-xl);
  align-items: center;
}

.contact-hub__intro {
  grid-column: 1 / -1;
}

.contact-hub__intro .label {
  margin-block-end: 1.5rem;
}

.contact-hub__text {
  max-inline-size: 30ch;
  margin-block-start: 1.25rem;
  color: var(--ink-muted);
}

.contact-hub__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-block-start: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
}

.contact-hub__icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
}

/* Details: a 2 × 2 editorial index with hairlines — no cards */
.contact-hub__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  border-block-start: 1px solid var(--line-light-strong);
}

.contact-hub__item {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding-block: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-block-end: 1px solid var(--line-light);
  min-inline-size: 0;
}

.contact-hub__item dt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.contact-hub__item dt span {
  font-family: var(--font-latin);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--charcoal);
}

:root[dir="rtl"] .contact-hub__item dt {
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
}

.contact-hub__item dd {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.contact-hub__item a {
  background-image: linear-gradient(var(--green), var(--green));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: var(--origin-start, left) 100%;
  transition: background-size 0.6s var(--ease-expo);
}

.contact-hub__item a:hover {
  background-size: 100% 2px;
}

@media (min-width: 640px) {
  .contact-hub__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
}

@media (min-width: 1024px) {
  .contact-hub__intro {
    grid-column: 1 / span 5;
  }

  .contact-hub__list {
    grid-column: 7 / -1;
  }
}

@media (max-width: 479px) {
  .contact-hub__actions .btn {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   Language gate (root index.html)
   ========================================================================== */
.gate {
  position: relative;
  display: grid;
  min-block-size: 100vh;
  min-block-size: 100svh;
  background: var(--black);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}

.gate__pattern {
  z-index: -1;
  inline-size: clamp(26rem, 80vw, 64rem);
  inset-inline-end: -20%;
  inset-block-start: 50%;
  translate: 0 -50%;
  opacity: 0.16;
  animation: spin 200s linear infinite;
}

.gate__inner {
  display: grid;
  align-content: space-between;
  gap: 3rem;
  padding-block: clamp(2rem, 1.5rem + 3vh, 4rem);
}

.gate__choices {
  display: grid;
  gap: 1px;
  background: var(--line-dark);
  border-block: 1px solid var(--line-dark);
}

.gate__choice {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1rem;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) 0;
  background: var(--black);
  transition: color var(--dur-fast) var(--ease);
}

.gate__choice strong {
  display: block;
  font-size: clamp(2.75rem, 1.5rem + 6vw, 7rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--white);
  transition: color var(--dur-fast) var(--ease);
}

.gate__choice[lang="ar"] strong {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  line-height: 1.3;
}

.gate__choice small {
  display: block;
  margin-block-start: 0.5rem;
  font-size: var(--fs-small);
  color: var(--on-dark-muted);
}

.gate__choice[lang="ar"] small {
  font-family: var(--font-arabic);
}

.gate__choice:hover strong {
  color: var(--green);
}

.gate__choice:hover .svc-row__arrow {
  background: var(--green);
  border-color: var(--green);
  color: var(--black);
}

.gate__choice .svc-row__arrow {
  border-color: var(--line-dark-strong);
  inline-size: 3.5rem;
  block-size: 3.5rem;
}

@media (min-width: 900px) {
  .gate__choices {
    grid-template-columns: 1fr 1fr;
  }

  .gate__choice {
    padding-inline: 0 2rem;
  }

  .gate__choice + .gate__choice {
    padding-inline: 2rem 0;
  }
}

.partner__body .t-h4 {
  margin-block-start: 2.25rem;
}

.partner__body .tags {
  margin-block-start: 1rem;
}

.goal-tile__title a {
  transition: color var(--dur-fast) var(--ease);
}

.goal-tile__title a::after {
  /* whole tile is clickable */
  content: "";
  position: absolute;
  inset: 0;
}


.toc .icon-arrow,
.partner-index .icon-arrow {
  opacity: 0.5;
}

:root[dir="rtl"] .partner__index {
  text-align: right;
}

/* ==========================================================================
   Partners — Arabic Al Nukhba section: RTL alignment from the right edge
   (scoped to .partner-detail[dir="rtl"]; English and other partners untouched)
   ========================================================================== */
.partner-detail[dir="rtl"],
.partner-detail[dir="rtl"] .partner__head,
.partner-detail[dir="rtl"] .partner__alt,
.partner-detail[dir="rtl"] .partner__facts,
.partner-detail[dir="rtl"] .partner__body,
.partner-detail[dir="rtl"] .partner__body p,
.partner-detail[dir="rtl"] .source-title {
  direction: rtl;
  text-align: right;
}

/* English title stays LTR internally but sits at the right edge of the column */
.partner-detail[dir="rtl"] .partner__head h2[lang="en"] {
  justify-self: start;
  text-align: right;
}

.partner-detail[dir="rtl"] .partner__index {
  justify-self: start;
}

/* Data rows: label and value stacked, both anchored to the right */
.partner-detail[dir="rtl"] .fact {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* flex-start = right in RTL */
  text-align: right;
}

.partner-detail[dir="rtl"] .fact dt,
.partner-detail[dir="rtl"] .fact dd {
  inline-size: 100%;
  text-align: right;
}

/* Licence cards: same look, RTL content */
.partner-detail[dir="rtl"] .certs {
  direction: rtl;
}

.partner-detail[dir="rtl"] .certs li {
  justify-items: start;
  text-align: right;
}

.partner-detail[dir="rtl"] .certs b {
  direction: ltr;
  unicode-bidi: isolate;
}

@media (min-width: 1024px) {
  /* Body copy starts at the right edge (under the facts), not offset inward */
  .partner-detail[dir="rtl"].partner--flip .partner__body {
    grid-column: 1 / span 8;
  }
}

/* ==========================================================================
   Partners — English Al Nukhba section: LTR alignment from the left edge
   (scoped to .partner-detail[dir="ltr"]; Arabic rules above are untouched)
   ========================================================================== */
.partner-detail[dir="ltr"],
.partner-detail[dir="ltr"] .partner__head,
.partner-detail[dir="ltr"] .partner__alt,
.partner-detail[dir="ltr"] .partner__facts,
.partner-detail[dir="ltr"] .partner__body,
.partner-detail[dir="ltr"] .partner__body p,
.partner-detail[dir="ltr"] .source-title {
  direction: ltr;
  text-align: left;
}

.partner-detail[dir="ltr"] .partner__head h2,
.partner-detail[dir="ltr"] .partner__index {
  justify-self: start;
  text-align: left;
}

/* Data rows: label and value stacked, both anchored to the left */
.partner-detail[dir="ltr"] .fact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  direction: ltr;
  text-align: left;
}

.partner-detail[dir="ltr"] .fact dt,
.partner-detail[dir="ltr"] .fact dd {
  inline-size: 100%;
  text-align: left;
}

/* Licence cards: same look, "ISO" + number start at the left */
.partner-detail[dir="ltr"] .certs,
.partner-detail[dir="ltr"] .certs li {
  direction: ltr;
  text-align: left;
}

.partner-detail[dir="ltr"] .certs li {
  justify-items: start;
}

@media (min-width: 1024px) {
  /* Body copy starts at the left edge (under the facts), not offset inward */
  .partner-detail[dir="ltr"].partner--flip .partner__body {
    grid-column: 1 / span 8;
  }
}

/* ==========================================================================
   Site CTA — one shared closing call to action, directly before the footer
   on every page. White, editorial, oversized cropped pattern on the side
   opposite the text. Scoped to .site-cta so no other section is affected.
   ========================================================================== */
.site-cta {
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: 480px;
  padding-block: clamp(4.5rem, 3rem + 5vw, 8rem);
  background: var(--white);
  color: var(--charcoal);
  border-block-start: 1px solid var(--line-light);
  overflow: hidden;
  isolation: isolate;
}

html[lang="ar"] .site-cta {
  direction: rtl;
  text-align: right;
}

html[lang="en"] .site-cta {
  direction: ltr;
  text-align: left;
}

/* Two-column editorial split: content ~1.3fr, open space for the pattern ~0.7fr */
.site-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.site-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* = reading edge: left in EN, right in AR */
  min-inline-size: 0;
}

.site-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-block-end: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--charcoal);
}

html[lang="ar"] .site-cta__eyebrow {
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
}

.site-cta__line {
  flex: none;
  inline-size: 2.75rem;
  block-size: 3px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: var(--origin-start, left);
  transition: transform 1s var(--ease-expo) 0.2s;
}

.site-cta__eyebrow.is-visible .site-cta__line,
html:not(.js) .site-cta__line {
  transform: scaleX(1);
}

.site-cta__title {
  max-inline-size: 16ch;
  font-size: clamp(2.5rem, 1.2rem + 3.8vw, 5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--charcoal);
  text-wrap: balance;
}

html[lang="ar"] .site-cta__title {
  max-inline-size: 18ch;
  line-height: 1.3;
  letter-spacing: 0;
}

.site-cta__text {
  max-inline-size: 600px;
  margin-block-start: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--ink-muted);
}

html[lang="ar"] .site-cta__text {
  line-height: 1.9;
}

.site-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1.25rem, 1rem + 1vw, 2rem);
  margin-block-start: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
}

/* Secondary: text link — green underline + arrow shift on hover */
.site-cta__link {
  color: var(--charcoal);
}

.site-cta__link .icon-arrow {
  transition: transform 0.5s var(--ease-expo);
}

.site-cta__link:hover .icon-arrow {
  transform: scaleX(var(--dir)) translateX(0.3rem);
}

/* Pattern: oversized, cropped by the section, on the side opposite the text */
.site-cta__pattern-wrap {
  position: absolute;
  z-index: -1;
  inline-size: clamp(22rem, 46vw, 46rem);
  aspect-ratio: 1153 / 1108;
  inset-inline-end: -12%;
  inset-block-start: 50%;
  margin-block-start: calc(clamp(22rem, 46vw, 46rem) * -0.48);
  pointer-events: none;
}

.site-cta__pattern {
  inset: 0;
  inline-size: 100%;
  opacity: 0.1;
  transform: rotate(-12deg) scale(0.96);
  transition: transform 2.4s var(--ease-expo), opacity 1.6s var(--ease);
}

.site-cta:has(.site-cta__eyebrow.is-visible) .site-cta__pattern,
html:not(.js) .site-cta__pattern {
  transform: none;
}

@media (min-width: 1024px) {
  .site-cta__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    column-gap: var(--gutter);
  }
}

/* Tablet: tighter spacing */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-cta {
    min-block-size: 420px;
  }

  .site-cta__pattern-wrap {
    inset-inline-end: -24%;
  }
}

/* Mobile: stacked; the pattern becomes a quiet backdrop */
@media (max-width: 767px) {
  .site-cta {
    min-block-size: 0;
  }

  .site-cta__pattern-wrap {
    inline-size: 24rem;
    inset-inline-end: -45%;
    inset-block-start: auto;
    inset-block-end: -30%;
    margin-block-start: 0;
  }

  .site-cta__pattern {
    opacity: 0.07;
  }

  .site-cta__actions .btn {
    flex: 1 1 100%;
  }
}