/* ============================================================
   undressed.socials — MOBILE
   One coherent phone design, not a shrunken desktop.
   Rules: one column · type steps down a size · sticky chrome
   becomes static · hover-only motion is disabled · touch
   targets never below 44px · spacing stays on 4/8/16/24/40.
   ============================================================ */

@media (max-width: 760px) {

  /* ---------- FOUNDATION ---------- */
  .st { overflow-x: clip; }
  .wrap, .st-nav, .st-foot { --page-margin: 22px; }
  .band { padding: clamp(56px, 9vh, 88px) 0; }
  .st .lead, .st .wd-note, .st .pkx-desc, .st .triple-d,
  .st .usp-d, .st .fw-step-d, .st .deck-desc, .st .team-bio,
  .st .story p, .st .story.one-col p, .st .legal-v p { max-width: none; }

  /* type steps down one notch so headlines never crowd the edge.
     The page header is the exception: it stays the largest type on the phone,
     well clear of the section headings, so header and content never read as
     the same level. Selectors match the base sheet's weight on purpose —
     anything lighter loses to it and the header silently shrinks. */
  .st .display.fs-hero, .st h1.display.fs-hero,
  .st-hero.sub .fs-hero, .st-hero.sub .display.fs-hero,
  .st-hero.sub h1.display.fs-hero { font-size: clamp(40px, 12.5vw, 62px); line-height: 1.04; }
  .st .display.fs-h1 { font-size: clamp(30px, 9.5vw, 48px); }
  .st-hero .display.fs-h1, .st-hero h1.display.fs-h1 { font-size: clamp(38px, 11.5vw, 56px); line-height: 1.06; }
  .st .ct-hero-h, .st h1.ct-hero-h { font-size: clamp(38px, 11.5vw, 56px); max-width: none; }
  .st .display.fs-h2 { font-size: clamp(26px, 8vw, 40px); }
  .st .statement-h, .st h1.statement-h { font-size: clamp(30px, 9vw, 44px); line-height: 1.12; }
  .st .display.fs-h3 { font-size: clamp(22px, 6.4vw, 32px); }
  .st .kick { font-size: 10px; letter-spacing: .2em; }
  .st .lead { font-size: 16px; line-height: 1.55; }

  /* ---------- NAV ---------- */
  /* EN / DE are buttons and pick up the 44px touch target below, the slash is a
     plain span: it needs the same box so all three sit on one line */
  .st-lang { align-items: center; }
  .st-lang span { transform: none; line-height: 1; opacity: .4;
    display: inline-flex; align-items: center; align-self: center; min-height: 44px; }
  .st-nav { padding: 18px var(--page-margin); }
  .st-logo { width: 148px; }
  .st-nav-links { display: none; }
  .st-burger { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
  .st-drawer { padding: 96px var(--page-margin) 40px; }
  .st-drawer a { font-size: clamp(30px, 9vw, 44px); }
  .st-drawer-foot { flex-direction: column; align-items: flex-start; gap: var(--gap-4); }

  /* floating chrome: the toggle sits top right, the CTA rides along bottom left.
     Both appear once the page has scrolled past the hero and the CTA parks
     itself on the footer edge via --float-lift instead of scrolling over it. */
  .st-menu-toggle { top: 12px; right: var(--page-margin); width: 48px; height: 48px; }
  .st-cta-pin {
    display: inline-flex; left: var(--page-margin); right: auto;
    bottom: calc(16px + var(--float-lift, 0px));
    padding: 12px 20px; gap: 8px; font-size: 14px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
  }

  /* ---------- HERO ---------- */
  .st-hero { min-height: auto; padding: 116px 0 clamp(40px, 7vh, 72px); justify-content: flex-start; }
  .st-hero.sub { min-height: auto; padding: 116px 0 clamp(32px, 5vh, 56px); }
  .st-hero-cta { flex-wrap: wrap; gap: var(--gap-3); }
  .st-hero-cta .btn { width: auto; padding: 15px 26px; }
  .st-hero-foot { gap: 8px 14px; font-size: 10px; }

  /* ---------- WHAT WE DO / USP ---------- */
  .wd { grid-template-columns: 1fr; gap: var(--gap-4); }
  .usp { grid-template-columns: 1fr; gap: var(--gap-3); }
  .usp-cell { min-height: 0; padding: var(--gap-4); }
  .usp-h { max-width: none; font-size: clamp(24px, 7vw, 34px); margin-bottom: var(--gap-3); }
  .usp-d { margin-top: var(--gap-3); }
  .usp-x { display: none; }

  /* ---------- PACKAGE EXPLORER ---------- */
  /* the five tabs become a swipeable rail so nothing squashes */
  .pkx-tabs {
    display: flex; grid-template-columns: none; gap: 8px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--page-margin));
    padding-inline: var(--page-margin); scrollbar-width: none;
  }
  .pkx-tabs::-webkit-scrollbar { display: none; }
  /* the stage takes sideways swipes to change package; the browser keeps the
     vertical axis so the page still scrolls normally through the section */
  .pkx-stage { touch-action: pan-y; }
  .pkx-tab { flex: 0 0 auto; scroll-snap-align: start; padding: 12px 18px; font-size: 13px; }
  .pkx-panel { min-height: 0; }
  .pkx-in { padding: var(--gap-4); }
  .pkx-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pkx-name { font-size: clamp(28px, 8.5vw, 40px); margin-top: var(--gap-4); max-width: none; }
  .pkx-desc { font-size: 15px; margin-top: var(--gap-4); }
  .pkx-cta { margin-top: var(--gap-4); }
  .pkx-cta .btn { width: 100%; text-align: center; }
  .pkx-dots { margin-top: var(--gap-3); }
  .pkx-dots { gap: 10px; }
  .pkx-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; }

  /* ---------- PACKAGE DECK (services) ---------- */
  /* Sticky layering needs scroll height a phone does not have. So the deck
     becomes an accordion: five equal rows stacked, one opens at a time. */
  .deck { position: static; height: auto !important; padding: 0;
    display: flex; flex-direction: column; gap: var(--gap-2); overflow: visible; }
  .deck-card {
    position: relative !important; top: auto !important;
    min-height: 0; max-height: none; transform: none !important;
  }
  .deck-in { overflow: visible; padding: var(--gap-5) var(--gap-4) var(--gap-4); }
  .deck-head { display: none; }

  /* the toggle sits UNDER the package as a full width bar */
  .deck-tap { display: inline-flex; align-items: center; justify-content: flex-start;
    gap: 8px; cursor: pointer; min-height: 40px; width: auto;
    margin-top: var(--gap-3); padding: 0; border: 0; background: none;
    color: currentColor; font-family: var(--font-body); font-weight: 400; font-size: 12px;
    text-transform: none; letter-spacing: 0; opacity: .7; }
  .deck-tap span:first-child { text-decoration: none; }
  .st .deck-plus, .deck-tap .deck-plus { display: none !important; }
  .deck-name { font-size: clamp(23px, 6.6vw, 30px); line-height: 1.15; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.3em; }
  .deck-body { display: flex; flex-direction: column; }
  .deck-plus { display: block; position: relative; flex: 0 0 22px; height: 22px; }
  .deck-plus::before, .deck-plus::after { content: ''; position: absolute; inset: 50% 0 auto 0;
    height: 1.5px; background: currentColor; transition: transform .3s cubic-bezier(.4,0,.2,1); }
  .deck-plus::after { transform: rotate(90deg); }
  .deck-card.open .deck-plus::after { transform: rotate(0deg); }

  /* closed by default, so all five rows start identical */
  /* the description teases its first lines; only the rest is collapsed */
  .deck-desc { font-size: 15px; line-height: 1.55; margin-top: var(--gap-4);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .deck-card.open .deck-desc { -webkit-line-clamp: unset; overflow: visible; }
  /* the buzzword tags stay visible; only the CTA is held back until opened */
  .deck-reveal { display: contents; }
  .deck-foot { display: block; margin-top: var(--gap-4); }
  .deck-deliv { margin-bottom: 0; }
  .deck-foot .btn { display: none; }
  .deck-card.open .deck-foot .btn { display: inline-flex; width: 100%; justify-content: center;
    min-height: 44px; padding: 13px 20px; margin-top: var(--gap-4); }
  .deck-who { margin-top: var(--gap-1); font-size: 10px; line-height: 1.5; }
  .deck-foot { margin-top: var(--gap-4); gap: var(--gap-3); padding-bottom: 2px; }
  .deck-deliv { gap: 6px; }
  .deck-deliv li { padding: 6px 11px; font-size: 10px; }
  .deck-deliv { gap: 7px; }
  .deck-foot .btn { width: 100%; text-align: center; padding: 13px 20px; }

  /* ---------- SYSTEM / FRAMEWORK ---------- */
  .triple { grid-template-columns: 1fr; gap: var(--gap-4); }
  .fw { grid-template-columns: 1fr; }
  .fw-index { position: static; margin-top: 0; }
  .fw-index-list { display: none; }
  .fw-step { min-height: 0; opacity: 1; padding: var(--gap-5) 0; }
  .fw-step-t { font-size: clamp(26px, 8vw, 38px); }

  /* ---------- AGENCY ---------- */
  .story-top { grid-template-columns: 1fr; }
  .story-portrait, .story-top > .story { grid-column: 1; grid-row: auto; }
  .story-portrait { margin-top: var(--gap-4); }
  .me-photo.tall { aspect-ratio: 3 / 4; height: auto; min-height: 0; max-width: none; }
  .story.one-col { margin-top: var(--gap-4); }
  .quote p, .story-top .quote p { font-size: clamp(24px, 7.5vw, 36px); max-width: none; }

  /* the curtain wipe keeps working on mobile, just over a shorter run */
  .statement-pin { min-height: 88svh; padding: clamp(40px, 7vh, 72px) 0; }
  .statement-in { padding-block: var(--gap-4); }
  .curtain-panel { min-height: 0; }

  .team { grid-template-columns: 1fr; gap: var(--gap-5); }
  .team-photo { aspect-ratio: 4 / 5; }

  /* ---------- PLAYGROUND ---------- */
  /* the physics field keeps its pills on touch: they drift on their own,
     so the section still feels alive without a cursor to push them */
  .pg { height: 78svh; min-height: 460px; padding: clamp(40px, 6vh, 64px) 0; margin: 0; display: grid; place-items: center; }
  .pg-pill { padding: 10px 16px; font-size: 12px; }
  .pg-cherry { width: clamp(64px, 20vw, 96px); height: clamp(64px, 20vw, 96px); }
  .pg-copy { padding: 0 var(--page-margin); justify-content: center; }
  .pg-copy .display { font-size: clamp(22px, 6.6vw, 32px); }
  .pg-hint { display: none; }

  /* ---------- CONTACT ---------- */
  .ct-hero { min-height: auto; padding: 116px 0 clamp(40px, 7vh, 72px); gap: var(--gap-5); }
  .ct-hero-h { font-size: clamp(30px, 9.5vw, 48px); max-width: none; }
  .ct-ask { font-size: clamp(19px, 5.6vw, 26px); }
  .ct-chips { gap: 8px; }
  .ct-chip { padding: 11px 16px; font-size: 13px; }
  .ct-form { grid-template-columns: 1fr; gap: var(--gap-3); }
  .ct-f.span2, .ct-f.span3, .ct-consent { grid-column: span 1; }
  .ct-f input, .ct-f textarea { font-size: 16px; padding: 14px 0; } /* 16px stops iOS zoom */
  .ct-submit .btn { width: 100%; text-align: center; padding: 17px 28px; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--gap-5); }
  .contact-meta .row a, .contact-meta .row span.v { font-size: clamp(20px, 6vw, 28px); }
  .triple-h.one-line { white-space: normal; font-size: clamp(18px, 5.4vw, 24px); }

  /* ---------- LEGAL ---------- */
  .legal-row { grid-template-columns: 1fr; gap: 10px; padding: var(--gap-4) 0; }
  .legal-t { font-size: clamp(18px, 5.4vw, 24px); }

  /* ---------- FOOTER ---------- */
  .st-foot { padding: clamp(32px, 6vw, 48px) var(--page-margin) 0; }
  .st-foot-grid { grid-template-columns: 1fr 1fr; gap: var(--gap-3); align-items: start; }
  .st-foot-col { gap: 2px; }
  .st-foot-col .h { font-size: 9px; margin-bottom: 4px; }
  .st-foot-col a, .st-foot-col .v { font-size: 14px; line-height: 1.3; min-height: 30px; }
  /* the reference block spans both columns so its button has room */
  .st-foot-sign { grid-column: 1 / -1; }
  .st-foot-note { display: none; }
  .st-foot-sign .h { display: none; }
  .st-foot-sign { margin-top: var(--gap-2); }
  .st-foot-brand { margin: 0 0 var(--gap-4); }
  .st-foot-mark { width: min(100%, 22ch); }
  .st-foot-req { width: auto; justify-content: flex-start; gap: 14px; padding: 14px 22px; margin-top: var(--gap-3); }
  /* the end block's negative bottom margin cancels the footer's bottom padding
     on desktop. Mobile sets that padding to 0, so the margin pulled the legal
     bar past the footer edge and overflow:hidden cut the last line off. */
  .st-foot-end { margin-inline: calc(-1 * var(--page-margin)); margin-bottom: 0; }
  .st-foot-bar { flex-direction: column; align-items: flex-start; gap: 10px; padding-inline: var(--page-margin); }
  .st-foot-legal { flex-wrap: wrap; gap: 8px 16px; }

  /* ---------- TOUCH TARGETS + MOTION ---------- */
  .st a, .st button, .st .btn { min-height: 44px; }
  /* the carousel dots are indicators, not buttons to size: the tap area comes
     from the row's padding, so the dot itself stays a 10px circle */
  .st .pkx-dot {
    min-height: 44px; height: 44px; width: 44px; flex: 0 0 44px;
    background: none; border-radius: 0; display: grid; place-items: center; opacity: 1;
  }
  .st .pkx-dot::before {
    content: ''; width: 10px; height: 10px; border-radius: 50%;
    background: currentColor; opacity: .25; transition: opacity .3s ease, transform .3s ease;
  }
  .st .pkx-dot.on::before { opacity: 1; transform: scale(1.35); }
  .st .pkx-dot.on { transform: none; }
  .pkx-dots { gap: 0; }
  .st-foot-col a, .st-foot-legal a { display: inline-flex; align-items: center; min-height: 40px; }
  /* the cherry cursor and the magnetic pull need a pointer; everything else
     that moves on scroll stays, so the phone keeps the brand's energy */
  .st-cursor { display: none; }
  .st, .st a, .st button, .st [data-mag], .st input, .st textarea, .st label { cursor: auto; }
  [data-mag] { transform: none !important; }

  /* ---------- EDGE TO EDGE ---------- */
  /* With viewport-fit=cover the page paints all the way into the status bar and
     the toolbar area, so iOS no longer frames it top and bottom with a strip of
     its own colour. These insets put the content back inside the safe area
     while the background keeps running underneath it. */
  .st-nav { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
  .st-hero, .st-hero.sub, .ct-hero { padding-top: calc(116px + env(safe-area-inset-top, 0px)); }
  .st-menu-toggle { top: calc(12px + env(safe-area-inset-top, 0px)); }
  .st-cta-pin { bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--float-lift, 0px)); }
  /* the filled bar is the last thing on the page, so it — not the footer's yellow —
     is what runs into the home indicator. Padding it keeps the legal line clear of
     the edge without opening a strip of another colour underneath. */
  .st-foot-end .st-foot-bar { padding-bottom: calc(clamp(18px, 2.6vh, 30px) + env(safe-area-inset-bottom, 0px)); }
}

