/* ---------- Phone pass 3: slideshow, collages, compact studio / contact / footer ---------- */
/* Loaded after styles.css so these rules win. Phones only. */
.does__cta { display: none; }
/* The Builder must stay above the green loader while he is being built */
body.is-loading .hero__builder { z-index: 101; }
.more, .dots, .form__next, .form__back, .fab, .facts__short { display: none; }

/* 05 Studio on phones, calmer: headline + map, one paragraph, three short facts.
   The "what we do" tiles are hidden here because Services already shows them. */
@media (max-width: 600px) {
  .studio .does { display: none; }
  .studio .studio__text { margin: 26px 0 0; }
  .studio .facts { margin-top: 22px; gap: 14px; }
  .studio .facts li p { display: none; }
  .studio .facts li p.facts__short { display: block; font-size: 13px; line-height: 1.4; }
  /* Sticky button steps aside while you scroll down, returns when you scroll up */
  .nav.is-hidden ~ .fab.is-on { opacity: 0; pointer-events: none; translate: 0 16px; }
}

/* Phone hero: words first, then the Builder, large, sitting on his tag just above the tape */
@media (max-width: 600px) {
  .hero { align-items: stretch; padding: calc(var(--nav-h) + 10px) 0 16px; }
  .hero__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; gap: 0 14px; }
  .hero__copy { display: contents; }
  .hero__copy > .eyebrow, .hero__title, .hero__lede { grid-column: 1 / -1; }
  /* Poster-size headline: the two lines flow as one, so on tall screens it breaks into
     "From / Gen-Z to / Gen-V." and fills the space; short screens keep two lines. */
  /* Two lines, as wide as the screen allows */
  .hero__title { font-size: 13.6vw; letter-spacing: -.06em; line-height: .92; margin-bottom: 16px; }
  .hero__lede { font: 500 clamp(19px, 5.6vw, 23px)/1.2 var(--f-display); letter-spacing: -.02em; color: var(--ink); margin-bottom: 0; }
  .hero__tag { box-shadow: none; }
  /* Last row: the Builder on his tag at the left, the two buttons stacked beside him */
  .hero__art { order: 0; grid-column: 1; grid-row: 4; align-self: end; margin: 0; padding-top: 18px; align-items: center; }
  .hero__builder { width: min(50vw, 30svh); margin: 0 0 -2px; }
  .hero__ctas { grid-column: 2; grid-row: 4; align-self: end; flex-direction: column; flex-wrap: nowrap; gap: 10px; padding-bottom: 0; }
  /* The tag and "See the work" share the same top and bottom lines */
  .hero__tag { height: 52px; padding-block: 0; box-sizing: border-box; }
  .hero__ctas .btn, .hero__ctas .btn--ink, .hero__ctas .btn--line { flex: none; width: 100%; font-size: 14px; padding: 0 6px; gap: 6px; }
}

/* ---------- Web-app touches (phones) ---------- */
@media (max-width: 600px) {
  /* 01 Proof on one screen: shorter stage, description behind "Read more" */
  .case__stage { aspect-ratio: 5 / 4; }
  .case__desc { margin-bottom: 4px; }
  .case__desc:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .more { display: inline-block; font: 600 13px/1 var(--f-body); color: var(--green-deep); padding: 6px 0 14px; text-decoration: underline; text-underline-offset: 3px; }

  /* Slide dots under Services */
  .dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
  .dots i { width: 9px; height: 9px; background: var(--steel); transition: background-color .25s, transform .25s; }
  .dots i.is-on { background: var(--green); outline: 2px solid var(--ink); }

  /* Two-step contact form */
  .form__next { display: inline-flex; height: 50px; }
  .form__back { display: inline-block; justify-self: start; font-size: 14px; margin-bottom: -4px; }
  .form[data-step="1"] .form__row, .form[data-step="1"] > .field, .form[data-step="1"] [data-submit],
  .form[data-step="1"] .form__note, .form[data-step="1"] .form__back { display: none; }
  .form[data-step="2"] .form__group, .form[data-step="2"] .form__next { display: none; }

  /* Sticky call to action */
  .fab {
    display: inline-flex; align-items: center; gap: 8px; position: fixed; z-index: 40;
    right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--ink); color: var(--white); border: 2px solid var(--ink);
    font: 600 14px/1 var(--f-body); padding: 13px 16px; box-shadow: 4px 4px 0 var(--green);
    opacity: 0; pointer-events: none; translate: 0 16px;
    transition: opacity .25s, translate .3s var(--ease-out);
  }
  .fab.is-on { opacity: 1; pointer-events: auto; translate: 0 0; }
  body.is-loading .fab, body.menu-open .fab { display: none; }

  /* Press feedback: tiles and buttons lift on their hard shadow while touched */
  .btn, .store, .step, .does li, .voice__list li.talk, .chip span, .fab, .cf__btn { transition: translate .12s var(--ease-out), box-shadow .12s var(--ease-out), background-color .2s, opacity .25s; }
  .btn:active, .store:active, .step:active, .does li:active, .voice__list li.talk:active, .cf__btn:active { translate: -2px -2px; box-shadow: 4px 4px 0 var(--ink); }
  .voice__list li.talk:active { box-shadow: 4px 4px 0 var(--green-mid); }
  .chip:active span { translate: -1px -1px; box-shadow: 2px 2px 0 var(--ink); }
  .fab.is-on:active { translate: -2px -2px; box-shadow: 6px 6px 0 var(--green); }
}

