/*
  Responsive refinement layer.
  Mobile remains intentionally untouched for the next review phase.
*/

/* Large desktop: keep the documented 1442px Figma frame centered instead of stretching forever. */
@media (min-width: 1443px) {
  .hero-section,
  .about-section,
  .partners-section,
  .services-section,
  .case-studies-section,
  .team-section,
  .site-footer {
    width: 1442px;
    margin-left: auto;
    margin-right: auto;
  }

  .site-footer {
    --footer-frame-x: 0px;
  }

  .partners-stage {
    width: 1442px;
  }

  .team-section__scroller {
    max-width: 1299px;
  }
}

/* Laptop/tablet landscape range. Keeps proportions close without forcing horizontal scroll. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .about-section,
  .services-section,
  .case-studies-section,
  .team-section {
    overflow: hidden;
  }

  .about-section {
    grid-template-columns: minmax(360px, 35vw) minmax(520px, 50vw);
    column-gap: clamp(48px, 7vw, 120px);
    padding-left: clamp(56px, 6vw, 95px);
  }

  .about-section__content {
    width: min(454px, 35vw);
  }

  .about-section h2,
  .about-section p {
    width: min(454px, 35vw);
  }

  .about-section__media {
    width: min(720px, 50vw);
  }

  .partners-stage {
    transform-origin: top left;
    transform: scale(calc(100vw / 1442));
  }

  .services-section {
    grid-template-columns: 336px 1fr;
    column-gap: clamp(42px, 5vw, 67px);
    padding-left: clamp(56px, 6vw, 93px);
  }

  .services-section__scroller {
    width: min(calc(100vw - 455px), 860px);
  }

  .case-studies-section__scroller {
    width: calc(100vw - 48px);
  }

  .team-section {
    padding-left: clamp(48px, 5vw, 71px);
  }

  .team-section__scroller {
    width: calc(100vw - clamp(48px, 5vw, 71px));
  }
}

/* --------------------------------------------------------------------------
   Tablet responsive correction
   Applies to iPad / Galaxy Tab portrait and small tablet widths.
   Mobile <=767px remains untouched for the next review phase.
-------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  html,
  body {
    overflow-x: hidden;
  }

  body {
    min-width: 0;
  }

  /* Header / overlay */
  .site-header__bar {
    top: 18px;
    width: calc(100vw - 48px);
    height: 70px;
  }

  .menu-overlay {
    padding-top: 96px;
  }

  .menu-overlay__panel {
    width: calc(100vw - 48px);
    height: 590px;
  }

  .menu-overlay__shape {
    width: 620px;
    height: 551px;
  }

  .menu-overlay__cta {
    left: clamp(44px, 8vw, 76px);
    top: 265px;
    width: 300px;
  }

  .menu-overlay__cta p {
    width: 320px;
    font-size: 32px;
  }

  .menu-overlay__cta .btn {
    width: 300px;
  }

  .menu-overlay__nav {
    left: auto;
    right: 40px;
    width: min(520px, 52vw);
  }

  .menu-list,
  .menu-list__item,
  .menu-item {
    width: min(520px, 52vw);
  }

  .menu-submenu-popover {
    width: 280px;
  }

  /* Hero */
  .hero-section {
    height: 720px;
    padding-right: 46vw;
  }

  .hero-section__overlay {
    width: 54vw;
    height: 720px;
    padding: 210px 36px 140px 56px;
  }

  .hero-section__content {
    width: min(430px, 44vw);
    height: auto;
    gap: 16px;
  }

  .hero-section h1 {
    width: min(430px, 44vw);
    font-size: clamp(46px, 6.4vw, 62px);
  }

  .hero-section p {
    width: min(430px, 44vw);
  }

  /* About */
  .about-section {
    height: 660px;
    grid-template-columns: minmax(280px, 38vw) minmax(360px, 52vw);
    column-gap: 4vw;
    padding-left: 48px;
  }

  .about-section__shape {
    left: 30vw;
    top: 72px;
    width: 58vw;
    height: auto;
  }

  .about-section__content {
    width: min(360px, 38vw);
    margin-top: 225px;
    padding-bottom: 0;
    gap: 14px;
  }

  .about-section h2 {
    width: min(360px, 38vw);
    height: auto;
    font-size: clamp(42px, 5.6vw, 54px);
  }

  .about-section p {
    width: min(360px, 38vw);
    height: auto;
    max-height: 112px;
    font-size: 13px;
    overflow: hidden;
  }

  .about-section__media {
    width: min(520px, 52vw);
    height: 340px;
    margin-top: 210px;
  }

  /* Partners */
  .partners-section {
    height: 560px;
    padding: 86px 48px 0;
  }

  .partners-section h2 {
    margin-left: 0;
    font-size: clamp(48px, 6vw, 56px);
  }

  .partners-stage {
    width: 100%;
    height: 250px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    justify-items: center;
    align-items: center;
    gap: 20px 28px;
    transform: none;
  }

  .partner-mark {
    position: static;
    width: 130px;
    height: 58px;
  }

  .partner-mark img {
    width: 130px;
    height: 58px;
    max-width: 130px;
    max-height: 58px;
  }

  .partner-mark:nth-child(1),
  .partner-mark:nth-child(2),
  .partner-mark:nth-child(6),
  .partner-mark:nth-child(7),
  .partner-mark:nth-child(8),
  .partner-mark:nth-child(13),
  .partner-mark:nth-child(14),
  .partner-mark:nth-child(18),
  .partner-mark:nth-child(19) {
    display: none;
  }

  .partners-section__text {
    top: auto;
    left: 50%;
    bottom: 72px;
    width: min(600px, calc(100vw - 96px));
    font-size: 12px;
  }

  /* Services */
  .services-section {
    height: 610px;
    grid-template-columns: 280px 1fr;
    column-gap: 28px;
    padding: 76px 0 0 48px;
  }

  .services-section__content {
    width: 280px;
    gap: 22px;
  }

  .services-section h2 {
    width: 280px;
    font-size: clamp(42px, 5.7vw, 54px);
  }

  .services-section p {
    width: 280px;
    font-size: 11px;
    max-height: 120px;
    overflow: hidden;
  }

  .services-section__desktop-cta {
    width: 220px;
    font-size: 16px;
    padding-left: 34px;
    padding-right: 34px;
  }

  .services-section__scroller {
    width: calc(100vw - 380px);
    max-width: none;
    height: 420px;
    margin-top: 0;
  }

  .services-section__cards {
    height: 410px;
    min-width: 0;
    gap: 24px;
  }

  .service-card {
    width: 292px;
    height: 410px;
    padding: 44px 0;
    gap: 20px;
  }

  .service-card.is-active {
    width: 292px;
    height: 366px;
  }

  .service-card__media {
    width: 292px;
    height: 292px;
    border-radius: 24px;
  }

  .service-card__label {
    width: 292px;
    height: 48px;
    border-radius: 22px;
  }

  .service-card__label h3 {
    font-size: 16px;
  }

  /* Case Studies */
  .case-studies-section {
    height: 560px;
    padding: 54px 0 0;
  }

  .case-studies-section__intro {
    margin-left: 48px;
  }

  .case-studies-section h2 {
    width: min(690px, calc(100vw - 96px));
    font-size: clamp(42px, 5.7vw, 54px);
    text-align: left;
  }

  .case-studies-section__intro p {
    width: min(610px, calc(100vw - 96px));
    height: auto;
    max-height: 54px;
    margin: 10px 0 0;
    font-size: 12px;
    overflow: hidden;
  }

  .case-studies-section__scroller {
    width: 100vw;
    height: 218px;
    margin-top: 36px;
    padding: 0 0 0 48px;
    box-sizing: border-box;
  }

  .case-studies-section__cards {
    gap: 20px;
  }

  .testimonial-card {
    width: 340px;
    height: 200px;
    border-radius: 22px;
    padding: 10px 10px 0;
  }

  .testimonial-card__inner {
    width: 320px;
    height: 152px;
    padding: 15px 14px 0;
    border-radius: 18px;
    gap: 10px;
  }

  .testimonial-card h3 {
    font-size: 26px;
  }

  .testimonial-card p {
    width: 290px;
    font-size: 10px;
  }

  .rating-stars {
    left: 26px;
    top: 169px;
    font-size: 13px;
  }

  .case-studies-section__cta {
    left: 50%;
    top: 498px;
    transform: translateX(-50%);
  }

  /* Team */
  .team-section {
    height: 610px;
    padding: 64px 0 0 48px;
  }

  .team-section__intro {
    margin-left: 0;
  }

  .team-section h2 {
    width: min(360px, calc(100vw - 96px));
    font-size: clamp(42px, 5.7vw, 54px);
  }

  .team-section__intro p {
    width: min(460px, calc(100vw - 96px));
    height: auto;
    max-height: 42px;
    font-size: 12px;
    overflow: hidden;
  }

  .team-section__scroller {
    width: calc(100vw - 48px);
    height: 330px;
    margin-top: 28px;
  }

  .team-section__cards {
    gap: 20px;
  }

  .team-card,
  .team-card--mazen,
  .team-card--adham,
  .team-card--mohamed,
  .team-card--esraa,
  .team-card--marina {
    width: 250px;
    height: 313px;
  }

  /* Footer */
  .site-footer {
    height: 690px;
    --footer-frame-x: 0px;
  }

  .site-footer__top {
    position: absolute;
    top: 96px;
    left: 48px;
    right: 48px;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .site-footer__logo {
    position: static;
    display: block;
  }

  .site-footer__logo img {
    width: 229px;
    height: 34px;
  }

  .footer-nav {
    position: static;
    display: flex;
    width: 100%;
    height: auto;
    padding-top: 0;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px 34px;
  }

  .footer-nav a {
    font-size: 14px;
  }

  .site-footer__divider {
    top: 205px;
    left: 48px;
    right: 48px;
    width: auto;
  }

  .site-footer__content {
    top: 250px;
    left: 48px;
    right: 48px;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px 56px;
  }

  .footer-block,
  .footer-locations,
  .footer-hours,
  .footer-call,
  .footer-contact {
    position: static;
    width: auto;
  }

  .footer-block h2 {
    font-size: 20px;
  }

  .footer-block p,
  .footer-block a,
  .footer-block address,
  .footer-block li {
    font-size: 15px;
  }

  .footer-locations address {
    width: auto;
    gap: 12px;
  }

  .footer-call ul {
    width: auto;
    gap: 6px;
  }

  .footer-email {
    max-width: none;
    font-size: 15px;
  }

  .footer-socials {
    gap: 18px;
  }

  .footer-socials a,
  .footer-socials img {
    width: 28px;
    height: 28px;
  }

  .site-footer__copyright {
    top: 570px;
    left: 50%;
    transform: translateX(-50%);
    width: min(490px, calc(100vw - 96px));
    font-size: 15px;
  }

  .site-footer__wordmark-marquee {
    top: 630px;
    height: 70px;
  }

  .site-footer__wordmark-track {
    height: 70px;
  }

  .site-footer__wordmark {
    width: 886px;
    height: 70px;
    flex-basis: 886px;
  }

  @keyframes footerWordmarkMarquee {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(-886px, 0, 0);
    }
  }
}