/* very small phones: pull the largest type in one more step */
@media (max-width: 380px) {
  .st .display.fs-hero, .st h1.display.fs-hero,
  .st-hero.sub .fs-hero, .st-hero.sub .display.fs-hero,
  .st-hero.sub h1.display.fs-hero { font-size: clamp(34px, 11.5vw, 46px); }
  .st-hero .display.fs-h1, .st-hero h1.display.fs-h1,
  .st .ct-hero-h, .st h1.ct-hero-h { font-size: clamp(32px, 10.5vw, 42px); }
  .wrap, .st-nav, .st-foot { --page-margin: 18px; }
}

/* landscape phones: the hero must not eat the whole screen */
@media (max-height: 520px) and (orientation: landscape) {
  .st-hero, .st-hero.sub, .ct-hero { min-height: auto; padding-top: 96px; }
  .pg { height: auto; }
}

/* landscape is the one case where edge to edge would push text under the
   notch, so the side margins grow to clear it */
@media (max-width: 760px) and (orientation: landscape) {
  .wrap {
    padding-left: max(clamp(24px, 5vw, 88px), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(24px, 5vw, 88px), env(safe-area-inset-right, 0px));
  }
  .st-nav, .st-foot {
    padding-left: max(var(--page-margin), env(safe-area-inset-left, 0px));
    padding-right: max(var(--page-margin), env(safe-area-inset-right, 0px));
  }
  .st-menu-toggle { right: max(var(--page-margin), env(safe-area-inset-right, 0px)); }
  .st-cta-pin { left: max(var(--page-margin), env(safe-area-inset-left, 0px)); }
}

/* ---------- mobile: keep the layering + reveals alive ---------- */
@media (max-width: 760px) {
  .statement-pin { position: sticky; top: 0; }
  .curtain-panel { background: var(--surface); }
  .story-pin { position: sticky; top: clamp(72px, 11vh, 110px); }
}