:root {
  --color-header-bg: #ece1ce;
  --color-loader-bg: #ebebee;
  --color-mist: #e5e5e5;
  --color-white: #ffffff;
  --color-maroon: #461519;
  --color-maroon-deep: #411517;
  --color-orange: #fb6130;
  --color-orange-deep: #f55905;
  --color-charcoal: #1c1c1c;
  --color-navy: #000928;
  --color-steel-blue: #406a8c;
  --color-orange-tint: #feebe4;
  --color-text-muted: #555555;
  --color-grey-text: #646464;

  --font-base: "TTCommonsPro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --header-height: 80px;
  --gutter: 32px;
}

/* Menu links to a section (e.g. Partners) glide down instead of jumping.
   The area around the page (seen when a phone scrolls past the bottom) matches the
   footer grey, so there is no white strip under the footer. The page itself stays white. */
html {
  scroll-behavior: smooth;
  background-color: var(--color-mist);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

main {
  container-type: inline-size; /* lets the hero size itself from the page width */
}

body {
  margin: 0;
  font-family: var(--font-base);
  background-color: var(--color-white);
}

/* ---------- Loading screen ---------- */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The background is made of 4 columns that slide away to reveal the page */
.page-loader__cols {
  position: absolute;
  inset: 0;
  display: flex;
  background-color: var(--color-loader-bg); /* hides hairline seams between columns until they open */
}

.page-loader.is-opening .page-loader__cols {
  background-color: transparent;
}

.page-loader__col {
  flex: 1;
  margin-right: -1px; /* slight overlap so no hairline shows between columns */
  background-color: var(--color-loader-bg);
  transform-origin: right center;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.page-loader.is-opening .page-loader__col {
  transform: scaleX(0);
}

.page-loader.is-opening .page-loader__col:nth-child(2) { transition-delay: 0.06s; }
.page-loader.is-opening .page-loader__col:nth-child(3) { transition-delay: 0.12s; }
.page-loader.is-opening .page-loader__col:nth-child(4) { transition-delay: 0.18s; }

.page-loader__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  transition: opacity 0.3s ease;
}

.page-loader.is-leaving .page-loader__inner {
  opacity: 0;
}

.page-loader__z {
  width: 46px;
  height: auto;
  overflow: visible;
}

/* The Z shakes left and right, building up like it's about to burst */
.page-loader__z g {
  transform-box: fill-box;
  transform-origin: center;
  animation: loader-shake 1.1s ease-in-out infinite;
}

@keyframes loader-shake {
  0%, 100% { transform: translateX(0) rotate(0) scale(1); }
  10%      { transform: translateX(-3px) rotate(-2deg); }
  20%      { transform: translateX(3px) rotate(2deg); }
  30%      { transform: translateX(-5px) rotate(-3deg) scale(1.02); }
  40%      { transform: translateX(5px) rotate(3deg) scale(1.03); }
  50%      { transform: translateX(-7px) rotate(-4deg) scale(1.05); }
  60%      { transform: translateX(7px) rotate(4deg) scale(1.07); }
  70%      { transform: translateX(-8px) rotate(-5deg) scale(1.09); }
  80%      { transform: translateX(8px) rotate(5deg) scale(1.1); }
  90%      { transform: translateX(0) rotate(0) scale(0.96); }
}

.page-loader__text {
  margin: 0;
  font-family: "DM Sans", var(--font-base);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.4em;
  margin-right: -0.4em; /* keeps the spaced-out word visually centred */
  text-transform: uppercase;
  color: var(--color-orange);
}

@media (prefers-reduced-motion: reduce) {
  .page-loader__z g {
    animation: loader-pulse 1.6s ease-in-out infinite;
  }
}

@keyframes loader-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ---------- Text reveal: headings and text rise up slightly as they appear ---------- */

/* .reveal is added by js/reveal.js, so without JavaScript everything simply shows */
/* :root raises priority so component transitions (e.g. hover colours) don't cancel it */
:root .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s),
    color 0.25s ease,
    background-color 0.25s ease;
}

:root .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-loader__col,
  .page-loader.is-opening .page-loader__col {
    transition: none;
  }

  :root .reveal {
    transform: none;
    transition: opacity 0.4s ease, color 0.25s ease, background-color 0.25s ease;
  }
}

/* ---------- Header ---------- */

