/* css/mobile.css — mobile site, fully prefixed with m-* to isolate from desktop.
   Loaded only inside the .m-mobile-only wrapper in index.html.
*/
/* mobile scratch — hero only
   Selectors mirror mobile-autonomous so we can bridge.
   Zones:
     <402   : browser shrinks (min-width on body)
     402–478: fluid; only .m-hero-img-cover stretches with width
     478–767: aspect-locked 478:910, scales with viewport height, centered
*/

/* tokens */
:root {
  --m-c-text: #333;
  --m-c-sub: #666;
  --m-c-mute: #999;
  --m-c-divider: #e6e6e6;
  --m-c-card: #f5f5f5;
  --m-c-bg: #fff;
}

.m-mobile-only, .m-mobile-only *, .m-mobile-only *::before, .m-mobile-only *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Toggle: hidden on desktop, shown on mobile */
.m-mobile-only { display: none; }

@media (max-width: 767px) {
  /* Hide all desktop sections */
  body > :not(.m-mobile-only) { display: none !important; }

  /* Show mobile */
  .m-mobile-only {
    display: block;
    width: 100%;
    min-height: 100vh;
    background: #f5f5f5;
    color: var(--m-c-text);
    font-family: Inter, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
}

.m-mobile-only a { color: inherit; text-decoration: none; }
.m-mobile-only img { display: block; max-width: 100%; }
.m-link { display: block; }

/* ------------------------------------------------------------------
   Hero section frame
------------------------------------------------------------------ */
.m-hero-section {
  position: relative;
  width: 100%;
  max-width: 478px;
  height: 100vh;
  min-height: 710px;
  max-height: 910px;
  margin-inline: auto;
  background: var(--m-c-bg);
  overflow: clip;
}

/* Below 402px (iPhone 13 mini = 375px), the hero's absolute children
   (heading, image at top: 544px, etc.) don't fit in the 710–910 clamp.
   Drop the clamp and let the section grow vertically — user scrolls a
   bit more, but nothing gets cropped. */
@media (max-width: 401px) {
  .m-hero-section {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  /* Image's absolute top relies on the section being ~710px tall; give
     the section a content-driven height by reserving room for the image. */
  .m-hero-img,
  .m-hero-img-cover { position: absolute; }
  /* Reserve vertical room: image starts at 544px, is 459px tall, plus 26px breathing = 1029px */
  .m-hero-scaler { min-height: 1029px; }
}

/* ------------------------------------------------------------------
   Nav (top of hero)
------------------------------------------------------------------ */
.m-wip-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  min-height: 32px;
  background: #333;
  color: #fff;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -.18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 18px;
}

.m-nav {
  padding: 28px 28px 0;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -.18px;
}

.m-nav-l {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.m-steph-zhao,
.m-independent-designer {
  display: flex;
}

.m-steph-zhao { color: var(--m-c-text); }
.m-responsive-body-text,
.m-nav-link-2.m-inde { line-height: 20px; }

.m-dash-1o,
.m-nav-divider { color: var(--m-c-divider); }
.m-dash-1o { display: none; }   /* hidden on mobile, like mobile-autonomous */

.m-nav-link-2,
.m-nav-link-2.m-inde { color: var(--m-c-mute); font-weight: 400; }

/* nav-m + nav-r are desktop-only; hidden on mobile */
.m-nav-m,
.m-nav-r,
.m-nav-r-copy { display: none; }

/* mobile menu icon */
.m-div-block-28 { display: none; }
.m-div-block-28 img { width: 100%; height: 100%; }

/* ------------------------------------------------------------------
   Heading
------------------------------------------------------------------ */
.m-heading {
  position: absolute;
  top: 125px;
  left: 28px;
  width: calc(100% - 56px);
  max-width: 405px;
  letter-spacing: -.044em;
  z-index: 2;
}

.m-heading-text {
  color: var(--m-c-text);
  font-family: Inter, sans-serif;
  font-size: clamp(39.64px, 9.86vw, 42px);
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -.044em;
}

.m-heading-cover { display: none; }   /* desktop animation overlay */

/* ------------------------------------------------------------------
   Work-list (PWBA) — Product / Brand / Web etc.
------------------------------------------------------------------ */
.m-pwba-gsapvariant {
  position: absolute;
  top: 407px;
  left: 28px;
  width: 290px;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: 14px;
  row-gap: 3px;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -.018px;
}

.m-pwba-item {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -.018px;
  color: var(--m-c-sub);
}
.m-pwba-item.m-anything,
.m-pwba-item.m-anywhere,
.m-pwba-item.m-with { color: var(--m-c-mute); }
.m-pwba-item.m-sf,
.m-pwba-item.m-anywhere { display: block; }

.m-nav-divider.m-pwba-item { color: var(--m-c-divider); letter-spacing: normal; }
.m-nav-divider.m-pwba-item.pt {
  display: block;
  color: #a1a1a1;
  font-size: 13px;
  padding-right: 1px;
  letter-spacing: normal;
}

.m-wfa-rowbreak {
  flex-basis: 100%;
  height: 0;
  display: block;
}

.m-wfa-inline { display: block; }
a.m-wfa-inline { display: inline-block; }

/* hero-wfa is the desktop variant; hidden on mobile */
.m-hero-wfa,
.m-hero-line { display: none; }

/* ------------------------------------------------------------------
   Photo: card behind, portrait in front bleeding past card bottom
------------------------------------------------------------------ */
.m-hero-img-cover {
  position: absolute;
  top: 497px;
  bottom: 26px;
  left: 28px;
  right: 28px;
  background-color: var(--m-c-card);
  border-radius: 1px;
  z-index: 0;
  /* Grow downward 60px on scroll. Tied to first 80px of scroll, reversible. */
  animation: m-hero-card-grow linear both;
  animation-timeline: scroll(root);
  animation-range: 0 80px;
}

@keyframes m-hero-card-grow {
  to { bottom: -34px; }    /* 26 - 60 */
}

@supports not (animation-timeline: scroll()) {
  .m-hero-img-cover { animation: none; }
}

.m-hero-img {
  position: absolute;
  top: clamp(544px, calc(100% - 322px), 588px);
  left: 28px;
  width: 342px;
  height: 459px;
  max-width: none;
  object-fit: cover;
  object-position: 50% -60px;
  background-color: #fbfbfb;
  mix-blend-mode: darken;
  z-index: 1;
  overflow: clip;
}

.m-hero-img-backing,
.m-hero-img-backing-cover { display: none; }

/* ------------------------------------------------------------------
   Scale-up zone: 478–767, lock aspect to viewport height
------------------------------------------------------------------ */
.m-hero-scaler {
  /* Pass-through wrapper. Normal flow at <478 (where it's just inheriting). */
  width: 100%;
  height: 100%;
}

@media (min-width: 478px) and (max-width: 767px) {
  .m-mobile-only { align-items: flex-start; }

  /* Default: width 478, height tracks viewport, clamped to 710–1000 */
  .m-hero-section {
    width: 478px;
    max-width: 100vw;
    height: clamp(710px, 100vh, 1000px);
    min-height: 0;
    max-height: none;
  }
}

/* Once viewport height ≥1000, lock 478:1000 aspect and scale up — but
   never let the scaled width exceed viewport width. */
@media (min-width: 478px) and (max-width: 767px) and (min-height: 1000px) {
  .m-hero-section {
    width: min(calc(100vh * 478 / 1000), 100vw);
    height: min(100vh, calc(100vw * 1000 / 478));
  }
  .m-hero-scaler {
    width: 478px;
    height: 1000px;
    transform: scale(min(calc(100vh / 1000px), calc(100vw / 478px)));
    transform-origin: top left;
  }
}

/* ==================================================================
   .m-mobilework — section below the hero (Information + Clients + CTA)
   Lifted from main's @media(max-width:767px) block.
================================================================== */
@media (max-width: 767px) {
  .m-mobile-only { display: block; }   /* override the hero-only flex centering */
}

.m-mobilework {
  z-index: 5;
  background-color: #fff;
  max-width: 480px;
  margin: auto;
  padding-top: 118px;
  display: block;
  position: relative;
}

.m-mobilework-scaler { width: 100%; }

/* Scale-up zone: match hero's effective scale exactly, including the
   "never exceed viewport width" cap. Hero scale = min(100vh/1000, 100vw/478). */
@media (min-width: 478px) and (max-width: 767px) and (min-height: 1000px) {
  .m-mobilework {
    zoom: min(calc(100vh / 1000px), calc(100vw / 478px));
  }
}

.m-itnro {
  display: flex;
  flex-flow: column;
  gap: 12px;
  margin-inline: 28px;
  letter-spacing: -.47px;
}

.m-titl {
  color: #333;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -.47px;
}

.m-m-w-bio {
  color: #666;
  text-align: left;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -.18px;
}

.m-m-w-bio.m-muted { color: var(--m-c-mute); }

.m-desktop-case-card {
  width: calc(100% - 56px);
  min-height: 126px;
  margin: 112px 28px 0;
  padding: 36px 32px 30px;
  background: #fafafa;
  border-radius: 8px;
}

.m-desktop-case-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 26px;
}

.m-desktop-case-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.m-desktop-case-text {
  color: #666;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -.18px;
}

.m-desktop-case-text span { color: #333; }

.m-text-block-14 {
  color: #111;
  flex: 1;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}

.m-text-block-14.m-about {
  color: #333;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -.18px;
}

.m-text-block-14.m-ee {
  text-align: left;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .2px;
}

.m-text-block-14.m-rmore {
  color: #333;
  margin-top: 30px;
  font-weight: 400;
}

.m-text-span-2 { letter-spacing: 0; }
.m-text-span-3 { color: #c2c2c2; }

/* clients block */
.m-div-block-27 {
  margin-inline: auto;
  padding-top: 100px;
  padding-bottom: 100px;
}

.m-m-client-list-blurb {
  margin-inline: 28px;
  display: flex;
  flex-flow: column;
  gap: 12px;
  max-width: 600px;
}

.m-m-clinet1 {
  margin-top: 24px;
  margin-bottom: 76px;
}

.m-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 220px;
  margin-bottom: 32px;
  background-color: #111010;
  border-radius: 2px;
}

.m-logo-wrap.m-pr   { background-color: #03091d; }
.m-logo-wrap.m-clay {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  margin-bottom: 0;
}
.m-logo-wrap.m-od   { background-color: #1143dd; }
.m-logo-wrap.m-pb   { background-color: #f9f9fa; border: 1px solid #eeeef1; }
.m-logo-wrap.m-mj   { background-color: #fff; border: 1px solid #e6e6e6; }
.m-logo-wrap.m-ib   { background-color: #343434; }
.m-logo-wrap.m-r    { background-color: #fafdff; border: 1px solid #e1f3ff; }
.m-logo-wrap.m-pw   { background-color: #181818; }
.m-logo-wrap.m-lit  {
  background-image: url('../images/litbg.png');
  background-position: 0 0;
  background-size: cover;
}
.m-logo-wrap.m-o    { background-color: #ff928a; }
.m-logo-wrap.m-ttfm { background-image: linear-gradient(117deg, #351140, #120616); }
.m-logo-wrap.m-pmr  { background-color: #fff; border: 1px solid #ececec; }

.m-mlogo {
  position: absolute;
  max-width: 70%;
  margin: 0 auto;
}

.m-image-18 { width: 160px; }
.m-image-21 { width: 120px; }

.m-m-w-bio-copy {
  color: #666;
  max-width: 95%;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -.18px;
}
.m-m-w-bio-copy .m-clientnam {
  color: #000;
  font-weight: inherit;
}

.m-div-block-23 {
  margin-bottom: 8px;
  display: flex;
}

.m-text-block-14-copy {
  text-align: right;
  flex: 1;
  display: none;            /* main hides this on mobile */
  letter-spacing: -.13px;
}

.m-div-block-26 { margin-top: 20px; }

/* last "divier" client block */
.m-divier {
  opacity: .17;
  background-color: #000;
  width: 100%;
  height: 1px;
  margin-bottom: 6px;
}
.m-mclientlist-logo {
  margin-top: 40px;
  margin-bottom: 10px;
}

/* CTA block */
.m-div-block-25 {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  max-width: 480px;
  height: 100vh;
}

.m-titl-copy {
  color: #4b4b4b;
  width: fit-content;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -.59px;
}

.m-text-block-16-copy { color: #5f5f5f; }