/* ADOBRTECH production overrides: performance, accessibility, and touch input. */

button,
[role="button"],
a {
  touch-action: manipulation;
}

/* The small uppercase facts labels were below the recommended contrast ratio. */
.case-study-facts span,
.case-study-scope > span {
  color: #3f5660 !important;
}

/* Preserve the orange brand accent while meeting normal-text contrast. */
.kicker,
.section-heading .kicker,
.materials-section .kicker,
.blog-card > span {
  color: #b33d00 !important;
}

.story-index,
.story-text-link,
.kicker.light,
.final-cta .kicker {
  color: #ff9d75 !important;
}

/* Keep image boxes stable while the browser is fetching their contents. */
.home-hero-visual > img,
.project-gallery-frame img,
.project-teaser-media img,
.story-poster-media img {
  display: block;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

}

/* Keep the client reel moving by default. The pause button remains authoritative. */
.partner-track {
  display: flex !important;
  width: max-content !important;
  animation: adobrtech-partners 48s linear infinite !important;
  animation-play-state: running !important;
  transform: translateZ(0);
  direction: ltr;
}

.partner-track[data-paused="true"] {
  animation-play-state: paused !important;
}

/* Emergency mobile navigation fallback when React hydration is delayed. */
html.mobile-menu-fallback-open,
body.mobile-menu-fallback-open {
  overflow: hidden !important;
}

@media (max-width: 1180px) {
  .mobile-menu.fallback-menu {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: min(480px, 100vw) !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: max(16px, env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left)) !important;
    overflow-y: auto !important;
    background: #082833 !important;
    color: #fff !important;
  }

  [dir="rtl"] .mobile-menu.fallback-menu {
    inset: 0 auto 0 0 !important;
  }

  .mobile-menu.fallback-menu .mobile-menu-top {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
  }

  .mobile-menu.fallback-menu .mobile-menu-top img {
    width: auto;
    height: auto;
    max-width: 86px;
  }

  .mobile-menu.fallback-menu .mobile-menu-top button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #ffffff30;
    background: transparent;
    color: #fff;
    font-size: 32px;
    line-height: 1;
  }

  .mobile-menu.fallback-menu nav {
    display: flex !important;
    flex-direction: column;
    gap: 0;
  }

  .mobile-menu.fallback-menu nav a {
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid #ffffff26;
    color: #fff;
    text-decoration: none;
  }

  .mobile-menu.fallback-menu .brand-button {
    margin-top: auto;
    width: 100%;
  }
}

/* Final responsive contract for the story block. The portrait asset stays complete
   at every width; the copy never collapses into the image column. */
.story-poster {
  display: grid !important;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden;
}

.story-poster-media {
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  aspect-ratio: 3 / 4;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0e3545;
}

.story-poster-media img {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center;
}

.story-poster-copy {
  min-width: 0 !important;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #0e3545;
  color: #fff;
}

.story-poster-copy h2 {
  max-width: 18ch;
  text-wrap: pretty;
}

.story-poster-copy > p {
  max-width: 66ch;
  color: #c7d5db;
}

/* Arabic must win over inherited global English rules, including portal content. */
.font-arabic,
.font-arabic a,
.font-arabic button,
.font-arabic input,
.font-arabic select,
.font-arabic textarea,
.mobile-menu[dir="rtl"],
.quote-dialog[dir="rtl"] {
  font-family: "IBM Plex Sans Arabic", "Manrope", Tahoma, sans-serif !important;
}

.font-arabic h1,
.font-arabic h2,
.font-arabic h3,
.font-arabic p,
.font-arabic li,
.font-arabic label,
.font-arabic span,
.font-arabic strong,
.font-arabic small {
  font-family: inherit;
}

/* Orange on paper and orange on navy are intentionally different contrast-safe tones. */
.font-arabic .kicker,
.font-arabic .section-heading .kicker,
.font-arabic .materials-section .kicker,
.font-arabic .blog-card > span {
  color: #b33d00 !important;
}

.font-arabic .story-index,
.font-arabic .story-text-link,
.font-arabic .kicker.light,
.font-arabic .final-cta .kicker,
.font-arabic .story-poster .story-index,
.font-arabic .story-poster .story-text-link {
  color: #ff9d75 !important;
}

.font-arabic .story-poster-copy h2 {
  line-height: 1.28;
  letter-spacing: 0 !important;
}