.site-header {
  position: relative; /* was sticky; switch back to "sticky" to pin it again */
  z-index: 100;
  background-color: var(--color-header-bg);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* brand | centred menu | actions */
  align-items: center;
  gap: 24px;
  height: var(--header-height);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-header__logo {
  display: flex;
}

.site-header__logo img {
  display: block;
  height: 44px;
  width: auto;
}

.site-header__divider {
  width: 1px;
  height: 36px;
  background-color: var(--color-white);
}

/* ---------- Main navigation ---------- */

.main-nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* :active = the moment it is clicked or tapped, so the click shows the hover colour too */
.main-nav__link:hover,
.main-nav__link:focus-visible,
.main-nav__link:active,
.main-nav__link[aria-current="page"] { /* the page you are on stays orange */
  color: var(--color-orange);
}

/* ---------- Phone / tablet menu (js/nav.js) ---------- */

/* Three-line menu button: only shown where the full menu doesn't fit */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.nav-toggle:hover,
.nav-toggle:active,
.site-header.is-open .nav-toggle {
  color: var(--color-orange);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* Open: the three lines turn into a cross */
.site-header.is-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.is-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.site-header.is-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1100px) {
  /* logo | menu button (centred in the space between) | language button */
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
  }

  .site-header .site-header__actions {
    display: contents;
  }

  .nav-toggle {
    display: inline-flex;
    justify-self: center;
  }

  /* The menu becomes a see-through panel that drops down under the header,
     so the hero / page behind it still shows */
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--gutter) 20px;
    background-color: rgba(20, 20, 20, 0.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }

  .site-header.is-open .main-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

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

  .site-header .main-nav__link {
    display: flex;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--color-white);
    font-size: 20px;
  }

  .main-nav__list li:last-child .main-nav__link {
    border-bottom: 0;
  }

  .site-header .main-nav__link:hover,
  .site-header .main-nav__link:focus-visible,
  .site-header .main-nav__link:active,
  .site-header .main-nav__link[aria-current="page"] {
    color: var(--color-orange);
  }
}

@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .main-nav,
  .nav-toggle__bar {
    transition: none;
  }
}

.site-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 42px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  filter: brightness(1.1);
}

.btn:active {
  transform: scale(0.97);
}

.btn:focus-visible {
  outline: 2px solid var(--color-maroon);
  outline-offset: 3px;
}

.btn--lang {
  background-color: var(--color-white);
  color: var(--color-orange);
  font-weight: 700;
}

.btn--lang:hover,
.btn--lang:active {
  filter: brightness(0.96);
}

.btn__icon {
  flex-shrink: 0;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100vh; /* the header sits on top of the hero */
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  background-color: var(--color-charcoal);
}

.hero__track {
  position: relative;
  height: 100%;
}

/* Slides are stacked; the current one crossfades in over the previous one */
.hero__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* each slide has its own dark base, so the slide underneath never shows through */
  background-color: var(--color-charcoal);
}

/* Without JavaScript only the first slide shows */
.hero__slide + .hero__slide {
  opacity: 0;
}

/* Diagonal "Z-slash" wipe: the next slide sweeps in from the right behind a slanted edge.
   Waiting slides sit fully clipped off to the right. */
.hero.has-motion .hero__slide {
  opacity: 1;
  z-index: 0;
  clip-path: polygon(145% 0, 145% 0, 145% 100%, 130% 100%);
}

.hero.has-motion .hero__slide.is-leaving {
  z-index: 1;
  clip-path: polygon(0 0, 130% 0, 130% 100%, -15% 100%);
}

.hero.has-motion .hero__slide.is-current {
  z-index: 2;
  clip-path: polygon(0 0, 130% 0, 130% 100%, -15% 100%);
  transition: clip-path 1.25s cubic-bezier(0.77, 0, 0.18, 1);
}

.hero.has-motion.is-starting .hero__slide,
.hero.has-motion.is-starting .hero__media {
  transition: none;
}

/* Heading laid over each hero slide */
.hero__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--header-height) clamp(16px, 8vw, 160px) 0;
  pointer-events: none;
}

.hero__title {
  margin: 0;
  font-family: "Lexend Deca", sans-serif;
  font-size: 50.4px; /* 10% smaller than 56px */
  font-weight: 700;
  line-height: 70.56px;
  /* See-through white: the video / photo behind shows through the letters */
  color: rgba(255, 255, 255, 0.7);
  text-wrap: balance;
}

/* Each written line of a hero heading (wrapped by js/hero.js) */
.hero__line {
  display: block;
}

/* Second line set slightly in from the first */
.hero__title--indent .hero__line + .hero__line {
  padding-left: 1.1em;
}

/* Cairo slide: heading sits on the right-hand side of the photo, level with the road,
   text still left-aligned */
@media (min-width: 768px) {
  .hero__content--road {
    inset: 46% auto auto 49%;
    display: block;
    padding: 0;
  }

  .hero__content--road .hero__title {
    white-space: nowrap;
  }
}

/* Hero heading used as a link (e.g. "Join Us"): an orange rounded button,
   white with orange text on hover */
