/* =========================================================
   MOBILE LAYER
   Loaded last, on every page. Everything except the welcome gate is
   scoped to (max-width: 760px) so the desktop layout is untouched.
   ========================================================= */

/* ---------------------------------------------------------
   1. The welcome gate (injected by mobile-gate.js)
   --------------------------------------------------------- */

html.gate-on,
html.gate-on body {
  overflow: hidden;
  height: 100%;
}

.mgate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background: var(--paper, #fff8df);
  color: var(--ink, #101417);
  transition: transform 720ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 420ms ease;
}

.mgate.is-out {
  transform: translateY(-102%);
  opacity: 0.9;
}

.mgate-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mgate-cloud {
  position: absolute;
  border-radius: 999px;
  background: rgb(16 20 23 / 0.07);
}
.mgate-cloud.c1 {
  top: 9%;
  left: -14%;
  width: 62%;
  height: 78px;
  animation: mgate-drift 15s linear infinite;
}
.mgate-cloud.c2 {
  top: 22%;
  right: -18%;
  width: 54%;
  height: 60px;
  animation: mgate-drift 21s linear infinite reverse;
}
.mgate-hill {
  position: absolute;
  left: -22%;
  right: -22%;
  bottom: 82px;
  height: 190px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: rgb(16 20 23 / 0.08);
}

@keyframes mgate-drift {
  from {
    transform: translateX(-8%);
  }
  to {
    transform: translateX(8%);
  }
}

.mgate-body {
  position: relative;
  z-index: 2;
  align-self: center;
  display: grid;
  gap: 14px;
  padding: 30px 22px 0;
}

.mgate-kicker {
  margin: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 460ms ease 160ms, transform 620ms cubic-bezier(0.2, 0.9, 0.2, 1) 160ms;
}

.mgate h1 {
  margin: 0;
  font-family: "MD Nichrome Test", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(34px, 10.5vw, 54px);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease 260ms, transform 720ms cubic-bezier(0.2, 0.9, 0.2, 1) 260ms;
}

.mgate-note {
  margin: 0;
  max-width: 34ch;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgb(16 20 23 / 0.74);
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease 380ms, transform 720ms cubic-bezier(0.2, 0.9, 0.2, 1) 380ms;
}

.mgate-actions {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease 500ms, transform 720ms cubic-bezier(0.2, 0.9, 0.2, 1) 500ms;
}

.mgate-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 3px solid var(--ink, #101417);
  border-radius: 999px;
  background: var(--yellow, #ffe680);
  color: var(--ink, #101417);
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 700;
  box-shadow: 5px 5px 0 var(--ink, #101417);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 200ms ease;
}
.mgate-go:hover {
  transform: translate(-1px, -1px);
  box-shadow: 7px 7px 0 var(--ink, #101417);
}
.mgate-go:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ink, #101417);
}

.mgate-alt {
  font-family: "Architects Daughter", "Patrick Hand", cursive;
  font-size: 15px;
  color: rgb(16 20 23 / 0.6);
}

.mgate.is-in .mgate-kicker,
.mgate.is-in h1,
.mgate.is-in .mgate-note,
.mgate.is-in .mgate-actions {
  opacity: 1;
  transform: none;
}

.mgate-road {
  position: relative;
  z-index: 2;
  height: 82px;
  background: linear-gradient(180deg, #22282c, #12171a);
  border-top: 3px solid var(--ink, #101417);
  overflow: hidden;
}

.mgate-dashes {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgb(255 248 223 / 0.85) 0 26px,
    transparent 26px 56px
  );
  animation: mgate-dash 0.55s linear infinite;
}

@keyframes mgate-dash {
  to {
    transform: translateX(-56px);
  }
}

.mgate-bike {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 42px;
  width: min(268px, 72vw);
  transform: translateX(-50%);
  animation: mgate-bob 0.62s ease-in-out infinite alternate;
}

.mgate.is-out .mgate-bike {
  animation: none;
  transform: translate(140%, 0) rotate(3deg);
  transition: transform 700ms cubic-bezier(0.35, 0, 0.65, 1);
}

@keyframes mgate-bob {
  from {
    transform: translateX(-50%) translateY(0) rotate(-0.6deg);
  }
  to {
    transform: translateX(-50%) translateY(-6px) rotate(0.6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mgate *,
  .mgate {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .mgate-bike {
    transform: translateX(-50%) !important;
  }
}

/* ---------------------------------------------------------
   2. Everything below: phones only
   --------------------------------------------------------- */

@media (max-width: 760px) {
  /* Real touch devices have no pointer to draw; a narrow window on a desktop
     (the Tweaks phone preview) still does, so keep the dot trackable there. */
  .hint-touch { display: inline; }
  @media (pointer: coarse) {
    .cursor-dot,
    .cursor-cta {
      display: none !important;
    }
  }

  @media (pointer: fine) {
    .cursor-cta {
      display: none !important;
    }
    .cursor-dot {
      display: block;
      mix-blend-mode: normal;
    }
  }

  /* only the hamburger stays in the header; Resume moves into the menu */
  .resume-link {
    display: none;
  }

  /* the chips shrink and gather in the sky above him */
  .chip-hint {
    top: auto;
    bottom: 4svh;
  }
  .hint-desk { display: none; }

  .intro-chip {
    padding: 7px 13px;
    font-size: 12.5px;
    gap: 6px;
  }
  .chip-emoji { font-size: 13px; }

  /* mirrored about the centre: left pair flush to one margin, right pair to the
     other, two even rows — a deliberate cluster instead of four loose offsets.
     Positioned with left/right only, so the reveal's transform stays intact. */
  .chip-l1 { left: 5%; right: auto; top: 9%; }
  .chip-r1 { left: auto; right: 5%; top: 9%; }
  .chip-l2 { left: 5%; right: auto; top: 21%; }
  .chip-r2 { left: auto; right: 5%; top: 21%; }
  /* only 4 chips on a phone: the other two would land on his face */
  .chip-l3,
  .chip-r3 { display: none; }

  /* recentred: his face landed right of frame-centre at cover crop */
  .intro-photo { object-position: 100% 100%; }

  /* the note sits in the gap between the last chip row and his hair */
  .intro-name {
    left: 16%;
    right: 16%;
    top: 33.5%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }
  .intro-name-txt { font-size: 17px; }
  .intro-name-arrow {
    order: 1;
    width: 26px;
    transform: rotate(4deg);
  }

  /* --- hero: one full screen, content centred, cue on the floor --- */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    padding: 88px 0 26px;
  }

  .hero-stage {
    min-height: 0;
    padding: 0 22px;
    margin-block: auto;
  }

  .headline {
    gap: 4px;
  }

  /* the handwritten aside earns its place on a phone too */
  .hero-aside {
    margin: 20px 0 0 2px;
  }
  .hero-aside-txt {
    font-size: 17px;
  }

  .scroll-cue {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 0 auto;
  }

  /* the menu's own resume entry reads like the numbered links above it */
  .menu-resume {
    margin-top: 4px;
    color: inherit;
  }
  .menu-resume span:first-child {
    display: inline-block;
    width: 1.6em;
    opacity: 0.6;
  }

  /* on a phone the line may wrap onto three; nothing gets clipped */
  .headline h1 > span,
  .headline strong {
    font-size: clamp(36px, 12vw, 62px);
    white-space: normal;
    text-wrap: balance;
  }
  .headline h1 > span br { display: none; }





  /* --- statement: shorter pin, tighter type --- */
  .statement {
    height: 150svh;
  }

  .statement-copy {
    font-size: clamp(26px, 8vw, 40px);
  }

  .statement-sub {
    font-size: clamp(15px, 4.2vw, 19px);
  }

  /* --- work cards: title block, then the visual --- */
  .work-info h3 {
    font-size: clamp(26px, 8.2vw, 38px);
  }

  .work-link {
    width: 100%;
    justify-content: center;
  }

  /* a taller stage so the screenshots are actually readable on a phone */
  .work-media,
  .work-media.has-scenes {
    aspect-ratio: 4 / 5;
  }

  .ws-scene {
    gap: 12px;
    padding: 16px 14px;
  }

  .ws-anno span {
    font-size: 15px;
  }

  .ws-arrow {
    width: 34px;
  }

  /* --- the ride keeps its horizontal concept: one full screen, pinned while
         the six stops are swiped past the parked rider, then it lets go --- */
  .ride {
    height: 100svh;
    --road-h: 108px;
  }

  .ride-sticky {
    position: relative;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 0 var(--road-h);
  }

  .ride-hud {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    padding: max(96px, calc(74px + 4svh)) 20px 2px;
    text-align: left;
  }

  .ride-hud h2 {
    font-size: clamp(32px, 10vw, 50px);
  }

  .ride-odo {
    position: absolute;
    top: max(96px, calc(74px + 4svh));
    right: 20px;
    left: auto;
    z-index: 12;
  }

  /* the ambient sky comes along too, just lighter so the cards still pop */
  .ride-sky {
    opacity: 0.6;
  }
  .hill-1,
  .hill-2 {
    height: 12svh;
  }

  .ride-cue,
  .km,
  .stop-post {
    display: none !important;
  }

  /* the swipeable row of stops: takes the rest of the pinned screen, cards
     given real breathing room instead of crowding each other */
  .ride-track {
    position: static;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 44px;
    width: 100%;
    height: auto;
    transform: none !important;
    padding: 8px 13vw 168px;
    touch-action: pan-x;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .ride-track::-webkit-scrollbar {
    display: none;
  }

  .stop {
    position: relative;
    flex: 0 0 74vw;
    left: auto !important;
    top: auto;
    bottom: auto;
    width: auto;
    /* one shared height for every card, sized to content, not a fixed slot */
    height: auto;
    max-height: 46svh;
    opacity: 1;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .stop-card {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 1 !important;
    transform: none !important;
  }

  /* the company name lives in the card (no road sign on a phone) */
  .stop-card::before {
    content: attr(data-company);
    display: block;
    font-family: "MD Nichrome Test", "Arial Narrow", Impact, sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(16 20 23 / 0.55);
  }

  .stop-card .stop-role {
    font-size: clamp(19px, 5.6vw, 24px);
  }

  .stop-note {
    font-size: 13.5px;
    line-height: 1.5;
  }

  /* the road belongs to the stage, not the scroller (a child of the scroller
     would slide away with the cards) */
  .ride-road {
    display: none;
  }

  .ride-sticky::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--road-h);
    border-top: 3px solid var(--ink);
    background: linear-gradient(180deg, #22282c, #12171a);
  }

  .ride-sticky::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 46px;
    height: 5px;
    background: repeating-linear-gradient(
      90deg,
      rgb(255 248 223 / 0.8) 0 24px,
      transparent 24px 52px
    );
    animation: road-roll 0.9s linear infinite;
  }

  @keyframes road-roll {
    to {
      transform: translateX(-52px);
    }
  }

  /* the rider: parked dead centre, riding on the strip, sized to actually read */
  .ride-bike {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: calc(var(--road-h) - 26px);
    top: auto;
    width: min(248px, 62vw);
    transform: translateX(-50%);
    animation: bike-idle 0.6s ease-in-out infinite alternate;
  }

  @keyframes bike-idle {
    from {
      transform: translateX(-50%) translateY(0) rotate(-0.5deg);
    }
    to {
      transform: translateX(-50%) translateY(-4px) rotate(0.5deg);
    }
  }

  .speed-lines,
  .dust {
    display: none;
  }

  /* the hints are chips sitting on the road itself, where they can be read */
  .ride-swipe,
  .ride-continue {
    position: absolute;
    left: 50%;
    bottom: 30px;
    z-index: 9;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--ink);
    font-family: "Architects Daughter", "Patrick Hand", cursive;
    font-size: 15px;
    color: var(--ink);
    white-space: nowrap;
    transition: opacity 300ms ease;
  }

  .ride-continue {
    opacity: 0;
    pointer-events: none;
  }

  .ride-sticky.swiped .ride-swipe {
    opacity: 0;
  }

  .ride-sticky.ride-done .ride-continue {
    opacity: 1;
    animation: ride-continue-bob 1.1s ease-in-out infinite;
  }

  @keyframes ride-continue-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(4px); }
  }

  /* --- why google --- */
  .reason-title {
    font-size: clamp(21px, 6.2vw, 27px);
  }

  /* --- logo loop --- */
  .diff-logo {
    padding: 8px 14px 8px 8px;
  }
  .diff-logo img {
    width: 36px;
    height: 36px;
  }
  .diff-logo > span {
    font-size: 17px;
  }
  .diff-tag {
    font-size: 9px;
    padding: 3px 7px;
  }

  /* --- testimonials --- */
  .voice-grid {
    grid-template-columns: 1fr;
    width: min(1100px, calc(100% - 40px));
  }

  .voice-card.is-featured blockquote {
    font-size: clamp(19px, 5.6vw, 25px);
  }

  .voice-card blockquote {
    font-size: 15.5px;
  }

  /* --- contact --- */
  .contact-stage {
    padding-inline: 20px;
  }

  .contact-actions {
    display: grid;
    gap: 10px;
    width: 100%;
  }

  .contact-actions > a {
    justify-content: center;
    width: 100%;
  }

  /* the handwritten corner note is desktop-only decoration: on a phone it crowds
     the headline it sits beside */
  .contact-corner.corner-r { display: none; }

  /* --- generous tap targets everywhere --- */
  .menu-link,
  .resume-link,
  .menu-toggle,
  .primary-action,
  .secondary-action {
    min-height: 46px;
  }
}

/* ---------------------------------------------------------
   3. Case study pages: the chapter rail becomes a bottom bar
   --------------------------------------------------------- */

@media (max-width: 760px) {
  .cs-topnav {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgb(255 248 223 / 0.94);
    backdrop-filter: blur(10px);
    border-top: 3px solid var(--ink);
    border-bottom: none;
    box-shadow: 0 -6px 20px rgb(16 20 23 / 0.14);
    transform: translateY(110%);
  }

  body.past-intro .cs-topnav {
    transform: none;
  }

  .cs-topnav .cs-topnav-brand {
    display: none;
  }

  .cs-topnav-scroll {
    width: 100%;
    padding: 2px 2px 4px;
  }

  .cs-topnav .cs-chip,
  .cs-topnav .cs-chip.is-active {
    min-height: 44px;
    padding: 8px 15px;
  }

  /* the bar must never cover the last words of the case */
  .cs-main {
    padding-bottom: 124px;
  }

  .cs-close {
    top: 10px;
    right: 10px;
  }
}

/* ---------------------------------------------------------
   4. Case study interiors that were built for a wide canvas
   --------------------------------------------------------- */

@media (max-width: 760px) {
  /* nothing inside a case may push the page sideways */
  .cs-main,
  .cs-sec,
  .ts-beat {
    overflow-x: clip;
  }

  /* the five-gate stack: one clean column, illustration in its own band */
  .bp-sec-titles {
    flex-direction: column;
    gap: 10px;
  }

  .bp-sec-stage {
    overflow: hidden;
    gap: 18px;
  }

  .bp-sec-tower {
    height: clamp(280px, 66vw, 380px);
    margin-top: 10px;
  }

  .bp-sec-desc {
    min-height: 78px;
  }

  /* the variable map is a real table, let it scroll inside its own box
     rather than be clipped */
  .bp-varmap {
    display: block;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .bp-varmap::-webkit-scrollbar {
    display: none;
  }

  .bp-varmap-row {
    min-width: 460px;
  }

  /* long mono rows wrap instead of running off the edge */
  .bp-file {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
  }

  .ts-chatmsg,
  .bp-file,
  .bp-card {
    max-width: 100%;
  }
}


/* ---------------------------------------------------------
   5. Home footer: he was built for a wide frame
   --------------------------------------------------------- */

@media (max-width: 760px) {
  /* the two buttons were being squeezed to ~100px by the desktop corner width;
     on a phone the pitch block owns the full column */
  .contact-corner.corner-l {
    left: auto;
    width: min(100%, 420px);
    max-width: none;
    justify-items: stretch;
  }
  .contact-corner.corner-l .contact-copy {
    max-width: none;
    text-align: center;
  }
  .contact-actions > a {
    width: 100%;
    justify-content: center;
  }
  /* the grid inherits justify-content:center from the desktop rule, which stops
     an auto track from stretching — pin the column instead */
  .contact-corner.corner-l .contact-actions {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    width: 100%;
  }

  /* his raised arm used to run past the right edge and get sliced off by the
     stage's overflow; letterbox him instead so the whole cutout lands, still
     standing on the page's bottom edge */
  .contact-stage {
    --fig-h: clamp(250px, 68vw, 330px);
    padding-bottom: calc(var(--fig-h) + 14px);
  }
  .contact-portrait {
    left: 0;
    width: 100%;
    transform: none;
  }
  .contact-portrait img {
    object-fit: contain;
    object-position: 50% 100%;
  }
}

/* ---------------------------------------------------------
   6. Case studies: mobile stand-ins
   Blocks drawn for a wide canvas are replaced by one line of
   reasoning rather than shipped cramped or overlapping.
   --------------------------------------------------------- */

.cs-mnote { display: none; }

@media (max-width: 760px) {
  .cs-mhide { display: none !important; }

  .cs-mnote {
    display: block;
    width: min(100%, 560px);
    margin: 20px auto 26px;
    padding: 15px 17px;
    border: 2px dashed rgb(16 20 23 / 0.3);
    border-radius: 16px;
    background: rgb(16 20 23 / 0.035);
    font-family: "Architects Daughter", "Patrick Hand", cursive;
    font-size: 16px;
    line-height: 1.45;
    color: rgb(16 20 23 / 0.72);
    text-wrap: pretty;
  }
  .cs-mnote b {
    display: block;
    margin-bottom: 5px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(16 20 23 / 0.42);
  }
}

/* ---------------------------------------------------------
   7. Case studies: pinned sequences have to FIT the screen
   .cs-onb-pin is a 100svh sticky box with overflow:hidden, so
   anything taller than the phone was simply cut off.
   --------------------------------------------------------- */

@media (max-width: 760px) {
  .cs-onb-pin {
    padding: 24px 0 84px;
    gap: 12px;
    align-content: center;
    justify-items: center;
  }

  .cs-onb-media {
    min-height: 0;
    width: 100%;
  }

  /* size the mock by HEIGHT so the pin can never overflow; aspect-ratio does
     the width */
  .cs-onb-pin .cs-onb-phone,
  .cs-onb-pin .cs-jpimg-stack {
    width: auto;
    max-width: 100%;
    height: 44svh;
    max-height: 44svh;
  }

  .cs-onb-copy {
    gap: 10px;
    width: 100%;
    max-width: none;
    justify-self: start;
  }
  .cs-onb-copy .cs-para {
    font-size: 15px;
    line-height: 1.5;
  }

  /* the steps stay as a stepper for context, but only the live one carries
     its sentence — three full steps plus a phone never fit one screen */
  .cs-steps { gap: 6px; }
  .cs-steps .cs-step:not(.on) p { display: none; }
  .cs-steps .cs-step:not(.on) { opacity: 0.4; }
  .cs-steps .cs-step .cs-step-t { font-size: 15px; }
  .cs-steps .cs-step p { font-size: 14px; line-height: 1.45; }
}

/* ---------------------------------------------------------
   8. Case studies: small alignment/crop fixes
   --------------------------------------------------------- */

@media (max-width: 760px) {
  /* cover annotation was pinned to the right of the qualifier line, which puts
     it off the side of a phone */
  .cs-cover [data-anno] {
    width: auto !important;
  }
  .cs-cover [data-anno] > .cs-note.cs-anno {
    position: static !important;
    display: inline-flex;
    margin-top: 12px;
    white-space: normal !important;
  }

  /* ThoughtSpot: the floating variable track sat exactly where the chapter bar
     lives, so the two stacked on top of each other */
  .vd-track {
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;
  }

  /* ThoughtSpot: the five-plate tower needs ~380px and was clipped at 280 */
  .bp-sec-stage {
    overflow: visible;
    overflow-x: clip;
  }
  .bp-sec-tower {
    /* five isometric plates span ~482px whatever the box says; anything
       shorter clipped the top and bottom slabs clean off */
    height: clamp(430px, 124vw, 500px);
    margin-top: 4px;
  }
}