/* --------------------------------------------------------------------------
   Tablet final refinements
   Applied after the main tablet block to avoid touching desktop or mobile.
-------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Header logo/icon visibility */
  .site-header__bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 11px 32px !important;
    overflow: visible !important;
  }

  .site-header__logo {
    display: block !important;
    flex: 0 0 221px !important;
    width: 221px !important;
    height: 34px !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .site-header__logo img {
    display: block !important;
    width: 221px !important;
    height: 34px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .site-header__toggle {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .site-header__toggle img {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Partners: add more breathing room between the logo grid and the paragraph */
  .partners-section {
    height: 585px !important;
  }

  .partners-stage {
    margin-top: 34px !important;
  }

  .partners-section__text {
    bottom: 38px !important;
  }

  /* Services remains close to Partners after increasing Partners height slightly */
  .services-section {
    padding-top: 68px !important;
  }

  /* Footer marquee: keep the whole wordmark visible on tablet */
  .site-footer {
    height: 745px !important;
    overflow: hidden !important;
  }

  .site-footer__copyright {
    top: 584px !important;
  }

  .site-footer__wordmark-marquee {
    top: auto !important;
    bottom: 0 !important;
    height: 86px !important;
    overflow: hidden !important;
  }

  .site-footer__wordmark-track {
    height: 86px !important;
  }

  .site-footer__wordmark {
    width: 1089px !important;
    height: 86px !important;
    flex: 0 0 1089px !important;
    max-width: none !important;
  }

  @keyframes footerWordmarkMarquee {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(-1089px, 0, 0);
    }
  }
}

/* --------------------------------------------------------------------------
   Tablet menu overlay frame final correction
   This targets only the opened menu frame on tablet widths.
   Mobile remains untouched for the next review phase.
-------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .menu-overlay {
    padding-top: 96px !important;
    background: rgba(0, 16, 41, 0.18) !important;
  }

  .menu-overlay__panel {
    width: calc(100vw - 48px) !important;
    height: min(620px, calc(100dvh - 116px)) !important;
    min-height: 560px !important;
    border-radius: 24px !important;
    padding: 28px !important;
    overflow: hidden !important;
  }

  .menu-overlay__shape {
    left: -34px !important;
    top: 18px !important;
    width: 620px !important;
    height: 551px !important;
  }

  .menu-overlay__cta {
    left: clamp(48px, 9vw, 82px) !important;
    top: 246px !important;
    width: 300px !important;
    gap: 10px !important;
  }

  .menu-overlay__cta h2 {
    width: 320px !important;
    height: auto !important;
    font-size: 30px !important;
    line-height: 1.05 !important;
  }

  .menu-overlay__cta .btn {
    width: 300px !important;
    height: 38px !important;
  }

  .menu-overlay__nav {
    top: 56px !important;
    right: 34px !important;
    left: auto !important;
    width: min(520px, 50vw) !important;
  }

  .menu-list {
    width: 100% !important;
    gap: 12px !important;
  }

  .menu-list__item,
  .menu-item {
    width: 100% !important;
  }

  .menu-item {
    min-height: 36px !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
  }

  .menu-item img {
    width: 5px !important;
    height: 12px !important;
  }

  .menu-submenu-popover {
    width: 270px !important;
    padding: 7px !important;
    gap: 6px !important;
    z-index: 9000 !important;
  }

  .menu-submenu-popover a {
    min-height: 32px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   Tablet menu CTA final refinement
   Move the Existing Client CTA slightly left and reduce text/icon sizes.
-------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .menu-overlay__cta {
    left: clamp(28px, 5vw, 46px) !important;
    top: 248px !important;
    width: 258px !important;
  }

  .menu-overlay__cta h2 {
    width: 258px !important;
    font-size: 24px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.2px !important;
  }

  .menu-overlay__cta .btn {
    width: 258px !important;
    height: 34px !important;
    padding: 6px 54px !important;
    gap: 7px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .menu-overlay__cta .btn img,
  .menu-overlay__cta .btn__icon {
    width: 18px !important;
    height: 18px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile polish pass
   Scope: phones only. Desktop and tablet remain untouched.
   The values below lock the mobile sections to the documented Figma heights
   and refine vertical spacing for the review pass.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--color-navy-500);
  }

  body {
    min-width: 0;
  }

  .hero-section,
  .about-section,
  .partners-section,
  .services-section,
  .case-studies-section,
  .team-section,
  .site-footer {
    width: 100%;
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }

  /* Header */
  .site-header__bar {
    left: 50%;
    transform: translateX(-50%);
    width: min(414px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
  }

  .site-header__logo,
  .site-header__logo picture,
  .site-header__logo img,
  .site-header__menu-button,
  .site-header__menu-button img {
    opacity: 1;
    visibility: visible;
  }

  /* Hero */
  .hero-section {
    height: 800px;
    min-height: 800px;
  }

  .hero-section__overlay {
    width: 100%;
    height: 800px;
    padding: 220px 41px 220px 24px;
  }

  .hero-section__content {
    width: min(365px, calc(100vw - 48px));
    height: auto;
    min-height: 360px;
    padding: 50px 46px 51px 0;
  }

  .hero-section h1 {
    width: min(319px, calc(100vw - 48px));
    font-size: 40px;
    line-height: 1.07;
  }

  .hero-section p {
    width: min(310px, calc(100vw - 48px));
    font-size: 13px;
    line-height: 1.35;
  }

  /* About */
  .about-section {
    height: 653px;
    min-height: 653px;
    padding-top: 80px;
  }

  .about-section__content {
    width: min(388px, calc(100vw - 42px));
  }

  .about-section h2 {
    width: min(388px, calc(100vw - 42px));
    font-size: 40px;
    line-height: 1.12;
  }

  .about-section p {
    width: min(375px, calc(100vw - 42px));
    line-height: 1.18;
  }

  .about-section__media {
    width: min(388px, calc(100vw - 42px));
    height: 278px;
  }

  /* Partners */
  .partners-section {
    height: 479px;
    min-height: 479px;
    padding-top: 72px;
  }

  .partners-stage {
    margin-top: 40px;
  }

  .partners-section__text {
    width: min(336px, calc(100vw - 48px));
    margin-top: 31px;
    line-height: 1.15;
  }

  /* Services */
  .services-section {
    height: 499px;
    min-height: 499px;
    padding-top: 40px;
  }

  .services-section__content {
    width: min(336px, calc(100vw - 48px));
  }

  .services-section h2 {
    width: min(331px, calc(100vw - 48px));
    font-size: 40px;
    line-height: 1.12;
  }

  .services-section p {
    width: min(336px, calc(100vw - 48px));
    line-height: 1.18;
  }

  .services-section__scroller {
    width: calc(100vw - 23px);
    max-width: 407px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .services-section__mobile-cta {
    margin-left: min(89px, calc((100vw - 203px) / 2));
  }

  /* Case Studies */
  .case-studies-section {
    height: 456px;
    min-height: 456px;
    padding-top: 40px;
  }

  .case-studies-section h2 {
    width: min(320px, calc(100vw - 48px));
    font-size: 48px;
    line-height: 0.98;
  }

  .case-studies-section__intro p {
    width: min(336px, calc(100vw - 48px));
    line-height: 1.18;
  }

  .case-studies-section__scroller {
    width: calc(100vw - 43px);
    max-width: 387px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .case-studies-section__cta {
    left: min(113px, calc((100vw - 203px) / 2));
  }

  /* Team */
  .team-section {
    height: 403px;
    min-height: 403px;
    padding-top: 40px;
  }

  .team-section h2 {
    width: min(350px, calc(100vw - 48px));
    font-size: 40px;
    line-height: 1.12;
  }

  .team-section__intro p {
    width: min(382px, calc(100vw - 48px));
    line-height: 1.18;
  }

  .team-section__scroller {
    width: calc(100vw - 41px);
    max-width: 389px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer */
  .site-footer {
    height: 663px;
    min-height: 663px;
  }

  .footer-nav {
    width: min(362px, calc(100vw - 48px));
  }

  .site-footer__copyright {
    width: 100%;
    text-align: center;
    white-space: nowrap;
  }

  /* Mobile menu overlay: keep the existing Figma frame, but prevent horizontal bleed. */
  .menu-overlay {
    overflow: hidden;
  }

  .menu-overlay__panel {
    width: min(420px, calc(100vw - 10px));
    max-width: calc(100vw - 10px);
  }

  .menu-overlay__nav,
  .menu-list,
  .menu-list__item,
  .menu-item {
    width: min(364px, calc(100vw - 56px));
  }

  .menu-submenu-popover {
    width: min(321px, calc(100vw - 76px));
  }
}

@media (max-width: 374px) {
  .hero-section h1 {
    font-size: 36px;
  }

  .about-section h2,
  .partners-section h2,
  .services-section h2,
  .team-section h2 {
    font-size: 36px;
  }

  .case-studies-section h2 {
    font-size: 42px;
  }

  .footer-nav {
    gap: 12px 30px;
  }
}

/* --------------------------------------------------------------------------
   Mobile alignment fix
   Scope: phones only.
   Targets the items flagged in review:
   hero title, about title, services labels, voices title/cards,
   team slider alignment, and footer logo/nav.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Keep phone canvas controlled without affecting tablet/desktop */
  .hero-section,
  .about-section,
  .partners-section,
  .services-section,
  .case-studies-section,
  .team-section,
  .site-footer {
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hero title: allow the Figma-like 3-line title instead of narrow 4-line wrapping */
  .hero-section__overlay {
    padding: 220px 24px 220px 24px !important;
  }

  .hero-section__content {
    width: min(366px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    padding: 50px 0 51px 0 !important;
  }

  .hero-section h1 {
    width: min(348px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    font-size: 39px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.4px !important;
  }

  .hero-section p {
    width: min(330px, calc(100vw - 48px)) !important;
  }

  /* About title: prevent clipping and keep it close to the mobile Figma feel */
  .about-section h2 {
    width: max-content !important;
    max-width: calc(100vw - 48px) !important;
    height: auto !important;
    font-size: clamp(34px, 8.7vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.45px !important;
    white-space: nowrap !important;
  }

  .about-section__content {
    width: min(382px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
  }

  .about-section p {
    width: min(374px, calc(100vw - 48px)) !important;
  }

  .about-section__shape {
    left: min(240px, calc(100vw - 192px)) !important;
  }

  /* Services: labels should read like real cards, centered and not cramped */
  .services-section__scroller {
    width: calc(100vw - 24px) !important;
    max-width: 406px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
  }

  .services-section__cards {
    gap: 8px !important;
  }

  .service-card {
    scroll-snap-align: start;
  }

  .service-card__label {
    height: 31px !important;
    padding: 0 8px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .service-card__label h3 {
    width: auto !important;
    max-width: 184px !important;
    height: auto !important;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: -0.05px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* Voices of Our Clients: closer title sizing and fixed card text clipping */
  .case-studies-section h2 {
    width: min(370px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    height: auto !important;
    font-size: 40px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.35px !important;
  }

  .case-studies-section__intro p {
    margin-top: 12px !important;
    width: min(352px, calc(100vw - 48px)) !important;
    height: 62px !important;
  }

  .case-studies-section__scroller {
    width: calc(100vw - 24px) !important;
    max-width: 406px !important;
    margin-top: 20px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
  }

  .case-studies-section__cards {
    gap: 8px !important;
  }

  .testimonial-card {
    width: 170px !important;
    scroll-snap-align: start;
  }

  .testimonial-card__inner {
    width: 160px !important;
    padding: 8px 10px !important;
    align-items: flex-start !important;
  }

  .testimonial-card h3 {
    width: 100% !important;
    height: auto !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .testimonial-card p {
    width: 140px !important;
    height: 78px !important;
    font-size: 8px !important;
    line-height: 1.18 !important;
  }

  .case-studies-section__cta {
    top: 378px !important;
  }

  /* Team slider: align first visible cards cleanly and match the reviewed mobile order */
  .team-section__scroller {
    width: calc(100vw - 24px) !important;
    max-width: 406px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
  }

  .team-section__cards {
    gap: 8px !important;
  }

  .team-card {
    scroll-snap-align: start;
  }

  .team-card--esraa {
    order: 1;
  }

  .team-card--marina {
    order: 2;
  }

  .team-card--mazen {
    order: 3;
  }

  .team-card--adham {
    order: 4;
  }

  .team-card--mohamed {
    order: 5;
  }

  /* Footer title + first menu row */
  .site-footer__top {
    align-items: center !important;
    gap: 34px !important;
  }

  .site-footer__logo {
    width: 229px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-footer__logo img {
    display: block !important;
    width: 229px !important;
    height: 34px !important;
  }

  .footer-nav {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: min(362px, calc(100vw - 48px)) !important;
    height: auto !important;
    gap: 16px 30px !important;
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .footer-nav a {
    width: 100% !important;
    text-align: center !important;
  }

  .site-footer__divider {
    margin-top: 24px !important;
  }
}

@media (max-width: 374px) {
  .hero-section h1 {
    font-size: 35px !important;
    width: min(312px, calc(100vw - 48px)) !important;
  }

  .about-section h2 {
    font-size: 31px !important;
  }

  .case-studies-section h2 {
    font-size: 36px !important;
  }

  .footer-nav {
    gap: 14px 22px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile autoplay sliders fix
   Scope: phones only.
   Restores autoplay on all sliders and refines Voices slider spacing.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Services / Voices / Team keep native horizontal overflow available,
     but autoplay controls the movement again through JS. */
  .services-section__scroller,
  .case-studies-section__scroller,
  .team-section__scroller {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scroll-behavior: auto !important;
  }

  .services-section__scroller::-webkit-scrollbar,
  .case-studies-section__scroller::-webkit-scrollbar,
  .team-section__scroller::-webkit-scrollbar {
    display: none !important;
  }

  /* Voices slider: closer to the mobile Figma frame */
  .case-studies-section__intro {
    margin-left: 0 !important;
  }

  .case-studies-section h2 {
    width: min(360px, calc(100vw - 48px)) !important;
    font-size: 40px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.3px !important;
  }

  .case-studies-section__intro p {
    margin-top: 11px !important;
    width: min(350px, calc(100vw - 48px)) !important;
    height: 58px !important;
    line-height: 1.16 !important;
  }

  .case-studies-section__scroller {
    width: calc(100vw - 24px) !important;
    max-width: 406px !important;
    height: 128px !important;
    margin-top: 18px !important;
    padding-bottom: 0 !important;
  }

  .case-studies-section__cards {
    gap: 8px !important;
    align-items: flex-start !important;
    will-change: transform, scroll-position;
  }

  .testimonial-card {
    width: 170px !important;
    height: 128px !important;
    flex: 0 0 170px !important;
    border-radius: 8px !important;
    padding: 5px 5px 0 !important;
  }

  .testimonial-card__inner {
    width: 160px !important;
    height: 108px !important;
    padding: 8px 11px !important;
    border-radius: 8px !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  .testimonial-card h3 {
    width: 100% !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .testimonial-card p {
    width: 138px !important;
    height: 78px !important;
    font-size: 8px !important;
    line-height: 1.16 !important;
    overflow: hidden !important;
  }

  .rating-stars {
    top: 117px !important;
  }

  .case-studies-section__cta {
    top: 376px !important;
  }

  /* Team should also autoplay again, while keeping the reviewed mobile order. */
  .team-section__cards {
    will-change: transform, scroll-position;
  }

  /* Services autoplay must not leave mobile cards in manual full-visible state. */
  .services-section__scroller[data-carousel-mode="services-two-card"] {
    overflow: hidden !important;
  }
}

@media (max-width: 374px) {
  .case-studies-section h2 {
    font-size: 36px !important;
  }

  .case-studies-section__intro p {
    height: 60px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile slider peek + autoplay review fix
   Scope: phones only.
   Makes the third card more visible in Voices and Team, matching the mobile Figma peek.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Keep autoplay clean: no visible scrollbars, no manual scrollbar distraction */
  .case-studies-section__scroller,
  .team-section__scroller {
    overflow: hidden !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .case-studies-section__scroller::-webkit-scrollbar,
  .team-section__scroller::-webkit-scrollbar {
    display: none !important;
  }

  /* Voices slider: reduce card width slightly so the 3rd card peeks more like Figma */
  .case-studies-section__scroller {
    width: calc(100vw - 24px) !important;
    max-width: 406px !important;
    height: 126px !important;
    margin-top: 18px !important;
  }

  .case-studies-section__cards {
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  .testimonial-card {
    width: 145px !important;
    flex: 0 0 145px !important;
    height: 126px !important;
    padding: 5px 5px 0 !important;
    border-radius: 8px !important;
  }

  .testimonial-card__inner {
    width: 135px !important;
    height: 106px !important;
    padding: 8px 9px !important;
    border-radius: 8px !important;
  }

  .testimonial-card h3 {
    width: 100% !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .testimonial-card p {
    width: 117px !important;
    height: 78px !important;
    font-size: 7.5px !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
  }

  .rating-stars {
    top: 115px !important;
    left: 12px !important;
  }

  .case-studies-section__cta {
    top: 376px !important;
  }

  /* Team slider: reduce card width slightly so the 3rd card is more visible */
  .team-section__scroller {
    width: calc(100vw - 24px) !important;
    max-width: 406px !important;
    height: 190px !important;
    margin-top: 24px !important;
  }

  .team-section__cards {
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  .team-card,
  .team-card--mazen,
  .team-card--adham,
  .team-card--mohamed,
  .team-card--esraa,
  .team-card--marina {
    width: 148px !important;
    flex: 0 0 148px !important;
    height: 185px !important;
  }
}

/* Slightly smaller phones: keep the third-card peek visible without breaking card readability */
@media (max-width: 374px) {
  .testimonial-card {
    width: 138px !important;
    flex-basis: 138px !important;
  }

  .testimonial-card__inner {
    width: 128px !important;
  }

  .testimonial-card p {
    width: 110px !important;
  }

  .team-card,
  .team-card--mazen,
  .team-card--adham,
  .team-card--mohamed,
  .team-card--esraa,
  .team-card--marina {
    width: 142px !important;
    flex-basis: 142px !important;
    height: 178px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile autoplay reliability + no duplicate team card fix
   Scope: phones only.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .case-studies-section__scroller,
  .team-section__scroller {
    overflow: hidden !important;
    overflow-x: hidden !important;
  }

  .case-studies-section__cards,
  .team-section__cards {
    flex-wrap: nowrap !important;
    will-change: transform !important;
  }

  /* Prevent CSS order from grouping original + cloned team cards together.
     The mobile team order is now handled in JS before cloning. */
  .team-card--esraa,
  .team-card--marina,
  .team-card--mazen,
  .team-card--adham,
  .team-card--mohamed {
    order: 0 !important;
  }

  /* Keep the third card peek visible like Figma */
  .testimonial-card {
    width: 145px !important;
    flex: 0 0 145px !important;
  }

  .team-card,
  .team-card--mazen,
  .team-card--adham,
  .team-card--mohamed,
  .team-card--esraa,
  .team-card--marina {
    width: 148px !important;
    flex: 0 0 148px !important;
    height: 185px !important;
  }
}

@media (max-width: 374px) {
  .testimonial-card {
    width: 138px !important;
    flex-basis: 138px !important;
  }

  .team-card,
  .team-card--mazen,
  .team-card--adham,
  .team-card--mohamed,
  .team-card--esraa,
  .team-card--marina {
    width: 142px !important;
    flex-basis: 142px !important;
    height: 178px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile menu real overlay fix
   Scope: phones only.
   The submenu is a separate overlay element:
   hidden by default → click parent → Move in Right / ease-out / 300ms.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .menu-overlay__panel {
    overflow: hidden !important;
  }

  .menu-overlay__nav {
    top: 36px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(288px, calc(100vw - 88px)) !important;
    z-index: 20 !important;
  }

  .menu-list {
    width: 100% !important;
    gap: 13px !important;
    align-items: center !important;
  }

  .menu-list__item {
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
    margin: 0 !important;
    pointer-events: auto !important;
  }

  .menu-item {
    width: 100% !important;
    min-height: 31px !important;
    height: 31px !important;
    padding: 8px 15px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    position: relative !important;
    z-index: 21 !important;
  }

  .menu-item img {
    width: 5px !important;
    height: 11px !important;
  }

  .menu-list__item.has-submenu.is-active > .menu-item {
    outline: 1px solid rgba(0, 255, 255, .94) !important;
    background: rgba(120, 120, 120, .40) !important;
  }

  /* The original nested submenu stays hidden on phone.
     Mobile uses .mobile-submenu-overlay instead. */
  .menu-overlay .submenu,
  .menu-overlay .has-submenu.is-active > .submenu,
  .menu-submenu-popover,
  .menu-submenu-popover.is-visible {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    max-height: 0 !important;
  }

  .mobile-submenu-overlay {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 10px !important;
    background: rgba(0, 16, 41, .90) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .34) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(34px) !important;
    transition:
      transform 300ms ease-out,
      opacity 300ms ease-out,
      visibility 0ms linear 300ms !important;
    z-index: 80 !important;
  }

  .mobile-submenu-overlay.is-visible {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
    transition:
      transform 300ms ease-out,
      opacity 300ms ease-out,
      visibility 0ms linear 0ms !important;
  }

  .mobile-submenu-overlay li {
    display: block !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-submenu-overlay li::marker {
    content: "" !important;
  }

  .mobile-submenu-overlay a {
    display: flex !important;
    width: 100% !important;
    min-height: 29px !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 7px 12px !important;
    border-radius: 7px !important;
    background: rgba(120, 120, 120, .40) !important;
    color: #fff !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .menu-overlay__panel.has-mobile-submenu-open .menu-overlay__nav {
    top: 36px !important;
  }

  .menu-overlay__panel.has-mobile-submenu-open .menu-list {
    gap: 13px !important;
  }

  .menu-overlay__panel.has-mobile-submenu-open .menu-list__item.has-submenu:not(.is-active) {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin: 0 !important;
    pointer-events: auto !important;
  }

  .menu-overlay__panel.has-mobile-submenu-open .menu-overlay__cta {
    bottom: 64px !important;
  }
}

@media (max-width: 374px) {
  .menu-overlay__nav,
  .menu-overlay__panel.has-mobile-submenu-open .menu-overlay__nav {
    top: 34px !important;
    width: min(270px, calc(100vw - 76px)) !important;
  }

  .menu-list,
  .menu-overlay__panel.has-mobile-submenu-open .menu-list {
    gap: 11px !important;
  }

  .menu-item {
    min-height: 29px !important;
    height: 29px !important;
    font-size: 10px !important;
  }

  .mobile-submenu-overlay {
    gap: 6px !important;
    padding: 7px !important;
  }

  .mobile-submenu-overlay a {
    min-height: 27px !important;
    font-size: 9.5px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile menu X-shape center fix
   Scope: phones only.
   Centers the background X shape inside the opened mobile menu frame.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .menu-overlay__shape {
    top: -42px !important;
    left: 50% !important;
    width: 560px !important;
    height: 520px !important;
    transform: translateX(-50%) rotate(-7.3deg) !important;
    transform-origin: center center !important;
  }
}

@media (max-width: 374px) {
  .menu-overlay__shape {
    top: -38px !important;
    width: 520px !important;
    height: 488px !important;
  }
}

/* --------------------------------------------------------------------------
   Desktop menu X-shape + frame gap refinement
   Scope: desktop only.
   - Adds a small visual gap between the fixed header and the opened menu frame.
   - Keeps the whole menu frame inside the viewport.
   - Scales/repositions the X shape with the panel height so it remains closer
     to the Figma placement when the browser viewport is shorter.
-------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .menu-overlay {
    padding-top: clamp(100px, 12dvh, 108px) !important;
  }

  .menu-overlay__panel {
    height: min(621px, calc(100dvh - 124px)) !important;
    max-height: calc(100dvh - 124px) !important;
  }

  .menu-overlay__shape {
    left: 0 !important;
    top: 0 !important;
    width: auto !important;
    height: 100% !important;
    max-width: 699px !important;
    object-fit: contain !important;
    object-position: left top !important;
    transform: none !important;
    opacity: .92 !important;
  }
}

/* Short desktop browser heights: keep the frame visible and prevent the X from
   feeling oversized/cropped. */
@media (min-width: 1024px) and (max-height: 760px) {
  .menu-overlay {
    padding-top: clamp(96px, 11.5dvh, 104px) !important;
  }

  .menu-overlay__panel {
    height: min(621px, calc(100dvh - 116px)) !important;
    max-height: calc(100dvh - 116px) !important;
  }

  .menu-overlay__shape {
    height: 100% !important;
    width: auto !important;
    max-width: 699px !important;
  }

  .menu-overlay__nav {
    top: clamp(50px, 7.6dvh, 76px) !important;
  }

  .menu-list {
    gap: clamp(10px, 1.8dvh, 16px) !important;
  }

  .menu-item {
    min-height: clamp(32px, 5dvh, 38px) !important;
  }

  .menu-overlay__cta {
    top: clamp(214px, 35dvh, 263px) !important;
  }
}