.hero__title-link {
  display: inline-block;
  padding: 0.12em 0.7em 0.2em;
  border: 2px solid var(--color-white);
  border-radius: 999px;
  /* see-through backgrounds so the photo shows through the button */
  background-color: rgba(251, 97, 48, 0.7);
  color: var(--color-white);
  font-family: "DM Sans", sans-serif;
  font-size: 32px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.hero__title-link:hover,
.hero__title-link:focus-visible {
  border-color: var(--color-orange);
  background-color: rgba(255, 255, 255, 0.7);
  color: var(--color-orange);
}

.hero__title-link:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

/* The button itself rises in with its words */
.js-headline .hero__title-link {
  opacity: 0;
  transform: translateY(30px);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js-headline.is-active .hero__title-link {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-headline .hero__title-link {
    transform: none;
  }
}

/* Word-by-word rise: each word slides up from behind its own mask, one after another,
   each time its slide comes into view (words are wrapped by js/hero.js after the loader opens).
   Without JavaScript the heading simply shows. */
.hero__word {
  display: inline-block;
  overflow: hidden;
  /* room for the outline and for descenders so nothing is clipped */
  padding: 0.04em 0.06em 0.12em;
  margin: -0.04em -0.06em -0.12em;
  vertical-align: top;
}

.hero__word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(115%);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.8s ease;
}

.hero__slide.is-active .hero__word-inner,
.js-headline.is-active .hero__word-inner {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--word-index, 0) * 0.08s);
}

@media (max-width: 600px) {
  .hero__title {
    font-size: 32.4px; /* 10% smaller than 36px */
    line-height: 45px;
  }
}

/* Phones: the Cairo heading shrinks with the screen so "Powering Deliveries"
   always stays on one line, with room to spare at the edges */
@media (max-width: 600px) {
  .hero__title--indent {
    font-size: min(32.4px, 7.6vw);
    line-height: 1.39;
  }

  .hero__title--indent .hero__line {
    white-space: nowrap;
  }

  /* "Powering Deliveries" on the left, "Across Cairo." on the right,
     both inside the same side padding */
  .hero__title--indent {
    width: 100%;
  }

  .hero__title--indent .hero__line + .hero__line {
    padding-left: 0;
    text-align: right;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__word-inner {
    transform: none;
    transition: opacity 0.6s ease;
  }
}

.hero__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom; /* any cropping comes off the top */
  opacity: 0.6;
}

/* Inside the wipe the picture glides into place; the outgoing one drifts left as it's covered */
.hero.has-motion .hero__media {
  transform: translateX(12%) scale(1.08);
}

.hero.has-motion .hero__slide.is-current .hero__media {
  transform: none;
  transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero.has-motion .hero__slide.is-leaving .hero__media {
  transform: translateX(-8%);
  transition: transform 1.25s cubic-bezier(0.77, 0, 0.18, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hero.has-motion .hero__slide,
  .hero.has-motion .hero__slide.is-current,
  .hero.has-motion .hero__media,
  .hero.has-motion .hero__slide.is-current .hero__media,
  .hero.has-motion .hero__slide.is-leaving .hero__media {
    transform: none;
    transition: none;
  }
}

/* Phones: the hero is taller than it is wide, so only a narrow slice of each wide
   frame shows. Aim that slice at what matters in each slide. */
@media (max-width: 767px) {
  /* Video: keep the motorcycle in view (it drifts from centre to slightly left) */
  .hero__media--video {
    object-position: 52% center;
  }

  /* Pyramid road: the motorcycle and the left pyramid together */
  .hero__media--pyramids {
    object-position: 40% center;
  }
}

/* Desktop: the video's 16:9 shape minus 150px, trimmed from the top */
@media (min-width: 768px) {
  .hero {
    height: calc(100vw * 9 / 16 - 150px); /* fallback for older browsers */
    height: calc(100cqw * 9 / 16 - 150px); /* cqw = width of <main>, excluding the scrollbar */
    min-height: 0;
  }
}

/* Header with no background, laid over the top of the page's hero picture */
.site-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
}

/* Header on a white page: dark logo (set in the HTML), dark links and divider */
.site-header--light {
  background-color: var(--color-white);
}

.site-header--light .site-header__divider {
  background-color: var(--color-charcoal);
  opacity: 0.25;
}

.site-header--light .main-nav__link {
  color: var(--color-charcoal);
}

.site-header--light .main-nav__link:hover,
.site-header--light .main-nav__link:focus-visible,
.site-header--light .main-nav__link:active,
.site-header--light .main-nav__link[aria-current="page"] {
  color: var(--color-orange);
}

.site-header--light .btn--lang {
  box-shadow: inset 0 0 0 1px rgba(28, 28, 28, 0.15); /* keeps the white button visible on white */
}

/* ---------- Privacy page ---------- */

.page-privacy {
  background-color: var(--color-header-bg);
}

/* Solid charcoal bar so the white logo and links read on the beige page */
.page-privacy .site-header {
  background-color: var(--color-charcoal);
}

.privacy__inner {
  max-width: 790px;
  margin: 0 auto;
  padding: 120px var(--gutter) 120px;
  color: var(--color-maroon-deep);
  font-family: var(--font-base);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.privacy__title {
  margin: 0 0 24px;
  font-size: 44px;
  font-weight: 700;
  line-height: 49px;
}

/* Numbered section headings ("1. Who we are…") */
.privacy h2 {
  margin: 64px 0 20px;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  text-wrap: balance;
}

/* Smaller sub-headings inside a section */
.privacy h3 {
  margin: 28px 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.privacy p {
  margin: 0 0 20px;
}

.privacy ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.privacy li {
  margin-bottom: 10px;
}

.privacy li::marker {
  color: var(--color-orange);
}

.privacy a {
  color: var(--color-orange);
  text-underline-offset: 3px;
}

.privacy__updated {
  margin-top: 48px;
  font-style: italic;
}

/* Details still to be confirmed by Lahazat: highlighted so none are missed */
.privacy__todo {
  padding: 1px 6px;
  border-radius: 4px;
  background-color: rgba(251, 97, 48, 0.18);
  color: var(--color-orange-deep);
  font-weight: 700;
  font-style: normal;
}

@media (max-width: 600px) {
  .privacy__inner {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .privacy__title {
    font-size: 36px;
    line-height: 41px;
  }

  .privacy h2 {
    margin-top: 48px;
    font-size: 26px;
    line-height: 31px;
  }
}

/* ---------- Contact page ---------- */

/* Pyramid road photo (from the home hero) behind the whole page, header included,
   dimmed like the home hero so the form stays readable */
.page-contact {
  background-color: var(--color-charcoal);
  isolation: isolate; /* keeps the photo layer (::before) above this dark base */
}

/* The photo belongs to the form area: it reaches up behind the header and scrolls
   together with the form, ending where the footer starts */
.page-contact .contact {
  position: relative;
}

.page-contact .contact::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--header-height));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: url("../assets/web/hero-pyramids.webp") center / cover no-repeat;
  opacity: 0.6;
  pointer-events: none;
}

.page-contact .site-header {
  background-color: transparent;
}

.page-contact .field__label {
  color: var(--color-white);
}

.contact {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
}

.contact__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px clamp(16px, 5vw, 64px) 96px;
}

