/* ==========================================================================
   GRU — Section compositions
   ========================================================================== */


.section { isolation: isolate; }

/* --- 01 Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block: clamp(5.5rem, 10vh, 7.5rem) var(--s-5);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--green-dark);
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Scrim: keeps the headline at AA over moving footage without flattening it. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(10, 15, 12, 0.64) 0%,
      rgba(10, 15, 12, 0.46) 34%,
      rgba(10, 15, 12, 0.58) 72%,
      rgba(10, 15, 12, 0.88) 100%),
    /* The billboard's cream artwork falls exactly where the body copy sits, so
       the left side carries more weight than a centred scrim would need. */
    linear-gradient(to right, rgba(10, 15, 12, 0.62) 0%, rgba(10, 15, 12, 0.34) 45%, rgba(10, 15, 12, 0) 72%);
}

.hero__body {
  display: grid;
  align-content: center;
  gap: var(--s-5);
}
.hero__body > .label { margin-bottom: var(--s-2); }

.hero__headline {
  font-size: var(--t-mega);
  max-width: 19ch;
  margin-bottom: var(--s-3);
}
.hero__sub {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.45;
  max-width: 34ch;
  color: var(--cream);
}
.hero__note {
  max-width: 62ch;
  font-size: var(--t-sm);
  font-weight: 300;
  line-height: 1.55;
  color: #C6D3C9;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-2);
}

/* Instrument strip along the base of the hero. */
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(241, 239, 219, 0.22);
}
.hero__readout { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.hero__readout div { display: grid; gap: var(--s-2); }
.hero__readout dt {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-invert-mut);
}
.hero__readout dd {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.9vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-invert-mut);
}
.hero__scroll i {
  display: block;
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--cream), transparent);
  animation: drop 2.4s var(--e-soft) infinite;
}
@keyframes drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  46%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll i { animation: none; } }

/* --- 02 Problem ----------------------------------------------------------- */
.problem__grid { align-items: center; row-gap: var(--s-8); }
.problem__media { grid-column: 1 / -1; }
.problem__copy  { grid-column: 1 / -1; }

@media (min-width: 62rem) {
  .problem__media { grid-column: 1 / 6; }
  .problem__copy  { grid-column: 7 / 13; }
}

.problem__plate {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--green-dark);
}
.problem__plate video, .problem__plate img {
  width: 100%; height: 100%; object-fit: cover;
}
.problem__caption {
  position: absolute;
  left: 0; bottom: 0;
  padding: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  background: linear-gradient(to top, rgba(10,15,12,0.8), transparent);
  width: 100%;
}

.problem__headline { margin-bottom: var(--s-6); }
.problem__headline em {
  font-style: normal;
  color: var(--green-live);
}

/* --- 03 What You Get ------------------------------------------------------ */
/* Four parallel guarantees, not a sequence — so they carry the brand's icons
   rather than 01/02/03 indices, which would imply an order that isn't real. */
.gets {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}
@media (min-width: 44rem) { .gets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 76rem) { .gets { grid-template-columns: repeat(4, 1fr); } }

.get {
  position: relative;
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: var(--s-7) var(--s-5) var(--s-8);
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--d-base) var(--e-soft);
}
@media (min-width: 44rem) {
  .get { border-right: 1px solid var(--rule); }
  .get:nth-child(2n) { border-right: 0; }
}
@media (min-width: 76rem) {
  .get { border-right: 1px solid var(--rule); }
  .get:nth-child(2n) { border-right: 1px solid var(--rule); }
  .get:last-child { border-right: 0; }
}
.get:hover { background: var(--surface); }

.get__icon {
  width: 44px; height: 44px;
  color: var(--green);
  margin-bottom: var(--s-2);
}
.get__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.get__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.get__body { font-size: var(--t-sm); font-weight: 300; line-height: 1.6; color: var(--fg-muted); }

/* --- 04 Services ---------------------------------------------------------- */
.services { border-top: 1px solid var(--rule); }

.service {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: color var(--d-base) var(--e-soft);
}
@media (min-width: 56rem) {
  .service {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: var(--s-7);
    padding-block: var(--s-7);
  }
}

.service__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
}
.service__what {
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 52ch;
}

/* A hairline that sweeps the full row on hover — the contour language again. */
.service::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 620ms var(--e-out);
}
.service:hover::after { transform: scaleX(1); }

/* --- 05 Ready-made solutions ---------------------------------------------- */
.solutions {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 58rem) { .solutions { grid-template-columns: repeat(3, 1fr); } }

.solution {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: var(--s-7) var(--s-5);
  background: var(--bg);
  transition: background-color var(--d-base) var(--e-soft);
}
.solution:hover { background: var(--green-deep); }

