/* Phones: the photo leads, then the page settles into a steady editorial rhythm. */
.mobile-dock { display: contents; }

@media (max-width: 767px) {
  /* Keep every section clear of the fixed header and give the final footer a landing zone. */
  main > section { scroll-margin-top: 82px; }
  main > section:not(.hero):not(.numbers) { padding-block: 76px 52px; }
  p { text-wrap: pretty; }
  .footer { padding-block-end: calc(128px + env(safe-area-inset-bottom)); }

  /* The first screen is a cover: the photo is one grid layer and the lockup is inked into it. */
  .hero {
    --hero-photo-h: clamp(304px, 86vw, 354px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--hero-photo-h) auto auto auto auto;
    gap: 0;
    min-height: 0;
    padding-block: 66px 30px;
  }
  .hero__copy { display: contents; }
  .hero__media {
    grid-column: 1; grid-row: 1; align-self: stretch; justify-self: stretch; order: initial;
    width: calc(100% + (2 * var(--gutter))); margin-inline-start: calc(-1 * var(--gutter)); padding: 0;
  }
  .hero__media::after {
    content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, var(--ink-00) 22%, var(--shadow-deep) 62%, var(--ink) 100%);
  }
  .hero__img {
    width: 100%; height: var(--hero-photo-h); aspect-ratio: auto; object-position: 50% 14%;
    border-radius: 0 0 var(--r-card) var(--r-card); box-shadow: 0 24px 50px var(--shadow-deep);
  }
  /* the lower-third rides the top of the cover photo; the name is in the header already */
  .hero__badge { top: 16px; bottom: auto; inset-inline-start: var(--gutter); padding: 7px 14px 7px 11px; border-radius: 12px; gap: 9px; }
  [dir="rtl"] .hero__badge { padding: 7px 11px 7px 14px; }
  .hero__name { display: none; }
  .hero__role { font-size: 10px; }
  :lang(ar) .hero__role { font-size: 11.5px; }
  .lockup {
    grid-column: 1; grid-row: 1; z-index: 2; align-self: end; justify-self: stretch; width: 100%;
    margin: 0 0 20px; gap: 7px; line-height: 0.86;
  }
  .lockup__line { width: fit-content; align-items: flex-start; gap: 2px; }
  .lockup__voice { font-size: clamp(0.88rem, 3.8vw, 1rem); line-height: 1.1; }
  .lockup__line--think .lockup__big { font-size: 22vw; max-width: 100%; }
  .lockup__line--manage .lockup__big { font-size: 12vw; max-width: 100%; }
  :lang(ar) .lockup { align-items: flex-end; }
  :lang(ar) .lockup__line { flex-direction: column; align-items: flex-end; gap: 2px; width: fit-content; }
  /* The Arabic voice pulls its line box in with negative margins on desktop; on the cover the big word
     then rode up into it (وأدير sat on MARKETING), so the voice keeps its own line here. The big words
     share the English sizes - same composition since decision 33. */
  :lang(ar) .lockup__voice { font-size: clamp(1.15rem, 5.8vw, 1.45rem); line-height: 1.35; margin-block: 0 0.12em; }
  .hero__sub {
    grid-column: 1; grid-row: 2; width: 100%; margin-block-start: 19px; padding-inline-start: 14px;
    font-size: 15px; line-height: 1.55; text-wrap: pretty;
  }
  :lang(ar) .hero__sub { line-height: 1.8; }
  .hero__ctas {
    grid-column: 1; grid-row: 3; width: 100%; margin-block-start: 16px; gap: 10px;
  }
  .hero__ctas .btn { flex: 1 1 100%; min-width: 0; }
  .hero__ctas .btn--ghost { height: 50px; }
  .hero__trust { grid-column: 1; grid-row: 4; margin-block-start: 22px; gap: 10px; }
  .hero__trust-label { font-size: 10px; }
  :lang(ar) .hero__trust-label { font-size: 12px; }
  .hero__marquee { --logo-gap: 24px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .hero__logos { animation-duration: 30s; }
  .hero__logos img { height: 24px; }
  .hero__logos .hero__logo--wide { height: 16px; }
  .hero__logos .hero__logo--tall { height: 30px; }
  .hero__logos .hero__logo--padded { height: 36px; }
  .hero__logos .hero__logo--mono { height: 23px; }
  .hero__logos .hero__logo--script { height: 21px; }
  .hero__crop { --h: 19px; }

  /* Headings keep desktop's authority without forcing a phone-sized paragraph into a slogan. */
  .h2 { font-size: clamp(2.4rem, 11vw, 3.35rem); line-height: 0.96; text-wrap: balance; }
  :lang(ar) .h2 { font-size: clamp(2rem, 10vw, 2.8rem); line-height: 1.35; text-wrap: balance; }
  .section-head { gap: 12px; margin-block-end: 28px; }
  .section-head__note { max-width: 100%; font-size: 14px; line-height: 1.6; text-wrap: pretty; }
  .about__manifesto { font-size: clamp(1.5rem, 6.4vw, 2rem); line-height: 1.55; text-wrap: pretty; }
  .about__belief { font-size: 15px; line-height: 1.7; }
  .services__intro { max-width: 32rem; font-size: 16px; line-height: 1.7; }
  .svc-map { max-width: min(100%, 326px); }
  .service__head { min-height: 54px; }
  .work__pick { min-height: 56px; }
  .work__meta { white-space: normal; line-height: 1.4; }
  .stage__lede { font-size: 1.35rem; line-height: 1.35; text-wrap: balance; }
  :lang(ar) .stage__lede { line-height: 1.65; }
  .stage__mosaic { grid-template-rows: minmax(154px, 44vw) minmax(116px, 32vw); gap: 10px; }
  .stage__cap { inset-inline: 14px; bottom: 12px; gap: 4px; }
  .stage__cap-t { font-size: 16px; }
  :lang(ar) .stage__cap-t { font-size: 15px; line-height: 1.35; }
  .insights__body { gap: 24px; }
  .insights__list { grid-template-columns: 1fr; gap: 12px; }
  .insight { min-height: 216px; padding: 22px; }
  /* Contact console: stacked, the ad preview right after the choices, the Launch button last.
     Every choice is at least 44px tall; card descriptions and the three tiles stay on desktop. */
  .launch__eyebrow { margin-block-end: 12px; }
  .launch__lede { font-size: 15px; line-height: 1.6; }
  .console { margin-block-start: 22px; border-radius: 18px; }
  .console__setup { gap: 2px; padding: 6px 6px 8px; }
  .step { padding: 10px; }
  .step__lab { margin-block-end: 9px; }
  .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg__opt { min-height: 46px; font-size: 14px; }
  .obj { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .obj__card { min-height: 58px; padding: 10px 14px; }
  .obj__d { display: none; }
  .chips { gap: 6px; }
  .chip { min-height: 44px; padding: 9px 15px; font-size: 14px; }
  .console__preview { gap: 12px; padding: 14px 12px 16px; background: none; }
  .chat { min-height: 0; border-radius: 16px; }
  .chat__who { gap: 10px; padding: 8px 12px; }
  .chat__who img { width: 30px; height: 30px; }
  .chat__thread { padding: 12px 10px; }
  .bubble { max-width: 96%; font-size: 14px; }
  .tiles { display: none; }
  .btn.launch__go { height: 60px; padding-inline-start: 22px; font-size: 15.5px; }
  /* the steps-left tag goes under the label (no room beside it); no hover roll on touch, so no shadow copy */
  .launch__label { flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.1; }
  .launch__go .roll { text-shadow: none; }
  .launch__left { font-size: 9.5px; }
  :lang(ar) .launch__left { font-size: 11.5px; }
  .launch__title { font-size: clamp(2.1rem, 9.6vw, 2.8rem); }
  .launch__title .h2__manage { font-stretch: 106%; }
  :lang(ar) .launch__title { font-size: clamp(2rem, 9.4vw, 2.6rem); }

  /* One safe-area-aware dock replaces all three corner floats. */
  .mobile-dock {
    /* physical left: centring is symmetric, and translateX(-50%) is physical too (inline-start broke RTL) */
    position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
    display: flex; align-items: center; gap: 6px; width: max-content; max-width: calc(100vw - 24px); min-height: 64px;
    padding: 7px; border: 1px solid var(--bone-14); border-radius: var(--r-pill);
    background: var(--ink-92); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
    box-shadow: 0 16px 42px var(--shadow-deep), inset 0 1px 0 var(--bone-10);
    opacity: 0; transform: translateX(-50%) translateY(14px); pointer-events: none;
    transition: opacity 0.4s var(--ease-ui), transform 0.4s var(--ease-ui);
  }
  .mobile-dock.is-shown { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
  .mobile-dock .wa-float {
    position: static; inset: auto; z-index: auto; display: flex; align-items: center; justify-content: center; gap: 8px;
    flex: 1 1 150px; min-width: 148px; max-width: 210px; width: auto; height: 48px; padding-inline: 13px;
    border-radius: var(--r-pill); opacity: 0; transform: none; pointer-events: none; transition: opacity 0.3s var(--ease-ui);
  }
  .mobile-dock .wa-float.is-shown { opacity: 1; pointer-events: auto; }
  .mobile-dock .wa-float:not(.is-shown) { display: none; }
  .wa-float__label { display: inline; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
  .mobile-dock .to-top {
    position: static; inset: auto; z-index: auto; flex: 0 0 48px; width: 48px; height: 48px;
    opacity: 0; transform: none; pointer-events: none;
  }
  .mobile-dock .to-top.is-shown { opacity: 1; pointer-events: auto; }
  /* static, so the opened list is positioned against the dock (centred on screen), not against the
     48px button at the dock's end, which pushed the list past the screen edge */
  .mobile-dock .funnel {
    position: static; inset: auto; flex: 0 0 48px; opacity: 0; transform: none; pointer-events: none;
  }
  .mobile-dock .funnel.is-shown { opacity: 1; pointer-events: auto; }
  .mobile-dock .funnel__btn { width: 48px; height: 48px; }
  .mobile-dock .funnel__list {
    inset-inline-start: auto; left: 50%; bottom: calc(100% + 12px); width: min(276px, calc(100vw - 32px));
    transform: translateX(-50%) translateY(8px);
  }
  .mobile-dock .funnel[data-open] .funnel__list { transform: translateX(-50%); }
}

@media (min-width: 768px) {
  /* Keep the existing desktop controls in their original viewport positions. */
  .wa-float__label { display: none; }
}