/* Contact form: centred, same fields as the application form */
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}

/* See-through boxes so the pyramid photo shows inside them; typed text in white */
.page-contact .field__input {
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
}

.page-contact .field__input:hover {
  border-color: var(--color-white);
}

.page-contact .field__input:focus {
  border-color: var(--color-orange);
}

/* Browser autofill normally paints a solid background: keep the box see-through
   and the text white even after the browser fills it in */
.page-contact .field__input:-webkit-autofill,
.page-contact .field__input:-webkit-autofill:hover,
.page-contact .field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-white);
  caret-color: var(--color-white);
  transition: background-color 9999s ease-out 0s;
}

.page-contact .field__input:autofill {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Form submit button: orange pill, white with orange text on hover */
.form__actions {
  display: flex;
  justify-content: flex-start;
}

.btn--submit {
  min-width: 180px;
  height: 52px;
  border: 2px solid var(--color-orange);
  /* see-through like the form boxes, so the photo shows through */
  background-color: rgba(251, 97, 48, 0.8);
  color: var(--color-white);
  font-family: "DM Sans", var(--font-base);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.btn--submit:hover,
.btn--submit:focus-visible {
  filter: none;
  border-color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.7);
  color: var(--color-orange);
}

.btn--submit:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* Message shown in place of a form after it is sent */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 32px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  text-align: center;
  outline: none;
  animation: form-success-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.form-success[hidden],
.contact__form[hidden],
.apply__form[hidden] {
  display: none;
}

/* The form fades out before the success message takes its place */
.contact__form,
.apply__form {
  transition: opacity 0.35s ease;
}

.contact__form.is-leaving,
.apply__form.is-leaving {
  opacity: 0;
}

.form-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  border-radius: 50%;
  background-color: rgba(251, 97, 48, 0.8);
  color: var(--color-white);
}

.form-success__title {
  margin: 0;
  font-family: "DM Sans", var(--font-base);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.form-success__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  opacity: 0.9;
}

@keyframes form-success-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .form-success {
    animation: none;
  }
}

/* Multi-line message box */
.field__input.field__input--message {
  height: auto;
  min-height: 160px;
  padding: 14px 18px;
  line-height: 1.5;
  resize: vertical;
}

/* ---------- Application form page ---------- */

.apply {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  overflow: hidden;
}

/* Orange page; the header sits straight on it */
/* Navy base under a slightly see-through orange page */
.page-apply {
  min-height: 100vh;
  /* see-through orange laid over navy, painted on the page itself so the area
     around the page can stay footer grey */
  background: linear-gradient(rgba(251, 97, 48, 0.85), rgba(251, 97, 48, 0.85)), var(--color-navy);
}

/* Solid charcoal header bar above the page content (white logo and links) */
.page-apply .site-header {
  background-color: var(--color-charcoal);
}


.apply__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); /* right column is left free for the picture */
  align-items: start;
  align-content: start; /* rows keep their own height (the sent message is placed precisely) */
  gap: 56px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px clamp(16px, 5vw, 64px) 96px;
}

.apply__form {
  position: relative;
  z-index: 1; /* above the picture */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.apply__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field__label {
  font-family: "DM Sans", var(--font-base);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--color-charcoal);
}

/* A group of fields under one label (e.g. the two ID photos) */
.field--group {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.field--group > .field__label {
  padding: 0;
  margin-bottom: 8px;
}

/* File upload box: the real file input is hidden, the whole box is clickable */
.upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 120px;
  padding: 16px;
  border: 1.5px dashed rgba(28, 28, 28, 0.35);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.7);
  color: var(--color-charcoal);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.upload:hover {
  border-color: var(--color-charcoal);
  background-color: rgba(255, 255, 255, 0.85);
}

.upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload:focus-within {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(251, 97, 48, 0.18);
}

.upload__icon {
  color: var(--color-orange);
}

.upload__title {
  font-family: "DM Sans", var(--font-base);
  font-size: 15px;
  font-weight: 700;
}

.upload__hint {
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  color: rgba(28, 28, 28, 0.65);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Once a file is attached: solid border and the file name in charcoal */
.upload.has-file {
  border-style: solid;
  border-color: var(--color-charcoal);
}

.upload.has-file .upload__hint {
  color: var(--color-charcoal);
  font-weight: 700;
}

/* On the orange application page an orange button would vanish:
   white with orange text, turning charcoal on hover */
.page-apply .btn--submit {
  border-color: var(--color-white);
  background-color: var(--color-white);
  color: var(--color-orange);
}

.page-apply .btn--submit:hover,
.page-apply .btn--submit:focus-visible {
  border-color: var(--color-charcoal);
  background-color: var(--color-charcoal);
  color: var(--color-white);
}

/* The success panel sits where the form was, on the orange side */
.page-apply .form-success {
  position: relative;
  z-index: 1;
  margin: 0;
}

/* Form check messages (js/apply.js): a small dark note that floats just under
   its field, over the page, so showing or hiding it never moves anything */
.field {
  position: relative;
}

.field__error {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  pointer-events: none; /* taps go through to the field underneath */
  padding: 8px 12px;
  border-radius: 10px;
  background-color: rgba(28, 28, 28, 0.92);
  color: var(--color-white);
  font-size: 14px;
  line-height: 1.4;
}

.field__error::before {
  content: "!";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-orange);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
}

.field__error[hidden] {
  display: none;
}

/* Little arrow pointing up at the field */
.field__error::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 18px;
  border: 6px solid transparent;
  border-bottom-color: rgba(28, 28, 28, 0.92);
}

.field__input[aria-invalid="true"] {
  border: 2px solid var(--color-charcoal);
}

/* On the dark Contact photo a dark outline wouldn't show: use orange */
.page-contact .field__input[aria-invalid="true"] {
  border: 2px solid var(--color-orange);
}

.field__input::placeholder {
  color: rgba(28, 28, 28, 0.4);
}

/* Upload box with a missing file */
.upload.has-error {
  border-style: solid;
  border-width: 2px;
  border-color: var(--color-charcoal);
}

.upload.has-error .upload__hint {
  color: var(--color-charcoal);
  font-weight: 700;
}

/* White labels on the orange application page */
.page-apply .field__label {
  color: var(--color-white);
}

.field__input {
  width: 100%;
  height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(28, 28, 28, 0.2);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.7); /* slightly see-through so the orange shows */
  color: var(--color-charcoal);
  font-family: var(--font-base);
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Drop-down (e.g. Governorate): same look as the text boxes, with an orange arrow */
.field__select {
  padding-right: 44px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23fb6130' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
  cursor: pointer;
}

/* "Choose a governorate" shows faded until something is picked */
.field__select:invalid {
  color: rgba(28, 28, 28, 0.45);
}

.field__select option {
  color: var(--color-charcoal);
}

/* Lighter, regular-weight note inside a label, e.g. "(where you'd like to work)" */
.field__label-note {
  font-weight: 400;
  opacity: 0.85;
}

.field__input:hover {
  border-color: rgba(28, 28, 28, 0.4);
}

.field__input:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(251, 97, 48, 0.18);
}

/* Desktop: the whole square picture (no cropping) sits on the right, beside the form,
   centred on the form's height. Its left, top and bottom edges fade into the orange
   so picture and background read as one piece. */
@media (min-width: 901px) {
  .apply__media {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 0;
    width: 52%;
    transform: translateY(-50%);
  }

  .apply__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 24%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 24%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-composite: intersect;
  }
}

.apply__img {
  display: block;
  border-radius: 0;
}

@media (max-width: 900px) {
  .apply__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Small screens: picture on top, fading into the orange below it, then the form */
  .apply__media {
    order: -1;
    margin: -48px calc(-1 * clamp(16px, 5vw, 64px)) 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  }

  .apply__img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 500px) {
  .apply__row {
    grid-template-columns: 1fr;
  }

  /* Half the space between Submit and the footer on phones: 96px -> 48px */
  .apply__inner {
    padding-bottom: 48px;
  }

  /* Upload boxes (ID front/back, licences) 10% shorter on phones: 120px -> 108px */
  .upload {
    min-height: 108px;
  }

  /* First Name and Last Name stay side by side on phones */
  .apply__row--names {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* ---------- Inner page hero (e.g. Services) ---------- */

.page-hero {
  position: relative;
  background-color: var(--color-navy);
}

.page-hero__img {
  display: block;
  width: 100%;
  height: calc(100vw * 1116 / 2000 - 50px); /* the photo's natural height, minus 50px */
  object-fit: cover;
  opacity: 0.9; /* lets a little navy show through (lighter than the home hero's 0.6) */
}

/* Navy fade from the left so the white text stays readable on the light background */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 9, 40, 0.6) 0%, rgba(0, 9, 40, 0.35) 40%, rgba(0, 9, 40, 0) 70%);
  pointer-events: none;
}