/* Stats: one rhythm for all three (label, number, one-line note) */
.stat dd { gap: 1px; }
.stat dd.stat__note { margin-top: 8px; }
@media (max-width: 600px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat, .stat + .stat, .stat:nth-child(3) { padding: 12px 0 12px 12px; }
  .stat:first-child { padding-left: 0; }
  .stat dd { font-size: 22px; }
  .stat dd.stat__note { font-size: 11px; margin-top: 6px; }
}

@media (max-width: 600px) {
  /* 02 Services: centred slideshow, a neighbour on each side */
  .cards { padding-inline: 14%; scroll-padding-inline: 0; gap: 10px; }
  .card, .card + .card { flex: 0 0 100%; scroll-snap-align: center; transition: opacity .3s, background-color .3s, box-shadow .3s; }
  .cards.is-slideshow .card { opacity: .45; }
  .cards.is-slideshow .card.is-current { opacity: 1; background: var(--green-light); box-shadow: 5px 5px 0 var(--ink); }
  .services p.swipe-hint { justify-content: center; margin-top: 10px; }

  /* 03 Process: 2 x 2 collage, everything on one screen */
  .process__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; padding: 0 var(--gutter); scroll-snap-type: none; }
  .step { padding: 14px; }
  .step:nth-child(2), .step:nth-child(3) { background: var(--green-light); }
  .step__px { height: 30px; top: 14px; right: 14px; }
  .step__num { font-size: 34px; margin-bottom: 10px; }
  .step__title { font-size: 20px; margin-bottom: 8px; }
  .step__text { font-size: 13px; line-height: 1.45; max-width: none; }
  .step__time { font-size: 14px; padding-top: 12px; }
  .process p.swipe-hint { display: none; }

  /* 04 How we talk: 2 x 2 collage of answers */
  .voice__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; }
  .voice__list li.talk { display: flex; flex-direction: column; gap: 10px; background: var(--white); color: var(--ink); padding: 14px; border: 0; }
  .voice__list li.talk:nth-child(2), .voice__list li.talk:nth-child(3) { background: var(--green); }
  .voice__list li.talk .talk__q { min-height: 0; font-size: 12.5px; line-height: 1.4; color: #444; }
  .voice__list li.talk:nth-child(2) .talk__q, .voice__list li.talk:nth-child(3) .talk__q { color: var(--forest); }
  .talk__q .px { display: block; margin: 0 0 4px; color: inherit; opacity: .8; }
  .voice__list li.talk .talk__a { display: block; background: none; border: 0; box-shadow: none; padding: 0; margin: auto 0 0; flex: none; }
  .talk__av { display: none; }
  .talk__tag { background: var(--ink); color: var(--white); font-size: 13px; }
  .voice .voice__line { font-size: 15px; line-height: 1.2; }
  .voice p.swipe-hint { display: none; }

  /* 04 again, calmer: four question chips, one answer at a time */
  .voice__list { gap: 8px; }
  .voice__list li.talk, .voice__list li.talk:nth-child(n) { display: contents; }
  .voice__list li.talk .talk__q, .voice__list li.talk:nth-child(n) .talk__q {
    display: flex; align-items: center; min-height: 58px; padding: 10px 12px; cursor: pointer;
    justify-self: stretch; max-width: none;
    border: 2px solid #3a3a3a; color: var(--steel); font-size: 13px; line-height: 1.35;
    transition: background-color .2s, color .2s, border-color .2s;
  }
  .voice__list .talk__q .px { display: none; }
  .voice__list li.talk.is-active .talk__q { background: var(--green); border-color: var(--green); color: var(--ink); font-weight: 600; }
  .voice__list li.talk .talk__a { display: none; }
  .voice__list li.talk.is-active .talk__a {
    display: flex; align-items: center; gap: 14px; grid-column: 1 / -1; grid-row: 3;
    background: var(--white); color: var(--ink); padding: 20px 16px; margin: 10px 5px 5px 0;
    box-shadow: 5px 5px 0 var(--green); min-height: 132px;
  }
  .voice__list .talk__av { display: block; width: 52px; flex: none; }
  .voice__list .talk__tag { background: var(--green); color: var(--ink); font-size: 14px; }
  .voice .voice__line { font-size: 20px; line-height: 1.15; }
  .voice .voice__line .sw { opacity: 1 !important; }

  /* 05 Studio: Egypt beside the headline, what we do as a 2 x 3 collage, facts 1 2 3 */
  .studio__inner { display: block; position: relative; }
  .studio__egypt { position: absolute; top: -4px; right: var(--gutter); width: 132px; max-width: none; }
  .studio__copy .h2 { font-size: 38px; }
  .studio__text { margin: 26px 0 18px; }
  .does { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .does li, .does li:last-child { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 2px solid var(--ink); background: var(--white); }
  .does li:nth-child(2), .does li:nth-child(3) { background: var(--green-light); }
  .does b { font-size: 14px; }
  .does li > span:last-child { font-size: 12.5px; line-height: 1.35; }
  .does li.does__cta { display: flex; background: var(--green); padding: 0; }
  .does__cta a { display: flex; flex-direction: column; gap: 4px; padding: 12px; height: 100%; width: 100%; }
  .does__cta a > span:last-child { font-size: 12.5px; line-height: 1.35; }
  .studio .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; border-top: 2px solid var(--ink); }
  .studio .facts li, .studio .facts li:first-child { display: block; border-top: 0; padding: 12px 0 0; font-size: 12.5px; line-height: 1.4; }
  .studio .facts .px { display: block; margin-bottom: 6px; font-size: 15px; }

  /* Contact: shorter card; the email lives in the footer just below */
  .contact__mail { display: none; }
  .contact__lede { margin-bottom: 0; }
  .contact__inner { gap: 20px; }
  .form { gap: 13px; padding: 14px; }
  .form__group legend, .field > span { margin-bottom: 6px; font-size: 13px; }
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .chips[role="radiogroup"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chip span { padding: 9px 2px; font-size: 12px; white-space: nowrap; }
  .chips[role="radiogroup"] .chip span { font-size: 11px; letter-spacing: -.01em; }
  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .field input, .field textarea { padding: 9px 10px; }
  .field textarea { height: 62px; resize: none; }
  .form .btn { height: 50px; }
  .form__note { margin-top: -4px; }

  /* Footer: short signature */
  .footer { padding-top: 22px; }
  .footer__top { gap: 14px; margin-bottom: 40px; }
  .footer__brand { grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 8px 12px; max-width: none; width: 100%; }
  .footer__lockup { width: 132px; }
  .footer__line { grid-column: 1 / -1; font-size: 13.5px; max-width: none; }
  .footer__stamp .mono { display: none; }
  .footer__stamp img { height: 26px; }
  .footer__stamp .px { font-size: 15px; }
  .footer__cols { display: grid; gap: 8px; width: 100%; }
  .footer__cols div { display: flex; gap: 14px; align-items: baseline; }
  .footer__h { display: none; }
  .footer__cols div:first-child { display: none; } /* Work / Services / Process / About: not needed on phones */
  .footer__cols a { font-size: 13px; white-space: nowrap; }
  .footer__sign { padding-top: 10px; margin-bottom: 10px; }
  .footer__builder { height: 44px; }
  .footer__bottom { flex-wrap: nowrap; align-items: baseline; font-size: 10.5px; white-space: nowrap; }
  .footer__bottom .mono { font-size: 10.5px; }
  .footer__line { order: 3; }
  .footer__stamp { justify-self: end; }
  .footer__top { margin-bottom: 54px; }
  .field input::placeholder, .field textarea::placeholder { font-size: 14px; }

  /* Footer as a signature: brand row, contact block with the Builder beside it, the line */
  .footer { padding-top: 26px; }
  .footer__line { display: none; }
  .footer__brand { display: none; } /* logo and Made in Egypt stamp: not needed in the phone signature */
  .footer__top { gap: 24px; margin-bottom: 14px; }
  .footer__cols div { flex-wrap: wrap; gap: 8px 16px; padding-right: 76px; }
  .footer__cols a:first-of-type { flex: 0 0 100%; font: 800 17px/1.1 var(--f-display); letter-spacing: -.02em; }
  .footer__cols a { font-size: 13.5px; }
  .footer__builder { height: 62px; right: 2px; }
  .footer__sign { padding-top: 12px; margin-bottom: 12px; }
}