/* ==========================================================================
   Responsive behaviour — 1440 / 1280 / 1024 / 768 / 430 / 390 / 375 / 320
   ========================================================================== */

/* ------------------------------------------------------- 1280 and below */

@media (max-width: 1280px) {
  :root { --shell: 76rem; }

  .nav__list { gap: 0.85rem; }
  .nav__link { font-size: 0.83rem; }
  html[lang='ar'] .nav__link { font-size: 0.86rem; }
  .jstep { grid-template-columns: minmax(0, 5rem) minmax(0, 1fr) minmax(0, 0.8fr); }
}

/* ------------------------------------------------------- 1120 and below */

@media (max-width: 1120px) {
  .why__grid { grid-template-columns: minmax(0, 1fr); }
  .why__title { max-inline-size: 22ch; }
  .portal__grid { grid-template-columns: minmax(0, 1fr); }
  .portal__aside { max-inline-size: 34rem; }
  .formpage { grid-template-columns: minmax(0, 1fr); }
  .formaside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .legal__grid { grid-template-columns: minmax(0, 1fr); }

  .legal__toc {
    position: static;
    border-inline-start: 0;
    border-block-start: 1px solid var(--line);
    border-block-end: 1px solid var(--line);
    padding-inline-start: 0;
    padding-block: 1.5rem;
  }

  .legal__toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------- 1023 and below: mobile nav */

@media (max-width: 1023px) {
  :root { --masthead-h: 68px; }

  .burger { display: flex; }

  .nav {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 95;
    inline-size: min(23rem, 88vw);
    background: #0c0c0c;
    border-inline-start: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--masthead-h) + 1.5rem) 1.75rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(calc(100% * var(--panel-dir, 1)));
    visibility: hidden;
    transition: transform 420ms var(--ease-out), visibility 0s linear 420ms;
  }

  [dir='rtl'] .nav { --panel-dir: -1; }

  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 420ms var(--ease-out), visibility 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list li { border-block-end: 1px solid var(--line); }

  .nav__link {
    padding-block: 1.05rem;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  html[lang='ar'] .nav__link { font-size: 1.05rem; }

  .nav__link::after { inset-block-end: -1px; }

  .nav.is-open .nav__list li {
    opacity: 0;
    transform: translateY(10px);
    animation: navin 400ms var(--ease-out) forwards;
  }

  .nav.is-open .nav__list li:nth-child(1) { animation-delay: 60ms; }
  .nav.is-open .nav__list li:nth-child(2) { animation-delay: 100ms; }
  .nav.is-open .nav__list li:nth-child(3) { animation-delay: 140ms; }
  .nav.is-open .nav__list li:nth-child(4) { animation-delay: 180ms; }
  .nav.is-open .nav__list li:nth-child(5) { animation-delay: 220ms; }
  .nav.is-open .nav__list li:nth-child(6) { animation-delay: 260ms; }
  .nav.is-open .nav__list li:nth-child(7) { animation-delay: 300ms; }

  @keyframes navin {
    to { opacity: 1; transform: none; }
  }

  .nav__actions {
    margin-block-start: 1.75rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .nav__actions .btn { inline-size: 100%; }
  .langswitch { justify-content: center; padding-block: 0.7rem; }

  .masthead--over { background: linear-gradient(to bottom, rgba(8, 8, 8, 0.8), rgba(8, 8, 8, 0)); }

  /* layout */
  .editorial,
  .editorial--flip {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 2.5rem);
  }

  .editorial--flip .editorial__media { order: 0; }
  .editorial__media::after { display: none; }

  .splitband { grid-template-columns: minmax(0, 1fr); min-block-size: 0; }

  .splitband__media {
    position: relative;
    block-size: clamp(15rem, 45vw, 24rem);
  }

  .splitband--reverse .splitband__media { order: 0; }

  .splitband__media::after {
    background: linear-gradient(to top, rgba(8, 8, 8, 0.85), rgba(8, 8, 8, 0.15));
  }

  .splitband__body { max-inline-size: none; padding-block: clamp(2.25rem, 6vw, 3.5rem); }

  .jstep {
    grid-template-columns: minmax(0, 3.5rem) minmax(0, 1fr);
    align-items: start;
  }

  .jstep__media { grid-column: 2; justify-self: stretch; max-inline-size: 26rem; margin-block-start: 0.35rem; }
  .jstep--plain .jstep__text { grid-column: 2; }

  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo--offset > :nth-child(2) { padding-block-start: 0; }

  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mosaic__cell--lead { grid-column: span 4; grid-row: span 2; }
  .mosaic__cell--full { grid-column: span 4; }
}

/* -------------------------------------------------------- 860 and below */