/* Careers: the same treatment as the home hero — photo at 60% over charcoal, no text fade */
.page-hero--soft {
  background-color: var(--color-charcoal);
}

.page-hero--soft .page-hero__img {
  opacity: 0.6;
  object-position: center bottom; /* cropping comes off the top */
}

/* Desktop: the photo's natural height minus 100px, trimmed from the top */
@media (min-width: 801px) {
  .page-hero--soft .page-hero__img {
    height: calc(100vw * 1116 / 2000 - 100px); /* fallback for older browsers */
    height: calc(100cqw * 1116 / 2000 - 100px); /* cqw = width of <main>, excluding the scrollbar */
  }
}

.page-hero.page-hero--soft::after {
  content: none;
}

.page-hero__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: var(--header-height) clamp(16px, 8vw, 160px) 0;
}

.page-hero__eyebrow {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-white);
}

.page-hero__title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(36px, 5.2vw, 84px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  /* See-through white like the home hero headings: the photo shows through the letters */
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 800px) {
  .page-hero__img {
    height: 520px;
  }

  /* Services uses a portrait photo on phones: show it whole at its own shape */
  .page-hero:not(.page-hero--soft) .page-hero__img {
    height: auto;
    aspect-ratio: 1000 / 1340;
  }

  /* Phones: "Our Services" and the heading sit 100px lower, and the
     heading is a stronger white */
  .page-hero:not(.page-hero--soft) .page-hero__content {
    transform: translateY(100px);
  }

  .page-hero:not(.page-hero--soft) .page-hero__title {
    color: rgba(255, 255, 255, 0.92);
  }

  /* Careers: the Join Us button sits about 2.5 cm (95px) lower and is 20% smaller */
  .page-hero--soft .page-hero__content {
    transform: translateY(95px);
  }

  .page-hero--soft .hero__title-link {
    font-size: 25.6px;
  }

  /* Lighter, shorter navy fade from the left on phones (about half the desktop strength) */
  .page-hero:not(.page-hero--soft)::after {
    background: linear-gradient(90deg, rgba(0, 9, 40, 0.3) 0%, rgba(0, 9, 40, 0.15) 35%, rgba(0, 9, 40, 0) 60%);
  }

  .page-hero__content {
    gap: 16px;
  }

  .page-hero__eyebrow {
    font-size: 16px;
  }

  .page-hero__title br {
    display: none;
  }
}

/* ---------- Main services list ---------- */

.services {
  background-color: var(--color-header-bg);
}

.services__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 96px clamp(16px, 8vw, 160px);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-card {
  /* Share the icon / title / description rows with the other cards in the row,
     so every description starts at the same height. */
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  gap: 12px;
  padding: 16px 28px 32px; /* half the space above the icon */
  border-radius: 20px;
  background-color: var(--color-white);
}

.service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: -2px; /* with the 12px row gap: 10px under the icon, half of before */
  border-radius: 50%;
  background-color: var(--color-orange-tint);
  color: var(--color-orange);
}

.service-card__title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 34.8px;
  color: var(--color-charcoal);
}

.service-card__text {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 31px;
  color: var(--color-maroon-deep);
}

/* Hover: the whole card turns brand orange, text and icon switch to white */
.service-card,
.service-card__icon,
.service-card__title,
.service-card__text {
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s ease;
}

.service-card:hover {
  background-color: var(--color-orange);
  transform: translateY(-12px); /* lifts the card; it drops back when the pointer leaves */
}

.service-card:hover .service-card__title,
.service-card:hover .service-card__text {
  color: var(--color-white);
}

.service-card:hover .service-card__icon {
  background-color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .service-card:hover {
    transform: none;
  }
}