@media (max-width: 980px) {
  .story-poster {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .story-poster-media {
    aspect-ratio: 3 / 4;
  }

  .story-poster-copy {
    min-height: auto;
    padding: 48px var(--page-gutter) 56px !important;
  }

  .story-poster-copy h2 {
    max-width: 22ch;
  }
}

@media (max-width: 600px) {
  .story-poster-media {
    aspect-ratio: 3 / 4;
  }

  .story-poster-copy {
    padding: 38px 24px 48px !important;
  }

  .story-poster-copy h2 {
    font-size: clamp(32px, 10vw, 44px) !important;
    line-height: 1.2;
  }

  .font-arabic .story-poster-copy h2 {
    font-size: clamp(31px, 9.5vw, 43px) !important;
    line-height: 1.3;
  }
}

/* Final visual contract: keep the approved ADOBRTECH orange consistent across
   both languages. The darker paper-only override above is intentionally
   superseded here so legacy generated rules cannot recolour selected pages. */
:root {
  --brand-orange: #ff4800 !important;
  --orange-500: #ff4800 !important;
  --orange-600: #ff4800 !important;
}

:where(
    .kicker,
    .story-index,
    .story-text-link,
    .section-number,
    .story-intro-index,
    .presentation-label strong,
    .chapter-step-label,
    .chapter-tabs button span,
    .story-pillars-grid span,
    .lifecycle-line span,
    .project-records article > span
) {
  color: #ff4800 !important;
}

/* Match the specificity of the legacy light/dark variants as well. */
.kicker,
.kicker.light,
.final-cta .kicker,
.story-index,
.story-text-link,
.section-number,
.story-intro-index,
.presentation-label strong,
.chapter-step-label,
.chapter-tabs button span,
.story-pillars-grid span,
.lifecycle-line span,
  .project-records article > span,
.font-arabic .kicker,
.font-arabic .kicker.light,
.font-arabic .final-cta .kicker,
.font-arabic .story-index,
.font-arabic .story-text-link,
.font-arabic .section-number,
.font-arabic .story-poster .story-index,
.font-arabic .story-poster .story-text-link {
  color: #ff4800 !important;
}

/* Arabic shaping must remain enabled even when a component has its own font
   declaration. Keeping this at the end prevents generated page CSS from
   introducing spacing between joining letters. */
.font-arabic,
.font-arabic :where(*:not(svg):not(path)),
.mobile-menu[dir="rtl"],
.quote-dialog[dir="rtl"] {
  font-family: "IBM Plex Sans Arabic", Tahoma, sans-serif !important;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "ccmp" 1, "calt" 1, "liga" 1, "rlig" 1;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

.font-arabic :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    button,
    input,
    select,
    textarea,
    label,
    li,
    span,
    strong,
    small
  ) {
  font-family: inherit !important;
  letter-spacing: normal !important;
}

.font-arabic :where(h1, h2, h3, h4, h5, h6) {
  line-height: 1.28;
}

/* The capability scene used a 1920px presentation canvas. The fixed canvas
   was clipped on normal laptop screens and on phones. Let the same scene use
   the available width, then stack it below tablet width. Inline React styles
   are overridden so the static export is correct even before hydration. */
.video-stage-shell {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.chapter-stage {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: clamp(640px, 54vw, 860px) !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  transform: none !important;
}

.chapter-copy {
  min-width: 0 !important;
  min-height: 100% !important;
  padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 110px) !important;
}

.chapter-copy h3 {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(36px, 4.5vw, 78px) !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

.chapter-copy > div > p {
  max-width: 100%;
  font-size: clamp(17px, 1.7vw, 28px) !important;
  line-height: 1.8 !important;
}

.chapter-visual {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(28px, 4vw, 80px) !important;
}

.chapter-orbit {
  width: min(100%, 620px) !important;
  max-width: 100%;
}

.chapter-node {
  min-width: min(180px, 34%);
  max-width: 44%;
  padding: 14px 16px;
  font-size: clamp(14px, 1.5vw, 20px);
  line-height: 1.4;
}

@media (max-width: 980px) {
  .video-stage-shell {
    width: 100% !important;
  }

  .chapter-stage {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  .chapter-copy {
    min-height: 500px !important;
    padding: 56px 32px 64px !important;
  }

  .chapter-visual {
    min-height: 520px !important;
    padding: 40px 28px 60px !important;
  }

  .chapter-orbit {
    width: min(100%, 520px) !important;
  }
}

@media (max-width: 600px) {
  .chapter-copy {
    min-height: 460px !important;
    padding: 42px 24px 54px !important;
  }

  .chapter-copy h3 {
    font-size: clamp(34px, 9.5vw, 54px) !important;
  }

  .chapter-copy > div > p {
    font-size: 17px !important;
  }

  .chapter-visual {
    min-height: 400px !important;
    padding: 26px 14px 44px !important;
  }

  .chapter-orbit {
    width: min(100%, 320px) !important;
  }

  .chapter-node {
    min-width: 112px;
    max-width: 42%;
    padding: 10px 8px;
    font-size: 12px;
  }

  .chapter-node:nth-child(3) {
    right: 0 !important;
  }

  .chapter-node:nth-child(5) {
    left: 0 !important;
  }

  .chapter-core {
    padding: 12px;
    font-size: 20px;
  }
}

/* Reliable contact and application form feedback */
.form-submit-status {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 72, 0, 0.35);
  border-radius: 12px;
  background: rgba(255, 72, 0, 0.07);
  color: inherit;
}

.form-submit-status strong {
  display: block;
  color: #ff4800;
  font-weight: 700;
}

.form-submit-status p {
  margin: 6px 0 10px;
}

.form-submit-status.is-success {
  border-color: rgba(20, 130, 80, 0.35);
  background: rgba(20, 130, 80, 0.08);
}

.form-submit-status.is-success strong {
  color: #137a4a;
}

.form-submit-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #ff4800;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
}

.form-submit-link:hover,
.form-submit-link:focus-visible {
  background: #d93d00;
}