/* =========================================================================
   Mobile system — everything below 768px.

   Loaded last on every page. Every rule lives inside
   @media (max-width: 767.98px), so the desktop composition is untouched by
   construction: nothing in this file can match at 768px and above.

   The desktop language is kept, not replaced — near-edge-to-edge compositions,
   oversized display type, wide negative space, deliberate cropping — but each
   composition is re-proportioned for a portrait viewport instead of being
   scaled down.
   ========================================================================= */

@media (max-width: 767.98px) {

  /* ---------------------------------------------------------------- tokens */
  :root {
    --mobile-gutter: clamp(16px, 4.27vw, 24px);
    --mobile-nav-height: 52px;
    --mobile-section-space: clamp(64px, 18vw, 96px);
    --mobile-content-width: calc(100vw - (var(--mobile-gutter) * 2));
    /* the nav plus whatever the notch takes, for anything that must clear it */
    --mobile-nav-safe: calc(var(--mobile-nav-height) + env(safe-area-inset-top, 0px));
  }

  /* =======================================================================
     1. Global navigation
     ======================================================================= */
  .fig-nav-inner {
    padding: 12px var(--mobile-gutter);
    min-height: var(--mobile-nav-height);
  }
  .fig-nav-logo img { height: 28px; }

  /* The dot and the burger keep their drawn size; the touch area around them
     grows to 44x44 with negative margins so the bar height does not change. */
  .theme-toggle,
  .nav-burger {
    width: 44px;
    height: 44px;
    margin: -12px 0;
    justify-content: center;
    align-items: center;
  }
  .nav-burger { gap: 5px; }
  .theme-toggle svg { flex: none; }

  /* the burger sits at the right edge, so pull its box back to the gutter */
  /* the mode dot belongs with the burger, not spaced off it */
  .fig-nav-end { gap: 8px; margin-right: -10px; }
  .fig-nav-end .theme-toggle { margin-right: -6px; }

  /* the panel opens directly under the bar, exactly one viewport wide */
  .fig-nav-menu { width: 100vw; }
  .fig-nav-menu-inner {
    padding: 4px var(--mobile-gutter) calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .fig-nav-menu a {
    font-size: clamp(28px, 8vw, 32px);
    line-height: 1;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0;
  }

  /* while the menu is open the page underneath must not scroll */
  html.nav-locked,
  html.nav-locked body { overflow: hidden; touch-action: none; }

  /* =======================================================================
     2. Home — scroll hero
     ======================================================================= */
  .ys-hero {
    /* the sequence is normalised in the driver, so the section can be shorter
       here without re-tuning a single phase dial */
    height: 420svh;
  }

  .ys-stage {
    height: 100svh;
    min-height: 0;              /* the desktop 560px floor cropped short phones */
    overflow: clip;
  }
  @supports (height: 100dvh) {
    .ys-stage { height: 100dvh; }
  }

  /* --- the incoming sequence ---
     The loop is the only thing on the screen by the time it plays, so it is not
     held back to 92vw/70svh any more — it takes the stage it is given. */
  .ys-incoming canvas,
  .ys-seq-canvas { max-width: 100vw; max-height: 100svh; }

  /* =======================================================================
     3. Home — Featured Projects
     ======================================================================= */
  .fp {
    --fp-pad: var(--mobile-gutter);
    --fp-nav: var(--mobile-nav-height);
    padding-bottom: clamp(64px, 18vw, 80px);
  }

  /* the rows no longer pin, so the heading has nothing to hold above — and a
     sticky heading here would sit under the fixed bar */
  .fp-head {
    position: static;
    padding: calc(var(--mobile-nav-safe) + 28px) 0 16px;
  }
  .fp-heading { font-size: clamp(32px, 9vw, 40px); }

  .fp-row {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
    padding: clamp(32px, 9vw, 40px) 0;
  }
  /* The phone gets each project's own portrait crop, so the frame follows the
     asset: 9:16, the ratio every one of those files is exported at. The one
     project with no portrait crop keeps its landscape frame. Everything else
     about the row — name, description, services, rules, order — is unchanged. */
  .fp-media { width: 100%; aspect-ratio: 9 / 16; }
  .fp-media--landscape { aspect-ratio: 16 / 9; }
  .fp-media picture { display: contents; }
  .fp-media img { object-fit: cover; object-position: center; }
  /* the one project whose mobile asset is a loop rather than a still */
  .fp-media .fp-vid {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* a loop that plays on its own is motion; fall back to the poster */
  @media (prefers-reduced-motion: reduce) {
    .fp-media .fp-vid { display: none; }
  }

  .fp-info { gap: 12px; padding: 0; }
  .fp-name { font-size: clamp(24px, 7vw, 30px); }
  .fp-desc { font-size: clamp(15px, 4.2vw, 17px); line-height: 1.25; max-width: none; }

  /* =======================================================================
     4. Approach
     ======================================================================= */
  /* the desktop keeps ~192px above the statement; on a phone that is dead space */
  .ap-statement {
    padding: clamp(112px, 30vw, 128px) clamp(16px, 5vw, 20px) clamp(64px, 18vw, 80px);
  }
  .ap-statement h2 {
    font-size: clamp(36px, 10vw, 44px);
    line-height: 1.0;
    max-width: 100%;
    margin-bottom: 0;
  }

  /* The rings are the composition, not a diagram: they run past both edges and
     are cropped symmetrically by their own stage, exactly as the desktop lets
     them fill the column. Shrinking them into the gutters would throw the scale
     away. */
  .ap-rings {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: clamp(64px, 18vw, 96px);
    overflow: clip;                 /* the only clip; it cannot widen the page */
  }
  .ap-rings > div { width: 100vw; }
  .ap-rings svg {
    width: min(142vw, 620px);
    max-width: none;
    height: auto;
    display: block;
    margin-inline: auto;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .ap-rings text,
  .ap-rings textPath { font-size: 9px; }

  /* the ring centre carries the description; the desktop hides it below md, but
     on the oversized mobile stage there is room for it right where it belongs */
  .ap-rings .hidden.md\:flex {
    display: flex !important;
    position: absolute;
    inset: 0;
    padding: 0;
    pointer-events: none;
  }
  /* The measure is tied to the ring system, not to the viewport: the innermost
     circle is r=80 of a 400 viewBox, so its diameter is 40% of the rendered SVG
     and a block of a few lines stays inside the curve at about 34% of it. A
     percentage of the column instead let the text run out over the ring labels
     between roughly 500 and 950px wide. */
  .ap-rings .hidden.md\:flex span {
    font-size: clamp(12.5px, 3.2vw, 15px);
    max-width: calc(min(142vw, 620px) * 0.34);
    text-align: center;
    line-height: 1.3;
  }

  .ap-manifesto {
    padding: 0 var(--mobile-gutter) clamp(96px, 26vw, 112px);
  }
  .ap-manifesto > div {
    width: calc(100vw - 32px);
    max-width: 30ch;
    font-size: clamp(19px, 5.4vw, 22px);
    line-height: 1.24;
    gap: clamp(24px, 7vw, 32px);
    text-align: center;
  }

  /* =======================================================================
     5. Services — the WHAT / WE / DO sequence
     ======================================================================= */
  .svcx {
    --hdr: var(--mobile-nav-height);
    --card-w: min(calc(100vw - 32px), 430px);
    --card-h: calc(var(--card-w) * 0.96);
    --tab-w: 24px;
  }

  .svcx-word { font-size: clamp(76px, 28vw, 116px); line-height: 0.84; }
  .svcx-word--what { left: 16px; top: 2%; }
  .svcx-word--we   { right: 16px; left: auto; top: 32%; }
  .svcx-word--do   { left: 16px; top: 64%; margin-left: 12vw; }

  .svcx-copy {
    left: 16px;
    top: 43%;
    width: 65vw;
    font-size: clamp(15px, 4.2vw, 17px);
    line-height: 1.3;
  }
  .svcx-btn {
    left: 16px;
    top: 57%;
    min-height: 44px;
    font-size: 12px;
    padding: 0 14px;
  }

  /* cards: full width inside the gutters, centred on their own width */
  .svcx-card {
    left: 50%;
    margin-left: calc(var(--card-w) / -2);
    top: calc((var(--u) - var(--card-h)) / 2 - 16px);
    padding: 22px;
  }
  /* each card rests ~22px lower than the one before, so a deliberate band of
     the previous card stays visible instead of it being covered completely */
  .svcx-card:nth-of-type(2) { top: calc((var(--u) - var(--card-h)) / 2 + 6px); }
  .svcx-card:nth-of-type(3) { top: calc((var(--u) - var(--card-h)) / 2 + 28px); }

  .svcx-card-title { font-size: clamp(38px, 11.5vw, 50px); line-height: 0.88; }
  .svcx-card-desc  { font-size: clamp(14px, 3.9vw, 16px); line-height: 1.2; max-width: 100%; margin-top: 10px; }
  .svcx-card-list  { font-size: clamp(15px, 4.1vw, 17px); line-height: 1.25; }
  .svcx-card-index { font-size: clamp(56px, 17vw, 72px); }

  .svcx-tab { width: 24px; font-size: 10px; right: max(0px, env(safe-area-inset-right, 0px)); }
  .svcx-hint { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

  .svcx-statement { padding-top: calc(var(--u) * 0.26); }
  .svcx-statement-text {
    width: calc(100vw - 32px);
    margin-inline: auto;
    font-size: min(13.5vw, 64px);
    line-height: 0.89;
  }

  /* =======================================================================
     6. Contact
     ======================================================================= */
  .contact {
    grid-template-columns: 1fr;
    min-height: 100svh;
    height: auto;
    padding: clamp(112px, 30vw, 128px) clamp(16px, 5vw, 20px) clamp(48px, 14vw, 64px);
  }
  .contact-title { font-size: clamp(56px, 16.5vw, 74px); line-height: 0.85; margin-bottom: clamp(48px, 13vw, 56px); }
  .contact-intro { font-size: clamp(18px, 5vw, 20px); line-height: 1.38; margin-bottom: clamp(28px, 8vw, 32px); }
  .contact-body hr,
  .contact-divider { margin-block: clamp(28px, 8vw, 32px); }
  .contact-cols { grid-template-columns: 1fr; gap: clamp(28px, 8vw, 36px); }
  .contact-k { font-size: 12.5px; }
  .contact-v,
  .contact-social a {
    font-size: clamp(15px, 4.2vw, 17px);
    min-height: 44px;
    display: flex;
    align-items: center;
    overflow-wrap: anywhere;
  }
  .contact-field { margin-bottom: 0.6em; }
  /* the copyright joins the flow instead of being pinned to the bottom edge */
  .contact-copy {
    position: static;
    left: auto;
    bottom: auto;
    margin-top: clamp(56px, 16vw, 72px);
  }

  /* =======================================================================
     7. Project pages
     ======================================================================= */
  /* The desktop hero is a near-full-height portrait box with object-cover, which
     on a phone throws most of a 16:9 composition away. Here the media sits in
     the flow at the asset's own proportion, so every hero is shown complete —
     including the two projects that already ship an art-directed portrait
     asset (Access Club, Let's Talk). */
  .pj-hero { min-height: 0; }
  .pj-hero-media {
    position: static;
    inset: auto;
    margin: calc(var(--mobile-nav-safe) + 16px) var(--mobile-gutter) 0;
    border-radius: 16px;
  }
  .pj-hero-media img,
  .pj-hero-media video,
  .pj-hero-media picture {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .pj-hero-media img,
  .pj-hero-media picture { display: block; }
  /* Let's Talk ships two hero videos and the page toggles them by width. A
     blanket display:block here showed both at once, so the toggle is restated
     rather than overridden. */
  .pj-hero-media video.hero-vid--mobile { display: block; }
  .pj-hero-media video.hero-vid--desktop { display: none; }

  .pj-intro { padding: clamp(64px, 18vw, 72px) var(--mobile-gutter) clamp(64px, 18vw, 80px); }
  .pj-intro > div { gap: clamp(56px, 15vw, 64px); }
  .pj-intro .grid { grid-template-columns: 1fr; gap: clamp(40px, 11vw, 48px); }
  .pj-intro span.text-sm { font-size: 12.5px; }
  .pj-intro p.text-2xl { font-size: clamp(24px, 6.8vw, 30px); line-height: 1.16; }
  .pj-intro li { min-height: 52px; }
  .pj-intro li span { font-size: clamp(14px, 3.9vw, 16px); overflow-wrap: anywhere; }
  .pj-intro li span:last-child { text-align: right; padding-left: 12px; }
  /* Scope rows. The desktop grid collapses to one column here, which stacked
     each service name above its number and made every row 182px tall. Two
     columns put the number back on the name's line; !important is needed only
     to beat the hover variant on the same element, and is scoped to this list. */
  .pj-intro li.group\/list-item {
    /* the row is arrow / name / number — three tracks, the arrow collapsed */
    grid-template-columns: 0px minmax(0, 1fr) auto !important;
    align-items: center;
    column-gap: 16px;
    min-height: 52px;
    padding-block: 14px;
  }
  .pj-intro li.group\/list-item > span { font-size: clamp(17px, 4.7vw, 20px); }
  .pj-intro li.group\/list-item > span:last-child { text-align: right; white-space: nowrap; }

  .pj-seemore { padding: clamp(72px, 20vw, 80px) var(--mobile-gutter) 0; }
  .pj-seemore h2 { font-size: clamp(32px, 9vw, 40px); margin-bottom: 24px; }
  .pj-seemore .group\/row { flex-direction: column; height: auto; gap: 14px; }
  /* Hover-driven flex expansion is meaningless on touch. The column carries no
     ratio of its own: it holds the card AND the caption, so a fixed ratio makes
     the caption spill out of the box in engines that treat aspect-ratio as a
     hard size, and the next column then lands on top of it. The ratio belongs to
     the media alone; the column is a plain flow block. */
  .pj-seemore .group\/row > div {
    flex: none !important;
    aspect-ratio: auto !important;
    height: auto;
    min-height: 0;
    padding: 0;
    width: 100%;
  }
  .pj-seemore .group\/row > div + div { margin-top: 14px; }
  .pj-seemore .group\/row > div > div { height: auto; }
  .pj-seemore [data-work-card] {
    flex: none;
    display: block;
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .pj-seemore [data-work-card] > div { height: 100%; }
  .pj-seemore p { font-size: clamp(22px, 6.2vw, 28px); margin-top: 10px; }

  /* =======================================================================
     8. Private project gates — MOTJ and Pagaya
     ======================================================================= */
  .proj-gate { overflow: clip; }
  .proj-gate__media { width: 100%; }
  .proj-gate__card {
    width: calc(100vw - 32px);
    max-width: none;
    margin-inline: auto;
    padding: 22px;
    border-radius: 16px;
    top: clamp(96px, 22vh, 150px);
  }
  .proj-gate__row { flex-direction: column; gap: 10px; }
  .proj-gate__input,
  .proj-gate__btn { width: 100%; min-height: 48px; font-size: 16px; }
  .proj-gate__err { min-height: 1.2em; }

  /* =======================================================================
     9. ABRA KADABLUE marquee — the mask is the only overflow boundary
     ======================================================================= */
  .mq-mask { overflow: clip; max-width: 100%; }
  .mq-track { will-change: transform; }
  /* the cadence is set in the page's own <style>, which loads after this file */

  /* =======================================================================
     10. Reflect for Education embed
     ======================================================================= */
  .embed-shell { width: 100%; max-width: 100%; height: calc(100svh - var(--mobile-nav-height)); }
  .embed-shell > iframe { width: 100%; height: 100%; display: block; border: 0; }

  /* =======================================================================
     11. Footer
     ======================================================================= */
  .ft-inner { padding: clamp(48px, 13vw, 56px) 20px 0; }
  .ft-nav { grid-column: 1 / -1; }
  .ft-navlinks a { font-size: clamp(28px, 8vw, 34px); line-height: 1.12; min-height: 44px; display: flex; align-items: center; }
  .ft-text, .ft-links a, .ft-copy, .ft-credit { font-size: clamp(14px, 3.9vw, 15px); line-height: 1.45; }
  .ft-wordmark-wrap { overflow: clip; max-width: 100%; }
  .ft-logo { max-width: 100%; }

  /* one column on the narrow phones, two only where nothing compresses */
  .ft-cols { grid-template-columns: 1fr; }
  @media (min-width: 390px) {
    .ft-cols { grid-template-columns: 1fr 1fr; }
  }

  /* =======================================================================
     12. Floating chat
     ======================================================================= */
  #chat-window-position {
    left: var(--mobile-gutter);
    right: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  #chat-window-content > div { width: min(384px, calc(100vw - 32px)); }
  #chat-window-wrapper { max-height: calc(100dvh - 84px); }

  /* =======================================================================
     Interaction — nothing may depend on hover, and the custom cursor label is
     meaningless without a pointer.
     ======================================================================= */
  .fp-cursor { display: none !important; }
}

@media (pointer: coarse) {
  .fp-cursor { display: none !important; }
  /* the blend-difference dot follows a pointer that does not exist */
  .cursor-none > .mix-blend-difference { display: none !important; }
  .cursor-none, .cursor-none * { cursor: auto !important; }
}