@media (max-width: 1100px) {
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .services__inner {
    padding-block: 64px;
  }

  .services__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Feature: Order Anything ---------- */

.feature {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px var(--gutter);
}

.feature__title {
  margin: 0 0 48px;
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  color: var(--color-orange);
}

.feature__body {
  display: grid;
  grid-template-columns: minmax(0, 316px) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

/* Room for the bag to drift up to 20px in any direction */
.feature__media {
  padding: 20px;
}

.feature__img {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}

.feature__text {
  max-width: 62ch;
  margin: 0 0 40px;
  font-size: 36px;
  font-weight: 400;
  line-height: 40px;
  color: var(--color-grey-text);
}

@media (max-width: 800px) {
  .feature__text {
    font-size: 24px;
    line-height: 30px;
  }
}

/* Lahazat logo used in place of the word inside running text.
   Sized from the text so its letters match the words around it; the negative
   margins keep it from pushing the lines apart. */
.inline-logo {
  display: inline-block;
  height: 1.08em; /* about 23% smaller than the original 1.4em */
  width: auto;
  margin: -0.45em 0.02em;
  /* sits the logo's letters on the text baseline: the letters stop 0.24em above the
     image bottom, and the negative bottom margin moves the alignment point by 0.45em */
  vertical-align: 0.21em;
}

.feature__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 56px;
  border-radius: 999px;
  background-color: var(--color-orange-tint);
  color: var(--color-charcoal);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.feature__cta:hover {
  background-color: var(--color-orange);
  color: var(--color-white);
}

.feature__cta:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}

@media (max-width: 800px) {
  .feature {
    padding-block: 56px;
  }

  .feature__title {
    margin-bottom: 32px;
    font-size: 38.4px; /* 20% smaller than the 48px it was on phones */
  }

  .feature__body {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 28px;
    text-align: center;
  }

  .feature__media {
    width: min(288px, 100%);
  }

  .feature__cta {
    height: 56px;
    padding: 0 36px;
  }
}

/* ---------- Our Partners (client logos) ---------- */

/* Full-width grey band; content still kept within 1200px */
.clients {
  padding: 80px max(var(--gutter), calc((100% - 1200px) / 2)) 96px;
  background-color: var(--color-loader-bg);
}

.clients__title {
  margin: 0 0 48px;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
  color: var(--color-orange);
}

.clients__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Equal tiles so logos of different shapes sit evenly */
.clients__item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 18px;
  border: 1px solid rgba(28, 28, 28, 0.08);
  border-radius: 16px;
  background-color: var(--color-white);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.clients__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(28, 28, 28, 0.1);
}

