.header-row nav {
  flex-wrap: wrap;
  gap: 5px clamp(10px, 1.45vw, 22px);
}

.wordmark-ar { direction: rtl; unicode-bidi: isolate; }
.brand .wordmark-ar { font-family: "Noto Sans Arabic", Tahoma, sans-serif; }
.brand .wordmark-ar strong { letter-spacing: 0; }
.brand .wordmark-ar small { color: #955620; }
.brand-logo { border-radius: 10px; object-fit: contain; }
.hero-image figcaption { max-width: calc(100% - 30px); }

.fleet {
  border-block-start: 1px solid #e8e0d0;
  background: #f4ede0;
}
.fleet-grid {
  display: grid;
  gap: clamp(20px, 4vw, 54px);
  align-items: center;
}
.fleet-with-photo { grid-template-columns: 1.12fr .88fr; }
.fleet-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fleet-with-photo .fleet-details { grid-template-columns: 1fr; gap: 14px; }
.fleet-details li { border-block-start: 1px solid #d8cbb3; padding-block-start: 12px; }
.fleet-details h3, .tech-details h3 { font-size: clamp(17px, 1.55vw, 22px); }
.fleet-details p, .tech-details p { color: var(--muted); font-size: 14px; margin-block-start: 7px; }
.photo-featured .photo-frame { aspect-ratio: 1.45; }

.steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.steps li > span { font-variant-numeric: tabular-nums; }

.technology {
  background: #112b43;
  color: #fffaf1;
}
.technology .kicker { color: var(--amber); }
.technology .section-head > p, .tech-details p, .tech-note { color: #d5e1e8; }
.tech-details, .tech-screens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.tech-details article { padding: 14px 0 0; border-block-start: 1px solid #5c768a; }
.tech-note { margin-block: 27px 12px; font-size: 13px; }
.tech-screens .photo-card { background: #1b3b55; color: #f0f5f7; border-color: #486375; }
.tech-screens .photo-frame { aspect-ratio: 1.27; background: #e7edea; }

.gallery { background: #fcfaf5; }
.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-block: 30px 19px;
}
.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery-filters button, .viewer-footer button, .viewer-footer a {
  border: 1px solid #bbc6c8;
  border-radius: 8px;
  padding: 8px 13px;
  background: #fffefa;
  color: var(--navy);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}
.gallery-filters button, .viewer-footer button { cursor: pointer; }
.gallery-filters button:hover, .viewer-footer button:hover, .viewer-footer a:hover { background: #f3ecdf; }
.gallery-filters button[aria-pressed="true"] { color: #fff; background: var(--navy); border-color: var(--navy); }
.gallery-count { color: var(--muted); font-size: 13px; }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.photo-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdfa;
}
.photo-frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: #e7e3d9;
  aspect-ratio: 4 / 3;
}
.photo-frame:focus-visible { outline-offset: -4px; z-index: 1; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .24s ease; }
.photo-frame:hover img { transform: scale(1.04); }
.app-image .photo-frame { background: #e9efec; }
.app-image img { object-fit: contain; }
.app-image .photo-frame:hover img { transform: none; }
.photo-card figcaption { padding: 9px 12px 11px; font-size: 13px; font-weight: 600; }
.gallery-footer { display: flex; justify-content: center; margin-block-start: 20px; }
.gallery-footer button { cursor: pointer; }
.gallery-footer:not(:has(button:not([hidden]))) { display: none; }

.photo-viewer {
  max-width: min(1020px, calc(100vw - 26px));
  width: max-content;
  max-height: calc(100dvh - 26px);
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid #dce1dd;
  border-radius: 15px;
  padding: 0;
  overflow: auto;
}
.photo-viewer::backdrop { background: rgb(11 24 40 / .85); }
.viewer-inner { position: relative; padding: 10px; }
.viewer-close {
  position: absolute;
  z-index: 1;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  border: 1px solid #6b8090;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  width: 42px;
  height: 42px;
  font: 30px/1 Arial, sans-serif;
  cursor: pointer;
}
.viewer-inner img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  width: auto;
  max-height: min(72dvh, 700px);
  background: #e7e3d9;
  border-radius: 9px;
  object-fit: contain;
}
.viewer-inner figcaption { padding: 9px 5px; font-size: 15px; font-weight: 700; }
.viewer-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }

.faq { border-block-start: 1px solid var(--line); padding-block-start: 49px; }
.faq-list { margin-block-start: 23px; }
.faq-list details { border-block-start: 1px solid var(--line); padding-block: 13px; }
.faq-list details:last-child { border-block-end: 1px solid var(--line); }
.faq-list summary { cursor: pointer; font-weight: 700; font-size: clamp(15px, 1.4vw, 19px); }
.faq-list summary::marker { color: var(--gold); }
.faq-list p { max-width: 77ch; color: var(--muted); margin-block: 8px 3px; }

@media (max-width: 980px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 840px) {
  .header-row nav { justify-content: flex-start; column-gap: 18px; }
}
@media (max-width: 680px) {
  .fleet-with-photo, .fleet-details { grid-template-columns: 1fr; }
  .tech-details, .tech-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-toolbar { margin-block-start: 17px; }
  .photo-grid { gap: 10px; }
  .photo-card figcaption { padding: 8px; font-size: 12px; }
}
@media (max-width: 450px) {
  .steps, .tech-details { grid-template-columns: 1fr; }
  .tech-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .gallery-filters button, .viewer-footer button, .viewer-footer a { font-size: 12px; padding-inline: 9px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy {
    animation: intro-copy 440ms cubic-bezier(.22, .61, .36, 1);
  }
  .hero-image {
    animation: intro-image 540ms cubic-bezier(.22, .61, .36, 1);
  }
  .motion-reveal {
    animation: content-reveal 400ms cubic-bezier(.22, .61, .36, 1);
  }
  /* Keyboard focus takes precedence when a user moves to a section control. */
  .motion-reveal:focus-within { animation: none; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-actions .arrow { transition: translate 180ms ease-out; }
  .hero-actions .primary:hover .arrow { translate: 2px -2px; }
}

@keyframes intro-copy {
  from { opacity: .9; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes intro-image {
  from { translate: 0 10px; }
  to { translate: 0 0; }
}
@keyframes content-reveal {
  from { opacity: .79; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-frame:hover img, .service:hover { transform: none; }
}