.solution__sector {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.solution__body { font-size: var(--t-sm); font-weight: 300; line-height: 1.62; color: var(--fg-muted); }
.solution__proof {
  margin-top: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--s-1);
}
.solution__figure {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

/* --- 06 Proof ------------------------------------------------------------- */
/* The figure gets the full measure to itself — at this weight it is the
   single strongest asset on the page, and boxing it into a column clipped it. */
.proof__figure-block {
  margin-top: var(--s-8);
  padding-top: var(--s-7);
  border-top: 1px solid var(--rule);
}
.proof__figure {
  font-family: var(--font-display);
  /* 12.2vw keeps "40,000,000 EGP+" inside the shell at every width. The floor
     stays below 12.2vw at 320px so the nowrap figure never outgrows its box. */
  font-size: clamp(2.25rem, 12.2vw, 13rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.86;
  font-variant-numeric: tabular-nums;
  display: block;
  white-space: nowrap;
}
.proof__unit {
  font-size: 0.24em;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 0.86em;
  margin-left: 0.14em;
}
.proof__caption {
  margin-top: var(--s-5);
  font-size: var(--t-lead);
  font-weight: 300;
  max-width: 34ch;
}

.proof__split {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-7);
  border-top: 1px solid var(--rule);
}
@media (min-width: 58rem) {
  .proof__split { grid-template-columns: 16ch 1fr; gap: var(--s-8); align-items: start; }
}

.clients {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  list-style: none;
}
.client {
  font-family: var(--font-mono);
  font-size: var(--t-label-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--rule);
  transition: border-color var(--d-base) var(--e-soft), color var(--d-base) var(--e-soft);
}
.client:hover { border-color: var(--fg); color: var(--fg); }

/* --- 07 About ------------------------------------------------------------- */
.about__grid { row-gap: var(--s-8); align-items: center; }
.about__media { grid-column: 1 / -1; }
.about__copy  { grid-column: 1 / -1; }
@media (min-width: 62rem) {
  .about__copy  { grid-column: 1 / 7; }
  .about__media { grid-column: 8 / 13; }
}
/* height:auto is required — the intrinsic height attribute is a presentational
   hint that otherwise wins over aspect-ratio and renders the image at 900px. */
.about__media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

.about__was {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.about__was s { opacity: 0.6; }

/* --- 08 Final CTA + booking form ------------------------------------------ */
.cta__grid { row-gap: var(--s-9); }
.cta__copy { grid-column: 1 / -1; }
.cta__form { grid-column: 1 / -1; }
@media (min-width: 64rem) {
  .cta__copy { grid-column: 1 / 6; }
  .cta__form { grid-column: 7 / 13; }
}

.form {
  display: grid;
  gap: var(--s-5);
}
.form__row {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-2);
}
.form__alt {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}

.cta__direct {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--s-4);
}
.cta__direct a { font-size: var(--t-lead); font-weight: 300; }

/* --- Careers -------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-block: clamp(9rem, 22vh, 15rem) var(--section-y);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.page-head__media { position: absolute; inset: 0; z-index: -2; background: var(--green-dark); }
.page-head__media video, .page-head__media img { width: 100%; height: 100%; object-fit: cover; }
.page-head__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,15,12,0.78), rgba(10,15,12,0.55) 50%, rgba(10,15,12,0.92));
}
.page-head__title { font-size: var(--t-xxl); max-width: 18ch; }
.page-head__sub { margin-top: var(--s-5); max-width: 52ch; font-size: var(--t-lead); font-weight: 300; color: #C6D3C9; }

.roles { border-top: 1px solid var(--rule); }

.role { border-bottom: 1px solid var(--rule); }

.role__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding-block: var(--s-6);
  text-align: left;
  color: var(--fg);
  transition: color var(--d-base) var(--e-soft);
}
.role__head:hover { color: var(--green); }
.on-dark .role__head:hover, .on-ink .role__head:hover { color: var(--green-live); }

.role__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.1;
}
.role__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-3);
}
.role__tag {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.role__tag--new { color: var(--green); }
.on-dark .role__tag--new, .on-ink .role__tag--new { color: var(--green-live); }

.role__toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--rule);
  transition: background-color var(--d-base) var(--e-soft), border-color var(--d-base) var(--e-soft);
}
.role__head:hover .role__toggle { border-color: currentColor; }
.role__toggle i {
  position: relative;
  display: block;
  width: 14px; height: 14px;
}
.role__toggle i::before, .role__toggle i::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--d-base) var(--e-out), opacity var(--d-base) var(--e-soft);
}
.role__toggle i::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.role__toggle i::after  { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
.role__head[aria-expanded="true"] .role__toggle i::after { transform: translateX(-50%) scaleY(0); opacity: 0; }

.role__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--e-out);
}
.role__panel[data-open="true"] { grid-template-rows: 1fr; }
.role__panel > div { overflow: hidden; }
.role__inner {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
}
@media (min-width: 62rem) {
  .role__inner { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
}
@media (prefers-reduced-motion: reduce) {
  .role__panel { transition: none; }
}

.role__section + .role__section { margin-top: var(--s-6); }
.role__section h4 {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--s-3);
  font-weight: 500;
}
.role__list { display: grid; gap: var(--s-3); list-style: none; }
.role__list li {
  position: relative;
  padding-left: var(--s-5);
  font-size: var(--t-sm);
  font-weight: 300;
  line-height: 1.6;
  color: var(--fg-muted);
}
.role__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 1px;
  background: var(--green);
}
.on-dark .role__list li::before, .on-ink .role__list li::before { background: var(--green-live); }

.roles__empty {
  padding-block: var(--s-9);
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}

/* --- Utility -------------------------------------------------------------- */
.stack   { display: grid; gap: var(--s-5); align-content: start; }
.stack-6 { display: grid; gap: var(--s-6); align-content: start; }
.stack-7 { display: grid; gap: var(--s-7); align-content: start; }
.col-span-full { grid-column: 1 / -1; }
.mt-7 { margin-top: var(--s-7); }
.justify-start { justify-items: start; }