.clients__logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 900px) {
  .clients__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  /* Phones: heading 15% smaller than its 36px, logo tiles 15% smaller, two per row */
  /* Section 10% shorter than before: less space above, below and under the heading */
  .clients {
    padding-top: 56px;
    padding-bottom: 72px;
  }

  .clients__title {
    margin-bottom: 34px;
    font-size: 30.6px;
  }

  /* Logo tiles centred on the page */
  .clients__list {
    grid-template-columns: repeat(2, calc((100% - 20px) / 2 * 0.85));
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients__item:hover {
    transform: none;
  }
}

/* ---------- Partners ---------- */

.partners {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 96px var(--gutter) 96px 64px;
}

.partners__img {
  display: block;
  width: calc(100% - 5px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 24px;
}

.partners__content {
  align-self: start; /* top-aligned with the picture */
  display: flex;
  flex-direction: column;
  gap: 48px;
  text-align: left;
}

.partners__title {
  margin: 0;
  font-size: 40px;
  font-weight: 400;
  line-height: 48px;
  text-wrap: balance;
  color: var(--color-maroon-deep);
}

.partners__points {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.partners__point-title {
  margin: 0 0 4px;
  font-size: 44px;
  font-weight: 700;
  line-height: 49px;
  color: var(--color-orange-deep);
}

.partners__point-text {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 31px;
  color: var(--color-maroon-deep);
}

/* Phones: "The Partners Behind" on line one, "Every Delivery" on line two.
   The size follows the screen width so line one always fits. */
@media (max-width: 800px) {
  .partners__title {
    font-size: min(34px, calc((100vw - 2 * var(--gutter)) / 9.3 * 0.85)); /* 15% smaller */
    font-weight: 700;
    line-height: 1.2;
  }

  .partners__title-line {
    display: block;
    white-space: nowrap;
  }

  /* Team photo runs edge to edge with square corners */
  .partners__media {
    margin-inline: calc(-1 * var(--gutter));
  }

  .partners .partners__img {
    width: 100%;
    border-radius: 0;
  }

  /* Trained & Prepared, Professional, Responsible: 20% smaller than 44px, then 5%, 5% and 10% smaller */
  .partners__point-title {
    margin-bottom: 3.8px; /* 5% less */
    font-size: 28.59px;
    line-height: 31.84px;
  }

  /* 5% less space below the heading; the points are spaced like the section bottom */
  .partners__content {
    gap: 45.6px;
  }

  .partners__points {
    gap: 34.2px; /* same as the space under the last point */
  }
}

@media (max-width: 800px) {
  .partners {
    grid-template-columns: 1fr;
    gap: 38px; /* 5% less space above the heading */
    padding: 0 var(--gutter) 34.2px; /* no space above: the section starts with the photo; half the space below */
  }
}

/* ---------- Footer ---------- */

/* Fills the screen below the sticky header, so at the very bottom
   of the page only the header and footer are visible. */
.site-footer {
  display: flex;
  min-height: calc(100vh - var(--header-height) - 94px);
  min-height: calc(100svh - var(--header-height) - 94px);
  background-color: var(--color-mist);
  color: var(--color-charcoal);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 96px var(--gutter) 48px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.4fr;
  gap: 48px 32px;
}

.site-footer__logo {
  display: block;
  width: 220px;
  height: auto;
}

.site-footer__tagline {
  max-width: 300px;
  margin: 24px 0 0;
}

.site-footer__title {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 27px;
  color: var(--color-charcoal);
}

.site-footer__tagline,
.site-footer__list,
.site-footer__copy {
  font-size: 16px;
  font-weight: 400;
  line-height: 31px;
  color: var(--color-charcoal);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  font-style: normal;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  color: var(--color-orange);
}

/* Address that opens Google Maps: two lines, orange on hover like the other links */
.site-footer__map {
  display: flex;
  flex-direction: column;
}

.site-footer__map:hover,
.site-footer__map:focus-visible {
  color: var(--color-orange);
}

.site-footer__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Bottom line: copyright on the left, social icons on the right,
   Privacy centred in the space between them */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.site-footer__privacy {
  font-size: 16px;
  line-height: 31px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__privacy:hover,
.site-footer__privacy:focus-visible {
  color: var(--color-orange);
}

.site-footer__copy {
  margin: 0;
}

.site-footer__social {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__social a {
  display: flex;
  color: var(--color-orange);
  transition: transform 0.2s ease;
}

.site-footer__social a:hover {
  transform: translateY(-2px);
}

.site-footer__social .icon {
  width: 26px;
  height: 26px;
}

/* ---------- Store badges ---------- */

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  padding: 10px 20px 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35); /* keeps the dark button visible on the dark footer */
  border-radius: 12px;
  background-color: var(--color-charcoal);
  color: var(--color-white);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Footer links take the footer text colour; store buttons keep white text */
.site-footer .store-badge {
  color: var(--color-white);
}

.site-footer .store-badge:hover {
  transform: translateY(-2px);
  border-color: var(--color-white);
}

.store-badge__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}

.store-badge__icon--huawei {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #c7000b;
}

.store-badge__icon--huawei .icon {
  width: 20px;
  height: 20px;
}

.store-badge__text {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.store-badge__text small {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- "Coming soon" panel (js/coming-soon.js) ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  padding: 16px 32px;
  border-radius: 999px;
  background-color: var(--color-charcoal);
  color: var(--color-white);
  font-family: "DM Sans", var(--font-base);
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  pointer-events: none;
}

.toast::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 12px;
  border-radius: 50%;
  background-color: var(--color-orange);
  vertical-align: middle;
}

.toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Phones: panel and text 30% smaller */
@media (max-width: 600px) {
  .toast {
    padding: 11.2px 22.4px;
    font-size: 12.6px;
  }

  .toast::before {
    width: 7px;
    height: 7px;
    margin-right: 8.4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transform: translate(-50%, 0);
  }
}

/* ---------- Icons (brand marks from Simple Icons, stored in assets/icons, tinted with currentColor) ---------- */

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.icon--apple      { --icon: url("../assets/icons/apple.svg"); }
.icon--googleplay { --icon: url("../assets/icons/googleplay.svg"); }
.icon--huawei     { --icon: url("../assets/icons/huawei.svg"); }
.icon--facebook   { --icon: url("../assets/icons/facebook.svg"); }
.icon--instagram  { --icon: url("../assets/icons/instagram.svg"); }
.icon--tiktok     { --icon: url("../assets/icons/tiktok.svg"); }

.store-badge__icon.icon {
  color: var(--color-white);
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
  :root {
    --header-height: 64px;
    --gutter: 16px;
  }

  .site-header__brand {
    gap: 12px;
  }

  .site-header__logo img {
    height: 32px;
  }

  .site-header__divider {
    height: 28px;
  }

  .site-header__actions {
    gap: 8px;
  }

  .btn {
    height: 36px;
    padding: 0 16px;
  }

  .site-footer__inner {
    gap: 43.2px; /* 10% less space between Google Play and the social icons */
    padding-top: 56px;
    padding-bottom: 32px;
  }

  /* Logo and Download App take the full width; Quick Links and Contact Info sit side by side */
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }

  .site-footer__brand,
  .site-footer__col--apps {
    grid-column: 1 / -1;
  }

  .site-footer__logo {
    width: 180px;
  }

  /* Phones: social icons centred on top; copyright (left) and Privacy (right) on one line below */
  .site-footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "social social"
      "copy privacy";
    align-items: center;
    gap: 43.2px 16px; /* same space after the social icons as before them */
  }

  /* Copyright line: more space from the screen edges (16px -> 17.6px -> 26.4px)
     and text 5% smaller (16px -> 15.2px) */
  .site-footer__copy {
    grid-area: copy;
    padding-left: 10.4px;
    font-size: 15.2px;
    line-height: 20px;
  }

  .site-footer__privacy {
    grid-area: privacy;
    margin-left: 0;
    padding-right: 10.4px;
    font-size: 15.2px;
    line-height: 20px;
  }

  /* Copyright line sits at the very bottom, just clear of the phone's home-bar area */
  .site-footer .site-footer__inner {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* Download App heading, store buttons and social icons centred on phones */
  .site-footer__col--apps {
    text-align: center;
  }

  .site-footer__col--apps .site-footer__stores {
    justify-content: center;
  }

  .site-footer__social {
    grid-area: social;
    justify-self: center;
  }
}