/* Mobile — Figma frame Mobile-Home (1:1758), 393 wide.
   Page coordinates are the Figma y minus 97, since the frame's top 97px is a
   phone status-bar mockup and the Scroll frame starts at 97.

   Checkpoints: hero panel 400, experiences 788, projects 1330,
   collaborations 4085, clients 4489, discover 4941, footer 6003. */

.nav-burger { display: none; }

@media (max-width: 700px) {

  html, body { overflow-x: clip; }
  .scroll, .page, .stage { overflow-x: clip; }

  /* Menu-Mobile — Figma 1:2017: 68 tall, so 16 of padding around a 36-tall
     button: 8 above and below a 20 line. */
  .nav { padding: var(--space-16); max-width: none; }
  .nav-left { width: auto; }
  .nav-desktop-only { display: none; }
  .nav-item {
    padding: 8px var(--space-12);
    font-size: 16px;
    line-height: 20px;
  }

  /* What used to be here: two fixed gradients painting black 0.15 over white
     0.8, and a transparent background-colour under them. Both are gone.

     They were a colour this component no longer has — `Button/Nav-item` carries
     the same rgba(203,203,203,.6) at every width — and they collided with the
     gauge every button now fills on. The gauge drives `background-image` and
     `background-size` together; overriding only the image left its two layers
     with the gauge's widths, so the button showed the wrong one and hovering
     wiped it to nearly nothing. */

  /* Square. A button with no text has no line box, so its height came from the
     11px icon plus 16 of padding — 27 against a 36 width, which is the flatness
     Flora saw. The height is stated rather than inferred. */
  .nav-burger {
    display: flex;
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 8px;
    border: 0;
    cursor: pointer;
  }
  .nav-burger img { width: 12px; height: 11px; }

  /* Video — Figma 1:1760: full width, 622 tall, top at 52. Gradient at 386. */
  /* Mobile keeps the Figma's own 52px offset, not the desktop drop */
  :root { --hero-drop: 0px; }
  .hero-media { width: 100%; height: 622px; margin-top: 52px; }
  .hero-scrim { top: 386px; width: 100%; height: 482px; }

  /* Background/Hero-Overlay — Figma 98:1819: starts at 258. The blur layer is
     120 past the 622 clip, same overshoot as desktop. The fill on the
     range needs no change: its ramp is a proportion of its own height. */
  .hero-veil-range { top: 258px; }
  .hero-overlay { height: 742px; }

  /* Scroll column — padding-top 400 so the hero panel lands on its Figma y */
  .scroll { width: 100%; padding-top: 400px; }
  .scroll > * { width: 100%; }

  /* Hero-headline-testimonials — Figma 98:1554: 16px padding, headline 24/32 */
  .hero-panel { width: 100%; padding: var(--space-16); gap: var(--space-24); }
  .hero-headline { font-size: 24px; line-height: 32px; }
  .headtitle { font-weight: var(--weight-regular); line-height: 20px; height: 20px; }

  .testimonial-avatars {
    gap: var(--space-16);
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .testimonial-avatars::-webkit-scrollbar { display: none; }

  /* Section-Experiences — Figma 98:1481: title at 16, list at 52, rows 65 with
     a 16 gap, then the button 32 below the list */
  .experiences { width: 100%; padding: var(--space-16); gap: var(--space-16); }
  .experience-rows { gap: var(--space-16); }
  .experience { width: 100%; gap: var(--space-16); }
  .experience-content { flex-direction: column-reverse; gap: 0; align-items: flex-start; }
  .experience-main { gap: 2px; width: 100%; }
  .experience-title { color: var(--text-secondary); }
  .experience-meta { color: var(--greyscale-500); }
  .experience-location {
    font-size: var(--body-13-size);
    line-height: var(--body-13-line);
    color: var(--greyscale-500);
  }
  .experience-list { gap: var(--space-32); }
  .button-tertiary { border-bottom: 0; font-size: var(--h4-size); line-height: var(--h4-line); }

  /* One line each, cut with an ellipsis. The Figma rows are a fixed 64 tall
     with Title and Company at 22 apiece (98:1618), so a long title is meant to
     be cut, not wrapped — wrapping is what turned the rows into tall blocks.
     Truncation needs min-width: 0 on every flex ancestor, which .experience-
     main and .collaboration-main already carry. */
  .experience-title,
  .experience-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Section-Projects — Figma 98:1756: title at 24, list at 60, 32 between cards */
  /* 24 at the sides rather than the Figma's 16, so the thumbnails stop short
     of the screen edge. Deliberate deviation, asked for. Both card types are
     fluid rather than pinned to the Figma's 361 and 173, so they follow it. */
  /* Every section of this page was declared 574 or 576 wide with no max-width,
     on a screen 393 across. They hung roughly 180px off the right, and the
     `overflow-x: clip` above hid the fact by cutting them — which is what
     "everything is cut" was, all the way down the page.

     Width is stated on each rather than left to a fixed number written for a
     640 column. */
  .projects { width: 100%; padding: var(--space-24) var(--space-24) 0; gap: var(--space-16); }
  .projects-list { width: 100%; gap: var(--space-32); }

  /* Big card — Figma 98:1759: thumbnail 361x271, landscape. It was portrait
     361x481 before Flora's update; the desktop card keeps its own 5:3. */
  .project-thumb-wrap { width: 100%; aspect-ratio: var(--ratio-project-card); }
  .project-card .project-thumb { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }

  /* Double projects — Figma 98:1762: side by side now, two 173 columns with a
     16 gap, not stacked. Square thumbnail, and the description keeps the
     one-line ellipsis it carries at every width. */
  .projects-double { flex-direction: row; gap: var(--space-16); width: 100%; }
  .project-card--small { width: auto; flex: 1 1 0; min-width: 0; }
  .project-card--small .project-thumb-wrap { width: 100%; aspect-ratio: 1 / 1; }
  .project-card--small .project-thumb { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }

  /* Section-More-collaborations — Figma 98:1615: rows 64 with a 16 gap */
  /* the desktop 9px nudge does not exist on mobile; every gap here is 32 */
  .scroll > .collaborations { margin-top: 0; }
  .collaborations { width: 100%; padding: var(--space-16); gap: var(--space-16); }
  .collaboration .testimonial { align-self: center; }
  .collaboration-content { align-items: center; }
  .collaboration { width: 100%; }
  .collaboration-rows { gap: var(--space-16); }

  /* Section-other-clients — Figma 98:1696: the two columns stack, 8 apart */
  .clients { width: 100%; padding: var(--space-16); gap: var(--space-16); }
  .clients-columns { flex-direction: column; gap: 8px; width: 100%; }
  .clients-column { width: 100%; gap: 8px; }
  .client { width: 100%; }

  /* Section-Discover-more — Figma 98:1828: two cards stacked, 32 apart */
  .discover { width: 100%; padding: var(--space-16); gap: var(--space-16); }
  .discover-tiles { flex-direction: column; gap: var(--space-32); width: 100%; }
  .discover-tile { width: 100%; }
  .discover-visual { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .discover-content { width: 100%; }

  /* Footer-crosslink — Figma 98:2013: 393x700, sitting 128 below the column.
     Image 500 tall at the top, blur 457 anchored to the bottom, content
     padded 32/16 and pinned to the bottom edge like the desktop instance. */
  .contact { margin-top: 128px; height: 700px; padding-bottom: 0; }
  .contact-portrait { width: 100%; height: 500px; }
  .contact-blur { height: 457px; }
  .contact-content { width: 100%; padding: var(--space-32) var(--space-16); }
  /* The mobile instance drops the "Contact" headtitle (98:1991 holds only the
     Contact-CTA): at this width the headline carries the section on its own. */
  .contact-headtitle { display: none; }
  .contact-lead { width: 100%; font-size: 24px; line-height: 32px; }
  /* Footer-links stacks on mobile — Figma 98:2000, gap 16 */
  .contact-footer { flex-direction: column; gap: var(--space-16); white-space: normal; }

  /* ── Content pages: About 115:3203, My approach 122:4085 ──────────────── */

  /* Both mobile frames use the same hero: 393x532, full bleed, so the portrait
     lands 500 tall at the asset's own 976x1242. Only the padding differs. */
  .page-hero-sticky { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .page-portrait { width: 100%; height: 500px; }

  /* 122:4088 pads 32 at the top and nothing at the bottom, where the About
     frame pads 16 on both. 500 + 32 is its 532. */
  .approach .page-hero-sticky {
    padding-top: var(--space-32);
    padding-bottom: 0;
  }

  /* Blur 115:3470 / 122:4089 both start at 290. The fill's ramp is a
     proportion of the node's own height, so it needs no override; only the
     blur layer's height changes, to the 500 the portrait covers here. */
  .page-veil-range { top: 290px; }
  .page-veil { height: 620px; }
  /* the veil follows the hero's 32px offset on this page */
  .approach .page-veil { top: var(--space-32); }

  /* Container 115:3471 still starts at 420, where the home column starts at 400 */
  .page-scroll { padding-top: 420px; }
  .page-headline-wrap { width: 100%; }
  .page-headline { font-size: 24px; line-height: 32px; }
  .page-texts { width: 100%; }
}

/* ── What the mobile frame drops ─────────────────────────────────────────── */

/* Two blocks are switched off in Mobile-Project-iteration-x rather than being
   made to fit: the roadmap image after the Problem/Solution cards (174:28092),
   and the pair of captioned AI stills (174:28158). They are marked in the
   markup rather than reached for by position here, so moving anything around
   them cannot start hiding the wrong thing.

   Kept in the page and hidden by CSS, not deleted: a parser reading the markup
   still finds them, and they come back at any width above this one. */
@media (max-width: 700px) {
  [data-mobile="hidden"] { display: none; }
}