/* Isolated Creators landing and directory styles. Legacy desktop models stay in css/our-models.css. */
.creators-mobile { display: none; }

@supports selector(html:has(body)) {
  html:has(body.models-page),
  html:has(body.all-creators-page) { scroll-behavior: smooth; }
}

.all-creators-main {
  padding: 170px 0 100px;
  background: #fff;
}

.all-creators-heading {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}

.all-creators-heading h1 {
  margin: 0;
  color: #17171c;
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -0.06em;
}

.creator-directory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.creator-tile {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: .72;
  background: #e7e2df;
  color: #fff;
  isolation: isolate;
}

.creator-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,10,0) 42%, rgba(8,8,10,.75) 100%);
}

.creator-tile__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .28s ease;
}

.creator-tile:hover .creator-tile__image { transform: scale(1.045); }

.creator-tile__copy {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.creator-tile__name {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.05;
}

.creator-tile__role {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.82);
  font-size: .78rem;
  font-weight: 600;
}

.creator-tile__arrow,
.creators-mobile__arrow {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: #19191d;
  font-size: 1.25rem;
  font-weight: 700;
}

@media (max-width: 1199.98px) {
  .creator-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  body.models-page #our-models,
  body.models-page #modelsModal { display: none !important; }

  .creators-mobile {
    display: block;
    overflow: hidden;
    /* Exactly the fixed header's height, so the hero photograph starts flush
       against it with no white sliver. */
    padding-top: 80px;
    background: #fff;
    color: #17171c;
  }

  .creators-mobile__inner {
    width: min(100% - 42px, 450px);
    margin: 0 auto;
  }

  /* Image-first hero. The photograph is the section: it begins immediately
     under the fixed header, runs the full width, and the copy sits on top of
     it in the safe lower-left corner. No white text panel, no gap above or
     below the picture. */
  .creators-mobile__hero {
    position: relative;
    padding: 0;
    isolation: isolate;
  }

  .creators-mobile__kicker,
  .creators-mobile__ai-kicker {
    display: block;
    margin-bottom: 14px;
    color: #fb4354;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  /* The hero eyebrow is an editorial byline, not a technical label: a touch
     larger, a weight lighter than the headline stack, and opened up on
     tracking so the caps read as spaced small caps rather than a chip.
     Scoped to the hero — the AI kicker above keeps its own settings. */
  .creators-mobile__hero .creators-mobile__kicker {
    margin-bottom: 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .17em;
  }

  .creators-mobile__title,
  .creators-mobile__section-title {
    margin: 0;
    color: #111116;
    font-size: clamp(2.55rem, 12.6vw, 3.35rem);
    font-weight: 800;
    letter-spacing: -.075em;
    line-height: .91;
  }

  /* Headline scale. The hero grows ~7% over the previous 12.6vw and the
     Featured heading follows one step below it, so the two stay a clear
     hierarchy rather than two sizes of the same thing. Tracking eases from
     -.075em to -.055em: still tight and premium, but the larger size no
     longer collides at the joins. Both are scoped away from the AI heading,
     which shares .creators-mobile__section-title and must not move. */
  .creators-mobile__title {
    font-size: clamp(2.7rem, 13.5vw, 3.6rem);
    letter-spacing: -.055em;
    line-height: .92;
  }

  .creators-mobile__featured .creators-mobile__section-title {
    font-size: clamp(2.15rem, 11.1vw, 2.75rem);
    letter-spacing: -.05em;
    line-height: .94;
  }

  /* The full stop is the one coral accent in the headline. The markup already
     wraps it in its own <span>; only the colour was missing. */
  .creators-mobile__title > span,
  .creators-mobile__featured .creators-mobile__section-title > span { color: #fb4354; }

  .creators-mobile__title em,
  .creators-mobile__section-title em,
  .creators-mobile__final-copy em { color: #fb4354; font-style: normal; }

  .creators-mobile__lede {
    max-width: 270px;
    margin: clamp(17px, 5vw, 22px) 0 clamp(21px, 6vw, 26px);
    color: #57575f;
    font-size: clamp(13px, 3.5vw, 14px);
    line-height: 1.48;
  }

  /* Hero description at a real reading size (16.4px at 390). The measure is
     set in em so it grows with the type and the copy keeps its two lines at
     360 / 390 / 430 instead of spilling to three. Hero only: the AI section
     shares this class and stays as authored. */
  .creators-mobile__hero .creators-mobile__lede {
    max-width: 20.5em;
    font-size: clamp(15.5px, 4.2vw, 17px);
    line-height: 1.5;
  }

  .creators-mobile__avatars {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin-bottom: 20px;
  }

  .creators-mobile__avatar {
    width: 31px;
    height: 31px;
    margin-right: -5px;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e6e1de;
  }

  .creators-mobile__avatar img { width: 100%; height: 100%; object-fit: cover; }
  .creators-mobile__more { margin-left: 12px; color: #55555c; font-size: 10px; font-weight: 700; }

  /* The photograph is the first screen: it starts flush under the 80px header
     and ends at the fold, so the hero is one whole screen rather than a
     picture with a second, empty screen after it. svh is the visible viewport
     on mobile — vh would overshoot by the height of the URL bar and push the
     bottom of the photo (and the copy on it) below the fold. The image never
     moves: no parallax, no transform, no transition on this element. */
  .creators-mobile__hero-image {
    display: block;
    width: 100%;
    height: clamp(548px, calc(100vh - 80px), 780px);
    height: clamp(548px, calc(100svh - 80px), 780px);
    overflow: hidden;
    background: #e9e3e0;
  }

  /* The crop is tuned against the real source (2752×1536, subject in the right
     third). At 360 / 390 / 430 the container is taller than the frame is wide,
     so cover scales by height and the whole height of the photograph is always
     in view — the crown and both eyes included. Only X is a real choice: 78%
     puts the face just right of centre with the hair clear of the right edge,
     and leaves the lower-left third — where the copy lands — on the dress
     rather than on her face. */
  .creators-mobile__hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 78% 12%;
  }

  /* Readability scrim. It is hidden until the copy is revealed, so the opening
     frame is the photograph exactly as shot — no filter over the picture. The
     gradient lifts only the corner the text sits in and is back to zero at 45%
     of the frame height, while her chin sits at 42%, so nothing about her face
     is dimmed. It fades in and out together with the copy. */
  .creators-mobile__hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background:
      linear-gradient(to top,
        rgba(9, 8, 14, .84) 0%, rgba(9, 8, 14, .76) 16%, rgba(9, 8, 14, .58) 28%,
        rgba(9, 8, 14, .36) 38%, rgba(9, 8, 14, .14) 46%, rgba(9, 8, 14, .04) 51%,
        rgba(9, 8, 14, 0) 55%);
    /* The mask is what keeps it a lower-LEFT gradient rather than a band across
       the frame: solid under the copy column, gone by the right edge, so her
       face and the light half of the picture are never touched. Where masks are
       unsupported this degrades to the same gradient full-width, which is still
       clear of the face. */
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 68%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 68%, rgba(0, 0, 0, 0) 100%);
    transition: opacity 360ms cubic-bezier(.22, .61, .36, 1);
  }

  body.creators-hero-revealed .creators-mobile__hero-scrim { opacity: 1; }

  .creators-mobile__hero-copy {
    position: absolute;
    right: 0;
    bottom: clamp(26px, 7vw, 34px);
    left: 0;
    z-index: 2;
    width: 74%;
    padding: 0 22px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 360ms cubic-bezier(.22, .61, .36, 1),
                transform 360ms cubic-bezier(.22, .61, .36, 1);
  }

  body.creators-hero-revealed .creators-mobile__hero-copy {
    opacity: 1;
    transform: none;
  }

  .creators-mobile__hero .creators-mobile__title { color: #fff; }
  .creators-mobile__hero .creators-mobile__kicker { margin-bottom: 12px; color: #ff6070; }

  .creators-mobile__hero .creators-mobile__lede {
    max-width: none;
    margin: 14px 0 18px;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(14px, 3.8vw, 15.5px);
    line-height: 1.45;
  }

  .creators-mobile__hero .creators-mobile__avatars { margin-bottom: 0; }
  .creators-mobile__hero .creators-mobile__avatar { border-color: rgba(255, 255, 255, .9); }

  .creators-mobile__hero .creators-mobile__more {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
  }

  /* The gap between the toggle and the AI chapter is one value, owned by the
     boundary rather than split across two paddings that add up. Featured ends
     flush with its button and the AI chapter opens the distance, so the rhythm
     is identical whether the extra ten cards are shown or not — nothing here
     is tied to the expanded state. */
  .creators-mobile { --creators-featured-rhythm: clamp(40px, 12vw, 56px); }

  .creators-mobile__featured {
    /* The seam between the hero photograph and this heading. Flat rather than a
       clamp: it is a fixed 28px at every width so the heading reads as attached
       to the cards below it instead of floating under the picture. */
    padding: 28px 0 0;
    content-visibility: auto;
    contain-intrinsic-size: 900px;
  }

  /* Stated outright even though the shared rule above already zeroes it: this
     heading sits directly against the section's padding, and a UA margin
     collapsing through would reopen the 28px seam by however much it is. */
  .creators-mobile__featured .creators-mobile__section-title { margin: 0; }
  .creators-mobile__section-title { font-size: clamp(2rem, 10.4vw, 2.55rem); }

  .creators-mobile__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(13px, 3.8vw, 17px);
    margin-top: clamp(26px, 7vw, 31px);
  }

  /* Section standfirst under the Featured heading. Deliberately not
     .creators-mobile__lede: that one is the hero's own measure and colour, and
     this sits a step quieter — regular weight, no coral, no italic. */
  .creators-mobile__section-sub {
    max-width: 30em;
    margin: 8px 0 0;
    color: #45445F;
    font-size: clamp(14px, 3.8vw, 15px);
    font-weight: 400;
    line-height: 1.5;
  }

  /* The grid's own top margin is the heading-to-cards rhythm when no
     standfirst is present; where one is, the standfirst owns that gap instead,
     so the two do not stack into an oversized band. Adjacent-sibling scoped, so
     the extra grid inside the show-more clip keeps its own spacing. */
  .creators-mobile__section-sub + .creators-mobile__grid {
    margin-top: clamp(22px, 6vw, 24px);
  }

  .creators-mobile__grid .creator-tile { border-radius: 13px; }
  .creators-mobile__grid .creator-tile__copy { right: 11px; bottom: 11px; left: 11px; }
  /* The name carries the card; the role steps back behind it. Scoped to this
     grid so the all-creators directory keeps its own sizes. */
  .creators-mobile__grid .creator-tile__name { font-size: 14.5px; letter-spacing: -.015em; }
  .creators-mobile__grid .creator-tile__role {
    margin-top: 4px;
    color: rgba(255,255,255,.76);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .02em;
  }
  .creators-mobile__grid .creator-tile__arrow { width: 27px; height: 27px; font-size: 1rem; }

  /* --- Show more / show fewer ------------------------------------------- */
  /* The extra creators live in a second copy of the same grid. The height
     animation runs on grid-template-rows 0fr -> 1fr on the wrapper, with the
     clip element supplying the overflow, so the cards keep their own sizes,
     gap and crop rules and nothing is scaled or faded into place.

     Collapsed the wrapper is visibility:hidden, which takes its links out of
     the tab order and the accessibility tree — opacity alone would leave them
     reachable. The visibility transition is delayed by the length of the
     collapse so the cards stay on screen while the height runs out. */
  .creators-mobile__extra {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      grid-template-rows 250ms cubic-bezier(.4, 0, .2, 1),
      opacity 250ms cubic-bezier(.4, 0, .2, 1),
      transform 250ms cubic-bezier(.4, 0, .2, 1),
      visibility 0s linear 250ms;
  }

  .creators-mobile__extra-clip {
    min-height: 0;
    overflow: hidden;
  }

  /* The gap above the extra row sits inside the clip, so it collapses with it. */
  .creators-mobile__grid--extra { margin-top: clamp(13px, 3.8vw, 17px); }

  .creators-mobile__featured.is-expanded .creators-mobile__extra {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      grid-template-rows 250ms cubic-bezier(.4, 0, .2, 1),
      opacity 250ms cubic-bezier(.4, 0, .2, 1),
      transform 250ms cubic-bezier(.4, 0, .2, 1),
      visibility 0s;
  }

  .creators-mobile__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: clamp(52px, 14vw, 58px);
    margin-top: clamp(31px, 8vw, 38px);
    padding: 0 21px;
    border: 1.5px solid #202026;
    border-radius: 999px;
    background: #fff;
    color: #202026;
    font-family: inherit;
    font-size: clamp(13px, 3.4vw, 14px);
    font-weight: 800;
    letter-spacing: -.005em;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  /* A hairline chevron, not a go-to-page arrow: two borders on a rotated box. */
  .creators-mobile__toggle-chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin: -4px 3px 0 12px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    transition: transform 250ms cubic-bezier(.4, 0, .2, 1);
  }

  .creators-mobile__featured.is-expanded .creators-mobile__toggle-chevron {
    margin-top: 4px;
    transform: rotate(225deg);
  }

  .creators-mobile__ai {
    padding: var(--creators-featured-rhythm) 0 clamp(50px, 14vw, 66px);
    background: #fff;
    content-visibility: auto;
    contain-intrinsic-size: 820px;
  }
  .creators-mobile__ai-kicker { color: #b68bff; }
  .creators-mobile__ai .creators-mobile__lede { margin-bottom: 21px; }
  .creators-mobile__ai-list { display: grid; gap: clamp(14px, 4vw, 18px); }

  .creators-mobile__ai-card {
    position: relative;
    display: block;
    height: clamp(132px, 35vw, 151px);
    overflow: hidden;
    border-radius: 14px;
    background: #dcd9d9;
    color: #fff;
  }

  .creators-mobile__ai-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18,18,24,.55), rgba(18,18,24,.04) 75%);
  }

  .creators-mobile__ai-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
  .creators-mobile__ai-copy { position: absolute; z-index: 1; bottom: 15px; left: 15px; }
  .creators-mobile__ai-copy strong { display: block; font-size: 14px; }
  .creators-mobile__ai-copy span { display: inline-flex; margin-top: 6px; padding: 3px 7px; border-radius: 5px; background: rgba(240,230,255,.93); color: #5a447a; font-size: 8px; font-weight: 800; }
  .creators-mobile__ai-card .creators-mobile__arrow { position: absolute; z-index: 1; top: 13px; right: 13px; width: 26px; height: 26px; font-size: 1rem; }

  /* The closing stage is one image-first layer, not a card on a background.
     No padding at the top: the visual opens the stage. The wash behind it
     carries the lavender of the picture and is pure white by the time the
     image has dissolved, so the fade lands on white and the headline reads as
     the continuation of the picture. */
  .creators-mobile__final {
    padding: 0 0 clamp(58px, 16vw, 76px);
    background: linear-gradient(180deg, #f6f3ff 0%, #f9f7ff 20%, #fff 38%, #fff 100%);
    content-visibility: auto;
    contain-intrinsic-size: 760px;
  }

  /* Full-bleed visual: edge to edge, no inset, no radius, no border, no
     shadow — nothing that would read as a separate tile. The bottom quarter
     is dissolved by a mask rather than by a white overlay, so the picture
     genuinely melts into the page instead of sitting under a scrim. */
  .creators-mobile__final-visual {
    width: 100%;
    aspect-ratio: 39 / 52;
    margin: 0;
    background: #f6f3ff;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%,
      rgba(0, 0, 0, .8) 64%, rgba(0, 0, 0, .42) 74%, rgba(0, 0, 0, .14) 82%,
      rgba(0, 0, 0, 0) 90%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 50%,
      rgba(0, 0, 0, .8) 64%, rgba(0, 0, 0, .42) 74%, rgba(0, 0, 0, .14) 82%,
      rgba(0, 0, 0, 0) 90%);
  }

  .creators-mobile__final-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 6%;
  }

  /* The bottom tenth of the visual is fully transparent by the time the mask
     ends, so the headline is pulled up into it: it starts where the picture has
     finished dissolving — never over a face, never with a blank band between
     the two. The pull is in vw, the same unit the visual's height scales with,
     so the headline lands at the same point of the dissolve at every width. */
  .creators-mobile__final .creators-mobile__inner {
    position: relative;
    margin-top: clamp(-56px, -11vw, -32px);
  }

  .creators-mobile__final-copy { margin: 0; color: #18181d; font-size: clamp(2rem, 10.5vw, 2.5rem); font-weight: 800; letter-spacing: -.07em; line-height: 1.02; }
  .creators-mobile__final-text { max-width: 280px; margin: 20px 0 0; color: #56565e; font-size: 14px; line-height: 1.55; }

  .all-creators-main { padding: 118px 0 70px; }
  .all-creators-heading { width: min(100% - 42px, 450px); margin-bottom: 28px; text-align: left; }
  .all-creators-heading h1 { font-size: clamp(2rem, 10.4vw, 2.5rem); letter-spacing: -.07em; }
  .all-creators-main .container { width: min(100% - 42px, 450px); padding: 0; }
  .creator-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .creator-tile { border-radius: 13px; }
  .creator-tile__copy { right: 11px; bottom: 11px; left: 11px; }
  .creator-tile__name { font-size: 13px; }
  .creator-tile__role { margin-top: 3px; font-size: 8px; }
  .creator-tile__arrow { width: 27px; height: 27px; font-size: 1rem; }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  /* The hero copy is present from the start; nothing fades or slides. The
     scrim comes with it — without it the white copy would sit unreadable on
     the light half of the photograph. */
  .creators-mobile__hero-copy {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .creators-mobile__hero-scrim {
    opacity: 1;
    transition: none;
  }

  .creator-tile__image { transition: none; }
  .creator-tile:hover .creator-tile__image { transform: none; }

  /* The reveal still opens and closes — it just arrives instead of animating.
     transform is dropped as well, so nothing slides. */
  .creators-mobile__extra,
  .creators-mobile__featured.is-expanded .creators-mobile__extra {
    transform: none;
    transition: visibility 0s;
  }

  .creators-mobile__toggle-chevron { transition: none; }
}

@media (max-width: 390px) {
  .creators-mobile__inner,
  .all-creators-heading,
  .all-creators-main .container { width: min(100% - 32px, 450px); }
}