/*
 * responsive-mobile.css
 * Owner  : Mobile Agent (Claude Opus)
 * Scope  : All mobile overrides — max-width: 1023px and below
 *
 * Rules:
 *   - Only write inside @media (max-width: 1023px) blocks
 *   - Never modify styles.css or responsive-desktop.css
 *   - RTL (direction: rtl) is set globally — never override it
 *   - Cairo font is loaded globally — never re-import it
 *   - Touch targets minimum 48px height
 *   - Default layout: single-column stacking, full-width elements
 *   - Body text minimum 16px — readable without zooming
 */

/* ─── GLOBAL MOBILE LAYOUT ──────────────────────────────────────── */
@media (max-width: 1023px) {

  /* Hero Section */

  /* Navbar + Mobile Menu */
  /*
   * NAVBAR + MOBILE MENU
   * Force mobile menu text to pure white across all navbar states.
   * Existing legacy guards live in styles.css and are state/breakpoint-specific;
   * this mobile-owned layer locks visibility without touching desktop.
   */
  #main-navbar.navbar-premium #mobile-menu a,
  #main-navbar.navbar-premium #mobile-menu button,
  #main-navbar.navbar-premium #mobile-menu span,
  #main-navbar.navbar-premium.scrolled #mobile-menu a,
  #main-navbar.navbar-premium.scrolled #mobile-menu button,
  #main-navbar.navbar-premium.scrolled #mobile-menu span,
  #main-navbar.navbar-premium.hero-nav-transparent #mobile-menu a,
  #main-navbar.navbar-premium.hero-nav-transparent #mobile-menu button,
  #main-navbar.navbar-premium.hero-nav-transparent #mobile-menu span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  }

  #main-navbar.navbar-premium #mobile-menu,
  #main-navbar.navbar-premium.scrolled #mobile-menu,
  #main-navbar.navbar-premium.hero-nav-transparent #mobile-menu {
    position: relative !important;
    z-index: 20 !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, rgba(8, 21, 47, 0.985) 0%, rgba(4, 13, 31, 0.995) 100%) !important;
    opacity: 1 !important;
    isolation: isolate !important;
  }

  #main-navbar.navbar-premium #mobile-menu a,
  #main-navbar.navbar-premium #mobile-menu button {
    position: relative !important;
    z-index: 2 !important;
    font-weight: 700 !important;
  }

  #main-navbar.navbar-premium #mobile-menu svg,
  #main-navbar.navbar-premium #mobile-menu path,
  #main-navbar.navbar-premium.scrolled #mobile-menu svg,
  #main-navbar.navbar-premium.scrolled #mobile-menu path,
  #main-navbar.navbar-premium.hero-nav-transparent #mobile-menu svg,
  #main-navbar.navbar-premium.hero-nav-transparent #mobile-menu path {
    color: #e6d3a3 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
  }

  /*
   * HERO SECTION — phone legibility + app-feel
   * Fixes three issues:
   *   1. Headline disappearing on iOS due to background-clip:text over <video>
   *   2. Entrance animations occasionally leaving opacity:0 stuck
   *   3. Heavy top padding pushing the headline below the visible center
   */
  @media (max-width: 640px) {

    html,
    body {
      overflow-x: hidden;
      max-width: 100vw;
    }

    .rh-hero__content {
      padding-top: clamp(4.5rem, 11svh, 5.4rem);
      padding-bottom: clamp(1.5rem, 6svh, 2.4rem);
      gap: 0.85rem;
    }

    .rh-hero__headline,
    .rh-hero-headline {
      background: none !important;
      -webkit-text-fill-color: #F5E6C8 !important;
      color: #F5E6C8 !important;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
    }

    .rh-hero__headline-sub {
      color: #D4A853 !important;
      -webkit-text-fill-color: #D4A853 !important;
    }

    .rh-hero__subhead {
      color: rgba(245, 230, 200, 0.92);
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    }

    .rh-hero__eyebrow,
    .rh-hero__headline-line,
    .rh-hero__subhead,
    .rh-hero__ctas {
      opacity: 1 !important;
      transform: none !important;
    }

    /*
     * HERO CTAs — primary conversion pair (most important buttons on the site).
     * Boost padding, font-size, and spacing so they read as confident actions
     * rather than secondary chips. Touch target already met (3.5rem ≥ 48px).
     * Higher specificity than styles.css @640px (.rh-btn) — no !important needed.
     */
    .rh-hero__ctas {
      gap: 0.9rem;
      max-width: 22rem;
      margin-inline: auto;
    }

    .rh-hero__ctas .rh-btn {
      min-height: 3.5rem;
      padding: 1rem 1.4rem;
      font-size: 1.02rem;
      line-height: 1.3;
      letter-spacing: 0.01em;
      border-radius: 12px;
    }

    .rh-hero__ctas .rh-btn__icon {
      width: 19px;
      height: 19px;
    }

    /*
     * SPOTLIGHT (مشروعنا الأبرز) — phone refinements.
     * Override align-self:flex-start from index.html <style> block;
     * .rh-home-body ancestor lifts specificity to (0,2,0) > inline-style (0,1,0).
     * Adds vertical breathing room between copy and CTA for visual balance.
     */
    .rh-home-body .rh-projects-spotlight__body {
      gap: 1.1rem;
      padding: 1.45rem 1.15rem 1.65rem;
    }

    .rh-home-body .rh-projects-spotlight__facts {
      gap: 0.7rem;
    }

    .rh-home-body .rh-projects-spotlight__facts li {
      padding: 0.72rem 0.9rem;
    }

    .rh-home-body .rh-projects-spotlight__facts strong {
      font-size: 1rem;
    }

    .rh-home-body .rh-projects-spotlight__copy {
      font-size: 1rem;
      line-height: 1.85;
    }

    .rh-home-body .rh-projects-spotlight__cta {
      align-self: center;
      margin-top: 1.1rem;
      padding: 0.95rem 1.7rem;
      font-size: 1rem;
      border-radius: 12px;
    }

    /*
     * SPOTLIGHT BADGE — phone-only centering
     * Desktop anchors the badge to the inline-start corner (top-right in RTL).
     * On phones the figure is narrower and the off-corner placement reads as
     * unbalanced, so we center it horizontally over the image.
     * inset-inline:0 + margin-inline:auto centers regardless of direction.
     * Specificity (0,2,0) beats the inline <style> block's (0,1,0).
     */
    .rh-home-body .rh-projects-spotlight__badge {
      inset-inline-start: auto;
      inset-inline: 0;
      margin-inline: auto;
      width: max-content;
      max-width: calc(100% - 2rem);
      text-align: center;
    }

    /*
     * FILTERABLE GALLERY — center overlay text on phones
     * The hover overlay (image gradient layer) contains the project name and
     * "عرض التفاصيل". It uses Tailwind's flex-col justify-end, which only
     * controls the main (vertical) axis. We add align-items:center for the
     * cross (horizontal) axis, plus text-align:center on the children so the
     * text inside each block also reads centered. Belt-and-suspenders so the
     * fix holds regardless of which inherited rule wins.
     */
    .rh-home-body #projects-filterable .project-item2 .group>div.absolute {
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-end !important;
      align-items: center !important;
      text-align: center !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      padding: 1rem !important;
    }

    .rh-home-body #projects-filterable .project-item2 .group>div.absolute>h3,
    .rh-home-body #projects-filterable .project-item2 .group>div.absolute>p {
      width: auto !important;
      max-width: 100% !important;
      margin-inline: auto !important;
      text-align: center !important;
    }
  }

  @media (max-width: 640px) {

    /*
     * INDEX MOBILE CENTERING
     * Keep the home page horizontally centered on phones only.
     * RTL direction remains global; this only normalizes alignment.
     */
    .rh-home-body main,
    .rh-home-body main section,
    .rh-home-body main header,
    .rh-home-body main article,
    .rh-home-body main figure {
      text-align: center !important;
    }

    .rh-home-body main section>*,
    .rh-home-body .rh-section__inner,
    .rh-home-body .container,
    .rh-home-body [class$="__inner"],
    .rh-home-body [class$="__header"],
    .rh-home-body [class$="__intro"],
    .rh-home-body [class$="__content"],
    .rh-home-body [class$="__body"] {
      margin-inline: auto !important;
    }

    .rh-home-body .rh-about-editorial__inner,
    .rh-home-body .rh-about-editorial__content,
    .rh-home-body .rh-partners-v2__grid,
    .rh-home-body .rh-partners-v2__card,
    .rh-home-body .rh-partners-v2__cta,
    .rh-home-body .rh-services-board__inner,
    .rh-home-body .rh-services-board__intro,
    .rh-home-body .rh-services-board__grid,
    .rh-home-body .rh-services-board__card,
    .rh-home-body .rh-projects-top3__grid,
    .rh-home-body .rh-projects-top3__card,
    .rh-home-body #projects-grid2,
    .rh-home-body #projects-filterable .project-item2 {
      justify-items: center !important;
      align-items: center !important;
      text-align: center !important;
    }

    .rh-home-body .rh-about-editorial__inner,
    .rh-home-body .rh-about-editorial__content,
    .rh-home-body .rh-partners-v2__grid,
    .rh-home-body .rh-services-board__inner,
    .rh-home-body .rh-services-board__intro,
    .rh-home-body .rh-services-board__grid,
    .rh-home-body .rh-projects-top3__grid,
    .rh-home-body #projects-grid2 {
      width: 100% !important;
    }

    .rh-home-body .rh-partners-v2__card,
    .rh-home-body .rh-partners-v2__cta,
    .rh-home-body .rh-services-board__card,
    .rh-home-body .rh-projects-top3__card,
    .rh-home-body #projects-filterable .project-item2 {
      width: 100% !important;
    }

    .rh-home-body .rh-about-editorial__chips,
    .rh-home-body .rh-hero__ctas,
    .rh-home-body .rh-projects-top3__actions,
    .rh-home-body .rh-projects-gallery__filters,
    .rh-home-body .rh-services-board__links a,
    .rh-home-body .rh-partners-v2__button,
    .rh-home-body .rh-services-board__main-link,
    .rh-home-body .rh-projects-top3__button {
      justify-content: center !important;
      text-align: center !important;
    }

    .rh-home-body .rh-about-editorial__title,
    .rh-home-body .rh-about-editorial__lead,
    .rh-home-body .rh-about-editorial__body,
    .rh-home-body .rh-partners-v2__subtitle,
    .rh-home-body .rh-services-board__title,
    .rh-home-body .rh-services-board__subtitle,
    .rh-home-body .rh-projects-top3__subtitle,
    .rh-home-body .rh-projects-gallery .text-center>p {
      margin-inline: auto !important;
      text-align: center !important;
    }

    .rh-home-body .rh-partners-v2__tag,
    .rh-home-body .rh-partners-v2__logos,
    .rh-home-body .rh-services-board__number,
    .rh-home-body .rh-projects-gallery .project-item2 span,
    .rh-home-body .rh-projects-gallery .project-item2 img {
      align-self: center !important;
      justify-self: center !important;
      margin-inline: auto !important;
    }

    .rh-home-body .rh-services-board__links {
      width: 100%;
      justify-items: center !important;
    }

    .rh-home-body .rh-services-board__links a {
      width: 100%;
      max-width: 18rem;
    }

    .rh-home-body .rh-services-board__links a::after {
      display: none !important;
    }

    /*
     * SERVICES SECTION (#services-expandable) — readability for 40+ audience.
     * Hierarchy fix:  number was visually dominating h3 on phones.
     * Type floor:     body/links ≥ 16px, h3 ~20px, section title 24px.
     * Touch targets:  service links 48px min, main CTA 56px min.
     * Logical props:  padding-inline / margin-inline used throughout.
     * Specificity:    matches surrounding (0,2,0) pattern; no !important needed
     *                 because responsive-mobile.css loads after styles.css and
     *                 new properties don't collide with the centering layer.
     */
    .rh-home-body .rh-services-board__intro {
      gap: 0;
    }

    .rh-home-body .rh-services-board__title {
      margin-top: 1rem;
      font-size: clamp(1.5rem, 6vw, 1.75rem);
      line-height: 1.25;
      letter-spacing: -0.01em;
    }

    .rh-home-body .rh-services-board__subtitle {
      margin-top: 1.4rem;
      font-size: 1.06rem;
      line-height: 1.85;
      color: rgba(247, 241, 223, 0.78);
    }

    .rh-home-body .rh-services-board__main-link {
      margin-top: 1.75rem;
      min-height: 3.5rem;
      padding-block: 1rem;
      padding-inline: 1.6rem;
      font-size: 1.08rem;
      border-radius: 14px;
    }

    .rh-home-body .rh-services-board__main-link svg {
      width: 1.15rem;
      height: 1.15rem;
    }

    .rh-home-body .rh-services-board__grid {
      gap: 1rem;
    }

    .rh-home-body .rh-services-board__card {
      padding-block: 1.5rem 1.7rem;
      padding-inline: 1.3rem;
      border-radius: 1.4rem;
    }

    .rh-home-body .rh-services-board__number {
      font-size: 2.25rem;
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .rh-home-body .rh-services-board__card h3 {
      margin-top: 0.8rem;
      font-size: 1.3rem;
      line-height: 1.32;
    }

    .rh-home-body .rh-services-board__links {
      gap: 0.7rem;
      margin-top: 1.3rem;
    }

    .rh-home-body .rh-services-board__links a {
      min-height: 3rem;
      padding-block: 0.95rem;
      padding-inline: 1.1rem;
      font-size: 1rem;
      line-height: 1.4;
      color: #fff7df;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(230, 211, 163, 0.22);
      border-bottom-color: rgba(230, 211, 163, 0.22);
      border-radius: 12px;
    }

    .rh-home-body .rh-projects-gallery .project-item2 .p-4 {
      display: grid;
      justify-items: center;
      text-align: center !important;
    }

    /*
     * ABOUT MOBILE CENTERING
     * Match the home page phone rhythm while keeping desktop/tablet intact.
     */
    .rh-about-page main,
    .rh-about-page main section,
    .rh-about-page main header,
    .rh-about-page main article,
    .rh-about-page main figure,
    .rh-about-page .rh-about-section-head {
      text-align: center !important;
    }

    .rh-about-page main section>*,
    .rh-about-page [class$="__inner"],
    .rh-about-page [class$="__copy"],
    .rh-about-page [class$="__content"],
    .rh-about-page [class$="__body"],
    .rh-about-page [class$="__media"] {
      margin-inline: auto !important;
    }

    .rh-about-page .rh-about-hero__inner,
    .rh-about-page .rh-about-hero__copy,
    .rh-about-page .rh-about-origin__inner,
    .rh-about-page .rh-about-origin__copy,
    .rh-about-page .rh-about-founder__inner,
    .rh-about-page .rh-about-founder__media,
    .rh-about-page .rh-about-founder__content,
    .rh-about-authority,
    .rh-about-authority article,
    .rh-about-page .rh-about-timeline__rail,
    .rh-about-page .rh-about-timeline__rail article,
    .rh-about-page .rh-about-expertise__inner,
    .rh-about-page .rh-about-expertise__matrix,
    .rh-about-page .rh-about-expertise__matrix span,
    .rh-about-page .rh-about-credentials__inner,
    .rh-about-page .rh-about-credentials__body,
    .rh-about-page .rh-about-credentials__metrics,
    .rh-about-page .rh-about-credentials__list,
    .rh-about-page .rh-about-credentials__list article,
    .rh-about-page .rh-about-tools,
    .rh-about-page .rh-about-principles__inner,
    .rh-about-page .rh-about-principles__grid,
    .rh-about-page .rh-about-principles__grid article,
    .rh-about-page .rh-about-cta__inner {
      justify-items: center !important;
      align-items: center !important;
      text-align: center !important;
    }

    .rh-about-page .rh-about-hero__inner,
    .rh-about-page .rh-about-origin__inner,
    .rh-about-page .rh-about-founder__inner,
    .rh-about-page .rh-about-expertise__inner,
    .rh-about-page .rh-about-credentials__inner,
    .rh-about-page .rh-about-principles__inner,
    .rh-about-page .rh-about-authority,
    .rh-about-page .rh-about-timeline__rail,
    .rh-about-page .rh-about-expertise__matrix,
    .rh-about-page .rh-about-credentials__body,
    .rh-about-page .rh-about-credentials__list,
    .rh-about-page .rh-about-principles__grid {
      width: 100% !important;
    }

    .rh-about-page .rh-about-hero__copy h1,
    .rh-about-page .rh-about-hero__copy p:not(.rh-about-kicker),
    .rh-about-page .rh-about-section-head h2,
    .rh-about-page .rh-about-origin__copy p,
    .rh-about-page .rh-about-founder__lead,
    .rh-about-page .rh-about-cta p {
      margin-inline: auto !important;
      text-align: center !important;
    }

    .rh-about-page .rh-about-hero__actions,
    .rh-about-page .rh-about-cta__inner,
    .rh-about-page .rh-about-tools,
    .rh-about-page .rh-about-credentials__metrics {
      justify-content: center !important;
    }

    .rh-about-page .rh-about-link {
      width: min(100%, 20rem) !important;
      margin-inline: auto !important;
    }

    .rh-about-page .rh-about-hero__portrait,
    .rh-about-page .rh-about-founder__image-frame,
    .rh-about-page .rh-about-credentials__metrics div,
    .rh-about-page .rh-about-tools span {
      align-self: center !important;
      justify-self: center !important;
      margin-inline: auto !important;
    }

    .rh-about-page .rh-about-founder__media-heading h2::after {
      margin-inline: auto !important;
    }

    .rh-about-page .rh-about-timeline__rail::before,
    .rh-about-page .rh-about-timeline__rail article::before {
      display: none !important;
    }

    /*
     * REMAINING PAGES MOBILE CENTERING
     * Services, contact, partners, partner detail, project detail (flagship + generic v2).
     */
    :is(.rh-services-v4-body, .rh-contact-v2-body, .rh-partners-v3-body, .rh-partner-detail-page, .rh-project-detail-body, .rh-pd2-body) main,
    :is(.rh-services-v4-body, .rh-contact-v2-body, .rh-partners-v3-body, .rh-partner-detail-page, .rh-project-detail-body, .rh-pd2-body) main section,
    :is(.rh-services-v4-body, .rh-contact-v2-body, .rh-partners-v3-body, .rh-partner-detail-page, .rh-project-detail-body, .rh-pd2-body) main header,
    :is(.rh-services-v4-body, .rh-contact-v2-body, .rh-partners-v3-body, .rh-partner-detail-page, .rh-project-detail-body, .rh-pd2-body) main article,
    :is(.rh-services-v4-body, .rh-contact-v2-body, .rh-partners-v3-body, .rh-partner-detail-page, .rh-project-detail-body, .rh-pd2-body) main figure {
      text-align: center !important;
    }

    /* Force all heading underlines to center since text is centered on mobile */
    main h2::after {
      margin-inline: auto !important;
    }

    :is(.rh-services-v4-body, .rh-contact-v2-body, .rh-partners-v3-body, .rh-partner-detail-page, .rh-project-detail-body, .rh-pd2-body) main section>*,
    :is(.rh-services-v4-body, .rh-contact-v2-body, .rh-partners-v3-body, .rh-partner-detail-page, .rh-project-detail-body, .rh-pd2-body) main [class$="__inner"],
    :is(.rh-services-v4-body, .rh-contact-v2-body, .rh-partners-v3-body, .rh-partner-detail-page, .rh-project-detail-body, .rh-pd2-body) main [class$="__grid"],
    :is(.rh-services-v4-body, .rh-contact-v2-body, .rh-partners-v3-body, .rh-partner-detail-page, .rh-project-detail-body, .rh-pd2-body) main [class$="__head"],
    :is(.rh-services-v4-body, .rh-contact-v2-body, .rh-partners-v3-body, .rh-partner-detail-page, .rh-project-detail-body, .rh-pd2-body) main [class$="__copy"],
    :is(.rh-services-v4-body, .rh-contact-v2-body, .rh-partners-v3-body, .rh-partner-detail-page, .rh-project-detail-body, .rh-pd2-body) main [class$="__content"],
    :is(.rh-services-v4-body, .rh-contact-v2-body, .rh-partners-v3-body, .rh-partner-detail-page, .rh-project-detail-body, .rh-pd2-body) main [class$="__body"],
    :is(.rh-services-v4-body, .rh-contact-v2-body, .rh-partners-v3-body, .rh-partner-detail-page, .rh-project-detail-body, .rh-pd2-body) main [class$="__media"] {
      margin-inline: auto !important;
    }

    .rh-services-v4-body .rh-services-v4-hero__inner,
    .rh-services-v4-body .rh-services-v4-hero__copy,
    .rh-services-v4-body .rh-services-v4-hero__actions,
    .rh-services-v4-body .rh-services-v4-hero__service-strip,
    .rh-services-v4-body .rh-services-v4-service-wave,
    .rh-services-v4-body .rh-services-v4-catalog__inner,
    .rh-services-v4-body .rh-services-v4-catalog__head,
    .rh-services-v4-body .rh-services-v4-stage-router,
    .rh-services-v4-body .rh-services-v4-stage-card,
    .rh-services-v4-body .rh-services-v4-stage-card__head,
    .rh-services-v4-body .rh-services-v4-stage-panels,
    .rh-services-v4-body .rh-services-v4-stage-panel,
    .rh-services-v4-body .rh-services-v4-stage-panel__copy,
    .rh-services-v4-body .rh-services-v4-stage-card__links,
    .rh-services-v4-body .rh-services-v4-stage-fallback,
    .rh-services-v4-body .rh-services-v4-process__inner,
    .rh-services-v4-body .rh-services-v4-process__copy,
    .rh-services-v4-body .rh-services-v4-process__steps,
    .rh-services-v4-body .rh-services-v4-process__steps article {
      justify-items: center !important;
      align-items: center !important;
      text-align: center !important;
    }

    .rh-services-v4-body .rh-services-v4-hero__inner,
    .rh-services-v4-body .rh-services-v4-catalog__inner,
    .rh-services-v4-body .rh-services-v4-stage-router,
    .rh-services-v4-body .rh-services-v4-stage-card,
    .rh-services-v4-body .rh-services-v4-stage-panels,
    .rh-services-v4-body .rh-services-v4-stage-card__links,
    .rh-services-v4-body .rh-services-v4-process__inner,
    .rh-services-v4-body .rh-services-v4-process__steps {
      width: 100% !important;
    }

    .rh-services-v4-body .rh-services-v4-hero__copy h1,
    .rh-services-v4-body .rh-services-v4-hero__copy p:not(.rh-services-v4__kicker),
    .rh-services-v4-body .rh-services-v4-catalog__head h2,
    .rh-services-v4-body .rh-services-v4-catalog__head p:not(.rh-services-v4__kicker),
    .rh-services-v4-body .rh-services-v4-process__copy h2,
    .rh-services-v4-body .rh-services-v4-process__copy p:not(.rh-services-v4__kicker) {
      margin-inline: auto !important;
      text-align: center !important;
    }

    .rh-services-v4-body .rh-services-v4-stage-card__number,
    .rh-services-v4-body .rh-services-v4-process__steps span {
      margin-inline: auto !important;
    }

    .rh-services-v4-body .rh-services-v4-stage-card__links a::after {
      display: none !important;
    }

    .rh-contact-v2-body .rh-contact-desk__grid,
    .rh-contact-v2-body .rh-contact-desk__copy,
    .rh-contact-v2-body .rh-contact-channel-grid,
    .rh-contact-v2-body .rh-contact-channel,
    .rh-contact-v2-body .rh-contact-offices__inner,
    .rh-contact-v2-body .rh-contact-offices__head,
    .rh-contact-v2-body .rh-contact-office-grid,
    .rh-contact-v2-body .rh-contact-office-card,
    .rh-contact-v2-body .rh-contact-office-card__meta {
      justify-items: center !important;
      align-items: center !important;
      text-align: center !important;
    }

    .rh-contact-v2-body .rh-contact-desk__grid,
    .rh-contact-v2-body .rh-contact-channel-grid,
    .rh-contact-v2-body .rh-contact-channel,
    .rh-contact-v2-body .rh-contact-offices__inner,
    .rh-contact-v2-body .rh-contact-office-grid,
    .rh-contact-v2-body .rh-contact-office-card {
      width: 100% !important;
    }

    .rh-contact-v2-body .rh-contact-desk__copy h1,
    .rh-contact-v2-body .rh-contact-desk__copy>p:not(.rh-contact-v2__kicker),
    .rh-contact-v2-body .rh-contact-offices__head h2,
    .rh-contact-v2-body .rh-contact-offices__head p:not(.rh-contact-v2__kicker) {
      margin-inline: auto !important;
      text-align: center !important;
    }

    .rh-contact-v2-body .rh-contact-map-toggle span {
      margin-inline: auto !important;
    }

    .rh-partners-v3-body .rh-partners-v3-centered,
    .rh-partners-v3-body .rh-partners-v3-centered__content,
    .rh-partners-v3-body .rh-partners-v3-proof,
    .rh-partners-v3-body .rh-partners-v3-register__inner,
    .rh-partners-v3-body .rh-partners-v3-register__head,
    .rh-partners-v3-body .rh-partners-v3-ledger,
    .rh-partners-v3-body .rh-partners-v3-row,
    .rh-partners-v3-body .rh-partners-v3-row__title,
    .rh-partners-v3-body .rh-partners-v3-row__logos,
    .rh-partners-v3-body .rh-partners-v3-row figure,
    .rh-partners-v3-body .rh-partners-showcase__inner,
    .rh-partners-v3-body .rh-partners-showcase__header,
    .rh-partners-v3-body .rh-partners-showcase__grid,
    .rh-partners-v3-body .rh-photo-stack-card,
    .rh-partners-v3-body .rh-photo-stack-card__text,
    .rh-partners-v3-body .rh-photo-stack-card__images {
      justify-items: center !important;
      align-items: center !important;
      text-align: center !important;
    }

    .rh-partners-v3-body .rh-partners-v3-register__inner,
    .rh-partners-v3-body .rh-partners-v3-ledger,
    .rh-partners-v3-body .rh-partners-v3-row,
    .rh-partners-v3-body .rh-partners-v3-row__logos,
    .rh-partners-v3-body .rh-partners-v3-row figure,
    .rh-partners-v3-body .rh-partners-showcase__grid,
    .rh-partners-v3-body .rh-photo-stack-card {
      width: 100% !important;
    }

    .rh-partners-v3-body .rh-partners-v3-centered__content h1,
    .rh-partners-v3-body .rh-partners-v3-centered__content>p:not(.rh-partners-v3__kicker),
    .rh-partners-v3-body .rh-partners-v3-register__head h2,
    .rh-partners-v3-body .rh-partners-v3-register__head p:not(.rh-partners-v3__kicker),
    .rh-partners-v3-body .rh-partners-showcase__header h2,
    .rh-partners-v3-body .rh-partners-showcase__header p:not(.rh-partners-v3__kicker) {
      margin-inline: auto !important;
      text-align: center !important;
    }

    .rh-partners-v3-body .rh-partners-v3-row__title span,
    .rh-partners-v3-body .rh-partners-v3-row img,
    .rh-partners-v3-body .rh-photo-stack-card__images {
      margin-inline: auto !important;
    }

    .rh-partner-detail-page .rh-partner-detail__hero,
    .rh-partner-detail-page .rh-partner-detail__section,
    .rh-partner-detail-page .rh-partner-detail__section-head,
    .rh-partner-detail-page .rh-partner-detail__logos,
    .rh-partner-detail-page .rh-partner-detail__logo-card,
    .rh-partner-detail-page .rh-partner-detail__gallery,
    .rh-partner-detail-page .rh-partner-detail__gallery-item {
      justify-items: center !important;
      align-items: center !important;
      text-align: center !important;
    }

    .rh-partner-detail-page .rh-partner-detail__section,
    .rh-partner-detail-page .rh-partner-detail__logos,
    .rh-partner-detail-page .rh-partner-detail__logo-card,
    .rh-partner-detail-page .rh-partner-detail__gallery,
    .rh-partner-detail-page .rh-partner-detail__gallery-item {
      width: 100% !important;
    }

    .rh-partner-detail-page .rh-partner-detail__hero,
    .rh-partner-detail-page .rh-partner-detail__section {
      width: min(100% - 1.8rem, 1180px) !important;
    }

    .rh-partner-detail-page .rh-partner-detail__back,
    .rh-partner-detail-page .rh-partner-detail__logo-card img,
    .rh-partner-detail-page .rh-partner-detail__text-logo {
      margin-inline: auto !important;
    }

    .rh-project-detail-body .rh-project-detail-hero__inner,
    .rh-project-detail-body .rh-project-detail-hero__copy,
    .rh-project-detail-body .rh-project-detail-hero__actions,
    .rh-project-detail-body .rh-project-detail-hero__media,
    .rh-project-detail-body .rh-project-detail-hero__facts,
    .rh-project-detail-body .rh-project-detail-hero__facts article,
    .rh-project-detail-body .rh-project-detail-overview__inner,
    .rh-project-detail-body .rh-project-detail-overview__head,
    .rh-project-detail-body .rh-project-detail-overview__grid,
    .rh-project-detail-body .rh-project-detail-overview__copy,
    .rh-project-detail-body .rh-project-detail-overview__brief,
    .rh-project-detail-body .rh-project-detail-overview__brief div,
    .rh-project-detail-body .rh-project-detail-execution__inner,
    .rh-project-detail-body .rh-project-detail-execution__head,
    .rh-project-detail-body .rh-project-detail-execution__steps,
    .rh-project-detail-body .rh-project-detail-execution__steps article,
    .rh-project-detail-body .rh-project-detail-result__inner,
    .rh-project-detail-body .rh-project-detail-result__copy,
    .rh-project-detail-body .rh-project-detail-result__panel {
      justify-items: center !important;
      align-items: center !important;
      text-align: center !important;
    }

    .rh-project-detail-body .rh-photo-stack-card {
      width: 100% !important;
    }

    .rh-project-detail-body .rh-project-detail-hero__inner,
    .rh-project-detail-body .rh-project-detail-hero__facts,
    .rh-project-detail-body .rh-project-detail-overview__inner,
    .rh-project-detail-body .rh-project-detail-overview__grid,
    .rh-project-detail-body .rh-project-detail-overview__brief,
    .rh-project-detail-body .rh-project-detail-execution__inner,
    .rh-project-detail-body .rh-project-detail-execution__steps,
    .rh-project-detail-body .rh-project-detail-result__inner {
      width: 100% !important;
    }

    .rh-project-detail-body .rh-project-detail-hero__copy h1,
    .rh-project-detail-body .rh-project-detail-hero__copy p:not(.rh-project-detail__kicker),
    .rh-project-detail-body .rh-project-detail-overview__head h2,
    .rh-project-detail-body .rh-project-detail-overview__copy p,
    .rh-project-detail-body .rh-project-detail-execution__head h2,
    .rh-project-detail-body .rh-project-detail-execution__head p:not(.rh-project-detail__kicker),
    .rh-project-detail-body .rh-project-detail-result__copy h2,
    .rh-project-detail-body .rh-project-detail-result__copy p:not(.rh-project-detail__kicker) {
      margin-inline: auto !important;
      text-align: center !important;
    }

    .rh-project-detail-body .rh-project-detail-hero__actions,
    .rh-project-detail-body .rh-project-detail-result__panel {
      justify-content: center !important;
    }

    .rh-project-detail-body .rh-project-detail-btn,
    .rh-project-detail-body .rh-project-detail-hero__media img {
      margin-inline: auto !important;
    }
  }

  /* Services Section */

  /* Projects Section */

  /* Partners Section */

  /* ═══ PARTNERS v3 (partners.html) ═══════════════════════════════════
     Mobile refinements for the partners hub page.
     Body class: .rh-partners-v3-body
     Ancestor selector gives (0,2,0) specificity, beating the (0,1,0)
     rules in styles.css at the ≤760px breakpoint.
     ═══════════════════════════════════════════════════════════════════ */

  @media (max-width: 640px) {

    /* ── Hero desk panel ──────────────────────────────────────── */

    .rh-partners-v3-body .rh-partners-v3-centered__content {
      padding: 1.5rem 1.15rem;
    }

    .rh-partners-v3-body .rh-partners-v3-centered__content h1 {
      font-size: clamp(1.75rem, 7vw, 2.25rem);
      line-height: 1.22;
    }

    .rh-partners-v3-body .rh-partners-v3-centered__content>p:not(.rh-partners-v3__kicker) {
      font-size: 1.0625rem;
      line-height: 1.85;
    }

    .rh-partners-v3-body .rh-partners-v3__kicker {
      font-size: 0.9375rem;
    }

    /* ── Proof stats — 3-col to 1-col, bigger type ─────────── */

    .rh-partners-v3-body .rh-partners-v3-proof {
      gap: 0.5rem;
    }

    .rh-partners-v3-body .rh-partners-v3-proof span {
      min-height: 3.5rem;
      padding: 0.55rem 0.75rem;
      font-size: 1rem;
    }

    .rh-partners-v3-body .rh-partners-v3-proof strong {
      font-size: 1.5rem;
    }

    /* ── Scroll CTA ────────────────────────────────────────── */

    .rh-partners-v3-body .rh-partners-v3-scroll {
      min-height: 3rem;
      padding: 0.85rem 1.65rem;
      font-size: 1.05rem;
      border-radius: 14px;
    }

    /* ── Register section ──────────────────────────────────── */

    .rh-partners-v3-body .rh-partners-v3-register__head h2 {
      font-size: clamp(1.5rem, 6vw, 2rem);
      line-height: 1.25;
    }

    .rh-partners-v3-body .rh-partners-v3-register__head p:not(.rh-partners-v3__kicker) {
      font-size: 1.0625rem;
      line-height: 1.85;
    }

    /* Row: 2-col grid to single-col stack on phones */
    .rh-partners-v3-body .rh-partners-v3-row {
      grid-template-columns: 1fr;
    }

    .rh-partners-v3-body .rh-partners-v3-row__title {
      min-height: auto;
      padding: 1rem;
      text-align: center;
      align-items: center;
    }

    .rh-partners-v3-body .rh-partners-v3-row__title span {
      font-size: 1.25rem;
    }

    .rh-partners-v3-body .rh-partners-v3-row__title h3 {
      font-size: clamp(1.25rem, 5vw, 1.5rem);
      text-align: center;
    }

    .rh-partners-v3-body .rh-partners-v3-row__logos,
    .rh-partners-v3-body .rh-partners-v3-row__logos--three,
    .rh-partners-v3-body .rh-partners-v3-row__logos--two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Center the last item if it is the only one in its row (odd count in 2-column grid) */
    .rh-partners-v3-body .rh-partners-v3-row__logos figure:nth-child(odd):last-child,
    .rh-partners-v3-body .rh-partners-v3-row__logos--three figure:nth-child(odd):last-child,
    .rh-partners-v3-body .rh-partners-v3-row__logos--two figure:nth-child(odd):last-child {
      grid-column: span 2;
      justify-self: center;
      width: calc(50% - 0.35rem);
    }

    .rh-partners-v3-body .rh-partners-v3-row figure {
      min-height: 8rem;
      padding: 0.85rem;
    }

    .rh-partners-v3-body .rh-partners-v3-row figure img {
      max-height: 3.5rem;
    }

    .rh-partners-v3-body .rh-partners-v3-row figcaption {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.45;
    }

    /* ── Showcase section ──────────────────────────────────── */

    .rh-partners-v3-body .rh-partners-showcase__header h2 {
      font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .rh-partners-v3-body .rh-partners-showcase__header p:not(.rh-partners-v3__kicker) {
      font-size: 1.0625rem;
      line-height: 1.85;
    }

    /* Photo stack cards — layout fix + typography bump for 40+ */
    .rh-partners-v3-body .rh-photo-stack-card {
      min-height: 24rem;
      padding-block-end: 0.75rem;
    }

    .rh-partners-v3-body .rh-photo-stack-card__text {
      position: relative;
      z-index: 2;
      margin-block-end: 0.5rem;
    }

    .rh-partners-v3-body .rh-photo-stack-card__images {
      bottom: 2.25rem;
      width: 13rem;
      height: 13rem;
    }

    .rh-partners-v3-body .rh-photo-stack-card__img {
      width: 9rem;
      height: 10.5rem;
    }

    .rh-partners-v3-body .rh-photo-stack-card__category {
      font-size: 0.9375rem;
    }

    .rh-partners-v3-body .rh-photo-stack-card__title {
      font-size: clamp(1.25rem, 5vw, 1.625rem);
    }

    .rh-partners-v3-body .rh-photo-stack-card__subtitle {
      font-size: 1.0625rem;
    }
  }

  /* Contact Section */

  /* Footer — titles + social centered; list items stay start-aligned */
  .rh-footer .rh-footer__column h3 {
    text-align: center;
    width: 100%;
  }

  .rh-footer .rh-footer__column h3::after {
    margin-inline: auto;
  }

  .rh-footer .rh-footer__social {
    justify-content: center;
    width: 100%;
  }

  /* Premium Forms - Custom Styled Dropdowns for Services Forms */
  select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1e45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: left 0.75rem center !important; /* Left side for RTL */
    background-size: 1.15rem !important;
    padding-left: 2.25rem !important;
    padding-right: 0.75rem !important;
    border: 1px solid rgba(11, 30, 69, 0.18) !important;
    border-radius: 8px !important;
    height: 2.85rem !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    outline: none !important;
  }

  select:focus {
    border-color: #c9a84c !important;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18) !important;
    outline: none !important;
  }

  @media (max-width: 640px) {
    .rh-footer .rh-footer__column {
      align-items: flex-start !important;
      text-align: right !important;
      padding-inline: 1.5rem !important; /* Balanced breathing room from card borders */
    }

    .rh-footer .rh-footer__column ul {
      margin-inline: 0 !important;
      width: 100% !important;
      justify-items: start !important;
    }

    .rh-footer .rh-footer__column li {
      justify-content: flex-start !important;
      text-align: right !important;
      width: 100% !important;
    }

    .rh-copyright-break {
      display: inline !important;
    }
  }

  /* ═══ PROJECT DETAILS v2 (rh-pd2) ═══════════════════════════════════
     Mobile refinements for project-details.html (generic, slug-driven).
     Body class: .rh-pd2-body — NOT .rh-project-detail-body (flagships).
     Ancestor selector .rh-pd2-body gives (0,2,0) specificity, beating
     the inline <style> block's (0,1,0) without !important.
     ═══════════════════════════════════════════════════════════════════ */

  /* ── Tablet + phone shared (≤1023px) ── */

  .rh-pd2-body .rh-pd2-hero {
    padding-block: 1.5rem 2.5rem;
  }

  .rh-pd2-body .rh-pd2-hero__lead {
    max-width: none;
  }

  .rh-pd2-body .rh-project-stats-bar__item {
    justify-content: center;
    padding: 0.75rem 1rem;
  }

  .rh-pd2-body .rh-project-stats-bar__text {
    align-items: center;
    text-align: center;
  }

  .rh-pd2-body .rh-pd2-btn,
  .rh-pd2-body .rh-pd2-cta__primary,
  .rh-pd2-body .rh-pd2-cta__secondary,
  .rh-pd2-body .rh-pd2-fallback a {
    min-height: 3rem;
  }

  @media (max-width: 640px) {

    /* ── Centering: rh-pd2 element-specific overrides ─────────────
       text-align: center from the global `:is()` block handles most
       text. These handle elements that need explicit margin-inline
       or justify-content because they use fit-content / inline-flex
       / flex layouts that don't respond to text-align alone. ────── */

    .rh-pd2-body .rh-pd2-hero__copy {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .rh-pd2-body .rh-pd2-hero__kicker {
      margin-inline: auto;
    }

    .rh-pd2-body .rh-pd2__eyebrow {
      justify-content: center;
    }

    .rh-pd2-body .rh-pd2-hero__lead {
      text-align: center;
    }

    .rh-pd2-body .rh-pd2-narrative__body {
      text-align: center;
      text-align-last: center;
    }

    .rh-pd2-body .rh-pd2-hero__actions {
      align-items: center;
    }

    /* ── Typography: 40+ demographic floor ─────────────────────── */

    .rh-pd2-body .rh-pd2__eyebrow {
      font-size: 0.875rem;
      letter-spacing: 0.12em;
    }

    .rh-pd2-body .rh-pd2-hero__kicker {
      font-size: 0.9375rem;
    }

    .rh-pd2-body .rh-pd2-hero__title {
      font-size: clamp(1.5rem, 7vw, 2.25rem);
      line-height: 1.2;
      margin-bottom: 1rem;
    }

    .rh-pd2-body .rh-pd2-hero__lead {
      font-size: 1.0625rem;
      line-height: 1.9;
      margin-bottom: 1.5rem;
    }

    /* ── Stats bar: single-col centered ────────────────────────── */

    .rh-pd2-body .rh-project-stats-bar {
      padding-block: 1.5rem;
    }

    .rh-pd2-body .rh-project-stats-bar__grid {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .rh-pd2-body .rh-project-stats-bar__item {
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      padding: 0.9rem 1rem;
      border-bottom: 1px solid var(--rh-pd2-line, rgba(11, 30, 69, 0.12));
    }

    .rh-pd2-body .rh-project-stats-bar__item:last-child {
      border-bottom: none;
    }

    .rh-pd2-body .rh-project-stats-bar__label {
      font-size: 0.875rem;
    }

    .rh-pd2-body .rh-project-stats-bar__value {
      font-size: 1.0625rem;
    }

    .rh-pd2-body .rh-project-stats-bar__icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
    }

    .rh-pd2-body .rh-project-stats-bar__icon svg {
      width: 22px;
      height: 22px;
    }

    /* ── Facts strip type bump ─────────────────────────────────── */

    .rh-pd2-body .rh-pd2-fact__label {
      font-size: 0.875rem;
    }

    /* ── Narrative ─────────────────────────────────────────────── */

    .rh-pd2-body .rh-pd2-narrative {
      padding-block: 2.5rem 2rem;
    }

    .rh-pd2-body .rh-pd2-narrative__heading {
      font-size: clamp(1.375rem, 5.5vw, 1.75rem);
      margin-block: 1rem 1.25rem;
    }

    /* ── Photo strip ───────────────────────────────────────────── */

    .rh-pd2-body .rh-photo-strip__title {
      font-size: clamp(1.25rem, 5vw, 1.625rem);
      margin-bottom: 1.75rem;
    }

    .rh-pd2-body .rh-photo-strip__card-label {
      font-size: 0.875rem;
      padding: 5px 12px;
    }

    /* ── Hero actions: full-width CTA stack ─────────────────── */

    .rh-pd2-body .rh-pd2-hero__actions {
      flex-direction: column;
      width: 100%;
    }

    .rh-pd2-body .rh-pd2-btn {
      width: 100%;
      justify-content: center;
      min-height: 3.25rem;
      font-size: 1.05rem;
      border-radius: 14px;
    }

    .rh-pd2-body .rh-pd2-btn--ghost {
      min-height: 3rem;
    }

    /* ── Bottom CTA ────────────────────────────────────────────── */

    .rh-pd2-body .rh-pd2-cta {
      padding-block: 3rem;
    }

    .rh-pd2-body .rh-pd2-cta__title {
      font-size: clamp(1.375rem, 5.5vw, 1.75rem);
    }

    .rh-pd2-body .rh-pd2-cta__sub {
      font-size: 1rem;
      line-height: 1.85;
      margin-bottom: 1.5rem;
    }

    .rh-pd2-body .rh-pd2-cta__primary {
      min-height: 3.25rem;
      padding: 1rem 2rem;
      font-size: 1.05rem;
      border-radius: 14px;
    }

    .rh-pd2-body .rh-pd2-cta__secondary {
      min-height: 3rem;
      font-size: 1rem;
    }

    .rh-pd2-body .rh-pd2-fallback a {
      min-height: 3rem;
      padding: 1rem 1.75rem;
    }

    /* ── Video player ──────────────────────────────────────────── */

    .rh-pd2-body .rh-project-video__title {
      font-size: clamp(1.25rem, 5vw, 1.625rem);
      margin-bottom: 1.75rem;
    }

    /* ── Hero media ────────────────────────────────────────────── */

    .rh-pd2-body .rh-pd2-hero__media-wrap {
      border-radius: 16px;
    }

    .rh-pd2-body .rh-pd2-hero__media-pending span {
      font-size: 1rem;
    }
  }

}