@media (max-width: 860px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .step:nth-child(2),
  .step:nth-child(3) { margin-block-start: 0; }
  .step { grid-template-columns: minmax(0, 1fr); }

  .values { grid-template-columns: minmax(0, 1fr); }
  .value + .value { border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .value::before { display: none; }

  .finale__paths { grid-template-columns: minmax(0, 1fr); }

  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brand { grid-column: 1 / -1; }

  .shead { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* -------------------------------------------------------- 768 and below */

@media (max-width: 768px) {
  :root { --section-y: clamp(3.5rem, 2.5rem + 5vw, 5rem); }

  .hero { min-block-size: min(94svh, 780px); }
  .hero__foot { flex-direction: row; align-items: center; }

  .statband__row { grid-template-columns: minmax(0, 1fr); }

  .statband__cell {
    padding-inline: 0;
    padding-block: 1.5rem;
  }

  .statband__cell + .statband__cell {
    border-inline-start: 0;
    border-block-start: 1px solid var(--line);
  }

  .statband__row {
    align-items: stretch;
  }

  .statband__cell {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
  }

  .statband__value { font-size: clamp(2.6rem, 1.6rem + 7vw, 4rem); }
  .statband__label { margin-block-start: 0; text-align: end; max-inline-size: 18ch; }

  /* Inside the hero the three figures stay side by side — stacking them would
     stretch the opening scene down the page. */
  .hero__stats .statband__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .hero__stats .statband__cell {
    display: block;
    padding-block: 0;
    padding-inline: clamp(0.45rem, 2vw, 1.1rem);
    border-block-start: 0;
  }

  .hero__stats .statband__cell + .statband__cell {
    border-block-start: 0;
    border-inline-start: 1px solid var(--line);
  }

  .hero__stats .statband__label {
    text-align: start;
    max-inline-size: none;
    margin-block-start: 0.4rem;
  }

  .grid-2 { grid-template-columns: minmax(0, 1fr); }

  .formaside { grid-template-columns: minmax(0, 1fr); }

  .rail__track { grid-auto-columns: min(66vw, 260px); }

  .form__submit { flex-direction: column-reverse; align-items: stretch; }
  .form__submit .btn { inline-size: 100%; }
  .form__note { max-inline-size: none; }
}

/* -------------------------------------------------------- 600 and below */

@media (max-width: 600px) {
  .mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(150px, 38vw, 200px);
  }

  .mosaic__cell { grid-column: span 2; grid-row: span 1; }
  .mosaic__cell--lead,
  .mosaic__cell--tall { grid-column: span 2; grid-row: span 1; }

  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__bar { flex-direction: column; align-items: flex-start; }

  .crumbs { font-size: 0.75rem; }

  .why__item { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
  .why__mark { inline-size: 34px; block-size: 34px; }
}

/* -------------------------------------------------------- 430 and below */

@media (max-width: 430px) {
  :root {
    --shell-pad: 1.15rem;
    --masthead-h: 62px;
  }

  .brand { inline-size: 96px; }

  .hero {
    min-block-size: min(92svh, 700px);
    padding-block-start: calc(var(--masthead-h) + 2rem);
  }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { inline-size: 100%; }

  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { inline-size: 100%; }

  .rail__track { grid-auto-columns: min(76vw, 250px); }

  .jstep {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }

  .jstep__num { font-size: 1.75rem; }
  .jstep__media { grid-column: 1; max-inline-size: none; }
  .jstep--plain .jstep__text { grid-column: 1; }

  .journey__intro { font-size: 1rem; }

  .path .btn { inline-size: 100%; justify-self: stretch; }

  .success__ref { inline-size: 100%; justify-content: center; }
}

/* -------------------------------------------------------- 360 and below */

@media (max-width: 360px) {
  :root { --shell-pad: 1rem; }

  .brand { inline-size: 88px; }
  .statband__cell { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .statband__label { text-align: start; max-inline-size: none; }
  .hero__stats .statband__cell { display: block; }
  .hero__stats .statband__label { margin-block-start: 0.35rem; }
  .filefield { flex-direction: column; align-items: stretch; }
  .filefield__btn { justify-content: center; }
}

/* -------------------------------------------------- coarse pointers only */

@media (hover: none) {
  .tile img { filter: grayscale(0.15) brightness(0.9); }
  .tile__go { opacity: 1; transform: none; }
  .step__media img { filter: grayscale(0.2) brightness(0.85); }
  .jstep__media img { filter: none; }
}

/* ---------------------------------------------- short viewports (landscape) */

@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-block-size: auto; padding-block: calc(var(--masthead-h) + 2rem) 2.5rem; }
  .hero__foot { margin-block-start: 1.75rem; }
}

/* --------------------------------------------------------------- print */

@media print {
  .masthead,
  .footer__bottom,
  .hero__stage,
  .backdrop,
  .rail__nav,
  .skip-link { display: none !important; }

  body { background: #fff; color: #000; }
  .hero, .pagehead { min-block-size: auto; padding-block: 1.5rem; }
}